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

machine.js

const USER_TYPE = {
  new_customer_hto: "new_customer_hto",
  new_customer_rx_retail: "new_customer_rx_retail",
  new_customer_rx: "new_customer_rx",
  returning_customer_hto: "returning_customer_hto",
  returning_customer_saved_expired_rx: "returning_customer_saved_expired_rx",
  returning_customer_saved: "returning_customer_saved",
  returning_customer_saved_expired_payment:
    "returning_customer_saved_expired_payment",
  returning_customer_saved_expired_rx_payment:
    "returning_customer_saved_expired_rx_payment",
};

const STATE = {
  auth: "auth",
  cart: "cart",
  delivery: "delivery",
  payment: "payment",
  review: "review",
  rx: "rx",
  shipping: "shipping",
  userType: "userType",
  ...USER_TYPE,
};

const ACTION = {
  check_auth: "check_auth",
  continue: "continue",
  review: "review",
  ...USER_TYPE,
};

const machines = {
  [STATE.new_customer_hto]: {
    initial: STATE.cart,
    states: {
      [STATE.cart]: { on: { [ACTION.check_auth]: STATE.auth } },
      [STATE.auth]: { on: { [ACTION.continue]: STATE.shipping } },
      [STATE.shipping]: { on: { [ACTION.continue]: STATE.payment } },
      [STATE.payment]: { on: { [ACTION.continue]: STATE.review } },
      [STATE.review]: { type: "final" },
    },
  },
  [STATE.returning_customer_hto]: {
    initial: STATE.cart,
    states: {
      [STATE.cart]: { on: { [ACTION.check_auth]: STATE.auth } },
      [STATE.auth]: { on: { [ACTION.continue]: STATE.review } },
      [STATE.review]: { type: "final" },
    },
  },
  [STATE.new_customer_rx]: {
    initial: STATE.cart,
    states: {
      [STATE.cart]: { on: { [ACTION.check_auth]: STATE.auth } },
      [STATE.auth]: { on: { [ACTION.continue]: STATE.rx } },
      [STATE.rx]: { on: { [ACTION.continue]: STATE.shipping } },
      [STATE.shipping]: { on: { [ACTION.continue]: STATE.delivery } },
      [STATE.delivery]: { on: { [ACTION.continue]: STATE.payment } },
      [STATE.payment]: { on: { [ACTION.continue]: STATE.review } },
      [STATE.review]: { type: "final" },
    },
  },
  [STATE.new_customer_rx_retail]: {
    initial: STATE.cart,
    states: {
      [STATE.cart]: { on: { [ACTION.check_auth]: STATE.auth } },
      [STATE.auth]: { on: { [ACTION.continue]: STATE.rx } },
      [STATE.rx]: { on: { [ACTION.continue]: STATE.shipping } },
      [STATE.shipping]: { on: { [ACTION.continue]: STATE.delivery } },
      [STATE.delivery]: { on: { [ACTION.continue]: STATE.review } },
      [STATE.review]: { type: "final" },
    },
  },
  [STATE.returning_customer_saved]: {
    initial: STATE.cart,
    states: {
      [STATE.cart]: { on: { [ACTION.check_auth]: STATE.auth } },
      [STATE.auth]: { on: { [ACTION.continue]: STATE.review } },
      [STATE.review]: { type: "final" },
    },
  },
  [STATE.returning_customer_saved_expired_rx]: {
    initial: STATE.cart,
    states: {
      [STATE.cart]: { on: { [ACTION.check_auth]: STATE.auth } },
      [STATE.auth]: { on: { [ACTION.continue]: STATE.rx } },
      [STATE.rx]: { on: { [ACTION.continue]: STATE.review } },
      [STATE.review]: { type: "final" },
    },
  },
  [STATE.returning_customer_saved_expired_payment]: {
    initial: STATE.cart,
    states: {
      [STATE.cart]: { on: { [ACTION.check_auth]: STATE.auth } },
      [STATE.auth]: { on: { [ACTION.continue]: STATE.payment } },
      [STATE.payment]: { on: { [ACTION.continue]: STATE.review } },
      [STATE.review]: { type: "final" },
    },
  },
  [STATE.returning_customer_saved_expired_rx_payment]: {
    initial: STATE.cart,
    states: {
      [STATE.cart]: { on: { [ACTION.check_auth]: STATE.auth } },
      [STATE.auth]: { on: { [ACTION.continue]: STATE.rx } },
      [STATE.rx]: { on: { [ACTION.continue]: STATE.payment } },
      [STATE.payment]: { on: { [ACTION.continue]: STATE.review } },
      [STATE.review]: { type: "final" },
    },
  },
};

Machine({
  id: "checkout",
  initial: STATE.userType,
  context: {
    isLoggedIn: false,
    userType: null,
  },
  states: {
    [STATE.userType]: {
      on: Object.keys(USER_TYPE).reduce(
        (acc, userType) => ({
          ...acc,
          [userType]: {
            target: STATE.new_customer_hto,
            actions: assign(() => ({ userType })),
          },
        }),
        {}
      ),
    },

    ...machines,
  },
});