saafe-redirection-flow 2.0.0

package/src/pages/accounts/OldUser.tsx

@@ -0,0 +1,329 @@
+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 { ScrollArea } from '@/components/ui/scroll-area'
+import { accountService } from '@/services/api'
+import { useQuery } from '@tanstack/react-query'
+import { AlertCircle, PlusIcon } from 'lucide-react'
+import React from 'react'
+import { useRedirectStore } from '@/store/redirect.store'
+import { FrostedLayout } from '@/components/layouts/FrostedLayout'
+import { useFipStore } from '@/store/fip.store'
+import { formatAccountNumber } from '@/utils/formatAccountNumber'
+import { MobileFooter } from '@/components/ui/mobile-footer'
+import WebFooter from '@/components/ui/web-footer'
+import { useNavigate } from 'react-router-dom'
+import { t } from 'i18next'
+import { useAccountDiscovery } from '@/hooks/use-account-discovery'
+import { Skeleton } from '@/components/ui/skeleton'
+import { Alert, AlertDescription } from '@/components/ui/alert'
+import { useSetPageTitle } from '@/hooks/use-page-title'
+import { useNavigationBlock } from '@/store/NavigationBlockContext'
+import DummyFooter from '@/components/dummyFooter'
+import { useFipQuery } from '@/hooks/use-fip-query'
+
+interface BankAccount {
+  linkRefNumber: string;
+  fiType: string;
+  bankName: string;
+  accountType: string;
+  maskedAccNumber: string;
+  logoUrl?: string;
+  fipHandle: string;
+}
+
+const OldUser = () => {
+
+  useSetPageTitle('Select accounts you want to share')
+  const { setSelectedAccountToLink, setFips, setSignature, setOriginalAccounts, accountForConsent, setAccountForConsent, activeCategory, categories } = useFipStore();
+  const { decodedInfo } = useRedirectStore();
+  const consentHandle = decodedInfo?.srcref || '';
+  const { shouldAllowNavigation } = useNavigationBlock();
+  const navigate = useNavigate();
+
+  // Fetch FIP data with React Query - use dynamic consent handle
+  const { refetch } = useFipQuery(consentHandle)
+
+  const getLinkedAccountsList = useQuery({
+    queryKey: ['linked-accounts', consentHandle, decodedInfo?.fipId],
+    queryFn: () => accountService.getLinkedAccounts(consentHandle, decodedInfo?.fipId),
+    enabled: !!consentHandle,
+    select: (data) => {
+      return data.map((account: BankAccount) => ({
+        ...account,
+        bankName: account.fipName,
+        maskedAccountNumber: account.maskedAccNumber,
+        type: account.accountType,
+        id: account.accountRefNumber
+      }))
+    }
+  })
+
+  // Account discovery with enhanced error handling
+  const { mutate } = useAccountDiscovery()
+
+  // Group accounts by fiType
+  const groupedAccounts = React.useMemo(() => {
+    if (getLinkedAccountsList.isFetched && getLinkedAccountsList.data?.length === 0) {
+      shouldAllowNavigation()
+      navigate(`/link-accounts/${activeCategory ? activeCategory?.toLowerCase() : categories[0]?.toLowerCase()}`)
+    }
+    if (!getLinkedAccountsList?.data) return {};
+
+    const fipIdsArray = new Set(getLinkedAccountsList.data.map((account: BankAccount) => account.fipHandle));
+    setFips(Array.from(fipIdsArray));
+    let mounted = true
+
+    if (!accountForConsent?.length) {
+      setAccountForConsent([...new Set(getLinkedAccountsList.data.map((i => i?.linkRefNumber)))]);
+    }
+
+    mutate(Array.from(fipIdsArray), {
+      onSuccess: result => {
+        if (!mounted) return
+        const groupedAccounts = result.accounts.reduce(
+          (acc: Record<string, any[]>, account) => {
+            const key = account.type
+            if (!acc[key]) {
+              acc[key] = []
+            }
+            acc[key].push(account)
+            return acc
+          },
+          {}
+        )
+        setSignature(result.signature)
+        setOriginalAccounts(result.originalAccounts)
+      },
+      onError: () => {
+        if (!mounted) return
+      }
+    })
+
+    const accounts = getLinkedAccountsList.data;
+    return accounts.reduce((acc: any, account) => {
+      const fiType = account.fiType || 'Other';
+      if (!acc[fiType]) {
+        acc[fiType] = [];
+      }
+      acc[fiType].push(account);
+      return acc;
+    }, {});
+  }, [getLinkedAccountsList?.data]);
+
+  const toggleBankSelection = (bankId: string) => {
+    setAccountForConsent(accountForConsent.includes(bankId)
+      ? accountForConsent.filter(id => id !== bankId)
+      : [...accountForConsent, bankId]
+    );
+  };
+
+  const handleProceed = () => {
+    setSelectedAccountToLink(
+      getLinkedAccountsList?.data?.filter(account =>
+        accountForConsent.includes(account.linkRefNumber)
+      ) || []
+    )
+    // Navigate to account linking screen with selected accounts and signature
+    navigate('/review', {
+      state: {
+        selectedFips: accountForConsent,
+      }
+    })
+  }
+
+  const handleCancel = () => {
+    // Deselect all selected accounts
+    setAccountForConsent([]);
+  }
+
+  const handleSelectAll = (fiType: string) => {
+    const accounts = groupedAccounts[fiType] || [];
+    const allAccountRefs = accounts.map((account: BankAccount) => account.linkRefNumber);
+
+    // Check if all accounts in this group are already selected
+    const areAllSelected = allAccountRefs.every((ref: string) => accountForConsent.includes(ref));
+
+    if (areAllSelected) {
+      // If all are selected, deselect all accounts in this group
+      setAccountForConsent(accountForConsent.filter(ref => !allAccountRefs.includes(ref)));
+    } else {
+      // If not all are selected, select all accounts in this group
+      setAccountForConsent([...new Set([...accountForConsent, ...allAccountRefs])]);
+    }
+  };
+
+  return (
+    <FrostedLayout>
+      <div className='w-full px-0 md:px-14'>
+        <div>
+          {(() => {
+            if (getLinkedAccountsList?.isLoading) {
+              return (
+                <div className='flex flex-col gap-4 md:mt-6 mt-0'>
+                  <Skeleton className='h-8 w-[24%]' />
+                  {Array(3)
+                    .fill(0)
+                    .map((_, index) => (
+                      <OuterCard key={`loading-${index}`} selected={false} loading={true}>
+                        <BankCard bankName='' />
+                      </OuterCard>
+                    ))}
+                  <Skeleton className='h-16 w-full mt-3' />
+                </div>
+              );
+            }
+
+            if (getLinkedAccountsList?.data && getLinkedAccountsList.data.length > 0) {
+              return Object.keys(groupedAccounts).map((fiType) => (
+                <div key={fiType}>
+                  <SectionTitle
+                    title={fiType}
+                    className="md:mt-6 mt-0"
+                    rightSection={
+                      <AnimatedButton
+                        variant={'text'}
+                        size={'text'}
+                        className='text-primary'
+                        onClick={() => handleSelectAll(fiType)}
+                      >
+                        {groupedAccounts[fiType]?.every((account: BankAccount) =>
+                          accountForConsent.includes(account.linkRefNumber)
+                        ) ? 'Deselect All' : 'Select All'}
+                      </AnimatedButton>
+                    }
+                  />
+                  <ScrollArea className='max-h-[40vh] overflow-y-auto'>
+                    {groupedAccounts[fiType]?.map((account: BankAccount) => (
+                      <div className='mt-2 flex flex-col gap-2' key={account.linkRefNumber}>
+                        <OuterCard
+                          selected={accountForConsent.includes(account.linkRefNumber)}
+                          onSelect={() => toggleBankSelection(account.linkRefNumber)}>
+                          <BankCard
+                            bankName={account.bankName}
+                            image={account.logoUrl}
+                            subText={`${account.accountType} | **${formatAccountNumber(account.maskedAccNumber)}`}
+                            rightSection={
+                              <Checkbox
+                                id={`checkbox-${account.linkRefNumber}`}
+                                checked={accountForConsent.includes(account.linkRefNumber)}
+                                onCheckedChange={() => toggleBankSelection(account.linkRefNumber)}
+                              />
+                            }
+                          />
+                        </OuterCard>
+                      </div>
+                    ))}
+                  </ScrollArea>
+                  <Button
+                    variant={'outline'}
+                    className='bg-primary-foreground text-primary border-primary hover:bg-primary/10 h-[50px] w-full mt-4 mb-6'
+                    onClick={() => {
+                      refetch()
+                      navigate(`/link-accounts/${fiType.toLowerCase()}`, {
+                        state: {
+                          fiType,
+                        }
+                      });
+                      setAccountForConsent([])
+                    }}
+                    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>
+              ));
+            }
+
+            return (
+              <>
+                <Alert variant='destructive' className='mb-4 mt-12'>
+                  <AlertCircle className='h-4 w-4 mt-1' />
+                  <AlertDescription className='flex items-center justify-between'>
+                    Failed to find linked accounts
+                    <Button
+                      variant='outline'
+                      size='sm'
+                      className='ml-2'
+                      onClick={() => {
+                        getLinkedAccountsList.refetch()
+                      }}
+                    >
+                      Retry
+                    </Button>
+                  </AlertDescription>
+                </Alert>
+                <Button
+                  variant={'secondary'}
+                  className='bg-gray-200 dark:bg-gray-800 text-gray-700 hover:bg-gray-300 h-[50px] w-full mt-4'
+                  onClick={() => {
+                    refetch()
+                    navigate(`/link-accounts/${completedCategories?.[completedCategories.length - 1]}`);
+                  }}
+                  size={'lg'}
+                >
+                  <div className='flex items-center gap-2 text-md text-consent-primary font-[600] capitalize'>
+                    <PlusIcon
+                      strokeWidth='2.3'
+                      className='size-5 text-consent-primary'
+                    />{' '}
+                    {t('discover')}
+                  </div>
+                </Button>
+              </>
+            );
+          })()}
+        </div>
+        <DummyFooter />
+      </div>
+
+      <MobileFooter show={accountForConsent.length > 0}>
+        <div className='flex flex-col items-center w-full gap-4'>
+          <AnimatedButton
+            onClick={handleProceed}
+            size='lg'
+            className='w-full h-[50px]'
+          >
+            {t('proceed')}
+          </AnimatedButton>
+          <AnimatedButton
+            onClick={handleCancel}
+            variant={'ghost'}
+            size='lg'
+            className='text-primary'
+          >
+            {t('cancel')}
+          </AnimatedButton>
+        </div>
+      </MobileFooter>
+
+      <WebFooter show={accountForConsent.length > 0}>
+        <AnimatedButton
+          onClick={handleCancel}
+          variant={'ghost'}
+          size='lg'
+          className='text-primary'
+        >
+          Cancel
+        </AnimatedButton>
+        <AnimatedButton
+          onClick={handleProceed}
+          size='lg'
+        >
+          Proceed
+        </AnimatedButton>
+      </WebFooter>
+    </FrostedLayout>
+  )
+}
+
+export default OldUser