diff --git a/apps/scandic-web/components/ContentType/HotelPage/IntroSection/TripAdvisorLink/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/IntroSection/TripAdvisorLink/index.tsx index 3da477547..0b935e71f 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/IntroSection/TripAdvisorLink/index.tsx +++ b/apps/scandic-web/components/ContentType/HotelPage/IntroSection/TripAdvisorLink/index.tsx @@ -2,10 +2,10 @@ import TripadvisorIcon from "@scandic-hotels/design-system/Icons/TripadvisorIcon import Link from "@/components/TempDesignSystem/Link" import { getIntl } from "@/i18n" -import { appendSlugToPathname } from "@/utils/appendSlugToPathname" import styles from "./tripAdvisorLink.module.css" +import { SidepeekSlugs } from "@/types/components/hotelPage/hotelPage" import type { HotelTripAdvisor } from "@/types/hotel" interface TripAdvisorLinkProps { @@ -32,7 +32,7 @@ export default async function TripAdvisorLink({ const hasTripAdvisorIframeSrc = !!reviews.widgetScriptEmbedUrlIframe const tripAdvisorHref = hasTripAdvisorIframeSrc - ? await appendSlugToPathname("reviews") + ? `?s=${SidepeekSlugs.tripAdvisor}` : null if (!tripAdvisorHref) { diff --git a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Tripadvisor/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Tripadvisor/index.tsx new file mode 100644 index 000000000..41e902aa3 --- /dev/null +++ b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Tripadvisor/index.tsx @@ -0,0 +1,87 @@ +import { notFound } from "next/navigation" + +import Image from "@/components/Image" +import SidePeek from "@/components/TempDesignSystem/SidePeek" +import { getIntl } from "@/i18n" +import { getLang } from "@/i18n/serverContext" + +import styles from "./tripAdvisor.module.css" + +import { SidepeekSlugs } from "@/types/components/hotelPage/hotelPage" +import type { HotelRatings } from "@/types/hotel" + +type TripAdvisorSidePeekProps = { + hotelName: string + hotelRatings: HotelRatings + showNordicEcoLabel?: boolean +} + +export default async function TripAdvisorSidePeek({ + hotelName, + hotelRatings, + showNordicEcoLabel, +}: TripAdvisorSidePeekProps) { + const intl = await getIntl() + const lang = await getLang() + + const tripAdvisorData = hotelRatings?.tripAdvisor + if (!tripAdvisorData?.reviews.widgetScriptEmbedUrlIframe) { + notFound() + } + + const awardsLogos = tripAdvisorData.awards + .map((award) => ({ + imageUrl: award.images.small, + altText: award.displayName, + })) + .filter((award) => !!award.imageUrl) + + const hotelHasAwards = showNordicEcoLabel || awardsLogos.length > 0 + + return ( + + + {hotelHasAwards ? ( + + {showNordicEcoLabel ? ( + + ) : null} + {awardsLogos?.map((award) => ( + + ))} + + ) : null} + + + + + + ) +} diff --git a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Tripadvisor/tripAdvisor.module.css b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Tripadvisor/tripAdvisor.module.css new file mode 100644 index 000000000..0dd3daea7 --- /dev/null +++ b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Tripadvisor/tripAdvisor.module.css @@ -0,0 +1,40 @@ +.container { + height: 100%; + display: flex; + flex-direction: column; +} + +.awards { + border-radius: var(--Corner-radius-lg); + background: var(--Surface-Primary-Default); + display: flex; + flex-wrap: wrap; + padding: var(--Space-x2) var(--Space-x15); + justify-content: space-evenly; + align-items: center; + align-self: stretch; + margin-bottom: var(--Space-x3); +} + +.main { + flex: 1; + display: flex; +} + +.iframe { + width: 100%; + border-width: 0; + border-radius: var(--Corner-radius-lg); + + /* Adjustments for devices with tiny screen height */ + min-height: max(50dvh, 300px); + padding-bottom: var(--Space-x4); + margin-bottom: calc(0% - var(--Space-x4)); +} + +.logo { + width: 100%; + max-width: 120px; + height: 100px; + object-fit: contain; +} diff --git a/apps/scandic-web/components/ContentType/HotelPage/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/index.tsx index a169a76f6..5bad35841 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/index.tsx +++ b/apps/scandic-web/components/ContentType/HotelPage/index.tsx @@ -29,6 +29,7 @@ import AmenitiesSidePeek from "./SidePeeks/Amenities" import MeetingsAndConferencesSidePeek from "./SidePeeks/MeetingsAndConferences" import RestaurantBarSidePeek from "./SidePeeks/RestaurantBar" import RoomSidePeek from "./SidePeeks/Room" +import TripAdvisorSidePeek from "./SidePeeks/Tripadvisor" import WellnessAndExerciseSidePeek from "./SidePeeks/WellnessAndExercise" import AmenitiesList from "./AmenitiesList" import DialogshiftWidget from "./DialogshiftWidget" @@ -222,6 +223,11 @@ export default async function HotelPage({ hotelId }: HotelPageProps) { + ({ - imageUrl: award.images.small, - altText: award.displayName, - })) - .filter((award) => !!award.imageUrl) - const showNordicEcoLabel = !!hotel.hotelFacts?.ecoLabels.nordicEcoLabel - - return ( - <> - - - } - > - - - - - {hotel.name} - - - - {intl.formatMessage({ - defaultMessage: "Ratings and reviews", - })} - - - - - - - - - - - - > - ) -} diff --git a/apps/scandic-web/components/ContentType/HotelSubpage/ReviewsSubpage/reviewsSubpage.module.css b/apps/scandic-web/components/ContentType/HotelSubpage/ReviewsSubpage/reviewsSubpage.module.css deleted file mode 100644 index faa363a7b..000000000 --- a/apps/scandic-web/components/ContentType/HotelSubpage/ReviewsSubpage/reviewsSubpage.module.css +++ /dev/null @@ -1,84 +0,0 @@ -.reviewsSubpage { - padding-bottom: var(--Space-x9); - color: var(--Text-Default); -} - -.header { - width: var(--max-width-content); - margin: 0 auto; - display: grid; - gap: var(--Space-x3); - padding: var(--Space-x4) 0; -} - -.heading, -.sidebarHeading { - color: var(--Text-Heading); -} - -.contentContainer { - display: grid; - gap: var(--Space-x3); - width: var(--max-width-content); - margin: 0 auto; -} - -.sidebar { - display: grid; - gap: var(--Space-x3); - align-content: start; -} - -.sidebarContent { - display: flex; - flex-wrap: wrap; - gap: var(--Space-x7); - padding: var(--Space-x5) var(--Space-x15); - background-color: var(--Background-Secondary); - border-radius: var(--Corner-radius-lg); - justify-content: center; - align-items: center; -} - -.iframe { - width: 100%; - height: 50dvh; - border-width: 0; - border-radius: var(--Corner-radius-lg); -} - -.logo { - width: 100%; - max-width: 120px; - height: 100px; - object-fit: contain; -} - -@media screen and (min-width: 768px) { - .iframe { - height: 1150px; /* Maximum(ish) content height on desktop without the need of scrolling */ - } -} - -@media screen and (max-width: 1366px) { - .subheading, - .sidebarHeading { - display: none; - } -} - -@media screen and (min-width: 1367px) { - .contentContainer { - grid-template-columns: var(--max-width-text-block) 1fr; - grid-template-areas: "main sidebar"; - gap: var(--Space-x9); - } - - .mainContent { - grid-area: main; - } - - .sidebar { - grid-area: sidebar; - } -} diff --git a/apps/scandic-web/components/ContentType/HotelSubpage/index.tsx b/apps/scandic-web/components/ContentType/HotelSubpage/index.tsx index ef2af6b6f..37424833b 100644 --- a/apps/scandic-web/components/ContentType/HotelSubpage/index.tsx +++ b/apps/scandic-web/components/ContentType/HotelSubpage/index.tsx @@ -8,7 +8,6 @@ import AccessibilitySubpage from "./AccessibilitySubpage" import MeetingsSubpage from "./MeetingsSubpage" import ParkingSubpage from "./ParkingSubpage" import RestaurantSubpage from "./RestaurantSubpage" -import ReviewsSubpage from "./ReviewsSubpage" import { verifySubpageShouldExist } from "./utils" import WellnessSubpage from "./WellnessSubpage" @@ -71,8 +70,6 @@ export default async function HotelSubpage({ additionalData={additionalData} /> ) - case "reviews": - return default: notFound() } diff --git a/apps/scandic-web/types/components/hotelPage/hotelPage.ts b/apps/scandic-web/types/components/hotelPage/hotelPage.ts index 29ead7fc6..0736e2764 100644 --- a/apps/scandic-web/types/components/hotelPage/hotelPage.ts +++ b/apps/scandic-web/types/components/hotelPage/hotelPage.ts @@ -11,6 +11,7 @@ export enum SidepeekSlugs { restaurant = "restaurants", meetings = "meetings", wellness = "wellness", + tripAdvisor = "tripAdvisor", } export type HotelHashValue =
- {intl.formatMessage({ - defaultMessage: "Ratings and reviews", - })} -