254 lines
10 KiB
JavaScript
254 lines
10 KiB
JavaScript
import React, { useState } from 'react';
|
|
import PublicNavbar from '../components/PublicNavbar';
|
|
import PublicFooter from '../components/PublicFooter';
|
|
import { Button } from '../components/ui/button';
|
|
import { Card } from '../components/ui/card';
|
|
import { Input } from '../components/ui/input';
|
|
import { Label } from '../components/ui/label';
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from '../components/ui/dialog';
|
|
import { CreditCard, Mail, Heart, Loader2 } from 'lucide-react';
|
|
import api from '../utils/api';
|
|
import { toast } from 'sonner';
|
|
|
|
const Donate = () => {
|
|
const loafHearts = `${process.env.PUBLIC_URL}/loaf-hearts.png`;
|
|
const zelleLogo = `${process.env.PUBLIC_URL}/zelle-logo.png`;
|
|
|
|
const [customAmountDialogOpen, setCustomAmountDialogOpen] = useState(false);
|
|
const [customAmount, setCustomAmount] = useState('');
|
|
const [processingAmount, setProcessingAmount] = useState(null);
|
|
|
|
const handleDonateAmount = async (amountCents) => {
|
|
setProcessingAmount(amountCents);
|
|
try {
|
|
const response = await api.post('/donations/checkout', {
|
|
amount_cents: amountCents
|
|
});
|
|
|
|
// Redirect to Stripe Checkout
|
|
window.location.href = response.data.checkout_url;
|
|
} catch (error) {
|
|
console.error('Failed to process donation:', error);
|
|
toast.error(error.response?.data?.detail || 'Failed to process donation. Please try again.');
|
|
setProcessingAmount(null);
|
|
}
|
|
};
|
|
|
|
const handleCustomDonate = () => {
|
|
const amount = parseFloat(customAmount);
|
|
|
|
if (!customAmount || isNaN(amount) || amount < 1) {
|
|
toast.error('Please enter a valid amount (minimum $1.00)');
|
|
return;
|
|
}
|
|
|
|
const amountCents = Math.round(amount * 100);
|
|
setCustomAmountDialogOpen(false);
|
|
handleDonateAmount(amountCents);
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen">
|
|
<PublicNavbar />
|
|
|
|
<main className="bg-gradient-to-bl from-[#F9FAFB] to-[#DDD8EB] px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 py-8 sm:py-10 md:py-12">
|
|
{/* Hero Section */}
|
|
<section className="py-12">
|
|
<div className="max-w-4xl mx-auto text-center h-full">
|
|
<div className="flex justify-center mb-4">
|
|
<img src={loafHearts} alt="Hearts" className="w-32 h-auto" onError={(e) => e.target.style.display = 'none'} />
|
|
</div>
|
|
<h1 className="text-3xl sm:text-4xl md:text-5xl font-bold text-[#48286e] mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
Donate
|
|
</h1>
|
|
<p className="text-xl text-[#48286e] font-medium" style={{ fontFamily: "'Poppins', sans-serif" }}>
|
|
We really appreciate your donations. You can make your donation online
|
|
or send a check by mail.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Columns */}
|
|
<div className="py-12">
|
|
<div className='grid grid-cols-1 items-stretch lg:grid-cols-[2fr_1fr] gap-8 max-h-[450px]'>
|
|
|
|
{/* Donation Amount Buttons */}
|
|
<section className="flex flex-col h-full">
|
|
<div className="mx-auto flex-1 w-full h-full">
|
|
<Card className="p-8 bg-white rounded-3xl w-full h-full content-center">
|
|
<div className="flex items-center gap-4 mb-6">
|
|
<CreditCard className="size-24 text-[#664fa3]" />
|
|
<h2 className="text-3xl font-bold text-[#48286e]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
Select Your Donation Amount
|
|
</h2>
|
|
</div>
|
|
|
|
{/* Donation Buttons Grid */}
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
|
|
{[25, 50, 100, 250].map(amount => (
|
|
<Button
|
|
key={amount}
|
|
onClick={() => handleDonateAmount(amount * 100)}
|
|
disabled={processingAmount === amount * 100}
|
|
className="bg-[#664fa3] hover:bg-[#48286e] text-white text-xl py-8 rounded-full disabled:opacity-50"
|
|
>
|
|
{processingAmount === amount * 100 ? (
|
|
<Loader2 className="h-6 w-6 animate-spin" />
|
|
) : (
|
|
`$${amount}`
|
|
)}
|
|
</Button>
|
|
))}
|
|
</div>
|
|
|
|
{/* Custom Amount Button */}
|
|
<Button
|
|
onClick={() => setCustomAmountDialogOpen(true)}
|
|
disabled={processingAmount !== null}
|
|
className="w-full bg-[#664fa3] hover:bg-[#48286e] text-white text-xl py-8 rounded-full flex items-center justify-center gap-2"
|
|
>
|
|
<Heart className="h-6 w-6" />
|
|
Donate Any Amount
|
|
</Button>
|
|
|
|
<p className="text-sm text-[#664fa3] text-center mt-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
Secure donation processing powered by Stripe
|
|
</p>
|
|
</Card>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Alternative Payment Methods */}
|
|
<section className="flex flex-col">
|
|
<div className="max-w-6xl mx-auto w-full">
|
|
<div className="flex flex-col gap-8 w-full">
|
|
{/* Mail Check */}
|
|
<Card className="p-8 bg-white rounded-3xl flex gap-4 items-center flex-1">
|
|
<Mail className="size-24 text-[#664fa3]" />
|
|
|
|
<div>
|
|
<h3 className="text-2xl font-bold text-[#48286e] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
Mail a Check
|
|
</h3>
|
|
<p className="text-lg text-[#48286e] leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
Our mailing address for checks:<br />
|
|
<span className="font-semibold">LOAF</span><br />
|
|
P.O. Box 7207<br />
|
|
Houston, Texas 77248-7207
|
|
</p>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Zelle */}
|
|
<Card className="p-8 bg-white rounded-3xl flex gap-4 items-center flex-1">
|
|
<div className="w-44">
|
|
<img src={zelleLogo} alt="Zelle" className=" w-32" onError={(e) => e.target.style.display = 'none'} />
|
|
</div>
|
|
|
|
<div>
|
|
<h3 className="text-2xl font-bold text-[#48286e] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
Pay with Zelle
|
|
</h3>
|
|
<p className="text-lg text-[#48286e] leading-relaxed mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
If your bank allows the use of Zelle, please feel free to send money to:
|
|
</p>
|
|
<a href="mailto:LOAFHoustonTX@gmail.com"
|
|
className="text-[#664fa3] text-lg font-bold underline hover:text-[#48286e] transition-colors"
|
|
style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
LOAFHoustonTX@gmail.com
|
|
</a>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
</div>
|
|
{/* Columns end */}
|
|
</main>
|
|
|
|
<PublicFooter />
|
|
|
|
{/* Custom Amount Dialog */}
|
|
<Dialog open={customAmountDialogOpen} onOpenChange={setCustomAmountDialogOpen}>
|
|
<DialogContent className="sm:max-w-[450px] bg-white rounded-3xl">
|
|
<DialogHeader>
|
|
<DialogTitle className="text-2xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
Enter Donation Amount
|
|
</DialogTitle>
|
|
<DialogDescription className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
Choose how much you'd like to donate to support our community
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<div className="space-y-4 py-4">
|
|
<div>
|
|
<Label htmlFor="customAmount" className="text-[#422268] font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>
|
|
Amount (USD)
|
|
</Label>
|
|
<div className="relative mt-2">
|
|
<span className="absolute left-4 top-1/2 transform -translate-y-1/2 text-[#664fa3] text-xl font-semibold">
|
|
$
|
|
</span>
|
|
<Input
|
|
id="customAmount"
|
|
type="number"
|
|
step="0.01"
|
|
min="1.00"
|
|
value={customAmount}
|
|
onChange={(e) => setCustomAmount(e.target.value)}
|
|
placeholder="50.00"
|
|
className="pl-10 h-14 text-xl border-2 border-[#ddd8eb] focus:border-[#664fa3] rounded-xl"
|
|
onKeyPress={(e) => {
|
|
if (e.key === 'Enter') {
|
|
handleCustomDonate();
|
|
}
|
|
}}
|
|
/>
|
|
</div>
|
|
<p className="text-sm text-[#664fa3] mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
Minimum donation: $1.00
|
|
</p>
|
|
</div>
|
|
|
|
<div className="bg-[#f1eef9] rounded-lg p-4">
|
|
<p className="text-sm text-[#422268] text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
|
<strong>Thank you for supporting LOAF!</strong><br />
|
|
Your donation helps us continue our mission and provide meaningful experiences for our community.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<DialogFooter className="gap-2">
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
onClick={() => setCustomAmountDialogOpen(false)}
|
|
className="rounded-full border-2 border-[#ddd8eb]"
|
|
>
|
|
Cancel
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
onClick={handleCustomDonate}
|
|
className="bg-[#664fa3] text-white hover:bg-[#48286e] rounded-full"
|
|
>
|
|
Continue to Payment
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Donate;
|