feat(form): render statement and extra fields in JSON schema form

src/components/form/JSONSchemaForm.tsx

@@ -79,11 +79,18 @@ export const JSONSchemaFormFields = ({
             Component: React.ComponentType<any>;
           };
           return (
-            <Component
-              key={field.name as string}
-              setValue={(value: unknown) => setValue(field.name, value)}
-              {...field}
-            />
+            <Fragment key={field.name as string}>
+              <Component
+                setValue={(value: unknown) => setValue(field.name, value)}
+                {...field}
+              />
+              {field.statement ? (
+                <Statement
+                  {...(field.statement as StatementComponentProps['data'])}
+                />
+              ) : null}
+              {field.extra ? field.extra : null}
+            </Fragment>
           );
         }
 

src/components/form/fields/FieldSetField.tsx

@@ -258,16 +258,25 @@ export function FieldSetField({
                   Component: React.ComponentType<$TSFixMe>;
                 };
                 return (
-                  <Component
-                    key={field.name}
-                    setValue={(value: unknown) =>
-                      setValue(
-                        isFlatFieldset ? field.name : `${name}.${field.name}`,
-                        value,
-                      )
-                    }
-                    {...field}
-                  />
+                  <Fragment
+                    key={`${isFlatFieldset ? field.name : `${name}.${field.name}`}`}
+                  >
+                    <Component
+                      setValue={(value: unknown) =>
+                        setValue(
+                          isFlatFieldset ? field.name : `${name}.${field.name}`,
+                          value,
+                        )
+                      }
+                      {...field}
+                    />
+                    {field.statement ? (
+                      <Statement
+                        {...(field.statement as StatementComponentProps['data'])}
+                      />
+                    ) : null}
+                    {field.extra ? field.extra : null}
+                  </Fragment>
                 );
               }
 
@@ -294,6 +303,11 @@ export function FieldSetField({
                       components?.[field.inputType as keyof Components]
                     }
                   />
+                  {field.statement ? (
+                    <Statement
+                      {...(field.statement as StatementComponentProps['data'])}
+                    />
+                  ) : null}
                   {field.extra ? field.extra : null}
                 </Fragment>
               );

src/components/form/tests/JSONSchemaFormCustomComponent.test.tsx

@@ -3,9 +3,22 @@ import { FormProvider, useForm } from 'react-hook-form';
 import userEvent from '@testing-library/user-event';
 import { JSONSchemaFormFields } from '@/src/components/form/JSONSchemaForm';
 import { JSFCustomComponentProps } from '@/src/types/remoteFlows';
+import { StatementComponentProps } from '@/src/types/fields';
+
+// Mock statement component
+const MockStatement = ({ data }: StatementComponentProps) => (
+  <div data-testid='mock-statement' data-severity={data.severity}>
+    {data.title && <div data-testid='statement-title'>{data.title}</div>}
+    <div data-testid='statement-description'>{data.description}</div>
+  </div>
+);
 
 vi.mock('@/src/context', () => ({
-  useFormFields: vi.fn(() => ({ components: {} })),
+  useFormFields: vi.fn(() => ({
+    components: {
+      statement: MockStatement,
+    },
+  })),
 }));
 
 // Mock custom component that uses setValue
@@ -144,4 +157,208 @@ describe('Custom JSF Component with setValue', () => {
       expect(screen.getByTestId('form-value')).toHaveTextContent('weekly');
     });
   });
+
+  it('should render statement prop alongside custom component', () => {
+    const TestComponent = () => {
+      const methods = useForm({
+        defaultValues: { payment_type: '' },
+      });
+
+      const fields = [
+        {
+          name: 'payment_type',
+          label: 'Payment Type',
+          Component: CustomToggle,
+          options: [
+            { value: 'monthly', label: 'Monthly' },
+            { value: 'weekly', label: 'Weekly' },
+          ],
+          statement: {
+            title: 'Important Notice',
+            description: 'Please select your preferred payment frequency.',
+            severity: 'info',
+          },
+        },
+      ];
+
+      return (
+        <FormProvider {...methods}>
+          <JSONSchemaFormFields fields={fields} />
+        </FormProvider>
+      );
+    };
+
+    render(<TestComponent />);
+
+    // Custom component should render
+    expect(screen.getByTestId('custom-toggle')).toBeInTheDocument();
+
+    // Statement should render alongside the custom component
+    expect(screen.getByTestId('mock-statement')).toBeInTheDocument();
+    expect(screen.getByTestId('statement-title')).toHaveTextContent(
+      'Important Notice',
+    );
+    expect(screen.getByTestId('statement-description')).toHaveTextContent(
+      'Please select your preferred payment frequency.',
+    );
+    expect(screen.getByTestId('mock-statement')).toHaveAttribute(
+      'data-severity',
+      'info',
+    );
+  });
+
+  it('should render extra prop alongside custom component', () => {
+    const ExtraContent = () => (
+      <div data-testid='extra-content'>Additional info here</div>
+    );
+
+    const TestComponent = () => {
+      const methods = useForm({
+        defaultValues: { payment_type: '' },
+      });
+
+      const fields = [
+        {
+          name: 'payment_type',
+          label: 'Payment Type',
+          Component: CustomToggle,
+          options: [
+            { value: 'monthly', label: 'Monthly' },
+            { value: 'weekly', label: 'Weekly' },
+          ],
+          extra: <ExtraContent />,
+        },
+      ];
+
+      return (
+        <FormProvider {...methods}>
+          <JSONSchemaFormFields fields={fields} />
+        </FormProvider>
+      );
+    };
+
+    render(<TestComponent />);
+
+    // Custom component should render
+    expect(screen.getByTestId('custom-toggle')).toBeInTheDocument();
+
+    // Extra content should render alongside the custom component
+    expect(screen.getByTestId('extra-content')).toBeInTheDocument();
+    expect(screen.getByTestId('extra-content')).toHaveTextContent(
+      'Additional info here',
+    );
+  });
+
+  it('should render statement prop alongside custom component inside fieldset', () => {
+    const TestComponent = () => {
+      const methods = useForm({
+        defaultValues: { payment_info: { payment_type: '' } },
+      });
+
+      const fields = [
+        {
+          name: 'payment_info',
+          label: 'Payment Information',
+          description: 'Payment details',
+          inputType: 'fieldset' as const,
+          fields: [
+            {
+              name: 'payment_type',
+              label: 'Payment Type',
+              Component: CustomToggle,
+              options: [
+                { value: 'monthly', label: 'Monthly' },
+                { value: 'weekly', label: 'Weekly' },
+              ],
+              inputType: 'text' as const,
+              statement: {
+                title: 'Fieldset Statement Title',
+                description: 'This statement is inside a fieldset.',
+                severity: 'warning',
+              },
+            },
+          ],
+          isFlatFieldset: false,
+          variant: 'outset' as const,
+        },
+      ];
+
+      return (
+        <FormProvider {...methods}>
+          <JSONSchemaFormFields fields={fields} />
+        </FormProvider>
+      );
+    };
+
+    render(<TestComponent />);
+
+    // Custom component should render inside fieldset
+    expect(screen.getByTestId('custom-toggle')).toBeInTheDocument();
+
+    // Statement should render alongside the custom component inside fieldset
+    expect(screen.getByTestId('mock-statement')).toBeInTheDocument();
+    expect(screen.getByTestId('statement-title')).toHaveTextContent(
+      'Fieldset Statement Title',
+    );
+    expect(screen.getByTestId('statement-description')).toHaveTextContent(
+      'This statement is inside a fieldset.',
+    );
+    expect(screen.getByTestId('mock-statement')).toHaveAttribute(
+      'data-severity',
+      'warning',
+    );
+  });
+
+  it('should render extra prop alongside custom component inside fieldset', () => {
+    const ExtraContent = () => (
+      <div data-testid='fieldset-extra'>Fieldset extra content</div>
+    );
+
+    const TestComponent = () => {
+      const methods = useForm({
+        defaultValues: { payment_info: { payment_type: '' } },
+      });
+
+      const fields = [
+        {
+          name: 'payment_info',
+          label: 'Payment Information',
+          description: 'Payment details',
+          inputType: 'fieldset' as const,
+          fields: [
+            {
+              name: 'payment_type',
+              label: 'Payment Type',
+              Component: CustomToggle,
+              options: [
+                { value: 'monthly', label: 'Monthly' },
+                { value: 'weekly', label: 'Weekly' },
+              ],
+              inputType: 'text' as const,
+              extra: <ExtraContent />,
+            },
+          ],
+          isFlatFieldset: false,
+          variant: 'outset' as const,
+        },
+      ];
+
+      return (
+        <FormProvider {...methods}>
+          <JSONSchemaFormFields fields={fields} />
+        </FormProvider>
+      );
+    };
+
+    render(<TestComponent />);
+
+    // Custom component should render inside fieldset
+    expect(screen.getByTestId('custom-toggle')).toBeInTheDocument();
+
+    // Extra content should render alongside the custom component inside fieldset
+    expect(screen.getByTestId('fieldset-extra')).toBeInTheDocument();
+    expect(screen.getByTestId('fieldset-extra')).toHaveTextContent(
+      'Fieldset extra content',
+    );
+  });
 });