From 54f6302046002d351005e18db15b43340b6ce083 Mon Sep 17 00:00:00 2001
From: Sara Bianchi <sara.bianchi@redturtle.it>
Date: Thu, 20 Jun 2024 12:57:48 +0200
Subject: [PATCH 1/3] chore: updated volto-form-block v3.9.0

---
 RELEASE.md   | 10 ++++++++--
 package.json |  2 +-
 yarn.lock    | 28 ++++++++++++++++++++--------
 3 files changed, 29 insertions(+), 11 deletions(-)

diff --git a/RELEASE.md b/RELEASE.md
index a26f3510d..e475e2e5c 100644
--- a/RELEASE.md
+++ b/RELEASE.md
@@ -29,12 +29,18 @@
 ### Fix
 - ...
 -->
-
 ## Versione X.X.X (dd/mm/yyyy)
 
+
+### Novità
+- Aggiornato il Blocco Form con diverse proprietà aggiuntive: ora è possibile aggiungere un testo in header e in footer nell'email inviata, è stato inserito un nuovo livello di sicurezza OTP nel caso in cui venga scelta l'opzione dell'invio mail al destinatario, è stato aggiunto anche un messaggio personalizzabile da mostrare dopo l'invio del form e un pulsante da mostrare per il reset dei campi della form.
+
+
+## Versione 7.28.2 (18/06/2024)
+
 ### Fix
 
-- Blocchi elenco dentro ad un grid con la corretta visualizzazione quando scelto una variazione.
+- Sistemati Blocchi Elenco dentro al un Blocco Grid, ora viene mostrata la variazione scelta.
 
 ## Versione 7.27.1 (10/04/2024)
 
diff --git a/package.json b/package.json
index e4f44a6b1..3a28d7efa 100644
--- a/package.json
+++ b/package.json
@@ -204,7 +204,7 @@
     "volto-customer-satisfaction": "1.0.0",
     "volto-dropdownmenu": "4.0.0",
     "volto-editablefooter": "5.0.1",
-    "volto-form-block": "3.1.0",
+    "volto-form-block": "3.9.0",
     "volto-gdpr-privacy": "2.1.0",
     "volto-google-analytics": "2.0.0",
     "volto-multilingual-widget": "3.0.0",
diff --git a/yarn.lock b/yarn.lock
index 9d2a739ea..829bdc6a9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -12252,7 +12252,7 @@ __metadata:
     volto-customer-satisfaction: 1.0.0
     volto-dropdownmenu: 4.0.0
     volto-editablefooter: 5.0.1
-    volto-form-block: 3.1.0
+    volto-form-block: 3.9.0
     volto-gdpr-privacy: 2.1.0
     volto-google-analytics: 2.0.0
     volto-multilingual-widget: 3.0.0
@@ -28946,18 +28946,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"volto-form-block@npm:3.1.0":
-  version: 3.1.0
-  resolution: "volto-form-block@npm:3.1.0"
+"volto-form-block@npm:3.9.0":
+  version: 3.9.0
+  resolution: "volto-form-block@npm:3.9.0"
   dependencies:
     "@hcaptcha/react-hcaptcha": ^0.3.6
     file-saver: ^2.0.5
     react-google-recaptcha-v3: ^1.8.0
-    volto-subblocks: ^2.0.0
+    volto-subblocks: ^2.1.0
   peerDependencies:
     "@plone/volto": ">=16.0.0-alpha.38"
-    volto-subblocks: ^2.0.0
-  checksum: a8707b864ee32acf99151d302de6389d9a395623b2c384dbae3a1acb9e2b5c57f355f5d9318834fa9e49b004f14f97494534dd435daea65414ddce087e340009
+    volto-subblocks: ^2.1.0
+  checksum: 0019fe78d6d4cdbdf8ce5124132d9b158c103da269ca39b7b3de8e7808d71bca6cef5103feee5d590bcce3e185a7b9f934c50f5266ae86fd4a8eb27d9d146dc9
   languageName: node
   linkType: hard
 
@@ -29022,7 +29022,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"volto-subblocks@npm:2.0.0, volto-subblocks@npm:^2.0.0":
+"volto-subblocks@npm:2.0.0":
   version: 2.0.0
   resolution: "volto-subblocks@npm:2.0.0"
   dependencies:
@@ -29034,6 +29034,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"volto-subblocks@npm:^2.1.0":
+  version: 2.1.0
+  resolution: "volto-subblocks@npm:2.1.0"
+  dependencies:
+    react-dnd: ^5.0.0
+    react-dnd-html5-backend: ^5.0.1
+  peerDependencies:
+    "@plone/volto": ">=16.0.0-alpha.38"
+  checksum: a1cc02ca26176b44398445084c9b90330e898ccb725247f131e71dcc8b1c9e70b3352b8dd4fcf322ea60df7970c02f001454151ab7a82b7a6f6ab96ed4ffc8d5
+  languageName: node
+  linkType: hard
+
 "volto-subfooter@npm:3.0.0":
   version: 3.0.0
   resolution: "volto-subfooter@npm:3.0.0"

From ad65f0c074daaadb7ad09f87c591dfe1947631e6 Mon Sep 17 00:00:00 2001
From: Sara Bianchi <sara.bianchi@redturtle.it>
Date: Fri, 21 Jun 2024 12:02:18 +0200
Subject: [PATCH 2/3] chore: updated customizations of volto-form-blocks

---
 RELEASE.md                                    |   8 +-
 locales/de/LC_MESSAGES/volto.po               |  15 +++
 locales/en/LC_MESSAGES/volto.po               |  15 +++
 locales/es/LC_MESSAGES/volto.po               |  15 +++
 locales/fr/LC_MESSAGES/volto.po               |  15 +++
 locales/it/LC_MESSAGES/volto.po               |  15 +++
 locales/volto.pot                             |  17 ++-
 .../ItaliaTheme/manage/Widgets/FileWidget.jsx |  42 ++++++-
 .../volto-form-block/components/Edit.jsx      | 107 +++++++++-------
 .../volto-form-block/components/Field.jsx     |  74 +++++++++--
 .../volto-form-block/components/FormView.jsx  | 119 ++++++++++++++----
 src/overrideTranslations.jsx                  |  15 +++
 theme/ItaliaTheme/Blocks/_form.scss           |  55 +++++++-
 13 files changed, 434 insertions(+), 78 deletions(-)

diff --git a/RELEASE.md b/RELEASE.md
index e475e2e5c..74d5ce146 100644
--- a/RELEASE.md
+++ b/RELEASE.md
@@ -33,7 +33,13 @@
 
 
 ### Novità
-- Aggiornato il Blocco Form con diverse proprietà aggiuntive: ora è possibile aggiungere un testo in header e in footer nell'email inviata, è stato inserito un nuovo livello di sicurezza OTP nel caso in cui venga scelta l'opzione dell'invio mail al destinatario, è stato aggiunto anche un messaggio personalizzabile da mostrare dopo l'invio del form e un pulsante da mostrare per il reset dei campi della form.
+* Aggiornato il Blocco Form con diverse proprietà aggiuntive:
+  * è possibile aggiungere un testo in header e in footer nell'email inviata,
+  * è stato inserito un nuovo livello di sicurezza OTP nel caso in cui venga scelta l'opzione dell'invio copia della mail,
+  * è stato aggiunto un messaggio personalizzabile da mostrare dopo l'invio del form,
+  * è possibile mostrare un pulsante per il reset dei campi della form,
+  * sono stati sistemati i messaggi d'errore dei campi,
+  * è stata aggiunta una legenda per i campi obbligatori.
 
 
 ## Versione 7.28.2 (18/06/2024)
diff --git a/locales/de/LC_MESSAGES/volto.po b/locales/de/LC_MESSAGES/volto.po
index 7a20b533c..f36182860 100644
--- a/locales/de/LC_MESSAGES/volto.po
+++ b/locales/de/LC_MESSAGES/volto.po
@@ -2004,6 +2004,16 @@ msgstr ""
 msgid "fine_termine"
 msgstr ""
 
+#: overrideTranslations
+# defaultMessage: Annulla
+msgid "form_default_cancel_label"
+msgstr ""
+
+#: overrideTranslations
+# defaultMessage: Ricomincia
+msgid "form_reset"
+msgstr ""
+
 #: components/ItaliaTheme/View/PersonaView/PersonaRuolo
 # defaultMessage: Foto dell'attività politica
 msgid "foto_attivita_politica"
@@ -2166,6 +2176,11 @@ msgstr ""
 msgid "legami_strutture_figlie"
 msgstr ""
 
+#: overrideTranslations
+# defaultMessage: I campi contrassegnati da (*) sono obbligatori.
+msgid "legend_required"
+msgstr ""
+
 #: components/ItaliaTheme/Blocks/SearchSections/SideBar
 # defaultMessage: Collegamento
 msgid "link"
diff --git a/locales/en/LC_MESSAGES/volto.po b/locales/en/LC_MESSAGES/volto.po
index 2a758a19e..477654897 100644
--- a/locales/en/LC_MESSAGES/volto.po
+++ b/locales/en/LC_MESSAGES/volto.po
@@ -1989,6 +1989,16 @@ msgstr "Search"
 msgid "fine_termine"
 msgstr "End of term"
 
+#: overrideTranslations
+# defaultMessage: Annulla
+msgid "form_default_cancel_label"
+msgstr ""
+
+#: overrideTranslations
+# defaultMessage: Ricomincia
+msgid "form_reset"
+msgstr ""
+
 #: components/ItaliaTheme/View/PersonaView/PersonaRuolo
 # defaultMessage: Foto dell'attività politica
 msgid "foto_attivita_politica"
@@ -2151,6 +2161,11 @@ msgstr "Association service or office"
 msgid "legami_strutture_figlie"
 msgstr "Internal services or offices"
 
+#: overrideTranslations
+# defaultMessage: I campi contrassegnati da (*) sono obbligatori.
+msgid "legend_required"
+msgstr ""
+
 #: components/ItaliaTheme/Blocks/SearchSections/SideBar
 # defaultMessage: Collegamento
 msgid "link"
diff --git a/locales/es/LC_MESSAGES/volto.po b/locales/es/LC_MESSAGES/volto.po
index f4d874b52..4ce8b5b09 100644
--- a/locales/es/LC_MESSAGES/volto.po
+++ b/locales/es/LC_MESSAGES/volto.po
@@ -1998,6 +1998,16 @@ msgstr "Buscar"
 msgid "fine_termine"
 msgstr "Fin de los términos"
 
+#: overrideTranslations
+# defaultMessage: Annulla
+msgid "form_default_cancel_label"
+msgstr ""
+
+#: overrideTranslations
+# defaultMessage: Ricomincia
+msgid "form_reset"
+msgstr ""
+
 #: components/ItaliaTheme/View/PersonaView/PersonaRuolo
 # defaultMessage: Foto dell'attività politica
 msgid "foto_attivita_politica"
@@ -2160,6 +2170,11 @@ msgstr "Servicio u oficina de la asociación"
 msgid "legami_strutture_figlie"
 msgstr "Servicios internos u oficinas"
 
+#: overrideTranslations
+# defaultMessage: I campi contrassegnati da (*) sono obbligatori.
+msgid "legend_required"
+msgstr ""
+
 #: components/ItaliaTheme/Blocks/SearchSections/SideBar
 # defaultMessage: Collegamento
 msgid "link"
diff --git a/locales/fr/LC_MESSAGES/volto.po b/locales/fr/LC_MESSAGES/volto.po
index 54367e282..e98b64a94 100644
--- a/locales/fr/LC_MESSAGES/volto.po
+++ b/locales/fr/LC_MESSAGES/volto.po
@@ -2006,6 +2006,16 @@ msgstr "Rechercher"
 msgid "fine_termine"
 msgstr "Fin du mandat"
 
+#: overrideTranslations
+# defaultMessage: Annulla
+msgid "form_default_cancel_label"
+msgstr ""
+
+#: overrideTranslations
+# defaultMessage: Ricomincia
+msgid "form_reset"
+msgstr ""
+
 #: components/ItaliaTheme/View/PersonaView/PersonaRuolo
 # defaultMessage: Foto dell'attività politica
 msgid "foto_attivita_politica"
@@ -2168,6 +2178,11 @@ msgstr ""
 msgid "legami_strutture_figlie"
 msgstr ""
 
+#: overrideTranslations
+# defaultMessage: I campi contrassegnati da (*) sono obbligatori.
+msgid "legend_required"
+msgstr ""
+
 #: components/ItaliaTheme/Blocks/SearchSections/SideBar
 # defaultMessage: Collegamento
 msgid "link"
diff --git a/locales/it/LC_MESSAGES/volto.po b/locales/it/LC_MESSAGES/volto.po
index 4c165c29d..90e55b986 100644
--- a/locales/it/LC_MESSAGES/volto.po
+++ b/locales/it/LC_MESSAGES/volto.po
@@ -1989,6 +1989,16 @@ msgstr "Cerca"
 msgid "fine_termine"
 msgstr "Fine termine"
 
+#: overrideTranslations
+# defaultMessage: Annulla
+msgid "form_default_cancel_label"
+msgstr "Annulla"
+
+#: overrideTranslations
+# defaultMessage: Ricomincia
+msgid "form_reset"
+msgstr "Ricomincia"
+
 #: components/ItaliaTheme/View/PersonaView/PersonaRuolo
 # defaultMessage: Foto dell'attività politica
 msgid "foto_attivita_politica"
@@ -2151,6 +2161,11 @@ msgstr "Servizio o ufficio di appartenenza"
 msgid "legami_strutture_figlie"
 msgstr "Servizi o uffici interni"
 
+#: overrideTranslations
+# defaultMessage: I campi contrassegnati da (*) sono obbligatori.
+msgid "legend_required"
+msgstr "I campi contrassegnati da (*) sono obbligatori."
+
 #: components/ItaliaTheme/Blocks/SearchSections/SideBar
 # defaultMessage: Collegamento
 msgid "link"
diff --git a/locales/volto.pot b/locales/volto.pot
index 5cffc80d4..34568edad 100644
--- a/locales/volto.pot
+++ b/locales/volto.pot
@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: Plone\n"
-"POT-Creation-Date: 2024-03-27T13:29:18.025Z\n"
+"POT-Creation-Date: 2024-06-21T09:58:51.722Z\n"
 "Last-Translator: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "Language-Team: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "MIME-Version: 1.0\n"
@@ -1991,6 +1991,16 @@ msgstr ""
 msgid "fine_termine"
 msgstr ""
 
+#: overrideTranslations
+# defaultMessage: Annulla
+msgid "form_default_cancel_label"
+msgstr ""
+
+#: overrideTranslations
+# defaultMessage: Ricomincia
+msgid "form_reset"
+msgstr ""
+
 #: components/ItaliaTheme/View/PersonaView/PersonaRuolo
 # defaultMessage: Foto dell'attività politica
 msgid "foto_attivita_politica"
@@ -2153,6 +2163,11 @@ msgstr ""
 msgid "legami_strutture_figlie"
 msgstr ""
 
+#: overrideTranslations
+# defaultMessage: I campi contrassegnati da (*) sono obbligatori.
+msgid "legend_required"
+msgstr ""
+
 #: components/ItaliaTheme/Blocks/SearchSections/SideBar
 # defaultMessage: Collegamento
 msgid "link"
diff --git a/src/components/ItaliaTheme/manage/Widgets/FileWidget.jsx b/src/components/ItaliaTheme/manage/Widgets/FileWidget.jsx
index 83eb4214d..cda0d531a 100644
--- a/src/components/ItaliaTheme/manage/Widgets/FileWidget.jsx
+++ b/src/components/ItaliaTheme/manage/Widgets/FileWidget.jsx
@@ -5,6 +5,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import cx from 'classnames';
 import { Dimmer, Button } from 'design-react-kit/dist/design-react-kit';
 import { readAsDataURL } from 'promise-file-reader';
 import { injectIntl, defineMessages, useIntl } from 'react-intl';
@@ -56,13 +57,25 @@ const messages = defineMessages({
  * @returns {string} Markup of the component.
  */
 const FileWidget = (props) => {
-  const { id, value, onChange, label, onEdit, infoText } = props;
+  const {
+    id,
+    value,
+    onChange,
+    label,
+    onEdit,
+    infoText,
+    required,
+    invalid,
+    validationText,
+  } = props;
   const [isImage, setIsImage] = React.useState(false);
   const intl = useIntl();
 
   React.useEffect(() => {
     if (value && imageMimetypes.includes(value['content-type'])) {
       setIsImage(true);
+    } else {
+      setIsImage(false);
     }
   }, [value]);
 
@@ -98,6 +111,16 @@ const FileWidget = (props) => {
     reader.readAsDataURL(files[0]);
   };
 
+  let attributes = {};
+  if (required) {
+    attributes.required = true;
+    attributes['aria-required'] = true;
+  }
+  const isInvalid = invalid === true || invalid === 'true';
+  if (isInvalid) {
+    attributes['aria-invalid'] = true;
+  }
+
   return (
     <div className="form-group ">
       <label htmlFor={`field-${id}`} className="active">
@@ -154,12 +177,22 @@ const FileWidget = (props) => {
                   name={id}
                   type="file"
                   disabled={props.disabled || null}
+                  {...attributes}
                 />
               )}
             </div>
           )}
         </Dropzone>
-        {infoText && <small className="form-text text-muted">{infoText}</small>}
+        {infoText && (
+          <small
+            className={cx('form-text', {
+              'invalid-feedback form-feedback just-validate-error-label form-feedback just-validate-error-label':
+                invalid,
+            })}
+          >
+            {infoText}
+          </small>
+        )}
         {value && (
           <div className="field-file-name">
             {value.filename}
@@ -177,6 +210,11 @@ const FileWidget = (props) => {
           </div>
         )}
       </div>
+      {validationText && (
+        <div className="invalid-feedback form-feedback just-validate-error-label form-text form-feedback just-validate-error-label">
+          {validationText}
+        </div>
+      )}
     </div>
   );
 };
diff --git a/src/customizations/volto-form-block/components/Edit.jsx b/src/customizations/volto-form-block/components/Edit.jsx
index f36dbe403..c4a8a917e 100644
--- a/src/customizations/volto-form-block/components/Edit.jsx
+++ b/src/customizations/volto-form-block/components/Edit.jsx
@@ -11,6 +11,7 @@ import React from 'react';
 import EditBlock from 'volto-form-block/components/EditBlock';
 // eslint-disable-next-line import/no-unresolved
 import Sidebar from 'volto-form-block/components/Sidebar';
+import ValidateConfigForm from 'volto-form-block/components/ValidateConfigForm';
 
 import {
   Card,
@@ -38,6 +39,10 @@ const messages = defineMessages({
     id: 'form_default_submit_label',
     defaultMessage: 'Invia',
   },
+  default_cancel_label: {
+    id: 'form_default_cancel_label',
+    defaultMessage: 'Annulla',
+  },
   warning: {
     id: 'form_edit_warning',
     defaultMessage: 'Attenzione!',
@@ -80,17 +85,24 @@ class Edit extends SubblocksEdit {
 
     return (
       <div className="public-ui">
-        <div className="px-4 py-5">
-          {this.props?.data?.title && <h2>{this.props.data.title}</h2>}
-          {this.props?.data?.description && (
-            <div className="block-description">
-              {this.props.data.description}
-            </div>
-          )}
-          <Card className="card-bg rounded py-3" noWrapper={false} tag="div">
-            <CardBody tag="div">
-              <SubblocksWrapper node={this.node}>
-                {/*this.state.subblocks.filter((s) => s.field_type === 'from')
+        <ValidateConfigForm
+          data={this.props.data}
+          onEdit={true}
+          onChangeBlock={(data) => {
+            this.props.onChangeBlock(this.props.block, data);
+          }}
+        >
+          <div className="px-4 py-5">
+            {this.props?.data?.title && <h2>{this.props.data.title}</h2>}
+            {this.props?.data?.description && (
+              <div className="block-description">
+                {this.props.data.description}
+              </div>
+            )}
+            <Card className="card-bg rounded py-3" noWrapper={false} tag="div">
+              <CardBody tag="div">
+                <SubblocksWrapper node={this.node}>
+                  {/*this.state.subblocks.filter((s) => s.field_type === 'from')
                   .length == 0 && (
                   <Alert color="warning" fade isOpen tag="div">
                     <h4>{this.props.intl.formatMessage(messages.warning)}</h4>
@@ -100,40 +112,49 @@ class Edit extends SubblocksEdit {
                   </Alert>
                 )*/}
 
-                {this.state.subblocks.map((subblock, subindex) => (
-                  <div className="form-field" key={subblock.id}>
-                    <EditBlock
-                      data={subblock}
-                      index={subindex}
-                      selected={this.isSubblockSelected(subindex)}
-                      {...this.subblockProps}
-                      openObjectBrowser={this.props.openObjectBrowser}
-                    />
-                  </div>
-                ))}
+                  {this.state.subblocks.map((subblock, subindex) => (
+                    <div className="form-field" key={subblock.id}>
+                      <EditBlock
+                        data={subblock}
+                        index={subindex}
+                        selected={this.isSubblockSelected(subindex)}
+                        {...this.subblockProps}
+                        openObjectBrowser={this.props.openObjectBrowser}
+                      />
+                    </div>
+                  ))}
 
-                {this.props.selected && (
-                  <div className="form-field">
-                    {this.renderAddBlockButton(
-                      this.props.intl.formatMessage(messages.addField),
-                    )}
-                  </div>
-                )}
+                  {this.props.selected && (
+                    <div className="form-field">
+                      {this.renderAddBlockButton(
+                        this.props.intl.formatMessage(messages.addField),
+                      )}
+                    </div>
+                  )}
 
-                <Row>
-                  <Col align="center">
-                    <Button color="primary">
-                      {this.props.data.submit_label ||
-                        this.props.intl.formatMessage(
-                          messages.default_submit_label,
-                        )}
-                    </Button>
-                  </Col>
-                </Row>
-              </SubblocksWrapper>
-            </CardBody>
-          </Card>
-        </div>
+                  <Row>
+                    <Col align="center">
+                      {this.props.data?.show_cancel && (
+                        <Button color="secondary" className="mr-2">
+                          {this.props.data.cancel_label ||
+                            this.props.intl.formatMessage(
+                              messages.default_cancel_label,
+                            )}
+                        </Button>
+                      )}
+                      <Button color="primary">
+                        {this.props.data.submit_label ||
+                          this.props.intl.formatMessage(
+                            messages.default_submit_label,
+                          )}
+                      </Button>
+                    </Col>
+                  </Row>
+                </SubblocksWrapper>
+              </CardBody>
+            </Card>
+          </div>
+        </ValidateConfigForm>
 
         <SidebarPortal selected={this.props.selected || false}>
           <Sidebar
diff --git a/src/customizations/volto-form-block/components/Field.jsx b/src/customizations/volto-form-block/components/Field.jsx
index 225526d1f..f211e9a55 100644
--- a/src/customizations/volto-form-block/components/Field.jsx
+++ b/src/customizations/volto-form-block/components/Field.jsx
@@ -14,6 +14,7 @@ import {
   FormGroup,
   Label,
 } from 'design-react-kit/dist/design-react-kit';
+import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
 
 import FileWidget from 'design-comuni-plone-theme/components/ItaliaTheme/manage/Widgets/FileWidget';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
@@ -26,6 +27,24 @@ const messages = defineMessages({
     id: 'form_select_a_value',
     defaultMessage: 'Seleziona un valore',
   },
+  open_menu: {
+    id: 'open_menu',
+    defaultMessage: 'Apri il menu',
+  },
+});
+
+const DropdownIndicator = injectLazyLibs('reactSelect')((props) => {
+  const intl = useIntl();
+  const components = props.reactSelect.components;
+  return (
+    <components.DropdownIndicator {...props}>
+      <Icon
+        icon="chevron-down"
+        style={{ ariaHidden: true }}
+        title={intl.formatMessage(messages.open_menu)}
+      />
+    </components.DropdownIndicator>
+  );
 });
 
 /**
@@ -46,6 +65,7 @@ const Field = ({
   valid,
   disabled = false,
   formHasErrors = false,
+  errorMessage,
   id,
   reactSelect,
 }) => {
@@ -60,6 +80,15 @@ const Field = ({
     return !isOnEdit && !valid;
   };
 
+  const infoText = errorMessage ? (
+    <>
+      <div className="form-text">{description}</div>
+      {errorMessage}
+    </>
+  ) : (
+    description
+  );
+
   return (
     <div className="field">
       {field_type === 'text' && (
@@ -69,7 +98,7 @@ const Field = ({
           label={getLabel()}
           type="text"
           required={required}
-          infoText={description}
+          infoText={infoText}
           disabled={disabled}
           readOnly={disabled}
           invalid={isInvalid() ? 'true' : null}
@@ -87,14 +116,14 @@ const Field = ({
           type="textarea"
           rows={10}
           required={required}
-          infoText={description}
+          infoText={infoText}
           disabled={disabled}
           readOnly={disabled}
           invalid={isInvalid() ? 'true' : null}
           onChange={(e) => {
             onChange(name, e.target.value);
           }}
-          {...(value ? { value } : {})}
+          value={value ?? undefined}
         />
       )}
       {field_type === 'select' && (
@@ -108,6 +137,7 @@ const Field = ({
             <Select
               components={{
                 IndicatorSeparator: null,
+                DropdownIndicator,
               }}
               id={name}
               name={name}
@@ -124,10 +154,16 @@ const Field = ({
               aria-label={intl.formatMessage(messages.select_a_value)}
               classNamePrefix="react-select"
               className={isInvalid() ? 'is-invalid' : ''}
+              value={value ? [{ value: value, label: value }] : []}
             />
             {description && (
               <small className="form-text text-muted">{description}</small>
             )}
+            {errorMessage && (
+              <div className="invalid-feedback form-feedback just-validate-error-label form-text form-feedback just-validate-error-label">
+                {errorMessage}
+              </div>
+            )}
           </div>
         </div>
       )}
@@ -150,7 +186,9 @@ const Field = ({
                   onChange={(e) => {
                     onChange(name, v);
                   }}
-                  invalid={isInvalid() ? 'true' : null}
+                  // invalid={isInvalid() ? 'true' : null}
+                  // addon // Needed to avoid application of form-control class as of kit v4.0.2
+                  checked={value === v}
                 />
                 <Label for={v + name} check>
                   {v}
@@ -160,6 +198,11 @@ const Field = ({
             {description && (
               <small className="form-text text-muted">{description}</small>
             )}
+            {errorMessage && (
+              <div className="invalid-feedback form-feedback just-validate-error-label form-text form-feedback just-validate-error-label">
+                {errorMessage}
+              </div>
+            )}
           </div>
         </div>
       )}
@@ -188,6 +231,7 @@ const Field = ({
                     onChange(name, values);
                   }}
                   invalid={isInvalid() ? 'true' : null}
+                  // addon // Needed to avoid application of form-control class as of kit v4.0.2
                 />
                 <Label for={v + name} check>
                   {v}
@@ -197,6 +241,11 @@ const Field = ({
             {description && (
               <small className="form-text text-muted">{description}</small>
             )}
+            {errorMessage && (
+              <div className="invalid-feedback form-feedback just-validate-error-label form-text form-feedback just-validate-error-label">
+                {errorMessage}
+              </div>
+            )}
           </div>
         </div>
       )}
@@ -218,6 +267,7 @@ const Field = ({
                 }}
                 invalid={isInvalid() ? 'true' : null}
                 required={required}
+                // addon // Needed to avoid application of form-control class as of kit v4.0.2
               />
               <Label for={name} check>
                 {getLabel()}
@@ -226,6 +276,11 @@ const Field = ({
             {description && (
               <small className="form-text text-muted">{description}</small>
             )}
+            {errorMessage && (
+              <div className="invalid-feedback form-feedback just-validate-error-label form-text form-feedback just-validate-error-label">
+                {errorMessage}
+              </div>
+            )}
           </div>
         </div>
       )}
@@ -236,13 +291,14 @@ const Field = ({
           label={getLabel()}
           type="date"
           required={required}
-          infoText={description}
+          infoText={infoText}
           disabled={disabled}
           readOnly={disabled}
           invalid={isInvalid() ? 'true' : null}
           onChange={(e) => {
             onChange(name, e.target.value);
           }}
+          value={value ?? ''}
         />
       )}
       {field_type === 'attachment' && (
@@ -252,7 +308,7 @@ const Field = ({
           label={getLabel()}
           type="file"
           required={required}
-          infoText={description}
+          infoText={infoText}
           disabled={disabled}
           readOnly={disabled}
           invalid={isInvalid() ? 'true' : null}
@@ -268,14 +324,15 @@ const Field = ({
           label={getLabel()}
           type="email"
           required={true}
-          infoText={description}
+          infoText={infoText}
           disabled={disabled}
           readOnly={disabled}
           invalid={isInvalid() ? 'true' : null}
+          validationtext={errorMessage}
           onChange={(e) => {
             onChange(name, e.target.value);
           }}
-          {...(value ? { value } : {})}
+          value={value ?? ''}
         />
       )}
       {field_type === 'static_text' &&
@@ -306,6 +363,7 @@ const Field = ({
               name={name}
               title={label}
               description={description}
+              infoText={infoText}
               required={required}
               onChange={onChange}
               value={value}
diff --git a/src/customizations/volto-form-block/components/FormView.jsx b/src/customizations/volto-form-block/components/FormView.jsx
index 0cbc7c923..ac7d47ffa 100644
--- a/src/customizations/volto-form-block/components/FormView.jsx
+++ b/src/customizations/volto-form-block/components/FormView.jsx
@@ -1,6 +1,7 @@
 /*Customizatinos:
 - usati i componenti di design-react-kit
 - disabilitato il captcha se nelle siteProperties del config è stato disabilitato.
+- aggiunta legenda per i campi obbligatori
 */
 import React from 'react';
 import { useIntl, defineMessages } from 'react-intl';
@@ -25,6 +26,10 @@ const messages = defineMessages({
     id: 'form_default_submit_label',
     defaultMessage: 'Invia',
   },
+  default_cancel_label: {
+    id: 'form_default_cancel_label',
+    defaultMessage: 'Annulla',
+  },
   error: {
     id: 'Error',
     defaultMessage: 'Errore',
@@ -33,14 +38,18 @@ const messages = defineMessages({
     id: 'Email Success',
     defaultMessage: 'Form inviato correttamente',
   },
-  empty_values: {
-    id: 'form_empty_values_validation',
-    defaultMessage: 'Compila i campi richiesti',
+  form_errors: {
+    id: 'form_errors_validation',
+    defaultMessage: 'Attenzione! Alcuni campi inseriti sono da controllare.',
   },
   reset: {
     id: 'form_reset',
     defaultMessage: 'Ricomincia',
   },
+  legend_required: {
+    id: 'legend_required',
+    defaultMessage: 'I campi contrassegnati da (*) sono obbligatori.',
+  },
 });
 
 const FormView = ({
@@ -51,7 +60,10 @@ const FormView = ({
   data,
   onSubmit,
   resetFormState,
+  resetFormOnError,
   captcha,
+  id,
+  getErrorMessage,
 }) => {
   const intl = useIntl();
   const alertTransition = {
@@ -71,7 +83,24 @@ const FormView = ({
     config.settings.siteProperties.enableVoltoFormBlockCaptcha;
 
   const isValidField = (field) => {
-    return formErrors?.indexOf(field) < 0;
+    return formErrors?.filter((e) => e.field === field).length === 0;
+  };
+
+  /* Function that replaces variables from the user customized message  */
+  const replaceMessage = (text) => {
+    let i = 0;
+    while (i < data.subblocks.length) {
+      let idField = getFieldName(
+        data.subblocks[i].label,
+        data.subblocks[i].field_id,
+      );
+      text = text.replaceAll(
+        '${' + idField + '}',
+        formData[idField]?.value || '',
+      );
+      i++;
+    }
+    return text;
   };
 
   var FieldSchema = config.blocks.blocksConfig.form.fieldSchema;
@@ -83,6 +112,11 @@ const FormView = ({
     }
   }
 
+  const submit = (e) => {
+    resetFormOnError();
+    onSubmit(e);
+  };
+
   return (
     <div className="block form">
       <div className="public-ui">
@@ -93,21 +127,7 @@ const FormView = ({
           )}
           <Card className="card-bg rounded py-3" noWrapper={false} tag="div">
             <CardBody tag="div">
-              {formState.error ? (
-                <Alert
-                  color="danger"
-                  fade
-                  isOpen
-                  tag="div"
-                  transition={alertTransition}
-                >
-                  <h4>{intl.formatMessage(messages.error)}</h4>
-                  <p>{formState.error}</p>
-                  <Button type="clear" onClick={resetFormState}>
-                    {intl.formatMessage(messages.reset)}
-                  </Button>
-                </Alert>
-              ) : formState.result ? (
+              {formState.result ? (
                 <Alert
                   color="success"
                   fade
@@ -117,17 +137,44 @@ const FormView = ({
                 >
                   <h4>{intl.formatMessage(messages.success)}</h4>
                   <br />
-                  <Button type="clear" onClick={resetFormState}>
+                  {/* Custom message */}
+                  {data.send_message && (
+                    <>
+                      <p
+                        dangerouslySetInnerHTML={{
+                          __html: replaceMessage(data.send_message),
+                        }}
+                      />
+                      <br />
+                    </>
+                  )}
+                  <Button
+                    color="primary"
+                    outline
+                    onClick={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      resetFormState();
+                    }}
+                  >
                     {intl.formatMessage(messages.reset)}
                   </Button>
                 </Alert>
               ) : (
                 <form
-                  onSubmit={onSubmit}
+                  onSubmit={submit}
                   noValidate
                   autoComplete="off"
                   method="post"
                 >
+                  {/* Controlla che ci siano campi obbligatori al suo interno e applica una legenda  */}
+                  {data.subblocks.some((item) => item.required === true) && (
+                    <legend className="text-muted text-end mb-3">
+                      <small>
+                        {intl.formatMessage(messages.legend_required)}
+                      </small>
+                    </legend>
+                  )}
                   {data.static_fields && (
                     <fieldset disabled>
                       {data.static_fields?.map((field) => (
@@ -183,6 +230,7 @@ const FormView = ({
                                 : formData[name]?.value
                             }
                             valid={isValidField(name)}
+                            errorMessage={getErrorMessage(name)}
                             formHasErrors={formErrors.length > 0}
                           />
                         </Col>
@@ -201,12 +249,39 @@ const FormView = ({
                       transition={alertTransition}
                     >
                       <h4>{intl.formatMessage(messages.error)}</h4>
-                      <p>{intl.formatMessage(messages.empty_values)}</p>
+                      <p>{intl.formatMessage(messages.form_errors)}</p>
+                    </Alert>
+                  )}
+                  {formState.error && (
+                    <Alert
+                      color="danger"
+                      fade
+                      isOpen
+                      tag="div"
+                      transition={alertTransition}
+                    >
+                      <h4>{intl.formatMessage(messages.error)}</h4>
+                      <p>{formState.error}</p>
                     </Alert>
                   )}
 
                   <Row>
                     <Col align="center">
+                      {data?.show_cancel && (
+                        <Button
+                          color="secondary"
+                          type="button"
+                          onClick={(e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            resetFormState();
+                          }}
+                          className="mr-2"
+                        >
+                          {data.cancel_label ||
+                            intl.formatMessage(messages.default_cancel_label)}
+                        </Button>
+                      )}
                       <Button
                         color="primary"
                         type="submit"
diff --git a/src/overrideTranslations.jsx b/src/overrideTranslations.jsx
index 73616d8a6..c62e57a3f 100644
--- a/src/overrideTranslations.jsx
+++ b/src/overrideTranslations.jsx
@@ -37,4 +37,19 @@ const messages = defineMessages({
     id: 'toggleMenu_close',
     defaultMessage: 'Chiudi',
   },
+  reset: {
+    //volto-form-block
+    id: 'form_reset',
+    defaultMessage: 'Ricomincia',
+  },
+  legend_required: {
+    //volto-form-block
+    id: 'legend_required',
+    defaultMessage: 'I campi contrassegnati da (*) sono obbligatori.',
+  },
+  default_cancel_label: {
+    //volto-form-block
+    id: 'form_default_cancel_label',
+    defaultMessage: 'Annulla',
+  },
 });
diff --git a/theme/ItaliaTheme/Blocks/_form.scss b/theme/ItaliaTheme/Blocks/_form.scss
index b9a3da9fa..b0d405abd 100644
--- a/theme/ItaliaTheme/Blocks/_form.scss
+++ b/theme/ItaliaTheme/Blocks/_form.scss
@@ -43,6 +43,13 @@
         }
       }
     }
+
+    textarea {
+      &.form-control.is-invalid {
+        background-position-x: 99% !important;
+        background-size: 16px !important;
+      }
+    }
   }
 }
 
@@ -88,11 +95,29 @@
     &.is-invalid {
       .react-select__control {
         border-bottom-color: $danger !important;
+
+        .react-select__indicators {
+          &::after {
+            width: 1.65rem;
+            height: 20px;
+            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f73e5a' viewBox='0 0 384 512'%3E%3Cpath d='M231.6 256l130.1-130.1c4.7-4.7 4.7-12.3 0-17l-22.6-22.6c-4.7-4.7-12.3-4.7-17 0L192 216.4 61.9 86.3c-4.7-4.7-12.3-4.7-17 0l-22.6 22.6c-4.7 4.7-4.7 12.3 0 17L152.4 256 22.3 386.1c-4.7 4.7-4.7 12.3 0 17l22.6 22.6c4.7 4.7 12.3 4.7 17 0L192 295.6l130.1 130.1c4.7 4.7 12.3 4.7 17 0l22.6-22.6c4.7-4.7 4.7-12.3 0-17L231.6 256z'/%3E%3C/svg%3E");
+            background-repeat: no-repeat;
+            content: '';
+          }
+        }
       }
     }
+
+    .react-select__menu {
+      z-index: 2;
+    }
   }
 
   .bootstrap-checkbox-radio-wrapper {
+    padding-right: 2rem;
+    background-position: 99% !important;
+    background-size: 22px 20px !important;
+
     > label {
       position: unset;
 
@@ -191,7 +216,35 @@
       .icon {
         width: 16px;
         height: 16px;
-        color: $primary;
+        color: $link-color;
+      }
+    }
+
+    &:has(input[aria-invalid='true']) {
+      .dropzone-placeholder {
+        border-color: $danger;
+      }
+
+      .file-widget-dropzone {
+        position: relative;
+
+        &::before {
+          position: absolute;
+          top: -21px;
+          right: 0;
+          width: 1.65rem;
+          height: 20px;
+          background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f73e5a' viewBox='0 0 384 512'%3E%3Cpath d='M231.6 256l130.1-130.1c4.7-4.7 4.7-12.3 0-17l-22.6-22.6c-4.7-4.7-12.3-4.7-17 0L192 216.4 61.9 86.3c-4.7-4.7-12.3-4.7-17 0l-22.6 22.6c-4.7 4.7-4.7 12.3 0 17L152.4 256 22.3 386.1c-4.7 4.7-4.7 12.3 0 17l22.6 22.6c4.7 4.7 12.3 4.7 17 0L192 295.6l130.1 130.1c4.7 4.7 12.3 4.7 17 0l22.6-22.6c4.7-4.7 4.7-12.3 0-17L231.6 256z'/%3E%3C/svg%3E");
+          background-repeat: no-repeat;
+          content: '';
+
+          @media (max-width: #{map-get($grid-breakpoints, lg)}) {
+            position: relative;
+            top: 0;
+            display: flex;
+            margin-left: auto;
+          }
+        }
       }
     }
   }

From 00e44c777c7199ffb77f9116d5d6a095cd6ffef6 Mon Sep 17 00:00:00 2001
From: Sara Bianchi <sara.bianchi@redturtle.it>
Date: Mon, 24 Jun 2024 16:43:08 +0200
Subject: [PATCH 3/3] chore: updated volto-form-block customizations

---
 .../components/FormResult.jsx                 |  78 ++++++++++
 .../volto-form-block/components/FormView.jsx  | 136 ++++++++++--------
 .../components/Widget/Button.jsx              |  50 +++++++
 3 files changed, 206 insertions(+), 58 deletions(-)
 create mode 100644 src/customizations/volto-form-block/components/FormResult.jsx
 create mode 100644 src/customizations/volto-form-block/components/Widget/Button.jsx

diff --git a/src/customizations/volto-form-block/components/FormResult.jsx b/src/customizations/volto-form-block/components/FormResult.jsx
new file mode 100644
index 000000000..6d26c89c6
--- /dev/null
+++ b/src/customizations/volto-form-block/components/FormResult.jsx
@@ -0,0 +1,78 @@
+/*
+CUSTOMIZATIONS:
+- used design-react-kit components to render form result
+*/
+import React from 'react';
+import { useIntl, defineMessages } from 'react-intl';
+import { Button, Alert } from 'design-react-kit/dist/design-react-kit';
+import { getFieldName } from 'volto-form-block/components/utils';
+
+const messages = defineMessages({
+  success: {
+    id: 'form_submit_success',
+    defaultMessage: 'Sent!',
+  },
+  reset: {
+    id: 'form_reset',
+    defaultMessage: 'Clear',
+  },
+});
+
+const alertTransition = {
+  appear: true,
+  baseClass: 'fade',
+  baseClassActive: 'show',
+  enter: true,
+  exit: true,
+  in: true,
+  mountOnEnter: false,
+  tag: 'div',
+  timeout: 150,
+  unmountOnExit: true,
+};
+
+/* Function that replaces variables from the user customized message  */
+const replaceMessage = (text, sent_data) => {
+  let i = 0;
+  while (i < sent_data.length) {
+    let idField = getFieldName(sent_data[i].label, sent_data[i].field_id);
+    text = text.replaceAll('${' + idField + '}', sent_data[i].value ?? '');
+    i++;
+  }
+  text = text.replaceAll(/\$\{[^}]*\}/gm, ''); //replace empty fields with nothing
+  text = text.replaceAll('\n', '<br/>');
+  return text;
+};
+
+const FormResult = ({ formState, data, resetFormState }) => {
+  const intl = useIntl();
+  return (
+    <Alert color="success" fade isOpen tag="div" transition={alertTransition}>
+      <h4>{intl.formatMessage(messages.success)}</h4>
+      <br />
+      {/* Custom message */}
+      {data.send_message && (
+        <>
+          <p
+            dangerouslySetInnerHTML={{
+              __html: replaceMessage(data.send_message, formState.result.data),
+            }}
+          />
+          <br />
+        </>
+      )}
+      <Button
+        color="primary"
+        outline
+        onClick={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          resetFormState();
+        }}
+      >
+        {intl.formatMessage(messages.reset)}
+      </Button>
+    </Alert>
+  );
+};
+export default FormResult;
diff --git a/src/customizations/volto-form-block/components/FormView.jsx b/src/customizations/volto-form-block/components/FormView.jsx
index ac7d47ffa..8d9132e44 100644
--- a/src/customizations/volto-form-block/components/FormView.jsx
+++ b/src/customizations/volto-form-block/components/FormView.jsx
@@ -10,7 +10,6 @@ import {
   CardBody,
   Row,
   Col,
-  Button,
   Alert,
   Progress,
 } from 'design-react-kit/dist/design-react-kit';
@@ -18,6 +17,12 @@ import {
 import { getFieldName } from 'volto-form-block/components/utils';
 // eslint-disable-next-line import/no-unresolved
 import Field from 'volto-form-block/components/Field';
+import {
+  OTPWidget,
+  OTP_FIELDNAME_EXTENDER,
+  Button,
+} from 'volto-form-block/components/Widget';
+import { FormResult } from 'volto-form-block/components';
 // eslint-disable-next-line import/no-unresolved
 import config from '@plone/volto/registry';
 
@@ -64,6 +69,8 @@ const FormView = ({
   captcha,
   id,
   getErrorMessage,
+  path,
+  block_id,
 }) => {
   const intl = useIntl();
   const alertTransition = {
@@ -86,23 +93,6 @@ const FormView = ({
     return formErrors?.filter((e) => e.field === field).length === 0;
   };
 
-  /* Function that replaces variables from the user customized message  */
-  const replaceMessage = (text) => {
-    let i = 0;
-    while (i < data.subblocks.length) {
-      let idField = getFieldName(
-        data.subblocks[i].label,
-        data.subblocks[i].field_id,
-      );
-      text = text.replaceAll(
-        '${' + idField + '}',
-        formData[idField]?.value || '',
-      );
-      i++;
-    }
-    return text;
-  };
-
   var FieldSchema = config.blocks.blocksConfig.form.fieldSchema;
   var fieldSchemaProperties = FieldSchema()?.properties;
   var fields_to_send = [];
@@ -117,6 +107,26 @@ const FormView = ({
     onSubmit(e);
   };
 
+  const getFieldsToSendWithValue = (subblock) => {
+    var fields_to_send = [];
+    var fieldSchemaProperties = FieldSchema(subblock)?.properties;
+    for (var key in fieldSchemaProperties) {
+      if (fieldSchemaProperties[key].send_to_backend) {
+        fields_to_send.push(key);
+      }
+    }
+
+    var fields_to_send_with_value = Object.assign(
+      {},
+      ...fields_to_send.map((field) => {
+        return {
+          [field]: subblock[field],
+        };
+      }),
+    );
+    return fields_to_send_with_value;
+  };
+
   return (
     <div className="block form">
       <div className="public-ui">
@@ -128,38 +138,11 @@ const FormView = ({
           <Card className="card-bg rounded py-3" noWrapper={false} tag="div">
             <CardBody tag="div">
               {formState.result ? (
-                <Alert
-                  color="success"
-                  fade
-                  isOpen
-                  tag="div"
-                  transition={alertTransition}
-                >
-                  <h4>{intl.formatMessage(messages.success)}</h4>
-                  <br />
-                  {/* Custom message */}
-                  {data.send_message && (
-                    <>
-                      <p
-                        dangerouslySetInnerHTML={{
-                          __html: replaceMessage(data.send_message),
-                        }}
-                      />
-                      <br />
-                    </>
-                  )}
-                  <Button
-                    color="primary"
-                    outline
-                    onClick={(e) => {
-                      e.preventDefault();
-                      e.stopPropagation();
-                      resetFormState();
-                    }}
-                  >
-                    {intl.formatMessage(messages.reset)}
-                  </Button>
-                </Alert>
+                <FormResult
+                  formState={formState}
+                  data={data}
+                  resetFormState={resetFormState}
+                />
               ) : (
                 <form
                   onSubmit={submit}
@@ -201,14 +184,8 @@ const FormView = ({
                   )}
                   {data.subblocks.map((subblock, index) => {
                     let name = getFieldName(subblock.label, subblock.id);
-                    var fields_to_send_with_value = Object.assign(
-                      {},
-                      ...fields_to_send.map((field) => {
-                        return {
-                          [field]: subblock[field],
-                        };
-                      }),
-                    );
+                    const fields_to_send_with_value =
+                      getFieldsToSendWithValue(subblock);
 
                     return (
                       <Row key={'row' + index}>
@@ -238,6 +215,49 @@ const FormView = ({
                     );
                   })}
 
+                  {/*OTP*/}
+                  {data.subblocks
+                    .filter((subblock) => subblock.use_as_bcc)
+                    .map((subblock, index) => {
+                      const fieldName = getFieldName(
+                        subblock.label,
+                        subblock.id,
+                      );
+                      const name = fieldName + OTP_FIELDNAME_EXTENDER;
+                      const fieldValue = formData[fieldName]?.value;
+                      const value = formData[fieldName]?.otp;
+                      const fields_to_send_with_value =
+                        getFieldsToSendWithValue(subblock);
+
+                      return (
+                        <Row key={'row_otp' + index}>
+                          <Col className="py-2">
+                            <OTPWidget
+                              {...subblock}
+                              fieldValue={fieldValue}
+                              onChange={(field, value) => {
+                                onChangeFormData(
+                                  subblock.id,
+                                  fieldName,
+                                  fieldValue,
+                                  {
+                                    ...fields_to_send_with_value,
+                                    otp: value,
+                                  },
+                                );
+                              }}
+                              value={value}
+                              valid={isValidField(name)}
+                              errorMessage={getErrorMessage(name)}
+                              formHasErrors={formErrors?.length > 0}
+                              path={path}
+                              block_id={block_id}
+                            />
+                          </Col>
+                        </Row>
+                      );
+                    })}
+
                   {enableCaptcha && <>{captcha.render()}</>}
 
                   {formErrors.length > 0 && (
diff --git a/src/customizations/volto-form-block/components/Widget/Button.jsx b/src/customizations/volto-form-block/components/Widget/Button.jsx
new file mode 100644
index 000000000..94dc23c29
--- /dev/null
+++ b/src/customizations/volto-form-block/components/Widget/Button.jsx
@@ -0,0 +1,50 @@
+/**
+ * customizations:
+ * used design-react-kit button
+ *
+ *
+ * Button component.
+ * This is a wrapper for Buttons, to eventually customize Button component if you don't like to use semantic-ui, for example.
+ * @module components/Widget/OTPWidget
+ */
+
+import { Button as DesignButton } from 'design-react-kit/dist/design-react-kit';
+
+const Button = (props) => {
+  let _props = { ...props };
+  if (props.primary) {
+    _props.color = 'primary';
+    delete _props.primary;
+  }
+  if (props.secondary) {
+    _props.color = 'secondary';
+    delete _props.secondary;
+  }
+  if (props.basic) {
+    _props.outline = true;
+    delete _props.basic;
+  }
+  if (props.size) {
+    switch (props.size) {
+      case 'mini':
+      case 'tiny':
+      case 'small':
+        _props.size = 'xs';
+        break;
+      case 'medium':
+      case 'large':
+        _props.size = 'sm';
+        break;
+      case 'big':
+      case 'huge':
+      case 'massive':
+        _props.size = 'lg';
+        break;
+      default:
+        break;
+    }
+  }
+  return <DesignButton {..._props} />;
+};
+
+export default Button;