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

machine.js

const fetchCreditCheck = (context, event) => new Promise((resolve, reject) => {
    console.log("fetch credit check")
    return resolve({
        status: "APPROVED"
    })
});

const fetchBankIdStatus = (context, event) => new Promise((resolve, reject) => {
    console.log("fetch bankid status")
    return resolve({
        auth_status: "AWAITING_SIGNATURE"
    })
});

const isApproved = (context, event, meta) => {
    return event?.data?.status == "APPROVED";
};
const isComplement = (context, event) => {
    return event?.data?.status == "AWAITING_APPROVAL";
};
const isRejected = (context, event) => {
    return event?.data?.status == "REJECTED";
};

const CheckoutMachine = Machine({
    id: 'checkout',
    initial: 'OpenBankID',
    context: {
        creditCheck: null
    },
    states: {
        OpenBankID: { on: { SUCCESS: 'BankIDStatus', FAILURE: 'BankIDFailed' } },
        BankIDFailed: { on: { RETRY: 'OpenBankID' } },
        BankIDStatus: {
            initial: 'polling',
            // https://github.com/davidkpiano/xstate/issues/567
            states: {
                polling: {
                    invoke:  {
                        id: 'pollBankId',
                        src: (context, event) => (callback, onReceive) => {
                            // This will send the 'INC' event to the parent every second
                            const id = setInterval(() => {
                                // fetch bankid status here?
                                return callback('INC')
                            }, 1000);
                
                            //TODO set the context to the bankid status
                            
                            // Perform cleanup
                            return () => clearInterval(id);
                        },
                    },
                },
            },
            on: {
                INC: 'CreditCheck'
            },
        },
        // Perhaps make this into a child FSM?
        CreditCheck: {
            initial: 'checking',
            states: {
                checking: {
                    invoke: {
                        id: 'checking',
                        src: fetchCreditCheck,
                        onDone: [ {
                            target: '#OrderComplete',
                            cond: isApproved,
                            actions: assign({
                                creditCheck: (_, event) => event.data
                            })
                        },
                                  {
                                      target: 'complement',
                                      cond: isComplement,
                                      actions: assign({
                                          creditCheck: (_, event) => event.data
                                      })
                                  },
                                  {
                                      target: 'rejected',
                                      cond: isRejected,
                                      actions: assign({
                                          creditCheck: (_, event) => event.data
                                      })
                                  },
                                ],
                        onError: 'rejected'
                    },
                    on: {
                        CANCEL: 'rejected'
                    }
                },
                complement: {},
                rejected: {},
            }
        },
        OrderComplete: {
            id: "OrderComplete",
        },
    },
})