@salifbiaye/create-boutique 0.1.4 → 0.2.0

package/templates/storefront/src/modules/account/components/overview/index.tsx

@@ -1,168 +1,123 @@
-import { T } from "@lib/boutique/i18n-client"
-import { Container } from "@medusajs/ui"
+import Link from "next/link"
 
-import ChevronDown from "@modules/common/icons/chevron-down"
-import LocalizedClientLink from "@modules/common/components/localized-client-link"
+import { getBoutique } from "@lib/boutique/config"
+import { t } from "@lib/boutique/i18n"
 import { convertToLocale } from "@lib/util/money"
 import { HttpTypes } from "@medusajs/types"
+import { Icon } from "@modules/ub/icons"
 
 type OverviewProps = {
   customer: HttpTypes.StoreCustomer | null
   orders: HttpTypes.StoreOrder[] | null
 }
 
+/** Tableau de bord du compte : carte d'accueil, 3 indicateurs cliquables, commandes récentes. Composant serveur. */
 const Overview = ({ customer, orders }: OverviewProps) => {
+  const { locale } = getBoutique()
+  const date = new Intl.DateTimeFormat(locale, { day: "numeric", month: "short", year: "numeric" })
+  const completion = getProfileCompletion(customer)
+  const stats = [
+    { href: "/account/orders", icon: "cart" as const, value: String(orders?.length ?? 0), label: t("account.orders"), testId: "orders-count" },
+    { href: "/account/profile", icon: "user" as const, value: `${completion}%`, label: t("account.profileDone"), testId: "customer-profile-completion", data: completion },
+    { href: "/account/addresses", icon: "home" as const, value: String(customer?.addresses?.length || 0), label: t("account.addresses"), testId: "addresses-count", data: customer?.addresses?.length || 0 },
+  ]
+
   return (
-    <div data-testid="overview-page-wrapper">
-      <div className="hidden small:block">
-        <div className="text-xl-semi flex justify-between items-center mb-4">
-          <span data-testid="welcome-message" data-value={customer?.first_name}>
-            <T k="account.hello" vars={{ name: customer?.first_name ?? "" }} />
-          </span>
-          <span className="text-small-regular text-ui-fg-base">
-            <T k="account.signedInAs" />{" "}
-            <span
-              className="font-semibold"
-              data-testid="customer-email"
-              data-value={customer?.email}
-            >
+    <div className="ub-acc" data-testid="overview-page-wrapper">
+      <section className="ub-acc__hello">
+        <div>
+          <h1 className="ub-head" data-testid="welcome-message" data-value={customer?.first_name}>
+            {t("account.hello", { name: customer?.first_name ?? "" })}
+          </h1>
+          <p>
+            {t("account.signedInAs")}{" "}
+            <b data-testid="customer-email" data-value={customer?.email}>
               {customer?.email}
-            </span>
-          </span>
+            </b>
+          </p>
         </div>
-        <div className="flex flex-col py-8 border-t border-gray-200">
-          <div className="flex flex-col gap-y-4 h-full col-span-1 row-span-2 flex-1">
-            <div className="flex items-start gap-x-16 mb-6">
-              <div className="flex flex-col gap-y-4">
-                <h3 className="text-large-semi"><T k="account.profile" /></h3>
-                <div className="flex items-end gap-x-2">
-                  <span
-                    className="text-3xl-semi leading-none"
-                    data-testid="customer-profile-completion"
-                    data-value={getProfileCompletion(customer)}
-                  >
-                    {getProfileCompletion(customer)}%
-                  </span>
-                  <span className="uppercase text-base-regular text-ui-fg-subtle">
-                    <T k="account.completed" />
-                  </span>
-                </div>
-              </div>
+        <Link href="/store" className="ub-acc__shop">
+          {t("account.keepShopping")} <Icon name="arrowRight" />
+        </Link>
+      </section>
 
-              <div className="flex flex-col gap-y-4">
-                <h3 className="text-large-semi"><T k="account.addresses" /></h3>
-                <div className="flex items-end gap-x-2">
-                  <span
-                    className="text-3xl-semi leading-none"
-                    data-testid="addresses-count"
-                    data-value={customer?.addresses?.length || 0}
-                  >
-                    {customer?.addresses?.length || 0}
-                  </span>
-                  <span className="uppercase text-base-regular text-ui-fg-subtle">
-                    <T k="account.saved" />
-                  </span>
-                </div>
-              </div>
-            </div>
+      <ul className="ub-acc__stats">
+        {stats.map((s) => (
+          <li key={s.href}>
+            <Link href={s.href} className="ub-acc__stat">
+              <span className="ub-acc__ic">
+                <Icon name={s.icon} />
+              </span>
+              <b data-testid={s.testId} data-value={s.data ?? s.value}>
+                {s.value}
+              </b>
+              <small>{s.label}</small>
+            </Link>
+          </li>
+        ))}
+      </ul>
 
-            <div className="flex flex-col gap-y-4">
-              <div className="flex items-center gap-x-2">
-                <h3 className="text-large-semi"><T k="account.recentOrders" /></h3>
-              </div>
-              <ul
-                className="flex flex-col gap-y-4"
-                data-testid="orders-wrapper"
-              >
-                {orders && orders.length > 0 ? (
-                  orders.slice(0, 5).map((order) => {
-                    return (
-                      <li
-                        key={order.id}
-                        data-testid="order-wrapper"
-                        data-value={order.id}
-                      >
-                        <LocalizedClientLink
-                          href={`/account/orders/details/${order.id}`}
-                        >
-                          <Container className="bg-gray-50 flex justify-between items-center p-4">
-                            <div className="grid grid-cols-3 grid-rows-2 text-small-regular gap-x-4 flex-1">
-                              <span className="font-semibold">Date placed</span>
-                              <span className="font-semibold">
-                                <T k="account.orderNumber" />
-                              </span>
-                              <span className="font-semibold">
-                                <T k="account.totalAmount" />
-                              </span>
-                              <span data-testid="order-created-date">
-                                {new Date(order.created_at).toDateString()}
-                              </span>
-                              <span
-                                data-testid="order-id"
-                                data-value={order.display_id}
-                              >
-                                #{order.display_id}
-                              </span>
-                              <span data-testid="order-amount">
-                                {convertToLocale({
-                                  amount: order.total,
-                                  currency_code: order.currency_code,
-                                })}
-                              </span>
-                            </div>
-                            <button
-                              className="flex items-center justify-between"
-                              data-testid="open-order-button"
-                            >
-                              <span className="sr-only">
-                                Go to order #{order.display_id}
-                              </span>
-                              <ChevronDown className="-rotate-90" />
-                            </button>
-                          </Container>
-                        </LocalizedClientLink>
-                      </li>
-                    )
-                  })
-                ) : (
-                  <span data-testid="no-orders-message"><T k="account.noRecentOrders" /></span>
-                )}
-              </ul>
-            </div>
-          </div>
+      {completion < 100 && (
+        <div className="ub-acc__progress">
+          <span>{t("account.completeProfile")}</span>
+          <i style={{ ["--p" as string]: `${completion}%` }} />
         </div>
-      </div>
+      )}
+
+      <section>
+        <div className="ub-acc__head">
+          <h2 className="ub-head">{t("account.recentOrders")}</h2>
+          {!!orders?.length && (
+            <Link href="/account/orders" className="ub-acc__more">
+              {t("section.viewAll")} <Icon name="arrowRight" />
+            </Link>
+          )}
+        </div>
+        <ul className="ub-acc__orders" data-testid="orders-wrapper">
+          {orders && orders.length > 0 ? (
+            orders.slice(0, 5).map((order) => (
+              <li key={order.id} data-testid="order-wrapper" data-value={order.id}>
+                <Link href={`/account/orders/details/${order.id}`} className="ub-acc__order" data-testid="open-order-button">
+                  <span className="ub-acc__ic">
+                    <Icon name="truck" />
+                  </span>
+                  <span>
+                    <b data-testid="order-id" data-value={order.display_id}>
+                      #{order.display_id}
+                    </b>
+                    <small data-testid="order-created-date">{date.format(new Date(order.created_at))}</small>
+                  </span>
+                  <span className="ub-acc__amount" data-testid="order-amount">
+                    {convertToLocale({ amount: order.total, currency_code: order.currency_code })}
+                  </span>
+                  <Icon name="arrowRight" />
+                </Link>
+              </li>
+            ))
+          ) : (
+            <li className="ub-acc__empty" data-testid="no-orders-container">
+              <span className="ub-acc__ic">
+                <Icon name="cart" />
+              </span>
+              <b>{t("account.noRecentOrders")}</b>
+              <Link href="/store" className="ub-acc__shop">
+                {t("account.keepShopping")} <Icon name="arrowRight" />
+              </Link>
+            </li>
+          )}
+        </ul>
+      </section>
     </div>
   )
 }
 
 const getProfileCompletion = (customer: HttpTypes.StoreCustomer | null) => {
+  if (!customer) return 0
   let count = 0
-
-  if (!customer) {
-    return 0
-  }
-
-  if (customer.email) {
-    count++
-  }
-
-  if (customer.first_name && customer.last_name) {
-    count++
-  }
-
-  if (customer.phone) {
-    count++
-  }
-
-  const billingAddress = customer.addresses?.find(
-    (addr) => addr.is_default_billing
-  )
-
-  if (billingAddress) {
-    count++
-  }
-
+  if (customer.email) count++
+  if (customer.first_name && customer.last_name) count++
+  if (customer.phone) count++
+  if (customer.addresses?.find((addr) => addr.is_default_billing)) count++
   return (count / 4) * 100
 }
 

package/templates/storefront/src/modules/account/components/profile-billing-address/index.tsx

@@ -4,6 +4,7 @@ import React, { useEffect, useMemo, useActionState } from "react"
 
 import { useT } from "@lib/boutique/i18n-client"
 import Input from "@modules/common/components/input"
+import PhoneInput from "@modules/common/components/phone-input"
 import NativeSelect from "@modules/common/components/native-select"
 
 import AccountInfo from "../account-info"
@@ -125,11 +126,9 @@ const ProfileBillingAddress: React.FC<MyInformationProps> = ({
             defaultValue={billingAddress?.company || undefined}
             data-testid="billing-company-input"
           />
-          <Input
+          <PhoneInput
             label="form.phone"
             name="phone"
-            type="phone"
-            autoComplete="phone"
             required
             defaultValue={billingAddress?.phone ?? customer?.phone ?? ""}
             data-testid="billing-phone-input"

package/templates/storefront/src/modules/account/components/profile-phone/index.tsx

@@ -3,6 +3,7 @@
 import React, { useEffect, useActionState } from "react";
 
 import Input from "@modules/common/components/input"
+import PhoneInput from "@modules/common/components/phone-input"
 
 import AccountInfo from "../account-info"
 import { HttpTypes } from "@medusajs/types"
@@ -56,11 +57,9 @@ const ProfileEmail: React.FC<MyInformationProps> = ({ customer }) => {
         data-testid="account-phone-editor"
       >
         <div className="grid grid-cols-1 gap-y-2">
-          <Input
+          <PhoneInput
             label="form.phone"
             name="phone"
-            type="phone"
-            autoComplete="phone"
             required
             defaultValue={customer.phone ?? ""}
             data-testid="phone-input"

package/templates/storefront/src/modules/account/components/register/index.tsx

@@ -4,6 +4,7 @@
 import { T } from "@lib/boutique/i18n-client"
 import { useActionState } from "react"
 import Input from "@modules/common/components/input"
+import PhoneInput from "@modules/common/components/phone-input"
 import { LOGIN_VIEW } from "@modules/account/templates/login-template"
 import ErrorMessage from "@modules/checkout/components/error-message"
 import { SubmitButton } from "@modules/checkout/components/submit-button"
@@ -52,11 +53,9 @@ const Register = ({ setCurrentView }: Props) => {
             autoComplete="email"
             data-testid="email-input"
           />
-          <Input
+          <PhoneInput
             label="form.phone"
             name="phone"
-            type="tel"
-            autoComplete="tel"
             data-testid="phone-input"
           />
           <Input

package/templates/storefront/src/modules/account/templates/account-layout.tsx

@@ -1,40 +1,36 @@
 import { T } from "@lib/boutique/i18n-client"
 import React from "react"
 
-import UnderlineLink from "@modules/common/components/interactive-link"
+import LocalizedClientLink from "@modules/common/components/localized-client-link"
+import { HttpTypes } from "@medusajs/types"
 
 import AccountNav from "../components/account-nav"
-import { HttpTypes } from "@medusajs/types"
 
 interface AccountLayoutProps {
   customer: HttpTypes.StoreCustomer | null
   children: React.ReactNode
 }
 
-const AccountLayout: React.FC<AccountLayoutProps> = ({
-  customer,
-  children,
-}) => {
+/** Espace client : menu latéral (connecté) + contenu, puis carte d'aide. Non connecté : formulaire centré. */
+const AccountLayout: React.FC<AccountLayoutProps> = ({ customer, children }) => {
   return (
-    <div className="flex-1 small:py-12" data-testid="account-page">
-      <div className="flex-1 content-container h-full max-w-5xl mx-auto bg-white flex flex-col">
-        <div className="grid grid-cols-1  small:grid-cols-[240px_1fr] py-12">
-          <div>{customer && <AccountNav customer={customer} />}</div>
-          <div className="flex-1">{children}</div>
-        </div>
-        <div className="flex flex-col small:flex-row items-end justify-between small:border-t border-gray-200 py-12 gap-8">
-          <div>
-            <h3 className="text-xl-semi mb-4"><T k="account.questions" /></h3>
-            <span className="txt-medium">
-              <T k="account.questionsText" />
-            </span>
-          </div>
-          <div>
-            <UnderlineLink href="/legal/contact">
-              <T k="account.contactUs" />
-            </UnderlineLink>
-          </div>
+    <div className="ub-wrap ub-account" data-testid="account-page">
+      <div className={customer ? "ub-account__grid" : "ub-account__solo"}>
+        {customer && <AccountNav customer={customer} />}
+        <div className="ub-account__main">{children}</div>
+      </div>
+      <div className="ub-account__help">
+        <div>
+          <h3 className="ub-head">
+            <T k="account.questions" />
+          </h3>
+          <p>
+            <T k="account.questionsText" />
+          </p>
         </div>
+        <LocalizedClientLink href="/legal/contact" className="ub-btn ub-btn--primary">
+          <T k="account.contactUs" />
+        </LocalizedClientLink>
       </div>
     </div>
   )

package/templates/storefront/src/modules/checkout/components/billing_address/index.tsx

@@ -1,5 +1,6 @@
 import { HttpTypes } from "@medusajs/types"
 import Input from "@modules/common/components/input"
+import PhoneInput from "@modules/common/components/phone-input"
 import React, { useState } from "react"
 import CountrySelect from "../country-select"
 
@@ -98,10 +99,9 @@ const BillingAddress = ({ cart }: { cart: HttpTypes.StoreCart | null }) => {
           onChange={handleChange}
           data-testid="billing-province-input"
         />
-        <Input
+        <PhoneInput
           label="form.phone"
           name="billing_address.phone"
-          autoComplete="tel"
           value={formData["billing_address.phone"]}
           onChange={handleChange}
           data-testid="billing-phone-input"

package/templates/storefront/src/modules/checkout/components/payment/index.tsx

@@ -10,6 +10,7 @@ import { Button, Container, Heading, Text, clx } from "@medusajs/ui"
 import ErrorMessage from "@modules/checkout/components/error-message"
 import PaymentContainer, {
   StripeCardContainer,
+  paymentTypeLabel,
 } from "@modules/checkout/components/payment-container"
 import Divider from "@modules/common/components/divider"
 import { usePathname, useRouter, useSearchParams } from "next/navigation"
@@ -232,7 +233,7 @@ const Payment = ({
                   </Container>
                   <Text>
                     {isStripeLike(selectedPaymentMethod) && cardBrand
-                      ? cardBrand
+                      ? paymentTypeLabel(cardBrand)
                       : <T k="checkout.anotherStep" />}
                   </Text>
                 </div>

package/templates/storefront/src/modules/checkout/components/payment-button/index.tsx

@@ -7,7 +7,8 @@ import { placeOrder } from "@lib/data/cart"
 import { HttpTypes } from "@medusajs/types"
 import { Button } from "@medusajs/ui"
 import { useElements, useStripe } from "@stripe/react-stripe-js"
-import React, { useState } from "react"
+import { useSearchParams } from "next/navigation"
+import React, { useEffect, useRef, useState } from "react"
 import ErrorMessage from "../error-message"
 
 type PaymentButtonProps = {
@@ -27,8 +28,15 @@ const PaymentButton: React.FC<PaymentButtonProps> = ({
     (cart.shipping_methods?.length ?? 0) < 1
 
   const paymentSession = cart.payment_collection?.payment_sessions?.[0]
+  const redirectStatus = useSearchParams().get("redirect_status")
 
   switch (true) {
+    case isStripeLike(paymentSession?.provider_id) && !!redirectStatus:
+      return (
+        <StripeRedirectReturn status={redirectStatus!}>
+          <Button size="large" disabled><T k="checkout.placeOrder" /></Button>
+        </StripeRedirectReturn>
+      )
     case isStripeLike(paymentSession?.provider_id):
       return (
         <StripePaymentButton
@@ -46,6 +54,32 @@ const PaymentButton: React.FC<PaymentButtonProps> = ({
   }
 }
 
+/** Retour d'un moyen de paiement à redirection (Klarna, banque…) : Stripe renvoie sur /checkout?step=review&redirect_status=… */
+const StripeRedirectReturn = ({ status, children }: { status: string; children: React.ReactNode }) => {
+  const [errorMessage, setErrorMessage] = useState<string | null>(null)
+  const started = useRef(false)
+
+  useEffect(() => {
+    if (status !== "succeeded" || started.current) return
+    started.current = true
+    placeOrder().catch((err) => setErrorMessage(err.message))
+  }, [status])
+
+  if (status === "succeeded" && !errorMessage) return <Button size="large" isLoading disabled><T k="checkout.placeOrder" /></Button>
+  return (
+    <>
+      {children}
+      {errorMessage ? (
+        <ErrorMessage error={errorMessage} data-testid="stripe-payment-error-message" />
+      ) : (
+        <p className="text-small-regular text-ui-fg-subtle mt-2" role="status">
+          <T k={status === "processing" ? "checkout.paymentPending" : "checkout.paymentFailed"} />
+        </p>
+      )}
+    </>
+  )
+}
+
 const StripePaymentButton = ({
   cart,
   notReady,
@@ -70,68 +104,51 @@ const StripePaymentButton = ({
 
   const stripe = useStripe()
   const elements = useElements()
-  const card = elements?.getElement("card")
-
-  const session = cart.payment_collection?.payment_sessions?.find(
-    (s) => s.status === "pending"
-  )
 
   const disabled = !stripe || !elements ? true : false
 
+  // Stripe Payment Element : carte, Apple Pay, Google Pay… Aucune donnée de paiement ne passe par nos serveurs ;
+  // le montant est celui du PaymentIntent créé par Medusa. Pas de redirection sauf moyen qui l'exige.
   const handlePayment = async () => {
     setSubmitting(true)
+    setErrorMessage(null)
 
-    if (!stripe || !elements || !card || !cart) {
+    if (!stripe || !elements || !cart) {
       setSubmitting(false)
       return
     }
 
-    await stripe
-      .confirmCardPayment(session?.data.client_secret as string, {
-        payment_method: {
-          card: card,
+    const address = cart.billing_address
+    const { error, paymentIntent } = await stripe.confirmPayment({
+      elements,
+      redirect: "if_required",
+      confirmParams: {
+        return_url: `${window.location.origin}/checkout?step=review`,
+        payment_method_data: {
           billing_details: {
-            name:
-              cart.billing_address?.first_name +
-              " " +
-              cart.billing_address?.last_name,
+            name: [address?.first_name, address?.last_name].filter(Boolean).join(" ") || undefined,
+            email: cart.email ?? undefined,
+            phone: address?.phone || undefined,
             address: {
-              city: cart.billing_address?.city ?? undefined,
-              country: cart.billing_address?.country_code ?? undefined,
-              line1: cart.billing_address?.address_1 ?? undefined,
-              line2: cart.billing_address?.address_2 ?? undefined,
-              postal_code: cart.billing_address?.postal_code ?? undefined,
-              state: cart.billing_address?.province ?? undefined,
+              city: address?.city ?? undefined,
+              country: address?.country_code ?? undefined,
+              line1: address?.address_1 ?? undefined,
+              line2: address?.address_2 ?? undefined,
+              postal_code: address?.postal_code ?? undefined,
+              state: address?.province ?? undefined,
             },
-            email: cart.email,
-            phone: cart.billing_address?.phone ?? undefined,
           },
         },
-      })
-      .then(({ error, paymentIntent }) => {
-        if (error) {
-          const pi = error.payment_intent
-
-          if (
-            (pi && pi.status === "requires_capture") ||
-            (pi && pi.status === "succeeded")
-          ) {
-            onPaymentCompleted()
-          }
-
-          setErrorMessage(error.message || null)
-          return
-        }
-
-        if (
-          (paymentIntent && paymentIntent.status === "requires_capture") ||
-          paymentIntent.status === "succeeded"
-        ) {
-          return onPaymentCompleted()
-        }
-
-        return
-      })
+      },
+    })
+
+    const intent = paymentIntent ?? (error && "payment_intent" in error ? error.payment_intent : undefined)
+    if (intent && (intent.status === "succeeded" || intent.status === "requires_capture")) {
+      return onPaymentCompleted()
+    }
+
+    setErrorMessage(error?.message ?? null)
+    setSubmitting(false)
   }
 
   return (