Generated by XState Viz: https://xstate.js.org/viz

machine.js

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions
  // - XState (all XState exports)

const donationWizardMachine = Machine({
  id: 'donation',
  initial: 'amountForm',
  states: {
    amountForm: {
      initial: 'donateOnce',
      states: {
        donateOnce: {
          on: {
            NEXT: '#donation.paymentForm',
            'START.MONTHLY': 'donateMonthly'
          }
        },
        donateMonthly: {
          on: {
            NEXT: '#donation.paymentForm',
            'START.ONCE': 'donateOnce'
          }
        },
        hist: {
          type: 'history',
          history: 'shallow'
        }
      }
    },
    paymentForm: {
      initial: 'cardForm',
      states: {
        cardForm: {
          on: {
            NEXT: [{ target: 'addressForm', cond: 'paymentFormCompleted' }],
            PREV: '#donation.amountForm.hist',
            'START.ONCE': '#donation.amountForm.donateOnce',
            'START.MONTHLY': '#donation.amountForm.donateMonthly'
          }
        },
        addressForm: {
          on: {
            NEXT: [
              {
                target: '#donation.processDonation',
                cond: 'addressFormCompleted'
              }
            ],
            PREV: 'cardForm',
            'START.ONCE': '#donation.amountForm.donateOnce',
            'START.MONTHLY': '#donation.amountForm.donateMonthly'
          }
        }
      }
    },
    processDonation: {
      invoke: {
        id: 'submitDonation',
        src: (context, event) => sendDonation(context.userId),
        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.paymentForm.addressForm' }
      }
    }
  }
}, 
{
  guards: {
      paymentFormCompleted: (context, event) => {
        // this needs to be implemented
        return true;
      },
      addressFormCompleted: (context, event) => {
        // this needs to be implemented
        return true
      }
    }
  }
);