1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
|
import { useCallback, useEffect, useState } from "react"
import { medusaClient } from "../lib/medusa-client"
import { formatAmount } from "../lib/format"
import { getStoredCartId, clearStoredCartId } from "../lib/storefront"
export default function CartPage() {
const [cart, setCart] = useState(null)
const [status, setStatus] = useState("")
const [isLoading, setIsLoading] = useState(true)
const loadCart = useCallback(async () => {
const storedCartId = getStoredCartId()
if (!storedCartId) {
setCart(null)
setIsLoading(false)
return
}
try {
const { cart: fetchedCart } = await medusaClient.carts.retrieve(storedCartId)
setCart(fetchedCart)
} catch (error) {
clearStoredCartId()
setCart(null)
} finally {
setIsLoading(false)
}
}, [])
useEffect(() => {
loadCart()
}, [loadCart])
const handleRemove = async (lineItemId) => {
if (!cart) {
return
}
setStatus("")
try {
await medusaClient.carts.lineItems.delete(cart.id, lineItemId)
await loadCart()
} catch (error) {
setStatus("Impossible de retirer l'article.")
}
}
if (isLoading) {
return <p>Chargement du panier...</p>
}
if (!cart || !cart.items?.length) {
return <p>Votre panier est vide.</p>
}
return (
<div style={{ maxWidth: "720px", margin: "0 auto" }}>
<h1>Panier</h1>
{status && <p>{status}</p>}
<div style={{ display: "grid", gap: "1rem", marginTop: "1rem" }}>
{cart.items.map((item) => (
<div
key={item.id}
style={{
border: "1px solid #ccc",
borderRadius: "8px",
padding: "1rem",
display: "flex",
justifyContent: "space-between",
gap: "1rem",
}}
>
<div>
<strong>{item.title}</strong>
<p>Quantité : {item.quantity}</p>
<p>
{formatAmount(item.unit_price, cart.region?.currency_code || "eur")}
</p>
</div>
<button
type="button"
onClick={() => handleRemove(item.id)}
style={{
border: "1px solid #ccc",
background: "#fff",
borderRadius: "6px",
padding: "0.4rem 0.8rem",
cursor: "pointer",
height: "fit-content",
}}
>
Retirer
</button>
</div>
))}
</div>
<p style={{ marginTop: "1.5rem", fontWeight: 600 }}>
Total : {formatAmount(cart.total, cart.region?.currency_code || "eur")}
</p>
</div>
)
}
|
