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

feat(SW-589): Room selection summary

Browse Source
This commit is contained in:
Pontus Dreij
2024-10-14 16:45:09 +02:00
parent 7a6af05447
commit 72eca90d1b
9 changed files with 131 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
app/[lang]/(live)/(public)/hotelreservation/select-rate/page.tsx
View File

@@ -1,5 +1,5 @@
import { getProfileSafely } from "@/lib/trpc/memoizedRequests"
import { serverClient } from "@/lib/trpc/server"
import tempHotelData from "@/server/routers/hotels/tempHotelData.json"
import RoomSelection from "@/components/HotelReservation/SelectRate/RoomSelection"
import { setLang } from "@/i18n/serverContext"
@@ -15,18 +15,20 @@ export default async function SelectRatePage({
}: PageArgs<LangParams & { section: string }, SelectRateSearchParams>) {
setLang(params.lang)
const hotelData = await serverClient().hotel.hotelData.get({
hotelId: searchParams.hotel,
language: params.lang,
include: ["RoomCategories"],
})
const roomConfigurations = await serverClient().hotel.availability.rooms({
hotelId: parseInt(searchParams.hotel, 10),
roomStayStartDate: "2024-11-02",
roomStayEndDate: "2024-11-03",
adults: 1,
})
const [hotelData, roomConfigurations, user] = await Promise.all([
serverClient().hotel.hotelData.get({
hotelId: searchParams.hotel,
language: params.lang,
include: ["RoomCategories"],
}),
serverClient().hotel.availability.rooms({
hotelId: parseInt(searchParams.hotel, 10),
roomStayStartDate: "2024-11-02",
roomStayEndDate: "2024-11-03",
adults: 1,
}),
getProfileSafely(),
])
if (!roomConfigurations) {
return "No rooms found" // TODO: Add a proper error message
@@ -47,6 +49,7 @@ export default async function SelectRatePage({
<RoomSelection
roomConfigurations={roomConfigurations}
roomCategories={roomCategories ?? []}
user={user}
/>
</div>
</div>

19
components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/index.tsx
View File

@@ -17,6 +17,8 @@ export default function FlexibilityOption({
name,
paymentTerm,
priceInformation,
roomType,
handleSelectRate,
}: FlexibilityOptionProps) {
const [rootDiv, setRootDiv] = useState<Element | undefined>(undefined)
const [isPopoverOpen, setIsPopoverOpen] = useState(false)
@@ -42,9 +44,24 @@ export default function FlexibilityOption({
const { public: publicPrice, member: memberPrice } = product.productType
function onChange() {
const rate = {
roomType: roomType,
priceName: name,
public: publicPrice,
member: memberPrice,
}
handleSelectRate(rate)
}
return (
<label>
<input type="radio" name="rateCode" value={publicPrice?.rateCode} />
<input
type="radio"
name="rateCode"
value={publicPrice?.rateCode}
onChange={onChange}
/>
<div className={styles.card}>
<div className={styles.header} ref={setRef}>
<DialogTrigger>

8
components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx
View File

@@ -1,4 +1,5 @@
"use client"
import { useIntl } from "react-intl"
import { RateDefinition } from "@/server/routers/hotels/output"
@@ -21,6 +22,7 @@ export default function RoomCard({
rateDefinitions,
roomConfiguration,
roomCategories,
handleSelectRate,
}: RoomCardProps) {
const intl = useIntl()
@@ -112,6 +114,8 @@ export default function RoomCard({
paymentTerm={intl.formatMessage({ id: "Pay now" })}
product={findProductForRate(saveRate)}
priceInformation={getPriceForRate(saveRate)}
handleSelectRate={handleSelectRate}
roomType={roomConfiguration.roomType}
/>
<FlexibilityOption
name={intl.formatMessage({ id: "Free rebooking" })}
@@ -119,6 +123,8 @@ export default function RoomCard({
paymentTerm={intl.formatMessage({ id: "Pay now" })}
product={findProductForRate(changeRate)}
priceInformation={getPriceForRate(changeRate)}
handleSelectRate={handleSelectRate}
roomType={roomConfiguration.roomType}
/>
<FlexibilityOption
name={intl.formatMessage({ id: "Free cancellation" })}
@@ -126,6 +132,8 @@ export default function RoomCard({
paymentTerm={intl.formatMessage({ id: "Pay later" })}
product={findProductForRate(flexRate)}
priceInformation={getPriceForRate(flexRate)}
handleSelectRate={handleSelectRate}
roomType={roomConfiguration.roomType}
/>
</div>
</div>

58
components/HotelReservation/SelectRate/RoomSelection/index.tsx
View File

@@ -1,18 +1,29 @@
"use client"
import { useRouter, useSearchParams } from "next/navigation"
import { useState } from "react"
import { useIntl } from "react-intl"
import Button from "@/components/TempDesignSystem/Button"
import Body from "@/components/TempDesignSystem/Text/Body"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import RoomCard from "./RoomCard"
import styles from "./roomSelection.module.css"
import { RoomSelectionProps } from "@/types/components/hotelReservation/selectRate/roomSelection"
import { Rate } from "@/types/components/hotelReservation/selectRate/selectRate"
export default function RoomSelection({
roomConfigurations,
roomCategories,
user,
}: RoomSelectionProps) {
const [rateSummary, setRateSummary] = useState<Rate | null>(null)
const router = useRouter()
const searchParams = useSearchParams()
const intl = useIntl()
function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
e.preventDefault()
@@ -36,16 +47,51 @@ export default function RoomSelection({
rateDefinitions={roomConfigurations.rateDefinitions}
roomConfiguration={roomConfiguration}
roomCategories={roomCategories}
handleSelectRate={setRateSummary}
/>
</li>
))}
</ul>
{/* <div className={styles.summary}>
This is summary
<Button type="submit" size="small" theme="primaryDark">
{intl.formatMessage({ id: "Choose room" })}
</Button>
</div> */}
{rateSummary && (
<div className={styles.summary}>
<div className={styles.summaryText}>
<Subtitle>{rateSummary.roomType}</Subtitle>
<Body>{rateSummary.priceName}</Body>
</div>
<div className={styles.summaryPrice}>
<div className={styles.summaryPriceText}>
{user ? (
<>
<Subtitle color="red">
{rateSummary.member?.localPrice.pricePerStay}{" "}
{rateSummary.member?.localPrice.currency}
</Subtitle>
<Body>
{intl.formatMessage({ id: "Approx." })}{" "}
{rateSummary.member?.requestedPrice?.pricePerStay}{" "}
{rateSummary.member?.requestedPrice?.currency}
</Body>
</>
) : (
<>
<Subtitle>
{rateSummary.public?.localPrice.pricePerStay}{" "}
{rateSummary.public?.localPrice.currency}
</Subtitle>
<Body>
{intl.formatMessage({ id: "Approx." })}{" "}
{rateSummary.public?.requestedPrice?.pricePerStay}{" "}
{rateSummary.public?.requestedPrice?.currency}
</Body>
</>
)}
</div>
<Button type="submit" theme="base">
{intl.formatMessage({ id: "Continue" })}
</Button>
</div>
</div>
)}
</form>
</div>
)

11
components/HotelReservation/SelectRate/RoomSelection/roomSelection.module.css
View File

@@ -22,11 +22,20 @@
.summary {
position: fixed;
z-index: 10;
bottom: 0;
left: 0;
right: 0;
background-color: white;
background-color: var(--Base-Surface-Primary-light-Normal);
padding: var(--Spacing-x3) var(--Spacing-x7) var(--Spacing-x5);
display: flex;
justify-content: space-between;
align-items: center;
}
.summaryPrice {
display: flex;
gap: var(--Spacing-x4);
}
@media (min-width: 767px) {

4
types/components/hotelReservation/selectRate/flexibilityOption.ts
View File

@@ -2,6 +2,8 @@ import { z } from "zod"
import { Product, productTypePriceSchema } from "@/server/routers/hotels/output"
import { Rate } from "./selectRate"
type ProductPrice = z.output<typeof productTypePriceSchema>
export type FlexibilityOptionProps = {
@@ -10,6 +12,8 @@ export type FlexibilityOptionProps = {
value: string
paymentTerm: string
priceInformation?: Array<string>
roomType: string
handleSelectRate: (rate: Rate) => void
}
export interface PriceListProps {

3
types/components/hotelReservation/selectRate/roomCard.ts
View File

@@ -3,10 +3,13 @@ import {
RoomConfiguration,
} from "@/server/routers/hotels/output"
import { Rate } from "./selectRate"
import { RoomData } from "@/types/hotel"
export type RoomCardProps = {
roomConfiguration: RoomConfiguration
rateDefinitions: RateDefinition[]
roomCategories: RoomData[]
handleSelectRate: (rate: Rate) => void
}

2
types/components/hotelReservation/selectRate/roomSelection.ts
View File

@@ -1,8 +1,10 @@
import { RoomsAvailability } from "@/server/routers/hotels/output"
import { RoomData } from "@/types/hotel"
import { User } from "@/types/user"
export interface RoomSelectionProps {
roomConfigurations: RoomsAvailability
roomCategories: RoomData[]
user: User | null
}

18
types/components/hotelReservation/selectRate/selectRate.ts
View File

@@ -1,5 +1,23 @@
import { Product } from "@/server/routers/hotels/output"
export interface SelectRateSearchParams {
fromDate: string
toDate: string
hotel: string
}
export interface Rate {
roomType: string
priceName: string
public: Product["productType"]["public"]
member: Product["productType"]["member"]
}
export interface State {
selectedRate: Rate | null
}
export type SetSelectedRateAction = {
type: "SET_SELECTED_RATE"
payload: Rate
}