diff --git a/src/components/Home/HomeCarouselCTA/CarouselCTA.tsx b/src/components/Home/HomeCarouselCTA/CarouselCTA.tsx index 060cc51a0..a87202950 100644 --- a/src/components/Home/HomeCarouselCTA/CarouselCTA.tsx +++ b/src/components/Home/HomeCarouselCTA/CarouselCTA.tsx @@ -19,6 +19,7 @@ interface CarouselCTAProps { iconContainerClassName?: string // Notification-specific props isPermissionDenied?: boolean + secondaryIcon?: StaticImageData | string } const CarouselCTA = ({ @@ -30,6 +31,7 @@ const CarouselCTA = ({ logo, iconContainerClassName, isPermissionDenied, + secondaryIcon, }: CarouselCTAProps) => { const [showPermissionDeniedModal, setShowPermissionDeniedModal] = useState(false) @@ -87,15 +89,26 @@ const CarouselCTA = ({ {/* Icon container */}
{/* Show icon only if logo isn't provided. Logo takes precedence over icon. */} - {!logo && } + {!logo && } {logo && ( - {typeof + {typeof + )} + + {secondaryIcon && ( + secondary icon )}
diff --git a/src/components/Home/HomeCarouselCTA/index.tsx b/src/components/Home/HomeCarouselCTA/index.tsx index e7ad1bf00..779b4ccff 100644 --- a/src/components/Home/HomeCarouselCTA/index.tsx +++ b/src/components/Home/HomeCarouselCTA/index.tsx @@ -31,6 +31,7 @@ const HomeCarouselCTA = () => { logo={cta.logo} iconContainerClassName={cta.iconContainerClassName} isPermissionDenied={cta.isPermissionDenied} + secondaryIcon={cta.secondaryIcon} /> ))} diff --git a/src/hooks/useHomeCarouselCTAs.tsx b/src/hooks/useHomeCarouselCTAs.tsx index 325212874..b388afad2 100644 --- a/src/hooks/useHomeCarouselCTAs.tsx +++ b/src/hooks/useHomeCarouselCTAs.tsx @@ -7,6 +7,7 @@ import { useNotifications } from './useNotifications' import { useRouter } from 'next/navigation' import useKycStatus from './useKycStatus' import type { StaticImageData } from 'next/image' +import { PIX } from '@/assets' export type CarouselCTA = { id: string @@ -19,6 +20,7 @@ export type CarouselCTA = { onClose?: () => void isPermissionDenied?: boolean iconContainerClassName?: string + secondaryIcon?: StaticImageData | string } export const useHomeCarouselCTAs = () => { @@ -32,6 +34,19 @@ export const useHomeCarouselCTAs = () => { const generateCarouselCTAs = useCallback(() => { const _carouselCTAs: CarouselCTA[] = [] + _carouselCTAs.push({ + id: 'merchant-map-pix', + title: '20% Off with PIX Payments', + description: 'Click to explore participating merchants. Pay with PIX QR, save instantly, earn points.', + iconContainerClassName: 'bg-secondary-1', + icon: 'shield', + onClick: () => { + router.push('https://peanutprotocol.notion.site/Peanut-Foodie-Guide-29a83811757980e79896f2a610d6591a') + }, + logo: PIX, + secondaryIcon: 'https://flagcdn.com/w320/br.png', + }) + // add notification prompt as first item if it should be shown if (showReminderBanner) { _carouselCTAs.push({