@salifbiaye/create-boutique 0.2.1 → 0.2.3

package/package.json

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

@@ -302,5 +302,8 @@
   "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:",
+  "checkout.testMode.title": "Demo store: no real payment",
+  "checkout.testMode.text": "Card payments are in test mode: you will not be charged. Use the test card below with any future expiry date (e.g. 12/34) and any CVC (e.g. 123)."
 }

package/templates/storefront/locales/fr.json

@@ -302,5 +302,8 @@
   "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 :",
+  "checkout.testMode.title": "Boutique de démonstration : aucun paiement réel",
+  "checkout.testMode.text": "Le paiement par carte est en mode test : aucune somme ne sera débitée. Utilisez la carte de test ci-dessous, avec une date d'expiration future (ex. 12/34) et n'importe quel code (ex. 123)."
 }

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/checkout/components/payment/index.tsx

@@ -19,9 +19,12 @@ import { useCallback, useEffect, useState } from "react"
 const Payment = ({
   cart,
   availablePaymentMethods,
+  testMode = false,
 }: {
   cart: any
   availablePaymentMethods: any[]
+  /** Clé Stripe de test : affiche la carte de test à utiliser (aucun paiement réel) */
+  testMode?: boolean
 }) => {
   const activeSession = cart.payment_collection?.payment_sessions?.find(
     (paymentSession: any) => paymentSession.status === "pending"
@@ -137,6 +140,17 @@ const Payment = ({
       </div>
       <div>
         <div className={isOpen ? "block" : "hidden"}>
+          {testMode && (
+            <div className="ub-testpay" role="note" data-testid="stripe-test-mode">
+              <b>
+                <T k="checkout.testMode.title" />
+              </b>
+              <span>
+                <T k="checkout.testMode.text" />
+              </span>
+              <code>4242 4242 4242 4242</code>
+            </div>
+          )}
           {!paidByGiftcard && availablePaymentMethods?.length && (
             <>
               <RadioGroup

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/checkout/templates/checkout-form/index.tsx

@@ -30,7 +30,12 @@ export default async function CheckoutForm({
 
       <Shipping cart={cart} availableShippingMethods={shippingMethods} />
 
-      <Payment cart={cart} availablePaymentMethods={paymentMethods} />
+      {/* Clé Stripe de test : bandeau « aucun paiement réel » + carte de test (disparaît avec une clé pk_live_) */}
+      <Payment
+        cart={cart}
+        availablePaymentMethods={paymentMethods}
+        testMode={!!process.env.STRIPE_PUBLISHABLE_KEY?.startsWith("pk_test_")}
+      />
 
       <Review cart={cart} />
     </div>

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/forms.css

@@ -59,3 +59,29 @@
   pointer-events: none;
 }
 .ub-phone[data-invalid] .ub-phone__field input { border-color: var(--sale); }
+
+/* Paiement en mode test (clé Stripe pk_test_) : carte de test à utiliser, aucun débit réel */
+.ub-testpay {
+  display: grid;
+  gap: 6px;
+  margin-bottom: var(--space-4);
+  padding: var(--space-4);
+  border: 1px dashed var(--primary);
+  border-radius: var(--ub-r-card);
+  background: color-mix(in srgb, var(--primary) 10%, transparent);
+  font-size: 14px;
+  line-height: 21px;
+}
+.ub-testpay b { font-size: 15px; }
+.ub-testpay span { color: var(--ink-muted); }
+.ub-testpay code {
+  justify-self: start;
+  margin-top: 4px;
+  padding: 6px 12px;
+  border-radius: var(--radius-sm);
+  background: var(--ink);
+  color: var(--bg);
+  font: 700 15px/20px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  letter-spacing: 0.06em;
+  user-select: all;
+}