@eka-care/abha-stg 0.1.0 → 0.1.2

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

@@ -1,168 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,101 +0,0 @@
-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

@@ -1,147 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,83 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,99 +0,0 @@
-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;