design-comuni-plone-theme 12.0.0-alpha.1 → 12.0.0

package/src/customizations/volto/components/theme/Error/Error.jsx

@@ -0,0 +1,86 @@
+/**
+ * @module components/theme/Error/Error
+ * Customization:
+ * - added logging of errors
+ */
+
+import React from 'react';
+import loadable from '@loadable/component';
+import config from '@plone/volto/registry';
+
+const sentryLibraries = {
+  Sentry: loadable.lib(
+    () => import(/* webpackChunkName: "s_entry-browser" */ '@sentry/browser'),
+  ),
+};
+
+/**
+ * Error function.
+ * @function Error
+ * @returns {string} Markup of the error page.
+ */
+const Error = (props) => {
+  const { views } = config;
+  const { error } = props;
+  let FoundView;
+
+  // CUSTOMIZATION: added logging of errors
+  const notifySentry = (message) => {
+    const loaders = Object.entries(sentryLibraries).map(
+      ([name, Lib]) =>
+        new Promise((resolve) =>
+          Lib.load().then((mod) => resolve([name, mod])),
+        ),
+    );
+    Promise.all(loaders).then((libs) => {
+      const libraries = Object.assign(
+        {},
+        ...libs.map(([name, lib]) => ({ [name]: lib })),
+      );
+      class MaybeCorsError extends Error {
+        constructor(...args) {
+          super(...args);
+          this.name = 'MaybeCorsError';
+        }
+      }
+      libraries.Sentry.captureException(new MaybeCorsError(message), {
+        contexts: {
+          props,
+        },
+      });
+    });
+  };
+
+  if (error.status === undefined) {
+    // For some reason, while development and if CORS is in place and the
+    // requested resource is 404, it returns undefined as status, then the
+    // next statement will fail
+    // eslint-disable-next-line no-console
+    console.error(
+      'DEV MODE CORS ERROR in Error component: ',
+      JSON.stringify(props, null, 2),
+    );
+    notifySentry('DEV MODE CORS ERROR in Error component');
+    FoundView = views.errorViews.corsError;
+  } else {
+    if (error.status.toString() === 'corsError') {
+      // eslint-disable-next-line no-console
+      console.error(
+        'CORS ERROR in Error component: ',
+        JSON.stringify(props, null, 2),
+      );
+      notifySentry('CORS ERROR in Error component');
+    }
+    FoundView = views.errorViews[error.status.toString()];
+  }
+  if (!FoundView) {
+    FoundView = views.errorViews['404']; // default to 404
+  }
+  return (
+    <div id="view">
+      <FoundView {...props} />
+    </div>
+  );
+};
+
+export default Error;

package/src/customizations/volto/components/theme/Footer/Footer.jsx

@@ -21,23 +21,26 @@ import config from '@plone/volto/registry';
  * @extends Component
  */
 
-const Footer = ({ intl }) => {
+const Footer = () => {
   useGoogleAnalytics();
   const currentContent = useSelector((state) => state.content?.data);
-  let contentType = null;
-  if (currentContent != null) {
-    contentType = currentContent?.['@type'];
-  }
-  // const NoFeedbackFormFor = ['Plone Site', 'LRF', 'Subsite'];
-  const NoFeedbackFormFor = [];
-
-  let content = (
+  const contentType = currentContent ? currentContent['@type'] : null;
+  const noFeedbackFormFor =
+    config.settings.siteProperties.noFeedbackFormFor || [];
+  const showFeedbackForm = config.settings.siteProperties
+    .enableNoFeedbackFormFor
+    ? contentType &&
+      !noFeedbackFormFor.includes(contentType) &&
+      config.settings.siteProperties.enableFeedbackForm
+    : true;
+
+  return (
     <>
-      {contentType != null &&
-        NoFeedbackFormFor.indexOf(contentType) < 0 &&
-        config.settings.siteProperties.enableFeedbackForm && (
-          <FeedbackForm contentType={contentType} />
-        )}
+      {showFeedbackForm && (
+        <div className="public-ui" id="customer-satisfaction-form">
+          <FeedbackForm />
+        </div>
+      )}
 
       <SubsiteFooter />
       <footer className="it-footer" id="footer">
@@ -46,8 +49,6 @@ const Footer = ({ intl }) => {
       </footer>
     </>
   );
-
-  return content;
 };
 
 export default Footer;

package/src/customizations/volto/components/theme/Navigation/Navigation.jsx

@@ -38,10 +38,7 @@ const Navigation = ({ pathname }) => {
   const subsite = useSelector((state) => state.subsite?.data);
   const logoSubsite = subsite?.subsite_logo && (
     <figure className="icon">
-      <img
-        src={flattenToAppURL(subsite.subsite_logo.scales?.mini?.download)}
-        alt="Logo"
-      />
+      <Logo />
     </figure>
   );
 
@@ -96,7 +93,12 @@ const Navigation = ({ pathname }) => {
   return (
     <Header theme="" type="navbar">
       {menu?.length > 0 ? (
-        <HeaderContent expand="lg" megamenu id="navigation">
+        <HeaderContent
+          expand="lg"
+          megamenu
+          id="navigation"
+          aria-label={intl.formatMessage(messages.mainMenu)}
+        >
           <HeaderToggler
             aria-controls="it-navigation-collapse"
             aria-expanded={collapseOpen}
@@ -136,12 +138,21 @@ const Navigation = ({ pathname }) => {
                     }
                     onClick={() => setCollapseOpen(false)}
                   >
-                    {subsite?.subsite_logo ? logoSubsite : <Logo />}
+                    {subsite?.subsite_logo ? (
+                      logoSubsite
+                    ) : (
+                      <Logo className="icon" />
+                    )}
                     <BrandText mobile={true} subsite={subsite} />
                   </UniversalLink>
                 </div>
                 {/* Main Menu */}
-                <Nav data-element="main-navigation" navbar role="menubar">
+                <Nav
+                  data-element="main-navigation"
+                  navbar
+                  role="menubar"
+                  aria-label={intl.formatMessage(messages.mainMenu)}
+                >
                   {menu
                     ?.filter((item) => item.visible)
                     ?.map((item, index) => (
@@ -205,6 +216,10 @@ const messages = defineMessages({
     id: 'toggleMenu_close',
     defaultMessage: 'Chiudi',
   },
+  mainMenu: {
+    id: 'mainMenu',
+    defaultMessage: 'Menu principale',
+  },
 });
 
 Navigation.propTypes = {

package/src/customizations/volto/components/theme/View/LinkView.jsx

@@ -0,0 +1,81 @@
+// CUSTOMIZATION:
+// - Added condition to check if the user can edit the link (18-21 and 24)
+// - Backported optimizations from volto 18 (lines 33-35 and more specific imports)
+
+import { useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import PropTypes from 'prop-types';
+import { useHistory } from 'react-router-dom';
+import { isInternalURL, flattenToAppURL } from '@plone/volto/helpers/Url/Url';
+import { Container as SemanticContainer } from 'semantic-ui-react';
+import UniversalLink from '@plone/volto/components/manage/UniversalLink/UniversalLink';
+import { Redirect } from 'react-router-dom';
+import { FormattedMessage } from 'react-intl';
+import config from '@plone/volto/registry';
+
+const LinkView = ({ content }) => {
+  const history = useHistory();
+  const userCanEdit = useSelector(
+    (state) =>
+      !!state.actions.actions.object.find((action) => action.id === 'edit'),
+  );
+
+  useEffect(() => {
+    if (!userCanEdit) {
+      const { remoteUrl } = content;
+      if (isInternalURL(remoteUrl)) {
+        history.replace(flattenToAppURL(remoteUrl));
+      } else if (!__SERVER__) {
+        window.location.href = flattenToAppURL(remoteUrl);
+      }
+    }
+  }, [content, history, userCanEdit]);
+  if (__SERVER__ && !userCanEdit && content.remoteUrl) {
+    return <Redirect to={content.remoteUrl} />;
+  }
+  const { title, description, remoteUrl } = content;
+  const { openExternalLinkInNewTab } = config.settings;
+  const Container =
+    config.getComponent({ name: 'Container' }).component || SemanticContainer;
+
+  return (
+    <Container id="page-document">
+      <h1 className="documentFirstHeading">{title}</h1>
+      {content.description && (
+        <p className="documentDescription">{description}</p>
+      )}
+      {remoteUrl && (
+        <p>
+          <FormattedMessage
+            id="The link address is:"
+            defaultMessage="The link address is:"
+          />{' '}
+          <UniversalLink
+            href={remoteUrl}
+            openLinkInNewTab={
+              openExternalLinkInNewTab && !isInternalURL(remoteUrl)
+            }
+          >
+            {flattenToAppURL(remoteUrl)}
+          </UniversalLink>
+        </p>
+      )}
+    </Container>
+  );
+};
+
+LinkView.propTypes = {
+  content: PropTypes.shape({
+    title: PropTypes.string,
+    description: PropTypes.string,
+    remoteUrl: PropTypes.string,
+  }),
+  token: PropTypes.string,
+};
+
+LinkView.defaultProps = {
+  content: null,
+  token: null,
+};
+
+export default LinkView;

package/src/customizations/volto/components/theme/View/ListingView.jsx

@@ -10,6 +10,7 @@ import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import { PageHeader } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
 import { ListingImage } from 'design-comuni-plone-theme/components/ItaliaTheme';
+import { contentHasImage } from 'design-comuni-plone-theme/helpers';
 
 /**
  * List view component class.
@@ -23,8 +24,7 @@ const ListingView = ({ content }) => (
     <PageHeader content={content} />
     <section id="content-core">
       {content.items.map((item) => {
-        const image = ListingImage({ item });
-
+        const hasImage = contentHasImage(item);
         return (
           <div key={item.url} className="listing-item my-4">
             <div>
@@ -35,7 +35,7 @@ const ListingView = ({ content }) => (
               </h2>
               {item.description && <p>{item.description}</p>}
             </div>
-            {image && <>{image}</>}
+            {hasImage && <ListingImage item={item} />}
           </div>
         );
       })}

package/src/{components/ItaliaTheme/RemoveBodyClass/RemoveBodyClass.jsx → customizations/volto/helpers/BodyClass/BodyClass.jsx}

@@ -1,13 +1,17 @@
+/**
+ * CUSTOMIZATIONS:
+ * - handle bodyclass removal
+ */
 import { Component, Children } from 'react';
 import PropTypes from 'prop-types';
 import withSideEffect from 'react-side-effect';
 
 /**
  * @export
- * @class RemoveBodyClass
+ * @class BodyClass
  * @extends {Component}
  */
-class RemoveBodyClass extends Component {
+class BodyClass extends Component {
   /**
    * Render method.
    * @method render
@@ -21,14 +25,16 @@ class RemoveBodyClass extends Component {
   }
 }
 
-RemoveBodyClass.propTypes = {
+BodyClass.propTypes = {
   children: PropTypes.element,
   className: PropTypes.string,
+  remove: PropTypes.bool,
 };
 
-RemoveBodyClass.defaultProps = {
+BodyClass.defaultProps = {
   children: null,
   className: null,
+  remove: false,
 };
 
 /**
@@ -41,7 +47,11 @@ function reducePropsToState(propsList) {
   let classList = [];
   propsList.forEach((props) => {
     if (props.className) {
-      classList = classList.concat(props.className);
+      if (props.remove) {
+        classList = classList.filter((c) => c !== props.className);
+      } else {
+        classList = classList.concat(props.className.split(' '));
+      }
     }
   });
   return classList;
@@ -54,26 +64,10 @@ function reducePropsToState(propsList) {
  * @returns {null} null
  */
 function handleStateChangeOnClient(classList) {
-  //  document.body.className = '';
-  let domClassNames = [];
-  Object.keys(document.body.classList).forEach((k) => {
-    domClassNames.push(document.body.classList[k]);
-  });
-
+  document.body.className = '';
   classList.forEach((className) => {
-    // This allows the component to accept more than one class at the same time
-    if (className.includes(' ')) {
-      className.split(' ').forEach((className) => {
-        if (document.body.classList.contains(className)) {
-          domClassNames.splice(domClassNames.indexOf(className), 1);
-        }
-      });
-      document.body.classList = domClassNames.join(' ');
-    } else {
-      if (document.body.classList.contains(className)) {
-        domClassNames.splice(domClassNames.indexOf(className), 1);
-        document.body.classList = domClassNames.join(' ');
-      }
+    if (!document.body.classList.contains(className)) {
+      document.body.classList.add(className);
     }
   });
 }
@@ -81,4 +75,4 @@ function handleStateChangeOnClient(classList) {
 export default withSideEffect(
   reducePropsToState,
   handleStateChangeOnClient,
-)(RemoveBodyClass);
+)(BodyClass);

package/src/customizations/volto/helpers/FormValidation/FormValidation.js

@@ -100,12 +100,15 @@ const widgetValidation = {
   url: {
     isValidURL: (urlValue, urlObj, intlFunc) => {
       var urlRegex = new RegExp(
-        '^(https?:\\/\\/)?' + // validate protocol
-          '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // validate domain name
-          '((\\d{1,3}\\.){3}\\d{1,3}))|' + // validate OR ip (v4) address
-          '(localhost)' + // validate OR localhost address
-          '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // validate port and path
-          '(\\?[;&a-z\\d%_.~+=-]*)?' + // validate query string
+        '^(https?:\\/\\/)?' + // optional protocol
+          '(' +
+          '([a-z\\d]+(-[a-z\\d]+)*\\.)+[a-z]{2,}|' + // validate domain name
+          '(\\d{1,3}\\.){3}\\d{1,3}|' + // OR ip (v4) address
+          'localhost' + // OR localhost
+          ')' +
+          '(\\:\\d+)?' + // optional port
+          '(\\/[-a-z\\d%_.~+]*)*' + // path
+          '(\\?[;&a-z\\d%_.~+\\/=-]*)?' + // validate query string
           '(\\#[-a-z\\d_]*)?$', // validate fragment locator
         'i',
       );
@@ -188,7 +191,7 @@ const widgetValidation = {
  * The string that comes my not be a valid JSON
  * @param {string} requestItem
  */
-const tryParseJSON = (requestItem) => {
+export const tryParseJSON = (requestItem) => {
   let resultObj = null;
   try {
     resultObj = JSON.parse(requestItem);

package/src/customizations/volto/helpers/Html/Html.jsx

@@ -4,7 +4,7 @@
  */
 /*
  CUSTOMIZATIONS:
- - Add <link rel="shortcut icon" href="/favicon.ico" />
+ - Rimosso <link rel="shortcut icon" href="/favicon.ico" /> perchè creato da volto-site-settings
  - Add shrink-to-fit=no in viewport meta
  - Remove link for manifest and svg/apple icons
  */
@@ -122,7 +122,7 @@ class Html extends Component {
               })};`,
             }}
           />
-          <link rel="shortcut icon" href="/favicon.ico" />
+          {/* <link rel="shortcut icon" href="/favicon.ico" /> */}
           <meta property="og:type" content="website" />
           <meta name="generator" content="Plone 6 - https://plone.org" />
           <meta

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

@@ -70,6 +70,7 @@ const Field = ({
   errorMessage,
   id,
   reactSelect,
+  autocomplete,
 }) => {
   const intl = useIntl();
   const Select = reactSelect.default;
@@ -117,6 +118,7 @@ const Field = ({
             onChange(name, e.target.value);
           }}
           value={value ?? ''}
+          autoComplete={autocomplete}
         />
       )}
       {field_type === 'textarea' && (
@@ -135,6 +137,7 @@ const Field = ({
             onChange(name, e.target.value);
           }}
           value={value ?? undefined}
+          autoComplete={autocomplete}
         />
       )}
       {field_type === 'select' && (
@@ -166,6 +169,7 @@ const Field = ({
               classNamePrefix="react-select"
               className={isInvalid() ? 'is-invalid' : ''}
               value={value ? [{ value: value, label: value }] : []}
+              autoComplete={autocomplete}
             />
             {description && <small className="form-text">{description}</small>}
             {errorMessage && (
@@ -301,6 +305,7 @@ const Field = ({
             onChange(name, e.target.value);
           }}
           value={value ?? ''}
+          autoComplete={autocomplete}
         />
       )}
       {field_type === 'attachment' && (
@@ -335,6 +340,7 @@ const Field = ({
             onChange(name, e.target.value);
           }}
           value={value ?? ''}
+          autoComplete={autocomplete}
         />
       )}
 
@@ -405,6 +411,7 @@ Field.propTypes = {
   value: PropTypes.any,
   formHasErrors: PropTypes.bool,
   onChange: PropTypes.func,
+  autoComplete: PropTypes.string,
 };
 
 export default injectLazyLibs('reactSelect')(Field);

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

@@ -1,3 +1,8 @@
+/*
+CUSTOMIZATIONS:
+- used design-react-kit components to render form result
+- added warning message when subscription limit (if set) has been exceeded
+*/
 import React from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 import { Button, Alert } from 'design-react-kit';
@@ -8,6 +13,15 @@ const messages = defineMessages({
     id: 'form_submit_success',
     defaultMessage: 'Sent!',
   },
+  success_warning: {
+    id: 'form_submit_success_warning',
+    defaultMessage: "You've been added to the waiting list",
+  },
+  success_warning_description: {
+    id: 'form_submit_success_warning_description',
+    defaultMessage:
+      "Your data has been submitted, but the subscription limit has been reached and you've been added to the waiting list.",
+  },
   reset: {
     id: 'form_reset',
     defaultMessage: 'Clear',
@@ -43,20 +57,40 @@ const replaceMessage = (text, sent_data) => {
 const FormResult = ({ formState, data, resetFormState }) => {
   const intl = useIntl();
   return (
-    <Alert color="success" fade isOpen tag="div" transition={alertTransition}>
-      <h4>{intl.formatMessage(messages.success)}</h4>
+    <Alert
+      color={!formState.warning ? 'success' : 'warning'}
+      fade
+      isOpen
+      tag="div"
+      transition={alertTransition}
+    >
+      <h4>
+        {!formState.warning
+          ? intl.formatMessage(messages.success)
+          : intl.formatMessage(messages.success_warning)}
+      </h4>
       <br />
       {/* Custom message */}
-      {data.send_message && (
+      {!formState.warning ? (
+        data.send_message && (
+          <>
+            <p
+              dangerouslySetInnerHTML={{
+                __html: replaceMessage(
+                  data.send_message,
+                  formState.result.data,
+                ),
+              }}
+            />
+            <br />
+          </>
+        )
+      ) : (
         <>
-          <p
-            dangerouslySetInnerHTML={{
-              __html: replaceMessage(data.send_message, formState.result.data),
-            }}
-          />
-          <br />
+          <p>{intl.formatMessage(messages.success_warning_description)}</p>
         </>
       )}
+
       <Button
         color="primary"
         outline

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

@@ -10,12 +10,12 @@ import { Card, CardBody, Row, Col, Alert, Progress } from 'design-react-kit';
 import { getFieldName } from 'volto-form-block/components/utils';
 // eslint-disable-next-line import/no-unresolved
 import Field from 'volto-form-block/components/Field';
-import { FormResult } from 'volto-form-block/components';
 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';
 
@@ -209,47 +209,51 @@ 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);
+                  {data.email_otp_verification ? (
+                    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>
-                      );
-                    })}
+                        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()}</>}