@shopify/shop-minis-react 0.2.9 → 0.3.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>

package/src/components/commerce/buy-now.test.tsx

@@ -0,0 +1,272 @@
+import {Product} from '@shopify/shop-minis-platform'
+import {describe, expect, it, vi} from 'vitest'
+
+import {
+  render,
+  screen,
+  mockMinisSDK,
+  resetAllMocks,
+  userEvent,
+  waitFor,
+} from '../../test-utils'
+
+import {BuyNowButton} from './buy-now'
+
+// Mock hooks
+const mockShowErrorToast = vi.fn()
+
+vi.mock('../../internal/useShopCartActions', () => ({
+  useShopCartActions: () => ({
+    addToCart: mockMinisSDK.addToCart,
+    buyProduct: mockMinisSDK.buyProduct,
+  }),
+}))
+
+vi.mock('../../hooks', () => ({
+  useShopNavigation: () => ({
+    navigateToProduct: mockMinisSDK.navigateToProduct,
+  }),
+  useErrorToast: () => ({
+    showErrorToast: mockShowErrorToast,
+  }),
+}))
+
+describe('BuyNowButton', () => {
+  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',
+    },
+  }
+
+  const defaultProps = {
+    product: mockProduct,
+    productVariantId: 'gid://shopify/ProductVariant/456',
+  }
+
+  // eslint-disable-next-line jest/require-top-level-describe
+  beforeEach(() => {
+    resetAllMocks()
+    mockShowErrorToast.mockClear()
+  })
+
+  it('renders with default text', () => {
+    render(<BuyNowButton {...defaultProps} />)
+
+    expect(screen.getByRole('button')).toBeInTheDocument()
+    expect(screen.getByText('Buy now')).toBeInTheDocument()
+  })
+
+  it('renders with required props', () => {
+    render(<BuyNowButton {...defaultProps} />)
+
+    const button = screen.getByRole('button')
+    expect(button).toBeInTheDocument()
+  })
+
+  it('respects disabled prop', () => {
+    render(<BuyNowButton {...defaultProps} disabled />)
+
+    const button = screen.getByRole('button')
+    expect(button).toBeDisabled()
+  })
+
+  it('applies custom className', () => {
+    render(<BuyNowButton {...defaultProps} className="custom-class" />)
+
+    const button = screen.getByRole('button')
+    expect(button).toHaveClass('custom-class')
+  })
+
+  it('renders with different sizes', () => {
+    const {rerender} = render(<BuyNowButton {...defaultProps} size="sm" />)
+
+    expect(screen.getByRole('button')).toBeInTheDocument()
+
+    rerender(<BuyNowButton {...defaultProps} size="default" />)
+    expect(screen.getByRole('button')).toBeInTheDocument()
+
+    rerender(<BuyNowButton {...defaultProps} size="lg" />)
+    expect(screen.getByRole('button')).toBeInTheDocument()
+  })
+
+  it('renders with discount code prop', () => {
+    const discountCode = 'SUMMER20'
+
+    render(<BuyNowButton {...defaultProps} discountCode={discountCode} />)
+
+    expect(screen.getByRole('button')).toBeInTheDocument()
+  })
+
+  it('calls buyProduct when clicked and not a referral product', async () => {
+    const user = userEvent.setup()
+    mockMinisSDK.buyProduct.mockResolvedValueOnce({ok: true})
+
+    render(<BuyNowButton {...defaultProps} />)
+
+    const button = screen.getByRole('button')
+    await user.click(button)
+
+    expect(mockMinisSDK.buyProduct).toHaveBeenCalledWith({
+      productId: mockProduct.id,
+      productVariantId: defaultProps.productVariantId,
+      quantity: 1,
+      discountCode: undefined,
+    })
+  })
+
+  it('navigates to product page when product is referral', async () => {
+    const user = userEvent.setup()
+    const referralProduct: Product = {...mockProduct, referral: true}
+
+    render(<BuyNowButton {...defaultProps} product={referralProduct} />)
+
+    // Button should show "View product" instead of "Buy now"
+    expect(screen.getByText('View product')).toBeInTheDocument()
+    expect(screen.queryByText('Buy now')).not.toBeInTheDocument()
+
+    const button = screen.getByRole('button')
+    await user.click(button)
+
+    expect(mockMinisSDK.navigateToProduct).toHaveBeenCalledWith({
+      productId: referralProduct.id,
+    })
+    expect(mockMinisSDK.buyProduct).not.toHaveBeenCalled()
+  })
+
+  it('shows processing state while purchasing', async () => {
+    const user = userEvent.setup()
+    mockMinisSDK.buyProduct.mockImplementation(() => new Promise(() => {})) // Never resolves
+
+    render(<BuyNowButton {...defaultProps} />)
+
+    const button = screen.getByRole('button')
+    await user.click(button)
+
+    // Check for processing state - button should be disabled and have aria-busy
+    await waitFor(() => {
+      expect(button).toBeDisabled()
+      expect(button).toHaveAttribute('aria-busy', 'true')
+    })
+  })
+
+  it('handles buy product error gracefully', async () => {
+    const user = userEvent.setup()
+    const error = new Error('Purchase failed')
+    mockMinisSDK.buyProduct.mockRejectedValueOnce(error)
+
+    render(<BuyNowButton {...defaultProps} />)
+
+    const button = screen.getByRole('button')
+    await user.click(button)
+
+    await waitFor(() => {
+      expect(mockMinisSDK.buyProduct).toHaveBeenCalled()
+      expect(mockShowErrorToast).toHaveBeenCalledWith({
+        message: 'Failed to complete purchase',
+      })
+    })
+
+    // Button should be enabled again after error
+    expect(button).toBeEnabled()
+    expect(button).toHaveAttribute('aria-busy', 'false')
+  })
+
+  it('does not call buyProduct when disabled', async () => {
+    const user = userEvent.setup()
+
+    render(<BuyNowButton {...defaultProps} disabled />)
+
+    const button = screen.getByRole('button')
+    await user.click(button)
+
+    expect(mockMinisSDK.buyProduct).not.toHaveBeenCalled()
+  })
+
+  it('passes discount code to buyProduct', async () => {
+    const user = userEvent.setup()
+    const discountCode = 'DISCOUNT10'
+    mockMinisSDK.buyProduct.mockResolvedValueOnce({ok: true})
+
+    render(<BuyNowButton {...defaultProps} discountCode={discountCode} />)
+
+    const button = screen.getByRole('button')
+    await user.click(button)
+
+    expect(mockMinisSDK.buyProduct).toHaveBeenCalledWith({
+      productId: mockProduct.id,
+      productVariantId: defaultProps.productVariantId,
+      quantity: 1,
+      discountCode,
+    })
+  })
+
+  it('handles product without shop data', async () => {
+    const user = userEvent.setup()
+    mockMinisSDK.buyProduct.mockResolvedValueOnce({ok: true})
+
+    const productWithoutShop: Product = {
+      ...mockProduct,
+      shop: undefined as any,
+    }
+
+    render(
+      <BuyNowButton
+        product={productWithoutShop}
+        productVariantId="gid://shopify/ProductVariant/456"
+      />
+    )
+
+    const button = screen.getByRole('button')
+    await user.click(button)
+
+    expect(mockMinisSDK.buyProduct).toHaveBeenCalledWith({
+      productId: productWithoutShop.id,
+      productVariantId: 'gid://shopify/ProductVariant/456',
+      quantity: 1,
+      discountCode: undefined,
+    })
+  })
+
+  it('handles product with partial shop data', async () => {
+    const user = userEvent.setup()
+    mockMinisSDK.buyProduct.mockResolvedValueOnce({ok: true})
+
+    const productWithPartialShop: Product = {
+      ...mockProduct,
+      shop: {
+        id: 'gid://shopify/Shop/1',
+        name: undefined as any,
+      },
+    }
+
+    render(
+      <BuyNowButton
+        product={productWithPartialShop}
+        productVariantId="gid://shopify/ProductVariant/456"
+      />
+    )
+
+    const button = screen.getByRole('button')
+    await user.click(button)
+
+    expect(mockMinisSDK.buyProduct).toHaveBeenCalledWith({
+      productId: productWithPartialShop.id,
+      productVariantId: 'gid://shopify/ProductVariant/456',
+      quantity: 1,
+      discountCode: undefined,
+    })
+  })
+})