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

machine.js

const summaryState = {
  type: 'parallel',
  initial: 'loadOrder',
  states: {
    loadOrder: {
      initial: 'loadingOrder',
      states: {
        idle: {},
        loadingOrder: {
          on: {
            SUCCESS: 'idle',
            ERROR: 'errorLoadingOrder'
          }
        },
        errorLoadingOrder: {
          on: {
            RETRY: 'loadingOrder'
          }
        }
      }
    },
    completeOrder: {
      initial: 'idle',
      states: {
        idle: {
          
        },
        completingOrder: {
          on: {
            SUCCESS: 'idle',
            ERROR: 'idle'
          }
        },
      }
    },
    cancelOrder: {
      initial: 'idle',
      states: {
        idle: {},
        cancellingOrder: {
          on: {
            SUCCESS: 'idle',
            ERROR: 'idle'
          }
        },
      }
    },
  },
  on: {
    COMPLETE_ORDER: 'summary.completeOrder.completingOrder',
    CANCEL_ORDER: 'summary.cancelOrder.cancellingOrder'
  }
};

const priceCalculationState = {
  initial: 'idle',
  states: {
    idle: {},
    calculatingPrice: {
      on: {
        SUCCESS: 'idle',
        ERROR: 'calculatingPriceError',
        NO_ITEMS_ADDED: 'idle'
      }
    },
    calculatingPriceError: {
      on:{
        RETRY: 'calculatingPrice'
      }
    }
  }
};

const paymentSelectionState = {
  initial: 'none',
  states: {
    none: {},
    selected: {}
  }
};

const createOrderState = {
  initial: 'idle',
  states: {
    idle: {},
    creatingOrder: {
      on: {
        SUCCESS: 'idle',
        ERROR: 'errorCreatingOrder',
      },
    },
    errorCreatingOrder: {}
  },
};

const checkoutState = {
  type: 'parallel',
  initial: 'priceCalculation',
  on: {
    QUANTITY_CHANGED: 'checkout.priceCalculation.calculatingPrice',
    PAYMENT_SELECTED: 'checkout.paymentSelection.selected',
    CREATE_ORDER: 'checkout.createOrder.creatingOrder'
  },
  states: {
    priceCalculation :  {
         ...priceCalculationState
    },
    createOrder :  {
         ...createOrderState
    },
    paymentSelection: {
      ...paymentSelectionState
    }
  },
};


const newOrderState = {
  initial: 'loadingMenu',
  states: {
    loadingMenu: {
      on: {
        SUCCESS: 'checkout',
        ERROR: 'errorLoadingMenu'
      }
    },
    errorLoadingMenu: {
      on:{
        RETRY: 'loadingMenu'
      }
    },
    checkout: {
      ...checkoutState
    }
  },
  on: {
    ORDER_CREATED_PAID: 'summary',
    ORDER_CREATED_UNPAID: 'payment'
  }
}

const paymentState = {
  initial: 'idle',
  states: {
    idle: {}
  }
};

const manualOrderStates = Machine({
  key: 'orders',
  initial: 'init',
  states: {
    init: {
      on: {
        NEW_ORDER: 'newOrder',
        PAID_ORDER: 'summary',
        UNPAID_ORDER: 'payment',
      },
    },
     newOrder: {
      ...newOrderState
    },
     summary : {
         ...summaryState
     }, 
     payment : {
         ...paymentState
     },
  },
});