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

feat(SW-243): implement mobile design

Browse Source
This commit is contained in:
Fredrik Thorsson
2024-08-19 14:37:17 +02:00
parent 8dae837ef2
commit bdafef492f
9 changed files with 257 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
app/[lang]/(live)/(public)/hotelreservation/booking-confirmation/page.module.css Normal file
View File

@@ -0,0 +1,30 @@
.main {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--Spacing-x4);
padding: var(--Spacing-x4) var(--Spacing-x4);
background-color: var(--Scandic-Brand-Warm-White);
min-height: 100dvh;
}
.section {
display: flex;
flex-direction: column;
gap: var(--Spacing-x3);
width: 100%;
max-width: 525px;
}
.buttons {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--Spacing-x2);
}
.button {
width: 100%;
max-width: 240px;
justify-content: center;
}

48
app/[lang]/(live)/(public)/hotelreservation/booking-confirmation/page.tsx Normal file
View File

@@ -0,0 +1,48 @@
import ConfirmationCard from "@/components/HotelReservation/BookingConfirmation/ConfirmationCard"
import ConfirmationSummary from "@/components/HotelReservation/BookingConfirmation/ConfirmationSummary"
import ConfirmationTimes from "@/components/HotelReservation/BookingConfirmation/ConfirmationTimes"
import Button from "@/components/TempDesignSystem/Button"
import Body from "@/components/TempDesignSystem/Text/Body"
import Title from "@/components/TempDesignSystem/Text/Title"
import styles from "./page.module.css"
export default function BookingConfirmationPage() {
return (
<main className={styles.main}>
<section className={styles.section}>
<div>
<Title textAlign="center">Thank you</Title>
<Title textAlign="center" as="h3">
We look forward to your visit!
</Title>
</div>
<Body color="burgundy" textAlign="center">
We have sent a detailed confirmation of your booking to your email:
lisa.andersson@gmail.com.
</Body>
<div className={styles.buttons}>
<Button
size="small"
theme="base"
intent="secondary"
className={styles.button}
>
Download the Scandic app
</Button>
<Button
size="small"
theme="base"
intent="secondary"
className={styles.button}
>
View your booking
</Button>
</div>
</section>
<ConfirmationCard />
<ConfirmationTimes />
<ConfirmationSummary />
</main>
)
}

41
components/HotelReservation/BookingConfirmation/ConfirmationCard/confirmationCard.module.css Normal file
View File

@@ -0,0 +1,41 @@
.test {
display: flex;
width: 100%;
max-width: 365px;
background-color: var(--Base-Surface-Primary-light-Normal);
border-radius: var(--Corner-radius-Small);
overflow: hidden;
}
.image {
height: 100%;
width: 100%;
max-width: 105px;
object-fit: cover;
}
.info {
display: flex;
flex: 1;
flex-direction: column;
gap: var(--Spacing-x1);
padding: var(--Spacing-x2);
font-family: var(--typography-Caption-Regular-fontFamily);
font-size: var(--typography-Caption-Regular-fontSize);
}
.hotel {
display: flex;
flex-direction: column;
gap: var(--Spacing-x-half);
}
.stay {
display: flex;
flex-direction: column;
gap: var(--Spacing-x-half);
}
.dates {
display: flex;
align-items: center;
}

41
components/HotelReservation/BookingConfirmation/ConfirmationCard/index.tsx Normal file
View File

@@ -0,0 +1,41 @@
import { ArrowRightIcon, ScandicLogoIcon } from "@/components/Icons"
import Image from "@/components/Image"
import Title from "@/components/TempDesignSystem/Text/Title"
import styles from "./confirmationCard.module.css"
export default function ConfirmationCard() {
return (
<section className={styles.test}>
<div>
<Image
src="https://test3.scandichotels.com/imagevault/publishedmedia/i11isd60bh119s9486b7/downtown-camper-by-scandic-lobby-reception-desk-ch.jpg?w=640"
alt=""
height={400}
width={200}
className={styles.image}
/>
</div>
<div className={styles.info}>
<header>
<ScandicLogoIcon color="red" />
<Title as="h5" textTransform="capitalize">
Helsinki Hub
</Title>
</header>
<div className={styles.hotel}>
<span>Kaisaniemenkatu 7, Helsinki</span>
<span>Call us at +358 300 870680</span>
</div>
<div className={styles.stay}>
<span>1 night</span>
<div className={styles.dates}>
<span>2024.03.09</span>
<ArrowRightIcon height={15} width={15} />
<span>2024.03.10</span>
</div>
</div>
</div>
</section>
)
}

13
components/HotelReservation/BookingConfirmation/ConfirmationSummary/confirmationSummary.module.css Normal file
View File

@@ -0,0 +1,13 @@
.section {
width: 100%;
max-width: 365px;
}
.summary {
display: flex;
justify-content: space-between;
padding: var(--Spacing-x2) var(--Spacing-x0);
font-family: var(--typography-Caption-Regular-fontFamily);
font-size: var(--typography-Caption-Regular-fontSize);
border-bottom: 1px solid var(--Base-Border-Subtle);
}

33
components/HotelReservation/BookingConfirmation/ConfirmationSummary/index.tsx Normal file
View File

@@ -0,0 +1,33 @@
import React from "react"
import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n"
import styles from "./confirmationSummary.module.css"
export default async function ConfirmationSummary() {
const intl = await getIntl()
return (
<section className={styles.section}>
<Title as="h4" textAlign="center">
{intl.formatMessage({ id: "Summary" })}
</Title>
<div className={styles.summary}>
<span>Type of room: Standard Room</span>
<span>1648 SEK</span>
</div>
<div className={styles.summary}>
<span>Type of bed: King Bed</span>
<span>0 SEK</span>
</div>
<div className={styles.summary}>
<span>Breakfast: Breakfast Buffé</span>
<span>198 SEK</span>
</div>
<div className={styles.summary}>
<span>Flexibility: Free Rebooking</span>
<span>200 SEK</span>
</div>
</section>
)
}

19
components/HotelReservation/BookingConfirmation/ConfirmationTimes/confirmationTimes.module.css Normal file
View File

@@ -0,0 +1,19 @@
.section {
display: flex;
justify-content: space-between;
padding: var(--Spacing-x2);
border-radius: var(--Corner-radius-Small);
background-color: var(--Base-Surface-Primary-dark-Normal);
width: 100%;
max-width: 365px;
}
.breakfast,
.checkIn,
.checkOut {
display: flex;
flex-direction: column;
gap: var(--Spacing-x-half);
font-family: var(--typography-Caption-Regular-fontFamily);
font-size: var(--typography-Caption-Regular-fontSize);
}

29
components/HotelReservation/BookingConfirmation/ConfirmationTimes/index.tsx Normal file
View File

@@ -0,0 +1,29 @@
import React from "react"
import Body from "@/components/TempDesignSystem/Text/Body"
import { getIntl } from "@/i18n"
import styles from "./confirmationTimes.module.css"
export default async function ConfirmationTimes() {
const intl = await getIntl()
return (
<section className={styles.section}>
<div className={styles.breakfast}>
<Body color="burgundy">{intl.formatMessage({ id: "Breakfast" })}</Body>
<span>Mon-Fri 06:30-10:00</span>
<span>Mon-Fri 06:30-10:00</span>
</div>
<div className={styles.checkIn}>
<Body color="burgundy">{intl.formatMessage({ id: "Check in" })}</Body>
<span>From</span>
<span>15:00</span>
</div>
<div className={styles.checkOut}>
<Body color="burgundy">{intl.formatMessage({ id: "Check out" })}</Body>
<span>At latest</span>
<span>12:00</span>
</div>
</section>
)
}

3
i18n/dictionaries/en.json
View File

@@ -149,6 +149,9 @@
"Hotel facilities": "Hotel facilities",
"Hotel surroundings": "Hotel surroundings",
"Show map": "Show map",
"Check in": "Check in",
"Check out": "Check out",
"Summary": "Summary",
"Where to": "Where to",
"When": "When",
"Rooms & Guests": "Rooms & Guests",