@aforoai/storefront-widgets 1.0.4 → 1.0.6

package/dist/vanilla/index.cjs

@@ -27,7 +27,7 @@ var React7__namespace = /*#__PURE__*/_interopNamespace(React7);
 // src/vanilla/index.ts
 
 // src/core/version.ts
-var VERSION = "1.0.4";
+var VERSION = "1.0.6";
 
 // src/core/AforoEmbed.ts
 var mountedElements = /* @__PURE__ */ new WeakMap();
@@ -182,6 +182,7 @@ function pricingCardConfigToProps(config) {
   const theme = readEnum(extra.theme, ["light", "dark", "auto"], "auto");
   const locale = typeof extra.locale === "string" ? extra.locale : void 0;
   const maxPlans = typeof extra.maxPlans === "number" && Number.isFinite(extra.maxPlans) ? extra.maxPlans : void 0;
+  const borderRadius = typeof extra.borderRadius === "number" && Number.isFinite(extra.borderRadius) ? extra.borderRadius : void 0;
   const ctaText = typeof extra.ctaText === "string" ? extra.ctaText : void 0;
   const ctaUrl = typeof extra.ctaUrl === "string" ? extra.ctaUrl : void 0;
   const showFeatures = typeof extra.showFeatures === "boolean" ? extra.showFeatures : void 0;
@@ -195,6 +196,7 @@ function pricingCardConfigToProps(config) {
     theme,
     locale,
     maxPlans,
+    borderRadius,
     showFeatures,
     ctaText,
     ctaUrl,
@@ -547,7 +549,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,
@@ -556,9 +559,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
     };
   }
   /**
@@ -644,16 +647,17 @@ var _BridgeClient = class _BridgeClient {
     try {
       const body = await resp.json();
       if (!body || typeof body !== "object") return null;
+      const data = body.data ?? body;
       return {
-        tenantSlug: body.tenantSlug,
+        tenantSlug: data.tenantSlug,
         branding: {
-          primaryColor: body.primaryColor ?? null,
-          secondaryColor: body.secondaryColor ?? null,
-          logoUrl: body.logoUrl ?? null,
-          fontFamily: body.fontFamily ?? null
+          primaryColor: data.primaryColor ?? null,
+          secondaryColor: data.secondaryColor ?? null,
+          logoUrl: data.logoUrl ?? null,
+          fontFamily: data.fontFamily ?? null
         },
-        offerings: Array.isArray(body.offerings) ? body.offerings : [],
-        embeddableWidget: body.embeddableWidget ?? null
+        offerings: Array.isArray(data.offerings) ? data.offerings : [],
+        embeddableWidget: data.embeddableWidget ?? null
       };
     } catch {
       return null;
@@ -798,7 +802,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,
@@ -807,9 +812,9 @@ var _BridgeClient = class _BridgeClient {
       );
     }
     return {
-      checkoutUrl: body.checkoutUrl,
-      checkoutSessionId: body.checkoutSessionId,
-      expiresAt: body.expiresAt
+      checkoutUrl: data.checkoutUrl,
+      checkoutSessionId: data.checkoutSessionId,
+      expiresAt: data.expiresAt
     };
   }
   /* ────────────────────────────────────────────────────────────────────
@@ -1617,13 +1622,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;
@@ -3042,6 +3050,7 @@ function WidgetShell(props) {
 var DEFAULT_LAYOUT = "horizontal";
 var DEFAULT_MAX_PLANS = 4;
 var DEFAULT_CTA_TEXT = "Get Started";
+var DEFAULT_CARD_RADIUS = 12;
 function clampLayout(raw) {
   return raw === "horizontal" || raw === "vertical" || raw === "table" ? raw : void 0;
 }
@@ -3052,7 +3061,7 @@ function setTenantDefaultsIdempotent(setter, next) {
   setter((prev) => {
     if (prev === next) return prev;
     if (!prev && !next) return prev;
-    if (prev && next && prev.layout === next.layout && prev.theme === next.theme && prev.maxPlans === next.maxPlans && prev.showFeatures === next.showFeatures && prev.ctaText === next.ctaText) {
+    if (prev && next && prev.layout === next.layout && prev.theme === next.theme && prev.maxPlans === next.maxPlans && prev.showFeatures === next.showFeatures && prev.ctaText === next.ctaText && prev.borderRadius === next.borderRadius) {
       return prev;
     }
     return next;
@@ -3067,7 +3076,8 @@ function extractTenantDefaults(config) {
     theme: typeof raw.theme === "string" ? raw.theme : void 0,
     maxPlans: typeof raw.maxPlans === "number" && Number.isFinite(raw.maxPlans) ? raw.maxPlans : void 0,
     showFeatures: typeof raw.showFeatures === "boolean" ? raw.showFeatures : void 0,
-    ctaText: typeof raw.ctaText === "string" && raw.ctaText.length > 0 ? raw.ctaText : void 0
+    ctaText: typeof raw.ctaText === "string" && raw.ctaText.length > 0 ? raw.ctaText : void 0,
+    borderRadius: typeof raw.borderRadius === "number" && Number.isFinite(raw.borderRadius) ? raw.borderRadius : void 0
   };
 }
 var DARK_TOKEN_OVERLAY = {
@@ -3127,6 +3137,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)";
 }
@@ -3175,6 +3199,7 @@ function PricingCardBody(props) {
     theme: themeProp,
     locale: localeProp,
     maxPlans: maxPlansProp,
+    borderRadius: borderRadiusProp,
     showFeatures: showFeaturesProp,
     ctaText: ctaTextProp,
     ctaUrl: ctaUrlProp,
@@ -3188,6 +3213,7 @@ function PricingCardBody(props) {
   const maxPlans = typeof maxPlansProp === "number" && Number.isFinite(maxPlansProp) ? maxPlansProp : typeof tenantDefaults?.maxPlans === "number" && Number.isFinite(tenantDefaults.maxPlans) ? tenantDefaults.maxPlans : DEFAULT_MAX_PLANS;
   const showFeatures = typeof showFeaturesProp === "boolean" ? showFeaturesProp : typeof tenantDefaults?.showFeatures === "boolean" ? tenantDefaults.showFeatures : true;
   const ctaTextEffective = ctaTextProp ?? tenantDefaults?.ctaText ?? void 0;
+  const cardRadius = typeof borderRadiusProp === "number" && Number.isFinite(borderRadiusProp) ? borderRadiusProp : typeof tenantDefaults?.borderRadius === "number" && Number.isFinite(tenantDefaults.borderRadius) ? tenantDefaults.borderRadius : DEFAULT_CARD_RADIUS;
   const shell = useWidgetShell();
   const { tokens: shellTokens, bridgeClient, telemetry, bus, tenantSlug } = shell;
   const isDark = React7__namespace.useMemo(() => {
@@ -3405,7 +3431,8 @@ function PricingCardBody(props) {
           {
             layout,
             tokens,
-            prefersReducedMotion
+            prefersReducedMotion,
+            cardRadius
           }
         )
       }
@@ -3477,7 +3504,8 @@ function PricingCardBody(props) {
           ctaTextProp: ctaTextEffective,
           featuredOverride: featuredOfferingId,
           onCtaClick: handleCtaClick,
-          intlOverride
+          intlOverride,
+          cardRadius
         }
       )
     }
@@ -3492,7 +3520,8 @@ function PlanGrid({
   ctaTextProp,
   featuredOverride,
   onCtaClick,
-  intlOverride
+  intlOverride,
+  cardRadius
 }) {
   const isHorizontal = layout === "horizontal";
   const gridStyle2 = isHorizontal ? {
@@ -3515,7 +3544,8 @@ function PlanGrid({
       ctaTextProp,
       featured: offeringIsFeatured(o, featuredOverride),
       onCtaClick,
-      intlOverride
+      intlOverride,
+      cardRadius
     },
     o.offeringId
   )) });
@@ -3528,14 +3558,10 @@ function PlanCard({
   ctaTextProp,
   featured,
   onCtaClick,
-  intlOverride
+  intlOverride,
+  cardRadius
 }) {
-  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);
@@ -3544,7 +3570,7 @@ function PlanCard({
     display: "flex",
     flexDirection: "column",
     padding: 24,
-    borderRadius: 12,
+    borderRadius: cardRadius,
     border: featured ? `2px solid ${tokens.primary}` : `1px solid ${tokens.border}`,
     background: tokens.bg,
     color: tokens.text,
@@ -3556,7 +3582,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: [
@@ -3621,14 +3647,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
@@ -3786,6 +3812,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",
               {
@@ -3815,13 +3842,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",
@@ -3834,7 +3868,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")
                     }
                   )
                 ] })
@@ -3886,7 +3920,8 @@ function cellAria(label, feature) {
 function LoadingSkeleton({
   layout,
   tokens,
-  prefersReducedMotion
+  prefersReducedMotion,
+  cardRadius
 }) {
   const shimmerStyle = prefersReducedMotion ? { background: tokens.border, opacity: 0.6 } : {
     background: `linear-gradient(90deg, ${tokens.border} 0%, ${tokens.bg} 50%, ${tokens.border} 100%)`,
@@ -3919,7 +3954,7 @@ function LoadingSkeleton({
             "aria-hidden": "true",
             style: {
               padding: 24,
-              borderRadius: 12,
+              borderRadius: cardRadius,
               border: `1px solid ${tokens.border}`,
               background: tokens.bg,
               minHeight: 280,

package/dist/vanilla/index.mjs

@@ -5,7 +5,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 // src/vanilla/index.ts
 
 // src/core/version.ts
-var VERSION = "1.0.4";
+var VERSION = "1.0.6";
 
 // src/core/AforoEmbed.ts
 var mountedElements = /* @__PURE__ */ new WeakMap();
@@ -160,6 +160,7 @@ function pricingCardConfigToProps(config) {
   const theme = readEnum(extra.theme, ["light", "dark", "auto"], "auto");
   const locale = typeof extra.locale === "string" ? extra.locale : void 0;
   const maxPlans = typeof extra.maxPlans === "number" && Number.isFinite(extra.maxPlans) ? extra.maxPlans : void 0;
+  const borderRadius = typeof extra.borderRadius === "number" && Number.isFinite(extra.borderRadius) ? extra.borderRadius : void 0;
   const ctaText = typeof extra.ctaText === "string" ? extra.ctaText : void 0;
   const ctaUrl = typeof extra.ctaUrl === "string" ? extra.ctaUrl : void 0;
   const showFeatures = typeof extra.showFeatures === "boolean" ? extra.showFeatures : void 0;
@@ -173,6 +174,7 @@ function pricingCardConfigToProps(config) {
     theme,
     locale,
     maxPlans,
+    borderRadius,
     showFeatures,
     ctaText,
     ctaUrl,
@@ -525,7 +527,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,
@@ -534,9 +537,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
     };
   }
   /**
@@ -622,16 +625,17 @@ var _BridgeClient = class _BridgeClient {
     try {
       const body = await resp.json();
       if (!body || typeof body !== "object") return null;
+      const data = body.data ?? body;
       return {
-        tenantSlug: body.tenantSlug,
+        tenantSlug: data.tenantSlug,
         branding: {
-          primaryColor: body.primaryColor ?? null,
-          secondaryColor: body.secondaryColor ?? null,
-          logoUrl: body.logoUrl ?? null,
-          fontFamily: body.fontFamily ?? null
+          primaryColor: data.primaryColor ?? null,
+          secondaryColor: data.secondaryColor ?? null,
+          logoUrl: data.logoUrl ?? null,
+          fontFamily: data.fontFamily ?? null
         },
-        offerings: Array.isArray(body.offerings) ? body.offerings : [],
-        embeddableWidget: body.embeddableWidget ?? null
+        offerings: Array.isArray(data.offerings) ? data.offerings : [],
+        embeddableWidget: data.embeddableWidget ?? null
       };
     } catch {
       return null;
@@ -776,7 +780,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,
@@ -785,9 +790,9 @@ var _BridgeClient = class _BridgeClient {
       );
     }
     return {
-      checkoutUrl: body.checkoutUrl,
-      checkoutSessionId: body.checkoutSessionId,
-      expiresAt: body.expiresAt
+      checkoutUrl: data.checkoutUrl,
+      checkoutSessionId: data.checkoutSessionId,
+      expiresAt: data.expiresAt
     };
   }
   /* ────────────────────────────────────────────────────────────────────
@@ -1595,13 +1600,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;
@@ -3020,6 +3028,7 @@ function WidgetShell(props) {
 var DEFAULT_LAYOUT = "horizontal";
 var DEFAULT_MAX_PLANS = 4;
 var DEFAULT_CTA_TEXT = "Get Started";
+var DEFAULT_CARD_RADIUS = 12;
 function clampLayout(raw) {
   return raw === "horizontal" || raw === "vertical" || raw === "table" ? raw : void 0;
 }
@@ -3030,7 +3039,7 @@ function setTenantDefaultsIdempotent(setter, next) {
   setter((prev) => {
     if (prev === next) return prev;
     if (!prev && !next) return prev;
-    if (prev && next && prev.layout === next.layout && prev.theme === next.theme && prev.maxPlans === next.maxPlans && prev.showFeatures === next.showFeatures && prev.ctaText === next.ctaText) {
+    if (prev && next && prev.layout === next.layout && prev.theme === next.theme && prev.maxPlans === next.maxPlans && prev.showFeatures === next.showFeatures && prev.ctaText === next.ctaText && prev.borderRadius === next.borderRadius) {
       return prev;
     }
     return next;
@@ -3045,7 +3054,8 @@ function extractTenantDefaults(config) {
     theme: typeof raw.theme === "string" ? raw.theme : void 0,
     maxPlans: typeof raw.maxPlans === "number" && Number.isFinite(raw.maxPlans) ? raw.maxPlans : void 0,
     showFeatures: typeof raw.showFeatures === "boolean" ? raw.showFeatures : void 0,
-    ctaText: typeof raw.ctaText === "string" && raw.ctaText.length > 0 ? raw.ctaText : void 0
+    ctaText: typeof raw.ctaText === "string" && raw.ctaText.length > 0 ? raw.ctaText : void 0,
+    borderRadius: typeof raw.borderRadius === "number" && Number.isFinite(raw.borderRadius) ? raw.borderRadius : void 0
   };
 }
 var DARK_TOKEN_OVERLAY = {
@@ -3105,6 +3115,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)";
 }
@@ -3153,6 +3177,7 @@ function PricingCardBody(props) {
     theme: themeProp,
     locale: localeProp,
     maxPlans: maxPlansProp,
+    borderRadius: borderRadiusProp,
     showFeatures: showFeaturesProp,
     ctaText: ctaTextProp,
     ctaUrl: ctaUrlProp,
@@ -3166,6 +3191,7 @@ function PricingCardBody(props) {
   const maxPlans = typeof maxPlansProp === "number" && Number.isFinite(maxPlansProp) ? maxPlansProp : typeof tenantDefaults?.maxPlans === "number" && Number.isFinite(tenantDefaults.maxPlans) ? tenantDefaults.maxPlans : DEFAULT_MAX_PLANS;
   const showFeatures = typeof showFeaturesProp === "boolean" ? showFeaturesProp : typeof tenantDefaults?.showFeatures === "boolean" ? tenantDefaults.showFeatures : true;
   const ctaTextEffective = ctaTextProp ?? tenantDefaults?.ctaText ?? void 0;
+  const cardRadius = typeof borderRadiusProp === "number" && Number.isFinite(borderRadiusProp) ? borderRadiusProp : typeof tenantDefaults?.borderRadius === "number" && Number.isFinite(tenantDefaults.borderRadius) ? tenantDefaults.borderRadius : DEFAULT_CARD_RADIUS;
   const shell = useWidgetShell();
   const { tokens: shellTokens, bridgeClient, telemetry, bus, tenantSlug } = shell;
   const isDark = React7.useMemo(() => {
@@ -3383,7 +3409,8 @@ function PricingCardBody(props) {
           {
             layout,
             tokens,
-            prefersReducedMotion
+            prefersReducedMotion,
+            cardRadius
           }
         )
       }
@@ -3455,7 +3482,8 @@ function PricingCardBody(props) {
           ctaTextProp: ctaTextEffective,
           featuredOverride: featuredOfferingId,
           onCtaClick: handleCtaClick,
-          intlOverride
+          intlOverride,
+          cardRadius
         }
       )
     }
@@ -3470,7 +3498,8 @@ function PlanGrid({
   ctaTextProp,
   featuredOverride,
   onCtaClick,
-  intlOverride
+  intlOverride,
+  cardRadius
 }) {
   const isHorizontal = layout === "horizontal";
   const gridStyle2 = isHorizontal ? {
@@ -3493,7 +3522,8 @@ function PlanGrid({
       ctaTextProp,
       featured: offeringIsFeatured(o, featuredOverride),
       onCtaClick,
-      intlOverride
+      intlOverride,
+      cardRadius
     },
     o.offeringId
   )) });
@@ -3506,14 +3536,10 @@ function PlanCard({
   ctaTextProp,
   featured,
   onCtaClick,
-  intlOverride
+  intlOverride,
+  cardRadius
 }) {
-  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);
@@ -3522,7 +3548,7 @@ function PlanCard({
     display: "flex",
     flexDirection: "column",
     padding: 24,
-    borderRadius: 12,
+    borderRadius: cardRadius,
     border: featured ? `2px solid ${tokens.primary}` : `1px solid ${tokens.border}`,
     background: tokens.bg,
     color: tokens.text,
@@ -3534,7 +3560,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: [
@@ -3599,14 +3625,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
@@ -3764,6 +3790,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",
               {
@@ -3793,13 +3820,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",
@@ -3812,7 +3846,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")
                     }
                   )
                 ] })
@@ -3864,7 +3898,8 @@ function cellAria(label, feature) {
 function LoadingSkeleton({
   layout,
   tokens,
-  prefersReducedMotion
+  prefersReducedMotion,
+  cardRadius
 }) {
   const shimmerStyle = prefersReducedMotion ? { background: tokens.border, opacity: 0.6 } : {
     background: `linear-gradient(90deg, ${tokens.border} 0%, ${tokens.bg} 50%, ${tokens.border} 100%)`,
@@ -3897,7 +3932,7 @@ function LoadingSkeleton({
             "aria-hidden": "true",
             style: {
               padding: 24,
-              borderRadius: 12,
+              borderRadius: cardRadius,
               border: `1px solid ${tokens.border}`,
               background: tokens.bg,
               minHeight: 280,