diff options
Diffstat (limited to 'storefront/pages/checkout.js')
| -rw-r--r-- | storefront/pages/checkout.js | 384 |
1 files changed, 192 insertions, 192 deletions
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>
+ )
+}
|
