Skip to content

Instantly share code, notes, and snippets.

@duranmla

duranmla/machine.js

Last active Sep 20, 2020
Embed
What would you like to do?
Generated by XState Viz: https://xstate.js.org/viz
// Available variables:
// - Machine
// - interpret
// - assign
// - send
// - sendParent
// - spawn
// - raise
// - actions
// - XState (all XState exports)
const MINIMAL_DONATION = 5;
const context = {
donation: {
message: '',
status: ''
},
donationType: 'month',
donationMonthlyAmount: MINIMAL_DONATION,
error: null,
billingInformation: {
address: '',
city: '',
zipCode: '',
country: ''
},
cardInformation: {
firstName: '',
lastName: '',
email: '',
phoneNumber: '',
token: null
},
paymentServices: {
stripe: null
}
};
const unionMachine = Machine({
id: 'donation',
context,
initial: 'amountForm',
states: {
amountForm: {
initial: 'donateMonthly',
states: {
donateMonthly: {
entry: ['setMonthlyDonation'],
on: {
NEXT: {
target: '#donation.generalInformationForm',
actions: ['updateDonationMonthlyAmount']
}
}
}
}
},
generalInformationForm: {
initial: 'addressInformationForm',
states: {
addressInformationForm: {
on: {
'EDIT.AMOUNT': '#donation.amountForm.donateMonthly',
'NEXT.ZERO': [
{
target: 'zeroPersonalInformationForm',
cond: 'isAddressFormCompleted',
actions: ['updateAddressInformation']
}
],
NEXT: [
{
target: 'personalInformationForm',
cond: 'isAddressFormCompleted',
actions: ['updateAddressInformation']
}
],
PREV: '#donation.amountForm'
}
},
personalInformationForm: {
on: {
'EDIT.AMOUNT': '#donation.amountForm.donateMonthly',
NEXT: [
{
target: '#donation.processUnion',
cond: 'isPaymentFormCompleted',
actions: [
'updatePaymentServices',
'updatePayeeInformation',
'updateChapterInformation'
]
}
],
PREV: 'addressInformationForm'
}
},
zeroPersonalInformationForm: {
on: {
'EDIT.AMOUNT': '#donation.amountForm.donateMonthly',
NEXT: [
{
target: '#donation.processUnion',
cond: 'isAddressFormCompleted',
actions: [
'updatePayeeInformation',
'updateChapterInformation'
]
}
],
PREV: 'addressInformationForm'
}
},
hist: {
type: 'history',
history: 'shallow'
}
}
},
processUnion: {
invoke: {
id: 'submitDonation',
src: 'donationService',
onDone: {
target: 'success',
actions: assign({ donation: (context, event) => event.data })
},
onError: {
target: 'failure',
actions: assign({ error: (context, event) => event.data })
}
}
},
success: {
type: 'final'
},
failure: {
on: {
RETRY: { target: '#donation.generalInformationForm.hist' }
}
}
}
}, {
guards: {
isPaymentFormCompleted: () => true,
isAddressFormCompleted: () => true
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.