@shopify/shop-minis-react 0.2.7 → 0.3.0

package/dist/internal/useShopCartActions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useShopCartActions.js","sources":["../../src/internal/useShopCartActions.ts"],"sourcesContent":["import {\n  AddToCartParams,\n  BuyProductParams,\n} from '@shopify/shop-minis-platform/actions'\n\nimport {useHandleAction} from './useHandleAction'\nimport {useShopActions} from './useShopActions'\n\ninterface UseShopCartActionsReturns {\n  /**\n   * Add a product to the cart\n   */\n  addToCart: (params: AddToCartParams) => Promise<void>\n  /**\n   * Buy a product directly\n   */\n  buyProduct: (params: BuyProductParams) => Promise<void>\n}\n\nexport const useShopCartActions = (): UseShopCartActionsReturns => {\n  const {addToCart, buyProduct} = useShopActions()\n\n  return {\n    addToCart: useHandleAction(addToCart),\n    buyProduct: useHandleAction(buyProduct),\n  }\n}\n"],"names":["useShopCartActions","addToCart","buyProduct","useShopActions","useHandleAction"],"mappings":";;AAmBO,MAAMA,IAAqB,MAAiC;AACjE,QAAM,EAAC,WAAAC,GAAW,YAAAC,EAAU,IAAIC,EAAe;AAExC,SAAA;AAAA,IACL,WAAWC,EAAgBH,CAAS;AAAA,IACpC,YAAYG,EAAgBF,CAAU;AAAA,EACxC;AACF;"}

package/dist/shop-minis-react/node_modules/.pnpm/@videojs_xhr@2.7.0/node_modules/@videojs/xhr/lib/index.js

@@ -1,4 +1,4 @@
-import { __module as q } from "../../../../../../../../_virtual/index4.js";
+import { __module as q } from "../../../../../../../../_virtual/index5.js";
 import { __require as F } from "../../../../../global@4.4.0/node_modules/global/window.js";
 import { __require as N } from "../../../../../@babel_runtime@7.27.6/node_modules/@babel/runtime/helpers/extends.js";
 import { __require as J } from "../../../../../is-function@1.0.2/node_modules/is-function/index.js";

package/dist/shop-minis-react/node_modules/.pnpm/mpd-parser@1.3.1/node_modules/mpd-parser/dist/mpd-parser.es.js

@@ -2,7 +2,7 @@ import L from "../../../../@videojs_vhs-utils@4.1.1/node_modules/@videojs/vhs-ut
 import T from "../../../../../../../_virtual/window.js";
 import { forEachMediaGroup as Z } from "../../../../@videojs_vhs-utils@4.1.1/node_modules/@videojs/vhs-utils/es/media-groups.js";
 import J from "../../../../@videojs_vhs-utils@4.1.1/node_modules/@videojs/vhs-utils/es/decode-b64-to-uint8-array.js";
-import { l as Q } from "../../../../../../../_virtual/index5.js";
+import { l as Q } from "../../../../../../../_virtual/index6.js";
 /*! @name mpd-parser @version 1.3.1 @license Apache-2.0 */
 const w = (e) => !!e && typeof e == "object", E = (...e) => e.reduce((n, t) => (typeof t != "object" || Object.keys(t).forEach((r) => {
   Array.isArray(n[r]) && Array.isArray(t[r]) ? n[r] = n[r].concat(t[r]) : w(n[r]) && w(t[r]) ? n[r] = E(n[r], t[r]) : n[r] = t[r];

package/dist/shop-minis-react/node_modules/.pnpm/querystringify@2.2.0/node_modules/querystringify/index.js

@@ -1,4 +1,4 @@
-import { __exports as i } from "../../../../../../_virtual/index6.js";
+import { __exports as i } from "../../../../../../_virtual/index4.js";
 var c;
 function d() {
   if (c) return i;

package/dist/shop-minis-react/node_modules/.pnpm/simple-swizzle@0.2.2/node_modules/simple-swizzle/index.js

@@ -1,4 +1,4 @@
-import { __module as t } from "../../../../../../_virtual/index10.js";
+import { __module as t } from "../../../../../../_virtual/index11.js";
 import { __require as z } from "../../../is-arrayish@0.3.2/node_modules/is-arrayish/index.js";
 var l;
 function v() {

package/dist/shop-minis-react/node_modules/.pnpm/use-sync-external-store@1.5.0_react@19.1.0/node_modules/use-sync-external-store/shim/index.js

@@ -1,4 +1,4 @@
-import { __module as r } from "../../../../../../../_virtual/index11.js";
+import { __module as r } from "../../../../../../../_virtual/index10.js";
 import { __require as o } from "../cjs/use-sync-external-store-shim.production.js";
 import { __require as i } from "../cjs/use-sync-external-store-shim.development.js";
 var e;

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.7",
+  "version": "0.3.0",
   "sideEffects": false,
   "type": "module",
   "engines": {
@@ -43,7 +43,7 @@
     "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",

package/src/components/MinisContainer.tsx

@@ -12,18 +12,20 @@ injectMocks()
 
 export function MinisContainer({children}: {children: React.ReactNode}) {
   const [isSDKReady, setIsSDKReady] = useState(false)
-  const {reportError} = useShopActions()
+  const actions = useShopActions()
 
   const handleError = useCallback(
     async (params: ReportErrorParams) => {
       try {
-        await reportError(params)
+        if (actions && actions.reportError) {
+          await actions.reportError(params)
+        }
       } catch (error) {
         // If reporting fails, at least log to console
         console.error('Failed to report error to app:', error)
       }
     },
-    [reportError]
+    [actions]
   )
 
   useEffect(() => {

package/src/components/atoms/product-variant-price.tsx

@@ -8,7 +8,6 @@ export interface ProductVariantPriceProps {
   compareAtPriceCurrencyCode?: string
   currentPriceClassName?: string
   originalPriceClassName?: string
-  containerClassName?: string
   className?: string
 }
 
@@ -19,7 +18,6 @@ export function ProductVariantPrice({
   compareAtPriceCurrencyCode,
   currentPriceClassName,
   originalPriceClassName,
-  containerClassName,
   className,
 }: ProductVariantPriceProps) {
   if (!amount || !currencyCode) {
@@ -34,9 +32,7 @@ export function ProductVariantPrice({
     : undefined
 
   return (
-    <div
-      className={cn('flex items-center gap-2', containerClassName, className)}
-    >
+    <div className={cn('flex items-center gap-2', className)}>
       {hasDiscount ? (
         <>
           <span

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>