@fluid-app/portal-sdk 0.1.27 → 0.1.29

package/dist/SubscriptionsScreen-CHn_Q0zf.cjs

@@ -0,0 +1,1288 @@
+require("./chunk-9hOWP6kD.cjs");
+const require_src = require("./src-CaogiXSc.cjs");
+const require_use_account_clients = require("./use-account-clients-n2a8bdSP.cjs");
+const require_src$1 = require("./src-DXC-Jw6i.cjs");
+const require_AppNavigationContext = require("./AppNavigationContext-DAcrNgXZ.cjs");
+let react = require("react");
+let _tanstack_react_query = require("@tanstack/react-query");
+let react_jsx_runtime = require("react/jsx-runtime");
+let lucide_react = require("lucide-react");
+let clsx = require("clsx");
+let tailwind_merge = require("tailwind-merge");
+//#region ../../subscriptions/api-client/src/namespaces/subscriptions.ts
+/**
+* Fetch a paginated list of customer subscriptions.
+* Endpoint: GET /subscriptions
+*/
+async function fetchCustomerSubscriptions(client, params) {
+	const input = {
+		customer_id: params.customerId.toString(),
+		page: (params.page ?? 1).toString(),
+		per_page: (params.perPage ?? 10).toString()
+	};
+	if (params.status != null) input.status = params.status;
+	if (params.search != null) input.search = params.search;
+	if (params.sortBy != null) input.sort_by = params.sortBy;
+	if (params.sortDirection != null) input.sort_direction = params.sortDirection;
+	return client.get("/subscriptions", input);
+}
+/**
+* Fetch a single subscription by token.
+* Endpoint: GET /subscriptions/{token}
+*/
+async function fetchSubscription(client, subscriptionToken) {
+	return client.get(`/subscriptions/${subscriptionToken}`);
+}
+/**
+* Pause a subscription.
+* Endpoint: POST /subscriptions/{token}/pause
+*/
+async function pauseSubscription(client, subscriptionToken, params) {
+	const queryParams = { customer_id: params.customerId.toString() };
+	if (params.nextBillDate != null) queryParams.next_bill_date = params.nextBillDate;
+	if (params.numberOfOrders != null) queryParams.number_of_orders = params.numberOfOrders.toString();
+	const query = new URLSearchParams(queryParams).toString();
+	return client.post(`/subscriptions/${subscriptionToken}/pause?${query}`);
+}
+/**
+* Resume a paused subscription.
+* Endpoint: POST /subscriptions/{token}/resume
+*/
+async function resumeSubscription(client, subscriptionToken, params) {
+	const query = new URLSearchParams({
+		customer_id: params.customerId.toString(),
+		next_bill_date: params.nextBillDate
+	}).toString();
+	return client.post(`/subscriptions/${subscriptionToken}/resume?${query}`);
+}
+/**
+* Skip the next billing cycle.
+* Endpoint: POST /subscriptions/{token}/skip_next_billing
+*/
+async function skipSubscription(client, subscriptionToken, params) {
+	const query = new URLSearchParams({
+		customer_id: params.customerId.toString(),
+		next_bill_date: params.nextBillDate
+	}).toString();
+	return client.post(`/subscriptions/${subscriptionToken}/skip_next_billing?${query}`);
+}
+/**
+* Cancel a subscription.
+* Endpoint: POST /subscriptions/{token}/cancel
+*/
+async function cancelSubscription(client, subscriptionToken, customerId) {
+	const query = new URLSearchParams({ customer_id: customerId.toString() }).toString();
+	return client.post(`/subscriptions/${subscriptionToken}/cancel?${query}`);
+}
+/**
+* Reactivate a cancelled subscription.
+* Endpoint: POST /subscriptions/{token}/reactivate
+*/
+async function reactivateSubscription(client, subscriptionToken, params) {
+	const body = params.process_immediately === true ? { process_immediately: true } : params.next_bill_date ? { next_bill_date: params.next_bill_date } : {};
+	return client.post(`/subscriptions/${subscriptionToken}/reactivate`, Object.keys(body).length > 0 ? body : void 0);
+}
+//#endregion
+//#region ../../subscriptions/core/src/context.ts
+const SubscriptionsClientContext = (0, react.createContext)(null);
+const SubscriptionsClientProvider = SubscriptionsClientContext.Provider;
+function useSubscriptionsClient() {
+	const client = (0, react.useContext)(SubscriptionsClientContext);
+	if (!client) throw new Error("useSubscriptionsClient must be used within a SubscriptionsCoreProvider");
+	return client;
+}
+//#endregion
+//#region ../../subscriptions/core/src/provider.tsx
+function SubscriptionsCoreProvider({ client, children }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SubscriptionsClientProvider, {
+		value: client,
+		children
+	});
+}
+//#endregion
+//#region ../../subscriptions/core/src/query-keys.ts
+const subscriptionsKeys = {
+	all: ["subscriptions"],
+	list: (params) => [
+		...subscriptionsKeys.all,
+		"list",
+		params
+	],
+	detail: (token) => [
+		...subscriptionsKeys.all,
+		"detail",
+		token
+	]
+};
+//#endregion
+//#region ../../subscriptions/core/src/hooks/use-subscriptions.ts
+function useSubscriptions(params, options) {
+	const client = useSubscriptionsClient();
+	return (0, _tanstack_react_query.useQuery)({
+		queryKey: subscriptionsKeys.list(params),
+		queryFn: () => fetchCustomerSubscriptions(client, params),
+		enabled: options?.enabled ?? !!params.customerId
+	});
+}
+//#endregion
+//#region ../../subscriptions/core/src/hooks/use-subscription.ts
+function useSubscription(token, options) {
+	const client = useSubscriptionsClient();
+	return (0, _tanstack_react_query.useQuery)({
+		queryKey: subscriptionsKeys.detail(token),
+		queryFn: () => fetchSubscription(client, token),
+		enabled: (options?.enabled ?? true) && !!token
+	});
+}
+//#endregion
+//#region ../../subscriptions/core/src/hooks/use-pause-subscription.ts
+function usePauseSubscription(options) {
+	const client = useSubscriptionsClient();
+	const queryClient = (0, _tanstack_react_query.useQueryClient)();
+	return (0, _tanstack_react_query.useMutation)({
+		mutationFn: (params) => pauseSubscription(client, params.subscriptionToken, params.pauseParams),
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: subscriptionsKeys.all });
+			options?.onSuccess?.();
+		},
+		onError: options?.onError
+	});
+}
+//#endregion
+//#region ../../subscriptions/core/src/hooks/use-resume-subscription.ts
+function useResumeSubscription(options) {
+	const client = useSubscriptionsClient();
+	const queryClient = (0, _tanstack_react_query.useQueryClient)();
+	return (0, _tanstack_react_query.useMutation)({
+		mutationFn: (params) => resumeSubscription(client, params.subscriptionToken, params.resumeParams),
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: subscriptionsKeys.all });
+			options?.onSuccess?.();
+		},
+		onError: options?.onError
+	});
+}
+//#endregion
+//#region ../../subscriptions/core/src/hooks/use-skip-subscription.ts
+function useSkipSubscription(options) {
+	const client = useSubscriptionsClient();
+	const queryClient = (0, _tanstack_react_query.useQueryClient)();
+	return (0, _tanstack_react_query.useMutation)({
+		mutationFn: (params) => skipSubscription(client, params.subscriptionToken, params.skipParams),
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: subscriptionsKeys.all });
+			options?.onSuccess?.();
+		},
+		onError: options?.onError
+	});
+}
+//#endregion
+//#region ../../subscriptions/core/src/hooks/use-cancel-subscription.ts
+function useCancelSubscription(options) {
+	const client = useSubscriptionsClient();
+	const queryClient = (0, _tanstack_react_query.useQueryClient)();
+	return (0, _tanstack_react_query.useMutation)({
+		mutationFn: (params) => cancelSubscription(client, params.subscriptionToken, params.customerId),
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: subscriptionsKeys.all });
+			options?.onSuccess?.();
+		},
+		onError: options?.onError
+	});
+}
+//#endregion
+//#region ../../subscriptions/core/src/hooks/use-reactivate-subscription.ts
+function useReactivateSubscription(options) {
+	const client = useSubscriptionsClient();
+	const queryClient = (0, _tanstack_react_query.useQueryClient)();
+	return (0, _tanstack_react_query.useMutation)({
+		mutationFn: (params) => reactivateSubscription(client, params.subscriptionToken, params.reactivateParams),
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: subscriptionsKeys.all });
+			options?.onSuccess?.();
+		},
+		onError: options?.onError
+	});
+}
+//#endregion
+//#region ../../subscriptions/core/src/utils/subscription-helpers.ts
+function formatSubscriptionFrequency(frequency) {
+	if (frequency === "day") return "Daily";
+	if (frequency === "week") return "Weekly";
+	if (frequency === "month") return "Monthly";
+	if (frequency === "year") return "Yearly";
+	return frequency;
+}
+function calculateNextBillDate(billingInterval = 1, billingIntervalUnit = "month") {
+	const now = /* @__PURE__ */ new Date();
+	const nextBillDate = new Date(now);
+	switch (billingIntervalUnit.toLowerCase()) {
+		case "day":
+			nextBillDate.setDate(now.getDate() + billingInterval);
+			break;
+		case "week":
+			nextBillDate.setDate(now.getDate() + billingInterval * 7);
+			break;
+		case "month":
+			nextBillDate.setMonth(now.getMonth() + billingInterval);
+			break;
+		case "year":
+			nextBillDate.setFullYear(now.getFullYear() + billingInterval);
+			break;
+		default: nextBillDate.setMonth(now.getMonth() + billingInterval);
+	}
+	return nextBillDate.toISOString().split("T")[0] || "";
+}
+function formatDate(dateString, isCancelled = false) {
+	if (isCancelled) return "Cancelled";
+	if (!dateString) return "Paused";
+	const parts = dateString.split("-");
+	if (parts.length !== 3) return "Invalid date";
+	const [year, month, day] = parts.map(Number);
+	if (!year || !month || !day) return "Invalid date";
+	const date = new Date(year, month - 1, day);
+	const monthNames = [
+		"January",
+		"February",
+		"March",
+		"April",
+		"May",
+		"June",
+		"July",
+		"August",
+		"September",
+		"October",
+		"November",
+		"December"
+	];
+	const dayNum = date.getDate();
+	const monthName = monthNames[date.getMonth()];
+	const yearNum = date.getFullYear();
+	const ordinalSuffix = (d) => {
+		if (d > 3 && d < 21) return "th";
+		switch (d % 10) {
+			case 1: return "st";
+			case 2: return "nd";
+			case 3: return "rd";
+			default: return "th";
+		}
+	};
+	return `${monthName} ${dayNum}${ordinalSuffix(dayNum)}, ${yearNum}`;
+}
+function getNextBillDisplay(subscription) {
+	if (subscription?.status === "cancelled") return "Cancelled";
+	if (subscription?.next_bill_date) return formatDate(subscription.next_bill_date);
+	if (subscription?.status === "paused") return "Paused";
+	return "N/A";
+}
+//#endregion
+//#region ../../subscriptions/ui/src/lib/cn.ts
+function cn(...inputs) {
+	return (0, tailwind_merge.twMerge)((0, clsx.clsx)(inputs));
+}
+//#endregion
+//#region ../../subscriptions/ui/src/lib/format.ts
+/**
+* Format a number as currency (USD).
+*/
+function formatCurrency(value) {
+	return new Intl.NumberFormat("en-US", {
+		style: "currency",
+		currency: "USD"
+	}).format(value);
+}
+/**
+* Convert a snake_case or lowercase string to Start Case.
+* Replaces lodash startCase for simple status strings.
+*/
+function startCase(str) {
+	if (!str) return "";
+	return str.replace(/_/g, " ").replace(/\b\w/g, (char) => char.toUpperCase());
+}
+/**
+* Format a next bill date string to M/D/YYYY (UTC).
+*/
+function formatNextBillDate(nextBillDate) {
+	if (!nextBillDate) return "N/A";
+	const date = new Date(nextBillDate);
+	if (isNaN(date.getTime())) return "N/A";
+	return `${date.getUTCMonth() + 1}/${date.getUTCDate()}/${date.getUTCFullYear()}`;
+}
+//#endregion
+//#region ../../subscriptions/ui/src/components/status-pill.tsx
+const STATUS_COLORS = {
+	active: "bg-green-100 text-green-800",
+	paused: "bg-gray-100 text-gray-800",
+	cancelled: "bg-red-100 text-red-800",
+	pending: "bg-yellow-100 text-yellow-800",
+	inactive: "bg-gray-100 text-gray-800",
+	disabled: "bg-red-100 text-red-800",
+	past_due: "bg-gray-100 text-gray-800"
+};
+const STATUS_DOT_COLORS = {
+	active: "bg-green-500",
+	paused: "bg-gray-400",
+	cancelled: "bg-red-500",
+	pending: "bg-yellow-500",
+	inactive: "bg-gray-400",
+	disabled: "bg-red-500",
+	past_due: "bg-gray-400"
+};
+function StatusPill({ status, children }) {
+	const key = status?.toLowerCase() ?? "";
+	const pillColor = STATUS_COLORS[key] ?? "bg-gray-100 text-gray-800";
+	const dotColor = STATUS_DOT_COLORS[key] ?? "bg-gray-400";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		className: cn("inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium", pillColor),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: cn("h-1.5 w-1.5 rounded-full", dotColor) }), children]
+	});
+}
+//#endregion
+//#region ../../subscriptions/ui/src/components/subscriptions-list.tsx
+function SubscriptionsList({ customerId, onSubscriptionClick, t, pageSize = 10 }) {
+	const [currentPage, setCurrentPage] = (0, react.useState)(1);
+	const [statusFilter, setStatusFilter] = (0, react.useState)(null);
+	const [search, setSearch] = (0, react.useState)(null);
+	const [sortBy, setSortBy] = (0, react.useState)({
+		column: "next_bill_date",
+		direction: "desc"
+	});
+	const { data, isLoading } = useSubscriptions({
+		customerId: customerId ?? 0,
+		page: currentPage,
+		perPage: pageSize,
+		status: statusFilter,
+		search,
+		sortBy: sortBy.column,
+		sortDirection: sortBy.direction
+	}, { enabled: !!customerId });
+	(0, react.useEffect)(() => {
+		setCurrentPage(1);
+	}, [
+		statusFilter,
+		search,
+		sortBy
+	]);
+	const items = data?.subscriptions ?? [];
+	const totalItems = data?.meta?.pagination?.total_count ?? 0;
+	const totalPages = data?.meta?.pagination?.total_pages ?? 1;
+	const handleSubscriptionClick = (token) => {
+		if (token) onSubscriptionClick(token);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "border-border overflow-hidden rounded-lg border shadow-sm",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex flex-col gap-2 p-3 sm:flex-row sm:items-center sm:justify-between",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex gap-1",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
+							variant: "ghost",
+							size: "sm",
+							onClick: () => setStatusFilter(null),
+							className: cn("rounded-md text-xs", statusFilter === null && "bg-muted-foreground font-bold"),
+							children: t("all")
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
+							variant: "ghost",
+							size: "sm",
+							onClick: () => setStatusFilter("active"),
+							className: cn("rounded-md text-xs", statusFilter === "active" && "bg-muted-foreground font-bold"),
+							children: t("active")
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Button, {
+							variant: "ghost",
+							size: "sm",
+							onClick: () => setStatusFilter("inactive"),
+							className: cn("rounded-md text-xs", statusFilter === "inactive" && "bg-muted-foreground font-bold"),
+							children: t("inactive")
+						})
+					]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "relative w-full sm:w-auto sm:min-w-[220px]",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Search, { className: "text-muted-foreground h-4 w-4" })
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Input, {
+						type: "search",
+						value: search ?? "",
+						onChange: (e) => setSearch(e.target.value || null),
+						className: "h-10 w-full pl-10",
+						placeholder: t("subscriptions")
+					})]
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "block md:hidden",
+				children: isLoading ? Array(5).fill(0).map((_, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "border-border border-b p-4",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex space-x-3",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-12 w-12 rounded-md" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "flex-1 space-y-2",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-4 w-3/4" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-3 w-1/2" })]
+						})]
+					})
+				}, `skeleton-${index}`)) : items.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "text-muted-foreground px-3 py-8 text-center text-sm",
+					children: t("no_subscriptions_found")
+				}) : items.map((subscription) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "border-border hover:bg-accent cursor-pointer border-b p-4 transition-colors duration-200 ease-in-out last:border-b-0",
+					onClick: () => handleSubscriptionClick(subscription.subscription_token),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex items-start space-x-3",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+							src: subscription.variant?.product?.image_url,
+							alt: subscription.variant?.product?.title,
+							width: 48,
+							height: 48,
+							className: "h-12 w-12 flex-shrink-0 rounded-md object-cover"
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "w-0 min-w-0 flex-1",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+									className: "text-foreground truncate text-sm font-medium",
+									children: subscription.variant?.product?.title
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "mt-2 grid grid-cols-2 gap-x-4 gap-y-1 text-sm",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "text-muted-foreground block text-xs",
+										children: t("next_bill_date")
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "text-muted-foreground",
+										children: formatNextBillDate(subscription.next_bill_date ?? "")
+									})] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "text-muted-foreground block text-xs",
+										children: t("price")
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "text-foreground font-medium",
+										children: formatCurrency(subscription.price * subscription.quantity)
+									})] })]
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "mt-2",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "text-muted-foreground block text-xs",
+										children: t("status")
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatusPill, {
+										status: subscription.status,
+										children: startCase(subscription.status) || t("unknown_status")
+									})]
+								})
+							]
+						})]
+					})
+				}, subscription.subscription_token))
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "hidden overflow-x-auto md:block",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("table", {
+					className: "min-w-full table-fixed",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("colgroup", { children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("col", { className: "w-[45%] min-w-[240px]" }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("col", { className: "w-[20%] min-w-[100px]" }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("col", { className: "w-[15%] min-w-[100px]" }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("col", { className: "w-[20%] min-w-[100px]" })
+						] }),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("thead", {
+							className: "bg-muted",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", {
+								className: "h-10",
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src$1.TableColumn, {
+										label: t("product"),
+										sortable: false
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src$1.TableColumn, {
+										label: t("next_bill_date"),
+										sortBy: "next_bill_date",
+										sortData: sortBy,
+										onSortClick: (value) => setSortBy({
+											column: value,
+											direction: sortBy.direction === "asc" ? "desc" : "asc"
+										})
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src$1.TableColumn, {
+										label: t("price"),
+										sortable: false
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src$1.TableColumn, {
+										label: t("status"),
+										sortable: false
+									})
+								]
+							})
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", {
+							className: "divide-border bg-background divide-y",
+							children: isLoading ? Array(5).fill(0).map((_, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", { children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+									className: "px-3 py-4",
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+										className: "flex items-center space-x-2",
+										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-9 w-9 rounded-md" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-4 w-32" })]
+									})
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+									className: "px-3 py-4",
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-4 w-24" })
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+									className: "px-3 py-4",
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-4 w-24" })
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+									className: "px-3 py-4",
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-4 w-16" })
+								})
+							] }, `skeleton-${index}`)) : items.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tr", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+								colSpan: 4,
+								className: "text-muted-foreground px-3 py-8 text-center text-sm",
+								children: t("no_subscriptions_found")
+							}) }) : items.map((subscription) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", {
+								className: "hover:bg-muted cursor-pointer transition-colors duration-200 ease-in-out",
+								onClick: () => handleSubscriptionClick(subscription.subscription_token),
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("td", {
+										className: "text-muted-foreground flex max-w-[280px] items-center space-x-3 py-4 pr-3 pl-3 text-sm",
+										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+											src: subscription.variant?.product?.image_url,
+											alt: subscription.variant?.product?.title,
+											width: 48,
+											height: 48,
+											className: "h-12 w-12 flex-shrink-0 rounded-md object-cover"
+										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: "text-foreground truncate text-sm font-medium",
+											children: subscription.variant?.product?.title
+										})]
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+										className: "text-muted-foreground px-3 py-4 text-sm whitespace-nowrap",
+										children: formatNextBillDate(subscription.next_bill_date ?? "")
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+										className: "px-3 py-4 text-sm whitespace-nowrap",
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: "text-muted-foreground",
+											children: formatCurrency(subscription.price * subscription.quantity)
+										})
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+										className: "px-3 py-4 text-sm whitespace-nowrap",
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatusPill, {
+											status: subscription.status,
+											children: startCase(subscription.status) || t("unknown_status")
+										})
+									})
+								]
+							}, subscription.subscription_token))
+						})
+					]
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src$1.PaginationFooter, {
+				currentPage,
+				totalPages,
+				pageSize,
+				totalItems,
+				onPageChange: setCurrentPage,
+				t
+			})
+		]
+	});
+}
+//#endregion
+//#region ../../subscriptions/ui/src/components/confirm-dialog.tsx
+function ConfirmDialog({ title, description, actionButtonText = "Delete", cancelButtonText = "Cancel", open, setOpen, onConfirm }) {
+	const [isPending, setIsPending] = (0, react.useState)(false);
+	const handleConfirm = async () => {
+		try {
+			const result = onConfirm();
+			if (result instanceof Promise) {
+				setIsPending(true);
+				await result;
+			}
+		} catch (error) {
+			console.error("ConfirmDialog: action rejected", error);
+		} finally {
+			setIsPending(false);
+			setOpen(false);
+		}
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AlertDialog, {
+		open,
+		onOpenChange: (v) => !isPending && setOpen(v),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.AlertDialogContent, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.AlertDialogHeader, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AlertDialogTitle, { children: title }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AlertDialogDescription, { children: description })] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.AlertDialogFooter, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AlertDialogCancel, {
+			disabled: isPending,
+			children: cancelButtonText
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.AlertDialogAction, {
+			onClick: handleConfirm,
+			disabled: isPending,
+			className: "bg-red-600 text-white hover:bg-red-500",
+			children: isPending ? "..." : actionButtonText
+		})] })] })
+	});
+}
+//#endregion
+//#region ../../subscriptions/ui/src/components/subscription-detail.tsx
+function SubscriptionDetailSkeleton() {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex flex-col lg:grid lg:grid-cols-8",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "bg-muted flex flex-col items-center px-8 lg:col-span-4",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "w-full max-w-lg py-6",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "mb-4 h-6 w-48" }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "grid grid-cols-2 gap-4",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-16 w-full rounded" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-16 w-full rounded" })]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "mt-6 flex items-center space-x-4",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-24 w-24 rounded" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "flex-1 space-y-2",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-4 w-3/4" }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-4 w-1/2" }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-4 w-1/4" })
+							]
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "mt-6 space-y-2",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-4 w-full" }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-4 w-full" }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-5 w-full" })
+						]
+					})
+				]
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "bg-background col-span-4 px-8 pt-4",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "mx-auto max-w-lg",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "mb-3 h-5 w-32" }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "grid grid-cols-2 gap-3",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-10 w-full rounded" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-10 w-full rounded" })]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "mt-6 space-y-4",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-5 w-40" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "flex gap-4",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-12 flex-1 rounded" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-12 flex-1 rounded" })]
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "mt-6 space-y-4",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-5 w-40" }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-16 w-full rounded" }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src.Skeleton, { className: "h-16 w-full rounded" })
+						]
+					})
+				]
+			})
+		})]
+	});
+}
+function SubscriptionItemsSection({ subscription }) {
+	const variant = subscription.variant;
+	const product = variant?.product;
+	const quantity = subscription.quantity;
+	const totalPrice = formatCurrency(subscription.price * quantity);
+	const discount = subscription.original_price != null ? subscription.original_price - subscription.price : 0;
+	const subtotal = discount > 0 ? formatCurrency(subscription.original_price * quantity) : totalPrice;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
+		className: "bg-muted flex w-full flex-col items-center px-8 lg:col-span-4",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex w-full max-w-lg flex-col",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "mt-4",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+						className: "text-foreground mb-2 text-lg font-medium",
+						children: "Your Upcoming Order"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "text-muted-foreground",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "grid grid-cols-2 gap-4",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "border-border border-r pr-4",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: "text-muted-foreground mb-1 text-sm",
+									children: "Next Order Date"
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: "text-foreground text-2xl font-bold",
+									children: getNextBillDisplay(subscription)
+								})]
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "pl-4",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: "text-muted-foreground mb-1 text-sm",
+									children: "Next Bill Amount"
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: "text-foreground text-2xl font-bold",
+									children: formatCurrency(subscription.price * quantity)
+								})]
+							})]
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("hr", { className: "border-border mt-4" })]
+					})]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "py-6",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "flex flex-row items-center space-x-4",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "flex min-w-0 flex-1 flex-row space-x-4",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "relative shrink-0",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "bg-muted h-24 w-24 overflow-hidden rounded",
+									children: [product?.image_url ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+										src: product.image_url,
+										alt: variant?.title || "Product image",
+										width: 96,
+										height: 96,
+										className: "h-full w-full object-cover"
+									}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+										className: "text-muted-foreground flex h-full w-full items-center justify-center",
+										children: "No image"
+									}), quantity > 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "bg-foreground text-background absolute -top-2 -right-2 z-10 flex h-6 w-6 items-center justify-center rounded-full text-xs font-medium",
+										children: quantity
+									})]
+								})
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "flex min-w-0 flex-col space-y-0.5",
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+										className: "text-foreground truncate text-sm font-medium",
+										title: product?.title,
+										children: product?.title
+									}),
+									variant?.title && product?.title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+										className: "text-muted-foreground text-sm",
+										children: variant.title
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+										className: "text-foreground text-sm font-medium",
+										children: formatCurrency(subscription.price * quantity)
+									}) })
+								]
+							})]
+						})
+					})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "mb-4",
+					children: [
+						discount > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "flex justify-between text-sm",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "text-muted-foreground text-sm font-medium",
+								children: "Subtotal"
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "text-muted-foreground text-sm font-medium",
+								children: subtotal
+							})]
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "mt-2 flex justify-between text-sm",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "text-muted-foreground text-sm font-medium",
+								children: "Discount"
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+								className: "text-muted-foreground text-sm font-medium",
+								children: ["-", formatCurrency(discount * quantity)]
+							})]
+						})] }),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "mt-4 flex items-center justify-between text-base font-medium",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "text-muted-foreground text-sm font-medium",
+								children: "Total"
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "text-foreground text-base font-bold",
+								children: formatCurrency(subscription.price * quantity)
+							})]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "text-muted-foreground text-xs",
+							children: "*Tax and shipping calculated at checkout"
+						})
+					]
+				})
+			]
+		})
+	});
+}
+function SubscriptionManagementSection({ subscription, isActive, isPaused, isCancelled, isMutating, onSkip, onPause, onResume, onCancel, onReactivate }) {
+	const plan = subscription.subscription_plan;
+	const quantity = subscription.quantity;
+	const totalPrice = formatCurrency(subscription.price * quantity);
+	const paymentMethod = subscription.payment_method;
+	const paymentDetails = paymentMethod?.details;
+	const actionButtonClass = "flex h-auto flex-row items-center justify-center gap-2 overflow-hidden border border-border bg-muted py-2 text-xs whitespace-nowrap text-foreground hover:bg-accent sm:text-sm";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "bg-background col-span-4 flex-auto px-8 pt-4",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "mx-auto max-w-lg lg:mx-0 lg:mr-auto",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "border-border mb-6 border-b pb-6",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+						className: "text-foreground mb-3 text-sm/6 font-semibold",
+						children: "Order Actions"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "grid grid-cols-1 gap-3 sm:grid-cols-2",
+						children: [
+							isActive && plan.allow_skipping && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Button, {
+								variant: "outline",
+								onClick: onSkip,
+								disabled: isMutating || !subscription.next_bill_date,
+								className: actionButtonClass,
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.SkipForward, { className: "h-3 w-3 shrink-0" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "truncate",
+									children: "Skip Next Order"
+								})]
+							}),
+							isActive && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Button, {
+								variant: "outline",
+								onClick: onPause,
+								disabled: isMutating,
+								className: actionButtonClass,
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Pause, { className: "h-3 w-3 shrink-0" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "truncate",
+									children: "Pause Subscription"
+								})]
+							}),
+							isPaused && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Button, {
+								variant: "outline",
+								onClick: onResume,
+								disabled: isMutating,
+								className: actionButtonClass,
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Play, { className: "h-3 w-3 shrink-0" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "truncate",
+									children: "Resume Subscription"
+								})]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Button, {
+								variant: "outline",
+								onClick: onCancel,
+								disabled: isMutating || isCancelled,
+								className: actionButtonClass,
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.XCircle, { className: "h-3 w-3 shrink-0" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "truncate",
+									children: isCancelled ? "Cancelled" : "Cancel Subscription"
+								})]
+							}),
+							isCancelled && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src.Button, {
+								variant: "outline",
+								onClick: onReactivate,
+								disabled: isMutating,
+								className: actionButtonClass,
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.RotateCcw, { className: "h-3 w-3 shrink-0" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "truncate",
+									children: "Reactivate Subscription"
+								})]
+							})
+						]
+					})]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "border-border mb-4 border-b",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "mb-4 flex items-center justify-between",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+							className: "text-foreground text-sm/6 font-semibold",
+							children: "Subscription Details"
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatusPill, {
+							status: subscription.status,
+							children: startCase(subscription.status)
+						})]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "divide-border mb-4 flex divide-x",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "flex-1 pr-4",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: "text-muted-foreground text-sm",
+									children: "Order Frequency"
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: "text-foreground font-medium",
+									children: formatSubscriptionFrequency(plan.billing_interval_unit)
+								})]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "flex-1 px-4",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: "text-muted-foreground text-sm",
+									children: "Next Payment"
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: "text-foreground font-medium",
+									children: totalPrice
+								})]
+							}),
+							subscription.last_bill_date && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "flex-1 pl-4 text-right",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: "text-muted-foreground text-sm",
+									children: "Last Billed"
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: "text-foreground font-medium",
+									children: formatDate(subscription.last_bill_date)
+								})]
+							})
+						]
+					})]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "pt-2",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+						className: "text-foreground text-sm/6 font-semibold",
+						children: "Payment & Shipping"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex flex-col",
+						children: [subscription.address && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "border-border mb-6 border-b pb-4",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "text-muted-foreground mt-3 mb-1 text-sm",
+								children: "Shipping Address"
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "text-foreground text-sm",
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+										className: "font-medium",
+										children: subscription.address.name
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: subscription.address.address1 }),
+									subscription.address.address2 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: subscription.address.address2 }),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", { children: [
+										[subscription.address.city, subscription.address.state].filter(Boolean).join(", "),
+										" ",
+										subscription.address.postal_code
+									] }),
+									subscription.address.country_code && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: subscription.address.country_code })
+								]
+							})]
+						}), paymentMethod && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "border-border mb-6 border-b pb-4",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "text-muted-foreground mb-1 text-sm",
+								children: "Payment Method"
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "text-foreground flex items-center gap-2 text-sm",
+								children: [paymentDetails?.logo_url && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+									src: paymentDetails.logo_url,
+									alt: paymentDetails.card_type ?? "Card",
+									className: "h-6"
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+									className: "font-medium",
+									children: [paymentDetails?.card_type ? startCase(paymentDetails.card_type) : paymentMethod.payment_type, paymentDetails?.last4 ? ` ending in ${paymentDetails.last4}` : ""]
+								})]
+							})]
+						})]
+					})]
+				}),
+				subscription.orders.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "border-border mb-4 border-b pb-4",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+						className: "text-foreground mb-3 text-sm/6 font-semibold",
+						children: "Order History"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "overflow-x-auto",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("table", {
+							className: "divide-border min-w-full divide-y text-sm",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", { children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+									className: "text-muted-foreground py-2 pr-3 text-left font-medium",
+									children: "Order"
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+									className: "text-muted-foreground px-3 py-2 text-left font-medium",
+									children: "Date"
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+									className: "text-muted-foreground px-3 py-2 text-left font-medium",
+									children: "Status"
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
+									className: "text-muted-foreground py-2 pl-3 text-right font-medium",
+									children: "Amount"
+								})
+							] }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", {
+								className: "divide-border divide-y",
+								children: subscription.orders.map((order) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", { children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+										className: "text-foreground py-2 pr-3 font-medium",
+										children: order.order_number ?? `#${order.id}`
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+										className: "text-muted-foreground px-3 py-2",
+										children: formatDate(order.created_at.split("T")[0] ?? "")
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+										className: "px-3 py-2",
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatusPill, {
+											status: order.status,
+											children: startCase(order.status)
+										})
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+										className: "text-foreground py-2 pl-3 text-right",
+										children: order.amount != null ? formatCurrency(Number(order.amount)) : "N/A"
+									})
+								] }, order.id))
+							})]
+						})
+					})]
+				})
+			]
+		})
+	});
+}
+function SubscriptionDetail({ token, onNotFound, onError, onSuccess, onMutationError }) {
+	const [showCancelModal, setShowCancelModal] = (0, react.useState)(false);
+	const { data, isLoading, error } = useSubscription(token);
+	const subscription = data?.subscription;
+	const customerId = subscription?.customer?.id ?? 0;
+	const pauseMutation = usePauseSubscription({
+		onSuccess: () => onSuccess?.("Subscription paused"),
+		onError: (err) => onMutationError?.("Failed to pause subscription", err)
+	});
+	const resumeMutation = useResumeSubscription({
+		onSuccess: () => onSuccess?.("Subscription resumed"),
+		onError: (err) => onMutationError?.("Failed to resume subscription", err)
+	});
+	const skipMutation = useSkipSubscription({
+		onSuccess: () => onSuccess?.("Next billing skipped"),
+		onError: (err) => onMutationError?.("Failed to skip billing", err)
+	});
+	const cancelMutation = useCancelSubscription({
+		onSuccess: () => {
+			onSuccess?.("Subscription cancelled");
+			setShowCancelModal(false);
+		},
+		onError: (err) => onMutationError?.("Failed to cancel subscription", err)
+	});
+	const reactivateMutation = useReactivateSubscription({
+		onSuccess: () => onSuccess?.("Subscription reactivated"),
+		onError: (err) => onMutationError?.("Failed to reactivate subscription", err)
+	});
+	(0, react.useEffect)(() => {
+		if (!isLoading && error) onError?.(error);
+	}, [
+		isLoading,
+		error,
+		onError
+	]);
+	(0, react.useEffect)(() => {
+		if (!isLoading && !error && !subscription) onNotFound?.();
+	}, [
+		isLoading,
+		error,
+		subscription,
+		onNotFound
+	]);
+	if (isLoading) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SubscriptionDetailSkeleton, {});
+	if (!subscription) return null;
+	const plan = subscription.subscription_plan;
+	const isActive = subscription.status === "active";
+	const isPaused = subscription.status === "paused";
+	const isCancelled = subscription.status === "cancelled";
+	const isMutating = pauseMutation.isPending || resumeMutation.isPending || skipMutation.isPending || cancelMutation.isPending || reactivateMutation.isPending;
+	const handlePause = () => {
+		pauseMutation.mutate({
+			subscriptionToken: token,
+			pauseParams: { customerId }
+		});
+	};
+	const handleResume = () => {
+		const nextBillDate = calculateNextBillDate(plan.billing_interval, plan.billing_interval_unit);
+		resumeMutation.mutate({
+			subscriptionToken: token,
+			resumeParams: {
+				customerId,
+				nextBillDate
+			}
+		});
+	};
+	const handleSkip = () => {
+		const nextBillDate = calculateNextBillDate(plan.billing_interval, plan.billing_interval_unit);
+		skipMutation.mutate({
+			subscriptionToken: token,
+			skipParams: {
+				customerId,
+				nextBillDate
+			}
+		});
+	};
+	const handleCancel = () => {
+		cancelMutation.mutate({
+			subscriptionToken: token,
+			customerId
+		});
+	};
+	const handleReactivate = () => {
+		reactivateMutation.mutate({
+			subscriptionToken: token,
+			reactivateParams: {}
+		});
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex flex-col lg:grid lg:grid-cols-8",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SubscriptionItemsSection, { subscription }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SubscriptionManagementSection, {
+			subscription,
+			isActive,
+			isPaused,
+			isCancelled,
+			isMutating,
+			onSkip: handleSkip,
+			onPause: handlePause,
+			onResume: handleResume,
+			onCancel: () => setShowCancelModal(true),
+			onReactivate: handleReactivate
+		})]
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ConfirmDialog, {
+		title: "Cancel Subscription",
+		actionButtonText: "Cancel Subscription",
+		description: "Are you sure you want to cancel this subscription? You can reactivate it later.",
+		open: showCancelModal,
+		setOpen: setShowCancelModal,
+		onConfirm: handleCancel
+	})] });
+}
+//#endregion
+//#region src/screens/SubscriptionsListScreen.tsx
+const translations = {
+	all: "All",
+	active: "Active",
+	inactive: "Inactive",
+	search: "Search",
+	subscriptions: "Search subscriptions...",
+	product: "Product",
+	next_bill_date: "Next Bill Date",
+	price: "Price",
+	status: "Status",
+	no_subscriptions_found: "No subscriptions found",
+	unknown_status: "Unknown",
+	total: "Total",
+	results: "results",
+	previous: "Previous",
+	next: "Next",
+	pagination: "Pagination"
+};
+function SubscriptionsListScreen({ customerId, isLoadingCustomer }) {
+	const subscriptionsClient = require_use_account_clients.useSubscriptionsClient();
+	const { navigate } = require_AppNavigationContext.useAppNavigation();
+	if (isLoadingCustomer) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "mx-auto max-w-7xl px-4 py-4 sm:px-6 sm:py-6 lg:px-10 lg:py-8",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "space-y-3",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "bg-muted h-10 animate-pulse rounded" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "bg-muted h-64 animate-pulse rounded" })]
+		})
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SubscriptionsCoreProvider, {
+		client: subscriptionsClient,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "mx-auto max-w-7xl px-4 py-4 sm:px-6 sm:py-6 lg:px-10 lg:py-8",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SubscriptionsList, {
+				customerId,
+				onSubscriptionClick: (subscriptionToken) => navigate(`subscriptions/${subscriptionToken}`),
+				t: (key) => translations[key] ?? key
+			})
+		})
+	});
+}
+//#endregion
+//#region src/screens/SubscriptionDetailScreen.tsx
+function SubscriptionDetailScreen({ token, onToast }) {
+	const client = require_use_account_clients.useSubscriptionsClient();
+	const { navigate } = require_AppNavigationContext.useAppNavigation();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SubscriptionsCoreProvider, {
+		client,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "mx-auto max-w-7xl px-4 py-4 sm:px-6 sm:py-6 lg:px-10 lg:py-8",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SubscriptionDetail, {
+				token,
+				onNotFound: () => {
+					onToast("Subscription not found", "warning");
+					navigate("subscriptions");
+				},
+				onError: (err) => {
+					onToast(`Failed to load subscription: ${err instanceof Error ? err.message : "An error occurred"}`, "error");
+				},
+				onSuccess: (message) => {
+					onToast(message, "success");
+				},
+				onMutationError: (message, err) => {
+					onToast(`${message}: ${err instanceof Error ? err.message : "An error occurred"}`, "error");
+				}
+			})
+		})
+	});
+}
+//#endregion
+//#region src/screens/SubscriptionsScreen.tsx
+function defaultToast(message, type) {
+	if (type === "error" || type === "warning") console.warn("[Subscriptions]", message);
+	else console.info("[Subscriptions]", message);
+}
+function SubscriptionsScreen({ onToast, background, textColor, accentColor, padding, borderRadius, ...divProps }) {
+	const { currentSlug } = require_AppNavigationContext.useAppNavigation();
+	const effectiveToast = onToast ?? defaultToast;
+	const detailToken = currentSlug.split("/")[1];
+	const isDetailView = detailToken !== void 0;
+	const { customerId, isLoadingCustomer, isCustomerError } = require_src$1.useCustomerAccount({ enabled: !isDetailView });
+	if (isDetailView) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...divProps,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SubscriptionDetailScreen, {
+			token: detailToken,
+			onToast: effectiveToast
+		})
+	});
+	if (isCustomerError && !isLoadingCustomer) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...divProps,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "text-muted-foreground px-4 py-8 text-center text-sm",
+			children: "Unable to load account data. Please try again later."
+		})
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...divProps,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SubscriptionsListScreen, {
+			customerId,
+			isLoadingCustomer
+		})
+	});
+}
+const subscriptionsScreenPropertySchema = {
+	widgetType: "SubscriptionsScreen",
+	displayName: "Subscriptions Screen",
+	tabsConfig: [{
+		id: "styling",
+		label: "Styling"
+	}],
+	fields: []
+};
+//#endregion
+Object.defineProperty(exports, "SubscriptionsScreen", {
+	enumerable: true,
+	get: function() {
+		return SubscriptionsScreen;
+	}
+});
+Object.defineProperty(exports, "subscriptionsScreenPropertySchema", {
+	enumerable: true,
+	get: function() {
+		return subscriptionsScreenPropertySchema;
+	}
+});
+
+//# sourceMappingURL=SubscriptionsScreen-CHn_Q0zf.cjs.map