@lime-bundles/react 4.0.0 → 4.1.0

package/README.md

@@ -113,6 +113,49 @@ useEffect(() => {
 
 Full CSS variable reference: [css-variables.md](./docs/css-variables.md).
 
+## Markets & B2B
+
+`<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.
+- **`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.
+
+```tsx
+<FixedBundle
+  shopDomain="acme.myshopify.com"
+  storefrontAccessToken={token}
+  bundleGid={gid}
+  onAddToCart={addToCart}
+  country="US"
+  language="EN"
+  buyer={async () => fetchBuyerToken()}  // resolved per request
+  marketId="gid://shopify/Market/1"
+/>
+```
+
+**Security — B2B `customerAccessToken`:**
+
+- Prefer the callback form (`() => Promise<BuyerInput>`) so the token doesn't sit in static prop trees, React DevTools snapshots, or Sentry/LogRocket traces.
+- Never pass via URL query parameters (leaks to Referer headers and server logs).
+- Never store in localStorage shared with third-party scripts.
+- The Customer Account API PKCE flow is the canonical source. See https://shopify.dev/docs/api/customer/latest.
+
+**Caching:**
+
+Buyer-contextual responses MUST be `Cache-Control: private` — never share across users. `@lime-bundles/core` exports `getCacheKey()` for SWR / TanStack Query consumers; it hashes the buyer token (never includes the raw value) so per-buyer caches don't leak tokens.
+
+```tsx
+import { getCacheKey } from "@lime-bundles/core";
+useQuery({
+  queryKey: getCacheKey("Bundle", { id }, { shopDomain, country, buyer }),
+  queryFn: () => fetchBundleData({ ... }),
+});
+```
+
+**Filtering vs throwing:** `fetchBundleData` throws `BundleParseError` when the bundle is hidden by the market gate. Use `fetchBundleDataWithWarnings` instead to receive `{ bundle, warnings }` and decide whether to render alternative content.
+
 ## Version policy
 
 `BundleComponentProps`, `UseBundleDataResult`, and `UseBundlesForProductResult` are locked at v2.0.0. All three packages (`core`, `react`, `widget`) bump majors together.

package/dist/index.cjs

@@ -80,14 +80,29 @@ var import_core3 = require("@lime-bundles/core");
 // src/fetchBundleData.ts
 var import_core = require("@lime-bundles/core");
 async function fetchBundleData(options) {
-  const client = (0, import_core.createStorefrontClient)({
+  const result = await fetchBundleDataWithWarnings(options);
+  if (!result.bundle) {
+    throw new import_core.BundleParseError(
+      `Bundle hidden by market gate: ${options.bundleGid}`,
+      "not_found"
+    );
+  }
+  return result.bundle;
+}
+async function fetchBundleDataWithWarnings(options) {
+  const config = {
     shopDomain: options.shopDomain,
     accessToken: options.storefrontAccessToken,
     buyerIp: options.buyerIp,
-    apiVersion: options.apiVersion
-  });
+    apiVersion: options.apiVersion,
+    country: options.country,
+    language: options.language,
+    buyer: options.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;
   const data = await client.query(
-    import_core.BUNDLE_METAOBJECT_QUERY,
+    query,
     { id: options.bundleGid },
     { signal: options.signal }
   );
@@ -97,10 +112,24 @@ async function fetchBundleData(options) {
       "not_found"
     );
   }
-  return (0, import_core.parseMetaobjectBundleStrict)(
+  const bundle = (0, import_core.parseMetaobjectBundleStrict)(
     data.metaobject.id,
     data.metaobject.fields
   );
+  if (bundle.marketVisibility === "specific" && (!options.marketId || !bundle.marketIds.includes(options.marketId))) {
+    return {
+      bundle: null,
+      warnings: [
+        {
+          bundleGid: options.bundleGid,
+          reason: "market_mismatch",
+          currentMarketId: options.marketId ?? null,
+          allowedMarketIds: bundle.marketIds
+        }
+      ]
+    };
+  }
+  return { bundle, warnings: [] };
 }
 
 // src/fetchShopCustomCss.ts
@@ -146,7 +175,11 @@ function useBundleData(options) {
       shopDomain: options.shopDomain,
       storefrontAccessToken: options.storefrontAccessToken,
       bundleGid: options.bundleGid,
-      signal: controller.signal
+      signal: controller.signal,
+      country: options.country,
+      language: options.language,
+      buyer: options.buyer,
+      marketId: options.marketId
     }).then((bundle) => {
       if (controller.signal.aborted) return;
       setState({ status: "success", bundle, error: null });
@@ -173,7 +206,11 @@ function useBundleData(options) {
   }, [
     options.shopDomain,
     options.storefrontAccessToken,
-    options.bundleGid
+    options.bundleGid,
+    options.country,
+    options.language,
+    options.buyer,
+    options.marketId
   ]);
   return state;
 }