@doswiftly/cli 0.1.18 → 0.1.20

package/templates/storefront-nextjs-shadcn/app/{account → [locale]/account}/loyalty/page.tsx

@@ -14,8 +14,9 @@
  * Requirements: R7, R8, R10.4
  */
 
-import { useState, useEffect } from 'react';
-import Link from 'next/link';
+import { useState } from 'react';
+import { useTranslations } from 'next-intl';
+import { Link } from '@/i18n/navigation';
 import { ArrowLeft, Gift, Award, History, Loader2, Users, AlertCircle } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
@@ -27,100 +28,7 @@ import { TierProgress } from '@/components/loyalty/tier-progress';
 import { RewardsCatalog } from '@/components/loyalty/rewards-catalog';
 import { PointsHistory } from '@/components/loyalty/points-history';
 import { ReferralSection } from '@/components/loyalty/referral-section';
-import { useAuth } from '@doswiftly/commerce-sdk/graphql/react';
-
-// Type imports - these match the GraphQL schema
-type TierType = 'BRONZE' | 'SILVER' | 'GOLD' | 'PLATINUM' | 'DIAMOND';
-
-interface CustomBenefit {
-  name: string;
-  description?: string | null;
-  icon?: string | null;
-}
-
-interface LoyaltyTier {
-  id: string;
-  name: string;
-  type?: TierType | null;
-  minPoints: number;
-  minAnnualSpend?: { amount: string; currencyCode: string } | null;
-  pointsMultiplier: number;
-  customBenefits: CustomBenefit[];
-}
-
-interface PointsSummary {
-  totalPoints: number;
-  currentPoints: number;
-  pendingPoints: number;
-  redeemedPoints: number;
-  expiredPoints: number;
-  expiringPoints?: number;
-  nextExpiryDate?: string;
-}
-
-interface TierProgressData {
-  currentTier: LoyaltyTier;
-  nextTier?: LoyaltyTier;
-  pointsToNextTier: number;
-  progressPercent: number;
-  spendToNextTier?: { amount: string; currencyCode: string };
-}
-
-interface LoyaltyMember {
-  id: string;
-  customerId: string;
-  points: PointsSummary;
-  tier?: LoyaltyTier;
-  tierProgress?: TierProgressData;
-  annualSpend: { amount: string; currencyCode: string };
-  lastActivityAt?: string;
-  enrolledAt: string;
-}
-
-interface LoyaltyReward {
-  id: string;
-  name: string;
-  slug: string;
-  type: string;
-  pointsCost: number;
-  discountPercent?: number | null;
-  discountAmount?: { amount: string; currencyCode: string } | null;
-  description?: string | null;
-  image?: { url: string; altText?: string | null } | null;
-  available: boolean;
-  tierRequired?: LoyaltyTier | null;
-  remainingRedemptions?: number | null;
-}
-
-interface LoyaltyTransaction {
-  id: string;
-  type: string;
-  points: number;
-  balanceAfter: number;
-  orderId?: string;
-  description?: string;
-  expiresAt?: string;
-  createdAt: string;
-}
-
-interface LoyaltySettings {
-  enabled: boolean;
-  pointsName: string;
-  pointsPerCurrency: number;
-  pointsExpiryMonths?: number;
-  referralEnabled: boolean;
-  referralPoints?: number;
-  referralBonusPoints?: number;
-}
-
-interface ReferralStats {
-  referralCode: string;
-  shareUrl: string;
-  totalReferred: number;
-  completedReferrals: number;
-  pendingReferrals: number;
-  totalPointsEarned: number;
-}
+import { useAuthStore, useAuthHydrated } from '@doswiftly/storefront-sdk/react';
 
 // Real hooks from generated GraphQL
 import {
@@ -133,21 +41,27 @@ import {
 } from '@/lib/graphql/hooks';
 
 export default function LoyaltyPage() {
+  const t = useTranslations("account");
+  const tl = useTranslations("loyalty.page");
+  const ta = useTranslations("auth");
   const [activeTab, setActiveTab] = useState('overview');
-  const { isAuthenticated } = useAuth();
+  const { isAuthenticated } = useAuthStore();
+  const isHydrated = useAuthHydrated();
 
   // Fetch loyalty data using real GraphQL hooks
-  const { data: memberData, isLoading: memberLoading } = useLoyaltyMember();
-  const { data: rewardsData, isLoading: rewardsLoading } = useLoyaltyRewards();
-  const { data: transactionsData } = useLoyaltyTransactions({ first: 20 });
+  // Settings don't require auth — always fetch
   const { data: settingsData } = useLoyaltySettings();
+  // All other queries require auth — hooks internally gate with `enabled: !!accessToken`
+  const { data: memberData, isLoading: memberLoading, error: memberError } = useLoyaltyMember();
+  const { data: rewardsData, isLoading: rewardsLoading, error: rewardsError } = useLoyaltyRewards();
+  const { data: transactionsData } = useLoyaltyTransactions({ first: 20 });
   const { data: referralData } = useReferralStats();
   const redeemMutation = useRedeemLoyaltyReward();
 
   // Extract data from query responses
   const member = memberData?.loyaltyMember;
   const rewards = rewardsData?.loyaltyRewards ?? [];
-  const transactions = transactionsData?.loyaltyTransactions?.edges?.map((e: any) => e.node) ?? [];
+  const transactions = transactionsData?.loyaltyTransactions?.edges?.map((e) => e.node) ?? [];
   const settings = settingsData?.loyaltySettings;
   const referralStats = referralData?.referralStats;
 
@@ -164,7 +78,7 @@ export default function LoyaltyPage() {
       const payload = result.redeemLoyaltyReward;
 
       if (payload?.userErrors?.length) {
-        throw new Error(payload.userErrors[0]);
+        throw new Error(payload.userErrors[0] || 'Unknown error');
       }
 
       if (payload?.success) {
@@ -176,12 +90,23 @@ export default function LoyaltyPage() {
         };
       }
 
-      throw new Error('Nie udało się wymienić nagrody');
+      throw new Error(tl('redeemFailed'));
     } catch (error) {
       throw error;
     }
   };
 
+  // Show skeleton while Zustand persist is hydrating from localStorage
+  if (!isHydrated) {
+    return (
+      <div className="container max-w-6xl py-8">
+        <div className="flex items-center justify-center min-h-[400px]">
+          <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+        </div>
+      </div>
+    );
+  }
+
   // Show login prompt if not authenticated
   if (!isAuthenticated) {
     return (
@@ -189,7 +114,7 @@ export default function LoyaltyPage() {
         <Link href="/account">
           <Button variant="ghost" size="sm" className="mb-4">
             <ArrowLeft className="h-4 w-4 mr-2" />
-            Powrót do konta
+            {t("backToAccount")}
           </Button>
         </Link>
 
@@ -197,15 +122,15 @@ export default function LoyaltyPage() {
           <CardHeader>
             <CardTitle className="flex items-center gap-2">
               <Award className="h-5 w-5" />
-              Program lojalnościowy
+              {t("loyalty")}
             </CardTitle>
           </CardHeader>
           <CardContent>
             <p className="text-muted-foreground mb-4">
-              Zaloguj się, aby zobaczyć swoje punkty i nagrody.
+              {tl("signInToView")}
             </p>
             <Link href="/auth/login?redirect=/account/loyalty">
-              <Button className="w-full">Zaloguj się</Button>
+              <Button className="w-full">{ta("signIn")}</Button>
             </Link>
           </CardContent>
         </Card>
@@ -224,6 +149,27 @@ export default function LoyaltyPage() {
     );
   }
 
+  // Show error state if primary queries failed
+  if (memberError || rewardsError) {
+    return (
+      <div className="container max-w-6xl py-8">
+        <Link href="/account">
+          <Button variant="ghost" size="sm" className="mb-4">
+            <ArrowLeft className="h-4 w-4 mr-2" />
+            {t("backToAccount")}
+          </Button>
+        </Link>
+
+        <Alert variant="destructive">
+          <AlertCircle className="h-4 w-4" />
+          <AlertDescription>
+            {tl("loadFailed")}
+          </AlertDescription>
+        </Alert>
+      </div>
+    );
+  }
+
   // Show disabled program message
   if (programDisabled) {
     return (
@@ -231,14 +177,14 @@ export default function LoyaltyPage() {
         <Link href="/account">
           <Button variant="ghost" size="sm" className="mb-4">
             <ArrowLeft className="h-4 w-4 mr-2" />
-            Powrót do konta
+            {t("backToAccount")}
           </Button>
         </Link>
 
         <Alert>
           <AlertCircle className="h-4 w-4" />
           <AlertDescription>
-            Program lojalnościowy jest obecnie niedostępny. Sprawdź ponownie później.
+            {tl("unavailable")}
           </AlertDescription>
         </Alert>
       </div>
@@ -252,7 +198,7 @@ export default function LoyaltyPage() {
         <Link href="/account">
           <Button variant="ghost" size="sm" className="mb-4">
             <ArrowLeft className="h-4 w-4 mr-2" />
-            Powrót do konta
+            {t("backToAccount")}
           </Button>
         </Link>
 
@@ -260,16 +206,15 @@ export default function LoyaltyPage() {
           <CardHeader>
             <CardTitle className="flex items-center gap-2">
               <Award className="h-5 w-5" />
-              Dołącz do programu lojalnościowego
+              {tl("joinTitle")}
             </CardTitle>
           </CardHeader>
           <CardContent>
             <p className="text-muted-foreground mb-4">
-              Zbieraj punkty za zakupy i wymieniaj je na nagrody! Zapisanie jest automatyczne
-              przy pierwszym zakupie.
+              {tl("joinDescription")}
             </p>
             <Link href="/products">
-              <Button className="w-full">Przeglądaj produkty</Button>
+              <Button className="w-full">{t("browseProducts")}</Button>
             </Link>
           </CardContent>
         </Card>
@@ -277,43 +222,6 @@ export default function LoyaltyPage() {
     );
   }
 
-  // Map tier data for components
-  const tierData = member.tier
-    ? {
-        id: member.tier.id,
-        name: member.tier.name,
-        type: member.tier.type,
-        minPoints: member.tier.minPoints,
-        pointsMultiplier: member.tier.pointsMultiplier,
-        customBenefits: member.tier.customBenefits ?? [],
-      }
-    : null;
-
-  const progressData = member.tierProgress
-    ? {
-        currentTier: {
-          id: member.tierProgress.currentTier.id,
-          name: member.tierProgress.currentTier.name,
-          type: member.tierProgress.currentTier.type,
-          minPoints: member.tierProgress.currentTier.minPoints,
-          pointsMultiplier: member.tierProgress.currentTier.pointsMultiplier,
-          customBenefits: member.tierProgress.currentTier.customBenefits ?? [],
-        },
-        nextTier: member.tierProgress.nextTier
-          ? {
-              id: member.tierProgress.nextTier.id,
-              name: member.tierProgress.nextTier.name,
-              type: member.tierProgress.nextTier.type,
-              minPoints: member.tierProgress.nextTier.minPoints,
-              pointsMultiplier: member.tierProgress.nextTier.pointsMultiplier,
-              customBenefits: member.tierProgress.nextTier.customBenefits ?? [],
-            }
-          : undefined,
-        pointsToNextTier: member.tierProgress.pointsToNextTier,
-        progressPercent: member.tierProgress.progressPercent,
-      }
-    : null;
-
   // Check if referral tab should be shown
   const showReferralTab = settings?.referralEnabled && referralStats;
 
@@ -324,18 +232,18 @@ export default function LoyaltyPage() {
         <Link href="/account">
           <Button variant="ghost" size="sm" className="mb-4">
             <ArrowLeft className="h-4 w-4 mr-2" />
-            Powrót do konta
+            {t("backToAccount")}
           </Button>
         </Link>
 
         <div className="flex items-center justify-between">
           <div>
-            <h1 className="text-3xl font-bold mb-2">Program lojalnościowy</h1>
+            <h1 className="text-3xl font-bold mb-2">{t("loyalty")}</h1>
             <p className="text-muted-foreground">
-              Zbieraj {settings?.pointsName ?? 'punkty'} i wymieniaj je na nagrody
+              {tl("collectAndRedeem", { pointsName: settings?.pointsName ?? 'punkty' })}
             </p>
           </div>
-          {tierData && <TierBadge tier={tierData.type} name={tierData.name} size="lg" />}
+          {member.tier && <TierBadge tier={member.tier.type} name={member.tier.name} size="lg" />}
         </div>
       </div>
 
@@ -344,20 +252,20 @@ export default function LoyaltyPage() {
         <TabsList className="mb-6">
           <TabsTrigger value="overview" className="gap-2">
             <Award className="h-4 w-4" />
-            Przegląd
+            {tl("tabOverview")}
           </TabsTrigger>
           <TabsTrigger value="rewards" className="gap-2">
             <Gift className="h-4 w-4" />
-            Nagrody
+            {tl("tabRewards")}
           </TabsTrigger>
           <TabsTrigger value="history" className="gap-2">
             <History className="h-4 w-4" />
-            Historia
+            {tl("tabHistory")}
           </TabsTrigger>
           {showReferralTab && (
             <TabsTrigger value="referral" className="gap-2">
               <Users className="h-4 w-4" />
-              Polecenia
+              {tl("tabReferrals")}
             </TabsTrigger>
           )}
         </TabsList>
@@ -366,22 +274,22 @@ export default function LoyaltyPage() {
         <TabsContent value="overview" className="space-y-6">
           <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
             <PointsBalance points={member.points} />
-            {progressData && <TierProgress progress={progressData} />}
+            {member.tierProgress && <TierProgress progress={member.tierProgress} />}
           </div>
 
           {/* Tier Benefits */}
-          {tierData && (
+          {member.tier && (
             <div className="p-6 bg-gradient-to-r from-amber-50 to-yellow-50 dark:from-amber-950/30 dark:to-yellow-950/30 rounded-lg border border-amber-200 dark:border-amber-800">
               <h3 className="font-semibold mb-4 flex items-center gap-2">
                 <Award className="h-5 w-5 text-amber-600" />
-                Twoje korzyści na poziomie {tierData.name}
+                {tl("tierBenefits", { tierName: member.tier.name })}
               </h3>
               <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 text-sm">
                 <div className="p-3 bg-white/50 dark:bg-black/20 rounded-lg">
-                  <div className="font-medium">Mnożnik punktów</div>
-                  <div className="text-2xl font-bold text-amber-600">x{tierData.pointsMultiplier}</div>
+                  <div className="font-medium">{tl("pointsMultiplier")}</div>
+                  <div className="text-2xl font-bold text-amber-600">x{member.tier.pointsMultiplier}</div>
                 </div>
-                {tierData.customBenefits.slice(0, 2).map((benefit, idx) => (
+                {member.tier.customBenefits?.slice(0, 2).map((benefit, idx) => (
                   <div key={idx} className="p-3 bg-white/50 dark:bg-black/20 rounded-lg">
                     <div className="font-medium">{benefit.name}</div>
                     {benefit.description && (
@@ -390,9 +298,9 @@ export default function LoyaltyPage() {
                   </div>
                 ))}
               </div>
-              {tierData.customBenefits.length > 2 && (
+              {(member.tier.customBenefits?.length ?? 0) > 2 && (
                 <div className="mt-4 flex flex-wrap gap-2">
-                  {tierData.customBenefits.slice(2).map((benefit, idx) => (
+                  {member.tier.customBenefits?.slice(2).map((benefit, idx) => (
                     <div key={idx} className="px-3 py-1.5 bg-white/50 dark:bg-black/20 rounded-full text-sm">
                       {benefit.name}
                     </div>
@@ -406,16 +314,16 @@ export default function LoyaltyPage() {
           <div className="flex flex-wrap gap-4">
             <Button onClick={() => setActiveTab('rewards')}>
               <Gift className="h-4 w-4 mr-2" />
-              Przeglądaj nagrody
+              {tl("browseRewards")}
             </Button>
             <Button variant="outline" onClick={() => setActiveTab('history')}>
               <History className="h-4 w-4 mr-2" />
-              Zobacz historię
+              {tl("viewHistory")}
             </Button>
             {showReferralTab && (
               <Button variant="outline" onClick={() => setActiveTab('referral')}>
                 <Users className="h-4 w-4 mr-2" />
-                Poleć znajomego
+                {tl("referFriend")}
               </Button>
             )}
           </div>
@@ -424,20 +332,13 @@ export default function LoyaltyPage() {
         {/* Rewards Tab */}
         <TabsContent value="rewards">
           <div className="mb-6">
-            <h2 className="text-xl font-semibold mb-2">Dostępne nagrody</h2>
+            <h2 className="text-xl font-semibold mb-2">{tl("availableRewards")}</h2>
             <p className="text-muted-foreground">
-              Wymień swoje {settings?.pointsName ?? 'punkty'} na atrakcyjne nagrody
+              {tl("redeemDescription", { pointsName: settings?.pointsName ?? 'punkty' })}
             </p>
           </div>
           <RewardsCatalog
-            rewards={rewards.map((r) => ({
-              ...r,
-              discountAmount: r.discountAmount
-                ? { amount: r.discountAmount.amount, currencyCode: r.discountAmount.currencyCode }
-                : undefined,
-              // Map tierRequired from LoyaltyTier object to just the type string
-              tierRequired: r.tierRequired?.type,
-            }))}
+            rewards={rewards}
             currentPoints={member.points.currentPoints}
             currentTier={member.tier?.type}
             onRedeem={handleRedeemReward}
@@ -447,8 +348,8 @@ export default function LoyaltyPage() {
         {/* History Tab */}
         <TabsContent value="history">
           <div className="mb-6">
-            <h2 className="text-xl font-semibold mb-2">Historia punktów</h2>
-            <p className="text-muted-foreground">Przegląd wszystkich transakcji punktowych</p>
+            <h2 className="text-xl font-semibold mb-2">{tl("pointsHistory")}</h2>
+            <p className="text-muted-foreground">{tl("historyDescription")}</p>
           </div>
           <PointsHistory transactions={transactions} />
         </TabsContent>
@@ -457,21 +358,16 @@ export default function LoyaltyPage() {
         {showReferralTab && referralStats && (
           <TabsContent value="referral">
             <div className="mb-6">
-              <h2 className="text-xl font-semibold mb-2">Poleć znajomego</h2>
+              <h2 className="text-xl font-semibold mb-2">{tl("referFriend")}</h2>
               <p className="text-muted-foreground">
-                Zaproś znajomych i otrzymaj {settings?.referralPoints ?? 0}{' '}
-                {settings?.pointsName ?? 'punktów'} za każde polecenie
+                {tl("referFriendDescription", {
+                  points: settings?.referralPoints ?? 0,
+                  pointsName: settings?.pointsName ?? 'punktów',
+                })}
               </p>
             </div>
             <ReferralSection
-              referralCode={referralStats.referralCode}
-              shareUrl={referralStats.shareUrl}
-              stats={{
-                totalReferred: referralStats.totalReferred,
-                completedReferrals: referralStats.completedReferrals,
-                pendingReferrals: referralStats.pendingReferrals,
-                totalPointsEarned: referralStats.totalPointsEarned,
-              }}
+              referralStats={referralStats}
               pointsName={settings?.pointsName ?? 'punktów'}
               referralPoints={settings?.referralPoints ?? 0}
               bonusPoints={settings?.referralBonusPoints ?? 0}

package/templates/storefront-nextjs-shadcn/app/[locale]/account/orders/[id]/loading.tsx

@@ -0,0 +1,60 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function OrderDetailLoading() {
+  return (
+    <div className="container mx-auto px-4 py-8">
+      {/* Breadcrumbs */}
+      <Skeleton className="mb-6 h-5 w-64" />
+
+      {/* Back button */}
+      <Skeleton className="mb-6 h-10 w-40" />
+
+      {/* Order header card */}
+      <div className="mb-6 rounded-lg border p-6">
+        <div className="flex items-center justify-between">
+          <div className="space-y-2">
+            <Skeleton className="h-7 w-48" />
+            <Skeleton className="h-4 w-32" />
+          </div>
+          <Skeleton className="h-8 w-24 rounded-full" />
+        </div>
+      </div>
+
+      {/* Order items card */}
+      <div className="mb-6 rounded-lg border p-6">
+        <Skeleton className="mb-4 h-6 w-24" />
+        <div className="space-y-4">
+          {[...Array(3)].map((_, i) => (
+            <div key={i} className="flex items-center gap-4">
+              <Skeleton className="h-16 w-16 rounded-md" />
+              <div className="flex-1 space-y-2">
+                <Skeleton className="h-4 w-3/4" />
+                <Skeleton className="h-4 w-1/4" />
+              </div>
+              <Skeleton className="h-5 w-20" />
+            </div>
+          ))}
+        </div>
+        <div className="mt-4 border-t pt-4 space-y-2">
+          <Skeleton className="ml-auto h-4 w-32" />
+          <Skeleton className="ml-auto h-4 w-32" />
+          <Skeleton className="ml-auto h-5 w-36" />
+        </div>
+      </div>
+
+      {/* Address cards */}
+      <div className="grid gap-6 md:grid-cols-2">
+        {[...Array(2)].map((_, i) => (
+          <div key={i} className="rounded-lg border p-6">
+            <Skeleton className="mb-3 h-5 w-36" />
+            <div className="space-y-2">
+              <Skeleton className="h-4 w-48" />
+              <Skeleton className="h-4 w-40" />
+              <Skeleton className="h-4 w-32" />
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/templates/storefront-nextjs-shadcn/app/[locale]/account/orders/[id]/page.tsx

@@ -0,0 +1,119 @@
+"use client";
+
+import { useParams } from "next/navigation";
+import { Link } from "@/i18n/navigation";
+import { useTranslations } from "next-intl";
+import { ChevronLeft } from "lucide-react";
+import { useCustomerOrder } from "@/lib/graphql/hooks";
+import { useHydrated } from "@doswiftly/storefront-sdk/react";
+import { Button } from "@/components/ui/button";
+import { Breadcrumbs } from "@/components/layout/breadcrumbs";
+import {
+  OrderDetails,
+  type OrderDetailsData,
+} from "@/components/account/order-details";
+
+export default function OrderDetailPage() {
+  const t = useTranslations("account");
+  const params = useParams();
+  const orderId = params.id as string;
+  const hydrated = useHydrated();
+
+  const { data, isPending, error } = useCustomerOrder(orderId);
+
+  const order = data?.customerOrder;
+
+  if (!hydrated || isPending) {
+    return (
+      <div className="container mx-auto px-4 py-8">
+        <div className="animate-pulse space-y-4">
+          <div className="h-8 bg-muted rounded w-1/4"></div>
+          <div className="h-64 bg-muted rounded"></div>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="container mx-auto px-4 py-8">
+        <div className="text-center">
+          <h1 className="text-2xl font-bold text-destructive">{t("failedLoadOrder")}</h1>
+          <p className="mt-2 text-muted-foreground">{t("tryAgainLater")}</p>
+          <Link href="/account/orders">
+            <Button className="mt-4">{t("backToOrders")}</Button>
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  if (!order) {
+    return (
+      <div className="container mx-auto px-4 py-8">
+        <div className="text-center">
+          <h1 className="text-2xl font-bold">{t("orderNotFound")}</h1>
+          <Link href="/account/orders">
+            <Button className="mt-4">{t("backToOrders")}</Button>
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  const mapFulfillmentStatus = (status?: string | null): OrderDetailsData["status"] => {
+    switch (status) {
+      case "DELIVERED": return "delivered";
+      case "IN_TRANSIT":
+      case "FULFILLED": return "shipped";
+      case "UNFULFILLED":
+      case "PARTIALLY_FULFILLED": return "processing";
+      default: return "processing";
+    }
+  };
+
+  const orderDetails: OrderDetailsData = {
+    id: order.id,
+    orderNumber: order.orderNumber?.toString() || order.id,
+    date: new Date(order.processedAt).toLocaleDateString(),
+    status: mapFulfillmentStatus(order.fulfillmentStatus),
+    items: [],
+    subtotal: order.subtotalPrice?.amount || "0",
+    shipping: order.totalShipping?.amount || "0",
+    tax: order.totalTax?.amount || "0",
+    total: order.totalPrice.amount,
+    currency: order.totalPrice.currencyCode,
+    shippingAddress: order.shippingAddress
+      ? {
+          firstName: order.shippingAddress.firstName || "",
+          lastName: order.shippingAddress.lastName || "",
+          address1: order.shippingAddress.address1 || "",
+          address2: order.shippingAddress.address2 || "",
+          city: order.shippingAddress.city || "",
+          province: order.shippingAddress.province || "",
+          zip: order.shippingAddress.zip || "",
+          country: order.shippingAddress.country || "",
+          phone: order.shippingAddress.phone || "",
+        }
+      : undefined,
+    trackingNumber: undefined,
+    estimatedDelivery: undefined,
+  };
+
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <Breadcrumbs className="mb-6" />
+
+      <div className="mb-6">
+        <Button variant="ghost" asChild>
+          <Link href="/account/orders">
+            <ChevronLeft className="mr-2 h-4 w-4" />
+            {t("backToOrders")}
+          </Link>
+        </Button>
+      </div>
+
+      <OrderDetails order={orderDetails} />
+    </div>
+  );
+}