🐛 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, large,
}: React.PropsWithChildren<{ annual?: boolean; large?: boolean }>) => { }: React.PropsWithChildren<{ annual?: boolean; large?: boolean }>) => {
const posthog = usePostHog(); const posthog = usePostHog();
const formRef = React.useRef<HTMLFormElement>(null);
return ( return (
<form method="POST" action="/api/stripe/checkout"> <form ref={formRef} method="POST" action="/api/stripe/checkout">
<input <input
type="hidden" type="hidden"
name="period" name="period"
@ -26,9 +27,14 @@ export const UpgradeButton = ({
<Button <Button
size={large ? "lg" : "default"} size={large ? "lg" : "default"}
className="w-full" className="w-full"
type="submit"
variant="primary" 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"); posthog?.capture("click upgrade button");
}} }}
> >