@schematichq/schematic-components 1.5.0 → 1.6.0

package/dist/schematic-components.cjs.js

@@ -6805,6 +6805,7 @@ var en_default = {
     Expired: "Expired",
     "Expires in X months": "Expires in {{months}} mo",
     Expires: "Expires {{date}}",
+    Free: "Free",
     "Hide all": "Hide all",
     "Hide balance details": "Hide balance details",
     "Hide details": "Hide details",
@@ -7096,7 +7097,7 @@ var import_debounce = __toESM(require_debounce());
 var import_merge2 = __toESM(require_merge());
 var import_react12 = require("react");
 
-// node_modules/uuid/dist/esm-browser/stringify.js
+// node_modules/uuid/dist-browser/stringify.js
 var byteToHex = [];
 for (let i2 = 0; i2 < 256; ++i2) {
   byteToHex.push((i2 + 256).toString(16).slice(1));
@@ -7105,7 +7106,7 @@ function unsafeStringify(arr, offset = 0) {
   return (byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + "-" + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + "-" + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + "-" + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + "-" + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]]).toLowerCase();
 }
 
-// node_modules/uuid/dist/esm-browser/rng.js
+// node_modules/uuid/dist-browser/rng.js
 var getRandomValues;
 var rnds8 = new Uint8Array(16);
 function rng() {
@@ -7118,15 +7119,12 @@ function rng() {
   return getRandomValues(rnds8);
 }
 
-// node_modules/uuid/dist/esm-browser/native.js
+// node_modules/uuid/dist-browser/native.js
 var randomUUID = typeof crypto !== "undefined" && crypto.randomUUID && crypto.randomUUID.bind(crypto);
 var native_default = { randomUUID };
 
-// node_modules/uuid/dist/esm-browser/v4.js
-function v4(options, buf, offset) {
-  if (native_default.randomUUID && !buf && !options) {
-    return native_default.randomUUID();
-  }
+// node_modules/uuid/dist-browser/v4.js
+function _v4(options, buf, offset) {
   options = options || {};
   const rnds = options.random ?? options.rng?.() ?? rng();
   if (rnds.length < 16) {
@@ -7146,6 +7144,12 @@ function v4(options, buf, offset) {
   }
   return unsafeStringify(rnds);
 }
+function v4(options, buf, offset) {
+  if (native_default.randomUUID && !buf && !options) {
+    return native_default.randomUUID();
+  }
+  return _v4(options, buf, offset);
+}
 var v4_default = v4;
 
 // src/api/checkoutexternal/runtime.ts
@@ -8804,6 +8808,7 @@ function ComponentHydrateResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     defaultPlan: json["default_plan"] == null ? void 0 : PlanDetailResponseDataFromJSON(json["default_plan"]),
     featureUsage: json["feature_usage"] == null ? void 0 : FeatureUsageDetailResponseDataFromJSON(json["feature_usage"]),
     showPeriodToggle: json["show_period_toggle"],
+    showZeroPriceAsFree: json["show_zero_price_as_free"],
     stripeEmbed: json["stripe_embed"] == null ? void 0 : StripeEmbedInfoFromJSON(json["stripe_embed"]),
     subscription: json["subscription"] == null ? void 0 : CompanySubscriptionResponseDataFromJSON(json["subscription"]),
     trialPaymentMethodRequired: json["trial_payment_method_required"] == null ? void 0 : json["trial_payment_method_required"],
@@ -10356,7 +10361,8 @@ function PublicPlansResponseDataFromJSONTyped(json, ignoreDiscriminator) {
       CompatiblePlansFromJSON2
     ),
     capabilities: json["capabilities"] == null ? void 0 : ComponentCapabilitiesFromJSON2(json["capabilities"]),
-    showPeriodToggle: json["show_period_toggle"]
+    showPeriodToggle: json["show_period_toggle"],
+    showZeroPriceAsFree: json["show_zero_price_as_free"]
   };
 }
 
@@ -10554,7 +10560,7 @@ var EmbedProvider = ({
   });
   const customHeaders = (0, import_react12.useMemo)(
     () => ({
-      "X-Schematic-Components-Version": "1.5.0",
+      "X-Schematic-Components-Version": "1.6.0",
       "X-Schematic-Session-ID": sessionIdRef.current
     }),
     []
@@ -12779,6 +12785,10 @@ var Sidebar = ({
     () => creditBundles.filter((bundle) => bundle.count > 0),
     [creditBundles]
   );
+  const discountApplied = (0, import_react27.useMemo)(
+    () => promoCode && (amountOff > 0 || percentOff > 0),
+    [promoCode, amountOff, percentOff]
+  );
   const handleCheckout = (0, import_react27.useCallback)(async () => {
     const planId = selectedPlan?.id;
     const priceId = (planPeriod === "year" ? selectedPlan?.yearlyPrice : selectedPlan?.monthlyPrice)?.id;
@@ -12845,7 +12855,7 @@ var Sidebar = ({
           },
           []
         ),
-        skipTrial: !willTrialWithoutPaymentMethod,
+        skipTrial: !shouldTrial,
         ...paymentMethodId && { paymentMethodId },
         ...promoCode && { promoCode }
       });
@@ -12871,7 +12881,7 @@ var Sidebar = ({
     setLayout,
     payInAdvanceEntitlements,
     addOnUsageBasedEntitlements,
-    willTrialWithoutPaymentMethod,
+    shouldTrial,
     promoCode
   ]);
   const handleUnsubscribe = (0, import_react27.useCallback)(async () => {
@@ -13248,7 +13258,7 @@ var Sidebar = ({
             $width: "100%",
             $padding: "1.5rem",
             children: [
-              promoCode && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+              discountApplied && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
                 Flex,
                 {
                   $justifyContent: "space-between",
@@ -13920,10 +13930,18 @@ var Plan = ({
   const [entitlementCounts, setEntitlementCounts] = (0, import_react29.useState)(
     () => plans.reduce(entitlementCountsReducer, {})
   );
-  const isTrialing = (0, import_react29.useMemo)(
-    () => isCheckoutData(data) && data.subscription?.status === "trialing",
-    [data]
-  );
+  const { isTrialing, showZeroPriceAsFree } = (0, import_react29.useMemo)(() => {
+    if (isCheckoutData(data)) {
+      return {
+        isTrialing: data.subscription?.status === "trialing",
+        showZeroPriceAsFree: data.showZeroPriceAsFree
+      };
+    }
+    return {
+      isTrialing: false,
+      showZeroPriceAsFree: false
+    };
+  }, [data]);
   const handleToggleShowAll = (id) => {
     setEntitlementCounts((prev2) => {
       const count = prev2[id] ? { ...prev2[id] } : void 0;
@@ -13957,7 +13975,8 @@ var Plan = ({
         const hasUsageBasedEntitlements = plan.entitlements.some(
           (entitlement) => !!entitlement.priceBehavior
         );
-        const isUsageBasedPlan = planPrice === 0 && hasUsageBasedEntitlements;
+        const isFreePlan = planPrice === 0;
+        const isUsageBasedPlan = isFreePlan && hasUsageBasedEntitlements;
         const headerPriceFontStyle = settings.theme.typography.heading2;
         const count = entitlementCounts[plan.id];
         const isExpanded = count && count.limit > VISIBLE_ENTITLEMENT_COUNT;
@@ -14002,10 +14021,10 @@ var Plan = ({
                           $size: headerPriceFontStyle.fontSize,
                           $weight: headerPriceFontStyle.fontWeight,
                           $color: headerPriceFontStyle.color,
-                          children: plan.custom ? plan.customPlanConfig?.priceText ? plan.customPlanConfig.priceText : t2("Custom price") : isUsageBasedPlan ? t2("Usage-based") : formatCurrency(planPrice ?? 0, planCurrency)
+                          children: plan.custom ? plan.customPlanConfig?.priceText ? plan.customPlanConfig.priceText : t2("Custom price") : isUsageBasedPlan ? t2("Usage-based") : isFreePlan && showZeroPriceAsFree ? t2("Free") : formatCurrency(planPrice ?? 0, planCurrency)
                         }
                       ),
-                      !plan.custom && !isUsageBasedPlan && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+                      !plan.custom && !isFreePlan && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
                         Text,
                         {
                           display: "heading2",
@@ -16826,7 +16845,7 @@ var MeteredFeatures = (0, import_react43.forwardRef)(({ className, ...rest }, re
       )
     );
   }, []);
-  const shouldShowFeatures = meteredFeatures.length > 0;
+  const shouldShowFeatures = meteredFeatures.length > 0 || creditGroups.length > 0;
   if (!shouldShowFeatures) {
     return null;
   }
@@ -17981,6 +18000,7 @@ var PlanManager = (0, import_react48.forwardRef)(({ children, className, portal,
     canCheckout,
     defaultPlan,
     featureUsage,
+    showZeroPriceAsFree,
     trialPaymentMethodRequired
   } = (0, import_react48.useMemo)(() => {
     if (isCheckoutData(data)) {
@@ -17991,6 +18011,7 @@ var PlanManager = (0, import_react48.forwardRef)(({ children, className, portal,
         capabilities,
         defaultPlan: defaultPlan2,
         featureUsage: featureUsage2,
+        showZeroPriceAsFree: showZeroPriceAsFree2,
         trialPaymentMethodRequired: trialPaymentMethodRequired2
       } = data;
       const creditGroups2 = groupCreditGrants(creditGrants, {
@@ -18020,6 +18041,7 @@ var PlanManager = (0, import_react48.forwardRef)(({ children, className, portal,
         canCheckout: capabilities?.checkout ?? true,
         defaultPlan: defaultPlan2,
         featureUsage: featureUsage2?.features || [],
+        showZeroPriceAsFree: showZeroPriceAsFree2,
         trialPaymentMethodRequired: trialPaymentMethodRequired2
       };
     }
@@ -18032,6 +18054,7 @@ var PlanManager = (0, import_react48.forwardRef)(({ children, className, portal,
       canCheckout: false,
       defaultPlan: void 0,
       featureUsage: [],
+      showZeroPriceAsFree: false,
       trialPaymentMethodRequired: false
     };
   }, [data]);
@@ -18056,7 +18079,8 @@ var PlanManager = (0, import_react48.forwardRef)(({ children, className, portal,
       willSubscriptionCancel: willSubscriptionCancel2
     };
   }, [billingSubscription]);
-  const isUsageBasedPlan = currentPlan?.planPrice === 0 && usageBasedEntitlements.length > 0;
+  const isFreePlan = currentPlan?.planPrice === 0;
+  const isUsageBasedPlan = isFreePlan && usageBasedEntitlements.length > 0;
   return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
     isTrialSubscription && !willSubscriptionCancel ? /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
       Notice,
@@ -18130,13 +18154,13 @@ var PlanManager = (0, import_react48.forwardRef)(({ children, className, portal,
                     Text,
                     {
                       display: isUsageBasedPlan ? "heading3" : props.header.price.fontStyle,
-                      children: isUsageBasedPlan ? t2("Usage-based") : formatCurrency(
+                      children: isUsageBasedPlan ? t2("Usage-based") : isFreePlan && showZeroPriceAsFree ? t2("Free") : formatCurrency(
                         currentPlan.planPrice,
                         subscriptionCurrency
                       )
                     }
                   ),
-                  !isUsageBasedPlan && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Text, { display: props.header.price.fontStyle, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("sub", { children: [
+                  !isFreePlan && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Text, { display: props.header.price.fontStyle, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("sub", { children: [
                     "/",
                     shortenPeriod(currentPlan.planPeriod)
                   ] }) })
@@ -18695,7 +18719,8 @@ var Plan2 = ({
     isTrialSubscription,
     willSubscriptionCancel,
     isStandalone,
-    showCallToAction
+    showCallToAction,
+    showZeroPriceAsFree
   } = (0, import_react50.useMemo)(() => {
     if (isCheckoutData(data)) {
       const billingSubscription = data.company?.billingSubscription;
@@ -18707,7 +18732,8 @@ var Plan2 = ({
         isTrialSubscription: isTrialSubscription2,
         willSubscriptionCancel: willSubscriptionCancel2,
         isStandalone: false,
-        showCallToAction: true
+        showCallToAction: true,
+        showZeroPriceAsFree: data.showZeroPriceAsFree
       };
     }
     return {
@@ -18716,7 +18742,8 @@ var Plan2 = ({
       isTrialSubscription: false,
       willSubscriptionCancel: false,
       isStandalone: true,
-      showCallToAction: typeof sharedProps.callToActionUrl === "string" || typeof sharedProps.onCallToAction === "function"
+      showCallToAction: typeof sharedProps.callToActionUrl === "string" || typeof sharedProps.onCallToAction === "function",
+      showZeroPriceAsFree: false
     };
   }, [data, sharedProps.callToActionUrl, sharedProps.onCallToAction]);
   const callToActionTarget = (0, import_react50.useMemo)(() => {
@@ -18744,7 +18771,8 @@ var Plan2 = ({
   const hasUsageBasedEntitlements = plan.entitlements.some(
     (entitlement) => !!entitlement.priceBehavior
   );
-  const isUsageBasedPlan = planPrice === 0 && hasUsageBasedEntitlements;
+  const isFreePlan = planPrice === 0;
+  const isUsageBasedPlan = isFreePlan && hasUsageBasedEntitlements;
   const headerPriceFontStyle = settings.theme.typography[layout.plans.name.fontStyle];
   const count = entitlementCounts[plan.id];
   const isExpanded = count && count.limit > VISIBLE_ENTITLEMENT_COUNT;
@@ -18786,8 +18814,8 @@ var Plan2 = ({
                   $weight: headerPriceFontStyle.fontWeight,
                   $color: headerPriceFontStyle.color,
                   children: [
-                    plan.custom ? plan.customPlanConfig?.priceText ? plan.customPlanConfig.priceText : t2("Custom price") : isUsageBasedPlan ? t2("Usage-based") : formatCurrency(planPrice ?? 0, planCurrency),
-                    !plan.custom && !isUsageBasedPlan && /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("sub", { children: [
+                    plan.custom ? plan.customPlanConfig?.priceText ? plan.customPlanConfig.priceText : t2("Custom price") : isUsageBasedPlan ? t2("Usage-based") : isFreePlan && showZeroPriceAsFree ? t2("Free") : formatCurrency(planPrice ?? 0, planCurrency),
+                    !plan.custom && !isFreePlan && /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("sub", { children: [
                       "/",
                       selectedPeriod
                     ] })

package/dist/schematic-components.d.ts

@@ -2909,6 +2909,12 @@ declare interface ComponentHydrateResponseData {
      * @memberof ComponentHydrateResponseData
      */
     showPeriodToggle: boolean;
+    /**
+     *
+     * @type {boolean}
+     * @memberof ComponentHydrateResponseData
+     */
+    showZeroPriceAsFree: boolean;
     /**
      *
      * @type {StripeEmbedInfo}
@@ -6854,6 +6860,12 @@ declare interface PublicPlansResponseData {
      * @memberof PublicPlansResponseData
      */
     showPeriodToggle: boolean;
+    /**
+     *
+     * @type {boolean}
+     * @memberof PublicPlansResponseData
+     */
+    showZeroPriceAsFree: boolean;
 }
 
 declare interface RequestContext {

package/dist/schematic-components.esm.js

@@ -6739,6 +6739,7 @@ var en_default = {
     Expired: "Expired",
     "Expires in X months": "Expires in {{months}} mo",
     Expires: "Expires {{date}}",
+    Free: "Free",
     "Hide all": "Hide all",
     "Hide balance details": "Hide balance details",
     "Hide details": "Hide details",
@@ -7037,7 +7038,7 @@ import {
   useState as useState2
 } from "react";
 
-// node_modules/uuid/dist/esm-browser/stringify.js
+// node_modules/uuid/dist-browser/stringify.js
 var byteToHex = [];
 for (let i2 = 0; i2 < 256; ++i2) {
   byteToHex.push((i2 + 256).toString(16).slice(1));
@@ -7046,7 +7047,7 @@ function unsafeStringify(arr, offset = 0) {
   return (byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + "-" + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + "-" + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + "-" + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + "-" + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]]).toLowerCase();
 }
 
-// node_modules/uuid/dist/esm-browser/rng.js
+// node_modules/uuid/dist-browser/rng.js
 var getRandomValues;
 var rnds8 = new Uint8Array(16);
 function rng() {
@@ -7059,15 +7060,12 @@ function rng() {
   return getRandomValues(rnds8);
 }
 
-// node_modules/uuid/dist/esm-browser/native.js
+// node_modules/uuid/dist-browser/native.js
 var randomUUID = typeof crypto !== "undefined" && crypto.randomUUID && crypto.randomUUID.bind(crypto);
 var native_default = { randomUUID };
 
-// node_modules/uuid/dist/esm-browser/v4.js
-function v4(options, buf, offset) {
-  if (native_default.randomUUID && !buf && !options) {
-    return native_default.randomUUID();
-  }
+// node_modules/uuid/dist-browser/v4.js
+function _v4(options, buf, offset) {
   options = options || {};
   const rnds = options.random ?? options.rng?.() ?? rng();
   if (rnds.length < 16) {
@@ -7087,6 +7085,12 @@ function v4(options, buf, offset) {
   }
   return unsafeStringify(rnds);
 }
+function v4(options, buf, offset) {
+  if (native_default.randomUUID && !buf && !options) {
+    return native_default.randomUUID();
+  }
+  return _v4(options, buf, offset);
+}
 var v4_default = v4;
 
 // src/api/checkoutexternal/runtime.ts
@@ -8745,6 +8749,7 @@ function ComponentHydrateResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     defaultPlan: json["default_plan"] == null ? void 0 : PlanDetailResponseDataFromJSON(json["default_plan"]),
     featureUsage: json["feature_usage"] == null ? void 0 : FeatureUsageDetailResponseDataFromJSON(json["feature_usage"]),
     showPeriodToggle: json["show_period_toggle"],
+    showZeroPriceAsFree: json["show_zero_price_as_free"],
     stripeEmbed: json["stripe_embed"] == null ? void 0 : StripeEmbedInfoFromJSON(json["stripe_embed"]),
     subscription: json["subscription"] == null ? void 0 : CompanySubscriptionResponseDataFromJSON(json["subscription"]),
     trialPaymentMethodRequired: json["trial_payment_method_required"] == null ? void 0 : json["trial_payment_method_required"],
@@ -10297,7 +10302,8 @@ function PublicPlansResponseDataFromJSONTyped(json, ignoreDiscriminator) {
       CompatiblePlansFromJSON2
     ),
     capabilities: json["capabilities"] == null ? void 0 : ComponentCapabilitiesFromJSON2(json["capabilities"]),
-    showPeriodToggle: json["show_period_toggle"]
+    showPeriodToggle: json["show_period_toggle"],
+    showZeroPriceAsFree: json["show_zero_price_as_free"]
   };
 }
 
@@ -10495,7 +10501,7 @@ var EmbedProvider = ({
   });
   const customHeaders = useMemo3(
     () => ({
-      "X-Schematic-Components-Version": "1.5.0",
+      "X-Schematic-Components-Version": "1.6.0",
       "X-Schematic-Session-ID": sessionIdRef.current
     }),
     []
@@ -12730,6 +12736,10 @@ var Sidebar = ({
     () => creditBundles.filter((bundle) => bundle.count > 0),
     [creditBundles]
   );
+  const discountApplied = useMemo7(
+    () => promoCode && (amountOff > 0 || percentOff > 0),
+    [promoCode, amountOff, percentOff]
+  );
   const handleCheckout = useCallback8(async () => {
     const planId = selectedPlan?.id;
     const priceId = (planPeriod === "year" ? selectedPlan?.yearlyPrice : selectedPlan?.monthlyPrice)?.id;
@@ -12796,7 +12806,7 @@ var Sidebar = ({
           },
           []
         ),
-        skipTrial: !willTrialWithoutPaymentMethod,
+        skipTrial: !shouldTrial,
         ...paymentMethodId && { paymentMethodId },
         ...promoCode && { promoCode }
       });
@@ -12822,7 +12832,7 @@ var Sidebar = ({
     setLayout,
     payInAdvanceEntitlements,
     addOnUsageBasedEntitlements,
-    willTrialWithoutPaymentMethod,
+    shouldTrial,
     promoCode
   ]);
   const handleUnsubscribe = useCallback8(async () => {
@@ -13199,7 +13209,7 @@ var Sidebar = ({
             $width: "100%",
             $padding: "1.5rem",
             children: [
-              promoCode && /* @__PURE__ */ jsxs9(
+              discountApplied && /* @__PURE__ */ jsxs9(
                 Flex,
                 {
                   $justifyContent: "space-between",
@@ -13871,10 +13881,18 @@ var Plan = ({
   const [entitlementCounts, setEntitlementCounts] = useState8(
     () => plans.reduce(entitlementCountsReducer, {})
   );
-  const isTrialing = useMemo8(
-    () => isCheckoutData(data) && data.subscription?.status === "trialing",
-    [data]
-  );
+  const { isTrialing, showZeroPriceAsFree } = useMemo8(() => {
+    if (isCheckoutData(data)) {
+      return {
+        isTrialing: data.subscription?.status === "trialing",
+        showZeroPriceAsFree: data.showZeroPriceAsFree
+      };
+    }
+    return {
+      isTrialing: false,
+      showZeroPriceAsFree: false
+    };
+  }, [data]);
   const handleToggleShowAll = (id) => {
     setEntitlementCounts((prev2) => {
       const count = prev2[id] ? { ...prev2[id] } : void 0;
@@ -13908,7 +13926,8 @@ var Plan = ({
         const hasUsageBasedEntitlements = plan.entitlements.some(
           (entitlement) => !!entitlement.priceBehavior
         );
-        const isUsageBasedPlan = planPrice === 0 && hasUsageBasedEntitlements;
+        const isFreePlan = planPrice === 0;
+        const isUsageBasedPlan = isFreePlan && hasUsageBasedEntitlements;
         const headerPriceFontStyle = settings.theme.typography.heading2;
         const count = entitlementCounts[plan.id];
         const isExpanded = count && count.limit > VISIBLE_ENTITLEMENT_COUNT;
@@ -13953,10 +13972,10 @@ var Plan = ({
                           $size: headerPriceFontStyle.fontSize,
                           $weight: headerPriceFontStyle.fontWeight,
                           $color: headerPriceFontStyle.color,
-                          children: plan.custom ? plan.customPlanConfig?.priceText ? plan.customPlanConfig.priceText : t2("Custom price") : isUsageBasedPlan ? t2("Usage-based") : formatCurrency(planPrice ?? 0, planCurrency)
+                          children: plan.custom ? plan.customPlanConfig?.priceText ? plan.customPlanConfig.priceText : t2("Custom price") : isUsageBasedPlan ? t2("Usage-based") : isFreePlan && showZeroPriceAsFree ? t2("Free") : formatCurrency(planPrice ?? 0, planCurrency)
                         }
                       ),
-                      !plan.custom && !isUsageBasedPlan && /* @__PURE__ */ jsxs14(
+                      !plan.custom && !isFreePlan && /* @__PURE__ */ jsxs14(
                         Text,
                         {
                           display: "heading2",
@@ -16782,7 +16801,7 @@ var MeteredFeatures = forwardRef9(({ className, ...rest }, ref) => {
       )
     );
   }, []);
-  const shouldShowFeatures = meteredFeatures.length > 0;
+  const shouldShowFeatures = meteredFeatures.length > 0 || creditGroups.length > 0;
   if (!shouldShowFeatures) {
     return null;
   }
@@ -17937,6 +17956,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
     canCheckout,
     defaultPlan,
     featureUsage,
+    showZeroPriceAsFree,
     trialPaymentMethodRequired
   } = useMemo23(() => {
     if (isCheckoutData(data)) {
@@ -17947,6 +17967,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
         capabilities,
         defaultPlan: defaultPlan2,
         featureUsage: featureUsage2,
+        showZeroPriceAsFree: showZeroPriceAsFree2,
         trialPaymentMethodRequired: trialPaymentMethodRequired2
       } = data;
       const creditGroups2 = groupCreditGrants(creditGrants, {
@@ -17976,6 +17997,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
         canCheckout: capabilities?.checkout ?? true,
         defaultPlan: defaultPlan2,
         featureUsage: featureUsage2?.features || [],
+        showZeroPriceAsFree: showZeroPriceAsFree2,
         trialPaymentMethodRequired: trialPaymentMethodRequired2
       };
     }
@@ -17988,6 +18010,7 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
       canCheckout: false,
       defaultPlan: void 0,
       featureUsage: [],
+      showZeroPriceAsFree: false,
       trialPaymentMethodRequired: false
     };
   }, [data]);
@@ -18012,7 +18035,8 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
       willSubscriptionCancel: willSubscriptionCancel2
     };
   }, [billingSubscription]);
-  const isUsageBasedPlan = currentPlan?.planPrice === 0 && usageBasedEntitlements.length > 0;
+  const isFreePlan = currentPlan?.planPrice === 0;
+  const isUsageBasedPlan = isFreePlan && usageBasedEntitlements.length > 0;
   return /* @__PURE__ */ jsxs34(Fragment20, { children: [
     isTrialSubscription && !willSubscriptionCancel ? /* @__PURE__ */ jsxs34(
       Notice,
@@ -18086,13 +18110,13 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
                     Text,
                     {
                       display: isUsageBasedPlan ? "heading3" : props.header.price.fontStyle,
-                      children: isUsageBasedPlan ? t2("Usage-based") : formatCurrency(
+                      children: isUsageBasedPlan ? t2("Usage-based") : isFreePlan && showZeroPriceAsFree ? t2("Free") : formatCurrency(
                         currentPlan.planPrice,
                         subscriptionCurrency
                       )
                     }
                   ),
-                  !isUsageBasedPlan && /* @__PURE__ */ jsx43(Text, { display: props.header.price.fontStyle, children: /* @__PURE__ */ jsxs34("sub", { children: [
+                  !isFreePlan && /* @__PURE__ */ jsx43(Text, { display: props.header.price.fontStyle, children: /* @__PURE__ */ jsxs34("sub", { children: [
                     "/",
                     shortenPeriod(currentPlan.planPeriod)
                   ] }) })
@@ -18657,7 +18681,8 @@ var Plan2 = ({
     isTrialSubscription,
     willSubscriptionCancel,
     isStandalone,
-    showCallToAction
+    showCallToAction,
+    showZeroPriceAsFree
   } = useMemo25(() => {
     if (isCheckoutData(data)) {
       const billingSubscription = data.company?.billingSubscription;
@@ -18669,7 +18694,8 @@ var Plan2 = ({
         isTrialSubscription: isTrialSubscription2,
         willSubscriptionCancel: willSubscriptionCancel2,
         isStandalone: false,
-        showCallToAction: true
+        showCallToAction: true,
+        showZeroPriceAsFree: data.showZeroPriceAsFree
       };
     }
     return {
@@ -18678,7 +18704,8 @@ var Plan2 = ({
       isTrialSubscription: false,
       willSubscriptionCancel: false,
       isStandalone: true,
-      showCallToAction: typeof sharedProps.callToActionUrl === "string" || typeof sharedProps.onCallToAction === "function"
+      showCallToAction: typeof sharedProps.callToActionUrl === "string" || typeof sharedProps.onCallToAction === "function",
+      showZeroPriceAsFree: false
     };
   }, [data, sharedProps.callToActionUrl, sharedProps.onCallToAction]);
   const callToActionTarget = useMemo25(() => {
@@ -18706,7 +18733,8 @@ var Plan2 = ({
   const hasUsageBasedEntitlements = plan.entitlements.some(
     (entitlement) => !!entitlement.priceBehavior
   );
-  const isUsageBasedPlan = planPrice === 0 && hasUsageBasedEntitlements;
+  const isFreePlan = planPrice === 0;
+  const isUsageBasedPlan = isFreePlan && hasUsageBasedEntitlements;
   const headerPriceFontStyle = settings.theme.typography[layout.plans.name.fontStyle];
   const count = entitlementCounts[plan.id];
   const isExpanded = count && count.limit > VISIBLE_ENTITLEMENT_COUNT;
@@ -18748,8 +18776,8 @@ var Plan2 = ({
                   $weight: headerPriceFontStyle.fontWeight,
                   $color: headerPriceFontStyle.color,
                   children: [
-                    plan.custom ? plan.customPlanConfig?.priceText ? plan.customPlanConfig.priceText : t2("Custom price") : isUsageBasedPlan ? t2("Usage-based") : formatCurrency(planPrice ?? 0, planCurrency),
-                    !plan.custom && !isUsageBasedPlan && /* @__PURE__ */ jsxs37("sub", { children: [
+                    plan.custom ? plan.customPlanConfig?.priceText ? plan.customPlanConfig.priceText : t2("Custom price") : isUsageBasedPlan ? t2("Usage-based") : isFreePlan && showZeroPriceAsFree ? t2("Free") : formatCurrency(planPrice ?? 0, planCurrency),
+                    !plan.custom && !isFreePlan && /* @__PURE__ */ jsxs37("sub", { children: [
                       "/",
                       selectedPeriod
                     ] })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schematichq/schematic-components",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "main": "dist/schematic-components.cjs.js",
   "module": "dist/schematic-components.esm.js",
   "types": "dist/schematic-components.d.ts",
@@ -34,15 +34,15 @@
   "dependencies": {
     "@schematichq/schematic-icons": "^0.5.2",
     "@stripe/stripe-js": "^7.9.0",
-    "i18next": "^25.5.0",
+    "i18next": "^25.5.2",
     "lodash": "^4.17.21",
     "pako": "^2.1.0",
     "react-i18next": "^15.7.3",
     "styled-components": "^6.1.19",
-    "uuid": "^11.1.0"
+    "uuid": "^12.0.0"
   },
   "devDependencies": {
-    "@eslint/js": "^9.34.0",
+    "@eslint/js": "^9.35.0",
     "@eslint/json": "^0.13.2",
     "@eslint/markdown": "^7.2.0",
     "@microsoft/api-extractor": "^7.52.11",
@@ -54,7 +54,7 @@
     "@types/react": "^19.1.12",
     "@types/react-dom": "^19.1.9",
     "esbuild": "^0.25.9",
-    "eslint": "^9.34.0",
+    "eslint": "^9.35.0",
     "eslint-import-resolver-typescript": "^4.4.4",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-react": "^7.37.5",