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

machine.js

  const otpIsValid = (context, event) => {
  return context.otpSent && event.otp && event.otp.length === 6;
}

const otpIsNotValid = (context, event) => {
  return !context.otpSent || !event.otp || event.otp.length !== 6;
}
const CardStatusMachine = Machine(
  {
    id: "Card Status" ,
    initial: 'inactive',
    context: {
      otpSent: false
    },
    states: {
      inactive: {
        on: {
          KEYINOTP: [
            {
              target: 'active',
              cond: otpIsValid
            },
            {
              target: 'inactive',
              cond: otpIsNotValid,
              actions: assign({otpSent: false})
            }
          ],
          REQOTP: {
              target: 'inactive',
              actions: assign({otpSent: true})
            }
        }
      },
          active: {
        id:"active",
        on: {
          BLOCK: 'blocked',
          CANCEL: 'canceled'
        }
      },
      canceled: {
        type: 'final'
      },
      blocked: {
        on: {
          UNBLOCK: "active"
        }
      }
    }
  }
);