@eka-care/abha-stg 0.1.0 → 0.1.2

package/src/routes/create-eka-profile-screen.tsx

@@ -1,831 +0,0 @@
-import { ArrowLeftRegularIcon } from '@eka-care/icons';
-import { ABHA_AUTH_FLOW_METHOD, ABHA_V3_SKIP_STATES, GET_EXTRA_HEADERS, LOADING_STATE } from '../constants/constants';
-import { useEffect, useMemo, useState } from 'react';
-import Pds2Button from '../atoms/button';
-import Pds2Header from '../atoms/header';
-import Pds2InputField from '../atoms/input-field';
-import Pds2SingleInputChip from '../atoms/single-input-chip';
-import useAuthAbhaStore from '../stores/auth-abha-store';
-import { SCREEN_NAMES } from '../stores/auth-abha-store/types';
-import { TVerifyToken } from '../api-queries/use-post-auth-verify-v2';
-import AbhaErrorBottomSheet from '../organisms/abha/error-bottom-sheet';
-import { TCachedQueryPhrResponse } from '../api-queries/use-post-register-mobile-create-phr';
-import { queryClient } from '../App';
-import usePostProfileSwitch from '../api-queries/use-post-profile-switch';
-import ExitPopup from '../molecules/exit-popup';
-
-import AbhaStepper from '../organisms/abha/abha-stepper';
-import handleSendEvent from '../utils/send-event-utils';
-import getPincodeDetails from '../api-queries/ndhm/get-pincode-details';
-import postAbdmProfileEka from '../api-queries/ndhm/post-abdm-profile-eka';
-
-const CreateEkaProfileScreen = () => {
-  const screen = useAuthAbhaStore((state) => state.screen);
-  const selectedAbhaAddress = useAuthAbhaStore((state) => state.selectedAbhaAddress);
-  const setBottomsheetErrorInfo = useAuthAbhaStore((state) => state.setBottomsheetErrorInfo);
-  const clearAbhaAuthStore = useAuthAbhaStore((state) => state.clearAbhaAuthStore);
-  const goBackLoginScreen = useAuthAbhaStore((state) => state.goBackLoginScreen);
-  const [isLoading, setIsLoading] = useState<LOADING_STATE>(LOADING_STATE.IDLE);
-  const [profileData, setProfileData] = useState<TProfileData>({
-    firstname: '',
-    lastname: '',
-    date_of_birth: '',
-    pincode: '',
-    gender: '',
-  });
-  const [error, setError] = useState<TProfileDataError>({
-    firstname: '',
-    lastname: '',
-    date_of_birth: '',
-    pincode: '',
-    gender: '',
-  });
-  const [createProfileError, setCreateProfileError] = useState<string | null>(null);
-  const { mutateAsync: postProfileSwitchMutate } = usePostProfileSwitch();
-  const [isExitPopupOpen, setIsExitPopupOpen] = useState<boolean>(false);
-  const ekaProfileInfo = useAuthAbhaStore((state) => state.ekaProfileInfo);
-  const setEkaProfileInfo = useAuthAbhaStore((state) => state.setEkaProfileInfo);
-  const setScreen = useAuthAbhaStore((state) => state.setScreen);
-  const topScreen = screen[screen.length - 1];
-  const aadhaarVerificationSkipStateStatus = useAuthAbhaStore(
-    (state) => state.aadhaarVerificationSkipStateStatus
-  );
-
-  // const authVerifyV2Response = queryClient.getQueryData<TVerifyToken>(['authVerifyV2Response']);
-  const cachedProfilePhrResponse = queryClient.getQueryData<TCachedQueryPhrResponse>([
-    'abdmProfilePhrResponse',
-  ]);
-
-  const selectedFlowMethod = useAuthAbhaStore((state) => state.abhaAuthFlowMethod);
-  const [profilePatient, setprofilePatient] = useState<TProfileData>({
-    firstname: '',
-    lastname: '',
-    date_of_birth: '',
-    pincode: '',
-    gender: '',
-  });
-
-  const isDocAppRequest = useAuthAbhaStore((state) => state.isDocAppRequest);
-  const clientId = useAuthAbhaStore((state) => state.clientId);
-  const isEkaAppLogin = useAuthAbhaStore((state) => state.isEkaAppLogin);
-  const isNewLoginOrCreateFlow = useAuthAbhaStore((state) => state.isNewLoginOrCreateFlow);
-  const txnId = useAuthAbhaStore((state) => state.txnId);
-  const extra_headers = GET_EXTRA_HEADERS();
-  const [pincodeApiError, setPincodeApiError] = useState<string | null>(null);
-  const selectedMethod = useAuthAbhaStore((state) => state.abhaAuthFlowMethod);
-
-  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);
-  };
-
-  // Run on component mount or when clientId changes
-  useEffect(() => {
-    // Track "create profile screen" page view
-    trackAbhaEvent({
-      name: 'page_view',
-      data: {
-        page_view: 'create_profile_screen',
-      },
-    });
-  }, [clientId]);
-
-  // Run on component mount to set status bar color
-  useEffect(() => {
-    // Change status bar to light gray
-    if (window.EkaAbha?.changeStatusBarColor) {
-      window.EkaAbha.changeStatusBarColor('#F2F4F7');
-      return () => {
-        // Cleanup: reset color to white on unmount
-        if (window.EkaAbha?.changeStatusBarColor) window?.EkaAbha?.changeStatusBarColor('#FFFFFF');
-      };
-    }
-  }, []); // Run only once on mount
-
-  useEffect(() => {
-    // If PHR data is available, use it to prefill form
-    if (cachedProfilePhrResponse) {
-      const {
-        first_name,
-        last_name,
-        gender,
-        pincode,
-        day_of_birth,
-        month_of_birth,
-        year_of_birth,
-      } = cachedProfilePhrResponse;
-
-      const correctedDay = day_of_birth === 0 ? 1 : day_of_birth;
-      const correctedMonth = month_of_birth === 0 ? 1 : month_of_birth;
-
-      const dateOfBirth = `${year_of_birth}-${String(correctedMonth).padStart(2, '0')}-${String(correctedDay).padStart(2, '0')}`;
-
-      trackAbhaEvent({
-        name: 'profile_data_set_from_phr_cache',
-        data: {
-          source: 'phr_cache',
-          date_of_birth: dateOfBirth,
-          firstname: first_name ?? 'missing',
-          lastname: last_name ?? 'missing',
-          gender: gender ?? 'missing',
-          pincode: pincode ?? 'missing',
-          dob_day: day_of_birth ?? 'missing',
-          dob_month: month_of_birth ?? 'missing',
-          dob_year: year_of_birth ?? 'missing',
-          flow: selectedMethod ?? ""
-        },
-      });
-
-      // Set profile data with properly formatted date
-      setProfileData({
-        firstname: first_name,
-        lastname: last_name,
-        gender: gender,
-        pincode: pincode,
-        date_of_birth: dateOfBirth,
-      });
-      return;
-    }
-
-    // Fallback: use Eka profile info if available
-    if (ekaProfileInfo) {
-
-      let year = '1983';
-      let month = '01';
-      let day = '01';
-
-      if (ekaProfileInfo.date_of_birth) {
-        const parts = ekaProfileInfo.date_of_birth.split('-');
-        year = parts[0];
-        month = parts[1] === '00' || !parts[1] ? '01' : parts[1];
-        day = parts[2] === '00' || !parts[2] ? '01' : parts[2];
-      }
-
-      const normalizedDate = `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
-
-      setProfileData({
-        firstname: ekaProfileInfo.firstname,
-        lastname: ekaProfileInfo.lastname,
-        gender: ekaProfileInfo.gender,
-        pincode: ekaProfileInfo.pincode,
-        date_of_birth: normalizedDate,
-        oid: ekaProfileInfo.oid,
-      });
-
-      trackAbhaEvent({
-        name: 'profile_data_set_from_eka_profile',
-        data: {
-          source: 'eka_profile',
-          date_of_birth: ekaProfileInfo?.date_of_birth ?? 'missing',
-          firstname: ekaProfileInfo?.firstname ?? 'missing',
-          lastname: ekaProfileInfo?.lastname ?? 'missing',
-          gender: ekaProfileInfo?.gender ?? 'missing',
-          pincode: ekaProfileInfo?.pincode ?? 'missing',
-          oid: ekaProfileInfo?.oid ?? 'missing',
-        },
-      });
-    }
-  }, [cachedProfilePhrResponse, ekaProfileInfo]);
-
-  // Determine if "Create Profile" button should be enabled
-  const buttonState = useMemo(() => {
-    if (
-      profileData.firstname &&
-      !error.firstname &&
-      profileData.date_of_birth &&
-      !error.date_of_birth &&
-      profileData.pincode &&
-      !error.pincode &&
-      profileData.gender &&
-      !error.gender
-    )
-      return true;
-    else return false;
-  }, [profileData, error]);
-
-  // Handle click on "Create Profile" button
-  const handleCreateProfileClick = async () => {
-
-    const newError: TProfileDataError = {
-      firstname: '',
-      lastname: '',
-      date_of_birth: '',
-      pincode: '',
-      gender: '',
-    };
-
-    setError(newError);
-
-    if (!profileData.firstname.trim())    newError.firstname     = 'Enter Name';
-    if (!profileData.lastname.trim())     newError.lastname      = 'This field is required';
-    if (!profileData.date_of_birth)       newError.date_of_birth = 'Enter DOB';
-    if (!profileData.gender)              newError.gender        = 'Select Gender';
-    if (!profileData.pincode)             newError.pincode       = 'Enter Valid Pincode';
-
-
-    if (!buttonState) {
-      // (optionally you could scroll to the first invalid field here)
-      return;
-    }
-
-    // Track button click
-    trackAbhaEvent({
-      name: 'create_profile_screen_clicks',
-      data: {
-        type: 'create_profile',
-      },
-    });
-
-    // Set loading state before navigation or API call
-    setIsLoading(LOADING_STATE.LOADING);
-
-    // Flow 1: Only creating Eka profile
-    if (topScreen === SCREEN_NAMES.CREATE_EKA_PROFILE) {
-      // If creating Eka profile, move to next screen to create ABHA address
-      trackAbhaEvent({
-        name: 'navigate_to_create_abha_address_screen',
-        data: {
-          type: 'next',
-          pincode_entered: profileData?.pincode ?? 'unknown',
-          eka_profile_info_pincode: ekaProfileInfo?.pincode ?? 'unknown',
-          flow_type: selectedFlowMethod || 'unknown_method',
-        },
-      });
-
-      if (selectedFlowMethod === ABHA_AUTH_FLOW_METHOD.MOBILE) {
-        const data = await getPincodeDetails({
-          pincode: Number(profileData.pincode),
-        });
-
-        if (data?.error) {
-          // Display error to user
-          setPincodeApiError(data?.error ? 'Invalid Pincode' : null);
-          setIsLoading(LOADING_STATE.REJECTED);
-          trackAbhaEvent({
-            name: 'pincode_api_failed',
-            data: {
-              type: 'error',
-              error: data?.error,
-            },
-          });
-          return;
-        }
-
-        trackAbhaEvent({
-          name: 'pincode_api_success',
-          data: {
-            type: 'verify',
-            pincode_received: !!data.pincode,
-            txn_id: txnId,
-          },
-        });
-
-        if (data?.pincode) {
-          setCreateProfileError(null);
-          setEkaProfileInfo(profileData);
-          trackAbhaEvent({
-            name: 'eka_profile_info_set',
-            data: {
-              firstname: profileData?.firstname,
-              lastname: profileData?.lastname,
-              gender: profileData?.gender,
-              pincode: profileData?.pincode,
-              date_of_birth: profileData?.date_of_birth,
-            },
-          });
-          setScreen(SCREEN_NAMES.CREATE_ABHA_ADDRESS);
-          return;
-        }
-
-        trackAbhaEvent({
-          name: 'no_action_on_pincode',
-          data: {
-            type: 'verify',
-            pincode_entered: !!data.pincode,
-            txn_id: txnId,
-          },
-        });
-
-        return;
-      } else if (selectedFlowMethod === ABHA_AUTH_FLOW_METHOD.AADHAR_NUMBER) {
-        setEkaProfileInfo(profileData);
-        trackAbhaEvent({
-          name: 'eka_profile_info_set',
-          data: {
-            firstname: profileData?.firstname,
-            lastname: profileData?.lastname,
-            gender: profileData?.gender,
-            pincode: profileData?.pincode,
-            date_of_birth: profileData?.date_of_birth,
-          },
-        });
-        setScreen(SCREEN_NAMES.CREATE_ABHA_ADDRESS);
-        return;
-      }
-    }
-
-    // Flow 2: Creating both PHR and Eka profile
-    if (topScreen === SCREEN_NAMES.CREATE_PHR_EKA_PROFILE) {
-      // Abort if ABHA address is missing
-      if (!selectedAbhaAddress) {
-        trackAbhaEvent({
-          name: 'abha_create_eka_profile_abha_address_missing',
-          data: {
-            platform: clientId,
-          },
-        });
-        return;
-      }
-      // Split date of birth string into day, month, year
-      const [year, month, day] = profileData.date_of_birth
-        ? profileData?.date_of_birth?.split('-')
-        : ['', '', ''];
-
-      // Construct profile data payload for ABDM API
-      const profileEkaData = {
-        abha_address: selectedAbhaAddress,
-        day_of_birth: parseInt(day),
-        first_name: profileData.firstname,
-        gender: profileData.gender,
-        last_name: profileData.lastname || '',
-        month_of_birth: parseInt(month),
-        pincode: profileData.pincode,
-        year_of_birth: parseInt(year),
-      };
-
-      trackAbhaEvent({
-        name: 'profile_eka_process_started',
-        data: {
-          platform: clientId,
-          date_of_birth: profileData?.date_of_birth || null,
-          dob_day: day || null,
-          dob_month: month || null,
-          dob_year: year || null,
-        },
-      });
-
-      // Call API to create Eka profile with PHR
-      const {
-        error: phrError,
-        eka,
-        action: errorAction,
-      } = await postAbdmProfileEka({ ...profileEkaData });
-
-      // If an actionable error is returned (e.g. show bottom sheet)
-      if (errorAction) {
-        trackAbhaEvent({
-          name: 'profile_eka_process_failed',
-          data: {
-            platform: clientId,
-            error_message: errorAction?.cta?.title || 'unknown_error',
-            error_message_exists: !!errorAction?.cta?.title,
-          },
-        });
-        setBottomsheetErrorInfo(errorAction);
-        return;
-      }
-
-      // If API fails or returns invalid Eka profile
-      if (phrError || !eka || !eka.oid) {
-        trackAbhaEvent({
-          name: 'profile_process_failed',
-          data: {
-            platform: clientId,
-            error_message: phrError || 'Unknown error',
-            eka_oid: eka?.oid || 'missing',
-            eka_exists: !!eka,
-            date_of_birth: profileData?.date_of_birth || 'missing',
-            dob_day: day || 'missing',
-            dob_month: month || 'missing',
-            dob_year: year || 'missing',
-            parsed_date_valid: Boolean(parseInt(day) && parseInt(month) && parseInt(year)),
-            firstname: profileData?.firstname || 'missing',
-            gender: profileData?.gender || 'missing',
-            pincode: profileData?.pincode || 'missing',
-          },
-        });
-        setIsLoading(LOADING_STATE.REJECTED);
-        setCreateProfileError(phrError || 'Something went wrong. Please try again.');
-        return;
-      }
-
-      trackAbhaEvent({
-        name: 'profile_eka_process_success',
-        data: {
-          platform: clientId,
-          eka: eka,
-        },
-      });
-
-      trackAbhaEvent({
-        name: 'profile_switch_process_started',
-        data: {
-          platform: clientId,
-          error_message: phrError,
-          eka: eka,
-        },
-      });
-
-      // Switch to newly created Eka profile
-      const profileSwitchResponse = await postProfileSwitchMutate({
-        oid: eka.oid,
-      });
-
-      // If profile switch fails
-      if (profileSwitchResponse.error) {
-        trackAbhaEvent({
-          name: 'profile_switch_process_failed',
-          data: {
-            platform: clientId,
-            error_message: profileSwitchResponse.error || 'Something went wrong, please try again',
-            error_message_exists: !!profileSwitchResponse.error,
-          },
-        });
-        setIsLoading(LOADING_STATE.REJECTED);
-        setCreateProfileError(
-          profileSwitchResponse.error?.message || 'Something went wrong, please try again'
-        );
-        return;
-      }
-
-      trackAbhaEvent({
-        name: 'profile_switch_process_success',
-        data: {
-          platform: clientId,
-          eka: eka,
-        },
-      });
-
-      // Profile switch success
-      setIsLoading(LOADING_STATE.RESOLVED);
-      return;
-    }
-  };
-
-  const handleErrorBottomsheetButtonClick = () => {
-    goBackLoginScreen();
-    const isAppLogin = useAuthAbhaStore.getState().isEkaAppLogin;
-    clearAbhaAuthStore();
-    useAuthAbhaStore.setState({ isEkaAppLogin: isAppLogin });
-  };
-
-  return (
-    <div className="pds2-w-full pds2-flex pds2-flex-col pds2-bg-bg-01 pds2-h-full">
-      <Pds2Header
-        title="Create ABHA Address"
-        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 className="" />
-          </button>
-        }
-        className="pds2-bg-bg-white"
-      />
-      <AbhaStepper/>
-      <div className="pds2-flex pds2-flex-col pds2-flex-1 pds2-p-8 pds2-overflow-y-auto">
-        <div className="pds2-flex pds2-items-center pds2-justify-between">
-          {/* <div className="pds2-space-y-2 pds2-text-text-01">
-            {isDocAppRequest ? (
-              <div className="Heading4Semibold">Create ABHA Profile</div>
-            ) : (
-              <>
-                <div className="Heading4Semibold">Create your</div>
-                <div className="Heading2Semibold">Eka Profile</div>
-              </>
-            )}
-          </div> */}
-          {/* <div className="pds2-relative">
-             <img src="/images/avatar.webp" alt="avatar" className="pds2-w-96 pds2-h-96" />
-             <button className="pds2-flex pds2-items-center pds2-space-x-4 pds2-text-text-brand pds2-px-8 pds2-py-4 pds2-border-1 pds2-border-border-brand-01 pds2-rounded-8 pds2-bg-bg-white pds2-absolute -pds2-bottom-12 pds2-right-6">
-               <CameraSolidIcon className="pds2-w-14 pds2-h-14" />
-               <div className="Label1Semibold pds2-min-w-max">Add photo</div>
-             </button>
-           </div> */}
-        </div>
-        <UserDetailsForm
-          profileData={profileData}
-          setProfileData={setProfileData}
-          error={error}
-          setError={setError}
-          pincodeApiError={pincodeApiError}
-        />
-      </div>
-      {createProfileError && (
-        <div className="pds2-p-16 pds2-text-text-error pds2-text-center">{createProfileError}</div>
-      )}
-      <div className="pds2-sticky pds2-bottom-0 pds2-bg-bg-white pds2-w-full">
-        {selectedAbhaAddress &&
-        aadhaarVerificationSkipStateStatus === ABHA_V3_SKIP_STATES.ABHA_END ? (
-          <div className="pds2-flex pds2-items-center pds2-justify-between pds2-w-full pds2-px-16 pds2-py-6 pds2-bg-border-brand-02">
-            <div className="">
-              <span className="pds2-text-text-03 Body2Regular">Creating for: </span>
-              <span className="pds2-text-text-01 Body2Semibold">{selectedAbhaAddress}</span>
-            </div>
-            <button
-              onClick={goBackLoginScreen}
-              className="Body2Semibold pds2-text-text-brand pds2-rounded-full ripple pds2-px-8 pds2-py-2"
-            >
-              Change
-            </button>
-          </div>
-        ) : null}
-        <div className="pds2-p-16 pds2-w-full">
-          <Pds2Button
-            className="pds2-w-full"
-            title="Create Profile"
-            state={isLoading === LOADING_STATE.LOADING ? 'disabled' : 'enabled'}
-            onClick={handleCreateProfileClick}
-            isLoading={isLoading === LOADING_STATE.LOADING}
-          />
-        </div>
-      </div>
-      <AbhaErrorBottomSheet onSubmitClick={handleErrorBottomsheetButtonClick} />
-      <ExitPopup open={isExitPopupOpen} setOpen={setIsExitPopupOpen} />
-    </div>
-  );
-};
-export default CreateEkaProfileScreen;
-
-const genders = [
-  { id: 'M', name: 'Male' },
-  { id: 'F', name: 'Female' },
-  { id: 'O', name: 'Other' },
-];
-
-type TProfileData = {
-  firstname: string;
-  lastname: string;
-  date_of_birth: string;
-  pincode: string;
-  gender: string;
-  oid?: string;
-};
-
-interface TProfileDataError extends TProfileData {}
-
-const UserDetailsForm = ({
-  profileData,
-  setProfileData,
-  error,
-  setError,
-  pincodeApiError,
-}: {
-  profileData: TProfileData;
-  setProfileData: (val: TProfileData) => void;
-  error: TProfileDataError;
-  setError: (val: TProfileDataError) => void;
-  pincodeApiError?: string | null;
-}) => {
-  const handleInputChange = ({
-    event,
-    name,
-  }: {
-    event: React.ChangeEvent<HTMLInputElement>;
-    name: string;
-  }) => {
-    const value = event.target.value;
-    let errorMsg = '';
-    switch (name) {
-      case 'firstname':
-        if (!value.trim()) errorMsg = 'This field is required';
-        else errorMsg = '';
-        break;
-      case 'lastname':
-        if (!value || value.length < 0) errorMsg = 'This field is required';
-        else errorMsg = '';
-        break;
-      case 'pincode':
-        if (!value || isNaN(Number(value)) || value.length != 6)
-          errorMsg = 'Pincode must consist of exactly 6 digits';
-        else errorMsg = '';
-        break;
-      case 'date_of_birth':
-        if (!value || value > new Date().toISOString().split('T')[0])
-          errorMsg = 'Date of Birth is invalid';
-        else errorMsg = '';
-        break;
-      default:
-        break;
-    }
-
-    setError({
-      ...error,
-      [name]: errorMsg,
-    });
-
-    setProfileData({
-      ...profileData,
-      [name]: value,
-    });
-  };
-
-  const handleGenderChange = (value: string) => {
-    setProfileData({
-      ...profileData,
-      gender: value,
-    });
-    setError({
-      ...error,
-      gender: '',
-    });
-  };
-
-  const isPincodeFieldErrorToBeShown = (profileData: any, ekaProfileInfo: any): boolean => {
-    // if ekaProfileInfo already has a pincode, skip the validation
-    if (ekaProfileInfo?.pincode) {
-      return false;
-    }
-
-    // Validate if firstName, gender, and date_of_birth are filled in profileData
-    const isProfileDataComplete =
-      (profileData.firstname ?? '').trim() !== '' &&
-      (profileData.gender ?? '').trim() !== '' &&
-      (profileData.date_of_birth ?? '').trim() !== '';
-
-    // If profileData is incomplete, skip pincode error check
-    if (!isProfileDataComplete) {
-      return false;
-    }
-
-    // Check if pincode is empty or invalid (check length and numeric)
-    if (!profileData.pincode || (profileData.pincode + '').length !== 6) {
-      return true; // Show error if pincode is missing or invalid
-    }
-
-    return false;
-  };
-
-  const ekaProfileInfo = useAuthAbhaStore((state) => state.ekaProfileInfo);
-  const selectedFlowMethod = useAuthAbhaStore((state) => state.abhaAuthFlowMethod);
-
-  return (
-    <form className="pds2-flex pds2-flex-col pds2-space-y-32 pds2-pt-16 pds2-px-16">
-      <label className="pds2-space-y-8">
-        <div className="Body3Medium pds2-text-text-04">
-          Your name
-          <span className="pds2-text-text-error Body3Semibold">*</span>
-        </div>
-        <div className="pds2-flex pds2-gap-8">
-          <div className="pds2-flex pds2-flex-col">
-            <Pds2InputField
-              isMandatory={true}
-              textColor="pds2-text-text-01"
-              padding="pds2-px-16 pds2-py-12"
-              borderRadius="pds2-rounded-12"
-              borderStyle="focus-within:pds2-ring-2 focus-within:pds2-ring-border-brand-01 focus-within:pds2-ring-offset-2"
-              placeholder="Firstname"
-              value={profileData.firstname}
-              onChange={e => handleInputChange({ event: e, name: 'firstname' })}
-              autoCapitalize="on"
-              disabled={
-                !!ekaProfileInfo?.firstname &&
-                selectedFlowMethod === ABHA_AUTH_FLOW_METHOD.AADHAR_NUMBER
-              }
-              error={error.firstname}
-            />
-            {error.firstname && (
-              <div className="Body3Medium pds2-text-text-error pds2-mt-4">
-                {error.firstname}
-              </div>
-            )}
-          </div>
-
-          <div>
-            <Pds2InputField
-              textColor="pds2-text-text-01"
-              padding="pds2-px-16 pds2-py-12"
-              borderRadius="pds2-rounded-12"
-              borderStyle="focus-within:pds2-ring-2 focus-within:pds2-ring-border-brand-01 focus-within:pds2-ring-offset-2"
-              placeholder="Lastname"
-              value={profileData.lastname}
-              onChange={e => handleInputChange({ event: e, name: 'lastname' })}
-              autoCapitalize="on"
-              disabled={
-                !!ekaProfileInfo?.lastname &&
-                selectedFlowMethod === ABHA_AUTH_FLOW_METHOD.AADHAR_NUMBER
-              }
-            />
-          </div>
-        </div>
-      </label>
-
-      <div className="pds2-space-y-8">
-        <div className="pds2-space-y-4">
-          <div className="Body3Medium pds2-text-text-04">
-            Gender
-            <span className="pds2-text-text-error Body3Semibold">*</span>
-          </div>
-          <div className="pds2-flex pds2-gap-16">
-            {genders.map((item, idx) => (
-              <div
-                key={idx}
-                className={`${
-                  error.gender
-                    ? 'pds2-border-2 pds2-rounded-12 pds2-border-text-error placeholder:pds2-text-text-error'
-                    : 'focus-within:pds2-ring-2 focus-within:pds2-ring-border-brand-01 focus-within:pds2-ring-offset-2 placeholder:pds2-text-text-04'
-                }`}
-              >
-                <Pds2SingleInputChip
-                  isSelected={item.id === profileData.gender}
-                  title={item.name}
-                  onSelect={() => handleGenderChange(item.id)}
-                />
-              </div>
-            ))}
-          </div>
-          {error.gender && (
-            <div className="Body3Medium pds2-text-text-error pds2-mt-2">
-              {error.gender}
-            </div>
-          )}
-        </div>
-
-
-        <div className="pds2-flex pds2-flex-col">
-          <Pds2InputField
-            label="Date of Birth"
-            isMandatory={true}
-            textColor="pds2-text-text-01"
-            padding="pds2-px-16 pds2-py-12"
-            borderRadius="pds2-rounded-12"
-            borderStyle="focus-within:pds2-ring-2 focus-within:pds2-ring-border-brand-01 focus-within:pds2-ring-offset-2"
-            value={profileData.date_of_birth}
-            disabled={
-              !!ekaProfileInfo?.date_of_birth &&
-              selectedFlowMethod === ABHA_AUTH_FLOW_METHOD.AADHAR_NUMBER
-            }
-            onChange={(e) =>
-              handleInputChange({ event: e, name: 'date_of_birth' })
-            }
-            type="date"
-            maxDate={new Date().toISOString().split('T')[0]}
-            error={error.date_of_birth}
-          />
-          {error.date_of_birth && (
-            <div className="Body3Medium pds2-text-text-error pds2-mt-2">
-              {error.date_of_birth}
-            </div>
-          )}
-        </div>
-      </div>
-
-
-      <div className="pds2-flex pds2-flex-col pds2-space-y-4">
-        <Pds2InputField
-          label="Pincode"
-          isMandatory={true}
-          textColor="pds2-text-text-01"
-          padding="pds2-px-16 pds2-py-12"
-          borderRadius="pds2-rounded-12"
-          borderStyle={
-            isPincodeFieldErrorToBeShown(profileData, ekaProfileInfo) || pincodeApiError
-              ? 'pds2-border-1 pds2-border-text-error'
-              : ''
-          }
-          value={profileData.pincode}
-          placeholder="Enter Pincode"
-          disabled={
-            !!ekaProfileInfo?.pincode && selectedFlowMethod === ABHA_AUTH_FLOW_METHOD.AADHAR_NUMBER
-          }
-          onChange={(e) => {
-            if (e.target.value.length > 6) return;
-            handleInputChange({ event: e, name: 'pincode' });
-          }}
-          type="number"
-          error={
-            isPincodeFieldErrorToBeShown(profileData, ekaProfileInfo) ? error.pincode : ''
-          }
-          textStyle={
-            isPincodeFieldErrorToBeShown(profileData, ekaProfileInfo) || pincodeApiError
-              ? 'placeholder:pds2-text-text-error'
-              : 'placeholder:pds2-text-text-04'
-          }
-        />
-        {pincodeApiError || error.pincode && (
-          <div className="Body3Medium pds2-text-text-error pds2-mt-4">{error.pincode}</div>
-        )}
-      </div>
-    </form>
-  );
-};