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

machine.js

const askForProduct = (context, event) => {}
const confirmOperation = (context, event) => {}

const installProductsFlow = Machine(
  {
    id: 'install-products',
    initial: 'inactive',
    context: {
      operation: 'install',
      targetProduct: null,
      targetProductId: null,
      reason: null,
      scannedTags: [],
      products: [],
    },
    states: {
      inactive: {
        on: {
          START: [
            {
              target: 'product_selection',
              cond: 'hasMoreThanOneProductTypeInstalled',
            },
            {
              target: 'delayed_scan',
              actions: (context, event) => {
                const [product] = context.products;
                context.targetProduct = product.HospitalProductDescription;
                context.targetProductId = product.HospitalProductID;
              },
            },
          ],
        },
        entry: (context, event) => {
          console.log('Loaded install-products flow...');
        },
      },
      product_selection: {
        invoke: {
          id: 'askForProduct',
          src: (context, event) => askForProduct(context, event),
          onDone: {
            target: 'scan_product',
            actions: assign({
              targetProduct: (context, event) => event.data.name,
              targetProductId: (context, event) => event.data.id,
            }),
          },
          onError: {
            target: 'cancelled',
          },
        },
      },
      delayed_scan: {
        entry: ['loading'],
        exit: ['done_loading'],
        after: {
          4000: 'scan_product',
        },
      },
      scan_product: {
        entry: ['scan'],
        on: {
          TAGS_SCANNED: {
            target: 'confirm',
            actions: assign({
              scannedTags: (context, event) => {
                if (event.data) {
                  context.scannedTags = event.data;
                }

                return context.scannedTags;
              },
            }),
          },
          SCAN_CANCELLED: {
            target: 'cancelled',
          },
        },
      },
      confirm: {
        invoke: {
          id: 'confirm',
          src: (context, event) => confirmOperation(context, event),
          onDone: {
            target: 'finished',
          },
          onError: {
            target: '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) => {},
      loading: (context, event) => {},
      done_loading: (context, event) => {},
    },
    guards: {
      hasMoreThanOneProductTypeInstalled: context =>
        context.products && context.products.length > 1,
    },
  },
);