@eka-care/abha-stg 0.1.34 → 0.1.36

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

@@ -0,0 +1,168 @@
+import { useRef, useState, useEffect } 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;
+  initialValues?: string[]; 
+  disabled?: boolean;       
+};
+
+const SpacedInputComponent = ({
+  numberOfInputs,
+  length = 1,
+  placeholder = '',
+  setIsValid,
+  onSubmit,
+  error,
+  containerClassName,
+  setError,
+  initialValues,
+  disabled = false,
+}: SpacedInputComponentProps) => {
+  const inputRefs = useRef<HTMLInputElement[]>([]);
+  const [inputValues, setInputValues] = useState<string[]>(Array(numberOfInputs).fill(''));
+
+  // Prefill input values on mount
+  useEffect(() => {
+    if (initialValues && initialValues.length === numberOfInputs) {
+      setInputValues(initialValues);
+      if (initialValues.join('').length === numberOfInputs * length) {
+        setIsValid?.(true);
+      }
+    }
+  }, [initialValues, numberOfInputs, length, setIsValid]);
+
+  const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>, index: number) => {
+    if (disabled) return; // Don't allow editing if disabled
+    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 (disabled) return;
+    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) => {
+    if (disabled) return;
+    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 && !disabled}
+            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)}
+            disabled={disabled}
+            className={`pds2-w-full pds2-text-center pds2-h-56 pds2-rounded-12 pds2-outline-none pds2-bg-transparent disabled:pds2-text-text-04`}
+          />
+        </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,101 @@
+import Pds2CustomButton from '../../atoms/button/custom-button';
+import { ABHA_AUTH_FLOW_METHOD } from '../../constants/constants';
+import useAuthAbhaStore from '../../stores/auth-abha-store';
+import handleSendEvent from '../../utils/send-event-utils';
+
+
+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-h-full pds2-z-50 pds2-flex pds2-items-center pds2-justify-center pds2-absolute 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-z-50 pds2-absolute pds2-top 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,147 @@
+import { CircleExclamationRegularIcon } from '@eka-care/icons';
+import React, { useState } from 'react';
+import ReactOTPInput, { AllowedInputTypes } from 'react-otp-input';
+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/abha-stepper.tsx

@@ -0,0 +1,83 @@
+import { useEffect } from "react";
+import useAuthAbhaStore from "../../stores/auth-abha-store";
+
+const AbhaStepper = () => {
+  const activeScreens = useAuthAbhaStore((state) => state.screen);
+  const currentStepperIndex = useAuthAbhaStore((state) => state.currentStepperIndex);
+  const setCurrentStepperIndex = useAuthAbhaStore((state) => state.setCurrentStepperIndex);
+  const currentScreen = activeScreens[activeScreens.length - 1];
+  const selectedMethod = useAuthAbhaStore((state) => state.abhaAuthFlowMethod);
+
+  // Map screenIndex to arrays of screen names
+  // these will be used if login flow is through mobile or adhaar only
+  const screenMap: { [key: number]: string[] } = {
+    1: [
+      "LOGIN_WITH_ABHA",
+      "LOGIN_OR_CREATE_ABHA","CREATE_ABHA_WITH_AADHAAR"
+    ],
+    2: [
+      "VERIFY_OTP_LOGIN_WITH_ABHA",
+      "ABHA_OTP_AND_MOBILE"
+    ],
+    3: [
+      "ABHA_PHONE_NUMBER_VERIFICATION",
+      "SELECT_ABHA_FROM_LIST",
+      "SELECT_EKA_PROFILE",
+      "CREATE_ABHA_ADDRESS",
+      "CREATE_ABHA_WITH_AADHAAR",
+      "CREATE_PHR_EKA_PROFILE",
+      "CREATE_EKA_PROFILE",
+    ],
+  };
+
+  useEffect(() => {
+    const foundPage = Object.entries(screenMap).find(([_, screens]) =>
+      screens.includes(currentScreen)
+    )?.[0];
+
+    if (foundPage) {
+      // case if login flow is phr address or abha num 
+      // name screen as last directly
+      if(currentScreen === "VERIFY_OTP_LOGIN_WITH_ABHA" && (selectedMethod==="abha_number" || selectedMethod==="phr_address")){
+        setCurrentStepperIndex(3);
+        return;
+      }
+      if(Number(foundPage)>=currentStepperIndex){
+        setCurrentStepperIndex(Number(foundPage));
+      }
+    }
+  }, [activeScreens]);
+  
+  const currentScreenIndex = Array.from({ length: 4 }, (_, i) => {
+    const index = i + 1;
+    return (
+      <div
+        key={index}
+        className={`pds2-relative pds2-p-0 pds2-text-center pds2-h-23 pds2-w-23 pds2-rounded-11 pds2-transition-all pds2-ease-in-out pds2-duration-250 pds2-cursor-pointer pds2-text-bg-white ${
+          index <= currentStepperIndex ? "pds2-bg-text-brand" : "pds2-bg-bg-secondary"
+        }`}
+      >
+        {index}
+      </div>
+    );
+  });
+
+  
+  const progressValue =
+    currentStepperIndex === 1 ? 20 : currentStepperIndex === 2 ? 50 : currentStepperIndex === 3 ? 80 : 100;
+
+  return (
+    <div className="pds2-bg-bg-01 pds2-flex pds2-w-full pds2-place-items-center pds2-justify-center pds2-relative pds2-px-60 pds2-py-20">
+      <div className="pds2-flex pds2-flex-row pds2-justify-between pds2-items-center pds2-gap-5 pds2-h-auto pds2-w-full pds2-z-10">
+        {currentScreenIndex}
+      </div>
+      <progress
+        className="abhaStepper pds2-absolute pds2-w-full pds2-h-2 pds2-px-60"
+        max={100}
+        value={progressValue}
+      />
+    </div>
+  );
+};
+
+export default AbhaStepper;

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-white 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;