scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(SW-71): Create bed selection

Browse Source
This commit is contained in:
Niclas Edenvin
2024-07-12 15:37:22 +02:00
parent dff876f091
commit 5347ae5b6c
9 changed files with 118 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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>
)

28
components/HotelReservation/SelectRate/BedSelection/bedSelection.module.css Normal file
View File

@@ -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;
}

70
components/HotelReservation/SelectRate/BedSelection/index.tsx Normal file
View File

@@ -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>
)
}

3
i18n/dictionaries/da.json
View File

@@ -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",

3
i18n/dictionaries/de.json
View File

@@ -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",

3
i18n/dictionaries/en.json
View File

@@ -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",

3
i18n/dictionaries/fi.json
View File

@@ -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",

3
i18n/dictionaries/no.json
View File

@@ -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",

3
i18n/dictionaries/sv.json
View File

@@ -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",