From bcc8e5f0db13d9fe168b33e55d637bc54273a134 Mon Sep 17 00:00:00 2001
From: Ata Dahri <ata-ul-rouf.dahri@transformuk.com>
Date: Tue, 12 Mar 2024 10:57:52 +0000
Subject: [PATCH] HOTT-5136: Added top and bottom choice selection banners to
 Duty calculator

---
 app/helpers/service_helper.rb                 |  8 ++-
 app/views/layouts/application.html.erb        |  6 ++-
 .../shared/_feedback_useful_banner.html.erb   | 20 ++++++++
 .../styles/_feedback_useful_banner.scss       | 49 +++++++++++++++++++
 app/webpacker/styles/application.scss         |  1 +
 spec/helpers/service_helper_spec.rb           | 29 +++++++++++
 6 files changed, 109 insertions(+), 4 deletions(-)
 create mode 100644 app/views/shared/_feedback_useful_banner.html.erb
 create mode 100644 app/webpacker/styles/_feedback_useful_banner.scss

diff --git a/app/helpers/service_helper.rb b/app/helpers/service_helper.rb
index 32b9703f..70bbc8fe 100644
--- a/app/helpers/service_helper.rb
+++ b/app/helpers/service_helper.rb
@@ -48,8 +48,12 @@ def commodity_url(commodity_code)
     service_url_for("/commodities/#{commodity_code}")
   end
 
-  def feedback_url
-    service_url_for('/feedback')
+  def feedback_url(choice = nil)
+    if choice && %w[yes no].include?(choice)
+      service_url_for("/feedback?page_useful=#{choice}")
+    else
+      service_url_for('/feedback')
+    end
   end
 
   def trade_tariff_frontend_url
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index fedc70a0..9534a471 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -51,10 +51,10 @@
         <div class="govuk-phase-banner">
           <p class="govuk-phase-banner__content">
             <strong class="govuk-tag govuk-phase-banner__content__tag">
-            beta
+            FEEDBACK
             </strong>
             <span class="govuk-phase-banner__text">
-            This is a Beta service - your <%= link_to('feedback', feedback_url, class:'govuk-link') %> will help us to improve it.
+            Tell us what you think - your <%= link_to('feedback', feedback_url, class:'govuk-link') %>  will help us improve.
             </span>
           </p>
         </div>
@@ -68,6 +68,8 @@
       </div>
     </div>
 
+    <%= render 'shared/feedback_useful_banner' %>
+
     <footer class="govuk-footer " role="contentinfo">
       <div class="govuk-width-container ">
         <div class="govuk-footer__meta">
diff --git a/app/views/shared/_feedback_useful_banner.html.erb b/app/views/shared/_feedback_useful_banner.html.erb
new file mode 100644
index 00000000..2d94a7dc
--- /dev/null
+++ b/app/views/shared/_feedback_useful_banner.html.erb
@@ -0,0 +1,20 @@
+<div class="feedback-useful-banner govuk-width-container">
+  <div class="feedback-useful-container">
+    <div class="govuk-footer__meta">
+      <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
+        <p>is this page useful?</p>
+        <li class="govuk-footer__inline-list-item">
+          <%= link_to('Yes', feedback_url('yes'), class:'govuk-button govuk-button--secondary') %>
+        </li>
+        <li class="govuk-footer__inline-list-item">
+          <%= link_to('No', feedback_url('no'), class:'govuk-button govuk-button--secondary') %>
+        </li>
+      </div>
+      <div class="govuk-footer__meta-item">
+        <li class="govuk-footer__inline-list-item">
+            <%= link_to('Report a problem with this page', feedback_url, class:'govuk-button govuk-button--secondary report-problem') %>
+        </li>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/app/webpacker/styles/_feedback_useful_banner.scss b/app/webpacker/styles/_feedback_useful_banner.scss
new file mode 100644
index 00000000..63bf5903
--- /dev/null
+++ b/app/webpacker/styles/_feedback_useful_banner.scss
@@ -0,0 +1,49 @@
+.feedback-useful-banner {
+  border-top: 1px solid $govuk-border-colour;
+
+  .feedback-useful-container {
+    position: relative;
+    padding: 1em;
+    background-color: govuk-colour("light-grey");
+    height: 36px;
+    padding-top: 17px;
+  }
+
+  p {
+    font-weight: bold;
+    float: left;
+    padding-top: 7px;
+    padding-left: 11px;
+    padding-right: 15px;
+  }
+
+  .govuk-button {
+    border: 1px solid govuk-colour("black");
+    box-shadow: 0 2px 0 govuk-colour("black");
+    min-width: 6em;
+  }
+}
+
+.govuk-footer {
+  border-top: 10px solid govuk-colour("blue");
+}
+
+@media (max-width: 900px) {
+  .feedback-useful-banner {
+    .report-problem {
+      display: none;
+    }
+  }
+}
+
+@include govuk-media-query($until: tablet) {
+  .feedback-useful-banner {
+    p {
+      padding-top: 9px;
+    }
+
+    .govuk-button {
+      min-width: 3.5em;
+    }
+  }
+}
diff --git a/app/webpacker/styles/application.scss b/app/webpacker/styles/application.scss
index 5f375631..4572dabc 100644
--- a/app/webpacker/styles/application.scss
+++ b/app/webpacker/styles/application.scss
@@ -14,3 +14,4 @@ $govuk-global-styles: true;
 @import "accessible-autocomplete";
 @import "custom";
 @import "autocomplete";
+@import 'feedback_useful_banner';
diff --git a/spec/helpers/service_helper_spec.rb b/spec/helpers/service_helper_spec.rb
index 1ccb74ef..bd6dc4bc 100644
--- a/spec/helpers/service_helper_spec.rb
+++ b/spec/helpers/service_helper_spec.rb
@@ -134,6 +134,35 @@
     end
   end
 
+  describe '#feedback_url' do
+    context 'when choice is nil' do
+      let(:frontend_url) { 'https://dev.trade-tariff.service.gov.uk' }
+
+      it { expect(helper.feedback_url).to eq('https://dev.trade-tariff.service.gov.uk/feedback') }
+    end
+
+    context 'when choice is no' do
+      let(:choice) { 'no' }
+      let(:frontend_url) { 'https://dev.trade-tariff.service.gov.uk' }
+
+      it { expect(helper.feedback_url(choice)).to eq("https://dev.trade-tariff.service.gov.uk/feedback?page_useful=#{choice}") }
+    end
+
+    context 'when choice is yes' do
+      let(:choice) { 'yes' }
+      let(:frontend_url) { 'https://dev.trade-tariff.service.gov.uk' }
+
+      it { expect(helper.feedback_url(choice)).to eq("https://dev.trade-tariff.service.gov.uk/feedback?page_useful=#{choice}") }
+    end
+
+    context 'when choice is invalid' do
+      let(:choice) { 'invalid' }
+      let(:frontend_url) { 'https://dev.trade-tariff.service.gov.uk' }
+
+      it { expect(helper.feedback_url(choice)).to eq('https://dev.trade-tariff.service.gov.uk/feedback') }
+    end
+  end
+
   describe '#referred_service' do
     subject(:result) { helper.referred_service }