@shopify/hydrogen-react 2026.4.0 → 2026.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/browser-dev/AddToCartButton.mjs.map +1 -1
- package/dist/browser-dev/BuyNowButton.mjs.map +1 -1
- package/dist/browser-dev/CartCheckoutButton.mjs.map +1 -1
- package/dist/browser-dev/CartCost.mjs.map +1 -1
- package/dist/browser-dev/CartLineProvider.mjs.map +1 -1
- package/dist/browser-dev/CartLineQuantity.mjs.map +1 -1
- package/dist/browser-dev/CartLineQuantityAdjustButton.mjs.map +1 -1
- package/dist/browser-dev/CartProvider.mjs.map +1 -1
- package/dist/browser-dev/ExternalVideo.mjs.map +1 -1
- package/dist/browser-dev/Image.mjs.map +1 -1
- package/dist/browser-dev/MediaFile.mjs.map +1 -1
- package/dist/browser-dev/ModelViewer.mjs.map +1 -1
- package/dist/browser-dev/Money.mjs.map +1 -1
- package/dist/browser-dev/ProductPrice.mjs.map +1 -1
- package/dist/browser-dev/ProductProvider.mjs.map +1 -1
- package/dist/browser-dev/RichText.mjs.map +1 -1
- package/dist/browser-dev/ShopPayButton.mjs.map +1 -1
- package/dist/browser-dev/ShopifyProvider.mjs.map +1 -1
- package/dist/browser-dev/Video.mjs.map +1 -1
- package/dist/browser-dev/analytics-constants.mjs.map +1 -1
- package/dist/browser-dev/analytics-utils.mjs.map +1 -1
- package/dist/browser-dev/analytics.mjs.map +1 -1
- package/dist/browser-dev/cart-queries.mjs +43 -81
- package/dist/browser-dev/cart-queries.mjs.map +1 -1
- package/dist/browser-dev/codegen.helpers.mjs.map +1 -1
- package/dist/browser-dev/cookies-utils.mjs.map +1 -1
- package/dist/browser-dev/flatten-connection.mjs.map +1 -1
- package/dist/browser-dev/getProductOptions.mjs.map +1 -1
- package/dist/browser-dev/load-script.mjs.map +1 -1
- package/dist/browser-dev/optionValueDecoder.mjs.map +1 -1
- package/dist/browser-dev/packages/hydrogen-react/package.json.mjs +1 -1
- package/dist/browser-dev/parse-metafield.mjs.map +1 -1
- package/dist/browser-dev/storefront-client.mjs.map +1 -1
- package/dist/browser-dev/tracking-utils.mjs.map +1 -1
- package/dist/browser-dev/useMoney.mjs.map +1 -1
- package/dist/browser-dev/useSelectedOptionInUrlParam.mjs.map +1 -1
- package/dist/browser-dev/useShopifyCookies.mjs.map +1 -1
- package/dist/browser-prod/AddToCartButton.mjs.map +1 -1
- package/dist/browser-prod/BuyNowButton.mjs.map +1 -1
- package/dist/browser-prod/CartCheckoutButton.mjs.map +1 -1
- package/dist/browser-prod/CartCost.mjs.map +1 -1
- package/dist/browser-prod/CartLineProvider.mjs.map +1 -1
- package/dist/browser-prod/CartLineQuantity.mjs.map +1 -1
- package/dist/browser-prod/CartLineQuantityAdjustButton.mjs.map +1 -1
- package/dist/browser-prod/CartProvider.mjs.map +1 -1
- package/dist/browser-prod/ExternalVideo.mjs.map +1 -1
- package/dist/browser-prod/Image.mjs.map +1 -1
- package/dist/browser-prod/MediaFile.mjs.map +1 -1
- package/dist/browser-prod/ModelViewer.mjs.map +1 -1
- package/dist/browser-prod/Money.mjs.map +1 -1
- package/dist/browser-prod/ProductPrice.mjs.map +1 -1
- package/dist/browser-prod/ProductProvider.mjs.map +1 -1
- package/dist/browser-prod/RichText.mjs.map +1 -1
- package/dist/browser-prod/ShopPayButton.mjs.map +1 -1
- package/dist/browser-prod/ShopifyProvider.mjs.map +1 -1
- package/dist/browser-prod/Video.mjs.map +1 -1
- package/dist/browser-prod/analytics-constants.mjs.map +1 -1
- package/dist/browser-prod/analytics-utils.mjs.map +1 -1
- package/dist/browser-prod/analytics.mjs.map +1 -1
- package/dist/browser-prod/cart-queries.mjs +43 -81
- package/dist/browser-prod/cart-queries.mjs.map +1 -1
- package/dist/browser-prod/codegen.helpers.mjs.map +1 -1
- package/dist/browser-prod/cookies-utils.mjs.map +1 -1
- package/dist/browser-prod/flatten-connection.mjs.map +1 -1
- package/dist/browser-prod/getProductOptions.mjs.map +1 -1
- package/dist/browser-prod/load-script.mjs.map +1 -1
- package/dist/browser-prod/optionValueDecoder.mjs.map +1 -1
- package/dist/browser-prod/packages/hydrogen-react/package.json.mjs +1 -1
- package/dist/browser-prod/parse-metafield.mjs.map +1 -1
- package/dist/browser-prod/storefront-client.mjs.map +1 -1
- package/dist/browser-prod/tracking-utils.mjs.map +1 -1
- package/dist/browser-prod/useMoney.mjs.map +1 -1
- package/dist/browser-prod/useSelectedOptionInUrlParam.mjs.map +1 -1
- package/dist/browser-prod/useShopifyCookies.mjs.map +1 -1
- package/dist/node-dev/AddToCartButton.js.map +1 -1
- package/dist/node-dev/AddToCartButton.mjs.map +1 -1
- package/dist/node-dev/BuyNowButton.js.map +1 -1
- package/dist/node-dev/BuyNowButton.mjs.map +1 -1
- package/dist/node-dev/CartCheckoutButton.js.map +1 -1
- package/dist/node-dev/CartCheckoutButton.mjs.map +1 -1
- package/dist/node-dev/CartCost.js.map +1 -1
- package/dist/node-dev/CartCost.mjs.map +1 -1
- package/dist/node-dev/CartLineProvider.js.map +1 -1
- package/dist/node-dev/CartLineProvider.mjs.map +1 -1
- package/dist/node-dev/CartLineQuantity.js.map +1 -1
- package/dist/node-dev/CartLineQuantity.mjs.map +1 -1
- package/dist/node-dev/CartLineQuantityAdjustButton.js.map +1 -1
- package/dist/node-dev/CartLineQuantityAdjustButton.mjs.map +1 -1
- package/dist/node-dev/CartProvider.js.map +1 -1
- package/dist/node-dev/CartProvider.mjs.map +1 -1
- package/dist/node-dev/ExternalVideo.js.map +1 -1
- package/dist/node-dev/ExternalVideo.mjs.map +1 -1
- package/dist/node-dev/Image.js.map +1 -1
- package/dist/node-dev/Image.mjs.map +1 -1
- package/dist/node-dev/MediaFile.js.map +1 -1
- package/dist/node-dev/MediaFile.mjs.map +1 -1
- package/dist/node-dev/ModelViewer.js.map +1 -1
- package/dist/node-dev/ModelViewer.mjs.map +1 -1
- package/dist/node-dev/Money.js.map +1 -1
- package/dist/node-dev/Money.mjs.map +1 -1
- package/dist/node-dev/ProductPrice.js.map +1 -1
- package/dist/node-dev/ProductPrice.mjs.map +1 -1
- package/dist/node-dev/ProductProvider.js.map +1 -1
- package/dist/node-dev/ProductProvider.mjs.map +1 -1
- package/dist/node-dev/RichText.js.map +1 -1
- package/dist/node-dev/RichText.mjs.map +1 -1
- package/dist/node-dev/ShopPayButton.js.map +1 -1
- package/dist/node-dev/ShopPayButton.mjs.map +1 -1
- package/dist/node-dev/ShopifyProvider.js.map +1 -1
- package/dist/node-dev/ShopifyProvider.mjs.map +1 -1
- package/dist/node-dev/Video.js.map +1 -1
- package/dist/node-dev/Video.mjs.map +1 -1
- package/dist/node-dev/analytics-constants.js.map +1 -1
- package/dist/node-dev/analytics-constants.mjs.map +1 -1
- package/dist/node-dev/analytics-utils.js.map +1 -1
- package/dist/node-dev/analytics-utils.mjs.map +1 -1
- package/dist/node-dev/analytics.js.map +1 -1
- package/dist/node-dev/analytics.mjs.map +1 -1
- package/dist/node-dev/cart-queries.js +43 -81
- package/dist/node-dev/cart-queries.js.map +1 -1
- package/dist/node-dev/cart-queries.mjs +43 -81
- package/dist/node-dev/cart-queries.mjs.map +1 -1
- package/dist/node-dev/codegen.helpers.js.map +1 -1
- package/dist/node-dev/codegen.helpers.mjs.map +1 -1
- package/dist/node-dev/cookies-utils.js.map +1 -1
- package/dist/node-dev/cookies-utils.mjs.map +1 -1
- package/dist/node-dev/flatten-connection.js.map +1 -1
- package/dist/node-dev/flatten-connection.mjs.map +1 -1
- package/dist/node-dev/getProductOptions.js.map +1 -1
- package/dist/node-dev/getProductOptions.mjs.map +1 -1
- package/dist/node-dev/load-script.js.map +1 -1
- package/dist/node-dev/load-script.mjs.map +1 -1
- package/dist/node-dev/optionValueDecoder.js.map +1 -1
- package/dist/node-dev/optionValueDecoder.mjs.map +1 -1
- package/dist/node-dev/packages/hydrogen-react/package.json.js +1 -1
- package/dist/node-dev/packages/hydrogen-react/package.json.mjs +1 -1
- package/dist/node-dev/parse-metafield.js.map +1 -1
- package/dist/node-dev/parse-metafield.mjs.map +1 -1
- package/dist/node-dev/storefront-client.js.map +1 -1
- package/dist/node-dev/storefront-client.mjs.map +1 -1
- package/dist/node-dev/tracking-utils.js.map +1 -1
- package/dist/node-dev/tracking-utils.mjs.map +1 -1
- package/dist/node-dev/useMoney.js.map +1 -1
- package/dist/node-dev/useMoney.mjs.map +1 -1
- package/dist/node-dev/useSelectedOptionInUrlParam.js.map +1 -1
- package/dist/node-dev/useSelectedOptionInUrlParam.mjs.map +1 -1
- package/dist/node-dev/useShopifyCookies.js.map +1 -1
- package/dist/node-dev/useShopifyCookies.mjs.map +1 -1
- package/dist/node-prod/AddToCartButton.js.map +1 -1
- package/dist/node-prod/AddToCartButton.mjs.map +1 -1
- package/dist/node-prod/BuyNowButton.js.map +1 -1
- package/dist/node-prod/BuyNowButton.mjs.map +1 -1
- package/dist/node-prod/CartCheckoutButton.js.map +1 -1
- package/dist/node-prod/CartCheckoutButton.mjs.map +1 -1
- package/dist/node-prod/CartCost.js.map +1 -1
- package/dist/node-prod/CartCost.mjs.map +1 -1
- package/dist/node-prod/CartLineProvider.js.map +1 -1
- package/dist/node-prod/CartLineProvider.mjs.map +1 -1
- package/dist/node-prod/CartLineQuantity.js.map +1 -1
- package/dist/node-prod/CartLineQuantity.mjs.map +1 -1
- package/dist/node-prod/CartLineQuantityAdjustButton.js.map +1 -1
- package/dist/node-prod/CartLineQuantityAdjustButton.mjs.map +1 -1
- package/dist/node-prod/CartProvider.js.map +1 -1
- package/dist/node-prod/CartProvider.mjs.map +1 -1
- package/dist/node-prod/ExternalVideo.js.map +1 -1
- package/dist/node-prod/ExternalVideo.mjs.map +1 -1
- package/dist/node-prod/Image.js.map +1 -1
- package/dist/node-prod/Image.mjs.map +1 -1
- package/dist/node-prod/MediaFile.js.map +1 -1
- package/dist/node-prod/MediaFile.mjs.map +1 -1
- package/dist/node-prod/ModelViewer.js.map +1 -1
- package/dist/node-prod/ModelViewer.mjs.map +1 -1
- package/dist/node-prod/Money.js.map +1 -1
- package/dist/node-prod/Money.mjs.map +1 -1
- package/dist/node-prod/ProductPrice.js.map +1 -1
- package/dist/node-prod/ProductPrice.mjs.map +1 -1
- package/dist/node-prod/ProductProvider.js.map +1 -1
- package/dist/node-prod/ProductProvider.mjs.map +1 -1
- package/dist/node-prod/RichText.js.map +1 -1
- package/dist/node-prod/RichText.mjs.map +1 -1
- package/dist/node-prod/ShopPayButton.js.map +1 -1
- package/dist/node-prod/ShopPayButton.mjs.map +1 -1
- package/dist/node-prod/ShopifyProvider.js.map +1 -1
- package/dist/node-prod/ShopifyProvider.mjs.map +1 -1
- package/dist/node-prod/Video.js.map +1 -1
- package/dist/node-prod/Video.mjs.map +1 -1
- package/dist/node-prod/analytics-constants.js.map +1 -1
- package/dist/node-prod/analytics-constants.mjs.map +1 -1
- package/dist/node-prod/analytics-utils.js.map +1 -1
- package/dist/node-prod/analytics-utils.mjs.map +1 -1
- package/dist/node-prod/analytics.js.map +1 -1
- package/dist/node-prod/analytics.mjs.map +1 -1
- package/dist/node-prod/cart-queries.js +43 -81
- package/dist/node-prod/cart-queries.js.map +1 -1
- package/dist/node-prod/cart-queries.mjs +43 -81
- package/dist/node-prod/cart-queries.mjs.map +1 -1
- package/dist/node-prod/codegen.helpers.js.map +1 -1
- package/dist/node-prod/codegen.helpers.mjs.map +1 -1
- package/dist/node-prod/cookies-utils.js.map +1 -1
- package/dist/node-prod/cookies-utils.mjs.map +1 -1
- package/dist/node-prod/flatten-connection.js.map +1 -1
- package/dist/node-prod/flatten-connection.mjs.map +1 -1
- package/dist/node-prod/getProductOptions.js.map +1 -1
- package/dist/node-prod/getProductOptions.mjs.map +1 -1
- package/dist/node-prod/load-script.js.map +1 -1
- package/dist/node-prod/load-script.mjs.map +1 -1
- package/dist/node-prod/optionValueDecoder.js.map +1 -1
- package/dist/node-prod/optionValueDecoder.mjs.map +1 -1
- package/dist/node-prod/packages/hydrogen-react/package.json.js +1 -1
- package/dist/node-prod/packages/hydrogen-react/package.json.mjs +1 -1
- package/dist/node-prod/parse-metafield.js.map +1 -1
- package/dist/node-prod/parse-metafield.mjs.map +1 -1
- package/dist/node-prod/storefront-client.js.map +1 -1
- package/dist/node-prod/storefront-client.mjs.map +1 -1
- package/dist/node-prod/tracking-utils.js.map +1 -1
- package/dist/node-prod/tracking-utils.mjs.map +1 -1
- package/dist/node-prod/useMoney.js.map +1 -1
- package/dist/node-prod/useMoney.mjs.map +1 -1
- package/dist/node-prod/useSelectedOptionInUrlParam.js.map +1 -1
- package/dist/node-prod/useSelectedOptionInUrlParam.mjs.map +1 -1
- package/dist/node-prod/useShopifyCookies.js.map +1 -1
- package/dist/node-prod/useShopifyCookies.mjs.map +1 -1
- package/dist/types/AddToCartButton.d.ts +2 -0
- package/dist/types/BuyNowButton.d.ts +2 -0
- package/dist/types/CartCheckoutButton.d.ts +2 -0
- package/dist/types/CartCost.d.ts +2 -0
- package/dist/types/CartLineProvider.d.ts +2 -0
- package/dist/types/CartLineQuantity.d.ts +2 -0
- package/dist/types/CartLineQuantityAdjustButton.d.ts +1 -0
- package/dist/types/CartProvider.d.ts +7 -1
- package/dist/types/ExternalVideo.d.ts +4 -0
- package/dist/types/Image.d.ts +2 -0
- package/dist/types/MediaFile.d.ts +4 -0
- package/dist/types/ModelViewer.d.ts +1 -0
- package/dist/types/Money.d.ts +1 -0
- package/dist/types/ProductPrice.d.ts +2 -0
- package/dist/types/ProductProvider.d.ts +2 -0
- package/dist/types/RichText.d.ts +2 -0
- package/dist/types/ShopPayButton.d.ts +1 -0
- package/dist/types/ShopifyProvider.d.ts +2 -0
- package/dist/types/Video.d.ts +2 -0
- package/dist/types/analytics-constants.d.ts +9 -0
- package/dist/types/analytics-types.d.ts +1 -0
- package/dist/types/analytics-utils.d.ts +1 -0
- package/dist/types/analytics.d.ts +6 -1
- package/dist/types/cart-queries.d.ts +13 -9
- package/dist/types/codegen.helpers.d.ts +2 -0
- package/dist/types/cookies-utils.d.ts +2 -1
- package/dist/types/flatten-connection.d.ts +3 -0
- package/dist/types/getProductOptions.d.ts +3 -0
- package/dist/types/load-script.d.ts +3 -1
- package/dist/types/optionValueDecoder.d.ts +3 -0
- package/dist/types/parse-metafield.d.ts +1 -0
- package/dist/types/storefront-client.d.ts +1 -0
- package/dist/types/tracking-utils.d.ts +2 -2
- package/dist/types/useMoney.d.ts +1 -0
- package/dist/types/useSelectedOptionInUrlParam.d.ts +1 -0
- package/dist/types/useShopifyCookies.d.ts +1 -0
- package/dist/umd/hydrogen-react.dev.js +44 -82
- package/dist/umd/hydrogen-react.dev.js.map +1 -1
- package/dist/umd/hydrogen-react.prod.js +43 -88
- package/dist/umd/hydrogen-react.prod.js.map +1 -1
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tracking-utils.mjs","sources":["../../src/tracking-utils.ts"],"sourcesContent":["/** Storefront API header for VisitToken */\nexport const SHOPIFY_VISIT_TOKEN_HEADER = 'X-Shopify-VisitToken';\n/** Storefront API header for UniqueToken */\nexport const SHOPIFY_UNIQUE_TOKEN_HEADER = 'X-Shopify-UniqueToken';\n\ntype TrackingValues = {\n /** Identifier for the unique user. Equivalent to the deprecated _shopify_y cookie */\n uniqueToken: string;\n /** Identifier for the current visit. Equivalent to the deprecated _shopify_s cookie */\n visitToken: string;\n /** Represents the consent given by the user or the default region consent configured in Admin */\n consent: string;\n};\n\n// Cache values to avoid losing them when performance\n// entries are cleared from the buffer over time.\nexport const cachedTrackingValues: {\n current: null | TrackingValues;\n} = {current: null};\n\n/**\n * Retrieves user session tracking values for analytics
|
|
1
|
+
{"version":3,"file":"tracking-utils.mjs","sources":["../../src/tracking-utils.ts"],"sourcesContent":["/** Storefront API header for VisitToken */\nexport const SHOPIFY_VISIT_TOKEN_HEADER = 'X-Shopify-VisitToken';\n/** Storefront API header for UniqueToken */\nexport const SHOPIFY_UNIQUE_TOKEN_HEADER = 'X-Shopify-UniqueToken';\n\ntype TrackingValues = {\n /** Identifier for the unique user. Equivalent to the deprecated _shopify_y cookie */\n uniqueToken: string;\n /** Identifier for the current visit. Equivalent to the deprecated _shopify_s cookie */\n visitToken: string;\n /** Represents the consent given by the user or the default region consent configured in Admin */\n consent: string;\n};\n\n// Cache values to avoid losing them when performance\n// entries are cleared from the buffer over time.\nexport const cachedTrackingValues: {\n current: null | TrackingValues;\n} = {current: null};\n\n/**\n * Retrieves user session tracking values for analytics and marketing from the browser environment.\n * @publicDocs\n */\nexport function getTrackingValues(): TrackingValues {\n // Overall behavior: Tracking values are returned in Server-Timing headers from\n // Storefront API responses, and we want to find and return these tracking values.\n //\n // Search recent fetches for SFAPI requests matching either: same origin (proxy case)\n // or a subdomain of the current host (eg: checkout subdomain, if there is no proxy).\n // We consider SF API-like endpoints (/api/.../graphql.json) on subdomains, as well as\n // any same-origin request. The reason for the latter is that Hydrogen server collects\n // tracking values and returns them in any non-cached response, not just direct SF API\n // responses. For example, a cart mutation in a server action could return tracking values.\n //\n // If we didn't find tracking values in fetch requests, we fall back to checking cached values,\n // then the initial page navigation entry, and finally the deprecated `_shopify_s` and `_shopify_y`.\n\n let trackingValues: TrackingValues | undefined;\n\n if (\n typeof window !== 'undefined' &&\n typeof window.performance !== 'undefined'\n ) {\n try {\n // RE to extract host and optionally match SFAPI pathname.\n // Group 1: host (e.g. \"checkout.mystore.com\")\n // Group 2: SFAPI path if present (e.g. \"/api/2024-01/graphql.json\")\n const resourceRE =\n /^https?:\\/\\/([^/]+)(\\/api\\/(?:unstable|2\\d{3}-\\d{2})\\/graphql\\.json(?=$|\\?))?/;\n\n // Search backwards through resource entries to find the most recent match.\n // Match criteria (first one with _y and _s values wins):\n // - Same origin (exact host match) with tracking values, OR\n // - Subdomain + SFAPI pathname with tracking values\n const entries = performance.getEntriesByType(\n 'resource',\n ) as PerformanceResourceTiming[];\n\n let matchedValues: ReturnType<typeof extractFromPerformanceEntry>;\n\n for (let i = entries.length - 1; i >= 0; i--) {\n const entry = entries[i];\n\n if (entry.initiatorType !== 'fetch') continue;\n\n const currentHost = window.location.host;\n const match = entry.name.match(resourceRE);\n if (!match) continue;\n\n const [, matchedHost, sfapiPath] = match;\n\n const isMatch =\n // Same origin (exact host match)\n matchedHost === currentHost ||\n // Subdomain with SFAPI path\n (sfapiPath && matchedHost?.endsWith(`.${currentHost}`));\n\n if (isMatch) {\n const values = extractFromPerformanceEntry(entry);\n if (values) {\n matchedValues = values;\n break;\n }\n }\n }\n\n if (matchedValues) {\n trackingValues = matchedValues;\n }\n\n // Resource entries have a limited buffer and are removed over time.\n // Cache the latest values for future calls if we find them.\n // A cached resource entry is always newer than a navigation entry.\n if (trackingValues) {\n cachedTrackingValues.current = trackingValues;\n } else if (cachedTrackingValues.current) {\n // Fallback to cached values from previous calls:\n trackingValues = cachedTrackingValues.current;\n }\n\n if (!trackingValues) {\n // Fallback to navigation entry from full page rendering load:\n const navigationEntries = performance.getEntriesByType(\n 'navigation',\n )[0] as PerformanceNavigationTiming;\n\n // Navigation entries might omit consent when the Hydrogen server generates it.\n // In this case, we skip consent requirement and only extract _y and _s values.\n trackingValues = extractFromPerformanceEntry(navigationEntries, false);\n }\n } catch {}\n }\n\n // Fallback to deprecated cookies to support transitioning:\n if (!trackingValues) {\n const cookie =\n // Read from arguments to avoid declaring parameters in this function signature.\n // This logic is only used internally from `getShopifyCookies` and will be deprecated.\n typeof arguments[0] === 'string'\n ? arguments[0]\n : typeof document !== 'undefined'\n ? document.cookie\n : '';\n\n trackingValues = {\n uniqueToken: cookie.match(/\\b_shopify_y=([^;]+)/)?.[1] || '',\n visitToken: cookie.match(/\\b_shopify_s=([^;]+)/)?.[1] || '',\n consent: cookie.match(/\\b_tracking_consent=([^;]+)/)?.[1] || '',\n };\n }\n\n return trackingValues;\n}\n\nfunction extractFromPerformanceEntry(\n entry: PerformanceNavigationTiming | PerformanceResourceTiming,\n isConsentRequired = true,\n): TrackingValues | undefined {\n let uniqueToken = '';\n let visitToken = '';\n let consent = '';\n\n const serverTiming = entry.serverTiming;\n // Quick check: we need at least 3 entries (_y, _s, _cmp)\n if (serverTiming && serverTiming.length >= 3) {\n // Iterate backwards since our headers are typically at the end\n for (let i = serverTiming.length - 1; i >= 0; i--) {\n const {name, description} = serverTiming[i];\n if (!name || !description) continue;\n\n if (name === '_y') {\n uniqueToken = description;\n } else if (name === '_s') {\n visitToken = description;\n } else if (name === '_cmp') {\n // _cmp (consent management platform) holds the consent value\n // used by consent-tracking-api and privacy-banner scripts.\n consent = description;\n }\n\n if (uniqueToken && visitToken && consent) break;\n }\n }\n\n return uniqueToken && visitToken && (isConsentRequired ? consent : true)\n ? {uniqueToken, visitToken, consent}\n : undefined;\n}\n"],"names":[],"mappings":"AACO,MAAM,6BAA6B;AAEnC,MAAM,8BAA8B;AAapC,MAAM,uBAET,EAAC,SAAS,KAAA;AAMP,SAAS,oBAAoC;AAvB7C;AAqCL,MAAI;AAEJ,MACE,OAAO,WAAW,eAClB,OAAO,OAAO,gBAAgB,aAC9B;AACA,QAAI;AAIF,YAAM,aACJ;AAMF,YAAM,UAAU,YAAY;AAAA,QAC1B;AAAA,MAAA;AAGF,UAAI;AAEJ,eAAS,IAAI,QAAQ,SAAS,GAAG,KAAK,GAAG,KAAK;AAC5C,cAAM,QAAQ,QAAQ,CAAC;AAEvB,YAAI,MAAM,kBAAkB,QAAS;AAErC,cAAM,cAAc,OAAO,SAAS;AACpC,cAAM,QAAQ,MAAM,KAAK,MAAM,UAAU;AACzC,YAAI,CAAC,MAAO;AAEZ,cAAM,CAAA,EAAG,aAAa,SAAS,IAAI;AAEnC,cAAM;AAAA;AAAA,UAEJ,gBAAgB;AAAA,UAEf,cAAa,2CAAa,SAAS,IAAI,WAAW;AAAA;AAErD,YAAI,SAAS;AACX,gBAAM,SAAS,4BAA4B,KAAK;AAChD,cAAI,QAAQ;AACV,4BAAgB;AAChB;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAEA,UAAI,eAAe;AACjB,yBAAiB;AAAA,MACnB;AAKA,UAAI,gBAAgB;AAClB,6BAAqB,UAAU;AAAA,MACjC,WAAW,qBAAqB,SAAS;AAEvC,yBAAiB,qBAAqB;AAAA,MACxC;AAEA,UAAI,CAAC,gBAAgB;AAEnB,cAAM,oBAAoB,YAAY;AAAA,UACpC;AAAA,QAAA,EACA,CAAC;AAIH,yBAAiB,4BAA4B,mBAAmB,KAAK;AAAA,MACvE;AAAA,IACF,QAAQ;AAAA,IAAC;AAAA,EACX;AAGA,MAAI,CAAC,gBAAgB;AACnB,UAAM;AAAA;AAAA;AAAA,MAGJ,OAAO,UAAU,CAAC,MAAM,WACpB,UAAU,CAAC,IACX,OAAO,aAAa,cAClB,SAAS,SACT;AAAA;AAER,qBAAiB;AAAA,MACf,eAAa,YAAO,MAAM,sBAAsB,MAAnC,mBAAuC,OAAM;AAAA,MAC1D,cAAY,YAAO,MAAM,sBAAsB,MAAnC,mBAAuC,OAAM;AAAA,MACzD,WAAS,YAAO,MAAM,6BAA6B,MAA1C,mBAA8C,OAAM;AAAA,IAAA;AAAA,EAEjE;AAEA,SAAO;AACT;AAEA,SAAS,4BACP,OACA,oBAAoB,MACQ;AAC5B,MAAI,cAAc;AAClB,MAAI,aAAa;AACjB,MAAI,UAAU;AAEd,QAAM,eAAe,MAAM;AAE3B,MAAI,gBAAgB,aAAa,UAAU,GAAG;AAE5C,aAAS,IAAI,aAAa,SAAS,GAAG,KAAK,GAAG,KAAK;AACjD,YAAM,EAAC,MAAM,gBAAe,aAAa,CAAC;AAC1C,UAAI,CAAC,QAAQ,CAAC,YAAa;AAE3B,UAAI,SAAS,MAAM;AACjB,sBAAc;AAAA,MAChB,WAAW,SAAS,MAAM;AACxB,qBAAa;AAAA,MACf,WAAW,SAAS,QAAQ;AAG1B,kBAAU;AAAA,MACZ;AAEA,UAAI,eAAe,cAAc,QAAS;AAAA,IAC5C;AAAA,EACF;AAEA,SAAO,eAAe,eAAe,oBAAoB,UAAU,QAC/D,EAAC,aAAa,YAAY,QAAA,IAC1B;AACN;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useMoney.js","sources":["../../src/useMoney.tsx"],"sourcesContent":["import {useMemo} from 'react';\nimport {useShop} from './ShopifyProvider.js';\nimport {\n CurrencyCode as StorefrontApiCurrencyCode,\n MoneyV2 as StorefrontApiMoneyV2,\n} from './storefront-api-types.js';\nimport type {\n MoneyV2 as CustomerAccountApiMoneyV2,\n CurrencyCode as CustomerAccountApiCurrencyCode,\n} from './customer-account-api-types.js';\n\n// Support MoneyV2 from both Storefront API and Customer Account API\n// The APIs may have different CurrencyCode enums\n/**\n * Supports MoneyV2 from both Storefront API and Customer Account API.\n * The APIs may have different CurrencyCode enums (e.g., Customer Account API added USDC in 2025-10, but Storefront API doesn't support USDC in 2025-10).\n * This union type ensures useMoney works with data from either API.\n */\ntype MoneyV2 = StorefrontApiMoneyV2 | CustomerAccountApiMoneyV2;\n\n/**\n * Supports CurrencyCode from both Storefront API and Customer Account API. The APIs may have different CurrencyCode enums (e.g., Customer Account API added USDC in 2025-10, but Storefront API doesn't support USDC in 2025-10).\n * This union type ensures useMoney works with data from either API.\n */\ntype CurrencyCode = StorefrontApiCurrencyCode | CustomerAccountApiCurrencyCode;\n\nexport type UseMoneyValue = {\n /**\n * The currency code from the `MoneyV2` object.\n */\n currencyCode: CurrencyCode;\n /**\n * The name for the currency code, returned by `Intl.NumberFormat`.\n */\n currencyName?: string;\n /**\n * The currency symbol returned by `Intl.NumberFormat`.\n */\n currencySymbol?: string;\n /**\n * The currency narrow symbol returned by `Intl.NumberFormat`.\n */\n currencyNarrowSymbol?: string;\n /**\n * The localized amount, without any currency symbols or non-number types from the `Intl.NumberFormat.formatToParts` parts.\n */\n amount: string;\n /**\n * All parts returned by `Intl.NumberFormat.formatToParts`.\n */\n parts: Intl.NumberFormatPart[];\n /**\n * A string returned by `new Intl.NumberFormat` for the amount and currency code,\n * using the `locale` value in the [`LocalizationProvider` component](https://shopify.dev/api/hydrogen/components/localization/localizationprovider).\n */\n localizedString: string;\n /**\n * The `MoneyV2` object provided as an argument to the hook.\n */\n original: MoneyV2;\n /**\n * A string with trailing zeros removed from the fractional part, if any exist. If there are no trailing zeros, then the fractional part remains.\n * For example, `$640.00` turns into `$640`.\n * `$640.42` remains `$640.42`.\n */\n withoutTrailingZeros: string;\n /**\n * A string without currency and without trailing zeros removed from the fractional part, if any exist. If there are no trailing zeros, then the fractional part remains.\n * For example, `$640.00` turns into `640`.\n * `$640.42` turns into `640.42`.\n */\n withoutTrailingZerosAndCurrency: string;\n};\n\n/**\n * The `useMoney` hook takes a [MoneyV2 object from the Storefront API](https://shopify.dev/docs/api/storefront/2026-04/objects/MoneyV2)\n * or a [MoneyV2 object from the Customer Account API](https://shopify.dev/docs/api/customer/2026-04/objects/moneyv2) and returns a\n * default-formatted string of the amount with the correct currency indicator, along with some of the parts provided by\n * [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat).\n * Uses `locale` from `ShopifyProvider`\n * \n * @see {@link https://shopify.dev/api/hydrogen/hooks/usemoney}\n * @example initialize the money object\n * ```ts\n * const money = useMoney({\n * amount: '100.00',\n * currencyCode: 'USD'\n * })\n * ```\n * \n *\n * @example basic usage, outputs: $100.00\n * ```ts\n * money.localizedString\n * ```\n * \n *\n * @example without currency, outputs: 100.00\n * ```ts\n * money.amount\n * ```\n * \n *\n * @example without trailing zeros, outputs: $100\n * ```ts\n * money.withoutTrailingZeros\n * ```\n * \n *\n * @example currency name, outputs: US dollars\n * ```ts\n * money.currencyCode\n * ```\n * \n *\n * @example currency symbol, outputs: $\n * ```ts\n * money.currencySymbol\n * ```\n * \n *\n * @example without currency and without trailing zeros, outputs: 100\n * ```ts\n * money.withoutTrailingZerosAndCurrency\n * ```\n */\nexport function useMoney(money: MoneyV2): UseMoneyValue {\n const {countryIsoCode, languageIsoCode} = useShop();\n const locale = languageIsoCode.includes('_')\n ? languageIsoCode.replace('_', '-')\n : `${languageIsoCode}-${countryIsoCode}`;\n\n if (!locale) {\n throw new Error(\n `useMoney(): Unable to get 'locale' from 'useShop()', which means that 'locale' was not passed to '<ShopifyProvider/>'. 'locale' is required for 'useMoney()' to work`,\n );\n }\n\n const amount = parseFloat(money.amount);\n\n // Check if the currency code is supported by Intl.NumberFormat\n let isCurrencySupported = true;\n try {\n new Intl.NumberFormat(locale, {\n style: 'currency',\n currency: money.currencyCode,\n });\n } catch (e) {\n if (e instanceof RangeError && e.message.includes('currency')) {\n isCurrencySupported = false;\n }\n }\n\n const {\n defaultFormatter,\n nameFormatter,\n narrowSymbolFormatter,\n withoutTrailingZerosFormatter,\n withoutCurrencyFormatter,\n withoutTrailingZerosOrCurrencyFormatter,\n } = useMemo(() => {\n // For unsupported currencies (like USDC cryptocurrency), use decimal formatting with 2 decimal places\n // We default to 2 decimal places based on research showing USDC displays like USD to reinforce its 1:1 peg\n const options = isCurrencySupported\n ? {\n style: 'currency' as const,\n currency: money.currencyCode,\n }\n : {\n style: 'decimal' as const,\n minimumFractionDigits: 2,\n maximumFractionDigits: 2,\n };\n\n return {\n defaultFormatter: getLazyFormatter(locale, options),\n nameFormatter: getLazyFormatter(locale, {\n ...options,\n currencyDisplay: 'name',\n }),\n narrowSymbolFormatter: getLazyFormatter(locale, {\n ...options,\n currencyDisplay: 'narrowSymbol',\n }),\n withoutTrailingZerosFormatter: getLazyFormatter(locale, {\n ...options,\n minimumFractionDigits: 0,\n maximumFractionDigits: 0,\n }),\n withoutCurrencyFormatter: getLazyFormatter(locale, {\n minimumFractionDigits: 2,\n maximumFractionDigits: 2,\n }),\n withoutTrailingZerosOrCurrencyFormatter: getLazyFormatter(locale, {\n minimumFractionDigits: 0,\n maximumFractionDigits: 0,\n }),\n };\n }, [money.currencyCode, locale, isCurrencySupported]);\n\n const isPartCurrency = (part: Intl.NumberFormatPart): boolean =>\n part.type === 'currency';\n\n // By wrapping these properties in functions, we only\n // create formatters if they are going to be used.\n const lazyFormatters = useMemo(\n () => ({\n original: (): MoneyV2 => money,\n currencyCode: (): CurrencyCode => money.currencyCode,\n\n localizedString: (): string => {\n const formatted = defaultFormatter().format(amount);\n // For unsupported currencies, append the currency code\n return isCurrencySupported\n ? formatted\n : `${formatted} ${money.currencyCode}`;\n },\n\n parts: (): Intl.NumberFormatPart[] => {\n const parts = defaultFormatter().formatToParts(amount);\n // For unsupported currencies, add currency code as a currency part\n if (!isCurrencySupported) {\n parts.push(\n {type: 'literal', value: ' '},\n {type: 'currency', value: money.currencyCode},\n );\n }\n return parts;\n },\n\n withoutTrailingZeros: (): string => {\n const formatted =\n amount % 1 === 0\n ? withoutTrailingZerosFormatter().format(amount)\n : defaultFormatter().format(amount);\n // For unsupported currencies, append the currency code\n return isCurrencySupported\n ? formatted\n : `${formatted} ${money.currencyCode}`;\n },\n\n withoutTrailingZerosAndCurrency: (): string =>\n amount % 1 === 0\n ? withoutTrailingZerosOrCurrencyFormatter().format(amount)\n : withoutCurrencyFormatter().format(amount),\n\n currencyName: (): string =>\n nameFormatter().formatToParts(amount).find(isPartCurrency)?.value ??\n money.currencyCode, // e.g. \"US dollars\"\n\n currencySymbol: (): string =>\n defaultFormatter().formatToParts(amount).find(isPartCurrency)?.value ??\n money.currencyCode, // e.g. \"USD\"\n\n currencyNarrowSymbol: (): string =>\n narrowSymbolFormatter().formatToParts(amount).find(isPartCurrency)\n ?.value ?? '', // e.g. \"$\"\n\n amount: (): string =>\n defaultFormatter()\n .formatToParts(amount)\n .filter((part) =>\n ['decimal', 'fraction', 'group', 'integer', 'literal'].includes(\n part.type,\n ),\n )\n .map((part) => part.value)\n .join(''),\n }),\n [\n money,\n amount,\n isCurrencySupported,\n nameFormatter,\n defaultFormatter,\n narrowSymbolFormatter,\n withoutCurrencyFormatter,\n withoutTrailingZerosFormatter,\n withoutTrailingZerosOrCurrencyFormatter,\n ],\n );\n\n // Call functions automatically when the properties are accessed\n // to keep these functions as an implementation detail.\n return useMemo(\n () =>\n new Proxy(lazyFormatters as unknown as UseMoneyValue, {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call\n get: (target, key) => Reflect.get(target, key)?.call(null),\n }),\n [lazyFormatters],\n );\n}\n\nconst formatterCache = new Map<string, Intl.NumberFormat>();\n\nfunction getLazyFormatter(\n locale: string,\n options?: Intl.NumberFormatOptions,\n): () => Intl.NumberFormat {\n const key = JSON.stringify([locale, options]);\n\n return function (): Intl.NumberFormat {\n let formatter = formatterCache.get(key);\n if (!formatter) {\n try {\n formatter = new Intl.NumberFormat(locale, options);\n } catch (error) {\n // Handle unsupported currency codes (e.g., USDC from Customer Account API)\n // Fall back to formatting without currency\n if (error instanceof RangeError && error.message.includes('currency')) {\n const fallbackOptions = {...options};\n delete fallbackOptions.currency;\n delete fallbackOptions.currencyDisplay;\n delete fallbackOptions.currencySign;\n formatter = new Intl.NumberFormat(locale, fallbackOptions);\n } else {\n throw error;\n }\n }\n formatterCache.set(key, formatter);\n }\n return formatter;\n };\n}\n"],"names":["useShop","useMemo"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"useMoney.js","sources":["../../src/useMoney.tsx"],"sourcesContent":["import {useMemo} from 'react';\nimport {useShop} from './ShopifyProvider.js';\nimport {\n CurrencyCode as StorefrontApiCurrencyCode,\n MoneyV2 as StorefrontApiMoneyV2,\n} from './storefront-api-types.js';\nimport type {\n MoneyV2 as CustomerAccountApiMoneyV2,\n CurrencyCode as CustomerAccountApiCurrencyCode,\n} from './customer-account-api-types.js';\n\n// Support MoneyV2 from both Storefront API and Customer Account API\n// The APIs may have different CurrencyCode enums\n/**\n * Supports MoneyV2 from both Storefront API and Customer Account API.\n * The APIs may have different CurrencyCode enums (e.g., Customer Account API added USDC in 2025-10, but Storefront API doesn't support USDC in 2025-10).\n * This union type ensures useMoney works with data from either API.\n */\ntype MoneyV2 = StorefrontApiMoneyV2 | CustomerAccountApiMoneyV2;\n\n/**\n * Supports CurrencyCode from both Storefront API and Customer Account API. The APIs may have different CurrencyCode enums (e.g., Customer Account API added USDC in 2025-10, but Storefront API doesn't support USDC in 2025-10).\n * This union type ensures useMoney works with data from either API.\n */\ntype CurrencyCode = StorefrontApiCurrencyCode | CustomerAccountApiCurrencyCode;\n\nexport type UseMoneyValue = {\n /**\n * The currency code from the `MoneyV2` object.\n */\n currencyCode: CurrencyCode;\n /**\n * The name for the currency code, returned by `Intl.NumberFormat`.\n */\n currencyName?: string;\n /**\n * The currency symbol returned by `Intl.NumberFormat`.\n */\n currencySymbol?: string;\n /**\n * The currency narrow symbol returned by `Intl.NumberFormat`.\n */\n currencyNarrowSymbol?: string;\n /**\n * The localized amount, without any currency symbols or non-number types from the `Intl.NumberFormat.formatToParts` parts.\n */\n amount: string;\n /**\n * All parts returned by `Intl.NumberFormat.formatToParts`.\n */\n parts: Intl.NumberFormatPart[];\n /**\n * A string returned by `new Intl.NumberFormat` for the amount and currency code,\n * using the `locale` value in the [`LocalizationProvider` component](https://shopify.dev/api/hydrogen/components/localization/localizationprovider).\n */\n localizedString: string;\n /**\n * The `MoneyV2` object provided as an argument to the hook.\n */\n original: MoneyV2;\n /**\n * A string with trailing zeros removed from the fractional part, if any exist. If there are no trailing zeros, then the fractional part remains.\n * For example, `$640.00` turns into `$640`.\n * `$640.42` remains `$640.42`.\n */\n withoutTrailingZeros: string;\n /**\n * A string without currency and without trailing zeros removed from the fractional part, if any exist. If there are no trailing zeros, then the fractional part remains.\n * For example, `$640.00` turns into `640`.\n * `$640.42` turns into `640.42`.\n */\n withoutTrailingZerosAndCurrency: string;\n};\n\n/**\n * The `useMoney` hook takes a [MoneyV2 object from the Storefront API](https://shopify.dev/docs/api/storefront/2026-04/objects/MoneyV2)\n * or a [MoneyV2 object from the Customer Account API](https://shopify.dev/docs/api/customer/2026-04/objects/moneyv2) and returns a\n * default-formatted string of the amount with the correct currency indicator, along with some of the parts provided by\n * [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat).\n * Uses `locale` from `ShopifyProvider`\n * \n * @see {@link https://shopify.dev/api/hydrogen/hooks/usemoney}\n * @example initialize the money object\n * ```ts\n * const money = useMoney({\n * amount: '100.00',\n * currencyCode: 'USD'\n * })\n * ```\n * \n *\n * @example basic usage, outputs: $100.00\n * ```ts\n * money.localizedString\n * ```\n * \n *\n * @example without currency, outputs: 100.00\n * ```ts\n * money.amount\n * ```\n * \n *\n * @example without trailing zeros, outputs: $100\n * ```ts\n * money.withoutTrailingZeros\n * ```\n * \n *\n * @example currency name, outputs: US dollars\n * ```ts\n * money.currencyCode\n * ```\n * \n *\n * @example currency symbol, outputs: $\n * ```ts\n * money.currencySymbol\n * ```\n * \n *\n * @example without currency and without trailing zeros, outputs: 100\n * ```ts\n * money.withoutTrailingZerosAndCurrency\n * ```\n * @publicDocs\n */\nexport function useMoney(money: MoneyV2): UseMoneyValue {\n const {countryIsoCode, languageIsoCode} = useShop();\n const locale = languageIsoCode.includes('_')\n ? languageIsoCode.replace('_', '-')\n : `${languageIsoCode}-${countryIsoCode}`;\n\n if (!locale) {\n throw new Error(\n `useMoney(): Unable to get 'locale' from 'useShop()', which means that 'locale' was not passed to '<ShopifyProvider/>'. 'locale' is required for 'useMoney()' to work`,\n );\n }\n\n const amount = parseFloat(money.amount);\n\n // Check if the currency code is supported by Intl.NumberFormat\n let isCurrencySupported = true;\n try {\n new Intl.NumberFormat(locale, {\n style: 'currency',\n currency: money.currencyCode,\n });\n } catch (e) {\n if (e instanceof RangeError && e.message.includes('currency')) {\n isCurrencySupported = false;\n }\n }\n\n const {\n defaultFormatter,\n nameFormatter,\n narrowSymbolFormatter,\n withoutTrailingZerosFormatter,\n withoutCurrencyFormatter,\n withoutTrailingZerosOrCurrencyFormatter,\n } = useMemo(() => {\n // For unsupported currencies (like USDC cryptocurrency), use decimal formatting with 2 decimal places\n // We default to 2 decimal places based on research showing USDC displays like USD to reinforce its 1:1 peg\n const options = isCurrencySupported\n ? {\n style: 'currency' as const,\n currency: money.currencyCode,\n }\n : {\n style: 'decimal' as const,\n minimumFractionDigits: 2,\n maximumFractionDigits: 2,\n };\n\n return {\n defaultFormatter: getLazyFormatter(locale, options),\n nameFormatter: getLazyFormatter(locale, {\n ...options,\n currencyDisplay: 'name',\n }),\n narrowSymbolFormatter: getLazyFormatter(locale, {\n ...options,\n currencyDisplay: 'narrowSymbol',\n }),\n withoutTrailingZerosFormatter: getLazyFormatter(locale, {\n ...options,\n minimumFractionDigits: 0,\n maximumFractionDigits: 0,\n }),\n withoutCurrencyFormatter: getLazyFormatter(locale, {\n minimumFractionDigits: 2,\n maximumFractionDigits: 2,\n }),\n withoutTrailingZerosOrCurrencyFormatter: getLazyFormatter(locale, {\n minimumFractionDigits: 0,\n maximumFractionDigits: 0,\n }),\n };\n }, [money.currencyCode, locale, isCurrencySupported]);\n\n const isPartCurrency = (part: Intl.NumberFormatPart): boolean =>\n part.type === 'currency';\n\n // By wrapping these properties in functions, we only\n // create formatters if they are going to be used.\n const lazyFormatters = useMemo(\n () => ({\n original: (): MoneyV2 => money,\n currencyCode: (): CurrencyCode => money.currencyCode,\n\n localizedString: (): string => {\n const formatted = defaultFormatter().format(amount);\n // For unsupported currencies, append the currency code\n return isCurrencySupported\n ? formatted\n : `${formatted} ${money.currencyCode}`;\n },\n\n parts: (): Intl.NumberFormatPart[] => {\n const parts = defaultFormatter().formatToParts(amount);\n // For unsupported currencies, add currency code as a currency part\n if (!isCurrencySupported) {\n parts.push(\n {type: 'literal', value: ' '},\n {type: 'currency', value: money.currencyCode},\n );\n }\n return parts;\n },\n\n withoutTrailingZeros: (): string => {\n const formatted =\n amount % 1 === 0\n ? withoutTrailingZerosFormatter().format(amount)\n : defaultFormatter().format(amount);\n // For unsupported currencies, append the currency code\n return isCurrencySupported\n ? formatted\n : `${formatted} ${money.currencyCode}`;\n },\n\n withoutTrailingZerosAndCurrency: (): string =>\n amount % 1 === 0\n ? withoutTrailingZerosOrCurrencyFormatter().format(amount)\n : withoutCurrencyFormatter().format(amount),\n\n currencyName: (): string =>\n nameFormatter().formatToParts(amount).find(isPartCurrency)?.value ??\n money.currencyCode, // e.g. \"US dollars\"\n\n currencySymbol: (): string =>\n defaultFormatter().formatToParts(amount).find(isPartCurrency)?.value ??\n money.currencyCode, // e.g. \"USD\"\n\n currencyNarrowSymbol: (): string =>\n narrowSymbolFormatter().formatToParts(amount).find(isPartCurrency)\n ?.value ?? '', // e.g. \"$\"\n\n amount: (): string =>\n defaultFormatter()\n .formatToParts(amount)\n .filter((part) =>\n ['decimal', 'fraction', 'group', 'integer', 'literal'].includes(\n part.type,\n ),\n )\n .map((part) => part.value)\n .join(''),\n }),\n [\n money,\n amount,\n isCurrencySupported,\n nameFormatter,\n defaultFormatter,\n narrowSymbolFormatter,\n withoutCurrencyFormatter,\n withoutTrailingZerosFormatter,\n withoutTrailingZerosOrCurrencyFormatter,\n ],\n );\n\n // Call functions automatically when the properties are accessed\n // to keep these functions as an implementation detail.\n return useMemo(\n () =>\n new Proxy(lazyFormatters as unknown as UseMoneyValue, {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call\n get: (target, key) => Reflect.get(target, key)?.call(null),\n }),\n [lazyFormatters],\n );\n}\n\nconst formatterCache = new Map<string, Intl.NumberFormat>();\n\nfunction getLazyFormatter(\n locale: string,\n options?: Intl.NumberFormatOptions,\n): () => Intl.NumberFormat {\n const key = JSON.stringify([locale, options]);\n\n return function (): Intl.NumberFormat {\n let formatter = formatterCache.get(key);\n if (!formatter) {\n try {\n formatter = new Intl.NumberFormat(locale, options);\n } catch (error) {\n // Handle unsupported currency codes (e.g., USDC from Customer Account API)\n // Fall back to formatting without currency\n if (error instanceof RangeError && error.message.includes('currency')) {\n const fallbackOptions = {...options};\n delete fallbackOptions.currency;\n delete fallbackOptions.currencyDisplay;\n delete fallbackOptions.currencySign;\n formatter = new Intl.NumberFormat(locale, fallbackOptions);\n } else {\n throw error;\n }\n }\n formatterCache.set(key, formatter);\n }\n return formatter;\n };\n}\n"],"names":["useShop","useMemo"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useMoney.mjs","sources":["../../src/useMoney.tsx"],"sourcesContent":["import {useMemo} from 'react';\nimport {useShop} from './ShopifyProvider.js';\nimport {\n CurrencyCode as StorefrontApiCurrencyCode,\n MoneyV2 as StorefrontApiMoneyV2,\n} from './storefront-api-types.js';\nimport type {\n MoneyV2 as CustomerAccountApiMoneyV2,\n CurrencyCode as CustomerAccountApiCurrencyCode,\n} from './customer-account-api-types.js';\n\n// Support MoneyV2 from both Storefront API and Customer Account API\n// The APIs may have different CurrencyCode enums\n/**\n * Supports MoneyV2 from both Storefront API and Customer Account API.\n * The APIs may have different CurrencyCode enums (e.g., Customer Account API added USDC in 2025-10, but Storefront API doesn't support USDC in 2025-10).\n * This union type ensures useMoney works with data from either API.\n */\ntype MoneyV2 = StorefrontApiMoneyV2 | CustomerAccountApiMoneyV2;\n\n/**\n * Supports CurrencyCode from both Storefront API and Customer Account API. The APIs may have different CurrencyCode enums (e.g., Customer Account API added USDC in 2025-10, but Storefront API doesn't support USDC in 2025-10).\n * This union type ensures useMoney works with data from either API.\n */\ntype CurrencyCode = StorefrontApiCurrencyCode | CustomerAccountApiCurrencyCode;\n\nexport type UseMoneyValue = {\n /**\n * The currency code from the `MoneyV2` object.\n */\n currencyCode: CurrencyCode;\n /**\n * The name for the currency code, returned by `Intl.NumberFormat`.\n */\n currencyName?: string;\n /**\n * The currency symbol returned by `Intl.NumberFormat`.\n */\n currencySymbol?: string;\n /**\n * The currency narrow symbol returned by `Intl.NumberFormat`.\n */\n currencyNarrowSymbol?: string;\n /**\n * The localized amount, without any currency symbols or non-number types from the `Intl.NumberFormat.formatToParts` parts.\n */\n amount: string;\n /**\n * All parts returned by `Intl.NumberFormat.formatToParts`.\n */\n parts: Intl.NumberFormatPart[];\n /**\n * A string returned by `new Intl.NumberFormat` for the amount and currency code,\n * using the `locale` value in the [`LocalizationProvider` component](https://shopify.dev/api/hydrogen/components/localization/localizationprovider).\n */\n localizedString: string;\n /**\n * The `MoneyV2` object provided as an argument to the hook.\n */\n original: MoneyV2;\n /**\n * A string with trailing zeros removed from the fractional part, if any exist. If there are no trailing zeros, then the fractional part remains.\n * For example, `$640.00` turns into `$640`.\n * `$640.42` remains `$640.42`.\n */\n withoutTrailingZeros: string;\n /**\n * A string without currency and without trailing zeros removed from the fractional part, if any exist. If there are no trailing zeros, then the fractional part remains.\n * For example, `$640.00` turns into `640`.\n * `$640.42` turns into `640.42`.\n */\n withoutTrailingZerosAndCurrency: string;\n};\n\n/**\n * The `useMoney` hook takes a [MoneyV2 object from the Storefront API](https://shopify.dev/docs/api/storefront/2026-04/objects/MoneyV2)\n * or a [MoneyV2 object from the Customer Account API](https://shopify.dev/docs/api/customer/2026-04/objects/moneyv2) and returns a\n * default-formatted string of the amount with the correct currency indicator, along with some of the parts provided by\n * [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat).\n * Uses `locale` from `ShopifyProvider`\n * \n * @see {@link https://shopify.dev/api/hydrogen/hooks/usemoney}\n * @example initialize the money object\n * ```ts\n * const money = useMoney({\n * amount: '100.00',\n * currencyCode: 'USD'\n * })\n * ```\n * \n *\n * @example basic usage, outputs: $100.00\n * ```ts\n * money.localizedString\n * ```\n * \n *\n * @example without currency, outputs: 100.00\n * ```ts\n * money.amount\n * ```\n * \n *\n * @example without trailing zeros, outputs: $100\n * ```ts\n * money.withoutTrailingZeros\n * ```\n * \n *\n * @example currency name, outputs: US dollars\n * ```ts\n * money.currencyCode\n * ```\n * \n *\n * @example currency symbol, outputs: $\n * ```ts\n * money.currencySymbol\n * ```\n * \n *\n * @example without currency and without trailing zeros, outputs: 100\n * ```ts\n * money.withoutTrailingZerosAndCurrency\n * ```\n */\nexport function useMoney(money: MoneyV2): UseMoneyValue {\n const {countryIsoCode, languageIsoCode} = useShop();\n const locale = languageIsoCode.includes('_')\n ? languageIsoCode.replace('_', '-')\n : `${languageIsoCode}-${countryIsoCode}`;\n\n if (!locale) {\n throw new Error(\n `useMoney(): Unable to get 'locale' from 'useShop()', which means that 'locale' was not passed to '<ShopifyProvider/>'. 'locale' is required for 'useMoney()' to work`,\n );\n }\n\n const amount = parseFloat(money.amount);\n\n // Check if the currency code is supported by Intl.NumberFormat\n let isCurrencySupported = true;\n try {\n new Intl.NumberFormat(locale, {\n style: 'currency',\n currency: money.currencyCode,\n });\n } catch (e) {\n if (e instanceof RangeError && e.message.includes('currency')) {\n isCurrencySupported = false;\n }\n }\n\n const {\n defaultFormatter,\n nameFormatter,\n narrowSymbolFormatter,\n withoutTrailingZerosFormatter,\n withoutCurrencyFormatter,\n withoutTrailingZerosOrCurrencyFormatter,\n } = useMemo(() => {\n // For unsupported currencies (like USDC cryptocurrency), use decimal formatting with 2 decimal places\n // We default to 2 decimal places based on research showing USDC displays like USD to reinforce its 1:1 peg\n const options = isCurrencySupported\n ? {\n style: 'currency' as const,\n currency: money.currencyCode,\n }\n : {\n style: 'decimal' as const,\n minimumFractionDigits: 2,\n maximumFractionDigits: 2,\n };\n\n return {\n defaultFormatter: getLazyFormatter(locale, options),\n nameFormatter: getLazyFormatter(locale, {\n ...options,\n currencyDisplay: 'name',\n }),\n narrowSymbolFormatter: getLazyFormatter(locale, {\n ...options,\n currencyDisplay: 'narrowSymbol',\n }),\n withoutTrailingZerosFormatter: getLazyFormatter(locale, {\n ...options,\n minimumFractionDigits: 0,\n maximumFractionDigits: 0,\n }),\n withoutCurrencyFormatter: getLazyFormatter(locale, {\n minimumFractionDigits: 2,\n maximumFractionDigits: 2,\n }),\n withoutTrailingZerosOrCurrencyFormatter: getLazyFormatter(locale, {\n minimumFractionDigits: 0,\n maximumFractionDigits: 0,\n }),\n };\n }, [money.currencyCode, locale, isCurrencySupported]);\n\n const isPartCurrency = (part: Intl.NumberFormatPart): boolean =>\n part.type === 'currency';\n\n // By wrapping these properties in functions, we only\n // create formatters if they are going to be used.\n const lazyFormatters = useMemo(\n () => ({\n original: (): MoneyV2 => money,\n currencyCode: (): CurrencyCode => money.currencyCode,\n\n localizedString: (): string => {\n const formatted = defaultFormatter().format(amount);\n // For unsupported currencies, append the currency code\n return isCurrencySupported\n ? formatted\n : `${formatted} ${money.currencyCode}`;\n },\n\n parts: (): Intl.NumberFormatPart[] => {\n const parts = defaultFormatter().formatToParts(amount);\n // For unsupported currencies, add currency code as a currency part\n if (!isCurrencySupported) {\n parts.push(\n {type: 'literal', value: ' '},\n {type: 'currency', value: money.currencyCode},\n );\n }\n return parts;\n },\n\n withoutTrailingZeros: (): string => {\n const formatted =\n amount % 1 === 0\n ? withoutTrailingZerosFormatter().format(amount)\n : defaultFormatter().format(amount);\n // For unsupported currencies, append the currency code\n return isCurrencySupported\n ? formatted\n : `${formatted} ${money.currencyCode}`;\n },\n\n withoutTrailingZerosAndCurrency: (): string =>\n amount % 1 === 0\n ? withoutTrailingZerosOrCurrencyFormatter().format(amount)\n : withoutCurrencyFormatter().format(amount),\n\n currencyName: (): string =>\n nameFormatter().formatToParts(amount).find(isPartCurrency)?.value ??\n money.currencyCode, // e.g. \"US dollars\"\n\n currencySymbol: (): string =>\n defaultFormatter().formatToParts(amount).find(isPartCurrency)?.value ??\n money.currencyCode, // e.g. \"USD\"\n\n currencyNarrowSymbol: (): string =>\n narrowSymbolFormatter().formatToParts(amount).find(isPartCurrency)\n ?.value ?? '', // e.g. \"$\"\n\n amount: (): string =>\n defaultFormatter()\n .formatToParts(amount)\n .filter((part) =>\n ['decimal', 'fraction', 'group', 'integer', 'literal'].includes(\n part.type,\n ),\n )\n .map((part) => part.value)\n .join(''),\n }),\n [\n money,\n amount,\n isCurrencySupported,\n nameFormatter,\n defaultFormatter,\n narrowSymbolFormatter,\n withoutCurrencyFormatter,\n withoutTrailingZerosFormatter,\n withoutTrailingZerosOrCurrencyFormatter,\n ],\n );\n\n // Call functions automatically when the properties are accessed\n // to keep these functions as an implementation detail.\n return useMemo(\n () =>\n new Proxy(lazyFormatters as unknown as UseMoneyValue, {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call\n get: (target, key) => Reflect.get(target, key)?.call(null),\n }),\n [lazyFormatters],\n );\n}\n\nconst formatterCache = new Map<string, Intl.NumberFormat>();\n\nfunction getLazyFormatter(\n locale: string,\n options?: Intl.NumberFormatOptions,\n): () => Intl.NumberFormat {\n const key = JSON.stringify([locale, options]);\n\n return function (): Intl.NumberFormat {\n let formatter = formatterCache.get(key);\n if (!formatter) {\n try {\n formatter = new Intl.NumberFormat(locale, options);\n } catch (error) {\n // Handle unsupported currency codes (e.g., USDC from Customer Account API)\n // Fall back to formatting without currency\n if (error instanceof RangeError && error.message.includes('currency')) {\n const fallbackOptions = {...options};\n delete fallbackOptions.currency;\n delete fallbackOptions.currencyDisplay;\n delete fallbackOptions.currencySign;\n formatter = new Intl.NumberFormat(locale, fallbackOptions);\n } else {\n throw error;\n }\n }\n formatterCache.set(key, formatter);\n }\n return formatter;\n };\n}\n"],"names":[],"mappings":";;AA8HO,SAAS,SAAS,OAA+B;AACtD,QAAM,EAAC,gBAAgB,gBAAA,IAAmB,QAAA;AAC1C,QAAM,SAAS,gBAAgB,SAAS,GAAG,IACvC,gBAAgB,QAAQ,KAAK,GAAG,IAChC,GAAG,eAAe,IAAI,cAAc;AAExC,MAAI,CAAC,QAAQ;AACX,UAAM,IAAI;AAAA,MACR;AAAA,IAAA;AAAA,EAEJ;AAEA,QAAM,SAAS,WAAW,MAAM,MAAM;AAGtC,MAAI,sBAAsB;AAC1B,MAAI;AACF,QAAI,KAAK,aAAa,QAAQ;AAAA,MAC5B,OAAO;AAAA,MACP,UAAU,MAAM;AAAA,IAAA,CACjB;AAAA,EACH,SAAS,GAAG;AACV,QAAI,aAAa,cAAc,EAAE,QAAQ,SAAS,UAAU,GAAG;AAC7D,4BAAsB;AAAA,IACxB;AAAA,EACF;AAEA,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE,QAAQ,MAAM;AAGhB,UAAM,UAAU,sBACZ;AAAA,MACE,OAAO;AAAA,MACP,UAAU,MAAM;AAAA,IAAA,IAElB;AAAA,MACE,OAAO;AAAA,MACP,uBAAuB;AAAA,MACvB,uBAAuB;AAAA,IAAA;AAG7B,WAAO;AAAA,MACL,kBAAkB,iBAAiB,QAAQ,OAAO;AAAA,MAClD,eAAe,iBAAiB,QAAQ;AAAA,QACtC,GAAG;AAAA,QACH,iBAAiB;AAAA,MAAA,CAClB;AAAA,MACD,uBAAuB,iBAAiB,QAAQ;AAAA,QAC9C,GAAG;AAAA,QACH,iBAAiB;AAAA,MAAA,CAClB;AAAA,MACD,+BAA+B,iBAAiB,QAAQ;AAAA,QACtD,GAAG;AAAA,QACH,uBAAuB;AAAA,QACvB,uBAAuB;AAAA,MAAA,CACxB;AAAA,MACD,0BAA0B,iBAAiB,QAAQ;AAAA,QACjD,uBAAuB;AAAA,QACvB,uBAAuB;AAAA,MAAA,CACxB;AAAA,MACD,yCAAyC,iBAAiB,QAAQ;AAAA,QAChE,uBAAuB;AAAA,QACvB,uBAAuB;AAAA,MAAA,CACxB;AAAA,IAAA;AAAA,EAEL,GAAG,CAAC,MAAM,cAAc,QAAQ,mBAAmB,CAAC;AAEpD,QAAM,iBAAiB,CAAC,SACtB,KAAK,SAAS;AAIhB,QAAM,iBAAiB;AAAA,IACrB,OAAO;AAAA,MACL,UAAU,MAAe;AAAA,MACzB,cAAc,MAAoB,MAAM;AAAA,MAExC,iBAAiB,MAAc;AAC7B,cAAM,YAAY,mBAAmB,OAAO,MAAM;AAElD,eAAO,sBACH,YACA,GAAG,SAAS,IAAI,MAAM,YAAY;AAAA,MACxC;AAAA,MAEA,OAAO,MAA+B;AACpC,cAAM,QAAQ,mBAAmB,cAAc,MAAM;AAErD,YAAI,CAAC,qBAAqB;AACxB,gBAAM;AAAA,YACJ,EAAC,MAAM,WAAW,OAAO,IAAA;AAAA,YACzB,EAAC,MAAM,YAAY,OAAO,MAAM,aAAA;AAAA,UAAY;AAAA,QAEhD;AACA,eAAO;AAAA,MACT;AAAA,MAEA,sBAAsB,MAAc;AAClC,cAAM,YACJ,SAAS,MAAM,IACX,8BAAA,EAAgC,OAAO,MAAM,IAC7C,mBAAmB,OAAO,MAAM;AAEtC,eAAO,sBACH,YACA,GAAG,SAAS,IAAI,MAAM,YAAY;AAAA,MACxC;AAAA,MAEA,iCAAiC,MAC/B,SAAS,MAAM,IACX,wCAAA,EAA0C,OAAO,MAAM,IACvD,2BAA2B,OAAO,MAAM;AAAA,MAE9C,cAAc,MAAA;;AACZ,sCAAgB,cAAc,MAAM,EAAE,KAAK,cAAc,MAAzD,mBAA4D,UAC5D,MAAM;AAAA;AAAA;AAAA,MAER,gBAAgB,MAAA;;AACd,yCAAmB,cAAc,MAAM,EAAE,KAAK,cAAc,MAA5D,mBAA+D,UAC/D,MAAM;AAAA;AAAA;AAAA,MAER,sBAAsB,MAAA;;AACpB,4CAAA,EAAwB,cAAc,MAAM,EAAE,KAAK,cAAc,MAAjE,mBACI,UAAS;AAAA;AAAA;AAAA,MAEf,QAAQ,MACN,iBAAA,EACG,cAAc,MAAM,EACpB;AAAA,QAAO,CAAC,SACP,CAAC,WAAW,YAAY,SAAS,WAAW,SAAS,EAAE;AAAA,UACrD,KAAK;AAAA,QAAA;AAAA,MACP,EAED,IAAI,CAAC,SAAS,KAAK,KAAK,EACxB,KAAK,EAAE;AAAA,IAAA;AAAA,IAEd;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EACF;AAKF,SAAO;AAAA,IACL,MACE,IAAI,MAAM,gBAA4C;AAAA;AAAA,MAEpD,KAAK,CAAC,QAAQ;;AAAQ,6BAAQ,IAAI,QAAQ,GAAG,MAAvB,mBAA0B,KAAK;AAAA;AAAA,IAAI,CAC1D;AAAA,IACH,CAAC,cAAc;AAAA,EAAA;AAEnB;AAEA,MAAM,qCAAqB,IAAA;AAE3B,SAAS,iBACP,QACA,SACyB;AACzB,QAAM,MAAM,KAAK,UAAU,CAAC,QAAQ,OAAO,CAAC;AAE5C,SAAO,WAA+B;AACpC,QAAI,YAAY,eAAe,IAAI,GAAG;AACtC,QAAI,CAAC,WAAW;AACd,UAAI;AACF,oBAAY,IAAI,KAAK,aAAa,QAAQ,OAAO;AAAA,MACnD,SAAS,OAAO;AAGd,YAAI,iBAAiB,cAAc,MAAM,QAAQ,SAAS,UAAU,GAAG;AACrE,gBAAM,kBAAkB,EAAC,GAAG,QAAA;AAC5B,iBAAO,gBAAgB;AACvB,iBAAO,gBAAgB;AACvB,iBAAO,gBAAgB;AACvB,sBAAY,IAAI,KAAK,aAAa,QAAQ,eAAe;AAAA,QAC3D,OAAO;AACL,gBAAM;AAAA,QACR;AAAA,MACF;AACA,qBAAe,IAAI,KAAK,SAAS;AAAA,IACnC;AACA,WAAO;AAAA,EACT;AACF;"}
|
|
1
|
+
{"version":3,"file":"useMoney.mjs","sources":["../../src/useMoney.tsx"],"sourcesContent":["import {useMemo} from 'react';\nimport {useShop} from './ShopifyProvider.js';\nimport {\n CurrencyCode as StorefrontApiCurrencyCode,\n MoneyV2 as StorefrontApiMoneyV2,\n} from './storefront-api-types.js';\nimport type {\n MoneyV2 as CustomerAccountApiMoneyV2,\n CurrencyCode as CustomerAccountApiCurrencyCode,\n} from './customer-account-api-types.js';\n\n// Support MoneyV2 from both Storefront API and Customer Account API\n// The APIs may have different CurrencyCode enums\n/**\n * Supports MoneyV2 from both Storefront API and Customer Account API.\n * The APIs may have different CurrencyCode enums (e.g., Customer Account API added USDC in 2025-10, but Storefront API doesn't support USDC in 2025-10).\n * This union type ensures useMoney works with data from either API.\n */\ntype MoneyV2 = StorefrontApiMoneyV2 | CustomerAccountApiMoneyV2;\n\n/**\n * Supports CurrencyCode from both Storefront API and Customer Account API. The APIs may have different CurrencyCode enums (e.g., Customer Account API added USDC in 2025-10, but Storefront API doesn't support USDC in 2025-10).\n * This union type ensures useMoney works with data from either API.\n */\ntype CurrencyCode = StorefrontApiCurrencyCode | CustomerAccountApiCurrencyCode;\n\nexport type UseMoneyValue = {\n /**\n * The currency code from the `MoneyV2` object.\n */\n currencyCode: CurrencyCode;\n /**\n * The name for the currency code, returned by `Intl.NumberFormat`.\n */\n currencyName?: string;\n /**\n * The currency symbol returned by `Intl.NumberFormat`.\n */\n currencySymbol?: string;\n /**\n * The currency narrow symbol returned by `Intl.NumberFormat`.\n */\n currencyNarrowSymbol?: string;\n /**\n * The localized amount, without any currency symbols or non-number types from the `Intl.NumberFormat.formatToParts` parts.\n */\n amount: string;\n /**\n * All parts returned by `Intl.NumberFormat.formatToParts`.\n */\n parts: Intl.NumberFormatPart[];\n /**\n * A string returned by `new Intl.NumberFormat` for the amount and currency code,\n * using the `locale` value in the [`LocalizationProvider` component](https://shopify.dev/api/hydrogen/components/localization/localizationprovider).\n */\n localizedString: string;\n /**\n * The `MoneyV2` object provided as an argument to the hook.\n */\n original: MoneyV2;\n /**\n * A string with trailing zeros removed from the fractional part, if any exist. If there are no trailing zeros, then the fractional part remains.\n * For example, `$640.00` turns into `$640`.\n * `$640.42` remains `$640.42`.\n */\n withoutTrailingZeros: string;\n /**\n * A string without currency and without trailing zeros removed from the fractional part, if any exist. If there are no trailing zeros, then the fractional part remains.\n * For example, `$640.00` turns into `640`.\n * `$640.42` turns into `640.42`.\n */\n withoutTrailingZerosAndCurrency: string;\n};\n\n/**\n * The `useMoney` hook takes a [MoneyV2 object from the Storefront API](https://shopify.dev/docs/api/storefront/2026-04/objects/MoneyV2)\n * or a [MoneyV2 object from the Customer Account API](https://shopify.dev/docs/api/customer/2026-04/objects/moneyv2) and returns a\n * default-formatted string of the amount with the correct currency indicator, along with some of the parts provided by\n * [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat).\n * Uses `locale` from `ShopifyProvider`\n * \n * @see {@link https://shopify.dev/api/hydrogen/hooks/usemoney}\n * @example initialize the money object\n * ```ts\n * const money = useMoney({\n * amount: '100.00',\n * currencyCode: 'USD'\n * })\n * ```\n * \n *\n * @example basic usage, outputs: $100.00\n * ```ts\n * money.localizedString\n * ```\n * \n *\n * @example without currency, outputs: 100.00\n * ```ts\n * money.amount\n * ```\n * \n *\n * @example without trailing zeros, outputs: $100\n * ```ts\n * money.withoutTrailingZeros\n * ```\n * \n *\n * @example currency name, outputs: US dollars\n * ```ts\n * money.currencyCode\n * ```\n * \n *\n * @example currency symbol, outputs: $\n * ```ts\n * money.currencySymbol\n * ```\n * \n *\n * @example without currency and without trailing zeros, outputs: 100\n * ```ts\n * money.withoutTrailingZerosAndCurrency\n * ```\n * @publicDocs\n */\nexport function useMoney(money: MoneyV2): UseMoneyValue {\n const {countryIsoCode, languageIsoCode} = useShop();\n const locale = languageIsoCode.includes('_')\n ? languageIsoCode.replace('_', '-')\n : `${languageIsoCode}-${countryIsoCode}`;\n\n if (!locale) {\n throw new Error(\n `useMoney(): Unable to get 'locale' from 'useShop()', which means that 'locale' was not passed to '<ShopifyProvider/>'. 'locale' is required for 'useMoney()' to work`,\n );\n }\n\n const amount = parseFloat(money.amount);\n\n // Check if the currency code is supported by Intl.NumberFormat\n let isCurrencySupported = true;\n try {\n new Intl.NumberFormat(locale, {\n style: 'currency',\n currency: money.currencyCode,\n });\n } catch (e) {\n if (e instanceof RangeError && e.message.includes('currency')) {\n isCurrencySupported = false;\n }\n }\n\n const {\n defaultFormatter,\n nameFormatter,\n narrowSymbolFormatter,\n withoutTrailingZerosFormatter,\n withoutCurrencyFormatter,\n withoutTrailingZerosOrCurrencyFormatter,\n } = useMemo(() => {\n // For unsupported currencies (like USDC cryptocurrency), use decimal formatting with 2 decimal places\n // We default to 2 decimal places based on research showing USDC displays like USD to reinforce its 1:1 peg\n const options = isCurrencySupported\n ? {\n style: 'currency' as const,\n currency: money.currencyCode,\n }\n : {\n style: 'decimal' as const,\n minimumFractionDigits: 2,\n maximumFractionDigits: 2,\n };\n\n return {\n defaultFormatter: getLazyFormatter(locale, options),\n nameFormatter: getLazyFormatter(locale, {\n ...options,\n currencyDisplay: 'name',\n }),\n narrowSymbolFormatter: getLazyFormatter(locale, {\n ...options,\n currencyDisplay: 'narrowSymbol',\n }),\n withoutTrailingZerosFormatter: getLazyFormatter(locale, {\n ...options,\n minimumFractionDigits: 0,\n maximumFractionDigits: 0,\n }),\n withoutCurrencyFormatter: getLazyFormatter(locale, {\n minimumFractionDigits: 2,\n maximumFractionDigits: 2,\n }),\n withoutTrailingZerosOrCurrencyFormatter: getLazyFormatter(locale, {\n minimumFractionDigits: 0,\n maximumFractionDigits: 0,\n }),\n };\n }, [money.currencyCode, locale, isCurrencySupported]);\n\n const isPartCurrency = (part: Intl.NumberFormatPart): boolean =>\n part.type === 'currency';\n\n // By wrapping these properties in functions, we only\n // create formatters if they are going to be used.\n const lazyFormatters = useMemo(\n () => ({\n original: (): MoneyV2 => money,\n currencyCode: (): CurrencyCode => money.currencyCode,\n\n localizedString: (): string => {\n const formatted = defaultFormatter().format(amount);\n // For unsupported currencies, append the currency code\n return isCurrencySupported\n ? formatted\n : `${formatted} ${money.currencyCode}`;\n },\n\n parts: (): Intl.NumberFormatPart[] => {\n const parts = defaultFormatter().formatToParts(amount);\n // For unsupported currencies, add currency code as a currency part\n if (!isCurrencySupported) {\n parts.push(\n {type: 'literal', value: ' '},\n {type: 'currency', value: money.currencyCode},\n );\n }\n return parts;\n },\n\n withoutTrailingZeros: (): string => {\n const formatted =\n amount % 1 === 0\n ? withoutTrailingZerosFormatter().format(amount)\n : defaultFormatter().format(amount);\n // For unsupported currencies, append the currency code\n return isCurrencySupported\n ? formatted\n : `${formatted} ${money.currencyCode}`;\n },\n\n withoutTrailingZerosAndCurrency: (): string =>\n amount % 1 === 0\n ? withoutTrailingZerosOrCurrencyFormatter().format(amount)\n : withoutCurrencyFormatter().format(amount),\n\n currencyName: (): string =>\n nameFormatter().formatToParts(amount).find(isPartCurrency)?.value ??\n money.currencyCode, // e.g. \"US dollars\"\n\n currencySymbol: (): string =>\n defaultFormatter().formatToParts(amount).find(isPartCurrency)?.value ??\n money.currencyCode, // e.g. \"USD\"\n\n currencyNarrowSymbol: (): string =>\n narrowSymbolFormatter().formatToParts(amount).find(isPartCurrency)\n ?.value ?? '', // e.g. \"$\"\n\n amount: (): string =>\n defaultFormatter()\n .formatToParts(amount)\n .filter((part) =>\n ['decimal', 'fraction', 'group', 'integer', 'literal'].includes(\n part.type,\n ),\n )\n .map((part) => part.value)\n .join(''),\n }),\n [\n money,\n amount,\n isCurrencySupported,\n nameFormatter,\n defaultFormatter,\n narrowSymbolFormatter,\n withoutCurrencyFormatter,\n withoutTrailingZerosFormatter,\n withoutTrailingZerosOrCurrencyFormatter,\n ],\n );\n\n // Call functions automatically when the properties are accessed\n // to keep these functions as an implementation detail.\n return useMemo(\n () =>\n new Proxy(lazyFormatters as unknown as UseMoneyValue, {\n // eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call\n get: (target, key) => Reflect.get(target, key)?.call(null),\n }),\n [lazyFormatters],\n );\n}\n\nconst formatterCache = new Map<string, Intl.NumberFormat>();\n\nfunction getLazyFormatter(\n locale: string,\n options?: Intl.NumberFormatOptions,\n): () => Intl.NumberFormat {\n const key = JSON.stringify([locale, options]);\n\n return function (): Intl.NumberFormat {\n let formatter = formatterCache.get(key);\n if (!formatter) {\n try {\n formatter = new Intl.NumberFormat(locale, options);\n } catch (error) {\n // Handle unsupported currency codes (e.g., USDC from Customer Account API)\n // Fall back to formatting without currency\n if (error instanceof RangeError && error.message.includes('currency')) {\n const fallbackOptions = {...options};\n delete fallbackOptions.currency;\n delete fallbackOptions.currencyDisplay;\n delete fallbackOptions.currencySign;\n formatter = new Intl.NumberFormat(locale, fallbackOptions);\n } else {\n throw error;\n }\n }\n formatterCache.set(key, formatter);\n }\n return formatter;\n };\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSelectedOptionInUrlParam.js","sources":["../../src/useSelectedOptionInUrlParam.tsx"],"sourcesContent":["import {useEffect} from 'react';\nimport {mapSelectedProductOptionToObject} from './getProductOptions.js';\nimport {SelectedOption} from './storefront-api-types.js';\n\nexport function useSelectedOptionInUrlParam(\n selectedOptions: Pick<SelectedOption, 'name' | 'value'>[],\n): null {\n useEffect(() => {\n const optionsSearchParams = new URLSearchParams(\n mapSelectedProductOptionToObject(selectedOptions || []),\n );\n const currentSearchParams = new URLSearchParams(window.location.search);\n\n // ts ignoring the URLSearchParams not iterable error for now\n // https://stackoverflow.com/questions/72522489/urlsearchparams-not-accepting-string#answer-72522838\n // TODO: update ts lib\n const combinedSearchParams = new URLSearchParams({\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n ...Object.fromEntries(currentSearchParams),\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n ...Object.fromEntries(optionsSearchParams),\n });\n\n if (combinedSearchParams.size > 0) {\n window.history.replaceState(\n {},\n '',\n `${window.location.pathname}?${combinedSearchParams.toString()}`,\n );\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [JSON.stringify(selectedOptions)]);\n\n return null;\n}\n"],"names":["useEffect","mapSelectedProductOptionToObject"],"mappings":";;;;
|
|
1
|
+
{"version":3,"file":"useSelectedOptionInUrlParam.js","sources":["../../src/useSelectedOptionInUrlParam.tsx"],"sourcesContent":["import {useEffect} from 'react';\nimport {mapSelectedProductOptionToObject} from './getProductOptions.js';\nimport {SelectedOption} from './storefront-api-types.js';\n\n/** @publicDocs */\nexport function useSelectedOptionInUrlParam(\n selectedOptions: Pick<SelectedOption, 'name' | 'value'>[],\n): null {\n useEffect(() => {\n const optionsSearchParams = new URLSearchParams(\n mapSelectedProductOptionToObject(selectedOptions || []),\n );\n const currentSearchParams = new URLSearchParams(window.location.search);\n\n // ts ignoring the URLSearchParams not iterable error for now\n // https://stackoverflow.com/questions/72522489/urlsearchparams-not-accepting-string#answer-72522838\n // TODO: update ts lib\n const combinedSearchParams = new URLSearchParams({\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n ...Object.fromEntries(currentSearchParams),\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n ...Object.fromEntries(optionsSearchParams),\n });\n\n if (combinedSearchParams.size > 0) {\n window.history.replaceState(\n {},\n '',\n `${window.location.pathname}?${combinedSearchParams.toString()}`,\n );\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [JSON.stringify(selectedOptions)]);\n\n return null;\n}\n"],"names":["useEffect","mapSelectedProductOptionToObject"],"mappings":";;;;AAKO,SAAS,4BACd,iBACM;AACNA,QAAAA,UAAU,MAAM;AACd,UAAM,sBAAsB,IAAI;AAAA,MAC9BC,kBAAAA,iCAAiC,mBAAmB,CAAA,CAAE;AAAA,IAAA;AAExD,UAAM,sBAAsB,IAAI,gBAAgB,OAAO,SAAS,MAAM;AAKtE,UAAM,uBAAuB,IAAI,gBAAgB;AAAA;AAAA;AAAA,MAG/C,GAAG,OAAO,YAAY,mBAAmB;AAAA;AAAA;AAAA,MAGzC,GAAG,OAAO,YAAY,mBAAmB;AAAA,IAAA,CAC1C;AAED,QAAI,qBAAqB,OAAO,GAAG;AACjC,aAAO,QAAQ;AAAA,QACb,CAAA;AAAA,QACA;AAAA,QACA,GAAG,OAAO,SAAS,QAAQ,IAAI,qBAAqB,UAAU;AAAA,MAAA;AAAA,IAElE;AAAA,EAEF,GAAG,CAAC,KAAK,UAAU,eAAe,CAAC,CAAC;AAEpC,SAAO;AACT;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSelectedOptionInUrlParam.mjs","sources":["../../src/useSelectedOptionInUrlParam.tsx"],"sourcesContent":["import {useEffect} from 'react';\nimport {mapSelectedProductOptionToObject} from './getProductOptions.js';\nimport {SelectedOption} from './storefront-api-types.js';\n\nexport function useSelectedOptionInUrlParam(\n selectedOptions: Pick<SelectedOption, 'name' | 'value'>[],\n): null {\n useEffect(() => {\n const optionsSearchParams = new URLSearchParams(\n mapSelectedProductOptionToObject(selectedOptions || []),\n );\n const currentSearchParams = new URLSearchParams(window.location.search);\n\n // ts ignoring the URLSearchParams not iterable error for now\n // https://stackoverflow.com/questions/72522489/urlsearchparams-not-accepting-string#answer-72522838\n // TODO: update ts lib\n const combinedSearchParams = new URLSearchParams({\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n ...Object.fromEntries(currentSearchParams),\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n ...Object.fromEntries(optionsSearchParams),\n });\n\n if (combinedSearchParams.size > 0) {\n window.history.replaceState(\n {},\n '',\n `${window.location.pathname}?${combinedSearchParams.toString()}`,\n );\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [JSON.stringify(selectedOptions)]);\n\n return null;\n}\n"],"names":[],"mappings":";;
|
|
1
|
+
{"version":3,"file":"useSelectedOptionInUrlParam.mjs","sources":["../../src/useSelectedOptionInUrlParam.tsx"],"sourcesContent":["import {useEffect} from 'react';\nimport {mapSelectedProductOptionToObject} from './getProductOptions.js';\nimport {SelectedOption} from './storefront-api-types.js';\n\n/** @publicDocs */\nexport function useSelectedOptionInUrlParam(\n selectedOptions: Pick<SelectedOption, 'name' | 'value'>[],\n): null {\n useEffect(() => {\n const optionsSearchParams = new URLSearchParams(\n mapSelectedProductOptionToObject(selectedOptions || []),\n );\n const currentSearchParams = new URLSearchParams(window.location.search);\n\n // ts ignoring the URLSearchParams not iterable error for now\n // https://stackoverflow.com/questions/72522489/urlsearchparams-not-accepting-string#answer-72522838\n // TODO: update ts lib\n const combinedSearchParams = new URLSearchParams({\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n ...Object.fromEntries(currentSearchParams),\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n ...Object.fromEntries(optionsSearchParams),\n });\n\n if (combinedSearchParams.size > 0) {\n window.history.replaceState(\n {},\n '',\n `${window.location.pathname}?${combinedSearchParams.toString()}`,\n );\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [JSON.stringify(selectedOptions)]);\n\n return null;\n}\n"],"names":[],"mappings":";;AAKO,SAAS,4BACd,iBACM;AACN,YAAU,MAAM;AACd,UAAM,sBAAsB,IAAI;AAAA,MAC9B,iCAAiC,mBAAmB,CAAA,CAAE;AAAA,IAAA;AAExD,UAAM,sBAAsB,IAAI,gBAAgB,OAAO,SAAS,MAAM;AAKtE,UAAM,uBAAuB,IAAI,gBAAgB;AAAA;AAAA;AAAA,MAG/C,GAAG,OAAO,YAAY,mBAAmB;AAAA;AAAA;AAAA,MAGzC,GAAG,OAAO,YAAY,mBAAmB;AAAA,IAAA,CAC1C;AAED,QAAI,qBAAqB,OAAO,GAAG;AACjC,aAAO,QAAQ;AAAA,QACb,CAAA;AAAA,QACA;AAAA,QACA,GAAG,OAAO,SAAS,QAAQ,IAAI,qBAAqB,UAAU;AAAA,MAAA;AAAA,IAElE;AAAA,EAEF,GAAG,CAAC,KAAK,UAAU,eAAe,CAAC,CAAC;AAEpC,SAAO;AACT;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useShopifyCookies.js","sources":["../../src/useShopifyCookies.tsx"],"sourcesContent":["import {useEffect, useRef, useState} from 'react';\n// @ts-ignore - worktop/cookie types not properly exported\nimport {stringify} from 'worktop/cookie';\nimport {SHOPIFY_Y, SHOPIFY_S} from './cart-constants.js';\nimport {buildUUID} from './cookies-utils.js';\nimport {\n getTrackingValues,\n SHOPIFY_UNIQUE_TOKEN_HEADER,\n SHOPIFY_VISIT_TOKEN_HEADER,\n} from './tracking-utils.js';\n\nconst longTermLength = 60 * 60 * 24 * 360 * 1; // ~1 year expiry\nconst shortTermLength = 60 * 30; // 30 mins\n\ntype UseShopifyCookiesOptions = CoreShopifyCookiesOptions & {\n /**\n * If set to `false`, Shopify cookies will be removed.\n * If set to `true`, Shopify unique user token cookie will have cookie expiry of 1 year.\n * Defaults to false.\n **/\n hasUserConsent?: boolean;\n /**\n * The domain scope of the cookie. Defaults to empty string.\n **/\n domain?: string;\n /**\n * The checkout domain of the shop. Defaults to empty string. If set, the cookie domain will check if it can be set with the checkout domain.\n */\n checkoutDomain?: string;\n /**\n * If set to `true`, it skips modifying the deprecated shopify_y and shopify_s cookies.\n */\n ignoreDeprecatedCookies?: boolean;\n};\n\n/**\n * Sets the `shopify_y` and `shopify_s` cookies in the browser based on user consent\n * for backward compatibility support.\n *\n * If `fetchTrackingValues` is true, it makes a request to Storefront API\n * to fetch or refresh Shopiy analytics and marketing cookies and tracking values.\n * Generally speaking, this should only be needed if you're not using Hydrogen's\n * built-in analytics components and hooks that already handle this automatically.\n * For example, set it to `true` if you are using `hydrogen-react` only with\n * a different framework and still need to make a same-domain request to\n * Storefront API to set cookies.\n *\n * If `ignoreDeprecatedCookies` is true, it skips setting the deprecated cookies entirely.\n * Useful when you only want to use the newer tracking values and not rely on the deprecated ones.\n *\n * @returns `true` when cookies are set and ready.\n */\nexport function useShopifyCookies(options?: UseShopifyCookiesOptions): boolean {\n const {\n hasUserConsent,\n domain = '',\n checkoutDomain = '',\n storefrontAccessToken,\n fetchTrackingValues,\n ignoreDeprecatedCookies = false,\n } = options || {};\n\n const coreCookiesReady = useCoreShopifyCookies({\n storefrontAccessToken,\n fetchTrackingValues,\n checkoutDomain,\n });\n\n useEffect(() => {\n // Skip setting JS cookies until http-only cookies and server-timing\n // are ready so that we have values synced in JS and http-only cookies.\n if (ignoreDeprecatedCookies || !coreCookiesReady) return;\n\n /**\n * Setting cookie with domain\n *\n * If no domain is provided, the cookie will be set for the current host.\n * For Shopify, we need to ensure this domain is set with a leading dot.\n */\n\n // Use override domain or current host\n let currentDomain = domain || window.location.host;\n\n if (checkoutDomain) {\n const checkoutDomainParts = checkoutDomain.split('.').reverse();\n const currentDomainParts = currentDomain.split('.').reverse();\n const sameDomainParts: Array<string> = [];\n checkoutDomainParts.forEach((part, index) => {\n if (part === currentDomainParts[index]) {\n sameDomainParts.push(part);\n }\n });\n\n currentDomain = sameDomainParts.reverse().join('.');\n }\n\n // Reset domain if localhost\n if (/^localhost/.test(currentDomain)) currentDomain = '';\n\n // Shopify checkout only consumes cookies set with leading dot domain\n const domainWithLeadingDot = currentDomain\n ? /^\\./.test(currentDomain)\n ? currentDomain\n : `.${currentDomain}`\n : '';\n\n /**\n * Set user and session cookies and refresh the expiry time\n */\n if (hasUserConsent) {\n const trackingValues = getTrackingValues();\n if (\n (\n trackingValues.uniqueToken ||\n trackingValues.visitToken ||\n ''\n ).startsWith('00000000-')\n ) {\n // Skip writing cookies when tracking values signal we don't have consent yet\n return;\n }\n\n setCookie(\n SHOPIFY_Y,\n trackingValues.uniqueToken || buildUUID(),\n longTermLength,\n domainWithLeadingDot,\n );\n setCookie(\n SHOPIFY_S,\n trackingValues.visitToken || buildUUID(),\n shortTermLength,\n domainWithLeadingDot,\n );\n } else {\n setCookie(SHOPIFY_Y, '', 0, domainWithLeadingDot);\n setCookie(SHOPIFY_S, '', 0, domainWithLeadingDot);\n }\n }, [\n coreCookiesReady,\n hasUserConsent,\n domain,\n checkoutDomain,\n ignoreDeprecatedCookies,\n ]);\n\n return coreCookiesReady;\n}\n\nfunction setCookie(\n name: string,\n value: string,\n maxage: number,\n domain: string,\n): void {\n document.cookie = stringify(name, value, {\n maxage,\n domain,\n samesite: 'Lax',\n path: '/',\n });\n}\n\nasync function fetchTrackingValuesFromBrowser(\n storefrontAccessToken?: string,\n storefrontApiDomain = '',\n): Promise<void> {\n // These values might come from server-timing or old cookies.\n // If consent cannot be initially assumed, these tokens\n // will be dropped in SFAPI and it will return a mock token\n // starting with '00000000-'.\n // However, if consent can be assumed initially, these tokens\n // will be used to create proper cookies and continue our flow.\n const {uniqueToken, visitToken} = getTrackingValues();\n\n const response = await fetch(\n // TODO: update this endpoint when it becomes stable\n `${storefrontApiDomain.replace(/\\/+$/, '')}/api/unstable/graphql.json`,\n {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n ...(storefrontAccessToken && {\n 'X-Shopify-Storefront-Access-Token': storefrontAccessToken,\n }),\n ...(visitToken || uniqueToken\n ? {\n [SHOPIFY_VISIT_TOKEN_HEADER]: visitToken,\n [SHOPIFY_UNIQUE_TOKEN_HEADER]: uniqueToken,\n }\n : undefined),\n },\n body: JSON.stringify({\n query:\n // This query ensures we get _cmp (consent) server-timing header, which is not available in other queries.\n // This value can be passed later to consent-tracking-api and privacy-banner scripts to avoid extra requests.\n 'query ensureCookies { consentManagement { cookies(visitorConsent:{}) { cookieDomain } } }',\n }),\n },\n );\n\n if (!response.ok) {\n throw new Error(\n `Failed to fetch consent from browser: ${response.status} ${response.statusText}`,\n );\n }\n\n // Consume the body to complete the request and\n // ensure server-timing is available in performance API\n await response.json();\n\n // Ensure we cache the latest tracking values from resources timing\n getTrackingValues();\n}\n\ntype CoreShopifyCookiesOptions = {\n storefrontAccessToken?: string;\n fetchTrackingValues?: boolean;\n checkoutDomain?: string;\n};\n\n/**\n * Gets http-only cookies from Storefront API via same-origin fetch request.\n * Falls back to checkout domain if provided to at least obtain the tracking\n * values via server-timing headers.\n */\nfunction useCoreShopifyCookies({\n checkoutDomain,\n storefrontAccessToken,\n fetchTrackingValues = false,\n}: CoreShopifyCookiesOptions) {\n const [cookiesReady, setCookiesReady] = useState(!fetchTrackingValues);\n const hasFetchedTrackingValues = useRef(false);\n\n useEffect(() => {\n if (!fetchTrackingValues) {\n // Backend did the work, or proxy is disabled.\n setCookiesReady(true);\n return;\n }\n\n // React runs effects twice in dev mode, avoid double fetching\n if (hasFetchedTrackingValues.current) return;\n hasFetchedTrackingValues.current = true;\n\n // Fetch consent from browser via proxy\n fetchTrackingValuesFromBrowser(storefrontAccessToken)\n .catch((error) =>\n checkoutDomain\n ? // Retry with checkout domain if available to at least\n // get the server-timing values for tracking.\n fetchTrackingValuesFromBrowser(\n storefrontAccessToken,\n checkoutDomain,\n )\n : Promise.reject(error),\n )\n .catch((error) => {\n console.warn(\n '[h2:warn:useShopifyCookies] Failed to fetch tracking values from browser: ' +\n (error instanceof Error ? error.message : String(error)),\n );\n })\n .finally(() => {\n // Proceed even on errors, degraded tracking is better than no app\n setCookiesReady(true);\n });\n }, [checkoutDomain, fetchTrackingValues, storefrontAccessToken]);\n\n return cookiesReady;\n}\n"],"names":["useEffect","getTrackingValues","SHOPIFY_Y","buildUUID","SHOPIFY_S","stringify","SHOPIFY_VISIT_TOKEN_HEADER","SHOPIFY_UNIQUE_TOKEN_HEADER","useState","useRef"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"useShopifyCookies.js","sources":["../../src/useShopifyCookies.tsx"],"sourcesContent":["import {useEffect, useRef, useState} from 'react';\n// @ts-ignore - worktop/cookie types not properly exported\nimport {stringify} from 'worktop/cookie';\nimport {SHOPIFY_Y, SHOPIFY_S} from './cart-constants.js';\nimport {buildUUID} from './cookies-utils.js';\nimport {\n getTrackingValues,\n SHOPIFY_UNIQUE_TOKEN_HEADER,\n SHOPIFY_VISIT_TOKEN_HEADER,\n} from './tracking-utils.js';\n\nconst longTermLength = 60 * 60 * 24 * 360 * 1; // ~1 year expiry\nconst shortTermLength = 60 * 30; // 30 mins\n\ntype UseShopifyCookiesOptions = CoreShopifyCookiesOptions & {\n /**\n * If set to `false`, Shopify cookies will be removed.\n * If set to `true`, Shopify unique user token cookie will have cookie expiry of 1 year.\n * Defaults to false.\n **/\n hasUserConsent?: boolean;\n /**\n * The domain scope of the cookie. Defaults to empty string.\n **/\n domain?: string;\n /**\n * The checkout domain of the shop. Defaults to empty string. If set, the cookie domain will check if it can be set with the checkout domain.\n */\n checkoutDomain?: string;\n /**\n * If set to `true`, it skips modifying the deprecated shopify_y and shopify_s cookies.\n */\n ignoreDeprecatedCookies?: boolean;\n};\n\n/**\n * Sets the `shopify_y` and `shopify_s` cookies in the browser based on user consent\n * for backward compatibility support.\n *\n * If `fetchTrackingValues` is true, it makes a request to Storefront API\n * to fetch or refresh Shopiy analytics and marketing cookies and tracking values.\n * Generally speaking, this should only be needed if you're not using Hydrogen's\n * built-in analytics components and hooks that already handle this automatically.\n * For example, set it to `true` if you are using `hydrogen-react` only with\n * a different framework and still need to make a same-domain request to\n * Storefront API to set cookies.\n *\n * If `ignoreDeprecatedCookies` is true, it skips setting the deprecated cookies entirely.\n * Useful when you only want to use the newer tracking values and not rely on the deprecated ones.\n *\n * @returns `true` when cookies are set and ready.\n * @publicDocs\n */\nexport function useShopifyCookies(options?: UseShopifyCookiesOptions): boolean {\n const {\n hasUserConsent,\n domain = '',\n checkoutDomain = '',\n storefrontAccessToken,\n fetchTrackingValues,\n ignoreDeprecatedCookies = false,\n } = options || {};\n\n const coreCookiesReady = useCoreShopifyCookies({\n storefrontAccessToken,\n fetchTrackingValues,\n checkoutDomain,\n });\n\n useEffect(() => {\n // Skip setting JS cookies until http-only cookies and server-timing\n // are ready so that we have values synced in JS and http-only cookies.\n if (ignoreDeprecatedCookies || !coreCookiesReady) return;\n\n /**\n * Setting cookie with domain\n *\n * If no domain is provided, the cookie will be set for the current host.\n * For Shopify, we need to ensure this domain is set with a leading dot.\n */\n\n // Use override domain or current host\n let currentDomain = domain || window.location.host;\n\n if (checkoutDomain) {\n const checkoutDomainParts = checkoutDomain.split('.').reverse();\n const currentDomainParts = currentDomain.split('.').reverse();\n const sameDomainParts: Array<string> = [];\n checkoutDomainParts.forEach((part, index) => {\n if (part === currentDomainParts[index]) {\n sameDomainParts.push(part);\n }\n });\n\n currentDomain = sameDomainParts.reverse().join('.');\n }\n\n // Reset domain if localhost\n if (/^localhost/.test(currentDomain)) currentDomain = '';\n\n // Shopify checkout only consumes cookies set with leading dot domain\n const domainWithLeadingDot = currentDomain\n ? /^\\./.test(currentDomain)\n ? currentDomain\n : `.${currentDomain}`\n : '';\n\n /**\n * Set user and session cookies and refresh the expiry time\n */\n if (hasUserConsent) {\n const trackingValues = getTrackingValues();\n if (\n (\n trackingValues.uniqueToken ||\n trackingValues.visitToken ||\n ''\n ).startsWith('00000000-')\n ) {\n // Skip writing cookies when tracking values signal we don't have consent yet\n return;\n }\n\n setCookie(\n SHOPIFY_Y,\n trackingValues.uniqueToken || buildUUID(),\n longTermLength,\n domainWithLeadingDot,\n );\n setCookie(\n SHOPIFY_S,\n trackingValues.visitToken || buildUUID(),\n shortTermLength,\n domainWithLeadingDot,\n );\n } else {\n setCookie(SHOPIFY_Y, '', 0, domainWithLeadingDot);\n setCookie(SHOPIFY_S, '', 0, domainWithLeadingDot);\n }\n }, [\n coreCookiesReady,\n hasUserConsent,\n domain,\n checkoutDomain,\n ignoreDeprecatedCookies,\n ]);\n\n return coreCookiesReady;\n}\n\nfunction setCookie(\n name: string,\n value: string,\n maxage: number,\n domain: string,\n): void {\n document.cookie = stringify(name, value, {\n maxage,\n domain,\n samesite: 'Lax',\n path: '/',\n });\n}\n\nasync function fetchTrackingValuesFromBrowser(\n storefrontAccessToken?: string,\n storefrontApiDomain = '',\n): Promise<void> {\n // These values might come from server-timing or old cookies.\n // If consent cannot be initially assumed, these tokens\n // will be dropped in SFAPI and it will return a mock token\n // starting with '00000000-'.\n // However, if consent can be assumed initially, these tokens\n // will be used to create proper cookies and continue our flow.\n const {uniqueToken, visitToken} = getTrackingValues();\n\n const response = await fetch(\n // TODO: update this endpoint when it becomes stable\n `${storefrontApiDomain.replace(/\\/+$/, '')}/api/unstable/graphql.json`,\n {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n ...(storefrontAccessToken && {\n 'X-Shopify-Storefront-Access-Token': storefrontAccessToken,\n }),\n ...(visitToken || uniqueToken\n ? {\n [SHOPIFY_VISIT_TOKEN_HEADER]: visitToken,\n [SHOPIFY_UNIQUE_TOKEN_HEADER]: uniqueToken,\n }\n : undefined),\n },\n body: JSON.stringify({\n query:\n // This query ensures we get _cmp (consent) server-timing header, which is not available in other queries.\n // This value can be passed later to consent-tracking-api and privacy-banner scripts to avoid extra requests.\n 'query ensureCookies { consentManagement { cookies(visitorConsent:{}) { cookieDomain } } }',\n }),\n },\n );\n\n if (!response.ok) {\n throw new Error(\n `Failed to fetch consent from browser: ${response.status} ${response.statusText}`,\n );\n }\n\n // Consume the body to complete the request and\n // ensure server-timing is available in performance API\n await response.json();\n\n // Ensure we cache the latest tracking values from resources timing\n getTrackingValues();\n}\n\ntype CoreShopifyCookiesOptions = {\n storefrontAccessToken?: string;\n fetchTrackingValues?: boolean;\n checkoutDomain?: string;\n};\n\n/**\n * Gets http-only cookies from Storefront API via same-origin fetch request.\n * Falls back to checkout domain if provided to at least obtain the tracking\n * values via server-timing headers.\n */\nfunction useCoreShopifyCookies({\n checkoutDomain,\n storefrontAccessToken,\n fetchTrackingValues = false,\n}: CoreShopifyCookiesOptions) {\n const [cookiesReady, setCookiesReady] = useState(!fetchTrackingValues);\n const hasFetchedTrackingValues = useRef(false);\n\n useEffect(() => {\n if (!fetchTrackingValues) {\n // Backend did the work, or proxy is disabled.\n setCookiesReady(true);\n return;\n }\n\n // React runs effects twice in dev mode, avoid double fetching\n if (hasFetchedTrackingValues.current) return;\n hasFetchedTrackingValues.current = true;\n\n // Fetch consent from browser via proxy\n fetchTrackingValuesFromBrowser(storefrontAccessToken)\n .catch((error) =>\n checkoutDomain\n ? // Retry with checkout domain if available to at least\n // get the server-timing values for tracking.\n fetchTrackingValuesFromBrowser(\n storefrontAccessToken,\n checkoutDomain,\n )\n : Promise.reject(error),\n )\n .catch((error) => {\n console.warn(\n '[h2:warn:useShopifyCookies] Failed to fetch tracking values from browser: ' +\n (error instanceof Error ? error.message : String(error)),\n );\n })\n .finally(() => {\n // Proceed even on errors, degraded tracking is better than no app\n setCookiesReady(true);\n });\n }, [checkoutDomain, fetchTrackingValues, storefrontAccessToken]);\n\n return cookiesReady;\n}\n"],"names":["useEffect","getTrackingValues","SHOPIFY_Y","buildUUID","SHOPIFY_S","stringify","SHOPIFY_VISIT_TOKEN_HEADER","SHOPIFY_UNIQUE_TOKEN_HEADER","useState","useRef"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useShopifyCookies.mjs","sources":["../../src/useShopifyCookies.tsx"],"sourcesContent":["import {useEffect, useRef, useState} from 'react';\n// @ts-ignore - worktop/cookie types not properly exported\nimport {stringify} from 'worktop/cookie';\nimport {SHOPIFY_Y, SHOPIFY_S} from './cart-constants.js';\nimport {buildUUID} from './cookies-utils.js';\nimport {\n getTrackingValues,\n SHOPIFY_UNIQUE_TOKEN_HEADER,\n SHOPIFY_VISIT_TOKEN_HEADER,\n} from './tracking-utils.js';\n\nconst longTermLength = 60 * 60 * 24 * 360 * 1; // ~1 year expiry\nconst shortTermLength = 60 * 30; // 30 mins\n\ntype UseShopifyCookiesOptions = CoreShopifyCookiesOptions & {\n /**\n * If set to `false`, Shopify cookies will be removed.\n * If set to `true`, Shopify unique user token cookie will have cookie expiry of 1 year.\n * Defaults to false.\n **/\n hasUserConsent?: boolean;\n /**\n * The domain scope of the cookie. Defaults to empty string.\n **/\n domain?: string;\n /**\n * The checkout domain of the shop. Defaults to empty string. If set, the cookie domain will check if it can be set with the checkout domain.\n */\n checkoutDomain?: string;\n /**\n * If set to `true`, it skips modifying the deprecated shopify_y and shopify_s cookies.\n */\n ignoreDeprecatedCookies?: boolean;\n};\n\n/**\n * Sets the `shopify_y` and `shopify_s` cookies in the browser based on user consent\n * for backward compatibility support.\n *\n * If `fetchTrackingValues` is true, it makes a request to Storefront API\n * to fetch or refresh Shopiy analytics and marketing cookies and tracking values.\n * Generally speaking, this should only be needed if you're not using Hydrogen's\n * built-in analytics components and hooks that already handle this automatically.\n * For example, set it to `true` if you are using `hydrogen-react` only with\n * a different framework and still need to make a same-domain request to\n * Storefront API to set cookies.\n *\n * If `ignoreDeprecatedCookies` is true, it skips setting the deprecated cookies entirely.\n * Useful when you only want to use the newer tracking values and not rely on the deprecated ones.\n *\n * @returns `true` when cookies are set and ready.\n */\nexport function useShopifyCookies(options?: UseShopifyCookiesOptions): boolean {\n const {\n hasUserConsent,\n domain = '',\n checkoutDomain = '',\n storefrontAccessToken,\n fetchTrackingValues,\n ignoreDeprecatedCookies = false,\n } = options || {};\n\n const coreCookiesReady = useCoreShopifyCookies({\n storefrontAccessToken,\n fetchTrackingValues,\n checkoutDomain,\n });\n\n useEffect(() => {\n // Skip setting JS cookies until http-only cookies and server-timing\n // are ready so that we have values synced in JS and http-only cookies.\n if (ignoreDeprecatedCookies || !coreCookiesReady) return;\n\n /**\n * Setting cookie with domain\n *\n * If no domain is provided, the cookie will be set for the current host.\n * For Shopify, we need to ensure this domain is set with a leading dot.\n */\n\n // Use override domain or current host\n let currentDomain = domain || window.location.host;\n\n if (checkoutDomain) {\n const checkoutDomainParts = checkoutDomain.split('.').reverse();\n const currentDomainParts = currentDomain.split('.').reverse();\n const sameDomainParts: Array<string> = [];\n checkoutDomainParts.forEach((part, index) => {\n if (part === currentDomainParts[index]) {\n sameDomainParts.push(part);\n }\n });\n\n currentDomain = sameDomainParts.reverse().join('.');\n }\n\n // Reset domain if localhost\n if (/^localhost/.test(currentDomain)) currentDomain = '';\n\n // Shopify checkout only consumes cookies set with leading dot domain\n const domainWithLeadingDot = currentDomain\n ? /^\\./.test(currentDomain)\n ? currentDomain\n : `.${currentDomain}`\n : '';\n\n /**\n * Set user and session cookies and refresh the expiry time\n */\n if (hasUserConsent) {\n const trackingValues = getTrackingValues();\n if (\n (\n trackingValues.uniqueToken ||\n trackingValues.visitToken ||\n ''\n ).startsWith('00000000-')\n ) {\n // Skip writing cookies when tracking values signal we don't have consent yet\n return;\n }\n\n setCookie(\n SHOPIFY_Y,\n trackingValues.uniqueToken || buildUUID(),\n longTermLength,\n domainWithLeadingDot,\n );\n setCookie(\n SHOPIFY_S,\n trackingValues.visitToken || buildUUID(),\n shortTermLength,\n domainWithLeadingDot,\n );\n } else {\n setCookie(SHOPIFY_Y, '', 0, domainWithLeadingDot);\n setCookie(SHOPIFY_S, '', 0, domainWithLeadingDot);\n }\n }, [\n coreCookiesReady,\n hasUserConsent,\n domain,\n checkoutDomain,\n ignoreDeprecatedCookies,\n ]);\n\n return coreCookiesReady;\n}\n\nfunction setCookie(\n name: string,\n value: string,\n maxage: number,\n domain: string,\n): void {\n document.cookie = stringify(name, value, {\n maxage,\n domain,\n samesite: 'Lax',\n path: '/',\n });\n}\n\nasync function fetchTrackingValuesFromBrowser(\n storefrontAccessToken?: string,\n storefrontApiDomain = '',\n): Promise<void> {\n // These values might come from server-timing or old cookies.\n // If consent cannot be initially assumed, these tokens\n // will be dropped in SFAPI and it will return a mock token\n // starting with '00000000-'.\n // However, if consent can be assumed initially, these tokens\n // will be used to create proper cookies and continue our flow.\n const {uniqueToken, visitToken} = getTrackingValues();\n\n const response = await fetch(\n // TODO: update this endpoint when it becomes stable\n `${storefrontApiDomain.replace(/\\/+$/, '')}/api/unstable/graphql.json`,\n {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n ...(storefrontAccessToken && {\n 'X-Shopify-Storefront-Access-Token': storefrontAccessToken,\n }),\n ...(visitToken || uniqueToken\n ? {\n [SHOPIFY_VISIT_TOKEN_HEADER]: visitToken,\n [SHOPIFY_UNIQUE_TOKEN_HEADER]: uniqueToken,\n }\n : undefined),\n },\n body: JSON.stringify({\n query:\n // This query ensures we get _cmp (consent) server-timing header, which is not available in other queries.\n // This value can be passed later to consent-tracking-api and privacy-banner scripts to avoid extra requests.\n 'query ensureCookies { consentManagement { cookies(visitorConsent:{}) { cookieDomain } } }',\n }),\n },\n );\n\n if (!response.ok) {\n throw new Error(\n `Failed to fetch consent from browser: ${response.status} ${response.statusText}`,\n );\n }\n\n // Consume the body to complete the request and\n // ensure server-timing is available in performance API\n await response.json();\n\n // Ensure we cache the latest tracking values from resources timing\n getTrackingValues();\n}\n\ntype CoreShopifyCookiesOptions = {\n storefrontAccessToken?: string;\n fetchTrackingValues?: boolean;\n checkoutDomain?: string;\n};\n\n/**\n * Gets http-only cookies from Storefront API via same-origin fetch request.\n * Falls back to checkout domain if provided to at least obtain the tracking\n * values via server-timing headers.\n */\nfunction useCoreShopifyCookies({\n checkoutDomain,\n storefrontAccessToken,\n fetchTrackingValues = false,\n}: CoreShopifyCookiesOptions) {\n const [cookiesReady, setCookiesReady] = useState(!fetchTrackingValues);\n const hasFetchedTrackingValues = useRef(false);\n\n useEffect(() => {\n if (!fetchTrackingValues) {\n // Backend did the work, or proxy is disabled.\n setCookiesReady(true);\n return;\n }\n\n // React runs effects twice in dev mode, avoid double fetching\n if (hasFetchedTrackingValues.current) return;\n hasFetchedTrackingValues.current = true;\n\n // Fetch consent from browser via proxy\n fetchTrackingValuesFromBrowser(storefrontAccessToken)\n .catch((error) =>\n checkoutDomain\n ? // Retry with checkout domain if available to at least\n // get the server-timing values for tracking.\n fetchTrackingValuesFromBrowser(\n storefrontAccessToken,\n checkoutDomain,\n )\n : Promise.reject(error),\n )\n .catch((error) => {\n console.warn(\n '[h2:warn:useShopifyCookies] Failed to fetch tracking values from browser: ' +\n (error instanceof Error ? error.message : String(error)),\n );\n })\n .finally(() => {\n // Proceed even on errors, degraded tracking is better than no app\n setCookiesReady(true);\n });\n }, [checkoutDomain, fetchTrackingValues, storefrontAccessToken]);\n\n return cookiesReady;\n}\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"useShopifyCookies.mjs","sources":["../../src/useShopifyCookies.tsx"],"sourcesContent":["import {useEffect, useRef, useState} from 'react';\n// @ts-ignore - worktop/cookie types not properly exported\nimport {stringify} from 'worktop/cookie';\nimport {SHOPIFY_Y, SHOPIFY_S} from './cart-constants.js';\nimport {buildUUID} from './cookies-utils.js';\nimport {\n getTrackingValues,\n SHOPIFY_UNIQUE_TOKEN_HEADER,\n SHOPIFY_VISIT_TOKEN_HEADER,\n} from './tracking-utils.js';\n\nconst longTermLength = 60 * 60 * 24 * 360 * 1; // ~1 year expiry\nconst shortTermLength = 60 * 30; // 30 mins\n\ntype UseShopifyCookiesOptions = CoreShopifyCookiesOptions & {\n /**\n * If set to `false`, Shopify cookies will be removed.\n * If set to `true`, Shopify unique user token cookie will have cookie expiry of 1 year.\n * Defaults to false.\n **/\n hasUserConsent?: boolean;\n /**\n * The domain scope of the cookie. Defaults to empty string.\n **/\n domain?: string;\n /**\n * The checkout domain of the shop. Defaults to empty string. If set, the cookie domain will check if it can be set with the checkout domain.\n */\n checkoutDomain?: string;\n /**\n * If set to `true`, it skips modifying the deprecated shopify_y and shopify_s cookies.\n */\n ignoreDeprecatedCookies?: boolean;\n};\n\n/**\n * Sets the `shopify_y` and `shopify_s` cookies in the browser based on user consent\n * for backward compatibility support.\n *\n * If `fetchTrackingValues` is true, it makes a request to Storefront API\n * to fetch or refresh Shopiy analytics and marketing cookies and tracking values.\n * Generally speaking, this should only be needed if you're not using Hydrogen's\n * built-in analytics components and hooks that already handle this automatically.\n * For example, set it to `true` if you are using `hydrogen-react` only with\n * a different framework and still need to make a same-domain request to\n * Storefront API to set cookies.\n *\n * If `ignoreDeprecatedCookies` is true, it skips setting the deprecated cookies entirely.\n * Useful when you only want to use the newer tracking values and not rely on the deprecated ones.\n *\n * @returns `true` when cookies are set and ready.\n * @publicDocs\n */\nexport function useShopifyCookies(options?: UseShopifyCookiesOptions): boolean {\n const {\n hasUserConsent,\n domain = '',\n checkoutDomain = '',\n storefrontAccessToken,\n fetchTrackingValues,\n ignoreDeprecatedCookies = false,\n } = options || {};\n\n const coreCookiesReady = useCoreShopifyCookies({\n storefrontAccessToken,\n fetchTrackingValues,\n checkoutDomain,\n });\n\n useEffect(() => {\n // Skip setting JS cookies until http-only cookies and server-timing\n // are ready so that we have values synced in JS and http-only cookies.\n if (ignoreDeprecatedCookies || !coreCookiesReady) return;\n\n /**\n * Setting cookie with domain\n *\n * If no domain is provided, the cookie will be set for the current host.\n * For Shopify, we need to ensure this domain is set with a leading dot.\n */\n\n // Use override domain or current host\n let currentDomain = domain || window.location.host;\n\n if (checkoutDomain) {\n const checkoutDomainParts = checkoutDomain.split('.').reverse();\n const currentDomainParts = currentDomain.split('.').reverse();\n const sameDomainParts: Array<string> = [];\n checkoutDomainParts.forEach((part, index) => {\n if (part === currentDomainParts[index]) {\n sameDomainParts.push(part);\n }\n });\n\n currentDomain = sameDomainParts.reverse().join('.');\n }\n\n // Reset domain if localhost\n if (/^localhost/.test(currentDomain)) currentDomain = '';\n\n // Shopify checkout only consumes cookies set with leading dot domain\n const domainWithLeadingDot = currentDomain\n ? /^\\./.test(currentDomain)\n ? currentDomain\n : `.${currentDomain}`\n : '';\n\n /**\n * Set user and session cookies and refresh the expiry time\n */\n if (hasUserConsent) {\n const trackingValues = getTrackingValues();\n if (\n (\n trackingValues.uniqueToken ||\n trackingValues.visitToken ||\n ''\n ).startsWith('00000000-')\n ) {\n // Skip writing cookies when tracking values signal we don't have consent yet\n return;\n }\n\n setCookie(\n SHOPIFY_Y,\n trackingValues.uniqueToken || buildUUID(),\n longTermLength,\n domainWithLeadingDot,\n );\n setCookie(\n SHOPIFY_S,\n trackingValues.visitToken || buildUUID(),\n shortTermLength,\n domainWithLeadingDot,\n );\n } else {\n setCookie(SHOPIFY_Y, '', 0, domainWithLeadingDot);\n setCookie(SHOPIFY_S, '', 0, domainWithLeadingDot);\n }\n }, [\n coreCookiesReady,\n hasUserConsent,\n domain,\n checkoutDomain,\n ignoreDeprecatedCookies,\n ]);\n\n return coreCookiesReady;\n}\n\nfunction setCookie(\n name: string,\n value: string,\n maxage: number,\n domain: string,\n): void {\n document.cookie = stringify(name, value, {\n maxage,\n domain,\n samesite: 'Lax',\n path: '/',\n });\n}\n\nasync function fetchTrackingValuesFromBrowser(\n storefrontAccessToken?: string,\n storefrontApiDomain = '',\n): Promise<void> {\n // These values might come from server-timing or old cookies.\n // If consent cannot be initially assumed, these tokens\n // will be dropped in SFAPI and it will return a mock token\n // starting with '00000000-'.\n // However, if consent can be assumed initially, these tokens\n // will be used to create proper cookies and continue our flow.\n const {uniqueToken, visitToken} = getTrackingValues();\n\n const response = await fetch(\n // TODO: update this endpoint when it becomes stable\n `${storefrontApiDomain.replace(/\\/+$/, '')}/api/unstable/graphql.json`,\n {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n ...(storefrontAccessToken && {\n 'X-Shopify-Storefront-Access-Token': storefrontAccessToken,\n }),\n ...(visitToken || uniqueToken\n ? {\n [SHOPIFY_VISIT_TOKEN_HEADER]: visitToken,\n [SHOPIFY_UNIQUE_TOKEN_HEADER]: uniqueToken,\n }\n : undefined),\n },\n body: JSON.stringify({\n query:\n // This query ensures we get _cmp (consent) server-timing header, which is not available in other queries.\n // This value can be passed later to consent-tracking-api and privacy-banner scripts to avoid extra requests.\n 'query ensureCookies { consentManagement { cookies(visitorConsent:{}) { cookieDomain } } }',\n }),\n },\n );\n\n if (!response.ok) {\n throw new Error(\n `Failed to fetch consent from browser: ${response.status} ${response.statusText}`,\n );\n }\n\n // Consume the body to complete the request and\n // ensure server-timing is available in performance API\n await response.json();\n\n // Ensure we cache the latest tracking values from resources timing\n getTrackingValues();\n}\n\ntype CoreShopifyCookiesOptions = {\n storefrontAccessToken?: string;\n fetchTrackingValues?: boolean;\n checkoutDomain?: string;\n};\n\n/**\n * Gets http-only cookies from Storefront API via same-origin fetch request.\n * Falls back to checkout domain if provided to at least obtain the tracking\n * values via server-timing headers.\n */\nfunction useCoreShopifyCookies({\n checkoutDomain,\n storefrontAccessToken,\n fetchTrackingValues = false,\n}: CoreShopifyCookiesOptions) {\n const [cookiesReady, setCookiesReady] = useState(!fetchTrackingValues);\n const hasFetchedTrackingValues = useRef(false);\n\n useEffect(() => {\n if (!fetchTrackingValues) {\n // Backend did the work, or proxy is disabled.\n setCookiesReady(true);\n return;\n }\n\n // React runs effects twice in dev mode, avoid double fetching\n if (hasFetchedTrackingValues.current) return;\n hasFetchedTrackingValues.current = true;\n\n // Fetch consent from browser via proxy\n fetchTrackingValuesFromBrowser(storefrontAccessToken)\n .catch((error) =>\n checkoutDomain\n ? // Retry with checkout domain if available to at least\n // get the server-timing values for tracking.\n fetchTrackingValuesFromBrowser(\n storefrontAccessToken,\n checkoutDomain,\n )\n : Promise.reject(error),\n )\n .catch((error) => {\n console.warn(\n '[h2:warn:useShopifyCookies] Failed to fetch tracking values from browser: ' +\n (error instanceof Error ? error.message : String(error)),\n );\n })\n .finally(() => {\n // Proceed even on errors, degraded tracking is better than no app\n setCookiesReady(true);\n });\n }, [checkoutDomain, fetchTrackingValues, storefrontAccessToken]);\n\n return cookiesReady;\n}\n"],"names":[],"mappings":";;;;;AAWA,MAAM,iBAAiB,KAAK,KAAK,KAAK,MAAM;AAC5C,MAAM,kBAAkB,KAAK;AAyCtB,SAAS,kBAAkB,SAA6C;AAC7E,QAAM;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA,0BAA0B;AAAA,EAAA,IACxB,WAAW,CAAA;AAEf,QAAM,mBAAmB,sBAAsB;AAAA,IAC7C;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAED,YAAU,MAAM;AAGd,QAAI,2BAA2B,CAAC,iBAAkB;AAUlD,QAAI,gBAAgB,UAAU,OAAO,SAAS;AAE9C,QAAI,gBAAgB;AAClB,YAAM,sBAAsB,eAAe,MAAM,GAAG,EAAE,QAAA;AACtD,YAAM,qBAAqB,cAAc,MAAM,GAAG,EAAE,QAAA;AACpD,YAAM,kBAAiC,CAAA;AACvC,0BAAoB,QAAQ,CAAC,MAAM,UAAU;AAC3C,YAAI,SAAS,mBAAmB,KAAK,GAAG;AACtC,0BAAgB,KAAK,IAAI;AAAA,QAC3B;AAAA,MACF,CAAC;AAED,sBAAgB,gBAAgB,UAAU,KAAK,GAAG;AAAA,IACpD;AAGA,QAAI,aAAa,KAAK,aAAa,EAAG,iBAAgB;AAGtD,UAAM,uBAAuB,gBACzB,MAAM,KAAK,aAAa,IACtB,gBACA,IAAI,aAAa,KACnB;AAKJ,QAAI,gBAAgB;AAClB,YAAM,iBAAiB,kBAAA;AACvB,WAEI,eAAe,eACf,eAAe,cACf,IACA,WAAW,WAAW,GACxB;AAEA;AAAA,MACF;AAEA;AAAA,QACE;AAAA,QACA,eAAe,eAAe,UAAA;AAAA,QAC9B;AAAA,QACA;AAAA,MAAA;AAEF;AAAA,QACE;AAAA,QACA,eAAe,cAAc,UAAA;AAAA,QAC7B;AAAA,QACA;AAAA,MAAA;AAAA,IAEJ,OAAO;AACL,gBAAU,WAAW,IAAI,GAAG,oBAAoB;AAChD,gBAAU,WAAW,IAAI,GAAG,oBAAoB;AAAA,IAClD;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAED,SAAO;AACT;AAEA,SAAS,UACP,MACA,OACA,QACA,QACM;AACN,WAAS,SAAS,UAAU,MAAM,OAAO;AAAA,IACvC;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,MAAM;AAAA,EAAA,CACP;AACH;AAEA,eAAe,+BACb,uBACA,sBAAsB,IACP;AAOf,QAAM,EAAC,aAAa,WAAA,IAAc,kBAAA;AAElC,QAAM,WAAW,MAAM;AAAA;AAAA,IAErB,GAAG,oBAAoB,QAAQ,QAAQ,EAAE,CAAC;AAAA,IAC1C;AAAA,MACE,QAAQ;AAAA,MACR,SAAS;AAAA,QACP,gBAAgB;AAAA,QAChB,GAAI,yBAAyB;AAAA,UAC3B,qCAAqC;AAAA,QAAA;AAAA,QAEvC,GAAI,cAAc,cACd;AAAA,UACE,CAAC,0BAA0B,GAAG;AAAA,UAC9B,CAAC,2BAA2B,GAAG;AAAA,QAAA,IAEjC;AAAA,MAAA;AAAA,MAEN,MAAM,KAAK,UAAU;AAAA,QACnB;AAAA;AAAA;AAAA,UAGE;AAAA;AAAA,MAAA,CACH;AAAA,IAAA;AAAA,EACH;AAGF,MAAI,CAAC,SAAS,IAAI;AAChB,UAAM,IAAI;AAAA,MACR,yCAAyC,SAAS,MAAM,IAAI,SAAS,UAAU;AAAA,IAAA;AAAA,EAEnF;AAIA,QAAM,SAAS,KAAA;AAGf,oBAAA;AACF;AAaA,SAAS,sBAAsB;AAAA,EAC7B;AAAA,EACA;AAAA,EACA,sBAAsB;AACxB,GAA8B;AAC5B,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,CAAC,mBAAmB;AACrE,QAAM,2BAA2B,OAAO,KAAK;AAE7C,YAAU,MAAM;AACd,QAAI,CAAC,qBAAqB;AAExB,sBAAgB,IAAI;AACpB;AAAA,IACF;AAGA,QAAI,yBAAyB,QAAS;AACtC,6BAAyB,UAAU;AAGnC,mCAA+B,qBAAqB,EACjD;AAAA,MAAM,CAAC,UACN;AAAA;AAAA;AAAA,QAGI;AAAA,UACE;AAAA,UACA;AAAA,QAAA;AAAA,UAEF,QAAQ,OAAO,KAAK;AAAA,IAAA,EAEzB,MAAM,CAAC,UAAU;AAChB,cAAQ;AAAA,QACN,gFACG,iBAAiB,QAAQ,MAAM,UAAU,OAAO,KAAK;AAAA,MAAA;AAAA,IAE5D,CAAC,EACA,QAAQ,MAAM;AAEb,sBAAgB,IAAI;AAAA,IACtB,CAAC;AAAA,EACL,GAAG,CAAC,gBAAgB,qBAAqB,qBAAqB,CAAC;AAE/D,SAAO;AACT;"}
|
|
@@ -22,7 +22,9 @@ export type AddToCartButtonProps<AsType extends React.ElementType = 'button'> =
|
|
|
22
22
|
/**
|
|
23
23
|
* The `AddToCartButton` component renders a button that adds an item to the cart when pressed.
|
|
24
24
|
* It must be a descendent of the `CartProvider` component.
|
|
25
|
+
* @publicDocs
|
|
25
26
|
*/
|
|
26
27
|
export declare function AddToCartButton<AsType extends React.ElementType = 'button'>(props: AddToCartButtonProps<AsType>): JSX.Element;
|
|
28
|
+
/** @publicDocs */
|
|
27
29
|
export interface AddToCartButtonPropsForDocs<AsType extends React.ElementType = 'button'> extends AddToCartButtonPropsBase, CustomBaseButtonProps<AsType> {
|
|
28
30
|
}
|
|
@@ -16,8 +16,10 @@ type BuyNowButtonProps<AsType extends React.ElementType = 'button'> = BuyNowButt
|
|
|
16
16
|
/**
|
|
17
17
|
* The `BuyNowButton` component renders a button that adds an item to the cart and redirects the customer to checkout.
|
|
18
18
|
* Must be a child of a `CartProvider` component.
|
|
19
|
+
* @publicDocs
|
|
19
20
|
*/
|
|
20
21
|
export declare function BuyNowButton<AsType extends React.ElementType = 'button'>(props: BuyNowButtonProps<AsType>): JSX.Element;
|
|
22
|
+
/** @publicDocs */
|
|
21
23
|
export interface BuyNowButtonPropsForDocs<AsType extends React.ElementType = 'button'> extends BuyNowButtonPropsBase, CustomBaseButtonProps<AsType> {
|
|
22
24
|
}
|
|
23
25
|
export {};
|
|
@@ -8,8 +8,10 @@ type CartCheckoutButtonProps = Omit<BaseButtonProps<'button'>, 'onClick'> & Chil
|
|
|
8
8
|
/**
|
|
9
9
|
* The `CartCheckoutButton` component renders a button that redirects to the checkout URL for the cart.
|
|
10
10
|
* It must be a descendent of a `CartProvider` component.
|
|
11
|
+
* @publicDocs
|
|
11
12
|
*/
|
|
12
13
|
export declare function CartCheckoutButton(props: CartCheckoutButtonProps): JSX.Element;
|
|
14
|
+
/** @publicDocs */
|
|
13
15
|
export interface CartCheckoutButtonPropsForDocs<AsType extends React.ElementType = 'button'> extends Omit<CustomBaseButtonProps<AsType>, 'onClick'> {
|
|
14
16
|
}
|
|
15
17
|
export {};
|
package/dist/types/CartCost.d.ts
CHANGED
|
@@ -10,8 +10,10 @@ type CartCostProps = Omit<React.ComponentProps<typeof Money>, 'data'> & CartCost
|
|
|
10
10
|
* The `CartCost` component renders a `Money` component with the cost associated with the `amountType` prop.
|
|
11
11
|
* If no `amountType` prop is specified, then it defaults to `totalAmount`.
|
|
12
12
|
* Depends on `useCart()` and must be a child of `<CartProvider/>`
|
|
13
|
+
* @publicDocs
|
|
13
14
|
*/
|
|
14
15
|
export declare function CartCost(props: CartCostProps): JSX.Element | null;
|
|
16
|
+
/** @publicDocs */
|
|
15
17
|
export interface CartCostPropsForDocs<AsType extends React.ElementType = 'div'> extends Omit<MoneyPropsBase<AsType>, 'data'>, CartCostPropsBase {
|
|
16
18
|
}
|
|
17
19
|
export {};
|
|
@@ -7,6 +7,7 @@ type CartLinePartialDeep = PartialDeep<CartLine | ComponentizableCartLine, {
|
|
|
7
7
|
export declare const CartLineContext: import("react").Context<CartLinePartialDeep | null>;
|
|
8
8
|
/**
|
|
9
9
|
* The `useCartLine` hook provides access to the [CartLine object](https://shopify.dev/api/storefront/2026-04/objects/cartline) from the Storefront API. It must be a descendent of a `CartProvider` component.
|
|
10
|
+
* @publicDocs
|
|
10
11
|
*/
|
|
11
12
|
export declare function useCartLine(): CartLinePartialDeep;
|
|
12
13
|
type CartLineProviderProps = {
|
|
@@ -17,6 +18,7 @@ type CartLineProviderProps = {
|
|
|
17
18
|
};
|
|
18
19
|
/**
|
|
19
20
|
* The `CartLineProvider` component creates a context for using a cart line.
|
|
21
|
+
* @publicDocs
|
|
20
22
|
*/
|
|
21
23
|
export declare function CartLineProvider({ children, line, }: CartLineProviderProps): JSX.Element;
|
|
22
24
|
export {};
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import type { ComponentPropsWithoutRef, ElementType } from 'react';
|
|
2
|
+
/** @publicDocs */
|
|
2
3
|
interface CartLineQuantityBaseProps<ComponentGeneric extends ElementType = 'span'> {
|
|
3
4
|
/** An HTML tag or React Component to be rendered as the base element wrapper. The default is `span`. */
|
|
4
5
|
as?: ComponentGeneric;
|
|
@@ -8,6 +9,7 @@ export type CartLineQuantityProps<ComponentGeneric extends ElementType> = CartLi
|
|
|
8
9
|
* The `<CartLineQuantity/>` component renders a `span` (or another element / component that can be customized by the `as` prop) with the cart line's quantity.
|
|
9
10
|
*
|
|
10
11
|
* It must be a descendent of a `<CartLineProvider/>` component, and uses the `useCartLine()` hook internally.
|
|
12
|
+
* @publicDocs
|
|
11
13
|
*/
|
|
12
14
|
export declare function CartLineQuantity<ComponentGeneric extends ElementType = 'span'>(props: CartLineQuantityProps<ComponentGeneric>): JSX.Element;
|
|
13
15
|
export {};
|
|
@@ -8,6 +8,7 @@ type CartLineQuantityAdjustButtonProps<AsType extends React.ElementType = 'butto
|
|
|
8
8
|
* The `<CartLineQuantityAdjustButton />` component renders a button that adjusts the cart line's quantity when pressed.
|
|
9
9
|
*
|
|
10
10
|
* It must be a descendent of `<CartLineProvider/>` and `<CartProvider/>`.
|
|
11
|
+
* @publicDocs
|
|
11
12
|
*/
|
|
12
13
|
export declare function CartLineQuantityAdjustButton<AsType extends React.ElementType = 'button'>(props: CartLineQuantityAdjustButtonProps<AsType>): JSX.Element;
|
|
13
14
|
export {};
|
|
@@ -1,9 +1,14 @@
|
|
|
1
1
|
import { CartBuyerIdentityInput, CountryCode, LanguageCode, Cart as CartType } from './storefront-api-types.js';
|
|
2
|
-
import { CartWithActions } from './cart-types.js';
|
|
2
|
+
import { CartWithActions, CartWithActionsDocs } from './cart-types.js';
|
|
3
3
|
import { PartialDeep } from 'type-fest';
|
|
4
4
|
export declare const CartContext: import("react").Context<CartWithActions | null>;
|
|
5
|
+
/**
|
|
6
|
+
* `useCart` hook must be a descendent of a `CartProvider` component.
|
|
7
|
+
* @publicDocs */
|
|
8
|
+
export type UseCartDocs = () => CartWithActionsDocs;
|
|
5
9
|
/**
|
|
6
10
|
* The `useCart` hook provides access to the cart object. It must be a descendent of a `CartProvider` component.
|
|
11
|
+
* @publicDocs
|
|
7
12
|
*/
|
|
8
13
|
export declare function useCart(): CartWithActions;
|
|
9
14
|
type CartProviderProps = {
|
|
@@ -65,6 +70,7 @@ type CartProviderProps = {
|
|
|
65
70
|
* There are also props that trigger when a call to the Storefront API is completed, such as `onLineAddComplete={}` when the fetch request for adding a line to the cart completes.
|
|
66
71
|
*
|
|
67
72
|
* The `CartProvider` component must be a descendant of the `ShopifyProvider` component.
|
|
73
|
+
* @publicDocs
|
|
68
74
|
*/
|
|
69
75
|
export declare function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLineRemove, onLineUpdate, onNoteUpdate, onBuyerIdentityUpdate, onAttributesUpdate, onDiscountCodesUpdate, onCreateComplete, onLineAddComplete, onLineRemoveComplete, onLineUpdateComplete, onNoteUpdateComplete, onBuyerIdentityUpdateComplete, onAttributesUpdateComplete, onDiscountCodesUpdateComplete, data: cart, cartFragment, customerAccessToken, countryCode, languageCode, }: CartProviderProps): JSX.Element;
|
|
70
76
|
/**
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
import type { ExternalVideo as ExternalVideoType } from './storefront-api-types.js';
|
|
2
2
|
import type { PartialDeep } from 'type-fest';
|
|
3
3
|
import { IframeHTMLAttributes } from 'react';
|
|
4
|
+
/**
|
|
5
|
+
* Takes in the same props as a native `<iframe>` element, except for `src`.
|
|
6
|
+
* @publicDocs */
|
|
4
7
|
export interface ExternalVideoBaseProps {
|
|
5
8
|
/**
|
|
6
9
|
* An object with fields that correspond to the Storefront API's [ExternalVideo object](https://shopify.dev/api/storefront/reference/products/externalvideo).
|
|
@@ -18,6 +21,7 @@ export type ExternalVideoProps = Omit<IframeHTMLAttributes<HTMLIFrameElement>, '
|
|
|
18
21
|
/**
|
|
19
22
|
* The `ExternalVideo` component renders an embedded video for the Storefront
|
|
20
23
|
* API's [ExternalVideo object](https://shopify.dev/api/storefront/reference/products/externalvideo).
|
|
24
|
+
* @publicDocs
|
|
21
25
|
*/
|
|
22
26
|
export declare const ExternalVideo: import("react").ForwardRefExoticComponent<Omit<IframeHTMLAttributes<HTMLIFrameElement>, "src"> & ExternalVideoBaseProps & import("react").RefAttributes<HTMLIFrameElement>>;
|
|
23
27
|
interface YouTube {
|
package/dist/types/Image.d.ts
CHANGED
|
@@ -23,6 +23,7 @@ export type LoaderParams = {
|
|
|
23
23
|
};
|
|
24
24
|
export type Loader = (params: LoaderParams) => string;
|
|
25
25
|
type Crop = 'center' | 'top' | 'bottom' | 'left' | 'right';
|
|
26
|
+
/** @publicDocs */
|
|
26
27
|
export type HydrogenImageProps = React.ComponentPropsWithRef<'img'> & HydrogenImageBaseProps;
|
|
27
28
|
type HydrogenImageBaseProps = {
|
|
28
29
|
/** The aspect ratio of the image, in the format of `width/height`.
|
|
@@ -117,6 +118,7 @@ export declare const IMAGE_FRAGMENT = "#graphql\n fragment Image on Image {\n
|
|
|
117
118
|
* ```
|
|
118
119
|
*
|
|
119
120
|
* {@link https://shopify.dev/docs/api/hydrogen-react/components/image}
|
|
121
|
+
* @publicDocs
|
|
120
122
|
*/
|
|
121
123
|
export declare const Image: React.ForwardRefExoticComponent<Omit<HydrogenImageProps, "ref"> & React.RefAttributes<HTMLImageElement>>;
|
|
122
124
|
export declare function shopifyLoader({ src, width, height, crop }: LoaderParams): string;
|
|
@@ -6,6 +6,9 @@ import type { MediaEdge as MediaEdgeType } from './storefront-api-types.js';
|
|
|
6
6
|
import type { PartialDeep } from 'type-fest';
|
|
7
7
|
import type { ModelViewerElement } from '@google/model-viewer/lib/model-viewer.js';
|
|
8
8
|
type BaseProps = React.HTMLAttributes<HTMLImageElement | HTMLVideoElement | HTMLIFrameElement | ModelViewerElement>;
|
|
9
|
+
/**
|
|
10
|
+
* MediaFile renders an `Image`, `Video`, `ExternalVideo`, or `ModelViewer` component. Use the `mediaOptions` prop to customize the props sent to each of these components.
|
|
11
|
+
* @publicDocs */
|
|
9
12
|
export interface MediaFileProps extends BaseProps {
|
|
10
13
|
/** An object with fields that correspond to the Storefront API's [Media object](https://shopify.dev/api/storefront/reference/products/media). */
|
|
11
14
|
data: PartialDeep<MediaEdgeType['node'], {
|
|
@@ -28,6 +31,7 @@ type MediaOptions = {
|
|
|
28
31
|
* The `MediaFile` component renders the media for the Storefront API's
|
|
29
32
|
* [Media object](https://shopify.dev/api/storefront/reference/products/media). It renders an `Image`, a
|
|
30
33
|
* `Video`, an `ExternalVideo`, or a `ModelViewer` depending on the `__typename` of the `data` prop.
|
|
34
|
+
* @publicDocs
|
|
31
35
|
*/
|
|
32
36
|
export declare function MediaFile({ data, mediaOptions, ...passthroughProps }: MediaFileProps): JSX.Element | null;
|
|
33
37
|
export {};
|
|
@@ -52,6 +52,7 @@ type ModelViewerBaseProps = {
|
|
|
52
52
|
* The `model-viewer` custom element is lazily downloaded through a dynamically-injected `<script type="module">` tag when the `<ModelViewer />` component is rendered
|
|
53
53
|
*
|
|
54
54
|
* ModelViewer is using version `1.21.1` of the `@google/model-viewer` library.
|
|
55
|
+
* @publicDocs
|
|
55
56
|
*/
|
|
56
57
|
export declare function ModelViewer(props: ModelViewerProps): JSX.Element | null;
|
|
57
58
|
export {};
|
package/dist/types/Money.d.ts
CHANGED
|
@@ -59,6 +59,7 @@ export type MoneyProps<ComponentGeneric extends React.ElementType> = MoneyPropsB
|
|
|
59
59
|
* measurementSeparator=" per "
|
|
60
60
|
* />
|
|
61
61
|
* ```
|
|
62
|
+
* @publicDocs
|
|
62
63
|
*/
|
|
63
64
|
export declare function Money<ComponentGeneric extends React.ElementType = 'div'>({ data, as, withoutCurrency, withoutTrailingZeros, measurement, measurementSeparator, ...passthroughProps }: MoneyProps<ComponentGeneric>): JSX.Element;
|
|
64
65
|
export {};
|
|
@@ -16,7 +16,9 @@ export interface ProductPriceProps {
|
|
|
16
16
|
/**
|
|
17
17
|
* The `ProductPrice` component renders a `Money` component with the product
|
|
18
18
|
* [`priceRange`](https://shopify.dev/api/storefront/reference/products/productpricerange)'s `maxVariantPrice` or `minVariantPrice`, for either the regular price or compare at price range.
|
|
19
|
+
* @publicDocs
|
|
19
20
|
*/
|
|
20
21
|
export declare function ProductPrice<ComponentGeneric extends React.ElementType = 'div'>(props: ProductPriceProps & Omit<MoneyProps<ComponentGeneric>, 'data' | 'measurement'>): JSX.Element | null;
|
|
22
|
+
/** @publicDocs */
|
|
21
23
|
export interface ProductPricePropsForDocs<AsType extends React.ElementType = 'div'> extends Omit<MoneyPropsBase<AsType>, 'data' | 'measurement'>, ProductPriceProps {
|
|
22
24
|
}
|
|
@@ -22,10 +22,12 @@ interface ProductProviderProps {
|
|
|
22
22
|
* `<ProductProvider />` is a context provider that enables use of the `useProduct()` hook.
|
|
23
23
|
*
|
|
24
24
|
* It helps manage selected options and variants for a product.
|
|
25
|
+
* @publicDocs
|
|
25
26
|
*/
|
|
26
27
|
export declare function ProductProvider({ children, data: product, initialVariantId: explicitVariantId, }: ProductProviderProps): JSX.Element;
|
|
27
28
|
/**
|
|
28
29
|
* Provides access to the context value provided by `<ProductProvider />`. Must be a descendent of `<ProductProvider />`.
|
|
30
|
+
* @publicDocs
|
|
29
31
|
*/
|
|
30
32
|
export declare function useProduct(): ProductHookValue;
|
|
31
33
|
export interface OptionWithValues {
|
package/dist/types/RichText.d.ts
CHANGED
|
@@ -9,6 +9,8 @@ export interface RichTextPropsBase<ComponentGeneric extends React.ElementType> {
|
|
|
9
9
|
/** Remove rich text formatting and render plain text */
|
|
10
10
|
plain?: boolean;
|
|
11
11
|
}
|
|
12
|
+
/** @publicDocs */
|
|
12
13
|
export declare function RichText<ComponentGeneric extends React.ElementType = 'div'>({ as, data, plain, components, ...passthroughProps }: RichTextProps<ComponentGeneric>): JSX.Element;
|
|
13
14
|
export type RichTextProps<ComponentGeneric extends React.ElementType> = RichTextPropsBase<ComponentGeneric> & Omit<React.ComponentPropsWithoutRef<ComponentGeneric>, keyof RichTextPropsBase<ComponentGeneric>>;
|
|
15
|
+
/** @publicDocs */
|
|
14
16
|
export type RichTextPropsForDocs<AsType extends React.ElementType = 'div'> = RichTextPropsBase<AsType>;
|
|
@@ -43,6 +43,7 @@ declare global {
|
|
|
43
43
|
* The `ShopPayButton` component renders a button that redirects to the Shop Pay checkout.
|
|
44
44
|
* It renders a [`<shop-pay-button>`](https://shopify.dev/custom-storefronts/tools/web-components) custom element, for which it will lazy-load the source code automatically.
|
|
45
45
|
* It relies on the `<ShopProvider>` context provider.
|
|
46
|
+
* @publicDocs
|
|
46
47
|
*/
|
|
47
48
|
export declare function ShopPayButton({ channel, variantIds, className, variantIdsAndQuantities, width, storeDomain: _storeDomain, }: ShopPayButtonProps): JSX.Element;
|
|
48
49
|
export declare const MissingStoreDomainErrorMessage = "You must pass a \"storeDomain\" prop to the \"ShopPayButton\" component, or wrap it in a \"ShopifyProvider\" component.";
|
|
@@ -3,10 +3,12 @@ import type { LanguageCode, CountryCode } from './storefront-api-types.js';
|
|
|
3
3
|
export declare const defaultShopifyContext: ShopifyContextValue;
|
|
4
4
|
/**
|
|
5
5
|
* The `<ShopifyProvider/>` component enables use of the `useShop()` hook. The component should wrap your app.
|
|
6
|
+
* @publicDocs
|
|
6
7
|
*/
|
|
7
8
|
export declare function ShopifyProvider({ children, ...shopifyConfig }: ShopifyProviderProps): JSX.Element;
|
|
8
9
|
/**
|
|
9
10
|
* Provides access to the `shopifyConfig` prop of `<ShopifyProvider/>`. Must be a descendent of `<ShopifyProvider/>`.
|
|
11
|
+
* @publicDocs
|
|
10
12
|
*/
|
|
11
13
|
export declare function useShop(): ShopifyContextValue;
|
|
12
14
|
export interface ShopifyProviderBase {
|