fix: show dollar amounts instead of misleading percentages in cashback banners#1742
fix: show dollar amounts instead of misleading percentages in cashback banners#1742
Conversation
…k banners
Previously the QR payment flow showed "You're getting 10% cashback!" based on
the perk campaign's discountPercentage. But the actual amount is capped by the
user's points balance (dynamicCapFormula), so users often received far less than
10% — creating confusion and support tickets.
Now we show the actual dollar amount (amountSponsored) which already accounts
for all caps. Users see "Peanut's got you! $0.50 back" instead of a misleading
percentage.
Changes:
- Pre-claim banner: shows "$X.XX back" instead of "X% cashback"
- Post-claim banner: shows "$X.XX back" with invite CTA
- 100%+ perks still get special messaging ("We paid for this bill!")
- Fallback copy when amount isn't available yet
…ounts consistently Remove unused percentage variable from pre-claim banner and align full-coverage detection logic between pre-claim and post-claim banners. Also update TransactionDetailsReceipt to use dollar-amount messaging instead of percentage-based, keeping perk messaging consistent across the app.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
WalkthroughPerk messaging in two UI components was converted from percentage-based wording and calculations to dollar-amount-based wording. Code now shows Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes 🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
Comment |
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/app/`(mobile-ui)/qr-pay/page.tsx:
- Around line 1241-1250: The condition `if (amountSponsored && typeof
amountSponsored === 'number')` incorrectly treats 0 as missing; change the guard
to accept zero by checking only for a numeric value (e.g., `if (typeof
amountSponsored === 'number')` or `if (amountSponsored != null && typeof
amountSponsored === 'number')`) so zero-valued perks render the dollar copy;
update both occurrences that reference amountSponsored and transactionUsd in the
QR pay page rendering code (the blocks that build the
"$${amountSponsored.toFixed(2)}" messages) to use the new guard.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 6cf75092-c60e-4f93-bb68-d9c34bca5f08
📒 Files selected for processing (2)
src/app/(mobile-ui)/qr-pay/page.tsxsrc/components/TransactionDetails/TransactionDetailsReceipt.tsx
| // Always show actual dollar amount — never percentage (misleading due to dynamic caps) | ||
| if (amountSponsored && typeof amountSponsored === 'number') { | ||
| if (transactionUsd > 0 && amountSponsored >= transactionUsd) { | ||
| return `This bill can be covered by Peanut! $${amountSponsored.toFixed(2)} back. Claim it now.` | ||
| } | ||
| return `Peanut's got you! $${amountSponsored.toFixed(2)} back on this payment. Claim it now.` | ||
| } | ||
|
|
||
| return amountSponsored && typeof amountSponsored === 'number' | ||
| ? `Get $${amountSponsored.toFixed(2)} back!` | ||
| : 'Claim it now to unlock your reward.' | ||
| // Fallback: no amount available yet | ||
| return 'You earned a Peanut Perk! Claim it now to unlock your reward.' |
There was a problem hiding this comment.
Treat $0.00 perks as real values, not “missing”.
if (amountSponsored && typeof amountSponsored === 'number') drops zero-valued sponsored amounts into the fallback copy. That makes capped/no-reward cases read like “unlock your reward” / generic cashback instead of reflecting the actual computed amount. This is a user-facing regression for the same capped-formula cases this PR is addressing.
🐛 Proposed fix
- if (amountSponsored && typeof amountSponsored === 'number') {
+ if (typeof amountSponsored === 'number' && Number.isFinite(amountSponsored)) {
if (transactionUsd > 0 && amountSponsored >= transactionUsd) {
return `This bill can be covered by Peanut! $${amountSponsored.toFixed(2)} back. Claim it now.`
}
return `Peanut's got you! $${amountSponsored.toFixed(2)} back on this payment. Claim it now.`
}- if (amountSponsored && typeof amountSponsored === 'number') {
+ if (typeof amountSponsored === 'number' && Number.isFinite(amountSponsored)) {
if (transactionUsd > 0 && amountSponsored >= transactionUsd) {
return 'We paid for this bill! Earn points, climb tiers and unlock even better perks.'
}
return `We gave you $${amountSponsored.toFixed(2)} back! Invite friends to unlock bigger rewards.`
}Also applies to: 1271-1279
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/app/`(mobile-ui)/qr-pay/page.tsx around lines 1241 - 1250, The condition
`if (amountSponsored && typeof amountSponsored === 'number')` incorrectly treats
0 as missing; change the guard to accept zero by checking only for a numeric
value (e.g., `if (typeof amountSponsored === 'number')` or `if (amountSponsored
!= null && typeof amountSponsored === 'number')`) so zero-valued perks render
the dollar copy; update both occurrences that reference amountSponsored and
transactionUsd in the QR pay page rendering code (the blocks that build the
"$${amountSponsored.toFixed(2)}" messages) to use the new guard.
|
Reopened from #1741 (which had unrelated Crisp commits mixed in). Context: ~10% of Crisp tickets last week were cashback-related. Users see "10% cashback" but get far less due to dynamic point-based caps ( Fix: Always show the actual dollar amount ( Separate note: the legacy "10% cashback" perk ( |
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
Small amounts (<$0.50) get factual tone + invite nudge instead of celebratory "Peanut's got you!" framing that feels patronizing for pocket change. Large amounts ($5+) get "your points are paying off" to reinforce the gamification loop.
Summary
qr-pay/page.tsx(pre-claim and post-claim banners) andTransactionDetailsReceipt.tsxfor consistencypercentagevariable and aligned full-coverage detection logic between bannersTest plan