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 stepMachine = Machine({
    id: 'stepMachine',
    initial: 'stepOne',
    context: {
      cart: {
        passengers: 0,
        vehicles: 0,
      },
      tripType: "SINGLE",
      steps: {
        one: {
          valid: false,
          completed: false
        },
        two: {
          valid: false,
          completed: false
        },
        three: {
          valid: false,
          completed: false
        }
      }
    },
    states: {
      stepOne: {
        on: {
          SUBMIT: {
            target: 'stepTwo',
            actions: 'submitOne',
         
          },
          TO_STEP_2: {
            target: 'stepTwo',
            cond: 'isOneCompleted'
          },
          TO_STEP_3: {
            target: 'stepThree',
            cond: 'isTwoCompleted'
          },
          SET_TRIP_TYPE: {
            actions: 'setTripType'
          },
          SET_VEHICLES: {
            actions: 'setVehicles'
          },
          SET_PASSENGERS: {
            actions: 'setPassengers'
          }
        }
      },
      stepTwo: {
          on: {
            SUBMIT: {
            target: 'stepThree',
            actions: 'submitTwo',
         
          },
          TO_STEP_1: {
            target: 'stepOne',
            cond: 'isOneCompleted'
          },
          TO_STEP_3: {
            target: 'stepThree',
            cond: 'isTwoCompleted'
          }
        }
      },
      stepThree: {
        on: {
          TO_STEP_2: {
            target: 'stepTwo',
            cond: 'isTwoCompleted'
          },
          TO_STEP_1: {
            target: 'stepOne',
            cond: 'isOneCompleted'
          }
        }
      }
    }
  }, {
    actions: {
      submitOne: assign({
        steps: ctx => ({
          ...ctx.steps,
          one: {
            completed: true  
          }
        })
      }),
      submitTwo: assign({
        steps: ctx => ({
          ...ctx.steps,
          two: {
            completed: true  
          }
        })
      }),
      setTripType: assign({
        tripType: (_, e) => e.payload
      }),
      setPassengers: assign({
        cart: (ctx, e) => ({
          ...ctx.cart,
          passengers: e.payload
        })
      }),
      setVehicles: assign({
        cart: (ctx, e) => ({
          ...ctx.cart,
          vehicles: e.payload
        })
      }),
      goBack: () => console.log('go back'),
      submit: () => console.log('submit')
    },
    guards: {
      isOneValid: ctx => ctx.steps.one.valid,
      isOneCompleted: ctx => ctx.steps.one.completed,
      isTwoCompleted: ctx => ctx.steps.two.completed,
      isThreeCompleted: ctx => ctx.steps.three.completed
    }
  });