@shopify/shop-minis-react 0.2.9 → 0.3.0

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/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/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;"}