Feature content changes (#17)

* feat: change page title and texts changes

* feat: remove change link on view page

* feat: fix typo

app/config/index.js

@@ -49,6 +49,7 @@ const schema = Joi.object({
   isProd: Joi.boolean().default(false),
   port: Joi.number().default(3000),
   serviceName: Joi.string().default('Administration of the health and welfare of your livestock'),
+  siteTitle: Joi.string().default('Back office'),
   backOfficeRequestQueue: {
     address: Joi.string().default('backOfficeRequestQueue'),
     type: Joi.string(),

app/plugins/views.js

@@ -1,6 +1,6 @@
 const path = require('path')
 const nunjucks = require('nunjucks')
-const { isLocal, serviceName } = require('../config')
+const { isLocal, serviceName, siteTitle } = require('../config')
 const { version } = require('../../package.json')
 
 module.exports = {
@@ -35,6 +35,7 @@ module.exports = {
       appVersion: version,
       assetPath: '/assets',
       pageTitle: serviceName,
+      siteTitle,
       serviceName
     }
   }

app/routes/view-application.js

@@ -4,14 +4,15 @@ const { getApplication } = require('../messaging/applications')
 const { administrator, processor, user } = require('../auth/permissions')
 const speciesNumbers = require('../../app/constants/species-numbers')
 const { formatedDateToUk, upperFirstLetter } = require('../lib/display-helper')
+const getStyleClassByStatus = require('../constants/status')
 
 const head = [{ text: 'Date' }, { text: 'Data requested' }, { text: 'Data entered' }]
 
 const getOrganisationRows = (organisation) => {
   return [
-    { key: { text: 'SBI number:' }, value: { text: organisation?.sbi }, actions: { items: [{ href: '#', text: 'Change' }] } },
-    { key: { text: 'Address:' }, value: { text: organisation?.address }, actions: { items: [{ href: '#', text: 'Change' }] } },
-    { key: { text: 'Email address:' }, value: { text: organisation?.email }, actions: { items: [{ href: '#', text: 'Change' }] } }
+    { key: { text: 'SBI number:' }, value: { text: organisation?.sbi } },
+    { key: { text: 'Address:' }, value: { text: organisation?.address } },
+    { key: { text: 'Email address:' }, value: { text: organisation?.email } }
   ]
 }
 
@@ -23,7 +24,7 @@ const getFarmerApplication = (application) => {
     rows: [
       [{ text: formatedDate }, { text: 'Detail correct?' }, { text: upperFirstLetter(data.confirmCheckDetails) }],
       [{ text: formatedDate }, { text: 'Review type' }, { text: upperFirstLetter(data.whichReview) }],
-      [{ text: formatedDate }, { text: 'Lifestock number' }, { text: speciesNumbers[data.whichReview] }],
+      [{ text: formatedDate }, { text: 'Livestock number' }, { text: speciesNumbers[data.whichReview] }],
       [{ text: formatedDate }, { text: 'T&Cs agreed?' }, { text: data.declaration ? 'Yes' : 'No' }]
     ]
   }
@@ -44,9 +45,11 @@ module.exports = {
       if (!application) {
         throw boom.badRequest()
       }
+      const statusClass = getStyleClassByStatus(application.status.status)
       return h.view('view-application', {
         applicationId: application.reference,
         status: application.status.status,
+        statusClass,
         organisationName: application?.data?.organisation?.name,
         applicationData: getFarmerApplication(application),
         listData: { rows: getOrganisationRows(application?.data?.organisation) },

app/views/applications.njk

@@ -1,6 +1,6 @@
 {% extends './layouts/layout.njk' %}
 {% block pageTitle %}
-  {{ siteTitle }} - Applications
+  {{ siteTitle }}: Applications
 {% endblock %}
 
 {% block beforeContent %}
@@ -21,7 +21,7 @@
 
     <div class="user-search-box govuk-!-width-two-thirds">
       <label class="govuk-label govuk-label--s" for="user-search">
-          Search for a application by SBI number or reference or status
+          Search for an application by SBI number or reference or status
         </label>
 
       <form method="POST">

app/views/home.njk

@@ -15,7 +15,7 @@
 <div class="govuk-grid-row">
   <div class="govuk-grid-column-two-thirds">
     <h1 class="govuk-heading-l">{{ serviceName }}</h1>   
-    <a class="govuk-link" href="/applications" >Applicaitons</a>
+    <a class="govuk-link" href="/applications" >Applications</a>
   </div>
 </div>
 {% endblock %}

app/views/layouts/_layout.njk

@@ -35,18 +35,18 @@
 
     {% block header %}
       {{ govukHeader({
-    homepageUrl: "https://www.gov.uk/",
-    containerClasses: "govuk-width-container",
-    serviceName: serviceName,
-    serviceUrl: "/"
-  }) }}
+        homepageUrl: "https://www.gov.uk/",
+        containerClasses: "govuk-width-container",
+        serviceName: serviceName,
+        serviceUrl: "/"
+      }) }}
       <div class="govuk-grid-row govuk-width-container">
         {{ govukPhaseBanner({
-      tag: {
-        text: "beta"
-      },
-      html: 'This is a new service - your <a href="#">feedback</a> will help us to improve it.'
-    }) }}
+          tag: {
+            text: "beta"
+          },
+          html: 'This is a new service - your <a href="#">feedback</a> will help us to improve it.'
+        }) }}
       </div>
     {% endblock %}
 

app/views/view-application.njk

@@ -1,6 +1,7 @@
 {% extends './layouts/layout.njk' %}
 
-{% block pageTitle %}Application {{ applicationId }}
+{% block pageTitle %}
+  {{ siteTitle }}: User Application
 {% endblock %}
 
 {% block beforeContent %}
@@ -12,10 +13,9 @@
 {% block content %}
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-two-thirds">
-      <h1 class="govuk-heading-l">Application {{ applicationId }}
-        <span class="govuk-tag govuk-tag--green">{{ status }}</span></h1>
+      <h1 class="govuk-caption-l govuk-!-margin-bottom-3">Application {{ applicationId }}</h1>
 
-      <h2 class="govuk-heading-m">{{ organisationName }}</h2>
+      <h2 class="govuk-heading-l">{{ organisationName }} <span class="govuk-tag {{ statusClass }}">{{ status }}</span></h2>
       {{ govukSummaryList({
         rows: listData.rows
       }) }}

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ffc-ahwr-backoffice",
-  "version": "1.4.5",
-  "description": "description-of-project-goes-here",
+  "version": "1.4.6",
+  "description": "Back office of the health and welfare of your livestock",
   "homepage": "https://github.com/DEFRA/ffc-ahwr-backoffice",
   "main": "app/index.js",
   "scripts": {

test/integration/narrow/routes/view-application.test.js

@@ -70,21 +70,18 @@ describe('View Application test', () => {
       const res = await global.__SERVER__.inject(options)
       expect(res.statusCode).toBe(200)
       const $ = cheerio.load(res.payload)
-      expect($('h1.govuk-heading-l').text()).toContain(`Application ${reference}`)
-      expect($('h1.govuk-heading-l').text()).toContain('Submitted')
-      expect($('title').text()).toContain(`Application ${reference}`)
+      expect($('h1.govuk-caption-l').text()).toContain(`Application ${reference}`)
+      expect($('h2.govuk-heading-l').text()).toContain('Submitted')
+      expect($('title').text()).toContain('Back office: User Application')
       expect($('.govuk-summary-list__row').length).toEqual(3)
       expect($('.govuk-summary-list__key').eq(0).text()).toMatch('SBI number:')
       expect($('.govuk-summary-list__value').eq(0).text()).toMatch('333333333')
-      expect($('.govuk-summary-list__actions .govuk-link').eq(0).text()).toMatch('Change')
 
       expect($('.govuk-summary-list__key').eq(1).text()).toMatch('Address:')
       expect($('.govuk-summary-list__value').eq(1).text()).toMatch('Long dusty road, Middle-of-knowhere, In the countryside, CC33 3CC')
-      expect($('.govuk-summary-list__actions .govuk-link').eq(1).text()).toMatch('Change')
 
       expect($('.govuk-summary-list__key').eq(2).text()).toMatch('Email address:')
       expect($('.govuk-summary-list__value').eq(2).text()).toMatch('[email protected]')
-      expect($('.govuk-summary-list__actions .govuk-link').eq(2).text()).toMatch('Change')
       expectPhaseBanner.ok($)
     })
   })