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

fix: make summary sticky

Browse Source
This commit is contained in:
Christel Westerberg
2024-10-25 11:09:03 +02:00
parent 7954c704d9
commit 7710d3f8f9
16 changed files with 170 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
components/HotelReservation/EnterDetails/Summary/index.tsx
View File

@@ -17,6 +17,7 @@ import useLang from "@/hooks/useLang"
import styles from "./summary.module.css"
import { RoomsData } from "@/types/components/hotelReservation/enterDetails/bookingData"
import { BreakfastPackageEnum } from "@/types/enums/breakfast"
export default function Summary({
isMember,
@@ -25,8 +26,8 @@ export default function Summary({
isMember: boolean
room: RoomsData
}) {
const [chosenBed, setChosenBed] = useState<string | undefined>()
const [chosenBreakfast, setCosenBreakfast] = useState<string | undefined>()
const [chosenBed, setChosenBed] = useState<string>()
const [chosenBreakfast, setCosenBreakfast] = useState<string>()
const intl = useIntl()
const lang = useLang()
const { fromDate, toDate, bedType, breakfast } = useEnterDetailsStore(
@@ -54,7 +55,11 @@ export default function Summary({
useEffect(() => {
setChosenBed(bedType)
setCosenBreakfast(breakfast)
if (breakfast === BreakfastPackageEnum.NO_BREAKFAST) {
setCosenBreakfast("No breakfast")
} else if (breakfast) {
setCosenBreakfast("Breakfast buffet")
}
}, [bedType, breakfast])
return (
@@ -75,7 +80,7 @@ export default function Summary({
<Caption color={color}>
{intl.formatMessage(
{ id: "{amount} {currency}" },
{ amount: room.price, currency: "SEK" }
{ amount: room.localPrice, currency: "SEK" }
)}
</Caption>
</div>
@@ -121,7 +126,9 @@ export default function Summary({
{chosenBreakfast ? (
<div className={styles.entry}>
<Body color="textHighContrast">{chosenBreakfast}</Body>
<Body color="textHighContrast">
{intl.formatMessage({ id: chosenBreakfast })}
</Body>
<Caption color="uiTextMediumContrast">
{intl.formatMessage(
{ id: "{amount} {currency}" },
@@ -149,14 +156,14 @@ export default function Summary({
<Body textTransform="bold">
{intl.formatMessage(
{ id: "{amount} {currency}" },
{ amount: room.price, currency: "SEK" } // TODO: calculate total price
{ amount: room.localPrice, currency: "SEK" } // TODO: calculate total price
)}
</Body>
<Caption color="uiTextMediumContrast">
{intl.formatMessage({ id: "Approx." })}{" "}
{intl.formatMessage(
{ id: "{amount} {currency}" },
{ amount: "455", currency: "EUR" }
{ amount: room.euroPrice, currency: "EUR" }
)}
</Caption>
</div>