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

machine.js

// https://xstate.js.org/viz/?gist=96707d1e0906f00009a3d7fd567f18d1
  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions
  // - XState (all XState exports)
  
  const paymentMethodMachine = Machine({
    id: 'paymentMethod',
    initial: 'idle',
    context: {
      retries: 0,
      value: 0,
      maxValue: null,
      canVoid: false,
      error: null,
      responseData: null,
    },
    states: {
      idle: {
        on: {
          UPDATE: {
            target: "idle",
            actions: "update"
          },
          CLEAR: {
            target: "idle",
            actions: "clear"
          },
          SUBMIT: "status.pending"
        }
      },
      status: {
        context: {
          processed: false,
          paymentId: null,
          responseData: null,
          error: null,
        },
        states: {
          pending: {
            on: {
              RESOLVE: {
                target: "#paymentMethod.status.voidable",
                actions: assign({
                  processed: true,
                  paymentId: (c, e) => c.paymentId = e.data,
                  responseData: (c, e) => c.responseData = e.data,
                })
              },
              REJECT: {
                target: "#paymentMethod.error",
                actions: assign({
                  error: (c, e) => c.error = e.data,
                  processed: false,
                })
              },
            }
          },
          voidable: {
            on: {
              VOID: {
                target: "#paymentMethod.status.pending"
              }
            }
          },
        },
      },
      error: {
        on: {
          CLEAR: {
            target: "idle",
            actions: "clear",
          },
          UPDATE: {
            target: "idle",
            actions: "update"
          },
        },
      },
      // pending a delete from parent, haven't figure this out yet
      purgatory: {
        type: "final"
      }
    }
  }, {
    actions: {
      clear: assign({
        value: (c, e) => c.value = 0
      }),
      update: assign({
        value: (c, e) => c.value = e.data
      }),
    }
  });