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

machine.js

const addressMachine = Machine({
  id: 'addresses',
  initial: 'same_invoice_address',
  context: {
    address_line_1: '',
    address_city: '',
    address_postcode: '',
    invoice_line_1: '',
    invoice_city: '',
    invoice_postcode: '',
  },
  states: {
    same_invoice_address: {
      on: {
        TOGGLE_SAME_INVOICE: {
          target: 'different_invoice_address',
        },
        ADDRESS_LINE_1: {
          target: 'same_invoice_address',
          actions: assign({
            address_line_1: (_, { value = '' }) => value,
            invoice_line_1: (_, { value = '' }) => value,
          }),
        },
        ADDRESS_CITY: {
          target: 'same_invoice_address',
          actions: assign({
            address_city: (_, { value = '' }) => value,
            invoice_city: (_, { value = '' }) => value,
          }),
        },
        ADDRESS_POSTCODE: {
          target: 'same_invoice_address',
          actions: assign({
            address_postcode: (_, { value = '' }) => value,
            invoice_postcode: (_, { value = '' }) => value,
          }),
        },
      },
    },
    different_invoice_address: {
      on: {
        TOGGLE_SAME_INVOICE: {
          target: 'same_invoice_address',
          actions: assign({
            invoice_line_1: ctx => ctx.address_line_1,
            invoice_city: ctx => ctx.address_city,
            invoice_postcode: ctx => ctx.address_postcode,
          }),
        },
        ADDRESS_LINE_1: {
          target: 'different_invoice_address',
          actions: assign({ address_line_1: (_, { value = '' }) => value }),
        },
        ADDRESS_CITY: {
          target: 'different_invoice_address',
          actions: assign({ address_city: (_, { value = '' }) => value }),
        },
        ADDRESS_POSTCODE: {
          target: 'different_invoice_address',
          actions: assign({ address_postcode: (_, { value = '' }) => value }),
        },
        INVOICE_LINE_1: {
          target: 'different_invoice_address',
          actions: assign({ invoice_line_1: (_, { value = '' }) => value }),
        },
        INVOICE_CITY: {
          target: 'different_invoice_address',
          actions: assign({ invoice_city: (_, { value = '' }) => value }),
        },
        INVOICE_POSTCODE: {
          target: 'different_invoice_address',
          actions: assign({ invoice_postcode: (_, { value = '' }) => value }),
        },
      },
    },
  },
});