@doswiftly/cli 0.1.1

package/templates/storefront-nextjs-shadcn/components/loyalty/points-history.tsx

@@ -0,0 +1,177 @@
+'use client';
+
+/**
+ * PointsHistory Component
+ *
+ * Displays loyalty points transaction history.
+ */
+
+import { ArrowUpCircle, ArrowDownCircle, Clock, Gift, ShoppingCart, UserPlus, Star, Cake, AlertCircle } from 'lucide-react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { cn } from '@/lib/utils';
+
+type TransactionType =
+  | 'EARN_PURCHASE'
+  | 'EARN_SIGNUP'
+  | 'EARN_REFERRAL'
+  | 'EARN_REVIEW'
+  | 'EARN_BIRTHDAY'
+  | 'EARN_BONUS'
+  | 'REDEEM'
+  | 'EXPIRE'
+  | 'ADJUST';
+
+interface Transaction {
+  id: string;
+  type: TransactionType;
+  points: number;
+  balanceAfter: number;
+  orderId?: string;
+  description?: string;
+  expiresAt?: string;
+  createdAt: string;
+}
+
+interface PointsHistoryProps {
+  transactions: Transaction[];
+  className?: string;
+}
+
+const transactionConfig: Record<TransactionType, {
+  label: string;
+  icon: typeof ArrowUpCircle;
+  color: string;
+}> = {
+  EARN_PURCHASE: {
+    label: 'Zakup',
+    icon: ShoppingCart,
+    color: 'text-green-600',
+  },
+  EARN_SIGNUP: {
+    label: 'Rejestracja',
+    icon: UserPlus,
+    color: 'text-green-600',
+  },
+  EARN_REFERRAL: {
+    label: 'Polecenie',
+    icon: Gift,
+    color: 'text-green-600',
+  },
+  EARN_REVIEW: {
+    label: 'Opinia',
+    icon: Star,
+    color: 'text-green-600',
+  },
+  EARN_BIRTHDAY: {
+    label: 'Urodziny',
+    icon: Cake,
+    color: 'text-green-600',
+  },
+  EARN_BONUS: {
+    label: 'Bonus',
+    icon: Gift,
+    color: 'text-green-600',
+  },
+  REDEEM: {
+    label: 'Wymiana',
+    icon: ArrowDownCircle,
+    color: 'text-red-600',
+  },
+  EXPIRE: {
+    label: 'Wygaśnięcie',
+    icon: Clock,
+    color: 'text-orange-600',
+  },
+  ADJUST: {
+    label: 'Korekta',
+    icon: AlertCircle,
+    color: 'text-blue-600',
+  },
+};
+
+export function PointsHistory({ transactions, className }: PointsHistoryProps) {
+  const formatNumber = (num: number) => {
+    return new Intl.NumberFormat('pl-PL').format(num);
+  };
+
+  const formatDate = (dateString: string) => {
+    return new Intl.DateTimeFormat('pl-PL', {
+      day: 'numeric',
+      month: 'short',
+      year: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+    }).format(new Date(dateString));
+  };
+
+  if (transactions.length === 0) {
+    return (
+      <Card className={className}>
+        <CardContent className="py-12 text-center">
+          <Clock className="h-12 w-12 mx-auto text-muted-foreground mb-4" />
+          <p className="text-muted-foreground">Brak historii transakcji</p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card className={className}>
+      <CardHeader>
+        <CardTitle className="text-lg flex items-center gap-2">
+          <Clock className="h-5 w-5" />
+          Historia punktów
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-4">
+          {transactions.map((transaction) => {
+            const config = transactionConfig[transaction.type];
+            const Icon = config.icon;
+            const isEarning = transaction.points > 0;
+
+            return (
+              <div
+                key={transaction.id}
+                className="flex items-center gap-4 py-3 border-b last:border-0"
+              >
+                <div className={cn('p-2 rounded-full bg-muted', config.color)}>
+                  <Icon className="h-4 w-4" />
+                </div>
+
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-2">
+                    <span className="font-medium">{config.label}</span>
+                    {transaction.orderId && (
+                      <Badge variant="outline" className="text-xs">
+                        #{transaction.orderId.slice(0, 8)}
+                      </Badge>
+                    )}
+                  </div>
+                  <div className="text-sm text-muted-foreground">
+                    {transaction.description || formatDate(transaction.createdAt)}
+                  </div>
+                </div>
+
+                <div className="text-right">
+                  <div
+                    className={cn(
+                      'font-semibold',
+                      isEarning ? 'text-green-600' : 'text-red-600'
+                    )}
+                  >
+                    {isEarning ? '+' : ''}{formatNumber(transaction.points)} pkt
+                  </div>
+                  <div className="text-xs text-muted-foreground">
+                    Saldo: {formatNumber(transaction.balanceAfter)}
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

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

@@ -0,0 +1,250 @@
+'use client';
+
+/**
+ * ReferralSection Component
+ *
+ * Displays referral program information including:
+ * - Referral code and share link
+ * - Statistics (total referred, completed, pending)
+ * - Points earned from referrals
+ *
+ * Requirements: R10.4 (Referral Program)
+ */
+
+import { useState } from 'react';
+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';
+import { Input } from '@/components/ui/input';
+import { Badge } from '@/components/ui/badge';
+import { cn } from '@/lib/utils';
+import { toast } from 'sonner';
+
+interface ReferralStats {
+  totalReferred: number;
+  completedReferrals: number;
+  pendingReferrals: number;
+  totalPointsEarned: number;
+}
+
+interface ReferralSectionProps {
+  referralCode: string;
+  shareUrl: string;
+  stats: ReferralStats;
+  pointsName?: string;
+  referralPoints?: number;
+  bonusPoints?: number;
+  className?: string;
+}
+
+export function ReferralSection({
+  referralCode,
+  shareUrl,
+  stats,
+  pointsName = 'punktów',
+  referralPoints = 0,
+  bonusPoints = 0,
+  className,
+}: ReferralSectionProps) {
+  const [copied, setCopied] = useState<'code' | 'url' | null>(null);
+
+  const formatNumber = (num: number) => {
+    return new Intl.NumberFormat('pl-PL').format(num);
+  };
+
+  const copyToClipboard = async (text: string, type: 'code' | 'url') => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(type);
+      toast.success(type === 'code' ? 'Kod skopiowany!' : 'Link skopiowany!');
+      setTimeout(() => setCopied(null), 2000);
+    } catch {
+      toast.error('Nie udało się skopiować');
+    }
+  };
+
+  const handleShare = async () => {
+    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}!`,
+          url: shareUrl,
+        });
+      } catch (err) {
+        // User cancelled or error
+        if ((err as Error).name !== 'AbortError') {
+          toast.error('Nie udało się udostępnić');
+        }
+      }
+    } else {
+      // Fallback to copy URL
+      copyToClipboard(shareUrl, 'url');
+    }
+  };
+
+  return (
+    <div className={cn('space-y-6', className)}>
+      {/* Main Referral Card */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Users className="h-5 w-5" />
+            Twój kod polecający
+          </CardTitle>
+          <CardDescription>
+            Podziel się tym kodem ze znajomymi. Gdy dokonają pierwszego zakupu, oboje
+            otrzymacie punkty!
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {/* Referral Code */}
+          <div className="flex gap-2">
+            <Input
+              value={referralCode}
+              readOnly
+              className="font-mono text-lg font-bold text-center tracking-wider"
+            />
+            <Button
+              variant="outline"
+              size="icon"
+              onClick={() => copyToClipboard(referralCode, 'code')}
+            >
+              {copied === 'code' ? (
+                <Check className="h-4 w-4 text-green-600" />
+              ) : (
+                <Copy className="h-4 w-4" />
+              )}
+            </Button>
+          </div>
+
+          {/* Share URL */}
+          <div className="flex gap-2">
+            <Input
+              value={shareUrl}
+              readOnly
+              className="text-sm text-muted-foreground"
+            />
+            <Button
+              variant="outline"
+              size="icon"
+              onClick={() => copyToClipboard(shareUrl, 'url')}
+            >
+              {copied === 'url' ? (
+                <Check className="h-4 w-4 text-green-600" />
+              ) : (
+                <Copy className="h-4 w-4" />
+              )}
+            </Button>
+          </div>
+
+          {/* Share Button */}
+          <Button onClick={handleShare} className="w-full">
+            <Share2 className="h-4 w-4 mr-2" />
+            Udostępnij znajomym
+          </Button>
+        </CardContent>
+      </Card>
+
+      {/* How it Works */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-lg">Jak to działa?</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            <div className="flex flex-col items-center text-center p-4 bg-muted/50 rounded-lg">
+              <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>
+              <p className="text-sm text-muted-foreground">
+                Podziel się swoim kodem lub linkiem ze znajomymi
+              </p>
+            </div>
+
+            <div className="flex flex-col items-center text-center p-4 bg-muted/50 rounded-lg">
+              <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>
+              <p className="text-sm text-muted-foreground">
+                Znajomy używa Twojego kodu przy rejestracji i dokonuje zakupu
+              </p>
+            </div>
+
+            <div className="flex flex-col items-center text-center p-4 bg-muted/50 rounded-lg">
+              <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>
+              <p className="text-sm text-muted-foreground">
+                Ty otrzymujesz {formatNumber(referralPoints)} {pointsName}, a znajomy{' '}
+                {formatNumber(bonusPoints)} {pointsName}
+              </p>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Statistics */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-lg flex items-center gap-2">
+            <Award className="h-5 w-5" />
+            Twoje statystyki poleceń
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+            <div className="p-4 bg-muted/50 rounded-lg text-center">
+              <div className="text-2xl font-bold text-primary">
+                {formatNumber(stats.totalReferred)}
+              </div>
+              <div className="text-sm text-muted-foreground">Zaproszonych</div>
+            </div>
+
+            <div className="p-4 bg-muted/50 rounded-lg text-center">
+              <div className="flex items-center justify-center gap-1">
+                <div className="text-2xl font-bold text-green-600">
+                  {formatNumber(stats.completedReferrals)}
+                </div>
+                <Check className="h-5 w-5 text-green-600" />
+              </div>
+              <div className="text-sm text-muted-foreground">Zrealizowanych</div>
+            </div>
+
+            <div className="p-4 bg-muted/50 rounded-lg text-center">
+              <div className="flex items-center justify-center gap-1">
+                <div className="text-2xl font-bold text-amber-600">
+                  {formatNumber(stats.pendingReferrals)}
+                </div>
+                <Clock className="h-5 w-5 text-amber-600" />
+              </div>
+              <div className="text-sm text-muted-foreground">Oczekujących</div>
+            </div>
+
+            <div className="p-4 bg-muted/50 rounded-lg text-center">
+              <div className="text-2xl font-bold text-primary">
+                {formatNumber(stats.totalPointsEarned)}
+              </div>
+              <div className="text-sm text-muted-foreground">
+                Zdobytych {pointsName}
+              </div>
+            </div>
+          </div>
+
+          {stats.pendingReferrals > 0 && (
+            <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 {stats.pendingReferrals} oczekujących poleceń. Punkty zostaną
+                przyznane po dokonaniu pierwszego zakupu przez poleconą osobę.
+              </p>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/templates/storefront-nextjs-shadcn/components/loyalty/rewards-catalog.tsx

@@ -0,0 +1,217 @@
+'use client';
+
+/**
+ * RewardsCatalog Component
+ *
+ * Displays available loyalty rewards that can be redeemed.
+ */
+
+import { useState } from 'react';
+import Image from 'next/image';
+import { Gift, Check, Lock, Loader2 } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardFooter } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { cn } from '@/lib/utils';
+import { TierBadge } from './tier-badge';
+import { toast } from 'sonner';
+
+type TierType = 'BRONZE' | 'SILVER' | 'GOLD' | 'PLATINUM' | 'DIAMOND';
+
+interface Reward {
+  id: string;
+  name: string;
+  slug: string;
+  type: string;
+  pointsCost: number;
+  discountPercent?: number;
+  discountAmount?: {
+    amount: string;
+    currencyCode: string;
+  };
+  description?: string;
+  image?: {
+    url: string;
+    altText?: string | null;
+  } | null;
+  available: boolean;
+  tierRequired?: TierType | null;
+  remainingRedemptions?: number;
+}
+
+interface RedeemResult {
+  discountCode?: string | null;
+  productDiscountCode?: string | null;
+  giftCardCode?: string | null;
+}
+
+interface RewardsCatalogProps {
+  rewards: Reward[];
+  currentPoints: number;
+  currentTier?: TierType | null;
+  onRedeem?: (rewardId: string) => Promise<RedeemResult>;
+  className?: string;
+}
+
+export function RewardsCatalog({
+  rewards,
+  currentPoints,
+  currentTier,
+  onRedeem,
+  className,
+}: RewardsCatalogProps) {
+  const [redeemingId, setRedeemingId] = useState<string | null>(null);
+
+  const formatNumber = (num: number) => {
+    return new Intl.NumberFormat('pl-PL').format(num);
+  };
+
+  const formatMoney = (amount: string, currency: string) => {
+    return new Intl.NumberFormat('pl-PL', {
+      style: 'currency',
+      currency,
+    }).format(parseFloat(amount));
+  };
+
+  const tierOrder: TierType[] = ['BRONZE', 'SILVER', 'GOLD', 'PLATINUM', 'DIAMOND'];
+  const canAccessTier = (requiredTier?: TierType | null) => {
+    if (!requiredTier || !currentTier) return true;
+    return tierOrder.indexOf(currentTier) >= tierOrder.indexOf(requiredTier);
+  };
+
+  const handleRedeem = async (reward: Reward) => {
+    if (!onRedeem) return;
+
+    setRedeemingId(reward.id);
+    try {
+      const result = await onRedeem(reward.id);
+
+      // Display the appropriate code based on reward type
+      if (result.discountCode) {
+        toast.success(
+          `Nagroda odebrana! Kod rabatowy: ${result.discountCode}`,
+          { duration: 10000 }
+        );
+      } else if (result.productDiscountCode) {
+        toast.success(
+          `Nagroda odebrana! Kod na darmowy produkt: ${result.productDiscountCode}`,
+          { duration: 10000 }
+        );
+      } else if (result.giftCardCode) {
+        toast.success(
+          `Nagroda odebrana! Karta podarunkowa: ${result.giftCardCode}`,
+          { duration: 10000 }
+        );
+      } else {
+        toast.success('Nagroda odebrana!');
+      }
+    } catch {
+      toast.error('Nie udało się odebrać nagrody');
+    } finally {
+      setRedeemingId(null);
+    }
+  };
+
+  if (rewards.length === 0) {
+    return (
+      <div className={cn('text-center py-12', className)}>
+        <Gift className="h-12 w-12 mx-auto text-muted-foreground mb-4" />
+        <p className="text-muted-foreground">Brak dostępnych nagród</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn('grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4', className)}>
+      {rewards.map((reward) => {
+        const canAfford = currentPoints >= reward.pointsCost;
+        const hasTierAccess = canAccessTier(reward.tierRequired);
+        const canRedeem = reward.available && canAfford && hasTierAccess;
+
+        return (
+          <Card key={reward.id} className={cn('overflow-hidden', !canRedeem && 'opacity-75')}>
+            {reward.image && (
+              <div className="relative aspect-[16/9] bg-muted">
+                <Image
+                  src={reward.image.url}
+                  alt={reward.image.altText || reward.name}
+                  fill
+                  className="object-cover"
+                  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+                />
+              </div>
+            )}
+            <CardContent className="p-4">
+              <div className="flex items-start justify-between gap-2 mb-2">
+                <h3 className="font-semibold">{reward.name}</h3>
+                {reward.tierRequired && (
+                  <TierBadge tier={reward.tierRequired} size="sm" />
+                )}
+              </div>
+
+              {reward.description && (
+                <p className="text-sm text-muted-foreground mb-3 line-clamp-2">
+                  {reward.description}
+                </p>
+              )}
+
+              <div className="flex items-center gap-2 flex-wrap">
+                <Badge variant="secondary" className="gap-1">
+                  <Gift className="h-3 w-3" />
+                  {formatNumber(reward.pointsCost)} pkt
+                </Badge>
+
+                {reward.discountPercent && (
+                  <Badge variant="outline">
+                    -{reward.discountPercent}%
+                  </Badge>
+                )}
+                {reward.discountAmount && (
+                  <Badge variant="outline">
+                    -{formatMoney(reward.discountAmount.amount, reward.discountAmount.currencyCode)}
+                  </Badge>
+                )}
+
+                {reward.remainingRedemptions !== undefined && reward.remainingRedemptions !== null && (
+                  <Badge variant="outline" className="text-xs">
+                    Zostało: {reward.remainingRedemptions}
+                  </Badge>
+                )}
+              </div>
+            </CardContent>
+            <CardFooter className="p-4 pt-0">
+              {!hasTierAccess ? (
+                <Button variant="outline" className="w-full" disabled>
+                  <Lock className="h-4 w-4 mr-2" />
+                  Wymaga {reward.tierRequired}
+                </Button>
+              ) : !canAfford ? (
+                <Button variant="outline" className="w-full" disabled>
+                  Brakuje {formatNumber(reward.pointsCost - currentPoints)} pkt
+                </Button>
+              ) : (
+                <Button
+                  className="w-full"
+                  onClick={() => handleRedeem(reward)}
+                  disabled={redeemingId === reward.id || !reward.available}
+                >
+                  {redeemingId === reward.id ? (
+                    <>
+                      <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                      Odbieranie...
+                    </>
+                  ) : (
+                    <>
+                      <Check className="h-4 w-4 mr-2" />
+                      Odbierz nagrodę
+                    </>
+                  )}
+                </Button>
+              )}
+            </CardFooter>
+          </Card>
+        );
+      })}
+    </div>
+  );
+}