saafe-redirection-flow 2.0.0 → 2.2.0

package/src/pages/accounts/Discover.tsx

@@ -6,14 +6,20 @@ import { useLocation, useParams } from "react-router-dom";
 import AccountsToProceed from "./AccountsToProceed";
 import LinkSelectedAccounts from "./LinkSelectedAccounts";
 import DiscoverAccount from "./DiscoverAccount";
+
 import { useFipStore } from "@/store/fip.store";
+import { useRedirectStore } from "@/store/redirect.store";
 import { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import { isAutoDiscoveryEnabled, getAutoDiscoveryFipIds } from "@/utils/auto-discovery";
 
 const Discover = () => {
   const { category } = useParams();
   const location = useLocation();
   const path = location.pathname.split('/').pop() || '';
-  const { activeCategory, setActiveCategory, categories } = useFipStore();
+  const navigate = useNavigate();
+  const { activeCategory, setActiveCategory, categories, groupedFips, setSelectedFips } = useFipStore();
+  const { decodedInfo } = useRedirectStore();
 
   // For step navigation in the sidebar - detect category from path
   useEffect(() => {
@@ -37,19 +43,131 @@ const Discover = () => {
     }
   }, [path, category, categories, setActiveCategory, location.state]);
 
+  // Handle auto discovery logic
+  useEffect(() => {
+    // Only run auto discovery logic on category pages (not flow pages)
+    const flowPaths = ['discovery', 'link', 'discover-account'];
+    const isFlowPath = flowPaths.includes(path);
+    
+    console.log('Auto Discovery Debug:', {
+      path,
+      isFlowPath,
+      activeCategory,
+      hasDecodedInfo: !!decodedInfo,
+      otherAppCustomization: decodedInfo?.customization?.otherAppCustomization,
+      fipId: decodedInfo?.fipId,
+      locationPathname: location.pathname,
+      groupedFipsKeys: Object.keys(groupedFips || {}),
+      groupedFipsEmpty: !groupedFips || Object.keys(groupedFips).length === 0,
+      categoriesLoaded: categories.length > 0
+    });
+    
+    // Guard clauses to prevent unnecessary execution
+    if (isFlowPath || !activeCategory || !decodedInfo) {
+      console.log('Auto Discovery: Early return due to guard clauses', {
+        isFlowPath,
+        activeCategory,
+        hasDecodedInfo: !!decodedInfo
+      });
+      return;
+    }
+
+    // Check if groupedFips is loaded
+    if (!groupedFips || Object.keys(groupedFips).length === 0) {
+      console.log('Auto Discovery: groupedFips not loaded yet, waiting...');
+      return;
+    }
+
+    // Additional guard: only run for supported auto discovery categories
+    const supportedCategories = ['INVESTMENTS', 'GST', 'INSURANCE'];
+    if (!supportedCategories.includes(activeCategory.toUpperCase())) {
+      console.log('Auto Discovery: Category not supported:', activeCategory);
+      return;
+    }
+
+    const autoDiscoveryEnabled = isAutoDiscoveryEnabled(
+      activeCategory,
+      decodedInfo?.customization?.otherAppCustomization
+    );
+
+    console.log('Auto Discovery: Enabled?', autoDiscoveryEnabled, 'for category:', activeCategory);
+
+    if (autoDiscoveryEnabled) {
+      // Get FIP IDs for auto discovery
+      const fipIds = getAutoDiscoveryFipIds(
+        activeCategory,
+        decodedInfo?.fipId,
+        groupedFips
+      );
+      
+      console.log('Auto Discovery: FIP IDs:', fipIds, 'groupedFips keys:', Object.keys(groupedFips || {}));
+      
+      if (fipIds.length > 0) {
+        // Additional guard: check if we're already navigating or have navigated
+        if (location.pathname === '/link-accounts/discovery') {
+          console.log('Auto Discovery: Already on discovery page, skipping navigation');
+          return;
+        }
+        
+        console.log('Auto Discovery: Navigating to discovery with FIPs:', fipIds);
+        
+        // Set selected FIPs in the store
+        setSelectedFips(activeCategory, fipIds);
+        
+        // IMPORTANT: Also populate identifiers in the store for manual discovery hooks to use
+        // This mirrors the logic from link-accounts.tsx handleNext function
+        const { fips, setIdentifiers, selectedMobileNumber } = useFipStore.getState();
+        const identifiersList: { type: string; value: string | undefined; category: string }[] = [];
+        
+        fips
+          .filter(fip => fipIds.includes(fip.id))
+          .forEach(fip => {
+            fip.Identifiers?.forEach(identifier => {
+              if (!identifiersList.find(i => i.type === identifier.type)) {
+                const value =
+                  identifier.type === 'PAN'
+                    ? decodedInfo?.pan || undefined
+                    : identifier.type === 'MOBILE'
+                      ? selectedMobileNumber || decodedInfo?.phoneNumber || undefined
+                      : identifier.type === 'DOB'
+                      ? decodedInfo?.dob || undefined
+                      : undefined;
+                identifiersList.push({ type: identifier.type, value, category: identifier.category });
+              }
+            });
+          });
+        
+        console.log('Auto Discovery: Setting identifiers in store:', identifiersList);
+        setIdentifiers(identifiersList);
+        
+        // Navigate to discovery page
+        navigate('/link-accounts/discovery', {
+          state: {
+            category: activeCategory,
+            selectedFips: fipIds,
+            isAutoDiscovery: true
+          },
+          replace: true // Use replace to avoid back button issues
+        });
+      } else {
+        console.log('Auto Discovery: No FIP IDs found, staying on FIP listing');
+      }
+    }
+  }, [activeCategory, path, decodedInfo?.customization?.otherAppCustomization, decodedInfo?.fipId, location.pathname, groupedFips, categories]);
+
   const getCurrentStep = (newPath: string) => {
     // Flow paths
     switch (newPath || path) {
       case 'discovery':
       case 'proceed':
         return <AccountsToProceed
-          state={location.state as { category: string; selectedFips: string[] }}
+          state={location.state as { category: string; selectedFips: string[]; isAutoDiscovery?: boolean }}
           currentCategory={activeCategory}
-        />;
-
-      case 'link':
+                  />;
+        
+        case 'link':
         return <LinkSelectedAccounts
-          state={location.state as { category: string; selectedFips: string[] }}
+          state={location.state as { category: string; selectedFips: string[]; selectedAccounts: string[]; signature?: string }}
           currentCategory={activeCategory}
         />;
 
@@ -60,15 +178,15 @@ const Discover = () => {
         />;
 
       default:
-        // If we're on a category path or any other path, show FIP listing
-        // This handles all category paths like /link-accounts/banks, /link-accounts/investment etc.
+        // Default: show FIP listing (manual flow)
+        // Auto discovery logic is now handled in useEffect above
         return <LinkAccounts />;
     }
   }
 
   return (
     <FrostedLayout>
-      {getCurrentStep()}
+      {getCurrentStep(path)}
     </FrostedLayout>
   )
 }

package/src/pages/accounts/DiscoverAccount.tsx

@@ -18,7 +18,6 @@ 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'
@@ -36,10 +35,22 @@ import { useSetPageTitle } from '@/hooks/use-page-title'
 import { useRedirectStore } from '@/store/redirect.store'
 import { BottomSheet } from '@/components/ui/bottom-sheet'
 
+interface ApiError extends Error {
+  response?: {
+    data?: {
+      errorCode?: string
+      errorMsg?: string
+    }
+  }
+}
+
 interface DiscoverAccountProps {
   state?: {
     category: string
     selectedFips?: string[]
+    fromOldUser?: boolean
+    fromDiscoverMore?: boolean
+    fromAutoDiscovery?: boolean
   }
   currentCategory?: string | null
 }
@@ -107,7 +118,7 @@ const AddNumberModalContent = ({ showModal, setShowModal, t, addNewNoQuery, hand
             onSuccess: () => {
               handleAddNumber(inputValue.number)
             },
-            onError: (error: Error) => {
+            onError: (error: ApiError) => {
               // console.error(error)
               setInputValue({ number: inputValue.number, error: error.response?.data?.errorCode || 'Something went wrong' });
             }
@@ -145,7 +156,44 @@ const DiscoverAccount = ({ state, currentCategory }: DiscoverAccountProps) => {
     AADHAAR: null
   })
   const [isPopoverOpen, setIsPopoverOpen] = useState(false)
-  const [showAlert, setShowAlert] = useState(true)
+  // const [showAlert, setShowAlert] = useState(true)
+
+  // Utility function to parse various date formats
+  const parseDateFromDecodedInfo = (dateString: string | null): Date | null => {
+    if (!dateString) return null
+    
+    try {
+      // Handle URL-encoded date string
+      const decodedDateString = decodeURIComponent(dateString)
+      
+      // Try parsing as ISO string first (handles formats like "1999-12-09T18:30:00.000Z")
+      let parsedDate = new Date(decodedDateString)
+      
+      // If that fails, try other common formats
+      if (isNaN(parsedDate.getTime())) {
+        // Try DD/MM/YYYY format
+        if (decodedDateString.includes('/')) {
+          const [day, month, year] = decodedDateString.split('/')
+          parsedDate = new Date(parseInt(year), parseInt(month) - 1, parseInt(day))
+        }
+        // Try YYYY-MM-DD format
+        else if (decodedDateString.includes('-') && decodedDateString.length === 10) {
+          parsedDate = new Date(decodedDateString + 'T00:00:00.000Z')
+        }
+      }
+      
+      // Validate the parsed date
+      if (isNaN(parsedDate.getTime())) {
+        console.warn('Could not parse date:', dateString)
+        return null
+      }
+      
+      return parsedDate
+    } catch (error) {
+      console.warn('Error parsing date:', error)
+      return null
+    }
+  }
 
   // Format category name for display
   const formatCategoryName = (name: string) => {
@@ -159,7 +207,8 @@ const DiscoverAccount = ({ state, currentCategory }: DiscoverAccountProps) => {
     title: t('addNewMobileNumber'),
     content: null as React.ReactNode,
     number: '',
-    otp: null as string | null
+    otp: null as string | null,
+    error: ''
   })
 
   // Detect mobile screens
@@ -189,7 +238,7 @@ const DiscoverAccount = ({ state, currentCategory }: DiscoverAccountProps) => {
       getMobileNumbersQuery.refetch()
       setShowModal(old => ({ ...old, otp: null, error: '' }))
     },
-    onError: error => {
+    onError: (error: ApiError) => {
       setShowModal(old => ({ ...old, otp: null, error: error.response?.data?.errorCode || 'Something went wrong' }))
     }
   })
@@ -209,10 +258,11 @@ const DiscoverAccount = ({ state, currentCategory }: DiscoverAccountProps) => {
         title: 'Add new mobile number',
         content: null,
         number: '',
-        otp: null
+        otp: null,
+        error: ''
       })
     },
-    onError: error => {
+    onError: (error: ApiError) => {
       setShowModal(old => ({ ...old, otp: null, error: error.response?.data?.errorCode || 'Something went wrong' }))
       // console.error(error)
     }
@@ -257,13 +307,64 @@ const DiscoverAccount = ({ state, currentCategory }: DiscoverAccountProps) => {
       ...result[mobileIndex],
       value: selectedMobileNumber
     })
-    navigate('/link-accounts/discovery', {
-      state: {
-        category,
-        selectedFips: state?.selectedFips,
-        fromDiscovery: true
-      }
+    
+    // Update identifiers in FIP store
+    setIdentifiers(result)
+    
+    // Also update PAN and DOB in redirect store for API calls
+    const { updateIdentifiers } = useRedirectStore.getState()
+    const panIdentifier = result.find(i => i.type === 'PAN')
+    const dobIdentifier = result.find(i => i.type === 'DOB')
+    
+    updateIdentifiers(
+      panIdentifier?.value || undefined,
+      dobIdentifier?.value || undefined
+    )
+    
+    console.log('DiscoverAccount: Updated identifiers in both stores', {
+      pan: panIdentifier?.value,
+      dob: dobIdentifier?.value
     })
+    
+    // Check if we came from different sources and redirect accordingly
+    if (state?.fromOldUser) {
+      // Redirect back to old user page
+      navigate('/link-accounts/old-user', {
+        state: {
+          category,
+          selectedFips: state?.selectedFips,
+          fromDiscovery: true
+        }
+      })
+    } else if (state?.fromAutoDiscovery) {
+      // Redirect back to auto discovery page
+      navigate('/link-accounts/discovery', {
+        state: {
+          category,
+          selectedFips: state?.selectedFips,
+          isAutoDiscovery: true, // Important: preserve auto discovery flag
+          fromDiscovery: true
+        }
+      })
+    } else if (state?.fromDiscoverMore) {
+      // Redirect back to AccountsToProceed page
+      navigate('/link-accounts/discovery', {
+        state: {
+          category,
+          selectedFips: state?.selectedFips,
+          fromDiscovery: true
+        }
+      })
+    } else {
+      // Normal flow - go to discovery page
+      navigate('/link-accounts/discovery', {
+        state: {
+          category,
+          selectedFips: state?.selectedFips,
+          fromDiscovery: true
+        }
+      })
+    }
   }
 
   const handleCancel = () => {
@@ -308,7 +409,7 @@ const DiscoverAccount = ({ state, currentCategory }: DiscoverAccountProps) => {
       <Modal
         title={showModal.title}
         open={showModal.isOpen}
-        className='w-[380px]'
+        className='w-[450px]'
         onOpenChange={open =>
           !open &&
           setShowModal({
@@ -330,13 +431,14 @@ const DiscoverAccount = ({ state, currentCategory }: DiscoverAccountProps) => {
             title=''
             editable={true}
             mobileNumber={showModal.number}
+            eyeClassName="translate-x-2"
             onResend={() => {
               setShowModal(old => ({ ...old, otp: null, error: '' }))
               addNewNoQuery.mutate(undefined, {
                 onSuccess: () => {
                   setShowModal(old => ({ ...old, otp: null, error: '' }))
                 },
-                onError: (error: Error) => {
+                onError: (error: ApiError) => {
                   setShowModal(old => ({ ...old, otp: null, error: error.response?.data?.errorMsg || 'Something went wrong' }))
                   // console.error(error)
                 }
@@ -366,10 +468,32 @@ const DiscoverAccount = ({ state, currentCategory }: DiscoverAccountProps) => {
     );
   };
 
+  // Auto-fill DOB from decodedInfo when identifiers are set
+  useEffect(() => {
+    if (decodedInfo?.dob && identifiers?.find(i => i.type === 'DOB')) {
+      const parsedDate = parseDateFromDecodedInfo(decodedInfo.dob)
+      
+      if (parsedDate) {
+        const dobIdentifier = identifiers.find(i => i.type === 'DOB')
+        if (dobIdentifier && !dobIdentifier.value) {
+          const result = [...identifiers]
+          const dobIndex = result.findIndex(i => i.type === 'DOB')
+          if (dobIndex !== -1) {
+            result[dobIndex] = {
+              ...dobIdentifier,
+              value: parsedDate.toLocaleDateString('en-CA') // YYYY-MM-DD format
+            }
+            setIdentifiers(result)
+          }
+        }
+      }
+    }
+  }, [decodedInfo?.dob, identifiers, setIdentifiers])
+
   return (
     <div>
       <div className='flex flex-col gap-1 w-full md:px-14 px-0 gap-2 md:mt-6 mt-0'>
-        {showAlert &&
+        {/* {showAlert &&
           <div className='mb-4'>
             <AlertComp
               icon={
@@ -389,7 +513,7 @@ const DiscoverAccount = ({ state, currentCategory }: DiscoverAccountProps) => {
               }
             />
           </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') +
@@ -476,15 +600,30 @@ const DiscoverAccount = ({ state, currentCategory }: DiscoverAccountProps) => {
             <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'>
+                  {/*  */}
+                  <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-muted-foreground dark:border-gray-700 cursor-pointer`}
+                  >
                     {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>
+                        {
+                          (() => {
+                            const dobString = identifiers.find(i => i.type === 'DOB')?.value || '';
+                            const [day, month, year] = dobString.split('/');
+                            const dob = new Date(Number(year), Number(month) - 1, Number(day));
+                            return dob.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' />
+                    <CalendarIcon className={`h-4 w-4 ${decodedInfo?.dob ? 'opacity-30' : 'opacity-50'}`} />
                   </div>
-
                 </PopoverTrigger>
                 <PopoverContent className='w-auto p-0' align='start'>
                   <Calendar
@@ -529,16 +668,22 @@ const DiscoverAccount = ({ state, currentCategory }: DiscoverAccountProps) => {
                     selected={identifiers?.find(i => i.type === 'DOB')?.value ? new Date(identifiers.find(i => i.type === 'DOB')?.value || '') : undefined}
                     onSelect={(date) => {
                       if (date) {
+                        const dateValue = date.toLocaleString().split(',')[0]
                         const result = [...identifiers]
                         result.splice(
                           result.findIndex(i => i.type === 'DOB'),
                           1,
                           {
                             ...identifiers?.find(i => i.type === 'DOB'),
-                            value: date.toLocaleString().split(',')[0]
+                            value: dateValue
                           }
                         )
                         setIdentifiers(result)
+                        
+                        // Also update redirect store immediately
+                        const { updateIdentifiers } = useRedirectStore.getState()
+                        updateIdentifiers(undefined, dateValue || undefined)
+                        
                         setIsPopoverOpen(false)
                       }
                     }}
@@ -557,21 +702,27 @@ const DiscoverAccount = ({ state, currentCategory }: DiscoverAccountProps) => {
                 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}
+                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()
+                  
+                  // Update identifiers array more safely
                   const result = [...identifiers]
-                  result.splice(
-                    result.findIndex(i => i.type === 'PAN'),
-                    1,
-                    {
-                      ...identifiers?.find(i => i.type === 'PAN'),
+                  const panIndex = result.findIndex(i => i.type === 'PAN')
+                  
+                  if (panIndex !== -1) {
+                    result[panIndex] = {
+                      ...result[panIndex],
                       value: panValue
                     }
-                  )
-                  setIdentifiers(result)
+                    setIdentifiers(result)
+                    
+                    // Also update redirect store immediately
+                    const { updateIdentifiers } = useRedirectStore.getState()
+                    updateIdentifiers(panValue || undefined, undefined)
+                  }
 
                   // Only validate when input reaches max length
                   if (panValue.length >= 10) {
@@ -601,20 +752,22 @@ const DiscoverAccount = ({ state, currentCategory }: DiscoverAccountProps) => {
                 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}
+                value={identifiers?.find(i => i.type === 'AADHAAR')?.value || ''}
                 onChange={e => {
                   setValidationError(prev => ({ ...prev, AADHAAR: null }))
                   const aadhaarValue = e.target.value.replace(/[^0-9]/g, '')
+                  
+                  // Update identifiers array more safely
                   const result = [...identifiers]
-                  result.splice(
-                    result.findIndex(i => i.type === 'AADHAAR'),
-                    1,
-                    {
-                      ...identifiers?.find(i => i.type === 'AADHAAR'),
+                  const aadhaarIndex = result.findIndex(i => i.type === 'AADHAAR')
+                  
+                  if (aadhaarIndex !== -1) {
+                    result[aadhaarIndex] = {
+                      ...result[aadhaarIndex],
                       value: aadhaarValue
                     }
-                  )
-                  setIdentifiers(result)
+                    setIdentifiers(result)
+                  }
 
                   // Only validate when input reaches max length
                   if (aadhaarValue.length >= 12) {
@@ -710,13 +863,14 @@ const DiscoverAccount = ({ state, currentCategory }: DiscoverAccountProps) => {
             title=''
             editable={true}
             mobileNumber={showModal.number}
+            eyeClassName="translate-x-2"
             onResend={() => {
               setShowModal(old => ({ ...old, otp: null, error: '' }))
               addNewNoQuery.mutate(undefined, {
                 onSuccess: () => {
                   setShowModal(old => ({ ...old, otp: null, error: '' }))
                 },
-                onError: (error: Error) => {
+                onError: (error: ApiError) => {
                   setShowModal(old => ({ ...old, otp: null, error: error.response?.data?.errorMsg || 'Something went wrong' }))
                   // console.error(error)
                 }
@@ -743,8 +897,7 @@ const DiscoverAccount = ({ state, currentCategory }: DiscoverAccountProps) => {
           </AnimatedButton>
         </div> : showModal.content}
       </BottomSheet>
-
-    </div >
+    </div>
   )
 }
 

package/src/pages/accounts/LinkSelectedAccounts.tsx

@@ -8,7 +8,7 @@ import { Repeat } from 'lucide-react'
 import { Button } from '@/components/ui/button'
 import { MobileFooter } from '@/components/ui/mobile-footer'
 import WebFooter from '@/components/ui/web-footer'
-import { useFipStore } from '@/store/fip.store'
+import { useFipStore, DiscoveredAccount } from '@/store/fip.store'
 import { Collapsible, CollapsibleContent } from '@/components/ui/collapsible'
 import { Input } from '@/components/ui/input'
 import { useMutation } from '@tanstack/react-query'
@@ -117,8 +117,11 @@ const SuccessAnimation = ({
 interface Account {
   id: string;
   fipId: string;
+  fipName: string;
+  signature: string;
   accounts: string;
   otp: string;
+  DiscoveredAccounts?: DiscoveredAccount[];
 }
 
 interface LinkSelectedAccountsProps {
@@ -157,13 +160,12 @@ const LinkSelectedAccounts = ({
   const {
     selectedAccountToLink,
     selectedMobileNumber,
-    signature,
     accountsStatusArray,
     setAccountsStatusArray
   } = useFipStore()
 
   const sendBankOTPQuery = useMutation({
-    mutationFn: ({ fipId, accounts }: { fipId: string; accounts: any[] }) =>
+    mutationFn: ({ fipId, accounts, signature }: { fipId: string; accounts: DiscoveredAccount[]; signature: string }) =>
       accountService.sendBankOTP({
         signature: signature || '',
         FipId: fipId || '',
@@ -236,9 +238,10 @@ const LinkSelectedAccounts = ({
     ) {
       sendBankOTPQuery.mutate({
         fipId: selectedAccountToLink[nextIndex].fipId,
-        accounts: selectedAccountToLink[nextIndex]?.['DiscoveredAccounts']
+        accounts: selectedAccountToLink[nextIndex]?.DiscoveredAccounts || [],
+        signature: selectedAccountToLink[nextIndex]?.signature || ''
       })
-      setIsExpanded({ item: selectedAccountToLink[nextIndex], expanded: true })
+      setIsExpanded({ item: { ...selectedAccountToLink[nextIndex], accounts: '', otp: '' }, expanded: true })
     } else {
       if (type != 'retry') { setIsExpanded({ item: null, expanded: false }) }
     }
@@ -313,10 +316,11 @@ const LinkSelectedAccounts = ({
       if (accountsStatusArray?.length) {
         handleNextActiveAccount()
       } else {
-        setIsExpanded({ item: selectedAccountToLink[0], expanded: true })
+        setIsExpanded({ item: { ...selectedAccountToLink[0], accounts: '', otp: '' }, expanded: true })
         sendBankOTPQuery.mutate({
           fipId: selectedAccountToLink[0].fipId,
-          accounts: selectedAccountToLink[0]?.['DiscoveredAccounts']
+          accounts: selectedAccountToLink[0]?.DiscoveredAccounts || [],
+          signature: selectedAccountToLink[0]?.signature || ''
         })
       }
     }
@@ -443,7 +447,8 @@ const LinkSelectedAccounts = ({
                         ) {
                           sendBankOTPQuery.mutate({
                             fipId: account.fipId,
-                            accounts: account?.['DiscoveredAccounts']
+                            accounts: account?.DiscoveredAccounts || [],
+                            signature: account?.signature || ''
                           })
                         }
                         setIsExpanded({
@@ -555,7 +560,8 @@ const LinkSelectedAccounts = ({
                             onClick={() => {
                               sendBankOTPQuery.mutate({
                                 fipId: account.fipId,
-                                accounts: account?.['DiscoveredAccounts']
+                                accounts: account?.DiscoveredAccounts || [],
+                                signature: account?.signature || ''
                               })
                               setOTPResent(true)
                             }}