Fixes for variant 3 merge

* Renamed `this.consentNeeded` in action_form.js to `this.async` as it
was confusing when read side by side with consent.isRequired. This
should clear any ambiguity: `async` in this case means that the form is
submitted asynchronously, hence validation happens first, then
submission will happen eventually (async), not on click/submit.

* Cleaned up PetitionAndScrollToConsent:
  - Removed all code that manually submits the form, and replaced with a
  Backbone.trigger('form:submit_action_form') global event. ActionForm
  listens for this event and then submits the form.
  - Removed manual checking for '/validate' in the action form's url.
  Instead, we initialise ActionForm with `async: true` and this will
  make it validate by default (and trigger a `form:validated` global
  event on success).
  - Listen to two distinct events: `form:validated` and
  `form:submitted`. On validation, we scroll to consent, and on
  submission, we redirect to followUpUrl.
  - Removed redundant setupStore method. The store is now initialised on
  page load and does not depend on any component to be initialised.
  ActionForm now dispatches a changeVariant on initialisation, and
  listens for changes on the country select, updating the store on
  changes.

app/javascript/member-facing/backbone/action_form.js

@@ -63,7 +63,7 @@ const ActionForm = Backbone.View.extend({
     this.store = window.champaign.store;
     this.member = options.member;
     this.variant = options.variant || 'simple';
-    this.consentNeeded = options.consentNeeded;
+    this.async = options.async || false;
     this.insertHiddenFields(options);
     this.applyDisplayModeToFields(options.member);
     this.url = this.$el.attr('action');
@@ -76,9 +76,16 @@ const ActionForm = Backbone.View.extend({
     }
     this.$submitButton = this.$('.action-form__submit-button');
     this.buttonText = this.$submitButton.text();
-    GlobalEvents.bindEvents(this);
     this.setupState();
     this.enableGDPRConsent();
+    GlobalEvents.bindEvents(this);
+  },
+
+  defaultAction() {
+    if (this.isConsentNeededForExistingMember() || this.async) {
+      return 'validate';
+    }
+    return 'submit';
   },
 
   state() {
@@ -107,7 +114,7 @@ const ActionForm = Backbone.View.extend({
   },
 
   submitForm() {
-    window.setTimeout(() => this.$el.submit(), 200);
+    _.delay(() => this.$el.submit(), 300);
   },
 
   handleCountryChange(event) {
@@ -117,10 +124,16 @@ const ActionForm = Backbone.View.extend({
   },
 
   onClickSubmit(event) {
-    if (this.isConsentNeededForExistingMember()) {
+    if (this.defaultAction() === 'validate') {
       event.preventDefault();
       event.stopPropagation();
-      this.validateForm().then(() => this.store.dispatch(toggleModal(true)));
+      this.validateForm().then(() => {
+        if (this.isConsentNeededForExistingMember()) {
+          this.store.dispatch(toggleModal(true));
+        } else {
+          Backbone.trigger('form:validated');
+        }
+      });
     }
   },
 

app/javascript/member-facing/backbone/petition_and_scroll_to_consent.js

@@ -11,7 +11,8 @@ const PetitionAndScrollToConsent = Backbone.View.extend({
   el: '.petition-bar',
 
   globalEvents: {
-    'form:submitted': 'formSubmittedCallback',
+    'form:validated': 'onValidateSuccess',
+    'form:submitted': 'onSubmitSuccess',
   },
 
   // options: object with any of the following keys
@@ -29,37 +30,27 @@ const PetitionAndScrollToConsent = Backbone.View.extend({
     this.optInButton.on('click', this.optInCallback.bind(this));
     this.optOutButton.on('click', this.optOutCallback.bind(this));
 
-    this.setupStore();
     GlobalEvents.bindEvents(this);
   },
 
-  formSubmittedCallback(e, data) {
-    var isValidateRequest = this.$('form.action-form')
-      .attr('action')
-      .match(/validate/);
-    if (isValidateRequest) {
-      this.petitionSidebar.fadeOut();
-      this.petitionOverlayButton.fadeOut();
-      this.displayAndScrollToConsentQuestion();
-    } else {
-      this.redirectToFollowUp();
-    }
+  onValidateSuccess() {
+    this.petitionSidebar.fadeOut();
+    this.petitionOverlayButton.fadeOut();
+    this.displayAndScrollToConsentQuestion();
+  },
+
+  onSubmitSuccess() {
+    this.redirectToFollowUp();
   },
 
   optInCallback() {
     window.champaign.store.dispatch(changeConsent(true));
-    setTimeout(function() {
-      window.champaign.myActionForm.updateActionUrl();
-      this.$('form.action-form button[type=submit]').trigger('click');
-    }, 300);
+    Backbone.trigger('form:submit_action_form');
   },
 
   optOutCallback() {
     window.champaign.store.dispatch(changeConsent(false));
-    setTimeout(function() {
-      window.champaign.myActionForm.updateActionUrl();
-      this.$('form.action-form button[type=submit]').trigger('click');
-    }, 300);
+    Backbone.trigger('form:submit_action_form');
   },
 
   displayAndScrollToConsentQuestion() {
@@ -97,29 +88,6 @@ const PetitionAndScrollToConsent = Backbone.View.extend({
   redirectTo(url) {
     window.location.href = url;
   },
-
-  updateConsent(consented) {
-    window.champaign.store.dispatch({
-      type: '@@chmp:consent:change_consent',
-      consented: consented,
-    });
-  },
-
-  setupStore() {
-    var store = champaign.store;
-    var member = champaign.personalization.member;
-    var countrySelect = this.$('select[name=country]');
-
-    countrySelect.on('change', function() {
-      store.dispatch(changeCountry(countrySelect.val()));
-    });
-    countrySelect.trigger('change');
-
-    var consentField = this.$('input[name=consented]');
-    store.subscribe(function() {
-      consentField.val(store.getState().consent.consented);
-    });
-  },
 });
 
 export default PetitionAndScrollToConsent;