Merged in feat(SW-2084)-disable-options-modify-my-stay (pull request #1662)

feat(SW-2084) logic to disable Manage stay options

* feat(SW-2084) logic to disable Manage stay options

* feat(SW-2084) cleanup logic for checks

* feat(SW-2084) check if date has passed

* feat(SW-2084) change to datetimeIsInThePast


Approved-by: Niclas Edenvin

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

@@ -5,7 +5,6 @@ import { useIntl } from "react-intl"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import { CancellationRuleEnum } from "@/constants/booking"
 import { dt } from "@/lib/dt"
 import { useMyStayRoomDetailsStore } from "@/stores/my-stay/myStayRoomDetailsStore"
 
@@ -31,22 +30,15 @@ export default function BookingSummary({ hotel }: BookingSummaryProps) {
 
   const bookedRoom = useMyStayRoomDetailsStore((state) => state.bookedRoom)
 
-  const {
+  const { isCancelled, createDateTime, guaranteeInfo, checkInDate, isPrePaid } =
-    isCancelled,
+    bookedRoom
-    createDateTime,
-    rateDefinition,
-    guaranteeInfo,
-    checkInDate,
-  } = bookedRoom
 
   const directionsUrl = `https://www.google.com/maps/dir/?api=1&destination=${hotel.location.latitude},${hotel.location.longitude}`
 
   const bookingDate = dt(createDateTime).locale(lang).format("D MMMM YYYY")
 
   const isPaid =
-    rateDefinition.cancellationRule !==
+    isPrePaid || dt(checkInDate).startOf("day").isBefore(dt().startOf("day"))
-      CancellationRuleEnum.CancellableBefore6PM ||
-    dt(checkInDate).startOf("day").isBefore(dt().startOf("day"))
 
   const paymentMethod = guaranteeInfo?.paymentMethodDescription
     ?.toLocaleLowerCase()

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

@@ -220,7 +220,11 @@ export default function GuestDetails({
           >
             <MaterialIcon
               icon="edit"
-              color="Icon/Interactive/Default"
+              color={
+                booking.isCancelled
+                  ? "Icon/Interactive/Disabled"
+                  : "Icon/Interactive/Default"
+              }
               size={20}
             />
             <Typography variant="Body/Paragraph/mdRegular">

apps/scandic-web/components/HotelReservation/MyStay/ManageStay/ActionPanel/Actions/AddToCalendarButton.tsx

@@ -11,8 +11,10 @@ import styles from "../actionPanel.module.css"
 
 export default function AddToCalendarButton({
   onPress,
+  disabled,
 }: {
   onPress: () => void
+  disabled?: boolean
 }) {
   const intl = useIntl()
 
@@ -25,9 +27,9 @@ export default function AddToCalendarButton({
     <Button
       variant="icon"
       intent="text"
-      theme="base"
       className={styles.button}
       onPress={handleAddToCalendar}
+      disabled={disabled}
     >
       {intl.formatMessage({ id: "Add to calendar" })}
       <MaterialIcon icon="calendar_add_on" color="CurrentColor" />

apps/scandic-web/components/HotelReservation/MyStay/ManageStay/ActionPanel/actionPanel.module.css

@@ -26,6 +26,21 @@
   display: flex;
 }
 
+.actionPanel .menu .button:disabled {
+  color: var(--Scandic-Grey-40);
+}
+
+.disabledLink {
+  color: var(--Scandic-Grey-40);
+  display: flex;
+  justify-content: space-between;
+  padding: var(--Spacing-x1) 0;
+  width: 100%;
+}
+.disabledLink:hover {
+  cursor: not-allowed;
+}
+
 .info {
   width: 100%;
   background-color: var(--Base-Background-Primary-Normal);

apps/scandic-web/components/HotelReservation/MyStay/ManageStay/ActionPanel/index.tsx

@@ -1,8 +1,10 @@
 "use client"
 
+import { useMemo } from "react"
 import { useIntl } from "react-intl"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { customerService } from "@/constants/currentWebHrefs"
 import { preliminaryReceipt } from "@/constants/routes/myStay"
@@ -20,6 +22,13 @@ import useLang from "@/hooks/useLang"
 import { trackMyStayPageLink } from "@/utils/tracking"
 
 import AddToCalendarButton from "./Actions/AddToCalendarButton"
+import {
+  checkCancelable,
+  checkCanDownloadInvoice,
+  checkDateModifiable,
+  checkGuaranteeable,
+  isDatetimePast,
+} from "./utils"
 
 import styles from "./actionPanel.module.css"
 
@@ -43,14 +52,42 @@ export default function ActionPanel({ hotel }: ActionPanelProps) {
     (state) => state.linkedReservationRooms
   )
 
-  const showCancelStayButton =
+  const {
-    bookedRoom.isCancelable ||
+    confirmationNumber,
-    linkedReservationRooms.some((room) => room.isCancelable)
+    checkInDate,
-  const showGuaranteeButton =
+    checkOutDate,
-    !bookedRoom.guaranteeInfo && !bookedRoom.isCancelled
+    createDateTime,
+    canChangeDate,
+    isPrePaid,
+  } = bookedRoom
 
-  const { confirmationNumber, checkInDate, checkOutDate, createDateTime } =
+  const datetimeIsInThePast = useMemo(
-    bookedRoom
+    () => isDatetimePast(checkInDate),
+    [checkInDate]
+  )
+
+  const isDateModifyable = checkDateModifiable({
+    canChangeDate,
+    datetimeIsInThePast,
+    isCancelled: bookedRoom.isCancelled,
+    isPrePaid,
+  })
+
+  const isCancelable = checkCancelable({
+    bookedRoom,
+    linkedReservationRooms,
+    datetimeIsInThePast,
+  })
+
+  const isGuaranteeable = checkGuaranteeable({
+    bookedRoom,
+    datetimeIsInThePast,
+  })
+
+  const canDownloadInvoice = checkCanDownloadInvoice({
+    isCancelled: bookedRoom.isCancelled,
+    isPrePaid,
+  })
 
   const calendarEvent: EventAttributes = {
     busyStatus: "FREE",
@@ -102,48 +139,65 @@ export default function ActionPanel({ hotel }: ActionPanelProps) {
           onClick={handleModifyStay}
           intent="text"
           className={styles.button}
+          disabled={!isDateModifyable}
         >
           {intl.formatMessage({ id: "Modify dates" })}
           <MaterialIcon icon="calendar_month" color="CurrentColor" />
         </Button>
-        {showGuaranteeButton && (
+
-          <Button
+        <Button
-            variant="icon"
+          variant="icon"
-            onClick={handleGuaranteeLateArrival}
+          onClick={handleGuaranteeLateArrival}
-            intent="text"
+          intent="text"
-            className={styles.button}
+          className={styles.button}
-          >
+          disabled={!isGuaranteeable}
-            {intl.formatMessage({ id: "Guarantee late arrival" })}
+        >
-            <MaterialIcon icon="credit_card" color="CurrentColor" />
+          {intl.formatMessage({ id: "Guarantee late arrival" })}
-          </Button>
+          <MaterialIcon icon="credit_card" color="CurrentColor" />
-        )}
+        </Button>
+
         <AddToCalendar
           checkInDate={checkInDate}
           event={calendarEvent}
           hotelName={hotel.name}
-          renderButton={(onPress) => <AddToCalendarButton onPress={onPress} />}
+          renderButton={(onPress) => (
+            <AddToCalendarButton
+              onPress={onPress}
+              disabled={datetimeIsInThePast}
+            />
+          )}
         />
-        <Link
+        {canDownloadInvoice ? (
-          href={preliminaryReceipt[lang]}
+          <Link
-          target="_blank"
+            href={preliminaryReceipt[lang]}
-          keepSearchParams
+            target="_blank"
-          className={styles.actionLink}
+            keepSearchParams
-          onClick={handleDownloadInvoice}
+            className={styles.actionLink}
-        >
+            onClick={handleDownloadInvoice}
-          {intl.formatMessage({ id: "Download invoice" })}
-          <MaterialIcon icon="download" color="CurrentColor" />
-        </Link>
-        {showCancelStayButton && (
-          <Button
-            variant="icon"
-            onClick={handleCancelStay}
-            intent="text"
-            className={styles.button}
           >
-            {intl.formatMessage({ id: "Cancel stay" })}
+            {intl.formatMessage({ id: "Download invoice" })}
-            <MaterialIcon icon="cancel" color="CurrentColor" />
+            <MaterialIcon icon="download" color="CurrentColor" />
-          </Button>
+          </Link>
+        ) : (
+          <div className={styles.disabledLink}>
+            <Typography variant="Body/Paragraph/mdBold">
+              <p>{intl.formatMessage({ id: "Download invoice" })}</p>
+            </Typography>
+
+            <MaterialIcon icon="download" color="CurrentColor" />
+          </div>
         )}
+
+        <Button
+          variant="icon"
+          onClick={handleCancelStay}
+          intent="text"
+          className={styles.button}
+          disabled={!isCancelable}
+        >
+          {intl.formatMessage({ id: "Cancel stay" })}
+          <MaterialIcon icon="cancel" color="CurrentColor" />
+        </Button>
       </div>
       <div className={styles.info}>
         <div>

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

@@ -0,0 +1,87 @@
+import { CancellationRuleEnum } from "@/constants/booking"
+
+import type { Room } from "@/stores/my-stay/myStayRoomDetailsStore"
+
+interface ModificationConditions {
+  canModify: boolean
+  isNotPast: boolean
+  isNotCancelled: boolean
+  isNotPrePaid: boolean
+}
+
+interface GuaranteeConditions {
+  isCancellableBefore6PM: boolean
+  hasNoGuaranteeInfo: boolean
+  isNotCancelled: boolean
+  isNotPast: boolean
+}
+
+export function isDatetimePast(date: Date): boolean {
+  return new Date(date) < new Date()
+}
+
+export function checkDateModifiable({
+  canChangeDate,
+  datetimeIsInThePast,
+  isCancelled,
+  isPrePaid,
+}: {
+  canChangeDate: boolean
+  datetimeIsInThePast: boolean
+  isCancelled: boolean
+  isPrePaid: boolean
+}): boolean {
+  const conditions: ModificationConditions = {
+    canModify: canChangeDate,
+    isNotPast: !datetimeIsInThePast,
+    isNotCancelled: !isCancelled,
+    isNotPrePaid: !isPrePaid,
+  }
+
+  return Object.values(conditions).every(Boolean)
+}
+
+export function checkCancelable({
+  bookedRoom,
+  linkedReservationRooms,
+  datetimeIsInThePast,
+}: {
+  bookedRoom: Room
+  linkedReservationRooms: Room[]
+  datetimeIsInThePast: boolean
+}): boolean {
+  const hasAnyCancelableRoom =
+    bookedRoom.isCancelable ||
+    linkedReservationRooms.some((room) => room.isCancelable)
+
+  return hasAnyCancelableRoom && !datetimeIsInThePast
+}
+
+export function checkGuaranteeable({
+  bookedRoom,
+  datetimeIsInThePast,
+}: {
+  bookedRoom: Room
+  datetimeIsInThePast: boolean
+}): boolean {
+  const conditions: GuaranteeConditions = {
+    isCancellableBefore6PM:
+      bookedRoom.rateDefinition.cancellationRule ===
+      CancellationRuleEnum.CancellableBefore6PM,
+    hasNoGuaranteeInfo: !bookedRoom.guaranteeInfo,
+    isNotCancelled: !bookedRoom.isCancelled,
+    isNotPast: !datetimeIsInThePast,
+  }
+
+  return Object.values(conditions).every(Boolean)
+}
+
+export function checkCanDownloadInvoice({
+  isCancelled,
+  isPrePaid,
+}: {
+  isCancelled: boolean
+  isPrePaid: boolean
+}): boolean {
+  return !isCancelled && isPrePaid
+}

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

@@ -15,6 +15,8 @@ import CancelStay from "./ActionPanel/Actions/CancelStay"
 import ModifyStay from "./ActionPanel/Actions/ModifyStay"
 import ActionPanel from "./ActionPanel"
 
+import styles from "./manangeStay.module.css"
+
 import type { Hotel } from "@/types/hotel"
 import { type CreditCard } from "@/types/user"
 
@@ -73,9 +75,15 @@ export default function ManageStay({
         onClick={() => setIsOpen(true)}
         size="small"
         disabled={allRoomsCancelled}
+        className={styles.manageStayButton}
       >
         {intl.formatMessage({ id: "Manage stay" })}
-        <MaterialIcon icon="keyboard_arrow_down" color="Icon/Inverted" />
+        <MaterialIcon
+          icon="keyboard_arrow_down"
+          color={
+            allRoomsCancelled ? "Icon/Interactive/Disabled" : "Icon/Inverted"
+          }
+        />
       </Button>
       {isOpen && (
         <Modal

apps/scandic-web/components/HotelReservation/MyStay/ManageStay/manangeStay.module.css

@@ -0,0 +1,3 @@
+button.manageStayButton {
+  color: var(--Text-Inverted);
+}

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

@@ -30,7 +30,6 @@ export default function ToggleSidePeek({
           confirmationNumber,
         })
       }
-      theme="base"
       size="small"
       variant="icon"
       intent="text"

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

@@ -98,7 +98,6 @@ export function ReferenceCard({
     checkInDate,
     checkOutDate,
     isCancelled,
-    isModifiable,
     bookingCode,
   } = bookedRoom
 
@@ -311,20 +310,19 @@ export function ReferenceCard({
           </p>
         </Typography>
       )}
-      {isModifiable && (
+
-        <Typography variant="Body/Supporting text (caption)/smRegular">
+      <Typography variant="Body/Supporting text (caption)/smRegular">
-          <p
+        <p
-            className={`${styles.note} ${allRoomsCancelled ? styles.cancelledNote : ""}`}
+          className={`${styles.note} ${allRoomsCancelled ? styles.cancelledNote : ""}`}
-          >
+        >
-            {booking.rateDefinition.generalTerms.map((term) => (
+          {booking.rateDefinition.generalTerms.map((term) => (
-              <span key={term}>
+            <span key={term}>
-                {term}
+              {term}
-                {term.endsWith(".") ? " " : ". "}
+              {term.endsWith(".") ? " " : ". "}
-              </span>
+            </span>
-            ))}
+          ))}
-          </p>
+        </p>
-        </Typography>
+      </Typography>
-      )}
     </div>
   )
 }

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

@@ -1,4 +1,4 @@
-import { BookingStatusEnum } from "@/constants/booking"
+import { BookingStatusEnum, CancellationRuleEnum } from "@/constants/booking"
 import { dt } from "@/lib/dt"
 
 import { formatChildBedPreferences } from "../utils"
@@ -71,6 +71,11 @@ export function mapRoomDetails({
     booking.childBedPreferences
   )
 
+  const isPrePaid =
+    !!booking.guaranteeInfo?.paymentMethodDescription ||
+    booking.rateDefinition.cancellationRule !==
+      CancellationRuleEnum.CancellableBefore6PM
+
   return {
     hotelId: booking.hotelId,
     roomTypeCode: booking.roomTypeCode,
@@ -85,7 +90,6 @@ export function mapRoomDetails({
     guaranteeInfo: booking.guaranteeInfo,
     linkedReservations: booking.linkedReservations,
     bookingCode: booking.bookingCode,
-    isModifiable: booking.isModifiable,
     isCancelable: booking.isCancelable,
     multiRoom: booking.multiRoom,
     canChangeDate: booking.canChangeDate,
@@ -136,5 +140,6 @@ export function mapRoomDetails({
       },
     },
     breakfast,
+    isPrePaid,
   }
 }

apps/scandic-web/stores/my-stay/myStayRoomDetailsStore.ts

@@ -21,7 +21,6 @@ export type Room = Pick<
   | "confirmationNumber"
   | "cancellationNumber"
   | "bookingCode"
-  | "isModifiable"
   | "isCancelable"
   | "multiRoom"
   | "canChangeDate"
@@ -41,6 +40,7 @@ export type Room = Pick<
   roomPrice: RoomPrice
   breakfast: BreakfastPackage | false
   mainRoom: boolean
+  isPrePaid: boolean
 }
 
 interface MyStayRoomDetailsState {
@@ -85,7 +85,6 @@ export const useMyStayRoomDetailsStore = create<MyStayRoomDetailsState>(
         rateCode: "",
         title: null,
       },
-      reservationStatus: "",
       roomPrice: {
         perNight: {
           requested: {
@@ -129,7 +128,7 @@ export const useMyStayRoomDetailsStore = create<MyStayRoomDetailsState>(
       breakfast: false,
       linkedReservations: [],
       isCancelable: false,
-      isModifiable: false,
+      isPrePaid: false,
     },
     linkedReservationRooms: [],
     actions: {