subos-frontend 1.0.79 → 1.0.81

package/dist/index.js

@@ -1,13 +1,13 @@
 'use strict';
 
-var React9 = require('react');
+var React10 = 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 React10__default = /*#__PURE__*/_interopDefault(React10);
 
 // src/config/envConfig.ts
 function getEnvVar(key, fallback) {
@@ -191,10 +191,17 @@ var subscriptionApi = {
     }
     return apiRequest(endpoint, "DELETE", void 0, { projectId: getDefaultProjectId() });
   },
-  checkoutInfo: async (planCode, externalId, billableMetricCode) => {
+  checkoutInfo: async (planCode, externalId, options) => {
     let endpoint = `${ENDPOINTS.CHECKOUT}/info/${planCode}/${externalId}`;
-    if (billableMetricCode) {
-      endpoint += `?billableMetricCode=${encodeURIComponent(billableMetricCode)}`;
+    const params = new URLSearchParams();
+    if (options == null ? void 0 : options.billableMetricCode) {
+      params.append("billableMetricCode", options.billableMetricCode);
+    }
+    if (options == null ? void 0 : options.currency) {
+      params.append("currency", options.currency);
+    }
+    if (params.toString()) {
+      endpoint += `?${params.toString()}`;
     }
     return apiRequest(endpoint, "GET", void 0, { projectId: getDefaultProjectId() });
   }
@@ -227,10 +234,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] = React10.useState(null);
+  const [loading, setLoading] = React10.useState(false);
+  const [error, setError] = React10.useState(null);
+  const fetchSubscription = React10.useCallback(async (externalId) => {
     if (!externalId || externalId === "undefined" || externalId.trim() === "") {
       setError("Invalid user ID. Please ensure you are properly authenticated.");
       setLoading(false);
@@ -255,7 +262,7 @@ var useSubscription = () => {
       setLoading(false);
     }
   }, [loading]);
-  const clearSubscription = React9.useCallback(() => {
+  const clearSubscription = React10.useCallback(() => {
     setSubscription(null);
     setError(null);
   }, []);
@@ -389,17 +396,184 @@ var formatDate = (dateString, format = "date") => {
     day: "numeric"
   }).format(date);
 };
+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;
+};
+
+// src/utils/currency.ts
+var CURRENCY_SYMBOLS = {
+  USD: "$",
+  INR: "\u20B9",
+  EUR: "\u20AC",
+  GBP: "\xA3",
+  AUD: "A$",
+  CAD: "C$",
+  JPY: "\xA5"
+};
+function getCurrencySymbol(code) {
+  if (!code) return "$";
+  const upper = code.toUpperCase();
+  return CURRENCY_SYMBOLS[upper] ?? "$";
+}
+function mapCountryToCurrency(countryCode) {
+  const countryToCurrency = {
+    // North America
+    US: "usd",
+    CA: "cad",
+    MX: "mxn",
+    // Europe
+    GB: "gbp",
+    DE: "eur",
+    FR: "eur",
+    IT: "eur",
+    ES: "eur",
+    NL: "eur",
+    BE: "eur",
+    AT: "eur",
+    PT: "eur",
+    IE: "eur",
+    FI: "eur",
+    GR: "eur",
+    LU: "eur",
+    CH: "chf",
+    SE: "sek",
+    NO: "nok",
+    DK: "dkk",
+    PL: "pln",
+    CZ: "czk",
+    HU: "huf",
+    RO: "ron",
+    // Asia
+    IN: "inr",
+    CN: "cny",
+    JP: "jpy",
+    KR: "krw",
+    SG: "sgd",
+    HK: "hkd",
+    TW: "twd",
+    MY: "myr",
+    TH: "thb",
+    ID: "idr",
+    PH: "php",
+    VN: "vnd",
+    BD: "bdt",
+    PK: "pkr",
+    LK: "lkr",
+    // Oceania
+    AU: "aud",
+    NZ: "nzd",
+    // Middle East
+    AE: "aed",
+    SA: "sar",
+    IL: "ils",
+    TR: "try",
+    QA: "qar",
+    KW: "kwd",
+    OM: "omr",
+    BH: "bhd",
+    // Africa
+    ZA: "zar",
+    EG: "egp",
+    NG: "ngn",
+    KE: "kes",
+    // South America
+    BR: "brl",
+    AR: "ars",
+    CL: "clp",
+    CO: "cop",
+    PE: "pen"
+  };
+  return countryToCurrency[countryCode] || "USD";
+}
+var CurrencyContext = React10.createContext(void 0);
+var useCurrency = () => {
+  const context = React10.useContext(CurrencyContext);
+  if (context === void 0) {
+    throw new Error("useCurrency must be used within a CurrencyProvider");
+  }
+  return context;
+};
+var CurrencyProvider = ({
+  children,
+  ipInfoToken,
+  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(() => {
+    if (skipAutoDetect) {
+      setIsLoading(false);
+      return;
+    }
+    const fetchCountryAndCurrency = async () => {
+      try {
+        setIsLoading(true);
+        setError(null);
+        const url = ipInfoToken ? `https://ipinfo.io/json?token=${ipInfoToken}` : "https://ipinfo.io/json";
+        const response = await fetch(url);
+        if (!response.ok) {
+          throw new Error("Failed to fetch location data");
+        }
+        const data = await response.json();
+        const detectedCountry = data.country;
+        setCountry(detectedCountry);
+        const detectedCurrency = mapCountryToCurrency(detectedCountry);
+        setCurrencyState(detectedCurrency);
+        console.log("Currency detected:", { country: detectedCountry, currency: detectedCurrency });
+      } catch (err) {
+        console.error("Error fetching location:", err);
+        setError(err instanceof Error ? err.message : "Unknown error");
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    fetchCountryAndCurrency();
+  }, [ipInfoToken, skipAutoDetect]);
+  const setCurrency = (newCurrency) => {
+    setCurrencyState(newCurrency);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(CurrencyContext.Provider, { value: { country, currency, isLoading, error, setCurrency }, children });
+};
 
 // 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 { 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 () => {
     if (loading) return;
     setLoading(true);
     setError(null);
@@ -421,7 +595,7 @@ var usePlans = () => {
       setLoading(false);
     }
   }, [loading]);
-  React9.useEffect(() => {
+  React10.useEffect(() => {
     if (plans.length > 0 && tierFilter === "all") {
       const uniqueUnits = getUniqueCandidateUnits(plans);
       if (uniqueUnits.length > 0) {
@@ -429,21 +603,22 @@ var usePlans = () => {
       }
     }
   }, [plans, tierFilter]);
-  React9.useEffect(() => {
+  React10.useEffect(() => {
     let filtered = [...plans];
     filtered = filterPlansByBillingCycle(filtered, billingCycle);
     filtered = filterPlansByTier(filtered, tierFilter);
     setFilteredPlans(filtered);
   }, [plans, tierFilter, billingCycle]);
-  const handlePlanSelect = React9.useCallback((plan) => {
+  const handlePlanSelect = React10.useCallback((plan) => {
     setSelectedPlan(plan);
   }, []);
-  const handleUpgrade = React9.useCallback(async (externalId) => {
+  const handleUpgrade = React10.useCallback(async (externalId) => {
     var _a;
     if (!selectedPlan) return;
     try {
       const response = await plansApi.createPaymentSession(selectedPlan.code, {
-        externalId
+        externalId,
+        currency
         // billableMetricCode: "CANDIDATES"
       });
       if (response.success && ((_a = response.data) == null ? void 0 : _a.checkoutUrl)) {
@@ -456,15 +631,15 @@ var usePlans = () => {
       console.error("Error creating payment session:", error2);
       alert("An error occurred. Please try again.");
     }
-  }, [selectedPlan]);
-  const clearPlans = React9.useCallback(() => {
+  }, [selectedPlan, currency]);
+  const clearPlans = React10.useCallback(() => {
     setPlans([]);
     setFilteredPlans([]);
     setSelectedPlan(null);
     setError(null);
     setTierFilter("all");
   }, []);
-  const clearSelectedPlan2 = React9.useCallback(() => {
+  const clearSelectedPlan2 = React10.useCallback(() => {
     setSelectedPlan(null);
   }, []);
   const dropdownOptions = getDropdownOptions(plans);
@@ -550,18 +725,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] = React10.useState([]);
+  const [allTransactions, setAllTransactions] = React10.useState([]);
+  const [loading, setLoading] = React10.useState(false);
+  const [error, setError] = React10.useState(null);
+  const [filters, setFilters] = React10.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] = React10.useState(null);
+  const [isBackendPaginated, setIsBackendPaginated] = React10.useState(false);
+  const hasAutoFetchedRef = React10.useRef(false);
+  const fetchTransactions = React10.useCallback(async () => {
     if (!externalId) return;
     setLoading(true);
     setError(null);
@@ -600,7 +775,7 @@ var useTransactions = ({
       setLoading(false);
     }
   }, [externalId, filters]);
-  const updateFilters = React9.useCallback((newFilters) => {
+  const updateFilters = React10.useCallback((newFilters) => {
     setFilters((prev) => ({
       ...prev,
       ...newFilters,
@@ -608,7 +783,7 @@ var useTransactions = ({
       page: newFilters.page !== void 0 ? newFilters.page : 1
     }));
   }, []);
-  React9.useEffect(() => {
+  React10.useEffect(() => {
     if (!isBackendPaginated && allTransactions.length > 0) {
       const filteredTransactions = applyFrontendFilters(allTransactions, filters);
       const paginatedResult = applyFrontendPagination(filteredTransactions, filters);
@@ -616,19 +791,19 @@ var useTransactions = ({
       setMeta(paginatedResult.meta);
     }
   }, [filters, allTransactions, isBackendPaginated]);
-  const clearFilters = React9.useCallback(() => {
+  const clearFilters = React10.useCallback(() => {
     setFilters(DEFAULT_FILTERS);
   }, []);
-  const refetch = React9.useCallback(async () => {
+  const refetch = React10.useCallback(async () => {
     await fetchTransactions();
   }, [fetchTransactions]);
-  React9.useEffect(() => {
+  React10.useEffect(() => {
     if (autoFetch && externalId && !hasAutoFetchedRef.current) {
       hasAutoFetchedRef.current = true;
       fetchTransactions();
     }
   }, [autoFetch, externalId, fetchTransactions]);
-  React9.useEffect(() => {
+  React10.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;
@@ -655,10 +830,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] = React10.useState(initialPage);
+  const [limit, setLimitState] = React10.useState(initialLimit);
+  const [meta, setMeta] = React10.useState(null);
+  const goToPage = React10.useCallback((page) => {
     if (meta) {
       const validPage = Math.max(1, Math.min(page, meta.totalPages));
       setCurrentPage(validPage);
@@ -666,29 +841,29 @@ var usePagination = ({
       setCurrentPage(Math.max(1, page));
     }
   }, [meta]);
-  const goToNextPage = React9.useCallback(() => {
+  const goToNextPage = React10.useCallback(() => {
     if (meta && meta.hasNextPage) {
       setCurrentPage((prev) => prev + 1);
     }
   }, [meta]);
-  const goToPreviousPage = React9.useCallback(() => {
+  const goToPreviousPage = React10.useCallback(() => {
     if (meta && meta.hasPreviousPage) {
       setCurrentPage((prev) => prev - 1);
     }
   }, [meta]);
-  const goToFirstPage = React9.useCallback(() => {
+  const goToFirstPage = React10.useCallback(() => {
     setCurrentPage(1);
   }, []);
-  const goToLastPage = React9.useCallback(() => {
+  const goToLastPage = React10.useCallback(() => {
     if (meta) {
       setCurrentPage(meta.totalPages);
     }
   }, [meta]);
-  const setLimit = React9.useCallback((newLimit) => {
+  const setLimit = React10.useCallback((newLimit) => {
     setLimitState(newLimit);
     setCurrentPage(1);
   }, []);
-  const reset = React9.useCallback(() => {
+  const reset = React10.useCallback(() => {
     setCurrentPage(initialPage);
     setLimitState(initialLimit);
     setMeta(null);
@@ -711,9 +886,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] = React10.useState(false);
+  const [error, setError] = React10.useState(null);
+  const cancelSubscription = React10.useCallback(async (externalId, options) => {
     if (!externalId) {
       const errorMsg = "External ID is required";
       setError(errorMsg);
@@ -742,7 +917,7 @@ var useCancelSubscription = ({
       setLoading(false);
     }
   }, [onSuccess, onError]);
-  const reset = React9.useCallback(() => {
+  const reset = React10.useCallback(() => {
     setLoading(false);
     setError(null);
   }, []);
@@ -758,9 +933,9 @@ var useCustomerPortal = ({
   onError,
   returnPath = "/dashboard"
 } = {}) => {
-  const [loading, setLoading] = React9.useState(false);
-  const [error, setError] = React9.useState(null);
-  const openCustomerPortal = React9.useCallback(async (externalId) => {
+  const [loading, setLoading] = React10.useState(false);
+  const [error, setError] = React10.useState(null);
+  const openCustomerPortal = React10.useCallback(async (externalId) => {
     var _a;
     if (!externalId) {
       const errorMsg = "External ID is required";
@@ -797,7 +972,7 @@ var useCustomerPortal = ({
       setLoading(false);
     }
   }, [onSuccess, onError, returnPath]);
-  const reset = React9.useCallback(() => {
+  const reset = React10.useCallback(() => {
     setLoading(false);
     setError(null);
   }, []);
@@ -808,34 +983,6 @@ var useCustomerPortal = ({
     reset
   };
 };
-var UpgradeContext = React9.createContext(void 0);
-var UpgradeProvider = ({ children }) => {
-  const [isUpgradeSummaryVisible, setIsUpgradeSummaryVisible] = React9.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 = React9.useContext(UpgradeContext);
-  if (context === void 0) {
-    throw new Error("useUpgrade must be used within an UpgradeProvider");
-  }
-  return context;
-};
 var BillingCycleToggle = ({
   billingCycle,
   onBillingCycleChange,
@@ -914,8 +1061,8 @@ var TierFilterDropdown = ({
   selectedValue,
   onSelect
 }) => {
-  const dropdownRef = React9.useRef(null);
-  React9.useEffect(() => {
+  const dropdownRef = React10.useRef(null);
+  React10.useEffect(() => {
     const handleClickOutside = (event) => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
         if (isOpen) {
@@ -1280,7 +1427,7 @@ var PlanSelector = ({
   onBillingCycleChange,
   activePlanCode
 }) => {
-  const [isDropdownOpen, setIsDropdownOpen] = React9.useState(false);
+  const [isDropdownOpen, setIsDropdownOpen] = React10.useState(false);
   const handleDropdownToggle = () => {
     setIsDropdownOpen(!isDropdownOpen);
   };
@@ -1608,7 +1755,7 @@ var Layout = ({ children, hideHeader = false, hideFooter = false }) => {
   ] });
 };
 var usePaymentParams = () => {
-  return React9.useMemo(() => {
+  return React10.useMemo(() => {
     const params = new URLSearchParams(window.location.search);
     return {
       gateway: params.get("gateway") || void 0,
@@ -1639,7 +1786,7 @@ var PaymentSuccessPage = ({
     initialFilters: { page: 1, limit: 100 },
     autoFetch: !!externalId
   });
-  const invoiceDownloadUrl = React9.useMemo(() => {
+  const invoiceDownloadUrl = React10.useMemo(() => {
     if (propInvoiceDownloadUrl) return propInvoiceDownloadUrl;
     if (!transactions || transactions.length === 0) return void 0;
     const withOrder = transactions.filter((t) => typeof t.order === "number");
@@ -1802,7 +1949,16 @@ var TransactionItem = ({
             " discount"
           ] })
         ] }),
-        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 === "payment_failed" ? "Failed" : transaction.transactionStatus === "succeeded" ? "Succeeded" : transaction.transactionStatus }),
+        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 === "payment_failed" ? "Failed" : transaction.transactionStatus === "succeeded" ? "Succeeded" : transaction.transactionStatus === "activated" ? "Activated" : transaction.transactionStatus
+          }
+        ),
         showFields.invoice && showInvoiceButton && transaction.invoice_pdf && /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
@@ -2144,7 +2300,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(React10__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),
@@ -2190,7 +2346,7 @@ var TransactionModal = ({
     autoFetch: true
     // Enable auto-fetch so it works when modal opens
   });
-  React9.useEffect(() => {
+  React10.useEffect(() => {
     if (isOpen && externalId) {
       fetchTransactions();
     }
@@ -2705,10 +2861,10 @@ var SubscriptionDetails = ({
   customActions = [],
   className = ""
 }) => {
-  const [isTransactionModalOpen, setIsTransactionModalOpen] = React9.useState(false);
-  const [showCancelConfirmation, setShowCancelConfirmation] = React9.useState(false);
-  const [localSubscription, setLocalSubscription] = React9.useState(subscription);
-  React9.useEffect(() => {
+  const [isTransactionModalOpen, setIsTransactionModalOpen] = React10.useState(false);
+  const [showCancelConfirmation, setShowCancelConfirmation] = React10.useState(false);
+  const [localSubscription, setLocalSubscription] = React10.useState(subscription);
+  React10.useEffect(() => {
     setLocalSubscription(subscription);
   }, [subscription]);
   const { cancelSubscription, loading: cancelLoading } = useCancelSubscription({
@@ -2833,9 +2989,10 @@ var UpgradeSummary = ({
   isVisible = true,
   billableMetricCode
 }) => {
-  const [checkoutInfo, setCheckoutInfo] = React9.useState(null);
-  const [loading, setLoading] = React9.useState(false);
-  React9.useEffect(() => {
+  const { currency } = useCurrency();
+  const [checkoutInfo, setCheckoutInfo] = React10.useState(null);
+  const [loading, setLoading] = React10.useState(false);
+  React10.useEffect(() => {
     const planToDisplay2 = selectedPlan || currentPlan;
     if (!planToDisplay2 || !isVisible || Number(planToDisplay2.fixedCost) === 0) {
       setCheckoutInfo(null);
@@ -2859,7 +3016,10 @@ var UpgradeSummary = ({
     const fetchCheckoutInfo = async () => {
       setLoading(true);
       try {
-        const response = await subscriptionApi.checkoutInfo(selectedPlan.code, externalId, billableMetricCode);
+        const response = await subscriptionApi.checkoutInfo(selectedPlan.code, externalId, {
+          billableMetricCode,
+          currency
+        });
         const dataWrapper = response == null ? void 0 : response.data;
         if ((dataWrapper == null ? void 0 : dataWrapper.success) && (dataWrapper == null ? void 0 : dataWrapper.data)) {
           setCheckoutInfo(dataWrapper.data);
@@ -2871,7 +3031,7 @@ var UpgradeSummary = ({
       }
     };
     fetchCheckoutInfo();
-  }, [selectedPlan, currentPlan, externalId, isVisible, billableMetricCode]);
+  }, [selectedPlan, currentPlan, externalId, isVisible, billableMetricCode, currency]);
   const planToDisplay = selectedPlan || currentPlan;
   const isShowingCurrentPlan = !selectedPlan && currentPlan;
   if (!planToDisplay || !isVisible || Number(planToDisplay.fixedCost) === 0 || loading || !checkoutInfo) {
@@ -2881,6 +3041,7 @@ var UpgradeSummary = ({
   const intervalDisplay = displayInfo.planInterval === "MONTHLY" ? "Mo" : "Yr";
   const dueToday = displayInfo.proration > 0 ? displayInfo.proration : displayInfo.planPrice;
   const shouldContactSupport = !!displayInfo.contactSupport;
+  const currencySymbol = getCurrencySymbol(displayInfo.planCurrency);
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -2916,7 +3077,7 @@ var UpgradeSummary = ({
               className: "text-2xl font-semibold",
               style: { color: "var(--subos-foreground, #1e293b)" },
               children: [
-                "$",
+                currencySymbol,
                 displayInfo.planPrice,
                 "/",
                 intervalDisplay
@@ -2939,7 +3100,7 @@ var UpgradeSummary = ({
                   className: "text-xl font-semibold",
                   style: { color: "var(--subos-foreground, #1e293b)" },
                   children: [
-                    "$",
+                    currencySymbol,
                     dueToday
                   ]
                 }
@@ -2987,9 +3148,9 @@ var UpgradeSummary = ({
     }
   ) }) });
 };
-var SubOSThemeContext = React9.createContext(void 0);
+var SubOSThemeContext = React10.createContext(void 0);
 var useSubOSTheme = () => {
-  const context = React9.useContext(SubOSThemeContext);
+  const context = React10.useContext(SubOSThemeContext);
   if (!context) {
     throw new Error("useSubOSTheme must be used within a SubOSThemeProvider");
   }
@@ -3000,8 +3161,8 @@ var SubOSThemeProvider = ({
   theme = {},
   className = ""
 }) => {
-  const [currentTheme, setCurrentTheme] = React9__default.default.useState(theme);
-  const cssVariables = React9__default.default.useMemo(() => {
+  const [currentTheme, setCurrentTheme] = React10__default.default.useState(theme);
+  const cssVariables = React10__default.default.useMemo(() => {
     const vars = {};
     if (currentTheme.primaryColors) {
       Object.entries(currentTheme.primaryColors).forEach(([key, value]) => {
@@ -3050,7 +3211,7 @@ var SubOSThemeProvider = ({
     if (currentTheme.shadowCardHover) vars["--subos-shadow-card-hover"] = currentTheme.shadowCardHover;
     return vars;
   }, [currentTheme]);
-  const contextValue = React9__default.default.useMemo(() => ({
+  const contextValue = React10__default.default.useMemo(() => ({
     theme: currentTheme,
     setTheme: setCurrentTheme
   }), [currentTheme]);
@@ -3065,7 +3226,7 @@ var SubOSThemeProvider = ({
 };
 var useApplyHostTheme = (hostTheme) => {
   const { setTheme } = useSubOSTheme();
-  React9__default.default.useEffect(() => {
+  React10__default.default.useEffect(() => {
     if (hostTheme) {
       setTheme(hostTheme);
     }
@@ -3145,7 +3306,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(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(
           "button",
           {
             onClick: () => onPageChange(page),
@@ -3172,15 +3333,15 @@ var DashboardPage = ({
   var _a, _b, _c;
   const subscription = useSubscription();
   const plans = usePlans();
-  const lastLoadedIdRef = React9.useRef(null);
-  React9.useEffect(() => {
+  const lastLoadedIdRef = React10.useRef(null);
+  React10.useEffect(() => {
     if (lastLoadedIdRef.current !== externalId) {
       subscription.fetchSubscription(externalId);
       plans.fetchPlans();
       lastLoadedIdRef.current = externalId;
     }
   }, [externalId]);
-  React9.useEffect(() => {
+  React10.useEffect(() => {
     registerClearSelectedPlan(plans.clearSelectedPlan);
     return () => {
       unregisterClearSelectedPlan();
@@ -3244,9 +3405,9 @@ var DashboardPage = ({
   ] }) }) });
 };
 var useProcessPaymentCancel = (params) => {
-  const [loading, setLoading] = React9.useState(true);
-  const [error, setError] = React9.useState(null);
-  React9.useEffect(() => {
+  const [loading, setLoading] = React10.useState(true);
+  const [error, setError] = React10.useState(null);
+  React10.useEffect(() => {
     const run = async () => {
       try {
         const qs = new URLSearchParams({
@@ -3283,12 +3444,12 @@ var PaymentCancelPage = () => {
 };
 var PaymentCancelPage_default = PaymentCancelPage;
 var App = function App2({ externalId }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.BrowserRouter, { children: /* @__PURE__ */ jsxRuntime.jsxs(reactRouterDom.Routes, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(CurrencyProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.BrowserRouter, { children: /* @__PURE__ */ jsxRuntime.jsxs(reactRouterDom.Routes, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Route, { path: "/", element: /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Navigate, { to: "/dashboard", replace: true }) }),
     /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Route, { path: "/dashboard", element: /* @__PURE__ */ jsxRuntime.jsx(DashboardPage, { externalId }) }),
     /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Route, { path: "/payment-success", element: /* @__PURE__ */ jsxRuntime.jsx(PaymentSuccessPage_default, {}) }),
     /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Route, { path: "/payment-cancel", element: /* @__PURE__ */ jsxRuntime.jsx(PaymentCancelPage_default, {}) })
-  ] }) });
+  ] }) }) });
 };
 
 exports.AddCardIcon = AddCardIcon;
@@ -3300,6 +3461,7 @@ exports.ChangeCardButton = ChangeCardButton;
 exports.CheckCircleIcon = CheckCircleIcon;
 exports.CheckIcon = CheckIcon;
 exports.CreditCardIcon = CreditCardIcon;
+exports.CurrencyProvider = CurrencyProvider;
 exports.DashboardIcon = DashboardIcon;
 exports.DashboardPage = DashboardPage;
 exports.DeleteIcon = DeleteIcon;
@@ -3364,6 +3526,7 @@ exports.transactionApi = transactionApi;
 exports.unregisterClearSelectedPlan = unregisterClearSelectedPlan;
 exports.useApplyHostTheme = useApplyHostTheme;
 exports.useCancelSubscription = useCancelSubscription;
+exports.useCurrency = useCurrency;
 exports.useCustomerPortal = useCustomerPortal;
 exports.usePagination = usePagination;
 exports.usePlans = usePlans;