Pratishta/subscribe

client/app/components/initialize-foundation.js

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

client/app/components/subscription-form.js

@@ -0,0 +1,34 @@
+import Component from '@glimmer/component';
+import { action, set } from '@ember/object';
+import { lookupCommunityDistrict } from '../helpers/lookup-community-district';
+import { tracked } from '@glimmer/tracking';
+
+export default class SubscriptionFormComponent extends Component {
+
+    communityDistrictsByBorough = {};
+    isCommunityDistrict = false;
+    constructor(...args) {
+        super(...args);
+
+        const districts = lookupCommunityDistrict();
+        for (const district of districts) {
+            const {code, num, boro} = district;
+            if(boro in this.communityDistrictsByBorough === false) {
+                this.communityDistrictsByBorough[boro] = []
+            }
+            this.communityDistrictsByBorough[boro].push({code, num, boro})
+        }
+    }
+
+    @action
+    checkWholeBorough(event) {
+        for(const district of this.communityDistrictsByBorough[event.target.value]) {
+            set(this.args.subscriptions, district.code, event.target.checked)
+        }
+    }
+
+    @action
+    closeAllAccordions(event) {
+        $('.accordion').foundation('up', $('.accordion .accordion-content'));
+    }
+}

client/app/router.js

@@ -27,6 +27,7 @@ const Router = EmberRouter.extend(RouterScroll, {
 Router.map(function() { // eslint-disable-line
   this.route('show-project', { path: '/projects/:id' });
   this.route('show-geography', { path: '/projects' });
+  if (config.showAlerts) { this.route('subscribe'); }
   this.route('disclaimer');
   if (config.showAlerts) { this.route('statuses'); }
   this.route('not-found', { path: '/*path' });

client/app/routes/subscribe.js

@@ -0,0 +1,17 @@
+import Route from "@ember/routing/route"
+import { action } from "@ember/object"
+import { lookupCommunityDistrict } from '../helpers/lookup-community-district';
+
+
+export default class SubscribeRoute extends Route {
+
+  model() {
+    let subscriptions = {CW: false}
+    const districts = lookupCommunityDistrict();
+    for (const district of districts) {
+      subscriptions[district.code] = false
+    }
+
+    return {subscriptions, email: ""}
+  }
+}

client/app/styles/app.scss

@@ -41,6 +41,7 @@ $fieldset-border: $callout-border;
 @include foundation-top-bar;
 @include foundation-visibility-classes;
 @include foundation-float-classes;
+@include foundation-accordion;
 
 
 //
@@ -67,6 +68,7 @@ $completed-color: #a6cee3;
 @import 'modules/_m-search';
 @import 'modules/_m-site-header';
 @import 'modules/_m-statuses';
+@import 'modules/_m-subscription-form';
 @import 'modules/_m-tabs';
 @import 'modules/_m-project-summary-cards';
 @import 'modules/_m-tooltipster';

client/app/styles/modules/_m-subscription-form.scss

@@ -0,0 +1,168 @@
+// --------------------------------------------------
+// Module: Subscription Form 
+// --------------------------------------------------
+
+div.disabled {
+    pointer-events: none;
+    opacity: 0.4;
+}
+
+.accordion-item {
+    background-color: $white-smoke;
+    border-radius: 12px;
+}
+
+.accordion-title {
+    border: none;
+    font-size: medium;
+    color: $dark-gray;
+}
+
+.accordion-title:hover, .accordion-title:focus {
+    background-color: transparent;
+}
+
+ul li.accordion-title:last-child {
+    border-bottom: 5px;
+}
+
+.accordion-content {
+    border: none;
+    background-color: $white;
+}
+
+input[type=checkbox] {
+    accent-color: $dcp-orange;
+    width: 20px;
+    height: 20px;
+}
+
+.subscribe-input-group {
+    display: flex;
+    white-space: nowrap;
+    overflow: hidden;
+
+    label {
+        padding-right: 12px;
+        align-content: center;
+    }
+
+    Input {
+        border-radius: 12px;
+    }
+}
+
+.subscribe-container {
+    background-color: $white;
+    padding-top: 3rem;
+
+    @include breakpoint(medium) {
+        padding-top: 4rem;
+    }
+}
+
+.subscribe-section {
+    padding-bottom: 3.25rem;
+
+    @include breakpoint(medium) {
+        padding-bottom: 4rem;
+    }
+}
+
+.subscribe-footer {
+    h5 {
+        font-size: 1.25rem;
+        margin: 0 0 .75rem 0;
+    }
+
+    p {
+        margin-bottom: .75rem;
+    }
+}
+
+.district-selection {
+    ul {
+        display: flex;
+        flex-direction: column;
+        gap: 24px;
+
+        &:not(:last-of-type) {
+            margin-bottom: 2.25rem;
+            @include breakpoint(medium) {
+                margin-bottom: 1.5rem;
+              }
+        }
+    }
+
+    li.accordion-item {
+        border-radius: 0;
+        background-color: transparent;
+
+        > a.accordion-title {
+            border-radius: 12px;
+            background-color: #f1f2f4;
+        }
+
+        > div.accordion-content {
+            background-color: $white;
+            padding: 1.5rem 0 0 0;
+
+
+            > div {
+                display: flex;
+                flex-wrap: wrap;
+                > div {
+                    display: inline-flex;
+                    align-items: center;
+                    width: 100%;
+                    @include breakpoint(medium) {
+                        width: 20%;
+                    }
+                }
+            }
+        }
+    }
+
+    input {
+        margin: 0;
+    }
+
+    li:last-child:not(.is-active)>.accordion-title {
+        border-bottom: none;
+    }
+
+    li:last-child>.accordion-content:last-child {
+        border-bottom: none;
+    }
+}
+
+.button.primary {
+    border-radius: 12px;
+    padding-top: 20px;
+    padding-bottom: 20px;
+    padding-right: 40px;
+    padding-left: 40px;
+}
+
+.update-type-section {
+    display: flex;
+    flex-direction: column;
+    ul {
+        margin-bottom: 0px;
+        margin-left: 0px;
+        list-style-type: none;
+    }
+    .update-type-question {
+        padding-left: 0px
+    }
+}
+
+.update-type-item {
+    display: flex;
+    flex-direction: row;
+    margin-top: 1.5rem
+}
+
+.update-type-label {
+    padding-left: 10px;
+}

client/app/templates/application.hbs

@@ -30,6 +30,9 @@
   {{#banner.nav}}
     <ul class="menu vertical large-horizontal">
       <li>{{link-to 'Find Projects' 'show-geography'}}</li>
+      {{#if (eq this.ENV.showAlerts true)}}
+        <li>{{link-to 'Email Notifications' 'subscribe'}}</li>
+      {{/if}}
       {{#if this.ENV.LUPP_ENABLED}}
         {{sign-in}}
       {{/if}}

client/app/templates/components/initialize-foundation.hbs

@@ -0,0 +1 @@
+{{yield}}

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

@@ -0,0 +1,71 @@
+<form>
+
+        {{yield}}
+    <div class="subscribe-section">
+        <div class="update-type-section">
+        <div class="update-type-question">Which would you like to receive updates for?</div>
+
+        <ul>
+            <li>
+                <div class="update-type-item">
+                    <Input @id="city-wide-checkbox" @type="checkbox" @checked={{isCityWide}}/>
+                    <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
+                            associated with any CD.</span>
+                    </div>
+                </div>
+            </li>
+            <li>
+                <div class="update-type-item">
+                    <Input @id="community-district-checkbox" @type="checkbox" @checked={{isCommunityDistrict}}
+                        {{on "change" this.closeAllAccordions}}/>
+                    <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>
+                    </div>
+                </div>
+            </li>
+        </ul>
+        </div>
+    </div>
+
+   <div class="subscribe-section">
+    <div class="district-selection">
+    <div class={{if this.isCommunityDistrict "" "disabled" }}>
+        <h5>If you chose CD Updates, please select which community districts you would like to receive updates
+            for:</h5>
+        <p>You can find the Community District to any New York City address <a
+                href="https://zola.planning.nyc.gov/">here</a>.</p>
+        {{#initialize_foundation}}
+         {{#each-in this.communityDistrictsByBorough as |borough districts|}}
+            <ul class="accordion" id="foo" data-accordion data-multi-expand="true" data-allow-all-closed="true">
+                <li class="accordion-item accordionmenu-item-background" data-accordion-item>
+                    <a href="#" class="accordion-title">{{borough}}</a>
+                    <div class="accordion-content" data-tab-content>
+                        <div>
+                        <div>
+                        <Input id="all-brooklyn" type="checkbox" @value={{borough}} {{on "change" this.checkWholeBorough}} /><label
+                            for="all-brooklyn">Select all</label>
+                        </div>
+                        {{#each districts as |district| }}
+                        <div>
+                            <Input id={{district.code}} @type="checkbox" @checked={{ get this.args.subscriptions district.code }} />
+                            <label
+                            for={{district.code}}>District {{district.num}}</label>
+                        </div>
+                        {{/each}}
+                        </div>
+                    </div>
+                </li>
+            </ul>
+            {{/each-in}}
+         {{/initialize_foundation}}
+    </div>
+    </div>
+    </div>
+
+    <div class="subscribe-section">
+    <a class="button primary no-margin disabled" type="submit" href="">Subscribe</a>
+    </div>
+</form>

client/app/templates/subscribe.hbs

@@ -0,0 +1,34 @@
+<div class="cell subscribe-container">
+    <div class="grid-container">
+        <div class="grid-x grid-padding-x grid-padding-y align-middle" style="justify-content: center;">
+            <div class="cell large-8 subscribe-container">
+                <div class="subscribe-section">
+                    <h1 class="header-xxl dcp-orange">Subscribe to ZAP Updates</h1>
+                    <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}}>
+                        <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}}/>
+                            </div>
+                        </div>
+                    </SubscriptionForm>
+                <div class="subscribe-footer">
+                    <h5>Cancel Your Subscription</h5>
+                    <p class="text-small">You can unsubscribe to ZAP emails at the end of any email updates you receive.</p>
+
+                    <h5>Definition of ZAP Updates</h5>
+                    <p class="text-small">Refer to <a href="/statuses">this page</a> for more information about what type of updates you will
+                        be receiving.</p>
+
+                    <h5>Privacy Policy</h5>
+                    <p class="text-small">For more information, refer to NYC.gov Privacy Policy and Terms of Use.</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+{{outlet}}

client/ember-cli-build.js

@@ -50,6 +50,7 @@ module.exports = function(defaults) {
   // Use `app.import` to add additional libraries to the generated
   // output files.
   //
+  app.import('node_modules/foundation-sites/dist/js/foundation.min.js', { type: 'vendor' })
   // If you need to use different assets in different
   // environments, specify an object as the first parameter. That
   // object's keys should be the environment name and the values

client/package.json

@@ -31,6 +31,7 @@
     "@fortawesome/free-brands-svg-icons": "^5.2.0",
     "@fortawesome/free-regular-svg-icons": "^5.1.0",
     "@fortawesome/free-solid-svg-icons": "^5.1.0",
+    "@glimmer/component": "^1.0.0",
     "babel-eslint": "^8.0.0",
     "broccoli-asset-rev": "^3.0.0",
     "broccoli-clean-css": "~2.0.1",