fix: undo link modifications for locations (#707)

* fix: undo link modifications for locations * fix: OSMap component replaced with LocationMap --------- Co-authored-by: Sara Bianchi <[email protected]>
RedTurtle · Jun 18, 2024 · 44629dd · 44629dd
1 parent 23fe51a
commit 44629dd
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 15 deletions.
diff --git a/src/components/ItaliaTheme/View/Commons/LocationItem.jsx b/src/components/ItaliaTheme/View/Commons/LocationItem.jsx
@@ -64,9 +64,9 @@ const LocationItem = ({
         <h5 className="card-title">
           {(location_fo.nome_sede || location_fo.title) && (
             <>
-              {(location_fo['@type'] === 'Venue' ||
-                location_fo['@type'] === 'UnitaOrganizzativa') &&
-              show_title_link ? (
+              {location_fo['@type'] === 'Venue' ||
+              (location_fo['@type'] === 'UnitaOrganizzativa' &&
+                show_title_link) ? (
                 <UniversalLink
                   href={flattenToAppURL(location_fo['@id'])}
                   title={location_fo.title || ''}

diff --git a/src/components/ItaliaTheme/View/VenueView/VenueWhere.jsx b/src/components/ItaliaTheme/View/VenueView/VenueWhere.jsx
@@ -1,13 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { defineMessages, useIntl } from 'react-intl';
-
+import {
+  Card,
+  CardBody,
+  CardTitle,
+  CardText,
+} from 'design-react-kit/dist/design-react-kit';
+import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
 import {
   richTextHasContent,
   RichText,
   RichTextArticle,
 } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
-import { Locations } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
+import LocationsMap from 'design-comuni-plone-theme/components/ItaliaTheme/View/Commons/LocationsMap';
 
 const messages = defineMessages({
   dove: {
@@ -27,6 +33,21 @@ const messages = defineMessages({
 const VenueWhere = ({ content }) => {
   const intl = useIntl();
 
+  let location_items = [];
+  let locations = content?.sede ?? [];
+  if (
+    content?.nome_sede ||
+    content.street ||
+    content.city ||
+    content.zip_code ||
+    content.quartiere ||
+    content.circoscrizione
+  ) {
+    location_items.push(content);
+  }
+
+  location_items = [...location_items, ...locations];
+
   return (content.geolocation?.latitude && content.geolocation?.longitude) ||
     content.street ||
     content.zip_code ||
@@ -36,17 +57,42 @@ const VenueWhere = ({ content }) => {
     content.quartiere ||
     richTextHasContent(content.notes) ? (
     <RichTextArticle tag_id="dove" title={intl.formatMessage(messages.dove)}>
-      {content.geolocation?.latitude && content.geolocation?.longitude && (
-        <Locations
-          content={content}
-          locations={content.sede ?? []}
-          show_icon={true}
-          load={true}
-          show_title_link={false}
-          details_link={false}
-        />
-      )}
+      <Card className="card card-teaser shadow mt-3 rounded mb-4">
+        <Icon icon={'it-pin'} />
+        <CardBody>
+          <CardTitle>
+            <h5 className="card-title">{content.title}</h5>
+          </CardTitle>
+          <CardText>
+            <p>
+              {[content.street, content.city]
+                .filter((v) => v !== null)
+                .join(' - ')}
+              {(content.street || content.city) &&
+                (content.zip_code || content.country) && <br />}
 
+              {[content.zip_code, content.country?.title]
+                .filter((v) => v !== null)
+                .join(' - ')}
+            </p>
+          </CardText>
+        </CardBody>
+      </Card>
+      <LocationsMap center={content} locations={locations} />
+      {content.circoscrizione && (
+        <div className="circoscrizione">
+          <h5 className="mt-3">
+            {intl.formatMessage(messages.circoscrizione)}:
+          </h5>
+          <div className="text-serif">{content.circoscrizione}</div>
+        </div>
+      )}
+      {content.quartiere && (
+        <div className="quartiere">
+          <h5 className="mt-3">{intl.formatMessage(messages.quartiere)}:</h5>
+          <div className="text-serif">{content.quartiere}</div>
+        </div>
+      )}
       {richTextHasContent(content.notes) && (
         <div className="mt-5">
           <RichText content={content.notes} />