HOTT-5136: Added top and bottom choice selection banners to Duty calc

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

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">

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>

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;
+    }
+  }
+}

app/webpacker/styles/application.scss

@@ -14,3 +14,4 @@ $govuk-global-styles: true;
 @import "accessible-autocomplete";
 @import "custom";
 @import "autocomplete";
+@import 'feedback_useful_banner';

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 }