@doswiftly/cli 0.1.18 → 0.1.19

package/templates/storefront-nextjs-shadcn/hooks/use-cart-actions.ts

@@ -1,9 +1,12 @@
 'use client';
 
-import { useCallback, useRef } from 'react';
-import { useCartStore } from '@/stores/cart-store';
+import { useCallback, useEffect, useRef } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+import { useCartStore, useCartStoreApi } from '@/stores/cart-store';
 import { useCartCreate, useCartLinesAdd, useCartLinesUpdate, useCartLinesRemove } from '@/lib/graphql/hooks';
+import { queryKeys } from '@/lib/graphql/query-keys';
 import { toast } from 'sonner';
+import { StorefrontError } from '@doswiftly/storefront-sdk';
 
 // Debounce delay for quantity updates (prevents rate limiting)
 const QUANTITY_UPDATE_DEBOUNCE_MS = 500;
@@ -33,6 +36,8 @@ const QUANTITY_UPDATE_DEBOUNCE_MS = 500;
  * ```
  */
 export function useCartActions() {
+  const queryClient = useQueryClient();
+  const cartStoreApi = useCartStoreApi();
   const {
     setCartId,
     clearCart,
@@ -54,7 +59,7 @@ export function useCartActions() {
    * Reads cartId from store (fresh, not stale closure) or creates a new cart.
    */
   const getOrCreateCartId = useCallback(async (forceNew: boolean = false): Promise<string> => {
-    const currentCartId = useCartStore.getState().cartId;
+    const currentCartId = cartStoreApi.getState().cartId;
     if (currentCartId && !forceNew) {
       return currentCartId;
     }
@@ -73,19 +78,25 @@ export function useCartActions() {
       }
 
       throw new Error('Failed to create cart');
-    } catch (error: any) {
+    } catch (error: unknown) {
       console.error('Cart creation failed:', error);
       throw error;
     }
-  }, [setCartId, createCartMutation]);
+  }, [cartStoreApi, setCartId, createCartMutation]);
 
   /**
    * Check if error is a "Cart not found" error (stale/expired cart)
    */
-  const isCartNotFoundError = (error: any): boolean => {
-    const message = error?.message || '';
-    return message.toLowerCase().includes('cart not found') ||
-           message.toLowerCase().includes('cart does not exist');
+  const isCartNotFoundError = (error: unknown): boolean => {
+    if (error instanceof StorefrontError) {
+      const msg = error.message.toLowerCase();
+      return msg.includes('cart not found') || msg.includes('cart does not exist');
+    }
+    if (error instanceof Error) {
+      const msg = error.message.toLowerCase();
+      return msg.includes('cart not found') || msg.includes('cart does not exist');
+    }
+    return false;
   };
 
   /**
@@ -108,6 +119,9 @@ export function useCartActions() {
     const forceNewCart = _options?._forceNewCart ?? false;
 
     try {
+      // Cancel in-flight cart queries to prevent stale data overwriting
+      await queryClient.cancelQueries({ queryKey: queryKeys.cart.all() });
+
       const cartId = await getOrCreateCartId(forceNewCart);
 
       const result = await addLinesMutation.mutateAsync({
@@ -133,7 +147,7 @@ export function useCartActions() {
       // Open cart drawer to show the added item
       openCart();
       toast.success('Added to cart');
-    } catch (error: any) {
+    } catch (error: unknown) {
       if (isCartNotFoundError(error) && !forceNewCart) {
         console.warn('Cart expired (caught), creating new cart and retrying...');
         setCartId(null);
@@ -141,7 +155,8 @@ export function useCartActions() {
       }
 
       console.error('Add to cart failed:', error);
-      toast.error(error.message || 'Failed to add to cart');
+      const message = error instanceof Error ? error.message : 'Failed to add to cart';
+      toast.error(message);
       throw error;
     }
   }, [setCartId, openCart, getOrCreateCartId, addLinesMutation]);
@@ -151,7 +166,10 @@ export function useCartActions() {
    */
   const executeQuantityUpdate = useCallback(async (lineId: string, quantity: number) => {
     try {
-      const currentCartId = useCartStore.getState().cartId;
+      // Cancel in-flight cart queries to prevent race conditions
+      await queryClient.cancelQueries({ queryKey: queryKeys.cart.all() });
+
+      const currentCartId = cartStoreApi.getState().cartId;
       if (!currentCartId) {
         throw new Error('No cart found');
       }
@@ -176,7 +194,7 @@ export function useCartActions() {
 
         throw new Error(errorMessage);
       }
-    } catch (error: any) {
+    } catch (error: unknown) {
       if (isCartNotFoundError(error)) {
         console.warn('Cart expired during update (caught), clearing cart');
         clearCart();
@@ -185,9 +203,10 @@ export function useCartActions() {
       }
 
       console.error('Update quantity failed:', error);
-      toast.error(error.message || 'Failed to update quantity');
+      const message = error instanceof Error ? error.message : 'Failed to update quantity';
+      toast.error(message);
     }
-  }, [updateLinesMutation, clearCart]);
+  }, [cartStoreApi, queryClient, updateLinesMutation, clearCart]);
 
   /**
    * Remove item from cart by line ID.
@@ -196,7 +215,7 @@ export function useCartActions() {
    */
   const removeFromCart = useCallback(async (lineId: string) => {
     try {
-      const currentCartId = useCartStore.getState().cartId;
+      const currentCartId = cartStoreApi.getState().cartId;
       if (!currentCartId) {
         return;
       }
@@ -219,7 +238,7 @@ export function useCartActions() {
       }
 
       toast.success('Removed from cart');
-    } catch (error: any) {
+    } catch (error: unknown) {
       if (isCartNotFoundError(error)) {
         console.warn('Cart expired during remove (caught), clearing stale cartId');
         setCartId(null);
@@ -227,10 +246,11 @@ export function useCartActions() {
       }
 
       console.error('Remove from cart failed:', error);
-      toast.error(error.message || 'Failed to remove from cart');
+      const message = error instanceof Error ? error.message : 'Failed to remove from cart';
+      toast.error(message);
       throw error;
     }
-  }, [setCartId, removeLinesMutation]);
+  }, [cartStoreApi, setCartId, removeLinesMutation]);
 
   /**
    * Update item quantity (debounced, takes lineId).
@@ -266,6 +286,18 @@ export function useCartActions() {
     updateTimeoutRef.current.set(lineId, timeout);
   }, [removeFromCart, executeQuantityUpdate]);
 
+  // Cleanup pending debounce timeouts on unmount
+  useEffect(() => {
+    const timeouts = updateTimeoutRef.current;
+    return () => {
+      for (const timeout of timeouts.values()) {
+        clearTimeout(timeout);
+      }
+      timeouts.clear();
+      pendingUpdatesRef.current.clear();
+    };
+  }, []);
+
   /**
    * Clear entire cart.
    * Clears cartId in zustand persist → useCartSync returns empty.

package/templates/storefront-nextjs-shadcn/hooks/use-cart-sync.ts

@@ -3,6 +3,8 @@
 import { useEffect } from "react";
 import { useCart } from "@/lib/graphql/hooks";
 import { useCartStore } from "@/stores/cart-store";
+import { useHydrated } from "@doswiftly/storefront-sdk/react";
+import type { CartLineFields } from "@/lib/graphql/fragments";
 
 /**
  * Mapped cart item for display components.
@@ -31,18 +33,20 @@ export interface CartItemData {
  */
 export function useCartSync() {
   const cartId = useCartStore((state) => state.cartId);
-  const isHydrated = useCartStore((state) => state.isHydrated);
   const setCartId = useCartStore((state) => state.setCartId);
+  const isHydrated = useHydrated();
 
-  const { data, isLoading, error, refetch } = useCart(cartId, {
+  const { data, isLoading, isSuccess, error, refetch } = useCart(cartId, {
     enabled: isHydrated && Boolean(cartId),
     retry: false,
   });
 
   const cart = data?.cart;
 
-  // Detect stale cart: cartId exists but server returns nothing
-  const isStaleCart = isHydrated && Boolean(cartId) && !isLoading && !cart;
+  // Detect stale cart: cartId exists but server confirmed no cart (isSuccess + !cart).
+  // Using isSuccess instead of !isLoading prevents false positives when queries are
+  // cancelled by mutation optimistic updates (cancelled query → status='pending', not 'success').
+  const isStaleCart = isHydrated && Boolean(cartId) && isSuccess && !cart;
 
   // Auto-clear stale cartId
   useEffect(() => {
@@ -52,7 +56,7 @@ export function useCartSync() {
   }, [isStaleCart, setCartId]);
 
   // Map GraphQL lines to display-friendly items
-  const items: CartItemData[] = (cart?.lines ?? []).map((line: any) => {
+  const items: CartItemData[] = (cart?.lines ?? []).map((line: CartLineFields) => {
     const merchandiseTitle = line.merchandise.title ?? "";
     // Hide generic variant names like "Default" or "Default Title"
     const isDefaultVariant = /^default(\s+title)?$/i.test(merchandiseTitle);
@@ -63,10 +67,10 @@ export function useCartSync() {
       lineId: line.id,
       variantId: line.merchandise.id,
       productId: line.productId || line.merchandise.id,
-      productHandle: line.productHandle,
+      productHandle: line.productHandle ?? undefined,
       productTitle,
       variantTitle,
-      productType: line.productType,
+      productType: line.productType ?? undefined,
       quantity: line.quantity,
       price: {
         amount: line.merchandise.price.amount,
@@ -88,8 +92,8 @@ export function useCartSync() {
 
   // Discount data from server
   const discountCodes: string[] = (cart?.discountCodes ?? [])
-    .filter((dc: any) => dc.applicable)
-    .map((dc: any) => dc.code);
+    .filter((dc) => dc.applicable)
+    .map((dc) => dc.code);
   const totalDiscount = subtotal - total;
 
   return {

package/templates/storefront-nextjs-shadcn/lib/auth/routes.ts

@@ -2,7 +2,7 @@
  * Auth Routes Configuration (SSOT)
  *
  * This file is the single source of truth for authentication routes.
- * Used by middleware.ts and can be imported by components if needed.
+ * Used by proxy.ts and can be imported by components if needed.
  *
  * IMPORTANT: Checkout is NOT protected to allow guest checkout (e-commerce best practice).
  * Users can optionally log in during checkout to use saved addresses.
@@ -16,6 +16,9 @@
  * export const guestOnlyRoutes = ['/auth/login', '/auth/register', '/auth/forgot-password'];
  */
 
+// Re-export platform constants and matching utility from SDK
+export { AUTH_COOKIE_NAME, matchesRoute } from '@doswiftly/storefront-sdk';
+
 /**
  * Routes that require authentication.
  * Unauthenticated users will be redirected to login.
@@ -30,12 +33,6 @@ export const protectedRoutes = ["/account"];
  */
 export const guestOnlyRoutes = ["/auth/login", "/auth/register"];
 
-/**
- * Cookie name for customer access token.
- * Must match the cookie name used by commerce-sdk.
- */
-export const AUTH_COOKIE_NAME = "customerAccessToken";
-
 /**
  * Default redirect paths
  */
@@ -45,13 +42,3 @@ export const redirects = {
   /** Where to redirect authenticated users trying to access guest-only routes */
   authenticated: "/account",
 } as const;
-
-/**
- * Check if a pathname matches any route in the list.
- * Supports both exact matches and prefix matches (e.g., /account matches /account/orders).
- */
-export function matchesRoute(pathname: string, routes: string[]): boolean {
-  return routes.some(
-    (route) => pathname === route || pathname.startsWith(`${route}/`)
-  );
-}

package/templates/storefront-nextjs-shadcn/lib/graphql/client.ts

@@ -1,109 +1,32 @@
 'use client';
 
-import { GraphQLClient } from 'graphql-request';
-import { getCurrencyFromCookie } from '@/lib/currency/';
-
-// Import config - will be injected by CLI during template generation
-let config: {
-  shop: { slug: string };
-  api: { url: string };
-} | null = null;
-
-try {
-  // Dynamic import to handle cases where config doesn't exist yet
-  const configModule = require('@/doswiftly.config');
-  config = configModule.default || configModule;
-} catch (error) {
-  // Fallback to environment variables if config file doesn't exist
-  config = {
-    shop: {
-      slug: process.env.NEXT_PUBLIC_SHOP_SLUG || 'demo-shop',
-    },
-    api: {
-      url: process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000',
-    },
-  };
-}
-
-/**
- * Create a GraphQL client with dynamic currency header
- * 
- * This factory creates a new client instance that reads the current
- * preferred currency from cookies on each request, ensuring SSR compatibility.
- * 
- * The client injects:
- * - X-Shop-Slug: Shop identifier for multi-tenancy
- * - X-Preferred-Currency: User's preferred currency (from cookie, SSR-safe)
- * 
- * @returns GraphQL client configured for client-side usage with currency support
- * 
- * @example
- * ```typescript
- * const client = createGraphQLClient();
- * const data = await client.request(ProductDocument, { handle: 'my-product' });
- * ```
- */
-export function createGraphQLClient(): GraphQLClient {
-  return new GraphQLClient(`${config!.api.url}/storefront/graphql`, {
-    headers: () => {
-      // Read current currency from cookie (SSR-safe, always fresh)
-      const currency = getCurrencyFromCookie();
-      
-      return {
-        'X-Shop-Slug': config!.shop.slug,
-        // Dynamic currency header - reads from cookie on each request
-        ...(currency && { 'X-Preferred-Currency': currency }),
-      };
-    },
-  });
-}
+import { useStorefrontClient } from '@doswiftly/storefront-sdk/react';
+import { useCallback } from 'react';
 
 /**
- * Singleton GraphQL client instance
- * 
- * Reuses the same client instance across the application to avoid
- * creating multiple connections. The client's headers are evaluated
- * dynamically on each request, so currency changes are reflected
- * automatically.
- */
-let clientInstance: GraphQLClient | null = null;
-
-/**
- * Get or create the singleton GraphQL client
- * 
- * Returns a cached client instance that automatically includes
- * the current preferred currency in request headers.
- * 
- * The client is currency-aware and will include the user's
- * preferred currency in the X-Preferred-Currency header on
- * every request.
- * 
- * @returns Singleton GraphQL client instance
- * 
+ * Execute GraphQL operations using SDK's StorefrontClient from Context.
+ * Includes auth + currency middleware automatically.
+ *
+ * Replaces the old module-level singleton client which was incompatible
+ * with the Context-based store pattern.
+ *
  * @example
  * ```typescript
- * // In a Client Component
- * 'use client';
- * import { getGraphQLClient } from '@/lib/graphql/client';
- * import { ProductDocument } from '@/generated/graphql';
- * 
- * export function ProductPrice({ handle }) {
- *   const client = getGraphQLClient();
- *   
- *   const fetchProduct = async () => {
- *     return client.request(ProductDocument, { handle });
- *   };
- *   
- *   // Product will be fetched with current preferred currency
- *   const { data } = useQuery(['product', handle], fetchProduct);
- *   
- *   return <div>{data.product.priceRange.minVariantPrice.amount}</div>;
+ * function useMyQuery() {
+ *   const execute = useExecute();
+ *   return useQuery({
+ *     queryKey: ['my-query'],
+ *     queryFn: () => execute<MyQueryResult>(MyDocument.toString(), variables),
+ *   });
  * }
  * ```
  */
-export function getGraphQLClient(): GraphQLClient {
-  if (!clientInstance) {
-    clientInstance = createGraphQLClient();
-  }
-  return clientInstance;
+export function useExecute() {
+  const client = useStorefrontClient();
+
+  return useCallback(
+    <TResult>(query: string, variables?: Record<string, unknown>): Promise<TResult> =>
+      client.query<TResult>(query, variables),
+    [client],
+  );
 }

package/templates/storefront-nextjs-shadcn/lib/graphql/config.ts

@@ -0,0 +1,32 @@
+/**
+ * Centralized GraphQL configuration.
+ *
+ * Single source of truth for API URL and shop slug.
+ * Used by both client.ts (browser) and server.ts (SSR).
+ *
+ * Resolution order:
+ * 1. doswiftly.config.ts (CLI-injected, highest priority)
+ * 2. Environment variables (NEXT_PUBLIC_API_URL, NEXT_PUBLIC_SHOP_SLUG)
+ * 3. Defaults (localhost:8000, demo-shop)
+ */
+
+const apiUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';
+const shopSlug = process.env.NEXT_PUBLIC_SHOP_SLUG || 'demo-shop';
+
+let configApiUrl = apiUrl;
+let configShopSlug = shopSlug;
+
+try {
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
+  const configModule = require('@/doswiftly.config');
+  const config = configModule.default || configModule;
+  configApiUrl = config.api?.url || apiUrl;
+  configShopSlug = config.shop?.slug || shopSlug;
+} catch {
+  // doswiftly.config.ts not available — use env vars
+}
+
+export const graphqlConfig = {
+  apiUrl: configApiUrl,
+  shopSlug: configShopSlug,
+} as const;

package/templates/storefront-nextjs-shadcn/lib/graphql/fragments.ts

@@ -0,0 +1,34 @@
+/**
+ * Fragment type re-exports for component data contracts.
+ *
+ * Import fragment types from here instead of @/generated/graphql.
+ * Each fragment maps to a colocated .fragment.graphql file next to its component.
+ *
+ * @example
+ * import type { ProductCardFields } from '@/lib/graphql/fragments';
+ * interface Props { product: ProductCardFields }
+ */
+
+// Template-local component fragments (colocated at components/)
+export type { ProductCardFieldsFragment as ProductCardFields } from '@/generated/graphql';
+export type { ProductDetailFieldsFragment as ProductDetailFields } from '@/generated/graphql';
+export type { ProductVariantFieldsFragment as ProductVariantFields } from '@/generated/graphql';
+export type { CollectionCardFieldsFragment as CollectionCardFields } from '@/generated/graphql';
+export type { CartLineFieldsFragment as CartLineFields } from '@/generated/graphql';
+export type { OrderSummaryFieldsFragment as OrderSummaryFields } from '@/generated/graphql';
+export type { CustomerInfoFieldsFragment as CustomerInfoFields } from '@/generated/graphql';
+export type { CategoryNodeFieldsFragment as CategoryNodeFields } from '@/generated/graphql';
+
+// Backend SSOT fragments — lightweight price for listing views
+export type { PriceFragment as Price } from '@/generated/graphql';
+
+// Backend SSOT fragments (used by loyalty domain components)
+// Same naming convention — clean names without Fragment suffix
+export type { LoyaltyPointsSummaryFragment as LoyaltyPointsSummary } from '@/generated/graphql';
+export type { LoyaltyTierFragment as LoyaltyTier } from '@/generated/graphql';
+export type { TierProgressFragment as TierProgress } from '@/generated/graphql';
+export type { LoyaltyMemberFragment as LoyaltyMember } from '@/generated/graphql';
+export type { LoyaltyRewardFragment as LoyaltyReward } from '@/generated/graphql';
+export type { LoyaltyTransactionFragment as LoyaltyTransaction } from '@/generated/graphql';
+export type { LoyaltySettingsFragment as LoyaltySettings } from '@/generated/graphql';
+export type { ReferralStatsFragment as ReferralStats } from '@/generated/graphql';