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

machine.js

const paymentMachine = Machine({
  id: "payment",
  initial: "products",
  context: {
    items: 0,
    paymentForm: null,
    retries: 0,
  },
  states: {
    products: {
      on: {
        ADD_PRODUCT: {
          target: "products",
          actions: assign({
            items: (context, event) => context.items + 1,
          }),
          cond: (context, event) => context.items < 10,
        },
        REMOVE_PRODUCT: {
          target: "products",
          actions: assign({
            items: (context, event) => context.items - 1,
          }),
          cond: (context, event) => context.items > 0,
        },
        CONFIRM: {
          target: "payment",
          cond: (context, event) => context.items > 0,
        },
      },
    },
    payment: {
      on: {
        CONFIRM: "processing",
      },
    },
    processing: {
      id: "processing",
      on: {
        SUCCESS_EMPTY: "success.empty",
        SUCCESS_ITEMS: "success.items",
        FAILURE: "failure",
      },
    },
    success: {
      states: {
        empty: {
          type: "final",
        },
        items: {
          type: "final",
        },
      },
      on: {
        RESET: "products",
      },
    },
    failure: {
      on: {
        '': [
          {
            target: 'retry',
              cond: (context, event) => {
              // check if player won
              console.log(context.retries < 3)
              return context.retries < 3;
            },
          },
          {
            target: "fatal",
            cond: (context, event) => {
              return context.retries > 3;
            },
          },
        ],
      },
          retry: {
            id: 'retry',
          on: {
            RETRY: {
              target: '#processing',
              actions: assign({
                retries: (context, event) => context.retries + 1,
              }),
            },
          },
        },
        fatal: {
        },
      },
  },
});

const paymentService = interpret(paymentMachine);