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

machine.js

const context = {
  hasAccount: false,
  displayMenu: false,
}

const BACK_TO_DASHBOARD = { target: '#dashboard' }

const TOP_LEVEL_NAVIGATION = {
  CHANGE_ACCOUNT: { target: '#dashboard.account.change' },
  ACCOUNT: { target: '#dashboard.account' },
  PRODUCTS: { target: '#dashboard.products' },
  INVOICES: { target: '#dashboard.invoices' },
  STATEMENT: { target: '#dashboard.statement' },
  SUBSCRIPTIONS: { target: '#dashboard.subscriptions' },
}

const guards = {
  hasAccount: (_, e) => e.data,
}

const services = {
  checkAccount: () => Promise.resolve(false)
}

const config = {
  id: 'finances',
  initial: 'launch',
  context,
  states: {
    launch: {
      invoke: {
        id: 'checkAccount',
        src: 'checkAccount',
        onDone: [
          {
            cond: 'hasAccount',
            target: '#dashboard',
            actions: 'setAccount',
          },
          { target: '#dashboard.account.new' }
        ],
        onError: {
          target: 'error',
        },
      },
    },
    error: {},
    idle: {
      id: 'dashboard',
      initial: 'dashboard',
      states: {
        dashboard: {
          on: {
            ...TOP_LEVEL_NAVIGATION,
            NEW_ACCOUNT: { target: 'account.new' },
            WITHDRAW: { target: '#dashboard.withdraw.idle' },
            ADVANCE: { target: '#dashboard.advance.idle' },
            TOGGLE_MENU: {
              target: '.#dashboard',
              actions: ['toggleMenu'],
            },
          },
        },
        account: {
          initial: 'idle',
          states: {
            idle: {
              on: {
                BACK_TO_DASHBOARD,
                ...TOP_LEVEL_NAVIGATION,
              },
            },
            new: {
              on: {
                COMPLETE: { target: '#dashboard' },
              },
            },
            change: {
              on: {
                CANCEL: { target: '#dashboard' },
              },
            },
          },
        },
        invoices: {
          initial: 'idle',
          states: {
            idle: {
              on: {
                BACK_TO_DASHBOARD,
                ...TOP_LEVEL_NAVIGATION,
                DETAILS: { target: 'details' },
              },
            },
            details: {
              on: {
                BACK: { target: '#dashboard.invoices.idle' },
                ...TOP_LEVEL_NAVIGATION,
              },
            },
          },
        },
        products: {
          initial: 'idle',
          states: {
            idle: {
              on: {
                BACK_TO_DASHBOARD,
                EDIT: { target: '#dashboard.products.edit' },
                CREATE: { target: '#dashboard.products.create' },
                ...TOP_LEVEL_NAVIGATION,
              },
            },
            edit: {
              on: {
                CANCEL: { target: '#dashboard.products.idle' }
              },
            },
            create: {
              CANCEL: { target: '#dashboard.products.idle' }
            },
          },
        },
        statement: {
          initial: 'idle',
          states: {
            idle: {
              on: {
                BACK_TO_DASHBOARD,
                ...TOP_LEVEL_NAVIGATION,
                WITHDRAW: { target: '#dashboard.withdraw.idle' },
              },
            },
          },
        },
        subscriptions: {
          initial: 'idle',
          states: {
            idle: {
              on: {
                BACK_TO_DASHBOARD,
                ...TOP_LEVEL_NAVIGATION,
                REMOVE: { target: 'remove' },
                NEW: { target: 'new' },
              },
            },
            remove: {
              on: {
                ...TOP_LEVEL_NAVIGATION,
                REMOVE: { target: 'idle' },
              },
            },
            new: {
              on: {
                ...TOP_LEVEL_NAVIGATION,
                BACK: { target: 'idle' },
                CANCEL: { target: 'idle' },
                SAVE: { target: 'idle' },
              },
            },
          },
        },
        withdraw: {
          initial: 'idle',
          states: {
            idle: {
              on: {
                BACK_TO_DASHBOARD,
                ...TOP_LEVEL_NAVIGATION,
                COMMIT: { target: 'idle' },
                ADVANCE: { target: '#dashboard.advance.idle' },
              },
            },
          },
        },
        advance: {
          initial: 'idle',
          states: {
            idle: {
              on: {
                BACK_TO_DASHBOARD,
                ...TOP_LEVEL_NAVIGATION,
                COMMIT: { target: 'idle' },
                WITHDRAW: { target: '#dashboard.withdraw.idle' },
              },
            },
          },
        },
      },
    },
  },
}

const options= {
  actions: {
    toggleMenu: assign({
      displayMenu: (ctx, e) => !ctx.displayMenu,
    }),
    setAccount: assign({
      hasAccount: (ctx, { data }) => data,
    }),
  },
  services,
  guards,
}

const financesDashboardMachine = Machine(config, options)