From 26815cc9bcea6d416ffe3a9a7213cec139e8f9b0 Mon Sep 17 00:00:00 2001 From: Chuma McPhoy Date: Fri, 5 Jul 2024 19:26:34 +0200 Subject: [PATCH] feat: Add AmenitiesList and IntroSection components to Hotel Page --- .../AmenitiesList/amenitiesList.module.css | 18 +++++ .../HotelPage/AmenitiesList/index.tsx | 39 ++++++++++ .../ContentType/HotelPage/HotelPage.tsx | 23 +++++- .../HotelPage/IntroSection/index.tsx | 73 +++++++++++++++++++ .../IntroSection/introSection.module.css | 27 +++++++ .../HotelPage/hotelPage.module.css | 18 ++++- components/Icons/TripAdvisor.tsx | 42 +++++++++++ .../Text/BiroScript/biroScript.module.css | 4 + .../Text/BiroScript/variants.ts | 1 + .../Text/Body/body.module.css | 4 + .../TempDesignSystem/Text/Body/variants.ts | 1 + i18n/dictionaries/da.json | 1 + i18n/dictionaries/de.json | 1 + i18n/dictionaries/en.json | 2 + i18n/dictionaries/fi.json | 1 + i18n/dictionaries/no.json | 1 + types/hotel.ts | 8 ++ 17 files changed, 257 insertions(+), 7 deletions(-) create mode 100644 components/ContentType/HotelPage/AmenitiesList/amenitiesList.module.css create mode 100644 components/ContentType/HotelPage/AmenitiesList/index.tsx create mode 100644 components/ContentType/HotelPage/IntroSection/index.tsx create mode 100644 components/ContentType/HotelPage/IntroSection/introSection.module.css create mode 100644 components/Icons/TripAdvisor.tsx create mode 100644 types/hotel.ts diff --git a/components/ContentType/HotelPage/AmenitiesList/amenitiesList.module.css b/components/ContentType/HotelPage/AmenitiesList/amenitiesList.module.css new file mode 100644 index 000000000..aa57fee2d --- /dev/null +++ b/components/ContentType/HotelPage/AmenitiesList/amenitiesList.module.css @@ -0,0 +1,18 @@ +.amenitiesContainer { + display: grid; + gap: var(--Spacing-x-one-and-half); + height: fit-content; +} + +.showAllButton { + padding: var(--Spacing-x-one-and-half) var(--Spacing-x0) !important; +} + +@media screen and (min-width: 1367px) { + .amenitiesContainer { + background-color: var(--Scandic-Beige-10); + padding: var(--Spacing-x3) var(--Spacing-x3) var(--Spacing-x-one-and-half) + var(--Spacing-x3); + border-radius: var(--Corner-radius-Large); + } +} diff --git a/components/ContentType/HotelPage/AmenitiesList/index.tsx b/components/ContentType/HotelPage/AmenitiesList/index.tsx new file mode 100644 index 000000000..a7253df57 --- /dev/null +++ b/components/ContentType/HotelPage/AmenitiesList/index.tsx @@ -0,0 +1,39 @@ +import { ChevronRightIcon } from "@/components/Icons" +import Button from "@/components/TempDesignSystem/Button" +import Body from "@/components/TempDesignSystem/Text/Body" +import Subtitle from "@/components/TempDesignSystem/Text/Subtitle" + +import styles from "./amenitiesList.module.css" + +import { HotelData } from "@/types/hotel" + +export default function AmenitiesList({ + detailedFacilities, +}: { + detailedFacilities: HotelData["data"]["attributes"]["detailedFacilities"] +}) { + const sortedAmenities = detailedFacilities + .sort((a, b) => b.sortOrder - a.sortOrder) + .slice(0, 5) + return ( +
+ At the hotel +
+ {sortedAmenities.map((facility, index) => ( + + {facility.name} + + ))} +
+ +
+ ) +} diff --git a/components/ContentType/HotelPage/HotelPage.tsx b/components/ContentType/HotelPage/HotelPage.tsx index 9aaca4f67..9ced92da2 100644 --- a/components/ContentType/HotelPage/HotelPage.tsx +++ b/components/ContentType/HotelPage/HotelPage.tsx @@ -1,6 +1,7 @@ import { serverClient } from "@/lib/trpc/server" -import Title from "@/components/TempDesignSystem/Text/Title" +import AmenitiesList from "./AmenitiesList" +import IntroSection from "./IntroSection" import styles from "./hotelPage.module.css" @@ -18,9 +19,23 @@ export default async function HotelPage({ lang }: LangParams) { hotelId: hotelPageIdentifierData.hotel_page_id, language: lang, }) + return ( -
- {hotelPageData.data.attributes.name} -
+
+
+ + +
+
) } diff --git a/components/ContentType/HotelPage/IntroSection/index.tsx b/components/ContentType/HotelPage/IntroSection/index.tsx new file mode 100644 index 000000000..2f8202d51 --- /dev/null +++ b/components/ContentType/HotelPage/IntroSection/index.tsx @@ -0,0 +1,73 @@ +import ArrowRight from "@/components/Icons/ArrowRight" +import TripAdvisorIcon from "@/components/Icons/TripAdvisor" +import Link from "@/components/TempDesignSystem/Link" +import BiroScript from "@/components/TempDesignSystem/Text/BiroScript" +import Body from "@/components/TempDesignSystem/Text/Body" +import Subtitle from "@/components/TempDesignSystem/Text/Subtitle" +import Title from "@/components/TempDesignSystem/Text/Title" +import { getIntl } from "@/i18n" + +import styles from "./introSection.module.css" + +import { HotelAddress, HotelData, HotelLocation } from "@/types/hotel" + +export default async function IntroSection({ + hotelName, + hotelDescription, + location, + address, + tripAdvisor, +}: { + hotelName: HotelData["data"]["attributes"]["name"] + hotelDescription: HotelData["data"]["attributes"]["hotelContent"]["texts"]["descriptions"]["short"] + location: HotelLocation + address: HotelAddress + tripAdvisor: HotelData["data"]["attributes"]["ratings"]["tripAdvisor"] +}) { + const intl = await getIntl() + const { formatMessage } = intl + const { streetAddress, city } = address + const { distanceToCentre } = location + const formattedDistanceText = formatMessage( + { id: "Distance to city centre" }, + { number: distanceToCentre } + ) + const formattedLocationText = `${streetAddress}, ${city} (${formattedDistanceText})` + const formattedTripAdvisorText = `${tripAdvisor.rating} (${tripAdvisor.numberOfReviews} reviews on tripadvisor)` + + return ( +
+ + {formatMessage({ id: "Welcome to" })}: + +
+ {hotelName} + {formattedLocationText} + + + {formattedTripAdvisorText} + +
+
+ {hotelDescription} + + {/*TODO: Ask content team where this should link to. */} + Read more about the hotel + + +
+
+ ) +} diff --git a/components/ContentType/HotelPage/IntroSection/introSection.module.css b/components/ContentType/HotelPage/IntroSection/introSection.module.css new file mode 100644 index 000000000..01689c637 --- /dev/null +++ b/components/ContentType/HotelPage/IntroSection/introSection.module.css @@ -0,0 +1,27 @@ +.introSection { + margin-top: var(--Spacing-x3); + display: grid; + gap: var(--Spacing-x3); + position: relative; +} + +.mainContent { + display: grid; + gap: var(--Spacing-x1); +} + +.subtitleContent { + display: grid; + gap: var(--Spacing-x-one-and-half); +} + +.welcomeLabel { + /* TODO: Update and use absolute position. */ + transform: rotate(-3.378deg) translate(0px, -15px); +} + +.introLink { + text-decoration: underline !important; + text-decoration-color: var(--Scandic-Peach-80); + width: fit-content; +} diff --git a/components/ContentType/HotelPage/hotelPage.module.css b/components/ContentType/HotelPage/hotelPage.module.css index 271800e6d..4cacfea64 100644 --- a/components/ContentType/HotelPage/hotelPage.module.css +++ b/components/ContentType/HotelPage/hotelPage.module.css @@ -1,11 +1,23 @@ -.content { +.pageContainer { display: grid; - gap: var(--Spacing-x4); + gap: var(--Spacing-x9); padding: var(--Spacing-x3) var(--Spacing-x3) var(--Spacing-x4); } +.introContainer { + display: grid; + grid-template-columns: 1fr; + gap: var(--Spacing-x4); +} + @media screen and (min-width: 1367px) { - .content { + .pageContainer { gap: var(--Spacing-x3); + padding-left: var(--Spacing-x5); + } + .introContainer { + display: grid; + gap: 105px; + grid-template-columns: 607px 340px; } } diff --git a/components/Icons/TripAdvisor.tsx b/components/Icons/TripAdvisor.tsx new file mode 100644 index 000000000..95a8e843c --- /dev/null +++ b/components/Icons/TripAdvisor.tsx @@ -0,0 +1,42 @@ +import { iconVariants } from "./variants" + +import type { IconProps } from "@/types/components/icon" + +export default function TripAdvisorIcon({ + className, + color, + ...props +}: IconProps) { + const classNames = iconVariants({ className, color }) + return ( + + + + + + + + + ) +} diff --git a/components/TempDesignSystem/Text/BiroScript/biroScript.module.css b/components/TempDesignSystem/Text/BiroScript/biroScript.module.css index 9c0ed4aaf..1dc3567c4 100644 --- a/components/TempDesignSystem/Text/BiroScript/biroScript.module.css +++ b/components/TempDesignSystem/Text/BiroScript/biroScript.module.css @@ -61,3 +61,7 @@ .plosa { color: var(--Theme-Primary-Light-On-Surface-Accent); } + +.red { + color: var(--Scandic-Brand-Scandic-Red); +} diff --git a/components/TempDesignSystem/Text/BiroScript/variants.ts b/components/TempDesignSystem/Text/BiroScript/variants.ts index 570af1c0c..96de5ddf1 100644 --- a/components/TempDesignSystem/Text/BiroScript/variants.ts +++ b/components/TempDesignSystem/Text/BiroScript/variants.ts @@ -10,6 +10,7 @@ const config = { pale: styles.pale, peach80: styles.peach80, primaryLightOnSurfaceAccent: styles.plosa, + red: styles.red, }, textAlign: { center: styles.center, diff --git a/components/TempDesignSystem/Text/Body/body.module.css b/components/TempDesignSystem/Text/Body/body.module.css index 29bec1c5b..8a575b124 100644 --- a/components/TempDesignSystem/Text/Body/body.module.css +++ b/components/TempDesignSystem/Text/Body/body.module.css @@ -58,6 +58,10 @@ color: var(--Scandic-Brand-Scandic-Red); } +.textMediumContrast { + color: var(--Base-Text-UI-Medium-contrast); +} + .white { color: var(--Scandic-Opacity-White-100); } diff --git a/components/TempDesignSystem/Text/Body/variants.ts b/components/TempDesignSystem/Text/Body/variants.ts index b2c6c3c93..034cdf77e 100644 --- a/components/TempDesignSystem/Text/Body/variants.ts +++ b/components/TempDesignSystem/Text/Body/variants.ts @@ -9,6 +9,7 @@ const config = { burgundy: styles.burgundy, pale: styles.pale, red: styles.red, + textMediumContrast: styles.textMediumContrast, white: styles.white, }, textAlign: { diff --git a/i18n/dictionaries/da.json b/i18n/dictionaries/da.json index 3579c467c..db310e5d2 100644 --- a/i18n/dictionaries/da.json +++ b/i18n/dictionaries/da.json @@ -91,6 +91,7 @@ "User information": "Brugeroplysninger", "uppercase letter": "stort bogstav", "Visiting address": "Besøgsadresse", + "Welcome to": "Velkommen til", "Where should you go next?": "Hvor skal du tage hen næste gang?", "Year": "År", "You have no previous stays.": "Du har ingen tidligere ophold.", diff --git a/i18n/dictionaries/de.json b/i18n/dictionaries/de.json index bddd67cea..4ad622a09 100644 --- a/i18n/dictionaries/de.json +++ b/i18n/dictionaries/de.json @@ -91,6 +91,7 @@ "User information": "Nutzerinformation", "uppercase letter": "großbuchstabe", "Visiting address": "Besuchsadresse", + "Welcome to": "Willkommen zu", "Where should you go next?": "Wohin soll es als nächstes gehen?", "Year": "Jahr", "You have no previous stays.": "Sie haben keine vorherigen Aufenthalte.", diff --git a/i18n/dictionaries/en.json b/i18n/dictionaries/en.json index 29cd2c313..13da74126 100644 --- a/i18n/dictionaries/en.json +++ b/i18n/dictionaries/en.json @@ -27,6 +27,7 @@ "Day": "Day", "Description": "Description", "Discard changes": "Discard changes", + "Distance to city centre": "{number}km to city centre", "Edit": "Edit", "Edit profile": "Edit profile", "Email": "Email", @@ -91,6 +92,7 @@ "User information": "User information", "uppercase letter": "uppercase letter", "Visiting address": "Visiting address", + "Welcome to": "Welcome to", "Where should you go next?": "Where should you go next?", "Year": "Year", "You have no previous stays.": "You have no previous stays.", diff --git a/i18n/dictionaries/fi.json b/i18n/dictionaries/fi.json index f17c4aa6c..c9bb8b7a7 100644 --- a/i18n/dictionaries/fi.json +++ b/i18n/dictionaries/fi.json @@ -91,6 +91,7 @@ "User information": "Käyttäjän tiedot", "uppercase letter": "iso kirjain", "Visiting address": "Käyntiosoite", + "Welcome to": "Tervetuloa", "Where should you go next?": "Minne sinun pitäisi mennä seuraavaksi?", "Year": "Vuosi", "You have no previous stays.": "Sinulla ei ole aiempaa oleskelua.", diff --git a/i18n/dictionaries/no.json b/i18n/dictionaries/no.json index 672301b6a..457a5a6f9 100644 --- a/i18n/dictionaries/no.json +++ b/i18n/dictionaries/no.json @@ -91,6 +91,7 @@ "User information": "Brukerinformasjon", "uppercase letter": "stor bokstav", "Visiting address": "Besøksadresse", + "Welcome to": "Velkommen til", "Where should you go next?": "Hvor bør du gå videre?", "Year": "År", "You have no previous stays.": "Du har ingen tidligere opphold.", diff --git a/types/hotel.ts b/types/hotel.ts new file mode 100644 index 000000000..5d5f33b06 --- /dev/null +++ b/types/hotel.ts @@ -0,0 +1,8 @@ +import { z } from "zod" + +import { getHotelDataSchema } from "@/server/routers/hotels/output" + +export type HotelData = z.infer + +export type HotelAddress = HotelData["data"]["attributes"]["address"] +export type HotelLocation = HotelData["data"]["attributes"]["location"]