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

machine.js

const fetchMachine = Machine(
  {
    id: 'isi-builder',
    initial: 'start',
    context: {
      brands: ['botox', 'kybella'],
    },
    states: {
      start: {
        on: {
          '': [
            { target: 'containsBotox', cond: 'containsBotox' },
            {
              target: 'singleSafetyAndPrescribingInfo',
              cond: 'hasKybellaOrLatisse',
            },
            { target: 'importantSafetyInformationOnly' },
          ],
        },
      },
      containsBotox: {
        on: {
          '': [
            { target: 'botoxOnly', cond: 'hasOnlyOneCondition' },
            {
              target: 'botoxSafetyAndPrescribingInfo',
              cond: 'hasKybellaOrLatisse',
            },
            { target: 'botoxOnlyImportantSafetyInformationOnly' },
          ],
        },
      },
      singleSafetyAndPrescribingInfo: {},
      importantSafetyInformationOnly: {},
      doesNotContainBotox: {},
      hasOnlyOneCondition: {},
      botoxOnly: {},
      botoxSafetyAndPrescribingInfo: {},
      botoxOnlyImportantSafetyInformationOnly:{}
    },
  },
  {
    guards: {
      doesNotContainBotox: (context) => {
        return !context.brands.includes('botox');
      },
      containsBotox: (context) => {
        return context.brands.includes('botox');
      },
      hasOnlyOneCondition: (context) => {
        return context.brands.length === 1;
      },
      hasKybellaOrLatisse: (context) => {
        return context.brands.some(
          (brand) => brand === 'kybella' || brand === 'latisse'
        );
      },
    },
  }
);