@fluid-app/portal-sdk 0.1.13 → 0.1.15

package/dist/AccountScreen-CbhrIAa4.cjs

@@ -0,0 +1,780 @@
+const require_FluidProvider = require("./FluidProvider-C6SCZDjX.cjs");
+let react = require("react");
+let _tanstack_react_query = require("@tanstack/react-query");
+let _fluid_app_api_client_core = require("@fluid-app/api-client-core");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _fluid_app_fluid_pay_api_client = require("@fluid-app/fluid-pay-api-client");
+let _fluid_app_orders_api_client = require("@fluid-app/orders-api-client");
+let _fluid_app_subscriptions_api_client = require("@fluid-app/subscriptions-api-client");
+let lucide_react = require("lucide-react");
+let react_hook_form = require("react-hook-form");
+let _fluid_app_profile_core = require("@fluid-app/profile-core");
+let _fluid_app_profile_ui = require("@fluid-app/profile-ui");
+let _fluid_app_orders_core = require("@fluid-app/orders-core");
+let _fluid_app_orders_ui = require("@fluid-app/orders-ui");
+let _fluid_app_subscriptions_core = require("@fluid-app/subscriptions-core");
+let _fluid_app_subscriptions_ui = require("@fluid-app/subscriptions-ui");
+//#region src/hooks/use-fluid-auth.ts
+/**
+* useFluidAuth Hook
+*
+* Provides access to authentication state and utilities.
+* This is the primary hook for interacting with auth in components.
+*/
+/**
+* Hook to access authentication state and utilities.
+*
+* Must be used within a `FluidAuthProvider`.
+*
+* @returns Authentication context with user info, loading state, and utilities
+* @throws Error if used outside FluidAuthProvider
+*
+* @example
+* ```tsx
+* function UserProfile() {
+*   const { isAuthenticated, isLoading, user, clearAuth } = useFluidAuth();
+*
+*   if (isLoading) {
+*     return <Spinner />;
+*   }
+*
+*   if (!isAuthenticated) {
+*     return <p>Please log in</p>;
+*   }
+*
+*   return (
+*     <div>
+*       <p>Welcome, {user.full_name}!</p>
+*       <button onClick={clearAuth}>Log out</button>
+*     </div>
+*   );
+* }
+* ```
+*/
+function useFluidAuth() {
+	return require_FluidProvider.useFluidAuthContext();
+}
+//#endregion
+//#region src/account/use-account-clients.ts
+/** API version prefix for versioned endpoints (e.g. points ledger) */
+const API_VERSION = "/v202506";
+function useOrdersClient() {
+	const { config } = require_FluidProvider.useFluidContext();
+	const { token } = useFluidAuth();
+	return (0, react.useMemo)(() => (0, _fluid_app_orders_api_client.createFetchClient)({
+		baseUrl: config.baseUrl,
+		getAuthToken: () => token,
+		onAuthError: config.onAuthError
+	}), [
+		config.baseUrl,
+		config.onAuthError,
+		token
+	]);
+}
+function useSubscriptionsClient() {
+	const { config } = require_FluidProvider.useFluidContext();
+	const { token } = useFluidAuth();
+	return (0, react.useMemo)(() => (0, _fluid_app_subscriptions_api_client.createFetchClient)({
+		baseUrl: config.baseUrl,
+		getAuthToken: () => token,
+		onAuthError: config.onAuthError
+	}), [
+		config.baseUrl,
+		config.onAuthError,
+		token
+	]);
+}
+function useFluidPayClient() {
+	const { config } = require_FluidProvider.useFluidContext();
+	const { token } = useFluidAuth();
+	return (0, react.useMemo)(() => (0, _fluid_app_fluid_pay_api_client.createFetchClient)({
+		baseUrl: config.baseUrl,
+		getAuthToken: () => token,
+		onAuthError: config.onAuthError
+	}), [
+		config.baseUrl,
+		config.onAuthError,
+		token
+	]);
+}
+/**
+* Generic SDK fetch client for endpoints not covered by domain-specific clients
+* (e.g. /countries, /v202506/customers/:id/points_ledgers).
+* Uses the same auth/baseUrl/error handling as the domain clients.
+*/
+function useSdkClient() {
+	const { config } = require_FluidProvider.useFluidContext();
+	const { token } = useFluidAuth();
+	return (0, react.useMemo)(() => (0, _fluid_app_api_client_core.createFetchClient)({
+		baseUrl: config.baseUrl,
+		getAuthToken: () => token,
+		onAuthError: config.onAuthError
+	}), [
+		config.baseUrl,
+		config.onAuthError,
+		token
+	]);
+}
+//#endregion
+//#region src/shell/AppNavigationContext.tsx
+const AppNavigationContext = (0, react.createContext)(null);
+function AppNavigationProvider({ currentSlug, basePath, navigate, children }) {
+	const buildHref = (0, react.useMemo)(() => {
+		return (slug) => {
+			if (basePath === "/") return `/${slug}`;
+			return `${basePath}/${slug}`;
+		};
+	}, [basePath]);
+	const value = (0, react.useMemo)(() => ({
+		currentSlug,
+		basePath,
+		navigate,
+		buildHref
+	}), [
+		currentSlug,
+		basePath,
+		navigate,
+		buildHref
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AppNavigationContext.Provider, {
+		value,
+		children
+	});
+}
+function useAppNavigation() {
+	const ctx = (0, react.useContext)(AppNavigationContext);
+	if (!ctx) throw new Error("useAppNavigation must be used within an <AppShell> or <AppNavigationProvider>");
+	return ctx;
+}
+//#endregion
+//#region src/account/AccountManageLayout.tsx
+const NAV_ITEMS = [
+	{
+		key: "profile",
+		label: "Profile",
+		slug: "account/profile",
+		icon: lucide_react.User
+	},
+	{
+		key: "orders",
+		label: "Orders",
+		slug: "account/orders",
+		icon: lucide_react.PackageOpen
+	},
+	{
+		key: "subscriptions",
+		label: "Subscriptions",
+		slug: "account/subscriptions",
+		icon: lucide_react.Repeat
+	}
+];
+function getActiveTab(slug) {
+	const sub = slug.split("/")[1];
+	if (sub === "orders") return "orders";
+	if (sub === "subscriptions") return "subscriptions";
+	return "profile";
+}
+function AccountManageLayout({ children }) {
+	const { currentSlug, navigate } = useAppNavigation();
+	const activeTab = getActiveTab(currentSlug);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex flex-col md:flex-row",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("nav", {
+				className: "flex gap-1 overflow-x-auto border-b px-4 py-2 md:hidden",
+				children: NAV_ITEMS.map(({ key, slug, label, icon: Icon }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+					type: "button",
+					onClick: () => navigate(slug),
+					className: `flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium whitespace-nowrap ${activeTab === key ? "bg-sidebar-primary text-sidebar-primary-foreground" : "hover:bg-sidebar-primary hover:text-sidebar-primary-foreground"}`,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { className: "h-4 w-4" }), label]
+				}, key))
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("nav", {
+				className: "hidden w-48 shrink-0 flex-col gap-1 p-4 md:flex",
+				children: NAV_ITEMS.map(({ key, slug, label, icon: Icon }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+					type: "button",
+					onClick: () => navigate(slug),
+					className: `flex items-center gap-2 rounded-md px-3 py-2 text-left text-sm font-medium ${activeTab === key ? "bg-sidebar-primary text-sidebar-primary-foreground" : "hover:bg-sidebar-primary hover:text-sidebar-primary-foreground"}`,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { className: "h-4 w-4" }), label]
+				}, key))
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "min-w-0 flex-1",
+				children
+			})
+		]
+	});
+}
+//#endregion
+//#region src/screens/AccountProfileScreen.tsx
+const translations$2 = {
+	edit_profile: "Edit Profile",
+	first_name: "First Name",
+	last_name: "Last Name",
+	phone_number: "Phone Number",
+	language: "Language",
+	first_name_is_required: "First name is required",
+	last_name_is_required: "Last name is required",
+	language_is_required: "Language is required",
+	saving: "Saving...",
+	save_changes: "Save Changes",
+	select_an_option: "Select an option",
+	points_history: "Points History",
+	points_available: "Points Available",
+	points_awarded: "Points Awarded",
+	points_redeemed: "Points Redeemed",
+	transaction: "Transaction",
+	no_points_history_found: "No points history found",
+	shipping_addresses: "Shipping Addresses",
+	add_an_address: "Add an Address",
+	delete_address: "Delete Address",
+	delete_address_message: "Are you sure you want to delete this address? This action cannot be undone.",
+	delete: "Delete",
+	add_address: "Add Address",
+	edit_address: "Edit Address",
+	set_as_default_address: "Set as default address",
+	save_address: "Save Address",
+	card_number: "Card Number",
+	expiration_date: "Expiration (MM / YY)",
+	cvc: "CVC",
+	cardholder_name: "Cardholder Name",
+	add_credit_card: "Add Credit Card",
+	save_card: "Save Card",
+	securing: "Loading secure form...",
+	payment_methods: "Payment Methods",
+	add_payment_method: "Add Payment Method",
+	delete_credit_card: "Delete Credit Card",
+	delete_credit_card_message: "Are you sure you want to delete this payment method? This action cannot be undone.",
+	edit_card: "Card Details",
+	billing_address: "Billing Address",
+	country: "Country",
+	name: "Name",
+	address_line_1: "Address Line 1",
+	address_line_2: "Address Line 2",
+	city: "City",
+	state: "State",
+	province: "Province",
+	zip_code: "Zip Code",
+	postal_code: "Postal Code",
+	select_state: "Select state",
+	set_as_default_payment_method: "Set as default payment method",
+	cancel: "Cancel",
+	save: "Save",
+	close: "Close",
+	edit: "Edit",
+	default: "Default",
+	card_expires: "Expires",
+	no_billing_address: "No billing address on file",
+	default_payment_method_updated: "Payment method updated",
+	failed_to_set_default_payment_method: "Failed to update payment method"
+};
+function t(key) {
+	if (translations$2[key]) return translations$2[key];
+	return key.split("_").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
+}
+function adaptPointsLedger(entry) {
+	return {
+		id: entry.id,
+		amount: entry.amount,
+		company_id: 0,
+		created_at: entry.created_at,
+		customer_id: entry.customer_id,
+		metadata: {
+			transaction_type: entry.metadata?.transaction_type ?? void 0,
+			source: entry.metadata?.source ?? void 0
+		},
+		total_balance: entry.total_balance ?? 0,
+		updated_at: entry.created_at
+	};
+}
+function AccountProfileScreen({ onToast, countryIso }) {
+	const { token, user } = useFluidAuth();
+	const client = useFluidPayClient();
+	const sdkClient = useSdkClient();
+	const queryClient = (0, _tanstack_react_query.useQueryClient)();
+	const jwt = token ?? "";
+	const userId = user?.id;
+	const { data: accountData, isLoading: isLoadingAccount, isError: isAccountError } = (0, _tanstack_react_query.useQuery)({
+		queryKey: ["fluidPayAccount", userId],
+		queryFn: () => _fluid_app_fluid_pay_api_client.customersApi.fetchCustomerAccount(client, jwt),
+		enabled: !!jwt
+	});
+	const { data: addressesData, isLoading: isLoadingAddresses } = (0, _tanstack_react_query.useQuery)({
+		queryKey: ["fluidPayAddresses", userId],
+		queryFn: () => _fluid_app_fluid_pay_api_client.addressesApi.fetchCustomerAddresses(client, jwt),
+		enabled: !!jwt
+	});
+	const { data: paymentMethodsData, isLoading: isLoadingPaymentMethods } = (0, _tanstack_react_query.useQuery)({
+		queryKey: [
+			"fluidPayPaymentMethods",
+			userId,
+			countryIso
+		],
+		queryFn: () => _fluid_app_fluid_pay_api_client.paymentMethodsApi.fetchCustomerPaymentMethods(client, jwt, countryIso),
+		enabled: !!jwt
+	});
+	const { data: countriesData } = (0, _tanstack_react_query.useQuery)({
+		queryKey: ["sdk-countries"],
+		queryFn: () => sdkClient.get("/countries"),
+		initialData: []
+	});
+	const customerId = accountData?.customer?.id;
+	const { data: pointsLedgerData, isLoading: isLoadingPointsLedger } = (0, _tanstack_react_query.useQuery)({
+		queryKey: ["customer-points-ledger", customerId],
+		queryFn: () => sdkClient.get(`${API_VERSION}/customers/${customerId}/points_ledgers`),
+		enabled: !!customerId
+	});
+	const updateCustomerMutation = (0, _tanstack_react_query.useMutation)({
+		mutationFn: (data) => {
+			const languageIso = adaptedLanguages?.find((l) => l.name === data.language)?.iso ?? "en";
+			return _fluid_app_fluid_pay_api_client.customersApi.updateCustomer(client, jwt, {
+				first_name: data.first_name,
+				last_name: data.last_name,
+				phone: data.phone_number,
+				language_iso: languageIso
+			});
+		},
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: ["fluidPayAccount", userId] });
+			onToast("Profile updated", "success");
+		},
+		onError: () => {
+			onToast("Failed to update profile", "error");
+		}
+	});
+	const deleteAddressMutation = (0, _tanstack_react_query.useMutation)({
+		mutationFn: (addressId) => _fluid_app_fluid_pay_api_client.addressesApi.deleteCustomerAddress(client, jwt, addressId),
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: ["fluidPayAddresses", userId] });
+		}
+	});
+	const deletePaymentMethodMutation = (0, _tanstack_react_query.useMutation)({
+		mutationFn: (paymentMethodId) => _fluid_app_fluid_pay_api_client.paymentMethodsApi.deleteCustomerPaymentMethod(client, jwt, paymentMethodId),
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: [
+				"fluidPayPaymentMethods",
+				userId,
+				countryIso
+			] });
+		}
+	});
+	const updatePaymentMethodMutation = (0, _tanstack_react_query.useMutation)({
+		mutationFn: ({ paymentMethodId, data }) => _fluid_app_fluid_pay_api_client.paymentMethodsApi.updatePaymentMethod(client, jwt, paymentMethodId, {
+			set_as_default: data.set_as_default,
+			billing_address: data.billing_address
+		}),
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: [
+				"fluidPayPaymentMethods",
+				userId,
+				countryIso
+			] });
+		}
+	});
+	const createAddressMutation = (0, _tanstack_react_query.useMutation)({
+		mutationFn: (body) => _fluid_app_fluid_pay_api_client.addressesApi.createCustomerAddress(client, jwt, body),
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: ["fluidPayAddresses", userId] });
+			onToast("Address created", "success");
+		},
+		onError: () => {
+			onToast("Failed to create address", "error");
+		}
+	});
+	const updateAddressMutation = (0, _tanstack_react_query.useMutation)({
+		mutationFn: ({ addressId, body }) => _fluid_app_fluid_pay_api_client.addressesApi.updateCustomerAddress(client, jwt, addressId, body),
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: ["fluidPayAddresses", userId] });
+			onToast("Address updated", "success");
+		},
+		onError: () => {
+			onToast("Failed to update address", "error");
+		}
+	});
+	const addCreditCardMutation = (0, _tanstack_react_query.useMutation)({
+		mutationFn: (data) => _fluid_app_fluid_pay_api_client.paymentMethodsApi.addCreditCardToCustomer(client, jwt, data),
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: [
+				"fluidPayPaymentMethods",
+				userId,
+				countryIso
+			] });
+			onToast("Payment method added", "success");
+		},
+		onError: () => {
+			onToast("Failed to add payment method", "error");
+		}
+	});
+	const addresses = addressesData?.addresses ?? [];
+	const paymentMethods = paymentMethodsData?.payment_methods ?? [];
+	const adaptedPointsLedger = pointsLedgerData?.points_ledgers?.map(adaptPointsLedger) ?? [];
+	const adaptedLanguages = [{
+		id: 0,
+		name: "English",
+		iso: "en"
+	}];
+	const countryOptions = (0, react.useMemo)(() => [...countriesData].map((c) => ({
+		iso: c.iso,
+		name: c.name
+	})).sort((a, b) => a.name.localeCompare(b.name)), [countriesData]);
+	if (!token) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "px-4 py-8 sm:px-9",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "rounded-lg border p-4 text-center",
+			children: "Login Required"
+		})
+	});
+	if (isAccountError && !isLoadingAccount) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "px-4 py-8 sm:px-9",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "text-muted-foreground text-center text-sm",
+			children: "Unable to load account data. Please try again later."
+		})
+	});
+	if (isLoadingAccount || !accountData) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "px-4 pt-4 sm:px-9 md:pt-8",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "space-y-4",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "bg-muted h-16 animate-pulse rounded" }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "bg-muted h-32 animate-pulse rounded" }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "bg-muted h-32 animate-pulse rounded" })
+			]
+		})
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "px-4 pt-4 sm:px-9 md:pt-8",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_fluid_app_profile_core.ProfileUIProvider, {
+			t,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_fluid_app_profile_ui.Profile, {
+				customerAccount: accountData,
+				languages: adaptedLanguages,
+				onUpdateCustomer: async (data) => {
+					await updateCustomerMutation.mutateAsync(data);
+				},
+				isUpdatingCustomer: updateCustomerMutation.isPending,
+				rewardsPointsEnabled: adaptedPointsLedger.length > 0,
+				pointsLedger: adaptedPointsLedger,
+				isLoadingPointsLedger,
+				addresses,
+				isLoadingAddresses,
+				onDeleteAddress: async (addressId) => {
+					await deleteAddressMutation.mutateAsync(addressId);
+				},
+				isDeletingAddress: deleteAddressMutation.isPending,
+				paymentMethods,
+				isLoadingPaymentMethods,
+				onDeletePaymentMethod: async (paymentMethodId) => {
+					await deletePaymentMethodMutation.mutateAsync(paymentMethodId);
+				},
+				isDeletingPaymentMethod: deletePaymentMethodMutation.isPending,
+				onUpdatePaymentMethod: async (paymentMethodId, data) => {
+					await updatePaymentMethodMutation.mutateAsync({
+						paymentMethodId,
+						data
+					});
+				},
+				isUpdatingPaymentMethod: updatePaymentMethodMutation.isPending,
+				getBillingAddress: (pm) => pm.billing_address ?? null,
+				countries: countryOptions,
+				renderAddressDialog: ({ isOpen, onClose, selectedAddress }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_fluid_app_profile_ui.AddressFormDialog, {
+					isOpen,
+					onClose,
+					selectedAddress,
+					t,
+					onSubmit: async (formData) => {
+						if (selectedAddress) await updateAddressMutation.mutateAsync({
+							addressId: selectedAddress.id,
+							body: formData
+						});
+						else await createAddressMutation.mutateAsync(formData);
+						onClose();
+					},
+					isSubmitting: createAddressMutation.isPending || updateAddressMutation.isPending,
+					countries: countryOptions,
+					renderAddressAutocomplete: ({ control, setValue: _setValue }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PlainAddressInput, {
+						control,
+						name: "address1"
+					})
+				}),
+				renderCreditCardDialog: ({ isOpen, onClose }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_fluid_app_profile_ui.CreditCardFormDialog, {
+					isOpen,
+					onClose,
+					t,
+					onSubmit: async (data) => {
+						await addCreditCardMutation.mutateAsync(data);
+						onClose();
+					},
+					isSubmitting: addCreditCardMutation.isPending,
+					countries: countryOptions,
+					jwt,
+					client,
+					renderAddressAutocomplete: ({ control, setValue: _setValue }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PlainAddressInput, {
+						control,
+						name: "address1"
+					})
+				})
+			})
+		})
+	});
+}
+/**
+* Plain text input fallback for address autocomplete.
+* The SDK doesn't have Google Places integration.
+*/
+function PlainAddressInput({ control, name }) {
+	const { field } = (0, react_hook_form.useController)({
+		control,
+		name
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+		type: "text",
+		value: field.value ?? "",
+		placeholder: "Address Line 1",
+		className: "border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+		onChange: field.onChange
+	});
+}
+//#endregion
+//#region src/screens/AccountOrdersScreen.tsx
+const translations$1 = {
+	search_orders: "Search orders...",
+	order_number: "Order #",
+	date: "Date",
+	status: "Status",
+	product: "Product",
+	no_orders_found: "No orders found",
+	no_matching_orders: "No matching orders",
+	no_image_available: "No image available",
+	this_product_no_longer_exists: "This product no longer exists",
+	subscription: "Subscription",
+	view_subscription: "View Subscription",
+	total: "Total",
+	results: "results",
+	previous: "Previous",
+	next: "Next",
+	pagination: "Pagination"
+};
+function AccountOrdersScreen({ customerId, isLoadingCustomer }) {
+	const ordersClient = useOrdersClient();
+	const { navigate } = useAppNavigation();
+	const handleOrderClick = (order) => {
+		navigate(`account/orders/${order.token}`);
+	};
+	const handleSubscriptionClick = (subscriptionToken) => {
+		navigate(`account/subscriptions/${subscriptionToken}`);
+	};
+	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)(_fluid_app_orders_core.OrdersCoreProvider, {
+		client: ordersClient,
+		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)(_fluid_app_orders_ui.OrdersList, {
+				customerId,
+				onOrderClick: handleOrderClick,
+				onSubscriptionClick: handleSubscriptionClick,
+				t: (key) => translations$1[key] ?? key
+			})
+		})
+	});
+}
+//#endregion
+//#region src/screens/AccountOrderDetailScreen.tsx
+function AccountOrderDetailScreen({ token, onToast }) {
+	const client = useOrdersClient();
+	const { navigate } = useAppNavigation();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_fluid_app_orders_core.OrdersCoreProvider, {
+		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)(_fluid_app_orders_ui.OrderDetail, {
+				token,
+				onNotFound: () => {
+					onToast("Order not found", "warning");
+					navigate("account/orders");
+				},
+				onError: (err) => {
+					onToast(`Failed to load order: ${err instanceof Error ? err.message : "An error occurred"}`, "error");
+				}
+			})
+		})
+	});
+}
+//#endregion
+//#region src/screens/AccountSubscriptionsScreen.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 AccountSubscriptionsScreen({ customerId, isLoadingCustomer }) {
+	const subscriptionsClient = useSubscriptionsClient();
+	const { navigate } = 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)(_fluid_app_subscriptions_core.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)(_fluid_app_subscriptions_ui.SubscriptionsList, {
+				customerId,
+				onSubscriptionClick: (subscriptionToken) => navigate(`account/subscriptions/${subscriptionToken}`),
+				t: (key) => translations[key] ?? key
+			})
+		})
+	});
+}
+//#endregion
+//#region src/screens/AccountSubscriptionDetailScreen.tsx
+function AccountSubscriptionDetailScreen({ token, onToast }) {
+	const client = useSubscriptionsClient();
+	const { navigate } = useAppNavigation();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_fluid_app_subscriptions_core.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)(_fluid_app_subscriptions_ui.SubscriptionDetail, {
+				token,
+				onNotFound: () => {
+					onToast("Subscription not found", "warning");
+					navigate("account/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/AccountScreen.tsx
+var AccountScreen_exports = /* @__PURE__ */ require_FluidProvider.__exportAll({
+	AccountScreen: () => AccountScreen,
+	accountScreenPropertySchema: () => accountScreenPropertySchema
+});
+function defaultToast(message, type) {
+	if (type === "error" || type === "warning") console.warn("[Account]", message);
+	else console.info("[Account]", message);
+}
+function AccountScreen({ onToast, background, textColor, accentColor, padding, borderRadius, ...divProps }) {
+	const { currentSlug } = useAppNavigation();
+	const { config } = require_FluidProvider.useFluidContext();
+	const effectiveToast = onToast ?? defaultToast;
+	const { token, user } = useFluidAuth();
+	const fluidPayClient = useFluidPayClient();
+	const jwt = token ?? "";
+	const { data: customerData, isLoading: isLoadingCustomer, isError: isCustomerError } = (0, _tanstack_react_query.useQuery)({
+		queryKey: ["fluidPayAccount", user?.id],
+		queryFn: () => _fluid_app_fluid_pay_api_client.customersApi.fetchCustomerAccount(fluidPayClient, jwt),
+		enabled: !!jwt
+	});
+	const customerId = customerData?.customer?.id;
+	const countryIso = config.countryIso ?? "US";
+	const parts = currentSlug.split("/");
+	const subRoute = parts[1];
+	const detailToken = parts[2];
+	if ((subRoute === "orders" && !detailToken || subRoute === "subscriptions" && !detailToken) && isCustomerError && !isLoadingCustomer) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...divProps,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AccountManageLayout, { 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)(AccountManageLayout, { children: subRoute === "orders" && detailToken ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AccountOrderDetailScreen, {
+			token: detailToken,
+			onToast: effectiveToast
+		}) : subRoute === "orders" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AccountOrdersScreen, {
+			customerId,
+			isLoadingCustomer
+		}) : subRoute === "subscriptions" && detailToken ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AccountSubscriptionDetailScreen, {
+			token: detailToken,
+			onToast: effectiveToast
+		}) : subRoute === "subscriptions" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AccountSubscriptionsScreen, {
+			customerId,
+			isLoadingCustomer
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AccountProfileScreen, {
+			onToast: effectiveToast,
+			countryIso
+		}) })
+	});
+}
+const accountScreenPropertySchema = {
+	widgetType: "AccountScreen",
+	displayName: "Account Screen",
+	tabsConfig: [{
+		id: "styling",
+		label: "Styling"
+	}],
+	fields: []
+};
+//#endregion
+Object.defineProperty(exports, "AccountScreen", {
+	enumerable: true,
+	get: function() {
+		return AccountScreen;
+	}
+});
+Object.defineProperty(exports, "AccountScreen_exports", {
+	enumerable: true,
+	get: function() {
+		return AccountScreen_exports;
+	}
+});
+Object.defineProperty(exports, "AppNavigationProvider", {
+	enumerable: true,
+	get: function() {
+		return AppNavigationProvider;
+	}
+});
+Object.defineProperty(exports, "accountScreenPropertySchema", {
+	enumerable: true,
+	get: function() {
+		return accountScreenPropertySchema;
+	}
+});
+Object.defineProperty(exports, "useAppNavigation", {
+	enumerable: true,
+	get: function() {
+		return useAppNavigation;
+	}
+});
+Object.defineProperty(exports, "useFluidAuth", {
+	enumerable: true,
+	get: function() {
+		return useFluidAuth;
+	}
+});
+
+//# sourceMappingURL=AccountScreen-CbhrIAa4.cjs.map