From b4072cbf546fd55675bfbc43f2d16895a9142bbc Mon Sep 17 00:00:00 2001
From: Temi Akinsoto <Temi.Akinsoto@ukhsa.gov.uk>
Date: Wed, 22 Jan 2025 09:10:58 +0000
Subject: [PATCH 01/15] add date input field for feedtypes

---
 src/app/components/cms/Feedback/Feedback.tsx  |  3 +
 .../cms/Feedback/Fields/Date/DateField.tsx    | 62 +++++++++++++++
 .../Feedback/Fields/Date/Datefield.spec.tsx   | 75 +++++++++++++++++++
 .../cms/pages/fixtures/page/feedback.ts       | 13 ++++
 4 files changed, 153 insertions(+)
 create mode 100644 src/app/components/cms/Feedback/Fields/Date/DateField.tsx
 create mode 100644 src/app/components/cms/Feedback/Fields/Date/Datefield.spec.tsx

diff --git a/src/app/components/cms/Feedback/Feedback.tsx b/src/app/components/cms/Feedback/Feedback.tsx
index 64f74a130..50996c81f 100644
--- a/src/app/components/cms/Feedback/Feedback.tsx
+++ b/src/app/components/cms/Feedback/Feedback.tsx
@@ -10,6 +10,7 @@ import { FormField } from '@/api/models/cms/Page/FormFields'
 import { handler } from '../utils/handler'
 import CheckboxField from './Fields/Checkbox/CheckboxField'
 import CheckboxesField from './Fields/Checkboxes/CheckboxesField'
+import DateField from './Fields/Date/DateField'
 import DropdownField from './Fields/Dropdown/DropdownField'
 import EmailField from './Fields/Email/EmailField'
 import MultilineField from './Fields/Multiline/MultilineField'
@@ -168,6 +169,8 @@ export const renderFormFields = (
 
       {fieldType === 'url' && <UrlField label={label} helpText={helpText} cleanName={cleanName} />}
 
+      {fieldType === 'date' && <DateField label={label} helpText={helpText} cleanName={cleanName} />}
+
       {fieldType === 'dropdown' && (
         <DropdownField label={label} helpText={helpText} cleanName={cleanName} choicesList={choicesList} />
       )}
diff --git a/src/app/components/cms/Feedback/Fields/Date/DateField.tsx b/src/app/components/cms/Feedback/Fields/Date/DateField.tsx
new file mode 100644
index 000000000..2c6a2de68
--- /dev/null
+++ b/src/app/components/cms/Feedback/Fields/Date/DateField.tsx
@@ -0,0 +1,62 @@
+import { Fieldtype } from '../../Feedback'
+
+export default function DateField({ label, helpText, cleanName }: Fieldtype) {
+  return (
+    <div className="govuk-form-group">
+      <fieldset className="govuk-fieldset" role="group">
+        <legend className="govuk-fieldset__legend govuk-fieldset__legend--l">
+          <h2 className="govuk-label-wrapper">
+            <label className="govuk-label govuk-label--m" htmlFor={cleanName}>
+              {label}
+            </label>
+          </h2>
+          {helpText.length > 0 ? <div className="govuk-hint">{helpText}</div> : null}
+        </legend>
+        <div className="govuk-date-input" id="passport-issued">
+          <div className="govuk-date-input__item">
+            <div className="govuk-form-group">
+              <label className="govuk-label govuk-date-input__label" htmlFor="day">
+                Day
+              </label>
+              <input
+                className="govuk-input govuk-date-input__input govuk-input--width-2"
+                id="day"
+                name="day"
+                type="number"
+                inputMode="numeric"
+              />
+            </div>
+          </div>
+          <div className="govuk-date-input__item">
+            <div className="govuk-form-group">
+              <label className="govuk-label govuk-date-input__label" htmlFor="month">
+                Month
+              </label>
+              <input
+                className="govuk-input govuk-date-input__input govuk-input--width-2"
+                id="month"
+                name="month"
+                type="number"
+                inputMode="numeric"
+              />
+            </div>
+          </div>
+          <div className="govuk-date-input__item">
+            <div className="govuk-form-group">
+              <label className="govuk-label govuk-date-input__label" htmlFor="year">
+                Year
+              </label>
+              <input
+                className="govuk-input govuk-date-input__input govuk-input--width-4"
+                id="year"
+                name="year"
+                type="number"
+                inputMode="numeric"
+              />
+            </div>
+          </div>
+        </div>
+      </fieldset>
+    </div>
+  )
+}
diff --git a/src/app/components/cms/Feedback/Fields/Date/Datefield.spec.tsx b/src/app/components/cms/Feedback/Fields/Date/Datefield.spec.tsx
new file mode 100644
index 000000000..731786e12
--- /dev/null
+++ b/src/app/components/cms/Feedback/Fields/Date/Datefield.spec.tsx
@@ -0,0 +1,75 @@
+import { render, screen } from '@/config/test-utils'
+
+import DateField from './DateField'
+
+describe('DateField component', () => {
+  const mockProps = {
+    label: 'Date of Birth',
+    helpText: 'Enter a memorable date',
+    cleanName: 'dob',
+  }
+
+  test('renders DateField component with label, helpText, and cleanName props', () => {
+    render(<DateField {...mockProps} />)
+    expect(screen.getByText('Date of Birth')).toBeInTheDocument()
+    expect(screen.getByText('Enter a memorable date')).toBeInTheDocument()
+  })
+
+  test('renders the correct label text', () => {
+    render(<DateField {...mockProps} />)
+    const label = screen.getByText('Date of Birth')
+    expect(label).toBeInTheDocument()
+    expect(label).toHaveAttribute('for', 'dob')
+  })
+
+  test('renders help text when provided', () => {
+    render(<DateField {...mockProps} />)
+    expect(screen.getByText('Enter a memorable date')).toBeInTheDocument()
+  })
+
+  test('does not render help text when empty', () => {
+    render(<DateField label="Date of Birth" helpText="" cleanName="dob" />)
+    const helpText = screen.queryByText('Enter a valid date')
+    expect(helpText).not.toBeInTheDocument()
+  })
+
+  test('renders day, month, and year input fields', () => {
+    render(<DateField {...mockProps} />)
+    const dayInput = screen.getByLabelText(/day/i)
+    const monthInput = screen.getByLabelText(/month/i)
+    const yearInput = screen.getByLabelText(/year/i)
+
+    expect(dayInput).toBeInTheDocument()
+    expect(monthInput).toBeInTheDocument()
+    expect(yearInput).toBeInTheDocument()
+  })
+
+  test('renders labels for Day, Month, and Year', () => {
+    render(<DateField {...mockProps} />)
+
+    // Check for the presence of each label
+    expect(screen.getByLabelText(/day/i)).toBeInTheDocument()
+    expect(screen.getByLabelText(/month/i)).toBeInTheDocument()
+    expect(screen.getByLabelText(/year/i)).toBeInTheDocument()
+  })
+
+  test('input fields have correct attributes', () => {
+    render(<DateField {...mockProps} />)
+
+    const dayInput = screen.getByLabelText(/day/i)
+    const monthInput = screen.getByLabelText(/month/i)
+    const yearInput = screen.getByLabelText(/year/i)
+
+    expect(dayInput).toHaveAttribute('id', 'day')
+    expect(monthInput).toHaveAttribute('id', 'month')
+    expect(yearInput).toHaveAttribute('id', 'year')
+
+    expect(dayInput).toHaveAttribute('name', 'day')
+    expect(monthInput).toHaveAttribute('name', 'month')
+    expect(yearInput).toHaveAttribute('name', 'year')
+
+    expect(dayInput).toHaveAttribute('type', 'number')
+    expect(monthInput).toHaveAttribute('type', 'number')
+    expect(yearInput).toHaveAttribute('type', 'number')
+  })
+})
diff --git a/src/mock-server/handlers/cms/pages/fixtures/page/feedback.ts b/src/mock-server/handlers/cms/pages/fixtures/page/feedback.ts
index bab52cdcb..5593084f4 100644
--- a/src/mock-server/handlers/cms/pages/fixtures/page/feedback.ts
+++ b/src/mock-server/handlers/cms/pages/fixtures/page/feedback.ts
@@ -160,6 +160,19 @@ export const feedbackMock: PageResponse<PageType.Feedback> = {
       choices: '',
       default_value: '',
     },
+    {
+      id: 11,
+      meta: {
+        type: 'forms.FormField',
+      },
+      clean_name: 'enter_a_memorable_date',
+      label: 'Enter a memorable date',
+      field_type: 'date',
+      help_text: 'For example, 31 3 1980',
+      required: false,
+      choices: '',
+      default_value: '',
+    },
   ],
   confirmation_slug: 'confirmation',
   confirmation_panel_title: 'Form submitted',

From 5d3da97deca0aa54e9b0708990c4455a223a00dd Mon Sep 17 00:00:00 2001
From: Temi Akinsoto <Temi.Akinsoto@ukhsa.gov.uk>
Date: Wed, 22 Jan 2025 11:09:42 +0000
Subject: [PATCH 02/15] add datefield day, month, and year values

---
 src/app/components/cms/Feedback/Fields/Date/DateField.tsx | 8 ++++----
 .../cms/Feedback/Fields/Date/Datefield.spec.tsx           | 6 +++---
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/app/components/cms/Feedback/Fields/Date/DateField.tsx b/src/app/components/cms/Feedback/Fields/Date/DateField.tsx
index 2c6a2de68..b249fb6ea 100644
--- a/src/app/components/cms/Feedback/Fields/Date/DateField.tsx
+++ b/src/app/components/cms/Feedback/Fields/Date/DateField.tsx
@@ -12,7 +12,7 @@ export default function DateField({ label, helpText, cleanName }: Fieldtype) {
           </h2>
           {helpText.length > 0 ? <div className="govuk-hint">{helpText}</div> : null}
         </legend>
-        <div className="govuk-date-input" id="passport-issued">
+        <div className="govuk-date-input" id={cleanName}>
           <div className="govuk-date-input__item">
             <div className="govuk-form-group">
               <label className="govuk-label govuk-date-input__label" htmlFor="day">
@@ -21,7 +21,7 @@ export default function DateField({ label, helpText, cleanName }: Fieldtype) {
               <input
                 className="govuk-input govuk-date-input__input govuk-input--width-2"
                 id="day"
-                name="day"
+                name={`${cleanName}-day`}
                 type="number"
                 inputMode="numeric"
               />
@@ -35,7 +35,7 @@ export default function DateField({ label, helpText, cleanName }: Fieldtype) {
               <input
                 className="govuk-input govuk-date-input__input govuk-input--width-2"
                 id="month"
-                name="month"
+                name={`${cleanName}-month`}
                 type="number"
                 inputMode="numeric"
               />
@@ -49,7 +49,7 @@ export default function DateField({ label, helpText, cleanName }: Fieldtype) {
               <input
                 className="govuk-input govuk-date-input__input govuk-input--width-4"
                 id="year"
-                name="year"
+                name={`${cleanName}-year`}
                 type="number"
                 inputMode="numeric"
               />
diff --git a/src/app/components/cms/Feedback/Fields/Date/Datefield.spec.tsx b/src/app/components/cms/Feedback/Fields/Date/Datefield.spec.tsx
index 731786e12..34e942235 100644
--- a/src/app/components/cms/Feedback/Fields/Date/Datefield.spec.tsx
+++ b/src/app/components/cms/Feedback/Fields/Date/Datefield.spec.tsx
@@ -64,9 +64,9 @@ describe('DateField component', () => {
     expect(monthInput).toHaveAttribute('id', 'month')
     expect(yearInput).toHaveAttribute('id', 'year')
 
-    expect(dayInput).toHaveAttribute('name', 'day')
-    expect(monthInput).toHaveAttribute('name', 'month')
-    expect(yearInput).toHaveAttribute('name', 'year')
+    expect(dayInput).toHaveAttribute('name', 'dob-day')
+    expect(monthInput).toHaveAttribute('name', 'dob-month')
+    expect(yearInput).toHaveAttribute('name', 'dob-year')
 
     expect(dayInput).toHaveAttribute('type', 'number')
     expect(monthInput).toHaveAttribute('type', 'number')

From 202b070dc680a0745f438c1da152e863daafd01f Mon Sep 17 00:00:00 2001
From: Temi Akinsoto <Temi.Akinsoto@ukhsa.gov.uk>
Date: Thu, 23 Jan 2025 09:23:57 +0000
Subject: [PATCH 03/15] add logic for submitting date dd-mm-yyyy

---
 .../cms/Feedback/Fields/Date/DateField.tsx    |  2 ++
 src/app/components/cms/utils/handler.ts       | 28 +++++++++++++++++++
 2 files changed, 30 insertions(+)

diff --git a/src/app/components/cms/Feedback/Fields/Date/DateField.tsx b/src/app/components/cms/Feedback/Fields/Date/DateField.tsx
index b249fb6ea..43762cad8 100644
--- a/src/app/components/cms/Feedback/Fields/Date/DateField.tsx
+++ b/src/app/components/cms/Feedback/Fields/Date/DateField.tsx
@@ -3,6 +3,8 @@ import { Fieldtype } from '../../Feedback'
 export default function DateField({ label, helpText, cleanName }: Fieldtype) {
   return (
     <div className="govuk-form-group">
+      {/*Hidden input field for collecting date in format dd-mm-yyyy*/}
+      <input className="govuk-visually-hidden" name={cleanName} id={cleanName} type="text" />
       <fieldset className="govuk-fieldset" role="group">
         <legend className="govuk-fieldset__legend govuk-fieldset__legend--l">
           <h2 className="govuk-label-wrapper">
diff --git a/src/app/components/cms/utils/handler.ts b/src/app/components/cms/utils/handler.ts
index c9dd102de..e01757622 100644
--- a/src/app/components/cms/utils/handler.ts
+++ b/src/app/components/cms/utils/handler.ts
@@ -28,6 +28,32 @@ interface FieldError {
   label: string
 }
 
+// Helper function to concatenate day, month, and year into a single date field
+function updateMemorableDate(formData: FormData): FormData {
+  const day = formData.get('enter_a_memorable_date-day')
+  const month = formData.get('enter_a_memorable_date-month')
+  const year = formData.get('enter_a_memorable_date-year')
+
+  // If day, month, and year are all present, concatenate them into a single field
+  if (day && month && year) {
+    const memorableDate = `${day}-${month}-${year}`
+
+    // Create a new FormData object based on the existing formData
+    const updatedFormData = formData
+
+    // Set the concatenated memorable date and remove the individual day, month, and year fields
+    updatedFormData.set('enter_a_memorable_date', memorableDate)
+    updatedFormData.delete('enter_a_memorable_date-day')
+    updatedFormData.delete('enter_a_memorable_date-month')
+    updatedFormData.delete('enter_a_memorable_date-year')
+
+    return updatedFormData
+  }
+
+  // Return the formData as is if no date fields are provided
+  return formData
+}
+
 export async function handler(formFields: FormFields[], prevState: FormError, formData: FormData) {
   try {
     const requiredFields: FieldError[] = []
@@ -51,6 +77,8 @@ export async function handler(formFields: FormFields[], prevState: FormError, fo
       }
     })
 
+    formData = updateMemorableDate(formData)
+
     //if there are errors then return errors to the front end
     if (errors.length > 0) {
       return {

From e56807fbfe242b67e6f12b3137523a7a8f85431d Mon Sep 17 00:00:00 2001
From: Temi Akinsoto <Temi.Akinsoto@ukhsa.gov.uk>
Date: Thu, 23 Jan 2025 16:29:33 +0000
Subject: [PATCH 04/15] resuse <Date > component for datetime field type

---
 src/app/components/cms/Feedback/Feedback.tsx        |  2 ++
 .../handlers/cms/pages/fixtures/page/feedback.ts    | 13 +++++++++++++
 2 files changed, 15 insertions(+)

diff --git a/src/app/components/cms/Feedback/Feedback.tsx b/src/app/components/cms/Feedback/Feedback.tsx
index 50996c81f..1d32f02df 100644
--- a/src/app/components/cms/Feedback/Feedback.tsx
+++ b/src/app/components/cms/Feedback/Feedback.tsx
@@ -171,6 +171,8 @@ export const renderFormFields = (
 
       {fieldType === 'date' && <DateField label={label} helpText={helpText} cleanName={cleanName} />}
 
+      {fieldType === 'datetime' && <DateField label={label} helpText={helpText} cleanName={cleanName} />}
+
       {fieldType === 'dropdown' && (
         <DropdownField label={label} helpText={helpText} cleanName={cleanName} choicesList={choicesList} />
       )}
diff --git a/src/mock-server/handlers/cms/pages/fixtures/page/feedback.ts b/src/mock-server/handlers/cms/pages/fixtures/page/feedback.ts
index 5593084f4..8e7a5bf2d 100644
--- a/src/mock-server/handlers/cms/pages/fixtures/page/feedback.ts
+++ b/src/mock-server/handlers/cms/pages/fixtures/page/feedback.ts
@@ -173,6 +173,19 @@ export const feedbackMock: PageResponse<PageType.Feedback> = {
       choices: '',
       default_value: '',
     },
+    {
+      id: 12,
+      meta: {
+        type: 'forms.FormField',
+      },
+      clean_name: 'enter_a_memorable_date',
+      label: 'Enter a memorable date',
+      field_type: 'datetime',
+      help_text: 'For example, 31 3 1980',
+      required: false,
+      choices: '',
+      default_value: '',
+    },
   ],
   confirmation_slug: 'confirmation',
   confirmation_panel_title: 'Form submitted',

From 29bbe4592cba3bb5116546b5e741366ffe5a97b6 Mon Sep 17 00:00:00 2001
From: Temi Akinsoto <Temi.Akinsoto@ukhsa.gov.uk>
Date: Fri, 24 Jan 2025 15:58:44 +0000
Subject: [PATCH 05/15] extract helper function into separate file

---
 src/app/components/cms/utils/handler.ts | 28 ++-----------------------
 1 file changed, 2 insertions(+), 26 deletions(-)

diff --git a/src/app/components/cms/utils/handler.ts b/src/app/components/cms/utils/handler.ts
index e01757622..c25240d83 100644
--- a/src/app/components/cms/utils/handler.ts
+++ b/src/app/components/cms/utils/handler.ts
@@ -6,6 +6,8 @@ import { postSuggestions } from '@/api/requests/suggestions/postSuggestions'
 import { logger } from '@/lib/logger'
 import { feedbackSchema } from '@/schemas/feedback.schema'
 
+import { updateMemorableDate } from './updatedate'
+
 interface FormError {
   message: string
   errors: FieldError[]
@@ -28,32 +30,6 @@ interface FieldError {
   label: string
 }
 
-// Helper function to concatenate day, month, and year into a single date field
-function updateMemorableDate(formData: FormData): FormData {
-  const day = formData.get('enter_a_memorable_date-day')
-  const month = formData.get('enter_a_memorable_date-month')
-  const year = formData.get('enter_a_memorable_date-year')
-
-  // If day, month, and year are all present, concatenate them into a single field
-  if (day && month && year) {
-    const memorableDate = `${day}-${month}-${year}`
-
-    // Create a new FormData object based on the existing formData
-    const updatedFormData = formData
-
-    // Set the concatenated memorable date and remove the individual day, month, and year fields
-    updatedFormData.set('enter_a_memorable_date', memorableDate)
-    updatedFormData.delete('enter_a_memorable_date-day')
-    updatedFormData.delete('enter_a_memorable_date-month')
-    updatedFormData.delete('enter_a_memorable_date-year')
-
-    return updatedFormData
-  }
-
-  // Return the formData as is if no date fields are provided
-  return formData
-}
-
 export async function handler(formFields: FormFields[], prevState: FormError, formData: FormData) {
   try {
     const requiredFields: FieldError[] = []

From 4f72d93d111c55a5eb1eec7da373ed3b6a9c9db6 Mon Sep 17 00:00:00 2001
From: Temi Akinsoto <Temi.Akinsoto@ukhsa.gov.uk>
Date: Fri, 24 Jan 2025 17:09:04 +0000
Subject: [PATCH 06/15] update date functionality with unit test

---
 .../components/cms/utils/updatedate.spec.ts   | 41 +++++++++++++++++++
 src/app/components/cms/utils/updatedate.ts    | 25 +++++++++++
 2 files changed, 66 insertions(+)
 create mode 100644 src/app/components/cms/utils/updatedate.spec.ts
 create mode 100644 src/app/components/cms/utils/updatedate.ts

diff --git a/src/app/components/cms/utils/updatedate.spec.ts b/src/app/components/cms/utils/updatedate.spec.ts
new file mode 100644
index 000000000..627082c39
--- /dev/null
+++ b/src/app/components/cms/utils/updatedate.spec.ts
@@ -0,0 +1,41 @@
+import { updateMemorableDate } from './updatedate'
+
+describe('updateMemorableDate', () => {
+  it('should correctly concatenate day, month, and year into a memorable date', () => {
+    // Create mock FormData with day, month, and year
+    const formData = new FormData()
+    formData.set('enter_a_memorable_date-day', '24')
+    formData.set('enter_a_memorable_date-month', '01')
+    formData.set('enter_a_memorable_date-year', '2025')
+
+    const updatedFormData = updateMemorableDate(formData)
+
+    // Assert that the memorable date is set and the individual fields are removed
+    expect(updatedFormData.get('enter_a_memorable_date')).toBe('24-01-2025')
+    expect(updatedFormData.has('enter_a_memorable_date-day')).toBe(false)
+    expect(updatedFormData.has('enter_a_memorable_date-month')).toBe(false)
+    expect(updatedFormData.has('enter_a_memorable_date-year')).toBe(false)
+  })
+
+  it('should not change formData if any date fields are missing', () => {
+    // Create mock FormData missing the day
+    const formData = new FormData()
+    formData.set('enter_a_memorable_date-month', '12')
+    formData.set('enter_a_memorable_date-year', '2025')
+
+    const updatedFormData = updateMemorableDate(formData)
+
+    // Assert that the form data remains unchanged
+    expect(updatedFormData.get('enter_a_memorable_date')).toBeNull()
+  })
+
+  it('should return the original FormData when no date fields are provided', () => {
+    // Create mock FormData without any date fields
+    const formData = new FormData()
+
+    const updatedFormData = updateMemorableDate(formData)
+
+    // Assert that no changes are made
+    expect(updatedFormData.get('enter_a_memorable_date')).toBeNull()
+  })
+})
diff --git a/src/app/components/cms/utils/updatedate.ts b/src/app/components/cms/utils/updatedate.ts
new file mode 100644
index 000000000..5f0ed7835
--- /dev/null
+++ b/src/app/components/cms/utils/updatedate.ts
@@ -0,0 +1,25 @@
+// Helper function to concatenate day, month, and year into a single date field
+export function updateMemorableDate(formData: FormData): FormData {
+  const day = formData.get('enter_a_memorable_date-day')
+  const month = formData.get('enter_a_memorable_date-month')
+  const year = formData.get('enter_a_memorable_date-year')
+
+  // If day, month, and year are all present, concatenate them into a single field
+  if (day && month && year) {
+    const memorableDate = `${day}-${month}-${year}`
+
+    // Create a new FormData object based on the existing formData
+    const updatedFormData = formData
+
+    // Set the concatenated memorable date and remove the individual day, month, and year fields
+    updatedFormData.set('enter_a_memorable_date', memorableDate)
+    updatedFormData.delete('enter_a_memorable_date-day')
+    updatedFormData.delete('enter_a_memorable_date-month')
+    updatedFormData.delete('enter_a_memorable_date-year')
+
+    return updatedFormData
+  }
+
+  // Return the formData as is if no date fields are provided
+  return formData
+}

From db235a1e298db0e2a31305e726e2789f749bb427 Mon Sep 17 00:00:00 2001
From: Temi Akinsoto <Temi.Akinsoto@ukhsa.gov.uk>
Date: Wed, 29 Jan 2025 09:38:18 +0000
Subject: [PATCH 07/15] add validation to Datefield field type

---
 src/app/components/cms/Feedback/Feedback.tsx   | 10 ++++++----
 .../cms/Feedback/Fields/Date/DateField.tsx     | 18 +++++++++++++++---
 .../cms/pages/fixtures/page/feedback.ts        |  2 +-
 3 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/src/app/components/cms/Feedback/Feedback.tsx b/src/app/components/cms/Feedback/Feedback.tsx
index 1d32f02df..6ff330de9 100644
--- a/src/app/components/cms/Feedback/Feedback.tsx
+++ b/src/app/components/cms/Feedback/Feedback.tsx
@@ -167,11 +167,13 @@ export const renderFormFields = (
 
       {fieldType === 'number' && <NumberField label={label} helpText={helpText} cleanName={cleanName} />}
 
-      {fieldType === 'url' && <UrlField label={label} helpText={helpText} cleanName={cleanName} />}
-
-      {fieldType === 'date' && <DateField label={label} helpText={helpText} cleanName={cleanName} />}
+      {fieldType === 'url' && (
+        <UrlField label={label} helpText={helpText} cleanName={cleanName} fieldHasError={fieldHasError} />
+      )}
 
-      {fieldType === 'datetime' && <DateField label={label} helpText={helpText} cleanName={cleanName} />}
+      {fieldType === 'date' && (
+        <DateField label={label} helpText={helpText} cleanName={cleanName} fieldHasError={fieldHasError} />
+      )}
 
       {fieldType === 'dropdown' && (
         <DropdownField label={label} helpText={helpText} cleanName={cleanName} choicesList={choicesList} />
diff --git a/src/app/components/cms/Feedback/Fields/Date/DateField.tsx b/src/app/components/cms/Feedback/Fields/Date/DateField.tsx
index 43762cad8..a82be8b30 100644
--- a/src/app/components/cms/Feedback/Fields/Date/DateField.tsx
+++ b/src/app/components/cms/Feedback/Fields/Date/DateField.tsx
@@ -1,19 +1,31 @@
+import clsx from 'clsx'
+
 import { Fieldtype } from '../../Feedback'
 
-export default function DateField({ label, helpText, cleanName }: Fieldtype) {
+export default function DateField({ label, helpText, cleanName, fieldHasError }: Fieldtype) {
   return (
-    <div className="govuk-form-group">
+    <div className={clsx('govuk-form-group govuk-!-margin-bottom-9', { 'govuk-form-group--error': fieldHasError })}>
       {/*Hidden input field for collecting date in format dd-mm-yyyy*/}
       <input className="govuk-visually-hidden" name={cleanName} id={cleanName} type="text" />
       <fieldset className="govuk-fieldset" role="group">
         <legend className="govuk-fieldset__legend govuk-fieldset__legend--l">
           <h2 className="govuk-label-wrapper">
-            <label className="govuk-label govuk-label--m" htmlFor={cleanName}>
+            <label
+              className={clsx('govuk-label govuk-label--m', { 'govuk-error-message': fieldHasError })}
+              htmlFor={cleanName}
+            >
               {label}
             </label>
           </h2>
           {helpText.length > 0 ? <div className="govuk-hint">{helpText}</div> : null}
         </legend>
+
+        {fieldHasError ? (
+          <p id="multiline-error" className="govuk-error-message">
+            <span className="govuk-visually-hidden">Error:</span> Please select at least one of the below options
+          </p>
+        ) : null}
+
         <div className="govuk-date-input" id={cleanName}>
           <div className="govuk-date-input__item">
             <div className="govuk-form-group">
diff --git a/src/mock-server/handlers/cms/pages/fixtures/page/feedback.ts b/src/mock-server/handlers/cms/pages/fixtures/page/feedback.ts
index 8e7a5bf2d..d6f60edc2 100644
--- a/src/mock-server/handlers/cms/pages/fixtures/page/feedback.ts
+++ b/src/mock-server/handlers/cms/pages/fixtures/page/feedback.ts
@@ -169,7 +169,7 @@ export const feedbackMock: PageResponse<PageType.Feedback> = {
       label: 'Enter a memorable date',
       field_type: 'date',
       help_text: 'For example, 31 3 1980',
-      required: false,
+      required: true,
       choices: '',
       default_value: '',
     },

From e48369085bef1e11979257e8e24774d2e44629ee Mon Sep 17 00:00:00 2001
From: Temi Akinsoto <Temi.Akinsoto@ukhsa.gov.uk>
Date: Thu, 30 Jan 2025 10:48:31 +0000
Subject: [PATCH 08/15] Add validation to DateField Component:

In this commit adds hidden input state for validation
This slice of state is updated when all date fields(day,month,year) are filled.
The updated state is then sent as the form value for cleanName: enter_a_memorable_date
---
 .../cms/Feedback/Fields/Date/DateField.tsx    | 61 ++++++++++++++++---
 .../Feedback/Fields/Date/Datefield.spec.tsx   |  6 +-
 src/app/components/cms/utils/handler.ts       |  5 +-
 3 files changed, 57 insertions(+), 15 deletions(-)

diff --git a/src/app/components/cms/Feedback/Fields/Date/DateField.tsx b/src/app/components/cms/Feedback/Fields/Date/DateField.tsx
index a82be8b30..1137e0f16 100644
--- a/src/app/components/cms/Feedback/Fields/Date/DateField.tsx
+++ b/src/app/components/cms/Feedback/Fields/Date/DateField.tsx
@@ -1,12 +1,43 @@
 import clsx from 'clsx'
+import { useEffect, useState } from 'react'
 
 import { Fieldtype } from '../../Feedback'
 
+interface DateData {
+  day: string
+  month: string
+  year: string
+}
+
 export default function DateField({ label, helpText, cleanName, fieldHasError }: Fieldtype) {
+  const [hiddenDateInput, setHiddenDateInput] = useState<string>('')
+  const [dateData, setDateData] = useState<DateData>({
+    day: '',
+    month: '',
+    year: '',
+  })
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target
+
+    setDateData((prev) => ({
+      ...prev,
+      [name]: value,
+    }))
+  }
+
+  useEffect(() => {
+    if (dateData.day && dateData.month && dateData.year) {
+      setHiddenDateInput(`${dateData.day}-${dateData.month}-${dateData.year}`)
+    } else {
+      setHiddenDateInput('')
+    }
+  }, [dateData])
+
   return (
     <div className={clsx('govuk-form-group govuk-!-margin-bottom-9', { 'govuk-form-group--error': fieldHasError })}>
-      {/*Hidden input field for collecting date in format dd-mm-yyyy*/}
-      <input className="govuk-visually-hidden" name={cleanName} id={cleanName} type="text" />
+      {/* Hidden input field for collecting date in format dd-mm-yyyy */}
+      <input className="govuk-visually-hidden" name={cleanName} type="text" value={hiddenDateInput} />
       <fieldset className="govuk-fieldset" role="group">
         <legend className="govuk-fieldset__legend govuk-fieldset__legend--l">
           <h2 className="govuk-label-wrapper">
@@ -22,7 +53,7 @@ export default function DateField({ label, helpText, cleanName, fieldHasError }:
 
         {fieldHasError ? (
           <p id="multiline-error" className="govuk-error-message">
-            <span className="govuk-visually-hidden">Error:</span> Please select at least one of the below options
+            <span className="govuk-visually-hidden">Error:</span> Please enter a valid date
           </p>
         ) : null}
 
@@ -33,9 +64,13 @@ export default function DateField({ label, helpText, cleanName, fieldHasError }:
                 Day
               </label>
               <input
-                className="govuk-input govuk-date-input__input govuk-input--width-2"
+                className={clsx('govuk-input govuk-date-input__input govuk-input--width-2', {
+                  'govuk-textarea--error': fieldHasError,
+                })}
                 id="day"
-                name={`${cleanName}-day`}
+                name="day" // Bind name directly to the key
+                value={dateData.day} // Bind to dateData.day
+                onChange={handleChange}
                 type="number"
                 inputMode="numeric"
               />
@@ -47,9 +82,13 @@ export default function DateField({ label, helpText, cleanName, fieldHasError }:
                 Month
               </label>
               <input
-                className="govuk-input govuk-date-input__input govuk-input--width-2"
+                className={clsx('govuk-input govuk-date-input__input govuk-input--width-2', {
+                  'govuk-textarea--error': fieldHasError,
+                })}
                 id="month"
-                name={`${cleanName}-month`}
+                name="month"
+                value={dateData.month}
+                onChange={handleChange}
                 type="number"
                 inputMode="numeric"
               />
@@ -61,9 +100,13 @@ export default function DateField({ label, helpText, cleanName, fieldHasError }:
                 Year
               </label>
               <input
-                className="govuk-input govuk-date-input__input govuk-input--width-4"
+                className={clsx('govuk-input govuk-date-input__input govuk-input--width-4', {
+                  'govuk-textarea--error': fieldHasError,
+                })}
                 id="year"
-                name={`${cleanName}-year`}
+                name="year"
+                value={dateData.year}
+                onChange={handleChange}
                 type="number"
                 inputMode="numeric"
               />
diff --git a/src/app/components/cms/Feedback/Fields/Date/Datefield.spec.tsx b/src/app/components/cms/Feedback/Fields/Date/Datefield.spec.tsx
index 34e942235..731786e12 100644
--- a/src/app/components/cms/Feedback/Fields/Date/Datefield.spec.tsx
+++ b/src/app/components/cms/Feedback/Fields/Date/Datefield.spec.tsx
@@ -64,9 +64,9 @@ describe('DateField component', () => {
     expect(monthInput).toHaveAttribute('id', 'month')
     expect(yearInput).toHaveAttribute('id', 'year')
 
-    expect(dayInput).toHaveAttribute('name', 'dob-day')
-    expect(monthInput).toHaveAttribute('name', 'dob-month')
-    expect(yearInput).toHaveAttribute('name', 'dob-year')
+    expect(dayInput).toHaveAttribute('name', 'day')
+    expect(monthInput).toHaveAttribute('name', 'month')
+    expect(yearInput).toHaveAttribute('name', 'year')
 
     expect(dayInput).toHaveAttribute('type', 'number')
     expect(monthInput).toHaveAttribute('type', 'number')
diff --git a/src/app/components/cms/utils/handler.ts b/src/app/components/cms/utils/handler.ts
index c25240d83..e9a3592b6 100644
--- a/src/app/components/cms/utils/handler.ts
+++ b/src/app/components/cms/utils/handler.ts
@@ -6,8 +6,6 @@ import { postSuggestions } from '@/api/requests/suggestions/postSuggestions'
 import { logger } from '@/lib/logger'
 import { feedbackSchema } from '@/schemas/feedback.schema'
 
-import { updateMemorableDate } from './updatedate'
-
 interface FormError {
   message: string
   errors: FieldError[]
@@ -53,7 +51,8 @@ export async function handler(formFields: FormFields[], prevState: FormError, fo
       }
     })
 
-    formData = updateMemorableDate(formData)
+    //TODO: Remove console log statement, after review
+    //formData = updateMemorableDate(formData)
 
     //if there are errors then return errors to the front end
     if (errors.length > 0) {

From 8202e73f3b85405389e05a6fc8e3508a6d126db0 Mon Sep 17 00:00:00 2001
From: Temi Akinsoto <Temi.Akinsoto@ukhsa.gov.uk>
Date: Thu, 30 Jan 2025 11:20:36 +0000
Subject: [PATCH 09/15] add min and max values for day, month and year input
 fields

---
 src/app/components/cms/Feedback/Fields/Date/DateField.tsx  | 6 ++++++
 .../components/cms/Feedback/Fields/Date/Datefield.spec.tsx | 7 +++++++
 src/app/components/cms/utils/handler.ts                    | 2 ++
 3 files changed, 15 insertions(+)

diff --git a/src/app/components/cms/Feedback/Fields/Date/DateField.tsx b/src/app/components/cms/Feedback/Fields/Date/DateField.tsx
index 1137e0f16..e0645342e 100644
--- a/src/app/components/cms/Feedback/Fields/Date/DateField.tsx
+++ b/src/app/components/cms/Feedback/Fields/Date/DateField.tsx
@@ -73,6 +73,8 @@ export default function DateField({ label, helpText, cleanName, fieldHasError }:
                 onChange={handleChange}
                 type="number"
                 inputMode="numeric"
+                min={1}
+                max={31}
               />
             </div>
           </div>
@@ -91,6 +93,8 @@ export default function DateField({ label, helpText, cleanName, fieldHasError }:
                 onChange={handleChange}
                 type="number"
                 inputMode="numeric"
+                min={1}
+                max={12}
               />
             </div>
           </div>
@@ -109,6 +113,8 @@ export default function DateField({ label, helpText, cleanName, fieldHasError }:
                 onChange={handleChange}
                 type="number"
                 inputMode="numeric"
+                min={1900}
+                max={2100}
               />
             </div>
           </div>
diff --git a/src/app/components/cms/Feedback/Fields/Date/Datefield.spec.tsx b/src/app/components/cms/Feedback/Fields/Date/Datefield.spec.tsx
index 731786e12..207ec9c36 100644
--- a/src/app/components/cms/Feedback/Fields/Date/Datefield.spec.tsx
+++ b/src/app/components/cms/Feedback/Fields/Date/Datefield.spec.tsx
@@ -71,5 +71,12 @@ describe('DateField component', () => {
     expect(dayInput).toHaveAttribute('type', 'number')
     expect(monthInput).toHaveAttribute('type', 'number')
     expect(yearInput).toHaveAttribute('type', 'number')
+
+    expect(dayInput).toHaveAttribute('min', '1')
+    expect(dayInput).toHaveAttribute('max', '31')
+    expect(monthInput).toHaveAttribute('min', '1')
+    expect(monthInput).toHaveAttribute('max', '12')
+    expect(yearInput).toHaveAttribute('min', '1900')
+    expect(yearInput).toHaveAttribute('max', '2100')
   })
 })
diff --git a/src/app/components/cms/utils/handler.ts b/src/app/components/cms/utils/handler.ts
index e9a3592b6..fac85b37f 100644
--- a/src/app/components/cms/utils/handler.ts
+++ b/src/app/components/cms/utils/handler.ts
@@ -54,6 +54,8 @@ export async function handler(formFields: FormFields[], prevState: FormError, fo
     //TODO: Remove console log statement, after review
     //formData = updateMemorableDate(formData)
 
+    console.log('Form data, ', formData)
+
     //if there are errors then return errors to the front end
     if (errors.length > 0) {
       return {

From 5f6f0488001ef5648bcce6dde9b96b642e2187bc Mon Sep 17 00:00:00 2001
From: Temi Akinsoto <Temi.Akinsoto@ukhsa.gov.uk>
Date: Thu, 30 Jan 2025 11:24:09 +0000
Subject: [PATCH 10/15] rm console statements

---
 src/app/components/cms/utils/handler.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/app/components/cms/utils/handler.ts b/src/app/components/cms/utils/handler.ts
index fac85b37f..e9a3592b6 100644
--- a/src/app/components/cms/utils/handler.ts
+++ b/src/app/components/cms/utils/handler.ts
@@ -54,8 +54,6 @@ export async function handler(formFields: FormFields[], prevState: FormError, fo
     //TODO: Remove console log statement, after review
     //formData = updateMemorableDate(formData)
 
-    console.log('Form data, ', formData)
-
     //if there are errors then return errors to the front end
     if (errors.length > 0) {
       return {

From 7d3f00d3450a219d3cab79de307da83df3093e3b Mon Sep 17 00:00:00 2001
From: Temiakinsoto <temi.akinsoto@ukhsa.gov.uk>
Date: Mon, 3 Feb 2025 09:50:13 +0000
Subject: [PATCH 11/15] remove unused updateMemorableDate function

---
 src/app/components/cms/utils/handler.ts       |  3 --
 .../components/cms/utils/updatedate.spec.ts   | 41 -------------------
 src/app/components/cms/utils/updatedate.ts    | 25 -----------
 3 files changed, 69 deletions(-)
 delete mode 100644 src/app/components/cms/utils/updatedate.spec.ts
 delete mode 100644 src/app/components/cms/utils/updatedate.ts

diff --git a/src/app/components/cms/utils/handler.ts b/src/app/components/cms/utils/handler.ts
index e9a3592b6..c9dd102de 100644
--- a/src/app/components/cms/utils/handler.ts
+++ b/src/app/components/cms/utils/handler.ts
@@ -51,9 +51,6 @@ export async function handler(formFields: FormFields[], prevState: FormError, fo
       }
     })
 
-    //TODO: Remove console log statement, after review
-    //formData = updateMemorableDate(formData)
-
     //if there are errors then return errors to the front end
     if (errors.length > 0) {
       return {
diff --git a/src/app/components/cms/utils/updatedate.spec.ts b/src/app/components/cms/utils/updatedate.spec.ts
deleted file mode 100644
index 627082c39..000000000
--- a/src/app/components/cms/utils/updatedate.spec.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import { updateMemorableDate } from './updatedate'
-
-describe('updateMemorableDate', () => {
-  it('should correctly concatenate day, month, and year into a memorable date', () => {
-    // Create mock FormData with day, month, and year
-    const formData = new FormData()
-    formData.set('enter_a_memorable_date-day', '24')
-    formData.set('enter_a_memorable_date-month', '01')
-    formData.set('enter_a_memorable_date-year', '2025')
-
-    const updatedFormData = updateMemorableDate(formData)
-
-    // Assert that the memorable date is set and the individual fields are removed
-    expect(updatedFormData.get('enter_a_memorable_date')).toBe('24-01-2025')
-    expect(updatedFormData.has('enter_a_memorable_date-day')).toBe(false)
-    expect(updatedFormData.has('enter_a_memorable_date-month')).toBe(false)
-    expect(updatedFormData.has('enter_a_memorable_date-year')).toBe(false)
-  })
-
-  it('should not change formData if any date fields are missing', () => {
-    // Create mock FormData missing the day
-    const formData = new FormData()
-    formData.set('enter_a_memorable_date-month', '12')
-    formData.set('enter_a_memorable_date-year', '2025')
-
-    const updatedFormData = updateMemorableDate(formData)
-
-    // Assert that the form data remains unchanged
-    expect(updatedFormData.get('enter_a_memorable_date')).toBeNull()
-  })
-
-  it('should return the original FormData when no date fields are provided', () => {
-    // Create mock FormData without any date fields
-    const formData = new FormData()
-
-    const updatedFormData = updateMemorableDate(formData)
-
-    // Assert that no changes are made
-    expect(updatedFormData.get('enter_a_memorable_date')).toBeNull()
-  })
-})
diff --git a/src/app/components/cms/utils/updatedate.ts b/src/app/components/cms/utils/updatedate.ts
deleted file mode 100644
index 5f0ed7835..000000000
--- a/src/app/components/cms/utils/updatedate.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-// Helper function to concatenate day, month, and year into a single date field
-export function updateMemorableDate(formData: FormData): FormData {
-  const day = formData.get('enter_a_memorable_date-day')
-  const month = formData.get('enter_a_memorable_date-month')
-  const year = formData.get('enter_a_memorable_date-year')
-
-  // If day, month, and year are all present, concatenate them into a single field
-  if (day && month && year) {
-    const memorableDate = `${day}-${month}-${year}`
-
-    // Create a new FormData object based on the existing formData
-    const updatedFormData = formData
-
-    // Set the concatenated memorable date and remove the individual day, month, and year fields
-    updatedFormData.set('enter_a_memorable_date', memorableDate)
-    updatedFormData.delete('enter_a_memorable_date-day')
-    updatedFormData.delete('enter_a_memorable_date-month')
-    updatedFormData.delete('enter_a_memorable_date-year')
-
-    return updatedFormData
-  }
-
-  // Return the formData as is if no date fields are provided
-  return formData
-}

From b17f2eed7c48dba67e0f249673a255a6ab1c210a Mon Sep 17 00:00:00 2001
From: Temiakinsoto <temi.akinsoto@ukhsa.gov.uk>
Date: Thu, 6 Feb 2025 10:46:25 +0000
Subject: [PATCH 12/15] add aria labele to hidden input field

---
 src/app/components/cms/Feedback/Fields/Date/DateField.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/app/components/cms/Feedback/Fields/Date/DateField.tsx b/src/app/components/cms/Feedback/Fields/Date/DateField.tsx
index e0645342e..0654a3814 100644
--- a/src/app/components/cms/Feedback/Fields/Date/DateField.tsx
+++ b/src/app/components/cms/Feedback/Fields/Date/DateField.tsx
@@ -37,7 +37,13 @@ export default function DateField({ label, helpText, cleanName, fieldHasError }:
   return (
     <div className={clsx('govuk-form-group govuk-!-margin-bottom-9', { 'govuk-form-group--error': fieldHasError })}>
       {/* Hidden input field for collecting date in format dd-mm-yyyy */}
-      <input className="govuk-visually-hidden" name={cleanName} type="text" value={hiddenDateInput} />
+      <input
+        aria-label="Unused Hidden Date Input"
+        className="govuk-visually-hidden"
+        name={cleanName}
+        type="text"
+        value={hiddenDateInput}
+      />
       <fieldset className="govuk-fieldset" role="group">
         <legend className="govuk-fieldset__legend govuk-fieldset__legend--l">
           <h2 className="govuk-label-wrapper">

From e9909b016f1ded8bc925fc159a899bf5cd331894 Mon Sep 17 00:00:00 2001
From: Temiakinsoto <temi.akinsoto@ukhsa.gov.uk>
Date: Thu, 6 Feb 2025 10:51:31 +0000
Subject: [PATCH 13/15] mark props of datefield component as readonly

---
 src/app/components/cms/Feedback/Fields/Date/DateField.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/components/cms/Feedback/Fields/Date/DateField.tsx b/src/app/components/cms/Feedback/Fields/Date/DateField.tsx
index 0654a3814..b9313a2d7 100644
--- a/src/app/components/cms/Feedback/Fields/Date/DateField.tsx
+++ b/src/app/components/cms/Feedback/Fields/Date/DateField.tsx
@@ -9,7 +9,7 @@ interface DateData {
   year: string
 }
 
-export default function DateField({ label, helpText, cleanName, fieldHasError }: Fieldtype) {
+export default function DateField({ label, helpText, cleanName, fieldHasError }: Readonly<Fieldtype>) {
   const [hiddenDateInput, setHiddenDateInput] = useState<string>('')
   const [dateData, setDateData] = useState<DateData>({
     day: '',

From 1afaf9575392ba6ea5bb2550a64cf48bb4b9015f Mon Sep 17 00:00:00 2001
From: Temiakinsoto <temi.akinsoto@ukhsa.gov.uk>
Date: Thu, 6 Feb 2025 11:24:34 +0000
Subject: [PATCH 14/15] remove datetime field type from mock server

---
 .../handlers/cms/pages/fixtures/page/feedback.ts    | 13 -------------
 1 file changed, 13 deletions(-)

diff --git a/src/mock-server/handlers/cms/pages/fixtures/page/feedback.ts b/src/mock-server/handlers/cms/pages/fixtures/page/feedback.ts
index f85f65ee4..b3f041061 100644
--- a/src/mock-server/handlers/cms/pages/fixtures/page/feedback.ts
+++ b/src/mock-server/handlers/cms/pages/fixtures/page/feedback.ts
@@ -173,19 +173,6 @@ export const feedbackMock: PageResponse<PageType.Feedback> = {
       choices: '',
       default_value: '',
     },
-    {
-      id: 12,
-      meta: {
-        type: 'forms.FormField',
-      },
-      clean_name: 'enter_a_memorable_date',
-      label: 'Enter a memorable date',
-      field_type: 'datetime',
-      help_text: 'For example, 31 3 1980',
-      required: false,
-      choices: '',
-      default_value: '',
-    },
   ],
   confirmation_slug: 'confirmation',
   confirmation_panel_title: 'Form submitted',

From cd7e650e665a7b97d76f94bce4ca3dc96d0c8e50 Mon Sep 17 00:00:00 2001
From: Temiakinsoto <temi.akinsoto@ukhsa.gov.uk>
Date: Thu, 6 Feb 2025 11:34:23 +0000
Subject: [PATCH 15/15] set required field for date fieldtype to false in the
 mockserver

---
 src/mock-server/handlers/cms/pages/fixtures/page/feedback.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/mock-server/handlers/cms/pages/fixtures/page/feedback.ts b/src/mock-server/handlers/cms/pages/fixtures/page/feedback.ts
index b3f041061..22957e11e 100644
--- a/src/mock-server/handlers/cms/pages/fixtures/page/feedback.ts
+++ b/src/mock-server/handlers/cms/pages/fixtures/page/feedback.ts
@@ -169,7 +169,7 @@ export const feedbackMock: PageResponse<PageType.Feedback> = {
       label: 'Enter a memorable date',
       field_type: 'date',
       help_text: 'For example, 31 3 1980',
-      required: true,
+      required: false,
       choices: '',
       default_value: '',
     },