feat: added OTHER_INFO from tprek to venue pages (#299)

Author: HeikkM

apps/sports-helsinki/src/domain/venue/venueContent/VenueContent.tsx

@@ -14,6 +14,7 @@ import {
 } from 'react-helsinki-headless-cms';
 import VenueInfo from '../venueInfo/VenueInfo';
 import VenueLocation from '../venueLocation/VenueLocation';
+import VenueOtherInfo from '../venueOtherInfo/VenueOtherInfo';
 import styles from './venueContent.module.scss';
 
 interface Props {
@@ -50,6 +51,7 @@ const VenueContent: React.FC<Props> = ({ venue, className }) => {
                 </HtmlToReact>
               </div>
             )}
+            <VenueOtherInfo venue={venue} />
             <ShareLinks title={t('venue:shareLinks.title')} />
             <VenueLocation venue={venue} />
           </div>

apps/sports-helsinki/src/domain/venue/venueContent/venueContent.module.scss

@@ -35,7 +35,7 @@
 
 .description {
   line-height: 1.5;
-
+  white-space: pre-line;
   p {
     font-size: var(--description-font-size);
     margin: 1rem 0;

apps/sports-helsinki/src/domain/venue/venueOtherInfo/VenueOtherInfo.tsx

@@ -0,0 +1,32 @@
+import { Text, useVenueTranslation } from '@events-helsinki/components';
+import type { Venue } from '@events-helsinki/components';
+import React from 'react';
+import styles from './venueOtherInfo.module.scss';
+
+const VenueOtherInfo = ({ venue: { connections } }: { venue: Venue }) => {
+  const venueOtherInfoContainer = React.useRef<HTMLDivElement | null>(null);
+  const { t } = useVenueTranslation();
+  const otherInfoConnections = connections?.filter(
+    (item) => item?.sectionType === 'OTHER_INFO'
+  );
+  if (otherInfoConnections.length > 0) {
+    return (
+      <div className={styles.venueOtherInfo} ref={venueOtherInfoContainer}>
+        <h2 className={styles.descriptionTitle}>
+          {t('venue:otherInfo.title')}
+        </h2>
+        {otherInfoConnections?.map((connection, i) => (
+          <Text
+            className={styles.description}
+            key={`contact-details-other-info${i}`}
+          >
+            {connection?.name}
+          </Text>
+        ))}
+      </div>
+    );
+  }
+  return null;
+};
+
+export default VenueOtherInfo;

apps/sports-helsinki/src/domain/venue/venueOtherInfo/venueOtherInfo.module.scss

@@ -0,0 +1,95 @@
+@import 'src/styles/breakpoints';
+
+.venueOtherInfo {
+  padding: 0;
+  font-size: var(--fontsize-body-l);
+
+  display: grid;
+  grid-template-columns: 1fr;
+
+  .contentWrapper {
+    & > div {
+      margin-bottom: var(--spacing-l);
+    }
+  }
+
+  button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: var(--spacing-s) 0;
+    color: var(--color-secondary-link);
+    outline: none !important;
+    font-weight: 600;
+    padding: 0;
+    svg g * {
+      color: var(--color-secondary-link);
+    }
+  }
+
+  button:hover {
+    text-decoration: underline;
+  }
+
+  .focusVisible {
+    &:focus {
+      outline: 2px solid var(--color-primary-black) !important;
+      outline-offset: -2px;
+    }
+  }
+}
+
+.descriptionTitle {
+  font-size: var(--fontsize-heading-m);
+  font-weight: 500;
+  margin: 2.25rem 0 1rem;
+}
+
+.buyButtonWrapper {
+  margin-top: var(--spacing-s);
+}
+
+a.link {
+  &,
+  &:visited {
+    color: var(--color-secondary-link);
+  }
+
+  svg g * {
+    color: var(--color-secondary-link);
+  }
+
+  margin: var(--spacing-xs) 0;
+  padding: 0;
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+  white-space: pre;
+  line-height: $lineheight-l;
+  font-size: $fontsize-body-l;
+  & > li:not(:last-child) {
+    margin-bottom: $spacing-s;
+  }
+}
+
+.description {
+  line-height: 1.5;
+
+  p {
+    font-size: var(--description-font-size);
+    margin: 1rem 0;
+  }
+
+  a {
+    text-decoration: underline;
+    font-size: var(--description-font-size);
+  }
+  a:hover {
+    color: var(--color-coat-of-arms-dark);
+  }
+}

packages/common-i18n/src/locales/en/venue.json

@@ -8,6 +8,9 @@
   "description": {
     "title": "Description"
   },
+  "otherInfo": {
+    "title": "Location extra info"
+  },
   "location": {
     "directionsGoogle": "Directions (Google)",
     "directionsHSL": "Directions (HSL)"

packages/common-i18n/src/locales/fi/venue.json

@@ -8,6 +8,9 @@
   "description": {
     "title": "Kuvaus"
   },
+  "otherInfo": {
+    "title": "Paikan lisätiedot"
+  },
   "location": {
     "directionsGoogle": "Reittiohjeet (Google)",
     "directionsHSL": "Reittiohjeet (HSL)"

packages/common-i18n/src/locales/sv/venue.json

@@ -8,6 +8,9 @@
   "description": {
     "title": "Beskrivning"
   },
+  "otherInfo": {
+    "title": "Plats ytterligare info"
+  },
   "location": {
     "directionsGoogle": "Rutter (Google)",
     "directionsHSL": "Rutter (HRT)"