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

machine.js

const askForReasonForRemoval = (context, event) => {}
const askForReplacementReasonExplanation = (context, event) => {}
const confirmOperation = (context, event) => {}

const removeProductsFlow = Machine(
  {
    id: 'remove-products',
    initial: 'inactive',
    context: {
      operation: 'remove',
      targetProduct: null,
      targetProductId: null,
      reason: null,
      scannedTags: [],
      products: [],
    },
    states: {
      inactive: {
        on: {
          START: [
            {
              target: 'replacement_reason',
              cond: 'hasAtLeastOneProductInstalled',
            },
            {
              target: 'no_installed_products',
            },
          ],
        },
        entry: (context, event) => {
          console.log('Loaded remove-products flow...');
        },
      },
      replacement_reason: {
        invoke: {
          id: 'askForReplacementReason',
          src: askForReasonForRemoval,
        },
        on: {
          REASON_SELECTED: {
            target: 'scan_product',
            actions: assign({
              reason: (context, event) => event.data,
            }),
          },
          REASON_OTHER_SELECTED: {
            target: 'replacement_reason_explanation',
          },
          CANCEL: 'cancelled',
        },
      },
      replacement_reason_explanation: {
        invoke: {
          id: 'askForReplacementReasonExplanation',
          src: askForReplacementReasonExplanation,
        },
        on: {
          EXPLANATION_PROVIDED: {
            target: 'scan_product',
            actions: assign({
              reason: (context, event) => event.data,
            }),
          },
          CANCEL: 'replacement_reason',
        },
      },
      scan_product: {
        entry: ['scan'],
        on: {
          TAGS_SCANNED: {
            target: 'confirm',
            actions: assign({
              scannedTags: (context, event) => {
                if (event.data) {
                  context.scannedTags = event.data;
                }

                return context.scannedTags;
              },
            }),
          },
        },
      },
      confirm: {
        invoke: {
          id: 'confirm',
          src: (context, event) => confirmOperation(context, event),
          onDone: {
            target: 'finished',
          },
          onError: {
            target: 'cancelled',
          },
        },
      },
      no_installed_products: {
        entry: ['announce_no_products_installed'],
        on: {
          '': 'cancelled',
        },
      },
      finished: {
        type: 'final',
        entry: ['submit_changes'],
      },
      cancelled: {
        type: 'final',
        entry: ['go_back'],
      },
    },
  },
  {
    actions: {
      submit_changes: (context, event) => {},
      scan: (context, event) => {},
      go_back: (context, event) => {},
      announce_no_products_installed: (context, event) => {},
    },
    guards: {
      hasAtLeastOneProductInstalled: context =>
        context.products && context.products.length > 0,
    },
  },
);