@eka-care/abha-stg 0.0.40 → 0.1.0

package/src/routes/abha-login-otp-verify-screen.tsx

@@ -0,0 +1,519 @@
+import { ArrowLeftRegularIcon, EkaIcon } from '@eka-care/icons';
+import { useState, useEffect } from 'react';
+import usePostAuthVerifyV2 from '../api-queries/use-post-auth-verify-v2';
+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 usePostAbdmLoginVerify from '../api-queries/use-post-abdm-login-verify-v1';
+import ExitPopup from '../molecules/exit-popup';
+import { onAbhaSuccess, unMount } from '../main';
+import handleSendEvent from '../utils/send-event-utils';
+import { getMockAuthVerifyResponse } from '../utils/mock-auth-response';
+import AbhaStepper from '../organisms/abha/abha-stepper';
+import { ABHA_AUTH_FLOW_METHOD, ABHA_V3_SKIP_STATES, GET_EXTRA_HEADERS, LOADING_STATE, TProfileRecord } from '../constants/constants';
+import postAbdmLoginInit from '../api-queries/ndhm/post-abdm-login-init';
+
+const AbhaLoginOtpVerifyScreen = () => {
+  const authTxnId = useAuthAbhaStore((state) => state.authTxnId);
+  const txnId = useAuthAbhaStore((state) => state.txnId);
+  const setAbhaAddressList = useAuthAbhaStore((state) => state.setAbhaAddressList);
+  const clearAbhaAuthStore = useAuthAbhaStore((state) => state.clearAbhaAuthStore);
+  const aadhaarOtpSentToHint = useAuthAbhaStore((state) => state.aadhaarOtpSentToHint);
+  const loginIdentifierValue = useAuthAbhaStore((state) => state.loginIdentifierValue);
+  const abhaAuthFlowMethod = useAuthAbhaStore((state) => state.abhaAuthFlowMethod);
+  const setScreen = useAuthAbhaStore((state) => state.setScreen);
+  const goBackLoginScreen = useAuthAbhaStore((state) => state.goBackLoginScreen);
+  const setTxnId = useAuthAbhaStore((state) => state.setTxnId);
+  const setBottomsheetErrorInfo = useAuthAbhaStore((state) => state.setBottomsheetErrorInfo);
+  const [isExitPopupOpen, setIsExitPopupOpen] = useState<boolean>(false);
+  const setEkaProfileInfo = useAuthAbhaStore((state) => state.setEkaProfileInfo);
+  const setAadhaarVerificationSkipStateStatus = useAuthAbhaStore(
+    (state) => state.setAadhaarVerificationSkipStateStatus
+  );
+  const setSelectedAbhaAddress = useAuthAbhaStore((state) => state.setSelectedAbhaAddress);
+
+  const [otp, setOtp] = useState('');
+  const [isOtpValid, setIsOtpValid] = useState(false);
+  const [error, setError] = useState<string | null>('');
+  const [abdmLoginVerifyApiStatus, setAbdmLoginVerifyApiStatus] = useState<LOADING_STATE>(
+    LOADING_STATE.IDLE
+  );
+  const validGenders = ['M', 'F', 'O', 'U'] as const;
+
+  const { mutateAsync: postAuthVerifyV2Mutate } = usePostAuthVerifyV2();
+  const { mutateAsync: postAbdmLoginVerify } = usePostAbdmLoginVerify();
+  const isEkaAppLogin = useAuthAbhaStore((state) => state.isEkaAppLogin);
+  const clientId = useAuthAbhaStore((state) => state.clientId);
+  const oid = useAuthAbhaStore((state) => state.oid);
+  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',
+    };
+
+    const eventData = {
+      ...baseProps,
+      ...data,
+    };
+
+    handleSendEvent({
+      eventName: name,
+      eventData,
+    });
+
+    window.curio?.pushToMixpanel?.(name, eventData);
+  };
+
+  useEffect(() => {
+    trackAbhaEvent({
+      name: 'page_view',
+      data: {
+        page_view: 'abha_login_otp_verify',
+        platform: clientId,
+      },
+    });
+  }, []);
+
+  const handleErrorBottomsheetButtonClick = () => {
+    trackAbhaEvent({
+      name: 'abha_login_otp_verify_error_bottomsheet_dismissed',
+      data: { platform: clientId },
+    });
+    goBackLoginScreen();
+    const isAppLogin = useAuthAbhaStore.getState().isEkaAppLogin;
+    clearAbhaAuthStore();
+    useAuthAbhaStore.setState({ isEkaAppLogin: isAppLogin });
+  };
+
+  const handleOtpCompletion = ({ otp: newOtp }: { otp: string }) => {
+    setOtp(newOtp);
+    trackAbhaEvent({
+      name: 'abha_login_otp_completion',
+      data: {
+        type: 'verify',
+        platform: clientId,
+        txn_id: txnId,
+        otp_entered: true,
+        method: abhaAuthFlowMethod,
+      },
+    });
+    handleVerifyClick(newOtp);
+  };
+
+  const handleVerifyClick = async (otpToSubmit: string) => {
+    if (!txnId) {
+      trackAbhaEvent({
+        name: 'abha_login_otp_verify_txnId_not_found',
+        data: {
+          type: 'verify',
+          platform: clientId,
+          txn_id: txnId || 'missing_txn_id',
+          txn_id_exists: !!txnId,
+          method: abhaAuthFlowMethod?.toLowerCase() || 'unknown_method',
+        },
+      });
+      return;
+    }
+    trackAbhaEvent({
+      name: 'abha_login_otp_verify',
+      data: {
+        type: 'verify',
+        platform: clientId,
+        txn_id: txnId,
+      },
+    });
+
+    setAbdmLoginVerifyApiStatus(LOADING_STATE.LOADING);
+    const {
+      abha_profiles = [],
+      skip_state,
+      profile,
+      error: verifyError,
+      action: errorAction,
+      eka,
+    } = await postAbdmLoginVerify({ otp: otpToSubmit, txn_id: txnId });
+
+    if (errorAction) {
+      trackAbhaEvent({
+        name: 'abha_login_otp_verify_error_action',
+        data: {
+          type: 'verify',
+          platform: clientId,
+          error_action: errorAction || 'no_error_action',
+          error_message: verifyError || 'no_error_message',
+          error_action_exists: !!errorAction,
+          error_message_exists: !!verifyError,
+        },
+      });
+      setBottomsheetErrorInfo(errorAction);
+      return;
+    }
+
+    if (verifyError) {
+      trackAbhaEvent({
+        name: 'abha_login_otp_verify_error',
+        data: {
+          type: 'verify',
+          platform: clientId,
+          error_message: verifyError || 'unknown_error',
+          error_message_exists: !!verifyError,
+        },
+      });
+      setAbdmLoginVerifyApiStatus(LOADING_STATE.REJECTED);
+      setError(verifyError);
+      return;
+    }
+
+    if (!skip_state) {
+      setError('Skip State is missing');
+      trackAbhaEvent({
+        name: 'abha_login_skip_state_missing',
+        data: {
+          platform: clientId,
+          skipState: skip_state || 'missing_skip_state',
+          skipState_exists: !!skip_state,
+        },
+      });
+      return;
+    }
+
+    setAadhaarVerificationSkipStateStatus(skip_state);
+    if (profile) {
+      setSelectedAbhaAddress(profile.abha_address);
+    }
+
+    // if profile data exists, then set in store
+    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,
+      });
+    }
+
+    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,
+      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 || '',
+    };
+
+    // ABHA_V3_SKIP_STATES.ABHA_END
+    if (skip_state === ABHA_V3_SKIP_STATES.ABHA_END) {
+      /**
+       * check for min_token and oid
+       *  if min_token is present, call auth verify
+       *  if not show error
+       */
+      // if the auth token and oid is present in the headers, then do not trigger auth verify api
+      if (isEkaAppLogin) {
+        trackAbhaEvent({
+          name: 'abha_login_otp_verify_eka_app',
+          data: {
+            type: 'verify',
+            platform: clientId,
+            txn_id: txnId,
+            skip_state: skip_state,
+          },
+        });
+        setAbdmLoginVerifyApiStatus(LOADING_STATE.RESOLVED);
+        if (!eka) {
+          trackAbhaEvent({
+            name: 'abha_login_otp_verify_eka_app_error',
+            data: {
+              type: 'null_oid',
+              platform: clientId,
+              txn_id: txnId || 'missing_txn_id',
+              txn_id_exists: !!txnId,
+              eka: eka || 'missing_eka',
+              eka_exists: !!eka,
+              skip_state: skip_state || 'missing_skip_state',
+              skip_state_exists: !!skip_state,
+            },
+          });
+          setAbdmLoginVerifyApiStatus(LOADING_STATE.REJECTED);
+          setError('Something went wrong, please try again');
+          return;
+        }
+
+        const authResponse = getMockAuthVerifyResponse(authProfile);
+        // for ios specific handling
+        trackAbhaEvent({
+          name: 'abha_login_otp_verify_success',
+          data: {
+            type: 'verify',
+            platform: clientId,
+            txn_id: txnId,
+            skip_state: skip_state,
+            method: abhaAuthFlowMethod,
+          },
+        });
+        if (window.EkaAbha && window.EkaAbha.onAbhaSuccess) {
+          window.EkaAbha?.onAbhaSuccess(JSON.stringify({ response: authResponse }));
+          return;
+        }
+        //@ts-ignore
+        onAbhaSuccess({ response: authResponse });
+        unMount();
+        return;
+      }
+      if (!eka || !eka.min_token || !authTxnId) {
+        trackAbhaEvent({
+          name: 'abha_login_otp_verify_eka_error',
+          data: {
+            type: 'verify',
+            platform: clientId,
+            eka: eka || 'missing_eka',
+            eka_exists: !!eka,
+            auth_txnId: authTxnId || 'missing_auth_txnId',
+            auth_txnId_exists: !!authTxnId,
+            skip_state: skip_state || 'missing_skip_state',
+            skip_state_exists: !!skip_state,
+          },
+        });
+        setAbdmLoginVerifyApiStatus(LOADING_STATE.REJECTED);
+        setError('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_otp_verify_auth_verify_error',
+          data: {
+            type: 'verify',
+            platform: clientId,
+            skip_state: skip_state || 'missing_skip_state',
+            skip_state_exists: !!skip_state,
+            auth_verify_data_exists: false,
+          },
+        });
+        setAbdmLoginVerifyApiStatus(LOADING_STATE.REJECTED);
+        setError(authVerifyResponse.error?.message || 'Something went wrong, please try again');
+        return;
+      }
+
+      trackAbhaEvent({
+        name: 'abha_login_otp_verify_abha_end_success',
+        data: {
+          type: 'verify',
+          platform: clientId,
+          txn_id: txnId,
+          skip_state: skip_state,
+        },
+      });
+      setAbdmLoginVerifyApiStatus(LOADING_STATE.RESOLVED);
+      return;
+    }
+
+    // ABHA_V3_SKIP_STATES.ABHA_SELECT
+    if (skip_state === ABHA_V3_SKIP_STATES.ABHA_SELECT && abha_profiles.length > 0) {
+      trackAbhaEvent({
+        name: 'abha_login_otp_verify_abha_select',
+        data: {
+          type: 'verify',
+          platform: clientId,
+        },
+      });
+      setScreen(SCREEN_NAMES.SELECT_ABHA_FROM_LIST);
+      setAbhaAddressList(abha_profiles);
+      return;
+    }
+
+    // ABHA_V3_SKIP_STATES.ABHA_CREATE && LOGIN METHOD IS MOBILE
+    if (
+      skip_state === ABHA_V3_SKIP_STATES.ABHA_CREATE &&
+      abhaAuthFlowMethod === ABHA_AUTH_FLOW_METHOD.MOBILE
+    ) {
+      setScreen(SCREEN_NAMES.CREATE_EKA_PROFILE);
+      return;
+    }
+
+    // ABHA_V3_SKIP_STATES.ABHA_CREATE && LOGIN METHOD IS ABHA NUMBER
+    if (skip_state === ABHA_V3_SKIP_STATES.ABHA_CREATE) {
+      setScreen(SCREEN_NAMES.CREATE_ABHA_ADDRESS);
+      return;
+    }
+
+    // if the auth token and oid is present in the headers, then do not trigger auth verify api
+    if (isEkaAppLogin) {
+      if (!eka) {
+        trackAbhaEvent({
+          name: 'abha_login_otp_verify_eka_failed',
+          data: {
+            type: 'verify',
+            platform: clientId,
+            txn_id: authTxnId || 'missing_authTxnId',
+            txn_id_exists: !!authTxnId,
+          },
+        });
+        setAbdmLoginVerifyApiStatus(LOADING_STATE.REJECTED);
+        setError('Something went wrong, please try again');
+        return;
+      }
+      const authResponse = getMockAuthVerifyResponse(authProfile);
+
+      setAbdmLoginVerifyApiStatus(LOADING_STATE.RESOLVED);
+      // for ios specific handling
+      if (window.EkaAbha && window.EkaAbha.onAbhaSuccess) {
+        window.EkaAbha?.onAbhaSuccess(JSON.stringify({ response: authResponse }));
+        return;
+      }
+      //@ts-ignore
+      onAbhaSuccess({ response: authResponse });
+      unMount();
+      return;
+    }
+
+    if (!skip_state || !eka?.min_token) {
+      setAbdmLoginVerifyApiStatus(LOADING_STATE.REJECTED);
+      setError(verifyError || 'Something went wrong, please try again');
+      if (errorAction) {
+        setBottomsheetErrorInfo(errorAction);
+      }
+      return;
+    }
+
+    if (eka.min_token && authTxnId) {
+      const authVerifyResponse = await postAuthVerifyV2Mutate({
+        txn_id: authTxnId,
+        token: eka.min_token,
+      });
+
+      if (!authVerifyResponse.data) {
+        trackAbhaEvent({
+          name: 'abha_login_auth_verify_failed',
+          data: {
+            platform: clientId,
+            txn_id: authTxnId || 'missing_authTxnId',
+            txn_id_exists: !!authTxnId,
+            error_message: authVerifyResponse?.error?.message || 'unknown_error',
+            error_message_exists: !!authVerifyResponse?.error?.message,
+          },
+        });
+        setAbdmLoginVerifyApiStatus(LOADING_STATE.REJECTED);
+        setError(authVerifyResponse.error?.message || 'Something went wrong, please try again');
+      } else {
+        trackAbhaEvent({
+          name: 'abha_login_auth_verify_success',
+          data: {
+            platform: clientId,
+            txn_id: authTxnId,
+          },
+        });
+      }
+    }
+
+    setAbdmLoginVerifyApiStatus(LOADING_STATE.RESOLVED);
+  };
+
+  const handleResendOtpClick = async () => {
+    if (loginIdentifierValue && abhaAuthFlowMethod) {
+      const { txn_id } = await postAbdmLoginInit({
+        method: abhaAuthFlowMethod,
+        identifier: loginIdentifierValue,
+      });
+      trackAbhaEvent({
+        name: 'abha_login_verify_resend_otp',
+        data: {
+          method: abhaAuthFlowMethod,
+          platform: clientId,
+          txn_id: txn_id,
+        },
+      });
+      if (txn_id) {
+        setTxnId(txn_id);
+      }
+    }
+  };
+
+  return (
+    <div className="pds2-flex pds2-flex-col pds2-w-full pds2-h-full pds2-bg-bg-white">
+      <AbhaHeader
+        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>
+        }
+        title="OTP Verification"
+        suffixIcon={<EkaIcon className="pds2-w-20 pds2-h-20" />}
+        className="pds2-border-b-1 pds2-border-bg-seperator-dark"
+      />
+      <AbhaStepper/>
+      <div className="pds2-p-16 pds2-space-y-16 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}
+          error={error}
+          setIsValid={(val) => {
+            error && setError(null);
+            setIsOtpValid(val);
+          }}
+          prefixIcon={
+            <img
+              src="https://cdn.eka.care/vagus/cm6hreldp000b0tfwf0nj156l.webp"
+              alt="abha"
+              className="pds2-w-48"
+            />
+          }
+        />
+      </div>
+      {/* removing this error , since it is handled inside otp card */}
+      {/* {error && <div className="pds2-p-16 pds2-text-text-error pds2-text-center">{error}</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={!isOtpValid || abdmLoginVerifyApiStatus === LOADING_STATE.LOADING ? 'disabled' : 'enabled'}
+          className="pds2-w-full"
+          onClick={() => handleVerifyClick(otp)}
+          isLoading={abdmLoginVerifyApiStatus === LOADING_STATE.LOADING}
+        />
+      </div>
+
+      <AbhaErrorBottomSheet onSubmitClick={handleErrorBottomsheetButtonClick} />
+      <ExitPopup open={isExitPopupOpen} setOpen={setIsExitPopupOpen} />
+    </div>
+  );
+};
+
+export default AbhaLoginOtpVerifyScreen;