feat: add user feedback component (#1764)

* feat: feedback component and scss

* feat: renamed component to UserFeedback and added components to required pages

* chore: renamed imports from feedback to UserFeedback

* feat: unused css removed

Author: Warren-Pitterson

application/CohortManager/src/Web/app/components/userFeedback.tsx

@@ -0,0 +1,37 @@
+const UserFeedback = () => {
+  return (
+    <div className="app-feedback-section">
+      <hr />
+
+      <h2 className="nhsuk-u-padding-top-4">Help us improve</h2>
+      <p>Your feedback helps us make our service better.</p>
+      <a
+        className="nhsuk-action-link"
+        href="https://feedback.digital.nhs.uk/jfe/form/SV_3fSsaWEgsDZ2DJA"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <svg
+          className="nhsuk-icon nhsuk-icon--arrow-right-circle"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          width="25"
+          height="25"
+          focusable="false"
+          aria-hidden="true"
+        >
+          <path d="M12 2a10 10 0 0 0-10 9h11.7l-4-4a1 1 0 0 1 1.5-1.4l5.6 5.7a1 1 0 0 1 0 1.4l-5.6 5.7a1 1 0 0 1-1.5 0 1 1 0 0 1 0-1.4l4-4H2A10 10 0 1 0 12 2z" />
+        </svg>
+        <span className="nhsuk-action-link__text">
+          Let us know about your experience of Cohort Manager
+        </span>
+      </a>
+      <p>
+        If you need technical support, please continue to use our{' '}
+        <a href="/contact-us">contact us</a> page rather than this form.
+      </p>
+    </div>
+  );
+};
+
+export default UserFeedback;

application/CohortManager/src/Web/app/exceptions/[filter]/page.tsx

@@ -10,6 +10,7 @@ import Breadcrumb from "@/app/components/breadcrumb";
 import Unauthorised from "@/app/components/unauthorised";
 import DataError from "@/app/components/dataError";
 import Pagination from "@/app/components/pagination";
+import UserFeedback from "@/app/components/userFeedback";
 
 export const metadata: Metadata = {
   title: `Raised breast screening exceptions - ${process.env.SERVICE_NAME} - NHS`,
@@ -144,6 +145,7 @@ export default async function Page({
                       }
                     />
                   )}
+                  <UserFeedback />
                 </>
               )}
             </div>

application/CohortManager/src/Web/app/exceptions/page.tsx

@@ -10,6 +10,7 @@ import Breadcrumb from "@/app/components/breadcrumb";
 import Unauthorised from "@/app/components/unauthorised";
 import DataError from "@/app/components/dataError";
 import Pagination from "@/app/components/pagination";
+import UserFeedback from "@/app/components/userFeedback";
 
 export const metadata: Metadata = {
   title: `Not raised breast screening exceptions - ${process.env.SERVICE_NAME} - NHS`,
@@ -145,6 +146,7 @@ export default async function Page({
                       }
                     />
                   )}
+                  <UserFeedback />
                 </>
               )}
             </div>

application/CohortManager/src/Web/app/globals.scss

@@ -142,3 +142,23 @@
   margin-right: 0;
   margin-left: 8px;
 }
+
+.nhsuk-action-link {
+  display: flex;
+}
+
+.nhsuk-icon--arrow-right-circle {
+    margin-right: 8px;
+}
+
+.nhsuk-action-link__text {
+      font-size: 20px;
+      font-weight: bold;
+      align-self: center;
+}
+
+.app-feedback-section .nhsuk-action-link svg.nhsuk-icon--arrow-right-circle {
+  fill: #00703c;
+  color: #00703c;
+}
+

application/CohortManager/src/Web/app/participant-information/[exceptionId]/page.tsx

@@ -9,6 +9,7 @@ import Breadcrumb from "@/app/components/breadcrumb";
 import ParticipantInformationPanel from "@/app/components/participantInformationPanel";
 import Unauthorised from "@/app/components/unauthorised";
 import DataError from "@/app/components/dataError";
+import UserFeedback from "@/app/components/userFeedback";
 
 export const metadata: Metadata = {
   title: `Exception information - ${process.env.SERVICE_NAME} - NHS`,
@@ -195,6 +196,7 @@ export default async function Page(props: {
                 searchParams={resolvedSearchParams}
               />
             </div>
+              <UserFeedback />
           </div>
         </main>
       </>

application/CohortManager/src/Web/app/reports/page.tsx

@@ -7,6 +7,7 @@ import ReportsTable from "@/app/components/reportsTable";
 import Unauthorised from "@/app/components/unauthorised";
 import { type ReportDetails } from "@/app/types";
 import { formatDate, formatIsoDate } from "../lib/utils";
+import UserFeedback from "@/app/components/userFeedback";
 
 export const metadata: Metadata = {
   title: `Reports - ${process.env.SERVICE_NAME} - NHS`,
@@ -75,6 +76,7 @@ export default async function Page() {
               </div>
             </div>
           </div>
+            <UserFeedback />
         </main>
       </>
     );