@eka-care/abha 0.0.6 → 0.0.7

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

@@ -1,953 +0,0 @@
-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 '@elixir/icons';
-import {
-  ABHA_AUTH_FLOW_METHOD,
-  LOADING_STATE,
-  AUTH_METHOD,
-  REGISTRATION_TYPE,
-} from '@elixir/types';
-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 {
-  postAbdmLoginInit,
-  postAuthInitV2,
-  postAuthLogoutV2,
-  postRegisterMobileInit,
-  postRegisterAadhaarInit,
-} from 'apis';
-import { handleSendEvent } from '@elixir/utils';
-import { GET_EXTRA_HEADERS } from 'apis';
-
-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();
-  };
-
-  return (
-    <div className="pds2-bg-bg-01 pds2-pt-36">
-      {/* * if clientId is not eka-web, show back button */}
-      {clientId !== 'eka-web' && (
-        <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 [mobileNumber, setMobileNumber] = useState('');
-  const [isValidMobileNumber, setIsValidMobileNumber] = useState(false);
-
-  const [isValidAadhaar, setIsValidAadhaar] = useState<boolean>(false);
-  const [aadhaarNumber, setAadhaarNumber] = useState('');
-
-  const [abhaNumber, setAbhaNumber] = 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 (!!initAbhaAppMobileNumber && selectedMethod === ABHA_AUTH_FLOW_METHOD.MOBILE) {
-      setIdentifierValue(initAbhaAppMobileNumber);
-      setIsValidMobileNumber(initAbhaAppMobileNumber.length === 10);
-      setError(null);
-      return;
-    }
-
-    setIdentifierValue('');
-    setError(null);
-    setIsValidMobileNumber(false);
-  }, [selectedMethod]);
-
-  // 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]);
-
-  // 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') {
-          // 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-p-16 pds2-bg-bg-01 pds2-space-y-16 pds2-text-center">
-        <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-flex pds2-mt-4 pds2-bg-bg-02 pds2-rounded-lg pds2-overflow-hidden pds2-p-1">
-            {/* Mobile Tab */}
-            <button
-              onClick={() => setAbhaAuthFlowMethod(ABHA_AUTH_FLOW_METHOD.MOBILE)}
-              className={`pds2-flex-1 pds2-py-3 pds2-flex pds2-items-center pds2-justify-center pds2-gap-8 pds2-relative ${
-                selectedMethod === ABHA_AUTH_FLOW_METHOD.MOBILE
-                  ? 'pds2-bg-bg-white'
-                  : 'pds2-bg-bg-seperator-dark'
-              }`}
-              style={{
-                clipPath:
-                  'polygon(8px 0%, calc(100% - 8px) 0%, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0% calc(100% - 8px), 0% 8px)',
-              }}
-            >
-              <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)}
-              className={`pds2-flex-1 pds2-py-3 pds2-flex pds2-items-center pds2-justify-center pds2-gap-8 pds2-relative pds2-ml-1 ${
-                selectedMethod === ABHA_AUTH_FLOW_METHOD.AADHAR_NUMBER
-                  ? 'pds2-bg-bg-white'
-                  : 'pds2-bg-bg-seperator-dark'
-              }`}
-              style={{
-                clipPath:
-                  'polygon(8px 0%, calc(100% - 8px) 0%, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0% calc(100% - 8px), 0% 8px)',
-              }}
-            >
-              <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
-                numberOfInputs={3}
-                length={4}
-                placeholder="XXXX"
-                onSubmit={handleOnAadhaarInputComplete}
-                setIsValid={setIsValidAadhaar}
-              />
-            ) : (
-              <Pds2InputField
-                value={identifierValue}
-                onChange={handleIdentifierValueChange}
-                type="tel"
-                placeholder="Mobile Number"
-                disabled={isMobileNonEditable}
-                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 && <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-mt-24 pds2-mx-16 pds2-mb-48 pds2-pb-36">
-        <div className="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 */}
-          {isDropdownOpen && (
-            <div>
-              {/* Login -> ABHA Number */}
-              <button
-                onClick={() => {
-                  setIsDropdownOpen(false);
-                  setAbhaAuthFlowMethod(ABHA_AUTH_FLOW_METHOD.ABHA_NUMBER);
-                  setIsAbhaNumberSheetOpen(true);
-                }}
-                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);
-                }}
-                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>
-      </div>
-
-      {/* Bottom Sheet for ABHA Number */}
-      <AbhaBottomSheet isOpen={isAbhaNumberSheetOpen} setIsOpen={setIsAbhaNumberSheetOpen}>
-        <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={() => {
-                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 */}
-            <div className="pds2-mb-24">
-              <Pds2InputField
-                value={identifierValue}
-                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}
-                // className="pds2-w-full"
-              />
-            </div>
-
-            {error && <div className="pds2-text-text-error Body3Regular">{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"
-              isLoading={abdmLoginInitApiStatus === LOADING_STATE.LOADING}
-            />
-          </div>
-        </div>
-      </AbhaBottomSheet>
-
-      {/* Bottom Sheet for ABHA Address */}
-      <AbhaBottomSheet isOpen={isPhrAddressSheetOpen} setIsOpen={setIsPhrAddressSheetOpen}>
-        <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={() => {
-                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-mb-24 pds2-relative">
-              <Pds2InputField
-                value={identifierValue}
-                onChange={handleIdentifierValueChange}
-                placeholder="Enter ABHA Address"
-                inputMode="text"
-                autoFocus={true}
-                // 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">{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"
-              isLoading={abdmLoginInitApiStatus === LOADING_STATE.LOADING}
-            />
-          </div>
-        </div>
-      </AbhaBottomSheet>
-    </>
-  );
-};
-
-export default LoginorCreateAbhaScreen;
-
-interface AbhaBottomSheetProps {
-  isOpen: boolean;
-  setIsOpen: (isOpen: boolean) => void;
-  children: React.ReactNode;
-  overlayClassName?: string;
-}
-
-const AbhaBottomSheet: React.FC<AbhaBottomSheetProps> = ({
-  isOpen,
-  setIsOpen,
-  children,
-  overlayClassName = 'pds2-bg-text-black pds2-bg-opacity-50',
-}) => {
-  if (!isOpen) return null;
-
-  return (
-    <div className="pds2-absolute pds2-inset-0 pds2-z-50 pds2-flex pds2-items-end">
-      {/* Overlay */}
-      <div
-        className={`pds2-absolute pds2-inset-0 ${overlayClassName}`}
-        style={{ backgroundColor: 'rgba(0, 0, 0, 0.5)' }}
-        onClick={() => setIsOpen(false)}
-      />
-
-      {/* Bottom Sheet */}
-      <div
-        className="pds2-relative pds2-bg-bg-white pds2-rounded-t-24 pds2-w-full"
-        style={{
-          height: '75%',
-          maxHeight: '600px',
-          overflowY: 'auto',
-        }}
-      >
-        {children}
-      </div>
-    </div>
-  );
-};