feat(SW-73): Create breakfast selection

app/[lang]/(live)/(public)/hotelreservation/select-rate/page.tsx

@@ -1,5 +1,6 @@
 import { serverClient } from "@/lib/trpc/server"
 
+import BreakfastSelection from "@/components/HotelReservation/SelectRate/BreakfastSelection"
 import FlexibilitySelection from "@/components/HotelReservation/SelectRate/FlexibilitySelection"
 import RoomSelection from "@/components/HotelReservation/SelectRate/RoomSelection"
 
@@ -17,6 +18,7 @@ export default async function SelectRate() {
         <div className={styles.hotelInfo}>Hotel info TBI</div>
         <RoomSelection rooms={rooms} />
         <FlexibilitySelection />
+        <BreakfastSelection />
       </main>
     </div>
   )

components/HotelReservation/SelectRate/BreakfastSelection/breakfastSelection.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;
+  column-gap: var(--Spacing-x2);
+  row-gap: var(--Spacing-x4);
+}
+
+.list > li {
+  width: 100%;
+}
+
+.list input[type="radio"] {
+  opacity: 0;
+  position: fixed;
+  width: 0;
+}

components/HotelReservation/SelectRate/BreakfastSelection/index.tsx

@@ -0,0 +1,56 @@
+import Header from "@/components/Section/Header"
+import { getIntl } from "@/i18n"
+
+import SelectionCard from "../SelectionCard"
+
+import styles from "./breakfastSelection.module.css"
+
+const choices = [
+  {
+    value: "no",
+    name: "No breakfast",
+    payment: "Always cheeper to get it online",
+    pricePerNight: 0,
+    currency: "SEK",
+  },
+  {
+    value: "buffe",
+    name: "Breakfast buffé",
+    payment: "Always cheeper to get it online",
+    pricePerNight: 150,
+    currency: "SEK",
+  },
+]
+
+export default async function BreakfastSelection() {
+  const { formatMessage } = await getIntl()
+
+  return (
+    <div className={styles.wrapper}>
+      <div className={styles.header}>
+        <Header
+          title={formatMessage({ id: "Breakfast" })}
+          subtitle={formatMessage({
+            id: "Do you want to start the day with Scandics famous breakfast buffé?",
+          })}
+        />
+      </div>
+
+      <ul className={styles.list}>
+        {choices.map((choice) => (
+          <li key={choice.value}>
+            <label>
+              <input type="radio" name="breakfast" value={choice.value} />
+              <SelectionCard
+                title={choice.name}
+                subtext={choice.payment}
+                price={choice.pricePerNight}
+                currency={choice.currency}
+              />
+            </label>
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}

i18n/dictionaries/da.json

@@ -11,6 +11,7 @@
   "At the hotel": "På hotellet",
   "Book": "Bestil",
   "Booking number": "Bestillingsnummer",
+  "Breakfast": "Morgenmad",
   "by": "inden",
   "Cancel": "Afbestille",
   "Check out the credit cards saved to your profile. Pay with a saved card when signed in for a smoother web experience.": "Tjek de kreditkort, der er gemt på din profil. Betal med et gemt kort, når du er logget ind for en mere jævn weboplevelse.",
@@ -33,6 +34,7 @@
   "Day": "Dag",
   "Description": "Beskrivelse",
   "Discard changes": "Kassér ændringer",
+  "Do you want to start the day with Scandics famous breakfast buffé?": "Vil du starte dagen med Scandics berømte morgenbuffet?",
   "Edit": "Redigere",
   "Edit profile": "Rediger profil",
   "Email": "E-mail",

i18n/dictionaries/de.json

@@ -11,6 +11,7 @@
   "At the hotel": "Im Hotel",
   "Book": "Buch",
   "Booking number": "Buchungsnummer",
+  "Breakfast": "Frühstück",
   "by": "bis",
   "Cancel": "Stornieren",
   "Check out the credit cards saved to your profile. Pay with a saved card when signed in for a smoother web experience.": "Sehen Sie sich die in Ihrem Profil gespeicherten Kreditkarten an. Bezahlen Sie mit einer gespeicherten Karte, wenn Sie angemeldet sind, für ein reibungsloseres Web-Erlebnis.",
@@ -33,6 +34,7 @@
   "Day": "Tag",
   "Description": "Beschreibung",
   "Discard changes": "Änderungen verwerfen",
+  "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?",
   "Edit": "Bearbeiten",
   "Edit profile": "Profil bearbeiten",
   "Email": "Email",

i18n/dictionaries/en.json

@@ -11,6 +11,7 @@
   "At the hotel": "At the hotel",
   "Book": "Book",
   "Booking number": "Booking number",
+  "Breakfast": "Breakfast",
   "by": "by",
   "Cancel": "Cancel",
   "Check out the credit cards saved to your profile. Pay with a saved card when signed in for a smoother web experience.": "Check out the credit cards saved to your profile. Pay with a saved card when signed in for a smoother web experience.",
@@ -34,6 +35,7 @@
   "Description": "Description",
   "Discard changes": "Discard changes",
   "Distance to city centre": "{number}km to city centre",
+  "Do you want to start the day with Scandics famous breakfast buffé?": "Do you want to start the day with Scandics famous breakfast buffé?",
   "Edit": "Edit",
   "Edit profile": "Edit profile",
   "Email": "Email",

i18n/dictionaries/fi.json

@@ -11,6 +11,7 @@
   "At the hotel": "Hotellissa",
   "Book": "Kirja",
   "Booking number": "Varausnumero",
+  "Breakfast": "Aamiainen",
   "by": "mennessä",
   "Cancel": "Peruuttaa",
   "Check out the credit cards saved to your profile. Pay with a saved card when signed in for a smoother web experience.": "Tarkista profiiliisi tallennetut luottokortit. Maksa tallennetulla kortilla kirjautuneena, jotta verkkokokemus on sujuvampi.",
@@ -33,6 +34,7 @@
   "Day": "Päivä",
   "Description": "Kuvaus",
   "Discard changes": "Hylkää muutokset",
+  "Do you want to start the day with Scandics famous breakfast buffé?": "Haluatko aloittaa päiväsi Scandicsin kuuluisalla aamiaisbuffella?",
   "Edit": "Muokata",
   "Edit profile": "Muokkaa profiilia",
   "Email": "Sähköposti",

i18n/dictionaries/no.json

@@ -11,6 +11,7 @@
   "At the hotel": "På hotellet",
   "Book": "Bok",
   "Booking number": "Bestillingsnummer",
+  "Breakfast": "Frokost",
   "by": "innen",
   "Cancel": "Avbryt",
   "Check out the credit cards saved to your profile. Pay with a saved card when signed in for a smoother web experience.": "Sjekk ut kredittkortene som er lagret på profilen din. Betal med et lagret kort når du er pålogget for en jevnere nettopplevelse.",
@@ -33,6 +34,7 @@
   "Day": "Dag",
   "Description": "Beskrivelse",
   "Discard changes": "Forkaste endringer",
+  "Do you want to start the day with Scandics famous breakfast buffé?": "Vil du starte dagen med Scandics berømte frokostbuffé?",
   "Edit": "Redigere",
   "Edit profile": "Rediger profil",
   "Email": "E-post",

i18n/dictionaries/sv.json

@@ -11,6 +11,7 @@
   "At the hotel": "På hotellet",
   "Book": "Boka",
   "Booking number": "Bokningsnummer",
+  "Breakfast": "Frukost",
   "by": "innan",
   "Cancel": "Avbryt",
   "Check out the credit cards saved to your profile. Pay with a saved card when signed in for a smoother web experience.": "Kolla in kreditkorten som sparats i din profil. Betala med ett sparat kort när du är inloggad för en smidigare webbupplevelse.",
@@ -33,6 +34,7 @@
   "Day": "Dag",
   "Description": "Beskrivning",
   "Discard changes": "Ignorera ändringar",
+  "Do you want to start the day with Scandics famous breakfast buffé?": "Vill du starta dagen med Scandics berömda frukostbuffé?",
   "Edit": "Redigera",
   "Edit profile": "Redigera profil",
   "Email": "E-post",