@doswiftly/cli 0.1.19 → 0.1.20

package/templates/storefront-nextjs-shadcn/components/loyalty/referral-section.tsx

@@ -12,6 +12,7 @@
  */
 
 import { useState } from 'react';
+import { useTranslations } from 'next-intl';
 import { Users, Copy, Check, Share2, Gift, UserPlus, Clock, Award } from 'lucide-react';
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
@@ -36,6 +37,7 @@ export function ReferralSection({
   bonusPoints = 0,
   className,
 }: ReferralSectionProps) {
+  const t = useTranslations("loyalty.referral");
   const { referralCode, shareUrl } = referralStats;
   const [copied, setCopied] = useState<'code' | 'url' | null>(null);
 
@@ -47,10 +49,10 @@ export function ReferralSection({
     try {
       await navigator.clipboard.writeText(text);
       setCopied(type);
-      toast.success(type === 'code' ? 'Kod skopiowany!' : 'Link skopiowany!');
+      toast.success(type === 'code' ? t('codeCopied') : t('linkCopied'));
       setTimeout(() => setCopied(null), 2000);
     } catch {
-      toast.error('Nie udało się skopiować');
+      toast.error(t('copyFailed'));
     }
   };
 
@@ -58,14 +60,14 @@ export function ReferralSection({
     if (navigator.share) {
       try {
         await navigator.share({
-          title: 'Dołącz do programu lojalnościowego',
-          text: `Zarejestruj się używając mojego kodu ${referralCode} i otrzymaj ${formatNumber(bonusPoints)} ${pointsName}!`,
+          title: t('shareFriends'),
+          text: t('shareText', { code: referralCode }),
           url: shareUrl,
         });
       } catch (err) {
         // User cancelled or error
         if ((err as Error).name !== 'AbortError') {
-          toast.error('Nie udało się udostępnić');
+          toast.error(t('shareFailed'));
         }
       }
     } else {
@@ -81,11 +83,10 @@ export function ReferralSection({
         <CardHeader>
           <CardTitle className="flex items-center gap-2">
             <Users className="h-5 w-5" />
-            Twój kod polecający
+            {t('yourCode')}
           </CardTitle>
           <CardDescription>
-            Podziel się tym kodem ze znajomymi. Gdy dokonają pierwszego zakupu, oboje
-            otrzymacie punkty!
+            {t('shareDescription')}
           </CardDescription>
         </CardHeader>
         <CardContent className="space-y-4">
@@ -132,7 +133,7 @@ export function ReferralSection({
           {/* Share Button */}
           <Button onClick={handleShare} className="w-full">
             <Share2 className="h-4 w-4 mr-2" />
-            Udostępnij znajomym
+            {t('shareFriends')}
           </Button>
         </CardContent>
       </Card>
@@ -140,7 +141,7 @@ export function ReferralSection({
       {/* How it Works */}
       <Card>
         <CardHeader>
-          <CardTitle className="text-lg">Jak to działa?</CardTitle>
+          <CardTitle className="text-lg">{t('howItWorks')}</CardTitle>
         </CardHeader>
         <CardContent>
           <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
@@ -148,9 +149,9 @@ export function ReferralSection({
               <div className="p-3 bg-primary/10 rounded-full mb-3">
                 <Share2 className="h-6 w-6 text-primary" />
               </div>
-              <h4 className="font-medium mb-1">1. Udostępnij kod</h4>
+              <h4 className="font-medium mb-1">{t('step1Title')}</h4>
               <p className="text-sm text-muted-foreground">
-                Podziel się swoim kodem lub linkiem ze znajomymi
+                {t('step1Desc')}
               </p>
             </div>
 
@@ -158,9 +159,9 @@ export function ReferralSection({
               <div className="p-3 bg-primary/10 rounded-full mb-3">
                 <UserPlus className="h-6 w-6 text-primary" />
               </div>
-              <h4 className="font-medium mb-1">2. Znajomy się rejestruje</h4>
+              <h4 className="font-medium mb-1">{t('step2Title')}</h4>
               <p className="text-sm text-muted-foreground">
-                Znajomy używa Twojego kodu przy rejestracji i dokonuje zakupu
+                {t('step2Desc')}
               </p>
             </div>
 
@@ -168,10 +169,9 @@ export function ReferralSection({
               <div className="p-3 bg-primary/10 rounded-full mb-3">
                 <Gift className="h-6 w-6 text-primary" />
               </div>
-              <h4 className="font-medium mb-1">3. Oboje zyskujecie</h4>
+              <h4 className="font-medium mb-1">{t('step3Title')}</h4>
               <p className="text-sm text-muted-foreground">
-                Ty otrzymujesz {formatNumber(referralPoints)} {pointsName}, a znajomy{' '}
-                {formatNumber(bonusPoints)} {pointsName}
+                {t('step3Desc', { points: formatNumber(referralPoints), name: pointsName })}
               </p>
             </div>
           </div>
@@ -183,7 +183,7 @@ export function ReferralSection({
         <CardHeader>
           <CardTitle className="text-lg flex items-center gap-2">
             <Award className="h-5 w-5" />
-            Twoje statystyki poleceń
+            {t('yourStats')}
           </CardTitle>
         </CardHeader>
         <CardContent>
@@ -192,7 +192,7 @@ export function ReferralSection({
               <div className="text-2xl font-bold text-primary">
                 {formatNumber(referralStats.totalReferred)}
               </div>
-              <div className="text-sm text-muted-foreground">Zaproszonych</div>
+              <div className="text-sm text-muted-foreground">{t('invited')}</div>
             </div>
 
             <div className="p-4 bg-muted/50 rounded-lg text-center">
@@ -202,7 +202,7 @@ export function ReferralSection({
                 </div>
                 <Check className="h-5 w-5 text-green-600" />
               </div>
-              <div className="text-sm text-muted-foreground">Zrealizowanych</div>
+              <div className="text-sm text-muted-foreground">{t('completed')}</div>
             </div>
 
             <div className="p-4 bg-muted/50 rounded-lg text-center">
@@ -212,7 +212,7 @@ export function ReferralSection({
                 </div>
                 <Clock className="h-5 w-5 text-amber-600" />
               </div>
-              <div className="text-sm text-muted-foreground">Oczekujących</div>
+              <div className="text-sm text-muted-foreground">{t('pending')}</div>
             </div>
 
             <div className="p-4 bg-muted/50 rounded-lg text-center">
@@ -220,7 +220,7 @@ export function ReferralSection({
                 {formatNumber(referralStats.totalPointsEarned)}
               </div>
               <div className="text-sm text-muted-foreground">
-                Zdobytych {pointsName}
+                {t('earned', { name: pointsName })}
               </div>
             </div>
           </div>
@@ -229,8 +229,7 @@ export function ReferralSection({
             <div className="mt-4 p-3 bg-amber-50 dark:bg-amber-950/30 rounded-lg border border-amber-200 dark:border-amber-800">
               <p className="text-sm text-amber-800 dark:text-amber-200">
                 <Clock className="h-4 w-4 inline mr-1" />
-                Masz {referralStats.pendingReferrals} oczekujących poleceń. Punkty zostaną
-                przyznane po dokonaniu pierwszego zakupu przez poleconą osobę.
+                {t('pendingReferrals', { count: referralStats.pendingReferrals })}
               </p>
             </div>
           )}

package/templates/storefront-nextjs-shadcn/components/product/add-to-cart-button.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState, useRef, useEffect } from "react";
+import { useTranslations } from "next-intl";
 import { ShoppingCart, Check } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Spinner } from "@/components/ui/spinner";
@@ -74,6 +75,7 @@ export function AddToCartButton({
   size = "md",
   fullWidth = false,
 }: AddToCartButtonProps) {
+  const t = useTranslations("product");
   const [isAdded, setIsAdded] = useState(false);
   const { addToCart, isLoading } = useCartActions();
   const timeoutRef = useRef<NodeJS.Timeout | null>(null);
@@ -95,17 +97,7 @@ export function AddToCartButton({
       if (onAddToCart) {
         await onAddToCart(variantId, quantity);
       } else {
-        await addToCart({
-          variantId,
-          productId,
-          productHandle,
-          productTitle,
-          variantTitle,
-          price,
-          image,
-          available,
-          quantity,
-        });
+        await addToCart(variantId, quantity);
       }
       
       setIsAdded(true);
@@ -143,17 +135,17 @@ export function AddToCartButton({
       {isLoading ? (
         <>
           <Spinner size="sm" className="mr-2" />
-          Adding...
+          {t("adding")}
         </>
       ) : isAdded ? (
         <>
           <Check className="mr-2 h-5 w-5" />
-          Added to Cart
+          {t("addedToCart")}
         </>
       ) : (
         <>
           <ShoppingCart className="mr-2 h-5 w-5" />
-          {!available ? "Out of Stock" : "Add to Cart"}
+          {!available ? t("outOfStock") : t("addToCart")}
         </>
       )}
     </Button>

package/templates/storefront-nextjs-shadcn/components/product/b2b-price-display.tsx

@@ -3,7 +3,7 @@
 import { cn } from "@/lib/utils";
 import { CURRENCY_LOCALES } from "@doswiftly/storefront-sdk";
 import { Tag, LogIn, TrendingDown } from "lucide-react";
-import Link from "next/link";
+import { Link } from "@/i18n/navigation";
 
 /**
  * Types matching GraphQL schema

package/templates/storefront-nextjs-shadcn/components/product/filter-active-pills.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useTranslations } from "next-intl";
 import { X } from "lucide-react";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -30,6 +31,8 @@ export function FilterActivePills({
   onRemove,
   onClearAll,
 }: FilterActivePillsProps) {
+  const t = useTranslations("product");
+
   if (pills.length === 0) return null;
 
   return (
@@ -62,7 +65,7 @@ export function FilterActivePills({
         className="h-6 shrink-0 px-2 text-xs text-muted-foreground"
         onClick={onClearAll}
       >
-        Clear all
+        {t("clearAllFilters")}
       </Button>
     </div>
   );

package/templates/storefront-nextjs-shadcn/components/product/filter-mobile-sheet.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState } from "react";
+import { useTranslations } from "next-intl";
 import { SlidersHorizontal } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
@@ -34,6 +35,8 @@ export function FilterMobileSheet({
   ...filterProps
 }: FilterMobileSheetProps) {
   const [open, setOpen] = useState(false);
+  const t = useTranslations("product");
+  const tFilters = useTranslations("filters");
 
   return (
     <Sheet open={open} onOpenChange={setOpen}>
@@ -44,7 +47,7 @@ export function FilterMobileSheet({
           className="shrink-0 lg:hidden"
         >
           <SlidersHorizontal className="mr-2 h-4 w-4" />
-          Filters
+          {t("filters")}
           {activeFilterCount > 0 && (
             <Badge variant="secondary" className="ml-2 h-5 px-1.5 py-0 text-xs">
               {activeFilterCount}
@@ -54,10 +57,10 @@ export function FilterMobileSheet({
       </SheetTrigger>
       <SheetContent side="left" className="flex w-[300px] flex-col overflow-hidden">
         <SheetHeader>
-          <SheetTitle>Filters</SheetTitle>
+          <SheetTitle>{t("filters")}</SheetTitle>
           <SheetDescription>
             {totalProducts !== undefined && (
-              <span>{totalProducts} products</span>
+              <span>{tFilters("productCount", { count: totalProducts })}</span>
             )}
           </SheetDescription>
         </SheetHeader>
@@ -74,7 +77,7 @@ export function FilterMobileSheet({
                 setOpen(false);
               }}
             >
-              Clear all filters ({activeFilterCount})
+              {t("clearAllFilters")} ({activeFilterCount})
             </Button>
           </div>
         )}

package/templates/storefront-nextjs-shadcn/components/product/filter-price-range.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState, useCallback, useEffect, useRef } from "react";
+import { useTranslations } from "next-intl";
 import { Slider } from "@/components/ui/slider";
 import { Input } from "@/components/ui/input";
 
@@ -28,6 +29,7 @@ export function FilterPriceRange({
   currency = "PLN",
   onChange,
 }: FilterPriceRangeProps) {
+  const t = useTranslations("product");
   const [localMin, setLocalMin] = useState<number>(currentMin ?? min);
   const [localMax, setLocalMax] = useState<number>(currentMax ?? max);
   const debounceRef = useRef<ReturnType<typeof setTimeout>>(undefined);
@@ -94,7 +96,7 @@ export function FilterPriceRange({
         step={step}
         onValueChange={handleSliderChange}
         onValueCommit={handleSliderCommit}
-        aria-label="Price range"
+        aria-label={t("priceRange")}
       />
 
       {/* Input fields */}
@@ -109,7 +111,7 @@ export function FilterPriceRange({
             max={max}
             step={step}
             className="pr-12 text-sm"
-            aria-label="Minimum price"
+            aria-label={t("minPrice")}
           />
           <span className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-xs text-muted-foreground">
             {currency}
@@ -126,7 +128,7 @@ export function FilterPriceRange({
             max={max}
             step={step}
             className="pr-12 text-sm"
-            aria-label="Maximum price"
+            aria-label={t("maxPrice")}
           />
           <span className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-xs text-muted-foreground">
             {currency}

package/templates/storefront-nextjs-shadcn/components/product/product-card.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import Link from "next/link";
+import { Link } from "@/i18n/navigation";
+import { useTranslations } from "next-intl";
 import { Gift } from "lucide-react";
 import { ProductImage } from "./product-image";
 import { ProductPrice } from "./product-price";
@@ -35,6 +36,7 @@ export function ProductCard({
   priority = false,
   showBadges = true,
 }: ProductCardProps) {
+  const t = useTranslations("product");
   const isOnSale = product.compareAtPriceRange &&
     parseFloat(product.compareAtPriceRange.minVariantPrice.amount) >
     parseFloat(product.priceRange.minVariantPrice.amount);
@@ -70,22 +72,22 @@ export function ProductCard({
             {isGiftCard && (
               <Badge variant="default" className="shadow-sm">
                 <Gift className="mr-1 h-3 w-3" />
-                Karta podarunkowa
+                {t("giftCardLabel")}
               </Badge>
             )}
             {isNew && !isGiftCard && (
               <Badge variant="default" className="shadow-sm">
-                NEW
+                {t("badgeNew")}
               </Badge>
             )}
             {isOnSale && (
               <Badge variant="destructive" className="shadow-sm">
-                SALE
+                {t("badgeSale")}
               </Badge>
             )}
             {isOutOfStock && (
               <Badge variant="secondary" className="shadow-sm">
-                Out of Stock
+                {t("outOfStock")}
               </Badge>
             )}
           </div>
@@ -110,7 +112,7 @@ export function ProductCard({
 
         {isOutOfStock && (
           <p className="mt-2 text-xs text-muted-foreground">
-            Currently unavailable
+            {t("currentlyUnavailable")}
           </p>
         )}
       </div>

package/templates/storefront-nextjs-shadcn/components/product/product-filters.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useMemo } from "react";
+import { useTranslations } from "next-intl";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Label } from "@/components/ui/label";
 import {
@@ -55,6 +56,7 @@ export function ProductFilters({
   onClearAll,
   className,
 }: ProductFiltersProps) {
+  const t = useTranslations("product");
   const handleCheckboxChange = (filterId: string, value: string) => {
     const current = selectedFilters[filterId] || [];
     const updated = current.includes(value)
@@ -95,7 +97,7 @@ export function ProductFilters({
           onClick={onClearAll}
           className="w-full"
         >
-          Clear all filters
+          {t("clearAllFilters")}
         </Button>
       )}
 

package/templates/storefront-nextjs-shadcn/components/product/product-image.tsx

@@ -3,13 +3,9 @@
 import { useState } from "react";
 import Image from "next/image";
 import { cn } from "@/lib/utils";
+import type { ImageData } from "@doswiftly/storefront-sdk";
 
-export interface ProductImageData {
-  url: string;
-  altText?: string | null;
-  width?: number | null;
-  height?: number | null;
-}
+export type ProductImageData = ImageData;
 
 export interface ProductImageProps {
   image?: ProductImageData | null;
@@ -115,7 +111,7 @@ export function ProductImage({
 
   const imageAlt = alt || image.altText || "Product image";
 
-  // Common image props
+  // Global loaderFile (next.config.ts) handles imgproxy resize — no per-component loader needed
   const commonProps = {
     src: image.url,
     alt: imageAlt,

package/templates/storefront-nextjs-shadcn/components/product/product-sort.tsx

@@ -1,5 +1,7 @@
 "use client";
 
+import { useMemo } from "react";
+import { useTranslations } from "next-intl";
 import {
   Select,
   SelectContent,
@@ -26,36 +28,47 @@ export interface ProductSortProps {
   className?: string;
 }
 
-const sortOptions: { value: SortOption; label: string }[] = [
-  { value: "relevance", label: "Featured" },
-  { value: "best-selling", label: "Best Selling" },
-  { value: "price-low-to-high", label: "Price: Low to High" },
-  { value: "price-high-to-low", label: "Price: High to Low" },
-  { value: "title-asc", label: "Name: A to Z" },
-  { value: "title-desc", label: "Name: Z to A" },
-  { value: "created-desc", label: "Newest First" },
-  { value: "created-asc", label: "Oldest First" },
+const SORT_OPTION_KEYS: { value: SortOption; labelKey: string }[] = [
+  { value: "relevance", labelKey: "sortOptions.relevance" },
+  { value: "best-selling", labelKey: "sortOptions.bestSelling" },
+  { value: "price-low-to-high", labelKey: "sortOptions.priceLowToHigh" },
+  { value: "price-high-to-low", labelKey: "sortOptions.priceHighToLow" },
+  { value: "title-asc", labelKey: "sortOptions.titleAsc" },
+  { value: "title-desc", labelKey: "sortOptions.titleDesc" },
+  { value: "created-desc", labelKey: "sortOptions.newestFirst" },
+  { value: "created-asc", labelKey: "sortOptions.oldestFirst" },
 ];
 
 /**
  * ProductSort - Sorting dropdown for product listings
- * 
+ *
  * @example
  * ```tsx
  * const [sort, setSort] = useState<SortOption>("featured");
- * 
- * <ProductSort 
+ *
+ * <ProductSort
  *   value={sort}
  *   onChange={setSort}
  * />
  * ```
  */
 export function ProductSort({ value, onChange, className }: ProductSortProps) {
+  const t = useTranslations("product");
+
+  const sortOptions = useMemo(
+    () =>
+      SORT_OPTION_KEYS.map((opt) => ({
+        value: opt.value,
+        label: t(opt.labelKey),
+      })),
+    [t]
+  );
+
   return (
     <div className={className}>
       <Select value={value} onValueChange={(val) => onChange(val as SortOption)}>
         <SelectTrigger>
-          <SelectValue placeholder="Sort by" />
+          <SelectValue placeholder={t("sortBy")} />
         </SelectTrigger>
         <SelectContent>
           {sortOptions.map((option) => (