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 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
  }
});