Donation page update and Subscription update on Admin Dashboard
This commit is contained in:
Koncept Kit
@@ -1,14 +1,59 @@
|
||||
import React from 'react';
|
||||
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 { CreditCard, Mail } from 'lucide-react';
|
||||
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 bg-white">
|
||||
<PublicNavbar />
|
||||
@@ -44,22 +89,33 @@ const Donate = () => {
|
||||
{/* 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}
|
||||
className="bg-[#664fa3] hover:bg-[#48286e] text-white text-xl py-8 rounded-full"
|
||||
disabled>
|
||||
${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 className="w-full bg-[#664fa3] hover:bg-[#48286e] text-white text-xl py-8 rounded-full"
|
||||
disabled>
|
||||
<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-[#48286e] text-center mt-4 opacity-75" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
Online donations coming soon
|
||||
<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>
|
||||
@@ -106,6 +162,76 @@ const Donate = () => {
|
||||
</main>
|
||||
|
||||
<PublicFooter />
|
||||
|
||||
{/* Custom Amount Dialog */}
|
||||
<Dialog open={customAmountDialogOpen} onOpenChange={setCustomAmountDialogOpen}>
|
||||
<DialogContent className="sm:max-w-[450px] bg-white rounded-2xl">
|
||||
<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>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user