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

machine.js

function deriveStatus(){}
const stateMachine = Machine(
  {
    id: 'package',
    initial: 'loading',
    context: { packageProduct: null, items: {}, price: {}, error: null },
    on: {
      UPDATE_ITEM: {
        actions: 'updateItems',
        target: 'validating',
        cond: context => Object.keys(context.items).length > 0
      }
    },
    states: {
      loading: {
        on: {
          // On the client, we need to wait for the LOADED event to tell us
          // that the package has been retrieved
          LOADED: {
            target: 'validating',
            actions: assign({
              items: (_, event) => {
                return getInitialState(event.packageProduct).items;
              },
              price: (_, event) => {
                return getInitialState(event.packageProduct).price;
              },
              packageProduct: (_, event) => {
                return event.packageProduct;
              }
            })
          },
          // During SSR, we already have the package and can head right on to
          // validating.
        }
      },
      invalid: {},
      validating: {
        on: {
          '': [
            {
              target: 'valid',
              cond: context => {
                return deriveStatus(context.items) === 'valid';
              }
            },
            {
              target: 'invalid',
              cond: context => {
                return deriveStatus(context.items) !== 'valid';
              }
            }
          ]
        }
      },
      valid: {
        initial: 'fetchingPrice',
        states: {
          fetchingPrice: {
            invoke: {
              id: 'fetchPrice',
              src: 'fetchPrice',
              onDone: {
                target: 'buyable',
                actions: assign({
                  price: (_, event) => {
                    return event.data;
                  }
                })
              },
              onError: {
                target: 'error',
                actions: assign({
                  error: (_, event) => {
                    const errors = event.data;
                    return {
                      fromState: 'fetchingPrice',
                      messages: errors.map(err => err.message).filter(Boolean)
                    };
                  }
                })
              }
            }
          },
          buyable: {
            on: {
              ADD_TO_CART: 'adding',
              ERROR: 'error'
            }
          },
          adding: {
            invoke: {
              id: 'add-to-cart',
              src: 'addToCart',
              onDone: 'added',
              onError: {
                target: 'error',
                actions: assign({
                  error: (_, event) => {
                    const errors = event.data;
                    return {
                      fromState: 'adding',
                      messages: errors.map(err => err.message).filter(Boolean)
                    };
                  }
                })
              }
            }
          },
          added: {
            invoke: {
              id: 'added-refetch',
              src: () => {
                return new Promise(resolve => {
                  setTimeout(() => {
                    resolve(400);
                  }, 800);
                });
              },
              onDone: {
                target: '#package.validating'
              }
            }
          },
          error: {
            on: {
              RETRY: '#package.validating'
            }
          }
        }
      }
    }
  },
  {
    actions: {
      updateItems: assign({
        items: (context, event) => {}
      })
    }
  }
);