subos-frontend 1.0.103 → 1.0.106

package/dist/index.js

@@ -1,12 +1,12 @@
 'use strict';
 
-var React10 = require('react');
+var React11 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React10__default = /*#__PURE__*/_interopDefault(React10);
+var React11__default = /*#__PURE__*/_interopDefault(React11);
 
 // src/config/envConfig.ts
 function getEnvVar(key, fallback) {
@@ -237,35 +237,7 @@ var transactionApi = {
   },
   getInvoice: (transactionId) => apiRequest(`${ENDPOINTS.TRANSACTIONS}/${transactionId}/invoice`)
 };
-var UpgradeContext = React10.createContext(void 0);
-var UpgradeProvider = ({ children }) => {
-  const [isUpgradeSummaryVisible, setIsUpgradeSummaryVisible] = React10.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 = React10.useContext(UpgradeContext);
-  if (context === void 0) {
-    throw new Error("useUpgrade must be used within an UpgradeProvider");
-  }
-  return context;
-};
-var CurrencyContext = React10.createContext(void 0);
+var CurrencyContext = React11.createContext(void 0);
 
 // src/utils/currency.ts
 var CURRENCY_SYMBOLS = {
@@ -372,11 +344,11 @@ var useCountryAndCurrency = ({
   defaultCurrency = "usd",
   skipAutoDetect = false
 } = {}) => {
-  const [country, setCountry] = React10.useState(null);
-  const [currency, setCurrencyState] = React10.useState(defaultCurrency);
-  const [isLoading, setIsLoading] = React10.useState(!skipAutoDetect);
-  const [error, setError] = React10.useState(null);
-  React10.useEffect(() => {
+  const [country, setCountry] = React11.useState(null);
+  const [currency, setCurrencyState] = React11.useState(defaultCurrency);
+  const [isLoading, setIsLoading] = React11.useState(!skipAutoDetect);
+  const [error, setError] = React11.useState(null);
+  React11.useEffect(() => {
     if (skipAutoDetect) {
       setIsLoading(false);
       return;
@@ -417,7 +389,7 @@ var useCountryAndCurrency = ({
   };
 };
 var useCurrency = () => {
-  const context = React10.useContext(CurrencyContext);
+  const context = React11.useContext(CurrencyContext);
   if (context === void 0) {
     throw new Error("useCurrency must be used within a CurrencyProvider");
   }
@@ -436,17 +408,15 @@ var CurrencyProvider = ({
   });
   return /* @__PURE__ */ jsxRuntime.jsx(CurrencyContext.Provider, { value: { country, currency, isLoading, error, setCurrency }, children });
 };
-
-// src/hooks/useSubscription.ts
-var useSubscription = () => {
+var SubscriptionContext = React11.createContext(void 0);
+var SubscriptionProvider = ({ children }) => {
   const { currency } = useCurrency();
-  const [subscription, setSubscription] = React10.useState(null);
-  const [loading, setLoading] = React10.useState(false);
-  const [error, setError] = React10.useState(null);
-  const fetchSubscription = React10.useCallback(async (externalId) => {
+  const [subscription, setSubscription] = React11.useState(null);
+  const [loading, setLoading] = React11.useState(false);
+  const [error, setError] = React11.useState(null);
+  const fetchSubscription = React11.useCallback(async (externalId) => {
     if (!externalId || externalId === "undefined" || externalId.trim() === "") {
       setError("Invalid user ID. Please ensure you are properly authenticated.");
-      setLoading(false);
       return;
     }
     if (loading) return;
@@ -468,17 +438,23 @@ var useSubscription = () => {
       setLoading(false);
     }
   }, [loading, currency]);
-  const clearSubscription = React10.useCallback(() => {
+  const clearSubscription = React11.useCallback(() => {
     setSubscription(null);
     setError(null);
   }, []);
-  return {
-    subscription,
-    loading,
-    error,
-    fetchSubscription,
-    clearSubscription
-  };
+  return /* @__PURE__ */ jsxRuntime.jsx(SubscriptionContext.Provider, { value: { subscription, loading, error, fetchSubscription, clearSubscription }, children });
+};
+var useSubscriptionContext = () => {
+  const context = React11.useContext(SubscriptionContext);
+  if (context === void 0) {
+    throw new Error("useSubscriptionContext must be used within a SubscriptionProvider");
+  }
+  return context;
+};
+
+// src/hooks/useSubscription.ts
+var useSubscription = () => {
+  return useSubscriptionContext();
 };
 
 // src/utils/planUtils.ts
@@ -617,18 +593,67 @@ var formatDate = (dateString, format = "date") => {
     day: "numeric"
   }).format(date);
 };
+var getGracePeriodInfo = (subscription) => {
+  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 {
+    startDate,
+    endDate,
+    remainingDays,
+    message: `Your 7-day grace period started on ${startDate ? formatDate(startDate) : "N/A"}. You have ${remainingDays} days remaining to update your payment method to continue your subscription without interruption.`
+  };
+};
+var UpgradeContext = React11.createContext(void 0);
+var UpgradeProvider = ({ children }) => {
+  const [isUpgradeSummaryVisible, setIsUpgradeSummaryVisible] = React11.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 = React11.useContext(UpgradeContext);
+  if (context === void 0) {
+    throw new Error("useUpgrade must be used within an UpgradeProvider");
+  }
+  return context;
+};
 
 // src/hooks/usePlans.ts
 var usePlans = () => {
   const { currency } = useCurrency();
-  const [plans, setPlans] = React10.useState([]);
-  const [filteredPlans, setFilteredPlans] = React10.useState([]);
-  const [selectedPlan, setSelectedPlan] = React10.useState(null);
-  const [tierFilter, setTierFilter] = React10.useState("all");
-  const [billingCycle, setBillingCycle] = React10.useState("monthly");
-  const [loading, setLoading] = React10.useState(false);
-  const [error, setError] = React10.useState(null);
-  const fetchPlans = React10.useCallback(async () => {
+  const [plans, setPlans] = React11.useState([]);
+  const [filteredPlans, setFilteredPlans] = React11.useState([]);
+  const [selectedPlan, setSelectedPlan] = React11.useState(null);
+  const [tierFilter, setTierFilter] = React11.useState("all");
+  const [billingCycle, setBillingCycle] = React11.useState("monthly");
+  const [loading, setLoading] = React11.useState(false);
+  const [error, setError] = React11.useState(null);
+  const fetchPlans = React11.useCallback(async () => {
     if (loading) return;
     setLoading(true);
     setError(null);
@@ -650,7 +675,7 @@ var usePlans = () => {
       setLoading(false);
     }
   }, [loading]);
-  React10.useEffect(() => {
+  React11.useEffect(() => {
     if (plans.length > 0 && tierFilter === "all") {
       const uniqueUnits = getUniqueCandidateUnits(plans);
       if (uniqueUnits.length > 0) {
@@ -658,17 +683,17 @@ var usePlans = () => {
       }
     }
   }, [plans, tierFilter]);
-  React10.useEffect(() => {
+  React11.useEffect(() => {
     let filtered = [...plans];
     filtered = filterPlansByBillingCycle(filtered, billingCycle);
     filtered = filterPlansByTier(filtered, tierFilter);
     const sorted = sortPlansForDisplay(filtered);
     setFilteredPlans(sorted);
   }, [plans, tierFilter, billingCycle]);
-  const handlePlanSelect = React10.useCallback((plan) => {
+  const handlePlanSelect = React11.useCallback((plan) => {
     setSelectedPlan(plan);
   }, []);
-  const handleUpgrade = React10.useCallback(async (externalId, options) => {
+  const handleUpgrade = React11.useCallback(async (externalId, options) => {
     var _a;
     if (!selectedPlan) return;
     try {
@@ -690,14 +715,14 @@ var usePlans = () => {
       alert("An error occurred. Please try again.");
     }
   }, [selectedPlan, currency]);
-  const clearPlans = React10.useCallback(() => {
+  const clearPlans = React11.useCallback(() => {
     setPlans([]);
     setFilteredPlans([]);
     setSelectedPlan(null);
     setError(null);
     setTierFilter("all");
   }, []);
-  const clearSelectedPlan2 = React10.useCallback(() => {
+  const clearSelectedPlan2 = React11.useCallback(() => {
     setSelectedPlan(null);
   }, []);
   const dropdownOptions = getDropdownOptions(plans);
@@ -783,18 +808,18 @@ var useTransactions = ({
   initialFilters = {},
   autoFetch = false
 }) => {
-  const [transactions, setTransactions] = React10.useState([]);
-  const [allTransactions, setAllTransactions] = React10.useState([]);
-  const [loading, setLoading] = React10.useState(false);
-  const [error, setError] = React10.useState(null);
-  const [filters, setFilters] = React10.useState({
+  const [transactions, setTransactions] = React11.useState([]);
+  const [allTransactions, setAllTransactions] = React11.useState([]);
+  const [loading, setLoading] = React11.useState(false);
+  const [error, setError] = React11.useState(null);
+  const [filters, setFilters] = React11.useState({
     ...DEFAULT_FILTERS,
     ...initialFilters
   });
-  const [meta, setMeta] = React10.useState(null);
-  const [isBackendPaginated, setIsBackendPaginated] = React10.useState(false);
-  const hasAutoFetchedRef = React10.useRef(false);
-  const fetchTransactions = React10.useCallback(async () => {
+  const [meta, setMeta] = React11.useState(null);
+  const [isBackendPaginated, setIsBackendPaginated] = React11.useState(false);
+  const hasAutoFetchedRef = React11.useRef(false);
+  const fetchTransactions = React11.useCallback(async () => {
     if (!externalId) return;
     setLoading(true);
     setError(null);
@@ -833,7 +858,7 @@ var useTransactions = ({
       setLoading(false);
     }
   }, [externalId, filters]);
-  const updateFilters = React10.useCallback((newFilters) => {
+  const updateFilters = React11.useCallback((newFilters) => {
     setFilters((prev) => ({
       ...prev,
       ...newFilters,
@@ -841,7 +866,7 @@ var useTransactions = ({
       page: newFilters.page !== void 0 ? newFilters.page : 1
     }));
   }, []);
-  React10.useEffect(() => {
+  React11.useEffect(() => {
     if (!isBackendPaginated && allTransactions.length > 0) {
       const filteredTransactions = applyFrontendFilters(allTransactions, filters);
       const paginatedResult = applyFrontendPagination(filteredTransactions, filters);
@@ -849,19 +874,19 @@ var useTransactions = ({
       setMeta(paginatedResult.meta);
     }
   }, [filters, allTransactions, isBackendPaginated]);
-  const clearFilters = React10.useCallback(() => {
+  const clearFilters = React11.useCallback(() => {
     setFilters(DEFAULT_FILTERS);
   }, []);
-  const refetch = React10.useCallback(async () => {
+  const refetch = React11.useCallback(async () => {
     await fetchTransactions();
   }, [fetchTransactions]);
-  React10.useEffect(() => {
+  React11.useEffect(() => {
     if (autoFetch && externalId && !hasAutoFetchedRef.current) {
       hasAutoFetchedRef.current = true;
       fetchTransactions();
     }
   }, [autoFetch, externalId, fetchTransactions]);
-  React10.useEffect(() => {
+  React11.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;
@@ -888,10 +913,10 @@ var usePagination = ({
   initialPage = 1,
   initialLimit = 10
 } = {}) => {
-  const [currentPage, setCurrentPage] = React10.useState(initialPage);
-  const [limit, setLimitState] = React10.useState(initialLimit);
-  const [meta, setMeta] = React10.useState(null);
-  const goToPage = React10.useCallback((page) => {
+  const [currentPage, setCurrentPage] = React11.useState(initialPage);
+  const [limit, setLimitState] = React11.useState(initialLimit);
+  const [meta, setMeta] = React11.useState(null);
+  const goToPage = React11.useCallback((page) => {
     if (meta) {
       const validPage = Math.max(1, Math.min(page, meta.totalPages));
       setCurrentPage(validPage);
@@ -899,29 +924,29 @@ var usePagination = ({
       setCurrentPage(Math.max(1, page));
     }
   }, [meta]);
-  const goToNextPage = React10.useCallback(() => {
+  const goToNextPage = React11.useCallback(() => {
     if (meta && meta.hasNextPage) {
       setCurrentPage((prev) => prev + 1);
     }
   }, [meta]);
-  const goToPreviousPage = React10.useCallback(() => {
+  const goToPreviousPage = React11.useCallback(() => {
     if (meta && meta.hasPreviousPage) {
       setCurrentPage((prev) => prev - 1);
     }
   }, [meta]);
-  const goToFirstPage = React10.useCallback(() => {
+  const goToFirstPage = React11.useCallback(() => {
     setCurrentPage(1);
   }, []);
-  const goToLastPage = React10.useCallback(() => {
+  const goToLastPage = React11.useCallback(() => {
     if (meta) {
       setCurrentPage(meta.totalPages);
     }
   }, [meta]);
-  const setLimit = React10.useCallback((newLimit) => {
+  const setLimit = React11.useCallback((newLimit) => {
     setLimitState(newLimit);
     setCurrentPage(1);
   }, []);
-  const reset = React10.useCallback(() => {
+  const reset = React11.useCallback(() => {
     setCurrentPage(initialPage);
     setLimitState(initialLimit);
     setMeta(null);
@@ -944,9 +969,9 @@ var useCancelSubscription = ({
   onSuccess,
   onError
 } = {}) => {
-  const [loading, setLoading] = React10.useState(false);
-  const [error, setError] = React10.useState(null);
-  const cancelSubscription = React10.useCallback(async (externalId, options) => {
+  const [loading, setLoading] = React11.useState(false);
+  const [error, setError] = React11.useState(null);
+  const cancelSubscription = React11.useCallback(async (externalId, options) => {
     if (!externalId) {
       const errorMsg = "External ID is required";
       setError(errorMsg);
@@ -975,7 +1000,7 @@ var useCancelSubscription = ({
       setLoading(false);
     }
   }, [onSuccess, onError]);
-  const reset = React10.useCallback(() => {
+  const reset = React11.useCallback(() => {
     setLoading(false);
     setError(null);
   }, []);
@@ -991,9 +1016,9 @@ var useCustomerPortal = ({
   onError,
   returnPath = "/dashboard"
 } = {}) => {
-  const [loading, setLoading] = React10.useState(false);
-  const [error, setError] = React10.useState(null);
-  const openCustomerPortal = React10.useCallback(async (externalId) => {
+  const [loading, setLoading] = React11.useState(false);
+  const [error, setError] = React11.useState(null);
+  const openCustomerPortal = React11.useCallback(async (externalId) => {
     var _a;
     if (!externalId) {
       const errorMsg = "External ID is required";
@@ -1030,7 +1055,7 @@ var useCustomerPortal = ({
       setLoading(false);
     }
   }, [onSuccess, onError, returnPath]);
-  const reset = React10.useCallback(() => {
+  const reset = React11.useCallback(() => {
     setLoading(false);
     setError(null);
   }, []);
@@ -1041,13 +1066,13 @@ var useCustomerPortal = ({
     reset
   };
 };
-var NavigationContext = React10.createContext(void 0);
+var NavigationContext = React11.createContext(void 0);
 var NavigationProvider = ({
   children,
   initialPage = "dashboard"
 }) => {
-  const [currentPage, setCurrentPage] = React10.useState(initialPage);
-  const [history, setHistory] = React10.useState([initialPage]);
+  const [currentPage, setCurrentPage] = React11.useState(initialPage);
+  const [history, setHistory] = React11.useState([initialPage]);
   const navigateTo = (page) => {
     setCurrentPage(page);
     setHistory((prev) => [...prev, page]);
@@ -1064,7 +1089,7 @@ var NavigationProvider = ({
   return /* @__PURE__ */ jsxRuntime.jsx(NavigationContext.Provider, { value: { currentPage, navigateTo, goBack }, children });
 };
 var useNavigation = () => {
-  const context = React10.useContext(NavigationContext);
+  const context = React11.useContext(NavigationContext);
   if (!context) {
     throw new Error("useNavigation must be used within NavigationProvider");
   }
@@ -1148,8 +1173,8 @@ var TierFilterDropdown = ({
   selectedValue,
   onSelect
 }) => {
-  const dropdownRef = React10.useRef(null);
-  React10.useEffect(() => {
+  const dropdownRef = React11.useRef(null);
+  React11.useEffect(() => {
     const handleClickOutside = (event) => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
         if (isOpen) {
@@ -1529,7 +1554,7 @@ var PlanSelector = ({
   activePlanCode,
   nextMembershipPlanId
 }) => {
-  const [isDropdownOpen, setIsDropdownOpen] = React10.useState(false);
+  const [isDropdownOpen, setIsDropdownOpen] = React11.useState(false);
   const handleDropdownToggle = () => {
     setIsDropdownOpen(!isDropdownOpen);
   };
@@ -1899,7 +1924,7 @@ var Layout = ({ children, hideHeader = false, hideFooter = false }) => {
   ] });
 };
 var usePaymentParams = () => {
-  return React10.useMemo(() => {
+  return React11.useMemo(() => {
     const params = new URLSearchParams(window.location.search);
     return {
       gateway: params.get("gateway") || void 0,
@@ -1930,7 +1955,7 @@ var PaymentSuccessPage = ({
     initialFilters: { page: 1, limit: 100 },
     autoFetch: !!externalId
   });
-  const invoiceDownloadUrl = React10.useMemo(() => {
+  const invoiceDownloadUrl = React11.useMemo(() => {
     if (propInvoiceDownloadUrl) return propInvoiceDownloadUrl;
     if (!transactions || transactions.length === 0) return void 0;
     const withOrder = transactions.filter((t) => typeof t.order === "number");
@@ -2444,7 +2469,7 @@ var TransactionPagination = ({
           children: "Previous"
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center space-x-1", children: getVisiblePages().map((page, index) => /* @__PURE__ */ jsxRuntime.jsx(React10__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(React11__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),
@@ -2490,7 +2515,7 @@ var TransactionModal = ({
     autoFetch: true
     // Enable auto-fetch so it works when modal opens
   });
-  React10.useEffect(() => {
+  React11.useEffect(() => {
     if (isOpen && externalId) {
       fetchTransactions();
     }
@@ -3040,9 +3065,11 @@ var GracePeriodNotification = ({
     /* @__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",
+        "Your ",
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-bold", children: "7-day" }),
+        " grace period started on",
         " ",
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold", children: startDate ? formatDate(startDate) : "N/A" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-bold", children: startDate ? formatDate(startDate) : "N/A" }),
         ". You have ",
         /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-bold text-orange-900 text-base", children: [
           remainingDays,
@@ -3068,10 +3095,10 @@ var SubscriptionDetails = ({
   className = "",
   loading = false
 }) => {
-  const [isTransactionModalOpen, setIsTransactionModalOpen] = React10.useState(false);
-  const [showCancelConfirmation, setShowCancelConfirmation] = React10.useState(false);
-  const [localSubscription, setLocalSubscription] = React10.useState(subscription);
-  React10.useEffect(() => {
+  const [isTransactionModalOpen, setIsTransactionModalOpen] = React11.useState(false);
+  const [showCancelConfirmation, setShowCancelConfirmation] = React11.useState(false);
+  const [localSubscription, setLocalSubscription] = React11.useState(subscription);
+  React11.useEffect(() => {
     setLocalSubscription(subscription);
   }, [subscription]);
   const { cancelSubscription, loading: cancelLoading } = useCancelSubscription({
@@ -3201,9 +3228,9 @@ var UpgradeSummary = ({
   billableMetricCode
 }) => {
   const { currency } = useCurrency();
-  const [checkoutInfo, setCheckoutInfo] = React10.useState(null);
-  const [loading, setLoading] = React10.useState(false);
-  React10.useEffect(() => {
+  const [checkoutInfo, setCheckoutInfo] = React11.useState(null);
+  const [loading, setLoading] = React11.useState(false);
+  React11.useEffect(() => {
     const planToDisplay2 = selectedPlan || currentPlan;
     if (!planToDisplay2 || !isVisible || Number(planToDisplay2.fixedCost) === 0) {
       setCheckoutInfo(null);
@@ -3369,9 +3396,9 @@ var UpgradeSummary = ({
     }
   ) }) });
 };
-var SubOSThemeContext = React10.createContext(void 0);
+var SubOSThemeContext = React11.createContext(void 0);
 var useSubOSTheme = () => {
-  const context = React10.useContext(SubOSThemeContext);
+  const context = React11.useContext(SubOSThemeContext);
   if (!context) {
     throw new Error("useSubOSTheme must be used within a SubOSThemeProvider");
   }
@@ -3382,8 +3409,8 @@ var SubOSThemeProvider = ({
   theme = {},
   className = ""
 }) => {
-  const [currentTheme, setCurrentTheme] = React10__default.default.useState(theme);
-  const cssVariables = React10__default.default.useMemo(() => {
+  const [currentTheme, setCurrentTheme] = React11__default.default.useState(theme);
+  const cssVariables = React11__default.default.useMemo(() => {
     const vars = {};
     if (currentTheme.primaryColors) {
       Object.entries(currentTheme.primaryColors).forEach(([key, value]) => {
@@ -3432,7 +3459,7 @@ var SubOSThemeProvider = ({
     if (currentTheme.shadowCardHover) vars["--subos-shadow-card-hover"] = currentTheme.shadowCardHover;
     return vars;
   }, [currentTheme]);
-  const contextValue = React10__default.default.useMemo(() => ({
+  const contextValue = React11__default.default.useMemo(() => ({
     theme: currentTheme,
     setTheme: setCurrentTheme
   }), [currentTheme]);
@@ -3447,7 +3474,7 @@ var SubOSThemeProvider = ({
 };
 var useApplyHostTheme = (hostTheme) => {
   const { setTheme } = useSubOSTheme();
-  React10__default.default.useEffect(() => {
+  React11__default.default.useEffect(() => {
     if (hostTheme) {
       setTheme(hostTheme);
     }
@@ -3527,7 +3554,7 @@ var Pagination = ({
             children: "Previous"
           }
         ),
-        pageNumbers.map((page, index) => /* @__PURE__ */ jsxRuntime.jsx(React10__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(React11__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),
@@ -3555,8 +3582,8 @@ var DashboardPage = ({
   const subscription = useSubscription();
   const plans = usePlans();
   const { currency, isLoading: isCurrencyLoading } = useCurrency();
-  const lastLoadedIdRef = React10.useRef(null);
-  React10.useEffect(() => {
+  const lastLoadedIdRef = React11.useRef(null);
+  React11.useEffect(() => {
     if (isCurrencyLoading) return;
     const cacheKey = `${externalId}-${currency}`;
     if (lastLoadedIdRef.current !== cacheKey) {
@@ -3565,7 +3592,7 @@ var DashboardPage = ({
       lastLoadedIdRef.current = cacheKey;
     }
   }, [externalId, currency, isCurrencyLoading]);
-  React10.useEffect(() => {
+  React11.useEffect(() => {
     registerClearSelectedPlan(plans.clearSelectedPlan);
     return () => {
       unregisterClearSelectedPlan();
@@ -3632,9 +3659,9 @@ var DashboardPage = ({
   ] }) }) });
 };
 var useProcessPaymentCancel = (params) => {
-  const [loading, setLoading] = React10.useState(true);
-  const [error, setError] = React10.useState(null);
-  React10.useEffect(() => {
+  const [loading, setLoading] = React11.useState(true);
+  const [error, setError] = React11.useState(null);
+  React11.useEffect(() => {
     const run = async () => {
       try {
         const qs = new URLSearchParams({
@@ -3741,6 +3768,7 @@ exports.SubscriptionCancelButton = SubscriptionCancelButton;
 exports.SubscriptionCancelModal = SubscriptionCancelModal;
 exports.SubscriptionDetails = SubscriptionDetails;
 exports.SubscriptionInfoGrid = SubscriptionInfoGrid;
+exports.SubscriptionProvider = SubscriptionProvider;
 exports.SubscriptionTransactionButton = SubscriptionTransactionButton;
 exports.SubscriptionUsageDisplay = SubscriptionUsageDisplay;
 exports.TierFilterDropdown = TierFilterDropdown;
@@ -3768,6 +3796,7 @@ exports.getApiBaseUrl = getApiBaseUrl;
 exports.getCandidateUnits = getCandidateUnits;
 exports.getCurrentSelectionText = getCurrentSelectionText;
 exports.getDropdownOptions = getDropdownOptions;
+exports.getGracePeriodInfo = getGracePeriodInfo;
 exports.getPlanDescription = getPlanDescription;
 exports.getPlanFeatures = getPlanFeatures;
 exports.getProjectId = getProjectId;