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

machine.js

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions
  // - XState (all XState exports)
  
  const deleteMachine = Machine(  {
    id: 'deleteConfirmation',
    initial: 'idle',
    context: {
      requiresConfirmation: false,
      warnings: undefined,
      rejections: undefined
    },
    states: {
      idle: {
        on: {
          CLICK: 'verifying'
        }
      },
      verifying: {
        invoke: {
          src: 'checkIfDeleteIsPossible',
          onDone: {
            target: 'checking',
            actions: assign({
              rejections: (_, event) => event.data.Rejections,
              warnings: (_, event) => event.data.Warnings
            })
          }
        }
      },
      checking: {
        on: {
          '': [
          {
            target: 'isRejected',
            cond: 'isRejected'
          },
          {
            target: 'needsConfirmation',
            cond: 'needsConfirmation'
          },

          { target: 'deleting' }
        ]
        }
      },
      isRejected: {
        on: {
          CANCEL: 'idle',
          CONFIRM: undefined
        }
      },
      needsConfirmation: {
        on: {
          CANCEL: 'idle',
          CONFIRM: 'deleting'
        }
      },
      deleting: {
        invoke: {
          src: 'handleDelete',
          onDone: {
            target: 'success'
          }
        }
      },
      success: {
        invoke: {
          src: 'handleDeleteSuccess'
        },
        type: 'final'
      }
    }
  },
  {
    guards: {
      isRejected: context => {
        const rejectionsLength = context.rejections?.length

        return rejectionsLength !== undefined && rejectionsLength > 0
      },
      needsConfirmation: context => {
        const warningsLength = context.warnings?.length

        return context.requiresConfirmation || Boolean(warningsLength && warningsLength > 0)
      }
    },
    services: {
      checkIfDeleteIsPossible: () => {
        return handleDelete(true)
      },
      handleDelete: () => handleDelete(false),
      handleDeleteSuccess: async () => {
        success()
      }
    }
  });

  function success() {
    window.alert('success!')
  }
  
  function handleDelete(checkIfDeleteIsPossible, deleteReason) {
    if (checkIfDeleteIsPossible) {
      return Promise.resolve({
        Rejections: [{}],
        Warnings: []
      })
    }
    
    return Promise.resolve(true)
  }