Refactor to load tabs as pages in view licence

app/controllers/licences.controller.js

@@ -24,19 +24,20 @@ async function returnsRequired (request, h) {
   return h.redirect(`/system/return-requirements/${session.id}/start-date`)
 }
 
-async function view (request, h) {
+async function viewSummary (request, h) {
   const { params: { id }, auth } = request
 
   const data = await ViewLicenceService.go(id, auth)
 
   return h.view('licences/view.njk', {
     activeNavBar: 'search',
+    activeTab: 'summary',
     ...data
   })
 }
 
 module.exports = {
   noReturnsRequired,
   returnsRequired,
-  view
+  viewSummary
 }

app/routes/licence.routes.js

@@ -5,8 +5,8 @@ const LicencesController = require('../controllers/licences.controller.js')
 const routes = [
   {
     method: 'GET',
-    path: '/licences/{id}',
-    handler: LicencesController.view,
+    path: '/licences/{id}/summary',
+    handler: LicencesController.viewSummary,
     options: {
       auth: {
         access: {

app/views/licences/view.njk

@@ -5,33 +5,12 @@
 {% from "govuk/components/warning-text/macro.njk" import govukWarningText %}
 
 {% block breadcrumbs %}
-  {{
-    govukBackLink({
-      text: 'Go back to search',
-      href: "/licences"
-    })
-  }}
+  {{ govukBackLink({
+    text: 'Go back to search',
+    href: "/licences"
+  }) }}
 {% endblock %}
 
-{% set summaryTabHtml %}
-  {% include "licences/tabs/summary.njk" %}
-{% endset %}
-
-{% set contactDetailsTabHtml %}
-{% endset %}
-
-{% set returnsTabHtml %}
-{% endset %}
-
-{% set communicationsTabHtml %}
-{% endset %}
-
-{% set billsTabHtml %}
-{% endset %}
-
-{% set chargeInformationTabHtml %}
-{% endset %}
-
 {% block content %}
   {% if warning %}
     {{ govukWarningText({
@@ -52,48 +31,54 @@
   <h1 class="govuk-heading-l">Licence number {{ licenceRef }}</h1>
 
   {% if registeredTo %}
-    <p>Registered to <a href="/user/{{primaryUser.userId}}/status">{{ registeredTo }}</a></p>
+    <p>Registered to <a href="/user/{{ primaryUser.userId }}/status">{{ registeredTo }}</a></p>
   {% endif %}
 
-  {{ govukTabs({
-    items: [
-      {
-        label: "Summary",
-        id: "summary",
-        panel: {
-          html: summaryTabHtml
-        }
-      }, {
-        label: "Contact details",
-        id: "contact-details",
-        panel: {
-          html: contactDetailsTabHtml
-        }
-      }, {
-        label: "Returns",
-        id: "returns",
-        panel: {
-          html: returnsTabHtml
-        }
-      }, {
-        label: "Communications",
-        id: "communications",
-        panel: {
-          html: communicationsTabHtml
-        }
-      }, {
-        label: "Bills",
-        id: "bills",
-        panel: {
-          html: billsTabHtml
-        }
-      } if roles and 'billing' in roles, {
-        label: "Charge information",
-        id: "charge-information",
-        panel: {
-          html: chargeInformationTabHtml
-        }
-      } if roles and 'view_charge_versions' in roles
-    ]
-  }) }}
+  <div class="govuk-tabs">
+    <h2 class="govuk-tabs__title">
+      Contents
+    </h2>
+    <ul class="govuk-tabs__list">
+      <li class="govuk-tabs__list-item {% if activeTab === 'summary' %} govuk-tabs__list-item--selected {% endif %}">
+        <a class="govuk-tabs__tab" href="summary">
+          Summary
+        </a>
+      </li>
+      <li class="govuk-tabs__list-item {% if activeTab === 'contact-details' %} govuk-tabs__list-item--selected {% endif %}">
+        <a class="govuk-tabs__tab" href="contact-details">
+          Contact details
+        </a>
+      </li>
+      <li class="govuk-tabs__list-item {% if activeTab === 'returns' %} govuk-tabs__list-item--selected {% endif %}">
+        <a class="govuk-tabs__tab" href="returns">
+          Returns
+        </a>
+      </li>
+      <li class="govuk-tabs__list-item {% if activeTab === 'communications' %} govuk-tabs__list-item--selected {% endif %}">
+        <a class="govuk-tabs__tab" href="communications">
+          Communications
+        </a>
+      </li>
+      {% if roles and 'billing' in roles %}
+        <li class="govuk-tabs__list-item {% if activeTab === 'bills' %} govuk-tabs__list-item--selected {% endif %}">
+          <a class="govuk-tabs__tab" href="bills">
+            Bills
+          </a>
+        </li>
+      {% endif %}
+      {% if roles and 'view_charge_versions' in roles %}
+        <li class="govuk-tabs__list-item {% if activeTab === 'charge-information' %} govuk-tabs__list-item--selected {% endif %}">
+          <a class="govuk-tabs__tab" href="charge-information">
+            Charge information
+          </a>
+        </li>
+      {% endif %}
+    </ul>
+
+    <div class="govuk-tabs__panel" id="{{ activeTab }}">
+      {% if activeTab === 'summary' %}
+        {% include "licences/tabs/summary.njk" %}
+      {% endif %}
+    </div>
+  </div>
 {% endblock %}

test/controllers/licences.controller.test.js

@@ -150,11 +150,11 @@ describe('Licences controller', () => {
     })
   })
 
-  describe('GET /licences/{id}/', () => {
+  describe('GET /licences/{id}/summary', () => {
     beforeEach(async () => {
       options = {
         method: 'GET',
-        url: '/licences/7861814c-ca19-43f2-be11-3c612f0d744b',
+        url: '/licences/7861814c-ca19-43f2-be11-3c612f0d744b/summary',
         auth: {
           strategy: 'session',
           credentials: { scope: ['billing'] }