@eka-care/abha-stg 0.1.34 → 0.1.35

package/src/routes/abha-mobile-linking-status-screen.tsx

@@ -0,0 +1,267 @@
+import { ABHA_V3_SKIP_STATES, GET_EXTRA_HEADERS, setIndividualEnv, TProfileRecord } from '../constants/constants';
+
+import { useEffect, useState, useRef } from 'react';
+import { onAbhaSuccess, unMount } from '../main';
+import AbhaVerificationStatus from '../organisms/abha/verification-status';
+import useAuthAbhaStore from '../stores/auth-abha-store';
+import { SCREEN_NAMES } from '../stores/auth-abha-store/types';
+
+import { getMockAuthVerifyResponse } from '../utils/mock-auth-response';
+import handleSendEvent from '../utils/send-event-utils';
+import getProfilesPatient from '../api-queries/aorta-go/v3/get-profile-patient';
+import postAuthVerifyV2 from '../api-queries/aorta-go/v3/post-auth-verify-v2';
+
+const AbhaMobileLinkingStatusScreen = () => {
+  const aadhaarVerificationSkipStateStatus = useAuthAbhaStore(
+    (state) => state.aadhaarVerificationSkipStateStatus
+  );
+  const authTxnId = useAuthAbhaStore((state) => state.authTxnId);
+  const ekaSmallToken = useAuthAbhaStore((state) => state.ekaSmallToken);
+  const oid = useAuthAbhaStore((state) => state.oid);
+  const setScreen = useAuthAbhaStore((state) => state.setScreen);
+  const [loadingStatus, setLoadingStatus] = useState<boolean>(true);
+  const setEkaProfileInfo = useAuthAbhaStore((state) => state.setEkaProfileInfo);
+  const clientId = useAuthAbhaStore((state) => state.clientId);
+  const isEkaAppLogin = useAuthAbhaStore((state) => state.isEkaAppLogin);
+  const ekaProfileInfo = useAuthAbhaStore((state) => state.ekaProfileInfo);
+  const validGenders = ['M', 'F', 'O', 'U'] as const;
+  const hasApiTriggered = useRef(false);
+  const isNewLoginOrCreateFlow = useAuthAbhaStore((state) => state.isNewLoginOrCreateFlow);
+  const txnId = useAuthAbhaStore((state) => state.txnId);
+  const extra_headers = GET_EXTRA_HEADERS();
+
+  // 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',
+      txn_id: txnId || 'missing txnId',
+      oid: extra_headers?.['X-User-ID'] ? 'true' : 'false',
+      access_token: extra_headers?.['auth'] ? 'true' : 'false',
+    };
+
+    const eventData = {
+      ...baseProps,
+      ...data,
+    };
+
+    handleSendEvent({
+      eventName: name,
+      eventData,
+    });
+
+    window.curio?.pushToMixpanel?.(name, eventData);
+  };
+
+  useEffect(() => {
+    // Start a 500ms artificial loading timeout
+    const p1 = new Promise((resolve) => {
+      setTimeout(() => {
+        resolve(setLoadingStatus(false));
+      }, 500);
+    });
+
+    // Track the page view for successful mobile verification
+    trackAbhaEvent({
+      name: 'page_view',
+      data: {
+        page_view: 'mobile_verified_successful',
+        platform: clientId,
+      },
+    });
+    // Main logic after artificial loading
+    async function dummyLoadingEffect() {
+      await p1;
+
+      setTimeout(async () => {
+        // Trigger logic only if skip state is ABHA_CREATE or ABHA_END
+        if (
+          // here the status will be abha create, in mobile flow
+          // then redirect the user to get all profiles screen.
+          aadhaarVerificationSkipStateStatus === ABHA_V3_SKIP_STATES.ABHA_CREATE ||
+          aadhaarVerificationSkipStateStatus === ABHA_V3_SKIP_STATES.ABHA_END
+        ) {
+
+          trackAbhaEvent({
+            name: 'abha_create_mobile_initiate',
+            data: {
+              platform: clientId,
+              oid_received : oid,
+              txn_id : txnId,
+              skip_state : aadhaarVerificationSkipStateStatus,
+            },
+          });
+
+          // If X-User-ID exists and API not yet triggered, fetch profile and store Eka info
+          if (oid && !hasApiTriggered.current) {
+            // Only call API if extraHeaders is NOT present
+            const profile = await getProfilesPatient();
+            hasApiTriggered.current = true;
+            if (profile) {
+              setEkaProfileInfo({
+                date_of_birth: profile.dob as string,
+                firstname: profile.fn,
+                lastname: profile.ln as string,
+                pincode: '',
+                gender: profile.gen as string,
+                oid: profile?.oid,
+                middlename: profile?.mn,
+                abha_address: profile?.['health-ids']?.[0],
+                abha_number: profile?.abha_number,
+              });
+            }
+          }
+
+          // handling for ABHA_END if OID is present
+          if (
+            isEkaAppLogin &&
+            aadhaarVerificationSkipStateStatus === ABHA_V3_SKIP_STATES.ABHA_END
+          ) {
+            // here if the oid is present , then call auth verify and unmount the sdk
+            if (oid) {
+              const gender = validGenders.includes(ekaProfileInfo?.gender as any)
+                ? (ekaProfileInfo?.gender as 'M' | 'F' | 'O' | 'U')
+                : undefined;
+
+              const authProfile: TProfileRecord = {
+                oid: ekaProfileInfo?.oid || '',
+                fln: ekaProfileInfo?.name || '',
+                dob: ekaProfileInfo?.date_of_birth,
+                gen: gender,
+                mobile: ekaProfileInfo?.mobile,
+                at: '',
+                fn: ekaProfileInfo?.firstname || '',
+                mn: ekaProfileInfo?.middlename || '',
+                ln: ekaProfileInfo?.lastname || '',
+                'health-ids': ekaProfileInfo?.abha_address
+                  ? [ekaProfileInfo.abha_address]
+                  : undefined,
+                abha_number: ekaProfileInfo?.abha_number || '',
+              };
+
+              trackAbhaEvent({
+                name: 'abha_mobile_linking_success',
+                data: {
+                  type: 'unmount',
+                  isEkaAppLogin: isEkaAppLogin,
+                  skip_state: aadhaarVerificationSkipStateStatus,
+                },
+              });
+              const authResponse = getMockAuthVerifyResponse(authProfile);
+              // Handle SDK callback or fallback to JS
+              if (window.EkaAbha && window.EkaAbha.onAbhaSuccess) {
+                window.EkaAbha?.onAbhaSuccess(JSON.stringify({ response: authResponse }));
+                return;
+              }
+              // @ts-ignore
+              onAbhaSuccess({ response: authResponse });
+              unMount();
+              return;
+            }
+          }
+          // If app login and ABHA_CREATE, redirect to create Eka profile
+          if (
+            isEkaAppLogin &&
+            aadhaarVerificationSkipStateStatus === ABHA_V3_SKIP_STATES.ABHA_CREATE
+          ) {
+            // since the flow is inside the app, and the skip_state is not abha end, then redirect to create eka profile
+            trackAbhaEvent({
+              name: 'navigate_to_screen',
+              data: {
+                destination: 'create_eka_profile',
+                reason: 'abha_create_from_mobile_flow',
+              },
+            });
+            setScreen(SCREEN_NAMES.CREATE_EKA_PROFILE);
+            return;
+          }
+          // Check for missing tokens and track error if any missing
+          if (!authTxnId || !ekaSmallToken) {
+            trackAbhaEvent({
+              name: 'authTxnId_or_minToken_not_found',
+              data: {
+                platform: clientId,
+                type: 'error',
+                auth_txnId: authTxnId || 'missing_authTxnId',
+                auth_txnId_exists: !!authTxnId,
+                ekaSmallToken_exists: !!ekaSmallToken,
+              },
+            });
+            return;
+          }
+          // Call verify API
+          const verifyResponse = await postAuthVerifyV2({
+            txn_id: authTxnId,
+            token: ekaSmallToken,
+          });
+          // Store token in headers
+          if (verifyResponse.data) {
+            setIndividualEnv({
+              extraHeaders: {
+                auth: verifyResponse.data?.tokens.sess,
+              },
+            });
+
+            // If ABHA_END, finish login with onAbhaSuccess if OID is present
+            if (aadhaarVerificationSkipStateStatus === ABHA_V3_SKIP_STATES.ABHA_END) {
+              if (oid) {
+                // for ios specific handling
+                if (window.EkaAbha && window.EkaAbha.onAbhaSuccess) {
+                  window.EkaAbha?.onAbhaSuccess(JSON.stringify({ response: verifyResponse }));
+                  return;
+                }
+                // @ts-ignore
+                onAbhaSuccess({ response: verifyResponse });
+                unMount();
+                return;
+              }
+              // Fallback if OID is not present
+              setIndividualEnv({
+                extraHeaders: {
+                  auth: verifyResponse.data?.tokens.sess,
+                },
+              });
+              trackAbhaEvent({
+                name: 'navigate_to_screen',
+                data: {
+                  destination: 'get_all_profiles',
+                  reason: 'abha_end_with_no_oid',
+                },
+              });
+              setScreen(SCREEN_NAMES.GET_ALL_PROFILES);
+              return;
+            }
+            setIndividualEnv({
+              extraHeaders: {
+                auth: verifyResponse.data?.tokens.sess,
+              },
+            });
+            // Default case for verified session → GET ALL PROFILES
+            trackAbhaEvent({
+              name: 'navigate_to_screen',
+              data: {
+                destination: 'get_all_profiles',
+                reason: 'auth_verify_success',
+              },
+            });
+            setScreen(SCREEN_NAMES.GET_ALL_PROFILES);
+            return;
+          }
+        } else {
+        }
+      }, 2000);
+    }
+    dummyLoadingEffect();
+  }, []);
+
+  return (
+    <AbhaVerificationStatus
+      loading={loadingStatus}
+      loadingText="Verifying..."
+      successText="Successfully linked mobile number with ABHA!"
+    />
+  );
+};
+
+export default AbhaMobileLinkingStatusScreen;

package/src/routes/abha-otp-and-mobile-screen.tsx

@@ -0,0 +1,435 @@
+import {
+  ArrowLeftRegularIcon,
+  CircleInfoRegularIcon,
+  EkaIcon,
+  PhoneSolidIcon,
+} from '@eka-care/icons';
+import { LOADING_STATE, ABHA_AUTH_FLOW_METHOD, GET_EXTRA_HEADERS } from '../constants/constants';
+import React, { useEffect, useRef, useState } from 'react';
+import Pds2Button from '../atoms/button';
+import AbhaHeader from '../organisms/abha/abha-header';
+import AbhaErrorBottomSheet from '../organisms/abha/error-bottom-sheet';
+import AbhaOtpCard from '../organisms/abha/otp-card';
+import useAuthAbhaStore from '../stores/auth-abha-store';
+import { SCREEN_NAMES } from '../stores/auth-abha-store/types';
+import { CustomCheckBox } from './create-abha-with-aadhaar-screen';
+import AbhaStepper from '../organisms/abha/abha-stepper';
+import handleSendEvent from '../utils/send-event-utils';
+import postRegisterAadhaarResendOtp from '../api-queries/ndhm/post-register-aadhaar-resend-otp';
+import postRegisterAadhaarVerify from '../api-queries/ndhm/post-register-aadhaar-verify';
+
+const AbhaOtpAndMobileScreen = () => {
+  const setAbhaAddressList = useAuthAbhaStore((state) => state.setAbhaAddressList);
+  const setScreen = useAuthAbhaStore((state) => state.setScreen);
+
+  const txnId = useAuthAbhaStore((state) => state.txnId);
+  const setTxnId = useAuthAbhaStore((state) => state.setTxnId);
+
+  const aadhaarOtpSentToHint = useAuthAbhaStore((state) => state.aadhaarOtpSentToHint);
+  const setAadhaarVerificationSkipStateStatus = useAuthAbhaStore(
+    (state) => state.setAadhaarVerificationSkipStateStatus
+  );
+  const setEkaSmallToken = useAuthAbhaStore((state) => state.setEkaSmallToken);
+  const setOid = useAuthAbhaStore((state) => state.setOid);
+  const clearAbhaAuthStore = useAuthAbhaStore((state) => state.clearAbhaAuthStore);
+  const setBottomsheetErrorInfo = useAuthAbhaStore((state) => state.setBottomsheetErrorInfo);
+  const goBackLoginScreen = useAuthAbhaStore((state) => state.goBackLoginScreen);
+
+  const [otp, setOtp] = useState('');
+  const [isOtpValid, setIsOtpValid] = useState(false);
+  const [mobileNumber, setMobileNumber] = useState('');
+
+  const [error, setError] = useState<string | null>(null);
+
+  const [isHealthLockerChecked, setIsHealthLockerChecked] = useState(true);
+  const [isLinkHealthDataChecked, setIsLinkHealthDataChecked] = useState(true);
+
+  const [aadhaarVerifyApiStatus, setAadhaarVerifyApiStatus] = useState<LOADING_STATE>(
+    LOADING_STATE.IDLE
+  );
+  const setSelectedAbhaAddress = useAuthAbhaStore((state) => state.setSelectedAbhaAddress);
+  const initAbhaAppMobileNumber = useAuthAbhaStore((state) => state.initAbhaAppMobileNumber);
+  const setEkaProfileInfo = useAuthAbhaStore((state) => state.setEkaProfileInfo);
+  const clientId = useAuthAbhaStore((state) => state.clientId);
+  const isEkaAppLogin = useAuthAbhaStore((state) => state.isEkaAppLogin);
+  const isNewLoginOrCreateFlow = useAuthAbhaStore((state) => state.isNewLoginOrCreateFlow);
+  const extra_headers = GET_EXTRA_HEADERS();
+
+  const selectedMethod = useAuthAbhaStore((state) => state.abhaAuthFlowMethod);
+
+  // 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',
+      txn_id: txnId || 'missing txnId',
+      oid: extra_headers?.['X-User-ID'] ? 'true' : 'false',
+      access_token: extra_headers?.['auth'] ? 'true' : 'false',
+      flow: selectedMethod ?? ""
+    };
+
+    const eventData = {
+      ...baseProps,
+      ...data,
+    };
+
+    handleSendEvent({
+      eventName: name,
+      eventData,
+    });
+
+    window.curio?.pushToMixpanel?.(name, eventData);
+  };
+
+  useEffect(() => {
+    if (initAbhaAppMobileNumber) {
+      setMobileNumber(initAbhaAppMobileNumber);
+    }
+  }, [initAbhaAppMobileNumber]);
+
+  const handleOtpCompletion = ({ otp }: { otp: string }) => {
+    trackAbhaEvent({
+      name: 'abha_aadhaar_otp_enter_clicks',
+      data: {
+        page_view: 'aadhaar_verification',
+        platform: clientId,
+        otp_entered: true,
+      },
+    });
+    setOtp(otp);
+  };
+
+  const handleMobileNumberChange = ({
+    mobileNumber: newMobileNumber,
+  }: {
+    mobileNumber: string;
+  }) => {
+    setMobileNumber(newMobileNumber);
+
+    trackAbhaEvent({
+      name: 'abha_aadhaar_mobile_otp_enter',
+      data: {
+        page_view: 'aadhaar_verification',
+        platform: clientId
+      },
+    });
+  };
+
+  const handleResendOtpClick = async () => {
+    if (!txnId) {
+      trackAbhaEvent({
+        name: 'aadhaar_otp_resend_clicked_no_txnId',
+        data: {
+          platform: clientId,
+          txn_id: txnId || 'missing_txnId',
+          txn_id_exists: !!txnId
+        },
+      });
+      return;
+    }
+
+    const {
+      txn_id,
+      error: resendOtpError,
+      action: errorAction,
+    } = await postRegisterAadhaarResendOtp({ txn_id: txnId });
+
+    if (!txn_id) {
+      trackAbhaEvent({
+        name: 'aadhaar_otp_resend_failed',
+        data: {
+          platform: clientId,
+          reason: resendOtpError || 'no_txn_id',
+          reason_exists: !!resendOtpError,
+        },
+      });
+      setError(resendOtpError || 'Something went wrong, please try again');
+      if (errorAction) {
+        setBottomsheetErrorInfo(errorAction);
+      }
+      return;
+    }
+
+    trackAbhaEvent({
+      name: 'aadhaar_otp_resend_success',
+      data: {
+        platform: clientId,
+        txn_id: txn_id,
+      },
+    });
+
+    // Update the txnId in the store with the new one
+    setTxnId(txn_id);
+  };
+
+  const handleVerifyClick = async () => {
+    if (!txnId) {
+      trackAbhaEvent({
+        name: 'aadhaar_otp_verification_no_txnId',
+        data: {
+          platform: clientId,
+          type: 'verify',
+          txn_id: txnId || 'missing_txnId',
+          txn_id_exists: !!txnId,
+        },
+      });
+      return;
+    }
+
+    trackAbhaEvent({
+      name: 'abha_aadhaar_otp_verify_submitted',
+      data: {
+        platform: clientId,
+        type: 'verify',
+      },
+    });
+
+    setAadhaarVerifyApiStatus(LOADING_STATE.LOADING);
+    const {
+      txn_id,
+      skip_state,
+      profile,
+      eka,
+      error,
+      abha_profiles,
+      action: errorAction,
+    } = await postRegisterAadhaarVerify({
+      otp,
+      mobile: mobileNumber,
+      txn_id: txnId,
+    });
+
+    if (!txn_id || !skip_state) {
+      trackAbhaEvent({
+        name: 'aadhaar_otp_verification_failed',
+        data: {
+          platform: clientId,
+          reason: error || 'missing_txn_id_or_skip_state',
+          txn_id_exists: !!txn_id,
+          skip_state_exists: !!skip_state,
+        },
+      });
+      setAadhaarVerifyApiStatus(LOADING_STATE.REJECTED);
+      setError(error || 'Something went wrong, please try again');
+      if (errorAction) {
+        setBottomsheetErrorInfo(errorAction);
+      }
+      return;
+    }
+
+    trackAbhaEvent({
+      name: 'aadhaar_otp_verification_success',
+      data: {
+        platform: clientId,
+        skip_state,
+        oid: eka?.oid,
+      },
+    });
+
+    setAadhaarVerifyApiStatus(LOADING_STATE.RESOLVED);
+    setAadhaarVerificationSkipStateStatus(skip_state);
+    if (eka?.min_token) {
+      setEkaSmallToken(eka.min_token);
+    }
+
+    if (profile && profile.abha_address) {
+      setSelectedAbhaAddress(profile.abha_address);
+    }
+
+    if (eka?.oid) {
+      setOid(eka.oid);
+    }
+
+    // in HMIS case, when we are trying to create a new patient,
+    // then oid will not be present in the headers.
+    // but if the abha address is created elsewhere,
+    // server will send the oid in the response.
+
+    if (profile) {
+      setEkaProfileInfo({
+        date_of_birth: `${profile.year_of_birth}-${String(profile.month_of_birth).padStart(2, '0')}-${String(profile.day_of_birth).padStart(2, '0')}`,
+        firstname: profile.first_name as string,
+        lastname: profile.last_name as string,
+        pincode: profile.pincode as string,
+        gender: profile.gender as string,
+        name: (profile.first_name + ' ' + profile.last_name) as string,
+        mobile: profile.mobile,
+        oid: eka?.oid,
+        abha_address: profile.abha_address,
+        abha_number: profile.abha_number,
+      });
+    }
+
+
+    trackAbhaEvent({
+      name: 'abha_aadhaar_otp_verification_success',
+      data: {
+        platform: clientId,
+        skip_state,
+        oid: eka?.oid,
+      },
+    });
+
+    if(abha_profiles){
+      setAbhaAddressList(abha_profiles);
+    }
+     setScreen(SCREEN_NAMES.AADHAAR_VERIFICATION_STATUS);
+      // setScreen(SCREEN_NAMES.SELECT_ABHA_FROM_LIST);
+      return;
+    
+  };
+
+  const handleErrorBottomsheetButtonClick = () => {
+    setScreen(SCREEN_NAMES.CREATE_ABHA_WITH_AADHAAR);
+    const isAppLogin = useAuthAbhaStore.getState().isEkaAppLogin;
+    clearAbhaAuthStore();
+    useAuthAbhaStore.setState({ isEkaAppLogin: isAppLogin });
+  };
+
+  const isButtonValid =
+    isOtpValid && mobileNumber.length === 10 && isHealthLockerChecked && isLinkHealthDataChecked;
+
+  return (
+    <div className="pds2-flex pds2-flex-col pds2-w-full pds2-h-full pds2-bg-bg-01">
+      <AbhaHeader
+        prefixIcon={
+          <button
+            className="pds2-w-24 pds2-h-24 pds2-rounded-full pds2-flex pds2-items-center pds2-justify-center ripple"
+            onClick={goBackLoginScreen}
+          >
+            <ArrowLeftRegularIcon className="" />
+          </button>
+        }
+        title="Create ABHA"
+        suffixIcon={<EkaIcon className="pds2-w-20 pds2-h-20" />}
+        className="pds2-border-b-1 pds2-border-bg-seperator-dark"
+      />
+
+      <AbhaStepper/>
+      <div className="pds2-px-16 pds2-pb-16 pds2-space-y-12 pds2-overflow-y-auto pds2-flex-1 pds2-bg-bg-01">
+        <AbhaOtpCard
+          otpSentToText={
+            aadhaarOtpSentToHint || 'Enter OTP sent on mobile number linked with your Aadhaar'
+          }
+          onOtpCompletion={handleOtpCompletion}
+          onResendOtpClick={handleResendOtpClick}
+          setIsValid={setIsOtpValid}
+          error={error}
+        />
+        <EnterMobileNumberCard
+          mobileNumber={mobileNumber}
+          onMobileNumberChange={handleMobileNumberChange}
+          isOtpValid={isOtpValid}
+          onKeyDown={({ key }) => {
+            key === "Enter" && handleVerifyClick();
+          }}
+        />
+        <div className="pds2-space-y-8">
+          <CustomCheckBox
+            id="health-locker"
+            label="Allow Eka Care to create ABHA locker and link health data"
+            isCheckboxChecked={isHealthLockerChecked}
+            onCheckboxChange={(isChecked) => {
+              setIsHealthLockerChecked(isChecked);
+            }}
+          />
+        </div>
+      </div>
+
+      <div className="pds2-p-16 pds2-sticky pds2-bottom-0 pds2-bg-bg-white pds2-w-full pds2-border pds2-border-border-brand-02">
+        <Pds2Button
+          title="Verify"
+          state={(!isButtonValid || aadhaarVerifyApiStatus === LOADING_STATE.LOADING )? 'disabled' : 'enabled'}
+          className="pds2-w-full"
+          onClick={handleVerifyClick}
+          isLoading={aadhaarVerifyApiStatus === LOADING_STATE.LOADING}
+        />
+      </div>
+      <AbhaErrorBottomSheet onSubmitClick={handleErrorBottomsheetButtonClick} />
+    </div>
+  );
+};
+
+export default AbhaOtpAndMobileScreen;
+
+const EnterMobileNumberCard = ({
+  mobileNumber,
+  onMobileNumberChange,
+  isOtpValid,
+  onKeyDown,
+}: {
+  mobileNumber: string;
+  onMobileNumberChange: (params: { mobileNumber: string }) => void;
+  isOtpValid: boolean;
+  onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
+}) => {
+  const mobileRef = useRef<HTMLInputElement>(null);
+  useEffect(() => {
+    if (mobileRef.current && isOtpValid) mobileRef.current.focus();
+  }, [isOtpValid]);
+
+  const selectedMethod = useAuthAbhaStore((state) => state.abhaAuthFlowMethod);
+  const initAbhaAppMobileNumber = useAuthAbhaStore((state) => state.initAbhaAppMobileNumber);
+
+  const isMobileNonEditable =
+    selectedMethod === ABHA_AUTH_FLOW_METHOD.AADHAR_NUMBER && !!initAbhaAppMobileNumber;
+
+  if (initAbhaAppMobileNumber) {
+    mobileNumber = initAbhaAppMobileNumber;
+  }
+
+  return (
+    <CustomCardLayout>
+      <div className="pds2-flex pds2-items-center pds2-space-x-16 pds2-w-full">
+        <div className="Body1Regular pds2-text-text-01 pds2-flex-1">
+          Enter your mobile number to link your ABHA{' '}
+          <sup className="pds2-text-text-error Body3Semibold">*</sup>
+        </div>
+        <PhoneSolidIcon className="pds2-w-48 pds2-h-48 pds2-text-icon-success-02 pds2-p-6" />
+      </div>
+      <label className="pds2-relative pds2-border focus-within:pds2-border-border-brand-01 pds2-border-border-03 pds2-rounded-12">
+        <span className="Body1Regular pds2-absolute pds2-left-16 pds2-top-1/2 pds2-transform pds2--translate-y-1/2 pds2-text-text-01">
+          {'+91 -'}
+        </span>
+        <input
+          ref={mobileRef}
+          placeholder="Mobile Number"
+          type="tel"
+          value={mobileNumber}
+          disabled={isMobileNonEditable}
+          onPaste={(e) => {
+            e.preventDefault();
+            const value = e.clipboardData.getData('text').replace(/[^0-9]/g, '');
+            onMobileNumberChange({ mobileNumber: value.slice(-10) });
+          }}
+          onChange={(e) => {
+            if (e.target.value.length > 10) return;
+            const value = e.target.value.replace(/[^0-9]/g, '');
+            onMobileNumberChange({ mobileNumber: value.slice(-10) });
+          }}
+          maxLength={10}
+          className="Body1Regular pds2-w-full pds2-pl-60 pds2-pr-12 pds2-py-12 pds2-rounded-12 pds2-outline-none"
+          onKeyDown={onKeyDown}
+        />
+      </label>
+      <div className="pds2-flex pds2-items-center pds2-space-x-8 pds2-text-text-03"></div>
+    </CustomCardLayout>
+  );
+};
+
+export const CustomCardLayout = ({
+  children,
+  className = 'pds2-space-y-12',
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) => {
+  return (
+    <div
+      className={`pds2-flex pds2-flex-col pds2-w-full pds2-p-16 pds2-rounded-16 pds2-bg-bg-white ${className}`}
+    >
+      {children}
+    </div>
+  );
+};