use GOVUK formbuilder for mobile number form

DFE-Digital · Jun 17, 2024 · 61e74ae · 61e74ae
1 parent 22a5f45
commit 61e74ae
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 30 deletions.
diff --git a/app/views/claims/mobile_number.html.erb b/app/views/claims/mobile_number.html.erb
@@ -9,35 +9,25 @@
 
 <div class="govuk-grid-row">
   <div class="govuk-grid-column-two-thirds">
-    <%= render("shared/error_summary", instance: @form) if @form.errors.any? %>
+    <%= form_for @form, url: claim_path(current_journey_routing_name), builder: GOVUKDesignSystemFormBuilder::FormBuilder do |f| %>
+      <%= f.govuk_error_summary %>
 
-    <%= form_for @form, url: claim_path(current_journey_routing_name) do |f| %>
-      <span class="govuk-caption-xl"><%= t("questions.personal_details") %></span>
-      <%= form_group_tag f.object do %>
-        <h1 class="govuk-label-wrapper">
-          <%= f.label(
-            :mobile_number,
-            t("questions.mobile_number"),
-            class: "govuk-label #{label_css_class_for_journey(f.object.journey)}"
-          ) %>
-        </h1>
+      <%= f.govuk_phone_field :mobile_number,
+        spellcheck: "false",
+        caption: {
+          text: t("questions.personal_details"),
+          size: "xl"
+        },
+        label: {
+          text: t("questions.mobile_number"),
+          tag: "h1",
+          size: "xl",
+        },
+        hint: { text: "To verify your mobile number we will send you a text message with a 6-digit passcode. You can enter the passcode on the next screen." } %>
 
-        <div id="mobile-number-hint" class="govuk-hint">
-          To verify your mobile number we will send you a text message with a 6-digit passcode. You can enter the passcode on the next screen.
-        </div>
-
-        <%= errors_tag f.object, :mobile_number %>
-
-        <%= f.text_field(
-          :mobile_number,
-          spellcheck: "false",
-          class: css_classes_for_input(f.object, :mobile_number),
-          "aria-describedby" => "mobile-number-hint"
-        ) %>
-
-      <% end %>
       <%= render "help_with_access_codes", communication_type: "Mobile" %>
-      <%= f.submit "Continue", class: "govuk-button" %>
+
+      <%= f.govuk_submit "Continue" %>
     <% end %>
   </div>
 </div>
diff --git a/spec/features/changing_answers_spec.rb b/spec/features/changing_answers_spec.rb
@@ -417,7 +417,7 @@
         expect(page).not_to have_content("Check your answers before sending your application")
         expect(page).to have_text(I18n.t("questions.mobile_number"))
 
-        fill_in "claim_mobile_number", with: new_mobile
+        fill_in "Mobile number", with: new_mobile
         click_on "Continue"
 
         expect(session.reload.answers.mobile_number).to eql new_mobile

diff --git a/spec/features/claim_with_mobile_sms_otp_spec.rb b/spec/features/claim_with_mobile_sms_otp_spec.rb
@@ -42,7 +42,7 @@
         # - Mobile number
         expect(page).to have_text(I18n.t("questions.mobile_number"))
 
-        fill_in "claim_mobile_number", with: scenario[:mobile_number]
+        fill_in "Mobile number", with: scenario[:mobile_number]
         click_on "Continue"
 
         expect(session.reload.answers.mobile_number).to eql(scenario[:mobile_number])

diff --git a/spec/features/combined_teacher_claim_journey_with_teacher_id_check_mobile_spec.rb b/spec/features/combined_teacher_claim_journey_with_teacher_id_check_mobile_spec.rb
@@ -208,7 +208,7 @@ def provide_alternative_number
     find("#claim_mobile_check_alternative").click
     click_on "Continue"
 
-    fill_in "claim_mobile_number", with: alt_phone_number
+    fill_in "Mobile number", with: alt_phone_number
     click_on "Continue"
 
     fill_in "claim_one_time_password", with: otp_code

diff --git a/spec/features/tslr_claim_journey_with_teacher_id_check_mobile_spec.rb b/spec/features/tslr_claim_journey_with_teacher_id_check_mobile_spec.rb
@@ -197,7 +197,7 @@ def provide_alternative_number
     find("#claim_mobile_check_alternative").click
     click_on "Continue"
 
-    fill_in "claim_mobile_number", with: alt_phone_number
+    fill_in "Mobile number", with: alt_phone_number
     click_on "Continue"
 
     fill_in "claim_one_time_password", with: otp_code