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

machine.js

const TRANSITIONS = {
  BACK: 'BACK',
  CONTINUE: 'CONTINUE',
};


const STATES = {
  ENTREE: 'ENTREE',
  COMBO: 'COMBO',
  DRINK: 'DRINK',
  TOPPINGS: 'TOPPINGS',
  SAUCE: 'SAUCE',
  NAME: 'NAME',
  ORDER_CONFIRMATION: 'ORDER_CONFIRMATION',
};

const INPUTS = {
  ENTREE: 'ENTREE',
  COMBO: 'COMBO',
  DRINK: 'DRINK',
  TOPPINGS: 'TOPPINGS',
  SAUCE: 'SAUCE',
  NAME: 'NAME',
};

const GUARDS = {
  IS_COMBO: 'IS_COMBO',
  IS_NUGGETS: 'IS_NUGGETS',
};

const SECTIONS = {
  STEP_LABEL: 'Section',
  MEAL: 'Choose meal',
  CUSTOMIZE: 'Customize meal',
  ORDER: 'Place order',
  SECTION_LENGTH: 3,
};


const fetchMachine = Machine({
  id: 'exampleNerdcafeFlow',
  initial: STATES.ENTREE,
  states: {
    [STATES.ENTREE]: {
      on: {
        [TRANSITIONS.CONTINUE]: STATES.COMBO,
      },
    },
    [STATES.COMBO]: {
      on: {
        [TRANSITIONS.BACK]: STATES.ENTREE,
        [TRANSITIONS.CONTINUE]: [
          {
            target: STATES.DRINK,
            cond: GUARDS.IS_COMBO,
          },
          {
            target: STATES.SAUCE,
            cond: GUARDS.IS_NUGGETS,
          },
          {
            target: STATES.TOPPINGS,
          },
        ],
      },
    },
    [STATES.DRINK]: {
      on: {
        [TRANSITIONS.BACK]: STATES.COMBO,
        [TRANSITIONS.CONTINUE]: [
          {
            target: STATES.SAUCE,
            cond: GUARDS.IS_NUGGETS,
          },
          {
            target: STATES.TOPPINGS,
          },
        ],
      },
    },
    [STATES.TOPPINGS]: {
      on: {
        [TRANSITIONS.BACK]: [
          {
            target: STATES.DRINK,
            cond: GUARDS.IS_COMBO,
          },
          {
            target: STATES.COMBO,
          },
        ],
        [TRANSITIONS.CONTINUE]: STATES.NAME,
      },
    },
    [STATES.SAUCE]: {
      on: {
        [TRANSITIONS.BACK]: [
          {
            target: STATES.DRINK,
            cond: GUARDS.IS_COMBO,
          },
          {
            target: STATES.COMBO,
          },
        ],
        [TRANSITIONS.CONTINUE]: STATES.NAME,
      },
    },
    [STATES.NAME]: {
      on: {
        [TRANSITIONS.BACK]: [
          {
            target: STATES.SAUCE,
            cond: GUARDS.IS_NUGGETS,
          },
          {
            target: STATES.TOPPINGS,
          },
        ],
        [TRANSITIONS.CONTINUE]: STATES.ORDER_CONFIRMATION,
      },
    },
    [STATES.ORDER_CONFIRMATION]: {
      type: 'final',
    },
  },
});