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

Merged in feat(SW-1722)-mystay-multiroom-view (pull request #1396)

Browse Source 
Feat(SW-1722) mystay multiroom view

* feat(SW-1722) View all rooms on my stay

* feat(sW-1722) Show linked reservation

* feat(SW-1722) merged monorepo

* feat(SW-1722) yarn install

* feat(SW-1722) removed unused data

* feat(SW-1722) Streaming data from the server to the client


Approved-by: Niclas Edenvin
This commit is contained in:
Pontus Dreij
2025-02-27 07:24:56 +00:00
parent 0c498d82ca
commit 31a536b1f7
11 changed files with 364 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
apps/scandic-web/components/HotelReservation/MyStay/LinkedReservation/LinkedReservationSkeleton.tsx Normal file
View File

@@ -0,0 +1,64 @@
import SkeletonShimmer from "@/components/SkeletonShimmer"
import styles from "./linkedReservation.module.css"
export default function LinkedReservationSkeleton() {
return (
<div className={styles.linkedReservation}>
<div className={styles.title}>
<div
className={styles.skeleton}
style={{ width: "100px", height: "24px" }}
>
<SkeletonShimmer width="100px" height="24px" />
</div>
</div>
<div className={styles.details}>
<div
className={styles.skeleton}
style={{ width: "200px", height: "18px" }}
>
<SkeletonShimmer width="200px" height="18px" />
</div>
<div className={styles.guests}>
<div
className={styles.skeleton}
style={{ width: "150px", height: "18px" }}
>
<SkeletonShimmer width="150px" height="18px" />
</div>
</div>
</div>
<div className={styles.dates}>
<div className={styles.date}>
<div
className={styles.skeleton}
style={{ width: "80px", height: "18px" }}
>
<SkeletonShimmer width="80px" height="18px" />
</div>
<div
className={styles.skeleton}
style={{ width: "160px", height: "18px" }}
>
<SkeletonShimmer width="160px" height="18px" />
</div>
</div>
<div className={styles.date}>
<div
className={styles.skeleton}
style={{ width: "80px", height: "18px" }}
>
<SkeletonShimmer width="80px" height="18px" />
</div>
<div
className={styles.skeleton}
style={{ width: "160px", height: "18px" }}
>
<SkeletonShimmer width="160px" height="18px" />
</div>
</div>
</div>
</div>
)
}

108
apps/scandic-web/components/HotelReservation/MyStay/LinkedReservation/index.tsx Normal file
View File

@@ -0,0 +1,108 @@
"use client"
import { use, useEffect } from "react"
import { useIntl } from "react-intl"
import { dt } from "@/lib/dt"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import useLang from "@/hooks/useLang"
import { useMyStayTotalPriceStore } from "../stores/myStayTotalPrice"
import styles from "./linkedReservation.module.css"
import type { BookingConfirmation } from "@/types/trpc/routers/booking/confirmation"
interface LinkedReservationProps {
bookingPromise: Promise<BookingConfirmation | null>
index: number
}
export default function LinkedReservation({
bookingPromise,
index,
}: LinkedReservationProps) {
const intl = useIntl()
const lang = useLang()
const { addRoomPrice } = useMyStayTotalPriceStore()
const bookingConfirmation = use(bookingPromise)
const { booking } = bookingConfirmation ?? {}
useEffect(() => {
if (booking) {
addRoomPrice({
id: booking.confirmationNumber ?? "",
totalPrice: booking.totalPrice,
currencyCode: booking.currencyCode,
isMainBooking: false,
})
}
}, [booking, addRoomPrice])
if (!booking) return null
const fromDate = dt(booking.checkInDate).locale(lang)
const toDate = dt(booking.checkOutDate).locale(lang)
return (
<article className={styles.linkedReservation}>
<div className={styles.title}>
<Subtitle color="burgundy">
{intl.formatMessage({ id: "Room" }) + " " + (index + 2)}
</Subtitle>
</div>
<div className={styles.details}>
<Caption textTransform="uppercase" type="bold">
{intl.formatMessage({ id: "Reference" })} {booking.confirmationNumber}
</Caption>
<div className={styles.guests}>
<Caption color="uiTextHighContrast">
{booking.childrenAges.length > 0
? intl.formatMessage(
{ id: "{adults} adults, {children} children" },
{
adults: booking.adults,
children: booking.childrenAges.length,
}
)
: intl.formatMessage(
{ id: "{adults} adults" },
{
adults: booking.adults,
}
)}
</Caption>
</div>
</div>
<div className={styles.dates}>
<div className={styles.date}>
<Caption
type="bold"
textTransform="uppercase"
color="uiTextHighContrast"
>
{intl.formatMessage({ id: "Check-in" })}
</Caption>
<Caption color="uiTextHighContrast">
{`${fromDate.format("dddd, D MMMM")} `}
</Caption>
</div>
<div className={styles.date}>
<Caption
type="bold"
textTransform="uppercase"
color="uiTextHighContrast"
>
{intl.formatMessage({ id: "Check-out" })}
</Caption>
<Caption color="uiTextHighContrast">
{`${toDate.format("dddd, D MMMM")} `}
</Caption>
</div>
</div>
</article>
)
}

33
apps/scandic-web/components/HotelReservation/MyStay/LinkedReservation/linkedReservation.module.css Normal file
View File

@@ -0,0 +1,33 @@
.linkedReservation {
display: flex;
flex-direction: row;
gap: var(--Spacing-x2);
background-color: var(--Base-Background-Primary-Normal);
padding: var(--Spacing-x3);
border-radius: var(--Corner-radius-Large);
margin-top: 20px;
}
.title {
border-right: 1px solid var(--Base-Border-Normal);
width: 40%;
align-content: center;
}
.details {
display: flex;
padding: 0 var(--Spacing-x1);
gap: var(--Spacing-x2);
flex-direction: column;
}
.dates {
display: flex;
flex-direction: column;
gap: var(--Spacing-x2);
flex: 1;
}
.date {
display: flex;
flex-direction: row;
justify-content: space-between;
}