@eka-care/abha-stg 0.0.40 → 0.1.0

package/src/routes/abha-phone-number-verification-screen.tsx

@@ -0,0 +1,388 @@
+import { GET_EXTRA_HEADERS, LOADING_STATE } from '../constants/constants';
+import { 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 { useEffect } from 'react';
+import { ArrowLeftRegularIcon, CircleInfoSolidIcon } from '@eka-care/icons';
+import AbhaStepper from '../organisms/abha/abha-stepper';
+import ExitPopup from '../molecules/exit-popup';
+import handleSendEvent from '../utils/send-event-utils';
+import postAbdmRegisterMobileResendOtp from '../api-queries/ndhm/post-abdm-register-mobile-resend-otp';
+import postRegisterAadhaarMobileResendOtp from '../api-queries/ndhm/post-register-aadhaar-mobile-resend-otp';
+import postAbdmRegisterMobileVerify from '../api-queries/ndhm/post-abdm-register-mobile-verify';
+import postRegisterAadhaarMobileVerify from '../api-queries/ndhm/post-register-aadhaar-mobile-verify';
+
+const AbhaPhoneNumberVerificationScreen = () => {
+  const txnId = useAuthAbhaStore((state) => state.txnId);
+  const clearAbhaAuthStore = useAuthAbhaStore((state) => state.clearAbhaAuthStore);
+  const setBottomsheetErrorInfo = useAuthAbhaStore((state) => state.setBottomsheetErrorInfo);
+  const setEkaSmallToken = useAuthAbhaStore((state) => state.setEkaSmallToken);
+  const setOid = useAuthAbhaStore((state) => state.setOid);
+  const setAadhaarVerificationSkipStateStatus = useAuthAbhaStore(
+    (state) => state.setAadhaarVerificationSkipStateStatus
+  );
+  const setSelectedAbhaAddress = useAuthAbhaStore((state) => state.setSelectedAbhaAddress);
+
+  const setAbhaAddressList = useAuthAbhaStore((state) => state.setAbhaAddressList);
+  const setScreen = useAuthAbhaStore((state) => state.setScreen);
+  const selectedMethod = useAuthAbhaStore((state) => state.abhaAuthFlowMethod);
+
+  const [otp, setOtp] = useState('');
+  const [isOtpValid, setIsOtpValid] = useState(false);
+  const [error, setError] = useState<string | null>('');
+
+  const [aadhaarMobileVerifyApiStatus, setAadhaarMobileVerifyApiStatus] = useState<LOADING_STATE>(
+    LOADING_STATE.IDLE
+  );
+  const setTxnId = useAuthAbhaStore((state) => state.setTxnId);
+
+  const setEkaProfileInfo = useAuthAbhaStore((state) => state.setEkaProfileInfo);
+  const clientId = useAuthAbhaStore((state) => state.clientId);
+  const selectedAbhaFlow = useAuthAbhaStore((state) => state.selectedAbhaFlow);
+  const isNewLoginOrCreateFlow = useAuthAbhaStore((state) => state.isNewLoginOrCreateFlow);
+  const isEkaAppLogin = useAuthAbhaStore((state) => state.isEkaAppLogin);
+  const extra_headers = GET_EXTRA_HEADERS();
+  const [isExitPopupOpen, setIsExitPopupOpen] = useState<boolean>(false);
+
+  console.log('selectedAbhaFlow is : ', selectedAbhaFlow);
+
+  // 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(() => {
+    trackAbhaEvent({
+      name: 'page_view',
+      data: {
+        page_view: 'abha_mobile_otp_verify',
+        platform: clientId,
+      },
+    });
+  }, []);
+
+  const handleOtpCompletion = ({ otp: newOtp }: { otp: string }) => {
+    setOtp(newOtp);
+    trackAbhaEvent({
+      name: 'abha_mobile_otp_completion',
+      data: {
+        platform: clientId,
+        type: 'verify',
+        otp_entered: true,
+      },
+    });
+    handleVerifyClick(newOtp);
+  };
+
+  const handleResendOtpClick = async () => {
+    if (!txnId) {
+      trackAbhaEvent({
+        name: 'abha_mobile_otp_resend_clicked_no_txnId',
+        data: {
+          type: 'resend',
+          platform: clientId,
+          txn_id: 'missing_txnId',
+          txn_id_exists: false,
+        },
+      });
+      return;
+    }
+
+    trackAbhaEvent({
+      name: 'abha_mobile_otp_verify_clicks',
+      data: {
+        type: 'resend',
+        platform: clientId,
+      },
+    });
+
+    console.log('selectedMethod', selectedMethod);
+    let response;
+    if (selectedAbhaFlow === 'mobile') {
+      trackAbhaEvent({
+        name: 'abha_mobile_otp_resend_initiated',
+        data: {
+          platform: clientId,
+          type: 'verify',
+          flow_type: selectedAbhaFlow,
+        },
+      });
+      console.log('selectedFlow is mobile, so triggering mobile resend otp api', selectedAbhaFlow);
+      response = await postAbdmRegisterMobileResendOtp({
+        txn_id: txnId,
+      });
+    } else {
+      trackAbhaEvent({
+        name: 'aadhaar_mobile_otp_resend_initiated',
+        data: {
+          platform: clientId,
+          type: 'verify',
+          flow_type: selectedAbhaFlow,
+        },
+      });
+      console.log(
+        'selectedFlow is aadhaar, so triggering aadhaar resend otp api',
+        selectedAbhaFlow
+      );
+      response = await postRegisterAadhaarMobileResendOtp({
+        txn_id: txnId,
+      });
+    }
+
+    const { txn_id, error: resendOtpError, action: errorAction } = response;
+
+    if (!txn_id) {
+      trackAbhaEvent({
+        name: 'abha_mobile_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;
+    }
+
+    if (txn_id) {
+      setTxnId(txn_id);
+    }
+
+    trackAbhaEvent({
+      name: 'abha_mobile_otp_resend_success',
+      data: {
+        platform: clientId,
+        txn_id: txn_id,
+      },
+    });
+  };
+
+  const handleVerifyClick = async (otpToSubmit: string) => {
+    if (!txnId) {
+      trackAbhaEvent({
+        name: 'abha_mobile_verify_no_txnId',
+        data: {
+          type: 'verify',
+          platform: clientId,
+          txn_id: 'missing_txnId',
+          txn_id_exists: false,
+        },
+      });
+      return;
+    }
+
+    trackAbhaEvent({
+      name: 'abha_mobile_otp_submitted',
+      data: {
+        type: 'verify',
+        platform: clientId,
+        txn_id: txnId,
+      },
+    });
+
+    setAadhaarMobileVerifyApiStatus(LOADING_STATE.LOADING);
+
+    try {
+      let response;
+      if (selectedAbhaFlow === 'mobile') {
+        trackAbhaEvent({
+          name: 'abha_mobile_otp_verification_started',
+          data: {
+            platform: clientId,
+            flow_type: selectedAbhaFlow,
+          },
+        });
+        response = await postAbdmRegisterMobileVerify({
+          otp: otpToSubmit,
+          txn_id: txnId,
+        });
+      } else {
+        trackAbhaEvent({
+          name: 'aadhaar_otp_verification_started',
+          data: {
+            platform: clientId,
+            flow_type: selectedAbhaFlow,
+          },
+        });
+
+        response = await postRegisterAadhaarMobileVerify({
+          otp: otpToSubmit,
+          txn_id: txnId,
+        });
+      }
+
+      const {
+        txn_id,
+        skip_state,
+        eka,
+        profile,
+        error: verifyError,
+        action: errorAction,
+        abha_profiles,
+      } = response;
+
+      if (!txn_id || !skip_state) {
+        trackAbhaEvent({
+          name: 'abha_mobile_otp_verification_failed',
+          data: {
+            platform: clientId,
+            reason: verifyError || 'missing_txn_id_or_skip_state',
+            txn_id_exists: !!txn_id,
+            skip_state_exists: !!skip_state,
+          },
+        });
+        setAadhaarMobileVerifyApiStatus(LOADING_STATE.REJECTED);
+        setError(verifyError || 'Something went wrong, please try again');
+        if (errorAction) {
+          setBottomsheetErrorInfo(errorAction);
+        }
+        return;
+      }
+      setAadhaarMobileVerifyApiStatus(LOADING_STATE.RESOLVED);
+      setAadhaarVerificationSkipStateStatus(skip_state);
+      if (eka?.min_token) {
+        setEkaSmallToken(eka.min_token);
+      }
+      if (eka?.oid) {
+        setOid(eka.oid);
+      }
+
+      if (profile && profile.abha_address) {
+        setSelectedAbhaAddress(profile.abha_address);
+      }
+
+      if (profile) {
+        setEkaProfileInfo({
+          // date_of_birth: `${profile.day_of_birth}-${profile.month_of_birth}-${profile.year_of_birth}` as string,
+          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,
+          gender: profile.gender as string,
+          oid: eka?.oid,
+          abha_address: profile?.abha_address,
+          abha_number: profile?.abha_number,
+          middlename: profile?.middle_name,
+        });
+      }
+
+      // abha -> create abha with mobile
+      // HMIS -> when we are creating a new patient profile, we wont have oid in the headers.
+      // so server will send oid in the eka object.
+      // set the oid in the headers and redirect to abha mobile linking status screen
+
+      console.log('remove oid from set indvidual env')
+
+      trackAbhaEvent({
+        name: 'abha_mobile_otp_verification_success',
+        data: {
+          platform: clientId,
+          skip_state,
+        },
+      });
+      if (abha_profiles?.length) {
+        setAbhaAddressList(abha_profiles);
+        setScreen(SCREEN_NAMES.SELECT_ABHA_FROM_LIST);
+        return;
+      }
+      setScreen(SCREEN_NAMES.ABHA_MOBILE_LINKING_STATUS);
+    } catch (error) {
+      trackAbhaEvent({
+        name: 'abha_mobile_otp_verification_exception',
+        data: {
+          platform: clientId,
+          reason: 'exception_thrown',
+        },
+      });
+
+      setAadhaarMobileVerifyApiStatus(LOADING_STATE.REJECTED);
+      setError('Something went wrong, please try again');
+    }
+  };
+
+  const handleErrorBottomsheetButtonClick = () => {
+    setScreen(SCREEN_NAMES.CREATE_ABHA_WITH_AADHAAR);
+    const isAppLogin = useAuthAbhaStore.getState().isEkaAppLogin;
+    clearAbhaAuthStore();
+    useAuthAbhaStore.setState({ isEkaAppLogin: isAppLogin });
+  };
+
+  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="Phone Number Verification"
+        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="Enter OTP received through ABDM to verify mobile number"
+        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>
+      <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 || aadhaarMobileVerifyApiStatus === LOADING_STATE.LOADING )? 'disabled' : 'enabled'}
+          className="pds2-w-full"
+          onClick={() => handleVerifyClick(otp)}
+          isLoading={aadhaarMobileVerifyApiStatus === LOADING_STATE.LOADING}
+        />
+      </div>
+      <AbhaErrorBottomSheet onSubmitClick={handleErrorBottomsheetButtonClick} />
+      <ExitPopup open={isExitPopupOpen} setOpen={setIsExitPopupOpen} />
+    </div>
+  );
+};
+
+export default AbhaPhoneNumberVerificationScreen;