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

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

@@ -3,9 +3,8 @@
  * @module components/theme/View/PaginaArgomentoView/PaginaArgomentoView
  */
 
-import React, { useEffect } from 'react';
+import React from 'react';
 import { useLocation } from 'react-router-dom';
-import { useDispatch, useSelector } from 'react-redux';
 import { Portal } from 'react-portal';
 import cx from 'classnames';
 
@@ -16,7 +15,6 @@ import {
   flattenToAppURL,
   hasBlocksData,
 } from '@plone/volto/helpers';
-import { getContent, resetContent } from '@plone/volto/actions';
 import {
   CardCategory,
   Breadcrumbs,
@@ -44,32 +42,6 @@ import config from '@plone/volto/registry';
 const PaginaArgomentoView = ({ content }) => {
   const Image = config.getComponent({ name: 'Image' }).component;
   const location = useLocation();
-  const dispatch = useDispatch();
-
-  const searchResults = useSelector((state) => state.content?.subrequests);
-
-  // one request is made for every 'unita_amministrative_responsabili' selected
-  useEffect(() => {
-    if (content?.unita_amministrative_responsabili?.length > 0) {
-      content.unita_amministrative_responsabili.forEach((x) => {
-        const url = flattenToAppURL(x['@id']);
-        const loaded =
-          searchResults?.[url]?.loading || searchResults?.[url]?.loaded;
-        if (!loaded) {
-          dispatch(getContent(url, null, url));
-        }
-      });
-    }
-
-    return () => {
-      if (content?.unita_amministrative_responsabili?.length > 0) {
-        content.unita_amministrative_responsabili.forEach((x) => {
-          dispatch(resetContent(flattenToAppURL(x['@id'])));
-        });
-      }
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [content]);
 
   const rightHeaderHasContent =
     richTextHasContent(content.ulteriori_informazioni) ||
@@ -99,13 +71,18 @@ const PaginaArgomentoView = ({ content }) => {
 
               {content?.unita_amministrative_responsabili?.length > 0 &&
                 content?.unita_amministrative_responsabili?.map((u, index) => {
-                  const uo_object =
-                    searchResults[flattenToAppURL(u['@id'])]?.data;
+                  const uo_object = u;
                   let alt = u.title;
-                  if (uo_object?.preview_image && uo_object?.preview_caption) {
-                    alt = uo_object.preview_caption;
-                  } else if (uo_object?.image && uo_object?.image_caption) {
-                    alt = uo_object.image_caption;
+                  if (
+                    uo_object?.image_scales?.preview_image?.length > 0 &&
+                    uo_object?.preview_caption
+                  ) {
+                    alt = uo_object?.preview_caption;
+                  } else if (
+                    uo_object?.image_scales?.image?.length > 0 &&
+                    uo_object?.image_caption
+                  ) {
+                    alt = uo_object?.image_caption;
                   }
 
                   return (
@@ -132,7 +109,9 @@ const PaginaArgomentoView = ({ content }) => {
                               </CardText>
                             </CardBody>
                             {uo_object &&
-                              (uo_object.preview_image || uo_object.image) && (
+                              (uo_object.image_scales?.image?.length > 0 ||
+                                uo_object.image_scales?.preview_image?.length >
+                                  0) && (
                                 <div className="image-container me-3">
                                   <Image
                                     item={uo_object}

package/src/components/ItaliaTheme/View/PaginaArgomentoView/PaginaArgomentoViewNoBlocks.jsx

@@ -57,6 +57,14 @@ const messages = defineMessages({
     id: 'related_uo',
     defaultMessage: 'Amministrazione',
   },
+  sideMenuIndex: {
+    id: 'sideMenuIndex',
+    defaultMessage: 'Indice della pagina',
+  },
+  argomentoContent: {
+    id: 'argomentoContent',
+    defaultMessage: "Contenuto dell'argomento",
+  },
 });
 
 /**
@@ -85,13 +93,18 @@ const PaginaArgomentoViewNoBlocks = ({ content }) => {
         <ContentImage content={content} position="afterHeader" />
 
         <div className="row row-column-border border-light row-column-menu-left">
-          <aside className="col-lg-4">
+          <aside
+            className="col-lg-4"
+            aria-label={intl.formatMessage(messages.sideMenuIndex)}
+          >
             <SideMenu data={sideMenuElements} content_uid={content?.UID} />
           </aside>
           <section
             className="col-lg-8 it-page-sections-container border-light"
             id="main-content-section"
             ref={documentBody}
+            role="region"
+            aria-label={intl.formatMessage(messages.argomentoContent)}
           >
             {/* HEADER IMAGE */}
             <ContentImage content={content} position="documentBody" />

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

@@ -43,10 +43,26 @@ const messages = defineMessages({
     id: 'spese_elettorali',
     defaultMessage: 'Spese elettorali',
   },
+
   variazione_situazione_patrimoniale: {
     id: 'variazione_situazione_patrimoniale',
     defaultMessage: 'Variazione situazione patrimoniale',
   },
+
+  altri_documenti_persona: {
+    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 }) => {
@@ -186,6 +202,96 @@ const PersonaDocumenti = ({ content }) => {
           />
         </RichTextSection>
       )}
+      {contentFolderHasItems(content, 'altri-documenti') && (
+        <RichTextSection
+          tag_id="documenti-altri-documenti"
+          title={intl.formatMessage(messages.altri_documenti_persona)}
+        >
+          <Attachments
+            content={content}
+            folder_name={'altri-documenti'}
+            // title={intl.formatMessage(messages.altri_documenti_persona)}
+            as_section={false}
+          />
+        </RichTextSection>
+      )}
+      {(content.dichiarazioni_di_insussistenza_e_incompatibilita?.download ||
+        contentFolderHasItems(
+          content,
+          'dichiarazione-insussistenza-cause-di-inconferibilita-e-incompatibilita',
+        )) && (
+        <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">
+            {content.dichiarazioni_di_insussistenza_e_incompatibilita
+              ?.download && (
+              <Attachment
+                download_url={
+                  content.dichiarazioni_di_insussistenza_e_incompatibilita
+                    .download
+                }
+                title={
+                  content.dichiarazioni_di_insussistenza_e_incompatibilita
+                    .filename
+                }
+              />
+            )}
+          </div>
+          {contentFolderHasItems(
+            content,
+            'dichiarazione-insussistenza-cause-di-inconferibilita-e-incompatibilita',
+          ) && (
+            <Attachments
+              content={content}
+              folder_name={
+                'dichiarazione-insussistenza-cause-di-inconferibilita-e-incompatibilita'
+              }
+              as_section={false}
+            />
+          )}
+        </RichTextSection>
+      )}
+      {(content.emolumenti_a_carico_della_finanza_pubblica?.download ||
+        contentFolderHasItems(
+          content,
+          'emolumenti-complessivi-percepiti-a-carico-della-finanza-pubblica',
+        )) && (
+        <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">
+            {content.emolumenti_a_carico_della_finanza_pubblica?.download && (
+              <Attachment
+                download_url={
+                  content.emolumenti_a_carico_della_finanza_pubblica.download
+                }
+                title={
+                  content.emolumenti_a_carico_della_finanza_pubblica.filename
+                }
+              />
+            )}
+          </div>
+          {contentFolderHasItems(
+            content,
+            'emolumenti-complessivi-percepiti-a-carico-della-finanza-pubblica',
+          ) && (
+            <Attachments
+              content={content}
+              folder_name={
+                'emolumenti-complessivi-percepiti-a-carico-della-finanza-pubblica'
+              }
+              as_section={false}
+            />
+          )}
+        </RichTextSection>
+      )}
     </>
   );
 };

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { UniversalLink } from '@plone/volto/components';
 import {
@@ -69,10 +70,13 @@ const messages = defineMessages({
     id: 'foto_attivita_politica',
     defaultMessage: "Foto dell'attività politica",
   },
-  data_conclusione_incarico: {
-    id: 'data_conclusione_incarico',
-    defaultMessage:
-      "Ha fatto parte dell'organizzazione comunale come {incarico} fino al",
+  data_conclusione_incarico_label: {
+    id: 'data_conclusione_incarico_label',
+    defaultMessage: "Data di fine dell'incarico",
+  },
+  altri_incarichi: {
+    id: 'altri_incarichi',
+    defaultMessage: 'Altri incarichi',
   },
 });
 
@@ -81,22 +85,67 @@ const PersonaRuolo = ({ content }) => {
   return (
     <>
       {content?.incarichi_persona?.length > 0 && (
-        <>
+        <React.Fragment key={content?.incarichi_persona[0]?.id}>
           <RichTextSection
             tag_id="incarico"
             title={intl.formatMessage(messages.ruolo)}
           >
-            {content?.incarichi_persona?.map((incarico) => (
-              <div className="font-serif" key={incarico.id}>
-                <p>{incarico.title}</p>
-                {incarico.atto_di_nomina && (
-                  <UniversalLink href={incarico.atto_di_nomina}>
-                    {intl.formatMessage(messages.atto_nomina)}
-                  </UniversalLink>
+            <div className="font-serif mb-3">
+              <p>{content?.incarichi_persona[0]?.title}</p>
+              {content?.incarichi_persona[0]?.atto_di_nomina && (
+                <UniversalLink
+                  href={content?.incarichi_persona[0]?.atto_di_nomina}
+                >
+                  {intl.formatMessage(messages.atto_nomina)}
+                </UniversalLink>
+              )}
+            </div>
+          </RichTextSection>
+
+          {content.incarichi_persona[0].data_inizio_incarico && (
+            <RichTextSection
+              tag_id="data_inizio_incarico"
+              title={intl.formatMessage(messages.data_inizio_incarico)}
+            >
+              <div className="font-serif">
+                {viewDate(
+                  intl.locale,
+                  content.incarichi_persona[0].data_inizio_incarico,
+                  'DD MMMM Y',
                 )}
               </div>
-            ))}
-          </RichTextSection>
+            </RichTextSection>
+          )}
+          {content.incarichi_persona[0].data_conclusione_incarico && (
+            <RichTextSection
+              tag_id="data_conclusione_incarico"
+              title={intl.formatMessage(
+                messages.data_conclusione_incarico_label,
+              )}
+            >
+              <div className="font-serif">
+                {viewDate(
+                  intl.locale,
+                  content.incarichi_persona[0].data_conclusione_incarico,
+                  'DD MMMM Y',
+                )}
+              </div>
+            </RichTextSection>
+          )}
+          {content.incarichi_persona[0].data_insediamento && (
+            <RichTextSection
+              tag_id="data_insediamento"
+              title={intl.formatMessage(messages.data_insediamento)}
+            >
+              <div className="font-serif">
+                {viewDate(
+                  intl.locale,
+                  content.incarichi_persona[0].data_insediamento,
+                  'DD MMMM Y',
+                )}
+              </div>
+            </RichTextSection>
+          )}
           {content.incarichi_persona[0]?.tipologia_incarico?.title && (
             <RichTextSection
               tag_id="tipologia_incarico"
@@ -152,7 +201,7 @@ const PersonaRuolo = ({ content }) => {
               title={intl.formatMessage(
                 messages.importi_di_viaggio_e_o_servizi,
               )}
-              data={content.incarichi_persona[0].importi_di_viaggio_e_o_servizi}
+              data={content.incarichi_persona[0].importi_viaggio_servizio}
             >
               {content.incarichi_persona[0]?.importi_di_viaggio_e_o_servizi
                 ?.length > 0 && (
@@ -187,52 +236,28 @@ const PersonaRuolo = ({ content }) => {
               )}
             </RichTextSection>
           )}
-          {content.incarichi_persona[0].data_insediamento && (
-            <RichTextSection
-              tag_id="data_insediamento"
-              title={intl.formatMessage(messages.data_insediamento)}
-            >
-              <div className="font-serif">
-                {viewDate(
-                  intl.locale,
-                  content.incarichi_persona[0].data_insediamento,
-                  'DD MMMM Y',
-                )}
-              </div>
-            </RichTextSection>
-          )}
-          {content.incarichi_persona[0].data_inizio_incarico && (
-            <RichTextSection
-              tag_id="data_inizio_incarico"
-              title={intl.formatMessage(messages.data_inizio_incarico)}
-            >
-              <div className="font-serif">
-                {viewDate(
-                  intl.locale,
-                  content.incarichi_persona[0].data_inizio_incarico,
-                  'DD MMMM Y',
-                )}
-              </div>
-            </RichTextSection>
-          )}
-          {content.incarichi_persona[0].data_conclusione_incarico && (
-            <RichTextSection
-              tag_id="data_conclusione_incarico"
-              title={intl.formatMessage(messages.data_conclusione_incarico, {
-                incarico: content.incarichi_persona[0].title,
-              })}
-            >
-              <div className="font-serif">
-                {viewDate(
-                  intl.locale,
-                  content.incarichi_persona[0].data_conclusione_incarico,
-                  'DD MMMM Y',
-                )}
-              </div>
-            </RichTextSection>
-          )}
-        </>
+        </React.Fragment>
+      )}
+
+      {content.incarichi_persona?.length > 1 && (
+        <RichTextSection
+          tag_id="altri_incarichi"
+          title={intl.formatMessage(messages.altri_incarichi)}
+        >
+          <ul>
+            {content.incarichi_persona.map((incarico, index) =>
+              index > 0 ? (
+                <li key={index}>
+                  <UniversalLink href={incarico['@id']}>
+                    {incarico.title}
+                  </UniversalLink>
+                </li>
+              ) : null,
+            )}
+          </ul>
+        </RichTextSection>
       )}
+
       {content.assessore_di?.length > 0 && (
         <RichTextSection
           tag_id="assessore_di"

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

@@ -21,6 +21,19 @@ import {
   useSideMenu,
 } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
 
+import { defineMessages, useIntl } from 'react-intl';
+
+const messages = defineMessages({
+  sideMenuIndex: {
+    id: 'sideMenuIndex',
+    defaultMessage: 'Indice della pagina',
+  },
+  personaContent: {
+    id: 'personaContent',
+    defaultMessage: 'Contenuto del profilo della persona',
+  },
+});
+
 export const PersonaViewSectionsOrder = [
   { /* RUOLO */ component: PersonaRuolo },
   { /* CONTATTI */ component: PersonaContatti },
@@ -36,6 +49,7 @@ export const PersonaViewSectionsOrder = [
  */
 const PersonaView = ({ content }) => {
   let documentBody = createRef();
+  const intl = useIntl();
   const { sideMenuElements, SideMenu } = useSideMenu(content, documentBody);
 
   return (
@@ -52,13 +66,18 @@ const PersonaView = ({ content }) => {
           showtassonomiaargomenti={true}
         />
         <div className="row row-column-border border-light row-column-menu-left">
-          <aside className="col-lg-4">
+          <aside
+            className="col-lg-4"
+            aria-label={intl.formatMessage(messages.sideMenuIndex)}
+          >
             <SideMenu data={sideMenuElements} content_uid={content?.UID} />
           </aside>
           <section
             className="col-lg-8 it-page-sections-container border-light"
             id="main-content-section"
             ref={documentBody}
+            role="region"
+            aria-label={intl.formatMessage(messages.personaContent)}
           >
             {/* SEZIONI */}
             <ContentTypeViewSections

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

@@ -105,7 +105,7 @@ const PuntoDiContattoView = (props) => {
             {content?.value_punto_contatto?.map((pdc, i) => {
               return (
                 <div className="my-2" key={i}>
-                  <h5 className="h6">
+                  <p className="h6">
                     {messages[pdc?.pdc_type] === undefined
                       ? pdc?.pdc_type
                       : intl.formatMessage(messages[pdc.pdc_type])}
@@ -113,7 +113,7 @@ const PuntoDiContattoView = (props) => {
                     <span className="ms-1">
                       {renderPDCItemValue(pdc, intl)}
                     </span>
-                  </h5>
+                  </p>
                 </div>
               );
             })}

package/src/components/ItaliaTheme/View/ServizioView/ServizioAccedi.jsx

@@ -37,7 +37,11 @@ const ServizioAccedi = ({ content }) => {
               </p>
             </div>
           )}
-          <RichText data={content.prenota_appuntamento} content={content} />
+          <RichText
+            data={content.prenota_appuntamento}
+            content={content}
+            serif={false}
+          />
           {content.canale_fisico?.map?.((canale) => (
             <div className="mt-3">
               <OfficeCard

package/src/components/ItaliaTheme/View/ServizioView/ServizioCondizioni.jsx

@@ -30,7 +30,11 @@ const ServizioCondizioni = ({ content }) => {
           data-element="service-file"
         >
           <span className="list-item-title-icon-wrapper">
-            <Icon icon="it-clip" className="icon-primary me-1" />
+            <Icon
+              icon="it-clip"
+              className="icon-primary me-1"
+              title={intl.formatMessage(messages.condizioni_link)}
+            />
             {intl.formatMessage(messages.condizioni_link)} (
             {label ? <span className="text-uppercase">{label} </span> : ''}
             <span className="list-item">

package/src/components/ItaliaTheme/View/ServizioView/ServizioMetatag.jsx

@@ -1,4 +1,6 @@
+import { useIntl } from 'react-intl';
 import { Helmet, toPublicURL, isInternalURL } from '@plone/volto/helpers';
+import { SiteProperty } from 'volto-site-settings';
 import { getSiteProperty } from 'design-comuni-plone-theme/helpers';
 import { richTextHasContent } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
 
@@ -17,7 +19,13 @@ const fieldDataToPlainText = (field) => {
 };
 
 const ServizioMetatag = ({ content }) => {
-  const siteTitle = getSiteProperty('siteTitle');
+  const intl = useIntl();
+  let siteTitle = SiteProperty({
+    property: 'site_title',
+    getValue: true,
+    defaultTitle: getSiteProperty('siteTitle', intl.locale),
+  });
+  siteTitle = siteTitle?.replaceAll('\\n', ' - ') ?? '';
 
   const schemaOrg = {
     '@context': 'https://schema.org',

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

@@ -5,7 +5,6 @@
 
 import React, { createRef } from 'react';
 import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 import {
   PageHeader,
@@ -40,6 +39,19 @@ import {
   useSideMenu,
 } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
 
+import { defineMessages, useIntl } from 'react-intl';
+
+const messages = defineMessages({
+  sideMenuIndex: {
+    id: 'sideMenuIndex',
+    defaultMessage: 'Indice della pagina',
+  },
+  servizioContent: {
+    id: 'servizioContent',
+    defaultMessage: 'Contenuto del servizio',
+  },
+});
+
 export const ServizioViewSectionsOrder = (props) => [
   {
     /* HEADER IMAGE */
@@ -126,13 +138,18 @@ const ServizioView = ({ content, moment }) => {
         <ContentImage content={content} position="afterHeader" />
 
         <div className="row row-column-border border-light row-column-menu-left">
-          <aside className="col-lg-4 ">
+          <aside
+            className="col-lg-4"
+            aria-label={intl.formatMessage(messages.sideMenuIndex)}
+          >
             <SideMenu data={sideMenuElements} content_uid={content?.UID} />
           </aside>
           <section
             id="main-content-section"
             className="col-lg-8 it-page-sections-container border-light"
             ref={documentBody}
+            role="region"
+            aria-label={intl.formatMessage(messages.servizioContent)}
           >
             {/* SEZIONI */}
             <ContentTypeViewSections

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/UOServices.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import {
   Row,
@@ -9,7 +9,9 @@ import {
   CardTitle,
   CardText,
 } from 'design-react-kit';
+import { Pagination } from 'design-comuni-plone-theme/components/ItaliaTheme';
 import { UniversalLink } from '@plone/volto/components';
+import { usePaginatedItemsSection } from 'design-comuni-plone-theme/helpers';
 
 const messages = defineMessages({
   servizi_offerti: {
@@ -21,6 +23,13 @@ const messages = defineMessages({
 const UOServices = ({ content }) => {
   const intl = useIntl();
 
+  const servizi_offerti =
+    content.servizi_offerti === undefined || content.servizi_offerti === null
+      ? []
+      : content.servizi_offerti;
+  const { batches, currentPage, onPaginationChange, pageNumbers } =
+    usePaginatedItemsSection({ data: servizi_offerti });
+
   return content?.servizi_offerti?.length > 0 ? (
     <section
       id={'servizi_offerti'}
@@ -30,7 +39,7 @@ const UOServices = ({ content }) => {
         {intl.formatMessage(messages.servizi_offerti)}
       </h2>
       <Row className="card-wrapper card-teaser-wrapper align-items-stretch">
-        {content?.servizi_offerti?.map((servizio, i) => (
+        {batches?.map((servizio, i) => (
           <Col xs="12" lg="6">
             <Card className="shadow rounded card-big-io-comune p-3 my-3">
               <CardBody>
@@ -46,6 +55,15 @@ const UOServices = ({ content }) => {
           </Col>
         ))}
       </Row>
+      {pageNumbers > 1 ? (
+        <div className="pagination-wrapper">
+          <Pagination
+            activePage={currentPage}
+            totalPages={pageNumbers}
+            onPageChange={onPaginationChange}
+          />
+        </div>
+      ) : null}
     </section>
   ) : null;
 };