saafe-redirection-flow 2.0.0

package/src/pages/accounts/link-accounts.tsx

@@ -0,0 +1,913 @@
+import React, { useState, useEffect, useMemo } from 'react'
+import { useNavigate, useLocation } from 'react-router-dom'
+import SectionTitle from '@/components/title/SectionTitle'
+import { PlusIcon, Search, AlertCircle, InfoIcon } from 'lucide-react'
+import OuterCard from '@/components/cards/OuterCard'
+import BankCard from '@/components/cards/BankCard'
+import { Checkbox } from '@/components/ui/checkbox'
+import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
+import { Input } from '@/components/ui/input'
+import { AnimatedButton } from '@/components/ui/animatedButton'
+import Modal from '@/components/ui/modal'
+import { OTPInputComponent } from '@/components/ui/otp-input'
+import { useMediaQuery } from '@/hooks/use-media-query'
+import { BottomSheet } from '@/components/ui/bottom-sheet'
+import { MobileFooter } from '@/components/ui/mobile-footer'
+import WebFooter from '@/components/ui/web-footer'
+import { useFipQuery } from '@/hooks/use-fip-query'
+import { useFipStore } from '@/store/fip.store'
+import { useAuthStore } from '@/store/auth.store'
+import { Skeleton } from '@/components/ui/skeleton'
+import { useMutation, useQuery } from '@tanstack/react-query'
+import { accountService } from '@/services/api'
+import { useRedirectStore } from '@/store/redirect.store'
+import { useTranslation } from 'react-i18next'
+import { Label } from '@/components/ui/label'
+import { useSetPageTitle } from '@/hooks/use-page-title'
+import DummyFooter from '@/components/dummyFooter'
+import { EVENTS, trackEvent } from '@/utils/posthog'
+import { fiTypeCategoryMap } from '@/const/fiTypeCategoryMap'
+// Helper functions
+const formatCategoryName = (category: string) => {
+  return category
+    .split('_')
+    .map(word => word.charAt(0) + word.slice(1).toLowerCase())
+    .join(' ')
+}
+
+function debounce(func, delay) {
+  let timeoutId;
+
+  return function (...args) {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => {
+      func.apply(this, args);
+    }, delay);
+  };
+}
+
+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 LinkAccounts = () => {
+  const { t } = useTranslation()
+  useSetPageTitle(t('selectAndDiscoverYourAccounts'))
+  const navigate = useNavigate()
+  const location = useLocation()
+  const { decodedInfo } = useRedirectStore()
+  const [searchQuery, setSearchQuery] = useState('')
+  const [showModal, setShowModal] = useState<{
+    isOpen: boolean;
+    title: string;
+    content: React.ReactNode | null;
+    number: string;
+    otp: string | null;
+    error: string;
+  }>({
+    isOpen: false,
+    title: t('addNewMobileNumber'),
+    content: null,
+    number: '',
+    otp: null,
+    error: ''
+  })
+  const [showCloseModal, setShowCloseModal] = useState({ isOpen: false })
+
+  // Extract consent handle from query params or state
+  const getConsentHandle = () => {
+    return decodedInfo?.srcref
+  }
+
+  const consentHandle = getConsentHandle()
+
+  // Detect mobile screens
+  const isMobile = useMediaQuery('(max-width: 768px)')
+
+  // Get user's selected mobile
+  const { user } = useAuthStore()
+  const mobileNumber = user?.phoneNumber
+
+  // FIP data from store
+  const {
+    fips,
+    groupedFips,
+    selectedFips,
+    activeCategory,
+    categories,
+    selectedMobileNumber,
+    accountsToNotify,
+    isLoading: storeLoading,
+    error: storeError,
+    setSelectedMobileNumber,
+    setActiveCategory,
+    addSelectedFip,
+    removeSelectedFip,
+    setSelectedFips,
+    clearSelections,
+    setIdentifiers,
+    setAccountsToNotify
+  } = useFipStore()
+
+  // Fetch FIP data with React Query - use dynamic consent handle
+  const {
+    refetch,
+    isLoading: queryLoading,
+    error: queryError
+  } = useFipQuery(consentHandle)
+
+  // Add state to track when we should navigate
+  const [shouldNavigate, setShouldNavigate] = useState(false);
+
+  const totalCategory = decodedInfo?.fipId?.split(',').map(fip => {
+    const fipData = fiTypeCategoryMap[activeCategory]?.map((fiType) => {
+      const filteredFips = groupedFips[fiType]?.filter(f => f.id === fip);
+      return filteredFips?.[0]?.fiTypeList || [];
+    }).filter(Boolean);
+    return fipData?.flat() || [];
+  }).flat() || [];
+
+  const requiredCategory = fiTypeCategoryMap[activeCategory]?.filter(fiType => decodedInfo?.fiTypesRequiredForConsent?.includes(fiType)) || [];
+
+  // Effect to handle setting selected FIPs
+  useEffect(() => {
+    if (!queryLoading && !queryError && decodedInfo?.fipId && activeCategory && requiredCategory.every(fiType => totalCategory?.includes(fiType))) {
+      const fipIds = decodedInfo.fipId.split(',');
+      setSelectedFips(activeCategory, fipIds);
+      setShouldNavigate(true);
+    }
+  }, [queryLoading, queryError, decodedInfo?.fipId, activeCategory]);
+
+  // Effect to handle navigation
+  useEffect(() => {
+    if (shouldNavigate && selectedFips[activeCategory]?.length > 0) {
+      handleNext();
+      setShouldNavigate(false);
+    }
+  }, [shouldNavigate]);
+
+  const getMobileNumbersQuery = useQuery({
+    queryKey: ['mobile-numbers'],
+    queryFn: async () => accountService.getMobileNumbers()
+  })
+
+  const getMostUsedBanksQuery = useQuery({
+    queryKey: ['most-used-banks'],
+    queryFn: async () => accountService.getMostUsedBanks({ type: 'DEPOSIT' as string }),
+    enabled: !!activeCategory
+  })
+
+  const addNewNoQuery = useMutation({
+    mutationFn: async () =>
+      accountService.addNewNumber({
+        value: showModal?.number || '',
+        type: 'MOBILE',
+        categoryType: 'STRONG'
+      })
+  })
+
+  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: t('addNewMobileNumber'),
+        content: null,
+        number: '',
+        otp: null,
+        error: ''
+      })
+    },
+    onError: error => {
+      setShowModal(old => ({ ...old, error: error.response?.data?.errorCode || 'Something went wrong' }))
+      // console.error(error)
+    }
+  })
+
+  // Combine loading and error states
+  const isLoading = storeLoading || queryLoading
+  const error = storeError || (queryError as Error)?.message
+
+  // Set selected mobile number
+  useEffect(() => {
+    if (mobileNumber) {
+      setSelectedMobileNumber(mobileNumber)
+    }
+  }, [mobileNumber, setSelectedMobileNumber])
+
+  useEffect(() => {
+    if (searchQuery.length) {
+      debounce(trackEvent(EVENTS.SEARCH_BANKS, { searchValue: searchQuery }), 300)
+    }
+  }, [searchQuery])
+
+  // Determine the active category from URL if not already set
+  useEffect(() => {
+    const path = location.pathname
+    const categoryFromPath = path.split('/').pop()
+
+    // If the path includes a category name and it matches one of our categories
+    if (categoryFromPath) {
+      const matchingCategory = categories.find(
+        cat => cat.toLowerCase() === categoryFromPath.toLowerCase()
+      )
+
+      if (matchingCategory && matchingCategory !== activeCategory) {
+        setActiveCategory(matchingCategory)
+      }
+    } else if (categories.length > 0 && !activeCategory) {
+      // Set first category as active if none is active and redirect
+      const firstCategory = categories[0]
+      setActiveCategory(firstCategory)
+      navigate(`/link-accounts/${firstCategory.toLowerCase()}`, {
+        replace: true
+      })
+    }
+  }, [
+    location.pathname,
+    categories,
+    activeCategory,
+    setActiveCategory,
+    navigate
+  ])
+
+  // Show bottom sheet only when there are selected FIPs in the active category
+  const hasSelectedFips =
+    activeCategory && selectedFips[activeCategory]?.length > 0
+  const showBottomSheet = hasSelectedFips
+
+  // Get FIPs for the active category
+  const getActiveCategoryFips = () => {
+    if (!activeCategory) return []
+
+    // Create a Map to store unique FIPs by their ID
+    const uniqueFipsMap = new Map<string, typeof fips[0]>()
+
+    // Get FIP types for the active category
+    const fipTypes = fiTypeCategoryMap[activeCategory] || []
+
+    // Add FIPs to the Map using ID as key
+    fipTypes.forEach(fipType => {
+      const categoryFips = groupedFips[fipType] || []
+      categoryFips.forEach(fip => {
+        if (fip.name && (!searchQuery || fip.name.toLowerCase().includes(searchQuery.toLowerCase()))) {
+          // Only add if we haven't seen this ID before
+          if (!uniqueFipsMap.has(fip.id)) {
+            uniqueFipsMap.set(fip.id, fip)
+          }
+        }
+      })
+    })
+
+    // Convert Map values to array and sort
+    const sortedFips = Array.from(uniqueFipsMap.values()).sort((a, b) => {
+      if (a.id < b.id) return -1
+      if (a.id > b.id) return 1
+      return 0
+    })
+
+    // Return enabled FIPs first, then disabled ones
+    return [
+      ...sortedFips.filter(fip => fip.isEnabled),
+      ...sortedFips.filter(fip => !fip.isEnabled)
+    ]
+  }
+
+  const handleNext = () => {
+    if (!activeCategory) return
+
+    // Only proceed if user has selected providers
+    console.log(" scroll ")
+    if (selectedFips[activeCategory]?.length > 0) {
+      let redirect = false
+      const identifiersList: any[] = []
+      fips
+        .filter(fip =>
+          selectedFips?.[activeCategory as string]?.includes(fip.id as string)
+        )
+        .forEach(fip => {
+          fip.Identifiers?.forEach(identifier => {
+            if (!identifiersList.find(i => i.type === identifier.type)) {
+              const value =
+                identifier.type == 'PAN'
+                  ? decodedInfo?.pan
+                  : identifier.type == 'AADHAAR'
+                    ? decodedInfo?.aadhaar
+                    : identifier.type == 'MOBILE'
+                      ? selectedMobileNumber
+                      : null
+              identifiersList.push({ ...identifier, value })
+            }
+          })
+        })
+
+      setIdentifiers(identifiersList)
+      if (identifiersList?.length > 0 && Boolean(identifiersList.find(val => !val.value)?.type)) {
+        if (identifiersList.find(i => i.type === 'PAN')) {
+          redirect = true
+        }
+        if (identifiersList.find(i => i.type === 'AADHAAR')) {
+          redirect = true
+        }
+      }
+
+      if (redirect) {
+        navigate(`/link-accounts/discover-account`, {
+          state: {
+            category: activeCategory,
+            selectedFips: selectedFips[activeCategory]
+          }
+        })
+        return null
+      }
+      // Navigate to the account discovery screen with category info
+      navigate(`/link-accounts/discovery`, {
+        state: {
+          category: activeCategory,
+          selectedFips: selectedFips[activeCategory]
+        }
+      })
+    } else {
+      // Show some notification that they need to select providers first
+      // console.warn('Please select at least one provider')
+    }
+  }
+
+  const handleAddNumber = (value: string) => {
+    setShowModal(old => ({
+      ...old,
+      isOpen: true,
+      title: t('verifyNewMobileNumber'),
+      content: 'otp',
+      otp: null,
+      error: ''
+    }))
+  }
+
+  const handleTabClose = () => {
+    window.close()
+  }
+
+  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 toggleFipSelection = (fipId: string) => {
+    if (!activeCategory) return
+
+    if (selectedFips[activeCategory]?.includes(fipId)) {
+      removeSelectedFip(activeCategory, fipId)
+    } else {
+      addSelectedFip(activeCategory, fipId)
+    }
+  }
+
+  // Show skeleton loaders during loading
+  if ((decodedInfo?.fipId || (queryLoading && shouldNavigate)) && requiredCategory.every(fiType => totalCategory?.includes(fiType))) {
+    return (
+      <div className='flex flex-col gap-4 pb-16 md:pb-16 md:p-16 sm:p-4'>
+        {Array(3)
+          .fill(0)
+          .map((_, index) => (
+            <OuterCard key={`loading-${index}`} selected={false} loading={true}>
+              <BankCard bankName='' />
+            </OuterCard>
+          ))}
+      </div>
+    )
+  }
+  if (isLoading) {
+    return (
+      <div className='flex flex-col gap-4 pb-16 md:pb-16 md:p-16 sm:p-4'>
+        <Skeleton className='h-8 w-72 mb-4' />
+        <div className='grid grid-cols-1 md:grid-cols-3 gap-4'>
+          <Skeleton className='h-16 w-full' />
+          <Skeleton className='h-16 w-full' />
+          <Skeleton className='h-16 w-full' />
+        </div>
+        <Skeleton className='h-8 w-72 mt-8 mb-4' />
+        <Skeleton className='h-12 w-full mb-4' />
+        <Skeleton className='h-4 w-72 mt-0 mb-0' />
+        <div className='grid grid-cols-1 md:grid-cols-3 gap-4'>
+          {[...Array(6)].map((_, i) => (
+            <Skeleton key={i} className='h-16 w-full' />
+          ))}
+        </div>
+        <Skeleton className='h-4 w-72 mt-4 mb-0' />
+        <div className='flex flex-col gap-4'>
+          {[...Array(6)].map((_, i) => (
+            <Skeleton key={i} className='h-16 w-full' />
+          ))}
+        </div>
+      </div>
+    )
+  }
+
+  // Show error message if there was an error
+  if (error) {
+    return (
+      <div className='flex flex-col items-center justify-center p-8 h-64'>
+        <div className='flex items-center gap-2 text-red-500 mb-4'>
+          <AlertCircle size={20} />
+          <p>{error}</p>
+        </div>
+        <AnimatedButton onClick={() => refetch()}>Retry</AnimatedButton>
+      </div>
+    )
+  }
+
+  // No categories or no FIPs
+  if (!categories.length || !Object.keys(groupedFips).length) {
+    return (
+      <div className='flex flex-col items-center justify-center p-8 h-64'>
+        <div className='flex items-center gap-2 text-amber-500 mb-4'>
+          <AlertCircle size={20} />
+          <p>No financial information providers available</p>
+        </div>
+        <AnimatedButton onClick={() => refetch()}>Refresh</AnimatedButton>
+      </div>
+    )
+  }
+
+  const activeCategoryFips = getActiveCategoryFips()
+
+  // Render different content based on the active category
+  const renderCategoryContent = () => {
+    if (!activeCategory) return null
+
+    return (
+      <>
+
+        <SectionTitle
+          className='mt-8 mb-2'
+          title={
+            t('keywords.select').charAt(0).toUpperCase() + t('keywords.select').slice(1)
+            +
+            ' ' +
+            t(`categories.${activeCategory.toLowerCase()}`) +
+            ' to ' +
+            t('keywords.discover')
+            // +
+            // ' ' +
+            // t('keywords.your') +
+            // ' ' +
+            // t('keywords.accounts')
+          }
+        />
+        <Input
+          type='text'
+          placeholder={t('Search')}
+          value={searchQuery}
+          onChange={e => setSearchQuery(e.target.value)}
+          leftSection={
+            <Search
+              className='h-[18px] w-[18px] text-consent-secondary'
+              name='search'
+            />
+          }
+          className='h-12 focus-visible:border-primary'
+        />
+
+        {activeCategory === 'BANK' && searchQuery?.trim().length === 0 && <div className='flex flex-col gap-2 mt-6'>
+          {getMostUsedBanksQuery?.data?.['BANK']?.length > 0 && <Label className='text-sm md:text-md font-medium text-consent-secondary'>Most picked</Label>}
+          <div className='grid grid-cols-1 md:grid-cols-3 gap-3'>
+            {getMostUsedBanksQuery?.data?.['BANK']?.map((fip: any) => (
+              <OuterCard
+                hoverEffect={false}
+                onSelect={() => {
+                  if (fip.isEnabled) {
+                    toggleFipSelection(fip.id)
+                  }
+                }}
+                key={`fip-${fip.id}`}
+                className='cursor-pointer'
+                selected={selectedFips[activeCategory]?.includes(fip.id)}
+              >
+                <BankCard
+                  loading={false}
+                  bankName={fip.name || 'Unknown Provider'}
+                  selectedTextColor=''
+                  badgeText={false}
+                  subText={false}
+                  commingSoon={false}
+                  rightSection={
+                    <Checkbox
+                      id={`checkbox-${fip.id}`}
+                      className='cursor-pointer size-6'
+                      checked={
+                        selectedFips[activeCategory]?.includes(fip.id) ||
+                        false
+                      }
+                      onCheckedChange={() => toggleFipSelection(fip.id)}
+                    />
+                  }
+                  image={fip.logoUrl || '/images/bank-logo.png'}
+                  imageSize='w-8 h-8'
+                  className='cursor-pointer'
+                />
+
+              </OuterCard>
+            ))}
+
+          </div>
+        </div>}
+
+        <div className='flex flex-col gap-2 mt-6'>
+          {activeCategoryFips.length > 0 && <Label className='text-sm md:text-md font-medium text-consent-secondary'>All financial information providers</Label>}
+          {activeCategoryFips.length === 0 ? (
+            <div className='text-center p-4 border rounded-lg border-dashed border-gray-300 text-gray-500'>
+              No {formatCategoryName(activeCategory)} providers found
+            </div>
+          ) : (
+            <OuterCard hoverEffect={false} noAction={true}>
+              <div className='flex flex-col gap-4 w-full py-2'>
+                {activeCategoryFips.map((fip, index) => (
+                  <>
+                    <BankCard
+                      loading={false}
+                      bankName={fip.name || 'Unknown Provider'}
+                      key={`fip-${fip.id}`}
+                      selected={selectedFips[activeCategory]?.includes(fip.id)}
+                      selectedTextColor=''
+                      onClick={() => {
+                        if (fip.isEnabled) {
+                          toggleFipSelection(fip.id)
+                        }
+                      }}
+                      subText={false}
+                      badgeText={fip.isbadge ? 'New' : false}
+                      commingSoon={!fip.isEnabled}
+                      notify={accountsToNotify.includes(fip?.id)}
+                      commingSoonFun={() => {
+                        setAccountsToNotify(fip?.id)
+                        trackEvent(EVENTS.NOTIFY_UPDATES, { searchValue: searchQuery, fipId: fip?.id, userId: decodedInfo?.userid })
+                      }}
+                      rightSection={
+                        <Checkbox
+                          id={`checkbox-${fip.id}`}
+                          className='cursor-pointer size-6'
+                          checked={
+                            selectedFips[activeCategory]?.includes(fip.id) ||
+                            false
+                          }
+                          onCheckedChange={() => toggleFipSelection(fip.id)}
+                        />
+                      }
+                      image={fip.logoUrl || '/images/bank-logo.png'}
+                      imageSize='w-8 h-8'
+                      className='cursor-pointer'
+                    />
+                    {index !== activeCategoryFips.length - 1 && (
+                      <div className='h-1 border-b border-gray-100 md:border-gray-200 dark:border-border' />
+                    )}
+                  </>
+                ))}
+              </div>
+            </OuterCard>
+          )}
+        </div>
+      </>
+    )
+  }
+
+  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 className='flex flex-col gap-1 pb-16 md:pb-16'>
+      <div className='flex flex-col gap-1 w-full md:px-14 md:mt-10 sm:px-4'>
+        {/* Mobile number selection */}
+        <SectionTitle
+          className='md:mt-4 sm:mt-1'
+          title={`${t('mobileNo')}*`}
+          rightSection={renderAddNumberButton()}
+        />
+        {/* <Label className='text-sm text-consent-secondary'>{t('mobileSubTitle')}</Label> */}
+        <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'
+                        : ' dark:text-gray-400'
+                        }`}
+                    >
+                      +91 {item.value}
+                    </p>
+                    <RadioGroupItem
+                      value={item.value.toString()}
+                      id={`radio-${item.value}`}
+                      className={`cursor-pointer`}
+                    />
+                  </div>
+                </OuterCard>
+              )
+            )}
+          </div>
+        </RadioGroup>
+        <p className='text-sm md:text-lg font-medium text-placeholder mt-2'>
+          {t('youCanAddUpTo3Numbers')}
+        </p>
+
+        {renderCategoryContent()}
+        <DummyFooter show={true} />
+      </div>
+
+      {/* Bottom sheet for mobile */}
+      <MobileFooter show={!!(isMobile && showBottomSheet)}>
+        <div className='flex flex-col items-center w-full gap-4'>
+          <AnimatedButton onClick={handleNext} size='lg' className='w-full h-[50px]'>
+            {t('discoverAccounts')}
+          </AnimatedButton>
+          <AnimatedButton
+            // onClick={() => setActiveCategory(null)}
+            onClick={() => clearSelections()}
+            variant={'ghost'}
+          >
+            {t('cancel')}
+          </AnimatedButton>
+        </div>
+      </MobileFooter>
+
+      {/* Footer for desktop */}
+      <WebFooter show={!!(!isMobile && showBottomSheet)}>
+        <AnimatedButton
+          onClick={() => clearSelections()}
+          variant={'ghost'}
+          size={'lg'}
+          className='text-primary'
+        >
+          {t('cancel')}
+        </AnimatedButton>
+        <AnimatedButton onClick={handleNext} 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>
+
+      <Modal
+        open={showCloseModal.isOpen}
+        withCloseIcon={false}
+        onOpenChange={open => !open && setShowCloseModal({ isOpen: open })}
+        className='w-[380px]'
+      >
+        <div className='flex flex-col gap-4 items-center'>
+          <div className='flex items-center justify-center bg-red-100 p-2.5 rounded-full'>
+            <InfoIcon className='h-[28px] w-[28px] text-red-700' />
+          </div>
+          <div className='flex flex-col gap-2 items-center text-center mt-2'>
+            <p className='text-xl font-semibold'>
+              Are you sure you want to exit?
+            </p>
+            <p className='text-sm text-muted-secondary'>
+              By clicking on exit you decide not to share any financial accounts
+            </p>
+          </div>
+          <div className='flex gap-2 w-full items-center justify-center'>
+            <AnimatedButton
+              size='lg'
+              onClick={() => setShowCloseModal({ isOpen: false })}
+            >
+              No, go back!
+            </AnimatedButton>
+            <AnimatedButton
+              size='lg'
+              variant='ghost'
+              className='hover:bg-red-100 hover:text-red-700 text-red-700'
+              onClick={handleTabClose}
+            >
+              Yes, exit
+            </AnimatedButton>
+          </div>
+        </div>
+      </Modal>
+    </div>
+  )
+}
+
+export default LinkAccounts