@streamoid/settings 0.3.2 → 0.3.4

package/dist/index.js

@@ -3394,6 +3394,90 @@ var import_react8 = require("react");
 var import_ui5 = require("@streamoid/ui");
 var import_icons5 = require("@streamoid/icons");
 
+// src/plan-comparison-data.ts
+var PLAN_COMPARISON_COLUMNS = ["Free", "Pro", "Enterprise"];
+var PLAN_COMPARISON_NOTE = "Credits roll over monthly and only expire if your plan is no longer active";
+var PLAN_COMPARISON_SECTIONS = [
+  {
+    rows: [{ label: "Usage volume", values: ["Limited", "Higher limits", "Unlimited"] }]
+  },
+  {
+    header: "Artifax (Design & Insights)",
+    rows: [
+      { label: "Priority processing", values: ["Low", "Medium", "High"] },
+      { label: "Tracked Brands", values: ["3 brands included", "5 brands included", "Unlimited"] },
+      { label: "Custom brand scraping", values: ["-", "Included", "Included"] },
+      { label: "Tracked news terms", values: ["-", "Up to 5 news terms", "Unlimited"] },
+      { label: "Pattern, design & graphic generation", values: ["Up to 60 images", "Up to 200 images", "Unlimited"] },
+      { label: "Vectorization & colorways", values: ["Up to 60 images", "Up to 200 images", "Unlimited"] },
+      { label: "Background removal", values: ["Up to 300 images", "Up to 1,000 images", "Unlimited"] },
+      { label: "Range planning", values: ["Up to 3 plans", "Up to 10 plans", "Unlimited"] },
+      { label: "Tech packs", values: ["Manual fill", "Up to 5 tech packs", "Unlimited"] },
+      { label: "Automated moodboards", values: ["Up to 20 moodboards", "Up to 66 moodboards", "Unlimited"] },
+      { label: "Export & download vector assets", values: ["Free", "Free", "Free"] }
+    ]
+  },
+  {
+    header: "Photogenix (Imagery & Video)",
+    rows: [
+      { label: "Priority processing", values: ["Low", "Medium", "High"] },
+      { label: "Image generation", values: ["Up to 60 images", "Up to 200 images", "Unlimited"] },
+      { label: "Image watermarks", values: ["Watermarked", "No watermark", "No watermark"] },
+      { label: "Image editing", values: ["Up to 300 edits", "Up to 1,000 edits", "Unlimited"] },
+      { label: "Video generation from image", values: ["Up to 20 videos", "Up to 66 videos", "Unlimited"] },
+      { label: "Video with background changes", values: ["Up to 15 videos", "Up to 50 videos", "Unlimited"] },
+      { label: "Video Advertisement generation", values: ["-", "Included", "Included"] },
+      { label: "Automated shoot configuration", values: ["Up to 300 products", "Up to 1,000 products", "Unlimited"] },
+      { label: "UGC content creation", values: ["Up to 15 outputs", "Up to 50 outputs", "Unlimited"] },
+      { label: "Marketplace exports", values: ["Up to 300 exports", "Up to 1,000 exports", "Unlimited"] }
+    ]
+  },
+  {
+    header: "Catalogix (Cataloging & Listing)",
+    rows: [
+      { label: "Priority processing", values: ["Low", "Medium", "High"] },
+      { label: "Data import & mapping", values: ["Free", "Free", "Free"] },
+      { label: "Attributes from images (express)", values: ["Up to 100 styles", "Up to 333 styles", "Unlimited"] },
+      { label: "Attributes from images (precise)", values: ["Up to 42 styles", "Up to 142 styles", "Unlimited"] },
+      // Blank-label sub-row per the design export (values present, no label).
+      { label: "", values: ["Up to 100 styles", "Up to 333 styles", "Unlimited"] },
+      { label: "Background removal", values: ["Up to 60 styles", "Up to 200 styles", "Unlimited"] },
+      { label: "Identify image type (pose)", values: ["Up to 100 styles", "Up to 333 styles", "Unlimited"] },
+      { label: "Extra images (detail shots)", values: ["Up to 150 styles", "Up to 500 styles", "Unlimited"] },
+      // Blank-label sub-row per the design export.
+      { label: "", values: ["Up to 150 styles", "Up to 500 styles", "Unlimited"] },
+      { label: "Product titles & descriptions", values: ["Up to 150 styles", "Up to 500 styles", "Unlimited"] },
+      { label: "SEO content", values: ["Up to 150 styles", "Up to 500 styles", "Unlimited"] },
+      { label: "Size charts", values: ["Up to 150 styles", "Up to 500 styles", "Unlimited"] },
+      { label: "Translation (data & images)", values: ["Up to 100 styles", "Up to 333 styles", "Unlimited"] },
+      { label: "Automated quality checks", values: ["Up to 150 styles", "Up to 500 styles", "Unlimited"] }
+    ]
+  },
+  {
+    header: "Security & Compliance",
+    rows: [
+      { label: "SSO / SAML", values: ["-", "-", "Included"] },
+      { label: "Role-based access control", values: ["-", "-", "Included"] },
+      { label: "Audit logs", values: ["-", "-", "Included"] },
+      { label: "Data residency / region controls", values: ["-", "-", "Included"] },
+      { label: "Custom data retention & DPA", values: ["-", "-", "Included"] }
+    ]
+  },
+  {
+    header: "Support",
+    rows: [
+      { label: "Support level", values: ["Community / docs", "Standard support", "Dedicated support + customer success manager"] },
+      { label: "SLA", values: ["-", "-", "Custom SLA"] },
+      { label: "Onboarding", values: ["Self-serve", "Self-serve", "Guided onboarding & training"] }
+    ]
+  }
+];
+var PLAN_TAGLINES = {
+  free: "Try the AI agents and automate your first workflows",
+  pro: "Scale your team's output and get to market faster",
+  enterprise: "For high-volume brands, agencies, and marketplaces that need custom scale, integrations, and support"
+};
+
 // src/export-date-modal.tsx
 var import_react6 = require("react");
 var import_icons3 = require("@streamoid/icons");
@@ -4235,232 +4319,6 @@ function getCurrencySymbolByCountry(country) {
 function formatCredits(n) {
   return n.toLocaleString("en-US");
 }
-var SECTION_ICON_PROPS = {
-  color: "var(--alias-text---icons-tertiary)",
-  size: 24,
-  strokeWidth: 1.5
-};
-var PLAN_FEATURES_BY_AMOUNT = {
-  // Free — 300 credits
-  0: [
-    {
-      section: "Artifax",
-      icon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons5.SiconArtifacts, { ...SECTION_ICON_PROPS }),
-      features: [
-        "Generate up to 60 images",
-        "Fill techpacks manually",
-        "Monitor up to 3 essential brands"
-      ]
-    },
-    {
-      section: "Photogenix",
-      icon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons5.SiconPhotogenix, { ...SECTION_ICON_PROPS }),
-      features: [
-        "Generate up to 60 images",
-        "Generate up to 18 videos (8s)",
-        "Retouch up to 300 images"
-      ]
-    },
-    {
-      section: "Catalogix",
-      icon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons5.SiconCatalogix, { ...SECTION_ICON_PROPS }),
-      features: [
-        "Upload 50 products per store",
-        "Catalog up to 75 products",
-        "List up to 30 template files"
-      ]
-    }
-  ],
-  // PRO $49.99 — 1,000 credits
-  4999: [
-    {
-      section: "Artifax",
-      icon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons5.SiconArtifacts, { ...SECTION_ICON_PROPS }),
-      features: [
-        "Generate up to 200 images",
-        "Autofill up to 5 techpacks",
-        "Monitor up to 10 custom brands"
-      ]
-    },
-    {
-      section: "Photogenix",
-      icon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons5.SiconPhotogenix, { ...SECTION_ICON_PROPS }),
-      features: [
-        "Generate up to 200 images",
-        "Generate up to 60 videos (8s)",
-        "Retouch up to 1,000 images"
-      ]
-    },
-    {
-      section: "Catalogix",
-      icon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons5.SiconCatalogix, { ...SECTION_ICON_PROPS }),
-      features: [
-        "Upload 100k products per store",
-        "Catalog up to 250 products",
-        "List up to 100 template files"
-      ]
-    }
-  ],
-  // PRO $149.99 — 3,000 credits
-  14999: [
-    {
-      section: "Artifax",
-      icon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons5.SiconArtifacts, { ...SECTION_ICON_PROPS }),
-      features: [
-        "Generate up to 600 images",
-        "Autofill up to 15 techpacks",
-        "Monitor up to 30 custom brands"
-      ]
-    },
-    {
-      section: "Photogenix",
-      icon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons5.SiconPhotogenix, { ...SECTION_ICON_PROPS }),
-      features: [
-        "Generate up to 600 images",
-        "Generate up to 180 videos (8s)",
-        "Retouch up to 3,000 images"
-      ]
-    },
-    {
-      section: "Catalogix",
-      icon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons5.SiconCatalogix, { ...SECTION_ICON_PROPS }),
-      features: [
-        "Upload 100k products per store",
-        "Catalog up to 750 products",
-        "List up to 300 template files"
-      ]
-    }
-  ],
-  // PRO $349.99 — 8,000 credits
-  34999: [
-    {
-      section: "Artifax",
-      icon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons5.SiconArtifacts, { ...SECTION_ICON_PROPS }),
-      features: [
-        "Generate up to 1,600 images",
-        "Autofill up to 40 techpacks",
-        "Monitor up to 80 custom brands"
-      ]
-    },
-    {
-      section: "Photogenix",
-      icon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons5.SiconPhotogenix, { ...SECTION_ICON_PROPS }),
-      features: [
-        "Generate up to 1,600 images",
-        "Generate up to 480 videos (8s)",
-        "Retouch up to 8,000 images"
-      ]
-    },
-    {
-      section: "Catalogix",
-      icon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons5.SiconCatalogix, { ...SECTION_ICON_PROPS }),
-      features: [
-        "Upload 100k products per store",
-        "Catalog up to 2,000 products",
-        "List up to 800 template files"
-      ]
-    }
-  ],
-  // PRO $549.99 — 15,000 credits
-  54999: [
-    {
-      section: "Artifax",
-      icon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons5.SiconArtifacts, { ...SECTION_ICON_PROPS }),
-      features: [
-        "Generate up to 3,000 images",
-        "Autofill up to 75 techpacks",
-        "Monitor up to 150 custom brands"
-      ]
-    },
-    {
-      section: "Photogenix",
-      icon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons5.SiconPhotogenix, { ...SECTION_ICON_PROPS }),
-      features: [
-        "Generate up to 3,000 images",
-        "Generate up to 900 videos (8s)",
-        "Retouch up to 15,000 images"
-      ]
-    },
-    {
-      section: "Catalogix",
-      icon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons5.SiconCatalogix, { ...SECTION_ICON_PROPS }),
-      features: [
-        "Upload 100k products per store",
-        "Catalog up to 3,750 products",
-        "List up to 1,500 template files"
-      ]
-    }
-  ],
-  // PRO $1,049.99 — 30,000 credits
-  104999: [
-    {
-      section: "Artifax",
-      icon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons5.SiconArtifacts, { ...SECTION_ICON_PROPS }),
-      features: [
-        "Generate up to 6,000 images",
-        "Autofill up to 150 techpacks",
-        "Monitor up to 300 custom brands"
-      ]
-    },
-    {
-      section: "Photogenix",
-      icon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons5.SiconPhotogenix, { ...SECTION_ICON_PROPS }),
-      features: [
-        "Generate up to 6,000 images",
-        "Generate up to 1,800 videos (8s)",
-        "Retouch up to 30,000 images"
-      ]
-    },
-    {
-      section: "Catalogix",
-      icon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons5.SiconCatalogix, { ...SECTION_ICON_PROPS }),
-      features: [
-        "Upload 100k products per store",
-        "Catalog up to 7,500 products",
-        "List up to 3,000 template files"
-      ]
-    }
-  ]
-};
-var ENTERPRISE_FEATURES = [
-  {
-    section: "Artifax",
-    icon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons5.SiconArtifacts, { ...SECTION_ICON_PROPS }),
-    features: [
-      "Custom image generations",
-      "Custom techpack autofilled",
-      "Custom number of brands"
-    ]
-  },
-  {
-    section: "Photogenix",
-    icon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons5.SiconPhotogenix, { ...SECTION_ICON_PROPS }),
-    features: [
-      "Custom image generations",
-      "Custom video generations",
-      "Custom image retouches"
-    ]
-  },
-  {
-    section: "Catalogix",
-    icon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons5.SiconCatalogix, { ...SECTION_ICON_PROPS }),
-    features: [
-      "Custom product uploads",
-      "Custom product cataloging",
-      "Custom template file listings"
-    ]
-  }
-];
-function getPlanFeatures(amount) {
-  if (PLAN_FEATURES_BY_AMOUNT[amount]) return PLAN_FEATURES_BY_AMOUNT[amount];
-  const tiers = Object.keys(PLAN_FEATURES_BY_AMOUNT).map(Number).sort((a, b) => a - b);
-  let best = tiers[0];
-  for (const t of tiers) {
-    if (t <= amount) best = t;
-    else break;
-  }
-  return PLAN_FEATURES_BY_AMOUNT[best] ?? [];
-}
 function formatNextBillingDateLabel(iso) {
   if (iso) {
     const parsed = new Date(iso);
@@ -4480,6 +4338,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,
@@ -4785,8 +4653,10 @@ function UpdateSubscriptionModal({
     }
   );
 }
+var stripMonthly = (price) => price.replace(/\s*\/\s*month\s*$/i, "");
 function PlansView({
   onBack,
+  hideHeader,
   products,
   currentPlanId,
   currentPlanEndDate,
@@ -4884,80 +4754,42 @@ function PlansView({
         backgroundSize: "24px 24px"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+        !hideHeader && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           "div",
           {
-            className: "flex items-center shrink-0 w-full",
+            className: "flex items-center justify-end shrink-0 w-full",
             style: { gap: "var(--spacing-lg)" },
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
-                "div",
-                {
-                  className: "flex flex-col",
-                  style: { gap: "var(--spacing-xs)", flex: 1, minWidth: 0 },
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                      "p",
-                      {
-                        className: "min-w-0 truncate",
-                        style: {
-                          fontFamily: "var(--font-family-font-family-display)",
-                          fontSize: "var(--font-size-font-size-xxl)",
-                          fontWeight: 700,
-                          lineHeight: "var(--line-height-line-height-xxl)",
-                          color: "var(--alias-text---icons-primary)"
-                        },
-                        children: "Upgrade Plans"
-                      }
-                    ),
-                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                      "p",
-                      {
-                        style: {
-                          fontFamily: "var(--font-family-font-family-body)",
-                          fontSize: "var(--font-size-font-size-sm)",
-                          fontWeight: 400,
-                          lineHeight: "var(--line-height-line-height-sm)",
-                          color: "var(--alias-text---icons-muted)"
-                        },
-                        children: "Pick a plan based on your monthly usage and credit needs."
-                      }
-                    )
-                  ]
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
-                "div",
-                {
-                  className: "flex items-center shrink-0 cursor-pointer",
-                  style: {
-                    gap: "var(--spacing-sm)",
-                    padding: "var(--spacing-xs) var(--spacing-lg)",
-                    borderRadius: "var(--radius-xl)",
-                    height: 32,
-                    border: "1px solid var(--alias-border-subtle)",
-                    backgroundColor: "var(--alias-surface-base)"
-                  },
-                  onClick: onBack,
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons5.SiconLeft, { className: "w-4 h-4", color: MUTED_COLOR }),
-                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                      "span",
-                      {
-                        style: {
-                          fontFamily: "var(--font-family-font-family-body)",
-                          fontSize: "var(--font-size-font-size-sm)",
-                          fontWeight: 500,
-                          lineHeight: "var(--line-height-line-height-sm)",
-                          color: "var(--alias-text---icons-muted)"
-                        },
-                        children: "Back to billing"
-                      }
-                    )
-                  ]
-                }
-              )
-            ]
+            children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+              "div",
+              {
+                className: "flex items-center shrink-0 cursor-pointer",
+                style: {
+                  gap: "var(--spacing-sm)",
+                  padding: "var(--spacing-xs) var(--spacing-lg)",
+                  borderRadius: "var(--radius-xl)",
+                  height: 32,
+                  border: "1px solid var(--alias-border-subtle)",
+                  backgroundColor: "var(--alias-surface-base)"
+                },
+                onClick: onBack,
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_icons5.SiconLeft, { className: "w-4 h-4", color: MUTED_COLOR }),
+                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                    "span",
+                    {
+                      style: {
+                        fontFamily: "var(--font-family-font-family-body)",
+                        fontSize: "var(--font-size-font-size-sm)",
+                        fontWeight: 500,
+                        lineHeight: "var(--line-height-line-height-sm)",
+                        color: "var(--alias-text---icons-muted)"
+                      },
+                      children: "Back to billing"
+                    }
+                  )
+                ]
+              }
+            )
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
@@ -4970,10 +4802,10 @@ function PlansView({
                 import_ui5.ScPlanCard,
                 {
                   planName: freePlan?.planName || "Free",
-                  price: freePlan?.price || `${workspaceCurrencySymbol}0`,
+                  price: stripMonthly(freePlan?.price || `${workspaceCurrencySymbol}0`),
                   credits: freePlan?.credits || "3,000 credits",
                   type: "free",
-                  features: getPlanFeatures(freePlan?.amount ?? 0),
+                  tagline: PLAN_TAGLINES.free,
                   buttonText: isFreeActionLoading ? "Processing..." : freePlan?.isCurrent ? "Current plan" : "Downgrade to free",
                   buttonState: freePlan?.isCurrent || isFreeActionLoading ? "disabled" : "default",
                   buttonVariant: "secondary",
@@ -5000,12 +4832,10 @@ function PlansView({
                 import_ui5.ScPlanCard,
                 {
                   planName: "Pro",
-                  price: selectedMiddlePlan?.price || "\u2014",
+                  price: stripMonthly(selectedMiddlePlan?.price || "\u2014"),
                   credits: selectedMiddlePlan?.credits || "\u2014",
                   type: "popular",
-                  features: getPlanFeatures(
-                    selectedMiddlePlan?.amount ?? middlePlans[0]?.amount ?? 4999
-                  ),
+                  tagline: PLAN_TAGLINES.pro,
                   buttonText: isMiddleActionLoading ? "Processing..." : !selectedMiddlePlan ? "Select a plan" : selectedMiddlePlan.isCurrent ? "Current plan" : selectedMiddlePlan.amount > currentPlanAmount ? "Upgrade" : "Downgrade",
                   buttonState: selectedMiddlePlan?.isCurrent || isMiddleActionLoading || !selectedMiddlePlan ? "disabled" : "default",
                   buttonVariant: selectedMiddlePlan?.isCurrent ? "outline" : selectedMiddlePlan && selectedMiddlePlan.amount > currentPlanAmount ? "primary" : "secondary",
@@ -5096,12 +4926,8 @@ function PlansView({
                 {
                   planName: "Enterprise",
                   type: "custom",
-                  description: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { style: { marginBottom: 0 }, children: "The Enterprise plan is for teams operating at scale." }),
-                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("br", {}),
-                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { style: { marginBottom: 0 }, children: "Get expanded capacity, flexible usage options, and dedicated support to manage large production volumes and complex catalogs with confidence." })
-                  ] }),
-                  buttonText: "Contact us",
+                  tagline: PLAN_TAGLINES.enterprise,
+                  buttonText: "Contact Sales",
                   buttonVariant: "secondary",
                   onUpgrade: () => {
                     window.open("https://cal.com/streamoid/30min", "_blank");
@@ -5113,17 +4939,13 @@ function PlansView({
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-          "p",
+          import_ui5.ScPlanComparison,
           {
-            className: "w-full text-center",
-            style: {
-              fontFamily: "var(--font-family-font-family-body)",
-              fontSize: "var(--font-size-font-size-sm)",
-              fontWeight: 400,
-              lineHeight: "var(--line-height-line-height-sm)",
-              color: "var(--alias-text---icons-muted)"
-            },
-            children: "Credits expire monthly"
+            layout: "table",
+            columns: [...PLAN_COMPARISON_COLUMNS],
+            note: PLAN_COMPARISON_NOTE,
+            sections: PLAN_COMPARISON_SECTIONS,
+            highlightColumnIndex: 1
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
@@ -5513,7 +5335,9 @@ function UsageLogsTable({
   );
 }
 function BillingContent({
-  embedded = false
+  embedded = false,
+  showPlans: showPlansProp,
+  onShowPlansChange
 } = {}) {
   const { auth, workspace, api, toast, navigation } = useSettingsAdapters();
   const user = auth.user;
@@ -5526,14 +5350,19 @@ function BillingContent({
     return `${window.location.origin}${window.location.pathname}`;
   };
   const [activeTab, setActiveTab] = (0, import_react8.useState)("invoice");
-  const [showPlans, setShowPlans] = (0, import_react8.useState)(false);
+  const [showPlansInternal, setShowPlansInternal] = (0, import_react8.useState)(false);
+  const showPlans = showPlansProp ?? showPlansInternal;
+  const setShowPlans = (next) => {
+    if (onShowPlansChange) onShowPlansChange(next);
+    else setShowPlansInternal(next);
+  };
   const [showExportModal, setShowExportModal] = (0, import_react8.useState)(false);
   const [showBuyCreditsModal, setShowBuyCreditsModal] = (0, import_react8.useState)(false);
   const [subscription, setSubscription] = (0, import_react8.useState)(null);
   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 +5373,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 +5398,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 +5427,7 @@ function BillingContent({
     } catch {
     } finally {
       setLoadingBilling(false);
+      setBillingOverviewLoaded(true);
     }
   }, [api, workspace.current?.country]);
   const fetchUserMap = (0, import_react8.useCallback)(async () => {
@@ -5737,6 +5569,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 +5593,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;
@@ -5958,6 +5818,7 @@ function BillingContent({
       PlansView,
       {
         onBack: () => setShowPlans(false),
+        hideHeader: Boolean(onShowPlansChange),
         products,
         currentPlanId: subscription?.plan?.id,
         currentPlanEndDate: subscription?.plan?.subscriptionEndDate,
@@ -5983,11 +5844,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 +5947,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);
@@ -7798,6 +7663,11 @@ function SettingsContentInner({ activeTab }) {
   const [teamInviteOpen, setTeamInviteOpen] = (0, import_react10.useState)(false);
   const [tokenShowRevoked, setTokenShowRevoked] = (0, import_react10.useState)(false);
   const [tokenCreateOpen, setTokenCreateOpen] = (0, import_react10.useState)(false);
+  const [billingShowPlans, setBillingShowPlans] = (0, import_react10.useState)(false);
+  const isBillingPlans = activeTab === "billing" && billingShowPlans;
+  (0, import_react10.useEffect)(() => {
+    if (activeTab !== "billing") setBillingShowPlans(false);
+  }, [activeTab]);
   const [localWorkspaces, setLocalWorkspaces] = (0, import_react10.useState)(null);
   const [wsModalOpen, setWsModalOpen] = (0, import_react10.useState)(false);
   const [wsModalMode, setWsModalMode] = (0, import_react10.useState)("create");
@@ -8090,8 +7960,55 @@ function SettingsContentInner({ activeTab }) {
                           },
                           children: TAB_LABELS[activeTab]
                         }
-                      )
+                      ),
+                      isBillingPlans && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_icons7.SiconRight, { className: "w-6 h-6 shrink-0", color: "var(--alias-text---icons-primary)" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                          "span",
+                          {
+                            style: {
+                              fontFamily: "var(--font-family-font-family-body)",
+                              fontSize: "var(--font-size-font-size-xl)",
+                              fontWeight: 500,
+                              lineHeight: "var(--line-height-line-height-xl)",
+                              color: "var(--alias-text---icons-primary)"
+                            },
+                            children: "Plans"
+                          }
+                        )
+                      ] })
                     ] }),
+                    isBillingPlans && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+                      "div",
+                      {
+                        className: "flex items-center shrink-0 cursor-pointer",
+                        style: {
+                          gap: "var(--spacing-sm)",
+                          padding: "var(--spacing-xs) var(--spacing-lg)",
+                          borderRadius: "var(--radius-xl)",
+                          height: 32,
+                          border: "1px solid var(--alias-border-subtle)",
+                          backgroundColor: "var(--alias-surface-base)"
+                        },
+                        onClick: () => setBillingShowPlans(false),
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_icons7.SiconLeft, { className: "w-4 h-4", color: "var(--alias-text---icons-muted)" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                            "span",
+                            {
+                              style: {
+                                fontFamily: "var(--font-family-font-family-body)",
+                                fontSize: "var(--font-size-font-size-sm)",
+                                fontWeight: 500,
+                                lineHeight: "var(--line-height-line-height-sm)",
+                                color: "var(--alias-text---icons-muted)"
+                              },
+                              children: "Back to billing"
+                            }
+                          )
+                        ]
+                      }
+                    ),
                     activeTab === "workspace" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                       import_ui9.ScButton,
                       {
@@ -8163,7 +8080,7 @@ function SettingsContentInner({ activeTab }) {
                   className: "flex items-start flex-1 min-h-0 w-full overflow-hidden",
                   style: { gap: 20 },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SettingsNav, { activeTab, onTabChange: setActiveTab }),
+                    !isBillingPlans && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SettingsNav, { activeTab, onTabChange: setActiveTab }),
                     activeTab === "profile" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ProfileTab, {}),
                     activeTab === "workspace" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                       WorkspaceTab,
@@ -8188,7 +8105,14 @@ function SettingsContentInner({ activeTab }) {
                     ),
                     activeTab === "referral" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ReferralTab, {}),
                     activeTab === "team" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex flex-col flex-1 min-w-0 min-h-0 h-full", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TeamsContent, { embedded: true, onInviteOpen: teamInviteOpen, onInviteOpenChange: setTeamInviteOpen }) }),
-                    activeTab === "billing" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex flex-col flex-1 min-w-0 min-h-0 h-full", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(BillingContent, { embedded: true }) }),
+                    activeTab === "billing" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex flex-col flex-1 min-w-0 min-h-0 h-full", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                      BillingContent,
+                      {
+                        embedded: true,
+                        showPlans: billingShowPlans,
+                        onShowPlansChange: setBillingShowPlans
+                      }
+                    ) }),
                     activeTab === "apikey" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex flex-col flex-1 min-w-0 min-h-0 h-full", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                       TokensContent,
                       {