saafe-redirection-flow 2.0.0

package/src/pages/accounts/LinkSelectedAccounts.tsx

@@ -0,0 +1,638 @@
+import BankCard from '@/components/cards/BankCard'
+import OuterCard from '@/components/cards/OuterCard'
+import { AnimatedButton } from '@/components/ui/animatedButton'
+import { useNavigate } from 'react-router-dom'
+import React, { useEffect } from 'react'
+import SectionTitle from '@/components/title/SectionTitle'
+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 { Collapsible, CollapsibleContent } from '@/components/ui/collapsible'
+import { Input } from '@/components/ui/input'
+import { useMutation } from '@tanstack/react-query'
+import { accountService } from '@/services/api'
+import { trackEvent, EVENTS } from '@/utils/posthog'
+import { motion } from 'framer-motion'
+import checkIconDark from '../../assets/icons/check-icon-dark.svg'
+import { useSetPageTitle } from '@/hooks/use-page-title'
+import DummyFooter from '@/components/dummyFooter'
+import { useTranslation } from 'react-i18next'
+
+const SuccessAnimation = ({
+  startAnimation = false,
+  onAnimationComplete
+}: {
+  startAnimation: boolean;
+  onAnimationComplete: () => void;
+}) => (
+  <motion.div
+    initial={{ opacity: 0, scale: 0.5 }}
+    animate={
+      startAnimation ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.5 }
+    }
+    transition={{
+      duration: 0.5,
+      ease: [0, 0.71, 0.2, 1.01]
+    }}
+    className='flex flex-col items-center justify-center gap-4'
+    onAnimationComplete={onAnimationComplete}
+  >
+    <motion.div
+      initial={{ scale: 0 }}
+      animate={startAnimation ? { scale: 1 } : { scale: 0 }}
+      transition={{
+        type: 'spring',
+        stiffness: 260,
+        damping: 20
+      }}
+      className='relative h-40 w-40'
+    >
+      <motion.img
+        src={checkIconDark}
+        alt='Check Icon'
+        className='absolute inset-0 z-10'
+        initial={{ scale: 0.2, opacity: 0, rotate: -50, top: -120 }}
+        animate={
+          startAnimation
+            ? { scale: 0.2, opacity: 0.2, rotate: -50, top: 0 }
+            : { scale: 0.2, opacity: 0, rotate: -50, top: -120 }
+        }
+        exit={{ scale: 0, opacity: 0, top: 0 }}
+        transition={{
+          duration: 0.8,
+          delay: 0,
+          repeat: 0
+        }}
+      />
+      <motion.img
+        src={checkIconDark}
+        alt='Check Icon'
+        className='absolute inset-0 z-11'
+        initial={{ scale: 0, opacity: 0, rotate: -50, top: 0 }}
+        animate={
+          startAnimation
+            ? { scale: 1.1, opacity: 0.2, rotate: 0, top: 0 }
+            : { scale: 0, opacity: 0, rotate: -50, top: 0 }
+        }
+        exit={{ scale: 0, opacity: 0, rotate: 0, top: 0 }}
+        transition={{
+          duration: 1,
+          delay: 0.5,
+          repeat: 0,
+          repeatType: 'reverse'
+        }}
+      />
+      <motion.img
+        src={checkIconDark}
+        alt='Check Icon'
+        className='absolute inset-0 z-12'
+        initial={{ scale: 0, rotate: -50, top: 0 }}
+        animate={
+          startAnimation
+            ? { scale: 1, rotate: 0, top: 0 }
+            : { scale: 0, rotate: -50, top: 0 }
+        }
+        transition={{
+          type: 'spring',
+          damping: 8,
+          stiffness: 100,
+          delay: 0.5,
+          duration: 1
+        }}
+      />
+    </motion.div>
+    <motion.p
+      initial={{ opacity: 0, y: 10 }}
+      animate={startAnimation ? { opacity: 1, y: 0 } : { opacity: 0, y: 10 }}
+      transition={{ delay: 0.3 }}
+      className='text-lg font-medium text-gray-900 dark:text-white'
+    >
+      Verified Successfully!
+    </motion.p>
+  </motion.div>
+)
+
+interface Account {
+  id: string;
+  fipId: string;
+  accounts: string;
+  otp: string;
+}
+
+interface LinkSelectedAccountsProps {
+  state?: {
+    category: string
+    selectedFips: string[]
+    selectedAccounts: string[]
+    signature?: string
+  }
+  currentCategory?: string | null
+}
+
+const LinkSelectedAccounts = ({
+  state,
+  currentCategory
+}: LinkSelectedAccountsProps) => {
+  const { t } = useTranslation()
+  useSetPageTitle(t('linkAllSelectedAccounts'))
+  const navigate = useNavigate()
+  const [countdown, setCountdown] = React.useState(60)
+  const [otpResent, setOTPResent] = React.useState(false)
+  const [showSuccessAnimation, setShowSuccessAnimation] = React.useState(false)
+  const [isExpanded, setIsExpanded] = React.useState<{
+    item: Account | null;
+    expanded: boolean;
+    error?: string | null;
+  }>({ item: null, expanded: false, error: null })
+  const {
+    completeCategory,
+    categories,
+    setActiveCategory,
+    completedCategories,
+    activeCategory
+  } = useFipStore()
+  const category = state?.category || currentCategory || 'BANKS'
+  const {
+    selectedAccountToLink,
+    selectedMobileNumber,
+    signature,
+    accountsStatusArray,
+    setAccountsStatusArray
+  } = useFipStore()
+
+  const sendBankOTPQuery = useMutation({
+    mutationFn: ({ fipId, accounts }: { fipId: string; accounts: any[] }) =>
+      accountService.sendBankOTP({
+        signature: signature || '',
+        FipId: fipId || '',
+        Accounts: accounts
+      }),
+    onSuccess: () => {
+      setCountdown(60)
+      setIsExpanded(old => ({ ...old, error: null }))
+    },
+    onError: (error) => {
+      setCountdown(0)
+      setIsExpanded(old => ({
+        ...old,
+        error: error?.response?.data?.errorMsg || 'Failed to send OTP. Please try again.'
+      }))
+    }
+  })
+
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      if (countdown > 0) {
+        setCountdown(countdown - 1)
+      }
+    }, 1000)
+    return () => clearInterval(intervalId)
+  }, [countdown])
+
+  useEffect(() => {
+    if (
+      accountsStatusArray?.find(i => i.id === isExpanded?.item?.id)?.status ===
+      'success'
+    ) {
+      const timer = setTimeout(() => {
+        setShowSuccessAnimation(true)
+      }, 300)
+      return () => clearTimeout(timer)
+    }
+  }, [accountsStatusArray, isExpanded?.item?.id])
+
+  const handleNextActiveAccount = (type?: string) => {
+    const index = selectedAccountToLink.findIndex(
+      item => item.id === isExpanded?.item?.id
+    )
+    let nextIndex = -1
+
+    if (type == 'retry' && accountsStatusArray?.find(i => i.id == isExpanded?.item?.id)?.status == 'error') {
+      setIsExpanded((old) => ({ ...old, expanded: true, error: null }))
+      return;
+    }
+
+    for (let i = index + 1; i < selectedAccountToLink?.length; i++) {
+      if (
+        (accountsStatusArray.find(
+          item => item.id == selectedAccountToLink[i]?.id
+        )?.status === 'error' && type !== 'new') ||
+        (!accountsStatusArray.find(
+          item => item.id == selectedAccountToLink[i]?.id
+        )?.status &&
+          i >= 0) && index !== i
+      ) {
+        nextIndex = i
+        break
+      }
+    }
+
+    if (
+      // index != -1 &&
+      nextIndex < selectedAccountToLink?.length &&
+      nextIndex != -1
+    ) {
+      sendBankOTPQuery.mutate({
+        fipId: selectedAccountToLink[nextIndex].fipId,
+        accounts: selectedAccountToLink[nextIndex]?.['DiscoveredAccounts']
+      })
+      setIsExpanded({ item: selectedAccountToLink[nextIndex], expanded: true })
+    } else {
+      if (type != 'retry') { setIsExpanded({ item: null, expanded: false }) }
+    }
+    setOTPResent(false)
+  }
+
+  const verifyBankOTPQuery = useMutation({
+    mutationFn: ({ fipId }: { fipId: string }) =>
+      accountService.verifyBankOTP({
+        RefNumber: sendBankOTPQuery?.data?.refNumber || '',
+        token: isExpanded?.item?.otp || '',
+        fipId: fipId || ''
+      }),
+    onSuccess: data => {
+      if (data?.AccLinkDetails?.[0]?.status === 'LINKED') {
+        setIsExpanded(old => ({ ...old, error: null }))
+        trackEvent(EVENTS.LINK_ACCOUNT, {
+          category,
+          fipId: isExpanded?.item?.fipId,
+          accountId: isExpanded?.item?.id
+        })
+        const accountIndex = accountsStatusArray.findIndex(
+          i => i.id === isExpanded?.item?.id
+        )
+        if (accountIndex == -1) {
+          setAccountsStatusArray([
+            ...accountsStatusArray,
+            { ...isExpanded?.item, status: 'success' }
+          ])
+        } else {
+          const accountsArr = [...accountsStatusArray]
+          accountsArr.splice(accountIndex, 1, {
+            ...isExpanded?.item,
+            status: 'success'
+          })
+          setAccountsStatusArray([...accountsArr])
+        }
+
+        setTimeout(() => {
+          handleNextActiveAccount('new')
+        }, 2000)
+      }
+    },
+    onError: error => {
+      setIsExpanded(old => ({
+        ...old,
+        error: error?.response?.data?.errorMsg || 'Invalid OTP. Please try again.'
+      }))
+      const accountIndex = accountsStatusArray.findIndex(
+        i => i.id === isExpanded?.item?.id
+      )
+      if (accountIndex == -1) {
+        setAccountsStatusArray([
+          ...accountsStatusArray,
+          { ...isExpanded?.item, status: 'error' }
+        ])
+      } else {
+        const accountsArr = [...accountsStatusArray]
+        accountsArr.splice(accountIndex, 1, {
+          ...isExpanded?.item,
+          status: 'error'
+        })
+        setAccountsStatusArray([...accountsArr])
+        handleNextActiveAccount('new')
+      }
+    }
+  })
+
+  useEffect(() => {
+    if (selectedAccountToLink?.length) {
+      setAccountsStatusArray([])
+      if (accountsStatusArray?.length) {
+        handleNextActiveAccount()
+      } else {
+        setIsExpanded({ item: selectedAccountToLink[0], expanded: true })
+        sendBankOTPQuery.mutate({
+          fipId: selectedAccountToLink[0].fipId,
+          accounts: selectedAccountToLink[0]?.['DiscoveredAccounts']
+        })
+      }
+    }
+  }, [selectedAccountToLink])
+
+  // Format category name for display
+  const formatCategoryName = (name: string) => {
+    return name
+      .split('_')
+      .map(word => word.charAt(0) + word.slice(1).toLowerCase())
+      .join(' ')
+  }
+
+  const handleComplete = () => {
+    // Mark this category as complete
+    setAccountsStatusArray([])
+    completeCategory(category)
+    trackEvent(EVENTS.SELECT_ALL_ACCOUNTS, { category })
+
+    // Check if there are more categories to process
+    const currentIndex = categories.indexOf(category)
+    if (currentIndex < categories.length - 1) {
+      // Move to the next category
+      const nextCategory = categories[currentIndex + 1]
+      setActiveCategory(nextCategory)
+
+      // Navigate directly to the next category path for proper step highlighting
+      navigate(`/link-accounts/${nextCategory.toLowerCase()}`, {
+        state: {
+          completedCategories: [...(completedCategories || []), category]
+        }
+      })
+    } else {
+      // All categories done, move to review consent
+      navigate('/review', {
+        state: {
+          selectedFips: state?.selectedFips,
+          completedCategories: [...(completedCategories || []), category]
+        }
+      })
+    }
+  }
+
+  return (
+    <div>
+      <div className='flex flex-col gap-1 w-full sm:px-4 md:px-14 gap-2'>
+        <SectionTitle
+          className='md:mt-4'
+          title={`Selected ${formatCategoryName(category)}${selectedAccountToLink.length > 1 ? 's' : ''}`}
+
+          // title={`Selected ${formatCategoryName(category)}`}
+          rightSection={
+            selectedAccountToLink.every(itemA =>
+              accountsStatusArray.some(itemB => itemB.id === itemA.id)
+            ) &&
+            accountsStatusArray?.find(i => i.status === 'error') && (
+              <AnimatedButton
+                variant={'text'}
+                size={'text'}
+                onClick={() => {
+                  handleNextActiveAccount('retry')
+                }}
+              >
+                <Repeat className='text-primary' />{' '}
+                <p className='text-primary'>Retry failed</p>
+              </AnimatedButton>
+            )
+          }
+        />
+        {selectedAccountToLink.map((account: any) => (
+          <OuterCard
+            onClick={() => { }}
+            key={account.id}
+            hoverEffect={
+              !Boolean(
+                (isExpanded?.item?.id === account?.id && isExpanded.expanded) ||
+                accountsStatusArray?.find(i => i.id === account?.id)
+                  ?.status == 'linked'
+              )
+            }
+          >
+            <Collapsible
+              onOpenChange={value =>
+                accountsStatusArray?.find(i => i.id === account?.id)?.status !==
+                'success' && setIsExpanded({ item: null, expanded: value, error: null })
+              }
+              open={
+                isExpanded?.item?.id === account?.id &&
+                isExpanded.expanded &&
+                accountsStatusArray?.find(i => i.id === account?.id)?.status !==
+                'success'
+              }
+              className='flex flex-col gap-1 w-full'
+            >
+              {accountsStatusArray?.find(i => i.id === account?.id)?.status ===
+                'success' && isExpanded?.item?.id === account?.id ? (
+                <CollapsibleContent
+                  className='flex flex-col gap-1 w-full h-[223px]'
+                  open={
+                    isExpanded?.item?.id === account?.id && isExpanded.expanded
+                  }
+                >
+                  <SuccessAnimation
+                    startAnimation={showSuccessAnimation}
+                    onAnimationComplete={() => {
+                      setTimeout(() => {
+                        setShowSuccessAnimation(false);
+                        setIsExpanded(old => ({ ...old, expanded: false, error: null }));
+                      }, 800)
+                    }}
+                  />
+                </CollapsibleContent>
+              ) : (
+                <>
+                  <div
+                    onClick={() => {
+                      if (
+                        accountsStatusArray?.find(i => i.id === account?.id)
+                          ?.status !== 'success' && !isExpanded?.expanded
+                      ) {
+                        if (
+                          account.id !== isExpanded.item?.id ||
+                          !isExpanded.expanded
+                        ) {
+                          sendBankOTPQuery.mutate({
+                            fipId: account.fipId,
+                            accounts: account?.['DiscoveredAccounts']
+                          })
+                        }
+                        setIsExpanded({
+                          item:
+                            account.id === isExpanded.item?.id &&
+                              isExpanded.expanded
+                              ? null
+                              : account,
+                          expanded:
+                            account.id !== isExpanded.item?.id
+                              ? true
+                              : !isExpanded.expanded
+                        })
+                      }
+                    }}
+                  >
+                    <BankCard
+                      loading={false}
+                      badgeText={account.isNew ? 'New' : undefined}
+                      bankName={account.fipName || 'Financial Institution'}
+                      image={account?.['DiscoveredAccounts']?.[0]?.logoUrl || undefined}
+                      subText={false}
+                      rightSection={
+                        isExpanded?.item?.id !== account?.id &&
+                        accountsStatusArray?.find(i => i.id === account?.id)
+                          ?.id &&
+                        (accountsStatusArray?.find(i => i.id === account?.id)
+                          ?.status === 'success' ? (
+                          <Button
+                            variant={'secondary'}
+                            className='bg-green-100 text-green-700 hover:bg-green-200'
+                          >
+                            Linked
+                          </Button>
+                        ) : accountsStatusArray?.find(i => i.id === account?.id)
+                          ?.status === 'error' ? (
+                          <Button
+                            variant={'secondary'}
+                            className='bg-red-100 text-red-700 hover:bg-red-200'
+                          >
+                            Failed
+                          </Button>
+                        ) : (
+                          <Button
+                            variant={'secondary'}
+                            className='bg-yellow-100 text-yellow-700 hover:bg-yellow-200'
+                          >
+                            Skipped
+                          </Button>
+                        ))
+                      }
+                    />
+                  </div>
+                  <CollapsibleContent
+                    className='flex flex-col gap-1 w-full'
+                    open={
+                      isExpanded?.item?.id === account?.id &&
+                      isExpanded.expanded &&
+                      accountsStatusArray?.find(i => i.id === account?.id)
+                        ?.status !== 'success'
+                    }
+                  >
+                    <>
+                      <div className='flex flex-col gap-1 w-full my-2 mt-3'>
+                        <div className='font-[500] text-muted-secondary text-xs md:text-md'>
+                          Enter the OTP you received from {account.fipName} to{' '}
+                          <span className='text-consent-primary dark:text-card-foreground font-semibold'>
+                            +91 {selectedMobileNumber}
+                          </span>
+                        </div>
+                      </div>
+                      <div className='flex flex-col gap-1 w-full'>
+                        <Input
+                          // type='text'
+                          placeholder={t('login.enterOtp')}
+                          className={`w-full h-12 border-gray-200 ${isExpanded.error ? 'border-red-500' : ''}`}
+                          // Allow only numbers
+                          // type="tel"
+                          // inputMode="numeric"
+                          value={isExpanded.item?.otp}
+                          onChange={e => {
+                            const value = e.target.value.replace(/[^0-9]/g, '');
+                            setIsExpanded(old => ({
+                              ...old,
+                              item: { ...old.item, otp: activeCategory === 'GST' ? e.target.value : value },
+                              error: null
+                            }))
+                          }}
+                        />
+                      </div>
+                      {isExpanded.error ? (
+                        <div className='h-6'>
+                          <p className='text-[10px] md:text-sm text-red-500'>{isExpanded.error}</p>
+                        </div>
+                      ) : null}
+                      <p className='text-sm mt-1 text-muted-secondary'>
+                        {countdown > 0 && !otpResent ? 'Resend OTP in ' : null}
+                        {countdown > 0 && otpResent ? 'OTP resent, Resend OTP again in ' : null}
+                        <span>
+                          {countdown > 0
+                            ? `${String(Math.floor(countdown / 60)).padStart(
+                              2,
+                              '0'
+                            )}:${String(countdown % 60).padStart(2, '0')}s`
+                            : null}
+                        </span>
+                        {countdown === 0 && (
+                          <AnimatedButton
+                            onClick={() => {
+                              sendBankOTPQuery.mutate({
+                                fipId: account.fipId,
+                                accounts: account?.['DiscoveredAccounts']
+                              })
+                              setOTPResent(true)
+                            }}
+                            variant={'text'}
+                            size={'text'}
+                            className='text-primary w-fit'
+                          >
+                            {t('login.resend')}
+                          </AnimatedButton>
+                        )}
+                      </p>
+                      <div className='flex justify-between gap-1 w-full flex-col-reverse md:flex-row '>
+                        <AnimatedButton
+                          onClick={() => {
+                            const accountIndex = accountsStatusArray.findIndex(
+                              i => i.id === account?.id
+                            )
+                            if (accountIndex == -1) {
+                              setAccountsStatusArray([
+                                ...accountsStatusArray,
+                                { ...account, status: 'skipped' }
+                              ])
+                            } else {
+                              const accountsArr = [...accountsStatusArray]
+                              accountsArr.splice(accountIndex, 1, {
+                                ...account,
+                                status: 'skipped'
+                              })
+                              setAccountsStatusArray([...accountsArr])
+                            }
+
+                            handleNextActiveAccount()
+                          }}
+                          size={'lg'}
+                          variant={'ghost'}
+                          className='text-primary w-full md:w-[48%]'
+                        >
+                          {t('skip')}
+                        </AnimatedButton>
+                        <AnimatedButton
+                          onClick={() => {
+                            verifyBankOTPQuery.mutate({
+                              fipId: account.fipId
+                            })
+                          }}
+                          size={'lg'}
+                          className='w-full md:w-[48%] mt-4 md:mt-0'
+                          loading={verifyBankOTPQuery.isPending}
+                        >
+                          {t('link')}
+                        </AnimatedButton>
+                      </div>
+                    </>
+                  </CollapsibleContent>
+                </>
+              )}
+            </Collapsible>
+          </OuterCard>
+        ))}
+        <DummyFooter />
+      </div>
+
+      <MobileFooter show={selectedAccountToLink.length === accountsStatusArray.length}>
+        <div className='flex flex-col items-center w-full gap-4'>
+          <AnimatedButton onClick={handleComplete} size='lg' className='w-full h-[50px]'>
+            {t('proceed')}
+          </AnimatedButton>
+        </div>
+      </MobileFooter>
+
+      <WebFooter show={selectedAccountToLink.length === accountsStatusArray.length}>
+        <AnimatedButton onClick={handleComplete} size='lg'>
+          {t('proceed')}
+        </AnimatedButton>
+      </WebFooter>
+    </div>
+  )
+}
+
+export default LinkSelectedAccounts