@doswiftly/cli 0.1.1

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

@@ -0,0 +1,245 @@
+"use client";
+
+/**
+ * DiscountBreakdown - Component to display applied discounts
+ *
+ * Features:
+ * - Shows each applied discount with code and amount
+ * - Calculates and displays total savings
+ * - Supports multiple stacked discounts
+ * - Remove discount option
+ *
+ * Requirements: 25.6
+ */
+
+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";
+
+export interface AppliedDiscount {
+  id: string;
+  code: string;
+  type: "PERCENTAGE" | "FIXED_AMOUNT" | "FREE_SHIPPING" | "BUY_X_GET_Y";
+  value?: number; // Percentage value or fixed amount
+  allocatedAmount: {
+    amount: string;
+    currencyCode: string;
+  };
+  targetType?: "ORDER" | "LINE_ITEM" | "SHIPPING";
+  description?: string;
+}
+
+export interface DiscountBreakdownProps {
+  /** List of applied discounts */
+  discounts: AppliedDiscount[];
+  /** Called when user removes a discount */
+  onRemove?: (discountId: string, code: string) => void | Promise<void>;
+  /** Whether remove is in progress */
+  isRemoving?: boolean;
+  /** Show total savings */
+  showTotal?: boolean;
+  /** Currency code for total calculation */
+  currencyCode?: string;
+  /** Compact mode for smaller spaces */
+  compact?: boolean;
+  className?: string;
+}
+
+/**
+ * Get icon for discount type
+ */
+function getDiscountIcon(type: AppliedDiscount["type"]) {
+  switch (type) {
+    case "PERCENTAGE":
+      return Percent;
+    case "FREE_SHIPPING":
+      return Truck;
+    case "BUY_X_GET_Y":
+      return Gift;
+    default:
+      return Tag;
+  }
+}
+
+/**
+ * Get label for discount type
+ */
+function getDiscountTypeLabel(discount: AppliedDiscount): string {
+  switch (discount.type) {
+    case "PERCENTAGE":
+      return discount.value ? `${discount.value}% zniżki` : "Rabat procentowy";
+    case "FIXED_AMOUNT":
+      return "Rabat kwotowy";
+    case "FREE_SHIPPING":
+      return "Darmowa dostawa";
+    case "BUY_X_GET_Y":
+      return "Kup X, dostań Y";
+    default:
+      return "Rabat";
+  }
+}
+
+/**
+ * DiscountBreakdown - Display applied discounts with breakdown
+ *
+ * Shows all applied discount codes with their savings amounts
+ * and optionally a total savings summary.
+ */
+export function DiscountBreakdown({
+  discounts,
+  onRemove,
+  isRemoving = false,
+  showTotal = true,
+  currencyCode = "PLN",
+  compact = false,
+  className,
+}: DiscountBreakdownProps) {
+  if (discounts.length === 0) {
+    return null;
+  }
+
+  // Calculate total savings
+  const totalSavings = discounts.reduce((sum, discount) => {
+    return sum + parseFloat(discount.allocatedAmount.amount);
+  }, 0);
+
+  return (
+    <div className={cn("space-y-2", className)}>
+      {/* Individual discounts */}
+      {discounts.map((discount) => {
+        const Icon = getDiscountIcon(discount.type);
+        const isNegative = parseFloat(discount.allocatedAmount.amount) > 0;
+
+        return (
+          <div
+            key={discount.id}
+            className={cn(
+              "flex items-center justify-between rounded-md border bg-green-50/50 p-2 dark:bg-green-950/20",
+              compact && "px-2 py-1"
+            )}
+          >
+            <div className="flex items-center gap-2 min-w-0">
+              <Icon className={cn("h-4 w-4 text-green-600 shrink-0", compact && "h-3 w-3")} />
+              <div className="min-w-0">
+                <div className="flex items-center gap-2">
+                  <span
+                    className={cn(
+                      "font-medium text-green-700 dark:text-green-400 truncate",
+                      compact && "text-sm"
+                    )}
+                  >
+                    {discount.code}
+                  </span>
+                  {!compact && (
+                    <span className="text-xs text-muted-foreground">
+                      {getDiscountTypeLabel(discount)}
+                    </span>
+                  )}
+                </div>
+                {discount.description && !compact && (
+                  <p className="text-xs text-muted-foreground truncate">
+                    {discount.description}
+                  </p>
+                )}
+              </div>
+            </div>
+
+            <div className="flex items-center gap-2 shrink-0">
+              <span
+                className={cn(
+                  "font-medium text-green-700 dark:text-green-400",
+                  compact && "text-sm"
+                )}
+              >
+                -{formatPrice(discount.allocatedAmount)}
+              </span>
+              {onRemove && (
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon"
+                  className={cn("h-6 w-6 text-muted-foreground hover:text-destructive", compact && "h-5 w-5")}
+                  onClick={() => onRemove(discount.id, discount.code)}
+                  disabled={isRemoving}
+                >
+                  <X className={cn("h-3 w-3", compact && "h-2.5 w-2.5")} />
+                </Button>
+              )}
+            </div>
+          </div>
+        );
+      })}
+
+      {/* Total savings */}
+      {showTotal && discounts.length > 1 && (
+        <div
+          className={cn(
+            "flex items-center justify-between border-t pt-2",
+            compact && "pt-1"
+          )}
+        >
+          <span className={cn("font-medium", compact && "text-sm")}>
+            Łączne oszczędności
+          </span>
+          <span
+            className={cn(
+              "font-semibold text-green-700 dark:text-green-400",
+              compact && "text-sm"
+            )}
+          >
+            -{formatPrice({ amount: totalSavings.toFixed(2), currencyCode })}
+          </span>
+        </div>
+      )}
+    </div>
+  );
+}
+
+/**
+ * DiscountSummaryLine - Single line discount display for order summary
+ */
+export interface DiscountSummaryLineProps {
+  label?: string;
+  amount: {
+    amount: string;
+    currencyCode: string;
+  };
+  code?: string;
+  onRemove?: () => void;
+  className?: string;
+}
+
+export function DiscountSummaryLine({
+  label = "Rabat",
+  amount,
+  code,
+  onRemove,
+  className,
+}: DiscountSummaryLineProps) {
+  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}
+          {code && <span className="ml-1 font-medium text-foreground">({code})</span>}
+        </span>
+      </div>
+      <div className="flex items-center gap-1">
+        <span className="text-green-600 font-medium">-{formatPrice(amount)}</span>
+        {onRemove && (
+          <button
+            type="button"
+            onClick={onRemove}
+            className="ml-1 text-muted-foreground hover:text-destructive"
+          >
+            <X className="h-3 w-3" />
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default DiscountBreakdown;

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

@@ -0,0 +1,246 @@
+"use client";
+
+/**
+ * DiscountCodeInput - Input component for entering and validating discount codes
+ *
+ * Features:
+ * - Code validation on blur or button click
+ * - Shows validation result (savings preview or error)
+ * - Applies code only after successful validation
+ * - Loading state during validation
+ *
+ * Requirements: 27.1, 27.3, 27.4
+ */
+
+import { useState, useCallback } from "react";
+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";
+
+export interface DiscountValidationResult {
+  valid: boolean;
+  code?: string;
+  discountType?: "PERCENTAGE" | "FIXED_AMOUNT" | "FREE_SHIPPING";
+  discountValue?: number;
+  estimatedSavings?: {
+    amount: string;
+    currencyCode: string;
+  };
+  minimumOrderAmount?: {
+    amount: string;
+    currencyCode: string;
+  };
+  errorMessage?: string;
+  errorCode?: string;
+}
+
+export interface DiscountCodeInputProps {
+  /** Called when user wants to apply a validated code */
+  onApply: (code: string) => void | Promise<void>;
+  /** Optional: Validate code before applying (returns validation result) */
+  onValidate?: (code: string) => Promise<DiscountValidationResult>;
+  /** Already applied discount codes */
+  appliedCodes?: string[];
+  /** Whether the apply mutation is loading */
+  isApplying?: boolean;
+  /** Placeholder text */
+  placeholder?: string;
+  /** Disable input */
+  disabled?: boolean;
+  className?: string;
+}
+
+/**
+ * DiscountCodeInput - Discount code entry with validation
+ *
+ * Validates discount codes before applying them to provide
+ * immediate feedback on savings or errors.
+ */
+export function DiscountCodeInput({
+  onApply,
+  onValidate,
+  appliedCodes = [],
+  isApplying = false,
+  placeholder = "Wpisz kod rabatowy",
+  disabled = false,
+  className,
+}: DiscountCodeInputProps) {
+  const [code, setCode] = useState("");
+  const [isValidating, setIsValidating] = useState(false);
+  const [validationResult, setValidationResult] = useState<DiscountValidationResult | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const isLoading = isValidating || isApplying;
+
+  const handleValidate = useCallback(async () => {
+    const trimmedCode = code.trim().toUpperCase();
+
+    if (!trimmedCode) {
+      setError("Wpisz kod rabatowy");
+      return;
+    }
+
+    // Check if already applied
+    if (appliedCodes.includes(trimmedCode)) {
+      setError("Ten kod jest już zastosowany");
+      return;
+    }
+
+    setError(null);
+    setValidationResult(null);
+
+    if (onValidate) {
+      setIsValidating(true);
+      try {
+        const result = await onValidate(trimmedCode);
+        setValidationResult(result);
+
+        if (!result.valid) {
+          setError(result.errorMessage || "Kod jest nieprawidłowy");
+        }
+      } catch (e: any) {
+        setError(e.message || "Nie udało się zweryfikować kodu");
+      } finally {
+        setIsValidating(false);
+      }
+    } else {
+      // No validation function, assume valid
+      setValidationResult({ valid: true, code: trimmedCode });
+    }
+  }, [code, appliedCodes, onValidate]);
+
+  const handleApply = useCallback(async () => {
+    const trimmedCode = code.trim().toUpperCase();
+
+    // If not yet validated, validate first
+    if (!validationResult?.valid) {
+      await handleValidate();
+      return;
+    }
+
+    if (validationResult.valid) {
+      await onApply(trimmedCode);
+      // Reset state after successful apply
+      setCode("");
+      setValidationResult(null);
+      setError(null);
+    }
+  }, [code, validationResult, onApply, handleValidate]);
+
+  const handleClear = () => {
+    setCode("");
+    setValidationResult(null);
+    setError(null);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      handleApply();
+    }
+  };
+
+  // Format discount value for display
+  const getDiscountPreview = () => {
+    if (!validationResult?.valid) return null;
+
+    if (validationResult.estimatedSavings) {
+      return `Oszczędzisz ${formatPrice(validationResult.estimatedSavings)}`;
+    }
+
+    if (validationResult.discountType === "PERCENTAGE" && validationResult.discountValue) {
+      return `${validationResult.discountValue}% zniżki`;
+    }
+
+    if (validationResult.discountType === "FREE_SHIPPING") {
+      return "Darmowa dostawa";
+    }
+
+    return "Kod jest prawidłowy";
+  };
+
+  return (
+    <div className={cn("space-y-3", className)}>
+      {/* Input row */}
+      <div className="flex gap-2">
+        <div className="relative flex-1">
+          <Tag className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+          <Input
+            type="text"
+            value={code}
+            onChange={(e) => {
+              setCode(e.target.value);
+              setValidationResult(null);
+              setError(null);
+            }}
+            onBlur={handleValidate}
+            onKeyDown={handleKeyDown}
+            placeholder={placeholder}
+            disabled={disabled || isLoading}
+            className={cn(
+              "pl-9 pr-8 uppercase",
+              validationResult?.valid && "border-green-500 focus-visible:ring-green-500",
+              error && "border-destructive focus-visible:ring-destructive"
+            )}
+          />
+          {code && !isLoading && (
+            <button
+              type="button"
+              onClick={handleClear}
+              className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+            >
+              <X className="h-4 w-4" />
+            </button>
+          )}
+        </div>
+        <Button
+          type="button"
+          onClick={handleApply}
+          disabled={disabled || isLoading || !code.trim()}
+          variant={validationResult?.valid ? "default" : "secondary"}
+        >
+          {isLoading ? (
+            <Loader2 className="h-4 w-4 animate-spin" />
+          ) : validationResult?.valid ? (
+            <>
+              <Check className="mr-2 h-4 w-4" />
+              Zastosuj
+            </>
+          ) : (
+            "Zastosuj"
+          )}
+        </Button>
+      </div>
+
+      {/* Validation result - success preview */}
+      {validationResult?.valid && (
+        <Alert className="border-green-500 bg-green-50 dark:bg-green-950/20">
+          <Check className="h-4 w-4 text-green-600" />
+          <AlertDescription className="text-green-700 dark:text-green-400">
+            {getDiscountPreview()}
+          </AlertDescription>
+        </Alert>
+      )}
+
+      {/* Error message */}
+      {error && (
+        <Alert variant="destructive">
+          <AlertCircle className="h-4 w-4" />
+          <AlertDescription>{error}</AlertDescription>
+        </Alert>
+      )}
+
+      {/* Minimum order info */}
+      {validationResult?.minimumOrderAmount && (
+        <p className="text-xs text-muted-foreground">
+          Minimalna kwota zamówienia: {formatPrice(validationResult.minimumOrderAmount)}
+        </p>
+      )}
+    </div>
+  );
+}
+
+export default DiscountCodeInput;

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

@@ -0,0 +1,19 @@
+/**
+ * Discount Components
+ *
+ * Components for discount code entry, validation, and display.
+ */
+
+export {
+  DiscountCodeInput,
+  type DiscountCodeInputProps,
+  type DiscountValidationResult,
+} from "./discount-code-input";
+
+export {
+  DiscountBreakdown,
+  DiscountSummaryLine,
+  type DiscountBreakdownProps,
+  type DiscountSummaryLineProps,
+  type AppliedDiscount,
+} from "./discount-breakdown";

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

@@ -0,0 +1,113 @@
+'use client';
+
+/**
+ * ErrorBoundary - React error boundary with fallback UI
+ *
+ * Catches JavaScript errors in child components and displays a fallback UI.
+ * Includes a retry button to reset the error state.
+ *
+ * Requirements: 11.1
+ */
+
+import { Component, type ReactNode } from 'react';
+import { AlertTriangle, RefreshCcw } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
+
+interface ErrorBoundaryProps {
+  /** Child components to render */
+  children: ReactNode;
+  /** Optional fallback component */
+  fallback?: ReactNode;
+  /** Callback when error is caught */
+  onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
+  /** Custom error title */
+  title?: string;
+  /** Custom error description */
+  description?: string;
+}
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+  error: Error | null;
+}
+
+/**
+ * ErrorBoundary - Catches and displays errors gracefully
+ *
+ * Usage:
+ * ```tsx
+ * <ErrorBoundary>
+ *   <MyComponent />
+ * </ErrorBoundary>
+ * ```
+ */
+export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
+    // Log error details in development
+    if (process.env.NODE_ENV === 'development') {
+      console.error('[ErrorBoundary] Caught error:', error);
+      console.error('[ErrorBoundary] Component stack:', errorInfo.componentStack);
+    }
+
+    // Call optional error callback
+    this.props.onError?.(error, errorInfo);
+  }
+
+  handleReset = (): void => {
+    this.setState({ hasError: false, error: null });
+  };
+
+  render(): ReactNode {
+    if (this.state.hasError) {
+      // Custom fallback provided
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+
+      // Default fallback UI
+      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>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;

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

@@ -0,0 +1,7 @@
+/**
+ * Error Components
+ *
+ * Components for error handling and display.
+ */
+
+export { ErrorBoundary } from './error-boundary';