@stackframe/tanstack-start 0.0.1 → 2.8.91

package/dist/components-page/account-settings/notifications/notifications-page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"notifications-page.js","names":["PageLayout","Separator","Typography","Switch"],"sources":["../../../../src/components-page/account-settings/notifications/notifications-page.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY, INSTEAD EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\nimport { useUser } from \"../../../lib/hooks\";\nimport { useTranslation } from \"../../../lib/translations\";\nimport { PageLayout } from \"../page-layout\";\nimport { Switch } from \"@stackframe/stack-ui\";\nimport { Separator, Typography } from \"@stackframe/stack-ui\";\n\n\nexport function NotificationsPage() {\n  const { t } = useTranslation();\n  const user = useUser({ or: 'redirect' });\n  const notificationCategories = user.useNotificationCategories();\n\n  return (\n    <PageLayout>\n      <Separator />\n      <div className='flex flex-col gap-2'>\n        <div className='sm:flex-1 flex flex-col justify-center pb-2'>\n          <Typography className=\"font-medium\">\n            {t('Choose which emails you want to receive')}\n          </Typography>\n        </div>\n        {notificationCategories.map((category) => (\n          <div key={category.id} className=\"flex justify-start gap-4 items-center\">\n            <Switch\n              checked={category.enabled}\n              onCheckedChange={(value) => void category.setEnabled(value)}\n              disabled={!category.canDisable}\n            />\n            <Typography>{category.name}</Typography>\n            {!category.canDisable && (\n              <Typography variant='secondary' type='footnote'>\n                (cannot be disabled)\n              </Typography>\n            )}\n          </div>\n        ))}\n      </div>\n    </PageLayout>\n  );\n}\n"],"mappings":";;;;;;;;;AAWA,SAAgB,oBAAoB;CAClC,MAAM,EAAE,wDAAsB;CAE9B,MAAM,4DADe,EAAE,IAAI,YAAY,CAAC,CACJ,2BAA2B;AAE/D,QACE,4CAACA,2CACC,2CAACC,mCAAY,EACb,4CAAC;EAAI,WAAU;aACb,2CAAC;GAAI,WAAU;aACb,2CAACC;IAAW,WAAU;cACnB,EAAE,0CAA0C;KAClC;IACT,EACL,uBAAuB,KAAK,aAC3B,4CAAC;GAAsB,WAAU;;IAC/B,2CAACC;KACC,SAAS,SAAS;KAClB,kBAAkB,UAAU,KAAK,SAAS,WAAW,MAAM;KAC3D,UAAU,CAAC,SAAS;MACpB;IACF,2CAACD,6CAAY,SAAS,OAAkB;IACvC,CAAC,SAAS,cACT,2CAACA;KAAW,SAAQ;KAAY,MAAK;eAAW;MAEnC;;KAVP,SAAS,GAYb,CACN;GACE,IACK"}

package/dist/components-page/account-settings/page-layout.d.ts

@@ -0,0 +1,9 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components-page/account-settings/page-layout.d.ts
+declare function PageLayout(props: {
+  children: React.ReactNode;
+}): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { PageLayout };
+//# sourceMappingURL=page-layout.d.ts.map

package/dist/components-page/account-settings/page-layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-layout.d.ts","names":[],"sources":["../../../src/components-page/account-settings/page-layout.tsx"],"mappings":";;;iBAIgB,UAAA,CAAW,KAAA;EAAS,QAAA,EAAU,KAAA,CAAM,SAAA;AAAA,IAAW,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components-page/account-settings/page-layout.js

@@ -0,0 +1,15 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_chunk = require('../../chunk-BE-pF4vm.js');
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components-page/account-settings/page-layout.tsx
+function PageLayout(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "flex flex-col gap-6",
+		children: props.children
+	});
+}
+
+//#endregion
+exports.PageLayout = PageLayout;
+//# sourceMappingURL=page-layout.js.map

package/dist/components-page/account-settings/page-layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-layout.js","names":[],"sources":["../../../src/components-page/account-settings/page-layout.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY, INSTEAD EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\nexport function PageLayout(props: { children: React.ReactNode }) {\n  return (\n    <div className='flex flex-col gap-6'>\n      {props.children}\n    </div>\n  );\n}\n"],"mappings":";;;;;AAIA,SAAgB,WAAW,OAAsC;AAC/D,QACE,2CAAC;EAAI,WAAU;YACZ,MAAM;GACH"}

package/dist/components-page/account-settings/payments/payments-page.d.ts

@@ -0,0 +1,12 @@
+import { Team } from "../../../lib/stack-app/teams/index.js";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components-page/account-settings/payments/payments-page.d.ts
+declare function PaymentsPage(props: {
+  mockMode?: boolean;
+  availableTeams?: Team[];
+  allowPersonal?: boolean;
+}): react_jsx_runtime0.JSX.Element | null;
+//#endregion
+export { PaymentsPage };
+//# sourceMappingURL=payments-page.d.ts.map

package/dist/components-page/account-settings/payments/payments-page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"payments-page.d.ts","names":[],"sources":["../../../../src/components-page/account-settings/payments/payments-page.tsx"],"mappings":";;;;iBAcgB,YAAA,CAAa,KAAA;EAAS,QAAA;EAAoB,cAAA,GAAiB,IAAA;EAAQ,aAAA;AAAA,IAAyB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components-page/account-settings/payments/payments-page.js

@@ -0,0 +1,55 @@
+'use client';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_chunk = require('../../../chunk-BE-pF4vm.js');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _________lib_hooks_js = require("../../../lib/hooks.js");
+let _________lib_translations_js = require("../../../lib/translations.js");
+let ___page_layout_js = require("../page-layout.js");
+let _________index_js = require("../../../index.js");
+let __payments_panel_js = require("./payments-panel.js");
+
+//#region src/components-page/account-settings/payments/payments-page.tsx
+function PaymentsPage(props) {
+	const { t } = (0, _________lib_translations_js.useTranslation)();
+	const user = (0, _________lib_hooks_js.useUser)({ or: props.mockMode ? "return-null" : "redirect" });
+	const teams = props.availableTeams ?? user?.useTeams() ?? [];
+	const allowPersonal = props.allowPersonal ?? true;
+	const hasTeams = teams.length > 0;
+	const [selectedTeam, setSelectedTeam] = (0, react.useState)(null);
+	const effectiveSelectedTeam = selectedTeam ?? (!allowPersonal ? teams[0] ?? null : null);
+	const customer = effectiveSelectedTeam ?? (allowPersonal ? user : null);
+	const customerType = effectiveSelectedTeam ? "team" : "user";
+	(0, react.useEffect)(() => {
+		if (props.mockMode) return;
+		if (!allowPersonal && !selectedTeam && teams.length > 0) {
+			setSelectedTeam(teams[0]);
+			return;
+		}
+		if (selectedTeam && !teams.some((team) => team.id === selectedTeam.id)) setSelectedTeam(allowPersonal ? null : teams[0] ?? null);
+	}, [
+		allowPersonal,
+		props.mockMode,
+		selectedTeam,
+		teams
+	]);
+	if (props.mockMode) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(___page_layout_js.PageLayout, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__payments_panel_js.PaymentsPanel, { mockMode: true }) });
+	if (!customer) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(___page_layout_js.PageLayout, { children: [hasTeams ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_________index_js.TeamSwitcher, {
+		team: effectiveSelectedTeam ?? void 0,
+		teams,
+		allowNull: allowPersonal,
+		nullLabel: t("Personal"),
+		onChange: async (team) => {
+			setSelectedTeam(team);
+		}
+	}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__payments_panel_js.PaymentsPanel, {
+		customer,
+		customerType
+	})] });
+}
+
+//#endregion
+exports.PaymentsPage = PaymentsPage;
+//# sourceMappingURL=payments-page.js.map

package/dist/components-page/account-settings/payments/payments-page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"payments-page.js","names":["PageLayout","PaymentsPanel","TeamSwitcher"],"sources":["../../../../src/components-page/account-settings/payments/payments-page.tsx"],"sourcesContent":["'use client';\n\n\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY, INSTEAD EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\n\nimport { useEffect, useState } from \"react\";\nimport { Team, TeamSwitcher } from \"../../..\";\nimport { useUser } from \"../../../lib/hooks\";\nimport { useTranslation } from \"../../../lib/translations\";\nimport { PageLayout } from \"../page-layout\";\nimport { PaymentsPanel } from \"./payments-panel\";\n\nexport function PaymentsPage(props: { mockMode?: boolean, availableTeams?: Team[], allowPersonal?: boolean }) {\n  const { t } = useTranslation();\n  const user = useUser({ or: props.mockMode ? \"return-null\" : \"redirect\" });\n  const teams = props.availableTeams ?? user?.useTeams() ?? [];\n  const allowPersonal = props.allowPersonal ?? true;\n  const hasTeams = teams.length > 0;\n  const [selectedTeam, setSelectedTeam] = useState<Team | null>(null);\n  const effectiveSelectedTeam = selectedTeam ?? (!allowPersonal ? (teams[0] ?? null) : null);\n  const customer = effectiveSelectedTeam ?? (allowPersonal ? user : null);\n  const customerType = effectiveSelectedTeam ? \"team\" : \"user\";\n\n  useEffect(() => {\n    if (props.mockMode) {\n      return;\n    }\n    if (!allowPersonal && !selectedTeam && teams.length > 0) {\n      setSelectedTeam(teams[0]);\n      return;\n    }\n    if (selectedTeam && !teams.some(team => team.id === selectedTeam.id)) {\n      setSelectedTeam(allowPersonal ? null : (teams[0] ?? null));\n    }\n  }, [allowPersonal, props.mockMode, selectedTeam, teams]);\n\n  if (props.mockMode) {\n    return (\n      <PageLayout>\n        <PaymentsPanel\n          mockMode\n        />\n      </PageLayout>\n    );\n  }\n\n  if (!customer) {\n    return null;\n  }\n\n\n  return (\n    <PageLayout>\n      {hasTeams ? (\n        <TeamSwitcher\n          team={effectiveSelectedTeam ?? undefined}\n          teams={teams}\n          allowNull={allowPersonal}\n          nullLabel={t(\"Personal\")}\n          onChange={async (team) => {\n            setSelectedTeam(team);\n          }}\n        />\n      ) : null}\n      <PaymentsPanel\n        customer={customer}\n        customerType={customerType}\n      />\n    </PageLayout>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AAcA,SAAgB,aAAa,OAAiF;CAC5G,MAAM,EAAE,wDAAsB;CAC9B,MAAM,0CAAe,EAAE,IAAI,MAAM,WAAW,gBAAgB,YAAY,CAAC;CACzE,MAAM,QAAQ,MAAM,kBAAkB,MAAM,UAAU,IAAI,EAAE;CAC5D,MAAM,gBAAgB,MAAM,iBAAiB;CAC7C,MAAM,WAAW,MAAM,SAAS;CAChC,MAAM,CAAC,cAAc,uCAAyC,KAAK;CACnE,MAAM,wBAAwB,iBAAiB,CAAC,gBAAiB,MAAM,MAAM,OAAQ;CACrF,MAAM,WAAW,0BAA0B,gBAAgB,OAAO;CAClE,MAAM,eAAe,wBAAwB,SAAS;AAEtD,4BAAgB;AACd,MAAI,MAAM,SACR;AAEF,MAAI,CAAC,iBAAiB,CAAC,gBAAgB,MAAM,SAAS,GAAG;AACvD,mBAAgB,MAAM,GAAG;AACzB;;AAEF,MAAI,gBAAgB,CAAC,MAAM,MAAK,SAAQ,KAAK,OAAO,aAAa,GAAG,CAClE,iBAAgB,gBAAgB,OAAQ,MAAM,MAAM,KAAM;IAE3D;EAAC;EAAe,MAAM;EAAU;EAAc;EAAM,CAAC;AAExD,KAAI,MAAM,SACR,QACE,2CAACA,0CACC,2CAACC,qCACC,iBACA,GACS;AAIjB,KAAI,CAAC,SACH,QAAO;AAIT,QACE,4CAACD,2CACE,WACC,2CAACE;EACC,MAAM,yBAAyB;EACxB;EACP,WAAW;EACX,WAAW,EAAE,WAAW;EACxB,UAAU,OAAO,SAAS;AACxB,mBAAgB,KAAK;;GAEvB,GACA,MACJ,2CAACD;EACW;EACI;GACd,IACS"}

package/dist/components-page/account-settings/payments/payments-panel.d.ts

@@ -0,0 +1,61 @@
+import { CustomerInvoicesList, CustomerInvoicesListOptions } from "../../../lib/stack-app/customers/index.js";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components-page/account-settings/payments/payments-panel.d.ts
+type PaymentMethodSummary = {
+  id: string;
+  brand: string | null;
+  last4: string | null;
+  exp_month: number | null;
+  exp_year: number | null;
+} | null;
+type CustomerBilling = {
+  hasCustomer: boolean;
+  defaultPaymentMethod: PaymentMethodSummary;
+};
+type CustomerPaymentMethodSetupIntent = {
+  clientSecret: string;
+  stripeAccountId: string;
+};
+type CustomerLike = {
+  id: string;
+  useBilling: () => CustomerBilling;
+  useProducts: () => Array<{
+    id: string | null;
+    quantity: number;
+    displayName: string;
+    customerType: "user" | "team" | "custom";
+    type?: "one_time" | "subscription";
+    switchOptions?: Array<{
+      productId: string;
+      displayName: string;
+      prices: Record<string, {
+        interval?: [number, "day" | "week" | "month" | "year"];
+      }>;
+    }>;
+    subscription: null | {
+      subscriptionId: string | null;
+      currentPeriodEnd: Date | null;
+      cancelAtPeriodEnd: boolean;
+      isCancelable: boolean;
+    };
+  }>;
+  useInvoices: (options?: CustomerInvoicesListOptions) => CustomerInvoicesList;
+  createPaymentMethodSetupIntent: () => Promise<CustomerPaymentMethodSetupIntent>;
+  setDefaultPaymentMethodFromSetupIntent: (setupIntentId: string) => Promise<PaymentMethodSummary>;
+  switchSubscription: (options: {
+    fromProductId: string;
+    toProductId: string;
+    priceId?: string;
+    quantity?: number;
+  }) => Promise<void>;
+};
+declare function PaymentsPanel(props: {
+  title?: string;
+  customer?: CustomerLike;
+  customerType?: "user" | "team";
+  mockMode?: boolean;
+}): react_jsx_runtime0.JSX.Element | null;
+//#endregion
+export { PaymentsPanel };
+//# sourceMappingURL=payments-panel.d.ts.map

package/dist/components-page/account-settings/payments/payments-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"payments-panel.d.ts","names":[],"sources":["../../../../src/components-page/account-settings/payments/payments-panel.tsx"],"mappings":";;;;KAoBK,oBAAA;EACH,EAAA;EACA,KAAA;EACA,KAAA;EACA,SAAA;EACA,QAAA;AAAA;AAAA,KAsDG,eAAA;EACH,WAAA;EACA,oBAAA,EAAsB,oBAAA;AAAA;AAAA,KAGnB,gCAAA;EACH,YAAA;EACA,eAAA;AAAA;AAAA,KAGG,YAAA;EACH,EAAA;EACA,UAAA,QAAkB,eAAA;EAClB,WAAA,QAAmB,KAAA;IACjB,EAAA;IACA,QAAA;IACA,WAAA;IACA,YAAA;IACA,IAAA;IACA,aAAA,GAAgB,KAAA;MACd,SAAA;MACA,WAAA;MACA,MAAA,EAAQ,MAAA;QAAiB,QAAA;MAAA;IAAA;IAE3B,YAAA;MACE,cAAA;MACA,gBAAA,EAAkB,IAAA;MAClB,iBAAA;MACA,YAAA;IAAA;EAAA;EAGJ,WAAA,GAAc,OAAA,GAAU,2BAAA,KAAgC,oBAAA;EACxD,8BAAA,QAAsC,OAAA,CAAQ,gCAAA;EAC9C,sCAAA,GAAyC,aAAA,aAA0B,OAAA,CAAQ,oBAAA;EAC3E,kBAAA,GAAqB,OAAA;IAAW,aAAA;IAAuB,WAAA;IAAqB,OAAA;IAAkB,QAAA;EAAA,MAAwB,OAAA;AAAA;AAAA,iBAyDxG,aAAA,CAAc,KAAA;EAC5B,KAAA;EACA,QAAA,GAAW,YAAA;EACX,YAAA;EACA,QAAA;AAAA,IACD,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components-page/account-settings/payments/payments-panel.js

@@ -0,0 +1,466 @@
+'use client';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_chunk = require('../../../chunk-BE-pF4vm.js');
+let _stackframe_stack_shared_dist_utils_promises = require("@stackframe/stack-shared/dist/utils/promises");
+let _stackframe_stack_ui = require("@stackframe/stack-ui");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _stackframe_stack_shared = require("@stackframe/stack-shared");
+let _stackframe_stack_shared_dist_utils_results = require("@stackframe/stack-shared/dist/utils/results");
+let _________lib_translations_js = require("../../../lib/translations.js");
+let ___section_js = require("../section.js");
+let _________index_js = require("../../../index.js");
+let _stripe_react_stripe_js = require("@stripe/react-stripe-js");
+let _stripe_stripe_js = require("@stripe/stripe-js");
+let _________lib_env_js = require("../../../lib/env.js");
+
+//#region src/components-page/account-settings/payments/payments-panel.tsx
+function formatPaymentMethod(pm) {
+	return [
+		pm.brand ? pm.brand.toUpperCase() : null,
+		pm.last4 ? `•••• ${pm.last4}` : null,
+		pm.exp_month && pm.exp_year ? `exp ${pm.exp_month}/${pm.exp_year}` : null
+	].filter(Boolean).join(" · ");
+}
+const formatInvoiceStatus = (status, t) => {
+	if (!status) return t("Unknown");
+	switch (status) {
+		case "draft": return t("Draft");
+		case "open": return t("Open");
+		case "paid": return t("Paid");
+		case "uncollectible": return t("Uncollectible");
+		case "void": return t("Void");
+		default: return t("Unknown");
+	}
+};
+const formatInvoiceAmount = (amountTotal, t) => {
+	if (typeof amountTotal !== "number" || Number.isNaN(amountTotal)) return t("Unknown");
+	const normalized = amountTotal / 100;
+	return `$${new Intl.NumberFormat(void 0, {
+		minimumFractionDigits: 2,
+		maximumFractionDigits: 2
+	}).format(normalized)}`;
+};
+const formatInvoiceDate = (date, t) => {
+	if (!date || Number.isNaN(date.getTime())) return t("Unknown");
+	return new Intl.DateTimeFormat(void 0, {
+		year: "numeric",
+		month: "short",
+		day: "numeric"
+	}).format(date);
+};
+function SetDefaultPaymentMethodForm(props) {
+	const stripe = (0, _stripe_react_stripe_js.useStripe)();
+	const elements = (0, _stripe_react_stripe_js.useElements)();
+	const [errorMessage, setErrorMessage] = (0, react.useState)(null);
+	const darkMode = "color-scheme" in document.documentElement.style && document.documentElement.style["color-scheme"] === "dark";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "space-y-4",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "space-y-2",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Typography, {
+					className: "font-medium",
+					children: "Card details"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "rounded-md border border-input p-3",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stripe_react_stripe_js.CardElement, { options: {
+						hidePostalCode: true,
+						style: { base: { color: darkMode ? "white" : "black" } }
+					} })
+				})]
+			}),
+			errorMessage && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Typography, {
+				variant: "secondary",
+				type: "footnote",
+				children: errorMessage
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Button, {
+				onClick: async () => {
+					if (!stripe || !elements) {
+						setErrorMessage("Stripe is still loading. Please try again.");
+						return;
+					}
+					const card = elements.getElement(_stripe_react_stripe_js.CardElement);
+					if (!card) {
+						setErrorMessage("Card element not found.");
+						return;
+					}
+					const result = await stripe.confirmCardSetup(props.clientSecret, { payment_method: { card } });
+					if (result.error) {
+						setErrorMessage(result.error.message ?? "Failed to save payment method.");
+						return;
+					}
+					if (!result.setupIntent.id) {
+						setErrorMessage("No setup intent returned from Stripe.");
+						return;
+					}
+					await props.onSetupIntentSucceeded(result.setupIntent.id);
+				},
+				children: "Save payment method"
+			})
+		]
+	});
+}
+function PaymentsPanel(props) {
+	if (props.mockMode) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MockPaymentsPanel, { title: props.title });
+	if (!props.customer) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RealPaymentsPanel, {
+		title: props.title,
+		customer: props.customer,
+		customerType: props.customerType ?? "user"
+	});
+}
+function MockPaymentsPanel(props) {
+	const { t } = (0, _________lib_translations_js.useTranslation)();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "space-y-4",
+		children: [
+			props.title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Typography, {
+				className: "font-medium",
+				children: props.title
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(___section_js.Section, {
+				title: t("Payment method"),
+				description: t("Manage the default payment method used for subscriptions and invoices."),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Typography, { children: formatPaymentMethod({
+					id: "pm_mock",
+					brand: "visa",
+					last4: "4242",
+					exp_month: 12,
+					exp_year: 2030
+				}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Button, {
+					disabled: true,
+					children: t("Update payment method")
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(___section_js.Section, {
+				title: t("Active plans"),
+				description: t("View your active plans and purchases."),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "space-y-3",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex items-start justify-between gap-4",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "min-w-0",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Typography, {
+								className: "truncate",
+								children: t("Pro")
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_stackframe_stack_ui.Typography, {
+								variant: "secondary",
+								type: "footnote",
+								children: [t("Renews on"), " Jan 1, 2030"]
+							})]
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Button, {
+							disabled: true,
+							variant: "secondary",
+							color: "neutral",
+							children: t("Cancel subscription")
+						})]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "flex items-start justify-between gap-4",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "min-w-0",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Typography, {
+								className: "truncate",
+								children: t("Credits pack")
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Typography, {
+								variant: "secondary",
+								type: "footnote",
+								children: t("One-time purchase")
+							})]
+						})
+					})]
+				})
+			})
+		]
+	});
+}
+function RealPaymentsPanel(props) {
+	const { t } = (0, _________lib_translations_js.useTranslation)();
+	const stackApp = (0, _________index_js.useStackApp)();
+	const defaultPaymentMethod = props.customer.useBilling().defaultPaymentMethod;
+	const products = props.customer.useProducts();
+	const invoices = props.customer.useInvoices({ limit: 10 });
+	const productsForCustomerType = products.filter((product) => product.customerType === props.customerType);
+	const [paymentDialogOpen, setPaymentDialogOpen] = (0, react.useState)(false);
+	const [setupIntentClientSecret, setSetupIntentClientSecret] = (0, react.useState)(null);
+	const [setupIntentStripeAccountId, setSetupIntentStripeAccountId] = (0, react.useState)(null);
+	const [cancelTarget, setCancelTarget] = (0, react.useState)(null);
+	const [switchFromProductId, setSwitchFromProductId] = (0, react.useState)(null);
+	const [switchToProductId, setSwitchToProductId] = (0, react.useState)(null);
+	const stripePromise = (0, react.useMemo)(() => {
+		if (!setupIntentStripeAccountId) return null;
+		const publishableKey = _________lib_env_js.envVars.NEXT_PUBLIC_STACK_STRIPE_PUBLISHABLE_KEY;
+		if (!publishableKey) return null;
+		return (0, _stripe_stripe_js.loadStripe)(publishableKey, { stripeAccount: setupIntentStripeAccountId });
+	}, [setupIntentStripeAccountId]);
+	const handleAsyncError = (error) => {
+		if (error instanceof _stackframe_stack_shared.KnownErrors.DefaultPaymentMethodRequired) {
+			(0, _stackframe_stack_ui.toast)({
+				title: t("No default payment method"),
+				description: t("Add a payment method before switching plans."),
+				variant: "destructive"
+			});
+			return;
+		}
+		alert(`An unhandled error occurred. Please ${_________lib_env_js.envVars.NODE_ENV === "development" ? "check the browser console for the full error." : "report this to the developer."}\n\n${error}`);
+	};
+	const openPaymentDialog = () => {
+		(0, _stackframe_stack_shared_dist_utils_promises.runAsynchronously)(async () => {
+			setPaymentDialogOpen(true);
+			const res = await props.customer.createPaymentMethodSetupIntent();
+			setSetupIntentClientSecret(res.clientSecret);
+			setSetupIntentStripeAccountId(res.stripeAccountId);
+		}, { onError: handleAsyncError });
+	};
+	const closePaymentDialog = () => {
+		setPaymentDialogOpen(false);
+		setSetupIntentClientSecret(null);
+		setSetupIntentStripeAccountId(null);
+	};
+	const openSwitchDialog = (productId, firstOptionId) => {
+		setSwitchFromProductId(productId);
+		setSwitchToProductId(firstOptionId);
+	};
+	const closeSwitchDialog = () => {
+		setSwitchFromProductId(null);
+		setSwitchToProductId(null);
+	};
+	const switchOptions = (switchFromProductId ? productsForCustomerType.find((product) => product.id === switchFromProductId) ?? null : null)?.switchOptions ?? [];
+	const selectedSwitchOption = switchOptions.find((option) => option.productId === switchToProductId) ?? null;
+	const selectedPriceId = selectedSwitchOption ? Object.keys(selectedSwitchOption.prices)[0] ?? null : null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "space-y-4",
+		children: [
+			props.title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Typography, {
+				className: "font-medium",
+				children: props.title
+			}),
+			defaultPaymentMethod && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(___section_js.Section, {
+				title: t("Payment method"),
+				description: t("Manage the default payment method used for subscriptions and invoices."),
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Typography, { children: formatPaymentMethod(defaultPaymentMethod) }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Button, {
+						onClick: openPaymentDialog,
+						children: t("Update payment method")
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.ActionDialog, {
+						open: paymentDialogOpen,
+						onOpenChange: (open) => {
+							if (!open) closePaymentDialog();
+							else setPaymentDialogOpen(true);
+						},
+						title: t("Update payment method"),
+						children: !setupIntentClientSecret || !setupIntentStripeAccountId || !stripePromise ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Skeleton, { className: "h-10 w-full" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stripe_react_stripe_js.Elements, {
+							stripe: stripePromise,
+							options: { clientSecret: setupIntentClientSecret },
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SetDefaultPaymentMethodForm, {
+								clientSecret: setupIntentClientSecret,
+								onSetupIntentSucceeded: async (setupIntentId) => {
+									await props.customer.setDefaultPaymentMethodFromSetupIntent(setupIntentId);
+									closePaymentDialog();
+								}
+							})
+						})
+					})
+				]
+			}),
+			productsForCustomerType.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(___section_js.Section, {
+				title: t("Active plans"),
+				description: t("View your active plans and purchases."),
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "space-y-3",
+						children: productsForCustomerType.map((product, index) => {
+							const quantitySuffix = product.quantity !== 1 ? ` ×${product.quantity}` : "";
+							const isSubscription = product.type === "subscription";
+							const isCancelable = isSubscription && !!product.subscription?.isCancelable;
+							const canSwitchPlans = isSubscription && defaultPaymentMethod && !!product.id && (product.switchOptions?.length ?? 0) > 0;
+							const renewsAt = isSubscription ? product.subscription?.currentPeriodEnd ?? null : null;
+							const subtitle = product.type === "one_time" ? t("One-time purchase") : renewsAt ? `${t("Renews on")} ${new Intl.DateTimeFormat(void 0, {
+								year: "numeric",
+								month: "short",
+								day: "numeric"
+							}).format(renewsAt)}` : t("Subscription");
+							return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "flex items-start justify-between gap-4",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "min-w-0",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_stackframe_stack_ui.Typography, {
+										className: "truncate",
+										children: [product.displayName, quantitySuffix]
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Typography, {
+										variant: "secondary",
+										type: "footnote",
+										children: subtitle
+									})]
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "flex flex-col items-end gap-2",
+									children: [canSwitchPlans && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Button, {
+										variant: "secondary",
+										color: "neutral",
+										onClick: () => openSwitchDialog(product.id, product.switchOptions?.[0]?.productId ?? null),
+										children: t("Change plan")
+									}), isCancelable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Button, {
+										variant: "secondary",
+										color: "neutral",
+										onClick: () => setCancelTarget({
+											productId: product.id ?? "_inline",
+											subscriptionId: product.subscription?.subscriptionId ?? void 0
+										}),
+										children: t("Cancel subscription")
+									})]
+								})]
+							}, product.id ?? `${product.displayName}-${index}`);
+						})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.ActionDialog, {
+						open: cancelTarget !== null,
+						onOpenChange: (open) => {
+							if (!open) setCancelTarget(null);
+						},
+						title: t("Cancel subscription"),
+						description: t("Canceling will stop future renewals for this subscription."),
+						danger: true,
+						cancelButton: true,
+						okButton: {
+							label: t("Cancel subscription"),
+							onClick: async () => {
+								if (!cancelTarget) return;
+								const { productId, subscriptionId } = cancelTarget;
+								if (props.customerType === "team") await stackApp.cancelSubscription({
+									teamId: props.customer.id,
+									productId,
+									subscriptionId
+								});
+								else await stackApp.cancelSubscription({
+									productId,
+									subscriptionId
+								});
+								setCancelTarget(null);
+							}
+						}
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.ActionDialog, {
+						open: switchFromProductId !== null,
+						onOpenChange: (open) => {
+							if (!open) closeSwitchDialog();
+						},
+						title: t("Change plan"),
+						description: t("Select a new plan from the same product line."),
+						cancelButton: true,
+						okButton: {
+							label: t("Switch plan"),
+							onClick: async () => {
+								const fromProductId = switchFromProductId;
+								const toProductId = switchToProductId;
+								if (!fromProductId || !toProductId) return;
+								if (!selectedPriceId) return;
+								const result = await _stackframe_stack_shared_dist_utils_results.Result.fromThrowingAsync(() => props.customer.switchSubscription({
+									fromProductId,
+									toProductId,
+									priceId: selectedPriceId
+								}));
+								if (result.status === "error") {
+									handleAsyncError(result.error);
+									return "prevent-close";
+								}
+								closeSwitchDialog();
+							},
+							props: { disabled: !switchFromProductId || !switchToProductId || !selectedPriceId }
+						},
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "space-y-2",
+							children: switchOptions.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Typography, {
+								variant: "secondary",
+								type: "footnote",
+								children: t("No other plans available for this subscription.")
+							}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Typography, {
+								type: "footnote",
+								children: t("Choose a plan")
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_stackframe_stack_ui.Select, {
+								value: switchToProductId ?? void 0,
+								onValueChange: (value) => setSwitchToProductId(value || null),
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.SelectTrigger, {
+									className: "w-full",
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.SelectValue, { placeholder: t("Choose a plan") })
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.SelectContent, { children: switchOptions.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.SelectItem, {
+									value: option.productId,
+									children: option.displayName
+								}, option.productId)) })]
+							})] })
+						})
+					})
+				]
+			}),
+			invoices.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Separator, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "space-y-2",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "space-y-1",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Typography, {
+						className: "font-medium",
+						children: t("Invoices")
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Typography, {
+						variant: "secondary",
+						type: "footnote",
+						children: t("Review past invoices and receipts.")
+					})]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "border rounded-md",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_stackframe_stack_ui.Table, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.TableHeader, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_stackframe_stack_ui.TableRow, { children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.TableHead, {
+							className: "w-[140px]",
+							children: t("Date")
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.TableHead, {
+							className: "w-[120px]",
+							children: t("Status")
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.TableHead, {
+							className: "w-[120px]",
+							children: t("Amount")
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.TableHead, {
+							className: "w-[120px] text-right",
+							children: t("Invoice")
+						})
+					] }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.TableBody, { children: invoices.map((invoice, index) => {
+						const createdAtTime = invoice.createdAt.getTime();
+						const invoiceKey = Number.isNaN(createdAtTime) ? `invoice-${index}` : `invoice-${createdAtTime}-${index}`;
+						return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_stackframe_stack_ui.TableRow, { children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.TableCell, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Typography, { children: formatInvoiceDate(invoice.createdAt, t) }) }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.TableCell, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Typography, { children: formatInvoiceStatus(invoice.status, t) }) }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.TableCell, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Typography, { children: formatInvoiceAmount(invoice.amountTotal, t) }) }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.TableCell, {
+								align: "right",
+								children: invoice.hostedInvoiceUrl ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Button, {
+									asChild: true,
+									variant: "secondary",
+									color: "neutral",
+									size: "sm",
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+										href: invoice.hostedInvoiceUrl,
+										target: "_blank",
+										rel: "noreferrer",
+										children: t("View")
+									})
+								}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Typography, {
+									variant: "secondary",
+									type: "footnote",
+									children: t("Unavailable")
+								})
+							})
+						] }, invoiceKey);
+					}) })] })
+				})]
+			})] })
+		]
+	});
+}
+
+//#endregion
+exports.PaymentsPanel = PaymentsPanel;
+//# sourceMappingURL=payments-panel.js.map