Check your requirements page (with requirements summary cards)

app/presenters/return-requirements/check.presenter.js

@@ -5,7 +5,7 @@
  * @module CheckPresenter
  */
 
-const { formatLongDate } = require('../base.presenter.js')
+const { formatAbstractionDate, formatLongDate } = require('../base.presenter.js')
 const { returnRequirementReasons } = require('../../lib/static-lookups.lib.js')
 
 function go (session) {
@@ -39,19 +39,28 @@ function _requirements (session) {
 
   const completedRequirements = []
 
-  for (const requirement of requirements) {
-    const { siteDescription, agreementsExceptions } = requirement
-
+  for (const [index, requirement] of requirements.entries()) {
+    const { agreementsExceptions } = requirement
     // NOTE: We determine a requirement is complete because agreement exceptions is populated and it is the last step in
     // the journey
     if (agreementsExceptions) {
-      completedRequirements.push({ siteDescription })
+      requirement.abstractionPeriod = _abstractionPeriod(requirement.abstractionPeriod)
+      requirement.index = index
+      completedRequirements.push(requirement)
     }
   }
 
   return completedRequirements
 }
 
+function _abstractionPeriod (abstractionPeriod) {
+  const { 'start-abstraction-period-day': startDay, 'start-abstraction-period-month': startMonth, 'end-abstraction-period-day': endDay, 'end-abstraction-period-month': endMonth } = abstractionPeriod
+  const startDate = formatAbstractionDate(startDay, startMonth)
+  const endDate = formatAbstractionDate(endDay, endMonth)
+
+  return `From ${startDate} to ${endDate}`
+}
+
 function _startDate (session) {
   const { licence, startDateOptions, startDateDay, startDateMonth, startDateYear } = session
 

app/views/return-requirements/check.njk

@@ -108,18 +108,164 @@
           preventDoubleClick: true
         }) }}
       </form>
-
       {% for requirement in requirements %}
         {# Set an easier to use index #}
-        {% set rowIndex = loop.index0 %}
+        {% set rowIndex = requirement.index %}
         <div>
-          <h3 class="govuk-body">{{requirement.siteDescription}}</h3>
-          {{ govukButton({
-            text: "Remove requirement",
-            classes: "govuk-button--warning",
-            preventDoubleClick: true,
-            href: "/system/return-requirements/" + sessionId + "/remove/" + rowIndex
-          }) }}
+            {{ govukSummaryList({
+              card: {
+                title: {
+                  text: requirement.siteDescription
+                }
+              },
+              classes: "govuk-summary-list--no-border",
+              rows: [
+                {
+                  key: {
+                    text: "Purpose"
+                  },
+                  value: {
+                    html: "requirement.purposes"
+                  },
+                  actions: {
+                    items: [
+                      {
+                        href: "purpose/" + rowIndex,
+                        text: "Change",
+                        visuallyHiddenText: "Purpose"
+                      }
+                    ]
+                  }
+                },
+                {
+                  key: {
+                    text: "Point"
+                  },
+                  value: {
+                    html: "requirement.points"
+                  },
+                  actions: {
+                    items: [
+                      {
+                        href: "points/" + rowIndex,
+                        text: "Change",
+                        visuallyHiddenText: "Point"
+                      }
+                    ]
+                  }
+                },
+                {
+                  key: {
+                    text: "Abstraction period"
+                  },
+                  value: {
+                    html: requirement.abstractionPeriod
+                  },
+                  actions: {
+                    items: [
+                      {
+                        href: "abstraction-period/" + rowIndex,
+                        text: "Change",
+                        visuallyHiddenText: "Abstraction period"
+                      }
+                    ]
+                  }
+                },
+                {
+                  key: {
+                    text: "Returns cycle"
+                  },
+                  value: {
+                    html: "requirement.returnsCycle"
+                  },
+                  actions: {
+                    items: [
+                      {
+                        href: "returns-cycle/" + rowIndex,
+                        text: "Change",
+                        visuallyHiddenText: "Returns cycle"
+                      }
+                    ]
+                  }
+                },
+                {
+                  key: {
+                    text: "Site description"
+                  },
+                  value: {
+                    html: requirement.siteDescription
+                  },
+                  actions: {
+                    items: [
+                      {
+                        href: "site-description/" + rowIndex,
+                        text: "Change",
+                        visuallyHiddenText: "Site description"
+                      }
+                    ]
+                  }
+                },
+                {
+                  key: {
+                    text: "Collection"
+                  },
+                  value: {
+                    html: requirement.frequencyCollected | capitalize
+                  },
+                  actions: {
+                    items: [
+                      {
+                        href: "frequency-collected/" + rowIndex,
+                        text: "Change",
+                        visuallyHiddenText: "Collection"
+                      }
+                    ]
+                  }
+                },
+                {
+                  key: {
+                    text: "Reporting"
+                  },
+                  value: {
+                    html: requirement.frequencyReported | capitalize
+                  },
+                  actions: {
+                    items: [
+                      {
+                        href: "frequency-reported/" + rowIndex,
+                        text: "Change",
+                        visuallyHiddenText: "Reporting"
+                      }
+                    ]
+                  }
+                },
+                {
+                  key: {
+                    text: "Agreements exceptions"
+                  },
+                  value: {
+                    html: "requirement.agreementsExceptions"
+                  },
+                  actions: {
+                    items: [
+                      {
+                        href: "agreements-exceptions/" + rowIndex,
+                        text: "Change",
+                        visuallyHiddenText: "Agreements exception"
+                      }
+                    ]
+                  }
+                }
+              ]
+            }) }}
+          {% if requirements.length >= 2 %}
+            {{ govukButton({
+              text: "Remove requirement",
+              classes: "govuk-button--warning",
+              preventDoubleClick: true,
+              href: "/system/return-requirements/" + sessionId + "/remove/" + rowIndex
+            }) }}
+          {% endif %}
         </div>
       {% endfor %}
     </div>