Add preconfirm optin option to bulk list management UI. Closes #935.

frontend/cypress/e2e/subscribers.cy.js

@@ -74,7 +74,7 @@ describe('Subscribers', () => {
   it('Does bulk subscriber list add and remove', () => {
     const cases = [
       // radio: action to perform, rows: table rows to select and perform on: [expected statuses of those rows after thea action]
-      { radio: 'check-list-add', lists: [0, 1], rows: { 0: ['unconfirmed', 'unconfirmed'] } },
+      { radio: 'check-list-add', lists: [0, 1], rows: { 0: ['confirmed', 'confirmed'] } },
       { radio: 'check-list-unsubscribe', lists: [0, 1], rows: { 0: ['unsubscribed', 'unsubscribed'], 1: ['unsubscribed'] } },
       { radio: 'check-list-remove', lists: [0, 1], rows: { 1: [] } },
       { radio: 'check-list-add', lists: [0, 1], rows: { 0: ['unsubscribed', 'unsubscribed'], 1: ['unconfirmed', 'unconfirmed'] } },
@@ -101,6 +101,11 @@ describe('Subscribers', () => {
       // Select the radio option in the modal.
       cy.get(`[data-cy=${c.radio}] .check`).click();
 
+      // For the first test, check the optin preconfirm box.
+      if (n === 0) {
+        cy.get('[data-cy=preconfirm]').click();
+      }
+
       // Save.
       cy.get('.modal button.is-primary').click();
 

frontend/src/views/SubscriberBulkList.vue

@@ -32,6 +32,14 @@
           :selected="form.lists"
           :all="lists.results"
         ></list-selector>
+
+        <b-field :message="$t('subscribers.preconfirmHelp')">
+            <b-checkbox v-model="form.preconfirm" data-cy="preconfirm"
+              :native-value="true" :disabled="!hasOptinList">
+              {{ $t('subscribers.preconfirm') }}
+            </b-checkbox>
+        </b-field>
+
       </section>
 
       <footer class="modal-card-foot has-text-right">
@@ -63,19 +71,24 @@ export default Vue.extend({
       form: {
         action: 'add',
         lists: [],
+        preconfirm: false,
       },
     };
   },
 
   methods: {
     onSubmit() {
-      this.$emit('finished', this.form.action, this.form.lists);
+      this.$emit('finished', this.form.action, this.form.preconfirm, this.form.lists);
       this.$parent.close();
     },
   },
 
   computed: {
     ...mapState(['lists', 'loading']),
+
+    hasOptinList() {
+      return this.form.lists.some((l) => l.optin === 'double');
+    },
   },
 });
 </script>

frontend/src/views/Subscribers.vue

@@ -450,7 +450,7 @@ export default Vue.extend({
       this.$utils.confirm(this.$t('subscribers.confirmDelete', { num: this.numSelectedSubscribers }), fn);
     },
 
-    bulkChangeLists(action, lists) {
+    bulkChangeLists(action, preconfirm, lists) {
       const data = {
         action,
         query: this.fullQueryExp,
@@ -458,6 +458,10 @@ export default Vue.extend({
         target_list_ids: lists.map((l) => l.id),
       };
 
+      if (preconfirm) {
+        data.status = 'confirmed';
+      }
+
       let fn = null;
       if (!this.bulk.all && this.bulk.checked.length > 0) {
         // If 'all' is not selected, perform by IDs.