Skip to content

Instantly share code, notes, and snippets.

@scarabaeus
Last active Sep 16, 2021
Embed
What would you like to do?
Generated by XState Viz: https://xstate.js.org/viz
// https://xstate.js.org/viz/?gist=f48e92c2eca22f9af7eeb1b9ce8cebfa
const fetchMachine = Machine({
id: 'toggle',
initial: 'paymentAgreement',
context: {
paymentMethod: '',
debitMaximum: 50000,
checkMinimum: 100,
},
states: {
paymentAgreement: {
context: {
localeKey: 'paymentAgreement',
formComponent: 'PaymentAgreement',
submitActionProps: {
url: '/dwolla/customers',
method: 'POST',
},
backButtonProps: {
isHidden: true,
},
},
on: {
NEXT: 'customerLookupLoading',
},
},
customerLookupLoading: {
on: {
SUCCESS: 'paymentMethod',
ERROR: 'unrecoverableError',
},
},
paymentMethod: {
context: {
submitActionProps: null,
localeKey: 'paymentMethod',
formComponent: 'PaymentMethod',
backButtonProps: {
isHidden: true,
},
},
on: {
DEBIT: {
target: 'paymentMethod',
actions: 'debitPayment',
},
BANK: {
target: 'paymentMethod',
actions: 'bankPayment',
},
CHECK: {
target: 'paymentMethod',
actions: 'checkPayment',
},
NEXT: 'methodSelected',
},
},
methodSelected: {
on: {
'': [
{ target: 'getDebitPaymentToken', cond: 'debitSelected' },
{ target: 'bankingFundingSource', cond: 'bankSelected' },
{ target: 'checkFundingSource', cond: 'checkSelected' },
{ target: 'paymentMethod' },
],
},
},
getDebitPaymentToken: {
context: {},
on: {
SUCCESS: {
target: 'debitFundingSource',
},
ERROR: {
target: 'error',
},
UNRECOVERABLE_ERROR: {
target: 'unrecoverableError',
},
},
},
debitFundingSource: {
context: {
submitActionProps: null,
localeKey: 'debitFundingSource',
formComponent: 'DebitFundingSource',
submitProps: {},
},
on: {
NEXT: {
target: 'debitPost',
},
BACK: {
target: 'paymentMethod',
},
},
},
debitPost: {
on: {
SUCCESS: {
target: 'submissionSuccess',
},
ERROR: {
target: 'error',
},
},
},
bankingFundingSource: {
context: {
localeKey: 'bankFundingSource',
formComponent: 'BankingFundingSource',
showConfirmModal: true,
submitActionProps: {
url: '/dwolla/funding-sources',
method: 'POST',
},
},
on: {
NEXT: {
target: 'bankPost',
},
BACK: {
target: 'paymentMethod',
},
},
},
bankPost: {
on: {
SUCCESS: {
target: 'submissionSuccess',
},
ERROR: {
target: 'error',
},
},
},
checkFundingSource: {
context: {
localeKey: 'checkFundingSource',
formComponent: 'CheckFundingSource',
submitActionProps: {},
},
on: {
NEXT: {
target: 'checkPost',
},
BACK: {
target: 'paymentMethod',
},
},
},
checkPost: {
on: {
SUCCESS: {
target: 'submissionSuccess',
},
ERROR: {
target: 'error',
},
},
},
submissionSuccess: {
context: {
submitActionProps: null,
formComponent: 'SubmissionSuccess',
submitAction: '',
backButtonProps: {
isHidden: true,
},
nextButtonProps: {
isHidden: true,
},
},
type: 'final',
},
error: {
context: {
formComponent: 'Error',
},
on: {
RETRY: {
target: 'paymentAgreement',
},
},
},
unrecoverableError: {
context: {
formComponent: 'UnrecoverableError',
},
type: 'final',
},
},
}, {
actions: {
debitPayment: (context, event) => context.paymentMethod = 'debit',
bankPayment: (context, event) => context.paymentMethod = 'bank',
checkPayment: (context, event) => context.paymentMethod = 'check'
},
guards: {
debitSelected: (ctx, a, b, c) => ctx.paymentMethod === 'debit',
bankSelected: (ctx) => ctx.paymentMethod === 'bank',
checkSelected: (ctx) => ctx.paymentMethod === 'check'
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment