ADD FEEDBACK ADDITIONAL FIELDS

src/app/components/cms/Feedback/Feedback.tsx

@@ -8,12 +8,30 @@ import { z } from 'zod'
 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 DropdownField from './Fields/Dropdown/DropdownField'
+import EmailField from './Fields/Email/EmailField'
+import MultilineField from './Fields/Multiline/MultilineField'
+import NumberField from './Fields/Number/NumberField'
+import RadioField from './Fields/Radio/RadioField'
+import SinglelineField from './Fields/Singleline/SinglelineField'
+import UrlField from './Fields/Url/UrlField'
 
 const initialState = {
   message: '',
   errors: {},
 }
 
+export interface Fieldtype {
+  label: string
+  helpText: string
+  cleanName: string
+  choicesList?: string[]
+  defaultValue?: string
+  defaultValuesList?: string[]
+}
+
 interface FeedbackProps {
   formFields: {
     id: number
@@ -67,61 +85,44 @@ export const renderFormFields = ({
   // TODO: Required validation added in ticket CDD-2300
   // required,
   choices,
-  // default_value: defaultValue,
+  default_value: defaultValue,
 }: z.infer<typeof FormField>) => {
   const choicesList = choices.includes('\r\n') ? choices.split('\r\n') : choices.split(',')
-
-  // TODO: Implement default values only for checkboxes
-  // const defaultValuesList = defaultValue.includes('\r\n') ? defaultValue.split('\r\n') : defaultValue.split(',')
+  // Implement default values only for checkboxes
+  const defaultValuesList = defaultValue.includes('\r\n') ? defaultValue.split('\r\n') : defaultValue.split(',')
 
   return (
     <Fragment key={id}>
-      {fieldType === 'singleline' && (
-        <div className="govuk-form-group govuk-!-margin-bottom-9">
-          <h2 className="govuk-label-wrapper">
-            <label className="govuk-label govuk-label--m" htmlFor={cleanName}>
-              {label}
-            </label>
-          </h2>
+      {fieldType === 'singleline' && <SinglelineField label={label} helpText={helpText} cleanName={cleanName} />}
 
-          {helpText.length > 0 ? <div className="govuk-hint">{helpText}</div> : null}
+      {fieldType === 'multiline' && <MultilineField label={label} helpText={helpText} cleanName={cleanName} />}
 
-          <textarea className="govuk-textarea" name={cleanName} id={cleanName} rows={1}></textarea>
-        </div>
+      {fieldType === 'radio' && (
+        <RadioField label={label} helpText={helpText} cleanName={cleanName} choicesList={choicesList} />
       )}
 
-      {fieldType === 'multiline' && (
-        <div className="govuk-form-group govuk-!-margin-bottom-9">
-          <h2 className="govuk-label-wrapper">
-            <label className="govuk-label govuk-label--m" htmlFor={cleanName}>
-              {label}
-            </label>
-          </h2>
+      {fieldType === 'email' && <EmailField label={label} helpText={helpText} cleanName={cleanName} />}
 
-          {helpText.length > 0 ? <div className="govuk-hint">{helpText}</div> : null}
+      {fieldType === 'checkbox' && (
+        <CheckboxField label={label} helpText={helpText} cleanName={cleanName} defaultValue={defaultValue} />
+      )}
 
-          <textarea className="govuk-textarea" name={cleanName} id={cleanName} rows={5} />
-        </div>
+      {fieldType === 'checkboxes' && (
+        <CheckboxesField
+          label={label}
+          helpText={helpText}
+          cleanName={cleanName}
+          choicesList={choicesList}
+          defaultValuesList={defaultValuesList}
+        />
       )}
 
-      {fieldType === 'radio' && (
-        <fieldset className="govuk-fieldset govuk-!-margin-bottom-9">
-          <legend className="govuk-fieldset__legend govuk-fieldset__legend--m">
-            <h2 className="govuk-fieldset__heading">{label}</h2>
-          </legend>
-          <div className="govuk-radios" data-module="govuk-radios">
-            {choicesList.map((choice, key) => {
-              return (
-                <div key={key} className="govuk-radios__item">
-                  <input className="govuk-radios__input" id={cleanName} name={cleanName} type="radio" value={choice} />
-                  <label className="govuk-label govuk-radios__label" htmlFor={cleanName}>
-                    {choice}
-                  </label>
-                </div>
-              )
-            })}
-          </div>
-        </fieldset>
+      {fieldType === 'number' && <NumberField label={label} helpText={helpText} cleanName={cleanName} />}
+
+      {fieldType === 'url' && <UrlField label={label} helpText={helpText} cleanName={cleanName} />}
+
+      {fieldType === 'dropdown' && (
+        <DropdownField label={label} helpText={helpText} cleanName={cleanName} choicesList={choicesList} />
       )}
     </Fragment>
   )

src/app/components/cms/Feedback/Fields/Checkbox/CheckboxField.tsx

@@ -0,0 +1,21 @@
+import { Fieldtype } from '../../Feedback'
+
+export default function CheckboxField({ label, helpText, cleanName, defaultValue }: Fieldtype) {
+  return (
+    <div className="govuk-form-group govuk-!-margin-bottom-9">
+      {helpText.length > 0 ? <div className="govuk-hint">{helpText}</div> : null}
+      <div className="govuk-checkboxes__item">
+        <input
+          className="govuk-checkboxes__input"
+          name={cleanName}
+          value={defaultValue}
+          type="checkbox"
+          id={cleanName}
+        />
+        <label className="govuk-label govuk-checkboxes__label" htmlFor={cleanName}>
+          {label}
+        </label>
+      </div>
+    </div>
+  )
+}

src/app/components/cms/Feedback/Fields/Checkbox/Checkboxfield.spec.tsx

@@ -0,0 +1,67 @@
+import { render, screen } from '@/config/test-utils'
+
+import CheckboxField from './CheckboxField'
+
+describe('CheckboxField', () => {
+  const mockProps = {
+    label: 'Accept terms and conditions',
+    helpText: 'Please read the terms carefully.',
+    cleanName: 'terms_and_conditions',
+    defaultValue: 'true', // Testing with a string value
+  }
+
+  test('renders checkbox field with label and help text when provided', () => {
+    render(<CheckboxField {...mockProps} />)
+
+    // Check if the label is rendered correctly
+    const label = screen.getByLabelText(mockProps.label)
+    expect(label).toBeInTheDocument()
+
+    // Check if the help text is rendered correctly
+    const helpText = screen.getByText(mockProps.helpText)
+    expect(helpText).toBeInTheDocument()
+  })
+
+  test('does not render help text when not provided', () => {
+    render(<CheckboxField {...{ ...mockProps, helpText: '' }} />)
+
+    // Ensure help text is not rendered if it's an empty string
+    const helpText = screen.queryByText(mockProps.helpText)
+    expect(helpText).toBeNull()
+  })
+
+  test('checkbox is unchecked by default when defaultValue is an empty string', () => {
+    render(<CheckboxField {...{ ...mockProps, defaultValue: '' }} />)
+
+    // Check if the checkbox is unchecked when defaultValue is an empty string
+    const checkbox = screen.getByRole('checkbox')
+    expect(checkbox).not.toBeChecked()
+  })
+
+  test('checkbox is unchecked by default when defaultValue is a falsy string ("false")', () => {
+    render(<CheckboxField {...{ ...mockProps, defaultValue: 'false' }} />)
+
+    // Check if the checkbox is unchecked when defaultValue is "false"
+    const checkbox = screen.getByRole('checkbox')
+    expect(checkbox).not.toBeChecked()
+  })
+
+  test('checkbox input has the correct name and id', () => {
+    render(<CheckboxField {...mockProps} />)
+
+    const checkbox = screen.getByRole('checkbox')
+
+    // Check if the checkbox has the correct name and id
+    expect(checkbox).toHaveAttribute('name', mockProps.cleanName)
+    expect(checkbox).toHaveAttribute('id', mockProps.cleanName)
+  })
+
+  test('checkbox input value matches the defaultValue prop', () => {
+    render(<CheckboxField {...mockProps} />)
+
+    const checkbox = screen.getByRole('checkbox')
+
+    // Ensure the checkbox input value matches defaultValue prop
+    expect(checkbox).toHaveAttribute('value', mockProps.defaultValue)
+  })
+})

src/app/components/cms/Feedback/Fields/Checkboxes/CheckboxesField.tsx

@@ -0,0 +1,46 @@
+import { Fieldtype } from '../../Feedback'
+
+export default function CheckboxesField({
+  label,
+  helpText,
+  cleanName,
+  choicesList = [],
+  defaultValuesList = [],
+}: Fieldtype) {
+  return (
+    <div className="govuk-form-group govuk-!-margin-bottom-9">
+      <fieldset className="govuk-fieldset govuk-!-margin-bottom-9">
+        <legend className="govuk-fieldset__legend govuk-fieldset__legend--m">
+          <h2 className="govuk-fieldset__heading">
+            <label className="govuk-label govuk-label--m" htmlFor={cleanName}>
+              {label}
+            </label>
+          </h2>
+        </legend>
+
+        {helpText.length > 0 ? <div className="govuk-hint">{helpText}</div> : null}
+
+        <div className="govuk-checkboxes" data-module="govuk-checkboxes">
+          {choicesList.map((choiceVal, key) => {
+            const uniqueId = `${cleanName}-${key}` // Generate a unique ID for each checkbox
+            return (
+              <div key={key} className="govuk-checkboxes__item">
+                <input
+                  className="govuk-checkboxes__input"
+                  id={uniqueId}
+                  name={cleanName}
+                  type="checkbox"
+                  value={choiceVal}
+                  defaultChecked={defaultValuesList.includes(choiceVal)}
+                />
+                <label className="govuk-label govuk-checkboxes__label" htmlFor={uniqueId}>
+                  {choiceVal}
+                </label>
+              </div>
+            )
+          })}
+        </div>
+      </fieldset>
+    </div>
+  )
+}

src/app/components/cms/Feedback/Fields/Checkboxes/Checkboxesfield.spec.tsx

@@ -0,0 +1,89 @@
+import { render, screen } from '@/config/test-utils'
+
+import CheckboxesField from './CheckboxesField'
+
+describe('CheckboxesField Component', () => {
+  const mockProps = {
+    label: 'What would you like to see on the dashboard in the future?',
+    helpText: 'Pick one or more options from the list.',
+    cleanName: 'dashboard_features',
+    choicesList: ['Choice 1', 'Choice 2', 'Choice 3'],
+    defaultValuesList: ['Choice 1', 'Choice 3'], // The items in the defaultValuesList Choices should be checked by default
+  }
+
+  it('should render the label correctly', () => {
+    render(<CheckboxesField {...mockProps} />)
+
+    // Check if the label is rendered correctly
+    expect(screen.getByText(mockProps.label)).toBeInTheDocument()
+  })
+
+  it('should render the help text if provided', () => {
+    render(<CheckboxesField {...mockProps} />)
+
+    // Check if the help text is rendered
+    expect(screen.getByText(mockProps.helpText)).toBeInTheDocument()
+  })
+
+  it('should not render help text if not provided', () => {
+    render(<CheckboxesField {...{ ...mockProps, helpText: '' }} />)
+
+    // Check if help text is not rendered
+    expect(screen.queryByText(mockProps.helpText)).not.toBeInTheDocument()
+  })
+
+  it('should render the correct number of checkboxes from choicesList', () => {
+    render(<CheckboxesField {...mockProps} />)
+
+    // Check if the correct number of checkboxes are rendered
+    const checkboxes = screen.getAllByRole('checkbox')
+    expect(checkboxes).toHaveLength(mockProps.choicesList.length)
+  })
+
+  it('should render checkboxes with the correct values from choicesList', () => {
+    render(<CheckboxesField {...mockProps} />)
+
+    // Check if the checkboxes have the correct value attribute
+    const checkboxes = screen.getAllByRole('checkbox')
+    expect(checkboxes[0]).toHaveAttribute('value', mockProps.choicesList[0])
+    expect(checkboxes[1]).toHaveAttribute('value', mockProps.choicesList[1])
+    expect(checkboxes[2]).toHaveAttribute('value', mockProps.choicesList[2])
+  })
+
+  it('should render checkboxes with the correct label associated', () => {
+    render(<CheckboxesField {...mockProps} />)
+
+    // Check if the checkboxes have the correct labels
+    expect(screen.getByLabelText(mockProps.choicesList[0])).toBeInTheDocument()
+    expect(screen.getByLabelText(mockProps.choicesList[1])).toBeInTheDocument()
+    expect(screen.getByLabelText(mockProps.choicesList[2])).toBeInTheDocument()
+  })
+
+  it('should render the checkboxes with the correct default checked state', () => {
+    render(<CheckboxesField {...mockProps} />)
+
+    // Check if the checkboxes have the correct default checked state
+    const checkboxes = screen.getAllByRole('checkbox')
+    expect(checkboxes[0]).toBeChecked() // Choice 1 is in defaultValuesList, hence it should be checked
+    expect(checkboxes[1]).not.toBeChecked() // Choice 2 is not in defaultValuesList, so it should not be checked
+    expect(checkboxes[2]).toBeChecked()
+  })
+
+  it('should render unique ids for each checkbox', () => {
+    render(<CheckboxesField {...mockProps} />)
+
+    // Check if each checkbox has a unique id
+    const checkboxes = screen.getAllByRole('checkbox')
+    checkboxes.forEach((checkbox, index) => {
+      expect(checkbox).toHaveAttribute('id', `${mockProps.cleanName}-${index}`)
+    })
+  })
+
+  it('should not render any checkboxes if choicesList is empty', () => {
+    render(<CheckboxesField {...{ ...mockProps, choicesList: [] }} />)
+
+    // Check if no checkboxes are rendered
+    const checkboxes = screen.queryAllByRole('checkbox')
+    expect(checkboxes).toHaveLength(0)
+  })
+})

src/app/components/cms/Feedback/Fields/Dropdown/DropdownField.tsx

@@ -0,0 +1,28 @@
+import { Fieldtype } from '../../Feedback'
+
+export default function DropdownField({ label, helpText, cleanName, choicesList = [] }: Fieldtype) {
+  return (
+    <div className="govuk-form-group govuk-!-margin-bottom-9">
+      <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}
+
+      <select className="govuk-select" id={cleanName} name={cleanName} aria-describedby={helpText}>
+        <option value="choose an option" data-testid="submit-button">
+          Choose an option
+        </option>
+        {choicesList.map((choice, key) => {
+          return (
+            <option key={key} value={choice}>
+              {choice}
+            </option>
+          )
+        })}
+      </select>
+    </div>
+  )
+}