subos-frontend 1.0.7 → 1.0.8

package/dist/index.js

@@ -1,13 +1,13 @@
 'use strict';
 
-var React3 = require('react');
+var React4 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var reactRouterDom = require('react-router-dom');
 
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React3__default = /*#__PURE__*/_interopDefault(React3);
+var React4__default = /*#__PURE__*/_interopDefault(React4);
 
 // src/config/envConfig.ts
 function getEnvVar(key, fallback) {
@@ -107,6 +107,7 @@ var getHeaders = () => {
 var ENDPOINTS = {
   PLANS: "/plans",
   PAYMENTS: "/api/payments",
+  CHECKOUT: "/checkout",
   SUBSCRIPTION: "/subscription",
   CUSTOMER: "/customer",
   TRANSACTIONS: "/transaction"
@@ -163,7 +164,7 @@ var plansApi = {
     if (options == null ? void 0 : options.couponCode) payload.couponCode = options.couponCode;
     if (typeof amount === "number" && amount > 0) payload.amount = amount;
     const resp = await apiRequest(
-      `${ENDPOINTS.PAYMENTS}/checkout`,
+      `${ENDPOINTS.CHECKOUT}`,
       "POST",
       payload
     );
@@ -188,6 +189,9 @@ var subscriptionApi = {
       }
     }
     return apiRequest(endpoint, "DELETE");
+  },
+  checkoutInfo: async (planCode, externalId) => {
+    return apiRequest(`${ENDPOINTS.CHECKOUT}/info/${planCode}/${externalId}`);
   }
 };
 var customerApi = {
@@ -212,10 +216,10 @@ var transactionApi = {
   getInvoice: (transactionId) => apiRequest(`${ENDPOINTS.TRANSACTIONS}/${transactionId}/invoice`)
 };
 var useSubscription = () => {
-  const [subscription, setSubscription] = React3.useState(null);
-  const [loading, setLoading] = React3.useState(false);
-  const [error, setError] = React3.useState(null);
-  const fetchSubscription = React3.useCallback(async (externalId) => {
+  const [subscription, setSubscription] = React4.useState(null);
+  const [loading, setLoading] = React4.useState(false);
+  const [error, setError] = React4.useState(null);
+  const fetchSubscription = React4.useCallback(async (externalId) => {
     if (!externalId || externalId === "undefined" || externalId.trim() === "") {
       setError("Invalid user ID. Please ensure you are properly authenticated.");
       setLoading(false);
@@ -240,7 +244,7 @@ var useSubscription = () => {
       setLoading(false);
     }
   }, [loading]);
-  const clearSubscription = React3.useCallback(() => {
+  const clearSubscription = React4.useCallback(() => {
     setSubscription(null);
     setError(null);
   }, []);
@@ -355,8 +359,19 @@ var getPlanDescription = (plan) => {
     return "Perfect for creators ready to run a full-scale, smart hiring engine with AI and advanced capabilities.";
   }
 };
-var formatDate = (dateString) => {
+var formatDate = (dateString, format = "date") => {
   const date = new Date(dateString);
+  if (format === "datetime") {
+    return new Intl.DateTimeFormat("en-US", {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+      hour: "2-digit",
+      minute: "2-digit",
+      hour12: false
+      // Military time format
+    }).format(date);
+  }
   return new Intl.DateTimeFormat("en-US", {
     year: "numeric",
     month: "short",
@@ -366,14 +381,14 @@ var formatDate = (dateString) => {
 
 // src/hooks/usePlans.ts
 var usePlans = () => {
-  const [plans, setPlans] = React3.useState([]);
-  const [filteredPlans, setFilteredPlans] = React3.useState([]);
-  const [selectedPlan, setSelectedPlan] = React3.useState(null);
-  const [tierFilter, setTierFilter] = React3.useState("all");
-  const [billingCycle, setBillingCycle] = React3.useState("monthly");
-  const [loading, setLoading] = React3.useState(false);
-  const [error, setError] = React3.useState(null);
-  const fetchPlans = React3.useCallback(async () => {
+  const [plans, setPlans] = React4.useState([]);
+  const [filteredPlans, setFilteredPlans] = React4.useState([]);
+  const [selectedPlan, setSelectedPlan] = React4.useState(null);
+  const [tierFilter, setTierFilter] = React4.useState("all");
+  const [billingCycle, setBillingCycle] = React4.useState("monthly");
+  const [loading, setLoading] = React4.useState(false);
+  const [error, setError] = React4.useState(null);
+  const fetchPlans = React4.useCallback(async () => {
     if (loading) return;
     setLoading(true);
     setError(null);
@@ -395,7 +410,7 @@ var usePlans = () => {
       setLoading(false);
     }
   }, [loading]);
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     if (plans.length > 0 && tierFilter === "all") {
       const uniqueUnits = getUniqueCandidateUnits(plans);
       if (uniqueUnits.length > 0) {
@@ -403,16 +418,16 @@ var usePlans = () => {
       }
     }
   }, [plans, tierFilter]);
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     let filtered = [...plans];
     filtered = filterPlansByBillingCycle(filtered, billingCycle);
     filtered = filterPlansByTier(filtered, tierFilter);
     setFilteredPlans(filtered);
   }, [plans, tierFilter, billingCycle]);
-  const handlePlanSelect = React3.useCallback((plan) => {
+  const handlePlanSelect = React4.useCallback((plan) => {
     setSelectedPlan(plan);
   }, []);
-  const handleUpgrade = React3.useCallback(async (externalId) => {
+  const handleUpgrade = React4.useCallback(async (externalId) => {
     var _a;
     if (!selectedPlan) return;
     try {
@@ -430,13 +445,16 @@ var usePlans = () => {
       alert("An error occurred. Please try again.");
     }
   }, [selectedPlan]);
-  const clearPlans = React3.useCallback(() => {
+  const clearPlans = React4.useCallback(() => {
     setPlans([]);
     setFilteredPlans([]);
     setSelectedPlan(null);
     setError(null);
     setTierFilter("all");
   }, []);
+  const clearSelectedPlan2 = React4.useCallback(() => {
+    setSelectedPlan(null);
+  }, []);
   const dropdownOptions = getDropdownOptions(plans);
   const currentSelectionText = getCurrentSelectionText(tierFilter, plans);
   return {
@@ -456,6 +474,7 @@ var usePlans = () => {
     setTierFilter,
     setBillingCycle,
     clearPlans,
+    clearSelectedPlan: clearSelectedPlan2,
     // Computed values
     dropdownOptions,
     currentSelectionText,
@@ -517,18 +536,18 @@ var useTransactions = ({
   initialFilters = {},
   autoFetch = false
 }) => {
-  const [transactions, setTransactions] = React3.useState([]);
-  const [allTransactions, setAllTransactions] = React3.useState([]);
-  const [loading, setLoading] = React3.useState(false);
-  const [error, setError] = React3.useState(null);
-  const [filters, setFilters] = React3.useState({
+  const [transactions, setTransactions] = React4.useState([]);
+  const [allTransactions, setAllTransactions] = React4.useState([]);
+  const [loading, setLoading] = React4.useState(false);
+  const [error, setError] = React4.useState(null);
+  const [filters, setFilters] = React4.useState({
     ...DEFAULT_FILTERS,
     ...initialFilters
   });
-  const [meta, setMeta] = React3.useState(null);
-  const [isBackendPaginated, setIsBackendPaginated] = React3.useState(false);
-  const hasAutoFetchedRef = React3.useRef(false);
-  const fetchTransactions = React3.useCallback(async () => {
+  const [meta, setMeta] = React4.useState(null);
+  const [isBackendPaginated, setIsBackendPaginated] = React4.useState(false);
+  const hasAutoFetchedRef = React4.useRef(false);
+  const fetchTransactions = React4.useCallback(async () => {
     if (!externalId) return;
     setLoading(true);
     setError(null);
@@ -572,7 +591,7 @@ var useTransactions = ({
       setLoading(false);
     }
   }, [externalId, filters]);
-  const updateFilters = React3.useCallback((newFilters) => {
+  const updateFilters = React4.useCallback((newFilters) => {
     setFilters((prev) => ({
       ...prev,
       ...newFilters,
@@ -580,7 +599,7 @@ var useTransactions = ({
       page: newFilters.page !== void 0 ? newFilters.page : 1
     }));
   }, []);
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     if (!isBackendPaginated && allTransactions.length > 0) {
       const filteredTransactions = applyFrontendFilters(allTransactions, filters);
       const paginatedResult = applyFrontendPagination(filteredTransactions, filters);
@@ -588,19 +607,19 @@ var useTransactions = ({
       setMeta(paginatedResult.meta);
     }
   }, [filters, allTransactions, isBackendPaginated]);
-  const clearFilters = React3.useCallback(() => {
+  const clearFilters = React4.useCallback(() => {
     setFilters(DEFAULT_FILTERS);
   }, []);
-  const refetch = React3.useCallback(async () => {
+  const refetch = React4.useCallback(async () => {
     await fetchTransactions();
   }, [fetchTransactions]);
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     if (autoFetch && externalId && !hasAutoFetchedRef.current) {
       hasAutoFetchedRef.current = true;
       fetchTransactions();
     }
   }, [autoFetch, externalId, fetchTransactions]);
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     if (!autoFetch) return;
     const hasNonPaginationFilters = filters.startDate !== void 0 || filters.endDate !== void 0 || filters.status !== void 0;
     const shouldFetch = isBackendPaginated || allTransactions.length === 0 && hasNonPaginationFilters;
@@ -627,10 +646,10 @@ var usePagination = ({
   initialPage = 1,
   initialLimit = 10
 } = {}) => {
-  const [currentPage, setCurrentPage] = React3.useState(initialPage);
-  const [limit, setLimitState] = React3.useState(initialLimit);
-  const [meta, setMeta] = React3.useState(null);
-  const goToPage = React3.useCallback((page) => {
+  const [currentPage, setCurrentPage] = React4.useState(initialPage);
+  const [limit, setLimitState] = React4.useState(initialLimit);
+  const [meta, setMeta] = React4.useState(null);
+  const goToPage = React4.useCallback((page) => {
     if (meta) {
       const validPage = Math.max(1, Math.min(page, meta.totalPages));
       setCurrentPage(validPage);
@@ -638,29 +657,29 @@ var usePagination = ({
       setCurrentPage(Math.max(1, page));
     }
   }, [meta]);
-  const goToNextPage = React3.useCallback(() => {
+  const goToNextPage = React4.useCallback(() => {
     if (meta && meta.hasNextPage) {
       setCurrentPage((prev) => prev + 1);
     }
   }, [meta]);
-  const goToPreviousPage = React3.useCallback(() => {
+  const goToPreviousPage = React4.useCallback(() => {
     if (meta && meta.hasPreviousPage) {
       setCurrentPage((prev) => prev - 1);
     }
   }, [meta]);
-  const goToFirstPage = React3.useCallback(() => {
+  const goToFirstPage = React4.useCallback(() => {
     setCurrentPage(1);
   }, []);
-  const goToLastPage = React3.useCallback(() => {
+  const goToLastPage = React4.useCallback(() => {
     if (meta) {
       setCurrentPage(meta.totalPages);
     }
   }, [meta]);
-  const setLimit = React3.useCallback((newLimit) => {
+  const setLimit = React4.useCallback((newLimit) => {
     setLimitState(newLimit);
     setCurrentPage(1);
   }, []);
-  const reset = React3.useCallback(() => {
+  const reset = React4.useCallback(() => {
     setCurrentPage(initialPage);
     setLimitState(initialLimit);
     setMeta(null);
@@ -683,9 +702,9 @@ var useCancelSubscription = ({
   onSuccess,
   onError
 } = {}) => {
-  const [loading, setLoading] = React3.useState(false);
-  const [error, setError] = React3.useState(null);
-  const cancelSubscription = React3.useCallback(async (externalId, options) => {
+  const [loading, setLoading] = React4.useState(false);
+  const [error, setError] = React4.useState(null);
+  const cancelSubscription = React4.useCallback(async (externalId, options) => {
     if (!externalId) {
       const errorMsg = "External ID is required";
       setError(errorMsg);
@@ -714,7 +733,7 @@ var useCancelSubscription = ({
       setLoading(false);
     }
   }, [onSuccess, onError]);
-  const reset = React3.useCallback(() => {
+  const reset = React4.useCallback(() => {
     setLoading(false);
     setError(null);
   }, []);
@@ -754,9 +773,9 @@ var useCustomerPortal = ({
   onSuccess,
   onError
 } = {}) => {
-  const [loading, setLoading] = React3.useState(false);
-  const [error, setError] = React3.useState(null);
-  const openCustomerPortal = React3.useCallback(async (externalId) => {
+  const [loading, setLoading] = React4.useState(false);
+  const [error, setError] = React4.useState(null);
+  const openCustomerPortal = React4.useCallback(async (externalId) => {
     var _a;
     if (!externalId) {
       const errorMsg = "External ID is required";
@@ -794,7 +813,7 @@ var useCustomerPortal = ({
       setLoading(false);
     }
   }, [onSuccess, onError]);
-  const reset = React3.useCallback(() => {
+  const reset = React4.useCallback(() => {
     setLoading(false);
     setError(null);
   }, []);
@@ -805,6 +824,34 @@ var useCustomerPortal = ({
     reset
   };
 };
+var UpgradeContext = React4.createContext(void 0);
+var UpgradeProvider = ({ children }) => {
+  const [isUpgradeSummaryVisible, setIsUpgradeSummaryVisible] = React4.useState(false);
+  const setUpgradeSummaryVisible = (visible) => {
+    setIsUpgradeSummaryVisible(visible);
+  };
+  const clearUpgradeSelection = () => {
+    setIsUpgradeSummaryVisible(false);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    UpgradeContext.Provider,
+    {
+      value: {
+        isUpgradeSummaryVisible,
+        setUpgradeSummaryVisible,
+        clearUpgradeSelection
+      },
+      children
+    }
+  );
+};
+var useUpgrade = () => {
+  const context = React4.useContext(UpgradeContext);
+  if (context === void 0) {
+    throw new Error("useUpgrade must be used within an UpgradeProvider");
+  }
+  return context;
+};
 var BillingCycleToggle = ({
   billingCycle,
   onBillingCycleChange
@@ -836,8 +883,8 @@ var TierFilterDropdown = ({
   selectedValue,
   onSelect
 }) => {
-  const dropdownRef = React3.useRef(null);
-  React3.useEffect(() => {
+  const dropdownRef = React4.useRef(null);
+  React4.useEffect(() => {
     const handleClickOutside = (event) => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
         if (isOpen) {
@@ -1014,7 +1061,7 @@ var PlanSelector = ({
   onBillingCycleChange,
   activePlanCode
 }) => {
-  const [isDropdownOpen, setIsDropdownOpen] = React3.useState(false);
+  const [isDropdownOpen, setIsDropdownOpen] = React4.useState(false);
   const handleDropdownToggle = () => {
     setIsDropdownOpen(!isDropdownOpen);
   };
@@ -1235,6 +1282,21 @@ var PaymentSuccessView = ({ details }) => {
   ] });
 };
 var PaymentSuccessView_default = PaymentSuccessView;
+
+// src/utils/upgradeUtils.ts
+var globalClearSelectedPlan = null;
+var registerClearSelectedPlan = (clearFn) => {
+  globalClearSelectedPlan = clearFn;
+};
+var clearSelectedPlan = () => {
+  if (globalClearSelectedPlan) {
+    globalClearSelectedPlan();
+  }
+};
+var unregisterClearSelectedPlan = () => {
+  globalClearSelectedPlan = null;
+};
+var DownloadIcon2 = ({ className = "w-4 h-4" }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { className, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" }) });
 var getStatusColor = (status, customColors) => {
   if (customColors && customColors[status.toLowerCase()]) {
     return customColors[status.toLowerCase()];
@@ -1263,38 +1325,60 @@ var formatCurrency = (amount, currency = "USD") => {
 };
 var TransactionItem = ({
   transaction,
-  onInvoiceClick,
   className = "",
   showInvoiceButton = true,
-  customStatusColors
+  customStatusColors,
+  showFields = {
+    planName: true,
+    transactionDate: true,
+    amount: true,
+    discount: true,
+    status: true,
+    coupon: true,
+    invoice: true
+  },
+  dateFormat = "datetime"
 }) => {
+  const handleInvoiceDownload = (invoiceUrl) => {
+    const link = document.createElement("a");
+    link.href = invoiceUrl;
+    link.download = `invoice-${transaction.id}.pdf`;
+    link.target = "_blank";
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
   return /* @__PURE__ */ jsxRuntime.jsx("li", { className: `px-6 py-4 hover:bg-gray-50 ${className}`, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-gray-900 truncate", children: transaction.planName ? `${transaction.planName} Plan` : `Transaction #${transaction.transactionCode || transaction.id}` }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500", children: formatDate(transaction.transactionDate || transaction.membershipDate) })
+        showFields.planName && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-gray-900 truncate", children: transaction.planName ? `${transaction.planName} Plan` : `Transaction #${transaction.transactionCode || transaction.id}` }),
+        showFields.transactionDate && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500", children: formatDate(transaction.transactionDate || transaction.membershipDate, dateFormat) })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-4", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-right", children: [
+        showFields.amount && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-right", children: [
           /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-gray-900", children: formatCurrency(transaction.amount, transaction.currency) }),
-          transaction.discountAmt && parseFloat(transaction.discountAmt.toString()) > 0 && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-green-600", children: [
+          showFields.discount && transaction.discountAmt && parseFloat(transaction.discountAmt.toString()) > 0 && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-green-600", children: [
             "-",
             formatCurrency(transaction.discountAmt, transaction.currency),
             " discount"
           ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: `inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getStatusColor(transaction.transactionStatus, customStatusColors)}`, children: transaction.transactionStatus }),
-        showInvoiceButton && onInvoiceClick && transaction.invoiceUrl && /* @__PURE__ */ jsxRuntime.jsx(
+        showFields.status && /* @__PURE__ */ jsxRuntime.jsx("span", { className: `inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getStatusColor(transaction.transactionStatus, customStatusColors)}`, children: transaction.transactionStatus }),
+        showFields.invoice && showInvoiceButton && transaction.invoice_pdf && /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
-            onClick: () => onInvoiceClick(transaction.id),
-            className: "text-blue-600 hover:text-blue-800 text-sm font-medium",
-            children: "Invoice"
+            onClick: () => {
+              handleInvoiceDownload(transaction.invoice_pdf);
+            },
+            className: "inline-flex items-center justify-center p-0 text-blue-600 hover:text-blue-800 transition-colors border-0 bg-transparent focus:outline-none focus:ring-0 focus-visible:outline-none active:outline-none",
+            title: "Download Invoice",
+            "aria-label": "Download Invoice",
+            children: /* @__PURE__ */ jsxRuntime.jsx(DownloadIcon2, { className: "w-4 h-4" })
           }
         )
       ] })
     ] }),
-    transaction.coupon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center px-2 py-1 rounded-md text-xs font-medium bg-purple-100 text-purple-800", children: [
+    showFields.coupon && transaction.coupon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center px-2 py-1 rounded-md text-xs font-medium bg-purple-100 text-purple-800", children: [
       "Coupon: ",
       transaction.coupon
     ] }) })
@@ -1390,7 +1474,6 @@ var TransactionList = ({
   transactions,
   loading = false,
   error = null,
-  onInvoiceClick,
   onRetry,
   className = "",
   showInvoiceButton = true,
@@ -1430,7 +1513,6 @@ var TransactionList = ({
     TransactionItem,
     {
       transaction,
-      onInvoiceClick,
       showInvoiceButton,
       customStatusColors
     },
@@ -1628,7 +1710,7 @@ var TransactionPagination = ({
           children: "Previous"
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center space-x-1", children: getVisiblePages().map((page, index) => /* @__PURE__ */ jsxRuntime.jsx(React3__default.default.Fragment, { children: page === "..." ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-3 py-2 text-sm text-gray-500", children: "..." }) : /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center space-x-1", children: getVisiblePages().map((page, index) => /* @__PURE__ */ jsxRuntime.jsx(React4__default.default.Fragment, { children: page === "..." ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-3 py-2 text-sm text-gray-500", children: "..." }) : /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
           onClick: () => onPageChange(page),
@@ -1674,7 +1756,7 @@ var TransactionModal = ({
     autoFetch: true
     // Enable auto-fetch so it works when modal opens
   });
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     if (isOpen && externalId) {
       fetchTransactions();
     }
@@ -1685,8 +1767,6 @@ var TransactionModal = ({
   const handleLimitChange = (limit) => {
     updateFilters({ limit, page: 1 });
   };
-  const handleInvoiceClick = () => {
-  };
   const handleFiltersChange = (newFilters) => {
     updateFilters(newFilters);
   };
@@ -1740,7 +1820,6 @@ var TransactionModal = ({
             transactions,
             loading,
             error,
-            onInvoiceClick: handleInvoiceClick,
             className: "mb-4"
           }
         ),
@@ -1956,7 +2035,7 @@ var SubscriptionActionButtons = ({
   if (visibleActions.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${containerClass} ${className}`, children: visibleActions.map((action) => /* @__PURE__ */ jsxRuntime.jsx(React3__default.default.Fragment, { children: action.component }, action.key)) });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${containerClass} ${className}`, children: visibleActions.map((action) => /* @__PURE__ */ jsxRuntime.jsx(React4__default.default.Fragment, { children: action.component }, action.key)) });
 };
 var SubscriptionCancelModal = ({
   isOpen,
@@ -2038,8 +2117,8 @@ var SubscriptionDetails = ({
   customActions = [],
   className = ""
 }) => {
-  const [isTransactionModalOpen, setIsTransactionModalOpen] = React3.useState(false);
-  const [showCancelConfirmation, setShowCancelConfirmation] = React3.useState(false);
+  const [isTransactionModalOpen, setIsTransactionModalOpen] = React4.useState(false);
+  const [showCancelConfirmation, setShowCancelConfirmation] = React4.useState(false);
   const { cancelSubscription, loading: cancelLoading } = useCancelSubscription({
     onSuccess: () => {
       setShowCancelConfirmation(false);
@@ -2051,9 +2130,11 @@ var SubscriptionDetails = ({
     }
   });
   const handleTransactionClick = () => {
+    clearSelectedPlan();
     setIsTransactionModalOpen(true);
   };
   const handleCancelClick = () => {
+    clearSelectedPlan();
     setShowCancelConfirmation(true);
   };
   const handleConfirmCancel = async (options) => {
@@ -2089,7 +2170,7 @@ var SubscriptionDetails = ({
                     onError: (error) => {
                       alert(`Failed to open payment portal: ${error}`);
                     },
-                    children: "Change Card"
+                    children: "Manage Billing"
                   }
                 ),
                 show: true
@@ -2103,30 +2184,32 @@ var SubscriptionDetails = ({
           }
         ) })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        SubscriptionInfoGrid,
-        {
-          subscription,
-          className: "mb-4",
-          gridCols: usageMetrics.length > 0 ? 3 : 5
-        }
-      ),
-      usageMetrics.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-        SubscriptionUsageDisplay,
-        {
-          subscription,
-          usageMetrics,
-          gridCols: Math.min(usageMetrics.length, 3)
-        }
-      )
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-5 gap-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          SubscriptionInfoGrid,
+          {
+            subscription,
+            className: "!contents",
+            gridCols: usageMetrics.length > 0 ? 3 : 5
+          }
+        ),
+        usageMetrics.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+          SubscriptionUsageDisplay,
+          {
+            subscription,
+            usageMetrics,
+            gridCols: Math.min(usageMetrics.length, 3),
+            className: "!contents"
+          }
+        )
+      ] })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(
       TransactionModal,
       {
         isOpen: isTransactionModalOpen,
         onClose: () => setIsTransactionModalOpen(false),
-        externalId,
-        title: "Transaction History"
+        externalId
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -2142,37 +2225,70 @@ var SubscriptionDetails = ({
 };
 var UpgradeSummary = ({
   selectedPlan,
-  onUpgrade
+  externalId,
+  onUpgrade,
+  isVisible = true
 }) => {
-  if (!selectedPlan || Number(selectedPlan.fixedCost) === 0) {
+  const [checkoutInfo, setCheckoutInfo] = React4.useState(null);
+  const [loading, setLoading] = React4.useState(false);
+  React4.useEffect(() => {
+    if (!selectedPlan || !isVisible || Number(selectedPlan.fixedCost) === 0) {
+      setCheckoutInfo(null);
+      return;
+    }
+    const fetchCheckoutInfo = async () => {
+      setLoading(true);
+      try {
+        const response = await subscriptionApi.checkoutInfo(selectedPlan.code, externalId);
+        const dataWrapper = response == null ? void 0 : response.data;
+        if ((dataWrapper == null ? void 0 : dataWrapper.success) && (dataWrapper == null ? void 0 : dataWrapper.data)) {
+          setCheckoutInfo(dataWrapper.data);
+        }
+      } catch (error) {
+        console.error("Failed to fetch checkout info:", error);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchCheckoutInfo();
+  }, [selectedPlan, externalId, isVisible]);
+  if (!selectedPlan || !isVisible || Number(selectedPlan.fixedCost) === 0 || loading || !checkoutInfo) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed bottom-0 left-0 right-0 w-full z-50", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-7xl mx-auto w-full px-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-white/40 backdrop-blur-md shadow-xl rounded-tl-md rounded-tr-md border border-gray-200 px-4 py-1.5", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+  const displayInfo = checkoutInfo;
+  const intervalDisplay = displayInfo.planInterval === "MONTHLY" ? "Mo" : "Yr";
+  const dueToday = displayInfo.proration > 0 ? displayInfo.proration : displayInfo.planPrice;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed bottom-0 left-0 right-0 w-full z-50", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-7xl mx-auto w-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-white/40 backdrop-blur-md shadow-xl rounded-tl-md rounded-tr-md border border-gray-200 px-4 py-1.5 mx-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500", children: "Summary" }),
-      /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-base font-semibold", children: selectedPlan.name })
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-sm font-medium", children: displayInfo.planName })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-5 items-center", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-6", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-right", children: /* @__PURE__ */ jsxRuntime.jsxs("h3", { className: "text-2xl font-semibold text-gray-900", children: [
         "$",
-        selectedPlan.fixedCost,
-        "/Yr"
+        displayInfo.planPrice,
+        "/",
+        intervalDisplay
       ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500", children: "Due Today" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xl font-semibold text-gray-900", children: [
-          "$",
-          selectedPlan.fixedCost
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          onClick: onUpgrade,
-          className: "bg-green-600 text-white px-6 py-2 rounded-md font-medium hover:bg-green-700 transition-colors text-sm",
-          children: "Upgrade Now"
-        }
-      )
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-right", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500", children: "Due Today" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xl font-semibold text-gray-900", children: [
+            "$",
+            dueToday
+          ] }),
+          displayInfo.proration > 0 && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500 mt-1", children: "(Includes prorated discount for unused days of your current plan)" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: onUpgrade,
+            disabled: loading,
+            className: "bg-green-600 text-white px-6 py-2 rounded-md font-medium hover:bg-green-700 transition-colors text-sm disabled:opacity-50",
+            children: loading ? "Loading..." : "Upgrade Now"
+          }
+        )
+      ] })
     ] })
   ] }) }) }) });
 };
@@ -2276,7 +2392,7 @@ var Pagination = ({
             children: "Previous"
           }
         ),
-        pageNumbers.map((page, index) => /* @__PURE__ */ jsxRuntime.jsx(React3__default.default.Fragment, { children: page === "..." ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300", children: "..." }) : /* @__PURE__ */ jsxRuntime.jsx(
+        pageNumbers.map((page, index) => /* @__PURE__ */ jsxRuntime.jsx(React4__default.default.Fragment, { children: page === "..." ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300", children: "..." }) : /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
             onClick: () => onPageChange(page),
@@ -2303,18 +2419,24 @@ var DashboardPage = ({
   var _a;
   const subscription = useSubscription();
   const plans = usePlans();
-  const lastLoadedIdRef = React3.useRef(null);
-  React3.useEffect(() => {
+  const lastLoadedIdRef = React4.useRef(null);
+  React4.useEffect(() => {
     if (lastLoadedIdRef.current !== externalId) {
       subscription.fetchSubscription(externalId);
       plans.fetchPlans();
       lastLoadedIdRef.current = externalId;
     }
   }, [externalId]);
+  React4.useEffect(() => {
+    registerClearSelectedPlan(plans.clearSelectedPlan);
+    return () => {
+      unregisterClearSelectedPlan();
+    };
+  }, [plans.clearSelectedPlan]);
   const handleUpgrade = () => {
     plans.handleUpgrade(externalId);
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(Layout, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-7xl mx-auto w-full h-full py-8 px-4 pb-24", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(UpgradeProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(Layout, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-7xl mx-auto w-full h-full py-8 px-4 pb-24", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       SubscriptionDetails,
       {
@@ -2322,6 +2444,7 @@ var DashboardPage = ({
         externalId,
         onSubscriptionCancelled: () => {
           subscription.fetchSubscription(externalId);
+          plans.clearSelectedPlan();
         }
       }
     ),
@@ -2346,13 +2469,15 @@ var DashboardPage = ({
       UpgradeSummary,
       {
         selectedPlan: plans.selectedPlan,
-        onUpgrade: handleUpgrade
+        externalId,
+        onUpgrade: handleUpgrade,
+        isVisible: !!plans.selectedPlan
       }
     )
-  ] }) });
+  ] }) }) });
 };
 var usePaymentParams = () => {
-  return React3.useMemo(() => {
+  return React4.useMemo(() => {
     const params = new URLSearchParams(window.location.search);
     return {
       gateway: params.get("gateway") || void 0,
@@ -2363,9 +2488,9 @@ var usePaymentParams = () => {
   }, []);
 };
 var useProcessPaymentSuccess = (params) => {
-  const [loading, setLoading] = React3.useState(true);
-  const [error, setError] = React3.useState(null);
-  React3.useEffect(() => {
+  const [loading, setLoading] = React4.useState(true);
+  const [error, setError] = React4.useState(null);
+  React4.useEffect(() => {
     const run = async () => {
       try {
         const qs = new URLSearchParams({
@@ -2435,9 +2560,9 @@ var PaymentSuccessPage = () => {
 };
 var PaymentSuccessPage_default = PaymentSuccessPage;
 var useProcessPaymentCancel = (params) => {
-  const [loading, setLoading] = React3.useState(true);
-  const [error, setError] = React3.useState(null);
-  React3.useEffect(() => {
+  const [loading, setLoading] = React4.useState(true);
+  const [error, setError] = React4.useState(null);
+  React4.useEffect(() => {
     const run = async () => {
       try {
         const qs = new URLSearchParams({
@@ -2528,7 +2653,9 @@ exports.TransactionPagination = TransactionPagination;
 exports.TransactionStatusFilter = TransactionStatusFilter;
 exports.TrendingUpIcon = TrendingUpIcon;
 exports.UpgradeIcon = UpgradeIcon;
+exports.UpgradeProvider = UpgradeProvider;
 exports.UpgradeSummary = UpgradeSummary;
+exports.clearSelectedPlan = clearSelectedPlan;
 exports.configureSubOS = configureSubOS;
 exports.customerApi = customerApi;
 exports.ensureSubOSConfig = ensureSubOSConfig;
@@ -2546,14 +2673,17 @@ exports.getStripePublishableKey = getStripePublishableKey;
 exports.getUniqueCandidateUnits = getUniqueCandidateUnits;
 exports.isPlanPopular = isPlanPopular;
 exports.plansApi = plansApi;
+exports.registerClearSelectedPlan = registerClearSelectedPlan;
 exports.subscriptionApi = subscriptionApi;
 exports.transactionApi = transactionApi;
+exports.unregisterClearSelectedPlan = unregisterClearSelectedPlan;
 exports.useCancelSubscription = useCancelSubscription;
 exports.useCustomerPortal = useCustomerPortal;
 exports.usePagination = usePagination;
 exports.usePlans = usePlans;
 exports.useSubscription = useSubscription;
 exports.useTransactions = useTransactions;
+exports.useUpgrade = useUpgrade;
 exports.validateSubOSConfig = validateSubOSConfig;
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map