Last active
September 16, 2021 07:34
-
-
Save TibsGracia/78f57ac4186d101f6a430321aa163d0e to your computer and use it in GitHub Desktop.
Generated by XState Viz: https://xstate.js.org/viz
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const context = { | |
| application_config: { | |
| max_attempts: 5, | |
| }, | |
| application_data: { | |
| attempts: 0, | |
| }, | |
| } | |
| const config = { | |
| initial: 'loading', | |
| context, | |
| states: { | |
| loading: { | |
| id: 'loading', | |
| initial: 'get_application_config', | |
| states: { | |
| get_application_config: { | |
| after: { | |
| TIMEOUT_MS: 'request_timeout', | |
| }, | |
| invoke: { | |
| id: 'get-application-config', | |
| src: 'getApplicationConfig', | |
| }, | |
| on: { | |
| SUCCESS: [ | |
| { | |
| cond: 'isNewReservation', | |
| actions: ['assignApplicationConfig'], | |
| target: 'create_reservation', | |
| }, | |
| { | |
| actions: ['assignApplicationConfig'], | |
| target: 'get_application_data', | |
| }, | |
| ], | |
| FAILED: { | |
| actions: ['toastGetApplicationConfigErrorMessage'], | |
| target: '#error', | |
| }, | |
| }, | |
| }, | |
| get_application_data: { | |
| after: { | |
| TIMEOUT_MS: 'request_timeout', | |
| }, | |
| invoke: { | |
| id: 'get-application-data', | |
| src: 'getApplicationData', | |
| }, | |
| on: { | |
| SUCCESS: { | |
| actions: ['assignApplicationData'], | |
| target: '#ready', | |
| }, | |
| FAILED: { | |
| actions: ['toastGetApplicationDataErrorMessage'], | |
| target: '#error', | |
| }, | |
| }, | |
| }, | |
| create_reservation: { | |
| id: 'initial_reservation', | |
| invoke: { | |
| id: 'create-initial-reservation', | |
| src: 'createInitialReservation', | |
| }, | |
| on: { | |
| CREATED: { | |
| actions: ['assignReservationDetails'], | |
| target: 'create_application_data', | |
| }, | |
| }, | |
| }, | |
| create_application_data: { | |
| invoke: { | |
| id: 'create-initial-application-data', | |
| src: 'createInitialApplicationData', | |
| }, | |
| on: { | |
| CREATED: { | |
| actions: ['assignApplicationData'], | |
| target: '#ready', | |
| }, | |
| }, | |
| }, | |
| request_timeout: { | |
| entry: 'toastTimeoutMessage', | |
| on: { | |
| REFRESH: { | |
| target: 'get_application_config', | |
| }, | |
| }, | |
| }, | |
| }, | |
| }, | |
| ready: { | |
| id: 'ready', | |
| // initial: 'step_partner', | |
| on: { | |
| ON_LEAP_RESERVATION_STEP: { | |
| actions: ['sendStepperEvent'], | |
| }, | |
| STEP_PARTNER: { | |
| target: '#step-partner', | |
| }, | |
| STEP_GUEST: { | |
| target: '#step-guest', | |
| }, | |
| STEP_LOCATION: { | |
| cond: 'hasSelectedGuestID', | |
| target: '#step-location', | |
| }, | |
| STEP_TAILNUMBER: { | |
| cond: 'hasSelectedLocationIDs', | |
| target: '#step-tailnumber', | |
| }, | |
| STEP_DATES: { | |
| cond: 'hasSelectedTailnumberIDs', | |
| target: '#step-dates', | |
| }, | |
| STEP_VEHICLE: { | |
| cond: 'hasSelectedDates', | |
| target: '#step-vehicle', | |
| }, | |
| STEP_PREFERENCES: { | |
| cond: 'hasSelectedVehicleID', | |
| target: '#step-preferences', | |
| }, | |
| STEP_NOTIFICATION: { | |
| target: '#step-notification', | |
| }, | |
| }, | |
| type: 'parallel', | |
| states: { | |
| app_data_editor: { | |
| id: 'app-data-editor', | |
| initial: 'idle', | |
| states: { | |
| idle: { | |
| entry: [], | |
| }, | |
| update_app_data: { | |
| id: 'update-app-data-partner', | |
| entry: ['disableNextButton'], | |
| invoke: { | |
| id: 'app-data-partner-handler', | |
| src: 'handleUpdateAppData', | |
| onDone: { | |
| actions: ['logEvent'], | |
| target: 'idle', | |
| }, | |
| onError: { | |
| actions: ['logEvent'], | |
| }, | |
| }, | |
| exit: ['enableNextButton'], | |
| }, | |
| update_app_dates: { | |
| id: 'update-app-data-partner', | |
| entry: ['disableNextButton'], | |
| invoke: { | |
| id: 'app-data-partner-handler', | |
| src: 'handleUpdateAppData', | |
| onDone: { | |
| actions: ['logEvent'], | |
| target: 'idle', | |
| }, | |
| onError: { | |
| actions: ['logEvent'], | |
| }, | |
| }, | |
| exit: ['enableNextButton'], | |
| }, | |
| }, | |
| }, | |
| wizard: { | |
| initial: 'step_partner', | |
| states: { | |
| step_partner: { | |
| id: 'step-partner', | |
| entry: ['hidePreviousButton', 'enableNextButton'], | |
| invoke: [ | |
| { | |
| id: 'step-partner-handler', | |
| src: 'handleStepPartner', | |
| }, | |
| ], | |
| on: { | |
| NEXT: { | |
| target: '#step-partner.update_reservation', | |
| }, | |
| ON_DATA_CHANGED_PARTNER: [ | |
| { | |
| actions: ['logEvent', 'assignPartnerToReservationData'], | |
| target: '#app-data-editor.update_app_data', | |
| }, | |
| ], | |
| REMOVE_PARTNER: [ | |
| { | |
| actions: ['logEvent', 'assignRemovePartner'], | |
| target: '#app-data-editor.update_app_data', | |
| }, | |
| ], | |
| REMOVE_REPRESENTATIVE: [ | |
| { | |
| actions: ['logEvent', 'assignRemoveRepresentativePartner'], | |
| target: '#app-data-editor.update_app_data', | |
| }, | |
| ], | |
| }, | |
| initial: 'idle', | |
| states: { | |
| idle: { | |
| entry: [], | |
| }, | |
| update_reservation: { | |
| entry: ['disableNextButton', 'sendToStepPartnerHandler'], | |
| exit: ['enableNextButton'], | |
| on: { | |
| UPDATED: { | |
| actions: ['logEvent'], | |
| target: '#step-guest', | |
| }, | |
| }, | |
| }, | |
| }, | |
| }, | |
| step_guest: { | |
| id: 'step-guest', | |
| entry: ['disableNextButton'], | |
| invoke: [ | |
| { | |
| id: 'step-guest-handler', | |
| src: 'handleStepGuest', | |
| }, | |
| ], | |
| on: { | |
| NEXT: { | |
| target: '#step-guest.update_reservation', | |
| }, | |
| PREVIOUS: { | |
| actions: ['disablePreviousButton'], | |
| target: '#step-partner', | |
| }, | |
| ON_DATA_CHANGED_GUEST: [ | |
| { | |
| actions: ['logEvent', 'assignGuestToReservationData'], | |
| target: '#app-data-editor.update_app_data', | |
| }, | |
| ], | |
| }, | |
| initial: 'idle', | |
| states: { | |
| idle: { | |
| entry: [], | |
| }, | |
| update_reservation: { | |
| entry: ['disableNextButton', 'sendToStepGuestHandler'], | |
| exit: ['enableNextButton'], | |
| on: { | |
| UPDATED: { | |
| actions: ['logEvent'], | |
| target: '#step-location', | |
| }, | |
| }, | |
| }, | |
| }, | |
| }, | |
| step_location: { | |
| id: 'step-location', | |
| entry: ['disableNextButton'], | |
| invoke: [ | |
| { | |
| id: 'step-location-handler', | |
| src: 'handleStepLocation', | |
| }, | |
| ], | |
| on: { | |
| NEXT: { | |
| target: '#step-location.update_reservation', | |
| }, | |
| PREVIOUS: { | |
| target: '#step-guest', | |
| }, | |
| ON_DATA_CHANGED_LOCATION: { | |
| actions: ['logEvent', 'assignLocationToReservationData'], | |
| target: '#app-data-editor.update_app_data', | |
| }, | |
| }, | |
| initial: 'idle', | |
| states: { | |
| idle: { | |
| entry: [], | |
| }, | |
| update_reservation: { | |
| entry: ['disableNextButton', 'sendToStepLocationHandler'], | |
| exit: ['enableNextButton'], | |
| on: { | |
| UPDATED: { | |
| actions: ['logEvent'], | |
| target: '#step-tailnumber', | |
| }, | |
| }, | |
| }, | |
| }, | |
| }, | |
| step_tailnumber: { | |
| id: 'step-tailnumber', | |
| entry: ['enableNextButton'], | |
| invoke: [ | |
| { | |
| id: 'step-tailnumber-handler', | |
| src: 'handleStepTailNumber', | |
| }, | |
| ], | |
| on: { | |
| NEXT: { | |
| target: '#step-tailnumber.update_reservation', | |
| }, | |
| PREVIOUS: { | |
| target: '#step-location', | |
| }, | |
| ON_DATA_CHANGED_TAILNUMBER: [ | |
| { | |
| cond: 'isSameTailNumberData', | |
| actions: ['enableNextButton'], | |
| }, | |
| { | |
| actions: ['logEvent', 'assignTailNumberToReservationData'], | |
| target: '#app-data-editor.update_app_data', | |
| }, | |
| ], | |
| }, | |
| initial: 'idle', | |
| states: { | |
| idle: { | |
| entry: [], | |
| }, | |
| update_reservation: { | |
| entry: ['disableNextButton', 'sendToStepTailNumberHandler'], | |
| exit: ['enableNextButton'], | |
| on: { | |
| UPDATED: { | |
| actions: ['logEvent'], | |
| target: '#step-dates', | |
| }, | |
| }, | |
| }, | |
| }, | |
| }, | |
| step_dates: { | |
| id: 'step-dates', | |
| entry: ['disableNextButton'], | |
| invoke: [ | |
| { | |
| id: 'step-date-events-handler', | |
| src: 'handleStepDateEvents', | |
| }, | |
| ], | |
| on: { | |
| NEXT: { | |
| target: '#step-dates.update_reservation', | |
| }, | |
| PREVIOUS: { | |
| target: '#step-tailnumber', | |
| }, | |
| ON_DATA_CHANGED_DATE: [ | |
| { | |
| cond: 'isSameDatesData', | |
| actions: ['enableNextButton'], | |
| }, | |
| { | |
| actions: ['logEvent', 'assignDatesEventToReservationData'], | |
| target: '#app-data-editor.update_app_dates', | |
| }, | |
| ], | |
| }, | |
| initial: 'idle', | |
| states: { | |
| idle: { | |
| entry: [], | |
| }, | |
| update_reservation: { | |
| entry: ['disableNextButton', 'sendToStepDateEventsHandlers'], | |
| exit: ['enableNextButton'], | |
| on: { | |
| UPDATED: { | |
| actions: ['logEvent'], | |
| target: '#step-vehicle', | |
| }, | |
| }, | |
| }, | |
| }, | |
| }, | |
| step_vehicle: { | |
| id: 'step-vehicle', | |
| entry: ['disableNextButton'], | |
| invoke: [ | |
| { | |
| id: 'step-vehicle-handler', | |
| src: 'handleStepVehicle', | |
| }, | |
| ], | |
| on: { | |
| NEXT: { | |
| target: '#step-vehicle.update_reservation', | |
| }, | |
| PREVIOUS: { | |
| target: '#step-dates', | |
| }, | |
| ON_DATA_CHANGED_VEHICLE: { | |
| actions: ['assignVehicleToReservationData'], | |
| target: '#app-data-editor.update_app_data', | |
| }, | |
| }, | |
| initial: 'idle', | |
| states: { | |
| idle: { | |
| entry: [], | |
| }, | |
| update_reservation: { | |
| entry: ['disableNextButton', 'sendToStepVehicleHandlers'], | |
| exit: ['enableNextButton'], | |
| on: { | |
| UPDATED: { | |
| actions: ['logEvent'], | |
| target: '#step-preferences', | |
| }, | |
| }, | |
| }, | |
| }, | |
| }, | |
| step_preferences: { | |
| id: 'step-preferences', | |
| entry: ['enableNextButton'], | |
| invoke: [ | |
| { | |
| id: 'step-preferences-handler', | |
| src: 'handleStepPreferences', | |
| }, | |
| ], | |
| on: { | |
| NEXT: { | |
| target: '#step-preferences.update_reservation', | |
| }, | |
| PREVIOUS: { | |
| target: '#step-vehicle', | |
| }, | |
| ON_DATA_CHANGED_CONTACT: { | |
| actions: ['assignContactToReservationData'], | |
| target: '#app-data-editor.update_app_data', | |
| }, | |
| ON_DATA_CHANGED_EXTRA: { | |
| actions: ['assignExtraToReservationData'], | |
| target: '#app-data-editor.update_app_data', | |
| }, | |
| ON_DATA_CHANGED_DRIVER: { | |
| actions: ['assignDriverToReservationData'], | |
| target: '#app-data-editor.update_app_data', | |
| }, | |
| }, | |
| initial: 'idle', | |
| states: { | |
| idle: { | |
| entry: [], | |
| }, | |
| update_reservation: { | |
| entry: ['disableNextButton', 'sendToStepPreferencesHandler'], | |
| exit: ['enableNextButton'], | |
| on: { | |
| UPDATED: { | |
| actions: ['logEvent'], | |
| target: '#step-notification', | |
| }, | |
| }, | |
| }, | |
| }, | |
| }, | |
| step_notification: { | |
| id: 'step-notification', | |
| entry: ['assignButtonSaveToBeDisplay'], | |
| exit: ['assignButtonNextToBeDisplay'], | |
| on: { | |
| SUBMIT_RESERVATION: { | |
| actions: ['logEvent'], | |
| target: '#submitting-reservation', | |
| }, | |
| PREVIOUS: { | |
| actions: ['assignButtonNextToBeDisplay'], | |
| target: '#step-preferences', | |
| }, | |
| ON_DATA_CHANGED_NOTIFICATION: { | |
| actions: ['assignNotificationToReservationData'], | |
| }, | |
| }, | |
| initial: 'idle', | |
| states: { | |
| idle: {}, | |
| submitting: { | |
| id: 'submitting-reservation', | |
| invoke: { | |
| id: 'submit-reservation-handler', | |
| src: 'submitReservation', | |
| onDone: { | |
| actions: ['logEvent'], | |
| target: '#done', | |
| }, | |
| onError: { | |
| actions: ['logEvent'], | |
| target: 'error', | |
| }, | |
| }, | |
| }, | |
| error: { | |
| after: { | |
| 1000: 'idle', | |
| }, | |
| }, | |
| }, | |
| }, | |
| }, | |
| }, | |
| }, | |
| }, | |
| error: { | |
| id: 'error', | |
| type: 'final', | |
| }, | |
| done: { | |
| id: 'done', | |
| type: 'final', | |
| }, | |
| }, | |
| } | |
| Machine(config, { | |
| delays: { | |
| TIMEOUT_MS: () => 3000 | |
| }, | |
| guards: { | |
| hasSelectedGuestID: () => true, | |
| hasSelectedLocationIDs: () => true, | |
| hasSelectedVehicleID: () => true, | |
| hasSelectedTailnumberIDs: () => true, | |
| hasSelectedDates: () => true, | |
| isNewReservation: () => true | |
| } | |
| }) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment