@burdenoff/website-sdk 2026.1014.1 → 2026.1021.2

package/dist/components/pricing.js

@@ -32,6 +32,168 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 
+// src/components/pricing-catalog.ts
+var UUID_PATTERN = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+function isUuidLike(value) {
+  return UUID_PATTERN.test(value.trim());
+}
+var PricingProductKeyError = class extends Error {
+  constructor(productId) {
+    super(
+      `PricingPage was given the product id "${productId}", which matches no public product. publicPlans(productId) expects the product slug (for example "vibecontrols"); pass product.slug.`
+    );
+    this.name = "PricingProductKeyError";
+  }
+};
+function resolvePricingProductKey(productId, candidates) {
+  const trimmed = productId.trim();
+  if (!isUuidLike(trimmed)) return trimmed;
+  const wanted = trimmed.toLowerCase();
+  const match = candidates.find(
+    (c) => !!c && c.id.toLowerCase() === wanted && c.slug.trim().length > 0
+  );
+  return match ? match.slug.trim() : null;
+}
+var PERIOD_SUFFIX = /\s*[([]\s*(monthly|month|annual|annually|yearly|year)\s*[)\]]\s*$/i;
+var PRODUCT_PREFIX = /^\S.*?\s[-–—]\s+(?=\S)/;
+function cleanPlanDisplayName(name) {
+  const withoutPeriod = name.replace(PERIOD_SUFFIX, "").trim();
+  const withoutProduct = withoutPeriod.replace(PRODUCT_PREFIX, "").trim();
+  if (withoutProduct.length > 0) return withoutProduct;
+  if (withoutPeriod.length > 0) return withoutPeriod;
+  return name.trim();
+}
+function isFiniteNumber(value) {
+  return typeof value === "number" && Number.isFinite(value);
+}
+function planPriceIn(plan, currency) {
+  const code = currency.toUpperCase();
+  if (plan.price === 0) return 0;
+  if (plan.currency.toUpperCase() === code) return plan.price;
+  const prices = plan.currencyPrices;
+  if (!prices) return null;
+  const direct = prices[code];
+  if (isFiniteNumber(direct)) return direct;
+  const key = Object.keys(prices).find((k) => k.toUpperCase() === code);
+  const value = key === void 0 ? void 0 : prices[key];
+  return isFiniteNumber(value) ? value : null;
+}
+function availablePlanCurrencies(plans) {
+  if (plans.length === 0) return [];
+  const all = /* @__PURE__ */ new Set();
+  for (const plan of plans) {
+    all.add(plan.currency.toUpperCase());
+    for (const key of Object.keys(plan.currencyPrices ?? {})) {
+      all.add(key.toUpperCase());
+    }
+  }
+  const usable = [...all].filter(
+    (code) => plans.every((plan) => planPriceIn(plan, code) !== null)
+  );
+  const base = plans.find((p) => p.price > 0)?.currency.toUpperCase();
+  return usable.sort((a, b) => {
+    if (a === base) return -1;
+    if (b === base) return 1;
+    return a.localeCompare(b);
+  });
+}
+var EURO_REGIONS = [
+  "AT",
+  "BE",
+  "CY",
+  "DE",
+  "EE",
+  "ES",
+  "FI",
+  "FR",
+  "GR",
+  "HR",
+  "IE",
+  "IT",
+  "LT",
+  "LU",
+  "LV",
+  "MT",
+  "NL",
+  "PT",
+  "SI",
+  "SK"
+];
+var REGION_CURRENCY = Object.freeze({
+  AU: "AUD",
+  BR: "BRL",
+  CA: "CAD",
+  CH: "CHF",
+  CN: "CNY",
+  DK: "DKK",
+  GB: "GBP",
+  HK: "HKD",
+  IN: "INR",
+  JP: "JPY",
+  KR: "KRW",
+  MX: "MXN",
+  MY: "MYR",
+  NO: "NOK",
+  NZ: "NZD",
+  PL: "PLN",
+  SE: "SEK",
+  SG: "SGD",
+  TH: "THB",
+  US: "USD",
+  ...Object.fromEntries(EURO_REGIONS.map((r) => [r, "EUR"]))
+});
+var TIME_ZONE_REGION = Object.freeze({
+  "Asia/Kolkata": "IN",
+  "Asia/Calcutta": "IN"
+});
+function regionOfLanguage(tag) {
+  const parts = tag.replace(/_/g, "-").split("-");
+  for (const part of parts.slice(1)) {
+    if (/^[A-Za-z]{2}$/.test(part)) return part.toUpperCase();
+  }
+  return null;
+}
+function detectRegionalCurrency(available, locale) {
+  const sellable = new Set(available.map((c) => c.toUpperCase()));
+  const regions = [];
+  const tzRegion = locale.timeZone ? TIME_ZONE_REGION[locale.timeZone] : null;
+  if (tzRegion) regions.push(tzRegion);
+  for (const tag of locale.languages ?? []) {
+    const region = regionOfLanguage(tag);
+    if (region) regions.push(region);
+  }
+  for (const region of regions) {
+    const currency = REGION_CURRENCY[region];
+    if (currency && sellable.has(currency)) return currency;
+  }
+  return null;
+}
+function formatCatalogPrice(amount, currency) {
+  const code = currency.toUpperCase();
+  const whole = amount % 1 === 0;
+  try {
+    return new Intl.NumberFormat("en-US", {
+      style: "currency",
+      currency: code,
+      minimumFractionDigits: whole ? 0 : 2,
+      maximumFractionDigits: whole ? 0 : 2
+    }).format(amount);
+  } catch {
+    return `${code} ${whole ? amount.toString() : amount.toFixed(2)}`;
+  }
+}
+function plansForBillingCycle(plans, cycle) {
+  if (cycle === "monthly") {
+    return plans.filter((p) => p.duration === "monthly");
+  }
+  const yearly = plans.filter((p) => p.duration === "yearly");
+  if (yearly.some((p) => p.priceRaw === 0)) return yearly;
+  const free = plans.filter(
+    (p) => p.duration === "monthly" && p.priceRaw === 0
+  );
+  return [...free, ...yearly];
+}
+
 // src/client/security.ts
 var LOOPBACK_HOSTS = /* @__PURE__ */ new Set(["localhost", "127.0.0.1", "::1"]);
 var RESERVED_HEADERS = /* @__PURE__ */ new Set([
@@ -255,6 +417,25 @@ function useWebSDKConfig() {
   const client = useWebSDK();
   return client.getConfig();
 }
+
+// src/utils/product-slug.ts
+var PRODUCT_SLUG_RENAMES = Object.freeze(
+  [Object.freeze({ legacy: "botlit", current: "botmanor" })]
+);
+Object.freeze(
+  Object.fromEntries(PRODUCT_SLUG_RENAMES.map((r) => [r.legacy, r.current]))
+);
+var ProductContext = React.createContext({
+  product: null,
+  loading: true,
+  error: null,
+  hasProvider: false,
+  refetch: () => {
+  }
+});
+function useProduct() {
+  return React.useContext(ProductContext);
+}
 function canonicalFromLocation() {
   if (typeof window === "undefined" || !window.location) return void 0;
   const { origin, pathname } = window.location;
@@ -394,18 +575,49 @@ var GET_PLANS_QUERY = `
     }
   }
 `;
+var PUBLIC_PRODUCT_KEYS_QUERY = `
+  query PricingProductKeys {
+    publicProducts(limit: 200) {
+      items {
+        id
+        slug
+      }
+    }
+  }
+`;
+var CURRENCY_STORAGE_KEY = "burdenoff.pricing.currency";
+function readStoredCurrency() {
+  try {
+    if (typeof window === "undefined") return null;
+    return window.localStorage.getItem(CURRENCY_STORAGE_KEY);
+  } catch {
+    return null;
+  }
+}
+function storeCurrency(code) {
+  try {
+    if (typeof window === "undefined") return;
+    window.localStorage.setItem(CURRENCY_STORAGE_KEY, code);
+  } catch {
+  }
+}
+function readVisitorLocale() {
+  let timeZone = null;
+  try {
+    timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone ?? null;
+  } catch {
+    timeZone = null;
+  }
+  const languages = typeof navigator === "undefined" ? [] : [...navigator.languages ?? [], navigator.language].filter(
+    (l) => typeof l === "string" && l.length > 0
+  );
+  return { timeZone, languages };
+}
 function formatPrice(price, currencyCode = "USD", currencies) {
-  const defaultCurrencies = {
-    USD: { code: "USD", symbol: "$", position: "prefix" },
-    EUR: { code: "EUR", symbol: "\u20AC", position: "prefix" },
-    GBP: { code: "GBP", symbol: "\xA3", position: "prefix" },
-    INR: { code: "INR", symbol: "\u20B9", position: "prefix" }
-  };
-  const currencyMap = currencies || defaultCurrencies;
-  const currency = currencyMap[currencyCode] || {
-    symbol: currencyCode,
-    position: "prefix"
-  };
+  const currency = currencies?.[currencyCode];
+  if (!currency) {
+    return formatCatalogPrice(price, currencyCode);
+  }
   const formattedNumber = price % 1 === 0 ? price.toString() : price.toFixed(2);
   return currency.position === "prefix" ? `${currency.symbol}${formattedNumber}` : `${formattedNumber}${currency.symbol}`;
 }
@@ -466,11 +678,12 @@ function getFallbackFeaturesForTier(tier, fallbackFeatures) {
 }
 function getMetadataForPlan(planName, priceRaw, planMetadata) {
   const normalizedName = planName.toLowerCase();
-  if (planMetadata?.[normalizedName]) {
-    const meta = planMetadata[normalizedName];
+  const cleanName = cleanPlanDisplayName(planName);
+  const meta = planMetadata?.[normalizedName] ?? planMetadata?.[cleanName.toLowerCase()];
+  if (meta) {
     return {
       tier: meta.tier || "basic",
-      displayName: meta.displayName || planName,
+      displayName: meta.displayName || cleanName,
       defaultDescription: meta.defaultDescription || "Choose this plan",
       popular: meta.popular ?? false,
       ctaText: meta.ctaText || "Get Started",
@@ -484,7 +697,7 @@ function getMetadataForPlan(planName, priceRaw, planMetadata) {
     if (isPaidEnterpriseName) {
       return {
         tier: "professional",
-        displayName: planName,
+        displayName: cleanName,
         defaultDescription: "Choose this plan",
         popular: false,
         ctaText: "Get Started",
@@ -493,7 +706,7 @@ function getMetadataForPlan(planName, priceRaw, planMetadata) {
     }
     return {
       tier,
-      displayName: planName,
+      displayName: cleanName,
       defaultDescription: "Choose this plan",
       popular: tier === "professional",
       ctaText: tier === "enterprise" ? "Contact Sales" : "Get Started",
@@ -502,7 +715,7 @@ function getMetadataForPlan(planName, priceRaw, planMetadata) {
   }
   return {
     tier: "basic",
-    displayName: planName,
+    displayName: cleanName,
     defaultDescription: "Choose this plan",
     popular: false,
     ctaText: "Get Started",
@@ -559,17 +772,14 @@ function extractDisplayFeatures(features, planName, fallbackFeatures) {
   }
   return [];
 }
-function transformToDisplayCard(plan, props) {
+function transformToDisplayCard(plan, props, currency) {
   const metadata = getMetadataForPlan(
     plan.name,
     plan.price,
     props.planMetadata
   );
-  const formattedPrice = formatPrice(
-    plan.price,
-    plan.currency,
-    props.currencies
-  );
+  const selectedPrice = currency ? planPriceIn(plan, currency) : null;
+  const formattedPrice = currency && selectedPrice !== null ? formatPrice(selectedPrice, currency.toUpperCase(), props.currencies) : formatPrice(plan.price, plan.currency, props.currencies);
   const interval = formatInterval(plan.duration, props.billingIntervals);
   const features = metadata.features && metadata.features.length > 0 ? metadata.features : extractDisplayFeatures(
     plan.features,
@@ -578,13 +788,14 @@ function transformToDisplayCard(plan, props) {
   );
   const contactUrl = props.contactUrl || "/contact";
   const ctaLink = metadata.ctaType === "contact" ? contactUrl : props.appLoginUrl;
+  const isQuoteBased = metadata.ctaType === "contact" && plan.price === 0;
   return {
     id: plan.id,
-    name: plan.name,
+    name: metadata.displayName,
     description: metadata.defaultDescription,
-    price: formattedPrice,
+    price: isQuoteBased ? "Custom" : formattedPrice,
     priceRaw: plan.price,
-    interval,
+    interval: isQuoteBased ? "" : interval,
     duration: plan.duration,
     features,
     popular: metadata.popular,
@@ -602,8 +813,13 @@ function PricingSection(props) {
   } = props;
   const client = useWebSDK();
   const config = useWebSDKConfig();
-  const resolvedProductId = props.productId || config.productId;
-  const [allPlans, setAllPlans] = React.useState([]);
+  const { product: contextProduct } = useProduct();
+  const requestedProductId = (props.productId || config.productId || "").trim();
+  const contextKey = resolvePricingProductKey(requestedProductId, [
+    contextProduct
+  ]);
+  const productKey = contextKey ?? requestedProductId;
+  const [catalogPlans, setCatalogPlans] = React.useState([]);
   const [loading, setLoading] = React.useState(true);
   const [error, setError] = React.useState(null);
   const [billingCycle, setBillingCycle] = React.useState(
@@ -612,13 +828,38 @@ function PricingSection(props) {
   const [audience, setAudience] = React.useState(
     "individual"
   );
+  const [selectedCurrency, setSelectedCurrency] = React.useState(
+    props.defaultCurrency ? props.defaultCurrency.toUpperCase() : null
+  );
   React.useEffect(() => {
     let cancelled = false;
+    async function resolveKey() {
+      if (!productKey) {
+        throw new Error(
+          "PricingPage needs a product slug: pass productId or set WebSDKConfig.productId."
+        );
+      }
+      if (!isUuidLike(productKey)) return productKey;
+      const response = await client.query(
+        PUBLIC_PRODUCT_KEYS_QUERY
+      );
+      if (response.errors && response.errors.length > 0) {
+        throw new Error(response.errors[0].message);
+      }
+      const resolved = resolvePricingProductKey(
+        productKey,
+        response.data?.publicProducts?.items ?? []
+      );
+      if (!resolved) throw new PricingProductKeyError(productKey);
+      return resolved;
+    }
     async function loadPlans() {
       try {
         setLoading(true);
+        const key = await resolveKey();
+        if (cancelled) return;
         const response = await client.query(GET_PLANS_QUERY, {
-          productId: resolvedProductId
+          productId: key
         });
         if (cancelled) return;
         if (response.errors && response.errors.length > 0) {
@@ -627,12 +868,20 @@ function PricingSection(props) {
         if (!response.data?.publicPlans) {
           throw new Error("No plans data received");
         }
-        const cards = response.data.publicPlans.filter((plan) => plan.isActive).map((plan) => transformToDisplayCard(plan, props)).sort((a, b) => a.priceRaw - b.priceRaw);
-        setAllPlans(cards);
+        const active = response.data.publicPlans.filter(
+          (plan) => plan.isActive
+        );
+        if (active.length === 0) {
+          throw new Error(
+            `publicPlans returned no active plans for product "${key}".`
+          );
+        }
+        setCatalogPlans(active);
         setError(null);
       } catch (err) {
         if (cancelled) return;
         console.error("Failed to load plans:", err);
+        setCatalogPlans([]);
         setError("Unable to load pricing information. Please try again later.");
       } finally {
         if (!cancelled) {
@@ -644,13 +893,38 @@ function PricingSection(props) {
     return () => {
       cancelled = true;
     };
-  }, [client, resolvedProductId]);
+  }, [client, productKey]);
+  const currencyOptions = React.useMemo(
+    () => availablePlanCurrencies(catalogPlans),
+    [catalogPlans]
+  );
+  React.useEffect(() => {
+    if (selectedCurrency || currencyOptions.length < 2) return;
+    const stored = readStoredCurrency()?.toUpperCase();
+    if (stored && currencyOptions.includes(stored)) {
+      setSelectedCurrency(stored);
+      return;
+    }
+    const regional = detectRegionalCurrency(
+      currencyOptions,
+      readVisitorLocale()
+    );
+    if (regional) setSelectedCurrency(regional);
+  }, [currencyOptions, selectedCurrency]);
+  const activeCurrency = selectedCurrency && currencyOptions.includes(selectedCurrency) ? selectedCurrency : currencyOptions[0] ?? null;
+  const allPlans = catalogPlans.map((plan) => transformToDisplayCard(plan, props, activeCurrency)).sort((a, b) => {
+    const aCustom = a.price === "Custom" ? 1 : 0;
+    const bCustom = b.price === "Custom" ? 1 : 0;
+    return aCustom - bCustom || a.priceRaw - b.priceRaw;
+  });
+  const showCurrencySelector = props.showCurrencySelector !== false && currencyOptions.length > 1;
   const {
     individualPlans: individualAllPlans,
     enterprisePlans: enterpriseApiPlans
   } = splitPlansByAudience(allPlans, props.showAudienceTabs);
-  const individualPlans = individualAllPlans.filter(
-    (plan) => billingCycle === "monthly" ? plan.duration === "monthly" : plan.duration === "yearly"
+  const individualPlans = plansForBillingCycle(
+    individualAllPlans,
+    billingCycle
   );
   const enterpriseCards = enterpriseApiPlans.map((p) => {
     if (p.priceRaw === 0 && p.name.toLowerCase().includes("enterprise")) {
@@ -768,6 +1042,23 @@ function PricingSection(props) {
             children: "Yearly"
           }
         )
+      ] }) }),
+      showCurrencySelector && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center mt-4", children: /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "inline-flex items-center gap-2 text-sm text-muted-foreground", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Currency" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "select",
+          {
+            value: activeCurrency ?? "",
+            onChange: (event) => {
+              const code = event.target.value;
+              setSelectedCurrency(code);
+              storeCurrency(code);
+            },
+            className: "h-9 rounded-md border border-input bg-background px-3 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-ring",
+            "data-testid": "pricing-currency-select",
+            children: currencyOptions.map((code) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: code, children: code }, code))
+          }
+        )
       ] }) })
     ] }),
     props.showAudienceTabs && audience === "enterprise" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto max-w-3xl text-center mb-8", children: [
@@ -953,8 +1244,14 @@ function PricingPage(props) {
 }
 
 exports.PricingPage = PricingPage;
+exports.PricingProductKeyError = PricingProductKeyError;
 exports.PricingSection = PricingSection;
+exports.availablePlanCurrencies = availablePlanCurrencies;
+exports.cleanPlanDisplayName = cleanPlanDisplayName;
+exports.isUuidLike = isUuidLike;
+exports.planPriceIn = planPriceIn;
 exports.resolveEnterprisePlans = resolveEnterprisePlans;
+exports.resolvePricingProductKey = resolvePricingProductKey;
 exports.splitPlansByAudience = splitPlansByAudience;
 exports.transformFeatureToLabel = transformFeatureToLabel;
 //# sourceMappingURL=pricing.js.map