@schematichq/schematic-components 0.8.0 → 0.8.1

package/dist/schematic-components.cjs.js

@@ -11834,6 +11834,23 @@ function ListInvoicesResponseFromJSONTyped(json, ignoreDiscriminator) {
   };
 }
 
+// src/api/models/PreviewSubscriptionUpcomingInvoiceLineItems.ts
+function PreviewSubscriptionUpcomingInvoiceLineItemsFromJSON(json) {
+  return PreviewSubscriptionUpcomingInvoiceLineItemsFromJSONTyped(json, false);
+}
+function PreviewSubscriptionUpcomingInvoiceLineItemsFromJSONTyped(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    amount: json["amount"],
+    description: json["description"],
+    priceId: json["price_id"],
+    proration: json["proration"],
+    quantity: json["quantity"]
+  };
+}
+
 // src/api/models/PreviewSubscriptionFinanceResponseData.ts
 function PreviewSubscriptionFinanceResponseDataFromJSON(json) {
   return PreviewSubscriptionFinanceResponseDataFromJSONTyped(json, false);
@@ -11850,7 +11867,8 @@ function PreviewSubscriptionFinanceResponseDataFromJSONTyped(json, ignoreDiscrim
     periodStart: new Date(json["period_start"]),
     promoCodeApplied: json["promo_code_applied"],
     proration: json["proration"],
-    trialEnd: json["trial_end"] == null ? void 0 : new Date(json["trial_end"])
+    trialEnd: json["trial_end"] == null ? void 0 : new Date(json["trial_end"]),
+    upcomingInvoiceLineItems: json["upcoming_invoice_line_items"].map(PreviewSubscriptionUpcomingInvoiceLineItemsFromJSON)
   };
 }
 
@@ -13143,7 +13161,7 @@ var EmbedProvider = ({
   (0, import_react11.useEffect)(() => {
     if (accessToken) {
       const { headers = {} } = apiConfig ?? {};
-      headers["X-Schematic-Components-Version"] = "0.8.0";
+      headers["X-Schematic-Components-Version"] = "0.8.1";
       headers["X-Schematic-Session-ID"] = sessionIdRef.current;
       const config = new Configuration({
         ...apiConfig,
@@ -13223,7 +13241,7 @@ function getBillingPrice(billingPrice) {
   if (!billingPrice) {
     return;
   }
-  const price = typeof billingPrice.priceDecimal === "string" ? parseFloat(billingPrice.priceDecimal) : billingPrice.price;
+  const price = typeof billingPrice.priceDecimal === "string" ? Number(billingPrice.priceDecimal) : billingPrice.price;
   return { ...billingPrice, price };
 }
 
@@ -13378,12 +13396,14 @@ function formatCurrency(amount, currency) {
       currency: resolvedCurrency,
       ...hasManySignificantDigits && {
         minimumSignificantDigits: 1
-      }
+      },
+      maximumSignificantDigits: 12
     }).format(dollars);
   } catch (error) {
     console.error("Error formatting currency", error);
     return new Intl.NumberFormat("en-US", {
       style: "currency",
+      maximumSignificantDigits: 12,
       currency: resolvedCurrency
     }).format(amount / 100);
   }
@@ -16714,7 +16734,7 @@ var Plan = ({
                           const entitlementCurrency = entitlementPriceObject?.currency;
                           if (entitlement.priceBehavior === "overage" && entitlementPriceObject) {
                             const { priceTier } = entitlementPriceObject;
-                            if (priceTier.length) {
+                            if (priceTier.length > 1) {
                               const lastTier = priceTier[priceTier.length - 1];
                               const { perUnitPrice, perUnitPriceDecimal } = lastTier;
                               entitlementPrice = perUnitPriceDecimal ? Number(perUnitPriceDecimal) : perUnitPrice ?? 0;
@@ -18299,11 +18319,21 @@ var Details = ({
   const { t: t2 } = useTranslation();
   const theme = nt();
   const { data } = useEmbed();
-  const { price, currency } = (0, import_react32.useMemo)(() => {
-    const { price: entitlementPrice, currency: entitlementCurrency } = getBillingPrice(
+  const { price, priceDecimal, priceTier, currency } = (0, import_react32.useMemo)(() => {
+    const {
+      price: entitlementPrice,
+      priceDecimal: entitlementPriceDecimal,
+      priceTier: entitlementPriceTier,
+      currency: entitlementCurrency
+    } = getBillingPrice(
       data.company?.plan?.planPeriod === "year" ? yearlyUsageBasedPrice : monthlyUsageBasedPrice
     ) || {};
-    return { price: entitlementPrice, currency: entitlementCurrency };
+    return {
+      price: entitlementPrice,
+      priceDecimal: entitlementPriceDecimal,
+      priceTier: entitlementPriceTier,
+      currency: entitlementCurrency
+    };
   }, [
     data.company?.plan?.planPeriod,
     monthlyUsageBasedPrice,
@@ -18345,9 +18375,18 @@ var Details = ({
       } else if (priceBehavior === "pay_as_you_go" && typeof price === "number" && typeof usage === "number") {
         acc += ` \u2022 ${formatCurrency(price * usage, currency)}`;
       } else if (priceBehavior === "overage" && typeof price === "number" && typeof usage === "number" && typeof softLimit === "number") {
-        const cost = price * (usage - softLimit);
+        let overagePrice = price ?? priceDecimal;
+        if (priceTier?.length === 2) {
+          const lastTier = priceTier[priceTier.length - 1];
+          if (lastTier.perUnitPriceDecimal) {
+            overagePrice = Number(lastTier.perUnitPriceDecimal);
+          } else {
+            overagePrice = lastTier.perUnitPrice ?? 0;
+          }
+        }
+        const cost = usage - softLimit < 0 ? 0 : overagePrice / 100 * (usage - softLimit);
         const period = feature.featureType === "event" && typeof data.company?.plan?.planPeriod === "string" ? `/${shortenPeriod(data.company.plan.planPeriod)}` : "";
-        acc += cost > 0 ? ` \u2022 ${t2("Overage")}: ${formatCurrency(cost)}${period}` : ` \u2022 ${`${formatCurrency(price)}/${getFeatureName(feature, 1)}`} ${t2("overage fee")}`;
+        acc += cost > 0 ? ` \u2022 ${t2("Overage")}: ${formatCurrency(cost)}${period}` : ` \u2022 ${`${formatCurrency(overagePrice)}/${getFeatureName(feature, 1)}`} ${t2("overage fee")}`;
       }
       return acc;
     }
@@ -18366,6 +18405,8 @@ var Details = ({
     priceBehavior,
     allocation,
     price,
+    priceDecimal,
+    priceTier,
     currency,
     softLimit,
     usage
@@ -18864,17 +18905,6 @@ var MeteredFeatures = (0, import_react35.forwardRef)(({ className, ...rest }, re
           }
         }
       }
-      if (isOverage) {
-        const productId = (yearlyUsageBasedPrice ?? monthlyUsageBasedPrice).productId;
-        if (productId) {
-          const products = data?.subscription?.products ?? [];
-          const product = products.find((p2) => p2.id === productId);
-          if (product) {
-            price = product.price;
-            currency = product.currency;
-          }
-        }
-      }
       const progressBar = props.isVisible && typeof usage === "number" && limit > 0 && priceBehavior !== "pay_as_you_go" && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
         ProgressBar,
         {
@@ -18884,7 +18914,7 @@ var MeteredFeatures = (0, import_react35.forwardRef)(({ className, ...rest }, re
           color: isOverage ? "blue" : progressColorMap[Math.floor(
             Math.min(usage, limit) / limit * (progressColorMap.length - 1)
           )],
-          ...isOverage && { bgColor: "#EF4444" }
+          ...isOverage && { bgColor: "#2563EB80" }
         }
       );
       return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Flex, { $flexDirection: "column-reverse", children: [
@@ -21195,7 +21225,8 @@ var components = {
   Invoices,
   PricingTable,
   UnsubscribeButton,
-  ButtonElement
+  Button: ButtonElement,
+  Text: TextElement
 };
 function createRenderer(options) {
   const { useFallback = false } = options || {};

package/dist/schematic-components.d.ts

@@ -4135,17 +4135,6 @@ declare interface PreviewSubscriptionChangeResponseData {
     usageViolations: Array<FeatureUsageResponseData>;
 }
 
-/**
- * Schematic API
- * Schematic API
- *
- * The version of the OpenAPI document: 0.1
- *
- *
- * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
- * https://openapi-generator.tech
- * Do not edit the class manually.
- */
 /**
  *
  * @export
@@ -4200,6 +4189,61 @@ declare interface PreviewSubscriptionFinanceResponseData {
      * @memberof PreviewSubscriptionFinanceResponseData
      */
     trialEnd?: Date | null;
+    /**
+     *
+     * @type {Array<PreviewSubscriptionUpcomingInvoiceLineItems>}
+     * @memberof PreviewSubscriptionFinanceResponseData
+     */
+    upcomingInvoiceLineItems: Array<PreviewSubscriptionUpcomingInvoiceLineItems>;
+}
+
+/**
+ * Schematic API
+ * Schematic API
+ *
+ * The version of the OpenAPI document: 0.1
+ *
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+/**
+ *
+ * @export
+ * @interface PreviewSubscriptionUpcomingInvoiceLineItems
+ */
+declare interface PreviewSubscriptionUpcomingInvoiceLineItems {
+    /**
+     *
+     * @type {number}
+     * @memberof PreviewSubscriptionUpcomingInvoiceLineItems
+     */
+    amount: number;
+    /**
+     *
+     * @type {string}
+     * @memberof PreviewSubscriptionUpcomingInvoiceLineItems
+     */
+    description: string;
+    /**
+     *
+     * @type {string}
+     * @memberof PreviewSubscriptionUpcomingInvoiceLineItems
+     */
+    priceId: string;
+    /**
+     *
+     * @type {boolean}
+     * @memberof PreviewSubscriptionUpcomingInvoiceLineItems
+     */
+    proration: boolean;
+    /**
+     *
+     * @type {number}
+     * @memberof PreviewSubscriptionUpcomingInvoiceLineItems
+     */
+    quantity: number;
 }
 
 export declare const PricingTable: ForwardRefExoticComponent<ElementProps & RecursivePartial<DesignProps_7> & HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement | null>>;

package/dist/schematic-components.esm.js

@@ -11779,6 +11779,23 @@ function ListInvoicesResponseFromJSONTyped(json, ignoreDiscriminator) {
   };
 }
 
+// src/api/models/PreviewSubscriptionUpcomingInvoiceLineItems.ts
+function PreviewSubscriptionUpcomingInvoiceLineItemsFromJSON(json) {
+  return PreviewSubscriptionUpcomingInvoiceLineItemsFromJSONTyped(json, false);
+}
+function PreviewSubscriptionUpcomingInvoiceLineItemsFromJSONTyped(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    amount: json["amount"],
+    description: json["description"],
+    priceId: json["price_id"],
+    proration: json["proration"],
+    quantity: json["quantity"]
+  };
+}
+
 // src/api/models/PreviewSubscriptionFinanceResponseData.ts
 function PreviewSubscriptionFinanceResponseDataFromJSON(json) {
   return PreviewSubscriptionFinanceResponseDataFromJSONTyped(json, false);
@@ -11795,7 +11812,8 @@ function PreviewSubscriptionFinanceResponseDataFromJSONTyped(json, ignoreDiscrim
     periodStart: new Date(json["period_start"]),
     promoCodeApplied: json["promo_code_applied"],
     proration: json["proration"],
-    trialEnd: json["trial_end"] == null ? void 0 : new Date(json["trial_end"])
+    trialEnd: json["trial_end"] == null ? void 0 : new Date(json["trial_end"]),
+    upcomingInvoiceLineItems: json["upcoming_invoice_line_items"].map(PreviewSubscriptionUpcomingInvoiceLineItemsFromJSON)
   };
 }
 
@@ -13088,7 +13106,7 @@ var EmbedProvider = ({
   useEffect2(() => {
     if (accessToken) {
       const { headers = {} } = apiConfig ?? {};
-      headers["X-Schematic-Components-Version"] = "0.8.0";
+      headers["X-Schematic-Components-Version"] = "0.8.1";
       headers["X-Schematic-Session-ID"] = sessionIdRef.current;
       const config = new Configuration({
         ...apiConfig,
@@ -13168,7 +13186,7 @@ function getBillingPrice(billingPrice) {
   if (!billingPrice) {
     return;
   }
-  const price = typeof billingPrice.priceDecimal === "string" ? parseFloat(billingPrice.priceDecimal) : billingPrice.price;
+  const price = typeof billingPrice.priceDecimal === "string" ? Number(billingPrice.priceDecimal) : billingPrice.price;
   return { ...billingPrice, price };
 }
 
@@ -13323,12 +13341,14 @@ function formatCurrency(amount, currency) {
       currency: resolvedCurrency,
       ...hasManySignificantDigits && {
         minimumSignificantDigits: 1
-      }
+      },
+      maximumSignificantDigits: 12
     }).format(dollars);
   } catch (error) {
     console.error("Error formatting currency", error);
     return new Intl.NumberFormat("en-US", {
       style: "currency",
+      maximumSignificantDigits: 12,
       currency: resolvedCurrency
     }).format(amount / 100);
   }
@@ -16669,7 +16689,7 @@ var Plan = ({
                           const entitlementCurrency = entitlementPriceObject?.currency;
                           if (entitlement.priceBehavior === "overage" && entitlementPriceObject) {
                             const { priceTier } = entitlementPriceObject;
-                            if (priceTier.length) {
+                            if (priceTier.length > 1) {
                               const lastTier = priceTier[priceTier.length - 1];
                               const { perUnitPrice, perUnitPriceDecimal } = lastTier;
                               entitlementPrice = perUnitPriceDecimal ? Number(perUnitPriceDecimal) : perUnitPrice ?? 0;
@@ -18258,11 +18278,21 @@ var Details = ({
   const { t: t2 } = useTranslation();
   const theme = nt();
   const { data } = useEmbed();
-  const { price, currency } = useMemo8(() => {
-    const { price: entitlementPrice, currency: entitlementCurrency } = getBillingPrice(
+  const { price, priceDecimal, priceTier, currency } = useMemo8(() => {
+    const {
+      price: entitlementPrice,
+      priceDecimal: entitlementPriceDecimal,
+      priceTier: entitlementPriceTier,
+      currency: entitlementCurrency
+    } = getBillingPrice(
       data.company?.plan?.planPeriod === "year" ? yearlyUsageBasedPrice : monthlyUsageBasedPrice
     ) || {};
-    return { price: entitlementPrice, currency: entitlementCurrency };
+    return {
+      price: entitlementPrice,
+      priceDecimal: entitlementPriceDecimal,
+      priceTier: entitlementPriceTier,
+      currency: entitlementCurrency
+    };
   }, [
     data.company?.plan?.planPeriod,
     monthlyUsageBasedPrice,
@@ -18304,9 +18334,18 @@ var Details = ({
       } else if (priceBehavior === "pay_as_you_go" && typeof price === "number" && typeof usage === "number") {
         acc += ` \u2022 ${formatCurrency(price * usage, currency)}`;
       } else if (priceBehavior === "overage" && typeof price === "number" && typeof usage === "number" && typeof softLimit === "number") {
-        const cost = price * (usage - softLimit);
+        let overagePrice = price ?? priceDecimal;
+        if (priceTier?.length === 2) {
+          const lastTier = priceTier[priceTier.length - 1];
+          if (lastTier.perUnitPriceDecimal) {
+            overagePrice = Number(lastTier.perUnitPriceDecimal);
+          } else {
+            overagePrice = lastTier.perUnitPrice ?? 0;
+          }
+        }
+        const cost = usage - softLimit < 0 ? 0 : overagePrice / 100 * (usage - softLimit);
         const period = feature.featureType === "event" && typeof data.company?.plan?.planPeriod === "string" ? `/${shortenPeriod(data.company.plan.planPeriod)}` : "";
-        acc += cost > 0 ? ` \u2022 ${t2("Overage")}: ${formatCurrency(cost)}${period}` : ` \u2022 ${`${formatCurrency(price)}/${getFeatureName(feature, 1)}`} ${t2("overage fee")}`;
+        acc += cost > 0 ? ` \u2022 ${t2("Overage")}: ${formatCurrency(cost)}${period}` : ` \u2022 ${`${formatCurrency(overagePrice)}/${getFeatureName(feature, 1)}`} ${t2("overage fee")}`;
       }
       return acc;
     }
@@ -18325,6 +18364,8 @@ var Details = ({
     priceBehavior,
     allocation,
     price,
+    priceDecimal,
+    priceTier,
     currency,
     softLimit,
     usage
@@ -18823,17 +18864,6 @@ var MeteredFeatures = forwardRef10(({ className, ...rest }, ref) => {
           }
         }
       }
-      if (isOverage) {
-        const productId = (yearlyUsageBasedPrice ?? monthlyUsageBasedPrice).productId;
-        if (productId) {
-          const products = data?.subscription?.products ?? [];
-          const product = products.find((p2) => p2.id === productId);
-          if (product) {
-            price = product.price;
-            currency = product.currency;
-          }
-        }
-      }
       const progressBar = props.isVisible && typeof usage === "number" && limit > 0 && priceBehavior !== "pay_as_you_go" && /* @__PURE__ */ jsx30(
         ProgressBar,
         {
@@ -18843,7 +18873,7 @@ var MeteredFeatures = forwardRef10(({ className, ...rest }, ref) => {
           color: isOverage ? "blue" : progressColorMap[Math.floor(
             Math.min(usage, limit) / limit * (progressColorMap.length - 1)
           )],
-          ...isOverage && { bgColor: "#EF4444" }
+          ...isOverage && { bgColor: "#2563EB80" }
         }
       );
       return /* @__PURE__ */ jsxs24(Flex, { $flexDirection: "column-reverse", children: [
@@ -21154,7 +21184,8 @@ var components = {
   Invoices,
   PricingTable,
   UnsubscribeButton,
-  ButtonElement
+  Button: ButtonElement,
+  Text: TextElement
 };
 function createRenderer(options) {
   const { useFallback = false } = options || {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schematichq/schematic-components",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "main": "dist/schematic-components.cjs.js",
   "module": "dist/schematic-components.esm.js",
   "types": "dist/schematic-components.d.ts",