Merge pull request #7 from trade-tariff/FPO-345-desc-page

FPO-345

src/controllers/identifyController.ts

@@ -0,0 +1,5 @@
+import { type Request, type Response } from 'express'
+
+export const identifyPage = (req: Request, res: Response): void => {
+  res.render('identifyPage')
+}

src/routes/index.ts

@@ -1,6 +1,7 @@
 import express, { type Request, type Response, type NextFunction } from 'express'
 
 import { HealthchecksController } from '../controllers/healthchecksController'
+import { identifyPage } from '../controllers/identifyController'
 
 const router = express.Router()
 const healthchecksController = new HealthchecksController()
@@ -12,3 +13,5 @@ router.get('/confirmation', (req, res) => { res.render('confirmation') })
 export default router.get('/', (_req: Request, res: Response, _next: NextFunction) => {
   res.render('index')
 })
+
+router.get('/identifyPage', identifyPage)

views/identifyPage.njk

@@ -0,0 +1,60 @@
+{% extends "layout.njk" %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% from "govuk/components/radios/macro.njk" import govukRadios %}
+{% from "govuk/components/inset-text/macro.njk" import govukInsetText %}
+{% block title %}Identify Page{% endblock %}
+{% block content %}
+    <div class="govuk-grid-row">
+        <div class="govuk-grid-column-two-thirds">
+            <h1 class="govuk-heading-xl">Commodi-tea ☕</h1>
+            <p class="govuk-heading-l">Can you identify</p>
+            <h1 class="govuk-heading-l">"Bland and tasteless microwave meals"</h1>
+            <p class="govuk-body">The tool identifies it as a commodity code: 21069098</p>
+            {{ govukInsetText({
+                text: "MISCELLANEOUS EDIBLE PREPARATIONS
+                        - Food preparations not elsewhere specified or included
+                            - Other"
+            }) }}
+            <p class="govuk-body">
+                Look it up on the <a href="https://www.gov.uk/trade-tariff" class="govuk-link">Online Trade Tariff</a>
+            </p>
+            {{ govukRadios({
+            name: "correctCNCode",
+            fieldset: {
+                legend: {
+                text: "Is this the correct 8 digit CN Code?",
+                isPageHeading: true,
+                classes: "govuk-fieldset__legend--l"
+                }
+            },
+            items: [
+                {
+                value: "yes",
+                text: "Yes - it's defintely correct",
+                hint: {
+                    text: "There is enough information in the description that I'm confident it's the right code"
+                    }
+                },
+                {
+                value: "maybe",
+                text: "Maybe",
+                hint: {
+                    text: "It might be the right code, but there's not really enough information to be sure"
+                    }
+                },
+                {
+                value: "no",
+                text: "No",
+                hint: {
+                    text: "It's got it completely wrong!"
+                    }
+                }
+            ]
+            }) }}
+            {{ govukButton({
+                text: "Continue",
+                href: "/confirmation"
+            }) }}
+        </div>
+    </div>
+{% endblock %}

views/index.njk

@@ -18,7 +18,7 @@
             }) }}
             {{ govukButton({
                 text: "☕ Let's get cracking",
-                href: "/",
+                href: "/identifyPage",
                 isStartButton: true
             }) }}