From a78e0f168c54c2e07ed186eed2ea899163a60cfc Mon Sep 17 00:00:00 2001
From: MazOneTwoOne <76905544+MazOneTwoOne@users.noreply.github.com>
Date: Fri, 19 Apr 2024 15:15:17 +0100
Subject: [PATCH] EL-1431: Search page - Update styling (#229)

* update view based on flag

* make feature flag live in staging

* update

* update to stylings and layout

* updates from review comments

* updates from review comments

* last bits of from review commets

* remove duplicates

* removing more duplicaation and addng in extra CSS

* typo

* update views.py

* update to stylings

* Update to test and template

* remove results template

* update tests

* test update

* revert changes

* add `LAALAA_API_HOST` variable in CircleCi config

* refactor test's

* refactor of tests - chaneg the scope.

* typo in test method

* use `LiveServerTestCase` class

* reformatted views, test, and base.py

* revert change to `urls.py` as `adviser` already installed in `base.py`

* update to the way we populate a form filed via a feature flag - based on review comment.

* switch around what is shown on conditional

* update on comment, on where to find documentation

* update CSS

* update CSS
---
 .circleci/config.yml                          |   2 +
 fala/apps/adviser/forms.py                    |  18 ++-
 .../tests/test_search_view_function.py        |  33 +++++
 fala/apps/adviser/views.py                    |   9 +-
 fala/assets-src/sass/main.scss                |  36 ++++-
 fala/settings/base.py                         |   2 +
 fala/templates/adviser/search.html            | 138 ++++++++++--------
 fala/templates/adviser/search_old.html        |  76 ++++++++++
 fala/templates/generic-py-base.html           |   2 +-
 fala/templates/macros/forms.html              |   2 +-
 kubernetes_deploy/staging/deployment.yml      |   2 +-
 11 files changed, 252 insertions(+), 68 deletions(-)
 create mode 100644 fala/apps/adviser/tests/test_search_view_function.py
 create mode 100644 fala/templates/adviser/search_old.html

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 39458f59..5cae1484 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -92,6 +92,8 @@ jobs:
           command: |
             source env/bin/activate
             python manage.py test
+          environment:
+            LAALAA_API_HOST: "https://laa-legal-adviser-api-staging.apps.live-1.cloud-platform.service.justice.gov.uk"
 
   build:
     executor: aws-ecr/default # use the aws-ecr/default executor to start the docker daemon
diff --git a/fala/apps/adviser/forms.py b/fala/apps/adviser/forms.py
index c9289cc0..7173500d 100644
--- a/fala/apps/adviser/forms.py
+++ b/fala/apps/adviser/forms.py
@@ -1,6 +1,8 @@
 # coding=utf-8
 from django import forms
 from django.utils.translation import gettext_lazy as _
+from django.utils.safestring import mark_safe
+from django.conf import settings
 
 import laalaa.api as laalaa
 import re
@@ -27,14 +29,19 @@ class AdviserSearchForm(forms.Form):
     page = forms.IntegerField(required=False, widget=forms.HiddenInput())
 
     postcode = forms.CharField(
-        label=_("Enter postcode"),
+        label=_("Postcode"),
         max_length=30,
-        help_text=_("For example, <span class='notranslate' translate='no'>SW1H 9AJ</span>"),
+        help_text=_(mark_safe("For example, <span class='notranslate' translate='no'>SW1H</span>")),
         required=False,
         widget=FalaTextInput(),
     )
 
-    name = forms.CharField(label=_("Organisation name"), max_length=100, required=False, widget=FalaTextInput())
+    name = forms.CharField(
+        label=_("Organisation name"),
+        max_length=100,
+        required=False,
+        widget=FalaTextInput(),
+    )
 
     type = forms.MultipleChoiceField(
         label=_("Organisation type"),
@@ -53,6 +60,11 @@ class AdviserSearchForm(forms.Form):
     def __init__(self, *args, **kwargs):
         kwargs.setdefault("label_suffix", "")
         super(AdviserSearchForm, self).__init__(*args, **kwargs)
+        if not settings.FEATURE_FLAG_NO_MAP:
+            self.fields["postcode"].label = _("Enter postcode")
+            self.fields["postcode"].help_text = _(
+                "For example, <span class='notranslate' translate='no'>SW1H 9AJ</span>"
+            )
 
     def clean(self):
         data = self.cleaned_data
diff --git a/fala/apps/adviser/tests/test_search_view_function.py b/fala/apps/adviser/tests/test_search_view_function.py
new file mode 100644
index 00000000..e24db047
--- /dev/null
+++ b/fala/apps/adviser/tests/test_search_view_function.py
@@ -0,0 +1,33 @@
+from django.test import SimpleTestCase, Client, override_settings
+from django.urls import reverse
+
+
+@override_settings(FEATURE_FLAG_NO_MAP=True)
+class SearchViewFunctionTest(SimpleTestCase):
+    client = Client()
+
+    url = reverse("adviser")
+
+    def test_postcode_search(self):
+        response = self.client.get(self.url, {"postcode": "PE31"})
+        self.assertEqual(200, response.status_code)
+
+    def test_invalid_postcode_generates_error(self):
+        response = self.client.get(self.url, {"postcode": "ZZZ"})
+        self.assertEqual({"postcode": ["Postcode not found"]}, response.context_data["form"].errors)
+
+
+@override_settings(FEATURE_FLAG_NO_MAP=True)
+class NewSearchViewTemplate(SimpleTestCase):
+    client = Client()
+
+    def test_template_link_and_css(self):
+        response = self.client.get(reverse("adviser"))
+
+        self.assertEqual(response.status_code, 200)
+
+        # Ensure URL link is in response content
+        self.assertContains(response, "https://www.gov.uk/check-legal-aid")
+
+        # Ensure CSS class is in response content
+        self.assertContains(response, "laa-fala__grey-box")
diff --git a/fala/apps/adviser/views.py b/fala/apps/adviser/views.py
index 2d945fc4..1ff617aa 100644
--- a/fala/apps/adviser/views.py
+++ b/fala/apps/adviser/views.py
@@ -6,8 +6,14 @@
 from .forms import AdviserSearchForm
 
 
+# https://docs.djangoproject.com/en/5.0/topics/class-based-views - documentation on Class-based views
 class AdviserView(TemplateView):
-    template_name = "adviser/search.html"
+    def get_template_names(self) -> list[str]:
+        if settings.FEATURE_FLAG_NO_MAP:
+            template_name = "adviser/search.html"
+        else:
+            template_name = "adviser/search_old.html"
+        return [template_name]
 
     def get(self, request, *args, **kwargs):
         context = self.get_context_data(**kwargs)
@@ -22,6 +28,7 @@ def get(self, request, *args, **kwargs):
                 "current_url": current_url,
                 "GOOGLE_MAPS_API_KEY": settings.GOOGLE_MAPS_API_KEY,
                 "LAALAA_API_HOST": settings.LAALAA_API_HOST,
+                "CHECK_LEGAL_AID_URL": settings.CHECK_LEGAL_AID_URL,
             }
         )
 
diff --git a/fala/assets-src/sass/main.scss b/fala/assets-src/sass/main.scss
index b5eee84f..fd4f47ff 100644
--- a/fala/assets-src/sass/main.scss
+++ b/fala/assets-src/sass/main.scss
@@ -54,7 +54,6 @@ body.govuk-template__body {
   height: auto;
   height: initial;
   display: block;
-  font-family: GDS Transport, Arial, sans-serif; /*temp - remove when all classes updated*/
 }
 
 .govuk-footer__copyright-logo,
@@ -71,6 +70,25 @@ body.govuk-template__body {
   text-transform: uppercase;
 }
 
+.fala-tickbox-columns_new .govuk-checkboxes__item {
+  clear:none;
+  min-width:44.63%;
+}
+
+.fala-tickbox-columns_new .govuk-checkboxes__item label.govuk-checkboxes__label {
+  min-width:100%;
+  overflow-wrap: break-word;
+}
+
+@media only screen and (min-width: 730px) {
+  .fala-tickbox-columns_new .govuk-checkboxes__item label.govuk-checkboxes__label {
+    min-width:100%;
+    inline-size: 150px;
+  }
+}
+
+
+// Remove below CSS once `FEATURE_FLAG_NO_MAP` is removed
 .fala-tickbox-columns .govuk-checkboxes__item {
   clear:none;
   min-width:44.63%;
@@ -92,6 +110,13 @@ body.govuk-template__body {
 .fala-tickbox-columns .govuk-checkboxes__item label.govuk-checkboxes__label {
   min-width:100%;
 }
+// Remove above CSS once `FEATURE_FLAG_NO_MAP` is removed
+
+.govuk-checkboxes__label {
+  &::before {
+    background-color: govuk-colour("white");
+  }
+}
 
 /*below override for archaic class*/
 p.govuk-body:last-child,
@@ -183,7 +208,14 @@ body.fala-dev {
   max-width: 140px;
 }
 
-.laa-fala__search {
+.laa-fala {
+  &__search {
   margin-top:1em;
   clear:both;
+  }
+
+  &__grey-box {
+    background-color: govuk-colour("light-grey"); 
+    padding: 1em;
+  }
 }
diff --git a/fala/settings/base.py b/fala/settings/base.py
index 45b5c2eb..3edad684 100644
--- a/fala/settings/base.py
+++ b/fala/settings/base.py
@@ -228,6 +228,8 @@ def root(*x):
 
 GOOGLE_MAPS_API_KEY = os.environ.get("GOOGLE_MAPS_API_KEY", "")
 
+CHECK_LEGAL_AID_URL = "https://www.gov.uk/check-legal-aid"
+
 # .local.py overrides all the common settings.
 try:
     from .local import *  # noqa: F401,F403
diff --git a/fala/templates/adviser/search.html b/fala/templates/adviser/search.html
index 2fc64fb0..20053b38 100644
--- a/fala/templates/adviser/search.html
+++ b/fala/templates/adviser/search.html
@@ -7,70 +7,90 @@
 {% import "macros/element.html" as Element %}
 {% import "macros/forms.html" as Form %}
 
-{% block search_form %}
-  <form action="" class="laa-fala__search" novalidate>
-    <div
-      class="govuk-form-group
-        {% if (form.errors and form.errors['__all__']) %}
-          govuk-form-group--error
-        {% endif %}
-        "
-      id="fala_questions">
+{% block content %}
+  <div class="govuk-grid-column-two-thirds">
+      <div id="google_translate_element" class="govuk-!-margin-bottom-6"></div>
+      <h1 class="govuk-heading-xl"> Find a legal aid adviser or family mediator </h1>
+      <p class="govuk-body">You need to provide information about your finances to find out if you qualify for legal aid.</p>
+      <p class="govuk-body"><a class="govuk-link" href="{{ CHECK_LEGAL_AID_URL }}" target="_blank" rel="noopener">Check if you qualify for legal aid (opens in a new tab)</a></p>
+  </div>
 
-      {% set errorMessage = {'err': ""} %}
+  {% block search_form %}
+      <div class="govuk-grid-column-full">
+        <div class="laa-fala__grey-box">
+          <form action="" novalidate>
+            <div
+              class="govuk-form-group
+                {% if (form.errors and form.errors['__all__']) %}
+                  govuk-form-group--error
+                {% endif %}
+                "
+              id="fala_questions">
 
-      {% if form.errors and form.errors['__all__'] %}
-        {% call Element.errorText() %}
-          {% for k, error in form.errors.items() %}
-            {% if errorMessage.update({'err': error | striptags}) %}{% endif %}
-          {% endfor %}
-        {% endcall %}
-      {% endif %}
+              {% set errorMessage = {'err': ""} %}
 
-      {% if (form.errors and form.errors['__all__']) %}
-        {% call Form.group(form.postcode, 'govuk-form-group', {'class':'govuk-input--error'}, hide_optional=True, global_error=errorMessage.err) %}
-        {% endcall %}
-        {% call Form.group(form.name, 'govuk-form-group', {'class':'govuk-input--error'}, hide_optional=True, max_length='100', global_error_hidden=errorMessage.err) %}
-        {% endcall %}
-      {% else %}
-        {% call Form.group(form.postcode, 'govuk-form-group', hide_optional=True) %}
-        {% endcall %}
-        {% call Form.group(form.name, 'govuk-form-group', hide_optional=True, max_length='100') %}
-        {% endcall %}
-      {% endif %}
-    </div>
-    <button type="submit" class="govuk-button" id="searchButton" name="search">Search</button>
+              {% if form.errors and form.errors['__all__'] %}
+                {% call Element.errorText() %}
+                  {% for k, error in form.errors.items() %}
+                    {% if errorMessage.update({'err': error | striptags}) %}{% endif %}
+                  {% endfor %}
+                {% endcall %}
+              {% endif %}
 
-    <div class="form-group filters">
-      <div class="govuk-form-group">
-        <fieldset class="govuk-fieldset">
-          <legend class="govuk-fieldset__legend govuk-fieldset__legend--m">
-            <h2 class="govuk-fieldset__heading">
-              Filter by category
-            </h2>
-          </legend>
-          <div class="govuk-checkboxes govuk-checkboxes--small fala-tickbox-columns">
-            {% for value, label_text in form.categories.field.choices %}
-              <div class="govuk-checkboxes__item">
-                <input
-                  class="govuk-checkboxes__input"
-                  id="id_categories_{{ loop.index0 }}"
-                  name="categories"
-                  type="checkbox"
-                  value="{{ value }}"
-                  {% if value in request.GET.getlist('categories','') %}
-                    checked
-                  {% endif %}
-                >
-                <label class="govuk-label govuk-checkboxes__label" for="id_categories_{{ loop.index0 }}">
-                  {{ label_text }}
-                </label>
+              {% if (form.errors and form.errors['__all__']) %}
+                {% call Form.group(form.postcode, 'govuk-form-group', {'class':'govuk-input--error'}, hide_optional=True, global_error=errorMessage.err) %}
+                {% endcall %}
+                <p class="govuk-body">Or</p>
+                {% call Form.group(form.name, 'govuk-form-group', {'class':'govuk-input--error'}, hide_optional=True, max_length='100', global_error_hidden=errorMessage.err) %}
+                {% endcall %}
+              {% else %}
+                {% call Form.group(form.postcode, 'govuk-form-group', hide_optional=True) %}
+                {% endcall %}
+                <p class="govuk-body">Or</p>
+                {% call Form.group(form.name, 'govuk-form-group', hide_optional=True, max_length='100') %}
+                {% endcall %}
+              {% endif %}
+            </div>
+            
+            <div class="form-group filters">
+              <div class="govuk-form-group">
+                <fieldset class="govuk-fieldset">
+                  <legend class="govuk-fieldset__legend govuk-fieldset__legend--m">
+                    <label class="govuk-label govuk-label--s">
+                      Catgories of law (optional)
+                    </label>
+                  </legend>
+                  <div class="govuk-checkboxes govuk-checkboxes--small fala-tickbox-columns_new">
+                    {% for value, label_text in form.categories.field.choices %}
+                      <div class="govuk-checkboxes__item">
+                        <input
+                          class="govuk-checkboxes__input"
+                          id="id_categories_{{ loop.index0 }}"
+                          name="categories"
+                          type="checkbox"
+                          value="{{ value }}"
+                          {% if value in request.GET.getlist('categories','') %}
+                            checked
+                          {% endif %}
+                        >
+                        <label class="govuk-label govuk-checkboxes__label" for="id_categories_{{ loop.index0 }}">
+                          {{ label_text }}
+                        </label>
+                      </div>
+                    {% endfor %}
+                  </div>
+                </fieldset>
               </div>
-            {% endfor %}
-          </div>
-        </fieldset>
+              <button type="submit" class="govuk-button govuk-!-margin-bottom-2" id="searchButton" name="search">Search</button>
+            </div>
+          </form>
+        </div>
       </div>
-      <button type="submit" class="govuk-button govuk-button--secondary" name="filter">Apply filter</button>
+  {% endblock %}
+
+    <div class="govuk-grid-column-full">
+      <p class="govuk-body govuk-!-margin-top-5">If you are a provider and your details are incorrect, please contact your contract manager.</p>
     </div>
-  </form>
 {% endblock %}
+
+
diff --git a/fala/templates/adviser/search_old.html b/fala/templates/adviser/search_old.html
new file mode 100644
index 00000000..2fc64fb0
--- /dev/null
+++ b/fala/templates/adviser/search_old.html
@@ -0,0 +1,76 @@
+{% if request.headers.get('x-requested-with') == 'XMLHttpRequest' %}
+  {% extends 'ajax-base.html' %}
+{% else %}
+  {% extends 'base.html' %}
+{% endif %}
+
+{% import "macros/element.html" as Element %}
+{% import "macros/forms.html" as Form %}
+
+{% block search_form %}
+  <form action="" class="laa-fala__search" novalidate>
+    <div
+      class="govuk-form-group
+        {% if (form.errors and form.errors['__all__']) %}
+          govuk-form-group--error
+        {% endif %}
+        "
+      id="fala_questions">
+
+      {% set errorMessage = {'err': ""} %}
+
+      {% if form.errors and form.errors['__all__'] %}
+        {% call Element.errorText() %}
+          {% for k, error in form.errors.items() %}
+            {% if errorMessage.update({'err': error | striptags}) %}{% endif %}
+          {% endfor %}
+        {% endcall %}
+      {% endif %}
+
+      {% if (form.errors and form.errors['__all__']) %}
+        {% call Form.group(form.postcode, 'govuk-form-group', {'class':'govuk-input--error'}, hide_optional=True, global_error=errorMessage.err) %}
+        {% endcall %}
+        {% call Form.group(form.name, 'govuk-form-group', {'class':'govuk-input--error'}, hide_optional=True, max_length='100', global_error_hidden=errorMessage.err) %}
+        {% endcall %}
+      {% else %}
+        {% call Form.group(form.postcode, 'govuk-form-group', hide_optional=True) %}
+        {% endcall %}
+        {% call Form.group(form.name, 'govuk-form-group', hide_optional=True, max_length='100') %}
+        {% endcall %}
+      {% endif %}
+    </div>
+    <button type="submit" class="govuk-button" id="searchButton" name="search">Search</button>
+
+    <div class="form-group filters">
+      <div class="govuk-form-group">
+        <fieldset class="govuk-fieldset">
+          <legend class="govuk-fieldset__legend govuk-fieldset__legend--m">
+            <h2 class="govuk-fieldset__heading">
+              Filter by category
+            </h2>
+          </legend>
+          <div class="govuk-checkboxes govuk-checkboxes--small fala-tickbox-columns">
+            {% for value, label_text in form.categories.field.choices %}
+              <div class="govuk-checkboxes__item">
+                <input
+                  class="govuk-checkboxes__input"
+                  id="id_categories_{{ loop.index0 }}"
+                  name="categories"
+                  type="checkbox"
+                  value="{{ value }}"
+                  {% if value in request.GET.getlist('categories','') %}
+                    checked
+                  {% endif %}
+                >
+                <label class="govuk-label govuk-checkboxes__label" for="id_categories_{{ loop.index0 }}">
+                  {{ label_text }}
+                </label>
+              </div>
+            {% endfor %}
+          </div>
+        </fieldset>
+      </div>
+      <button type="submit" class="govuk-button govuk-button--secondary" name="filter">Apply filter</button>
+    </div>
+  </form>
+{% endblock %}
diff --git a/fala/templates/generic-py-base.html b/fala/templates/generic-py-base.html
index 3db96159..f5e39827 100644
--- a/fala/templates/generic-py-base.html
+++ b/fala/templates/generic-py-base.html
@@ -72,7 +72,7 @@
     <div class="govuk-width-container">
       {% block global_subheader %}{% endblock %}
       <main id="main-content" class="govuk-main-wrapper" role="main">
-        <div class="container govuk-grid-row">
+        <div class="govuk-grid-row">
           {% block content %}{% endblock %}
         </div>
       </main>
diff --git a/fala/templates/macros/forms.html b/fala/templates/macros/forms.html
index cac88145..b25cba57 100644
--- a/fala/templates/macros/forms.html
+++ b/fala/templates/macros/forms.html
@@ -90,7 +90,7 @@
     {% endif %}
 
     <div class="form-group-label{{ (' govuk-visually-hidden' if hide_label else '') }}">
-      <label class="govuk-label" for="{{ field.id_for_label }}">{{ label_text|safe }}</label>
+      <label class="govuk-label govuk-label--s" for="{{ field.id_for_label }}">{{ label_text|safe }}</label>
     </div>
   {% endif %}
 {% endmacro %}
diff --git a/kubernetes_deploy/staging/deployment.yml b/kubernetes_deploy/staging/deployment.yml
index 86f78a59..b5091c02 100644
--- a/kubernetes_deploy/staging/deployment.yml
+++ b/kubernetes_deploy/staging/deployment.yml
@@ -68,4 +68,4 @@ spec:
               name: s3
               key: bucket_name
         - name: FEATURE_FLAG_NO_MAP
-          value: "false"
+          value: "true"