[TASK-16465] feat: Add merchant map cta

[Zishan-7]

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
peanut-wallet	Ready	Preview	Comment	Nov 6, 2025 4:53pm

[coderabbitai]

Caution

Review failed

Failed to post review comments

Walkthrough

Added support for an optional secondaryIcon to CarouselCTA and propagated it through CTA data; rendered the secondary icon with adjusted sizing/positioning alongside existing icons/logos. Introduced a PIX CTA using secondaryIcon. Also added isBlurred prop to QRCodeWrapper and paymentProcessor-aware KYC gating elsewhere (other related changes included).

Changes

Cohort / File(s)	Change Summary
CarouselCTA component & export src/components/Home/HomeCarouselCTA/CarouselCTA.tsx, src/components/Home/HomeCarouselCTA/index.tsx	Added `secondaryIcon?: StaticImageData
Carousel CTAs hook / data src/hooks/useHomeCarouselCTAs.tsx	Extended CarouselCTA type with `secondaryIcon?: StaticImageData
QR/UX gating and QR code wrapper src/app/(mobile-ui)/qr-pay/page.tsx, src/hooks/useQrKycGate.ts, src/components/Global/QRCodeWrapper/index.tsx, src/components/Request/link/views/Create.request.link.view.tsx	Made useQrKycGate accept optional paymentProcessor and add SIMPLEFI early-return; qr-pay page derives/passes paymentProcessor and updates navigation/labels; added isBlurred?: boolean prop to QRCodeWrapper and applied conditional blur; wired isBlurred in create/share request flow.
SimpleFi QR recognition src/components/Global/DirectSendQR/utils.ts, src/components/Global/DirectSendQR/__tests__/recognizeQr.test.ts	Broadened SIMPLEFI regexes to include pay.simplefi.tech and legacy pagar.simplefi.tech variants across static/dynamic/user-specified flows; extended tests and priority assertions to cover new domains and formats.
KYC status UI src/components/Kyc/KycStatusItem.tsx	Replaced date-based subtitle with status-derived subtitle and integrated StatusPill; updated memo dependencies and removed the separate approved check icon.
Manifest / metadata package.json	Present in diff metadata only (no content summary provided).

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

• Inspect CarouselCTA secondary icon rendering, absolute positioning, sizing, and stacking with existing logo/icon.
• Verify type compatibility for StaticImageData | string usages and imports (e.g., PIX) across components.
• Review QR KYC gating changes for side effects when passing paymentProcessor, and confirm navigation/label updates in qr-pay page.
• Validate QR regex updates and corresponding tests for regressions in QR recognition.
• Check QRCodeWrapper isBlurred styling impact and Create.request.link.view conditional flows.

Possibly related PRs

• Hotfix: Add blur to QR code till request is created #1409 — Updates to QRCodeWrapper API and usage; likely overlaps with isBlurred changes.
• [TASK-15897] fix: recognize more simplefi QRs #1324 — Changes to SimpleFi QR recognition regexes and tests; closely connected to DirectSendQR updates here.
• feat: handle manteca qr-pay kyc gating #1225 — Modifications around useQrKycGate and qr-pay flow; related to paymentProcessor-aware gating added in this diff.

Suggested reviewers

• jjramirezn
• kushagrasarathe

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 50.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and accurately describes the main change: adding a merchant map CTA component, which is reflected across multiple modified files including HomeCarouselCTA component changes and hook updates.
Description check	✅ Passed	The description, while minimal (containing only an image), is related to the changeset as it visually demonstrates the merchant map CTA feature being added in the pull request.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/merchant-map-cta

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[notion-workspace]

Implement CTA carrousel with merchant map

[coderabbitai]

Actionable comments posted: 2

🧹 Nitpick comments (4)

src/hooks/useHomeCarouselCTAs.tsx (2)

45-45: Consider hosting the flag icon locally to avoid external dependency.

The secondary icon uses an external CDN URL (flagcdn.com) which introduces a dependency on third-party availability. If the CDN fails or the URL changes, the icon won't load and there's no error handling or fallback.

Consider either:

1. Hosting the Brazilian flag icon locally as a static asset alongside the PIX logo
2. Adding error handling/fallback for the external image

For a local asset approach:

-            secondaryIcon: 'https://flagcdn.com/w320/br.png',
+            secondaryIcon: BrazilFlag, // Import from @/assets

---

42-42: Icon choice doesn't match the CTA purpose.

The 'shield' icon is typically associated with security or verification, but this CTA is about merchant maps and PIX payments. Consider using a more semantically appropriate icon like 'map', 'location', or 'payment'.

-            icon: 'shield',
+            icon: 'map', // or 'location' if available

src/components/Home/HomeCarouselCTA/CarouselCTA.tsx (2)

109-109: Consider reducing quality setting for small icon.

The quality={100} setting may be excessive for a 16px icon. The default quality of 75 is typically sufficient for small images and would reduce bandwidth without perceptible visual difference.

-                            quality={100}
+                            quality={75}

Or simply omit the quality prop to use the default:

                            src={typeof secondaryIcon === 'string' ? secondaryIcon : secondaryIcon.src}
                            alt="secondary icon"
                            height={16}
                            width={16}
-                            quality={100}
                            className="absolute -right-1 bottom-0 z-50 size-4 rounded-full object-cover"

---

106-106: Consider more descriptive alt text.

The generic "secondary icon" alt text doesn't convey meaningful information to screen reader users. Consider a more descriptive alternative based on the actual content.

-                            alt="secondary icon"
+                            alt="country flag"

Or make it dynamic based on the CTA context if different CTAs use different secondary icons for different purposes.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 5264ed0 and 4a7c600.

📒 Files selected for processing (3)

• src/components/Home/HomeCarouselCTA/CarouselCTA.tsx (3 hunks)
• src/components/Home/HomeCarouselCTA/index.tsx (1 hunks)
• src/hooks/useHomeCarouselCTAs.tsx (3 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

src/components/Home/HomeCarouselCTA/CarouselCTA.tsx (1)

src/components/Global/Icons/Icon.tsx (1)

• Icon (209-218)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: Deploy-Preview

🔇 Additional comments (6)

src/hooks/useHomeCarouselCTAs.tsx (2)

10-10: LGTM!

The PIX asset import is properly used as the logo for the new CTA.

---

23-23: LGTM!

The type definition appropriately supports both static image imports and URL strings, providing flexibility for different icon sources.

src/components/Home/HomeCarouselCTA/index.tsx (1)

34-34: LGTM!

The secondaryIcon prop is correctly passed through from the CTA data to the CarouselCTA component.

src/components/Home/HomeCarouselCTA/CarouselCTA.tsx (3)

22-22: LGTM!

The secondaryIcon prop is properly typed and destructured, maintaining consistency with the type definition in the hook.

Also applies to: 34-34

---

92-92: LGTM!

The coordinated size increases (container, icon, and logo) are proportional and make room for the secondary icon badge. The sizing remains visually balanced.

Also applies to: 98-98, 100-101

---

105-105: LGTM!

The type checking correctly handles both StaticImageData (accessing .src) and string URLs, matching the type union defined in the props.

[kushagrasarathe]

lgtm

[Zishan-7]

Closing in favor of #1410