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

machine.js

  const checkpointStates = {
  initial: 'wait',
  states: {
    wait: {
      after: {
        1000: 'speakToOfficer'
      }
    },
    speakToOfficer: {
      after: {
        1000: 'presentPassport'
      }
    },
    presentPassport: {
      after: {
        1000: 'checked'
      }
    },
    checked: {
      after: {
        1000: 'clear'
      }
    },
  }
};

const accidentStates = {
  initial: 'occur',
  states: {
    occur: {
      after: {
        100: 'evaluate'
      }
    },
    evaluate: {
      after: {
        100: 'decide'
      }
    },
    decide: {}
  }
};

const carTransit = {
  initial: 'onCar',
  states : {
      onCar: {
        on: {
          onRouteWoodlands: 'transitToWoodlands',
          onRouteTuas: 'transitToTuas',
        }
      },
      transitToWoodlands: {
        after: {
          500: 'arriveWoodlands'
        }
      },
      transitToTuas: {
        after: {
          500: 'arriveTuas'
        }
      },
      arriveWoodlands:{
      },
      arriveTuas: {
        
      },
  }
}
const busTransitJurong = {
  initial: 'onBus',
  states : {
      onBus: {
        on: {
          onRouteWoodlands: 'transitToWoodlands',
          onRouteTuas: 'transitToTuas',
        }
      },
      transitToWoodlands: {
        after: {
          2000: 'arriveWoodlands'
        }
      },
      transitToTuas: {
        after: {
          1000: 'arriveTuas'
        }
      },
      arriveWoodlands:{
      },
      arriveTuas: {
        
      },
  }
}

const busTransitExpo = {
  initial: 'onBus',
  states : {
      onBus: {
        on: {
          onRouteWoodlands: 'transitToWoodlands',
          onRouteTuas: 'transitToTuas',
        }
      },
      transitToWoodlands: {
        after: {
          2000: 'arriveWoodlands'
        }
      },
      transitToTuas: {
        after: {
          2500: 'arriveTuas'
        }
      },
      arriveWoodlands:{
      },
      arriveTuas: {
        
      },
  }
}

const vehicle = {vehicle: ''};

const fetchMachine = Machine({
    id: 'Cross-Border Travel',
    initial: 'DecideToTravel',
    context: {
      retries: 0
    },
    states: {
      DecideToTravel: {
        on: {
          ChooseCar: {
            target:'Car',},
          ChooseBus: 'Bus'
        }
      },
      Car: {
        on: {
          startJourney: 'carTransit',
        },
      },
      carTransit: {
        on: {
          arriveWoodlands: {
            target:'WoodlandsCheckpoint',
            in: 'carTransit.arriveWoodlands'
          },
          arriveTuas: {
            target:'TuasCheckpoint',
            in: 'carTransit.arriveTuas'
          }
        },
        ... carTransit
      },
      Bus: {
        on: {
          chooseJurong: 'JurongDepot',
          chooseExpo: 'ExpoDepot'
          }
      },
      JurongDepot: {
        on: {
          goJurong: 'goByJurong',
        }
      },
      ExpoDepot: {
        on: {
          goExpo: 'goByExpo'
        }
      },

      goByJurong: {
        on: {
          arriveWoodlands: {
            target:'WoodlandsCheckpoint',
            in:'goByJurong.arriveWoodlands'
          },
          arriveTuas: {
            target:'TuasCheckpoint',
            in:'goByJurong.arriveTuas'
          }
        },
        ...busTransitJurong
      },
      goByExpo: {
        on: {
          arriveWoodlands: {
            target:'WoodlandsCheckpoint',
            in:'goByExpo.arriveWoodlands'
          },
          arriveTuas: {
            target:'TuasCheckpoint',
            in:'goByExpo.arriveTuas'
          }
        },
        ...busTransitExpo
      },
      WoodlandsCheckpoint:{
        on: {
          carEnters: {
            target:'WoodlandsQueue'},
          disembark: {
            target:'pedestrianQueueWoodlands',
          }
        }
      },
      TuasCheckpoint: {
        on: {
          carEnters: 'TuasQueue',
          disembark: 'pedestrianQueueTuas'
        }
      },
      WoodlandsQueue: {
        after: {
          500: 'arriveWoodlandsCheck'
        }
      },
      TuasQueue: {
        after: {
          500: 'arriveTuasCheck'
        }
      },
      arriveWoodlandsCheck: {
        on: {
          success: 'onRoute',
          detained: 'interviewRoom'
        },
        ...checkpointStates
      },
      arriveTuasCheck: {
        on: {
          success: 'onRoute',
          detained: 'interviewRoom'
        },
        ...checkpointStates
      },
      onRoute: {
        on: {
          incident: 'accident'
        },
        after: {
          50000: 'MalaysiaBorder'
        }
      },
      pedestrianQueueTuas: {
        after: {
          1000: 'arriveTuasCheckBus'
        }
      },
      pedestrianQueueWoodlands: {
        after: {
          1000: 'arriveWoodlandsCheckBus'
        }
      },
      arriveTuasCheckBus: {
        on: {
          success: 'busbay',
          detained: 'interviewRoom'
        },
        ...checkpointStates
      },

      arriveWoodlandsCheckBus: {
        on: {
          success: 'busbay',
          detained: 'interviewRoom'
        },
        ...checkpointStates
      },
      busbay: {
        after: {
          3000: 'missedBus'
        },
        on: {
          catchBus: 'onBus'
        },
      },
      missedBus: {
        on: {
          wait: 'busbay'
        }
      },
      onBus: {
        after: {
          5000: 'MalaysiaBorder'
        },
        on: {
          incident: 'accident'
        },
      },
      accident: {
        ...accidentStates
      },
      interviewRoom: {
        type: 'final'
      },
      MalaysiaBorder: {
        type: 'final'
      }
    }
  });