design-comuni-plone-theme 8.0.0-alpha.37

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

@@ -0,0 +1,68 @@
+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';
+
+const ContactsCard = ({ contact = {}, show_title = false, ...rest }) => {
+  const dispatch = useDispatch();
+
+  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
+      noWrapper
+      className="shadow rounded my-3 pt-0 contacts-card"
+      {...rest}
+    >
+      {show_title && <Icon icon="it-telephone" />}
+      <CardBody>
+        <CardTitle className="h5">
+          {show_title && (
+            <UniversalLink href={contactUrl} className="text-decoration-none">
+              {contact.title}
+            </UniversalLink>
+          )}
+        </CardTitle>
+        <CardText>
+          {data?.value_punto_contatto.map((pdc, index) => (
+            <span key={index}>
+              <strong>{pdc.pdc_type}: </strong>
+              {renderPDCItemValue(pdc)}
+            </span>
+          )) ?? null}
+        </CardText>
+      </CardBody>
+    </Card>
+  );
+};
+
+export default ContactsCard;

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { WideImage } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
+import config from '@plone/volto/registry';
+
+/**
+ * ContentImage view component class.
+ * @function ContentImage
+ * @params {object} content: Content object.
+ * @returns {string} Markup of the component.
+ */
+const ContentImage = ({ content, position }) => {
+  const view =
+    (content?.image || content?.image_caption || content?.foto_persona) &&
+    config.settings.italiaThemeViewsConfig.imagePosition === position;
+
+  return view ? (
+    <div className="content-image">
+      <WideImage
+        title={content.title}
+        image={content.image || content.foto_persona}
+        caption={content.image_caption}
+        fullWidth={
+          config.settings.italiaThemeViewsConfig.imagePosition === 'afterHeader'
+        }
+      />
+    </div>
+  ) : null;
+};
+export default ContentImage;
+
+ContentImage.propTypes = {
+  content: PropTypes.shape({
+    title: PropTypes.string.isRequired,
+    image: PropTypes.object,
+    image_caption: PropTypes.string,
+  }),
+  position: PropTypes.string,
+};

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

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import config from '@plone/volto/registry';
+
+const ContentTypeViewSections = ({ content, defaultSections }) => {
+  if (!content) {
+    return <></>;
+  }
+
+  const sections =
+    config.settings?.italiaThemeViewsConfig?.[content['@type']]?.sections ??
+    defaultSections;
+
+  return sections?.length > 0 ? (
+    sections.map((section, i) => (
+      <section.component
+        content={content}
+        {...section.props}
+        key={`${content['@id']}-section-${i}`}
+      />
+    ))
+  ) : (
+    <></>
+  );
+};
+
+export default ContentTypeViewSections;

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

@@ -0,0 +1,101 @@
+import { defineMessages, useIntl } from 'react-intl';
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Chip, ChipLabel } from 'design-react-kit';
+import { Link } from 'react-router-dom';
+import { flattenToAppURL } from '@plone/volto/helpers';
+import {
+  OfficeCard,
+  RichTextSection,
+} from 'design-comuni-plone-theme/components/ItaliaTheme/View';
+
+const messages = defineMessages({
+  cured_by: {
+    id: 'cured_by',
+    defaultMessage: 'A cura di',
+  },
+  page_cured_by: {
+    id: 'page_cured_by',
+    defaultMessage: 'Questa pagina è gestita da',
+  },
+  cured_by_people: {
+    id: 'cured_by_people',
+    defaultMessage: 'Persone',
+  },
+});
+
+/**
+ * CuredBy view component class.
+ * @function CuredBy
+ * @params {object} content: Content object.
+ * @params {string} office_field: field where office is related
+ * @params {string} office_field: field where people is related
+ * @returns {string} Markup of the component.
+ */
+const CuredBy = ({ office, people, title }) => {
+  const intl = useIntl();
+  return (
+    <RichTextSection
+      tag_id="a-cura-di"
+      title={intl.formatMessage(messages.cured_by)}
+      className="it-page-section anchor-offset mt-5"
+    >
+      <div className="row">
+        {office && (
+          <div className="col-12 col-sm-8">
+            <h5>
+              <small>{intl.formatMessage(messages.page_cured_by)}</small>
+            </h5>
+            <OfficeCard office={office} />
+          </div>
+        )}
+        {people?.length > 0 ? (
+          <div className={`col-12 ${office && 'col-sm-4'}`}>
+            {office && (
+              <h5>
+                <small>{intl.formatMessage(messages.cured_by_people)}</small>
+              </h5>
+            )}
+            {people.map((item, i) => (
+              <Link
+                to={flattenToAppURL(item['@id'])}
+                key={item['@id']}
+                className="text-decoration-none me-2"
+              >
+                <Chip
+                  color="primary"
+                  disabled={false}
+                  large={false}
+                  simple
+                  tag="div"
+                >
+                  <ChipLabel tag="span">{item.title}</ChipLabel>
+                </Chip>
+              </Link>
+            ))}
+          </div>
+        ) : null}
+      </div>
+    </RichTextSection>
+  );
+};
+export default CuredBy;
+
+CuredBy.propTypes = {
+  office: PropTypes.shape({
+    '@id': PropTypes.string,
+    '@type': PropTypes.string,
+    title: PropTypes.string,
+    description: PropTypes.string,
+    review_state: PropTypes.string,
+  }),
+  people: PropTypes.arrayOf(
+    PropTypes.shape({
+      '@id': PropTypes.string,
+      '@type': PropTypes.string,
+      title: PropTypes.string,
+      description: PropTypes.string,
+      review_state: PropTypes.string,
+    }),
+  ),
+};

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

@@ -0,0 +1,159 @@
+import { defineMessages, useIntl } from 'react-intl';
+import React from 'react';
+import { rrulei18n } from '@plone/volto/components/manage/Widgets/RecurrenceWidget/Utils';
+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';
+
+const messages = defineMessages({
+  start: {
+    id: 'start',
+    defaultMessage: 'Inizio evento',
+  },
+  end: {
+    id: 'end',
+    defaultMessage: 'Fine evento',
+  },
+  open_end: {
+    id: 'open_end',
+    defaultMessage: 'Questo evento ha una data di fine aperta/variabile.',
+  },
+  whole_day: {
+    id: 'whole_day',
+    defaultMessage: 'Questo evento ha luogo per tutta la giornata.',
+  },
+  additional_dates: {
+    id: 'Date aggiuntive',
+    defaultMessage: 'Date aggiuntive',
+  },
+  excluded_dates: {
+    id: "L'evento non si terrà nelle seguenti date",
+    defaultMessage: "L'evento non si terrà nelle seguenti date",
+  },
+});
+
+/**
+ * Dates view component class.
+ * @function Dates
+ * @params {object} Dates: object.
+ * @returns {string} Markup of the component.
+ */
+const Dates = ({ content, show_image, moment: momentlib, rrule }) => {
+  const intl = useIntl();
+  const moment = momentlib.default;
+  moment.locale(intl.locale);
+
+  const rrulestr = rrule.rrulestr;
+
+  let rruleSet = null;
+  let recurrenceText = null;
+
+  if (content.recurrence) {
+    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) => {
+        return RRULE_LANGUAGE.strings[t];
+      },
+      RRULE_LANGUAGE,
+      RRULE_LANGUAGE.dateFormatter,
+    );
+  }
+  const start = viewDate(intl.locale, content.start);
+  const end = viewDate(intl.locale, content.end);
+  const openEnd = content?.open_end;
+  const wholeDay = content?.whole_day;
+
+  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">
+              {start.format('DD')}
+            </span>
+            <span className="point-month">{start.format('MMMM')}</span>
+          </div>
+          <div className="point-list-content">
+            <Card
+              className="card card-teaser rounded shadow"
+              noWrapper={true}
+              tag="div"
+            >
+              <CardBody tag="div" className={'card-body'}>
+                <CardTitle tag="p">
+                  {!wholeDay && `${start.format('HH:mm')} - `}
+                  {intl.formatMessage(messages.start)}
+                </CardTitle>
+                {openEnd && (
+                  <p>
+                    <i>{intl.formatMessage(messages.open_end)}</i>
+                  </p>
+                )}
+              </CardBody>
+            </Card>
+          </div>
+        </div>
+        {!openEnd && (
+          <div className="point-list">
+            <div className="point-list-aside point-list-warning">
+              <span className="point-date text-monospace">
+                {end.format('DD')}
+              </span>
+              <span className="point-month">{end.format('MMMM')}</span>
+            </div>
+            <div className="point-list-content">
+              <Card
+                className="card card-teaser rounded shadow"
+                noWrapper={true}
+                tag="div"
+              >
+                <CardBody tag="div" className={'card-body'}>
+                  <CardTitle tag="p">
+                    {!content.whole_day && `${end.format('HH:mm')} - `}
+                    {intl.formatMessage(messages.end)}
+                  </CardTitle>
+                </CardBody>
+              </Card>
+            </div>
+          </div>
+        )}
+      </div>
+      {recurrenceText && (
+        <div className="mt-4 mb-5 font-serif">
+          <strong>{recurrenceText}</strong>
+        </div>
+      )}
+      {rruleSet?.rdates().length > 0 && (
+        <div className="mt-4">
+          <h5>{intl.formatMessage(messages.additional_dates)}</h5>
+          {rruleSet.rdates().map((additionalDate) => (
+            <div className="font-serif">
+              {viewDate(intl.locale, additionalDate, 'dddd DD MMMM YYYY')}
+            </div>
+          ))}
+        </div>
+      )}
+      {rruleSet?.exdates().length > 0 && (
+        <div className="mt-4">
+          <h5>{intl.formatMessage(messages.excluded_dates)}</h5>
+          {rruleSet.exdates().map((exDate) => (
+            <div className="font-serif">
+              {viewDate(intl.locale, exDate, 'dddd DD MMMM YYYY')}
+            </div>
+          ))}
+        </div>
+      )}
+    </>
+  ) : null;
+};
+
+export default injectLazyLibs(['moment', 'rrule'])(Dates);
+
+Dates.propTypes = {
+  content: PropTypes.object.isRequired,
+};

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

@@ -0,0 +1,81 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { flattenToAppURL } from '@plone/volto/helpers';
+import { FontAwesomeIcon as IconFA } from 'design-comuni-plone-theme/components/ItaliaTheme';
+import { defineMessages, useIntl } from 'react-intl';
+import { Icon } from '@plone/volto/components';
+import { getFileViewFormat } from 'design-comuni-plone-theme/helpers';
+
+const messages = defineMessages({
+  download_in_format: {
+    id: 'modulo_download_in_format',
+    defaultMessage: 'Scarica in formato',
+  },
+  download_file: {
+    id: 'modulo_download_file',
+    defaultMessage: 'Scarica il file',
+  },
+});
+
+const DownloadFileFormat = ({
+  file,
+  formatsize = '2x',
+  className,
+  showLabel = false,
+}) => {
+  const intl = useIntl();
+  const defaultIcon = { lib: 'far', name: 'file', svg_format: false };
+  let label = intl.formatMessage(messages.download_file);
+  let icon = null;
+
+  if (file) {
+    const viewFormat = getFileViewFormat(file);
+
+    label = viewFormat?.label
+      ? `${intl.formatMessage(messages.download_in_format)} ${
+          viewFormat?.label
+        }`
+      : intl.formatMessage(messages.download_file);
+
+    icon = viewFormat?.icon ?? defaultIcon;
+  }
+  const pdfFile = file?.download?.includes('@@display-file');
+
+  return file ? (
+    <a
+      href={flattenToAppURL(file.download)}
+      title={file.filename}
+      className={className}
+      target={pdfFile ? '_blank' : '_self'}
+    >
+      {!icon.svg_format ? (
+        <IconFA
+          icon={[icon.lib, icon.name]}
+          alt={file.filename}
+          title={file.filename}
+          size={formatsize}
+        />
+      ) : (
+        <Icon className="icon-svg-custom" name={icon.name} />
+      )}
+      {showLabel && <span className="ms-4">{label}</span>}
+    </a>
+  ) : null;
+};
+
+/**
+ * Property types.
+ * @property {Object} propTypes Property types.
+ * @static
+ */
+DownloadFileFormat.propTypes = {
+  file: PropTypes.shape({
+    'content-type': PropTypes.string,
+    download: PropTypes.string,
+    filename: PropTypes.string,
+    size: PropTypes.number,
+  }),
+};
+
+export default DownloadFileFormat;

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

@@ -0,0 +1,78 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ConditionalEmbed } from 'volto-gdpr-privacy';
+import { Embed } from 'semantic-ui-react';
+import { FontAwesomeIcon } from 'design-comuni-plone-theme/components/ItaliaTheme';
+import { useIntl, defineMessages } from 'react-intl';
+
+const messages = defineMessages({
+  loadVideo: {
+    id: 'loadVideo',
+    defaultMessage:
+      'Premi Invio per caricare il video, poi premi Tab per navigare sul video.',
+  },
+});
+
+const EmbeddedVideo = ({ video_url, title, id }) => {
+  const intl = useIntl();
+  /* Needed to fix error:
+    "Refused to display 'https://www.youtube.com/watch?v=ID&feature=youtu.be'
+    in a frame because it set 'X-Frame-Options' to 'sameorigin'."
+
+    It seems youtube /watch endpoint refuses this format for embedded videos.
+    Need to reformat url to /embed endpoint
+  */
+  const video_id = video_url.match(/.be\//)
+    ? video_url.match(/^.*\.be\/(.*)/)?.[1]
+    : video_url.match(/^.*\?v=(.*)$/)?.[1];
+
+  const ref = React.createRef();
+  const onKeyDown = (e) => {
+    if (e.nativeEvent.keyCode === 13) {
+      //Enter
+      ref.current.handleClick();
+    }
+  };
+
+  const embedSettings = {
+    icon: (
+      <div
+        className="icon-play"
+        role="button"
+        tabIndex={0}
+        title="Download and Play video"
+      >
+        <FontAwesomeIcon icon={['fas', 'play']} />
+      </div>
+    ),
+    defaultActive: false,
+    autoplay: false,
+    aspectRatio: '16:9',
+    placeholder: 'https://img.youtube.com/vi/' + video_id + '/sddefault.jpg',
+    tabIndex: 0,
+    onKeyPress: onKeyDown,
+    ref: ref,
+    'aria-label': intl.formatMessage(messages.loadVideo),
+  };
+
+  return video_url ? (
+    <div key={id} className="embedded-video my4" id={`embedded-video-${id}`}>
+      <ConditionalEmbed url={video_url} key={'embedvideo' + id}>
+        <Embed
+          id={video_id}
+          title={title || `YouTube Video ${id}`}
+          source="youtube"
+          {...embedSettings}
+        />
+      </ConditionalEmbed>
+    </div>
+  ) : null;
+};
+
+EmbeddedVideo.propTypes = {
+  video_url: PropTypes.string.isRequired,
+  title: PropTypes.string,
+  id: PropTypes.any,
+};
+
+export default EmbeddedVideo;

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

@@ -0,0 +1,130 @@
+import PropTypes from 'prop-types';
+import { defineMessages, useIntl } from 'react-intl';
+import {
+  Card,
+  CardBody,
+  CardReadMore,
+  CardText,
+  CardTitle,
+} from 'design-react-kit';
+
+import { UniversalLink } from '@plone/volto/components';
+import { flattenToAppURL } from '@plone/volto/helpers';
+
+import Image from '@plone/volto/components/theme/Image/Image';
+import { viewDate } from 'design-comuni-plone-theme/helpers';
+
+const messages = defineMessages({
+  events: {
+    id: 'events',
+    defaultMessage: 'Appuntamenti',
+  },
+  events_read_more: {
+    id: 'events_read_more',
+    defaultMessage: 'Leggi di più',
+  },
+});
+
+/**
+ * Evento view component class.
+ * @function Evento
+ * @params {object} Evento: object.
+ * @returns {string} Markup of the component.
+ */
+const Evento = ({ event, show_image }) => {
+  const intl = useIntl();
+
+  return event ? (
+    <div className="card-wrapper card-teaser">
+      <Card noWrapper className="card-img no-after">
+        {show_image &&
+          (event.image_field || event.preview_image || event.image) && (
+            <div className="img-responsive-wrapper">
+              <div className="img-responsive">
+                <Image
+                  itemUrl={event.image_field ? event['@id'] : undefined}
+                  image={
+                    event.image_scales?.[event.image_field]?.[0] ||
+                    event.preview_image ||
+                    event.image ||
+                    event['@id']
+                  }
+                  alt="Immagine"
+                  containerClassName="img-wrapper"
+                />
+                {event.start && (
+                  <div className="card-calendar d-flex flex-column justify-content-center">
+                    {viewDate(intl.locale, event.start, 'DD MMM')}
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+        <CardBody>
+          <CardTitle tag="h5" className="card-title-icon">
+            <UniversalLink
+              href={flattenToAppURL(event['@id'])}
+              title={event.title}
+              className="text-decoration-none"
+            >
+              <h6 className="fw-semibold">{event.title}</h6>
+            </UniversalLink>
+          </CardTitle>
+          <CardText></CardText>
+          <CardReadMore
+            iconName="it-arrow-right"
+            tag={UniversalLink}
+            text={intl.formatMessage(messages.events_read_more)}
+            href={flattenToAppURL(event['@id'])}
+          />
+        </CardBody>
+      </Card>
+    </div>
+  ) : null;
+};
+
+/**
+ * Events view component class.
+ * @function Events
+ * @params {object} content: Eventi object.
+ * @returns {string} Markup of the component.
+ */
+const Events = ({ content, title, show_image, folder_name, isChild }) => {
+  const intl = useIntl();
+
+  const events = isChild
+    ? content?.parent
+      ? [content.parent]
+      : []
+    : content?.items?.filter((el) => el['@type'] === 'Event') || [];
+
+  return events.length > 0 ? (
+    <article id="appuntamenti" className="it-page-section anchor-offset mt-5">
+      {title ? (
+        <h4 id="header-appuntamenti">{title}</h4>
+      ) : (
+        <h4 id="header-appuntamenti">{intl.formatMessage(messages.events)}</h4>
+      )}
+      <div className="card-wrapper card-teaser-wrapper card-teaser-wrapper-equal">
+        {events.map((item, i) => (
+          <Evento key={item['@id']} event={item} show_image={show_image} />
+        ))}
+      </div>
+    </article>
+  ) : null;
+};
+
+export default Events;
+
+Events.propTypes = {
+  content: PropTypes.object,
+  show_image: PropTypes.bool,
+  isChild: PropTypes.bool,
+  title: PropTypes.string,
+  folder_name: PropTypes.string,
+};
+
+Evento.propTypes = {
+  event: PropTypes.object,
+  show_image: PropTypes.bool,
+};