feat(saleor): Phase 3 - Cart Migration
- Create Saleor checkout store (Zustand + persist) - Update CartDrawer to use Saleor checkout - Update Header to use Saleor checkout store - Update ProductDetail with Add to Cart functionality - Add checkout initialization on app load - Handle checkout line add/update/delete operations - Add error handling and loading states
This commit is contained in:
Unchained
@@ -1,20 +1,42 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect } from "react";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { useCartStore } from "@/stores/cartStore";
|
||||
import { formatPrice } from "@/lib/woocommerce";
|
||||
import { useSaleorCheckoutStore } from "@/stores/saleorCheckoutStore";
|
||||
import { formatPrice } from "@/lib/saleor";
|
||||
|
||||
export default function CartDrawer() {
|
||||
const { items, isOpen, closeCart, removeItem, updateQuantity, getTotal } = useCartStore();
|
||||
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]);
|
||||
|
||||
return (
|
||||
<AnimatePresence>
|
||||
{isOpen && (
|
||||
<>
|
||||
{/* Backdrop */}
|
||||
<motion.div
|
||||
className="fixed inset-0 bg-black/50 z-50"
|
||||
initial={{ opacity: 0 }}
|
||||
@@ -22,6 +44,8 @@ export default function CartDrawer() {
|
||||
exit={{ opacity: 0 }}
|
||||
onClick={closeCart}
|
||||
/>
|
||||
|
||||
{/* Drawer */}
|
||||
<motion.div
|
||||
className="fixed top-0 right-0 bottom-0 w-full max-w-md bg-white z-50 shadow-xl flex flex-col"
|
||||
initial={{ x: "100%" }}
|
||||
@@ -29,8 +53,11 @@ export default function CartDrawer() {
|
||||
exit={{ x: "100%" }}
|
||||
transition={{ type: "tween", duration: 0.3 }}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between p-6 border-b border-border/30">
|
||||
<h2 className="text-xl font-serif">Your Cart</h2>
|
||||
<h2 className="text-xl font-serif">
|
||||
Your Cart ({lineCount})
|
||||
</h2>
|
||||
<button
|
||||
onClick={closeCart}
|
||||
className="p-2"
|
||||
@@ -42,12 +69,26 @@ export default function CartDrawer() {
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Error Message */}
|
||||
{error && (
|
||||
<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"
|
||||
>
|
||||
Dismiss
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Cart Items */}
|
||||
<div className="flex-1 overflow-y-auto p-6">
|
||||
{items.length === 0 ? (
|
||||
{lines.length === 0 ? (
|
||||
<div className="text-center py-12">
|
||||
<p className="text-foreground-muted mb-6">Your cart is empty</p>
|
||||
<Link
|
||||
href="/en/products"
|
||||
href="/products"
|
||||
onClick={closeCart}
|
||||
className="inline-block px-6 py-3 bg-foreground text-white"
|
||||
>
|
||||
@@ -56,39 +97,53 @@ export default function CartDrawer() {
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-6">
|
||||
{items.map((item) => (
|
||||
<div key={item.id} className="flex gap-4">
|
||||
{lines.map((line) => (
|
||||
<div key={line.id} className="flex gap-4">
|
||||
{/* Product Image */}
|
||||
<div className="w-20 h-20 bg-background-ice relative flex-shrink-0">
|
||||
{item.image && (
|
||||
{line.variant.product.media[0]?.url && (
|
||||
<Image
|
||||
src={item.image}
|
||||
alt={item.name}
|
||||
src={line.variant.product.media[0].url}
|
||||
alt={line.variant.product.name}
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Product Info */}
|
||||
<div className="flex-1">
|
||||
<h3 className="font-serif text-sm">{item.name}</h3>
|
||||
<h3 className="font-serif text-sm">{line.variant.product.name}</h3>
|
||||
{line.variant.name !== "Default" && (
|
||||
<p className="text-foreground-muted text-xs">{line.variant.name}</p>
|
||||
)}
|
||||
<p className="text-foreground-muted text-sm mt-1">
|
||||
{formatPrice(item.price)}
|
||||
{formatPrice(
|
||||
line.variant.pricing?.price?.gross?.amount || 0,
|
||||
line.variant.pricing?.price?.gross?.currency
|
||||
)}
|
||||
</p>
|
||||
|
||||
{/* Quantity Controls */}
|
||||
<div className="flex items-center gap-3 mt-2">
|
||||
<button
|
||||
onClick={() => updateQuantity(item.id, item.quantity - 1)}
|
||||
className="w-8 h-8 border border-border flex items-center justify-center"
|
||||
onClick={() => updateLine(line.id, line.quantity - 1)}
|
||||
disabled={isLoading}
|
||||
className="w-8 h-8 border border-border flex items-center justify-center disabled:opacity-50"
|
||||
>
|
||||
-
|
||||
</button>
|
||||
<span>{item.quantity}</span>
|
||||
<span>{line.quantity}</span>
|
||||
<button
|
||||
onClick={() => updateQuantity(item.id, item.quantity + 1)}
|
||||
className="w-8 h-8 border border-border flex items-center justify-center"
|
||||
onClick={() => updateLine(line.id, line.quantity + 1)}
|
||||
disabled={isLoading}
|
||||
className="w-8 h-8 border border-border flex items-center justify-center disabled:opacity-50"
|
||||
>
|
||||
+
|
||||
</button>
|
||||
<button
|
||||
onClick={() => removeItem(item.id)}
|
||||
onClick={() => removeLine(line.id)}
|
||||
disabled={isLoading}
|
||||
className="ml-auto text-foreground-muted hover:text-red-500"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
@@ -103,18 +158,48 @@ export default function CartDrawer() {
|
||||
)}
|
||||
</div>
|
||||
|
||||
{items.length > 0 && (
|
||||
{/* Footer with Checkout */}
|
||||
{lines.length > 0 && (
|
||||
<div className="p-6 border-t border-border/30">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<span className="font-serif">Subtotal</span>
|
||||
<span className="font-serif text-lg">{formatPrice(total.toString())}</span>
|
||||
{/* Subtotal */}
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-foreground-muted">Subtotal</span>
|
||||
<span>{formatPrice(checkout?.subtotalPrice?.gross?.amount || 0)}</span>
|
||||
</div>
|
||||
<a
|
||||
href="https://manoonoils.com/checkout"
|
||||
className="block w-full py-3 bg-foreground text-white text-center font-medium hover:bg-accent-dark transition-colors"
|
||||
|
||||
{/* Shipping */}
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<span className="text-foreground-muted">Shipping</span>
|
||||
<span>
|
||||
{checkout?.shippingPrice?.gross?.amount
|
||||
? formatPrice(checkout.shippingPrice.gross.amount)
|
||||
: "Calculated at checkout"
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Total */}
|
||||
<div className="flex items-center justify-between mb-4 pt-4 border-t border-border/30">
|
||||
<span className="font-serif">Total</span>
|
||||
<span className="font-serif text-lg">{formatPrice(total)}</span>
|
||||
</div>
|
||||
|
||||
{/* Checkout Button */}
|
||||
<Link
|
||||
href="/checkout"
|
||||
onClick={closeCart}
|
||||
className="block w-full py-3 bg-foreground text-white text-center font-medium hover:bg-accent-dark transition-colors disabled:opacity-50"
|
||||
>
|
||||
Checkout
|
||||
</a>
|
||||
{isLoading ? "Processing..." : "Checkout"}
|
||||
</Link>
|
||||
|
||||
{/* Continue Shopping */}
|
||||
<button
|
||||
onClick={closeCart}
|
||||
className="block w-full py-3 text-center text-foreground-muted hover:text-foreground mt-2"
|
||||
>
|
||||
Continue Shopping
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</motion.div>
|
||||
|
||||
Reference in New Issue
Block a user