@shopify/shop-minis-react 0.2.3 → 0.2.6

package/eslint/rules/validate-manifest.cjs

@@ -82,6 +82,10 @@ module.exports = {
     messages: {
       missingScope:
         '{{source}} requires scope "{{scope}}" in src/manifest.json. Add "{{scope}}" to the "scopes" array.',
+      missingScopeProductCard:
+        'Component "ProductCard" requires scope "{{scope}}" in src/manifest.json. Add "{{scope}}" to the "scopes" array or set favoriteButtonDisabled to true on all ProductCard instances.',
+      missingScopeProductLink:
+        'Component "ProductLink" requires scope "{{scope}}" in src/manifest.json. Add "{{scope}}" to the "scopes" array or set hideFavoriteAction to true (or provide a customAction) on all ProductLink instances.',
       missingPermission:
         '{{reason}} requires permission "{{permission}}" in src/manifest.json. Add "{{permission}}" to the "permissions" array.',
       missingTrustedDomain:
@@ -105,6 +109,8 @@ module.exports = {
     const requiredPermissions = new Set()
     const requiredDomains = new Set()
     const fixedIssues = new Set()
+    // Track how components are actually used (e.g., with specific props)
+    const componentUsagePatterns = new Map()
 
     // Check module-level cache first to avoid repeated file I/O
     if (manifestPathCache && fs.existsSync(manifestPathCache)) {
@@ -361,6 +367,78 @@ module.exports = {
         }
       },
 
+      // Track ProductCard and ProductLink usage with disabled favorite functionality
+      JSXElement(node) {
+        const elementName = node.openingElement.name.name
+
+        // Handle ProductCard with favoriteButtonDisabled prop
+        if (elementName === 'ProductCard') {
+          // Check if favoriteButtonDisabled prop is present and true
+          const favoriteDisabledProp = node.openingElement.attributes.find(
+            attr =>
+              attr.type === 'JSXAttribute' &&
+              attr.name?.name === 'favoriteButtonDisabled'
+          )
+
+          const isDisabled =
+            favoriteDisabledProp &&
+            // Shorthand syntax: <ProductCard favoriteButtonDisabled />
+            (favoriteDisabledProp.value === null ||
+              // Explicit true: <ProductCard favoriteButtonDisabled={true} />
+              (favoriteDisabledProp.value?.type === 'JSXExpressionContainer' &&
+                favoriteDisabledProp.value?.expression?.type === 'Literal' &&
+                favoriteDisabledProp.value?.expression?.value === true))
+
+          // Track usage pattern
+          const componentPath = 'commerce/product-card'
+          if (!componentUsagePatterns.has(componentPath)) {
+            componentUsagePatterns.set(componentPath, {
+              allDisabled: true,
+              hasUsage: true,
+            })
+          }
+          const pattern = componentUsagePatterns.get(componentPath)
+          pattern.allDisabled = pattern.allDisabled && isDisabled
+        }
+
+        // Handle ProductLink with hideFavoriteAction or customAction props
+        if (elementName === 'ProductLink') {
+          // Check if hideFavoriteAction prop is present and true
+          const hideFavoriteProp = node.openingElement.attributes.find(
+            attr =>
+              attr.type === 'JSXAttribute' &&
+              attr.name?.name === 'hideFavoriteAction'
+          )
+
+          // Check if customAction prop is present (replaces favorite action)
+          const customActionProp = node.openingElement.attributes.find(
+            attr =>
+              attr.type === 'JSXAttribute' && attr.name?.name === 'customAction'
+          )
+
+          const isFavoriteDisabled =
+            // hideFavoriteAction={true} or shorthand
+            (hideFavoriteProp &&
+              (hideFavoriteProp.value === null || // shorthand
+                (hideFavoriteProp.value?.type === 'JSXExpressionContainer' &&
+                  hideFavoriteProp.value?.expression?.type === 'Literal' &&
+                  hideFavoriteProp.value?.expression?.value === true))) ||
+            // customAction is provided (any truthy value replaces favorites)
+            customActionProp !== undefined
+
+          // Track usage pattern
+          const componentPath = 'commerce/product-link'
+          if (!componentUsagePatterns.has(componentPath)) {
+            componentUsagePatterns.set(componentPath, {
+              allDisabled: true,
+              hasUsage: true,
+            })
+          }
+          const pattern = componentUsagePatterns.get(componentPath)
+          pattern.allDisabled = pattern.allDisabled && isFavoriteDisabled
+        }
+      },
+
       // Check JSX attributes for external URLs
       JSXAttribute(node) {
         if (!node.value || node.value.type !== 'Literal') {
@@ -489,6 +567,18 @@ module.exports = {
         // Check scopes for components
         usedComponents.forEach(
           ({path: componentPath, name: componentName, node}) => {
+            // Special handling for components with conditional favorite functionality
+            if (
+              componentPath === 'commerce/product-card' ||
+              componentPath === 'commerce/product-link'
+            ) {
+              const usagePattern = componentUsagePatterns.get(componentPath)
+              // Skip scope requirement if all usages have favorites disabled
+              if (usagePattern?.hasUsage && usagePattern?.allDisabled) {
+                return // No scope required when favorite functionality is disabled
+              }
+            }
+
             const componentData = componentScopesMap[componentPath]
             if (
               !componentData ||
@@ -597,9 +687,17 @@ module.exports = {
               const sourceName = issue.hookName || issue.componentName
               const sourceType = issue.hookName ? 'Hook' : 'Component'
 
+              // Use custom message for ProductCard and ProductLink
+              let messageId = 'missingScope'
+              if (issue.componentName === 'ProductCard') {
+                messageId = 'missingScopeProductCard'
+              } else if (issue.componentName === 'ProductLink') {
+                messageId = 'missingScopeProductLink'
+              }
+
               context.report({
                 loc: {line: 1, column: 0},
-                messageId: 'missingScope',
+                messageId,
                 data: {
                   source: `${sourceType} "${sourceName}"`,
                   scope: issue.scope,

package/package.json

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

package/src/components/atoms/touchable.tsx

@@ -38,8 +38,10 @@ export const Touchable = ({
 
       // Animate to pressed state
       controls.start({
-        scale: 0.95,
         opacity: 0.7,
+        transition: {
+          opacity: {type: 'tween', duration: 0.08, ease: 'linear'},
+        },
       })
     }
 
@@ -49,8 +51,10 @@ export const Touchable = ({
 
       // Animate back to normal state
       controls.start({
-        scale: 1,
         opacity: 1,
+        transition: {
+          opacity: {type: 'tween', duration: 0.08, ease: 'linear'},
+        },
       })
     }
 
@@ -70,9 +74,8 @@ export const Touchable = ({
       data-touchable="true"
       className="flex w-full"
       animate={stopPropagation ? controls : undefined}
-      whileTap={stopPropagation ? undefined : {scale: 0.95, opacity: 0.7}}
+      whileTap={stopPropagation ? undefined : {opacity: 0.7}}
       transition={{
-        scale: {type: 'tween', duration: 0.08, ease: 'linear'},
         opacity: {type: 'tween', duration: 0.08, ease: 'linear'},
       }}
       onClick={handleClick}

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>
   )
 }