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

feat: add selected room card

Browse Source
This commit is contained in:
Simon Emanuelsson
2024-10-08 16:37:58 +02:00
committed by Pontus Dreij
parent 76bc1b3502
commit eeae38ec1d
22 changed files with 303 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
app/[lang]/(live)/(public)/hotelreservation/[step]/layout.module.css Normal file
View File

@@ -0,0 +1,20 @@
.layout {
min-height: 100dvh;
background-color: var(--Scandic-Brand-Warm-White);
}
.content {
display: grid;
gap: var(--Spacing-x3) var(--Spacing-x9);
grid-template-columns: 1fr 340px;
grid-template-rows: auto 1fr;
margin: var(--Spacing-x5) auto 0;
max-width: var(--max-width-navigation);
padding: var(--Spacing-x6) var(--Spacing-x2) 0;
}
.summary {
align-self: flex-start;
grid-column: 2 / 3;
grid-row: 1/-1;
}

38
app/[lang]/(live)/(public)/hotelreservation/[step]/layout.tsx Normal file
View File

@@ -0,0 +1,38 @@
import { redirect } from "next/navigation"
import { serverClient } from "@/lib/trpc/server"
import SelectedRoom from "@/components/HotelReservation/EnterDetails/SelectedRoom"
import HotelSelectionHeader from "@/components/HotelReservation/HotelSelectionHeader"
import Summary from "@/components/HotelReservation/SelectRate/Summary"
import styles from "./layout.module.css"
import type { LangParams, LayoutArgs } from "@/types/params"
export default async function StepLayout({
children,
params,
}: React.PropsWithChildren<LayoutArgs<LangParams>>) {
const hotel = await serverClient().hotel.hotelData.get({
hotelId: "811",
language: params.lang,
})
if (!hotel?.data) {
redirect(`/${params.lang}`)
}
return (
<main className={styles.layout}>
<HotelSelectionHeader hotel={hotel.data.attributes} />
<div className={styles.content}>
<SelectedRoom />
{children}
<aside className={styles.summary}>
<Summary />
</aside>
</div>
</main>
)
}

30
app/[lang]/(live)/(public)/hotelreservation/[step]/page.module.css
View File

@@ -1,30 +0,0 @@
.page {
min-height: 100dvh;
padding-top: var(--Spacing-x6);
padding-left: var(--Spacing-x2);
padding-right: var(--Spacing-x2);
background-color: var(--Scandic-Brand-Warm-White);
}
.content {
max-width: 1134px;
margin-top: var(--Spacing-x5);
margin-left: auto;
margin-right: auto;
display: flex;
justify-content: space-between;
gap: var(--Spacing-x7);
}
.section {
flex-grow: 1;
}
.summary {
max-width: 340px;
}
.form {
display: grid;
gap: var(--Spacing-x2);
}

90
app/[lang]/(live)/(public)/hotelreservation/[step]/page.tsx
View File

@@ -9,15 +9,11 @@ import { trpc } from "@/lib/trpc/client"
import BedType from "@/components/HotelReservation/EnterDetails/BedType"
import Breakfast from "@/components/HotelReservation/EnterDetails/Breakfast"
import Details from "@/components/HotelReservation/EnterDetails/Details"
import HotelSelectionHeader from "@/components/HotelReservation/HotelSelectionHeader"
import Payment from "@/components/HotelReservation/SelectRate/Payment"
import SectionAccordion from "@/components/HotelReservation/SelectRate/SectionAccordion"
import Summary from "@/components/HotelReservation/SelectRate/Summary"
import LoadingSpinner from "@/components/LoadingSpinner"
import styles from "./page.module.css"
import { LangParams, PageArgs } from "@/types/params"
import type { LangParams, PageArgs } from "@/types/params"
enum StepEnum {
selectBed = "select-bed",
@@ -75,51 +71,43 @@ export default function StepPage({
}
return (
<main className={styles.page}>
<HotelSelectionHeader hotel={hotel.data.attributes} />
<div className={styles.content}>
<section className={styles.section}>
<SectionAccordion
header="Select bed"
isCompleted={true}
isOpen={activeStep === StepEnum.selectBed}
label={intl.formatMessage({ id: "Request bedtype" })}
path="/select-bed"
>
<BedType />
</SectionAccordion>
<SectionAccordion
header="Food options"
isCompleted={true}
isOpen={activeStep === StepEnum.breakfast}
label={intl.formatMessage({ id: "Select breakfast options" })}
path="/breakfast"
>
<Breakfast />
</SectionAccordion>
<SectionAccordion
header="Details"
isCompleted={false}
isOpen={activeStep === StepEnum.details}
label={intl.formatMessage({ id: "Enter your details" })}
path="/details"
>
<Details user={null} />
</SectionAccordion>
<SectionAccordion
header="Payment"
isCompleted={false}
isOpen={activeStep === StepEnum.payment}
label={intl.formatMessage({ id: "Select payment method" })}
path="/hotelreservation/select-bed"
>
<Payment hotel={hotel.data.attributes} />
</SectionAccordion>
</section>
<aside className={styles.summary}>
<Summary />
</aside>
</div>
</main>
<section>
<SectionAccordion
header="Select bed"
isCompleted={true}
isOpen={activeStep === StepEnum.selectBed}
label={intl.formatMessage({ id: "Request bedtype" })}
path="/select-bed"
>
<BedType />
</SectionAccordion>
<SectionAccordion
header="Food options"
isCompleted={true}
isOpen={activeStep === StepEnum.breakfast}
label={intl.formatMessage({ id: "Select breakfast options" })}
path="/breakfast"
>
<Breakfast />
</SectionAccordion>
<SectionAccordion
header="Details"
isCompleted={false}
isOpen={activeStep === StepEnum.details}
label={intl.formatMessage({ id: "Enter your details" })}
path="/details"
>
<Details user={null} />
</SectionAccordion>
<SectionAccordion
header="Payment"
isCompleted={false}
isOpen={activeStep === StepEnum.payment}
label={intl.formatMessage({ id: "Select payment method" })}
path="/hotelreservation/select-bed"
>
<Payment hotel={hotel.data.attributes} />
</SectionAccordion>
</section>
)
}

77
components/HotelReservation/EnterDetails/SelectedRoom/index.tsx Normal file
View File

@@ -0,0 +1,77 @@
"use client"
import { useIntl } from "react-intl"
import { EditIcon, ImageIcon } from "@/components/Icons"
import Button from "@/components/TempDesignSystem/Button"
import Link from "@/components/TempDesignSystem/Link"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import styles from "./selectedRoom.module.css"
export default function SelectedRoom() {
const intl = useIntl()
return (
<article className={styles.container}>
<div className={styles.tempImage}>
<ImageIcon
color="baseButtonTertiaryOnFillNormal"
height={60}
width={60}
/>
</div>
<div className={styles.content}>
<div className={styles.textContainer}>
<Footnote
className={styles.label}
color="uiTextPlaceholder"
textTransform="uppercase"
>
{intl.formatMessage({ id: "Your room" })}
</Footnote>
<div className={styles.text}>
{/**
* [TEMP]
* No translation on Subtitles as they will be derived
* from Room selection.
*/}
<Subtitle
className={styles.room}
color="uiTextHighContrast"
type="two"
>
Cozy cabin
</Subtitle>
<Subtitle
className={styles.invertFontWeight}
color="uiTextMediumContrast"
type="two"
>
Free rebooking
</Subtitle>
<Subtitle
className={styles.invertFontWeight}
color="uiTextMediumContrast"
type="two"
>
Pay now
</Subtitle>
</div>
</div>
<Button
asChild
intent="tertiary"
size="small"
theme="base"
variant="icon"
>
<Link href="#">
<EditIcon color="baseButtonTertiaryOnFillNormal" />
{intl.formatMessage({ id: "Modify" })}
</Link>
</Button>
</div>
</article>
)
}

51
components/HotelReservation/EnterDetails/SelectedRoom/selectedRoom.module.css Normal file
View File

@@ -0,0 +1,51 @@
.container {
background-color: var(--Base-Surface-Primary-light-Normal);
border-radius: var(--Corner-radius-Large);
display: grid;
grid-template-columns: 144px 1fr;
gap: var(--Spacing-x3);
padding: var(--Spacing-x2) var(--Spacing-x4) var(--Spacing-x2)
var(--Spacing-x2);
}
.tempImage {
align-items: center;
background-color: lightgray;
border-radius: var(--Corner-radius-Medium);
display: flex;
height: auto;
justify-content: center;
min-height: 80px;
}
.content {
align-items: center;
display: grid;
gap: var(--Spacing-x3);
grid-template-columns: 1fr auto;
}
.textContainer {
display: grid;
}
.label {
grid-column: 1 / -1;
}
.text {
display: flex;
flex-wrap: wrap;
gap: var(--Spacing-x1);
}
p.invertFontWeight {
font-weight: 400;
}
.invertFontWeight:not(:last-of-type)::after,
.room::after {
color: var(--UI-Text-Medium-contrast);
content: "∙";
padding-left: var(--Spacing-x1);
}

17
components/HotelReservation/HotelSelectionHeader/hotelSelectionHeader.module.css
View File

@@ -1,10 +1,13 @@
.hotelSelectionHeader {
display: flex;
flex-direction: column;
background-color: var(--Base-Surface-Subtle-Normal);
padding: var(--Spacing-x3) var(--Spacing-x2);
justify-content: center;
}
.hotelSelectionHeaderWrapper {
display: flex;
flex-direction: column;
gap: var(--Spacing-x3);
justify-content: center;
}
.titleContainer {
@@ -33,9 +36,15 @@
@media (min-width: 768px) {
.hotelSelectionHeader {
flex-direction: row;
padding: var(--Spacing-x4) var(--Spacing-x5);
}
.hotelSelectionHeaderWrapper {
flex-direction: row;
gap: var(--Spacing-x6);
max-width: var(--max-width-navigation);
margin: 0 auto;
width: 100%;
}
.titleContainer > h1 {

58
components/HotelReservation/HotelSelectionHeader/index.tsx
View File

@@ -19,35 +19,35 @@ export default function HotelSelectionHeader({
return (
<header className={styles.hotelSelectionHeader}>
<div className={styles.titleContainer}>
<Title as="h3" level="h1">
{hotel.name}
</Title>
<address className={styles.address}>
<Caption color="textMediumContrast">
{hotel.address.streetAddress}, {hotel.address.city}
</Caption>
<div>
<Divider variant="vertical" color="subtle" />
</div>
<Caption color="textMediumContrast">
{intl.formatMessage(
{
id: "Distance to city centre",
},
{ number: hotel.location.distanceToCentre }
)}
</Caption>
</address>
</div>
<div className={styles.dividerContainer}>
<Divider variant="vertical" color="subtle" />
</div>
<div className={styles.descriptionContainer}>
<Body color="textHighContrast">
{hotel.hotelContent.texts.descriptions.short}
</Body>
<HotelDetailSidePeek />
<div className={styles.hotelSelectionHeaderWrapper}>
<div className={styles.titleContainer}>
<Title as="h3" level="h1">
{hotel.name}
</Title>
<address className={styles.address}>
<Caption color="textMediumContrast">
{hotel.address.streetAddress}, {hotel.address.city}
</Caption>
<div>
<Divider variant="vertical" color="subtle" />
</div>
<Caption color="textMediumContrast">
{intl.formatMessage(
{ id: "Distance to city centre" },
{ number: hotel.location.distanceToCentre }
)}
</Caption>
</address>
</div>
<div className={styles.dividerContainer}>
<Divider variant="vertical" color="subtle" />
</div>
<div className={styles.descriptionContainer}>
<Body color="textHighContrast">
{hotel.hotelContent.texts.descriptions.short}
</Body>
<HotelDetailSidePeek />
</div>
</div>
</header>
)

4
components/HotelReservation/SelectRate/Payment/index.tsx
View File

@@ -129,7 +129,7 @@ export default function Payment({ hotel }: PaymentProps) {
name="payment-method"
id="card"
value="card"
checked={selectedPaymentMethod === "card"}
defaultChecked={selectedPaymentMethod === "card"}
/>
<label htmlFor="card">card</label>
</button>
@@ -145,7 +145,7 @@ export default function Payment({ hotel }: PaymentProps) {
name="payment-method"
id={paymentOption}
value={paymentOption}
checked={selectedPaymentMethod === paymentOption}
defaultChecked={selectedPaymentMethod === paymentOption}
/>
<label htmlFor={paymentOption}>{paymentOption}</label>
</button>

2
components/HotelReservation/SelectRate/SectionAccordion/sectionAccordion.module.css
View File

@@ -40,7 +40,7 @@
.iconWrapper {
position: relative;
top: var(--Spacing-x1);
z-index: 10;
z-index: 2;
}
.circle {

5
components/Icons/icon.module.css
View File

@@ -66,3 +66,8 @@
.blue * {
fill: var(--UI-Input-Controls-Fill-Selected);
}
.baseButtonTertiaryOnFillNormal,
.baseButtonTertiaryOnFillNormal * {
fill: var(--Base-Button-Tertiary-On-Fill-Normal);
}

5
components/Icons/variants.ts
View File

@@ -5,19 +5,20 @@ import styles from "./icon.module.css"
const config = {
variants: {
color: {
baseButtonTertiaryOnFillNormal: styles.baseButtonTertiaryOnFillNormal,
baseIconLowContrast: styles.baseIconLowContrast,
black: styles.black,
blue: styles.blue,
burgundy: styles.burgundy,
green: styles.green,
grey80: styles.grey80,
pale: styles.pale,
peach80: styles.peach80,
primaryLightOnSurfaceAccent: styles.plosa,
red: styles.red,
green: styles.green,
white: styles.white,
uiTextHighContrast: styles.uiTextHighContrast,
uiTextMediumContrast: styles.uiTextMediumContrast,
blue: styles.blue,
},
},
defaultVariants: {

6
components/Lightbox/FullView.tsx
View File

@@ -49,10 +49,10 @@ export default function FullView({
className={styles.fullViewImage}
>
<Image
src={image.url}
alt={image.alt}
layout="fill"
objectFit="cover"
fill
src={image.url}
style={{ objectFit: "cover" }}
/>
<div className={styles.fullViewFooter}>

13
components/TempDesignSystem/Button/button.module.css
View File

@@ -64,10 +64,10 @@ a.default {
justify-content: center;
}
.icon {
.btn.icon:is(.small, .medium, .large) {
align-items: center;
display: flex;
gap: var(--Spacing-x-half);
gap: var(--Spacing-x1);
justify-content: center;
}
@@ -76,7 +76,8 @@ a.default {
font-size: var(--typography-Caption-Bold-fontSize);
line-height: var(--typography-Caption-Bold-lineHeight);
gap: var(--Spacing-x-quarter);
padding: calc(var(--Spacing-x1) + 2px) var(--Spacing-x2); /* Special case padding to adjust the missing border */
padding: calc(var(--Spacing-x1) + 2px) var(--Spacing-x2);
/* Special case padding to adjust the missing border */
}
.btn.small.secondary {
@@ -85,7 +86,8 @@ a.default {
.btn.medium {
gap: var(--Spacing-x-half);
padding: calc(var(--Spacing-x-one-and-half) + 2px) var(--Spacing-x2); /* Special case padding to adjust the missing border */
padding: calc(var(--Spacing-x-one-and-half) + 2px) var(--Spacing-x2);
/* Special case padding to adjust the missing border */
}
.medium.secondary {
@@ -94,7 +96,8 @@ a.default {
.btn.large {
gap: var(--Spacing-x-half);
padding: calc(var(--Spacing-x2) + 2px) var(--Spacing-x3); /* Special case padding to adjust the missing border */
padding: calc(var(--Spacing-x2) + 2px) var(--Spacing-x3);
/* Special case padding to adjust the missing border */
}
.large.secondary {

8
components/TempDesignSystem/Text/Subtitle/subtitle.module.css
View File

@@ -10,7 +10,7 @@
0.3vw + 15px,
var(--typography-Subtitle-1-Desktop-fontSize)
);
font-weight: 600;
font-weight: 500;
letter-spacing: var(--typography-Subtitle-1-letterSpacing);
line-height: var(--typography-Subtitle-1-lineHeight);
}
@@ -22,7 +22,7 @@
0.3vw + 15px,
var(--typography-Subtitle-2-Desktop-fontSize)
);
font-weight: 600;
font-weight: 500;
letter-spacing: var(--typography-Subtitle-2-letterSpacing);
line-height: var(--typography-Subtitle-2-lineHeight);
}
@@ -62,3 +62,7 @@
.uiTextHighContrast {
color: var(--UI-Text-High-contrast);
}
.uiTextMediumContrast {
color: var(--UI-Text-Medium-contrast);
}

1
components/TempDesignSystem/Text/Subtitle/variants.ts
View File

@@ -9,6 +9,7 @@ const config = {
burgundy: styles.burgundy,
pale: styles.pale,
uiTextHighContrast: styles.uiTextHighContrast,
uiTextMediumContrast: styles.uiTextMediumContrast,
},
textAlign: {
center: styles.center,

2
i18n/dictionaries/da.json
View File

@@ -130,7 +130,6 @@
"Join at no cost": "Tilmeld dig uden omkostninger",
"Join Scandic Friends": "Tilmeld dig Scandic Friends",
"King bed": "Kingsize-seng",
"km to city center": "km til byens centrum",
"Language": "Sprog",
"Lastname": "Efternavn",
"Latest searches": "Seneste søgninger",
@@ -319,6 +318,7 @@
"Your details": "Dine oplysninger",
"Your level": "Dit niveau",
"Your points to spend": "Dine brugbare point",
"Your room": "Dit værelse",
"Zip code": "Postnummer",
"Zoo": "Zoo",
"Zoom in": "Zoom ind",

1
i18n/dictionaries/de.json
View File

@@ -319,6 +319,7 @@
"Your details": "Ihre Angaben",
"Your level": "Dein level",
"Your points to spend": "Meine Punkte",
"Your room": "Ihr Zimmer",
"Zip code": "PLZ",
"Zoo": "Zoo",
"Zoom in": "Vergrößern",

2
i18n/dictionaries/en.json
View File

@@ -130,7 +130,6 @@
"Join at no cost": "Join at no cost",
"Join Scandic Friends": "Join Scandic Friends",
"King bed": "King bed",
"km to city center": "km to city center",
"Language": "Language",
"Lastname": "Lastname",
"Latest searches": "Latest searches",
@@ -319,6 +318,7 @@
"Your details": "Your details",
"Your level": "Your level",
"Your points to spend": "Your points to spend",
"Your room": "Your room",
"Zip code": "Zip code",
"Zoo": "Zoo",
"Zoom in": "Zoom in",

2
i18n/dictionaries/fi.json
View File

@@ -130,7 +130,6 @@
"Join at no cost": "Liity maksutta",
"Join Scandic Friends": "Liity jäseneksi",
"King bed": "King-vuode",
"km to city center": "km keskustaan",
"Language": "Kieli",
"Lastname": "Sukunimi",
"Latest searches": "Viimeisimmät haut",
@@ -320,6 +319,7 @@
"Your details": "Tietosi",
"Your level": "Tasosi",
"Your points to spend": "Käytettävissä olevat pisteesi",
"Your room": "Sinun huoneesi",
"Zip code": "Postinumero",
"Zoo": "Eläintarha",
"Zoom in": "Lähennä",

5
i18n/dictionaries/no.json
View File

@@ -20,7 +20,6 @@
"Approx.": "Ca.",
"Are you sure you want to remove the card ending with {lastFourDigits} from your member profile?": "Er du sikker på at du vil fjerne kortet som slutter på {lastFourDigits} fra medlemsprofilen din?",
"Arrival date": "Ankomstdato",
"as of today": "per i dag",
"As our": "Som vår {level}",
"As our Close Friend": "Som vår nære venn",
"At latest": "Senest",
@@ -95,9 +94,9 @@
"Explore all levels and benefits": "Utforsk alle nivåer og fordeler",
"Explore nearby": "Utforsk i nærheten",
"Extras to your booking": "Tilvalg til bestillingen din",
"FAQ": "FAQ",
"Failed to delete credit card, please try again later.": "Kunne ikke slette kredittkortet, prøv igjen senere.",
"Fair": "Messe",
"FAQ": "FAQ",
"Find booking": "Finn booking",
"Find hotels": "Finn hotell",
"Firstname": "Fornavn",
@@ -129,7 +128,6 @@
"Join at no cost": "Bli med uten kostnad",
"Join Scandic Friends": "Bli med i Scandic Friends",
"King bed": "King-size-seng",
"km to city center": "km til sentrum",
"Language": "Språk",
"Lastname": "Etternavn",
"Latest searches": "Siste søk",
@@ -318,6 +316,7 @@
"Your details": "Dine detaljer",
"Your level": "Ditt nivå",
"Your points to spend": "Dine brukbare poeng",
"Your room": "Rommet ditt",
"Zip code": "Post kode",
"Zoo": "Dyrehage",
"Zoom in": "Zoom inn",

4
i18n/dictionaries/sv.json
View File

@@ -20,7 +20,6 @@
"Approx.": "Ca.",
"Are you sure you want to remove the card ending with {lastFourDigits} from your member profile?": "Är du säker på att du vill ta bort kortet som slutar med {lastFourDigits} från din medlemsprofil?",
"Arrival date": "Ankomstdatum",
"as of today": "per idag",
"As our": "Som vår {level}",
"As our Close Friend": "Som vår nära vän",
"At latest": "Senast",
@@ -130,7 +129,6 @@
"Join at no cost": "Gå med utan kostnad",
"Join Scandic Friends": "Gå med i Scandic Friends",
"King bed": "King size-säng",
"km to city center": "km till stadens centrum",
"Language": "Språk",
"Lastname": "Efternamn",
"Latest searches": "Senaste sökningarna",
@@ -284,7 +282,6 @@
"TUI Points": "TUI Points",
"Type of bed": "Sängtyp",
"Type of room": "Rumstyp",
"uppercase letter": "stor bokstav",
"Use bonus cheque": "Använd bonuscheck",
"Use code/voucher": "Använd kod/voucher",
"User information": "Användarinformation",
@@ -319,6 +316,7 @@
"Your details": "Dina uppgifter",
"Your level": "Din nivå",
"Your points to spend": "Dina spenderbara poäng",
"Your room": "Ditt rum",
"Zip code": "Postnummer",
"Zoo": "Djurpark",
"Zoom in": "Zooma in",