@eka-care/abha-stg 0.0.40 → 0.1.0

package/src/index.css

@@ -0,0 +1,152 @@
+@import url(https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&display=swap);
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  font-family: Lato, Avenir, Helvetica, Arial, sans-serif;
+}
+
+body {
+  @apply pds2-font-lato;
+}
+
+@layer base {
+  .TitlesSubheadline {
+    @apply pds2-font-700 pds2-text-16 pds2-leading-20;
+  }
+  .BodyBody {
+    @apply pds2-font-400 pds2-text-16 pds2-leading-22;
+  }
+  .DisplayRegular {
+    @apply pds2-font-400 pds2-text-34 pds2-leading-44;
+  }
+  .DisplayMedium {
+    @apply pds2-font-500 pds2-text-32 pds2-leading-40;
+  }
+  .DisplaySemibold {
+    @apply pds2-font-600 pds2-text-32 pds2-leading-40;
+  }
+  .Heading2Medium {
+    @apply pds2-font-500 pds2-text-24 pds2-leading-32;
+  }
+  .Heading2Semibold {
+    @apply pds2-font-600 pds2-text-24 pds2-leading-32;
+  }
+  .Heading3Semibold {
+    @apply pds2-font-600 pds2-text-20 pds2-leading-28;
+  }
+  .Heading4Semibold {
+    @apply pds2-font-600 pds2-text-18 pds2-leading-24;
+  }
+
+  .Body1Semibold {
+    @apply pds2-font-600 pds2-text-16 pds2-leading-24;
+  }
+  .Body2Semibold {
+    @apply pds2-font-600 pds2-text-14 pds2-leading-20;
+  }
+
+  .Body1Regular {
+    @apply pds2-font-400 pds2-text-16 pds2-leading-24;
+  }
+  .Body2Regular {
+    @apply pds2-font-400 pds2-text-14 pds2-leading-20;
+  }
+  .Body2Medium {
+    @apply pds2-font-500 pds2-text-14 pds2-leading-20;
+  }
+  .Body3Regular {
+    @apply pds2-font-400 pds2-text-12 pds2-leading-16;
+  }
+
+  .Body3Medium {
+    @apply pds2-font-500 pds2-text-12 pds2-leading-16;
+  }
+
+  .Body3Semibold {
+    @apply pds2-font-600 pds2-text-12 pds2-leading-16;
+  }
+
+  .Body3CapsRegular {
+    @apply pds2-font-400 pds2-text-12 pds2-leading-16 pds2-uppercase pds2-tracking-[0.96px];
+  }
+  .Body3CapsSemibold {
+    @apply pds2-font-600 pds2-text-12 pds2-leading-16 pds2-uppercase pds2-tracking-[0.96px];
+  }
+
+  .BodyFootnote {
+    @apply pds2-font-400 pds2-text-13 pds2-leading-18;
+  }
+
+  .BodyInputLabel {
+    @apply pds2-font-400 pds2-text-12 pds2-leading-12;
+  }
+  .Label1Semibold {
+    @apply pds2-font-600 pds2-text-10 pds2-leading-14;
+  }
+  .SubheadlineRegular {
+    @apply pds2-font-400 pds2-text-14 pds2-leading-20;
+  }
+}
+
+@layer utilities {
+  @variants responsive {
+    .ripple {
+      @apply pds2-relative pds2-overflow-hidden pds2-transform;
+    }
+
+    .ripple::after {
+      @apply pds2-absolute pds2-inset-0 pds2-block pds2-bg-center pds2-bg-no-repeat pds2-opacity-0 pds2-pointer-events-none;
+      content: '';
+      background-image: radial-gradient(circle, #000 10%, transparent 10.01%);
+      transform: scale(10, 10);
+      transition:
+        transform 0.3s,
+        opacity 1s;
+    }
+
+    .ripple:active::after {
+      transform: scale(0, 0);
+      opacity: 0.3;
+      transition: 0s;
+    }
+  }
+}
+
+input[type="date"]::-webkit-calendar-picker-indicator {
+  display: inline !important;
+  -webkit-appearance: auto !important;
+  width: 16px;
+  padding: 0px;
+  margin: 0px;
+}
+
+.abhaStepper {
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+.abhaStepper::-moz-progress-bar {
+  background-color: green;
+}
+
+.abhaStepper::-webkit-progress-bar {
+  background-color: #abb7c2;
+}
+
+.abhaStepper::-webkit-progress-value {
+  background-color: #6b5ce0;
+}
+
+@keyframes pds2-spin { to { transform: rotate(360deg); } }
+
+.pds2-animate-spin {
+    animation: pds2-spin 1s linear infinite;
+}
+
+button, input, a {
+  /* outline: none; */
+  -webkit-tap-highlight-color: transparent; /* mobile */
+}

package/src/main.tsx

@@ -0,0 +1,374 @@
+
+import { createRoot, Root } from 'react-dom/client';
+import App, { queryClient } from './App';
+import './index.css';
+import useAuthAbhaStore from './stores/auth-abha-store';
+import { SCREEN_NAMES } from './stores/auth-abha-store/types';
+import { isValidAadhaar, isValidABHA, isValidMobile } from './utils/validations';
+import handleSendEvent from './utils/send-event-utils';
+import setEnv, { ABHA_AUTH_FLOW_METHOD, TAuthVerifyV2Response } from './constants/constants';
+
+export type TMethod = 'login_with_abha' | 'create_abha_with_mobile' | 'login_or_create_abha';
+
+type IdentifierType = "phr_address" | "aadhaar_number" | "abha_number" | "mobile";
+
+const setIdentifier = (type: IdentifierType, value: string) => {
+  useAuthAbhaStore.getState().setInitAbhaAppIdentifierType(type);
+  useAuthAbhaStore.getState().setInitAbhaAppIdentifier(value);
+};
+
+const handleIdentifier = (
+  identifier?: string,
+  identifier_type?: IdentifierType,
+  isProd?: boolean,
+) => {
+  if (identifier) {
+    
+    const sanitized = identifier.replace(/[\s-]/g, "");
+
+    if (identifier_type) {
+      // Client already knows the type
+      if(identifier_type===ABHA_AUTH_FLOW_METHOD.MOBILE){
+        setIdentifier(ABHA_AUTH_FLOW_METHOD.MOBILE, identifier.slice(-10));
+        return;
+      }
+      setIdentifier(identifier_type, identifier);
+      return;
+    }
+
+    // Client provides only identifier, detect type
+    const isPHR = isProd
+      ? sanitized.endsWith("@abdm")
+      : sanitized.endsWith("@sbx");
+
+    if (isPHR) {
+      setIdentifier(ABHA_AUTH_FLOW_METHOD.PHR_ADDRESS, sanitized);
+      return;
+    }
+
+    if (/^\+91\d{10}$/.test(sanitized)) {
+      const mobileDigits = sanitized.slice(-10);
+      if (mobileDigits.length === 10 && isValidMobile(mobileDigits)) {
+        setIdentifier(ABHA_AUTH_FLOW_METHOD.MOBILE, mobileDigits);
+        return;
+      }
+    }
+    else if (/^\d+$/.test(sanitized)) {
+      const len = sanitized.length;
+      
+      if (len === 10 && isValidMobile(sanitized)) {
+        setIdentifier(ABHA_AUTH_FLOW_METHOD.MOBILE, sanitized);
+        return;
+      }
+
+      if (len === 12 && isValidAadhaar(sanitized)) {
+        setIdentifier(ABHA_AUTH_FLOW_METHOD.AADHAR_NUMBER, sanitized);
+        return;
+      }
+
+      if (len === 14 && isValidABHA(sanitized)) {
+        const formattedABHA = `${sanitized.slice(0,2)}-${sanitized.slice(2,6)}-${sanitized.slice(6,10)}-${sanitized.slice(10,14)}`;
+        setIdentifier(ABHA_AUTH_FLOW_METHOD.ABHA_NUMBER, formattedABHA);
+        return;
+      }
+
+
+      console.warn("Unknown numeric identifier type");
+      return;
+    }
+    console.warn("Unknown identifier type");
+  } else {
+    console.warn("No identifier provided");
+  }
+};
+
+const getScreenName = ({ method = 'login_with_abha' }: { method?: TMethod }): SCREEN_NAMES => {
+  switch (method) {
+    case 'login_with_abha':
+      return SCREEN_NAMES.LOGIN_WITH_ABHA;
+    case 'create_abha_with_mobile':
+      return SCREEN_NAMES.CREATE_ABHA_WITH_AADHAAR;
+    case 'login_or_create_abha':
+      return SCREEN_NAMES.LOGIN_OR_CREATE_ABHA;
+    default:
+      return SCREEN_NAMES.LOGIN_WITH_ABHA;
+  }
+};
+
+type TInitAbhaAppParams = {
+  clientId: string;
+  containerId: string;
+  urlParams?: {
+    nextUrl: string;
+  };
+  method?: TMethod;
+  data?: {
+    mobile?: string;
+    accessToken?: string;
+    oid?: string;
+    identifier?: string;
+    identifier_type?: string;
+  };
+  appVersion?: string;
+  onSuccess: (params: TOnAbhaSuccessParams) => void;
+  onError: (params: TOnAbhaFailureParams) => void;
+  onAbhaClose: () => void;
+};
+
+declare global {
+  interface Window {
+    initAbhaApp: (params: TInitAbhaAppParams) => void;
+    closeAbhaApp: () => void;
+    EkaAbha?: {
+      mobileNumber?: string;
+      onAbhaSuccess: (params: string) => void;
+      onAbhaError: (params: string) => void;
+      onAbhaClose: () => void;
+      changeStatusBarColor?: (params: string) => void;
+    };
+    curio?: {
+      pushToMixpanel?: (eventName: string, eventProps: Record<string, any>) => void;
+    };
+  }
+}
+
+// TODO: Move all the rendering functions to a separate file
+
+let PopupReactNode: Root | null = null;
+
+export let unMount: () => void;
+
+type TOnAbhaSuccessParams = {
+  response: TAuthVerifyV2Response;
+};
+
+export let onAbhaSuccess: (params: TOnAbhaSuccessParams) => void;
+
+type TOnAbhaFailureParams = { error?: string; response?: TAuthVerifyV2Response };
+
+export let onAbhaFailure: (params: TOnAbhaFailureParams) => void;
+
+function initAbhaApp(params: TInitAbhaAppParams) {
+  // clear abha auth store at the very start
+  console.log('clear the abha auth store for every sdk invocation', params);
+  useAuthAbhaStore.getState().clearAbhaAuthStore();
+
+  const {
+    clientId,
+    containerId,
+    urlParams,
+    method,
+    data: abhaData,
+    appVersion,
+    onSuccess,
+    onError,
+    onAbhaClose,
+  } = params;
+  const { mobile, accessToken, oid, identifier, identifier_type} = abhaData || {};
+
+  console.log("recieved identifier, identifier_type",identifier,identifier_type);
+    
+    handleSendEvent({
+    eventName: 'recieved_init_identifiers',
+    eventData: {
+      identifier: identifier || "",
+      identifier_type: identifier_type || "",
+    },
+    });
+
+  const headers: Record<string, string> = {};
+
+  if (accessToken) {
+    headers.auth = accessToken;
+  }
+
+  if (oid) {
+    headers['X-User-ID'] = oid;
+  }
+  console.log('set headers in headers');
+
+  console.log('invoked initAbhaApp', headers);
+
+  // adding a check of oid in headers, in stetho, only oid is passed, auth is not passed.
+
+  const isEkaAppLogin = headers !== null && ('auth' in headers || 'X-User-ID' in headers);
+  useAuthAbhaStore.getState().setIsEkaAppLogin(isEkaAppLogin);
+
+  // set true to isEkaAppLogin if clientId is doc-web
+  if (clientId === 'doc-web') {
+    useAuthAbhaStore.getState().setIsEkaAppLogin(true);
+  }
+  console.log('clientId ', clientId);
+  console.log('isEkaAppLogin', useAuthAbhaStore.getState().isEkaAppLogin);
+
+  if (
+    clientId === 'androiddoc' ||
+    clientId === 'doctor-app-ios' ||
+    clientId === 'doctor-ipad-ios' ||
+    clientId === 'doc-web'
+  ) {
+    useAuthAbhaStore.getState().setClientId('doctor');
+  } else if (clientId === 'androidp' || clientId === 'patient-app-ios') {
+    useAuthAbhaStore.getState().setClientId('phr');
+  } else if (clientId === 'www-eka') {
+    useAuthAbhaStore.getState().setClientId('eka-web');
+  } else {
+    console.log('here');
+    useAuthAbhaStore.getState().setClientId('phr');
+  }
+
+  let isDocAppRequest = false;
+
+  // publish an mix panel event
+  handleSendEvent({
+    eventName: 'init_abha_app',
+    eventData: {
+      platform: clientId,
+      method: method || '',
+      mobile: mobile || '',
+      accessToken: accessToken || '',
+      oid: oid || '',
+      appVersion: appVersion || '',
+      isEkaAppLogin: isEkaAppLogin.toString(),
+      container_id: containerId,
+    },
+  });
+
+  // use onTrack
+  onTrack('init_abha_app', {
+    platform: clientId,
+    method: method || '',
+    mobile: mobile || '',
+    accessToken: headers.auth || '',
+    oid: headers['X-User-ID'] || '',
+    appVersion: appVersion || '',
+    isEkaAppLogin: isEkaAppLogin.toString(),
+    container_id: containerId,
+  });
+
+  if (
+    clientId === 'androiddoc' ||
+    clientId === 'doctor-app-ios' ||
+    clientId === 'doctor-ipad-ios' ||
+    clientId === 'doc-web'
+  ) {
+    isDocAppRequest = true;
+    useAuthAbhaStore.getState().setIsDocAppRequest(isDocAppRequest);
+  }
+
+  useAuthAbhaStore
+    .getState()
+    .setInitAbhaAppMethod(
+      method === 'create_abha_with_mobile' ? 'create_abha_with_mobile' : 'login_with_abha'
+    );
+
+  setEnv({
+    clientId,
+    env: import.meta.env.VITE_APP_ENV === 'PROD' ? 'PROD' : 'DEV',
+    ...(headers && { extraHeaders: headers }),
+  });
+  const isProd = import.meta.env.VITE_APP_ENV === 'PROD';
+  console.log("isProd is",isProd)
+
+  const screenName = SCREEN_NAMES.LOGIN_OR_CREATE_ABHA;
+
+  useAuthAbhaStore.getState().setInitState({
+    screen: [screenName],
+    urlParams,
+  });
+
+  // deciding abha sdk mount
+  const validIdentifierTypes: IdentifierType[] = ["mobile", "aadhaar_number", "abha_number", "phr_address"];
+
+  const typeToUse = identifier_type && validIdentifierTypes.includes(identifier_type as IdentifierType)
+    ? (identifier_type as IdentifierType)
+    : undefined;
+
+  handleIdentifier(identifier, typeToUse, isProd);
+
+  useAuthAbhaStore.getState().setAbhaAuthFlowMethod(ABHA_AUTH_FLOW_METHOD.MOBILE);
+  
+
+  const closeAbhaApp = () => {
+    useAuthAbhaStore.getState().clearAbhaAuthStore();
+    queryClient.removeQueries();
+    PopupReactNode?.unmount();
+    onAbhaClose();
+  };
+
+  const rootElement = document.getElementById(containerId);
+  if (!rootElement) {
+    const errorMessage = `Element with id ${containerId} not found`;
+    console.error(errorMessage);
+    onError({ error: errorMessage });
+    closeAbhaApp();
+    return;
+  }
+
+  onAbhaSuccess = onSuccess;
+  onAbhaFailure = onError;
+
+  PopupReactNode = createRoot(rootElement);
+  PopupReactNode.render(<App />);
+
+  unMount = closeAbhaApp;
+  window.closeAbhaApp = closeAbhaApp;
+
+  return closeAbhaApp;
+}
+
+window.initAbhaApp = initAbhaApp;
+
+let eventQueue: Array<{ eventName: string; eventProps: Record<string, any> }> = [];
+
+function onTrack(eventName: string, eventProperties: Record<string, any> = {}) {
+  const platform = useAuthAbhaStore.getState().clientId || 'unknown-platform';
+
+  const finalEventProps = {
+    ...eventProperties,
+    platform,
+  };
+
+  console.log('Tracking Event:', eventName, finalEventProps);
+
+  if (window.curio?.pushToMixpanel) {
+    console.log('Pushing to Mixpanel:', eventName, finalEventProps);
+    window.curio.pushToMixpanel(eventName, finalEventProps);
+  } else {
+    console.log('Curio not available. Queuing event:', eventName, finalEventProps);
+    console.error('Curio not available. Could not push event to Mixpanel.');
+  }
+}
+
+if (import.meta.env.VITE_APP_MODE === 'DEBUG') {
+  initAbhaApp({
+    clientId: 'www-eka',
+    containerId: 'lofe_root',
+    method: 'login_or_create_abha',
+    data: {
+      // mobile: '8709459003',
+      // accessToken:
+      // 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdWQiOiJhbmRyb2lkZG9jIiwiYi1pZCI6Ijc3MjM3NjM3NzYzODE3IiwiY2MiOnt9LCJkb2IiOiIxOTk4LTAyLTEwIiwiZXhwIjoxNzQxODY3NDMyLCJmbiI6IlN0YWdlIiwiZ2VuIjoiTSIsImlhdCI6MTc0MTg2NjgzMiwiaXNzIjoiZW1yLmVrYS5jYXJlIiwibG4iOiJHb2QiLCJvaWQiOiIxNzQxMTY3MTMwMjk3NjgiLCJwcyI6IkQiLCJ1dWlkIjoiZGRjMGVmNDUtNDZmOS00ZGE5LTlhNTgtNjcwZjc1N2YyYzc3In0.ZHpMNQuolWQ-MqzbYAHnZGVz1CqFTofm7sV-7ARlfug',
+      // oid: '17418668693032712',
+    },
+    // urlParams: { from: 'dr', next: 'https://www.google.com' },
+    // workspaceName: 'hell',
+    onSuccess: (params) => {
+      handleSendEvent({
+        eventName: 'abha_on_success',
+        eventData: {
+          params: JSON.stringify(params),
+          oid: params?.response?.data?.profile?.oid ?? '',
+          uuid: params?.response?.data?.profile?.uuid ?? '',
+        },
+      });
+      console.log('%c Line:117 🍕 onSuccessParams', 'color:#465975', params);
+    },
+    onError: (params) => {
+      console.log('%c Line:121 🥟 onErrorParams', 'color:#6ec1c2', params);
+    },
+    onAbhaClose: () => {
+      console.log('%c Line:121 🥟 onAbhaClose', 'color:#6ec1c2');
+    },
+  });
+}

package/src/molecules/abha/bottom-sheet/bottom-sheet-wrapper.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+type BottomSheetWrapperProps = {
+  isOpen: boolean;
+  setIsOpen: (open: boolean) => void;
+  children: React.ReactNode;
+  shouldCloseOnClickOutside?: boolean;
+};
+const BottomSheetWrapper = ({
+  isOpen,
+  setIsOpen,
+  children,
+  shouldCloseOnClickOutside = true,
+}: BottomSheetWrapperProps) => {
+  return (
+    <div
+      className={`pds2-absolute pds2-inset-0 pds2-z-50 pds2-transition-opacity pds2-duration-300 ${
+        isOpen
+          ? 'pds2-opacity-100 pds2-pointer-events-auto'
+          : 'pds2-opacity-0 pds2-pointer-events-none pds2-hidden'
+      }`}
+    >
+      {/* Background overlay */}
+      <div
+        className="pds2-absolute pds2-inset-0 pds2-bg-text-black pds2-bg-opacity-60 pds2-transition-opacity pds2-duration-300"
+        onClick={() => shouldCloseOnClickOutside && setIsOpen(false)}
+      />
+
+      {/* Bottom Sheet Content */}
+      <div
+        className="pds2-absolute pds2-bottom-0 pds2-left-0 pds2-right-0 pds2-w-full pds2-bg-bg-white pds2-rounded-t-16 pds2-shadow-lg pds2-p-4 pds2-transition-all pds2-duration-300 pds2-ease-out"
+        style={{
+          transform: isOpen ? 'translateY(0)' : 'translateY(100%)',
+        }}
+      >
+        {children}
+      </div>
+    </div>
+  );
+};
+export default BottomSheetWrapper;

package/src/molecules/abha/bottom-sheet/index.tsx

@@ -0,0 +1,66 @@
+import { XMarkRegularIcon } from '@eka-care/icons';
+import Pds2Button from '../../../atoms/button';
+import BottomSheetWrapper from './bottom-sheet-wrapper';
+
+type TAbhaBottomSheetProps = {
+  description: string;
+  subText?: string;
+  className?: string;
+  submitText: string;
+  onSubmitClick: () => void;
+  iconUrl?: string;
+  isBottomSheetOpen: boolean;
+  onBottomSheetClose: () => void;
+  shouldCloseOnClickOutside?: boolean;
+};
+
+const AbhaBottomSheet = ({
+  description,
+  subText,
+  submitText,
+  onSubmitClick,
+  iconUrl,
+  isBottomSheetOpen,
+  onBottomSheetClose,
+  shouldCloseOnClickOutside = true,
+}: TAbhaBottomSheetProps) => {
+  return (
+    <BottomSheetWrapper
+      isOpen={isBottomSheetOpen}
+      setIsOpen={onBottomSheetClose}
+      shouldCloseOnClickOutside={shouldCloseOnClickOutside}
+    >
+      <div className="pds2-flex pds2-flex-col pds2-p-16 pds2-text-center">
+        {shouldCloseOnClickOutside ? (
+          <div className="pds2-flex pds2-justify-end pds2-items-center">
+            <button
+              onClick={onBottomSheetClose}
+              className="pds2-w-24 pds2-h-24 pds2-rounded-full pds2-flex pds2-items-center pds2-justify-center ripple"
+            >
+              <XMarkRegularIcon className="pds2-w-18 pds2-h-18 pds2-text-text-03" />
+            </button>
+          </div>
+        ) : null}
+        <div className="pds2-space-y-8">
+          {iconUrl && (
+            <span className="pds2-flex pds2-justify-center">
+              <img src={iconUrl} className="pds2-w-64 pds2-h-64" alt="Bottom sheet icon" />
+            </span>
+          )}
+          <div className="Heading4Semibold pds2-text-text-01 pds2-py-16 pds2-text-18">
+            {description}
+          </div>
+          {subText && <div className="Body2Regular pds2-text-text-03">{subText}</div>}
+          <Pds2Button
+            title={submitText}
+            onClick={onSubmitClick}
+            state={'enabled'}
+            className="pds2-w-full"
+          />
+        </div>
+      </div>
+    </BottomSheetWrapper>
+  );
+};
+
+export default AbhaBottomSheet;