@shopify/shop-minis-react 0.2.5 → 0.2.6

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shopify/shop-minis-react",
   "license": "SEE LICENSE IN LICENSE.txt",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "sideEffects": false,
   "type": "module",
   "engines": {

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

@@ -147,6 +147,33 @@ describe('ProductCard', () => {
 
       expect(screen.getByText('No Image')).toBeInTheDocument()
     })
+
+    it('renders favorite button by default', () => {
+      const product = mockProduct()
+      render(<ProductCard product={product} />)
+
+      // Favorite button should be present
+      const favoriteButton = screen.getByRole('button')
+      expect(favoriteButton).toBeInTheDocument()
+    })
+
+    it('hides favorite button when favoriteButtonDisabled is true', () => {
+      const product = mockProduct()
+      render(<ProductCard product={product} favoriteButtonDisabled />)
+
+      // Favorite button should not be present
+      const favoriteButton = screen.queryByRole('button')
+      expect(favoriteButton).not.toBeInTheDocument()
+    })
+
+    it('shows favorite button when favoriteButtonDisabled is false', () => {
+      const product = mockProduct()
+      render(<ProductCard product={product} favoriteButtonDisabled={false} />)
+
+      // Favorite button should be present
+      const favoriteButton = screen.getByRole('button')
+      expect(favoriteButton).toBeInTheDocument()
+    })
   })
 
   describe('Interactions', () => {
@@ -262,6 +289,28 @@ describe('ProductCard', () => {
         expect(favoriteButton).toHaveClass('bg-button-overlay/30')
       })
     })
+
+    it('does not allow favorite toggle when favoriteButtonDisabled is true', async () => {
+      const product = mockProduct({isFavorited: false})
+      const onFavoriteToggled = vi.fn()
+
+      render(
+        <ProductCard
+          product={product}
+          favoriteButtonDisabled
+          onFavoriteToggled={onFavoriteToggled}
+        />
+      )
+
+      // Button should not exist at all
+      const favoriteButton = screen.queryByRole('button')
+      expect(favoriteButton).not.toBeInTheDocument()
+
+      // Callbacks should not be called
+      expect(onFavoriteToggled).not.toHaveBeenCalled()
+      expect(mockMinisSDK.saveProduct).not.toHaveBeenCalled()
+      expect(mockMinisSDK.unsaveProduct).not.toHaveBeenCalled()
+    })
   })
 
   describe('Custom Composition', () => {
@@ -307,6 +356,25 @@ describe('ProductCard', () => {
       expect(screen.getByText(product.title)).toBeInTheDocument()
       expect(screen.getByText('$99.99')).toBeInTheDocument()
     })
+
+    it('respects favoriteButtonDisabled in custom composition', () => {
+      const product = mockProduct()
+
+      render(
+        <ProductCard product={product} favoriteButtonDisabled>
+          <ProductCardContainer>
+            <ProductCardImageContainer>
+              <ProductCardImage />
+              <ProductCardFavoriteButton />
+            </ProductCardImageContainer>
+          </ProductCardContainer>
+        </ProductCard>
+      )
+
+      // Favorite button should not be rendered even when explicitly included
+      const favoriteButton = screen.queryByRole('button')
+      expect(favoriteButton).not.toBeInTheDocument()
+    })
   })
 
   describe('Edge Cases', () => {

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

@@ -28,6 +28,7 @@ interface ProductCardContextValue {
 
   // State
   isFavorited: boolean
+  isFavoriteButtonDisabled: boolean
 
   // Actions
   onClick: () => void
@@ -194,7 +195,10 @@ function ProductCardFavoriteButton({
   className,
   ...props
 }: React.ComponentProps<'div'>) {
-  const {isFavorited, onFavoriteToggle} = useProductCardContext()
+  const {isFavorited, isFavoriteButtonDisabled, onFavoriteToggle} =
+    useProductCardContext()
+  if (isFavoriteButtonDisabled) return null
+
   return (
     <div className={cn('absolute bottom-3 right-3 z-10', className)} {...props}>
       <FavoriteButton onClick={onFavoriteToggle} filled={isFavorited} />
@@ -292,6 +296,8 @@ export interface ProductCardProps {
   onFavoriteToggled?: (isFavorited: boolean) => void
   /** Custom layout via children */
   children?: React.ReactNode
+  /** Whether the favorite button is disabled */
+  favoriteButtonDisabled?: boolean
 }
 
 function ProductCard({
@@ -304,6 +310,7 @@ function ProductCard({
   onProductClick,
   onFavoriteToggled,
   children,
+  favoriteButtonDisabled = false,
 }: ProductCardProps) {
   const {navigateToProduct} = useShopNavigation()
   const {saveProduct, unsaveProduct} = useSavedProductsActions()
@@ -374,7 +381,7 @@ function ProductCard({
 
       // State
       isFavorited: isFavoritedLocal,
-
+      isFavoriteButtonDisabled: favoriteButtonDisabled,
       // Actions
       onClick: handleClick,
       onFavoriteToggle: handleFavoriteClick,
@@ -389,6 +396,7 @@ function ProductCard({
       isFavoritedLocal,
       handleClick,
       handleFavoriteClick,
+      favoriteButtonDisabled,
     ]
   )
 

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

@@ -184,6 +184,53 @@ describe('ProductLink', () => {
       // Should not have favorite button
       expect(screen.queryByRole('button')).not.toBeInTheDocument()
     })
+
+    it('renders custom action when provided', () => {
+      const product = mockProduct()
+      const onCustomActionClick = vi.fn()
+      render(
+        <ProductLink
+          product={product}
+          customAction={
+            <button type="button" data-testid="custom-cta">
+              Add to Cart
+            </button>
+          }
+          onCustomActionClick={onCustomActionClick}
+        />
+      )
+
+      // Custom action should be rendered
+      expect(screen.getByTestId('custom-cta')).toBeInTheDocument()
+      expect(screen.getByText('Add to Cart')).toBeInTheDocument()
+
+      // Favorite button should not be rendered when custom action is present
+      // Check that there's only one button (the custom one)
+      const buttons = screen.getAllByRole('button')
+      expect(buttons).toHaveLength(1)
+      expect(buttons[0]).toHaveAttribute('data-testid', 'custom-cta')
+    })
+
+    it('renders custom action even when hideFavoriteAction is true', () => {
+      const product = mockProduct()
+      const onCustomActionClick = vi.fn()
+      render(
+        <ProductLink
+          product={product}
+          hideFavoriteAction
+          customAction={
+            <button type="button" data-testid="custom-action">
+              Buy Now
+            </button>
+          }
+          onCustomActionClick={onCustomActionClick}
+        />
+      )
+
+      // Custom action should still be rendered
+      expect(screen.getByTestId('custom-action')).toBeInTheDocument()
+      expect(screen.getByText('Buy Now')).toBeInTheDocument()
+    })
   })
 
   describe('Interactions', () => {
@@ -313,6 +360,40 @@ describe('ProductLink', () => {
       expect(onClick).not.toHaveBeenCalled()
       expect(mockMinisSDK.navigateToProduct).not.toHaveBeenCalled()
     })
+
+    it('calls onCustomActionClick when custom action is clicked', async () => {
+      const user = userEvent.setup()
+      const product = mockProduct()
+      const onClick = vi.fn()
+      const onCustomActionClick = vi.fn()
+
+      render(
+        <ProductLink
+          product={product}
+          onClick={onClick}
+          customAction={
+            <button type="button" data-testid="custom-btn">
+              Quick Add
+            </button>
+          }
+          onCustomActionClick={onCustomActionClick}
+        />
+      )
+
+      const customButton = screen.getByTestId('custom-btn')
+      await user.click(customButton)
+
+      // Should call custom action handler
+      expect(onCustomActionClick).toHaveBeenCalledTimes(1)
+
+      // Should NOT call favorite save/unsave
+      expect(mockMinisSDK.saveProduct).not.toHaveBeenCalled()
+      expect(mockMinisSDK.unsaveProduct).not.toHaveBeenCalled()
+
+      // Should NOT trigger product navigation
+      expect(onClick).not.toHaveBeenCalled()
+      expect(mockMinisSDK.navigateToProduct).not.toHaveBeenCalled()
+    })
   })
 
   describe('Star Rating Display', () => {

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

@@ -194,13 +194,21 @@ function ProductLinkRating({className, ...props}: React.ComponentProps<'div'>) {
 
 function ProductLinkActions({
   className,
+  hideFavoriteAction = false,
   onPress,
   filled = false,
+  customAction,
   ...props
 }: React.ComponentProps<typeof CardAction> & {
+  hideFavoriteAction?: boolean
   onPress?: () => void
   filled?: boolean
+  customAction?: React.ReactNode
 }) {
+  const favoriteAction = hideFavoriteAction ? null : (
+    <FavoriteButton filled={filled} onClick={onPress} />
+  )
+
   return (
     <CardAction
       className={cn('flex-shrink-0 self-center px-0 py-0', className)}
@@ -215,23 +223,34 @@ function ProductLinkActions({
           scale: {type: 'tween', duration: 0.08, ease: 'easeInOut'},
         }}
       >
-        <FavoriteButton filled={filled} onClick={onPress} />
+        {customAction ? <>{customAction}</> : favoriteAction}
       </Touchable>
     </CardAction>
   )
 }
 
-export interface ProductLinkProps {
+export type ProductLinkProps = {
   product: Product
   hideFavoriteAction?: boolean
   onClick?: (product: Product) => void
-}
+} & (
+  | {
+      customAction?: never
+      onCustomActionClick?: never
+    }
+  | {
+      customAction: React.ReactNode
+      onCustomActionClick: () => void
+    }
+)
 
 // Composed ProductLink component
 function ProductLink({
   product,
   hideFavoriteAction = false,
   onClick,
+  customAction,
+  onCustomActionClick,
 }: ProductLinkProps) {
   const {navigateToProduct} = useShopNavigation()
   const {saveProduct, unsaveProduct} = useSavedProductsActions()
@@ -272,6 +291,11 @@ function ProductLink({
   }, [navigateToProduct, id, onClick, product])
 
   const handleActionPress = React.useCallback(async () => {
+    if (customAction || onCustomActionClick) {
+      onCustomActionClick?.()
+      return
+    }
+
     const previousState = isFavoritedLocal
 
     // Optimistic update
@@ -296,13 +320,15 @@ function ProductLink({
       setIsFavoritedLocal(previousState)
     }
   }, [
+    customAction,
+    onCustomActionClick,
     isFavoritedLocal,
+    unsaveProduct,
     id,
     shop.id,
     selectedVariant?.id,
     defaultVariantId,
     saveProduct,
-    unsaveProduct,
   ])
 
   return (
@@ -366,12 +392,12 @@ function ProductLink({
         </ProductLinkPrice>
       </ProductLinkInfo>
 
-      {hideFavoriteAction ? null : (
-        <ProductLinkActions
-          filled={isFavoritedLocal}
-          onPress={handleActionPress}
-        />
-      )}
+      <ProductLinkActions
+        filled={isFavoritedLocal}
+        onPress={handleActionPress}
+        customAction={customAction}
+        hideFavoriteAction={hideFavoriteAction}
+      />
     </ProductLinkRoot>
   )
 }