subos-frontend 1.0.14 → 1.0.15

package/dist/index.js

@@ -1,13 +1,13 @@
 'use strict';
 
-var React9 = require('react');
+var React8 = 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 React9__default = /*#__PURE__*/_interopDefault(React9);
+var React8__default = /*#__PURE__*/_interopDefault(React8);
 
 // src/config/envConfig.ts
 function getEnvVar(key, fallback) {
@@ -216,10 +216,10 @@ var transactionApi = {
   getInvoice: (transactionId) => apiRequest(`${ENDPOINTS.TRANSACTIONS}/${transactionId}/invoice`)
 };
 var useSubscription = () => {
-  const [subscription, setSubscription] = React9.useState(null);
-  const [loading, setLoading] = React9.useState(false);
-  const [error, setError] = React9.useState(null);
-  const fetchSubscription = React9.useCallback(async (externalId) => {
+  const [subscription, setSubscription] = React8.useState(null);
+  const [loading, setLoading] = React8.useState(false);
+  const [error, setError] = React8.useState(null);
+  const fetchSubscription = React8.useCallback(async (externalId) => {
     if (!externalId || externalId === "undefined" || externalId.trim() === "") {
       setError("Invalid user ID. Please ensure you are properly authenticated.");
       setLoading(false);
@@ -244,7 +244,7 @@ var useSubscription = () => {
       setLoading(false);
     }
   }, [loading]);
-  const clearSubscription = React9.useCallback(() => {
+  const clearSubscription = React8.useCallback(() => {
     setSubscription(null);
     setError(null);
   }, []);
@@ -381,14 +381,14 @@ var formatDate = (dateString, format = "date") => {
 
 // src/hooks/usePlans.ts
 var usePlans = () => {
-  const [plans, setPlans] = React9.useState([]);
-  const [filteredPlans, setFilteredPlans] = React9.useState([]);
-  const [selectedPlan, setSelectedPlan] = React9.useState(null);
-  const [tierFilter, setTierFilter] = React9.useState("all");
-  const [billingCycle, setBillingCycle] = React9.useState("monthly");
-  const [loading, setLoading] = React9.useState(false);
-  const [error, setError] = React9.useState(null);
-  const fetchPlans = React9.useCallback(async () => {
+  const [plans, setPlans] = React8.useState([]);
+  const [filteredPlans, setFilteredPlans] = React8.useState([]);
+  const [selectedPlan, setSelectedPlan] = React8.useState(null);
+  const [tierFilter, setTierFilter] = React8.useState("all");
+  const [billingCycle, setBillingCycle] = React8.useState("monthly");
+  const [loading, setLoading] = React8.useState(false);
+  const [error, setError] = React8.useState(null);
+  const fetchPlans = React8.useCallback(async () => {
     if (loading) return;
     setLoading(true);
     setError(null);
@@ -410,7 +410,7 @@ var usePlans = () => {
       setLoading(false);
     }
   }, [loading]);
-  React9.useEffect(() => {
+  React8.useEffect(() => {
     if (plans.length > 0 && tierFilter === "all") {
       const uniqueUnits = getUniqueCandidateUnits(plans);
       if (uniqueUnits.length > 0) {
@@ -418,16 +418,16 @@ var usePlans = () => {
       }
     }
   }, [plans, tierFilter]);
-  React9.useEffect(() => {
+  React8.useEffect(() => {
     let filtered = [...plans];
     filtered = filterPlansByBillingCycle(filtered, billingCycle);
     filtered = filterPlansByTier(filtered, tierFilter);
     setFilteredPlans(filtered);
   }, [plans, tierFilter, billingCycle]);
-  const handlePlanSelect = React9.useCallback((plan) => {
+  const handlePlanSelect = React8.useCallback((plan) => {
     setSelectedPlan(plan);
   }, []);
-  const handleUpgrade = React9.useCallback(async (externalId) => {
+  const handleUpgrade = React8.useCallback(async (externalId) => {
     var _a;
     if (!selectedPlan) return;
     try {
@@ -445,14 +445,14 @@ var usePlans = () => {
       alert("An error occurred. Please try again.");
     }
   }, [selectedPlan]);
-  const clearPlans = React9.useCallback(() => {
+  const clearPlans = React8.useCallback(() => {
     setPlans([]);
     setFilteredPlans([]);
     setSelectedPlan(null);
     setError(null);
     setTierFilter("all");
   }, []);
-  const clearSelectedPlan2 = React9.useCallback(() => {
+  const clearSelectedPlan2 = React8.useCallback(() => {
     setSelectedPlan(null);
   }, []);
   const dropdownOptions = getDropdownOptions(plans);
@@ -536,18 +536,18 @@ var useTransactions = ({
   initialFilters = {},
   autoFetch = false
 }) => {
-  const [transactions, setTransactions] = React9.useState([]);
-  const [allTransactions, setAllTransactions] = React9.useState([]);
-  const [loading, setLoading] = React9.useState(false);
-  const [error, setError] = React9.useState(null);
-  const [filters, setFilters] = React9.useState({
+  const [transactions, setTransactions] = React8.useState([]);
+  const [allTransactions, setAllTransactions] = React8.useState([]);
+  const [loading, setLoading] = React8.useState(false);
+  const [error, setError] = React8.useState(null);
+  const [filters, setFilters] = React8.useState({
     ...DEFAULT_FILTERS,
     ...initialFilters
   });
-  const [meta, setMeta] = React9.useState(null);
-  const [isBackendPaginated, setIsBackendPaginated] = React9.useState(false);
-  const hasAutoFetchedRef = React9.useRef(false);
-  const fetchTransactions = React9.useCallback(async () => {
+  const [meta, setMeta] = React8.useState(null);
+  const [isBackendPaginated, setIsBackendPaginated] = React8.useState(false);
+  const hasAutoFetchedRef = React8.useRef(false);
+  const fetchTransactions = React8.useCallback(async () => {
     if (!externalId) return;
     setLoading(true);
     setError(null);
@@ -591,7 +591,7 @@ var useTransactions = ({
       setLoading(false);
     }
   }, [externalId, filters]);
-  const updateFilters = React9.useCallback((newFilters) => {
+  const updateFilters = React8.useCallback((newFilters) => {
     setFilters((prev) => ({
       ...prev,
       ...newFilters,
@@ -599,7 +599,7 @@ var useTransactions = ({
       page: newFilters.page !== void 0 ? newFilters.page : 1
     }));
   }, []);
-  React9.useEffect(() => {
+  React8.useEffect(() => {
     if (!isBackendPaginated && allTransactions.length > 0) {
       const filteredTransactions = applyFrontendFilters(allTransactions, filters);
       const paginatedResult = applyFrontendPagination(filteredTransactions, filters);
@@ -607,19 +607,19 @@ var useTransactions = ({
       setMeta(paginatedResult.meta);
     }
   }, [filters, allTransactions, isBackendPaginated]);
-  const clearFilters = React9.useCallback(() => {
+  const clearFilters = React8.useCallback(() => {
     setFilters(DEFAULT_FILTERS);
   }, []);
-  const refetch = React9.useCallback(async () => {
+  const refetch = React8.useCallback(async () => {
     await fetchTransactions();
   }, [fetchTransactions]);
-  React9.useEffect(() => {
+  React8.useEffect(() => {
     if (autoFetch && externalId && !hasAutoFetchedRef.current) {
       hasAutoFetchedRef.current = true;
       fetchTransactions();
     }
   }, [autoFetch, externalId, fetchTransactions]);
-  React9.useEffect(() => {
+  React8.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;
@@ -646,10 +646,10 @@ var usePagination = ({
   initialPage = 1,
   initialLimit = 10
 } = {}) => {
-  const [currentPage, setCurrentPage] = React9.useState(initialPage);
-  const [limit, setLimitState] = React9.useState(initialLimit);
-  const [meta, setMeta] = React9.useState(null);
-  const goToPage = React9.useCallback((page) => {
+  const [currentPage, setCurrentPage] = React8.useState(initialPage);
+  const [limit, setLimitState] = React8.useState(initialLimit);
+  const [meta, setMeta] = React8.useState(null);
+  const goToPage = React8.useCallback((page) => {
     if (meta) {
       const validPage = Math.max(1, Math.min(page, meta.totalPages));
       setCurrentPage(validPage);
@@ -657,29 +657,29 @@ var usePagination = ({
       setCurrentPage(Math.max(1, page));
     }
   }, [meta]);
-  const goToNextPage = React9.useCallback(() => {
+  const goToNextPage = React8.useCallback(() => {
     if (meta && meta.hasNextPage) {
       setCurrentPage((prev) => prev + 1);
     }
   }, [meta]);
-  const goToPreviousPage = React9.useCallback(() => {
+  const goToPreviousPage = React8.useCallback(() => {
     if (meta && meta.hasPreviousPage) {
       setCurrentPage((prev) => prev - 1);
     }
   }, [meta]);
-  const goToFirstPage = React9.useCallback(() => {
+  const goToFirstPage = React8.useCallback(() => {
     setCurrentPage(1);
   }, []);
-  const goToLastPage = React9.useCallback(() => {
+  const goToLastPage = React8.useCallback(() => {
     if (meta) {
       setCurrentPage(meta.totalPages);
     }
   }, [meta]);
-  const setLimit = React9.useCallback((newLimit) => {
+  const setLimit = React8.useCallback((newLimit) => {
     setLimitState(newLimit);
     setCurrentPage(1);
   }, []);
-  const reset = React9.useCallback(() => {
+  const reset = React8.useCallback(() => {
     setCurrentPage(initialPage);
     setLimitState(initialLimit);
     setMeta(null);
@@ -702,9 +702,9 @@ var useCancelSubscription = ({
   onSuccess,
   onError
 } = {}) => {
-  const [loading, setLoading] = React9.useState(false);
-  const [error, setError] = React9.useState(null);
-  const cancelSubscription = React9.useCallback(async (externalId, options) => {
+  const [loading, setLoading] = React8.useState(false);
+  const [error, setError] = React8.useState(null);
+  const cancelSubscription = React8.useCallback(async (externalId, options) => {
     if (!externalId) {
       const errorMsg = "External ID is required";
       setError(errorMsg);
@@ -733,7 +733,7 @@ var useCancelSubscription = ({
       setLoading(false);
     }
   }, [onSuccess, onError]);
-  const reset = React9.useCallback(() => {
+  const reset = React8.useCallback(() => {
     setLoading(false);
     setError(null);
   }, []);
@@ -773,9 +773,9 @@ var useCustomerPortal = ({
   onSuccess,
   onError
 } = {}) => {
-  const [loading, setLoading] = React9.useState(false);
-  const [error, setError] = React9.useState(null);
-  const openCustomerPortal = React9.useCallback(async (externalId) => {
+  const [loading, setLoading] = React8.useState(false);
+  const [error, setError] = React8.useState(null);
+  const openCustomerPortal = React8.useCallback(async (externalId) => {
     var _a;
     if (!externalId) {
       const errorMsg = "External ID is required";
@@ -813,7 +813,7 @@ var useCustomerPortal = ({
       setLoading(false);
     }
   }, [onSuccess, onError]);
-  const reset = React9.useCallback(() => {
+  const reset = React8.useCallback(() => {
     setLoading(false);
     setError(null);
   }, []);
@@ -824,9 +824,9 @@ var useCustomerPortal = ({
     reset
   };
 };
-var UpgradeContext = React9.createContext(void 0);
+var UpgradeContext = React8.createContext(void 0);
 var UpgradeProvider = ({ children }) => {
-  const [isUpgradeSummaryVisible, setIsUpgradeSummaryVisible] = React9.useState(false);
+  const [isUpgradeSummaryVisible, setIsUpgradeSummaryVisible] = React8.useState(false);
   const setUpgradeSummaryVisible = (visible) => {
     setIsUpgradeSummaryVisible(visible);
   };
@@ -846,7 +846,7 @@ var UpgradeProvider = ({ children }) => {
   );
 };
 var useUpgrade = () => {
-  const context = React9.useContext(UpgradeContext);
+  const context = React8.useContext(UpgradeContext);
   if (context === void 0) {
     throw new Error("useUpgrade must be used within an UpgradeProvider");
   }
@@ -860,29 +860,30 @@ var BillingCycleToggle = ({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: "inline-flex rounded-lg p-1 border",
+      className: "inline-flex rounded-lg p-1",
       style: {
         backgroundColor: "var(--subos-muted, #f1f5f9)",
-        borderColor: "var(--subos-border, #e2e8f0)"
+        border: "1px solid var(--subos-border, #e2e8f0)"
       },
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
             onClick: () => onBillingCycleChange("monthly"),
-            className: `px-4 py-2 rounded-md text-sm font-medium transition-all duration-200 ${className || ""}`,
+            className: `px-6 py-2 rounded-md text-sm font-medium transition-all duration-200 ${className || ""}`,
             style: billingCycle === "monthly" ? {
-              backgroundColor: "var(--subos-primary-500, #3f51b5)",
+              backgroundColor: "var(--subos-primary-500, #ef4444)",
               color: "white",
-              boxShadow: "0 1px 2px 0 rgba(0, 0, 0, 0.05)"
+              boxShadow: "0 2px 4px 0 rgba(0, 0, 0, 0.1)",
+              fontWeight: "600"
             } : {
               backgroundColor: "transparent",
               color: "var(--subos-muted-foreground, #64748b)",
-              border: "none"
+              fontWeight: "500"
             },
             onMouseEnter: billingCycle !== "monthly" ? (e) => {
               e.currentTarget.style.color = "var(--subos-foreground, #1e293b)";
-              e.currentTarget.style.backgroundColor = "var(--subos-accent, #f8fafc)";
+              e.currentTarget.style.backgroundColor = "rgba(255, 255, 255, 0.8)";
             } : void 0,
             onMouseLeave: billingCycle !== "monthly" ? (e) => {
               e.currentTarget.style.color = "var(--subos-muted-foreground, #64748b)";
@@ -895,19 +896,20 @@ var BillingCycleToggle = ({
           "button",
           {
             onClick: () => onBillingCycleChange("yearly"),
-            className: `px-4 py-2 rounded-md text-sm font-medium transition-all duration-200 ${className || ""}`,
+            className: `px-6 py-2 rounded-md text-sm font-medium transition-all duration-200 ${className || ""}`,
             style: billingCycle === "yearly" ? {
-              backgroundColor: "var(--subos-primary-500, #3f51b5)",
+              backgroundColor: "var(--subos-primary-500, #ef4444)",
               color: "white",
-              boxShadow: "0 1px 2px 0 rgba(0, 0, 0, 0.05)"
+              boxShadow: "0 2px 4px 0 rgba(0, 0, 0, 0.1)",
+              fontWeight: "600"
             } : {
               backgroundColor: "transparent",
               color: "var(--subos-muted-foreground, #64748b)",
-              border: "none"
+              fontWeight: "500"
             },
             onMouseEnter: billingCycle !== "yearly" ? (e) => {
               e.currentTarget.style.color = "var(--subos-foreground, #1e293b)";
-              e.currentTarget.style.backgroundColor = "var(--subos-accent, #f8fafc)";
+              e.currentTarget.style.backgroundColor = "rgba(255, 255, 255, 0.8)";
             } : void 0,
             onMouseLeave: billingCycle !== "yearly" ? (e) => {
               e.currentTarget.style.color = "var(--subos-muted-foreground, #64748b)";
@@ -928,8 +930,8 @@ var TierFilterDropdown = ({
   selectedValue,
   onSelect
 }) => {
-  const dropdownRef = React9.useRef(null);
-  React9.useEffect(() => {
+  const dropdownRef = React8.useRef(null);
+  React8.useEffect(() => {
     const handleClickOutside = (event) => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
         if (isOpen) {
@@ -1203,7 +1205,7 @@ var PlanSelector = ({
   onBillingCycleChange,
   activePlanCode
 }) => {
-  const [isDropdownOpen, setIsDropdownOpen] = React9.useState(false);
+  const [isDropdownOpen, setIsDropdownOpen] = React8.useState(false);
   const handleDropdownToggle = () => {
     setIsDropdownOpen(!isDropdownOpen);
   };
@@ -1895,7 +1897,7 @@ var TransactionPagination = ({
           children: "Previous"
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center space-x-1", children: getVisiblePages().map((page, index) => /* @__PURE__ */ jsxRuntime.jsx(React9__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(React8__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),
@@ -1941,7 +1943,7 @@ var TransactionModal = ({
     autoFetch: true
     // Enable auto-fetch so it works when modal opens
   });
-  React9.useEffect(() => {
+  React8.useEffect(() => {
     if (isOpen && externalId) {
       fetchTransactions();
     }
@@ -2275,7 +2277,17 @@ var SubscriptionActionButtons = ({
   if (visibleActions.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${containerClass} ${className}`, children: visibleActions.map((action) => /* @__PURE__ */ jsxRuntime.jsx(React9__default.default.Fragment, { children: action.component }, action.key)) });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${containerClass} ${className}`, children: visibleActions.map((action, index) => /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      style: {
+        marginLeft: index > 0 && layout === "horizontal" ? "24px" : "0",
+        marginTop: index > 0 && layout === "vertical" ? "12px" : "0"
+      },
+      children: action.component
+    },
+    action.key
+  )) });
 };
 var SubscriptionCancelModal = ({
   isOpen,
@@ -2357,8 +2369,8 @@ var SubscriptionDetails = ({
   customActions = [],
   className = ""
 }) => {
-  const [isTransactionModalOpen, setIsTransactionModalOpen] = React9.useState(false);
-  const [showCancelConfirmation, setShowCancelConfirmation] = React9.useState(false);
+  const [isTransactionModalOpen, setIsTransactionModalOpen] = React8.useState(false);
+  const [showCancelConfirmation, setShowCancelConfirmation] = React8.useState(false);
   const { cancelSubscription, loading: cancelLoading } = useCancelSubscription({
     onSuccess: () => {
       setShowCancelConfirmation(false);
@@ -2468,9 +2480,9 @@ var UpgradeSummary = ({
   onUpgrade,
   isVisible = true
 }) => {
-  const [checkoutInfo, setCheckoutInfo] = React9.useState(null);
-  const [loading, setLoading] = React9.useState(false);
-  React9.useEffect(() => {
+  const [checkoutInfo, setCheckoutInfo] = React8.useState(null);
+  const [loading, setLoading] = React8.useState(false);
+  React8.useEffect(() => {
     if (!selectedPlan || !isVisible || Number(selectedPlan.fixedCost) === 0) {
       setCheckoutInfo(null);
       return;
@@ -2574,16 +2586,22 @@ var UpgradeSummary = ({
               {
                 onClick: onUpgrade,
                 disabled: loading,
-                className: "text-white px-6 py-2 rounded-md font-medium transition-colors text-sm disabled:opacity-50",
+                className: "text-white px-8 py-3 rounded-lg font-semibold transition-all duration-200 text-sm disabled:opacity-50 shadow-md",
                 style: {
-                  backgroundColor: loading ? "var(--subos-muted, #f1f5f9)" : "var(--subos-primary-500, #3f51b5)",
-                  color: loading ? "var(--subos-muted-foreground, #64748b)" : "white"
+                  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)"
                 },
                 onMouseEnter: !loading ? (e) => {
-                  e.currentTarget.style.backgroundColor = "var(--subos-primary-600, #2563eb)";
+                  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) => {
-                  e.currentTarget.style.backgroundColor = "var(--subos-primary-500, #3f51b5)";
+                  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"
               }
@@ -2620,9 +2638,9 @@ var Layout = ({ children }) => {
     ] }) }) })
   ] });
 };
-var SubOSThemeContext = React9.createContext(void 0);
+var SubOSThemeContext = React8.createContext(void 0);
 var useSubOSTheme = () => {
-  const context = React9.useContext(SubOSThemeContext);
+  const context = React8.useContext(SubOSThemeContext);
   if (!context) {
     throw new Error("useSubOSTheme must be used within a SubOSThemeProvider");
   }
@@ -2633,8 +2651,8 @@ var SubOSThemeProvider = ({
   theme = {},
   className = ""
 }) => {
-  const [currentTheme, setCurrentTheme] = React9__default.default.useState(theme);
-  const cssVariables = React9__default.default.useMemo(() => {
+  const [currentTheme, setCurrentTheme] = React8__default.default.useState(theme);
+  const cssVariables = React8__default.default.useMemo(() => {
     const vars = {};
     if (currentTheme.primaryColors) {
       Object.entries(currentTheme.primaryColors).forEach(([key, value]) => {
@@ -2659,7 +2677,7 @@ var SubOSThemeProvider = ({
     if (currentTheme.shadowCardHover) vars["--subos-shadow-card-hover"] = currentTheme.shadowCardHover;
     return vars;
   }, [currentTheme]);
-  const contextValue = React9__default.default.useMemo(() => ({
+  const contextValue = React8__default.default.useMemo(() => ({
     theme: currentTheme,
     setTheme: setCurrentTheme
   }), [currentTheme]);
@@ -2674,7 +2692,7 @@ var SubOSThemeProvider = ({
 };
 var useApplyHostTheme = (hostTheme) => {
   const { setTheme } = useSubOSTheme();
-  React9__default.default.useEffect(() => {
+  React8__default.default.useEffect(() => {
     if (hostTheme) {
       setTheme(hostTheme);
     }
@@ -2754,7 +2772,7 @@ var Pagination = ({
             children: "Previous"
           }
         ),
-        pageNumbers.map((page, index) => /* @__PURE__ */ jsxRuntime.jsx(React9__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(React8__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),
@@ -2781,15 +2799,15 @@ var DashboardPage = ({
   var _a;
   const subscription = useSubscription();
   const plans = usePlans();
-  const lastLoadedIdRef = React9.useRef(null);
-  React9.useEffect(() => {
+  const lastLoadedIdRef = React8.useRef(null);
+  React8.useEffect(() => {
     if (lastLoadedIdRef.current !== externalId) {
       subscription.fetchSubscription(externalId);
       plans.fetchPlans();
       lastLoadedIdRef.current = externalId;
     }
   }, [externalId]);
-  React9.useEffect(() => {
+  React8.useEffect(() => {
     registerClearSelectedPlan(plans.clearSelectedPlan);
     return () => {
       unregisterClearSelectedPlan();
@@ -2839,7 +2857,7 @@ var DashboardPage = ({
   ] }) }) });
 };
 var usePaymentParams = () => {
-  return React9.useMemo(() => {
+  return React8.useMemo(() => {
     const params = new URLSearchParams(window.location.search);
     return {
       gateway: params.get("gateway") || void 0,
@@ -2850,9 +2868,9 @@ var usePaymentParams = () => {
   }, []);
 };
 var useProcessPaymentSuccess = (params) => {
-  const [loading, setLoading] = React9.useState(true);
-  const [error, setError] = React9.useState(null);
-  React9.useEffect(() => {
+  const [loading, setLoading] = React8.useState(true);
+  const [error, setError] = React8.useState(null);
+  React8.useEffect(() => {
     const run = async () => {
       try {
         const qs = new URLSearchParams({
@@ -2922,9 +2940,9 @@ var PaymentSuccessPage = () => {
 };
 var PaymentSuccessPage_default = PaymentSuccessPage;
 var useProcessPaymentCancel = (params) => {
-  const [loading, setLoading] = React9.useState(true);
-  const [error, setError] = React9.useState(null);
-  React9.useEffect(() => {
+  const [loading, setLoading] = React8.useState(true);
+  const [error, setError] = React8.useState(null);
+  React8.useEffect(() => {
     const run = async () => {
       try {
         const qs = new URLSearchParams({