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

machine.js

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions
  // - XState (all XState exports)
  
  const assignField = name => assign({ [name]: (ctx, event) => event.payload })
  
  const createOrderModalMachine = Machine({
    id: 'createOrderModal',
    initial: 'closed',
    context: {
      productType: undefined,
      quantity: undefined,
      deliveryWindow: undefined,
      origin: undefined,
      destination: undefined,
      agreeToTerms: undefined,
      loadSizeAmt: undefined
    },
    on: {
      REQUEST_CLOSE: 'closed'
    },
    states: {
      closed: {
        entry: 'resetContext',
        on: {
          START: 'createOrderStep'
        }
      },
      createOrderStep: {
        on: {
          CREATE_ORDER: 'loadSizeStep',
          GET_A_QUOTE: 'quoteDetailsStep',
          CHANGE_PRODUCT_TYPE: {
            actions: assignField('productType'),
          },
          CHANGE_QUANTITY: {
            actions: assignField('quantity'),
          },
          CHANGE_DELIVERY_WINDOW: {
            actions: assignField('deliveryWindow'),
          },
          CHANGE_ORIGIN: {
            actions: assignField('origin'),
          },
          CHANGE_DESTINATION: {
            actions: assignField('destination'),
          },
        }
      },
      quoteDetailsStep: {
        initial: 'loading',
        states: {
          loading: {
            invoke: {
              src: 'requestQuote',
              onDone: {
                target: 'ready',
                actions: 'assignQuote'
              },
              onError: {
                actions: 'notifyRequestQuoteFailed'
              }
            }
          },
          ready: {
            on: {
              SUBMIT: 'saving',
              CHANGE_AGREE_TO_TERMS: {
                actions: assignField('agreeToTerms'),
              },
            }
          },
          saving: {
            invoke: {
              src: 'saveQuoteAccepted',
              onDone: {
                target: '#createOrderModal.closed',
                actions: ['navigateQuoteAcceptedPage','notifySaveQuoteAcceptedSuccess']
              },
              onError: {
                target: 'ready',
                actions: 'notifySaveQuoteAcceptedFailed'
              }
            }
          }
        },
        on: {
          PREV_STEP: 'createOrderStep'
        }
      },
      loadSizeStep: {
        initial: 'ready',
        states: {
          ready: {
            on: {
             SUBMIT: 'saving',
             CHANGE_LOAD_SIZE_AMT: {
                actions: assignField('loadSizeAmt'),
              },
            }
          },
          saving: {
            src: 'saveOrderCreated',
            onDone: {
              target: '#createOrderModal.closed',
              actions: ['navigateOrderCreatedPage', 'notifySaveOrderCreatedSuccess']
            },
            onError: {
              target: 'ready',
              actions: 'notifySaveOrderCreatedFailed'
            }
          }
        },
        on: {
          PREV_STEP: 'createOrderStep'
        }
      }
    }
  });