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

machine.js

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) => "",
      }),
    },
  }
);