subos-frontend 1.0.99 → 1.0.102

package/dist/index.js

@@ -514,7 +514,7 @@ var getUniqueCandidateUnits = (plans) => {
       var _a, _b;
       if (((_a = charge.billableMetric) == null ? void 0 : _a.code) === "CANDIDATES") {
         const units = (_b = charge.properties) == null ? void 0 : _b.units;
-        if (typeof units === "number" && Number.isFinite(units)) {
+        if (typeof units === "number" && Number.isFinite(units) && units !== 500) {
           unitsSet.add(units);
         }
       }
@@ -2605,10 +2605,11 @@ var SubscriptionInfoGrid = ({
   fields,
   className = "",
   gridCols = 3,
-  showDefaultFields = true
+  showDefaultFields = true,
+  loading = false
 }) => {
   const displayFields = fields || (showDefaultFields ? defaultFields : []);
-  if (!subscription || displayFields.length === 0) {
+  if (displayFields.length === 0) {
     return null;
   }
   const getGridClass = () => {
@@ -2651,7 +2652,7 @@ var SubscriptionInfoGrid = ({
             fontWeight: "var(--subos-font-weight-subscription-value, 500)",
             color: "var(--subos-color-subscription-value, inherit)"
           },
-          children: field.getValue(subscription)
+          children: loading ? "N/A" : field.getValue(subscription) || "N/A"
         }
       )
     ] }, field.key);
@@ -2662,9 +2663,10 @@ var SubscriptionUsageDisplay = ({
   usageMetrics,
   className = "",
   gridCols = 3,
-  showProgressBars = false
+  showProgressBars = false,
+  loading = false
 }) => {
-  if (!subscription || usageMetrics.length === 0) {
+  if (usageMetrics.length === 0) {
     return null;
   }
   const getGridClass = () => {
@@ -2697,9 +2699,9 @@ var SubscriptionUsageDisplay = ({
   };
   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;
-    const total = ((_b = subscription.meta) == null ? void 0 : _b[metric.key]) || 0;
-    const displayValue = metric.formatValue ? metric.formatValue(used, total) : formatDefaultValue(used, total);
+    const used = ((_a = subscription == null ? void 0 : subscription.usage) == null ? void 0 : _a[metric.key]) ?? 0;
+    const total = ((_b = subscription == null ? void 0 : subscription.meta) == null ? void 0 : _b[metric.key]) ?? 0;
+    const displayValue = loading ? "N/A" : metric.formatValue ? metric.formatValue(used, total) : formatDefaultValue(used, total);
     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: [
@@ -3016,6 +3018,41 @@ var ScheduledPlanNotification = ({
     ] }) })
   ] });
 };
+var GracePeriodNotification = ({
+  subscription,
+  className = ""
+}) => {
+  var _a;
+  if (!((_a = subscription == null ? void 0 : subscription.meta) == null ? void 0 : _a.isGracePeriod)) {
+    return null;
+  }
+  const startDate = subscription.meta.gracePeriodStart;
+  const endDate = subscription.meta.gracePeriodEnd;
+  let remainingDays = subscription.remainingGracePeriodDays ?? 0;
+  if (endDate) {
+    const end = new Date(endDate).getTime();
+    const now = (/* @__PURE__ */ new Date()).getTime();
+    const diff = end - now;
+    remainingDays = Math.max(0, Math.ceil(diff / (1e3 * 60 * 60 * 24)));
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `mb-4 p-4 bg-orange-50 border border-orange-200 rounded-lg flex items-start gap-3 ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-orange-500 mt-0.5", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-bold text-orange-900 mb-1", children: "Grace Period Active" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-orange-800", children: [
+        "Your 7-day grace period started on",
+        " ",
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold", children: startDate ? formatDate(startDate) : "N/A" }),
+        ". You have ",
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-bold text-orange-900 text-base", children: [
+          remainingDays,
+          " days remaining"
+        ] }),
+        " to update your payment method to continue your subscription without interruption."
+      ] })
+    ] })
+  ] });
+};
 var SubscriptionDetails = ({
   subscription,
   externalId,
@@ -3028,7 +3065,8 @@ var SubscriptionDetails = ({
   showCancelButton = true,
   showChangeCardButton = true,
   customActions = [],
-  className = ""
+  className = "",
+  loading = false
 }) => {
   const [isTransactionModalOpen, setIsTransactionModalOpen] = React10.useState(false);
   const [showCancelConfirmation, setShowCancelConfirmation] = React10.useState(false);
@@ -3112,11 +3150,13 @@ var SubscriptionDetails = ({
         ) })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(ScheduledPlanNotification, { subscription: localSubscription }),
+      /* @__PURE__ */ jsxRuntime.jsx(GracePeriodNotification, { subscription: localSubscription }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-5 gap-4", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           SubscriptionInfoGrid,
           {
             subscription: localSubscription,
+            loading,
             className: "!contents",
             gridCols: usageMetrics.length > 0 ? 3 : 5
           }
@@ -3125,6 +3165,7 @@ var SubscriptionDetails = ({
           SubscriptionUsageDisplay,
           {
             subscription: localSubscription,
+            loading,
             usageMetrics,
             gridCols: Math.min(usageMetrics.length, 3),
             className: "!contents"
@@ -3249,7 +3290,7 @@ var UpgradeSummary = ({
                 style: { color: "var(--subos-foreground, #1e293b)" },
                 children: [
                   currencySymbol,
-                  formatCurrencyAmount(displayInfo.planPrice, currencyCode),
+                  formatCurrencyAmount((displayInfo == null ? void 0 : displayInfo.planPrice) || 0, currencyCode),
                   "/",
                   intervalDisplay
                 ]
@@ -3281,7 +3322,7 @@ var UpgradeSummary = ({
                   style: { color: "var(--subos-foreground, #1e293b)" },
                   children: [
                     currencySymbol,
-                    formatCurrencyAmount(dueToday, currencyCode)
+                    formatCurrencyAmount(dueToday || 0, currencyCode)
                   ]
                 }
               ),
@@ -3538,6 +3579,7 @@ var DashboardPage = ({
       SubscriptionDetails,
       {
         subscription: subscription.subscription,
+        loading: subscription.loading,
         externalId,
         onSubscriptionCancelled: () => {
           subscription.fetchSubscription(externalId);