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(
-    checkInDate: state.bookedRoom.checkInDate,
+    (state) => ({
-    isModifyable: hasModifiableRate(
+      checkInDate: state.bookedRoom.checkInDate,
-      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 (
+  const title = isChangeBooking
-    <Row
+    ? intl.formatMessage({
-      icon="refresh"
+        id: "booking.changeTitle",
-      text={text}
+        defaultMessage: "Change",
-      title={intl.formatMessage({
+      })
+    : 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,10 +198,15 @@ export function Room({
               {isFlexBooking || isChangeBooking ? (
                 <li className={styles.listItem}>
                   <p className={styles.label}>
-                    {intl.formatMessage({
+                    {isChangeBooking
-                      id: "booking.changeOrCancel",
+                      ? intl.formatMessage({
-                      defaultMessage: "Change or cancel",
+                          id: "booking.changeTitle",
-                    })}
+                          defaultMessage: "Change",
+                        })
+                      : intl.formatMessage({
+                          id: "booking.changeOrCancel",
+                          defaultMessage: "Change or cancel",
+                        })}
                   </p>
                   <p>
                     {intl.formatMessage(