subos-frontend 1.0.20 → 1.0.22

package/dist/index.js

@@ -1833,6 +1833,7 @@ var TransactionFilter = ({
   showStatusFilter = true,
   showDateFilter = true,
   showSearchFilter = true,
+  showClearFilters = true,
   customStatusOptions
 }) => {
   const handleFilterChange = (key, value) => {
@@ -1889,18 +1890,15 @@ var TransactionFilter = ({
         )
       ] })
     ] }),
-    showStatusFilter && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium text-gray-700", children: "Status:" }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        TransactionStatusFilter,
-        {
-          selectedStatus: filters.status,
-          onStatusChange: (status) => handleFilterChange("status", status),
-          customStatuses: customStatusOptions
-        }
-      )
-    ] }),
-    hasActiveFilters && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxRuntime.jsx(
+    showStatusFilter && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+      TransactionStatusFilter,
+      {
+        selectedStatus: filters.status,
+        onStatusChange: (status) => handleFilterChange("status", status),
+        customStatuses: customStatusOptions
+      }
+    ) }),
+    hasActiveFilters && showClearFilters && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
         onClick: clearFilters,
@@ -2149,9 +2147,7 @@ var SubscriptionInfoGrid = ({
   fields,
   className = "",
   gridCols = 3,
-  showDefaultFields = true,
-  labelFontWeight = "normal",
-  valueFontWeight = "medium"
+  showDefaultFields = true
 }) => {
   const displayFields = fields || (showDefaultFields ? defaultFields : []);
   if (!subscription || displayFields.length === 0) {
@@ -2205,9 +2201,7 @@ var SubscriptionUsageDisplay = ({
   usageMetrics,
   className = "",
   gridCols = 3,
-  showProgressBars = false,
-  labelFontWeight = "normal",
-  valueFontWeight = "medium"
+  showProgressBars = false
 }) => {
   if (!subscription || usageMetrics.length === 0) {
     return null;
@@ -2240,22 +2234,6 @@ var SubscriptionUsageDisplay = ({
     if (percentage >= 75) return "bg-yellow-500";
     return "bg-green-500";
   };
-  const getFontWeightClass = (weight) => {
-    switch (weight) {
-      case "light":
-        return "font-light";
-      case "normal":
-        return "font-normal";
-      case "medium":
-        return "font-medium";
-      case "semibold":
-        return "font-semibold";
-      case "bold":
-        return "font-bold";
-      default:
-        return "font-normal";
-    }
-  };
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `grid ${getGridClass()} gap-4 ${className}`, children: usageMetrics.map((metric) => {
     var _a, _b;
     const used = ((_a = subscription.usage) == null ? void 0 : _a[metric.key]) || 0;
@@ -2264,8 +2242,30 @@ var SubscriptionUsageDisplay = ({
     const percentage = getProgressPercentage(used, total);
     const shouldShowProgress = showProgressBars || metric.showProgress;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 border border-gray-200 rounded-lg bg-white space-y-1", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: `text-sm text-gray-500 ${getFontWeightClass(labelFontWeight)}`, children: metric.label }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: getFontWeightClass(valueFontWeight), children: displayValue }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "p",
+        {
+          className: "text-sm text-gray-500",
+          style: {
+            fontSize: "var(--subos-font-size-subscription-label, 0.875rem)",
+            fontWeight: "var(--subos-font-weight-subscription-label, 400)",
+            color: "var(--subos-color-subscription-label, #6c757d)"
+          },
+          children: metric.label
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "p",
+        {
+          className: "font-medium",
+          style: {
+            fontSize: "var(--subos-font-size-subscription-value, 1rem)",
+            fontWeight: "var(--subos-font-weight-subscription-value, 500)",
+            color: "var(--subos-color-subscription-value, inherit)"
+          },
+          children: displayValue
+        }
+      ),
       shouldShowProgress && total > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full bg-gray-200 rounded-full h-2", children: /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
@@ -2619,6 +2619,7 @@ var SubscriptionDetails = ({
 };
 var UpgradeSummary = ({
   selectedPlan,
+  currentPlan,
   externalId,
   onUpgrade,
   isVisible = true
@@ -2626,10 +2627,25 @@ var UpgradeSummary = ({
   const [checkoutInfo, setCheckoutInfo] = React8.useState(null);
   const [loading, setLoading] = React8.useState(false);
   React8.useEffect(() => {
-    if (!selectedPlan || !isVisible || Number(selectedPlan.fixedCost) === 0) {
+    const planToDisplay2 = selectedPlan || currentPlan;
+    if (!planToDisplay2 || !isVisible || Number(planToDisplay2.fixedCost) === 0) {
       setCheckoutInfo(null);
       return;
     }
+    if (!selectedPlan && currentPlan) {
+      const mockCheckoutInfo = {
+        planName: currentPlan.name,
+        planPrice: currentPlan.fixedCost,
+        planInterval: currentPlan.interval,
+        proration: 0,
+        // No proration for current plan
+        planCode: currentPlan.code,
+        planCurrency: "USD"
+        // Default currency
+      };
+      setCheckoutInfo(mockCheckoutInfo);
+      return;
+    }
     const fetchCheckoutInfo = async () => {
       setLoading(true);
       try {
@@ -2645,8 +2661,10 @@ var UpgradeSummary = ({
       }
     };
     fetchCheckoutInfo();
-  }, [selectedPlan, externalId, isVisible]);
-  if (!selectedPlan || !isVisible || Number(selectedPlan.fixedCost) === 0 || loading || !checkoutInfo) {
+  }, [selectedPlan, currentPlan, externalId, isVisible]);
+  const planToDisplay = selectedPlan || currentPlan;
+  const isShowingCurrentPlan = !selectedPlan && currentPlan;
+  if (!planToDisplay || !isVisible || Number(planToDisplay.fixedCost) === 0 || loading || !checkoutInfo) {
     return null;
   }
   const displayInfo = checkoutInfo;
@@ -2655,9 +2673,9 @@ var UpgradeSummary = ({
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: "shadow-xl rounded-md border px-4 py-3",
+      className: "shadow-xl rounded-md border px-4 py-3 backdrop-blur-md",
       style: {
-        backgroundColor: "var(--subos-background, #ffffff)",
+        backgroundColor: "rgba(255, 255, 255, 0.6)",
         borderColor: "var(--subos-border, #e2e8f0)",
         boxShadow: "var(--subos-shadow-card-hover, 0 8px 24px rgba(0,0,0,0.15))"
       },
@@ -2701,7 +2719,7 @@ var UpgradeSummary = ({
                 {
                   className: "text-sm",
                   style: { color: "var(--subos-muted-foreground, #64748b)" },
-                  children: "Due Today"
+                  children: isShowingCurrentPlan ? "Current Cost" : "Due Today"
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsxs(
@@ -2715,7 +2733,7 @@ var UpgradeSummary = ({
                   ]
                 }
               ),
-              displayInfo.proration > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+              displayInfo.proration > 0 && !isShowingCurrentPlan && /* @__PURE__ */ jsxRuntime.jsx(
                 "p",
                 {
                   className: "text-xs mt-1",
@@ -2727,26 +2745,28 @@ var UpgradeSummary = ({
             /* @__PURE__ */ jsxRuntime.jsx(
               "button",
               {
-                onClick: onUpgrade,
-                disabled: loading,
-                className: "text-white px-8 py-3 rounded-lg font-semibold transition-all duration-200 text-sm disabled:opacity-50 shadow-md",
+                onClick: isShowingCurrentPlan ? void 0 : onUpgrade,
+                disabled: loading || !!isShowingCurrentPlan,
+                className: "text-white px-8 py-3 rounded-lg font-medium transition-all duration-200 text-sm disabled:opacity-50 shadow-md",
                 style: {
-                  backgroundColor: loading ? "var(--subos-muted, #f1f5f9)" : "var(--subos-primary-500, #ef4444)",
-                  color: loading ? "var(--subos-muted-foreground, #64748b)" : "white",
-                  border: "none",
-                  boxShadow: loading ? "none" : "0 4px 12px rgba(239, 68, 68, 0.3)"
+                  backgroundColor: loading || isShowingCurrentPlan ? "var(--subos-muted, #f1f5f9)" : "var(--subos-primary-500, #ef4444)",
+                  color: loading || isShowingCurrentPlan ? "var(--subos-muted-foreground, #64748b)" : "white",
+                  border: isShowingCurrentPlan ? "1px solid var(--subos-border, #e2e8f0)" : "none",
+                  boxShadow: loading || isShowingCurrentPlan ? "none" : "0 4px 12px rgba(239, 68, 68, 0.3)",
+                  cursor: isShowingCurrentPlan ? "not-allowed" : "pointer"
                 },
-                onMouseEnter: !loading ? (e) => {
+                onMouseEnter: !loading && !isShowingCurrentPlan ? (e) => {
                   e.currentTarget.style.backgroundColor = "#dc2626";
                   e.currentTarget.style.transform = "translateY(-1px)";
                   e.currentTarget.style.boxShadow = "0 6px 16px rgba(239, 68, 68, 0.4)";
                 } : void 0,
-                onMouseLeave: !loading ? (e) => {
+                onMouseLeave: !loading && !isShowingCurrentPlan ? (e) => {
                   e.currentTarget.style.backgroundColor = "var(--subos-primary-500, #ef4444)";
                   e.currentTarget.style.transform = "translateY(0)";
                   e.currentTarget.style.boxShadow = "0 4px 12px rgba(239, 68, 68, 0.3)";
                 } : void 0,
-                children: loading ? "Loading..." : "Upgrade Now"
+                title: isShowingCurrentPlan ? "This is your current active plan" : void 0,
+                children: loading ? "Loading..." : isShowingCurrentPlan ? "Current Plan" : "Upgrade Now"
               }
             )
           ] })
@@ -2963,7 +2983,7 @@ var Pagination = ({
 var DashboardPage = ({
   externalId
 }) => {
-  var _a;
+  var _a, _b, _c;
   const subscription = useSubscription();
   const plans = usePlans();
   const lastLoadedIdRef = React8.useRef(null);
@@ -3016,9 +3036,23 @@ var DashboardPage = ({
       UpgradeSummary,
       {
         selectedPlan: plans.selectedPlan,
+        currentPlan: ((_b = subscription.subscription) == null ? void 0 : _b.plan) ? {
+          id: subscription.subscription.plan.code,
+          name: subscription.subscription.plan.name,
+          code: subscription.subscription.plan.code,
+          fixedCost: subscription.subscription.plan.fixedCost,
+          paymentMode: subscription.subscription.plan.paymentMode,
+          interval: subscription.subscription.plan.interval,
+          successRedirectUrl: "",
+          order: 0,
+          isDefault: false,
+          intervalCount: 1,
+          projectId: "",
+          charges: subscription.subscription.plan.charges || []
+        } : null,
         externalId,
         onUpgrade: handleUpgrade,
-        isVisible: !!plans.selectedPlan
+        isVisible: !!plans.selectedPlan || !!((_c = subscription.subscription) == null ? void 0 : _c.plan)
       }
     )
   ] }) }) });