design-comuni-plone-theme 11.21.1 → 11.22.1

package/src/components/ItaliaTheme/CustomerSatisfaction/FeedbackForm.jsx

@@ -32,10 +32,6 @@ const messages = defineMessages({
     id: 'feedback_form_title',
     defaultMessage: 'How clear is the information on this page?',
   },
-  service_title: {
-    id: 'feedback_form_title_service',
-    defaultMessage: 'How easy was it to use this service?',
-  },
   yes: {
     id: 'feedback_form_yes',
     defaultMessage: 'Yes',
@@ -120,7 +116,7 @@ const messages = defineMessages({
   },
 });
 
-const FeedbackForm = ({ contentType, pathname }) => {
+const FeedbackForm = ({ title, pathname }) => {
   const intl = useIntl();
   const location = useLocation();
   const path = pathname ?? location.pathname ?? '/';
@@ -273,18 +269,7 @@ const FeedbackForm = ({ contentType, pathname }) => {
                         className="title-medium-2-semi-bold mb-0"
                         data-element="feedback-title"
                       >
-                        {/* Il validatore a quanto pare fa il check per titolo.
-                            Il titolo da specifiche deve essere diverso per Servizi, ma loro non lo sanno
-                            https://github.com/italia/pa-website-validator/blob/main/src/storage/municipality/feedbackComponentStructure.ts#L8
-                        */}
-                        {/* {contentType === 'Servizio'
-                          ? intl.formatMessage(messages.service_title)
-                          : intl.formatMessage(messages.title)} */}
-
-                        {/* Aggiunto titolo per compatibilità modello AGID di io-cittadino */}
-                        {contentType === 'ModelloPratica'
-                          ? intl.formatMessage(messages.service_title)
-                          : intl.formatMessage(messages.title)}
+                        {title || intl.formatMessage(messages.title)}
                       </h2>
                       <div className="rating-container mb-0">
                         <RTRating
@@ -455,7 +440,7 @@ const FeedbackForm = ({ contentType, pathname }) => {
 };
 
 FeedbackForm.propTypes = {
-  contentType: PropTypes.string,
+  title: PropTypes.string,
   pathname: PropTypes.string,
 };
 

package/src/components/ItaliaTheme/LoginAgid/LoginAgid.jsx

@@ -11,10 +11,7 @@ import { defineMessages, useIntl } from 'react-intl';
 import { withRouter } from 'react-router-dom';
 import { Login } from '@plone/volto/components';
 import { Row, Col, Container } from 'design-react-kit';
-import {
-  RemoveBodyClass,
-  LoginAgidButtons,
-} from 'design-comuni-plone-theme/components/ItaliaTheme';
+import { LoginAgidButtons } from 'design-comuni-plone-theme/components/ItaliaTheme';
 import { Button } from 'design-react-kit';
 import { useLocation } from 'react-router-dom';
 import { getBaseUrl } from '@plone/volto/helpers';
@@ -72,7 +69,7 @@ const LoginAgid = (props) => {
         <div id="page-login">
           <Helmet title={intl.formatMessage(messages.login)} />
           <BodyClass className="public-ui" />
-          <RemoveBodyClass className="cms-ui" />
+          <BodyClass className="cms-ui" remove={true} />
           <Container className="view-wrapper py-5">
             <Row className="view-container">
               <Col xs={12} lg={{ size: 10, offset: 1 }}>

package/src/components/ItaliaTheme/Search/Search.jsx

@@ -24,7 +24,7 @@ import {
 import { Skiplink, SkiplinkItem } from 'design-react-kit';
 import { useLocation, useHistory } from 'react-router-dom';
 
-import { Helmet, flattenToAppURL } from '@plone/volto/helpers';
+import { Helmet, flattenToAppURL, BodyClass } from '@plone/volto/helpers';
 import { resetSubsite } from 'volto-subsites';
 
 import {
@@ -33,7 +33,6 @@ import {
   SearchTopics,
   SearchCTs,
   Icon,
-  RemoveBodyClass,
   SearchResultItem,
 } from 'design-comuni-plone-theme/components/ItaliaTheme';
 import {
@@ -727,7 +726,7 @@ const Search = () => {
         </Container>
       </div>
       {/*force remove body class for subsite search pages*/}
-      <RemoveBodyClass className="cms-ui" />
+      <BodyClass className="cms-ui" remove={true} />
     </>
   );
 };

package/src/components/ItaliaTheme/Unauthorized/Unauthorized.jsx

@@ -13,10 +13,7 @@ import { BodyClass } from '@plone/volto/helpers';
 import { useLocation } from 'react-router-dom';
 import { getBaseUrl } from '@plone/volto/helpers';
 import config from '@plone/volto/registry';
-import {
-  LoginAgidButtons,
-  RemoveBodyClass,
-} from 'design-comuni-plone-theme/components/ItaliaTheme';
+import { LoginAgidButtons } from 'design-comuni-plone-theme/components/ItaliaTheme';
 
 /**
  * unauthorized function.
@@ -58,7 +55,7 @@ const Unauthorized = (props) => {
   return (
     <div id="unauthorized-agid" className="view-wrapper">
       <BodyClass className="public-ui" />
-      <RemoveBodyClass className="cms-ui" />
+      <BodyClass className="cms-ui" remove={true} />
 
       <Container className="view-wrapper py-5">
         {spidLoginUrl || spidLogin ? (

package/src/components/ItaliaTheme/View/PersonaView/PersonaDocumenti.jsx

@@ -53,6 +53,16 @@ const messages = defineMessages({
     id: 'altri_documenti_persona',
     defaultMessage: 'Altri documenti',
   },
+
+  dichiarazioni_di_insussistenza_e_incompatibilita: {
+    id: 'dichiarazioni_di_insussistenza_e_incompatibilita',
+    defaultMessage: 'Dichiarazioni di insussistenza e incompatibilità',
+  },
+
+  emolumenti_a_carico_della_finanza_pubblica: {
+    id: 'emolumenti_a_carico_della_finanza_pubblica',
+    defaultMessage: 'Emolumenti a carico della finanza pubblica',
+  },
 });
 
 const PersonaDocumenti = ({ content }) => {
@@ -205,6 +215,46 @@ const PersonaDocumenti = ({ content }) => {
           />
         </RichTextSection>
       )}
+      {content.dichiarazioni_di_insussistenza_e_incompatibilita?.download && (
+        <RichTextSection
+          tag_id="dichiarazioni_di_insussistenza_e_incompatibilita"
+          title={intl.formatMessage(
+            messages.dichiarazioni_di_insussistenza_e_incompatibilita,
+          )}
+        >
+          <div className="card-wrapper card-teaser-wrapper card-teaser-wrapper-equal">
+            <Attachment
+              download_url={
+                content.dichiarazioni_di_insussistenza_e_incompatibilita
+                  .download
+              }
+              title={
+                content.dichiarazioni_di_insussistenza_e_incompatibilita
+                  .filename
+              }
+            />
+          </div>
+        </RichTextSection>
+      )}
+      {content.emolumenti_a_carico_della_finanza_pubblica?.download && (
+        <RichTextSection
+          tag_id="emolumenti_a_carico_della_finanza_pubblica"
+          title={intl.formatMessage(
+            messages.emolumenti_a_carico_della_finanza_pubblica,
+          )}
+        >
+          <div className="card-wrapper card-teaser-wrapper card-teaser-wrapper-equal">
+            <Attachment
+              download_url={
+                content.emolumenti_a_carico_della_finanza_pubblica.download
+              }
+              title={
+                content.emolumenti_a_carico_della_finanza_pubblica.filename
+              }
+            />
+          </div>
+        </RichTextSection>
+      )}
     </>
   );
 };

package/src/components/ItaliaTheme/View/UOView/UOMetadati.jsx

@@ -0,0 +1,12 @@
+import PropTypes from 'prop-types';
+import { Metadata } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
+
+const UOMetadati = ({ content }) => {
+  return <Metadata content={content} showSectionTitle={false} />;
+};
+
+UOMetadati.propTypes = {
+  content: PropTypes.object,
+};
+
+export default UOMetadati;

package/src/components/ItaliaTheme/View/UOView/UOView.jsx

@@ -19,6 +19,7 @@ import {
   UODocuments,
   UOWhatDoesItDo,
   UOMoreInfos,
+  UOMetadati,
   RelatedItemInEvidence,
   SkipToMainContent,
   ContentTypeViewSections,
@@ -46,6 +47,8 @@ export const UOViewSectionsOrder = [
   { /* DOCUMENTI */ component: UODocuments },
 
   { /* ULTERIORI INFORMAZIONI */ component: UOMoreInfos },
+
+  { /*METADATI*/ component: UOMetadati },
 ];
 
 /**

package/src/components/ItaliaTheme/View/index.js

@@ -183,6 +183,7 @@ export UOContacts from 'design-comuni-plone-theme/components/ItaliaTheme/View/UO
 export UOContactsLocations from 'design-comuni-plone-theme/components/ItaliaTheme/View/UOView/UOContactsParts/UOContactsLocations';
 export UOContactsContacts from 'design-comuni-plone-theme/components/ItaliaTheme/View/UOView/UOContactsParts/UOContactsContacts';
 export UOContactsSediSecondarie from 'design-comuni-plone-theme/components/ItaliaTheme/View/UOView/UOContactsParts/UOContactsSediSecondarie';
+export UOMetadati from 'design-comuni-plone-theme/components/ItaliaTheme/View/UOView/UOMetadati';
 
 export UODocuments from 'design-comuni-plone-theme/components/ItaliaTheme/View/UOView/UODocuments';
 export UOWhatDoesItDo from 'design-comuni-plone-theme/components/ItaliaTheme/View/UOView/UOWhatDoesItDo';

package/src/config/italiaConfig.js

@@ -279,6 +279,7 @@ export default function applyConfig(voltoConfig) {
         ],
       },
       enableFeedbackForm: true,
+      noFeedbackFormFor: ['ModelloPratica'],
       enableFeedbackFormCaptcha: false,
       enableVoltoFormBlockCaptcha: true,
       splitMegamenuColumns: true, //se impostato a false, non spezza le colonne con intestazioni nel megamenu

package/src/customizations/volto/actions/vocabularies/vocabularies.js

@@ -36,7 +36,7 @@ export function getVocabulary({
   const vocabulary = getVocabName(vocabNameOrURL);
   const contextualVocabularies = config.settings.contextualVocabularies;
   const vocabPath =
-    contextualVocabularies && contextualVocabularies.includes(vocabulary)
+    contextualVocabularies && contextualVocabularies.includes(vocabulary) && vocabulary !== vocabNameOrURL
       ? flattenToAppURL(vocabNameOrURL)
       : `/@vocabularies/${vocabulary}`;
   let queryString = `b_start=${start}${size ? '&b_size=' + size : ''}`;
@@ -74,7 +74,7 @@ export function getVocabularyTokenTitle({
   const vocabulary = getVocabName(vocabNameOrURL);
   const contextualVocabularies = config.settings.contextualVocabularies;
   const vocabPath =
-    contextualVocabularies && contextualVocabularies.includes(vocabulary)
+    contextualVocabularies && contextualVocabularies.includes(vocabulary) && vocabulary !== vocabNameOrURL
       ? flattenToAppURL(vocabNameOrURL)
       : `/@vocabularies/${vocabulary}`;
   const queryString = {

package/src/customizations/volto/components/manage/Blocks/Search/SearchBlockView.jsx

@@ -2,6 +2,9 @@
   - Agid styling
   - Add class .block.listing in listing body container div to use
     existing listing template styles
+  - Inspired from
+    https://github.com/plone/volto/commit/211d9bea13119cc430db9d53a4740a860781ca2e
+    the way to handle search sort
 */
 
 import React from 'react';
@@ -9,15 +12,15 @@ import React from 'react';
 import ListingBody from '@plone/volto/components/manage/Blocks/Listing/ListingBody';
 import { withBlockExtensions } from '@plone/volto/helpers';
 
-import config from '@plone/volto/registry';
-import cx from 'classnames';
 import {
-  withSearch,
   withQueryString,
+  withSearch,
 } from '@plone/volto/components/manage/Blocks/Search/hocs';
-import { compose } from 'redux';
-import { useSelector } from 'react-redux';
+import config from '@plone/volto/registry';
+import cx from 'classnames';
 import { isEqual, isFunction } from 'lodash';
+import { useSelector } from 'react-redux';
+import { compose } from 'redux';
 
 const getListingBodyVariation = (data) => {
   const { variations } = config.blocks.blocksConfig.listing;
@@ -57,12 +60,36 @@ const applyDefaults = (data, root) => {
       v: root || '/',
     },
   ];
-  return {
+
+  const searchBySearchableText = data.query.filter(
+    (item) => item['i'] === 'SearchableText',
+  ).length;
+
+  const sort_on =
+    searchBySearchableText === 0
+      ? data?.sort_on
+        ? { sort_on: data.sort_on }
+        : { sort_on: 'effective' }
+      : undefined;
+
+  const sort_order =
+    searchBySearchableText === 0
+      ? data?.sort_order
+        ? { sort_order: data.sort_order }
+        : { sort_order: 'descending' }
+      : undefined;
+
+  const result = {
     ...data,
-    sort_on: data?.sort_on || 'effective',
-    sort_order: data?.sort_order || 'descending',
     query: data?.query?.length ? data.query : defaultQuery,
   };
+  if (!sort_on) {
+    delete result.sort_on;
+  }
+  if (!sort_order) {
+    delete result.sort_order;
+  }
+  return result;
 };
 
 const SearchBlockView = (props) => {
@@ -89,7 +116,6 @@ const SearchBlockView = (props) => {
 
   const root = useSelector((state) => state.breadcrumbs.root);
   const listingBodyData = applyDefaults(searchData, root);
-
   const { variations } = config.blocks.blocksConfig.listing;
   const listingBodyVariation = variations.find(({ id }) => id === selectedView);
   if (!Layout) return null;

package/src/customizations/volto/components/manage/Blocks/Search/components/SearchDetails.jsx

@@ -2,9 +2,8 @@
   - Agid styling
 
 */
-import React from 'react';
-import { defineMessages, useIntl } from 'react-intl';
 import { commonSearchBlockMessages } from 'design-comuni-plone-theme/helpers';
+import { defineMessages, useIntl } from 'react-intl';
 
 const messages = defineMessages({
   searchResults: {
@@ -26,7 +25,7 @@ const SearchDetails = ({ total, text, as = 'p', data }) => {
               searchedtext: text,
             })}
           </>
-        )}
+        )}{' '}
         {data.showTotalResults && (
           <>
             {intl.formatMessage(messages.searchResults)}: <b>{total}</b>

package/src/customizations/volto/components/manage/Blocks/Search/hocs/withSearch.jsx

@@ -1,10 +1,10 @@
 /* CUSTOMIZATIONS:
   - Read puntual comments in code
 */
+import qs from 'query-string';
 import React from 'react';
 import { useSelector } from 'react-redux';
-import qs from 'query-string';
-import { useLocation, useHistory } from 'react-router-dom';
+import { useHistory, useLocation } from 'react-router-dom';
 
 import { resolveExtension } from '@plone/volto/helpers/Extensions/withBlockExtensions';
 import config from '@plone/volto/registry';
@@ -236,7 +236,7 @@ const withSearch = (options) => (WrappedComponent) => {
   const { inputDelay = 1000 } = options || {};
 
   function WithSearch(props) {
-    const { data, id, editable = false } = props;
+    const { data, id, editable = false, properties } = props;
 
     const [locationSearchData, setLocationSearchData] = useSearchBlockState(
       id,
@@ -325,8 +325,10 @@ const withSearch = (options) => (WrappedComponent) => {
     const querystringResults = useSelector(
       (state) => state.querystringsearch.subrequests,
     );
+    const subrequestID = properties?.UID + '-' + id;
     const totalItems =
-      querystringResults[id]?.total || querystringResults[id]?.items?.length;
+      querystringResults[subrequestID]?.total ||
+      querystringResults[subrequestID]?.items?.length;
 
     return (
       <WrappedComponent

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

@@ -21,22 +21,18 @@ 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 = [];
+  const contentType = currentContent ? currentContent['@type'] : null;
+  const noFeedbackFormFor = config.settings.siteProperties.noFeedbackFormFor || [];
 
-  let content = (
+  return (
     <>
-      {contentType != null &&
-        NoFeedbackFormFor.indexOf(contentType) < 0 &&
+      {contentType &&
+        !noFeedbackFormFor.includes(contentType) &&
         config.settings.siteProperties.enableFeedbackForm && (
-          <FeedbackForm contentType={contentType} />
+          <FeedbackForm />
         )}
 
       <SubsiteFooter />
@@ -46,8 +42,6 @@ const Footer = ({ intl }) => {
       </footer>
     </>
   );
-
-  return content;
 };
 
 export default Footer;

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

@@ -0,0 +1,78 @@
+/**
+ * CUSTOMIZATIONS:
+ * - handle bodyclass removal
+ */
+import { Component, Children } from 'react';
+import PropTypes from 'prop-types';
+import withSideEffect from 'react-side-effect';
+
+/**
+ * @export
+ * @class BodyClass
+ * @extends {Component}
+ */
+class BodyClass extends Component {
+  /**
+   * Render method.
+   * @method render
+   * @returns {string} Markup for the component.
+   */
+  render() {
+    if (this.props.children) {
+      return Children.only(this.props.children);
+    }
+    return null;
+  }
+}
+
+BodyClass.propTypes = {
+  children: PropTypes.element,
+  className: PropTypes.string,
+  remove: PropTypes.bool,
+};
+
+BodyClass.defaultProps = {
+  children: null,
+  className: null,
+  remove: false,
+};
+
+/**
+ * reducePropsToState
+ * @function reducePropsToState
+ * @param {*} propsList propsList
+ * @returns {List} classList
+ */
+function reducePropsToState(propsList) {
+  let classList = [];
+  propsList.forEach((props) => {
+    if (props.className) {
+      if (props.remove) {
+        classList = classList.filter((c) => c !== props.className);
+      } else {
+        classList = classList.concat(props.className.split(' '));
+      }
+    }
+  });
+  return classList;
+}
+
+/**
+ * handleStateChangeOnClient
+ * @function handleStateChangeOnClient
+ * @param {*} classList classList
+ * @returns {null} null
+ */
+function handleStateChangeOnClient(classList) {
+  document.body.className = '';
+  classList.forEach((className) => {
+    if (!document.body.classList.contains(className)) {
+      document.body.classList.add(className);
+    }
+  });
+}
+
+export default withSideEffect(
+  reducePropsToState,
+  handleStateChangeOnClient,
+)(BodyClass);

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

@@ -1,6 +1,7 @@
 /*
 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';
@@ -12,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',
@@ -47,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