@shopify/shop-minis-react 0.0.0-snapshot.20251211183509 → 0.0.0-snapshot.20251215163043

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

@@ -58,7 +58,7 @@ function MerchantCardContainer({
         backgroundColor: cardTheme.backgroundColor,
       }}
       className={cn(
-        'relative w-full overflow-hidden rounded-xl bg-white flex flex-col border border-gray-200 aspect-square',
+        'relative w-full overflow-hidden rounded-xl bg-white flex flex-col border border-gray-200 aspect-square isolate',
 
         className
       )}

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

@@ -40,7 +40,7 @@ vi.mock('../../hooks/user/useSavedProductsActions', () => ({
 }))
 
 // Mock formatMoney
-vi.mock('../../lib/formatMoney', () => ({
+vi.mock('../../utils/formatMoney', () => ({
   formatMoney: vi.fn((amount: string, currencyCode: string) => {
     const numAmount = parseFloat(amount)
     return currencyCode === 'USD'

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

@@ -6,8 +6,8 @@ import {type Product, type ProductVariant} from '@shopify/shop-minis-platform'
 import {useShopNavigation} from '../../hooks/navigation/useShopNavigation'
 import {useSavedProductsActions} from '../../hooks/user/useSavedProductsActions'
 import {ProductReviewStars} from '../../internal/components/product-review-stars'
-import {formatMoney} from '../../lib/formatMoney'
 import {cn} from '../../lib/utils'
+import {formatMoney} from '../../utils/formatMoney'
 import {Image} from '../atoms/image'
 import {ProductVariantPrice} from '../atoms/product-variant-price'
 import {Touchable} from '../atoms/touchable'
@@ -61,7 +61,7 @@ function ProductCardContainer({
   const content = (
     <div
       className={cn(
-        'relative size-full overflow-hidden rounded-xl border-0',
+        'relative size-full overflow-hidden rounded-xl border-0 isolate',
         className
       )}
       {...props}

package/src/components/commerce/product-link.test.tsx

@@ -28,7 +28,7 @@ vi.mock('../../hooks/user/useSavedProductsActions', () => ({
 }))
 
 // Mock formatMoney
-vi.mock('../../lib/formatMoney', () => ({
+vi.mock('../../utils/formatMoney', () => ({
   formatMoney: vi.fn((amount: string, currencyCode: string) => {
     const numAmount = parseFloat(amount)
     return currencyCode === 'USD'

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

@@ -7,8 +7,8 @@ import {Slot as SlotPrimitive} from 'radix-ui'
 import {useShopNavigation} from '../../hooks/navigation/useShopNavigation'
 import {useSavedProductsActions} from '../../hooks/user/useSavedProductsActions'
 import {ProductReviewStars} from '../../internal/components/product-review-stars'
-import {formatMoney} from '../../lib/formatMoney'
 import {cn} from '../../lib/utils'
+import {formatMoney} from '../../utils/formatMoney'
 import {Touchable} from '../atoms/touchable'
 import {Card, CardContent, CardAction} from '../ui/card'
 

package/src/hooks/storage/useImageUpload.ts

@@ -107,6 +107,19 @@ export const useImageUpload = (): UseImageUploadReturns => {
         throw new Error(links.error.message)
       }
 
+      if (links.mocked) {
+        // Skip upload and return mock data
+        return [
+          {
+            id: 'uploaded-image-id',
+            imageUrl:
+              'https://cdn.shopify.com/s/files/1/0621/0463/3599/files/Mr._Bean_2007_800x800.jpg?v=1763126175',
+            resourceUrl:
+              'https://cdn.shopify.com/s/files/1/0621/0463/3599/files/Mr._Bean_2007_800x800.jpg?v=1763126175',
+          },
+        ]
+      }
+
       // Upload single file to GCS
       const {error: uploadError} = await uploadFileToGCS(
         processedImageParams,

package/src/mocks.ts

@@ -6,28 +6,50 @@ import {
 } from '@shopify/shop-minis-platform'
 import {ShopActions} from '@shopify/shop-minis-platform/actions'
 
+const SAMPLE_IMAGE_NAMES = [
+  'garnished.jpeg',
+  'bath.jpeg',
+  'teapot.jpg',
+  'shoes.jpeg',
+]
+
+// Simple hash function to get a deterministic index from a string
+const hashString = (str: string): number => {
+  let hash = 0
+  for (let i = 0; i < str.length; i++) {
+    hash = (hash << 5) - hash + str.charCodeAt(i)
+    hash |= 0
+  }
+  return Math.abs(hash)
+}
+
 // Helper functions for common data structures
 export const createProduct = (
   id: string,
   title: string,
   price = '99.99',
   compareAtPrice?: string
-): Product => ({
-  id,
-  title,
-  price: {amount: price, currencyCode: 'USD'},
-  ...(compareAtPrice && {
-    compareAtPrice: {amount: compareAtPrice, currencyCode: 'USD'},
-  }),
-  reviewAnalytics: {averageRating: 4.5, reviewCount: 10},
-  shop: createShop('shop1', 'Mock Shop'),
-  defaultVariantId: `variant-${id}`,
-  isFavorited: false,
-  featuredImage: {
-    url: `https://cdn.shopify.com/static/sample-images/teapot.jpg`,
-    altText: title,
-  },
-})
+): Product => {
+  const imageIndex = hashString(id) % SAMPLE_IMAGE_NAMES.length
+  const imageName = SAMPLE_IMAGE_NAMES[imageIndex]
+
+  return {
+    id,
+    title,
+    price: {amount: price, currencyCode: 'USD'},
+    ...(compareAtPrice && {
+      compareAtPrice: {amount: compareAtPrice, currencyCode: 'USD'},
+    }),
+    reviewAnalytics: {averageRating: 4.5, reviewCount: 10},
+    shop: createShop('shop1', 'Mock Shop'),
+    defaultVariantId: `variant-${id}`,
+    isFavorited: false,
+    featuredImage: {
+      url: `https://cdn.shopify.com/static/sample-images/${imageName}`,
+      altText: title,
+    },
+  }
+}
 
 export const createShop = (
   id: string,
@@ -202,7 +224,11 @@ function makeMockMethod<K extends keyof ShopActions>(
 ): ShopActions[K] {
   return ((params: Parameters<ShopActions[K]>[0]) => {
     logMockAction(String(key), params)
-    return Promise.resolve({ok: true as const, data: result})
+    return Promise.resolve({
+      ok: true as const,
+      data: result,
+      mocked: true,
+    })
   }) as ShopActions[K]
 }
 
@@ -249,6 +275,7 @@ export function makeMockActions(): ShopActions {
     navigateToOrder: undefined,
     navigateToCheckout: undefined,
     createImageUploadLink: {
+      // This action is mocked in the actual hook. See `useImageUpload` for more details.
       targets: [
         {
           url: 'https://example.com/upload',
@@ -262,7 +289,9 @@ export function makeMockActions(): ShopActions {
         {
           id: 'file-123',
           fileStatus: 'READY',
-          image: {url: 'https://example.com/image.jpg'},
+          image: {
+            url: 'https://example.com/image.jpg',
+          },
         },
       ],
     },
@@ -318,6 +347,9 @@ export function makeMockActions(): ShopActions {
       data: [
         createShop('shop-1', 'Amazing Store'),
         createShop('shop-2', 'Best Deals Shop'),
+        createShop('shop-3', 'Great Products'),
+        createShop('shop-4', 'Top Brands'),
+        createShop('shop-5', 'Exclusive Offers'),
       ],
       pageInfo: createPagination(),
     },
@@ -325,6 +357,9 @@ export function makeMockActions(): ShopActions {
       data: [
         createProduct('search-1', 'Search Result 1', '59.99'),
         createProduct('search-2', 'Search Result 2', '89.99'),
+        createProduct('search-3', 'Search Result 3', '119.99'),
+        createProduct('search-4', 'Search Result 4', '149.99'),
+        createProduct('search-5', 'Search Result 5', '179.99'),
       ],
       pageInfo: createPagination(),
     },
@@ -387,11 +422,23 @@ export function makeMockActions(): ShopActions {
       pageInfo: createPagination(),
     },
     getSavedProducts: {
-      data: [createProduct('saved-1', 'Saved Product 1', '49.99')],
+      data: [
+        createProduct('saved-1', 'Saved Product 1', '49.99'),
+        createProduct('saved-2', 'Saved Product 2', '59.99'),
+        createProduct('saved-3', 'Saved Product 3', '69.99'),
+        createProduct('saved-4', 'Saved Product 4', '79.99'),
+        createProduct('saved-5', 'Saved Product 5', '89.99'),
+      ],
       pageInfo: createPagination(),
     },
     getRecentProducts: {
-      data: [createProduct('recent-1', 'Recent Product 1', '59.99')],
+      data: [
+        createProduct('recent-1', 'Recent Product 1', '59.99'),
+        createProduct('recent-2', 'Recent Product 2', '69.99'),
+        createProduct('recent-3', 'Recent Product 3', '79.99'),
+        createProduct('recent-4', 'Recent Product 4', '89.99'),
+        createProduct('recent-5', 'Recent Product 5', '99.99'),
+      ],
       pageInfo: createPagination(),
     },
     getProductSearch: {
@@ -404,7 +451,15 @@ export function makeMockActions(): ShopActions {
       ],
       pageInfo: createPagination(),
     },
-    getProducts: {data: [createProduct('prod-2', 'Product 2', '19.99')]},
+    getProducts: {
+      data: [
+        createProduct('prod-1', 'Product 1', '9.99'),
+        createProduct('prod-2', 'Product 2', '19.99'),
+        createProduct('prod-3', 'Product 3', '29.99'),
+        createProduct('prod-4', 'Product 4', '39.99'),
+        createProduct('prod-5', 'Product 5', '49.99'),
+      ],
+    },
     getProduct: {data: createProduct('prod-1', 'Sample Product')},
     getProductVariants: {
       data: [
@@ -434,11 +489,19 @@ export function makeMockActions(): ShopActions {
       data: createShop('shop-1', 'Sample Shop', {featuredImagesLimit: 4}),
     },
     getRecentShops: {
-      data: [createShop('recent-shop-1', 'Recent Shop 1')],
+      data: [
+        createShop('recent-shop-1', 'Recent Shop 1'),
+        createShop('recent-shop-2', 'Recent Shop 2'),
+        createShop('recent-shop-3', 'Recent Shop 3'),
+      ],
       pageInfo: createPagination(),
     },
     getFollowedShops: {
-      data: [createShop('followed-shop-1', 'Followed Shop 1')],
+      data: [
+        createShop('followed-shop-1', 'Followed Shop 1'),
+        createShop('followed-shop-2', 'Followed Shop 2'),
+        createShop('followed-shop-3', 'Followed Shop 3'),
+      ],
       pageInfo: createPagination(),
     },
     previewProductInAr: undefined,
@@ -522,7 +585,7 @@ export const injectMocks = ({force}: {force?: boolean} = {}) => {
     window.minisSDK = makeMockActions()
     window.minisParams = {
       handle: 'mock-handle',
-      initialUrl: '/mock-initial-url',
+      initialUrl: '/',
       platform: 'web',
     }
   }

package/src/utils/index.ts

@@ -2,3 +2,4 @@ export * from './errors'
 export * from './merchant-card'
 export * from './parseUrl'
 export * from './image'
+export * from './formatMoney'

package/dist/lib/formatMoney.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"formatMoney.js","sources":["../../src/lib/formatMoney.ts"],"sourcesContent":["/**\n * Formats money amount with appropriate currency symbol\n * Uses browser's Intl.NumberFormat for consistent currency formatting\n */\nexport function formatMoney(amount: string, currencyCode: string): string {\n  try {\n    // Use en-US specifically for USD to get $ instead of US$\n    // For other currencies, use browser locale but fallback to en-US\n    const locale =\n      currencyCode === 'USD' ? 'en-US' : navigator.language || 'en-US'\n\n    return new Intl.NumberFormat(locale, {\n      style: 'currency',\n      currency: currencyCode,\n    }).format(Number(amount))\n  } catch (error) {\n    // Fallback if currency code is invalid or not supported\n    console.warn(`Invalid currency code: ${currencyCode}`, error)\n    return `${currencyCode} ${amount}`\n  }\n}\n"],"names":["formatMoney","amount","currencyCode","locale","error"],"mappings":"AAIgB,SAAAA,EAAYC,GAAgBC,GAA8B;AACpE,MAAA;AAGF,UAAMC,IACJD,MAAiB,QAAQ,UAAU,UAAU,YAAY;AAEpD,WAAA,IAAI,KAAK,aAAaC,GAAQ;AAAA,MACnC,OAAO;AAAA,MACP,UAAUD;AAAA,IACX,CAAA,EAAE,OAAO,OAAOD,CAAM,CAAC;AAAA,WACjBG,GAAO;AAEd,mBAAQ,KAAK,0BAA0BF,CAAY,IAAIE,CAAK,GACrD,GAAGF,CAAY,IAAID,CAAM;AAAA,EAAA;AAEpC;"}