Merge pull request #1302 from peanutprotocol/fix/carousel-not-clickable

fix: Home carousel not clickable

Author: Zishan-7

src/components/Home/HomeBanners/BannerCard.tsx

@@ -9,16 +9,17 @@ interface BannerCardProps {
     title: string
     description: string
     onClose: () => void
+    onClick?: () => void
 }
 
-const BannerCard = ({ title, description, icon, onClose }: BannerCardProps) => {
+const BannerCard = ({ title, description, icon, onClose, onClick }: BannerCardProps) => {
     const handleClose = (e: React.MouseEvent) => {
         e.stopPropagation()
         onClose()
     }
 
     return (
-        <Card className="embla__slide relative flex flex-row items-center justify-around p-2">
+        <Card onClick={onClick} className="embla__slide relative flex flex-row items-center justify-around p-2">
             <div className="absolute right-2 top-2">
                 <Icon onClick={handleClose} name="cancel" size={10} />
             </div>

src/components/Home/HomeBanners/index.tsx

@@ -38,6 +38,7 @@ const HomeBanners = () => {
                         onClose={() => {
                             setBanners(banners.filter((b) => b.id !== banner.id))
                         }}
+                        onClick={banner.onClick}
                     />
                 )
             })}

src/hooks/useBanners.tsx

@@ -4,6 +4,7 @@ import { IconName } from '@/components/Global/Icons/Icon'
 import { useAuth } from '@/context/authContext'
 import { useEffect, useState } from 'react'
 import { useNotifications } from './useNotifications'
+import { useRouter } from 'next/navigation'
 
 export type Banner = {
     id: string
@@ -21,6 +22,7 @@ export const useBanners = () => {
     const { user } = useAuth()
     const { showReminderBanner, requestPermission, snoozeReminderBanner, afterPermissionAttempt, isPermissionDenied } =
         useNotifications()
+    const router = useRouter()
 
     const generateBanners = () => {
         const _banners: Banner[] = []
@@ -50,6 +52,9 @@ export const useBanners = () => {
                 title: 'Unlock bank & local payments',
                 description: 'Complete verification to add, withdraw or pay using Mercado Pago.',
                 icon: 'shield',
+                onClick: () => {
+                    router.push('/profile/identity-verification')
+                },
             })
         }