@shopify/shop-minis-react 0.0.0-snapshot.20251216112959 → 0.0.0-snapshot.20251217193626

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/image.ts

@@ -18,6 +18,44 @@ export function getThumbhashDataURL(thumbhash?: string): string | undefined {
   }
 }
 
+/**
+ * Converts a data URL to a Blob
+ * @param dataURL The data URL to convert
+ * @returns A Blob object
+ */
+export function dataURLToBlob(dataURL: string): Blob {
+  const [header, base64Data] = dataURL.split(',')
+  const mimeMatch = header.match(/:(.*?);/)
+  const mime = mimeMatch ? mimeMatch[1] : 'image/png'
+  const binary = atob(base64Data)
+  const array = new Uint8Array(binary.length)
+  for (let i = 0; i < binary.length; i++) {
+    array[i] = binary.charCodeAt(i)
+  }
+  return new Blob([array], {type: mime})
+}
+
+/**
+ * Converts a thumbhash string to a blob URL for use as an image placeholder
+ * This is useful when CSP restrictions prevent data URLs
+ * @param thumbhash Base64 encoded thumbhash string
+ * @returns Blob URL that can be used as image source or undefined if conversion fails
+ */
+export function getThumbhashBlobURL(thumbhash?: string): string | undefined {
+  if (!thumbhash) return
+
+  try {
+    const dataURL = getThumbhashDataURL(thumbhash)
+    if (!dataURL) return
+
+    const blob = dataURLToBlob(dataURL)
+    return URL.createObjectURL(blob)
+  } catch (error) {
+    console.warn('Failed to create thumbhash blob URL', error)
+    return undefined
+  }
+}
+
 /** Converts a file to a data URI
  * @param file The file to convert
  * @returns A promise that resolves to the data URI string

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