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

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

@@ -57,18 +57,31 @@ const BandoDates = ({ content }) => {
     ? viewDate(intl.locale, content.chiusura_procedimento_bando)
     : null;
 
+  const PointListDate = ({ date }) => {
+    return (
+      <div
+        className="point-list-aside point-list-warning"
+        aria-label={date.format('DD MMMM Y')}
+      >
+        <span className="point-date font-monospace" aria-hidden="true">
+          {date.format('DD')}
+        </span>
+        <span className="point-month" aria-hidden="true">
+          {date.format('MMMM')}
+        </span>
+        <span className="point-month" aria-hidden="true">
+          {date.format('Y')}
+        </span>
+      </div>
+    );
+  };
   return content ? (
     <>
       <div className="point-list-wrapper my-4 mb-5">
         {effective && (
           <div className="point-list">
-            <div className="point-list-aside point-list-warning">
-              <span className="point-date font-monospace">
-                {effective.format('DD')}
-              </span>
-              <span className="point-month">{effective.format('MMMM')}</span>
-              <span className="point-month">{effective.format('Y')}</span>
-            </div>
+            <PointListDate date={effective} />
+
             <div className="point-list-content">
               <Card
                 className="card card-teaser rounded shadow border-left-card"
@@ -87,15 +100,8 @@ const BandoDates = ({ content }) => {
 
         {apertura_bando && (
           <div className="point-list">
-            <div className="point-list-aside point-list-warning">
-              <span className="point-date font-monospace">
-                {apertura_bando.format('DD')}
-              </span>
-              <span className="point-month">
-                {apertura_bando.format('MMMM')}
-              </span>
-              <span className="point-month">{apertura_bando.format('Y')}</span>
-            </div>
+            <PointListDate date={apertura_bando} />
+
             <div className="point-list-content">
               <Card
                 className="card card-teaser rounded shadow border-left-card"
@@ -115,17 +121,8 @@ const BandoDates = ({ content }) => {
 
         {scadenza_domande_bando && (
           <div className="point-list">
-            <div className="point-list-aside point-list-warning">
-              <span className="point-date font-monospace">
-                {scadenza_domande_bando.format('DD')}
-              </span>
-              <span className="point-month">
-                {scadenza_domande_bando.format('MMMM')}
-              </span>
-              <span className="point-month">
-                {scadenza_domande_bando.format('Y')}
-              </span>
-            </div>
+            <PointListDate date={scadenza_domande_bando} />
+
             <div className="point-list-content">
               <Card
                 className="card card-teaser rounded shadow border-left-card"
@@ -145,15 +142,7 @@ const BandoDates = ({ content }) => {
 
         {scadenza_bando && (
           <div className="point-list">
-            <div className="point-list-aside point-list-warning">
-              <span className="point-date font-monospace">
-                {scadenza_bando.format('DD')}
-              </span>
-              <span className="point-month">
-                {scadenza_bando.format('MMMM')}
-              </span>
-              <span className="point-month">{scadenza_bando.format('Y')}</span>
-            </div>
+            <PointListDate date={scadenza_bando} />
             <div className="point-list-content">
               <Card
                 className="card card-teaser rounded shadow border-left-card"
@@ -173,17 +162,8 @@ const BandoDates = ({ content }) => {
 
         {chiusura_procedimento_bando && (
           <div className="point-list">
-            <div className="point-list-aside point-list-warning">
-              <span className="point-date font-monospace">
-                {chiusura_procedimento_bando.format('DD')}
-              </span>
-              <span className="point-month">
-                {chiusura_procedimento_bando.format('MMMM')}
-              </span>
-              <span className="point-month">
-                {chiusura_procedimento_bando.format('Y')}
-              </span>
-            </div>
+            <PointListDate date={chiusura_procedimento_bando} />
+
             <div className="point-list-content">
               <Card
                 className="card card-teaser rounded shadow border-left-card"

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

@@ -1,42 +1,13 @@
-import { useEffect } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
 import { Card, CardBody, CardText, CardTitle, Icon } from 'design-react-kit';
-import { getContent, resetContent } from '@plone/volto/actions';
 import { UniversalLink } from '@plone/volto/components';
-import { flattenToAppURL } from '@plone/volto/helpers';
+
 import { renderPDCItemValue } from 'design-comuni-plone-theme/helpers';
 import { useIntl } from 'react-intl';
 
 const ContactsCard = ({ contact = {}, show_title = false, ...rest }) => {
-  const dispatch = useDispatch();
   const intl = useIntl();
   const contactUrl = contact['@id'];
 
-  const { loading, loaded, error, data } = useSelector(
-    (state) => state.content.subrequests[flattenToAppURL(contactUrl)] ?? {},
-  );
-
-  useEffect(() => {
-    if (!loading && !loaded) {
-      dispatch(
-        getContent(
-          flattenToAppURL(contactUrl),
-          null,
-          flattenToAppURL(contactUrl),
-        ),
-      );
-    }
-  }, [dispatch, contactUrl, loading, loaded]);
-
-  useEffect(
-    () => () => dispatch(resetContent(flattenToAppURL(contactUrl))),
-    [dispatch, contactUrl],
-  );
-
-  if (error) {
-    return null;
-  }
-
   return (
     <Card
       teaser
@@ -54,7 +25,7 @@ const ContactsCard = ({ contact = {}, show_title = false, ...rest }) => {
           )}
         </CardTitle>
         <CardText>
-          {data?.value_punto_contatto.map((pdc, index) => (
+          {contact?.value_punto_contatto?.map((pdc, index) => (
             <span key={index}>
               <strong>
                 <span className="pdc-type">{pdc.pdc_type}</span>

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

@@ -4,7 +4,11 @@ import { rrulei18n } from '@plone/volto/components/manage/Widgets/RecurrenceWidg
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 import { Card, CardTitle, CardBody } from 'design-react-kit';
 import PropTypes from 'prop-types';
-import { viewDate } from 'design-comuni-plone-theme/helpers';
+import {
+  viewDate,
+  getRealEventEnd,
+  getRecurrenceExceptionDates,
+} from 'design-comuni-plone-theme/helpers';
 
 const messages = defineMessages({
   start: {
@@ -46,17 +50,36 @@ const Dates = ({ content, show_image, moment: momentlib, rrule }) => {
 
   const rrulestr = rrule.rrulestr;
 
-  let rruleSet = null;
   let recurrenceText = null;
 
+  const rruleSet = content.recurrence
+    ? rrulestr(content?.recurrence, {
+        compatible: true, //If set to True, the parser will operate in RFC-compatible mode. Right now it means that unfold will be turned on, and if a DTSTART is found, it will be considered the first recurrence instance, as documented in the RFC.
+        forceset: true,
+      })
+    : null;
+
+  const actualEndDate = getRealEventEnd(content, rruleSet);
+
   if (content.recurrence) {
+    const isRecurrenceByDay = content.recurrence.includes('BYDAY=+');
+    const isWeekdaySunday = content.recurrence
+      .split('BYDAY')[1]
+      ?.includes('SU');
     const RRULE_LANGUAGE = rrulei18n(intl, moment);
-    rruleSet = rrulestr(content.recurrence, {
-      compatible: true, //If set to True, the parser will operate in RFC-compatible mode. Right now it means that unfold will be turned on, and if a DTSTART is found, it will be considered the first recurrence instance, as documented in the RFC.
-      forceset: true,
-    });
+
     recurrenceText = rruleSet.rrules()[0]?.toText(
       (t) => {
+        if (moment.locale(intl.locale) === 'it' && isRecurrenceByDay) {
+          RRULE_LANGUAGE.strings.th = '°';
+          RRULE_LANGUAGE.strings.nd = '°';
+          RRULE_LANGUAGE.strings.rd = '°';
+          RRULE_LANGUAGE.strings.st = '°';
+
+          if (isWeekdaySunday) {
+            RRULE_LANGUAGE.strings['on the'] = 'la';
+          }
+        }
         return RRULE_LANGUAGE.strings[t];
       },
       RRULE_LANGUAGE,
@@ -64,29 +87,33 @@ const Dates = ({ content, show_image, moment: momentlib, rrule }) => {
     );
   }
   const start = viewDate(intl.locale, content.start);
-  const end = viewDate(intl.locale, content.end);
+  // format and save date into new variable depending on recurrence of event
+  const end = viewDate(intl.locale, actualEndDate);
+
   const openEnd = content?.open_end;
   const wholeDay = content?.whole_day;
-  const rdates = rruleSet?.rdates() ?? [];
-  const exdates = rruleSet?.exdates() ?? [];
-  const additionalDates = rdates.reduce((acc, curr) => {
-    const isExdate = exdates.some((b) => b.toString() === curr.toString());
-    if (!isExdate) {
-      return [...acc, curr];
-    } else return acc;
-  }, []);
+
+  const { additionalDates, removedDates } =
+    getRecurrenceExceptionDates(rruleSet);
 
   return content ? (
     <>
       <div className="point-list-wrapper my-4 mb-5">
         <div className="point-list">
-          <div className="point-list-aside point-list-warning">
-            <span className="point-date font-monospace">
+          <div
+            className="point-list-aside point-list-warning"
+            aria-label={start.format('DD MMMM Y')}
+          >
+            <span className="point-date font-monospace" aria-hidden={true}>
               {start.format('DD')}
             </span>
-            <span className="point-month">{start.format('MMMM')}</span>
+            <span className="point-month" aria-hidden={true}>
+              {start.format('MMMM')}
+            </span>
             {!start.isSame(end, 'year') && (
-              <span className="point-month">{start.format('YYYY')}</span>
+              <span className="point-month" aria-hidden={true}>
+                {start.format('YYYY')}
+              </span>
             )}
           </div>
           <div className="point-list-content">
@@ -111,13 +138,20 @@ const Dates = ({ content, show_image, moment: momentlib, rrule }) => {
         </div>
         {!openEnd && (
           <div className="point-list">
-            <div className="point-list-aside point-list-warning">
-              <span className="point-date font-monospace">
-                {end.format('DD')}
+            <div
+              className="point-list-aside point-list-warning"
+              aria-label={end.format('DD MMMM Y')}
+            >
+              <span className="point-date font-monospace" aria-hidden={true}>
+                {end?.format('DD')}
+              </span>
+              <span className="point-month" aria-hidden={true}>
+                {end?.format('MMMM')}
               </span>
-              <span className="point-month">{end.format('MMMM')}</span>
-              {!end.isSame(start, 'year') && (
-                <span className="point-month">{end.format('YYYY')}</span>
+              {!end?.isSame(start, 'year') && (
+                <span className="point-month" aria-hidden={true}>
+                  {end?.format('YYYY')}
+                </span>
               )}
             </div>
             <div className="point-list-content">
@@ -128,7 +162,7 @@ const Dates = ({ content, show_image, moment: momentlib, rrule }) => {
               >
                 <CardBody tag="div" className={'card-body'}>
                   <CardTitle tag="p">
-                    {!content.whole_day && `${end.format('HH:mm')} - `}
+                    {!content.whole_day && `${end?.format('HH:mm')} - `}
                     {intl.formatMessage(messages.end)}
                   </CardTitle>
                 </CardBody>
@@ -152,10 +186,10 @@ const Dates = ({ content, show_image, moment: momentlib, rrule }) => {
           ))}
         </div>
       )}
-      {exdates.length > 0 && (
+      {removedDates.length > 0 && (
         <div className="mt-4">
           <h5>{intl.formatMessage(messages.excluded_dates)}</h5>
-          {exdates.map((exDate) => (
+          {removedDates.map((exDate) => (
             <div className="font-serif">
               {viewDate(intl.locale, exDate, 'dddd DD MMMM YYYY')}
             </div>

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

@@ -1,17 +1,12 @@
 import PropTypes from 'prop-types';
 import { defineMessages, useIntl } from 'react-intl';
-import {
-  Card,
-  CardBody,
-  CardReadMore,
-  CardText,
-  CardTitle,
-} from 'design-react-kit';
+import { Card, CardBody, CardReadMore, CardTitle } from 'design-react-kit';
 import config from '@plone/volto/registry';
 import { UniversalLink } from '@plone/volto/components';
 import { flattenToAppURL } from '@plone/volto/helpers';
 import { RichTextSection } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
 import { viewDate } from 'design-comuni-plone-theme/helpers';
+import { CardCalendar } from 'design-comuni-plone-theme/components/ItaliaTheme';
 
 const messages = defineMessages({
   events: {
@@ -31,30 +26,37 @@ const messages = defineMessages({
 const SubEvent = ({ event, show_image }) => {
   const intl = useIntl();
   const Image = config.getComponent({ name: 'Image' }).component;
+  const hasImage = event.image_field || event.preview_image || event.image;
   return event ? (
     <div className="card-wrapper card-teaser">
       <Card noWrapper className="card no-after shadow rounded">
-        {show_image &&
-          (event.image_field || event.preview_image || event.image) && (
-            <div className="img-responsive-wrapper">
-              <div className="img-responsive">
-                <figure class="volto-image img-wrapper responsive">
-                  <Image
-                    item={event}
-                    alt={intl.formatMessage(messages.immagine)}
-                    loading="lazy"
-                    sizes="(max-width:320px) 300px, (max-width:425px) 400px, (max-width:768px) 600px, 300px"
-                  />
-                </figure>
-                {event.start && (
-                  <div className="card-calendar d-flex flex-column justify-content-center">
-                    {viewDate(intl.locale, event.start, 'DD MMM')}
-                  </div>
-                )}
-              </div>
+        {show_image && hasImage && (
+          <div className="img-responsive-wrapper">
+            <div className="img-responsive">
+              <figure class="volto-image img-wrapper responsive">
+                <Image
+                  item={event}
+                  alt={intl.formatMessage(messages.immagine)}
+                  loading="lazy"
+                  sizes="(max-width:320px) 300px, (max-width:425px) 400px, (max-width:768px) 600px, 300px"
+                />
+              </figure>
+              {event.start && (
+                <CardCalendar
+                  start={event.start}
+                  end={event.end}
+                  recurrence={event.recurrence}
+                />
+              )}
             </div>
-          )}
+          </div>
+        )}
         <CardBody>
+          {event.start && (!show_image || (show_image && !hasImage)) && (
+            <div className="category-top mb-2">
+              {viewDate(intl.locale, event.start, 'DD MMM YYYY')}
+            </div>
+          )}
           <CardTitle className="h5">
             <UniversalLink
               href={flattenToAppURL(event['@id'])}
@@ -64,7 +66,6 @@ const SubEvent = ({ event, show_image }) => {
               {event.title}
             </UniversalLink>
           </CardTitle>
-          <CardText> </CardText>
           <CardReadMore
             iconName="it-arrow-right"
             tag={UniversalLink}

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

@@ -13,6 +13,8 @@ import {
   SingleSlideWrapper,
   CarouselWrapper,
 } from 'design-comuni-plone-theme/components/ItaliaTheme';
+import { useSlider } from 'design-comuni-plone-theme/components/ItaliaTheme/Slider/slider';
+
 import PropTypes from 'prop-types';
 import { contentFolderHasItems } from 'design-comuni-plone-theme/helpers';
 import { UniversalLink } from '@plone/volto/components';
@@ -50,6 +52,7 @@ const Gallery = ({
   reactSlick,
 }) => {
   const Slider = reactSlick.default;
+  const { SliderNextArrow, SliderPrevArrow } = useSlider();
   const Image = config.getComponent({ name: 'Image' }).component;
   const getSettings = (nItems, slideToScroll) => {
     return {
@@ -58,6 +61,8 @@ const Gallery = ({
       speed: 500,
       slidesToShow: nItems < 3 ? nItems : 3,
       slidesToScroll: slideToScroll ?? 3,
+      nextArrow: <SliderNextArrow intl={intl} />,
+      prevArrow: <SliderPrevArrow intl={intl} />,
       responsive: [
         {
           breakpoint: 1024,
@@ -154,37 +159,40 @@ const Gallery = ({
               <Slider {...getSettings(images.length)}>
                 {images.map((item, i) => (
                   <SingleSlideWrapper key={item['@id']} index={i}>
-                    <figure>
-                      <UniversalLink
-                        item={item}
-                        onClick={(e) => {
-                          e.preventDefault();
-                          e.stopPropagation();
-                          setViewImageIndex(i);
-                        }}
-                        onKeyDown={(e) => {
-                          if (e.keyCode === 13) {
+                    <div className={'slide-wrapper'} role="presentation">
+                      <figure className="img-wrapper">
+                        <UniversalLink
+                          item={item}
+                          onClick={(e) => {
                             e.preventDefault();
                             e.stopPropagation();
                             setViewImageIndex(i);
-                          }
-                        }}
-                        aria-label={`${intl.formatMessage(
-                          messages.viewPreview,
-                        )} ${item.title}`}
-                      >
-                        <Image
-                          item={item}
-                          alt={item.title}
-                          className="img-fluid"
-                          loading="lazy"
-                          sizes={`(max-width:320px) 300px, (max-width:425px) 400px, ${default_width_image}`}
-                        />
-                      </UniversalLink>
-                      <figcaption className="figure-caption mt-2">
-                        {item.title}
-                      </figcaption>
-                    </figure>
+                          }}
+                          onKeyDown={(e) => {
+                            if (e.keyCode === 13) {
+                              e.preventDefault();
+                              e.stopPropagation();
+                              setViewImageIndex(i);
+                            }
+                          }}
+                          aria-label={`${intl.formatMessage(
+                            messages.viewPreview,
+                          )} ${item.title}`}
+                          className="img-wrapper"
+                        >
+                          <Image
+                            item={item}
+                            alt={item.title}
+                            className="img-fluid"
+                            loading="lazy"
+                            sizes={`(max-width:320px) 300px, (max-width:425px) 400px, ${default_width_image}`}
+                          />
+                        </UniversalLink>
+                        <figcaption className="figure-caption mt-2">
+                          {item.title}
+                        </figcaption>
+                      </figure>
+                    </div>
                   </SingleSlideWrapper>
                 ))}
               </Slider>

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

@@ -4,7 +4,10 @@ import cx from 'classnames';
 
 import { UniversalLink } from '@plone/volto/components';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
-import { getCalendarDate } from 'design-comuni-plone-theme/helpers';
+import {
+  getCalendarDate,
+  contentHasImage,
+} from 'design-comuni-plone-theme/helpers';
 import {
   Icon,
   CardCategory,
@@ -48,23 +51,21 @@ const GenericCard = ({
     </>
   );
   const cooked_image_field = image_field || item.image_field;
-  // (item.preview_image ? 'preview_image' : 'image');
-  const image =
-    showimage &&
-    item &&
-    Image({
-      item: item,
-      imageField: cooked_image_field,
-      alt: '',
-      title: item.title,
-    });
+  const showImage = showimage && contentHasImage(item) && cooked_image_field;
 
   return item ? (
-    image ? (
+    showImage ? (
       <div className={cx('genericcard card shadow rounded mt-3')}>
         <div className="img-responsive-wrapper">
           <div className="img-responsive img-responsive-panoramic">
-            <figure className="img-wrapper">{image}</figure>
+            <figure className="img-wrapper">
+              <Image
+                item={item}
+                imageField={cooked_image_field}
+                alt={''}
+                title={item.title}
+              />
+            </figure>
           </div>
         </div>
         <div className="card-body px-4">

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 import PropTypes from 'prop-types';
 import { Callout, CalloutTitle } from 'design-react-kit';
-import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
+import Icon from 'design-comuni-plone-theme/components/ItaliaTheme/Icons/Icon';
 import { RichText } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
 
 const HelpBox = ({ text }) => {

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

@@ -8,6 +8,7 @@ import { UniversalLink } from '@plone/volto/components';
 import PropTypes from 'prop-types';
 import { flattenToAppURL } from '@plone/volto/helpers';
 import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
+import { contentHasImage } from 'design-comuni-plone-theme/helpers';
 import config from '@plone/volto/registry';
 
 const messages = defineMessages({
@@ -41,24 +42,25 @@ const LocationItem = ({
 }) => {
   const intl = useIntl();
   const Image = config.getComponent({ name: 'Image' }).component;
-  const image = Image({ item: location, sizes: '80px', loading: 'lazy' });
+  const showImage = contentHasImage(location) && location['@type'] === 'Venue';
   const address = ['street', 'city', 'zip_code']
     .map((key) => location?.[key])
     .filter(Boolean)
     .join(' - ');
 
   return location ? (
-    <div className="card card-teaser shadow mt-3 border-left-card card-big-io-comune p-4 rounded location-item">
-      {show_icon && (
-        <Icon
-          icon={'it-pin'}
-          title={intl.formatMessage(messages.icona_luoghi)}
-        />
-      )}
+    <div className="card card-teaser shadow mt-3 border-left-card card-big-io-comune pt-4 pb-4 ps-3 pe-4 rounded location-item">
       <div className="card-body">
         <div className="card-title h5 venue-card-title">
           {(location.nome_sede || location.title) && (
             <>
+              {show_icon && (
+                <Icon
+                  icon={'it-pin'}
+                  title={intl.formatMessage(messages.icona_luoghi)}
+                  className="pin-icon"
+                />
+              )}
               {location['@type'] === 'Venue' ||
               (location['@type'] === 'UnitaOrganizzativa' &&
                 show_title_link) ? (
@@ -104,7 +106,11 @@ const LocationItem = ({
           )}
         </div>
       </div>
-      {image && <div className="avatar size-xl">{image}</div>}
+      {showImage && (
+        <div className="avatar size-lg">
+          <Image item={location} sizes="80px" loading="lazy" />
+        </div>
+      )}
     </div>
   ) : (
     ''

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 [