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

machine.js

const Options = {
  actions: {
    setContent: "setContent",
    setGroups: "setGroups",
    setSelectedType: "setSelectedType",
    setOnlyType: "setOnlyType",
    setSelectedUpsellOffer: "setSelectedUpsellOffer"
  },
  services: {
    loadData: "loadData",
    loadContent: "loadContent"
  },
  guards: {
    hasOnlyOneType: "hasOnlyOneType"
  }
};

const m = Machine({
  strict: true,
  context: {
    content: {
      title: ""
    },
    types: [],
    selectedOfferType: undefined,
    upsell: null,
    selectedUpsellOffer: null
  },
  id: "offerTypesMachine",
  initial: "loading",
  states: {
    loading: {
      type: "parallel",
      onDone: {
        target: "ready"
      },
      states: {
        data: {
          initial: "loading",
          states: {
            loading: {
              invoke: {
                src: Options.services.loadData,
                onDone: {
                  target: "ready",
                  actions: Options.actions.setGroups
                }
              }
            },
            ready: {
              type: "final"
            }
          }
        },
        content: {
          initial: "loading",
          states: {
            loading: {
              invoke: {
                src: Options.services.loadContent,
                onDone: {
                  target: "ready",
                  actions: Options.actions.setContent
                }
              }
            },
            ready: {
              type: "final"
            }
          }
        },
        debounce: {
          initial: "waiting",
          states: {
            waiting: {
              after: {
                4000: {
                  target: "ready"
                }
              }
            },
            ready: {
              type: "final"
            }
          }
        }
      }
    },
    ready: {
      on: {
        "": {
          actions: Options.actions.setOnlyType,
          cond: Options.guards.hasOnlyOneType,
          target: "success"
        },
        SELECT_OFFER_TYPE: {
          actions: Options.actions.setSelectedType,
          target: "success"
        },
        SELECT_UPSELL_OFFER: {
          actions: Options.actions.setSelectedUpsellOffer,
          target: "success"
        }
      }
    },
    success: {
      type: "final",
      data: context => {
        return {
          __type: "success",
          selectedOfferType: context.selectedOfferType,
          selectedUpsellOffer: context.selectedUpsellOffer
        };
      }
    },
    error: {
      id: "error",
      type: "final"
    }
  }
});