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 fetchStoreInfo = () => {
  return new Promise((resolve) => {
    setTimeout(function () {
      resolve();
    }, 3000);
  });
};

const fetchProductInfo = () => {
  return new Promise((resolve) => {
    setTimeout(function () {
      resolve();
    }, 3000);
  });
};


const fetchPayment = () => {
  return new Promise((resolve) => {
    setTimeout(function () {
      resolve();
    }, 3000);
  });
};


const selfCheckout = Machine({
  id: 'selfCheckout',
  context: {
    storeInfo: {},
    productScanned: []
  },
  type: 'parallel',
  on: { CLOSE: '' },
  states: {
    scan: {
      initial: 'waiting',
      states: {
        waiting: {
          on: {
            READ_QR_STORE: 'readingQrStore'
          }
        },
        readingQrStore: {
          invoke: {
            id: 'readingQrStore',
            src: fetchStoreInfo,
            onDone: {
              target: 'waitingProduct',
              actions: assign({ user: (context, event) => event.data })
            },
            onError: {
              target: 'failureReadingStore',
              actions: assign({ error: (context, event) => event.data })
            }
          }
        },
        failureReadingStore: {
          on: {
            RETRY: {
              target: 'waiting'
            }
          }
        },
        waitingProduct: {
          on: {
            READ_CODE_PRODUCT: 'readingCodeProduct'
          }
        },
        readingCodeProduct: {
          invoke: {
            id: 'readingCodeProduct',
            src: fetchProductInfo,
            onDone: {
              target: 'waitingProduct',
              actions: assign({ user: (context, event) => event.data })
            },
            onError: {
              target: 'failureReadingProduct',
              actions: assign({ error: (context, event) => event.data })
            }
          }
        },
        failureReadingProduct: {
          on: {
            RETRY: {
              target: 'waitingProduct'
            }
          }
        }
      }
    },
    checkout: {
      type: 'parallel',
      states: {
        product: {
          initial: 'waiting',
          states: {
            waiting: {
              on: {
                ADD: '',
                DELETE: '',
                LESS: ''
              }
            }
          }
        },
        payment: {
          initial: 'waiting',
          states: {
            waiting: {
              PAY: 'paying'
            },
            paying: {
              invoke: {
                id: 'paying',
                src: fetchPayment,
                onDone: {
                  target: 'paymentSuccess',
                },
                onError: {
                  target: 'paymentFailure',
                }
              }
            },
            paymentSuccess: {},
            paymentFailure: {
              on: {
                RETRY: {
                  target: 'waiting'
                }
              }
            }
          }
        }
      }
    }
  }
});