design-comuni-plone-theme 11.11.1 → 11.12.0

package/src/customizations/volto-form-block/components/FormView.jsx

@@ -5,19 +5,17 @@
 */
 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';
 
@@ -64,6 +62,8 @@ const FormView = ({
   captcha,
   id,
   getErrorMessage,
+  path,
+  block_id,
 }) => {
   const intl = useIntl();
   const alertTransition = {
@@ -86,23 +86,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 +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">
@@ -128,38 +131,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 +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}>
@@ -238,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 && (

package/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;

package/src/overrideTranslations.jsx

@@ -21,6 +21,10 @@ defineMessages({
     id: 'rrule_in',
     defaultMessage: 'il giorno',
   },
+  rrule_on: {
+    id: 'rrule_on',
+    defaultMessage: 'di',
+  },
   rrule_on_the: {
     id: 'rrule_on the',
     defaultMessage: 'di',
@@ -60,4 +64,8 @@ defineMessages({
     id: 'toggleMenu_close',
     defaultMessage: 'Chiudi',
   },
+  clearDates: {
+    id: 'Clear dates',
+    defaultMessage: 'Pulisci i campi',
+  },
 });

package/src/theme/ItaliaTheme/Blocks/_gridBlock.scss

@@ -52,6 +52,11 @@
         }
       }
     }
+
+    &.image img {
+      object-fit: contain;
+      object-position: center;
+    }
   }
 
   //in edit (cms-ui)

package/src/theme/ItaliaTheme/Components/_pager.scss

@@ -19,3 +19,13 @@
     }
   }
 }
+
+.pagination-wrapper {
+  li.page-item {
+    button.page-link {
+      .icon.icon-primary.disabled {
+        fill: $gray-600 !important;
+      }
+    }
+  }
+}

package/src/theme/ItaliaTheme/Views/_slider.scss

@@ -12,6 +12,7 @@
     &:focus {
       border: 1px solid;
     }
+
     figure {
       a {
         display: block;

package/src/theme/_site-variables.scss

@@ -16,7 +16,7 @@ $primary-text: #fff !default;
 $secondary-text: #fff !default;
 $tertiary: #be2816 !default;
 $tertiary-text: #fff !default;
-$highlight-search: #ff0 !default;
+$highlight-search: #ffff00 !default;
 $font-family-monospace-light: Roboto Mono Light !default;
 
 // Per abilitare l'header bianco impostare a true

package/src/theme/extras/_search.scss

@@ -89,6 +89,7 @@ body.search-modal-opened {
 
 .search-results-wrapper {
   mark.highlighted-text {
+    padding: 0em 0.1875em;
     background-color: $highlight-search;
   }
 
@@ -103,6 +104,10 @@ body.search-modal-opened {
           content: none;
         }
       }
+
+      .card-title {
+        line-height: 1.3em;
+      }
     }
   }