Merged in feat(SW-2083)-missing-booking-codes-scenarios-my-stay (pull request #1680)

Feat(SW-2083) missing booking codes scenarios my stay * feat(SW-2083) Show points instead of reward nights * feat(SW-2083) added support for cheque and voucher for totalPrice Approved-by: Niclas Edenvin
2025-03-31 11:42:47 +00:00
parent 7434f30c20
commit b48053b8b4
23 changed files with 240 additions and 33 deletions
--- a/apps/scandic-web/components/HotelReservation/MyStay/BookingSummary/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/BookingSummary/index.tsx
@@ -30,8 +30,14 @@ export default function BookingSummary({ hotel }: BookingSummaryProps) {

  const bookedRoom = useMyStayRoomDetailsStore((state) => state.bookedRoom)

-  const { isCancelled, createDateTime, guaranteeInfo, checkInDate, isPrePaid } =
-    bookedRoom
+  const {
+    isCancelled,
+    createDateTime,
+    guaranteeInfo,
+    checkInDate,
+    isPrePaid,
+    priceType,
+  } = bookedRoom

  const directionsUrl = `https://www.google.com/maps/dir/?api=1&destination=${hotel.location.latitude},${hotel.location.longitude}`

@@ -57,7 +63,9 @@ export default function BookingSummary({ hotel }: BookingSummaryProps) {
      </Typography>
      <div className={styles.bookingSummaryContent}>
        <SummaryCard
-          title={<TotalPrice variant="Body/Paragraph/mdBold" />}
+          title={
+            <TotalPrice variant="Body/Paragraph/mdBold" type={priceType} />
+          }
          image={{
            src: "/_static/img/scandic-coin.svg",
            alt: "Scandic coin",
--- a/apps/scandic-web/components/HotelReservation/MyStay/ManageStay/ActionPanel/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/ManageStay/ActionPanel/index.tsx
@@ -59,6 +59,7 @@ export default function ActionPanel({ hotel }: ActionPanelProps) {
    createDateTime,
    canChangeDate,
    isPrePaid,
+    priceType,
  } = bookedRoom

  const datetimeIsInThePast = useMemo(
@@ -71,6 +72,7 @@ export default function ActionPanel({ hotel }: ActionPanelProps) {
    datetimeIsInThePast,
    isCancelled: bookedRoom.isCancelled,
    isPrePaid,
+    isRewardNight: priceType === "points",
  })

  const isCancelable = checkCancelable({
--- a/apps/scandic-web/components/HotelReservation/MyStay/ManageStay/ActionPanel/utils.ts
+++ b/apps/scandic-web/components/HotelReservation/MyStay/ManageStay/ActionPanel/utils.ts
@@ -7,6 +7,7 @@ interface ModificationConditions {
  isNotPast: boolean
  isNotCancelled: boolean
  isNotPrePaid: boolean
+  isNotRewardNight: boolean
 }

 interface GuaranteeConditions {
@@ -25,17 +26,20 @@ export function checkDateModifiable({
  datetimeIsInThePast,
  isCancelled,
  isPrePaid,
+  isRewardNight,
 }: {
  canChangeDate: boolean
  datetimeIsInThePast: boolean
  isCancelled: boolean
  isPrePaid: boolean
+  isRewardNight: boolean
 }): boolean {
  const conditions: ModificationConditions = {
    canModify: canChangeDate,
    isNotPast: !datetimeIsInThePast,
    isNotCancelled: !isCancelled,
    isNotPrePaid: !isPrePaid,
+    isNotRewardNight: !isRewardNight,
  }

  return Object.values(conditions).every(Boolean)
--- a/apps/scandic-web/components/HotelReservation/MyStay/MultiRoom/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/MultiRoom/index.tsx
@@ -16,6 +16,7 @@ import IconChip from "@/components/TempDesignSystem/IconChip"
 import useLang from "@/hooks/useLang"

 import { IconForFeatureCode } from "../../utils"
+import Points from "../Points"
 import Price from "../Price"
 import { hasBreakfastPackage } from "../utils/hasBreakfastPackage"
 import { mapRoomDetails } from "../utils/mapRoomDetails"
@@ -91,6 +92,7 @@ export default function MultiRoom({
        totalPrice: isBookingCancelled ? 0 : bookingInfo.totalPrice,
        currencyCode: bookingInfo.currencyCode,
        isMainBooking: false,
+        roomPoints: bookingInfo.roomPoints,
      })

      // Add room details to the store
@@ -120,10 +122,13 @@ export default function MultiRoom({
    confirmationNumber,
    cancellationNumber,
    hotelId,
+    roomPoints,
    roomPrice,
    packages,
    rateDefinition,
    isCancelled,
+    priceType,
+    vouchers,
  } = multiRoom

  const fromDate = dt(checkInDate).locale(lang)
@@ -293,11 +298,24 @@ export default function MultiRoom({
            <Typography variant="Body/Lead text">
              <p>{intl.formatMessage({ id: "Room total" })}</p>
            </Typography>
-            <Price
-              price={isCancelled ? 0 : roomPrice.perStay.local.price}
-              variant="Body/Paragraph/mdBold"
-              isMember={rateDefinition.isMemberRate}
-            />
+            {priceType === "points" ? (
+              <Points points={roomPoints} variant="Body/Paragraph/mdBold" />
+            ) : priceType === "voucher" ? (
+              <Typography variant="Body/Paragraph/mdBold">
+                <p>
+                  {intl.formatMessage(
+                    { id: "{count} voucher" },
+                    { count: vouchers }
+                  )}
+                </p>
+              </Typography>
+            ) : (
+              <Price
+                price={isCancelled ? 0 : roomPrice.perStay.local.price}
+                variant="Body/Paragraph/mdBold"
+                isMember={rateDefinition.isMemberRate}
+              />
+            )}
          </div>
        </div>
      </div>
--- a/apps/scandic-web/components/HotelReservation/MyStay/Points/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Points/index.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import { useIntl } from "react-intl"
+
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import SkeletonShimmer from "@/components/SkeletonShimmer"
+
+import type { Variant } from "../Rooms/TotalPrice"
+
+export default function Points({
+  points,
+  variant,
+}: {
+  points: number | null
+  variant: Variant
+}) {
+  const intl = useIntl()
+
+  if (points === null) {
+    return <SkeletonShimmer width={"100px"} />
+  }
+
+  return (
+    <Typography variant={variant}>
+      <p>
+        {intl.formatNumber(points)} {intl.formatMessage({ id: "Points" })}
+      </p>
+    </Typography>
+  )
+}
--- a/apps/scandic-web/components/HotelReservation/MyStay/Price/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Price/index.tsx
@@ -11,10 +11,7 @@ import { formatPrice } from "@/utils/numberFormatting"

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

-export type Variant =
-  | "Title/Subtitle/lg"
-  | "Title/Subtitle/md"
-  | "Body/Paragraph/mdBold"
+import type { Variant } from "../Rooms/TotalPrice"

 export default function Price({
  price,
--- a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/index.tsx
@@ -66,7 +66,6 @@ export function ReferenceCard({
  const addRoomPrice = useMyStayTotalPriceStore(
    (state) => state.actions.addRoomPrice
  )
-
  // Initialize store with server data
  useEffect(() => {
    // Add price and details for booked room (main room or single room)
@@ -78,6 +77,7 @@ export function ReferenceCard({
          : booking.totalPrice,
      currencyCode: booking.currencyCode,
      isMainBooking: true,
+      roomPoints: booking.roomPoints,
    })
    addBookedRoom(
      mapRoomDetails({
@@ -99,6 +99,8 @@ export function ReferenceCard({
    checkOutDate,
    isCancelled,
    bookingCode,
+    rateDefinition,
+    priceType,
  } = bookedRoom

  const fromDate = dt(checkInDate).locale(lang)
@@ -270,7 +272,7 @@ export function ReferenceCard({
        <Typography variant="Title/Overline/sm">
          <p>{intl.formatMessage({ id: "Total" })}</p>
        </Typography>
-        <TotalPrice variant="Title/Subtitle/md" />
+        <TotalPrice variant="Title/Subtitle/md" type={priceType} />
      </div>
      {bookingCode && (
        <div className={styles.referenceRow}>
@@ -315,7 +317,7 @@ export function ReferenceCard({
        <p
          className={`${styles.note} ${allRoomsCancelled ? styles.cancelledNote : ""}`}
        >
-          {booking.rateDefinition.generalTerms.map((term) => (
+          {rateDefinition.generalTerms.map((term) => (
            <span key={term}>
              {term}
              {term.endsWith(".") ? " " : ". "}
--- a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/TotalPrice/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/TotalPrice/index.tsx
@@ -1,11 +1,73 @@
 "use client"

+import { useIntl } from "react-intl"
+
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import { useMyStayRoomDetailsStore } from "@/stores/my-stay/myStayRoomDetailsStore"
 import { useMyStayTotalPriceStore } from "@/stores/my-stay/myStayTotalPrice"

-import Price, { type Variant } from "../../Price"
+import Points from "../../Points"
+import Price from "../../Price"

-export default function TotalPrice({ variant }: { variant: Variant }) {
-  const { totalPrice } = useMyStayTotalPriceStore()
+import styles from "./totalPrice.module.css"

-  return <Price price={totalPrice} variant={variant} />
+import type { PriceType } from "@/types/components/hotelReservation/myStay/myStay"
+
+export type Variant =
+  | "Title/Subtitle/lg"
+  | "Title/Subtitle/md"
+  | "Body/Paragraph/mdBold"
+
+interface TotalPriceProps {
+  variant: Variant
+  type?: PriceType
+}
+
+export default function TotalPrice({
+  variant,
+  type = "money",
+}: TotalPriceProps) {
+  const totalPrice = useMyStayTotalPriceStore((state) => state.totalPrice)
+  const totalPoints = useMyStayTotalPriceStore((state) => state.totalPoints)
+  const bookedRoom = useMyStayRoomDetailsStore((state) => state.bookedRoom)
+
+  const { vouchers, cheques } = bookedRoom
+
+  const intl = useIntl()
+  if (type === "money") {
+    return <Price price={totalPrice} variant={variant} />
+  }
+
+  if (type === "voucher") {
+    return (
+      <Typography variant={variant}>
+        <p>
+          {intl.formatMessage({ id: "{count} voucher" }, { count: vouchers })}
+        </p>
+      </Typography>
+    )
+  }
+
+  if (type === "cheque") {
+    return (
+      <div className={styles.totalPrice}>
+        <Typography variant={variant}>
+          <p>{cheques} CC + </p>
+        </Typography>
+        <Price price={totalPrice} variant={variant} />
+      </div>
+    )
+  }
+
+  if (totalPrice && totalPrice > 0 && type === "points") {
+    return (
+      <div className={styles.totalPrice}>
+        <Points points={totalPoints} variant={variant} /> +{" "}
+        <Price price={totalPrice} variant={variant} />
+      </div>
+    )
+  }
+
+  return <Points points={totalPoints} variant={variant} />
 }
--- a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/TotalPrice/totalPrice.module.css
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/TotalPrice/totalPrice.module.css
@@ -0,0 +1,5 @@
+.totalPrice {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
--- a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/index.tsx
@@ -10,6 +10,7 @@ import MultiRoom from "../MultiRoom"
 import MultiRoomSkeleton from "../MultiRoom/MultiRoomSkeleton"
 import PriceDetails from "../PriceDetails"
 import { SingleRoom } from "../SingleRoom"
+import { getPriceType } from "../utils/getPriceType"
 import TotalPrice from "./TotalPrice"

 import styles from "./rooms.module.css"
@@ -92,7 +93,14 @@ export default async function Rooms({
            <Typography variant="Body/Lead text">
              <p>{intl.formatMessage({ id: "Booking total" })}:</p>
            </Typography>
-            <TotalPrice variant="Title/Subtitle/lg" />
+            <TotalPrice
+              variant="Title/Subtitle/lg"
+              type={getPriceType({
+                rateDefinition: booking.rateDefinition,
+                vouchers: booking.vouchers,
+                cheques: booking.cheques,
+              })}
+            />
          </div>

          <PriceDetails />
--- a/apps/scandic-web/components/HotelReservation/MyStay/SingleRoom/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/SingleRoom/index.tsx
@@ -18,6 +18,7 @@ import IconChip from "@/components/TempDesignSystem/IconChip"
 import useLang from "@/hooks/useLang"

 import GuestDetails from "../GuestDetails"
+import Points from "../Points"
 import Price from "../Price"
 import PriceDetails from "../PriceDetails"
 import { hasBreakfastPackage } from "../utils/hasBreakfastPackage"
@@ -62,9 +63,12 @@ export function SingleRoom({ bedType, image, hotel, user }: RoomProps) {
    confirmationNumber,
    bookingCode,
    roomPrice,
+    roomPoints,
    packages,
    rateDefinition,
    isCancelled,
+    priceType,
+    vouchers,
  } = bookedRoom

  const mainBedWidthValueMsg = intl.formatMessage(
@@ -357,11 +361,24 @@ export function SingleRoom({ bedType, image, hotel, user }: RoomProps) {
                    {intl.formatMessage({ id: "Room total" })}
                  </p>
                </Typography>
-                <Price
-                  price={isCancelled ? 0 : roomPrice.perStay.local.price}
-                  variant="Title/Subtitle/lg"
-                  isMember={rateDefinition.isMemberRate}
-                />
+                {priceType === "points" ? (
+                  <Points points={roomPoints} variant="Title/Subtitle/lg" />
+                ) : priceType === "voucher" ? (
+                  <Typography variant="Title/Subtitle/lg">
+                    <p>
+                      {intl.formatMessage(
+                        { id: "{count} voucher" },
+                        { count: vouchers }
+                      )}
+                    </p>
+                  </Typography>
+                ) : (
+                  <Price
+                    price={isCancelled ? 0 : roomPrice.perStay.local.price}
+                    variant="Title/Subtitle/lg"
+                    isMember={rateDefinition.isMemberRate}
+                  />
+                )}
              </div>
            </div>
          </div>
--- a/apps/scandic-web/components/HotelReservation/MyStay/utils/getPriceType.ts
+++ b/apps/scandic-web/components/HotelReservation/MyStay/utils/getPriceType.ts
@@ -0,0 +1,18 @@
+import type { PriceType } from "@/types/components/hotelReservation/myStay/myStay"
+import type { BookingConfirmation } from "@/types/trpc/routers/booking/confirmation"
+
+type PriceTypeParams = Pick<
+  BookingConfirmation["booking"],
+  "rateDefinition" | "vouchers" | "cheques"
+>
+
+export function getPriceType({
+  rateDefinition,
+  vouchers,
+  cheques,
+}: PriceTypeParams): PriceType {
+  if (rateDefinition.title === "Reward Night") return "points"
+  if (vouchers > 0) return "voucher"
+  if (cheques > 0) return "cheque"
+  return "money"
+}
--- a/apps/scandic-web/components/HotelReservation/MyStay/utils/mapRoomDetails.ts
+++ b/apps/scandic-web/components/HotelReservation/MyStay/utils/mapRoomDetails.ts
@@ -3,6 +3,7 @@ import { dt } from "@/lib/dt"

 import { formatChildBedPreferences } from "../utils"
 import { convertToChildType } from "./convertToChildType"
+import { getPriceType } from "./getPriceType"

 import type { BreakfastPackage } from "@/types/components/hotelReservation/breakfast"
 import { RoomPackageCodeEnum } from "@/types/components/hotelReservation/selectRate/roomFilter"
@@ -76,6 +77,12 @@ export function mapRoomDetails({
    booking.rateDefinition.cancellationRule !==
      CancellationRuleEnum.CancellableBefore6PM

+  const priceType = getPriceType({
+    rateDefinition: booking.rateDefinition,
+    vouchers: booking.vouchers,
+    cheques: booking.cheques,
+  })
+
  return {
    hotelId: booking.hotelId,
    roomTypeCode: booking.roomTypeCode,
@@ -90,6 +97,8 @@ export function mapRoomDetails({
    guaranteeInfo: booking.guaranteeInfo,
    linkedReservations: booking.linkedReservations,
    bookingCode: booking.bookingCode,
+    cheques: booking.cheques,
+    vouchers: booking.vouchers,
    isCancelable: booking.isCancelable,
    multiRoom: booking.multiRoom,
    canChangeDate: booking.canChangeDate,
@@ -123,6 +132,7 @@ export function mapRoomDetails({
      description: room?.bedType.mainBed.description ?? "",
      roomTypeCode: room?.bedType.code ?? "",
    },
+    roomPoints: booking.roomPoints,
    roomPrice: {
      perNight: {
        local: {
@@ -141,5 +151,6 @@ export function mapRoomDetails({
    },
    breakfast,
    isPrePaid,
+    priceType,
  }
 }