Use date picker component in log forms

app/controllers/form_controller.rb

@@ -138,9 +138,9 @@ private
     page.questions.each_with_object({}) do |question, result|
       question_params = params[@log.model_name.param_key][question.id]
       if question.type == "date"
-        day = params[@log.model_name.param_key]["#{question.id}(3i)"]
+        day = params[@log.model_name.param_key][question.id].split("/")[0]
-        month = params[@log.model_name.param_key]["#{question.id}(2i)"]
+        month = params[@log.model_name.param_key][question.id].split("/")[1]
-        year = params[@log.model_name.param_key]["#{question.id}(1i)"]
+        year = params[@log.model_name.param_key][question.id].split("/")[2]
         next unless [day, month, year].any?(&:present?)
 
         result[question.id] = if Date.valid_date?(year.to_i, month.to_i, day.to_i) && year.to_i.positive?
@@ -160,7 +160,7 @@ private
         question.answer_keys_without_dividers.each do |option|
           result[option] = question_params.include?(option) ? 1 : 0
         end
-      else
+      elsif question.type != "date"
         result[question.id] = question_params
       end
 

app/models/lettings_log.rb

@@ -735,6 +735,10 @@ class LettingsLog < Log
     scheme_locations_count > 19
   end
 
+  def log_type
+    "lettings_log"
+  end
+
 private
 
   def reset_invalid_unresolved_log_fields!

app/models/sales_log.rb

@@ -538,4 +538,8 @@ class SalesLog < Log
   def is_firststair?
     firststair == 1
   end
+
+  def log_type
+    "sales_log"
+  end
 end

app/views/form/_date_question.html.erb

@@ -1,12 +1,29 @@
 <%= render partial: "form/guidance/#{question.top_guidance_partial}" if question.top_guidance? %>
 
-<%= f.govuk_date_field question.id.to_sym,
+<div class="moj-datepicker" data-module="moj-date-picker">
-  caption: caption(caption_text, page_header, conditional),
+  <% question_has_errors = @log.errors[question.id].any? %>
-  legend: legend(question, page_header, conditional),
+  <div class="govuk-form-group<%= " govuk-form-group--error" if question_has_errors %>">
-  hint: { text: (question.hint_text.blank? ? "" : (question.hint_text.html_safe + "</br></br>".html_safe)) + "For example, #{date_mid_collection_year_formatted(@log.startdate)}" },
+    <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
-  width: 20,
+      <h1 class="govuk-fieldset__heading">
-  **stimulus_html_attributes(question) do %>
+        <span class="govuk-caption-l">
-  <%= govuk_inset_text(text: question.unresolved_hint_text) if question.unresolved_hint_text.present? && @log.unresolved %>
+          <% caption = caption(caption_text, page_header, conditional) %>
-<% end %>
+          <%= caption[:text] if caption.present? %>
+        </span>
+        <%= legend(question, page_header, conditional)[:text] %>
+      </h1>
+    </legend>
+
+    <div id=<%= [@log.log_type.dasherize, question.id.dasherize, "hint"].join("-") %> class="govuk-hint">
+      <%= (question.hint_text.blank? ? "" : (question.hint_text.html_safe + "</br></br>".html_safe)) + "For example, #{date_mid_collection_year_formatted(@log.startdate).tr(' ', '/')}" %>
+    </div>
+    <% if question_has_errors %>
+    <p id=<%= [@log.log_type.dasherize, question.id.dasherize, "error"].join("-") %>>
+      <span class="govuk-visually-hidden">Error:</span> <%= @log.errors[question.id].first %>
+    </p>
+    <% end %>
+    <%= f.text_field question.id.to_sym, class: "govuk-input moj-js-datepicker-input#{' govuk-input--error' if question_has_errors}", id: "date", aria: { describedby: "date-hint#{' date-error' if question_has_errors}" }, autocomplete: "off", value: @log[question.id]&.strftime("%d/%m/%Y") %>
+  </div>
+</div>
+<%= govuk_inset_text(text: question.unresolved_hint_text) if question.unresolved_hint_text.present? && @log.unresolved %>
 
 <%= render partial: "form/guidance/#{question.bottom_guidance_partial}" if question.bottom_guidance? %>

spec/features/form/page_routing_spec.rb

@@ -95,50 +95,36 @@ RSpec.describe "Form Page Routing" do
       it "does not reset the displayed date if it's an invalid date" do
         lettings_log.update!(startdate: "2021/10/13")
         visit("/lettings-logs/#{id}/tenancy-start-date")
-        fill_in("lettings_log[startdate(1i)]", with: "202")
+        fill_in("lettings_log[startdate]", with: "0/32/202")
-        fill_in("lettings_log[startdate(2i)]", with: "32")
-        fill_in("lettings_log[startdate(3i)]", with: "0")
         click_button("Save and continue")
 
         expect(page).to have_current_path("/lettings-logs/#{id}/tenancy-start-date")
-        expect(find_field("lettings_log[startdate(3i)]").value).to eq("13")
+        expect(find_field("lettings_log[startdate]").value).to eq("13/10/2021")
-        expect(find_field("lettings_log[startdate(2i)]").value).to eq("10")
-        expect(find_field("lettings_log[startdate(1i)]").value).to eq("2021")
       end
 
       it "displays the entered date if it's in a valid format" do
         lettings_log.update!(startdate: "2021/10/13")
         visit("/lettings-logs/#{id}/tenancy-start-date")
-        fill_in("lettings_log[startdate(1i)]", with: "202")
+        fill_in("lettings_log[startdate]", with: "1/12/202")
-        fill_in("lettings_log[startdate(2i)]", with: "12")
-        fill_in("lettings_log[startdate(3i)]", with: "1")
         click_button("Save and continue")
 
         expect(page).to have_current_path("/lettings-logs/#{id}/tenancy-start-date")
-        expect(find_field("lettings_log[startdate(3i)]").value).to eq("1")
+        expect(find_field("lettings_log[startdate]").value).to eq("01/12/0202")
-        expect(find_field("lettings_log[startdate(2i)]").value).to eq("12")
-        expect(find_field("lettings_log[startdate(1i)]").value).to eq("202")
       end
 
       it "does not reset the displayed date if it's empty" do
         lettings_log.update!(startdate: nil)
         visit("/lettings-logs/#{id}/tenancy-start-date")
-        fill_in("lettings_log[startdate(1i)]", with: "202")
+        fill_in("lettings_log[startdate]", with: "0/32/202")
-        fill_in("lettings_log[startdate(2i)]", with: "32")
-        fill_in("lettings_log[startdate(3i)]", with: "0")
         click_button("Save and continue")
 
         expect(page).to have_current_path("/lettings-logs/#{id}/tenancy-start-date")
-        expect(find_field("lettings_log[startdate(3i)]").value).to eq(nil)
+        expect(find_field("lettings_log[startdate]").value).to eq(nil)
-        expect(find_field("lettings_log[startdate(2i)]").value).to eq(nil)
-        expect(find_field("lettings_log[startdate(1i)]").value).to eq(nil)
       end
 
       it "does not show see all related answers link if only 1 field has an error" do
         visit("/lettings-logs/#{id}/tenancy-start-date")
-        fill_in("lettings_log[startdate(1i)]", with: "202")
+        fill_in("lettings_log[startdate]", with: "0/32/202")
-        fill_in("lettings_log[startdate(2i)]", with: "32")
-        fill_in("lettings_log[startdate(3i)]", with: "0")
         click_button("Save and continue")
 
         expect(page).not_to have_link("See all related answers")

spec/features/form/validations_spec.rb

@@ -63,9 +63,7 @@ RSpec.describe "validations" do
   describe "date validation", js: true do
     def fill_in_date(lettings_log_id, question, day, month, year, path)
       visit("/lettings-logs/#{lettings_log_id}/#{path}")
-      fill_in("lettings_log[#{question}(1i)]", with: year)
+      fill_in("lettings_log[#{question}]", with: [day, month, year].join("/"))
-      fill_in("lettings_log[#{question}(2i)]", with: month)
-      fill_in("lettings_log[#{question}(3i)]", with: day)
     end
 
     it "does not allow out of range dates to be submitted" do

spec/features/sales_log_spec.rb

@@ -34,9 +34,8 @@ RSpec.describe "Sales Log Features" do
         it "includes the purchaser code and sale completion date questions" do
           click_button "Create a new sales log"
           click_link "Set up this sales log"
-          fill_in("sales_log[saledate(1i)]", with: Time.zone.today.year)
+          date = Time.zone.today.strftime("%d/%m/%Y")
-          fill_in("sales_log[saledate(2i)]", with: Time.zone.today.month)
+          fill_in("sales_log[saledate]", with: date)
-          fill_in("sales_log[saledate(3i)]", with: Time.zone.today.day)
           click_button "Save and continue"
           fill_in "sales_log[purchid]", with: "PC123"
           click_button "Save and continue"

spec/requests/form_controller_spec.rb

@@ -329,9 +329,7 @@ RSpec.describe FormController, type: :request do
           id: sales_log.id,
           sales_log: {
             page: "completion_date",
-            "saledate(3i)" => 30,
+            "saledate" => "30/6/2023",
-            "saledate(2i)" => 6,
-            "saledate(1i)" => 2023,
           },
         }
       end
@@ -609,9 +607,7 @@ RSpec.describe FormController, type: :request do
                 id: lettings_log.id,
                 lettings_log: {
                   page: page_id,
-                  "startdate(3i)" => 31,
+                  "startdate" => "31/6/2022",
-                  "startdate(2i)" => 6,
-                  "startdate(1i)" => 2022,
                 },
               }
             end
@@ -635,9 +631,7 @@ RSpec.describe FormController, type: :request do
                   id: lettings_log.id,
                   lettings_log: {
                     page: page_id,
-                    "startdate(3i)" => 1,
+                    "startdate" => "1/1/1",
-                    "startdate(2i)" => 1,
-                    "startdate(1i)" => 1,
                   },
                 }
               end
@@ -658,9 +652,7 @@ RSpec.describe FormController, type: :request do
                   id: sales_log.id,
                   sales_log: {
                     page: page_id,
-                    "saledate(3i)" => 1,
+                    "saledate" => "1/1/1",
-                    "saledate(2i)" => 1,
-                    "saledate(1i)" => 1,
                   },
                 }
               end
@@ -687,9 +679,7 @@ RSpec.describe FormController, type: :request do
                   id: lettings_log.id,
                   lettings_log: {
                     page: page_id,
-                    "startdate(3i)" => 1,
+                    "startdate" => "1/1/1",
-                    "startdate(2i)" => 1,
-                    "startdate(1i)" => 1,
                   },
                 }
               end
@@ -708,9 +698,7 @@ RSpec.describe FormController, type: :request do
                   id: sales_log.id,
                   sales_log: {
                     page: page_id,
-                    "saledate(3i)" => 1,
+                    "saledate" => "1/1/1",
-                    "saledate(2i)" => 1,
-                    "saledate(1i)" => 1,
                   },
                 }
               end
@@ -1326,9 +1314,7 @@ RSpec.describe FormController, type: :request do
               id: sales_log.id,
               sales_log: {
                 page: "completion_date",
-                "saledate(3i)" => 30,
+                "saledate" => "30/6/2023",
-                "saledate(2i)" => 6,
-                "saledate(1i)" => 2023,
               },
             }
           end
@@ -1364,9 +1350,7 @@ RSpec.describe FormController, type: :request do
               id: sales_log.id,
               sales_log: {
                 page: "completion_date",
-                "saledate(3i)" => 30,
+                "saledate" => "30/06/2024",
-                "saledate(2i)" => 6,
-                "saledate(1i)" => 2024,
               },
             }
           end