@schematichq/schematic-components 0.4.3 → 0.4.5

package/dist/schematic-components.cjs.js

@@ -3781,18 +3781,22 @@ function useAvailablePlans(activePeriod) {
   }, [data.activePlans, data.activeAddOns]);
   const getActivePlans = (0, import_react10.useCallback)(
     (plans) => {
-      const plansWithSelected = (mode === "edit" ? plans.slice() : plans.filter(
+      const customPlanExist = plans.some((plan) => plan.custom);
+      let plansWithSelected = mode === "edit" ? plans.slice() : plans.filter(
         (plan) => activePeriod === "month" && plan.monthlyPrice || activePeriod === "year" && plan.yearlyPrice
-      )).sort((a2, b2) => {
-        if (activePeriod === "year") {
-          return (a2.yearlyPrice?.price ?? 0) - (b2.yearlyPrice?.price ?? 0);
-        }
-        if (activePeriod === "month") {
-          return (a2.monthlyPrice?.price ?? 0) - (b2.monthlyPrice?.price ?? 0);
-        }
-        return 0;
-      }).map((plan) => ({ ...plan, isSelected: false }));
-      return plansWithSelected;
+      );
+      if (!customPlanExist) {
+        plansWithSelected = plansWithSelected.sort((a2, b2) => {
+          if (activePeriod === "year") {
+            return (a2.yearlyPrice?.price ?? 0) - (b2.yearlyPrice?.price ?? 0);
+          }
+          if (activePeriod === "month") {
+            return (a2.monthlyPrice?.price ?? 0) - (b2.monthlyPrice?.price ?? 0);
+          }
+          return 0;
+        });
+      }
+      return plansWithSelected.map((plan) => ({ ...plan, isSelected: false }));
     },
     [activePeriod, mode]
   );
@@ -11937,6 +11941,8 @@ var en_default = {
     "Error retrieving plan details. Please try again in a moment.": "Error retrieving plan details. Please try again in a moment.",
     "Error updating payment method. Please try again.": "Error updating payment method. Please try again.",
     "Estimated bill.": "Estimated bill.",
+    "Custom Plan Price": "Custom price",
+    "Custom Plan CTA": "Talk to support",
     "Everything in": "Everything in {{plan}}, plus",
     Expired: "Expired",
     "Expires in x months": "Expires in {{months}} mo",
@@ -12729,7 +12735,7 @@ var EmbedProvider = ({
   (0, import_react11.useEffect)(() => {
     if (accessToken) {
       const { headers = {} } = apiConfig ?? {};
-      headers["X-Schematic-Components-Version"] = "0.4.3";
+      headers["X-Schematic-Components-Version"] = "0.4.5";
       headers["X-Schematic-Session-ID"] = sessionIdRef.current;
       const config = new Configuration({
         ...apiConfig,
@@ -15536,6 +15542,16 @@ var Sidebar = ({
 // src/components/shared/checkout-dialog/Plan.tsx
 var import_react22 = require("react");
 var import_pluralize2 = __toESM(require_pluralize());
+
+// src/components/elements/pricing-table/styles.ts
+var ButtonLink = dt.a`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-grow: 1;
+`;
+
+// src/components/shared/checkout-dialog/Plan.tsx
 var import_jsx_runtime13 = require("react/jsx-runtime");
 var Plan = ({
   isLoading,
@@ -15642,13 +15658,13 @@ var Plan = ({
                           $size: theme.typography.heading2.fontSize,
                           $weight: theme.typography.heading2.fontWeight,
                           $color: theme.typography.heading2.color,
-                          children: formatCurrency(
+                          children: plan.custom ? plan.customPlanConfig?.priceText ? plan.customPlanConfig?.priceText : t2("Custom Plan Price") : formatCurrency(
                             (period === "month" ? plan.monthlyPrice : plan.yearlyPrice)?.price ?? 0,
                             (period === "month" ? plan.monthlyPrice : plan.yearlyPrice)?.currency
                           )
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+                      !plan.custom && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
                         Text,
                         {
                           $font: theme.typography.heading2.fontFamily,
@@ -15844,13 +15860,25 @@ var Plan = ({
                       EmbedButton,
                       {
                         disabled: isLoading || !plan.valid,
-                        onClick: () => {
-                          selectPlan({ plan });
+                        ...{
+                          onClick: () => {
+                            if (plan.custom) {
+                              return;
+                            }
+                            selectPlan({ plan });
+                          }
                         },
                         $size: "sm",
                         $color: "primary",
                         $variant: plan.current ? "outline" : "filled",
-                        children: !plan.valid ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                        children: plan.custom ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                          ButtonLink,
+                          {
+                            href: plan.customPlanConfig?.ctaWebSite ?? "#",
+                            target: "_blank",
+                            children: plan.customPlanConfig?.ctaText ?? t2("Custom Plan CTA")
+                          }
+                        ) : !plan.valid ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                           Tooltip,
                           {
                             trigger: t2("Over usage limit"),
@@ -16586,18 +16614,6 @@ var CheckoutDialog = ({ top = 0 }) => {
     ),
     [usageBasedEntitlements]
   );
-  const [checkoutStage, setCheckoutStage] = (0, import_react24.useState)(() => {
-    if (selected.planId !== currentPlan?.id) {
-      return payInAdvanceEntitlements.length > 0 ? "usage" : "addons";
-    }
-    if (selected.addOnId) {
-      return "addons";
-    }
-    if (selected.usage) {
-      return "usage";
-    }
-    return "plan";
-  });
   const hasActiveAddOns = addOns.some((addOn) => addOn.isSelected === true);
   const hasActivePayInAdvanceEntitlements = payInAdvanceEntitlements.some(
     ({ quantity }) => quantity > 0
@@ -16641,6 +16657,18 @@ var CheckoutDialog = ({ top = 0 }) => {
     selectedPlan?.companyCanTrial,
     requiresPayment
   ]);
+  const [checkoutStage, setCheckoutStage] = (0, import_react24.useState)(() => {
+    if (selected.addOnId) {
+      return "addons";
+    }
+    if (selected.usage) {
+      return "usage";
+    }
+    if (selected.planId !== currentPlan?.id) {
+      return checkoutStages.some((stage) => stage.id === "usage") ? "usage" : checkoutStages.some((stage) => stage.id === "addons") ? "addons" : "plan";
+    }
+    return "plan";
+  });
   const isLightBackground = useIsLightBackground();
   const previewCheckout = (0, import_react24.useCallback)(
     async (updates) => {
@@ -17592,7 +17620,7 @@ var Details = ({
     if (!priceBehavior) {
       return t2("Unlimited", { item: (0, import_pluralize4.default)(feature.name) });
     }
-  }, [allocation, feature?.name, price, priceBehavior, t2]);
+  }, [allocation, feature?.name, price, priceBehavior, t2, currency]);
   const usageText = (0, import_react31.useMemo)(() => {
     if (!feature?.name) {
       return;
@@ -17629,7 +17657,8 @@ var Details = ({
     priceBehavior,
     t2,
     usage,
-    usageData
+    usageData,
+    currency
   ]);
   if (!text) {
     return null;
@@ -18660,13 +18689,13 @@ var PlanManager = (0, import_react36.forwardRef)(({ children, className, portal,
     (acc, usage) => {
       const quantity = usage?.allocation ?? 0;
       let price;
-      let currencyCode = "USD";
+      let currencyCode;
       if (currentPlan?.planPeriod === "month") {
         price = usage.monthlyUsageBasedPrice?.price;
-        currencyCode = usage.monthlyUsageBasedPrice?.currency ?? "USD";
+        currencyCode = usage.monthlyUsageBasedPrice?.currency;
       } else if (currentPlan?.planPeriod === "year") {
         price = usage.yearlyUsageBasedPrice?.price;
-        currencyCode = usage.yearlyUsageBasedPrice?.currency ?? "USD";
+        currencyCode = usage.yearlyUsageBasedPrice?.currency;
       }
       if (usage.priceBehavior && typeof price === "number" && quantity > 0) {
         acc.push({ ...usage, price, quantity, currencyCode });
@@ -19159,13 +19188,13 @@ var PricingTable = (0, import_react37.forwardRef)(({ children, className, ...res
                                   $size: theme.typography[props.plans.name.fontStyle].fontSize,
                                   $weight: theme.typography[props.plans.name.fontStyle].fontWeight,
                                   $color: theme.typography[props.plans.name.fontStyle].color,
-                                  children: formatCurrency(
+                                  children: plan.custom ? plan.customPlanConfig?.priceText ? plan.customPlanConfig?.priceText : t2("Custom Plan Price") : formatCurrency(
                                     (selectedPeriod === "month" ? plan.monthlyPrice : plan.yearlyPrice)?.price ?? 0,
                                     (selectedPeriod === "month" ? plan.monthlyPrice : plan.yearlyPrice)?.currency
                                   )
                                 }
                               ),
-                              /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+                              !plan.custom && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
                                 Text,
                                 {
                                   $font: theme.typography[props.plans.name.fontStyle].fontFamily,
@@ -19357,13 +19386,15 @@ var PricingTable = (0, import_react37.forwardRef)(({ children, className, ...res
                               EmbedButton,
                               {
                                 disabled: !plan.valid || !canCheckout,
-                                onClick: () => {
-                                  setSelected({
-                                    period: selectedPeriod,
-                                    planId: isActivePlan ? null : plan.id,
-                                    usage: false
-                                  });
-                                  setLayout("checkout");
+                                ...!plan.custom && {
+                                  onClick: () => {
+                                    setSelected({
+                                      period: selectedPeriod,
+                                      planId: isActivePlan ? null : plan.id,
+                                      usage: false
+                                    });
+                                    setLayout("checkout");
+                                  }
                                 },
                                 ...index > currentPlanIndex ? {
                                   $size: props.upgrade.buttonSize,
@@ -19374,7 +19405,14 @@ var PricingTable = (0, import_react37.forwardRef)(({ children, className, ...res
                                   $color: props.downgrade.buttonStyle,
                                   $variant: "outline"
                                 },
-                                children: !plan.valid ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                                children: plan.custom ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                                  ButtonLink,
+                                  {
+                                    href: plan.customPlanConfig?.ctaWebSite ?? "#",
+                                    target: "_blank",
+                                    children: plan.customPlanConfig?.ctaText ?? t2("Custom Plan CTA")
+                                  }
+                                ) : !plan.valid ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                                   Tooltip,
                                   {
                                     trigger: t2("Over usage limit"),

package/dist/schematic-components.d.ts

@@ -4447,8 +4447,60 @@ declare interface UsageBasedEntitlementResponseData {
 }
 
 export declare function useAvailablePlans(activePeriod: string): {
-    plans: SelectedPlan[];
-    addOns: SelectedPlan[];
+    plans: {
+        isSelected: boolean;
+        audienceType?: string | null;
+        billingProduct?: BillingProductDetailResponseData;
+        companyCanTrial: boolean;
+        companyCount: number;
+        createdAt: Date;
+        current: boolean;
+        custom: boolean;
+        customPlanConfig?: CustomPlanConfig;
+        description: string;
+        entitlements: Array<PlanEntitlementResponseData>;
+        features: Array<FeatureDetailResponseData>;
+        icon: string;
+        id: string;
+        isCustom: boolean;
+        isDefault: boolean;
+        isFree: boolean;
+        isTrialable: boolean;
+        monthlyPrice?: BillingPriceResponseData;
+        name: string;
+        planType: string;
+        trialDays?: number | null;
+        updatedAt: Date;
+        valid: boolean;
+        yearlyPrice?: BillingPriceResponseData;
+    }[];
+    addOns: {
+        isSelected: boolean;
+        audienceType?: string | null;
+        billingProduct?: BillingProductDetailResponseData;
+        companyCanTrial: boolean;
+        companyCount: number;
+        createdAt: Date;
+        current: boolean;
+        custom: boolean;
+        customPlanConfig?: CustomPlanConfig;
+        description: string;
+        entitlements: Array<PlanEntitlementResponseData>;
+        features: Array<FeatureDetailResponseData>;
+        icon: string;
+        id: string;
+        isCustom: boolean;
+        isDefault: boolean;
+        isFree: boolean;
+        isTrialable: boolean;
+        monthlyPrice?: BillingPriceResponseData;
+        name: string;
+        planType: string;
+        trialDays?: number | null;
+        updatedAt: Date;
+        valid: boolean;
+        yearlyPrice?: BillingPriceResponseData;
+    }[];
     periods: string[];
 };
 

package/dist/schematic-components.esm.js

@@ -3734,18 +3734,22 @@ function useAvailablePlans(activePeriod) {
   }, [data.activePlans, data.activeAddOns]);
   const getActivePlans = useCallback2(
     (plans) => {
-      const plansWithSelected = (mode === "edit" ? plans.slice() : plans.filter(
+      const customPlanExist = plans.some((plan) => plan.custom);
+      let plansWithSelected = mode === "edit" ? plans.slice() : plans.filter(
         (plan) => activePeriod === "month" && plan.monthlyPrice || activePeriod === "year" && plan.yearlyPrice
-      )).sort((a2, b2) => {
-        if (activePeriod === "year") {
-          return (a2.yearlyPrice?.price ?? 0) - (b2.yearlyPrice?.price ?? 0);
-        }
-        if (activePeriod === "month") {
-          return (a2.monthlyPrice?.price ?? 0) - (b2.monthlyPrice?.price ?? 0);
-        }
-        return 0;
-      }).map((plan) => ({ ...plan, isSelected: false }));
-      return plansWithSelected;
+      );
+      if (!customPlanExist) {
+        plansWithSelected = plansWithSelected.sort((a2, b2) => {
+          if (activePeriod === "year") {
+            return (a2.yearlyPrice?.price ?? 0) - (b2.yearlyPrice?.price ?? 0);
+          }
+          if (activePeriod === "month") {
+            return (a2.monthlyPrice?.price ?? 0) - (b2.monthlyPrice?.price ?? 0);
+          }
+          return 0;
+        });
+      }
+      return plansWithSelected.map((plan) => ({ ...plan, isSelected: false }));
     },
     [activePeriod, mode]
   );
@@ -11890,6 +11894,8 @@ var en_default = {
     "Error retrieving plan details. Please try again in a moment.": "Error retrieving plan details. Please try again in a moment.",
     "Error updating payment method. Please try again.": "Error updating payment method. Please try again.",
     "Estimated bill.": "Estimated bill.",
+    "Custom Plan Price": "Custom price",
+    "Custom Plan CTA": "Talk to support",
     "Everything in": "Everything in {{plan}}, plus",
     Expired: "Expired",
     "Expires in x months": "Expires in {{months}} mo",
@@ -12682,7 +12688,7 @@ var EmbedProvider = ({
   useEffect2(() => {
     if (accessToken) {
       const { headers = {} } = apiConfig ?? {};
-      headers["X-Schematic-Components-Version"] = "0.4.3";
+      headers["X-Schematic-Components-Version"] = "0.4.5";
       headers["X-Schematic-Session-ID"] = sessionIdRef.current;
       const config = new Configuration({
         ...apiConfig,
@@ -15496,6 +15502,16 @@ var Sidebar = ({
 // src/components/shared/checkout-dialog/Plan.tsx
 import { useState as useState5 } from "react";
 var import_pluralize2 = __toESM(require_pluralize());
+
+// src/components/elements/pricing-table/styles.ts
+var ButtonLink = dt.a`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-grow: 1;
+`;
+
+// src/components/shared/checkout-dialog/Plan.tsx
 import { Fragment as Fragment5, jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
 var Plan = ({
   isLoading,
@@ -15602,13 +15618,13 @@ var Plan = ({
                           $size: theme.typography.heading2.fontSize,
                           $weight: theme.typography.heading2.fontWeight,
                           $color: theme.typography.heading2.color,
-                          children: formatCurrency(
+                          children: plan.custom ? plan.customPlanConfig?.priceText ? plan.customPlanConfig?.priceText : t2("Custom Plan Price") : formatCurrency(
                             (period === "month" ? plan.monthlyPrice : plan.yearlyPrice)?.price ?? 0,
                             (period === "month" ? plan.monthlyPrice : plan.yearlyPrice)?.currency
                           )
                         }
                       ),
-                      /* @__PURE__ */ jsxs9(
+                      !plan.custom && /* @__PURE__ */ jsxs9(
                         Text,
                         {
                           $font: theme.typography.heading2.fontFamily,
@@ -15804,13 +15820,25 @@ var Plan = ({
                       EmbedButton,
                       {
                         disabled: isLoading || !plan.valid,
-                        onClick: () => {
-                          selectPlan({ plan });
+                        ...{
+                          onClick: () => {
+                            if (plan.custom) {
+                              return;
+                            }
+                            selectPlan({ plan });
+                          }
                         },
                         $size: "sm",
                         $color: "primary",
                         $variant: plan.current ? "outline" : "filled",
-                        children: !plan.valid ? /* @__PURE__ */ jsx13(
+                        children: plan.custom ? /* @__PURE__ */ jsx13(
+                          ButtonLink,
+                          {
+                            href: plan.customPlanConfig?.ctaWebSite ?? "#",
+                            target: "_blank",
+                            children: plan.customPlanConfig?.ctaText ?? t2("Custom Plan CTA")
+                          }
+                        ) : !plan.valid ? /* @__PURE__ */ jsx13(
                           Tooltip,
                           {
                             trigger: t2("Over usage limit"),
@@ -16546,18 +16574,6 @@ var CheckoutDialog = ({ top = 0 }) => {
     ),
     [usageBasedEntitlements]
   );
-  const [checkoutStage, setCheckoutStage] = useState7(() => {
-    if (selected.planId !== currentPlan?.id) {
-      return payInAdvanceEntitlements.length > 0 ? "usage" : "addons";
-    }
-    if (selected.addOnId) {
-      return "addons";
-    }
-    if (selected.usage) {
-      return "usage";
-    }
-    return "plan";
-  });
   const hasActiveAddOns = addOns.some((addOn) => addOn.isSelected === true);
   const hasActivePayInAdvanceEntitlements = payInAdvanceEntitlements.some(
     ({ quantity }) => quantity > 0
@@ -16601,6 +16617,18 @@ var CheckoutDialog = ({ top = 0 }) => {
     selectedPlan?.companyCanTrial,
     requiresPayment
   ]);
+  const [checkoutStage, setCheckoutStage] = useState7(() => {
+    if (selected.addOnId) {
+      return "addons";
+    }
+    if (selected.usage) {
+      return "usage";
+    }
+    if (selected.planId !== currentPlan?.id) {
+      return checkoutStages.some((stage) => stage.id === "usage") ? "usage" : checkoutStages.some((stage) => stage.id === "addons") ? "addons" : "plan";
+    }
+    return "plan";
+  });
   const isLightBackground = useIsLightBackground();
   const previewCheckout = useCallback7(
     async (updates) => {
@@ -17556,7 +17584,7 @@ var Details = ({
     if (!priceBehavior) {
       return t2("Unlimited", { item: (0, import_pluralize4.default)(feature.name) });
     }
-  }, [allocation, feature?.name, price, priceBehavior, t2]);
+  }, [allocation, feature?.name, price, priceBehavior, t2, currency]);
   const usageText = useMemo7(() => {
     if (!feature?.name) {
       return;
@@ -17593,7 +17621,8 @@ var Details = ({
     priceBehavior,
     t2,
     usage,
-    usageData
+    usageData,
+    currency
   ]);
   if (!text) {
     return null;
@@ -18631,13 +18660,13 @@ var PlanManager = forwardRef11(({ children, className, portal, ...rest }, ref) =
     (acc, usage) => {
       const quantity = usage?.allocation ?? 0;
       let price;
-      let currencyCode = "USD";
+      let currencyCode;
       if (currentPlan?.planPeriod === "month") {
         price = usage.monthlyUsageBasedPrice?.price;
-        currencyCode = usage.monthlyUsageBasedPrice?.currency ?? "USD";
+        currencyCode = usage.monthlyUsageBasedPrice?.currency;
       } else if (currentPlan?.planPeriod === "year") {
         price = usage.yearlyUsageBasedPrice?.price;
-        currencyCode = usage.yearlyUsageBasedPrice?.currency ?? "USD";
+        currencyCode = usage.yearlyUsageBasedPrice?.currency;
       }
       if (usage.priceBehavior && typeof price === "number" && quantity > 0) {
         acc.push({ ...usage, price, quantity, currencyCode });
@@ -19130,13 +19159,13 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                                   $size: theme.typography[props.plans.name.fontStyle].fontSize,
                                   $weight: theme.typography[props.plans.name.fontStyle].fontWeight,
                                   $color: theme.typography[props.plans.name.fontStyle].color,
-                                  children: formatCurrency(
+                                  children: plan.custom ? plan.customPlanConfig?.priceText ? plan.customPlanConfig?.priceText : t2("Custom Plan Price") : formatCurrency(
                                     (selectedPeriod === "month" ? plan.monthlyPrice : plan.yearlyPrice)?.price ?? 0,
                                     (selectedPeriod === "month" ? plan.monthlyPrice : plan.yearlyPrice)?.currency
                                   )
                                 }
                               ),
-                              /* @__PURE__ */ jsxs24(
+                              !plan.custom && /* @__PURE__ */ jsxs24(
                                 Text,
                                 {
                                   $font: theme.typography[props.plans.name.fontStyle].fontFamily,
@@ -19328,13 +19357,15 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                               EmbedButton,
                               {
                                 disabled: !plan.valid || !canCheckout,
-                                onClick: () => {
-                                  setSelected({
-                                    period: selectedPeriod,
-                                    planId: isActivePlan ? null : plan.id,
-                                    usage: false
-                                  });
-                                  setLayout("checkout");
+                                ...!plan.custom && {
+                                  onClick: () => {
+                                    setSelected({
+                                      period: selectedPeriod,
+                                      planId: isActivePlan ? null : plan.id,
+                                      usage: false
+                                    });
+                                    setLayout("checkout");
+                                  }
                                 },
                                 ...index > currentPlanIndex ? {
                                   $size: props.upgrade.buttonSize,
@@ -19345,7 +19376,14 @@ var PricingTable = forwardRef12(({ children, className, ...rest }, ref) => {
                                   $color: props.downgrade.buttonStyle,
                                   $variant: "outline"
                                 },
-                                children: !plan.valid ? /* @__PURE__ */ jsx31(
+                                children: plan.custom ? /* @__PURE__ */ jsx31(
+                                  ButtonLink,
+                                  {
+                                    href: plan.customPlanConfig?.ctaWebSite ?? "#",
+                                    target: "_blank",
+                                    children: plan.customPlanConfig?.ctaText ?? t2("Custom Plan CTA")
+                                  }
+                                ) : !plan.valid ? /* @__PURE__ */ jsx31(
                                   Tooltip,
                                   {
                                     trigger: t2("Over usage limit"),

package/package.json

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