@salifbiaye/create-boutique 0.1.5 → 0.2.0

package/templates/storefront/src/lib/boutique/schema.ts

@@ -68,6 +68,8 @@ export const themeSchema = z.object({
   id: z.string().regex(SLUG),
   name: z.string().min(1),
   reference: z.string().optional(),
+  /** Variante : reprend la mise en page (règles CSS) de ce thème, avec la palette de styles/ub/variants.css. */
+  layout: z.string().regex(SLUG).optional(),
   fonts: z.object({
     head: z.enum(["inter", "jakarta", "oswald", "outfit", "poppins", "serif", "sora", "space-grotesk"]),
     body: z.enum(["inter", "jakarta", "oswald", "outfit", "poppins", "serif", "sora", "space-grotesk"]),

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

@@ -1,197 +1,70 @@
 "use client"
 
-
 import { T } from "@lib/boutique/i18n-client"
-import { clx } from "@medusajs/ui"
 import { ArrowRightOnRectangle } from "@medusajs/icons"
 import { usePathname } from "next/navigation"
 
-import ChevronDown from "@modules/common/icons/chevron-down"
-import User from "@modules/common/icons/user"
+import LocalizedClientLink from "@modules/common/components/localized-client-link"
 import MapPin from "@modules/common/icons/map-pin"
 import Package from "@modules/common/icons/package"
-import LocalizedClientLink from "@modules/common/components/localized-client-link"
+import User from "@modules/common/icons/user"
+import { Icon } from "@modules/ub/icons"
 import { HttpTypes } from "@medusajs/types"
 import { signout } from "@lib/data/customer"
 
-const AccountNav = ({
-  customer,
-}: {
-  customer: HttpTypes.StoreCustomer | null
-}) => {
-  const route = usePathname()
+const LINKS = [
+  { href: "/account", key: "account.overview", testId: "overview-link", icon: <Icon name="home" /> },
+  { href: "/account/profile", key: "account.profile", testId: "profile-link", icon: <User size={20} /> },
+  { href: "/account/addresses", key: "account.addresses", testId: "addresses-link", icon: <MapPin size={20} /> },
+  { href: "/account/orders", key: "account.orders", testId: "orders-link", icon: <Package size={20} /> },
+]
 
-  const handleLogout = async () => {
-    await signout()
-  }
+/** Menu du compte : carte client (initiales, nom, e-mail) + liens avec icônes ; pastilles défilantes sur mobile. */
+const AccountNav = ({ customer }: { customer: HttpTypes.StoreCustomer | null }) => {
+  const route = usePathname()
+  const initials = `${customer?.first_name?.[0] ?? ""}${customer?.last_name?.[0] ?? ""}`.toUpperCase() || "•"
+  const name = [customer?.first_name, customer?.last_name].filter(Boolean).join(" ")
 
   return (
-    <div>
-      <div className="small:hidden" data-testid="mobile-account-nav">
-        {route !== "/account" ? (
-          <LocalizedClientLink
-            href="/account"
-            className="flex items-center gap-x-2 text-small-regular py-2"
-            data-testid="account-main-link"
-          >
-            <>
-              <ChevronDown className="transform rotate-90" />
-              <span><T k="account.title" /></span>
-            </>
-          </LocalizedClientLink>
-        ) : (
-          <>
-            <div className="text-xl-semi mb-4 px-8">
-              Hello {customer?.first_name}
-            </div>
-            <div className="text-base-regular">
-              <ul>
-                <li>
-                  <LocalizedClientLink
-                    href="/account/profile"
-                    className="flex items-center justify-between py-4 border-b border-gray-200 px-8"
-                    data-testid="profile-link"
-                  >
-                    <>
-                      <div className="flex items-center gap-x-2">
-                        <User size={20} />
-                        <span><T k="account.profile" /></span>
-                      </div>
-                      <ChevronDown className="transform -rotate-90" />
-                    </>
-                  </LocalizedClientLink>
-                </li>
-                <li>
-                  <LocalizedClientLink
-                    href="/account/addresses"
-                    className="flex items-center justify-between py-4 border-b border-gray-200 px-8"
-                    data-testid="addresses-link"
-                  >
-                    <>
-                      <div className="flex items-center gap-x-2">
-                        <MapPin size={20} />
-                        <span><T k="account.addresses" /></span>
-                      </div>
-                      <ChevronDown className="transform -rotate-90" />
-                    </>
-                  </LocalizedClientLink>
-                </li>
-                <li>
-                  <LocalizedClientLink
-                    href="/account/orders"
-                    className="flex items-center justify-between py-4 border-b border-gray-200 px-8"
-                    data-testid="orders-link"
-                  >
-                    <div className="flex items-center gap-x-2">
-                      <Package size={20} />
-                      <span><T k="account.orders" /></span>
-                    </div>
-                    <ChevronDown className="transform -rotate-90" />
-                  </LocalizedClientLink>
-                </li>
-                <li>
-                  <button
-                    type="button"
-                    className="flex items-center justify-between py-4 border-b border-gray-200 px-8 w-full"
-                    onClick={handleLogout}
-                    data-testid="logout-button"
-                  >
-                    <div className="flex items-center gap-x-2">
-                      <ArrowRightOnRectangle />
-                      <span><T k="account.logout" /></span>
-                    </div>
-                    <ChevronDown className="transform -rotate-90" />
-                  </button>
-                </li>
-              </ul>
-            </div>
-          </>
-        )}
+    <aside className="ub-accnav" data-testid="account-nav">
+      <div className="ub-accnav__me">
+        <span className="ub-accnav__avatar" aria-hidden>
+          {initials}
+        </span>
+        <span className="ub-accnav__who">
+          <b>{name || <T k="account.title" />}</b>
+          {customer?.email && <small>{customer.email}</small>}
+        </span>
       </div>
-      <div className="hidden small:block" data-testid="account-nav">
-        <div>
-          <div className="pb-4">
-            <h3 className="text-base-semi">Account</h3>
-          </div>
-          <div className="text-base-regular">
-            <ul className="flex mb-0 justify-start items-start flex-col gap-y-4">
-              <li>
-                <AccountNavLink
-                  href="/account"
-                  route={route!}
-                  data-testid="overview-link"
-                >
-                  <T k="account.overview" />
-                </AccountNavLink>
-              </li>
-              <li>
-                <AccountNavLink
-                  href="/account/profile"
-                  route={route!}
-                  data-testid="profile-link"
-                >
-                  <T k="account.profile" />
-                </AccountNavLink>
-              </li>
-              <li>
-                <AccountNavLink
-                  href="/account/addresses"
-                  route={route!}
-                  data-testid="addresses-link"
+      <nav aria-label="account">
+        <ul className="ub-accnav__list">
+          {LINKS.map((l) => {
+            const active = l.href === "/account" ? route === l.href : route?.startsWith(l.href)
+            return (
+              <li key={l.href}>
+                <LocalizedClientLink
+                  href={l.href}
+                  className="ub-accnav__link"
+                  aria-current={active ? "page" : undefined}
+                  data-testid={l.testId}
                 >
-                  <T k="account.addresses" />
-                </AccountNavLink>
+                  <span className="ub-accnav__ic">{l.icon}</span>
+                  <T k={l.key} />
+                </LocalizedClientLink>
               </li>
-              <li>
-                <AccountNavLink
-                  href="/account/orders"
-                  route={route!}
-                  data-testid="orders-link"
-                >
-                  <T k="account.orders" />
-                </AccountNavLink>
-              </li>
-              <li className="text-grey-700">
-                <button
-                  type="button"
-                  onClick={handleLogout}
-                  data-testid="logout-button"
-                >
-                  <T k="account.logout" />
-                </button>
-              </li>
-            </ul>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-type AccountNavLinkProps = {
-  href: string
-  route: string
-  children: React.ReactNode
-  "data-testid"?: string
-}
-
-const AccountNavLink = ({
-  href,
-  route,
-  children,
-  "data-testid": dataTestId,
-}: AccountNavLinkProps) => {
-  const active = route === href
-  return (
-    <LocalizedClientLink
-      href={href}
-      className={clx("text-ui-fg-subtle hover:text-ui-fg-base", {
-        "text-ui-fg-base font-semibold": active,
-      })}
-      data-testid={dataTestId}
-    >
-      {children}
-    </LocalizedClientLink>
+            )
+          })}
+          <li>
+            <button type="button" className="ub-accnav__link ub-accnav__logout" onClick={() => signout()} data-testid="logout-button">
+              <span className="ub-accnav__ic">
+                <ArrowRightOnRectangle />
+              </span>
+              <T k="account.logout" />
+            </button>
+          </li>
+        </ul>
+      </nav>
+    </aside>
   )
 }
 

package/templates/storefront/src/modules/account/components/address-card/add-address.tsx

@@ -9,6 +9,7 @@ import { useEffect, useState, useActionState } from "react"
 import useToggleState from "@lib/hooks/use-toggle-state"
 import CountrySelect from "@modules/checkout/components/country-select"
 import Input from "@modules/common/components/input"
+import PhoneInput from "@modules/common/components/phone-input"
 import Modal from "@modules/common/components/modal"
 import { SubmitButton } from "@modules/checkout/components/submit-button"
 import { HttpTypes } from "@medusajs/types"
@@ -130,10 +131,9 @@ const AddAddress = ({
                 autoComplete="country"
                 data-testid="country-select"
               />
-              <Input
+              <PhoneInput
                 label="form.phone"
                 name="phone"
-                autoComplete="phone"
                 data-testid="phone-input"
               />
             </div>

package/templates/storefront/src/modules/account/components/address-card/edit-address-modal.tsx

@@ -9,6 +9,7 @@ import { Button, Heading, Text, clx } from "@medusajs/ui"
 import useToggleState from "@lib/hooks/use-toggle-state"
 import CountrySelect from "@modules/checkout/components/country-select"
 import Input from "@modules/common/components/input"
+import PhoneInput from "@modules/common/components/phone-input"
 import Modal from "@modules/common/components/modal"
 import Spinner from "@modules/common/icons/spinner"
 import { SubmitButton } from "@modules/checkout/components/submit-button"
@@ -204,10 +205,9 @@ const EditAddress: React.FC<EditAddressProps> = ({
                 defaultValue={address.country_code || undefined}
                 data-testid="country-select"
               />
-              <Input
+              <PhoneInput
                 label="form.phone"
                 name="phone"
-                autoComplete="phone"
                 defaultValue={address.phone || undefined}
                 data-testid="phone-input"
               />

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