@shopify/shop-minis-react 0.2.7 → 0.3.0

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

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

@@ -0,0 +1,108 @@
+import {useState, useCallback} from 'react'
+
+import {Product} from '@shopify/shop-minis-platform'
+import {motion, AnimatePresence} from 'motion/react'
+
+import {useErrorToast, useShopNavigation} from '../../hooks'
+import {useShopCartActions} from '../../internal/useShopCartActions'
+import {cn} from '../../lib/utils'
+import {Button} from '../atoms/button'
+
+interface BuyNowButtonProps {
+  disabled?: boolean
+  className?: string
+  size?: 'default' | 'sm' | 'lg'
+  /**
+   * The discount code to apply to the purchase.
+   */
+  discountCode?: string
+  /**
+   * The GID of the product variant. E.g. `gid://shopify/ProductVariant/456`.
+   */
+  productVariantId: string
+  /**
+   * The product to buy now.
+   */
+  product?: Product
+}
+
+export function BuyNowButton({
+  disabled = false,
+  className,
+  size = 'default',
+  productVariantId,
+  discountCode,
+  product,
+}: BuyNowButtonProps) {
+  const {buyProduct} = useShopCartActions()
+  const {navigateToProduct} = useShopNavigation()
+  const [isPurchasing, setIsPurchasing] = useState(false)
+  const {id, referral} = product ?? {}
+
+  const {showErrorToast} = useErrorToast()
+
+  const handleClick = useCallback(async () => {
+    if (disabled) return
+
+    if (id && referral) {
+      navigateToProduct({
+        productId: id,
+      })
+
+      return
+    }
+
+    if (isPurchasing) return
+
+    try {
+      if (id && productVariantId) {
+        setIsPurchasing(true)
+
+        await buyProduct({
+          productId: id,
+          productVariantId,
+          quantity: 1,
+          discountCode,
+        })
+
+        setIsPurchasing(false)
+      }
+    } catch (error) {
+      showErrorToast({message: 'Failed to complete purchase'})
+      setIsPurchasing(false)
+    }
+  }, [
+    disabled,
+    id,
+    referral,
+    isPurchasing,
+    navigateToProduct,
+    productVariantId,
+    buyProduct,
+    discountCode,
+    showErrorToast,
+  ])
+
+  return (
+    <Button
+      onClick={handleClick}
+      disabled={disabled || isPurchasing}
+      className={cn('relative overflow-hidden', className)}
+      size={size}
+      aria-live="polite"
+      aria-busy={isPurchasing}
+    >
+      <AnimatePresence mode="wait">
+        <motion.span
+          key="text"
+          initial={{opacity: 0, y: 10}}
+          animate={{opacity: 1, y: 0}}
+          exit={{opacity: 0, y: -10}}
+          transition={{duration: 0.2}}
+        >
+          {referral ? 'View product' : 'Buy now'}
+        </motion.span>
+      </AnimatePresence>
+    </Button>
+  )
+}

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

@@ -59,7 +59,7 @@ function ProductCardContainer({
   const content = (
     <div
       className={cn(
-        'relative w-full overflow-hidden rounded-xl border-0',
+        'relative size-full overflow-hidden rounded-xl border-0',
         className
       )}
       {...props}
@@ -93,10 +93,8 @@ function ProductCardImageContainer({
     <div
       data-slot="product-card-image-container"
       className={cn(
-        // Ensure the product image is stretched to the full size of the container (can't use width/height: 100% because of flex)
-        'flex justify-stretch items-stretch',
         'relative overflow-hidden rounded-xl border border-gray-200',
-        'w-full  aspect-square',
+        'aspect-square',
         variant === 'compact' ? 'min-h-[104px]' : 'min-h-[134px]',
         className
       )}
@@ -123,7 +121,8 @@ function ProductCardImage({className, ...props}: React.ComponentProps<'img'>) {
           alt={alt}
           aspectRatio={1}
           thumbhash={thumbhash}
-          className={cn('size-full object-cover', className)}
+          objectFit="cover"
+          className={cn('size-full', className)}
           {...props}
         />
       ) : (
@@ -131,7 +130,7 @@ function ProductCardImage({className, ...props}: React.ComponentProps<'img'>) {
           data-slot="product-card-image"
           src={src}
           alt={alt}
-          className={cn('size-full', className)}
+          className={cn('size-full object-cover', className)}
           {...props}
         />
       )

package/src/components/index.ts

@@ -1,6 +1,7 @@
 export * from './MinisContainer'
 
 export * from './commerce/add-to-cart'
+export * from './commerce/buy-now'
 export * from './commerce/product-card'
 export * from './commerce/product-link'
 export * from './commerce/merchant-card'

package/src/hooks/index.ts

@@ -36,7 +36,6 @@ export * from './navigation/useNavigateWithTransition'
 
 // - Shop Hooks
 export * from './shop/useShop'
-export * from './shop/useShopCartActions'
 export * from './shop/useRecommendedShops'
 
 // - Content Hooks

package/src/{hooks/shop → internal}/useShopCartActions.ts

@@ -3,8 +3,8 @@ import {
   BuyProductParams,
 } from '@shopify/shop-minis-platform/actions'
 
-import {useHandleAction} from '../../internal/useHandleAction'
-import {useShopActions} from '../../internal/useShopActions'
+import {useHandleAction} from './useHandleAction'
+import {useShopActions} from './useShopActions'
 
 interface UseShopCartActionsReturns {
   /**

package/src/stories/AddToCart.stories.tsx

@@ -1,7 +1,29 @@
+import {Product} from '@shopify/shop-minis-platform'
+
 import {AddToCartButton} from '../components/commerce/add-to-cart'
 
 import type {Meta, StoryObj} from '@storybook/react-vite'
 
+// Mock product for stories
+const mockProduct: Product = {
+  id: 'gid://shopify/Product/123',
+  title: 'Test Product',
+  reviewAnalytics: {
+    averageRating: 4.5,
+    reviewCount: 100,
+  },
+  shop: {
+    id: 'gid://shopify/Shop/1',
+    name: 'Test Shop',
+  },
+  defaultVariantId: 'gid://shopify/ProductVariant/456',
+  isFavorited: false,
+  price: {
+    amount: '29.99',
+    currencyCode: 'USD',
+  },
+}
+
 const meta = {
   title: 'Commerce/AddToCartButton',
   component: AddToCartButton,
@@ -21,9 +43,9 @@ const meta = {
       control: 'text',
       description: 'Additional CSS classes',
     },
-    productId: {
-      control: 'text',
-      description: 'The GID of the product (e.g. gid://shopify/Product/123)',
+    product: {
+      control: 'object',
+      description: 'The product object containing product details',
     },
     productVariantId: {
       control: 'text',
@@ -38,7 +60,7 @@ const meta = {
   args: {
     disabled: false,
     size: 'default',
-    productId: 'gid://shopify/Product/123',
+    product: mockProduct,
     productVariantId: 'gid://shopify/ProductVariant/456',
   },
 } satisfies Meta<typeof AddToCartButton>
@@ -97,6 +119,23 @@ export const Disabled: Story = {
   },
 }
 
+export const ReferralProduct: Story = {
+  args: {
+    product: {...mockProduct, referral: true},
+  },
+  render: args => {
+    return (
+      <div className="space-y-2">
+        <p className="text-sm text-gray-600">
+          This is a referral product - button shows &ldquo;View product&rdquo;
+          instead
+        </p>
+        <AddToCartButton {...args} />
+      </div>
+    )
+  },
+}
+
 export const CustomStyling: Story = {
   args: {
     className: 'bg-purple-600 hover:bg-purple-700 text-white rounded-full px-8',
@@ -120,17 +159,17 @@ export const AllSizes: Story = {
         <h3 className="text-lg font-semibold">Button Sizes</h3>
         <div className="flex gap-4 items-center">
           <AddToCartButton
-            productId="gid://shopify/Product/123"
+            product={mockProduct}
             productVariantId="gid://shopify/ProductVariant/456"
             size="sm"
           />
           <AddToCartButton
-            productId="gid://shopify/Product/123"
+            product={mockProduct}
             productVariantId="gid://shopify/ProductVariant/456"
             size="default"
           />
           <AddToCartButton
-            productId="gid://shopify/Product/123"
+            product={mockProduct}
             productVariantId="gid://shopify/ProductVariant/456"
             size="lg"
           />
@@ -142,6 +181,32 @@ export const AllSizes: Story = {
 
 export const InteractiveExample: Story = {
   render: () => {
+    const productA: Product = {
+      ...mockProduct,
+      id: 'gid://shopify/Product/111',
+      title: 'Product A',
+    }
+
+    const productB: Product = {
+      ...mockProduct,
+      id: 'gid://shopify/Product/222',
+      title: 'Product B',
+      price: {
+        amount: '49.99',
+        currencyCode: 'USD',
+      },
+    }
+
+    const productC: Product = {
+      ...mockProduct,
+      id: 'gid://shopify/Product/333',
+      title: 'Product C',
+      price: {
+        amount: '19.99',
+        currencyCode: 'USD',
+      },
+    }
+
     return (
       <div className="flex flex-col items-center space-y-6 p-8">
         <div className="text-center">
@@ -155,7 +220,7 @@ export const InteractiveExample: Story = {
           <div className="text-center">
             <p className="text-xs text-gray-500 mb-2">Product A</p>
             <AddToCartButton
-              productId="gid://shopify/Product/111"
+              product={productA}
               productVariantId="gid://shopify/ProductVariant/111"
             />
           </div>
@@ -165,7 +230,7 @@ export const InteractiveExample: Story = {
               Product B (with discount)
             </p>
             <AddToCartButton
-              productId="gid://shopify/Product/222"
+              product={productB}
               productVariantId="gid://shopify/ProductVariant/222"
               discountCodes={['SAVE10']}
             />
@@ -174,7 +239,7 @@ export const InteractiveExample: Story = {
           <div className="text-center">
             <p className="text-xs text-gray-500 mb-2">Product C (small size)</p>
             <AddToCartButton
-              productId="gid://shopify/Product/333"
+              product={productC}
               productVariantId="gid://shopify/ProductVariant/333"
               size="sm"
             />

package/src/stories/ProductVariantPrice.stories.tsx

@@ -34,9 +34,6 @@ const meta = {
     originalPriceClassName: {
       control: 'text',
     },
-    containerClassName: {
-      control: 'text',
-    },
   },
   tags: ['autodocs'],
 } satisfies Meta<ProductVariantPriceProps>
@@ -68,6 +65,6 @@ export const CustomStyling: Story = {
     compareAtPriceAmount: '119.99',
     currentPriceClassName: 'text-2xl font-bold text-green-600',
     originalPriceClassName: 'text-lg text-red-500 line-through',
-    containerClassName: 'gap-3 p-4 bg-gray-50 rounded-lg',
+    className: 'gap-3 p-4 bg-gray-50 rounded-lg',
   },
 }

package/dist/hooks/shop/useShopCartActions.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useShopCartActions.js","sources":["../../../src/hooks/shop/useShopCartActions.ts"],"sourcesContent":["import {\n  AddToCartParams,\n  BuyProductParams,\n} from '@shopify/shop-minis-platform/actions'\n\nimport {useHandleAction} from '../../internal/useHandleAction'\nimport {useShopActions} from '../../internal/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;"}