@salifbiaye/create-boutique 0.3.3 → 0.3.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salifbiaye/create-boutique",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "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/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>
       ))}