Storefront component enhancements - ProductGrid and ProductCard (#1236)

pbennett1-godaddy · wcole1-godaddy · ampcode-com · web-flow · commit d99b69dab90d · 2025-12-15T11:09:14.000-05:00
* Add pagination and allow productId for ProductCard * all productIds and categoryIds props for ProductGrid * add changeset * add product search component * fix nextjs vuln version * remove cart id state from cart component reload each render * fix: storefront components error handling, state, and types - Fix state update in render for ProductGrid - Improve error handling in ProductCard and Cart - Prevent useAddToCart from throwing unhandled errors - Fix type definitions and imports Amp-Thread-ID: https://ampcode.com/threads/T-be981313-a505-4db5-9398-9f351a0d0d76 Co-authored-by: Amp <amp@ampcode.com> * update latest react for vuln --------- Co-authored-by: Wes Cole <wcole1@godaddy.com> Co-authored-by: Amp <amp@ampcode.com>
diff --git a/.changeset/major-turtles-shout.md b/.changeset/major-turtles-shout.md
@@ -0,0 +1,9 @@
+---
+"@godaddy/localizations": patch
+"@godaddy/react": patch
+---
+
+- Add filtering by `productIds` and `categoryIds` to ProductGrid
+- Add `productId` prop to ProductCard for single product rendering
+- Add pagination support to ProductGrid with `enablePagination` prop
+- Add translations for pagination controls
diff --git a/examples/nextjs/app/store/products.tsx b/examples/nextjs/app/store/products.tsx
@@ -1,14 +1,18 @@
 'use client';
 
-import { ProductGrid } from '@godaddy/react';
+import { ProductGrid, ProductSearch } from '@godaddy/react';
 import { useCart } from './layout';
 
 export default function ProductsPage() {
   const { openCart } = useCart();
 
   return (
     <div className='container mx-auto'>
+      <div className='mb-6 max-w-md'>
+        <ProductSearch />
+      </div>
       <ProductGrid
+        enablePagination
         getProductHref={sku => `/store/product/${sku}`}
         onAddToCartSuccess={openCart}
       />
diff --git a/examples/nextjs/package.json b/examples/nextjs/package.json
@@ -15,7 +15,7 @@
     "@tanstack/react-query": "^5.66.0",
     "@tanstack/react-query-devtools": "^5.76.1",
     "lucide-react": "^0.475.0",
-    "next": "16.0.1",
+    "next": "16.0.10",
     "react": "19.2.0",
     "react-dom": "19.2.0",
     "zod": "^3.24.1"
diff --git a/packages/localizations/src/deDe.ts b/packages/localizations/src/deDe.ts
@@ -384,5 +384,8 @@ export const deDe = {
     remove: 'Entfernen',
     removing: 'Wird entfernt...',
     checkout: 'Zur Kasse',
+    itemsPerPage: 'Artikel pro Seite:',
+    search: 'Suchen',
+    searchPlaceholder: 'Produkte suchen...',
   },
 };
diff --git a/packages/localizations/src/enIe.ts b/packages/localizations/src/enIe.ts
@@ -361,5 +361,8 @@ export const enIe = {
     remove: 'Remove',
     removing: 'Removing...',
     checkout: 'Checkout',
+    itemsPerPage: 'Items per page:',
+    search: 'Search',
+    searchPlaceholder: 'Search products...',
   },
 };
diff --git a/packages/localizations/src/enUs.ts b/packages/localizations/src/enUs.ts
@@ -361,5 +361,8 @@ export const enUs = {
     remove: 'Remove',
     removing: 'Removing...',
     checkout: 'Checkout',
+    itemsPerPage: 'Items per page:',
+    search: 'Search',
+    searchPlaceholder: 'Search products...',
   },
 };
diff --git a/packages/localizations/src/esAr.ts b/packages/localizations/src/esAr.ts
@@ -367,5 +367,8 @@ export const esAr = {
     remove: 'Eliminar',
     removing: 'Eliminando...',
     checkout: 'Pagar',
+    itemsPerPage: 'Artículos por página:',
+    search: 'Buscar',
+    searchPlaceholder: 'Buscar productos...',
   },
 };
diff --git a/packages/localizations/src/esCl.ts b/packages/localizations/src/esCl.ts
@@ -369,5 +369,8 @@ export const esCl = {
     remove: 'Eliminar',
     removing: 'Eliminando...',
     checkout: 'Pagar',
+    itemsPerPage: 'Artículos por página:',
+    search: 'Buscar',
+    searchPlaceholder: 'Buscar productos...',
   },
 };
diff --git a/packages/localizations/src/esCo.ts b/packages/localizations/src/esCo.ts
@@ -367,5 +367,8 @@ export const esCo = {
     remove: 'Eliminar',
     removing: 'Eliminando...',
     checkout: 'Pagar',
+    itemsPerPage: 'Artículos por página:',
+    search: 'Buscar',
+    searchPlaceholder: 'Buscar productos...',
   },
 };
diff --git a/packages/localizations/src/esEs.ts b/packages/localizations/src/esEs.ts
@@ -372,5 +372,8 @@ export const esEs = {
     remove: 'Eliminar',
     removing: 'Eliminando...',
     checkout: 'Pagar',
+    itemsPerPage: 'Artículos por página:',
+    search: 'Buscar',
+    searchPlaceholder: 'Buscar productos...',
   },
 };
diff --git a/packages/localizations/src/esMx.ts b/packages/localizations/src/esMx.ts
@@ -368,5 +368,8 @@ export const esMx = {
     remove: 'Eliminar',
     removing: 'Eliminando...',
     checkout: 'Pagar',
+    itemsPerPage: 'Artículos por página:',
+    search: 'Buscar',
+    searchPlaceholder: 'Buscar productos...',
   },
 };
diff --git a/packages/localizations/src/esPe.ts b/packages/localizations/src/esPe.ts
@@ -367,5 +367,8 @@ export const esPe = {
     remove: 'Eliminar',
     removing: 'Eliminando...',
     checkout: 'Pagar',
+    itemsPerPage: 'Artículos por página:',
+    search: 'Buscar',
+    searchPlaceholder: 'Buscar productos...',
   },
 };
diff --git a/packages/localizations/src/esUs.ts b/packages/localizations/src/esUs.ts
@@ -367,5 +367,8 @@ export const esUs = {
     remove: 'Eliminar',
     removing: 'Eliminando...',
     checkout: 'Pagar',
+    itemsPerPage: 'Artículos por página:',
+    search: 'Buscar',
+    searchPlaceholder: 'Buscar productos...',
   },
 };
diff --git a/packages/localizations/src/frCa.ts b/packages/localizations/src/frCa.ts
@@ -384,5 +384,8 @@ export const frCa = {
     remove: 'Supprimer',
     removing: 'Suppression...',
     checkout: 'Commander',
+    itemsPerPage: 'Articles par page :',
+    search: 'Rechercher',
+    searchPlaceholder: 'Rechercher des produits...',
   },
 };
diff --git a/packages/localizations/src/frFr.ts b/packages/localizations/src/frFr.ts
@@ -385,5 +385,8 @@ export const frFr = {
     remove: 'Supprimer',
     removing: 'Suppression...',
     checkout: 'Commander',
+    itemsPerPage: 'Articles par page :',
+    search: 'Rechercher',
+    searchPlaceholder: 'Rechercher des produits...',
   },
 };
diff --git a/packages/localizations/src/idId.ts b/packages/localizations/src/idId.ts
@@ -360,5 +360,8 @@ export const idId = {
     remove: 'Hapus',
     removing: 'Menghapus...',
     checkout: 'Checkout',
+    itemsPerPage: 'Item per halaman:',
+    search: 'Cari',
+    searchPlaceholder: 'Cari produk...',
   },
 };
diff --git a/packages/localizations/src/itIt.ts b/packages/localizations/src/itIt.ts
@@ -384,5 +384,8 @@ export const itIt = {
     remove: 'Rimuovi',
     removing: 'Rimozione...',
     checkout: 'Acquista',
+    itemsPerPage: 'Articoli per pagina:',
+    search: 'Cerca',
+    searchPlaceholder: 'Cerca prodotti...',
   },
 };
diff --git a/packages/localizations/src/ptBr.ts b/packages/localizations/src/ptBr.ts
@@ -365,5 +365,8 @@ export const ptBr = {
     remove: 'Remover',
     removing: 'Removendo...',
     checkout: 'Finalizar compra',
+    itemsPerPage: 'Itens por página:',
+    search: 'Pesquisar',
+    searchPlaceholder: 'Pesquisar produtos...',
   },
 };
diff --git a/packages/localizations/src/qaPs.ts b/packages/localizations/src/qaPs.ts
@@ -369,5 +369,8 @@ export const qaPs = {
     remove: '[Remove]',
     removing: '[Removing...]',
     checkout: '[Checkout]',
+    itemsPerPage: '[Items per page:]',
+    search: '[Search]',
+    searchPlaceholder: '[Search products...]',
   },
 };
diff --git a/packages/localizations/src/trTr.ts b/packages/localizations/src/trTr.ts
@@ -360,5 +360,8 @@ export const trTr = {
     remove: 'Kaldır',
     removing: 'Kaldırılıyor...',
     checkout: 'Ödeme yap',
+    itemsPerPage: 'Sayfa başına öğe:',
+    search: 'Ara',
+    searchPlaceholder: 'Ürün ara...',
   },
 };
diff --git a/packages/localizations/src/viVn.ts b/packages/localizations/src/viVn.ts
@@ -361,5 +361,8 @@ export const viVn = {
     remove: 'Xóa',
     removing: 'Đang xóa...',
     checkout: 'Thanh toán',
+    itemsPerPage: 'Mục trên mỗi trang:',
+    search: 'Tìm kiếm',
+    searchPlaceholder: 'Tìm kiếm sản phẩm...',
   },
 };
diff --git a/packages/localizations/src/zhCn.ts b/packages/localizations/src/zhCn.ts
@@ -348,5 +348,8 @@ export const zhCn = {
     remove: '删除',
     removing: '正在删除...',
     checkout: '结账',
+    itemsPerPage: '每页项目数：',
+    search: '搜索',
+    searchPlaceholder: '搜索产品...',
   },
 };
diff --git a/packages/localizations/src/zhSg.ts b/packages/localizations/src/zhSg.ts
@@ -348,5 +348,8 @@ export const zhSg = {
     remove: '删除',
     removing: '正在删除...',
     checkout: '结账',
+    itemsPerPage: '每页项目数：',
+    search: '搜索',
+    searchPlaceholder: '搜索产品...',
   },
 };
diff --git a/packages/react/biome.json b/packages/react/biome.json
@@ -2,7 +2,11 @@
   "$schema": "https://biomejs.dev/schemas/2.3.2/schema.json",
   "extends": ["biome-config-godaddy/biome.json"],
   "files": {
-    "includes": ["**/*", "!!**/src/globals.css"]
+    "includes": [
+      "**/*",
+      "!!**/src/globals.css",
+      "!!**/src/globals-tailwind.css"
+    ]
   },
   "linter": {
     "rules": {
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -67,7 +67,7 @@
     "@radix-ui/react-scroll-area": "^1.2.3",
     "@radix-ui/react-select": "^2.1.6",
     "@radix-ui/react-separator": "^1.1.2",
-    "@radix-ui/react-slot": "^1.1.2",
+    "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-switch": "^1.1.3",
     "@radix-ui/react-toast": "^1.2.6",
     "@radix-ui/react-toggle": "^1.1.2",
diff --git a/packages/react/src/components/checkout/payment/month-year-mask.tsx b/packages/react/src/components/checkout/payment/month-year-mask.tsx
@@ -1,4 +1,3 @@
-// @ts-expect-error
 const matcher = /(?<month>\d{0,2})(?<separator>\s?\/?\s?)(?<year>\d{0,2})/;
 export function monthYearMask({ value }: { value?: string }) {
   if (typeof value !== 'string') {
diff --git a/packages/react/src/components/storefront/cart.tsx b/packages/react/src/components/storefront/cart.tsx
@@ -2,7 +2,6 @@
 
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { Loader2, ShoppingCart } from 'lucide-react';
-import { useEffect, useState } from 'react';
 import type { Product } from '@/components/checkout/line-items/line-items';
 import { CartLineItems } from '@/components/storefront/cart-line-items';
 import { CartTotals } from '@/components/storefront/cart-totals';
@@ -33,11 +32,8 @@ export function Cart({
 }: CartProps) {
   const context = useGoDaddyContext();
   const queryClient = useQueryClient();
-  const [cartOrderId, setCartOrderId] = useState<string | null>(null);
-
-  useEffect(() => {
-    setCartOrderId(getCartOrderId());
-  }, []);
+  // Read cart order ID fresh on every render
+  const cartOrderId = getCartOrderId();
 
   // Fetch cart order
   const {
@@ -147,7 +143,8 @@ export function Cart({
           {!isLoading && error && (
             <div className='flex flex-col items-center justify-center py-12 text-center'>
               <p className='text-destructive mb-2'>
-                {t.storefront.failedToLoadCart} {(error as Error).message}
+                {t.storefront.failedToLoadCart}{' '}
+                {error instanceof Error ? error.message : String(error)}
               </p>
               <Button
                 variant='outline'
diff --git a/packages/react/src/components/storefront/hooks/use-add-to-cart.ts b/packages/react/src/components/storefront/hooks/use-add-to-cart.ts
@@ -74,9 +74,8 @@ export function useAddToCart(options?: UseAddToCartOptions) {
         context?.apiHost
       ),
     onSuccess: () => {
-      // Invalidate cart query to refresh
-      const cartOrderId = getCartOrderId();
-      queryClient.invalidateQueries({ queryKey: ['cart-order', cartOrderId] });
+      // Invalidate all cart queries to refresh (queryKey prefix match)
+      queryClient.invalidateQueries({ queryKey: ['cart-order'] });
 
       // Call success callback
       options?.onSuccess?.();
@@ -91,7 +90,7 @@ export function useAddToCart(options?: UseAddToCartOptions) {
     if (!context.storeId || !context.clientId) {
       const error = new Error('Store ID and Client ID are required');
       options?.onError?.(error);
-      throw error;
+      return;
     }
     let cartOrderId = getCartOrderId();
 
@@ -103,7 +102,7 @@ export function useAddToCart(options?: UseAddToCartOptions) {
       if (!cartOrderId) {
         const error = new Error('Failed to create cart');
         options?.onError?.(error);
-        throw error;
+        return;
       }
     }
 
diff --git a/packages/react/src/components/storefront/index.ts b/packages/react/src/components/storefront/index.ts
@@ -4,3 +4,4 @@ export * from './cart-totals.tsx';
 export * from './product-card';
 export * from './product-details.tsx';
 export * from './product-grid';
+export * from './product-search';
diff --git a/packages/react/src/components/storefront/product-card.tsx b/packages/react/src/components/storefront/product-card.tsx
diff --git a/packages/react/src/components/storefront/product-grid.tsx b/packages/react/src/components/storefront/product-grid.tsx
diff --git a/packages/react/src/components/storefront/product-search.tsx b/packages/react/src/components/storefront/product-search.tsx
diff --git a/packages/react/src/components/ui/link.tsx b/packages/react/src/components/ui/link.tsx
diff --git a/packages/react/src/components/ui/pagination.tsx b/packages/react/src/components/ui/pagination.tsx
diff --git a/packages/react/src/lib/godaddy/catalog-storefront-queries.ts b/packages/react/src/lib/godaddy/catalog-storefront-queries.ts
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
