@schematichq/schematic-components 1.3.0 → 1.4.0

package/dist/schematic-components.cjs.js

@@ -1848,6 +1848,7 @@ __export(index_exports, {
   Button: () => Button,
   ButtonElement: () => ButtonElement,
   Card: () => Card,
+  CheckoutDialog: () => CheckoutDialog,
   Column: () => Column,
   Container: () => Container,
   Element: () => Element,
@@ -1881,6 +1882,7 @@ __export(index_exports, {
   UpcomingBill: () => UpcomingBill,
   Viewport: () => Viewport,
   cardBoxShadow: () => cardBoxShadow,
+  createActiveUsageBasedEntitlementsReducer: () => createActiveUsageBasedEntitlementsReducer,
   defaultSettings: () => defaultSettings,
   defaultTheme: () => defaultTheme,
   iconsList: () => iconsList,
@@ -1943,8 +1945,8 @@ function getPriceValue(billingPrice) {
   const price = typeof billingPrice.priceDecimal === "string" ? Number(billingPrice.priceDecimal) : billingPrice.price;
   return price;
 }
-function getPlanPrice(plan, period = "month") {
-  const billingPrice = period === "year" ? plan.yearlyPrice : plan.monthlyPrice;
+function getPlanPrice(plan, period = "month", options2 = { useSelectedPeriod: true }) {
+  const billingPrice = options2.useSelectedPeriod ? period === "year" ? plan.yearlyPrice : plan.monthlyPrice : plan.yearlyPrice && !plan.monthlyPrice ? plan.yearlyPrice : plan.monthlyPrice;
   if (billingPrice) {
     return { ...billingPrice, price: getPriceValue(billingPrice) };
   }
@@ -4143,7 +4145,7 @@ attr.rem = function propAsRem(key, value) {
 };
 
 // src/hooks/useAvailablePlans.ts
-function useAvailablePlans(activePeriod) {
+function useAvailablePlans(activePeriod, options2 = { useSelectedPeriod: true }) {
   const { data, settings } = useEmbed();
   const getAvailablePeriods = (0, import_react2.useCallback)(() => {
     const periods = [];
@@ -4157,12 +4159,15 @@ function useAvailablePlans(activePeriod) {
   }, [data?.activePlans, data?.activeAddOns]);
   const getActivePlans = (0, import_react2.useCallback)(
     (plans) => {
-      const activePlans = settings.mode === "edit" ? plans.slice() : plans.filter(
-        (plan) => activePeriod === "month" && plan.monthlyPrice || activePeriod === "year" && plan.yearlyPrice || plan.chargeType === ChargeType.oneTime
-      );
+      const activePlans = settings.mode === "edit" ? plans.slice() : plans.filter((plan) => {
+        if (options2.useSelectedPeriod) {
+          return activePeriod === "month" && plan.monthlyPrice || activePeriod === "year" && plan.yearlyPrice || plan.chargeType === ChargeType.oneTime;
+        }
+        return plan.monthlyPrice || plan.yearlyPrice || plan.chargeType === ChargeType.oneTime;
+      });
       return activePlans.map((plan) => ({ ...plan, isSelected: false }));
     },
-    [activePeriod, settings.mode]
+    [activePeriod, options2.useSelectedPeriod, settings.mode]
   );
   return (0, import_react2.useMemo)(() => {
     return {
@@ -4264,6 +4269,7 @@ var stub = () => {
 var initialContext = {
   ...initialState,
   hydratePublic: stub,
+  hydrate: stub,
   hydrateComponent: stub,
   hydrateExternal: stub,
   getUpcomingInvoice: stub,
@@ -4712,6 +4718,26 @@ var postProcessor = {
     return value;
   }
 };
+var PATH_KEY = Symbol("i18next/PATH_KEY");
+function createProxy() {
+  const state = [];
+  const handler = /* @__PURE__ */ Object.create(null);
+  let proxy;
+  handler.get = (target, key) => {
+    proxy?.revoke?.();
+    if (key === PATH_KEY) return state;
+    state.push(key);
+    proxy = Proxy.revocable(target, handler);
+    return proxy.proxy;
+  };
+  return Proxy.revocable(/* @__PURE__ */ Object.create(null), handler).proxy;
+}
+function keysFromSelector(selector, opts) {
+  const {
+    [PATH_KEY]: path
+  } = selector(createProxy());
+  return path.join(opts?.keySeparator ?? ".");
+}
 var checkedLoadedFor = {};
 var shouldHandleAsObject = (res) => !isString(res) && typeof res !== "boolean" && typeof res !== "number";
 var Translator = class _Translator extends EventEmitter {
@@ -4773,6 +4799,7 @@ var Translator = class _Translator extends EventEmitter {
     };
     if (!opt) opt = {};
     if (keys == null) return "";
+    if (typeof keys === "function") keys = keysFromSelector(keys, opt);
     if (!Array.isArray(keys)) keys = [String(keys)];
     const returnDetails = opt.returnDetails !== void 0 ? opt.returnDetails : this.options.returnDetails;
     const keySeparator = opt.keySeparator !== void 0 ? opt.keySeparator : this.options.keySeparator;
@@ -6026,7 +6053,7 @@ var I18n = class _I18n extends EventEmitter {
       });
       const usingLegacyFormatFunction = this.options.interpolation.format && this.options.interpolation.format !== defOpts.interpolation.format;
       if (usingLegacyFormatFunction) {
-        this.logger.warn(`init: you are still using the legacy format function, please use the new approach: https://www.i18next.com/translation-function/formatting`);
+        this.logger.deprecate(`init: you are still using the legacy format function, please use the new approach: https://www.i18next.com/translation-function/formatting`);
       }
       if (formatter && (!this.options.interpolation.format || this.options.interpolation.format === defOpts.interpolation.format)) {
         s2.formatter = createClassOnDemand(formatter);
@@ -8704,6 +8731,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"],
     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"],
@@ -8797,6 +8825,20 @@ function HydrateComponentResponseFromJSONTyped(json, ignoreDiscriminator) {
   };
 }
 
+// src/api/checkoutexternal/models/HydrateResponse.ts
+function HydrateResponseFromJSON(json) {
+  return HydrateResponseFromJSONTyped(json, false);
+}
+function HydrateResponseFromJSONTyped(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    data: ComponentHydrateResponseDataFromJSON(json["data"]),
+    params: json["params"]
+  };
+}
+
 // src/api/checkoutexternal/models/HydrateUpcomingInvoiceResponse.ts
 function HydrateUpcomingInvoiceResponseFromJSON(json) {
   return HydrateUpcomingInvoiceResponseFromJSONTyped(json, false);
@@ -9168,6 +9210,38 @@ var CheckoutexternalApi = class extends BaseAPI {
     );
     return await response.value();
   }
+  /**
+   * Hydrate
+   */
+  async hydrateRaw(initOverrides) {
+    const queryParameters = {};
+    const headerParameters = {};
+    if (this.configuration && this.configuration.apiKey) {
+      headerParameters["X-Schematic-Api-Key"] = await this.configuration.apiKey(
+        "X-Schematic-Api-Key"
+      );
+    }
+    const response = await this.request(
+      {
+        path: `/components/hydrate`,
+        method: "GET",
+        headers: headerParameters,
+        query: queryParameters
+      },
+      initOverrides
+    );
+    return new JSONApiResponse(
+      response,
+      (jsonValue) => HydrateResponseFromJSON(jsonValue)
+    );
+  }
+  /**
+   * Hydrate
+   */
+  async hydrate(initOverrides) {
+    const response = await this.hydrateRaw(initOverrides);
+    return await response.value();
+  }
   /**
    * Hydrate component
    */
@@ -10064,6 +10138,32 @@ function FeatureDetailResponseDataFromJSONTyped6(json, ignoreDiscriminator) {
   };
 }
 
+// src/api/componentspublic/models/PlanCreditGrantView.ts
+function PlanCreditGrantViewFromJSON2(json) {
+  return PlanCreditGrantViewFromJSONTyped3(json, false);
+}
+function PlanCreditGrantViewFromJSONTyped3(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    createdAt: new Date(json["created_at"]),
+    creditAmount: json["credit_amount"],
+    creditDescription: json["credit_description"],
+    creditIcon: json["credit_icon"] == null ? void 0 : json["credit_icon"],
+    creditId: json["credit_id"],
+    creditName: json["credit_name"],
+    id: json["id"],
+    planId: json["plan_id"],
+    planName: json["plan_name"],
+    pluralName: json["plural_name"] == null ? void 0 : json["plural_name"],
+    resetCadence: json["reset_cadence"],
+    resetStart: json["reset_start"],
+    singularName: json["singular_name"] == null ? void 0 : json["singular_name"],
+    updatedAt: new Date(json["updated_at"])
+  };
+}
+
 // src/api/componentspublic/models/PlanResponseData.ts
 function PlanResponseDataFromJSON2(json) {
   return PlanResponseDataFromJSONTyped4(json, false);
@@ -10147,6 +10247,9 @@ function PlanViewPublicResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     ),
     icon: json["icon"],
     id: json["id"],
+    includedCreditGrants: json["included_credit_grants"].map(
+      PlanCreditGrantViewFromJSON2
+    ),
     isCustom: json["is_custom"],
     isDefault: json["is_default"],
     isFree: json["is_free"],
@@ -10258,6 +10361,7 @@ var reducer = (state, action) => {
       };
     }
     case "HYDRATE_PUBLIC":
+    case "HYDRATE":
     case "HYDRATE_COMPONENT":
     case "HYDRATE_EXTERNAL": {
       return {
@@ -10376,7 +10480,7 @@ var EmbedProvider = ({
   });
   const customHeaders = (0, import_react12.useMemo)(
     () => ({
-      "X-Schematic-Components-Version": "1.3.0",
+      "X-Schematic-Components-Version": "1.4.0",
       "X-Schematic-Session-ID": sessionIdRef.current
     }),
     []
@@ -10412,6 +10516,28 @@ var EmbedProvider = ({
     () => (0, import_debounce.default)(hydratePublic, FETCH_DEBOUNCE_TIMEOUT, debounceOptions),
     [hydratePublic]
   );
+  const hydrate = (0, import_react12.useCallback)(async () => {
+    dispatch({ type: "HYDRATE_STARTED" });
+    try {
+      const response = await api.checkout?.hydrate();
+      if (response) {
+        dispatch({
+          type: "HYDRATE",
+          data: response.data
+        });
+      }
+      return response?.data;
+    } catch (err2) {
+      dispatch({
+        type: "ERROR",
+        error: isError(err2) ? err2 : ERROR_UNKNOWN
+      });
+    }
+  }, [api.checkout]);
+  const debouncedHydrate = (0, import_react12.useMemo)(
+    () => (0, import_debounce.default)(hydrate, FETCH_DEBOUNCE_TIMEOUT, debounceOptions),
+    [hydrate]
+  );
   const hydrateComponent = (0, import_react12.useCallback)(
     async (id) => {
       dispatch({ type: "HYDRATE_STARTED" });
@@ -10694,6 +10820,7 @@ var EmbedProvider = ({
         layout: state.layout,
         checkoutState: state.checkoutState,
         hydratePublic: debouncedHydratePublic,
+        hydrate: debouncedHydrate,
         hydrateComponent: debouncedHydrateComponent,
         hydrateExternal: debouncedHydrateExternal,
         createSetupIntent: debouncedCreateSetupIntent,
@@ -13639,7 +13766,8 @@ var Plan = ({
   selectedPlan,
   period,
   selectPlan,
-  shouldTrial
+  shouldTrial,
+  showPeriodToggle
 }) => {
   const { t: t2 } = useTranslation();
   const { data, settings } = useEmbed();
@@ -13678,8 +13806,9 @@ var Plan = ({
       $gap: "1rem",
       $flexGrow: 1,
       children: plans.map((plan, planIndex) => {
-        const { price: planPrice, currency: planCurrency } = getPlanPrice(plan, period) || {};
-        const credits = isHydratedPlan(plan) ? groupPlanCreditGrants(plan.includedCreditGrants) : [];
+        const planPeriod = showPeriodToggle ? period : plan.yearlyPrice && !plan.monthlyPrice ? "year" /* Year */ : "month" /* Month */;
+        const { price: planPrice, currency: planCurrency } = getPlanPrice(plan, planPeriod) || {};
+        const credits = groupPlanCreditGrants(plan.includedCreditGrants);
         const hasUsageBasedEntitlements = plan.entitlements.some(
           (entitlement) => !!entitlement.priceBehavior
         );
@@ -13738,7 +13867,7 @@ var Plan = ({
                           $size: 16 / 30 * settings.theme.typography.heading2.fontSize,
                           children: [
                             "/",
-                            period
+                            planPeriod
                           ]
                         }
                       )
@@ -13834,7 +13963,7 @@ var Plan = ({
                           priceTier: entitlementPriceTiers,
                           currency: entitlementCurrency,
                           packageSize: entitlementPackageSize = 1
-                        } = getEntitlementPrice(entitlement, period) || {};
+                        } = getEntitlementPrice(entitlement, planPeriod) || {};
                         const metricPeriodName = getMetricPeriodName(entitlement);
                         return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                           Flex,
@@ -13880,13 +14009,13 @@ var Plan = ({
                                         " ",
                                         t2("per"),
                                         " ",
-                                        period
+                                        planPeriod
                                       ] })
                                     ] }) : entitlement.priceBehavior === "tier" /* Tiered */ ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                                       TieredPricingDetails,
                                       {
                                         entitlement,
-                                        period
+                                        period: planPeriod
                                       }
                                     ) : entitlement.priceBehavior === "credit_burndown" /* Credit */ && entitlement.valueCredit ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
                                       entitlement.consumptionRate,
@@ -13943,7 +14072,7 @@ var Plan = ({
                                           ),
                                           entitlement.feature.featureType === "trait" /* Trait */ && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
                                             "/",
-                                            shortenPeriod(period)
+                                            shortenPeriod(planPeriod)
                                           ] })
                                         ]
                                       }
@@ -13952,7 +14081,7 @@ var Plan = ({
                                         PricingTiersTooltip,
                                         {
                                           feature: entitlement.feature,
-                                          period,
+                                          period: planPeriod,
                                           currency: entitlementCurrency,
                                           priceTiers: entitlementPriceTiers
                                         }
@@ -14209,17 +14338,24 @@ var CheckoutDialog = ({ top = 0 }) => {
     addOns: availableAddOns,
     periods: availablePeriods
   } = useAvailablePlans(planPeriod);
-  const { currentPlanId, currentEntitlements, trialPaymentMethodRequired } = (0, import_react30.useMemo)(() => {
+  const {
+    currentPlanId,
+    currentEntitlements,
+    showPeriodToggle,
+    trialPaymentMethodRequired
+  } = (0, import_react30.useMemo)(() => {
     if (isCheckoutData(data)) {
       return {
         currentPlanId: data.company?.plan?.id,
         currentEntitlements: data.featureUsage ? data.featureUsage.features : [],
+        showPeriodToggle: data.showPeriodToggle,
         trialPaymentMethodRequired: data.trialPaymentMethodRequired === true
       };
     }
     return {
       currentPlanId: void 0,
       currentEntitlements: [],
+      showPeriodToggle: true,
       trialPaymentMethodRequired: false
     };
   }, [data]);
@@ -14779,7 +14915,7 @@ var CheckoutDialog = ({ top = 0 }) => {
                         ),
                         activeCheckoutStage.description && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Text, { as: "p", children: activeCheckoutStage.description })
                       ] }),
-                      checkoutStage === "plan" && availablePeriods.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                      checkoutStage === "plan" && showPeriodToggle && availablePeriods.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                         PeriodToggle,
                         {
                           options: availablePeriods,
@@ -14799,7 +14935,8 @@ var CheckoutDialog = ({ top = 0 }) => {
                     plans: availablePlans,
                     selectedPlan,
                     selectPlan,
-                    shouldTrial
+                    shouldTrial,
+                    showPeriodToggle
                   }
                 ),
                 checkoutStage === "usage" && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
@@ -18245,7 +18382,7 @@ var Plan2 = ({
   );
   const isActivePlan = isHydratedPlan(plan) && plan.current && currentPeriod === selectedPeriod;
   const { price: planPrice, currency: planCurrency } = getPlanPrice(plan, selectedPeriod) || {};
-  const credits = isHydratedPlan(plan) ? groupPlanCreditGrants(plan.includedCreditGrants) : [];
+  const credits = groupPlanCreditGrants(plan.includedCreditGrants);
   const hasUsageBasedEntitlements = plan.entitlements.some(
     (entitlement) => !!entitlement.priceBehavior
   );
@@ -18540,7 +18677,7 @@ var PricingTable = (0, import_react51.forwardRef)(
     const props = resolveDesignProps8(rest);
     const { t: t2 } = useTranslation();
     const { data, settings, isPending, hydratePublic } = useEmbed();
-    const { currentPeriod, isStandalone } = (0, import_react51.useMemo)(() => {
+    const { currentPeriod, showPeriodToggle, isStandalone } = (0, import_react51.useMemo)(() => {
       if (isCheckoutData(data)) {
         const billingSubscription = data.company?.billingSubscription;
         const isTrialSubscription = billingSubscription?.status === "trialing";
@@ -18549,6 +18686,7 @@ var PricingTable = (0, import_react51.forwardRef)(
           currentPeriod: data.company?.plan?.planPeriod || "month",
           currentAddOns: data.company?.addOns || [],
           canCheckout: data.capabilities?.checkout ?? true,
+          showPeriodToggle: data.showPeriodToggle ?? props.showPeriodToggle,
           isTrialSubscription,
           willSubscriptionCancel,
           isStandalone: false
@@ -18558,13 +18696,16 @@ var PricingTable = (0, import_react51.forwardRef)(
         currentPeriod: "month",
         currentAddOns: [],
         canCheckout: true,
+        showPeriodToggle: props.showPeriodToggle,
         isTrialSubscription: false,
         willSubscriptionCancel: false,
         isStandalone: true
       };
-    }, [data]);
+    }, [props.showPeriodToggle, data]);
     const [selectedPeriod, setSelectedPeriod] = (0, import_react51.useState)(currentPeriod);
-    const { plans, addOns, periods } = useAvailablePlans(selectedPeriod);
+    const { plans, addOns, periods } = useAvailablePlans(selectedPeriod, {
+      useSelectedPeriod: showPeriodToggle
+    });
     const [entitlementCounts, setEntitlementCounts] = (0, import_react51.useState)(
       () => plans.reduce(entitlementCountsReducer, {})
     );
@@ -18638,7 +18779,7 @@ var PricingTable = (0, import_react51.forwardRef)(
                       children: props.header.isVisible && props.plans.isVisible && plans.length > 0 && t2("Plans")
                     }
                   ),
-                  props.showPeriodToggle && periods.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+                  showPeriodToggle && periods.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
                     PeriodToggle,
                     {
                       options: periods,
@@ -18659,24 +18800,27 @@ var PricingTable = (0, import_react51.forwardRef)(
                 $display: "grid",
                 $gridTemplateColumns: "repeat(auto-fill, minmax(320px, 1fr))",
                 $gap: "1rem",
-                children: plans.map((plan, index, self2) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-                  Plan2,
-                  {
-                    plan,
-                    index,
-                    sharedProps: {
-                      layout: props,
-                      callToActionUrl,
-                      callToActionTarget,
-                      onCallToAction
+                children: plans.map((plan, index, self2) => {
+                  const planPeriod = showPeriodToggle ? selectedPeriod : plan.yearlyPrice && !plan.monthlyPrice ? "year" /* Year */ : "month" /* Month */;
+                  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+                    Plan2,
+                    {
+                      plan,
+                      index,
+                      sharedProps: {
+                        layout: props,
+                        callToActionUrl,
+                        callToActionTarget,
+                        onCallToAction
+                      },
+                      plans: self2,
+                      selectedPeriod: planPeriod,
+                      entitlementCounts,
+                      handleToggleShowAll
                     },
-                    plans: self2,
-                    selectedPeriod,
-                    entitlementCounts,
-                    handleToggleShowAll
-                  },
-                  index
-                ))
+                    index
+                  );
+                })
               }
             )
           ] }),
@@ -18703,20 +18847,23 @@ var PricingTable = (0, import_react51.forwardRef)(
                 $display: "grid",
                 $gridTemplateColumns: "repeat(auto-fill, minmax(320px, 1fr))",
                 $gap: "1rem",
-                children: addOns.map((addOn, index) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-                  AddOn2,
-                  {
-                    addOn,
-                    sharedProps: {
-                      layout: props,
-                      callToActionUrl,
-                      callToActionTarget,
-                      onCallToAction
+                children: addOns.map((addOn, index) => {
+                  const addOnPeriod = showPeriodToggle ? selectedPeriod : addOn.yearlyPrice && !addOn.monthlyPrice ? "year" /* Year */ : "month" /* Month */;
+                  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+                    AddOn2,
+                    {
+                      addOn,
+                      sharedProps: {
+                        layout: props,
+                        callToActionUrl,
+                        callToActionTarget,
+                        onCallToAction
+                      },
+                      selectedPeriod: addOnPeriod
                     },
-                    selectedPeriod
-                  },
-                  index
-                ))
+                    index
+                  );
+                })
               }
             )
           ] }) })

package/dist/schematic-components.d.ts

@@ -15,6 +15,10 @@ import { RefAttributes } from 'react';
 import { RuleSet } from 'styled-components';
 import { Substitute } from 'styled-components/dist/types';
 
+declare interface AvailablePlanOptions {
+    useSelectedPeriod?: boolean;
+}
+
 /**
  *
  * @export
@@ -1876,6 +1880,12 @@ declare interface ChangeSubscriptionRequestBody {
     skipTrial: boolean;
 }
 
+export declare const CheckoutDialog: ({ top }: CheckoutDialogProps) => JSX.Element;
+
+declare interface CheckoutDialogProps {
+    top?: number;
+}
+
 /**
  *
  * @export
@@ -1896,6 +1906,13 @@ declare interface CheckoutResponse {
     params: object;
 }
 
+export declare interface CheckoutStage {
+    id: string;
+    name: string;
+    label?: string;
+    description?: string;
+}
+
 export declare type CheckoutState = {
     period?: string;
     planId?: string | null;
@@ -2375,7 +2392,7 @@ declare interface CompanyPlanDetailResponseData {
      * @type {Array<PlanCreditGrantView>}
      * @memberof CompanyPlanDetailResponseData
      */
-    includedCreditGrants: Array<PlanCreditGrantView>;
+    includedCreditGrants: Array<PlanCreditGrantView_2>;
     /**
      *
      * @type {boolean}
@@ -2811,6 +2828,12 @@ declare interface ComponentHydrateResponseData {
      * @memberof ComponentHydrateResponseData
      */
     featureUsage?: FeatureUsageDetailResponseData;
+    /**
+     *
+     * @type {boolean}
+     * @memberof ComponentHydrateResponseData
+     */
+    showPeriodToggle: boolean;
     /**
      *
      * @type {StripeEmbedInfo}
@@ -2921,6 +2944,8 @@ declare interface ConfigurationParameters {
 
 export declare const Container: IStyledComponentBase<"web", FastOmit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 
+export declare const createActiveUsageBasedEntitlementsReducer: (entitlements: FeatureUsageResponseData[], period: string) => (acc: UsageBasedEntitlement[], entitlement: PlanEntitlementResponseData_2) => UsageBasedEntitlement[];
+
 /**
  *
  * @export
@@ -3422,6 +3447,7 @@ export declare const EmbedContext: Context<EmbedContextProps>;
 
 export declare interface EmbedContextProps extends EmbedState {
     hydratePublic: () => DebouncedApiPromise<PublicPlansResponseData>;
+    hydrate: () => DebouncedApiPromise<ComponentHydrateResponseData>;
     hydrateComponent: (id: string) => DebouncedApiPromise<ComponentHydrateResponseData>;
     hydrateExternal: (fn: () => Promise<ComponentHydrateResponseData>) => DebouncedApiPromise<ComponentHydrateResponseData>;
     getUpcomingInvoice: (id: string) => DebouncedApiPromise<HydrateUpcomingInvoiceResponse>;
@@ -4761,6 +4787,7 @@ export declare type IncludedFeaturesProps = DesignProps_2;
 
 export declare const initialContext: {
     hydratePublic: () => never;
+    hydrate: () => never;
     hydrateComponent: () => never;
     hydrateExternal: () => never;
     getUpcomingInvoice: () => never;
@@ -5268,6 +5295,109 @@ declare interface PlanCreditGrantView {
     updatedAt: Date;
 }
 
+/**
+ * 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 PlanCreditGrantView
+ */
+declare interface PlanCreditGrantView_2 {
+    /**
+     *
+     * @type {Date}
+     * @memberof PlanCreditGrantView
+     */
+    createdAt: Date;
+    /**
+     *
+     * @type {number}
+     * @memberof PlanCreditGrantView
+     */
+    creditAmount: number;
+    /**
+     *
+     * @type {string}
+     * @memberof PlanCreditGrantView
+     */
+    creditDescription: string;
+    /**
+     *
+     * @type {string}
+     * @memberof PlanCreditGrantView
+     */
+    creditIcon?: string | null;
+    /**
+     *
+     * @type {string}
+     * @memberof PlanCreditGrantView
+     */
+    creditId: string;
+    /**
+     *
+     * @type {string}
+     * @memberof PlanCreditGrantView
+     */
+    creditName: string;
+    /**
+     *
+     * @type {string}
+     * @memberof PlanCreditGrantView
+     */
+    id: string;
+    /**
+     *
+     * @type {string}
+     * @memberof PlanCreditGrantView
+     */
+    planId: string;
+    /**
+     *
+     * @type {string}
+     * @memberof PlanCreditGrantView
+     */
+    planName: string;
+    /**
+     *
+     * @type {string}
+     * @memberof PlanCreditGrantView
+     */
+    pluralName?: string | null;
+    /**
+     *
+     * @type {string}
+     * @memberof PlanCreditGrantView
+     */
+    resetCadence: string;
+    /**
+     *
+     * @type {string}
+     * @memberof PlanCreditGrantView
+     */
+    resetStart: string;
+    /**
+     *
+     * @type {string}
+     * @memberof PlanCreditGrantView
+     */
+    singularName?: string | null;
+    /**
+     *
+     * @type {Date}
+     * @memberof PlanCreditGrantView
+     */
+    updatedAt: Date;
+}
+
 /**
  *
  * @export
@@ -5930,6 +6060,12 @@ declare interface PlanViewPublicResponseData {
      * @memberof PlanViewPublicResponseData
      */
     id: string;
+    /**
+     *
+     * @type {Array<PlanCreditGrantView>}
+     * @memberof PlanViewPublicResponseData
+     */
+    includedCreditGrants: Array<PlanCreditGrantView>;
     /**
      *
      * @type {boolean}
@@ -7035,7 +7171,7 @@ declare type SelectedPlan = Plan & {
  * Do not edit the class manually.
  */
 /**
- *
+ * The returned resource
  * @export
  * @interface SetupIntentResponseData
  */
@@ -7326,6 +7462,12 @@ declare interface UpdatePaymentMethodResponse {
     params: object;
 }
 
+declare interface UsageBasedEntitlement extends PlanEntitlementResponseData_2 {
+    allocation: number;
+    usage: number;
+    quantity: number;
+}
+
 /**
  *
  * @export
@@ -7400,7 +7542,7 @@ declare interface UsageBasedEntitlementResponseData {
     yearlyUsageBasedPrice?: BillingPriceView_2;
 }
 
-export declare function useAvailablePlans(activePeriod: string): {
+export declare function useAvailablePlans(activePeriod: string, options?: AvailablePlanOptions): {
     plans: SelectedPlan[];
     addOns: SelectedPlan[];
     periods: string[];

package/dist/schematic-components.esm.js

@@ -1879,8 +1879,8 @@ function getPriceValue(billingPrice) {
   const price = typeof billingPrice.priceDecimal === "string" ? Number(billingPrice.priceDecimal) : billingPrice.price;
   return price;
 }
-function getPlanPrice(plan, period = "month") {
-  const billingPrice = period === "year" ? plan.yearlyPrice : plan.monthlyPrice;
+function getPlanPrice(plan, period = "month", options2 = { useSelectedPeriod: true }) {
+  const billingPrice = options2.useSelectedPeriod ? period === "year" ? plan.yearlyPrice : plan.monthlyPrice : plan.yearlyPrice && !plan.monthlyPrice ? plan.yearlyPrice : plan.monthlyPrice;
   if (billingPrice) {
     return { ...billingPrice, price: getPriceValue(billingPrice) };
   }
@@ -4079,7 +4079,7 @@ attr.rem = function propAsRem(key, value) {
 };
 
 // src/hooks/useAvailablePlans.ts
-function useAvailablePlans(activePeriod) {
+function useAvailablePlans(activePeriod, options2 = { useSelectedPeriod: true }) {
   const { data, settings } = useEmbed();
   const getAvailablePeriods = useCallback(() => {
     const periods = [];
@@ -4093,12 +4093,15 @@ function useAvailablePlans(activePeriod) {
   }, [data?.activePlans, data?.activeAddOns]);
   const getActivePlans = useCallback(
     (plans) => {
-      const activePlans = settings.mode === "edit" ? plans.slice() : plans.filter(
-        (plan) => activePeriod === "month" && plan.monthlyPrice || activePeriod === "year" && plan.yearlyPrice || plan.chargeType === ChargeType.oneTime
-      );
+      const activePlans = settings.mode === "edit" ? plans.slice() : plans.filter((plan) => {
+        if (options2.useSelectedPeriod) {
+          return activePeriod === "month" && plan.monthlyPrice || activePeriod === "year" && plan.yearlyPrice || plan.chargeType === ChargeType.oneTime;
+        }
+        return plan.monthlyPrice || plan.yearlyPrice || plan.chargeType === ChargeType.oneTime;
+      });
       return activePlans.map((plan) => ({ ...plan, isSelected: false }));
     },
-    [activePeriod, settings.mode]
+    [activePeriod, options2.useSelectedPeriod, settings.mode]
   );
   return useMemo(() => {
     return {
@@ -4200,6 +4203,7 @@ var stub = () => {
 var initialContext = {
   ...initialState,
   hydratePublic: stub,
+  hydrate: stub,
   hydrateComponent: stub,
   hydrateExternal: stub,
   getUpcomingInvoice: stub,
@@ -4648,6 +4652,26 @@ var postProcessor = {
     return value;
   }
 };
+var PATH_KEY = Symbol("i18next/PATH_KEY");
+function createProxy() {
+  const state = [];
+  const handler = /* @__PURE__ */ Object.create(null);
+  let proxy;
+  handler.get = (target, key) => {
+    proxy?.revoke?.();
+    if (key === PATH_KEY) return state;
+    state.push(key);
+    proxy = Proxy.revocable(target, handler);
+    return proxy.proxy;
+  };
+  return Proxy.revocable(/* @__PURE__ */ Object.create(null), handler).proxy;
+}
+function keysFromSelector(selector, opts) {
+  const {
+    [PATH_KEY]: path
+  } = selector(createProxy());
+  return path.join(opts?.keySeparator ?? ".");
+}
 var checkedLoadedFor = {};
 var shouldHandleAsObject = (res) => !isString(res) && typeof res !== "boolean" && typeof res !== "number";
 var Translator = class _Translator extends EventEmitter {
@@ -4709,6 +4733,7 @@ var Translator = class _Translator extends EventEmitter {
     };
     if (!opt) opt = {};
     if (keys == null) return "";
+    if (typeof keys === "function") keys = keysFromSelector(keys, opt);
     if (!Array.isArray(keys)) keys = [String(keys)];
     const returnDetails = opt.returnDetails !== void 0 ? opt.returnDetails : this.options.returnDetails;
     const keySeparator = opt.keySeparator !== void 0 ? opt.keySeparator : this.options.keySeparator;
@@ -5962,7 +5987,7 @@ var I18n = class _I18n extends EventEmitter {
       });
       const usingLegacyFormatFunction = this.options.interpolation.format && this.options.interpolation.format !== defOpts.interpolation.format;
       if (usingLegacyFormatFunction) {
-        this.logger.warn(`init: you are still using the legacy format function, please use the new approach: https://www.i18next.com/translation-function/formatting`);
+        this.logger.deprecate(`init: you are still using the legacy format function, please use the new approach: https://www.i18next.com/translation-function/formatting`);
       }
       if (formatter && (!this.options.interpolation.format || this.options.interpolation.format === defOpts.interpolation.format)) {
         s2.formatter = createClassOnDemand(formatter);
@@ -8647,6 +8672,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"],
     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"],
@@ -8740,6 +8766,20 @@ function HydrateComponentResponseFromJSONTyped(json, ignoreDiscriminator) {
   };
 }
 
+// src/api/checkoutexternal/models/HydrateResponse.ts
+function HydrateResponseFromJSON(json) {
+  return HydrateResponseFromJSONTyped(json, false);
+}
+function HydrateResponseFromJSONTyped(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    data: ComponentHydrateResponseDataFromJSON(json["data"]),
+    params: json["params"]
+  };
+}
+
 // src/api/checkoutexternal/models/HydrateUpcomingInvoiceResponse.ts
 function HydrateUpcomingInvoiceResponseFromJSON(json) {
   return HydrateUpcomingInvoiceResponseFromJSONTyped(json, false);
@@ -9111,6 +9151,38 @@ var CheckoutexternalApi = class extends BaseAPI {
     );
     return await response.value();
   }
+  /**
+   * Hydrate
+   */
+  async hydrateRaw(initOverrides) {
+    const queryParameters = {};
+    const headerParameters = {};
+    if (this.configuration && this.configuration.apiKey) {
+      headerParameters["X-Schematic-Api-Key"] = await this.configuration.apiKey(
+        "X-Schematic-Api-Key"
+      );
+    }
+    const response = await this.request(
+      {
+        path: `/components/hydrate`,
+        method: "GET",
+        headers: headerParameters,
+        query: queryParameters
+      },
+      initOverrides
+    );
+    return new JSONApiResponse(
+      response,
+      (jsonValue) => HydrateResponseFromJSON(jsonValue)
+    );
+  }
+  /**
+   * Hydrate
+   */
+  async hydrate(initOverrides) {
+    const response = await this.hydrateRaw(initOverrides);
+    return await response.value();
+  }
   /**
    * Hydrate component
    */
@@ -10007,6 +10079,32 @@ function FeatureDetailResponseDataFromJSONTyped6(json, ignoreDiscriminator) {
   };
 }
 
+// src/api/componentspublic/models/PlanCreditGrantView.ts
+function PlanCreditGrantViewFromJSON2(json) {
+  return PlanCreditGrantViewFromJSONTyped3(json, false);
+}
+function PlanCreditGrantViewFromJSONTyped3(json, ignoreDiscriminator) {
+  if (json == null) {
+    return json;
+  }
+  return {
+    createdAt: new Date(json["created_at"]),
+    creditAmount: json["credit_amount"],
+    creditDescription: json["credit_description"],
+    creditIcon: json["credit_icon"] == null ? void 0 : json["credit_icon"],
+    creditId: json["credit_id"],
+    creditName: json["credit_name"],
+    id: json["id"],
+    planId: json["plan_id"],
+    planName: json["plan_name"],
+    pluralName: json["plural_name"] == null ? void 0 : json["plural_name"],
+    resetCadence: json["reset_cadence"],
+    resetStart: json["reset_start"],
+    singularName: json["singular_name"] == null ? void 0 : json["singular_name"],
+    updatedAt: new Date(json["updated_at"])
+  };
+}
+
 // src/api/componentspublic/models/PlanResponseData.ts
 function PlanResponseDataFromJSON2(json) {
   return PlanResponseDataFromJSONTyped4(json, false);
@@ -10090,6 +10188,9 @@ function PlanViewPublicResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     ),
     icon: json["icon"],
     id: json["id"],
+    includedCreditGrants: json["included_credit_grants"].map(
+      PlanCreditGrantViewFromJSON2
+    ),
     isCustom: json["is_custom"],
     isDefault: json["is_default"],
     isFree: json["is_free"],
@@ -10201,6 +10302,7 @@ var reducer = (state, action) => {
       };
     }
     case "HYDRATE_PUBLIC":
+    case "HYDRATE":
     case "HYDRATE_COMPONENT":
     case "HYDRATE_EXTERNAL": {
       return {
@@ -10319,7 +10421,7 @@ var EmbedProvider = ({
   });
   const customHeaders = useMemo3(
     () => ({
-      "X-Schematic-Components-Version": "1.3.0",
+      "X-Schematic-Components-Version": "1.4.0",
       "X-Schematic-Session-ID": sessionIdRef.current
     }),
     []
@@ -10355,6 +10457,28 @@ var EmbedProvider = ({
     () => (0, import_debounce.default)(hydratePublic, FETCH_DEBOUNCE_TIMEOUT, debounceOptions),
     [hydratePublic]
   );
+  const hydrate = useCallback3(async () => {
+    dispatch({ type: "HYDRATE_STARTED" });
+    try {
+      const response = await api.checkout?.hydrate();
+      if (response) {
+        dispatch({
+          type: "HYDRATE",
+          data: response.data
+        });
+      }
+      return response?.data;
+    } catch (err2) {
+      dispatch({
+        type: "ERROR",
+        error: isError(err2) ? err2 : ERROR_UNKNOWN
+      });
+    }
+  }, [api.checkout]);
+  const debouncedHydrate = useMemo3(
+    () => (0, import_debounce.default)(hydrate, FETCH_DEBOUNCE_TIMEOUT, debounceOptions),
+    [hydrate]
+  );
   const hydrateComponent = useCallback3(
     async (id) => {
       dispatch({ type: "HYDRATE_STARTED" });
@@ -10637,6 +10761,7 @@ var EmbedProvider = ({
         layout: state.layout,
         checkoutState: state.checkoutState,
         hydratePublic: debouncedHydratePublic,
+        hydrate: debouncedHydrate,
         hydrateComponent: debouncedHydrateComponent,
         hydrateExternal: debouncedHydrateExternal,
         createSetupIntent: debouncedCreateSetupIntent,
@@ -13592,7 +13717,8 @@ var Plan = ({
   selectedPlan,
   period,
   selectPlan,
-  shouldTrial
+  shouldTrial,
+  showPeriodToggle
 }) => {
   const { t: t2 } = useTranslation();
   const { data, settings } = useEmbed();
@@ -13631,8 +13757,9 @@ var Plan = ({
       $gap: "1rem",
       $flexGrow: 1,
       children: plans.map((plan, planIndex) => {
-        const { price: planPrice, currency: planCurrency } = getPlanPrice(plan, period) || {};
-        const credits = isHydratedPlan(plan) ? groupPlanCreditGrants(plan.includedCreditGrants) : [];
+        const planPeriod = showPeriodToggle ? period : plan.yearlyPrice && !plan.monthlyPrice ? "year" /* Year */ : "month" /* Month */;
+        const { price: planPrice, currency: planCurrency } = getPlanPrice(plan, planPeriod) || {};
+        const credits = groupPlanCreditGrants(plan.includedCreditGrants);
         const hasUsageBasedEntitlements = plan.entitlements.some(
           (entitlement) => !!entitlement.priceBehavior
         );
@@ -13691,7 +13818,7 @@ var Plan = ({
                           $size: 16 / 30 * settings.theme.typography.heading2.fontSize,
                           children: [
                             "/",
-                            period
+                            planPeriod
                           ]
                         }
                       )
@@ -13787,7 +13914,7 @@ var Plan = ({
                           priceTier: entitlementPriceTiers,
                           currency: entitlementCurrency,
                           packageSize: entitlementPackageSize = 1
-                        } = getEntitlementPrice(entitlement, period) || {};
+                        } = getEntitlementPrice(entitlement, planPeriod) || {};
                         const metricPeriodName = getMetricPeriodName(entitlement);
                         return /* @__PURE__ */ jsx18(
                           Flex,
@@ -13833,13 +13960,13 @@ var Plan = ({
                                         " ",
                                         t2("per"),
                                         " ",
-                                        period
+                                        planPeriod
                                       ] })
                                     ] }) : entitlement.priceBehavior === "tier" /* Tiered */ ? /* @__PURE__ */ jsx18(
                                       TieredPricingDetails,
                                       {
                                         entitlement,
-                                        period
+                                        period: planPeriod
                                       }
                                     ) : entitlement.priceBehavior === "credit_burndown" /* Credit */ && entitlement.valueCredit ? /* @__PURE__ */ jsxs14(Fragment8, { children: [
                                       entitlement.consumptionRate,
@@ -13896,7 +14023,7 @@ var Plan = ({
                                           ),
                                           entitlement.feature.featureType === "trait" /* Trait */ && /* @__PURE__ */ jsxs14(Fragment8, { children: [
                                             "/",
-                                            shortenPeriod(period)
+                                            shortenPeriod(planPeriod)
                                           ] })
                                         ]
                                       }
@@ -13905,7 +14032,7 @@ var Plan = ({
                                         PricingTiersTooltip,
                                         {
                                           feature: entitlement.feature,
-                                          period,
+                                          period: planPeriod,
                                           currency: entitlementCurrency,
                                           priceTiers: entitlementPriceTiers
                                         }
@@ -14162,17 +14289,24 @@ var CheckoutDialog = ({ top = 0 }) => {
     addOns: availableAddOns,
     periods: availablePeriods
   } = useAvailablePlans(planPeriod);
-  const { currentPlanId, currentEntitlements, trialPaymentMethodRequired } = useMemo9(() => {
+  const {
+    currentPlanId,
+    currentEntitlements,
+    showPeriodToggle,
+    trialPaymentMethodRequired
+  } = useMemo9(() => {
     if (isCheckoutData(data)) {
       return {
         currentPlanId: data.company?.plan?.id,
         currentEntitlements: data.featureUsage ? data.featureUsage.features : [],
+        showPeriodToggle: data.showPeriodToggle,
         trialPaymentMethodRequired: data.trialPaymentMethodRequired === true
       };
     }
     return {
       currentPlanId: void 0,
       currentEntitlements: [],
+      showPeriodToggle: true,
       trialPaymentMethodRequired: false
     };
   }, [data]);
@@ -14732,7 +14866,7 @@ var CheckoutDialog = ({ top = 0 }) => {
                         ),
                         activeCheckoutStage.description && /* @__PURE__ */ jsx20(Text, { as: "p", children: activeCheckoutStage.description })
                       ] }),
-                      checkoutStage === "plan" && availablePeriods.length > 1 && /* @__PURE__ */ jsx20(
+                      checkoutStage === "plan" && showPeriodToggle && availablePeriods.length > 1 && /* @__PURE__ */ jsx20(
                         PeriodToggle,
                         {
                           options: availablePeriods,
@@ -14752,7 +14886,8 @@ var CheckoutDialog = ({ top = 0 }) => {
                     plans: availablePlans,
                     selectedPlan,
                     selectPlan,
-                    shouldTrial
+                    shouldTrial,
+                    showPeriodToggle
                   }
                 ),
                 checkoutStage === "usage" && /* @__PURE__ */ jsx20(
@@ -18208,7 +18343,7 @@ var Plan2 = ({
   );
   const isActivePlan = isHydratedPlan(plan) && plan.current && currentPeriod === selectedPeriod;
   const { price: planPrice, currency: planCurrency } = getPlanPrice(plan, selectedPeriod) || {};
-  const credits = isHydratedPlan(plan) ? groupPlanCreditGrants(plan.includedCreditGrants) : [];
+  const credits = groupPlanCreditGrants(plan.includedCreditGrants);
   const hasUsageBasedEntitlements = plan.entitlements.some(
     (entitlement) => !!entitlement.priceBehavior
   );
@@ -18503,7 +18638,7 @@ var PricingTable = forwardRef12(
     const props = resolveDesignProps8(rest);
     const { t: t2 } = useTranslation();
     const { data, settings, isPending, hydratePublic } = useEmbed();
-    const { currentPeriod, isStandalone } = useMemo26(() => {
+    const { currentPeriod, showPeriodToggle, isStandalone } = useMemo26(() => {
       if (isCheckoutData(data)) {
         const billingSubscription = data.company?.billingSubscription;
         const isTrialSubscription = billingSubscription?.status === "trialing";
@@ -18512,6 +18647,7 @@ var PricingTable = forwardRef12(
           currentPeriod: data.company?.plan?.planPeriod || "month",
           currentAddOns: data.company?.addOns || [],
           canCheckout: data.capabilities?.checkout ?? true,
+          showPeriodToggle: data.showPeriodToggle ?? props.showPeriodToggle,
           isTrialSubscription,
           willSubscriptionCancel,
           isStandalone: false
@@ -18521,13 +18657,16 @@ var PricingTable = forwardRef12(
         currentPeriod: "month",
         currentAddOns: [],
         canCheckout: true,
+        showPeriodToggle: props.showPeriodToggle,
         isTrialSubscription: false,
         willSubscriptionCancel: false,
         isStandalone: true
       };
-    }, [data]);
+    }, [props.showPeriodToggle, data]);
     const [selectedPeriod, setSelectedPeriod] = useState17(currentPeriod);
-    const { plans, addOns, periods } = useAvailablePlans(selectedPeriod);
+    const { plans, addOns, periods } = useAvailablePlans(selectedPeriod, {
+      useSelectedPeriod: showPeriodToggle
+    });
     const [entitlementCounts, setEntitlementCounts] = useState17(
       () => plans.reduce(entitlementCountsReducer, {})
     );
@@ -18601,7 +18740,7 @@ var PricingTable = forwardRef12(
                       children: props.header.isVisible && props.plans.isVisible && plans.length > 0 && t2("Plans")
                     }
                   ),
-                  props.showPeriodToggle && periods.length > 1 && /* @__PURE__ */ jsx46(
+                  showPeriodToggle && periods.length > 1 && /* @__PURE__ */ jsx46(
                     PeriodToggle,
                     {
                       options: periods,
@@ -18622,24 +18761,27 @@ var PricingTable = forwardRef12(
                 $display: "grid",
                 $gridTemplateColumns: "repeat(auto-fill, minmax(320px, 1fr))",
                 $gap: "1rem",
-                children: plans.map((plan, index, self2) => /* @__PURE__ */ jsx46(
-                  Plan2,
-                  {
-                    plan,
-                    index,
-                    sharedProps: {
-                      layout: props,
-                      callToActionUrl,
-                      callToActionTarget,
-                      onCallToAction
+                children: plans.map((plan, index, self2) => {
+                  const planPeriod = showPeriodToggle ? selectedPeriod : plan.yearlyPrice && !plan.monthlyPrice ? "year" /* Year */ : "month" /* Month */;
+                  return /* @__PURE__ */ jsx46(
+                    Plan2,
+                    {
+                      plan,
+                      index,
+                      sharedProps: {
+                        layout: props,
+                        callToActionUrl,
+                        callToActionTarget,
+                        onCallToAction
+                      },
+                      plans: self2,
+                      selectedPeriod: planPeriod,
+                      entitlementCounts,
+                      handleToggleShowAll
                     },
-                    plans: self2,
-                    selectedPeriod,
-                    entitlementCounts,
-                    handleToggleShowAll
-                  },
-                  index
-                ))
+                    index
+                  );
+                })
               }
             )
           ] }),
@@ -18666,20 +18808,23 @@ var PricingTable = forwardRef12(
                 $display: "grid",
                 $gridTemplateColumns: "repeat(auto-fill, minmax(320px, 1fr))",
                 $gap: "1rem",
-                children: addOns.map((addOn, index) => /* @__PURE__ */ jsx46(
-                  AddOn2,
-                  {
-                    addOn,
-                    sharedProps: {
-                      layout: props,
-                      callToActionUrl,
-                      callToActionTarget,
-                      onCallToAction
+                children: addOns.map((addOn, index) => {
+                  const addOnPeriod = showPeriodToggle ? selectedPeriod : addOn.yearlyPrice && !addOn.monthlyPrice ? "year" /* Year */ : "month" /* Month */;
+                  return /* @__PURE__ */ jsx46(
+                    AddOn2,
+                    {
+                      addOn,
+                      sharedProps: {
+                        layout: props,
+                        callToActionUrl,
+                        callToActionTarget,
+                        onCallToAction
+                      },
+                      selectedPeriod: addOnPeriod
                     },
-                    selectedPeriod
-                  },
-                  index
-                ))
+                    index
+                  );
+                })
               }
             )
           ] }) })
@@ -23323,6 +23468,7 @@ export {
   Button,
   ButtonElement,
   Card,
+  CheckoutDialog,
   Column,
   Container,
   Element,
@@ -23356,6 +23502,7 @@ export {
   UpcomingBill,
   Viewport,
   cardBoxShadow,
+  createActiveUsageBasedEntitlementsReducer,
   defaultSettings,
   defaultTheme,
   iconsList,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schematichq/schematic-components",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "main": "dist/schematic-components.cjs.js",
   "module": "dist/schematic-components.esm.js",
   "types": "dist/schematic-components.d.ts",
@@ -34,10 +34,10 @@
   "dependencies": {
     "@schematichq/schematic-icons": "^0.5.2",
     "@stripe/stripe-js": "^7.8.0",
-    "i18next": "^25.3.4",
+    "i18next": "^25.4.0",
     "lodash": "^4.17.21",
     "pako": "^2.1.0",
-    "react-i18next": "^15.6.1",
+    "react-i18next": "^15.7.0",
     "styled-components": "^6.1.19",
     "uuid": "^11.1.0"
   },
@@ -45,15 +45,15 @@
     "@eslint/js": "^9.33.0",
     "@eslint/json": "^0.13.0",
     "@eslint/markdown": "^7.1.0",
-    "@microsoft/api-extractor": "^7.52.10",
-    "@openapitools/openapi-generator-cli": "^2.21.4",
-    "@stripe/react-stripe-js": "^3.9.0",
+    "@microsoft/api-extractor": "^7.52.11",
+    "@openapitools/openapi-generator-cli": "^2.22.0",
+    "@stripe/react-stripe-js": "^3.9.1",
     "@types/jest": "^30.0.0",
     "@types/lodash": "^4.17.20",
-    "@types/pako": "^2.0.3",
-    "@types/react": "^19.1.9",
+    "@types/pako": "^2.0.4",
+    "@types/react": "^19.1.10",
     "@types/react-dom": "^19.1.7",
-    "esbuild": "^0.25.8",
+    "esbuild": "^0.25.9",
     "eslint": "^9.33.0",
     "eslint-import-resolver-typescript": "^4.4.4",
     "eslint-plugin-import": "^2.32.0",
@@ -69,7 +69,7 @@
     "react-dom": "^19.1.1",
     "ts-jest": "^29.4.1",
     "typescript": "^5.9.2",
-    "typescript-eslint": "^8.39.0"
+    "typescript-eslint": "^8.40.0"
   },
   "peerDependencies": {
     "@stripe/react-stripe-js": ">=3",