feat: SW-1182 Implntd rate terms modal in confirmation page and Updated styles

2025-01-08 14:50:27 +01:00
parent 61bd3a2c3e
commit 9a25b3569d
6 changed files with 106 additions and 29 deletions
--- 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({
          <Caption color="uiTextMediumContrast">
            {booking.rateDefinition.cancellationText}
          </Caption>
-          <Link
-            color="peach80"
-            href=""
-            size="small"
-            textDecoration="underline"
-            variant="icon"
+          <Modal
+            trigger={
+              <Button intent="text" className={styles.termsLink}>
+                <Link
+                  color="peach80"
+                  href=""
+                  size="small"
+                  textDecoration="underline"
+                  variant="icon"
+                >
+                  {intl.formatMessage({ id: "Reservation policy" })}
+                  <InfoCircleIcon color="peach80" />
+                </Link>
+              </Button>
+            }
+            title={booking.rateDefinition.cancellationText || ""}
+            subtitle={
+              booking.rateDefinition.cancellationRule == "CancellableBefore6PM"
+                ? intl.formatMessage({ id: "Pay later" })
+                : intl.formatMessage({ id: "Pay now" })
+            }
          >
-            {intl.formatMessage({ id: "Reservation policy" })}
-            <InfoCircleIcon color="peach80" />
-          </Link>
+            <div className={styles.terms}>
+              {booking.rateDefinition.generalTerms?.map((info) => (
+                <Body
+                  key={info}
+                  color="uiTextHighContrast"
+                  className={styles.termsText}
+                >
+                  <CheckIcon
+                    color="uiSemanticSuccess"
+                    width={20}
+                    height={20}
+                    className={styles.termsIcon}
+                  ></CheckIcon>
+                  {info}
+                </Body>
+              ))}
+            </div>
+          </Modal>
        </header>
        <div className={styles.entry}>
          <Body color="uiTextHighContrast">{room.bedType.description}</Body>
--- 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);
--- 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({
            }`}
          </Caption>
          <Caption color="uiTextMediumContrast">{cancellationText}</Caption>
-          <Popover
-            placement="bottom left"
-            triggerContent={
-              <Caption color="burgundy" type="underline">
-                {intl.formatMessage({ id: "Rate details" })}
-              </Caption>
+          <Modal
+            trigger={
+              <Button intent="text">
+                <Caption color="burgundy" type="underline">
+                  {intl.formatMessage({ id: "Rate details" })}
+                </Caption>
+              </Button>
            }
+            title={cancellationText}
          >
-            <aside className={styles.rateDetailsPopover}>
-              <header>
-                <Caption type="bold">{cancellationText}</Caption>
-              </header>
-              {rateDetails?.map((detail, idx) => (
-                <Caption key={`rateDetails-${idx}`}>{detail}</Caption>
+            <div className={styles.terms}>
+              {rateDetails?.map((info) => (
+                <Body
+                  key={info}
+                  color="uiTextHighContrast"
+                  className={styles.termsText}
+                >
+                  <CheckIcon
+                    color="uiSemanticSuccess"
+                    width={20}
+                    height={20}
+                    className={styles.termsIcon}
+                  ></CheckIcon>
+                  {info}
+                </Body>
              ))}
-            </aside>
-          </Popover>
+            </div>
+          </Modal>
        </div>
        {packages
          ? packages.map((roomPackage) => (
--- 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;
--- 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);
+}
--- 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}
                  ></CheckIcon>
                  {info}
                </Body>