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

machine.js

const machine = Machine(
  {
    initial: 'intro',
    context: {
      title: '',
      ctaTitle: '',
    },
    states: {
      intro: {
        on: {
          CLOSE: 'closing',
          CTA_CLICKED: 'configureDefault'
        },
        onEntry: assign({
          title: 'New feature: driver tipping',
          ctaTitle: 'Yes, setup my default tipping amounts',
        })
      },
      configureDefault: {
        on: {
          CLOSE: 'closing',
          CTA_CLICKED: 'saveAndApplyDefault'
        },
        onEntry: assign({
          title: 'Set your default tip',
          ctaTitle: 'Save my default tip',
        })
      },
      saveAndApplyDefault: {
        invoke: {
          src: async ({modal}) => {
            return Math.round(Math.random()) ? Promise.resolve(true) : Promise.reject(false);
          },
          onDone: {target: 'closing'},
          onError: {target: 'error'}
        },
        onEntry: assign({title: 'Setting your default tip'}),
      },
      error: {
        on: {
          CLOSE: 'closing',
          CTA_CLICKED: 'saveAndApplyDefault'
        },
        onEntry: assign({
          title: 'Something went wrong',
          ctaTitle: 'Retry',
        })
      },
      closing: {
        invoke: {
          src: ({modal}) => Promise.resolve(true),
          onDone: {target: 'closed'},
        }
      },
      closed: {},
    },
  }
);