@shopify/shop-minis-react 0.4.13 → 0.4.16

package/dist/shop-minis-react/node_modules/.pnpm/querystringify@2.2.0/node_modules/querystringify/index.js

@@ -1,4 +1,4 @@
-import { __exports as i } from "../../../../../../_virtual/index6.js";
+import { __exports as i } from "../../../../../../_virtual/index4.js";
 var c;
 function d() {
   if (c) return i;

package/dist/utils/formatMoney.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"formatMoney.js","sources":["../../src/utils/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;"}

package/eslint/rules/validate-manifest.cjs

@@ -31,8 +31,8 @@ const hookPermissionsMap = {
   useImagePicker: ['CAMERA'],
 }
 
-// Extract domain from URL (returns domain in CSP format)
-function extractDomain(url) {
+// Extract domain and path from URL (returns {hostname, pathname} for CSP matching)
+function extractDomainAndPath(url) {
   if (!url || typeof url !== 'string') return null
 
   try {
@@ -48,25 +48,65 @@ function extractDomain(url) {
 
     // Parse URL
     const urlObj = new URL(url)
-    return urlObj.hostname
+    return {
+      hostname: urlObj.hostname,
+      pathname: urlObj.pathname,
+    }
   } catch (err) {
     // If URL parsing fails, might be a relative path
     return null
   }
 }
 
-// Check if domain matches a pattern (supports wildcards)
-function domainMatchesPattern(domain, pattern) {
+// Check if a URL matches a trusted_domain pattern
+// Supports: wildcards (*.example.com), paths with CSP semantics
+// CSP path matching: path with trailing slash matches directory, without matches exact or prefix
+function urlMatchesPattern(urlInfo, pattern) {
   if (pattern === '*') return true
-  if (pattern === domain) return true
 
-  // Handle wildcard subdomains (*.example.com)
-  if (pattern.startsWith('*.')) {
-    const basePattern = pattern.slice(2)
-    return domain === basePattern || domain.endsWith(`.${basePattern}`)
+  // Parse the pattern to extract hostname and optional path
+  let patternHostname = pattern
+  let patternPath = null
+
+  // Check if pattern contains a path (has / after the domain)
+  const slashIndex = pattern.indexOf('/')
+  if (slashIndex !== -1) {
+    patternHostname = pattern.slice(0, slashIndex)
+    patternPath = pattern.slice(slashIndex)
+  }
+
+  // First check hostname match
+  let hostnameMatches = false
+
+  if (patternHostname === urlInfo.hostname) {
+    hostnameMatches = true
+  } else if (patternHostname.startsWith('*.')) {
+    // Handle wildcard subdomains (*.example.com)
+    const basePattern = patternHostname.slice(2)
+    hostnameMatches =
+      urlInfo.hostname === basePattern ||
+      urlInfo.hostname.endsWith(`.${basePattern}`)
   }
 
-  return false
+  if (!hostnameMatches) {
+    return false
+  }
+
+  // If no path in pattern, hostname match is sufficient
+  if (!patternPath) {
+    return true
+  }
+
+  // CSP path matching semantics:
+  // - Path ending with / matches that directory and everything under it (prefix match)
+  // - Path without trailing / matches exact path only
+  if (patternPath.endsWith('/')) {
+    // Directory match: URL path must start with pattern path
+    return urlInfo.pathname.startsWith(patternPath)
+  } else {
+    // Exact match only
+    return urlInfo.pathname === patternPath
+  }
 }
 
 module.exports = {
@@ -308,10 +348,11 @@ module.exports = {
         // Check for fetch() calls
         if (node.callee.name === 'fetch' && firstArg.type === 'Literal') {
           const url = firstArg.value
-          const domain = extractDomain(url)
-          if (domain) {
+          const urlInfo = extractDomainAndPath(url)
+          if (urlInfo) {
             requiredDomains.add({
-              domain,
+              urlInfo,
+              url,
               reason: 'fetch() call',
               node,
             })
@@ -326,10 +367,11 @@ module.exports = {
           node.arguments[1].type === 'Literal'
         ) {
           const url = node.arguments[1].value
-          const domain = extractDomain(url)
-          if (domain) {
+          const urlInfo = extractDomainAndPath(url)
+          if (urlInfo) {
             requiredDomains.add({
-              domain,
+              urlInfo,
+              url,
               reason: 'XMLHttpRequest.open() call',
               node,
             })
@@ -340,11 +382,12 @@ module.exports = {
         if (node.callee.name === 'WebSocket' && firstArg.type === 'Literal') {
           const url = firstArg.value
           // WebSocket URLs use ws:// or wss://
-          const domain = url.replace(/^wss?:\/\//, 'https://')
-          const extracted = extractDomain(domain)
-          if (extracted) {
+          const normalizedUrl = url.replace(/^wss?:\/\//, 'https://')
+          const urlInfo = extractDomainAndPath(normalizedUrl)
+          if (urlInfo) {
             requiredDomains.add({
-              domain: extracted,
+              urlInfo,
+              url,
               reason: 'WebSocket connection',
               node,
             })
@@ -354,10 +397,11 @@ module.exports = {
         // Check for EventSource
         if (node.callee.name === 'EventSource' && firstArg.type === 'Literal') {
           const url = firstArg.value
-          const domain = extractDomain(url)
-          if (domain) {
+          const urlInfo = extractDomainAndPath(url)
+          if (urlInfo) {
             requiredDomains.add({
-              domain,
+              urlInfo,
+              url,
               reason: 'EventSource connection',
               node,
             })
@@ -371,10 +415,11 @@ module.exports = {
           firstArg.type === 'Literal'
         ) {
           const url = firstArg.value
-          const domain = extractDomain(url)
-          if (domain) {
+          const urlInfo = extractDomainAndPath(url)
+          if (urlInfo) {
             requiredDomains.add({
-              domain,
+              urlInfo,
+              url,
               reason: 'navigator.sendBeacon() call',
               node,
             })
@@ -389,10 +434,11 @@ module.exports = {
           firstArg.type === 'Literal'
         ) {
           const url = firstArg.value
-          const domain = extractDomain(url)
-          if (domain) {
+          const urlInfo = extractDomainAndPath(url)
+          if (urlInfo) {
             requiredDomains.add({
-              domain,
+              urlInfo,
+              url,
               reason: 'window.open() call',
               node,
             })
@@ -499,9 +545,9 @@ module.exports = {
 
         const attrName = node.name.name
         const url = node.value.value
-        const domain = extractDomain(url)
+        const urlInfo = extractDomainAndPath(url)
 
-        if (!domain) {
+        if (!urlInfo) {
           return
         }
 
@@ -522,7 +568,8 @@ module.exports = {
           ]
           if (supportedElements.includes(elementName)) {
             requiredDomains.add({
-              domain,
+              urlInfo,
+              url,
               reason: `<${elementName}> src attribute`,
               node,
             })
@@ -531,7 +578,8 @@ module.exports = {
         // poster attribute (video)
         else if (attrName === 'poster') {
           requiredDomains.add({
-            domain,
+            urlInfo,
+            url,
             reason: `<${elementName}> poster attribute`,
             node,
           })
@@ -539,7 +587,8 @@ module.exports = {
         // data attribute (object)
         else if (attrName === 'data') {
           requiredDomains.add({
-            domain,
+            urlInfo,
+            url,
             reason: `<${elementName}> data attribute`,
             node,
           })
@@ -547,7 +596,8 @@ module.exports = {
         // action attribute (form)
         else if (attrName === 'action') {
           requiredDomains.add({
-            domain,
+            urlInfo,
+            url,
             reason: `<${elementName}> action attribute`,
             node,
           })
@@ -692,26 +742,26 @@ module.exports = {
         })
 
         // Check trusted domains
-        requiredDomains.forEach(({domain, reason, node}) => {
+        requiredDomains.forEach(({urlInfo, url, reason, node}) => {
           if (!manifest) {
             issues.push({
               messageId: 'manifestNotFound',
-              data: {reason, domain},
+              data: {reason, domain: urlInfo.hostname},
             })
             return
           }
 
           const trustedDomains = manifest.trusted_domains || []
 
-          // Check if domain is trusted (supports wildcards)
+          // Check if URL is trusted (supports wildcards and paths)
           const isTrusted = trustedDomains.some(pattern =>
-            domainMatchesPattern(domain, pattern)
+            urlMatchesPattern(urlInfo, pattern)
           )
 
           if (!isTrusted) {
             issues.push({
               type: 'domain',
-              domain,
+              domain: urlInfo.hostname,
               reason,
               node,
             })

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shopify/shop-minis-react",
   "license": "SEE LICENSE IN LICENSE.txt",
-  "version": "0.4.13",
+  "version": "0.4.16",
   "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;"}