Add requirements for returns view page

https://eaflood.atlassian.net/browse/WATER-4422

The requirements for return journey has been built and the check page has been finished. This showed a page with requirements for returns allowing users to make changes to requirements for returns.

This piece of work will replicate the requirements for returns check page but will not allow users to make changes (the card and information is identical, apart from the title and a return reference).

There will be a link "View" on the licence set up page that links to this page. That is added as part of this change. Work for this was done here - #1054

app/services/return-requirements/view.service.js

@@ -0,0 +1,27 @@
+'use strict'
+
+/**
+ * Orchestrates fetching and presenting the data for `/return-requirements/{sessionId}/view` page
+ * @module ViewService
+ */
+
+const FetchRequirementsForReturnsService = require('./fetch-requirements-for-returns.service.js')
+
+/**
+ * Orchestrates fetching and presenting the data for `/return-requirements/{sessionId}/view` page
+ *
+ * @param {string} returnVersionId - The UUID for return requirement version
+ *
+ * @returns {Promise<Object>} page data needed by the view template
+ */
+async function go (returnVersionId) {
+  // const requirementsForReturns = await FetchRequirementsForReturnsService.go(returnVersionId)
+
+  return {
+    activeNavBar: 'search'
+  }
+}
+
+module.exports = {
+  go
+}

app/views/return-requirements/view.njk

@@ -0,0 +1,172 @@
+{% extends 'layout.njk' %}
+{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
+{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %}
+{% from "macros/charge-version-status-tag.njk" import statusTag %}
+
+{% macro newLine(array) %}
+  {% for item in array %}
+    <p class="govuk-!-margin-bottom-1"> {{ item }}</p>
+  {% endfor %}
+{% endmacro %}
+
+{% block breadcrumbs %}
+  {# Back link #}
+  {{ govukBackLink({
+    text: 'Back',
+    href: '/system/licences/' + licenceId + '/set-up'
+  }) }}
+{% endblock %}
+
+{% block content %}
+  {# Main heading #}
+  <div class="govuk-body">
+    <h1 class="govuk-heading-xl govuk-!-margin-bottom-3">
+      <span class="govuk-caption-l">Licence {{ licenceRef }}</span>
+      {{ pageTitle }}
+    </h1>
+    {{ statusTag(status) }}
+  </div>
+
+  <div class="govuk-!-margin-bottom-9">
+    <hr class="govuk-section-break  govuk-!-margin-bottom-2 govuk-section-break--visible">
+    {{ govukSummaryList({
+      classes: 'govuk-!-margin-bottom-2',
+      rows: [
+        {
+          classes: 'govuk-summary-list govuk-summary-list__row--no-border',
+          key: {
+          text: "Reason"
+          },
+            value: {
+            html: '<span data-test="reason">' + reason + '</span>'
+          }
+        },
+        {
+          classes: 'govuk-summary-list govuk-summary-list__row--no-border',
+          key: {
+            text: "Start date"
+          },
+          value: {
+            html: '<span data-test="start-date">' + startDate + '</span>'
+          }
+        }
+      ]
+    }) }}
+    <hr class="govuk-section-break  govuk-!-margin-bottom-2 govuk-section-break--visible">
+  </div>
+
+    <div class="govuk-!-margin-bottom-9">
+      <h2 class="govuk-heading-l govuk-!-margin-bottom-4">Requirements for returns</h2>
+      {% for requirement in requirements %}
+        {% set rowIndex = loop.index0 %}
+        <div>
+            {{ govukSummaryList({
+              card: {
+                title: {
+                  html: "<p> Return reference " + requirement.returnReference + "</p>" + requirement.title
+                }
+              },
+              attributes: {
+                'data-test': 'requirement-' + rowIndex
+              },
+              classes: "govuk-summary-list--no-border",
+              rows: [
+                {
+                  key: {
+                    text: "Purpose"
+                  },
+                  value: {
+                    html: '<span data-test="purposes-' + rowIndex + '">' + newLine(requirement.purposes) + '</span>'
+                  }
+                },
+                {
+                  key: {
+                    text: "Points"
+                  },
+                  value: {
+                    html: '<span data-test="points-' + rowIndex + '">' + newLine(requirement.points) + '</span>'
+                  }
+                },
+                {
+                  key: {
+                    text: "Abstraction period"
+                  },
+                  value: {
+                    html: '<p data-test="abstraction-period-' + rowIndex + '">' + requirement.abstractionPeriod + '</p>'
+                  }
+                },
+                {
+                  key: {
+                    text: "Returns cycle"
+                  },
+                  value: {
+                    html: '<p data-test="returns-cycle-' + rowIndex + '">' + requirement.returnsCycle + '</p>'
+                  }
+                },
+                {
+                  key: {
+                    text: "Site description"
+                  },
+                  value: {
+                    html: '<p data-test="site-description-' + rowIndex + '">' + requirement.siteDescription + '</p>'
+                  }
+                },
+                {
+                  key: {
+                    text: "Collection"
+                  },
+                  value: {
+                    html: '<p data-test="frequency-collected-' + rowIndex + '">' + requirement.frequencyCollected | capitalize + '</p>'
+                  }
+                },
+                {
+                  key: {
+                    text: "Reporting"
+                  },
+                  value: {
+                    html: '<p data-test="frequency-reported-' + rowIndex + '">' + requirement.frequencyReported | capitalize + '</p>'
+                  }
+                },
+                {
+                  key: {
+                    text: "Agreements exceptions"
+                  },
+                  value: {
+                    html: '<p data-test="agreements-exceptions-' + rowIndex + '">' + requirement.agreementsExceptions + '</p>'
+                  }
+                }
+              ]
+            }) }}
+        </div>
+      {% endfor %}
+    </div>
+
+    <div class="govuk-body">
+        {{ govukSummaryList({
+          classes: 'govuk-!-margin-bottom-2',
+          rows: [
+            {
+              classes: 'govuk-summary-list',
+              key: {
+                text: 'Additional submission options',
+                classes: "govuk-heading-m govuk-!-width-one-half"
+              },
+              value: {
+                text: ''
+              }
+            },
+            {
+              classes: 'govuk-summary-list govuk-summary-list__row--no-border',
+              key: {
+                text: 'Multiple upload',
+                classes: "govuk-body "
+              },
+              value: {
+                text: additionalSubmissionOptions.multipleUpload
+            }
+            }
+          ]
+        }) }}
+    </div>
+
+{% endblock %}