@streamoid/settings 0.3.2 → 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;
 }

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;
 }

package/dist/index.js

@@ -4480,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,
@@ -5533,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)(
@@ -5544,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);
@@ -5568,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([
@@ -5596,6 +5608,7 @@ function BillingContent({
     } catch {
     } finally {
       setLoadingBilling(false);
+      setBillingOverviewLoaded(true);
     }
   }, [api, workspace.current?.country]);
   const fetchUserMap = (0, import_react8.useCallback)(async () => {
@@ -5737,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);
@@ -5755,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;
@@ -5983,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", {
@@ -6084,7 +6127,9 @@ function BillingContent({
       BuyCreditsModal,
       {
         country: workspace.current?.country,
-        currencySymbol: getCurrencySymbolByCountry(workspace.current?.country),
+        currencySymbol: getCurrencySymbolByCountry(
+          workspace.current?.country
+        ),
         onClose: () => setShowBuyCreditsModal(false),
         onBuy: (credits, price) => {
           handleBuyCredits(credits, price);

package/dist/index.mjs

@@ -4499,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,
@@ -5552,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(
@@ -5563,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);
@@ -5587,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([
@@ -5615,6 +5627,7 @@ function BillingContent({
     } catch {
     } finally {
       setLoadingBilling(false);
+      setBillingOverviewLoaded(true);
     }
   }, [api, workspace.current?.country]);
   const fetchUserMap = useCallback3(async () => {
@@ -5756,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);
@@ -5774,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;
@@ -6002,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", {
@@ -6103,7 +6146,9 @@ function BillingContent({
       BuyCreditsModal,
       {
         country: workspace.current?.country,
-        currencySymbol: getCurrencySymbolByCountry(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.2",
+  "version": "0.3.3",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",