Merge pull request #6 from wri/feature/WRI-1314/gated-file-download

modules/wri_engagement/js/modal-cookie.js

@@ -19,4 +19,46 @@
     // Close the modal.
     $(this).parents('.spb-popup-main-wrapper').find('.spb_close').click();
   });
+
+  // Show or skip the registration form.
+  var skipRegistration = Cookies.get('skip_registration');
+  if (skipRegistration) {
+    // Hide the registration form, display the files.
+    $('.files-modal-unregistered').hide();
+  }
+  else {
+    // Hide the files list.
+    $('.files-modal-registered').hide();
+    // Email validation.
+    function validateEmail(email) {
+      let re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+      return re.test(email);
+    }
+    // Registration submit handler.
+    $('form#pardot-subscription').on('submit', function (e) {
+      e.preventDefault();
+      if (validateEmail(document.getElementById('email').value)) {
+        $.post('https://connect.wri.org/l/120942/2021-04-06/528nh6\n', $(this).serialize(), function (data) {
+          $('.files-modal-unregistered').hide();
+          $('.files-modal-registered').show();
+          Cookies.set('skip_registration', true);
+        }).fail(function() {
+          // This is executed when the call to mail.php failed.
+          console.log('registration failed');
+          $('.files-modal-unregistered').hide();
+          $('.files-modal-registered').show();
+          Cookies.set('skip_registration', true);
+        });
+      }
+      else {
+        $('#email').css({"border":"2px solid red"});
+      }
+    });
+    // Skip registration.
+    $('#skip-registration').on('click', function() {
+      $('.files-modal-unregistered').hide();
+      $('.files-modal-registered').show();
+      Cookies.set('skip_registration', true);
+    })
+  }
 })(jQuery, Drupal);

modules/wri_engagement/templates/download-modal.html.twig

@@ -1,4 +1,23 @@
-<a class="files-overlay-trigger-webform button">{{ "Download"|t }}</a>
+<a class="files-overlay-trigger button">{{ "Download"|t }}</a>
 <div class="files-modal">
- {{ content }}
-</div>
+  <div class="files-modal-unregistered">
+    <h1>{{ "Access the Full Report"|t }} {{ content['#object'].values.nid }}</h1>
+    <p>{{ "Download the free full report! By accessing the full PDF, you agree to receive communications from WRI and P4G. You can unsubscribe at any time."|t  }}</p>
+    <form id="pardot-subscription">
+      <label for="first_name" class="visually-hidden">{{ "First Name"|t }}</label>
+      <input type="text" id="first_name" name="first_name" class="registration" placeholder="{{ "First Name"|t }}">
+      <label for="last_name" class="visually-hidden">{{ "Last Name"|t }}</label>
+      <input type="text" id="last_name" name="last_name" class="registration" placeholder="{{ "Last Name"|t }}">
+      <br>
+      <label for="email" class="visually-hidden">{{ "Email"|t }}</label>
+      <input type="email" id="email" name="email" class="registration" placeholder="{{ "Email"|t }}">
+      <label for="organization" class="visually-hidden">{{  "Organization"|t }}</label>
+      <input type="text" id="organization" name="organization" class="registration" placeholder="{{ "Organization"|t }}">
+      <input type="hidden" id="file_path" name="file_path" value="{{ url("<current>") }}">
+      <br><input class="pardot-submission" type="submit" value="Submit">
+      <br><a id="skip-registration" href="#">{{ "No thanks, show me the files"|t }}</a>
+    </form>
+  </div>
+  <div class="files-modal-registered">
+    {{ content }}
+  </div>

themes/custom/ts_wrin/sass/components/_popup_modal.scss

@@ -181,6 +181,24 @@
       }
     }
   }
+  .files-modal-unregistered {
+    p {
+      font-size: 1.3em;
+    }
+    input {
+      &.registration {
+        width: 48%;
+        margin: 0 10px 10px 0;
+        border: 2px solid #aaa;
+      }
+      &.pardot-submission {
+        margin: 15px 0;
+      }
+    }
+    #skip-registration {
+      font-size: 1.2em;
+    }
+  }
 }
 
 //Download files modal