Merge pull request #126 from DFE-Digital/feature/feedback-banner

Feature: Add feedback banner

src/Dfe.ContentSupport.Web/Models/Mapped/CsPage.cs

@@ -15,6 +15,7 @@ public class CsPage
     public List<CsContentItem> Content { get; set; } = null!;
     public DateTime? CreatedAt { get; init; }
     public DateTime? UpdatedAt { get; init; }
+    public bool HasFeedbackBanner { get; set; }
     public List<PageLink>? MenuItems { get; set; }
 
 }

src/Dfe.ContentSupport.Web/Services/ModelMapper.cs

@@ -25,6 +25,7 @@ public CsPage MapToCsPage(ContentSupportPage incoming)
             IsSitemap = incoming.IsSitemap,
             HasCitation = incoming.HasCitation,
             HasBackToTop = incoming.HasBackToTop,
+            HasFeedbackBanner = incoming.HasFeedbackBanner,
             HasPrint = incoming.HasPrint,
             Content = MapEntriesToContent(incoming.Content),
             ShowVerticalNavigation = incoming.ShowVerticalNavigation,

src/Dfe.ContentSupport.Web/ViewModels/ContentSupportPage.cs

@@ -7,13 +7,17 @@ namespace Dfe.ContentSupport.Web.ViewModels;
 public class ContentSupportPage : ContentBase
 {
     public string Slug { get; init; } = null!;
+
     public List<dynamic> BeforeTitleContent { get; init; } = [];
+
     public Heading Heading { get; init; } = null!;
     public List<Entry> Content { get; init; } = [];
+
     public bool DisplayBackButton { get; init; }
     public bool IsSitemap { get; init; }
     public bool HasCitation { get; init; }
     public bool HasBackToTop { get; init; }
+    public bool HasFeedbackBanner { get; init; }
     public bool HasPrint { get; init; }
     public bool ShowVerticalNavigation { get; init; }
 

src/Dfe.ContentSupport.Web/Views/Content/CsIndex.cshtml

@@ -47,5 +47,10 @@
         {
             <partial name="_Print"/>
         }
+
+        @if (Model.HasFeedbackBanner)
+        {
+            <partial name="_Feedback" />
+        }
     </div>
 </div>

src/Dfe.ContentSupport.Web/Views/Shared/Error.cshtml

@@ -10,7 +10,7 @@
 {
     <p class="govuk-body">
         <strong>Request ID:</strong> <code>@Model.RequestId</code>
-    </p class="govuk-body">
+    </p>
 }
 
 <h3>Development Mode</h3>

src/Dfe.ContentSupport.Web/Views/Shared/_CsLayout.cshtml

@@ -7,7 +7,7 @@
     ViewData["Title"] = Model.Heading.Title;
     ViewData["containerClasses"] = "dfe-width-container";
     var consentCookie = Context.Request.Cookies[".AspNet.Consent"];
-    var track = false;// consentCookie == "true";
+    var track = consentCookie == "true";
 }
 
 @section Head {
@@ -32,9 +32,7 @@
     <link rel="stylesheet" as="style" href="~/css/application.css">
     <link rel="stylesheet" as="style" href="~/css/cands-site.css">
     <header role="banner">
-        @*
         <partial name="_CookieConsent"/>
-        *@
         <partial name="_CsHeader"/>
         <partial name="_Hero" model="@Model.Heading"/>
     </header>

src/Dfe.ContentSupport.Web/Views/Shared/_Feedback.cshtml

@@ -0,0 +1,36 @@
+@{
+    var consentCookie = Context.Request.Cookies[".AspNet.Consent"];
+    var track = consentCookie == "true";
+}
+
+@if (track)
+{
+<div class="dfe-feedback-banner govuk-!-margin-top-9">
+    <div class="dfe-feedback-banner--content">
+        <form id="feedbackForm">
+            <div class="dfe-feedback-banner--content-questions">
+                <div class="dfe-feedback-banner--content-question" id="questionForm">
+                    <h2 class="govuk-heading-s dfe-feedback-banner--content-question-text">Is this page
+                        useful?</h2>
+                    <div class="govuk-button-group">
+                        <button type="button" class="govuk-button govuk-button--secondary" value="Yes"
+                            data-module="govuk-button" onclick="handleFeedback('Yes')">Yes</button>
+                        <button type="button" class="govuk-button govuk-button--secondary" value="No"
+                            data-module="govuk-button" onclick="handleFeedback('No')">No</button>
+                    </div>
+                </div>
+            </div>
+            <div id="feedbackMessage" class="govuk-body govuk-!-margin-bottom-0" style="display: none;">
+                Thank you for your feedback.
+            </div>
+        </form>
+    </div>
+</div>
+
+<script>
+    function handleFeedback(value) {
+        document.getElementById('questionForm').style.display = 'none';
+        document.getElementById('feedbackMessage').style.display = 'block';
+    }
+</script>
+}

src/Dfe.ContentSupport.Web/wwwroot/css/cands-site.css

@@ -84,6 +84,43 @@ video {
     background-color: #ebf2f6;
 }
 
+.dfe-feedback-banner {
+    background-color: #f3f2f1;
+    border: 1px solid #b1b4b6;
+    margin-bottom: 30px;
+  }
+
+  .dfe-feedback-banner--content {
+    padding: 20px 15px;
+    display: block;
+    line-height: 1.333;
+  }
+
+  .dfe-feedback-banner--content-questions {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .dfe-feedback-banner--content-question {
+    display: flex;
+    align-items: center;
+  }
+
+  .dfe-feedback-banner
+    .govuk-button,
+  .dfe-feedback-banner
+    .govuk-button-group {
+    margin-bottom: 0;
+  }
+
+  .dfe-feedback-banner--content-question
+    .dfe-feedback-banner--content-question-text {
+    margin-bottom: 0;
+    margin-right: 20px;
+  }  
+
 .guidance-container {
     border: 1px solid #b1b4b6;
 }