Add confirmation banners for saved pages

Saved pages now renders a confirmation banner based on a personalisation parameter sent back in the response from frontned Co-authored-by: Dana Cotoran <[email protected]> Co-authored-by: Huw Diprose <[email protected]>
alphagov · Jun 15, 2021 · adabd17 · adabd17
1 parent 85b3274
commit adabd17
Show file tree

Hide file tree

Showing 9 changed files with 116 additions and 81 deletions.
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
@@ -39,6 +39,7 @@ $govuk-use-legacy-palette: false;
 @import 'govuk_publishing_components/components/step-by-step-nav-header';
 @import 'govuk_publishing_components/components/step-by-step-nav-related';
 @import 'govuk_publishing_components/components/subscription-links';
+@import 'govuk_publishing_components/components/success-alert';
 @import 'govuk_publishing_components/components/title';
 @import 'govuk_publishing_components/components/translation-nav';
 @import 'govuk_publishing_components/components/warning-text';

diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
@@ -28,6 +28,18 @@ def current_path_without_query_string
     request.original_fullpath.split("?", 2).first
   end
 
+  def has_saved_page_confirmation?
+    return false unless save_this_page_enabled?
+
+    personalisation_param.present?
+  end
+
+  def personalisation_param
+    return unless %w[page_saved page_removed].include?(params["personalisation"])
+
+    params["personalisation"]
+  end
+
 private
 
   def active_proposition_mapping

diff --git a/app/views/content_items/contact.html.erb b/app/views/content_items/contact.html.erb
@@ -16,91 +16,91 @@
   <div class="govuk-grid-column-two-thirds">
     <div class="content-bottom-margin">
       <% body = capture do %>
-      <% if @content_item.online_form_links.any? %>
-      <h2 id="online-forms-title"><%= t("contact.online") %></h2>
-      <% @content_item.online_form_links.each do |link| %>
-      <p>
-        <%= link_to(link[:title], link[:url]) %>
-      </p>
-      <%= link[:description] %>
-      <% end %>
-      <%= @content_item.online_form_body %>
-      <% end %>
-
-      <% if @content_item.show_webchat? %>
-      <h2 id="webchat-title"><%= t("contact.webchat") %></h2>
-      <%= render 'shared/webchat' %>
-      <% end %>
+        <% if @content_item.online_form_links.any? %>
+          <h2 id="online-forms-title"><%= t("contact.online") %></h2>
+          <% @content_item.online_form_links.each do |link| %>
+            <p>
+              <%= link_to(link[:title], link[:url]) %>
+            </p>
+            <%= link[:description] %>
+          <% end %>
+          <%= @content_item.online_form_body %>
+        <% end %>
 
-      <% if @content_item.email.any? %>
-      <h2 id="email-title"><%= t("contact.email") %></h2>
-      <% @content_item.email.each do |email_group| %>
-      <p class="vcard">
-        <% email_group[:v_card].each do |v_card_part| %>
-        <span class="<%= v_card_part[:v_card_class] %>">
-          <%= v_card_part[:value] %>
-        </span><br />
+        <% if @content_item.show_webchat? %>
+          <h2 id="webchat-title"><%= t("contact.webchat") %></h2>
+          <%= render 'shared/webchat' %>
         <% end %>
-        <%= mail_to email_group[:email], email_group[:email], class: 'email' %>
-      </p>
 
-      <%= email_group[:description] %>
-      <% end %>
-      <%= @content_item.email_body %>
-      <% end %>
+        <% if @content_item.email.any? %>
+          <h2 id="email-title"><%= t("contact.email") %></h2>
+          <% @content_item.email.each do |email_group| %>
+            <p class="vcard">
+              <% email_group[:v_card].each do |v_card_part| %>
+              <span class="<%= v_card_part[:v_card_class] %>">
+                <%= v_card_part[:value] %>
+              </span><br />
+              <% end %>
+              <%= mail_to email_group[:email], email_group[:email], class: 'email' %>
+            </p>
 
-      <% if @content_item.phone.any? %>
-      <h2 id="phone-title"><%= t("contact.phone") %></h2>
-      <% @content_item.phone.each do |phone_group| %>
-      <% if @content_item.phone.size > 1 %>
-      <h3><%= phone_group[:title] %></h3>
-      <% end %>
-      <%= phone_group[:description] %>
-      <% if phone_group[:numbers].any? %>
-      <div class="contact">
-        <% phone_group[:numbers].each do |number| %>
-        <p><%= number[:label] %>:<br /><strong><%= number[:number] %></strong></p>
-        <% end%>
-      </div>
-      <% end %>
-      <% if phone_group[:opening_times].present? %>
-      <p>Opening times:</p>
-      <%= phone_group[:opening_times] %>
-      <% end %>
+            <%= email_group[:description] %>
+          <% end %>
+          <%= @content_item.email_body %>
+        <% end %>
 
-      <% if phone_group[:best_time_to_call].present? %>
-      <p>Best time to call:</p>
-      <%= phone_group[:best_time_to_call] %>
-      <% end %>
-      <% end %>
+        <% if @content_item.phone.any? %>
+          <h2 id="phone-title"><%= t("contact.phone") %></h2>
+          <% @content_item.phone.each do |phone_group| %>
+            <% if @content_item.phone.size > 1 %>
+              <h3><%= phone_group[:title] %></h3>
+            <% end %>
+            <%= phone_group[:description] %>
+            <% if phone_group[:numbers].any? %>
+              <div class="contact">
+                <% phone_group[:numbers].each do |number| %>
+                  <p><%= number[:label] %>:<br /><strong><%= number[:number] %></strong></p>
+                <% end%>
+              </div>
+            <% end %>
+            <% if phone_group[:opening_times].present? %>
+              <p>Opening times:</p>
+              <%= phone_group[:opening_times] %>
+            <% end %>
 
-      <%= @content_item.phone_body %>
+            <% if phone_group[:best_time_to_call].present? %>
+              <p>Best time to call:</p>
+              <%= phone_group[:best_time_to_call] %>
+            <% end %>
+          <% end %>
 
-      <p class="call-charges">
-        <%= link_to t("contact.find_call_charges"), "/call-charges" %>
-      </p>
-      <% end %>
+          <%= @content_item.phone_body %>
 
-      <% if @content_item.post.any? %>
-      <h2 id="post-title">Post</h2>
-      <% @content_item.post.each do |post_group| %>
-      <%= post_group[:description] %>
-      <div class="contact vcard">
-        <p>
-          <% post_group[:v_card].each do |v_card_part| %>
-          <span class="<%= v_card_part[:v_card_class] %>">
-            <%= v_card_part[:value] %>
-          </span><br />
+          <p class="call-charges">
+            <%= link_to t("contact.find_call_charges"), "/call-charges" %>
+          </p>
+        <% end %>
+
+        <% if @content_item.post.any? %>
+          <h2 id="post-title">Post</h2>
+          <% @content_item.post.each do |post_group| %>
+            <%= post_group[:description] %>
+            <div class="contact vcard">
+              <p>
+                <% post_group[:v_card].each do |v_card_part| %>
+                <span class="<%= v_card_part[:v_card_class] %>">
+                  <%= v_card_part[:value] %>
+                </span><br />
+                <% end %>
+              </p>
+            </div>
           <% end %>
-        </p>
-      </div>
-      <% end %>
-      <%= @content_item.post_body %>
-      <% end %>
+          <%= @content_item.post_body %>
+        <% end %>
       <% end %>
 
       <%= render 'govuk_publishing_components/components/govspeak' do %>
-      <%= body %>
+        <%= body %>
       <% end %>
     </div>
 

diff --git a/app/views/content_items/fatality_notice.html.erb b/app/views/content_items/fatality_notice.html.erb
@@ -22,12 +22,12 @@
     <div class="content-bottom-margin">
       <div class="responsive-bottom-margin">
         <%= render 'components/important-metadata',
-        items: @content_item.important_metadata %>
+          items: @content_item.important_metadata %>
         <%= render 'components/figure',
-        src: @content_item.image["url"],
-        alt: @content_item.image["alt_text"],
-        credit: @content_item.image["credit"],
-        caption: @content_item.image["caption"] if @content_item.image %>
+          src: @content_item.image["url"],
+          alt: @content_item.image["alt_text"],
+          credit: @content_item.image["credit"],
+          caption: @content_item.image["caption"] if @content_item.image %>
         <%= render 'govuk_publishing_components/components/govspeak', {
           direction: page_text_direction,
         } do %>

diff --git a/app/views/content_items/publication.html.erb b/app/views/content_items/publication.html.erb
@@ -25,7 +25,7 @@
 <%= render 'govuk_publishing_components/components/notice', @content_item.withdrawal_notice_component  %>
 
 <div class="govuk-grid-row">
-  <div class="govuk-grid-column-two-thirds ">
+  <div class="govuk-grid-column-two-thirds">
     <div class="responsive-bottom-margin">
       <%= render 'components/important-metadata', items: @content_item.important_metadata %>
       <div class="responsive-bottom-margin">

diff --git a/app/views/content_items/topical_event_about_page.html.erb b/app/views/content_items/topical_event_about_page.html.erb
@@ -23,7 +23,7 @@
         <%= raw(@content_item.body) %>
       <% end %>
     <% end %>
-    
+
     <%= render 'content_items/save_page' %>
   </div>
   <%= render 'shared/sidebar_navigation' %>

diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -2,7 +2,7 @@
 <html>
 <head>
   <title lang="<%= I18n.locale %>">
-    <%if content_for?(:title) %>
+    <% if content_for?(:title) %>
       <%= yield :title %> - GOV.UK
     <% else %>
       <%= @content_item.page_title %> - GOV.UK
@@ -39,6 +39,8 @@
       <%= render 'govuk_publishing_components/components/phase_banner', phase: @content_item.phase %>
     <% end %>
 
+    <%= render 'shared/save_page_confirmation' %>
+
     <% unless @do_not_show_breadcrumbs %>
       <% if @content_item.try(:back_link) %>
         <%= render 'govuk_publishing_components/components/back_link', href: @content_item.back_link %>

diff --git a/app/views/shared/_save_page_confirmation.html.erb b/app/views/shared/_save_page_confirmation.html.erb
@@ -0,0 +1,15 @@
+<% if has_saved_page_confirmation? %>
+  <div class="govuk-grid-row">
+    <div class="govuk-grid-column-two-thirds">
+      <div class="govuk-!-margin-top-4">
+        <%= render "govuk_publishing_components/components/success_alert", {
+          message: t("components.save_this_page.confirmations.#{personalisation_param}.message"),
+          description: sanitize(additional_text({
+            additional_class: "govuk-notification-banner__link",
+            signed_in: logged_in?,
+          })),
+        } %>
+      </div>
+    </div>
+  </div>
+<% end %>
diff --git a/config/locales/en.yml b/config/locales/en.yml
@@ -24,6 +24,11 @@ en:
       remove_page_button: Remove from your saved pages
       see_saved_pages_signed_in: <a href="%{link}" class="govuk-link %{additional_class}">See your saved pages</a>
       see_saved_pages_signed_out: <a href="%{link}" class="govuk-link %{additional_class}">Sign in</a> to see your saved pages.
+      confirmations:
+        page_saved:
+          message: "You’ve added this to your saved pages"
+        page_removed:
+          message: "You’ve removed this from your saved pages"
     share_links:
       share_this_page: Share this page
   consultation: