@doswiftly/cli 0.1.1

package/templates/storefront-nextjs-shadcn/components/loyalty/tier-badge.tsx

@@ -0,0 +1,106 @@
+'use client';
+
+/**
+ * TierBadge Component
+ *
+ * Displays loyalty tier badge with icon and name.
+ */
+
+import { Crown, Star, Gem, Award, Medal } from 'lucide-react';
+import { Badge } from '@/components/ui/badge';
+import { cn } from '@/lib/utils';
+
+type TierType = 'BRONZE' | 'SILVER' | 'GOLD' | 'PLATINUM' | 'DIAMOND';
+
+interface TierBadgeProps {
+  tier?: TierType | null;
+  name?: string;
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const tierConfig: Record<TierType, {
+  icon: typeof Crown;
+  bgColor: string;
+  textColor: string;
+  borderColor: string;
+  label: string;
+}> = {
+  BRONZE: {
+    icon: Medal,
+    bgColor: 'bg-amber-100 dark:bg-amber-950',
+    textColor: 'text-amber-800 dark:text-amber-200',
+    borderColor: 'border-amber-300 dark:border-amber-700',
+    label: 'Brąz',
+  },
+  SILVER: {
+    icon: Award,
+    bgColor: 'bg-gray-100 dark:bg-gray-800',
+    textColor: 'text-gray-700 dark:text-gray-200',
+    borderColor: 'border-gray-300 dark:border-gray-600',
+    label: 'Srebro',
+  },
+  GOLD: {
+    icon: Star,
+    bgColor: 'bg-yellow-100 dark:bg-yellow-950',
+    textColor: 'text-yellow-800 dark:text-yellow-200',
+    borderColor: 'border-yellow-300 dark:border-yellow-700',
+    label: 'Złoto',
+  },
+  PLATINUM: {
+    icon: Gem,
+    bgColor: 'bg-slate-100 dark:bg-slate-800',
+    textColor: 'text-slate-700 dark:text-slate-200',
+    borderColor: 'border-slate-400 dark:border-slate-500',
+    label: 'Platyna',
+  },
+  DIAMOND: {
+    icon: Crown,
+    bgColor: 'bg-cyan-100 dark:bg-cyan-950',
+    textColor: 'text-cyan-800 dark:text-cyan-200',
+    borderColor: 'border-cyan-300 dark:border-cyan-700',
+    label: 'Diament',
+  },
+};
+
+const defaultConfig = {
+  icon: Award,
+  bgColor: 'bg-purple-100 dark:bg-purple-950',
+  textColor: 'text-purple-800 dark:text-purple-200',
+  borderColor: 'border-purple-300 dark:border-purple-700',
+  label: 'Niestandardowy',
+};
+
+export function TierBadge({ tier, name, size = 'md', className }: TierBadgeProps) {
+  const config = tier ? tierConfig[tier] : defaultConfig;
+  const Icon = config.icon;
+
+  const sizeClasses = {
+    sm: 'text-xs px-2 py-0.5',
+    md: 'text-sm px-3 py-1',
+    lg: 'text-base px-4 py-1.5',
+  };
+
+  const iconSizes = {
+    sm: 'h-3 w-3',
+    md: 'h-4 w-4',
+    lg: 'h-5 w-5',
+  };
+
+  return (
+    <Badge
+      variant="outline"
+      className={cn(
+        'gap-1.5 font-medium border',
+        config.bgColor,
+        config.textColor,
+        config.borderColor,
+        sizeClasses[size],
+        className
+      )}
+    >
+      <Icon className={iconSizes[size]} />
+      {name || config.label}
+    </Badge>
+  );
+}

package/templates/storefront-nextjs-shadcn/components/loyalty/tier-progress.tsx

@@ -0,0 +1,131 @@
+'use client';
+
+/**
+ * TierProgress Component
+ *
+ * Shows progress towards next loyalty tier.
+ */
+
+import { TrendingUp, Lock } from 'lucide-react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Progress } from '@/components/ui/progress';
+import { TierBadge } from './tier-badge';
+import { cn } from '@/lib/utils';
+
+type TierType = 'BRONZE' | 'SILVER' | 'GOLD' | 'PLATINUM' | 'DIAMOND';
+
+interface CustomBenefit {
+  name: string;
+  description?: string | null;
+  icon?: string | null;
+}
+
+interface Tier {
+  id: string;
+  name: string;
+  type?: TierType | null;
+  minPoints: number;
+  pointsMultiplier: number;
+  customBenefits?: CustomBenefit[];
+}
+
+interface TierProgressData {
+  currentTier: Tier;
+  nextTier?: Tier;
+  pointsToNextTier: number;
+  progressPercent: number;
+  spendToNextTier?: {
+    amount: string;
+    currencyCode: string;
+  };
+}
+
+interface TierProgressProps {
+  progress: TierProgressData;
+  className?: string;
+}
+
+// Simple Progress component fallback
+const ProgressBar = typeof Progress === 'undefined'
+  ? ({ value, className }: { value: number; className?: string }) => (
+      <div className={cn('h-2 bg-muted rounded-full overflow-hidden', className)}>
+        <div
+          className="h-full bg-primary transition-all duration-500"
+          style={{ width: `${value}%` }}
+        />
+      </div>
+    )
+  : Progress;
+
+export function TierProgress({ progress, className }: TierProgressProps) {
+  const { currentTier, nextTier, pointsToNextTier, progressPercent } = progress;
+
+  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));
+  };
+
+  return (
+    <Card className={className}>
+      <CardHeader className="pb-2">
+        <CardTitle className="text-lg flex items-center gap-2">
+          <TrendingUp className="h-5 w-5" />
+          Postęp poziomu
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="flex items-center justify-between mb-4">
+          <div className="flex items-center gap-2">
+            <TierBadge tier={currentTier.type} name={currentTier.name} />
+            <span className="text-sm text-muted-foreground">Twój poziom</span>
+          </div>
+          {nextTier && (
+            <div className="flex items-center gap-2">
+              <span className="text-sm text-muted-foreground">Następny:</span>
+              <TierBadge tier={nextTier.type} name={nextTier.name} />
+            </div>
+          )}
+        </div>
+
+        {nextTier ? (
+          <>
+            <ProgressBar value={progressPercent} className="h-3 mb-3" />
+            <p className="text-sm text-muted-foreground">
+              Potrzebujesz jeszcze{' '}
+              <span className="font-semibold text-foreground">
+                {formatNumber(pointsToNextTier)} punktów
+              </span>{' '}
+              do poziomu {nextTier.name}
+            </p>
+
+            {/* Next tier benefits preview */}
+            <div className="mt-4 p-3 bg-muted/50 rounded-lg">
+              <h4 className="text-sm font-medium mb-2 flex items-center gap-1.5">
+                <Lock className="h-3.5 w-3.5" />
+                Odblokujesz na poziomie {nextTier.name}:
+              </h4>
+              <ul className="text-sm text-muted-foreground space-y-1">
+                {nextTier.pointsMultiplier > 1 && (
+                  <li>• Mnożnik punktów x{nextTier.pointsMultiplier}</li>
+                )}
+                {nextTier.customBenefits?.map((benefit, idx) => (
+                  <li key={idx}>• {benefit.name}</li>
+                ))}
+              </ul>
+            </div>
+          </>
+        ) : (
+          <p className="text-sm text-muted-foreground">
+            🎉 Gratulacje! Osiągnąłeś najwyższy poziom!
+          </p>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

package/templates/storefront-nextjs-shadcn/components/order/delivery-estimate.tsx

@@ -0,0 +1,196 @@
+"use client";
+
+import { Calendar, Clock, MapPin } from "lucide-react";
+import { Card } from "@/components/ui/card";
+
+export interface DeliveryEstimateProps {
+  estimatedDate: string;
+  earliestDate?: string;
+  latestDate?: string;
+  address?: {
+    city: string;
+    province: string;
+    country: string;
+  };
+  className?: string;
+}
+
+/**
+ * DeliveryEstimate - Display estimated delivery date
+ */
+export function DeliveryEstimate({
+  estimatedDate,
+  earliestDate,
+  latestDate,
+  address,
+  className = "",
+}: DeliveryEstimateProps) {
+  const formatDate = (dateString: string) => {
+    return new Date(dateString).toLocaleDateString("pl-PL", {
+      weekday: "long",
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+    });
+  };
+
+  const formatShortDate = (dateString: string) => {
+    return new Date(dateString).toLocaleDateString("pl-PL", {
+      month: "short",
+      day: "numeric",
+    });
+  };
+
+  const getDaysUntil = (dateString: string) => {
+    const today = new Date();
+    const target = new Date(dateString);
+    const diffTime = target.getTime() - today.getTime();
+    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+    return diffDays;
+  };
+
+  const daysUntil = getDaysUntil(estimatedDate);
+
+  return (
+    <Card className={`p-6 ${className}`}>
+      <div className="flex items-start gap-4">
+        {/* Calendar Icon */}
+        <div className="rounded-full bg-primary/10 p-3">
+          <Calendar className="h-6 w-6 text-primary" />
+        </div>
+
+        {/* Delivery Info */}
+        <div className="flex-1">
+          <h3 className="text-lg font-semibold text-foreground mb-2">
+            Estimated Delivery
+          </h3>
+
+          {/* Primary Estimate */}
+          <div className="mb-4">
+            <p className="text-2xl font-bold text-foreground">
+              {formatDate(estimatedDate)}
+            </p>
+            {daysUntil >= 0 && (
+              <p className="mt-1 text-sm text-muted-foreground">
+                {daysUntil === 0
+                  ? "Arriving today"
+                  : daysUntil === 1
+                  ? "Arriving tomorrow"
+                  : `Arriving in ${daysUntil} days`}
+              </p>
+            )}
+          </div>
+
+          {/* Date Range */}
+          {earliestDate && latestDate && (
+            <div className="flex items-center gap-2 mb-4 text-sm text-muted-foreground">
+              <Clock className="h-4 w-4" />
+              <span>
+                Expected between {formatShortDate(earliestDate)} and{" "}
+                {formatShortDate(latestDate)}
+              </span>
+            </div>
+          )}
+
+          {/* Delivery Address */}
+          {address && (
+            <div className="flex items-start gap-2 text-sm text-muted-foreground">
+              <MapPin className="h-4 w-4 mt-0.5 flex-shrink-0" />
+              <span>
+                Delivering to {address.city}, {address.province},{" "}
+                {address.country}
+              </span>
+            </div>
+          )}
+        </div>
+      </div>
+    </Card>
+  );
+}
+
+export interface DeliveryWindowProps {
+  date: string;
+  startTime?: string;
+  endTime?: string;
+  className?: string;
+}
+
+/**
+ * DeliveryWindow - Display specific delivery time window
+ */
+export function DeliveryWindow({
+  date,
+  startTime,
+  endTime,
+  className = "",
+}: DeliveryWindowProps) {
+  const formatDate = (dateString: string) => {
+    return new Date(dateString).toLocaleDateString("pl-PL", {
+      weekday: "long",
+      month: "long",
+      day: "numeric",
+    });
+  };
+
+  return (
+    <div
+      className={`rounded-lg border border-border bg-muted/50 p-4 ${className}`}
+    >
+      <div className="flex items-center gap-3">
+        <Clock className="h-5 w-5 text-primary" />
+        <div>
+          <p className="font-medium text-foreground">{formatDate(date)}</p>
+          {startTime && endTime && (
+            <p className="text-sm text-muted-foreground">
+              Between {startTime} and {endTime}
+            </p>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export interface DeliveryProgressProps {
+  currentStep: number;
+  totalSteps: number;
+  estimatedDate: string;
+  className?: string;
+}
+
+/**
+ * DeliveryProgress - Visual progress indicator for delivery
+ */
+export function DeliveryProgress({
+  currentStep,
+  totalSteps,
+  estimatedDate,
+  className = "",
+}: DeliveryProgressProps) {
+  const progress = (currentStep / totalSteps) * 100;
+  const daysUntil = Math.ceil(
+    (new Date(estimatedDate).getTime() - new Date().getTime()) /
+      (1000 * 60 * 60 * 24)
+  );
+
+  return (
+    <div className={className}>
+      <div className="mb-2 flex items-center justify-between text-sm">
+        <span className="font-medium text-foreground">
+          Step {currentStep} of {totalSteps}
+        </span>
+        <span className="text-muted-foreground">
+          {daysUntil > 0 ? `${daysUntil} days remaining` : "Arriving today"}
+        </span>
+      </div>
+
+      {/* Progress Bar */}
+      <div className="h-2 w-full overflow-hidden rounded-full bg-muted">
+        <div
+          className="h-full bg-primary transition-all duration-300"
+          style={{ width: `${progress}%` }}
+        />
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,11 @@
+/**
+ * Order Components Index
+ *
+ * Export all order-related components for the storefront.
+ */
+
+export * from "./order-tracking";
+export * from "./shipment-card";
+export * from "./tracking-timeline";
+export * from "./tracking-status";
+export * from "./delivery-estimate";

package/templates/storefront-nextjs-shadcn/components/order/order-tracking.tsx

@@ -0,0 +1,200 @@
+"use client";
+
+import { Package, Truck } from "lucide-react";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import {
+  ShipmentCard,
+  ShipmentCardSkeleton,
+  type ShipmentData,
+} from "./shipment-card";
+import { MilestoneTimeline } from "./tracking-timeline";
+
+export interface OrderTrackingProps {
+  /** Order ID for display */
+  orderNumber: string;
+  /** Array of shipments for this order */
+  shipments: ShipmentData[];
+  /** Whether data is loading */
+  isLoading?: boolean;
+  /** Error message if fetch failed */
+  error?: string | null;
+  /** Custom className */
+  className?: string;
+}
+
+/**
+ * Calculate order-level milestone status from shipments
+ */
+function getOrderMilestones(shipments: ShipmentData[]) {
+  if (shipments.length === 0) {
+    return [
+      { label: "Order Placed", status: "completed" as const, date: undefined },
+      { label: "Processing", status: "current" as const, date: undefined },
+      { label: "Shipped", status: "pending" as const, date: undefined },
+      { label: "Delivered", status: "pending" as const, date: undefined },
+    ];
+  }
+
+  // Determine overall status from shipments
+  const allDelivered = shipments.every((s) => s.status === "DELIVERED");
+  const anyShipped = shipments.some(
+    (s) =>
+      s.status !== "CREATED" &&
+      s.status !== "LABEL_PRINTED" &&
+      s.status !== "CANCELLED"
+  );
+  const anyInTransit = shipments.some(
+    (s) =>
+      s.status === "IN_TRANSIT" ||
+      s.status === "OUT_FOR_DELIVERY" ||
+      s.status === "PICKED_UP"
+  );
+  const anyOutForDelivery = shipments.some(
+    (s) => s.status === "OUT_FOR_DELIVERY"
+  );
+
+  // Find relevant dates
+  const shippedAt = shipments.find((s) => s.shippedAt)?.shippedAt;
+  const deliveredAt = shipments.find((s) => s.deliveredAt)?.deliveredAt;
+  const createdAt = shipments[0]?.createdAt;
+
+  return [
+    {
+      label: "Order Placed",
+      status: "completed" as const,
+      date: createdAt,
+    },
+    {
+      label: "Processing",
+      status: anyShipped ? ("completed" as const) : ("current" as const),
+      date: undefined,
+    },
+    {
+      label: "Shipped",
+      status: allDelivered
+        ? ("completed" as const)
+        : anyInTransit || anyOutForDelivery
+        ? ("current" as const)
+        : anyShipped
+        ? ("completed" as const)
+        : ("pending" as const),
+      date: shippedAt || undefined,
+    },
+    {
+      label: "Delivered",
+      status: allDelivered ? ("completed" as const) : ("pending" as const),
+      date: deliveredAt || undefined,
+    },
+  ];
+}
+
+/**
+ * OrderTracking - Display order tracking with shipments
+ *
+ * Shows:
+ * - Order-level milestone progress (Order Placed → Processing → Shipped → Delivered)
+ * - Individual shipment cards with detailed tracking
+ * - Loading and error states
+ *
+ * Requirements: R29.2, R29.3, R29.4, R29.5, R29.6
+ */
+export function OrderTracking({
+  orderNumber,
+  shipments,
+  isLoading = false,
+  error = null,
+  className = "",
+}: OrderTrackingProps) {
+  const milestones = getOrderMilestones(shipments);
+
+  // Error state
+  if (error) {
+    return (
+      <Alert variant="destructive" className={className}>
+        <AlertTitle>Error Loading Tracking</AlertTitle>
+        <AlertDescription>{error}</AlertDescription>
+      </Alert>
+    );
+  }
+
+  // Loading state
+  if (isLoading) {
+    return (
+      <div className={`space-y-6 ${className}`}>
+        <div className="flex items-center gap-2 mb-4">
+          <Truck className="h-5 w-5 text-muted-foreground" />
+          <h2 className="text-xl font-semibold">Order Tracking</h2>
+        </div>
+
+        {/* Skeleton milestone timeline */}
+        <div className="h-20 bg-muted animate-pulse rounded-lg" />
+
+        {/* Skeleton shipment cards */}
+        <div className="space-y-4">
+          <ShipmentCardSkeleton />
+        </div>
+      </div>
+    );
+  }
+
+  // No shipments yet
+  if (shipments.length === 0) {
+    return (
+      <div className={`space-y-6 ${className}`}>
+        <div className="flex items-center gap-2 mb-4">
+          <Truck className="h-5 w-5 text-muted-foreground" />
+          <h2 className="text-xl font-semibold">Order Tracking</h2>
+        </div>
+
+        {/* Milestone progress */}
+        <MilestoneTimeline milestones={milestones} className="mb-6" />
+
+        {/* No shipments message */}
+        <div className="rounded-lg border border-border bg-muted/50 p-8 text-center">
+          <Package className="mx-auto h-12 w-12 text-muted-foreground mb-4" />
+          <h3 className="text-lg font-medium text-foreground mb-2">
+            No Shipments Yet
+          </h3>
+          <p className="text-muted-foreground">
+            Your order is being prepared. Tracking information will appear here
+            once your items are shipped.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  // With shipments
+  return (
+    <div className={`space-y-6 ${className}`}>
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <Truck className="h-5 w-5 text-muted-foreground" />
+          <h2 className="text-xl font-semibold">Order Tracking</h2>
+        </div>
+        <span className="text-sm text-muted-foreground">
+          {shipments.length} {shipments.length === 1 ? "shipment" : "shipments"}
+        </span>
+      </div>
+
+      {/* Milestone progress */}
+      <MilestoneTimeline milestones={milestones} className="mb-6" />
+
+      {/* Shipment cards */}
+      <div className="space-y-4">
+        {shipments.map((shipment, index) => (
+          <div key={shipment.id}>
+            {shipments.length > 1 && (
+              <h3 className="text-sm font-medium text-muted-foreground mb-2">
+                Shipment {index + 1} of {shipments.length}
+              </h3>
+            )}
+            <ShipmentCard shipment={shipment} showTimeline />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default OrderTracking;