@shopify/shop-minis-react 0.2.9 → 0.3.1

package/eslint/rules/prefer-sdk-hooks.cjs

@@ -0,0 +1,131 @@
+/**
+ * ESLint rule to prefer SDK hooks over native browser APIs
+ * @fileoverview Enforce using Shop Minis SDK hooks instead of native browser APIs
+ */
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description:
+        'Prefer Shop Minis SDK hooks over native browser APIs for better compatibility and functionality',
+      category: 'Best Practices',
+      recommended: true,
+    },
+    messages: {
+      preferAsyncStorage:
+        'Use useAsyncStorage from @shopify/shop-minis-react instead of localStorage. The SDK hook provides async storage that works reliably in the Shop mini-app environment.',
+      preferSecureStorage:
+        'Use useSecureStorage from @shopify/shop-minis-react instead of localStorage for sensitive data. The SDK hook provides encrypted storage.',
+    },
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          apis: {
+            type: 'object',
+            description: 'Map of native APIs to SDK hooks',
+            additionalProperties: {
+              type: 'string',
+            },
+          },
+        },
+        additionalProperties: false,
+      },
+    ],
+  },
+
+  create(context) {
+    // Default API mappings
+    const defaultApis = {
+      localStorage: 'useAsyncStorage',
+      sessionStorage: 'useAsyncStorage',
+      // Future additions will go here:
+      // navigator.geolocation: 'useGeolocation',
+      // window.history: 'useNavigation',
+    }
+
+    // Get user configuration or use defaults
+    const options = context.options[0] || {}
+    const apiMap = {
+      ...defaultApis,
+      ...(options.apis || {}),
+    }
+
+    return {
+      MemberExpression(node) {
+        // Check for direct access: localStorage.getItem()
+        if (node.object.type === 'Identifier' && apiMap[node.object.name]) {
+          const apiName = node.object.name
+          const sdkHook = apiMap[apiName]
+
+          context.report({
+            node: node.object,
+            messageId: 'preferAsyncStorage',
+            data: {
+              nativeApi: apiName,
+              sdkHook,
+            },
+          })
+          return
+        }
+
+        // Check for global access: window.localStorage or globalThis.localStorage
+        if (
+          node.object.type === 'MemberExpression' &&
+          node.object.object.type === 'Identifier' &&
+          (node.object.object.name === 'window' ||
+            node.object.object.name === 'globalThis') &&
+          node.object.property.type === 'Identifier' &&
+          apiMap[node.object.property.name]
+        ) {
+          const apiName = node.object.property.name
+          const sdkHook = apiMap[apiName]
+
+          context.report({
+            node: node.object,
+            messageId: 'preferAsyncStorage',
+            data: {
+              nativeApi: apiName,
+              sdkHook,
+            },
+          })
+        }
+      },
+
+      // Also catch direct references to localStorage/sessionStorage
+      Identifier(node) {
+        // Only flag if it's being used, not just referenced in imports
+        const parent = node.parent
+
+        // Skip if it's part of an import statement
+        if (
+          parent.type === 'ImportSpecifier' ||
+          parent.type === 'ImportDefaultSpecifier'
+        ) {
+          return
+        }
+
+        // Skip if it's already part of a MemberExpression (handled above)
+        if (parent.type === 'MemberExpression' && parent.object === node) {
+          return
+        }
+
+        // Check if this is a direct reference to localStorage/sessionStorage
+        if (!apiMap[node.name]) {
+          return
+        }
+
+        // Skip if it's being declared as a variable
+        if (parent.type === 'VariableDeclarator' && parent.init === node) {
+          return
+        }
+
+        context.report({
+          node,
+          messageId: 'preferAsyncStorage',
+        })
+      },
+    }
+  },
+}

package/generated-hook-maps/hook-actions-map.json

@@ -116,10 +116,6 @@
   "useShop": [
     "GET_SHOP"
   ],
-  "useShopCartActions": [
-    "ADD_TO_CART",
-    "BUY_PRODUCT"
-  ],
   "useShopNavigation": [
     "NAVIGATE_TO_PRODUCT",
     "NAVIGATE_TO_SHOP",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shopify/shop-minis-react",
   "license": "SEE LICENSE IN LICENSE.txt",
-  "version": "0.2.9",
+  "version": "0.3.1",
   "sideEffects": false,
   "type": "module",
   "engines": {
@@ -43,26 +43,27 @@
     "typescript": ">=5.0.0"
   },
   "dependencies": {
-    "@shopify/shop-minis-platform": "0.7.0",
+    "@shopify/shop-minis-platform": "0.8.0",
     "@tailwindcss/vite": "4.1.8",
     "@types/color": "3.0.6",
     "@types/lodash": "4.17.20",
     "@types/react-window": "1.8.8",
     "@types/url-parse": "1.4.9",
     "@types/video.js": "7.3.58",
+    "@typescript-eslint/parser": "^7.0.0",
     "@vitejs/plugin-react": "4.5.1",
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
     "color": "4.2.3",
     "embla-carousel-react": "8.6.0",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react": "^7.37.5",
     "js-base64": "3.7.7",
     "lodash": "4.17.21",
     "lucide-react": "0.513.0",
     "motion": "12.17.3",
     "next-themes": "0.4.6",
     "radix-ui": "1.4.2",
-    "eslint": "^8.57.0",
-    "@typescript-eslint/parser": "^7.0.0",
     "react-intersection-observer": "9.13.1",
     "react-resizable-panels": "3.0.2",
     "react-router": "7.7.0",

package/src/components/commerce/add-to-cart.test.tsx

@@ -1,20 +1,72 @@
+import {Product} from '@shopify/shop-minis-platform'
 import {describe, expect, it, vi} from 'vitest'
 
-import {render, screen, mockMinisSDK, resetAllMocks} from '../../test-utils'
+import {
+  render,
+  screen,
+  mockMinisSDK,
+  resetAllMocks,
+  userEvent,
+} from '../../test-utils'
 
 import {AddToCartButton} from './add-to-cart'
 
 // Mock hooks
-vi.mock('../../hooks/shop/useShopCartActions', () => ({
+vi.mock('../../internal/useShopCartActions', () => ({
   useShopCartActions: () => ({
     addToCart: mockMinisSDK.addToCart,
     buyProduct: mockMinisSDK.buyProduct,
   }),
 }))
 
+vi.mock('../../hooks', () => ({
+  useShopNavigation: () => ({
+    navigateToProduct: mockMinisSDK.navigateToProduct,
+  }),
+  useErrorToast: () => ({
+    showErrorToast: vi.fn(),
+  }),
+}))
+
 describe('AddToCartButton', () => {
+  const mockProduct: Product = {
+    id: 'gid://shopify/Product/123',
+    title: 'Test Product',
+    reviewAnalytics: {
+      averageRating: null,
+      reviewCount: null,
+    },
+    shop: {
+      id: 'gid://shopify/Shop/1',
+      name: 'Test Shop',
+    },
+    defaultVariantId: 'gid://shopify/ProductVariant/456',
+    isFavorited: false,
+    price: {
+      amount: '10.00',
+      currencyCode: 'USD',
+    },
+    variants: [
+      {
+        id: 'gid://shopify/ProductVariant/456',
+        title: 'Default',
+        isFavorited: false,
+        price: {
+          amount: '10.00',
+          currencyCode: 'USD',
+        },
+        image: {
+          url: 'https://example.com/variant-image.jpg',
+          altText: null,
+          width: null,
+          height: null,
+        },
+      },
+    ],
+  }
+
   const defaultProps = {
-    productId: 'gid://shopify/Product/123',
+    product: mockProduct,
     productVariantId: 'gid://shopify/ProductVariant/456',
   }
 
@@ -70,4 +122,167 @@ describe('AddToCartButton', () => {
 
     expect(screen.getByRole('button')).toBeInTheDocument()
   })
+
+  it('calls addToCart when clicked and not a referral product', async () => {
+    const user = userEvent.setup()
+    mockMinisSDK.addToCart.mockResolvedValueOnce({ok: true})
+
+    render(<AddToCartButton {...defaultProps} />)
+
+    const button = screen.getByRole('button')
+    await user.click(button)
+
+    expect(mockMinisSDK.addToCart).toHaveBeenCalledWith({
+      productId: mockProduct.id,
+      productVariantId: defaultProps.productVariantId,
+      quantity: 1,
+      discountCodes: undefined,
+      variantImageUrl: 'https://example.com/variant-image.jpg',
+    })
+  })
+
+  it('navigates to product page when product is referral', async () => {
+    const user = userEvent.setup()
+    const referralProduct: Product = {...mockProduct, referral: true}
+
+    render(<AddToCartButton {...defaultProps} product={referralProduct} />)
+
+    const button = screen.getByRole('button')
+    await user.click(button)
+
+    expect(mockMinisSDK.navigateToProduct).toHaveBeenCalledWith({
+      productId: referralProduct.id,
+    })
+    expect(mockMinisSDK.addToCart).not.toHaveBeenCalled()
+  })
+
+  it('shows success animation after adding to cart', async () => {
+    const user = userEvent.setup()
+    mockMinisSDK.addToCart.mockResolvedValueOnce({ok: true})
+
+    render(<AddToCartButton {...defaultProps} />)
+
+    const button = screen.getByRole('button')
+    await user.click(button)
+
+    // Check for success state (Added to cart text)
+    await screen.findByText('Added to cart')
+  })
+
+  it('handles add to cart error gracefully', async () => {
+    const user = userEvent.setup()
+    mockMinisSDK.addToCart.mockRejectedValueOnce(new Error('Failed'))
+
+    render(<AddToCartButton {...defaultProps} />)
+
+    const button = screen.getByRole('button')
+    await user.click(button)
+
+    expect(mockMinisSDK.addToCart).toHaveBeenCalled()
+  })
+
+  it('does not call addToCart when disabled', async () => {
+    const user = userEvent.setup()
+
+    render(<AddToCartButton {...defaultProps} disabled />)
+
+    const button = screen.getByRole('button')
+    await user.click(button)
+
+    expect(mockMinisSDK.addToCart).not.toHaveBeenCalled()
+  })
+
+  it('handles product without variants array', async () => {
+    const user = userEvent.setup()
+    mockMinisSDK.addToCart.mockResolvedValueOnce({ok: true})
+
+    const productWithoutVariants: Product = {
+      ...mockProduct,
+      variants: undefined,
+    }
+
+    render(
+      <AddToCartButton
+        product={productWithoutVariants}
+        productVariantId="gid://shopify/ProductVariant/456"
+      />
+    )
+
+    const button = screen.getByRole('button')
+    await user.click(button)
+
+    expect(mockMinisSDK.addToCart).toHaveBeenCalledWith({
+      productId: productWithoutVariants.id,
+      productVariantId: 'gid://shopify/ProductVariant/456',
+      quantity: 1,
+      discountCodes: undefined,
+      variantImageUrl: undefined,
+    })
+  })
+
+  it('handles product without matching variant in array', async () => {
+    const user = userEvent.setup()
+    mockMinisSDK.addToCart.mockResolvedValueOnce({ok: true})
+
+    const productWithDifferentVariant: Product = {
+      ...mockProduct,
+      variants: [
+        {
+          id: 'gid://shopify/ProductVariant/999',
+          title: 'Different',
+          isFavorited: false,
+          price: {
+            amount: '15.00',
+            currencyCode: 'USD',
+          },
+        },
+      ],
+    }
+
+    render(
+      <AddToCartButton
+        product={productWithDifferentVariant}
+        productVariantId="gid://shopify/ProductVariant/456"
+      />
+    )
+
+    const button = screen.getByRole('button')
+    await user.click(button)
+
+    expect(mockMinisSDK.addToCart).toHaveBeenCalledWith({
+      productId: productWithDifferentVariant.id,
+      productVariantId: 'gid://shopify/ProductVariant/456',
+      quantity: 1,
+      discountCodes: undefined,
+      variantImageUrl: undefined,
+    })
+  })
+
+  it('handles product without shop data', async () => {
+    const user = userEvent.setup()
+    mockMinisSDK.addToCart.mockResolvedValueOnce({ok: true})
+
+    const productWithoutShop: Product = {
+      ...mockProduct,
+      shop: undefined as any,
+    }
+
+    render(
+      <AddToCartButton
+        product={productWithoutShop}
+        productVariantId="gid://shopify/ProductVariant/456"
+      />
+    )
+
+    const button = screen.getByRole('button')
+    await user.click(button)
+
+    expect(mockMinisSDK.addToCart).toHaveBeenCalledWith({
+      productId: productWithoutShop.id,
+      productVariantId: 'gid://shopify/ProductVariant/456',
+      quantity: 1,
+      discountCodes: undefined,
+      variantImageUrl: 'https://example.com/variant-image.jpg',
+    })
+  })
 })

package/src/components/commerce/add-to-cart.tsx

@@ -1,10 +1,12 @@
 import * as React from 'react'
 import {useState, useCallback} from 'react'
 
+import {Product} from '@shopify/shop-minis-platform'
 import {CheckIcon} from 'lucide-react'
 import {motion, AnimatePresence} from 'motion/react'
 
-import {useErrorToast, useShopCartActions} from '../../hooks'
+import {useErrorToast, useShopNavigation} from '../../hooks'
+import {useShopCartActions} from '../../internal/useShopCartActions'
 import {cn} from '../../lib/utils'
 import {Button} from '../atoms/button'
 
@@ -16,42 +18,58 @@ interface AddToCartButtonProps {
    * The discount codes to apply to the cart.
    */
   discountCodes?: string[]
-  /**
-   * The GID of the product. E.g. `gid://shopify/Product/123`.
-   */
-  productId: string
   /**
    * The GID of the product variant. E.g. `gid://shopify/ProductVariant/456`.
    */
   productVariantId: string
+
+  /**
+   * The product to add to the cart.
+   */
+  product?: Product
 }
 
 export function AddToCartButton({
   disabled = false,
   className,
   size = 'default',
-  productId,
   productVariantId,
   discountCodes,
+  product,
 }: AddToCartButtonProps) {
   const {addToCart} = useShopCartActions()
+  const {navigateToProduct} = useShopNavigation()
   const [isAdded, setIsAdded] = useState(false)
   const timeoutRef = React.useRef<number | undefined>(undefined)
+  const {id, referral, variants} = product ?? {}
+
+  const variantImageUrl = variants?.find(
+    variant => variant.id === productVariantId
+  )?.image?.url
 
   const {showErrorToast} = useErrorToast()
 
   const handleClick = useCallback(async () => {
-    if (isAdded || disabled) return
+    if (disabled) return
+
+    if (id && referral) {
+      navigateToProduct({
+        productId: id,
+      })
+
+      return
+    }
+
+    if (isAdded) return
 
     try {
-      // Call the callback if provided
-      if (productId && productVariantId) {
-        // Optimistic update with error toast
+      if (id && productVariantId) {
         addToCart({
-          productId,
+          productId: id,
           productVariantId,
           quantity: 1,
           discountCodes,
+          variantImageUrl,
         })
           .then(() => {})
           .catch(() => {
@@ -77,12 +95,15 @@ export function AddToCartButton({
       console.error('Failed to add to cart:', error)
     }
   }, [
-    isAdded,
     disabled,
-    addToCart,
-    productId,
+    id,
+    referral,
+    isAdded,
+    navigateToProduct,
     productVariantId,
+    addToCart,
     discountCodes,
+    variantImageUrl,
     showErrorToast,
   ])
 
@@ -95,6 +116,9 @@ export function AddToCartButton({
     }
   }, [])
 
+  const addToCartText = isAdded ? 'Added to cart' : 'Add to cart'
+  const buttonText = referral ? 'View product' : addToCartText
+
   return (
     <Button
       onClick={handleClick}
@@ -116,7 +140,7 @@ export function AddToCartButton({
                 duration: 0.4,
                 ease: [0.175, 0.885, 0.32, 1.275], // bounce effect
               }}
-              className="absolute left-0"
+              className="absolute left-2"
               style={{x: -8}}
             >
               <CheckIcon className="size-4" />
@@ -124,7 +148,7 @@ export function AddToCartButton({
           )}
         </AnimatePresence>
         <span className={cn(isAdded && 'pl-5', 'transition-all duration-300')}>
-          {isAdded ? 'Added to cart' : 'Add to cart'}
+          {buttonText}
         </span>
       </div>
     </Button>