@@ -260,7 +246,6 @@ export default function Summary({
}))}
totalPrice={totalPrice}
vat={vat}
- toggleModal={handleTogglePriceDetailsModal}
/>
diff --git a/components/HotelReservation/SelectRate/RateSummary/MobileSummary/index.tsx b/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/index.tsx
similarity index 78%
rename from components/HotelReservation/SelectRate/RateSummary/MobileSummary/index.tsx
rename to components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/index.tsx
index 3636b54aa..203b1af88 100644
--- a/components/HotelReservation/SelectRate/RateSummary/MobileSummary/index.tsx
+++ b/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/index.tsx
@@ -1,7 +1,8 @@
-import { useEffect, useRef } from "react"
+"use client"
+import { useEffect, useRef, useState } from "react"
import { useIntl } from "react-intl"
-import { useRateSelectionStore } from "@/stores/select-rate/rate-selection"
+import { useRatesStore } from "@/stores/select-rate"
import Button from "@/components/TempDesignSystem/Button"
import Caption from "@/components/TempDesignSystem/Text/Caption"
@@ -15,60 +16,26 @@ import styles from "./mobileSummary.module.css"
import type { MobileSummaryProps } from "@/types/components/hotelReservation/selectRate/rateSummary"
export default function MobileSummary({
- totalPriceToShow,
isAllRoomsSelected,
- booking,
isUserLoggedIn,
- vat,
- roomsAvailability,
+ totalPriceToShow,
}: MobileSummaryProps) {
const intl = useIntl()
const scrollY = useRef(0)
+ const [isSummaryOpen, setIsSummaryOpen] = useState(false)
- const {
- guestsInRooms,
- isSummaryOpen,
- getSelectedRateSummary,
- toggleSummaryOpen,
- togglePriceDetailsModalOpen,
- } = useRateSelectionStore()
+ const { booking, bookingRooms, rateDefinitions, rateSummary, vat } =
+ useRatesStore((state) => ({
+ booking: state.booking,
+ bookingRooms: state.booking.rooms,
+ rateDefinitions: state.roomsAvailability?.rateDefinitions,
+ rateSummary: state.rateSummary,
+ vat: state.vat,
+ }))
- const selectedRateSummary = getSelectedRateSummary()
-
- const rooms = selectedRateSummary.map((room, index) => ({
- adults: guestsInRooms[index].adults,
- childrenInRoom: guestsInRooms[index].children,
- roomType: room.roomType,
- roomPrice: {
- perNight: {
- local: {
- price: room.public.localPrice.pricePerNight,
- currency: room.public.localPrice.currency,
- },
- requested: undefined,
- },
- perStay: {
- local: {
- price: room.public.localPrice.pricePerStay,
- currency: room.public.localPrice.currency,
- },
- requested: undefined,
- },
- currency: room.public.localPrice.currency,
- },
- roomRate: {
- ...room.public,
- memberRate: room.member,
- publicRate: room.public,
- },
- rateDetails: roomsAvailability.rateDefinitions.find(
- (rate) => rate.rateCode === room.public.rateCode
- )?.generalTerms,
- cancellationText:
- roomsAvailability.rateDefinitions.find(
- (rate) => rate.rateCode === room.public.rateCode
- )?.cancellationText ?? "",
- }))
+ function toggleSummaryOpen() {
+ setIsSummaryOpen(!isSummaryOpen)
+ }
useEffect(() => {
if (isSummaryOpen) {
@@ -93,6 +60,44 @@ export default function MobileSummary({
}
}, [isSummaryOpen])
+ if (!rateDefinitions) {
+ return null
+ }
+
+ const rooms = rateSummary.map((room, index) => ({
+ adults: bookingRooms[index].adults,
+ childrenInRoom: bookingRooms[index].childrenInRoom ?? undefined,
+ roomType: room.roomType,
+ roomPrice: {
+ perNight: {
+ local: {
+ price: room.public.localPrice.pricePerNight,
+ currency: room.public.localPrice.currency,
+ },
+ requested: undefined,
+ },
+ perStay: {
+ local: {
+ price: room.public.localPrice.pricePerStay,
+ currency: room.public.localPrice.currency,
+ },
+ requested: undefined,
+ },
+ currency: room.public.localPrice.currency,
+ },
+ roomRate: {
+ ...room.public,
+ memberRate: room.member,
+ publicRate: room.public,
+ },
+ rateDetails: rateDefinitions.find(
+ (rate) => rate.rateCode === room.public.rateCode
+ )?.generalTerms,
+ cancellationText:
+ rateDefinitions.find((rate) => rate.rateCode === room.public.rateCode)
+ ?.cancellationText ?? "",
+ }))
+
return (
@@ -104,7 +109,6 @@ export default function MobileSummary({
totalPrice={totalPriceToShow}
vat={vat}
toggleSummaryOpen={toggleSummaryOpen}
- togglePriceDetailsModalOpen={togglePriceDetailsModalOpen}
/>
diff --git a/components/HotelReservation/SelectRate/RateSummary/MobileSummary/mobileSummary.module.css b/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/mobileSummary.module.css
similarity index 100%
rename from components/HotelReservation/SelectRate/RateSummary/MobileSummary/mobileSummary.module.css
rename to components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/mobileSummary.module.css
diff --git a/components/HotelReservation/SelectRate/RateSummary/MobileSummary/summary.module.css b/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/summary.module.css
similarity index 100%
rename from components/HotelReservation/SelectRate/RateSummary/MobileSummary/summary.module.css
rename to components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/summary.module.css
diff --git a/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/index.tsx b/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/index.tsx
new file mode 100644
index 000000000..586b27e52
--- /dev/null
+++ b/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/index.tsx
@@ -0,0 +1,269 @@
+"use client"
+import { useRouter } from "next/navigation"
+import { useTransition } from "react"
+import { useIntl } from "react-intl"
+
+import { dt } from "@/lib/dt"
+import { useRatesStore } from "@/stores/select-rate"
+
+import { getRates } from "@/components/HotelReservation/SelectRate/utils"
+import SignupPromoDesktop from "@/components/HotelReservation/SignupPromo/Desktop"
+import SignupPromoMobile from "@/components/HotelReservation/SignupPromo/Mobile"
+import Button from "@/components/TempDesignSystem/Button"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import Footnote from "@/components/TempDesignSystem/Text/Footnote"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+import { formatPrice } from "@/utils/numberFormatting"
+
+import MobileSummary from "./MobileSummary"
+import { calculateTotalPrice } from "./utils"
+
+import styles from "./rateSummary.module.css"
+
+import type { RateSummaryProps } from "@/types/components/hotelReservation/selectRate/rateSummary"
+import { RoomPackageCodeEnum } from "@/types/components/hotelReservation/selectRate/roomFilter"
+
+export default function RateSummary({ isUserLoggedIn }: RateSummaryProps) {
+ const {
+ bookingRooms,
+ petRoomPackage,
+ rateSummary,
+ roomsAvailability,
+ searchParams,
+ } = useRatesStore((state) => ({
+ bookingRooms: state.booking.rooms,
+ petRoomPackage: state.petRoomPackage,
+ rateSummary: state.rateSummary,
+ roomsAvailability: state.roomsAvailability,
+ searchParams: state.searchParams,
+ }))
+ const intl = useIntl()
+ const router = useRouter()
+ const params = new URLSearchParams(searchParams)
+ const [_, startTransition] = useTransition()
+
+ if (!roomsAvailability) {
+ return null
+ }
+
+ const checkInDate = new Date(roomsAvailability.checkInDate)
+ const checkOutDate = new Date(roomsAvailability.checkOutDate)
+ const nights = dt(checkOutDate).diff(dt(checkInDate), "days")
+
+ const totalNights = intl.formatMessage(
+ { id: "{totalNights, plural, one {# night} other {# nights}}" },
+ { totalNights: nights }
+ )
+ const totalAdults = intl.formatMessage(
+ { id: "{totalAdults, plural, one {# adult} other {# adults}}" },
+ { totalAdults: bookingRooms.reduce((acc, room) => acc + room.adults, 0) }
+ )
+ const childrenInOneOrMoreRooms = bookingRooms.some(
+ (room) => room.childrenInRoom?.length
+ )
+ const childrenInroom = intl.formatMessage(
+ { id: "{totalChildren, plural, one {# child} other {# children}}" },
+ {
+ totalChildren: bookingRooms.reduce(
+ (acc, room) => acc + (room.childrenInRoom?.length ?? 0),
+ 0
+ ),
+ }
+ )
+ const totalChildren = childrenInOneOrMoreRooms ? `, ${childrenInroom}` : ""
+ const totalRooms = intl.formatMessage(
+ { id: "{totalRooms, plural, one {# room} other {# rooms}}" },
+ { totalRooms: bookingRooms.length }
+ )
+
+ const summaryPriceText = `${totalNights}, ${totalAdults}${totalChildren}, ${totalRooms}`
+
+ const totalRoomsRequired = bookingRooms.length
+ const isAllRoomsSelected = rateSummary.length === totalRoomsRequired
+ const hasMemberRates = rateSummary.some((room) => room.member)
+ const showMemberDiscountBanner = hasMemberRates && !isUserLoggedIn
+
+ const rates = getRates(roomsAvailability.rateDefinitions)
+
+ const freeCancelation = intl.formatMessage({ id: "Free cancellation" })
+ const nonRefundable = intl.formatMessage({ id: "Non-refundable" })
+ const freeBooking = intl.formatMessage({ id: "Free rebooking" })
+ const payLater = intl.formatMessage({ id: "Pay later" })
+ const payNow = intl.formatMessage({ id: "Pay now" })
+
+ function getRateDetails(rateCode: string) {
+ const rate = Object.keys(rates).find((k) =>
+ rates[k as keyof typeof rates].find((a) => a.rateCode === rateCode)
+ )
+
+ switch (rate) {
+ case "change":
+ return `${freeBooking}, ${payNow}`
+ case "flex":
+ return `${freeCancelation}, ${payLater}`
+ case "save":
+ default:
+ return `${nonRefundable}, ${payNow}`
+ }
+ }
+
+ function handleSubmit(e: React.FormEvent
) {
+ e.preventDefault()
+ startTransition(() => {
+ router.push(`details?${params}`)
+ })
+ }
+
+ if (!rateSummary.length) {
+ return null
+ }
+
+ const totalPriceToShow = calculateTotalPrice(
+ rateSummary,
+ isUserLoggedIn,
+ petRoomPackage
+ )
+
+ return (
+
+ )
+}
diff --git a/components/HotelReservation/SelectRate/RateSummary/rateSummary.module.css b/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/rateSummary.module.css
similarity index 82%
rename from components/HotelReservation/SelectRate/RateSummary/rateSummary.module.css
rename to components/HotelReservation/SelectRate/RoomsContainer/RateSummary/rateSummary.module.css
index cfff90da3..020c9af2e 100644
--- a/components/HotelReservation/SelectRate/RateSummary/rateSummary.module.css
+++ b/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/rateSummary.module.css
@@ -1,28 +1,29 @@
+@keyframes slideUp {
+ 0% {
+ bottom: -100%;
+ }
+
+ 100% {
+ bottom: 0%;
+ }
+}
+
.summary {
- position: fixed;
- z-index: 10;
+ align-items: center;
+ animation: slideUp 300ms ease forwards;
+ background-color: var(--Base-Surface-Primary-light-Normal);
+ border-top: 1px solid var(--Base-Border-Subtle);
bottom: -100%;
left: 0;
+ position: fixed;
right: 0;
- background-color: var(--Base-Surface-Primary-light-Normal);
- align-items: center;
- transition: bottom 300ms ease-in-out;
+ z-index: 10;
}
.content {
- width: 100%;
- max-width: var(--max-width-page);
- margin: 0 auto;
- flex-direction: column;
- justify-content: space-between;
- align-items: center;
display: none;
}
-.summary[data-visible="true"] {
- bottom: 0;
-}
-
.summaryPriceContainer {
display: flex;
flex-direction: row;
@@ -35,6 +36,7 @@
display: none;
max-width: 264px;
}
+
.summaryPrice {
align-self: center;
display: flex;
@@ -74,34 +76,46 @@
@media (min-width: 1367px) {
.summary {
- padding: var(--Spacing-x3) 0 var(--Spacing-x5);
border-top: 1px solid var(--Base-Border-Subtle);
+ padding: var(--Spacing-x3) 0 var(--Spacing-x5);
}
+
.content {
+ align-items: center;
display: flex;
flex-direction: row;
+ justify-content: space-between;
+ margin: 0 auto;
+ max-width: var(--max-width-page);
+ width: 100%;
}
+
.petInfo,
.promoContainer,
.summaryPriceTextDesktop {
display: block;
}
+
.summaryText {
display: flex;
gap: var(--Spacing-x2);
}
+
.summaryPriceTextMobile {
display: none;
}
+
.summaryPrice,
.continueButton {
width: auto;
}
+
.summaryPriceContainer {
width: auto;
padding: 0;
align-items: center;
}
+
.mobileSummary {
display: none;
}
diff --git a/components/HotelReservation/SelectRate/RateSummary/utils.ts b/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/utils.ts
similarity index 82%
rename from components/HotelReservation/SelectRate/RateSummary/utils.ts
rename to components/HotelReservation/SelectRate/RoomsContainer/RateSummary/utils.ts
index 935e65abd..a19682d41 100644
--- a/components/HotelReservation/SelectRate/RateSummary/utils.ts
+++ b/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/utils.ts
@@ -14,15 +14,18 @@ export const calculateTotalPrice = (
(total, room) => {
const priceToUse =
isUserLoggedIn && room.member ? room.member : room.public
- const isPetRoom = room.features.some(
+ const isPetRoom = room.features.find(
(feature) => feature.code === RoomPackageCodeEnum.PET_ROOM
)
- const petRoomPrice =
- isPetRoom && petRoomPackage
- ? isUserLoggedIn
- ? Number(petRoomPackage.localPrice.totalPrice || 0)
- : Number(petRoomPackage.requestedPrice.totalPrice || 0)
- : 0
+
+ let petRoomPrice = 0
+ if (
+ petRoomPackage &&
+ isPetRoom &&
+ room.package === RoomPackageCodeEnum.PET_ROOM
+ ) {
+ petRoomPrice = Number(petRoomPackage.localPrice.totalPrice)
+ }
return {
local: {
diff --git a/components/HotelReservation/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/SelectedRoomPanel/index.tsx b/components/HotelReservation/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/SelectedRoomPanel/index.tsx
new file mode 100644
index 000000000..49e819c70
--- /dev/null
+++ b/components/HotelReservation/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/SelectedRoomPanel/index.tsx
@@ -0,0 +1,118 @@
+"use client"
+import { useSession } from "next-auth/react"
+import { useIntl } from "react-intl"
+
+import { useRatesStore } from "@/stores/select-rate"
+
+import { getRates } from "@/components/HotelReservation/SelectRate/utils"
+import { EditIcon } from "@/components/Icons"
+import Image from "@/components/Image"
+import Button from "@/components/TempDesignSystem/Button"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+import { useRoomContext } from "@/contexts/Room"
+import { isValidClientSession } from "@/utils/clientSession"
+
+import styles from "./selectedRoomPanel.module.css"
+
+import type { Room as SelectedRateRoom } from "@/types/components/hotelReservation/selectRate/selectRate"
+
+interface SelectedRoomPanelProps {
+ room: SelectedRateRoom
+}
+
+export default function SelectedRoomPanel({ room }: SelectedRoomPanelProps) {
+ const intl = useIntl()
+ const { data: session } = useSession()
+ const isUserLoggedIn = isValidClientSession(session)
+ const { rateDefinitions, roomCategories } = useRatesStore((state) => ({
+ rateDefinitions: state.roomsAvailability?.rateDefinitions,
+ roomCategories: state.roomCategories,
+ }))
+ const {
+ actions: { modifyRate },
+ roomNr,
+ selectedRate,
+ } = useRoomContext()
+
+ const images = roomCategories.find((roomCategory) =>
+ roomCategory.roomTypes.some(
+ (roomType) => roomType.code === selectedRate?.roomTypeCode
+ )
+ )?.images
+
+ if (!rateDefinitions) {
+ return null
+ }
+
+ const rates = getRates(rateDefinitions)
+
+ const freeCancelation = intl.formatMessage({ id: "Free cancellation" })
+ const nonRefundable = intl.formatMessage({ id: "Non-refundable" })
+ const freeBooking = intl.formatMessage({ id: "Free rebooking" })
+ const payLater = intl.formatMessage({ id: "Pay later" })
+ const payNow = intl.formatMessage({ id: "Pay now" })
+
+ function getRateDetails(rateCode: string) {
+ const rate = Object.keys(rates).find((k) =>
+ rates[k as keyof typeof rates].find((a) => a.rateCode === rateCode)
+ )
+
+ switch (rate) {
+ case "change":
+ return `${freeBooking}, ${payNow}`
+ case "flex":
+ return `${freeCancelation}, ${payLater}`
+ case "save":
+ default:
+ return `${nonRefundable}, ${payNow}`
+ }
+ }
+
+ const rateCode =
+ isUserLoggedIn && selectedRate?.product.productType.member
+ ? selectedRate?.product.productType.member?.rateCode
+ : selectedRate?.product.productType.public.rateCode
+
+ return (
+
+
+
+ {intl.formatMessage(
+ { id: "Room {roomIndex}" },
+ { roomIndex: roomNr }
+ )}
+
+
+ {selectedRate?.roomType}
+
+
+ {rateCode ? getRateDetails(rateCode) : null}
+
+
+ {selectedRate?.product.productType.public.localPrice.pricePerNight}{" "}
+ {selectedRate?.product.productType.public.localPrice.currency}/
+ {intl.formatMessage({ id: "night" })}
+
+
+
+ {images?.[0]?.imageSizes?.tiny && (
+
+
+
+ )}
+
+
+
+
+
+ {selectedRate && !isActiveRoom ? null : (
+
+ {intl.formatMessage(
+ { id: "Room {roomIndex}" },
+ { roomIndex: roomNr }
+ )}
+ ,{" "}
+ {bookingRoom.childrenInRoom?.length
+ ? adultsAndChildrenMsg
+ : onlyAdultsMsg}
+
+ )}
+
+