Merged in feat/SW-1234-hotel-subpages (pull request #1387)

Feat(SW-1234): Prettify hotel subpages

Approved-by: Erik Tiekstra
Approved-by: Fredrik Thorsson

components/ContentType/HotelSubpage/HtmlContent/htmlContent.module.css

@@ -1,2 +1,32 @@
-.htmlContent {
+.ul,
+.ol {
+  padding: var(--Spacing-x2) var(--Spacing-x0);
+  display: grid;
+  gap: var(--Spacing-x1);
+  margin-left: var(--Spacing-x2);
+}
+
+.ol > li::marker {
+  color: var(--Primary-Light-On-Surface-Accent);
+}
+
+.li {
+  margin-left: var(--Spacing-x3);
+}
+
+.li > p {
+  display: inline;
+}
+
+@media screen and (min-width: 768px) {
+  .ol:has(li:nth-last-child(n + 5)),
+  .ul:has(li:nth-last-child(n + 5)) {
+    grid-template-columns: 1fr 1fr;
+    grid-auto-flow: column;
+  }
+}
+
+.tableContainer {
+  max-width: 100%;
+  overflow-x: auto;
 }

components/ContentType/HotelSubpage/HtmlContent/index.tsx

@@ -1,16 +1,156 @@
+import { ElementType } from "domelementtype"
+import parse, { type DOMNode, Element, type Text } from "html-react-parser"
+
+import Link from "@/components/TempDesignSystem/Link"
+import Table from "@/components/TempDesignSystem/Table"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Title from "@/components/TempDesignSystem/Text/Title"
+
+import { NodeNames } from "./utils"
+
 import styles from "./htmlContent.module.css"
 
+type Node = Element | Text
+
 interface HtmlContentProps {
   html: string
 }
 
 export default function HtmlContent({ html }: HtmlContentProps) {
-  return (
+  const cleanedHtml = html.replace("<p></p>\n", "")
-    <div
+  const parsedContent = parse(cleanedHtml, {
-      className={styles.htmlContent}
+    replace: (domNode: DOMNode) => {
-      dangerouslySetInnerHTML={{
+      if (domNode instanceof Element) {
-        __html: html,
+        return renderNode(domNode)
-      }}
+      } else {
-    />
+        if (domNode.data === "\n") {
-  )
+          return <br />
+        }
+      }
+    },
+  })
+  return <div>{parsedContent}</div>
+}
+
+function renderChildren(node: Element) {
+  return node.children?.map((child) => renderNode(child as Element))
+}
+
+function renderNode(domNode: Node) {
+  if (domNode.type === ElementType.Tag) {
+    switch (domNode.name) {
+      case NodeNames.h1:
+      case NodeNames.h2:
+      case NodeNames.h3:
+      case NodeNames.h4:
+      case NodeNames.h5:
+        return <Title level={domNode.name}>{renderChildren(domNode)}</Title>
+
+      case NodeNames.br:
+        return <br />
+
+      case NodeNames.a:
+        console.log(domNode.attribs.target)
+        return (
+          <Link
+            color="peach80"
+            textDecoration="underline"
+            weight="bold"
+            target="_blank" //Always open in new tab
+            href={domNode.attribs.href}
+          >
+            {renderChildren(domNode)}
+          </Link>
+        )
+
+      case NodeNames.ul:
+        let numberOfRows: number | undefined
+        if (domNode.children.length > 4) {
+          const half = domNode.children.length / 2
+          numberOfRows = Math.ceil(half)
+        }
+        return (
+          <ul
+            className={styles.ul}
+            style={
+              numberOfRows
+                ? {
+                    gridTemplateRows: `repeat(${numberOfRows}, auto)`,
+                  }
+                : {}
+            }
+          >
+            {renderChildren(domNode)}
+          </ul>
+        )
+
+      case NodeNames.ol:
+        let numberOfOlRows: number | undefined
+        if (domNode.children.length > 4) {
+          const half = domNode.children.length / 2
+          numberOfOlRows = Math.ceil(half)
+        }
+        return (
+          <ol
+            className={styles.ol}
+            style={
+              numberOfOlRows
+                ? {
+                    gridTemplateRows: `repeat(${numberOfOlRows}, auto)`,
+                  }
+                : {}
+            }
+          >
+            {renderChildren(domNode)}
+          </ol>
+        )
+
+      case NodeNames.li:
+        return <li>{renderChildren(domNode)}</li>
+
+      case NodeNames.td:
+        return <Table.TD>{renderChildren(domNode)}</Table.TD>
+
+      case NodeNames.th:
+        return (
+          <Table.TH>
+            <Body color={"burgundy"} textTransform={"bold"}>
+              {renderChildren(domNode)}
+            </Body>
+          </Table.TH>
+        )
+
+      case NodeNames.tr:
+        return <Table.TR>{renderChildren(domNode)}</Table.TR>
+
+      case NodeNames.tbody:
+        return <Table.TBody>{renderChildren(domNode)}</Table.TBody>
+
+      case NodeNames.table:
+        return (
+          <div className={styles.tableContainer}>
+            <Table>{renderChildren(domNode)}</Table>
+          </div>
+        )
+
+      case NodeNames.p:
+        return (
+          domNode.children.length !== 0 && (
+            <Body>{renderChildren(domNode)}</Body>
+          )
+        )
+
+      case NodeNames.em:
+        return <em>{renderChildren(domNode)}</em>
+
+      case NodeNames.strong:
+        return <strong>{renderChildren(domNode)}</strong>
+
+      case NodeNames.span:
+        return <span>{renderChildren(domNode)}</span>
+    }
+  } else if (domNode.type === ElementType.Text) {
+    return domNode.data
+  }
+  return null
 }

components/ContentType/HotelSubpage/HtmlContent/utils.ts

@@ -0,0 +1,22 @@
+export enum NodeNames {
+  a = "a",
+  h1 = "h1",
+  h2 = "h2",
+  h3 = "h3",
+  h4 = "h4",
+  h5 = "h5",
+  li = "li",
+  ol = "ol",
+  p = "p",
+  table = "table",
+  tbody = "tbody",
+  td = "td",
+  text = "text",
+  th = "th",
+  tr = "tr",
+  ul = "ul",
+  em = "em",
+  strong = "strong",
+  br = "br",
+  span = "span",
+}

components/ContentType/HotelSubpage/Sidebar/MeetingsSidebar.tsx

@@ -26,13 +26,7 @@ export default async function MeetingsSidebar({
         {intl.formatMessage({ id: "Contact us" })}
       </Title>
       <div>
-        <Link
+        <Link href={`tel:${phoneNumber}`}>{phoneNumber}</Link>
-          href={`tel:${phoneNumber}`}
-          color="peach80"
-          textDecoration="underline"
-        >
-          {phoneNumber}
-        </Link>
         {country === Country.Finland ? (
           <Body>
             {intl.formatMessage({
@@ -40,7 +34,11 @@ export default async function MeetingsSidebar({
             })}
           </Body>
         ) : null}
-        <Body>{email} </Body>
+        {email && (
+          <Link textDecoration="underline" href={`mailto:${email}`}>
+            {email}
+          </Link>
+        )}
       </div>
     </aside>
   )

components/ContentType/HotelSubpage/Sidebar/ParkingSidebar.tsx

@@ -40,11 +40,7 @@ export default async function ParkingSidebar({ hotel }: HotelSidebarProps) {
       <Title level="h3" as="h4">
         {intl.formatMessage({ id: "Contact us" })}
       </Title>
-      <Link
+      <Link href={`tel:${hotel.contactInformation.phoneNumber}`}>
-        href={`tel:${hotel.contactInformation.phoneNumber}`}
-        color="peach80"
-        textDecoration="underline"
-      >
         {hotel.contactInformation.phoneNumber}
       </Link>
 

components/ContentType/HotelSubpage/Sidebar/RestaurantSidebar/RestaurantSidebar.tsx

@@ -26,46 +26,50 @@ export default async function RestaurantSidebar({
 
   return (
     <aside className={styles.sidebar}>
-      <div className={styles.content}>
+      {openingDetails.length ? (
-        <Title level="h3" as="h4">
+        <div className={styles.content}>
-          {intl.formatMessage({ id: "Opening hours" })}
+          <Title level="h3" as="h4">
-        </Title>
+            {intl.formatMessage({ id: "Opening hours" })}
-        {openingDetails.map((details) => (
+          </Title>
-          <OpeningHours
+          {openingDetails.map((details) => (
-            key={details.openingHours.name}
+            <OpeningHours
-            openingHours={details.openingHours}
+              key={details.openingHours.name}
-            alternateOpeningHours={details.alternateOpeningHours}
+              openingHours={details.openingHours}
-            heading={details.openingHours.name}
+              alternateOpeningHours={details.alternateOpeningHours}
-          />
+              heading={details.openingHours.name}
-        ))}
+            />
-      </div>
+          ))}
+        </div>
+      ) : null}
       {bookTableUrl && (
         <Button intent="primary" theme="base" asChild>
-          <Link href={bookTableUrl}>
+          <a href={bookTableUrl}>
             {intl.formatMessage({ id: "Book a table online" })}
-          </Link>
+          </a>
         </Button>
       )}
-      <div className={styles.content}>
+      {restaurant.menus.length ? (
-        <Title level="h3" as="h4">
+        <div className={styles.content}>
-          {intl.formatMessage({ id: "Menus" })}
+          <Title level="h3" as="h4">
-        </Title>
+            {intl.formatMessage({ id: "Menus" })}
-        <ul className={styles.menuList}>
+          </Title>
-          {restaurant.menus.map(({ name, url }) => (
+          <ul className={styles.menuList}>
-            <li key={name}>
+            {restaurant.menus.map(({ name, url }) => (
-              <Link
+              <li key={name}>
-                href={url}
+                <Link
-                color="baseTextMediumContrast"
+                  href={url}
-                textDecoration="underline"
+                  color="baseTextMediumContrast"
-                variant="icon"
+                  textDecoration="underline"
-              >
+                  variant="icon"
-                {name}
+                >
-                <OpenInNewSmallIcon />
+                  {name}
-              </Link>
+                  <OpenInNewSmallIcon />
-            </li>
+                </Link>
-          ))}
+              </li>
-        </ul>
+            ))}
-      </div>
+          </ul>
+        </div>
+      ) : null}
       <div className={styles.content}>
         <Title level="h3" as="h4">
           {intl.formatMessage({ id: "Address" })}
@@ -82,9 +86,13 @@ export default async function RestaurantSidebar({
           </Title>
           <div>
             {phoneNumber && (
-              <Body color="uiTextHighContrast">{phoneNumber}</Body>
+              <Link href={`tel:${phoneNumber}`}>{phoneNumber}</Link>
+            )}
+            {email && (
+              <Link textDecoration="underline" href={`mailto:${email}`}>
+                {email}
+              </Link>
             )}
-            {email && <Body color="uiTextHighContrast">{email}</Body>}
           </div>
         </div>
       )}

components/ContentType/HotelSubpage/Sidebar/WellnessSidebar.tsx

@@ -69,11 +69,7 @@ export default async function WellnessSidebar({ hotel }: WellnessSidebarProps) {
       <Title level="h3" as="h4">
         {intl.formatMessage({ id: "Contact us" })}
       </Title>
-      <Link
+      <Link href={`tel:${hotel.contactInformation.phoneNumber}`}>
-        href={`tel:${hotel.contactInformation.phoneNumber}`}
-        color="peach80"
-        textDecoration="underline"
-      >
         {hotel.contactInformation.phoneNumber}
       </Link>
     </aside>

components/ContentType/HotelSubpage/hotelSubpage.module.css

@@ -13,6 +13,8 @@
   width: 100%;
   max-width: var(--max-width-content);
   margin: 0 auto;
+  display: grid;
+  gap: var(--Spacing-x4);
 }
 
 .contentContainer {
@@ -41,6 +43,12 @@
   grid-column: 1;
 }
 
+.meetingBookingWidget {
+  padding: var(--Spacing-x4);
+  background-color: var(--Base-Surface-Primary-dark-Normal);
+  text-align: center;
+}
+
 @media (min-width: 1367px) {
   .contentContainer {
     grid-template-columns: var(--max-width-text-block) 1fr;

components/ContentType/HotelSubpage/index.tsx

@@ -56,6 +56,12 @@ export default async function HotelSubpage({
     meetingRooms = await getMeetingRooms({ hotelId: hotelId, language: lang })
   }
 
+  const meetingBookingWidget = meetingRooms ? (
+    <div className={styles.meetingBookingWidget}>
+      Booking Widget Placeholder
+    </div>
+  ) : null
+
   return (
     <>
       <section className={styles.hotelSubpage}>
@@ -66,11 +72,18 @@ export default async function HotelSubpage({
               subpageTitle={pageData.heading}
             />
           </Suspense>
-          {pageData.heroImage && (
+
+          {pageData.heroImage || meetingBookingWidget ? (
             <div className={styles.heroWrapper}>
-              <Hero src={pageData.heroImage.src} alt={pageData.heroImage.alt} />
+              {meetingBookingWidget}
+              {pageData.heroImage && (
+                <Hero
+                  src={pageData.heroImage.src}
+                  alt={pageData.heroImage.alt}
+                />
+              )}
             </div>
-          )}
+          ) : null}
         </div>
 
         <div className={styles.contentContainer}>

package-lock.json

@@ -50,6 +50,7 @@
         "graphql": "^16.8.1",
         "graphql-request": "^6.1.0",
         "graphql-tag": "^2.12.6",
+        "html-react-parser": "^5.2.2",
         "ics": "^3.8.1",
         "immer": "10.1.1",
         "input-otp": "^1.4.2",
@@ -11958,11 +11959,11 @@
       }
     },
     "node_modules/domutils": {
-      "version": "3.1.0",
+      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.2.2.tgz",
-      "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==",
+      "integrity": "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==",
-      "dev": true,
       "license": "BSD-2-Clause",
+      "dev":true,
       "dependencies": {
         "dom-serializer": "^2.0.0",
         "domelementtype": "^2.3.0",
@@ -14054,6 +14055,16 @@
         "react-is": "^16.7.0"
       }
     },
+    "node_modules/html-dom-parser": {
+      "version": "5.0.13",
+      "resolved": "https://registry.npmjs.org/html-dom-parser/-/html-dom-parser-5.0.13.tgz",
+      "integrity": "sha512-B7JonBuAfG32I7fDouUQEogBrz3jK9gAuN1r1AaXpED6dIhtg/JwiSRhjGL7aOJwRz3HU4efowCjQBaoXiREqg==",
+      "license": "MIT",
+      "dependencies": {
+        "domhandler": "5.0.3",
+        "htmlparser2": "10.0.0"
+      }
+    },
     "node_modules/html-encoding-sniffer": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz",
@@ -14072,6 +14083,58 @@
       "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==",
       "dev": true
     },
+    "node_modules/html-react-parser": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/html-react-parser/-/html-react-parser-5.2.2.tgz",
+      "integrity": "sha512-yA5012CJGSFWYZsgYzfr6HXJgDap38/AEP4ra8Cw+WHIi2ZRDXRX/QVYdumRf1P8zKyScKd6YOrWYvVEiPfGKg==",
+      "license": "MIT",
+      "dependencies": {
+        "domhandler": "5.0.3",
+        "html-dom-parser": "5.0.13",
+        "react-property": "2.0.2",
+        "style-to-js": "1.1.16"
+      },
+      "peerDependencies": {
+        "@types/react": "0.14 || 15 || 16 || 17 || 18 || 19",
+        "react": "0.14 || 15 || 16 || 17 || 18 || 19"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/htmlparser2": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-10.0.0.tgz",
+      "integrity": "sha512-TwAZM+zE5Tq3lrEHvOlvwgj1XLWQCtaaibSN11Q+gGBAS7Y1uZSWwXXRe4iF6OXnaq1riyQAPFOBtYc77Mxq0g==",
+      "funding": [
+        "https://github.com/fb55/htmlparser2?sponsor=1",
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.2.1",
+        "entities": "^6.0.0"
+      }
+    },
+    "node_modules/htmlparser2/node_modules/entities": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.0.tgz",
+      "integrity": "sha512-aKstq2TDOndCn4diEyp9Uq/Flu2i1GlLkc6XIDQSDMuaFE3OPW5OphLCyQ5SpSJZTb4reN+kTcYru5yIfXoRPw==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
     "node_modules/http-assert": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/http-assert/-/http-assert-1.5.0.tgz",
@@ -14386,6 +14449,12 @@
         "node": ">=10"
       }
     },
+    "node_modules/inline-style-parser": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.2.4.tgz",
+      "integrity": "sha512-0aO8FkhNZlj/ZIbNi7Lxxr12obT7cL1moPfE4tg1LkX7LlLfC6DeX4l2ZEud1ukP9jNQyNnfzQVqwbwmAATY4Q==",
+      "license": "MIT"
+    },
     "node_modules/input-otp": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/input-otp/-/input-otp-1.4.2.tgz",
@@ -19891,6 +19960,12 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "node_modules/react-property": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/react-property/-/react-property-2.0.2.tgz",
+      "integrity": "sha512-+PbtI3VuDV0l6CleQMsx2gtK0JZbZKbpdu5ynr+lbsuvtmgbNcS3VM0tuY2QjFNOcWxvXeHjDpy42RO+4U2rug==",
+      "license": "MIT"
+    },
     "node_modules/react-remove-scroll": {
       "version": "2.5.7",
       "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.7.tgz",
@@ -21449,6 +21524,24 @@
       "integrity": "sha512-H2N9c26eXjzL/S/K+i/RHHcFanE74dptvvjM8iwzwbVcWY/zjBbgRqF3K0DY4+OD+uTTASTBvDoxPDaPN02D7g==",
       "dev": true
     },
+    "node_modules/style-to-js": {
+      "version": "1.1.16",
+      "resolved": "https://registry.npmjs.org/style-to-js/-/style-to-js-1.1.16.tgz",
+      "integrity": "sha512-/Q6ld50hKYPH3d/r6nr117TZkHR0w0kGGIVfpG9N6D8NymRPM9RqCUv4pRpJ62E5DqOYx2AFpbZMyCPnjQCnOw==",
+      "license": "MIT",
+      "dependencies": {
+        "style-to-object": "1.0.8"
+      }
+    },
+    "node_modules/style-to-object": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-1.0.8.tgz",
+      "integrity": "sha512-xT47I/Eo0rwJmaXC4oilDGDWLohVhR6o/xAQcPQN8q6QBuZVL8qMYL85kLmST5cPjAorwvqIA4qXTRQoYHaL6g==",
+      "license": "MIT",
+      "dependencies": {
+        "inline-style-parser": "0.2.4"
+      }
+    },
     "node_modules/styled-jsx": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.1.tgz",

package.json

@@ -65,6 +65,7 @@
     "graphql": "^16.8.1",
     "graphql-request": "^6.1.0",
     "graphql-tag": "^2.12.6",
+    "html-react-parser": "^5.2.2",
     "ics": "^3.8.1",
     "immer": "10.1.1",
     "input-otp": "^1.4.2",