@eka-care/abha-stg 0.1.34 → 0.1.35

package/src/routes/login-or-create-abha-address-screen.tsx

@@ -0,0 +1,1056 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { unMount } from '../main';
+import useAuthAbhaStore from '../stores/auth-abha-store';
+import Pds2Header from '../atoms/header';
+import { ChevronDownRegularIcon, PhoneSolidIcon, ArrowLeftRegularIcon } from '@eka-care/icons';
+import {
+  ABHA_AUTH_FLOW_METHOD,
+  LOADING_STATE,
+  AUTH_METHOD,
+  REGISTRATION_TYPE,
+  GET_EXTRA_HEADERS,
+} from '../constants/constants';
+import Pds2InputField from '../atoms/input-field';
+import SpacedInputComponent from '../molecules/abha/spaced-input-component';
+import Pds2Button from '../atoms/button';
+import { SCREEN_NAMES } from '../stores/auth-abha-store/types';
+import AbhaStepper from '../organisms/abha/abha-stepper';
+import handleSendEvent from '../utils/send-event-utils';
+import postAbdmLoginInit from '../api-queries/ndhm/post-abdm-login-init';
+import postAuthLogoutV2 from '../api-queries/aorta-go/v3/post-auth-logout-v2';
+import postAuthInitV2 from '../api-queries/aorta-go/v3/post-auth-init-v2';
+import postRegisterMobileInit from '../api-queries/ndhm/post-register-mobile-init';
+import postRegisterAadhaarInit from '../api-queries/ndhm/post-register-aadhaar-init';
+
+const isProd = import.meta.env.VITE_APP_ENV === 'PROD';
+type InitMethod = 'aadhaar' | 'mobile';
+
+const LoginorCreateAbhaScreen = () => {
+  const clientId = useAuthAbhaStore((state) => state.clientId);
+
+  useEffect(() => {
+    if (window.EkaAbha?.changeStatusBarColor) {
+      window.EkaAbha.changeStatusBarColor('#F2F4F7');
+      return () => {
+        if (window.EkaAbha?.changeStatusBarColor) window?.EkaAbha?.changeStatusBarColor('#FFFFFF');
+      };
+    }
+  }, []);
+
+  const handleBackButtonClick = () => {
+    window.EkaAbha?.onAbhaClose();
+    unMount();
+  };
+
+  const hideBackButtonFor = ['eka-web', 'phr'];
+
+  return (
+    <div className="pds2-h-full pds2-overflow-y-auto">
+      {/* * if clientId is eka-web or phr, do not show back button */}
+      {!hideBackButtonFor.includes(clientId) && (
+        <Pds2Header
+          prefixIcon={
+            <button onClick={handleBackButtonClick}>
+              <ArrowLeftRegularIcon />
+            </button>
+          }
+          title=""
+          className="pds2-bg-bg-01"
+        />
+      )}
+      <LoginOrCreateWithDifferentMethods />
+    </div>
+  );
+};
+
+const LoginOrCreateWithDifferentMethods = () => {
+  // State management from custom store
+  const selectedMethod = useAuthAbhaStore(
+    (state) => state.abhaAuthFlowMethod || ABHA_AUTH_FLOW_METHOD.MOBILE
+  );
+  const setAbhaAuthFlowMethod = useAuthAbhaStore((state) => state.setAbhaAuthFlowMethod);
+  const [identifierValue, setIdentifierValue] = useState<string>('');
+  const [abdmLoginInitApiStatus, setAbdmLoginInitApiStatus] = useState<LOADING_STATE>(
+    LOADING_STATE.IDLE
+  );
+  const isEkaAppLogin = useAuthAbhaStore((state) => state.isEkaAppLogin);
+  const [error, setError] = useState<string | null>('');
+  const setSelectedAbhaAddress = useAuthAbhaStore((state) => state.setSelectedAbhaAddress);
+  const setLoginIdentifierValue = useAuthAbhaStore((state) => state.setLoginIdentifierValue);
+  const setScreen = useAuthAbhaStore((state) => state.setScreen);
+  const [initApiStatus, setInitApiStatus] = useState<Record<InitMethod, LOADING_STATE>>({
+    aadhaar: LOADING_STATE.IDLE,
+    mobile: LOADING_STATE.IDLE,
+  });
+  const setRegistrationType = useAuthAbhaStore((state) => state.setRegistrationType);
+  const setAadhaarInitResponse = useAuthAbhaStore((state) => state.setAadhaarInitResponse);
+  const setMobileInitResponse = useAuthAbhaStore((state) => state.setMobileInitResponse);
+  const initAbhaAppMobileNumber = useAuthAbhaStore((state) => state.initAbhaAppMobileNumber);
+  const initAbhaAppIdentifierType = useAuthAbhaStore((state) => state.initAbhaAppIdentifierType);
+  const initAbhaAppIdentifier = useAuthAbhaStore((state) => state.initAbhaAppIdentifier);
+
+  const [mobileNumber, setMobileNumber] = useState('');
+  const [isValidMobileNumber, setIsValidMobileNumber] = useState(false);
+
+  const [isValidAadhaar, setIsValidAadhaar] = useState<boolean>(false);
+  const [aadhaarNumber, setAadhaarNumber] = useState('');
+
+  const [abhaNumber, setAbhaNumber] = useState('');
+  const [phrAddressFromDocApp, setPhrAddressFromDocApp] = useState('');
+  const [abhaAddress, setAbhaAddress] = useState('');
+
+  const isNewLoginOrCreateFlow = useAuthAbhaStore((state) => state.isNewLoginOrCreateFlow);
+  const setIsNewLoginOrCreateFlow = useAuthAbhaStore((state) => state.setIsNewLoginOrCreateFlow);
+  const clientId = useAuthAbhaStore((state) => state.clientId);
+  const hasInitApiTriggered = useRef(false);
+  const isInitApiTriggered = useAuthAbhaStore((state) => state.isInitApiTriggered);
+  const setIsInitApiTriggered = useAuthAbhaStore((state) => state.setIsInitApiTriggered);
+  const setIdentityValue = useAuthAbhaStore((state) => state.setIdentityValue);
+  const identityValue = useAuthAbhaStore((state) => state.identityValue);
+  const extra_headers = GET_EXTRA_HEADERS();
+  const setSelectedAbhaFlow = useAuthAbhaStore((state) => state.setSelectedAbhaFlow);
+  const isDocAppRequest = useAuthAbhaStore((state) => state.isDocAppRequest);
+  const txnId = useAuthAbhaStore((state) => state.txnId);
+
+  // Analytics: Track screen view
+  useEffect(() => {
+    trackAbhaEvent({
+      name: 'abha_login_or_create_screen',
+      data: {
+        flow: selectedMethod.toString()
+      },
+    });
+  });
+
+  // Prefill mobile number if present (from Eka app) and set validity
+  useEffect(() => {
+    if (!!initAbhaAppIdentifier && initAbhaAppIdentifierType === ABHA_AUTH_FLOW_METHOD.PHR_ADDRESS) {
+      setPhrAddressFromDocApp(initAbhaAppIdentifier);
+      setIdentifierValue(initAbhaAppIdentifier.split("@")[0]);
+      setIsDropdownOpen(true);
+      setIsPhrAddressSheetOpen(true);
+      setAbhaAuthFlowMethod(ABHA_AUTH_FLOW_METHOD.PHR_ADDRESS);
+    } else if (!!initAbhaAppIdentifier && initAbhaAppIdentifierType === ABHA_AUTH_FLOW_METHOD.ABHA_NUMBER) {
+      setIdentifierValue(initAbhaAppIdentifier);
+      setAbhaNumber(initAbhaAppIdentifier);
+      setIsDropdownOpen(true);
+      setIsAbhaNumberSheetOpen(true);
+      setAbhaAuthFlowMethod(ABHA_AUTH_FLOW_METHOD.ABHA_NUMBER);
+    } else if (!!initAbhaAppIdentifier &&  initAbhaAppIdentifierType === ABHA_AUTH_FLOW_METHOD.AADHAR_NUMBER) {
+      setAadhaarNumber(initAbhaAppIdentifier);
+      setIsValidAadhaar(true);
+      setIdentifierValue(initAbhaAppIdentifier);
+      setAbhaAuthFlowMethod(ABHA_AUTH_FLOW_METHOD.AADHAR_NUMBER);
+    } else if (!!initAbhaAppIdentifier &&  initAbhaAppIdentifierType === ABHA_AUTH_FLOW_METHOD.MOBILE) {
+      setMobileNumber(initAbhaAppIdentifier);
+      setIdentifierValue(initAbhaAppIdentifier);
+      setIsValidMobileNumber(initAbhaAppIdentifier.length === 10);
+      setError(null);
+      setAbhaAuthFlowMethod(ABHA_AUTH_FLOW_METHOD.MOBILE);
+    } else {
+      setIdentifierValue('');
+      setError(null);
+      setIsValidMobileNumber(false);
+      setIsDropdownOpen(false);
+      setIsPhrAddressSheetOpen(false);
+      setIsAbhaNumberSheetOpen(false);
+      setAbhaAuthFlowMethod(ABHA_AUTH_FLOW_METHOD.MOBILE);
+    }
+  }, [initAbhaAppIdentifierType]);
+
+  // Auto-submit for mobile method when 10 digits are entered
+  useEffect(() => {
+    if (isInitApiTriggered || hasInitApiTriggered.current) {
+      return;
+    }
+    if (mobileNumber && mobileNumber.length === 10) {
+      setIsInitApiTriggered(true);
+      hasInitApiTriggered.current = true;
+      handleNextClick("auto_submit_mobile");
+    }
+  }, [mobileNumber]);
+
+  // Auto-submit for Aadhaar method when 12 digits are entered
+  useEffect(() => {
+    if (isInitApiTriggered || hasInitApiTriggered.current) {
+      return;
+    }
+    if (aadhaarNumber && aadhaarNumber.length === 12) {
+      setIsInitApiTriggered(true);
+      hasInitApiTriggered.current = true;
+      handleNextClick("auto_submit_aadhaar");
+    }
+  }, [aadhaarNumber]);
+  
+  // Auto-submit for abha number method when 14 digits + 3 hyphens  are entered
+    useEffect(() => {
+    if (isInitApiTriggered || hasInitApiTriggered.current) {
+      return;
+    }
+    if (abhaNumber && abhaNumber.length === 17) {
+      setIsInitApiTriggered(true);
+      hasInitApiTriggered.current = true;
+      handleNextClick("auto_submit_abha");
+    }
+  }, [abhaNumber]);
+
+    // Auto-submit for phr address method when phrAddress contains @
+    useEffect(() => {
+    if (isInitApiTriggered || hasInitApiTriggered.current) {
+      return;
+    }
+    if (phrAddressFromDocApp && phrAddressFromDocApp.includes(isProd ? "@abdm" : "@sbx")) {
+      setIsInitApiTriggered(true);
+      hasInitApiTriggered.current = true;
+      handleNextClick("auto_submit_phr");
+    }
+  }, [phrAddressFromDocApp]);
+
+  // Analytics event tracker
+  const trackAbhaEvent = ({ name, data = {} }: { name: string; data?: Record<string, any> }) => {
+    const baseProps = {
+      login_platform: clientId,
+      is_eka_app_login: isEkaAppLogin ? 'true' : 'false',
+      is_new_login_or_create_flow: isNewLoginOrCreateFlow ? 'true' : 'false',
+      oid: extra_headers?.['X-User-ID'] ? 'true' : 'false',
+      access_token: extra_headers?.['auth'] ? 'true' : 'false',
+      txn_id: txnId || 'missing txnId',
+      flow: selectedMethod ?? ""
+    };
+
+    const eventData = {
+      ...baseProps,
+      ...data,
+    };
+
+    handleSendEvent({
+      eventName: name,
+      eventData,
+    });
+
+    window.curio?.pushToMixpanel?.(name, eventData);
+  };
+
+  // Dynamic heading based on selected method
+  const methodText = React.useMemo(() => {
+    switch (selectedMethod) {
+      case ABHA_AUTH_FLOW_METHOD.MOBILE:
+        return 'Enter your Mobile Number';
+      case ABHA_AUTH_FLOW_METHOD.AADHAR_NUMBER:
+        return 'Enter your Aadhaar Number';
+      default:
+        return '';
+    }
+  }, [selectedMethod]);
+
+  // Handle user input and apply formatting + validation
+  const handleIdentifierValueChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
+    const val = e.target.value;
+    switch (selectedMethod) {
+      case ABHA_AUTH_FLOW_METHOD.PHR_ADDRESS:
+        if (val.length > 20) return;
+        setAbhaAddress(val);
+        setIdentifierValue(val);
+        break;
+
+      case ABHA_AUTH_FLOW_METHOD.MOBILE:
+        if ((val && !/^[0-9]+$/.test(val)) || val.length > 10) return;
+        setMobileNumber(val);
+        setIsValidMobileNumber(true);
+        setIdentifierValue(val);
+        break;
+
+      case ABHA_AUTH_FLOW_METHOD.ABHA_NUMBER:
+        if (!/^[\d-]*$/.test(val) || val.length > 17) return;
+        const value = e.target.value.replace(/-/g, '');
+        let abhaNumber = '';
+        if (value.length > 0) abhaNumber += value.slice(0, 2);
+        if (value.length > 2) abhaNumber += `-${value.slice(2, 6)}`;
+        if (value.length > 6) abhaNumber += `-${value.slice(6, 10)}`;
+        if (value.length > 10) abhaNumber += `-${value.slice(10, 14)}`;
+        setAbhaNumber(abhaNumber);
+        return setIdentifierValue(abhaNumber.trim());
+
+      case ABHA_AUTH_FLOW_METHOD.AADHAR_NUMBER:
+        if (val && !/^[0-9]+$/.test(val)) return;
+        if (val.length > 12) return;
+
+        setAadhaarNumber(val);
+        setIsValidAadhaar(true);
+        setIdentifierValue(val);
+        break;
+    }
+    setIdentifierValue(val.trim());
+  };
+
+  // Disable editing if mobile is prefilled from Eka app
+  const isMobileNonEditable =
+    selectedMethod === ABHA_AUTH_FLOW_METHOD.MOBILE && !!initAbhaAppMobileNumber;
+
+  // Check if current identifier is valid based on method
+  const isValidIdentifier = React.useMemo(() => {
+    switch (selectedMethod) {
+      case ABHA_AUTH_FLOW_METHOD.PHR_ADDRESS:
+        return identifierValue.length >= 4 && identifierValue.length <= 20; // changing the lower limit to 4, since the address can be as short as 4 characters
+      case ABHA_AUTH_FLOW_METHOD.MOBILE:
+        return identifierValue.length === 10;
+      case ABHA_AUTH_FLOW_METHOD.ABHA_NUMBER:
+        return identifierValue.length === 17;
+      case ABHA_AUTH_FLOW_METHOD.AADHAR_NUMBER:
+        return identifierValue.length === 12;
+    }
+  }, [selectedMethod, identifierValue]);
+
+  // Utility to update API init status
+  const updateInitStatus = (method: InitMethod, status: LOADING_STATE) => {
+    setInitApiStatus((prev) => ({
+      ...prev,
+      [method]: status,
+    }));
+  };
+
+  // When Aadhaar OTP input is completed
+  const handleOnAadhaarInputComplete = ({ inputVal: newAadhaarNo }: { inputVal: string }) => {
+    if (newAadhaarNo.length === 12) {
+      setIdentifierValue(newAadhaarNo);
+      setAadhaarNumber(newAadhaarNo);
+      setIsValidAadhaar(true);
+    }
+  };
+
+  // Debug log for method change
+  useEffect(() => {
+    console.log('selectedMethod changed:==================>', selectedMethod);
+  }, [selectedMethod]);
+
+  const handleNextClick = async (flowStepType: string) => {
+    // Set the flag to indicate this is a new login/create ABHA flow
+    setIsNewLoginOrCreateFlow(true);
+    // Track event for clicking 'Next' on ABHA login
+    trackAbhaEvent({
+      name: 'abha_login_next_click',
+      data: {
+        flow_step_type: flowStepType,
+      },
+    });
+
+    // Begin login/auth process
+    setAbdmLoginInitApiStatus(LOADING_STATE.LOADING);
+
+    // Assume flow is login until proven otherwise (error in init)
+    setRegistrationType(REGISTRATION_TYPE.LOGIN);
+
+    let authTxnId = '';
+
+    // If login is not coming from Eka app, start ABDM auth init
+    if (!isEkaAppLogin) {
+      // Clear any previous auth sessions, logout is specifcally for outside the app flows
+      // clientIds are www-eka, android -> outside the app flow.
+      // Clear any previous auth sessions, logout is specifically for outside the app flows
+      const logoutSuccess = await postAuthLogoutV2();
+      trackAbhaEvent({
+        name: logoutSuccess ? 'abha_logout_success' : 'abha_logout_failure',
+        data: {
+          platform: clientId,
+        },
+      });
+
+      const { txn_id: txnId, error } = await postAuthInitV2({
+        method: AUTH_METHOD.ABHA,
+      });
+
+      if (!txnId || error) {
+        trackAbhaEvent({
+          name: 'abha_auth_init_failure',
+          data: {
+            flow_step_type: 'init',
+            authTxnId: authTxnId,
+            error_message: error || 'missing_txnId_or_unknown_error',
+            error_message_exists: !!error,
+            txn_id_exists: !!txnId,
+          },
+        });
+        setError(error?.message || 'Something went wrong. Please try again.');
+        setAbdmLoginInitApiStatus(LOADING_STATE.REJECTED);
+        return;
+      }
+      authTxnId = txnId;
+
+      // Track successful auth API call
+      trackAbhaEvent({
+        name: 'abha_auth_init_success.',
+        data: {
+          flow_step_type: 'init',
+          auth_txnId: authTxnId,
+        },
+      });
+    }
+
+    // Construct identifier (append domain if using ABHA address)
+    const loginIdentifier =
+      selectedMethod === ABHA_AUTH_FLOW_METHOD.PHR_ADDRESS
+        ? `${identifierValue}${isProd ? '@abdm' : '@sbx'}`
+        : identifierValue;
+
+    // ----- MOBILE LOGIN FLOW -----
+    if (
+      selectedMethod === ABHA_AUTH_FLOW_METHOD.MOBILE ||
+      selectedMethod === ABHA_AUTH_FLOW_METHOD.ABHA_NUMBER ||
+      selectedMethod === ABHA_AUTH_FLOW_METHOD.PHR_ADDRESS
+    ) {
+      const {
+        txn_id: abdmTxnId,
+        error: abdmLoginError,
+        action: abdmLoginErrorAction,
+        hint,
+      } = await postAbdmLoginInit({
+        method: selectedMethod,
+        identifier: loginIdentifier,
+      });
+
+      setIdentityValue(loginIdentifier); // Store identity used
+
+      // Track login init call
+      trackAbhaEvent({
+        name: 'abha_login_init_triggered',
+        data: {
+          flow_step_type: 'init',
+          authTxnId: authTxnId,
+          ndhmTxnId: abdmTxnId,
+          method: selectedMethod,
+        },
+      });
+
+      // ----- ABHA ADDRESS FLOW -----
+      if (selectedMethod === ABHA_AUTH_FLOW_METHOD.PHR_ADDRESS) {
+        setSelectedAbhaAddress(loginIdentifier);
+      }
+
+      if (abdmLoginError || !abdmTxnId) {
+        if (abdmLoginErrorAction?.cta?.pid === 'abha_mobile_enroll' && selectedMethod === ABHA_AUTH_FLOW_METHOD.MOBILE) {
+          // Attempt fallback to registration flow
+          updateInitStatus('mobile', LOADING_STATE.LOADING);
+          setRegistrationType(REGISTRATION_TYPE.CREATE);
+          const {
+            txn_id,
+            hint,
+            error: abdmRegMobileError,
+            action: abdmRegErrorAction,
+          } = await postRegisterMobileInit({
+            mobile_number: identifierValue,
+          });
+          setIdentityValue(identifierValue);
+          setSelectedAbhaFlow('mobile');
+
+          if (txn_id && hint) {
+            // Successful fallback to registration
+            setMobileInitResponse({
+              authTxnId,
+              txnId: txn_id,
+              mobileOtpSentToHint: hint,
+            });
+
+            trackAbhaEvent({
+              name: 'abha_mobile_registration_init_success',
+              data: {
+                flow_step_type: 'init',
+                authTxnId: authTxnId,
+                ndhmTxnId: abdmTxnId,
+                error_message: abdmRegMobileError,
+                error_action: abdmLoginErrorAction,
+              },
+            });
+
+            updateInitStatus('mobile', LOADING_STATE.RESOLVED);
+            setAbdmLoginInitApiStatus(LOADING_STATE.RESOLVED);
+            setRegistrationType(REGISTRATION_TYPE.CREATE);
+            setScreen(SCREEN_NAMES.ABHA_PHONE_NUMBER_VERIFICATION);
+            return;
+          }
+
+          updateInitStatus('mobile', LOADING_STATE.REJECTED);
+          trackAbhaEvent({
+            name: 'abha_mobile_registration_init_failure',
+            data: {
+              flow_step_type: 'init',
+              authTxnId: authTxnId,
+              error_message: abdmRegMobileError || 'unknown_error',
+              error_message_exists: !!abdmRegMobileError,
+              error_action_exists: !!abdmRegErrorAction,
+            },
+          });
+          if (abdmRegErrorAction) {
+            if (abdmRegErrorAction?.cta?.pid) {
+              return setScreen(SCREEN_NAMES.LOGIN_OR_CREATE_ABHA);
+            }
+          } else {
+            setError(abdmRegMobileError || 'Something went wrong');
+          }
+          setError(abdmRegMobileError || 'Something went wrong. Please try again.');
+          setAbdmLoginInitApiStatus(LOADING_STATE.REJECTED);
+          return;
+        }
+        trackAbhaEvent({
+          name: 'abha_login_init_failure',
+          data: {
+            flow_step_type: 'init',
+            authTxnId: authTxnId,
+            error_message: abdmLoginError || 'unknown_error',
+            error_message_exists: !!abdmLoginError,
+            error_action_exists: !!abdmLoginErrorAction,
+          },
+        });
+        setError(abdmLoginError || 'Something went wrong. Please try again.');
+        setAbdmLoginInitApiStatus(LOADING_STATE.REJECTED);
+        return;
+      }
+      // Login init success
+      trackAbhaEvent({
+        name: 'abha_login_init_success',
+        data: {
+          flow_step_type: 'init',
+          authTxnId: authTxnId,
+          ndhmTxnId: abdmTxnId,
+          hint: hint,
+        },
+      });
+
+      setAadhaarInitResponse({
+        authTxnId,
+        txnId: abdmTxnId,
+        aadhaarOtpSentToHint: hint || null,
+      });
+
+      setLoginIdentifierValue(loginIdentifier);
+      setAbdmLoginInitApiStatus(LOADING_STATE.RESOLVED);
+      setScreen(SCREEN_NAMES.VERIFY_OTP_LOGIN_WITH_ABHA);
+      return;
+    }
+
+    // ----- AADHAAR REGISTRATION FLOW -----
+    if (selectedMethod === ABHA_AUTH_FLOW_METHOD.AADHAR_NUMBER) {
+      updateInitStatus('aadhaar', LOADING_STATE.LOADING);
+      trackAbhaEvent({
+        name: 'aadhaar_registration_init_start',
+        data: {
+          flow_step_type: 'init',
+          authTxnId: authTxnId,
+          aadhaarNumber: identifierValue,
+        },
+      });
+      const {
+        txn_id,
+        hint,
+        error: aadhaarError,
+        action: errorAction,
+      } = await postRegisterAadhaarInit({
+        aadhaar_number: identifierValue,
+      });
+
+      setIdentityValue(identifierValue);
+      setSelectedAbhaFlow('aadhaar');
+
+      if (txn_id && hint) {
+        setAadhaarInitResponse({
+          authTxnId,
+          txnId: txn_id,
+          aadhaarOtpSentToHint: hint,
+        });
+
+        trackAbhaEvent({
+          name: 'aadhaar_registration_init_success',
+          data: {
+            flow_step_type: 'verify',
+            ndhmTxnId: txn_id,
+            authTxnId: authTxnId,
+          },
+        });
+        updateInitStatus('aadhaar', LOADING_STATE.RESOLVED);
+        setRegistrationType(REGISTRATION_TYPE.CREATE);
+        setAbdmLoginInitApiStatus(LOADING_STATE.RESOLVED);
+        setScreen(SCREEN_NAMES.ABHA_OTP_AND_MOBILE);
+        return;
+      }
+
+      trackAbhaEvent({
+        name: 'abha_registration_init_failure',
+        data: {
+          error_message: aadhaarError || 'unknown_error',
+          error_message_exists: !!aadhaarError,
+          auth_txn_id: authTxnId,
+          error_action: errorAction,
+          error_action_exists: !!errorAction,
+        },
+      });
+
+      updateInitStatus('aadhaar', LOADING_STATE.REJECTED);
+      setAbdmLoginInitApiStatus(LOADING_STATE.REJECTED);
+      // Error handler for Aadhaar registration failure
+      if (errorAction || aadhaarError) {
+        if (errorAction?.cta?.pid) {
+          setScreen(SCREEN_NAMES.LOGIN_OR_CREATE_ABHA);
+        } else {
+          setError(aadhaarError || 'Something went wrong');
+        }
+        return;
+      }
+    }
+  };
+
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [isAbhaNumberSheetOpen, setIsAbhaNumberSheetOpen] = useState(false);
+  const [isPhrAddressSheetOpen, setIsPhrAddressSheetOpen] = useState(false);
+
+  return (
+    <>
+      <div className="pds2-pt-22 pds2-p-16 pds2-bg-bg-01 pds2-space-y-16 pds2-text-center pds2-rounded-b-24">
+        <AbhaStepper/>
+        <div className="pds2-flex pds2-justify-center pds2-items-center pds2-gap-16">
+          <div className="pds2-bg-bg-white pds2-rounded-16">
+            <img
+              src="https://cdn.eka.care/vagus/cm4ml1lwu00000tfs1okl7hs9.webp"
+              alt="abha"
+              className="pds2-w-64 pds2-h-64"
+            />
+          </div>
+        </div>
+
+        <div className="Heading3Semibold pds2-text-text-black">
+          {clientId === 'phr'
+            ? 'Login or Create your ABHA'
+            : isDocAppRequest
+              ? 'Add Patient via ABHA'
+              : 'Create your ABHA'}
+        </div>
+        <div className="pds2-text-text-03" style={{ marginTop: '4px' }}>
+          {selectedMethod === ABHA_AUTH_FLOW_METHOD.MOBILE
+            ? 'Enter your Mobile Number'
+            : selectedMethod === ABHA_AUTH_FLOW_METHOD.AADHAR_NUMBER
+              ? 'Enter your Aadhaar Number'
+              : selectedMethod === ABHA_AUTH_FLOW_METHOD.ABHA_NUMBER
+                ? 'Enter your ABHA Number'
+                : selectedMethod === ABHA_AUTH_FLOW_METHOD.PHR_ADDRESS
+                  ? 'Enter your ABHA Address'
+                  : methodText}
+        </div>
+
+        {/* Tabs for Mobile and Aadhaar - Only show for Mobile/Aadhaar methods */}
+        {(selectedMethod === ABHA_AUTH_FLOW_METHOD.MOBILE ||
+          selectedMethod === ABHA_AUTH_FLOW_METHOD.AADHAR_NUMBER) && (
+        <div className="pds2-relative pds2-flex pds2-bg-bg-seperator-dark pds2-rounded-12 pds2-mt-4">
+          {/* Sliding Background */}
+          <div
+            className="pds2-absolute pds2-top-0 pds2-bottom-0 pds2-bg-bg-white pds2-rounded-12 pds2-transition-all pds2-duration-300"
+            style={{
+              left: selectedMethod === ABHA_AUTH_FLOW_METHOD.MOBILE ? 0 : '50%',
+              width: '50%',
+              boxShadow: '0px 10px 4px -6px #18274B17',
+            }}
+          />
+            {/* Mobile Tab */}
+            <button
+              onClick={() => {
+                setAbhaAuthFlowMethod(ABHA_AUTH_FLOW_METHOD.MOBILE); 
+                setError('');
+              }}
+              className='pds2-flex-1 pds2-py-6 pds2-flex pds2-items-center pds2-justify-center pds2-gap-8 pds2-relative pds2-z-10'
+            >
+              <PhoneSolidIcon className="pds2-w-14 pds2-h-14 pds2-text-icon-success-02" />
+              <span
+                className={`pds2-text-base ${
+                  selectedMethod === ABHA_AUTH_FLOW_METHOD.MOBILE
+                    ? 'pds2-font-bold pds2-text-fg-default'
+                    : 'pds2-font-normal pds2-text-fg-subtle'
+                }`}
+                style={
+                  selectedMethod === ABHA_AUTH_FLOW_METHOD.MOBILE
+                    ? { fontWeight: 700 }
+                    : { fontWeight: 400 }
+                }
+              >
+                Mobile
+              </span>
+            </button>
+            {/* Aadhaar Tab */}
+            <button
+              onClick={() => {
+                setAbhaAuthFlowMethod(ABHA_AUTH_FLOW_METHOD.AADHAR_NUMBER);
+                setError('');
+              }}
+              className='pds2-flex-1 pds2-py-6 pds2-flex pds2-items-center pds2-justify-center pds2-gap-8 pds2-relative pds2-z-10'
+            >
+              <img
+                src="https://cdn.eka.care/vagus/cm5mcdm3h00070tfs9fjkepff.webp"
+                alt="Aadhaar"
+                className="pds2-w-24 pds2-h-24"
+              />
+              <span
+                className={`pds2-text-base ${
+                  selectedMethod === ABHA_AUTH_FLOW_METHOD.AADHAR_NUMBER
+                    ? 'pds2-font-bold pds2-text-fg-default'
+                    : 'pds2-font-normal pds2-text-fg-subtle'
+                }`}
+                style={
+                  selectedMethod === ABHA_AUTH_FLOW_METHOD.AADHAR_NUMBER
+                    ? { fontWeight: 700 }
+                    : { fontWeight: 400 }
+                }
+              >
+                Aadhaar
+              </span>
+            </button>
+          </div>
+        )}
+
+        {/* Input Field Section - Only show for Mobile/Aadhaar methods */}
+        {(selectedMethod === ABHA_AUTH_FLOW_METHOD.MOBILE ||
+          selectedMethod === ABHA_AUTH_FLOW_METHOD.AADHAR_NUMBER) && (
+          <div className="pds2-mt-16 pds2-w-full pds2-max-w-md pds2-mx-auto pds2-px-4 pds2-relative">
+            {selectedMethod === ABHA_AUTH_FLOW_METHOD.AADHAR_NUMBER ? (
+              <SpacedInputComponent
+                initialValues={
+                  initAbhaAppIdentifierType === ABHA_AUTH_FLOW_METHOD.AADHAR_NUMBER
+                    ? (initAbhaAppIdentifier?.match(/.{1,4}/g) ?? undefined)
+                    : undefined
+                }
+                disabled={initAbhaAppIdentifierType === ABHA_AUTH_FLOW_METHOD.AADHAR_NUMBER && !!initAbhaAppIdentifier}
+                numberOfInputs={3}
+                length={4}
+                placeholder="XXXX"
+                onSubmit={handleOnAadhaarInputComplete}
+                setIsValid={setIsValidAadhaar}
+              />
+            ) : (
+              <Pds2InputField
+                value={
+                  initAbhaAppIdentifierType === ABHA_AUTH_FLOW_METHOD.MOBILE
+                    ? initAbhaAppIdentifier || ''
+                    : mobileNumber
+                }
+                disabled={initAbhaAppIdentifierType === ABHA_AUTH_FLOW_METHOD.MOBILE && !!initAbhaAppIdentifier}
+                onChange={handleIdentifierValueChange}
+                type="tel"
+                placeholder="Mobile Number"
+                inputMode="numeric"
+                autoFocus={true}
+                maxLength={10}
+                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 pds2-text-sm">+91</span>
+                  </div>
+                }
+              />
+            )}
+          </div>
+        )}
+
+        {error && (selectedMethod === ABHA_AUTH_FLOW_METHOD.MOBILE ||
+          selectedMethod === ABHA_AUTH_FLOW_METHOD.AADHAR_NUMBER) && <div className="pds2-text-text-error Body3Regular">{error}</div>}
+
+        {/* Next Button - Only show for Mobile/Aadhaar methods */}
+        {(selectedMethod === ABHA_AUTH_FLOW_METHOD.MOBILE ||
+          selectedMethod === ABHA_AUTH_FLOW_METHOD.AADHAR_NUMBER) && (
+          <Pds2Button
+            title="Next"
+            IconComponent={() => (
+              <ChevronDownRegularIcon className="pds2-w-16 pds2-h-16 -pds2-rotate-90 pds2-ml-8" />
+            )}
+            state={!isValidIdentifier || abdmLoginInitApiStatus === LOADING_STATE.LOADING ? 'disabled' : 'enabled'}
+            isLoading={abdmLoginInitApiStatus === LOADING_STATE.LOADING}
+            onClick={() => handleNextClick("aadhaar_or_mobile_on_click")}
+            className="pds2-w-full"
+          />
+        )}
+      </div>
+
+      {/* Other Login Options Dropdown */}
+      <div className="pds2-m-16 pds2-bg-bg-white pds2-rounded-16 pds2-border pds2-border-border-03 pds2-overflow-hidden">
+        {/* Dropdown Header */}
+        <button
+          onClick={() => setIsDropdownOpen(!isDropdownOpen)}
+          className="pds2-w-full pds2-flex pds2-items-center pds2-justify-between pds2-p-16 pds2-bg-bg-white hover:pds2-bg-bg-02 pds2-transition-colors"
+        >
+          <span className="pds2-text-text-03">Other login options for ABHA</span>
+          <ChevronDownRegularIcon
+            className={`pds2-w-16 pds2-h-16 pds2-text-text-03 pds2-transition-transform ${
+              isDropdownOpen ? 'pds2-rotate-180' : ''
+            }`}
+          />
+        </button>
+
+        {/* Dropdown Content */}
+          <div
+            className={`pds2-overflow-hidden pds2-transition-all pds2-duration-300 ${
+              isDropdownOpen ? 'pds2-max-h-126 pds2-opacity-100' : 'pds2-max-h-0 pds2-opacity-0'
+            }`}
+          >
+            {/* Login -> ABHA Number */}
+            <button
+              onClick={() => {
+                setIsDropdownOpen(false);
+                setAbhaAuthFlowMethod(ABHA_AUTH_FLOW_METHOD.ABHA_NUMBER);
+                setIsAbhaNumberSheetOpen(true);
+                setError('');
+              }}
+              className="pds2-w-full pds2-flex pds2-items-center pds2-justify-between pds2-p-12 hover:pds2-bg-bg-02 pds2-transition-colors"
+            >
+              <div className="pds2-flex pds2-items-center pds2-gap-12">
+                <div className="pds2-w-40 pds2-h-40 pds2-rounded-full pds2-bg-bg-02 pds2-flex pds2-items-center pds2-justify-center">
+                  <img
+                    src="https://cdn.eka.care/vagus/cm4ml1lwu00000tfs1okl7hs9.webp"
+                    alt="ABHA"
+                    className="pds2-w-24 pds2-h-24"
+                  />
+                </div>
+                <span className="Body1Regular pds2-text-text-black">Login with ABHA Number</span>
+              </div>
+              <ChevronDownRegularIcon className="pds2-w-16 pds2-h-16 -pds2-rotate-90 pds2-text-text-03" />
+            </button>
+
+            {/* Login with ABHA Address */}
+            <button
+              onClick={() => {
+                setIsDropdownOpen(false);
+                setAbhaAuthFlowMethod(ABHA_AUTH_FLOW_METHOD.PHR_ADDRESS);
+                setIsPhrAddressSheetOpen(true);
+                setError('');
+              }}
+              className="pds2-w-full pds2-flex pds2-items-center pds2-justify-between pds2-p-12 hover:pds2-bg-bg-02 pds2-transition-colors"
+            >
+              <div className="pds2-flex pds2-items-center pds2-gap-12">
+                <div className="pds2-w-40 pds2-h-40 pds2-rounded-full pds2-bg-bg-02 pds2-flex pds2-items-center pds2-justify-center">
+                  <img
+                    src="https://cdn.eka.care/vagus/cm4ml1lwu00000tfs1okl7hs9.webp"
+                    alt="ABHA"
+                    className="pds2-w-24 pds2-h-24"
+                  />
+                </div>
+                <span className="Body1Regular pds2-text-text-black">Login with ABHA Address</span>
+              </div>
+              <ChevronDownRegularIcon className="pds2-w-16 pds2-h-16 -pds2-rotate-90 pds2-text-text-03" />
+            </button>
+          </div>
+      </div>
+
+      {/* Bottom Sheet for ABHA Number */}
+      <AbhaBottomSheet isOpen={isAbhaNumberSheetOpen} setIsOpen={setIsAbhaNumberSheetOpen} setFlowMethod={setAbhaAuthFlowMethod}>
+        <div className="pds2-p-24 pds2-text-center pds2-h-full pds2-flex pds2-flex-col">
+          {/* Close button */}
+          <div className="pds2-flex pds2-justify-end pds2-mb-16">
+            <button
+              onClick={() => {
+                setError(null);
+                setIsAbhaNumberSheetOpen(false);
+                setAbhaAuthFlowMethod(ABHA_AUTH_FLOW_METHOD.MOBILE);
+              }}
+              className="pds2-w-24 pds2-h-24 pds2-flex pds2-items-center pds2-justify-center pds2-text-text-03 hover:pds2-text-text-black"
+            >
+              ✕
+            </button>
+          </div>
+
+          {/* Content - flex grow to fill available space */}
+          <div className="pds2-flex-1 pds2-flex pds2-flex-col pds2-justify-start">
+            {/* ABHA Logo */}
+            <div className="pds2-flex pds2-justify-center pds2-mb-16">
+              <div className="pds2-w-64 pds2-h-64 pds2-rounded-full pds2-bg-bg-01 pds2-flex pds2-items-center pds2-justify-center">
+                <img
+                  src="https://cdn.eka.care/vagus/cm4ml1lwu00000tfs1okl7hs9.webp"
+                  alt="ABHA Logo"
+                  className="pds2-w-48 pds2-h-48"
+                />
+              </div>
+            </div>
+
+            {/* Title and Description */}
+            <h2 className="Heading3Semibold pds2-text-text-black">Login with ABHA Number</h2>
+            <p className="Body2Regular pds2-text-text-03 pds2-mb-24">
+              Enter your 14 digit ABHA Number
+            </p>
+
+            {/* Input Field */}
+            
+              <Pds2InputField
+                value={
+                  initAbhaAppIdentifierType === ABHA_AUTH_FLOW_METHOD.ABHA_NUMBER
+                    ? initAbhaAppIdentifier || ''
+                    : abhaNumber
+                }
+                disabled={initAbhaAppIdentifierType === ABHA_AUTH_FLOW_METHOD.ABHA_NUMBER && !!initAbhaAppIdentifier}
+                onChange={handleIdentifierValueChange}
+                placeholder="00-0000-0000-0000"
+                padding="pds2-p-18"
+                textStyle="Body2Regular pds2-text-center pds2-text-lg"
+                borderStyle="focus-within:pds2-border-border-brand-01"
+                type="tel"
+                inputMode="numeric"
+                autoFocus={true}
+                onKeyDown={(e) => {
+                  e.key === 'Enter' && handleNextClick('after_enter_abha_number_on_click_by_user');
+                }}
+                // className="pds2-w-full"
+              />
+
+            {error && <div className="pds2-text-text-error Body3Regular pds2-mt-12">{error}</div>}
+            {/* Next Button */}
+            <Pds2Button
+              title="Next"
+              IconComponent={() => (
+                <ChevronDownRegularIcon className="pds2-w-16 pds2-h-16 -pds2-rotate-90 pds2-ml-8" />
+              )}
+              state={!identifierValue || abdmLoginInitApiStatus === LOADING_STATE.LOADING ? 'disabled' : 'enabled'}
+              onClick={() => handleNextClick("after_enter_abha_number_on_click_by_user")}
+              className={`pds2-w-full ${error ? 'pds2-mt-12' : 'pds2-mt-24'}`}
+              isLoading={abdmLoginInitApiStatus === LOADING_STATE.LOADING}
+            />
+          </div>
+        </div>
+      </AbhaBottomSheet>
+
+      {/* Bottom Sheet for ABHA Address */}
+      <AbhaBottomSheet isOpen={isPhrAddressSheetOpen} setIsOpen={setIsPhrAddressSheetOpen} setFlowMethod={setAbhaAuthFlowMethod}>
+        <div className="pds2-p-24 pds2-text-center pds2-h-full pds2-flex pds2-flex-col">
+          {/* Close button */}
+          <div className="pds2-flex pds2-justify-end pds2-mb-16">
+            <button
+              onClick={() => {
+                setError(null);
+                setIsPhrAddressSheetOpen(false);
+                setAbhaAuthFlowMethod(ABHA_AUTH_FLOW_METHOD.MOBILE);
+              }}
+              className="pds2-w-24 pds2-h-24 pds2-flex pds2-items-center pds2-justify-center pds2-text-text-03 hover:pds2-text-text-black"
+            >
+              ✕
+            </button>
+          </div>
+
+          {/* Content - flex grow to fill available space */}
+          <div className="pds2-flex-1 pds2-flex pds2-flex-col pds2-justify-start">
+            {/* ABHA Logo */}
+            <div className="pds2-flex pds2-justify-center pds2-mb-16">
+              <div className="pds2-w-64 pds2-h-64 pds2-rounded-full pds2-bg-bg-01 pds2-flex pds2-items-center pds2-justify-center">
+                <img
+                  src="https://cdn.eka.care/vagus/cm4ml1lwu00000tfs1okl7hs9.webp"
+                  alt="ABHA Logo"
+                  className="pds2-w-48 pds2-h-48"
+                />
+              </div>
+            </div>
+
+            {/* Title and Description */}
+            <h2 className="Heading3Semibold pds2-text-text-black">Login with ABHA Address</h2>
+            <p className="Body2Regular pds2-text-text-03 pds2-mb-24">
+              Enter your ABHA Address below
+            </p>
+
+            {/* Input Field with suffix */}
+            <div className="pds2-relative">
+              <Pds2InputField
+                value={
+                  initAbhaAppIdentifierType === ABHA_AUTH_FLOW_METHOD.PHR_ADDRESS
+                    ? initAbhaAppIdentifier?.split("@")[0] || ''
+                    : abhaAddress
+                }
+                disabled={initAbhaAppIdentifierType === ABHA_AUTH_FLOW_METHOD.PHR_ADDRESS && !!initAbhaAppIdentifier}
+                onChange={handleIdentifierValueChange}
+                placeholder="Enter ABHA Address"
+                inputMode="text"
+                autoFocus={true}
+                onKeyDown={(e) => {
+                  e.key === 'Enter' && handleNextClick('after_enter_abha_address_on_click_by_user');
+                }}
+                // className="pds2-w-full pds2-pr-64"
+              />
+              <div className="pds2-absolute pds2-right-16 pds2-top-16 Body1Regular pds2-text-text-03">
+                {isProd ? '@abdm' : '@sbx'}
+              </div>
+            </div>
+
+            {error && <div className="pds2-text-text-error Body3Regular pds2-mt-12">{error}</div>}
+
+            {/* Next Button */}
+            <Pds2Button
+              title="Next"
+              IconComponent={() => (
+                <ChevronDownRegularIcon className="pds2-w-16 pds2-h-16 -pds2-rotate-90 pds2-ml-8" />
+              )}
+              state={!identifierValue || abdmLoginInitApiStatus === LOADING_STATE.LOADING ? 'disabled' : 'enabled'}
+              onClick={() => handleNextClick("after_enter_abha_address_on_click_by_user")}
+              className={`pds2-w-full ${error ? 'pds2-mt-12' : 'pds2-mt-24'}`}
+              isLoading={abdmLoginInitApiStatus === LOADING_STATE.LOADING}
+            />
+          </div>
+        </div>
+      </AbhaBottomSheet>
+    </>
+  );
+};
+
+export default LoginorCreateAbhaScreen;
+
+interface AbhaBottomSheetProps {
+  isOpen: boolean;
+  setFlowMethod: (val: ABHA_AUTH_FLOW_METHOD) => void;
+  setIsOpen: (isOpen: boolean) => void;
+  children: React.ReactNode;
+  overlayClassName?: string;
+}
+
+const AbhaBottomSheet: React.FC<AbhaBottomSheetProps> = ({
+  isOpen,
+  setIsOpen,
+  children,
+  setFlowMethod,
+  overlayClassName = 'pds2-bg-text-black pds2-bg-opacity-50',
+}) => {
+const [show, setShow] = useState(isOpen);
+
+  // Sync state with animation
+  useEffect(() => {
+    if (isOpen) setShow(true);
+    else {
+      // Wait for animation to finish before hiding
+      const timeout = setTimeout(() => setShow(false), 300); // match duration
+      return () => clearTimeout(timeout);
+    }
+  }, [isOpen]);
+
+  if (!show) return null; // unmount after closing animation
+
+  return (
+    <div
+      className={`pds2-absolute pds2-inset-0 pds2-z-50 pds2-flex pds2-items-end pds2-transition-all pds2-duration-300 ${
+        isOpen ? 'pds2-opacity-100' : 'pds2-opacity-0 pointer-events-none'
+      }`}
+    >
+      {/* Overlay */}
+      <div
+        className={`pds2-absolute pds2-inset-0 ${overlayClassName} pds2-transition-opacity pds2-duration-300`}
+        style={{ backgroundColor: 'rgba(0, 0, 0, 0.5)' }}
+        onClick={() => {
+          setIsOpen(false);
+          setFlowMethod(ABHA_AUTH_FLOW_METHOD.MOBILE);
+        }}
+      />
+
+      {/* Bottom Sheet */}
+      <div
+        className={`pds2-relative pds2-bg-bg-white pds2-rounded-t-24 pds2-w-full pds2-transition-transform pds2-duration-300 ${
+          isOpen ? 'pds2-translate-y-0' : 'pds2-translate-y-full'
+        }`}
+        style={{
+          height: '75%',
+          maxHeight: '600px',
+          overflowY: 'auto',
+        }}
+      >
+        {children}
+      </div>
+    </div>
+  );
+};