saafe-redirection-flow 2.2.0 → 2.2.1

package/src/pages/accounts/AccountsToProceed.tsx

@@ -7,7 +7,7 @@ import { Button } from '@/components/ui/button'
 import { Checkbox } from '@/components/ui/checkbox'
 import { MobileFooter } from '@/components/ui/mobile-footer'
 import WebFooter from '@/components/ui/web-footer'
-import { useFipStore } from '@/store/fip.store'
+import { FipData, useFipStore } from '@/store/fip.store'
 import { AlertCircle, PlusIcon } from 'lucide-react'
 import { useNavigate } from 'react-router-dom'
 import {
@@ -30,6 +30,10 @@ import { accountService } from '@/services/api'
 import { useQuery } from '@tanstack/react-query'
 import { BankAccount } from '@/pages/accounts/OldUser'
 import AutoDiscoveryLoader from '@/components/AutoDiscoveryLoader'
+import removeUnderscores from '@/utils/removeUnderscore'
+import { extractCategoriesFromResponse, useFipQuery } from '@/hooks/use-fip-query'
+import { fipService } from '@/services/api/fip.service'
+
 
 interface LinkedAccount extends BankAccount {
   fipName: string;
@@ -60,17 +64,23 @@ const AccountsToProceed = ({
     activeCategory,
     setSelectedAccountToLink,
     setOriginalAccounts,
-    originalAccounts
+    originalAccounts,
+    setIdentifiers,
   } = useFipStore()
   const fipIds = state?.selectedFips || selectedFips[category] || []
   useSetPageTitle(`Select accounts you want to link`)
   const [discoveryResult, setDiscoveryResult] =
     useState<ProcessedDiscoveryResult | null>(null)
+  console.log("🚀 ~ discoveryResult:", discoveryResult)
   const [selectedAccounts, setSelectedAccounts] = useState<string[]>([])
+  const [linkedAccountCount, setLinkedAccountCount] = useState<number>(0)
+  console.log("🚀 ~ selectedAccounts:", selectedAccounts)
   const [isLoading, setIsLoading] = useState(false)
   const { decodedInfo } = useRedirectStore()
+  console.log("🚀 ~ decodedInfo:", decodedInfo)
   const isUserPresent = decodedInfo?.isUserPresent || false
-  
+  console.log("🚀 ~ isUserPresent:", isUserPresent)
+
   // State for collapsible UI
   const [openItemId, setOpenItemId] = useState<number | null>(0)
   const [tabOpen, setTabOpen] = useState(false)
@@ -79,7 +89,6 @@ const AccountsToProceed = ({
   // Account discovery with enhanced error handling
   const { mutate, errorMessage, clearError } = useAccountDiscovery()
   const autoDiscovery = useAutoDiscovery()
-  
   // Fetch linked accounts for returning users
   const consentHandle = decodedInfo?.srcref || '';
   const getLinkedAccountsList = useQuery({
@@ -98,12 +107,13 @@ const AccountsToProceed = ({
       }))
     }
   })
-  
+
   // Process linked accounts for display
   const activeLinkedAccount = React.useMemo(() => {
     if (!getLinkedAccountsList?.data) return {};
-    
+
     const accounts: LinkedAccount[] = getLinkedAccountsList.data;
+    setLinkedAccountCount(accounts?.length)
     return accounts.reduce((acc: Record<string, LinkedAccount[]>, account) => {
       const fiType = account.fiType || 'Other';
       if (!acc[fiType]) {
@@ -113,34 +123,34 @@ const AccountsToProceed = ({
       return acc;
     }, {});
   }, [getLinkedAccountsList?.data]);
-  
+
   // Count selected accounts for UI
   const selectedFIPCount = React.useMemo(() => {
     if (!discoveryResult?.groupedAccounts) return { totalCount: 0, groupedCount: {} };
-    
+
     const groupedCount: Record<string, number> = {};
     let totalCount = 0;
-    
+
     Object.entries(discoveryResult.groupedAccounts).forEach(([fiType, accounts]) => {
-      const selectedInType = accounts.filter(account => 
+      const selectedInType = accounts.filter(account =>
         selectedAccounts.includes(account.id)
       ).length;
       groupedCount[fiType] = selectedInType;
       totalCount += selectedInType;
     });
-    
+
     return { totalCount, groupedCount };
   }, [discoveryResult?.groupedAccounts, selectedAccounts]);
-  
+
   // Count linked accounts for UI
   const linkedAccountsCount = React.useMemo(() => {
     if (!activeLinkedAccount) return { totalCount: 0 };
-    
+
     const totalCount = Object.values(activeLinkedAccount as Record<string, LinkedAccount[]>)
       .flat()
       .filter(account => selectedAccounts.includes(account.accountRefNumber))
       .length;
-    
+
     return { totalCount };
   }, [activeLinkedAccount, selectedAccounts]);
 
@@ -164,7 +174,7 @@ const AccountsToProceed = ({
 
   // Check if "Discover More" should be shown based on auto discovery configuration
   const autoDiscoveryConfig = parseAutoDiscoveryConfig(decodedInfo?.customization?.otherAppCustomization)
-  const shouldShowDiscoverMore = state?.isAutoDiscovery 
+  const shouldShowDiscoverMore = state?.isAutoDiscovery
     ? autoDiscoveryConfig[activeCategory?.toUpperCase() as keyof typeof autoDiscoveryConfig]?.showDiscoverMore
     : true // Always show for manual discovery
 
@@ -180,163 +190,157 @@ const AccountsToProceed = ({
 
   // Discover accounts when component loads
   useEffect(() => {
-    console.log('AccountsToProceed useEffect:', {
-      isAutoDiscovery: state?.isAutoDiscovery,
-      category,
-      fipIds: fipIds.length,
-      groupedFipsKeys: Object.keys(groupedFips || {})
-    });
-    
-    let mounted = true
+    let mounted = true;
 
-    if (state?.isAutoDiscovery) {
-      console.log('Using AUTO DISCOVERY for category:', category);
-      
-      // First validate identifiers before proceeding with auto discovery
-      const { fips, identifiers: storeIdentifiers } = useFipStore.getState();
-      const identifiersList: Array<{
-        type: string;
-        value: string | undefined;
-        category: string;
-      }> = [];
-      
-      // For auto discovery, we need to check identifiers across all FIPs in the category
-      const categoryFips = fips.filter(fip => 
-        fip.fiTypeList.some(fiType => 
-          fiTypeCategoryMap[category]?.includes(fiType)
-        ) && fip.isEnabled && fip.isOnBoarded
-      );
-      
-      // Collect required identifiers from category FIPs
-      categoryFips.forEach(fip => {
-        fip.Identifiers?.forEach(identifier => {
-          if (!identifiersList.find(i => i.type === identifier.type)) {
-            // First check if we already have this identifier in store
-            const storeIdentifier = storeIdentifiers.find(i => i.type === identifier.type);
-            let value: string | undefined = undefined;
-            if (storeIdentifier?.value !== undefined) {
-              value = storeIdentifier.value;
-            }
-            
-            // If not in store, fall back to decodedInfo
-            if (!value) {
-              value = identifier.type === 'PAN'
-                ? (decodedInfo?.pan || undefined)
-                : identifier.type === 'MOBILE'
-                  ? (decodedInfo?.phoneNumber || undefined)
-                  : identifier.type === 'DOB'
-                  ? (decodedInfo?.dob || undefined)
-                  : undefined;
+    const fetchAndProceed = async () => {
+      let { fips, identifiers: storeIdentifiers } = useFipStore.getState();
+      const { decodedInfo } = useRedirectStore.getState();
+
+      if (fips.length === 0) {
+        console.log('🔄 No FIPs in store, fetching now...');
+        try {
+          const response = await fipService.getRawFipResponse();
+          const categories = extractCategoriesFromResponse(response);
+          const categorizedFips: Record<string, FipData[]> = {};
+
+          categories.forEach(category => {
+            const categoryData = response[category];
+            if (Array.isArray(categoryData)) {
+              categorizedFips[category] = categoryData as FipData[];
             }
-            
-            identifiersList.push({ 
-              type: identifier.type,
-              value, 
-              category: identifier.category 
-            });
-          }
-        });
-      });
+          });
+
+          const allFips = Object.values(categorizedFips).flat();
 
-      console.log('Auto Discovery - Checking identifiers:', identifiersList);
-      console.log('Auto Discovery - Store identifiers:', storeIdentifiers);
-
-      // Check if any required identifiers are missing
-      const missingIdentifiers = identifiersList.filter(identifier => 
-        !identifier.value || identifier.value.trim() === ''
-      );
-
-      if (missingIdentifiers.length > 0) {
-        console.log('Auto Discovery - Missing identifiers found, redirecting to collect:', missingIdentifiers);
-        // Redirect to DiscoverAccount to collect missing identifiers
-        navigate(`/link-accounts/discover-account`, {
-          state: {
-            category,
-            selectedFips: fipIds, // Use the auto discovery FIP IDs
-            fromAutoDiscovery: true
+          if (allFips.length > 0) {
+            useFipStore.getState().setFips(
+              allFips,
+              decodedInfo?.fiTypesRequiredForConsent,
+              categorizedFips
+            );
+            fips = allFips;
+          } else {
+            console.error("No FIPs returned after fetch");
+            return;
           }
-        });
-        return; // Don't proceed with auto discovery
+        } catch (err) {
+          console.error("Failed to fetch FIPs:", err);
+          return;
+        }
       }
 
-      console.log('Auto Discovery - All identifiers available, proceeding with discovery');
-      // All identifiers are available, set them in store and proceed with auto discovery
-      const { setIdentifiers } = useFipStore.getState();
-      setIdentifiers(identifiersList);
-      
-      // Use auto discovery
-      setIsLoading(true)
-      autoDiscovery.clearError()
+      // Auto-Discovery 
+      console.log('AccountsToProceed useEffect:', {
+        isAutoDiscovery: state?.isAutoDiscovery,
+        category,
+        fipIds: fipIds.length,
+        groupedFipsKeys: Object.keys(groupedFips || {})
+      });
 
-      autoDiscovery.mutate(category, {
-        onSuccess: result => {
-          if (!mounted) return
-          console.log('Auto discovery success:', result);
-          const groupedAccounts = result.accounts.reduce(
-            (acc: Record<string, typeof result.accounts>, account) => {
-              const key = account.type
-              if (!acc[key]) {
-                acc[key] = []
+      if (state?.isAutoDiscovery) {
+        console.log('Using AUTO DISCOVERY for category:', category);
+        const identifiersList: Array<{ type: string; value: string | undefined; category: string }> = [];
+        const categoryFips = fips.filter(fip =>
+          fip.fiTypeList.some(fiType =>
+            fiTypeCategoryMap[category]?.includes(fiType)
+          ) && fip.isEnabled && fip.isOnBoarded
+        );
+        categoryFips.forEach(fip => {
+          fip.Identifiers?.forEach(identifier => {
+            if (!identifiersList.find(i => i.type === identifier.type)) {
+              const storeIdentifier = storeIdentifiers.find(i => i.type === identifier.type);
+              let value = storeIdentifier?.value;
+              if (!value) {
+                value = identifier.type === 'PAN'
+                  ? (decodedInfo?.pan || undefined)
+                  : identifier.type === 'MOBILE'
+                    ? (decodedInfo?.phoneNumber || undefined)
+                    : identifier.type === 'DOB'
+                      ? (decodedInfo?.dob || undefined)
+                      : undefined;
               }
-              acc[key].push(account)
-              return acc
-            },
-            {}
-          )
-          setDiscoveryResult({ ...result, groupedAccounts })
-          setOriginalAccounts(result.originalAccounts)
+              identifiersList.push({ type: identifier.type, value, category: identifier.category });
+            }
+          });
+        });
 
-          setIsLoading(false)
-        },
-        onError: (error) => {
-          if (!mounted) return
-          console.log('Auto discovery error:', error);
-          setIsLoading(false)
+        const missingIdentifiers = identifiersList.filter(identifier =>
+          !identifier.value || identifier.value.trim() === ''
+        );
+
+        if (missingIdentifiers.length > 0) {
+          navigate(`/link-accounts/discover-account`, {
+            state: {
+              category,
+              selectedFips: fipIds,
+              fromAutoDiscovery: true
+            }
+          });
+          return;
         }
-      })
-    } else if (fipIds.length > 0) {
-      console.log('Using MANUAL DISCOVERY for FIPs:', fipIds);
-      // Use manual discovery
-      setIsLoading(true)
-      clearError()
 
-      mutate(fipIds, {
-        onSuccess: result => {
-          if (!mounted) return
-          const groupedAccounts = result.accounts.reduce(
-            (acc: Record<string, typeof result.accounts>, account) => {
-              const key = account.type
-              if (!acc[key]) {
-                acc[key] = []
-              }
-              acc[key].push(account)
-              return acc
-            },
-            {}
-          )
-          setDiscoveryResult({ ...result, groupedAccounts })
-          setOriginalAccounts(result.originalAccounts)
+        setIdentifiers(identifiersList);
+        setIsLoading(true);
+        autoDiscovery.clearError();
 
-          setIsLoading(false)
-        },
-        onError: () => {
-          if (!mounted) return
-          setIsLoading(false)
-        }
-      })
-    } else {
-      console.log('No discovery triggered - no FIPs and not auto discovery');
-    }
+        autoDiscovery.mutate(category, {
+          onSuccess: result => {
+            if (!mounted) return;
+            const groupedAccounts = result.accounts.reduce((acc, account) => {
+              const key = account.type;
+              if (!acc[key]) acc[key] = [];
+              acc[key].push(account);
+              return acc;
+            }, {} as Record<string, typeof result.accounts>);
+
+            setDiscoveryResult({ ...result, groupedAccounts });
+            setOriginalAccounts(result.originalAccounts);
+            setIsLoading(false);
+          },
+          onError: (error) => {
+            if (!mounted) return;
+            console.error('Auto discovery error:', error);
+            setIsLoading(false);
+          }
+        });
+      } else if (fipIds.length > 0) {
+        setIsLoading(true);
+        clearError();
+
+        mutate(fipIds, {
+          onSuccess: result => {
+            if (!mounted) return;
+            const groupedAccounts = result.accounts.reduce((acc, account) => {
+              const key = account.type;
+              if (!acc[key]) acc[key] = [];
+              acc[key].push(account);
+              return acc;
+            }, {} as Record<string, typeof result.accounts>);
+
+            setDiscoveryResult({ ...result, groupedAccounts });
+            setOriginalAccounts(result.originalAccounts);
+            setIsLoading(false);
+          },
+          onError: () => {
+            if (!mounted) return;
+            setIsLoading(false);
+          }
+        });
+      } else {
+        console.log('No discovery triggered - no FIPs and not auto discovery');
+      }
+    };
+
+    fetchAndProceed();
 
-    // Cleanup function to handle unmounting
     return () => {
-      mounted = false
-    }
-  }, [fipIds, state?.isAutoDiscovery, category]) // Depend on auto discovery flag and category
+      mounted = false;
+    };
+  }, [fipIds, state?.isAutoDiscovery, category]);
 
   const handleProceed = () => {
     console.log('handleProceed called with:', { selectedAccounts, originalAccounts })
-    
+
     const result: Array<{
       id: string;
       fipId: string;
@@ -347,24 +351,24 @@ const AccountsToProceed = ({
       bankName: string;
       logoUrl?: string;
       isNew?: boolean;
-             DiscoveredAccounts: Array<{
-         FIType: string;
-         accType: string;
-         accRefNumber: string;
-         maskedAccNumber: string;
-         state: string | null;
-         amcName: string | null;
-         logoUrl: string | null;
-       }>;
+      DiscoveredAccounts: Array<{
+        FIType: string;
+        accType: string;
+        accRefNumber: string;
+        maskedAccNumber: string;
+        state: string | null;
+        amcName: string | null;
+        logoUrl: string | null;
+      }>;
     }> = []
-    
+
     originalAccounts.forEach((item, index) => {
-      const data = item?.["DiscoveredAccounts"].filter(account => 
+      const data = item?.["DiscoveredAccounts"].filter(account =>
         selectedAccounts.includes(account.accRefNumber)
       )
       if (data.length > 0) {
         // For each FIP with selected accounts, create one entry
-        result.push({ 
+        result.push({
           id: `${index} - ${item.fipName}`,
           fipId: item.fipId,
           fipName: item.fipName,
@@ -382,7 +386,7 @@ const AccountsToProceed = ({
     console.log('handleProceed result:', result)
     console.log('Setting selectedAccountToLink with result length:', result.length)
     setSelectedAccountToLink(result)
-    
+
     // Navigate to account linking screen with selected accounts and signature
     navigate('/link-accounts/link', {
       state: {
@@ -407,8 +411,13 @@ const AccountsToProceed = ({
       return updatedSelection;
     });
   };
-  
-  const toggleBankSelection = (bankId: string) => {
+
+  const toggleBankSelection = (bankId: string, event?: React.MouseEvent) => {
+
+    if (event) {
+      event.stopPropagation();
+    }
+
     setSelectedAccounts(prev => {
       let updatedSelection;
       if (prev.includes(bankId)) {
@@ -505,17 +514,17 @@ const AccountsToProceed = ({
   const validateIdentifiersBeforeDiscoverMore = () => {
     // Get the FIP store state to access fips data
     const { fips } = useFipStore.getState();
-    
+
     if (!fipIds || fipIds.length === 0) {
       return true; // No FIPs selected, can't validate
     }
-    
+
     const identifiersList: Array<{
       type: string;
       value: string | null | undefined;
       categoryType: string;
     }> = [];
-    
+
     // Collect required identifiers from selected FIPs
     fips
       .filter(fip => fipIds.includes(fip.id))
@@ -528,12 +537,12 @@ const AccountsToProceed = ({
                 : identifier.type === 'MOBILE'
                   ? decodedInfo?.phoneNumber
                   : identifier.type === 'DOB'
-                  ? decodedInfo?.dob
-                  : null;
-            identifiersList.push({ 
+                    ? decodedInfo?.dob
+                    : null;
+            identifiersList.push({
               type: identifier.type,
-              value, 
-              categoryType: identifier.category 
+              value,
+              categoryType: identifier.category
             });
           }
         });
@@ -542,7 +551,7 @@ const AccountsToProceed = ({
     console.log('AccountsToProceed - Checking identifiers for discover more:', identifiersList);
 
     // Check if any required identifiers are missing
-    const missingIdentifiers = identifiersList.filter(identifier => 
+    const missingIdentifiers = identifiersList.filter(identifier =>
       !identifier.value || identifier.value.trim() === ''
     );
 
@@ -591,85 +600,161 @@ const AccountsToProceed = ({
         ))
     }
 
-    if (
+    const hasDiscoveredAccounts =
       discoveryResult?.groupedAccounts &&
-      Object.keys(discoveryResult.groupedAccounts).length > 0
-    ) {
-      return (
-                       <div className='mt-2 shadow-sm shadow-black/5 rounded-md'>
-                    <div className='py-5 px-5 rounded-t-md text-primary border-primary bg-ring dark:text-primary'>
-                      <h1 className='flex justify-start items-center gap-1 text-md md:text-xl font-semibold'>
-                        {"Discovered for you"}
-                        <Sparkles size={20} fill={'#008e9a'} />
-                      </h1>
-                      <p className='text-sm md:text-lg'>
-                        {selectedFIPCount.totalCount > 0
-                          ? `${selectedFIPCount.totalCount} of ${discoveryResult?.accounts?.length || 0} accounts selected`
-                          : `No accounts selected`}
-                      </p>
-                    </div>
-                    <div className='flex flex-col rounded-b-2xl bg-card'>
-                      {Object.entries(discoveryResult.groupedAccounts as Record<string, any[]>).map(([fiType, accounts], index) => {
-                        const isOpen = openItemId === index;
-                        
-                        return (
-                          <Collapsible
-                            key={fiType}
-                            open={isOpen}
-                            onOpenChange={() => setOpenItemId(isOpen ? null : index)}
-                          >
-                            <CollapsibleTrigger className="flex justify-between w-full items-center p-4">
-                              <SectionTitle 
-                                title={fiType}
-                                rightSection={(
-                                  <ChevronDownIcon
-                                    size={20}
-                                    className={`h-5 w-5 transition-transform duration-300 ${
-                                      isOpen ? "rotate-180" : "rotate-0"
-                                    }`}
+      Object.keys(discoveryResult.groupedAccounts).length > 0;
+
+    return (
+      <>
+        {/* Discovered Accounts Section */}
+        {hasDiscoveredAccounts && (
+          <div>
+            <div className='mt-2 shadow-sm shadow-black/5 rounded-md'>
+              <div className='py-5 px-5 rounded-t-md text-primary border-primary bg-ring dark:text-primary'>
+                <h1 className='flex justify-start items-center gap-1 text-md font-semibold'>
+                  {"Discovered for you"}
+                  <Sparkles size={18} fill={'#008e9a'} />
+                </h1>
+                <p className='text-sm md:text-lg'>
+                  {selectedFIPCount.totalCount > 0
+                    ? `${selectedFIPCount.totalCount} of ${discoveryResult?.accounts?.length || 0} accounts selected`
+                    : `No accounts selected`}
+                </p>
+              </div>
+              <div className='flex flex-col rounded-b-2xl bg-card'>
+                {Object.entries(discoveryResult.groupedAccounts as Record<string, any[]>).map(([fiType, accounts], index) => {
+                  const isOpen = openItemId === index;
+
+                  return (
+                    <Collapsible
+                      key={fiType}
+                      open={isOpen}
+                      onOpenChange={() => setOpenItemId(isOpen ? null : index)}
+                    >
+                      <CollapsibleTrigger className="flex justify-between w-full items-center p-4">
+                        <SectionTitle
+                          title={fiType}
+                          className='text-sm md:text-sm'
+                          rightSection={(
+                            <ChevronDownIcon
+                              size={20}
+                              className={`h-5 w-5 transition-transform duration-300 ${isOpen ? "rotate-180" : "rotate-0"
+                                }`}
+                            />
+                          )}
+                        />
+                      </CollapsibleTrigger>
+                      <CollapsibleContent open={isOpen} className="px-4 pb-4">
+                        {accounts.map(account => (
+                          <div className='mt-2 flex flex-col gap-2' key={account.id}>
+                            <OuterCard
+                              selected={selectedAccounts.includes(account.id)}
+                              onSelect={() => toggleBankSelection(account.id)}
+                            >
+                              <BankCard
+                                bankName={account.bankName}
+                                image={account.logoUrl}
+                                subText={`${account.type} | **${formatAccountNumber(account.maskedAccountNumber || "0")}`}
+                                onClick={() => toggleBankSelection(account.id)}
+                                rightSection={
+                                  <Checkbox
+                                    id={`checkbox-${account.id}`}
+                                    checked={selectedAccounts.includes(account.id)}
+                                    onCheckedChange={() => toggleBankSelection(account.id)}
                                   />
-                                )}
+                                }
                               />
-                            </CollapsibleTrigger>
-                            <CollapsibleContent open={isOpen} className="px-4 pb-4">
-                              {accounts.map(account => (
-                                <div className='mt-2 flex flex-col gap-2' key={account.id}>
-                                  <OuterCard
-                                    selected={selectedAccounts.includes(account.id)}
-                                    onSelect={() => toggleBankSelection(account.id)}
-                                  >
-                                    <BankCard
-                                      bankName={account.bankName}
-                                      image={account.logoUrl}
-                                      subText={`${account.type} | **${formatAccountNumber(account.maskedAccountNumber || "0")}`}
-                                      onClick={() => toggleBankSelection(account.id)}
-                                      rightSection={
-                                        <Checkbox
-                                          id={`checkbox-${account.id}`}
-                                          checked={selectedAccounts.includes(account.id)}
-                                          onCheckedChange={() => toggleBankSelection(account.id)}
-                                        />
-                                      }
-                                    />
-                                  </OuterCard>
-                                </div>
-                              ))}
-                            </CollapsibleContent>
-                          </Collapsible>
-                        );
-                      })}
-                    </div>
-                  </div>
-      )
-    }
+                            </OuterCard>
+                          </div>
+                        ))}
+                      </CollapsibleContent>
+                    </Collapsible>
+                  );
+                })}
+              </div>
+            </div>
+          </div>
+        )}
 
-    return (
-      <div className='text-center p-4 text-gray-500'>
-        {(errorMessage || autoDiscovery.errorMessage)
-          ? 'Failed to discover accounts'
-          : 'No accounts found for the selected banks'}
-      </div>
-    )
+        {/* Linked Accounts Section - Always show */}
+        <div className='flex flex-col rounded-2xl bg-card mt-6'>
+          <Collapsible open={tabOpen} onOpenChange={setTabOpen} className="border-none">
+            <CollapsibleTrigger asChild>
+              <div className='flex items-center bg-card py-4 px-5 pr-4 rounded-xl justify-between gap-2 cursor-pointer shadow-sm shadow-black/5'>
+                <div className='flex flex-col justify-center relative'>
+                  <p className="text-md text-stone-500 dark:text-gray-200 font-semibold ">Linked accounts</p>
+                  <p className="text-sm text-stone-700 dark:text-gray-400">
+                    {linkedAccountCount || 0} linked account{linkedAccountCount > 1 ? "s" : ""} across {Object.keys(activeLinkedAccount).length} FI Type{Object.keys(activeLinkedAccount).length > 1 ? "s" : ""}
+                  </p>
+                </div>
+                <div>
+                  <ChevronDownIcon
+                    size={18}
+                    className={`h-5 w-5 transition-transform duration-300 ${tabOpen ? "rotate-180" : "rotate-0"
+                      }`}
+                  />
+                </div>
+              </div>
+            </CollapsibleTrigger>
+            <CollapsibleContent open={tabOpen} className="pb-4 bg-card rounded-b-xl">
+              {Object.entries(activeLinkedAccount as Record<string, LinkedAccount[]>).map(([f, accounts], index) => {
+                const isOpen = openLinkAcc === index;
+                const fiType = removeUnderscores(f) || f
+                return (
+                  <Collapsible
+                    key={fiType}
+                    open={isOpen}
+                    onOpenChange={() => setOpenLinkAcc(isOpen ? null : index)}
+                  >
+                    <CollapsibleTrigger className="flex justify-between items-center p-4 w-[100%]">
+                      <SectionTitle
+                        title={fiType}
+                        className='text-sm md:text-sm'
+                        rightSection={(
+                          <ChevronDownIcon
+                            size={18}
+                            className={`h-5 w-5 transition-transform duration-300 ${isOpen ? "rotate-180" : "rotate-0"
+                              }`}
+                          />
+                        )}
+                      />
+                    </CollapsibleTrigger>
+                    <CollapsibleContent open={isOpen} className="px-4 pb-4">
+                      {accounts.map(account => (
+                        <div className='mt-2 flex flex-col gap-2' key={account.id}>
+                          <OuterCard
+                            selected={true}
+                          >
+                            <BankCard
+                              bankName={account.bankName}
+                              image={account.logoUrl}
+                              subText={`${account.type} | **${formatAccountNumber(account.maskedAccountNumber || "0")}`}
+                            />
+                          </OuterCard>
+                        </div>
+                      ))}
+                    </CollapsibleContent>
+                  </Collapsible>
+                );
+              })}
+            </CollapsibleContent>
+          </Collapsible>
+        </div>
+
+        {/* No discovered accounts message */}
+        {!hasDiscoveredAccounts && (
+          <Alert className='flex items-center mt-2'>
+            <AlertCircle className='w-4 h-4' />
+            <AlertDescription className='flex items-center justify-between'>
+              {/* {"Do not refresh the page while we fetch your accounts."} */}
+              {(errorMessage || autoDiscovery.errorMessage)
+              ? 'Failed to discover accounts'
+              : 'No new accounts discovered, kindly skip'}
+            </AlertDescription>
+          </Alert>
+        )}
+      </>
+    );
   }
 
   return (
@@ -684,22 +769,24 @@ const AccountsToProceed = ({
           )} ${discoveryResult?.accounts?.length === 1 ? t('keywords.account') : t('keywords.accounts')}`}
 
           rightSection={
-            <AnimatedButton
-              variant={'ghost'}
-              onClick={handleSelectAll}
-              disabled={
-                !discoveryResult?.accounts ||
-                discoveryResult.accounts.length === 0
-              }
-            >
-              <p className='text-primary'>
-                {discoveryResult?.accounts &&
-                  selectedAccounts.length === discoveryResult.accounts.length &&
-                  discoveryResult.accounts.length > 0
-                  ? t('unselectAll')
-                  : t('selectAll')}
-              </p>
-            </AnimatedButton>
+            discoveryResult?.accounts && discoveryResult.accounts.length > 0 ? (
+              <AnimatedButton
+                variant={'ghost'}
+                onClick={handleSelectAll}
+                disabled={
+                  !discoveryResult?.accounts ||
+                  discoveryResult.accounts.length === 0
+                }
+              >
+                <p className='text-primary'>
+                  {discoveryResult?.accounts &&
+                    selectedAccounts.length === discoveryResult.accounts.length &&
+                    discoveryResult.accounts.length > 0
+                    ? t('unselectAll')
+                    : t('selectAll')}
+                </p>
+              </AnimatedButton>
+            ) : null
           }
         />
 
@@ -708,169 +795,187 @@ const AccountsToProceed = ({
             <AlertCircle className='w-4 h-4' />
             <AlertDescription className='flex items-center justify-between'>
               {errorMessage || autoDiscovery.errorMessage}
-              <Button
-                variant='outline'
-                size='sm'
-                onClick={retryDiscovery}
-                className='ml-2'
-              >
-                Retry
-              </Button>
+              {
+                !isLoading && (
+                  <Button
+                    variant='outline'
+                    size='sm'
+                    onClick={retryDiscovery}
+                    className='ml-2'
+                  >
+                    Retry
+                  </Button>
+                )
+              }
+            </AlertDescription>
+          </Alert>
+        )}
+
+        {isLoading && (
+          <Alert className='flex items-center mb-2'>
+            <AlertCircle className='w-4 h-4' />
+            <AlertDescription className='flex items-center justify-between'>
+              {"Do not refresh the page while we fetch your accounts."}
+
             </AlertDescription>
           </Alert>
         )}
 
         <div className='flex flex-col gap-2'>
           <div className='flex flex-col gap-2 mb-4'>
-                          {state?.isAutoDiscovery && discoveryResult?.groupedAccounts ? (
-                <>
-                  {/* Auto Discovery Section */}
-                  <div className='mt-2 shadow-sm shadow-black/5 rounded-xl'>
-                    <div className='py-5 px-5 rounded-t-xl text-primary border-primary bg-ring dark:text-primary'>
-                      <h1 className='flex justify-start items-center gap-1 text-md md:text-xl font-semibold'>
-                        {"Discovered for you"}
-                        <Sparkles size={20} fill={'#008e9a'} />
-                      </h1>
-                      <p className='text-sm md:text-lg'>
-                        {selectedFIPCount.totalCount > 0
-                          ? `${selectedFIPCount.totalCount} of ${discoveryResult?.accounts?.length || 0} accounts selected`
-                          : `No accounts selected`}
-                      </p>
-                    </div>
-                    <div className='flex flex-col rounded-b-2xl bg-card'>
-                      {Object.entries(discoveryResult.groupedAccounts as Record<string, any[]>).map(([fiType, accounts], index) => {
-                        const isOpen = openItemId === index;
-                        
-                        return (
-                          <Collapsible
-                            key={fiType}
-                            open={isOpen}
-                            onOpenChange={() => setOpenItemId(isOpen ? null : index)}
-                          >
-                            <CollapsibleTrigger className="flex justify-between w-full items-center p-4">
-                              <SectionTitle 
-                                title={fiType}
-                                rightSection={(
-                                  <ChevronDownIcon
-                                    size={20}
-                                    className={`h-5 w-5 transition-transform duration-300 ${
-                                      isOpen ? "rotate-180" : "rotate-0"
+            {state?.isAutoDiscovery && discoveryResult?.groupedAccounts ? (
+              <>
+                {/* Auto Discovery Section */}
+                <div className='mt-2 shadow-sm shadow-black/5 rounded-xl'>
+                  <div className='py-5 px-5 rounded-t-xl text-primary border-primary bg-ring dark:text-primary'>
+                    <h1 className='flex justify-start items-center gap-1 text-md font-semibold'>
+                      {"Discovered for you"}
+                      <Sparkles size={18} fill={'#008e9a'} />
+                    </h1>
+                    <p className='text-sm'>
+                      {selectedFIPCount.totalCount > 0
+                        ? `${selectedFIPCount.totalCount} of ${discoveryResult?.accounts?.length || 0} accounts selected`
+                        : `No accounts selected`}
+                    </p>
+                  </div>
+                  <div className='flex flex-col rounded-b-2xl bg-card'>
+                    {Object.entries(discoveryResult.groupedAccounts as Record<string, any[]>).map(([f, accounts], index) => {
+                      const isOpen = openItemId === index;
+                      const fiType = removeUnderscores(f)
+
+                      return (
+                        <Collapsible
+                          key={fiType}
+                          open={isOpen}
+                          onOpenChange={() => setOpenItemId(isOpen ? null : index)}
+                        >
+                          <CollapsibleTrigger className="flex justify-between w-full items-center p-4">
+                            <SectionTitle
+                              className='text-sm md:text-sm'
+                              title={fiType}
+                              rightSection={(
+                                <ChevronDownIcon
+                                  size={18}
+                                  className={`h-5 w-5 transition-transform duration-300 ${isOpen ? "rotate-180" : "rotate-0"
                                     }`}
-                                  />
-                                )}
-                              />
-                            </CollapsibleTrigger>
-                            <CollapsibleContent open={isOpen} className="px-4 pb-4">
-                              {accounts.map(account => (
-                                <div className='mt-2 flex flex-col gap-2' key={account.id}>
-                                  <OuterCard
-                                    selected={selectedAccounts.includes(account.id)}
-                                    onSelect={() => toggleBankSelection(account.id)}
-                                  >
-                                    <BankCard
-                                      bankName={account.bankName}
-                                      image={account.logoUrl}
-                                      subText={`${account.type} | **${formatAccountNumber(account.maskedAccountNumber || "0")}`}
-                                      onClick={() => toggleBankSelection(account.id)}
-                                      rightSection={
+                                />
+                              )}
+                            />
+                          </CollapsibleTrigger>
+                          <CollapsibleContent open={isOpen} className="px-4 pb-4">
+                            {accounts.map(account => (
+                              <div className='mt-2 flex flex-col gap-2' key={account.id}>
+                                <OuterCard
+                                  selected={selectedAccounts.includes(account.id)}
+                                  onSelect={() => toggleBankSelection(account.id)}
+                                >
+                                  <BankCard
+                                    bankName={account.bankName}
+                                    image={account.logoUrl}
+                                    subText={`${account.type} | **${formatAccountNumber(account.maskedAccountNumber || "0")}`}
+                                    onClick={() => toggleBankSelection(account.id)}
+                                    rightSection={
+                                      <div onClick={(e) => e.stopPropagation()}>
                                         <Checkbox
                                           id={`checkbox-${account.id}`}
                                           checked={selectedAccounts.includes(account.id)}
                                           onCheckedChange={() => toggleBankSelection(account.id)}
                                         />
-                                      }
-                                    />
-                                  </OuterCard>
-                                </div>
-                              ))}
-                            </CollapsibleContent>
-                          </Collapsible>
-                        );
-                      })}
-                    </div>
+                                      </div>
+                                    }
+                                  />
+                                </OuterCard>
+                              </div>
+                            ))}
+                          </CollapsibleContent>
+                        </Collapsible>
+                      );
+                    })}
                   </div>
+                </div>
 
-                  {/* Linked Accounts Section - Only for returning users */}
-                  {isUserPresent && Object.keys(activeLinkedAccount).length > 0 && (
-                    <div className='mt-6'>
-                      <Collapsible open={tabOpen} onOpenChange={setTabOpen} className="border-none">
-                        <CollapsibleTrigger asChild>
-                          <div className='flex items-center bg-card py-4 px-5 pr-4 rounded-t-xl justify-between gap-2 cursor-pointer shadow-sm shadow-black/5'>
-                            <div className='flex flex-col justify-center relative'>
-                              <p className="text-lg text-stone-500 dark:text-gray-200 font-bold">Linked accounts</p>
-                              <p className="text-sm text-stone-700 dark:text-gray-400">
-                                {Object.keys(activeLinkedAccount).length} {Object.keys(activeLinkedAccount).length > 1 ? "linked accounts" : "linked account"}
-                              </p>
-                            </div>
-                            <div>
-                              <ChevronDownIcon
-                                size={20}
-                                className={`h-5 w-5 transition-transform duration-300 ${
-                                  tabOpen ? "rotate-180" : "rotate-0"
+                {/* Linked Accounts Section - Only for returning users */}
+                {isUserPresent && Object.keys(activeLinkedAccount).length > 0 && (
+                  <div className='mt-6'>
+                    <Collapsible open={tabOpen} onOpenChange={setTabOpen} className="border-none">
+                      <CollapsibleTrigger asChild>
+                        <div className='flex items-center bg-card py-4 px-5 pr-4 rounded-t-xl justify-between gap-2 cursor-pointer shadow-sm shadow-black/5'>
+                          <div className='flex flex-col justify-center relative'>
+                            <p className="text-md text-stone-500 dark:text-gray-200 font-semibold ">Linked accounts</p>
+                            <p className="text-sm text-stone-700 dark:text-gray-400">
+                              {/* {Object.keys(activeLinkedAccount).length} {Object.keys(activeLinkedAccount).length > 1 ? "linked accounts" : "linked account"} */}
+                              {linkedAccountCount || 0} linked account{linkedAccountCount > 1 ? "s" : ""} across {Object.keys(activeLinkedAccount).length} FI Type{Object.keys(activeLinkedAccount).length > 1 ? "s" : ""}
+                            </p>
+                          </div>
+                          <div>
+                            <ChevronDownIcon
+                              size={18}
+                              className={`h-5 w-5 transition-transform duration-300 ${tabOpen ? "rotate-180" : "rotate-0"
                                 }`}
-                              />
-                            </div>
+                            />
                           </div>
-                        </CollapsibleTrigger>
-                        <CollapsibleContent open={tabOpen} className="pb-4 bg-card rounded-b-xl">
-                          {Object.entries(activeLinkedAccount as Record<string, LinkedAccount[]>).map(([fiType, accounts], index) => {
-                            const isOpen = openLinkAcc === index;
-                            return (
-                              <Collapsible
-                                key={fiType}
-                                open={isOpen}
-                                onOpenChange={() => setOpenLinkAcc(isOpen ? null : index)}
-                              >
-                                <CollapsibleTrigger className="flex justify-between items-center p-4 w-[100%]">
-                                  <SectionTitle 
-                                    title={fiType}
-                                    rightSection={(
-                                      <ChevronDownIcon
-                                        size={20}
-                                        className={`h-5 w-5 transition-transform duration-300 ${
-                                          isOpen ? "rotate-180" : "rotate-0"
+                        </div>
+                      </CollapsibleTrigger>
+                      <CollapsibleContent open={tabOpen} className="pb-4 bg-card rounded-b-xl">
+                        {Object.entries(activeLinkedAccount as Record<string, LinkedAccount[]>).map(([f, accounts], index) => {
+                          const isOpen = openLinkAcc === index;
+                          const fiType = removeUnderscores(f) || f
+                          return (
+                            <Collapsible
+                              key={fiType}
+                              open={isOpen}
+                              onOpenChange={() => setOpenLinkAcc(isOpen ? null : index)}
+                            >
+                              <CollapsibleTrigger className="flex justify-between items-center p-4 w-[100%]">
+                                <SectionTitle
+                                  title={fiType}
+                                  className='text-sm md:text-sm'
+                                  rightSection={(
+                                    <ChevronDownIcon
+                                      size={18}
+                                      className={`h-5 w-5 transition-transform duration-300 ${isOpen ? "rotate-180" : "rotate-0"
                                         }`}
+                                    />
+                                  )}
+                                />
+                              </CollapsibleTrigger>
+                              <CollapsibleContent open={isOpen} className="px-4 pb-4">
+                                {accounts.map(account => (
+                                  <div className='mt-2 flex flex-col gap-2' key={account.id}>
+                                    <OuterCard
+                                      selected={true}
+                                    // onSelect={() => toggleBankSelection(account.accountRefNumber)}
+                                    >
+                                      <BankCard
+                                        bankName={account.bankName}
+                                        image={account.logoUrl}
+                                        subText={`${account.type} | **${formatAccountNumber(account.maskedAccountNumber || "0")}`}
+                                      // onClick={() => toggleBankSelection(account.accountRefNumber)}
+                                      // rightSection={
+                                      //   <Checkbox
+                                      //     id={`checkbox-${account.id}`}
+                                      //     checked={selectedAccounts.includes(account.accountRefNumber)}
+                                      //     onCheckedChange={() => toggleBankSelection(account.accountRefNumber)}
+                                      //   />
+                                      // }
                                       />
-                                    )}
-                                  />
-                                </CollapsibleTrigger>
-                                <CollapsibleContent open={isOpen} className="px-4 pb-4">
-                                  {accounts.map(account => (
-                                    <div className='mt-2 flex flex-col gap-2' key={account.id}>
-                                      <OuterCard
-                                        selected={true}
-                                        // onSelect={() => toggleBankSelection(account.accountRefNumber)}
-                                      >
-                                        <BankCard
-                                          bankName={account.bankName}
-                                          image={account.logoUrl}
-                                          subText={`${account.type} | **${formatAccountNumber(account.maskedAccountNumber || "0")}`}
-                                          // onClick={() => toggleBankSelection(account.accountRefNumber)}
-                                          // rightSection={
-                                          //   <Checkbox
-                                          //     id={`checkbox-${account.id}`}
-                                          //     checked={selectedAccounts.includes(account.accountRefNumber)}
-                                          //     onCheckedChange={() => toggleBankSelection(account.accountRefNumber)}
-                                          //   />
-                                          // }
-                                        />
-                                      </OuterCard>
-                                    </div>
-                                  ))}
-                                </CollapsibleContent>
-                              </Collapsible>
-                            );
-                          })}
-                        </CollapsibleContent>
-                      </Collapsible>
-                    </div>
-                  )}
-                </>
-              ) : (
+                                    </OuterCard>
+                                  </div>
+                                ))}
+                              </CollapsibleContent>
+                            </Collapsible>
+                          );
+                        })}
+                      </CollapsibleContent>
+                    </Collapsible>
+                  </div>
+                )}
+              </>
+            ) : (
               renderAccountGroups()
             )}
           </div>
-          {(requiredCategory?.every(fiType => totalCategory?.includes(fiType)) || state?.isAutoDiscovery  || !shouldShowDiscoverMore) ? null :
+          {(requiredCategory?.every(fiType => totalCategory?.includes(fiType)) || state?.isAutoDiscovery || !shouldShowDiscoverMore) ? null :
             <Button
               variant={'outline'}
               className='bg-primary-foreground text-primary border-primary hover:bg-primary/10 h-[50px] dark:bg-ring'