+ )
+}
diff --git a/src/app/components/cms/Feedback/Fields/Checkbox/Checkboxfield.spec.tsx b/src/app/components/cms/Feedback/Fields/Checkbox/Checkboxfield.spec.tsx
new file mode 100644
index 00000000..a85cc85c
--- /dev/null
+++ b/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()
+
+ // 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()
+
+ // 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()
+
+ // 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()
+
+ // 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()
+
+ 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()
+
+ const checkbox = screen.getByRole('checkbox')
+
+ // Ensure the checkbox input value matches defaultValue prop
+ expect(checkbox).toHaveAttribute('value', mockProps.defaultValue)
+ })
+})
diff --git a/src/app/components/cms/Feedback/Fields/Checkboxes/CheckboxesField.tsx b/src/app/components/cms/Feedback/Fields/Checkboxes/CheckboxesField.tsx
new file mode 100644
index 00000000..07cbf465
--- /dev/null
+++ b/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 (
+
+
+
+ )
+}
diff --git a/src/app/components/cms/Feedback/Fields/Checkboxes/Checkboxesfield.spec.tsx b/src/app/components/cms/Feedback/Fields/Checkboxes/Checkboxesfield.spec.tsx
new file mode 100644
index 00000000..195db2a5
--- /dev/null
+++ b/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()
+
+ // Check if the label is rendered correctly
+ expect(screen.getByText(mockProps.label)).toBeInTheDocument()
+ })
+
+ it('should render the help text if provided', () => {
+ render()
+
+ // Check if the help text is rendered
+ expect(screen.getByText(mockProps.helpText)).toBeInTheDocument()
+ })
+
+ it('should not render help text if not provided', () => {
+ render()
+
+ // 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()
+
+ // 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()
+
+ // 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()
+
+ // 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()
+
+ // 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()
+
+ // 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()
+
+ // Check if no checkboxes are rendered
+ const checkboxes = screen.queryAllByRole('checkbox')
+ expect(checkboxes).toHaveLength(0)
+ })
+})
diff --git a/src/app/components/cms/Feedback/Fields/Dropdown/DropdownField.tsx b/src/app/components/cms/Feedback/Fields/Dropdown/DropdownField.tsx
new file mode 100644
index 00000000..5917103b
--- /dev/null
+++ b/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 (
+
+
+
+
+
+ {helpText.length > 0 ?
{helpText}
: null}
+
+
+
+ )
+}
diff --git a/src/app/components/cms/Feedback/Fields/Dropdown/Dropdownfield.spec.tsx b/src/app/components/cms/Feedback/Fields/Dropdown/Dropdownfield.spec.tsx
new file mode 100644
index 00000000..c7df2883
--- /dev/null
+++ b/src/app/components/cms/Feedback/Fields/Dropdown/Dropdownfield.spec.tsx
@@ -0,0 +1,73 @@
+import { render, screen } from '@/config/test-utils'
+
+import DropdownField from './DropdownField'
+
+describe('Dropdownfield Component', () => {
+ const mockProps = {
+ label: 'What would you like to see on the dashboard in the future?',
+ helpText: 'Pick one option from the list.',
+ cleanName: 'what_would_you_like_to_see_on_the_dashboard_in_the_future',
+ choicesList: ['Option 1', 'Option 2', 'Option 3'],
+ }
+
+ it('should render the label correctly', () => {
+ render()
+
+ const labelElement = screen.getByText('What would you like to see on the dashboard in the future?')
+ expect(labelElement).toBeInTheDocument()
+ })
+
+ it('should render help text if provided', () => {
+ render()
+
+ const helpTextElement = screen.getByText('Pick one option from the list.')
+ expect(helpTextElement).toBeInTheDocument()
+ })
+
+ it('should not render help text if not provided', () => {
+ render()
+
+ const helpTextElement = screen.queryByText('Pick one option from the list.')
+ expect(helpTextElement).toBeNull()
+ })
+
+ it('should render the default "Choose an option" option', () => {
+ render()
+
+ const defaultOption = screen.getByText('Choose an option')
+ expect(defaultOption).toBeInTheDocument()
+ })
+
+ it('should render options based on choicesList array', () => {
+ render()
+
+ const options = screen.getAllByRole('option')
+ expect(options).toHaveLength(4) // 3 options + 1 default option
+ expect(screen.getByText('Option 1')).toBeInTheDocument()
+ expect(screen.getByText('Option 2')).toBeInTheDocument()
+ expect(screen.getByText('Option 3')).toBeInTheDocument()
+ })
+
+ it('should render options when choicesList is provided as an array', () => {
+ const propsWithChoicesList = {
+ ...mockProps,
+ choicesList: ['Option 1', 'Option 2', 'Option 3'],
+ }
+ render()
+
+ const options = screen.getAllByRole('option')
+ expect(options).toHaveLength(4) // 3 options + 1 default option
+ expect(screen.getByText('Choose an option')).toBeInTheDocument()
+ expect(screen.getByText('Option 1')).toBeInTheDocument()
+ expect(screen.getByText('Option 2')).toBeInTheDocument()
+ expect(screen.getByText('Option 3')).toBeInTheDocument()
+ })
+
+ it('should correctly render the cleanName in the select input', () => {
+ render()
+
+ const selectElement = screen.getByRole('combobox')
+ expect(selectElement).toHaveAttribute('name', 'what_would_you_like_to_see_on_the_dashboard_in_the_future')
+ expect(selectElement).toHaveAttribute('id', 'what_would_you_like_to_see_on_the_dashboard_in_the_future')
+ })
+})
diff --git a/src/app/components/cms/Feedback/Fields/Email/EmailField.tsx b/src/app/components/cms/Feedback/Fields/Email/EmailField.tsx
new file mode 100644
index 00000000..a3de12df
--- /dev/null
+++ b/src/app/components/cms/Feedback/Fields/Email/EmailField.tsx
@@ -0,0 +1,18 @@
+'use client'
+
+import { Fieldtype } from '../../Feedback'
+
+export default function EmailField({ label, helpText, cleanName }: Fieldtype) {
+ return (
+