@streamoid/settings 0.3.1 → 0.3.3

package/dist/index.d.mts

@@ -265,6 +265,7 @@ interface SubscriptionPlan {
     id: string;
     name: string;
     amount: number;
+    type?: string;
     subscriptionEndDate?: string;
     /** Three-letter currency code (lowercase) when known, e.g. "inr" / "usd". */
     currency?: string;
@@ -276,6 +277,10 @@ interface BillingSubscription {
     downgradeScheduled: boolean;
     stripeCustomerId: string;
     plan: SubscriptionPlan;
+    scheduledDowngradeEffectiveDate?: number | string;
+    preDowngradeStripePriceData?: SubscriptionPlan & {
+        credits?: string;
+    };
     /** Stripe product id; used to look up the matching product in fetched plans. */
     stripeProductId?: string;
 }
@@ -659,10 +664,11 @@ declare function ConfirmDeleteModal({ open, workspaceName, onClose, onConfirm, }
 
 interface BuyCreditsModalProps {
     currencySymbol?: string;
+    country?: string;
     onClose: () => void;
     onBuy: (credits: number, price: number) => void;
 }
-declare function BuyCreditsModal({ currencySymbol, onClose, onBuy, }: BuyCreditsModalProps): react_jsx_runtime.JSX.Element;
+declare function BuyCreditsModal({ currencySymbol, country, onClose, onBuy, }: BuyCreditsModalProps): react_jsx_runtime.JSX.Element;
 
 interface UserPermissions {
     artifax: boolean;

package/dist/index.d.ts

@@ -265,6 +265,7 @@ interface SubscriptionPlan {
     id: string;
     name: string;
     amount: number;
+    type?: string;
     subscriptionEndDate?: string;
     /** Three-letter currency code (lowercase) when known, e.g. "inr" / "usd". */
     currency?: string;
@@ -276,6 +277,10 @@ interface BillingSubscription {
     downgradeScheduled: boolean;
     stripeCustomerId: string;
     plan: SubscriptionPlan;
+    scheduledDowngradeEffectiveDate?: number | string;
+    preDowngradeStripePriceData?: SubscriptionPlan & {
+        credits?: string;
+    };
     /** Stripe product id; used to look up the matching product in fetched plans. */
     stripeProductId?: string;
 }
@@ -659,10 +664,11 @@ declare function ConfirmDeleteModal({ open, workspaceName, onClose, onConfirm, }
 
 interface BuyCreditsModalProps {
     currencySymbol?: string;
+    country?: string;
     onClose: () => void;
     onBuy: (credits: number, price: number) => void;
 }
-declare function BuyCreditsModal({ currencySymbol, onClose, onBuy, }: BuyCreditsModalProps): react_jsx_runtime.JSX.Element;
+declare function BuyCreditsModal({ currencySymbol, country, onClose, onBuy, }: BuyCreditsModalProps): react_jsx_runtime.JSX.Element;
 
 interface UserPermissions {
     artifax: boolean;

package/dist/index.js

@@ -3801,41 +3801,63 @@ var import_react7 = require("react");
 var import_icons4 = require("@streamoid/icons");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var STEP = 500;
-var PRICE_PER_CREDIT = 0.08;
-var MIN_USD = 40;
-var MAX_USD = 1e4;
-var MIN_CREDITS = Math.round(MIN_USD / PRICE_PER_CREDIT);
-var MAX_CREDITS = Math.round(MAX_USD / PRICE_PER_CREDIT);
+var USD_TOPUP_CONFIG = {
+  currencyCode: "usd",
+  pricePerCredit: 0.08,
+  minAmount: 40,
+  maxAmount: 1e4
+};
+var INR_TOPUP_CONFIG = {
+  currencyCode: "inr",
+  pricePerCredit: 5,
+  minAmount: 2500,
+  maxAmount: 1e5
+};
 function BuyCreditsModal({
   currencySymbol = "$",
+  country,
   onClose,
   onBuy
 }) {
-  const [credits, setCredits] = (0, import_react7.useState)(MIN_CREDITS);
-  const [creditsInput, setCreditsInput] = (0, import_react7.useState)(String(MIN_CREDITS));
-  const [priceInput, setPriceInput] = (0, import_react7.useState)(String(MIN_CREDITS * PRICE_PER_CREDIT));
+  const normalizedCountry = country?.trim().toUpperCase();
+  const topupConfig = normalizedCountry === "IN" ? INR_TOPUP_CONFIG : USD_TOPUP_CONFIG;
+  const minCredits = Math.round(
+    topupConfig.minAmount / topupConfig.pricePerCredit
+  );
+  const maxCredits = Math.round(
+    topupConfig.maxAmount / topupConfig.pricePerCredit
+  );
+  const [credits, setCredits] = (0, import_react7.useState)(minCredits);
+  const [creditsInput, setCreditsInput] = (0, import_react7.useState)(String(minCredits));
+  const [priceInput, setPriceInput] = (0, import_react7.useState)(
+    String(minCredits * topupConfig.pricePerCredit)
+  );
   const [activeField, setActiveField] = (0, import_react7.useState)("credits");
   const parsedCredits = creditsInput.length ? Number(creditsInput) : credits;
   const previewCredits = Number.isFinite(parsedCredits) ? parsedCredits : credits;
   const pricedCredits = previewCredits > 0 ? previewCredits : 0;
-  const price = Number((pricedCredits * PRICE_PER_CREDIT).toFixed(2));
-  const isBelowMin = price < MIN_USD;
-  const isAboveMax = price > MAX_USD;
+  const price = Number(
+    (pricedCredits * topupConfig.pricePerCredit).toFixed(2)
+  );
+  const isBelowMin = price < topupConfig.minAmount;
+  const isAboveMax = price > topupConfig.maxAmount;
   const isError = isBelowMin || isAboveMax;
   const isInvalid = isError;
   const syncFromCredits = (value) => {
     setCredits(value);
     setCreditsInput(String(value));
-    setPriceInput(String(Number((value * PRICE_PER_CREDIT).toFixed(2))));
+    setPriceInput(
+      String(Number((value * topupConfig.pricePerCredit).toFixed(2)))
+    );
   };
-  const syncFromPrice = (usd) => {
-    const derived = Math.round(usd / PRICE_PER_CREDIT);
+  const syncFromPrice = (amount) => {
+    const derived = Math.round(amount / topupConfig.pricePerCredit);
     setCredits(derived);
     setCreditsInput(String(derived));
-    setPriceInput(String(usd));
+    setPriceInput(String(amount));
   };
-  const handleDecrement = () => syncFromCredits(Math.max(MIN_CREDITS, credits - STEP));
-  const handleIncrement = () => syncFromCredits(Math.min(MAX_CREDITS, credits + STEP));
+  const handleDecrement = () => syncFromCredits(Math.max(minCredits, credits - STEP));
+  const handleIncrement = () => syncFromCredits(Math.min(maxCredits, credits + STEP));
   const handleCreditsChange = (value) => {
     const raw = value.replace(/[^\d]/g, "");
     setCreditsInput(raw);
@@ -3844,7 +3866,9 @@ function BuyCreditsModal({
     const next = Number(raw);
     if (!Number.isNaN(next)) {
       setCredits(next);
-      setPriceInput(String(Number((next * PRICE_PER_CREDIT).toFixed(2))));
+      setPriceInput(
+        String(Number((next * topupConfig.pricePerCredit).toFixed(2)))
+      );
     }
   };
   const handleCreditsBlur = () => {
@@ -3862,7 +3886,7 @@ function BuyCreditsModal({
     if (!raw.length) return;
     const next = Number(raw);
     if (!Number.isNaN(next) && next >= 0) {
-      const derived = Math.round(next / PRICE_PER_CREDIT);
+      const derived = Math.round(next / topupConfig.pricePerCredit);
       setCredits(derived);
       setCreditsInput(String(derived));
     }
@@ -3966,7 +3990,7 @@ function BuyCreditsModal({
                                 style: {
                                   width: 24,
                                   height: 24,
-                                  opacity: credits <= MIN_CREDITS ? 0.3 : 1,
+                                  opacity: credits <= minCredits ? 0.3 : 1,
                                   transition: "opacity 0.15s ease"
                                 },
                                 onClick: handleDecrement,
@@ -4024,7 +4048,7 @@ function BuyCreditsModal({
                                 style: {
                                   width: 24,
                                   height: 24,
-                                  opacity: credits >= MAX_CREDITS ? 0.3 : 1,
+                                  opacity: credits >= maxCredits ? 0.3 : 1,
                                   transition: "opacity 0.15s ease"
                                 },
                                 onClick: handleIncrement,
@@ -4111,7 +4135,7 @@ function BuyCreditsModal({
                             lineHeight: "var(--line-height-line-height-sm)",
                             color: "var(--alias-text---icons-error)"
                           },
-                          children: isBelowMin ? `Min. ${MIN_CREDITS.toLocaleString()} credits` : `Max. ${MAX_CREDITS.toLocaleString()} credits`
+                          children: isBelowMin ? `Min. ${minCredits.toLocaleString()} credits` : `Max. ${maxCredits.toLocaleString()} credits`
                         }
                       ) })
                     }
@@ -4456,6 +4480,16 @@ function formatNextBillingDateLabel(iso) {
     year: "numeric"
   });
 }
+function formatEffectiveDateLabel(value) {
+  if (value == null) return "";
+  const parsed = typeof value === "number" ? new Date(value < 1e10 ? value * 1e3 : value) : new Date(value);
+  if (Number.isNaN(parsed.getTime())) return "";
+  return parsed.toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric"
+  });
+}
 function UpdateSubscriptionModal({
   open,
   currentPlanName,
@@ -5509,7 +5543,7 @@ function BillingContent({
   const [availableCredits, setAvailableCredits] = (0, import_react8.useState)(null);
   const [products, setProducts] = (0, import_react8.useState)([]);
   const [invoices, setInvoices] = (0, import_react8.useState)([]);
-  const [totalCredits, setTotalCredits] = (0, import_react8.useState)(0);
+  const [totalCredits, setTotalCredits] = (0, import_react8.useState)(null);
   const [usageLogs, setUsageLogs] = (0, import_react8.useState)([]);
   const [userMap, setUserMap] = (0, import_react8.useState)({});
   const [customPlanCredits, setCustomPlanCredits] = (0, import_react8.useState)(
@@ -5520,6 +5554,7 @@ function BillingContent({
   );
   const [buyCreditsInFlight, setBuyCreditsInFlight] = (0, import_react8.useState)(false);
   const [loadingBilling, setLoadingBilling] = (0, import_react8.useState)(false);
+  const [billingOverviewLoaded, setBillingOverviewLoaded] = (0, import_react8.useState)(false);
   const [loadingTable, setLoadingTable] = (0, import_react8.useState)(false);
   const [showInitialLoader, setShowInitialLoader] = (0, import_react8.useState)(true);
   const [initialFetchTriggered, setInitialFetchTriggered] = (0, import_react8.useState)(false);
@@ -5544,6 +5579,7 @@ function BillingContent({
   }, [api]);
   const fetchBillingOverview = (0, import_react8.useCallback)(async () => {
     setLoadingBilling(true);
+    setBillingOverviewLoaded(false);
     try {
       console.log("calling Billing apis");
       const [subRes, creditsRes, productsRes, customRes] = await Promise.all([
@@ -5572,6 +5608,7 @@ function BillingContent({
     } catch {
     } finally {
       setLoadingBilling(false);
+      setBillingOverviewLoaded(true);
     }
   }, [api, workspace.current?.country]);
   const fetchUserMap = (0, import_react8.useCallback)(async () => {
@@ -5713,6 +5750,12 @@ function BillingContent({
   (0, import_react8.useEffect)(() => {
     setShowInitialLoader(true);
     setInitialFetchTriggered(false);
+    setBillingOverviewLoaded(false);
+    setSubscription(null);
+    setAvailableCredits(null);
+    setProducts([]);
+    setTotalCredits(null);
+    setCustomPlanCredits(null);
   }, [workspaceId]);
   (0, import_react8.useEffect)(() => {
     setInitialFetchTriggered(true);
@@ -5731,17 +5774,39 @@ function BillingContent({
   (0, import_react8.useEffect)(() => {
     if (!showInitialLoader) return;
     if (!initialFetchTriggered) return;
-    if (loadingBilling) return;
+    if (!billingOverviewLoaded) return;
     setShowInitialLoader(false);
-  }, [showInitialLoader, initialFetchTriggered, loadingBilling]);
+  }, [showInitialLoader, initialFetchTriggered, billingOverviewLoaded]);
   console.log("subscription", subscription);
   const isProPlan = products.some(
     (product) => product.id == subscription?.stripeProductId && product.name == "Paid"
   );
   console.log("isProPlan", isProPlan);
-  const planName = isProPlan ? "Pro" : subscription?.plan?.name?.trim() || (subscription?.plan?.amount ? subscription.plan.amount > 0 ? "Pro" : "Free" : "-");
+  const currentPlanPrice = (() => {
+    if (products.length > 0 && subscription?.plan?.id) {
+      for (const product of products) {
+        const price = product.prices.find((p) => p.id === subscription.plan.id);
+        if (price) return price;
+      }
+    }
+    return null;
+  })();
+  const preDowngradePlan = subscription?.downgradeScheduled && subscription.preDowngradeStripePriceData ? subscription.preDowngradeStripePriceData : null;
+  const resolvedPlanName = (preDowngradePlan?.name?.trim() || currentPlanPrice?.metadata?.name?.trim() || subscription?.plan?.name?.trim() || (subscription?.plan?.amount != null ? subscription.plan.amount > 0 ? "Pro" : "Free" : "")).trim();
+  const planName = isProPlan && resolvedPlanName !== "-" ? "Pro" : resolvedPlanName;
   const isFreePlan = subscription?.plan?.amount == null || subscription.plan.amount === 0;
-  const planAmount = subscription?.plan?.amount != null ? `${subscription?.plan?.currency == "inr" ? "\u20B9" : "$"}${(subscription.plan.amount / 100).toFixed(2)} / ${subscription?.plan?.interval}` : `${getCurrencySymbolByCountry(workspace.current?.country)}0`;
+  const hasResolvedPlanAmount = (preDowngradePlan?.amount ?? subscription?.plan?.amount) != null && Boolean(preDowngradePlan?.currency ?? subscription?.plan?.currency) && Boolean(preDowngradePlan?.interval ?? subscription?.plan?.interval);
+  const planAmount = hasResolvedPlanAmount ? `${(preDowngradePlan?.currency ?? subscription?.plan?.currency) == "inr" ? "\u20B9" : "$"}${((preDowngradePlan?.amount ?? subscription.plan.amount) / 100).toFixed(2)} / ${preDowngradePlan?.interval ?? subscription?.plan?.interval}` : "";
+  const planCreditsFromPrice = Number(
+    preDowngradePlan?.credits ?? currentPlanPrice?.metadata?.credits
+  );
+  const currentPlanCredits = Number.isFinite(planCreditsFromPrice) ? planCreditsFromPrice : customPlanCredits;
+  const planCreditsText = currentPlanCredits != null ? `${formatCredits(currentPlanCredits)} credits` : "";
+  const scheduledDowngradeDateLabel = formatEffectiveDateLabel(
+    subscription?.scheduledDowngradeEffectiveDate
+  );
+  const scheduledDowngradeText = subscription?.downgradeScheduled && subscription.plan?.name ? `Downgrades to ${subscription.plan.name}${scheduledDowngradeDateLabel ? ` ${scheduledDowngradeDateLabel}` : ""}` : void 0;
+  const isPlanDetailsLoading = !billingOverviewLoaded || loadingBilling || subscription?.plan == null || !planName || planName === "-" || !planAmount || currentPlanCredits == null;
   const usedCredits = availableCredits != null && totalCredits != null ? Math.max(0, totalCredits - availableCredits) : null;
   const progressPct = usedCredits != null && totalCredits != null && totalCredits > 0 ? Math.min(100, Math.round(usedCredits / totalCredits * 100)) : 0;
   const remainingPct = 100 - progressPct;
@@ -5838,12 +5903,13 @@ function BillingContent({
       }
     );
     try {
+      const topupCurrency = workspace.current?.country?.trim().toUpperCase() === "IN" ? "inr" : "usd";
       const res = await api.buyCredits({
         serviceName: DEFAULT_TOPUP_SERVICE,
         credits,
         unitAmount: price,
         itemCount: 1,
-        currency: "usd",
+        currency: topupCurrency,
         successUrl: resolveReturnUrl("success"),
         cancelUrl: resolveReturnUrl("cancel"),
         metadata: { source: "self-serve" }
@@ -5958,11 +6024,13 @@ function BillingContent({
             import_ui5.ScPlanDetailsCard,
             {
               planName,
-              planCredits: totalCredits != null ? `${formatCredits(totalCredits)} credits` : "\u2014",
+              planCredits: planCreditsText,
               planPrice: planAmount,
               badgeText: "Active",
+              badgeSubText: scheduledDowngradeText,
               currentPlanLabel: "Current plan",
-              upgradeButtonText: subscription?.downgradeScheduled ? "Cancel downgrade" : "Upgrade",
+              upgradeButtonText: subscription?.downgradeScheduled ? "Cancel downgrade" : "Manage Plan",
+              isLoading: isPlanDetailsLoading,
               className: "flex-1 min-w-0",
               onUpgrade: () => {
                 void logBillingEvent("billing_plans_opened", "Plans opened", {
@@ -6058,7 +6126,10 @@ function BillingContent({
     showBuyCreditsModal && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       BuyCreditsModal,
       {
-        currencySymbol: getCurrencySymbolByCountry(workspace.current?.country),
+        country: workspace.current?.country,
+        currencySymbol: getCurrencySymbolByCountry(
+          workspace.current?.country
+        ),
         onClose: () => setShowBuyCreditsModal(false),
         onBuy: (credits, price) => {
           handleBuyCredits(credits, price);

package/dist/index.mjs

@@ -3820,41 +3820,63 @@ import { useState as useState6 } from "react";
 import { SiconClose as SiconClose3, SiconPlus, SiconMinus } from "@streamoid/icons";
 import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
 var STEP = 500;
-var PRICE_PER_CREDIT = 0.08;
-var MIN_USD = 40;
-var MAX_USD = 1e4;
-var MIN_CREDITS = Math.round(MIN_USD / PRICE_PER_CREDIT);
-var MAX_CREDITS = Math.round(MAX_USD / PRICE_PER_CREDIT);
+var USD_TOPUP_CONFIG = {
+  currencyCode: "usd",
+  pricePerCredit: 0.08,
+  minAmount: 40,
+  maxAmount: 1e4
+};
+var INR_TOPUP_CONFIG = {
+  currencyCode: "inr",
+  pricePerCredit: 5,
+  minAmount: 2500,
+  maxAmount: 1e5
+};
 function BuyCreditsModal({
   currencySymbol = "$",
+  country,
   onClose,
   onBuy
 }) {
-  const [credits, setCredits] = useState6(MIN_CREDITS);
-  const [creditsInput, setCreditsInput] = useState6(String(MIN_CREDITS));
-  const [priceInput, setPriceInput] = useState6(String(MIN_CREDITS * PRICE_PER_CREDIT));
+  const normalizedCountry = country?.trim().toUpperCase();
+  const topupConfig = normalizedCountry === "IN" ? INR_TOPUP_CONFIG : USD_TOPUP_CONFIG;
+  const minCredits = Math.round(
+    topupConfig.minAmount / topupConfig.pricePerCredit
+  );
+  const maxCredits = Math.round(
+    topupConfig.maxAmount / topupConfig.pricePerCredit
+  );
+  const [credits, setCredits] = useState6(minCredits);
+  const [creditsInput, setCreditsInput] = useState6(String(minCredits));
+  const [priceInput, setPriceInput] = useState6(
+    String(minCredits * topupConfig.pricePerCredit)
+  );
   const [activeField, setActiveField] = useState6("credits");
   const parsedCredits = creditsInput.length ? Number(creditsInput) : credits;
   const previewCredits = Number.isFinite(parsedCredits) ? parsedCredits : credits;
   const pricedCredits = previewCredits > 0 ? previewCredits : 0;
-  const price = Number((pricedCredits * PRICE_PER_CREDIT).toFixed(2));
-  const isBelowMin = price < MIN_USD;
-  const isAboveMax = price > MAX_USD;
+  const price = Number(
+    (pricedCredits * topupConfig.pricePerCredit).toFixed(2)
+  );
+  const isBelowMin = price < topupConfig.minAmount;
+  const isAboveMax = price > topupConfig.maxAmount;
   const isError = isBelowMin || isAboveMax;
   const isInvalid = isError;
   const syncFromCredits = (value) => {
     setCredits(value);
     setCreditsInput(String(value));
-    setPriceInput(String(Number((value * PRICE_PER_CREDIT).toFixed(2))));
+    setPriceInput(
+      String(Number((value * topupConfig.pricePerCredit).toFixed(2)))
+    );
   };
-  const syncFromPrice = (usd) => {
-    const derived = Math.round(usd / PRICE_PER_CREDIT);
+  const syncFromPrice = (amount) => {
+    const derived = Math.round(amount / topupConfig.pricePerCredit);
     setCredits(derived);
     setCreditsInput(String(derived));
-    setPriceInput(String(usd));
+    setPriceInput(String(amount));
   };
-  const handleDecrement = () => syncFromCredits(Math.max(MIN_CREDITS, credits - STEP));
-  const handleIncrement = () => syncFromCredits(Math.min(MAX_CREDITS, credits + STEP));
+  const handleDecrement = () => syncFromCredits(Math.max(minCredits, credits - STEP));
+  const handleIncrement = () => syncFromCredits(Math.min(maxCredits, credits + STEP));
   const handleCreditsChange = (value) => {
     const raw = value.replace(/[^\d]/g, "");
     setCreditsInput(raw);
@@ -3863,7 +3885,9 @@ function BuyCreditsModal({
     const next = Number(raw);
     if (!Number.isNaN(next)) {
       setCredits(next);
-      setPriceInput(String(Number((next * PRICE_PER_CREDIT).toFixed(2))));
+      setPriceInput(
+        String(Number((next * topupConfig.pricePerCredit).toFixed(2)))
+      );
     }
   };
   const handleCreditsBlur = () => {
@@ -3881,7 +3905,7 @@ function BuyCreditsModal({
     if (!raw.length) return;
     const next = Number(raw);
     if (!Number.isNaN(next) && next >= 0) {
-      const derived = Math.round(next / PRICE_PER_CREDIT);
+      const derived = Math.round(next / topupConfig.pricePerCredit);
       setCredits(derived);
       setCreditsInput(String(derived));
     }
@@ -3985,7 +4009,7 @@ function BuyCreditsModal({
                                 style: {
                                   width: 24,
                                   height: 24,
-                                  opacity: credits <= MIN_CREDITS ? 0.3 : 1,
+                                  opacity: credits <= minCredits ? 0.3 : 1,
                                   transition: "opacity 0.15s ease"
                                 },
                                 onClick: handleDecrement,
@@ -4043,7 +4067,7 @@ function BuyCreditsModal({
                                 style: {
                                   width: 24,
                                   height: 24,
-                                  opacity: credits >= MAX_CREDITS ? 0.3 : 1,
+                                  opacity: credits >= maxCredits ? 0.3 : 1,
                                   transition: "opacity 0.15s ease"
                                 },
                                 onClick: handleIncrement,
@@ -4130,7 +4154,7 @@ function BuyCreditsModal({
                             lineHeight: "var(--line-height-line-height-sm)",
                             color: "var(--alias-text---icons-error)"
                           },
-                          children: isBelowMin ? `Min. ${MIN_CREDITS.toLocaleString()} credits` : `Max. ${MAX_CREDITS.toLocaleString()} credits`
+                          children: isBelowMin ? `Min. ${minCredits.toLocaleString()} credits` : `Max. ${maxCredits.toLocaleString()} credits`
                         }
                       ) })
                     }
@@ -4475,6 +4499,16 @@ function formatNextBillingDateLabel(iso) {
     year: "numeric"
   });
 }
+function formatEffectiveDateLabel(value) {
+  if (value == null) return "";
+  const parsed = typeof value === "number" ? new Date(value < 1e10 ? value * 1e3 : value) : new Date(value);
+  if (Number.isNaN(parsed.getTime())) return "";
+  return parsed.toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric"
+  });
+}
 function UpdateSubscriptionModal({
   open,
   currentPlanName,
@@ -5528,7 +5562,7 @@ function BillingContent({
   const [availableCredits, setAvailableCredits] = useState7(null);
   const [products, setProducts] = useState7([]);
   const [invoices, setInvoices] = useState7([]);
-  const [totalCredits, setTotalCredits] = useState7(0);
+  const [totalCredits, setTotalCredits] = useState7(null);
   const [usageLogs, setUsageLogs] = useState7([]);
   const [userMap, setUserMap] = useState7({});
   const [customPlanCredits, setCustomPlanCredits] = useState7(
@@ -5539,6 +5573,7 @@ function BillingContent({
   );
   const [buyCreditsInFlight, setBuyCreditsInFlight] = useState7(false);
   const [loadingBilling, setLoadingBilling] = useState7(false);
+  const [billingOverviewLoaded, setBillingOverviewLoaded] = useState7(false);
   const [loadingTable, setLoadingTable] = useState7(false);
   const [showInitialLoader, setShowInitialLoader] = useState7(true);
   const [initialFetchTriggered, setInitialFetchTriggered] = useState7(false);
@@ -5563,6 +5598,7 @@ function BillingContent({
   }, [api]);
   const fetchBillingOverview = useCallback3(async () => {
     setLoadingBilling(true);
+    setBillingOverviewLoaded(false);
     try {
       console.log("calling Billing apis");
       const [subRes, creditsRes, productsRes, customRes] = await Promise.all([
@@ -5591,6 +5627,7 @@ function BillingContent({
     } catch {
     } finally {
       setLoadingBilling(false);
+      setBillingOverviewLoaded(true);
     }
   }, [api, workspace.current?.country]);
   const fetchUserMap = useCallback3(async () => {
@@ -5732,6 +5769,12 @@ function BillingContent({
   useEffect4(() => {
     setShowInitialLoader(true);
     setInitialFetchTriggered(false);
+    setBillingOverviewLoaded(false);
+    setSubscription(null);
+    setAvailableCredits(null);
+    setProducts([]);
+    setTotalCredits(null);
+    setCustomPlanCredits(null);
   }, [workspaceId]);
   useEffect4(() => {
     setInitialFetchTriggered(true);
@@ -5750,17 +5793,39 @@ function BillingContent({
   useEffect4(() => {
     if (!showInitialLoader) return;
     if (!initialFetchTriggered) return;
-    if (loadingBilling) return;
+    if (!billingOverviewLoaded) return;
     setShowInitialLoader(false);
-  }, [showInitialLoader, initialFetchTriggered, loadingBilling]);
+  }, [showInitialLoader, initialFetchTriggered, billingOverviewLoaded]);
   console.log("subscription", subscription);
   const isProPlan = products.some(
     (product) => product.id == subscription?.stripeProductId && product.name == "Paid"
   );
   console.log("isProPlan", isProPlan);
-  const planName = isProPlan ? "Pro" : subscription?.plan?.name?.trim() || (subscription?.plan?.amount ? subscription.plan.amount > 0 ? "Pro" : "Free" : "-");
+  const currentPlanPrice = (() => {
+    if (products.length > 0 && subscription?.plan?.id) {
+      for (const product of products) {
+        const price = product.prices.find((p) => p.id === subscription.plan.id);
+        if (price) return price;
+      }
+    }
+    return null;
+  })();
+  const preDowngradePlan = subscription?.downgradeScheduled && subscription.preDowngradeStripePriceData ? subscription.preDowngradeStripePriceData : null;
+  const resolvedPlanName = (preDowngradePlan?.name?.trim() || currentPlanPrice?.metadata?.name?.trim() || subscription?.plan?.name?.trim() || (subscription?.plan?.amount != null ? subscription.plan.amount > 0 ? "Pro" : "Free" : "")).trim();
+  const planName = isProPlan && resolvedPlanName !== "-" ? "Pro" : resolvedPlanName;
   const isFreePlan = subscription?.plan?.amount == null || subscription.plan.amount === 0;
-  const planAmount = subscription?.plan?.amount != null ? `${subscription?.plan?.currency == "inr" ? "\u20B9" : "$"}${(subscription.plan.amount / 100).toFixed(2)} / ${subscription?.plan?.interval}` : `${getCurrencySymbolByCountry(workspace.current?.country)}0`;
+  const hasResolvedPlanAmount = (preDowngradePlan?.amount ?? subscription?.plan?.amount) != null && Boolean(preDowngradePlan?.currency ?? subscription?.plan?.currency) && Boolean(preDowngradePlan?.interval ?? subscription?.plan?.interval);
+  const planAmount = hasResolvedPlanAmount ? `${(preDowngradePlan?.currency ?? subscription?.plan?.currency) == "inr" ? "\u20B9" : "$"}${((preDowngradePlan?.amount ?? subscription.plan.amount) / 100).toFixed(2)} / ${preDowngradePlan?.interval ?? subscription?.plan?.interval}` : "";
+  const planCreditsFromPrice = Number(
+    preDowngradePlan?.credits ?? currentPlanPrice?.metadata?.credits
+  );
+  const currentPlanCredits = Number.isFinite(planCreditsFromPrice) ? planCreditsFromPrice : customPlanCredits;
+  const planCreditsText = currentPlanCredits != null ? `${formatCredits(currentPlanCredits)} credits` : "";
+  const scheduledDowngradeDateLabel = formatEffectiveDateLabel(
+    subscription?.scheduledDowngradeEffectiveDate
+  );
+  const scheduledDowngradeText = subscription?.downgradeScheduled && subscription.plan?.name ? `Downgrades to ${subscription.plan.name}${scheduledDowngradeDateLabel ? ` ${scheduledDowngradeDateLabel}` : ""}` : void 0;
+  const isPlanDetailsLoading = !billingOverviewLoaded || loadingBilling || subscription?.plan == null || !planName || planName === "-" || !planAmount || currentPlanCredits == null;
   const usedCredits = availableCredits != null && totalCredits != null ? Math.max(0, totalCredits - availableCredits) : null;
   const progressPct = usedCredits != null && totalCredits != null && totalCredits > 0 ? Math.min(100, Math.round(usedCredits / totalCredits * 100)) : 0;
   const remainingPct = 100 - progressPct;
@@ -5857,12 +5922,13 @@ function BillingContent({
       }
     );
     try {
+      const topupCurrency = workspace.current?.country?.trim().toUpperCase() === "IN" ? "inr" : "usd";
       const res = await api.buyCredits({
         serviceName: DEFAULT_TOPUP_SERVICE,
         credits,
         unitAmount: price,
         itemCount: 1,
-        currency: "usd",
+        currency: topupCurrency,
         successUrl: resolveReturnUrl("success"),
         cancelUrl: resolveReturnUrl("cancel"),
         metadata: { source: "self-serve" }
@@ -5977,11 +6043,13 @@ function BillingContent({
             ScPlanDetailsCard,
             {
               planName,
-              planCredits: totalCredits != null ? `${formatCredits(totalCredits)} credits` : "\u2014",
+              planCredits: planCreditsText,
               planPrice: planAmount,
               badgeText: "Active",
+              badgeSubText: scheduledDowngradeText,
               currentPlanLabel: "Current plan",
-              upgradeButtonText: subscription?.downgradeScheduled ? "Cancel downgrade" : "Upgrade",
+              upgradeButtonText: subscription?.downgradeScheduled ? "Cancel downgrade" : "Manage Plan",
+              isLoading: isPlanDetailsLoading,
               className: "flex-1 min-w-0",
               onUpgrade: () => {
                 void logBillingEvent("billing_plans_opened", "Plans opened", {
@@ -6077,7 +6145,10 @@ function BillingContent({
     showBuyCreditsModal && /* @__PURE__ */ jsx11(
       BuyCreditsModal,
       {
-        currencySymbol: getCurrencySymbolByCountry(workspace.current?.country),
+        country: workspace.current?.country,
+        currencySymbol: getCurrencySymbolByCountry(
+          workspace.current?.country
+        ),
         onClose: () => setShowBuyCreditsModal(false),
         onBuy: (credits, price) => {
           handleBuyCredits(credits, price);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamoid/settings",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",