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: 'Colombia',
      context: {
        user: '',
        paymentType: 'online',
        
      },
      states: {
        'Colombia': {
          on: {
            GUEST: 'Method',
            LOGIN: {
              target: 'Method',
              actions: 'onLogin',
            }
          },
          meta: {
            message: 'Loading'
          }
        },
        'Method': {
          on:{
            CARD: 'paymentSection.Stripeform',
            PSE: {
              actions: 'setOffline',
              target: 'paymentSection.PSEForm',
            } ,
            PAYPAL: 'paymentSection.PaypalButton',
            CASH:  {
              target: 'paymentSection.Efecty',
              actions: 'setOffline',
            }
          },
        },
        paymentSection:{
          initial: 'Stripeform',
          states: {
            Stripeform: '',
            PSEForm: '',
            PaypalButton: '',
            Efecty: '',
            
          },
          onDone: 'processing',
        },
        processing: {
          on: {
            SUCCESS: 'checkingAuth',
            FAILED: 'rejected',
            
          }
        },
        checkingAuth: {
          on: {
            '': [
              {
                cond: 'isOnlineLogged',
                target: 'Thanks',
              },
              {
                cond: 'isOflineLogged',
                target: 'payOrder'
              },
              {
                target: 'CheckoutActivation',
              },
            ],
          },
        },
        CheckoutActivation: {
          on: {
            SIGNUP: 'checkingMethod',
            LOGIN: 'checkingMethod'
          }
        },
        checkingMethod: {
          on: {
            '': [
                {
                  cond: 'isOnline',
                  target: 'Thanks'
                },
                {
                  target: 'payOrder'
                }
              ]
          }
        },
        Thanks: {
          type: 'final'
        },
        payOrder: {
          type: 'final'
          
        },
        rejected: {
          type: 'final'
        },
      }}, {
        guards: {
          isOnlineLogged: (context) => {
            return !!context.user && context.paymentType === 'online';
          },
          isOflineLogged: (context) => {
            return !!context.user && context.paymentType === 'offline';
          },
          isOnline: (context) => {
            return context.paymentType === 'online'
          }
        },
        actions: {
          setOffline: assign({
            paymentType: 'offline'
          }),
          onLogin: assign({
            user: 'Lucas'
          })
        },
        
    });