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

machine.js

const reservationCheckin = () => {
  return Promise.resolve()
}
const checkinMachine = Machine(
  {
    id: 'checkin',
    initial: 'idle',
    context: { data: { cancelled: false, checkin: '0',spots_available: 10 } },
    states: {
      idle: {
        on: {
          '': [
            { target: 'cancelled', cond: 'isCancelled' },
            { target: 'checkedIn', cond: 'isCheckedIn' },
            { target: 'full', cond: 'isFull' },
            { target: 'available' },
          ],
        },
      },
      available: { on: { CHECKIN: 'checkingIn' } },
      checkingIn: {
        invoke: {
          id: 'checkingIn',
          src: () =>
            reservationCheckin(),
          onDone: 'success',
          onError: 'failure',
        },
      },
      cancelled: {},
      checkedIn: {},
      full: {},
      success: {
        id: 'completeModal',
        initial: 'open',
        states: {
          open: { on: { ANOTHER_CLASS: 'anotherClass', LOGOUT: 'logout' } },
          anotherClass: { entry: 'anotherClass' },
          logout: { entry: 'logout' },
        },
      },
      failure: { on: { RETRY: 'checkingIn' } },
    },
  },
  {
    guards: {
      isCancelled: ({ data }) => {
        return data.cancelled ? true : false;
      },
      isCheckedIn: ({ data }) => {
        return data.checkin === '1' ? true : false;
      },
      isFull: ({ data }) => {
        return data.spots_available > 0 ? false : true;
      },
    },
  },
);