@aforoai/storefront-widgets 1.0.3 → 1.0.5

package/CHANGELOG.md

@@ -8,8 +8,30 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.0.5] — 2026-08-26
+
 ### Fixed
 
+- **Upgrade/Cancel (and every other widget's) bridge-exchange session refresh
+  threw "Malformed bridge exchange response" even though the exchange call
+  itself returned HTTP 200.** `BridgeClient.exchange()` — along with
+  `fetchHeadlessConfig()`, `fetchSubscriptions()`, and `initiateCheckout()` —
+  read the session/config/subscription/checkout payload directly off the
+  response body, but storefront-service wraps it in a `{success, data}`
+  envelope. Every field lookup came back `undefined`, so `exchange()`'s own
+  shape validation correctly rejected the (correctly-wrapped) response as
+  malformed. All four methods now unwrap `body.data ?? body` before reading
+  fields, so both a flat and an enveloped response parse correctly. This was
+  the root cause of "Confirm cancellation" failing on the Upgrade/Cancel
+  Script Tag widget after a legitimate session refresh mid-flow.
+- **PricingCard falls back to per-unit rate when `priceCents` is null.**
+  Offerings with no flat/base price (pure PER_UNIT rate plans, e.g. $9/unit)
+  previously rendered as "Contact us". PricingCard now reads the primary rate
+  plan's `perUnitPriceCents` from `OfferingPayload.ratePlans` and renders
+  "$9.00 / unit" in both the card-grid and comparison-table layouts.
+
+### Fixed (carried over from unreleased, pre-1.0.5)
+
 - **Script-tag loader now parses the PricingCard presentation attributes
   `data-cta-text`, `data-cta-url`, `data-max-plans`, and
   `data-show-features`.** `pricingCardConfigToProps` reads all four

package/dist/index.cjs

@@ -171,7 +171,8 @@ var _BridgeClient = class _BridgeClient {
       throw await this.parseError(resp);
     }
     const body = await resp.json();
-    if (!body.sessionJwt || typeof body.expiresAt !== "number") {
+    const data = body?.data ?? body;
+    if (!data || !data.sessionJwt || typeof data.expiresAt !== "number") {
       throw new BridgeClientError(
         "Malformed bridge exchange response",
         500,
@@ -180,9 +181,9 @@ var _BridgeClient = class _BridgeClient {
       );
     }
     return {
-      sessionJwt: body.sessionJwt,
-      expiresAt: body.expiresAt,
-      customerId: body.customerId ?? null
+      sessionJwt: data.sessionJwt,
+      expiresAt: data.expiresAt,
+      customerId: data.customerId ?? null
     };
   }
   /**
@@ -223,10 +224,23 @@ var _BridgeClient = class _BridgeClient {
   /**
    * Headless config — the PricingCard widget's primary read path.
    *
-   * Mirrors `GET /api/v1/portal/headless/config` which returns
-   * `{branding, offerings, ratePlans, themeTokens, customPages, ...}`
-   * denormalized JSON. The endpoint is 60s Caffeine-cached server-side; we
-   * cache once per widget instance on the client.
+   * Hits `GET /api/v1/portal/embed/tenant-config/{slug}` — the SAME
+   * embed-key-authenticated endpoint {@link getTenantBrandKit} uses, now
+   * extended server-side with `offerings` + `embeddableWidget`. This was
+   * previously wired to `GET /api/v1/portal/headless/config`, an unrelated
+   * T6 Headless-tier endpoint that requires `X-Storefront-Key`/
+   * `X-Tenant-Id` auth — headers the embed key flow never sends. Every
+   * embed-tier fetch against that URL failed 400 "Missing tenant
+   * identification" by construction; this endpoint is scoped to the same
+   * `EmbedKeyAuthFilter` gate as the rest of the embed plane, so the
+   * `Authorization: Bearer <embed_key>` header `buildHeaders()` already
+   * sends is sufficient.
+   *
+   * The backend response is still a flat record (`tenantSlug,
+   * primaryColor, secondaryColor, logoUrl, fontFamily, offerings,
+   * embeddableWidget`) — kept flat so `getTenantBrandKit()`'s existing
+   * consumers (the ThemeReader cascade) are unaffected. This method nests
+   * the branding fields into the shape `HeadlessConfigResponse` expects.
    *
    * Pattern #18 fail-soft — returns `null` on transport failure, 404, or
    * malformed JSON. Widgets fall through to their empty / error state and
@@ -241,7 +255,7 @@ var _BridgeClient = class _BridgeClient {
     }
     const target = slug || this.tenantSlug;
     if (!target) return null;
-    const url = `${this.baseUrl}/api/v1/portal/headless/config?tenantSlug=${encodeURIComponent(target)}`;
+    const url = `${this.baseUrl}/api/v1/portal/embed/tenant-config/${encodeURIComponent(target)}`;
     let resp;
     try {
       resp = await this.send(url, {
@@ -254,7 +268,19 @@ var _BridgeClient = class _BridgeClient {
     if (!resp.ok) return null;
     try {
       const body = await resp.json();
-      return body && typeof body === "object" ? body : null;
+      if (!body || typeof body !== "object") return null;
+      const data = body.data ?? body;
+      return {
+        tenantSlug: data.tenantSlug,
+        branding: {
+          primaryColor: data.primaryColor ?? null,
+          secondaryColor: data.secondaryColor ?? null,
+          logoUrl: data.logoUrl ?? null,
+          fontFamily: data.fontFamily ?? null
+        },
+        offerings: Array.isArray(data.offerings) ? data.offerings : [],
+        embeddableWidget: data.embeddableWidget ?? null
+      };
     } catch {
       return null;
     }
@@ -398,7 +424,8 @@ var _BridgeClient = class _BridgeClient {
         false
       );
     }
-    if (!body.checkoutUrl || !body.checkoutSessionId || !body.expiresAt) {
+    const data = body?.data ?? body ?? {};
+    if (!data.checkoutUrl || !data.checkoutSessionId || !data.expiresAt) {
       throw new BridgeClientError(
         "Malformed checkout-initiate response (missing required fields)",
         500,
@@ -407,9 +434,9 @@ var _BridgeClient = class _BridgeClient {
       );
     }
     return {
-      checkoutUrl: body.checkoutUrl,
-      checkoutSessionId: body.checkoutSessionId,
-      expiresAt: body.expiresAt
+      checkoutUrl: data.checkoutUrl,
+      checkoutSessionId: data.checkoutSessionId,
+      expiresAt: data.expiresAt
     };
   }
   /* ────────────────────────────────────────────────────────────────────
@@ -1217,13 +1244,16 @@ var _BridgeClient = class _BridgeClient {
     if (!resp.ok) return emptyPage;
     try {
       const body = await resp.json();
-      if (!body || typeof body !== "object") return emptyPage;
+      if (!body || typeof body !== "object") {
+        return emptyPage;
+      }
+      const data = body.data ?? body;
       return {
-        content: Array.isArray(body.content) ? body.content : [],
-        totalElements: typeof body.totalElements === "number" && Number.isFinite(body.totalElements) ? body.totalElements : 0,
-        totalPages: typeof body.totalPages === "number" && Number.isFinite(body.totalPages) ? body.totalPages : 0,
-        page: typeof body.page === "number" && Number.isFinite(body.page) ? body.page : filter.page ?? 0,
-        size: typeof body.size === "number" && Number.isFinite(body.size) ? body.size : filter.size ?? 10
+        content: Array.isArray(data.content) ? data.content : [],
+        totalElements: typeof data.totalElements === "number" && Number.isFinite(data.totalElements) ? data.totalElements : 0,
+        totalPages: typeof data.totalPages === "number" && Number.isFinite(data.totalPages) ? data.totalPages : 0,
+        page: typeof data.page === "number" && Number.isFinite(data.page) ? data.page : filter.page ?? 0,
+        size: typeof data.size === "number" && Number.isFinite(data.size) ? data.size : filter.size ?? 10
       };
     } catch {
       return emptyPage;
@@ -2727,6 +2757,20 @@ function safeFormatCurrency(priceCents, currency, locale, intlOverride) {
     return `${currency} ${amount.toFixed(2)}`;
   }
 }
+function resolveDisplayPrice(offering, locale, intlOverride) {
+  const flat = safeFormatCurrency(offering.priceCents, offering.currency, locale, intlOverride);
+  if (flat !== "\u2014") return { text: flat, unitSuffix: null };
+  const perUnitPlan = offering.ratePlans?.find(
+    (rp) => rp.pricingModel === "PER_UNIT" && rp.perUnitPriceCents != null
+  );
+  if (perUnitPlan) {
+    const unitPrice = safeFormatCurrency(perUnitPlan.perUnitPriceCents, offering.currency, locale, intlOverride);
+    if (unitPrice !== "\u2014") {
+      return { text: unitPrice, unitSuffix: perUnitPlan.unitLabel || "unit" };
+    }
+  }
+  return { text: "\u2014", unitSuffix: null };
+}
 function localizedName(o) {
   return o.localizedDisplayName || o.name || "(unnamed plan)";
 }
@@ -3130,12 +3174,7 @@ function PlanCard({
   onCtaClick,
   intlOverride
 }) {
-  const price = safeFormatCurrency(
-    offering.priceCents,
-    offering.currency,
-    locale,
-    intlOverride
-  );
+  const { text: price, unitSuffix } = resolveDisplayPrice(offering, locale, intlOverride);
   const isContactSales = price === "\u2014";
   const planName = localizedName(offering);
   const description = localizedDescription(offering);
@@ -3156,7 +3195,7 @@ function PlanCard({
     "div",
     {
       role: "group",
-      "aria-label": `${planName}, ${price} per ${offering.billingCycle}`,
+      "aria-label": `${planName}, ${price} per ${unitSuffix ?? offering.billingCycle}`,
       className: `aforo-w-pc-card${featured ? " aforo-w-pc-card-featured" : ""}`,
       style: cardStyle2,
       children: [
@@ -3221,14 +3260,14 @@ function PlanCard({
                   children: price
                 }
               ),
-              !isContactSales && offering.billingCycle ? /* @__PURE__ */ jsxRuntime.jsxs(
+              !isContactSales && (unitSuffix || offering.billingCycle) ? /* @__PURE__ */ jsxRuntime.jsxs(
                 "span",
                 {
                   className: "aforo-w-pc-cycle",
                   style: { fontSize: 13, color: tokens.textMuted },
                   children: [
                     "/ ",
-                    humanCycle(offering.billingCycle)
+                    unitSuffix ?? humanCycle(offering.billingCycle)
                   ]
                 }
               ) : null
@@ -3386,6 +3425,7 @@ function TableLayout({
           /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", style: { ...headerCellStyle, color: tokens.textMuted, fontSize: 12 }, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "aforo-w-pc-sr-only", style: srOnlyStyle, children: "Feature" }) }),
           offerings.map((o) => {
             const featured = offeringIsFeatured(o, featuredOverride);
+            const { text: tablePrice, unitSuffix: tableUnitSuffix } = resolveDisplayPrice(o, locale, intlOverride);
             return /* @__PURE__ */ jsxRuntime.jsx(
               "th",
               {
@@ -3415,13 +3455,20 @@ function TableLayout({
                       children: "Most popular"
                     }
                   ) : null,
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 22, fontWeight: 700 }, children: safeFormatCurrency(o.priceCents, o.currency, locale, intlOverride) }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { fontSize: 22, fontWeight: 700 }, children: [
+                    tablePrice,
+                    tableUnitSuffix ? /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: 12, fontWeight: 400, color: tokens.textMuted }, children: [
+                      " ",
+                      "/ ",
+                      tableUnitSuffix
+                    ] }) : null
+                  ] }),
                   /* @__PURE__ */ jsxRuntime.jsx(
                     "button",
                     {
                       type: "button",
                       onClick: () => onCtaClick(o),
-                      "aria-label": `${ctaLabel(o, ctaTextProp, safeFormatCurrency(o.priceCents, o.currency, locale, intlOverride) === "\u2014")} for ${localizedName(o)}`,
+                      "aria-label": `${ctaLabel(o, ctaTextProp, tablePrice === "\u2014")} for ${localizedName(o)}`,
                       style: {
                         inlineSize: "100%",
                         padding: "8px 12px",
@@ -3434,7 +3481,7 @@ function TableLayout({
                         cursor: "pointer",
                         fontFamily: tokens.fontFamily
                       },
-                      children: ctaLabel(o, ctaTextProp, safeFormatCurrency(o.priceCents, o.currency, locale, intlOverride) === "\u2014")
+                      children: ctaLabel(o, ctaTextProp, tablePrice === "\u2014")
                     }
                   )
                 ] })
@@ -12151,7 +12198,7 @@ function ResultPanel({
 }
 
 // src/core/version.ts
-var VERSION = "1.0.3";
+var VERSION = "1.0.5";
 
 // src/core/AforoEmbed.ts
 var mountedElements = /* @__PURE__ */ new WeakMap();

package/dist/index.d.cts

@@ -639,7 +639,7 @@ declare function AforoUpgradeCancel(props: AforoUpgradeCancelProps): React.React
  *   POST /api/v1/portal/embed/bridge/exchange       — bridge JWT → session JWT
  *   POST /api/v1/portal/embed/bridge/refresh        — session JWT refresh (Prompt 8)
  *   POST /api/v1/portal/embed/telemetry             — telemetry batch sink
- *   GET  /api/v1/portal/embed/tenant-config/{slug}  — brand kit (this Prompt)
+ *   GET  /api/v1/portal/embed/tenant-config/{slug}  — brand kit + offerings + embeddableWidget
  *   GET  /api/v1/portal/embed/health                — public liveness
  *
  * Headers:
@@ -707,10 +707,23 @@ declare class BridgeClient {
     /**
      * Headless config — the PricingCard widget's primary read path.
      *
-     * Mirrors `GET /api/v1/portal/headless/config` which returns
-     * `{branding, offerings, ratePlans, themeTokens, customPages, ...}`
-     * denormalized JSON. The endpoint is 60s Caffeine-cached server-side; we
-     * cache once per widget instance on the client.
+     * Hits `GET /api/v1/portal/embed/tenant-config/{slug}` — the SAME
+     * embed-key-authenticated endpoint {@link getTenantBrandKit} uses, now
+     * extended server-side with `offerings` + `embeddableWidget`. This was
+     * previously wired to `GET /api/v1/portal/headless/config`, an unrelated
+     * T6 Headless-tier endpoint that requires `X-Storefront-Key`/
+     * `X-Tenant-Id` auth — headers the embed key flow never sends. Every
+     * embed-tier fetch against that URL failed 400 "Missing tenant
+     * identification" by construction; this endpoint is scoped to the same
+     * `EmbedKeyAuthFilter` gate as the rest of the embed plane, so the
+     * `Authorization: Bearer <embed_key>` header `buildHeaders()` already
+     * sends is sufficient.
+     *
+     * The backend response is still a flat record (`tenantSlug,
+     * primaryColor, secondaryColor, logoUrl, fontFamily, offerings,
+     * embeddableWidget`) — kept flat so `getTenantBrandKit()`'s existing
+     * consumers (the ThemeReader cascade) are unaffected. This method nests
+     * the branding fields into the shape `HeadlessConfigResponse` expects.
      *
      * Pattern #18 fail-soft — returns `null` on transport failure, 404, or
      * malformed JSON. Widgets fall through to their empty / error state and

package/dist/index.d.ts

@@ -639,7 +639,7 @@ declare function AforoUpgradeCancel(props: AforoUpgradeCancelProps): React.React
  *   POST /api/v1/portal/embed/bridge/exchange       — bridge JWT → session JWT
  *   POST /api/v1/portal/embed/bridge/refresh        — session JWT refresh (Prompt 8)
  *   POST /api/v1/portal/embed/telemetry             — telemetry batch sink
- *   GET  /api/v1/portal/embed/tenant-config/{slug}  — brand kit (this Prompt)
+ *   GET  /api/v1/portal/embed/tenant-config/{slug}  — brand kit + offerings + embeddableWidget
  *   GET  /api/v1/portal/embed/health                — public liveness
  *
  * Headers:
@@ -707,10 +707,23 @@ declare class BridgeClient {
     /**
      * Headless config — the PricingCard widget's primary read path.
      *
-     * Mirrors `GET /api/v1/portal/headless/config` which returns
-     * `{branding, offerings, ratePlans, themeTokens, customPages, ...}`
-     * denormalized JSON. The endpoint is 60s Caffeine-cached server-side; we
-     * cache once per widget instance on the client.
+     * Hits `GET /api/v1/portal/embed/tenant-config/{slug}` — the SAME
+     * embed-key-authenticated endpoint {@link getTenantBrandKit} uses, now
+     * extended server-side with `offerings` + `embeddableWidget`. This was
+     * previously wired to `GET /api/v1/portal/headless/config`, an unrelated
+     * T6 Headless-tier endpoint that requires `X-Storefront-Key`/
+     * `X-Tenant-Id` auth — headers the embed key flow never sends. Every
+     * embed-tier fetch against that URL failed 400 "Missing tenant
+     * identification" by construction; this endpoint is scoped to the same
+     * `EmbedKeyAuthFilter` gate as the rest of the embed plane, so the
+     * `Authorization: Bearer <embed_key>` header `buildHeaders()` already
+     * sends is sufficient.
+     *
+     * The backend response is still a flat record (`tenantSlug,
+     * primaryColor, secondaryColor, logoUrl, fontFamily, offerings,
+     * embeddableWidget`) — kept flat so `getTenantBrandKit()`'s existing
+     * consumers (the ThemeReader cascade) are unaffected. This method nests
+     * the branding fields into the shape `HeadlessConfigResponse` expects.
      *
      * Pattern #18 fail-soft — returns `null` on transport failure, 404, or
      * malformed JSON. Widgets fall through to their empty / error state and

package/dist/index.mjs

@@ -149,7 +149,8 @@ var _BridgeClient = class _BridgeClient {
       throw await this.parseError(resp);
     }
     const body = await resp.json();
-    if (!body.sessionJwt || typeof body.expiresAt !== "number") {
+    const data = body?.data ?? body;
+    if (!data || !data.sessionJwt || typeof data.expiresAt !== "number") {
       throw new BridgeClientError(
         "Malformed bridge exchange response",
         500,
@@ -158,9 +159,9 @@ var _BridgeClient = class _BridgeClient {
       );
     }
     return {
-      sessionJwt: body.sessionJwt,
-      expiresAt: body.expiresAt,
-      customerId: body.customerId ?? null
+      sessionJwt: data.sessionJwt,
+      expiresAt: data.expiresAt,
+      customerId: data.customerId ?? null
     };
   }
   /**
@@ -201,10 +202,23 @@ var _BridgeClient = class _BridgeClient {
   /**
    * Headless config — the PricingCard widget's primary read path.
    *
-   * Mirrors `GET /api/v1/portal/headless/config` which returns
-   * `{branding, offerings, ratePlans, themeTokens, customPages, ...}`
-   * denormalized JSON. The endpoint is 60s Caffeine-cached server-side; we
-   * cache once per widget instance on the client.
+   * Hits `GET /api/v1/portal/embed/tenant-config/{slug}` — the SAME
+   * embed-key-authenticated endpoint {@link getTenantBrandKit} uses, now
+   * extended server-side with `offerings` + `embeddableWidget`. This was
+   * previously wired to `GET /api/v1/portal/headless/config`, an unrelated
+   * T6 Headless-tier endpoint that requires `X-Storefront-Key`/
+   * `X-Tenant-Id` auth — headers the embed key flow never sends. Every
+   * embed-tier fetch against that URL failed 400 "Missing tenant
+   * identification" by construction; this endpoint is scoped to the same
+   * `EmbedKeyAuthFilter` gate as the rest of the embed plane, so the
+   * `Authorization: Bearer <embed_key>` header `buildHeaders()` already
+   * sends is sufficient.
+   *
+   * The backend response is still a flat record (`tenantSlug,
+   * primaryColor, secondaryColor, logoUrl, fontFamily, offerings,
+   * embeddableWidget`) — kept flat so `getTenantBrandKit()`'s existing
+   * consumers (the ThemeReader cascade) are unaffected. This method nests
+   * the branding fields into the shape `HeadlessConfigResponse` expects.
    *
    * Pattern #18 fail-soft — returns `null` on transport failure, 404, or
    * malformed JSON. Widgets fall through to their empty / error state and
@@ -219,7 +233,7 @@ var _BridgeClient = class _BridgeClient {
     }
     const target = slug || this.tenantSlug;
     if (!target) return null;
-    const url = `${this.baseUrl}/api/v1/portal/headless/config?tenantSlug=${encodeURIComponent(target)}`;
+    const url = `${this.baseUrl}/api/v1/portal/embed/tenant-config/${encodeURIComponent(target)}`;
     let resp;
     try {
       resp = await this.send(url, {
@@ -232,7 +246,19 @@ var _BridgeClient = class _BridgeClient {
     if (!resp.ok) return null;
     try {
       const body = await resp.json();
-      return body && typeof body === "object" ? body : null;
+      if (!body || typeof body !== "object") return null;
+      const data = body.data ?? body;
+      return {
+        tenantSlug: data.tenantSlug,
+        branding: {
+          primaryColor: data.primaryColor ?? null,
+          secondaryColor: data.secondaryColor ?? null,
+          logoUrl: data.logoUrl ?? null,
+          fontFamily: data.fontFamily ?? null
+        },
+        offerings: Array.isArray(data.offerings) ? data.offerings : [],
+        embeddableWidget: data.embeddableWidget ?? null
+      };
     } catch {
       return null;
     }
@@ -376,7 +402,8 @@ var _BridgeClient = class _BridgeClient {
         false
       );
     }
-    if (!body.checkoutUrl || !body.checkoutSessionId || !body.expiresAt) {
+    const data = body?.data ?? body ?? {};
+    if (!data.checkoutUrl || !data.checkoutSessionId || !data.expiresAt) {
       throw new BridgeClientError(
         "Malformed checkout-initiate response (missing required fields)",
         500,
@@ -385,9 +412,9 @@ var _BridgeClient = class _BridgeClient {
       );
     }
     return {
-      checkoutUrl: body.checkoutUrl,
-      checkoutSessionId: body.checkoutSessionId,
-      expiresAt: body.expiresAt
+      checkoutUrl: data.checkoutUrl,
+      checkoutSessionId: data.checkoutSessionId,
+      expiresAt: data.expiresAt
     };
   }
   /* ────────────────────────────────────────────────────────────────────
@@ -1195,13 +1222,16 @@ var _BridgeClient = class _BridgeClient {
     if (!resp.ok) return emptyPage;
     try {
       const body = await resp.json();
-      if (!body || typeof body !== "object") return emptyPage;
+      if (!body || typeof body !== "object") {
+        return emptyPage;
+      }
+      const data = body.data ?? body;
       return {
-        content: Array.isArray(body.content) ? body.content : [],
-        totalElements: typeof body.totalElements === "number" && Number.isFinite(body.totalElements) ? body.totalElements : 0,
-        totalPages: typeof body.totalPages === "number" && Number.isFinite(body.totalPages) ? body.totalPages : 0,
-        page: typeof body.page === "number" && Number.isFinite(body.page) ? body.page : filter.page ?? 0,
-        size: typeof body.size === "number" && Number.isFinite(body.size) ? body.size : filter.size ?? 10
+        content: Array.isArray(data.content) ? data.content : [],
+        totalElements: typeof data.totalElements === "number" && Number.isFinite(data.totalElements) ? data.totalElements : 0,
+        totalPages: typeof data.totalPages === "number" && Number.isFinite(data.totalPages) ? data.totalPages : 0,
+        page: typeof data.page === "number" && Number.isFinite(data.page) ? data.page : filter.page ?? 0,
+        size: typeof data.size === "number" && Number.isFinite(data.size) ? data.size : filter.size ?? 10
       };
     } catch {
       return emptyPage;
@@ -2705,6 +2735,20 @@ function safeFormatCurrency(priceCents, currency, locale, intlOverride) {
     return `${currency} ${amount.toFixed(2)}`;
   }
 }
+function resolveDisplayPrice(offering, locale, intlOverride) {
+  const flat = safeFormatCurrency(offering.priceCents, offering.currency, locale, intlOverride);
+  if (flat !== "\u2014") return { text: flat, unitSuffix: null };
+  const perUnitPlan = offering.ratePlans?.find(
+    (rp) => rp.pricingModel === "PER_UNIT" && rp.perUnitPriceCents != null
+  );
+  if (perUnitPlan) {
+    const unitPrice = safeFormatCurrency(perUnitPlan.perUnitPriceCents, offering.currency, locale, intlOverride);
+    if (unitPrice !== "\u2014") {
+      return { text: unitPrice, unitSuffix: perUnitPlan.unitLabel || "unit" };
+    }
+  }
+  return { text: "\u2014", unitSuffix: null };
+}
 function localizedName(o) {
   return o.localizedDisplayName || o.name || "(unnamed plan)";
 }
@@ -3108,12 +3152,7 @@ function PlanCard({
   onCtaClick,
   intlOverride
 }) {
-  const price = safeFormatCurrency(
-    offering.priceCents,
-    offering.currency,
-    locale,
-    intlOverride
-  );
+  const { text: price, unitSuffix } = resolveDisplayPrice(offering, locale, intlOverride);
   const isContactSales = price === "\u2014";
   const planName = localizedName(offering);
   const description = localizedDescription(offering);
@@ -3134,7 +3173,7 @@ function PlanCard({
     "div",
     {
       role: "group",
-      "aria-label": `${planName}, ${price} per ${offering.billingCycle}`,
+      "aria-label": `${planName}, ${price} per ${unitSuffix ?? offering.billingCycle}`,
       className: `aforo-w-pc-card${featured ? " aforo-w-pc-card-featured" : ""}`,
       style: cardStyle2,
       children: [
@@ -3199,14 +3238,14 @@ function PlanCard({
                   children: price
                 }
               ),
-              !isContactSales && offering.billingCycle ? /* @__PURE__ */ jsxs(
+              !isContactSales && (unitSuffix || offering.billingCycle) ? /* @__PURE__ */ jsxs(
                 "span",
                 {
                   className: "aforo-w-pc-cycle",
                   style: { fontSize: 13, color: tokens.textMuted },
                   children: [
                     "/ ",
-                    humanCycle(offering.billingCycle)
+                    unitSuffix ?? humanCycle(offering.billingCycle)
                   ]
                 }
               ) : null
@@ -3364,6 +3403,7 @@ function TableLayout({
           /* @__PURE__ */ jsx("th", { scope: "col", style: { ...headerCellStyle, color: tokens.textMuted, fontSize: 12 }, children: /* @__PURE__ */ jsx("span", { className: "aforo-w-pc-sr-only", style: srOnlyStyle, children: "Feature" }) }),
           offerings.map((o) => {
             const featured = offeringIsFeatured(o, featuredOverride);
+            const { text: tablePrice, unitSuffix: tableUnitSuffix } = resolveDisplayPrice(o, locale, intlOverride);
             return /* @__PURE__ */ jsx(
               "th",
               {
@@ -3393,13 +3433,20 @@ function TableLayout({
                       children: "Most popular"
                     }
                   ) : null,
-                  /* @__PURE__ */ jsx("div", { style: { fontSize: 22, fontWeight: 700 }, children: safeFormatCurrency(o.priceCents, o.currency, locale, intlOverride) }),
+                  /* @__PURE__ */ jsxs("div", { style: { fontSize: 22, fontWeight: 700 }, children: [
+                    tablePrice,
+                    tableUnitSuffix ? /* @__PURE__ */ jsxs("span", { style: { fontSize: 12, fontWeight: 400, color: tokens.textMuted }, children: [
+                      " ",
+                      "/ ",
+                      tableUnitSuffix
+                    ] }) : null
+                  ] }),
                   /* @__PURE__ */ jsx(
                     "button",
                     {
                       type: "button",
                       onClick: () => onCtaClick(o),
-                      "aria-label": `${ctaLabel(o, ctaTextProp, safeFormatCurrency(o.priceCents, o.currency, locale, intlOverride) === "\u2014")} for ${localizedName(o)}`,
+                      "aria-label": `${ctaLabel(o, ctaTextProp, tablePrice === "\u2014")} for ${localizedName(o)}`,
                       style: {
                         inlineSize: "100%",
                         padding: "8px 12px",
@@ -3412,7 +3459,7 @@ function TableLayout({
                         cursor: "pointer",
                         fontFamily: tokens.fontFamily
                       },
-                      children: ctaLabel(o, ctaTextProp, safeFormatCurrency(o.priceCents, o.currency, locale, intlOverride) === "\u2014")
+                      children: ctaLabel(o, ctaTextProp, tablePrice === "\u2014")
                     }
                   )
                 ] })
@@ -12129,7 +12176,7 @@ function ResultPanel({
 }
 
 // src/core/version.ts
-var VERSION = "1.0.3";
+var VERSION = "1.0.5";
 
 // src/core/AforoEmbed.ts
 var mountedElements = /* @__PURE__ */ new WeakMap();

package/dist/loader.js

@@ -1,3 +1,3 @@
-var AforoEmbedLoader=(function(exports){'use strict';var T="1.0.3";var y=new WeakMap,c=new Map,f={},A=false;function h(){A||typeof window!="undefined"&&(window.addEventListener("message",e=>{let t=e.data;!t||typeof t!="object"||typeof t.type!="string"||t.type.startsWith("aforo.")&&$(t);}),A=true);}function $(e){let t=c.get(e.type);if(t)for(let o of t)try{o(e);}catch(i){}let n=c.get("*");if(n)for(let o of n)try{o(e);}catch(i){}}var p=new Map;function N(e,t){p.set(e,t);}function w(e){return typeof e=="object"&&e!==null&&typeof e.tagName=="string"}var b={version:T,configure(e){f={...f,...e};},getConfig(){return {...f}},mount(e,t){var r,l,u,s,d;if(!w(e)||y.has(e))return  false;let n=t.widget,o=p.get(n);if(!o)return typeof console!="undefined"&&console.warn(`[aforo:embed] No mount handler registered for widget "${n}". Loader bundle may not have finished loading.`),false;let i={widget:n,tenantSlug:(l=(r=t.tenantSlug)!=null?r:f.tenantSlug)!=null?l:"",embedKey:(s=(u=t.embedKey)!=null?u:f.embedKey)!=null?s:"",bridgeToken:(d=t.bridgeToken)!=null?d:f.bridgeToken,layout:t.layout,themeOverrides:t.themeOverrides,config:t.config};if(!i.tenantSlug||!i.embedKey)return typeof console!="undefined"&&console.error(`[aforo:embed] Widget "${n}" requires tenantSlug + embedKey. Provide via AforoEmbed.configure() or data-* attributes.`),false;h();let a=o(e,i);return y.set(e,{element:e,widget:n,teardown:a}),true},unmount(e){if(!w(e))return  false;let t=y.get(e);if(!t)return  false;try{t.teardown();}catch(n){}return y.delete(e),true},on(e,t){h();let n=c.get(e);return n||(n=new Set,c.set(e,n)),n.add(t),()=>{let o=c.get(e);o&&(o.delete(t),o.size===0&&c.delete(e));}},_registerWidget:N,_registeredWidgetsForTesting(){return Array.from(p.keys())},_resetForTesting(){p.clear(),c.clear(),f={};}};function k(e){if(!e)return {};try{let t=JSON.parse(e);if(t&&typeof t=="object"&&!Array.isArray(t)){let n={},o=["primary","primaryContrast","text","textMuted","bg","border","radius","fontFamily"],i=t;for(let a of o){let r=i[a];typeof r=="string"&&r.length>0&&(n[a]=r);}return n}}catch(t){}return {}}var U=new Set(["pricing-card","subscribe-button","checkout-flow","subscription-manager","invoice-list","usage-meter","payment-method","upgrade-cancel"]),B="https://embed.aforo.ai/v1/widgets",g="[aforo:loader]";function D(){let e=typeof document!="undefined"?document.currentScript:null;if(e&&e.tagName==="SCRIPT")return e;if(typeof document!="undefined"){let t=document.getElementsByTagName("script");for(let n=t.length-1;n>=0;n--){let o=t[n];if(!o)continue;let i=o.getAttribute("src")||"";if(/(\/v1)?\/loader(\.umd)?\.js$/.test(i))return o}}return null}function G(e){let t=e==null?void 0:e.getAttribute("src");if(!t)return null;try{let n=typeof location!="undefined"?location.href:void 0,o=new URL(t,n),i=o.pathname.replace(/\/loader(\.umd)?\.js$/,"");return `${o.origin}${i}/widgets`}catch(n){return null}}function v(e,t){let n=e.getAttribute(t);if(n==null||n.trim()==="")return;let o=Number(n);return Number.isFinite(o)?o:void 0}function j(e,t){let n=e.getAttribute(t);if(n==null)return;let o=n.trim().toLowerCase();if(o==="true")return  true;if(o==="false")return  false}function V(e){let t=(e.getAttribute("data-aforo-widget")||"").trim(),n=e.getAttribute("data-tenant-slug")||e.getAttribute("data-tenant")||"",o=e.getAttribute("data-embed-key")||"",i=e.getAttribute("data-bridge-token")||void 0,a=e.getAttribute("data-layout")||void 0,r=k(e.getAttribute("data-theme-overrides")),l=e.getAttribute("data-offering-id")||void 0,u=e.getAttribute("data-subscription-id")||void 0,s=e.getAttribute("data-metric")||void 0,d=e.getAttribute("data-featured-offering-id")||void 0,m=e.getAttribute("data-mode")||void 0,M=e.getAttribute("data-return-url")||void 0,S=e.getAttribute("data-default-status")||void 0,F=e.getAttribute("data-render-mode")||void 0,_=e.getAttribute("data-locale")||void 0,C=v(e,"data-page-size"),O=v(e,"data-poll-interval-ms"),I=e.getAttribute("data-theme")||void 0,R=e.getAttribute("data-cart-type")||void 0,W=e.getAttribute("data-target-id")||void 0,H=e.getAttribute("data-cta-text")||void 0,x=e.getAttribute("data-cta-url")||void 0,P=v(e,"data-max-plans"),K=j(e,"data-show-features");return {widget:t,tenantSlug:n,embedKey:o,bridgeToken:i,layout:a,themeOverrides:r,config:{offeringId:l,subscriptionId:u,metricName:s,featuredOfferingId:d,mode:m,returnUrl:M,defaultStatus:S,renderMode:F,locale:_,pageSize:C,pollIntervalMs:O,theme:I,cartType:R,targetId:W,ctaText:H,ctaUrl:x,maxPlans:P,showFeatures:K}}}function z(e,t,n){return new Promise((o,i)=>{if(typeof document=="undefined")return i(new Error("no document"));let a=document.querySelector(`script[data-aforo-bundle="${e}"]`);if(a){if(a.dataset.aforoLoaded==="1")return o();a.addEventListener("load",()=>o()),a.addEventListener("error",()=>i(new Error(`bundle load failed: ${e}`)));return}let r=document.createElement("script");r.src=`${t}/${e}.js`,r.async=true,r.crossOrigin="anonymous",r.dataset.aforoBundle=e,n&&r.setAttribute("nonce",n),r.addEventListener("load",()=>{r.dataset.aforoLoaded="1",o();}),r.addEventListener("error",()=>i(new Error(`bundle load failed: ${e}`))),document.head.appendChild(r);})}function L(e){if(!e.__aforoEmbedReadyFired){e.__aforoEmbedReadyFired=true;try{typeof e.aforoEmbedReady=="function"&&e.aforoEmbedReady();}catch(t){typeof console!="undefined"&&console.error(`${g} aforoEmbedReady callback threw`,t);}if(typeof document!="undefined"&&typeof CustomEvent!="undefined")try{document.dispatchEvent(new CustomEvent("aforoEmbedReady"));}catch(t){}}}async function E(e){if(typeof window=="undefined"||typeof document=="undefined")return;let t=window;if(window.location.protocol!=="https:"&&window.location.hostname!=="localhost"){typeof console!="undefined"&&console.error(`${g} Refusing to mount Aforo widgets on a non-HTTPS page. Embed Plugin requires HTTPS (FR-TIER-12). Current origin: ${window.location.origin}`);return}if(t.__aforoEmbedLoaderInitialized){typeof console!="undefined"&&console.warn(`${g} Loader already initialised on this page \u2014 skipping duplicate run.`);return}t.__aforoEmbedLoaderInitialized=true,t.aforoEmbed||(t.aforoEmbed=b);let n=D(),o=(n==null?void 0:n.getAttribute("nonce"))||null,i=(e==null?void 0:e.bundleBaseUrl)||G(n)||B,a=Array.from(document.querySelectorAll("[data-aforo-widget]"));if(a.length===0){L(t);return}let r=new Map;for(let u of a){let s=(u.getAttribute("data-aforo-widget")||"").trim();if(!U.has(s)){typeof console!="undefined"&&console.warn(`${g} Unknown widget id "${s}" \u2014 skipping`);continue}let d=r.get(s);d||(d=[],r.set(s,d)),d.push(u);}let l=Array.from(r.entries()).map(async([u,s])=>{try{await z(u,i,o);for(let d of s){let m=V(d);if(!m.widget||!m.tenantSlug||!m.embedKey){typeof console!="undefined"&&console.error(`${g} Placeholder missing required attributes (data-tenant-slug + data-embed-key). Skipping element.`,d);continue}b.mount(d,m);}}catch(d){typeof console!="undefined"&&console.error(`${g} Failed to load bundle for "${u}"`,d);}});await Promise.all(l).catch(()=>{}),L(t);}typeof document!="undefined"&&document.readyState!=="loading"?Promise.resolve().then(()=>{E();}):typeof document!="undefined"&&document.addEventListener("DOMContentLoaded",()=>{E();});b._loader={bootstrap:E};
+var AforoEmbedLoader=(function(exports){'use strict';var T="1.0.5";var y=new WeakMap,c=new Map,f={},A=false;function h(){A||typeof window!="undefined"&&(window.addEventListener("message",e=>{let t=e.data;!t||typeof t!="object"||typeof t.type!="string"||t.type.startsWith("aforo.")&&$(t);}),A=true);}function $(e){let t=c.get(e.type);if(t)for(let o of t)try{o(e);}catch(i){}let n=c.get("*");if(n)for(let o of n)try{o(e);}catch(i){}}var p=new Map;function N(e,t){p.set(e,t);}function w(e){return typeof e=="object"&&e!==null&&typeof e.tagName=="string"}var b={version:T,configure(e){f={...f,...e};},getConfig(){return {...f}},mount(e,t){var r,l,u,s,d;if(!w(e)||y.has(e))return  false;let n=t.widget,o=p.get(n);if(!o)return typeof console!="undefined"&&console.warn(`[aforo:embed] No mount handler registered for widget "${n}". Loader bundle may not have finished loading.`),false;let i={widget:n,tenantSlug:(l=(r=t.tenantSlug)!=null?r:f.tenantSlug)!=null?l:"",embedKey:(s=(u=t.embedKey)!=null?u:f.embedKey)!=null?s:"",bridgeToken:(d=t.bridgeToken)!=null?d:f.bridgeToken,layout:t.layout,themeOverrides:t.themeOverrides,config:t.config};if(!i.tenantSlug||!i.embedKey)return typeof console!="undefined"&&console.error(`[aforo:embed] Widget "${n}" requires tenantSlug + embedKey. Provide via AforoEmbed.configure() or data-* attributes.`),false;h();let a=o(e,i);return y.set(e,{element:e,widget:n,teardown:a}),true},unmount(e){if(!w(e))return  false;let t=y.get(e);if(!t)return  false;try{t.teardown();}catch(n){}return y.delete(e),true},on(e,t){h();let n=c.get(e);return n||(n=new Set,c.set(e,n)),n.add(t),()=>{let o=c.get(e);o&&(o.delete(t),o.size===0&&c.delete(e));}},_registerWidget:N,_registeredWidgetsForTesting(){return Array.from(p.keys())},_resetForTesting(){p.clear(),c.clear(),f={};}};function k(e){if(!e)return {};try{let t=JSON.parse(e);if(t&&typeof t=="object"&&!Array.isArray(t)){let n={},o=["primary","primaryContrast","text","textMuted","bg","border","radius","fontFamily"],i=t;for(let a of o){let r=i[a];typeof r=="string"&&r.length>0&&(n[a]=r);}return n}}catch(t){}return {}}var U=new Set(["pricing-card","subscribe-button","checkout-flow","subscription-manager","invoice-list","usage-meter","payment-method","upgrade-cancel"]),B="https://embed.aforo.ai/v1/widgets",g="[aforo:loader]";function D(){let e=typeof document!="undefined"?document.currentScript:null;if(e&&e.tagName==="SCRIPT")return e;if(typeof document!="undefined"){let t=document.getElementsByTagName("script");for(let n=t.length-1;n>=0;n--){let o=t[n];if(!o)continue;let i=o.getAttribute("src")||"";if(/(\/v1)?\/loader(\.umd)?\.js$/.test(i))return o}}return null}function G(e){let t=e==null?void 0:e.getAttribute("src");if(!t)return null;try{let n=typeof location!="undefined"?location.href:void 0,o=new URL(t,n),i=o.pathname.replace(/\/loader(\.umd)?\.js$/,"");return `${o.origin}${i}/widgets`}catch(n){return null}}function v(e,t){let n=e.getAttribute(t);if(n==null||n.trim()==="")return;let o=Number(n);return Number.isFinite(o)?o:void 0}function j(e,t){let n=e.getAttribute(t);if(n==null)return;let o=n.trim().toLowerCase();if(o==="true")return  true;if(o==="false")return  false}function V(e){let t=(e.getAttribute("data-aforo-widget")||"").trim(),n=e.getAttribute("data-tenant-slug")||e.getAttribute("data-tenant")||"",o=e.getAttribute("data-embed-key")||"",i=e.getAttribute("data-bridge-token")||void 0,a=e.getAttribute("data-layout")||void 0,r=k(e.getAttribute("data-theme-overrides")),l=e.getAttribute("data-offering-id")||void 0,u=e.getAttribute("data-subscription-id")||void 0,s=e.getAttribute("data-metric")||void 0,d=e.getAttribute("data-featured-offering-id")||void 0,m=e.getAttribute("data-mode")||void 0,M=e.getAttribute("data-return-url")||void 0,S=e.getAttribute("data-default-status")||void 0,F=e.getAttribute("data-render-mode")||void 0,_=e.getAttribute("data-locale")||void 0,C=v(e,"data-page-size"),O=v(e,"data-poll-interval-ms"),I=e.getAttribute("data-theme")||void 0,R=e.getAttribute("data-cart-type")||void 0,W=e.getAttribute("data-target-id")||void 0,H=e.getAttribute("data-cta-text")||void 0,x=e.getAttribute("data-cta-url")||void 0,P=v(e,"data-max-plans"),K=j(e,"data-show-features");return {widget:t,tenantSlug:n,embedKey:o,bridgeToken:i,layout:a,themeOverrides:r,config:{offeringId:l,subscriptionId:u,metricName:s,featuredOfferingId:d,mode:m,returnUrl:M,defaultStatus:S,renderMode:F,locale:_,pageSize:C,pollIntervalMs:O,theme:I,cartType:R,targetId:W,ctaText:H,ctaUrl:x,maxPlans:P,showFeatures:K}}}function z(e,t,n){return new Promise((o,i)=>{if(typeof document=="undefined")return i(new Error("no document"));let a=document.querySelector(`script[data-aforo-bundle="${e}"]`);if(a){if(a.dataset.aforoLoaded==="1")return o();a.addEventListener("load",()=>o()),a.addEventListener("error",()=>i(new Error(`bundle load failed: ${e}`)));return}let r=document.createElement("script");r.src=`${t}/${e}.js`,r.async=true,r.crossOrigin="anonymous",r.dataset.aforoBundle=e,n&&r.setAttribute("nonce",n),r.addEventListener("load",()=>{r.dataset.aforoLoaded="1",o();}),r.addEventListener("error",()=>i(new Error(`bundle load failed: ${e}`))),document.head.appendChild(r);})}function L(e){if(!e.__aforoEmbedReadyFired){e.__aforoEmbedReadyFired=true;try{typeof e.aforoEmbedReady=="function"&&e.aforoEmbedReady();}catch(t){typeof console!="undefined"&&console.error(`${g} aforoEmbedReady callback threw`,t);}if(typeof document!="undefined"&&typeof CustomEvent!="undefined")try{document.dispatchEvent(new CustomEvent("aforoEmbedReady"));}catch(t){}}}async function E(e){if(typeof window=="undefined"||typeof document=="undefined")return;let t=window;if(window.location.protocol!=="https:"&&window.location.hostname!=="localhost"){typeof console!="undefined"&&console.error(`${g} Refusing to mount Aforo widgets on a non-HTTPS page. Embed Plugin requires HTTPS (FR-TIER-12). Current origin: ${window.location.origin}`);return}if(t.__aforoEmbedLoaderInitialized){typeof console!="undefined"&&console.warn(`${g} Loader already initialised on this page \u2014 skipping duplicate run.`);return}t.__aforoEmbedLoaderInitialized=true,t.aforoEmbed||(t.aforoEmbed=b);let n=D(),o=(n==null?void 0:n.getAttribute("nonce"))||null,i=(e==null?void 0:e.bundleBaseUrl)||G(n)||B,a=Array.from(document.querySelectorAll("[data-aforo-widget]"));if(a.length===0){L(t);return}let r=new Map;for(let u of a){let s=(u.getAttribute("data-aforo-widget")||"").trim();if(!U.has(s)){typeof console!="undefined"&&console.warn(`${g} Unknown widget id "${s}" \u2014 skipping`);continue}let d=r.get(s);d||(d=[],r.set(s,d)),d.push(u);}let l=Array.from(r.entries()).map(async([u,s])=>{try{await z(u,i,o);for(let d of s){let m=V(d);if(!m.widget||!m.tenantSlug||!m.embedKey){typeof console!="undefined"&&console.error(`${g} Placeholder missing required attributes (data-tenant-slug + data-embed-key). Skipping element.`,d);continue}b.mount(d,m);}}catch(d){typeof console!="undefined"&&console.error(`${g} Failed to load bundle for "${u}"`,d);}});await Promise.all(l).catch(()=>{}),L(t);}typeof document!="undefined"&&document.readyState!=="loading"?Promise.resolve().then(()=>{E();}):typeof document!="undefined"&&document.addEventListener("DOMContentLoaded",()=>{E();});b._loader={bootstrap:E};
 exports.AforoEmbed=b;exports.bootstrap=E;return exports;})({});//# sourceMappingURL=loader.js.map
 //# sourceMappingURL=loader.js.map