@eka-care/abha 0.0.6 → 0.0.8

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

@@ -1,448 +0,0 @@
-import { ChevronDownRegularIcon, PhoneSolidIcon, ArrowLeftRegularIcon } from '@elixir/icons';
-import {
-  ABHA_AUTH_FLOW_METHOD,
-  AUTH_METHOD,
-  LOADING_STATE,
-  REGISTRATION_TYPE,
-} from '@elixir/types';
-import { postAbdmLoginInit, postAuthInitV2, postAuthLogoutV2 } from 'apis';
-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 { handleSendEvent } from '@elixir/utils';
-import AbhaErrorBottomSheet from '../organisms/abha/error-bottom-sheet';
-import { unMount } from '../main';
-
-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();
-  };
-
-  return (
-    <div className="pds2-bg-bg-white">
-      {/* * if clientId is eka-web, do not show back button */}
-      {clientId !== 'eka-web' && (
-        <Pds2Header
-          prefixIcon={
-            <button onClick={handleBackButtonClick}>
-              <ArrowLeftRegularIcon />
-            </button>
-          }
-          title=""
-          className="pds2-bg-bg-01"
-        />
-      )}
-      <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-16 pds2-text-center">
-        <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} />
-    </>
-  );
-};