scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

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

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


Approved-by: Niclas Edenvin
This commit is contained in:
Bianca Widstam
2025-04-09 14:09:23 +00:00
parent 6bbe80526e
commit e6aa177e6f
4 changed files with 70 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

9
apps/scandic-web/components/HotelReservation/MyStay/utils.ts
View File

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

41
apps/scandic-web/components/SidePeeks/BookedRoomSidePeek/index.tsx
View File

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