@eka-care/abha-stg 0.1.34 → 0.1.35

package/src/routes/login-with-abha-screen.tsx

@@ -0,0 +1,454 @@
+import { ChevronDownRegularIcon, PhoneSolidIcon, ArrowLeftRegularIcon } from '@eka-care/icons';
+import {
+  ABHA_AUTH_FLOW_METHOD,
+  AUTH_METHOD,
+  LOADING_STATE,
+  REGISTRATION_TYPE,
+} from '../constants/constants';
+import React, { useCallback, useEffect, useState } from 'react';
+import Pds2Button from '../atoms/button';
+import Pds2Header from '../atoms/header';
+import Pds2CustomButton from '../atoms/button/custom-button';
+import Pds2InputField from '../atoms/input-field';
+import TextSeparator from '../atoms/text-separator';
+import SpacedInputComponent from '../molecules/abha/spaced-input-component';
+import useAuthAbhaStore from '../stores/auth-abha-store';
+import { SCREEN_NAMES } from '../stores/auth-abha-store/types';
+import AbhaErrorBottomSheet from '../organisms/abha/error-bottom-sheet';
+import { unMount } from '../main';
+import AbhaStepper from '../organisms/abha/abha-stepper';
+import handleSendEvent from '../utils/send-event-utils';
+import postAbdmLoginInit from '../api-queries/ndhm/post-abdm-login-init';
+import postAuthInitV2 from '../api-queries/aorta-go/v3/post-auth-init-v2';
+import postAuthLogoutV2 from '../api-queries/aorta-go/v3/post-auth-logout-v2';
+
+const isProd = import.meta.env.VITE_APP_ENV === 'PROD';
+
+const LoginWithAbhaScreen = () => {
+  const setAbhaAuthFlowMethod = useAuthAbhaStore((state) => state.setAbhaAuthFlowMethod);
+  const clientId = useAuthAbhaStore((state) => state.clientId);
+  const clearAbhaAuthStore = useAuthAbhaStore((state) => state.clearAbhaAuthStore);
+  useEffect(() => {
+    handleSendEvent({
+      eventName: 'page_view',
+      eventData: {
+        page_view: 'abha_login_screen',
+        platform: clientId,
+      },
+    });
+
+    // mobile number as default method
+    setAbhaAuthFlowMethod(ABHA_AUTH_FLOW_METHOD.MOBILE);
+
+    if (window.EkaAbha?.changeStatusBarColor) {
+      window.EkaAbha.changeStatusBarColor('#F2F4F7');
+      return () => {
+        if (window.EkaAbha?.changeStatusBarColor) window?.EkaAbha?.changeStatusBarColor('#FFFFFF');
+      };
+    }
+  }, []);
+
+  const handleBackButtonClick = () => {
+    window.EkaAbha?.onAbhaClose();
+    const is_new_login_flow = useAuthAbhaStore.getState().isNewLoginOrCreateFlow;
+    clearAbhaAuthStore();
+    useAuthAbhaStore.setState({ isNewLoginOrCreateFlow: is_new_login_flow });
+    unMount();
+  };
+
+  const hideBackButtonFor = ['eka-web', 'phr'];
+
+  return (
+    <div className="pds2-bg-bg-white pds2-h-full">
+      {/* * if clientId is eka-web or phr, do not show back button */}
+      {!hideBackButtonFor.includes(clientId) && (
+        <Pds2Header
+          prefixIcon={
+            <button onClick={handleBackButtonClick}>
+              <ArrowLeftRegularIcon />
+            </button>
+          }
+          title=""
+          className="pds2-bg-bg-01"
+        />
+      )}
+      <AbhaStepper/>
+      <LoginWithDifferentMethods />
+      <OtherLoginMethods />
+    </div>
+  );
+};
+
+export default LoginWithAbhaScreen;
+
+export const OtherLoginMethods = () => {
+  const setAbhaAuthFlowMethod = useAuthAbhaStore((state) => state.setAbhaAuthFlowMethod);
+  const selectedMethod = useAuthAbhaStore((state) => state.abhaAuthFlowMethod);
+
+  const loginMethods = [
+    {
+      method: ABHA_AUTH_FLOW_METHOD.ABHA_NUMBER,
+      title: 'ABHA Number',
+      icon: (
+        <img
+          src="https://cdn.eka.care/vagus/cm4ml1lwu00000tfs1okl7hs9.webp"
+          alt="ABHA Number Icon"
+          className="pds2-h-24 pds2-w-24"
+          loading="lazy"
+        />
+      ),
+    },
+    {
+      method: ABHA_AUTH_FLOW_METHOD.PHR_ADDRESS,
+      title: 'ABHA Address',
+      icon: (
+        <img
+          src="https://cdn.eka.care/vagus/cm4ml1lwu00000tfs1okl7hs9.webp"
+          alt="ABHA Address Icon"
+          className="pds2-h-24 pds2-w-24"
+          loading="lazy"
+        />
+      ),
+    },
+    {
+      method: ABHA_AUTH_FLOW_METHOD.AADHAR_NUMBER,
+      title: 'Aadhaar Number',
+      icon: (
+        <img
+          src="https://cdn.eka.care/vagus/cm5mcdm3h00070tfs9fjkepff.webp"
+          alt="Aadhaar Number Icon"
+          className="pds2-h-24 pds2-w-24"
+          loading="lazy"
+        />
+      ),
+    },
+    {
+      method: ABHA_AUTH_FLOW_METHOD.MOBILE,
+      title: 'Mobile Number',
+      icon: <PhoneSolidIcon className="pds2-w-20 pds2-h-20 pds2-text-icon-success-02" />,
+    },
+  ];
+
+  return (
+    <div className="pds2-p-16 pds2-space-y-16">
+      <TextSeparator title="Other login options for ABHA" />
+      <div className="pds2-space-y-16">
+        {loginMethods
+          .filter((item) => item.method !== selectedMethod)
+          .map((item) => (
+            <Pds2CustomButton
+              key={item.method}
+              prefixIcon={item.icon}
+              title={item.title}
+              suffixIcon={
+                <ChevronDownRegularIcon
+                  className="pds2-ml-auto pds2-h-16 pds2-w-16 pds2-text-text-04 -pds2-rotate-90"
+                  aria-hidden="true"
+                />
+              }
+              onClick={() => setAbhaAuthFlowMethod(item.method)}
+            />
+          ))}
+      </div>
+    </div>
+  );
+};
+
+const LoginWithDifferentMethods = () => {
+  const setScreen = useAuthAbhaStore((state) => state.setScreen);
+  const selectedMethod = useAuthAbhaStore(
+    (state) => state.abhaAuthFlowMethod || ABHA_AUTH_FLOW_METHOD.MOBILE
+  );
+
+  const setRegistrationType = useAuthAbhaStore((state) => state.setRegistrationType);
+  const setAadhaarInitResponse = useAuthAbhaStore((state) => state.setAadhaarInitResponse);
+  const [identifierValue, setIdentifierValue] = useState<string>('');
+  const [error, setError] = useState<string | null>('');
+  const [abdmLoginInitApiStatus, setAbdmLoginInitApiStatus] = useState<LOADING_STATE>(
+    LOADING_STATE.IDLE
+  );
+  const setLoginIdentifierValue = useAuthAbhaStore((state) => state.setLoginIdentifierValue);
+  const setSelectedAbhaAddress = useAuthAbhaStore((state) => state.setSelectedAbhaAddress);
+  const [isValidMobileNumber, setIsValidMobileNumber] = useState<boolean>(false);
+  const initAbhaAppMobileNumber = useAuthAbhaStore((state) => state.initAbhaAppMobileNumber);
+  const setBottomsheetErrorInfo = useAuthAbhaStore((state) => state.setBottomsheetErrorInfo);
+  const [errorActionValue, setErrorAction] = React.useState<any>(null);
+  const [mobileNumber, setMobileNumber] = useState('');
+  const clientId = useAuthAbhaStore((state) => state.clientId);
+  const isEkaAppLogin = useAuthAbhaStore((state) => state.isEkaAppLogin);
+
+  useEffect(() => {
+    // if the mobile has a valid data and the selected method is mobile, then set the mobile number
+    if (!!initAbhaAppMobileNumber && selectedMethod === ABHA_AUTH_FLOW_METHOD.MOBILE) {
+      setIdentifierValue(initAbhaAppMobileNumber);
+      setIsValidMobileNumber(initAbhaAppMobileNumber.length === 10);
+      setError(null);
+      return;
+    }
+
+    setIdentifierValue('');
+    setError(null);
+    setIsValidMobileNumber(false);
+  }, [selectedMethod]);
+
+  const handleIdentifierValueChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
+    error && setError(null);
+    const val = e.target.value;
+
+    switch (selectedMethod) {
+      case ABHA_AUTH_FLOW_METHOD.PHR_ADDRESS:
+        if (val.length > 20) return;
+        break;
+
+      case ABHA_AUTH_FLOW_METHOD.MOBILE:
+        if ((val && !/^[0-9]+$/.test(val)) || val.length > 10) return;
+        break;
+
+      case ABHA_AUTH_FLOW_METHOD.ABHA_NUMBER:
+        if (!/^[\d-]*$/.test(val) || val.length > 17) return;
+        break;
+
+      case ABHA_AUTH_FLOW_METHOD.AADHAR_NUMBER:
+        if ((val && !/^[0-9]+$/.test(val)) || val.length > 12) return;
+        break;
+    }
+
+    if (selectedMethod === ABHA_AUTH_FLOW_METHOD.ABHA_NUMBER) {
+      const value = e.target.value.replace(/-/g, '');
+      let abhaNumber = '';
+      if (value.length > 0) abhaNumber += value.slice(0, 2);
+      if (value.length > 2) abhaNumber += `-${value.slice(2, 6)}`;
+      if (value.length > 6) abhaNumber += `-${value.slice(6, 10)}`;
+      if (value.length > 10) abhaNumber += `-${value.slice(10, 14)}`;
+      setIdentifierValue(abhaNumber);
+    } else setIdentifierValue(val.trim());
+  };
+
+  const handleOnAadhaarInputComplete = ({ inputVal: newAadhaarNo }: { inputVal: string }) => {
+    if (error) setError(null);
+
+    if (newAadhaarNo.length === 12) {
+      setIdentifierValue(newAadhaarNo);
+    }
+  };
+
+  const renderIdentifierInput = useCallback(() => {
+    const isMobileNonEditable =
+      selectedMethod === ABHA_AUTH_FLOW_METHOD.MOBILE && !!initAbhaAppMobileNumber;
+
+    if (selectedMethod === ABHA_AUTH_FLOW_METHOD.AADHAR_NUMBER) {
+      return (
+        <SpacedInputComponent
+          numberOfInputs={3}
+          length={4}
+          placeholder="XXXX"
+          onSubmit={handleOnAadhaarInputComplete}
+        />
+      );
+    }
+
+    const inputProps = {
+      value: identifierValue,
+      onChange: handleIdentifierValueChange,
+      ...(selectedMethod === ABHA_AUTH_FLOW_METHOD.MOBILE && {
+        type: 'tel',
+        placeholder: 'Mobile Number',
+        disabled: isMobileNonEditable,
+        PrefixComponent: (
+          <div className="pds2-flex pds2-items-center pds2-gap-x-8 pds2-border-r pds2-border-border-brand-02 pds2-pr-24">
+            <img
+              src="https://cdn.eka.care/vagus/cm4mlct2900000tg98p8u967s.webp"
+              alt="India Flag"
+              className="pds2-w-24 pds2-h-24"
+            />
+            <span className="pds2-text-text-black">+91</span>
+          </div>
+        ),
+      }),
+      ...(selectedMethod === ABHA_AUTH_FLOW_METHOD.ABHA_NUMBER && {
+        placeholder: '00-0000-0000-0000',
+        padding: 'pds2-p-18',
+        textStyle: 'Body2Regular pds2-text-center pds2-text-lg',
+        borderStyle: 'focus-within:pds2-border-border-brand-01',
+        type: 'tel',
+      }),
+      ...(selectedMethod === ABHA_AUTH_FLOW_METHOD.PHR_ADDRESS && {
+        placeholder: 'Enter ABHA Address',
+      }),
+    };
+
+    return <Pds2InputField {...inputProps} />;
+  }, [selectedMethod, identifierValue, error]);
+
+  const handleSubmitClick = (action = errorActionValue) => {
+    if (action) {
+      useAuthAbhaStore.setState({ isLoggedInFromRedirect: true });
+      setMobileNumber(identifierValue);
+      useAuthAbhaStore.setState({ initAbhaAppMobileNumber: identifierValue });
+      useAuthAbhaStore.setState({ abhaAuthFlowMethod: ABHA_AUTH_FLOW_METHOD.MOBILE });
+      setScreen(SCREEN_NAMES.CREATE_ABHA_WITH_AADHAAR);
+      setBottomsheetErrorInfo(null);
+    }
+  };
+
+  const handleNextClick = async () => {
+    setAbdmLoginInitApiStatus(LOADING_STATE.LOADING);
+    let authTxnId = '';
+    // if the trigger is not from eka app, then call the auth init api to get the txnId
+    if (!isEkaAppLogin) {
+      const { txn_id: txnId, error } = await postAuthInitV2({
+        method: AUTH_METHOD.ABHA,
+      });
+      if (!txnId || error) {
+        setError(error?.message || 'Something went wrong. Please try again.');
+        setAbdmLoginInitApiStatus(LOADING_STATE.REJECTED);
+        return;
+      }
+
+      authTxnId = txnId;
+      console.log('triggering logout api in login with abha screen');
+      // call the auth logout api
+      await postAuthLogoutV2();
+    }
+
+    setRegistrationType(REGISTRATION_TYPE.LOGIN); // set the registration type to login, since it is login flow
+
+    const loginIdentifier =
+      selectedMethod === ABHA_AUTH_FLOW_METHOD.PHR_ADDRESS
+        ? `${identifierValue}${isProd ? '@abdm' : '@sbx'}`
+        : identifierValue;
+
+    console.log('loginIdentifier', loginIdentifier);
+
+    const {
+      txn_id: abdmTxnId,
+      error: abdmLoginError,
+      action: errorAction,
+      hint,
+    } = await postAbdmLoginInit({
+      method: selectedMethod,
+      identifier: loginIdentifier,
+    });
+
+    console.log('after postAbdmLoginInit', errorAction);
+    console.log('after postAbdmLoginInit', errorAction);
+
+    if (errorAction) {
+      setErrorAction(errorAction);
+      setBottomsheetErrorInfo(errorAction);
+      return;
+    }
+
+    if (abdmLoginError) {
+      setError(abdmLoginError || 'Something went wrong. Please try again.');
+      setAbdmLoginInitApiStatus(LOADING_STATE.REJECTED);
+      return;
+    }
+
+    if (!abdmTxnId) {
+      setError('Something went wrong. Please try again.');
+      setAbdmLoginInitApiStatus(LOADING_STATE.REJECTED);
+      return;
+    }
+
+    if (selectedMethod === ABHA_AUTH_FLOW_METHOD.PHR_ADDRESS)
+      setSelectedAbhaAddress(loginIdentifier);
+
+    setAadhaarInitResponse({
+      authTxnId,
+      txnId: abdmTxnId,
+      aadhaarOtpSentToHint: hint || null,
+    });
+    setLoginIdentifierValue(loginIdentifier);
+    setAbdmLoginInitApiStatus(LOADING_STATE.RESOLVED);
+    handleSendEvent({
+      eventName: 'abha_login_submitted',
+      eventData: {
+        type: 'next',
+        platform: clientId,
+      },
+    });
+    setScreen(SCREEN_NAMES.VERIFY_OTP_LOGIN_WITH_ABHA);
+  };
+
+  const isValid = React.useMemo(() => {
+    switch (selectedMethod) {
+      case ABHA_AUTH_FLOW_METHOD.PHR_ADDRESS:
+        return identifierValue.length >= 4 && identifierValue.length <= 20; // changing the lower limit to 4, since the address can be as short as 4 characters
+      case ABHA_AUTH_FLOW_METHOD.MOBILE:
+        return identifierValue.length === 10;
+      case ABHA_AUTH_FLOW_METHOD.ABHA_NUMBER:
+        return identifierValue.length === 17;
+      case ABHA_AUTH_FLOW_METHOD.AADHAR_NUMBER:
+        return identifierValue.length === 12;
+    }
+  }, [selectedMethod, identifierValue]);
+
+  const methodText = React.useMemo(() => {
+    switch (selectedMethod) {
+      case ABHA_AUTH_FLOW_METHOD.ABHA_NUMBER:
+        return 'Enter your ABHA Number';
+      case ABHA_AUTH_FLOW_METHOD.PHR_ADDRESS:
+        return 'Enter your ABHA Address';
+      case ABHA_AUTH_FLOW_METHOD.MOBILE:
+        return 'Enter your Mobile Number';
+      case ABHA_AUTH_FLOW_METHOD.AADHAR_NUMBER:
+        return 'Enter your Aadhaar Number';
+      default:
+        return 'Enter your ABHA Number';
+    }
+  }, [selectedMethod]);
+
+  return (
+    <>
+      <div className="pds2-p-16 pds2-bg-bg-01 pds2-space-y-12 pds2-text-center pds2-rounded-b-24">
+        <div className="pds2-flex pds2-justify-center pds2-items-center pds2-gap-16">
+          {/* <EkaCarePatientIcon /> */}
+          <div className="pds2-bg-bg-white pds2-rounded-16">
+            <img
+              src="https://cdn.eka.care/vagus/cm4ml1lwu00000tfs1okl7hs9.webp"
+              alt="abha"
+              className="pds2-w-64 pds2-h-64"
+            />
+          </div>
+        </div>
+        <div className="Heading3Semibold pds2-text-text-black">Log in With ABHA</div>
+        <div className="pds2-text-text-black pds2-mt-2">{methodText}</div>
+        <div className="pds2-space-y-12">
+          <div className="pds2-relative">
+            {renderIdentifierInput()}
+            {selectedMethod === ABHA_AUTH_FLOW_METHOD.PHR_ADDRESS && (
+              <div className="pds2-absolute pds2-right-16 pds2-top-16 Body1Regular pds2-text-text-03">
+                {isProd ? '@abdm' : '@sbx'}
+              </div>
+            )}
+          </div>
+        </div>
+        {error && <div className="pds2-text-text-error Body3Regular">{error}</div>}
+        <Pds2Button
+          title="Next"
+          IconComponent={() => (
+            <ChevronDownRegularIcon className="pds2-w-16 pds2-h-16 -pds2-rotate-90 pds2-ml-8" />
+          )}
+          state={!isValid || !isValidMobileNumber || abdmLoginInitApiStatus === LOADING_STATE.LOADING ? 'disabled' : 'enabled'}
+          isLoading={abdmLoginInitApiStatus === LOADING_STATE.LOADING}
+          onClick={handleNextClick}
+          className="pds2-w-full"
+        />
+        <div className="pds2-flex pds2-flex-row pds2-justify-center pds2-items-center pds2-bg-bg-white pds2-w-fit pds2-px-12 pds2-bg-opacity-60 pds2-rounded-12 pds2-mx-auto">
+          <div className="pds2-text-text-04 Body3Regular">Don’t have ABHA?</div>
+          <Pds2CustomButton
+            className="pds2-text-text-brand Body3Semibold pds2-pl-4 pds2-pr-0 pds2-py-4 ripple pds2-border-none pds2-bg-transparent"
+            width="pds2-w-fit"
+            title="Register Now"
+            onClick={() => {
+              setScreen(SCREEN_NAMES.CREATE_ABHA_WITH_AADHAAR);
+            }}
+          />
+        </div>
+      </div>
+
+      <AbhaErrorBottomSheet onSubmitClick={handleSubmitClick} />
+    </>
+  );
+};