subos-frontend 1.0.0

package/dist/index.js

@@ -0,0 +1,2289 @@
+'use strict';
+
+var React3 = 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);
+
+// src/config/envConfig.ts
+function getEnvVar(key, fallback) {
+  var _a;
+  try {
+    if (typeof ({ url: (typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('index.js', document.baseURI).href)) }) !== "undefined" && undefined) {
+      const v = undefined[key];
+      if (typeof fallback === "boolean") {
+        if (typeof v === "boolean") return v;
+        if (typeof v === "string") return ["true", "1", "yes"].includes(v.toLowerCase());
+        return fallback;
+      }
+      if (typeof fallback === "string") {
+        if (typeof v === "string") return v;
+        if (typeof v === "boolean") return v ? "true" : "false";
+        return fallback;
+      }
+      return v;
+    }
+    const nodeEnv = typeof globalThis !== "undefined" && ((_a = globalThis.process) == null ? void 0 : _a.env);
+    if (nodeEnv) {
+      const v = nodeEnv[key];
+      if (typeof fallback === "boolean") {
+        if (typeof v === "string") return ["true", "1", "yes"].includes(v.toLowerCase());
+        return fallback;
+      }
+      if (typeof fallback === "string") {
+        return v ?? fallback;
+      }
+      return v;
+    }
+    return fallback;
+  } catch {
+    return fallback;
+  }
+}
+var envDefaults = {
+  // API Configuration - These MUST be configured by the consuming app
+  API_ENDPOINT: getEnvVar("VITE_API_ENDPOINT", ""),
+  NEXT_PUBLIC_API_END_POINT: getEnvVar("VITE_NEXT_PUBLIC_API_END_POINT", ""),
+  // Project configuration for backend header - This MUST be configured by the consuming app
+  PROJECT_ID: getEnvVar("VITE_PROJECT_ID", ""),
+  // Third-party keys - This MUST be configured by the consuming app
+  STRIPE_PUBLISHABLE_KEY: getEnvVar("VITE_STRIPE_PUBLISHABLE_KEY", ""),
+  // App Configuration
+  APP_NAME: getEnvVar("VITE_APP_NAME", "SubOS Frontend"),
+  APP_VERSION: getEnvVar("VITE_APP_VERSION", "1.0.0"),
+  APP_ENVIRONMENT: getEnvVar("VITE_APP_ENVIRONMENT", "development"),
+  // Development Configuration
+  DEBUG: getEnvVar("VITE_DEBUG", false),
+  // Mode
+  MODE: getEnvVar("MODE", "development"),
+  DEV: getEnvVar("DEV", false),
+  PROD: getEnvVar("PROD", false)
+};
+var runtimeOverrides = {};
+function configureSubOS(input = {}) {
+  if (input.apiEndpoint !== void 0) runtimeOverrides.API_ENDPOINT = input.apiEndpoint;
+  if (input.projectId !== void 0) runtimeOverrides.PROJECT_ID = input.projectId;
+  if (input.stripePublishableKey !== void 0) runtimeOverrides.STRIPE_PUBLISHABLE_KEY = input.stripePublishableKey;
+  if (input.appName !== void 0) runtimeOverrides.APP_NAME = input.appName;
+  if (input.appVersion !== void 0) runtimeOverrides.APP_VERSION = input.appVersion;
+  if (input.appEnvironment !== void 0) runtimeOverrides.APP_ENVIRONMENT = input.appEnvironment;
+  if (input.debug !== void 0) runtimeOverrides.DEBUG = input.debug;
+}
+function validateSubOSConfig() {
+  const missingFields = [];
+  if (!getApiBaseUrl()) missingFields.push("apiEndpoint");
+  if (!getProjectId()) missingFields.push("projectId");
+  if (!getStripePublishableKey()) missingFields.push("stripePublishableKey");
+  return {
+    isValid: missingFields.length === 0,
+    missingFields
+  };
+}
+function ensureSubOSConfig() {
+  const validation = validateSubOSConfig();
+  if (!validation.isValid) {
+    throw new Error(
+      `SubOS configuration is incomplete. Missing required fields: ${validation.missingFields.join(", ")}. Please call configureSubOS() with the required configuration before using SubOS components.`
+    );
+  }
+}
+var getApiBaseUrl = () => runtimeOverrides.API_ENDPOINT ?? envDefaults.API_ENDPOINT;
+var getProjectId = () => runtimeOverrides.PROJECT_ID ?? envDefaults.PROJECT_ID;
+var getStripePublishableKey = () => runtimeOverrides.STRIPE_PUBLISHABLE_KEY ?? envDefaults.STRIPE_PUBLISHABLE_KEY;
+
+// src/api/config.ts
+var getHeaders = () => {
+  return {
+    "Content-Type": "application/json",
+    "auth": "auth",
+    // Adding auth header with value 'auth' for all API requests
+    "projectId": getProjectId()
+  };
+};
+var ENDPOINTS = {
+  PLANS: "/plans",
+  PAYMENTS: "/api/payments",
+  CHECKOUT: "/checkout",
+  SUBSCRIPTION: "/subscription",
+  CUSTOMER: "/customer",
+  TRANSACTIONS: "/transaction"
+};
+
+// src/api/client.ts
+async function apiRequest(endpoint, method = "GET", data) {
+  try {
+    const url = `${getApiBaseUrl()}${endpoint}`;
+    const options = {
+      method,
+      headers: getHeaders(),
+      credentials: "include"
+    };
+    if (data) {
+      options.body = JSON.stringify(data);
+    }
+    const response = await fetch(url, options);
+    const result = await response.json();
+    if (!response.ok) {
+      return { success: false, error: result.message || "An error occurred" };
+    }
+    return { success: true, data: result };
+  } catch (error) {
+    console.error("API request failed:", error);
+    return {
+      success: false,
+      error: error instanceof Error ? error.message : "Unknown error occurred"
+    };
+  }
+}
+var plansApi = {
+  getPlans: async () => {
+    return apiRequest(`${ENDPOINTS.PLANS}`);
+  },
+  getPlanByCode: (code, externalId, queryParams) => {
+    const params = new URLSearchParams({ planCode: code, externalId });
+    if (queryParams == null ? void 0 : queryParams.paymentMethodId) params.append("paymentMethodId", queryParams.paymentMethodId);
+    if (queryParams == null ? void 0 : queryParams.couponCode) params.append("couponCode", queryParams.couponCode);
+    return apiRequest(`${ENDPOINTS.PLANS}?${params.toString()}`);
+  },
+  // Create unified checkout session and get hosted checkout URL
+  createPaymentSession: async (planCode, options) => {
+    const customerEmail = (options == null ? void 0 : options.customerEmail) || localStorage.getItem("userEmail") || void 0;
+    const currency = (options == null ? void 0 : options.currency) || "USD";
+    const amount = options == null ? void 0 : options.amount;
+    const payload = {
+      planCode,
+      currency,
+      returnUrl: `${window.location.origin}/payment-success`,
+      cancelUrl: `${window.location.origin}/payment-cancel`
+    };
+    if (customerEmail) payload.customerEmail = customerEmail;
+    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`,
+      "POST",
+      payload
+    );
+    if (resp.success && resp.data && typeof resp.data === "object" && "data" in resp.data) {
+      return { success: true, data: resp.data.data };
+    }
+    return resp;
+  }
+};
+var checkoutApi = {
+  getCheckoutDetails: (planCode, queryParams) => {
+    const params = new URLSearchParams({ planCode });
+    if (queryParams == null ? void 0 : queryParams.externalId) params.append("externalId", queryParams.externalId);
+    if (queryParams == null ? void 0 : queryParams.paymentMethodId) params.append("paymentMethodId", queryParams.paymentMethodId);
+    if (queryParams == null ? void 0 : queryParams.couponCode) params.append("couponCode", queryParams.couponCode);
+    return apiRequest(`${ENDPOINTS.CHECKOUT}?${params.toString()}`);
+  }
+};
+var subscriptionApi = {
+  getActiveSubscription: async (externalId) => {
+    return apiRequest(`${ENDPOINTS.SUBSCRIPTION}/${externalId}`);
+  },
+  cancelSubscription: async (externalId, options) => {
+    let endpoint = `${ENDPOINTS.SUBSCRIPTION}/${externalId}`;
+    if (options) {
+      const params = new URLSearchParams();
+      if (options.cancellationMode) params.append("cancellationMode", options.cancellationMode);
+      if (options.cancellationReason) params.append("cancellationReason", options.cancellationReason);
+      if (params.toString()) {
+        endpoint += `?${params.toString()}`;
+      }
+    }
+    return apiRequest(endpoint, "DELETE");
+  }
+};
+var customerApi = {
+  getCustomer: (externalId) => apiRequest(`${ENDPOINTS.CUSTOMER}/${externalId}`)
+};
+var transactionApi = {
+  getTransactions: (externalId, filters) => {
+    let endpoint = `${ENDPOINTS.TRANSACTIONS}/${externalId}/history`;
+    if (filters) {
+      const params = new URLSearchParams();
+      if (filters.startDate) params.append("startDate", filters.startDate);
+      if (filters.endDate) params.append("endDate", filters.endDate);
+      if (filters.status) params.append("status", filters.status);
+      if (filters.page) params.append("page", filters.page.toString());
+      if (filters.limit) params.append("limit", filters.limit.toString());
+      if (params.toString()) {
+        endpoint += `?${params.toString()}`;
+      }
+    }
+    return apiRequest(endpoint);
+  },
+  getInvoice: (transactionId) => apiRequest(`${ENDPOINTS.TRANSACTIONS}/${transactionId}/invoice`)
+};
+var useEmailManagement = (onEmailValidated) => {
+  const [email, setEmail] = React3.useState(localStorage.getItem("userEmail") || "");
+  const [emailError, setEmailError] = React3.useState(null);
+  const [isEmailScreen, setIsEmailScreen] = React3.useState(!localStorage.getItem("userEmail"));
+  const validateEmail = (emailValue) => {
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return emailRegex.test(emailValue);
+  };
+  React3.useEffect(() => {
+    if (email) {
+      if (!validateEmail(email)) {
+        setEmailError("Please enter a valid email address");
+      } else {
+        onEmailValidated == null ? void 0 : onEmailValidated(email);
+      }
+    }
+  }, []);
+  const handleEmailSubmit = () => {
+    if (!validateEmail(email)) {
+      setEmailError("Please enter a valid email address");
+      return;
+    }
+    localStorage.setItem("userEmail", email);
+    setIsEmailScreen(false);
+    onEmailValidated == null ? void 0 : onEmailValidated(email);
+  };
+  const handleChangeEmail = () => {
+    localStorage.removeItem("userEmail");
+    setEmail("");
+    setIsEmailScreen(true);
+    setEmailError(null);
+  };
+  return {
+    email,
+    setEmail,
+    emailError,
+    setEmailError,
+    isEmailScreen,
+    setIsEmailScreen,
+    handleEmailSubmit,
+    handleChangeEmail,
+    validateEmail
+  };
+};
+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 (email) => {
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await subscriptionApi.getActiveSubscription(email);
+      if (response.success && response.data) {
+        setSubscription(response.data);
+      } else {
+        setError(response.error || "Failed to load subscription information");
+      }
+    } catch (err) {
+      console.error("Error fetching subscription:", err);
+      setError("Failed to load subscription information. Please try again later.");
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+  const clearSubscription = React3.useCallback(() => {
+    setSubscription(null);
+    setError(null);
+  }, []);
+  return {
+    subscription,
+    loading,
+    error,
+    fetchSubscription,
+    clearSubscription
+  };
+};
+
+// src/utils/planUtils.ts
+var getPlanFeatures = (plan) => {
+  const planName = plan.name.toLowerCase();
+  if (planName.includes("starter")) {
+    return [
+      "Import/Export User",
+      "Active Jobs",
+      "Text Change Module",
+      "Employers Auto Approval",
+      "Create Page in Manage Portal",
+      "Multi Select Master with action button"
+    ];
+  } else if (planName.includes("growth")) {
+    return [
+      "Resume Builder",
+      "Custom Email Body",
+      "View Candidate Resume",
+      "Advanced Analytics",
+      "Priority Support",
+      "Custom Branding"
+    ];
+  } else if (planName.includes("scale")) {
+    return [
+      "AI-Powered Matching",
+      "Advanced Reporting",
+      "API Access",
+      "White-label Solution",
+      "Dedicated Account Manager",
+      "Custom Integrations"
+    ];
+  }
+  const features = [];
+  if (plan.charges && plan.charges.length > 0) {
+    plan.charges.forEach((charge) => {
+      var _a;
+      if ((_a = charge.billableMetric) == null ? void 0 : _a.name) {
+        features.push(charge.billableMetric.name);
+      }
+    });
+  }
+  return features.length > 0 ? features : ["Core features included"];
+};
+var getCandidateUnits = (plan) => {
+  var _a;
+  if (plan.charges && plan.charges.length > 0) {
+    const candidateCharge = plan.charges.find(
+      (charge) => charge.billableMetric && charge.billableMetric.code === "CANDIDATES"
+    );
+    const units = (_a = candidateCharge == null ? void 0 : candidateCharge.properties) == null ? void 0 : _a.units;
+    if (typeof units === "number" && Number.isFinite(units)) {
+      return units;
+    }
+  }
+  return 0;
+};
+var getUniqueCandidateUnits = (plans) => {
+  const unitsSet = /* @__PURE__ */ new Set();
+  plans.forEach((plan) => {
+    plan.charges.forEach((charge) => {
+      var _a, _b;
+      if (((_a = charge.billableMetric) == null ? void 0 : _a.code) === "CANDIDATES") {
+        const units = (_b = charge.properties) == null ? void 0 : _b.units;
+        if (typeof units === "number" && Number.isFinite(units)) {
+          unitsSet.add(units);
+        }
+      }
+    });
+  });
+  return Array.from(unitsSet).sort((a, b) => a - b);
+};
+var getDropdownOptions = (plans) => {
+  const options = [];
+  const uniqueUnits = getUniqueCandidateUnits(plans);
+  uniqueUnits.forEach((units) => {
+    options.push({
+      value: units.toString(),
+      label: `Up to ${units.toLocaleString()} Candidates`,
+      candidates: units
+    });
+  });
+  return options;
+};
+var getCurrentSelectionText = (tierFilter, plans) => {
+  const options = getDropdownOptions(plans);
+  const currentOption = options.find((option) => option.value === tierFilter);
+  if (!currentOption) {
+    const units = parseInt(tierFilter);
+    if (!isNaN(units)) {
+      return `Up to ${units.toLocaleString()} Candidates`;
+    }
+    return options.length > 0 ? options[0].label : "";
+  }
+  return currentOption.label;
+};
+var filterPlansByBillingCycle = (plans, billingCycle) => {
+  return plans.filter((plan) => {
+    const planInterval = plan.interval.toLowerCase();
+    if (billingCycle === "monthly") {
+      return planInterval === "month" || planInterval === "monthly";
+    } else {
+      return planInterval === "year" || planInterval === "yearly";
+    }
+  });
+};
+var filterPlansByTier = (plans, tierFilter) => {
+  if (tierFilter === "all") {
+    return plans;
+  }
+  const targetUnits = parseInt(tierFilter);
+  return plans.filter((plan) => {
+    var _a, _b;
+    const planNameLc = ((_b = (_a = plan.name) == null ? void 0 : _a.toLowerCase) == null ? void 0 : _b.call(_a)) || "";
+    if (planNameLc.includes("starter")) return true;
+    const planCandidateUnits = getCandidateUnits(plan);
+    return planCandidateUnits === targetUnits;
+  });
+};
+var isPlanPopular = (plan) => {
+  const planName = plan.name.toLowerCase();
+  return planName.includes("growth");
+};
+var getPlanDescription = (plan) => {
+  const planName = plan.name.toLowerCase();
+  if (planName.includes("starter") || planName.includes("basic")) {
+    return "Ideal for solopreneurs looking to start their niche job board journey.";
+  } else if (planName.includes("growth") || planName.includes("pro")) {
+    return "Ideal for creators launching their job board with powerful features and built-in scalability.";
+  } else {
+    return "Perfect for creators ready to run a full-scale, smart hiring engine with AI and advanced capabilities.";
+  }
+};
+var formatDate = (dateString) => {
+  const date = new Date(dateString);
+  return new Intl.DateTimeFormat("en-US", {
+    year: "numeric",
+    month: "short",
+    day: "numeric"
+  }).format(date);
+};
+
+// 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 () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await plansApi.getPlans();
+      if (response.success && response.data) {
+        const data = response.data;
+        setPlans(data);
+        setFilteredPlans(data);
+      } else {
+        setError(response.error || "Failed to load plan information");
+      }
+    } catch (err) {
+      console.error("Error fetching plans:", err);
+      setError("Failed to load plan information. Please try again later.");
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+  React3.useEffect(() => {
+    if (plans.length > 0 && tierFilter === "all") {
+      const uniqueUnits = getUniqueCandidateUnits(plans);
+      if (uniqueUnits.length > 0) {
+        setTierFilter(uniqueUnits[0].toString());
+      }
+    }
+  }, [plans, tierFilter]);
+  React3.useEffect(() => {
+    let filtered = [...plans];
+    filtered = filterPlansByBillingCycle(filtered, billingCycle);
+    filtered = filterPlansByTier(filtered, tierFilter);
+    setFilteredPlans(filtered);
+  }, [plans, tierFilter, billingCycle]);
+  const handlePlanSelect = React3.useCallback((plan) => {
+    setSelectedPlan(plan);
+  }, []);
+  const handleUpgrade = React3.useCallback(async (email) => {
+    var _a;
+    if (!selectedPlan) return;
+    try {
+      const response = await plansApi.createPaymentSession(selectedPlan.code, {
+        customerEmail: email || void 0
+      });
+      if (response.success && ((_a = response.data) == null ? void 0 : _a.checkoutUrl)) {
+        window.location.href = response.data.checkoutUrl;
+      } else {
+        console.error("Failed to create payment session:", response.error);
+        alert("Failed to initiate payment. Please try again.");
+      }
+    } catch (error2) {
+      console.error("Error creating payment session:", error2);
+      alert("An error occurred. Please try again.");
+    }
+  }, [selectedPlan]);
+  const clearPlans = React3.useCallback(() => {
+    setPlans([]);
+    setFilteredPlans([]);
+    setSelectedPlan(null);
+    setError(null);
+    setTierFilter("all");
+  }, []);
+  const dropdownOptions = getDropdownOptions(plans);
+  const currentSelectionText = getCurrentSelectionText(tierFilter, plans);
+  return {
+    // Data
+    plans,
+    filteredPlans,
+    selectedPlan,
+    // Filters
+    tierFilter,
+    billingCycle,
+    // Loading and error states
+    loading,
+    error,
+    // Actions
+    fetchPlans,
+    setSelectedPlan,
+    setTierFilter,
+    setBillingCycle,
+    clearPlans,
+    // Computed values
+    dropdownOptions,
+    currentSelectionText,
+    // Plan operations
+    handlePlanSelect,
+    handleUpgrade
+  };
+};
+var DEFAULT_FILTERS = {
+  page: 1,
+  limit: 10
+};
+var applyFrontendFilters = (transactions, filters) => {
+  console.log("applyFrontendFilters input:", { transactions: transactions.length, filters });
+  let filtered = [...transactions];
+  if (filters.status && filters.status.trim() !== "") {
+    console.log("Applying status filter:", filters.status);
+    filtered = filtered.filter(
+      (transaction) => {
+        var _a;
+        return transaction.transactionStatus.toLowerCase() === ((_a = filters.status) == null ? void 0 : _a.toLowerCase());
+      }
+    );
+    console.log("After status filter:", filtered.length);
+  }
+  if (filters.startDate && filters.startDate.trim() !== "") {
+    console.log("Applying start date filter:", filters.startDate);
+    const startDate = new Date(filters.startDate);
+    filtered = filtered.filter((transaction) => {
+      const transactionDate = new Date(transaction.transactionDate || transaction.membershipDate);
+      return transactionDate >= startDate;
+    });
+    console.log("After start date filter:", filtered.length);
+  }
+  if (filters.endDate && filters.endDate.trim() !== "") {
+    console.log("Applying end date filter:", filters.endDate);
+    const endDate = new Date(filters.endDate);
+    filtered = filtered.filter((transaction) => {
+      const transactionDate = new Date(transaction.transactionDate || transaction.membershipDate);
+      return transactionDate <= endDate;
+    });
+    console.log("After end date filter:", filtered.length);
+  }
+  console.log("applyFrontendFilters output:", filtered.length);
+  return filtered;
+};
+var applyFrontendPagination = (transactions, filters) => {
+  const currentPage = filters.page || 1;
+  const limit = filters.limit || 10;
+  const startIndex = (currentPage - 1) * limit;
+  const endIndex = startIndex + limit;
+  const paginatedTransactions = transactions.slice(startIndex, endIndex);
+  console.log("applyFrontendPagination:", {
+    totalTransactions: transactions.length,
+    currentPage,
+    limit,
+    startIndex,
+    endIndex,
+    paginatedCount: paginatedTransactions.length
+  });
+  return {
+    data: paginatedTransactions,
+    meta: {
+      currentPage,
+      totalPages: Math.ceil(transactions.length / limit),
+      totalItems: transactions.length,
+      itemsPerPage: limit,
+      hasNextPage: endIndex < transactions.length,
+      hasPreviousPage: currentPage > 1
+    }
+  };
+};
+var useTransactions = ({
+  externalId,
+  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({
+    ...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 () => {
+    if (!externalId) return;
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await transactionApi.getTransactions(
+        externalId,
+        filters
+      );
+      if (response.success && response.data) {
+        console.log("API Response successful, data type:", Array.isArray(response.data) ? "Array" : "Object");
+        console.log("Raw API data:", response.data);
+        if (Array.isArray(response.data)) {
+          console.log("Processing non-paginated response with", response.data.length, "transactions");
+          setIsBackendPaginated(false);
+          setAllTransactions(response.data);
+          console.log("TEMP: Skipping filters, showing all data directly");
+          setTransactions(response.data);
+          setMeta({
+            currentPage: 1,
+            totalPages: 1,
+            totalItems: response.data.length,
+            itemsPerPage: response.data.length,
+            hasNextPage: false,
+            hasPreviousPage: false
+          });
+        } else {
+          setIsBackendPaginated(true);
+          const paginatedData = response.data;
+          setTransactions(paginatedData.data);
+          setMeta(paginatedData.meta);
+          setAllTransactions([]);
+        }
+      } else {
+        setError(response.error || "Failed to fetch transactions");
+        setTransactions([]);
+        setAllTransactions([]);
+        setMeta(null);
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "An unexpected error occurred");
+      setTransactions([]);
+      setAllTransactions([]);
+      setMeta(null);
+    } finally {
+      setLoading(false);
+    }
+  }, [externalId, filters]);
+  const updateFilters = React3.useCallback((newFilters) => {
+    setFilters((prev) => ({
+      ...prev,
+      ...newFilters,
+      // Reset to page 1 when filters change (except when explicitly setting page)
+      page: newFilters.page !== void 0 ? newFilters.page : 1
+    }));
+  }, []);
+  React3.useEffect(() => {
+    if (!isBackendPaginated && allTransactions.length > 0) {
+      const filteredTransactions = applyFrontendFilters(allTransactions, filters);
+      const paginatedResult = applyFrontendPagination(filteredTransactions, filters);
+      setTransactions(paginatedResult.data);
+      setMeta(paginatedResult.meta);
+    }
+  }, [filters, allTransactions, isBackendPaginated]);
+  const clearFilters = React3.useCallback(() => {
+    setFilters(DEFAULT_FILTERS);
+  }, []);
+  const refetch = React3.useCallback(async () => {
+    await fetchTransactions();
+  }, [fetchTransactions]);
+  React3.useEffect(() => {
+    if (autoFetch && externalId && !hasAutoFetchedRef.current) {
+      hasAutoFetchedRef.current = true;
+      fetchTransactions();
+    }
+  }, [autoFetch, externalId]);
+  React3.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;
+    if (shouldFetch) {
+      const timeoutId = setTimeout(() => {
+        fetchTransactions();
+      }, 300);
+      return () => clearTimeout(timeoutId);
+    }
+  }, [filters, fetchTransactions, autoFetch, isBackendPaginated, allTransactions.length]);
+  return {
+    transactions,
+    loading,
+    error,
+    filters,
+    meta,
+    fetchTransactions,
+    updateFilters,
+    clearFilters,
+    refetch
+  };
+};
+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) => {
+    if (meta) {
+      const validPage = Math.max(1, Math.min(page, meta.totalPages));
+      setCurrentPage(validPage);
+    } else {
+      setCurrentPage(Math.max(1, page));
+    }
+  }, [meta]);
+  const goToNextPage = React3.useCallback(() => {
+    if (meta && meta.hasNextPage) {
+      setCurrentPage((prev) => prev + 1);
+    }
+  }, [meta]);
+  const goToPreviousPage = React3.useCallback(() => {
+    if (meta && meta.hasPreviousPage) {
+      setCurrentPage((prev) => prev - 1);
+    }
+  }, [meta]);
+  const goToFirstPage = React3.useCallback(() => {
+    setCurrentPage(1);
+  }, []);
+  const goToLastPage = React3.useCallback(() => {
+    if (meta) {
+      setCurrentPage(meta.totalPages);
+    }
+  }, [meta]);
+  const setLimit = React3.useCallback((newLimit) => {
+    setLimitState(newLimit);
+    setCurrentPage(1);
+  }, []);
+  const reset = React3.useCallback(() => {
+    setCurrentPage(initialPage);
+    setLimitState(initialLimit);
+    setMeta(null);
+  }, [initialPage, initialLimit]);
+  return {
+    currentPage,
+    limit,
+    meta,
+    goToPage,
+    goToNextPage,
+    goToPreviousPage,
+    goToFirstPage,
+    goToLastPage,
+    setLimit,
+    setMeta,
+    reset
+  };
+};
+var useCancelSubscription = ({
+  onSuccess,
+  onError
+} = {}) => {
+  const [loading, setLoading] = React3.useState(false);
+  const [error, setError] = React3.useState(null);
+  const cancelSubscription = React3.useCallback(async (externalId, options) => {
+    if (!externalId) {
+      const errorMsg = "External ID is required";
+      setError(errorMsg);
+      onError == null ? void 0 : onError(errorMsg);
+      return false;
+    }
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await subscriptionApi.cancelSubscription(externalId, options);
+      if (response.success) {
+        onSuccess == null ? void 0 : onSuccess();
+        return true;
+      } else {
+        const errorMsg = response.error || "Failed to cancel subscription";
+        setError(errorMsg);
+        onError == null ? void 0 : onError(errorMsg);
+        return false;
+      }
+    } catch (err) {
+      const errorMsg = err instanceof Error ? err.message : "An unexpected error occurred";
+      setError(errorMsg);
+      onError == null ? void 0 : onError(errorMsg);
+      return false;
+    } finally {
+      setLoading(false);
+    }
+  }, [onSuccess, onError]);
+  const reset = React3.useCallback(() => {
+    setLoading(false);
+    setError(null);
+  }, []);
+  return {
+    loading,
+    error,
+    cancelSubscription,
+    reset
+  };
+};
+async function apiRequest2(endpoint, method = "GET", data) {
+  try {
+    const url = `${getApiBaseUrl()}${endpoint}`;
+    const options = {
+      method,
+      headers: getHeaders(),
+      credentials: "include"
+    };
+    if (data) {
+      options.body = JSON.stringify(data);
+    }
+    const response = await fetch(url, options);
+    const result = await response.json();
+    if (!response.ok) {
+      return { success: false, error: result.message || "An error occurred" };
+    }
+    return { success: true, data: result };
+  } catch (error) {
+    console.error("API request failed:", error);
+    return {
+      success: false,
+      error: error instanceof Error ? error.message : "Unknown error occurred"
+    };
+  }
+}
+var useCustomerPortal = ({
+  onSuccess,
+  onError
+} = {}) => {
+  const [loading, setLoading] = React3.useState(false);
+  const [error, setError] = React3.useState(null);
+  const openCustomerPortal = React3.useCallback(async (externalId) => {
+    var _a;
+    if (!externalId) {
+      const errorMsg = "External ID is required";
+      setError(errorMsg);
+      onError == null ? void 0 : onError(errorMsg);
+      return false;
+    }
+    setLoading(true);
+    setError(null);
+    try {
+      const returnUrl = `${window.location.origin}/dashboard`;
+      const response = await apiRequest2(
+        `${ENDPOINTS.CUSTOMER}/${externalId}/portal`,
+        "POST",
+        { returnUrl }
+      );
+      const portalResponse = response.data;
+      const portalUrl = ((_a = portalResponse == null ? void 0 : portalResponse.data) == null ? void 0 : _a.url) ?? (portalResponse == null ? void 0 : portalResponse.url);
+      if (response.success && portalUrl) {
+        onSuccess == null ? void 0 : onSuccess(portalUrl);
+        window.location.href = portalUrl;
+        return true;
+      } else {
+        const errorMsg = response.error || (portalResponse == null ? void 0 : portalResponse.error) || (portalResponse == null ? void 0 : portalResponse.message) || "Failed to open customer portal";
+        setError(errorMsg);
+        onError == null ? void 0 : onError(errorMsg);
+        return false;
+      }
+    } catch (err) {
+      const errorMsg = err instanceof Error ? err.message : "An unexpected error occurred";
+      setError(errorMsg);
+      onError == null ? void 0 : onError(errorMsg);
+      return false;
+    } finally {
+      setLoading(false);
+    }
+  }, [onSuccess, onError]);
+  const reset = React3.useCallback(() => {
+    setLoading(false);
+    setError(null);
+  }, []);
+  return {
+    loading,
+    error,
+    openCustomerPortal,
+    reset
+  };
+};
+var BillingCycleToggle = ({
+  billingCycle,
+  onBillingCycleChange
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex bg-gray-100 rounded-lg p-1", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onClick: () => onBillingCycleChange("monthly"),
+        className: `px-4 py-2 rounded-md text-sm font-medium transition-colors ${billingCycle === "monthly" ? "bg-white text-gray-900 shadow-sm" : "text-gray-600 hover:text-gray-900"}`,
+        children: "Monthly"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onClick: () => onBillingCycleChange("yearly"),
+        className: `px-4 py-2 rounded-md text-sm font-medium transition-colors ${billingCycle === "yearly" ? "bg-green-600 text-white shadow-sm" : "text-gray-600 hover:text-gray-900"}`,
+        children: "Yearly"
+      }
+    )
+  ] });
+};
+var TierFilterDropdown = ({
+  isOpen,
+  onToggle,
+  currentSelectionText,
+  options,
+  selectedValue,
+  onSelect
+}) => {
+  const dropdownRef = React3.useRef(null);
+  React3.useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        if (isOpen) {
+          onToggle();
+        }
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isOpen, onToggle]);
+  const handleOptionSelect = (value) => {
+    onSelect(value);
+    onToggle();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", ref: dropdownRef, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        onClick: onToggle,
+        className: "w-full max-w-xs px-4 py-3 border border-gray-300 rounded-lg bg-white text-left focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500 flex items-center justify-between hover:border-gray-400 transition-colors",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-700", children: currentSelectionText }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "svg",
+            {
+              className: `w-5 h-5 text-gray-400 transition-transform ${isOpen ? "rotate-180" : ""}`,
+              fill: "none",
+              stroke: "currentColor",
+              viewBox: "0 0 24 24",
+              children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })
+            }
+          )
+        ]
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-full left-0 w-full max-w-xs mt-1 bg-white border border-gray-200 rounded-lg shadow-lg z-50", children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onClick: () => handleOptionSelect(option.value),
+        className: `w-full px-4 py-3 text-left hover:bg-gray-50 transition-colors border-b border-gray-100 last:border-b-0 first:rounded-t-lg last:rounded-b-lg ${selectedValue === option.value ? "bg-green-50 text-green-700" : "text-gray-700"}`,
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: option.label }) })
+      },
+      option.value
+    )) })
+  ] });
+};
+var CheckIcon = ({ className = "w-5 h-5" }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      className,
+      fill: "currentColor",
+      viewBox: "0 0 20 20",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          fillRule: "evenodd",
+          d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z",
+          clipRule: "evenodd"
+        }
+      )
+    }
+  );
+};
+var PlanCard = ({
+  plan,
+  isSelected,
+  billingCycle,
+  onSelect,
+  isActive = false
+}) => {
+  const features = getPlanFeatures(plan);
+  const description = getPlanDescription(plan);
+  const isPopular = isPlanPopular(plan);
+  const isFree = Number(plan.fixedCost) === 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      onClick: isFree || isActive ? void 0 : () => onSelect(plan),
+      className: `relative border rounded-lg p-6 transition-all ${!isFree && !isActive ? "cursor-pointer" : "cursor-default"} ${!isFree && isSelected && !isActive ? "border-green-500 bg-green-50" : "border-gray-200"} ${!isFree && !isActive ? "hover:border-gray-300" : ""} ${isPopular ? "border-green-500" : ""}`,
+      children: [
+        isPopular && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -top-3 left-1/2 transform -translate-x-1/2", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bg-green-500 text-white px-3 py-1 rounded-full text-xs font-medium", children: "Most Popular" }) }),
+        !isFree && isSelected && !isActive && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-4 right-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-green-500 text-white rounded-full p-1", children: /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { className: "w-4 h-4" }) }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-xl font-bold text-gray-900 mb-2", children: plan.name }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-600 text-sm mb-4", children: description }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: isFree ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-3xl font-bold text-gray-900", children: "Free" }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-3xl font-bold text-gray-900", children: [
+              "$",
+              plan.fixedCost
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-gray-600 ml-1", children: [
+              "per ",
+              billingCycle === "yearly" ? "year" : "month"
+            ] })
+          ] }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-2 mb-6", children: features.map((feature, index) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex items-center text-sm", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { className: "w-4 h-4 text-green-500 mr-2 flex-shrink-0" }),
+          feature
+        ] }, index)) }),
+        !isFree && (isActive ? /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            className: "w-full bg-gray-100 border border-gray-200 text-gray-500 py-2 px-4 rounded-md font-medium cursor-default",
+            disabled: true,
+            children: "Active"
+          }
+        ) : isSelected ? /* @__PURE__ */ jsxRuntime.jsx("button", { className: "w-full bg-green-600 text-white py-2 px-4 rounded-md font-medium", children: "Selected" }) : /* @__PURE__ */ jsxRuntime.jsx("button", { className: "w-full bg-white border border-gray-300 text-gray-700 py-2 px-4 rounded-md font-medium hover:bg-gray-50", children: "Select" }))
+      ]
+    }
+  );
+};
+var SearchIcon = ({ className = "w-5 h-5" }) => /* @__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: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) });
+var FilterIcon = ({ className = "w-5 h-5" }) => /* @__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: "M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" }) });
+var TrendingUpIcon = ({ className = "w-5 h-5" }) => /* @__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: "M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" }) });
+var LoadingSpinner = ({ className = "w-8 h-8" }) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: `${className} animate-spin`, fill: "none", viewBox: "0 0 24 24", children: [
+  /* @__PURE__ */ jsxRuntime.jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })
+] });
+var CheckCircleIcon = ({ className = "w-5 h-5" }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { className, fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z", clipRule: "evenodd" }) });
+var AddIcon = ({ className = "w-5 h-5" }) => /* @__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 4v16m8-8H4" }) });
+var CreditCardIcon = ({ className = "w-5 h-5" }) => /* @__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: "M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" }) });
+var DeleteIcon = ({ className = "w-5 h-5" }) => /* @__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: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" }) });
+var DownloadIcon = ({ className = "w-5 h-5" }) => /* @__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 DashboardIcon = ({ className = "w-5 h-5" }) => /* @__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: "M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" }) });
+var EmailIcon = ({ className = "w-5 h-5" }) => /* @__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: "M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" }) });
+var ReceiptIcon = ({ className = "w-5 h-5" }) => /* @__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: "M9 12h6m-6 4h6m2 5l-5-5-4 4-3-3m6-6V4a2 2 0 00-2-2H5a2 2 0 00-2 2v16l3-3 3 3 3-3 3 3z" }) });
+var StarBorderIcon = ({ className = "w-5 h-5" }) => /* @__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: "M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" }) });
+var UpgradeIcon = ({ className = "w-5 h-5" }) => /* @__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: "M5 10l7-7m0 0l7 7m-7-7v18" }) });
+var CancelIcon = ({ className = "w-5 h-5" }) => /* @__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: "M6 18L18 6M6 6l12 12" }) });
+var AddCardIcon = ({ className = "w-5 h-5" }) => /* @__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 6v6m0 0v6m0-6h6m-6 0H6m12-3h3a3 3 0 013 3v8a3 3 0 01-3 3H6a3 3 0 01-3-3v-8a3 3 0 013-3h3" }) });
+var PlansGrid = ({
+  plans,
+  selectedPlan,
+  billingCycle,
+  loading,
+  error,
+  onPlanSelect,
+  activePlanCode
+}) => {
+  if (loading) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center py-8", children: /* @__PURE__ */ jsxRuntime.jsx(LoadingSpinner, { className: "h-10 w-10 text-primary animate-spin" }) });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 bg-red-50 border border-red-200 text-red-700 rounded-md", children: error });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-6", children: plans.map((plan) => /* @__PURE__ */ jsxRuntime.jsx(
+    PlanCard,
+    {
+      plan,
+      isSelected: (selectedPlan == null ? void 0 : selectedPlan.id) === plan.id,
+      billingCycle,
+      onSelect: onPlanSelect,
+      isActive: activePlanCode ? plan.code === activePlanCode : false
+    },
+    plan.id
+  )) });
+};
+var PlanSelector = ({
+  plans,
+  selectedPlan,
+  tierFilter,
+  billingCycle,
+  loading,
+  error,
+  dropdownOptions,
+  currentSelectionText,
+  onPlanSelect,
+  onTierFilterChange,
+  onBillingCycleChange,
+  activePlanCode
+}) => {
+  const [isDropdownOpen, setIsDropdownOpen] = React3.useState(false);
+  const handleDropdownToggle = () => {
+    setIsDropdownOpen(!isDropdownOpen);
+  };
+  const handleTierSelect = (value) => {
+    onTierFilterChange(value);
+    setIsDropdownOpen(false);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold mb-2", children: "Upgrade your plan" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4 justify-between flex-wrap mb-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-600 mb-0 flex-1 min-w-[260px]", children: "Enhance your experience with exclusive access - unlock more features and possibilities!" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          TierFilterDropdown,
+          {
+            isOpen: isDropdownOpen,
+            onToggle: handleDropdownToggle,
+            currentSelectionText,
+            options: dropdownOptions,
+            selectedValue: tierFilter,
+            onSelect: handleTierSelect
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          BillingCycleToggle,
+          {
+            billingCycle,
+            onBillingCycleChange
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      PlansGrid,
+      {
+        plans,
+        selectedPlan,
+        billingCycle,
+        loading,
+        error,
+        onPlanSelect,
+        activePlanCode
+      }
+    )
+  ] });
+};
+var ChangeCardButton = ({
+  externalId,
+  className = "",
+  children,
+  onSuccess,
+  onError
+}) => {
+  const { loading, openCustomerPortal } = useCustomerPortal({
+    onSuccess: (url) => {
+      console.log("Customer portal opened:", url);
+      onSuccess == null ? void 0 : onSuccess();
+    },
+    onError: (error) => {
+      console.error("Failed to open customer portal:", error);
+      onError == null ? void 0 : onError(error);
+    }
+  });
+  const handleClick = async () => {
+    await openCustomerPortal(externalId);
+  };
+  const defaultClassName = "text-sm text-blue-600 font-medium hover:text-blue-700 hover:underline disabled:opacity-50 disabled:cursor-not-allowed";
+  const finalClassName = className || defaultClassName;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      onClick: handleClick,
+      disabled: loading,
+      className: finalClassName,
+      type: "button",
+      children: loading ? "Opening..." : children || "Change Card"
+    }
+  );
+};
+var PaymentCancelView = ({ details }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-md mx-auto bg-white rounded-lg shadow-md overflow-hidden", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-gradient-to-r from-orange-500 to-red-500 text-white p-6 text-center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-4xl mb-2", children: "\u274C" }),
+      /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-2xl font-bold", children: "Payment Cancelled" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-orange-100 mt-1", children: "Your payment was not processed" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-gray-900 mb-4", children: "What Happened?" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 bg-orange-50 rounded-lg mb-4", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-orange-800", children: details.reason ? `Reason: ${details.reason}` : "You cancelled the payment process before it was completed. No charges were made to your account." }) }),
+        (details.gateway || details.sessionId) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3 mb-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-medium text-gray-900", children: "Transaction Details" }),
+          details.gateway && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-600", children: "Payment Gateway" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium capitalize", children: details.gateway })
+          ] }),
+          details.sessionId && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-600", children: "Session ID" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium font-mono text-sm", children: details.sessionId })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-600", children: "Status" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-orange-600", children: "Cancelled" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-600", children: "Date" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: (/* @__PURE__ */ new Date()).toLocaleDateString() })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6 p-4 bg-blue-50 rounded-lg", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-semibold text-blue-900 mb-2", children: "What's Next?" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: "text-sm text-blue-800 space-y-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("li", { children: "\u2022 No charges were made to your account" }),
+          /* @__PURE__ */ jsxRuntime.jsx("li", { children: "\u2022 You can try the payment again anytime" }),
+          /* @__PURE__ */ jsxRuntime.jsx("li", { children: "\u2022 Contact support if you need assistance" }),
+          /* @__PURE__ */ jsxRuntime.jsx("li", { children: "\u2022 Your cart/selection is still saved" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => window.history.back(),
+            className: "w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-4 rounded-md transition-colors",
+            children: "Try Payment Again"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => window.location.href = "/dashboard",
+            className: "w-full bg-gray-100 hover:bg-gray-200 text-gray-700 font-medium py-3 px-4 rounded-md transition-colors",
+            children: "Browse Plans"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => window.location.href = "/",
+            className: "w-full bg-gray-100 hover:bg-gray-200 text-gray-700 font-medium py-3 px-4 rounded-md transition-colors",
+            children: "Return Home"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-6 text-center", children: /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-gray-500", children: [
+        "Having trouble?",
+        " ",
+        /* @__PURE__ */ jsxRuntime.jsx("a", { href: "/support", className: "text-blue-600 hover:text-blue-700", children: "Contact Support" })
+      ] }) })
+    ] })
+  ] });
+};
+var PaymentCancelView_default = PaymentCancelView;
+var PaymentSuccessView = ({ details }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-md mx-auto bg-white rounded-lg shadow-md overflow-hidden", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-gradient-to-r from-green-500 to-green-600 text-white p-6 text-center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-4xl mb-2", children: "\u2705" }),
+      /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-2xl font-bold", children: "Payment Successful!" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-green-100 mt-1", children: "Thank you for your purchase" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-gray-900 mb-4", children: "Payment Details" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+          details.gateway && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-600", children: "Payment Gateway" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium capitalize", children: details.gateway })
+          ] }),
+          details.sessionId && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-600", children: "Session ID" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium font-mono text-sm", children: details.sessionId })
+          ] }),
+          details.paymentId && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-600", children: "Payment ID" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium font-mono text-sm", children: details.paymentId })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-600", children: "Status" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-green-600", children: "Completed" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-600", children: "Date" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: (/* @__PURE__ */ new Date()).toLocaleDateString() })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6 p-4 bg-blue-50 rounded-lg", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-semibold text-blue-900 mb-2", children: "What's Next?" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: "text-sm text-blue-800 space-y-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("li", { children: "\u2022 You'll receive a confirmation email shortly" }),
+          /* @__PURE__ */ jsxRuntime.jsx("li", { children: "\u2022 Your subscription/purchase is now active" }),
+          /* @__PURE__ */ jsxRuntime.jsx("li", { children: "\u2022 Access your dashboard to manage your account" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => window.location.href = "/dashboard",
+            className: "w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-4 rounded-md transition-colors",
+            children: "Go to Dashboard"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => window.location.href = "/",
+            className: "w-full bg-gray-100 hover:bg-gray-200 text-gray-700 font-medium py-3 px-4 rounded-md transition-colors",
+            children: "Return Home"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-6 text-center", children: /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-gray-500", children: [
+        "Need help?",
+        " ",
+        /* @__PURE__ */ jsxRuntime.jsx("a", { href: "/support", className: "text-blue-600 hover:text-blue-700", children: "Contact Support" })
+      ] }) })
+    ] })
+  ] });
+};
+var PaymentSuccessView_default = PaymentSuccessView;
+var getStatusColor = (status) => {
+  switch (status.toLowerCase()) {
+    case "activated":
+    case "succeeded":
+    case "renewed":
+    case "use_stripe_sdk":
+      return "bg-green-100 text-green-800";
+    case "pending":
+    case "processing":
+      return "bg-yellow-100 text-yellow-800";
+    case "payment_failed":
+      return "bg-red-100 text-red-800";
+    default:
+      return "bg-blue-100 text-blue-800";
+  }
+};
+var formatCurrency = (amount, currency = "USD") => {
+  const numericAmount = typeof amount === "string" ? parseFloat(amount) : amount;
+  return new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency
+  }).format(numericAmount);
+};
+var TransactionList = ({
+  transactions,
+  loading = false,
+  error = null,
+  onInvoiceClick,
+  className = ""
+}) => {
+  console.log("=== TransactionList Render ===");
+  console.log("transactions:", transactions);
+  console.log("transactions.length:", transactions.length);
+  console.log("First transaction:", transactions[0]);
+  console.log("loading:", loading);
+  console.log("error:", error);
+  console.log("=== End TransactionList Debug ===");
+  if (loading) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex items-center justify-center py-8 ${className}`, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-primary" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2 text-gray-600", children: "Loading transactions..." })
+    ] });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `bg-red-50 border border-red-200 rounded-md p-4 ${className}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "h-5 w-5 text-red-400", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          fillRule: "evenodd",
+          d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z",
+          clipRule: "evenodd"
+        }
+      ) }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ml-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-medium text-red-800", children: "Error loading transactions" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 text-sm text-red-700", children: error })
+      ] })
+    ] }) });
+  }
+  if (transactions.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `text-center py-8 ${className}`, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "svg",
+        {
+          className: "mx-auto h-12 w-12 text-gray-400",
+          fill: "none",
+          viewBox: "0 0 24 24",
+          stroke: "currentColor",
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            "path",
+            {
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              strokeWidth: 2,
+              d: "M9 12h6m-6 4h6m2 5H7a2 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"
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mt-2 text-sm font-medium text-gray-900", children: "No transactions found" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-gray-500", children: "There are no transactions to display." })
+    ] });
+  }
+  console.log("About to render transactions, count:", transactions.length);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `bg-white shadow overflow-hidden sm:rounded-md ${className}`, children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "divide-y divide-gray-200", children: transactions.map((transaction, index) => {
+    var _a;
+    console.log(`Rendering transaction ${index}:`, transaction);
+    return /* @__PURE__ */ jsxRuntime.jsx("li", { className: "px-6 py-4 hover:bg-gray-50", 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) })
+        ] }),
+        /* @__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 font-medium text-gray-900", children: formatCurrency(transaction.amount, (_a = transaction.currency) == null ? void 0 : _a.toUpperCase()) }),
+            transaction.tax && transaction.tax > 0 && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-gray-500", children: [
+              "Tax: ",
+              formatCurrency(transaction.tax)
+            ] }),
+            transaction.charge && parseFloat(transaction.charge.toString()) > 0 && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-gray-500", children: [
+              "Charge: ",
+              formatCurrency(transaction.charge)
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: `inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getStatusColor(
+                transaction.transactionStatus
+              )}`,
+              children: transaction.transactionStatus
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center text-sm text-gray-500 flex-wrap gap-4", children: [
+          transaction.paymentGateway && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+            "Gateway: ",
+            transaction.paymentGateway
+          ] }),
+          transaction.planInterval && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+            "Billing: ",
+            transaction.planInterval
+          ] }),
+          transaction.expiryDate && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+            "Expires: ",
+            formatDate(transaction.expiryDate)
+          ] }),
+          transaction.isPlanActive !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: transaction.isPlanActive ? "text-green-600" : "text-red-600", children: transaction.isPlanActive ? "Active" : "Inactive" })
+        ] }),
+        transaction.invoiceUrl && onInvoiceClick && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => onInvoiceClick(transaction.id),
+            className: "text-sm text-primary hover:text-primary-dark font-medium",
+            children: "View Invoice"
+          }
+        )
+      ] })
+    ] }) }) }, transaction.id);
+  }) }) });
+};
+var Pagination = ({
+  meta,
+  onPageChange,
+  onLimitChange,
+  showLimitSelector = true,
+  limitOptions = [10, 25, 50, 100],
+  className = ""
+}) => {
+  const { currentPage, totalPages, totalItems, itemsPerPage, hasNextPage, hasPreviousPage } = meta;
+  const getPageNumbers = () => {
+    const pages = [];
+    const maxVisiblePages = 7;
+    if (totalPages <= maxVisiblePages) {
+      for (let i = 1; i <= totalPages; i++) {
+        pages.push(i);
+      }
+    } else {
+      pages.push(1);
+      if (currentPage > 4) {
+        pages.push("...");
+      }
+      const start = Math.max(2, currentPage - 1);
+      const end = Math.min(totalPages - 1, currentPage + 1);
+      for (let i = start; i <= end; i++) {
+        if (i !== 1 && i !== totalPages) {
+          pages.push(i);
+        }
+      }
+      if (currentPage < totalPages - 3) {
+        pages.push("...");
+      }
+      if (totalPages > 1) {
+        pages.push(totalPages);
+      }
+    }
+    return pages;
+  };
+  const pageNumbers = getPageNumbers();
+  const startItem = (currentPage - 1) * itemsPerPage + 1;
+  const endItem = Math.min(currentPage * itemsPerPage, totalItems);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex flex-col sm:flex-row items-center justify-between gap-4 ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm text-gray-700", children: [
+      "Showing ",
+      startItem,
+      " to ",
+      endItem,
+      " of ",
+      totalItems,
+      " results"
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
+      showLimitSelector && onLimitChange && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "limit-select", className: "text-sm text-gray-700", children: "Show:" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "select",
+          {
+            id: "limit-select",
+            value: itemsPerPage,
+            onChange: (e) => onLimitChange(Number(e.target.value)),
+            className: "border border-gray-300 rounded px-2 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent",
+            children: limitOptions.map((option) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: option, children: option }, option))
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => onPageChange(currentPage - 1),
+            disabled: !hasPreviousPage,
+            className: "px-3 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-l-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed",
+            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(
+          "button",
+          {
+            onClick: () => onPageChange(page),
+            className: `px-3 py-2 text-sm font-medium border ${currentPage === page ? "bg-primary text-white border-primary" : "text-gray-700 bg-white border-gray-300 hover:bg-gray-50"}`,
+            children: page
+          }
+        ) }, index)),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => onPageChange(currentPage + 1),
+            disabled: !hasNextPage,
+            className: "px-3 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-r-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed",
+            children: "Next"
+          }
+        )
+      ] })
+    ] })
+  ] });
+};
+var TransactionModal = ({
+  isOpen,
+  onClose,
+  externalId,
+  title = "Transaction History"
+}) => {
+  const {
+    transactions,
+    loading,
+    error,
+    filters,
+    meta,
+    updateFilters
+  } = useTransactions({
+    externalId,
+    initialFilters: { page: 1, limit: 10 },
+    autoFetch: true
+    // Enable auto-fetch so it works when modal opens
+  });
+  console.log("=== TransactionModal Debug ===");
+  console.log("isOpen:", isOpen);
+  console.log("externalId:", externalId);
+  console.log("transactions:", transactions);
+  console.log("transactions.length:", transactions.length);
+  console.log("loading:", loading);
+  console.log("error:", error);
+  console.log("filters:", filters);
+  console.log("meta:", meta);
+  console.log("=== End Debug ===");
+  const handlePageChange = (page) => {
+    updateFilters({ page });
+  };
+  const handleLimitChange = (limit) => {
+    updateFilters({ limit, page: 1 });
+  };
+  const handleInvoiceClick = (transactionId) => {
+    console.log("View invoice for transaction:", transactionId);
+  };
+  const handleFilterChange = (newFilters) => {
+    updateFilters(newFilters);
+  };
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 z-50 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity z-0",
+        onClick: onClose
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full relative z-10", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg leading-6 font-medium text-gray-900", children: title }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              onClick: onClose,
+              className: "bg-white rounded-md text-gray-400 hover:text-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" }),
+                /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: 2,
+                    d: "M6 18L18 6M6 6l12 12"
+                  }
+                ) })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4 grid grid-cols-1 sm:grid-cols-3 gap-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "status-filter", className: "block text-sm font-medium text-gray-700 mb-1", children: "Status" }),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "select",
+              {
+                id: "status-filter",
+                value: filters.status || "",
+                onChange: (e) => handleFilterChange({ status: e.target.value || void 0 }),
+                className: "w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: "All" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("option", { value: "succeeded", children: "Completed" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("option", { value: "pending", children: "Pending" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("option", { value: "payment_failed", children: "Failed" })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "start-date", className: "block text-sm font-medium text-gray-700 mb-1", children: "Start Date" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                type: "date",
+                id: "start-date",
+                value: filters.startDate || "",
+                onChange: (e) => handleFilterChange({ startDate: e.target.value || void 0 }),
+                className: "w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "end-date", className: "block text-sm font-medium text-gray-700 mb-1", children: "End Date" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                type: "date",
+                id: "end-date",
+                value: filters.endDate || "",
+                onChange: (e) => handleFilterChange({ endDate: e.target.value || void 0 }),
+                className: "w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
+              }
+            )
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 pb-4 sm:px-6 sm:pb-6", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          TransactionList,
+          {
+            transactions,
+            loading,
+            error,
+            onInvoiceClick: handleInvoiceClick,
+            className: "mb-4"
+          }
+        ),
+        meta && /* @__PURE__ */ jsxRuntime.jsx(
+          Pagination,
+          {
+            meta,
+            onPageChange: handlePageChange,
+            onLimitChange: handleLimitChange,
+            showLimitSelector: true,
+            limitOptions: [5, 10, 25, 50]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onClose,
+          className: "w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-primary text-base font-medium text-white hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary sm:ml-3 sm:w-auto sm:text-sm",
+          children: "Close"
+        }
+      ) })
+    ] })
+  ] }) });
+};
+var SubscriptionDetails = ({
+  subscription,
+  email,
+  externalId,
+  onChangeEmail,
+  onSubscriptionCancelled
+}) => {
+  var _a, _b, _c, _d, _e, _f;
+  const [isTransactionModalOpen, setIsTransactionModalOpen] = React3.useState(false);
+  const [showCancelConfirmation, setShowCancelConfirmation] = React3.useState(false);
+  const { cancelSubscription, loading: cancelLoading } = useCancelSubscription({
+    onSuccess: () => {
+      setShowCancelConfirmation(false);
+      onSubscriptionCancelled == null ? void 0 : onSubscriptionCancelled();
+      alert("Subscription cancelled successfully");
+    },
+    onError: (error) => {
+      alert(`Failed to cancel subscription: ${error}`);
+    }
+  });
+  const handleTransactionClick = () => {
+    setIsTransactionModalOpen(true);
+  };
+  const handleCancelClick = () => {
+    setShowCancelConfirmation(true);
+  };
+  const handleConfirmCancel = async () => {
+    await cancelSubscription(externalId, {
+      cancellationMode: "endOfPeriod",
+      cancellationReason: "subscription_user_canceled_request"
+    });
+  };
+  const handleCancelModalClose = () => {
+    setShowCancelConfirmation(false);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6 flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm text-gray-600", children: [
+        "Using email: ",
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: email })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          className: "text-sm text-primary hover:underline",
+          onClick: onChangeEmail,
+          children: "Change email"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6 bg-white rounded-lg border border-gray-200 p-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold", children: "Subscription Details" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: handleTransactionClick,
+              className: "text-sm text-green-600 font-medium hover:text-green-700 hover:underline",
+              children: "Transactions"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ChangeCardButton,
+            {
+              externalId,
+              className: "text-sm text-blue-600 font-medium hover:text-blue-700 hover:underline",
+              onSuccess: () => {
+                console.log("Customer portal opened successfully");
+              },
+              onError: (error) => {
+                alert(`Failed to open payment portal: ${error}`);
+              },
+              children: "Change Card"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: handleCancelClick,
+              className: "text-sm text-red-500 font-medium hover:text-red-600 hover:underline",
+              children: "Cancel Renewal"
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 md:grid-cols-5 gap-4 mb-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500", children: "Active Subscription" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium", children: (_a = subscription == null ? void 0 : subscription.plan) == null ? void 0 : _a.name })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500", children: "Subscription Type" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium", children: (_b = subscription == null ? void 0 : subscription.plan) == null ? void 0 : _b.interval })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500", children: "Subscription Renews on" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium", children: (subscription == null ? void 0 : subscription.expiryDate) ? formatDate(subscription.expiryDate) : "" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500", children: "Active Jobs" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "font-medium", children: [
+            ((_c = subscription == null ? void 0 : subscription.usage) == null ? void 0 : _c.ACTIVE_JOBS) || 0,
+            "/",
+            (_d = subscription == null ? void 0 : subscription.meta) == null ? void 0 : _d.ACTIVE_JOBS
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500", children: "Candidates" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "font-medium", children: [
+            ((_e = subscription == null ? void 0 : subscription.usage) == null ? void 0 : _e.CANDIDATES) || 0,
+            "/",
+            (_f = subscription == null ? void 0 : subscription.meta) == null ? void 0 : _f.CANDIDATES
+          ] })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      TransactionModal,
+      {
+        isOpen: isTransactionModalOpen,
+        onClose: () => setIsTransactionModalOpen(false),
+        externalId,
+        title: "Transaction History"
+      }
+    ),
+    showCancelConfirmation && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 z-50 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity z-0",
+          onClick: handleCancelModalClose
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full relative z-10", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sm:flex sm:items-start", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "svg",
+            {
+              className: "h-6 w-6 text-red-600",
+              fill: "none",
+              viewBox: "0 0 24 24",
+              stroke: "currentColor",
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "path",
+                {
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: 2,
+                  d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"
+                }
+              )
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg leading-6 font-medium text-gray-900", children: "Cancel Subscription" }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500", children: "Are you sure you want to cancel your subscription? This action will prevent automatic renewal, but you'll continue to have access until your current billing period ends." }) })
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handleConfirmCancel,
+              disabled: cancelLoading,
+              className: "w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm disabled:opacity-50 disabled:cursor-not-allowed",
+              children: cancelLoading ? "Cancelling..." : "Cancel Subscription"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handleCancelModalClose,
+              disabled: cancelLoading,
+              className: "mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm disabled:opacity-50 disabled:cursor-not-allowed",
+              children: "Keep Subscription"
+            }
+          )
+        ] })
+      ] })
+    ] }) })
+  ] });
+};
+var EmailEntry = ({
+  email,
+  emailError,
+  onEmailChange,
+  onEmailSubmit,
+  onEmailError
+}) => {
+  const handleEmailChange = (e) => {
+    const value = e.target.value;
+    onEmailChange(value);
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    if (!value) {
+      onEmailError("Email is required");
+    } else if (!emailRegex.test(value)) {
+      onEmailError("Please enter a valid email address");
+    } else {
+      onEmailError(null);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-8 max-w-xl mx-auto text-center bg-white rounded-lg shadow-md", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-2xl font-bold mb-2", children: "Your Subscription Portal" }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-700 mb-8", children: "Enter your email to access your subscription details, plans and transaction history." }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "email", className: "sr-only", children: "Email Address" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            id: "email",
+            type: "email",
+            className: `w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-primary ${emailError ? "border-red-500" : "border-gray-300"}`,
+            placeholder: "Email Address",
+            value: email,
+            onChange: handleEmailChange,
+            required: true
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: `mt-1 text-sm ${emailError ? "text-red-500" : "text-gray-500"}`, children: emailError || "We'll use this to identify your account" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          className: `w-full btn-primary py-2 px-4 rounded-md ${!email || !!emailError ? "opacity-50 cursor-not-allowed" : ""}`,
+          disabled: !email || !!emailError,
+          onClick: onEmailSubmit,
+          children: "Continue"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500", children: "Don't have a subscription yet? You can browse our plans after entering your email." })
+  ] });
+};
+var UpgradeSummary = ({
+  selectedPlan,
+  onUpgrade
+}) => {
+  if (!selectedPlan || Number(selectedPlan.fixedCost) === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-blue-50 border border-blue-200 rounded-lg p-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "font-semibold text-gray-900", children: "Summary" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-600", children: selectedPlan.name }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500", children: "See Price Breakdown" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-right", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-2xl font-bold text-gray-900", children: [
+        "$",
+        selectedPlan.fixedCost,
+        "/Yr"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500", children: "Due Today" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm font-medium", 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",
+        children: "Upgrade Now"
+      }
+    )
+  ] }) });
+};
+var LogoInline = ({ src, alt = "Logo", viewBox = "0 0 1024 1024", ...props }) => {
+  const resolvedSrc = src ?? `${undefined.BASE_URL}file.svg`;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      version: "1.1",
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox,
+      "aria-label": alt,
+      role: "img",
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx("image", { href: resolvedSrc, width: "100%", height: "100%", preserveAspectRatio: "xMidYMid meet" })
+    }
+  );
+};
+var Layout = ({ children }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col min-h-screen w-full", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("header", { className: "bg-white/80 backdrop-blur border-b border-gray-200", children: /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "w-full flex items-center justify-between px-4 py-3", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-grow", children: /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Link, { to: "/", className: "no-underline text-inherit", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx(LogoInline, { className: "h-8 w-auto", alt: "SubOS" }) }) }) }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("main", { className: "flex-1 w-full", children }),
+    /* @__PURE__ */ jsxRuntime.jsx("footer", { className: "bg-gray-100 py-6 w-full mt-auto", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-7xl mx-auto px-4", children: /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-gray-600 text-center", children: [
+      "\xA9 ",
+      (/* @__PURE__ */ new Date()).getFullYear(),
+      " SubOS. All rights reserved."
+    ] }) }) })
+  ] });
+};
+var DashboardPage = () => {
+  var _a;
+  const emailManagement = useEmailManagement();
+  const subscription = useSubscription();
+  const plans = usePlans();
+  const loadDashboardData = (email) => {
+    subscription.fetchSubscription(email);
+    plans.fetchPlans();
+  };
+  React3.useEffect(() => {
+    if (emailManagement.email && !emailManagement.isEmailScreen) {
+      loadDashboardData(emailManagement.email);
+    }
+  }, [emailManagement.email, emailManagement.isEmailScreen]);
+  const handleChangeEmail = () => {
+    emailManagement.handleChangeEmail();
+    subscription.clearSubscription();
+    plans.clearPlans();
+  };
+  const handleUpgrade = () => {
+    plans.handleUpgrade(emailManagement.email);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(Layout, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-7xl mx-auto w-full h-full py-8 px-4", children: !emailManagement.isEmailScreen ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      SubscriptionDetails,
+      {
+        subscription: subscription.subscription,
+        email: emailManagement.email,
+        externalId: emailManagement.email,
+        onChangeEmail: handleChangeEmail,
+        onSubscriptionCancelled: () => {
+          subscription.fetchSubscription(emailManagement.email);
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      PlanSelector,
+      {
+        plans: plans.filteredPlans,
+        selectedPlan: plans.selectedPlan,
+        tierFilter: plans.tierFilter,
+        billingCycle: plans.billingCycle,
+        loading: plans.loading,
+        error: plans.error,
+        dropdownOptions: plans.dropdownOptions,
+        currentSelectionText: plans.currentSelectionText,
+        onPlanSelect: plans.handlePlanSelect,
+        onTierFilterChange: plans.setTierFilter,
+        onBillingCycleChange: plans.setBillingCycle,
+        activePlanCode: (_a = subscription.subscription) == null ? void 0 : _a.plan.code
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      UpgradeSummary,
+      {
+        selectedPlan: plans.selectedPlan,
+        onUpgrade: handleUpgrade
+      }
+    )
+  ] }) : /* @__PURE__ */ jsxRuntime.jsx(
+    EmailEntry,
+    {
+      email: emailManagement.email,
+      emailError: emailManagement.emailError,
+      onEmailChange: emailManagement.setEmail,
+      onEmailSubmit: emailManagement.handleEmailSubmit,
+      onEmailError: emailManagement.setEmailError
+    }
+  ) }) });
+};
+var usePaymentParams = () => {
+  return React3.useMemo(() => {
+    const params = new URLSearchParams(window.location.search);
+    return {
+      gateway: params.get("gateway") || void 0,
+      sessionId: params.get("session_id") || void 0,
+      paymentId: params.get("payment_id") || void 0,
+      reason: params.get("reason") || void 0
+    };
+  }, []);
+};
+var useProcessPaymentSuccess = (params) => {
+  const [loading, setLoading] = React3.useState(true);
+  const [error, setError] = React3.useState(null);
+  React3.useEffect(() => {
+    const run = async () => {
+      try {
+        const qs = new URLSearchParams({
+          ...params.gateway ? { gateway: params.gateway } : {},
+          ...params.sessionId ? { session_id: params.sessionId } : {},
+          ...params.paymentId ? { payment_id: params.paymentId } : {}
+        }).toString();
+        const url = `${getApiBaseUrl()}/api/payments/success?${qs}`;
+        const response = await fetch(url, {
+          headers: getHeaders(),
+          credentials: "include"
+        });
+        const contentType = response.headers.get("content-type") || "";
+        if (!contentType.includes("application/json")) {
+          const text = await response.text();
+          throw new Error(`Unexpected response type: ${contentType}. Body: ${text.slice(0, 200)}...`);
+        }
+        const result = await response.json();
+        if (!result.success) {
+          setError(result.error || "Failed to process payment");
+        }
+      } catch (err) {
+        setError((err == null ? void 0 : err.message) || "Failed to process payment");
+      } finally {
+        setLoading(false);
+      }
+    };
+    run();
+  }, []);
+  return { loading, error };
+};
+var PaymentSuccessPage = () => {
+  const paymentDetails = usePaymentParams();
+  const { loading, error } = useProcessPaymentSuccess(paymentDetails);
+  if (loading) {
+    return /* @__PURE__ */ jsxRuntime.jsx(Layout, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "container mx-auto p-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-md mx-auto bg-white rounded-lg shadow-md p-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "animate-spin rounded-full h-12 w-12 border-b-2 border-green-600 mx-auto" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-4 text-gray-600", children: "Processing your payment..." })
+    ] }) }) }) });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxRuntime.jsx(Layout, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "container mx-auto p-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-md mx-auto bg-white rounded-lg shadow-md p-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-red-600 text-4xl mb-4", children: "\u26A0\uFE0F" }),
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-xl font-semibold text-gray-900 mb-2", children: "Payment Processing Error" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-red-600 mb-4", children: error }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => window.location.reload(),
+            className: "w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-md transition-colors",
+            children: "Try Again"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => window.location.href = "/",
+            className: "w-full bg-gray-500 hover:bg-gray-600 text-white font-medium py-2 px-4 rounded-md transition-colors",
+            children: "Go Home"
+          }
+        )
+      ] })
+    ] }) }) }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(Layout, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "container mx-auto p-4", children: /* @__PURE__ */ jsxRuntime.jsx(PaymentSuccessView_default, { details: paymentDetails }) }) });
+};
+var PaymentSuccessPage_default = PaymentSuccessPage;
+var useProcessPaymentCancel = (params) => {
+  const [loading, setLoading] = React3.useState(true);
+  const [error, setError] = React3.useState(null);
+  React3.useEffect(() => {
+    const run = async () => {
+      try {
+        const qs = new URLSearchParams({
+          ...params.gateway ? { gateway: params.gateway } : {},
+          ...params.sessionId ? { session_id: params.sessionId } : {},
+          ...params.paymentId ? { payment_id: params.paymentId } : {},
+          ...params.reason ? { reason: params.reason } : {}
+        }).toString();
+        const url = `${getApiBaseUrl()}/api/payments/cancel?${qs}`;
+        await fetch(url, {
+          headers: getHeaders(),
+          credentials: "include"
+        });
+      } catch (err) {
+        setError((err == null ? void 0 : err.message) || "Failed to process cancellation");
+      } finally {
+        setLoading(false);
+      }
+    };
+    run();
+  }, []);
+  return { loading, error };
+};
+var PaymentCancelPage = () => {
+  const details = usePaymentParams();
+  const { loading } = useProcessPaymentCancel(details);
+  if (loading) {
+    return /* @__PURE__ */ jsxRuntime.jsx(Layout, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "container mx-auto p-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-md mx-auto bg-white rounded-lg shadow-md p-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "animate-spin rounded-full h-12 w-12 border-b-2 border-orange-600 mx-auto" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-4 text-gray-600", children: "Processing cancellation..." })
+    ] }) }) }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(Layout, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "container mx-auto p-4", children: /* @__PURE__ */ jsxRuntime.jsx(PaymentCancelView_default, { details }) }) });
+};
+var PaymentCancelPage_default = PaymentCancelPage;
+var App = function App2() {
+  return /* @__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, {}) }),
+    /* @__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;
+exports.AddIcon = AddIcon;
+exports.App = App;
+exports.BillingCycleToggle = BillingCycleToggle;
+exports.CancelIcon = CancelIcon;
+exports.ChangeCardButton = ChangeCardButton;
+exports.CheckCircleIcon = CheckCircleIcon;
+exports.CheckIcon = CheckIcon;
+exports.CreditCardIcon = CreditCardIcon;
+exports.DashboardIcon = DashboardIcon;
+exports.DashboardPage = DashboardPage;
+exports.DeleteIcon = DeleteIcon;
+exports.DownloadIcon = DownloadIcon;
+exports.EmailEntry = EmailEntry;
+exports.EmailIcon = EmailIcon;
+exports.FilterIcon = FilterIcon;
+exports.Layout = Layout;
+exports.LoadingSpinner = LoadingSpinner;
+exports.LogoInline = LogoInline;
+exports.Pagination = Pagination;
+exports.PaymentCancelView = PaymentCancelView;
+exports.PaymentSuccessView = PaymentSuccessView;
+exports.PlanCard = PlanCard;
+exports.PlanSelector = PlanSelector;
+exports.PlansGrid = PlansGrid;
+exports.ReceiptIcon = ReceiptIcon;
+exports.SearchIcon = SearchIcon;
+exports.StarBorderIcon = StarBorderIcon;
+exports.SubscriptionDetails = SubscriptionDetails;
+exports.TierFilterDropdown = TierFilterDropdown;
+exports.TransactionList = TransactionList;
+exports.TransactionModal = TransactionModal;
+exports.TrendingUpIcon = TrendingUpIcon;
+exports.UpgradeIcon = UpgradeIcon;
+exports.UpgradeSummary = UpgradeSummary;
+exports.checkoutApi = checkoutApi;
+exports.configureSubOS = configureSubOS;
+exports.customerApi = customerApi;
+exports.ensureSubOSConfig = ensureSubOSConfig;
+exports.filterPlansByBillingCycle = filterPlansByBillingCycle;
+exports.filterPlansByTier = filterPlansByTier;
+exports.formatDate = formatDate;
+exports.getApiBaseUrl = getApiBaseUrl;
+exports.getCandidateUnits = getCandidateUnits;
+exports.getCurrentSelectionText = getCurrentSelectionText;
+exports.getDropdownOptions = getDropdownOptions;
+exports.getPlanDescription = getPlanDescription;
+exports.getPlanFeatures = getPlanFeatures;
+exports.getProjectId = getProjectId;
+exports.getStripePublishableKey = getStripePublishableKey;
+exports.getUniqueCandidateUnits = getUniqueCandidateUnits;
+exports.isPlanPopular = isPlanPopular;
+exports.plansApi = plansApi;
+exports.subscriptionApi = subscriptionApi;
+exports.transactionApi = transactionApi;
+exports.useCancelSubscription = useCancelSubscription;
+exports.useCustomerPortal = useCustomerPortal;
+exports.useEmailManagement = useEmailManagement;
+exports.usePagination = usePagination;
+exports.usePlans = usePlans;
+exports.useSubscription = useSubscription;
+exports.useTransactions = useTransactions;
+exports.validateSubOSConfig = validateSubOSConfig;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map