@doswiftly/cli 0.1.18 → 0.1.19

package/templates/storefront-nextjs-shadcn/app/account/addresses/page.tsx

@@ -1,17 +1,17 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useCallback } from "react";
+import Link from "next/link";
 import { Plus } from "lucide-react";
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
-import { getGraphQLClient } from "@/lib/graphql/client";
-import { useAuthStore } from "@/stores/auth-store";
+import { useAuthStore, useAuthHydrated } from "@doswiftly/storefront-sdk/react";
 import {
-  CustomerDocument,
-  CustomerAddressCreateDocument,
-  CustomerAddressUpdateDocument,
-  CustomerAddressDeleteDocument,
-  CustomerDefaultAddressUpdateDocument,
-} from "@/generated/graphql";
+  useCustomer,
+  useCustomerAddressCreate,
+  useCustomerAddressUpdate,
+  useCustomerAddressDelete,
+  useCustomerDefaultAddressUpdate,
+} from "@/lib/graphql/hooks";
+import { useHydrated } from "@doswiftly/storefront-sdk/react";
 import { Button } from "@/components/ui/button";
 import { Breadcrumbs } from "@/components/layout/breadcrumbs";
 import {
@@ -30,94 +30,67 @@ import {
 } from "@/components/ui/dialog";
 
 export default function AddressesPage() {
-  const client = getGraphQLClient();
-  const queryClient = useQueryClient();
-  const { accessToken } = useAuthStore();
-
-  // Fetch customer with addresses
-  const { data: customerData, isLoading } = useQuery({
-    queryKey: ["customer", "addresses", accessToken],
-    queryFn: async () => {
-      if (!accessToken) return null;
-      const result = await client.request(CustomerDocument, {
-        customerAccessToken: accessToken,
-      });
-      return result.customer;
-    },
-    enabled: !!accessToken,
-  });
+  const hydrated = useHydrated();
+  const authHydrated = useAuthHydrated();
+  const accessToken = useAuthStore((s) => s.accessToken);
+
+  const { data: customerData, isPending } = useCustomer();
 
   const [isFormOpen, setIsFormOpen] = useState(false);
   const [editingAddress, setEditingAddress] = useState<Address | undefined>();
+  const [mutationError, setMutationError] = useState<string | null>(null);
 
-  // Delete address mutation
-  const deleteMutation = useMutation({
-    mutationFn: async (id: string) => {
-      return client.request(CustomerAddressDeleteDocument, {
-        id,
-        customerAccessToken: accessToken!,
-      });
-    },
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["customer", "addresses"] });
-    },
+  const checkUserErrors = useCallback(<T extends Record<string, unknown>>(data: T, operationKey: keyof T) => {
+    const payload = data?.[operationKey] as { userErrors?: Array<{ message: string }> } | undefined;
+    if (payload?.userErrors?.length) {
+      setMutationError(payload.userErrors[0].message);
+      return true;
+    }
+    setMutationError(null);
+    return false;
+  }, []);
+
+  const deleteMutation = useCustomerAddressDelete({
+    onSuccess: (data) => checkUserErrors(data, 'customerAddressDelete'),
+    onError: () => setMutationError('Failed to delete address'),
+  });
+  const setDefaultMutation = useCustomerDefaultAddressUpdate({
+    onSuccess: (data) => checkUserErrors(data, 'customerDefaultAddressUpdate'),
+    onError: () => setMutationError('Failed to set default address'),
   });
 
-  // Set default address mutation
-  const setDefaultMutation = useMutation({
-    mutationFn: async (addressId: string) => {
-      return client.request(CustomerDefaultAddressUpdateDocument, {
-        addressId,
-        customerAccessToken: accessToken!,
-      });
-    },
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["customer", "addresses"] });
+  const createMutation = useCustomerAddressCreate({
+    onSuccess: (data) => {
+      if (!checkUserErrors(data, 'customerAddressCreate')) {
+        setIsFormOpen(false);
+      }
     },
+    onError: () => setMutationError('Failed to create address'),
   });
 
-  // Create/Update address mutation
-  const saveMutation = useMutation({
-    mutationFn: async ({
-      id,
-      address,
-    }: {
-      id?: string;
-      address: any;
-    }) => {
-      if (id) {
-        return client.request(CustomerAddressUpdateDocument, {
-          id,
-          address,
-          customerAccessToken: accessToken!,
-        });
-      } else {
-        return client.request(CustomerAddressCreateDocument, {
-          address,
-          customerAccessToken: accessToken!,
-        });
+  const updateMutation = useCustomerAddressUpdate({
+    onSuccess: (data) => {
+      if (!checkUserErrors(data, 'customerAddressUpdate')) {
+        setIsFormOpen(false);
       }
     },
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["customer", "addresses"] });
-      setIsFormOpen(false);
-    },
+    onError: () => setMutationError('Failed to update address'),
   });
 
-  const addresses = customerData?.addresses?.edges?.map((edge) => ({
-    id: edge.node.id,
-    firstName: edge.node.firstName || "",
-    lastName: edge.node.lastName || "",
-    company: edge.node.company || "",
-    address1: edge.node.address1 || "",
-    address2: edge.node.address2 || "",
-    city: edge.node.city || "",
-    province: edge.node.province || "",
-    zip: edge.node.zip || "",
-    country: edge.node.country || "",
-    phone: edge.node.phone || "",
-    isDefault: edge.node.id === customerData?.defaultAddress?.id,
-  })) || [];
+  const addresses = (customerData?.customer?.addresses ?? []).map((addr) => ({
+    id: addr.id,
+    firstName: addr.firstName || "",
+    lastName: addr.lastName || "",
+    company: addr.company || "",
+    address1: addr.address1 || "",
+    address2: addr.address2 || "",
+    city: addr.city || "",
+    province: addr.province || "",
+    zip: addr.zip || "",
+    country: addr.country || "",
+    phone: addr.phone || "",
+    isDefault: addr.isDefault,
+  }));
 
   const handleAdd = () => {
     setEditingAddress(undefined);
@@ -153,13 +126,15 @@ export default function AddressesPage() {
       phone: data.phone || null,
     };
 
-    await saveMutation.mutateAsync({
-      id: editingAddress?.id,
-      address,
-    });
+    if (editingAddress?.id) {
+      await updateMutation.mutateAsync({ id: editingAddress.id, address });
+    } else {
+      await createMutation.mutateAsync({ address });
+    }
   };
 
-  if (isLoading) {
+  // Wait for DOM + auth persist hydration before checking accessToken
+  if (!hydrated || !authHydrated) {
     return (
       <div className="container mx-auto px-4 py-8">
         <div className="animate-pulse space-y-4">
@@ -170,6 +145,33 @@ export default function AddressesPage() {
     );
   }
 
+  // Data loading (customer query fetching after accessToken is available)
+  if (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 (!accessToken) {
+    return (
+      <div className="container mx-auto px-4 py-8">
+        <Breadcrumbs className="mb-6" />
+        <div className="rounded-lg border border-destructive bg-destructive/10 p-8 text-center text-sm text-destructive">
+          You need to{" "}
+          <Link href="/auth/login?redirect=/account/addresses" className="font-medium underline">
+            sign in
+          </Link>{" "}
+          to manage your addresses.
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className="container mx-auto px-4 py-8">
       <Breadcrumbs className="mb-6" />
@@ -187,6 +189,12 @@ export default function AddressesPage() {
         </Button>
       </div>
 
+      {mutationError && (
+        <div className="mb-4 rounded-lg border border-destructive bg-destructive/10 p-4 text-sm text-destructive">
+          {mutationError}
+        </div>
+      )}
+
       <AddressList
         addresses={addresses}
         onEdit={handleEdit}
@@ -195,7 +203,6 @@ export default function AddressesPage() {
         onAdd={handleAdd}
       />
 
-      {/* Address Form Dialog */}
       <Dialog open={isFormOpen} onOpenChange={setIsFormOpen}>
         <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
           <DialogHeader>

package/templates/storefront-nextjs-shadcn/app/account/error.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { useEffect } from "react";
+import Link from "next/link";
+import { AlertCircle } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
+export default function AccountError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    console.error("[Account Error]", error);
+  }, [error]);
+
+  return (
+    <div className="container mx-auto flex min-h-[400px] items-center justify-center px-4 py-16">
+      <Card className="max-w-md">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2 text-destructive">
+            <AlertCircle className="h-5 w-5" />
+            Something went wrong
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <p className="text-sm text-muted-foreground">
+            We couldn&apos;t load your account data. This might be a temporary issue.
+          </p>
+          <div className="flex gap-3">
+            <Button onClick={reset}>Try again</Button>
+            <Button variant="outline" asChild>
+              <Link href="/">Go to homepage</Link>
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/templates/storefront-nextjs-shadcn/app/account/loading.tsx

@@ -0,0 +1,19 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function AccountLoading() {
+  return (
+    <div className="container mx-auto px-4 py-16">
+      <div className="mx-auto max-w-4xl">
+        <div className="mb-8">
+          <Skeleton className="mb-2 h-10 w-48" />
+          <Skeleton className="h-5 w-80" />
+        </div>
+        <div className="grid gap-6 md:grid-cols-2">
+          {[...Array(4)].map((_, i) => (
+            <Skeleton key={i} className="h-48 w-full rounded-lg" />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/storefront-nextjs-shadcn/app/account/loyalty/page.tsx

@@ -14,7 +14,7 @@
  * Requirements: R7, R8, R10.4
  */
 
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 import Link from 'next/link';
 import { ArrowLeft, Gift, Award, History, Loader2, Users, AlertCircle } from 'lucide-react';
 import { Button } from '@/components/ui/button';
@@ -27,100 +27,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 {
@@ -134,20 +41,23 @@ import {
 
 export default function LoyaltyPage() {
   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 +74,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) {
@@ -182,6 +92,17 @@ export default function LoyaltyPage() {
     }
   };
 
+  // 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 (
@@ -224,6 +145,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" />
+            Powrót do konta
+          </Button>
+        </Link>
+
+        <Alert variant="destructive">
+          <AlertCircle className="h-4 w-4" />
+          <AlertDescription>
+            Nie udało się załadować danych programu lojalnościowego. Spróbuj ponownie później.
+          </AlertDescription>
+        </Alert>
+      </div>
+    );
+  }
+
   // Show disabled program message
   if (programDisabled) {
     return (
@@ -277,43 +219,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;
 
@@ -335,7 +240,7 @@ export default function LoyaltyPage() {
               Zbieraj {settings?.pointsName ?? 'punkty'} i wymieniaj je na nagrody
             </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>
 
@@ -366,22 +271,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}
+                Twoje korzyści na poziomie {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="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 +295,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>
@@ -430,14 +335,7 @@ export default function LoyaltyPage() {
             </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}
@@ -464,14 +362,7 @@ export default function LoyaltyPage() {
               </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}