diff --git a/app/[lang]/(live)/(public)/hotelreservation/booking-confirmation/page.module.css b/app/[lang]/(live)/(public)/hotelreservation/booking-confirmation/page.module.css new file mode 100644 index 000000000..cb5b6f63e --- /dev/null +++ b/app/[lang]/(live)/(public)/hotelreservation/booking-confirmation/page.module.css @@ -0,0 +1,30 @@ +.main { + display: flex; + flex-direction: column; + align-items: center; + gap: var(--Spacing-x4); + padding: var(--Spacing-x4) var(--Spacing-x4); + background-color: var(--Scandic-Brand-Warm-White); + min-height: 100dvh; +} + +.section { + display: flex; + flex-direction: column; + gap: var(--Spacing-x3); + width: 100%; + max-width: 525px; +} + +.buttons { + display: flex; + flex-direction: column; + align-items: center; + gap: var(--Spacing-x2); +} + +.button { + width: 100%; + max-width: 240px; + justify-content: center; +} diff --git a/app/[lang]/(live)/(public)/hotelreservation/booking-confirmation/page.tsx b/app/[lang]/(live)/(public)/hotelreservation/booking-confirmation/page.tsx new file mode 100644 index 000000000..7d2000906 --- /dev/null +++ b/app/[lang]/(live)/(public)/hotelreservation/booking-confirmation/page.tsx @@ -0,0 +1,48 @@ +import ConfirmationCard from "@/components/HotelReservation/BookingConfirmation/ConfirmationCard" +import ConfirmationSummary from "@/components/HotelReservation/BookingConfirmation/ConfirmationSummary" +import ConfirmationTimes from "@/components/HotelReservation/BookingConfirmation/ConfirmationTimes" +import Button from "@/components/TempDesignSystem/Button" +import Body from "@/components/TempDesignSystem/Text/Body" +import Title from "@/components/TempDesignSystem/Text/Title" + +import styles from "./page.module.css" + +export default function BookingConfirmationPage() { + return ( +
+
+
+ Thank you + + We look forward to your visit! + +
+ + We have sent a detailed confirmation of your booking to your email: + lisa.andersson@gmail.com. + +
+ + +
+
+ + + +
+ ) +} diff --git a/components/HotelReservation/BookingConfirmation/ConfirmationCard/confirmationCard.module.css b/components/HotelReservation/BookingConfirmation/ConfirmationCard/confirmationCard.module.css new file mode 100644 index 000000000..cca9b44a4 --- /dev/null +++ b/components/HotelReservation/BookingConfirmation/ConfirmationCard/confirmationCard.module.css @@ -0,0 +1,41 @@ +.test { + display: flex; + width: 100%; + max-width: 365px; + background-color: var(--Base-Surface-Primary-light-Normal); + border-radius: var(--Corner-radius-Small); + overflow: hidden; +} + +.image { + height: 100%; + width: 100%; + max-width: 105px; + object-fit: cover; +} + +.info { + display: flex; + flex: 1; + flex-direction: column; + gap: var(--Spacing-x1); + padding: var(--Spacing-x2); + font-family: var(--typography-Caption-Regular-fontFamily); + font-size: var(--typography-Caption-Regular-fontSize); +} + +.hotel { + display: flex; + flex-direction: column; + gap: var(--Spacing-x-half); +} + +.stay { + display: flex; + flex-direction: column; + gap: var(--Spacing-x-half); +} +.dates { + display: flex; + align-items: center; +} diff --git a/components/HotelReservation/BookingConfirmation/ConfirmationCard/index.tsx b/components/HotelReservation/BookingConfirmation/ConfirmationCard/index.tsx new file mode 100644 index 000000000..77b2ffc4c --- /dev/null +++ b/components/HotelReservation/BookingConfirmation/ConfirmationCard/index.tsx @@ -0,0 +1,41 @@ +import { ArrowRightIcon, ScandicLogoIcon } from "@/components/Icons" +import Image from "@/components/Image" +import Title from "@/components/TempDesignSystem/Text/Title" + +import styles from "./confirmationCard.module.css" + +export default function ConfirmationCard() { + return ( +
+
+ +
+
+
+ + + Helsinki Hub + +
+
+ Kaisaniemenkatu 7, Helsinki + Call us at +358 300 870680 +
+
+ 1 night +
+ 2024.03.09 + + 2024.03.10 +
+
+
+
+ ) +} diff --git a/components/HotelReservation/BookingConfirmation/ConfirmationSummary/confirmationSummary.module.css b/components/HotelReservation/BookingConfirmation/ConfirmationSummary/confirmationSummary.module.css new file mode 100644 index 000000000..929113390 --- /dev/null +++ b/components/HotelReservation/BookingConfirmation/ConfirmationSummary/confirmationSummary.module.css @@ -0,0 +1,13 @@ +.section { + width: 100%; + max-width: 365px; +} + +.summary { + display: flex; + justify-content: space-between; + padding: var(--Spacing-x2) var(--Spacing-x0); + font-family: var(--typography-Caption-Regular-fontFamily); + font-size: var(--typography-Caption-Regular-fontSize); + border-bottom: 1px solid var(--Base-Border-Subtle); +} diff --git a/components/HotelReservation/BookingConfirmation/ConfirmationSummary/index.tsx b/components/HotelReservation/BookingConfirmation/ConfirmationSummary/index.tsx new file mode 100644 index 000000000..3acf67fa5 --- /dev/null +++ b/components/HotelReservation/BookingConfirmation/ConfirmationSummary/index.tsx @@ -0,0 +1,33 @@ +import React from "react" + +import Title from "@/components/TempDesignSystem/Text/Title" +import { getIntl } from "@/i18n" + +import styles from "./confirmationSummary.module.css" + +export default async function ConfirmationSummary() { + const intl = await getIntl() + return ( +
+ + {intl.formatMessage({ id: "Summary" })} + +
+ Type of room: Standard Room + 1648 SEK +
+
+ Type of bed: King Bed + 0 SEK +
+
+ Breakfast: Breakfast Buffé + 198 SEK +
+
+ Flexibility: Free Rebooking + 200 SEK +
+
+ ) +} diff --git a/components/HotelReservation/BookingConfirmation/ConfirmationTimes/confirmationTimes.module.css b/components/HotelReservation/BookingConfirmation/ConfirmationTimes/confirmationTimes.module.css new file mode 100644 index 000000000..67b33ac0d --- /dev/null +++ b/components/HotelReservation/BookingConfirmation/ConfirmationTimes/confirmationTimes.module.css @@ -0,0 +1,19 @@ +.section { + display: flex; + justify-content: space-between; + padding: var(--Spacing-x2); + border-radius: var(--Corner-radius-Small); + background-color: var(--Base-Surface-Primary-dark-Normal); + width: 100%; + max-width: 365px; +} + +.breakfast, +.checkIn, +.checkOut { + display: flex; + flex-direction: column; + gap: var(--Spacing-x-half); + font-family: var(--typography-Caption-Regular-fontFamily); + font-size: var(--typography-Caption-Regular-fontSize); +} diff --git a/components/HotelReservation/BookingConfirmation/ConfirmationTimes/index.tsx b/components/HotelReservation/BookingConfirmation/ConfirmationTimes/index.tsx new file mode 100644 index 000000000..19bb0d71f --- /dev/null +++ b/components/HotelReservation/BookingConfirmation/ConfirmationTimes/index.tsx @@ -0,0 +1,29 @@ +import React from "react" + +import Body from "@/components/TempDesignSystem/Text/Body" +import { getIntl } from "@/i18n" + +import styles from "./confirmationTimes.module.css" + +export default async function ConfirmationTimes() { + const intl = await getIntl() + return ( +
+
+ {intl.formatMessage({ id: "Breakfast" })} + Mon-Fri 06:30-10:00 + Mon-Fri 06:30-10:00 +
+
+ {intl.formatMessage({ id: "Check in" })} + From + 15:00 +
+
+ {intl.formatMessage({ id: "Check out" })} + At latest + 12:00 +
+
+ ) +} diff --git a/i18n/dictionaries/en.json b/i18n/dictionaries/en.json index 528410878..5900321bb 100644 --- a/i18n/dictionaries/en.json +++ b/i18n/dictionaries/en.json @@ -149,6 +149,9 @@ "Hotel facilities": "Hotel facilities", "Hotel surroundings": "Hotel surroundings", "Show map": "Show map", + "Check in": "Check in", + "Check out": "Check out", + "Summary": "Summary", "Where to": "Where to", "When": "When", "Rooms & Guests": "Rooms & Guests",