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

fix: move crunching of data to trpc layer

Browse Source
This commit is contained in:
Christel Westerberg
2024-10-30 15:21:51 +01:00
parent 7710d3f8f9
commit 46622d0515
10 changed files with 345 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -14,28 +14,20 @@ import { bedTypeSchema } from "./schema"
import styles from "./bedOptions.module.css"
import type { BedTypeSchema } from "@/types/components/hotelReservation/enterDetails/bedType"
import type {
BedTypeProps,
BedTypeSchema,
} from "@/types/components/hotelReservation/enterDetails/bedType"
export default function BedType({
roomTypes,
}: {
roomTypes: {
description: string
size: {
min: number
max: number
}
value: string
}[]
}) {
export default function BedType({ bedTypes }: BedTypeProps) {
const intl = useIntl()
const bedType = useEnterDetailsStore((state) => state.userData.bedType)
const methods = useForm<BedTypeSchema>({
defaultValues: bedType
? {
bedType,
}
bedType,
}
: undefined,
criteriaMode: "all",
mode: "all",
@@ -64,7 +56,7 @@ export default function BedType({
return (
<FormProvider {...methods}>
<form className={styles.form} onSubmit={methods.handleSubmit(onSubmit)}>
{roomTypes.map((roomType) => {
{bedTypes.map((roomType) => {
const width =
roomType.size.max === roomType.size.min
? `${roomType.size.min} cm`

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

@@ -13,10 +13,12 @@ import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import useLang from "@/hooks/useLang"
import { formatNumber } from "@/utils/format"
import styles from "./summary.module.css"
import { RoomsData } from "@/types/components/hotelReservation/enterDetails/bookingData"
import { BreakfastPackage } from "@/types/components/hotelReservation/enterDetails/breakfast"
import { BreakfastPackageEnum } from "@/types/enums/breakfast"
export default function Summary({
@@ -27,15 +29,15 @@ export default function Summary({
room: RoomsData
}) {
const [chosenBed, setChosenBed] = useState<string>()
const [chosenBreakfast, setCosenBreakfast] = useState<string>()
const [chosenBreakfast, setChosenBreakfast] = useState<
BreakfastPackage | BreakfastPackageEnum.NO_BREAKFAST
>()
const intl = useIntl()
const lang = useLang()
const { fromDate, toDate, bedType, breakfast } = useEnterDetailsStore(
(state) => ({
fromDate: state.roomData.fromDate,
toDate: state.roomData.toDate,
rooms: state.roomData.room,
hotel: state.roomData.hotel,
bedType: state.userData.bedType,
breakfast: state.userData.breakfast,
})
@@ -55,10 +57,9 @@ export default function Summary({
useEffect(() => {
setChosenBed(bedType)
if (breakfast === BreakfastPackageEnum.NO_BREAKFAST) {
setCosenBreakfast("No breakfast")
} else if (breakfast) {
setCosenBreakfast("Breakfast buffet")
if (breakfast) {
setChosenBreakfast(breakfast)
}
}, [bedType, breakfast])
@@ -80,7 +81,10 @@ export default function Summary({
<Caption color={color}>
{intl.formatMessage(
{ id: "{amount} {currency}" },
{ amount: room.localPrice, currency: "SEK" }
{
amount: formatNumber(parseInt(room.localPrice.price ?? "0")),
currency: room.localPrice.currency,
}
)}
</Caption>
</div>
@@ -118,24 +122,41 @@ export default function Summary({
<Caption color="uiTextMediumContrast">
{intl.formatMessage(
{ id: "{amount} {currency}" },
{ amount: "0", currency: "SEK" }
{ amount: "0", currency: room.localPrice.currency }
)}
</Caption>
</div>
) : null}
{chosenBreakfast ? (
<div className={styles.entry}>
<Body color="textHighContrast">
{intl.formatMessage({ id: chosenBreakfast })}
</Body>
<Caption color="uiTextMediumContrast">
{intl.formatMessage(
{ id: "{amount} {currency}" },
{ amount: "0", currency: "SEK" }
)}
</Caption>
</div>
chosenBreakfast === BreakfastPackageEnum.NO_BREAKFAST ? (
<div className={styles.entry}>
<Body color="textHighContrast">
{intl.formatMessage({ id: "No breakfast" })}
</Body>
<Caption color="uiTextMediumContrast">
{intl.formatMessage(
{ id: "{amount} {currency}" },
{ amount: "0", currency: room.localPrice.currency }
)}
</Caption>
</div>
) : (
<div className={styles.entry}>
<Body color="textHighContrast">
{intl.formatMessage({ id: "Breakfast buffet" })}
</Body>
<Caption color="uiTextMediumContrast">
{intl.formatMessage(
{ id: "{amount} {currency}" },
{
amount: chosenBreakfast.totalPrice,
currency: chosenBreakfast.currency,
}
)}
</Caption>
</div>
)
) : null}
</div>
<Divider color="primaryLightSubtle" />
@@ -156,14 +177,20 @@ export default function Summary({
<Body textTransform="bold">
{intl.formatMessage(
{ id: "{amount} {currency}" },
{ amount: room.localPrice, currency: "SEK" } // TODO: calculate total price
{
amount: formatNumber(parseInt(room.localPrice.price ?? "0")),
currency: room.localPrice.currency,
}
)}
</Body>
<Caption color="uiTextMediumContrast">
{intl.formatMessage({ id: "Approx." })}{" "}
{intl.formatMessage(
{ id: "{amount} {currency}" },
{ amount: room.euroPrice, currency: "EUR" }
{
amount: formatNumber(parseInt(room.euroPrice.price ?? "0")),
currency: room.euroPrice.currency,
}
)}
</Caption>
</div>