Refactor date_picker into component, add date_picker to location startdate

app/controllers/locations_controller.rb

@@ -137,9 +137,9 @@ class LocationsController < ApplicationController
   def availability; end
 
   def update_availability
-    day = location_params["startdate(3i)"]
-    month = location_params["startdate(2i)"]
-    year = location_params["startdate(1i)"]
+    day = location_params["startdate"].split("/")[0]
+    month = location_params["startdate"].split("/")[1]
+    year = location_params["startdate"].split("/")[2]
     @location.startdate = if [day, month, year].none?(&:blank?) && Date.valid_date?(year.to_i, month.to_i, day.to_i)
                             Time.zone.local(year.to_i, month.to_i, day.to_i)
                           end
@@ -258,7 +258,7 @@ private
   end
 
   def location_params
-    required_params = params.require(:location).permit(:postcode, :location_admin_district, :location_code, :name, :units, :type_of_unit, :mobility_type, "startdate(1i)", "startdate(2i)", "startdate(3i)").merge(scheme_id: @scheme.id)
+    required_params = params.require(:location).permit(:postcode, :location_admin_district, :location_code, :name, :units, :type_of_unit, :mobility_type, :startdate).merge(scheme_id: @scheme.id)
     required_params[:postcode] = PostcodeService.clean(required_params[:postcode]) if required_params[:postcode]
     required_params[:location_admin_district] = nil if required_params[:location_admin_district] == "Select an option"
     required_params

app/views/components/_date_picker.html.erb

@@ -0,0 +1,25 @@
+<div class="moj-datepicker" data-module="moj-date-picker">
+  <% question_has_errors = resource.errors[question_id].any? %>
+  <div class="govuk-form-group<%= " govuk-form-group--error" if question_has_errors %>">
+    <% if legend.present? %>
+        <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
+        <h1 class="govuk-fieldset__heading">
+            <span class="govuk-caption-l">
+            <%= legend[:caption][:text] if legend[:caption].present? %>
+            </span>
+            <%= legend[:text] %>
+        </h1>
+        </legend>
+    <% end %>
+
+    <div id=<%= [resource_type.dasherize, question_id.dasherize, "hint"].join("-") %>>
+        <%= hint %>
+    </div>
+    <% if question_has_errors %>
+    <p id=<%= [resource_type.dasherize, question_id.dasherize, "error"].join("-") %>>
+      <span class="govuk-visually-hidden">Error:</span> <%= resource.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: [resource_type, question_id].join("_"), aria: { describedby: "#{[resource_type, question_id].join('_')}-hint#{"#{[resource_type, question_id].join('_')} -error" if question_has_errors}" }, autocomplete: "off", value: resource[question_id]&.strftime("%d/%m/%Y") %>
+  </div>
+</div>

app/views/form/_date_question.html.erb

@@ -1,29 +1,14 @@
 <%= render partial: "form/guidance/#{question.top_guidance_partial}" if question.top_guidance? %>
+<%= render partial: "components/date_picker", locals:
+        {
+          resource: @log,
+          question_id: question.id,
+          legend: { text: legend(question, page_header, conditional)[:text], caption: caption(caption_text, page_header, conditional) },
+          resource_type: @log.log_type,
+          hint: (question.hint_text.blank? ? "" : (question.hint_text.html_safe + "</br></br>".html_safe)) + "For example, #{date_mid_collection_year_formatted(@log.startdate).tr(' ', '/')}",
+          f:,
+        } %>
 
-<div class="moj-datepicker" data-module="moj-date-picker">
-  <% question_has_errors = @log.errors[question.id].any? %>
-  <div class="govuk-form-group<%= " govuk-form-group--error" if question_has_errors %>">
-    <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
-      <h1 class="govuk-fieldset__heading">
-        <span class="govuk-caption-l">
-          <% caption = caption(caption_text, page_header, conditional) %>
-          <%= 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? %>

app/views/locations/availability.erb

@@ -12,11 +12,13 @@
       <%= f.govuk_error_summary %>
 
       <%= render partial: "organisations/headings", locals: { main: I18n.t("questions.location.startdate"), sub: "Add a location to #{@scheme.service_name}" } %>
-
-      <%= f.govuk_date_field :startdate,
-                             hint: { text: I18n.t("hints.location.startdate") },
+      <%= render partial: "components/date_picker", locals: { 
+        resource: @location,
+        question_id: "startdate",
         legend: nil,
-                             width: 20 %>
+        resource_type: "location",
+        hint: I18n.t("hints.location.startdate"),
+        f: } %>
 
       <div class="govuk-button-group">
         <% if params[:referrer] == "check_answers" %>

spec/requests/locations_controller_spec.rb

@@ -1151,7 +1151,7 @@ RSpec.describe LocationsController, type: :request do
       end
 
       context "when startdate is submitted" do
-        let(:params) { { location: { "startdate(1i)": "2022", "startdate(2i)": "1", "startdate(3i)": "2" } } }
+        let(:params) { { location: { "startdate": "2/1/2022" } } }
 
         before do
           patch "/schemes/#{scheme.id}/locations/#{location.id}/availability", params:
@@ -1168,7 +1168,7 @@ RSpec.describe LocationsController, type: :request do
       end
 
       context "when startdate is submitted with leading zeroes" do
-        let(:params) { { location: { "startdate(1i)": "2022", "startdate(2i)": "01", "startdate(3i)": "02" } } }
+        let(:params) { { location: { "startdate": "02/01/2022" } } }
 
         before do
           patch "/schemes/#{scheme.id}/locations/#{location.id}/availability", params:
@@ -1185,7 +1185,7 @@ RSpec.describe LocationsController, type: :request do
       end
 
       context "when startdate is missing" do
-        let(:params) { { location: { "startdate(1i)": "", "startdate(2i)": "", "startdate(3i)": "" } } }
+        let(:params) { { location: { "startdate": "" } } }
 
         before do
           patch "/schemes/#{scheme.id}/locations/#{location.id}/availability", params:
@@ -1225,7 +1225,7 @@ RSpec.describe LocationsController, type: :request do
       end
 
       context "when startdate is submitted" do
-        let(:params) { { location: { "startdate(1i)": "2022", "startdate(2i)": "1", "startdate(3i)": "2" } } }
+        let(:params) { { location: { "startdate": "2/1/2022" } } }
 
         before do
           patch "/schemes/#{scheme.id}/locations/#{location.id}/availability", params:
@@ -1242,7 +1242,7 @@ RSpec.describe LocationsController, type: :request do
       end
 
       context "when startdate is submitted with leading zeroes" do
-        let(:params) { { location: { "startdate(1i)": "2022", "startdate(2i)": "01", "startdate(3i)": "02" } } }
+        let(:params) { { location: { "startdate": "02/01/2022" } } }
 
         before do
           patch "/schemes/#{scheme.id}/locations/#{location.id}/availability", params:
@@ -1259,7 +1259,7 @@ RSpec.describe LocationsController, type: :request do
       end
 
       context "when startdate is missing" do
-        let(:params) { { location: { "startdate(1i)": "", "startdate(2i)": "", "startdate(3i)": "" } } }
+        let(:params) { { location: { "startdate": "" } } }
 
         before do
           patch "/schemes/#{scheme.id}/locations/#{location.id}/availability", params: