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

machine.js

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