canonical · hatched · Mar 27, 2019 · Mar 27, 2019 · Mar 27, 2019 · Mar 27, 2019
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -1,5 +1,4 @@
 ---
-
 defaults: &defaults
   docker:
     - image: canonicalwebteam/dev
@@ -17,7 +16,7 @@ jobs:
           command: pip3 install flake8
       - run:
           name: Lint webapp with Flake8
-          command: flake8 webapp
+          command: yarn run python-lint
   scss-lint:
     <<: *defaults
     steps:

diff --git a/.env b/.env
@@ -1,3 +1,4 @@
 PORT=8029
 FLASK_DEBUG=true
 DEVEL=True
+EXPERTS_RETURN=https://jaas.ai
diff --git a/package.json b/package.json
@@ -5,7 +5,7 @@
     "build-js": "webpack --mode development ./static/js/src/app.js --output ./static/js/dist/app.js --module-bind js=babel-loader",
     "clean": "rm -rf node_modules yarn-error.log css static/css *.log *.sqlite _site/ build/ .jekyll-metadata .bundle",
     "lint-scss": "sass-lint static/**/*.scss --verbose --no-exit",
-    "python-lint": "flake8 webapp tests",
+    "python-lint": "flake8 --max-line-length 95 webapp tests",
     "serve": "./entrypoint 0.0.0.0:${PORT}",
     "test": "npm run python-lint && npm run test-python && sass-lint static/**/*.scss --verbose --no-exit",
     "test-python": "python3 -m unittest discover tests",

diff --git a/static/js/app/modal.js b/static/js/app/modal.js
@@ -0,0 +1,27 @@
+/*
+@param { String } modalId
+The DOM id of the element you'd like to turn into a modal.
+*/
+if (!window.app.model) {
+  window.app.modal = function(modalId) {
+    const modal = document.querySelector(`#${modalId}`);
+    const modalTrigger = document.querySelector(`[data-js=${modalId}Trigger]`);
+
+    modalTrigger.onclick = function() {
+      modal.classList.remove('p-modal--hidden');
+    };
+
+    const closeModal = document.querySelector(`#${modalId} [data-js=modalClose]`);
+    closeModal.onclick = function() {
+      modal.classList.add('p-modal--hidden');
+    };
+
+    modal.onclick = function(e) {
+      modal.classList.add('p-modal--hidden');
+    };
+
+    document.querySelector(`.p-modal__dialog`).onclick = function(e) {
+      e.stopPropagation();
+    };
+  };
+}
diff --git a/static/sass/custom/_modal.scss b/static/sass/custom/_modal.scss
@@ -0,0 +1,90 @@
+.p-modal {
+  opacity: 1;
+  visibility: visible;
+  transition: visibility 0s, opacity 0.25s linear;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 99999;
+
+  ul,
+  button {
+    margin-bottom: 0;
+  }
+
+  &__header {
+    max-height: 16px;
+  }
+
+  &__close {
+    margin-left: auto;
+  }
+
+  &__dialog {
+    max-width: 420px;
+    overflow-y: scroll;
+  }
+}
+
+.p-modal--hidden {
+  opacity: 0;
+  visibility: hidden;
+}
+
+.modal__divider {
+  margin: 1rem 0;
+}
+
+.modal__contact-list {
+  list-style: none;
+  margin-left: 0;
+  padding-left: 0;
+
+  li {
+    display: flex;
+    margin-bottom: 0.25rem;
+
+    a {
+      padding-left: 0.5rem;
+    }
+  }
+
+  img {
+    display: block;
+    padding-top: 0.25rem;
+  }
+}
+
+.modal__button {
+  display: flex;
+
+  button {
+    margin-left: auto;
+  }
+}
+
+.icon-placeholder {
+  display: inline-block;
+  width: 16px;
+}
+
+.modal__tel-link {
+  display: inline-block;
+  margin-right: 0.5rem;
+}
+
+.modal__terms {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+.submit-wrapper {
+  display: flex;
+  margin-top: 1rem;
+
+  &__button {
+    margin-left: auto;
+  }
+}
diff --git a/static/sass/styles.scss b/static/sass/styles.scss
@@ -27,6 +27,7 @@ $mid-grey: $color-mid-light;
 @import 'custom/minimal-juju-cards';
 @import 'custom/entities';
 @import 'custom/homepage-hero-promo';
+@import 'custom/modal';
 
 // temp header styling
 $color-nav-border: #33535d;

diff --git a/templates/jaasai/experts/spicule.html b/templates/jaasai/experts/spicule.html
@@ -23,46 +23,9 @@ <h2 class="u-align--center u-vertically-center">
         <hr>
         <p>Please let us know if you have a question, or would like further information about Spicule.</p>
         <footer class="p-card__footer">
-          <a href="#_" data-js="show-btn" class="p-button--positive"
-            onclick="dataLayer.push({
-              'event' : 'GAEvent',
-              'eventCategory' : 'Experts',
-              'eventAction' : 'Reveal contact details',
-              'eventLabel' : 'Spicule'
-            });">
-            Show contact details&hellip;
-          </a>
-          <div class="u-hide" data-js="contact-info">
-            <p>
-              <a href="https://spicule.co.uk" class="link p-card__pre-footer">
-                <span>
-                  <img class="p-card__footer-icon" src="https://assets.ubuntu.com/v1/4f94bbf4-icon-web.svg" alt="Email icon">
-                </span>
-                https://spicule.co.uk
-              </a>
-            </p>
-            <p>
-              <a href="mailto:[email protected]" class="link p-card__pre-footer">
-                <span>
-                  <img class="p-card__footer-icon" src="https://assets.ubuntu.com/v1/5e815088-icon-email.svg" alt="Email icon">
-                </span>
-                [email protected]
-              </a>
-            </p>
-            <p>
-              <span class="link p-card__pre-footer">
-                <span>
-                  <img class="p-card__footer-icon" src="https://assets.ubuntu.com/v1/a52bd3b1-Icon-telephone.svg" alt="Telephone icon">
-                </span>
-                <span>
-                  UK <a href="tel:+441603327762">+44 (0)1603 327762</a>
-                </span>
-                <span style="display:inline-block;margin-left:1.5rem">
-                  US <a href="tel:+18448141689">+1 8448141689</a>
-                </span>
-              </span>
-            </p>
-          </div>
+          <button data-js="leadGenerationModalTrigger" class="p-button--positive">
+            Get in touch
+          </button>
         </footer>
       </div>
     </div>
@@ -187,5 +150,6 @@ <h4>
     </div>
   </div>
 </div>
+{% include "shared/_spicule_lead-gen-form.html" %}
 
 {% endblock content %}
diff --git a/templates/jaasai/experts/thanks.html b/templates/jaasai/experts/thanks.html
@@ -0,0 +1,20 @@
+{% extends "_layout.html" %}
+
+{% block title %}Juju expert - Your message has been successfully sent.{% endblock %}
+
+{% block content %}
+<div class="p-strip">
+  <div class="row">
+    <div class="col-8">
+      <h1>Thank you.</h1>
+      <p>Your message has been successfully sent - we'll get back to you as soon as possible.</p>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-8">
+      <p><a href="/">Return to the homepage.</a></p>
+    </div>
+  </div>
+</div>
+
+{% endblock content %}
diff --git a/templates/shared/_spicule_lead-gen-form.html b/templates/shared/_spicule_lead-gen-form.html
@@ -0,0 +1,96 @@
+<div data-js="contact-form" class="contact-form">
+  <div class="p-modal p-modal--hidden" id="leadGenerationModal">
+    <div class="p-modal__dialog" role="dialog" aria-labelledby="modal-title" aria-describedby="modal-description">
+      <header class="p-modal__header">
+        <button class="p-modal__close" aria-label="Close active modal" data-js="modalClose">Close</button>
+      </header>
+      <ul class="modal__contact-list">
+        <li class="modal__website">
+          <span>
+            <img src="https://assets.ubuntu.com/v1/4f94bbf4-icon-web.svg" alt="Email icon">
+          </span>
+          <a href="https://spicule.co.uk">https://spicule.co.uk</a>
+        </li>
+        <li class="modal__email">
+          <span>
+            <img src="https://assets.ubuntu.com/v1/5e815088-icon-email.svg" alt="Email icon">
+          </span>
+          <a href="mailto:[email protected]">[email protected]</a>
+        </li>
+        <li class="modal__tel">
+          <span>
+            <img src="https://assets.ubuntu.com/v1/a52bd3b1-Icon-telephone.svg" alt="Email icon">
+          </span>
+          <a class="modal__tel-link" rel="tel" href="tel:+441603327762">+44 (0) 1603 327762</a>(UK)</li>
+        <li class="modal__tel">
+          <span class="icon-placeholder">
+          </span>
+          <a class="modal__tel-link" rel="tel" href="tel:+18448141689">+1 (0) 8448 141689</a>(USA)</li>
+      </ul>
+      <hr class="modal__divider" />
+      <!-- MARKETO FORM -->
+      <form action="https://pages.ubuntu.com/index.php/leadCapture/save" method="post" id="mktoForm_3355">
+        <ul class="p-list">
+          <li class="mktFormReq mktField">
+            <label for="FirstName" class="mktoLabel ">First Name:</label>
+            <input required id="FirstName" name="FirstName" maxlength="255" type="text"
+              class="mktoField mktoRequired mktoInvalid">
+          </li>
+          <li class="mktFormReq mktField">
+            <label for="LastName" class="mktoLabel ">Last Name:</label>
+            <input required id="LastName" name="LastName" maxlength="255" type="text" class="mktoField mktoRequired">
+          </li>
+          <li class="mktFormReq mktField">
+            <label for="Email" class="mktoLabel ">Email address:</label>
+            <input required id="Email" name="Email" maxlength="255" type="email"
+              class="mktoField mktoEmailField mktoRequired">
+          </li>
+          <li class="mktFormReq mktField" id="comments">
+            <label for="Comments_from_lead__c" class="mktoLabel ">
+              {% if context and context.bundle.display_name %}
+                How can we help with <strong>{{ context.bundle.display_name }}</strong>?
+              {% else %}
+                How can we help?
+              {% endif %}
+            </label>
+            <textarea required id="Comments_from_lead__c" name="Comments_from_lead__c" rows="2"
+              class="mktoField mktoRequired" maxlength="2000"></textarea>
+          </li>
+          <li class="mktField">
+            <label for="canonicalUpdatesOptIn" class="mktoLabel modal__terms">
+              In submitting this form, I confirm that I have read and agree to Canonical’s
+              <a href="https://www.ubuntu.com/legal/data-privacy/contact?_ga=2.67215766.606903877.1552321043-1465573742.1527584293"
+                target="_blank"
+                data-saferedirecturl="https://www.google.com/url?q=https://www.ubuntu.com/legal/data-privacy/contact?_ga%3D2.67215766.606903877.1552321043-1465573742.1527584293&source=gmail&ust=1552667884381000&usg=AFQjCNG2NAncXIXBe9BeS4eWl3SKhAfjtg">Privacy
+                Notice</a>, <a
+                href="https://www.ubuntu.com/legal/data-privacy?_ga=2.67215766.606903877.1552321043-1465573742.1527584293"
+                target="_blank"
+                data-saferedirecturl="https://www.google.com/url?q=https://www.ubuntu.com/legal/data-privacy?_ga%3D2.67215766.606903877.1552321043-1465573742.1527584293&source=gmail&ust=1552667884381000&usg=AFQjCNFaakwcbzQ7aHxUkC1U3u7tSFkrPg">Privacy
+                Policy</a>, <a href="https://spicule.co.uk/privacy-policy/" target="_blank"
+                data-saferedirecturl="https://www.google.com/url?q=https://spicule.co.uk/privacy-policy/&source=gmail&ust=1552667884381000&usg=AFQjCNFw4NBu7Wc9ttZallMvNUNOhrU7gw">Spicule's
+                Privacy Policy</a> and acknowledge that I may be contacted by Spicule and/or Canonical about my form and relevant information.
+            </label>
+          </li>
+          <li class="mktField">
+            <input type="hidden" name="Consent_to_Processing__c" class="mktoField  mktoFormCol" value="Yes">
+          </li>
+          <li class="mktField submit-wrapper" style="display:flex;margin-top:1rem;">
+            <button type="submit" class="mktoButton submit-wrapper__button">Send message</button></span><input type="hidden" name="formid"
+              class="mktoField " value="3359"><input type="hidden" name="lpId" class="mktoField " value=""><input
+              type="hidden" name="subId" class="mktoField " value=""><input type="hidden" name="munchkinId"
+              class="mktoField " value=""><input type="hidden" name="lpurl" class="mktoField " value=""><input
+              type="hidden" name="cr" class="mktoField " value=""><input type="hidden" name="kw" class="mktoField "
+              value=""><input type="hidden" name="q" class="mktoField " value="">
+          </li>
+        </ul>
+        <input type="hidden" name="returnURL" value="{{ expertThanksPage }}/experts/thanks" />
+        <input type="hidden" name="retURL" value="{{ expertThanksPage }}/experts/thanks" />
+      </form>
+      <!-- /MARKETO FORM -->
+    </div>
+  </div>
+</div>
+<script src="/static/js/app/modal.js"></script>
+<script>
+  window.app.modal('leadGenerationModal');
+</script>
diff --git a/templates/store/bundle-details.html b/templates/store/bundle-details.html
@@ -99,6 +99,41 @@ <h3>Description</h3>
 
     </div>
     <div class="col-4">
+      {% if context.bundle.owner == "spiculecharms" or context.bundle.owner == "yellow" %}
+        <div class="p-card expert-card has-strap expert-card--contact-shown">
+          <div class="expert__strap">
+            Juju expert partners
+          </div>
+          <div class="expert__card-logo">
+            <img src="/static/img/logos/spicule.png" alt=" logo">
+          </div>
+          <div class="expert-card__initial">
+            <ul class="p-list">
+              <li class="p-list__item is-ticked">
+                Machine learning
+              </li>
+              <li class="p-list__item is-ticked">
+                Data service deployments
+              </li>
+              <li class="p-list__item is-ticked">
+                Container orchestration
+              </li>
+            </ul>
+            <button class="p-button--positive"
+              onclick="document.querySelector('.expert-card').classList.toggle('expert-card--contact-shown')">Show contact
+              details…</button>
+          </div>
+          <div class="expert-card__contact-info">
+            <p>Please let us know if you have a question, or would like further information about Spicule.</p>
+            <footer class="p-card__footer">
+              <button data-js="leadGenerationModalTrigger" class="p-button--positive u-show">
+                Get in touch
+              </button>
+            </footer>
+          </div>
+        </div>
+      {% endif %}
+
       {% if context.bundle.bundle_data.Meta['common-info'] %}
         <div class="p-card">
           <h4 class="p-card__title">Contribute</h4>
@@ -188,4 +223,8 @@ <h4>Preview</h4>
   window.app.treeifyFileList();
 </script>
 
+{% if context.bundle.owner == "spiculecharms" or context.bundle.owner == "yellow" %}
+  {% include "shared/_spicule_lead-gen-form.html" %}
+{% endif %}
+
 {% endblock %}