saafe-redirection-flow 2.0.0

package/src/pages/consent/ReviewConsent.tsx

@@ -0,0 +1,836 @@
+import BankCard from '@/components/cards/BankCard'
+import SectionTitle from '@/components/title/SectionTitle'
+import { AnimatedButton } from '@/components/ui/animatedButton'
+import { Checkbox } from '@/components/ui/checkbox'
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger
+} from '@/components/ui/collapsible'
+import { Label } from '@/components/ui/label'
+import { MobileFooter } from '@/components/ui/mobile-footer'
+import WebFooter from '@/components/ui/web-footer'
+import {
+  BriefcaseBusiness,
+  ChevronDown,
+  ChevronUp,
+  CircleGauge,
+  Crosshair,
+  Edit2,
+  FileText,
+  Info,
+  InfoIcon,
+  PanelTop,
+  SquareActivity
+} from 'lucide-react'
+import React, { useEffect, useState } from 'react'
+import { trackEvent, EVENTS } from '@/utils/posthog'
+import { FrostedLayout } from '@/components/layouts/FrostedLayout'
+import { useRedirectStore } from '@/store/redirect.store'
+import {
+  consentService,
+  LinkedAccount,
+  ConsentDetails,
+  ApprovalRequest
+} from '@/services/api'
+import { useNavigate } from 'react-router-dom'
+import logo from '../../assets/brand/saafe-logo.svg'
+import Modal from '@/components/ui/modal'
+import { useMediaQuery } from '@/hooks/use-media-query'
+import { useTranslation } from 'react-i18next'
+import { Alert, AlertTitle } from '@/components/ui/alert'
+import { useFipStore } from '@/store/fip.store'
+import { useRTL } from '@/contexts/RTLContext'
+import { useSetPageTitle } from '@/hooks/use-page-title'
+import DummyFooter from '@/components/dummyFooter'
+import { useMandatoryConsentStore } from '@/store/mandatoryConsent.store'
+import { handleApiErrorWithCallback } from '@/utils/error-callback'
+
+type ConsentDetail = {
+  id: number | string
+  modal: boolean
+}
+
+type GroupedAccounts = {
+  [key: string]: LinkedAccount[]
+}
+
+// Add constants for S3 bucket URL
+const S3_LOGO_BASE_URL = import.meta.env.VITE_IMAGE_BASE_URL
+
+// Define an interface for DataConsumer
+interface DataConsumer {
+  id?: string;
+  name?: string;
+}
+
+const ReviewConsent = () => {
+  const navigate = useNavigate()
+  const { decodedInfo } = useRedirectStore()
+  const consentHandle = decodedInfo?.srcref || ''
+  const fiuId = decodedInfo?.fiuId
+  const isMobile = useMediaQuery('(max-width: 768px)')
+  const { t } = useTranslation()
+  const { mandatoryConsent, setMandatoryConsent } = useMandatoryConsentStore()
+
+  const ACCOUNT_TYPE_LABELS_TRANSLATED: { [key: string]: string } = {
+    BANK_ACCOUNT: t('consent.consentTypes.BANK_ACCOUNT'),
+    MUTUAL_FUNDS: t('consent.consentTypes.MUTUAL_FUNDS'),
+    GST: t('consent.consentTypes.GST')
+  }
+
+  const [open, setOpen] = React.useState(false)
+  const [consentDetailsCollapse, setConsentDetailsCollapse] =
+    useState<ConsentDetail>({ id: 0, modal: false })
+
+  const [linkedAccounts, setLinkedAccounts] = useState<LinkedAccount[]>([])
+  const [consentDetails, setConsentDetails] = useState<ConsentDetails[]>([])
+  const [selectedConsent, setSelectedConsent] = useState<ConsentDetails[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [groupedAccounts, setGroupedAccounts] = useState<GroupedAccounts>({})
+  const [showRejectModal, setShowRejectModal] = useState(false)
+  const { activeCategory, accountForConsent } = useFipStore()
+  const { isRTL } = useRTL()
+
+  // page title
+  useSetPageTitle(consentDetails.length > 1 ? 'Review consents' : 'Review consent');
+
+  // Fetch mandatory consent data
+  useEffect(() => {
+    const fetchMandatoryConsent = async () => {
+      if (!fiuId) {
+        // console.warn('No FIU ID available, using default: pentafox-fiu');
+      }
+
+      try {
+        // Use the correct fiuId from decodedInfo
+        const fiuIdToUse = fiuId || 'pentafox-fiu';
+
+        const mandatoryConsentData = await consentService.getMandatoryConsent(fiuIdToUse);
+        setMandatoryConsent(mandatoryConsentData);
+      } catch (err) {
+        // console.error('Error fetching mandatory consent data:', err);
+        handleApiErrorWithCallback(err, 'Failed to fetch mandatory consent data', consentHandle, decodedInfo?.redirect);
+        // Continue even if this fails, we'll use default values
+      }
+    };
+
+    fetchMandatoryConsent();
+  }, [fiuId, setMandatoryConsent]);
+
+  // Fetch data on component mount
+  useEffect(() => {
+    if (!consentHandle) {
+      setError('Consent handle not found')
+      setLoading(false)
+      return
+    }
+
+    const fetchData = async () => {
+      try {
+        const fipId = decodedInfo?.fipId;
+        const [accountsData, consentData] = await Promise.all([
+          consentService.getLinkedAccounts(consentHandle, fipId),
+          consentService.getConsentDetails(consentHandle)
+        ])
+        const result = accountForConsent?.length > 0 ? accountsData.filter(account => accountForConsent.includes(account.linkRefNumber)) : accountsData
+
+        setLinkedAccounts(result)
+        setConsentDetails(consentData || []) // Store all consent details
+
+
+        // Group accounts by fiType
+        const grouped = result.reduce(
+          (groups: GroupedAccounts, account) => {
+            const fiType = account.fiType
+            if (!groups[fiType]) {
+              groups[fiType] = []
+            }
+            groups[fiType].push(account)
+            return groups
+          },
+          {}
+        )
+
+        setGroupedAccounts(grouped)
+
+        // Select consents based on mandatory consent settings
+        const initialSelectedConsents: ConsentDetails[] = []
+        consentData.forEach(consent => {
+          const purposeCode = consent.Purpose?.code
+          if (purposeCode && mandatoryConsent[purposeCode]) {
+            const { enabled } = mandatoryConsent[purposeCode]
+            if (enabled) {
+              initialSelectedConsents.push(consent)
+            }
+          }
+        })
+
+        if (consentData?.length == 1) {
+          setSelectedConsent([consentData[0]])
+        } else {
+          setSelectedConsent(initialSelectedConsents)
+        }
+
+
+        setLoading(false)
+      } catch (err) {
+        // console.error('Error fetching data:', err)
+        const errorMessage = 'Failed to load data. Please try again.';
+        setError(errorMessage);
+        setLoading(false);
+        handleApiErrorWithCallback(err, errorMessage, consentHandle, decodedInfo?.redirect);
+      }
+    }
+
+    fetchData()
+  }, [consentHandle, mandatoryConsent, accountForConsent])
+
+  const handleViewMore = (id: string) => {
+    setConsentDetailsCollapse({ id, modal: !consentDetailsCollapse.modal })
+    trackEvent(EVENTS.VIEW_MORE_CONSENT, { consentId: id })
+  }
+
+  const toggleConsentSelection = (consentHandle: string) => {
+    const consent = consentDetails.find(c => c.ConsentHandle === consentHandle)
+    if (!consent) return
+
+    // Check if the consent is mandatory
+    const purposeCode = consent.Purpose?.code
+    if (purposeCode && mandatoryConsent[purposeCode]?.mandatory) {
+      // If mandatory, don't allow deselection
+      return
+    }
+
+    const isSelected = selectedConsent.some(c => c.ConsentHandle === consentHandle)
+
+    if (isSelected) {
+      setSelectedConsent(selectedConsent.filter(c => c.ConsentHandle !== consentHandle))
+    } else {
+      setSelectedConsent([...selectedConsent, consent])
+    }
+  }
+  useEffect(() => {
+    if (consentDetails?.length) {
+      if (consentDetails?.length > 1) {
+        const result = []
+        consentDetails.forEach((i) => {
+          const isMandatory = Boolean(mandatoryConsent[i?.Purpose?.code]?.mandatory || mandatoryConsent[i?.Purpose?.code]?.enabled)
+          if (isMandatory) result.push(i)
+        })
+        setSelectedConsent(result)
+      } else {
+        setSelectedConsent([consentDetails[0]])
+      }
+    }
+  }, [consentDetails])
+
+  const handleSelectAll = () => {
+    const allSelected = consentDetails.length === selectedConsent.length
+
+    if (allSelected) {
+      // When deselecting all, keep mandatory consents selected
+      const mandatoryConsents = consentDetails.filter(consent => {
+        const purposeCode = consent.Purpose?.code
+        return purposeCode && mandatoryConsent[purposeCode]?.mandatory
+      })
+
+      setSelectedConsent(mandatoryConsents)
+    } else {
+      setSelectedConsent([...consentDetails])
+
+    }
+
+    // Create state with all consents selected or deselected
+
+    // setSelectedConsents(newSelectedState)
+    trackEvent(EVENTS.SELECT_ALL_ACCOUNTS)
+  }
+
+  const getSelectedConsents = () => {
+    return selectedConsent || []
+  }
+
+  const handleApproveConsent = async () => {
+    trackEvent(EVENTS.APPROVE_CONSENT)
+    const selectedConsentsList = getSelectedConsents()
+
+    if (selectedConsentsList.length === 0) {
+      setError('Please select at least one consent')
+      return
+    }
+
+    try {
+      setLoading(true)
+
+      const result = accountForConsent?.length > 0 ? linkedAccounts.filter(account => accountForConsent.includes(account.linkRefNumber)) : linkedAccounts
+
+      // Prepare accounts to be associated with selected consents
+      const accountsToApprove = result.map(account => ({
+        linkRefNumber: account.linkRefNumber,
+        fipHandle: account.fipHandle
+      }))
+
+      const approvalData: ApprovalRequest = {
+        consentHandle: selectedConsentsList.map(consent => consent.ConsentHandle),
+        constentApprovalStatus: 'APPROVED',
+        accounts: accountsToApprove
+      }
+
+      const consentResult = await consentService.submitConsentVerification(approvalData)
+      console.log("navigatig")
+
+      if (consentResult?.length && consentResult?.find(item => item.ConsentStatus === 'FAILED')) {
+        navigate('/rejected', { state: { consentResult } })
+        return
+      } else if (consentResult?.length) {
+        navigate('/success')
+      } else {
+        setError('Failed to approve consent. Please try again.')
+      }
+
+      // if (result.status === 200) {
+      // } else {
+      //   setError('Failed to approve consent. Please try again.')
+      // }
+
+    } catch (err) {
+      // console.error('Error approving consent:', err)
+      const errorMessage = 'Failed to approve consent. Please try again.';
+      setError(errorMessage);
+      handleApiErrorWithCallback(err, errorMessage, consentHandle, decodedInfo?.redirect);
+    } finally {
+      setLoading(false)
+      // navigate('/success')<div className="flex flex-col items-center gap-6 mt-10">
+      {/* Download section */ }
+
+
+    }
+  }
+
+  const handleRejectConsent = async () => {
+    trackEvent(EVENTS.REJECT_CONSENT)
+
+    try {
+      setLoading(true)
+
+      // Include all accounts in rejection
+      const accountsToReject = linkedAccounts.map(account => ({
+        linkRefNumber: account.linkRefNumber,
+        fipHandle: account.fipHandle
+      }))
+
+      const rejectionData: ApprovalRequest = {
+        consentHandle: [consentHandle],
+        constentApprovalStatus: 'REJECTED',
+        accounts: accountsToReject
+      }
+
+      await consentService.submitConsentVerification(rejectionData)
+
+      navigate('/rejected')
+    } catch (err) {
+      // console.error('Error rejecting consent:', err)
+      const errorMessage = 'Failed to reject consent. Please try again.';
+      setError(errorMessage);
+      handleApiErrorWithCallback(err, errorMessage, consentHandle, decodedInfo?.redirect);
+    } finally {
+      setLoading(false)
+    }
+  }
+  const getFrequencyText = (consent: ConsentDetails) => {
+    if (!consent?.Frequency) return 'Onetime'
+
+    const { unit, value } = consent.Frequency
+
+    if (!value || value === 0) return 'Onetime'
+
+    const formattedUnit = unit.toLowerCase()
+    // const pluralizedUnit = value > 1 ? `${formattedUnit}s` : formattedUnit
+
+    return `${value} per ${formattedUnit}`
+  }
+
+  // Get date range text
+  const getDataRangeText = (consent: ConsentDetails) => {
+    if (!consent?.FIDataRange) return ''
+
+    const { from, to } = consent.FIDataRange
+    const fromDate = new Date(from)
+    const toDate = new Date(to)
+
+    const formatDate = (date: Date) => {
+      return date.toLocaleDateString('en-US', {
+        day: '2-digit',
+        month: 'short',
+        year: 'numeric'
+      })
+    }
+
+    return `${formatDate(fromDate)} to ${formatDate(toDate)}`
+  }
+
+  // Check if a consent is mandatory
+  const isConsentMandatory = (consent: ConsentDetails): boolean => {
+    const purposeCode = consent.Purpose?.code
+    return purposeCode ? Boolean(mandatoryConsent[purposeCode]?.mandatory) : false
+  }
+
+  // Function to get logo URL for data consumer
+  const getDataConsumerLogoUrl = (dataConsumer: DataConsumer | undefined) => {
+    if (!dataConsumer || !dataConsumer.id) return logo
+    return `${S3_LOGO_BASE_URL}${dataConsumer.id}.jpeg`
+  }
+
+  if (loading) {
+    return (
+      <FrostedLayout>
+        <div className='flex items-center justify-center h-full'>
+          <p>Loading...</p>
+        </div>
+      </FrostedLayout>
+    )
+  }
+
+  if (error) {
+    return (
+      <FrostedLayout>
+        <div className='flex flex-col items-center justify-center h-full'>
+          <p className='text-red-500'>{error}</p>
+          <AnimatedButton
+            onClick={() => window.location.reload()}
+            className='mt-4'
+          >
+            Try Again
+          </AnimatedButton>
+        </div>
+      </FrostedLayout>
+    )
+  }
+  const purposeCodeMap: Record<string, string> = {
+    "101": "Wealth management service",
+    "102": "Customer spending patterns, budget or other reportings",
+    "103": "For loan underwriting",
+    "104": "For loan monitoring",
+    "105": "For account verification",
+    // Add more codes as needed
+  }
+
+  return (
+    <FrostedLayout>
+      <div className='flex flex-col w-full h-full py-4 md:px-14 sm:px4 mb-14'>
+        {linkedAccounts.length === 0 ?
+          <div className='mb-8'>
+            <Alert>
+              <AlertTitle className='flex items-center justify-between gap-4'>
+                <div className='flex items-center gap-4'>
+                  <div className='flex items-center justify-center bg-yellow-600 p-2 rounded-full w-fit'>
+                    <Info
+                      strokeWidth='2.3'
+                      className='h-[18px] w-[18px] text-white'
+                    />
+                  </div>
+                  <p className='text-lg font-medium'>
+                    No accounts selected! You need to select accounts to approve this consent
+                  </p>
+                </div>
+                <AnimatedButton
+                  variant={'outline'}
+                  size={'lg'}
+                  className='text-yellow-600 border-yellow-600 border-2 hover:bg-yellow-200 hover:text-yellow-900'
+                  onClick={() => { trackEvent(EVENTS.DISCOVER_MORE); navigate(`/link-accounts/${activeCategory}`) }}
+                >
+                  Add accounts
+                </AnimatedButton>
+              </AlertTitle>
+            </Alert>
+          </div>
+          : null}
+        {linkedAccounts.length === 0 ? (null
+        ) : (
+          <>
+            <SectionTitle title={linkedAccounts.length === 1 ? t('keywords.account') : t('keywords.accounts')} />
+            <div className='bg-white dark:bg-card rounded-md mt-4 p-4 border-1 border-gray-100 dark:border-gray-800'>
+              <Collapsible open={open} onOpenChange={setOpen}>
+                <CollapsibleTrigger asChild>
+                  <div className='flex items-center justify-between gap-2 cursor-pointer'>
+                    <div className='flex items-center justify-center gap-4 font-medium relative '>
+                      <div className='w-12 h-8'>
+                        {linkedAccounts.length > 0 && (
+                          <img
+                            src={linkedAccounts[0].logoUrl}
+                            className='absolute w-8 h-8 rounded-md'
+                            alt='First account logo'
+                          />
+                        )}
+                        {linkedAccounts.length > 1 && (
+                          <img
+                            src={linkedAccounts[1].logoUrl}
+                            className={`absolute w-8 h-8 left-4 ${isRTL ? 'right-4' : 'left-4'} rounded-md`}
+                            alt='Second account logo'
+                          />
+                        )}
+                      </div>
+                      <p className='text-content-primary dark:text-gray-400 text-md'>
+                        {linkedAccounts.length === 1
+                          ? linkedAccounts[0].fipName
+                          : linkedAccounts.length > 1
+                            ? `${linkedAccounts[0].fipName} ${linkedAccounts.length > 2 ? `+${linkedAccounts.length - 1} more` : ''}`
+                            : 'View more'}
+                      </p>
+                    </div>
+                  </div>
+                </CollapsibleTrigger>
+                <CollapsibleContent open={open}>
+                  <div className='flex flex-col gap-4 mt-4 border-t-1 border-gray-300 dark:border-gray-600 border-dashed'>
+                    {Object.entries(groupedAccounts).map(([fiType, accounts], index) => (
+                      <div key={fiType}>
+                        <div className='flex items-center justify-between mt-4 mb-4'>
+                          <Label className='text-sm md:text-md text-black dark:text-gray-300 font-semibold'>
+                            {ACCOUNT_TYPE_LABELS_TRANSLATED[fiType] || fiType}
+                          </Label>
+                          {index == 0 ? <AnimatedButton
+                            variant={'text'}
+                            size={'text'}
+                            className='text-primary'
+                            onClick={() => { trackEvent(EVENTS.EDIT_ACCOUNT); navigate(`/link-accounts/old-user`) }}
+                          >
+                            <Edit2 /> Edit
+                          </AnimatedButton> : null}
+                        </div>
+                        <div className='flex flex-col gap-4'>
+                          {accounts.map(account => (
+                            <BankCard
+                              key={account.accountRefNumber}
+                              bankName={account.fipName}
+                              badgeText={false}
+                              image={account.logoUrl}
+                              subText={`${account.accountType
+                                } | ***${account.maskedAccNumber.slice(-4)}`}
+                            />
+                          ))}
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </CollapsibleContent>
+              </Collapsible>
+
+            </div>
+          </>
+        )}
+
+        {consentDetails.length > 0 && (
+          <>
+            <p className='text-sm text-consent-secondary mt-4'>{decodedInfo?.fiuName} requests your explicit consent to access your financial data</p>
+            <SectionTitle
+              title='Consent details'
+              className='mt-6'
+              rightSection={
+                consentDetails.length > 1 && (
+                  <AnimatedButton
+                    variant={'text'}
+                    size={'text'}
+                    className='text-primary'
+                    onClick={handleSelectAll}
+                  >
+                    {selectedConsent?.length === consentDetails.length
+                      ? 'Deselect All'
+                      : 'Select All'}
+                  </AnimatedButton>
+                )
+              }
+            />
+
+            <div>
+              {consentDetails.map((consent) => {
+                const isMandatory = isConsentMandatory(consent)
+                const isSelected = selectedConsent.some(c => c.ConsentHandle === consent.ConsentHandle)
+                // Get the logo URL based on data consumer ID
+                const logoUrl = getDataConsumerLogoUrl(consent.DataConsumer)
+
+                return (
+                  <div
+                    key={consent.ConsentHandle}
+                    className='bg-white dark:bg-card rounded-lg mt-1 p-4 border-1 border-gray-100 dark:border-gray-800 relative'
+                  >
+                    <BankCard
+                      bankName={consent?.DataConsumer?.name || ''}
+                      image={logoUrl}
+                      className={`${consentDetails.length > 1 ? 'cursor-pointer' : ''} ${isMandatory ? 'opacity-90' : ''}`}
+                      selected={isSelected}
+                      onClick={() => consentDetails.length > 1 && toggleConsentSelection(consent.ConsentHandle)}
+                      subText={false}
+                      rightSection={
+                        consentDetails.length > 1 ? (
+                          <Checkbox
+                            checked={isSelected}
+                            disabled={isMandatory}
+                          />
+                        ) : null
+                      }
+                    />
+                    {consent && (
+                      <div className='flex flex-col gap-6 mt-4'>
+
+                        <div className={`flex flex-row gap-4 ${isRTL ? 'flex-row-reverse' : ''}`} style={{ flexDirection: 'row' }}>
+                          <div className='flex items-center justify-around p-2 bg-primary/20 w-fit rounded-full h-fit'>
+                            <FileText className='text-primary' />
+                          </div>
+                          <div>
+                            <Label className={`text-xs md:text-sm w-fit font-medium ${isRTL ? 'text-left' : ''} text-consent-secondary dark:text-gray-400`}>
+                              Category & data range
+                            </Label>
+                            <Label className={`text-sm md:text-md font-semibold text-consent-primary w-fit ${isRTL ? 'text-left' : ''} mt-1 dark:text-gray-300`}>
+                              {consent.consentTypes?.join(', ') ||
+                                'Profile summary, transactions'}
+                              {consent.FIDataRange &&
+                                ` from ${getDataRangeText(consent)}`}
+                              {/* {consent.DataFilter &&
+                              consent.DataFilter.length > 0 &&
+                              ` and transactions ${consent.DataFilter[0].operator} ${consent.DataFilter[0].value}`} */}
+                            </Label>
+                          </div>
+                        </div>
+
+
+
+                        <div className={`flex flex-row gap-4 ${isRTL ? 'flex-row-reverse' : ''}`} style={{ flexDirection: 'row' }}>
+
+                          <div className='flex items-center justify-around p-2 bg-primary/20 w-fit rounded-full h-fit'>
+                            <Crosshair className='text-primary' />
+                          </div>
+                          <div>
+                            <Label className={`text-xs md:text-sm w-fit font-medium ${isRTL ? 'text-left' : ''} text-consent-secondary dark:text-gray-400`}>
+                              Purpose
+                            </Label>
+                            <Label className={`text-sm md:text-md font-semibold text-consent-primary w-fit ${isRTL ? 'text-left' : ''} mt-1 dark:text-gray-300`}>
+                              {consent.Purpose?.text || purposeCodeMap[consent.Purpose?.code] || 'To process the loan application'}
+                            </Label>
+                          </div>
+
+                        </div>
+                        <div className={`flex flex-row gap-4 ${isRTL ? 'flex-row-reverse' : ''}`} style={{ flexDirection: 'row' }}>
+                          <div className='flex items-center justify-around p-2 bg-primary/20 w-fit rounded-full h-fit'>
+                            <SquareActivity className='text-primary' />
+                          </div>
+
+                          <div>
+                            <Label className={`text-xs md:text-sm w-fit font-medium ${isRTL ? 'text-left' : ''} text-consent-secondary dark:text-gray-400`}>
+                              Frequency
+                            </Label>
+                            <Label className={`text-sm md:text-md font-semibold text-consent-primary w-fit ${isRTL ? 'text-left' : ''} mt-1 dark:text-gray-300`}>
+                              {getFrequencyText(consent)}
+                            </Label>
+                          </div>
+                          {/* <div>
+                          <Label className={`text-xs md:text-sm w-fit font-medium ${isRTL ? 'text-left' : ''} text-consent-secondary`}>
+                            Frequency
+                          </Label>
+                          <Label className={`text-sm md:text-md font-semibold text-consent-primary w-fit ${isRTL ? 'text-left' : ''} mt-1`}>
+                            {children === '1' || children === '1 Onetime' ? 'Onetime' : children}
+                          </Label>
+                        </div> */}
+
+                        </div>
+
+                        <Collapsible
+                          open={
+                            consentDetailsCollapse.id == consent.ConsentHandle &&
+                            consentDetailsCollapse.modal
+                          }
+                          onOpenChange={() => handleViewMore(consent.ConsentHandle)}
+                        >
+                          <CollapsibleContent
+                            open={
+                              consentDetailsCollapse.id === consent.ConsentHandle &&
+                              consentDetailsCollapse.modal
+                            }
+                          >
+                            <div className='flex flex-col gap-6 w-full'>
+                              <div className={`flex flex-row gap-4 ${isRTL ? 'flex-row-reverse' : ''}`} style={{ flexDirection: 'row' }}>
+                                <div className='flex items-center justify-around p-2 bg-primary/20 w-fit rounded-full h-fit'>
+                                  <PanelTop className='text-primary' />
+                                </div>
+                                <div>
+                                  <Label className={`text-xs md:text-sm w-fit font-medium ${isRTL ? 'text-left' : ''} text-consent-secondary dark:text-gray-400`}>
+                                    Account type
+                                  </Label>
+                                  <Label className={`text-sm md:text-md font-semibold text-consent-primary w-fit ${isRTL ? 'text-left' : ''} mt-1 capitalize dark:text-gray-300`}>
+                                    {consent.fiTypes?.map(
+                                      word => word?.charAt(0)?.toUpperCase() + word?.slice(1)?.toLowerCase()
+                                    )?.join(', ')?.replace(/_/g, ' ') ||
+                                      'Bank accounts'}
+                                  </Label>
+                                </div>
+                              </div>
+                              <div className={`flex flex-row gap-4 ${isRTL ? 'flex-row-reverse' : ''}`} style={{ flexDirection: 'row' }}>
+                                <div className='flex items-center justify-around p-2 bg-primary/20 w-fit rounded-full h-fit'>
+                                  <CircleGauge className='text-primary' />
+                                </div>
+                                <div>
+                                  <Label className={`text-xs md:text-sm w-fit font-medium ${isRTL ? 'text-left' : ''} text-consent-secondary dark:text-gray-400`}>
+                                    Data life
+                                  </Label>
+                                  <Label className={`text-sm md:text-md font-semibold text-consent-primary w-fit ${isRTL ? 'text-left' : ''} mt-1 dark:text-gray-300`}>
+                                    {consent.DataLife
+                                      ? `${consent.DataLife.value
+                                      } ${consent.DataLife.unit.toLowerCase()}${consent.DataLife.value > 1 ? 's' : ''
+                                      }`
+                                      : '-'}
+                                  </Label>
+                                </div>
+                              </div>
+                              <div className={`flex flex-row gap-4 ${isRTL ? 'flex-row-reverse' : ''}`} style={{ flexDirection: 'row' }}>
+                                <div className='flex items-center justify-around p-2 bg-primary/20 w-fit rounded-full h-fit'>
+                                  <BriefcaseBusiness className='text-primary' />
+                                </div>
+                                <div>
+                                  <Label className={`text-xs md:text-sm w-fit font-medium ${isRTL ? 'text-left' : ''} text-consent-secondary dark:text-gray-400`}>
+                                    Consent validity
+                                  </Label>
+                                  <Label className={`text-sm md:text-md font-semibold text-consent-primary w-fit ${isRTL ? 'text-left' : ''} mt-1 dark:text-gray-300`}>
+                                    {consent.consentStart &&
+                                      consent.consentExpiry
+                                      ? `Upto ${new Date(
+                                        consent.consentExpiry
+                                      ).toLocaleDateString('en-US', {
+                                        day: '2-digit',
+                                        month: 'short',
+                                        year: 'numeric'
+                                      })}`
+                                      : '-'}
+                                  </Label>
+                                </div>
+                              </div>
+                            </div>
+                          </CollapsibleContent>
+                          <div className='w-full flex items-center justify-center mt-4 md:mt-1'>
+                            <CollapsibleTrigger>
+                              <div className='flex items-center justify-center gap-2 cursor-pointer text-consent-primary dark:text-gray-400 font-semibold text-sm'>
+                                View{' '}
+                                {consentDetailsCollapse.id === consent.ConsentHandle &&
+                                  consentDetailsCollapse.modal
+                                  ? 'Less'
+                                  : 'More'}
+                                {consentDetailsCollapse.id === consent.ConsentHandle &&
+                                  consentDetailsCollapse.modal ? (
+                                  <ChevronUp />
+                                ) : (
+                                  <ChevronDown />
+                                )}
+                              </div>
+                            </CollapsibleTrigger>
+                          </div>
+                        </Collapsible>
+
+                      </div>
+
+                    )}
+                  </div>
+
+                )
+              })
+              }
+
+
+
+
+            </div>
+          </>
+        )}
+
+        <DummyFooter />
+      </div>
+
+      <MobileFooter show={isMobile && (accountForConsent?.length > 0 ? Boolean(linkedAccounts.filter(account => accountForConsent.includes(account.linkRefNumber))?.length) : Boolean(linkedAccounts?.length) && Boolean(selectedConsent?.length))}>
+        <div className='flex flex-row items-center w-full gap-4 justify-between'>
+          <AnimatedButton
+            onClick={() => setShowRejectModal(true)}
+            variant={'ghost'}
+            size='lg'
+            className='text-primary'
+            disabled={loading}
+            loading={loading}
+          >
+            Reject
+          </AnimatedButton>
+          <AnimatedButton
+            onClick={handleApproveConsent}
+            size='lg'
+            className='h-[50px] w-[48%]'
+            disabled={
+              loading ||
+              selectedConsent.length === 0
+            }
+          >
+            Approve
+          </AnimatedButton>
+        </div>
+      </MobileFooter>
+
+      <WebFooter show={!isMobile && (accountForConsent?.length > 0 ? Boolean(linkedAccounts.filter(account => accountForConsent.includes(account.linkRefNumber))?.length) : Boolean(linkedAccounts?.length) && Boolean(selectedConsent?.length))}>
+        <AnimatedButton
+          onClick={() => setShowRejectModal(true)}
+          variant={'ghost'}
+          size='lg'
+          className='text-primary'
+          disabled={loading}
+        >
+          Reject
+        </AnimatedButton>
+        <AnimatedButton
+          onClick={handleApproveConsent}
+          size='lg'
+          disabled={
+            loading ||
+            selectedConsent.length === 0
+          }
+        >
+          Approve
+        </AnimatedButton>
+      </WebFooter>
+
+      <Modal
+        open={showRejectModal}
+        onOpenChange={open => setShowRejectModal(open)}
+        withCloseIcon={false}
+      >
+        <div className='flex flex-col gap-4 items-center'>
+          <div className='flex items-center justify-center bg-red-100 p-2.5 rounded-full'>
+            <InfoIcon className='h-[28px] w-[28px] text-red-700' />
+          </div>
+          <div className='flex flex-col gap-2 items-center text-center mt-2'>
+            <p className='text-xl font-semibold dark:text-gray-300'>
+              Are you sure you want to reject?
+            </p>
+            <p className='text-sm text-muted-secondary'>
+              Rejecting this consent is a permanent action and cannot be undone.
+              However, you can still view the consent details anytime using
+              Saafe app.
+            </p>
+          </div>
+          <div className='flex gap-2 w-full items-center justify-center'>
+            <AnimatedButton size='lg' onClick={() => setShowRejectModal(false)}>
+              No, go back!
+            </AnimatedButton>
+            <AnimatedButton
+              size='lg'
+              variant='ghost'
+              className='hover:bg-red-100 hover:text-red-700 text-red-700 dark:text-red-500 '
+              onClick={handleRejectConsent}
+              loading={loading}
+            >
+              Yes, Reject
+            </AnimatedButton>
+          </div>
+        </div>
+      </Modal>
+
+    </FrostedLayout>
+
+  )
+}
+
+export default ReviewConsent