@eka-care/abha 0.0.6 → 0.0.8

package/src/routes/create-abha-with-aadhaar-screen.tsx

@@ -1,984 +0,0 @@
-import {
-  ArrowLeftRegularIcon,
-  CheckSquareSolidIcon,
-  ChevronDownRegularIcon,
-  CircleInfoSolidIcon,
-  PhoneSolidIcon,
-  SquareRegularIcon,
-  XMarkRegularIcon,
-} from '@elixir/icons';
-
-import {
-  ABHA_AUTH_FLOW_METHOD,
-  AUTH_METHOD,
-  LOADING_STATE,
-  REGISTRATION_TYPE,
-} from '@elixir/types';
-import {
-  postAuthInitV2,
-  postRegisterAadhaarInit,
-  postRegisterMobileInit,
-  postAuthLogoutV2,
-} from 'apis';
-import { useEffect, useRef, useState } from 'react';
-import Pds2Button from '../atoms/button';
-import Pds2CustomButton from '../atoms/button/custom-button';
-import Pds2Header from '../atoms/header';
-import PatientPds2InputField from '../atoms/input-field/patient-input-field';
-import Pds2Spinner from '../atoms/spinner';
-import TextSeparator from '../atoms/text-separator';
-import BottomSheetWrapper from '../molecules/abha/bottom-sheet/bottom-sheet-wrapper';
-import SpacedInputComponent from '../molecules/abha/spaced-input-component';
-import AbhaErrorBottomSheet from '../organisms/abha/error-bottom-sheet';
-import useAuthAbhaStore from '../stores/auth-abha-store';
-import { SCREEN_NAMES } from '../stores/auth-abha-store/types';
-import { unMount } from '../main';
-import { handleSendEvent } from '@elixir/utils';
-
-type InitMethod = 'aadhaar' | 'mobile';
-
-const CreateAbhaWithAadhaarScreen = () => {
-  const [isBottomSheetOpen, setIsBottomSheetOpen] = useState(false);
-  const setScreen = useAuthAbhaStore((state) => state.setScreen);
-  const goBackLoginScreen = useAuthAbhaStore((state) => state.goBackLoginScreen);
-  const setAbhaAuthFlowMethod = useAuthAbhaStore((state) => state.setAbhaAuthFlowMethod);
-  const initAbhaAppMethod = useAuthAbhaStore((state) => state.initAbhaAppMethod);
-  const clientId = useAuthAbhaStore((state) => state.clientId);
-
-  useEffect(() => {
-    handleSendEvent({
-      eventName: 'page_view',
-      eventData: {
-        page_view: 'abha_landing_screen',
-        platform: clientId,
-      },
-    });
-
-    window.curio?.pushToMixpanel?.('page_view', {
-      platform: clientId,
-      page_view: 'abha_landing_screen',
-    });
-
-    if (window.EkaAbha?.changeStatusBarColor) {
-      window.EkaAbha.changeStatusBarColor('#E4E1FA');
-      return () => {
-        if (window.EkaAbha?.changeStatusBarColor) window?.EkaAbha?.changeStatusBarColor('#FFFFFF');
-      };
-    }
-
-    // Default create flow will be mobile flow.
-    setAbhaAuthFlowMethod(ABHA_AUTH_FLOW_METHOD.MOBILE);
-  }, []);
-
-  const handleBackButtonClick = () => {
-    window.EkaAbha?.onAbhaClose();
-    unMount();
-  };
-
-  return (
-    <div className="pds2-bg-bg-brand-03 pds2-min-h-screen">
-      {/* * If clientId is 'eka-web', do not show back button, but preserve space */}
-      {clientId !== 'eka-web' ? (
-        <Pds2Header
-          prefixIcon={
-            <button
-              className="pds2-w-24 pds2-bg-white pds2-h-24 pds2-rounded-full pds2-flex pds2-items-center pds2-justify-center ripple"
-              onClick={handleBackButtonClick}
-            >
-              <ArrowLeftRegularIcon />
-            </button>
-          }
-          title=""
-          className="pds2-bg-white"
-        />
-      ) : (
-        <Pds2Header
-          prefixIcon={<div className="pds2-w-24 pds2-h-24" aria-hidden="true" />}
-          title=""
-          className="pds2-bg-white"
-        />
-      )}
-
-      <LoginWithAadhaar openInfoDialog={() => setIsBottomSheetOpen(true)} />
-      <OtherLoginOptions />
-
-      <BottomSheetWrapper
-        isOpen={isBottomSheetOpen}
-        setIsOpen={setIsBottomSheetOpen}
-        shouldCloseOnClickOutside={true}
-      >
-        <BottomSheetContent onClose={() => setIsBottomSheetOpen(false)} />
-      </BottomSheetWrapper>
-    </div>
-  );
-};
-
-export default CreateAbhaWithAadhaarScreen;
-
-const BottomSheetContent = ({ onClose }: { onClose: () => void }) => {
-  return (
-    <div className="pds2-flex pds2-flex-col pds2-p-16 pds2-text-center">
-      <div className="pds2-flex pds2-justify-end pds2-items-center">
-        <button
-          onClick={onClose}
-          className="pds2-w-24 pds2-h-24 pds2-rounded-full pds2-flex pds2-items-center pds2-justify-center ripple"
-        >
-          <XMarkRegularIcon className="pds2-w-18 pds2-h-18 pds2-text-text-03" />
-        </button>
-      </div>
-      <div className="pds2-space-y-12 pds2-flex pds2-flex-col pds2-items-center pds2-justify-center">
-        <img
-          src="https://cdn.eka.care/vagus/cm5m4sx4a000c0tg9a5fo1gkz.webp"
-          alt="national health authority"
-          className="pds2-h-52"
-        />
-        <div className="Heading4Semibold pds2-text-text-black">Terms & Conditions</div>
-      </div>
-      <div className="pds2-space-y-8">
-        <div className="Body2Regular pds2-text-text-03 pds2-py-16">
-          I, hereby declare that I am voluntarily sharing my identity information with National
-          Health Authority (NHA) for the sole purpose of creation of ABHA number. I understand that
-          my ABHA number can be used and shared for purposes as may be notified by ABDM (Ayushman
-          Bharat Digital Mission) from time to time including provision of healthcare services.
-          Further, I am aware that my personal identifiable information (Name, Address, Age, Date of
-          Birth, Gender and Photograph) may be made available to the entities working in the
-          National Digital Health Ecosystem (NDHE) which inter alia includes stakeholders and
-          entities such as healthcare professionals (e.g. doctors), facilities
-        </div>
-        <Pds2Button
-          title="Okay, Got it!"
-          onClick={onClose}
-          state={'enabled'}
-          className="pds2-w-full"
-        />
-      </div>
-    </div>
-  );
-};
-
-const loginOptions = [
-  {
-    textSeparatorTitle: 'Other options to create ABHA',
-    loginCTA: [
-      {
-        method: ABHA_AUTH_FLOW_METHOD.AADHAR_NUMBER,
-        title: 'Use Aadhaar to create ABHA',
-        prefixIcon: (
-          <img
-            src="https://cdn.eka.care/vagus/cm5mcdm3h00070tfs9fjkepff.webp"
-            alt="Aadhaar Icon"
-            className="pds2-h-24 pds2-w-24"
-            loading="lazy"
-          />
-        ),
-      },
-      {
-        method: ABHA_AUTH_FLOW_METHOD.MOBILE,
-        title: 'Use mobile to create ABHA',
-        prefixIcon: <PhoneSolidIcon className="pds2-w-20 pds2-h-20 pds2-text-icon-success-02" />,
-      },
-    ],
-  },
-  {
-    textSeparatorTitle: 'Login with ABHA',
-    loginCTA: [
-      {
-        method: ABHA_AUTH_FLOW_METHOD.ABHA_NUMBER,
-        title: 'ABHA',
-        prefixIcon: (
-          <img
-            src="https://cdn.eka.care/vagus/cm4ml1lwu00000tfs1okl7hs9.webp"
-            alt="ABHA Address Icon"
-            className="pds2-h-24 pds2-w-24"
-            loading="lazy"
-          />
-        ),
-      },
-    ],
-  },
-];
-
-const OtherLoginOptions = () => {
-  const setAbhaAuthFlowMethod = useAuthAbhaStore((state) => state.setAbhaAuthFlowMethod);
-  const setScreen = useAuthAbhaStore((state) => state.setScreen);
-  const selectedMethod = useAuthAbhaStore((state) => state.abhaAuthFlowMethod);
-  // android is faster to load the state, so it gets the correct value before rendering.
-  // iOS is a bit slower, so it shows 'MOBILE' first before the correct state kicks in —
-  // causing both Aadhaar form and Aadhaar button to show.
-  const [selectedFlow, setSelectedFlow] = useState<string>(
-    selectedMethod ?? ABHA_AUTH_FLOW_METHOD.MOBILE
-  );
-  const initAbhaAppMethod = useAuthAbhaStore((state) => state.initAbhaAppMethod);
-  const clientId = useAuthAbhaStore((state) => state.clientId);
-  const isNewLoginOrCreateFlow = useAuthAbhaStore((state) => state.isNewLoginOrCreateFlow);
-
-  useEffect(() => {
-    if (selectedMethod && selectedMethod !== selectedFlow) {
-      setSelectedFlow(selectedMethod);
-    }
-  }, [selectedMethod]);
-
-  return (
-    <div className="pds2-p-16 pds2-space-y-16">
-      {loginOptions.map((option) => (
-        <>
-          <TextSeparator title={option.textSeparatorTitle} />
-          {option.loginCTA
-            .filter((CTA) => {
-              // Login with 'ABHA' button is always displayed(not in web)
-              if (CTA.title === 'ABHA') return true;
-
-              // Show only Aadhaar when Mobile is selected and vice versa
-              if (selectedFlow === ABHA_AUTH_FLOW_METHOD.MOBILE)
-                return CTA.method === ABHA_AUTH_FLOW_METHOD.AADHAR_NUMBER;
-              if (selectedFlow === ABHA_AUTH_FLOW_METHOD.AADHAR_NUMBER)
-                return CTA.method === ABHA_AUTH_FLOW_METHOD.MOBILE;
-
-              return true;
-            })
-            .map((CTA) => (
-              <Pds2CustomButton
-                key={CTA.method}
-                prefixIcon={CTA.prefixIcon}
-                title={CTA.title}
-                suffixIcon={
-                  <ChevronDownRegularIcon
-                    className="pds2-ml-auto pds2-h-16 pds2-w-16 pds2-text-text-04 -pds2-rotate-90"
-                    aria-hidden="true"
-                  />
-                }
-                onClick={() => {
-                  window.curio?.pushToMixpanel?.('abha_landing_screen_clicks', {
-                    platform: clientId,
-                    type:
-                      CTA.method === ABHA_AUTH_FLOW_METHOD.AADHAR_NUMBER
-                        ? 'use Aadhaar'
-                        : 'use Mobile',
-                  });
-                  if (CTA.title === 'ABHA') {
-                    if (isNewLoginOrCreateFlow) {
-                      setScreen(SCREEN_NAMES.LOGIN_OR_CREATE_ABHA);
-                    } else {
-                      setScreen(SCREEN_NAMES.LOGIN_WITH_ABHA);
-                    }
-                    return;
-                  }
-                  if (CTA.method === ABHA_AUTH_FLOW_METHOD.AADHAR_NUMBER) {
-                    setSelectedFlow(ABHA_AUTH_FLOW_METHOD.AADHAR_NUMBER);
-                  } else if (CTA.method === ABHA_AUTH_FLOW_METHOD.MOBILE) {
-                    setSelectedFlow(ABHA_AUTH_FLOW_METHOD.MOBILE);
-                  }
-
-                  setAbhaAuthFlowMethod(CTA.method);
-                }}
-              />
-            ))}
-        </>
-      ))}
-    </div>
-  );
-};
-
-const LoginWithAadhaar = ({ openInfoDialog }: { openInfoDialog: () => void }) => {
-  const setScreen = useAuthAbhaStore((state) => state.setScreen);
-  const selectedMethod = useAuthAbhaStore((state) => state.abhaAuthFlowMethod);
-  const setRegistrationType = useAuthAbhaStore((state) => state.setRegistrationType);
-
-  const setAadhaarInitResponse = useAuthAbhaStore((state) => state.setAadhaarInitResponse);
-  const setMobileInitResponse = useAuthAbhaStore((state) => state.setMobileInitResponse);
-  const setBottomsheetErrorInfo = useAuthAbhaStore((state) => state.setBottomsheetErrorInfo);
-  const clearAbhaAuthStore = useAuthAbhaStore((state) => state.clearAbhaAuthStore);
-  const initAbhaAppMethod = useAuthAbhaStore((state) => state.initAbhaAppMethod);
-  const initAbhaAppMobileNumber = useAuthAbhaStore((state) => state.initAbhaAppMobileNumber);
-  const isLoggedInFromRedirect = useAuthAbhaStore((state) => state.isLoggedInFromRedirect);
-
-  const [aadhaarNo, setAadhaarNo] = useState<string>('');
-  const [mobileNumber, setMobileNumber] = useState('');
-  const [isValidAadhaar, setIsValidAadhaar] = useState<boolean>(false);
-  const [isValidMobileNumber, setIsValidMobileNumber] = useState(false);
-
-  const [error, setError] = useState<string | null>(null);
-
-  const [isNhaConsent, setIsNhaConsent] = useState<boolean>(true);
-  const [isErrorNhaConsent, setIsErrorNhaConsent] = useState<boolean>(false);
-
-  const [initApiStatus, setInitApiStatus] = useState<Record<InitMethod, LOADING_STATE>>({
-    aadhaar: LOADING_STATE.IDLE,
-    mobile: LOADING_STATE.IDLE,
-  });
-
-  const isMobileNonEditable = !!initAbhaAppMobileNumber;
-  const clientId = useAuthAbhaStore((state) => state.clientId);
-  const isEkaAppLogin = useAuthAbhaStore((state) => state.isEkaAppLogin);
-  const isDocAppRequest = useAuthAbhaStore((state) => state.isDocAppRequest);
-  const setIsApiTriggered = useAuthAbhaStore((state) => state.setIsApiTriggered);
-  const isApiTriggered = useAuthAbhaStore((state) => state.isApiTriggered);
-  const setSelectedAbhaFlow = useAuthAbhaStore((state) => state.setSelectedAbhaFlow);
-  const isNewLoginOrCreateFlow = useAuthAbhaStore((state) => state.isNewLoginOrCreateFlow);
-
-  // 1. First useEffect: Initialize the mobile number (runs only once)
-  useEffect(() => {
-    if (initAbhaAppMobileNumber) {
-      setMobileNumber(initAbhaAppMobileNumber);
-      setIsValidMobileNumber(initAbhaAppMobileNumber.length === 10);
-    }
-  }, [initAbhaAppMobileNumber]);
-
-  // 2. Second useEffect: Trigger handleRegister (fixed to prevent multiple calls)
-  useEffect(() => {
-    if (isApiTriggered) {
-      console.log('Api is already triggered: ', isApiTriggered);
-      return;
-    }
-
-    const shouldTriggerAadhaar = aadhaarNo && aadhaarNo.length === 12 && isNhaConsent;
-    const shouldTriggerMobile = mobileNumber && mobileNumber.length === 10 && isNhaConsent;
-
-    console.log(
-      'Conditions check:',
-      'isLoggedInFromRedirect:',
-      isLoggedInFromRedirect,
-      'shouldTriggerAadhaar:',
-      shouldTriggerAadhaar,
-      'shouldTriggerMobile:',
-      shouldTriggerMobile
-    );
-
-    if (isLoggedInFromRedirect || shouldTriggerAadhaar || shouldTriggerMobile) {
-      // Set the flag BEFORE any async operations to prevent race conditions
-      setIsApiTriggered(true);
-      console.log('Setting hasTriggered to true and proceeding with registration');
-
-      // Track events before API call
-      let eventName = '';
-      if (shouldTriggerAadhaar) {
-        eventName = 'abha_aadhaar_otp_verify_clicks';
-      } else if (shouldTriggerMobile) {
-        eventName = 'abha_mobile_otp_verify_clicks';
-      }
-
-      if (eventName) {
-        window.curio?.pushToMixpanel?.(eventName, {
-          platform: clientId,
-          type: 'next',
-        });
-      }
-
-      // Now call the memoized handler
-      handleRegister();
-    }
-  }, [isLoggedInFromRedirect, aadhaarNo, mobileNumber, isNhaConsent, isApiTriggered]);
-
-  // Create a helper function to update status
-  const updateInitStatus = (method: InitMethod, status: LOADING_STATE) => {
-    setInitApiStatus((prev) => ({
-      ...prev,
-      [method]: status,
-    }));
-  };
-
-  // Mobile number handler
-  const handleMobileNumberChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = e.target.value;
-    if (value.length <= 10) {
-      setMobileNumber(value);
-      setIsValidMobileNumber(value.length === 10);
-      setError(null);
-    }
-  };
-
-  const handleOnAadhaarInputComplete = ({ inputVal: newAadhaarNo }: { inputVal: string }) => {
-    if (error) setError(null);
-    if (newAadhaarNo.length === 12) {
-      setAadhaarNo(newAadhaarNo);
-    }
-  };
-
-  const handleRegister = async () => {
-    setError(null);
-
-    const method: InitMethod =
-      selectedMethod === ABHA_AUTH_FLOW_METHOD.AADHAR_NUMBER ? 'aadhaar' : 'mobile';
-    updateInitStatus(method, LOADING_STATE.LOADING);
-
-    let authTxnId = '';
-    // if the trigger is not from the eka app, then get the auth txn id
-    if (!isEkaAppLogin) {
-      // Get auth transaction ID first
-      handleSendEvent({
-        eventName: 'abha_create_auth_api_trigger',
-        eventData: {
-          type: 'api_trigger',
-          platform: clientId,
-          isEkaAppLogin: isEkaAppLogin ? 'true' : 'false',
-        },
-      });
-
-      window.curio?.pushToMixpanel?.('abha_create_auth_api_trigger', {
-        platform: clientId,
-        type: 'api_trigger',
-        isEkaAppLogin: isEkaAppLogin ? 'true' : 'false',
-      });
-      const { txn_id: txnId, error: authInitError } = await postAuthInitV2({
-        method: AUTH_METHOD.ABHA,
-      });
-      if (!txnId) {
-        handleSendEvent({
-          eventName: 'abha_create_auth_txnId_not_found',
-          eventData: {
-            type: 'api_trigger',
-            platform: clientId,
-            transactionId: txnId || '',
-            isEkaAppLogin: isEkaAppLogin ? 'true' : 'false',
-          },
-        });
-
-        window.curio?.pushToMixpanel?.('abha_create_auth_txnId_not_found', {
-          platform: clientId,
-          type: 'api_trigger',
-          transactionId: txnId || '',
-          isEkaAppLogin: isEkaAppLogin ? 'true' : 'false',
-        });
-        setError(authInitError?.message || 'Something went wrong');
-        updateInitStatus(method, LOADING_STATE.REJECTED);
-        return;
-      }
-      authTxnId = txnId;
-      handleSendEvent({
-        eventName: 'abha_create_auth_api_trigger_success',
-        eventData: {
-          type: 'api_trigger',
-          platform: clientId,
-          authTransactionId: authTxnId,
-          isEkaAppLogin: isEkaAppLogin ? 'true' : 'false',
-        },
-      });
-
-      window.curio?.pushToMixpanel?.('abha_create_auth_api_trigger_success', {
-        platform: clientId,
-        type: 'api_trigger',
-        authTransactionId: authTxnId,
-        isEkaAppLogin: isEkaAppLogin ? 'true' : 'false',
-      });
-      // call the auth logout api
-      await postAuthLogoutV2();
-    }
-
-    // depending on aadhaar flow or mobile flow, take the action
-    // aadhaar flow
-    if (selectedMethod === ABHA_AUTH_FLOW_METHOD.AADHAR_NUMBER) {
-      handleSendEvent({
-        eventName: 'abha_aadhaar_init_api_trigger_initiate',
-        eventData: {
-          type: 'api_trigger',
-          platform: clientId,
-          isEkaAppLogin: isEkaAppLogin ? 'true' : 'false',
-        },
-      });
-
-      window.curio?.pushToMixpanel?.('abha_aadhaar_init_api_trigger_initiate', {
-        platform: clientId,
-        type: 'api_trigger',
-        isEkaAppLogin: isEkaAppLogin ? 'true' : 'false',
-      });
-      // set the initial status to loading
-      updateInitStatus('aadhaar', LOADING_STATE.LOADING);
-      // check if aadhaar number is valid
-      if (aadhaarNo.length !== 12) {
-        setError('Please enter valid 12 digit Aadhaar number');
-        updateInitStatus('aadhaar', LOADING_STATE.REJECTED);
-        return;
-      }
-      // check if aadhaar consent is given
-      if (!isNhaConsent) {
-        setError('Please provide consent to create ABHA');
-        updateInitStatus('aadhaar', LOADING_STATE.REJECTED);
-        return;
-      }
-      // trigger aadhaar init api
-      const {
-        txn_id,
-        hint,
-        error: aadhaarError,
-        action: errorAction,
-      } = await postRegisterAadhaarInit({
-        aadhaar_number: aadhaarNo,
-      });
-      if (txn_id && hint) {
-        setAadhaarInitResponse({
-          authTxnId,
-          txnId: txn_id,
-          aadhaarOtpSentToHint: hint,
-        });
-        handleSendEvent({
-          eventName: 'abha_aadhaar_init_api_trigger_success',
-          eventData: {
-            type: 'api_trigger',
-            platform: clientId,
-            transactionId: txn_id,
-            isEkaAppLogin: isEkaAppLogin ? 'true' : 'false',
-          },
-        });
-
-        window.curio?.pushToMixpanel?.('abha_aadhaar_init_api_trigger_success', {
-          platform: clientId,
-          type: 'api_trigger',
-          transactionId: txn_id,
-          isEkaAppLogin: isEkaAppLogin ? 'true' : 'false',
-        });
-        updateInitStatus('aadhaar', LOADING_STATE.RESOLVED);
-        setRegistrationType(REGISTRATION_TYPE.CREATE);
-        setScreen(SCREEN_NAMES.ABHA_OTP_AND_MOBILE);
-        return;
-      }
-
-      handleSendEvent({
-        eventName: 'abha_aadhaar_init_api_trigger_failure',
-        eventData: {
-          type: 'api_trigger',
-          platform: clientId,
-          transactionId: txn_id || '',
-          isEkaAppLogin: isEkaAppLogin ? 'true' : 'false',
-        },
-      });
-
-      window.curio?.pushToMixpanel?.('abha_aadhaar_init_api_trigger_failure', {
-        platform: clientId,
-        type: 'api_trigger',
-        transactionId: txn_id || '',
-        isEkaAppLogin: isEkaAppLogin ? 'true' : 'false',
-      });
-
-      updateInitStatus('aadhaar', LOADING_STATE.REJECTED);
-      if (errorAction) {
-        setBottomsheetErrorInfo(errorAction);
-      } else {
-        setError(aadhaarError || 'Something went wrong');
-      }
-    } else {
-      // mobile flow
-      // set initial status to loading
-      updateInitStatus('mobile', LOADING_STATE.LOADING);
-      const mobileNo = initAbhaAppMobileNumber || mobileNumber;
-      // check if mobile number is valid
-      if (!mobileNo || mobileNo.length !== 10) {
-        handleSendEvent({
-          eventName: 'abha_mobile_number_length_error',
-          eventData: {
-            type: 'verify',
-            platform: clientId,
-            mobileNumber: mobileNo,
-            isEkaAppLogin: isEkaAppLogin ? 'true' : 'false',
-          },
-        });
-
-        window.curio?.pushToMixpanel?.('abha_mobile_number_length_error', {
-          platform: clientId,
-          type: 'verify',
-          mobileNumber: mobileNo,
-          isEkaAppLogin: isEkaAppLogin ? 'true' : 'false',
-        });
-        setError('Please enter valid 10 digit mobile number');
-        updateInitStatus('mobile', LOADING_STATE.REJECTED);
-        return false;
-      }
-
-      handleSendEvent({
-        eventName: 'abha_mobile_init_api_trigger_initiate',
-        eventData: {
-          type: 'api_trigger',
-          platform: clientId,
-          isEkaAppLogin: isEkaAppLogin ? 'true' : 'false',
-        },
-      });
-
-      window.curio?.pushToMixpanel?.('abha_mobile_init_api_trigger_initiate', {
-        platform: clientId,
-        type: 'api_trigger',
-        isEkaAppLogin: isEkaAppLogin ? 'true' : 'false',
-      });
-
-      // trigger mobile init api
-      const {
-        txn_id,
-        hint,
-        error: mobileError,
-        action: errorAction,
-      } = await postRegisterMobileInit({
-        mobile_number: mobileNo,
-      });
-      if (txn_id && hint) {
-        setMobileInitResponse({
-          authTxnId,
-          txnId: txn_id,
-          mobileOtpSentToHint: hint,
-        });
-        handleSendEvent({
-          eventName: 'abha_mobile_init_api_trigger_success',
-          eventData: {
-            type: 'api_trigger',
-            platform: clientId,
-            transactionId: txn_id,
-            isEkaAppLogin: isEkaAppLogin ? 'true' : 'false',
-            authTransactionId: authTxnId,
-          },
-        });
-
-        window.curio?.pushToMixpanel?.('abha_mobile_init_api_trigger_success', {
-          platform: clientId,
-          type: 'api_trigger',
-          transactionId: txn_id,
-          isEkaAppLogin: isEkaAppLogin ? 'true' : 'false',
-          authTransactionId: authTxnId,
-        });
-        setSelectedAbhaFlow('mobile');
-        updateInitStatus('mobile', LOADING_STATE.RESOLVED);
-        setRegistrationType(REGISTRATION_TYPE.CREATE);
-        setSelectedAbhaFlow('mobile');
-        console.log('update the selected abha flow to mobile');
-        setScreen(SCREEN_NAMES.ABHA_PHONE_NUMBER_VERIFICATION);
-        return;
-      }
-
-      handleSendEvent({
-        eventName: 'abha_mobile_init_api_trigger_failure',
-        eventData: {
-          type: 'api_trigger',
-          platform: clientId,
-          transactionId: txn_id || '',
-          isEkaAppLogin: isEkaAppLogin ? 'true' : 'false',
-          authTransactionId: authTxnId,
-        },
-      });
-
-      window.curio?.pushToMixpanel?.('abha_mobile_init_api_trigger_failure', {
-        platform: clientId,
-        type: 'api_trigger',
-        transactionId: txn_id || '',
-        isEkaAppLogin: isEkaAppLogin ? 'true' : 'false',
-        authTransactionId: authTxnId,
-      });
-
-      updateInitStatus('mobile', LOADING_STATE.REJECTED);
-      if (errorAction) {
-        setBottomsheetErrorInfo(errorAction);
-      } else {
-        setError(mobileError || 'Something went wrong');
-      }
-    }
-    return;
-  };
-
-  const handleSubmitClick: React.MouseEventHandler<HTMLButtonElement> = (e) => {
-    e.stopPropagation();
-    // Send event for 'Next' click'
-    console.log('selectedMethod : ', selectedMethod);
-    const eventName =
-      selectedMethod === 'aadhaar_number'
-        ? 'abha_aadhaar_otp_verify_clicks'
-        : 'abha_mobile_otp_verify_clicks';
-
-    handleSendEvent({
-      eventName: eventName,
-      eventData: {
-        type: 'verify',
-        platform: clientId,
-      },
-    });
-
-    window.curio?.pushToMixpanel?.(eventName, {
-      platform: clientId,
-      type: 'next',
-    });
-
-    if (error) setError(null);
-    handleRegister();
-  };
-
-  const handleErrorBottomsheetButtonClick = () => {
-    const mobileNumber = useAuthAbhaStore.getState().initAbhaAppMobileNumber;
-    const abhaAppMethod = useAuthAbhaStore.getState().initAbhaAppMethod;
-    const isAppLogin = useAuthAbhaStore.getState().isEkaAppLogin;
-    const isTriggered = useAuthAbhaStore.getState().isApiTriggered;
-    const client = useAuthAbhaStore.getState().clientId;
-    setScreen(SCREEN_NAMES.CREATE_ABHA_WITH_AADHAAR);
-    clearAbhaAuthStore();
-    useAuthAbhaStore.setState({ initAbhaAppMobileNumber: mobileNumber });
-    useAuthAbhaStore.setState({
-      screen: [SCREEN_NAMES.LOGIN_WITH_ABHA],
-    });
-    useAuthAbhaStore.setState({ isEkaAppLogin: isAppLogin });
-    useAuthAbhaStore.setState({ initAbhaAppMethod: abhaAppMethod });
-    useAuthAbhaStore.setState({ isApiTriggered: isTriggered });
-    useAuthAbhaStore.setState({ clientId: client });
-    setBottomsheetErrorInfo(null);
-  };
-
-  return (
-    <>
-      <div className="pds2-space-y-16 pds2-p-16 pds2-text-center">
-        <div className="pds2-flex pds2-justify-center pds2-items-center">
-          <img
-            src="https://cdn.eka.care/vagus/cm4ml1lwu00000tfs1okl7hs9.webp"
-            alt="adaar"
-            className="pds2-w-64 pds2-h-64 pds2-rounded-16"
-          />
-        </div>
-        <div className="pds2-space-y-16">
-          <div className="pds2-space-y-4">
-            <div className="pds2-text-text-black Heading3Semibold">
-              {isDocAppRequest ? 'Create ABHA' : 'Create your ABHA'}
-            </div>
-            <div className="pds2-text-text-03 Body2Regular">
-              {selectedMethod === ABHA_AUTH_FLOW_METHOD.AADHAR_NUMBER
-                ? 'Enter 12 digit Aadhaar number'
-                : 'Enter 10 digit mobile number'}
-            </div>
-          </div>
-          {selectedMethod === ABHA_AUTH_FLOW_METHOD.AADHAR_NUMBER ? (
-            <SpacedInputComponent
-              numberOfInputs={3}
-              length={4}
-              placeholder="XXXX"
-              onSubmit={handleOnAadhaarInputComplete}
-              setIsValid={setIsValidAadhaar}
-              error={error}
-            />
-          ) : (
-            <div className="pds2-flex pds2-flex-col pds2-justify-center pds2-items-center pds2-gap-y-16 pds2-px-09">
-              <PatientPds2InputField
-                value={mobileNumber}
-                onChange={handleMobileNumberChange}
-                disabled={isMobileNonEditable}
-                type="tel"
-                placeholder="Mobile Number"
-                PrefixComponent={
-                  <div className="pds2-flex pds2-items-center pds2-gap-x-8 pds2-border-r pds2-border-border-brand-02 pds2-pr-24">
-                    <img
-                      src="https://cdn.eka.care/vagus/cm4mlct2900000tg98p8u967s.webp"
-                      alt="India Flag"
-                      className="pds2-w-24 pds2-h-24"
-                    />
-                    <span className="pds2-text-text-black">+91</span>
-                  </div>
-                }
-              />
-            </div>
-          )}
-        </div>
-        <CustomCheckBox
-          id="aadhaar-number"
-          label="I give consent to NHA to share my identity info"
-          openInfoDialog={openInfoDialog}
-          className="pds2-justify-between"
-          isCheckboxChecked={isNhaConsent}
-          onCheckboxChange={(checkedStatus) => {
-            if (error) setError(null);
-            setIsErrorNhaConsent(false);
-            setIsNhaConsent(checkedStatus);
-          }}
-          isErrored={isErrorNhaConsent}
-        />
-        <div
-          onClick={() => {
-            if (!isNhaConsent) {
-              setIsErrorNhaConsent(true);
-            }
-          }}
-        >
-          <Pds2Button
-            title={
-              initApiStatus[
-                selectedMethod === ABHA_AUTH_FLOW_METHOD.AADHAR_NUMBER ? 'aadhaar' : 'mobile'
-              ] === LOADING_STATE.LOADING
-                ? 'Verifying'
-                : 'Next'
-            }
-            onClick={handleSubmitClick}
-            IconComponent={
-              initApiStatus[
-                selectedMethod === ABHA_AUTH_FLOW_METHOD.AADHAR_NUMBER ? 'aadhaar' : 'mobile'
-              ] === LOADING_STATE.LOADING
-                ? () => <Pds2Spinner className="pds2-ml-8" size={16} />
-                : undefined
-            }
-            state={
-              selectedMethod === ABHA_AUTH_FLOW_METHOD.AADHAR_NUMBER
-                ? isValidAadhaar && isNhaConsent
-                  ? 'enabled'
-                  : 'disabled'
-                : isValidMobileNumber && isNhaConsent
-                  ? 'enabled'
-                  : 'disabled'
-            }
-            className="pds2-w-full"
-          />
-        </div>
-        {error && <div className="pds2-text-text-error Body3Semibold">{error}</div>}
-      </div>
-
-      <AbhaErrorBottomSheet onSubmitClick={handleErrorBottomsheetButtonClick} />
-    </>
-  );
-};
-
-export const CustomCheckBox = ({
-  id,
-  label,
-  onCheckboxChange,
-  openInfoDialog,
-  className = '',
-  isCheckboxChecked = false,
-  isErrored = false,
-}: {
-  id: string;
-  label: string;
-  onCheckboxChange: (isChecked: boolean) => void;
-  openInfoDialog?: () => void;
-  className?: string;
-  isCheckboxChecked?: boolean;
-  isErrored?: boolean;
-}) => {
-  return (
-    <div
-      className={`pds2-flex pds2-items-center pds2-space-x-8 ${className} ${isErrored ? 'pds2-text-text-error' : 'pds2-text-text-03'}`}
-    >
-      <label htmlFor={id} className="Body2Regular pds2-flex pds2-items-center pds2-space-x-8">
-        <input
-          type="checkbox"
-          checked={isCheckboxChecked}
-          onChange={(e) => onCheckboxChange(e.target.checked)}
-          id={id}
-          className="pds2-hidden"
-        />
-        {isCheckboxChecked ? (
-          <CheckSquareSolidIcon className="pds2-w-14 pds2-h-14 pds2-text-icon-brand" />
-        ) : (
-          <SquareRegularIcon className="pds2-w-14 pds2-h-14" />
-        )}
-
-        <span>{label}</span>
-      </label>
-      {openInfoDialog && (
-        <button
-          onClick={openInfoDialog}
-          className="pds2-w-24 pds2-h-24 pds2-rounded-full pds2-flex pds2-items-center pds2-justify-center ripple"
-        >
-          <CircleInfoSolidIcon className="pds2-w-14 pds2-h-14 pds2-text-text-04" />
-        </button>
-      )}
-    </div>
-  );
-};
-
-export const OTPInput = ({
-  numberOfInputs,
-  length = 1,
-  placeholder = '',
-  setIsValid,
-  onSubmit,
-}: {
-  numberOfInputs: number;
-  length?: number;
-  placeholder?: string;
-  setIsValid?: (val: boolean) => void;
-  onSubmit: ({ inputVal }: { inputVal: string }) => void;
-}) => {
-  const inputRefs = useRef<HTMLInputElement[]>([]);
-  const [inputValues, setInputValues] = useState<string[]>(Array(numberOfInputs).fill(''));
-  const handleInput = (e: React.FormEvent<HTMLInputElement>, index: number) => {
-    const value = (e.target as HTMLInputElement).value;
-
-    const isValueNan = isNaN(Number(value));
-    if (isValueNan) return;
-
-    // Ensure total length doesn't exceed 12 digits
-    const currentValues = [...inputValues];
-    currentValues[index] = value;
-    const totalLength = currentValues.join('').length;
-    if (totalLength > numberOfInputs * length) return;
-
-    // Update current input value
-    setInputValues(currentValues);
-
-    if (totalLength === numberOfInputs * length) {
-      setIsValid?.(true);
-      onSubmit({ inputVal: currentValues.join('') });
-    } else {
-      setIsValid?.(false);
-    }
-
-    // Move to next input if current is full
-    if (value.length === length && index < numberOfInputs - 1) {
-      inputRefs.current[index + 1]?.focus();
-    }
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>, index: number) => {
-    if (e.key === 'Backspace' && !inputValues[index] && index > 0) {
-      inputRefs.current[index - 1]?.focus();
-      setInputValues((prev) => {
-        const newValues = [...prev];
-        newValues[index - 1] = '';
-        return newValues;
-      });
-    }
-  };
-
-  const handlePaste = (e: React.ClipboardEvent<HTMLInputElement>, index: number) => {
-    e.preventDefault();
-    const pastedData = e.clipboardData.getData('text').replace(/\D/g, ''); // Only keep digits
-
-    if (!pastedData) return;
-
-    const maxLength = numberOfInputs * length;
-    const validPastedData = pastedData.slice(0, maxLength);
-
-    // Split pasted data into chunks based on input length
-    const chunks = validPastedData.match(new RegExp(`.{1,${length}}`, 'g')) || [];
-
-    const newValues = [...inputValues];
-    chunks.forEach((chunk, i) => {
-      if (index + i < numberOfInputs) {
-        newValues[index + i] = chunk;
-      }
-    });
-
-    setInputValues(newValues);
-
-    // Focus the next empty input or the last input
-    const nextEmptyIndex = newValues.findIndex((val, i) => i >= index && !val);
-    if (nextEmptyIndex !== -1) {
-      inputRefs.current[nextEmptyIndex]?.focus();
-    } else {
-      inputRefs.current[numberOfInputs - 1]?.focus();
-    }
-  };
-  return (
-    <div className="pds2-flex pds2-justify-center pds2-items-center pds2-space-x-8">
-      {Array.from({ length: numberOfInputs }).map((_, index) => (
-        <label
-          key={index}
-          className="focus-within:pds2-border-border-brand-01 focus-within:pds2-border pds2-border-border-03 pds2-rounded-16"
-        >
-          <input
-            placeholder={placeholder}
-            value={inputValues[index]}
-            key={index}
-            type="text"
-            inputMode="numeric"
-            pattern="[0-9]*"
-            maxLength={length}
-            onPaste={(e) => handlePaste(e, index)}
-            ref={(el) => {
-              if (el) inputRefs.current[index] = el;
-            }}
-            onInput={(e) => handleInput(e, index)}
-            onKeyDown={(e) => handleKeyDown(e, index)}
-            className={`pds2-w-full pds2-text-center pds2-rounded-16 pds2-p-16 pds2-outline-none`}
-          />
-        </label>
-      ))}
-    </div>
-  );
-};