WIP: Scroll to error summary on form submission error

src/components/Field.jsx

@@ -26,32 +26,61 @@ const messages = defineMessages({
   },
 });
 
+const widgetMapping = {
+  single_choice: RadioWidget,
+  checkbox: CheckboxWidget,
+};
+
 /**
  * Field class.
  * @class View
  * @extends Component
  */
-const Field = ({
-  label,
-  description,
-  name,
-  field_type,
-  required,
-  input_values,
-  value,
-  onChange,
-  isOnEdit,
-  valid,
-  disabled = false,
-  formHasErrors = false,
-  id,
-}) => {
+const Field = (props) => {
+  const {
+    label,
+    description,
+    name,
+    field_type,
+    required,
+    input_values,
+    value,
+    onChange,
+    isOnEdit,
+    valid,
+    disabled = false,
+    formHasErrors = false,
+    id,
+    widget,
+  } = props;
   const intl = useIntl();
 
   const isInvalid = () => {
     return !isOnEdit && !valid;
   };
 
+  if (widget) {
+    const Widget = widgetMapping[widget];
+    const valueList =
+      field_type === 'yes_no'
+        ? [
+            { value: true, label: 'Yes' },
+            { value: false, label: 'No' },
+          ]
+        : [...(input_values?.map((v) => ({ value: v, label: v })) ?? [])];
+
+    return (
+      <Widget
+        {...props}
+        id={name}
+        title={label}
+        valueList={valueList}
+        invalid={isInvalid().toString()}
+        {...(isInvalid() ? { className: 'is-invalid' } : {})}
+      />
+    );
+  }
+
   return (
     <div className="field">
       {field_type === 'text' && (
@@ -136,7 +165,7 @@ const Field = ({
           {...(isInvalid() ? { className: 'is-invalid' } : {})}
         />
       )}
-      {field_type === 'checkbox' && (
+      {(field_type === 'yes_no' || field_type === 'checkbox') && (
         <CheckboxWidget
           id={name}
           name={name}

src/components/FieldTypeSchemaExtenders/FromSchemaExtender.js

@@ -24,7 +24,7 @@ const messages = defineMessages({
   },
 });
 
-export const FromSchemaExtender = (intl) => {
+export const FromSchemaExtender = ({ intl }) => {
   return {
     fields: ['use_as_reply_to', 'use_as_bcc'],
     properties: {

src/components/FieldTypeSchemaExtenders/HiddenSchemaExtender.js

@@ -6,7 +6,7 @@ const messages = defineMessages({
   },
 });
 
-export const HiddenSchemaExtender = (intl) => {
+export const HiddenSchemaExtender = ({ intl }) => {
   return {
     fields: ['value'],
     properties: {

src/components/FieldTypeSchemaExtenders/SelectionSchemaExtender.js

@@ -6,7 +6,7 @@ const messages = defineMessages({
   },
 });
 
-export const SelectionSchemaExtender = (intl) => {
+export const SelectionSchemaExtender = ({ intl }) => {
   return {
     fields: ['input_values'],
     properties: {

src/components/FieldTypeSchemaExtenders/YesNoSchemaExtender.js

@@ -0,0 +1,64 @@
+import { defineMessages } from 'react-intl';
+const messages = defineMessages({
+  field_widget: {
+    id: 'form_field_widget',
+    defaultMessage: 'Widget',
+  },
+  display_values_title: {
+    id: 'form_field_display_values_title',
+    defaultMessage: 'Display values as',
+  },
+  display_values_description: {
+    id: 'form_field_display_values_description',
+    defaultMessage:
+      'Change how values appear in forms and emails. Data stores and sent, such as CSV exports and XML attachments, will remain unchanged.',
+  },
+});
+
+function InternalValueSchema() {
+  return {
+    title: 'Test',
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: ['yes', 'no'],
+      },
+    ],
+    properties: {
+      yes: {
+        title: 'True',
+        placeholder: 'Yes',
+      },
+      no: {
+        title: 'False',
+        placeholder: 'No',
+      },
+    },
+  };
+}
+
+export const YesNoSchemaExtender = ({ intl, formData }) => {
+  return {
+    fields: ['widget', 'display_values'],
+    properties: {
+      widget: {
+        title: intl.formatMessage(messages.field_widget),
+        type: 'string',
+        choices: [
+          ['checkbox', 'Checkbox'],
+          ['single_choice', 'Radio'],
+        ],
+        default: 'checkbox',
+      },
+      display_values: {
+        title: 'Display values as',
+        description: '',
+        widget: 'object',
+        schema: InternalValueSchema(),
+        collapsible: true,
+      },
+    },
+    required: ['widget'],
+  };
+};

src/components/FieldTypeSchemaExtenders/index.js

@@ -1,3 +1,4 @@
 export { SelectionSchemaExtender } from './SelectionSchemaExtender';
 export { FromSchemaExtender } from './FromSchemaExtender';
 export { HiddenSchemaExtender } from './HiddenSchemaExtender';
+export { YesNoSchemaExtender } from './YesNoSchemaExtender';

src/components/FormView.jsx

@@ -10,6 +10,7 @@ import {
 } from 'semantic-ui-react';
 import { getFieldName } from 'volto-form-block/components/utils';
 import Field from 'volto-form-block/components/Field';
+import { showWhenValidator } from 'volto-form-block/helpers/show_when';
 import config from '@plone/volto/registry';
 
 /* Style */
@@ -134,6 +135,30 @@ const FormView = ({
                     }),
                   );
 
+                  const value =
+                    subblock.field_type === 'static_text'
+                      ? subblock.value
+                      : formData[name]?.value;
+                  const { show_when, target_value } = subblock;
+
+                  const shouldShowValidator = showWhenValidator[show_when];
+                  const shouldShowTargetValue =
+                    formData[subblock.target_field]?.value;
+
+                  // Only checking for false here to preserve backwards compatibility with blocks that haven't been updated and so have a value of 'undefined' or 'null'
+                  const shouldShow = shouldShowValidator
+                    ? shouldShowValidator({
+                        value: shouldShowTargetValue,
+                        target_value: target_value,
+                      }) !== false
+                    : true;
+
+                  const shouldHide = __CLIENT__ && !shouldShow;
+
+                  if (shouldHide) {
+                    return <p key={'row' + index}>Empty</p>;
+                  }
+
                   return (
                     <Grid.Row key={'row' + index}>
                       <Grid.Column>
@@ -148,11 +173,7 @@ const FormView = ({
                               fields_to_send_with_value,
                             )
                           }
-                          value={
-                            subblock.field_type === 'static_text'
-                              ? subblock.value
-                              : formData[name]?.value
-                          }
+                          value={value}
                           valid={isValidField(name)}
                           formHasErrors={formErrors?.length > 0}
                         />

src/components/Sidebar.jsx

@@ -191,7 +191,7 @@ const Sidebar = ({
                   </Accordion.Title>
                   <Accordion.Content active={selected === index}>
                     <BlockDataForm
-                      schema={FieldSchema(subblock)}
+                      schema={FieldSchema({ ...subblock, formData: data })}
                       onChangeField={(name, value) => {
                         var update_values = {};
 

src/components/View.jsx

@@ -98,9 +98,18 @@ const View = ({ data, id, path }) => {
   const [formErrors, setFormErrors] = useState([]);
   const submitResults = useSelector((state) => state.submitForm);
   const captchaToken = useRef();
+  const formid = `form-${id}`;
 
   const onChangeFormData = (field_id, field, value, extras) => {
-    setFormData({ field, value: { field_id, value, ...extras } });
+    setFormData({
+      field,
+      value: {
+        field_id,
+        value,
+        ...(data[field_id] && { custom_field_id: data[field_id] }), // Conditionally add the key. Nicer to work with than having a key with a null value
+        ...extras,
+      },
+    });
   };
 
   useEffect(() => {
@@ -164,28 +173,34 @@ const View = ({ data, id, path }) => {
             captcha.value = formData[data.captcha_props.id]?.value ?? '';
           }
 
-          let formattedFormData = { ...formData };
+          let formattedFormData = data.subblocks.reduce(
+            (returnValue, field) => {
+              if (field.field_type === 'static_text') {
+                return returnValue;
+              }
+              const fieldName = getFieldName(field.label, field.id);
+              const dataToAdd = formData[fieldName] ?? {
+                field_id: field.id,
+                label: field.label,
+                value: field.default_value,
+                ...(data[field.id] && { custom_field_id: data[field.id] }), // Conditionally add the key. Nicer to work with than having a key with a null value
+              };
+              return { ...returnValue, [fieldName]: dataToAdd };
+            },
+            {},
+          );
           data.subblocks.forEach((subblock) => {
             let name = getFieldName(subblock.label, subblock.id);
             if (formattedFormData[name]?.value) {
               formattedFormData[name].field_id = subblock.field_id;
               const isAttachment = config.blocks.blocksConfig.form.attachment_fields.includes(
                 subblock.field_type,
               );
-              const isDate = subblock.field_type === 'date';
 
               if (isAttachment) {
                 attachments[name] = formattedFormData[name].value;
                 delete formattedFormData[name];
               }
-
-              if (isDate) {
-                formattedFormData[name].value = formatDate({
-                  date: formattedFormData[name].value,
-                  format: 'DD-MM-YYYY',
-                  locale: intl.locale,
-                });
-              }
             }
           });
           dispatch(
@@ -201,6 +216,10 @@ const View = ({ data, id, path }) => {
           );
           setFormState({ type: FORM_STATES.loading });
         } else {
+          const errorBox = document.getElementById(`${formid}-errors`);
+          if (errorBox) {
+            errorBox.scrollIntoView({ behavior: 'smooth' });
+          }
           setFormState({ type: FORM_STATES.error });
         }
       })
@@ -225,8 +244,6 @@ const View = ({ data, id, path }) => {
     onChangeFormData,
   });
 
-  const formid = `form-${id}`;
-
   useEffect(() => {
     if (submitResults?.loaded) {
       setFormState({