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 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>

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 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}>

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({
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
)
}

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 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} />