feat(SW-71): Create bed selection

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

@@ -1,6 +1,7 @@
 import { serverClient } from "@/lib/trpc/server"
 
 import HotelCard from "@/components/HotelReservation/HotelCard"
+import BedSelection from "@/components/HotelReservation/SelectRate/BedSelection"
 import BreakfastSelection from "@/components/HotelReservation/SelectRate/BreakfastSelection"
 import FlexibilitySelection from "@/components/HotelReservation/SelectRate/FlexibilitySelection"
 import RoomSelection from "@/components/HotelReservation/SelectRate/RoomSelection"
@@ -29,6 +30,7 @@ export default async function SelectRate({ params }: PageArgs<LangParams>) {
         <RoomSelection rooms={rooms} />
         <FlexibilitySelection />
         <BreakfastSelection />
+        <BedSelection />
       </main>
     </div>
   )

components/HotelReservation/SelectRate/BedSelection/bedSelection.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;
+}

components/HotelReservation/SelectRate/BedSelection/index.tsx

@@ -0,0 +1,70 @@
+import Header from "@/components/Section/Header"
+import { getIntl } from "@/i18n"
+
+import SelectionCard from "../SelectionCard"
+
+import styles from "./bedSelection.module.css"
+
+const choices = [
+  {
+    value: "queen",
+    name: "Queen bed",
+    payment: "160 cm",
+    pricePerNight: 0,
+    membersPricePerNight: 0,
+    currency: "SEK",
+  },
+  {
+    value: "king",
+    name: "King bed",
+    payment: "160 cm",
+    pricePerNight: 0,
+    membersPricePerNight: 0,
+    currency: "SEK",
+  },
+  {
+    value: "twin",
+    name: "Twin bed",
+    payment: "90 cm + 90 cm",
+    pricePerNight: 82,
+    membersPricePerNight: 67,
+    currency: "SEK",
+  },
+]
+
+export default async function BedSelection() {
+  const { formatMessage } = await getIntl()
+
+  return (
+    <div className={styles.wrapper}>
+      <div className={styles.header}>
+        <Header
+          title={formatMessage({ id: "Choose type of bed" })}
+          subtitle={formatMessage({ id: "How do you want to sleep?" })}
+        />
+        <p>
+          {formatMessage({
+            id: "All our beds are from Bliss, allowing you to adjust the firmness for your perfect comfort.",
+          })}
+        </p>
+      </div>
+
+      <ul className={styles.list}>
+        {choices.map((choice) => (
+          <li key={choice.value}>
+            <label>
+              <input type="radio" name="bed" value={choice.value} />
+              <SelectionCard
+                title={choice.name}
+                subtext={`(${choice.payment})`}
+                price={choice.pricePerNight}
+                membersPrice={choice.membersPricePerNight}
+                currency={choice.currency}
+              />
+            </label>
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}

i18n/dictionaries/da.json

@@ -2,6 +2,7 @@
   "A photo of the room": "Et foto af værelset",
   "Add new card": "Tilføj nyt kort",
   "Address": "Adresse",
+  "All our beds are from Bliss, allowing you to adjust the firmness for your perfect comfort.": "Alle vores senge er fra Bliss, så du kan justere fastheden til din perfekte komfort.",
   "All rooms comes with standard amenities": "Alle værelser er udstyret med standardfaciliteter",
   "Already a friend?": "Allerede en ven?",
   "Amenities": "Faciliteter",
@@ -17,6 +18,7 @@
   "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.",
   "Choose room": "Vælg rum",
+  "Choose type of bed": "Vælg type seng",
   "City": "By",
   "City/State": "By/Stat",
   "Click here to log in": "Klik her for at logge ind",
@@ -47,6 +49,7 @@
   "Get inspired": "Blive inspireret",
   "Go back to overview": "Gå tilbage til oversigten",
   "Highest level": "Højeste niveau",
+  "How do you want to sleep?": "Hvordan vil du sove?",
   "How it works": "Hvordan det virker",
   "Join Scandic Friends": "Tilmeld dig Scandic Friends",
   "Language": "Sprog",

i18n/dictionaries/de.json

@@ -2,6 +2,7 @@
   "A photo of the room": "Ein Foto des Zimmers",
   "Add new card": "Neue Karte hinzufügen",
   "Address": "Adresse",
+  "All our beds are from Bliss, allowing you to adjust the firmness for your perfect comfort.": "Alle unsere Betten sind von Bliss, sodass Sie die Festigkeit für Ihren perfekten Komfort anpassen können.",
   "All rooms comes with standard amenities": "Alle Zimmer sind mit den üblichen Annehmlichkeiten ausgestattet",
   "Already a friend?": "Sind wir schon Freunde?",
   "Amenities": "Annehmlichkeiten",
@@ -17,6 +18,7 @@
   "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.",
   "Choose room": "Zimmer wählen",
+  "Choose type of bed": "Wählen Sie den Bettentyp",
   "City": "Stadt",
   "City/State": "Stadt/Zustand",
   "Click here to log in": "Klicken Sie hier, um sich einzuloggen",
@@ -47,6 +49,7 @@
   "Get inspired": "Lass dich inspirieren",
   "Go back to overview": "Zurück zur Übersicht",
   "Highest level": "Höchstes Level",
+  "How do you want to sleep?": "Wie möchtest du schlafen?",
   "How it works": "Wie es funktioniert",
   "Join Scandic Friends": "Treten Sie Scandic Friends bei",
   "Language": "Sprache",

i18n/dictionaries/en.json

@@ -2,6 +2,7 @@
   "A photo of the room": "A photo of the room",
   "Add new card": "Add new card",
   "Address": "Address",
+  "All our beds are from Bliss, allowing you to adjust the firmness for your perfect comfort.": "All our beds are from Bliss, allowing you to adjust the firmness for your perfect comfort.",
   "All rooms comes with standard amenities": "All rooms comes with standard amenities",
   "Already a friend?": "Already a friend?",
   "Amenities": "Amenities",
@@ -17,6 +18,7 @@
   "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.",
   "Choose room": "Choose room",
+  "Choose type of bed": "Choose type of bed",
   "City": "City",
   "City/State": "City/State",
   "Click here to log in": "Click here to log in",
@@ -52,6 +54,7 @@
   "hotelPages.rooms.roomCard.persons": "persons",
   "hotelPages.rooms.roomCard.seeRoomDetails": "See room details",
   "Highest level": "Highest level",
+  "How do you want to sleep?": "How do you want to sleep?",
   "How it works": "How it works",
   "Join Scandic Friends": "Join Scandic Friends",
   "Language": "Language",

i18n/dictionaries/fi.json

@@ -2,6 +2,7 @@
   "A photo of the room": "Kuva huoneesta",
   "Add new card": "Lisää uusi kortti",
   "Address": "Osoite",
+  "All our beds are from Bliss, allowing you to adjust the firmness for your perfect comfort.": "Kaikki sänkymme ovat Bliss, joten voit säätää kiinteyttä täydelliseen mukavuuteen.",
   "All rooms comes with standard amenities": "Kaikissa huoneissa on perusmukavuudet",
   "Already a friend?": "Oletko jo ystävä?",
   "Amenities": "Mukavuudet",
@@ -17,6 +18,7 @@
   "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.",
   "Choose room": "Valitse huone",
+  "Choose type of bed": "Valitse sänkytyyppi",
   "City": "Kaupunki",
   "City/State": "Kaupunki/Osavaltio",
   "Click here to log in": "Napsauta tästä kirjautuaksesi sisään",
@@ -47,6 +49,7 @@
   "Get inspired": "Inspiroidu",
   "Go back to overview": "Palaa yleiskatsaukseen",
   "Highest level": "Korkein taso",
+  "How do you want to sleep?": "Kuinka haluat nukkua?",
   "How it works": "Kuinka se toimii",
   "Join Scandic Friends": "Liity jäseneksi",
   "Language": "Kieli",

i18n/dictionaries/no.json

@@ -2,6 +2,7 @@
   "A photo of the room": "Et bilde av rommet",
   "Add new card": "Legg til nytt kort",
   "Address": "Adresse",
+  "All our beds are from Bliss, allowing you to adjust the firmness for your perfect comfort.": "Alle sengene våre er fra Bliss, slik at du kan justere fastheten for din perfekte komfort.",
   "All rooms comes with standard amenities": "Alle rommene har standard fasiliteter",
   "Already a friend?": "Allerede en venn?",
   "Amenities": "Fasiliteter",
@@ -17,6 +18,7 @@
   "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.",
   "Choose room": "Velg rom",
+  "Choose type of bed": "Velg type seng",
   "City": "By",
   "City/State": "By/Stat",
   "Click here to log in": "Klikk her for å logge inn",
@@ -47,6 +49,7 @@
   "Get inspired": "Bli inspirert",
   "Go back to overview": "Gå tilbake til oversikten",
   "Highest level": "Høyeste nivå",
+  "How do you want to sleep?": "Hvordan vil du sove?",
   "How it works": "Hvordan det fungerer",
   "Join Scandic Friends": "Bli med i Scandic Friends",
   "Language": "Språk",

i18n/dictionaries/sv.json

@@ -2,6 +2,7 @@
   "A photo of the room": "Ett foto av rummet",
   "Add new card": "Lägg till nytt kort",
   "Address": "Adress",
+  "All our beds are from Bliss, allowing you to adjust the firmness for your perfect comfort.": "Alla våra sängar är från Bliss, med möjlighet att justera fastheten för perfekt komfort.",
   "All rooms comes with standard amenities": "Alla rum har standardbekvämligheter",
   "Already a friend?": "Redan en vän?",
   "Amenities": "Bekvämligheter",
@@ -17,6 +18,7 @@
   "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.",
   "Choose room": "Välj rum",
+  "Choose type of bed": "Välj typ av säng",
   "City": "Ort",
   "City/State": "Ort",
   "Click here to log in": "Klicka här för att logga in",
@@ -47,6 +49,7 @@
   "Get inspired": "Bli inspirerad",
   "Go back to overview": "Gå tillbaka till översikten",
   "Highest level": "Högsta nivå",
+  "How do you want to sleep?": "Hur vill du sova?",
   "How it works": "Hur det fungerar",
   "hotelPages.rooms.title": "Rum",
   "hotelPages.rooms.roomCard.person": "person",