feat: micro-learning module with seed data
- Add Course and Module models to Prisma schema - Create seed-learn.json with Daily Fiqh for Beginners (5 modules) - Create seed-learn.js with Hermes patch (strip id/courseId from create) - Add /learn page with course listing - Add /learn/[courseSlug]/[moduleId] page with content + quiz - Quiz data stored as JSON string per module - Content rendered as markdown with Key Concept, Details, Reflection, Action Step sections TODO: - Add audio player component for listen toggle - Add progress tracking per user - Add actual quiz scoring/validation - Connect to TTS pipeline for audio generation
This commit is contained in:
wmj2024
@@ -0,0 +1,169 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, Suspense } from 'react'
|
||||
import { useAuth } from '@/lib/AuthContext'
|
||||
import { useRouter, useSearchParams } from 'next/navigation'
|
||||
import { Crown, Zap, Check, Loader2 } from 'lucide-react'
|
||||
|
||||
const TIERS = [
|
||||
{
|
||||
name: 'Free',
|
||||
price: '$0',
|
||||
period: 'forever',
|
||||
priceId: null,
|
||||
features: [
|
||||
'Access to Souq marketplace',
|
||||
'Nur AI coaching (basic)',
|
||||
'Forum access',
|
||||
'FLH wallet & cashouts',
|
||||
],
|
||||
cta: 'Get Started',
|
||||
href: '/souq',
|
||||
highlighted: false,
|
||||
icon: Zap,
|
||||
},
|
||||
{
|
||||
name: 'Premium',
|
||||
price: '$5',
|
||||
period: '/month',
|
||||
priceId: 'price_premium_monthly',
|
||||
features: [
|
||||
'Everything in Free',
|
||||
'Nur AI unlimited coaching',
|
||||
'Scholar personas (Al-Ghazali, Ibn Abbas, Rabia)',
|
||||
'Priority support',
|
||||
],
|
||||
cta: 'Subscribe',
|
||||
highlighted: true,
|
||||
icon: Crown,
|
||||
},
|
||||
{
|
||||
name: 'Pro',
|
||||
price: '$20',
|
||||
period: '/month',
|
||||
priceId: 'price_pro_monthly',
|
||||
features: [
|
||||
'Everything in Premium',
|
||||
'Early access to new features',
|
||||
'Custom integrations',
|
||||
'Direct line to the team',
|
||||
],
|
||||
cta: 'Subscribe',
|
||||
highlighted: false,
|
||||
icon: Crown,
|
||||
},
|
||||
]
|
||||
|
||||
function UpgradeContent() {
|
||||
const { token, loading: authLoading } = useAuth()
|
||||
const router = useRouter()
|
||||
const searchParams = useSearchParams()
|
||||
|
||||
useEffect(() => {
|
||||
if (!authLoading && !token) router.push('/login')
|
||||
}, [token, authLoading, router])
|
||||
|
||||
useEffect(() => {
|
||||
const upgrade = searchParams.get('upgrade')
|
||||
const canceled = searchParams.get('canceled')
|
||||
if (upgrade === 'success') {
|
||||
alert('Welcome to Premium! Your account has been upgraded.')
|
||||
router.replace('/upgrade')
|
||||
} else if (canceled === 'true') {
|
||||
alert('Checkout canceled. Please try again if you changed your mind.')
|
||||
router.replace('/upgrade')
|
||||
}
|
||||
}, [searchParams, router])
|
||||
|
||||
const handleSubscribe = async (priceId: string) => {
|
||||
if (!token) return
|
||||
try {
|
||||
const res = await fetch('/api/upgrade/create-checkout', {
|
||||
method: 'POST',
|
||||
headers: { 'Authorization': `Bearer ${token}`, 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ priceId }),
|
||||
})
|
||||
const data = await res.json()
|
||||
if (res.ok && data.url) {
|
||||
window.location.href = data.url
|
||||
} else {
|
||||
alert(data.error || 'Failed to start checkout')
|
||||
}
|
||||
} catch {
|
||||
alert('Something went wrong. Please try again.')
|
||||
}
|
||||
}
|
||||
|
||||
if (authLoading) return <div className="p-8 text-center text-gray-500">Loading...</div>
|
||||
if (!token) return null
|
||||
|
||||
return (
|
||||
<div className="max-w-6xl mx-auto p-4 sm:p-6 space-y-8">
|
||||
<div className="text-center space-y-2">
|
||||
<h1 className="text-3xl font-bold text-[#D4AF37]">Upgrade Your Experience</h1>
|
||||
<p className="text-gray-400">Choose the plan that fits your journey</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 items-start">
|
||||
{TIERS.map((tier) => {
|
||||
const Icon = tier.icon
|
||||
return (
|
||||
<div
|
||||
key={tier.name}
|
||||
className={`relative rounded-xl p-6 space-y-5 transition ${
|
||||
tier.highlighted
|
||||
? 'bg-gradient-to-b from-[#D4AF37]/10 to-[#111118] border-2 border-[#D4AF37] shadow-lg shadow-[#D4AF37]/5 scale-105'
|
||||
: 'bg-[#111118] border border-gray-800 hover:border-gray-700'
|
||||
}`}
|
||||
>
|
||||
{tier.highlighted && (
|
||||
<div className="absolute -top-3 left-1/2 -translate-x-1/2 bg-[#D4AF37] text-[#0a0a0f] text-xs font-bold px-3 py-1 rounded-full">
|
||||
BEST VALUE
|
||||
</div>
|
||||
)}
|
||||
<div className="text-center space-y-2">
|
||||
<Icon size={32} className={tier.highlighted ? 'text-[#D4AF37] mx-auto' : 'text-gray-500 mx-auto'} />
|
||||
<h2 className="text-xl font-bold">{tier.name}</h2>
|
||||
<div>
|
||||
<span className="text-3xl font-bold">{tier.price}</span>
|
||||
<span className="text-gray-500 text-sm">{tier.period}</span>
|
||||
</div>
|
||||
</div>
|
||||
<ul className="space-y-3">
|
||||
{tier.features.map((f) => (
|
||||
<li key={f} className="flex items-start gap-2 text-sm text-gray-300">
|
||||
<Check size={16} className="text-[#D4AF37] mt-0.5 shrink-0" />
|
||||
<span>{f}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
{tier.priceId ? (
|
||||
<button
|
||||
onClick={() => handleSubscribe(tier.priceId!)}
|
||||
className="w-full bg-[#D4AF37] text-[#0a0a0f] py-2.5 rounded-lg font-bold hover:bg-[#C9A84C] transition flex items-center justify-center gap-2"
|
||||
>
|
||||
<Loader2 size={16} className="animate-spin hidden" />
|
||||
{tier.cta}
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
onClick={() => router.push(tier.href)}
|
||||
className="w-full border border-gray-700 text-gray-300 py-2.5 rounded-lg font-semibold hover:bg-gray-800 transition"
|
||||
>
|
||||
{tier.cta}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function UpgradePage() {
|
||||
return (
|
||||
<Suspense fallback={<div className="p-8 text-center text-gray-500">Loading...</div>}>
|
||||
<UpgradeContent />
|
||||
</Suspense>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user