Add legal and final strings (#1185)

* add legal and final strings

* removed unneeded suffixes from string ids

* removed unused strings and simplified string ids for vnext-only strings

* reword nostreams option

app/ui/account.js

@@ -64,9 +64,9 @@ class Account extends Component {
           <button
             class="p-2 md:p-4 border rounded-lg text-blue-dark border-blue-dark hover:text-white hover:bg-blue-dark focus:outline"
             onclick="${e => this.login(e)}"
-            title="${translate('signInMenuOption')}"
+            title="${translate('signInButton')}"
           >
-            ${translate('signInMenuOption')}
+            ${translate('signInButton')}
           </button>
         </send-account>
       `;
@@ -90,9 +90,9 @@ class Account extends Component {
             <button
               class="block w-full text-left px-4 py-2 text-grey-darkest hover:bg-blue hover:text-white cursor-pointer focus:outline"
               onclick="${e => this.logout(e)}"
-              title="${translate('logOut')}"
+              title="${translate('signOut')}"
             >
-              ${translate('logOut')}
+              ${translate('signOut')}
             </button>
           </li>
         </ul>

app/ui/archiveTile.js

@@ -16,7 +16,7 @@ const expiryOptions = require('./expiryOptions');
 function expiryInfo(translate, archive) {
   const l10n = timeLeft(archive.expiresAt - Date.now());
   return raw(
-    translate('frontPageExpireInfo', {
+    translate('archiveExpiryInfo', {
       downloadCount: translate('downloadCount', {
         num: archive.dlimit - archive.dtotal
       }),
@@ -39,7 +39,7 @@ function password(state) {
           onchange="${togglePasswordInput}"
         />
         <label for="add-password">
-          ${state.translate('addPasswordMessage')}
+          ${state.translate('addPassword')}
         </label>
       </div>
       <input
@@ -172,10 +172,10 @@ module.exports = function(state, emit, archive) {
           <button
             class="text-blue-dark hover:text-blue-darker focus:text-blue-darker focus:outline self-end flex items-center"
             onclick=${copy}
-            title="${state.translate('copyUrlHover')}"
+            title="${state.translate('copyLinkButton')}"
           >
             <img src="${assets.get('copy-16.svg')}" class="mr-2" />
-            ${state.translate('copyUrlHover')}
+            ${state.translate('copyLinkButton')}
           </button>
         `
       : html`
@@ -238,7 +238,7 @@ module.exports = function(state, emit, archive) {
     const text = event.target.lastChild;
     text.textContent = state.translate('copiedUrl');
     setTimeout(
-      () => (text.textContent = state.translate('copyUrlHover')),
+      () => (text.textContent = state.translate('copyLinkButton')),
       1000
     );
   }
@@ -301,10 +301,10 @@ module.exports.wip = function(state, emit) {
       <button
         id="upload-btn"
         class="btn rounded-lg flex-no-shrink focus:outline"
-        title="${state.translate('uploadFilesButton')}"
+        title="${state.translate('uploadButton')}"
         onclick="${upload}"
       >
-        ${state.translate('uploadFilesButton')}
+        ${state.translate('uploadButton')}
       </button>
     </send-upload-area>
   `;
@@ -425,10 +425,12 @@ module.exports.empty = function(state, emit) {
       <div
         class="pt-6 pb-2 text-center text-lg font-bold capitalize tracking-wide"
       >
-        ${state.translate('uploadDropDragMessage')}
+        ${state.translate('dragAndDropFiles')}
       </div>
-      <div class="pb-6 text-center text-base italic">
-        ${state.translate('uploadDropButtonMessage')}
+      <div class="pb-6 text-center text-base">
+        ${state.translate('orClickWithSize', {
+          size: bytes(state.user.maxSize)
+        })}
       </div>
       <input
         id="file-upload"
@@ -444,13 +446,11 @@ module.exports.empty = function(state, emit) {
         for="file-upload"
         role="button"
         class="btn rounded-lg flex items-center mt-4"
-        title="${state.translate('addFilesButtonWithSize', {
+        title="${state.translate('addFilesButtonWithSizeUpdate', {
           size: bytes(state.user.maxSize)
         })}"
       >
-        ${state.translate('addFilesButtonWithSize', {
-          size: bytes(state.user.maxSize)
-        })}
+        ${state.translate('addFilesButton')}
       </label>
       ${upsell}
     </send-upload-area>

app/ui/copyDialog.js

@@ -11,7 +11,7 @@ module.exports = function(name, url) {
           ${state.translate('notifyUploadEncryptDone')}
         </h1>
         <p class="font-normal leading-normal text-grey-darkest word-break-all">
-          ${state.translate('copyUrlFormLabel')} <br />
+          ${state.translate('copyLinkDescription')} <br />
           ${name}
         </p>
         <input
@@ -24,9 +24,9 @@ module.exports = function(name, url) {
         <button
           class="btn rounded-lg w-full flex-no-shrink focus:outline"
           onclick="${copy}"
-          title="${state.translate('copyUrlFormButtonText')}"
+          title="${state.translate('copyLinkButton')}"
         >
-          ${state.translate('copyUrlFormButtonText')}
+          ${state.translate('copyLinkButton')}
         </button>
         <button
           class="text-blue-dark hover:text-blue-darker focus:text-blue-darker my-4 font-medium cursor-pointer focus:outline"

app/ui/download.js

@@ -36,9 +36,9 @@ function preview(state, emit) {
     <div
       class="flex flex-col w-full max-w-md h-full mx-auto items-center justify-center"
     >
-      <h1 class="mb-4">${state.translate('downloadFilesTitle')}</h1>
+      <h1 class="mb-4">${state.translate('downloadTitle')}</h1>
       <p class="w-full text-grey-darkest text-center leading-normal">
-        ${state.translate('downloadMessage')}
+        ${state.translate('downloadDescription')}
       </p>
       ${archiveTile.preview(state, emit)}
     </div>

app/ui/downloadCompleted.js

@@ -12,7 +12,7 @@ module.exports = function(state) {
       </h1>
       <img src="${assets.get('completed.svg')}" class="my-12 h-48" />
       <p class="text-grey-darkest leading-normal">
-        ${state.translate('downloadFinishText')}
+        ${state.translate('trySendDescription')}
       </p>
       <p class="my-5">
         <a href="/" class="btn rounded-lg flex items-center mt-4" role="button"

app/ui/downloadPassword.js

@@ -8,9 +8,9 @@ module.exports = function(state, emit) {
     <div
       class="h-full w-full flex flex-col items-center justify-center bg-white py-8 max-w-md mx-auto"
     >
-      <h1 class="mb-4">${state.translate('downloadFilesTitle')}</h1>
+      <h1 class="mb-4">${state.translate('downloadTitle')}</h1>
       <p class="w-full mb-4 text-center text-grey-darkest leading-normal">
-        ${state.translate('downloadMessage')}
+        ${state.translate('downloadDescription')}
       </p>
       <form
         class="flex flex-row flex-no-wrap w-full md:w-4/5"

app/ui/error.js

@@ -14,7 +14,7 @@ module.exports = function(state, emit) {
         </h1>
         <img class="my-12 h-48" src="${assets.get('error.svg')}" />
         <p class="max-w-md text-center text-grey-darkest leading-normal">
-          ${state.translate('downloadFinishText')}
+          ${state.translate('trySendDescription')}
         </p>
         <p class="my-5">
           <a href="/" class="btn rounded-lg flex items-center" role="button"

app/ui/expiryOptions.js

@@ -7,7 +7,7 @@ module.exports = function(state, emit) {
   const el = html`
     <div class="px-1">
       ${raw(
-        state.translate('frontPageExpireInfo', {
+        state.translate('archiveExpiryInfo', {
           downloadCount:
             '<span class="lg:inline-block md:block sm:inline-block block"></span><select id="dlCount"></select>',
           timespan: '<select id="timespan"></select>'

app/ui/intro.js

@@ -8,10 +8,10 @@ module.exports = function intro(state) {
     >
       <div class="flex flex-col justify-end h-full">
         <h1 class="font-bold">
-          ${state.translate('uploadPageHeader')}
+          ${state.translate('introTitle')}
         </h1>
         <p class="max-w-sm mt-2 pr-16 font-light leading-normal">
-          ${state.translate('uploadPageExplainer')}
+          ${state.translate('introDescription')}
         </p>
         <img class="intro" src="${assets.get('intro.svg')}" />
       </div>

app/ui/legal.js

@@ -7,22 +7,60 @@ module.exports = function(state, emit) {
     <main class="main">
       ${state.modal && modal(state, emit)}
       <div
-        class="flex flex-col items-center bg-white m-6 px-6 py-8 border border-grey-light md:border-none md:px-12 md:py-16 shadow w-full md:h-full"
+        class="flex flex-col items-center bg-white m-4 px-6 py-8 border border-grey-light md:border-none md:px-12 md:py-16 shadow w-full md:h-full"
       >
-        <h1 class="text-center">${state.translate('legalHeader')}</h1>
-        ${raw(
-          replaceLinks(state.translate('legalNoticeTestPilot'), [
-            'https://testpilot.firefox.com/terms',
-            'https://testpilot.firefox.com/privacy',
-            'https://testpilot.firefox.com/experiments/send'
-          ])
-        )}
-        ${raw(
-          replaceLinks(state.translate('legalNoticeMozilla'), [
-            'https://www.mozilla.org/privacy/websites/',
-            'https://www.mozilla.org/about/legal/terms/mozilla/'
-          ])
-        )}
+        <h1 class="text-center">${state.translate('legalTitle')}</h1>
+        <p class="mt-2">${state.translate('legalDateStamp')}</p>
+        <div class="overflow-scroll px-4">
+          ${raw(
+            replaceLinks(state.translate('legalNoticeSend'), [
+              'https://www.mozilla.org/privacy/',
+              'https://github.com/mozilla/send/blob/master/docs/metrics.md'
+            ])
+          )}
+          <ul class="mt-10 max-w-md leading-normal">
+            <li class="mb-4">
+              <b>${state.translate('legalNoticeSendContentHeader')}:</b>
+              ${state.translate('legalNoticeSendContent')}
+            </li>
+            <li class="mb-4">
+              <b>${state.translate('legalNoticeSendDataHeader')}:</b>
+              ${state.translate('legalNoticeSendData')}
+            </li>
+            <li class="mb-4">
+              <b>${state.translate('legalNoticeSendPersonalHeader')}:</b>
+              ${state.translate('legalNoticeSendPersonal')}:
+              <ul class="leading-normal">
+                <li class="my-4">
+                  <u>${state.translate('legalNoticeSendIPHeader')}:</u>
+                  ${state.translate('legalNoticeSendIP')}
+                </li>
+                <li class="mb-4">
+                  <u>${state.translate('legalNoticeSendFXAHeader')}:</u>
+                  ${state.translate('legalNoticeSendFXA')}
+                </li>
+              </ul>
+            </li>
+            <li class="mb-4">
+              <b>${state.translate('legalNoticeSendNonPersonalHeader')}:</b>
+              ${state.translate('legalNoticeSendNonPersonal')}:
+              <ul class="leading-normal">
+                <li class="my-4">
+                  <u>${state.translate('legalNoticeSendInteractionHeader')}:</u>
+                  ${state.translate('legalNoticeSendInteraction')}
+                </li>
+                <li class="mb-4">
+                  <u>${state.translate('legalNoticeSendTechnicalHeader')}:</u>
+                  ${state.translate('legalNoticeSendTechnical')}
+                </li>
+              </ul>
+            </li>
+            <li class="mb-4">
+              <b>${state.translate('legalNoticeSendThirdPartyHeader')}:</b>
+              ${state.translate('legalNoticeSendThirdParty')}
+            </li>
+          </ul>
+        </div>
       </div>
     </main>
   `;

app/ui/noStreams.js

@@ -8,7 +8,7 @@ module.exports = function(state, emit) {
     <div
       class="flex flex-col w-full max-w-md h-full mx-auto items-center justify-center"
     >
-      <h1 class="mb-4">${state.translate('downloadFilesTitle')}</h1>
+      <h1 class="mb-4">${state.translate('downloadTitle')}</h1>
       <p
         class="w-full p-2 border border-yellow-light rounded md:w-4/5 text-orange-dark bg-yellow-lighter text-center leading-normal"
       >
@@ -50,8 +50,8 @@ module.exports = function(state, emit) {
         </fieldset>
         <input
             class="btn rounded-lg w-full flex flex-no-shrink items-center justify-center"
-            value="${state.translate('copyUrlFormButtonText')}"
-            title="${state.translate('copyUrlFormButtonText')}"
+            value="${state.translate('copyLinkButton')}"
+            title="${state.translate('copyLinkButton')}"
             type="submit" />
       </form>
     </div>
@@ -64,7 +64,7 @@ module.exports = function(state, emit) {
     let title = button.title;
     switch (choice) {
       case 'copy':
-        title = state.translate('copyUrlFormButtonText');
+        title = state.translate('copyLinkButton');
         break;
       case 'firefox':
         title = state.translate('downloadFirefox');

app/ui/notFound.js

@@ -10,11 +10,11 @@ module.exports = function(state, emit) {
         class="flex flex-col items-center justify-center h-full w-full p-6 z-10 overflow-hidden md:rounded-lg md:shadow-big"
       >
         <h1 class="text-center font-bold my-2">
-          ${state.translate('expiredPageHeaderUpdate')}
+          ${state.translate('expiredTitle')}
         </h1>
         <img src="${assets.get('notFound.svg')}" class="my-12" />
         <p class="max-w-md text-center text-grey-darkest leading-normal">
-          ${state.translate('downloadFinishText')}
+          ${state.translate('trySendDescription')}
         </p>
         <p class="my-5">
           <a href="/" class="btn rounded-lg flex items-center" role="button"

app/ui/signupDialog.js

@@ -30,11 +30,12 @@ module.exports = function(trigger) {
                 size: bytes(state.LIMITS.MAX_FILE_SIZE)
               })}
             </li>
-            <li>${state.translate('accountBenefitExpiry')}</li>
+            <li>${state.translate('accountBenefitDownloadCount')}</li>
             <li>
-              ${state.translate('accountBenefitExpiryTwo', { count: DAYS })}
+              ${state.translate('accountBenefitTimeLimit', { count: DAYS })}
             </li>
             <li>${state.translate('accountBenefitSync')}</li>
+            <li>${state.translate('accountBenefitMoz')}</li>
           </ul>
         </section>
         <section
@@ -45,12 +46,12 @@ module.exports = function(trigger) {
               id="email-input"
               type="email"
               class="${hidden} border rounded-lg w-full px-2 py-1 h-12 mb-3 text-lg text-grey-darker leading-loose"
-              placeholder=${state.translate('emailEntryPlaceholder')}
+              placeholder=${state.translate('emailPlaceholder')}
             />
             <input
               class="btn rounded-lg w-full flex flex-no-shrink items-center justify-center"
-              value="${state.translate('signInMenuOption')}"
-              title="${state.translate('signInMenuOption')}"
+              value="${state.translate('signInButton')}"
+              title="${state.translate('signInButton')}"
               id="email-submit"
               type="submit"
             />

app/ui/unsupported.js

@@ -51,7 +51,7 @@ function outdatedStrings(state) {
 function unsupportedStrings(state) {
   return {
     header: state.translate('notSupportedHeader'),
-    description: state.translate('notSupportedDetailUpdate'),
+    description: state.translate('notSupportedDescription'),
     button: state.translate('downloadFirefox')
   };
 }