@eka-care/abha 0.0.5 → 0.0.7

package/src/routes/select-abha-from-list-screen.tsx

@@ -1,718 +0,0 @@
-import {
-  ArrowLeftRegularIcon,
-  // ChevronDownRegularIcon,
-  // CircleCheckSolidIcon,
-  // EkaIcon,
-  PlusRegularIcon,
-  // ProfileIcon,
-  // XMarkRegularIcon,
-} from '@elixir/icons';
-import {
-  ABHA_AUTH_FLOW_METHOD,
-  LOADING_STATE,
-  REGISTRATION_TYPE,
-  TProfileRecord,
-} from '@elixir/types';
-import React, { useState } from 'react';
-import Pds2Button from '../atoms/button';
-import Pds2CustomButton from '../atoms/button/custom-button';
-import Pds2Header from '../atoms/header';
-import TextSeparator from '../atoms/text-separator';
-import AbhaErrorBottomSheet from '../organisms/abha/error-bottom-sheet';
-import useAuthAbhaStore from '../stores/auth-abha-store';
-import { SCREEN_NAMES, TAbhaAddress } from '../stores/auth-abha-store/types';
-import usePostAuthVerifyV2 from '../api-queries/use-post-auth-verify-v2';
-import ExitPopup from '../molecules/exit-popup';
-import usePostAbdmProfileLoginPhr from '../api-queries/user-post-abdm-profile-login-phr';
-import { onAbhaSuccess, unMount } from '../main';
-import { handleSendEvent } from '@elixir/utils';
-import { getMockAuthVerifyResponse } from '../utils/mock-auth-response';
-import { postRegisterAadhaarInit, postRegisterMobileInit } from 'apis';
-import { GET_EXTRA_HEADERS } from 'apis';
-
-type InitMethod = 'aadhaar' | 'mobile';
-
-const SelectAbhaFromListScreen = () => {
-  const [selectedAbha, setSelectedAbha] = useState<TAbhaAddress | null>(null);
-  const setScreen = useAuthAbhaStore((state) => state.setScreen);
-  const goBackLoginScreen = useAuthAbhaStore((state) => state.goBackLoginScreen);
-  const txnId = useAuthAbhaStore((state) => state.txnId);
-  const authTxnId = useAuthAbhaStore((state) => state.authTxnId);
-  const abhaAddressList = useAuthAbhaStore((state) => state.abhaAddressList);
-  const setBottomsheetErrorInfo = useAuthAbhaStore((state) => state.setBottomsheetErrorInfo);
-  const clearAbhaAuthStore = useAuthAbhaStore((state) => state.clearAbhaAuthStore);
-  const setSelectedAbhaAddress = useAuthAbhaStore((state) => state.setSelectedAbhaAddress);
-  const abhaAuthFlowMethod = useAuthAbhaStore((state) => state.abhaAuthFlowMethod);
-  const loginIdentifierValue = useAuthAbhaStore((state) => state.loginIdentifierValue);
-  const [error, setError] = useState<string | null>('');
-  const [isExitPopupOpen, setIsExitPopupOpen] = useState<boolean>(false);
-  const setEkaProfileInfo = useAuthAbhaStore((state) => state.setEkaProfileInfo);
-  const setAadhaarVerificationSkipStateStatus = useAuthAbhaStore(
-    (state) => state.setAadhaarVerificationSkipStateStatus
-  );
-
-  const [abdmLoginVerifyApiStatus, setAbdmLoginVerifyApiStatus] = useState<LOADING_STATE>(
-    LOADING_STATE.IDLE
-  );
-
-  const validGenders = ['M', 'F', 'O', 'U'] as const;
-
-  // const [isBottomSheetOpen, setIsBottomSheetOpen] = useState<boolean>(false);
-  const { mutateAsync: postAuthVerifyV2Mutate } = usePostAuthVerifyV2();
-  const { mutateAsync: postAbdmProfileLoginPhr } = usePostAbdmProfileLoginPhr();
-  const ekaProfileInfo = useAuthAbhaStore((state) => state.ekaProfileInfo);
-
-  const registrationType = useAuthAbhaStore((state) => state.registrationType);
-  const clientId = useAuthAbhaStore((state) => state.clientId);
-  const isEkaAppLogin = useAuthAbhaStore((state) => state.isEkaAppLogin);
-  const setRegistrationType = useAuthAbhaStore((state) => state.setRegistrationType);
-  const selectedMethod = useAuthAbhaStore((state) => state.abhaAuthFlowMethod);
-  const identityValue = useAuthAbhaStore((state) => state.identityValue);
-  const setMobileInitResponse = useAuthAbhaStore((state) => state.setMobileInitResponse);
-  const [initApiStatus, setInitApiStatus] = useState<Record<InitMethod, LOADING_STATE>>({
-    aadhaar: LOADING_STATE.IDLE,
-    mobile: LOADING_STATE.IDLE,
-  });
-  const setAadhaarInitResponse = useAuthAbhaStore((state) => state.setAadhaarInitResponse);
-  const setSelectedAbhaFlow = useAuthAbhaStore((state) => state.setSelectedAbhaFlow);
-  const isNewLoginOrCreateFlow = useAuthAbhaStore((state) => state.isNewLoginOrCreateFlow);
-  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',
-      flow: selectedMethod ?? ""
-    };
-
-    const eventData = {
-      ...baseProps,
-      ...data,
-    };
-
-    handleSendEvent({
-      eventName: name,
-      eventData,
-    });
-
-    window.curio?.pushToMixpanel?.(name, eventData);
-  };
-
-  const handleCreateABHAClick = async () => {
-    trackAbhaEvent({
-      name: 'abha_login_select_abha_init_started',
-      data: {
-        method: selectedMethod,
-        platform: clientId,
-      },
-    });
-
-    // Create a helper function to update status
-    const updateInitStatus = (method: InitMethod, status: LOADING_STATE) => {
-      setInitApiStatus((prev) => ({
-        ...prev,
-        [method]: status,
-      }));
-    };
-
-    // set the registration type as create
-    setRegistrationType(REGISTRATION_TYPE.CREATE);
-
-    // call the registration verify api for corresponding abha app method
-    if (selectedMethod === ABHA_AUTH_FLOW_METHOD.MOBILE) {
-      const {
-        txn_id,
-        hint,
-        error: mobileError,
-        action: errorAction,
-      } = await postRegisterMobileInit({
-        mobile_number: identityValue,
-      });
-      if (txn_id && hint) {
-        trackAbhaEvent({
-          name: 'abha_login_select_abha_mobile_init_success',
-          data: {
-            method: selectedMethod,
-            platform: clientId,
-            txn_id,
-          },
-        });
-        setMobileInitResponse({
-          authTxnId,
-          txnId: txn_id,
-          mobileOtpSentToHint: hint,
-        });
-        setSelectedAbhaFlow('mobile');
-        updateInitStatus('mobile', LOADING_STATE.RESOLVED);
-        setRegistrationType(REGISTRATION_TYPE.CREATE);
-        setScreen(SCREEN_NAMES.ABHA_PHONE_NUMBER_VERIFICATION);
-        return;
-      }
-
-      trackAbhaEvent({
-        name: 'abha_login_select_abha_init_failed',
-        data: {
-          method: selectedMethod,
-          platform: clientId,
-          reason: mobileError || 'unknown',
-          reason_exists: !!mobileError,
-        },
-      });
-
-      updateInitStatus('mobile', LOADING_STATE.REJECTED);
-      if (errorAction) {
-        setBottomsheetErrorInfo(errorAction);
-      } else {
-        setError(mobileError || 'Something went wrong');
-      }
-    } else if (selectedMethod === ABHA_AUTH_FLOW_METHOD.AADHAR_NUMBER) {
-      const {
-        txn_id,
-        hint,
-        error: aadhaarError,
-        action: errorAction,
-      } = await postRegisterAadhaarInit({
-        aadhaar_number: identityValue,
-      });
-      if (txn_id && hint) {
-        trackAbhaEvent({
-          name: 'abha_login_select_abha_aadhaar_init_success',
-          data: {
-            method: selectedMethod,
-            platform: clientId,
-            txn_id,
-          },
-        });
-        setAadhaarInitResponse({
-          authTxnId,
-          txnId: txn_id,
-          aadhaarOtpSentToHint: hint,
-        });
-        updateInitStatus('aadhaar', LOADING_STATE.RESOLVED);
-        setSelectedAbhaFlow('aadhaar');
-        setRegistrationType(REGISTRATION_TYPE.CREATE);
-        setScreen(SCREEN_NAMES.ABHA_OTP_AND_MOBILE);
-        return;
-      }
-
-      trackAbhaEvent({
-        name: 'abha_login_select_abha_init_failed',
-        data: {
-          method: selectedMethod,
-          platform: clientId,
-          reason: aadhaarError || 'unknown',
-          reason_exists: !!aadhaarError,
-        },
-      });
-
-      updateInitStatus('aadhaar', LOADING_STATE.REJECTED);
-      if (errorAction) {
-        trackAbhaEvent({
-          name: 'abha_login_select_abha_error_action',
-          data: {
-            method: selectedMethod,
-            platform: clientId,
-            action: errorAction?.cta?.title || 'unknown',
-            action_exists: !!errorAction?.cta?.title,
-          },
-        });
-        setBottomsheetErrorInfo(errorAction);
-      } else {
-        setError(aadhaarError || 'Something went wrong');
-      }
-      return;
-    }
-    return;
-  };
-
-  const handleContinueClick = async () => {
-    if (!selectedAbha) return;
-    setSelectedAbhaAddress(selectedAbha.abha_address);
-
-    console.log(abdmLoginVerifyApiStatus, "from abha" )
-    if (!txnId) {
-      trackAbhaEvent({
-        name: 'abha_login_select_abha_txnId_not_found',
-        data: {
-          platform: clientId,
-          reason: 'txnId missing',
-          reason_exists: true,
-        },
-      });
-      return;
-    }
-
-    setAbdmLoginVerifyApiStatus(LOADING_STATE.LOADING);
-
-    trackAbhaEvent({
-      name: 'abha_login_select_abha_verify_start',
-      data: {
-        platform: clientId,
-        txn_id: txnId,
-      },
-    });
-
-    const {
-      error: abdmError,
-      eka,
-      profile,
-      action: errorAction,
-      skip_state,
-    } = await postAbdmProfileLoginPhr({
-      txn_id: txnId,
-      phr_address: selectedAbha.abha_address,
-    });
-
-    if (errorAction) {
-      trackAbhaEvent({
-        name: 'abha_login_select_abha_error_action',
-        data: {
-          platform: clientId,
-          txn_id: txnId,
-          action: errorAction?.cta?.title || 'unknown',
-          action_exists: !!errorAction?.cta?.title,
-        },
-      });
-      setBottomsheetErrorInfo(errorAction);
-      return;
-    }
-
-    if (abdmError || !eka) {
-      trackAbhaEvent({
-        name: 'abha_login_select_abha_abdm_error',
-        data: {
-          platform: clientId,
-          txn_id: txnId,
-          error_message: abdmError || 'eka object missing',
-          error_exists: !!abdmError,
-        },
-      });
-      setAbdmLoginVerifyApiStatus(LOADING_STATE.REJECTED);
-      setError(abdmError);
-      return;
-    }
-
-    if (!skip_state) {
-      setError('skip State is missing');
-      return;
-    }
-
-    trackAbhaEvent({
-      name: 'abha_login_select_abha_verify_success',
-      data: {
-        platform: clientId,
-        txn_id: txnId,
-        skip_state: skip_state,
-      },
-    });
-
-    setAadhaarVerificationSkipStateStatus(skip_state);
-
-    if (profile) {
-      trackAbhaEvent({
-        name: 'abha_login_select_abha_profile_received',
-        data: {
-          platform: clientId,
-        },
-      });
-
-      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,
-        middlename: profile.middle_name as string,
-        abha_address: profile.abha_address,
-        abha_number: profile.abha_number,
-      });
-      setSelectedAbhaAddress(profile.abha_address);
-    }
-
-    // if the trigger is from inside the app(phr case)
-    // or if the trigger from the eka doc app, then return here
-    if (isEkaAppLogin) {
-      if (!eka.oid) {
-        trackAbhaEvent({
-          name: 'abha_login_select_abha_oid_null',
-          data: {
-            platform: clientId,
-            oid: eka?.oid ?? 'null_or_undefined',
-          },
-        });
-        setAbdmLoginVerifyApiStatus(LOADING_STATE.REJECTED);
-        return;
-      }
-
-      const gender = validGenders.includes(profile?.gender as any)
-        ? (profile?.gender as 'M' | 'F' | 'O' | 'U')
-        : undefined;
-
-      const authProfile: TProfileRecord = {
-        oid: eka?.oid || '',
-        fln: (profile?.first_name + ' ' + profile?.last_name) as string,
-        dob: `${profile?.year_of_birth}-${String(profile?.month_of_birth).padStart(2, '0')}-${String(profile?.day_of_birth).padStart(2, '0')}`,
-        gen: gender,
-        mobile: profile?.mobile,
-        at: '',
-        fn: profile?.first_name || '',
-        mn: profile?.middle_name || '',
-        ln: profile?.last_name || '',
-        'health-ids': profile?.abha_address ? [profile.abha_address] : undefined,
-        abha_number: profile?.abha_number || '',
-      };
-      const authResponse = getMockAuthVerifyResponse(authProfile);
-      setAbdmLoginVerifyApiStatus(LOADING_STATE.RESOLVED);
-
-      trackAbhaEvent({
-        name: 'abha_login_select_abha_inside_app_success',
-        data: {
-          platform: clientId,
-          oid: eka.oid,
-        },
-      });
-
-      // @ts-ignore
-      if (window.EkaAbha && window.EkaAbha.onAbhaSuccess) {
-        // @ts-ignore
-        window.EkaAbha?.onAbhaSuccess(JSON.stringify({ response: authResponse }));
-        return;
-      }
-      // @ts-ignore
-      onAbhaSuccess({ response: authResponse });
-
-      trackAbhaEvent({
-        name: 'connectivity-debug-unmount',
-        data: {
-          platform: clientId,
-          eka: eka,
-          line: 397,
-          function: "isEkaAppLogin",
-          page: "select-abha-from-list-screen.tsx",
-          flow: "debug",
-        },
-      });
-
-      unMount();
-      return;
-    }
-
-    if (!eka.min_token || !authTxnId) {
-      trackAbhaEvent({
-        name: 'abha_login_select_abha_min_token_missing',
-        data: {
-          platform: clientId,
-          oid: eka?.oid ?? 'missing_oid',
-          min_token: eka?.min_token ?? 'missing_min_token',
-          auth_txnId: authTxnId ?? 'missing_authTxnId',
-        },
-      });
-      setAbdmLoginVerifyApiStatus(LOADING_STATE.REJECTED);
-      setError(abdmError || 'Something went wrong. Please try again.');
-      return;
-    }
-
-    const authVerifyResponse = await postAuthVerifyV2Mutate({
-      txn_id: authTxnId,
-      token: eka.min_token,
-      ...(eka.oid ? { oid: eka.oid } : null),
-    });
-
-    if (!authVerifyResponse.data) {
-      trackAbhaEvent({
-        name: 'abha_login_select_abha_auth_verify_failed',
-        data: {
-          platform: clientId,
-          oid: eka?.oid ?? 'missing_oid',
-          min_token: eka?.min_token ?? 'missing_min_token',
-          auth_txnId: authTxnId ?? 'missing_authTxnId',
-        },
-      });
-      setAbdmLoginVerifyApiStatus(LOADING_STATE.REJECTED);
-      setError(authVerifyResponse.error?.message || 'Something went wrong, please try again');
-      return;
-    }
-    setAbdmLoginVerifyApiStatus(LOADING_STATE.RESOLVED);
-
-    trackAbhaEvent({
-      name: 'abha_login_select_abha_auth_verify_success',
-      data: {
-        platform: clientId,
-        oid: eka.oid,
-        min_token: eka?.min_token,
-        auth_txnId: authTxnId,
-      },
-    });
-    return;
-  };
-
-  const handleErrorBottomsheetButtonClick = () => {
-    const mobileNumber = useAuthAbhaStore.getState().initAbhaAppMobileNumber;
-    const isAppLogin = useAuthAbhaStore.getState().isEkaAppLogin;
-    goBackLoginScreen();
-    clearAbhaAuthStore();
-    useAuthAbhaStore.setState({ initAbhaAppMobileNumber: mobileNumber });
-    useAuthAbhaStore.setState({ isEkaAppLogin: isAppLogin });
-  };
-
-  return (
-    <div className="pds2-w-full pds2-flex pds2-flex-col pds2-h-screen pds2-bg-bg-01">
-      <Pds2Header
-        title="Select ABHA to continue"
-        prefixIcon={
-          <button
-            className="pds2-w-24 pds2-h-24 pds2-rounded-full pds2-flex pds2-items-center pds2-justify-center ripple"
-            onClick={() => setIsExitPopupOpen(true)}
-          >
-            <ArrowLeftRegularIcon />
-          </button>
-        }
-        className="pds2-border-b pds2-border-bg-seperator-dark pds2-bg-bg-white"
-      />
-
-      {/* Scrollable area: list + optional text */}
-      <div className="pds2-flex-1 pds2-overflow-y-auto pds2-flex pds2-flex-col pds2-p-16 pds2-space-y-16">
-        <div className="pds2-text-text-03 Body1Regular pds2-text-center">
-          We found {abhaAddressList?.length} ABHA addresses <br /> select one you want to log in
-          with
-        </div>
-        <AbhaList
-          list={abhaAddressList}
-          selectedAbha={selectedAbha}
-          setSelectedAbha={setSelectedAbha}
-        />
-        {(abhaAddressList?.length ?? 0) < 6 &&
-          (abhaAuthFlowMethod === ABHA_AUTH_FLOW_METHOD.MOBILE ||
-            abhaAuthFlowMethod === ABHA_AUTH_FLOW_METHOD.AADHAR_NUMBER) && (
-            <>
-              <TextSeparator title="or" />
-              <Pds2CustomButton
-                title="Create new ABHA Address"
-                prefixIcon={<PlusRegularIcon />}
-                className="pds2-justify-center pds2-text-text-brand pds2-border-bg-fab-bg-brand-04 Body1Semibold"
-                onClick={handleCreateABHAClick}
-              />
-            </>
-          )}
-      </div>
-
-      {/* Footer fixed at bottom */}
-      <div className="pds2-bg-bg-white pds2-shadow-lg pds2-w-full pds2-sticky pds2-bottom-0 pds2-border-t pds2-border-border-brand-02 pds2-p-16 z-10">
-        {error && <div className="pds2-text-text-error pds2-text-center pds2-mb-4">{error}</div>}
-        {abhaAuthFlowMethod === ABHA_AUTH_FLOW_METHOD.ABHA_NUMBER && (
-          <div className="pds2-text-center pds2-bg-bg-warning-03 pds2-py-2 pds2-mb-4">
-            <span className="pds2-text-text-03 Body2Regular">Your ABHA No:</span>
-            <span className="pds2-text-text-01 Body2Semibold">{loginIdentifierValue}</span>
-          </div>
-        )}
-        <Pds2Button
-          title="Continue"
-          state={selectedAbha === null || abdmLoginVerifyApiStatus === LOADING_STATE.LOADING ? 'disabled' : 'enabled'}
-          isLoading={abdmLoginVerifyApiStatus === LOADING_STATE.LOADING}
-          className="pds2-w-full"
-          onClick={handleContinueClick}
-        />
-      </div>
-
-      <AbhaErrorBottomSheet onSubmitClick={handleErrorBottomsheetButtonClick} />
-      <ExitPopup open={isExitPopupOpen} setOpen={setIsExitPopupOpen} />
-    </div>
-  );
-};
-
-export default SelectAbhaFromListScreen;
-
-const AbhaList = ({
-  list,
-  selectedAbha,
-  setSelectedAbha,
-}: {
-  list: TAbhaAddress[] | null;
-  selectedAbha: TAbhaAddress | null;
-  setSelectedAbha: (abha: TAbhaAddress) => void;
-}) => {
-  // const [tooltipAbhaId, setTooltipAbhaId] = useState<string | null>(null);
-
-  return (
-    <div className="pds2-bg-bg-white pds2-rounded-16 pds2-border pds2-border-border-brand-02 pds2-w-full pds2-relative">
-      {list?.map((abha, index) => (
-        <React.Fragment key={abha.abha_address}>
-          <label className="pds2-p-16 pds2-flex pds2-space-x-8">
-            <input
-              className="pds2-self-start pds2-mt-4 pds2-w-14 pds2-h-14 pds2-p-2 checked:pds2-accent-text-brand"
-              type="radio"
-              value={abha.abha_address}
-              checked={selectedAbha?.abha_address === abha.abha_address}
-              onChange={() => {
-                setSelectedAbha(abha);
-              }}
-            />
-            <div className="pds2-flex pds2-flex-col pds2-space-y-4 pds2-flex-1">
-              <div className="TitlesSubheadline pds2-text-text-primary pds2-flex pds2-flex-row pds2-items-center pds2-justify-between">
-                <div>{abha?.abha_address}</div>
-                {/* {abha?.name && <div className="Body3Regular pds2-text-text-03">{abha.name}</div>} */}
-                {/* <div
-                  className="pds2-flex pds2-flex-row pds2-items-center pds2-gap-x-8 pds2-cursor-pointer pds2-relative"
-                  onClick={(e) => {
-                    e.preventDefault();
-                    setTooltipAbhaId(tooltipAbhaId === abha.oid ? null : abha.oid);
-                  }}
-                >
-                  <div className="pds2-bg-icon-orange-500 pds2-text-text-white pds2-rounded-full pds2-px-4 Label1Semibold">
-                    P
-                  </div>
-                  <CircleCheckSolidIcon className="pds2-w-14 pds2-h-14 pds2-text-icon-success-02" />
-                  {tooltipAbhaId === abha.oid && (
-                    <div className="pds2-absolute pds2-right-0 pds2-top-full pds2-mt-2 pds2-z-50 pds2-animate-fade-in">
-                      <TooltipContent />
-                    </div>
-                  )}
-                </div> */}
-              </div>
-
-              <div className="pds2-text-text-03 Body3Regular pds2-flex pds2-flex-row pds2-items-center pds2-gap-x-4">
-                {abha?.name && <div className="Body3Regular pds2-text-text-03">{abha.name}</div>}
-                {/* {abha?.eka_username ? (
-                  <>
-                    <EkaIcon className="pds2-w-12 pds2-h-12" />
-                    <span>
-                      {abha?.eka_username} ({abha?.age} • {abha?.gender})
-                    </span>
-                  </>
-                ) : (
-                  <span>No Eka profile found</span>
-                )} */}
-              </div>
-            </div>
-          </label>
-          {index !== list.length - 1 && (
-            <div className="pds2-px-16">
-              <div className="pds2-bg-border-03 pds2-h-1 pds2-w-full"></div>
-            </div>
-          )}
-        </React.Fragment>
-      ))}
-    </div>
-  );
-};
-
-// const TooltipContent = () => {
-//   return (
-//     <div className="pds2-flex pds2-flex-col pds2-p-16 pds2-bg-bg-purple-800 pds2-rounded-16 pds2-space-y-12 pds2-w-180 pds2-animate-slide-up">
-//       <div className="pds2-flex pds2-flex-row pds2-items-center pds2-gap-x-8">
-//         <div className="pds2-bg-text-error pds2-text-text-white pds2-rounded-full pds2-px-4 Label1Semibold">
-//           P
-//         </div>
-//         <div className="pds2-text-text-invert Body2Semibold">Preferred Address</div>
-//       </div>
-//       <div className="pds2-flex pds2-flex-row pds2-items-center pds2-gap-x-8">
-//         <div className="pds2-bg-bg-white pds2-rounded-full">
-//           <CircleCheckSolidIcon className="pds2-w-14 pds2-h-14 pds2-text-icon-success-02" />
-//         </div>
-//         <div className="pds2-text-text-invert Body2Semibold">KYC</div>
-//       </div>
-//     </div>
-//   );
-// };
-
-// const LinkThisAbhaAddressBottomSheet = ({
-//   abha_address,
-//   isOpen,
-//   setIsOpen,
-// }: {
-//   abha_address: string;
-//   isOpen: boolean;
-//   setIsOpen: (open: boolean) => void;
-// }) => {
-//   // TODO: fetch these from the apis.
-//   const dummyEkaProfiles = [
-//     { id: '1', name: 'Eka Profile 1' },
-//     { id: '2', name: 'Eka Profile 2' },
-//     { id: '3', name: 'Eka Profile 3' },
-//   ];
-//   const [selectedProfile, setSelectedProfile] = useState<string | null>(null);
-//   const setScreen = useAuthAbhaStore((state) => state.setScreen);
-
-//   const handleCreateFamilyClick = () => {
-//     setScreen(SCREEN_NAMES.CREATE_EKA_PROFILE);
-//   };
-
-//   return (
-//     <BottomSheetWrapper isOpen={isOpen} setIsOpen={setIsOpen} shouldCloseOnClickOutside={true}>
-//       <div className="pds2-flex pds2-flex-col pds2-items-center pds2-p-16">
-//         <div className="pds2-flex pds2-justify-end pds2-items-center pds2-w-full">
-//           <button className="pds2-w-24 pds2-h-24 pds2-rounded-full pds2-flex pds2-items-center pds2-justify-center ripple">
-//             <XMarkRegularIcon
-//               onClick={() => setIsOpen(false)}
-//               className="pds2-w-18 pds2-h-18 pds2-text-text-03"
-//             />
-//           </button>
-//         </div>
-//         <div className="pds2-space-y-16 pds2-flex pds2-flex-col pds2-items-center pds2-text-center">
-//           <img src="/images/link-abha.webp" alt="Link ABHA" className="pds2-w-163" />
-//           <div className="pds2-space-y-4">
-//             <div className="pds2-text-text-01 Heading3Semibold">Link this ABHA Address</div>
-//             <div className="">
-//               <span className="Body1Medium pds2-text-text-01">{abha_address}</span>
-//               <span className="Body2Regular pds2-text-text-03">
-//                 {' '}
-//                 is not linked with any family member on Eka Care
-//               </span>
-//             </div>
-//           </div>
-//         </div>
-//         <div className="pds2-py-32 pds2-w-full pds2-flex pds2-flex-col pds2-justify-center pds2-space-y-12">
-//           <div className="pds2-text-text-03 Body2Medium pds2-text-center">Select Eka Profile</div>
-//           {dummyEkaProfiles.map((profile) => {
-//             const isSelected = selectedProfile === profile.id;
-//             return (
-//               <label
-//                 key={profile.id}
-//                 className={`pds2-flex pds2-items-center pds2-cursor-pointer pds2-p-16 pds2-rounded-16 pds2-bg-bg-01
-//                   ${
-//                     isSelected
-//                       ? 'pds2-border-2 pds2-border-border-brand-01 pds2-bg-bg-brand-02'
-//                       : 'pds2-border-1 pds2-border-border-03'
-//                   }
-//                   focus-within:pds2-ring-2 focus-within:pds2-ring-border-brand-01 focus-within:pds2-ring-offset-2
-//                   active:pds2-bg-bg-brand-02 hover:pds2-bg-bg-hover-01
-//                   pds2-transition-colors pds2-duration-200
-//                 `}
-//               >
-//                 <input
-//                   type="radio"
-//                   name="ekaProfile"
-//                   value={profile.id}
-//                   checked={isSelected}
-//                   onChange={() => setSelectedProfile(profile.id)}
-//                   className="focus:pds2-outline-none pds2-appearance-none"
-//                 />
-//                 <div className="pds2-flex pds2-flex-row pds2-items-center pds2-gap-x-8 pds2-flex-1">
-//                   <ProfileIcon className="pds2-w-32 pds2-h-32" />
-//                   <div className="TitlesSubheadline pds2-text-text-primary">{profile.name}</div>
-//                   <ChevronDownRegularIcon className="pds2-ml-auto pds2-w-14 pds2-h-14 pds2-text-text-03 -pds2-rotate-90" />
-//                 </div>
-//               </label>
-//             );
-//           })}
-//         </div>
-//         <div className="pds2-w-full pds2-pt-16 pds2-bg-bg-white pds2-sticky pds2-bottom-0">
-//           <Pds2CustomButton
-//             title="Create New Family Member"
-//             prefixIcon={<PlusRegularIcon />}
-//             className="pds2-justify-center pds2-text-text-brand Body1Semibold pds2-bg-border-brand-02 pds2-border-none"
-//             onClick={handleCreateFamilyClick}
-//           />
-//         </div>
-//       </div>
-//     </BottomSheetWrapper>
-//   );
-// };