7c05bd2346
- Fix newsletter subscribe box centering on homepage - Fix header overlap on product pages (pt-[72px] instead of pt-[100px]) - Add scroll-mt-[72px] for smooth scroll anchor offset - Add HeroVideo component with video hero placeholder - Add REDESIGN_SPECIFICATION.md with 9-phase design plan - Clean up globals.css theme declarations and comments - Update Header with improved sticky behavior and cart - Update ProductDetail with better layout and spacing - Update CartDrawer with improved slide-out cart UI - Add English translations for updated pages - Various CSS refinements across pages
270 lines
11 KiB
TypeScript
270 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect } from "react";
|
|
import { motion, AnimatePresence } from "framer-motion";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { X, Minus, Plus, Trash2, ShoppingBag } from "lucide-react";
|
|
import { useSaleorCheckoutStore } from "@/stores/saleorCheckoutStore";
|
|
import { formatPrice } from "@/lib/saleor";
|
|
|
|
export default function CartDrawer() {
|
|
const {
|
|
checkout,
|
|
isOpen,
|
|
isLoading,
|
|
error,
|
|
closeCart,
|
|
removeLine,
|
|
updateLine,
|
|
getTotal,
|
|
getLineCount,
|
|
getLines,
|
|
initCheckout,
|
|
clearError,
|
|
} = useSaleorCheckoutStore();
|
|
|
|
const lines = getLines();
|
|
const total = getTotal();
|
|
const lineCount = getLineCount();
|
|
|
|
// Initialize checkout on mount
|
|
useEffect(() => {
|
|
initCheckout();
|
|
}, [initCheckout]);
|
|
|
|
// Lock body scroll when cart is open
|
|
useEffect(() => {
|
|
if (isOpen) {
|
|
document.body.style.overflow = "hidden";
|
|
} else {
|
|
document.body.style.overflow = "";
|
|
}
|
|
return () => {
|
|
document.body.style.overflow = "";
|
|
};
|
|
}, [isOpen]);
|
|
|
|
return (
|
|
<AnimatePresence>
|
|
{isOpen && (
|
|
<>
|
|
{/* Backdrop */}
|
|
<motion.div
|
|
className="fixed inset-0 bg-black/40 backdrop-blur-sm z-50"
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
onClick={closeCart}
|
|
/>
|
|
|
|
{/* Drawer */}
|
|
<motion.div
|
|
className="fixed top-0 right-0 bottom-0 w-full max-w-[420px] bg-white z-50 shadow-2xl flex flex-col"
|
|
initial={{ x: "100%" }}
|
|
animate={{ x: 0 }}
|
|
exit={{ x: "100%" }}
|
|
transition={{ type: "tween", duration: 0.3, ease: [0.4, 0, 0.2, 1] }}
|
|
>
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between px-6 py-5 border-b border-[#e5e5e5]">
|
|
<h2 className="text-sm uppercase tracking-[0.1em] font-medium">
|
|
Your Cart ({lineCount})
|
|
</h2>
|
|
<button
|
|
onClick={closeCart}
|
|
className="p-2 -mr-2 hover:bg-black/5 rounded-full transition-colors"
|
|
aria-label="Close cart"
|
|
>
|
|
<X className="w-5 h-5" strokeWidth={1.5} />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Error Message */}
|
|
<AnimatePresence>
|
|
{error && (
|
|
<motion.div
|
|
initial={{ height: 0, opacity: 0 }}
|
|
animate={{ height: "auto", opacity: 1 }}
|
|
exit={{ height: 0, opacity: 0 }}
|
|
className="overflow-hidden"
|
|
>
|
|
<div className="p-4 bg-red-50 border-b border-red-100">
|
|
<p className="text-red-600 text-sm">{error}</p>
|
|
<button
|
|
onClick={clearError}
|
|
className="text-red-600 text-xs underline mt-1 hover:no-underline"
|
|
>
|
|
Dismiss
|
|
</button>
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
|
|
{/* Cart Items */}
|
|
<div className="flex-1 overflow-y-auto">
|
|
{lines.length === 0 ? (
|
|
<div className="flex flex-col items-center justify-center h-full px-6">
|
|
<div className="w-16 h-16 rounded-full bg-[#f8f9fa] flex items-center justify-center mb-6">
|
|
<ShoppingBag className="w-8 h-8 text-[#999999]" strokeWidth={1.5} />
|
|
</div>
|
|
<p className="text-[#666666] mb-2">Your cart is empty</p>
|
|
<p className="text-sm text-[#999999] mb-8 text-center">
|
|
Looks like you haven't added anything to your cart yet.
|
|
</p>
|
|
<Link
|
|
href="/products"
|
|
onClick={closeCart}
|
|
className="inline-block px-8 py-3 bg-black text-white text-sm uppercase tracking-[0.1em] hover:bg-[#333333] transition-colors"
|
|
>
|
|
Start Shopping
|
|
</Link>
|
|
</div>
|
|
) : (
|
|
<div className="p-6 space-y-6">
|
|
{lines.map((line) => (
|
|
<div key={line.id} className="flex gap-4">
|
|
{/* Product Image */}
|
|
<div className="w-24 h-24 bg-[#f8f9fa] relative flex-shrink-0 overflow-hidden">
|
|
{line.variant.product.media[0]?.url ? (
|
|
<Image
|
|
src={line.variant.product.media[0].url}
|
|
alt={line.variant.product.name}
|
|
fill
|
|
className="object-cover"
|
|
sizes="96px"
|
|
/>
|
|
) : (
|
|
<div className="absolute inset-0 flex items-center justify-center text-[#999999]">
|
|
<ShoppingBag className="w-6 h-6" strokeWidth={1.5} />
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Product Info */}
|
|
<div className="flex-1 min-w-0">
|
|
<h3 className="text-sm font-medium truncate">
|
|
{line.variant.product.name}
|
|
</h3>
|
|
{line.variant.name !== "Default" && (
|
|
<p className="text-[#999999] text-xs mt-0.5">
|
|
{line.variant.name}
|
|
</p>
|
|
)}
|
|
<p className="text-[#666666] text-sm mt-2">
|
|
{formatPrice(
|
|
line.variant.pricing?.price?.gross?.amount || 0,
|
|
line.variant.pricing?.price?.gross?.currency
|
|
)}
|
|
</p>
|
|
|
|
{/* Quantity Controls */}
|
|
<div className="flex items-center justify-between mt-3">
|
|
<div className="flex items-center border border-[#e5e5e5]">
|
|
<button
|
|
onClick={() => updateLine(line.id, line.quantity - 1)}
|
|
disabled={isLoading || line.quantity <= 1}
|
|
className="w-8 h-8 flex items-center justify-center hover:bg-[#f8f9fa] transition-colors disabled:opacity-50"
|
|
>
|
|
<Minus className="w-3 h-3" />
|
|
</button>
|
|
<span className="w-10 text-center text-sm font-medium">
|
|
{line.quantity}
|
|
</span>
|
|
<button
|
|
onClick={() => updateLine(line.id, line.quantity + 1)}
|
|
disabled={isLoading}
|
|
className="w-8 h-8 flex items-center justify-center hover:bg-[#f8f9fa] transition-colors disabled:opacity-50"
|
|
>
|
|
<Plus className="w-3 h-3" />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Remove Button */}
|
|
<button
|
|
onClick={() => removeLine(line.id)}
|
|
disabled={isLoading}
|
|
className="p-2 text-[#999999] hover:text-red-500 transition-colors"
|
|
aria-label="Remove item"
|
|
>
|
|
<Trash2 className="w-4 h-4" strokeWidth={1.5} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Footer with Checkout */}
|
|
{lines.length > 0 && (
|
|
<div className="border-t border-[#e5e5e5] bg-white">
|
|
{/* Order Summary */}
|
|
<div className="p-6 space-y-3">
|
|
{/* Subtotal */}
|
|
<div className="flex items-center justify-between text-sm">
|
|
<span className="text-[#666666]">Subtotal</span>
|
|
<span className="font-medium">
|
|
{formatPrice(checkout?.subtotalPrice?.gross?.amount || 0)}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Shipping */}
|
|
<div className="flex items-center justify-between text-sm">
|
|
<span className="text-[#666666]">Shipping</span>
|
|
<span className="text-[#666666]">
|
|
{checkout?.shippingPrice?.gross?.amount
|
|
? formatPrice(checkout.shippingPrice.gross.amount)
|
|
: "Calculated at checkout"
|
|
}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Divider */}
|
|
<div className="border-t border-[#e5e5e5] my-4" />
|
|
|
|
{/* Total */}
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-sm uppercase tracking-[0.05em] font-medium">Total</span>
|
|
<span className="text-lg font-medium">
|
|
{formatPrice(total)}
|
|
</span>
|
|
</div>
|
|
|
|
{(checkout?.subtotalPrice?.gross?.amount || 0) < 5000 && (
|
|
<p className="text-xs text-[#666666] text-center">
|
|
Free shipping on orders over {formatPrice(5000)}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* Actions */}
|
|
<div className="px-6 pb-6 space-y-3">
|
|
{/* Checkout Button */}
|
|
<Link
|
|
href="/checkout"
|
|
onClick={closeCart}
|
|
className="block w-full py-4 bg-black text-white text-center text-sm uppercase tracking-[0.1em] font-medium hover:bg-[#333333] transition-colors"
|
|
>
|
|
{isLoading ? "Processing..." : "Checkout"}
|
|
</Link>
|
|
|
|
{/* Continue Shopping */}
|
|
<button
|
|
onClick={closeCart}
|
|
className="block w-full py-3 text-center text-sm text-[#666666] hover:text-black transition-colors"
|
|
>
|
|
Continue Shopping
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</motion.div>
|
|
</>
|
|
)}
|
|
</AnimatePresence>
|
|
);
|
|
}
|