@stackframe/tanstack-start 0.0.1 → 2.8.92

package/dist/esm/components-page/account-settings/email-and-auth/password-section.d.ts

@@ -0,0 +1,9 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components-page/account-settings/email-and-auth/password-section.d.ts
+declare function PasswordSection(props?: {
+  mockMode?: boolean;
+}): react_jsx_runtime0.JSX.Element | null;
+//#endregion
+export { PasswordSection };
+//# sourceMappingURL=password-section.d.ts.map

package/dist/esm/components-page/account-settings/email-and-auth/password-section.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"password-section.d.ts","names":[],"sources":["../../../../../src/components-page/account-settings/email-and-auth/password-section.tsx"],"mappings":";;;iBAmBgB,eAAA,CAAgB,KAAA;EAC9B,QAAA;AAAA,IACD,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/esm/components-page/account-settings/email-and-auth/password-section.js

@@ -0,0 +1,158 @@
+import { yupResolver } from "@hookform/resolvers/yup";
+import { passwordSchema, yupObject, yupString } from "@stackframe/stack-shared/dist/schema-fields";
+import { runAsynchronously, runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
+import { Button, Input, Label, PasswordInput, Typography } from "@stackframe/stack-ui";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { getPasswordError } from "@stackframe/stack-shared/dist/helpers/password";
+import * as yup from "yup";
+import { useUser } from "../../../lib/hooks.js";
+import { useTranslation } from "../../../lib/translations.js";
+import { FormWarningText } from "../../../components/elements/form-warning.js";
+import { Section } from "../section.js";
+import { useStackApp as useStackApp$1 } from "../../../index.js";
+
+//#region src/components-page/account-settings/email-and-auth/password-section.tsx
+function PasswordSection(props) {
+	const { t } = useTranslation();
+	const user = useUser({ or: props?.mockMode ? "return-null" : "throw" });
+	if (props?.mockMode && !user) return /* @__PURE__ */ jsx(Section, {
+		title: t("Password"),
+		description: t("Password management is not available in demo mode."),
+		children: /* @__PURE__ */ jsx(Typography, {
+			variant: "secondary",
+			children: t("Password management is not available in demo mode.")
+		})
+	});
+	if (!user) return null;
+	const contactChannels = user.useContactChannels();
+	const [changingPassword, setChangingPassword] = useState(false);
+	const [loading, setLoading] = useState(false);
+	const project = useStackApp$1().useProject();
+	const { register, handleSubmit, setError, formState: { errors }, clearErrors, reset } = useForm({ resolver: yupResolver(yupObject({
+		oldPassword: user.hasPassword ? passwordSchema.defined().nonEmpty(t("Please enter your old password")) : yupString(),
+		newPassword: passwordSchema.defined().nonEmpty(t("Please enter your password")).test({
+			name: "is-valid-password",
+			test: (value, ctx) => {
+				const error = getPasswordError(value);
+				if (error) return ctx.createError({ message: error.message });
+				else return true;
+			}
+		}),
+		newPasswordRepeat: yupString().nullable().oneOf([
+			yup.ref("newPassword"),
+			"",
+			null
+		], t("Passwords do not match")).defined().nonEmpty(t("Please repeat your password"))
+	})) });
+	const hasValidEmail = contactChannels.filter((x) => x.type === "email" && x.usedForAuth).length > 0;
+	const onSubmit = async (data) => {
+		setLoading(true);
+		try {
+			const { oldPassword, newPassword } = data;
+			if (user.hasPassword ? await user.updatePassword({
+				oldPassword,
+				newPassword
+			}) : await user.setPassword({ password: newPassword })) setError("oldPassword", {
+				type: "manual",
+				message: t("Incorrect password")
+			});
+			else {
+				reset();
+				setChangingPassword(false);
+			}
+		} finally {
+			setLoading(false);
+		}
+	};
+	const registerPassword = register("newPassword");
+	const registerPasswordRepeat = register("newPasswordRepeat");
+	if (!project.config.credentialEnabled) return null;
+	return /* @__PURE__ */ jsx(Section, {
+		title: t("Password"),
+		description: user.hasPassword ? t("Update your password") : t("Set a password for your account"),
+		children: /* @__PURE__ */ jsx("div", {
+			className: "flex flex-col gap-4",
+			children: !changingPassword ? hasValidEmail ? /* @__PURE__ */ jsx(Button, {
+				variant: "secondary",
+				onClick: () => setChangingPassword(true),
+				children: user.hasPassword ? t("Update password") : t("Set password")
+			}) : /* @__PURE__ */ jsx(Typography, {
+				variant: "secondary",
+				type: "label",
+				children: t("To set a password, please add a sign-in email.")
+			}) : /* @__PURE__ */ jsxs("form", {
+				onSubmit: (e) => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e)),
+				noValidate: true,
+				children: [
+					user.hasPassword && /* @__PURE__ */ jsxs(Fragment, { children: [
+						/* @__PURE__ */ jsx(Label, {
+							htmlFor: "old-password",
+							className: "mb-1",
+							children: t("Old password")
+						}),
+						/* @__PURE__ */ jsx(Input, {
+							id: "old-password",
+							type: "password",
+							autoComplete: "current-password",
+							...register("oldPassword")
+						}),
+						/* @__PURE__ */ jsx(FormWarningText, { text: errors.oldPassword?.message?.toString() })
+					] }),
+					/* @__PURE__ */ jsx(Label, {
+						htmlFor: "new-password",
+						className: "mt-4 mb-1",
+						children: t("New password")
+					}),
+					/* @__PURE__ */ jsx(PasswordInput, {
+						id: "new-password",
+						autoComplete: "new-password",
+						...registerPassword,
+						onChange: (e) => {
+							clearErrors("newPassword");
+							clearErrors("newPasswordRepeat");
+							runAsynchronously(registerPassword.onChange(e));
+						}
+					}),
+					/* @__PURE__ */ jsx(FormWarningText, { text: errors.newPassword?.message?.toString() }),
+					/* @__PURE__ */ jsx(Label, {
+						htmlFor: "repeat-password",
+						className: "mt-4 mb-1",
+						children: t("Repeat new password")
+					}),
+					/* @__PURE__ */ jsx(PasswordInput, {
+						id: "repeat-password",
+						autoComplete: "new-password",
+						...registerPasswordRepeat,
+						onChange: (e) => {
+							clearErrors("newPassword");
+							clearErrors("newPasswordRepeat");
+							runAsynchronously(registerPasswordRepeat.onChange(e));
+						}
+					}),
+					/* @__PURE__ */ jsx(FormWarningText, { text: errors.newPasswordRepeat?.message?.toString() }),
+					/* @__PURE__ */ jsxs("div", {
+						className: "mt-6 flex gap-4",
+						children: [/* @__PURE__ */ jsx(Button, {
+							type: "submit",
+							loading,
+							children: user.hasPassword ? t("Update Password") : t("Set Password")
+						}), /* @__PURE__ */ jsx(Button, {
+							variant: "secondary",
+							onClick: () => {
+								setChangingPassword(false);
+								reset();
+							},
+							children: t("Cancel")
+						})]
+					})
+				]
+			})
+		})
+	});
+}
+
+//#endregion
+export { PasswordSection };
+//# sourceMappingURL=password-section.js.map

package/dist/esm/components-page/account-settings/email-and-auth/password-section.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"password-section.js","names":["useStackApp","schemaFieldsPasswordSchema"],"sources":["../../../../../src/components-page/account-settings/email-and-auth/password-section.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 { yupResolver } from \"@hookform/resolvers/yup\";\nimport { getPasswordError } from '@stackframe/stack-shared/dist/helpers/password';\nimport { passwordSchema as schemaFieldsPasswordSchema, yupObject, yupString } from \"@stackframe/stack-shared/dist/schema-fields\";\nimport { runAsynchronously, runAsynchronouslyWithAlert } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport { Button, Input, Label, PasswordInput, Typography } from \"@stackframe/stack-ui\";\nimport { useState } from \"react\";\nimport { useForm } from \"react-hook-form\";\nimport * as yup from \"yup\";\nimport { useStackApp } from '../../..';\nimport { FormWarningText } from \"../../../components/elements/form-warning\";\nimport { useUser } from \"../../../lib/hooks\";\nimport { useTranslation } from \"../../../lib/translations\";\nimport { Section } from \"../section\";\n\n\nexport function PasswordSection(props?: {\n  mockMode?: boolean,\n}) {\n  const { t } = useTranslation();\n  const user = useUser({ or: props?.mockMode ? 'return-null' : \"throw\" });\n\n  // In mock mode, show a placeholder message\n  if (props?.mockMode && !user) {\n    return (\n      <Section\n        title={t(\"Password\")}\n        description={t(\"Password management is not available in demo mode.\")}\n      >\n        <Typography variant='secondary'>{t(\"Password management is not available in demo mode.\")}</Typography>\n      </Section>\n    );\n  }\n\n  if (!user) {\n    return null; // This shouldn't happen in non-mock mode due to throw\n  }\n  const contactChannels = user.useContactChannels();\n  const [changingPassword, setChangingPassword] = useState(false);\n  const [loading, setLoading] = useState(false);\n  const project = useStackApp().useProject();\n\n  const passwordSchema = yupObject({\n    oldPassword: user.hasPassword ? schemaFieldsPasswordSchema.defined().nonEmpty(t('Please enter your old password')) : yupString(),\n    newPassword: schemaFieldsPasswordSchema.defined().nonEmpty(t('Please enter your password')).test({\n      name: 'is-valid-password',\n      test: (value, ctx) => {\n        const error = getPasswordError(value);\n        if (error) {\n          return ctx.createError({ message: error.message });\n        } else {\n          return true;\n        }\n      }\n    }),\n    newPasswordRepeat: yupString().nullable().oneOf([yup.ref('newPassword'), \"\", null], t('Passwords do not match')).defined().nonEmpty(t('Please repeat your password'))\n  });\n\n  const { register, handleSubmit, setError, formState: { errors }, clearErrors, reset } = useForm({\n    resolver: yupResolver(passwordSchema)\n  });\n\n  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n  const hasValidEmail = contactChannels.filter(x => x.type === 'email' && x.usedForAuth).length > 0;\n\n  const onSubmit = async (data: yup.InferType<typeof passwordSchema>) => {\n    setLoading(true);\n    try {\n      const { oldPassword, newPassword } = data;\n      const error = user.hasPassword\n        ? await user.updatePassword({ oldPassword: oldPassword!, newPassword })\n        : await user.setPassword({ password: newPassword! });\n      if (error) {\n        setError('oldPassword', { type: 'manual', message: t('Incorrect password') });\n      } else {\n        reset();\n        setChangingPassword(false);\n      }\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  const registerPassword = register('newPassword');\n  const registerPasswordRepeat = register('newPasswordRepeat');\n\n  if (!project.config.credentialEnabled) {\n    return null;\n  }\n\n  return (\n    <Section\n      title={t(\"Password\")}\n      description={user.hasPassword ? t(\"Update your password\") : t(\"Set a password for your account\")}\n    >\n      <div className='flex flex-col gap-4'>\n        {!changingPassword ? (\n          hasValidEmail ? (\n            <Button\n              variant='secondary'\n              onClick={() => setChangingPassword(true)}\n            >\n              {user.hasPassword ? t(\"Update password\") : t(\"Set password\")}\n            </Button>\n          ) : (\n            <Typography variant='secondary' type='label'>{t(\"To set a password, please add a sign-in email.\")}</Typography>\n          )\n        ) : (\n          <form\n            onSubmit={e => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e))}\n            noValidate\n          >\n            {user.hasPassword && (\n              <>\n                <Label htmlFor=\"old-password\" className=\"mb-1\">{t(\"Old password\")}</Label>\n                <Input\n                  id=\"old-password\"\n                  type=\"password\"\n                  autoComplete=\"current-password\"\n                  {...register(\"oldPassword\")}\n                />\n                <FormWarningText text={errors.oldPassword?.message?.toString()} />\n              </>\n            )}\n\n            <Label htmlFor=\"new-password\" className=\"mt-4 mb-1\">{t(\"New password\")}</Label>\n            <PasswordInput\n              id=\"new-password\"\n              autoComplete=\"new-password\"\n              {...registerPassword}\n              onChange={(e) => {\n                clearErrors('newPassword');\n                clearErrors('newPasswordRepeat');\n                runAsynchronously(registerPassword.onChange(e));\n              }}\n            />\n            <FormWarningText text={errors.newPassword?.message?.toString()} />\n\n            <Label htmlFor=\"repeat-password\" className=\"mt-4 mb-1\">{t(\"Repeat new password\")}</Label>\n            <PasswordInput\n              id=\"repeat-password\"\n              autoComplete=\"new-password\"\n              {...registerPasswordRepeat}\n              onChange={(e) => {\n                clearErrors('newPassword');\n                clearErrors('newPasswordRepeat');\n                runAsynchronously(registerPasswordRepeat.onChange(e));\n              }}\n            />\n            <FormWarningText text={errors.newPasswordRepeat?.message?.toString()} />\n\n            <div className=\"mt-6 flex gap-4\">\n              <Button type=\"submit\" loading={loading}>\n                {user.hasPassword ? t(\"Update Password\") : t(\"Set Password\")}\n              </Button>\n              <Button\n                variant=\"secondary\"\n                onClick={() => {\n                  setChangingPassword(false);\n                  reset();\n                }}\n              >\n                {t(\"Cancel\")}\n              </Button>\n            </div>\n          </form>\n        )}\n      </div>\n    </Section>\n  );\n}\n"],"mappings":"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"}

package/dist/esm/components-page/account-settings/notifications/notifications-page.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"notifications-page.d.ts","names":[],"sources":["../../../../../src/components-page/account-settings/notifications/notifications-page.tsx"],"mappings":";;;iBAWgB,iBAAA,CAAA,GAAiB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

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

@@ -0,0 +1,40 @@
+import { Separator, Switch, Typography } from "@stackframe/stack-ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useUser } from "../../../lib/hooks.js";
+import { useTranslation } from "../../../lib/translations.js";
+import { PageLayout } from "../page-layout.js";
+
+//#region src/components-page/account-settings/notifications/notifications-page.tsx
+function NotificationsPage() {
+	const { t } = useTranslation();
+	const notificationCategories = useUser({ or: "redirect" }).useNotificationCategories();
+	return /* @__PURE__ */ jsxs(PageLayout, { children: [/* @__PURE__ */ jsx(Separator, {}), /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-2",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "sm:flex-1 flex flex-col justify-center pb-2",
+			children: /* @__PURE__ */ jsx(Typography, {
+				className: "font-medium",
+				children: t("Choose which emails you want to receive")
+			})
+		}), notificationCategories.map((category) => /* @__PURE__ */ jsxs("div", {
+			className: "flex justify-start gap-4 items-center",
+			children: [
+				/* @__PURE__ */ jsx(Switch, {
+					checked: category.enabled,
+					onCheckedChange: (value) => void category.setEnabled(value),
+					disabled: !category.canDisable
+				}),
+				/* @__PURE__ */ jsx(Typography, { children: category.name }),
+				!category.canDisable && /* @__PURE__ */ jsx(Typography, {
+					variant: "secondary",
+					type: "footnote",
+					children: "(cannot be disabled)"
+				})
+			]
+		}, category.id))]
+	})] });
+}
+
+//#endregion
+export { NotificationsPage };
+//# sourceMappingURL=notifications-page.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"notifications-page.js","names":[],"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,MAAM,gBAAgB;CAE9B,MAAM,yBADO,QAAQ,EAAE,IAAI,YAAY,CAAC,CACJ,2BAA2B;AAE/D,QACE,qBAAC,yBACC,oBAAC,cAAY,EACb,qBAAC;EAAI,WAAU;aACb,oBAAC;GAAI,WAAU;aACb,oBAAC;IAAW,WAAU;cACnB,EAAE,0CAA0C;KAClC;IACT,EACL,uBAAuB,KAAK,aAC3B,qBAAC;GAAsB,WAAU;;IAC/B,oBAAC;KACC,SAAS,SAAS;KAClB,kBAAkB,UAAU,KAAK,SAAS,WAAW,MAAM;KAC3D,UAAU,CAAC,SAAS;MACpB;IACF,oBAAC,wBAAY,SAAS,OAAkB;IACvC,CAAC,SAAS,cACT,oBAAC;KAAW,SAAQ;KAAY,MAAK;eAAW;MAEnC;;KAVP,SAAS,GAYb,CACN;GACE,IACK"}

package/dist/esm/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/esm/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/esm/components-page/account-settings/page-layout.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components-page/account-settings/page-layout.tsx
+function PageLayout(props) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex flex-col gap-6",
+		children: props.children
+	});
+}
+
+//#endregion
+export { PageLayout };
+//# sourceMappingURL=page-layout.js.map

package/dist/esm/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,oBAAC;EAAI,WAAU;YACZ,MAAM;GACH"}

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

@@ -0,0 +1,12 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { Team } from "../../..";
+
+//#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/esm/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/esm/components-page/account-settings/payments/payments-page.js

@@ -0,0 +1,53 @@
+'use client';
+
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useUser } from "../../../lib/hooks.js";
+import { useTranslation } from "../../../lib/translations.js";
+import { PageLayout } from "../page-layout.js";
+import { TeamSwitcher } from "../../../index.js";
+import { PaymentsPanel } from "./payments-panel.js";
+
+//#region src/components-page/account-settings/payments/payments-page.tsx
+function PaymentsPage(props) {
+	const { t } = useTranslation();
+	const user = 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] = useState(null);
+	const effectiveSelectedTeam = selectedTeam ?? (!allowPersonal ? teams[0] ?? null : null);
+	const customer = effectiveSelectedTeam ?? (allowPersonal ? user : null);
+	const customerType = effectiveSelectedTeam ? "team" : "user";
+	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__ */ jsx(PageLayout, { children: /* @__PURE__ */ jsx(PaymentsPanel, { mockMode: true }) });
+	if (!customer) return null;
+	return /* @__PURE__ */ jsxs(PageLayout, { children: [hasTeams ? /* @__PURE__ */ jsx(TeamSwitcher, {
+		team: effectiveSelectedTeam ?? void 0,
+		teams,
+		allowNull: allowPersonal,
+		nullLabel: t("Personal"),
+		onChange: async (team) => {
+			setSelectedTeam(team);
+		}
+	}) : null, /* @__PURE__ */ jsx(PaymentsPanel, {
+		customer,
+		customerType
+	})] });
+}
+
+//#endregion
+export { PaymentsPage };
+//# sourceMappingURL=payments-page.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"payments-page.js","names":[],"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,MAAM,gBAAgB;CAC9B,MAAM,OAAO,QAAQ,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,mBAAmB,SAAsB,KAAK;CACnE,MAAM,wBAAwB,iBAAiB,CAAC,gBAAiB,MAAM,MAAM,OAAQ;CACrF,MAAM,WAAW,0BAA0B,gBAAgB,OAAO;CAClE,MAAM,eAAe,wBAAwB,SAAS;AAEtD,iBAAgB;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,oBAAC,wBACC,oBAAC,iBACC,iBACA,GACS;AAIjB,KAAI,CAAC,SACH,QAAO;AAIT,QACE,qBAAC,yBACE,WACC,oBAAC;EACC,MAAM,yBAAyB;EACxB;EACP,WAAW;EACX,WAAW,EAAE,WAAW;EACxB,UAAU,OAAO,SAAS;AACxB,mBAAgB,KAAK;;GAEvB,GACA,MACJ,oBAAC;EACW;EACI;GACd,IACS"}

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

@@ -0,0 +1,61 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { CustomerInvoicesList, CustomerInvoicesListOptions } from "../../../lib/stack-app/customers";
+
+//#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/esm/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"}