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

machine.js

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions
  // - XState (all XState exports)
  
  const fetchMachine = Machine({
    id: "shopping-cart",
    initial: "pre-order",
    states: {
        "pre-order": {
            on: {
                START_NEW_ORDER: "ordering"
            }
        },
        ordering: {
            type: "parallel",
            on: {
                CANCEL_ORDER: "cancelled",
            },
            states: {
                "browsing-products": {
                    initial: "no-items",
                    states: {
                        "no-items": {
                            on: {
                                ADD_ITEM: {actions: ["addCartItem"]},
                            }
                        },
                        "has-items": {
                            on: {
                                ADD_ITEM: {actions: ["addCartItem"]},
                                REMOVE_ITEM: {actions: ["removeCartItem"]},
                                REVIEW_ORDER: "#shopping-cart.ordering.reviewing-order.open",
                            }
                        }
                    }
                },
                "inspecting-product": {
                    initial: "closed",
                    states: {
                        closed: {
                            on: {
                                OPEN_DIALOG: "open"
                            }
                        },
                        open: {
                            on: {
                                CLOSE_DIALOG: "closed",
                                ADD_ITEM: { actions: ["addCartItem"]},
                                REMOVE_ITEM: { actions: ["removeCartItem"]},
                            }
                        },
                    }
                },
                "reviewing-order": {
                    initial: "closed",
                    states: {
                        closed: {
                            on: {
                                REVIEW_ORDER: "open"
                            }
                        },
                        open: {
                            on: {
                                CONFIRM: "#shopping-cart.success",
                                BACK: "closed",
                                SET_PICKUP_TIME: {actions: ["setPickupTime"]},
                                ADD_ITEM: {actions: ["addCartItem"]},
                                REMOVE_ITEM: {actions: ["removeCartItem"]},
                            }
                        },
                    }
                }
            }
        },
        success: {
            type: "final"
        },
        cancelled: {},
    }
})