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

machine.js

const designerSubChart = {
  initial: 'standard',
  states: {
    standard: {
      on: {
        '': {
          target: 'readOnly',
          cond: 'hasReadOnlyParam'
        },
        ENTER_PREVIEW: 'preview',
        ENTER_ANNOTATIONS: {
          target: 'annotations',
          cond: 'hasTeamPlan'
        },
        ENTER_VIEWER: {
          actions: ['setHasLeaderAlreadyToTrue']
        }
      }
    },
    preview: {
      on: {
        EXIT: 'standard',
        ENTER_ANNOTATIONS: {
          target: 'annotations',
          cond: 'hasTeamPlan'
        }
      }
    },
    annotations: {
      on: {
        EXIT: 'standard',
        ENTER_PREVIEW: 'preview'
      }
    },
    readOnly: {}
  }
}

const userCaps = Machine({
  id: 'userCaps',
  initial: 'designer',
  context: {
    hasLeaderAlready: false,
    hasTeamPlan: true,
    hasShareLink: false,
  },
  states: {
    designer: {
      ...designerSubChart,
      on: {
        '': [{
          target: 'viewer',
          cond: 'hasLeaderAlready'
        }, {
          target: 'shareLink',
          cond: 'urlHasShareLink'
        }]
      }
    },
    viewer: {
      initial: 'standard',
      states: {
        standard: {
          on: {
            ENTER_PREVIEW: 'preview',
            REQUEST_LEADERSHIP: {
              actions: ['requestLeadership']
            },
            RECEIVE_LEADERSHIP: {
              target: '#userCaps.designer.standard',
              actions: ['setHasLeaderAlreadyToFalse']
              
            }
          },
        },
        preview: {
          on: {
            EXIT: 'standard'
          }
        },
      }
    },
    shareLink: {

    }
  }
}, {
  actions: {
    requestLeadership: () => {
      console.log('asking for leadership')
    },
    setHasLeaderAlreadyToFalse: assign({
      hasLeaderAlready: false
    }),
    setHasLeaderAlreadyToTrue: assign({
      hasLeaderAlready: true
    })
  },
  guards: {
    hasLeaderAlready: ctx => ctx.hasLeaderAlready,
    hasTeamPlan: ctx => ctx.hasTeamPlan,
    urlHasShareLink: ctx => ctx.hasShareLink,
    hasReadOnlyParam: () => false
  }
})