Created
May 13, 2021 21:20
-
-
Save AndreAffonso/7f922c82b5696522f306a3600436d8a1 to your computer and use it in GitHub Desktop.
Generated by XState Viz: https://xstate.js.org/viz
This file contains 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 STEPS = { | |
| INITIAL: "INITIAL", | |
| LICENSE_PLATE: "LICENSE_PLATE", | |
| BRAND_NEW_CAR: "BRAND_NEW_CAR", | |
| BUSINESS_CAR: "BUSINESS_CAR", | |
| CAR_MODEL: "CAR_MODEL", | |
| CEP: "CEP", | |
| ADDRESS: "ADDRESS", | |
| CPF: "CPF", | |
| EMAIL: "EMAIL", | |
| QUOTE: "QUOTE", | |
| DONE: "DONE", | |
| WAITING_LIST: "WAITING_LIST", | |
| WAITING_LIST_SUCCESS: "WAITING_LIST_SUCCESS", | |
| NOT_COVERED_QUOTATION: "NOT_COVERED_QUOTATION", | |
| }; | |
| const ACTIONS = { | |
| START_QUOTATION: "START_QUOTATION", | |
| FORM_SUBMIT: "FORM_SUBMIT", | |
| NOT_SUPPORTED: "NOT_SUPPORTED", | |
| ERROR: "ERROR", | |
| SUCCESS: "SUCCESS", | |
| BACK_TO_CAR_MODEL: "BACK_TO_CAR_MODEL", | |
| SKIP: "SKIP", | |
| BEFORE: "BEFORE", | |
| STOP_LOADING: "STOP_LOADING", | |
| START_LOADING: "START_LOADING", | |
| PERSIST_FORM_DATA: "PERSIST_FORM_DATA", | |
| PERSIST_ERROR: "PERSIST_ERROR", | |
| RESET_ERROR: "RESET_ERROR", | |
| RESET_CONTEXT: "RESET_CONTEXT", | |
| RESET_MACHINE: "RESET_MACHINE", | |
| INCREMENT_PROGRESS_UI: "INCREMENT_PROGRESS_UI", | |
| DECREMENT_PROGRESS_UI: "DECREMENT_PROGRESS_UI", | |
| NOT_COVERED_QUOTATION: "NOT_COVERED_QUOTATION", | |
| }; | |
| const STEPS_CONFIG = { | |
| [STEPS.INITIAL]: { | |
| TITLE: null, | |
| PATH: "/seguro-auto", | |
| }, | |
| [STEPS.LICENSE_PLATE]: { | |
| TITLE: "Qual é seu carro?", | |
| PATH: "/seguro-auto/cotacao/placa", | |
| }, | |
| [STEPS.BRAND_NEW_CAR]: { | |
| TITLE: "Seu carro é 0km?", | |
| PATH: "/seguro-auto/cotacao/carro-zero", | |
| }, | |
| [STEPS.BUSINESS_CAR]: { | |
| TITLE: "Conta pra gente como você utiliza o carro?", | |
| PATH: "/seguro-auto/cotacao/uso-comercial", | |
| }, | |
| [STEPS.CAR_MODEL]: { | |
| TITLE: "Qual é o seu carro?", | |
| PATH: "/seguro-auto/cotacao/modelo", | |
| }, | |
| [STEPS.CEP]: { | |
| TITLE: "Qual seu endereço?", | |
| PATH: "/seguro-auto/cotacao/cep", | |
| }, | |
| [STEPS.ADDRESS]: { | |
| TITLE: "Qual seu endereço?", | |
| PATH: "/seguro-auto/cotacao/endereco", | |
| }, | |
| [STEPS.CPF]: { | |
| TITLE: "Qual seu CPF?", | |
| PATH: "/seguro-auto/cotacao/cpf", | |
| }, | |
| [STEPS.EMAIL]: { | |
| TITLE: "Qual é seu email?", | |
| PATH: "/seguro-auto/cotacao/email", | |
| }, | |
| [STEPS.QUOTE]: { | |
| TITLE: null, | |
| PATH: "/seguro-auto/cotacao/calculando-valores", | |
| }, | |
| [STEPS.DONE]: { | |
| TITLE: null, | |
| PATH: "/seguro-auto/cotacao/valores", | |
| }, | |
| [STEPS.WAITING_LIST]: { | |
| TITLE: null, | |
| PATH: null, | |
| }, | |
| [STEPS.WAITING_LIST_SUCCESS]: { | |
| TITLE: null, | |
| PATH: null, | |
| }, | |
| [STEPS.NOT_COVERED_QUOTATION]: { | |
| TITLE: null, | |
| PATH: | |
| "/seguro-auto/cotacao/valores?lista-de-espera=endereco-nao-disponivel", | |
| }, | |
| }; | |
| const quotationMachine = Machine( | |
| { | |
| id: "quotation-auto", | |
| initial: STEPS.INITIAL, | |
| context: { | |
| isLoading: false, | |
| error: "", | |
| uiStepProgress: 1, | |
| formData: { | |
| quoteId: null, | |
| licensePlate: "", | |
| isZeroKm: null, | |
| "ship-zip": "", | |
| "ship-address": "", | |
| number: "", | |
| "ship-city": "", | |
| neighborhood: "", | |
| brand: null, | |
| year: null, | |
| model: null, | |
| cpf: "", | |
| isAuctioned: null, | |
| }, | |
| }, | |
| states: { | |
| [STEPS.INITIAL]: { | |
| on: { | |
| [ACTIONS.START_QUOTATION]: { | |
| target: STEPS.LICENSE_PLATE, | |
| }, | |
| [ACTIONS.SKIP]: { | |
| target: STEPS.WAITING_LIST, | |
| }, | |
| }, | |
| }, | |
| [STEPS.LICENSE_PLATE]: { | |
| on: { | |
| [ACTIONS.FORM_SUBMIT]: { | |
| actions: [ACTIONS.START_LOADING, ACTIONS.RESET_ERROR], | |
| }, | |
| [ACTIONS.ERROR]: { | |
| actions: [ACTIONS.STOP_LOADING, ACTIONS.PERSIST_ERROR], | |
| }, | |
| [ACTIONS.SKIP]: { | |
| target: STEPS.CAR_MODEL, | |
| actions: [ACTIONS.RESET_CONTEXT, ACTIONS.INCREMENT_PROGRESS_UI], | |
| }, | |
| [ACTIONS.SUCCESS]: { | |
| target: STEPS.CAR_MODEL, | |
| actions: [ACTIONS.PERSIST_FORM_DATA, ACTIONS.INCREMENT_PROGRESS_UI], | |
| }, | |
| }, | |
| exit: [ACTIONS.STOP_LOADING, ACTIONS.RESET_ERROR], | |
| }, | |
| [STEPS.CAR_MODEL]: { | |
| on: { | |
| [ACTIONS.BEFORE]: { | |
| target: STEPS.LICENSE_PLATE, | |
| actions: ACTIONS.DECREMENT_PROGRESS_UI, | |
| }, | |
| [ACTIONS.FORM_SUBMIT]: { | |
| actions: [ACTIONS.START_LOADING], | |
| }, | |
| [ACTIONS.ERROR]: { | |
| actions: [ACTIONS.STOP_LOADING, ACTIONS.PERSIST_ERROR], | |
| }, | |
| [ACTIONS.SUCCESS]: { | |
| target: STEPS.BRAND_NEW_CAR, | |
| actions: [ACTIONS.PERSIST_FORM_DATA], | |
| }, | |
| [ACTIONS.SKIP]: { | |
| target: STEPS.BUSINESS_CAR, | |
| actions: [ACTIONS.PERSIST_FORM_DATA, ACTIONS.INCREMENT_PROGRESS_UI], | |
| }, | |
| }, | |
| exit: [ACTIONS.STOP_LOADING, ACTIONS.RESET_ERROR], | |
| }, | |
| [STEPS.BRAND_NEW_CAR]: { | |
| on: { | |
| [ACTIONS.BEFORE]: { | |
| target: STEPS.CAR_MODEL, | |
| }, | |
| [ACTIONS.FORM_SUBMIT]: { | |
| actions: [ACTIONS.START_LOADING], | |
| }, | |
| [ACTIONS.NOT_SUPPORTED]: { | |
| target: STEPS.WAITING_LIST, | |
| }, | |
| [ACTIONS.ERROR]: { | |
| actions: [ACTIONS.STOP_LOADING, ACTIONS.PERSIST_ERROR], | |
| }, | |
| [ACTIONS.SUCCESS]: { | |
| target: STEPS.BUSINESS_CAR, | |
| actions: [ACTIONS.PERSIST_FORM_DATA, ACTIONS.INCREMENT_PROGRESS_UI], | |
| }, | |
| }, | |
| exit: [ACTIONS.STOP_LOADING, ACTIONS.RESET_ERROR], | |
| }, | |
| [STEPS.BUSINESS_CAR]: { | |
| on: { | |
| [ACTIONS.BEFORE]: { | |
| target: STEPS.CAR_MODEL, | |
| actions: ACTIONS.DECREMENT_PROGRESS_UI, | |
| }, | |
| [ACTIONS.FORM_SUBMIT]: { | |
| actions: [ACTIONS.START_LOADING], | |
| }, | |
| [ACTIONS.ERROR]: { | |
| actions: [ACTIONS.STOP_LOADING, ACTIONS.PERSIST_ERROR], | |
| }, | |
| [ACTIONS.SUCCESS]: { | |
| target: STEPS.CEP, | |
| actions: [ACTIONS.PERSIST_FORM_DATA, ACTIONS.INCREMENT_PROGRESS_UI], | |
| }, | |
| }, | |
| exit: [ACTIONS.STOP_LOADING, ACTIONS.RESET_ERROR], | |
| }, | |
| [STEPS.CEP]: { | |
| on: { | |
| [ACTIONS.BEFORE]: { | |
| target: STEPS.BUSINESS_CAR, | |
| actions: [ACTIONS.DECREMENT_PROGRESS_UI], | |
| }, | |
| [ACTIONS.BACK_TO_CAR_MODEL]: { | |
| target: STEPS.CAR_MODEL, | |
| actions: [ACTIONS.DECREMENT_PROGRESS_UI], | |
| }, | |
| [ACTIONS.FORM_SUBMIT]: { | |
| actions: [ACTIONS.START_LOADING], | |
| }, | |
| [ACTIONS.SKIP]: { | |
| target: STEPS.ADDRESS, | |
| }, | |
| [ACTIONS.ERROR]: { | |
| actions: [ACTIONS.STOP_LOADING, ACTIONS.PERSIST_ERROR], | |
| }, | |
| [ACTIONS.SUCCESS]: { | |
| target: STEPS.CPF, | |
| actions: [ACTIONS.PERSIST_FORM_DATA, ACTIONS.INCREMENT_PROGRESS_UI], | |
| }, | |
| }, | |
| exit: [ACTIONS.STOP_LOADING, ACTIONS.RESET_ERROR], | |
| }, | |
| [STEPS.ADDRESS]: { | |
| on: { | |
| [ACTIONS.BEFORE]: { | |
| target: STEPS.CEP, | |
| }, | |
| [ACTIONS.FORM_SUBMIT]: { | |
| actions: [ACTIONS.START_LOADING], | |
| }, | |
| [ACTIONS.ERROR]: { | |
| actions: [ACTIONS.STOP_LOADING, ACTIONS.PERSIST_ERROR], | |
| }, | |
| [ACTIONS.SUCCESS]: { | |
| target: STEPS.CPF, | |
| actions: [ACTIONS.PERSIST_FORM_DATA, ACTIONS.INCREMENT_PROGRESS_UI], | |
| }, | |
| }, | |
| exit: [ACTIONS.STOP_LOADING, ACTIONS.RESET_ERROR], | |
| }, | |
| [STEPS.CPF]: { | |
| on: { | |
| [ACTIONS.BEFORE]: { | |
| target: STEPS.CEP, | |
| actions: [ACTIONS.DECREMENT_PROGRESS_UI], | |
| }, | |
| [ACTIONS.FORM_SUBMIT]: { | |
| actions: [ACTIONS.START_LOADING], | |
| }, | |
| [ACTIONS.NOT_SUPPORTED]: { | |
| target: STEPS.WAITING_LIST, | |
| actions: [ACTIONS.STOP_LOADING], | |
| }, | |
| [ACTIONS.ERROR]: { | |
| actions: [ACTIONS.STOP_LOADING, ACTIONS.PERSIST_ERROR], | |
| }, | |
| [ACTIONS.SUCCESS]: { | |
| target: STEPS.EMAIL, | |
| actions: [ACTIONS.PERSIST_FORM_DATA, ACTIONS.INCREMENT_PROGRESS_UI], | |
| }, | |
| [ACTIONS.SKIP]: { | |
| target: STEPS.QUOTE, | |
| actions: [ACTIONS.PERSIST_FORM_DATA], | |
| }, | |
| }, | |
| exit: [ACTIONS.STOP_LOADING, ACTIONS.RESET_ERROR], | |
| }, | |
| [STEPS.EMAIL]: { | |
| on: { | |
| [ACTIONS.BEFORE]: { | |
| target: STEPS.CPF, | |
| actions: [ACTIONS.DECREMENT_PROGRESS_UI], | |
| }, | |
| [ACTIONS.FORM_SUBMIT]: { | |
| actions: [ACTIONS.START_LOADING], | |
| }, | |
| [ACTIONS.ERROR]: { | |
| actions: [ACTIONS.STOP_LOADING, ACTIONS.PERSIST_ERROR], | |
| }, | |
| [ACTIONS.SUCCESS]: { | |
| target: STEPS.QUOTE, | |
| actions: [ACTIONS.PERSIST_FORM_DATA], | |
| }, | |
| [ACTIONS.SKIP]: { | |
| target: STEPS.QUOTE, | |
| }, | |
| }, | |
| }, | |
| [STEPS.QUOTE]: { | |
| entry: [ACTIONS.START_LOADING], | |
| on: { | |
| [ACTIONS.SUCCESS]: { | |
| target: [STEPS.DONE], | |
| actions: [ACTIONS.PERSIST_FORM_DATA], | |
| }, | |
| [ACTIONS.NOT_SUPPORTED]: { | |
| target: STEPS.WAITING_LIST, | |
| }, | |
| [ACTIONS.ERROR]: { | |
| actions: [ACTIONS.STOP_LOADING, ACTIONS.PERSIST_ERROR], | |
| }, | |
| [ACTIONS.NOT_COVERED_QUOTATION]: { | |
| target: [STEPS.NOT_COVERED_QUOTATION], | |
| }, | |
| [ACTIONS.RESET_MACHINE]: { | |
| target: [STEPS.INITIAL], | |
| actions: [ACTIONS.RESET_CONTEXT], | |
| }, | |
| }, | |
| exit: [ACTIONS.STOP_LOADING], | |
| }, | |
| [STEPS.WAITING_LIST]: { | |
| on: { | |
| [ACTIONS.FORM_SUBMIT]: { | |
| actions: [ACTIONS.START_LOADING], | |
| }, | |
| [ACTIONS.SUCCESS]: { | |
| target: [STEPS.WAITING_LIST_SUCCESS], | |
| }, | |
| [ACTIONS.ERROR]: { | |
| actions: [ACTIONS.STOP_LOADING, ACTIONS.PERSIST_ERROR], | |
| }, | |
| [ACTIONS.RESET_MACHINE]: { | |
| target: [STEPS.INITIAL], | |
| actions: [ACTIONS.RESET_CONTEXT], | |
| }, | |
| }, | |
| exit: [ACTIONS.STOP_LOADING, ACTIONS.RESET_ERROR], | |
| }, | |
| [STEPS.WAITING_LIST_SUCCESS]: { | |
| on: { | |
| [ACTIONS.RESET_MACHINE]: { | |
| target: [STEPS.INITIAL], | |
| actions: [ACTIONS.RESET_CONTEXT], | |
| }, | |
| }, | |
| }, | |
| [STEPS.NOT_COVERED_QUOTATION]: { | |
| on: { | |
| [ACTIONS.SKIP]: { | |
| target: [STEPS.WAITING_LIST], | |
| }, | |
| [ACTIONS.RESET_MACHINE]: { | |
| target: [STEPS.INITIAL], | |
| actions: [ACTIONS.RESET_CONTEXT], | |
| }, | |
| }, | |
| }, | |
| [STEPS.DONE]: { | |
| on: { | |
| [ACTIONS.RESET_MACHINE]: { | |
| target: [STEPS.INITIAL], | |
| actions: [ACTIONS.RESET_CONTEXT], | |
| }, | |
| }, | |
| }, | |
| }, | |
| }, | |
| { | |
| actions: { | |
| // action implementations | |
| [ACTIONS.START_LOADING]: assign({ | |
| isLoading: (_, event) => true, | |
| }), | |
| [ACTIONS.STOP_LOADING]: assign({ | |
| isLoading: (_, event) => false, | |
| }), | |
| [ACTIONS.PERSIST_ERROR]: assign({ | |
| error: (_, { payload }) => payload, | |
| }), | |
| [ACTIONS.PERSIST_FORM_DATA]: assign({ | |
| formData: (context, { payload }) => { | |
| const { formData } = context; | |
| return { ...formData, ...payload }; | |
| }, | |
| }), | |
| [ACTIONS.INCREMENT_PROGRESS_UI]: assign({ | |
| uiStepProgress: (context, event) => context.uiStepProgress + 1, | |
| }), | |
| [ACTIONS.DECREMENT_PROGRESS_UI]: assign({ | |
| uiStepProgress: (context, event) => context.uiStepProgress - 1, | |
| }), | |
| [ACTIONS.RESET_CONTEXT]: assign({ | |
| uiStepProgress: (context, event) => 1, | |
| formData: (_, event) => ({ | |
| licensePlate: "", | |
| isZeroKm: null, | |
| cep: "", | |
| "ship-address": "", | |
| number: "", | |
| "ship-city": "", | |
| neighborhood: "", | |
| brand: null, | |
| year: null, | |
| model: null, | |
| cpf: "", | |
| email: "", | |
| isAuctioned: null, | |
| }), | |
| error: (_, event) => "", | |
| isLoading: (_, event) => false, | |
| }), | |
| [ACTIONS.RESET_ERROR]: assign({ | |
| error: (_, event) => "", | |
| }), | |
| }, | |
| } | |
| ); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment