tyler
0245aa29cc
Tuxedo buyer path (subagent 2): - src/app/tuxedo/page.tsx: remove duplicate CinematicShowcase render - src/components/storefront/CinematicShowcase.tsx: wire up useCart, Add to Cart button, brand-aware fulfillment - src/app/tuxedo/stops/TuxedoStopsList.tsx: improved empty state with calendar icon + CTAs - src/app/cart/CartClient.tsx: guard against empty cart checkout; 'Cart is Empty' state Billing reconciliation (subagent 3): - src/actions/billing/billing-overview.ts: NEW — single source of truth - src/app/admin/settings/billing/page.tsx: use getBillingOverview - src/app/admin/settings/billing/BillingClientPage.tsx: rewritten to consume BillingOverview (status pill, addons state, removable flags, derived invoice amounts, usage footer) - src/app/admin/page.tsx: use getBillingOverview (aligns dashboard with billing) - src/components/admin/DashboardClient.tsx: 'Active Products' now reads from getBillingOverview - supabase/migrations/203_plan_usage_active_products.sql: get_brand_plan_info counts products as active=true AND deleted_at IS NULL Harvest Reach dedup + audience preview (manual, subagent 4 didn't complete): - src/components/admin/CommunicationsPage.tsx: add initialTab prop - src/app/admin/communications/compose/page.tsx: now renders with initialTab='compose' (single compose experience, no duplicate edit panel) - src/components/admin/HarvestReach/CampaignComposerPage.tsx: always-visible audience preview panel (count + sample emails), loads via previewCampaignAudience action Layout/content consistency + a11y sweep (subagent 5): - src/components/layout/SiteHeader.tsx: Admin link only shows for authenticated admin users - src/components/Providers.tsx: suppress public SiteHeader/Footer for /admin, /cart, /checkout, /wholesale, /water (fixes duplicate headers) - src/app/contact/ContactClientPage.tsx: Phone/Email now use tel:/mailto: links; dynamic year - src/app/blog/page.tsx, changelog, privacy-policy, roadmap, security, terms-and-conditions, waitlist: dynamic year - src/app/admin/wholesale/WholesaleClient.tsx: proper htmlFor/id, type=email/tel, autoComplete - src/app/admin/settings/ai/AIClient.tsx: proper htmlFor/id, required + aria-required - src/app/admin/settings/integrations/IntegrationsClient.tsx: only mask secret fields; add required + aria-required + CredentialField.required type - src/app/admin/water-log/headgates/HeadgatesManager.tsx: htmlFor/id, aria-required - src/components/admin/CreateUserModal.tsx: htmlFor/id, required, aria-required, aria-describedby, autoComplete - src/app/admin/me/AdminMeClient.tsx, products/import, sales/import, water-log/settings, login, brands, tuxedo: a11y polish (ids/required/aria)
427 lines
22 KiB
TypeScript
427 lines
22 KiB
TypeScript
"use client";
|
||
|
||
import { useState, useEffect, useCallback } from "react";
|
||
import Link from "next/link";
|
||
import { useCart } from "@/context/CartContext";
|
||
import StorefrontHeader from "@/components/storefront/StorefrontHeader";
|
||
import StorefrontFooter from "@/components/storefront/StorefrontFooter";
|
||
|
||
type Stop = {
|
||
id: string;
|
||
city: string;
|
||
state: string;
|
||
date: string;
|
||
time: string;
|
||
location: string;
|
||
brand_id: string;
|
||
};
|
||
|
||
export default function CartClient() {
|
||
const {
|
||
cart,
|
||
subtotal,
|
||
selectedStop,
|
||
cartBrandId,
|
||
setSelectedStop,
|
||
increaseQuantity,
|
||
decreaseQuantity,
|
||
removeFromCart,
|
||
} = useCart();
|
||
|
||
const [stops, setStops] = useState<Stop[]>([]);
|
||
const [loadingStops, setLoadingStops] = useState(false);
|
||
const [showStopPicker, setShowStopPicker] = useState(false);
|
||
const [incompatibleItems, setIncompatibleItems] = useState<string[]>([]);
|
||
const [stopBrandMismatch, setStopBrandMismatch] = useState(false);
|
||
const [availabilityError, setAvailabilityError] = useState(false);
|
||
|
||
const hasPickupItems = cart.some((i) => i.fulfillment === "pickup");
|
||
const hasShedPickupItems = cart.some((i) => i.fulfillment === "pickup" && i.pickup_type === "shed");
|
||
const hasStopPickupItems = cart.some((i) => i.fulfillment === "pickup" && i.pickup_type !== "shed");
|
||
|
||
// Check brand mismatch
|
||
useEffect(() => {
|
||
if (selectedStop?.brand_id && cartBrandId && selectedStop.brand_id !== cartBrandId) {
|
||
// eslint-disable-next-line react-hooks/set-state-in-effect
|
||
setStopBrandMismatch(true);
|
||
} else {
|
||
setStopBrandMismatch(false);
|
||
}
|
||
}, [selectedStop, cartBrandId]);
|
||
|
||
// Fetch stops when picker is open
|
||
useEffect(() => {
|
||
if (hasPickupItems && showStopPicker && cartBrandId) {
|
||
// eslint-disable-next-line react-hooks/set-state-in-effect
|
||
setLoadingStops(true);
|
||
fetch(
|
||
`${process.env.NEXT_PUBLIC_SUPABASE_URL}/rest/v1/stops?active=eq.true&brand_id=eq.${cartBrandId}&select=id,city,state,date,time,location,brand_id&order=date`,
|
||
{ headers: { apikey: process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY! } }
|
||
)
|
||
.then((r) => r.json())
|
||
.then((data) => setStops(data ?? []))
|
||
.catch(() => setStops([]))
|
||
.finally(() => setLoadingStops(false));
|
||
}
|
||
}, [hasPickupItems, showStopPicker, cartBrandId]);
|
||
|
||
const handleStopSelect = useCallback((stop: Stop) => {
|
||
setSelectedStop(stop);
|
||
setStopBrandMismatch(false);
|
||
setShowStopPicker(false);
|
||
setAvailabilityError(false);
|
||
setIncompatibleItems([]);
|
||
|
||
if (hasPickupItems) {
|
||
const pickupProductIds = cart.filter((i) => i.fulfillment === "pickup").map((i) => i.id);
|
||
fetch(
|
||
`${process.env.NEXT_PUBLIC_SUPABASE_URL}/rest/v1/rpc/check_stop_product_availability`,
|
||
{
|
||
method: "POST",
|
||
headers: {
|
||
apikey: process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
|
||
"Content-Type": "application/json",
|
||
},
|
||
body: JSON.stringify({ p_stop_id: stop.id, p_product_ids: pickupProductIds }),
|
||
}
|
||
)
|
||
.then((r) => r.json())
|
||
.then((data: { product_id: string; is_available: boolean }[]) => {
|
||
const unavailable = (data ?? [])
|
||
.filter((row) => row.is_available === false)
|
||
.map((row) => row.product_id);
|
||
setIncompatibleItems(unavailable);
|
||
})
|
||
.catch(() => {
|
||
setAvailabilityError(true);
|
||
setIncompatibleItems([]);
|
||
});
|
||
}
|
||
}, [cart, hasPickupItems, setSelectedStop]);
|
||
|
||
const handleCheckoutClick = useCallback(() => {
|
||
if (cart.length === 0) return;
|
||
if (stopBrandMismatch) { setSelectedStop(null); return; }
|
||
if (hasStopPickupItems && !selectedStop) { setShowStopPicker(true); return; }
|
||
if (incompatibleItems.length > 0) { return; }
|
||
window.location.href = "/checkout";
|
||
}, [cart.length, stopBrandMismatch, hasStopPickupItems, selectedStop, incompatibleItems]);
|
||
|
||
return (
|
||
<div className="min-h-screen relative">
|
||
{/* Background */}
|
||
<div className="fixed inset-0 bg-gradient-to-br from-zinc-950 via-zinc-900 to-zinc-950" aria-hidden="true" />
|
||
<div className="fixed inset-0 pointer-events-none" aria-hidden="true">
|
||
<div className="absolute top-0 right-0 w-[500px] h-[500px] bg-emerald-500/10 rounded-full blur-[120px]" />
|
||
</div>
|
||
|
||
<StorefrontHeader brandName="Your Cart" brandSlug="tuxedo" />
|
||
|
||
<main className="px-6 py-12 relative">
|
||
<div className="mx-auto grid max-w-6xl gap-10 lg:grid-cols-[1fr_380px]">
|
||
<div>
|
||
<h1 className="text-4xl font-semibold tracking-tight text-white">Shopping Cart</h1>
|
||
<p className="mt-3 text-zinc-400">Review your products before checkout.</p>
|
||
|
||
{/* Brand mismatch alert */}
|
||
{stopBrandMismatch && (
|
||
<div className="mt-5 glass-card p-5 border border-red-500/20" role="alert">
|
||
<div className="flex items-start gap-4">
|
||
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-red-500/10 border border-red-500/20">
|
||
<svg className="h-5 w-5 text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2} aria-hidden="true">
|
||
<path strokeLinecap="round" strokeLinejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
||
</svg>
|
||
</div>
|
||
<div>
|
||
<p className="font-semibold text-white">Pickup stop is from a different store</p>
|
||
<p className="mt-1 text-sm text-zinc-400">Your cart was updated. Please select a new pickup stop.</p>
|
||
<button
|
||
onClick={() => { setSelectedStop(null); setStopBrandMismatch(false); setShowStopPicker(true); }}
|
||
className="mt-3 rounded-xl bg-red-500 hover:bg-red-400 px-4 py-2 text-sm font-semibold text-white transition-all shadow-lg shadow-red-500/20"
|
||
>
|
||
Choose Correct Stop
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Shed pickup info */}
|
||
{hasShedPickupItems && (
|
||
<div className="mt-5 glass-card p-5 border border-emerald-500/20" role="status">
|
||
<div className="flex items-start gap-4">
|
||
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-emerald-500/10 border border-emerald-500/20">
|
||
<svg className="h-5 w-5 text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2} aria-hidden="true">
|
||
<path strokeLinecap="round" strokeLinejoin="round" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
|
||
</svg>
|
||
</div>
|
||
<div>
|
||
<p className="font-semibold text-white">Shed Pickup</p>
|
||
<p className="mt-1 text-sm text-zinc-400">
|
||
{cart.filter((i) => i.fulfillment === "pickup" && i.pickup_type === "shed").map((i) => i.description || i.name).join(", ")}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Stop picker prompt */}
|
||
{hasStopPickupItems && !selectedStop && !stopBrandMismatch && cartBrandId && (
|
||
<div className="mt-5 glass-card p-5 border border-amber-500/20" role="status">
|
||
<div className="flex items-start gap-4">
|
||
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-amber-500/10 border border-amber-500/20">
|
||
<svg className="h-5 w-5 text-amber-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2} aria-hidden="true">
|
||
<path strokeLinecap="round" strokeLinejoin="round" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
|
||
<path strokeLinecap="round" strokeLinejoin="round" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
|
||
</svg>
|
||
</div>
|
||
<div>
|
||
<p className="font-semibold text-white">Pickup stop needed</p>
|
||
<p className="mt-1 text-sm text-zinc-400">Your cart has pickup items. Select a stop before checkout.</p>
|
||
<button
|
||
onClick={() => setShowStopPicker(true)}
|
||
className="mt-3 rounded-xl bg-gradient-to-r from-amber-500 to-amber-400 hover:from-amber-400 hover:to-amber-300 px-4 py-2 text-sm font-semibold text-white transition-all shadow-lg shadow-amber-500/20"
|
||
aria-label="Choose pickup stop"
|
||
>
|
||
Choose Pickup Stop
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Incompatible items warning */}
|
||
{incompatibleItems.length > 0 && (
|
||
<div className="mt-4 glass-card p-5 border border-red-500/20" role="alert">
|
||
<p className="font-semibold text-white">Some items are not available at this stop:</p>
|
||
<ul className="mt-2 space-y-1" aria-label="Unavailable items">
|
||
{incompatibleItems.map((id) => {
|
||
const item = cart.find((i) => i.id === id);
|
||
return <li key={id} className="text-sm text-zinc-400">• {item?.name}</li>;
|
||
})}
|
||
</ul>
|
||
<p className="mt-2 text-sm text-zinc-500">Please remove these items or choose a different stop.</p>
|
||
</div>
|
||
)}
|
||
|
||
{/* Availability error */}
|
||
{availabilityError && (
|
||
<div className="mt-4 glass-card p-5" role="status">
|
||
<div className="flex items-start gap-3">
|
||
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-amber-500/10 border border-amber-500/20">
|
||
<svg className="h-5 w-5 text-amber-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2} aria-hidden="true">
|
||
<path strokeLinecap="round" strokeLinejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
||
</svg>
|
||
</div>
|
||
<div>
|
||
<p className="font-semibold text-white">Could not verify product availability</p>
|
||
<p className="mt-1 text-sm text-zinc-400">Stop was selected. Checkout will validate product-stop assignment.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Stop picker modal */}
|
||
{showStopPicker && (
|
||
<div
|
||
className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4 pointer-events-none"
|
||
role="dialog"
|
||
aria-modal="true"
|
||
aria-labelledby="stop-picker-title"
|
||
>
|
||
<div className="w-full max-w-sm rounded-2xl glass-strong p-6 shadow-2xl pointer-events-auto border border-white/10">
|
||
<h3 id="stop-picker-title" className="text-xl font-semibold text-white">Choose Pickup Stop</h3>
|
||
<p className="mt-2 text-sm text-zinc-400">Select a stop for your pickup items.</p>
|
||
{loadingStops ? (
|
||
<div className="mt-4 flex items-center justify-center gap-2 py-4" role="status" aria-live="polite">
|
||
<div className="h-5 w-5 animate-spin rounded-full border-2 border-zinc-600 border-t-white" aria-hidden="true" />
|
||
<span className="text-sm text-zinc-400">Loading stops...</span>
|
||
</div>
|
||
) : stops.length === 0 ? (
|
||
<p className="mt-4 text-sm text-zinc-400 text-center">No stops available.</p>
|
||
) : (
|
||
<div className="mt-4 space-y-2">
|
||
{stops.map((stop) => (
|
||
<button
|
||
key={stop.id}
|
||
onClick={() => handleStopSelect(stop)}
|
||
className="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-left hover:bg-white/10 transition-all text-white"
|
||
>
|
||
<p className="font-medium">{stop.city}, {stop.state}</p>
|
||
<p className="mt-0.5 text-sm text-zinc-400">{stop.date} · {stop.time} · {stop.location}</p>
|
||
</button>
|
||
))}
|
||
</div>
|
||
)}
|
||
<button
|
||
onClick={() => setShowStopPicker(false)}
|
||
className="mt-5 w-full text-center text-sm text-zinc-400 hover:text-white transition-colors"
|
||
>
|
||
Cancel
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Cart items */}
|
||
<div className="mt-10 space-y-4">
|
||
{cart.length === 0 ? (
|
||
<div className="glass-card p-8 text-center">
|
||
<p className="text-zinc-500">Your cart is empty.</p>
|
||
<Link href="/" className="mt-4 inline-block text-emerald-400 hover:text-emerald-300 transition-colors">← Continue shopping</Link>
|
||
</div>
|
||
) : (
|
||
cart.map((item) => (
|
||
<article key={item.id} className="glass-card p-6">
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<h2 className="text-base font-semibold text-white">{item.name}</h2>
|
||
<p className="mt-1 text-sm text-zinc-400">
|
||
{item.fulfillment === "pickup" ? (
|
||
<span className="inline-flex items-center gap-1.5">
|
||
<svg className="h-3.5 w-3.5 text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2} aria-hidden="true"><path strokeLinecap="round" strokeLinejoin="round" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" /></svg>
|
||
Pickup
|
||
</span>
|
||
) : (
|
||
<span className="inline-flex items-center gap-1.5">
|
||
<svg className="h-3.5 w-3.5 text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2} aria-hidden="true"><path strokeLinecap="round" strokeLinejoin="round" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" /></svg>
|
||
Shipping
|
||
</span>
|
||
)}
|
||
</p>
|
||
</div>
|
||
<div className="flex items-center gap-3" role="group" aria-label={`Quantity controls for ${item.name}`}>
|
||
<button
|
||
onClick={() => decreaseQuantity(item.id)}
|
||
className="flex h-11 w-11 items-center justify-center rounded-xl bg-white/10 text-white hover:bg-white/20 active:scale-95 transition-all text-xl font-medium"
|
||
aria-label={`Decrease quantity of ${item.name}`}
|
||
>−</button>
|
||
<span className="w-10 text-center font-semibold text-white" aria-label={`Quantity: ${item.quantity}`}>{item.quantity}</span>
|
||
<button
|
||
onClick={() => increaseQuantity(item.id)}
|
||
className="flex h-11 w-11 items-center justify-center rounded-xl bg-emerald-500 text-white hover:bg-emerald-400 active:scale-95 transition-all text-xl font-medium shadow-lg shadow-emerald-500/20"
|
||
aria-label={`Increase quantity of ${item.name}`}
|
||
>+</button>
|
||
</div>
|
||
</div>
|
||
<div className="mt-4 flex items-center justify-between pt-3 border-t border-white/5">
|
||
<p className="text-sm font-semibold text-white" aria-label={`Item total: $${(Number(item.price.replace("$", "")) * item.quantity).toFixed(2)}`}>
|
||
${(Number(item.price.replace("$", "")) * item.quantity).toFixed(2)}
|
||
</p>
|
||
<button
|
||
onClick={() => removeFromCart(item.id)}
|
||
className="text-sm text-zinc-500 hover:text-red-400 transition-colors"
|
||
aria-label={`Remove ${item.name} from cart`}
|
||
>
|
||
Remove
|
||
</button>
|
||
</div>
|
||
</article>
|
||
))
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Order summary sidebar */}
|
||
<aside aria-label="Order summary">
|
||
<div className="glass-card p-6 sticky top-6">
|
||
<h2 className="text-xl font-semibold text-white">Order Summary</h2>
|
||
|
||
{hasPickupItems && (
|
||
<div className="mt-5">
|
||
{hasShedPickupItems && (
|
||
<div className="rounded-xl border border-emerald-500/20 bg-emerald-500/10 p-4">
|
||
<p className="text-sm font-medium text-emerald-400">
|
||
<svg className="inline h-3.5 w-3.5 mr-1.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2} aria-hidden="true"><path strokeLinecap="round" strokeLinejoin="round" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" /></svg>
|
||
Shed Pickup
|
||
</p>
|
||
<p className="mt-1.5 text-xs text-zinc-400">
|
||
{cart.filter((i) => i.fulfillment === "pickup" && i.pickup_type === "shed").map((i) => i.description || i.name).join(", ")}
|
||
</p>
|
||
</div>
|
||
)}
|
||
{selectedStop && (
|
||
<div className="rounded-xl border border-emerald-500/20 bg-emerald-500/10 p-4">
|
||
<p className="text-sm font-medium text-emerald-400">
|
||
<svg className="inline h-3.5 w-3.5 mr-1.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2} aria-hidden="true"><path strokeLinecap="round" strokeLinejoin="round" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" /></svg>
|
||
Pickup: {selectedStop.city}, {selectedStop.state}
|
||
</p>
|
||
<p className="mt-1.5 text-xs text-zinc-400">{selectedStop.date} · {selectedStop.time}</p>
|
||
<p className="mt-0.5 text-xs text-zinc-400">{selectedStop.location}</p>
|
||
<button
|
||
onClick={() => setShowStopPicker(true)}
|
||
className="mt-2.5 text-xs text-emerald-400 hover:text-emerald-300 transition-colors"
|
||
aria-label="Change pickup stop"
|
||
>
|
||
Change stop
|
||
</button>
|
||
</div>
|
||
)}
|
||
{!selectedStop && hasStopPickupItems && (
|
||
<button
|
||
onClick={() => setShowStopPicker(true)}
|
||
className="w-full rounded-xl border border-amber-500/20 bg-amber-500/10 px-4 py-3 text-left text-sm text-amber-400 hover:bg-amber-500/20 transition-all"
|
||
aria-label="Select pickup stop"
|
||
>
|
||
<svg className="inline h-3.5 w-3.5 mr-1.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2} aria-hidden="true"><path strokeLinecap="round" strokeLinejoin="round" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" /></svg>
|
||
No pickup stop selected — click to choose
|
||
</button>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
<div className="mt-5 space-y-3">
|
||
<div className="flex items-center justify-between">
|
||
<span className="text-sm font-medium text-zinc-400">Subtotal</span>
|
||
<span className="text-sm font-semibold text-white">${subtotal.toFixed(2)}</span>
|
||
</div>
|
||
<div className="border-t border-white/5 pt-3">
|
||
<div className="flex items-center justify-between">
|
||
<span className="text-base font-semibold text-white">Total</span>
|
||
<span className="text-2xl font-bold text-white">${subtotal.toFixed(2)}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<button
|
||
onClick={handleCheckoutClick}
|
||
disabled={
|
||
cart.length === 0 ||
|
||
(hasStopPickupItems && (!selectedStop || incompatibleItems.length > 0))
|
||
}
|
||
className="mt-6 w-full rounded-xl bg-gradient-to-r from-emerald-500 to-emerald-400 hover:from-emerald-400 hover:to-emerald-300 px-6 py-3.5 text-base font-semibold text-white disabled:opacity-50 disabled:cursor-not-allowed transition-all shadow-lg shadow-emerald-500/20 hover:-translate-y-0.5"
|
||
aria-label={
|
||
cart.length === 0
|
||
? "Your cart is empty. Add a product to continue."
|
||
: incompatibleItems.length > 0
|
||
? "Remove incompatible items first to proceed to checkout"
|
||
: !selectedStop && hasStopPickupItems
|
||
? "Select pickup stop first to proceed to checkout"
|
||
: "Continue to checkout"
|
||
}
|
||
>
|
||
{cart.length === 0
|
||
? "Cart is Empty"
|
||
: incompatibleItems.length > 0
|
||
? "Remove Incompatible Items First"
|
||
: !selectedStop && hasStopPickupItems
|
||
? "Select Pickup Stop First"
|
||
: "Continue to Checkout"}
|
||
</button>
|
||
|
||
<Link
|
||
href="/"
|
||
className="mt-4 block w-full text-center text-sm text-zinc-400 hover:text-white transition-colors"
|
||
aria-label="Continue shopping"
|
||
>
|
||
Continue Shopping
|
||
</Link>
|
||
</div>
|
||
</aside>
|
||
</div>
|
||
</main>
|
||
|
||
<StorefrontFooter brandName="Tuxedo Corn" brandSlug="tuxedo" />
|
||
</div>
|
||
);
|
||
} |