Merged in fix/SW-2236-remove-modify-for-save (pull request #1771)

fix(SW-2236): show modify by only if changable

* fix(SW-2236): show modify by only if changable


Approved-by: Niclas Edenvin

apps/scandic-web/components/HotelReservation/MyStay/MultiRoom/index.tsx

@@ -18,6 +18,7 @@ import useLang from "@/hooks/useLang"
 import { IconForFeatureCode } from "../../utils"
 import Points from "../Points"
 import Price from "../Price"
+import { hasModifiableRate } from "../utils"
 import { hasBreakfastPackageFromBookingFlow } from "../utils/hasBreakfastPackage"
 import { mapRoomDetails } from "../utils/mapRoomDetails"
 import MultiRoomSkeleton from "./MultiRoomSkeleton"
@@ -265,17 +266,19 @@ export default function MultiRoom({
               <p>{rateDefinition.cancellationText}</p>
             </Typography>
           </div>
-          <div className={styles.row}>
-            <Typography variant="Body/Paragraph/mdBold">
-              <p>{intl.formatMessage({ id: "Modify By" })}</p>
-            </Typography>
+          {hasModifiableRate(rateDefinition.cancellationRule) && (
+            <div className={styles.row}>
+              <Typography variant="Body/Paragraph/mdBold">
+                <p>{intl.formatMessage({ id: "Modify By" })}</p>
+              </Typography>
 
-            <Typography variant="Body/Paragraph/mdRegular">
-              <p color="uiTextHighContrast">
-                18:00, {fromDate.format("dddd D MMM")}
-              </p>
-            </Typography>
-          </div>
+              <Typography variant="Body/Paragraph/mdRegular">
+                <p color="uiTextHighContrast">
+                  18:00, {fromDate.format("dddd D MMM")}
+                </p>
+              </Typography>
+            </div>
+          )}
           <div className={styles.row}>
             <Typography variant="Body/Paragraph/mdBold">
               <p>{intl.formatMessage({ id: "Breakfast" })}</p>

apps/scandic-web/components/HotelReservation/MyStay/SingleRoom/index.tsx

@@ -20,6 +20,7 @@ import GuestDetails from "../GuestDetails"
 import Points from "../Points"
 import Price from "../Price"
 import PriceDetails from "../PriceDetails"
+import { hasModifiableRate } from "../utils"
 import ToggleSidePeek from "./ToggleSidePeek"
 
 import styles from "./room.module.css"
@@ -240,28 +241,33 @@ export function SingleRoom({ bedType, image, hotel, user }: RoomProps) {
                     </Typography>
                   </div>
                 </div>
-                <div className={styles.row}>
-                  <span className={styles.rowTitle}>
-                    <MaterialIcon
-                      icon="refresh"
-                      color="Icon/Default"
-                      size={20}
-                    />
-                    <Typography variant="Body/Paragraph/mdBold">
-                      <p>{intl.formatMessage({ id: "Modify By" })}</p>
-                    </Typography>
-                  </span>
-                  <div className={styles.rowContent}>
-                    <Typography variant="Body/Paragraph/mdRegular">
-                      <p color="uiTextHighContrast">
-                        {intl.formatMessage(
-                          { id: "Until {time}, {date}" },
-                          { time: "18:00", date: fromDate.format("dddd D MMM") }
-                        )}
-                      </p>
-                    </Typography>
+                {hasModifiableRate(rateDefinition.cancellationRule) && (
+                  <div className={styles.row}>
+                    <span className={styles.rowTitle}>
+                      <MaterialIcon
+                        icon="refresh"
+                        color="Icon/Default"
+                        size={20}
+                      />
+                      <Typography variant="Body/Paragraph/mdBold">
+                        <p>{intl.formatMessage({ id: "Modify By" })}</p>
+                      </Typography>
+                    </span>
+                    <div className={styles.rowContent}>
+                      <Typography variant="Body/Paragraph/mdRegular">
+                        <p color="uiTextHighContrast">
+                          {intl.formatMessage(
+                            { id: "Until {time}, {date}" },
+                            {
+                              time: "18:00",
+                              date: fromDate.format("dddd D MMM"),
+                            }
+                          )}
+                        </p>
+                      </Typography>
+                    </div>
                   </div>
-                </div>
+                )}
                 {breakfastText !== null && (
                   <div className={styles.row}>
                     <span className={styles.rowTitle}>

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

@@ -1,4 +1,4 @@
-import { ChildBedTypeEnum } from "@/constants/booking"
+import { CancellationRuleEnum, ChildBedTypeEnum } from "@/constants/booking"
 
 export function formatChildBedPreferences({
   childrenAges,
@@ -61,3 +61,10 @@ export function formatChildBedPreferences({
   // Filter out any null values and join the results
   return `[${preferences.filter((pref) => typeof pref === "string").join(", ")}]`
 }
+
+export function hasModifiableRate(cancellationRule: string | null): boolean {
+  return (
+    cancellationRule === CancellationRuleEnum.CancellableBefore6PM ||
+    cancellationRule === CancellationRuleEnum.Changeable
+  )
+}

apps/scandic-web/components/SidePeeks/BookedRoomSidePeek/index.tsx

@@ -9,6 +9,7 @@ import { useMyStayRoomDetailsStore } from "@/stores/my-stay/myStayRoomDetailsSto
 
 import GuestDetails from "@/components/HotelReservation/MyStay/GuestDetails"
 import Price from "@/components/HotelReservation/MyStay/Price"
+import { hasModifiableRate } from "@/components/HotelReservation/MyStay/utils"
 import { hasBreakfastPackageFromBookingFlow } from "@/components/HotelReservation/MyStay/utils/hasBreakfastPackage"
 import ImageGallery from "@/components/ImageGallery"
 import Accordion from "@/components/TempDesignSystem/Accordion"
@@ -93,7 +94,6 @@ export default function BookedRoomSidePeek({
 
   const adultsOnlyMsg = adultsMsg
   const adultsAndChildrenMsg = [adultsMsg, childrenMsg].join(", ")
-
   return (
     <SidePeek
       title={room.name}
@@ -187,24 +187,28 @@ export default function BookedRoomSidePeek({
                 </Typography>
               </div>
             </div>
-            <div className={styles.row}>
-              <span className={styles.rowTitle}>
-                <MaterialIcon icon="refresh" color="Icon/Default" size={20} />
-                <Typography variant="Body/Paragraph/mdBold">
-                  <p>{intl.formatMessage({ id: "Modify By" })}</p>
-                </Typography>
-              </span>
-              <div className={styles.rowContent}>
-                <Typography variant="Body/Paragraph/mdRegular">
-                  <p color="uiTextHighContrast">
-                    {intl.formatMessage(
-                      { id: "Until {time}, {date}" },
-                      { time: "18:00", date: fromDate.format("dddd D MMM") }
-                    )}
-                  </p>
-                </Typography>
+            {hasModifiableRate(
+              matchingRoomBooking.rateDefinition.cancellationRule
+            ) && (
+              <div className={styles.row}>
+                <span className={styles.rowTitle}>
+                  <MaterialIcon icon="refresh" color="Icon/Default" size={20} />
+                  <Typography variant="Body/Paragraph/mdBold">
+                    <p>{intl.formatMessage({ id: "Modify By" })}</p>
+                  </Typography>
+                </span>
+                <div className={styles.rowContent}>
+                  <Typography variant="Body/Paragraph/mdRegular">
+                    <p color="uiTextHighContrast">
+                      {intl.formatMessage(
+                        { id: "Until {time}, {date}" },
+                        { time: "18:00", date: fromDate.format("dddd D MMM") }
+                      )}
+                    </p>
+                  </Typography>
+                </div>
               </div>
-            </div>
+            )}
             <div className={styles.row}>
               <span className={styles.rowTitle}>
                 <MaterialIcon icon="coffee" color="Icon/Default" size={20} />
@@ -259,7 +263,6 @@ export default function BookedRoomSidePeek({
                 </div>
               </div>
             )}
-
             <div className={styles.row}>
               <span className={styles.rowTitle}>
                 <MaterialIcon icon="bed" color="Icon/Default" size={20} />