From 87a89c5d817acc65f3e97e3e1fc1764df771f7ed Mon Sep 17 00:00:00 2001 From: Bianca Widstam Date: Thu, 14 Nov 2024 09:14:26 +0000 Subject: [PATCH] feat/SW-843-UI-hotel-card-select-hotel (pull request #887) Approved-by: Pontus Dreij Approved-by: Niclas Edenvin --- .../HotelCard/HotelLogo/index.tsx | 34 ++++ .../HotelPriceList/HotelPriceCard/index.tsx | 71 +++++++ .../HotelPriceList/hotelPriceList.module.css | 29 +++ .../HotelCard/HotelPriceList/index.tsx | 42 ++++ .../HotelCard/hotelCard.module.css | 125 ++++++------ .../HotelReservation/HotelCard/index.tsx | 190 +++++++++--------- .../hotelCardListing.module.css | 3 +- .../HotelInfoCard/hotelInfoCard.module.css | 12 -- .../SelectRate/HotelInfoCard/index.tsx | 11 +- .../TripAdvisorChip/index.tsx | 15 ++ .../tripAdvisorChip.module.css | 11 + components/Icons/Logos/DowntownCamper.tsx | 113 +++++++++++ components/Icons/Logos/GrandHotelOslo.tsx | 27 +++ components/Icons/Logos/Haymarket.tsx | 63 ++++++ components/Icons/Logos/HotelNorge.tsx | 96 +++++++++ components/Icons/Logos/Marski.tsx | 59 ++++++ components/Icons/Logos/ScandicGoLogo.tsx | 69 +++++++ components/Icons/{ => Logos}/ScandicLogo.tsx | 2 +- components/Icons/index.tsx | 8 +- .../Text/Caption/caption.module.css | 4 + .../TempDesignSystem/Text/Caption/variants.ts | 1 + i18n/dictionaries/da.json | 5 +- i18n/dictionaries/de.json | 3 +- i18n/dictionaries/en.json | 3 +- i18n/dictionaries/fi.json | 3 +- i18n/dictionaries/no.json | 3 +- i18n/dictionaries/sv.json | 3 +- .../selectHotel/hotePriceListProps.ts | 5 + .../selectHotel/hotelLogoProps.ts | 6 + .../selectHotel/priceCardProps.ts | 5 + .../hotelReservation/tripAdvisorProps.ts | 3 + types/enums/signatureHotel.ts | 7 + 32 files changed, 848 insertions(+), 183 deletions(-) create mode 100644 components/HotelReservation/HotelCard/HotelLogo/index.tsx create mode 100644 components/HotelReservation/HotelCard/HotelPriceList/HotelPriceCard/index.tsx create mode 100644 components/HotelReservation/HotelCard/HotelPriceList/hotelPriceList.module.css create mode 100644 components/HotelReservation/HotelCard/HotelPriceList/index.tsx create mode 100644 components/HotelReservation/TripAdvisorChip/index.tsx create mode 100644 components/HotelReservation/TripAdvisorChip/tripAdvisorChip.module.css create mode 100644 components/Icons/Logos/DowntownCamper.tsx create mode 100644 components/Icons/Logos/GrandHotelOslo.tsx create mode 100644 components/Icons/Logos/Haymarket.tsx create mode 100644 components/Icons/Logos/HotelNorge.tsx create mode 100644 components/Icons/Logos/Marski.tsx create mode 100644 components/Icons/Logos/ScandicGoLogo.tsx rename components/Icons/{ => Logos}/ScandicLogo.tsx (98%) create mode 100644 types/components/hotelReservation/selectHotel/hotePriceListProps.ts create mode 100644 types/components/hotelReservation/selectHotel/hotelLogoProps.ts create mode 100644 types/components/hotelReservation/selectHotel/priceCardProps.ts create mode 100644 types/components/hotelReservation/tripAdvisorProps.ts create mode 100644 types/enums/signatureHotel.ts diff --git a/components/HotelReservation/HotelCard/HotelLogo/index.tsx b/components/HotelReservation/HotelCard/HotelLogo/index.tsx new file mode 100644 index 000000000..c305e1838 --- /dev/null +++ b/components/HotelReservation/HotelCard/HotelLogo/index.tsx @@ -0,0 +1,34 @@ +import { + DowntownCamperIcon, + GrandHotelOsloLogoIcon, + HaymarketIcon, + HotelNorgeIcon, + MarskiLogoIcon, + ScandicGoLogoIcon, + ScandicLogoIcon, +} from "@/components/Icons" + +import type { HotelLogoProps } from "@/types/components/hotelReservation/selectHotel/hotelLogoProps" +import { HotelTypeEnum } from "@/types/enums/hotelType" +import { SignatureHotelEnum } from "@/types/enums/signatureHotel" + +export default function HotelLogo({ hotelId, hotelType }: HotelLogoProps) { + if (hotelType === HotelTypeEnum.ScandicGo) { + return + } + + switch (hotelId) { + case SignatureHotelEnum.Haymarket: + return + case SignatureHotelEnum.HotelNorge: + return + case SignatureHotelEnum.DowntownCamper: + return + case SignatureHotelEnum.GrandHotelOslo: + return + case SignatureHotelEnum.Marski: + return + default: + return + } +} diff --git a/components/HotelReservation/HotelCard/HotelPriceList/HotelPriceCard/index.tsx b/components/HotelReservation/HotelCard/HotelPriceList/HotelPriceCard/index.tsx new file mode 100644 index 000000000..942f9fafe --- /dev/null +++ b/components/HotelReservation/HotelCard/HotelPriceList/HotelPriceCard/index.tsx @@ -0,0 +1,71 @@ +import { useIntl } from "react-intl" + +import Body from "@/components/TempDesignSystem/Text/Body" +import Caption from "@/components/TempDesignSystem/Text/Caption" +import Subtitle from "@/components/TempDesignSystem/Text/Subtitle" + +import styles from "../hotelPriceList.module.css" + +import type { PriceCardProps } from "@/types/components/hotelReservation/selectHotel/priceCardProps" + +export default function HotelPriceCard({ + currency, + memberAmount, + regularAmount, +}: PriceCardProps) { + const intl = useIntl() + + return ( +
+ {memberAmount && ( +
+
+ + {intl.formatMessage({ id: "Member price" })} + +
+
+ )} +
+
+ + {intl.formatMessage({ id: "From" })} + +
+
+
+ + {memberAmount ? memberAmount : regularAmount} + + + {currency} + + /{intl.formatMessage({ id: "night" })} + + +
+
+
+ {/* TODO add correct local price when API change */} +
+
+ + {intl.formatMessage({ id: "Approx." })} + +
+
+ - EUR +
+
+
+ ) +} diff --git a/components/HotelReservation/HotelCard/HotelPriceList/hotelPriceList.module.css b/components/HotelReservation/HotelCard/HotelPriceList/hotelPriceList.module.css new file mode 100644 index 000000000..fe28eef93 --- /dev/null +++ b/components/HotelReservation/HotelCard/HotelPriceList/hotelPriceList.module.css @@ -0,0 +1,29 @@ +.priceCard { + padding: var(--Spacing-x-one-and-half); + background-color: var(--Base-Surface-Secondary-light-Normal); + border-radius: var(--Corner-radius-Medium); + margin: 0; + width: 100%; +} + +.noRooms { + display: flex; + gap: var(--Spacing-x1); +} + +.priceRow { + display: flex; + justify-content: space-between; + align-items: baseline; + padding: var(--Spacing-x-quarter) 0; +} + +.price { + display: flex; + gap: var(--Spacing-x-half); +} + +.perNight { + font-weight: 400; + font-size: var(--typography-Caption-Regular-fontSize); +} diff --git a/components/HotelReservation/HotelCard/HotelPriceList/index.tsx b/components/HotelReservation/HotelCard/HotelPriceList/index.tsx new file mode 100644 index 000000000..4167e044a --- /dev/null +++ b/components/HotelReservation/HotelCard/HotelPriceList/index.tsx @@ -0,0 +1,42 @@ +import { useIntl } from "react-intl" + +import { ErrorCircleIcon } from "@/components/Icons" +import Body from "@/components/TempDesignSystem/Text/Body" + +import HotelPriceCard from "./HotelPriceCard" + +import styles from "./hotelPriceList.module.css" + +import { HotelPriceListProps } from "@/types/components/hotelReservation/selectHotel/hotePriceListProps" + +export default function HotelPriceList({ price }: HotelPriceListProps) { + const intl = useIntl() + + return ( + <> + {price ? ( + <> + + + + ) : ( +
+
+ + + {intl.formatMessage({ + id: "There are no rooms available that match your request", + })} + +
+
+ )} + + ) +} diff --git a/components/HotelReservation/HotelCard/hotelCard.module.css b/components/HotelReservation/HotelCard/hotelCard.module.css index a5d90de17..a0c15eb5b 100644 --- a/components/HotelReservation/HotelCard/hotelCard.module.css +++ b/components/HotelReservation/HotelCard/hotelCard.module.css @@ -1,15 +1,15 @@ .card { - display: grid; - grid-template-areas: - "image header" - "hotel hotel" - "prices prices"; - gap: var(--Spacing-x2); - padding: var(--Spacing-x2); + display: flex; + flex-direction: column; background-color: var(--Base-Surface-Primary-light-Normal); border: 1px solid var(--Base-Border-Subtle); border-radius: var(--Corner-radius-Medium); width: 100%; + overflow: hidden; +} + +.card.active { + border: 1px solid var(--Base-Border-Hover); } .card.active { @@ -17,14 +17,9 @@ } .imageContainer { - grid-area: image; position: relative; - height: 100%; - width: 116px; -} - -.tripAdvisor { - display: none; + height: 200px; + width: 100%; } .imageContainer img { @@ -32,19 +27,41 @@ } .hotelInformation { - grid-area: header; + margin-bottom: var(--Spacing-x-half); } -.hotel { +.hotelContent { display: flex; flex-direction: column; - grid-area: hotel; + padding: var(--Spacing-x2); } +.hotelDescription { + display: none; +} + +.titleContainer { + display: flex; + flex-direction: column; + gap: var(--Spacing-x-half); + margin-top: var(--Spacing-x-half); +} + +.addressContainer { + display: flex; + flex-wrap: wrap; + gap: var(--Spacing-x1); +} + +.address { + display: none; + font-style: normal; +} .facilities { display: flex; flex-wrap: wrap; gap: var(--Spacing-x1); + margin-top: var(--Spacing-x-one-and-half); } .facilitiesItem { @@ -56,78 +73,70 @@ .prices { display: flex; flex-direction: column; - gap: var(--Spacing-x2); - grid-area: prices; + gap: var(--Spacing-x-one-and-half); + width: 100%; } -.public, -.member { - max-width: fit-content; - margin-bottom: var(--Spacing-x-half); +.detailsButton { + border-bottom: none; } .button { - justify-content: center; -} - -.address { - display: none; + min-width: 160px; } @media screen and (min-width: 1367px) { .card.pageListing { - grid-template-areas: - "image header" - "image hotel" - "image prices"; + flex-direction: row; overflow: hidden; padding: 0; } - .pageListing .imageContainer { - position: relative; - min-height: 200px; - width: 518px; + .pageListing .hotelDescription { + display: block; } - .pageListing .tripAdvisor { - position: absolute; - display: block; - left: 7px; - top: 7px; + .pageListing .imageContainer { + position: relative; + height: 100%; + width: 314px; } .pageListing .hotelInformation { - padding-top: var(--Spacing-x2); + width: min(422px, 100%); padding-right: var(--Spacing-x2); + margin: 0; } - .pageListing .hotel { + .pageListing .facilities { + margin: var(--Spacing-x1) 0; + } + + .pageListing .hotelContent { + flex-direction: row; + align-items: center; gap: var(--Spacing-x2); - padding-right: var(--Spacing-x2); + padding-left: var(--Spacing-x3); + } + + .pageListing .titleContainer { + margin-bottom: var(--Spacing-x-one-and-half); } .pageListing .prices { - flex-direction: row; align-items: center; - justify-content: space-between; - padding-right: var(--Spacing-x2); - padding-bottom: var(--Spacing-x2); - } - - .pageListing .detailsButton { - border-bottom: none; + width: 260px; } .pageListing .button { - width: 160px; + width: 100%; } - .address { - display: block; - } - - .addressMobile { + .pageListing .addressMobile { display: none; } + + .pageListing .address { + display: inline; + } } diff --git a/components/HotelReservation/HotelCard/index.tsx b/components/HotelReservation/HotelCard/index.tsx index 289a93320..920dc3108 100644 --- a/components/HotelReservation/HotelCard/index.tsx +++ b/components/HotelReservation/HotelCard/index.tsx @@ -6,17 +6,18 @@ import { Lang } from "@/constants/languages" import { selectHotelMap } from "@/constants/routes/hotelReservation" import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data" -import { PriceTagIcon, ScandicLogoIcon } from "@/components/Icons" -import TripAdvisorIcon from "@/components/Icons/TripAdvisor" import ImageGallery from "@/components/ImageGallery" import Button from "@/components/TempDesignSystem/Button" -import Chip from "@/components/TempDesignSystem/Chip" +import Divider from "@/components/TempDesignSystem/Divider" import Link from "@/components/TempDesignSystem/Link" +import Body from "@/components/TempDesignSystem/Text/Body" import Caption from "@/components/TempDesignSystem/Text/Caption" -import Footnote from "@/components/TempDesignSystem/Text/Footnote" -import Title from "@/components/TempDesignSystem/Text/Title" +import Subtitle from "@/components/TempDesignSystem/Text/Subtitle" import ReadMore from "../ReadMore" +import TripAdvisorChip from "../TripAdvisorChip" +import HotelLogo from "./HotelLogo" +import HotelPriceList from "./HotelPriceList" import { hotelCardVariants } from "./variants" import styles from "./hotelCard.module.css" @@ -61,100 +62,97 @@ export default function HotelCard({ onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} > -
- -
- - - {hotelData.ratings?.tripAdvisor.rating} - +
+
+ + {hotelData.ratings?.tripAdvisor && ( + + )}
-
-
- - - {hotelData.name} - - - {`${hotelData.address.streetAddress}, ${hotelData.address.city}`} - - - - {`${hotelData.address.streetAddress}, ${hotelData.address.city}`} - - - - {`${hotelData.location.distanceToCentre} ${intl.formatMessage({ id: "km to city center" })}`} - -
-
-
- {amenities.map((facility) => { - const IconComponent = mapFacilityToIcon(facility.id) - return ( -
- {IconComponent && } - {facility.name} +
+
+
+
+ + + {hotelData.name} + +
+
+ + {hotelData.address.streetAddress}, {hotelData.address.city} + +
+ + + {hotelData.address.streetAddress}, {hotelData.address.city} + + +
+
- ) - })} -
- -
-
-
- - - {intl.formatMessage({ id: "Public price from" })} - - - {price?.regularAmount} {price?.currency} / - {intl.formatMessage({ id: "night" })} - - approx 280 eur -
-
- - - {intl.formatMessage({ id: "Member price from" })} - - - {price?.memberAmount} {price?.currency} / - {intl.formatMessage({ id: "night" })} - - approx 280 eur -
-
+
+ + {hotelData.hotelContent.texts.descriptions.short} + +
+ {amenities.map((facility) => { + const IconComponent = mapFacilityToIcon(facility.id) + return ( +
+ {IconComponent && } + + {facility.name} + +
+ ) + })} +
+ +
+
+ + - + {/* TODO: Localize link and also use correct search params */} + + {intl.formatMessage({ id: "See rooms" })} + + +
+ ) } diff --git a/components/HotelReservation/HotelCardListing/hotelCardListing.module.css b/components/HotelReservation/HotelCardListing/hotelCardListing.module.css index be62321df..00bd7ec84 100644 --- a/components/HotelReservation/HotelCardListing/hotelCardListing.module.css +++ b/components/HotelReservation/HotelCardListing/hotelCardListing.module.css @@ -1,5 +1,6 @@ .hotelCards { display: flex; flex-direction: column; - gap: var(--Spacing-x4); + gap: var(--Spacing-x2); + margin-bottom: var(--Spacing-x2); } diff --git a/components/HotelReservation/SelectRate/HotelInfoCard/hotelInfoCard.module.css b/components/HotelReservation/SelectRate/HotelInfoCard/hotelInfoCard.module.css index e3e5642db..a6ef23b5e 100644 --- a/components/HotelReservation/SelectRate/HotelInfoCard/hotelInfoCard.module.css +++ b/components/HotelReservation/SelectRate/HotelInfoCard/hotelInfoCard.module.css @@ -24,18 +24,6 @@ border-radius: var(--Corner-radius-Medium); } -.tripAdvisor { - display: flex; - align-items: center; - gap: var(--Spacing-x-half); - background-color: var(--Base-Surface-Primary-light-Normal); - position: absolute; - left: 8px; - top: 8px; - padding: var(--Spacing-x-quarter) var(--Spacing-x1); - border-radius: var(--Corner-radius-Small); -} - .hotelContent { display: flex; flex-direction: column; diff --git a/components/HotelReservation/SelectRate/HotelInfoCard/index.tsx b/components/HotelReservation/SelectRate/HotelInfoCard/index.tsx index bef792555..28ce32377 100644 --- a/components/HotelReservation/SelectRate/HotelInfoCard/index.tsx +++ b/components/HotelReservation/SelectRate/HotelInfoCard/index.tsx @@ -2,7 +2,6 @@ import { useIntl } from "react-intl" import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data" -import TripAdvisorIcon from "@/components/Icons/TripAdvisor" import ImageGallery from "@/components/ImageGallery" import Alert from "@/components/TempDesignSystem/Alert" import Divider from "@/components/TempDesignSystem/Divider" @@ -11,6 +10,7 @@ import Caption from "@/components/TempDesignSystem/Text/Caption" import Title from "@/components/TempDesignSystem/Text/Title" import ReadMore from "../../ReadMore" +import TripAdvisorChip from "../../TripAdvisorChip" import styles from "./hotelInfoCard.module.css" @@ -35,12 +35,9 @@ export default function HotelInfoCard({ hotelData }: HotelInfoCardProps) { fill /> {hotelAttributes.ratings?.tripAdvisor && ( -
- - - {hotelAttributes.ratings.tripAdvisor.rating} - -
+ )}
diff --git a/components/HotelReservation/TripAdvisorChip/index.tsx b/components/HotelReservation/TripAdvisorChip/index.tsx new file mode 100644 index 000000000..96005bd60 --- /dev/null +++ b/components/HotelReservation/TripAdvisorChip/index.tsx @@ -0,0 +1,15 @@ +import TripAdvisorIcon from "@/components/Icons/TripAdvisor" +import Caption from "@/components/TempDesignSystem/Text/Caption" + +import styles from "./tripAdvisorChip.module.css" + +import type { TripAdvisorProps } from "@/types/components/hotelReservation/tripAdvisorProps" + +export default function TripAdvisorChip({ rating }: TripAdvisorProps) { + return ( +
+ + {rating} +
+ ) +} diff --git a/components/HotelReservation/TripAdvisorChip/tripAdvisorChip.module.css b/components/HotelReservation/TripAdvisorChip/tripAdvisorChip.module.css new file mode 100644 index 000000000..a5328e1a3 --- /dev/null +++ b/components/HotelReservation/TripAdvisorChip/tripAdvisorChip.module.css @@ -0,0 +1,11 @@ +.tripAdvisor { + display: flex; + align-items: center; + gap: var(--Spacing-x-half); + background-color: var(--Base-Surface-Primary-light-Normal); + position: absolute; + left: 16px; + top: 16px; + padding: var(--Spacing-x-quarter) var(--Spacing-x1); + border-radius: var(--Corner-radius-Small); +} diff --git a/components/Icons/Logos/DowntownCamper.tsx b/components/Icons/Logos/DowntownCamper.tsx new file mode 100644 index 000000000..97baf9820 --- /dev/null +++ b/components/Icons/Logos/DowntownCamper.tsx @@ -0,0 +1,113 @@ +import { iconVariants } from "../variants" + +import type { IconProps } from "@/types/components/icon" + +export default function DowntownCamperIcon({ + className, + color, + ...props +}: IconProps) { + const classNames = iconVariants({ className, color }) + return ( + + + + + + + + + + + + + + + + + + ) +} diff --git a/components/Icons/Logos/GrandHotelOslo.tsx b/components/Icons/Logos/GrandHotelOslo.tsx new file mode 100644 index 000000000..1cac092f7 --- /dev/null +++ b/components/Icons/Logos/GrandHotelOslo.tsx @@ -0,0 +1,27 @@ +import { iconVariants } from "../variants" + +import type { IconProps } from "@/types/components/icon" + +export default function GrandHotelOsloLogoIcon({ + className, + color, + ...props +}: IconProps) { + const classNames = iconVariants({ className, color }) + return ( + + + + ) +} diff --git a/components/Icons/Logos/Haymarket.tsx b/components/Icons/Logos/Haymarket.tsx new file mode 100644 index 000000000..00d8519fb --- /dev/null +++ b/components/Icons/Logos/Haymarket.tsx @@ -0,0 +1,63 @@ +import { iconVariants } from "../variants" + +import type { IconProps } from "@/types/components/icon" + +export default function HaymarketIcon({ + className, + color, + ...props +}: IconProps) { + const classNames = iconVariants({ className, color }) + return ( + + + + + + + + + + + + + ) +} diff --git a/components/Icons/Logos/HotelNorge.tsx b/components/Icons/Logos/HotelNorge.tsx new file mode 100644 index 000000000..daa5ff940 --- /dev/null +++ b/components/Icons/Logos/HotelNorge.tsx @@ -0,0 +1,96 @@ +import { iconVariants } from "../variants" + +import type { IconProps } from "@/types/components/icon" + +export default function HotelNorgeIcon({ + className, + color, + ...props +}: IconProps) { + const classNames = iconVariants({ className, color }) + return ( + + + + + + + + + + + + + + + + ) +} diff --git a/components/Icons/Logos/Marski.tsx b/components/Icons/Logos/Marski.tsx new file mode 100644 index 000000000..57473a53a --- /dev/null +++ b/components/Icons/Logos/Marski.tsx @@ -0,0 +1,59 @@ +import { iconVariants } from "../variants" + +import type { IconProps } from "@/types/components/icon" + +export default function MarskiLogoIcon({ + className, + color, + ...props +}: IconProps) { + const classNames = iconVariants({ className, color }) + return ( + + + + + + + + + ) +} diff --git a/components/Icons/Logos/ScandicGoLogo.tsx b/components/Icons/Logos/ScandicGoLogo.tsx new file mode 100644 index 000000000..8878cf16c --- /dev/null +++ b/components/Icons/Logos/ScandicGoLogo.tsx @@ -0,0 +1,69 @@ +import { iconVariants } from "../variants" + +import type { IconProps } from "@/types/components/icon" + +export default function ScandicGoLogoIcon({ + className, + color, + ...props +}: IconProps) { + const classNames = iconVariants({ className, color }) + return ( + + + + + + + + + + + ) +} diff --git a/components/Icons/ScandicLogo.tsx b/components/Icons/Logos/ScandicLogo.tsx similarity index 98% rename from components/Icons/ScandicLogo.tsx rename to components/Icons/Logos/ScandicLogo.tsx index d3710f666..cdb992753 100644 --- a/components/Icons/ScandicLogo.tsx +++ b/components/Icons/Logos/ScandicLogo.tsx @@ -1,4 +1,4 @@ -import { iconVariants } from "./variants" +import { iconVariants } from "../variants" import type { IconProps } from "@/types/components/icon" diff --git a/components/Icons/index.tsx b/components/Icons/index.tsx index 2a30ffe78..fc6e5c069 100644 --- a/components/Icons/index.tsx +++ b/components/Icons/index.tsx @@ -82,6 +82,13 @@ export { default as LaundryMachineIcon } from "./LaundryMachine" export { default as LocalBarIcon } from "./LocalBar" export { default as LocationIcon } from "./Location" export { default as LockIcon } from "./Lock" +export { default as DowntownCamperIcon } from "./Logos/DowntownCamper" +export { default as GrandHotelOsloLogoIcon } from "./Logos/GrandHotelOslo" +export { default as HaymarketIcon } from "./Logos/Haymarket" +export { default as HotelNorgeIcon } from "./Logos/HotelNorge" +export { default as MarskiLogoIcon } from "./Logos/Marski" +export { default as ScandicGoLogoIcon } from "./Logos/ScandicGoLogo" +export { default as ScandicLogoIcon } from "./Logos/ScandicLogo" export { default as MapIcon } from "./Map" export { default as MinusIcon } from "./Minus" export { default as MirrorIcon } from "./Mirror" @@ -104,7 +111,6 @@ export { default as RestaurantIcon } from "./Restaurant" export { default as RoomServiceIcon } from "./RoomService" export { default as SafetyBoxIcon } from "./SafetyBox" export { default as SaunaIcon } from "./Sauna" -export { default as ScandicLogoIcon } from "./ScandicLogo" export { default as SearchIcon } from "./Search" export { default as ServiceIcon } from "./Service" export { default as ShoppingIcon } from "./Shopping" diff --git a/components/TempDesignSystem/Text/Caption/caption.module.css b/components/TempDesignSystem/Text/Caption/caption.module.css index 3eb44199a..7d2cbe752 100644 --- a/components/TempDesignSystem/Text/Caption/caption.module.css +++ b/components/TempDesignSystem/Text/Caption/caption.module.css @@ -71,6 +71,10 @@ p.caption { color: var(--Base-Text-High-contrast); } +.baseTextMediumContrast { + color: var(--Base-Text-Medium-contrast); +} + .red { color: var(--Scandic-Brand-Scandic-Red); } diff --git a/components/TempDesignSystem/Text/Caption/variants.ts b/components/TempDesignSystem/Text/Caption/variants.ts index b0672430b..96cfab491 100644 --- a/components/TempDesignSystem/Text/Caption/variants.ts +++ b/components/TempDesignSystem/Text/Caption/variants.ts @@ -24,6 +24,7 @@ const config = { uiTextPlaceholder: styles.uiTextPlaceholder, disabled: styles.disabled, baseTextHighContrast: styles.baseTextHighContrast, + baseTextMediumContrast: styles.baseTextMediumContrast, }, textTransform: { uppercase: styles.uppercase, diff --git a/i18n/dictionaries/da.json b/i18n/dictionaries/da.json index 5d32423eb..4486b9e51 100644 --- a/i18n/dictionaries/da.json +++ b/i18n/dictionaries/da.json @@ -7,7 +7,7 @@ "ACCE": "Tilgængelighed", "ALLG": "Allergi", "About meetings & conferences": "About meetings & conferences", - "About the hotel": "About the hotel", + "About the hotel": "Om hotellet", "Accessibility": "Tilgængelighed", "Accessible Room": "Tilgængelighedsrum", "Activities": "Aktiviteter", @@ -98,7 +98,7 @@ "Disabled booking options text": "Koder, checks og bonusnætter er endnu ikke tilgængelige på den nye hjemmeside.", "Discard changes": "Kassér ændringer", "Discard unsaved changes?": "Slette ændringer, der ikke er gemt?", - "Distance to city centre": "{number}km til centrum", + "Distance to city centre": "{number} km til centrum", "Distance to hotel": "Afstand til hotel", "Do you want to start the day with Scandics famous breakfast buffé?": "Vil du starte dagen med Scandics berømte morgenbuffet?", "Done": "Færdig", @@ -330,6 +330,7 @@ "Terms and conditions": "Vilkår og betingelser", "Thank you": "Tak", "Theatre": "Teater", + "There are no rooms available that match your request": "Der er ingen ledige værelser, der matcher din anmodning", "There are no transactions to display": "Der er ingen transaktioner at vise", "Things nearby HOTEL_NAME": "Ting i nærheden af {hotelName}", "To get the member price {amount} {currency}, log in or join when completing the booking.": "For at få medlemsprisen {amount} {currency}, log ind eller tilmeld dig, når du udfylder bookingen.", diff --git a/i18n/dictionaries/de.json b/i18n/dictionaries/de.json index 90c115061..ee34c0c1b 100644 --- a/i18n/dictionaries/de.json +++ b/i18n/dictionaries/de.json @@ -98,7 +98,7 @@ "Disabled booking options text": "Codes, Schecks und Bonusnächte sind auf der neuen Website noch nicht verfügbar.", "Discard changes": "Änderungen verwerfen", "Discard unsaved changes?": "Nicht gespeicherte Änderungen verwerfen?", - "Distance to city centre": "{number}km zum Stadtzentrum", + "Distance to city centre": "{number} km zum Stadtzentrum", "Distance to hotel": "Entfernung zum Hotel", "Do you want to start the day with Scandics famous breakfast buffé?": "Möchten Sie den Tag mit Scandics berühmtem Frühstücksbuffet beginnen?", "Done": "Fertig", @@ -329,6 +329,7 @@ "Terms and conditions": "Geschäftsbedingungen", "Thank you": "Danke", "Theatre": "Theater", + "There are no rooms available that match your request": "Es sind keine Zimmer verfügbar, die Ihrer Anfrage entsprechen", "There are no transactions to display": "Es sind keine Transaktionen zum Anzeigen vorhanden", "Things nearby HOTEL_NAME": "Dinge in der Nähe von {hotelName}", "To get the member price {amount} {currency}, log in or join when completing the booking.": "Um den Mitgliederpreis von {amount} {currency} zu erhalten, loggen Sie sich ein oder treten Sie Scandic Friends bei, wenn Sie die Buchung abschließen.", diff --git a/i18n/dictionaries/en.json b/i18n/dictionaries/en.json index 44f400079..6d3712067 100644 --- a/i18n/dictionaries/en.json +++ b/i18n/dictionaries/en.json @@ -106,7 +106,7 @@ "Disabled booking options text": "Codes, cheques and reward nights aren't available on the new website yet.", "Discard changes": "Discard changes", "Discard unsaved changes?": "Discard unsaved changes?", - "Distance to city centre": "{number}km to city centre", + "Distance to city centre": "{number} km to city centre", "Distance to hotel": "Distance to hotel", "Do you want to start the day with Scandics famous breakfast buffé?": "Do you want to start the day with Scandics famous breakfast buffé?", "Done": "Done", @@ -359,6 +359,7 @@ "Terms and conditions": "Terms and conditions", "Thank you": "Thank you", "Theatre": "Theatre", + "There are no rooms available that match your request": "There are no rooms available that match your request", "There are no transactions to display": "There are no transactions to display", "Things nearby HOTEL_NAME": "Things nearby {hotelName}", "To get the member price {amount} {currency}, log in or join when completing the booking.": "To get the member price {amount} {currency}, log in or join when completing the booking.", diff --git a/i18n/dictionaries/fi.json b/i18n/dictionaries/fi.json index fb538db4b..a067b87f5 100644 --- a/i18n/dictionaries/fi.json +++ b/i18n/dictionaries/fi.json @@ -98,7 +98,7 @@ "Disabled booking options text": "Koodit, sekit ja palkintoillat eivät ole vielä saatavilla uudella verkkosivustolla.", "Discard changes": "Hylkää muutokset", "Discard unsaved changes?": "Hylkäätkö tallentamattomat muutokset?", - "Distance to city centre": "{number}km Etäisyys kaupunkiin", + "Distance to city centre": "{number} km Etäisyys kaupunkiin", "Distance to hotel": "Etäisyys hotelliin", "Do you want to start the day with Scandics famous breakfast buffé?": "Haluatko aloittaa päiväsi Scandicsin kuuluisalla aamiaisbuffella?", "Done": "Valmis", @@ -331,6 +331,7 @@ "Terms and conditions": "Käyttöehdot", "Thank you": "Kiitos", "Theatre": "Teatteri", + "There are no rooms available that match your request": "Pyyntöäsi vastaavia huoneita ei ole saatavilla", "There are no transactions to display": "Näytettäviä tapahtumia ei ole", "Things nearby HOTEL_NAME": "Lähellä olevia asioita {hotelName}", "To get the member price {amount} {currency}, log in or join when completing the booking.": "Jäsenhintaan saavat sisäänkirjautuneet tai liittyneet jäsenet.", diff --git a/i18n/dictionaries/no.json b/i18n/dictionaries/no.json index 98dadb098..98d778f4c 100644 --- a/i18n/dictionaries/no.json +++ b/i18n/dictionaries/no.json @@ -97,7 +97,7 @@ "Disabled booking options text": "Koder, checks og belønningsnætter er enda ikke tilgjengelige på den nye nettsiden.", "Discard changes": "Forkaste endringer", "Discard unsaved changes?": "Forkaste endringer som ikke er lagret?", - "Distance to city centre": "{number}km til sentrum", + "Distance to city centre": "{number} km til sentrum", "Distance to hotel": "Avstand til hotell", "Do you want to start the day with Scandics famous breakfast buffé?": "Vil du starte dagen med Scandics berømte frokostbuffé?", "Done": "Ferdig", @@ -328,6 +328,7 @@ "Terms and conditions": "Vilkår og betingelser", "Thank you": "Takk", "Theatre": "Teater", + "There are no rooms available that match your request": "Det er ingen tilgjengelige rom som samsvarer med forespørselen din", "There are no transactions to display": "Det er ingen transaksjoner å vise", "Things nearby HOTEL_NAME": "Ting i nærheten av {hotelName}", "To get the member price {amount} {currency}, log in or join when completing the booking.": "For å få medlemsprisen {amount} {currency}, logg inn eller bli med når du fullfører bestillingen.", diff --git a/i18n/dictionaries/sv.json b/i18n/dictionaries/sv.json index 074c500e6..01c293426 100644 --- a/i18n/dictionaries/sv.json +++ b/i18n/dictionaries/sv.json @@ -97,7 +97,7 @@ "Disabled booking options text": "Koder, bonuscheckar och belöningsnätter är inte tillgängliga på den nya webbplatsen än.", "Discard changes": "Ignorera ändringar", "Discard unsaved changes?": "Vill du ignorera ändringar som inte har sparats?", - "Distance to city centre": "{number}km till centrum", + "Distance to city centre": "{number} km till centrum", "Distance to hotel": "Avstånd till hotell", "Do you want to start the day with Scandics famous breakfast buffé?": "Vill du starta dagen med Scandics berömda frukostbuffé?", "Done": "Klar", @@ -328,6 +328,7 @@ "Terms and conditions": "Allmänna villkor", "Thank you": "Tack", "Theatre": "Teater", + "There are no rooms available that match your request": "Det finns inga tillgängliga rum som matchar din förfrågan", "There are no transactions to display": "Det finns inga transaktioner att visa", "Things nearby HOTEL_NAME": "Saker i närheten av {hotelName}", "To get the member price {amount} {currency}, log in or join when completing the booking.": "För att få medlemsprisen {amount} {currency}, logga in eller bli medlem när du slutför bokningen.", diff --git a/types/components/hotelReservation/selectHotel/hotePriceListProps.ts b/types/components/hotelReservation/selectHotel/hotePriceListProps.ts new file mode 100644 index 000000000..2464fad43 --- /dev/null +++ b/types/components/hotelReservation/selectHotel/hotePriceListProps.ts @@ -0,0 +1,5 @@ +import type { HotelsAvailabilityPrices } from "@/server/routers/hotels/output" + +export type HotelPriceListProps = { + price: HotelsAvailabilityPrices +} diff --git a/types/components/hotelReservation/selectHotel/hotelLogoProps.ts b/types/components/hotelReservation/selectHotel/hotelLogoProps.ts new file mode 100644 index 000000000..8f19490a6 --- /dev/null +++ b/types/components/hotelReservation/selectHotel/hotelLogoProps.ts @@ -0,0 +1,6 @@ +import { Hotel } from "@/types/hotel" + +export type HotelLogoProps = { + hotelId: Hotel["operaId"] + hotelType: Hotel["hotelType"] +} diff --git a/types/components/hotelReservation/selectHotel/priceCardProps.ts b/types/components/hotelReservation/selectHotel/priceCardProps.ts new file mode 100644 index 000000000..d339b4a06 --- /dev/null +++ b/types/components/hotelReservation/selectHotel/priceCardProps.ts @@ -0,0 +1,5 @@ +export type PriceCardProps = { + currency: string + memberAmount?: string | undefined + regularAmount?: string | undefined +} diff --git a/types/components/hotelReservation/tripAdvisorProps.ts b/types/components/hotelReservation/tripAdvisorProps.ts new file mode 100644 index 000000000..62636cdcc --- /dev/null +++ b/types/components/hotelReservation/tripAdvisorProps.ts @@ -0,0 +1,3 @@ +export type TripAdvisorProps = { + rating: number +} diff --git a/types/enums/signatureHotel.ts b/types/enums/signatureHotel.ts new file mode 100644 index 000000000..1f5b68d6a --- /dev/null +++ b/types/enums/signatureHotel.ts @@ -0,0 +1,7 @@ +export enum SignatureHotelEnum { + DowntownCamper = "879", + GrandHotelOslo = "340", + Haymarket = "890", + HotelNorge = "785", + Marski = "605", +}