From eeae38ec1d5c7aec238bb68238f6df4de901f522 Mon Sep 17 00:00:00 2001 From: Simon Emanuelsson Date: Tue, 8 Oct 2024 16:37:58 +0200 Subject: [PATCH] feat: add selected room card --- .../hotelreservation/[step]/layout.module.css | 20 +++++ .../hotelreservation/[step]/layout.tsx | 38 ++++++++ .../hotelreservation/[step]/page.module.css | 30 ------- .../(public)/hotelreservation/[step]/page.tsx | 90 ++++++++----------- .../EnterDetails/SelectedRoom/index.tsx | 77 ++++++++++++++++ .../SelectedRoom/selectedRoom.module.css | 51 +++++++++++ .../hotelSelectionHeader.module.css | 17 +++- .../HotelSelectionHeader/index.tsx | 58 ++++++------ .../SelectRate/Payment/index.tsx | 4 +- .../sectionAccordion.module.css | 2 +- components/Icons/icon.module.css | 5 ++ components/Icons/variants.ts | 5 +- components/Lightbox/FullView.tsx | 6 +- .../TempDesignSystem/Button/button.module.css | 13 +-- .../Text/Subtitle/subtitle.module.css | 8 +- .../Text/Subtitle/variants.ts | 1 + i18n/dictionaries/da.json | 2 +- i18n/dictionaries/de.json | 1 + i18n/dictionaries/en.json | 2 +- i18n/dictionaries/fi.json | 2 +- i18n/dictionaries/no.json | 5 +- i18n/dictionaries/sv.json | 4 +- 22 files changed, 303 insertions(+), 138 deletions(-) create mode 100644 app/[lang]/(live)/(public)/hotelreservation/[step]/layout.module.css create mode 100644 app/[lang]/(live)/(public)/hotelreservation/[step]/layout.tsx delete mode 100644 app/[lang]/(live)/(public)/hotelreservation/[step]/page.module.css create mode 100644 components/HotelReservation/EnterDetails/SelectedRoom/index.tsx create mode 100644 components/HotelReservation/EnterDetails/SelectedRoom/selectedRoom.module.css diff --git a/app/[lang]/(live)/(public)/hotelreservation/[step]/layout.module.css b/app/[lang]/(live)/(public)/hotelreservation/[step]/layout.module.css new file mode 100644 index 000000000..f40fca31d --- /dev/null +++ b/app/[lang]/(live)/(public)/hotelreservation/[step]/layout.module.css @@ -0,0 +1,20 @@ +.layout { + min-height: 100dvh; + background-color: var(--Scandic-Brand-Warm-White); +} + +.content { + display: grid; + gap: var(--Spacing-x3) var(--Spacing-x9); + grid-template-columns: 1fr 340px; + grid-template-rows: auto 1fr; + margin: var(--Spacing-x5) auto 0; + max-width: var(--max-width-navigation); + padding: var(--Spacing-x6) var(--Spacing-x2) 0; +} + +.summary { + align-self: flex-start; + grid-column: 2 / 3; + grid-row: 1/-1; +} diff --git a/app/[lang]/(live)/(public)/hotelreservation/[step]/layout.tsx b/app/[lang]/(live)/(public)/hotelreservation/[step]/layout.tsx new file mode 100644 index 000000000..c234123a4 --- /dev/null +++ b/app/[lang]/(live)/(public)/hotelreservation/[step]/layout.tsx @@ -0,0 +1,38 @@ +import { redirect } from "next/navigation" + +import { serverClient } from "@/lib/trpc/server" + +import SelectedRoom from "@/components/HotelReservation/EnterDetails/SelectedRoom" +import HotelSelectionHeader from "@/components/HotelReservation/HotelSelectionHeader" +import Summary from "@/components/HotelReservation/SelectRate/Summary" + +import styles from "./layout.module.css" + +import type { LangParams, LayoutArgs } from "@/types/params" + +export default async function StepLayout({ + children, + params, +}: React.PropsWithChildren>) { + const hotel = await serverClient().hotel.hotelData.get({ + hotelId: "811", + language: params.lang, + }) + + if (!hotel?.data) { + redirect(`/${params.lang}`) + } + + return ( +
+ +
+ + {children} + +
+
+ ) +} diff --git a/app/[lang]/(live)/(public)/hotelreservation/[step]/page.module.css b/app/[lang]/(live)/(public)/hotelreservation/[step]/page.module.css deleted file mode 100644 index 8962fd5ee..000000000 --- a/app/[lang]/(live)/(public)/hotelreservation/[step]/page.module.css +++ /dev/null @@ -1,30 +0,0 @@ -.page { - min-height: 100dvh; - padding-top: var(--Spacing-x6); - padding-left: var(--Spacing-x2); - padding-right: var(--Spacing-x2); - background-color: var(--Scandic-Brand-Warm-White); -} - -.content { - max-width: 1134px; - margin-top: var(--Spacing-x5); - margin-left: auto; - margin-right: auto; - display: flex; - justify-content: space-between; - gap: var(--Spacing-x7); -} - -.section { - flex-grow: 1; -} - -.summary { - max-width: 340px; -} - -.form { - display: grid; - gap: var(--Spacing-x2); -} diff --git a/app/[lang]/(live)/(public)/hotelreservation/[step]/page.tsx b/app/[lang]/(live)/(public)/hotelreservation/[step]/page.tsx index 050aa0280..b853fc9bc 100644 --- a/app/[lang]/(live)/(public)/hotelreservation/[step]/page.tsx +++ b/app/[lang]/(live)/(public)/hotelreservation/[step]/page.tsx @@ -9,15 +9,11 @@ import { trpc } from "@/lib/trpc/client" import BedType from "@/components/HotelReservation/EnterDetails/BedType" import Breakfast from "@/components/HotelReservation/EnterDetails/Breakfast" import Details from "@/components/HotelReservation/EnterDetails/Details" -import HotelSelectionHeader from "@/components/HotelReservation/HotelSelectionHeader" import Payment from "@/components/HotelReservation/SelectRate/Payment" import SectionAccordion from "@/components/HotelReservation/SelectRate/SectionAccordion" -import Summary from "@/components/HotelReservation/SelectRate/Summary" import LoadingSpinner from "@/components/LoadingSpinner" -import styles from "./page.module.css" - -import { LangParams, PageArgs } from "@/types/params" +import type { LangParams, PageArgs } from "@/types/params" enum StepEnum { selectBed = "select-bed", @@ -75,51 +71,43 @@ export default function StepPage({ } return ( -
- -
-
- - - - - - - -
- - - - -
- -
-
+
+ + + + + + + +
+ + + + +
) } diff --git a/components/HotelReservation/EnterDetails/SelectedRoom/index.tsx b/components/HotelReservation/EnterDetails/SelectedRoom/index.tsx new file mode 100644 index 000000000..7812c6be6 --- /dev/null +++ b/components/HotelReservation/EnterDetails/SelectedRoom/index.tsx @@ -0,0 +1,77 @@ +"use client" + +import { useIntl } from "react-intl" + +import { EditIcon, ImageIcon } from "@/components/Icons" +import Button from "@/components/TempDesignSystem/Button" +import Link from "@/components/TempDesignSystem/Link" +import Footnote from "@/components/TempDesignSystem/Text/Footnote" +import Subtitle from "@/components/TempDesignSystem/Text/Subtitle" + +import styles from "./selectedRoom.module.css" + +export default function SelectedRoom() { + const intl = useIntl() + return ( +
+
+ +
+
+
+ + {intl.formatMessage({ id: "Your room" })} + +
+ {/** + * [TEMP] + * No translation on Subtitles as they will be derived + * from Room selection. + */} + + Cozy cabin + + + Free rebooking + + + Pay now + +
+
+ +
+
+ ) +} diff --git a/components/HotelReservation/EnterDetails/SelectedRoom/selectedRoom.module.css b/components/HotelReservation/EnterDetails/SelectedRoom/selectedRoom.module.css new file mode 100644 index 000000000..5e64327cf --- /dev/null +++ b/components/HotelReservation/EnterDetails/SelectedRoom/selectedRoom.module.css @@ -0,0 +1,51 @@ +.container { + background-color: var(--Base-Surface-Primary-light-Normal); + border-radius: var(--Corner-radius-Large); + display: grid; + grid-template-columns: 144px 1fr; + gap: var(--Spacing-x3); + padding: var(--Spacing-x2) var(--Spacing-x4) var(--Spacing-x2) + var(--Spacing-x2); +} + +.tempImage { + align-items: center; + background-color: lightgray; + border-radius: var(--Corner-radius-Medium); + display: flex; + height: auto; + justify-content: center; + min-height: 80px; +} + +.content { + align-items: center; + display: grid; + gap: var(--Spacing-x3); + grid-template-columns: 1fr auto; +} + +.textContainer { + display: grid; +} + +.label { + grid-column: 1 / -1; +} + +.text { + display: flex; + flex-wrap: wrap; + gap: var(--Spacing-x1); +} + +p.invertFontWeight { + font-weight: 400; +} + +.invertFontWeight:not(:last-of-type)::after, +.room::after { + color: var(--UI-Text-Medium-contrast); + content: "∙"; + padding-left: var(--Spacing-x1); +} diff --git a/components/HotelReservation/HotelSelectionHeader/hotelSelectionHeader.module.css b/components/HotelReservation/HotelSelectionHeader/hotelSelectionHeader.module.css index 9646ec746..268bfe4fe 100644 --- a/components/HotelReservation/HotelSelectionHeader/hotelSelectionHeader.module.css +++ b/components/HotelReservation/HotelSelectionHeader/hotelSelectionHeader.module.css @@ -1,10 +1,13 @@ .hotelSelectionHeader { - display: flex; - flex-direction: column; background-color: var(--Base-Surface-Subtle-Normal); padding: var(--Spacing-x3) var(--Spacing-x2); - justify-content: center; +} + +.hotelSelectionHeaderWrapper { + display: flex; + flex-direction: column; gap: var(--Spacing-x3); + justify-content: center; } .titleContainer { @@ -33,9 +36,15 @@ @media (min-width: 768px) { .hotelSelectionHeader { - flex-direction: row; padding: var(--Spacing-x4) var(--Spacing-x5); + } + + .hotelSelectionHeaderWrapper { + flex-direction: row; gap: var(--Spacing-x6); + max-width: var(--max-width-navigation); + margin: 0 auto; + width: 100%; } .titleContainer > h1 { diff --git a/components/HotelReservation/HotelSelectionHeader/index.tsx b/components/HotelReservation/HotelSelectionHeader/index.tsx index e34f05f37..222dceda1 100644 --- a/components/HotelReservation/HotelSelectionHeader/index.tsx +++ b/components/HotelReservation/HotelSelectionHeader/index.tsx @@ -19,35 +19,35 @@ export default function HotelSelectionHeader({ return (
-
- - {hotel.name} - -
- - {hotel.address.streetAddress}, {hotel.address.city} - -
- -
- - {intl.formatMessage( - { - id: "Distance to city centre", - }, - { number: hotel.location.distanceToCentre } - )} - -
-
-
- -
-
- - {hotel.hotelContent.texts.descriptions.short} - - +
+
+ + {hotel.name} + +
+ + {hotel.address.streetAddress}, {hotel.address.city} + +
+ +
+ + {intl.formatMessage( + { id: "Distance to city centre" }, + { number: hotel.location.distanceToCentre } + )} + +
+
+
+ +
+
+ + {hotel.hotelContent.texts.descriptions.short} + + +
) diff --git a/components/HotelReservation/SelectRate/Payment/index.tsx b/components/HotelReservation/SelectRate/Payment/index.tsx index 3ddf73c01..8216e8631 100644 --- a/components/HotelReservation/SelectRate/Payment/index.tsx +++ b/components/HotelReservation/SelectRate/Payment/index.tsx @@ -129,7 +129,7 @@ export default function Payment({ hotel }: PaymentProps) { name="payment-method" id="card" value="card" - checked={selectedPaymentMethod === "card"} + defaultChecked={selectedPaymentMethod === "card"} /> @@ -145,7 +145,7 @@ export default function Payment({ hotel }: PaymentProps) { name="payment-method" id={paymentOption} value={paymentOption} - checked={selectedPaymentMethod === paymentOption} + defaultChecked={selectedPaymentMethod === paymentOption} /> diff --git a/components/HotelReservation/SelectRate/SectionAccordion/sectionAccordion.module.css b/components/HotelReservation/SelectRate/SectionAccordion/sectionAccordion.module.css index 8c1a05ba4..653c98fad 100644 --- a/components/HotelReservation/SelectRate/SectionAccordion/sectionAccordion.module.css +++ b/components/HotelReservation/SelectRate/SectionAccordion/sectionAccordion.module.css @@ -40,7 +40,7 @@ .iconWrapper { position: relative; top: var(--Spacing-x1); - z-index: 10; + z-index: 2; } .circle { diff --git a/components/Icons/icon.module.css b/components/Icons/icon.module.css index 3fa235d32..bb86becdb 100644 --- a/components/Icons/icon.module.css +++ b/components/Icons/icon.module.css @@ -66,3 +66,8 @@ .blue * { fill: var(--UI-Input-Controls-Fill-Selected); } + +.baseButtonTertiaryOnFillNormal, +.baseButtonTertiaryOnFillNormal * { + fill: var(--Base-Button-Tertiary-On-Fill-Normal); +} diff --git a/components/Icons/variants.ts b/components/Icons/variants.ts index 12b9cb574..911d183da 100644 --- a/components/Icons/variants.ts +++ b/components/Icons/variants.ts @@ -5,19 +5,20 @@ import styles from "./icon.module.css" const config = { variants: { color: { + baseButtonTertiaryOnFillNormal: styles.baseButtonTertiaryOnFillNormal, baseIconLowContrast: styles.baseIconLowContrast, black: styles.black, + blue: styles.blue, burgundy: styles.burgundy, + green: styles.green, grey80: styles.grey80, pale: styles.pale, peach80: styles.peach80, primaryLightOnSurfaceAccent: styles.plosa, red: styles.red, - green: styles.green, white: styles.white, uiTextHighContrast: styles.uiTextHighContrast, uiTextMediumContrast: styles.uiTextMediumContrast, - blue: styles.blue, }, }, defaultVariants: { diff --git a/components/Lightbox/FullView.tsx b/components/Lightbox/FullView.tsx index 73f6dde98..5541d365b 100644 --- a/components/Lightbox/FullView.tsx +++ b/components/Lightbox/FullView.tsx @@ -49,10 +49,10 @@ export default function FullView({ className={styles.fullViewImage} > {image.alt}
diff --git a/components/TempDesignSystem/Button/button.module.css b/components/TempDesignSystem/Button/button.module.css index f6499c5c1..0afa102a1 100644 --- a/components/TempDesignSystem/Button/button.module.css +++ b/components/TempDesignSystem/Button/button.module.css @@ -64,10 +64,10 @@ a.default { justify-content: center; } -.icon { +.btn.icon:is(.small, .medium, .large) { align-items: center; display: flex; - gap: var(--Spacing-x-half); + gap: var(--Spacing-x1); justify-content: center; } @@ -76,7 +76,8 @@ a.default { font-size: var(--typography-Caption-Bold-fontSize); line-height: var(--typography-Caption-Bold-lineHeight); gap: var(--Spacing-x-quarter); - padding: calc(var(--Spacing-x1) + 2px) var(--Spacing-x2); /* Special case padding to adjust the missing border */ + padding: calc(var(--Spacing-x1) + 2px) var(--Spacing-x2); + /* Special case padding to adjust the missing border */ } .btn.small.secondary { @@ -85,7 +86,8 @@ a.default { .btn.medium { gap: var(--Spacing-x-half); - padding: calc(var(--Spacing-x-one-and-half) + 2px) var(--Spacing-x2); /* Special case padding to adjust the missing border */ + padding: calc(var(--Spacing-x-one-and-half) + 2px) var(--Spacing-x2); + /* Special case padding to adjust the missing border */ } .medium.secondary { @@ -94,7 +96,8 @@ a.default { .btn.large { gap: var(--Spacing-x-half); - padding: calc(var(--Spacing-x2) + 2px) var(--Spacing-x3); /* Special case padding to adjust the missing border */ + padding: calc(var(--Spacing-x2) + 2px) var(--Spacing-x3); + /* Special case padding to adjust the missing border */ } .large.secondary { diff --git a/components/TempDesignSystem/Text/Subtitle/subtitle.module.css b/components/TempDesignSystem/Text/Subtitle/subtitle.module.css index 8fdac30c4..22d09e16e 100644 --- a/components/TempDesignSystem/Text/Subtitle/subtitle.module.css +++ b/components/TempDesignSystem/Text/Subtitle/subtitle.module.css @@ -10,7 +10,7 @@ 0.3vw + 15px, var(--typography-Subtitle-1-Desktop-fontSize) ); - font-weight: 600; + font-weight: 500; letter-spacing: var(--typography-Subtitle-1-letterSpacing); line-height: var(--typography-Subtitle-1-lineHeight); } @@ -22,7 +22,7 @@ 0.3vw + 15px, var(--typography-Subtitle-2-Desktop-fontSize) ); - font-weight: 600; + font-weight: 500; letter-spacing: var(--typography-Subtitle-2-letterSpacing); line-height: var(--typography-Subtitle-2-lineHeight); } @@ -62,3 +62,7 @@ .uiTextHighContrast { color: var(--UI-Text-High-contrast); } + +.uiTextMediumContrast { + color: var(--UI-Text-Medium-contrast); +} diff --git a/components/TempDesignSystem/Text/Subtitle/variants.ts b/components/TempDesignSystem/Text/Subtitle/variants.ts index 7a8faa54c..3e36d39e0 100644 --- a/components/TempDesignSystem/Text/Subtitle/variants.ts +++ b/components/TempDesignSystem/Text/Subtitle/variants.ts @@ -9,6 +9,7 @@ const config = { burgundy: styles.burgundy, pale: styles.pale, uiTextHighContrast: styles.uiTextHighContrast, + uiTextMediumContrast: styles.uiTextMediumContrast, }, textAlign: { center: styles.center, diff --git a/i18n/dictionaries/da.json b/i18n/dictionaries/da.json index 1d5d11564..c2286337b 100644 --- a/i18n/dictionaries/da.json +++ b/i18n/dictionaries/da.json @@ -130,7 +130,6 @@ "Join at no cost": "Tilmeld dig uden omkostninger", "Join Scandic Friends": "Tilmeld dig Scandic Friends", "King bed": "Kingsize-seng", - "km to city center": "km til byens centrum", "Language": "Sprog", "Lastname": "Efternavn", "Latest searches": "Seneste søgninger", @@ -319,6 +318,7 @@ "Your details": "Dine oplysninger", "Your level": "Dit niveau", "Your points to spend": "Dine brugbare point", + "Your room": "Dit værelse", "Zip code": "Postnummer", "Zoo": "Zoo", "Zoom in": "Zoom ind", diff --git a/i18n/dictionaries/de.json b/i18n/dictionaries/de.json index bbb961cc5..15c34b224 100644 --- a/i18n/dictionaries/de.json +++ b/i18n/dictionaries/de.json @@ -319,6 +319,7 @@ "Your details": "Ihre Angaben", "Your level": "Dein level", "Your points to spend": "Meine Punkte", + "Your room": "Ihr Zimmer", "Zip code": "PLZ", "Zoo": "Zoo", "Zoom in": "Vergrößern", diff --git a/i18n/dictionaries/en.json b/i18n/dictionaries/en.json index fa2bbf272..c082e8eda 100644 --- a/i18n/dictionaries/en.json +++ b/i18n/dictionaries/en.json @@ -130,7 +130,6 @@ "Join at no cost": "Join at no cost", "Join Scandic Friends": "Join Scandic Friends", "King bed": "King bed", - "km to city center": "km to city center", "Language": "Language", "Lastname": "Lastname", "Latest searches": "Latest searches", @@ -319,6 +318,7 @@ "Your details": "Your details", "Your level": "Your level", "Your points to spend": "Your points to spend", + "Your room": "Your room", "Zip code": "Zip code", "Zoo": "Zoo", "Zoom in": "Zoom in", diff --git a/i18n/dictionaries/fi.json b/i18n/dictionaries/fi.json index 63a1b86c9..36d23113b 100644 --- a/i18n/dictionaries/fi.json +++ b/i18n/dictionaries/fi.json @@ -130,7 +130,6 @@ "Join at no cost": "Liity maksutta", "Join Scandic Friends": "Liity jäseneksi", "King bed": "King-vuode", - "km to city center": "km keskustaan", "Language": "Kieli", "Lastname": "Sukunimi", "Latest searches": "Viimeisimmät haut", @@ -320,6 +319,7 @@ "Your details": "Tietosi", "Your level": "Tasosi", "Your points to spend": "Käytettävissä olevat pisteesi", + "Your room": "Sinun huoneesi", "Zip code": "Postinumero", "Zoo": "Eläintarha", "Zoom in": "Lähennä", diff --git a/i18n/dictionaries/no.json b/i18n/dictionaries/no.json index 44b3f3456..574e69d9e 100644 --- a/i18n/dictionaries/no.json +++ b/i18n/dictionaries/no.json @@ -20,7 +20,6 @@ "Approx.": "Ca.", "Are you sure you want to remove the card ending with {lastFourDigits} from your member profile?": "Er du sikker på at du vil fjerne kortet som slutter på {lastFourDigits} fra medlemsprofilen din?", "Arrival date": "Ankomstdato", - "as of today": "per i dag", "As our": "Som vår {level}", "As our Close Friend": "Som vår nære venn", "At latest": "Senest", @@ -95,9 +94,9 @@ "Explore all levels and benefits": "Utforsk alle nivåer og fordeler", "Explore nearby": "Utforsk i nærheten", "Extras to your booking": "Tilvalg til bestillingen din", + "FAQ": "FAQ", "Failed to delete credit card, please try again later.": "Kunne ikke slette kredittkortet, prøv igjen senere.", "Fair": "Messe", - "FAQ": "FAQ", "Find booking": "Finn booking", "Find hotels": "Finn hotell", "Firstname": "Fornavn", @@ -129,7 +128,6 @@ "Join at no cost": "Bli med uten kostnad", "Join Scandic Friends": "Bli med i Scandic Friends", "King bed": "King-size-seng", - "km to city center": "km til sentrum", "Language": "Språk", "Lastname": "Etternavn", "Latest searches": "Siste søk", @@ -318,6 +316,7 @@ "Your details": "Dine detaljer", "Your level": "Ditt nivå", "Your points to spend": "Dine brukbare poeng", + "Your room": "Rommet ditt", "Zip code": "Post kode", "Zoo": "Dyrehage", "Zoom in": "Zoom inn", diff --git a/i18n/dictionaries/sv.json b/i18n/dictionaries/sv.json index 5c337e2d5..de7bcdc46 100644 --- a/i18n/dictionaries/sv.json +++ b/i18n/dictionaries/sv.json @@ -20,7 +20,6 @@ "Approx.": "Ca.", "Are you sure you want to remove the card ending with {lastFourDigits} from your member profile?": "Är du säker på att du vill ta bort kortet som slutar med {lastFourDigits} från din medlemsprofil?", "Arrival date": "Ankomstdatum", - "as of today": "per idag", "As our": "Som vår {level}", "As our Close Friend": "Som vår nära vän", "At latest": "Senast", @@ -130,7 +129,6 @@ "Join at no cost": "Gå med utan kostnad", "Join Scandic Friends": "Gå med i Scandic Friends", "King bed": "King size-säng", - "km to city center": "km till stadens centrum", "Language": "Språk", "Lastname": "Efternamn", "Latest searches": "Senaste sökningarna", @@ -284,7 +282,6 @@ "TUI Points": "TUI Points", "Type of bed": "Sängtyp", "Type of room": "Rumstyp", - "uppercase letter": "stor bokstav", "Use bonus cheque": "Använd bonuscheck", "Use code/voucher": "Använd kod/voucher", "User information": "Användarinformation", @@ -319,6 +316,7 @@ "Your details": "Dina uppgifter", "Your level": "Din nivå", "Your points to spend": "Dina spenderbara poäng", + "Your room": "Ditt rum", "Zip code": "Postnummer", "Zoo": "Djurpark", "Zoom in": "Zooma in",