@shopify/shop-minis-react 0.0.25 → 0.0.26

package/dist/mocks.js.map

@@ -1 +1 @@
-{"version":3,"file":"mocks.js","sources":["../src/mocks.ts"],"sourcesContent":["import {Product, Gender} from '@shopify/shop-minis-platform'\nimport {ShopActions} from '@shopify/shop-minis-platform/actions'\n\n// Helper functions for common data structures\nexport const createProduct = (\n  id: string,\n  title: string,\n  price = '99.99',\n  compareAtPrice?: string\n): Product => ({\n  id,\n  title,\n  price: {amount: price, currencyCode: 'USD'},\n  ...(compareAtPrice && {\n    compareAtPrice: {amount: compareAtPrice, currencyCode: 'USD'},\n  }),\n  reviewAnalytics: {averageRating: 4.5, reviewCount: 10},\n  shop: createShop('shop1', 'Mock Shop'),\n  defaultVariantId: `variant-${id}`,\n  isFavorited: false,\n  featuredImage: {\n    url: `https://cdn.shopify.com/s/files/1/0621/0463/3599/files/61ChhrRjK9L._AC_SL1000_1639abe8-4cd3-4bee-9867-73f26b0acf0a.jpg?v=1702559955`,\n    altText: title,\n  },\n})\n\nexport const createShop = (\n  id: string,\n  name: string,\n  options?: {\n    themeType?: 'coverImage' | 'brandColor' | 'logoColor' | 'none'\n    withBrandSettings?: boolean\n    primaryColor?: string\n    logoDominantColor?: string\n    logoAverageColor?: string\n    coverDominantColor?: string\n    wordmarkUrl?: string\n    coverImageUrl?: string\n    featuredImagesLimit?: number\n  }\n) => {\n  // Determine theme configuration\n  const themeType = options?.themeType || 'none'\n  const shouldHaveBrandSettings =\n    options?.withBrandSettings || themeType !== 'none'\n\n  // Generate featured images\n  const featuredImagesCount = options?.featuredImagesLimit || 3\n  const featuredImages = Array.from({length: featuredImagesCount}, (_, i) => ({\n    url: `https://picsum.photos/400/400?random=${id}-${i}`,\n    sensitive: false,\n    altText: `${name} featured image ${i + 1}`,\n  }))\n\n  // Configure colors based on theme type\n  const getThemeColors = () => {\n    switch (themeType) {\n      case 'coverImage':\n        return {\n          primary: options?.primaryColor,\n          logoDominant: options?.logoDominantColor,\n          logoAverage: options?.logoAverageColor,\n          coverDominant: options?.coverDominantColor || '#FF6B35',\n        }\n      case 'brandColor':\n        return {\n          primary: options?.primaryColor || '#27AE60',\n          logoDominant: options?.logoDominantColor,\n          logoAverage: options?.logoAverageColor,\n          coverDominant: options?.coverDominantColor,\n        }\n      case 'logoColor':\n        return {\n          primary: options?.primaryColor,\n          logoDominant: options?.logoDominantColor || '#E74C3C',\n          logoAverage: options?.logoAverageColor,\n          coverDominant: options?.coverDominantColor,\n        }\n      default:\n        return {\n          primary: options?.primaryColor,\n          logoDominant: options?.logoDominantColor,\n          logoAverage: options?.logoAverageColor,\n          coverDominant: options?.coverDominantColor,\n        }\n    }\n  }\n\n  // Configure header theme\n  const createHeaderTheme = () => {\n    if (themeType === 'coverImage' || options?.coverImageUrl) {\n      return {\n        id: `header-theme-${id}`,\n        coverImage: {\n          url:\n            options?.coverImageUrl ||\n            'https://images.unsplash.com/photo-1441986300917-64674bd600d8?w=800&h=400&fit=crop',\n          altText: `${name} cover image`,\n          sensitive: false,\n          thumbhash: 'k9oGHQRnh493V4dIeHeXh4h3iIeI',\n        },\n        wordmark:\n          options?.wordmarkUrl || themeType === 'coverImage'\n            ? {\n                url:\n                  options?.wordmarkUrl ||\n                  'https://merrypeople.com/cdn/shop/files/Transparent_Background_1.png?v=1696465429&width=1024',\n                altText: `${name} wordmark`,\n                sensitive: false,\n              }\n            : undefined,\n      }\n    }\n\n    if (options?.wordmarkUrl) {\n      return {\n        id: `header-theme-${id}`,\n        wordmark: {\n          url: options.wordmarkUrl,\n          altText: `${name} wordmark`,\n          sensitive: false,\n        },\n      }\n    }\n\n    return undefined\n  }\n\n  return {\n    id,\n    name,\n    primaryDomain: {\n      url: `https://${name.toLowerCase().replace(/\\s+/g, '-')}.com`,\n    },\n    reviewAnalytics: {averageRating: 4.3, reviewCount: 50},\n    visualTheme: {\n      id: `visual-theme-${id}`,\n      featuredImages,\n      logoImage: {\n        url: `https://picsum.photos/100/100?random=${id}`,\n        sensitive: false,\n      },\n      brandSettings: shouldHaveBrandSettings\n        ? {\n            id: `brand-settings-${id}`,\n            colors: {\n              id: `colors-${id}`,\n              ...getThemeColors(),\n            },\n            headerTheme: createHeaderTheme(),\n          }\n        : undefined,\n    },\n  }\n}\n\nconst createPagination = (hasNext = false) => ({\n  hasNextPage: hasNext,\n  endCursor: hasNext ? 'cursor123' : null,\n})\n\nconst createProductList = (id: string, name: string, products: any[] = []) => ({\n  id,\n  publicId: `public-${id}`,\n  name,\n  products,\n})\n\n// Helper type to extract the data type from a ShopAction\ntype ShopActionDataType<T> = T extends (\n  ...args: any[]\n) => Promise<{ok: true; data: infer R} | {ok: false; error: any}>\n  ? R\n  : never\n\nfunction makeMockMethod<K extends keyof ShopActions>(\n  key: K,\n  result: ShopActionDataType<ShopActions[K]>\n): ShopActions[K] {\n  return ((params: Parameters<ShopActions[K]>[0]) => {\n    console.log(`[Mock Action] ${String(key)}`, params)\n    return Promise.resolve({ok: true as const, data: result})\n  }) as ShopActions[K]\n}\n\nfunction makeMockActions(): ShopActions {\n  const results: {\n    [K in keyof ShopActions]: ShopActionDataType<ShopActions[K]>\n  } = {\n    followShop: true,\n    unfollowShop: false,\n    favorite: undefined,\n    unfavorite: undefined,\n    getShopAppInformation: {\n      appVersion: '1.0.0',\n      buildNumber: '12345',\n      buildId: 'dev-build-123',\n    },\n    productRecommendationImpression: undefined,\n    productRecommendationClick: undefined,\n    hideEntryPoint: undefined,\n    closeMini: undefined,\n    getAccountInformation: {\n      status: 'available',\n      value: 'user@example.com',\n    },\n    getCurrentUser: {\n      data: {\n        displayName: 'John Doe',\n        avatarImage: {url: 'https://example.com/avatar.jpg'},\n      },\n    },\n    createOrderAttribution: undefined,\n    addToCart: undefined,\n    buyProduct: undefined,\n    buyProducts: undefined,\n    showErrorScreen: undefined,\n    showErrorToast: undefined,\n    getDeeplinkPaths: {\n      matchers: ['/products', '/collections', '/cart'],\n    },\n    navigateToDeeplink: undefined,\n    navigateToShop: undefined,\n    navigateToProduct: undefined,\n    navigateToOrder: undefined,\n    navigateToCheckout: undefined,\n    createImageUploadLink: {\n      targets: [\n        {\n          url: 'https://example.com/upload',\n          resourceUrl: 'https://example.com/resource',\n          parameters: [{name: 'key', value: 'upload-123'}],\n        },\n      ],\n    },\n    completeImageUpload: {\n      files: [\n        {\n          id: 'file-123',\n          fileStatus: 'READY',\n          image: {url: 'https://example.com/image.jpg'},\n        },\n      ],\n    },\n    getPersistedItem: 'stored-value',\n    setPersistedItem: undefined,\n    removePersistedItem: undefined,\n    getAllPersistedKeys: ['key1', 'key2', 'key3'],\n    clearPersistedItems: undefined,\n    getInternalPersistedItem: 'internal-value',\n    setInternalPersistedItem: undefined,\n    removeInternalPersistedItem: undefined,\n    getAllInternalPersistedKeys: ['internal-key1', 'internal-key2'],\n    clearInternalPersistedItems: undefined,\n    getSecret: 'secret-value',\n    setSecret: undefined,\n    removeSecret: undefined,\n    reportInteraction: undefined,\n    reportImpression: undefined,\n    reportContentImpression: undefined,\n    getProductLists: {\n      data: [\n        createProductList('list-1', 'Wishlist'),\n        createProductList('list-2', 'Favorites'),\n      ],\n      pageInfo: createPagination(),\n    },\n    getProductList: {\n      data: createProductList('list-1', 'Wishlist', [\n        createProduct('prod-1', 'Sample Product'),\n      ]),\n      pageInfo: createPagination(),\n    },\n    addProductList: createProductList('list-3', 'New List'),\n    removeProductList: undefined,\n    renameProductList: createProductList('list-1', 'Updated Wishlist'),\n    addProductListItem: undefined,\n    removeProductListItem: undefined,\n    getRecommendedProducts: {\n      data: [\n        createProduct('rec-1', 'Recommended Product 1', '79.99'),\n        createProduct('rec-2', 'Recommended Product 2', '129.99'),\n        createProduct('rec-3', 'Recommended Product 3', '129.99'),\n        createProduct('rec-4', 'Recommended Product 4', '29.99'),\n        createProduct('rec-5', 'Recommended Product 5', '39.99'),\n        createProduct('rec-6', 'Recommended Product 6', '49.99'),\n        createProduct('rec-7', 'Recommended Product 7', '59.99'),\n        createProduct('rec-8', 'Recommended Product 8', '69.99'),\n        createProduct('rec-9', 'Recommended Product 9', '129.99'),\n      ],\n      pageInfo: createPagination(),\n    },\n    getRecommendedShops: {\n      data: [\n        createShop('shop-1', 'Amazing Store'),\n        createShop('shop-2', 'Best Deals Shop'),\n      ],\n      pageInfo: createPagination(),\n    },\n    searchProductsByShop: {\n      data: [\n        createProduct('search-1', 'Search Result 1', '59.99'),\n        createProduct('search-2', 'Search Result 2', '89.99'),\n      ],\n      pageInfo: createPagination(),\n    },\n    getOrders: {\n      data: [\n        {\n          id: 'order-1',\n          name: '#1001',\n          lineItems: [\n            {\n              productTitle: 'Sample Product',\n              variantTitle: 'Medium',\n              quantity: 2,\n              product: null,\n            },\n          ],\n          shop: createShop('shop-1', 'Sample Shop'),\n        },\n      ],\n      pageInfo: createPagination(),\n    },\n    getBuyerAttributes: {\n      data: {\n        genderAffinity: 'NEUTRAL' as Gender,\n        categoryAffinities: [\n          {id: 'cat1', name: 'Electronics'},\n          {id: 'cat2', name: 'Clothing'},\n        ],\n      },\n    },\n    showFeedbackSheet: undefined,\n    getPopularProducts: {\n      data: [\n        createProduct('pop-1', 'The Hero Snowboard', '702.95'),\n        createProduct('pop-2', 'Snow Jacket', '605.95', '702.00'),\n        createProduct('pop-3', 'Winter Gloves', '89.95'),\n        createProduct('pop-4', 'Summer Gloves', '89.95'),\n        createProduct('pop-5', 'Spring Gloves', '89.95'),\n        createProduct('pop-6', 'Playstation 5', '499.95'),\n        createProduct('pop-7', 'Xbox Series X', '499.95'),\n        createProduct('pop-8', 'Nintendo Switch', '299.95'),\n        createProduct('pop-9', 'Playstation 4', '299.95'),\n        createProduct('pop-10', 'Nintendo 3DS', '89.95'),\n      ],\n      pageInfo: createPagination(),\n    },\n    share: {\n      message: 'Shared!',\n      success: true,\n    },\n    getCuratedProducts: {\n      data: [\n        createProduct('cur-1', 'Curated Product 1', '79.99'),\n        createProduct('cur-2', 'Curated Product 2', '129.99'),\n      ],\n      pageInfo: createPagination(),\n    },\n    getSavedProducts: {\n      data: [createProduct('saved-1', 'Saved Product 1', '49.99')],\n      pageInfo: createPagination(),\n    },\n    getRecentProducts: {\n      data: [createProduct('recent-1', 'Recent Product 1', '59.99')],\n      pageInfo: createPagination(),\n    },\n    getProductSearch: {\n      data: [createProduct('search-3', 'Search Product 3', '39.99')],\n      pageInfo: createPagination(),\n    },\n    getProducts: {data: [createProduct('prod-2', 'Product 2', '19.99')]},\n    getProduct: {data: createProduct('prod-1', 'Sample Product')},\n    getProductVariants: {\n      data: [\n        {\n          id: 'variant-1',\n          isFavorited: false,\n          image: {url: 'https://example.com/variant-1.jpg'},\n          price: {amount: '19.99', currencyCode: 'USD'},\n          compareAtPrice: {amount: '29.99', currencyCode: 'USD'},\n        },\n      ],\n      pageInfo: createPagination(),\n    },\n    getProductMedia: {\n      data: [\n        {\n          id: 'media-1',\n          image: {url: 'https://example.com/media-1.jpg'},\n          mediaContentType: 'IMAGE',\n          alt: 'Sample product image',\n        },\n      ],\n      pageInfo: createPagination(),\n    },\n    getShop: {data: createShop('shop-1', 'Sample Shop')},\n    getRecentShops: {\n      data: [createShop('recent-shop-1', 'Recent Shop 1')],\n      pageInfo: createPagination(),\n    },\n    getFollowedShops: {\n      data: [createShop('followed-shop-1', 'Followed Shop 1')],\n      pageInfo: createPagination(),\n    },\n    previewProductInAr: undefined,\n    createContent: {\n      data: {\n        publicId: 'content-123',\n        externalId: null,\n        image: {\n          id: 'img-123',\n          url: 'https://example.com/content-image.jpg',\n          width: 800,\n          height: 600,\n        },\n        title: 'Mock Content',\n        description: 'This is a mock content item',\n        visibility: ['DISCOVERABLE'],\n        shareableUrl: 'https://example.com/content/123',\n        products: null,\n      },\n    },\n  } as const\n\n  const mock: Partial<ShopActions> = {}\n  for (const key in results) {\n    if (Object.prototype.hasOwnProperty.call(results, key)) {\n      // @ts-expect-error: dynamic assignment is safe due to exhaustive mapping\n      mock[key] = makeMockMethod(\n        key as keyof ShopActions,\n        results[key as keyof typeof results]\n      )\n    }\n  }\n  return mock as ShopActions\n}\n\n// Detect if running on a mobile device\nconst isMobile = (): boolean => {\n  const userAgent = navigator.userAgent.toLowerCase()\n  const isIOS = /iphone|ipad|ipod/.test(userAgent)\n  const isAndroid = /android/.test(userAgent)\n\n  return isIOS || isAndroid\n}\n\nexport const injectMocks = () => {\n  // Only inject mocks if we aren't on a mobile device\n  if (isMobile()) {\n    return\n  }\n\n  if (!window.minisSDK) {\n    window.minisSDK = makeMockActions()\n    window.minisParams = {\n      handle: 'mock-handle',\n      initialUrl: '/mock-initial-url',\n      platform: 'web',\n    }\n  }\n}\n"],"names":["createProduct","id","title","price","compareAtPrice","createShop","name","options","featuredImages","_","i","createPagination","hasNext","createProductList","products","makeMockMethod","key","result","params","makeMockActions","results","mock","isMobile","userAgent","isIOS","isAndroid","injectMocks"],"mappings":"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"}
+{"version":3,"file":"mocks.js","sources":["../src/mocks.ts"],"sourcesContent":["import {Product, Gender} from '@shopify/shop-minis-platform'\nimport {ShopActions} from '@shopify/shop-minis-platform/actions'\n\n// Helper functions for common data structures\nexport const createProduct = (\n  id: string,\n  title: string,\n  price = '99.99',\n  compareAtPrice?: string\n): Product => ({\n  id,\n  title,\n  price: {amount: price, currencyCode: 'USD'},\n  ...(compareAtPrice && {\n    compareAtPrice: {amount: compareAtPrice, currencyCode: 'USD'},\n  }),\n  reviewAnalytics: {averageRating: 4.5, reviewCount: 10},\n  shop: createShop('shop1', 'Mock Shop'),\n  defaultVariantId: `variant-${id}`,\n  isFavorited: false,\n  featuredImage: {\n    url: `https://cdn.shopify.com/s/files/1/0621/0463/3599/files/61ChhrRjK9L._AC_SL1000_1639abe8-4cd3-4bee-9867-73f26b0acf0a.jpg?v=1702559955`,\n    altText: title,\n  },\n})\n\nexport const createShop = (\n  id: string,\n  name: string,\n  options?: {\n    themeType?: 'coverImage' | 'brandColor' | 'logoColor' | 'none'\n    withBrandSettings?: boolean\n    primaryColor?: string\n    logoDominantColor?: string\n    logoAverageColor?: string\n    coverDominantColor?: string\n    wordmarkUrl?: string\n    coverImageUrl?: string\n    featuredImagesLimit?: number\n  }\n) => {\n  // Determine theme configuration\n  const themeType = options?.themeType || 'none'\n  const shouldHaveBrandSettings =\n    options?.withBrandSettings || themeType !== 'none'\n\n  // Generate featured images\n  const featuredImagesCount = options?.featuredImagesLimit || 3\n  const featuredImages = Array.from({length: featuredImagesCount}, (_, i) => ({\n    url: `https://picsum.photos/400/400?random=${id}-${i}`,\n    sensitive: false,\n    altText: `${name} featured image ${i + 1}`,\n  }))\n\n  // Configure colors based on theme type\n  const getThemeColors = () => {\n    switch (themeType) {\n      case 'coverImage':\n        return {\n          primary: options?.primaryColor,\n          logoDominant: options?.logoDominantColor,\n          logoAverage: options?.logoAverageColor,\n          coverDominant: options?.coverDominantColor || '#FF6B35',\n        }\n      case 'brandColor':\n        return {\n          primary: options?.primaryColor || '#27AE60',\n          logoDominant: options?.logoDominantColor,\n          logoAverage: options?.logoAverageColor,\n          coverDominant: options?.coverDominantColor,\n        }\n      case 'logoColor':\n        return {\n          primary: options?.primaryColor,\n          logoDominant: options?.logoDominantColor || '#E74C3C',\n          logoAverage: options?.logoAverageColor,\n          coverDominant: options?.coverDominantColor,\n        }\n      default:\n        return {\n          primary: options?.primaryColor,\n          logoDominant: options?.logoDominantColor,\n          logoAverage: options?.logoAverageColor,\n          coverDominant: options?.coverDominantColor,\n        }\n    }\n  }\n\n  // Configure header theme\n  const createHeaderTheme = () => {\n    if (themeType === 'coverImage' || options?.coverImageUrl) {\n      return {\n        id: `header-theme-${id}`,\n        coverImage: {\n          url:\n            options?.coverImageUrl ||\n            'https://images.unsplash.com/photo-1441986300917-64674bd600d8?w=800&h=400&fit=crop',\n          altText: `${name} cover image`,\n          sensitive: false,\n          thumbhash: 'k9oGHQRnh493V4dIeHeXh4h3iIeI',\n        },\n        wordmark:\n          options?.wordmarkUrl || themeType === 'coverImage'\n            ? {\n                url:\n                  options?.wordmarkUrl ||\n                  'https://merrypeople.com/cdn/shop/files/Transparent_Background_1.png?v=1696465429&width=1024',\n                altText: `${name} wordmark`,\n                sensitive: false,\n              }\n            : undefined,\n      }\n    }\n\n    if (options?.wordmarkUrl) {\n      return {\n        id: `header-theme-${id}`,\n        wordmark: {\n          url: options.wordmarkUrl,\n          altText: `${name} wordmark`,\n          sensitive: false,\n        },\n      }\n    }\n\n    return undefined\n  }\n\n  return {\n    id,\n    name,\n    primaryDomain: {\n      url: `https://${name.toLowerCase().replace(/\\s+/g, '-')}.com`,\n    },\n    reviewAnalytics: {averageRating: 4.3, reviewCount: 50},\n    visualTheme: {\n      id: `visual-theme-${id}`,\n      featuredImages,\n      logoImage: {\n        url: `https://picsum.photos/100/100?random=${id}`,\n        sensitive: false,\n      },\n      brandSettings: shouldHaveBrandSettings\n        ? {\n            id: `brand-settings-${id}`,\n            colors: {\n              id: `colors-${id}`,\n              ...getThemeColors(),\n            },\n            headerTheme: createHeaderTheme(),\n          }\n        : undefined,\n    },\n  }\n}\n\nconst createPagination = (hasNext = false) => ({\n  hasNextPage: hasNext,\n  endCursor: hasNext ? 'cursor123' : null,\n})\n\nconst createProductList = (id: string, name: string, products: any[] = []) => ({\n  id,\n  publicId: `public-${id}`,\n  name,\n  products,\n})\n\n// Helper type to extract the data type from a ShopAction\ntype ShopActionDataType<T> = T extends (\n  ...args: any[]\n) => Promise<{ok: true; data: infer R} | {ok: false; error: any}>\n  ? R\n  : never\n\nfunction makeMockMethod<K extends keyof ShopActions>(\n  key: K,\n  result: ShopActionDataType<ShopActions[K]>\n): ShopActions[K] {\n  return ((params: Parameters<ShopActions[K]>[0]) => {\n    console.log(`[Mock Action] ${String(key)}`, params)\n    return Promise.resolve({ok: true as const, data: result})\n  }) as ShopActions[K]\n}\n\nfunction makeMockActions(): ShopActions {\n  const results: {\n    [K in keyof ShopActions]: ShopActionDataType<ShopActions[K]>\n  } = {\n    followShop: true,\n    unfollowShop: false,\n    favorite: undefined,\n    unfavorite: undefined,\n    getShopAppInformation: {\n      appVersion: '1.0.0',\n      buildNumber: '12345',\n      buildId: 'dev-build-123',\n    },\n    productRecommendationImpression: undefined,\n    productRecommendationClick: undefined,\n    hideEntryPoint: undefined,\n    closeMini: undefined,\n    getAccountInformation: {\n      status: 'available',\n      value: 'user@example.com',\n    },\n    getCurrentUser: {\n      data: {\n        displayName: 'John Doe',\n        avatarImage: {url: 'https://example.com/avatar.jpg'},\n      },\n    },\n    createOrderAttribution: undefined,\n    addToCart: undefined,\n    buyProduct: undefined,\n    buyProducts: undefined,\n    showErrorScreen: undefined,\n    showErrorToast: undefined,\n    getDeeplinkPaths: {\n      matchers: ['/products', '/collections', '/cart'],\n    },\n    navigateToDeeplink: undefined,\n    navigateToShop: undefined,\n    navigateToProduct: undefined,\n    navigateToOrder: undefined,\n    navigateToCheckout: undefined,\n    createImageUploadLink: {\n      targets: [\n        {\n          url: 'https://example.com/upload',\n          resourceUrl: 'https://example.com/resource',\n          parameters: [{name: 'key', value: 'upload-123'}],\n        },\n      ],\n    },\n    completeImageUpload: {\n      files: [\n        {\n          id: 'file-123',\n          fileStatus: 'READY',\n          image: {url: 'https://example.com/image.jpg'},\n        },\n      ],\n    },\n    getPersistedItem: 'stored-value',\n    setPersistedItem: undefined,\n    removePersistedItem: undefined,\n    getAllPersistedKeys: ['key1', 'key2', 'key3'],\n    clearPersistedItems: undefined,\n    getInternalPersistedItem: 'internal-value',\n    setInternalPersistedItem: undefined,\n    removeInternalPersistedItem: undefined,\n    getAllInternalPersistedKeys: ['internal-key1', 'internal-key2'],\n    clearInternalPersistedItems: undefined,\n    getSecret: 'secret-value',\n    setSecret: undefined,\n    removeSecret: undefined,\n    reportInteraction: undefined,\n    reportImpression: undefined,\n    reportContentImpression: undefined,\n    getProductLists: {\n      data: [\n        createProductList('list-1', 'Wishlist'),\n        createProductList('list-2', 'Favorites'),\n      ],\n      pageInfo: createPagination(),\n    },\n    getProductList: {\n      data: createProductList('list-1', 'Wishlist', [\n        createProduct('prod-1', 'Sample Product'),\n      ]),\n      pageInfo: createPagination(),\n    },\n    addProductList: createProductList('list-3', 'New List'),\n    removeProductList: undefined,\n    renameProductList: createProductList('list-1', 'Updated Wishlist'),\n    addProductListItem: undefined,\n    removeProductListItem: undefined,\n    getRecommendedProducts: {\n      data: [\n        createProduct('rec-1', 'Recommended Product 1', '79.99'),\n        createProduct('rec-2', 'Recommended Product 2', '129.99'),\n        createProduct('rec-3', 'Recommended Product 3', '129.99'),\n        createProduct('rec-4', 'Recommended Product 4', '29.99'),\n        createProduct('rec-5', 'Recommended Product 5', '39.99'),\n        createProduct('rec-6', 'Recommended Product 6', '49.99'),\n        createProduct('rec-7', 'Recommended Product 7', '59.99'),\n        createProduct('rec-8', 'Recommended Product 8', '69.99'),\n        createProduct('rec-9', 'Recommended Product 9', '129.99'),\n      ],\n      pageInfo: createPagination(),\n    },\n    getRecommendedShops: {\n      data: [\n        createShop('shop-1', 'Amazing Store'),\n        createShop('shop-2', 'Best Deals Shop'),\n      ],\n      pageInfo: createPagination(),\n    },\n    searchProductsByShop: {\n      data: [\n        createProduct('search-1', 'Search Result 1', '59.99'),\n        createProduct('search-2', 'Search Result 2', '89.99'),\n      ],\n      pageInfo: createPagination(),\n    },\n    getOrders: {\n      data: [\n        {\n          id: 'order-1',\n          name: '#1001',\n          lineItems: [\n            {\n              productTitle: 'Sample Product',\n              variantTitle: 'Medium',\n              quantity: 2,\n              product: null,\n            },\n          ],\n          shop: createShop('shop-1', 'Sample Shop'),\n        },\n      ],\n      pageInfo: createPagination(),\n    },\n    getBuyerAttributes: {\n      data: {\n        genderAffinity: 'NEUTRAL' as Gender,\n        categoryAffinities: [\n          {id: 'cat1', name: 'Electronics'},\n          {id: 'cat2', name: 'Clothing'},\n        ],\n      },\n    },\n    showFeedbackSheet: undefined,\n    getPopularProducts: {\n      data: [\n        createProduct('pop-1', 'The Hero Snowboard', '702.95'),\n        createProduct('pop-2', 'Snow Jacket', '605.95', '702.00'),\n        createProduct('pop-3', 'Winter Gloves', '89.95'),\n        createProduct('pop-4', 'Summer Gloves', '89.95'),\n        createProduct('pop-5', 'Spring Gloves', '89.95'),\n        createProduct('pop-6', 'Playstation 5', '499.95'),\n        createProduct('pop-7', 'Xbox Series X', '499.95'),\n        createProduct('pop-8', 'Nintendo Switch', '299.95'),\n        createProduct('pop-9', 'Playstation 4', '299.95'),\n        createProduct('pop-10', 'Nintendo 3DS', '89.95'),\n      ],\n      pageInfo: createPagination(),\n    },\n    share: {\n      message: 'Shared!',\n      success: true,\n    },\n    getCuratedProducts: {\n      data: [\n        createProduct('cur-1', 'Curated Product 1', '79.99'),\n        createProduct('cur-2', 'Curated Product 2', '129.99'),\n      ],\n      pageInfo: createPagination(),\n    },\n    getSavedProducts: {\n      data: [createProduct('saved-1', 'Saved Product 1', '49.99')],\n      pageInfo: createPagination(),\n    },\n    getRecentProducts: {\n      data: [createProduct('recent-1', 'Recent Product 1', '59.99')],\n      pageInfo: createPagination(),\n    },\n    getProductSearch: {\n      data: [createProduct('search-3', 'Search Product 3', '39.99')],\n      pageInfo: createPagination(),\n    },\n    getProducts: {data: [createProduct('prod-2', 'Product 2', '19.99')]},\n    getProduct: {data: createProduct('prod-1', 'Sample Product')},\n    getProductVariants: {\n      data: [\n        {\n          id: 'variant-1',\n          isFavorited: false,\n          image: {url: 'https://example.com/variant-1.jpg'},\n          price: {amount: '19.99', currencyCode: 'USD'},\n          compareAtPrice: {amount: '29.99', currencyCode: 'USD'},\n        },\n      ],\n      pageInfo: createPagination(),\n    },\n    getProductMedia: {\n      data: [\n        {\n          id: 'media-1',\n          image: {url: 'https://example.com/media-1.jpg'},\n          mediaContentType: 'IMAGE',\n          alt: 'Sample product image',\n        },\n      ],\n      pageInfo: createPagination(),\n    },\n    getShop: {data: createShop('shop-1', 'Sample Shop')},\n    getRecentShops: {\n      data: [createShop('recent-shop-1', 'Recent Shop 1')],\n      pageInfo: createPagination(),\n    },\n    getFollowedShops: {\n      data: [createShop('followed-shop-1', 'Followed Shop 1')],\n      pageInfo: createPagination(),\n    },\n    previewProductInAr: undefined,\n    createContent: {\n      data: {\n        publicId: 'content-123',\n        externalId: null,\n        image: {\n          id: 'img-123',\n          url: 'https://example.com/content-image.jpg',\n          width: 800,\n          height: 600,\n        },\n        title: 'Mock Content',\n        description: 'This is a mock content item',\n        visibility: ['DISCOVERABLE'],\n        shareableUrl: 'https://example.com/content/123',\n        products: null,\n      },\n    },\n    getContent: {\n      data: [\n        {\n          publicId: 'content-123',\n          image: {\n            id: 'img-123',\n            url: 'https://example.com/content-image.jpg',\n            width: 800,\n            height: 600,\n          },\n          title: 'Mock Content',\n          visibility: ['DISCOVERABLE'],\n        },\n      ],\n    },\n  } as const\n\n  const mock: Partial<ShopActions> = {}\n  for (const key in results) {\n    if (Object.prototype.hasOwnProperty.call(results, key)) {\n      // @ts-expect-error: dynamic assignment is safe due to exhaustive mapping\n      mock[key] = makeMockMethod(\n        key as keyof ShopActions,\n        results[key as keyof typeof results]\n      )\n    }\n  }\n  return mock as ShopActions\n}\n\n// Detect if running on a mobile device\nconst isMobile = (): boolean => {\n  const userAgent = navigator.userAgent.toLowerCase()\n  const isIOS = /iphone|ipad|ipod/.test(userAgent)\n  const isAndroid = /android/.test(userAgent)\n\n  return isIOS || isAndroid\n}\n\nexport const injectMocks = () => {\n  // Only inject mocks if we aren't on a mobile device\n  if (isMobile()) {\n    return\n  }\n\n  if (!window.minisSDK) {\n    window.minisSDK = makeMockActions()\n    window.minisParams = {\n      handle: 'mock-handle',\n      initialUrl: '/mock-initial-url',\n      platform: 'web',\n    }\n  }\n}\n"],"names":["createProduct","id","title","price","compareAtPrice","createShop","name","options","featuredImages","_","i","createPagination","hasNext","createProductList","products","makeMockMethod","key","result","params","makeMockActions","results","mock","isMobile","userAgent","isIOS","isAndroid","injectMocks"],"mappings":"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"}

package/dist/shop-minis-platform/src/types/content.js

@@ -0,0 +1,5 @@
+var E = /* @__PURE__ */ ((I) => (I.DUPLICATE_EXTERNAL_ID = "DUPLICATE_EXTERNAL_ID", I.INELIGIBLE_PRODUCTS = "INELIGIBLE_PRODUCTS", I))(E || {});
+export {
+  E as ContentCreateUserErrorCode
+};
+//# sourceMappingURL=content.js.map

package/dist/shop-minis-platform/src/types/content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"content.js","sources":["../../../../../shop-minis-platform/src/types/content.ts"],"sourcesContent":["/* eslint-disable @shopify/typescript/prefer-pascal-case-enums */\nexport interface Image {\n  url: string\n  altText?: string | null\n  height?: number | null\n  width?: number | null\n  /**\n   * @deprecated This property will be removed in a future version\n   */\n  sensitive: boolean\n  thumbhash?: string | null\n}\n\nexport interface ContentImage {\n  id?: string | null\n  url: string\n  width?: number | null\n  height?: number | null\n}\n\nexport interface ContentProduct {\n  id: string\n  title: string\n  featuredImage?: ContentImage | null\n}\n\nexport type ContentVisibility = 'DISCOVERABLE' | 'LINKABLE'\n\nexport interface Content {\n  publicId: string\n  externalId?: string | null\n  image: ContentImage\n  title: string\n  description?: string | null\n  visibility: ContentVisibility[]\n  shareableUrl?: string | null\n  products?: ContentProduct[] | null\n}\n\nexport enum ContentCreateUserErrorCode {\n  DUPLICATE_EXTERNAL_ID = 'DUPLICATE_EXTERNAL_ID',\n  INELIGIBLE_PRODUCTS = 'INELIGIBLE_PRODUCTS',\n}\n\nexport interface ContentCreateUserErrors {\n  code: ContentCreateUserErrorCode\n  message: string\n}\n\nexport interface ContentIdentifierInput {\n  externalId?: string | null\n  publicId?: string | null\n}\n"],"names":["ContentCreateUserErrorCode"],"mappings":"AAuCY,IAAAA,sBAAAA,OACVA,EAAA,wBAAwB,yBACxBA,EAAA,sBAAsB,uBAFZA,IAAAA,KAAA,CAAA,CAAA;"}

package/dist/shop-minis-react/node_modules/.pnpm/@radix-ui_react-use-is-hydrated@0.1.0_@types_react@19.1.6_react@19.1.0/node_modules/@radix-ui/react-use-is-hydrated/dist/index.js

@@ -1,4 +1,4 @@
-import { s as r } from "../../../../../../../../_virtual/index4.js";
+import { s as r } from "../../../../../../../../_virtual/index7.js";
 function s() {
   return r.useSyncExternalStore(
     e,

package/dist/shop-minis-react/node_modules/.pnpm/@xmldom_xmldom@0.8.10/node_modules/@xmldom/xmldom/lib/index.js

@@ -1,4 +1,4 @@
-import { __exports as r } from "../../../../../../../../_virtual/index10.js";
+import { __exports as r } from "../../../../../../../../_virtual/index9.js";
 import { __require as a } from "./dom.js";
 import { __require as o } from "./dom-parser.js";
 var i;

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/index7.js";
+import { __exports as i } from "../../../../../../_virtual/index4.js";
 var c;
 function d() {
   if (c) return i;

package/dist/shop-minis-react/node_modules/.pnpm/use-sync-external-store@1.5.0_react@19.1.0/node_modules/use-sync-external-store/shim/index.js

@@ -1,4 +1,4 @@
-import { __module as r } from "../../../../../../../_virtual/index9.js";
+import { __module as r } from "../../../../../../../_virtual/index10.js";
 import { __require as o } from "../cjs/use-sync-external-store-shim.production.js";
 import { __require as i } from "../cjs/use-sync-external-store-shim.development.js";
 var e;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shopify/shop-minis-react",
   "license": "SEE LICENSE IN LICENSE.txt",
-  "version": "0.0.25",
+  "version": "0.0.26",
   "sideEffects": false,
   "type": "module",
   "engines": {
@@ -38,8 +38,11 @@
     "typescript": ">=5.0.0"
   },
   "dependencies": {
-    "@shopify/shop-minis-platform": "0.0.8",
+    "@shopify/shop-minis-platform": "0.0.9",
     "@tailwindcss/vite": "4.1.8",
+    "@types/color": "3.0.6",
+    "@types/lodash": "4.17.20",
+    "@types/react-window": "1.8.8",
     "@types/url-parse": "1.4.9",
     "@types/video.js": "7.3.58",
     "@vitejs/plugin-react": "4.5.1",
@@ -70,11 +73,9 @@
     "@shopify/generate-docs": "^0.16.6",
     "@storybook/addon-docs": "^9.0.16",
     "@storybook/react-vite": "^9.0.16",
-    "@types/color": "^3.0.6",
     "@types/node": "^20.12.1",
     "@types/react": "^19.1.6",
     "@types/react-dom": "^19.1.2",
-    "@types/react-window": "^1.8.8",
     "eslint": "^8.57.0",
     "eslint-plugin-storybook": "^9.0.16",
     "react": "^19.1.0",

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

@@ -0,0 +1,74 @@
+import {formatMoney} from '../../lib/formatMoney'
+import {cn} from '../../lib/utils'
+
+export interface ProductVariantPriceProps {
+  amount: number | string
+  currencyCode?: string
+  compareAtPriceAmount?: number | string
+  compareAtPriceCurrencyCode?: string
+  currentPriceClassName?: string
+  originalPriceClassName?: string
+  containerClassName?: string
+  className?: string
+}
+
+export function ProductVariantPrice({
+  amount,
+  currencyCode,
+  compareAtPriceAmount,
+  compareAtPriceCurrencyCode,
+  currentPriceClassName,
+  originalPriceClassName,
+  containerClassName,
+  className,
+}: ProductVariantPriceProps) {
+  if (!amount || !currencyCode) {
+    return null
+  }
+
+  const hasDiscount = compareAtPriceAmount && compareAtPriceAmount !== amount
+
+  const amountStr = String(amount)
+  const compareAtPriceAmountStr = compareAtPriceAmount
+    ? String(compareAtPriceAmount)
+    : undefined
+
+  return (
+    <div
+      className={cn('flex items-center gap-2', containerClassName, className)}
+    >
+      {hasDiscount ? (
+        <>
+          <span
+            className={cn(
+              'text-sm font-semibold text-gray-900',
+              currentPriceClassName
+            )}
+          >
+            {formatMoney(amountStr, currencyCode)}
+          </span>
+          <span
+            className={cn(
+              'text-sm text-gray-500 line-through',
+              originalPriceClassName
+            )}
+          >
+            {formatMoney(
+              compareAtPriceAmountStr!,
+              compareAtPriceCurrencyCode || currencyCode
+            )}
+          </span>
+        </>
+      ) : (
+        <span
+          className={cn(
+            'text-sm font-semibold text-gray-900',
+            currentPriceClassName
+          )}
+        >
+          {formatMoney(amountStr, currencyCode)}
+        </span>
+      )}
+    </div>
+  )
+}

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

@@ -10,6 +10,7 @@ import {useSavedProductsActions} from '../../hooks/user/useSavedProductsActions'
 import {formatMoney} from '../../lib/formatMoney'
 import {cn} from '../../lib/utils'
 import {FavoriteButton} from '../atoms/favorite-button'
+import {ProductVariantPrice} from '../atoms/product-variant-price'
 import {ThumbhashImage} from '../atoms/thumbhash-image'
 import {Touchable} from '../atoms/touchable'
 import {Badge} from '../ui/badge'
@@ -240,42 +241,6 @@ function ProductCardTitle({
   )
 }
 
-function ProductCardPrice({className, ...props}: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="product-card-price"
-      className={cn('flex items-center gap-2', className)}
-      {...props}
-    />
-  )
-}
-
-function ProductCardCurrentPrice({
-  className,
-  ...props
-}: React.ComponentProps<'span'>) {
-  return (
-    <span
-      data-slot="product-card-current-price"
-      className={cn('text-sm font-semibold text-gray-900', className)}
-      {...props}
-    />
-  )
-}
-
-function ProductCardOriginalPrice({
-  className,
-  ...props
-}: React.ComponentProps<'span'>) {
-  return (
-    <span
-      data-slot="product-card-original-price"
-      className={cn('text-sm text-gray-500 line-through', className)}
-      {...props}
-    />
-  )
-}
-
 export interface ProductCardProps {
   /** The product to display in the card */
   product: Product
@@ -333,7 +298,6 @@ function ProductCard({
   const imageUrl = displayImage?.url
   const imageAltText = displayImage?.altText || title
   const compareAtPriceAmount = displayCompareAtPrice?.amount
-  const hasDiscount = compareAtPriceAmount && compareAtPriceAmount !== amount
 
   const handlePress = React.useCallback(() => {
     if (!touchable) return
@@ -419,25 +383,12 @@ function ProductCard({
       <ProductCardInfo variant={variant}>
         <ProductCardTitle>{title}</ProductCardTitle>
 
-        <ProductCardPrice>
-          {hasDiscount ? (
-            <>
-              <ProductCardCurrentPrice>
-                {formatMoney(amount, currencyCode)}
-              </ProductCardCurrentPrice>
-              <ProductCardOriginalPrice>
-                {formatMoney(
-                  compareAtPriceAmount,
-                  displayCompareAtPrice?.currencyCode || currencyCode
-                )}
-              </ProductCardOriginalPrice>
-            </>
-          ) : (
-            <ProductCardCurrentPrice>
-              {formatMoney(amount, currencyCode)}
-            </ProductCardCurrentPrice>
-          )}
-        </ProductCardPrice>
+        <ProductVariantPrice
+          amount={amount}
+          currencyCode={currencyCode}
+          compareAtPriceAmount={compareAtPriceAmount}
+          compareAtPriceCurrencyCode={displayCompareAtPrice?.currencyCode}
+        />
       </ProductCardInfo>
     </ProductCardRoot>
   )

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

@@ -247,7 +247,6 @@ function ProductLink({product}: ProductLinkProps) {
 
   const averageRating = reviewAnalytics?.averageRating
   const reviewCount = reviewAnalytics?.reviewCount
-  const currencyCode = price?.currencyCode
   const amount = price?.amount
     ? formatMoney(price?.amount, price?.currencyCode)
     : undefined
@@ -256,7 +255,6 @@ function ProductLink({product}: ProductLinkProps) {
   const compareAtPriceAmount = compareAtPrice?.amount
     ? formatMoney(compareAtPrice?.amount, compareAtPrice?.currencyCode)
     : undefined
-  const compareAtPriceCurrencyCode = compareAtPrice?.currencyCode
   const hasDiscount = compareAtPriceAmount && compareAtPriceAmount !== amount
 
   const handlePress = React.useCallback(() => {

package/src/components/content/content-monitor.tsx

@@ -0,0 +1,23 @@
+// import {useShopActions} from '../../internal/useShopActions'
+import {Touchable} from '../atoms/touchable'
+
+export function ContentMonitor({
+  // publicId,
+  children,
+}: {
+  publicId: string
+  children: React.ReactNode
+}) {
+  // const {showFeedbackSheet} = useShopActions()
+
+  return (
+    <Touchable
+    // TODO: Add long press support to Touchable
+    // onLongPress={() => {
+    //   showFeedbackSheet({publicId})
+    // }}
+    >
+      {children}
+    </Touchable>
+  )
+}

package/src/components/content/content-wrapper.tsx

@@ -0,0 +1,56 @@
+import {useContent} from '../../hooks/content/useContent'
+import {Content} from '../../types'
+
+import {ContentMonitor} from './content-monitor'
+
+interface BaseContentWrapperProps {
+  children: ({
+    content,
+    loading,
+  }: {
+    content?: Content
+    loading: boolean
+  }) => JSX.Element | null
+}
+
+interface PublicIdContentWrapperProps extends BaseContentWrapperProps {
+  publicId: string
+  externalId?: never
+}
+
+interface ExternalIdContentWrapperProps extends BaseContentWrapperProps {
+  externalId: string
+  publicId?: never
+}
+
+type ContentWrapperProps =
+  | PublicIdContentWrapperProps
+  | ExternalIdContentWrapperProps
+
+// It's too messy in the docs to show the complete types here so we show a simplified version
+export interface ContentWrapperPropsForDocs extends BaseContentWrapperProps {
+  publicId?: string
+  externalId?: string
+}
+
+export function ContentWrapper({
+  publicId,
+  externalId,
+  children,
+}: ContentWrapperProps) {
+  const {content, loading} = useContent({
+    identifiers: [{publicId, externalId}],
+  })
+
+  const contentItem = content?.[0]
+
+  if (loading || !contentItem) {
+    return children({loading})
+  }
+
+  return (
+    <ContentMonitor publicId={contentItem.publicId}>
+      {children({content: contentItem, loading})}
+    </ContentMonitor>
+  )
+}

package/src/components/index.ts

@@ -7,6 +7,8 @@ export * from './commerce/product-card-skeleton'
 export * from './commerce/merchant-card-skeleton'
 export * from './commerce/quantity-selector'
 
+export * from './content/content-wrapper'
+
 export * from './navigation/transition-container'
 export * from './navigation/transition-link'
 

package/src/hooks/content/useContent.ts

@@ -0,0 +1,50 @@
+import {useMemo} from 'react'
+
+import {useShopActions} from '../../internal/useShopActions'
+import {useShopActionsDataFetching} from '../../internal/useShopActionsDataFetching'
+import {
+  Content,
+  ContentIdentifierInput,
+  DataHookOptionsBase,
+  DataHookReturnsBase,
+} from '../../types'
+
+export interface UseContentParams extends DataHookOptionsBase {
+  /**
+   * The identifiers of the content to fetch.
+   */
+  identifiers: ContentIdentifierInput | ContentIdentifierInput[]
+}
+
+interface UseContentReturns extends DataHookReturnsBase {
+  /**
+   * The content returned from the query.
+   */
+  content: Content[] | null
+}
+
+export const useContent = (params: UseContentParams): UseContentReturns => {
+  const {getContent} = useShopActions()
+  const {identifiers, skip = false, ...restParams} = params
+
+  const {data, ...rest} = useShopActionsDataFetching(
+    getContent,
+    {
+      identifiers,
+      ...restParams,
+    },
+    {
+      skip,
+      hook: 'useContent',
+    }
+  )
+
+  const content = useMemo(() => {
+    return data ?? null
+  }, [data])
+
+  return {
+    ...rest,
+    content,
+  }
+}

package/src/hooks/content/useCreateImageContent.ts

@@ -1,7 +1,10 @@
-import {useCallback} from 'react'
+import {useCallback, useState} from 'react'
 
-import {ContentVisibility} from '@shopify/shop-minis-platform'
-import {CreateContentResponse} from '@shopify/shop-minis-platform/actions'
+import {
+  ContentVisibility,
+  Content,
+  ContentCreateUserErrors,
+} from '@shopify/shop-minis-platform'
 
 import {useHandleAction} from '../../internal/useHandleAction'
 import {useShopActions} from '../../internal/useShopActions'
@@ -20,15 +23,22 @@ interface UseCreateImageContentReturns {
    */
   createImageContent: (
     params: CreateImageContentParams
-  ) => Promise<CreateContentResponse>
+  ) => Promise<{data: Content; userErrors?: ContentCreateUserErrors[]}>
+  /**
+   * Whether the content is being created.
+   */
+  loading: boolean
 }
 
 export const useCreateImageContent = (): UseCreateImageContentReturns => {
   const {createContent} = useShopActions()
   const {uploadImage} = useImageUpload()
+  const [loading, setLoading] = useState(false)
 
   const createImageContent = useCallback(
     async (params: CreateImageContentParams) => {
+      setLoading(true)
+
       const {image, contentTitle, visibility} = params
 
       if (!image.type) {
@@ -50,16 +60,21 @@ export const useCreateImageContent = (): UseCreateImageContentReturns => {
         throw new Error('Image upload failed')
       }
 
-      return createContent({
+      const createContentResult = await createContent({
         title: contentTitle,
         imageUrl: uploadImageUrl,
         visibility,
       })
+
+      setLoading(false)
+
+      return createContentResult
     },
     [createContent, uploadImage]
   )
 
   return {
     createImageContent: useHandleAction(createImageContent),
+    loading,
   }
 }

package/src/mocks.ts

@@ -422,6 +422,21 @@ function makeMockActions(): ShopActions {
         products: null,
       },
     },
+    getContent: {
+      data: [
+        {
+          publicId: 'content-123',
+          image: {
+            id: 'img-123',
+            url: 'https://example.com/content-image.jpg',
+            width: 800,
+            height: 600,
+          },
+          title: 'Mock Content',
+          visibility: ['DISCOVERABLE'],
+        },
+      ],
+    },
   } as const
 
   const mock: Partial<ShopActions> = {}