@eka-care/abha 0.0.1 → 0.0.2

package/src/organisms/abha/verification-status.tsx

@@ -0,0 +1,40 @@
+type TAbhaVerificationStatus = {
+  loading: boolean;
+  loadingText: string;
+  successText: string;
+};
+
+const AbhaVerificationStatus = ({
+  loading = false,
+  loadingText,
+  successText,
+}: TAbhaVerificationStatus) => {
+  return (
+    <div
+      className="pds2-px-16 pds2-w-full pds2-min-h-screen pds2-flex pds2-flex-col pds2-items-center pds2-justify-center pds2-text-center"
+      style={{ backgroundColor: '#F2F2F2' }}
+    >
+      {loading ? (
+        <>
+          <img
+            src="https://cdn.eka.care/vagus/cm5m96sno000d0tg92v2g42tx.webp"
+            alt="loading"
+            className="pds2-w-60"
+          />
+          <div className="pds2-text-text-01 Heading4Semibold pds2-mt-48">{loadingText}</div>
+        </>
+      ) : (
+        <>
+          <img
+            src="https://cdn.eka.care/vagus/cm5m97vt600060tfs273o59zn.webp"
+            alt="success"
+            className="pds2-w-142"
+          />
+          <div className="pds2-text-text-01 Heading4Semibold pds2-mt-23">{successText}</div>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default AbhaVerificationStatus;

package/src/organisms/choose-language/choose-language.tsx

@@ -0,0 +1,53 @@
+import { CircleCheckSolidIcon } from '@elixir/icons';
+import { Language, LanguageKey } from './types';
+
+const ChooseLanguage = ({
+  selectedLanguage,
+  languages,
+  onChangeLanguage,
+}: {
+  selectedLanguage: LanguageKey;
+  languages: Language[];
+  onChangeLanguage: (language: LanguageKey) => void;
+}) => {
+  return (
+    <div className="pds2-flex pds2-px-16 pds2-py-8 pds2-items-center pds2-justify-between">
+      <div className="Body3Regular pds2-text-text-04">Choose language:</div>
+      <div className="pds2-flex pds2-flex-row pds2-gap-8">
+        {languages.map((language) => {
+          const isSelected = language.key === selectedLanguage;
+          return (
+            <label
+              key={language.key}
+              className={`pds2-flex pds2-items-center pds2-cursor-pointer pds2-py-8 pds2-px-12 pds2-border pds2-rounded-8
+                  ${
+                    isSelected
+                      ? 'pds2-border-border-brand-01 pds2-gap-6 pds2-text-text-brand Body3Semibold'
+                      : 'pds2-border-border-03 pds2-text-text-secondary Body3Regular'
+                  }
+                  focus-within:pds2-ring-2 focus-within:pds2-ring-border-brand-01 focus-within:pds2-ring-offset-2
+                  active:pds2-bg-bg-brand-02 hover:pds2-bg-bg-hover-01
+                  pds2-transition-colors pds2-duration-200
+                `}
+            >
+              <input
+                type="radio"
+                name="language"
+                value={language.key}
+                checked={isSelected}
+                onChange={() => onChangeLanguage(language.key)}
+                className="focus:pds2-outline-none pds2-appearance-none"
+              />
+              {isSelected && (
+                <CircleCheckSolidIcon className="pds2-w-12 pds2-h-12 pds2-text-icon-success-02" />
+              )}
+              <span>{language.title}</span>
+            </label>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default ChooseLanguage;

package/src/organisms/choose-language/types.ts

@@ -0,0 +1,10 @@
+export enum LanguageKey {
+  ENGLISH = 'en',
+  HINDI = 'hi',
+  TAMIL = 'ta',
+}
+
+export type Language = {
+  title: string;
+  key: LanguageKey;
+};

package/src/organisms/screen-switcher/screen-switcher.tsx

@@ -0,0 +1,80 @@
+import { ReactElement } from 'react';
+import AbhaAadhaarVerificationStatusScreen from '../../routes/abha-aadhaar-verification-status-screen';
+import AbhaLoginOtpVerifyScreen from '../../routes/abha-login-otp-verify-screen';
+import AbhaMobileLinkingStatusScreen from '../../routes/abha-mobile-linking-status-screen';
+import AbhaOtpAndMobileScreen from '../../routes/abha-otp-and-mobile-screen';
+import AbhaPhoneNumberVerificationScreen from '../../routes/abha-phone-number-verification-screen';
+import CreateAbhaAddressScreen from '../../routes/create-abha-address-screen';
+import CreateAbhaWithAadhaarScreen from '../../routes/create-abha-with-aadhaar-screen';
+import CreateEkaProfileScreen from '../../routes/create-eka-profile-screen';
+import GetAllProfilesScreen from '../../routes/get-all-profiles-screen';
+import LoginWithAbhaScreen from '../../routes/login-with-abha-screen';
+import SelectAbhaFromListScreen from '../../routes/select-abha-from-list-screen';
+import useAuthAbhaStore from '../../stores/auth-abha-store';
+import { SCREEN_NAMES } from '../../stores/auth-abha-store/types';
+import SelectEkaProfileScreen from '../../routes/select-eka-profile-screen';
+import LoginorCreateAbhaScreen from '../../routes/login-or-create-abha-address-screen';
+
+const ScreenStack = (): ReactElement => {
+  const screen = useAuthAbhaStore((state) => state.screen);
+  const topScreen = screen[screen.length - 1];
+
+  switch (topScreen) {
+    // // Doctor Routes
+    // case SCREEN_NAMES.DOCTOR_SIGNIN:
+    //   return <DoctorSigninScreen />;
+    // case SCREEN_NAMES.DOCTOR_OTP_SIGNIN:
+    //   return <DoctorOtpScreen />;
+    // case SCREEN_NAMES.DOCTOR_WORKSPACE_SIGNIN:
+    //   return <DoctorWorkspaceLoginScreen />;
+    // case SCREEN_NAMES.DOCTOR_SIGNIN_USERS:
+    //   return <DoctorLoginUsersScreen />;
+    // case SCREEN_NAMES.WORKSPACE_NAME:
+    //   return <WorkspaceNameScreen />;
+    // case SCREEN_NAMES.WORKSPACE_SIGNIN_METHOD:
+    //   return <WorkspaceSigninMethodScreen />;
+    // case SCREEN_NAMES.EMAIL_MOBILE_SIGNIN:
+    //   return <EmailMobileSigninScreen />;
+
+    // ABHA routes
+    case SCREEN_NAMES.LOGIN_WITH_ABHA:
+      return <LoginWithAbhaScreen />;
+    case SCREEN_NAMES.VERIFY_OTP_LOGIN_WITH_ABHA:
+      return <AbhaLoginOtpVerifyScreen />;
+    case SCREEN_NAMES.CREATE_ABHA_WITH_AADHAAR:
+      return <CreateAbhaWithAadhaarScreen />;
+    case SCREEN_NAMES.ABHA_OTP_AND_MOBILE:
+      return <AbhaOtpAndMobileScreen />;
+    case SCREEN_NAMES.ABHA_PHONE_NUMBER_VERIFICATION:
+      return <AbhaPhoneNumberVerificationScreen />;
+    case SCREEN_NAMES.AADHAAR_VERIFICATION_STATUS:
+      return <AbhaAadhaarVerificationStatusScreen />;
+    case SCREEN_NAMES.ABHA_MOBILE_LINKING_STATUS:
+      return <AbhaMobileLinkingStatusScreen />;
+    case SCREEN_NAMES.SELECT_ABHA_FROM_LIST:
+      return <SelectAbhaFromListScreen />;
+    case SCREEN_NAMES.SELECT_EKA_PROFILE:
+      return <SelectEkaProfileScreen />;
+    case SCREEN_NAMES.CREATE_ABHA_ADDRESS:
+      return <CreateAbhaAddressScreen />;
+    case SCREEN_NAMES.CREATE_EKA_PROFILE:
+      return <CreateEkaProfileScreen />;
+    case SCREEN_NAMES.CREATE_PHR_EKA_PROFILE:
+      return <CreateEkaProfileScreen />;
+    case SCREEN_NAMES.GET_ALL_PROFILES:
+      return <GetAllProfilesScreen />;
+    case SCREEN_NAMES.LOGIN_OR_CREATE_ABHA:
+      return <LoginorCreateAbhaScreen />;
+
+    // // Patient routes
+    // case SCREEN_NAMES.PATIENT_SIGNIN:
+    //   return <PatientSigninScreen />;
+    // case SCREEN_NAMES.PATIENT_OTP:
+    //   return <PatientOtpScreen />;
+
+    default:
+      return <></>;
+  }
+};
+
+export default ScreenStack;

package/src/routes/abha-aadhaar-verification-status-screen.tsx

@@ -0,0 +1,209 @@
+import { ABHA_V3_SKIP_STATES, AUTH_METHOD, TProfileRecord } from '@elixir/types';
+import { postAuthVerifyV2, setIndividualEnv } from 'apis';
+import { useEffect, useState } from 'react';
+import { onAbhaSuccess, unMount } from '../main';
+import AbhaVerificationStatus from '../organisms/abha/verification-status';
+import useAuthAbhaStore from '../stores/auth-abha-store';
+import { SCREEN_NAMES } from '../stores/auth-abha-store/types';
+import { handleSendEvent } from '@elixir/utils';
+import { getMockAuthVerifyResponse } from '../utils/mock-auth-response';
+
+const AbhaAadhaarVerificationStatusScreen = () => {
+  const aadhaarVerificationSkipStateStatus = useAuthAbhaStore(
+    (state) => state.aadhaarVerificationSkipStateStatus
+  );
+  const authTxnId = useAuthAbhaStore((state) => state.authTxnId);
+  const ekaSmallToken = useAuthAbhaStore((state) => state.ekaSmallToken);
+  const setScreen = useAuthAbhaStore((state) => state.setScreen);
+
+  const [loadingStatus, setLoadingStatus] = useState(true);
+  const clientId = useAuthAbhaStore((state) => state.clientId);
+  const isEkaAppLogin = useAuthAbhaStore((state) => state.isEkaAppLogin);
+  const oid = useAuthAbhaStore((state) => state.oid);
+  const ekaProfileInfo = useAuthAbhaStore((state) => state.ekaProfileInfo);
+  const validGenders = ['M', 'F', 'O', 'U'] as const;
+  const setSelectedAbhaFlow = useAuthAbhaStore((state) => state.setSelectedAbhaFlow);
+
+  useEffect(() => {
+    const p1 = new Promise((resolve) => {
+      setTimeout(() => {
+        resolve(setLoadingStatus(false));
+      }, 500);
+    });
+
+    handleSendEvent({
+      eventName: 'page_view',
+      eventData: {
+        page_view: 'aadhaar_verified_successful',
+        platform: clientId,
+      },
+    });
+
+    window.curio?.pushToMixpanel?.('page_view', {
+      platform: clientId,
+      page_view: 'aadhaar_verified_successful',
+    });
+
+    async function dummyLoadingEffect() {
+      await p1;
+
+      setTimeout(async () => {
+        if (aadhaarVerificationSkipStateStatus === ABHA_V3_SKIP_STATES.CONFIRM_MOBILE_OTP) {
+          console.log('setting the selected abha flow to aadhaar');
+          setSelectedAbhaFlow('aadhaar');
+          handleSendEvent({
+            eventName: 'abha_aadhaar_verification_status',
+            eventData: {
+              type: 'confirm_mobile_otp',
+              platform: clientId,
+              transactionId: authTxnId || '',
+              skipState: 'confirm_mobile_otp',
+              minToken: ekaSmallToken || '',
+              oid: ekaProfileInfo?.oid || '',
+              abhaAddress: ekaProfileInfo?.abha_address || '',
+              isEkaAppLogin: isEkaAppLogin ? 'true' : 'false',
+            },
+          });
+          window.curio?.pushToMixpanel?.('abha_aadhaar_verification_status', {
+            platform: clientId,
+            type: 'confirm_mobile_otp',
+            transactionId: authTxnId || '',
+            skipState: 'confirm_mobile_otp',
+            minToken: ekaSmallToken || '',
+            oid: ekaProfileInfo?.oid || '',
+            abhaAddress: ekaProfileInfo?.abha_address || '',
+            isEkaAppLogin: isEkaAppLogin ? 'true' : 'false',
+          });
+          setScreen(SCREEN_NAMES.ABHA_PHONE_NUMBER_VERIFICATION);
+        } else {
+          // step 1: here skip state will be abha create,
+          // check if auth token and oid is present in the headers
+          // then send the auth token to the get all profiles
+          if (isEkaAppLogin) {
+            const gender = validGenders.includes(ekaProfileInfo?.gender as any)
+              ? (ekaProfileInfo?.gender as 'M' | 'F' | 'O' | 'U')
+              : undefined;
+
+            const authProfile: TProfileRecord = {
+              oid: ekaProfileInfo?.oid || '',
+              fln: ekaProfileInfo?.name || '',
+              dob: ekaProfileInfo?.date_of_birth,
+              gen: gender,
+              mobile: ekaProfileInfo?.mobile,
+              at: '',
+              fn: ekaProfileInfo?.firstname || '',
+              mn: ekaProfileInfo?.middlename || '',
+              ln: ekaProfileInfo?.lastname || '',
+              abha_number: ekaProfileInfo?.abha_number || '',
+              'health-ids': ekaProfileInfo?.abha_address
+                ? [ekaProfileInfo?.abha_address]
+                : undefined,
+            };
+            console.log(
+              'inside abha aadhaar verification status auth profile response ',
+              authProfile
+            );
+            const authResponse = getMockAuthVerifyResponse(authProfile);
+            console.log('authResponse ', authResponse);
+            // if the auth is present in the headers and it is abha end, then return
+            if (aadhaarVerificationSkipStateStatus === ABHA_V3_SKIP_STATES.ABHA_END) {
+              // if the skip state is abha end, and oid is present,then unmount the sdk and return
+              if (oid) {
+                // for ios specific handling
+                handleSendEvent({
+                  eventName: 'abha_aadhaar_verification_status_eka_flow',
+                  eventData: {
+                    type: 'verify',
+                    platform: clientId,
+                    transactionId: authTxnId || '',
+                    skipState: 'abha_end',
+                    minToken: ekaSmallToken || '',
+                    oid: oid || '',
+                    abhaAddress: ekaProfileInfo?.abha_address || '',
+                    isEkaAppLogin: isEkaAppLogin ? 'true' : 'false',
+                  },
+                });
+                window.curio?.pushToMixpanel?.('abha_aadhaar_verification_status_eka_flow', {
+                  platform: clientId,
+                  type: 'verify',
+                  transactionId: authTxnId || '',
+                  skipState: 'abha_end',
+                  minToken: ekaSmallToken || '',
+                  oid: oid || '',
+                  abhaAddress: ekaProfileInfo?.abha_address || '',
+                  isEkaAppLogin: isEkaAppLogin ? 'true' : 'false',
+                });
+                if (window.EkaAbha && window.EkaAbha.onAbhaSuccess) {
+                  window.EkaAbha?.onAbhaSuccess(JSON.stringify({ response: authResponse }));
+                  return;
+                }
+                // @ts-ignore
+                onAbhaSuccess({ response: authResponse });
+                unMount();
+                return;
+              }
+            }
+
+            if (aadhaarVerificationSkipStateStatus === ABHA_V3_SKIP_STATES.ABHA_CREATE) {
+              // since the flow is inside the app, and the skip_state is not abha end, then redirect to create eka profile
+              console.log('redirecting to create eka profile for abha address creation -> mobile');
+              setScreen(SCREEN_NAMES.CREATE_EKA_PROFILE);
+              return;
+            }
+            return;
+          }
+
+          if (!authTxnId || !ekaSmallToken) return;
+          const verifyResponse = await postAuthVerifyV2({
+            txn_id: authTxnId,
+            token: ekaSmallToken,
+          });
+          if (verifyResponse.data) {
+            // // step 1 : check if the skip state is abha end, if yes, then return -> done
+            if (aadhaarVerificationSkipStateStatus === ABHA_V3_SKIP_STATES.ABHA_END) {
+              // if the skip state is abha end, and oid is present,then unmount the sdk and return
+              if (oid) {
+                // for ios specific handling
+                if (window.EkaAbha && window.EkaAbha.onAbhaSuccess) {
+                  window.EkaAbha?.onAbhaSuccess(JSON.stringify({ response: verifyResponse }));
+                  return;
+                }
+                // @ts-ignore
+                onAbhaSuccess({ response: verifyResponse });
+                unMount();
+                return;
+              }
+              setIndividualEnv({
+                extraHeaders: {
+                  auth: verifyResponse.data?.tokens.sess,
+                },
+              });
+              // here the min token is present, then set the screen to get all profiles
+              setScreen(SCREEN_NAMES.GET_ALL_PROFILES);
+              return;
+            }
+            setIndividualEnv({
+              extraHeaders: {
+                auth: verifyResponse.data?.tokens.sess,
+              },
+            });
+            // here the min token is present, then set the screen to get all profiles
+            setScreen(SCREEN_NAMES.GET_ALL_PROFILES);
+            return;
+          }
+        }
+      }, 2000);
+    }
+    dummyLoadingEffect();
+  }, []);
+
+  return (
+    <AbhaVerificationStatus
+      loading={loadingStatus}
+      loadingText="Verifying..."
+      successText="Aadhaar Verification Successful!"
+    />
+  );
+};
+
+export default AbhaAadhaarVerificationStatusScreen;

package/src/routes/abha-created-screen.tsx

@@ -0,0 +1,45 @@
+import { ArrowLeftRegularIcon } from '@elixir/icons';
+import Pds2Header from '../atoms/header';
+import Pds2CustomButton from '../atoms/button/custom-button';
+
+const AbhaCreatedScreen = () => {
+  return (
+    <div className="pds2-w-full pds2-h-full pds2-flex pds2-flex-col">
+      <Pds2Header
+        prefixIcon={
+          <button className="pds2-w-24 pds2-h-24 pds2-rounded-full pds2-flex pds2-items-center pds2-justify-center ripple">
+            <ArrowLeftRegularIcon />
+          </button>
+        }
+        title=""
+        className="pds2-border-b-1 pds2-border-bg-seperator-dark pds2-bg-bg-white"
+      />
+      <div className="pds2-p-16 pds2-flex pds2-flex-col pds2-items-center pds2-space-y-16 pds2-text-center pds2-flex-1 pds2-py-48">
+        <img
+          src="https://cdn.eka.care/vagus/cm5m97vt600060tfs273o59zn.webp"
+          alt="success"
+          className="pds2-h-120"
+        />
+        <div className="pds2-space-y-4">
+          <div className="pds2-text-text-01 Heading4Semibold">
+            Congratulations! Your <br /> ABHA Address is created and linked.
+          </div>
+          <div className="pds2-text-text-primary BodyBody">
+            Keep track of your personal health records easily with the Eka Care app
+          </div>
+        </div>
+        <div className="pds2-w-full pds2-rounded-16 pds2-border pds2-border-bg-seperator-dark pds2-p-16">
+          Card
+        </div>
+      </div>
+      <div className="pds2-p-16 pds2-shadow-elevation-only-top pds2-sticky pds2-bottom-0">
+        <Pds2CustomButton
+          title="Continue to use ABHA"
+          className="pds2-justify-center pds2-text-text-brand Body1Semibold pds2-bg-border-brand-02 pds2-border-none"
+        />{' '}
+      </div>
+    </div>
+  );
+};
+
+export default AbhaCreatedScreen;