Merged in fix/loy-589-update-cancellation-labels (pull request #3495)

fix(LOY-589): Split cancellation label into two

* Split cancellation label into two

* Fix copy


Approved-by: Bianca Widstam

apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Details/ModifyBy.tsx

@@ -1,11 +1,11 @@
 import { useIntl } from "react-intl"
 
+import { CancellationRuleEnum } from "@scandic-hotels/common/constants/booking"
 import { changeOrCancelDateFormat } from "@scandic-hotels/common/constants/dateFormats"
 import { dt } from "@scandic-hotels/common/dt"
 
 import { useMyStayStore } from "@/stores/my-stay"
 
-import { hasModifiableRate } from "@/components/HotelReservation/MyStay/utils"
 import useLang from "@/hooks/useLang"
 
 import Row from "./Row"
@@ -14,14 +14,19 @@ export default function ModifyBy() {
   const intl = useIntl()
   const lang = useLang()
 
-  const { checkInDate, isModifyable } = useMyStayStore((state) => ({
+  const { checkInDate, isFlexBooking, isChangeBooking } = useMyStayStore(
+    (state) => ({
       checkInDate: state.bookedRoom.checkInDate,
-    isModifyable: hasModifiableRate(
-      state.bookedRoom.rateDefinition.cancellationRule
-    ),
-  }))
+      isFlexBooking:
+        state.bookedRoom.rateDefinition.cancellationRule ===
+        CancellationRuleEnum.CancellableBefore6PM,
+      isChangeBooking:
+        state.bookedRoom.rateDefinition.cancellationRule ===
+        CancellationRuleEnum.Changeable,
+    })
+  )
 
-  if (!isModifyable) {
+  if (!isFlexBooking && !isChangeBooking) {
     return null
   }
 
@@ -38,14 +43,15 @@ export default function ModifyBy() {
     }
   )
 
-  return (
-    <Row
-      icon="refresh"
-      text={text}
-      title={intl.formatMessage({
+  const title = isChangeBooking
+    ? intl.formatMessage({
+        id: "booking.changeTitle",
+        defaultMessage: "Change",
+      })
+    : intl.formatMessage({
         id: "booking.changeOrCancel",
         defaultMessage: "Change or cancel",
-      })}
-    />
-  )
+      })
+
+  return <Row icon="refresh" text={text} title={title} />
 }

packages/booking-flow/lib/components/BookingConfirmation/Rooms/Room/index.tsx

@@ -198,7 +198,12 @@ export function Room({
               {isFlexBooking || isChangeBooking ? (
                 <li className={styles.listItem}>
                   <p className={styles.label}>
-                    {intl.formatMessage({
+                    {isChangeBooking
+                      ? intl.formatMessage({
+                          id: "booking.changeTitle",
+                          defaultMessage: "Change",
+                        })
+                      : intl.formatMessage({
                           id: "booking.changeOrCancel",
                           defaultMessage: "Change or cancel",
                         })}