@doswiftly/cli 0.1.18 → 0.1.20

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

@@ -1,34 +1,45 @@
 "use client";
 
-import { useCurrencyStore } from "@/stores/currency-store";
+import { useCurrencyStore } from "@doswiftly/storefront-sdk/react";
+import { CURRENCY_LOCALES } from "@doswiftly/storefront-sdk";
+
+/** Resolve locale from currency code using the centralized CURRENCY_LOCALES map */
+function getLocaleForCurrency(currencyCode: string): string {
+  return CURRENCY_LOCALES[currencyCode] || "en-US";
+}
 
 export interface PriceDisplayProps {
   amount: string | number;
   currency?: string;
   className?: string;
   showCurrency?: boolean;
-  locale?: string;
 }
 
 /**
  * PriceDisplay - Formatted price with currency
- * Automatically uses the user's preferred currency from the currency store
+ * Automatically uses the user's preferred currency from the currency store.
+ * Locale is derived from currency code — no hardcoded locale.
  */
 export function PriceDisplay({
   amount,
   currency,
   className = "",
   showCurrency = true,
-  locale = "pl-PL",
 }: PriceDisplayProps) {
   const preferredCurrency = useCurrencyStore((state) => state.currency);
+  const isLoaded = useCurrencyStore((state) => state.isLoaded);
   const finalCurrency = currency || preferredCurrency || "PLN";
+  const locale = getLocaleForCurrency(finalCurrency);
+
+  if (!isLoaded && !currency) {
+    return <span className={`inline-block h-4 w-16 animate-pulse rounded bg-muted ${className}`} />;
+  }
 
   const formatPrice = (value: string | number, curr: string) => {
     const numericValue = typeof value === "string" ? parseFloat(value) : value;
 
     if (isNaN(numericValue)) {
-      return "—";
+      return "\u2014";
     }
 
     if (showCurrency) {
@@ -56,7 +67,6 @@ export interface PriceRangeDisplayProps {
   maxAmount: string | number;
   currency?: string;
   className?: string;
-  locale?: string;
 }
 
 /**
@@ -67,16 +77,21 @@ export function PriceRangeDisplay({
   maxAmount,
   currency,
   className = "",
-  locale = "pl-PL",
 }: PriceRangeDisplayProps) {
   const preferredCurrency = useCurrencyStore((state) => state.currency);
+  const isLoaded = useCurrencyStore((state) => state.isLoaded);
   const finalCurrency = currency || preferredCurrency || "PLN";
+  const locale = getLocaleForCurrency(finalCurrency);
+
+  if (!isLoaded && !currency) {
+    return <span className={`inline-block h-4 w-24 animate-pulse rounded bg-muted ${className}`} />;
+  }
 
   const formatPrice = (value: string | number) => {
     const numericValue = typeof value === "string" ? parseFloat(value) : value;
 
     if (isNaN(numericValue)) {
-      return "—";
+      return "\u2014";
     }
 
     return new Intl.NumberFormat(locale, {
@@ -109,7 +124,6 @@ export interface ComparePriceDisplayProps {
   salePrice: string | number;
   currency?: string;
   className?: string;
-  locale?: string;
 }
 
 /**
@@ -120,16 +134,26 @@ export function ComparePriceDisplay({
   salePrice,
   currency,
   className = "",
-  locale = "pl-PL",
 }: ComparePriceDisplayProps) {
   const preferredCurrency = useCurrencyStore((state) => state.currency);
+  const isLoaded = useCurrencyStore((state) => state.isLoaded);
   const finalCurrency = currency || preferredCurrency || "PLN";
+  const locale = getLocaleForCurrency(finalCurrency);
+
+  if (!isLoaded && !currency) {
+    return (
+      <div className={`flex items-center gap-2 ${className}`}>
+        <span className="inline-block h-5 w-16 animate-pulse rounded bg-muted" />
+        <span className="inline-block h-4 w-12 animate-pulse rounded bg-muted" />
+      </div>
+    );
+  }
 
   const formatPrice = (value: string | number) => {
     const numericValue = typeof value === "string" ? parseFloat(value) : value;
 
     if (isNaN(numericValue)) {
-      return "—";
+      return "\u2014";
     }
 
     return new Intl.NumberFormat(locale, {

package/templates/storefront-nextjs-shadcn/components/common/social-share.tsx

@@ -3,6 +3,7 @@
 import { useState } from "react";
 import { Facebook, Twitter, Linkedin, Link2, Check } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import { useTranslations } from "next-intl";
 
 export interface SocialShareProps {
   url: string;
@@ -20,6 +21,7 @@ export function SocialShare({
   description = "",
   className = "",
 }: SocialShareProps) {
+  const t = useTranslations("socialShare");
   const [copied, setCopied] = useState(false);
 
   const encodedUrl = encodeURIComponent(url);
@@ -58,14 +60,14 @@ export function SocialShare({
   return (
     <div className={`flex items-center gap-2 ${className}`}>
       <span className="text-sm font-medium text-muted-foreground mr-2">
-        Share:
+        {t("share")}
       </span>
 
       <Button
         variant="outline"
         size="sm"
         onClick={() => handleShare("facebook")}
-        aria-label="Share on Facebook"
+        aria-label={t("shareOnFacebook")}
         className="h-9 w-9 p-0"
       >
         <Facebook className="h-4 w-4" />
@@ -75,7 +77,7 @@ export function SocialShare({
         variant="outline"
         size="sm"
         onClick={() => handleShare("twitter")}
-        aria-label="Share on Twitter"
+        aria-label={t("shareOnTwitter")}
         className="h-9 w-9 p-0"
       >
         <Twitter className="h-4 w-4" />
@@ -85,7 +87,7 @@ export function SocialShare({
         variant="outline"
         size="sm"
         onClick={() => handleShare("linkedin")}
-        aria-label="Share on LinkedIn"
+        aria-label={t("shareOnLinkedIn")}
         className="h-9 w-9 p-0"
       >
         <Linkedin className="h-4 w-4" />
@@ -95,7 +97,7 @@ export function SocialShare({
         variant="outline"
         size="sm"
         onClick={handleCopyLink}
-        aria-label="Copy link"
+        aria-label={t("copyLink")}
         className="h-9 w-9 p-0"
       >
         {copied ? (
@@ -124,6 +126,7 @@ export function SocialShareButton({
   description = "",
   className = "",
 }: SocialShareButtonProps) {
+  const t = useTranslations("socialShare");
   const [isOpen, setIsOpen] = useState(false);
 
   const handleNativeShare = async () => {
@@ -148,7 +151,7 @@ export function SocialShareButton({
     <div className={`relative ${className}`}>
       <Button variant="outline" size="sm" onClick={handleNativeShare}>
         <Link2 className="mr-2 h-4 w-4" />
-        Share
+        {t("shareButton")}
       </Button>
 
       {isOpen && !navigator.share && (

package/templates/storefront-nextjs-shadcn/components/discount/discount-breakdown.tsx

@@ -15,7 +15,8 @@
 import { cn } from "@/lib/utils";
 import { Tag, X, Percent, Truck, Gift } from "lucide-react";
 import { Button } from "@/components/ui/button";
-import { formatPrice } from "@/lib/format";
+import { formatPrice } from "@doswiftly/storefront-sdk";
+import { useTranslations } from "next-intl";
 
 export interface AppliedDiscount {
   id: string;
@@ -63,20 +64,25 @@ function getDiscountIcon(type: AppliedDiscount["type"]) {
 }
 
 /**
- * Get label for discount type
+ * Get translation key for discount type
  */
-function getDiscountTypeLabel(discount: AppliedDiscount): string {
+function getDiscountTypeLabel(
+  discount: AppliedDiscount,
+  t: ReturnType<typeof useTranslations<"discountBreakdown">>
+): string {
   switch (discount.type) {
     case "PERCENTAGE":
-      return discount.value ? `${discount.value}% zniżki` : "Rabat procentowy";
+      return discount.value
+        ? t("percentage", { value: discount.value })
+        : t("percentageDefault");
     case "FIXED_AMOUNT":
-      return "Rabat kwotowy";
+      return t("fixedAmount");
     case "FREE_SHIPPING":
-      return "Darmowa dostawa";
+      return t("freeShipping");
     case "BUY_X_GET_Y":
-      return "Kup X, dostań Y";
+      return t("buyXGetY");
     default:
-      return "Rabat";
+      return t("default");
   }
 }
 
@@ -95,6 +101,8 @@ export function DiscountBreakdown({
   compact = false,
   className,
 }: DiscountBreakdownProps) {
+  const t = useTranslations("discountBreakdown");
+
   if (discounts.length === 0) {
     return null;
   }
@@ -133,7 +141,7 @@ export function DiscountBreakdown({
                   </span>
                   {!compact && (
                     <span className="text-xs text-muted-foreground">
-                      {getDiscountTypeLabel(discount)}
+                      {getDiscountTypeLabel(discount, t)}
                     </span>
                   )}
                 </div>
@@ -180,7 +188,7 @@ export function DiscountBreakdown({
           )}
         >
           <span className={cn("font-medium", compact && "text-sm")}>
-            Łączne oszczędności
+            {t("totalSavings")}
           </span>
           <span
             className={cn(
@@ -211,18 +219,20 @@ export interface DiscountSummaryLineProps {
 }
 
 export function DiscountSummaryLine({
-  label = "Rabat",
+  label,
   amount,
   code,
   onRemove,
   className,
 }: DiscountSummaryLineProps) {
+  const t = useTranslations("discountBreakdown");
+  const displayLabel = label ?? t("default");
   return (
     <div className={cn("flex items-center justify-between text-sm", className)}>
       <div className="flex items-center gap-1.5">
         <Tag className="h-3.5 w-3.5 text-green-600" />
         <span className="text-muted-foreground">
-          {label}
+          {displayLabel}
           {code && <span className="ml-1 font-medium text-foreground">({code})</span>}
         </span>
       </div>

package/templates/storefront-nextjs-shadcn/components/discount/discount-code-input.tsx

@@ -13,12 +13,13 @@
  */
 
 import { useState, useCallback } from "react";
+import { useTranslations } from "next-intl";
 import { cn } from "@/lib/utils";
 import { Tag, Loader2, Check, X, AlertCircle } from "lucide-react";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { Alert, AlertDescription } from "@/components/ui/alert";
-import { formatPrice } from "@/lib/format";
+import { formatPrice } from "@doswiftly/storefront-sdk";
 
 export interface DiscountValidationResult {
   valid: boolean;
@@ -64,10 +65,12 @@ export function DiscountCodeInput({
   onValidate,
   appliedCodes = [],
   isApplying = false,
-  placeholder = "Wpisz kod rabatowy",
+  placeholder,
   disabled = false,
   className,
 }: DiscountCodeInputProps) {
+  const t = useTranslations("checkout.discount");
+  const tc = useTranslations("common");
   const [code, setCode] = useState("");
   const [isValidating, setIsValidating] = useState(false);
   const [validationResult, setValidationResult] = useState<DiscountValidationResult | null>(null);
@@ -79,13 +82,13 @@ export function DiscountCodeInput({
     const trimmedCode = code.trim().toUpperCase();
 
     if (!trimmedCode) {
-      setError("Wpisz kod rabatowy");
+      setError(t("enterCode"));
       return;
     }
 
     // Check if already applied
     if (appliedCodes.includes(trimmedCode)) {
-      setError("Ten kod jest już zastosowany");
+      setError(t("alreadyApplied"));
       return;
     }
 
@@ -99,10 +102,10 @@ export function DiscountCodeInput({
         setValidationResult(result);
 
         if (!result.valid) {
-          setError(result.errorMessage || "Kod jest nieprawidłowy");
+          setError(result.errorMessage || t("invalidCode"));
         }
-      } catch (e: any) {
-        setError(e.message || "Nie udało się zweryfikować kodu");
+      } catch (e: unknown) {
+        setError(e instanceof Error ? e.message : t("validationFailed"));
       } finally {
         setIsValidating(false);
       }
@@ -148,18 +151,18 @@ export function DiscountCodeInput({
     if (!validationResult?.valid) return null;
 
     if (validationResult.estimatedSavings) {
-      return `Oszczędzisz ${formatPrice(validationResult.estimatedSavings)}`;
+      return t("savings", { savings: formatPrice(validationResult.estimatedSavings) });
     }
 
     if (validationResult.discountType === "PERCENTAGE" && validationResult.discountValue) {
-      return `${validationResult.discountValue}% zniżki`;
+      return t("percentOff", { value: validationResult.discountValue });
     }
 
     if (validationResult.discountType === "FREE_SHIPPING") {
-      return "Darmowa dostawa";
+      return t("freeShippingDiscount");
     }
 
-    return "Kod jest prawidłowy";
+    return t("codeValid");
   };
 
   return (
@@ -178,7 +181,7 @@ export function DiscountCodeInput({
             }}
             onBlur={handleValidate}
             onKeyDown={handleKeyDown}
-            placeholder={placeholder}
+            placeholder={placeholder ?? t("enterCode")}
             disabled={disabled || isLoading}
             className={cn(
               "pl-9 pr-8 uppercase",
@@ -207,10 +210,10 @@ export function DiscountCodeInput({
           ) : validationResult?.valid ? (
             <>
               <Check className="mr-2 h-4 w-4" />
-              Zastosuj
+              {tc("apply")}
             </>
           ) : (
-            "Zastosuj"
+            tc("apply")
           )}
         </Button>
       </div>
@@ -236,7 +239,7 @@ export function DiscountCodeInput({
       {/* Minimum order info */}
       {validationResult?.minimumOrderAmount && (
         <p className="text-xs text-muted-foreground">
-          Minimalna kwota zamówienia: {formatPrice(validationResult.minimumOrderAmount)}
+          {t("minOrderAmount")} {formatPrice(validationResult.minimumOrderAmount)}
         </p>
       )}
     </div>

package/templates/storefront-nextjs-shadcn/components/error/error-boundary.tsx

@@ -10,6 +10,7 @@
  */
 
 import { Component, type ReactNode } from 'react';
+import { useTranslations } from 'next-intl';
 import { AlertTriangle, RefreshCcw } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
@@ -32,6 +33,51 @@ interface ErrorBoundaryState {
   error: Error | null;
 }
 
+/** Default fallback UI — functional component so it can use useTranslations */
+function DefaultErrorFallback({
+  title,
+  description,
+  error,
+  onReset,
+}: {
+  title?: string;
+  description?: string;
+  error: Error | null;
+  onReset: () => void;
+}) {
+  const t = useTranslations('errors');
+
+  return (
+    <div className="flex min-h-[400px] items-center justify-center p-4">
+      <Card className="w-full max-w-md">
+        <CardHeader className="text-center">
+          <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-destructive/10">
+            <AlertTriangle className="h-6 w-6 text-destructive" />
+          </div>
+          <CardTitle className="text-xl">
+            {title || t('somethingWentWrong')}
+          </CardTitle>
+          <CardDescription>
+            {description || t('unexpectedError')}
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="flex flex-col gap-3">
+          {/* Show error message in development */}
+          {process.env.NODE_ENV === 'development' && error && (
+            <div className="rounded-md bg-muted p-3 text-xs">
+              <p className="font-medium text-destructive">{error.message}</p>
+            </div>
+          )}
+          <Button onClick={onReset} className="w-full">
+            <RefreshCcw className="mr-2 h-4 w-4" />
+            {t('tryAgain')}
+          </Button>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
 /**
  * ErrorBoundary - Catches and displays errors gracefully
  *
@@ -74,35 +120,14 @@ export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundarySt
         return this.props.fallback;
       }
 
-      // Default fallback UI
+      // Default fallback UI (functional component for useTranslations)
       return (
-        <div className="flex min-h-[400px] items-center justify-center p-4">
-          <Card className="w-full max-w-md">
-            <CardHeader className="text-center">
-              <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-destructive/10">
-                <AlertTriangle className="h-6 w-6 text-destructive" />
-              </div>
-              <CardTitle className="text-xl">
-                {this.props.title || 'Coś poszło nie tak'}
-              </CardTitle>
-              <CardDescription>
-                {this.props.description || 'Wystąpił nieoczekiwany błąd. Spróbuj odświeżyć stronę.'}
-              </CardDescription>
-            </CardHeader>
-            <CardContent className="flex flex-col gap-3">
-              {/* Show error message in development */}
-              {process.env.NODE_ENV === 'development' && this.state.error && (
-                <div className="rounded-md bg-muted p-3 text-xs">
-                  <p className="font-medium text-destructive">{this.state.error.message}</p>
-                </div>
-              )}
-              <Button onClick={this.handleReset} className="w-full">
-                <RefreshCcw className="mr-2 h-4 w-4" />
-                Spróbuj ponownie
-              </Button>
-            </CardContent>
-          </Card>
-        </div>
+        <DefaultErrorFallback
+          title={this.props.title}
+          description={this.props.description}
+          error={this.state.error}
+          onReset={this.handleReset}
+        />
       );
     }
 

package/templates/storefront-nextjs-shadcn/components/filters/dynamic-attribute-filters.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState, useCallback } from "react";
+import { useTranslations } from "next-intl";
 import { Filter, X, ChevronDown, ChevronUp } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
@@ -85,6 +86,7 @@ export function DynamicAttributeFilters({
   className,
   collapsible = false,
 }: DynamicAttributeFiltersProps) {
+  const t = useTranslations("filters");
   const [isExpanded, setIsExpanded] = useState(!collapsible);
 
   // Calculate active filter count
@@ -100,7 +102,7 @@ export function DynamicAttributeFilters({
       <div className={cn("p-4", className)}>
         <div className="flex items-center gap-2">
           <Spinner className="h-4 w-4" />
-          <span className="text-sm text-muted-foreground">Loading filters...</span>
+          <span className="text-sm text-muted-foreground">{t("loading")}</span>
         </div>
       </div>
     );
@@ -115,7 +117,7 @@ export function DynamicAttributeFilters({
     <div className="flex items-center justify-between">
       <div className="flex items-center gap-2">
         <Filter className="h-4 w-4 text-muted-foreground" />
-        <h3 className="text-sm font-medium text-foreground">Filters</h3>
+        <h3 className="text-sm font-medium text-foreground">{t("title")}</h3>
         {activeCount > 0 && (
           <span className="flex items-center justify-center h-5 w-5 rounded-full bg-primary text-primary-foreground text-xs">
             {activeCount}
@@ -132,7 +134,7 @@ export function DynamicAttributeFilters({
             className="h-7 text-xs text-muted-foreground hover:text-foreground"
           >
             <X className="h-3 w-3 mr-1" />
-            Clear all
+            {t("clearAll")}
           </Button>
         )}
 
@@ -159,7 +161,7 @@ export function DynamicAttributeFilters({
       {/* Price filter */}
       {filters.priceRange && onPriceChange && (
         <div className="space-y-3">
-          <h4 className="text-sm font-medium text-foreground">Price</h4>
+          <h4 className="text-sm font-medium text-foreground">{t("price")}</h4>
           <div className="flex items-center gap-2">
             <input
               type="number"
@@ -204,7 +206,7 @@ export function DynamicAttributeFilters({
 
       {/* Product count */}
       <p className="text-xs text-muted-foreground pt-2 border-t">
-        {filters.totalProducts} products
+        {t("productCount", { count: filters.totalProducts })}
       </p>
     </div>
   );

package/templates/storefront-nextjs-shadcn/components/filters/range-slider-filter.tsx

@@ -179,15 +179,15 @@ function formatValue(
 /**
  * Simple debounce function
  */
-function debounce<T extends (...args: any[]) => void>(
-  fn: T,
+function debounce<TArgs extends unknown[]>(
+  fn: (...args: TArgs) => void,
   delay: number
-): T {
+): (...args: TArgs) => void {
   let timeoutId: NodeJS.Timeout;
-  return ((...args: Parameters<T>) => {
+  return (...args: TArgs) => {
     clearTimeout(timeoutId);
     timeoutId = setTimeout(() => fn(...args), delay);
-  }) as T;
+  };
 }
 
 export default RangeSliderFilter;