From 10da3d61e2f89ec29ef9f9071c63eb99aa2bb482 Mon Sep 17 00:00:00 2001
From: Manny Dinssa <44172848+Dinssa@users.noreply.github.com>
Date: Mon, 10 Feb 2025 17:57:15 +0000
Subject: [PATCH] Alternative way to handle js disabled users

---
 .../form/_address_search_question.html.erb    | 52 ++++++++++++-------
 app/views/form/page.html.erb                  |  6 ++-
 2 files changed, 39 insertions(+), 19 deletions(-)

diff --git a/app/views/form/_address_search_question.html.erb b/app/views/form/_address_search_question.html.erb
index 6e27e5018..623fb14e3 100644
--- a/app/views/form/_address_search_question.html.erb
+++ b/app/views/form/_address_search_question.html.erb
@@ -1,28 +1,44 @@
-<% selected = @log.public_send(question.id) || "" %>
 <% answers = question.displayed_answer_options(@log, current_user).map { |key, value| OpenStruct.new(id: key, name: select_option_name(value), resource: value) } %>
 <%= render partial: "form/guidance/#{question.top_guidance_partial}" if question.top_guidance? %>
 
-<%= f.govuk_select(question.id.to_sym,
-                   label: legend(question, page_header, conditional),
-                   "data-controller": "address-search",
-                   "data-info": { search_url: address_search_url }.to_json,
-                   caption: caption(caption_text, page_header, conditional),
-                   hint: { text: question.hint_text&.html_safe }) do %>
-  <% if answers.any? %>
-    <% answers.each do |answer| %>
-      <option value="<%= answer.id %>"
-              data-synonyms="<%= answer_option_synonyms(answer.resource) %>"
-              data-append="<%= answer_option_append(answer.resource) %>"
-              data-hint="<%= answer_option_hint(answer.resource) %>"
-              <%= question.answer_selected?(@log, answer) ? "selected" : "" %>><%= answer.name || answer.resource %></option>
+<noscript>
+  <%= govuk_notification_banner(title_text: "Important") do %>
+    <p class="govuk-notification-banner__heading govuk-!-width-full" style="max-width: fit-content">
+      This feature requires JavaScript to be enabled
+    <p>
+    <p style="max-width: fit-content">
+      Searching for an address or UPRN requires JavaScript to be enabled in your browser. Please enter the address manually instead in the next question.
+    </p>
+  <% end %>
+</noscript>
+
+<div id="js-enabled-content" style="display: none;">
+  <%= f.govuk_select(question.id.to_sym,
+                     label: legend(question, page_header, conditional),
+                     "data-controller": "address-search",
+                     "data-info": { search_url: address_search_url }.to_json,
+                     caption: caption(caption_text, page_header, conditional),
+                     hint: { text: question.hint_text&.html_safe }) do %>
+    <% if answers.any? %>
+      <% answers.each do |answer| %>
+        <option value="<%= answer.id %>"
+                data-synonyms="<%= answer_option_synonyms(answer.resource) %>"
+                data-append="<%= answer_option_append(answer.resource) %>"
+                data-hint="<%= answer_option_hint(answer.resource) %>"
+                <%= question.answer_selected?(@log, answer) ? "selected" : "" %>><%= answer.name || answer.resource %></option>
+      <% end %>
+    <% else %>
+      <option value="" disabled>Javascript is disabled. Please enter the address manually.</option>
     <% end %>
-  <% else %>
-    <option value="" disabled>Javascript is disabled. Please enter the address manually.</option>
   <% end %>
-<% end %>
 
-<%= render partial: "form/guidance/#{question.bottom_guidance_partial}" if question.bottom_guidance? %>
+  <%= render partial: "form/guidance/#{question.bottom_guidance_partial}" if question.bottom_guidance? %>
+</div>
 
 <div class="govuk-button-group">
   <%= govuk_link_to "Enter the address manually instead", address_manual_input_path(@log.log_type, @log.id), class: "govuk-button govuk-button--secondary" %>
 </div>
+
+<script>
+  document.getElementById('js-enabled-content').style.display = 'block';
+</script>
diff --git a/app/views/form/page.html.erb b/app/views/form/page.html.erb
index 7c56b2184..adfabc290 100644
--- a/app/views/form/page.html.erb
+++ b/app/views/form/page.html.erb
@@ -76,9 +76,13 @@
       <% end %>
 
       <% if @page.id == "address" %>
-        <div class="govuk-button-group">
+        <div  id="js-enabled-button" style="display: none;" class="govuk-button-group">
           <%= govuk_link_to "Clear address and search instead", address_search_input_path(@log.log_type, @log.id), class: "govuk-button govuk-button--secondary" %>
         </div>
+
+        <script>
+          document.getElementById('js-enabled-button').style.display = 'block';
+        </script>
       <% end %>
 
       <% if @pages_with_errors_count > 1 %>