@doswiftly/cli 0.1.19 → 0.1.20

package/templates/storefront-nextjs-shadcn/components/product/review-form.tsx

@@ -15,6 +15,7 @@ import { Textarea } from '@/components/ui/textarea';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { cn } from '@/lib/utils';
 import { toast } from 'sonner';
+import { useTranslations } from 'next-intl';
 
 
 interface ReviewFormProps {
@@ -45,6 +46,7 @@ export function ReviewForm({
   orderId,
   className,
 }: ReviewFormProps) {
+  const t = useTranslations('product.review');
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [rating, setRating] = useState(0);
   const [hoverRating, setHoverRating] = useState(0);
@@ -83,17 +85,17 @@ export function ReviewForm({
     e.preventDefault();
 
     if (rating === 0) {
-      toast.error('Wybierz ocenę');
+      toast.error(t('selectRating'));
       return;
     }
 
     if (!content.trim()) {
-      toast.error('Napisz treść opinii');
+      toast.error(t('writeReview'));
       return;
     }
 
     if (!authorName.trim()) {
-      toast.error('Podaj swoje imię');
+      toast.error(t('enterName'));
       return;
     }
 
@@ -121,9 +123,9 @@ export function ReviewForm({
       setAuthorName('');
       setAuthorEmail('');
 
-      toast.success('Dziękujemy za opinię!');
+      toast.success(t('thankYou'));
     } catch (error) {
-      toast.error('Nie udało się dodać opinii. Spróbuj ponownie.');
+      toast.error(t('failed'));
     } finally {
       setIsSubmitting(false);
     }
@@ -132,16 +134,16 @@ export function ReviewForm({
   return (
     <Card className={className}>
       <CardHeader>
-        <CardTitle>Dodaj opinię</CardTitle>
+        <CardTitle>{t('addReview')}</CardTitle>
         <p className="text-sm text-muted-foreground">
-          Podziel się swoją opinią o produkcie: {productTitle}
+          {t('shareOpinion', { productTitle })}
         </p>
       </CardHeader>
       <CardContent>
         <form onSubmit={handleSubmit} className="space-y-6">
           {/* Rating */}
           <div>
-            <Label className="mb-2 block">Ocena *</Label>
+            <Label className="mb-2 block">{t('rating')} *</Label>
             <div className="flex items-center gap-1">
               {[1, 2, 3, 4, 5].map((star) => (
                 <button
@@ -164,11 +166,7 @@ export function ReviewForm({
               ))}
               {rating > 0 && (
                 <span className="ml-2 text-sm text-muted-foreground">
-                  {rating === 1 && 'Bardzo słabo'}
-                  {rating === 2 && 'Słabo'}
-                  {rating === 3 && 'Średnio'}
-                  {rating === 4 && 'Dobrze'}
-                  {rating === 5 && 'Doskonale'}
+                  {t(`ratingLabels.${rating}` as 'ratingLabels.1' | 'ratingLabels.2' | 'ratingLabels.3' | 'ratingLabels.4' | 'ratingLabels.5')}
                 </span>
               )}
             </div>
@@ -176,12 +174,12 @@ export function ReviewForm({
 
           {/* Title */}
           <div>
-            <Label htmlFor="title">Tytuł opinii</Label>
+            <Label htmlFor="title">{t('title')}</Label>
             <Input
               id="title"
               value={title}
               onChange={(e) => setTitle(e.target.value)}
-              placeholder="Krótkie podsumowanie..."
+              placeholder={t('titlePlaceholder')}
               maxLength={100}
               className="mt-1.5"
             />
@@ -189,12 +187,12 @@ export function ReviewForm({
 
           {/* Content */}
           <div>
-            <Label htmlFor="content">Treść opinii *</Label>
+            <Label htmlFor="content">{t('content')} *</Label>
             <Textarea
               id="content"
               value={content}
               onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setContent(e.target.value)}
-              placeholder="Opisz swoje doświadczenia z produktem..."
+              placeholder={t('contentPlaceholder')}
               rows={4}
               className="mt-1.5"
               required
@@ -203,12 +201,12 @@ export function ReviewForm({
 
           {/* Pros */}
           <div>
-            <Label>Zalety</Label>
+            <Label>{t('pros')}</Label>
             <div className="flex gap-2 mt-1.5">
               <Input
                 value={newPro}
                 onChange={(e) => setNewPro(e.target.value)}
-                placeholder="Dodaj zaletę..."
+                placeholder={t('addPro')}
                 maxLength={50}
                 onKeyDown={(e) => e.key === 'Enter' && (e.preventDefault(), handleAddPro())}
               />
@@ -245,12 +243,12 @@ export function ReviewForm({
 
           {/* Cons */}
           <div>
-            <Label>Wady</Label>
+            <Label>{t('cons')}</Label>
             <div className="flex gap-2 mt-1.5">
               <Input
                 value={newCon}
                 onChange={(e) => setNewCon(e.target.value)}
-                placeholder="Dodaj wadę..."
+                placeholder={t('addCon')}
                 maxLength={50}
                 onKeyDown={(e) => e.key === 'Enter' && (e.preventDefault(), handleAddCon())}
               />
@@ -288,7 +286,7 @@ export function ReviewForm({
           {/* Author Info */}
           <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
             <div>
-              <Label htmlFor="authorName">Twoje imię *</Label>
+              <Label htmlFor="authorName">{t('yourName')} *</Label>
               <Input
                 id="authorName"
                 value={authorName}
@@ -299,17 +297,17 @@ export function ReviewForm({
               />
             </div>
             <div>
-              <Label htmlFor="authorEmail">Email (opcjonalnie)</Label>
+              <Label htmlFor="authorEmail">{t('emailOptional')}</Label>
               <Input
                 id="authorEmail"
                 type="email"
                 value={authorEmail}
                 onChange={(e) => setAuthorEmail(e.target.value)}
-                placeholder="jan@email.com"
+                placeholder={t('emailPlaceholder')}
                 className="mt-1.5"
               />
               <p className="text-xs text-muted-foreground mt-1">
-                Nie będzie widoczny publicznie
+                {t('emailNotPublic')}
               </p>
             </div>
           </div>
@@ -319,10 +317,10 @@ export function ReviewForm({
             {isSubmitting ? (
               <>
                 <Loader2 className="h-4 w-4 mr-2 animate-spin" />
-                Wysyłanie...
+                {t('submitting')}
               </>
             ) : (
-              'Dodaj opinię'
+              t('addReview')
             )}
           </Button>
         </form>

package/templates/storefront-nextjs-shadcn/components/providers/language-sync-provider.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { useEffect } from "react";
+import { useLanguageStore } from "@doswiftly/storefront-sdk/react";
+
+interface LanguageSyncProviderProps {
+  locale: string;
+  children: React.ReactNode;
+}
+
+/**
+ * Syncs the URL locale (from next-intl) with the SDK language store.
+ *
+ * Flow: URL (/en) -> next-intl -> LanguageSyncProvider -> SDK store -> X-Lang header -> backend
+ */
+export function LanguageSyncProvider({
+  locale,
+  children,
+}: LanguageSyncProviderProps) {
+  const setLanguage = useLanguageStore((s) => s.setLanguage);
+
+  useEffect(() => {
+    setLanguage(locale);
+  }, [locale, setLanguage]);
+
+  return <>{children}</>;
+}

package/templates/storefront-nextjs-shadcn/components/providers/stores-provider.tsx

@@ -1,9 +1,13 @@
 'use client';
 
 import { useRef, type ReactNode } from 'react';
-import { CartProvider, createCartStore } from '@/stores/cart-store';
+import { useQueryClient } from '@tanstack/react-query';
+import { createCartStore, CartProvider } from '@/stores/cart-store';
 import { CheckoutProvider, createCheckoutStore } from '@/stores/checkout-store';
 import { WishlistProvider, createWishlistStore } from '@/stores/wishlist-store';
+import { useCartDI } from '@/hooks/use-cart-di';
+import { queryKeys } from '@/lib/graphql/query-keys';
+import { toast } from 'sonner';
 
 /**
  * Provides Context-based Zustand stores to the component tree.
@@ -11,17 +15,46 @@ import { WishlistProvider, createWishlistStore } from '@/stores/wishlist-store';
  * Creates store instances once via useRef (stable across re-renders)
  * and wraps children in Provider components.
  *
+ * Cart store uses SDK DI pattern — template provides CartActions implementation,
+ * SDK orchestrates state (init, mutations, error handling).
+ *
  * Must be placed inside StorefrontProvider (SDK stores) and QueryProvider.
  */
 export function StoresProvider({ children }: { children: ReactNode }) {
-  const cartStore = useRef(createCartStore()).current;
-  const checkoutStore = useRef(createCheckoutStore()).current;
-  const wishlistStore = useRef(createWishlistStore()).current;
+  const queryClient = useQueryClient();
+  const cartActions = useCartDI();
+  const actionsRef = useRef(cartActions);
+  actionsRef.current = cartActions;
+
+  const cartStoreRef = useRef<ReturnType<typeof createCartStore> | null>(null);
+  if (!cartStoreRef.current) {
+    cartStoreRef.current = createCartStore({
+      getActions: () => actionsRef.current,
+      onMutationSuccess: (action) => {
+        queryClient.invalidateQueries({ queryKey: queryKeys.cart.all() });
+        if (action === 'addToCart') {
+          toast.success('Added to cart');
+        } else if (action === 'removeFromCart') {
+          toast.success('Removed from cart');
+        }
+      },
+      onMutationError: (_action, error) => {
+        const message = error instanceof Error ? error.message : 'Cart operation failed';
+        toast.error(message);
+      },
+    });
+  }
+
+  const checkoutStoreRef = useRef<ReturnType<typeof createCheckoutStore> | null>(null);
+  if (!checkoutStoreRef.current) checkoutStoreRef.current = createCheckoutStore();
+
+  const wishlistStoreRef = useRef<ReturnType<typeof createWishlistStore> | null>(null);
+  if (!wishlistStoreRef.current) wishlistStoreRef.current = createWishlistStore();
 
   return (
-    <CartProvider store={cartStore}>
-      <CheckoutProvider store={checkoutStore}>
-        <WishlistProvider store={wishlistStore}>
+    <CartProvider store={cartStoreRef.current}>
+      <CheckoutProvider store={checkoutStoreRef.current}>
+        <WishlistProvider store={wishlistStoreRef.current}>
           {children}
         </WishlistProvider>
       </CheckoutProvider>

package/templates/storefront-nextjs-shadcn/components/returns/return-request-form.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState } from "react";
+import { useTranslations } from "next-intl";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import * as z from "zod";
@@ -104,46 +105,28 @@ export interface ReturnFormData {
   }[];
 }
 
-const defaultReasons: ReturnReasonOption[] = [
-  {
-    value: "DEFECTIVE",
-    label: "Defective Product",
-    description: "The product has a manufacturing defect",
-  },
-  {
-    value: "NOT_AS_DESCRIBED",
-    label: "Not as Described",
-    description: "The product does not match the description",
-  },
-  {
-    value: "WRONG_ITEM",
-    label: "Wrong Item Received",
-    description: "You received a different item",
-  },
-  {
-    value: "CHANGED_MIND",
-    label: "Changed My Mind",
-    description: "You no longer want the product",
-  },
-  {
-    value: "BETTER_PRICE",
-    label: "Found Better Price",
-    description: "Found the same product cheaper elsewhere",
-  },
-  {
-    value: "DAMAGED_SHIPPING",
-    label: "Damaged in Shipping",
-    description: "The product was damaged during delivery",
-  },
-  { value: "OTHER", label: "Other", description: "Another reason" },
-];
-
-const itemConditions = [
-  { value: "NEW", label: "New (unused, in original packaging)" },
-  { value: "OPENED", label: "Opened (packaging opened but unused)" },
-  { value: "USED", label: "Used" },
-  { value: "DAMAGED", label: "Damaged" },
-];
+function useDefaultReasons(): ReturnReasonOption[] {
+  const t = useTranslations("returns");
+  return [
+    { value: "DEFECTIVE", label: t("reasonDefective"), description: t("reasonDefectiveDesc") },
+    { value: "NOT_AS_DESCRIBED", label: t("reasonNotAsDescribed"), description: t("reasonNotAsDescribedDesc") },
+    { value: "WRONG_ITEM", label: t("reasonWrongItem"), description: t("reasonWrongItemDesc") },
+    { value: "CHANGED_MIND", label: t("reasonChangedMind"), description: t("reasonChangedMindDesc") },
+    { value: "BETTER_PRICE", label: t("reasonBetterPrice"), description: t("reasonBetterPriceDesc") },
+    { value: "DAMAGED_SHIPPING", label: t("reasonDamagedShipping"), description: t("reasonDamagedShippingDesc") },
+    { value: "OTHER", label: t("reasonOther"), description: t("reasonOtherDesc") },
+  ];
+}
+
+function useItemConditions() {
+  const t = useTranslations("returns");
+  return [
+    { value: "NEW", label: t("conditionNew") },
+    { value: "OPENED", label: t("conditionOpened") },
+    { value: "USED", label: t("conditionUsed") },
+    { value: "DAMAGED", label: t("conditionDamaged") },
+  ];
+}
 
 const formSchema = z.object({
   reason: z.enum([
@@ -197,11 +180,16 @@ export function ReturnRequestForm({
   orderId,
   orderNumber,
   items,
-  reasons = defaultReasons,
+  reasons,
   onSubmit,
   onCancel,
   className = "",
 }: ReturnRequestFormProps) {
+  const t = useTranslations("returns");
+  const tc = useTranslations("common");
+  const defaultReasons = useDefaultReasons();
+  const itemConditions = useItemConditions();
+  const resolvedReasons = reasons ?? defaultReasons;
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [submitError, setSubmitError] = useState<string | null>(null);
   const [submitSuccess, setSubmitSuccess] = useState(false);
@@ -264,14 +252,13 @@ export function ReturnRequestForm({
           <div className="text-center py-8">
             <CheckCircle className="mx-auto h-16 w-16 text-green-600 mb-4" />
             <h3 className="text-xl font-semibold mb-2">
-              Return Request Submitted
+              {t("submitted")}
             </h3>
             <p className="text-muted-foreground mb-6">
-              Your return request has been submitted successfully. You will
-              receive an email with further instructions.
+              {t("submittedDesc")}
             </p>
             <Button variant="outline" onClick={onCancel}>
-              Back to Order
+              {t("backToOrder")}
             </Button>
           </div>
         </CardContent>
@@ -284,7 +271,7 @@ export function ReturnRequestForm({
       <CardHeader>
         <CardTitle className="flex items-center gap-2">
           <Package className="h-5 w-5" />
-          Return Request for Order #{orderNumber}
+          {t("title", { orderNumber })}
         </CardTitle>
       </CardHeader>
 
@@ -296,14 +283,14 @@ export function ReturnRequestForm({
           >
             {/* Step 1: Select Items */}
             <div className="space-y-4">
-              <h3 className="font-medium">1. Select Items to Return</h3>
+              <h3 className="font-medium">{t("selectItems")}</h3>
 
               {items.length === 0 ? (
                 <Alert>
                   <AlertCircle className="h-4 w-4" />
-                  <AlertTitle>No Returnable Items</AlertTitle>
+                  <AlertTitle>{t("noReturnableItems")}</AlertTitle>
                   <AlertDescription>
-                    There are no items eligible for return in this order.
+                    {t("noReturnableItemsDesc")}
                   </AlertDescription>
                 </Alert>
               ) : (
@@ -361,7 +348,7 @@ export function ReturnRequestForm({
                               </p>
                             )}
                             <p className="text-sm mt-1">
-                              Ordered: {item.quantity} | Returnable:{" "}
+                              {t("ordered")} {item.quantity} | {t("returnable")}{" "}
                               {item.returnableQuantity}
                             </p>
                           </div>
@@ -384,7 +371,7 @@ export function ReturnRequestForm({
                               name={`items.${index}.quantity`}
                               render={({ field }) => (
                                 <FormItem>
-                                  <FormLabel>Quantity to Return</FormLabel>
+                                  <FormLabel>{t("quantityToReturn")}</FormLabel>
                                   <FormControl>
                                     <div className="flex items-center gap-2">
                                       <Button
@@ -432,14 +419,14 @@ export function ReturnRequestForm({
                               name={`items.${index}.condition`}
                               render={({ field }) => (
                                 <FormItem>
-                                  <FormLabel>Item Condition</FormLabel>
+                                  <FormLabel>{t("itemCondition")}</FormLabel>
                                   <Select
                                     onValueChange={field.onChange}
                                     defaultValue={field.value}
                                   >
                                     <FormControl>
                                       <SelectTrigger>
-                                        <SelectValue placeholder="Select condition" />
+                                        <SelectValue placeholder={t("selectCondition")} />
                                       </SelectTrigger>
                                     </FormControl>
                                     <SelectContent>
@@ -466,32 +453,32 @@ export function ReturnRequestForm({
 
               {selectedCount > 0 && (
                 <Badge variant="secondary">
-                  {selectedCount} item{selectedCount > 1 ? "s" : ""} selected
+                  {selectedCount} {t("itemsSelected")}
                 </Badge>
               )}
             </div>
 
             {/* Step 2: Return Reason */}
             <div className="space-y-4">
-              <h3 className="font-medium">2. Reason for Return</h3>
+              <h3 className="font-medium">{t("returnReason")}</h3>
 
               <FormField
                 control={form.control}
                 name="reason"
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>Primary Reason</FormLabel>
+                    <FormLabel>{t("primaryReason")}</FormLabel>
                     <Select
                       onValueChange={field.onChange}
                       defaultValue={field.value}
                     >
                       <FormControl>
                         <SelectTrigger>
-                          <SelectValue placeholder="Select a reason" />
+                          <SelectValue placeholder={t("selectReason")} />
                         </SelectTrigger>
                       </FormControl>
                       <SelectContent>
-                        {reasons.map((reason) => (
+                        {resolvedReasons.map((reason) => (
                           <SelectItem key={reason.value} value={reason.value}>
                             {reason.label}
                           </SelectItem>
@@ -508,16 +495,16 @@ export function ReturnRequestForm({
                 name="customerNote"
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>Additional Details (Optional)</FormLabel>
+                    <FormLabel>{t("additionalDetails")}</FormLabel>
                     <FormControl>
                       <Textarea
-                        placeholder="Please provide any additional details about your return..."
+                        placeholder={t("additionalDetailsPlaceholder")}
                         className="resize-none"
                         {...field}
                       />
                     </FormControl>
                     <FormDescription>
-                      Help us process your return faster by providing details.
+                      {t("additionalDetailsHint")}
                     </FormDescription>
                     <FormMessage />
                   </FormItem>
@@ -527,7 +514,7 @@ export function ReturnRequestForm({
 
             {/* Step 3: Compensation Type */}
             <div className="space-y-4">
-              <h3 className="font-medium">3. Compensation Preference</h3>
+              <h3 className="font-medium">{t("compensationPreference")}</h3>
 
               <FormField
                 control={form.control}
@@ -546,11 +533,10 @@ export function ReturnRequestForm({
                           </FormControl>
                           <FormLabel className="font-normal cursor-pointer">
                             <span className="font-medium">
-                              Refund to Original Payment
+                              {t("refundOriginal")}
                             </span>
                             <p className="text-sm text-muted-foreground">
-                              Refund will be processed to your original payment
-                              method
+                              {t("refundOriginalDesc")}
                             </p>
                           </FormLabel>
                         </FormItem>
@@ -559,9 +545,9 @@ export function ReturnRequestForm({
                             <RadioGroupItem value="STORE_CREDIT" />
                           </FormControl>
                           <FormLabel className="font-normal cursor-pointer">
-                            <span className="font-medium">Store Credit</span>
+                            <span className="font-medium">{t("storeCredit")}</span>
                             <p className="text-sm text-muted-foreground">
-                              Receive store credit for future purchases
+                              {t("storeCreditDesc")}
                             </p>
                           </FormLabel>
                         </FormItem>
@@ -577,7 +563,7 @@ export function ReturnRequestForm({
             {submitError && (
               <Alert variant="destructive">
                 <AlertCircle className="h-4 w-4" />
-                <AlertTitle>Error</AlertTitle>
+                <AlertTitle>{t("error")}</AlertTitle>
                 <AlertDescription>{submitError}</AlertDescription>
               </Alert>
             )}
@@ -591,14 +577,14 @@ export function ReturnRequestForm({
                   onClick={onCancel}
                   disabled={isSubmitting}
                 >
-                  Cancel
+                  {tc("cancel")}
                 </Button>
               )}
               <Button type="submit" disabled={isSubmitting || selectedCount === 0}>
                 {isSubmitting && (
                   <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                 )}
-                Submit Return Request
+                {t("submitReturn")}
               </Button>
             </div>
           </form>

package/templates/storefront-nextjs-shadcn/components/search/search-bar.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import { useState, useEffect, useRef, useCallback } from "react";
-import { useRouter } from "next/navigation";
+import { useTranslations } from "next-intl";
+import { useRouter } from "@/i18n/navigation";
 import { Search, X } from "lucide-react";
 import { Input } from "@/components/ui/input";
 import { SearchSuggestions } from "./search-suggestions";
@@ -19,10 +20,12 @@ export interface SearchBarProps {
  */
 export function SearchBar({
   defaultValue = "",
-  placeholder = "Search products...",
+  placeholder,
   className,
   showSuggestions = true,
 }: SearchBarProps) {
+  const t = useTranslations("search");
+  const resolvedPlaceholder = placeholder ?? t("placeholder");
   const router = useRouter();
   const [query, setQuery] = useState(defaultValue);
   const [isOpen, setIsOpen] = useState(false);
@@ -104,7 +107,7 @@ export function SearchBar({
           <Input
             ref={inputRef}
             type="search"
-            placeholder={placeholder}
+            placeholder={resolvedPlaceholder}
             value={query}
             onChange={(e) => setQuery(e.target.value)}
             onFocus={() => setIsOpen(true)}
@@ -120,7 +123,7 @@ export function SearchBar({
               type="button"
               onClick={handleClear}
               className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
-              aria-label="Clear search"
+              aria-label={t("clearSearch")}
             >
               <X className="h-5 w-5" />
             </button>