@stackframe/react 2.8.77 → 2.8.79

package/dist/components/credential-sign-up.js

@@ -9,13 +9,13 @@ let _stackframe_stack_ui = require("@stackframe/stack-ui");
 let react = require("react");
 react = require_chunk.__toESM(react);
 let react_hook_form = require("react-hook-form");
-let ___index_js = require("../index.js");
 let ___lib_translations_js = require("../lib/translations.js");
 let react_jsx_runtime = require("react/jsx-runtime");
 let __elements_form_warning_js = require("./elements/form-warning.js");
 let _stackframe_stack_shared_dist_helpers_password = require("@stackframe/stack-shared/dist/helpers/password");
 let yup = require("yup");
 yup = require_chunk.__toESM(yup);
+let ___lib_hooks_js = require("../lib/hooks.js");
 
 //#region src/components/credential-sign-up.tsx
 function CredentialSignUp(props) {
@@ -36,7 +36,7 @@ function CredentialSignUp(props) {
 			null
 		], t("Passwords do not match")).nonEmpty(t("Please repeat your password")) }
 	})) });
-	const app = (0, ___index_js.useStackApp)();
+	const app = (0, ___lib_hooks_js.useStackApp)();
 	const [loading, setLoading] = (0, react.useState)(false);
 	const onSubmit = async (data) => {
 		setLoading(true);

package/dist/components/credential-sign-up.js.map

@@ -1 +1 @@
-{"version":3,"file":"credential-sign-up.js","names":["passwordSchema","Label","Input","FormWarningText","PasswordInput","Button"],"sources":["../../src/components/credential-sign-up.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 { yupResolver } from \"@hookform/resolvers/yup\";\nimport { getPasswordError } from \"@stackframe/stack-shared/dist/helpers/password\";\nimport { passwordSchema, strictEmailSchema, yupObject } from \"@stackframe/stack-shared/dist/schema-fields\";\nimport { runAsynchronously, runAsynchronouslyWithAlert } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport { Button, Input, Label, PasswordInput } from \"@stackframe/stack-ui\";\nimport React, { useState } from \"react\";\nimport { useForm } from \"react-hook-form\";\nimport * as yup from \"yup\";\nimport { useStackApp } from \"..\";\nimport { useTranslation } from \"../lib/translations\";\nimport { FormWarningText } from \"./elements/form-warning\";\n\nexport function CredentialSignUp(props: { noPasswordRepeat?: boolean }) {\n  const { t } = useTranslation();\n\n  const schema = yupObject({\n    email: strictEmailSchema(t('Please enter a valid email')).defined().nonEmpty(t('Please enter your email')),\n    password: passwordSchema.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    ...(!props.noPasswordRepeat && {\n      passwordRepeat: passwordSchema.nullable().oneOf([yup.ref('password'), \"\", null], t('Passwords do not match')).nonEmpty(t('Please repeat your password'))\n    })\n  });\n\n  const { register, handleSubmit, setError, formState: { errors }, clearErrors } = useForm({\n    resolver: yupResolver(schema)\n  });\n  const app = useStackApp();\n  const [loading, setLoading] = useState(false);\n\n  const onSubmit = async (data: yup.InferType<typeof schema>) => {\n    setLoading(true);\n    try {\n      const { email, password } = data;\n      const result = await app.signUpWithCredential({ email, password });\n      if (result.status === 'error') {\n        setError('email', { type: 'manual', message: result.error.message });\n      }\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  const registerPassword = register('password');\n  const registerPasswordRepeat = register('passwordRepeat');\n\n  return (\n    <form\n      className=\"flex flex-col items-stretch stack-scope\"\n      onSubmit={e => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e))}\n      noValidate\n    >\n      <Label htmlFor=\"email\" className=\"mb-1\">{t('Email')}</Label>\n      <Input id=\"email\" type=\"email\" autoComplete=\"email\" {...register('email')}/>\n      <FormWarningText text={errors.email?.message?.toString()} />\n\n      <Label htmlFor=\"password\" className=\"mt-4 mb-1\">{t('Password')}</Label>\n      <PasswordInput\n        id=\"password\"\n        autoComplete=\"new-password\"\n        {...registerPassword}\n        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {\n          clearErrors('password');\n          clearErrors('passwordRepeat');\n          runAsynchronously(registerPassword.onChange(e));\n        }}\n      />\n      <FormWarningText text={errors.password?.message?.toString()} />\n      {\n        !props.noPasswordRepeat && (\n          <>\n            <Label htmlFor=\"repeat-password\" className=\"mt-4 mb-1\">{t('Repeat Password')}</Label>\n            <PasswordInput\n              id=\"repeat-password\"\n              {...registerPasswordRepeat}\n              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {\n              clearErrors('password');\n              clearErrors('passwordRepeat');\n              runAsynchronously(registerPasswordRepeat.onChange(e));\n              }}\n            />\n            <FormWarningText text={errors.passwordRepeat?.message?.toString()} />\n          </>\n        )\n      }\n\n      <Button type=\"submit\" className=\"mt-6\" loading={loading}>\n        {t('Sign Up')}\n      </Button>\n    </form>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAmBA,SAAgB,iBAAiB,OAAuC;CACtE,MAAM,EAAE,kDAAsB;CAoB9B,MAAM,EAAE,UAAU,cAAc,UAAU,WAAW,EAAE,UAAU,6CAAwB,EACvF,8GAnBuB;EACvB,0EAAyB,EAAE,6BAA6B,CAAC,CAAC,SAAS,CAAC,SAAS,EAAE,0BAA0B,CAAC;EAC1G,UAAUA,2DAAe,SAAS,CAAC,SAAS,EAAE,6BAA6B,CAAC,CAAC,KAAK;GAChF,MAAM;GACN,OAAO,OAAO,QAAQ;IACpB,MAAM,6EAAyB,MAAM;AACrC,QAAI,MACF,QAAO,IAAI,YAAY,EAAE,SAAS,MAAM,SAAS,CAAC;QAElD,QAAO;;GAGZ,CAAC;EACF,GAAI,CAAC,MAAM,oBAAoB,EAC7B,gBAAgBA,2DAAe,UAAU,CAAC,MAAM;GAAC,IAAI,IAAI,WAAW;GAAE;GAAI;GAAK,EAAE,EAAE,yBAAyB,CAAC,CAAC,SAAS,EAAE,8BAA8B,CAAC,EACzJ;EACF,CAAC,CAG6B,EAC9B,CAAC;CACF,MAAM,oCAAmB;CACzB,MAAM,CAAC,SAAS,kCAAuB,MAAM;CAE7C,MAAM,WAAW,OAAO,SAAuC;AAC7D,aAAW,KAAK;AAChB,MAAI;GACF,MAAM,EAAE,OAAO,aAAa;GAC5B,MAAM,SAAS,MAAM,IAAI,qBAAqB;IAAE;IAAO;IAAU,CAAC;AAClE,OAAI,OAAO,WAAW,QACpB,UAAS,SAAS;IAAE,MAAM;IAAU,SAAS,OAAO,MAAM;IAAS,CAAC;YAE9D;AACR,cAAW,MAAM;;;CAIrB,MAAM,mBAAmB,SAAS,WAAW;CAC7C,MAAM,yBAAyB,SAAS,iBAAiB;AAEzD,QACE,4CAAC;EACC,WAAU;EACV,WAAU,mFAAgC,aAAa,SAAS,CAAC,EAAE,CAAC;EACpE;;GAEA,2CAACC;IAAM,SAAQ;IAAQ,WAAU;cAAQ,EAAE,QAAQ;KAAS;GAC5D,2CAACC;IAAM,IAAG;IAAQ,MAAK;IAAQ,cAAa;IAAQ,GAAI,SAAS,QAAQ;KAAG;GAC5E,2CAACC,8CAAgB,MAAM,OAAO,OAAO,SAAS,UAAU,GAAI;GAE5D,2CAACF;IAAM,SAAQ;IAAW,WAAU;cAAa,EAAE,WAAW;KAAS;GACvE,2CAACG;IACC,IAAG;IACH,cAAa;IACb,GAAI;IACJ,WAAW,MAA2C;AACpD,iBAAY,WAAW;AACvB,iBAAY,iBAAiB;AAC7B,yEAAkB,iBAAiB,SAAS,EAAE,CAAC;;KAEjD;GACF,2CAACD,8CAAgB,MAAM,OAAO,UAAU,SAAS,UAAU,GAAI;GAE7D,CAAC,MAAM,oBACL;IACE,2CAACF;KAAM,SAAQ;KAAkB,WAAU;eAAa,EAAE,kBAAkB;MAAS;IACrF,2CAACG;KACC,IAAG;KACH,GAAI;KACJ,WAAW,MAA2C;AACtD,kBAAY,WAAW;AACvB,kBAAY,iBAAiB;AAC7B,0EAAkB,uBAAuB,SAAS,EAAE,CAAC;;MAErD;IACF,2CAACD,8CAAgB,MAAM,OAAO,gBAAgB,SAAS,UAAU,GAAI;OACpE;GAIP,2CAACE;IAAO,MAAK;IAAS,WAAU;IAAgB;cAC7C,EAAE,UAAU;KACN;;GACJ"}
+{"version":3,"file":"credential-sign-up.js","names":["passwordSchema","Label","Input","FormWarningText","PasswordInput","Button"],"sources":["../../src/components/credential-sign-up.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 { yupResolver } from \"@hookform/resolvers/yup\";\nimport { getPasswordError } from \"@stackframe/stack-shared/dist/helpers/password\";\nimport { passwordSchema, strictEmailSchema, yupObject } from \"@stackframe/stack-shared/dist/schema-fields\";\nimport { runAsynchronously, runAsynchronouslyWithAlert } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport { Button, Input, Label, PasswordInput } from \"@stackframe/stack-ui\";\nimport React, { useState } from \"react\";\nimport { useForm } from \"react-hook-form\";\nimport * as yup from \"yup\";\nimport { useStackApp } from \"../lib/hooks\";\nimport { useTranslation } from \"../lib/translations\";\nimport { FormWarningText } from \"./elements/form-warning\";\n\nexport function CredentialSignUp(props: { noPasswordRepeat?: boolean }) {\n  const { t } = useTranslation();\n\n  const schema = yupObject({\n    email: strictEmailSchema(t('Please enter a valid email')).defined().nonEmpty(t('Please enter your email')),\n    password: passwordSchema.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    ...(!props.noPasswordRepeat && {\n      passwordRepeat: passwordSchema.nullable().oneOf([yup.ref('password'), \"\", null], t('Passwords do not match')).nonEmpty(t('Please repeat your password'))\n    })\n  });\n\n  const { register, handleSubmit, setError, formState: { errors }, clearErrors } = useForm({\n    resolver: yupResolver(schema)\n  });\n  const app = useStackApp();\n  const [loading, setLoading] = useState(false);\n\n  const onSubmit = async (data: yup.InferType<typeof schema>) => {\n    setLoading(true);\n    try {\n      const { email, password } = data;\n      const result = await app.signUpWithCredential({ email, password });\n      if (result.status === 'error') {\n        setError('email', { type: 'manual', message: result.error.message });\n      }\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  const registerPassword = register('password');\n  const registerPasswordRepeat = register('passwordRepeat');\n\n  return (\n    <form\n      className=\"flex flex-col items-stretch stack-scope\"\n      onSubmit={e => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e))}\n      noValidate\n    >\n      <Label htmlFor=\"email\" className=\"mb-1\">{t('Email')}</Label>\n      <Input id=\"email\" type=\"email\" autoComplete=\"email\" {...register('email')}/>\n      <FormWarningText text={errors.email?.message?.toString()} />\n\n      <Label htmlFor=\"password\" className=\"mt-4 mb-1\">{t('Password')}</Label>\n      <PasswordInput\n        id=\"password\"\n        autoComplete=\"new-password\"\n        {...registerPassword}\n        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {\n          clearErrors('password');\n          clearErrors('passwordRepeat');\n          runAsynchronously(registerPassword.onChange(e));\n        }}\n      />\n      <FormWarningText text={errors.password?.message?.toString()} />\n      {\n        !props.noPasswordRepeat && (\n          <>\n            <Label htmlFor=\"repeat-password\" className=\"mt-4 mb-1\">{t('Repeat Password')}</Label>\n            <PasswordInput\n              id=\"repeat-password\"\n              {...registerPasswordRepeat}\n              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {\n              clearErrors('password');\n              clearErrors('passwordRepeat');\n              runAsynchronously(registerPasswordRepeat.onChange(e));\n              }}\n            />\n            <FormWarningText text={errors.passwordRepeat?.message?.toString()} />\n          </>\n        )\n      }\n\n      <Button type=\"submit\" className=\"mt-6\" loading={loading}>\n        {t('Sign Up')}\n      </Button>\n    </form>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAmBA,SAAgB,iBAAiB,OAAuC;CACtE,MAAM,EAAE,kDAAsB;CAoB9B,MAAM,EAAE,UAAU,cAAc,UAAU,WAAW,EAAE,UAAU,6CAAwB,EACvF,8GAnBuB;EACvB,0EAAyB,EAAE,6BAA6B,CAAC,CAAC,SAAS,CAAC,SAAS,EAAE,0BAA0B,CAAC;EAC1G,UAAUA,2DAAe,SAAS,CAAC,SAAS,EAAE,6BAA6B,CAAC,CAAC,KAAK;GAChF,MAAM;GACN,OAAO,OAAO,QAAQ;IACpB,MAAM,6EAAyB,MAAM;AACrC,QAAI,MACF,QAAO,IAAI,YAAY,EAAE,SAAS,MAAM,SAAS,CAAC;QAElD,QAAO;;GAGZ,CAAC;EACF,GAAI,CAAC,MAAM,oBAAoB,EAC7B,gBAAgBA,2DAAe,UAAU,CAAC,MAAM;GAAC,IAAI,IAAI,WAAW;GAAE;GAAI;GAAK,EAAE,EAAE,yBAAyB,CAAC,CAAC,SAAS,EAAE,8BAA8B,CAAC,EACzJ;EACF,CAAC,CAG6B,EAC9B,CAAC;CACF,MAAM,wCAAmB;CACzB,MAAM,CAAC,SAAS,kCAAuB,MAAM;CAE7C,MAAM,WAAW,OAAO,SAAuC;AAC7D,aAAW,KAAK;AAChB,MAAI;GACF,MAAM,EAAE,OAAO,aAAa;GAC5B,MAAM,SAAS,MAAM,IAAI,qBAAqB;IAAE;IAAO;IAAU,CAAC;AAClE,OAAI,OAAO,WAAW,QACpB,UAAS,SAAS;IAAE,MAAM;IAAU,SAAS,OAAO,MAAM;IAAS,CAAC;YAE9D;AACR,cAAW,MAAM;;;CAIrB,MAAM,mBAAmB,SAAS,WAAW;CAC7C,MAAM,yBAAyB,SAAS,iBAAiB;AAEzD,QACE,4CAAC;EACC,WAAU;EACV,WAAU,mFAAgC,aAAa,SAAS,CAAC,EAAE,CAAC;EACpE;;GAEA,2CAACC;IAAM,SAAQ;IAAQ,WAAU;cAAQ,EAAE,QAAQ;KAAS;GAC5D,2CAACC;IAAM,IAAG;IAAQ,MAAK;IAAQ,cAAa;IAAQ,GAAI,SAAS,QAAQ;KAAG;GAC5E,2CAACC,8CAAgB,MAAM,OAAO,OAAO,SAAS,UAAU,GAAI;GAE5D,2CAACF;IAAM,SAAQ;IAAW,WAAU;cAAa,EAAE,WAAW;KAAS;GACvE,2CAACG;IACC,IAAG;IACH,cAAa;IACb,GAAI;IACJ,WAAW,MAA2C;AACpD,iBAAY,WAAW;AACvB,iBAAY,iBAAiB;AAC7B,yEAAkB,iBAAiB,SAAS,EAAE,CAAC;;KAEjD;GACF,2CAACD,8CAAgB,MAAM,OAAO,UAAU,SAAS,UAAU,GAAI;GAE7D,CAAC,MAAM,oBACL;IACE,2CAACF;KAAM,SAAQ;KAAkB,WAAU;eAAa,EAAE,kBAAkB;MAAS;IACrF,2CAACG;KACC,IAAG;KACH,GAAI;KACJ,WAAW,MAA2C;AACtD,kBAAY,WAAW;AACvB,kBAAY,iBAAiB;AAC7B,0EAAkB,uBAAuB,SAAS,EAAE,CAAC;;MAErD;IACF,2CAACD,8CAAgB,MAAM,OAAO,gBAAgB,SAAS,UAAU,GAAI;OACpE;GAIP,2CAACE;IAAO,MAAK;IAAS,WAAU;IAAgB;cAC7C,EAAE,UAAU;KACN;;GACJ"}

package/dist/components/magic-link-sign-in.js

@@ -8,10 +8,10 @@ let _stackframe_stack_shared_dist_utils_promises = require("@stackframe/stack-sh
 let _stackframe_stack_ui = require("@stackframe/stack-ui");
 let react = require("react");
 let react_hook_form = require("react-hook-form");
-let ___index_js = require("../index.js");
 let ___lib_translations_js = require("../lib/translations.js");
 let react_jsx_runtime = require("react/jsx-runtime");
 let __elements_form_warning_js = require("./elements/form-warning.js");
+let ___lib_hooks_js = require("../lib/hooks.js");
 let _stackframe_stack_shared = require("@stackframe/stack-shared");
 
 //#region src/components/magic-link-sign-in.tsx
@@ -19,7 +19,7 @@ function OTP(props) {
 	const { t } = (0, ___lib_translations_js.useTranslation)();
 	const [otp, setOtp] = (0, react.useState)("");
 	const [submitting, setSubmitting] = (0, react.useState)(false);
-	const stackApp = (0, ___index_js.useStackApp)();
+	const stackApp = (0, ___lib_hooks_js.useStackApp)();
 	const [error, setError] = (0, react.useState)(null);
 	(0, react.useEffect)(() => {
 		if (otp.length === 6 && !submitting) {
@@ -76,7 +76,7 @@ function OTP(props) {
 }
 function MagicLinkSignIn() {
 	const { t } = (0, ___lib_translations_js.useTranslation)();
-	const app = (0, ___index_js.useStackApp)();
+	const app = (0, ___lib_hooks_js.useStackApp)();
 	const [loading, setLoading] = (0, react.useState)(false);
 	const [nonce, setNonce] = (0, react.useState)(null);
 	const { register, handleSubmit, setError, formState: { errors } } = (0, react_hook_form.useForm)({ resolver: (0, _hookform_resolvers_yup.yupResolver)((0, _stackframe_stack_shared_dist_schema_fields.yupObject)({ email: (0, _stackframe_stack_shared_dist_schema_fields.strictEmailSchema)(t("Please enter a valid email")).defined().nonEmpty(t("Please enter your email")) })) });

package/dist/components/magic-link-sign-in.js.map

@@ -1 +1 @@
-{"version":3,"file":"magic-link-sign-in.js","names":["KnownErrors","Typography","InputOTP","InputOTPGroup","InputOTPSlot","FormWarningText","Button","Label","Input"],"sources":["../../src/components/magic-link-sign-in.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 { yupResolver } from \"@hookform/resolvers/yup\";\nimport { KnownErrors } from \"@stackframe/stack-shared\";\nimport { strictEmailSchema, yupObject } from \"@stackframe/stack-shared/dist/schema-fields\";\nimport { runAsynchronouslyWithAlert } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport { Button, Input, InputOTP, InputOTPGroup, InputOTPSlot, Label, Typography } from \"@stackframe/stack-ui\";\nimport { useEffect, useState } from \"react\";\nimport { useForm } from \"react-hook-form\";\nimport * as yup from \"yup\";\nimport { useStackApp } from \"..\";\nimport { useTranslation } from \"../lib/translations\";\nimport { FormWarningText } from \"./elements/form-warning\";\n\nfunction OTP(props: {\n  onBack: () => void,\n  nonce: string,\n}) {\n  const { t } = useTranslation();\n  const [otp, setOtp] = useState<string>('');\n  const [submitting, setSubmitting] = useState<boolean>(false);\n  const stackApp = useStackApp();\n  const [error, setError] = useState<string | null>(null);\n\n  useEffect(() => {\n    if (otp.length === 6 && !submitting) {\n      setSubmitting(true);\n      // eslint-disable-next-line no-restricted-syntax\n      stackApp.signInWithMagicLink(otp + props.nonce)\n        .then(result => {\n          if (result.status === 'error') {\n            if (KnownErrors.VerificationCodeError.isInstance(result.error)) {\n              setError(t(\"Invalid code\"));\n            } else if (KnownErrors.InvalidTotpCode.isInstance(result.error)) {\n              setError(t(\"Invalid TOTP code\"));\n            } else {\n              throw result.error;\n            }\n          }\n        })\n        .catch(e => console.error(e))\n        .finally(() => {\n          setSubmitting(false);\n          setOtp('');\n        });\n    }\n    if (otp.length !== 0 && otp.length !== 6) {\n      setError(null);\n    }\n  }, [otp, submitting]);\n\n  return (\n    <div className=\"flex flex-col items-stretch stack-scope\">\n      <form className='w-full flex flex-col items-center mb-2'>\n        <Typography className='mb-2' >{t('Enter the code from your email')}</Typography>\n        <InputOTP\n          maxLength={6}\n          type=\"text\"\n          inputMode=\"text\"\n          pattern={\"^[a-zA-Z0-9]+$\"}\n          value={otp}\n          onChange={value => setOtp(value.toUpperCase())}\n          disabled={submitting}\n        >\n          <InputOTPGroup>\n            {[0, 1, 2, 3, 4, 5].map((index) => (\n              <InputOTPSlot key={index} index={index} size='lg' />\n            ))}\n          </InputOTPGroup>\n        </InputOTP>\n        {error && <FormWarningText text={error} />}\n      </form>\n      <Button variant='link' onClick={props.onBack} className='underline'>{t('Cancel')}</Button>\n    </div>\n  );\n}\n\nexport function MagicLinkSignIn() {\n  const { t } = useTranslation();\n  const app = useStackApp();\n  const [loading, setLoading] = useState(false);\n  const [nonce, setNonce] = useState<string | null>(null);\n\n  const schema = yupObject({\n    email: strictEmailSchema(t('Please enter a valid email')).defined().nonEmpty(t('Please enter your email'))\n  });\n\n  const { register, handleSubmit, setError, formState: { errors } } = useForm({\n    resolver: yupResolver(schema)\n  });\n\n  const onSubmit = async (data: yup.InferType<typeof schema>) => {\n    setLoading(true);\n    try {\n      const { email } = data;\n      const result = await app.sendMagicLinkEmail(email);\n      if (result.status === 'error') {\n        setError('email', { type: 'manual', message: result.error.message });\n        return;\n      } else {\n        setNonce(result.data.nonce);\n      }\n    } catch (e) {\n      if (KnownErrors.SignUpNotEnabled.isInstance(e)) {\n        setError('email', { type: 'manual', message: t('New account registration is not allowed') });\n      } else {\n        throw e;\n      }\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  if (nonce) {\n    return <OTP nonce={nonce} onBack={() => setNonce(null)} />;\n  } else {\n    return (\n      <form\n        className=\"flex flex-col items-stretch stack-scope\"\n        onSubmit={e => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e))}\n        noValidate\n      >\n        <Label htmlFor=\"email\" className=\"mb-1\">{t('Email')}</Label>\n        <Input\n          id=\"email\"\n          type=\"email\"\n          autoComplete=\"email\"\n          {...register('email')}\n        />\n        <FormWarningText text={errors.email?.message?.toString()} />\n\n        <Button type=\"submit\" className=\"mt-6\" loading={loading}>\n          {t('Send email')}\n        </Button>\n      </form>\n    );\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"magic-link-sign-in.js","names":["KnownErrors","Typography","InputOTP","InputOTPGroup","InputOTPSlot","FormWarningText","Button","Label","Input"],"sources":["../../src/components/magic-link-sign-in.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 { yupResolver } from \"@hookform/resolvers/yup\";\nimport { KnownErrors } from \"@stackframe/stack-shared\";\nimport { strictEmailSchema, yupObject } from \"@stackframe/stack-shared/dist/schema-fields\";\nimport { runAsynchronouslyWithAlert } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport { Button, Input, InputOTP, InputOTPGroup, InputOTPSlot, Label, Typography } from \"@stackframe/stack-ui\";\nimport { useEffect, useState } from \"react\";\nimport { useForm } from \"react-hook-form\";\nimport * as yup from \"yup\";\nimport { useStackApp } from \"../lib/hooks\";\nimport { useTranslation } from \"../lib/translations\";\nimport { FormWarningText } from \"./elements/form-warning\";\n\nfunction OTP(props: {\n  onBack: () => void,\n  nonce: string,\n}) {\n  const { t } = useTranslation();\n  const [otp, setOtp] = useState<string>('');\n  const [submitting, setSubmitting] = useState<boolean>(false);\n  const stackApp = useStackApp();\n  const [error, setError] = useState<string | null>(null);\n\n  useEffect(() => {\n    if (otp.length === 6 && !submitting) {\n      setSubmitting(true);\n      // eslint-disable-next-line no-restricted-syntax\n      stackApp.signInWithMagicLink(otp + props.nonce)\n        .then(result => {\n          if (result.status === 'error') {\n            if (KnownErrors.VerificationCodeError.isInstance(result.error)) {\n              setError(t(\"Invalid code\"));\n            } else if (KnownErrors.InvalidTotpCode.isInstance(result.error)) {\n              setError(t(\"Invalid TOTP code\"));\n            } else {\n              throw result.error;\n            }\n          }\n        })\n        .catch(e => console.error(e))\n        .finally(() => {\n          setSubmitting(false);\n          setOtp('');\n        });\n    }\n    if (otp.length !== 0 && otp.length !== 6) {\n      setError(null);\n    }\n  }, [otp, submitting]);\n\n  return (\n    <div className=\"flex flex-col items-stretch stack-scope\">\n      <form className='w-full flex flex-col items-center mb-2'>\n        <Typography className='mb-2' >{t('Enter the code from your email')}</Typography>\n        <InputOTP\n          maxLength={6}\n          type=\"text\"\n          inputMode=\"text\"\n          pattern={\"^[a-zA-Z0-9]+$\"}\n          value={otp}\n          onChange={value => setOtp(value.toUpperCase())}\n          disabled={submitting}\n        >\n          <InputOTPGroup>\n            {[0, 1, 2, 3, 4, 5].map((index) => (\n              <InputOTPSlot key={index} index={index} size='lg' />\n            ))}\n          </InputOTPGroup>\n        </InputOTP>\n        {error && <FormWarningText text={error} />}\n      </form>\n      <Button variant='link' onClick={props.onBack} className='underline'>{t('Cancel')}</Button>\n    </div>\n  );\n}\n\nexport function MagicLinkSignIn() {\n  const { t } = useTranslation();\n  const app = useStackApp();\n  const [loading, setLoading] = useState(false);\n  const [nonce, setNonce] = useState<string | null>(null);\n\n  const schema = yupObject({\n    email: strictEmailSchema(t('Please enter a valid email')).defined().nonEmpty(t('Please enter your email'))\n  });\n\n  const { register, handleSubmit, setError, formState: { errors } } = useForm({\n    resolver: yupResolver(schema)\n  });\n\n  const onSubmit = async (data: yup.InferType<typeof schema>) => {\n    setLoading(true);\n    try {\n      const { email } = data;\n      const result = await app.sendMagicLinkEmail(email);\n      if (result.status === 'error') {\n        setError('email', { type: 'manual', message: result.error.message });\n        return;\n      } else {\n        setNonce(result.data.nonce);\n      }\n    } catch (e) {\n      if (KnownErrors.SignUpNotEnabled.isInstance(e)) {\n        setError('email', { type: 'manual', message: t('New account registration is not allowed') });\n      } else {\n        throw e;\n      }\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  if (nonce) {\n    return <OTP nonce={nonce} onBack={() => setNonce(null)} />;\n  } else {\n    return (\n      <form\n        className=\"flex flex-col items-stretch stack-scope\"\n        onSubmit={e => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e))}\n        noValidate\n      >\n        <Label htmlFor=\"email\" className=\"mb-1\">{t('Email')}</Label>\n        <Input\n          id=\"email\"\n          type=\"email\"\n          autoComplete=\"email\"\n          {...register('email')}\n        />\n        <FormWarningText text={errors.email?.message?.toString()} />\n\n        <Button type=\"submit\" className=\"mt-6\" loading={loading}>\n          {t('Send email')}\n        </Button>\n      </form>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/components/oauth-button.d.ts

@@ -4,11 +4,13 @@ import * as react_jsx_runtime0 from "react/jsx-runtime";
 declare function OAuthButton({
   provider,
   type,
-  isMock
+  isMock,
+  onAuthenticate
 }: {
   provider: string;
   type: 'sign-in' | 'sign-up';
   isMock?: boolean;
+  onAuthenticate?: () => Promise<void>;
 }): react_jsx_runtime0.JSX.Element;
 //#endregion
 export { OAuthButton };

package/dist/components/oauth-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"oauth-button.d.ts","names":[],"sources":["../../src/components/oauth-button.tsx"],"mappings":";;;iBAuBgB,WAAA,CAAA;EACd,QAAA;EACA,IAAA;EACA;AAAA;EAEA,QAAA;EACA,IAAA;EACA,MAAA;AAAA,IACD,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"oauth-button.d.ts","names":[],"sources":["../../src/components/oauth-button.tsx"],"mappings":";;;iBAuBgB,WAAA,CAAA;EACd,QAAA;EACA,IAAA;EACA,MAAA;EACA;AAAA;EAEA,QAAA;EACA,IAAA;EACA,MAAA;EACA,cAAA,SAAuB,OAAA;AAAA,IACxB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/oauth-button.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const require_chunk = require('../chunk-BE-pF4vm.js');
 let _stackframe_stack_ui = require("@stackframe/stack-ui");
 let react = require("react");
-let ___index_js = require("../index.js");
 let ___lib_translations_js = require("../lib/translations.js");
 let react_jsx_runtime = require("react/jsx-runtime");
+let ___lib_hooks_js = require("../lib/hooks.js");
 let color = require("color");
 color = require_chunk.__toESM(color);
 let __use_in_iframe_js = require("./use-in-iframe.js");
@@ -17,9 +17,9 @@ const changeColor = (c, value) => {
 	if (c.isLight()) value = -value;
 	return c.hsl(c.hue(), c.saturationl(), c.lightness() + value).toString();
 };
-function OAuthButton({ provider, type, isMock = false }) {
+function OAuthButton({ provider, type, isMock = false, onAuthenticate }) {
 	const { t } = (0, ___lib_translations_js.useTranslation)();
-	const stackApp = (0, ___index_js.useStackApp)();
+	const stackApp = (0, ___lib_hooks_js.useStackApp)();
 	const styleId = (0, react.useId)().replaceAll(":", "-");
 	const isIframe = (0, __use_in_iframe_js.useInIframe)();
 	const [lastUsed, setLastUsed] = (0, react.useState)(null);
@@ -150,7 +150,7 @@ function OAuthButton({ provider, type, isMock = false }) {
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_stackframe_stack_ui.Button, {
 			onClick: async () => {
 				localStorage.setItem("_STACK_AUTH.lastUsed", provider);
-				await stackApp.signInWithOAuth(provider);
+				await (onAuthenticate ? onAuthenticate() : stackApp.signInWithOAuth(provider));
 			},
 			className: `stack-oauth-button-${styleId} stack-scope relative w-full`,
 			disabled: isIframe,

package/dist/components/oauth-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"oauth-button.js","names":["BrandIcons","SimpleTooltip","Button"],"sources":["../../src/components/oauth-button.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 { BrandIcons, Button, SimpleTooltip } from '@stackframe/stack-ui';\nimport Color, { ColorInstance } from 'color';\nimport { useEffect, useId, useState } from 'react';\nimport { useStackApp } from '..';\nimport { useTranslation } from '../lib/translations';\nimport { useInIframe } from './use-in-iframe';\n\nconst iconSize = 22;\n\nconst changeColor = (c: ColorInstance, value: number) => {\n  if (c.isLight()) {\n    value = -value;\n  }\n  return c.hsl(c.hue(), c.saturationl(), c.lightness() + value).toString();\n};\n\nexport function OAuthButton({\n  provider,\n  type,\n  isMock = false,\n}: {\n  provider: string,\n  type: 'sign-in' | 'sign-up',\n  isMock?: boolean,\n}) {\n  const { t } = useTranslation();\n  const stackApp = useStackApp();\n  const styleId = useId().replaceAll(':', '-');\n  const isIframe = useInIframe();\n\n  const [lastUsed, setLastUsed] = useState<string | null>(null);\n  useEffect(() => {\n    setLastUsed(localStorage.getItem('_STACK_AUTH.lastUsed'));\n  }, []);\n\n  let style : {\n    backgroundColor?: string,\n    textColor?: string,\n    name: string,\n    icon: JSX.Element | null,\n    border?: string,\n  };\n  switch (provider) {\n    case 'google': {\n      style = {\n        backgroundColor: '#fff',\n        textColor: '#000',\n        name: 'Google',\n        border: '1px solid #ddd',\n        icon: <BrandIcons.Google iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'github': {\n      style = {\n        backgroundColor: '#111',\n        textColor: '#fff',\n        border: '1px solid #333',\n        name: 'GitHub',\n        icon: <BrandIcons.GitHub iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'facebook': {\n      style = {\n        backgroundColor: '#1877F2',\n        textColor: '#fff',\n        name: 'Facebook',\n        icon: <BrandIcons.Facebook iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'microsoft': {\n      style = {\n        backgroundColor: '#2f2f2f',\n        textColor: '#fff',\n        name: 'Microsoft',\n        icon: <BrandIcons.Microsoft iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'spotify': {\n      style = {\n        backgroundColor: '#1DB954',\n        textColor: '#fff',\n        name: 'Spotify',\n        icon: <BrandIcons.Spotify iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'discord': {\n      style = {\n        backgroundColor: '#5865F2',\n        textColor: '#fff',\n        name: 'Discord',\n        icon: <BrandIcons.Discord iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'gitlab': {\n      style = {\n        backgroundColor: \"#111\",\n        textColor: \"#fff\",\n        border: \"1px solid #333\",\n        name: \"Gitlab\",\n        icon: <BrandIcons.Gitlab iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'apple': {\n      style = {\n        backgroundColor: \"#000\",\n        textColor: \"#fff\",\n        border: \"1px solid #333\",\n        name: \"Apple\",\n        icon: <BrandIcons.Apple iconSize={iconSize} />,\n      };\n      break;\n    }\n    case \"bitbucket\": {\n      style = {\n        backgroundColor: \"#fff\",\n        textColor: \"#000\",\n        border: \"1px solid #ddd\",\n        name: \"Bitbucket\",\n        icon: <BrandIcons.Bitbucket iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'linkedin': {\n      style = {\n        backgroundColor: \"#0073b1\",\n        textColor: \"#fff\",\n        name: \"LinkedIn\",\n        icon: <BrandIcons.LinkedIn iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'x': {\n      style = {\n        backgroundColor: \"#000\",\n        textColor: \"#fff\",\n        name: \"X\",\n        icon: <BrandIcons.X iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'twitch': {\n      style = {\n        backgroundColor: \"#6441a5\",\n        textColor: \"#fff\",\n        name: \"Twitch\",\n        icon: <BrandIcons.Twitch iconSize={iconSize} />,\n      };\n      break;\n    }\n    default: {\n      style = {\n        name: provider,\n        icon: null,\n      };\n    }\n  }\n\n  const styleSheet = `\n    .stack-oauth-button-${styleId} {\n      background-color: ${style.backgroundColor} !important;\n      color: ${style.textColor} !important;\n      border: ${style.border} !important;\n    }\n    .stack-oauth-button-${styleId}:hover {\n      background-color: ${changeColor(Color(style.backgroundColor), 10)} !important;\n    }\n  `;\n\n  return (\n    <>\n      <style>{styleSheet}</style>\n      <SimpleTooltip\n        disabled={!isIframe}\n        tooltip={isIframe ? \"This auth provider is not supported in an iframe for security reasons.\" : undefined}\n        className='stack-scope w-full inline-flex'\n      >\n        <Button\n          onClick={async () => {\n            localStorage.setItem('_STACK_AUTH.lastUsed', provider);\n            await stackApp.signInWithOAuth(provider);\n          }}\n          className={`stack-oauth-button-${styleId} stack-scope relative w-full`}\n          disabled={isIframe}\n        >\n          {!isMock && lastUsed === provider && (\n            <span className=\"absolute -top-2 -right-2 bg-blue-500 text-white text-xs px-2 py-1 rounded-md\">\n            last\n            </span>\n          )}\n          <div className='flex items-center w-full gap-4'>\n            {style.icon}\n            <span className='flex-1'>\n              {type === 'sign-up' ?\n              t('Sign up with {provider}', { provider: style.name }) :\n              t('Sign in with {provider}', { provider: style.name })\n              }\n            </span>\n          </div>\n        </Button>\n      </SimpleTooltip>\n    </>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"oauth-button.js","names":["BrandIcons","SimpleTooltip","Button"],"sources":["../../src/components/oauth-button.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 { BrandIcons, Button, SimpleTooltip } from '@stackframe/stack-ui';\nimport Color, { ColorInstance } from 'color';\nimport { useEffect, useId, useState } from 'react';\nimport { useStackApp } from '../lib/hooks';\nimport { useTranslation } from '../lib/translations';\nimport { useInIframe } from './use-in-iframe';\n\nconst iconSize = 22;\n\nconst changeColor = (c: ColorInstance, value: number) => {\n  if (c.isLight()) {\n    value = -value;\n  }\n  return c.hsl(c.hue(), c.saturationl(), c.lightness() + value).toString();\n};\n\nexport function OAuthButton({\n  provider,\n  type,\n  isMock = false,\n  onAuthenticate,\n}: {\n  provider: string,\n  type: 'sign-in' | 'sign-up',\n  isMock?: boolean,\n  onAuthenticate?: () => Promise<void>,\n}) {\n  const { t } = useTranslation();\n  const stackApp = useStackApp();\n  const styleId = useId().replaceAll(':', '-');\n  const isIframe = useInIframe();\n\n  const [lastUsed, setLastUsed] = useState<string | null>(null);\n  useEffect(() => {\n    setLastUsed(localStorage.getItem('_STACK_AUTH.lastUsed'));\n  }, []);\n\n  let style : {\n    backgroundColor?: string,\n    textColor?: string,\n    name: string,\n    icon: JSX.Element | null,\n    border?: string,\n  };\n  switch (provider) {\n    case 'google': {\n      style = {\n        backgroundColor: '#fff',\n        textColor: '#000',\n        name: 'Google',\n        border: '1px solid #ddd',\n        icon: <BrandIcons.Google iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'github': {\n      style = {\n        backgroundColor: '#111',\n        textColor: '#fff',\n        border: '1px solid #333',\n        name: 'GitHub',\n        icon: <BrandIcons.GitHub iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'facebook': {\n      style = {\n        backgroundColor: '#1877F2',\n        textColor: '#fff',\n        name: 'Facebook',\n        icon: <BrandIcons.Facebook iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'microsoft': {\n      style = {\n        backgroundColor: '#2f2f2f',\n        textColor: '#fff',\n        name: 'Microsoft',\n        icon: <BrandIcons.Microsoft iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'spotify': {\n      style = {\n        backgroundColor: '#1DB954',\n        textColor: '#fff',\n        name: 'Spotify',\n        icon: <BrandIcons.Spotify iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'discord': {\n      style = {\n        backgroundColor: '#5865F2',\n        textColor: '#fff',\n        name: 'Discord',\n        icon: <BrandIcons.Discord iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'gitlab': {\n      style = {\n        backgroundColor: \"#111\",\n        textColor: \"#fff\",\n        border: \"1px solid #333\",\n        name: \"Gitlab\",\n        icon: <BrandIcons.Gitlab iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'apple': {\n      style = {\n        backgroundColor: \"#000\",\n        textColor: \"#fff\",\n        border: \"1px solid #333\",\n        name: \"Apple\",\n        icon: <BrandIcons.Apple iconSize={iconSize} />,\n      };\n      break;\n    }\n    case \"bitbucket\": {\n      style = {\n        backgroundColor: \"#fff\",\n        textColor: \"#000\",\n        border: \"1px solid #ddd\",\n        name: \"Bitbucket\",\n        icon: <BrandIcons.Bitbucket iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'linkedin': {\n      style = {\n        backgroundColor: \"#0073b1\",\n        textColor: \"#fff\",\n        name: \"LinkedIn\",\n        icon: <BrandIcons.LinkedIn iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'x': {\n      style = {\n        backgroundColor: \"#000\",\n        textColor: \"#fff\",\n        name: \"X\",\n        icon: <BrandIcons.X iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'twitch': {\n      style = {\n        backgroundColor: \"#6441a5\",\n        textColor: \"#fff\",\n        name: \"Twitch\",\n        icon: <BrandIcons.Twitch iconSize={iconSize} />,\n      };\n      break;\n    }\n    default: {\n      style = {\n        name: provider,\n        icon: null,\n      };\n    }\n  }\n\n  const styleSheet = `\n    .stack-oauth-button-${styleId} {\n      background-color: ${style.backgroundColor} !important;\n      color: ${style.textColor} !important;\n      border: ${style.border} !important;\n    }\n    .stack-oauth-button-${styleId}:hover {\n      background-color: ${changeColor(Color(style.backgroundColor), 10)} !important;\n    }\n  `;\n\n  return (\n    <>\n      <style>{styleSheet}</style>\n      <SimpleTooltip\n        disabled={!isIframe}\n        tooltip={isIframe ? \"This auth provider is not supported in an iframe for security reasons.\" : undefined}\n        className='stack-scope w-full inline-flex'\n      >\n        <Button\n          onClick={async () => {\n            localStorage.setItem('_STACK_AUTH.lastUsed', provider);\n            await (onAuthenticate ? onAuthenticate() : stackApp.signInWithOAuth(provider));\n          }}\n          className={`stack-oauth-button-${styleId} stack-scope relative w-full`}\n          disabled={isIframe}\n        >\n          {!isMock && lastUsed === provider && (\n            <span className=\"absolute -top-2 -right-2 bg-blue-500 text-white text-xs px-2 py-1 rounded-md\">\n            last\n            </span>\n          )}\n          <div className='flex items-center w-full gap-4'>\n            {style.icon}\n            <span className='flex-1'>\n              {type === 'sign-up' ?\n              t('Sign up with {provider}', { provider: style.name }) :\n              t('Sign in with {provider}', { provider: style.name })\n              }\n            </span>\n          </div>\n        </Button>\n      </SimpleTooltip>\n    </>\n  );\n}\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"payments-panel.d.ts","names":[],"sources":["../../../../src/components-page/account-settings/payments/payments-panel.tsx"],"mappings":";;;;KAmBK,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"}
+{"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

@@ -13,6 +13,7 @@ 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) {
@@ -191,7 +192,7 @@ function RealPaymentsPanel(props) {
 	const [switchToProductId, setSwitchToProductId] = (0, react.useState)(null);
 	const stripePromise = (0, react.useMemo)(() => {
 		if (!setupIntentStripeAccountId) return null;
-		const publishableKey = process.env.NEXT_PUBLIC_STACK_STRIPE_PUBLISHABLE_KEY;
+		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]);
@@ -204,7 +205,7 @@ function RealPaymentsPanel(props) {
 			});
 			return;
 		}
-		alert(`An unhandled error occurred. Please ${process.env.NODE_ENV === "development" ? "check the browser console for the full error." : "report this to the developer."}\n\n${error}`);
+		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 () => {

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

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

package/dist/components-page/oauth-callback.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"oauth-callback.d.ts","names":[],"sources":["../../src/components-page/oauth-callback.tsx"],"mappings":";;;iBAgBgB,aAAA,CAAA;EAAgB;AAAA;EAAc,QAAA;AAAA,IAAoB,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"oauth-callback.d.ts","names":[],"sources":["../../src/components-page/oauth-callback.tsx"],"mappings":";;;iBAiBgB,aAAA,CAAA;EAAgB;AAAA;EAAc,QAAA;AAAA,IAAoB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components-page/oauth-callback.js

@@ -11,6 +11,7 @@ let ___lib_translations_js = require("../lib/translations.js");
 let react_jsx_runtime = require("react/jsx-runtime");
 let ___components_elements_maybe_full_page_js = require("../components/elements/maybe-full-page.js");
 let ___components_link_js = require("../components/link.js");
+let ___lib_env_js = require("../lib/env.js");
 
 //#region src/components-page/oauth-callback.tsx
 function OAuthCallback({ fullPage }) {
@@ -23,13 +24,15 @@ function OAuthCallback({ fullPage }) {
 		if (called.current) return;
 		called.current = true;
 		let hasRedirected = false;
+		let callbackError = null;
 		try {
 			hasRedirected = await app.callOAuthCallback();
 		} catch (e) {
+			callbackError = e;
 			(0, _stackframe_stack_shared_dist_utils_errors.captureError)("<OAuthCallback />", e);
 			setError(e);
 		}
-		if (!hasRedirected && (!error || process.env.NODE_ENV === "production")) await app.redirectToSignIn({ noRedirectBack: true });
+		if (!hasRedirected && (callbackError == null || ___lib_env_js.envVars.NODE_ENV === "production")) await app.redirectToSignIn({ noRedirectBack: true });
 	}), []);
 	(0, react.useEffect)(() => {
 		setTimeout(() => setShowRedirectLink(true), 3e3);

package/dist/components-page/oauth-callback.js.map

@@ -1 +1 @@
-{"version":3,"file":"oauth-callback.js","names":["MaybeFullPage","Spinner","StyledLink"],"sources":["../../src/components-page/oauth-callback.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 { captureError } from \"@stackframe/stack-shared/dist/utils/errors\";\nimport { runAsynchronously } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport { Spinner, cn } from \"@stackframe/stack-ui\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { useStackApp } from \"..\";\nimport { MaybeFullPage } from \"../components/elements/maybe-full-page\";\nimport { StyledLink } from \"../components/link\";\nimport { useTranslation } from \"../lib/translations\";\n\nexport function OAuthCallback({ fullPage }: { fullPage?: boolean }) {\n  const { t } = useTranslation();\n  const app = useStackApp();\n  const called = useRef(false);\n  const [error, setError] = useState<unknown>(null);\n  const [showRedirectLink, setShowRedirectLink] = useState(false);\n\n  useEffect(() => runAsynchronously(async () => {\n    if (called.current) return;\n    called.current = true;\n    let hasRedirected = false;\n    try {\n      hasRedirected = await app.callOAuthCallback();\n    } catch (e) {\n      captureError(\"<OAuthCallback />\", e);\n      setError(e);\n    }\n    if (!hasRedirected && (!error || process.env.NODE_ENV === 'production')) {\n      await app.redirectToSignIn({ noRedirectBack: true });\n    }\n  }), []);\n\n  useEffect(() => {\n    setTimeout(() => setShowRedirectLink(true), 3000);\n  }, []);\n\n  return (\n    <MaybeFullPage\n      fullPage={fullPage ?? false}\n      containerClassName=\"flex items-center justify-center\"\n    >\n      <div\n        className={cn(\n          \"text-center justify-center items-center stack-scope flex flex-col gap-4 max-w-[380px]\",\n          fullPage ? \"p-4\" : \"p-0\"\n        )}\n      >\n        <div className=\"flex flex-col justify-center items-center gap-4\">\n          <Spinner size={20} />\n        </div>\n        {showRedirectLink ? <p>{t('If you are not redirected automatically, ')}<StyledLink className=\"whitespace-nowrap\" href={app.urls.home}>{t(\"click here\")}</StyledLink></p> : null}\n        {error ? <div>\n          <p>{t(\"Something went wrong while processing the OAuth callback:\")}</p>\n          <pre>{JSON.stringify(error, null, 2)}</pre>\n          <p>{t(\"This is most likely an error in Stack. Please report it.\")}</p>\n        </div> : null}\n      </div>\n    </MaybeFullPage>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;AAgBA,SAAgB,cAAc,EAAE,YAAoC;CAClE,MAAM,EAAE,kDAAsB;CAC9B,MAAM,oCAAmB;CACzB,MAAM,2BAAgB,MAAM;CAC5B,MAAM,CAAC,OAAO,gCAA8B,KAAK;CACjD,MAAM,CAAC,kBAAkB,2CAAgC,MAAM;AAE/D,gGAAkC,YAAY;AAC5C,MAAI,OAAO,QAAS;AACpB,SAAO,UAAU;EACjB,IAAI,gBAAgB;AACpB,MAAI;AACF,mBAAgB,MAAM,IAAI,mBAAmB;WACtC,GAAG;AACV,gEAAa,qBAAqB,EAAE;AACpC,YAAS,EAAE;;AAEb,MAAI,CAAC,kBAAkB,CAAC,SAAS,QAAQ,IAAI,aAAa,cACxD,OAAM,IAAI,iBAAiB,EAAE,gBAAgB,MAAM,CAAC;GAEtD,EAAE,EAAE,CAAC;AAEP,4BAAgB;AACd,mBAAiB,oBAAoB,KAAK,EAAE,IAAK;IAChD,EAAE,CAAC;AAEN,QACE,2CAACA;EACC,UAAU,YAAY;EACtB,oBAAmB;YAEnB,4CAAC;GACC,wCACE,yFACA,WAAW,QAAQ,MACpB;;IAED,2CAAC;KAAI,WAAU;eACb,2CAACC,gCAAQ,MAAM,KAAM;MACjB;IACL,mBAAmB,4CAAC,kBAAG,EAAE,4CAA4C,EAAC,2CAACC;KAAW,WAAU;KAAoB,MAAM,IAAI,KAAK;eAAO,EAAE,aAAa;MAAc,IAAI,GAAG;IAC1K,QAAQ,4CAAC;KACR,2CAAC,iBAAG,EAAE,4DAA4D,GAAK;KACvE,2CAAC,mBAAK,KAAK,UAAU,OAAO,MAAM,EAAE,GAAO;KAC3C,2CAAC,iBAAG,EAAE,2DAA2D,GAAK;QAClE,GAAG;;IACL;GACQ"}
+{"version":3,"file":"oauth-callback.js","names":["envVars","MaybeFullPage","Spinner","StyledLink"],"sources":["../../src/components-page/oauth-callback.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 { captureError } from \"@stackframe/stack-shared/dist/utils/errors\";\nimport { runAsynchronously } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport { Spinner, cn } from \"@stackframe/stack-ui\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { useStackApp } from \"..\";\nimport { MaybeFullPage } from \"../components/elements/maybe-full-page\";\nimport { StyledLink } from \"../components/link\";\nimport { envVars } from \"../lib/env\";\nimport { useTranslation } from \"../lib/translations\";\n\nexport function OAuthCallback({ fullPage }: { fullPage?: boolean }) {\n  const { t } = useTranslation();\n  const app = useStackApp();\n  const called = useRef(false);\n  const [error, setError] = useState<unknown>(null);\n  const [showRedirectLink, setShowRedirectLink] = useState(false);\n\n  useEffect(() => runAsynchronously(async () => {\n    if (called.current) return;\n    called.current = true;\n    let hasRedirected = false;\n    let callbackError: unknown = null;\n    try {\n      hasRedirected = await app.callOAuthCallback();\n    } catch (e) {\n      callbackError = e;\n      captureError(\"<OAuthCallback />\", e);\n      setError(e);\n    }\n    if (!hasRedirected && (callbackError == null || envVars.NODE_ENV === \"production\")) {\n      await app.redirectToSignIn({ noRedirectBack: true });\n    }\n  }), []);\n\n  useEffect(() => {\n    setTimeout(() => setShowRedirectLink(true), 3000);\n  }, []);\n\n  return (\n    <MaybeFullPage\n      fullPage={fullPage ?? false}\n      containerClassName=\"flex items-center justify-center\"\n    >\n      <div\n        className={cn(\n          \"text-center justify-center items-center stack-scope flex flex-col gap-4 max-w-[380px]\",\n          fullPage ? \"p-4\" : \"p-0\"\n        )}\n      >\n        <div className=\"flex flex-col justify-center items-center gap-4\">\n          <Spinner size={20} />\n        </div>\n        {showRedirectLink ? <p>{t('If you are not redirected automatically, ')}<StyledLink className=\"whitespace-nowrap\" href={app.urls.home}>{t(\"click here\")}</StyledLink></p> : null}\n        {error ? <div>\n          <p>{t(\"Something went wrong while processing the OAuth callback:\")}</p>\n          <pre>{JSON.stringify(error, null, 2)}</pre>\n          <p>{t(\"This is most likely an error in Stack. Please report it.\")}</p>\n        </div> : null}\n      </div>\n    </MaybeFullPage>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAiBA,SAAgB,cAAc,EAAE,YAAoC;CAClE,MAAM,EAAE,kDAAsB;CAC9B,MAAM,oCAAmB;CACzB,MAAM,2BAAgB,MAAM;CAC5B,MAAM,CAAC,OAAO,gCAA8B,KAAK;CACjD,MAAM,CAAC,kBAAkB,2CAAgC,MAAM;AAE/D,gGAAkC,YAAY;AAC5C,MAAI,OAAO,QAAS;AACpB,SAAO,UAAU;EACjB,IAAI,gBAAgB;EACpB,IAAI,gBAAyB;AAC7B,MAAI;AACF,mBAAgB,MAAM,IAAI,mBAAmB;WACtC,GAAG;AACV,mBAAgB;AAChB,gEAAa,qBAAqB,EAAE;AACpC,YAAS,EAAE;;AAEb,MAAI,CAAC,kBAAkB,iBAAiB,QAAQA,sBAAQ,aAAa,cACnE,OAAM,IAAI,iBAAiB,EAAE,gBAAgB,MAAM,CAAC;GAEtD,EAAE,EAAE,CAAC;AAEP,4BAAgB;AACd,mBAAiB,oBAAoB,KAAK,EAAE,IAAK;IAChD,EAAE,CAAC;AAEN,QACE,2CAACC;EACC,UAAU,YAAY;EACtB,oBAAmB;YAEnB,4CAAC;GACC,wCACE,yFACA,WAAW,QAAQ,MACpB;;IAED,2CAAC;KAAI,WAAU;eACb,2CAACC,gCAAQ,MAAM,KAAM;MACjB;IACL,mBAAmB,4CAAC,kBAAG,EAAE,4CAA4C,EAAC,2CAACC;KAAW,WAAU;KAAoB,MAAM,IAAI,KAAK;eAAO,EAAE,aAAa;MAAc,IAAI,GAAG;IAC1K,QAAQ,4CAAC;KACR,2CAAC,iBAAG,EAAE,4DAA4D,GAAK;KACvE,2CAAC,mBAAK,KAAK,UAAU,OAAO,MAAM,EAAE,GAAO;KAC3C,2CAAC,iBAAG,EAAE,2DAA2D,GAAK;QAClE,GAAG;;IACL;GACQ"}

package/dist/components-page/stack-handler-client.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stack-handler-client.d.ts","names":[],"sources":["../../src/components-page/stack-handler-client.tsx"],"mappings":";;;;;;;;;;;;;;;;KA6BK,UAAA;EACH,MAAA,SAAe,MAAA;EACf,MAAA,SAAe,MAAA;EACf,iBAAA,SAA0B,iBAAA;EAC1B,aAAA,SAAsB,aAAA;EACtB,cAAA,SAAuB,cAAA;EACvB,OAAA,SAAgB,OAAA;EAChB,aAAA,SAAsB,aAAA;EACtB,iBAAA,SAA0B,iBAAA;EAC1B,cAAA,SAAuB,cAAA;EACvB,SAAA,SAAkB,SAAA;EAClB,eAAA,SAAwB,eAAA;EACxB,mBAAA,SAA4B,mBAAA;EAC5B,GAAA,SAAY,GAAA;EACZ,UAAA,SAAmB,UAAA;AAAA;AAAA,KAGhB,UAAA;EACH,MAAA,EAAQ,OAAA;IAAU,KAAA;EAAA;IAAwB,KAAA;EAAA;EAC1C,YAAA,EAAc,OAAA,CAAQ,MAAA,oBAA0B,MAAA;AAAA;AAAA,KA2BtC,gBAAA;EACV,QAAA;EACA,cAAA,iBACc,UAAA,IAAc,UAAA,CAAW,UAAA,CAAW,CAAA;AAAA;AAAA,iBAqIpC,kBAAA,CAAmB,KAAA,EAAO,gBAAA,GAAmB,OAAA,CAAQ,UAAA;EAAgB,QAAA;AAAA"}
+{"version":3,"file":"stack-handler-client.d.ts","names":[],"sources":["../../src/components-page/stack-handler-client.tsx"],"mappings":";;;;;;;;;;;;;;;;KA8BK,UAAA;EACH,MAAA,SAAe,MAAA;EACf,MAAA,SAAe,MAAA;EACf,iBAAA,SAA0B,iBAAA;EAC1B,aAAA,SAAsB,aAAA;EACtB,cAAA,SAAuB,cAAA;EACvB,OAAA,SAAgB,OAAA;EAChB,aAAA,SAAsB,aAAA;EACtB,iBAAA,SAA0B,iBAAA;EAC1B,cAAA,SAAuB,cAAA;EACvB,SAAA,SAAkB,SAAA;EAClB,eAAA,SAAwB,eAAA;EACxB,mBAAA,SAA4B,mBAAA;EAC5B,GAAA,SAAY,GAAA;EACZ,UAAA,SAAmB,UAAA;AAAA;AAAA,KAGhB,UAAA;EACH,MAAA,EAAQ,OAAA;IAAU,KAAA;EAAA;IAAwB,KAAA;EAAA;EAC1C,YAAA,EAAc,OAAA,CAAQ,MAAA,oBAA0B,MAAA;AAAA;AAAA,KA6BtC,gBAAA;EACV,QAAA;EACA,cAAA,iBACc,UAAA,IAAc,UAAA,CAAW,UAAA,CAAW,CAAA;AAAA;AAAA,iBA8IpC,kBAAA,CAAmB,KAAA,EAAO,gBAAA,GAAmB,OAAA,CAAQ,UAAA;EAAgB,QAAA;AAAA"}

package/dist/components-page/stack-handler-client.js

@@ -10,6 +10,8 @@ let ___lib_hooks_js = require("../lib/hooks.js");
 let ___components_message_cards_message_card_js = require("../components/message-cards/message-card.js");
 let _stackframe_stack_shared_dist_utils_objects = require("@stackframe/stack-shared/dist/utils/objects");
 let _stackframe_stack_shared_dist_utils_urls = require("@stackframe/stack-shared/dist/utils/urls");
+let ___lib_stack_app_index_js = require("../lib/stack-app/index.js");
+let ___lib_stack_app_url_targets_js = require("../lib/stack-app/url-targets.js");
 let __account_settings_js = require("./account-settings.js");
 let __cli_auth_confirm_js = require("./cli-auth-confirm.js");
 let __email_verification_js = require("./email-verification.js");
@@ -40,13 +42,14 @@ const availablePaths = {
 	error: "error",
 	onboarding: "onboarding"
 };
+const placeholderOrigin = "http://example.com";
 const pathAliases = {
 	...Object.fromEntries(Object.entries(availablePaths).map(([key, value]) => [value, value])),
 	"log-in": availablePaths.signIn,
 	"register": availablePaths.signUp
 };
 function renderComponent(props) {
-	const { path, searchParams, fullPage, componentProps, redirectIfNotHandler, onNotFound, app } = props;
+	const { path, searchParams, fullPage, componentProps, redirectIfNotHandler, getDefaultUnknownPathUrl, onNotFound, app } = props;
 	switch (path) {
 		case availablePaths.signIn:
 			redirectIfNotHandler?.("signIn");
@@ -133,34 +136,53 @@ function renderComponent(props) {
 				fullPage,
 				...filterUndefinedINU(componentProps?.Onboarding)
 			});
-		default:
+		default: {
 			if (Object.values(availablePaths).includes(path)) throw new _stackframe_stack_shared_dist_utils_errors.StackAssertionError(`Path alias ${path} not included in switch statement, but in availablePaths?`, { availablePaths });
 			for (const [key, value] of Object.entries(pathAliases)) if (path.toLowerCase().replaceAll("-", "") === key.toLowerCase().replaceAll("-", "")) return { redirect: `${app.urls.handler}/${value}?${new URLSearchParams(searchParams).toString()}` };
+			const defaultUnknownPathUrl = getDefaultUnknownPathUrl?.(path);
+			if (defaultUnknownPathUrl != null) {
+				const defaultUnknownPathUrlObject = new URL(defaultUnknownPathUrl, "http://example.com");
+				for (const [key, value] of Object.entries(searchParams)) defaultUnknownPathUrlObject.searchParams.set(key, value);
+				return { redirect: toAbsoluteOrRelativeRedirectTarget(defaultUnknownPathUrlObject) };
+			}
 			return onNotFound();
+		}
 	}
 }
 function StackHandlerClient(props) {
 	const stackApp = (0, ___lib_hooks_js.useStackApp)();
 	const currentLocation = props.location ?? window.location.pathname;
 	const searchParamsSource = new URLSearchParams(window.location.search);
-	const { path, searchParams } = (0, react.useMemo)(() => {
+	const { path, searchParams, handlerPath } = (0, react.useMemo)(() => {
 		const handlerPath = new URL(stackApp.urls.handler, "http://example.com").pathname;
 		return {
 			path: currentLocation.startsWith(handlerPath) ? currentLocation.slice(handlerPath.length).replace(/^\/+/, "") : currentLocation.replace(/^\/+/, ""),
-			searchParams: Object.fromEntries(searchParamsSource.entries())
+			searchParams: Object.fromEntries(searchParamsSource.entries()),
+			handlerPath
 		};
 	}, [
 		currentLocation,
 		searchParamsSource,
 		stackApp.urls.handler
 	]);
+	const getDefaultUnknownPathUrl = (unknownPath) => {
+		return (0, ___lib_stack_app_url_targets_js.resolveUnknownHandlerPathFallbackUrl)({
+			defaultTarget: stackApp[___lib_stack_app_index_js.stackAppInternalsSymbol].getConstructorOptions().urls?.default,
+			projectId: stackApp.projectId,
+			unknownPath
+		});
+	};
 	const redirectIfNotHandler = (name) => {
 		const url = stackApp.urls[name];
-		const handlerUrl = stackApp.urls.handler;
-		if (url !== handlerUrl && url.startsWith(handlerUrl + "/")) return;
-		const urlObj = new URL(url, "http://example.com");
+		if (name === "oauthCallback" && searchParams.stack_cross_domain_auth === "1") return;
+		if ((0, ___lib_stack_app_url_targets_js.isLocalHandlerUrlTarget)({
+			targetUrl: url,
+			handlerPath,
+			currentOrigin: typeof window === "undefined" ? void 0 : window.location.origin
+		})) return;
+		const urlObj = new URL(url, placeholderOrigin);
 		for (const [key, value] of Object.entries(searchParams)) urlObj.searchParams.set(key, value);
-		window.location.href = (0, _stackframe_stack_shared_dist_utils_urls.getRelativePart)(urlObj);
+		window.location.href = toAbsoluteOrRelativeRedirectTarget(urlObj);
 	};
 	const result = renderComponent({
 		path,
@@ -168,6 +190,7 @@ function StackHandlerClient(props) {
 		fullPage: props.fullPage,
 		componentProps: props.componentProps,
 		redirectIfNotHandler,
+		getDefaultUnknownPathUrl,
 		onNotFound: () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(___components_message_cards_message_card_js.MessageCard, {
 			title: "Page does not exist",
 			fullPage: props.fullPage,
@@ -186,6 +209,9 @@ function StackHandlerClient(props) {
 function filterUndefinedINU(value) {
 	return value === void 0 ? value : (0, _stackframe_stack_shared_dist_utils_objects.filterUndefined)(value);
 }
+function toAbsoluteOrRelativeRedirectTarget(url) {
+	return url.origin === "http://example.com" ? (0, _stackframe_stack_shared_dist_utils_urls.getRelativePart)(url) : url.toString();
+}
 
 //#endregion
 exports.StackHandlerClient = StackHandlerClient;