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

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>
)