diff --git a/app/[lang]/(live)/(public)/hotelreservation/select-rate/page.tsx b/app/[lang]/(live)/(public)/hotelreservation/select-rate/page.tsx index fd6fed22c..4a48e4f40 100644 --- a/app/[lang]/(live)/(public)/hotelreservation/select-rate/page.tsx +++ b/app/[lang]/(live)/(public)/hotelreservation/select-rate/page.tsx @@ -1,5 +1,6 @@ import { serverClient } from "@/lib/trpc/server" +import FlexibilitySelection from "@/components/HotelReservation/SelectRate/FlexibilitySelection" import RoomSelection from "@/components/HotelReservation/SelectRate/RoomSelection" import styles from "./page.module.css" @@ -15,6 +16,7 @@ export default async function SelectRate() {
Hotel info TBI
+
) diff --git a/components/HotelReservation/SelectRate/FlexibilitySelection/flexibilitySelection.module.css b/components/HotelReservation/SelectRate/FlexibilitySelection/flexibilitySelection.module.css new file mode 100644 index 000000000..6c6a80b90 --- /dev/null +++ b/components/HotelReservation/SelectRate/FlexibilitySelection/flexibilitySelection.module.css @@ -0,0 +1,28 @@ +.wrapper { + border-bottom: 1px solid rgba(17, 17, 17, 0.2); + padding-bottom: var(--Spacing-x3); +} + +.header { + margin-top: var(--Spacing-x2); + margin-bottom: var(--Spacing-x2); +} + +.list { + margin-top: var(--Spacing-x4); + list-style: none; + display: grid; + grid-template-columns: 1fr 1fr 1fr; + column-gap: var(--Spacing-x2); + row-gap: var(--Spacing-x4); +} + +.list > li { + width: 100%; +} + +.list input[type="radio"] { + opacity: 0; + position: fixed; + width: 0; +} diff --git a/components/HotelReservation/SelectRate/FlexibilitySelection/index.tsx b/components/HotelReservation/SelectRate/FlexibilitySelection/index.tsx new file mode 100644 index 000000000..592732f86 --- /dev/null +++ b/components/HotelReservation/SelectRate/FlexibilitySelection/index.tsx @@ -0,0 +1,62 @@ +import Header from "@/components/Section/Header" +import { getIntl } from "@/i18n" + +import SelectionCard from "../SelectionCard" + +import styles from "./flexibilitySelection.module.css" + +const choices = [ + { + value: "non-refundable", + name: "Non refundable", + payment: "Pay now", + pricePerNight: 0, + membersPricePerNight: 0, + currency: "SEK", + }, + { + value: "rebook", + name: "Free rebooking", + payment: "Pay now", + pricePerNight: 77, + membersPricePerNight: 20, + currency: "SEK", + }, + { + value: "cancellation", + name: "Free cancellation", + payment: "Pay later", + pricePerNight: 132, + membersPricePerNight: 80, + currency: "SEK", + }, +] + +export default async function FlexibilitySelection() { + const { formatMessage } = await getIntl() + + return ( +
+
+
+
+ + +
+ ) +} diff --git a/components/HotelReservation/SelectRate/RoomSelection/RoomCard/roomCard.module.css b/components/HotelReservation/SelectRate/RoomSelection/RoomCard/roomCard.module.css index ffbf2266e..b657f057e 100644 --- a/components/HotelReservation/SelectRate/RoomSelection/RoomCard/roomCard.module.css +++ b/components/HotelReservation/SelectRate/RoomSelection/RoomCard/roomCard.module.css @@ -8,6 +8,10 @@ border: 1px solid rgba(77, 0, 27, 0.1); } +input[type="radio"]:checked + .card { + border: 3px solid var(--Scandic-Brand-Scandic-Red); +} + .cardBody { padding: var(--Spacing-x2); display: flex; diff --git a/components/HotelReservation/SelectRate/RoomSelection/index.tsx b/components/HotelReservation/SelectRate/RoomSelection/index.tsx index 1b802581f..4e6588fa3 100644 --- a/components/HotelReservation/SelectRate/RoomSelection/index.tsx +++ b/components/HotelReservation/SelectRate/RoomSelection/index.tsx @@ -11,7 +11,7 @@ export default async function RoomSelection({ rooms }: RoomSelectionProps) { const { formatMessage } = await getIntl() return ( -
+
+
+ + {title} + +
i
+
+ {subtext} + +
+ + {/* TODO: Handle currency and this whole line of text in a better way through intl */} + {price} {currency}/{formatMessage({ id: "night" })} + + + + {/* TODO: Handle currency and this whole line of text in a better way through intl */} + {formatMessage({ id: "Members" })} {membersPrice} {currency}/ + {formatMessage({ id: "night" })} + +
+
+ ) +} diff --git a/components/HotelReservation/SelectRate/SelectionCard/selectionCard.module.css b/components/HotelReservation/SelectRate/SelectionCard/selectionCard.module.css new file mode 100644 index 000000000..37ecf85a3 --- /dev/null +++ b/components/HotelReservation/SelectRate/SelectionCard/selectionCard.module.css @@ -0,0 +1,30 @@ +.card { + padding: var(--Spacing-x2); + display: flex; + flex-direction: column; + gap: var(--Spacing-x2); + background-color: #fff; + border-radius: var(--Corner-radius-Small); + border: 1px solid rgba(77, 0, 27, 0.1); + text-align: center; +} + +input[type="radio"]:checked + .card { + border: 3px solid var(--Scandic-Brand-Scandic-Red); +} + +.name { + display: inline-block; +} +.nameInfo { + float: right; +} + +.price { + font-size: var(--typography-Body-Bold-fontSize); + font-weight: 600; +} + +.membersPrice { + font-size: var(--typography-Footnote-Regular-fontSize); +} diff --git a/i18n/dictionaries/da.json b/i18n/dictionaries/da.json index 4b4e55e2c..462e7cca1 100644 --- a/i18n/dictionaries/da.json +++ b/i18n/dictionaries/da.json @@ -37,6 +37,7 @@ "Empty": "Empty", "Explore all levels and benefits": "Udforsk alle niveauer og fordele", "Find booking": "Find booking", + "Flexibility": "Fleksibilitet", "From": "Fra", "Get inspired": "Blive inspireret", "Go back to overview": "Gå tilbage til oversigten", @@ -48,6 +49,7 @@ "Log in": "Log på", "Log in here": "Log ind her", "Log out": "Log ud", + "Members": "Medlemmer", "Membership cards": "Medlemskort", "Membership ID": "Medlems-id", "Month": "Måned", diff --git a/i18n/dictionaries/de.json b/i18n/dictionaries/de.json index 020483999..2d9bf6d6e 100644 --- a/i18n/dictionaries/de.json +++ b/i18n/dictionaries/de.json @@ -37,6 +37,7 @@ "Empty": "Empty", "Explore all levels and benefits": "Entdecken Sie alle Levels und Vorteile", "Find booking": "Buchung finden", + "Flexibility": "Flexibilität", "From": "Fromm", "Get inspired": "Lass dich inspirieren", "Go back to overview": "Zurück zur Übersicht", @@ -48,6 +49,7 @@ "Log in": "Anmeldung", "Log in here": "Hier anmelden", "Log out": "Ausloggen", + "Members": "Mitglieder", "Membership cards": "Mitgliedskarten", "Membership ID": "Mitglieds-ID", "Month": "Monat", diff --git a/i18n/dictionaries/en.json b/i18n/dictionaries/en.json index b59ff7859..5ad6b88dd 100644 --- a/i18n/dictionaries/en.json +++ b/i18n/dictionaries/en.json @@ -38,6 +38,7 @@ "Empty": "Empty", "Explore all levels and benefits": "Explore all levels and benefits", "Find booking": "Find booking", + "Flexibility": "Flexibility", "From": "From", "Get inspired": "Get inspired", "Go back to overview": "Go back to overview", @@ -49,6 +50,7 @@ "Log in": "Log in", "Log in here": "Log in here", "Log out": "Log out", + "Members": "Members", "Membership cards": "Membership cards", "Membership ID": "Membership ID", "Month": "Month", diff --git a/i18n/dictionaries/fi.json b/i18n/dictionaries/fi.json index e3745bb03..d9b7a37ae 100644 --- a/i18n/dictionaries/fi.json +++ b/i18n/dictionaries/fi.json @@ -37,6 +37,7 @@ "Empty": "Empty", "Explore all levels and benefits": "Tutustu kaikkiin tasoihin ja etuihin", "Find booking": "Etsi varaus", + "Flexibility": "Joustavuus", "From": "From", "Get inspired": "Inspiroidu", "Go back to overview": "Palaa yleiskatsaukseen", @@ -48,6 +49,7 @@ "Log in": "Kirjaudu sisään", "Log in here": "Kirjaudu sisään tästä", "Log out": "Kirjautua ulos", + "Members": "Jäsenet", "Membership cards": "Jäsenkortit", "Membership ID": "Jäsentunnus", "Month": "Kuukausi", diff --git a/i18n/dictionaries/no.json b/i18n/dictionaries/no.json index e67d844ac..2dfd04ba8 100644 --- a/i18n/dictionaries/no.json +++ b/i18n/dictionaries/no.json @@ -37,6 +37,7 @@ "Empty": "Empty", "Explore all levels and benefits": "Utforsk alle nivåer og fordeler", "Find booking": "Finn booking", + "Flexibility": "Fleksibilitet", "From": "Fra", "Get inspired": "Bli inspirert", "Go back to overview": "Gå tilbake til oversikten", @@ -48,6 +49,7 @@ "Log in": "Logg Inn", "Log in here": "Logg inn her", "Log out": "Logg ut", + "Members": "Medlemmer", "Membership cards": "Medlemskort", "Membership ID": "Medlems-ID", "Month": "Måned", diff --git a/i18n/dictionaries/sv.json b/i18n/dictionaries/sv.json index 6f0e99cde..443f0f829 100644 --- a/i18n/dictionaries/sv.json +++ b/i18n/dictionaries/sv.json @@ -37,6 +37,7 @@ "Empty": "Tom", "Explore all levels and benefits": "Utforska alla nivåer och fördelar", "Find booking": "Hitta bokning", + "Flexibility": "Flexibilitet", "From": "Från", "Get inspired": "Bli inspirerad", "Go back to overview": "Gå tillbaka till översikten", @@ -48,6 +49,7 @@ "Log in": "Logga in", "Log in here": "Logga in här", "Log out": "Logga ut", + "Members": "Medlemmar", "Membership cards": "Medlemskort", "Membership ID": "Medlems-ID", "Month": "Månad", diff --git a/types/components/hotelReservation/selectRate/selectionCard.ts b/types/components/hotelReservation/selectRate/selectionCard.ts new file mode 100644 index 000000000..7348be8b5 --- /dev/null +++ b/types/components/hotelReservation/selectRate/selectionCard.ts @@ -0,0 +1,7 @@ +export type SelectionCardProps = { + title: string + subtext: string + price: number + membersPrice?: number + currency: string +}