@doswiftly/cli 0.1.1

package/templates/storefront-nextjs-shadcn/components/gift-card/gift-card-balance.tsx

@@ -0,0 +1,321 @@
+"use client";
+
+import {
+  Gift,
+  CreditCard,
+  Calendar,
+  AlertTriangle,
+  CheckCircle,
+} from "lucide-react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Progress } from "@/components/ui/progress";
+import { cn } from "@/lib/utils";
+
+/**
+ * Gift card status
+ */
+export type GiftCardStatus = "ACTIVE" | "USED" | "EXPIRED" | "DISABLED";
+
+/**
+ * Gift card data
+ */
+export interface GiftCardData {
+  id: string;
+  maskedCode: string;
+  lastCharacters: string;
+  status: GiftCardStatus;
+  initialAmount: {
+    amount: string;
+    currencyCode: string;
+  };
+  balance: {
+    amount: string;
+    currencyCode: string;
+  };
+  expiresAt?: string;
+  recipientName?: string;
+  message?: string;
+}
+
+export interface GiftCardBalanceProps {
+  giftCard: GiftCardData;
+  className?: string;
+}
+
+/**
+ * Format currency amount
+ */
+function formatAmount(amount: string, currencyCode: string): string {
+  const num = parseFloat(amount);
+  return new Intl.NumberFormat("pl-PL", {
+    style: "currency",
+    currency: currencyCode,
+  }).format(num);
+}
+
+/**
+ * Format date for display
+ */
+function formatDate(dateString: string): string {
+  return new Date(dateString).toLocaleDateString("pl-PL", {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  });
+}
+
+/**
+ * Get status badge configuration
+ */
+function getStatusConfig(status: GiftCardStatus) {
+  switch (status) {
+    case "ACTIVE":
+      return {
+        label: "Active",
+        variant: "default" as const,
+        color: "text-green-600",
+        bgColor: "bg-green-100 dark:bg-green-900/30",
+      };
+    case "USED":
+      return {
+        label: "Fully Redeemed",
+        variant: "secondary" as const,
+        color: "text-gray-600",
+        bgColor: "bg-gray-100 dark:bg-gray-900/30",
+      };
+    case "EXPIRED":
+      return {
+        label: "Expired",
+        variant: "destructive" as const,
+        color: "text-red-600",
+        bgColor: "bg-red-100 dark:bg-red-900/30",
+      };
+    case "DISABLED":
+      return {
+        label: "Disabled",
+        variant: "secondary" as const,
+        color: "text-gray-600",
+        bgColor: "bg-gray-100 dark:bg-gray-900/30",
+      };
+    default:
+      return {
+        label: "Unknown",
+        variant: "secondary" as const,
+        color: "text-gray-600",
+        bgColor: "bg-gray-100 dark:bg-gray-900/30",
+      };
+  }
+}
+
+/**
+ * Check if card is expiring soon (within 30 days)
+ */
+function isExpiringSoon(expiresAt?: string): boolean {
+  if (!expiresAt) return false;
+  const expiryDate = new Date(expiresAt);
+  const now = new Date();
+  const daysUntilExpiry = Math.ceil(
+    (expiryDate.getTime() - now.getTime()) / (1000 * 60 * 60 * 24)
+  );
+  return daysUntilExpiry > 0 && daysUntilExpiry <= 30;
+}
+
+/**
+ * GiftCardBalance - Display gift card balance and status
+ *
+ * Shows:
+ * - Current balance with progress bar
+ * - Card status (active, used, expired)
+ * - Expiration date with warning
+ * - Masked code for identification
+ *
+ * Requirements: R32.1, R32.5
+ */
+export function GiftCardBalance({
+  giftCard,
+  className = "",
+}: GiftCardBalanceProps) {
+  const statusConfig = getStatusConfig(giftCard.status);
+  const initialAmount = parseFloat(giftCard.initialAmount.amount);
+  const currentBalance = parseFloat(giftCard.balance.amount);
+  const usedPercentage =
+    initialAmount > 0 ? ((initialAmount - currentBalance) / initialAmount) * 100 : 0;
+  const expiringSoon = isExpiringSoon(giftCard.expiresAt);
+
+  return (
+    <Card className={cn(className)}>
+      <CardHeader className="pb-3">
+        <div className="flex items-start justify-between">
+          <div className="flex items-center gap-3">
+            <div className={cn("rounded-full p-2", statusConfig.bgColor)}>
+              <Gift className={cn("h-5 w-5", statusConfig.color)} />
+            </div>
+            <div>
+              <CardTitle className="text-lg flex items-center gap-2">
+                Gift Card
+                <Badge variant={statusConfig.variant}>{statusConfig.label}</Badge>
+              </CardTitle>
+              <p className="text-sm text-muted-foreground font-mono mt-1">
+                {giftCard.maskedCode}
+              </p>
+            </div>
+          </div>
+        </div>
+      </CardHeader>
+
+      <CardContent className="space-y-4">
+        {/* Balance display */}
+        <div className="space-y-2">
+          <div className="flex justify-between items-baseline">
+            <span className="text-sm text-muted-foreground">Available Balance</span>
+            <span className="text-2xl font-bold">
+              {formatAmount(
+                giftCard.balance.amount,
+                giftCard.balance.currencyCode
+              )}
+            </span>
+          </div>
+
+          {/* Progress bar */}
+          <Progress value={100 - usedPercentage} className="h-2" />
+
+          <div className="flex justify-between text-xs text-muted-foreground">
+            <span>
+              Used:{" "}
+              {formatAmount(
+                (initialAmount - currentBalance).toFixed(2),
+                giftCard.balance.currencyCode
+              )}
+            </span>
+            <span>
+              Initial:{" "}
+              {formatAmount(
+                giftCard.initialAmount.amount,
+                giftCard.initialAmount.currencyCode
+              )}
+            </span>
+          </div>
+        </div>
+
+        {/* Expiration warning */}
+        {giftCard.expiresAt && (
+          <div
+            className={cn(
+              "flex items-center gap-2 text-sm p-2 rounded-lg",
+              expiringSoon
+                ? "bg-yellow-50 dark:bg-yellow-900/20 text-yellow-800 dark:text-yellow-200"
+                : "bg-muted/50"
+            )}
+          >
+            {expiringSoon ? (
+              <AlertTriangle className="h-4 w-4" />
+            ) : (
+              <Calendar className="h-4 w-4 text-muted-foreground" />
+            )}
+            <span>
+              {expiringSoon ? "Expires soon: " : "Expires: "}
+              {formatDate(giftCard.expiresAt)}
+            </span>
+          </div>
+        )}
+
+        {/* No expiration */}
+        {!giftCard.expiresAt && giftCard.status === "ACTIVE" && (
+          <div className="flex items-center gap-2 text-sm text-muted-foreground">
+            <CheckCircle className="h-4 w-4 text-green-500" />
+            <span>No expiration date</span>
+          </div>
+        )}
+
+        {/* Recipient/message */}
+        {(giftCard.recipientName || giftCard.message) && (
+          <div className="pt-3 border-t border-border space-y-2">
+            {giftCard.recipientName && (
+              <p className="text-sm">
+                <span className="text-muted-foreground">To: </span>
+                <span className="font-medium">{giftCard.recipientName}</span>
+              </p>
+            )}
+            {giftCard.message && (
+              <p className="text-sm text-muted-foreground italic">
+                &ldquo;{giftCard.message}&rdquo;
+              </p>
+            )}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+/**
+ * GiftCardBalanceSkeleton - Loading state
+ */
+export function GiftCardBalanceSkeleton() {
+  return (
+    <Card>
+      <CardHeader className="pb-3">
+        <div className="flex items-start gap-3">
+          <div className="h-10 w-10 rounded-full bg-muted animate-pulse" />
+          <div className="space-y-2">
+            <div className="h-5 w-32 bg-muted animate-pulse rounded" />
+            <div className="h-4 w-40 bg-muted animate-pulse rounded" />
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="space-y-2">
+          <div className="h-8 w-24 bg-muted animate-pulse rounded" />
+          <div className="h-2 w-full bg-muted animate-pulse rounded" />
+          <div className="flex justify-between">
+            <div className="h-3 w-16 bg-muted animate-pulse rounded" />
+            <div className="h-3 w-16 bg-muted animate-pulse rounded" />
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+/**
+ * GiftCardBalanceCompact - Compact inline balance display
+ */
+export interface GiftCardBalanceCompactProps {
+  balance: {
+    amount: string;
+    currencyCode: string;
+  };
+  maskedCode: string;
+  status: GiftCardStatus;
+  className?: string;
+}
+
+export function GiftCardBalanceCompact({
+  balance,
+  maskedCode,
+  status,
+  className = "",
+}: GiftCardBalanceCompactProps) {
+  const statusConfig = getStatusConfig(status);
+
+  return (
+    <div
+      className={cn(
+        "flex items-center justify-between p-3 rounded-lg border",
+        className
+      )}
+    >
+      <div className="flex items-center gap-2">
+        <CreditCard className="h-4 w-4 text-muted-foreground" />
+        <span className="font-mono text-sm">{maskedCode}</span>
+        <Badge variant={statusConfig.variant} className="text-xs">
+          {statusConfig.label}
+        </Badge>
+      </div>
+      <span className="font-semibold">
+        {formatAmount(balance.amount, balance.currencyCode)}
+      </span>
+    </div>
+  );
+}

package/templates/storefront-nextjs-shadcn/components/gift-card/gift-card-input.tsx

@@ -0,0 +1,309 @@
+"use client";
+
+import { useState, useCallback } from "react";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import {
+  Gift,
+  Check,
+  X,
+  Loader2,
+  AlertCircle,
+  CreditCard,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+
+/**
+ * Gift card status for display
+ */
+type GiftCardStatus = "ACTIVE" | "USED" | "EXPIRED" | "DISABLED";
+
+/**
+ * Gift card validation result
+ */
+export interface GiftCardValidationResult {
+  valid: boolean;
+  code: string;
+  availableBalance?: {
+    amount: string;
+    currencyCode: string;
+  };
+  error?: {
+    code: string;
+    message: string;
+  };
+  giftCard?: {
+    id: string;
+    maskedCode: string;
+    lastCharacters: string;
+    status: GiftCardStatus;
+    balance: {
+      amount: string;
+      currencyCode: string;
+    };
+    expiresAt?: string;
+  };
+}
+
+export interface GiftCardInputProps {
+  onValidate: (code: string) => Promise<GiftCardValidationResult>;
+  onApply: (code: string, validation: GiftCardValidationResult) => void;
+  onRemove?: (code: string) => void;
+  appliedCodes?: string[];
+  checkoutTotal?: number;
+  currencyCode?: string;
+  disabled?: boolean;
+  className?: string;
+}
+
+/**
+ * Format currency amount for display
+ */
+function formatAmount(amount: string, currencyCode: string): string {
+  const num = parseFloat(amount);
+  return new Intl.NumberFormat("pl-PL", {
+    style: "currency",
+    currency: currencyCode,
+  }).format(num);
+}
+
+/**
+ * GiftCardInput - Input component for gift card codes
+ *
+ * Features:
+ * - Real-time validation on blur or button click
+ * - Shows balance and status feedback
+ * - Supports multiple gift cards
+ * - Error handling with user-friendly messages
+ *
+ * Requirements: R32.1, R32.4, R32.5
+ */
+export function GiftCardInput({
+  onValidate,
+  onApply,
+  onRemove,
+  appliedCodes = [],
+  checkoutTotal,
+  currencyCode = "PLN",
+  disabled = false,
+  className = "",
+}: GiftCardInputProps) {
+  const [code, setCode] = useState("");
+  const [isValidating, setIsValidating] = useState(false);
+  const [validation, setValidation] = useState<GiftCardValidationResult | null>(
+    null
+  );
+  const [error, setError] = useState<string | null>(null);
+
+  /**
+   * Format code as user types (XXXX-XXXX-XXXX-XXXX)
+   */
+  const handleCodeChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      let value = e.target.value.toUpperCase().replace(/[^A-Z0-9]/g, "");
+
+      // Format with dashes every 4 characters
+      if (value.length > 0) {
+        const parts = value.match(/.{1,4}/g) || [];
+        value = parts.join("-");
+      }
+
+      // Limit to 19 characters (16 + 3 dashes)
+      if (value.length <= 19) {
+        setCode(value);
+        setValidation(null);
+        setError(null);
+      }
+    },
+    []
+  );
+
+  /**
+   * Validate the gift card code
+   */
+  const handleValidate = useCallback(async () => {
+    if (!code || code.length < 4) {
+      setError("Please enter a valid gift card code");
+      return;
+    }
+
+    // Check if already applied
+    if (appliedCodes.includes(code)) {
+      setError("This gift card has already been applied");
+      return;
+    }
+
+    setIsValidating(true);
+    setError(null);
+
+    try {
+      const result = await onValidate(code);
+      setValidation(result);
+
+      if (!result.valid && result.error) {
+        setError(result.error.message);
+      }
+    } catch (err: any) {
+      setError(err.message || "Failed to validate gift card");
+    } finally {
+      setIsValidating(false);
+    }
+  }, [code, appliedCodes, onValidate]);
+
+  /**
+   * Apply the validated gift card
+   */
+  const handleApply = useCallback(() => {
+    if (validation?.valid) {
+      onApply(code, validation);
+      setCode("");
+      setValidation(null);
+    }
+  }, [code, validation, onApply]);
+
+  /**
+   * Handle Enter key press
+   */
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        if (validation?.valid) {
+          handleApply();
+        } else {
+          handleValidate();
+        }
+      }
+    },
+    [validation, handleApply, handleValidate]
+  );
+
+  return (
+    <div className={cn("space-y-3", className)}>
+      {/* Input row */}
+      <div className="flex gap-2">
+        <div className="relative flex-1">
+          <Gift className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+          <Input
+            type="text"
+            placeholder="Gift card code (e.g., ABCD-EFGH-IJKL-MNOP)"
+            value={code}
+            onChange={handleCodeChange}
+            onKeyDown={handleKeyDown}
+            onBlur={() => code.length >= 16 && handleValidate()}
+            disabled={disabled || isValidating}
+            className="pl-10 font-mono tracking-wider"
+          />
+        </div>
+        <Button
+          type="button"
+          variant={validation?.valid ? "default" : "outline"}
+          onClick={validation?.valid ? handleApply : handleValidate}
+          disabled={disabled || isValidating || !code}
+        >
+          {isValidating ? (
+            <Loader2 className="h-4 w-4 animate-spin" />
+          ) : validation?.valid ? (
+            <>
+              <Check className="mr-2 h-4 w-4" />
+              Apply
+            </>
+          ) : (
+            "Check"
+          )}
+        </Button>
+      </div>
+
+      {/* Validation result */}
+      {validation && !error && (
+        <div
+          className={cn(
+            "rounded-lg p-3 text-sm",
+            validation.valid
+              ? "bg-green-50 dark:bg-green-900/20 text-green-800 dark:text-green-200"
+              : "bg-red-50 dark:bg-red-900/20 text-red-800 dark:text-red-200"
+          )}
+        >
+          {validation.valid ? (
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <Check className="h-4 w-4" />
+                <span>Gift card valid!</span>
+              </div>
+              {validation.availableBalance && (
+                <span className="font-semibold">
+                  Balance:{" "}
+                  {formatAmount(
+                    validation.availableBalance.amount,
+                    validation.availableBalance.currencyCode
+                  )}
+                </span>
+              )}
+            </div>
+          ) : (
+            <div className="flex items-center gap-2">
+              <X className="h-4 w-4" />
+              <span>{validation.error?.message || "Invalid gift card"}</span>
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Error message */}
+      {error && (
+        <div className="flex items-center gap-2 text-sm text-red-600 dark:text-red-400">
+          <AlertCircle className="h-4 w-4" />
+          <span>{error}</span>
+        </div>
+      )}
+
+      {/* Applied gift cards */}
+      {appliedCodes.length > 0 && (
+        <div className="space-y-2">
+          <p className="text-sm font-medium text-muted-foreground">
+            Applied gift cards:
+          </p>
+          <div className="flex flex-wrap gap-2">
+            {appliedCodes.map((appliedCode) => (
+              <Badge
+                key={appliedCode}
+                variant="secondary"
+                className="flex items-center gap-1 py-1"
+              >
+                <CreditCard className="h-3 w-3" />
+                <span className="font-mono text-xs">
+                  ****{appliedCode.slice(-4)}
+                </span>
+                {onRemove && (
+                  <button
+                    type="button"
+                    onClick={() => onRemove(appliedCode)}
+                    className="ml-1 rounded-full p-0.5 hover:bg-muted"
+                    disabled={disabled}
+                  >
+                    <X className="h-3 w-3" />
+                  </button>
+                )}
+              </Badge>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+/**
+ * GiftCardInputSkeleton - Loading state
+ */
+export function GiftCardInputSkeleton() {
+  return (
+    <div className="space-y-3">
+      <div className="flex gap-2">
+        <div className="flex-1 h-10 bg-muted animate-pulse rounded-md" />
+        <div className="w-20 h-10 bg-muted animate-pulse rounded-md" />
+      </div>
+    </div>
+  );
+}

package/templates/storefront-nextjs-shadcn/components/gift-card/index.ts

@@ -0,0 +1,24 @@
+/**
+ * Gift Card Components
+ *
+ * Components for handling gift card functionality in the storefront.
+ *
+ * Requirements: R32 - Gift Cards
+ */
+
+export {
+  GiftCardInput,
+  GiftCardInputSkeleton,
+  type GiftCardInputProps,
+  type GiftCardValidationResult,
+} from "./gift-card-input";
+
+export {
+  GiftCardBalance,
+  GiftCardBalanceSkeleton,
+  GiftCardBalanceCompact,
+  type GiftCardBalanceProps,
+  type GiftCardBalanceCompactProps,
+  type GiftCardData,
+  type GiftCardStatus,
+} from "./gift-card-balance";