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

machine.js

// services
const fetchConfig = () => Promise.resolve({ hereId: 'foo', hereCode: 'bar' })
const fetchOrder = () => Promise.resolve({ status: 'done', pods: [1, 2, 3] })
const fetchIntl = () => Promise.resolve({ messages: { foo: 'bar' } })

const fetchMachine = Machine(
  {
    id: 'tracking-app',
    initial: 'loading',
    context: {
      hereId: '',
      hereCode: '',
      orderData: {
        // 'orderNotFound' | 'territoryNotFound' | 'tokenNotFound' | 'tokenNotValid' | 'bodyNotValid'
        errorMessage: '',
        status: '',
        pods: [],
      },
      messages: {},
    },
    states: {
      loading: {
        initial: 'config',
        states: {
          config: {
            invoke: {
              id: 'getConfig',
              src: () => fetchConfig(),
              onDone: {
                target: '#tracking-app.loading.order',
                actions: assign({
                  hereId: (_context, event) => event.data.hereId,
                  hereCode: (_context, event) => event.data.hereCode,
                }),
              },
              onError: {
                target: '#tracking-app.offline',
              },
            },
          },
          order: {
            invoke: {
              id: 'getOrder',
              src: () => fetchOrder(),
              onDone: {
                target: '#tracking-app.loading.intl',
                actions: assign({
                  status: (_context, event) => event.data.status,
                  pods: (_context, event) => event.data.pods,
                }),
              },
              onError: {
                target: '#tracking-app.orderError',
                actions: assign({
                  errorMessage: (_context, event) => event.data.errorMessage,
                }),
              },
            },
          },
          intl: {
            invoke: {
              id: 'getIntl',
              src: () => fetchIntl(),
              onDone: {
                target: '#tracking-app.orderDetail',
                actions: assign({
                  messages: (_context, event) => event.data.messages,
                }),
              },
              onError: {
                target: '#tracking-app.offline',
              },
            },
          },
        },
      },

      orderDetail: {
        type: 'parallel',
        states: {
          ui: {
            initial: 'map',
            states: {
              map: {
                on: {
                  GO_TO_PODS: 'pods',
                },
              },
              pods: {
                on: {
                  GO_TO_MAP: 'map',
                },
              },
            },
          },
          poll: {
            initial: 'idle',
            states: {
              idle: {
                after: { 1000: 'fetch' },
              },
              fetch: {
                invoke: {
                  src: () => fetchOrder(),
                  onDone: {
                    target: 'idle',
                    actions: assign({
                      status: (_context, event) => event.data.status,
                      pods: (_context, event) => event.data.pods,
                    }),
                  },
                  // onError: {
                  //   target: '#tracking-app.orderError',
                  //   actions: assign({
                  //     errorMessage: (_context, event) => event.data.errorMessage,
                  //   }),
                  // },
                },
              },
            },
          },
        },
      },

      orderError: {
        initial: 'evaluateError',
        states: {
          evaluateError: {
            on: {
              always: [
                { target: '#tracking-app.orderDeleted', cond: 'isOrderDeleted' },
                { target: '#tracking-app.deadLink', cond: 'isDeadLink' },
                { target: '#tracking-app.offline' },
              ],
            },
          },
        },
      },

      // dead states
      offline: { type: 'final' },
      deadLink: { type: 'final' },
      orderDeleted: { type: 'final' },
    },
  },
  {
    guards: {
      isOrderDeleted: (context, _event) => context.errorMessage === 'orderNotFound',
      isOrderDeleted: (context, _event) =>
        context.errorMessage === 'territoryNotFound' ||
        context.errorMessage === 'tokenNotFound' ||
        context.errorMessage === 'tokenNotValid' ||
        context.errorMessage === 'bodyNotValid',
    },
  }
)