added survey dialog. closes #1307

app/ui/copyDialog.js

@@ -2,7 +2,7 @@ const html = require('choo/html');
 const { copyToClipboard } = require('../utils');
 
 module.exports = function(name, url) {
-  return function(state, emit, close) {
+  const dialog = function(state, emit, close) {
     return html`
       <send-copy-dialog
         class="flex flex-col items-center text-center p-4 max-w-sm m-auto"
@@ -45,4 +45,6 @@ module.exports = function(name, url) {
       setTimeout(close, 1000);
     }
   };
+  dialog.type = 'copy';
+  return dialog;
 };

app/ui/modal.js

@@ -21,7 +21,6 @@ module.exports = function(state, emit) {
       event.preventDefault();
       event.stopPropagation();
     }
-    state.modal = null;
-    emit('render');
+    emit('closeModal');
   }
 };

app/ui/shareDialog.js

@@ -1,13 +1,7 @@
 const html = require('choo/html');
 
-/* Possible strings for l10n
-shareLinkDescription = Share the link to your file:
-shareLinkButton = Share link
-shareMessage = Download "{ $name }" with { -send-brand }: simple, safe file sharing
- */
-
 module.exports = function(name, url) {
-  return function(state, emit, close) {
+  const dialog = function(state, emit, close) {
     return html`
       <send-share-dialog
         class="flex flex-col items-center text-center p-4 max-w-sm m-auto"
@@ -16,7 +10,7 @@ module.exports = function(name, url) {
           ${state.translate('notifyUploadEncryptDone')}
         </h1>
         <p class="font-normal leading-normal text-grey-darkest word-break-all">
-          Share the link to your file:<br />
+          ${state.translate('shareLinkDescription')}<br />
           ${name}
         </p>
         <input
@@ -29,9 +23,9 @@ module.exports = function(name, url) {
         <button
           class="btn rounded-lg w-full flex-no-shrink focus:outline"
           onclick="${share}"
-          title="Share link"
+          title="${state.translate('shareLinkButton')}"
         >
-          Share link
+          ${state.translate('shareLinkButton')}
         </button>
         <button
           class="text-blue-dark hover:text-blue-darker focus:text-blue-darker my-4 font-medium cursor-pointer focus:outline"
@@ -48,8 +42,7 @@ module.exports = function(name, url) {
       try {
         await navigator.share({
           title: state.translate('-send-brand'),
-          text: `Download "${name}" with Firefox Send: simple, safe file sharing`,
-          //state.translate('shareMessage', { name }),
+          text: state.translate('shareMessage', { name }),
           url
         });
       } catch (e) {
@@ -61,4 +54,6 @@ module.exports = function(name, url) {
       close();
     }
   };
+  dialog.type = 'share';
+  return dialog;
 };

app/ui/surveyDialog.js

@@ -0,0 +1,42 @@
+const html = require('choo/html');
+const version = require('../../package.json').version;
+const { browserName } = require('../utils');
+
+module.exports = function() {
+  return function(state, emit, close) {
+    const surveyUrl = `${
+      state.PREFS.surveyUrl
+    }?ver=${version}&browser=${browserName()}&anon=${
+      state.user.loggedIn
+    }&active_count=${state.storage.files.length}`;
+    return html`
+      <send-survey-dialog
+        class="flex flex-col items-center text-center p-4 max-w-sm m-auto"
+      >
+        <h1 class="font-bold my-4">
+          Tell us what you think.
+        </h1>
+        <p class="font-normal leading-normal text-grey-darkest px-4">
+          Love Firefox Send? Take a quick survey to let us know how we can make
+          it better.
+        </p>
+        <a
+          class="btn rounded-lg w-full flex-no-shrink focus:outline my-5"
+          onclick="${() => emit('closeModal')}"
+          title="Give feedback"
+          href="${surveyUrl}"
+          target="_blank"
+        >
+          Give feedback
+        </a>
+        <button
+          class="text-blue-dark hover:text-blue-darker focus:text-blue-darker font-medium cursor-pointer focus:outline"
+          onclick="${close}"
+          title="Skip"
+        >
+          Skip
+        </button>
+      </send-survey-dialog>
+    `;
+  };
+};