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 modalMachine = Machine({
    id: 'settlement_actions',
    initial: 'initialize',
    context: {
      hasBankAccount: false,
    },
    states: {
      initialize: {
        on: {
          START: [
            {
              target: 'debtleActive',
              cond: (ctx, _ev) => ctx.hasBankAccount === true,
            },
            {
              target: 'plaidActive',
              cond: (ctx, _ev) => ctx.hasBankAccount === false,
            },
          ],
        },
      },
      plaidActive: {
        entry: 'bindPlaid',
        on: {
          OPEN_PLAID: 'plaidOpen',
          DECLINE: 'finish',
        },
      },
      plaidOpen: {
        entry: 'openPlaid',
        on: {
          PLAID_EXIT: {
            target: "plaidActive",
            actions: "closeModals",
          },
          PLAID_ERROR: {
            target: "plaidActive",
            actions: ["flashMessage", "closeModals"],
          },
          PLAID_SUCCESS: {
            target: "debtleLoading",
            actions: ["flashMessage"],
          },
        },
      },
      debtleLoading: {
        invoke: {
          id: 'attemptSaveBankAccount',
          src: (_ctx, ev) => attemptSaveBankAccount(ev.formData),
          onDone: {
            target: 'debtleActive',
            actions: [
              assign({
                hasBankAccount: true,
              }),
              "flashMessage",
              "closeModals",
            ],
          },
          onError: {
            target: "plaidActive",
            actions: ["closeModals", "flashMessage"],
          },
        },
      },
      debtleActive: {
        entry: 'bindDebtle',
        on: {
          // Note: for Accept Confirmation feature
          OPEN_ACCEPT: {
            target: 'acceptOpen',
          },
          OPEN_COUNTER: 'counterOpen',
          DECLINE: 'finish',
        },
      },
      counterOpen: {
        entry: 'openCounter',
        on: {
          COUNTER_CONFIRM: {
            target: 'finish',
            actions: 'closeModals',
          },
          COUNTER_EXIT: {
            target: 'debtleActive',
            actions: ['closeModals'],
          },
        },
      },
      acceptOpen: {
        entry: 'openAccept',
        on: {
          ACCEPT_CONFIRM: {
            target: 'finish',
            actions: 'closeModals',
          },
          ACCEPT_EXIT: {
            target: 'debtleActive',
            actions: 'closeModals',
          },
        },
      },
      finish: {
        entry: 'submitSettlement',
        type: 'final',
      },
    },
    actions: {
      saveBankAccount: (ctx, ev) => {
        console.log('Saving bank account to Debtle...')
      },
      submitSettlement: (ctx, ev) => {
        console.log('Submitted the Settlement update form to Debtle Core')
      },
      bindDebtle: (ctx, ev) => {
        console.log("binding buttons to Debtle modals")
      },
      bindPlaid: (ctx, ev) => {
        console.log("binding buttons to Plaid modals")
      },
      unbindAll: (ctx, ev) => {
        console.log("unbinding all JS handler from buttons")
      },
      closeModals: (ctx, ev) => {
        console.log("closing all modals");
      },
      openAccept: (ctx, ev) => {
        console.log("opening Accept modal")
      },
      openCounter: (ctx, ev) => {
        console.log("opening Counter modal")
      },
      openPlaid: (ctx, ev) => {
        console.log("opening Plaid modal")
      },
      flashMessage: (ctx, ev) => {
        console.log('flash success message!')
      },
    }
  });