Review updates, add survey link

smileys2 · Jul 31, 2020 · 6029179 · 6029179
1 parent b1ba655
commit 6029179
Show file tree

Hide file tree

Showing 6 changed files with 147 additions and 83 deletions.
diff --git a/controllers/home.js b/controllers/home.js
@@ -116,20 +116,20 @@ function protectMyEmail(req, res) {
   });
 }
 
-function _addEmailRelayToWaitlistsJoined(user) {
+function _addPrivacyBundleToWaitlistsJoined(user) {
   if (!user.waitlists_joined) {
     return {"privacy_bundle": {"notified": false} };
   }
   user.waitlists_joined["privacy_bundle"] = {"notified": false };
   return user.waitlists_joined;
 }
 
-function addEmailToRelayWaitlist(req, res) {
+function addPrivacyBundleToRelayWaitlist(req, res) {
   if (!req.user) {
     return res.redirect("/");
   }
   const user = req.user;
-  const updatedWaitlistsJoined = _addEmailRelayToWaitlistsJoined(user);
+  const updatedWaitlistsJoined = _addPrivacyBundleToWaitlistsJoined(user);
   DB.setWaitlistsJoined({user, updatedWaitlistsJoined});
   return res.json("email-not-added");
 }
@@ -161,6 +161,6 @@ module.exports = {
   getSecurityTips,
   getUpgrade,
   protectMyEmail,
-  addEmailToRelayWaitlist,
+  addPrivacyBundleToRelayWaitlist,
   notFound,
 };
diff --git a/public/css/bundle-exp.css b/public/css/bundle-exp.css
@@ -5,15 +5,17 @@
   background-position: bottom left, bottom right;
   background-repeat: no-repeat;
   background-size: auto, 50%;
-  min-height: 80vh;
 }
 
 footer.upgrade-bundle-test,
 .upgrade-bundle-test #navigation-wrapper,
+.upgrade-bundle-test .mobile-nav {
+  background-color: #0c1e44 !important;
+}
+
 .upgrade-bundle-test .mobile-menu,
-.upgrade-bundle-test .mobile-nav,
 .upgrade-bundle-test .nav-link.drop-down-menu {
-  background-color: #0c1e44 !important;
+  background-color: #10285b !important;
 }
 
 .upgrade-bundle-test .nav-link.drop-down-menu {
@@ -87,7 +89,8 @@ footer.upgrade-bundle-test,
 
 .upgrade-join-waitlist:focus,
 .close-upgrade-modal:focus,
-.upgrade-btn:focus {
+.upgrade-btn:focus,
+.survey-link:focus {
   box-shadow: 0 0 1px 1px #0a84ff, 0 0 0 4px rgba(10, 132, 255, 0.3);
 }
 
@@ -488,7 +491,51 @@ footer.upgrade-bundle-test,
   margin: auto auto 2rem auto;
 }
 
+.survey-intro {
+  margin: 2rem auto 0 auto;
+  font-weight: 400;
+  max-width: 360px;
+  line-height: 1.5;
+  font-size: 17px;
+}
+
+.survey-link {
+  display: block;
+  color: var(--blue3);
+  border: none;
+  text-decoration: underline;
+  font-size: 17px;
+  margin: 1rem auto;
+}
+
+.survey-link:hover {
+  color: var(--blue4);
+}
+
+.survey-link:active {
+  color: var(--blue5);
+}
+
+.upgrade-no-thanks {
+  position: absolute;
+  left: 0;
+  right: 0;
+  margin: auto;
+}
+
 @media screen and (max-width: 900px) {
+  .survey-intro {
+    margin-top: 1rem;
+  }
+
+  .survey-link {
+    margin-bottom: 0;
+  }
+
+  .fx-products {
+    margin-bottom: 2rem;
+  }
+
   .upgrade-h1 {
     font-size: 43px;
   }
@@ -523,14 +570,22 @@ footer.upgrade-bundle-test,
   }
 }
 
-@media screen and (max-width: 600px) {
-  .fx-products,
+@media screen and (max-width: 700px) {
   .upgrade-feature-headline::before,
   .upgrade-modal-p,
   .upgrade-modal-h2 {
     margin-bottom: 1rem;
   }
 
+  .survey-intro {
+    margin: 1rem auto 0 auto;
+  }
+
+  .fx-products,
+  .survey-link {
+    margin-bottom: 0;
+  }
+
   .upgrade-modal-content {
     min-height: 100vh;
     min-width: 100vw;
@@ -575,6 +630,7 @@ footer.upgrade-bundle-test,
     height: auto;
     max-width: 100%;
     align-items: flex-start;
+    justify-content: flex-start;
     margin: auto 1rem 2rem 0;
   }
 
@@ -590,5 +646,10 @@ footer.upgrade-bundle-test,
     margin: auto 1rem auto 0;
     background-position: left center;
     height: 40px;
+    width: 40px;
+  }
+
+  .upgrade-hero {
+    padding-top: 10rem;
   }
 }
diff --git a/public/js/bundle-exp.js b/public/js/bundle-exp.js
@@ -11,13 +11,13 @@
     return;
   }
 
-  const sendBundleTestPing = (eventAction, eventLabel) => {
+  const sendBundleTestPing = (eAction, eLabel) => {
     if (typeof(ga) !== "undefined") {
       ga("send", {
         hitType: "event",
-        eventCategory: "Privacy Bundle Test",
-        eventAction: "Engage",
-        eventLabel: "header-link",
+        eventCategory: "Privacy Defender Test",
+        eventAction: eAction,
+        eventLabel: eLabel,
         transport: "beacon",
       });
     }
@@ -32,9 +32,12 @@
   // Add listener to dashboard "Upgrade" button
   const upgradeDashboardBtn = document.querySelector(".upgrade-dash.upgrade-btn");
   if (upgradeDashboardBtn) {
+    if (upgradeDashboardBtn.classList.contains("waitlist-joined")) {
+      sendBundleTestPing("View", "dashboard-upgrade-button");
+    }
     upgradeDashboardBtn.addEventListener("click", (e) => {
       e.preventDefault();
-      sendBundleTestPing("Engage", "dashboard-button");
+      sendBundleTestPing("Engage", "dashboard-upgrade-button");
       window.location = `${serverUrl}/upgrade`;
     });
   }
@@ -113,12 +116,18 @@
       });
     });
 
+    document.querySelector(".upgrade-take-survey").addEventListener("click", () => {
+      sendBundleTestPing("Engage", "survey-link");
+      window.open("https://qsurvey.mozilla.com/s3/Firefox-Plus-Unlimited-Promo-Feedback?cohort=xx");
+      return;
+    });
+
     if (modalJoinWaitlistBtn) {
       modalJoinWaitlistBtn.addEventListener("click", async() => {
         modalJoinWaitlistBtn.disabled = true;
         sendBundleTestPing("clicked-join-test-panel", "modal-join-test-panel-btn");
 
-        const waitlistEndpoint = new URL("/relay-waitlist", document.body.dataset.serverUrl);
+        const waitlistEndpoint = new URL("/premium-waitlist", document.body.dataset.serverUrl);
         try {
           const response = await fetch(waitlistEndpoint, {
             headers: {

diff --git a/routes/home.js b/routes/home.js
@@ -6,7 +6,7 @@ const bodyParser = require("body-parser");
 
 const jsonParser = bodyParser.json();
 
-const {home, getAboutPage, getAllBreaches, getBentoStrings, getSecurityTips, protectMyEmail, addEmailToRelayWaitlist, getUpgrade, notFound} = require("../controllers/home");
+const {home, getAboutPage, getAllBreaches, getBentoStrings, getSecurityTips, protectMyEmail, addPrivacyBundleToRelayWaitlist, getUpgrade, notFound} = require("../controllers/home");
 const { requireSessionUser } = require("../middleware");
 
 const router = express.Router();
@@ -18,7 +18,7 @@ router.get("/breaches", getAllBreaches);
 router.get("/security-tips", getSecurityTips);
 router.get("/getBentoStrings", getBentoStrings);
 router.get("/protect-my-email", requireSessionUser, protectMyEmail);
-router.post("/relay-waitlist", jsonParser, requireSessionUser, addEmailToRelayWaitlist);
+router.post("/premium-waitlist", jsonParser, requireSessionUser, addPrivacyBundleToRelayWaitlist);
 router.get("/upgrade", getUpgrade);
 router.use(notFound);
 

diff --git a/views/partials/dashboards/breaches-dash.hbs b/views/partials/dashboards/breaches-dash.hbs
@@ -5,7 +5,7 @@
       <div class="flx flx-row hl-upgrade-btn-wrapper">
         <h2 class="pref-headline breach-summary">{{ getString "breach-summary" }}</h2>
         {{#if (localeIsEn)}}
-          <button class="upgrade upgrade-dash upgrade-btn">Upgrade Now</button>
+          <button class="upgrade upgrade-dash upgrade-btn {{#if ./../req.user.waitlists_joined.privacy_bundle}} waitlist-joined {{/if}}">Upgrade Now</button>
         {{/if}}
       </div>
       <div class="dash-stats">

diff --git a/views/upgrade.hbs b/views/upgrade.hbs
@@ -1,12 +1,10 @@
 <div class="upgrade-modal close-upgrade-modal">
   <div class="upgrade-modal-content">
-    <button class="upgrade-x-close close-upgrade-modal">Close Modal</button>
-
   {{#unless req.session.user.waitlists_joined.privacy_bundle}}
     <div class="upgrade-modal-join flx flx-col jst-cntr txt-cntr show-modal-panel">
       <div class="flx flx-col jst-cntr txt-cntr">
         <h1 class="upgrade-modal-h1">You Just Helped Us With An Experiment!</h1>
-        <h2 class="upgrade-modal-h2">Thank you for your interest in Firefox Plus Unlimited</h2>
+        <h2 class="upgrade-modal-h2">Thank you for your interest in Firefox Privacy Defender</h2>
         <p class="upgrade-modal-p">Firefox Privacy Defender is currently unavailable at this time, but your engagement with this concept helps us get one step closer to building something that serves your needs.<span class="bold">  If you’d like to be a sounding board for this and other upcoming Mozilla experiments, please join the test panel below.</span></p>
         <img class="upgrade-avatar" src="{{ req.session.user.fxa_profile_json.avatar }}" alt="{{ req.session.user.primary_email }}">
         <span class="upgrade-user-email">{{ req.session.user.primary_email }}</span>
@@ -25,66 +23,68 @@
         {{/each}}
       </div>
       <button class="btn-blue-primary close-upgrade-modal upgrade-go-to-dash">Go to Dashboard</button>
+      <p class="survey-intro">We'd like your feedback! Let us know what you think about this offering.</p>
+      <button class="upgrade-take-survey survey-link">Take the survey</button>
     </div>
     <div class="modal-error-message flx jst-cntr flx-col">
       <p class="modal-error-p txt-cntr">Oops! Looks like something didn't work out correctly. Please try again in a few minutes, or <a href="https://github.com/mozilla/blurts-server/" target="_blank" rel="noopener noreferrer">file an issue</a> in our GitHub repository.</p>
       <button class="btn-blue-primary close-upgrade-modal upgrade-go-to-dash">Go to Dashboard</button>
     </div>
+    <button class="upgrade-x-close close-upgrade-modal">Close Modal</button>
   </div>
 </div>
 
-{{#if req.session.user }}
-  <div class="flx flx-col upgrade-hero">
-    <main class="txt-cntr flx flx-col jst-cntr row-full-width upgrade-fade-in">
-      <h1 class="upgrade-h1">
-        Firefox Privacy Defender
-      </h1>
-      <h2 class="upgrade-subhead upgrade-main-subhead">
-        Premium accounts monitoring, email masking and password management, with safe browsing over the Firefox Private Network.
+<div class="flx flx-col upgrade-hero">
+  <main class="txt-cntr flx flx-col jst-cntr row-full-width upgrade-fade-in">
+    <h1 class="upgrade-h1">
+      Firefox Privacy Defender
+    </h1>
+    <h2 class="upgrade-subhead upgrade-main-subhead">
+      Premium accounts monitoring, email masking and password management, with safe browsing over the Firefox Private Network.
+    </h2>
+    <button class="upgrade-now upgrade-btn flx flx-col" data-page-location="upgrade-now-hero-button">
+      <span class="upgrade-now-line-1">Upgrade Now</span>
+      <span class="upgrade-now-line-2">$39.99 USD/Year</span>
+    </button>
+  </main>
+  <div class="upgrade-bg-split row-full-width">
+  <section class="upgrade-section flx just-cntr flx-row bg-white upgrade-two-up">
+    <div class="auto upgrade-fade-in">
+      <h2 class="upgrade-subhead upgrade-feature-subhead txt-cntr bolt-stars">
+        Keep all your online accounts, passwords and browsing data <span class="bold">private and safe</span> in one, easy-to-find place.
       </h2>
-      <button class="upgrade-now upgrade-btn flx flx-col" data-page-location="upgrade-now-hero-button">
-        <span class="upgrade-now-line-1">Upgrade Now</span>
-        <span class="upgrade-now-line-2">$39.99 USD/Year</span>
-      </button>
-    </main>
-    <div class="upgrade-bg-split row-full-width">
-    <section class="upgrade-section flx just-cntr flx-row bg-white upgrade-two-up">
-      <div class="auto upgrade-fade-in">
-        <h2 class="upgrade-subhead upgrade-feature-subhead txt-cntr bolt-stars">
-          Keep all your online accounts, passwords and browsing data <span class="bold">private and safe</span> in one, easy-to-find place.
-        </h2>
-      </div>
-      <div class="upgrade-list-wrapper">
-        <ul class="upgrade-list">
-          {{#each (upgradeList)}}
-            <li class="upgrade-list-item upgrade-fade-in">
-              {{{ this }}}
-            </li>
-          {{/each}}
-        </ul>
-      </div>
-    </section>
     </div>
+    <div class="upgrade-list-wrapper">
+      <ul class="upgrade-list">
+        {{#each (upgradeList)}}
+          <li class="upgrade-list-item upgrade-fade-in">
+            {{{ this }}}
+          </li>
+        {{/each}}
+      </ul>
+    </div>
+  </section>
   </div>
-  <div class="flx-col upgrade-bg-light">
-    <div class="row-full-width flx-col">
-      <div class="upgrade-three-up">
-        <section class="upgrade-section">
-          <div class="upgrade-features flx flx-row">
-            {{#each (upgradeFeatureList)}}
-              <div class="upgrade-feature txt-cntr flx flx-col">
-                <h3 class="upgrade-feature-headline {{ this.className }}">{{ this.title }}</h3>
-                <h4 class="upgrade-feature-subtitle">{{ this.subtitle }}</h4>
-                <p class="upgrade-feature-body">{{ this.body }}</p>
-              </div>
-            {{/each}}
-          </div>
-        </section>
-      </div>
+</div>
+<div class="flx-col upgrade-bg-light">
+  <div class="row-full-width flx-col">
+    <div class="upgrade-three-up">
+      <section class="upgrade-section">
+        <div class="upgrade-features flx flx-row">
+          {{#each (upgradeFeatureList)}}
+            <div class="upgrade-feature txt-cntr flx flx-col">
+              <h3 class="upgrade-feature-headline {{ this.className }}">{{ this.title }}</h3>
+              <h4 class="upgrade-feature-subtitle">{{ this.subtitle }}</h4>
+              <p class="upgrade-feature-body">{{ this.body }}</p>
+            </div>
+          {{/each}}
+        </div>
+      </section>
     </div>
   </div>
-  <div class="bg-blue bg-blue-shapes">
-    <div class="fx-features-wrapper bg-split-reverse row-full-width">
+</div>
+<div class="bg-blue bg-blue-shapes">
+  <div class="fx-features-wrapper bg-split-reverse row-full-width">
     <section class="upgrade-section row-full-width fx-features flx flx-col">
       <div class="flx flx-row jst-cntr">
         <div class="upgrade-fx-logo"></div>
@@ -100,19 +100,13 @@
         </ul>
       </div>
     </section>
-    </div>
-
-    <section class="ready-to-upgrade row-full-width jst-cntr flx-col flx">
-      <h2 class="upgrade-subhead ready-to-upgrade-hl txt-white txt-cntr">Ready to upgrade for complete peace of mind?</h2>
-      <button class="upgrade-now upgrade-btn flx flx-col" data-page-location="upgrade-now-footer-button">
-        <span class="upgrade-now-line-1">Upgrade Now</span>
-        <span class="upgrade-now-line-2">$39.99 USD/Year</span>
-      </button>
-    </section>
   </div>
 
-{{else}}
-  <h1>Please log in to your account to view this page</h1>
-  <button>Sign In</button>
-{{/if}}
-
+  <section class="ready-to-upgrade row-full-width jst-cntr flx-col flx">
+    <h2 class="upgrade-subhead ready-to-upgrade-hl txt-white txt-cntr">Ready to upgrade for complete peace of mind?</h2>
+    <button class="upgrade-now upgrade-btn flx flx-col" data-page-location="upgrade-now-footer-button">
+      <span class="upgrade-now-line-1">Upgrade Now</span>
+      <span class="upgrade-now-line-2">$39.99 USD/Year</span>
+    </button>
+  </section>
+</div>