@lime-bundles/react 7.3.0 → 7.4.0

package/README.md

@@ -124,10 +124,14 @@ Full CSS variable reference: [css-variables.md](./docs/css-variables.md).
 
 `<FixedBundle>`, `<VolumeBundle>`, `<MixMatchBundle>`, and `useBundleData` accept four optional props for Shopify Markets and B2B catalogs:
 
-- **`country`** — ISO-3166 alpha-2 (e.g. `"US"`). Passed as Storefront `@inContext(country:)`. Drives Markets pricing and currency.
+- **`country`** — ISO-3166 alpha-2 (e.g. `"US"`). Passed as Storefront `@inContext(country:)`. Drives Markets pricing and currency, and matches the bundle's projected country codes when it is restricted to specific markets.
 - **`language`** — ISO-639-1 (e.g. `"EN"`). Passed as `@inContext(language:)`.
-- **`buyer`** — B2B buyer identity. `BuyerInput` object or `() => Promise<BuyerInput>` callback.
-- **`marketId`** — Current visitor's Market GID. When the bundle is `marketVisibility: "specific"`, it's hidden unless this market is in its allow-list.
+- **`buyer`** — B2B buyer identity. `BuyerInput` object or `() => Promise<BuyerInput>` callback. Its `companyLocationId` also matches the bundle's projected company locations when it is restricted to a B2B market.
+- **`marketId`** — Current visitor's Market GID. Legacy market-gate signal; prefer `country` + `buyer` — Shopify has deprecated market IDs for buyer targeting, and a B2B buyer's company-location market has no storefront market context.
+
+A market-restricted bundle is shown when **any** signal matches: buyer country vs the bundle's projected `countryCodes`, buyer company location vs its projected `companyLocationIds`, or the legacy market-id vs `marketIds`. With no matching signal the fetcher returns `bundle: null` plus a `BundleVisibilityWarning` describing both sides of the mismatch.
+
+**`currencyRate`** — store→presentment currency rate, accepted by the same components and by `fetchBundleData` / `useBundleData` / `useBundlesForProduct`. Merchant-configured amounts (fixed-amount discounts, flat prices, volume tier amounts) are stored in the shop's store currency, while `@inContext(country:)` prices arrive in the buyer's presentment currency; the checkout-side discount function converts configured amounts by `presentmentCurrencyRate`, so pass the same rate here (Hydrogen: the cart's `presentmentCurrencyRate`; Liquid-adjacent pages: `window.Shopify.currency.rate`) or the quoted sale price drifts from what checkout charges. Defaults to `1` (no conversion); invalid or non-positive values fall back to `1`. Percentages are unaffected.
 
 ```tsx
 <FixedBundle

package/dist/index.cjs

@@ -93,6 +93,7 @@ async function fetchBundleData(options) {
   return result.bundle;
 }
 async function fetchBundleDataWithWarnings(options) {
+  const buyer = typeof options.buyer === "function" ? await options.buyer() : options.buyer;
   const config = {
     shopDomain: options.shopDomain,
     accessToken: options.storefrontAccessToken,
@@ -100,7 +101,7 @@ async function fetchBundleDataWithWarnings(options) {
     apiVersion: options.apiVersion,
     country: options.country,
     language: options.language,
-    buyer: options.buyer
+    buyer
   };
   const client = (0, import_core.createStorefrontClient)(config);
   const query = (0, import_core.hasInContext)(config) ? (0, import_core.withInContext)(import_core.BUNDLE_METAOBJECT_QUERY) : import_core.BUNDLE_METAOBJECT_QUERY;
@@ -115,11 +116,16 @@ async function fetchBundleDataWithWarnings(options) {
       "not_found"
     );
   }
-  const bundle = (0, import_core.parseMetaobjectBundleStrict)(
-    data.metaobject.id,
-    data.metaobject.fields
+  const bundle = (0, import_core.convertBundleToPresentment)(
+    (0, import_core.parseMetaobjectBundleStrict)(data.metaobject.id, data.metaobject.fields),
+    options.currencyRate
   );
-  if (!(0, import_core.isVisibleInMarket)(bundle, options.marketId)) {
+  const buyerContext = {
+    marketId: options.marketId,
+    countryCode: options.country,
+    companyLocationId: buyer?.companyLocationId
+  };
+  if (!(0, import_core.isVisibleToBuyer)(bundle, buyerContext)) {
     return {
       bundle: null,
       warnings: [
@@ -127,7 +133,11 @@ async function fetchBundleDataWithWarnings(options) {
           bundleGid: options.bundleGid,
           reason: "market_mismatch",
           currentMarketId: options.marketId ?? null,
-          allowedMarketIds: bundle.marketIds
+          currentCountryCode: options.country ?? null,
+          currentCompanyLocationId: buyer?.companyLocationId ?? null,
+          allowedMarketIds: bundle.marketIds,
+          allowedCountryCodes: bundle.countryCodes,
+          allowedCompanyLocationIds: bundle.companyLocationIds
         }
       ]
     };
@@ -194,7 +204,8 @@ function useBundleData(options) {
       country: options.country,
       language: options.language,
       buyer: options.buyer,
-      marketId: options.marketId
+      marketId: options.marketId,
+      currencyRate: options.currencyRate
     }).then((bundle) => {
       if (controller.signal.aborted) return;
       setState({ status: "success", bundle, error: null });
@@ -225,7 +236,8 @@ function useBundleData(options) {
     options.country,
     options.language,
     options.buyer,
-    options.marketId
+    options.marketId,
+    options.currencyRate
   ]);
   return state;
 }
@@ -749,12 +761,22 @@ function FixedBundle(props) {
     analyticsEnabled,
     onAddToCart,
     onError,
-    className
+    className,
+    country,
+    language,
+    buyer,
+    marketId,
+    currencyRate
   } = props;
   const result = useBundleData({
     shopDomain,
     storefrontAccessToken,
-    bundleGid
+    bundleGid,
+    country,
+    language,
+    buyer,
+    marketId,
+    currencyRate
   });
   const { elementRef, trackAddToCart } = useAnalytics({
     shopDomain,
@@ -1810,12 +1832,22 @@ function MixMatchBundle(props) {
     onAddToCart,
     onError,
     className,
-    productHandle
+    productHandle,
+    country,
+    language,
+    buyer,
+    marketId,
+    currencyRate
   } = props;
   const result = useBundleData({
     shopDomain,
     storefrontAccessToken,
-    bundleGid
+    bundleGid,
+    country,
+    language,
+    buyer,
+    marketId,
+    currencyRate
   });
   const { elementRef, trackAddToCart } = useAnalytics({
     shopDomain,
@@ -2341,12 +2373,22 @@ function VolumeBundle(props) {
     onAddToCart,
     onError,
     className,
-    productId
+    productId,
+    country,
+    language,
+    buyer,
+    marketId,
+    currencyRate
   } = props;
   const result = useBundleData({
     shopDomain,
     storefrontAccessToken,
-    bundleGid
+    bundleGid,
+    country,
+    language,
+    buyer,
+    marketId,
+    currencyRate
   });
   const { elementRef, trackAddToCart } = useAnalytics({
     shopDomain,
@@ -2722,12 +2764,22 @@ function BogoBundle(props) {
     analyticsEnabled,
     onAddToCart,
     onError,
-    className
+    className,
+    country,
+    language,
+    buyer,
+    marketId,
+    currencyRate
   } = props;
   const result = useBundleData({
     shopDomain,
     storefrontAccessToken,
-    bundleGid
+    bundleGid,
+    country,
+    language,
+    buyer,
+    marketId,
+    currencyRate
   });
   const { elementRef, trackAddToCart } = useAnalytics({
     shopDomain,
@@ -3066,6 +3118,8 @@ function normalizeText2(str) {
   return str.normalize("NFD").replace(/[̀-ͯ]/g, "").toLowerCase();
 }
 var FILTERS_ALL2 = "__all__";
+var STEP_CASCADE_MS = 500;
+var AUTO_ADVANCE_HOLD_MS = 160;
 function MultiStepPicker({
   bundle,
   currency,
@@ -3089,6 +3143,8 @@ function MultiStepPicker({
   const closeBtnRef = (0, import_react15.useRef)(null);
   const listRef = (0, import_react15.useRef)(null);
   const mouseDownTarget = (0, import_react15.useRef)(null);
+  const cascadeTimer = (0, import_react15.useRef)(null);
+  const autoAdvanceTimer = (0, import_react15.useRef)(null);
   const [open, setOpen] = (0, import_react15.useState)(false);
   const [stepIndex, setStepIndex] = (0, import_react15.useState)(
     () => Math.max(0, Math.min(steps.length - 1, initialStep))
@@ -3124,6 +3180,14 @@ function MultiStepPicker({
     const id = requestAnimationFrame(() => setOpen(true));
     return () => cancelAnimationFrame(id);
   }, []);
+  (0, import_react15.useEffect)(() => {
+    return () => {
+      if (cascadeTimer.current !== null) clearTimeout(cascadeTimer.current);
+      if (autoAdvanceTimer.current !== null) {
+        clearTimeout(autoAdvanceTimer.current);
+      }
+    };
+  }, []);
   useScrollLock(true);
   useFocusTrap({
     active: true,
@@ -3152,12 +3216,36 @@ function MultiStepPicker({
     lastSeen.current = { step: stepIndex, units: unitsInStep };
     if (!autoAdvance || isLastStep || prev.step !== stepIndex) return;
     if (unitsInStep <= prev.units) return;
-    if ((0, import_core13.stepHeadroom)(step?.maxQuantity ?? null, unitsInStep) === 0) {
-      goToStep(stepIndex + 1);
+    if ((0, import_core13.stepHeadroom)(step?.maxQuantity ?? null, unitsInStep) !== 0) return;
+    const from = stepIndex;
+    if (autoAdvanceTimer.current !== null) {
+      clearTimeout(autoAdvanceTimer.current);
     }
+    autoAdvanceTimer.current = setTimeout(() => {
+      autoAdvanceTimer.current = null;
+      goToStep(from + 1);
+    }, AUTO_ADVANCE_HOLD_MS);
   });
   function goToStep(i) {
     const clamped = Math.max(0, Math.min(steps.length - 1, i));
+    if (autoAdvanceTimer.current !== null) {
+      clearTimeout(autoAdvanceTimer.current);
+      autoAdvanceTimer.current = null;
+    }
+    const dialog = dialogRef.current;
+    if (dialog && clamped !== stepIndex) {
+      if (cascadeTimer.current !== null) clearTimeout(cascadeTimer.current);
+      dialog.removeAttribute("data-step-transition");
+      void dialog.offsetHeight;
+      dialog.setAttribute(
+        "data-step-transition",
+        clamped > stepIndex ? "forward" : "back"
+      );
+      cascadeTimer.current = setTimeout(() => {
+        cascadeTimer.current = null;
+        dialog.removeAttribute("data-step-transition");
+      }, STEP_CASCADE_MS);
+    }
     setStepIndex(clamped);
     setQuery("");
     setActiveType(FILTERS_ALL2);
@@ -3742,12 +3830,22 @@ function MultiStepBundle(props) {
     analyticsEnabled,
     onAddToCart,
     onError,
-    className
+    className,
+    country,
+    language,
+    buyer,
+    marketId,
+    currencyRate
   } = props;
   const result = useBundleData({
     shopDomain,
     storefrontAccessToken,
-    bundleGid
+    bundleGid,
+    country,
+    language,
+    buyer,
+    marketId,
+    currencyRate
   });
   const { elementRef, trackAddToCart } = useAnalytics({
     shopDomain,
@@ -4353,7 +4451,8 @@ function useBundlesForProduct(options) {
       storefrontAccessToken: options.storefrontAccessToken,
       productHandle: options.productHandle,
       buyerIp: options.buyerIp,
-      signal: controller.signal
+      signal: controller.signal,
+      currencyRate: options.currencyRate
     }).then((bundles) => {
       if (controller.signal.aborted) return;
       setState({ status: "success", bundles, error: null });
@@ -4381,7 +4480,8 @@ function useBundlesForProduct(options) {
     options.shopDomain,
     options.storefrontAccessToken,
     options.productHandle,
-    options.buyerIp
+    options.buyerIp,
+    options.currencyRate
   ]);
   return state;
 }