1552 Connect new subscriber form to endpoint

client/app/components/initialize-foundation.js

@@ -2,7 +2,7 @@ import $ from 'jquery';
 import Component from '@ember/component';
 
 export default Component.extend({
-  didRender: function() {
+  didRender() {
     $(this.element).foundation();
   },
 });

client/app/components/subscription-form.js

@@ -1,21 +1,61 @@
 import $ from 'jquery';
 import Component from '@glimmer/component';
-import { action, set } from '@ember/object';
+import { action, computed, set } from '@ember/object';
+import fetch from 'fetch';
+import ENV from 'labs-zap-search/config/environment';
 import { getCommunityDistrictsByBorough } from '../helpers/lookup-community-district';
 
 export default class SubscriptionFormComponent extends Component {
     communityDistrictsByBorough = {};
 
     isCommunityDistrict = false;
 
+    isSubmitting = false;
+
     constructor(...args) {
       super(...args);
 
       this.communityDistrictsByBorough = getCommunityDistrictsByBorough();
     }
 
+    @computed('args.email')
+    get isEmailValid() {
+      // eslint-disable-next-line no-useless-escape
+      const tester = /^[-!#$%&'*+\/0-9=?A-Z^_a-z{|}~](\.?[-!#$%&'*+\/0-9=?A-Z^_a-z`{|}~])*@[a-zA-Z0-9](-*\.?[a-zA-Z0-9])*\.[a-zA-Z](-?[a-zA-Z0-9])+$/;
+      if (!this.args.email) return false;
+
+      if (this.args.email.length > 254) return false;
+
+      const valid = tester.test(this.args.email);
+      if (!valid) return false;
+
+      // Further checking of some things regex can't handle
+      const parts = this.args.email.split('@');
+      if (parts[0].length > 64) return false;
+
+      const domainParts = parts[1].split('.');
+      if (domainParts.some(function(part) { return part.length > 63; })) return false;
+
+      return true;
+    }
+
+    @computed('args.subscriptions')
+    get isAtLeastOneCommunityDistrictSelected() {
+      return !!Object.entries(this.args.subscriptions).find(([key, value]) => ((key !== 'CW') && value));
+    }
+
+    // eslint-disable-next-line ember/use-brace-expansion
+    @computed('isCommunityDistrict', 'args.subscriptions', 'args.email')
+    get canBeSubmitted() {
+      if ((this.isCommunityDistrict && !this.isAtLeastOneCommunityDistrictSelected)) return false;
+      return this.isEmailValid
+            && (this.args.subscriptions.CW
+            || (this.isCommunityDistrict && this.isAtLeastOneCommunityDistrictSelected));
+    }
+
     @action
     checkWholeBorough(event) {
+      // eslint-disable-next-line no-restricted-syntax
       for (const district of this.communityDistrictsByBorough[event.target.value]) {
         set(this.args.subscriptions, district.code, event.target.checked);
       }
@@ -25,4 +65,41 @@ export default class SubscriptionFormComponent extends Component {
     closeAllAccordions() {
       $('.accordion').foundation('up', $('.accordion .accordion-content'));
     }
+
+    @action
+    toggleCitywide(event) {
+      set(this.args.subscriptions, 'CW', event.target.checked);
+    }
+
+    @action
+    async subscribe() {
+      if (!this.canBeSubmitted) { return; }
+
+      set(this, 'isSubmitting', true);
+
+      const requestBody = { email: this.args.email, subscriptions: {} };
+      if (this.isCommunityDistrict) {
+        // eslint-disable-next-line no-restricted-syntax
+        for (const [key, value] of Object.entries(this.args.subscriptions)) {
+          if (value) {
+            requestBody.subscriptions[key] = 1;
+          }
+        }
+      } else if (this.args.subscriptions.CW) {
+        requestBody.subscriptions.CW = 1;
+      }
+
+      const response = await fetch(`${ENV.host}/subscribers`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(requestBody),
+      });
+
+      await response.json();
+      if (!response.ok) throw await response.json();
+
+      window.location.pathname = '/subscribed';
+    }
 }

client/app/helpers/lookup-community-district.js

@@ -70,6 +70,7 @@ export function lookupCommunityDistrict() {
 
 export function getCommunityDistrictsByBorough() {
   const communityDistrictsByBorough = {};
+  // eslint-disable-next-line no-restricted-syntax
   for (const district of communityDistrictLookup) {
     const { code, num, boro } = district;
     if (boro in communityDistrictsByBorough === false) {

client/app/routes/subscribe.js

@@ -5,6 +5,7 @@ export default class SubscribeRoute extends Route {
   model() {
     const subscriptions = { CW: false };
     const districts = lookupCommunityDistrict();
+    // eslint-disable-next-line no-restricted-syntax
     for (const district of districts) {
       subscriptions[district.code] = false;
     }

client/app/templates/components/subscription-form.hbs

@@ -7,7 +7,7 @@
         <ul>
             <li>
                 <div class="update-type-item">
-                    <Input @id="city-wide-checkbox" @type="checkbox" @checked={{isCityWide}}/>
+                    <Input @id="city-wide-checkbox" @type="checkbox" @checked={{isCityWide}} {{on "change" this.toggleCitywide}}/>
                     <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
@@ -65,6 +65,9 @@
     </div>
 
     <div class="subscribe-section">
-    <a class="button primary no-margin disabled" type="submit" href="">Subscribe</a>
+        {{#if isSubmitting}}
+            {{fa-icon icon='spinner' spin="true" size="5x" class="map-loading-spinner"}}
+        {{/if}}
+        <a class="button primary no-margin {{if this.canBeSubmitted "" "disabled"}}" type="submit" {{action "subscribe"}}>Subscribe</a>
     </div>
 </form>

client/app/templates/subscribe.hbs

@@ -7,7 +7,7 @@
                     <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}}>
+                    <SubscriptionForm @subscriptions={{this.model.subscriptions}} @email={{this.model.email}}>
                         <div class="subscribe-section">
                             <div class="subscribe-input-group">
                             <label class="email-label">Email Address</label>