From 5b3958e01771bb9e06c3472153b43c01cba205fe Mon Sep 17 00:00:00 2001 From: Fredrik Thorsson Date: Wed, 30 Oct 2024 16:44:08 +0100 Subject: [PATCH] feat(SW-713): update styling for sidepeek --- components/SidePeeks/RoomSidePeek/index.tsx | 100 ++++++++++-------- .../RoomSidePeek/roomSidePeek.module.css | 43 +++++++- i18n/dictionaries/da.json | 3 + i18n/dictionaries/de.json | 3 + i18n/dictionaries/en.json | 3 + i18n/dictionaries/fi.json | 3 + i18n/dictionaries/no.json | 3 + i18n/dictionaries/sv.json | 3 + 8 files changed, 114 insertions(+), 47 deletions(-) diff --git a/components/SidePeeks/RoomSidePeek/index.tsx b/components/SidePeeks/RoomSidePeek/index.tsx index 8e35a2a86..bbb13d9f7 100644 --- a/components/SidePeeks/RoomSidePeek/index.tsx +++ b/components/SidePeeks/RoomSidePeek/index.tsx @@ -45,49 +45,65 @@ export default function RoomSidePeek({ isOpen={isSidePeekOpen} handleClose={() => setIsSidePeekOpen(false)} > - - {roomSize?.min === roomSize?.max - ? roomSize?.min - : `${roomSize?.min} - ${roomSize?.max}`} - m².{" "} - {intl.formatMessage( - { id: "booking.accommodatesUpTo" }, - { nrOfGuests: occupancy } - )} - - - {images && ( -
- +
+
+ + {roomSize?.min === roomSize?.max + ? roomSize?.min + : `${roomSize?.min} - ${roomSize?.max}`} + m².{" "} + {intl.formatMessage( + { id: "booking.accommodatesUpTo" }, + { nrOfGuests: occupancy } + )} + + {images && ( +
+ +
+ )} + {roomDescription}
- )} - - - {roomDescription} - - - {intl.formatMessage({ id: "booking.thisRoomIsEquippedWith" })} - -
    - {selectedRoom?.roomFacilities - .sort((a, b) => a.sortOrder - b.sortOrder) - .map((facility) => { - const Icon = getFacilityIcon(facility.name) - - return ( -
  • - {Icon && } - - {facility.name} - -
    • - ) - })} -
+
+ + {intl.formatMessage({ id: "booking.thisRoomIsEquippedWith" })} + +
    + {selectedRoom?.roomFacilities + .sort((a, b) => a.sortOrder - b.sortOrder) + .map((facility) => { + const Icon = getFacilityIcon(facility.name) + return ( +
  • + {Icon && } + + {facility.name} + +
    • + ) + })} +
+
+
+ + {intl.formatMessage({ id: "booking.bedOptions" })} + + + {intl.formatMessage({ id: "booking.basedOnAvailability" })} + + {/* TODO: Get data for bed options */} +
+
+
+ +
) diff --git a/components/SidePeeks/RoomSidePeek/roomSidePeek.module.css b/components/SidePeeks/RoomSidePeek/roomSidePeek.module.css index 9197cb152..1b5403274 100644 --- a/components/SidePeeks/RoomSidePeek/roomSidePeek.module.css +++ b/components/SidePeeks/RoomSidePeek/roomSidePeek.module.css @@ -4,20 +4,40 @@ text-decoration: none; } -.imageContainer { - min-height: 185px; +.wrapper { + display: flex; + flex-direction: column; + gap: var(--Spacing-x2); position: relative; + margin-bottom: calc(var(--Spacing-x4) * 2 + 20px); } -.description { - margin-top: var(--Spacing-x-one-and-half); - margin-bottom: var(--Spacing-x2); +.mainContent, +.listContainer { + display: flex; + flex-direction: column; + gap: var(--Spacing-x-one-and-half); } + +.imageContainer { + min-height: 280px; + position: relative; + border-radius: var(--Corner-radius-Medium); + overflow: hidden; +} + +.imageContainer img { + width: 100%; + aspect-ratio: 16/9; + object-fit: cover; +} + .facilityList { margin-top: var(--Spacing-x-one-and-half); column-count: 2; column-gap: var(--Spacing-x2); } + .facilityList li { display: flex; gap: var(--Spacing-x1); @@ -27,3 +47,16 @@ .noIcon { margin-left: var(--Spacing-x4); } + +.buttonContainer { + background-color: var(--Base-Background-Primary-Normal); + border-top: 1px solid var(--Base-Border-Subtle); + padding: var(--Spacing-x4) var(--Spacing-x2); + overflow: hidden; + width: 100%; + position: absolute; + left: 0; + bottom: 0; + display: flex; + justify-content: center; +} diff --git a/i18n/dictionaries/da.json b/i18n/dictionaries/da.json index 6b48b1f31..865dc6853 100644 --- a/i18n/dictionaries/da.json +++ b/i18n/dictionaries/da.json @@ -384,10 +384,13 @@ "as of today": "pr. dags dato", "booking.accommodatesUpTo": "Plads til {nrOfGuests, plural, one {# person} other {op til # personer}}", "booking.adults": "{totalAdults, plural, one {# voksen} other {# voksne}}", + "booking.basedOnAvailability": "Baseret på tilgængelighed", + "booking.bedOptions": "Sengemuligheder", "booking.children": "{totalChildren, plural, one {# barn} other {# børn}}", "booking.guests": "Maks {nrOfGuests, plural, one {# gæst} other {# gæster}}", "booking.nights": "{totalNights, plural, one {# nat} other {# nætter}}", "booking.rooms": "{totalRooms, plural, one {# værelse} other {# værelser}}", + "booking.selectRoom": "Zimmer auswählen", "booking.terms": "Ved at betale med en af de tilgængelige betalingsmetoder, accepterer jeg vilkårene for denne booking og de generelle Vilkår og betingelser, og forstår, at Scandic vil behandle min personlige data i forbindelse med denne booking i henhold til Scandics Privatlivspolitik. Jeg accepterer, at Scandic kræver et gyldigt kreditkort under min besøg i tilfælde af, at noget er tilbagebetalt.", "booking.thisRoomIsEquippedWith": "Dette værelse er udstyret med", "breakfast.price": "{amount} {currency}/nat", diff --git a/i18n/dictionaries/de.json b/i18n/dictionaries/de.json index 41d056496..3187d3855 100644 --- a/i18n/dictionaries/de.json +++ b/i18n/dictionaries/de.json @@ -383,10 +383,13 @@ "as of today": "Stand heute", "booking.accommodatesUpTo": "Bietet Platz für {nrOfGuests, plural, one {# Person } other {bis zu # Personen}}", "booking.adults": "{totalAdults, plural, one {# erwachsene} other {# erwachsene}}", + "booking.basedOnAvailability": "Abhängig von der Verfügbarkeit", + "booking.bedOptions": "Bettoptionen", "booking.children": "{totalChildren, plural, one {# kind} other {# kinder}}", "booking.guests": "Max {nrOfGuests, plural, one {# gast} other {# gäste}}", "booking.nights": "{totalNights, plural, one {# nacht} other {# Nächte}}", "booking.rooms": "{totalRooms, plural, one {# zimmer} other {# räume}}", + "booking.selectRoom": "Vælg værelse", "booking.terms": "Ved at betale med en af de tilgængelige betalingsmetoder, accepterer jeg vilkårene for denne booking og de generelle Vilkår og betingelser, og forstår, at Scandic vil behandle min personlige data i forbindelse med denne booking i henhold til Scandics Privatlivspolitik. Jeg accepterer, at Scandic kræver et gyldigt kreditkort under min besøg i tilfælde af, at noget er tilbagebetalt.", "booking.thisRoomIsEquippedWith": "Dieses Zimmer ist ausgestattet mit", "breakfast.price": "{amount} {currency}/Nacht", diff --git a/i18n/dictionaries/en.json b/i18n/dictionaries/en.json index a3e5dde34..0ae7ba348 100644 --- a/i18n/dictionaries/en.json +++ b/i18n/dictionaries/en.json @@ -400,12 +400,15 @@ "as of today": "as of today", "booking.accommodatesUpTo": "Accommodates up to {nrOfGuests, plural, one {# person} other {# people}}", "booking.adults": "{totalAdults, plural, one {# adult} other {# adults}}", + "booking.basedOnAvailability": "Based on availability", + "booking.bedOptions": "Bed options", "booking.children": "{totalChildren, plural, one {# child} other {# children}}", "booking.confirmation.text": "Thank you for booking with us! We look forward to welcoming you and hope you have a pleasant stay. If you have any questions or need to make changes to your reservation, please email us.", "booking.confirmation.title": "Your booking is confirmed", "booking.guests": "Max {nrOfGuests, plural, one {# guest} other {# guests}}", "booking.nights": "{totalNights, plural, one {# night} other {# nights}}", "booking.rooms": "{totalRooms, plural, one {# room} other {# rooms}}", + "booking.selectRoom": "Select room", "booking.terms": "By paying with any of the payment methods available, I accept the terms for this booking and the general Terms & Conditions, and understand that Scandic will process my personal data for this booking in accordance with Scandic's Privacy policy. I also accept that Scandic require a valid credit card during my visit in case anything is left unpaid.", "booking.thisRoomIsEquippedWith": "This room is equipped with", "breakfast.price": "{amount} {currency}/night", diff --git a/i18n/dictionaries/fi.json b/i18n/dictionaries/fi.json index 5a169d558..36b424139 100644 --- a/i18n/dictionaries/fi.json +++ b/i18n/dictionaries/fi.json @@ -383,10 +383,13 @@ "as of today": "tänään", "booking.accommodatesUpTo": "Huoneeseen {nrOfGuests, plural, one {# person} other {mahtuu 2 henkilöä}}", "booking.adults": "{totalAdults, plural, one {# aikuinen} other {# aikuiset}}", + "booking.basedOnAvailability": "Saatavuuden mukaan", + "booking.bedOptions": "Vuodevaihtoehdot", "booking.children": "{totalChildren, plural, one {# lapsi} other {# lasta}}", "booking.guests": "Max {nrOfGuests, plural, one {# vieras} other {# vieraita}}", "booking.nights": "{totalNights, plural, one {# yö} other {# yötä}}", "booking.rooms": "{totalRooms, plural, one {# huone} other {# sviitti}}", + "booking.selectRoom": "Valitse huone", "booking.terms": "Maksamalla minkä tahansa saatavilla olevan maksutavan avulla hyväksyn tämän varauksen ehdot ja yleiset ehdot ja ehtoja, ja ymmärrän, että Scandic käsittelee minun henkilötietoni tässä varauksessa mukaisesti Scandicin tietosuojavaltuuden mukaisesti. Hyväksyn myös, että Scandic vaatii validin luottokortin majoituksen ajan, jos jokin jää maksamatta.", "booking.thisRoomIsEquippedWith": "Tämä huone on varustettu", "breakfast.price": "{amount} {currency}/yö", diff --git a/i18n/dictionaries/no.json b/i18n/dictionaries/no.json index 97aa25fc5..6aa6def5c 100644 --- a/i18n/dictionaries/no.json +++ b/i18n/dictionaries/no.json @@ -382,10 +382,13 @@ "as of today": "per i dag", "booking.accommodatesUpTo": "Plass til {nrOfGuests, plural, one {# person} other {opptil # personer}}", "booking.adults": "{totalAdults, plural, one {# voksen} other {# voksne}}", + "booking.basedOnAvailability": "Basert på tilgjengelighet", + "booking.bedOptions": "Sengemuligheter", "booking.children": "{totalChildren, plural, one {# barn} other {# barn}}", "booking.guests": "Maks {nrOfGuests, plural, one {# gjest} other {# gjester}}", "booking.nights": "{totalNights, plural, one {# natt} other {# netter}}", "booking.rooms": "{totalRooms, plural, one {# rom} other {# rom}}", + "booking.selectRoom": "Velg rom", "booking.thisRoomIsEquippedWith": "Dette rommet er utstyrt med", "breakfast.price": "{amount} {currency}/natt", "breakfast.price.free": "{amount} {currency} 0 {currency}/natt", diff --git a/i18n/dictionaries/sv.json b/i18n/dictionaries/sv.json index 2b3a16db3..bff5462fd 100644 --- a/i18n/dictionaries/sv.json +++ b/i18n/dictionaries/sv.json @@ -382,10 +382,13 @@ "as of today": "från och med idag", "booking.accommodatesUpTo": "Rymmer {nrOfGuests, plural, one {# person} other {upp till # personer}}", "booking.adults": "{totalAdults, plural, one {# vuxen} other {# vuxna}}", + "booking.basedOnAvailability": "Baserat på tillgänglighet", + "booking.bedOptions": "Sängalternativ", "booking.children": "{totalChildren, plural, one {# barn} other {# barn}}", "booking.guests": "Max {nrOfGuests, plural, one {# gäst} other {# gäster}}", "booking.nights": "{totalNights, plural, one {# natt} other {# nätter}}", "booking.rooms": "{totalRooms, plural, one {# rum} other {# rum}}", + "booking.selectRoom": "Välj rum", "booking.terms": "Genom att betala med någon av de tillgängliga betalningsmetoderna accepterar jag villkoren för denna bokning och de generella Villkoren och villkoren, och förstår att Scandic kommer att behandla min personliga data i samband med denna bokning i enlighet med Scandics integritetspolicy. Jag accepterar att Scandic kräver ett giltigt kreditkort under min besök i fall att något är tillbaka betalt.", "booking.thisRoomIsEquippedWith": "Detta rum är utrustat med", "breakfast.price": "{amount} {currency}/natt",