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

feat(SW-243): add temp data

Browse Source
This commit is contained in:
Fredrik Thorsson
2024-08-20 14:29:14 +02:00
parent bd14fb5fd2
commit 65509622d2
12 changed files with 203 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,18 +1,47 @@
import ConfirmationCard from "@/components/HotelReservation/BookingConfirmation/ConfirmationCard" import IntroSection from "@/components/HotelReservation/BookingConfirmation/IntroSection"
import ConfirmationHead from "@/components/HotelReservation/BookingConfirmation/ConfirmationHead" import StaySection from "@/components/HotelReservation/BookingConfirmation/StaySection"
import ConfirmationSummary from "@/components/HotelReservation/BookingConfirmation/ConfirmationSummary" import SummarySection from "@/components/HotelReservation/BookingConfirmation/SummarySection"
import ConfirmationTimes from "@/components/HotelReservation/BookingConfirmation/ConfirmationTimes"
import styles from "./page.module.css" import styles from "./page.module.css"
import { BookingConfirmation } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"
export default function BookingConfirmationPage() { export default function BookingConfirmationPage() {
const confirmationData: BookingConfirmation = {
email: "lisa.andersson@outlook.com",
hotel: {
name: "Helsinki Hub",
address: "Kaisaniemenkatu 7, Helsinki",
location: "Helsinki",
phone: "+358 300 870680",
image:
"https://test3.scandichotels.com/imagevault/publishedmedia/i11isd60bh119s9486b7/downtown-camper-by-scandic-lobby-reception-desk-ch.jpg?w=640",
checkIn: "15.00",
checkOut: "12.00",
breakfast: { start: "06:30", end: "10:00" },
},
stay: {
nights: 1,
start: "2024.03.09",
end: "2024.03.10",
},
summary: {
roomType: "Standard Room",
bedType: "King size",
breakfast: "Yes",
flexibility: "Yes",
},
}
return ( return (
<main className={styles.main}> <main className={styles.main}>
<section className={styles.section}> <section className={styles.section}>
<ConfirmationHead /> <IntroSection email={confirmationData.email} />
<ConfirmationCard /> <StaySection
<ConfirmationTimes /> hotel={confirmationData.hotel}
<ConfirmationSummary /> stay={confirmationData.stay}
/>
<SummarySection summary={confirmationData.summary} />
</section> </section>
</main> </main>
) )

45
components/HotelReservation/BookingConfirmation/ConfirmationCard/index.tsx
View File

@@ -1,45 +0,0 @@
import { ArrowRightIcon, ScandicLogoIcon } from "@/components/Icons"
import Image from "@/components/Image"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Title from "@/components/TempDesignSystem/Text/Title"
import styles from "./confirmationCard.module.css"
export default function ConfirmationCard() {
return (
<section className={styles.section}>
<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}>
<div className={styles.hotel}>
<ScandicLogoIcon color="red" />
<Title as="h5" textTransform="capitalize">
Helsinki Hub
</Title>
<Caption color="burgundy" className={styles.caption}>
<span>Kaisaniemenkatu 7, Helsinki</span>
<span>Call us at +358 300 870680</span>
</Caption>
</div>
<div className={styles.width}>
<Body className={styles.stay}>
<span>1 night</span>
<span className={styles.dates}>
<span>2024.03.09</span>
<ArrowRightIcon height={15} width={15} />
<span>2024.03.10</span>
</span>
</Body>
</div>
</div>
</section>
)
}

18
components/HotelReservation/BookingConfirmation/ConfirmationTimes/confirmationTimes.module.css
View File

@@ -1,18 +0,0 @@
.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%;
}
.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
View File

@@ -1,29 +0,0 @@
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>
)
}

19
components/HotelReservation/BookingConfirmation/ConfirmationHead/index.tsx → components/HotelReservation/BookingConfirmation/IntroSection/index.tsx
View File

@@ -3,23 +3,30 @@ import React from "react"
import Button from "@/components/TempDesignSystem/Button" import Button from "@/components/TempDesignSystem/Button"
import Body from "@/components/TempDesignSystem/Text/Body" import Body from "@/components/TempDesignSystem/Text/Body"
import Title from "@/components/TempDesignSystem/Text/Title" import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n"
import styles from "./confirmationHead.module.css" import styles from "./introSection.module.css"
import { IntroSectionProps } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"
export default async function IntroSection({ email }: IntroSectionProps) {
const intl = await getIntl()
export default function ConfirmationHead() {
return ( return (
<section className={styles.section}> <section className={styles.section}>
<div> <div>
<Title textAlign="center" as="h2"> <Title textAlign="center" as="h2">
Thank you {intl.formatMessage({ id: "Thank you" })}
</Title> </Title>
<Title textAlign="center" as="h3"> <Title textAlign="center" as="h3">
We look forward to your visit! {intl.formatMessage({ id: "We look forward to your visit!" })}
</Title> </Title>
</div> </div>
<Body color="burgundy" textAlign="center"> <Body color="burgundy" textAlign="center">
We have sent a detailed confirmation of your booking to your email: {intl.formatMessage({
lisa.andersson@gmail.com. id: "We have sent a detailed confirmation of your booking to your email: ",
})}
{email}
</Body> </Body>
<div className={styles.buttons}> <div className={styles.buttons}>
<Button <Button

0
components/HotelReservation/BookingConfirmation/ConfirmationHead/confirmationHead.module.css → components/HotelReservation/BookingConfirmation/IntroSection/introSection.module.css
View File

79
components/HotelReservation/BookingConfirmation/StaySection/index.tsx Normal file
View File

@@ -0,0 +1,79 @@
import { Stay } from "@/server/routers/user/output"
import { ArrowRightIcon, ScandicLogoIcon } from "@/components/Icons"
import Image from "@/components/Image"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n"
import styles from "./staySection.module.css"
import { StaySectionProps } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"
export default async function StaySection({ hotel, stay }: StaySectionProps) {
const intl = await getIntl()
const nights =
stay.nights > 1
? intl.formatMessage({ id: "nights" })
: intl.formatMessage({ id: "night" })
return (
<>
<section className={styles.card}>
<div>
<Image
src={hotel.image}
alt=""
height={400}
width={200}
className={styles.image}
/>
</div>
<div className={styles.info}>
<div className={styles.hotel}>
<ScandicLogoIcon color="red" />
<Title as="h5" textTransform="capitalize">
{hotel.name}
</Title>
<Caption color="burgundy" className={styles.caption}>
<span>{hotel.address}</span>
<span>{hotel.phone}</span>
</Caption>
</div>
<div className={styles.width}>
<Body className={styles.stay}>
<span>{`${stay.nights} ${nights}`}</span>
<span className={styles.dates}>
<span>{stay.start}</span>
<ArrowRightIcon height={15} width={15} />
<span>{stay.end}</span>
</span>
</Body>
</div>
</div>
</section>
<section className={styles.table}>
<div className={styles.breakfast}>
<Body color="burgundy">
{intl.formatMessage({ id: "Breakfast" })}
</Body>
<span>{`Mon-fri ${hotel.breakfast.start}-${hotel.breakfast.end}`}</span>
<span>{`Sat-sun ${hotel.breakfast.start}-${hotel.breakfast.end}`}</span>
</div>
<div className={styles.checkIn}>
<Body color="burgundy">{intl.formatMessage({ id: "Check in" })}</Body>
<span>From</span>
<span>{hotel.checkIn}</span>
</div>
<div className={styles.checkOut}>
<Body color="burgundy">
{intl.formatMessage({ id: "Check out" })}
</Body>
<span>At latest</span>
<span>{hotel.checkOut}</span>
</div>
</section>
</>
)
}

23
components/HotelReservation/BookingConfirmation/ConfirmationCard/confirmationCard.module.css → components/HotelReservation/BookingConfirmation/StaySection/staySection.module.css
View File

@@ -1,4 +1,4 @@
.section { .card {
display: flex; display: flex;
width: 100%; width: 100%;
background-color: var(--Base-Surface-Primary-light-Normal); background-color: var(--Base-Surface-Primary-light-Normal);
@@ -37,8 +37,27 @@
gap: var(--Spacing-x-half); gap: var(--Spacing-x-half);
} }
.table {
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%;
}
.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);
}
@media screen and (min-width: 1367px) { @media screen and (min-width: 1367px) {
.section { .card {
flex-direction: column; flex-direction: column;
} }
.image { .image {

14
components/HotelReservation/BookingConfirmation/ConfirmationSummary/index.tsx → components/HotelReservation/BookingConfirmation/SummarySection/index.tsx
View File

@@ -3,9 +3,11 @@ import React from "react"
import Title from "@/components/TempDesignSystem/Text/Title" import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n" import { getIntl } from "@/i18n"
import styles from "./confirmationSummary.module.css" import styles from "./summarySection.module.css"
export default async function ConfirmationSummary() { import { SummarySectionProps } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"
export default async function SummarySection({ summary }: SummarySectionProps) {
const intl = await getIntl() const intl = await getIntl()
return ( return (
<section className={styles.section}> <section className={styles.section}>
@@ -13,19 +15,19 @@ export default async function ConfirmationSummary() {
{intl.formatMessage({ id: "Summary" })} {intl.formatMessage({ id: "Summary" })}
</Title> </Title>
<div className={styles.summary}> <div className={styles.summary}>
<span>Type of room: Standard Room</span> <span>{`Type of room: ${summary.roomType}`}</span>
<span>1648 SEK</span> <span>1648 SEK</span>
</div> </div>
<div className={styles.summary}> <div className={styles.summary}>
<span>Type of bed: King Bed</span> <span>{`Type of bed: ${summary.bedType}`}</span>
<span>0 SEK</span> <span>0 SEK</span>
</div> </div>
<div className={styles.summary}> <div className={styles.summary}>
<span>Breakfast: Breakfast Buffé</span> <span>{`Breakfast: ${summary.breakfast}`}</span>
<span>198 SEK</span> <span>198 SEK</span>
</div> </div>
<div className={styles.summary}> <div className={styles.summary}>
<span>Flexibility: Free Rebooking</span> <span>{`Flexibility: ${summary.flexibility}`}</span>
<span>200 SEK</span> <span>200 SEK</span>
</div> </div>
</section> </section>

0
components/HotelReservation/BookingConfirmation/ConfirmationSummary/confirmationSummary.module.css → components/HotelReservation/BookingConfirmation/SummarySection/summarySection.module.css
View File

5
i18n/dictionaries/en.json
View File

@@ -152,6 +152,11 @@
"Check in": "Check in", "Check in": "Check in",
"Check out": "Check out", "Check out": "Check out",
"Summary": "Summary", "Summary": "Summary",
"Thank you": "Thank you",
"We look forward to your visit!": "We look forward to your visit!",
"We have sent a detailed confirmation of your booking to your email: ": "We have sent a detailed confirmation of your booking to your email: ",
"Download the Scandic app": "Download the Scandic app",
"View your booking": "View your booking",
"Where to": "Where to", "Where to": "Where to",
"When": "When", "When": "When",
"Rooms & Guests": "Rooms & Guests", "Rooms & Guests": "Rooms & Guests",

40
types/components/hotelReservation/bookingConfirmation/bookingConfirmation.ts Normal file
View File

@@ -0,0 +1,40 @@
export type BookingConfirmation = {
email: string
hotel: {
name: string
address: string
location: string
phone: string
image: string
checkIn: string
checkOut: string
breakfast: {
start: string
end: string
}
}
stay: {
nights: number
start: string
end: string
}
summary: {
roomType: string
bedType: string
breakfast: string
flexibility: string
}
}
export type IntroSectionProps = {
email: BookingConfirmation["email"]
}
export type StaySectionProps = {
hotel: BookingConfirmation["hotel"]
stay: BookingConfirmation["stay"]
}
export type SummarySectionProps = {
summary: BookingConfirmation["summary"]
}