From 89f78914c253f479c6ca36e672c16eeaa95ce6ae Mon Sep 17 00:00:00 2001 From: Chad Curtis Date: Thu, 25 Jun 2026 16:13:47 -0500 Subject: [PATCH] Bake Venezuela relief campaign into appeal surfaces Resolve the terremoto-venezuela campaign (naddr) directly in the relief banner, popup, and dedicated page, turning each into an info + donation hybrid: - New useVenezuelaReliefCampaign hook + VenezuelaReliefGoal component surface the campaign's live raised/goal progress in all three surfaces. - Donate CTAs deep-link to the campaign naddr; on the dedicated page the full campaign detail (story, donate panel, ledger, comments) is embedded below the appeal hero, and "Donate to relief" smooth-scrolls to the donate panel and flashes a highlight ring (mobile inline + desktop sidebar). Scroll margin clears the sticky nav. - Drop the "Raise funds for Venezuela" button; shrink the page hero. - Add the goalOf locale key across all 16 locales. --- src/components/VenezuelaReliefBanner.tsx | 31 ++--- src/components/VenezuelaReliefGoal.tsx | 107 +++++++++++++++ src/components/VenezuelaReliefPopup.tsx | 4 + src/hooks/useVenezuelaReliefCampaign.ts | 73 +++++++++++ src/index.css | 34 +++++ src/lib/venezuelaRelief.ts | 24 +++- src/locales/ar.json | 3 +- src/locales/en.json | 3 +- src/locales/es.json | 3 +- src/locales/fa.json | 3 +- src/locales/fr.json | 3 +- src/locales/hi.json | 3 +- src/locales/id.json | 3 +- src/locales/km.json | 3 +- src/locales/ps.json | 3 +- src/locales/pt.json | 3 +- src/locales/ru.json | 3 +- src/locales/sn.json | 3 +- src/locales/sw.json | 3 +- src/locales/tr.json | 3 +- src/locales/zh-Hant.json | 3 +- src/locales/zh.json | 3 +- src/pages/CampaignDetailPage.tsx | 4 +- src/pages/VenezuelaReliefPage.tsx | 160 +++++++++++------------ 24 files changed, 360 insertions(+), 125 deletions(-) create mode 100644 src/components/VenezuelaReliefGoal.tsx create mode 100644 src/hooks/useVenezuelaReliefCampaign.ts diff --git a/src/components/VenezuelaReliefBanner.tsx b/src/components/VenezuelaReliefBanner.tsx index dfa80cbb..e125c6c2 100644 --- a/src/components/VenezuelaReliefBanner.tsx +++ b/src/components/VenezuelaReliefBanner.tsx @@ -1,10 +1,10 @@ import { Link } from 'react-router-dom'; import { Trans, useTranslation } from 'react-i18next'; -import { HeartHandshake, PlusCircle, Share2 } from 'lucide-react'; +import { HeartHandshake, Share2 } from 'lucide-react'; import { Button } from '@/components/ui/button'; import { HeroBanner } from '@/components/HeroBanner'; -import { StartCampaignLink } from '@/components/StartCampaignLink'; +import { VenezuelaReliefGoal } from '@/components/VenezuelaReliefGoal'; import { useShareOrigin } from '@/hooks/useShareOrigin'; import { useToast } from '@/hooks/useToast'; import { shareOrCopy } from '@/lib/share'; @@ -40,11 +40,9 @@ const VENEZUELA_RELIEF_BANNER_IMAGES = VENEZUELA_RELIEF_IMAGES; * - A large display headline ("Venezuela needs you") with the final * word painted inside a solid brand-orange highlighter block — the * same idiom as the home hero's "unstoppable". - * - Two unmistakable calls to action: **Donate to relief** deep-links - * to the Venezuela-filtered campaign browse (`/campaigns?country=VE`) - * so donors land straight on fundable relief campaigns; **Raise funds - * for Venezuela** routes organizers through `StartCampaignLink` - * (auth-gated) to publish a new fundraiser. + * - A primary call to action — **Donate to relief** — deep-links + * straight to the baked-in relief campaign (its naddr) so donors land + * on the campaign's detail page, plus a **Share** action. * * Not dismissible by design — while the appeal is active it stays put * for every visitor (product decision). When the response winds down, @@ -162,6 +160,10 @@ export function VenezuelaReliefBanner({ className }: { className?: string }) { {t('campaigns.home.venezuelaRelief.body')}

+ {/* Live fundraising progress for the baked-in relief campaign — + the info half of this info + donation hybrid. */} + +
{/* Primary CTA — donate to Venezuela-filtered relief campaigns */} - {/* Secondary CTA — start a relief fundraiser (auth-gated) */} - - - {/* Share: native share sheet or copy link to the relief page */} + {/* Secondary CTA — share: native share sheet or copy link */}
+ ); + } + + // Nothing meaningful to show — let the appeal copy carry the surface. + if (raisedSats <= 0 && !goalUsd) return null; + + const raisedLabel = formatCampaignAmount(raisedSats, btcPrice); + + return ( +
+
+ + {raisedLabel} + + {t('campaignsDetail.raised')} + + + {goalUsd ? ( + + {t('campaigns.home.venezuelaRelief.goalOf', { amount: formatUsdGoal(goalUsd) })} + + ) : null} +
+ + {percent !== undefined && ( + + )} + + {donationCount > 0 && ( +

+ {t('campaignsDetail.donationCount', { count: donationCount })} +

+ )} +
+ ); +} + +export default VenezuelaReliefGoal; diff --git a/src/components/VenezuelaReliefPopup.tsx b/src/components/VenezuelaReliefPopup.tsx index 0dd9129e..7dce68f1 100644 --- a/src/components/VenezuelaReliefPopup.tsx +++ b/src/components/VenezuelaReliefPopup.tsx @@ -12,6 +12,7 @@ import { DialogTitle, } from '@/components/ui/dialog'; import { Button } from '@/components/ui/button'; +import { VenezuelaReliefGoal } from '@/components/VenezuelaReliefGoal'; import { useShareOrigin } from '@/hooks/useShareOrigin'; import { useToast } from '@/hooks/useToast'; import { shareOrCopy } from '@/lib/share'; @@ -123,6 +124,9 @@ export function VenezuelaReliefPopup() { {t('campaigns.home.venezuelaRelief.popupBody')} + {/* Live fundraising progress — the info half of the hybrid. */} + + - - - - - - + {/* The actual relief campaign, baked in: story, donate panel, + ledger, and comments — the full detail UI for the campaign at + VENEZUELA_DONATE_PATH. The "Donate to relief" CTA flashes a + highlight ring on the donate panel (mobile) or this section + (desktop) via the `.relief-donate-flash` class — see + handleScrollToCampaign. */} +
+ +
); }