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 fetchMachine = Machine({
    id: 'checkout',
      initial: 'pe',
      context: {
        user: '',
        paymentType: 'online',
        
      },
      states: {
        'pe': {
          on: {
            GUEST: 'Method',
            LOGIN: {
              target: 'Method',
              actions: 'onLogin',
            }
          },
          meta: {
            message: 'Loading'
          }
        },
        'Method': {
          on:{
            STRIPE: 'paymentSection.Stripeform',
            PAYPAL: 'paymentSection.PaypalButton',
            PAGOEFECTIVO:  {
              
            target: 'paymentSection.PagoEfectivo',
            actions: 'setOffline',
            }
          },
        },
        paymentSection:{
          initial: 'Stripeform',
          states: {
            Stripeform: '',
            PaypalButton: '',
            PagoEfectivo: '',
            
          },
          onDone: 'processing',
        },
        processing: {
          after: {
            5000: {
              target: 'rejected'
            }
          },
          on: {
            SUCCESS: 'checkingAuth',
            FAILED: 'rejected',
            
          }
        },
        checkingAuth: {
          on: {
            '': [
              {
                cond: 'isLogged',
                target: 'Thanks',
              },
              {
                target: 'CheckoutActivation',
              },
            ],
          },
        },
        CheckoutActivation: {
          on: {
            SIGNUP: 'checkingMethod',
            LOGIN: 'checkingMethod'
          }
        },
        checkingMethod: {
          on: {
            '': [
                {
                  cond: 'isOnline',
                  target: 'Thanks'
                },
                {
                  target: 'orderDetail'
                }
              ]
          }
        },
        Thanks: {
          type: 'final'
        },
        orderDetail: {
          type: 'final'
          
        },
        rejected: {
          type: 'final'
        },
      }}, {
        guards: {
          isLogged: (context) => {
            return !!context.user;
          },
          isOnline: (context) => {
            return context.paymentType === 'online'
          }
        },
        actions: {
          setOffline: assign({
            paymentType: 'offline'
          }),
          onLogin: assign({
            user: 'Lucas'
          })
        },
        
    });