[TASK-16465] Feat: Add merchant map CTA

redirects.json

@@ -47,7 +47,7 @@
     },
     {
         "source": "/foodie",
-        "destination": "https://peanutprotocol.notion.site/297838117579804da61dc45760a2599f?v=29783811757980a1b23a000cce31c330",
+        "destination": "https://peanutprotocol.notion.site/Peanut-Foodie-Guide-29a83811757980e79896f2a610d6591a",
         "permanent": false
     }
 ]

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,25 @@ const CarouselCTA = ({
                 {/* Icon container */}
                 <div
                     className={twMerge(
-                        'flex size-8 items-center justify-center rounded-full',
+                        'relative flex size-8 items-center justify-center rounded-full',
                         logo ? 'bg-transparent' : 'bg-primary-1',
                         iconContainerClassName
                     )}
                 >
                     {/* Show icon only if logo isn't provided. Logo takes precedence over icon. */}
-                    {!logo && <Icon name={icon} size={20} />}
+                    {!logo && <Icon name={icon} size={22} />}
                     {logo && (
-                        <Image src={logo} alt={typeof title === 'string' ? title : 'logo'} width={32} height={32} />
+                        <Image src={logo} alt={typeof title === 'string' ? title : 'logo'} width={36} height={36} />
+                    )}
+                    {secondaryIcon && (
+                        <Image
+                            src={secondaryIcon}
+                            alt="secondary icon"
+                            height={64}
+                            width={64}
+                            quality={100}
+                            className="absolute -right-1 bottom-0 z-50 size-4 rounded-full object-cover"
+                        />
                     )}
                 </div>
 

src/components/Home/HomeCarouselCTA/index.tsx

@@ -31,6 +31,7 @@ const HomeCarouselCTA = () => {
                     logo={cta.logo}
                     iconContainerClassName={cta.iconContainerClassName}
                     isPermissionDenied={cta.isPermissionDenied}
+                    secondaryIcon={cta.secondaryIcon}
                 />
             ))}
         </Carousel>

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({