saafe-redirection-flow 2.0.0

package/src/pages/accounts/DiscoverAccount.tsx

@@ -0,0 +1,751 @@
+import AlertComp from '@/components/alert/alert'
+import OuterCard from '@/components/cards/OuterCard'
+import SectionTitle from '@/components/title/SectionTitle'
+import { AnimatedButton } from '@/components/ui/animatedButton'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { MobileFooter } from '@/components/ui/mobile-footer'
+import Modal from '@/components/ui/modal'
+import { OTPInputComponent } from '@/components/ui/otp-input'
+import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
+import WebFooter from '@/components/ui/web-footer'
+import { Info, PlusIcon, X } from 'lucide-react'
+import { useEffect, useMemo, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { trackEvent, EVENTS } from '@/utils/posthog'
+import { useTranslation } from 'react-i18next'
+import { useMutation, useQuery } from '@tanstack/react-query'
+import { accountService } from '@/services/api'
+import { useMediaQuery } from '@/hooks/use-media-query'
+import { useFipStore } from '@/store/fip.store'
+import logo from '../../assets/brand/saafe-logo.svg'
+import { z } from 'zod'
+import { Calendar } from '@/components/ui/calendar'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { CalendarIcon } from 'lucide-react'
+import { DropdownNavProps } from 'react-day-picker'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { DropdownProps } from 'react-day-picker'
+import { useSetPageTitle } from '@/hooks/use-page-title'
+import { useRedirectStore } from '@/store/redirect.store'
+import { BottomSheet } from '@/components/ui/bottom-sheet'
+
+interface DiscoverAccountProps {
+  state?: {
+    category: string
+    selectedFips?: string[]
+  }
+  currentCategory?: string | null
+}
+
+const AddNumberModalContent = ({ showModal, setShowModal, t, addNewNoQuery, handleAddNumber }: {
+  showModal: { number: string; error: string };
+  setShowModal: React.Dispatch<React.SetStateAction<{
+    isOpen: boolean;
+    title: string;
+    content: React.ReactNode | null;
+    number: string;
+    otp: string | null;
+    error: string;
+  }>>;
+  t: (key: string) => string;
+  addNewNoQuery: {
+    mutate: (data: undefined, options: {
+      onSuccess: () => void;
+      onError: (error: Error) => void;
+    }) => void;
+  };
+  handleAddNumber: (number: string) => void;
+}) => {
+  const [inputValue, setInputValue] = useState({ number: showModal.number, error: showModal.error });
+
+  useEffect(() => {
+    setInputValue({ number: showModal.number, error: showModal.error });
+  }, [showModal.number]);
+
+  return useMemo(() => (
+    <div className='flex flex-col items-center gap-5'>
+      <p className='text-base font-normal dark:text-muted-secondary'>
+        {t('pleaseEnterTheNewNumberYouWishToLinkBelow')}
+      </p>
+      <Input
+        type="tel"
+        inputMode="numeric"
+        className='h-12'
+        placeholder={t('mobileNoPlaceholder')}
+        maxLength={10}
+        value={inputValue.number}
+        onChange={e => {
+          const newValue = e.target.value;
+          const numericValue = newValue.replace(/[^0-9]/g, '');
+          setInputValue({ number: numericValue, error: '' });
+          setShowModal(prev => ({
+            ...prev,
+            number: numericValue,
+            error: numericValue.length === 10 ? '' : 'Please enter a valid 10-digit mobile number'
+          }));
+        }}
+      />
+      {inputValue.error && (
+        <p className="text-red-500 text-sm mt-[-20px]">{inputValue.error}</p>
+      )}
+      <AnimatedButton
+        className='w-full h-11 mt-2'
+        onClick={() => {
+          if (inputValue.number.length !== 10) {
+            setInputValue({ number: inputValue.number, error: 'Please enter a valid 10-digit mobile number' });
+            setShowModal(prev => ({ ...prev, error: 'Please enter a valid 10-digit mobile number' }));
+            return;
+          }
+          addNewNoQuery.mutate(undefined, {
+            onSuccess: () => {
+              handleAddNumber(inputValue.number)
+            },
+            onError: (error: Error) => {
+              // console.error(error)
+              setInputValue({ number: inputValue.number, error: error.response?.data?.errorCode || 'Something went wrong' });
+            }
+          })
+        }}
+      >
+        {t('login.getOtp')}
+      </AnimatedButton>
+    </div>
+  ), [inputValue, showModal.error, t, setShowModal, addNewNoQuery, handleAddNumber])
+}
+
+const aadhaarSchema = z.object({
+  value: z.string()
+    .min(12, 'Aadhaar number must be 12 digits')
+    .max(12, 'Aadhaar number must be 12 digits')
+    .regex(/^\d+$/, 'Aadhaar number must contain only digits')
+})
+
+const panSchema = z.object({
+  value: z.string()
+    .min(10, 'PAN number must be 10 characters')
+    .max(10, 'PAN number must be 10 characters')
+    .regex(/^[A-Z]{5}[0-9]{4}[A-Z]{1}$/, 'Invalid PAN format. Format: ABCDE1234F')
+})
+
+const DiscoverAccount = ({ state, currentCategory }: DiscoverAccountProps) => {
+  useSetPageTitle('Discover accounts')
+  const navigate = useNavigate()
+  const { decodedInfo } = useRedirectStore()
+  const category = state?.category || currentCategory || 'BANKS'
+  const { t } = useTranslation()
+  const [validationError, setValidationError] = useState<{ [key: string]: string | null }>({
+    PAN: null,
+    AADHAAR: null
+  })
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false)
+  const [showAlert, setShowAlert] = useState(true)
+
+  // Format category name for display
+  const formatCategoryName = (name: string) => {
+    return name
+      .split('_')
+      .map(word => word.charAt(0) + word.slice(1).toLowerCase())
+      .join(' ')
+  }
+  const [showModal, setShowModal] = useState({
+    isOpen: false,
+    title: t('addNewMobileNumber'),
+    content: null as React.ReactNode,
+    number: '',
+    otp: null as string | null
+  })
+
+  // Detect mobile screens
+  const isMobile = useMediaQuery('(max-width: 768px)')
+
+  // FIP data from store
+  const {
+    selectedMobileNumber,
+    setSelectedMobileNumber,
+    identifiers,
+    setIdentifiers
+  } = useFipStore()
+
+  const getMobileNumbersQuery = useQuery({
+    queryKey: ['mobile-numbers'],
+    queryFn: async () => accountService.getMobileNumbers()
+  })
+
+  const addNewNoQuery = useMutation({
+    mutationFn: async () =>
+      accountService.addNewNumber({
+        value: showModal?.number || '',
+        type: 'MOBILE',
+        categoryType: 'STRONG'
+      }),
+    onSuccess: () => {
+      getMobileNumbersQuery.refetch()
+      setShowModal(old => ({ ...old, otp: null, error: '' }))
+    },
+    onError: error => {
+      setShowModal(old => ({ ...old, otp: null, error: error.response?.data?.errorCode || 'Something went wrong' }))
+    }
+  })
+
+  const verifyNewNoQuery = useMutation({
+    mutationFn: async () =>
+      accountService.verifyNewNumber({
+        phoneNumber: showModal?.number || '',
+        code: showModal?.otp || '',
+        otpUniqueID: addNewNoQuery?.data?.mobile?.otpUniqueID || '',
+        identifierType: 'MOBILE'
+      }),
+    onSuccess: () => {
+      getMobileNumbersQuery.refetch()
+      setShowModal({
+        isOpen: false,
+        title: 'Add new mobile number',
+        content: null,
+        number: '',
+        otp: null
+      })
+    },
+    onError: error => {
+      setShowModal(old => ({ ...old, otp: null, error: error.response?.data?.errorCode || 'Something went wrong' }))
+      // console.error(error)
+    }
+  })
+
+
+  const handleAddNumber = (value: string) => {
+
+    setShowModal(old => ({
+      ...old,
+      isOpen: true,
+      title: t('verifyNewMobileNumber'),
+      content: 'otp',
+      otp: null,
+      error: ''
+    }))
+  }
+
+  const openAddNumberModal = (currentNumber: string) => {
+    setShowModal(prev => ({
+      ...prev,
+      isOpen: true,
+      title: t('addNewMobileNumber'),
+      content: <AddNumberModalContent
+        showModal={{ ...showModal, number: currentNumber ? currentNumber : showModal.number }}
+        setShowModal={setShowModal}
+        t={t}
+        addNewNoQuery={addNewNoQuery}
+        handleAddNumber={(number: string) => handleAddNumber(number)}
+      />,
+      otp: null,
+      error: ''
+    }))
+  }
+
+  const handleDiscoverAccount = () => {
+    trackEvent(EVENTS.DISCOVER_ACCOUNT, { category })
+    // After discovering accounts, go back to account selection page
+    const result = [...identifiers]
+    const mobileIndex = result.findIndex(i => i.type === 'MOBILE')
+    result.splice(mobileIndex, 1, {
+      ...result[mobileIndex],
+      value: selectedMobileNumber
+    })
+    navigate('/link-accounts/discovery', {
+      state: {
+        category,
+        selectedFips: state?.selectedFips,
+        fromDiscovery: true
+      }
+    })
+  }
+
+  const handleCancel = () => {
+    // Go back to account selection
+    navigate('/link-accounts/banks', {
+      state: {
+        category,
+        selectedFips: state?.selectedFips
+      }
+    })
+  }
+
+  const handleCalendarChange = (
+    _value: string | number,
+    _e: React.ChangeEventHandler<HTMLSelectElement>,
+  ) => {
+    const _event = {
+      target: {
+        value: String(_value),
+      },
+    } as React.ChangeEvent<HTMLSelectElement>;
+    _e(_event);
+  };
+
+  const renderAddNumberButton = () => {
+    if (getMobileNumbersQuery?.data?.length >= 3) return null;
+
+    const button = (
+      <AnimatedButton
+        variant={'text'}
+        size={'text'}
+        className='text-primary'
+        onClick={() => openAddNumberModal(showModal.number)}
+      >
+        <PlusIcon /> {t('addNumber')}
+      </AnimatedButton>
+    );
+
+    if (isMobile) return button;
+
+    return (
+      <Modal
+        title={showModal.title}
+        open={showModal.isOpen}
+        className='w-[380px]'
+        onOpenChange={open =>
+          !open &&
+          setShowModal({
+            isOpen: open,
+            title: '',
+            content: null,
+            number: '',
+            otp: null,
+            error: ''
+          })
+        }
+      >
+        <Modal.Trigger>
+          {button}
+        </Modal.Trigger>
+        {showModal.content == 'otp' ? <div className='flex flex-col items-center gap-4'>
+          <OTPInputComponent
+            maxLength={4}
+            title=''
+            editable={true}
+            mobileNumber={showModal.number}
+            onResend={() => {
+              setShowModal(old => ({ ...old, otp: null, error: '' }))
+              addNewNoQuery.mutate(undefined, {
+                onSuccess: () => {
+                  setShowModal(old => ({ ...old, otp: null, error: '' }))
+                },
+                onError: (error: Error) => {
+                  setShowModal(old => ({ ...old, otp: null, error: error.response?.data?.errorMsg || 'Something went wrong' }))
+                  // console.error(error)
+                }
+              })
+            }}
+            countdownTime={18}
+            error={Boolean(showModal.error)}
+            errorMessage={showModal.error}
+            onChange={otp => {
+              setShowModal(old => ({ ...old, otp, error: '' }))
+            }}
+            handleEdit={() => {
+              setShowModal(old => ({ ...old, otp: null, error: '' }))
+              openAddNumberModal(showModal.number)
+            }}
+          />
+          <AnimatedButton
+            className='w-full h-11'
+            onClick={() => {
+              verifyNewNoQuery.mutate()
+            }}
+          >
+            Next
+          </AnimatedButton>
+        </div> : showModal.content}
+      </Modal>
+    );
+  };
+
+  return (
+    <div>
+      <div className='flex flex-col gap-1 w-full md:px-14 px-0 gap-2 md:mt-6 mt-0'>
+        {showAlert &&
+          <div className='mb-4'>
+            <AlertComp
+              icon={
+                <div className='flex items-center justify-center bg-yellow-600 p-2 rounded-full'>
+                  <Info
+                    strokeWidth='2.3'
+                    className='h-[18px] w-[18px] text-white'
+                  />
+                </div>
+              }
+              title={t('noAccountsFound')}
+              description={t('noAccountsFoundDescription')}
+              rightSection={
+                <AnimatedButton variant={'ghost'} size={'sm'} onClick={() => setShowAlert(false)}>
+                  <X />
+                </AnimatedButton>
+              }
+            />
+          </div>
+        }
+        <div className='flex items-center justify-between gap-2'>
+          <p className='text-md md:text-2xl font-semibold text-black dark:text-white'>
+            {t('keywords.Discover') +
+              ' ' +
+              t('keywords.your') +
+              ' ' +
+              t(`keywords.accounts`)}
+          </p>
+          <Modal title={false} withCloseIcon={true} className='w-[450px]'>
+            <Modal.Trigger>
+              <AnimatedButton variant={'ghost'} size={'sm'}>
+                <Info />
+              </AnimatedButton>
+            </Modal.Trigger>
+            <div className='flex flex-col items-center gap-4'>
+              <div className='flex items-center justify-center bg-gray-200/50 dark:bg-gray-100/50 p-3 rounded-full'>
+                <Info className='h-[32px] w-[32px]' />
+              </div>
+              <p className='text-[20px] md:text-2xl text-gray-900 font-semibold dark:text-white'>
+                Secure & Temporary Data Use
+              </p>
+              <Label className='text-sm md:text-lg text-gray-500 dark:text-gray-400 font-light'>
+                We use your PAN and Date of Birth only to discover your
+                accounts. This information is not stored and is used solely for
+                this process
+              </Label>
+              <Modal.Close className='w-full'>
+                <AnimatedButton className='w-full'>Yes, I Understand</AnimatedButton>
+              </Modal.Close>
+            </div>
+          </Modal>
+        </div>
+        <p className='text-sm md:text-lg text-consent-secondary mt-0 md:mt-1'>
+          Enter the following details as linked to your{' '}
+          {formatCategoryName(category).toLowerCase()} accounts
+        </p>
+        <SectionTitle
+          className='mt-4 mb-1'
+          title={t('mobileNo')}
+          rightSection={renderAddNumberButton()}
+        />
+        <Label className='text-sm text-consent-secondary font-light'>{t('mobileSubTitle')}</Label>
+        <div className='flex flex-col gap-1 w-full gap-2'>
+          <RadioGroup
+            value={selectedMobileNumber}
+            onValueChange={setSelectedMobileNumber}
+          >
+            <div className='grid md:grid-cols-3 sm:grid-cols-1 gap-4'>
+              {getMobileNumbersQuery?.data?.map(
+                (item: { value: string }, index: number) => (
+                  <OuterCard
+                    key={`${item.value} - ${index}`}
+                    selected={selectedMobileNumber === item.value.toString()}
+                    onSelect={() =>
+                      setSelectedMobileNumber(item.value.toString())
+                    }
+                  >
+                    <div className='flex items-center justify-between w-full gap-2'>
+                      <p
+                        className={`text-md truncate font-medium ${selectedMobileNumber == item.value.toString()
+                          ? 'text-primary'
+                          : ''
+                          }`}
+                      >
+                        {item.value}
+                      </p>
+                      <RadioGroupItem
+                        value={item.value.toString()}
+                        id={`radio-${item.value}`}
+                      />
+                    </div>
+                  </OuterCard>
+                )
+              )}
+            </div>
+          </RadioGroup>
+          <p className='text-sm text-muted-secondary font-light mt-1'>
+            {t('youCanAddUpTo3Numbers')}
+          </p>
+        </div>
+        {identifiers?.find(i => i.type == 'DOB') ? (
+          <>
+            <SectionTitle className='mt-6' title={`DOB*`} />
+            <div className='flex flex-col gap-1 md:w-[50%] w-full gap-2'>
+              <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
+                <PopoverTrigger asChild>
+                  <div className='flex h-[56px] w-full items-center justify-between rounded-md border bg-white border-gray-200 dark:border-gray-700 dark:bg-input/30 px-3 py-2 text-consent-primary dark:border-gray-700'>
+                    {identifiers?.find(i => i.type === 'DOB')?.value ? (
+                      <span>{new Date(identifiers.find(i => i.type === 'DOB')?.value || '').toLocaleDateString('en-IN', { year: 'numeric', month: 'long', day: 'numeric' })}</span>
+                    ) : (
+                      <span className='text-muted-foreground'>Pick a date</span>
+                    )}
+                    <CalendarIcon className='h-4 w-4 opacity-50' />
+                  </div>
+
+                </PopoverTrigger>
+                <PopoverContent className='w-auto p-0' align='start'>
+                  <Calendar
+                    mode='single'
+                    captionLayout="dropdown"
+                    hideNavigation
+
+                    components={{
+                      DropdownNav: (props: DropdownNavProps) => {
+                        return <div className="flex w-full items-center gap-2">{props.children}</div>;
+                      },
+
+                      Dropdown: (props: DropdownProps) => {
+                        return (
+                          <Select
+                            value={String(props.value)}
+                            onValueChange={(value) => {
+                              if (props.onChange) {
+                                handleCalendarChange(value, props.onChange);
+                              }
+                            }}
+                          >
+                            <SelectTrigger className="h-8 w-fit font-medium first:grow">
+                              <SelectValue />
+                            </SelectTrigger>
+                            <SelectContent className="max-h-[min(26rem,var(--radix-select-content-available-height))]">
+                              {props.options?.map((option) => (
+
+                                <SelectItem
+                                  key={option.value}
+                                  value={String(option.value)}
+                                  disabled={option.disabled}
+                                >
+                                  {option.label}
+                                </SelectItem>
+                              ))}
+                            </SelectContent>
+                          </Select>
+                        );
+                      },
+                    }}
+                    selected={identifiers?.find(i => i.type === 'DOB')?.value ? new Date(identifiers.find(i => i.type === 'DOB')?.value || '') : undefined}
+                    onSelect={(date) => {
+                      if (date) {
+                        const result = [...identifiers]
+                        result.splice(
+                          result.findIndex(i => i.type === 'DOB'),
+                          1,
+                          {
+                            ...identifiers?.find(i => i.type === 'DOB'),
+                            value: date.toLocaleString().split(',')[0]
+                          }
+                        )
+                        setIdentifiers(result)
+                        setIsPopoverOpen(false)
+                      }
+                    }}
+                    initialFocus
+                  />
+                </PopoverContent>
+              </Popover>
+            </div>
+          </>
+        ) : null}
+        {identifiers?.find(i => i.type == 'PAN') ? (
+          <>
+            <SectionTitle className='mt-6' title={`PAN*`} />
+            <div className='flex flex-col gap-1 md:w-[50%] w-full gap-2'>
+              <Input
+                type='text'
+                className={`h-[56px] bg-white border-gray-200 dark:border-gray-700 text-consent-primary text-md ${validationError.PAN ? 'border-red-500' : ''}`}
+                placeholder={`Enter PAN`}
+                value={identifiers?.find(i => i.type === 'PAN')?.value}
+                readOnly={decodedInfo?.pan ? true : false}
+                onChange={e => {
+                  setValidationError(prev => ({ ...prev, PAN: null }))
+                  const panValue = e.target.value.replace(/[^A-Za-z0-9]/g, '').toUpperCase()
+                  const result = [...identifiers]
+                  result.splice(
+                    result.findIndex(i => i.type === 'PAN'),
+                    1,
+                    {
+                      ...identifiers?.find(i => i.type === 'PAN'),
+                      value: panValue
+                    }
+                  )
+                  setIdentifiers(result)
+
+                  // Only validate when input reaches max length
+                  if (panValue.length >= 10) {
+                    try {
+                      panSchema.parse({ value: panValue })
+                    } catch (error) {
+                      if (error instanceof z.ZodError) {
+                        setValidationError(prev => ({ ...prev, PAN: error.errors[0].message }))
+                        // console.error('PAN validation error:', error.errors[0].message)
+                      }
+                    }
+                  }
+                }}
+              />
+              {validationError.PAN && (
+                <p className="text-sm text-red-500 mt-1">{validationError.PAN}</p>
+              )}
+            </div>
+          </>
+        ) : null}
+        {identifiers?.find(i => i.type == 'AADHAAR') ? (
+          <>
+            <SectionTitle className='mt-6' title={`AADHAAR*`} />
+            <div className='flex flex-col gap-1 md:w-[50%] w-full gap-2'>
+              <Input
+                type='text'
+                className={`h-[56px] bg-white border-gray-200 dark:border-gray-700 text-consent-primary text-md ${validationError.AADHAAR ? 'border-red-500' : ''}`}
+                placeholder={`Enter AADHAAR`}
+                readOnly={decodedInfo?.aadhaar ? true : false}
+                value={identifiers?.find(i => i.type === 'AADHAAR')?.value}
+                onChange={e => {
+                  setValidationError(prev => ({ ...prev, AADHAAR: null }))
+                  const aadhaarValue = e.target.value.replace(/[^0-9]/g, '')
+                  const result = [...identifiers]
+                  result.splice(
+                    result.findIndex(i => i.type === 'AADHAAR'),
+                    1,
+                    {
+                      ...identifiers?.find(i => i.type === 'AADHAAR'),
+                      value: aadhaarValue
+                    }
+                  )
+                  setIdentifiers(result)
+
+                  // Only validate when input reaches max length
+                  if (aadhaarValue.length >= 12) {
+                    try {
+                      aadhaarSchema.parse({ value: aadhaarValue })
+                    } catch (error) {
+                      if (error instanceof z.ZodError) {
+                        setValidationError(prev => ({ ...prev, AADHAAR: error.errors[0].message }))
+                        // console.error('Aadhaar validation error:', error.errors[0].message)
+                      }
+                    }
+                  }
+                }}
+              />
+              {validationError.AADHAAR && (
+                <p className="text-sm text-red-500 mt-1">{validationError.AADHAAR}</p>
+              )}
+            </div>
+          </>
+        ) : null}
+
+        {/* <div className='mt-16'>
+          <img src={logo} className='w-48 h-auto filter grayscale opacity-30' />
+          <h1 className='text-4xl font-semibold text-gray-300 mt-8 dark:text-muted-secondary'>
+            Trusted by over 5,00,000+ Indians
+          </h1>
+        </div> */}
+      </div>
+
+      <MobileFooter show={identifiers?.filter(i => !i.value || i.value === '').length === 0 && (() => {
+        try {
+          identifiers.find(i => i.type === 'PAN') && panSchema.parse({ value: identifiers?.find(i => i.type === 'PAN')?.value || '' })
+          identifiers.find(i => i.type === 'AADHAAR') && aadhaarSchema.parse({ value: identifiers?.find(i => i.type === 'AADHAAR')?.value || '' })
+        } catch (error) {
+          return false
+        }
+        return true
+      })()}>
+        <div className='flex flex-col items-center w-full gap-4'>
+          <AnimatedButton
+            onClick={handleDiscoverAccount}
+            size='lg'
+            className='w-full h-[50px]'
+          >
+            {t('discoverAccounts')}
+          </AnimatedButton>
+          <AnimatedButton
+            onClick={handleCancel}
+            variant={'ghost'}
+            size='lg'
+            className='text-primary'
+          >
+            {t('cancel')}
+          </AnimatedButton>
+        </div>
+      </MobileFooter>
+
+      <WebFooter show={identifiers?.filter(i => !i.value || i.value === '').length === 0 && (() => {
+        try {
+          identifiers.find(i => i.type === 'PAN') && panSchema.parse({ value: identifiers?.find(i => i.type === 'PAN')?.value || '' })
+          identifiers.find(i => i.type === 'AADHAAR') && aadhaarSchema.parse({ value: identifiers?.find(i => i.type === 'AADHAAR')?.value || '' })
+        } catch (error) {
+          return false
+        }
+        return true
+      })()}>
+        <AnimatedButton
+          onClick={handleCancel}
+          variant={'ghost'}
+          size='lg'
+          className='text-primary'
+        >
+          {t('cancel')}
+        </AnimatedButton>
+        <AnimatedButton onClick={handleDiscoverAccount} size='lg'>
+          {t('discoverAccounts')}
+        </AnimatedButton>
+      </WebFooter>
+
+
+
+      <BottomSheet
+        isOpen={isMobile && showModal.isOpen}
+        onClose={() => setShowModal(prev => ({ ...prev, isOpen: false, error: '' }))}
+        title={showModal.title}
+        height='auto'
+        showHandle={true}
+        showCloseButton={false}
+      >
+        {showModal.content == 'otp' ? <div className='flex flex-col items-center gap-4'>
+          <OTPInputComponent
+            maxLength={4}
+            title=''
+            editable={true}
+            mobileNumber={showModal.number}
+            onResend={() => {
+              setShowModal(old => ({ ...old, otp: null, error: '' }))
+              addNewNoQuery.mutate(undefined, {
+                onSuccess: () => {
+                  setShowModal(old => ({ ...old, otp: null, error: '' }))
+                },
+                onError: (error: Error) => {
+                  setShowModal(old => ({ ...old, otp: null, error: error.response?.data?.errorMsg || 'Something went wrong' }))
+                  // console.error(error)
+                }
+              })
+            }}
+            countdownTime={18}
+            error={Boolean(showModal.error)}
+            errorMessage={showModal.error}
+            onChange={otp => {
+              setShowModal(old => ({ ...old, otp, error: '' }))
+            }}
+            handleEdit={() => {
+              setShowModal(old => ({ ...old, otp: null, error: '' }))
+              openAddNumberModal(showModal.number)
+            }}
+          />
+          <AnimatedButton
+            className='w-full h-11'
+            onClick={() => {
+              verifyNewNoQuery.mutate()
+            }}
+          >
+            Next
+          </AnimatedButton>
+        </div> : showModal.content}
+      </BottomSheet>
+
+    </div >
+  )
+}
+
+export default DiscoverAccount