From bc6f65dc9afa29fbb94038b1cfd5cbee2d87719c Mon Sep 17 00:00:00 2001
From: ertopogo <erwin.t.pombett@gmail.com>
Date: Sun, 1 Feb 2026 02:53:13 +0100
Subject: feat: mise à jour storefront + checkout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 storefront/pages/checkout.js | 384 +++++++++++++++++++++----------------------
 1 file changed, 192 insertions(+), 192 deletions(-)

(limited to 'storefront/pages/checkout.js')

diff --git a/storefront/pages/checkout.js b/storefront/pages/checkout.js
index 1970df4..9457daa 100644
--- a/storefront/pages/checkout.js
+++ b/storefront/pages/checkout.js
@@ -1,192 +1,192 @@
-import { useEffect, useState } from "react"
-import { useRouter } from "next/router"
-import { medusaClient } from "../lib/medusa-client"
-import { getStoredCartId, clearStoredCartId } from "../lib/storefront"
-
-const initialForm = {
-  email: "",
-  first_name: "",
-  last_name: "",
-  address_1: "",
-  postal_code: "",
-  city: "",
-  country_code: "fr",
-}
-
-export default function CheckoutPage() {
-  const router = useRouter()
-  const [form, setForm] = useState(initialForm)
-  const [status, setStatus] = useState("")
-  const [isLoading, setIsLoading] = useState(false)
-  const [cartId, setCartId] = useState(null)
-
-  useEffect(() => {
-    const storedCartId = getStoredCartId()
-    setCartId(storedCartId)
-  }, [])
-
-  const handleChange = (event) => {
-    const { name, value } = event.target
-    setForm((prev) => ({ ...prev, [name]: value }))
-  }
-
-  const handleSubmit = async (event) => {
-    event.preventDefault()
-    setStatus("")
-    setIsLoading(true)
-
-    if (!cartId) {
-      setStatus("Votre panier est vide.")
-      setIsLoading(false)
-      return
-    }
-
-    try {
-      await medusaClient.carts.update(cartId, {
-        email: form.email,
-        shipping_address: {
-          first_name: form.first_name,
-          last_name: form.last_name,
-          address_1: form.address_1,
-          postal_code: form.postal_code,
-          city: form.city,
-          country_code: form.country_code,
-        },
-      })
-
-      const { shipping_options: shippingOptions } =
-        await medusaClient.shippingOptions.listCartOptions(cartId)
-
-      if (!shippingOptions?.length) {
-        throw new Error("Aucune option de livraison disponible.")
-      }
-
-      await medusaClient.carts.addShippingMethod(cartId, {
-        option_id: shippingOptions[0].id,
-      })
-
-      const { cart: cartWithPayments } = await medusaClient.carts.createPaymentSessions(
-        cartId
-      )
-
-      const manualSession = cartWithPayments?.payment_sessions?.find(
-        (session) => session.provider_id === "manual"
-      )
-      const providerId =
-        manualSession?.provider_id ||
-        cartWithPayments?.payment_sessions?.[0]?.provider_id
-
-      if (!providerId) {
-        throw new Error("Aucun moyen de paiement disponible.")
-      }
-
-      await medusaClient.carts.setPaymentSession(cartId, { provider_id: providerId })
-
-      const { type, data } = await medusaClient.carts.complete(cartId)
-      if (type === "order" && data?.id) {
-        clearStoredCartId()
-        router.push(`/order-confirmation?order_id=${data.id}`)
-        return
-      }
-
-      setStatus("Commande validée, mais sans numéro de commande.")
-    } catch (error) {
-      setStatus("Impossible de finaliser la commande.")
-    } finally {
-      setIsLoading(false)
-    }
-  }
-
-  return (
-    <div style={{ maxWidth: "520px", margin: "0 auto" }}>
-      <h1>Finaliser la commande</h1>
-      <form onSubmit={handleSubmit} style={{ display: "grid", gap: "1rem" }}>
-        <label>
-          Email
-          <input
-            name="email"
-            type="email"
-            value={form.email}
-            onChange={handleChange}
-            required
-            style={{ width: "100%", padding: "0.5rem", marginTop: "0.5rem" }}
-          />
-        </label>
-        <label>
-          Prénom
-          <input
-            name="first_name"
-            value={form.first_name}
-            onChange={handleChange}
-            required
-            style={{ width: "100%", padding: "0.5rem", marginTop: "0.5rem" }}
-          />
-        </label>
-        <label>
-          Nom
-          <input
-            name="last_name"
-            value={form.last_name}
-            onChange={handleChange}
-            required
-            style={{ width: "100%", padding: "0.5rem", marginTop: "0.5rem" }}
-          />
-        </label>
-        <label>
-          Adresse
-          <input
-            name="address_1"
-            value={form.address_1}
-            onChange={handleChange}
-            required
-            style={{ width: "100%", padding: "0.5rem", marginTop: "0.5rem" }}
-          />
-        </label>
-        <label>
-          Code postal
-          <input
-            name="postal_code"
-            value={form.postal_code}
-            onChange={handleChange}
-            required
-            style={{ width: "100%", padding: "0.5rem", marginTop: "0.5rem" }}
-          />
-        </label>
-        <label>
-          Ville
-          <input
-            name="city"
-            value={form.city}
-            onChange={handleChange}
-            required
-            style={{ width: "100%", padding: "0.5rem", marginTop: "0.5rem" }}
-          />
-        </label>
-        <label>
-          Pays
-          <input
-            name="country_code"
-            value={form.country_code}
-            onChange={handleChange}
-            required
-            style={{ width: "100%", padding: "0.5rem", marginTop: "0.5rem" }}
-          />
-        </label>
-        <button
-          type="submit"
-          disabled={isLoading}
-          style={{
-            border: "1px solid #ccc",
-            background: "#fff",
-            borderRadius: "6px",
-            padding: "0.6rem",
-            cursor: "pointer",
-          }}
-        >
-          {isLoading ? "Validation..." : "Passer la commande"}
-        </button>
-        {status && <p>{status}</p>}
-      </form>
-    </div>
-  )
-}
+import { useEffect, useState } from "react"
+import { useRouter } from "next/router"
+import { medusaClient } from "../lib/medusa-client"
+import { getStoredCartId, clearStoredCartId } from "../lib/storefront"
+
+const initialForm = {
+  email: "",
+  first_name: "",
+  last_name: "",
+  address_1: "",
+  postal_code: "",
+  city: "",
+  country_code: "fr",
+}
+
+export default function CheckoutPage() {
+  const router = useRouter()
+  const [form, setForm] = useState(initialForm)
+  const [status, setStatus] = useState("")
+  const [isLoading, setIsLoading] = useState(false)
+  const [cartId, setCartId] = useState(null)
+
+  useEffect(() => {
+    const storedCartId = getStoredCartId()
+    setCartId(storedCartId)
+  }, [])
+
+  const handleChange = (event) => {
+    const { name, value } = event.target
+    setForm((prev) => ({ ...prev, [name]: value }))
+  }
+
+  const handleSubmit = async (event) => {
+    event.preventDefault()
+    setStatus("")
+    setIsLoading(true)
+
+    if (!cartId) {
+      setStatus("Votre panier est vide.")
+      setIsLoading(false)
+      return
+    }
+
+    try {
+      await medusaClient.carts.update(cartId, {
+        email: form.email,
+        shipping_address: {
+          first_name: form.first_name,
+          last_name: form.last_name,
+          address_1: form.address_1,
+          postal_code: form.postal_code,
+          city: form.city,
+          country_code: form.country_code,
+        },
+      })
+
+      const { shipping_options: shippingOptions } =
+        await medusaClient.shippingOptions.listCartOptions(cartId)
+
+      if (!shippingOptions?.length) {
+        throw new Error("Aucune option de livraison disponible.")
+      }
+
+      await medusaClient.carts.addShippingMethod(cartId, {
+        option_id: shippingOptions[0].id,
+      })
+
+      const { cart: cartWithPayments } = await medusaClient.carts.createPaymentSessions(
+        cartId
+      )
+
+      const manualSession = cartWithPayments?.payment_sessions?.find(
+        (session) => session.provider_id === "manual"
+      )
+      const providerId =
+        manualSession?.provider_id ||
+        cartWithPayments?.payment_sessions?.[0]?.provider_id
+
+      if (!providerId) {
+        throw new Error("Aucun moyen de paiement disponible.")
+      }
+
+      await medusaClient.carts.setPaymentSession(cartId, { provider_id: providerId })
+
+      const { type, data } = await medusaClient.carts.complete(cartId)
+      if (type === "order" && data?.id) {
+        clearStoredCartId()
+        router.push(`/order-confirmation?order_id=${data.id}`)
+        return
+      }
+
+      setStatus("Commande validée, mais sans numéro de commande.")
+    } catch (error) {
+      setStatus("Impossible de finaliser la commande.")
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  return (
+    <div style={{ maxWidth: "520px", margin: "0 auto" }}>
+      <h1>Finaliser la commande</h1>
+      <form onSubmit={handleSubmit} style={{ display: "grid", gap: "1rem" }}>
+        <label>
+          Email
+          <input
+            name="email"
+            type="email"
+            value={form.email}
+            onChange={handleChange}
+            required
+            style={{ width: "100%", padding: "0.5rem", marginTop: "0.5rem" }}
+          />
+        </label>
+        <label>
+          Prénom
+          <input
+            name="first_name"
+            value={form.first_name}
+            onChange={handleChange}
+            required
+            style={{ width: "100%", padding: "0.5rem", marginTop: "0.5rem" }}
+          />
+        </label>
+        <label>
+          Nom
+          <input
+            name="last_name"
+            value={form.last_name}
+            onChange={handleChange}
+            required
+            style={{ width: "100%", padding: "0.5rem", marginTop: "0.5rem" }}
+          />
+        </label>
+        <label>
+          Adresse
+          <input
+            name="address_1"
+            value={form.address_1}
+            onChange={handleChange}
+            required
+            style={{ width: "100%", padding: "0.5rem", marginTop: "0.5rem" }}
+          />
+        </label>
+        <label>
+          Code postal
+          <input
+            name="postal_code"
+            value={form.postal_code}
+            onChange={handleChange}
+            required
+            style={{ width: "100%", padding: "0.5rem", marginTop: "0.5rem" }}
+          />
+        </label>
+        <label>
+          Ville
+          <input
+            name="city"
+            value={form.city}
+            onChange={handleChange}
+            required
+            style={{ width: "100%", padding: "0.5rem", marginTop: "0.5rem" }}
+          />
+        </label>
+        <label>
+          Pays
+          <input
+            name="country_code"
+            value={form.country_code}
+            onChange={handleChange}
+            required
+            style={{ width: "100%", padding: "0.5rem", marginTop: "0.5rem" }}
+          />
+        </label>
+        <button
+          type="submit"
+          disabled={isLoading}
+          style={{
+            border: "1px solid #ccc",
+            background: "#fff",
+            borderRadius: "6px",
+            padding: "0.6rem",
+            cursor: "pointer",
+          }}
+        >
+          {isLoading ? "Validation..." : "Passer la commande"}
+        </button>
+        {status && <p>{status}</p>}
+      </form>
+    </div>
+  )
+}
-- 
cgit v1.2.3