@salifbiaye/create-boutique 0.2.0 → 0.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salifbiaye/create-boutique",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "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/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/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; }
 }