@eka-care/abha 0.0.1 → 0.0.3

package/src/atoms/input-field/index.tsx

@@ -0,0 +1,62 @@
+import { InputFieldProps } from './types';
+
+const Pds2InputField = ({
+  PrefixComponent,
+  placeholder,
+  value,
+  onChange,
+  borderStyle = '',
+  borderRadius = 'pds2-rounded-16',
+  padding = 'pds2-px-24 pds2-py-16',
+  textColor = 'pds2-text-text-black',
+  textStyle = '',
+  onKeyDown = () => {},
+  type = 'text',
+  label,
+  isMandatory,
+  maxDate,
+  error,
+  autoCapitalize = 'off',
+  autoCorrect = 'off',
+  disabled,
+  inputMode,
+  autoFocus,
+  pattern,
+  maxLength,
+}: InputFieldProps) => {
+  return (
+    <div className="pds2-flex pds2-flex-col pds2-space-y-8 pds2-w-full">
+      {label ? (
+        <div className="Body3Medium pds2-text-text-04">
+          {label}
+          {isMandatory ? <sup className="pds2-text-text-error Body3Semibold">*</sup> : null}
+        </div>
+      ) : null}
+      <label
+        className={`${padding} ${borderRadius} ${borderStyle} pds2-border ${
+          error ? 'pds2-border-text-error pds2-border-2' : 'pds2-border-border-03'
+        } pds2-flex pds2-flex-row pds2-items-center pds2-gap-x-8 pds2-w-full pds2-bg-bg-white pds2-text-text-invert`}
+      >
+        {PrefixComponent ? PrefixComponent : null}
+        <input
+          className={`${textColor} ${textStyle} pds2-outline-none pds2-w-full pds2-bg-transparent disabled:pds2-text-text-04`}
+          placeholder={placeholder || 'Enter Value'}
+          value={value}
+          onChange={onChange}
+          type={type}
+          max={type === 'date' && maxDate ? maxDate : undefined}
+          onKeyDown={onKeyDown}
+          autoCapitalize={autoCapitalize}
+          autoCorrect={autoCorrect}
+          disabled={disabled}
+          inputMode={inputMode}
+          autoFocus={autoFocus}
+          pattern={pattern}
+          maxLength={maxLength}
+        />
+      </label>
+    </div>
+  );
+};
+
+export default Pds2InputField;

package/src/atoms/input-field/patient-input-field.tsx

@@ -0,0 +1,16 @@
+import Pds2InputField from '.';
+import { InputFieldProps } from './types';
+
+type TPatientPds2InputFieldProps = InputFieldProps;
+
+const PatientPds2InputField = (props: TPatientPds2InputFieldProps) => {
+  return (
+    <Pds2InputField
+      {...props}
+      textStyle="Body1Medium"
+      borderStyle="focus-within:pds2-ring-2 focus-within:pds2-ring-border-brand-01 focus-within:pds2-ring-offset-2"
+    />
+  );
+};
+
+export default PatientPds2InputField;

package/src/atoms/input-field/types.ts

@@ -0,0 +1,24 @@
+export type InputFieldProps = {
+  borderRadius?: string;
+  borderStyle?: string;
+  padding?: string;
+  textColor?: string;
+  textStyle?: string;
+  placeholder?: string;
+  PrefixComponent?: React.ReactNode;
+  onChange?: React.ChangeEventHandler<HTMLInputElement>;
+  onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
+  value: string;
+  type?: React.HTMLInputTypeAttribute;
+  label?: string;
+  isMandatory?: boolean;
+  maxDate?: string;
+  error?: string;
+  autoCapitalize?: string;
+  autoCorrect?: string;
+  disabled?: boolean;
+  inputMode?: 'email' | 'search' | 'tel' | 'text' | 'url' | 'none' | 'numeric' | 'decimal';
+  autoFocus?: boolean;
+  pattern?: string;
+  maxLength?: number;
+};

package/src/atoms/pds2-otp-input/index.tsx

@@ -0,0 +1,35 @@
+import { InputHTMLAttributes, useState } from 'react';
+import { TOtpInputProps } from './types';
+
+const Pds2OtpInput = ({
+  value,
+  isError,
+  ...restProps
+}: InputHTMLAttributes<HTMLInputElement> & TOtpInputProps) => {
+  const [isFocused, setIsFocused] = useState(false);
+
+  return (
+    <input
+      {...restProps}
+      value={value}
+      placeholder="."
+      onFocus={(e) => {
+        setIsFocused(true);
+        restProps.onFocus?.(e);
+      }}
+      onBlur={(e) => {
+        setIsFocused(false);
+        restProps.onBlur?.(e);
+      }}
+      className={`pds2-rounded-16 pds2-border-1 pds2-p-16 ${
+        isError
+          ? 'pds2-border-border-error'
+          : isFocused
+            ? 'pds2-border-border-doc'
+            : 'pds2-border-border-03'
+      } pds2-w-48 pds2-bg-bg-white pds2-text-text-primary pds2-text-center placeholder:pds2-text-text-04 Body1Regular pds2-outline-none`}
+    />
+  );
+};
+
+export default Pds2OtpInput;

package/src/atoms/pds2-otp-input/types.d.ts

@@ -0,0 +1,3 @@
+export type TOtpInputProps = {
+  isError?: boolean;
+};

package/src/atoms/single-input-chip/index.tsx

@@ -0,0 +1,32 @@
+import { useRef } from 'react';
+import { TSingleInputChipProps } from './types';
+
+export default function Pds2SingleInputChip({
+  title,
+  isDisabled,
+  isSelected,
+  onSelect,
+}: TSingleInputChipProps) {
+  const divRef = useRef<HTMLInputElement>(null);
+  return (
+    <div
+      onClick={!isDisabled ? onSelect : undefined}
+      className={`pds2-flex pds2-items-center pds2-cursor-pointer pds2-py-12 pds2-px-16 pds2-border-1 pds2-rounded-12 pds2-bg-bg-white 
+        ${isSelected ? 'pds2-border-border-brand-01' : 'pds2-border-border-03'}
+        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
+      `}
+      tabIndex={-1}
+      ref={divRef}
+    >
+      <p
+        className={`${
+          isSelected ? 'pds2-text-text-brand Body2Semibold' : 'pds2-text-text-01 Body2Medium'
+        }`}
+      >
+        {title}
+      </p>
+    </div>
+  );
+}

package/src/atoms/single-input-chip/types.ts

@@ -0,0 +1,6 @@
+export type TSingleInputChipProps = {
+  title: string;
+  isSelected?: boolean;
+  isDisabled?: boolean;
+  onSelect?: () => void;
+};

package/src/atoms/spinner.tsx

@@ -0,0 +1,33 @@
+type TSpinner = {
+  className?: string;
+  size?: number;
+};
+
+const Pds2Spinner = ({ className = '', size = 40 }: TSpinner): JSX.Element => {
+  return (
+    <div className={`pds2-w-fit pds2-flex pds2-justify-center pds2-items-center ${className}`}>
+      <svg
+        className="pds2-animate-spin"
+        id="svg-spinner"
+        xmlns="http://www.w3.org/2000/svg"
+        width={size}
+        height={size}
+        viewBox="0 0 48 48"
+        fill="currentColor"
+      >
+        <circle cx="24" cy="4" r="2.5" className="fill-current opacity-100" />
+        <circle cx="12.19" cy="7.86" r="2.5" className="fill-current opacity-90" />
+        <circle cx="5.02" cy="17.68" r="2.5" className="fill-current opacity-80" />
+        <circle cx="5.02" cy="30.32" r="2.5" className="fill-current opacity-70" />
+        <circle cx="12.19" cy="40.14" r="2.5" className="fill-current opacity-60" />
+        <circle cx="24" cy="44" r="2.5" className="fill-current opacity-50" />
+        <circle cx="35.81" cy="40.14" r="2.5" className="fill-current opacity-40" />
+        <circle cx="42.98" cy="30.32" r="2.5" className="fill-current opacity-30" />
+        <circle cx="42.98" cy="17.68" r="2.5" className="fill-current opacity-20" />
+        <circle cx="35.81" cy="7.86" r="2.5" className="fill-current opacity-10" />
+      </svg>
+    </div>
+  );
+};
+
+export default Pds2Spinner;

package/src/atoms/text-separator.tsx

@@ -0,0 +1,11 @@
+const TextSeparator = ({ title }: { title: string }) => {
+  return (
+    <div className="pds2-relative pds2-flex pds2-flex-row pds2-items-center pds2-gap-16">
+      <div className="pds2-w-full pds2-h-1 pds2-bg-border-03"></div>
+      <div className="pds2-text-text-04 Body2Regular pds2-text-center pds2-min-w-max">{title}</div>
+      <div className="pds2-w-full pds2-h-1 pds2-bg-border-03"></div>
+    </div>
+  );
+};
+
+export default TextSeparator;

package/src/index.css

@@ -0,0 +1,118 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+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;
+}

package/src/main.tsx

@@ -0,0 +1,313 @@
+import { ABHA_AUTH_FLOW_METHOD } from '@elixir/types';
+import { setEnv } from 'apis';
+import { TAuthVerifyV2Response } from 'apis/src/types/aorta-go';
+import { createRoot, Root } from 'react-dom/client';
+import 'ui/styles.css';
+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 { handleSendEvent } from '@elixir/utils';
+
+const trackAbhaEvent = ({ name, data = {} }: { name: string; data?: Record<string, any> }) => {
+
+  const eventData = {
+    ...data,
+  };
+
+  handleSendEvent({
+    eventName: name,
+    eventData,
+  });
+
+  window.curio?.pushToMixpanel?.(name, eventData);
+};
+
+export type TMethod = 'login_with_abha' | 'create_abha_with_mobile' | 'login_or_create_abha';
+
+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;
+  };
+  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 } = abhaData || {};
+  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({
+    // TODO: Change this to the actual client id
+    clientId,
+    env: import.meta.env.VITE_APP_ENV === 'PROD' ? 'PROD' : 'DEV',
+    ...(headers && { extraHeaders: headers }),
+  });
+
+  const screenName = SCREEN_NAMES.LOGIN_OR_CREATE_ABHA;
+
+  useAuthAbhaStore.getState().setInitState({
+    screen: [screenName],
+    urlParams,
+  });
+
+  useAuthAbhaStore.getState().setAbhaAuthFlowMethod(ABHA_AUTH_FLOW_METHOD.MOBILE);
+  const regex = /[^0-9]/g;
+  const mobileNumber = mobile || window.EkaAbha?.mobileNumber;
+  const regexMobileNumber = mobileNumber?.replace(regex, '');
+  const validMobile = regexMobileNumber?.slice(-10);
+
+  if (validMobile && validMobile.length === 10) {
+    // if it valid mobile number then set it in the store
+    useAuthAbhaStore.getState().setInitAbhaAppMobileNumber(validMobile);
+  }
+
+  const closeAbhaApp = () => {
+
+    trackAbhaEvent({
+      name: 'connectivity-debug-onclose',
+      data: {
+        platform: clientId,
+        line: 226,
+        function: "closeAbhaApp",
+        page: "main.tsx.tsx",
+        flow: "debug",
+      },
+    });
+    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');
+    },
+  });
+}