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}) => {
            await modal.userSession.client.save();
            await modal.userSession.client.applyDefaultTip();
          },
          onDone: {target: 'closing'},
        },
        onEntry: assign({title: 'Setting your default tip'}),
      },
      closing: {
        invoke: {
          src: ({modal}) => modal.userSession.user.storeValues({hasDismissedFirstTimeTippingModal: true}),
          onDone: {target: 'closed'}
        }
      },
      closed: {},
    },
  }
)