Added experiment for firefox download promo

app/templates/blank.js

@@ -1,9 +1,6 @@
 const html = require('choo/html');
 
-module.exports = function(state) {
+module.exports = function() {
   const div = html`<div id="page-one"></div>`;
-  if (state.layout) {
-    return state.layout(state, div);
-  }
   return div;
 };

app/templates/completed.js

@@ -1,9 +1,11 @@
 const html = require('choo/html');
 const progress = require('./progress');
 const { fadeOut } = require('../utils');
+const fxPromo = require('./fxPromo');
 
 module.exports = function(state, emit) {
   const div = html`
+  <div id="page-one">
   <div id="download" class="fadeIn">
     <div id="download-progress">
       <div id="dl-title" class="title">${state.translate(
@@ -19,6 +21,8 @@ module.exports = function(state, emit) {
       sendNew
     }>${state.translate('sendYourFilesLink')}</a>
   </div>
+  ${state.promo === 'body' ? fxPromo(state, emit) : ''}
+  </div>
   `;
 
   async function sendNew(e) {

app/templates/download.js

@@ -1,10 +1,12 @@
 const html = require('choo/html');
 const progress = require('./progress');
 const { bytes } = require('../utils');
+const fxPromo = require('./fxPromo');
 
-module.exports = function(state) {
+module.exports = function(state, emit) {
   const transfer = state.transfer;
   const div = html`
+  <div id="page-one">
   <div id="download-progress" class="fadeIn">
     <div id="dl-title" class="title">${state.translate(
       'downloadingPageProgress',
@@ -21,6 +23,8 @@ module.exports = function(state) {
         transfer.sizes
       )}</div>
     </div>
+    </div>
+    ${state.promo === 'body' ? fxPromo(state, emit) : ''}
   </div>
   `;
 

app/templates/footer.js

@@ -0,0 +1,31 @@
+const html = require('choo/html');
+const assets = require('../../common/assets');
+
+module.exports = function(state) {
+  return html`<div class="footer">
+    <div class="legal-links">
+      <a href="https://www.mozilla.org" role="presentation"><img class="mozilla-logo" src="${assets.get(
+        'mozilla-logo.svg'
+      )}" alt="mozilla"/></a>
+      <a href="https://www.mozilla.org/about/legal">${state.translate(
+        'footerLinkLegal'
+      )}</a>
+      <a href="https://testpilot.firefox.com/about">${state.translate(
+        'footerLinkAbout'
+      )}</a>
+      <a href="/legal">${state.translate('footerLinkPrivacy')}</a>
+      <a href="/legal">${state.translate('footerLinkTerms')}</a>
+      <a href="https://www.mozilla.org/privacy/websites/#cookies">${state.translate(
+        'footerLinkCookies'
+      )}</a>
+    </div>
+    <div class="social-links">
+      <a href="https://github.com/mozilla/send" role="presentation"><img class="github" src="${assets.get(
+        'github-icon.svg'
+      )}" alt="github"/></a>
+      <a href="https://twitter.com/FxTestPilot" role="presentation"><img class="twitter" src="${assets.get(
+        'twitter-icon.svg'
+      )}" alt="twitter"/></a>
+    </div>
+  </div>`;
+};

app/templates/fxPromo.js

@@ -0,0 +1,44 @@
+const html = require('choo/html');
+const assets = require('../../common/assets');
+
+// function replaceLinks(str, urls) {
+//   let i = -1;
+//   const s = str.replace(/<a>([^<]+)<\/a>/g, (m, v) => {
+//     i++;
+//     return `<a class="link" href="${urls[i]}">${v}</a>`;
+//   });
+//   return [`<span>${s}</span>`];
+// }
+
+module.exports = function(state, emit) {
+  // function close() {
+  //   document.querySelector('.banner').remove();
+  // }
+
+  function clicked(evt) {
+    emit('exit', evt);
+  }
+
+  return html`
+    <div class="banner">
+      <div>
+        <img
+        src="${assets.get('firefox_logo-only.svg')}"
+        class="firefox-logo-small"
+        alt="Firefox"/>
+        <span>Send is brought to you by the all-new Firefox.
+        <a
+          class="link"
+          href="https://www.mozilla.org/firefox/new/?utm_campaign=send-acquisition&utm_medium=referral&utm_source=send.firefox.com"
+          onclick=${clicked}
+          >Download Firefox now ≫</a></span>
+      </div>
+    </div>`;
+};
+
+/*
+<img
+  src="${assets.get('close-16.svg')}"
+  class="icon-delete"
+  onclick=${close}>
+*/

app/templates/header.js

@@ -0,0 +1,21 @@
+const html = require('choo/html');
+const assets = require('../../common/assets');
+
+module.exports = function(state) {
+  return html`<header class="header">
+  <div class="send-logo">
+    <a href="/">
+      <img src="${assets.get(
+        'send_logo.svg'
+      )}" alt="Send"/><h1 class="site-title">Send</h1>
+    </a>
+    <div class="site-subtitle">
+      <a href="https://testpilot.firefox.com">Firefox Test Pilot</a>
+      <div>${state.translate('siteSubtitle')}</div>
+    </div>
+  </div>
+  <a href="https://qsurvey.mozilla.com/s3/txp-firefox-send" rel="noreferrer noopener" class="feedback" target="_blank">${state.translate(
+    'siteFeedback'
+  )}</a>
+</header>`;
+};

app/templates/legal.js

@@ -30,9 +30,5 @@ module.exports = function(state) {
       </div>
     </div>
   `;
-
-  if (state.layout) {
-    return state.layout(state, div);
-  }
   return div;
 };

app/templates/notFound.js

@@ -17,9 +17,5 @@ module.exports = function(state) {
       )}</a>
     </div>
   </div>`;
-
-  if (state.layout) {
-    return state.layout(state, div);
-  }
   return div;
 };

app/templates/preview.js

@@ -3,6 +3,7 @@ const assets = require('../../common/assets');
 const notFound = require('./notFound');
 const downloadPassword = require('./downloadPassword');
 const { bytes } = require('../utils');
+const fxPromo = require('./fxPromo');
 
 function getFileFromDOM() {
   const el = document.getElementById('dl-file');
@@ -61,6 +62,7 @@ module.exports = function(state, emit) {
       </div>
       <a class="send-new" href="/">${state.translate('sendYourFilesLink')}</a>
     </div>
+    ${state.promo === 'body' ? fxPromo(state, emit) : ''}
   </div>
   `;
 
@@ -68,9 +70,5 @@ module.exports = function(state, emit) {
     event.preventDefault();
     emit('download', fileInfo);
   }
-
-  if (state.layout) {
-    return state.layout(state, div);
-  }
   return div;
 };

app/templates/unsupported.js

@@ -42,9 +42,5 @@ module.exports = function(state) {
       )}</div>
     </div>`;
   const div = html`<div id="page-one">${msg}</div>`;
-
-  if (state.layout) {
-    return state.layout(state, div);
-  }
   return div;
 };

app/templates/welcome.js

@@ -1,6 +1,7 @@
 const html = require('choo/html');
 const assets = require('../../common/assets');
 const fileList = require('./fileList');
+const fxPromo = require('./fxPromo');
 const { fadeOut } = require('../utils');
 
 module.exports = function(state, emit) {
@@ -35,6 +36,7 @@ module.exports = function(state, emit) {
         title="${state.translate('uploadPageBrowseButton1')}">
         ${state.translate('uploadPageBrowseButton1')}</label>
     </div>
+    ${state.promo === 'body' ? fxPromo(state, emit) : ''}
     ${fileList(state, emit)}
   </div>
   `;
@@ -67,9 +69,5 @@ module.exports = function(state, emit) {
     await fadeOut('page-one');
     emit('upload', { file, type: 'click' });
   }
-
-  if (state.layout) {
-    return state.layout(state, div);
-  }
   return div;
 };