Storefront product grid and product details

.gitignore

@@ -42,7 +42,7 @@ dist
 /blob-report/
 /playwright/.cache/
 
-schema.graphql
+*.graphql
 
 # macOS
 .DS_Store

examples/nextjs/app/checkout.tsx

@@ -1,8 +1,7 @@
 'use client';
 
 import type { CheckoutFormSchema, CheckoutSession } from '@godaddy/react';
-import { Checkout, GoDaddyProvider } from '@godaddy/react';
-import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { Checkout } from '@godaddy/react';
 import { z } from 'zod';
 
 /* Override the checkout form schema to make shippingPhone required */
@@ -12,26 +11,23 @@ const customSchema: CheckoutFormSchema = {
 
 export function CheckoutPage({ session }: { session: CheckoutSession }) {
   return (
-    <GoDaddyProvider apiHost={process.env.NEXT_PUBLIC_GODADDY_API_HOST}>
-      <Checkout
-        session={session}
-        checkoutFormSchema={customSchema}
-        squareConfig={{
-          appId: process.env.NEXT_PUBLIC_SQUARE_APP_ID || '',
-          locationId: process.env.NEXT_PUBLIC_SQUARE_LOCATION_ID || '',
-        }}
-        stripeConfig={{
-          publishableKey: process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY || '',
-        }}
-        godaddyPaymentsConfig={{
-          businessId: process.env.NEXT_PUBLIC_GODADDY_BUSINESS_ID || '',
-          appId: process.env.NEXT_PUBLIC_GODADDY_APP_ID || '',
-        }}
-        paypalConfig={{
-          clientId: process.env.NEXT_PUBLIC_PAYPAL_CLIENT_ID || '',
-        }}
-      />
-      <ReactQueryDevtools initialIsOpen={false} />
-    </GoDaddyProvider>
+    <Checkout
+      session={session}
+      checkoutFormSchema={customSchema}
+      squareConfig={{
+        appId: process.env.NEXT_PUBLIC_SQUARE_APP_ID || '',
+        locationId: process.env.NEXT_PUBLIC_SQUARE_LOCATION_ID || '',
+      }}
+      stripeConfig={{
+        publishableKey: process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY || '',
+      }}
+      godaddyPaymentsConfig={{
+        businessId: process.env.NEXT_PUBLIC_GODADDY_BUSINESS_ID || '',
+        appId: process.env.NEXT_PUBLIC_GODADDY_APP_ID || '',
+      }}
+      paypalConfig={{
+        clientId: process.env.NEXT_PUBLIC_PAYPAL_CLIENT_ID || '',
+      }}
+    />
   );
 }

examples/nextjs/app/page.tsx

@@ -90,7 +90,7 @@ export default async function Home() {
     },
     {
       auth: {
-        clientId: process.env.GODADDY_CLIENT_ID || '',
+        clientId: process.env.NEXT_PUBLIC_GODADDY_CLIENT_ID || '',
         clientSecret: process.env.GODADDY_CLIENT_SECRET || '',
       },
     }

examples/nextjs/app/providers.tsx

@@ -1,12 +1,40 @@
 'use client';
 
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { GoDaddyProvider } from '@godaddy/react';
+import { QueryClient } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import Link from 'next/link';
+import { NuqsAdapter } from 'nuqs/adapters/next/app';
 import { useState } from 'react';
 
 export function Providers({ children }: { children: React.ReactNode }) {
-  const [queryClient] = useState(() => new QueryClient());
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            retry: false,
+            refetchOnWindowFocus: false,
+          },
+        },
+      })
+  );
 
   return (
-    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    <NuqsAdapter>
+      <GoDaddyProvider
+        queryClient={queryClient}
+        apiHost={process.env.NEXT_PUBLIC_GODADDY_API_HOST}
+        storeId={process.env.NEXT_PUBLIC_GODADDY_STORE_ID}
+        clientId={process.env.NEXT_PUBLIC_GODADDY_CLIENT_ID}
+        Link={Link}
+        appearance={{
+          variables: { primary: '#ff0000', 'primary-foreground': '#FFFFFF' },
+        }}
+      >
+        {children}
+        <ReactQueryDevtools client={queryClient} initialIsOpen={false} />
+      </GoDaddyProvider>
+    </NuqsAdapter>
   );
 }

examples/nextjs/app/store/cart/cart.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import { CartLineItems, CartTotals } from '@godaddy/react';
+
+export default function CartPage() {
+  const items = [
+    {
+      id: 'LineItem_2y0l7o6Oi4BW6fpSiKPX1hhBccU',
+      name: 'Box of cookies',
+      image:
+        'https://isteam.dev-wsimg.com/ip/2f2e05ec-de6f-4a89-90f2-038c749655b0/cookies.webp',
+      quantity: 2,
+      originalPrice: 10.99,
+      price: 10.99,
+      notes: [],
+    },
+    {
+      id: 'LineItem_2y0l9FykA04qp2pC6y3YZ0TbZFD',
+      name: 'Cupcakes',
+      image:
+        'https://isteam.dev-wsimg.com/ip/2f2e05ec-de6f-4a89-90f2-038c749655b0/cupcakes.webp/:/rs=w:600,h:600',
+      quantity: 1,
+      originalPrice: 5.99,
+      price: 5.99,
+      notes: [],
+    },
+  ];
+
+  const totals = {
+    subtotal: 27.97,
+    discount: 0,
+    shipping: 0,
+    currency: 'USD',
+    itemCount: 3,
+    total: 27.97,
+    tip: 0,
+    taxes: 0,
+    enableDiscounts: false,
+    enableTaxes: true,
+    isTaxLoading: false,
+  };
+
+  return (
+    <div className='container px-4 py-8'>
+      <h1 className='text-2xl font-bold mb-6'>Cart</h1>
+      <div className='grid grid-cols-1 gap-8'>
+        <div>
+          <div className='bg-white rounded-lg shadow p-6'>
+            <h2 className='text-lg font-semibold mb-4'>Your Items</h2>
+            <CartLineItems items={items} />
+          </div>
+        </div>
+        <div>
+          <div className='bg-white rounded-lg shadow p-6 sticky top-4'>
+            <h2 className='text-lg font-semibold mb-4'>Order Summary</h2>
+            <CartTotals {...totals} />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

examples/nextjs/app/store/cart/page.tsx

@@ -0,0 +1,9 @@
+import Cart from './cart';
+
+export default function StorePage() {
+  return (
+    <div className='p-4'>
+      <Cart />
+    </div>
+  );
+}

examples/nextjs/app/store/layout.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import { Cart } from '@godaddy/react';
+import { ShoppingCart } from 'lucide-react';
+import { createContext, useContext, useState } from 'react';
+
+interface CartContextType {
+  openCart: () => void;
+  closeCart: () => void;
+}
+
+const CartContext = createContext<CartContextType | undefined>(undefined);
+
+export function useCart() {
+  const context = useContext(CartContext);
+  if (!context) {
+    throw new Error('useCart must be used within CartProvider');
+  }
+  return context;
+}
+
+export default function StoreLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const [isCartOpen, setIsCartOpen] = useState(false);
+
+  const openCart = () => setIsCartOpen(true);
+  const closeCart = () => setIsCartOpen(false);
+
+  return (
+    <CartContext.Provider value={{ openCart, closeCart }}>
+      <section className='relative max-w-6xl mx-auto'>
+        {/* Cart toggle button */}
+        <button
+          onClick={openCart}
+          className='fixed top-4 right-4 z-40 bg-primary text-primary-foreground p-3 rounded-full shadow-lg hover:bg-primary/90 transition-colors'
+          aria-label='Open shopping cart'
+        >
+          <ShoppingCart className='h-6 w-6' />
+        </button>
+
+        {children}
+
+        <Cart open={isCartOpen} onOpenChange={setIsCartOpen} />
+      </section>
+    </CartContext.Provider>
+  );
+}
+
+export { CartContext };

examples/nextjs/app/store/page.tsx

@@ -0,0 +1,9 @@
+import Products from './products';
+
+export default function StorePage() {
+  return (
+    <div className='p-4'>
+      <Products />
+    </div>
+  );
+}

examples/nextjs/app/store/product/[skuId]/page.tsx

@@ -0,0 +1,18 @@
+'use client';
+
+import { use } from 'react';
+import Product from '@/app/store/product/[skuId]/product';
+
+export default function ProductPage({
+  params,
+}: {
+  params: Promise<{ skuId: string }>;
+}) {
+  const { skuId } = use(params);
+
+  return (
+    <div className='p-4'>
+      <Product skuId={skuId} />
+    </div>
+  );
+}

examples/nextjs/app/store/product/[skuId]/product.tsx

@@ -0,0 +1,20 @@
+'use client';
+
+import { ProductDetails } from '@godaddy/react';
+import { ArrowLeft } from 'lucide-react';
+import Link from 'next/link';
+
+export default function Product({ skuId }: { skuId: string }) {
+  return (
+    <div className='container mx-auto'>
+      <Link
+        href='/store'
+        className='inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors mb-6'
+      >
+        <ArrowLeft className='h-4 w-4' />
+        Back to Store
+      </Link>
+      <ProductDetails sku={skuId} />
+    </div>
+  );
+}

examples/nextjs/app/store/products.tsx

@@ -0,0 +1,11 @@
+'use client';
+
+import { ProductGrid } from '@godaddy/react';
+
+export default function ProductsPage() {
+  return (
+    <div className='container mx-auto'>
+      <ProductGrid getProductHref={sku => `/store/product/${sku}`} />
+    </div>
+  );
+}

examples/nextjs/package.json

@@ -15,6 +15,7 @@
 		"@tanstack/react-query": "^5.66.0",
 		"@tanstack/react-query-devtools": "^5.76.1",
 		"next": "16.0.1",
+        "nuqs": "^2.7.3",
 		"react": "19.2.0",
 		"react-dom": "19.2.0",
 		"zod": "^3.24.1"

package.json

@@ -51,7 +51,7 @@
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-mocha": "^10.5.0",
     "eslint-plugin-react": "^7.37.5",
-    "react": "^19.1.0",
+    "react": "^19.2.0",
     "rimraf": "^6.0.1",
     "typescript": "^5.8.3"
   },

packages/react/components.json

@@ -7,8 +7,7 @@
     "config": "",
     "css": "src/index.css",
     "baseColor": "neutral",
-    "cssVariables": true,
-    "prefix": "gd"
+    "cssVariables": true
   },
   "aliases": {
     "components": "@/components",

packages/react/package.json

@@ -44,6 +44,7 @@
 	},
 	"peerDependencies": {
 		"@tanstack/react-query": ">=5",
+        "nuqs": ">=2",
 		"react": "18.x || 19.x",
 		"react-dom": "18.x || 19.x",
 		"react-hook-form": ">=7"

packages/react/src/components/checkout/checkout.tsx

@@ -227,7 +227,7 @@ export function Checkout(props: CheckoutProps) {
   const [checkoutErrors, setCheckoutErrors] = React.useState<
     string[] | undefined
   >(undefined);
-  const { t } = useGoDaddyContext()
+  const { t } = useGoDaddyContext();
 
   const { session, jwt, isLoading: isLoadingJWT } = useCheckoutSession(props);
 
@@ -334,7 +334,6 @@ export function Checkout(props: CheckoutProps) {
       }
     });
   }, [checkoutFormSchema, t]);
-  // }, [checkoutFormSchema, session?.paymentMethods]);
 
   const requiredFields = React.useMemo(() => {
     return getRequiredFieldsFromSchema(formSchema);

packages/react/src/components/checkout/delivery/delivery-method.tsx

@@ -82,13 +82,14 @@ export function DeliveryMethodForm() {
   useEffect(() => {
     const currentValue = form.getValues('deliveryMethod');
     const isCurrentValueValid = availableMethods.some(
-      (method) => method.id === currentValue
+      method => method.id === currentValue
     );
 
     if (!currentValue || !isCurrentValueValid) {
-      const defaultMethod = availableMethods.length === 1
-        ? availableMethods[0].id
-        : DeliveryMethods.SHIP;
+      const defaultMethod =
+        availableMethods.length === 1
+          ? availableMethods[0].id
+          : DeliveryMethods.SHIP;
       form.setValue('deliveryMethod', defaultMethod);
     }
   }, [availableMethods, form]);

packages/react/src/components/checkout/discount/utils/use-discount-apply.ts

@@ -1,13 +1,13 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
+import type { ResultOf } from 'gql.tada';
 import { useFormContext } from 'react-hook-form';
 import { useCheckoutContext } from '@/components/checkout/checkout';
 import { DeliveryMethods } from '@/components/checkout/delivery/delivery-method';
 import { useDraftOrder } from '@/components/checkout/order/use-draft-order';
 import { useUpdateTaxes } from '@/components/checkout/order/use-update-taxes';
 import { useGoDaddyContext } from '@/godaddy-provider';
-import type { ResultOf } from '@/gql.tada';
+import type { DraftOrderQuery } from '@/lib/godaddy/checkout-queries.ts';
 import { applyDiscount } from '@/lib/godaddy/godaddy';
-import type { DraftOrderQuery } from '@/lib/godaddy/queries';
 import type { ApplyCheckoutSessionDiscountInput } from '@/types';
 
 export function useDiscountApply() {