feat: SW-1588 Updated rate selection

apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomSelectionPanel/RoomCard/FlexibilityOption/index.tsx

@@ -27,6 +27,7 @@ export default function FlexibilityOption({
   roomType,
   roomTypeCode,
   title,
+  rateTitle,
 }: FlexibilityOptionProps) {
   const intl = useIntl()
   const { data: session } = useSession()
@@ -82,6 +83,11 @@ export default function FlexibilityOption({
         value={rate.rateCode}
       />
       <div className={styles.card}>
+        {rateTitle ? (
+          <div className={styles.header}>
+            <Caption>{rateTitle}</Caption>
+          </div>
+        ) : null}
         <div className={styles.header}>
           <Modal
             trigger={
@@ -93,8 +99,8 @@ export default function FlexibilityOption({
                 />
               </Button>
             }
-            title={title}
+            title={rateTitle ? rateTitle : title}
-            subtitle={paymentTerm}
+            subtitle={rateTitle ? `${title} (${paymentTerm})` : paymentTerm}
           >
             <div className={styles.terms}>
               {priceInformation?.map((info) => (

apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomSelectionPanel/RoomCard/index.tsx

@@ -147,34 +147,34 @@ export default function RoomCard({ roomConfiguration }: RoomCardProps) {
   const payNow = intl.formatMessage({ id: "Pay now" })
 
   function getRate(rateCode: string, rateDefinition?: RateDefinition) {
+    const rateObj = {
+      terms: rateDefinition?.generalTerms,
+      rateTitle:
+        rateDefinition?.rateType !== RateTypeEnum.Regular
+          ? rateDefinition?.title
+          : undefined,
+    }
     switch (rateCode) {
       case "change":
         return {
           isFlex: false,
           notAvailable: false,
           title: freeBooking,
-          terms: rateDefinition?.generalTerms,
+          ...rateObj,
         }
       case "flex":
         return {
           isFlex: true,
           notAvailable: false,
           title: freeCancelation,
-          terms: rateDefinition?.generalTerms,
+          ...rateObj,
         }
       case "save":
         return {
           isFlex: false,
           notAvailable: false,
           title: nonRefundable,
-          terms: rateDefinition?.generalTerms,
+          ...rateObj,
-        }
-      case "special":
-        return {
-          isFlex: rateDefinition?.cancellationRule === "CancellableBefore6PM",
-          notAvailable: false,
-          title: rateDefinition?.title ?? "",
-          terms: rateDefinition?.generalTerms,
         }
       default:
         throw new Error(
@@ -207,6 +207,7 @@ export default function RoomCard({ roomConfiguration }: RoomCardProps) {
         notAvailable: true,
         title: "",
         terms: undefined,
+        rateTitle: undefined,
       }
     }
 
@@ -331,23 +332,30 @@ export default function RoomCard({ roomConfiguration }: RoomCardProps) {
           </>
         ) : (
           <>
-            <Caption color="uiTextHighContrast">{breakfastMessage}</Caption>
+            <span>
-            {bookingCode ? (
+              <Caption color="uiTextHighContrast">{breakfastMessage}</Caption>
-              <span className={!isSpecialRate ? styles.strikedText : ""}>
+              {bookingCode ? (
-                <PriceTagIcon />
+                <span className={!isSpecialRate ? styles.strikedText : ""}>
-                {bookingCode}
+                  <PriceTagIcon />
-              </span>
+                  {bookingCode}
-            ) : null}
+                </span>
+              ) : null}
+            </span>
             {roomConfiguration.products.map((product) => {
               const rate = getRateInfo(product)
               const isSelectedRateCode =
                 selectedRate?.product.productType.public.rateCode ===
                   product.productType.public.rateCode ||
-                selectedRate?.product.productType.member?.rateCode ===
+                (selectedRate?.product.productType.member?.rateCode ===
-                  product.productType.member?.rateCode
+                  product.productType.member?.rateCode &&
+                  product.productType.member?.rateCode !== undefined)
               return (
                 <FlexibilityOption
-                  key={product.productType.public.rateCode}
+                  key={
+                    product.productType.public.rateCode +
+                    "_" +
+                    product.productType.public.rate
+                  }
                   features={roomConfiguration.features}
                   isSelected={
                     isSelectedRateCode &&
@@ -361,6 +369,7 @@ export default function RoomCard({ roomConfiguration }: RoomCardProps) {
                   roomTypeCode={roomConfiguration.roomTypeCode}
                   title={rate.title}
                   priceInformation={rate.terms}
+                  rateTitle={rate.rateTitle}
                 />
               )
             })}

apps/scandic-web/components/HotelReservation/SelectRate/utils.ts

@@ -2,7 +2,6 @@ import { trpc } from "@/lib/trpc/client"
 
 import { RoomPackageCodeEnum } from "@/types/components/hotelReservation/selectRate/roomFilter"
 import type { Child } from "@/types/components/hotelReservation/selectRate/selectRate"
-import { RateTypeEnum } from "@/types/enums/rateType"
 import type { RoomsAvailability } from "@/types/trpc/routers/hotel/roomAvailability"
 import type { Lang } from "@/constants/languages"
 
@@ -39,17 +38,14 @@ export function getRates(
 ) {
   return {
     change: rateDefinitions.filter(
-      (rate) => rate.cancellationRule === "Changeable" && rate.rateType === RateTypeEnum.Regular
+      (rate) => rate.cancellationRule === "Changeable"
     ),
     flex: rateDefinitions.filter(
-      (rate) => rate.cancellationRule === "CancellableBefore6PM" && rate.rateType === RateTypeEnum.Regular
+      (rate) => rate.cancellationRule === "CancellableBefore6PM"
     ),
     save: rateDefinitions.filter(
-      (rate) => rate.cancellationRule === "NotCancellable" && rate.rateType === RateTypeEnum.Regular
+      (rate) => rate.cancellationRule === "NotCancellable"
     ),
-    special: rateDefinitions.filter(
-      (rate) => rate.rateType !== RateTypeEnum.Regular
-    )
   }
 }
 

apps/scandic-web/types/components/hotelReservation/selectRate/flexibilityOption.ts

@@ -23,6 +23,7 @@ export type FlexibilityOptionProps = {
   roomType: RoomConfiguration["roomType"]
   roomTypeCode: RoomConfiguration["roomTypeCode"]
   title: string
+  rateTitle?: string // This is for special rates via booking codes
 }
 
 export interface PriceListProps {