@aforoai/storefront-widgets 1.0.3 → 1.0.5

package/dist/vue/index.cjs

@@ -28,7 +28,7 @@ var React7__namespace = /*#__PURE__*/_interopNamespace(React7);
 // src/vue/index.ts
 
 // src/core/version.ts
-var VERSION = "1.0.3";
+var VERSION = "1.0.5";
 
 // src/core/AforoEmbed.ts
 var mountedElements = /* @__PURE__ */ new WeakMap();
@@ -548,7 +548,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,
@@ -557,9 +558,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
     };
   }
   /**
@@ -600,10 +601,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
@@ -618,7 +632,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, {
@@ -631,7 +645,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;
     }
@@ -775,7 +801,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,
@@ -784,9 +811,9 @@ var _BridgeClient = class _BridgeClient {
       );
     }
     return {
-      checkoutUrl: body.checkoutUrl,
-      checkoutSessionId: body.checkoutSessionId,
-      expiresAt: body.expiresAt
+      checkoutUrl: data.checkoutUrl,
+      checkoutSessionId: data.checkoutSessionId,
+      expiresAt: data.expiresAt
     };
   }
   /* ────────────────────────────────────────────────────────────────────
@@ -1594,13 +1621,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;
@@ -3104,6 +3134,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)";
 }
@@ -3507,12 +3551,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);
@@ -3533,7 +3572,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: [
@@ -3598,14 +3637,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
@@ -3763,6 +3802,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",
               {
@@ -3792,13 +3832,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",
@@ -3811,7 +3858,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")
                     }
                   )
                 ] })

package/dist/vue/index.mjs

@@ -6,7 +6,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 // src/vue/index.ts
 
 // src/core/version.ts
-var VERSION = "1.0.3";
+var VERSION = "1.0.5";
 
 // src/core/AforoEmbed.ts
 var mountedElements = /* @__PURE__ */ new WeakMap();
@@ -526,7 +526,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,
@@ -535,9 +536,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
     };
   }
   /**
@@ -578,10 +579,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
@@ -596,7 +610,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, {
@@ -609,7 +623,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;
     }
@@ -753,7 +779,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,
@@ -762,9 +789,9 @@ var _BridgeClient = class _BridgeClient {
       );
     }
     return {
-      checkoutUrl: body.checkoutUrl,
-      checkoutSessionId: body.checkoutSessionId,
-      expiresAt: body.expiresAt
+      checkoutUrl: data.checkoutUrl,
+      checkoutSessionId: data.checkoutSessionId,
+      expiresAt: data.expiresAt
     };
   }
   /* ────────────────────────────────────────────────────────────────────
@@ -1572,13 +1599,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;
@@ -3082,6 +3112,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)";
 }
@@ -3485,12 +3529,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);
@@ -3511,7 +3550,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: [
@@ -3576,14 +3615,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
@@ -3741,6 +3780,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",
               {
@@ -3770,13 +3810,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",
@@ -3789,7 +3836,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")
                     }
                   )
                 ] })