1572 Subscription Confirmation Page (#1576)

* Added subscription confirmation page

* Fixed linting errors.

* Moved inline styles to scss

client/app/router.js

@@ -29,6 +29,7 @@ Router.map(function() { // eslint-disable-line
   this.route('show-geography', { path: '/projects' });
   this.route('disclaimer');
   if (config.showAlerts) { this.route('statuses'); }
+  this.route('subscription-confirmation', { path: '/subscribers/:id/confirm' });
   this.route('not-found', { path: '/*path' });
   this.route('oops');
   this.route('my-projects', function() {

client/app/routes/subscription-confirmation.js

@@ -0,0 +1,54 @@
+import Route from '@ember/routing/route';
+import fetch from 'fetch';
+import ENV from 'labs-zap-search/config/environment';
+
+export default Route.extend({
+  convertSubscriptionsToHandlebars(subscriptions) {
+    const handlebars = { citywide: false, boroughs: [] };
+    const boros = {
+      K: 'Brooklyn',
+      X: 'Bronx',
+      M: 'Manhattan',
+      Q: 'Queens',
+      R: 'Staten Island',
+    };
+    // eslint-disable-next-line no-restricted-syntax
+    for (const [key, value] of Object.entries(subscriptions)) {
+      if (value === 1) {
+        if (key === 'CW') {
+          handlebars.citywide = true;
+        } else if (boros[key[0]]) {
+          const i = handlebars.boroughs.findIndex(boro => boro.name === boros[key[0]]);
+          if (i === -1) {
+            handlebars.boroughs.push({
+              name: boros[key[0]],
+              communityBoards: [parseInt(key.slice(-2), 10)],
+            });
+          } else {
+            handlebars.boroughs[i].communityBoards.push(parseInt(key.slice(-2), 10));
+          }
+        }
+      }
+    }
+    return handlebars;
+  },
+
+  async model({ id }) {
+    // No need to await for this to finish before making the next request
+    fetch(`${ENV.host}/subscribers/${id}`, {
+      method: 'PATCH',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ subscriptions: { confirmed: 1 } }),
+    });
+
+    // Go directly into getting the subscriptions
+    const response = await fetch(`${ENV.host}/subscribers/${id}`);
+
+    const body = await response.json();
+    if (!response.ok) throw await response.json();
+
+    return this.convertSubscriptionsToHandlebars(body);
+  },
+});

client/app/styles/app.scss

@@ -67,6 +67,7 @@ $completed-color: #a6cee3;
 @import 'modules/_m-search';
 @import 'modules/_m-site-header';
 @import 'modules/_m-statuses';
+@import 'modules/_m-subscribers-confirm';
 @import 'modules/_m-tabs';
 @import 'modules/_m-project-summary-cards';
 @import 'modules/_m-tooltipster';

client/app/styles/modules/_m-subscribers-confirm.scss

@@ -0,0 +1,30 @@
+// --------------------------------------------------
+// Module: Subscribers Confirmation Page
+// --------------------------------------------------
+
+.padding-top-4 {
+  padding-top: 4rem !important;
+}
+.subscribers-confirm {
+  p {
+    font-weight: 500;
+    &.lg {
+      font-size: 27px;
+    }
+    &.md {
+      font-size: 21px;
+    }
+  }
+  li {
+    font-weight: 500;
+    font-size: 16px;
+  }
+  button {
+    text-decoration: none;
+    color:#F1F2F4;
+    font-size: 1.25rem;
+    background:#AE551D;
+    border-radius: 1rem;
+    padding: 20px;
+  }
+}

client/app/templates/subscription-confirmation.hbs

@@ -0,0 +1,29 @@
+<div class="cell">
+  <div class="grid-container">
+    <div class="grid-x grid-padding-x grid-padding-y align-middle align-center subscribers-confirm">
+      <div class="cell large-8 padding-top-4">
+        <h1 class="header-xxl dcp-orange">Thank You For Subscribing To ZAP Updates.</h1>
+        <p class="lg">You are currently subscribed to:</p>
+        {{#if this.model.citywide}}
+          <p class="md">Citywide</p>
+        {{/if}}
+        {{#each this.model.boroughs as |boro|}}
+          <p class="md">{{boro.name}}:</p>
+          <ul>
+            {{#each boro.communityBoards as |district|}}
+              <li>Community District {{district}}</li>
+            {{/each}}
+          </ul>
+        {{/each}}
+        <p>To modify subscriptions, <LinkTo @route="show-geography">click here NEEDS TO BE CHANGED TO /subscribers/:id/subscriptions</LinkTo>.</p>
+        <LinkTo @route="show-geography">
+          <button>
+            Go to Home
+          </button>
+        </LinkTo>
+      </div>
+    </div>
+  </div>
+</div>
+
+{{outlet}}

client/ember-cli-build.js

@@ -31,10 +31,10 @@ module.exports = function(defaults) {
       compile: {
         extension: 'scss',
         enabled: true,
-        parser: require('postcss-scss'),
+        parser: require('postcss-scss'), // eslint-disable-line
         plugins: [
           {
-            module: require('@csstools/postcss-sass'),
+            module: require('@csstools/postcss-sass'), // eslint-disable-line
             options: {
               includePaths: [
                 'node_modules/foundation-sites/scss',