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

7
components/HotelReservation/EnterDetails/BedType/index.tsx
View File

@@ -43,10 +43,6 @@ export default function BedType({
reValidateMode: "onChange",
})
const text = intl.formatMessage<React.ReactNode>(
{ id: "<b>Included</b> (based on availability)" },
{ b: (str) => <b>{str}</b> }
)
const completeStep = useEnterDetailsStore((state) => state.completeStep)
const onSubmit = useCallback(
@@ -71,7 +67,7 @@ export default function BedType({
{roomTypes.map((roomType) => {
const width =
roomType.size.max === roomType.size.min
? roomType.size.max
? `${roomType.size.min} cm`
: `${roomType.size.min} cm - ${roomType.size.max} cm`
return (
<RadioCard
@@ -81,7 +77,6 @@ export default function BedType({
id={roomType.value}
name="bedType"
subtitle={width}
text={text}
title={roomType.description}
value={roomType.description}
/>

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>