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 flowMachine = Machine({
    id: 'flow',
    initial: 'component_list',
    context: {
       components: ['country', 'phone_number']
    },
    states: {
      component_list:{
        initial: 'step_country',
        states: {
          step_country: { 
            data: 'country, phone_number',
            on: {
              NEXT: 'step_operator',
            } 
          },
          step_operator: {            
            on: {
              NEXT: 'step_denomination',
            } 
          },
          step_denomination: {            
            on: {
              NEXT: 'step_authorization',
            } 
          },
          step_authorization: {            
            on: {
              NEXT: 'step_payment',
            } 
          },
          step_payment: {            
            on: {
              NEXT: 'step_country',
            } 
          },
        }
      },
      summary:{
        states:{
          empty: 'empty',
          summary: 'summary'
        }
      }
    }
  },{
    actions: {
        component_list: (context, event) => {
            switch (event.type) {
                case 'NEXT':
                   console.log(context,event)
                    break;
                default:
                    context.method = 'cash';
                    break;
            }
        }
    }
  });