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
2025-03-24 09:30:10 +00:00
parent c5e294c7ea
commit 74c5b47319
117 changed files with 5899 additions and 1901 deletions
--- a/apps/scandic-web/components/HotelReservation/MyStay/BookingSummary/SummaryCard/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/BookingSummary/SummaryCard/index.tsx
@@ -1,12 +1,12 @@
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
 import Image from "@/components/Image"
 import Link from "@/components/TempDesignSystem/Link"
-import Body from "@/components/TempDesignSystem/Text/Body"
-import Caption from "@/components/TempDesignSystem/Text/Caption"

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

 interface SummaryCardProps {
-  title: string
+  title: React.ReactNode
  image: {
    src: string
    alt: string
@@ -36,25 +36,28 @@ export default function SummaryCard({
        <Image src={image.src} alt={image.alt} width={152} height={152} />
      </div>
      <div className={styles.content}>
-        <div className={styles.topContent}>
-          <Body textTransform="bold" color="uiTextHighContrast">
-            {title}
-          </Body>
+        <div>
+          {title}
          {texts.map((text) => (
-            <Body color="uiTextHighContrast" key={text}>
-              {text}
-            </Body>
+            <Typography variant="Body/Paragraph/mdRegular" key={text}>
+              <p>{text}</p>
+            </Typography>
          ))}
        </div>
        {supportingText && (
-          <Caption color="uiTextPlaceholder">{supportingText}</Caption>
+          <Typography variant="Body/Supporting text (caption)/smRegular">
+            <p className={styles.supportingText}>{supportingText}</p>
+          </Typography>
        )}
        <div className={styles.bottomContent}>
          {chip}
          {links && (
            <div className={styles.links}>
              {links.map((link) => (
-                <Caption asChild type="bold" color="burgundy" key={link.href}>
+                <Typography
+                  variant="Body/Supporting text (caption)/smBold"
+                  key={link.href}
+                >
                  <Link
                    href={link.href}
                    target="_blank"
@@ -65,7 +68,7 @@ export default function SummaryCard({
                    {link.icon}
                    {link.text}
                  </Link>
-                </Caption>
+                </Typography>
              ))}
            </div>
          )}
--- a/apps/scandic-web/components/HotelReservation/MyStay/BookingSummary/SummaryCard/summaryCard.module.css
+++ b/apps/scandic-web/components/HotelReservation/MyStay/BookingSummary/SummaryCard/summaryCard.module.css
@@ -5,34 +5,18 @@
  gap: var(--Spacing-x2);
 }

-@media (min-width: 768px) {
-  .card {
-    align-items: flex-start;
-    flex-direction: row;
-  }
-}
-
 .image {
  width: 152px;
  height: 152px;
-
  border-radius: var(--Corner-radius-Medium);
 }

-@media (min-width: 768px) {
-  .image {
-    background-color: var(--Base-Surface-Secondary-light-Normal);
-  }
-}
-
 .content {
  display: flex;
  flex-direction: column;
  height: 100%;
-}
-
-.topContent {
-  margin-bottom: 10px;
+  text-align: center;
+  gap: var(--Spacing-x1);
 }

 .bottomContent {
@@ -50,3 +34,22 @@
  align-items: center;
  gap: var(--Spacing-x-half);
 }
+
+.supportingText {
+  color: var(--UI-Text-Placeholder);
+}
+
+@media (min-width: 768px) {
+  .card {
+    align-items: flex-start;
+    flex-direction: row;
+  }
+
+  .image {
+    background-color: var(--Base-Surface-Secondary-light-Normal);
+  }
+
+  .content {
+    text-align: left;
+  }
+}
--- a/apps/scandic-web/components/HotelReservation/MyStay/BookingSummary/bookingSummary.module.css
+++ b/apps/scandic-web/components/HotelReservation/MyStay/BookingSummary/bookingSummary.module.css
@@ -2,6 +2,7 @@
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-x5);
+  padding: var(--Spacing-x2);
 }

 .bookingSummaryContent {
@@ -10,13 +11,26 @@
  gap: 80px;
 }

-@media (min-width: 768px) {
-  .bookingSummaryContent {
-    flex-direction: row;
-  }
-}
-
 .toast {
  width: var(--max-width-content);
  margin: 0 auto;
 }
+
+.title {
+  color: var(--Scandic-Brand-Burgundy);
+  text-align: center;
+}
+
+@media (min-width: 768px) {
+  .bookingSummary {
+    padding: 0;
+  }
+
+  .bookingSummaryContent {
+    flex-direction: row;
+  }
+
+  .title {
+    text-align: left;
+  }
+}
--- a/apps/scandic-web/components/HotelReservation/MyStay/BookingSummary/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/BookingSummary/index.tsx
@@ -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>