Skip to content

Prevent duplicate submissions in the NewsletterSignUpForm component #3062

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
relyks wants to merge 4 commits into
base: master
Choose a base branch
from
+23 −4
Open

Prevent duplicate submissions in the NewsletterSignUpForm component #3062

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7bcd794
fix(newsletter sign up form): Prevent duplicate submissions in the fr…
relyks Jan 29, 2026
7cfbf33
fix(newsletter sign up form): Prevent duplicate submissions in the fr…
relyks Feb 2, 2026
eafcb3a
chore(newsletter sign up form): Refactor to use derived state from th…
relyks Feb 2, 2026
2297662
chore(newsletter sign up form): Refactor to conditionally render the …
relyks Feb 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 23 additions & 4 deletions static/js/NewsletterSignUpForm.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,15 +15,26 @@ export function NewsletterSignUpForm({
const [educatorCheck, setEducatorCheck] = useState(false);
const [subscribeMessage, setSubscribeMessage] = useState(null);
const [showNameInputs, setShowNameInputs] = useState(false);
const [isSubscribed, setIsSubscribed] = useState(false);
const [isSubmitting, setIsSubmitting] = useState(false);

const isFormDisabled = isSubscribed || isSubmitting;

function handleSubscribe() {
if (isFormDisabled) {
return;
}
if (showNameInputs === true) { // submit
if (firstName.length > 0 && lastName.length > 0) {
setSubscribeMessage("Subscribing...");
setIsSubmitting(true);
subscribe(firstName, lastName, email, educatorCheck, additionalNewsletterMailingLists).then(res => {
Copy link
Contributor

@yitzhakc yitzhakc Feb 1, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since this is the call to the API, do you perhaps want to disable the button prior to the call, as soon as the user has Clicked, and keep it disabled until the request returns - either as a 200 success, or a failure? This way, the button will be clickable until the request returns..

Copy link
Contributor Author

@relyks relyks Feb 2, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yep, that would be better to handle that scenario too. I'll implement it. I forgot to consider that. Thanks

setIsSubscribed(true);
setIsSubmitting(false);
setSubscribeMessage("Subscribed! Welcome to our list.");
Sefaria.track.event("Newsletter", "Subscribe from " + contextName, "");
}).catch(error => {
setIsSubmitting(false);
setSubscribeMessage(error?.message || "Sorry, there was an error.");
setShowNameInputs(false);
});
Expand All @@ -47,6 +58,7 @@ export function NewsletterSignUpForm({
aria-label={Sefaria._("Email address")}
type="email"
value={email}
disabled={isFormDisabled}
onChange={e => setEmail(e.target.value)}
onKeyUp={(e) => Util.handleEnterKey(e, handleSubscribe)}/>
</span>
Expand All @@ -57,10 +69,11 @@ export function NewsletterSignUpForm({
aria-label="כתובת אימייל"
type="email"
value={email}
disabled={isFormDisabled}
onChange={e => setEmail(e.target.value)}
onKeyUp={(e) => Util.handleEnterKey(e, handleSubscribe)}/>
</span>
{!showNameInputs ? <img src="/static/img/circled-arrow-right.svg" alt={Sefaria._("Submit")} onClick={handleSubscribe}/> : null}
{!showNameInputs && !isFormDisabled ? <img src="/static/img/circled-arrow-right.svg" alt={Sefaria._("Submit")} onClick={handleSubscribe}/> : null}
{showNameInputs ?
<><span className="int-en">
<input
Expand All @@ -70,6 +83,7 @@ export function NewsletterSignUpForm({
type="text"
value={firstName}
autoFocus
disabled={isFormDisabled}
onChange={e => setFirstName(e.target.value)}
onKeyUp={(e) => Util.handleEnterKey(e, handleSubscribe)}/>
</span>
Expand All @@ -80,6 +94,7 @@ export function NewsletterSignUpForm({
aria-label="שם פרטי"
type="text"
value={firstName}
disabled={isFormDisabled}
onChange={e => setFirstName(e.target.value)}
onKeyUp={(e) => Util.handleEnterKey(e, handleSubscribe)}/>
</span>
Expand All @@ -90,6 +105,7 @@ export function NewsletterSignUpForm({
aria-label={Sefaria._("Last Name")}
type="text"
value={lastName}
disabled={isFormDisabled}
onChange={e => setLastName(e.target.value)}
onKeyUp={(e) => Util.handleEnterKey(e, handleSubscribe)}/>
</span>
Expand All @@ -100,12 +116,13 @@ export function NewsletterSignUpForm({
aria-label="שם משפחה"
type="text"
value={lastName}
disabled={isFormDisabled}
onChange={e => setLastName(e.target.value)}
onKeyUp={(e) => Util.handleEnterKey(e, handleSubscribe)}/>
</span>
{includeEducatorOption ?
<EducatorCheckbox educatorCheck={educatorCheck} setEducatorCheck={setEducatorCheck}/> : null}
<img src="/static/img/circled-arrow-right.svg" alt={Sefaria._("Submit")} onClick={handleSubscribe}/>
<EducatorCheckbox educatorCheck={educatorCheck} setEducatorCheck={setEducatorCheck} disabled={isFormDisabled}/> : null}
{!isFormDisabled && <img src="/static/img/circled-arrow-right.svg" alt={Sefaria._("Submit")} onClick={handleSubscribe}/>}
</>
: null}
{subscribeMessage ?
Expand All @@ -116,7 +133,7 @@ export function NewsletterSignUpForm({
}


const EducatorCheckbox = ({educatorCheck, setEducatorCheck}) => {
const EducatorCheckbox = ({educatorCheck, setEducatorCheck, disabled}) => {
return (
<div className="newsletterEducatorOption">
<span className="int-en">
Expand All @@ -125,6 +142,7 @@ const EducatorCheckbox = ({educatorCheck, setEducatorCheck}) => {
className="educatorNewsletterInput"
id="educator-check-en"
checked={educatorCheck}
disabled={disabled}
onChange={e => setEducatorCheck(!!e.target.checked)}/>
<label htmlFor="educator-check-en"> I am an educator</label>
</span>
Expand All @@ -134,6 +152,7 @@ const EducatorCheckbox = ({educatorCheck, setEducatorCheck}) => {
className="educatorNewsletterInput"
id="educator-check-he"
checked={educatorCheck}
disabled={disabled}
onChange={e => setEducatorCheck(!!e.target.checked)}/>
<label htmlFor="educator-check-he"> מורים/ אנשי הוראה</label>
</span>
Expand Down
Loading