From e2c1b066beedf8dfd4ad40ba551ffa7261d2f226 Mon Sep 17 00:00:00 2001 From: Hrishikesh Vaipurkar Date: Tue, 27 May 2025 07:00:02 +0000 Subject: [PATCH] Merged in feat/SW-2407-mystay-tc-to-modal (pull request #2082) Feat/SW-2407 mystay tc to modal * feat: SW-2407 Moved terms in modal view for my stay * feat: SW-2407 Updated modal to show terms for reward nights and corporate cheque stay * feat: SW-2407 Optimised code * feat: SW-2407 Optimised code Approved-by: Niclas Edenvin --- .../MyStay/Rooms/MultiRoom/Room.tsx | 62 +++++++++++++-- .../MyStay/Rooms/MultiRoom/room.module.css | 43 ++++++++--- .../Rooms/SingleRoom/Details/Row/index.tsx | 8 +- .../SingleRoom/Details/Row/row.module.css | 8 +- .../MyStay/Rooms/SingleRoom/Details/Terms.tsx | 27 ------- .../Rooms/SingleRoom/Details/Terms/Terms.tsx | 76 +++++++++++++++++++ .../SingleRoom/Details/Terms/terms.module.css | 16 ++++ .../MyStay/Rooms/SingleRoom/Details/index.tsx | 2 +- 8 files changed, 194 insertions(+), 48 deletions(-) delete mode 100644 apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Details/Terms.tsx create mode 100644 apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Details/Terms/Terms.tsx create mode 100644 apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Details/Terms/terms.module.css diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/MultiRoom/Room.tsx b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/MultiRoom/Room.tsx index 8652ead26..44041d628 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/MultiRoom/Room.tsx +++ b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/MultiRoom/Room.tsx @@ -1,15 +1,19 @@ "use client" import { useIntl } from "react-intl" +import { IconButton } from "@scandic-hotels/design-system/IconButton" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import { Typography } from "@scandic-hotels/design-system/Typography" +import { CancellationRuleEnum } from "@/constants/booking" import { dt } from "@/lib/dt" import { IconForFeatureCode } from "@/components/HotelReservation/utils" import Image from "@/components/Image" +import Modal from "@/components/Modal" import Divider from "@/components/TempDesignSystem/Divider" import IconChip from "@/components/TempDesignSystem/IconChip" +import useRateTitles from "@/hooks/booking/useRateTitles" import useLang from "@/hooks/useLang" import { formatPrice } from "@/utils/numberFormatting" @@ -20,6 +24,7 @@ import RoomDetailsSidePeek from "./RoomDetailsSidePeek" import styles from "./room.module.css" import { RoomPackageCodeEnum } from "@/types/components/hotelReservation/selectRate/roomFilter" +import { RateEnum } from "@/types/enums/rate" import type { Room } from "@/types/stores/my-stay" import type { SafeUser } from "@/types/user" @@ -93,6 +98,19 @@ export default function Room({ booking, roomNr, user }: RoomProps) { ) } + const rateTitles = useRateTitles() + let rateTerm: { paymentTerm: string; title: string } + switch (rateDefinition.cancellationRule) { + case CancellationRuleEnum.CancellableBefore6PM: + rateTerm = rateTitles[RateEnum.flex] + break + case CancellationRuleEnum.Changeable: + rateTerm = rateTitles[RateEnum.change] + break + default: + rateTerm = rateTitles[RateEnum.save] + } + return (
@@ -218,7 +236,7 @@ export default function Room({ booking, roomNr, user }: RoomProps) {

- {rateDefinition.cancellationText ? ( + {

@@ -227,11 +245,45 @@ export default function Room({ booking, roomNr, user }: RoomProps) { })}

- -

{rateDefinition.cancellationText}

- +
+ + {rateTerm.title} + + + + + } + > +
+ {rateDefinition.generalTerms.map((term) => ( + +

+ + {term} +

+ + ))} +
+ +
- ) : null} + } {hasModifiableRate(rateDefinition.cancellationRule) && (
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/MultiRoom/room.module.css b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/MultiRoom/room.module.css index c6eb47237..99dd992af 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/MultiRoom/room.module.css +++ b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/MultiRoom/room.module.css @@ -1,8 +1,8 @@ .multiRoom { display: flex; flex-direction: column; - gap: var(--Spacing-x2); - padding: 0 var(--Spacing-x2); + gap: var(--Space-x2); + padding: 0 var(--Space-x2); } .cancelled { @@ -16,12 +16,12 @@ .multiRoomCard { display: flex; flex-direction: column; - gap: var(--Spacing-x2); + gap: var(--Space-x2); background-color: var(--Base-Background-Primary-Normal); border-radius: var(--Corner-radius-lg); border: 1px solid var(--Base-Border-Subtle); overflow: hidden; - padding-bottom: var(--Spacing-x3); + padding-bottom: var(--Space-x3); position: relative; } @@ -38,14 +38,14 @@ .roomHeader { display: flex; align-items: center; - gap: var(--Spacing-x-one-and-half); + gap: var(--Space-x15); } .chip { background-color: var(--Scandic-Peach-30); color: var(--Scandic-Red-100); border-radius: var(--Corner-radius-sm); - padding: var(--Spacing-x-half) var(--Spacing-x1); + padding: var(--Space-x05) var(--Space-x1); height: fit-content; } @@ -55,13 +55,13 @@ .reference { display: flex; - gap: var(--Spacing-x-half); + gap: var(--Space-x05); } .details { display: flex; - padding: var(--Spacing-x-one-and-half) var(--Spacing-x2) 0; - gap: var(--Spacing-x2); + padding: var(--Space-x15) var(--Space-x2) 0; + gap: var(--Space-x2); flex-direction: column; } @@ -77,16 +77,37 @@ left: 10px; display: flex; flex-direction: row; - gap: var(--Spacing-x1); + gap: var(--Space-x1); z-index: 100; } .package { background-color: var(--Main-Grey-White); - padding: var(--Spacing-x-half) var(--Spacing-x1); + padding: var(--Space-x05) var(--Space-x1); border-radius: var(--Corner-radius-sm); } +.termsLabel { + display: flex; + align-items: center; +} + +.termsInfoIcon { + margin: -10px -10px -10px -5px; +} + +.terms { + display: flex; + flex-direction: column; + gap: var(--Space-x1); + margin-top: var(--Space-x2); +} + +.term { + display: flex; + gap: var(--Space-x1); +} + @media (min-width: 768px) { .multiRoom { padding: 0; diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Details/Row/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Details/Row/index.tsx index ee95402ab..4c687d9ae 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Details/Row/index.tsx +++ b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Details/Row/index.tsx @@ -13,7 +13,12 @@ interface RowProps { title: string } -export default function Row({ icon, text, title }: RowProps) { +export default function Row({ + icon, + text, + title, + children, +}: React.PropsWithChildren) { return (
@@ -26,6 +31,7 @@ export default function Row({ icon, text, title }: RowProps) {

{text}

 + {children}
) diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Details/Row/row.module.css b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Details/Row/row.module.css index b1d1f9af1..d0ff49855 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Details/Row/row.module.css +++ b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Details/Row/row.module.css @@ -1,7 +1,7 @@ .row { display: flex; flex-direction: column; - padding: var(--Spacing-x-one-and-half) 0; + padding: var(--Space-x15) 0; } .row:last-child { @@ -11,7 +11,7 @@ .title { display: flex; flex-direction: row; - gap: var(--Spacing-x1); + gap: var(--Space-x1); } .title svg { @@ -20,7 +20,9 @@ } .content { - padding-left: var(--Spacing-x4); + display: flex; + align-items: center; + padding-left: var(--Space-x4); } @media (min-width: 768px) { diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Details/Terms.tsx b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Details/Terms.tsx deleted file mode 100644 index 7c12584b0..000000000 --- a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Details/Terms.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import { useIntl } from "react-intl" - -import { useMyStayStore } from "@/stores/my-stay" - -import Row from "./Row" - -export default function Terms() { - const intl = useIntl() - - const cancellationText = useMyStayStore( - (state) => state.bookedRoom.rateDefinition.cancellationText - ) - - if (!cancellationText) { - return null - } - - return ( - - ) -} diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Details/Terms/Terms.tsx b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Details/Terms/Terms.tsx new file mode 100644 index 000000000..f7c4a8e36 --- /dev/null +++ b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Details/Terms/Terms.tsx @@ -0,0 +1,76 @@ +import { useIntl } from "react-intl" + +import { IconButton } from "@scandic-hotels/design-system/IconButton" +import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" +import { Typography } from "@scandic-hotels/design-system/Typography" + +import { CancellationRuleEnum } from "@/constants/booking" +import { useMyStayStore } from "@/stores/my-stay" + +import Modal from "@/components/Modal" +import useRateTitles from "@/hooks/booking/useRateTitles" + +import Row from "../Row" + +import styles from "./terms.module.css" + +import { RateEnum } from "@/types/enums/rate" + +export default function Terms() { + const intl = useIntl() + const rateTitles = useRateTitles() + + const { generalTerms, cancellationRule } = useMyStayStore((state) => ({ + generalTerms: state.bookedRoom.rateDefinition.generalTerms, + cancellationRule: state.bookedRoom.rateDefinition.cancellationRule, + })) + + let rateTerm: { paymentTerm: string; title: string } + switch (cancellationRule) { + case CancellationRuleEnum.CancellableBefore6PM: + rateTerm = rateTitles[RateEnum.flex] + break + case CancellationRuleEnum.Changeable: + rateTerm = rateTitles[RateEnum.change] + break + default: + rateTerm = rateTitles[RateEnum.save] + } + + return ( + <> + + + + + } + > +
+ {generalTerms.map((term) => ( + +

+ + {term} +

+ + ))} +
+ + + + ) +} diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Details/Terms/terms.module.css b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Details/Terms/terms.module.css new file mode 100644 index 000000000..6dcda55cb --- /dev/null +++ b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Details/Terms/terms.module.css @@ -0,0 +1,16 @@ +.terms { + display: flex; + flex-direction: column; + gap: var(--Space-x1); + margin-top: var(--Space-x3); +} + +.term { + display: flex; + align-items: center; + gap: var(--Space-x1); +} + +.button { + margin: -10px -5px; +} diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Details/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Details/index.tsx index 19643e4b5..723bf22ac 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Details/index.tsx +++ b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Details/index.tsx @@ -1,9 +1,9 @@ +import Terms from "./Terms/Terms" import BedPreference from "./BedPreference" import Breakfast from "./Breakfast" import Guests from "./Guests" import ModifyBy from "./ModifyBy" import Packages from "./Packages" -import Terms from "./Terms" import styles from "./details.module.css"