Newsletter checkbox unchecked by default (#3488)

* [FEAT] Registration newsletter checkbox unchecked by default

* [FEAT] Added Modal to show message and action to user. Tests updated

* [FIX] Corrections to pass tests

CHANGELOG.md

@@ -51,6 +51,7 @@ must now set a resource name:
 - **decidim-core**: Add user profile card [\#3444](https://github.com/decidim/decidim/pull/3444)
 - **decidim-budgets**: Add project card [\#3454](https://github.com/decidim/decidim/pull/3454)
 - **decidim-core**: GDPR: Unbundled consent on user registration [\#3483](https://github.com/decidim/decidim/pull/3483)
+- **decidim-core**: GDPR: Newsletter checkbox unchecked by default [\3316](https://github.com/decidim/decidim/issues/3316)
 - **decidim-consultations**: Add consultation card [\#3487](https://github.com/decidim/decidim/pull/3487)
 - **decidim-blogs**: Add blog post card [\#3487](https://github.com/decidim/decidim/pull/3487)
 

decidim-core/app/assets/javascripts/decidim/user_registrations.js.es6

@@ -1,7 +1,10 @@
 $(() => {
-  const $userRegistrationForm = $(".register-form");
+  const $userRegistrationForm = $("#register-form");
   const $userGroupFields      = $userRegistrationForm.find(".user-group-fields");
   const inputSelector         = 'input[name="user[sign_up_as]"]';
+  const newsletterSelector    = 'input[type="checkbox"][name="user[newsletter]"]';
+  const $newsletterModal      = $("#sign-up-newsletter-modal");
+
 
   const setGroupFieldsVisibility = (value) => {
     if (value === "user") {
@@ -11,11 +14,32 @@ $(() => {
     }
   }
 
+  const checkNewsletter = (check) => {
+    $userRegistrationForm.find(newsletterSelector).prop("checked", check);
+    $newsletterModal.data("continue", true);
+    $newsletterModal.foundation("close");
+    $userRegistrationForm.submit();
+  }
+
   setGroupFieldsVisibility($userRegistrationForm.find(`${inputSelector}:checked`).val());
 
   $userRegistrationForm.on("change", inputSelector, (event) => {
     const value = event.target.value;
 
     setGroupFieldsVisibility(value);
   });
+
+  $userRegistrationForm.on("submit", (event) => {
+    const newsletterChecked = $userRegistrationForm.find(newsletterSelector);
+    if (!$newsletterModal.data("continue")) {
+      if (!newsletterChecked.prop("checked")) {
+        event.preventDefault();
+        $newsletterModal.foundation("open");
+      }
+    }
+  });
+
+  $newsletterModal.find(".check-newsletter").on("click", (event) => {
+    checkNewsletter($(event.target).data("check"));
+  });
 });

decidim-core/app/commands/decidim/create_omniauth_registration.rb

@@ -51,7 +51,7 @@ def create_or_find_user
         @user.email = (verified_email || form.email)
         @user.name = form.name
         @user.nickname = form.normalized_nickname
-        @user.newsletter_notifications = true
+        @user.newsletter_notifications = false
         @user.email_on_notification = true
         @user.password = generated_password
         @user.password_confirmation = generated_password

decidim-core/app/views/decidim/devise/registrations/new.html.erb

@@ -22,7 +22,7 @@
   <div class="row">
     <div class="columns large-6 medium-10 medium-centered">
 
-      <%= decidim_form_for(@form, as: resource_name, url: registration_path(resource_name), html: { class: "register-form new_user" }) do |f| %>
+      <%= decidim_form_for(@form, as: resource_name, url: registration_path(resource_name), html: { class: "register-form new_user", id: "register-form" }) do |f| %>
         <%= invisible_captcha %>
         <div class="card">
           <div class="card__content">
@@ -91,7 +91,7 @@
 
             <fieldset>
               <div class="field">
-                <%= f.check_box :newsletter, label: t(".newsletter") %>
+                <%= f.check_box :newsletter, label: t(".newsletter"), checked: @form.newsletter %>
               </div>
             </fieldset>
           </div>
@@ -112,3 +112,4 @@
   <%= render "decidim/devise/shared/omniauth_buttons" %>
 </div>
 </main>
+<%= render "decidim/devise/shared/newsletter_modal" %>

decidim-core/app/views/decidim/devise/shared/_newsletter_modal.html.erb

@@ -0,0 +1,25 @@
+<div class="reveal" id="sign-up-newsletter-modal" data-reveal>
+  <div class="reveal__header">
+    <h3 class="reveal__title"><%= t(".title") %></h3>
+    <button class="close-button" data-close aria-label="Close modal"
+      type="button">
+      <span aria-hidden="true">&times;</span>
+    </button>
+  </div>
+
+  <div class="row">
+    <div class="columns medium-10 medium-centered">
+      <p><%= t(".notice") %></p>
+    </div>
+    <div class="columns medium-10 medium-centered">
+      <div class="row">
+        <div class="columns medium-6">
+          <button type="buton" class="check-newsletter clear button secondary expanded" data-check=false><%= t(".buttons.uncheck") %></button>
+        </div>
+        <div class="columns medium-6">
+          <button type="buton" class="check-newsletter button expanded" data-check=true><%= t(".buttons.check") %></button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

decidim-core/config/locales/en.yml

@@ -210,6 +210,12 @@ en:
           are_you_new?: New to the platform?
           register: Create an account
       shared:
+        newsletter_modal:
+          buttons:
+            check: Check and continue
+            uncheck: Keep uncheck
+          notice: Hey, are you sure you don't want to receive a newsletter? Please consider again ticking the newsletter checkbox below. It is very important for us that you can receive occasional emails to make important announcements, you can always change this on your notifications settings page. If you don't tick the box you might be missing relevant information about new participatory opportunities within the platform. If you still want to avoid receiving newsletters, we perfectly understand your decision. Thanks for reading this!
+          title: Newsletter notifications
         omniauth_buttons:
           or: Or
     doorkeeper:

decidim-core/spec/commands/decidim/create_omniauth_registration_spec.rb

@@ -80,7 +80,7 @@ module Comments
             expect(user.encrypted_password).not_to be_nil
             expect(user.email).to eq(form.email)
             expect(user.organization).to eq(organization)
-            expect(user.newsletter_notifications).to eq(true)
+            expect(user.newsletter_notifications).to eq(false)
             expect(user.email_on_notification).to eq(true)
             expect(user).to be_confirmed
             expect(user.valid_password?("abcde1234")).to eq(true)

decidim-core/spec/commands/decidim/create_registration_spec.rb

@@ -83,6 +83,17 @@ module Comments
 
             expect { command.call }.to change(User, :count).by(1)
           end
+
+          describe "when user keep uncheck newsletter" do
+            let(:newsletter) { "0" }
+
+            it "creates a user with no newsletter notifications" do
+              expect do
+                command.call
+                expect(User.last.newsletter_notifications).to eq(false)
+              end.to change(User, :count).by(1)
+            end
+          end
         end
 
         describe "when the user is signing up as a user group" do

decidim-core/spec/controllers/registrations_controller_spec.rb

@@ -25,7 +25,7 @@ module Decidim
             password: "password1234",
             password_confirmation: "password1234",
             tos_agreement: "1",
-            newsletter: "1"
+            newsletter: "0"
           }
         }
       end

decidim-core/spec/system/authentication_spec.rb

@@ -24,6 +24,7 @@
           fill_in :user_password, with: "123456"
           fill_in :user_password_confirmation, with: "123456"
           check :user_tos_agreement
+          check :user_newsletter
           find("*[type=submit]").click
         end
 
@@ -35,14 +36,15 @@
       it "denies the sign up" do
         find(".sign-up-link").click
 
-        within "form#new_user" do
-          page.execute_script("$($('form#new_user > div > input')[0]).val('Ima robot :D')")
+        within ".new_user" do
+          page.execute_script("$($('.new_user > div > input')[0]).val('Ima robot :D')")
           fill_in :user_email, with: "user@example.org"
           fill_in :user_name, with: "Responsible Citizen"
           fill_in :user_nickname, with: "responsible"
           fill_in :user_password, with: "123456"
           fill_in :user_password_confirmation, with: "123456"
           check :user_tos_agreement
+          check :user_newsletter
           find("*[type=submit]").click
         end
 
@@ -209,6 +211,8 @@
         fill_in :user_user_group_phone, with: "333-333-3333"
 
         check :user_tos_agreement
+        check :user_newsletter
+
         find("*[type=submit]").click
       end
 
@@ -367,6 +371,7 @@
             fill_in :user_password, with: "123456"
             fill_in :user_password_confirmation, with: "123456"
             check :user_tos_agreement
+            check :user_newsletter
             find("*[type=submit]").click
           end
 

decidim-core/spec/system/registration_spec.rb

@@ -0,0 +1,84 @@
+# frozen_string_literal: true
+
+require "spec_helper"
+
+def fill_registration_form
+  fill_in :user_name, with: "Nikola Tesla"
+  fill_in :user_nickname, with: "the-greatest-genius-in-history"
+  fill_in :user_email, with: "nikola.tesla@example.org"
+  fill_in :user_password, with: "sekritpass123"
+  fill_in :user_password_confirmation, with: "sekritpass123"
+end
+
+describe "Registration", type: :system do
+  let(:organization) { create(:organization) }
+  let!(:terms_and_conditions_page) { create(:static_page, slug: "terms-and-conditions", organization: organization) }
+
+  before do
+    switch_to_host(organization.host)
+    visit decidim.new_user_registration_path
+  end
+
+  context "when signing up" do
+    describe "on first sight" do
+      it "shows fields empty" do
+        expect(page).to have_content("Sign up as")
+        expect(page).to have_field("user_name", with: "")
+        expect(page).to have_field("user_nickname", with: "")
+        expect(page).to have_field("user_email", with: "")
+        expect(page).to have_field("user_password", with: "")
+        expect(page).to have_field("user_password_confirmation", with: "")
+        expect(page).to have_field("user_newsletter", checked: false)
+      end
+    end
+  end
+
+  context "when newsletter checkbox is unchecked" do
+    it "opens modal on submit" do
+      within "form.new_user" do
+        find("*[type=submit]").click
+      end
+      expect(page).to have_css("#sign-up-newsletter-modal", visible: true)
+      expect(page).to have_current_path decidim.new_user_registration_path
+    end
+
+    it "checks when clicking the checking button" do
+      within "form.new_user" do
+        find("*[type=submit]").click
+      end
+      click_button "Check and continue"
+      expect(page).to have_current_path decidim.new_user_registration_path
+      expect(page).to have_css("#sign-up-newsletter-modal", visible: false)
+      expect(page).to have_field("user_newsletter", checked: true)
+    end
+
+    it "submit after modal has been opened and selected an option" do
+      within "form.new_user" do
+        find("*[type=submit]").click
+      end
+      click_button "Keep uncheck"
+      expect(page).to have_css("#sign-up-newsletter-modal", visible: false)
+      fill_registration_form
+      within "form.new_user" do
+        find("*[type=submit]").click
+      end
+      expect(page).to have_current_path decidim.user_registration_path
+      expect(page).to have_field("user_newsletter", checked: false)
+    end
+  end
+
+  context "when newsletter checkbox is checked but submit fails" do
+    before do
+      fill_registration_form
+      page.check("user_newsletter")
+    end
+
+    it "keeps the user newsletter checkbox true value" do
+      within "form.new_user" do
+        find("*[type=submit]").click
+      end
+      expect(page).to have_current_path decidim.user_registration_path
+      expect(page).to have_field("user_newsletter", checked: true)
+    end
+  end
+end