fix: Add newsletter modal to the signup form (#168)

* fix: modify registrations js to make appear the newsletter modal

* fix: Add some tests to the feature

* lint: Rubocop fixes

app/packs/src/decidim/user_registrations.js

@@ -12,6 +12,8 @@ $(() => {
   const $cityLivingArea = $(".city_living_area");
   const $metropolisLivingArea = $(".metropolis_living_area");
   const $railsValidationAsterisk = $("[for=\"registration_user_living_area\"]").children("span.label-required").clone()
+  const newsletterSelector    = 'input[type="checkbox"][name="user[newsletter]"]';
+  const $newsletterModal      = $("#sign-up-newsletter-modal");
 
   const $underageSelector = $("#registration_underage_registration");
   const $statutoryRepresentativeEmailSelector = $("#statutory_representative_email");
@@ -24,6 +26,13 @@ $(() => {
     }
   };
 
+  const checkNewsletter = (check) => {
+    $userRegistrationForm.find(newsletterSelector).prop("checked", check);
+    $newsletterModal.data("continue", true);
+    $newsletterModal.foundation("close");
+    $userRegistrationForm.submit();
+  }
+
   if ($underageSelector.is(":checked")) {
     emailSelectorToggle();
   }
@@ -120,4 +129,18 @@ $(() => {
 
     $formStepForwardButton.attr("disabled", (checkMandatoryFormField().length > 0));
   });
+
+  $newsletterModal.find(".check-newsletter").on("click", (event) => {
+    checkNewsletter($(event.target).data("check"));
+  });
+
+  $userRegistrationForm.on("submit", (event) => {
+    const newsletterChecked = $userRegistrationForm.find(newsletterSelector);
+    if (!$newsletterModal.data("continue")) {
+      if (!newsletterChecked.prop("checked")) {
+        event.preventDefault();
+        $newsletterModal.foundation("open");
+      }
+    }
+  });
 });

spec/system/examples/registration_hide_nickname_examples.rb

@@ -50,6 +50,7 @@
         select "1992", from: :registration_user_year
         check :registration_user_tos_agreement
         check :registration_user_additional_tos
+        check :registration_user_newsletter
 
         find("*[type=submit]").click
       end
@@ -80,6 +81,7 @@
           select "1992", from: :registration_user_year
           check :registration_user_tos_agreement
           check :registration_user_additional_tos
+          check :registration_user_newsletter
 
           find("*[type=submit]").click
         end
@@ -118,6 +120,7 @@
         select "1992", from: :registration_user_year
         check :registration_user_tos_agreement
         check :registration_user_additional_tos
+        check :registration_user_newsletter
 
         find("*[type=submit]").click
       end
@@ -179,6 +182,7 @@
           select "1992", from: :registration_user_year
           check :registration_user_tos_agreement
           check :registration_user_additional_tos
+          check :registration_user_newsletter
 
           find("*[type=submit]").click
         end

spec/system/examples/registration_password_examples.rb

@@ -54,6 +54,8 @@
 
         check :registration_user_tos_agreement
         check :registration_user_additional_tos
+        check :registration_user_newsletter
+
         find("*[type=submit]").click
       end
 
@@ -165,6 +167,7 @@
           check :registration_user_newsletter
           check :registration_user_tos_agreement
           check :registration_user_additional_tos
+          check :registration_user_newsletter
 
           check :registration_user_additional_tos
           find("*[type=submit]").click

spec/system/registration_spec.rb

@@ -17,4 +17,105 @@
   it_behaves_like "on/off registration instant validation"
 
   it_behaves_like "on/off registration hide nickname"
+
+  # --------- NEWSLETTER MODAL TESTS ---------
+
+  def fill_registration_form
+    fill_in :registration_user_name, with: "Nikola Tesla"
+    fill_in :registration_user_email, with: "[email protected]"
+    fill_in :registration_user_password, with: "sekritpass123"
+
+    select "City", from: :registration_user_living_area
+    select translated(city_residential_area.name), from: :registration_user_city_residential_area
+    select translated(city_work_area.name), from: :registration_user_city_work_area
+    select "Other", from: :registration_user_gender
+    select "September", from: :registration_user_month
+    select "1992", from: :registration_user_year
+    check :registration_user_tos_agreement
+    check :registration_user_additional_tos
+  end
+
+  context "when signing up" do
+    let!(:city_residential_area) { create(:scope, parent: city_parent_scope) }
+    let!(:city_work_area) { create(:scope, parent: city_parent_scope) }
+
+    let!(:city_parent_scope) do
+      create(:scope,
+             id: 58,
+             name: {
+               fr: "Ville de Toulouse",
+               en: "Toulouse city"
+             },
+             organization: organization)
+    end
+    let!(:metropolis_parent_scope) do
+      create(:scope,
+             id: 59,
+             name: {
+               fr: "Métropole de Toulouse",
+               en: "Toulouse metropolis"
+             },
+             organization: organization)
+    end
+
+    before do
+      allow(Decidim::FriendlySignup).to receive(:hide_nickname).and_return(true)
+      visit decidim.new_user_registration_path
+    end
+
+    describe "on first sight" do
+      it "shows fields empty" do
+        expect(page).to have_content("Sign up to participate")
+        expect(page).to have_field("registration_user_name", with: "")
+        expect(page).to have_field("registration_user_email", with: "")
+        expect(page).to have_field("registration_user_password", with: "")
+        expect(page).to have_field("registration_user_newsletter", checked: false)
+      end
+    end
+
+    context "when newsletter checkbox is unchecked" do
+      it "opens modal on submit" do
+        within ".new_user" do
+          find("*[type=submit]").click
+        end
+        expect(page).to have_css("#sign-up-newsletter-modal", visible: :visible)
+      end
+
+      it "checks when clicking the checking button" do
+        fill_registration_form
+        within ".new_user" do
+          find("*[type=submit]").click
+        end
+        expect(page).to have_css("#sign-up-newsletter-modal", visible: :all)
+        click_button "Check and continue"
+      end
+
+      it "submit after modal has been opened and selected an option" do
+        within ".new_user" do
+          find("*[type=submit]").click
+        end
+        click_button "Keep unchecked"
+        expect(page).to have_css("#sign-up-newsletter-modal", visible: :all)
+        fill_registration_form
+        within ".new_user" do
+          find("*[type=submit]").click
+        end
+        expect(page).to have_field("registration_user_newsletter", checked: false)
+      end
+    end
+
+    context "when newsletter checkbox is checked but submit fails" do
+      before do
+        fill_registration_form
+        page.check("registration_user_newsletter")
+      end
+
+      it "keeps the user newsletter checkbox true value" do
+        expect(page).to have_field("registration_user_newsletter", checked: true)
+        within ".new_user" do
+          find("*[type=submit]").click
+        end
+      end
+    end
+  end
 end