Merge pull request #3048 from Vizzuality/disposable/release-webhooks-…

…fwpane Disposable/release webhooks fwpane
wri · Sep 26, 2017 · 649a75a · 649a75a
2 parents 354a899 + 913a564
commit 649a75a
Show file tree

Hide file tree

Showing 22 changed files with 827 additions and 65 deletions.
diff --git a/app/assets/images/home/[email protected] b/app/assets/images/home/[email protected]
diff --git a/app/assets/javascripts/connect/models/Subscription.js b/app/assets/javascripts/connect/models/Subscription.js
@@ -79,8 +79,14 @@ define([
     },
 
     hasValidEmail: function() {
-      var emailRegex = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
-      return emailRegex.test(this.get('resource').content);
+      var valid = false;
+      var content = this.get('resource') && this.get('resource').content || null;
+
+      if (content) {
+        var emailRegex = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+        valid = emailRegex.test(content);
+      }
+      return valid;
     }
   });
 

diff --git a/app/assets/javascripts/connect/templates/subscriptionNewCountry.handlebars b/app/assets/javascripts/connect/templates/subscriptionNewCountry.handlebars
@@ -43,6 +43,20 @@
 <div class="field -default -medium">
   <label for="email">Enter your email address</label>
   <input type="email" name="email" placeholder="Enter your email" value="{{email}}">
+
+  <div class="separator">
+    <span>or</span>
+  </div>
+
+  <label for="url">URL (Webhook) <a href="#" class="source" data-source="webhook_description"><svg><use xlink:href="#shape-info"></use></svg></a></label>
+  <input id="subscriptionUrl" type="text" name="url" placeholder="Enter your url" value="{{url}}">
+  <p class="-hint">
+      <a href="#" class="source" data-static="true" data-source="webhook">Preview of payload</a>
+      <a href="#" class="js-test-webhook test-webhook">
+          <span class="webhook-text">Test webhook</span>
+          <span class="webhook-loader"></span>
+      </a>
+  </p>
 </div>
 
 <div class="field -default -medium">

diff --git a/app/assets/javascripts/connect/templates/subscriptionNewData.handlebars b/app/assets/javascripts/connect/templates/subscriptionNewData.handlebars
@@ -53,6 +53,20 @@
 <div class="field -default -medium">
   <label for="email">Enter your email address</label>
   <input type="email" name="email" placeholder="Enter your email" value="{{email}}">
+
+  <div class="separator">
+    <span>or</span>
+  </div>
+
+  <label for="url">URL (Webhook) <a href="#" class="source" data-source="webhook_description"><svg><use xlink:href="#shape-info"></use></svg></a></label>
+  <input id="subscriptionUrl" type="text" name="url" placeholder="Enter your url" value="{{url}}">
+  <p class="-hint">
+      <a href="#" class="source" data-static="true" data-source="webhook">Preview of payload</a>
+      <a href="#" class="js-test-webhook test-webhook">
+          <span class="webhook-text">Test webhook</span>
+          <span class="webhook-loader"></span>
+      </a>
+  </p>
 </div>
 
 <div class="field -default -medium">

diff --git a/app/assets/javascripts/connect/templates/subscriptionNewDraw.handlebars b/app/assets/javascripts/connect/templates/subscriptionNewDraw.handlebars
@@ -56,6 +56,20 @@
 <div class="field -default -medium">
   <label for="email">Enter your email address</label>
   <input type="email" name="email" placeholder="Enter your email" value="{{email}}">
+
+  <div class="separator">
+    <span>or</span>
+  </div>
+
+  <label for="url">URL (Webhook) <a href="#" class="source" data-source="webhook_description"><svg><use xlink:href="#shape-info"></use></svg></a></label>
+  <input id="subscriptionUrl" type="text" name="url" placeholder="Enter your url" value="{{url}}">
+  <p class="-hint">
+      <a href="#" class="source" data-static="true" data-source="webhook">Preview of payload</a>
+      <a href="#" class="js-test-webhook test-webhook">
+          <span class="webhook-text">Test webhook</span>
+          <span class="webhook-loader"></span>
+      </a>
+  </p>
 </div>
 
 <div class="field -default -medium">

diff --git a/app/assets/javascripts/connect/views/SubscriptionNewView.js b/app/assets/javascripts/connect/views/SubscriptionNewView.js
@@ -18,6 +18,7 @@ define([
   'connect/views/LayerSelectionView',
   'connect/views/DatasetsListView',
   'map/services/GeostoreService',
+  'services/SubscriptionsService',
   'text!connect/templates/subscriptionNew.handlebars',
   'text!connect/templates/subscriptionNewDraw.handlebars',
   'text!connect/templates/subscriptionNewData.handlebars',
@@ -42,6 +43,7 @@ define([
   LayerSelectionView,
   DatasetsListView,
   GeostoreService,
+  subscriptionsService,
   tpl,
   tplDraw,
   tplData,
@@ -92,6 +94,7 @@ define([
       'change #aoi': 'onChangeAOI',
       'submit #new-subscription': 'onSubmitSubscription',
       'change input,textarea,select' : 'onChangeInput',
+      'click .js-test-webhook': 'onClickTestWebhook',
     },
 
     initialize: function(router, user, params) {
@@ -333,6 +336,8 @@ define([
       this.$form = this.$el.find('#new-subscription');
       this.$formType = this.$el.find('#new-subscription-content');
       this.$selects = this.$el.find('select.chosen-select');
+      this.$subscriptionUrl = this.$el.find('#subscriptionUrl');
+      this.$testWebhookButton = this.$el.find('.js-test-webhook');
     },
 
     initSubViews: function() {
@@ -369,6 +374,22 @@ define([
       })
     },
 
+    getResource: function(formData) {
+      var type = 'EMAIL';
+      var content = this.user.get('email');
+
+      if (formData.url && formData.url.length > 0) {
+        type = 'URL';
+        content = formData.url;
+      }
+
+      return {
+        resource: {
+          type: type,
+          content: content
+        }
+      }
+    },
 
     /**
      * CHANGE EVENTS
@@ -497,7 +518,37 @@ define([
         }.bind(this));
     },
 
+    onClickTestWebhook: function (e) {
+      e && e.preventDefault();
+
+      var value = this.$subscriptionUrl.val();
+
+      if (value !== '' && !this.$testWebhookButton.hasClass('-loading')) {
+        _.each(this.subscription.attributes.datasets, function(dataset, i) {
+          setTimeout(function () {
+            subscriptionsService.testWebhook(this.$subscriptionUrl.val(), dataset)
+          }.bind(this), i * 100);
+        }.bind(this));
 
+        var loader = this.$testWebhookButton.find('.webhook-loader');
+        loader.html(this.$testWebhookButton.find('.webhook-text').html());
+        this.$testWebhookButton.addClass('-loading');
+        var intervalTimes = 0;
+        var pointsInterval = setInterval(function() {
+          if (intervalTimes === 3) {
+            loader.html('Test webhook - data sent');
+            setTimeout(function () {
+              this.$testWebhookButton.removeClass('-loading');
+            }.bind(this), 2000);
+
+            clearInterval(pointsInterval);
+          } else {
+            loader.html(loader.html() + '.');
+          }
+          intervalTimes++;
+        }.bind(this), 500);
+      }
+    },
 
 
     /**

diff --git a/app/assets/javascripts/map/presenters/tabs/SubscribePresenter.js b/app/assets/javascripts/map/presenters/tabs/SubscribePresenter.js
@@ -94,49 +94,73 @@ define([
       this.view.updateCurrentStep(this.currentStep);
     },
 
-    // Email
-    checkEmail: function(email) {
-      this.subscription.set('resource', {
-        type: 'EMAIL',
-        content: email
-      });
+    previousStep: function() {
+      this.currentStep -= 1;
+
+      this.view.updateCurrentStep(this.currentStep);
+    },
+
+    // Email or URL (Webhook)
+    checkEmailOrURL: function(params) {
+      var type = 'EMAIL';
+      var content = params.email;
+
+      if (params.url && params.url.length > 0) {
+        type = 'URL';
+        content = params.url;
 
-      if (this.subscription.hasValidEmail()) {
         this.getDatasets();
         this.nextStep();
       } else {
-        this.publishNotification('notification-email-incorrect');
+        if (params.email || this.subscription.hasValidEmail()) {
+          this.getDatasets();
+          this.nextStep();
+        } else {
+          this.publishNotification('notification-email-incorrect');
+        }
       }
+
+      this.subscription.set('resource', {
+        type: type,
+        content: content
+      });
+    },
+
+    goBack: function () {
+      this.previousStep();
     },
 
     getDatasets: function() {
-      var params = this.subscription.attributes.params;
-      params = _.extend({}, params, params.iso);
-      var paramsValues = _.pick(params, 'use', 'useid', 'wdpaid',
-      'geostore', 'country', 'region');
-
-      var values = _.compact(_.values(paramsValues));
-
-      if (values.length) {
-        this.view.renderDatasets({
-          datasets: []
-        });
-
-        CoverageService.get(params)
-          .then(function(layers) {
-            this.view.renderDatasets({
-              datasets: datasetsHelper.getFilteredList(layers, this.subscription.attributes.datasets)
-            });
-          }.bind(this))
-
-          .error(function(error) {
-            console.log(error);
-          }.bind(this));
-      } else {
-        this.view.renderDatasets({
-          datasets: datasetsHelper.getListSelected(this.subscription.attributes.datasets)
-        });
+      if (typeof this.subscription !== 'undefined') {
+        var params = this.subscription.attributes.params;
+        params = _.extend({}, params, params.iso);
+        var paramsValues = _.pick(params, 'use', 'useid', 'wdpaid',
+          'geostore', 'country', 'region');
+
+        var values = _.compact(_.values(paramsValues));
+
+        if (values.length) {
+          this.view.renderDatasets({
+            datasets: []
+          });
+
+          CoverageService.get(params)
+            .then(function(layers) {
+              this.view.renderDatasets({
+                datasets: datasetsHelper.getFilteredList(layers, this.subscription.attributes.datasets)
+              });
+            }.bind(this))
+
+            .error(function(error) {
+              console.log(error);
+            }.bind(this));
+        } else {
+          this.view.renderDatasets({
+            datasets: datasetsHelper.getListSelected(this.subscription.attributes.datasets)
+          });
+        }
       }
+
     },
 
     updateDatasets: function(datasets) {
@@ -160,7 +184,12 @@ define([
 
       // Set email and save it in the user Model
       this.user.setEmailIfEmpty(this.subscription.get('resource').content);
-      this.user.save({ email: this.user.attributes.email }, { patch: true });
+      this.user.setLanguageIfEmpty(this.subscription.get('language'));
+
+      this.user.save({
+        email: this.user.attributes.email,
+        language: this.user.attributes.language
+      }, { patch: true });
 
       this.subscription.save()
           .then(this.onSubscriptionSave.bind(this))

diff --git a/app/assets/javascripts/map/templates/tabs/subscribe.handlebars b/app/assets/javascripts/map/templates/tabs/subscribe.handlebars
@@ -17,21 +17,10 @@
         {{#if loggedIn}}
           <div class="steps current">
             <header>
-              <h2>Subscribe to alerts</h2>
-              <p>
-                {{#if dataset}}
-                  Enter your email below to receive an email notification when
-                  there are new <strong>{{dataset}}</strong> available for this area.
-                {{else}}
-                  Enter your email below to subscribe to this area.
-                {{/if}}
-              </p>
+              <h2>Forest change alerts</h2>
             </header>
-
-            <input class="field" type="email" id="subscriptionEmail" placeholder="Enter your email" value="{{email}}">
-            <div class="m-btncontainer is-center">
-              <button class="btn medium green uppercase" id="showName">Next</button>
-            </div>
+            <p>Select the forest change alerts you would like to receive</p>
+            <div id="subscription-datasets"></div>
           </div>
         {{else}}
           <div class="steps current">
@@ -71,13 +60,46 @@
 
         <div class="steps">
           <header>
-            <h2>Forest change alerts</h2>
+            <h2>Subscribe to alerts</h2>
+            <p>
+              {{#if dataset}}
+                Enter your email below to receive an email notification when
+                there are new <strong>{{dataset}}</strong> available for this area.
+              {{else}}
+                Enter your email below to subscribe to this area.
+              {{/if}}
+            </p>
           </header>
 
-          <p>Select the forest change alerts you would like to receive</p>
-
-          <div id="subscription-datasets"></div>
-
+            <ul class="m-tabs">
+              <div class="tabs">
+                <div class="tab">
+                  <input type="radio" name="tabs" id="tab1" checked />
+                  <label for="tab1" tabindex="0">E-mail</label>
+                  <div id="tab-content1" class="tab-content">
+                    <input class="field" type="email" id="subscriptionEmail" placeholder="Enter your email" value="{{email}}">
+                  </div>
+                </div>
+                <div class="tab">
+                  <input type="radio" name="tabs" id="tab2" />
+                  <label for="tab2">URL (Webhook) <a href="#" class="source" data-source="webhook_description"><svg><use xlink:href="#shape-info"></use></svg></a></label>
+                  <div id="tab-content2" class="tab-content">
+                    <input class="field" type="text" id="subscriptionUrl" placeholder="Enter your url" value="{{url}}">
+                    <p>
+                      <a href="#" class="source" data-static="true" data-source="webhook">Preview of payload</a>
+                      <a href="#" class="js-test-webhook test-webhook">
+                        <span class="webhook-text">Test webhook</span>
+                        <span class="webhook-loader"></span>
+                      </a>
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </ul>
+            <div class="m-btncontainer is-space-between">
+              <button class="btn medium green uppercase js-subscribe-back">Back</button>
+              <button class="btn medium green uppercase" id="showName">Next</button>
+            </div>
         </div>
 
         <div class="steps">
@@ -101,7 +123,8 @@
             </div>
           </div>
 
-          <div class="m-btncontainer is-center">
+          <div class="m-btncontainer is-space-between">
+            <button class="btn medium green uppercase js-subscribe-back">Back</button>
             <button class="btn medium green uppercase" id="subscribe">Save</button>
           </div>
         </div>

diff --git a/app/assets/javascripts/map/templates/tabs/subscribeDatasets.handlebars b/app/assets/javascripts/map/templates/tabs/subscribeDatasets.handlebars
@@ -16,7 +16,7 @@
       </div>
     </div>
 
-    <div class="m-btncontainer is-center">
+    <div class="m-btncontainer is-flex-end">
       <button class="btn medium green uppercase" id="datasets">Next</button>
     </div>
   {{else}}