@schematichq/schematic-components 1.3.0 → 1.4.1

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);
@@ -7404,6 +7431,7 @@ function BillingCreditBundleViewFromJSONTyped(json, ignoreDiscriminator) {
     expiryType: json["expiry_type"],
     expiryUnit: json["expiry_unit"],
     expiryUnitCount: json["expiry_unit_count"] == null ? void 0 : json["expiry_unit_count"],
+    hasGrants: json["has_grants"],
     id: json["id"],
     name: json["name"],
     pluralName: json["plural_name"] == null ? void 0 : json["plural_name"],
@@ -7574,6 +7602,7 @@ function BillingProductForSubscriptionResponseDataFromJSONTyped(json, ignoreDisc
   }
   return {
     billingScheme: json["billing_scheme"],
+    billingThreshold: json["billing_threshold"] == null ? void 0 : json["billing_threshold"],
     createdAt: new Date(json["created_at"]),
     currency: json["currency"],
     environmentId: json["environment_id"],
@@ -7592,6 +7621,7 @@ function BillingProductForSubscriptionResponseDataFromJSONTyped(json, ignoreDisc
     ),
     quantity: json["quantity"],
     subscriptionId: json["subscription_id"],
+    subscriptionItemExternalId: json["subscription_item_external_id"] == null ? void 0 : json["subscription_item_external_id"],
     updatedAt: new Date(json["updated_at"]),
     usageType: json["usage_type"]
   };
@@ -8354,6 +8384,7 @@ function PlanEntitlementResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     return json;
   }
   return {
+    billingThreshold: json["billing_threshold"] == null ? void 0 : json["billing_threshold"],
     consumptionRate: json["consumption_rate"] == null ? void 0 : json["consumption_rate"],
     createdAt: new Date(json["created_at"]),
     environmentId: json["environment_id"],
@@ -8569,6 +8600,9 @@ function CreditCompanyGrantViewFromJSONTyped(json, ignoreDiscriminator) {
     creditIcon: json["credit_icon"] == null ? void 0 : json["credit_icon"],
     creditName: json["credit_name"],
     expiresAt: json["expires_at"] == null ? void 0 : new Date(json["expires_at"]),
+    expiryType: json["expiry_type"] == null ? void 0 : json["expiry_type"],
+    expiryUnit: json["expiry_unit"] == null ? void 0 : json["expiry_unit"],
+    expiryUnitCount: json["expiry_unit_count"] == null ? void 0 : json["expiry_unit_count"],
     grantReason: json["grant_reason"],
     id: json["id"],
     planId: json["plan_id"] == null ? void 0 : json["plan_id"],
@@ -8596,6 +8630,7 @@ function UsageBasedEntitlementResponseDataFromJSONTyped(json, ignoreDiscriminato
     return json;
   }
   return {
+    billingThreshold: json["billing_threshold"] == null ? void 0 : json["billing_threshold"],
     consumptionRate: json["consumption_rate"] == null ? void 0 : json["consumption_rate"],
     featureId: json["feature_id"],
     meteredPrice: json["metered_price"] == null ? void 0 : BillingPriceViewFromJSON(json["metered_price"]),
@@ -8704,6 +8739,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 +8833,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 +9218,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 +10146,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);
@@ -10093,6 +10201,7 @@ function PlanEntitlementResponseDataFromJSONTyped5(json, ignoreDiscriminator) {
     return json;
   }
   return {
+    billingThreshold: json["billing_threshold"] == null ? void 0 : json["billing_threshold"],
     consumptionRate: json["consumption_rate"] == null ? void 0 : json["consumption_rate"],
     createdAt: new Date(json["created_at"]),
     environmentId: json["environment_id"],
@@ -10147,6 +10256,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"],
@@ -10179,7 +10291,8 @@ function PublicPlansResponseDataFromJSONTyped(json, ignoreDiscriminator) {
     addOnCompatibilities: json["add_on_compatibilities"].map(
       CompatiblePlansFromJSON2
     ),
-    capabilities: json["capabilities"] == null ? void 0 : ComponentCapabilitiesFromJSON2(json["capabilities"])
+    capabilities: json["capabilities"] == null ? void 0 : ComponentCapabilitiesFromJSON2(json["capabilities"]),
+    showPeriodToggle: json["show_period_toggle"]
   };
 }
 
@@ -10258,6 +10371,7 @@ var reducer = (state, action) => {
       };
     }
     case "HYDRATE_PUBLIC":
+    case "HYDRATE":
     case "HYDRATE_COMPONENT":
     case "HYDRATE_EXTERNAL": {
       return {
@@ -10376,7 +10490,7 @@ var EmbedProvider = ({
   });
   const customHeaders = (0, import_react12.useMemo)(
     () => ({
-      "X-Schematic-Components-Version": "1.3.0",
+      "X-Schematic-Components-Version": "1.4.1",
       "X-Schematic-Session-ID": sessionIdRef.current
     }),
     []
@@ -10412,6 +10526,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 +10830,7 @@ var EmbedProvider = ({
         layout: state.layout,
         checkoutState: state.checkoutState,
         hydratePublic: debouncedHydratePublic,
+        hydrate: debouncedHydrate,
         hydrateComponent: debouncedHydrateComponent,
         hydrateExternal: debouncedHydrateExternal,
         createSetupIntent: debouncedCreateSetupIntent,
@@ -11058,7 +11195,6 @@ var Button = dt.button(
       ${() => $selfAlignment && lt`
           align-self: ${$selfAlignment};
         `}
-      gap: 0.5rem;
       width: ${$fullWidth ? "100%" : "fit-content"};
       border: 1px solid transparent;
       transition: 0.1s;
@@ -11162,6 +11298,9 @@ var Button = dt.button(
       &::before {
         content: "";
         ${loaderStyles({ $color: theme[$color], $size, $isLoading })}
+        ${$isLoading && lt`
+          margin-right: 0.5rem;
+        `}
       }
 
       &:disabled {
@@ -13639,7 +13778,8 @@ var Plan = ({
   selectedPlan,
   period,
   selectPlan,
-  shouldTrial
+  shouldTrial,
+  showPeriodToggle
 }) => {
   const { t: t2 } = useTranslation();
   const { data, settings } = useEmbed();
@@ -13678,8 +13818,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 +13879,7 @@ var Plan = ({
                           $size: 16 / 30 * settings.theme.typography.heading2.fontSize,
                           children: [
                             "/",
-                            period
+                            planPeriod
                           ]
                         }
                       )
@@ -13834,7 +13975,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 +14021,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 +14084,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 +14093,7 @@ var Plan = ({
                                         PricingTiersTooltip,
                                         {
                                           feature: entitlement.feature,
-                                          period,
+                                          period: planPeriod,
                                           currency: entitlementCurrency,
                                           priceTiers: entitlementPriceTiers
                                         }
@@ -14085,7 +14226,7 @@ var Usage = ({ entitlements, updateQuantity, period }) => {
                         $size: "lg",
                         type: "number",
                         value: entitlement.quantity,
-                        min: 1,
+                        min: 0,
                         autoFocus: true,
                         onFocus: (event) => {
                           event.target.select();
@@ -14093,7 +14234,7 @@ var Usage = ({ entitlements, updateQuantity, period }) => {
                         onChange: (event) => {
                           event.preventDefault();
                           const value = parseInt(event.target.value);
-                          if (!isNaN(value) && value > 0) {
+                          if (!isNaN(value)) {
                             updateQuantity(entitlement.id, value);
                           }
                         }
@@ -14172,7 +14313,7 @@ var createActiveUsageBasedEntitlementsReducer = (entitlements, period) => (acc,
     const featureUsage = entitlements.find(
       (usage2) => usage2.feature?.id === entitlement.feature?.id
     );
-    const allocation = featureUsage?.allocation || 1;
+    const allocation = featureUsage?.allocation || 0;
     const usage = featureUsage?.usage || 0;
     acc.push({
       ...entitlement,
@@ -14185,7 +14326,7 @@ var createActiveUsageBasedEntitlementsReducer = (entitlements, period) => (acc,
 };
 var CheckoutDialog = ({ top = 0 }) => {
   const { t: t2 } = useTranslation();
-  const { data, checkoutState, previewCheckout } = useEmbed();
+  const { data, settings, isPending, checkoutState, previewCheckout } = useEmbed();
   const isLightBackground = useIsLightBackground();
   const contentRef = (0, import_react30.useRef)(null);
   const checkoutRef = (0, import_react30.useRef)(null);
@@ -14199,30 +14340,39 @@ var CheckoutDialog = ({ top = 0 }) => {
   );
   const [isLoading, setIsLoading] = (0, import_react30.useState)(false);
   const [error, setError] = (0, import_react30.useState)();
-  const currentPeriod = (0, import_react30.useMemo)(
-    () => checkoutState?.period || isCheckoutData(data) && data.company?.plan?.planPeriod || "month",
-    [data, checkoutState?.period]
-  );
-  const [planPeriod, setPlanPeriod] = (0, import_react30.useState)(currentPeriod);
   const {
-    plans: availablePlans,
-    addOns: availableAddOns,
-    periods: availablePeriods
-  } = useAvailablePlans(planPeriod);
-  const { currentPlanId, currentEntitlements, trialPaymentMethodRequired } = (0, import_react30.useMemo)(() => {
+    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]);
+  const currentPeriod = (0, import_react30.useMemo)(
+    () => checkoutState?.period || isCheckoutData(data) && data.company?.plan?.planPeriod || "month",
+    [data, checkoutState?.period]
+  );
+  const [planPeriod, setPlanPeriod] = (0, import_react30.useState)(currentPeriod);
+  const {
+    plans: availablePlans,
+    addOns: availableAddOns,
+    periods: availablePeriods
+  } = useAvailablePlans(planPeriod, {
+    useSelectedPeriod: showPeriodToggle
+  });
   const [selectedPlan, setSelectedPlan] = (0, import_react30.useState)(
     () => {
       return availablePlans.find(
@@ -14370,20 +14520,8 @@ var CheckoutDialog = ({ top = 0 }) => {
     if (checkoutState?.credits) {
       return "credits";
     }
-    if (checkoutState?.planId !== currentPlanId) {
-      const hasUsageStage = checkoutStages.some(
-        (stage) => stage.id === "usage"
-      );
-      const hasAddonsStage = checkoutStages.some(
-        (stage) => stage.id === "addons"
-      );
-      const hasAddonsUsageStage = checkoutStages.some(
-        (stage) => stage.id === "addonsUsage"
-      );
-      if (hasUsageStage) return "usage";
-      if (hasAddonsStage) return "addons";
-      if (hasAddonsUsageStage) return "addonsUsage";
-      return "plan";
+    if (typeof checkoutState?.planId !== "undefined" && checkoutState.planId !== currentPlanId) {
+      return checkoutStages.some((stage) => stage.id === "usage") ? "usage" : checkoutStages.some((stage) => stage.id === "addons") ? "addons" : checkoutStages.some((stage) => stage.id === "addonsUsage") ? "addonsUsage" : checkoutStages.some((stage) => stage.id === "credits") ? "credits" : "plan";
     }
     return "plan";
   });
@@ -14522,7 +14660,7 @@ var CheckoutDialog = ({ top = 0 }) => {
               ...entitlement,
               allocation: entitlement.valueNumeric || 0,
               usage: 0,
-              quantity: entitlement.priceBehavior === "pay_in_advance" /* PayInAdvance */ ? 1 : 0
+              quantity: 0
             });
           }
           return acc;
@@ -14779,7 +14917,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,
@@ -14791,7 +14929,17 @@ var CheckoutDialog = ({ top = 0 }) => {
                     ]
                   }
                 ),
-                checkoutStage === "plan" && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                isPending ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                  Flex,
+                  {
+                    $width: "100%",
+                    $height: "100%",
+                    $alignItems: "center",
+                    $justifyContent: "center",
+                    $padding: `${settings.theme.card.padding / TEXT_BASE_SIZE}rem`,
+                    children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Loader, { $size: "2xl" })
+                  }
+                ) : checkoutStage === "plan" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                   Plan,
                   {
                     isLoading,
@@ -14799,10 +14947,10 @@ var CheckoutDialog = ({ top = 0 }) => {
                     plans: availablePlans,
                     selectedPlan,
                     selectPlan,
-                    shouldTrial
+                    shouldTrial,
+                    showPeriodToggle
                   }
-                ),
-                checkoutStage === "usage" && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                ) : checkoutStage === "usage" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                   Usage,
                   {
                     isLoading,
@@ -14811,8 +14959,7 @@ var CheckoutDialog = ({ top = 0 }) => {
                     entitlements: payInAdvanceEntitlements,
                     updateQuantity: updateUsageBasedEntitlementQuantity
                   }
-                ),
-                checkoutStage === "addons" && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                ) : checkoutStage === "addons" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                   AddOns,
                   {
                     isLoading,
@@ -14820,8 +14967,7 @@ var CheckoutDialog = ({ top = 0 }) => {
                     addOns,
                     toggle: (id) => toggleAddOn(id)
                   }
-                ),
-                checkoutStage === "addonsUsage" && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                ) : checkoutStage === "addonsUsage" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                   Usage,
                   {
                     isLoading,
@@ -14830,16 +14976,14 @@ var CheckoutDialog = ({ top = 0 }) => {
                     entitlements: addOnUsageBasedEntitlements,
                     updateQuantity: updateAddOnEntitlementQuantity
                   }
-                ),
-                checkoutStage === "credits" && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                ) : checkoutStage === "credits" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                   Credits,
                   {
                     isLoading,
                     bundles: creditBundles,
                     updateCount: updateCreditBundleCount
                   }
-                ),
-                checkoutStage === "checkout" && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                ) : checkoutStage === "checkout" && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                   Checkout,
                   {
                     isPaymentMethodRequired,
@@ -18245,7 +18389,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 +18684,8 @@ 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)(() => {
+      const showPeriodToggle2 = data?.showPeriodToggle ?? props.showPeriodToggle;
       if (isCheckoutData(data)) {
         const billingSubscription = data.company?.billingSubscription;
         const isTrialSubscription = billingSubscription?.status === "trialing";
@@ -18549,6 +18694,7 @@ var PricingTable = (0, import_react51.forwardRef)(
           currentPeriod: data.company?.plan?.planPeriod || "month",
           currentAddOns: data.company?.addOns || [],
           canCheckout: data.capabilities?.checkout ?? true,
+          showPeriodToggle: showPeriodToggle2,
           isTrialSubscription,
           willSubscriptionCancel,
           isStandalone: false
@@ -18558,13 +18704,16 @@ var PricingTable = (0, import_react51.forwardRef)(
         currentPeriod: "month",
         currentAddOns: [],
         canCheckout: true,
+        showPeriodToggle: showPeriodToggle2,
         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, {})
     );
@@ -18591,7 +18740,7 @@ var PricingTable = (0, import_react51.forwardRef)(
     (0, import_react51.useEffect)(() => {
       setEntitlementCounts(plans.reduce(entitlementCountsReducer, {}));
     }, [plans]);
-    if (isStandalone && isPending) {
+    if (isPending) {
       return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
         Flex,
         {
@@ -18638,7 +18787,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 +18808,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 +18855,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
+                  );
+                })
               }
             )
           ] }) })