@salifbiaye/create-boutique 0.2.0 → 0.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salifbiaye/create-boutique",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Usine à Boutiques : génère un projet complet (backend Medusa + une boutique Next.js par campagne) prêt pour docker compose",
   "type": "module",
   "repository": { "type": "git", "url": "git+https://github.com/salifbiaye/create-boutique.git" },

package/templates/backend/src/admin/routes/boutique-campaigns/page.tsx

@@ -19,6 +19,28 @@ function status(c: Boutique["campaign"]): "upcoming" | "live" | "ended" | null {
 
 const COLORS = { upcoming: "blue", live: "green", ended: "grey" } as const
 
+/**
+ * Ouvre le panneau avec la campagne relue sur le serveur (jamais la copie du tableau) : sinon, rouvrir juste après
+ * un enregistrement pouvait repartir d'anciennes valeurs et réenregistrer l'ancienne image.
+ */
+function FreshCampaignDrawer(props: Omit<Parameters<typeof CampaignDrawer>[0], "boutique"> & { boutique: Boutique }) {
+  const { boutique, ...rest } = props
+  const { data, isFetching } = useQuery({
+    queryKey: [...QUERY_KEY, "one", boutique.sales_channel_id],
+    queryFn: () => sdk.client.fetch<{ campaign: Boutique["campaign"] }>(`/admin/boutique-campaigns/${boutique.sales_channel_id}`),
+    staleTime: 0,
+    gcTime: 0,
+  })
+  if (!data || isFetching) {
+    return (
+      <div className="fixed inset-0 z-50 flex items-center justify-center bg-ui-bg-overlay">
+        <Spinner className="animate-spin" />
+      </div>
+    )
+  }
+  return <CampaignDrawer {...rest} boutique={{ ...boutique, campaign: data.campaign ?? null }} />
+}
+
 /** Page « Campagnes » : une ligne par boutique du projet, édition dans un panneau latéral. */
 const CampaignsPage = () => {
   const { t, i18n } = useTranslation()
@@ -93,7 +115,7 @@ const CampaignsPage = () => {
       )}
 
       {editing && (
-        <CampaignDrawer
+        <FreshCampaignDrawer
           boutique={editing}
           others={(data?.boutiques ?? []).filter((b) => b.sales_channel_id !== editing.sales_channel_id).map((b) => b.slug)}
           queryKey={QUERY_KEY}

package/templates/storefront/locales/en.json

@@ -302,5 +302,6 @@
   "account.keepShopping": "Shop the deals",
   "account.profileDone": "Profile completed",
   "account.completeProfile": "Complete your profile (phone, billing address) to check out faster.",
-  "nav.menu": "Menu"
+  "nav.menu": "Menu",
+  "cart.variant": "Variant:"
 }

package/templates/storefront/locales/fr.json

@@ -302,5 +302,6 @@
   "account.keepShopping": "Voir les offres",
   "account.profileDone": "Profil complété",
   "account.completeProfile": "Complétez votre profil (téléphone, adresse de facturation) pour commander plus vite.",
-  "nav.menu": "Menu"
+  "nav.menu": "Menu",
+  "cart.variant": "Variante :"
 }

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

@@ -1,4 +1,5 @@
 import { T } from "@lib/boutique/i18n-client"
+import LocalDate from "@modules/common/components/local-date"
 import { Button } from "@medusajs/ui"
 import { useMemo } from "react"
 
@@ -31,7 +32,7 @@ const OrderCard = ({ order }: OrderCardProps) => {
       </div>
       <div className="flex items-center divide-x divide-gray-200 text-small-regular text-ui-fg-base">
         <span className="pr-2" data-testid="order-created-at">
-          {new Date(order.created_at).toDateString()}
+          <LocalDate iso={order.created_at} style="medium" />
         </span>
         <span className="px-2" data-testid="order-amount">
           {convertToLocale({

package/templates/storefront/src/modules/cart/components/cart-item-select/index.tsx

@@ -44,7 +44,7 @@ const CartItemSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
           onFocus={() => innerRef.current?.focus()}
           onBlur={() => innerRef.current?.blur()}
           className={clx(
-            "relative flex items-center txt-compact-small border text-ui-fg-base group",
+            "ub-qty relative flex items-center txt-compact-small border text-ui-fg-base group",
             className,
             {
               "text-ui-fg-subtle": isPlaceholder,

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

@@ -14,7 +14,7 @@ type PaymentWrapperProps = {
 }
 
 const PaymentWrapper: React.FC<PaymentWrapperProps> = ({ cart, stripeKey, children }) => {
-  const stripePromise = useMemo(() => (stripeKey ? loadStripe(stripeKey) : null), [stripeKey])
+  const stripePromise = useMemo(() => (stripeKey ? loadStripe(stripeKey, { developerTools: { assistant: { enabled: false } } }) : null), [stripeKey])
 
   const paymentSession = cart.payment_collection?.payment_sessions?.find(
     (s) => s.status === "pending"

package/templates/storefront/src/modules/common/components/line-item-options/index.tsx

@@ -1,3 +1,4 @@
+import { T } from "@lib/boutique/i18n-client"
 import { HttpTypes } from "@medusajs/types"
 import { Text } from "@medusajs/ui"
 
@@ -18,7 +19,7 @@ const LineItemOptions = ({
       data-value={dataValue}
       className="inline-block txt-medium text-ui-fg-subtle w-full overflow-hidden text-ellipsis"
     >
-      Variant: {variant?.title}
+      <T k="cart.variant" /> {variant?.title}
     </Text>
   )
 }

package/templates/storefront/src/modules/common/components/local-date/index.tsx

@@ -0,0 +1,9 @@
+"use client"
+
+import { useLocale } from "@lib/boutique/i18n-client"
+
+/** Date formatée dans la langue et le pays de la boutique (ex. « 29 septembre 2026 » en fr-FR). */
+export default function LocalDate({ iso, style = "long" }: { iso: string | Date; style?: "long" | "medium" | "short" }) {
+  const locale = useLocale()
+  return <>{new Date(iso).toLocaleDateString(locale, { dateStyle: style })}</>
+}

package/templates/storefront/src/modules/order/components/order-details/index.tsx

@@ -1,4 +1,5 @@
 import { T } from "@lib/boutique/i18n-client"
+import LocalDate from "@modules/common/components/local-date"
 import { HttpTypes } from "@medusajs/types"
 import { Text } from "@medusajs/ui"
 
@@ -29,7 +30,7 @@ const OrderDetails = ({ order, showStatus }: OrderDetailsProps) => {
       <Text className="mt-2">
         <T k="order.date" />{" "}
         <span data-testid="order-date">
-          {new Date(order.created_at).toLocaleDateString(undefined, { dateStyle: "long" })}
+          <LocalDate iso={order.created_at} />
         </span>
       </Text>
       <Text className="mt-2 text-ui-fg-interactive">

package/templates/storefront/src/modules/order/components/shipping-details/index.tsx

@@ -55,7 +55,7 @@ const ShippingDetails = ({ order }: ShippingDetailsProps) => {
           className="flex flex-col w-1/3"
           data-testid="shipping-method-summary"
         >
-          <Text className="txt-medium-plus text-ui-fg-base mb-1">Method</Text>
+          <Text className="txt-medium-plus text-ui-fg-base mb-1"><T k="order.method" /></Text>
           <Text className="txt-medium text-ui-fg-subtle">
             {(order as any).shipping_methods[0]?.name} (
             {convertToLocale({

package/templates/storefront/src/styles/ub/medusa-ui.css

@@ -91,9 +91,26 @@ html[data-theme] {
 
 /* Couleurs Tailwind écrites en dur dans le starter (compte, panier, checkout, squelettes de chargement) :
    ramenées aux tokens du thème, sinon un thème sombre affiche des blocs blancs au texte illisible. */
-.ub :is(.bg-white, .bg-gray-50, .bg-neutral-50) {
+/* bg-white = conteneurs de page du starter (étapes du checkout, résumé, code promo) sans marge intérieure :
+   transparents (en surface grise, leur contenu collé aux bords paraissait coupé). Menus déroulants : surface. */
+.ub .bg-white {
+  background-color: transparent;
+}
+.ub .bg-white:is(.absolute, .fixed),
+.ub :is(.bg-gray-50, .bg-neutral-50) {
   background-color: var(--surface);
 }
+/* Sélecteur de quantité (IconBadge de Medusa UI, fond blanc imposé) et listes déroulantes natives */
+.ub .ub-qty {
+  background: var(--bg-field) !important;
+  border-color: var(--border-base) !important;
+  color: var(--ink) !important;
+  border-radius: var(--ub-r-btn);
+}
+.ub select option {
+  background: var(--surface);
+  color: var(--ink);
+}
 .ub :is(.bg-gray-100, .bg-neutral-100) {
   background-color: var(--tint-1);
 }

package/templates/storefront/src/styles/ub/responsive.css

@@ -1,5 +1,6 @@
 /* Mobile et tablette : menu burger, bandeau plus compact, pas de débordement horizontal. */
 .ub-burger { display: none; }
+.ub-burger:not([open]) .ub-burger__panel { display: none; }
 
 @media (max-width: 900px) {
   html, body { overflow-x: clip; }
@@ -35,6 +36,22 @@
 
   .ub-section { padding: var(--space-8) 0; }
   .ub-wrap { padding: 0 var(--space-4); }
+
+  /* Bandeau promo : marges réduites, contenu sur toute la largeur */
+  .ub-promo { padding: var(--space-8) var(--space-6) !important; gap: var(--space-6) !important; min-width: 0; }
+  .ub-promo__text { min-width: 0; }
+  .ub-promo__media { height: 200px; }
+
+  /* Compte à rebours : les 4 cases se partagent la largeur (plus de débordement) */
+  .ub-countdown { width: 100%; max-width: 360px; gap: 6px; }
+  .ub-countdown__c { flex: 1 1 0; min-width: 0 !important; }
+
+  /* Carte d'offres (sombre ou jaune) : pas de retrait sous le numéro, prix + bouton qui passent à la ligne */
+  .ub-spot { padding: var(--space-8) var(--space-4); }
+  .ub-spot__head { margin-bottom: var(--space-8); }
+  .ub-spot__label { padding: var(--space-4) !important; gap: var(--space-3) !important; }
+  .ub-spot__more p { padding: 0 var(--space-4) var(--space-3) !important; }
+  .ub-spot__buy { flex-wrap: wrap; padding: 0 var(--space-4) var(--space-4) !important; gap: var(--space-3); }
 }
 
 @media (max-width: 600px) {
@@ -54,4 +71,13 @@
   .ub-badge { font-size: 11px !important; padding: 3px 7px !important; }
   .ub-trust { gap: var(--space-3) !important; }
   .ub-sec-head h2 { font-size: 22px; line-height: 28px; }
+
+  .ub-promo { padding: var(--space-6) var(--space-4) !important; }
+  .ub-promo h2 { font-size: 26px !important; line-height: 30px !important; }
+  .ub-promo__media { height: 160px; }
+  .ub-countdown__c { height: 54px !important; }
+  .ub-countdown__c b { font-size: 19px !important; line-height: 22px !important; }
+  .ub-countdown__c small { font-size: 10px !important; }
+  .ub-spot__name { font-size: 16px; }
+  .ub-spot__cta { padding: 8px 14px; }
 }