Merge pull request #1155 from maykinmedia/feature/2289-profile-newsle…

…tter-styles 💄 [#2289] Add newsletter section checkbox styles
maykinmedia · Apr 18, 2024 · cfdcf0e · cfdcf0e
2 parents c06dc69 + 92fc0e5
commit cfdcf0e
Show file tree

Hide file tree

Showing 10 changed files with 77 additions and 40 deletions.
diff --git a/src/open_inwoner/accounts/tests/test_profile_views.py b/src/open_inwoner/accounts/tests/test_profile_views.py
@@ -1117,8 +1117,8 @@ def test_render_form_if_newsletters_are_found(self, m):
         # First checkbox should be checked, because the user is already subscribed
         self.assertTrue(form.fields["newsletters"][0].checked)
         self.assertFalse(form.fields["newsletters"][1].checked)
-        self.assertIn("Nieuwsbrief1: foo", response.text)
-        self.assertIn("Nieuwsbrief2: bar", response.text)
+        self.assertIn("Nieuwsbrief1", response.text)
+        self.assertIn("Nieuwsbrief2", response.text)
 
     def test_render_form_limit_newsletters_to_admin_selection(self, m):
         self.setUpMocks(m)
@@ -1151,10 +1151,10 @@ def test_render_form_limit_newsletters_to_admin_selection(self, m):
 
         # First checkbox should be checked, because the user is already subscribed
         self.assertTrue(form.fields["newsletters"][0].checked)
-        self.assertIn("Nieuwsbrief1: foo", response.text)
+        self.assertIn("Nieuwsbrief1", response.text)
 
         # Second field was excluded by `LapostaConfig.limit_list_selection_to`
-        self.assertNotIn("Nieuwsbrief2: bar", response.text)
+        self.assertNotIn("Nieuwsbrief2", response.text)
 
     def test_do_not_render_form_if_email_not_verified(self, m):
         self.setUpMocks(m)

diff --git a/src/open_inwoner/components/templatetags/helpers.py b/src/open_inwoner/components/templatetags/helpers.py
@@ -80,3 +80,8 @@ def inner(parser, token):
         return ContentsNode(nodelist, template_name, **context_kwargs)
 
     return inner
+
+
+@register.filter
+def get_key(dict, key):
+    return dict[key]
diff --git a/src/open_inwoner/laposta/choices.py b/src/open_inwoner/laposta/choices.py
@@ -3,7 +3,11 @@
 
 def get_list_choices(lists: list[LapostaList]) -> list[tuple[str, str]]:
     return [
-        (laposta_list.list_id, f"{laposta_list.name}: {laposta_list.remarks}")
+        (laposta_list.list_id, laposta_list.name)
         for laposta_list in lists
         if laposta_list.name
     ]
+
+
+def get_list_remarks_mapping(lists: list[LapostaList]) -> dict[str, str]:
+    return {laposta_list.list_id: laposta_list.remarks for laposta_list in lists}
diff --git a/src/open_inwoner/laposta/forms.py b/src/open_inwoner/laposta/forms.py
@@ -12,7 +12,7 @@
 from open_inwoner.utils.api import ClientError
 
 from ..accounts.models import User
-from .choices import get_list_choices
+from .choices import get_list_choices, get_list_remarks_mapping
 from .client import create_laposta_client
 
 logger = logging.getLogger(__name__)
@@ -34,6 +34,7 @@ def __init__(self, user=None, *args, **kwargs):
         if laposta_client := create_laposta_client():
             lists = laposta_client.get_lists()
             self.fields["newsletters"].choices = get_list_choices(lists)
+            self.fields["newsletters"].remarks_mapping = get_list_remarks_mapping(lists)
             if limited_to := LapostaConfig.get_solo().limit_list_selection_to:
                 self.fields["newsletters"].choices = [
                     choice

diff --git a/src/open_inwoner/laposta/tests/test_forms.py b/src/open_inwoner/laposta/tests/test_forms.py
@@ -285,11 +285,11 @@ def test_save_form_raises_errors(self, m):
                     _(
                         "Something went wrong while trying to subscribe to "
                         "'{list_name}', please try again later"
-                    ).format(list_name="Nieuwsbrief3: baz"),
+                    ).format(list_name="Nieuwsbrief3"),
                     _(
                         "Something went wrong while trying to unsubscribe from "
                         "'{list_name}', please try again later"
-                    ).format(list_name="Nieuwsbrief2: bar"),
+                    ).format(list_name="Nieuwsbrief2"),
                 ]
             },
         )

diff --git a/src/open_inwoner/scss/components/Form/ChoiceList.scss b/src/open_inwoner/scss/components/Form/ChoiceList.scss
@@ -77,6 +77,11 @@
 
   &__item.selected {
     border: var(--border-width-thin) solid var(--color-secondary-lighter);
+    border-left-width: 3px;
+
+    .choice-list__label {
+      margin-left: -2px;
+    }
   }
 
   &__item.selected &__label:before {
@@ -134,7 +139,6 @@
     border-radius: var(--border-radius);
     display: flex;
     padding: 0;
-    width: 100%;
 
     .form__control {
       width: 100%;
@@ -198,6 +202,11 @@
 
     &.selected {
       border: var(--border-width-thin) solid var(--color-secondary);
+      border-left-width: 3px;
+
+      .choice-list-multiple__content {
+        margin-left: -2px;
+      }
     }
   }
 }
diff --git a/src/open_inwoner/scss/components/Profile/_personal-overview.scss b/src/open_inwoner/scss/components/Profile/_personal-overview.scss
@@ -34,4 +34,29 @@
   .profile-cards .card {
     min-height: 190px;
   }
+
+  .form {
+    padding: 0;
+  }
+
+  .checkbox {
+    &__label {
+      color: var(--color-black);
+      font-family: var(--font-family-heading);
+      font-weight: bold;
+    }
+
+    .checkbox__p {
+      color: var(--color-gray-dark-900);
+      font-size: var(--font-size-body-small);
+      line-height: var(--font-line-height-body-small);
+      padding-left: calc(var(--gutter-width) + var(--spacing-small));
+    }
+  }
+
+  &.profile-section__newsletters {
+    .button {
+      padding: var(--spacing-medium) var(--spacing-giant);
+    }
+  }
 }
diff --git a/src/open_inwoner/templates/pages/kvk/branches.html b/src/open_inwoner/templates/pages/kvk/branches.html
@@ -48,7 +48,7 @@ <h2 class="choice-list__heading">{{ branch.naam }}</h2>
                                     </label>
                                 </li>
                             {% endwith %}
-                        {% endfor %}kvk
+                        {% endfor %}
                     {% endif %}
                 </ul>
 

diff --git a/src/open_inwoner/templates/pages/profile/me.html b/src/open_inwoner/templates/pages/profile/me.html
@@ -1,5 +1,5 @@
 {% extends 'master.html' %}
-{% load i18n l10n link_tags file_tags card_tags list_tags button_tags utils icon_tags form_tags anchor_menu_tags dropdown_tags %}
+{% load i18n l10n link_tags file_tags card_tags list_tags helpers button_tags utils icon_tags form_tags anchor_menu_tags dropdown_tags %}
 
 {% block sidebar_content %}
     {% anchor_menu anchors=anchors desktop=True %}
@@ -19,7 +19,7 @@ <h1 class="h1" id="title">{% trans "Welkom" %}{% if not user.is_eherkenning_user
 
 {% if user.is_eherkenning_user %}
     {# Business information #}
-    <section class="tabled tabled--flexible profile-section profile-section--bordered">
+    <section class="tabled tabled--flexible profile-section profile-section--bordered profile-section__business-overview">
         <div class="tabled__section">
             <h2 class="h2 title" id="business-overview">{% trans "Bedrijfsgegevens" %}</h2>
         </div>
@@ -41,7 +41,7 @@ <h2 class="h2 title" id="business-overview">{% trans "Bedrijfsgegevens" %}</h2>
     </section>
 {% else %}
     {# Personal information #}
-    <section class="tabled tabled--flexible profile-section profile-section--bordered" id="personal-info">
+    <section class="tabled tabled--flexible profile-section profile-section--bordered profile-section__personal-info" id="personal-info">
         <div class="tabled__section">
             <h2 class="h2 title" id="personal-overview">{% trans "Persoonlijke gegevens" %}
                 <div class="tabled__item--force-right tabled__item--mobile-big">
@@ -81,7 +81,7 @@ <h2 class="h2 title" id="personal-overview">{% trans "Persoonlijke gegevens" %}
 {% endif %}
 
     {# Notifications #}
-    <section class="tabled tabled--flexible profile-section profile-section--bordered" id="profile-notifications">
+    <section class="tabled tabled--flexible profile-section profile-section--bordered profile-section__notifications" id="profile-notifications">
         <div class="tabled__section">
             <h2 class="h2 title" id="notifications">{% trans "Voorkeuren voor meldingen" %}
                 <div class="tabled__item--force-right tabled__item--mobile-big">
@@ -101,20 +101,33 @@ <h2 class="h2 title" id="notifications">{% trans "Voorkeuren voor meldingen" %}
         </div>
     </section>
 
+    {# Newsletters #}
     {% if view.config.newsletters and form.fields.newsletters.choices %}
-    <section class="tabled tabled--flexible profile-section profile-section--bordered" id="profile-newsletters">
+    <section class="tabled tabled--flexible profile-section profile-section--bordered profile-section__newsletters" id="profile-newsletters">
         <div class="tabled__section">
             <h2 class="h2 title" id="newsletters">{% trans "Nieuwsbrieven" %}</h2>
         </div>
             <form method="POST" id="newsletter-form" class="form" novalidate>
                 {% csrf_token %}
-
-                {% for field in form.fields %}
-                    {% autorender_field form field %}
+                {% with form.fields.newsletters.remarks_mapping as remarks_mapping %}
+                {% for list_id, list_name in form.fields.newsletters.choices %}
+                    <div class="checkbox">
+                        <input type="checkbox"
+                               name="newsletters"
+                               value="{{ list_id }}"
+                               class="checkbox__input"
+                               id="id_newsletters_{{ forloop.counter }}"
+                               {% if list_id in form.fields.newsletters.initial %}checked="checked"{% endif %}>
+                        <label class="checkbox__label" for="id_newsletters_{{ forloop.counter }}">
+                            {{ list_name }}
+                        </label>
+                        <p class="checkbox__p newsletter-remarks">{{ remarks_mapping|get_key:list_id }}</p>
+                    </div>
                 {% endfor %}
+                {% endwith %}
 
                 {% button_row %}
-                    {% button text=_("Opslaan") type="submit" extra_classes="button--primary" name="newsletter-submit" %}
+                    {% button text=_("Abonneren") type="submit" icon_position="before" icon_outlined=True extra_classes="button--primary" name="newsletter-submit" %}
                 {% endbutton_row %}
             </form>
     </section>
@@ -292,7 +305,7 @@ <h4 class="card__heading-4"><span class="link link__text">{% trans "Mijn afsprak
     </section>
     {% endif %}
 
-    <section class="tabled profile-section profile-section--bordered">
+    <section class="tabled profile-section profile-section--bordered profile-section__remove">
         <div class="tabled__section">
             <h2 class="h2 title" id="profile-remove">{% trans "Profiel verwijderen" %}</h2></div>
             <div class="tabled">

diff --git a/src/open_inwoner/templates/pages/profile/notifications.html b/src/open_inwoner/templates/pages/profile/notifications.html
@@ -14,26 +14,6 @@ <h1 class="h1" id="title">
         <form method="POST" id="change-notifications" action="{% url 'profile:notifications' %}" class="form" novalidate>
             {% csrf_token %}
 
-            {% if form.first_name %}
-                {% input form.first_name %}
-            {% endif %}
-
-            {% if form.infix %}
-                {% input form.infix %}
-            {% endif %}
-
-            {% if form.last_name %}
-                {% input form.last_name %}
-            {% endif %}
-
-            {% if form.email %}
-                {% input form.email %}
-            {% endif %}
-
-            {% if form.invite %}
-                {% input form.invite no_label=True %}
-            {% endif %}
-
             <h3 class="h3">Notificatie voorkeuren</h3>
 
             {# Start of multiple checkbox fields #}