@doswiftly/cli 0.1.18 → 0.1.20

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

@@ -15,13 +15,8 @@ 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';
 
-// Ensure Textarea exists or create a simple version
-const TextareaComponent = typeof Textarea === 'undefined'
-  ? ({ className, ...props }: React.TextareaHTMLAttributes<HTMLTextAreaElement>) => (
-      <textarea className={cn('flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', className)} {...props} />
-    )
-  : Textarea;
 
 interface ReviewFormProps {
   productId: string;
@@ -51,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);
@@ -89,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;
     }
 
@@ -127,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);
     }
@@ -138,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
@@ -170,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>
@@ -182,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"
             />
@@ -195,12 +187,12 @@ export function ReviewForm({
 
           {/* Content */}
           <div>
-            <Label htmlFor="content">Treść opinii *</Label>
-            <TextareaComponent
+            <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
@@ -209,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())}
               />
@@ -251,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())}
               />
@@ -294,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}
@@ -305,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>
@@ -325,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/product/savings-display.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import { TrendingDown, DollarSign, Percent } from "lucide-react";
-import { useCurrencyStore } from "@/stores/currency-store";
-import { formatAmount } from "@/lib/format";
+import { useCurrencyStore } from "@doswiftly/storefront-sdk/react";
+import { formatAmount } from "@doswiftly/storefront-sdk";
 
 export interface SavingsDisplayProps {
   originalPrice: number;
@@ -27,10 +27,15 @@ export function SavingsDisplay({
   className = "",
 }: SavingsDisplayProps) {
   const preferredCurrency = useCurrencyStore((state) => state.currency);
+  const isLoaded = useCurrencyStore((state) => state.isLoaded);
   const finalCurrency = currency || preferredCurrency || "PLN";
 
   if (salePrice >= originalPrice) return null;
 
+  if (!isLoaded && !currency) {
+    return <span className={`inline-block h-4 w-20 animate-pulse rounded bg-muted ${className}`} />;
+  }
+
   const savingsAmount = originalPrice - salePrice;
   const savingsPercentage = Math.round(
     (savingsAmount / originalPrice) * 100
@@ -127,6 +132,7 @@ export function TotalSavings({
   className = "",
 }: TotalSavingsProps) {
   const preferredCurrency = useCurrencyStore((state) => state.currency);
+  const isLoaded = useCurrencyStore((state) => state.isLoaded);
   const finalCurrency = currency || preferredCurrency || "PLN";
 
   const totalSavings = items.reduce((sum, item) => {
@@ -136,6 +142,10 @@ export function TotalSavings({
 
   if (totalSavings <= 0) return null;
 
+  if (!isLoaded && !currency) {
+    return <span className={`inline-block h-5 w-24 animate-pulse rounded bg-muted ${className}`} />;
+  }
+
   return (
     <div
       className={`flex items-center justify-between rounded-lg bg-green-50 dark:bg-green-900/20 px-4 py-3 ${className}`}
@@ -169,10 +179,15 @@ export function SavingsBreakdown({
   className = "",
 }: SavingsBreakdownProps) {
   const preferredCurrency = useCurrencyStore((state) => state.currency);
+  const isLoaded = useCurrencyStore((state) => state.isLoaded);
   const finalCurrency = currency || preferredCurrency || "PLN";
 
   if (salePrice >= originalPrice) return null;
 
+  if (!isLoaded && !currency) {
+    return <span className={`inline-block h-24 w-full animate-pulse rounded bg-muted ${className}`} />;
+  }
+
   const savingsAmount = originalPrice - salePrice;
   const savingsPercentage = Math.round(
     (savingsAmount / originalPrice) * 100

package/templates/storefront-nextjs-shadcn/components/product/similar-products.tsx

@@ -1,10 +1,11 @@
 "use client";
 
-import { ProductCard, type ProductCardProduct } from "./product-card";
+import { ProductCard } from "./product-card";
 import { cn } from "@/lib/utils";
+import type { ProductCardFields } from "@/lib/graphql/fragments";
 
 export interface SimilarProductsProps {
-  products: ProductCardProduct[];
+  products: ProductCardFields[];
   title?: string;
   className?: string;
   columns?: 2 | 3 | 4;

package/templates/storefront-nextjs-shadcn/components/providers/index.ts

@@ -4,5 +4,5 @@
  * @module storefront-nextjs/components/providers
  */
 
-export { CurrencyProvider } from './currency-provider';
 export { QueryProvider } from './query-provider';
+export { StoresProvider } from './stores-provider';

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

@@ -0,0 +1,63 @@
+'use client';
+
+import { useRef, type ReactNode } from 'react';
+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.
+ *
+ * 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 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={cartStoreRef.current}>
+      <CheckoutProvider store={checkoutStoreRef.current}>
+        <WishlistProvider store={wishlistStoreRef.current}>
+          {children}
+        </WishlistProvider>
+      </CheckoutProvider>
+    </CartProvider>
+  );
+}

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

@@ -2,7 +2,7 @@
 
 import * as React from "react";
 import { ThemeProvider as NextThemesProvider } from "next-themes";
-import { type ThemeProviderProps } from "next-themes/dist/types";
+import { type ThemeProviderProps } from "next-themes";
 
 /**
  * ThemeProvider - Provides theme context (light/dark/system)

package/templates/storefront-nextjs-shadcn/components/returns/index.ts

@@ -9,9 +9,9 @@
 
 export {
   ReturnRequestForm,
-  ReturnRequestFormSkeleton,
   type ReturnRequestFormProps,
-  type EligibleOrderItem,
+  type ReturnableItem,
+  type ReturnFormData,
 } from "./return-request-form";
 
 export {