🐛 Fix pay wall submitting wrong form on click (#1503)

This commit is contained in:
Luke Vella 2025-01-17 15:09:51 +00:00 committed by GitHub
parent 5d9606b695
commit 73718429b6
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -10,9 +10,10 @@ export const UpgradeButton = ({
large,
}: React.PropsWithChildren<{ annual?: boolean; large?: boolean }>) => {
const posthog = usePostHog();
const formRef = React.useRef<HTMLFormElement>(null);
return (
<form method="POST" action="/api/stripe/checkout">
<form ref={formRef} method="POST" action="/api/stripe/checkout">
<input
type="hidden"
name="period"
@ -26,9 +27,14 @@ export const UpgradeButton = ({
<Button
size={large ? "lg" : "default"}
className="w-full"
type="submit"
variant="primary"
onClick={() => {
onClick={(e) => {
// 🐛 Since we have nested forms, we need to prevent the default
// action of the button from being triggered so that we don't submit
// the parent form.
// TODO: Fix this by making sure we never have nested forms.
e.preventDefault();
formRef.current?.submit();
posthog?.capture("click upgrade button");
}}
>