← back to Dear Bubbe Nextjs
components/PricingScreen.tsx
351 lines
'use client'
import { useState } from 'react'
interface PricingScreenProps {
onSelectPlan: (plan: string) => void
onBack: () => void
}
const plans = [
{
id: 'basic',
name: 'Basic Bubbeleh',
originalPrice: 'FREE',
price: 'FREE',
period: '',
betaPrice: 'FREE BETA',
features: [
'✅ UNLIMITED messages',
'✅ Voice conversations',
'✅ Personalized advice',
'✅ Advanced guilt trips',
'✅ Recipe recommendations',
'✅ Memory of conversations',
'✅ Priority support'
],
betaFeatures: [
'🎉 ALL FEATURES UNLOCKED',
'🚀 Early access to new features',
'💬 Direct feedback to development team',
'🏆 Founding member status',
'💝 Special beta tester badge'
],
color: 'bg-gradient-to-r from-green-500 to-emerald-500',
popular: true,
beta: true
},
{
id: 'pro',
name: 'Pro Schmoozer',
originalPrice: '$9.99',
price: 'FREE',
period: '/month',
betaPrice: 'COMING SOON',
features: [
'UNLIMITED messages',
'Voice conversations',
'Personalized advice',
'Advanced guilt trips',
'Recipe recommendations',
'Memory of conversations',
'Priority support'
],
color: 'bg-gray-400',
popular: false,
disabled: true
},
{
id: 'max',
name: 'Max Mensch',
originalPrice: '$19.99',
price: 'FREE',
period: '/month',
betaPrice: 'COMING SOON',
features: [
'Everything in Pro PLUS:',
'Instant voice responses',
'Video messages from Bubbe',
'Professional guilt trips',
'Dating & career advice',
'Family therapy sessions',
'VIP support'
],
color: 'bg-gray-400',
popular: false,
disabled: true
},
{
id: 'ultra',
name: 'Ultra Meshugana',
originalPrice: '$29.99',
price: 'FREE',
period: '/month',
betaPrice: 'COMING SOON',
features: [
'UNLIMITED everything!',
'Bubbe on demand 24/7',
'Custom personality modes',
'Olympic-level guilt trips',
'Family intervention services',
'Personal matchmaking',
'Direct hotline to Bubbe',
'White glove concierge'
],
color: 'bg-gray-400',
popular: false,
disabled: true
}
]
export default function PricingScreen({ onSelectPlan, onBack }: PricingScreenProps) {
const [selectedPlan, setSelectedPlan] = useState<string | null>(null)
const [showDiscountModal, setShowDiscountModal] = useState(false)
const [email, setEmail] = useState('')
const [discountSent, setDiscountSent] = useState(false)
const handleSelectPlan = (planId: string) => {
setSelectedPlan(planId)
// During beta, only basic plan is available, skip discount modal
onSelectPlan(planId)
}
const sendDiscountCode = async () => {
if (!email) return
// Generate unique discount code
const discountCode = `BUBBE15_${Date.now().toString(36).toUpperCase()}`
try {
// Send discount code to email
await fetch('/api/discount', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
email,
code: discountCode,
plan: selectedPlan
})
})
setDiscountSent(true)
// Proceed after showing success
setTimeout(() => {
onSelectPlan(selectedPlan!)
}, 2000)
} catch (error) {
console.error('Failed to send discount:', error)
// Proceed anyway
onSelectPlan(selectedPlan!)
}
}
return (
<div className="fixed inset-0 bg-gradient-to-br from-amber-50 to-orange-100 overflow-y-auto z-50">
<div className="min-h-screen py-12 px-4">
<div className="max-w-6xl mx-auto">
{/* Header */}
<div className="text-center mb-12">
<div className="inline-block bg-gradient-to-r from-purple-600 to-pink-600 text-white px-6 py-2 rounded-full text-sm font-bold mb-4 animate-pulse">
🚀 BETA TEST PERIOD - ALL FEATURES FREE! 🚀
</div>
<h1 className="text-4xl font-bold text-gray-800 mb-4">
Join the Bubbe Beta Test! 🥯
</h1>
<p className="text-xl text-gray-600 mb-2">
Get ALL premium features FREE during our beta period
</p>
<p className="text-sm text-gray-500">
Price tiers coming after beta testing • Be a founding member!
</p>
</div>
{/* Pricing Cards */}
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
{plans.map((plan) => (
<div
key={plan.id}
className={`relative bg-white rounded-xl shadow-lg overflow-hidden transform transition-all hover:scale-105 ${
selectedPlan === plan.id ? 'ring-4 ring-amber-400' : ''
}`}
>
{plan.beta && (
<div className="absolute top-0 right-0 bg-gradient-to-r from-purple-600 to-pink-600 text-white px-4 py-2 text-sm font-bold rounded-bl-lg animate-pulse">
🎉 BETA ACCESS
</div>
)}
{plan.disabled && (
<div className="absolute inset-0 bg-gray-900/60 rounded-xl flex items-center justify-center z-10">
<div className="bg-white/90 px-6 py-3 rounded-lg">
<p className="text-gray-800 font-bold text-lg">COMING SOON</p>
<p className="text-gray-600 text-sm">After Beta Period</p>
</div>
</div>
)}
<div className={`${plan.disabled ? 'bg-gray-400' : plan.color} text-white p-6`}>
<h3 className="text-2xl font-bold mb-2">{plan.name}</h3>
<div className="flex items-baseline">
{plan.beta ? (
<>
<span className="text-3xl font-bold text-green-300">FREE</span>
<span className="ml-2 text-lg line-through opacity-70">{plan.originalPrice}</span>
</>
) : (
<>
<span className="text-2xl line-through opacity-70">{plan.originalPrice}</span>
<span className="ml-1 text-lg opacity-70">{plan.period}</span>
</>
)}
</div>
{plan.beta && (
<p className="text-sm mt-2 text-yellow-300 font-semibold">Limited Time Beta Access!</p>
)}
</div>
<div className="p-6">
{plan.beta && plan.betaFeatures && (
<div className="mb-4 p-3 bg-gradient-to-r from-purple-50 to-pink-50 rounded-lg border-2 border-purple-200">
<p className="text-xs font-bold text-purple-700 mb-2">BETA EXCLUSIVE:</p>
<ul className="space-y-1">
{plan.betaFeatures.map((feature, index) => (
<li key={index} className="text-xs text-purple-600 font-medium">{feature}</li>
))}
</ul>
</div>
)}
<ul className="space-y-3 mb-6">
{plan.features.map((feature, index) => (
<li key={index} className={`flex items-start ${plan.disabled ? 'opacity-50' : ''}`}>
<span className="text-green-500 mr-2">✓</span>
<span className="text-gray-700 text-sm">{feature}</span>
</li>
))}
</ul>
<button
onClick={() => !plan.disabled && handleSelectPlan(plan.id)}
disabled={plan.disabled}
className={`w-full py-3 rounded-lg font-semibold transition-all ${
plan.beta
? 'bg-gradient-to-r from-green-500 to-emerald-500 text-white hover:from-green-600 hover:to-emerald-600 transform hover:scale-105 shadow-lg'
: plan.disabled
? 'bg-gray-300 text-gray-500 cursor-not-allowed'
: 'bg-gray-200 text-gray-800 hover:bg-gray-300'
}`}
>
{plan.beta ? '🚀 Start FREE Beta!' : plan.disabled ? 'Coming Soon' : 'Select Plan'}
</button>
</div>
</div>
))}
</div>
{/* Beta Information Box */}
<div className="bg-gradient-to-r from-purple-100 to-pink-100 rounded-xl p-6 mb-8 border-2 border-purple-300">
<h3 className="text-xl font-bold text-purple-800 mb-2">🎊 Beta Test Benefits</h3>
<div className="grid md:grid-cols-3 gap-4 text-sm">
<div>
<p className="font-semibold text-purple-700">✅ Everything FREE</p>
<p className="text-gray-700">All premium features unlocked</p>
</div>
<div>
<p className="font-semibold text-purple-700">🏆 Founding Member</p>
<p className="text-gray-700">Special status & future perks</p>
</div>
<div>
<p className="font-semibold text-purple-700">💬 Direct Access</p>
<p className="text-gray-700">Shape Bubbe's development</p>
</div>
</div>
</div>
{/* Bottom Actions */}
<div className="text-center">
<button
onClick={onBack}
className="text-gray-600 hover:text-gray-800 underline"
>
← Back to signup
</button>
<p className="mt-4 text-lg font-semibold text-purple-700">
🎉 Beta period ends soon - Join now for FREE access to all features!
</p>
<p className="mt-2 text-sm text-gray-500">
Regular pricing will apply after beta testing period
</p>
<p className="mt-2 text-xs text-gray-400">
* Bubbe's guilt trips are non-refundable
</p>
</div>
</div>
</div>
{/* Discount Modal */}
{showDiscountModal && (
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-60 px-4">
<div className="bg-white rounded-xl shadow-2xl max-w-md w-full p-6">
{!discountSent ? (
<>
<h2 className="text-2xl font-bold text-gray-800 mb-2">
🎉 Special Offer Just for You!
</h2>
<p className="text-gray-600 mb-4">
Get <span className="font-bold text-amber-600">15% OFF</span> your first month!
</p>
<p className="text-sm text-gray-500 mb-4">
Enter your email to receive your exclusive discount code.
<br />
<span className="text-red-500 font-semibold">⏰ Expires in 24 hours!</span>
</p>
<input
type="email"
placeholder="your@email.com"
value={email}
onChange={(e) => setEmail(e.target.value)}
className="w-full px-4 py-3 border border-gray-300 rounded-lg mb-4 focus:outline-none focus:ring-2 focus:ring-amber-500"
autoFocus
/>
<div className="flex gap-3">
<button
onClick={sendDiscountCode}
disabled={!email}
className="flex-1 bg-amber-500 text-white py-3 rounded-lg font-semibold hover:bg-amber-600 disabled:opacity-50 disabled:cursor-not-allowed"
>
Get My 15% Discount!
</button>
<button
onClick={() => {
setShowDiscountModal(false)
onSelectPlan(selectedPlan!)
}}
className="px-4 py-3 text-gray-500 hover:text-gray-700"
>
Skip
</button>
</div>
</>
) : (
<div className="text-center py-4">
<div className="text-5xl mb-4">✅</div>
<h3 className="text-xl font-bold text-green-600 mb-2">
Discount Code Sent!
</h3>
<p className="text-gray-600">
Check your email for your 15% off code.
</p>
<p className="text-sm text-gray-500 mt-2">
Redirecting to sign up...
</p>
</div>
)}
</div>
</div>
)}
</div>
)
}