@shopify/shop-minis-react 0.3.2 → 0.4.0

package/src/components/commerce/product-card.test.tsx

@@ -20,6 +20,7 @@ import {
   ProductCardFavoriteButton,
   ProductCardInfo,
   ProductCardTitle,
+  ProductCardReviewStars,
   ProductCardPrice,
 } from './product-card'
 
@@ -174,6 +175,108 @@ describe('ProductCard', () => {
       const favoriteButton = screen.getByRole('button')
       expect(favoriteButton).toBeInTheDocument()
     })
+
+    it('renders review stars when review data is available', () => {
+      const product = mockProduct({
+        reviewAnalytics: {
+          averageRating: 4.5,
+          reviewCount: 123,
+        },
+      })
+
+      render(<ProductCard product={product} />)
+
+      // Should show the review stars and count
+      expect(screen.getByText('(123)')).toBeInTheDocument()
+
+      // Check for star elements - ProductReviewStars uses overlay technique with 10 stars total
+      const container = screen.getByText('(123)').parentElement
+      const stars = container?.querySelectorAll('svg')
+      // 5 empty stars + filled stars overlay (4 full + 1 half for 4.5 rating)
+      expect(stars).toHaveLength(10)
+
+      // Verify review count is displayed
+      expect(screen.getByText('(123)')).toBeInTheDocument()
+    })
+
+    it('does not render review stars when review data is missing', () => {
+      const product = mockProduct({
+        reviewAnalytics: undefined,
+      })
+
+      render(<ProductCard product={product} />)
+
+      // Should not show review count
+      expect(screen.queryByText(/^\(\d+\)$/)).not.toBeInTheDocument()
+    })
+
+    it('does not render review stars when averageRating is null', () => {
+      const product = mockProduct({
+        reviewAnalytics: {
+          averageRating: null,
+          reviewCount: 100,
+        },
+      })
+
+      render(<ProductCard product={product} />)
+
+      // Should not show review count
+      expect(screen.queryByText('(100)')).not.toBeInTheDocument()
+    })
+
+    it('does not render review stars when reviewCount is 0', () => {
+      const product = mockProduct({
+        reviewAnalytics: {
+          averageRating: 4.5,
+          reviewCount: 0,
+        },
+      })
+
+      render(<ProductCard product={product} />)
+
+      // Should not show review count
+      expect(screen.queryByText('(0)')).not.toBeInTheDocument()
+    })
+
+    it('formats large review counts correctly', () => {
+      const product = mockProduct({
+        reviewAnalytics: {
+          averageRating: 4.0,
+          reviewCount: 1500,
+        },
+      })
+
+      render(<ProductCard product={product} />)
+
+      // Should format as 1K
+      expect(screen.getByText('(1K)')).toBeInTheDocument()
+    })
+
+    it('does not show review stars in non-default variants', () => {
+      const product = mockProduct({
+        reviewAnalytics: {
+          averageRating: 4.5,
+          reviewCount: 123,
+        },
+      })
+
+      const {rerender} = render(
+        <ProductCard product={product} variant="priceOverlay" />
+      )
+
+      // Should not show review stars in priceOverlay variant
+      expect(screen.queryByText('(123)')).not.toBeInTheDocument()
+
+      rerender(<ProductCard product={product} variant="compact" />)
+
+      // Should not show review stars in compact variant
+      expect(screen.queryByText('(123)')).not.toBeInTheDocument()
+
+      rerender(<ProductCard product={product} variant="default" />)
+
+      // Should show review stars in default variant
+      expect(screen.getByText('(123)')).toBeInTheDocument()
+    })
   })
 
   describe('Interactions', () => {
@@ -357,6 +460,38 @@ describe('ProductCard', () => {
       expect(screen.getByText('$99.99')).toBeInTheDocument()
     })
 
+    it('allows ProductCardReviewStars in custom composition', () => {
+      const product = mockProduct({
+        reviewAnalytics: {
+          averageRating: 4.2,
+          reviewCount: 50,
+        },
+      })
+
+      render(
+        <ProductCard product={product}>
+          <ProductCardContainer>
+            <ProductCardImageContainer>
+              <ProductCardImage />
+            </ProductCardImageContainer>
+            <ProductCardInfo>
+              <ProductCardTitle />
+              <ProductCardReviewStars />
+              <ProductCardPrice />
+            </ProductCardInfo>
+          </ProductCardContainer>
+        </ProductCard>
+      )
+
+      // Review stars should be rendered
+      expect(screen.getByText('(50)')).toBeInTheDocument()
+
+      // Check for star elements - ProductReviewStars uses overlay technique
+      const container = screen.getByText('(50)').parentElement
+      const stars = container?.querySelectorAll('svg')
+      expect(stars).toHaveLength(9) // 5 empty + 3 full + 1 half for 3.5 rating
+    })
+
     it('respects favoriteButtonDisabled in custom composition', () => {
       const product = mockProduct()
 

package/src/components/commerce/product-card.tsx

@@ -5,6 +5,7 @@ import {type Product, type ProductVariant} from '@shopify/shop-minis-platform'
 
 import {useShopNavigation} from '../../hooks/navigation/useShopNavigation'
 import {useSavedProductsActions} from '../../hooks/user/useSavedProductsActions'
+import {ProductReviewStars} from '../../internal/components/product-review-stars'
 import {formatMoney} from '../../lib/formatMoney'
 import {cn} from '../../lib/utils'
 import {Image} from '../atoms/image'
@@ -25,10 +26,11 @@ interface ProductCardContextValue {
   touchable: boolean
   badgeText?: string
   badgeVariant?: 'primary' | 'secondary' | 'destructive' | 'outline' | 'none'
+  favoriteButtonDisabled: boolean
+  reviewsDisabled: boolean
 
   // State
   isFavorited: boolean
-  isFavoriteButtonDisabled: boolean
 
   // Actions
   onClick: () => void
@@ -194,9 +196,9 @@ function ProductCardFavoriteButton({
   className,
   ...props
 }: React.ComponentProps<'div'>) {
-  const {isFavorited, isFavoriteButtonDisabled, onFavoriteToggle} =
+  const {isFavorited, favoriteButtonDisabled, onFavoriteToggle} =
     useProductCardContext()
-  if (isFavoriteButtonDisabled) return null
+  if (favoriteButtonDisabled) return null
 
   return (
     <div className={cn('absolute bottom-3 right-3 z-10', className)} {...props}>
@@ -213,7 +215,7 @@ function ProductCardInfo({className, ...props}: React.ComponentProps<'div'>) {
 
   return (
     <div
-      data-slot="product-card-info"
+      data-testid="product-card-info"
       className={cn('px-1 pt-2 pb-0 space-y-1', className)}
       {...props}
     />
@@ -241,6 +243,31 @@ function ProductCardTitle({
   )
 }
 
+function ProductCardReviewStars({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  const {product, reviewsDisabled} = useProductCardContext()
+  const reviewAnalytics = product.reviewAnalytics
+
+  if (reviewsDisabled || !reviewAnalytics?.averageRating) {
+    return null
+  }
+
+  return (
+    <div
+      data-slot="product-card-review-stars"
+      className={cn('', className)}
+      {...props}
+    >
+      <ProductReviewStars
+        averageRating={reviewAnalytics.averageRating}
+        reviewCount={reviewAnalytics.reviewCount}
+      />
+    </div>
+  )
+}
+
 function ProductCardPrice({className}: {className?: string}) {
   const {product, selectedProductVariant} = useProductCardContext()
 
@@ -297,6 +324,8 @@ export interface ProductCardProps {
   children?: React.ReactNode
   /** Whether the favorite button is disabled */
   favoriteButtonDisabled?: boolean
+  /** Whether review stars are disabled */
+  reviewsDisabled?: boolean
 }
 
 function ProductCard({
@@ -310,6 +339,7 @@ function ProductCard({
   onFavoriteToggled,
   children,
   favoriteButtonDisabled = false,
+  reviewsDisabled = false,
 }: ProductCardProps) {
   const {navigateToProduct} = useShopNavigation()
   const {saveProduct, unsaveProduct} = useSavedProductsActions()
@@ -377,10 +407,11 @@ function ProductCard({
       touchable,
       badgeText,
       badgeVariant,
+      favoriteButtonDisabled,
+      reviewsDisabled,
 
       // State
       isFavorited: isFavoritedLocal,
-      isFavoriteButtonDisabled: favoriteButtonDisabled,
       // Actions
       onClick: handleClick,
       onFavoriteToggle: handleFavoriteClick,
@@ -396,6 +427,7 @@ function ProductCard({
       handleClick,
       handleFavoriteClick,
       favoriteButtonDisabled,
+      reviewsDisabled,
     ]
   )
 
@@ -412,6 +444,7 @@ function ProductCard({
           {variant === 'default' && (
             <ProductCardInfo>
               <ProductCardTitle />
+              <ProductCardReviewStars />
               <ProductCardPrice />
             </ProductCardInfo>
           )}
@@ -430,5 +463,6 @@ export {
   ProductCardFavoriteButton,
   ProductCardInfo,
   ProductCardTitle,
+  ProductCardReviewStars,
   ProductCardPrice,
 }

package/src/components/commerce/product-link.test.tsx

@@ -442,10 +442,22 @@ describe('ProductLink', () => {
 
       render(<ProductLink product={product} />)
 
-      const stars = document.querySelectorAll('svg')
-      const filledStars = Array.from(stars).filter(
-        star => star.getAttribute('fill') === 'currentColor'
+      // ProductReviewStars uses overlay technique with specific fill colors
+      // Find the star container first to only count star SVGs
+      const starContainer = document.querySelector(
+        '[data-slot="product-review-stars"]'
       )
+      expect(starContainer).toBeInTheDocument()
+
+      const stars = starContainer?.querySelectorAll('svg') || []
+      // For 5 star rating: 5 empty stars + 5 filled stars = 10 total
+      expect(stars).toHaveLength(10)
+
+      // Check that stars are rendered (5 filled stars using var(--grayscale-d100) style)
+      const filledStars = Array.from(stars).filter(star => {
+        const style = star.getAttribute('style')
+        return style?.includes('var(--grayscale-d100)')
+      })
       expect(filledStars).toHaveLength(5)
     })
   })

package/src/components/commerce/product-link.tsx

@@ -2,11 +2,11 @@ import * as React from 'react'
 
 import {type Product} from '@shopify/shop-minis-platform'
 import {cva, type VariantProps} from 'class-variance-authority'
-import {Star} from 'lucide-react'
 import {Slot as SlotPrimitive} from 'radix-ui'
 
 import {useShopNavigation} from '../../hooks/navigation/useShopNavigation'
 import {useSavedProductsActions} from '../../hooks/user/useSavedProductsActions'
+import {ProductReviewStars} from '../../internal/components/product-review-stars'
 import {formatMoney} from '../../lib/formatMoney'
 import {cn} from '../../lib/utils'
 import {Touchable} from '../atoms/touchable'
@@ -183,10 +183,7 @@ function ProductLinkRating({className, ...props}: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="product-link-rating"
-      className={cn(
-        'flex items-center gap-1 text-xs text-muted-foreground',
-        className
-      )}
+      className={cn('', className)}
       {...props}
     />
   )
@@ -233,6 +230,7 @@ export type ProductLinkProps = {
   product: Product
   hideFavoriteAction?: boolean
   onClick?: (product: Product) => void
+  reviewsDisabled?: boolean
 } & (
   | {
       customAction?: never
@@ -251,6 +249,7 @@ function ProductLink({
   onClick,
   customAction,
   onCustomActionClick,
+  reviewsDisabled = false,
 }: ProductLinkProps) {
   const {navigateToProduct} = useShopNavigation()
   const {saveProduct, unsaveProduct} = useSavedProductsActions()
@@ -354,27 +353,12 @@ function ProductLink({
       <ProductLinkInfo layout="horizontal">
         <ProductLinkTitle>{title}</ProductLinkTitle>
 
-        {reviewCount && averageRating ? (
+        {averageRating && !reviewsDisabled ? (
           <ProductLinkRating>
-            <div className="flex items-center gap-1">
-              {Array.from({length: 5}, (_, i) => (
-                <Star
-                  key={i}
-                  fill={
-                    i < Math.floor(averageRating!) ? 'currentColor' : 'none'
-                  }
-                  className={cn(
-                    'h-3 w-3',
-                    i < Math.floor(averageRating!)
-                      ? 'text-primary'
-                      : 'text-gray-300'
-                  )}
-                />
-              ))}
-              <span className="text-xs text-gray-600 ml-1">
-                ({reviewCount})
-              </span>
-            </div>
+            <ProductReviewStars
+              averageRating={averageRating}
+              reviewCount={reviewCount}
+            />
           </ProductLinkRating>
         ) : null}
 

package/src/components/commerce/search.tsx

@@ -246,8 +246,8 @@ function Search({
 
   return (
     <SearchProvider initialQuery={initialQuery}>
-      <div className={cn('flex flex-col ', className)}>
-        <div className="fixed top-0 left-0 right-0 p-4 w-full z-20 bg-background">
+      <div className={cn('flex flex-col relative', className)}>
+        <div className="absolute top-0 left-0 right-0 p-4 w-full z-20 bg-background">
           <SearchInput placeholder={placeholder} inputProps={inputProps} />
         </div>
         <div className="h-14" />

package/src/components/index.ts

@@ -26,6 +26,7 @@ export * from './atoms/list'
 export * from './atoms/video-player'
 export * from './atoms/text-input'
 export * from './atoms/content-wrapper'
+export * from './atoms/product-variant-price'
 
 export * from './ui/accordion'
 export * from './ui/alert'

package/src/components/ui/sonner.tsx

@@ -1,5 +1,5 @@
 import {useTheme} from 'next-themes'
-import {Toaster as Sonner, ToasterProps} from 'sonner'
+import {Toaster as Sonner, ToasterProps, toast} from 'sonner'
 
 const Toaster = ({...props}: ToasterProps) => {
   const {theme = 'system'} = useTheme()
@@ -20,4 +20,4 @@ const Toaster = ({...props}: ToasterProps) => {
   )
 }
 
-export {Toaster}
+export {Toaster, toast}

package/src/hooks/content/useContent.ts

@@ -1,7 +1,5 @@
-import {useMemo} from 'react'
-
+import {useShopActionQuery} from '../../internal/reactQuery'
 import {useShopActions} from '../../internal/useShopActions'
-import {useShopActionsDataFetching} from '../../internal/useShopActionsDataFetching'
 import {
   Content,
   ContentIdentifierInput,
@@ -27,24 +25,15 @@ export const useContent = (params: UseContentParams): UseContentReturns => {
   const {getContent} = useShopActions()
   const {identifiers, skip = false, ...restParams} = params
 
-  const {data, ...rest} = useShopActionsDataFetching(
+  const {data, ...rest} = useShopActionQuery(
+    ['content', identifiers, restParams],
     getContent,
-    {
-      identifiers,
-      ...restParams,
-    },
-    {
-      skip,
-      hook: 'useContent',
-    }
+    {identifiers, ...restParams},
+    {skip}
   )
 
-  const content = useMemo(() => {
-    return data ?? null
-  }, [data])
-
   return {
     ...rest,
-    content,
+    content: data,
   }
 }

package/src/hooks/navigation/useNavigateWithTransition.test.ts

@@ -86,47 +86,59 @@ describe('useNavigateWithTransition', () => {
     })
 
     it('uses view transition for path navigation', async () => {
+      const scrollToSpy = vi.spyOn(window, 'scrollTo')
       const {result} = renderHook(() => useNavigateWithTransition())
 
       await act(async () => {
         result.current('/new-route')
+        await mockTransition.finished
       })
 
       expect(document.startViewTransition).toHaveBeenCalled()
       expect(mockNavigate).toHaveBeenCalledWith('/new-route', {
-        preventScrollReset: true,
         replace: false,
       })
+      expect(scrollToSpy).toHaveBeenCalledWith(0, 0)
+
+      scrollToSpy.mockRestore()
     })
 
     it('uses replace navigation for same route', async () => {
+      const scrollToSpy = vi.spyOn(window, 'scrollTo')
       const {result} = renderHook(() => useNavigateWithTransition())
 
       await act(async () => {
         result.current('/current')
+        await mockTransition.finished
       })
 
       expect(document.startViewTransition).toHaveBeenCalled()
       expect(mockNavigate).toHaveBeenCalledWith('/current', {
-        preventScrollReset: true,
         replace: true,
       })
+      expect(scrollToSpy).toHaveBeenCalledWith(0, 0)
+
+      scrollToSpy.mockRestore()
     })
 
     it('merges custom options with defaults', async () => {
+      const scrollToSpy = vi.spyOn(window, 'scrollTo')
       const {result} = renderHook(() => useNavigateWithTransition())
 
       const customOptions = {state: {from: 'test'}, replace: true}
 
       await act(async () => {
         result.current('/new-route', customOptions)
+        await mockTransition.finished
       })
 
       expect(mockNavigate).toHaveBeenCalledWith('/new-route', {
-        preventScrollReset: true,
         replace: true,
         state: {from: 'test'},
       })
+      expect(scrollToSpy).toHaveBeenCalledWith(0, 0)
+
+      scrollToSpy.mockRestore()
     })
 
     it('removes navigation type attribute after transition completes', async () => {
@@ -183,14 +195,20 @@ describe('useNavigateWithTransition', () => {
     })
 
     it('uses view transition for delta navigation', async () => {
+      const scrollToSpy = vi.spyOn(window, 'scrollTo')
       const {result} = renderHook(() => useNavigateWithTransition())
 
       await act(async () => {
         result.current(-1)
+        await mockTransition.finished
       })
 
       expect(document.startViewTransition).toHaveBeenCalled()
       expect(mockNavigate).toHaveBeenCalledWith(-1)
+      // Delta navigation should NOT reset scroll
+      expect(scrollToSpy).not.toHaveBeenCalled()
+
+      scrollToSpy.mockRestore()
     })
 
     it('removes attribute after delta navigation transition', async () => {
@@ -210,14 +228,39 @@ describe('useNavigateWithTransition', () => {
     })
 
     it('handles positive delta navigation', async () => {
+      const scrollToSpy = vi.spyOn(window, 'scrollTo')
       const {result} = renderHook(() => useNavigateWithTransition())
 
       await act(async () => {
         result.current(1)
+        await mockTransition.finished
       })
 
       expect(document.startViewTransition).toHaveBeenCalled()
       expect(mockNavigate).toHaveBeenCalledWith(1)
+      // Delta navigation should NOT reset scroll
+      expect(scrollToSpy).not.toHaveBeenCalled()
+
+      scrollToSpy.mockRestore()
+    })
+
+    it('does not reset scroll when preventScrollReset is true', async () => {
+      const scrollToSpy = vi.spyOn(window, 'scrollTo')
+      const {result} = renderHook(() => useNavigateWithTransition())
+
+      await act(async () => {
+        result.current('/new-route', {preventScrollReset: true})
+        await mockTransition.finished
+      })
+
+      expect(document.startViewTransition).toHaveBeenCalled()
+      expect(mockNavigate).toHaveBeenCalledWith('/new-route', {
+        replace: false,
+        preventScrollReset: true,
+      })
+      expect(scrollToSpy).not.toHaveBeenCalled()
+
+      scrollToSpy.mockRestore()
     })
   })
 
@@ -243,7 +286,6 @@ describe('useNavigateWithTransition', () => {
       })
 
       expect(mockNavigate).toHaveBeenCalledWith('', {
-        preventScrollReset: true,
         replace: false,
       })
     })
@@ -256,7 +298,6 @@ describe('useNavigateWithTransition', () => {
       })
 
       expect(mockNavigate).toHaveBeenCalledWith('/', {
-        preventScrollReset: true,
         replace: false,
       })
     })
@@ -269,7 +310,6 @@ describe('useNavigateWithTransition', () => {
       })
 
       expect(mockNavigate).toHaveBeenCalledWith('/search?q=test&page=2', {
-        preventScrollReset: true,
         replace: false,
       })
     })
@@ -282,7 +322,6 @@ describe('useNavigateWithTransition', () => {
       })
 
       expect(mockNavigate).toHaveBeenCalledWith('/page#section', {
-        preventScrollReset: true,
         replace: false,
       })
     })

package/src/hooks/navigation/useNavigateWithTransition.ts

@@ -43,10 +43,13 @@ export function useNavigateWithTransition(): UseNavigateWithTransitionReturns {
     if (document.startViewTransition) {
       const transition = document.startViewTransition(() => {
         navigate(to, {
-          preventScrollReset: true,
           replace: isSameRoute,
           ...options,
         })
+
+        if (options?.preventScrollReset !== true) {
+          window.scrollTo(0, 0)
+        }
       })
 
       transition.finished

package/src/hooks/product/useCuratedProducts.ts

@@ -1,5 +1,5 @@
+import {useShopActionInfiniteQuery} from '../../internal/reactQuery'
 import {useShopActions} from '../../internal/useShopActions'
-import {useShopActionsPaginatedDataFetching} from '../../internal/useShopActionsPaginatedDataFetching'
 import {
   Product,
   PaginatedDataHookOptionsBase,
@@ -25,13 +25,11 @@ export const useCuratedProducts = (
   const {getCuratedProducts} = useShopActions()
   const {skip, ...shopActionParams} = params ?? {}
 
-  const {data, ...rest} = useShopActionsPaginatedDataFetching(
+  const {data, ...rest} = useShopActionInfiniteQuery(
+    ['curatedProducts', shopActionParams],
     getCuratedProducts,
     shopActionParams,
-    {
-      skip,
-      hook: 'useCuratedProducts',
-    }
+    {skip}
   )
 
   return {

package/src/hooks/product/usePopularProducts.ts

@@ -1,5 +1,5 @@
+import {useShopActionInfiniteQuery} from '../../internal/reactQuery'
 import {useShopActions} from '../../internal/useShopActions'
-import {useShopActionsPaginatedDataFetching} from '../../internal/useShopActionsPaginatedDataFetching'
 import {
   Product,
   PaginatedDataHookOptionsBase,
@@ -21,13 +21,11 @@ export const usePopularProducts = (
   const {getPopularProducts} = useShopActions()
   const {skip, ...shopActionParams} = params ?? {}
 
-  const {data, ...rest} = useShopActionsPaginatedDataFetching(
+  const {data, ...rest} = useShopActionInfiniteQuery(
+    ['popularProducts', shopActionParams],
     getPopularProducts,
     shopActionParams,
-    {
-      skip,
-      hook: 'usePopularProducts',
-    }
+    {skip}
   )
 
   return {