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

machine.js

const BOOK_OR_REVIEW = { BOOK: '#schedule', DATES: '#dates' };
 const appMachine = Machine(
  {
    id: 'app',
    initial: 'codeOfConduct',
    context: {
      lastScreen: 'schedule',
      selectedAttendee: undefined,
    },
    states: {
      codeOfConduct: {
        on: {
          '': { target: 'schedule', cond: 'hasAcceptedCodeOfConduct' },
          SCHEDULE: { target: 'schedule', cond: 'hasAcceptedCodeOfConduct' },
        },
      },
      schedule: {
        id: 'schedule',
        entry: 'setLastToSchedule',
        on: {
          DATES: 'dates.hist',
          SCHEDULE: 'schedule',
          SETTINGS: 'settings',
        },
        initial: 'home',
        states: {
          home: { on: { FRIEND: 'friend', SOMEONE_NEW: 'someoneNew' } },
          friend: {
            initial: 'person',
            states: {
              person: {
                initial: 'unselected',
                onDone: 'time',
                states: {
                  unselected: {
                    on: {
                      SELECT_FRIEND: {
                        target: 'selected',
                        actions: ['setSelectedFriend'],
                      },
                    },
                  },
                  selected: {
                    on: {
                      TIME: 'continue',
                    },
                  },
                  continue: {
                    type: 'final',
                  },
                },
              },
              time: { on: { RESERVE: 'reserved' } },
              reserved: { on: BOOK_OR_REVIEW },
            },
          },
          someoneNew: {
            initial: 'times',
            states: {
              times: { on: { INTERESTS: 'interests' } },
              interests: { on: { RESERVE: 'reserved' } },
              reserved: { on: BOOK_OR_REVIEW },
            },
          },
          hist: { type: 'history', history: 'deep' },
        },
      },
      dates: {
        id: 'dates',
        entry: 'setLastToDates',
        on: {
          SCHEDULE: 'schedule.hist',
          DATES: 'dates',
          SETTINGS: 'settings',
        },
        initial: 'home',
        states: {
          home: { on: { DECLINE: 'decline', CANCEL: 'cancel' } },
          hist: { type: 'history', history: 'deep' },
          decline: {
            initial: 'confirm',
            states: {
              confirm: { on: { DECLINE: 'reason', CANCEL: '#dates' } },
              reason: {
                on: {
                  NOT_AVAILABLE: 'notAvailable',
                  NOT_INTERESTED: 'notInterested',
                },
              },
              notAvailable: { on: BOOK_OR_REVIEW },
              notInterested: { on: BOOK_OR_REVIEW },
            },
          },
          cancel: {
            initial: 'confirm',
            states: {
              confirm: { on: { DECLINE: 'declined', CANCEL: '#dates' } },
              declined: { on: { BOOK: '#schedule', DATES: '#dates' } },
            },
          },
        },
      },
      settings: {
        on: {
          CLOSE: [
            {
              target: 'schedule.hist',
              cond: 'wasSchedule',
            },
            {
              target: 'dates.hist',
              cond: 'wasDates',
            },
            { target: 'schedule' },
          ],
        },
      },
    },
  },
  {
    guards: {
      hasAcceptedCodeOfConduct: () => {
        return true;
      },
      wasSchedule: ({ lastScreen }) => lastScreen === 'schedule',
      wasDates: ({ lastScreen }) => lastScreen === 'dates',
      friendSelected: ({ selectedAttendee }) =>
        Boolean(selectedAttendee),
    },
    actions: {
      setLastToSchedule: assign({
        lastScreen: 'schedule',
      }),
      setLastToDates: assign({
        lastScreen: 'dates',
      }),
      setSelectedFriend: assign({
        selectedAttendee: (_, event) => event.payload,
      }),
    },
  },
);