feat: otp code in volto-form-block for bcc email fields (#652)

* feat: otp code in volto-form-block for bcc email fields * fix: widget otp * chore: updated volto-form-block * chore: updated volto-form-block * chore: updated volto-form-block
RedTurtle · May 20, 2024 · c2a9a8c · c2a9a8c
1 parent 81a5a9e
commit c2a9a8c
Show file tree

Hide file tree

Showing 15 changed files with 144 additions and 35 deletions.
diff --git a/package.json b/package.json
@@ -147,7 +147,7 @@
     "volto-dropdownmenu": "4.1.1",
     "volto-editablefooter": "5.1.1",
     "volto-feedback": "0.3.0",
-    "volto-form-block": "3.7.5",
+    "volto-form-block": "3.8.2",
     "volto-gdpr-privacy": "2.2.5",
     "volto-google-analytics": "2.0.0",
     "volto-multilingual-widget": "3.2.1",

diff --git a/src/components/ItaliaTheme/Blocks/IconBlocks/Block/ViewBlock.jsx b/src/components/ItaliaTheme/Blocks/IconBlocks/Block/ViewBlock.jsx
@@ -10,7 +10,6 @@ import { useIntl, defineMessages } from 'react-intl';
 import { UniversalLink } from '@plone/volto/components';
 
 import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
-import { RichTextRender } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
 import { Card, CardBody, CardReadMore } from 'design-react-kit';
 import config from '@plone/volto/registry';
 

diff --git a/src/components/ItaliaTheme/Header/HeaderSlim/TertiaryMenu.jsx b/src/components/ItaliaTheme/Header/HeaderSlim/TertiaryMenu.jsx
@@ -26,7 +26,7 @@ const TertiaryMenu = () => {
       return {
         url: item.href || flattenToAppURL(item.linkUrl?.[0]?.['@id']) || '/',
         title: item.title,
-        inEvidence:item.inEvidence
+        inEvidence: item.inEvidence,
       };
     });
 

diff --git a/src/components/ItaliaTheme/Icons/FontAwesomeIcon.jsx b/src/components/ItaliaTheme/Icons/FontAwesomeIcon.jsx
@@ -36,10 +36,10 @@ const FontAwesomeIcon = (props) => {
       prefixKey === 'fab'
         ? 'brands'
         : prefixKey === 'far'
-        ? 'regular'
-        : prefixKey != null
-        ? prefixKey
-        : 'solid',
+          ? 'regular'
+          : prefixKey != null
+            ? prefixKey
+            : 'solid',
       iconName,
     ];
   };

diff --git a/src/components/ItaliaTheme/Slider/SingleSlideWrapper.jsx b/src/components/ItaliaTheme/Slider/SingleSlideWrapper.jsx
@@ -12,6 +12,7 @@ const SingleSlideWrapper = (props) => {
   const wrapperKey = key ?? 'slide-wrapper-' + index;
 
   return (
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
     <div
       className={`it-single-slide-wrapper ${className ?? ''}`}
       key={wrapperKey}
@@ -30,6 +31,7 @@ const SingleSlideWrapper = (props) => {
         //e.preventDefault();
         //e.stopPropagation();
       }}
+      // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
       tabIndex={0}
     >
       {children}

diff --git a/src/components/ItaliaTheme/View/DocumentoView/DocumentoAccedereServizio.jsx b/src/components/ItaliaTheme/View/DocumentoView/DocumentoAccedereServizio.jsx
@@ -2,7 +2,6 @@ import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import {
-  RichText,
   RichTextSection,
   GenericCard,
 } from 'design-comuni-plone-theme/components/ItaliaTheme/View';

diff --git a/src/components/ItaliaTheme/View/PersonaView/PersonaDocumenti.jsx b/src/components/ItaliaTheme/View/PersonaView/PersonaDocumenti.jsx
@@ -205,7 +205,6 @@ const PersonaDocumenti = ({ content }) => {
           />
         </RichTextSection>
       )}
-
     </>
   );
 };

diff --git a/src/config/italiaConfig.js b/src/config/italiaConfig.js
@@ -66,8 +66,8 @@ import { schemaListing } from 'design-comuni-plone-theme/components/ItaliaTheme/
 
 import reducers from 'design-comuni-plone-theme/reducers';
 
-const ReleaseLog = loadable(() =>
-  import('design-comuni-plone-theme/components/ReleaseLog/ReleaseLog'),
+const ReleaseLog = loadable(
+  () => import('design-comuni-plone-theme/components/ReleaseLog/ReleaseLog'),
 );
 
 const messages = defineMessages({

diff --git a/src/customizations/volto-form-block/components/FormResult.jsx b/src/customizations/volto-form-block/components/FormResult.jsx
@@ -1,5 +1,5 @@
 /*
-CUSTOMIZATIONS: 
+CUSTOMIZATIONS:
 - used design-react-kit components to render form result
 */
 import React from 'react';
@@ -39,6 +39,7 @@ const replaceMessage = (text, sent_data) => {
     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;
 };

diff --git a/src/customizations/volto-form-block/components/FormView.jsx b/src/customizations/volto-form-block/components/FormView.jsx
@@ -5,19 +5,16 @@
 */
 import React from 'react';
 import { useIntl, defineMessages } from 'react-intl';
-import {
-  Card,
-  CardBody,
-  Row,
-  Col,
-  Button,
-  Alert,
-  Progress,
-} from 'design-react-kit';
+import { Card, CardBody, Row, Col, Alert, Progress } from 'design-react-kit';
 // eslint-disable-next-line import/no-unresolved
 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';
@@ -65,6 +62,8 @@ const FormView = ({
   captcha,
   id,
   getErrorMessage,
+  path,
+  block_id,
 }) => {
   const intl = useIntl();
   const alertTransition = {
@@ -101,6 +100,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">
@@ -158,14 +177,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}>
@@ -195,6 +208,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
@@ -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';
+
+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;
diff --git a/src/theme/ItaliaTheme/Blocks/_gridBlock.scss b/src/theme/ItaliaTheme/Blocks/_gridBlock.scss
@@ -52,6 +52,7 @@
         }
       }
     }
+
     &.image img {
       object-fit: contain;
       object-position: center;

diff --git a/src/theme/ItaliaTheme/Views/_slider.scss b/src/theme/ItaliaTheme/Views/_slider.scss
@@ -12,6 +12,7 @@
     &:focus {
       border: 1px solid;
     }
+
     figure {
       a {
         display: block;

diff --git a/src/theme/extras/_search.scss b/src/theme/extras/_search.scss
@@ -89,8 +89,8 @@ body.search-modal-opened {
 
 .search-results-wrapper {
   mark.highlighted-text {
-    background-color: $highlight-search;
     padding: 0em 0.1875em;
+    background-color: $highlight-search;
   }
 
   .card {
@@ -104,6 +104,7 @@ body.search-modal-opened {
           content: none;
         }
       }
+
       .card-title {
         line-height: 1.3em;
       }

diff --git a/yarn.lock b/yarn.lock
@@ -8216,7 +8216,7 @@ __metadata:
     volto-dropdownmenu: 4.1.1
     volto-editablefooter: 5.1.1
     volto-feedback: 0.3.0
-    volto-form-block: 3.7.5
+    volto-form-block: 3.8.2
     volto-gdpr-privacy: 2.2.5
     volto-google-analytics: 2.0.0
     volto-multilingual-widget: 3.2.1
@@ -16128,9 +16128,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"volto-form-block@npm:3.7.5":
-  version: 3.7.5
-  resolution: "volto-form-block@npm:3.7.5"
+"volto-form-block@npm:3.8.2":
+  version: 3.8.2
+  resolution: "volto-form-block@npm:3.8.2"
   dependencies:
     "@hcaptcha/react-hcaptcha": ^0.3.6
     file-saver: ^2.0.5
@@ -16139,7 +16139,7 @@ __metadata:
   peerDependencies:
     "@plone/volto": ">=16.0.0-alpha.38"
     volto-subblocks: ^2.0.0
-  checksum: fdd00192dff971ccec1e6b299d570116d194b2aa4fa010e0e4f201f603eeb67afb5887178abdab8504ca4687761495cb5c2272241e79474cdd6e36d6adc54cbe
+  checksum: 5b72a06a5ee81b3c5f6600cc57df0a190d95765d30bb9afcd09e6ca2215f605184327fa4a88b0e8ce4e410ff9e21b2351cb4340e5a9dcdf95d19f3fac9580573
   languageName: node
   linkType: hard