feat: implement AI chat with vector search and random loading messages
Major Features: - ✅ AI chat with Azure OpenAI GPT-4o integration - ✅ Vector search across Bible versions (ASV English, RVA 1909 Spanish) - ✅ Multi-language support with automatic English fallback - ✅ Bible version citations in responses [ASV] [RVA 1909] - ✅ Random Bible-themed loading messages (5 variants) - ✅ Safe build script with memory guardrails - ✅ 8GB swap memory for build safety - ✅ Stripe donation integration (multiple payment methods) AI Chat Improvements: - Implement vector search with 1536-dim embeddings (Azure text-embedding-ada-002) - Search all Bible versions in user's language, fallback to English - Cite Bible versions properly in AI responses - Add 5 random loading messages: "Searching the Scriptures...", etc. - Fix Ollama conflict (disabled to use Azure OpenAI exclusively) - Optimize hybrid search queries for actual table schema Build & Infrastructure: - Create safe-build.sh script with memory monitoring (prevents server crashes) - Add 8GB swap memory for emergency relief - Document build process in BUILD_GUIDE.md - Set Node.js memory limits (4GB max during builds) Database: - Clean up 115 old vector tables with wrong dimensions - Keep only 2 tables with correct 1536-dim embeddings - Add Stripe schema for donations and subscriptions Documentation: - AI_CHAT_FINAL_STATUS.md - Complete implementation status - AI_CHAT_IMPLEMENTATION_COMPLETE.md - Technical details - BUILD_GUIDE.md - Safe building guide with guardrails - CHAT_LOADING_MESSAGES.md - Loading messages implementation - STRIPE_IMPLEMENTATION_COMPLETE.md - Stripe integration docs - STRIPE_SETUP_GUIDE.md - Stripe configuration guide 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
395
app/[locale]/donate/page.tsx
Normal file
395
app/[locale]/donate/page.tsx
Normal file
@@ -0,0 +1,395 @@
|
||||
'use client'
|
||||
import { useState } from 'react'
|
||||
import {
|
||||
Container,
|
||||
Typography,
|
||||
Box,
|
||||
Button,
|
||||
TextField,
|
||||
Paper,
|
||||
CircularProgress,
|
||||
Alert,
|
||||
FormControlLabel,
|
||||
Checkbox,
|
||||
ToggleButton,
|
||||
ToggleButtonGroup,
|
||||
Divider,
|
||||
List,
|
||||
ListItem,
|
||||
ListItemIcon,
|
||||
ListItemText,
|
||||
} from '@mui/material'
|
||||
import {
|
||||
Favorite,
|
||||
CheckCircle,
|
||||
Public,
|
||||
Language,
|
||||
CloudOff,
|
||||
Security,
|
||||
} from '@mui/icons-material'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { useLocale } from 'next-intl'
|
||||
import { DONATION_PRESETS } from '@/lib/stripe'
|
||||
|
||||
export default function DonatePage() {
|
||||
const router = useRouter()
|
||||
const locale = useLocale()
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [success, setSuccess] = useState(false)
|
||||
|
||||
// Form state
|
||||
const [selectedAmount, setSelectedAmount] = useState<number | null>(25)
|
||||
const [customAmount, setCustomAmount] = useState('')
|
||||
const [email, setEmail] = useState('')
|
||||
const [name, setName] = useState('')
|
||||
const [message, setMessage] = useState('')
|
||||
const [isAnonymous, setIsAnonymous] = useState(false)
|
||||
const [isRecurring, setIsRecurring] = useState(false)
|
||||
const [recurringInterval, setRecurringInterval] = useState<'month' | 'year'>('month')
|
||||
|
||||
const handleAmountSelect = (amount: number | null) => {
|
||||
setSelectedAmount(amount)
|
||||
setCustomAmount('')
|
||||
}
|
||||
|
||||
const handleCustomAmountChange = (value: string) => {
|
||||
setCustomAmount(value)
|
||||
setSelectedAmount(null)
|
||||
}
|
||||
|
||||
const getAmount = (): number | null => {
|
||||
if (customAmount) {
|
||||
const parsed = parseFloat(customAmount)
|
||||
return isNaN(parsed) ? null : parsed
|
||||
}
|
||||
return selectedAmount
|
||||
}
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
setError(null)
|
||||
|
||||
const amount = getAmount()
|
||||
|
||||
// Validation
|
||||
if (!amount || amount < 1) {
|
||||
setError('Please enter a valid amount (minimum $1)')
|
||||
return
|
||||
}
|
||||
|
||||
if (!email || !email.includes('@')) {
|
||||
setError('Please enter a valid email address')
|
||||
return
|
||||
}
|
||||
|
||||
setLoading(true)
|
||||
|
||||
try {
|
||||
// Create checkout session
|
||||
const response = await fetch('/api/stripe/checkout', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
amount,
|
||||
email,
|
||||
name: isAnonymous ? 'Anonymous' : name,
|
||||
message,
|
||||
isAnonymous,
|
||||
isRecurring,
|
||||
recurringInterval,
|
||||
locale,
|
||||
}),
|
||||
})
|
||||
|
||||
const data = await response.json()
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(data.error || 'Failed to create checkout session')
|
||||
}
|
||||
|
||||
// Redirect to Stripe Checkout
|
||||
if (data.url) {
|
||||
window.location.href = data.url
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Donation error:', err)
|
||||
setError(err instanceof Error ? err.message : 'An error occurred')
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const features = [
|
||||
{
|
||||
icon: <Public />,
|
||||
text: '1,200+ Bible versions in multiple languages',
|
||||
},
|
||||
{
|
||||
icon: <Language />,
|
||||
text: 'Multilingual access for believers worldwide',
|
||||
},
|
||||
{
|
||||
icon: <CloudOff />,
|
||||
text: 'Offline access to Scripture anywhere',
|
||||
},
|
||||
{
|
||||
icon: <Security />,
|
||||
text: 'Complete privacy - no ads or tracking',
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<Box sx={{ bgcolor: 'grey.50', minHeight: '100vh', py: 8 }}>
|
||||
<Container maxWidth="lg">
|
||||
{/* Hero Section */}
|
||||
<Box sx={{ textAlign: 'center', mb: 8 }}>
|
||||
<Favorite sx={{ fontSize: 64, color: 'primary.main', mb: 2 }} />
|
||||
<Typography
|
||||
variant="h2"
|
||||
sx={{
|
||||
fontSize: { xs: '2rem', md: '3rem' },
|
||||
fontWeight: 700,
|
||||
mb: 2,
|
||||
letterSpacing: '-0.02em',
|
||||
}}
|
||||
>
|
||||
Support Biblical Guide
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="h5"
|
||||
sx={{
|
||||
fontSize: { xs: '1.1rem', md: '1.3rem' },
|
||||
color: 'text.secondary',
|
||||
maxWidth: 700,
|
||||
mx: 'auto',
|
||||
}}
|
||||
>
|
||||
Your donation keeps Scripture free and accessible to everyone, everywhere.
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ display: 'flex', gap: 4, flexDirection: { xs: 'column', md: 'row' } }}>
|
||||
{/* Donation Form */}
|
||||
<Box sx={{ flex: { xs: '1 1 100%', md: '1 1 58%' } }}>
|
||||
<Paper elevation={2} sx={{ p: 4 }}>
|
||||
<Typography variant="h5" sx={{ fontWeight: 600, mb: 3 }}>
|
||||
Make a Donation
|
||||
</Typography>
|
||||
|
||||
{error && (
|
||||
<Alert severity="error" sx={{ mb: 3 }}>
|
||||
{error}
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{success && (
|
||||
<Alert severity="success" sx={{ mb: 3 }}>
|
||||
Thank you for your donation!
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleSubmit}>
|
||||
{/* Recurring Donation Toggle */}
|
||||
<Box sx={{ mb: 3 }}>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
checked={isRecurring}
|
||||
onChange={(e) => setIsRecurring(e.target.checked)}
|
||||
/>
|
||||
}
|
||||
label="Make this a recurring donation"
|
||||
/>
|
||||
{isRecurring && (
|
||||
<ToggleButtonGroup
|
||||
value={recurringInterval}
|
||||
exclusive
|
||||
onChange={(_, value) => value && setRecurringInterval(value)}
|
||||
sx={{ mt: 2, width: '100%' }}
|
||||
>
|
||||
<ToggleButton value="month" sx={{ flex: 1 }}>
|
||||
Monthly
|
||||
</ToggleButton>
|
||||
<ToggleButton value="year" sx={{ flex: 1 }}>
|
||||
Yearly
|
||||
</ToggleButton>
|
||||
</ToggleButtonGroup>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{/* Amount Selection */}
|
||||
<Box sx={{ mb: 3 }}>
|
||||
<Typography variant="subtitle1" sx={{ fontWeight: 600, mb: 2 }}>
|
||||
Select Amount (USD)
|
||||
</Typography>
|
||||
<Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 2 }}>
|
||||
{DONATION_PRESETS.map((preset) => (
|
||||
<Button
|
||||
key={preset.amount}
|
||||
fullWidth
|
||||
variant={selectedAmount === preset.amount ? 'contained' : 'outlined'}
|
||||
onClick={() => handleAmountSelect(preset.amount)}
|
||||
sx={{
|
||||
py: 2,
|
||||
fontSize: '1.1rem',
|
||||
fontWeight: 600,
|
||||
}}
|
||||
>
|
||||
{preset.label}
|
||||
</Button>
|
||||
))}
|
||||
</Box>
|
||||
|
||||
<TextField
|
||||
fullWidth
|
||||
label="Custom Amount"
|
||||
type="number"
|
||||
value={customAmount}
|
||||
onChange={(e) => handleCustomAmountChange(e.target.value)}
|
||||
sx={{ mt: 2 }}
|
||||
InputProps={{
|
||||
startAdornment: <Typography sx={{ mr: 1 }}>$</Typography>,
|
||||
}}
|
||||
inputProps={{ min: 1, step: 0.01 }}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Divider sx={{ my: 3 }} />
|
||||
|
||||
{/* Contact Information */}
|
||||
<Typography variant="subtitle1" sx={{ fontWeight: 600, mb: 2 }}>
|
||||
Your Information
|
||||
</Typography>
|
||||
|
||||
<TextField
|
||||
fullWidth
|
||||
label="Email Address"
|
||||
type="email"
|
||||
required
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
sx={{ mb: 2 }}
|
||||
/>
|
||||
|
||||
{!isAnonymous && (
|
||||
<TextField
|
||||
fullWidth
|
||||
label="Name (optional)"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
sx={{ mb: 2 }}
|
||||
/>
|
||||
)}
|
||||
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
checked={isAnonymous}
|
||||
onChange={(e) => setIsAnonymous(e.target.checked)}
|
||||
/>
|
||||
}
|
||||
label="Make this donation anonymous"
|
||||
sx={{ mb: 2 }}
|
||||
/>
|
||||
|
||||
<TextField
|
||||
fullWidth
|
||||
label="Message (optional)"
|
||||
multiline
|
||||
rows={3}
|
||||
value={message}
|
||||
onChange={(e) => setMessage(e.target.value)}
|
||||
placeholder="Share why you're supporting Biblical Guide..."
|
||||
sx={{ mb: 3 }}
|
||||
/>
|
||||
|
||||
{/* Submit Button */}
|
||||
<Button
|
||||
type="submit"
|
||||
variant="contained"
|
||||
size="large"
|
||||
fullWidth
|
||||
disabled={loading}
|
||||
sx={{
|
||||
py: 2,
|
||||
fontSize: '1.1rem',
|
||||
fontWeight: 600,
|
||||
}}
|
||||
>
|
||||
{loading ? (
|
||||
<CircularProgress size={24} color="inherit" />
|
||||
) : (
|
||||
`Donate ${getAmount() ? `$${getAmount()}` : ''}`
|
||||
)}
|
||||
</Button>
|
||||
|
||||
<Typography
|
||||
variant="body2"
|
||||
color="text.secondary"
|
||||
sx={{ mt: 2, textAlign: 'center' }}
|
||||
>
|
||||
Secure payment powered by Stripe
|
||||
</Typography>
|
||||
</form>
|
||||
</Paper>
|
||||
</Box>
|
||||
|
||||
{/* Impact Section */}
|
||||
<Box sx={{ flex: { xs: '1 1 100%', md: '1 1 42%' } }}>
|
||||
<Paper elevation={2} sx={{ p: 4, mb: 3, bgcolor: 'primary.light', color: 'white' }}>
|
||||
<Typography variant="h6" sx={{ fontWeight: 600, mb: 2 }}>
|
||||
Your Impact
|
||||
</Typography>
|
||||
<Typography variant="body1" sx={{ mb: 3, lineHeight: 1.8 }}>
|
||||
Every donation directly supports the servers, translations, and technology that
|
||||
make Biblical Guide possible.
|
||||
</Typography>
|
||||
<List>
|
||||
{features.map((feature, index) => (
|
||||
<ListItem key={index} sx={{ px: 0 }}>
|
||||
<ListItemIcon sx={{ color: 'white', minWidth: 40 }}>
|
||||
<CheckCircle />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary={feature.text} />
|
||||
</ListItem>
|
||||
))}
|
||||
</List>
|
||||
</Paper>
|
||||
|
||||
<Paper elevation={2} sx={{ p: 4 }}>
|
||||
<Typography variant="h6" sx={{ fontWeight: 600, mb: 2 }}>
|
||||
Why Donate?
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mb: 2, lineHeight: 1.8 }}>
|
||||
Biblical Guide is committed to keeping God's Word free and accessible to all.
|
||||
We don't have ads, paywalls, or sell your data.
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary" sx={{ lineHeight: 1.8 }}>
|
||||
When you give, you're not paying for access — you're keeping access open
|
||||
for millions who cannot afford to pay.
|
||||
</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
mt: 3,
|
||||
p: 2,
|
||||
bgcolor: 'primary.light',
|
||||
color: 'white',
|
||||
borderRadius: 2,
|
||||
}}
|
||||
>
|
||||
<Typography variant="body1" sx={{ fontStyle: 'italic', textAlign: 'center' }}>
|
||||
Freely you have received; freely give.
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ textAlign: 'center', mt: 1, fontWeight: 600 }}>
|
||||
— Matthew 10:8
|
||||
</Typography>
|
||||
</Box>
|
||||
</Paper>
|
||||
</Box>
|
||||
</Box>
|
||||
</Container>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
220
app/[locale]/donate/success/page.tsx
Normal file
220
app/[locale]/donate/success/page.tsx
Normal file
@@ -0,0 +1,220 @@
|
||||
'use client'
|
||||
import { useEffect, useState, Suspense } from 'react'
|
||||
import {
|
||||
Container,
|
||||
Typography,
|
||||
Box,
|
||||
Button,
|
||||
Paper,
|
||||
CircularProgress,
|
||||
Alert,
|
||||
} from '@mui/material'
|
||||
import { CheckCircle, Favorite } from '@mui/icons-material'
|
||||
import { useRouter, useSearchParams } from 'next/navigation'
|
||||
import { useLocale } from 'next-intl'
|
||||
|
||||
function SuccessContent() {
|
||||
const router = useRouter()
|
||||
const locale = useLocale()
|
||||
const searchParams = useSearchParams()
|
||||
const sessionId = searchParams.get('session_id')
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
if (!sessionId) {
|
||||
setError('No session ID found')
|
||||
setLoading(false)
|
||||
return
|
||||
}
|
||||
|
||||
// Verify the session was successful
|
||||
const verifySession = async () => {
|
||||
try {
|
||||
// In a real implementation, you might want to verify the session
|
||||
// with a backend API call here
|
||||
setLoading(false)
|
||||
} catch (err) {
|
||||
setError('Failed to verify donation')
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
verifySession()
|
||||
}, [sessionId])
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
minHeight: '100vh',
|
||||
}}
|
||||
>
|
||||
<CircularProgress />
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<Container maxWidth="sm" sx={{ py: 8 }}>
|
||||
<Alert severity="error">{error}</Alert>
|
||||
<Button
|
||||
variant="contained"
|
||||
onClick={() => router.push(`/${locale}/donate`)}
|
||||
sx={{ mt: 3 }}
|
||||
>
|
||||
Go Back
|
||||
</Button>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Box sx={{ bgcolor: 'grey.50', minHeight: '100vh', py: 8 }}>
|
||||
<Container maxWidth="md">
|
||||
<Paper
|
||||
elevation={2}
|
||||
sx={{
|
||||
p: 6,
|
||||
textAlign: 'center',
|
||||
borderTop: '4px solid',
|
||||
borderColor: 'primary.main',
|
||||
}}
|
||||
>
|
||||
<CheckCircle
|
||||
sx={{
|
||||
fontSize: 80,
|
||||
color: 'success.main',
|
||||
mb: 3,
|
||||
}}
|
||||
/>
|
||||
|
||||
<Typography
|
||||
variant="h3"
|
||||
sx={{
|
||||
fontSize: { xs: '2rem', md: '2.5rem' },
|
||||
fontWeight: 700,
|
||||
mb: 2,
|
||||
color: 'primary.main',
|
||||
}}
|
||||
>
|
||||
Thank You for Your Donation!
|
||||
</Typography>
|
||||
|
||||
<Typography
|
||||
variant="h6"
|
||||
sx={{
|
||||
fontSize: { xs: '1.1rem', md: '1.3rem' },
|
||||
color: 'text.secondary',
|
||||
mb: 4,
|
||||
lineHeight: 1.8,
|
||||
}}
|
||||
>
|
||||
Your generous gift helps keep God's Word free and accessible to believers around
|
||||
the world.
|
||||
</Typography>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
bgcolor: 'primary.light',
|
||||
color: 'white',
|
||||
p: 4,
|
||||
borderRadius: 2,
|
||||
mb: 4,
|
||||
}}
|
||||
>
|
||||
<Favorite sx={{ fontSize: 48, mb: 2 }} />
|
||||
<Typography variant="h6" sx={{ fontWeight: 600, mb: 2 }}>
|
||||
Your Impact
|
||||
</Typography>
|
||||
<Typography variant="body1" sx={{ lineHeight: 1.8 }}>
|
||||
Every contribution — big or small — directly supports the servers, translations, and
|
||||
technology that make Biblical Guide possible. You're not just giving to a
|
||||
platform; you're opening doors to Scripture for millions who cannot afford to
|
||||
pay.
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
bgcolor: 'grey.100',
|
||||
p: 3,
|
||||
borderRadius: 2,
|
||||
mb: 4,
|
||||
}}
|
||||
>
|
||||
<Typography variant="body1" sx={{ fontStyle: 'italic', mb: 2 }}>
|
||||
Freely you have received; freely give.
|
||||
</Typography>
|
||||
<Typography variant="body2" sx={{ fontWeight: 600 }}>
|
||||
— Matthew 10:8
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mb: 4 }}>
|
||||
You will receive a confirmation email shortly with your donation receipt.
|
||||
</Typography>
|
||||
|
||||
<Box sx={{ display: 'flex', gap: 2, justifyContent: 'center', flexWrap: 'wrap' }}>
|
||||
<Button
|
||||
variant="contained"
|
||||
size="large"
|
||||
onClick={() => router.push(`/${locale}`)}
|
||||
sx={{
|
||||
px: 4,
|
||||
py: 1.5,
|
||||
}}
|
||||
>
|
||||
Return to Home
|
||||
</Button>
|
||||
<Button
|
||||
variant="outlined"
|
||||
size="large"
|
||||
onClick={() => router.push(`/${locale}/bible`)}
|
||||
sx={{
|
||||
px: 4,
|
||||
py: 1.5,
|
||||
}}
|
||||
>
|
||||
Read the Bible
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<Typography
|
||||
variant="body2"
|
||||
color="text.secondary"
|
||||
sx={{ mt: 4, fontStyle: 'italic' }}
|
||||
>
|
||||
Biblical Guide is a ministry supported by believers like you. Thank you for partnering
|
||||
with us to keep the Gospel free forever.
|
||||
</Typography>
|
||||
</Paper>
|
||||
</Container>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
export default function DonationSuccessPage() {
|
||||
return (
|
||||
<Suspense
|
||||
fallback={
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
minHeight: '100vh',
|
||||
}}
|
||||
>
|
||||
<CircularProgress />
|
||||
</Box>
|
||||
}
|
||||
>
|
||||
<SuccessContent />
|
||||
</Suspense>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user