VideoBlast Landing Page

VideoBlast Landing Page

Component File: src/features/marketing/components/VideoBlastLandingPage.tsx Route: /vb/:publicUrl Access Level: Public (No authentication required) Last Updated: December 14, 2025 Status: ✅ Fully Implemented with Stripe Integration

Overview

The VideoBlast Landing Page is a public-facing video donation page that displays a personalized video message alongside a donation form. It's designed for video-based fundraising campaigns where supporters can watch a video and then make a donation. The page fetches video bomb data from the database, tracks views, and processes donations through Stripe Checkout.

Implementation Status

Backend Integration

• ✅ Fetches video bomb data from video_bombs table via fetchVideoBlastByPublicUrl()
• ✅ Fetches organization name for display
• ✅ Increments view count on page load via incrementVideoBlastViews()
• ✅ Integrates with create-checkout-session Edge Function for Stripe payments
• ✅ Handles success/cancel redirects from Stripe Checkout
• ✅ Loading and error states for better UX

UI Features

Header

• Organization name display (fetched from database)
• Clean, minimal branding

Hero Section

• Full-width nonprofit image
• Campaign title (from video bomb record)
• Mission statement

Video Section

• Video player with controls
• Video loaded from Supabase Storage URL

Impact Section

• Key impact statistics
• Bullet points showing community impact
• Visual engagement elements

Donation Form

• Preset Amounts: $25, $50, $100, $250, $500
• Custom Amount: Text input for other amounts
• Donation Type: One-time or monthly recurring
• Donor Info:
• Name (required)
• Email (required)
• Personal message (optional)
• Donate Button: Redirects to Stripe Checkout

Data Flow

Props Interface

interface VideoBlastLandingPageProps {
  publicUrl?: string; // Can be passed as prop or from URL params
}

State Management

• VideoBlast - Video bomb data from database
• organizationName - Organization name for display
• isLoading - Loading state
• error - Error message if video bomb not found
• isProcessing - Processing state during checkout
• amount - Selected preset amount or 'custom'
• customAmount - Custom amount input value
• donationType - 'one-time' or 'monthly'
• donorInfo - Name, email, message

Donation Flow

1. Visitor arrives via shared VideoBlast link (/vb/:publicUrl) 2. Page fetches video bomb data from database 3. View count is incremented (fire and forget) 4. Visitor watches video content 5. Selects donation amount (preset or custom) 6. Chooses one-time or monthly recurring 7. Enters contact information 8. Clicks "Complete Donation" 9. Redirected to Stripe Checkout with:

10. After payment, redirected back to landing page with success/cancel param 11. Toast notification shown based on result

• Amount in cents
• Organization ID
• Donor info (name, email, message)
• Recurring flag
• VideoBlast ID (for attribution)
• Success/cancel URLs

Stripe Integration

Checkout Session Parameters

{
  amount: number,           // In cents
  organizationId: string,   // For donation routing
  donorName: string,
  donorEmail: string,
  message: string,
  isRecurring: boolean,     // Monthly subscription
  VideoBlastId: string,      // For attribution tracking
  successUrl: string,       // /vb/:publicUrl?success=true
  cancelUrl: string,        // /vb/:publicUrl?canceled=true
}

Error Handling

| Scenario | Behavior |

|----------|----------|

| Video bomb not found | Error card: "Video Not Found" |

| Loading | Spinner with "Loading..." text |

| No amount selected | Toast: "Please select or enter a valid amount" |

| Missing contact info | Toast: "Please fill in your contact information" |

| Checkout fails | Toast: "Failed to process donation. Please try again." |

| Payment success | Toast: "Thank you for your donation!" |

| Payment canceled | Toast: "Donation was canceled." |

Validation

Frontend Validations

• Amount > 0
• Valid email format (HTML5 validation)
• Name not empty
• Video bomb must exist and be active

Related Documentation

• 03-VideoBlast-MANAGER.md - Create and manage VideoBlast campaigns
• 00-MARKETING-HUB.md - Marketing Hub overview
• STRIPE-SETUP-GUIDE.md - Payment processor setup
• EDGE-FUNCTIONS.md - Edge function documentation

Synced from IFMmvp-Frontend documentation: pages/marketing/04-VIDEOBLAST-LANDING-PAGE.md