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

feat: SW-2028 Added reward night info in booking widget

Browse Source
This commit is contained in:
Hrishikesh Vaipurkar
2025-03-24 14:29:31 +01:00
parent 198927e6aa
commit 779495017e
8 changed files with 48 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
apps/scandic-web/components/Forms/BookingWidget/FormContent/RewardNight/index.tsx
View File

@@ -8,7 +8,10 @@ import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
import { REDEMPTION } from "@/constants/booking"
import Modal from "@/components/Modal"
import Button from "@/components/TempDesignSystem/Button"
import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import { RemoveExtraRooms } from "../BookingCode"
@@ -27,6 +30,9 @@ export default function RewardNight() {
} = useFormContext<BookingWidgetSchema>()
const ref = useRef<HTMLDivElement | null>(null)
const reward = intl.formatMessage({ id: "Book Reward Night" })
const rewardNightTooltip = intl.formatMessage({
id: "As a Scandic Friends member you need to be logged in to book a reward night (membership number and password). The points can be used to book reward nights at all Scandic hotels.",
})
const redemptionErr = errors[REDEMPTION]
const isMultiRoomError = redemptionErr?.message?.indexOf("Multi-room") === 0
@@ -81,9 +87,31 @@ export default function RewardNight() {
},
}}
>
<Caption color="uiTextMediumContrast" asChild>
<span>{reward}</span>
</Caption>
<div className={styles.rewardNightLabel}>
<Caption color="uiTextMediumContrast" asChild>
<span>{reward}</span>
</Caption>
<Modal
trigger={
<Button intent="text">
<MaterialIcon
icon="info"
size={20}
color="Icon/Feedback/Information"
className={styles.errorIcon}
/>
</Button>
}
title={reward}
>
<Body
color="uiTextHighContrast"
className={styles.rewardNightTooltip}
>
{rewardNightTooltip}
</Body>
</Modal>
</div>
</Checkbox>
{redemptionErr && (
<div className={styles.errorContainer}>

11
apps/scandic-web/components/Forms/BookingWidget/FormContent/RewardNight/reward-night.module.css
View File

@@ -17,3 +17,14 @@
.errorIcon {
min-width: 20px;
}
.rewardNightLabel {
align-items: center;
display: flex;
gap: var(--Spacing-x1);
}
.rewardNightTooltip {
max-width: 560px;
margin-top: var(--Spacing-x2);
}