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 fetchUser = userId =>
  fetch(`url/to/user/${userId}`).then(response => response.json());
  
  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: {
        initial: 'idle',
        states: {
          idle: {
            on: {
              SEARCH: {
                target: 'loading'
              }
            },
          },
          loading: {
            invoke: {
              id: 'getRoutes',
              src: (context, event) => fetchUser(context.userId),
              onDone: {
                target: 'success',
                actions: assign({ user: (context, event) => event.data })
              },
              onError: {
                target: 'error',
                actions: assign({ error: (context, event) => event.data })
              }
            }
          },
          success: {
              
          },
          error: {
              
          },
        },
        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
    }
  });