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

machine.js

const { freeze } = Object

const ACCOUNT_TYPES = freeze({
  CHECKING: 'Corrente',
  SAVINGS:  'Poupança'
})

const PERSON_TYPES = freeze({
  LEGAL_ENTITY: 'Pessoa Jurídica',
  INDIVIDUAL:   'Pessoa Física'
})

/**
 * @link https://dev.iugu.com/reference#criar-cliente
 */
const as_json = (ctx) => ({
  id: ctx.id,
  company: ctx.company,
  person_type: ctx.person_type,
  cpf_cnpj: ctx.cpf_cnpj,
  zip_code: ctx.zip_code,
  address: ctx.address,
  number: ctx.number,
  city: ctx.city,
  state: ctx.state,
  phone: ctx.phone,
  phone_prefix: ctx.phone_prefix,
  account_type: ctx.account_type,
  bank: ctx.bank,
  bank_ag: ctx.bank_ag,
  bank_cc: ctx.bank_cc,
})

const EMPTY = null;

const getInitialValues = ({
  id = EMPTY,
  company = EMPTY,
  person_type = PERSON_TYPES.INDIVIDUAL,
  cpf_cnpj = EMPTY,
  zip_code = EMPTY,
  address = EMPTY,
  number = EMPTY,
  city = EMPTY,
  state = EMPTY,
  phone = EMPTY,
  phone_prefix = EMPTY,
  account_type = ACCOUNT_TYPES.CHECKING,
  bank = EMPTY,
  bank_ag = EMPTY,
  bank_cc = EMPTY,
  resp_name = EMPTY,
  resp_cpf = EMPTY,
} = {}) => ({
  id,
  company,
  person_type,
  cpf_cnpj,
  zip_code,
  address,
  number,
  city,
  state,
  phone,
  phone_prefix,
  account_type,
  bank,
  bank_ag,
  bank_cc,
  resp_name,
  resp_cpf,
})

const context = {
  active: false,
  data: getInitialValues(),
  banks: [],
  errors: [],
}

const guards = {
  hasBanks: (_, e) =>{
    

    const has = e && e.data && e.data.banks && e.data.banks.length > 0
    

    return has
  } ,
}

const services = {
  fetchBanks: () => {
    console.log('will fetch banks')
    
    return Promise.resolve({ banks: [10, 20] })

    // return api.get('/api/finances/banks')
  },
  save_new: (ctx, e) => {
    return Promise.resolve()
  },
  save_existent: (ctx, e) => {
    return Promise.resolve()
  },
  toggle_active: (ctx, e) => {
    return Promise.resolve()
  },
}

const config = {
  id: 'account',
  initial: 'launch',
  context,
  states: {
    launch: {
      invoke: {
        id: 'fetchBanks',
        src: 'fetchBanks',
        onDone: [
          {
            cond: 'hasBanks',
            target: 'idle',
            actions: 'setBanks',
          },
          { target: 'error' },
        ],
        onError: {
          target: 'error',
        },
      },
    },
    error: {},
    idle: {
      on: {
        CREATE: 'creating.idle',
        CANCEL: {
          target: 'idle',
          actions: sendParent('CANCEL'),
        },
        TOGGLE_PERSON_TYPE: {
          target: 'idle',
          actions: 'togglePersonType',
        },
        TOGGLE_ACCOUNT_TYPE: {
          target: 'idle',
          actions: 'toggleAccountType',
        },
      },
    },
    creating: {
      inital: 'idle',
      states: {
        idle: {
          on: {
            CREATE: {
              target: 'saving_new',
              actions: 'saveAccount',
            },
            CANCEL: '#account.idle',
          },
        },
        saving_new: {
          invoke: {
            src: 'save_new',
            onDone: {
              target: '#account.idle',
              actions: ['assignAccount', 'notifyCreated'],
            },
            onFailure: 'failure',
          },
        },
      },
    },
    editing: {
      inital: 'idle',
      states: {
        idle: {
          on: {
            UPDATE: {
              target: 'saving_existent',
              actions: 'saveAccount',
            },
            CANCEL: '#account.idle',
          },
        },
        saving_existent: {
          invoke: {
            src: 'save_existent',
            onDone: {
              target: '#account.idle',
              actions: ['assignAccount', 'notifyUpdate'],
            },
            onFailure: {
              target: 'failure',
              actions: (ctx, e) => console.error('Account Update Error', ctx, e),
            },
          },
        },
      },
    },
  },
}

const options = {
  services,
  guards,
  actions: {
    setBanks: assign({
      banks: (ctx, e) => e?.data?.banks,
    }),

      handle_error: assign({
        error: (ctx, e) => {
          console.error(e)
          return e.error
        },
      }),

      togglePersonType: assign((ctx, { value: person_type }) => {
        return {
          data: {
            ...ctx.data,
            person_type,
          },
        }
      }),

      toggleAccountType: assign((ctx, { value: account_type }) => {
        return {
          data: {
            ...ctx.data,
            account_type,
          },
        }
      }),

      saveAccount: assign((ctx, e) => {
        console.log('saveAccount', e)

        return ctx
      }),

      assignAccount: assign((ctx, e) => {
        return { ...ctx, ...e.values, id: ctx.id }
      }),

      notifyCreated: sendParent((ctx, e) => ({ type: 'CREATE_ACCOUNT', values: ctx })),

        notifyUpdate: sendParent((ctx, e) => ({ type: 'UPDATE_ACCOUNT', values: ctx })),


  }
}

const accountMachine = Machine(config, options)