@doswiftly/cli 0.1.18 → 0.1.20

package/templates/storefront-nextjs-shadcn/components/layout/mobile-menu.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import { useState, useEffect } from "react";
-import Link from "next/link";
-import { usePathname } from "next/navigation";
+import { useTranslations } from "next-intl";
+import { Link, usePathname } from "@/i18n/navigation";
 import { Menu, X, ChevronDown, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
 
@@ -17,26 +17,29 @@ export interface MobileMenuProps {
   className?: string;
 }
 
-const defaultItems: MobileMenuItem[] = [
-  {
-    label: "Products",
-    href: "/products",
-  },
-  {
-    label: "Collections",
-    href: "/collections",
-  },
-  {
-    label: "Categories",
-    href: "/categories",
-  },
-  {
-    label: "About",
-    href: "/about",
-  },
-];
-
-export function MobileMenu({ items = defaultItems, className }: MobileMenuProps) {
+export function MobileMenu({ items, className }: MobileMenuProps) {
+  const t = useTranslations("nav");
+
+  const defaultItems: MobileMenuItem[] = [
+    {
+      label: t("products"),
+      href: "/products",
+    },
+    {
+      label: t("collections"),
+      href: "/collections",
+    },
+    {
+      label: t("categories"),
+      href: "/categories",
+    },
+    {
+      label: t("about"),
+      href: "/about",
+    },
+  ];
+
+  const resolvedItems = items ?? defaultItems;
   const [isOpen, setIsOpen] = useState(false);
   const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set());
   const pathname = usePathname();
@@ -108,7 +111,7 @@ export function MobileMenu({ items = defaultItems, className }: MobileMenuProps)
                 toggleExpanded(item.href);
               }}
               className="p-3 text-muted-foreground hover:text-foreground"
-              aria-label={`Toggle ${item.label} submenu`}
+              aria-label={t("toggleSubmenu", { label: item.label })}
               aria-expanded={isExpanded}
             >
               {isExpanded ? (
@@ -140,7 +143,7 @@ export function MobileMenu({ items = defaultItems, className }: MobileMenuProps)
           "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
           className
         )}
-        aria-label="Toggle mobile menu"
+        aria-label={t("toggleMobileMenu")}
         aria-expanded={isOpen}
         aria-controls="mobile-menu"
       >
@@ -163,16 +166,16 @@ export function MobileMenu({ items = defaultItems, className }: MobileMenuProps)
             className="fixed inset-y-0 left-0 z-50 w-full max-w-sm bg-background shadow-xl"
             role="dialog"
             aria-modal="true"
-            aria-label="Mobile navigation"
+            aria-label={t("mobileNavigation")}
           >
             <div className="flex h-full flex-col">
               {/* Header */}
               <div className="flex items-center justify-between border-b border-border p-4">
-                <h2 className="text-lg font-semibold">Menu</h2>
+                <h2 className="text-lg font-semibold">{t("menu")}</h2>
                 <button
                   onClick={() => setIsOpen(false)}
                   className="rounded-md p-2 text-muted-foreground hover:bg-accent hover:text-accent-foreground"
-                  aria-label="Close mobile menu"
+                  aria-label={t("closeMobileMenu")}
                 >
                   <X className="h-5 w-5" />
                 </button>
@@ -181,7 +184,7 @@ export function MobileMenu({ items = defaultItems, className }: MobileMenuProps)
               {/* Menu Items */}
               <nav className="flex-1 overflow-y-auto p-4">
                 <div className="space-y-1">
-                  {items.map((item) => renderMenuItem(item))}
+                  {resolvedItems.map((item) => renderMenuItem(item))}
                 </div>
               </nav>
 
@@ -192,13 +195,13 @@ export function MobileMenu({ items = defaultItems, className }: MobileMenuProps)
                     href="/account"
                     className="rounded-md bg-primary px-4 py-2 text-center text-sm font-medium text-primary-foreground hover:bg-primary/90"
                   >
-                    My Account
+                    {t("account")}
                   </Link>
                   <Link
                     href="/cart"
                     className="rounded-md border border-border px-4 py-2 text-center text-sm font-medium hover:bg-accent"
                   >
-                    View Cart
+                    {t("viewCart")}
                   </Link>
                 </div>
               </div>

package/templates/storefront-nextjs-shadcn/components/layout/navigation.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import Link from "next/link";
-import { usePathname } from "next/navigation";
+import { useTranslations } from "next-intl";
+import { Link, usePathname } from "@/i18n/navigation";
 import { cn } from "@/lib/utils";
 
 export interface NavigationItem {
@@ -15,28 +15,31 @@ export interface NavigationProps {
   className?: string;
 }
 
-const defaultItems: NavigationItem[] = [
-  {
-    label: "Products",
-    href: "/products",
-  },
-  {
-    label: "Collections",
-    href: "/collections",
-  },
-  {
-    label: "Categories",
-    href: "/categories",
-  },
-  {
-    label: "About",
-    href: "/about",
-  },
-];
-
-export function Navigation({ items = defaultItems, className }: NavigationProps) {
+export function Navigation({ items, className }: NavigationProps) {
+  const t = useTranslations("nav");
   const pathname = usePathname();
 
+  const defaultItems: NavigationItem[] = [
+    {
+      label: t("products"),
+      href: "/products",
+    },
+    {
+      label: t("collections"),
+      href: "/collections",
+    },
+    {
+      label: t("categories"),
+      href: "/categories",
+    },
+    {
+      label: t("about"),
+      href: "/about",
+    },
+  ];
+
+  const resolvedItems = items ?? defaultItems;
+
   const isActive = (href: string) => {
     if (href === "/") {
       return pathname === "/";
@@ -48,9 +51,9 @@ export function Navigation({ items = defaultItems, className }: NavigationProps)
     <nav
       className={cn("flex items-center gap-6", className)}
       role="navigation"
-      aria-label="Main navigation"
+      aria-label={t("mainNavigation")}
     >
-      {items.map((item) => (
+      {resolvedItems.map((item) => (
         <div key={item.href} className="relative group">
           <Link
             href={item.href}

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

@@ -10,19 +10,10 @@ import { Coins, AlertTriangle } from 'lucide-react';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { cn } from '@/lib/utils';
-
-interface PointsSummary {
-  totalPoints: number;
-  currentPoints: number;
-  pendingPoints: number;
-  redeemedPoints: number;
-  expiredPoints: number;
-  expiringPoints?: number;
-  nextExpiryDate?: string;
-}
+import type { LoyaltyPointsSummary } from '@/lib/graphql/fragments';
 
 interface PointsBalanceProps {
-  points: PointsSummary;
+  points: LoyaltyPointsSummary;
   variant?: 'default' | 'compact';
   className?: string;
 }

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

@@ -10,35 +10,14 @@ import { ArrowUpCircle, ArrowDownCircle, Clock, Gift, ShoppingCart, UserPlus, St
 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;
-}
+import type { LoyaltyTransaction } from '@/lib/graphql/fragments';
 
 interface PointsHistoryProps {
-  transactions: Transaction[];
+  transactions: LoyaltyTransaction[];
   className?: string;
 }
 
-const transactionConfig: Record<TransactionType, {
+const transactionConfig: Record<string, {
   label: string;
   icon: typeof ArrowUpCircle;
   color: string;
@@ -127,7 +106,11 @@ export function PointsHistory({ transactions, className }: PointsHistoryProps) {
       <CardContent>
         <div className="space-y-4">
           {transactions.map((transaction) => {
-            const config = transactionConfig[transaction.type];
+            const config = transactionConfig[transaction.type] ?? {
+              label: transaction.type,
+              icon: AlertCircle,
+              color: 'text-muted-foreground',
+            };
             const Icon = config.icon;
             const isEarning = transaction.points > 0;
 

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

@@ -12,6 +12,7 @@
  */
 
 import { useState } from 'react';
+import { useTranslations } from 'next-intl';
 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';
@@ -19,18 +20,10 @@ 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;
-}
+import type { ReferralStats } from '@/lib/graphql/fragments';
 
 interface ReferralSectionProps {
-  referralCode: string;
-  shareUrl: string;
-  stats: ReferralStats;
+  referralStats: ReferralStats;
   pointsName?: string;
   referralPoints?: number;
   bonusPoints?: number;
@@ -38,14 +31,14 @@ interface ReferralSectionProps {
 }
 
 export function ReferralSection({
-  referralCode,
-  shareUrl,
-  stats,
+  referralStats,
   pointsName = 'punktów',
   referralPoints = 0,
   bonusPoints = 0,
   className,
 }: ReferralSectionProps) {
+  const t = useTranslations("loyalty.referral");
+  const { referralCode, shareUrl } = referralStats;
   const [copied, setCopied] = useState<'code' | 'url' | null>(null);
 
   const formatNumber = (num: number) => {
@@ -56,10 +49,10 @@ export function ReferralSection({
     try {
       await navigator.clipboard.writeText(text);
       setCopied(type);
-      toast.success(type === 'code' ? 'Kod skopiowany!' : 'Link skopiowany!');
+      toast.success(type === 'code' ? t('codeCopied') : t('linkCopied'));
       setTimeout(() => setCopied(null), 2000);
     } catch {
-      toast.error('Nie udało się skopiować');
+      toast.error(t('copyFailed'));
     }
   };
 
@@ -67,14 +60,14 @@ export function ReferralSection({
     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}!`,
+          title: t('shareFriends'),
+          text: t('shareText', { code: referralCode }),
           url: shareUrl,
         });
       } catch (err) {
         // User cancelled or error
         if ((err as Error).name !== 'AbortError') {
-          toast.error('Nie udało się udostępnić');
+          toast.error(t('shareFailed'));
         }
       }
     } else {
@@ -90,11 +83,10 @@ export function ReferralSection({
         <CardHeader>
           <CardTitle className="flex items-center gap-2">
             <Users className="h-5 w-5" />
-            Twój kod polecający
+            {t('yourCode')}
           </CardTitle>
           <CardDescription>
-            Podziel się tym kodem ze znajomymi. Gdy dokonają pierwszego zakupu, oboje
-            otrzymacie punkty!
+            {t('shareDescription')}
           </CardDescription>
         </CardHeader>
         <CardContent className="space-y-4">
@@ -141,7 +133,7 @@ export function ReferralSection({
           {/* Share Button */}
           <Button onClick={handleShare} className="w-full">
             <Share2 className="h-4 w-4 mr-2" />
-            Udostępnij znajomym
+            {t('shareFriends')}
           </Button>
         </CardContent>
       </Card>
@@ -149,7 +141,7 @@ export function ReferralSection({
       {/* How it Works */}
       <Card>
         <CardHeader>
-          <CardTitle className="text-lg">Jak to działa?</CardTitle>
+          <CardTitle className="text-lg">{t('howItWorks')}</CardTitle>
         </CardHeader>
         <CardContent>
           <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
@@ -157,9 +149,9 @@ export function ReferralSection({
               <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>
+              <h4 className="font-medium mb-1">{t('step1Title')}</h4>
               <p className="text-sm text-muted-foreground">
-                Podziel się swoim kodem lub linkiem ze znajomymi
+                {t('step1Desc')}
               </p>
             </div>
 
@@ -167,9 +159,9 @@ export function ReferralSection({
               <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>
+              <h4 className="font-medium mb-1">{t('step2Title')}</h4>
               <p className="text-sm text-muted-foreground">
-                Znajomy używa Twojego kodu przy rejestracji i dokonuje zakupu
+                {t('step2Desc')}
               </p>
             </div>
 
@@ -177,10 +169,9 @@ export function ReferralSection({
               <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>
+              <h4 className="font-medium mb-1">{t('step3Title')}</h4>
               <p className="text-sm text-muted-foreground">
-                Ty otrzymujesz {formatNumber(referralPoints)} {pointsName}, a znajomy{' '}
-                {formatNumber(bonusPoints)} {pointsName}
+                {t('step3Desc', { points: formatNumber(referralPoints), name: pointsName })}
               </p>
             </div>
           </div>
@@ -192,54 +183,53 @@ export function ReferralSection({
         <CardHeader>
           <CardTitle className="text-lg flex items-center gap-2">
             <Award className="h-5 w-5" />
-            Twoje statystyki poleceń
+            {t('yourStats')}
           </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)}
+                {formatNumber(referralStats.totalReferred)}
               </div>
-              <div className="text-sm text-muted-foreground">Zaproszonych</div>
+              <div className="text-sm text-muted-foreground">{t('invited')}</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)}
+                  {formatNumber(referralStats.completedReferrals)}
                 </div>
                 <Check className="h-5 w-5 text-green-600" />
               </div>
-              <div className="text-sm text-muted-foreground">Zrealizowanych</div>
+              <div className="text-sm text-muted-foreground">{t('completed')}</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)}
+                  {formatNumber(referralStats.pendingReferrals)}
                 </div>
                 <Clock className="h-5 w-5 text-amber-600" />
               </div>
-              <div className="text-sm text-muted-foreground">Oczekujących</div>
+              <div className="text-sm text-muted-foreground">{t('pending')}</div>
             </div>
 
             <div className="p-4 bg-muted/50 rounded-lg text-center">
               <div className="text-2xl font-bold text-primary">
-                {formatNumber(stats.totalPointsEarned)}
+                {formatNumber(referralStats.totalPointsEarned)}
               </div>
               <div className="text-sm text-muted-foreground">
-                Zdobytych {pointsName}
+                {t('earned', { name: pointsName })}
               </div>
             </div>
           </div>
 
-          {stats.pendingReferrals > 0 && (
+          {referralStats.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ę.
+                {t('pendingReferrals', { count: referralStats.pendingReferrals })}
               </p>
             </div>
           )}

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

@@ -15,41 +15,17 @@ 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;
-}
+import type { LoyaltyReward, LoyaltyTier } from '@/lib/graphql/fragments';
 
 interface RewardsCatalogProps {
-  rewards: Reward[];
+  rewards: LoyaltyReward[];
   currentPoints: number;
-  currentTier?: TierType | null;
-  onRedeem?: (rewardId: string) => Promise<RedeemResult>;
+  currentTier?: LoyaltyTier['type'] | null;
+  onRedeem?: (rewardId: string) => Promise<{
+    discountCode?: string | null;
+    productDiscountCode?: string | null;
+    giftCardCode?: string | null;
+  }>;
   className?: string;
 }
 
@@ -73,13 +49,13 @@ export function RewardsCatalog({
     }).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 tierOrder: string[] = ['BRONZE', 'SILVER', 'GOLD', 'PLATINUM', 'DIAMOND'];
+  const canAccessTier = (requiredTierType?: string | null) => {
+    if (!requiredTierType || !currentTier) return true;
+    return tierOrder.indexOf(currentTier) >= tierOrder.indexOf(requiredTierType);
   };
 
-  const handleRedeem = async (reward: Reward) => {
+  const handleRedeem = async (reward: LoyaltyReward) => {
     if (!onRedeem) return;
 
     setRedeemingId(reward.id);
@@ -125,7 +101,7 @@ export function RewardsCatalog({
     <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 hasTierAccess = canAccessTier(reward.tierRequired?.type);
         const canRedeem = reward.available && canAfford && hasTierAccess;
 
         return (
@@ -144,8 +120,8 @@ export function RewardsCatalog({
             <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" />
+                {reward.tierRequired?.type && (
+                  <TierBadge tier={reward.tierRequired.type} size="sm" />
                 )}
               </div>
 
@@ -183,7 +159,7 @@ export function RewardsCatalog({
               {!hasTierAccess ? (
                 <Button variant="outline" className="w-full" disabled>
                   <Lock className="h-4 w-4 mr-2" />
-                  Wymaga {reward.tierRequired}
+                  Wymaga {reward.tierRequired?.name ?? reward.tierRequired?.type}
                 </Button>
               ) : !canAfford ? (
                 <Button variant="outline" className="w-full" disabled>

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

@@ -11,37 +11,10 @@ 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;
-  };
-}
+import type { TierProgress as TierProgressType } from '@/lib/graphql/fragments';
 
 interface TierProgressProps {
-  progress: TierProgressData;
+  progress: TierProgressType;
   className?: string;
 }
 

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

@@ -7,5 +7,10 @@
 export * from "./order-tracking";
 export * from "./shipment-card";
 export * from "./tracking-timeline";
-export * from "./tracking-status";
+export {
+  TrackingStatus,
+  CompactTrackingStatus,
+  type TrackingStatusProps,
+  type CompactTrackingStatusProps,
+} from "./tracking-status";
 export * from "./delivery-estimate";