@lime-bundles/react 7.3.0 → 7.4.0

package/dist/index.d.cts

@@ -59,6 +59,14 @@ interface BundleComponentProps {
      * more than one product should pass it.
      */
     productId?: string;
+    /**
+     * Store→presentment currency rate. Merchant-configured amounts
+     * (fixed_amount / flat_price values, volume tier amounts) are stored in
+     * the shop's store currency; pass the rate for the buyer's currency so
+     * quoted sale prices match what the checkout's discount function
+     * charges. Omit (or pass 1) on store-currency storefronts.
+     */
+    currencyRate?: number;
 }
 
 declare function FixedBundle(props: BundleComponentProps): react_jsx_runtime.JSX.Element | null;
@@ -187,12 +195,24 @@ interface FetchBundleDataOptions {
      */
     buyer?: BuyerResolver;
     /**
-     * Shopify Market GID for the current visitor. When set and the bundle's
-     * `marketVisibility === "specific"`, the bundle is filtered out if its
-     * `marketIds` doesn't include this market. Returned to the caller via
-     * `BundleVisibilityWarning[]` for surfacing.
+     * Shopify Market GID for the current visitor. Legacy market-gate signal:
+     * when set and the bundle's `marketVisibility === "specific"`, a direct
+     * market-id match shows the bundle. Prefer letting the gate work from
+     * `country` (retail) and `buyer.companyLocationId` (B2B) — Shopify has
+     * deprecated market IDs as buyer-targeting signals, and a B2B buyer's
+     * company-location market has no storefront market context at all.
+     * Misses are returned via `BundleVisibilityWarning[]` for surfacing.
      */
     marketId?: string;
+    /**
+     * Store→presentment currency rate. Merchant-configured amounts
+     * (fixed_amount / flat_price values, volume tier amounts) are stored in
+     * the shop's store currency; pass the rate for the buyer's currency so
+     * quoted sale prices match what the checkout's discount function
+     * charges. Omit (or pass 1) on store-currency storefronts. See
+     * `convertBundleToPresentment` in `@lime-bundles/core`.
+     */
+    currencyRate?: number;
 }
 declare function fetchBundleData(options: FetchBundleDataOptions): Promise<ParsedBundle>;
 
@@ -229,6 +249,12 @@ interface UseBundleDataOptions {
     buyer?: BuyerResolver;
     /** Current visitor's Market GID — filters market-restricted bundles client-side. */
     marketId?: string;
+    /**
+     * Store→presentment currency rate for merchant-configured amounts
+     * (fixed_amount / flat_price values, volume tier amounts). See
+     * `FetchBundleDataOptions.currencyRate`.
+     */
+    currencyRate?: number;
 }
 type UseBundleDataResult = {
     status: "loading";
@@ -251,6 +277,12 @@ interface UseBundlesForProductOptions {
     productHandle: string;
     /** Forwarded as `Shopify-Storefront-Buyer-IP` — required for SSR paths. */
     buyerIp?: string;
+    /**
+     * Store→presentment currency rate for merchant-configured amounts
+     * (fixed_amount / flat_price values, volume tier amounts). See
+     * `FetchBundlesForProductOptions.currencyRate`.
+     */
+    currencyRate?: number;
 }
 type UseBundlesForProductResult = {
     status: "loading";

package/dist/index.d.ts

@@ -59,6 +59,14 @@ interface BundleComponentProps {
      * more than one product should pass it.
      */
     productId?: string;
+    /**
+     * Store→presentment currency rate. Merchant-configured amounts
+     * (fixed_amount / flat_price values, volume tier amounts) are stored in
+     * the shop's store currency; pass the rate for the buyer's currency so
+     * quoted sale prices match what the checkout's discount function
+     * charges. Omit (or pass 1) on store-currency storefronts.
+     */
+    currencyRate?: number;
 }
 
 declare function FixedBundle(props: BundleComponentProps): react_jsx_runtime.JSX.Element | null;
@@ -187,12 +195,24 @@ interface FetchBundleDataOptions {
      */
     buyer?: BuyerResolver;
     /**
-     * Shopify Market GID for the current visitor. When set and the bundle's
-     * `marketVisibility === "specific"`, the bundle is filtered out if its
-     * `marketIds` doesn't include this market. Returned to the caller via
-     * `BundleVisibilityWarning[]` for surfacing.
+     * Shopify Market GID for the current visitor. Legacy market-gate signal:
+     * when set and the bundle's `marketVisibility === "specific"`, a direct
+     * market-id match shows the bundle. Prefer letting the gate work from
+     * `country` (retail) and `buyer.companyLocationId` (B2B) — Shopify has
+     * deprecated market IDs as buyer-targeting signals, and a B2B buyer's
+     * company-location market has no storefront market context at all.
+     * Misses are returned via `BundleVisibilityWarning[]` for surfacing.
      */
     marketId?: string;
+    /**
+     * Store→presentment currency rate. Merchant-configured amounts
+     * (fixed_amount / flat_price values, volume tier amounts) are stored in
+     * the shop's store currency; pass the rate for the buyer's currency so
+     * quoted sale prices match what the checkout's discount function
+     * charges. Omit (or pass 1) on store-currency storefronts. See
+     * `convertBundleToPresentment` in `@lime-bundles/core`.
+     */
+    currencyRate?: number;
 }
 declare function fetchBundleData(options: FetchBundleDataOptions): Promise<ParsedBundle>;
 
@@ -229,6 +249,12 @@ interface UseBundleDataOptions {
     buyer?: BuyerResolver;
     /** Current visitor's Market GID — filters market-restricted bundles client-side. */
     marketId?: string;
+    /**
+     * Store→presentment currency rate for merchant-configured amounts
+     * (fixed_amount / flat_price values, volume tier amounts). See
+     * `FetchBundleDataOptions.currencyRate`.
+     */
+    currencyRate?: number;
 }
 type UseBundleDataResult = {
     status: "loading";
@@ -251,6 +277,12 @@ interface UseBundlesForProductOptions {
     productHandle: string;
     /** Forwarded as `Shopify-Storefront-Buyer-IP` — required for SSR paths. */
     buyerIp?: string;
+    /**
+     * Store→presentment currency rate for merchant-configured amounts
+     * (fixed_amount / flat_price values, volume tier amounts). See
+     * `FetchBundlesForProductOptions.currencyRate`.
+     */
+    currencyRate?: number;
 }
 type UseBundlesForProductResult = {
     status: "loading";

package/dist/index.js

@@ -22,7 +22,8 @@ import {
   BUNDLE_METAOBJECT_QUERY,
   withInContext,
   parseMetaobjectBundleStrict,
-  isVisibleInMarket,
+  convertBundleToPresentment,
+  isVisibleToBuyer,
   BundleParseError
 } from "@lime-bundles/core";
 async function fetchBundleData(options) {
@@ -36,6 +37,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,
@@ -43,7 +45,7 @@ async function fetchBundleDataWithWarnings(options) {
     apiVersion: options.apiVersion,
     country: options.country,
     language: options.language,
-    buyer: options.buyer
+    buyer
   };
   const client = createStorefrontClient(config);
   const query = hasInContext(config) ? withInContext(BUNDLE_METAOBJECT_QUERY) : BUNDLE_METAOBJECT_QUERY;
@@ -58,11 +60,16 @@ async function fetchBundleDataWithWarnings(options) {
       "not_found"
     );
   }
-  const bundle = parseMetaobjectBundleStrict(
-    data.metaobject.id,
-    data.metaobject.fields
+  const bundle = convertBundleToPresentment(
+    parseMetaobjectBundleStrict(data.metaobject.id, data.metaobject.fields),
+    options.currencyRate
   );
-  if (!isVisibleInMarket(bundle, options.marketId)) {
+  const buyerContext = {
+    marketId: options.marketId,
+    countryCode: options.country,
+    companyLocationId: buyer?.companyLocationId
+  };
+  if (!isVisibleToBuyer(bundle, buyerContext)) {
     return {
       bundle: null,
       warnings: [
@@ -70,7 +77,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
         }
       ]
     };
@@ -140,7 +151,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 });
@@ -171,7 +183,8 @@ function useBundleData(options) {
     options.country,
     options.language,
     options.buyer,
-    options.marketId
+    options.marketId,
+    options.currencyRate
   ]);
   return state;
 }
@@ -706,12 +719,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,
@@ -1784,12 +1807,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,
@@ -2327,12 +2360,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,
@@ -2712,12 +2755,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,
@@ -3076,6 +3129,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,
@@ -3099,6 +3154,8 @@ function MultiStepPicker({
   const closeBtnRef = useRef7(null);
   const listRef = useRef7(null);
   const mouseDownTarget = useRef7(null);
+  const cascadeTimer = useRef7(null);
+  const autoAdvanceTimer = useRef7(null);
   const [open, setOpen] = useState11(false);
   const [stepIndex, setStepIndex] = useState11(
     () => Math.max(0, Math.min(steps.length - 1, initialStep))
@@ -3134,6 +3191,14 @@ function MultiStepPicker({
     const id = requestAnimationFrame(() => setOpen(true));
     return () => cancelAnimationFrame(id);
   }, []);
+  useEffect14(() => {
+    return () => {
+      if (cascadeTimer.current !== null) clearTimeout(cascadeTimer.current);
+      if (autoAdvanceTimer.current !== null) {
+        clearTimeout(autoAdvanceTimer.current);
+      }
+    };
+  }, []);
   useScrollLock(true);
   useFocusTrap({
     active: true,
@@ -3162,12 +3227,36 @@ function MultiStepPicker({
     lastSeen.current = { step: stepIndex, units: unitsInStep };
     if (!autoAdvance || isLastStep || prev.step !== stepIndex) return;
     if (unitsInStep <= prev.units) return;
-    if (stepHeadroom(step?.maxQuantity ?? null, unitsInStep) === 0) {
-      goToStep(stepIndex + 1);
+    if (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);
@@ -3752,12 +3841,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,
@@ -4366,7 +4465,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 });
@@ -4394,7 +4494,8 @@ function useBundlesForProduct(options) {
     options.shopDomain,
     options.storefrontAccessToken,
     options.productHandle,
-    options.buyerIp
+    options.buyerIp,
+    options.currencyRate
   ]);
   return state;
 }