@shopify/shop-minis-react 0.4.12 → 0.4.15

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shopify/shop-minis-react",
   "license": "SEE LICENSE IN LICENSE.txt",
-  "version": "0.4.12",
+  "version": "0.4.15",
   "sideEffects": false,
   "type": "module",
   "engines": {
@@ -46,7 +46,7 @@
     "typescript": ">=5.0.0"
   },
   "dependencies": {
-    "@shopify/shop-minis-platform": "0.8.2",
+    "@shopify/shop-minis-platform": "0.8.3",
     "@tailwindcss/vite": "4.1.8",
     "@tanstack/react-query": "5.86.0",
     "@types/color": "3.0.6",

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

@@ -5,7 +5,7 @@ import {render, screen} from '../../test-utils'
 import {ProductVariantPrice} from './product-variant-price'
 
 // Mock formatMoney function
-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/atoms/product-variant-price.tsx

@@ -1,5 +1,5 @@
-import {formatMoney} from '../../lib/formatMoney'
 import {cn} from '../../lib/utils'
+import {formatMoney} from '../../utils/formatMoney'
 
 export interface ProductVariantPriceProps {
   amount: number | string

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'

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',
+          },
         },
       ],
     },
@@ -556,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;"}