@salifbiaye/create-boutique 0.3.3 → 0.3.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salifbiaye/create-boutique",
-  "version": "0.3.3",
+  "version": "0.3.5",
   "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/i18n/json/en.json

@@ -23,7 +23,8 @@
       "topbar": "Top bar messages",
       "promo": "Promo banner",
       "vars": "Variables used by theme texts",
-      "identity": "Identity"
+      "identity": "Identity",
+      "share": "Social sharing (link preview)"
     },
     "fields": {
       "startsAt": "Starts at",
@@ -49,7 +50,10 @@
       "countdownTheme": "As the theme",
       "countdownYes": "Always show",
       "countdownNo": "Never show",
-      "promoImage": "Promo banner image"
+      "promoImage": "Promo banner image",
+      "seoTitle": "Share title (70 characters max)",
+      "seoDescription": "Share description (200 characters max)",
+      "seoImage": "Share image (ideally 1200 × 630, jpg, png or webp)"
     },
     "errors": {
       "imageType": "Image must be jpg, png or webp",
@@ -61,6 +65,7 @@
       "hint": "Shown on the category tiles of the stores.",
       "save": "Save image",
       "saved": "Image saved"
-    }
+    },
+    "shareHint": "What shows when the store link is shared (WhatsApp, Facebook, LinkedIn…). Empty = store name, subtitle and main visual."
   }
 }

package/templates/backend/src/admin/i18n/json/fr.json

@@ -23,7 +23,8 @@
       "topbar": "Messages de la barre du haut",
       "promo": "Bandeau promo",
       "vars": "Variables des textes du thème",
-      "identity": "Identité"
+      "identity": "Identité",
+      "share": "Partage sur les réseaux (aperçu du lien)"
     },
     "fields": {
       "startsAt": "Début",
@@ -49,7 +50,10 @@
       "countdownTheme": "Comme le thème",
       "countdownYes": "Toujours afficher",
       "countdownNo": "Ne jamais afficher",
-      "promoImage": "Image du bandeau promo"
+      "promoImage": "Image du bandeau promo",
+      "seoTitle": "Titre de partage (70 caractères max)",
+      "seoDescription": "Description de partage (200 caractères max)",
+      "seoImage": "Image de partage (idéal 1200 × 630, jpg, png ou webp)"
     },
     "errors": {
       "imageType": "L'image doit être en jpg, png ou webp",
@@ -61,6 +65,7 @@
       "hint": "Affichée sur les tuiles catégories des boutiques.",
       "save": "Enregistrer l'image",
       "saved": "Image enregistrée"
-    }
+    },
+    "shareHint": "Ce qui s'affiche quand on partage le lien de la boutique (WhatsApp, Facebook, LinkedIn…). Vide = nom de la boutique, sous-titre et visuel principal."
   }
 }

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

@@ -84,6 +84,9 @@ export function CampaignDrawer({
   const [heroImage, setHeroImage] = useState(c?.hero?.image ?? "")
   const [promoImage, setPromoImage] = useState(c?.promo?.image ?? "")
   const [logo, setLogo] = useState(c?.logo ?? "")
+  // Aperçu de partage (Open Graph) : vide = nom de la boutique, sous-titre et visuel du hero
+  const [seo, setSeo] = useState({ title: c?.seo?.title ?? "", description: c?.seo?.description ?? "" })
+  const [seoImage, setSeoImage] = useState(c?.seo?.image ?? "")
   const [countdown, setCountdown] = useState(c?.showCountdown == null ? "theme" : c.showCountdown ? "yes" : "no")
 
   const save = useMutation({
@@ -124,6 +127,7 @@ export function CampaignDrawer({
       topbar: topbar.some((m) => m.trim()) ? topbar.filter((m) => m.trim()) : undefined,
       hero: clean({ ...hero, bubble: bubble.some((b) => b.trim()) ? bubble : undefined }),
       promo: clean(promo),
+      seo: clean({ ...seo, image: seoImage || undefined }),
     })
   }
 
@@ -131,7 +135,7 @@ export function CampaignDrawer({
   const reset = () => {
     const d = dates()
     if (!d) return
-    save.mutate({ ...d, nextCampaign: nextCampaign || null, vars: clean(vars) ?? null, ...media() }, {
+    save.mutate({ ...d, nextCampaign: nextCampaign || null, vars: clean(vars) ?? null, ...media(), seo: clean({ ...seo, image: seoImage || undefined }) }, {
       onSuccess: () => toast.success(t("campaigns.resetDone")),
     })
   }
@@ -164,6 +168,15 @@ export function CampaignDrawer({
           <Drawer.Description>{t("campaigns.emptyHint")}</Drawer.Description>
         </Drawer.Header>
         <Drawer.Body className="flex flex-col gap-y-8 overflow-y-auto">
+          {section(
+            t("campaigns.sections.share"),
+            <>
+              <Text size="small" className="text-ui-fg-subtle">{t("campaigns.shareHint")}</Text>
+              {field(t("campaigns.fields.seoTitle"), seo.title, (v) => setSeo({ ...seo, title: v }))}
+              {field(t("campaigns.fields.seoDescription"), seo.description, (v) => setSeo({ ...seo, description: v }), true)}
+              <ImageField label={t("campaigns.fields.seoImage")} value={seoImage} onChange={setSeoImage} previewClassName="h-20 w-40 object-cover" />
+            </>
+          )}
           {section(
             t("campaigns.sections.identity"),
             <>

package/templates/backend/src/modules/campaign/validators.ts

@@ -32,6 +32,15 @@ export const CampaignTexts = z.object({
     .partial()
     .optional(),
   sections: z.object({ categories: plain(40), products: plain(40) }).partial().optional(),
+  /** Aperçu de partage (Open Graph / réseaux sociaux) ; vide = nom de la boutique, sous-titre et image du hero */
+  seo: z
+    .object({
+      title: plain(70),
+      description: plain(200),
+      image: z.url().max(500).refine((u) => /\.(jpe?g|png|webp)(\?.*)?$/i.test(u), "Image : jpg, png ou webp"),
+    })
+    .partial()
+    .optional(),
 })
 
 const imageUrl = z

package/templates/backend/src/workflows/upsert-campaign.ts

@@ -7,9 +7,9 @@ type Input = { sales_channel_id: string; campaign: CampaignInput }
 /** Enregistre la campagne d'une boutique (admin « Campagnes », seed, `campaign import`). */
 export const upsertCampaignWorkflow = createWorkflow("upsert-campaign", function (input: Input) {
   const data = transform({ input }, ({ input }) => {
-    const { startsAt, endsAt, nextCampaign, vars, heroImage, logo, promoImage, showCountdown, topbar, hero, promo, sections } = input.campaign
+    const { startsAt, endsAt, nextCampaign, vars, heroImage, logo, promoImage, showCountdown, topbar, hero, promo, sections, seo } = input.campaign
     const texts = Object.fromEntries(
-      Object.entries({ topbar, hero, promo, sections }).filter(([, v]) => v !== undefined && JSON.stringify(v) !== "{}")
+      Object.entries({ topbar, hero, promo, sections, seo }).filter(([, v]) => v !== undefined && JSON.stringify(v) !== "{}")
     )
     return {
       sales_channel_id: input.sales_channel_id,

package/templates/storefront/src/app/layout.tsx

@@ -25,13 +25,29 @@ export const dynamic = "force-dynamic"
 export async function generateMetadata(): Promise<Metadata> {
   const b = getBoutique()
   // Favicon = logo de la boutique s'il existe (admin → Campagnes)
-  const logo = await getCampaign()
-    .then((c) => c.logo)
-    .catch(() => undefined)
+  const campaign = await getCampaign().catch(() => undefined)
+  const logo = campaign?.logo
+  // Aperçu de partage (WhatsApp, Facebook, LinkedIn, X…) : réglages de l'admin, sinon nom, sous-titre et image du hero
+  const seo = campaign?.seo ?? {}
+  const heroImage = campaign?.hero.image && /^https?:\/\//.test(campaign.hero.image) ? campaign.hero.image : undefined
+  const title = seo.title || b.storeName
+  const description = seo.description || campaign?.hero.sub || undefined
+  const image = seo.image || heroImage || logo
   return {
     metadataBase: new URL(b.siblings[b.slug]),
-    title: { default: b.storeName, template: `%s | ${b.storeName}` },
+    title: { default: title, template: `%s | ${b.storeName}` },
+    description,
     ...(logo ? { icons: { icon: logo, apple: logo } } : {}),
+    openGraph: {
+      type: "website",
+      siteName: b.storeName,
+      title,
+      description,
+      locale: b.locale.replace("-", "_"),
+      url: b.siblings[b.slug],
+      ...(image ? { images: [{ url: image, width: 1200, height: 630, alt: title }] } : {}),
+    },
+    twitter: { card: image ? "summary_large_image" : "summary", title, description, ...(image ? { images: [image] } : {}) },
   }
 }
 

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

@@ -16,6 +16,8 @@ export type Campaign = CampaignTexts & {
   freeShipping?: string
   /** Logo (URL) ; absent = pastille de couleur + nom */
   logo?: string
+  /** Aperçu de partage (Open Graph) : titre, description, image ; vides = valeurs par défaut */
+  seo?: { title?: string; description?: string; image?: string }
   /** Compte à rebours : undefined = selon le thème (CSS), true = toujours, false = jamais */
   showCountdown?: boolean
 }
@@ -104,6 +106,7 @@ export const getCampaign = cache(async (): Promise<Campaign> => {
     freeShipping: own.vars?.freeShipping,
     logo: own.logo,
     showCountdown: own.showCountdown,
+    seo: own.seo,
   }
 })
 

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

@@ -125,6 +125,8 @@ export const campaignFileSchema = z
     hero: campaignTextsSchema.shape.hero.partial().optional(),
     promo: campaignTextsSchema.shape.promo.partial().optional(),
     sections: campaignTextsSchema.shape.sections.unwrap().partial().optional(),
+    /** Aperçu de partage (Open Graph) défini dans l'admin */
+    seo: z.object({ title: plain(70), description: plain(200), image: z.url().max(500) }).partial().optional(),
     /** Logo de la boutique (URL du stockage), aussi utilisé comme favicon */
     logo: z.url().max(500).optional(),
     /** undefined = selon le thème */

package/templates/storefront/src/modules/checkout/components/country-select/index.tsx

@@ -1,17 +1,24 @@
 import { forwardRef, useImperativeHandle, useMemo, useRef } from "react"
 
+import { useLocale, useT } from "@lib/boutique/i18n-client"
 import NativeSelect, {
   NativeSelectProps,
 } from "@modules/common/components/native-select"
 import { HttpTypes } from "@medusajs/types"
 
+/**
+ * Liste des pays de la région : noms dans la langue du site (« Sénégal », « Côte d'Ivoire »), triés par ordre
+ * alphabétique, pays de la boutique en tête. (Le starter affichait les noms anglais de Medusa, non triés.)
+ */
 const CountrySelect = forwardRef<
   HTMLSelectElement,
   NativeSelectProps & {
     region?: HttpTypes.StoreRegion
   }
->(({ placeholder = "Country", region, defaultValue, ...props }, ref) => {
+>(({ placeholder = "form.country", region, defaultValue, ...props }, ref) => {
   const innerRef = useRef<HTMLSelectElement>(null)
+  const t = useT()
+  const locale = useLocale()
 
   useImperativeHandle<HTMLSelectElement | null, HTMLSelectElement | null>(
     ref,
@@ -19,25 +26,36 @@ const CountrySelect = forwardRef<
   )
 
   const countryOptions = useMemo(() => {
-    if (!region) {
+    if (!region?.countries) {
       return []
     }
-
-    return region.countries?.map((country) => ({
-      value: country.iso_2,
-      label: country.display_name,
-    }))
-  }, [region])
+    let names: Intl.DisplayNames | undefined
+    try {
+      names = new Intl.DisplayNames([locale], { type: "region" })
+    } catch {
+      names = undefined
+    }
+    const home = (locale.split("-")[1] ?? "").toLowerCase()
+    const options = region.countries
+      .filter((c) => c.iso_2)
+      .map((c) => ({
+        value: c.iso_2!,
+        label: names?.of(c.iso_2!.toUpperCase()) ?? c.display_name ?? c.iso_2!,
+      }))
+      .sort((a, b) => a.label.localeCompare(b.label, locale, { sensitivity: "base" }))
+    const first = options.find((o) => o.value === home)
+    return first ? [first, ...options.filter((o) => o !== first)] : options
+  }, [region, locale])
 
   return (
     <NativeSelect
       ref={innerRef}
-      placeholder={placeholder}
+      placeholder={t(placeholder)}
       defaultValue={defaultValue}
       {...props}
     >
-      {countryOptions?.map(({ value, label }, index) => (
-        <option key={index} value={value}>
+      {countryOptions.map(({ value, label }) => (
+        <option key={value} value={value}>
           {label}
         </option>
       ))}