@eka-care/abha 0.0.1 → 0.0.2

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'
+      }`}
+    >
+      {/* 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 '@elixir/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;

package/src/molecules/abha/spaced-input-component.tsx

@@ -0,0 +1,150 @@
+import { useRef, useState } from 'react';
+
+type SpacedInputComponentProps = {
+  numberOfInputs: number;
+  length?: number;
+  placeholder?: string;
+  setIsValid?: (val: boolean) => void;
+  onSubmit: ({ inputVal }: { inputVal: string }) => void;
+  error?: string | null;
+  containerClassName?: string;
+  setError?: (val: string | null) => void;
+};
+
+const SpacedInputComponent = ({
+  numberOfInputs,
+  length = 1,
+  placeholder = '',
+  setIsValid,
+  onSubmit,
+  error,
+  containerClassName,
+  setError,
+}: SpacedInputComponentProps) => {
+  const inputRefs = useRef<HTMLInputElement[]>([]);
+  const [inputValues, setInputValues] = useState<string[]>(Array(numberOfInputs).fill(''));
+
+  const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>, index: number) => {
+    if (setError) setError(null);
+    const value = e.target.value;
+
+    const isValueNan = isNaN(Number(value));
+    if (isValueNan) return;
+
+    // To autoread OTP from keyboard clipboard
+    if (value.trim().length === numberOfInputs * length) {
+      handleClipboardOtp({
+        otpValue: value,
+        index: 0,
+      });
+      return;
+    }
+    const currentValues = [...inputValues];
+    currentValues[index] = value;
+    const totalLength = currentValues.join('').length;
+    if (totalLength > numberOfInputs * length) return;
+
+    // Update current input value
+    setInputValues(currentValues);
+
+    if (totalLength === numberOfInputs * length) {
+      setIsValid?.(true);
+      onSubmit({ inputVal: currentValues.join('') });
+    } else {
+      setIsValid?.(false);
+    }
+
+    // Move to next input if current is full
+    if (value.length === length && index < numberOfInputs - 1) {
+      inputRefs.current[index + 1]?.focus();
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>, index: number) => {
+    if (e.key === 'Backspace' && !inputValues[index] && index > 0) {
+      inputRefs.current[index - 1]?.focus();
+      setInputValues((prev) => {
+        const newValues = [...prev];
+        newValues[index - 1] = '';
+        return newValues;
+      });
+    }
+  };
+
+  const handlePaste = (e: React.ClipboardEvent<HTMLInputElement>, index: number) => {
+    e.preventDefault();
+    const pastedData = e.clipboardData.getData('text').replace(/\D/g, ''); // Only keep digits
+
+    if (!pastedData) return;
+
+    const maxLength = numberOfInputs * length;
+    const validPastedData = pastedData.slice(0, maxLength);
+    handleClipboardOtp({
+      otpValue: validPastedData,
+      index,
+    });
+  };
+
+  const handleClipboardOtp = ({ otpValue, index }: { otpValue: string; index: number }) => {
+    const chunks = otpValue.match(new RegExp(`.{1,${length}}`, 'g')) || [];
+
+    const newValues = [...inputValues];
+
+    chunks.forEach((chunk, i) => {
+      if (index + i < numberOfInputs) {
+        newValues[index + i] = chunk;
+      }
+    });
+
+    setInputValues(newValues);
+
+    // Focus the next empty input or the last input
+    const nextEmptyIndex = newValues.findIndex((val, i) => i >= index && !val);
+    if (nextEmptyIndex !== -1) {
+      inputRefs.current[nextEmptyIndex]?.focus();
+    } else {
+      inputRefs.current[numberOfInputs - 1]?.focus();
+    }
+
+    // Hit endpoint if all inputs are filled
+    if (newValues.join('').length === numberOfInputs * length) {
+      setIsValid?.(true);
+      onSubmit({ inputVal: newValues.join('') });
+    } else {
+      setIsValid?.(false);
+    }
+  };
+
+  return (
+    <div
+      className={`pds2-flex pds2-justify-center pds2-items-center pds2-space-x-8 ${containerClassName}`}
+    >
+      {Array.from({ length: numberOfInputs }).map((_, index) => (
+        <label
+          key={index}
+          className={`focus-within:pds2-border-border-brand-01 pds2-border ${error ? 'pds2-border-border-error' : 'pds2-border-border-03'} pds2-rounded-12 pds2-bg-bg-white`}
+        >
+          <input
+            autoFocus={index === 0 ? true : false}
+            placeholder={placeholder}
+            value={inputValues[index]}
+            key={index}
+            type="text"
+            inputMode="numeric"
+            pattern="[0-9]*"
+            // maxLength={length}
+            onPaste={(e) => handlePaste(e, index)}
+            ref={(el) => {
+              if (el) inputRefs.current[index] = el;
+            }}
+            onChange={(e) => handleOnChange(e, index)}
+            onKeyDown={(e) => handleKeyDown(e, index)}
+            className={`pds2-w-full pds2-text-center pds2-px-16 pds2-h-48 pds2-rounded-12 pds2-outline-none pds2-bg-transparent`}
+          />
+        </label>
+      ))}
+    </div>
+  );
+};
+
+export default SpacedInputComponent;

package/src/molecules/copyright-year.tsx

@@ -0,0 +1,16 @@
+import { useEffect, useState } from 'react';
+
+const CopyrightYearComponent = () => {
+  const [year, setYear] = useState<number>(new Date().getFullYear());
+
+  useEffect(() => {
+    setYear(new Date().getFullYear());
+  }, []);
+  return (
+    <div className="pds2-absolute pds2-bottom-5 BodyRegular pds2-text-darwin-neutral-600">
+      {`Copyright © ${year} eka.care`}
+    </div>
+  );
+};
+
+export default CopyrightYearComponent;

package/src/molecules/exit-popup/index.tsx

@@ -0,0 +1,99 @@
+import Pds2CustomButton from '../../atoms/button/custom-button';
+import useAuthAbhaStore from '../../stores/auth-abha-store';
+import { handleSendEvent } from '@elixir/utils';
+import { ABHA_AUTH_FLOW_METHOD } from '@elixir/types';
+
+const ExitPopup = ({ open, setOpen }: { open: boolean; setOpen: (val: boolean) => void }) => {
+  // State selectors from ABHA auth store
+  const goBackLoginScreen = useAuthAbhaStore((state) => state.goBackLoginScreen);
+  const clientId = useAuthAbhaStore((state) => state.clientId);
+  const isEkaAppLogin = useAuthAbhaStore((state) => state.isEkaAppLogin);
+  const isNewLoginOrCreateFlow = useAuthAbhaStore((state) => state.isNewLoginOrCreateFlow);
+  const setAbhaAuthFlowMethod = useAuthAbhaStore((state) => state.setAbhaAuthFlowMethod);
+  const txnId = useAuthAbhaStore((state) => state.txnId);
+
+  /**
+   * Event tracker for ABHA-related events.
+   * Sends data to internal logger and Mixpanel with base context.
+   */
+  const trackAbhaEvent = ({ name, data = {} }: { name: string; data?: Record<string, any> }) => {
+    const baseProps = {
+      login_platform: clientId,
+      is_eka_app_login: isEkaAppLogin ? 'true' : 'false',
+      is_new_login_or_create_flow: isNewLoginOrCreateFlow ? 'true' : 'false',
+      txn_id : txnId || 'missing txnId',
+    };
+
+    const eventData = {
+      ...baseProps,
+      ...data,
+    };
+
+    // Mixpanel tracking
+    handleSendEvent({
+      eventName: name,
+      eventData,
+    });
+
+    window.curio?.pushToMixpanel?.(name, eventData);
+  };
+
+  /**
+   * Handles the user's confirmation to exit the ABHA flow.
+   * Resets flow to mobile method and navigates back to login.
+   */
+  const handleExitConfirmed = () => {
+    trackAbhaEvent({
+      name: 'abha_exit_popup_confirmed',
+      data: {
+        action: 'go_back_to_login_screen',
+      },
+    });
+
+    // Reset flow method to mobile as default
+    setAbhaAuthFlowMethod(ABHA_AUTH_FLOW_METHOD.MOBILE);
+    // Navigate back to login screen
+    goBackLoginScreen();
+  };
+
+  return (
+    <>
+      {open ? (
+        <div className="pds2-z-[60]">
+          <div
+            className="pds2-flex pds2-items-center pds2-justify-center pds2-fixed pds2-top-0 pds2-inset-0 pds2-bg-text-black pds2-bg-opacity-60 pds2-transition-opacity pds2-duration-300"
+            onClick={() => setOpen(false)}
+          />
+          <div className="pds2-fixed pds2-top-1/2 pds2-transform pds2--translate-y-1/2 pds2-px-24">
+            <div className="pds2-flex pds2-flex-col pds2-space-y-16 pds2-bg-bg-white pds2-rounded-16 pds2-w-full pds2-p-24">
+              <h2 className="pds2-text-text-black pds2-font-500 pds2-text-18">
+                Are you sure you want to exit?
+              </h2>
+              <p className="pds2-text-text-03 pds2-text-14 pds2-font-400">
+                Confirm if you'd like to exit. Any unsaved changes may be lost.
+              </p>
+              <div className="pds2-flex pds2-justify-end pds2-gap-x-8">
+                <Pds2CustomButton
+                  title="Not yet"
+                  padding="pds2-px-12 pds2-py-8"
+                  className="pds2-text-text-error pds2-font-600 pds2-text-16 pds2-border-none"
+                  width="pds2-w-fit"
+                  onClick={() => setOpen(false)}
+                />
+                <Pds2CustomButton
+                  title="Yes, I'm done"
+                  padding="pds2-px-12 pds2-py-8"
+                  className="pds2-text-text-brand pds2-font-600 pds2-text-16 pds2-border-none"
+                  width="pds2-w-fit"
+                  onClick={handleExitConfirmed}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      ) : null}
+    </>
+  );
+};
+
+export default ExitPopup;

package/src/molecules/pds2-otp-component/index.tsx

@@ -0,0 +1,148 @@
+import { CircleExclamationRegularIcon } from '@elixir/icons';
+import React, { useState } from 'react';
+import ReactOTPInput, { AllowedInputTypes } from 'react-otp-input';
+import { LinkButton, SecondaryButton } from 'ui';
+import Pds2OtpInput from '../../atoms/pds2-otp-input';
+
+const OtpErrorComponent = ({ errorMessage }: { errorMessage: string }) => {
+  return (
+    <div className="pds2-flex pds2-space-x-4 pds2-items-center pds2-text-text-error">
+      <div className="pds2-p-8">
+        <CircleExclamationRegularIcon className="pds2-w-12 pds2-h-12" />
+      </div>
+      <div className="Body2Regular">{errorMessage}</div>
+    </div>
+  );
+};
+
+const ResendCodeComponent = ({ handleResendCode }: { handleResendCode: () => void }) => {
+  return (
+    <div className="pds2-flex pds2-justify-center pds2-py-16 pds2-text-text-doc">
+      <div onClick={handleResendCode} role="button">
+        Resend code
+      </div>
+    </div>
+  );
+};
+
+const ResendTimerComponent = ({ secondsRemaining }: { secondsRemaining: string }) => {
+  return (
+    <div className="BodyRegular pds2-text-text-03 pds2-text-center pds2-py-16">{`Resend in 00:${secondsRemaining}`}</div>
+  );
+};
+
+type TOtpComponentProps = {
+  /**
+   * Number of fields in the OTP input
+   */
+  numberOfFields: number;
+  inputType?: AllowedInputTypes;
+  /**
+   * Error message to be displayed
+   */
+  errorMessage?: string | null;
+  /**
+   * Function to set error message
+   */
+  setErrorMessage: (message: string) => void;
+  /**
+   * Function to handle OTP submission
+   */
+  onSubmit: ({ otp }: { otp: string }) => void;
+  /**
+   * Function to handle resend code
+   */
+  onResendCode: () => void;
+  /**
+   * Function to reset identifier entered by the user
+   */
+  onResetIdentifier: () => void;
+  /**
+   * Function to set the enable/disable state of button
+   */
+  setIsValid?: (val: boolean) => void;
+};
+
+const Pds2OtpComponent = ({
+  numberOfFields,
+  inputType = 'tel',
+  errorMessage,
+  setErrorMessage,
+  onSubmit,
+  onResendCode,
+  onResetIdentifier,
+  setIsValid,
+}: TOtpComponentProps) => {
+  const [otp, setOtp] = useState('');
+  const [timerSeconds, setTimerSeconds] = useState<number>(30);
+  const resendTimerIntervalId = React.useRef<NodeJS.Timeout>();
+  const [activeInput, setActiveInput] = useState<number>(-1);
+
+  const handleOtpChange = (newOtp: string) => {
+    setOtp(newOtp);
+    setErrorMessage('');
+
+    if (newOtp.length === numberOfFields) {
+      setIsValid?.(true);
+      onSubmit({ otp: newOtp });
+      // setTimerSeconds(30);
+    } else {
+      setIsValid?.(false);
+    }
+  };
+
+  React.useEffect(() => {
+    resendTimerIntervalId.current = setInterval(() => {
+      setTimerSeconds((timer) => timer - 1);
+    }, 1000);
+
+    return () => {
+      clearInterval(resendTimerIntervalId.current);
+    };
+  }, []);
+
+  React.useEffect(() => {
+    if (timerSeconds < 1) {
+      clearInterval(resendTimerIntervalId.current);
+      setTimerSeconds(-1);
+    }
+  }, [timerSeconds]);
+
+  const handleResendCodeClick = () => {
+    setOtp('');
+    setTimerSeconds(30);
+    resendTimerIntervalId.current = setInterval(() => {
+      setTimerSeconds((timer) => timer - 1);
+    }, 1000);
+    onResendCode();
+  };
+
+  return (
+    <div className="pds2-space-y-8">
+      <ReactOTPInput
+        inputStyle="pds2-rounded-8 pds2-border-1 pds2-p-10 pds2-border-border-03 BodyRegular pds2-w-36 pds2-bg-bg-white pds2-text-text-04 placeholder:pds2-text-text-03 pds2-outline-none pds2-text-center"
+        inputType={inputType}
+        value={otp}
+        onChange={handleOtpChange}
+        numInputs={numberOfFields}
+        renderInput={(props) => Pds2OtpInput({ ...props, isError: errorMessage ? true : false })}
+        skipDefaultStyles={true}
+        renderSeparator={() => <div className="pds2-p-4" />}
+        shouldAutoFocus={true}
+      />
+      {errorMessage || timerSeconds === -1 ? (
+        <div className="pds2-flex pds2-flex-col pds2-items-center pds2-space-x-8">
+          {errorMessage ? <OtpErrorComponent errorMessage={errorMessage} /> : null}
+          {timerSeconds === -1 ? (
+            <ResendCodeComponent handleResendCode={handleResendCodeClick} />
+          ) : null}
+        </div>
+      ) : null}
+      {timerSeconds > -1 ? (
+        <ResendTimerComponent secondsRemaining={timerSeconds.toString().padStart(2, '0')} />
+      ) : null}
+    </div>
+  );
+};
+
+export default Pds2OtpComponent;

package/src/organisms/abha/abha-header.tsx

@@ -0,0 +1,25 @@
+const AbhaHeader = ({
+  prefixIcon = <div className="pds2-w-24 pds2-h-24" />,
+  title,
+  suffixIcon = <div className="pds2-w-24 pds2-h-24" />,
+  className = '',
+}: {
+  prefixIcon?: React.ReactNode;
+  title: string;
+  suffixIcon?: React.ReactNode;
+  className?: string;
+}) => {
+  return (
+    <div
+      className={`pds2-flex pds2-items-center pds2-justify-between pds2-w-full pds2-p-16 pds2-sticky pds2-top-0 pds2-z-50 pds2-bg-bg-white ${className}`}
+    >
+      {prefixIcon}
+      <div className="pds2-flex-1 Heading4Semibold pds2-text-center pds2-text-text-black">
+        {title}
+      </div>
+      {suffixIcon}
+    </div>
+  );
+};
+
+export default AbhaHeader;

package/src/organisms/abha/error-bottom-sheet.tsx

@@ -0,0 +1,27 @@
+import AbhaBottomSheet from '../../molecules/abha/bottom-sheet';
+import useAuthAbhaStore from '../../stores/auth-abha-store';
+type TAbhaErrorBottomSheetProps = {
+  onSubmitClick: () => void;
+};
+const AbhaErrorBottomSheet = ({ onSubmitClick }: TAbhaErrorBottomSheetProps) => {
+  const bottomsheetErrorInfo = useAuthAbhaStore((state) => state.bottomsheetErrorInfo);
+  const setBottomsheetErrorInfo = useAuthAbhaStore((state) => state.setBottomsheetErrorInfo);
+  const handleCloseBottomsheet = () => {
+    setBottomsheetErrorInfo(null);
+  };
+
+  return (
+    <AbhaBottomSheet
+      description={bottomsheetErrorInfo?.title || 'Something went wrong'}
+      subText={bottomsheetErrorInfo?.description || 'Something went wrong'}
+      submitText={bottomsheetErrorInfo?.cta.title || 'Retry'}
+      onSubmitClick={onSubmitClick}
+      iconUrl={bottomsheetErrorInfo?.img}
+      isBottomSheetOpen={bottomsheetErrorInfo ? true : false}
+      onBottomSheetClose={handleCloseBottomsheet}
+      shouldCloseOnClickOutside={false}
+    />
+  );
+};
+
+export default AbhaErrorBottomSheet;

package/src/organisms/abha/otp-card.tsx

@@ -0,0 +1,99 @@
+import { useEffect, useState } from 'react';
+import SpacedInputComponent from '../../molecules/abha/spaced-input-component';
+
+function formatTime(timeLeft: number): React.ReactNode {
+  const minutes = Math.floor(timeLeft / 60);
+  const seconds = timeLeft % 60;
+  return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+}
+
+type TResendTimerProps = {
+  time: number;
+  onResendOtpClick: () => void;
+  error?: string | null;
+};
+
+const ResendTimer = ({ time, onResendOtpClick, error }: TResendTimerProps) => {
+  const [timeLeft, setTimeLeft] = useState(time);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setTimeLeft(timeLeft - 1);
+    }, 1000);
+    return () => clearInterval(interval);
+  }, [timeLeft]);
+
+  if (timeLeft > 0) {
+    return (
+      <div className="pds2-flex pds2-justify-between pds2-items-center pds2-w-full">
+        <div className="pds2-text-text-04">
+          <span className="Body3CapsSemibold">Resend OTP in</span>{' '}
+          <span className="Body3CapsSemibold">{formatTime(timeLeft)}</span>
+        </div>
+        {/* {error && <div className="Body3Semibold pds2-text-text-error">Invalid OTP</div>} */}
+      </div>
+    );
+  }
+
+  return (
+    <div className="pds2-flex pds2-justify-between pds2-items-center pds2-w-full">
+      <button
+        className="Body3CapsSemibold pds2-text-text-brand cursor-pointer"
+        onClick={() => {
+          setTimeLeft(time);
+          onResendOtpClick();
+        }}
+      >
+        Resend OTP
+      </button>
+      {/* {error && <div className="Body3Semibold pds2-text-text-error">Invalid OTP</div>} */}
+    </div>
+  );
+};
+
+type TAbhaOtpCardProps = {
+  otpSentToText: string;
+  onOtpCompletion: ({ otp }: { otp: string }) => void;
+  onResendOtpClick: () => void;
+  setIsValid: (isValid: boolean) => void;
+  error?: string | null;
+  prefixIcon?: React.ReactNode;
+};
+
+const AbhaOtpCard = ({
+  otpSentToText,
+  onOtpCompletion,
+  onResendOtpClick,
+  setIsValid,
+  error,
+  prefixIcon = (
+    <img
+      src="https://cdn.eka.care/vagus/cm5mcdm3h00070tfs9fjkepff.webp"
+      alt="adhaar"
+      className="pds2-w-48"
+    />
+  ),
+}: TAbhaOtpCardProps) => {
+  return (
+    <div className="pds2-flex pds2-flex-col pds2-w-full pds2-p-16 pds2-rounded-16 pds2-bg-bg-01 pds2-space-y-8">
+      <div className="pds2-flex pds2-items-center pds2-space-x-16">
+        <div className="Body1Regular pds2-text-text-01 pds2-flex-1">
+          {otpSentToText}
+          <sup className="pds2-text-text-error Body3Semibold"> *</sup>
+        </div>
+        {prefixIcon}
+      </div>
+      <SpacedInputComponent
+        numberOfInputs={6}
+        length={1}
+        onSubmit={({ inputVal }) => onOtpCompletion({ otp: inputVal })}
+        setIsValid={setIsValid}
+        error={error}
+      />
+      <ResendTimer time={60} onResendOtpClick={onResendOtpClick} error={error} />
+      {error && <div className="Body3Semibold pds2-text-text-error">{error}</div>}
+    </div>
+  );
+};
+
+export default AbhaOtpCard;