Merge remote-tracking branch 'origin' into feat/tracking-payment

2025-01-10 09:13:04 +01:00
parent 919fc62069 bf3328396f
commit d57e3db34b
111 changed files with 2371 additions and 875 deletions
@@ -1,5 +1,6 @@
 "use client"
 import { useRef } from "react"
+import { useIntl } from "react-intl"

 import Header from "@/components/HotelReservation/BookingConfirmation/Header"
 import HotelDetails from "@/components/HotelReservation/BookingConfirmation/HotelDetails"
@@ -8,22 +9,40 @@ import Promos from "@/components/HotelReservation/BookingConfirmation/Promos"
 import Receipt from "@/components/HotelReservation/BookingConfirmation/Receipt"
 import Rooms from "@/components/HotelReservation/BookingConfirmation/Rooms"
 import SidePanel from "@/components/HotelReservation/SidePanel"
+import Alert from "@/components/TempDesignSystem/Alert"
 import Divider from "@/components/TempDesignSystem/Divider"

 import styles from "./confirmation.module.css"

 import type { ConfirmationProps } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"
+import { AlertTypeEnum } from "@/types/enums/alert"

 export default function Confirmation({
  booking,
  hotel,
  room,
 }: ConfirmationProps) {
+  const intl = useIntl()
  const mainRef = useRef<HTMLElement | null>(null)
+
+  const failedToVerifyMembership =
+    booking.rateDefinition.isMemberRate && !booking.guest.membershipNumber
+
  return (
    <main className={styles.main} ref={mainRef}>
      <Header booking={booking} hotel={hotel} mainRef={mainRef} />
      <div className={styles.booking}>
+        {failedToVerifyMembership && (
+          <Alert
+            type={AlertTypeEnum.Info}
+            heading={intl.formatMessage({
+              id: "booking.confirmation.membershipInfo.heading",
+            })}
+            text={intl.formatMessage({
+              id: "booking.confirmation.membershipInfo.text",
+            })}
+          />
+        )}
        <Rooms booking={booking} room={room} />
        <PaymentDetails booking={booking} />
        <Divider color="primaryLightSubtle" />
@@ -2,7 +2,12 @@
 import { notFound } from "next/navigation"
 import { useIntl } from "react-intl"

-import { ChevronRightSmallIcon, InfoCircleIcon } from "@/components/Icons"
+import {
+  CheckIcon,
+  ChevronRightSmallIcon,
+  InfoCircleIcon,
+} from "@/components/Icons"
+import Modal from "@/components/Modal"
 import Button from "@/components/TempDesignSystem/Button"
 import Divider from "@/components/TempDesignSystem/Divider"
 import Link from "@/components/TempDesignSystem/Link"
@@ -64,16 +69,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>
@@ -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);