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: 'shipping',
    initial: 'deliveryAddress',
    context: {
        deliveryAddress: null,
        shippingOptions: null,
        errors: false,
        loading: false
    },
    states: {
        deliveryAddress: {
            initial: 'fetchDeliveryAddresses',
            states: {
                fetchDeliveryAddresses: {
                    entry: assign({
                                loading: true,
                                errors: false
                            }),
                    invoke: {
                        src: 'fetchDeliveryAddresses',
                        onDone: {
                            target: 'idle',
                            actions: assign({
                              deliveryAddress: (_, event) => event.data
                            })
                        }
                    }
                },
                idle: {
                    on: {
                        'SUBMIT': {
                            target: 'updateDeliveryAddresses'
                        }
                    }
                },

                updateDeliveryAddresses: {
                    entry: assign({
                                loading: true,
                                errors: false
                            }),
                    invoke: {
                        src: 'updateDeliveryAddresses',
                        onDone: {
                            target: 'success',
                        },
                        onError: {
                            target: 'idle',
                            actions: assign({
                                loading: false,
                                errors: (_, event) => event.data
                            }),
                        }
                    },
                },
                success: {
                    type: 'final'
                }
            },
            onDone: {
                target: '#shippingOptions'
            }
        },
        shippingOptions: {
            id: 'shippingOptions',
            initial: 'fetchShippingOptions',
            on: {
              'EDIT_DELIVERY_ADDRESS': 'deliveryAddress'
            },
            states: {
                fetchShippingOptions: {
                    invoke: {
                        src: 'fetchShippingOptions',
                        onDone: {
                            target: 'idle',
                            actions: assign({
                              shippingOptions: (_, event) => event.data
                            })
                        },
                        onError: {
                            target: 'idle'
                        }
                    }
                },
                idle: {
                    on: {
                        'SUBMIT': {
                          target: 'updateShippingOptions',
                          
                        },
                        
                    }
                },
                updateShippingOptions: {
                    entry: assign({
                                loading: true,
                                errors: false
                            }),
                    invoke: {
                        src: 'updateShippingOptions',
                        onDone: {
                            target: 'success',
                        },
                        onError: {
                            target: 'idle',
                            actions: assign({
                                loading: false,
                                errors: (_, event) => event.data
                            }),
                        }
                    },
                },
                success: {
                    type: 'final'
                }
            },
            onDone: {
              target: '#success'
            }
        },
        success: {
          id: 'success',
          type: 'final'
        }
    },
    
});