From 816b645513b99b241359139759fe6db15ecc79e6 Mon Sep 17 00:00:00 2001
From: Zishan Mohd <zishan2539@gmail.com>
Date: Thu, 9 Oct 2025 12:45:30 +0530
Subject: [PATCH] fix: Home carousel not clickable

---
 src/components/Home/HomeBanners/BannerCard.tsx | 5 +++--
 src/components/Home/HomeBanners/index.tsx      | 1 +
 src/hooks/useBanners.tsx                       | 5 +++++
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/Home/HomeBanners/BannerCard.tsx b/src/components/Home/HomeBanners/BannerCard.tsx
index 9599e11ef..1b26547eb 100644
--- a/src/components/Home/HomeBanners/BannerCard.tsx
+++ b/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>
diff --git a/src/components/Home/HomeBanners/index.tsx b/src/components/Home/HomeBanners/index.tsx
index c0d42c716..bf4ffd6ba 100644
--- a/src/components/Home/HomeBanners/index.tsx
+++ b/src/components/Home/HomeBanners/index.tsx
@@ -38,6 +38,7 @@ const HomeBanners = () => {
                         onClose={() => {
                             setBanners(banners.filter((b) => b.id !== banner.id))
                         }}
+                        onClick={banner.onClick}
                     />
                 )
             })}
diff --git a/src/hooks/useBanners.tsx b/src/hooks/useBanners.tsx
index 6ffb878e6..bc9bea1ab 100644
--- a/src/hooks/useBanners.tsx
+++ b/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')
+                },
             })
         }