@schematichq/schematic-components 1.4.0 → 1.4.1

package/dist/schematic-components.cjs.js

@@ -7431,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"],
@@ -7601,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"],
@@ -7619,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"]
   };
@@ -8381,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"],
@@ -8596,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"],
@@ -8623,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"]),
@@ -10193,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"],
@@ -10282,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"]
   };
 }
 
@@ -10480,7 +10490,7 @@ var EmbedProvider = ({
   });
   const customHeaders = (0, import_react12.useMemo)(
     () => ({
-      "X-Schematic-Components-Version": "1.4.0",
+      "X-Schematic-Components-Version": "1.4.1",
       "X-Schematic-Session-ID": sessionIdRef.current
     }),
     []
@@ -11185,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;
@@ -11289,6 +11298,9 @@ var Button = dt.button(
       &::before {
         content: "";
         ${loaderStyles({ $color: theme[$color], $size, $isLoading })}
+        ${$isLoading && lt`
+          margin-right: 0.5rem;
+        `}
       }
 
       &:disabled {
@@ -14214,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();
@@ -14222,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);
                           }
                         }
@@ -14301,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,
@@ -14314,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);
@@ -14328,16 +14340,6 @@ 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,
@@ -14359,6 +14361,18 @@ var CheckoutDialog = ({ top = 0 }) => {
       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(
@@ -14506,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";
   });
@@ -14658,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;
@@ -14927,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,
@@ -14938,8 +14950,7 @@ var CheckoutDialog = ({ top = 0 }) => {
                     shouldTrial,
                     showPeriodToggle
                   }
-                ),
-                checkoutStage === "usage" && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                ) : checkoutStage === "usage" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                   Usage,
                   {
                     isLoading,
@@ -14948,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,
@@ -14957,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,
@@ -14967,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,
@@ -18678,6 +18685,7 @@ var PricingTable = (0, import_react51.forwardRef)(
     const { t: t2 } = useTranslation();
     const { data, settings, isPending, hydratePublic } = useEmbed();
     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";
@@ -18686,7 +18694,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,
+          showPeriodToggle: showPeriodToggle2,
           isTrialSubscription,
           willSubscriptionCancel,
           isStandalone: false
@@ -18696,7 +18704,7 @@ var PricingTable = (0, import_react51.forwardRef)(
         currentPeriod: "month",
         currentAddOns: [],
         canCheckout: true,
-        showPeriodToggle: props.showPeriodToggle,
+        showPeriodToggle: showPeriodToggle2,
         isTrialSubscription: false,
         willSubscriptionCancel: false,
         isStandalone: true
@@ -18732,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,
         {

package/dist/schematic-components.d.ts

@@ -85,6 +85,12 @@ declare interface BillingCreditBundleView {
      * @memberof BillingCreditBundleView
      */
     expiryUnitCount?: number | null;
+    /**
+     *
+     * @type {boolean}
+     * @memberof BillingCreditBundleView
+     */
+    hasGrants: boolean;
     /**
      *
      * @type {string}
@@ -911,6 +917,12 @@ declare interface BillingProductForSubscriptionResponseData {
      * @memberof BillingProductForSubscriptionResponseData
      */
     billingScheme: string;
+    /**
+     *
+     * @type {number}
+     * @memberof BillingProductForSubscriptionResponseData
+     */
+    billingThreshold?: number | null;
     /**
      *
      * @type {Date}
@@ -1007,6 +1019,12 @@ declare interface BillingProductForSubscriptionResponseData {
      * @memberof BillingProductForSubscriptionResponseData
      */
     subscriptionId: string;
+    /**
+     *
+     * @type {string}
+     * @memberof BillingProductForSubscriptionResponseData
+     */
+    subscriptionItemExternalId?: string | null;
     /**
      *
      * @type {Date}
@@ -3006,6 +3024,24 @@ declare interface CreditCompanyGrantView {
      * @memberof CreditCompanyGrantView
      */
     expiresAt?: Date | null;
+    /**
+     *
+     * @type {string}
+     * @memberof CreditCompanyGrantView
+     */
+    expiryType?: string | null;
+    /**
+     *
+     * @type {string}
+     * @memberof CreditCompanyGrantView
+     */
+    expiryUnit?: string | null;
+    /**
+     *
+     * @type {number}
+     * @memberof CreditCompanyGrantView
+     */
+    expiryUnitCount?: number | null;
     /**
      *
      * @type {string}
@@ -5532,6 +5568,12 @@ declare interface PlanDetailResponseData {
  * @interface PlanEntitlementResponseData
  */
 declare interface PlanEntitlementResponseData {
+    /**
+     *
+     * @type {number}
+     * @memberof PlanEntitlementResponseData
+     */
+    billingThreshold?: number | null;
     /**
      *
      * @type {number}
@@ -5684,6 +5726,12 @@ declare interface PlanEntitlementResponseData {
  * @interface PlanEntitlementResponseData
  */
 declare interface PlanEntitlementResponseData_2 {
+    /**
+     *
+     * @type {number}
+     * @memberof PlanEntitlementResponseData
+     */
+    billingThreshold?: number | null;
     /**
      *
      * @type {number}
@@ -6573,6 +6621,12 @@ declare interface PublicPlansResponseData {
      * @memberof PublicPlansResponseData
      */
     capabilities?: ComponentCapabilities_2;
+    /**
+     *
+     * @type {boolean}
+     * @memberof PublicPlansResponseData
+     */
+    showPeriodToggle: boolean;
 }
 
 declare interface RequestContext {
@@ -7474,6 +7528,12 @@ declare interface UsageBasedEntitlement extends PlanEntitlementResponseData_2 {
  * @interface UsageBasedEntitlementResponseData
  */
 declare interface UsageBasedEntitlementResponseData {
+    /**
+     *
+     * @type {number}
+     * @memberof UsageBasedEntitlementResponseData
+     */
+    billingThreshold?: number | null;
     /**
      *
      * @type {number}

package/dist/schematic-components.esm.js

@@ -7372,6 +7372,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"],
@@ -7542,6 +7543,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"],
@@ -7560,6 +7562,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"]
   };
@@ -8322,6 +8325,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"],
@@ -8537,6 +8541,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"],
@@ -8564,6 +8571,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"]),
@@ -10134,6 +10142,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"],
@@ -10223,7 +10232,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"]
   };
 }
 
@@ -10421,7 +10431,7 @@ var EmbedProvider = ({
   });
   const customHeaders = useMemo3(
     () => ({
-      "X-Schematic-Components-Version": "1.4.0",
+      "X-Schematic-Components-Version": "1.4.1",
       "X-Schematic-Session-ID": sessionIdRef.current
     }),
     []
@@ -11126,7 +11136,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;
@@ -11230,6 +11239,9 @@ var Button = dt.button(
       &::before {
         content: "";
         ${loaderStyles({ $color: theme[$color], $size, $isLoading })}
+        ${$isLoading && lt`
+          margin-right: 0.5rem;
+        `}
       }
 
       &:disabled {
@@ -14165,7 +14177,7 @@ var Usage = ({ entitlements, updateQuantity, period }) => {
                         $size: "lg",
                         type: "number",
                         value: entitlement.quantity,
-                        min: 1,
+                        min: 0,
                         autoFocus: true,
                         onFocus: (event) => {
                           event.target.select();
@@ -14173,7 +14185,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);
                           }
                         }
@@ -14252,7 +14264,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,
@@ -14265,7 +14277,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 = useRef6(null);
   const checkoutRef = useRef6(null);
@@ -14279,16 +14291,6 @@ var CheckoutDialog = ({ top = 0 }) => {
   );
   const [isLoading, setIsLoading] = useState9(false);
   const [error, setError] = useState9();
-  const currentPeriod = useMemo9(
-    () => checkoutState?.period || isCheckoutData(data) && data.company?.plan?.planPeriod || "month",
-    [data, checkoutState?.period]
-  );
-  const [planPeriod, setPlanPeriod] = useState9(currentPeriod);
-  const {
-    plans: availablePlans,
-    addOns: availableAddOns,
-    periods: availablePeriods
-  } = useAvailablePlans(planPeriod);
   const {
     currentPlanId,
     currentEntitlements,
@@ -14310,6 +14312,18 @@ var CheckoutDialog = ({ top = 0 }) => {
       trialPaymentMethodRequired: false
     };
   }, [data]);
+  const currentPeriod = useMemo9(
+    () => checkoutState?.period || isCheckoutData(data) && data.company?.plan?.planPeriod || "month",
+    [data, checkoutState?.period]
+  );
+  const [planPeriod, setPlanPeriod] = useState9(currentPeriod);
+  const {
+    plans: availablePlans,
+    addOns: availableAddOns,
+    periods: availablePeriods
+  } = useAvailablePlans(planPeriod, {
+    useSelectedPeriod: showPeriodToggle
+  });
   const [selectedPlan, setSelectedPlan] = useState9(
     () => {
       return availablePlans.find(
@@ -14457,20 +14471,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";
   });
@@ -14609,7 +14611,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;
@@ -14878,7 +14880,17 @@ var CheckoutDialog = ({ top = 0 }) => {
                     ]
                   }
                 ),
-                checkoutStage === "plan" && /* @__PURE__ */ jsx20(
+                isPending ? /* @__PURE__ */ jsx20(
+                  Flex,
+                  {
+                    $width: "100%",
+                    $height: "100%",
+                    $alignItems: "center",
+                    $justifyContent: "center",
+                    $padding: `${settings.theme.card.padding / TEXT_BASE_SIZE}rem`,
+                    children: /* @__PURE__ */ jsx20(Loader, { $size: "2xl" })
+                  }
+                ) : checkoutStage === "plan" ? /* @__PURE__ */ jsx20(
                   Plan,
                   {
                     isLoading,
@@ -14889,8 +14901,7 @@ var CheckoutDialog = ({ top = 0 }) => {
                     shouldTrial,
                     showPeriodToggle
                   }
-                ),
-                checkoutStage === "usage" && /* @__PURE__ */ jsx20(
+                ) : checkoutStage === "usage" ? /* @__PURE__ */ jsx20(
                   Usage,
                   {
                     isLoading,
@@ -14899,8 +14910,7 @@ var CheckoutDialog = ({ top = 0 }) => {
                     entitlements: payInAdvanceEntitlements,
                     updateQuantity: updateUsageBasedEntitlementQuantity
                   }
-                ),
-                checkoutStage === "addons" && /* @__PURE__ */ jsx20(
+                ) : checkoutStage === "addons" ? /* @__PURE__ */ jsx20(
                   AddOns,
                   {
                     isLoading,
@@ -14908,8 +14918,7 @@ var CheckoutDialog = ({ top = 0 }) => {
                     addOns,
                     toggle: (id) => toggleAddOn(id)
                   }
-                ),
-                checkoutStage === "addonsUsage" && /* @__PURE__ */ jsx20(
+                ) : checkoutStage === "addonsUsage" ? /* @__PURE__ */ jsx20(
                   Usage,
                   {
                     isLoading,
@@ -14918,16 +14927,14 @@ var CheckoutDialog = ({ top = 0 }) => {
                     entitlements: addOnUsageBasedEntitlements,
                     updateQuantity: updateAddOnEntitlementQuantity
                   }
-                ),
-                checkoutStage === "credits" && /* @__PURE__ */ jsx20(
+                ) : checkoutStage === "credits" ? /* @__PURE__ */ jsx20(
                   Credits,
                   {
                     isLoading,
                     bundles: creditBundles,
                     updateCount: updateCreditBundleCount
                   }
-                ),
-                checkoutStage === "checkout" && /* @__PURE__ */ jsx20(
+                ) : checkoutStage === "checkout" && /* @__PURE__ */ jsx20(
                   Checkout,
                   {
                     isPaymentMethodRequired,
@@ -18639,6 +18646,7 @@ var PricingTable = forwardRef12(
     const { t: t2 } = useTranslation();
     const { data, settings, isPending, hydratePublic } = useEmbed();
     const { currentPeriod, showPeriodToggle, isStandalone } = useMemo26(() => {
+      const showPeriodToggle2 = data?.showPeriodToggle ?? props.showPeriodToggle;
       if (isCheckoutData(data)) {
         const billingSubscription = data.company?.billingSubscription;
         const isTrialSubscription = billingSubscription?.status === "trialing";
@@ -18647,7 +18655,7 @@ var PricingTable = forwardRef12(
           currentPeriod: data.company?.plan?.planPeriod || "month",
           currentAddOns: data.company?.addOns || [],
           canCheckout: data.capabilities?.checkout ?? true,
-          showPeriodToggle: data.showPeriodToggle ?? props.showPeriodToggle,
+          showPeriodToggle: showPeriodToggle2,
           isTrialSubscription,
           willSubscriptionCancel,
           isStandalone: false
@@ -18657,7 +18665,7 @@ var PricingTable = forwardRef12(
         currentPeriod: "month",
         currentAddOns: [],
         canCheckout: true,
-        showPeriodToggle: props.showPeriodToggle,
+        showPeriodToggle: showPeriodToggle2,
         isTrialSubscription: false,
         willSubscriptionCancel: false,
         isStandalone: true
@@ -18693,7 +18701,7 @@ var PricingTable = forwardRef12(
     useEffect8(() => {
       setEntitlementCounts(plans.reduce(entitlementCountsReducer, {}));
     }, [plans]);
-    if (isStandalone && isPending) {
+    if (isPending) {
       return /* @__PURE__ */ jsx46(
         Flex,
         {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schematichq/schematic-components",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "main": "dist/schematic-components.cjs.js",
   "module": "dist/schematic-components.esm.js",
   "types": "dist/schematic-components.d.ts",
@@ -37,21 +37,21 @@
     "i18next": "^25.4.0",
     "lodash": "^4.17.21",
     "pako": "^2.1.0",
-    "react-i18next": "^15.7.0",
+    "react-i18next": "^15.7.1",
     "styled-components": "^6.1.19",
     "uuid": "^11.1.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.33.0",
     "@eslint/json": "^0.13.0",
-    "@eslint/markdown": "^7.1.0",
+    "@eslint/markdown": "^7.2.0",
     "@microsoft/api-extractor": "^7.52.11",
-    "@openapitools/openapi-generator-cli": "^2.22.0",
+    "@openapitools/openapi-generator-cli": "^2.23.0",
     "@stripe/react-stripe-js": "^3.9.1",
     "@types/jest": "^30.0.0",
     "@types/lodash": "^4.17.20",
     "@types/pako": "^2.0.4",
-    "@types/react": "^19.1.10",
+    "@types/react": "^19.1.11",
     "@types/react-dom": "^19.1.7",
     "esbuild": "^0.25.9",
     "eslint": "^9.33.0",