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

machine.js

const loadContracts = {
  initial: "loading",
  states: {
    loading: {
      on: {
        LOADED_CONTRACTS: {
          target: "loaded",
          actions: ["setContracts"],
        },
        FAILED_LOAD_CONTRACTS: {
          target: "failed",
        },
      },
    },
    loaded: {
      on: {
        SELECTED_CONTRACT: {
          target: "#contract",
          actions: ["setSelectedContract"],
        },
      },
    },
    failed: {
      on: {
        RETRY: { target: "loading" },
        ERROR: { target: "#serverError" },
      },
    },
  },
};

const waterLeakMachine = Machine(
  {
    id: "waterLeak",
    initial: "step2",
    context: {
      contracts: [],
      selectedContract: null,
      attachFile: [],
    },
    states: {
      step1: {
        id: "step1",
        initial: "loadContracts",
        states: {
          loadContracts: {
            ...loadContracts,
          },
          contract: {
            id: "contract",
            initial: "infos",
            states: {
              infos: {
                on: {
                  CONFIRM_INFO: [
                    {
                      target: "multiMeters",
                      cond: "hasMultiMeters",
                    },
                    {
                      target: "invoice",
                    },
                  ],
                },
              },
              multiMeters: {
                initial: "infos",
                states: {
                  infos: {
                    on: {
                      SELECTED_METER: {
                        target: "#invoice",
                      },
                    },
                  },
                },
              },
              invoice: {
                id: "invoice",
                initial: "lastInvoice",
                states: {
                  lastInvoice: {
                    always: [
                      { target: "errorInvoice", cond: "isErrorInvoice" },
                      { target: "lastEstimateInvoice", cond: "isEstimated" },
                    ],
                    on: {
                      CONFIRM_INVOICE: {
                        target: "go2Step2",
                      },
                    },
                  },
                  lastEstimateInvoice: {
                    CONFIRM_ESTIMATE_INVOICE: {
                      target: "#photoMeter",
                    },

                    states: {
                      photoMeter: {
                        id: "photoMeter",
                        on: {
                          CONFIRM_PHOTOMETER: {
                            target: "#go2Step2",
                          },
                        },
                      },
                    },
                  },
                  errorInvoice: {},
                  go2Step2: {
                    id: "go2Step2",
                    on: { click: { target: "#step2" } },
                  },
                },
              },
            },
          },
        },
      },
      step2: {
        id: "step2",
        initial: "attachFile",
        states: {
          attachFile: {
            on: {
              DROP_FILE: {
                target: "whereWasTheLeak",
              },
              DELETE_FILE: {
                target: "#step2",
              },
            },
          },
          whereWasTheLeak: {
            on: {
              SELECTED_PLACE: {
                action: "setLeakPlace",
              },
              CONFIRM_FORM: {
                target: "submitForm",
                cond: "isFormValid",
              },
              SELECTED_PLACE_OTHER: {
                target: "leakPrecision",
              },
            },
          },
          leakPrecision: {
            on: {
              SELECTED_PRECISION: {
                target: "waste",
              },
            },
          },
          waste: {
            on: {
              SELECTED_WASTE: {
                action: "setWaste",
              },
              CONFIRM_FORM: {
                target: "submitForm",
                cond: "isFormValid",
              },
            },
          },
          goBack2Step1: {
            on: { click: { target: "#step1" } },
          },
          submitForm: {
            on: { click: { target: "#formSubmitResponse" } },
          },
        },
      },
      formSubmitResponse: {
        id: "formSubmitResponse",
      },
      serverError: {
        id: "serverError",
      },
    },
  },
  {
    actions: {
      setContracts: assign({
        contracts: (context, event) => event.contracts,
      }),
      setSelectedContract: assign({
        selectedContract: (context, event) => event.selectedContract,
      }),
      setLeakPlace: assign({
        contracts: (context, event) => event.selectedLeakPlace,
      }),
      setWaste: assign({
        contracts: (context, event) => event.waste,
      }),
    },
    guards: {
      hasMultiMeters: (context) => context.multiMeters === true,
      isEstimated: (context) => context.estimateInvoice === true,
      isErrorInvoice: (context) => context.errorInvoice === true,
      isFormValid: (context) => context.formValid === true,
    },
  }
);