Merged in feature/select-rate-vertical-data-flow (pull request #2535)

Feature/select rate vertical data flow * add fix from SW-2666 * use translations for room packages * move types to it's own file * Merge branch 'master' of bitbucket.org:scandic-swap/web into feature/select-rate-vertical-data-flow * merge * feature/select-rate: double rate for campaing rates * revert NODE_ENV check in Cookiebot script * revert testing values * fix(SW-3171): fix all filter selected in price details * fix(SW-3166): multiroom anchoring when changing filter * fix(SW-3172): check hotelType, show correct breakfast message * Merge branch 'feature/select-rate-vertical-data-flow' of bitbucket.org:scandic-swap/web into feature/select-rate-vertical-data-flow * fix: show special needs icons for subsequent roomTypes SW-3167 * fix: Display strike through text when logged in SW-3168 * fix: Reinstate the scrollToView behaviour when selecting a rate SW-3169 * merge * . * PR fixes * fix: don't return notFound() * . * always include defaults for room packages * merge * merge * merge * Remove floating h1 for new select-rate Approved-by: Anton Gunnarsson
2025-08-13 12:45:40 +00:00
parent 706f2d8dfe
commit 68cd061c6d
126 changed files with 8751 additions and 315 deletions
--- a/apps/scandic-web/components/HotelReservation/SelectRate2/HotelInfoCard/HotelDescription/hotelDescription.module.css
+++ b/apps/scandic-web/components/HotelReservation/SelectRate2/HotelInfoCard/HotelDescription/hotelDescription.module.css
@@ -0,0 +1,75 @@
+.hotelDescription {
+  overflow: hidden;
+}
+
+.descriptionWrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.collapsed {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.expanded {
+  display: block;
+  max-height: none;
+}
+
+.expandedContent {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: var(--Space-x2);
+}
+
+.description {
+  display: flex;
+  gap: var(--Space-x025);
+}
+
+.showMoreButton {
+  display: flex;
+  align-items: flex-end;
+  background-color: transparent;
+  border-width: 0;
+  padding: 0;
+  color: var(--Text-Interactive-Secondary);
+  cursor: pointer;
+
+  &:hover {
+    color: var(--Text-Interactive-Secondary-Hover);
+  }
+}
+
+.facilities {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Space-x15);
+  align-items: center;
+}
+
+.facilityList {
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: var(--Space-x15);
+  padding-bottom: var(--Space-x2);
+}
+
+.facilitiesItem {
+  display: flex;
+  align-items: center;
+  gap: var(--Space-x1);
+}
+
+@media screen and (min-width: 1367px) {
+  .descriptionWrapper {
+    display: none;
+  }
+}
--- a/apps/scandic-web/components/HotelReservation/SelectRate2/HotelInfoCard/HotelDescription/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate2/HotelInfoCard/HotelDescription/index.tsx
@@ -0,0 +1,93 @@
+"use client"
+
+import { useState } from "react"
+import { Button as ButtonRAC } from "react-aria-components"
+import { useIntl } from "react-intl"
+
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import { FacilityToIcon } from "@/components/ContentType/HotelPage/data"
+import ReadMore from "@/components/HotelReservation/ReadMore"
+import Alert from "@/components/TempDesignSystem/Alert"
+
+import styles from "./hotelDescription.module.css"
+
+import type { Hotel } from "@scandic-hotels/trpc/types/hotel"
+
+import { SidePeekEnum } from "@/types/components/hotelReservation/sidePeek"
+
+export default function HotelDescription({
+  description,
+  hotel,
+  sortedFacilities,
+}: {
+  description?: string
+  hotel: Hotel
+  sortedFacilities: Hotel["detailedFacilities"]
+}) {
+  const intl = useIntl()
+
+  const [expanded, setExpanded] = useState(false)
+
+  const handleToggle = () => {
+    setExpanded((prev) => !prev)
+  }
+
+  const textShowMore = intl.formatMessage({
+    defaultMessage: "Show more",
+  })
+
+  const textShowLess = intl.formatMessage({
+    defaultMessage: "Show less",
+  })
+
+  return (
+    <div className={styles.descriptionWrapper}>
+      <div className={styles.facilityList}>
+        {sortedFacilities?.map((facility) => (
+          <div className={styles.facilitiesItem} key={facility.id}>
+            <FacilityToIcon id={facility.id} color="Icon/Default" />
+            <Typography variant="Body/Supporting text (caption)/smRegular">
+              <p>{facility.name}</p>
+            </Typography>
+          </div>
+        ))}
+      </div>
+      <Typography variant="Body/Paragraph/mdRegular">
+        <p
+          className={`${styles.hotelDescription} ${
+            expanded ? styles.expanded : styles.collapsed
+          }`}
+        >
+          {description}
+        </p>
+      </Typography>
+      <Typography variant="Link/md">
+        <ButtonRAC className={styles.showMoreButton} onPress={handleToggle}>
+          {expanded ? textShowLess : textShowMore}
+        </ButtonRAC>
+      </Typography>
+
+      {expanded && (
+        <div className={styles.expandedContent}>
+          <ReadMore
+            label={intl.formatMessage({
+              defaultMessage: "See all amenities",
+            })}
+            hotelId={hotel.operaId}
+            showCTA={false}
+            sidePeekKey={SidePeekEnum.hotelDetails}
+          />
+          {hotel.specialAlerts.map((alert) => (
+            <Alert
+              key={alert.id}
+              type={alert.type}
+              heading={alert.heading}
+              text={alert.text}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}