andika/membership-fe
3
1
Fork 1
Code Issues 17 Pull Requests Actions Packages Projects Releases Wiki Activity

fix typo

Browse Source
This commit is contained in:
kayela
2026-01-12 20:37:38 -06:00
parent 7694532d53
commit 9c2d516f9d
74 changed files with 1842 additions and 1842 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
src/pages/Plans.js
View File

@@ -214,30 +214,30 @@ const Plans = () => {
<div className="max-w-7xl mx-auto px-6 py-12">
{/* Header */}
<div className="mb-12 text-center">
<h1 className="text-4xl md:text-5xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
<h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
Membership Plans
</h1>
<p className="text-lg text-var(--purple-lavender) max-w-2xl mx-auto" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-lg text-[var(--purple-lavender)] max-w-2xl mx-auto" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Choose the membership plan that works best for you and become part of our vibrant community.
</p>
</div>
{/* Status Banner */}
{statusInfo && statusInfo.title && (
<Card className="max-w-3xl mx-auto mb-8 p-6 bg-gradient-to-r from-var(--lavender-300) to-var(--neutral-800)/30 border-2 border-var(--purple-lavender)">
<Card className="max-w-3xl mx-auto mb-8 p-6 bg-gradient-to-r from-[var(--lavender-300)] to-[var(--neutral-800)]/30 border-2 border-[var(--purple-lavender)]">
<div className="flex items-start gap-4">
<AlertCircle className="h-6 w-6 text-var(--purple-lavender) flex-shrink-0 mt-1" />
<AlertCircle className="h-6 w-6 text-[var(--purple-lavender)] flex-shrink-0 mt-1" />
<div className="flex-1">
<h3 className="text-xl font-semibold text-var(--purple-ink) mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
<h3 className="text-xl font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
{statusInfo.title}
</h3>
<p className="text-var(--purple-lavender) mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-[var(--purple-lavender)] mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{statusInfo.message}
</p>
{statusInfo.action && statusInfo.actionLink && (
<Button
onClick={() => navigate(statusInfo.actionLink)}
className="bg-var(--purple-lavender) text-white hover:bg-var(--purple-ink) rounded-full"
className="bg-[var(--purple-lavender)] text-white hover:bg-[var(--purple-ink)] rounded-full"
>
{statusInfo.action}
</Button>
@@ -249,8 +249,8 @@ const Plans = () => {
{loading ? (
<div className="text-center py-20">
<Loader2 className="h-12 w-12 text-var(--purple-lavender) mx-auto mb-4 animate-spin" />
<p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading plans...</p>
<Loader2 className="h-12 w-12 text-[var(--purple-lavender)] mx-auto mb-4 animate-spin" />
<p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading plans...</p>
</div>
) : plans.length > 0 ? (
<div className={`grid gap-6 sm:gap-8 mx-auto ${plans.length === 1
@@ -266,19 +266,19 @@ const Plans = () => {
return (
<Card
key={plan.id}
className="p-8 bg-background rounded-2xl border-2 border-var(--neutral-800) hover:border-var(--purple-lavender) hover:shadow-xl transition-all"
className="p-8 bg-background rounded-2xl border-2 border-[var(--neutral-800)] hover:border-[var(--purple-lavender)] hover:shadow-xl transition-all"
data-testid={`plan-card-${plan.id}`}
>
{/* Plan Header */}
<div className="text-center mb-6">
<div className="bg-var(--neutral-800)/20 p-4 rounded-full w-16 h-16 mx-auto mb-4 flex items-center justify-center">
<CreditCard className="h-8 w-8 text-var(--purple-lavender)" />
<div className="bg-[var(--neutral-800)]/20 p-4 rounded-full w-16 h-16 mx-auto mb-4 flex items-center justify-center">
<CreditCard className="h-8 w-8 text-[var(--purple-lavender)]" />
</div>
<h2 className="text-2xl font-semibold text-var(--purple-ink) mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
<h2 className="text-2xl font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
{plan.name}
</h2>
{plan.description && (
<p className="text-sm text-var(--purple-lavender) mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-sm text-[var(--purple-lavender)] mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{plan.description}
</p>
)}
@@ -286,22 +286,22 @@ const Plans = () => {
{/* Pricing */}
<div className="text-center mb-8">
<div className="text-sm text-var(--purple-lavender) mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<div className="text-sm text-[var(--purple-lavender)] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Starting at
</div>
<div className="text-2xl sm:text-3xl md:text-4xl font-bold text-var(--purple-ink) mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
<div className="text-2xl sm:text-3xl md:text-4xl font-bold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
{formatPrice(minimumPrice)}
</div>
{suggestedPrice > minimumPrice && (
<div className="text-sm text-var(--purple-lavender) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<div className="text-sm text-[var(--purple-lavender)] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Suggested: {formatPrice(suggestedPrice)}
</div>
)}
<p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{getBillingCycleLabel(plan.billing_cycle)}
</p>
{plan.allow_donation && (
<div className="mt-2 flex items-center justify-center gap-1 text-xs text-var(--orange-light)">
<div className="mt-2 flex items-center justify-center gap-1 text-xs text-[var(--orange-light)]">
<Heart className="h-3 w-3" />
<span>Donations welcome</span>
</div>
@@ -311,20 +311,20 @@ const Plans = () => {
{/* Features */}
<div className="space-y-3 mb-8">
<div className="flex items-start gap-3">
<CheckCircle className="h-5 w-5 text-var(--green-light) flex-shrink-0 mt-0.5" />
<span className="text-sm text-var(--purple-ink)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Access to all member events</span>
<CheckCircle className="h-5 w-5 text-[var(--green-light)] flex-shrink-0 mt-0.5" />
<span className="text-sm text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Access to all member events</span>
</div>
<div className="flex items-start gap-3">
<CheckCircle className="h-5 w-5 text-var(--green-light) flex-shrink-0 mt-0.5" />
<span className="text-sm text-var(--purple-ink)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Community directory access</span>
<CheckCircle className="h-5 w-5 text-[var(--green-light)] flex-shrink-0 mt-0.5" />
<span className="text-sm text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Community directory access</span>
</div>
<div className="flex items-start gap-3">
<CheckCircle className="h-5 w-5 text-var(--green-light) flex-shrink-0 mt-0.5" />
<span className="text-sm text-var(--purple-ink)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Exclusive member benefits</span>
<CheckCircle className="h-5 w-5 text-[var(--green-light)] flex-shrink-0 mt-0.5" />
<span className="text-sm text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Exclusive member benefits</span>
</div>
<div className="flex items-start gap-3">
<CheckCircle className="h-5 w-5 text-var(--green-light) flex-shrink-0 mt-0.5" />
<span className="text-sm text-var(--purple-ink)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Newsletter subscription</span>
<CheckCircle className="h-5 w-5 text-[var(--green-light)] flex-shrink-0 mt-0.5" />
<span className="text-sm text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Newsletter subscription</span>
</div>
</div>
@@ -332,7 +332,7 @@ const Plans = () => {
<Button
onClick={() => handleSelectPlan(plan)}
disabled={processingPlanId === plan.id || (statusInfo && !statusInfo.canSubscribe)}
className="w-full bg-var(--neutral-800) text-var(--purple-ink) hover:bg-background rounded-full py-6 text-lg font-semibold disabled:opacity-50 disabled:cursor-not-allowed"
className="w-full bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background rounded-full py-6 text-lg font-semibold disabled:opacity-50 disabled:cursor-not-allowed"
data-testid={`subscribe-button-${plan.id}`}
>
{processingPlanId === plan.id ? (
@@ -352,11 +352,11 @@ const Plans = () => {
</div>
) : (
<div className="text-center py-20">
<CreditCard className="h-20 w-20 text-var(--neutral-800) mx-auto mb-6" />
<h3 className="text-2xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
<CreditCard className="h-20 w-20 text-[var(--neutral-800)] mx-auto mb-6" />
<h3 className="text-2xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
No Plans Available
</h3>
<p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Membership plans are not currently available. Please check back later!
</p>
</div>
@@ -364,17 +364,17 @@ const Plans = () => {
{/* Info Section */}
<div className="mt-16 max-w-3xl mx-auto">
<Card className="p-8 bg-gradient-to-br from-var(--neutral-800)/20 to-var(--lavender-300)/20 rounded-2xl border border-var(--neutral-800)">
<h3 className="text-xl font-semibold text-var(--purple-ink) mb-4 text-center" style={{ fontFamily: "'Inter', sans-serif" }}>
<Card className="p-8 bg-gradient-to-br from-[var(--neutral-800)]/20 to-[var(--lavender-300)]/20 rounded-2xl border border-[var(--neutral-800)]">
<h3 className="text-xl font-semibold text-[var(--purple-ink)] mb-4 text-center" style={{ fontFamily: "'Inter', sans-serif" }}>
Need Help Choosing?
</h3>
<p className="text-var(--purple-lavender) text-center mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-[var(--purple-lavender)] text-center mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
If you have any questions about our membership plans or need assistance, please contact us.
</p>
<div className="text-center">
<a
href="mailto:support@loaf.org"
className="text-var(--orange-light) hover:text-var(--purple-lavender) font-medium"
className="text-[var(--orange-light)] hover:text-[var(--purple-lavender)] font-medium"
>
support@loaf.org
</a>
@@ -387,10 +387,10 @@ const Plans = () => {
<Dialog open={amountDialogOpen} onOpenChange={setAmountDialogOpen}>
<DialogContent className="sm:max-w-[500px]">
<DialogHeader>
<DialogTitle className="text-2xl text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
<DialogTitle className="text-2xl text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
Choose Your Amount
</DialogTitle>
<DialogDescription className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<DialogDescription className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{selectedPlan?.name} - {getBillingCycleLabel(selectedPlan?.billing_cycle)}
</DialogDescription>
</DialogHeader>
@@ -398,11 +398,11 @@ const Plans = () => {
<div className="space-y-6">
{/* Amount Input */}
<div>
<Label htmlFor="amount" className="text-var(--purple-ink)">
<Label htmlFor="amount" className="text-[var(--purple-ink)]">
Amount (USD) *
</Label>
<div className="relative mt-2">
<span className="absolute left-4 top-1/2 transform -translate-y-1/2 text-var(--purple-lavender) text-lg font-semibold">
<span className="absolute left-4 top-1/2 transform -translate-y-1/2 text-[var(--purple-lavender)] text-lg font-semibold">
$
</span>
<Input
@@ -412,25 +412,25 @@ const Plans = () => {
min={selectedPlan ? (selectedPlan.minimum_price_cents / 100).toFixed(2) : "30.00"}
value={amountInput}
onChange={(e) => setAmountInput(e.target.value)}
className="pl-8 h-14 text-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
className="pl-8 h-14 text-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
placeholder="50.00"
/>
</div>
<p className="text-sm text-var(--purple-lavender) mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<p className="text-sm text-[var(--purple-lavender)] mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Minimum: {selectedPlan ? formatPrice(selectedPlan.minimum_price_cents || 3000) : '$30.00'}
</p>
</div>
{/* Breakdown Display */}
{breakdown && breakdown.total >= breakdown.base && (
<Card className="p-4 bg-var(--lavender-400) border border-var(--neutral-800)">
<Card className="p-4 bg-[var(--lavender-400)] border border-[var(--neutral-800)]">
<div className="space-y-2 text-sm" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<div className="flex justify-between text-var(--purple-ink)">
<div className="flex justify-between text-[var(--purple-ink)]">
<span>Membership Fee:</span>
<span className="font-semibold">{formatPrice(breakdown.base)}</span>
</div>
{breakdown.donation > 0 && (
<div className="flex justify-between text-var(--orange-light)">
<div className="flex justify-between text-[var(--orange-light)]">
<span className="flex items-center gap-1">
<Heart className="h-4 w-4" />
Additional Donation:
@@ -438,7 +438,7 @@ const Plans = () => {
<span className="font-semibold">{formatPrice(breakdown.donation)}</span>
</div>
)}
<div className="flex justify-between text-var(--purple-ink) font-bold text-base pt-2 border-t border-var(--neutral-800)">
<div className="flex justify-between text-[var(--purple-ink)] font-bold text-base pt-2 border-t border-[var(--neutral-800)]">
<span>Total:</span>
<span>{formatPrice(breakdown.total)}</span>
</div>
@@ -448,8 +448,8 @@ const Plans = () => {
{/* Donation Message */}
{selectedPlan?.allow_donation && (
<div className="bg-var(--neutral-800)/20 rounded-lg p-4">
<p className="text-sm text-var(--purple-ink) text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<div className="bg-[var(--neutral-800)]/20 rounded-lg p-4">
<p className="text-sm text-[var(--purple-ink)] text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<strong>Thank you for supporting our community!</strong><br />
Your donation helps us continue our mission and provide meaningful experiences for all members.
</p>
@@ -469,7 +469,7 @@ const Plans = () => {
<Button
type="button"
onClick={handleCheckout}
className="flex-1 bg-var(--neutral-800) text-var(--purple-ink) hover:bg-background"
className="flex-1 bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background"
>
Continue to Checkout
</Button>