saafe-redirection-flow 2.0.0

package/src/pages/accounts/AccountsToProceed.tsx

@@ -0,0 +1,396 @@
+import { useEffect, useState } from 'react'
+import BankCard from '@/components/cards/BankCard'
+import OuterCard from '@/components/cards/OuterCard'
+import SectionTitle from '@/components/title/SectionTitle'
+import { AnimatedButton } from '@/components/ui/animatedButton'
+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 { AlertCircle, PlusIcon } from 'lucide-react'
+import { useNavigate } from 'react-router-dom'
+import {
+  ProcessedDiscoveryResult,
+  useAccountDiscovery
+} from '@/hooks/use-account-discovery'
+import { Alert, AlertDescription } from '@/components/ui/alert'
+import { useTranslation } from 'react-i18next'
+import { Label } from '@/components/ui/label'
+import { formatAccountNumber } from '@/utils/formatAccountNumber'
+import { useSetPageTitle } from '@/hooks/use-page-title'
+import DummyFooter from '@/components/dummyFooter'
+import { useRedirectStore } from '@/store/redirect.store'
+import { fiTypeCategoryMap } from '@/const/fiTypeCategoryMap'
+interface AccountsToProceedProps {
+  state?: {
+    category: string
+    selectedFips: string[]
+  }
+  currentCategory?: string | null
+}
+
+const AccountsToProceed = ({
+  state,
+  currentCategory
+}: AccountsToProceedProps) => {
+  const navigate = useNavigate()
+  const { t } = useTranslation()
+  const category = state?.category || currentCategory || 'BANKS'
+  const {
+    selectedFips,
+    groupedFips,
+    activeCategory,
+    setSelectedAccountToLink,
+    setSignature,
+    setOriginalAccounts,
+    originalAccounts
+  } = useFipStore()
+  const fipIds = state?.selectedFips || selectedFips[category] || []
+  useSetPageTitle(`Select accounts you want to link`)
+  const [discoveryResult, setDiscoveryResult] =
+    useState<ProcessedDiscoveryResult | null>(null)
+  const [selectedAccounts, setSelectedAccounts] = useState<string[]>([])
+  const [isLoading, setIsLoading] = useState(false)
+  const { decodedInfo } = useRedirectStore()
+
+  // Account discovery with enhanced error handling
+  const { mutate, errorMessage, clearError } = useAccountDiscovery()
+
+  // Format category name for display
+  const formatCategoryName = (name: string) => {
+    return name
+      .split('_')
+      .map(word => word.charAt(0) + word.slice(1).toLowerCase())
+      .join(' ')
+  }
+
+  const totalCategory = decodedInfo?.fipId?.split(',').map(fip => {
+    const fipData = activeCategory ? fiTypeCategoryMap[activeCategory]?.map((fiType: string) => {
+      const filteredFips = groupedFips[fiType]?.filter(f => f.id === fip);
+      return filteredFips?.[0]?.fiTypeList || [];
+    }).filter(Boolean) : [];
+    return fipData?.flat() || [];
+  }).flat() || [];
+
+  const requiredCategory = activeCategory ? fiTypeCategoryMap[activeCategory]?.filter((fiType: string) => decodedInfo?.fiTypesRequiredForConsent?.includes(fiType)) || [] : [];
+
+  // Discover accounts when component loads
+  useEffect(() => {
+    let mounted = true
+
+    if (fipIds.length > 0) {
+      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 })
+          setSignature(result.signature)
+          setOriginalAccounts(result.originalAccounts)
+
+          setIsLoading(false)
+        },
+        onError: () => {
+          if (!mounted) return
+          setIsLoading(false)
+        }
+      })
+    }
+
+    // Cleanup function to handle unmounting
+    return () => {
+      mounted = false
+    }
+  }, [fipIds]) // Only depend on fipIds changing
+
+  const handleProceed = () => {
+    const result: typeof originalAccounts = []
+    originalAccounts.forEach((item, index) => {
+      const data = item?.["DiscoveredAccounts"].filter(account => selectedAccounts.includes(account.accRefNumber))
+      if (data.length > 0) {
+        result.push({ ...item, DiscoveredAccounts: data, id: `${index} - ${item.fipName}` })
+      }
+    })
+
+    setSelectedAccountToLink(result)
+    // Navigate to account linking screen with selected accounts and signature
+    navigate('/link-accounts/link', {
+      state: {
+        category,
+        selectedFips: fipIds,
+        selectedAccounts,
+        signature: discoveryResult?.signature
+      }
+    })
+  }
+
+
+  const handleSelectAccount = (accountId: string) => {
+    setSelectedAccounts(prev => {
+      let updatedSelection;
+      if (prev.includes(accountId)) {
+        updatedSelection = prev.filter(id => id !== accountId);
+      } else {
+        updatedSelection = [...prev, accountId];
+      }
+      localStorage.setItem('selectedAccounts', JSON.stringify(updatedSelection));
+      return updatedSelection;
+    });
+  };
+
+
+
+  useEffect(() => {
+    const storedSelection = localStorage.getItem('selectedAccounts');
+    if (storedSelection) {
+      setSelectedAccounts(JSON.parse(storedSelection));
+    }
+  }, []);
+
+
+
+  const handleSelectAll = () => {
+    if (discoveryResult?.accounts) {
+      const allSelected = discoveryResult.accounts.map(account => account.id);
+
+      if (selectedAccounts.length === allSelected.length) {
+
+        setSelectedAccounts([]);
+        localStorage.setItem('selectedAccounts', JSON.stringify([]));
+      } else {
+
+        setSelectedAccounts(allSelected);
+        localStorage.setItem('selectedAccounts', JSON.stringify(allSelected));
+      }
+    }
+  };
+  useEffect(() => {
+    if (discoveryResult?.accounts) {
+      const allAccountIds = discoveryResult.accounts.map(account => account.id);
+      setSelectedAccounts(allAccountIds);
+      // Save to localStorage
+      localStorage.setItem('selectedAccounts', JSON.stringify(allAccountIds));
+    }
+  }, [discoveryResult]);
+
+
+  const retryDiscovery = () => {
+    if (fipIds.length > 0) {
+      setIsLoading(true)
+      clearError()
+
+      mutate(fipIds, {
+        onSuccess: result => {
+          setDiscoveryResult(result)
+
+          // Auto-select all accounts by default
+          if (result.accounts.length > 0) {
+            setSelectedAccounts(result.accounts.map(account => account.id))
+          }
+
+          setIsLoading(false)
+        },
+        onError: () => {
+          setIsLoading(false)
+        }
+      })
+    }
+  }
+
+  const renderAccountGroups = () => {
+    if (isLoading) {
+      return Array(3)
+        .fill(0)
+        .map((_, index) => (
+          <OuterCard key={`loading-${index}`} selected={false} loading={true}>
+            <BankCard bankName='' />
+          </OuterCard>
+        ))
+    }
+
+    if (
+      discoveryResult?.groupedAccounts &&
+      Object.keys(discoveryResult.groupedAccounts).length > 0
+    ) {
+      return Object.keys(discoveryResult.groupedAccounts).map(key => (
+        <>
+
+          <Label
+            className='text-xs md:text-md font-semibold text-consent-secondary mt-2'
+            key={key}
+
+          >
+            {key}
+          </Label>
+          {discoveryResult.groupedAccounts[key].map(account => (
+            <OuterCard
+              key={account.id}
+              selected={selectedAccounts.includes(account.id)}
+              onSelect={() => handleSelectAccount(account.id)}
+            >
+              <BankCard
+                loading={false}
+                badgeText={account.isNew ? 'New' : undefined}
+                subText={`${account.type || 'Account'} | ${formatAccountNumber(account.maskedAccountNumber) || '**XXXX'
+                  }`}
+                bankName={account.bankName || 'Financial Institution'}
+                image={account.logoUrl || undefined}
+                rightSection={
+                  <Checkbox
+                    checked={selectedAccounts.includes(account.id)}
+                    onCheckedChange={() => handleSelectAccount(account.id)}
+                  />
+                }
+              />
+            </OuterCard>
+          ))}
+        </>
+      ))
+    }
+
+    return (
+      <div className='text-center p-4 text-gray-500'>
+        {errorMessage
+          ? 'Failed to discover accounts'
+          : 'No accounts found for the selected banks'}
+      </div>
+    )
+  }
+
+  return (
+    <div className='h-full flex flex-col gap-1'>
+      <div className='flex flex-col gap-1 w-full md:px-14 md:mt-10 sm:px-4'>
+
+        <SectionTitle
+          className='mt-4'
+          title={`${t(
+            'categories.' +
+            formatCategoryName(category).replace(' ', '_').toLowerCase()
+          )} ${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>
+          }
+        />
+
+        {errorMessage && (
+          <Alert variant='destructive' className='flex items-center'>
+            <AlertCircle className='w-4 h-4' />
+            <AlertDescription className='flex items-center justify-between'>
+              {errorMessage}
+              <Button
+                variant='outline'
+                size='sm'
+                onClick={retryDiscovery}
+                className='ml-2'
+              >
+                Retry
+              </Button>
+            </AlertDescription>
+          </Alert>
+        )}
+
+        <div className='flex flex-col gap-2'>
+          <div className='max-h-[60vh] overflow-y-auto'>
+            <div className='flex flex-col gap-2 mb-4'>
+              {renderAccountGroups()}
+            </div>
+          </div>
+          {requiredCategory?.every(fiType => totalCategory?.includes(fiType)) ? null :
+            <Button
+              variant={'outline'}
+              className='bg-primary-foreground text-primary border-primary hover:bg-primary/10 h-[50px] dark:bg-ring'
+              onClick={() =>
+                navigate(`/link-accounts/${category.toLowerCase()}`, {
+                  state: {
+                    category,
+                    selectedFips: fipIds
+                  }
+                })
+              }
+              size={'lg'}
+            >
+              <div className='flex items-center gap-2 text-md text-primary font-[600] dark:text-muted-secondary'>
+                <PlusIcon
+                  strokeWidth='2.3'
+                  className='size-5 text-primary dark:text-muted-secondary'
+                />{' '}
+                {t('discoverMore')}
+              </div>
+            </Button>
+          }
+        </div>
+        <DummyFooter />
+      </div>
+
+      <MobileFooter show={selectedAccounts.length > 0}>
+        <div className='flex flex-col items-center w-full gap-4'>
+          <AnimatedButton
+            onClick={handleProceed}
+            size='lg'
+            className='w-full h-[50px]'
+            disabled={selectedAccounts.length === 0}
+          >
+            {t('proceed')}
+          </AnimatedButton>
+          <AnimatedButton
+            onClick={() => { setSelectedAccountToLink([]); setSelectedAccounts([]) }}
+            variant={'ghost'}
+            size='lg'
+            className='text-primary'
+          >
+            {t('cancel')}
+          </AnimatedButton>
+        </div>
+      </MobileFooter>
+
+      <WebFooter show={selectedAccounts.length > 0}>
+        <AnimatedButton
+          onClick={() => { setSelectedAccountToLink([]); setSelectedAccounts([]) }}
+          variant={'ghost'}
+          size='lg'
+          className='text-primary'
+        >
+          {t('cancel')}
+        </AnimatedButton>
+        <AnimatedButton
+          onClick={handleProceed}
+          size='lg'
+          disabled={selectedAccounts.length === 0}
+        >
+          {t('proceed')}
+        </AnimatedButton>
+      </WebFooter>
+    </div>
+  )
+}
+
+export default AccountsToProceed

package/src/pages/accounts/Discover.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import { FrostedLayout } from "@/components/layouts/FrostedLayout"
+import LinkAccounts from "./link-accounts";
+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 { useEffect } from "react";
+
+const Discover = () => {
+  const { category } = useParams();
+  const location = useLocation();
+  const path = location.pathname.split('/').pop() || '';
+  const { activeCategory, setActiveCategory, categories } = useFipStore();
+
+  // For step navigation in the sidebar - detect category from path
+  useEffect(() => {
+    // Known flow paths that aren't categories
+    const flowPaths = ['discovery', 'link', 'discover-account'];
+    const isFlowPath = flowPaths.includes(path);
+
+    if (!isFlowPath && category) {
+      // We're on a category-specific path like /link-accounts/banks
+      const matchingCategory = categories.find(cat =>
+        cat.toLowerCase() === category.toLowerCase()
+      );
+
+      if (matchingCategory) {
+        setActiveCategory(matchingCategory);
+      }
+    }
+    else if (location.state?.activeCategory) {
+      // When returning with a specific category in state
+      setActiveCategory(location.state.activeCategory);
+    }
+  }, [path, category, categories, setActiveCategory, location.state]);
+
+  const getCurrentStep = (newPath: string) => {
+    // Flow paths
+    switch (newPath || path) {
+      case 'discovery':
+      case 'proceed':
+        return <AccountsToProceed
+          state={location.state as { category: string; selectedFips: string[] }}
+          currentCategory={activeCategory}
+        />;
+
+      case 'link':
+        return <LinkSelectedAccounts
+          state={location.state as { category: string; selectedFips: string[] }}
+          currentCategory={activeCategory}
+        />;
+
+      case 'discover-account':
+        return <DiscoverAccount
+          state={location.state as { category: string; selectedFips?: string[] }}
+          currentCategory={activeCategory}
+        />;
+
+      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.
+        return <LinkAccounts />;
+    }
+  }
+
+  return (
+    <FrostedLayout>
+      {getCurrentStep()}
+    </FrostedLayout>
+  )
+}
+
+export default Discover