diff --git a/components/HotelReservation/BookingConfirmation/Receipt/index.tsx b/components/HotelReservation/BookingConfirmation/Receipt/index.tsx index 546b1bb80..36270b2d3 100644 --- a/components/HotelReservation/BookingConfirmation/Receipt/index.tsx +++ b/components/HotelReservation/BookingConfirmation/Receipt/index.tsx @@ -2,7 +2,11 @@ import { notFound } from "next/navigation" import { useIntl } from "react-intl" -import { ChevronRightSmallIcon, InfoCircleIcon } from "@/components/Icons" +import { + CheckIcon, + ChevronRightSmallIcon, + InfoCircleIcon, +} from "@/components/Icons" import Button from "@/components/TempDesignSystem/Button" import Divider from "@/components/TempDesignSystem/Divider" import Link from "@/components/TempDesignSystem/Link" @@ -11,6 +15,8 @@ import Caption from "@/components/TempDesignSystem/Text/Caption" import Subtitle from "@/components/TempDesignSystem/Text/Subtitle" import { formatPrice } from "@/utils/numberFormatting" +import Modal from "../../Modal" + import styles from "./receipt.module.css" import type { BookingConfirmationReceiptProps } from "@/types/components/hotelReservation/bookingConfirmation/receipt" @@ -64,16 +70,46 @@ export default function Receipt({ {booking.rateDefinition.cancellationText} - + + {intl.formatMessage({ id: "Reservation policy" })} + + + + } + title={booking.rateDefinition.cancellationText || ""} + subtitle={ + booking.rateDefinition.cancellationRule == "CancellableBefore6PM" + ? intl.formatMessage({ id: "Pay later" }) + : intl.formatMessage({ id: "Pay now" }) + } > - {intl.formatMessage({ id: "Reservation policy" })} - - +
+ {booking.rateDefinition.generalTerms?.map((info) => ( + + + {info} + + ))} +
+
{room.bedType.description} diff --git a/components/HotelReservation/BookingConfirmation/Receipt/receipt.module.css b/components/HotelReservation/BookingConfirmation/Receipt/receipt.module.css index 3625add0e..ff010a681 100644 --- a/components/HotelReservation/BookingConfirmation/Receipt/receipt.module.css +++ b/components/HotelReservation/BookingConfirmation/Receipt/receipt.module.css @@ -33,6 +33,22 @@ padding: 0; } +.termsLink { + justify-self: flex-start; +} +.terms { + margin-top: var(--Spacing-x3); + margin-bottom: var(--Spacing-x3); +} +.termsText:nth-child(n) { + display: flex; + align-items: center; + margin-bottom: var(--Spacing-x1); +} +.terms .termsIcon { + margin-right: var(--Spacing-x1); +} + @media screen and (min-width: 1367px) { .receipt { padding: var(--Spacing-x3); diff --git a/components/HotelReservation/EnterDetails/Summary/UI/index.tsx b/components/HotelReservation/EnterDetails/Summary/UI/index.tsx index 2f24ea221..a64126bcb 100644 --- a/components/HotelReservation/EnterDetails/Summary/UI/index.tsx +++ b/components/HotelReservation/EnterDetails/Summary/UI/index.tsx @@ -8,12 +8,12 @@ import { useEnterDetailsStore } from "@/stores/enter-details" import SignupPromoDesktop from "@/components/HotelReservation/SignupPromo/Desktop" import { ArrowRightIcon, + CheckIcon, ChevronDownSmallIcon, ChevronRightSmallIcon, } from "@/components/Icons" import Button from "@/components/TempDesignSystem/Button" import Divider from "@/components/TempDesignSystem/Divider" -import Popover from "@/components/TempDesignSystem/Popover" import Body from "@/components/TempDesignSystem/Text/Body" import Caption from "@/components/TempDesignSystem/Text/Caption" import Subtitle from "@/components/TempDesignSystem/Text/Subtitle" @@ -170,23 +170,34 @@ export default function SummaryUI({ }`} {cancellationText} - - {intl.formatMessage({ id: "Rate details" })} - + + + {intl.formatMessage({ id: "Rate details" })} + + } + title={cancellationText} > - - +
+ {packages ? packages.map((roomPackage) => ( diff --git a/components/HotelReservation/EnterDetails/Summary/UI/ui.module.css b/components/HotelReservation/EnterDetails/Summary/UI/ui.module.css index b4d3e41ac..58ff5770c 100644 --- a/components/HotelReservation/EnterDetails/Summary/UI/ui.module.css +++ b/components/HotelReservation/EnterDetails/Summary/UI/ui.module.css @@ -72,6 +72,19 @@ width: 560px; } +.terms { + margin-top: var(--Spacing-x3); + margin-bottom: var(--Spacing-x3); +} +.termsText:nth-child(n) { + display: flex; + align-items: center; + margin-bottom: var(--Spacing-x1); +} +.terms .termsIcon { + margin-right: var(--Spacing-x1); +} + @media screen and (min-width: 1367px) { .bottomDivider { display: block; diff --git a/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/flexibilityOption.module.css b/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/flexibilityOption.module.css index 037921ea2..433127ac7 100644 --- a/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/flexibilityOption.module.css +++ b/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/flexibilityOption.module.css @@ -77,9 +77,6 @@ input[type="radio"]:checked + .card .checkIcon { margin: 0 auto var(--Spacing-x2); } -.modal section:focus-visible { - outline: none; -} .terms { margin-top: var(--Spacing-x3); margin-bottom: var(--Spacing-x3); @@ -89,3 +86,6 @@ input[type="radio"]:checked + .card .checkIcon { align-items: center; margin-bottom: var(--Spacing-x1); } +.termsIcon { + margin-right: var(--Spacing-x1); +} diff --git a/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/index.tsx b/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/index.tsx index 4dec9a48a..74f2d62db 100644 --- a/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/index.tsx +++ b/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/index.tsx @@ -4,7 +4,7 @@ import { useSearchParams } from "next/navigation" import { useEffect, useRef } from "react" import { useIntl } from "react-intl" -import { CheckIcon, InfoCircleIcon } from "@/components/Icons" +import { CheckCircleIcon, CheckIcon, InfoCircleIcon } from "@/components/Icons" import Button from "@/components/TempDesignSystem/Button" import Label from "@/components/TempDesignSystem/Form/Label" import Body from "@/components/TempDesignSystem/Text/Body" @@ -142,6 +142,7 @@ export default function FlexibilityOption({ color="uiSemanticSuccess" width={20} height={20} + className={styles.termsIcon} > {info}