Merged in feat/SW-1737-design-mystay-multiroom (pull request #1565)
Feat/SW-1737 design mystay multiroom * feat(SW-1737) Fixed member view of guest details * feat(SW-1737) fix merge issues * feat(SW-1737) Fixed price details * feat(SW-1737) removed unused imports * feat(SW-1737) removed true as statement * feat(SW-1737) updated store handling * feat(SW-1737) fixed bug showing double numbers * feat(SW-1737) small design fixed * feat(SW-1737) fixed rebase errors * feat(SW-1737) fixed create booking error with dates * feat(SW-1737) fixed view multiroom as singleroom * feat(SW-1737) fixes for multiroom * feat(SW-1737) fixed bookingsummary * feat(SW-1737) dont hide modify dates * feat(SW-1737) updated breakfast to handle number * feat(SW-1737) Added red color if member rate * feat(SW-1737) fix PR comments * feat(SW-1737) updated member tiers svg * feat(SW-1737) updated how to handle paymentMethodDescription * feat(SW-1737) fixes after testing mystay * feat(SW-1737) updated Room type to just use whats used * feat(SW-1737) fixed access * feat(SW-1737) refactor my stay after PR comments * feat(SW-1737) fix roomNumber translation * feat(SW-1737) removed log Approved-by: Arvid Norlin
This commit is contained in:
Pontus Dreij
@@ -1,9 +1,12 @@
|
||||
"use client"
|
||||
|
||||
import { useEffect } from "react"
|
||||
import { useIntl } from "react-intl"
|
||||
|
||||
import { Typography } from "@scandic-hotels/design-system/Typography"
|
||||
|
||||
import { CancellationRuleEnum } from "@/constants/booking"
|
||||
import { dt } from "@/lib/dt"
|
||||
import { useMyStayRoomDetailsStore } from "@/stores/my-stay/myStayRoomDetailsStore"
|
||||
|
||||
import {
|
||||
CheckCircleIcon,
|
||||
@@ -13,120 +16,107 @@ import {
|
||||
} from "@/components/Icons"
|
||||
import CrossCircleIcon from "@/components/Icons/CrossCircle"
|
||||
import IconChip from "@/components/TempDesignSystem/IconChip"
|
||||
import Body from "@/components/TempDesignSystem/Text/Body"
|
||||
import Caption from "@/components/TempDesignSystem/Text/Caption"
|
||||
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
|
||||
import { Toast } from "@/components/TempDesignSystem/Toasts"
|
||||
import useLang from "@/hooks/useLang"
|
||||
import { formatPrice } from "@/utils/numberFormatting"
|
||||
import { trackMyStayPageLink } from "@/utils/tracking"
|
||||
|
||||
import { useMyStayRoomDetailsStore } from "../stores/myStayRoomDetailsStore"
|
||||
import { useMyStayTotalPriceStore } from "../stores/myStayTotalPrice"
|
||||
import { formatChildBedPreferences } from "../utils"
|
||||
import TotalPrice from "../Rooms/TotalPrice"
|
||||
import SummaryCard from "./SummaryCard"
|
||||
|
||||
import styles from "./bookingSummary.module.css"
|
||||
|
||||
import type { Hotel, Room } from "@/types/hotel"
|
||||
import type { BookingConfirmation } from "@/types/trpc/routers/booking/confirmation"
|
||||
import type { Hotel } from "@/types/hotel"
|
||||
|
||||
interface BookingSummaryProps {
|
||||
booking: BookingConfirmation["booking"]
|
||||
hotel: Hotel
|
||||
room: Room | null
|
||||
}
|
||||
|
||||
export default function BookingSummary({
|
||||
booking,
|
||||
hotel,
|
||||
room,
|
||||
}: BookingSummaryProps) {
|
||||
export default function BookingSummary({ hotel }: BookingSummaryProps) {
|
||||
const intl = useIntl()
|
||||
const lang = useLang()
|
||||
|
||||
const bookedRoom = useMyStayRoomDetailsStore((state) => state.bookedRoom)
|
||||
|
||||
const {
|
||||
totalPrice,
|
||||
currencyCode,
|
||||
actions: { setRoomPrice },
|
||||
} = useMyStayTotalPriceStore()
|
||||
const {
|
||||
actions: { setRoomDetails },
|
||||
} = useMyStayRoomDetailsStore()
|
||||
|
||||
const childrenAsString = formatChildBedPreferences({
|
||||
childrenAges: booking.childrenAges,
|
||||
childBedPreferences: booking.childBedPreferences,
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
// Add price information
|
||||
setRoomPrice({
|
||||
id: booking.confirmationNumber,
|
||||
totalPrice: booking.totalPrice,
|
||||
currencyCode: booking.currencyCode,
|
||||
isMainBooking: true,
|
||||
})
|
||||
|
||||
// Add room details
|
||||
setRoomDetails({
|
||||
id: booking.confirmationNumber,
|
||||
hotelId: booking.hotelId,
|
||||
checkInDate: booking.checkInDate,
|
||||
checkOutDate: booking.checkOutDate,
|
||||
adults: booking.adults,
|
||||
children: childrenAsString,
|
||||
roomName: room?.name ?? booking.roomTypeCode ?? "",
|
||||
roomTypeCode: booking.roomTypeCode ?? "",
|
||||
rateCode: booking.rateDefinition.rateCode ?? "",
|
||||
bookingCode: booking.bookingCode ?? "",
|
||||
isCancelable: booking.isCancelable,
|
||||
mainRoom: booking.mainRoom,
|
||||
})
|
||||
}, [booking, room, childrenAsString, setRoomPrice, setRoomDetails])
|
||||
isCancelled,
|
||||
createDateTime,
|
||||
rateDefinition,
|
||||
guaranteeInfo,
|
||||
checkInDate,
|
||||
} = bookedRoom
|
||||
|
||||
const directionsUrl = `https://www.google.com/maps/dir/?api=1&destination=${hotel.location.latitude},${hotel.location.longitude}`
|
||||
|
||||
const bookingDate = dt(createDateTime).locale(lang).format("D MMMM YYYY")
|
||||
|
||||
const isPaid =
|
||||
booking.rateDefinition.cancellationRule !== "CancellableBefore6PM"
|
||||
const bookingDate = dt(booking.createDateTime)
|
||||
.locale(lang)
|
||||
.format("D MMMM YYYY")
|
||||
rateDefinition.cancellationRule !==
|
||||
CancellationRuleEnum.CancellableBefore6PM ||
|
||||
dt(checkInDate).startOf("day").isBefore(dt().startOf("day"))
|
||||
|
||||
const paymentMethod = guaranteeInfo?.paymentMethodDescription
|
||||
?.toLocaleLowerCase()
|
||||
.startsWith("visa")
|
||||
? intl.formatMessage({ id: "Card" })
|
||||
: guaranteeInfo?.paymentMethodDescription
|
||||
? guaranteeInfo?.paymentMethodDescription
|
||||
: intl.formatMessage({ id: "N/A" })
|
||||
|
||||
return (
|
||||
<div className={styles.bookingSummary}>
|
||||
<Subtitle textTransform="uppercase" color="burgundy">
|
||||
{intl.formatMessage({ id: "Booking summary" })}
|
||||
</Subtitle>
|
||||
<Typography variant="Title/sm">
|
||||
<h2 className={styles.title}>
|
||||
{intl.formatMessage({ id: "Booking summary" })}
|
||||
</h2>
|
||||
</Typography>
|
||||
<div className={styles.bookingSummaryContent}>
|
||||
<SummaryCard
|
||||
title={formatPrice(intl, totalPrice, currencyCode)}
|
||||
title={<TotalPrice variant="Body/Paragraph/mdBold" />}
|
||||
image={{
|
||||
src: "/_static/img/scandic-coin.svg",
|
||||
alt: "Scandic coin",
|
||||
}}
|
||||
texts={[`${intl.formatMessage({ id: "Payment" })}: N/A`]}
|
||||
texts={[`${intl.formatMessage({ id: "Payment" })}: ${paymentMethod}`]}
|
||||
supportingText={bookingDate}
|
||||
chip={
|
||||
<IconChip
|
||||
color={isPaid ? "green" : "red"}
|
||||
icon={
|
||||
isPaid ? (
|
||||
<CheckCircleIcon width={20} height={20} color="green" />
|
||||
) : (
|
||||
<CrossCircleIcon width={20} height={20} color="red" />
|
||||
)
|
||||
}
|
||||
>
|
||||
<Caption color={isPaid ? "green" : "red"}>
|
||||
<strong>{intl.formatMessage({ id: "Status" })}:</strong>{" "}
|
||||
{isPaid
|
||||
? intl.formatMessage({ id: "Paid" })
|
||||
: intl.formatMessage({ id: "Unpaid" })}
|
||||
</Caption>
|
||||
</IconChip>
|
||||
isCancelled ? (
|
||||
<IconChip
|
||||
color={"red"}
|
||||
icon={<CrossCircleIcon width={20} height={20} color="red" />}
|
||||
>
|
||||
<Typography variant="Body/Supporting text (caption)/smBold">
|
||||
<span>{intl.formatMessage({ id: "Cancelled" })}</span>
|
||||
</Typography>
|
||||
</IconChip>
|
||||
) : (
|
||||
<IconChip
|
||||
color={isPaid ? "green" : "red"}
|
||||
icon={
|
||||
isPaid ? (
|
||||
<CheckCircleIcon width={20} height={20} color="green" />
|
||||
) : (
|
||||
<CrossCircleIcon width={20} height={20} color="red" />
|
||||
)
|
||||
}
|
||||
>
|
||||
<Typography variant="Body/Supporting text (caption)/smRegular">
|
||||
<span>
|
||||
<strong>{intl.formatMessage({ id: "Status" })}:</strong>{" "}
|
||||
{isPaid
|
||||
? intl.formatMessage({ id: "Paid" })
|
||||
: intl.formatMessage({ id: "Unpaid" })}
|
||||
</span>
|
||||
</Typography>
|
||||
</IconChip>
|
||||
)
|
||||
}
|
||||
/>
|
||||
<SummaryCard
|
||||
title={hotel.name}
|
||||
title={
|
||||
<Typography variant="Body/Paragraph/mdBold">
|
||||
<p>{hotel.name}</p>
|
||||
</Typography>
|
||||
}
|
||||
image={{
|
||||
src: "/_static/img/scandic-service.svg",
|
||||
alt: "Scandic service",
|
||||
@@ -170,7 +160,9 @@ export default function BookingSummary({
|
||||
<ul>
|
||||
{hotel.specialAlerts.map((alert) => (
|
||||
<li key={alert.id}>
|
||||
<Body color="uiTextHighContrast">{alert.text}</Body>
|
||||
<Typography variant="Body/Paragraph/mdRegular">
|
||||
<span>{alert.text}</span>
|
||||
</Typography>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
Reference in New Issue
Block a user