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

machine.js

const { } = XState;
const { log } = actions;

const generateVoucherStates = {
  id: 'generate-voucher',
  initial: 'addToCsv',
  states: {
    addToCsv: {
      entry: 'addCsvEntry',
      on: {
        VOUCHER_CODE: {
          target: 'done',
          action: 'assignVoucherCode'
        }
      }
    },
    done: {
      type: 'final'
    }
  }
};
const generateTransferwiseStates = {
  id: 'generate-transferwise'
};
const generateCreditStates = {
  id: 'generate-credit',
  initial: 'addToJunifer',
  states: {
    addToJunifer: {
      entry: 'addCreditToJunifer',
      type: 'final'
    }
  }
};

const generatePaymentStates = {
  id: 'generate-payment',
  initial: 'generatingPayment',
  states: {
    generatingPayment: {
      on: {
        '': [
          { target: 'voucher', cond: 'isPrefVoucher' },
          { target: 'transferwise', cond: 'isPrefTW' },
          { target: 'credit' }
        ],
      }
    },
    voucher: {
      onDone: 'done',
      ...generateVoucherStates
    },
    transferwise: {
      onDone: 'done',
      ...generateTransferwiseStates
    },
    credit: {
      onDone: 'done',
      ...generateCreditStates
    },
    done: {
      type: 'final'
    }
  }
};

const paymentMachine = Machine({
  id: 'payment',
  initial: 'created',
  context: {
    pref: 'voucher',
    amount: 140,
    id: 1234,
    code: 'none'
  },
  states: {
    created: {
      on: {
        REQUEST: 'requested',
        REQUEST_CANCEL: 'cancelled',
      }
    },
    requested: {
      on: {
        GENERATE: 'generating'
      }
    },
    generating: {
      ...generatePaymentStates,
      onDone: 'generated'
    },
    generated: {
      on: {
        COLLECT: 'collected',
        REQUEST_CANCEL: 'cancelRequested',
        EXPIRE: 'expired',
        CANCEL: 'cancelled'
      }
    },
    cancelRequested: {
      on: {
        CANCEL: 'cancelled'
      }
    },
    expired: {
      type: 'final'
    },
    cancelled: {
      type: 'final'
    },
    collected: {
      type: 'final'
    }
  }
}, {
  guards: {
    isPrefVoucher: ({ pref }) => pref === 'voucher',
    isPrefTW: ({ pref }) => pref === 'tw',
    isPrefCredit: ({ pref }) => pref === 'credit',
  },
  actions: {
    addCreditToJunifer: ({ amount, id }) => {
      console.log('adding credit', { id, amount });
    },
    addVoucherCsvEntry: ({ amount, id }) => {
      console.log('adding to csv', { id, amount })
    },
    assignVoucherCode: assign({
      code: 'some-voucher-code'
    })
  }
})