Disable all input when subscribing

Co-authored-by: David Hochbaum <[email protected]>
NYCPlanning · Dec 18, 2024 · 1eed8ce · 1eed8ce
1 parent 1fd9c01
commit 1eed8ce
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 10 deletions.
diff --git a/client/app/components/subscription-form.js b/client/app/components/subscription-form.js
@@ -11,8 +11,6 @@ export default class SubscriptionFormComponent extends Component {
 
     isCommunityDistrict = false;
 
-    isSubmitting = false;
-
     showSubscriptionUpdateConfirmationModal = false;
 
     updateStatus = 'none';
@@ -93,7 +91,7 @@ export default class SubscriptionFormComponent extends Component {
     async subscribe() {
       if (!this.canBeSubmitted) { return; }
 
-      set(this, 'isSubmitting', true);
+      this.args.setIsSubmitting(true)
 
       const requestBody = { email: this.args.email, subscriptions: {} };
       if (this.isCommunityDistrict) {
@@ -143,7 +141,7 @@ export default class SubscriptionFormComponent extends Component {
 
       if (!this.args.isUpdate) window.location.pathname = '/subscribed';
 
-      set(this, 'isSubmitting', false);
+      this.args.setIsSubmitting(false)
 
       if (this.args.isUpdate) {
         set(this, 'showSubscriptionUpdateConfirmationModal', true);

diff --git a/client/app/controllers/subscribe.js b/client/app/controllers/subscribe.js
@@ -5,6 +5,8 @@ import ENV from 'labs-zap-search/config/environment';
 import { validateEmail } from '../helpers/validate-email';
 
 export default class SubscribeController extends Controller {
+  isSubmitting = false;
+
   lastEmailChecked = '';
 
   emailAlreadyExists = false;
@@ -20,6 +22,11 @@ export default class SubscribeController extends Controller {
     return (this.emailAlreadyExists || this.emailNeedsConfirmation);
   }
 
+  @action
+  setIsSubmitting(isSubmittingValue) {
+    this.set('isSubmitting', isSubmittingValue);
+  }
+
   @action
   async checkExistingEmail(event) {
     const email = event.target.value;

diff --git a/client/app/templates/components/subscription-form.hbs b/client/app/templates/components/subscription-form.hbs
@@ -9,7 +9,7 @@
         <ul>
             <li>
                 <div class="update-type-item">               
-                    <Input @id="city-wide-checkbox" @type="checkbox" @checked={{isCityWide}} {{on "change" this.toggleCitywide}}/>
+                    <Input @id="city-wide-checkbox" @type="checkbox" @checked={{isCityWide}} {{on "change" this.toggleCitywide}} @disabled={{this.args.isSubmitting}}/>
                     <div class="update-type-label">
                         <label for="city-wide-checkbox">Citywide Updates</label>
                         <span class="text-small">You'll receive an email for all citywide projects, which are projects that aren’t
@@ -20,7 +20,7 @@
             <li>
                 <div class="update-type-item">
                     <Input @id="community-district-checkbox" @type="checkbox" @checked={{isCommunityDistrict}}
-                        {{on "change" this.closeAllAccordions}}/>
+                        {{on "change" this.closeAllAccordions}} @disabled={{this.args.isSubmitting}}/>
                     <div class="update-type-label">
                         <label for="community-district-checkbox">Community District (CD) Updates</label>
                         <span class="text-small">You'll receive an email for projects from all CDs you have selected.</span>
@@ -46,12 +46,12 @@
                     <div class="accordion-content" data-tab-content>
                         <div>
                         <div>
-                        <Input id="all-{{borough}}" type="checkbox" @value={{borough}} {{on "change" this.checkWholeBorough}} /><label
+                        <Input id="all-{{borough}}" type="checkbox" @value={{borough}} {{on "change" this.checkWholeBorough}} @disabled={{this.args.isSubmitting}}/><label
                             for="all-{{borough}}">Select all</label>
                         </div>
                         {{#each districts as |district| }}
                         <div>
-                            <Input id={{district.code}} @type="checkbox" @checked={{ get this.args.subscriptions district.code }} />
+                            <Input id={{district.code}} @type="checkbox" @checked={{ get this.args.subscriptions district.code }} @disabled={{this.args.isSubmitting}}/>
                             <label
                             for={{district.code}}>District {{district.num}}</label>
                         </div>

diff --git a/client/app/templates/subscribe.hbs b/client/app/templates/subscribe.hbs
@@ -7,11 +7,11 @@
                     <span class="text-small">Get updated on milestones for all projects in any community district (CD) by signing up to receive
                         emails on Zoning Application Portal.</span>
                 </div>
-                    <SubscriptionForm @subscriptions={{this.model.subscriptions}} @email={{this.model.email}} @isUpdate={{false}} @invalidEmailForSignup={{this.invalidEmailForSignup}}>
+                    <SubscriptionForm @subscriptions={{this.model.subscriptions}} @isSubmitting={{this.isSubmitting}} @setIsSubmitting={{this.setIsSubmitting}} @email={{this.model.email}} @isUpdate={{false}} @invalidEmailForSignup={{this.invalidEmailForSignup}}>
                         <div class="subscribe-section">
                             <div class="subscribe-input-group">
                             <label class="email-label">Email Address</label>
-                            <Input class="input-group-field" type="text" @value={{this.model.email}} onkeyup={{action 'continuouslyCheckEmail'}} onchange={{action 'checkExistingEmail'}} />
+                            <Input class="input-group-field" type="text" @value={{this.model.email}} onkeyup={{action 'continuouslyCheckEmail'}} onchange={{action 'checkExistingEmail'}} @disabled={{ this.isSubmitting }}/>
                             </div>
                             {{#if this.emailAlreadyExists}}
                                 <p class="email-exists">This email already is subscribed to ZAP Updates. <a onclick={{action 'sendEmail'}}>Click here to receive an email to modify subscriptions.</a></p>