feat: improve email mode messaging (#825)

* feat: update email prevention text and link * feat: add info box when user only has a single email recipient * feat: change update auth method toaster messaging * feat: amend email form discouragement copy * feat: update copy of form de/activation toast
opengovsg · Dec 9, 2020 · 3fb105d · 3fb105d
1 parent a3a4bed
commit 3fb105d
Show file tree

Hide file tree

Showing 8 changed files with 63 additions and 29 deletions.
diff --git a/src/public/modules/core/css/core.css b/src/public/modules/core/css/core.css
@@ -284,6 +284,7 @@ textarea.input-custom {
 .alert-custom .bx-check,
 .alert-custom .bx-loader,
 .alert-custom .bx-exclamation,
+.alert-custom .bx-error-circle,
 .alert-custom .bx-info-circle {
   float: left;
 }

diff --git a/src/public/modules/forms/admin/componentViews/form-emails-input.client.view.html b/src/public/modules/forms/admin/componentViews/form-emails-input.client.view.html
@@ -16,10 +16,10 @@
       id="email-reliability-link"
     >
       <a
-        translate-attr="{ href: 'LINKS.GUIDE.EMAIL_RELIABILITY' }"
+        translate-attr="{ href: 'LINKS.GUIDE.GUARD_EMAIL_BOUNCE' }"
         target="_blank"
         class=""
-        >Read about email reliability</a
+        >Guarding against bounces</a
       >
     </div>
   </div>
@@ -40,6 +40,13 @@
     />
   </div>
 
+  <div
+    ng-show="vm.formController.emailList.$valid && vm.emailInfoMsg"
+    class="alert-custom alert-info"
+  >
+    <i class="bx bx-error-circle bx-md icon-spacing"></i>
+    <span class="alert-msg"> {{vm.emailInfoMsg}} </span>
+  </div>
   <div
     ng-show="vm.formController.emailList.$invalid && vm.formController.emailList.$dirty"
     class="alert-custom alert-error"

diff --git a/src/public/modules/forms/admin/components/form-emails-input.client.component.js b/src/public/modules/forms/admin/components/form-emails-input.client.component.js
@@ -9,29 +9,32 @@ angular.module('forms').component('formEmailsInputComponent', {
     saveForm: '&',
   },
   controllerAs: 'vm',
-  controller: formEmailsInputController,
+  controller: ['$scope', formEmailsInputController],
 })
 
-function formEmailsInputController() {
+function formEmailsInputController($scope) {
   const vm = this
-  vm.validateEmails = (emails) => {
-    if (!emails) {
-      vm.emailErrorMsg =
-        'You must at least enter one email to receive responses'
-      return
-    }
 
-    const err = checkForErrors(String(emails).split(','))
+  $scope.$watch('vm.formData.emails', (newEmails) => {
+    vm.emailInfoMsg =
+      newEmails && String(newEmails).split(',').length === 1
+        ? 'Recommended: at least 2 recipients to prevent response loss from bounced emails'
+        : null
+  })
 
-    if (err) {
-      vm.emailErrorMsg = err
-      vm.formController.emailList.$setValidity('text', false)
-    } else {
-      vm.formController.emailList.$setValidity('text', true)
-    }
+  vm.validateEmails = (emails) => {
+    const emailsToCheck = emails ? String(emails).split(',') : undefined
+    vm.emailErrorMsg = checkForErrors(emailsToCheck)
+    vm.formController.emailList.$setValidity('text', !vm.emailErrorMsg)
   }
 
-  function checkForErrors(emails) {
+  function checkForErrors(emailsToCheck) {
+    if (!emailsToCheck) {
+      return 'You must at least enter one email to receive responses'
+    }
+
+    const emails = String(emailsToCheck).split(',')
+
     if (emails.some((email) => isInvalid(email))) {
       return 'Please enter valid email(s) (e.g. [email protected]) separated by commas'
     }

diff --git a/src/public/modules/forms/admin/controllers/activate-form-modal.client.controller.js b/src/public/modules/forms/admin/controllers/activate-form-modal.client.controller.js
@@ -60,7 +60,16 @@ function ActivateFormController(
           } else {
             // Save
             vm.savingStatus = 1
-            updateFormStatusAndSave().then(() => {
+            const toastMessage = dedent`
+              Congrats! Your form is now live.<br/>For high-traffic forms,
+              <a href="https://guide.form.gov.sg/AdvancedGuide.html#how-do-i-ensure-my-form-responses-will-not-bounce" target="_blank">
+                AutoArchive your mailbox</a> to prevent lost responses.
+            `
+            return updateFormStatusAndSave(toastMessage, {
+              timeOut: 10000,
+              extendedTimeOut: 10000,
+              skipLinky: true,
+            }).then(() => {
               vm.savingStatus = 2
             })
           }
@@ -121,7 +130,7 @@ function ActivateFormController(
       )
         .then((mailToUri) => {
           const toastMessage = dedent`
-            Congrats! Your form has gone live.<br/>
+            Congrats! Your form is now live.<br/>
             <a href=${mailToUri}>
               Email secret key to colleagues for safekeeping.
             </a>

diff --git a/src/public/modules/forms/admin/directiveViews/configure-form.client.view.html b/src/public/modules/forms/admin/directiveViews/configure-form.client.view.html
@@ -77,8 +77,8 @@
             your form responses.
           </p>
           <p>
-            <b>Not recommended</b> for most uses, especially high-volume forms,
-            as responses bouncing from your inbox are <b>permanently lost</b>.
+            <b>Not recommended</b> usually, especially for high-volume forms, as
+            responses bouncing from your inbox are <b>permanently lost</b>.
           </p>
           <p>
             Please only choose Email mode if you need any of these features:

diff --git a/src/public/modules/forms/admin/directiveViews/settings-form.client.view.html b/src/public/modules/forms/admin/directiveViews/settings-form.client.view.html
@@ -149,10 +149,9 @@
               class="alert-custom alert-info spcp-warning"
             >
               <i class="bx bx-info-circle bx-md icon-spacing"></i>
-              <span class="alert-msg"
-                >Authentication method cannot be changed unless your form is
-                deactivated.</span
-              >
+              <span class="alert-msg">
+                Deactivate your form to change authentication method.
+              </span>
             </div>
 
             <div

diff --git a/src/public/modules/forms/admin/directives/settings-form.client.directive.js b/src/public/modules/forms/admin/directives/settings-form.client.directive.js
@@ -1,5 +1,5 @@
 'use strict'
-
+const dedent = require('dedent-js')
 const { get, set, isEqual } = require('lodash')
 
 const SETTINGS_PATH = [
@@ -299,7 +299,22 @@ function settingsFormDirective(
             }
             openActivateFormModal(checks)
           } else {
-            updateFormStatusAndSave()
+            // Email form
+            // Next state will be public, show better toast message.
+            if ($scope.tempForm.status === 'PRIVATE') {
+              const toastMessage = dedent`
+                Congrats! Your form is now live.<br/>For high-traffic forms,
+                <a href="https://guide.form.gov.sg/AdvancedGuide.html#how-do-i-ensure-my-form-responses-will-not-bounce" target="_blank">
+                  AutoArchive your mailbox</a> to prevent lost responses.
+              `
+              updateFormStatusAndSave(toastMessage, {
+                timeOut: 10000,
+                extendedTimeOut: 10000,
+                skipLinky: true,
+              })
+            } else {
+              updateFormStatusAndSave('Form deactivated!')
+            }
           }
         }
       },

diff --git a/src/public/translations/en-SG/main.json b/src/public/translations/en-SG/main.json
@@ -3,7 +3,7 @@
   "LINKS": {
     "GUIDE": {
       "ROOT": "https://guide.form.gov.sg/",
-      "EMAIL_RELIABILITY": "https://go.gov.sg/formsg-email-reliability",
+      "GUARD_EMAIL_BOUNCE": "https://go.gov.sg/form-prevent-bounces",
       "STORAGE_MODE": "https://guide.form.gov.sg/AdvancedGuide.html#storage-mode",
       "SECRET_KEY_SAFEKEEPING": "https://guide.form.gov.sg/AdvancedGuide.html#how-do-i-make-sure-i-dont-lose-my-secret-key"
     },