fix date component

uktrade · Jan 15, 2025 · f1ad403 · f1ad403
1 parent a737dee
commit f1ad403
Show file tree

Hide file tree

Showing 5 changed files with 114 additions and 59 deletions.
diff --git a/exporter/applications/forms/export_details.py b/exporter/applications/forms/export_details.py
@@ -135,7 +135,7 @@ def proposed_product_return_date_form():
         title=TemporaryExportDetails.PROPOSED_RETURN_DATE,
         questions=[
             DateInput(
-                title="",
+                title="Return to the UK Date",
                 short_title=TemporaryExportDetails.SummaryList.PROPOSED_RETURN_DATE,
                 description=f"For example, 12 11 {datetime.datetime.now().year + 1}",
                 name="proposed_return_date",

diff --git a/exporter/core/constants.py b/exporter/core/constants.py
@@ -168,7 +168,7 @@ class SummaryList:
         TITLE = "Temporary export details summary list"
         TEMPORARY_EXPORT_DETAILS = "Explain why the products are being exported temporarily"
         PRODUCTS_UNDER_DIRECT_CONTROL = "Will the products remain under your direct control while overseas?"
-        PROPOSED_RETURN_DATE = "Proposed date the products will return to the UK"
+        PROPOSED_RETURN_DATE = " return to the UK"
 
     class CheckYourAnswers:
         TEMPORARY_EXPORT_DETAILS = "Explain why the products are being exported temporarily"

diff --git a/lite_forms/templates/components.html b/lite_forms/templates/components.html
@@ -7,7 +7,7 @@
 						govuk-form-group--error
 					{% endif %}
 			{% endif %}">
-	{% if question.title %}
+	{% if question.title and question.input_type != "date" %}
 		<label class="govuk-label" for="{{ question.name }}">
 			{{ question.title }}
 			{% if question.optional %}
@@ -17,7 +17,7 @@
 			{% endif %}
 		</label>
 	{% endif %}
-	{% if question.description %}
+	{% if question.description and question.input_type != "date" %}
 		<span class="govuk-hint" for="{{ question.name }}">
 			<span>{{ question.description|safe }}</span>
 		</span>

diff --git a/lite_forms/templates/components/date.html b/lite_forms/templates/components/date.html
@@ -1,57 +1,65 @@
-<div class="govuk-form-group">
-    <div class="govuk-date-input" id="date_of_issue">
-        <div class="govuk-date-input__item">
-
-            <div class="govuk-form-group">
-                <label class="govuk-label govuk-date-input__label {% if component.inline_title %}govuk-visually-hidden{% endif %}" for="{{ component.prefix }}day">
-                    Day
-                </label>
-                <input class="govuk-input govuk-date-input__input govuk-input--width-2
-							{% if component.prefix in errors or component.prefix|add:component.name in errors%}
-								govuk-input--error
-							{% endif %}"
-					   id="{{ component.prefix }}day"
-					   name="{{ component.prefix }}day"
-					   type="number"
-					   value="{{ data.day }}"
-					   {% if component.inline_title %}placeholder="Day {{component.suffix}}"{% endif %}
-
-				/>
-            </div>
-        </div>
-        <div class="govuk-date-input__item">
-            <div class="govuk-form-group">
-                <label class="govuk-label govuk-date-input__label {% if component.inline_title %}govuk-visually-hidden{% endif %}" for="{{ component.prefix }}month">
-                    Month
-                </label>
+<fieldset class="govuk-fieldset" role="group" aria-describedby="date_of_issue-hint">
+	<legend class="govuk-fieldset__legend govuk-fieldset__legend–l">
+		<h1 class="govuk-fieldset__heading">
+			{{ component.title }}
+		</h1>
+	</legend>
+	<div id="return-date-hint" class="govuk-hint">
+		{{ component.description }}
+	</div>
+	<div class="govuk-date-input" id="return-date">
+		<div class="govuk-date-input__item">
+			<div class="govuk-form-group">
+				<label class="govuk-label govuk-date-input__label {% if component.inline_title %}govuk-visually-hidden{% endif %}" for="{{ component.prefix }}day">
+					Day
+				</label>
 				<input class="govuk-input govuk-date-input__input govuk-input--width-2
-							{% if component.prefix in errors or component.prefix|add:component.name in errors%}
-								govuk-input--error
-							{% endif %}"
-					   id="{{ component.prefix }}month"
-					   name="{{ component.prefix }}month"
-					   type="number"
-					   value="{{ data.month }}"
-					   {% if component.inline_title %}placeholder="Month {{component.suffix}}"{% endif %}
-				/>
-            </div>
-        </div>
-        <div class="govuk-date-input__item">
-            <div class="govuk-form-group">
-                <label class="govuk-label govuk-date-input__label {% if component.inline_title %}govuk-visually-hidden{% endif %}" for="{{ component.prefix }}year">
-                    Year
-                </label>
-				<input class="govuk-input govuk-date-input__input govuk-input--width-3
-							{% if component.prefix in errors or component.prefix|add:component.name in errors%}
-								govuk-input--error
-							{% endif %}"
-					   id="{{ component.prefix }}year"
-					   name="{{ component.prefix }}year"
-					   type="number"
-					   value="{{ data.year }}"
-					   {% if component.inline_title %}placeholder="Year {{component.suffix}}"{% endif %}
+					{% if component.prefix in errors or component.prefix|add:component.name in errors%}
+						govuk-input--error
+					{% endif %}"
+					id="{{ component.prefix }}day"
+					name="{{ component.prefix }}day"
+					type="text"
+					inputmode="numeric"
+					value="{{ data.day }}"
+					{% if component.inline_title %}placeholder="Day {{component.suffix}}"{% endif %}
 				/>
-            </div>
-        </div>
-    </div>
-</div>
+			</div>
+		</div>
+	<div class="govuk-date-input__item">
+		<div class="govuk-form-group">
+			<label class="govuk-label govuk-date-input__label {% if component.inline_title %}govuk-visually-hidden{% endif %}" for="{{ component.prefix }}month">
+				Month
+			</label>
+			<input class="govuk-input govuk-date-input__input govuk-input--width-2
+						{% if component.prefix in errors or component.prefix|add:component.name in errors%}
+							govuk-input--error
+						{% endif %}"
+				   id="{{ component.prefix }}month"
+				   name="{{ component.prefix }}month"
+				   type="text"
+				   inputmode="numeric"
+				   value="{{ data.month }}"
+				   {% if component.inline_title %}placeholder="Month {{component.suffix}}"{% endif %}
+			/>
+		</div>
+	</div>
+	<div class="govuk-date-input__item">
+		<div class="govuk-form-group">
+			<label class="govuk-label govuk-date-input__label {% if component.inline_title %}govuk-visually-hidden{% endif %}" for="{{ component.prefix }}year">
+				Year
+			</label>
+			<input class="govuk-input govuk-date-input__input govuk-input--width-3
+						{% if component.prefix in errors or component.prefix|add:component.name in errors%}
+							govuk-input--error
+						{% endif %}"
+				   id="{{ component.prefix }}year"
+				   name="{{ component.prefix }}year"
+				   inputmode="numeric"
+				   type="text"
+				   value="{{ data.year }}"
+				   {% if component.inline_title %}placeholder="Year {{component.suffix}}"{% endif %}
+			/>
+		</div>
+	</div>
+</fieldset>
diff --git a/unit_tests/exporter/applications/views/test_exporter_details.py b/unit_tests/exporter/applications/views/test_exporter_details.py
@@ -0,0 +1,47 @@
+import pytest
+
+from django.urls import reverse
+
+
+@pytest.fixture
+def application_pk(data_standard_case):
+    return data_standard_case["case"]["data"]["id"]
+
+
+@pytest.fixture
+def application_export_details_url(application_pk):
+    return reverse(
+        "applications:export_details",
+        kwargs={
+            "pk": application_pk,
+        },
+    )
+
+
+def test_application_export_details_return_date(
+    authorized_client,
+    mock_application_get,
+    application_export_details_url,
+    requests_mock,
+    application_pk,
+    beautiful_soup,
+):
+
+    requests_mock.put(
+        f"/applications/{application_pk}/temporary-export-details/",
+        json={},
+    )
+
+    response = authorized_client.post(
+        application_export_details_url,
+        data={
+            "_action": "submit",
+            "goods_starting_point": "GB",
+            "export_type": "temporary",
+            "form_pk": "3",
+        },
+    )
+
+    soup = beautiful_soup(response.content)
+    assert soup.find("legend").label.text.strip() == "Proposed date the products will return to the UK"
+    assert "For example, 12 11" in soup.find(id="return-date-hint").text.strip()