design-comuni-plone-theme 11.24.4 → 11.24.6

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 
 
+## [11.24.6](https://github.com/RedTurtle/design-comuni-plone-theme/compare/v11.24.5...v11.24.6) (2024-11-22)
+
+
+### Bug Fixes
+
+* removed getContent from Documento, Bando, Argomento and LocationsMap ([#803](https://github.com/RedTurtle/design-comuni-plone-theme/issues/803)) ([ca1f0f0](https://github.com/RedTurtle/design-comuni-plone-theme/commit/ca1f0f0b0e8b02d2a50d420e2aa371c97517a8f9))
+
+
+### Documentation
+
+* updated publiccode ([ebcf3d0](https://github.com/RedTurtle/design-comuni-plone-theme/commit/ebcf3d05408cc5e175e9f610ba752b53d28082b9))
+
+## [11.24.5](https://github.com/RedTurtle/design-comuni-plone-theme/compare/v11.24.4...v11.24.5) (2024-11-22)
+
+
+### Bug Fixes
+
+* added info on contents file upload modal on restraint in servizio-modulistica folder ([#796](https://github.com/RedTurtle/design-comuni-plone-theme/issues/796)) ([cb7b3c8](https://github.com/RedTurtle/design-comuni-plone-theme/commit/cb7b3c83325f6aa3da94faa29eaf0c940e216a93))
+* removed whole day condition in page header subtitle ([#800](https://github.com/RedTurtle/design-comuni-plone-theme/issues/800)) ([cc7d668](https://github.com/RedTurtle/design-comuni-plone-theme/commit/cc7d6686dc91aaaf3eaef51102c8e035540efe46))
+* safari rendering issues and overhaul old dynamic bootstrap italia icons import using cache map ([#810](https://github.com/RedTurtle/design-comuni-plone-theme/issues/810)) ([9c23ac6](https://github.com/RedTurtle/design-comuni-plone-theme/commit/9c23ac6fd172f31c0aa4723d4db008a92100b1a1))
+* updated lockfile ([8d1cf74](https://github.com/RedTurtle/design-comuni-plone-theme/commit/8d1cf74defdec9059dff9a1e1b4313fa7b4c0402))
+* updated volto-gdpr-privacy addon version to 2.2.9([#806](https://github.com/RedTurtle/design-comuni-plone-theme/issues/806)) ([f785ddd](https://github.com/RedTurtle/design-comuni-plone-theme/commit/f785ddd651e1528439a58852f852a9331df2a57e))
+
+
+### Maintenance
+
+* removed additional info from release.md from september ([#799](https://github.com/RedTurtle/design-comuni-plone-theme/issues/799)) ([60052e7](https://github.com/RedTurtle/design-comuni-plone-theme/commit/60052e77b71a9f9dbb59714240acadc01e14ee0a))
+
+
+### Documentation
+
+* updated publiccode and release log ([6a5e490](https://github.com/RedTurtle/design-comuni-plone-theme/commit/6a5e490248df7e53784b5f730b096ab9d6553ad8))
+
 ## [11.24.4](https://github.com/RedTurtle/design-comuni-plone-theme/compare/v11.24.3...v11.24.4) (2024-11-07)
 
 

package/RELEASE.md

@@ -41,6 +41,18 @@
 - ...
  -->
 
+## Versione 11.24.5 (22/11/2024)
+
+### Migliorie
+
+- Inserito messaggio di avviso quando si tenta di caricare un file dalla cartella Modulistica all'interno di un Servizio per segnalare limitazione sull'upload
+
+### Fix
+
+- L'impostazione "Solo cookie tecnici" non causa problemi nell'apertura del cookie banner.
+- [WebKit, Safari, iOS] Risolto un problema di visualizzazione grafica di alcuni bottoni che contengono al loro interno un link ad un sito esterno.
+- Quando un evento ha impostata l'opzione "Tutta la giornata", le date sotto il titolo vengono visualizzate in maniera corretta.
+
 ## Versione 11.24.4 (07/11/2024)
 
 ### Fix
@@ -97,7 +109,7 @@
 
 ### Fix
 
-- Rimosso il campo "ID lighthouse" dal blocco elenco con variazione Card con Testo Animato perchè entra in contrasto con asseveratore. Pianificato evento per ripristinarlo.
+- Rimosso il campo "ID lighthouse" dal blocco elenco con variazione Card con Testo Animato perchè entra in contrasto con asseveratore
 
 ## Versione 11.22.0 (05/09/2024)
 

package/locales/de/LC_MESSAGES/volto.po

@@ -2644,6 +2644,11 @@ msgstr ""
 msgid "modulistica"
 msgstr ""
 
+#: overrideTranslations
+# defaultMessage: As per the official information architecture outlined in measure 1.4.1, all forms must be properly uploaded in the designated section within Amministrazione > Documenti e Dati > Modulistica, and linked to the relevant service sheet. It is no longer possible to upload files and attachments directly into this container.
+msgid "modulistica_restraint"
+msgstr ""
+
 #: components/ItaliaTheme/View/Commons/DownloadFileFormat
 # defaultMessage: Scarica il file
 msgid "modulo_download_file"

package/locales/en/LC_MESSAGES/volto.po

@@ -2629,6 +2629,11 @@ msgstr "Last update"
 msgid "modulistica"
 msgstr "Forms"
 
+#: overrideTranslations
+# defaultMessage: As per the official information architecture outlined in measure 1.4.1, all forms must be properly uploaded in the designated section within Amministrazione > Documenti e Dati > Modulistica, and linked to the relevant service sheet. It is no longer possible to upload files and attachments directly into this container.
+msgid "modulistica_restraint"
+msgstr ""
+
 #: components/ItaliaTheme/View/Commons/DownloadFileFormat
 # defaultMessage: Scarica il file
 msgid "modulo_download_file"

package/locales/es/LC_MESSAGES/volto.po

@@ -2638,6 +2638,11 @@ msgstr "Última actualización"
 msgid "modulistica"
 msgstr "Formularios"
 
+#: overrideTranslations
+# defaultMessage: As per the official information architecture outlined in measure 1.4.1, all forms must be properly uploaded in the designated section within Amministrazione > Documenti e Dati > Modulistica, and linked to the relevant service sheet. It is no longer possible to upload files and attachments directly into this container.
+msgid "modulistica_restraint"
+msgstr ""
+
 #: components/ItaliaTheme/View/Commons/DownloadFileFormat
 # defaultMessage: Scarica il file
 msgid "modulo_download_file"

package/locales/fr/LC_MESSAGES/volto.po

@@ -2646,6 +2646,11 @@ msgstr "Dernière mise à jour"
 msgid "modulistica"
 msgstr "Formes"
 
+#: overrideTranslations
+# defaultMessage: As per the official information architecture outlined in measure 1.4.1, all forms must be properly uploaded in the designated section within Amministrazione > Documenti e Dati > Modulistica, and linked to the relevant service sheet. It is no longer possible to upload files and attachments directly into this container.
+msgid "modulistica_restraint"
+msgstr ""
+
 #: components/ItaliaTheme/View/Commons/DownloadFileFormat
 # defaultMessage: Scarica il file
 msgid "modulo_download_file"

package/locales/it/LC_MESSAGES/volto.po

@@ -2629,6 +2629,11 @@ msgstr "Ultimo aggiornamento"
 msgid "modulistica"
 msgstr "Modulistica"
 
+#: overrideTranslations
+# defaultMessage: As per the official information architecture outlined in measure 1.4.1, all forms must be properly uploaded in the designated section within Amministrazione > Documenti e Dati > Modulistica, and linked to the relevant service sheet. It is no longer possible to upload files and attachments directly into this container.
+msgid "modulistica_restraint"
+msgstr "Come da architettura informativa ufficiale prevista dalla misura 1.4.1, tutta la modulistica dovrà essere correttamente caricata nella sezione apposita, all'interno di amministrazione, documenti e dati, modulistica, e relazionata con la scheda servizio. Non è più possibile caricare file ed allegati direttamente in questo contenitore."
+
 #: components/ItaliaTheme/View/Commons/DownloadFileFormat
 # defaultMessage: Scarica il file
 msgid "modulo_download_file"

package/locales/volto.pot

@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: Plone\n"
-"POT-Creation-Date: 2024-09-26T08:07:45.909Z\n"
+"POT-Creation-Date: 2024-10-29T14:58:46.664Z\n"
 "Last-Translator: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "Language-Team: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "MIME-Version: 1.0\n"
@@ -2631,6 +2631,11 @@ msgstr ""
 msgid "modulistica"
 msgstr ""
 
+#: overrideTranslations
+# defaultMessage: As per the official information architecture outlined in measure 1.4.1, all forms must be properly uploaded in the designated section within Amministrazione > Documenti e Dati > Modulistica, and linked to the relevant service sheet. It is no longer possible to upload files and attachments directly into this container.
+msgid "modulistica_restraint"
+msgstr ""
+
 #: components/ItaliaTheme/View/Commons/DownloadFileFormat
 # defaultMessage: Scarica il file
 msgid "modulo_download_file"

package/package.json

@@ -2,7 +2,7 @@
   "name": "design-comuni-plone-theme",
   "description": "Volto Theme for Italia design guidelines",
   "license": "GPL-v3",
-  "version": "11.24.4",
+  "version": "11.24.6",
   "main": "src/index.js",
   "repository": {
     "type": "git",
@@ -153,7 +153,7 @@
     "volto-editablefooter": "5.1.7",
     "volto-feedback": "0.3.2",
     "volto-form-block": "3.10.0",
-    "volto-gdpr-privacy": "2.2.7",
+    "volto-gdpr-privacy": "2.2.9",
     "volto-google-analytics": "2.0.0",
     "volto-multilingual-widget": "3.2.1",
     "volto-querywidget-with-browser": "0.4.2",

package/publiccode.yml

@@ -227,9 +227,9 @@ maintenance:
 name: io-Comune - Il sito AgID per Comuni ed Enti Pubblici
 platforms:
   - web
-releaseDate: '2024-11-07'
+releaseDate: '2024-11-22'
 softwareType: standalone/web
-softwareVersion: 11.24.4
+softwareVersion: 11.24.6
 url: 'https://github.com/italia/design-comuni-plone-theme'
 usedBy:
   - ASP Comuni Modenesi Area Nord

package/src/components/ItaliaTheme/Icons/DesignIcon.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef, useMemo } from 'react';
+import React, { useState, useEffect } from 'react';
 import { v4 as uuid } from 'uuid';
 import PropTypes from 'prop-types';
 
@@ -12,50 +12,101 @@ const propTypes = {
 
 const defaultProps = {
   color: '',
-  size: '',
+  size: '24px',
   icon: '',
   padding: false,
 };
 
+// No ts means we get many different things here, standardize it
+const SIZE_MAPPINGS = {
+  xs: '1rem',
+  sm: '1.25rem',
+  md: defaultProps.size,
+  lg: '1.75rem',
+  xl: '2rem',
+};
+
+function getIconMapSizeConfig(size) {
+  const mapKeys = Object.keys(SIZE_MAPPINGS);
+  if (mapKeys.includes(size)) return SIZE_MAPPINGS[size];
+  return size;
+}
+
+const iconCache = new Map(); // Global cache using Map
+
 const Icon = ({ icon, title, className, size }) => {
-  const ImportedIconRef = useRef(null);
-  const [loading, setLoading] = useState(false);
-  const iconID = useMemo(() => uuid(), []);
+  const [iconState, setIconState] = useState({
+    loading: true,
+    icon: undefined,
+    // Move to useId in react18
+    id: uuid(),
+  });
 
   useEffect(() => {
-    setLoading(true);
-    const importIcon = async () => {
-      try {
-        const { default: namedImport } = await import(
-          `bootstrap-italia/src/svg/${icon}.svg`
-        );
-        ImportedIconRef.current = namedImport;
-      } catch (err) {
-        throw err;
-      } finally {
-        setLoading(false);
-      }
-    };
-    importIcon();
+    let loadableIcon = iconCache.get(icon);
+    // Use the cached icon if available
+    if (loadableIcon) {
+      setIconState((prev) => ({
+        ...prev,
+        loading: false,
+        icon: loadableIcon,
+      }));
+    } else {
+      // Otherwise, dynamically import the icon
+      const importIcon = async () => {
+        try {
+          const { default: namedImport } = await import(
+            `bootstrap-italia/src/svg/${icon}.svg`
+          );
+          iconCache.set(icon, namedImport); // Cache the imported icon
+          loadableIcon = namedImport;
+        } catch (err) {
+          console.error(`Error loading icon: ${icon}`, err);
+        } finally {
+          setIconState((prev) => ({
+            ...prev,
+            loading: false,
+            icon: loadableIcon,
+          }));
+        }
+      };
+      importIcon();
+    }
   }, [icon]);
 
-  if (!loading && ImportedIconRef.current) {
-    const { current: name } = ImportedIconRef;
+  const iconSize = getIconMapSizeConfig(size);
+
+  // Placeholder that is shown while the icon is loading
+  if (iconState.loading) {
+    return (
+      <span
+        style={{
+          width: iconSize,
+          height: iconSize,
+          backgroundColor: 'transparent',
+        }}
+        className={className}
+      />
+    );
+  }
+
+  // Render the icon once it's loaded
+  if (iconState.icon) {
     return (
       <svg
-        xmlns={name.attributes?.xmlns}
-        viewBox={name.attributes?.viewBox}
-        width={name.attributes?.width}
-        height={name.attributes?.height}
-        style={{ height: size, width: 'auto' }}
+        xmlns={iconState.icon.attributes?.xmlns}
+        viewBox={iconState.icon.attributes?.viewBox}
+        width={iconState.icon.attributes?.width}
+        height={iconState.icon.attributes?.height}
+        style={{ height: iconSize, width: iconSize }}
         className={className}
         aria-hidden="true"
         dangerouslySetInnerHTML={{
           __html: title
-            ? `<title id="${iconID}">${title}</title>${name.content}`
-            : name.content,
+            ? `<title id="${iconState.id}">${title}</title>${iconState.icon.content}`
+            : iconState.icon.content,
         }}
-        aria-labelledby={iconID}
+        aria-labelledby={iconState.id}
       />
     );
   }

package/src/components/ItaliaTheme/Icons/FontAwesomeIcon.jsx

@@ -36,12 +36,12 @@ const FontAwesomeIcon = (props) => {
       prefixKey === 'fab'
         ? 'brands'
         : prefixKey === 'far'
-          ? 'regular'
-          : prefixKey === 'fas'
-            ? 'solid'
-            : prefixKey != null
-              ? prefixKey
-              : 'solid',
+        ? 'regular'
+        : prefixKey === 'fas'
+        ? 'solid'
+        : prefixKey != null
+        ? prefixKey
+        : 'solid',
       iconName,
     ];
   };

package/src/components/ItaliaTheme/Icons/Icon.jsx

@@ -12,6 +12,7 @@ import { FontAwesomeIcon } from 'design-comuni-plone-theme/components/ItaliaThem
 
 const Icon = (props) => {
   const { icon, className, color, size, padding, ...rest } = props;
+
   if (icon) {
     const classes = classNames(
       'icon',

package/src/components/ItaliaTheme/View/BandoView/BandoApprofondimenti.jsx

@@ -34,7 +34,7 @@ const BandoApprofondimenti = ({ content }) => {
         />
         // item={item} viene utilizzato nelle customizzazioni per ottenere altre proprietà
       );
-    } else if (item.type === 'Link') {
+    } else if (item.type === 'Collegamento') {
       return (
         <Card
           className="card card-teaser shadow p-4 mt-3 rounded attachment"

package/src/components/ItaliaTheme/View/Commons/LocationsMap.jsx

@@ -1,7 +1,5 @@
-import { useDispatch, useSelector } from 'react-redux';
-import React, { useEffect } from 'react';
+import React from 'react';
 import { useIntl, defineMessages } from 'react-intl';
-import { getContent, resetContent } from '@plone/volto/actions';
 import { flattenToAppURL } from '@plone/volto/helpers';
 import { OSMMap } from 'volto-venue';
 import PropTypes from 'prop-types';
@@ -30,9 +28,7 @@ const messages = defineMessages({
 });
 
 const LocationsMap = ({ center, locations }) => {
-  const dispatch = useDispatch();
   const intl = useIntl();
-  const fetchedLocations = useSelector((state) => state.content.subrequests);
   const venues = locations.map((location) => {
     let url = flattenToAppURL(location['@id']);
     return {
@@ -41,18 +37,6 @@ const LocationsMap = ({ center, locations }) => {
     };
   });
 
-  useEffect(() => {
-    venues.forEach((loc) => {
-      dispatch(getContent(loc.url, null, loc.key));
-    });
-
-    return () =>
-      venues.forEach((loc) => {
-        dispatch(resetContent(loc.key));
-      });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [dispatch, locations]);
-
   const pinContent = (item) => {
     return (
       <div className="map-pin-popup">
@@ -97,7 +81,9 @@ const LocationsMap = ({ center, locations }) => {
   };
 
   let venuesData = venues.reduce((acc, val) => {
-    let venue = fetchedLocations?.[val.key]?.data;
+    let venue = locations.find((el) => {
+      return el['@id'].includes(val.url);
+    });
 
     if (venue?.geolocation?.latitude && venue?.geolocation?.longitude) {
       return [

package/src/components/ItaliaTheme/View/Commons/Module.jsx

@@ -3,12 +3,9 @@
  * @module components/theme/View/DocumentoView/Modules
  */
 
-import React, { useEffect } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import React from 'react';
 import PropTypes from 'prop-types';
-import { flattenToAppURL } from '@plone/volto/helpers';
 import { UniversalLink } from '@plone/volto/components';
-import { getContent, resetContent } from '@plone/volto/actions';
 
 import { Card, CardBody, CardTitle } from 'design-react-kit';
 
@@ -21,20 +18,7 @@ import { DownloadFileFormat } from 'design-comuni-plone-theme/components/ItaliaT
  * @returns {string} Markup of the component.
  */
 const Module = ({ item }) => {
-  const dispatch = useDispatch();
-  const subrequests = useSelector((state) => state.content.subrequests);
-  const url = flattenToAppURL(item['@id']);
-  const key = 'module_' + url;
-
-  useEffect(() => {
-    dispatch(getContent(url, null, key));
-    return () => dispatch(resetContent(key));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [key]);
-
-  let modulo = subrequests?.[key]?.data;
-
-  return modulo ? (
+  return item ? (
     <Card
       className="card card-teaser shadow p-4 mt-3 rounded modulo"
       noWrapper={true}
@@ -42,37 +26,38 @@ const Module = ({ item }) => {
     >
       <CardBody tag="div">
         <CardTitle className="h5">
-          {modulo.file_principale ? (
-            <a
-              href={flattenToAppURL(modulo.file_principale.download)}
-              title={modulo.title ?? modulo.file_principale.filename}
-            >
-              {modulo.title ?? modulo.file_principale.filename}
-            </a>
-          ) : modulo['@type'] === 'Link' ? (
-            <UniversalLink item={modulo} title={modulo.title}>
-              {modulo.title}
+          {item.file_principale ? (
+            item.title ?? item.file_principale.filename
+          ) : item['@type'] === 'Link' ? (
+            <UniversalLink item={item} title={item.title}>
+              {item.title}
             </UniversalLink>
           ) : (
-            modulo.title
+            item.title
           )}
         </CardTitle>
 
-        {modulo.description && <p>{modulo.description}</p>}
+        {item.description && <p>{item.description}</p>}
         <div className="download-formats">
           <DownloadFileFormat
-            file={modulo.file_principale}
+            file={item.file_principale}
             showLabel={true}
+            title={item.title ?? item.file_principale.filename}
+            hideFileFormatLabel={true}
             className="mb-4"
           />
           <DownloadFileFormat
-            file={modulo.formato_alternativo_1}
+            file={item.formato_alternativo_1}
             showLabel={true}
+            title={item.title ?? item.formato_alternativo_1.filename}
+            hideFileFormatLabel={true}
             className="mb-4"
           />
           <DownloadFileFormat
-            file={modulo.formato_alternativo_2}
+            file={item.formato_alternativo_2}
             showLabel={true}
+            title={item.title ?? item.formato_alternativo_2.filename}
+            hideFileFormatLabel={true}
           />
         </div>
       </CardBody>

package/src/components/ItaliaTheme/View/Commons/Modules.jsx

@@ -18,7 +18,9 @@ import {
  */
 const Modules = ({ content, title, id = 'documenti' }) => {
   const moduli =
-    content.items?.filter((item) => item.id !== 'multimedia') ?? [];
+    content.moduli_del_documento ??
+    content.items?.filter((item) => item.id !== 'multimedia') ??
+    [];
 
   return moduli.length > 0 ? (
     <RichTextSection tag_id={id} title={title}>

package/src/components/ItaliaTheme/View/Commons/PageHeader/PageHeaderEventDates.jsx

@@ -83,9 +83,7 @@ const PageHeaderEventDates = ({ content, moment, rrule }) => {
         !openEnd &&
         !renderOnlyStart &&
         `dal ${Moment(content.start).format('DD-MM-Y')} al ${endDate}`}
-      {(wholeDay ||
-        renderOnlyStart ||
-        Moment(content.end).isSame(actualEndDate)) &&
+      {(renderOnlyStart || Moment(content.end).isSame(actualEndDate)) &&
         !openEnd &&
         `${Moment(content.start).format('DD-MM-Y')}`}
       {openEnd &&

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,12 +71,17 @@ 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) {
+                  if (
+                    uo_object.image_scales.preview_image.length > 0 &&
+                    uo_object?.preview_caption
+                  ) {
                     alt = uo_object.preview_caption;
-                  } else if (uo_object?.image && uo_object?.image_caption) {
+                  } else if (
+                    uo_object.image_scales.image.length > 0 &&
+                    uo_object?.image_caption
+                  ) {
                     alt = uo_object.image_caption;
                   }
 
@@ -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/customizations/volto/components/manage/Contents/ContentsUploadModal.jsx

@@ -0,0 +1,373 @@
+// CUSTOMIZATION:
+// - 196-202 - 230-262: added file upload restraint message as per agid regulations
+
+/**
+ * Contents upload modal.
+ * @module components/manage/Contents/ContentsUploadModal
+ */
+
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+import {
+  Button,
+  Dimmer,
+  Header,
+  Icon,
+  Image,
+  Loader,
+  Modal,
+  Table,
+  Segment,
+  TableCell,
+} from 'semantic-ui-react';
+import loadable from '@loadable/component';
+import { concat, filter, map } from 'lodash';
+import filesize from 'filesize';
+import { readAsDataURL } from 'promise-file-reader';
+import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
+import { FormattedRelativeDate } from '@plone/volto/components';
+import { createContent, getTypes } from '@plone/volto/actions';
+import { validateFileUploadSize, getBaseUrl } from '@plone/volto/helpers';
+
+const Dropzone = loadable(() => import('react-dropzone'));
+
+const messages = defineMessages({
+  cancel: {
+    id: 'Cancel',
+    defaultMessage: 'Cancel',
+  },
+  upload: {
+    id: '{count, plural, one {Upload {count} file} other {Upload {count} files}}',
+    defaultMessage:
+      '{count, plural, one {Upload {count} file} other {Upload {count} files}}',
+  },
+});
+
+const SUBREQUEST = 'batch-upload';
+
+/**
+ * ContentsUploadModal class.
+ * @class ContentsUploadModal
+ * @extends Component
+ */
+class ContentsUploadModal extends Component {
+  /**
+   * Property types.
+   * @property {Object} propTypes Property types.
+   * @static
+   */
+  static propTypes = {
+    createContent: PropTypes.func.isRequired,
+    pathname: PropTypes.string.isRequired,
+    request: PropTypes.shape({
+      loading: PropTypes.bool,
+      loaded: PropTypes.bool,
+    }).isRequired,
+    open: PropTypes.bool.isRequired,
+    onOk: PropTypes.func.isRequired,
+    onCancel: PropTypes.func.isRequired,
+    getTypes: PropTypes.func,
+  };
+
+  /**
+   * Constructor
+   * @method constructor
+   * @param {Object} props Component properties
+   * @constructs ContentsUploadModal
+   */
+  constructor(props) {
+    super(props);
+    this.onRemoveFile = this.onRemoveFile.bind(this);
+    this.onDrop = this.onDrop.bind(this);
+    this.onCancel = this.onCancel.bind(this);
+    this.onSubmit = this.onSubmit.bind(this);
+    this.state = {
+      files: [],
+    };
+  }
+
+  /**
+   * Component will receive props
+   * @method componentWillReceiveProps
+   * @param {Object} nextProps Next properties
+   * @returns {undefined}
+   */
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (this.props.request.loading && nextProps.request.loaded) {
+      this.props.onOk();
+      this.setState({
+        files: [],
+      });
+    }
+  }
+
+  /**
+   * Remove file handler
+   * @method onRemoveFile
+   * @param {Object} event Event object
+   * @returns {undefined}
+   */
+  onRemoveFile(event) {
+    this.setState({
+      files: filter(
+        this.state.files,
+        (file, index) =>
+          index !== parseInt(event.target.getAttribute('value'), 10),
+      ),
+    });
+  }
+
+  /**
+   * Drop handler
+   * @method onDrop
+   * @param {array} files File objects
+   * @returns {undefined}
+   */
+  onDrop = async (files) => {
+    const validFiles = [];
+    for (let i = 0; i < files.length; i++) {
+      if (validateFileUploadSize(files[i], this.props.intl.formatMessage)) {
+        await readAsDataURL(files[i]).then((data) => {
+          const fields = data.match(/^data:(.*);(.*),(.*)$/);
+          files[i].preview = fields[0];
+        });
+        validFiles.push(files[i]);
+      }
+    }
+    this.setState({
+      files: concat(this.state.files, validFiles),
+    });
+  };
+
+  /**
+   * Cancel handler
+   * @method onCancel
+   * @returns {undefined}
+   */
+  onCancel() {
+    this.props.onCancel();
+    this.setState({
+      files: [],
+    });
+  }
+
+  /**
+   * Submit handler
+   * @method onSubmit
+   * @returns {undefined}
+   */
+  onSubmit() {
+    Promise.all(map(this.state.files, (file) => readAsDataURL(file))).then(
+      (files) => {
+        this.props.createContent(
+          this.props.pathname,
+          map(this.state.files, (file, index) => {
+            const fields = files[index].match(/^data:(.*);(.*),(.*)$/);
+            const image = fields[1].split('/')[0] === 'image';
+            return {
+              '@type': image ? 'Image' : 'File',
+              title: file.name,
+              [image ? 'image' : 'file']: {
+                data: fields[3],
+                encoding: fields[2],
+                'content-type': fields[1],
+                filename: file.name,
+              },
+            };
+          }),
+          SUBREQUEST,
+        );
+      },
+    );
+  }
+
+  componentDidMount() {
+    this.props.getTypes(getBaseUrl(this.props.pathname));
+  }
+
+  /**
+   * Render method.
+   * @method render
+   * @returns {string} Markup for the component.
+   */
+  render() {
+    // as per agid guidelines, files cannot be uploaded in modulistica folder inside ct servizio
+    // show restraint and hide upload button when page is called modulistica and when there's a restraint
+    // this is enough to identify this only case bc even if another page is called 'modulistica', it will have 'File'
+    // as addable type
+    const showFileRestraint =
+      this.props.pathname.includes('modulistica') &&
+      !this.props.types.some((type) => type.id === 'File');
+
+    return (
+      this.props.open && (
+        <Modal open={this.props.open}>
+          <Header>
+            <FormattedMessage id="Upload files" defaultMessage="Upload files" />
+          </Header>
+          <Dimmer active={this.props.request.loading}>
+            <Loader>
+              <FormattedMessage
+                id="Uploading files"
+                defaultMessage="Uploading files"
+              />
+            </Loader>
+          </Dimmer>
+          <Modal.Content>
+            <Dropzone
+              onDrop={this.onDrop}
+              className="dropzone"
+              noDragEventsBubbling={true}
+              multiple={true}
+            >
+              {({ getRootProps, getInputProps }) => (
+                <div {...getRootProps({ className: 'dashed' })}>
+                  <Segment>
+                    <Table basic="very">
+                      <Table.Body>
+                        {showFileRestraint ? (
+                          <Table.Row>
+                            <TableCell>
+                              <FormattedMessage
+                                id="modulistica_restraint"
+                                defaultMessage="As per the official information architecture outlined in measure 1.4.1, all forms must be properly uploaded in the designated section within Amministrazione > Documenti e Dati > Modulistica, and linked to the relevant service sheet. It is no longer possible to upload files and attachments directly into this container."
+                              />
+                            </TableCell>
+                          </Table.Row>
+                        ) : (
+                          <Table.Row>
+                            <Table.Cell>
+                              <FormattedMessage
+                                id="Drag and drop files from your computer onto this area or click the “Browse” button."
+                                defaultMessage="Drag and drop files from your computer onto this area or click the “Browse” button."
+                              />
+                            </Table.Cell>
+                            <Table.Cell>
+                              <Button className="ui button primary">
+                                <FormattedMessage
+                                  id="Browse"
+                                  defaultMessage="Browse"
+                                />
+                              </Button>
+                              <input
+                                {...getInputProps({
+                                  type: 'file',
+                                  style: { display: 'none' },
+                                })}
+                              />
+                            </Table.Cell>
+                          </Table.Row>
+                        )}
+                      </Table.Body>
+                    </Table>
+                  </Segment>
+                </div>
+              )}
+            </Dropzone>
+            {this.state.files.length > 0 && (
+              <Table compact singleLine>
+                <Table.Header>
+                  <Table.Row>
+                    <Table.HeaderCell width={8}>
+                      <FormattedMessage
+                        id="Filename"
+                        defaultMessage="Filename"
+                      />
+                    </Table.HeaderCell>
+                    <Table.HeaderCell width={4}>
+                      <FormattedMessage
+                        id="Last modified"
+                        defaultMessage="Last modified"
+                      />
+                    </Table.HeaderCell>
+                    <Table.HeaderCell width={4}>
+                      <FormattedMessage
+                        id="File size"
+                        defaultMessage="File size"
+                      />
+                    </Table.HeaderCell>
+                    <Table.HeaderCell width={4}>
+                      <FormattedMessage id="Preview" defaultMessage="Preview" />
+                    </Table.HeaderCell>
+                    <Table.HeaderCell />
+                  </Table.Row>
+                </Table.Header>
+                <Table.Body>
+                  {map(this.state.files, (file, index) => (
+                    <Table.Row className="upload-row" key={file.name}>
+                      <Table.Cell>{file.name}</Table.Cell>
+                      <Table.Cell>
+                        {file.lastModifiedDate && (
+                          <FormattedRelativeDate date={file.lastModifiedDate} />
+                        )}
+                      </Table.Cell>
+                      <Table.Cell>
+                        {filesize(file.size, { round: 0 })}
+                      </Table.Cell>
+                      <Table.Cell>
+                        {file.type.split('/')[0] === 'image' && (
+                          <Image src={file.preview} height={60} />
+                        )}
+                      </Table.Cell>
+                      <Table.Cell>
+                        <Icon
+                          name="close"
+                          value={index}
+                          link
+                          onClick={this.onRemoveFile}
+                        />
+                      </Table.Cell>
+                    </Table.Row>
+                  ))}
+                </Table.Body>
+              </Table>
+            )}
+          </Modal.Content>
+          <Modal.Actions>
+            {this.state.files.length > 0 && (
+              <Button
+                basic
+                circular
+                primary
+                floated="right"
+                icon="arrow right"
+                aria-label={this.props.intl.formatMessage(messages.upload, {
+                  count: this.state.files.length,
+                })}
+                onClick={this.onSubmit}
+                title={this.props.intl.formatMessage(messages.upload, {
+                  count: this.state.files.length,
+                })}
+                size="big"
+              />
+            )}
+            <Button
+              basic
+              circular
+              secondary
+              icon="remove"
+              aria-label={this.props.intl.formatMessage(messages.cancel)}
+              title={this.props.intl.formatMessage(messages.cancel)}
+              floated="right"
+              size="big"
+              onClick={this.onCancel}
+            />
+          </Modal.Actions>
+        </Modal>
+      )
+    );
+  }
+}
+
+export default compose(
+  injectIntl,
+  connect(
+    (state) => ({
+      request: state.content.subrequests?.[SUBREQUEST] || {},
+      types: filter(state.types.types, 'addable'),
+    }),
+    { createContent, getTypes },
+  ),
+)(ContentsUploadModal);

package/src/overrideTranslations.jsx

@@ -94,4 +94,9 @@ defineMessages({
     id: 'form_limit',
     defaultMessage: 'Submission limit',
   },
+  modulistica_restraint: {
+    id: 'modulistica_restraint',
+    defaultMessage:
+      'As per the official information architecture outlined in measure 1.4.1, all forms must be properly uploaded in the designated section within Amministrazione > Documenti e Dati > Modulistica, and linked to the relevant service sheet. It is no longer possible to upload files and attachments directly into this container.',
+  },
 });

package/src/theme/ItaliaTheme/_main.scss

@@ -152,6 +152,37 @@ iframe {
         font-weight: 700;
       }
     }
+    /*
+      Safari rendering issue workaround - B#60364
+      Safari rendering fix, icons and fonts coming late means shenanigans for Safari rendering, as
+      Safari is lazy and slow in loading fonts and icons dynamically.
+      Problem: Safari (tested on Safari 17.6) sometimes fails to calculate the layout correctly
+      when dealing with dynamic content such as lazy-loaded icons or fonts, combined with
+      `display: inline-block`. This can result in improperly positioned elements
+      until the page is re-rendered or refocused.
+
+      Solution: To fix this issue:
+      1. Replace `display: inline-block` with `display: inline-flex`. This ensures Safari
+          handles the box model and inline context properly, especially when the element's
+          size or alignment depends on dynamic content.
+      2. Add `position: relative;` to force a recalculation of layout, resolving rendering quirks.
+
+      Background: Safari's WebKit engine has known issues with `inline-block` combined
+      with delayed content rendering, such as lazy-loaded icons. Switching to `inline-flex`
+      better aligns with modern CSS rendering engines, while `position: relative;`
+      ensures the layout is recalculated.
+
+      References:
+      - CSS-Tricks: What Forces Layout or Reflow: https://css-tricks.com/what-forces-layout-reflow/
+      - WebKit Bug Reports on `inline-block` rendering issues with dynamic content.
+      - Testing and observations on Safari 17.6 behavior with lazy-loaded assets.
+    */
+    @supports (-webkit-appearance: none) {
+      a {
+        display: inline-flex; /* Evita problemi con inline-block */
+        position: relative; /* Forza Safari a calcolare il layout reflow correttamente */
+      }
+    }
   }
 
   div[class^='draftJsToolbar__toolbar__'] {