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

Merged in feat/BOOK-644-gla-reward-night (pull request #3500)

Browse Source 
fix(BOOK-644): update ui reward night gla

* fix(BOOK-644): update ut reward night gla


Approved-by: Erik Tiekstra
Approved-by: Matilda Landström
This commit is contained in:
Bianca Widstam
2026-01-29 07:03:50 +00:00
parent 7c3566855d
commit 6d9cbad8bf
4 changed files with 56 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/booking-flow/lib/components/EnterDetails/Confirm/SmsConfirmation.tsx
View File

@@ -12,7 +12,7 @@ export default function SmsConfirmation() {
{intl.formatMessage({
id: "booking.smsConfirmationLabel",
defaultMessage:
"I would like to get my booking confirmation via sms",
"I would like to receive my booking confirmation via sms.",
})}
</span>
</Typography>

14
packages/booking-flow/lib/components/EnterDetails/Confirm/confirm.module.css
View File

@@ -3,6 +3,20 @@
gap: var(--Space-x3);
}
.redemptionInfo {
display: flex;
align-items: flex-start;
background-color: var(--Surface-Secondary-Default);
border-radius: var(--Corner-Radius-lg);
padding: var(--Space-x2);
gap: var(--Space-x1);
}
.textWrapper {
display: flex;
flex-direction: column;
gap: var(--Space-x05);
}
.selections {
background-color: var(--Surface-Secondary-Default);
border-radius: var(--Corner-Radius-lg);

23
packages/booking-flow/lib/components/EnterDetails/Confirm/index.tsx
View File

@@ -2,6 +2,7 @@
import { useIntl } from "react-intl"
import { Divider } from "@scandic-hotels/design-system/Divider"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"
import TermsAndConditions from "../Payment/TermsAndConditions"
@@ -36,15 +37,29 @@ export default function ConfirmBooking({
if (isRedemptionBooking) {
return (
<div className={styles.confirmBooking}>
<Typography variant="Body/Paragraph/mdRegular">
<div className={styles.redemptionInfo}>
<MaterialIcon icon="calendar_clock" size={24} color="Icon/Intense" />
<div className={styles.textWrapper}>
<Typography variant="Body/Supporting text (caption)/smBold">
<p>
{intl.formatMessage({
id: "enterDetails.confirmBooking.redemptionGuaranteeInfo",
defaultMessage:
"When you confirm the booking the room will be guaranteed for late arrival. If you fail to arrive without cancelling in advance or if you cancel after 18:00 local time, you will be charged for one reward night.",
id: "enterDetails.guarantee.guaranteeLabel",
defaultMessage: "Guarantee for late arrival",
})}
</p>
</Typography>
<Typography variant="Body/Paragraph/mdRegular">
<p>
{intl.formatMessage({
id: "enterDetails.confirmBooking.rewardNightGuaranteeInfo",
defaultMessage:
"When you complete the booking the room will be guaranteed for late arrival. The hotel will hold your booking, even if you arrive after 18:00. In case of a no-show, you will be charged for one reward night.",
})}
</p>
</Typography>
</div>
</div>
<Divider color="Border/Divider/Subtle" />
<TermsAndConditions isFlexBookingTerms />
<SmsConfirmation />
</div>

27
packages/booking-flow/lib/components/EnterDetails/Payment/TermsAndConditions/index.tsx
View File

@@ -1,12 +1,13 @@
import { useFormContext } from "react-hook-form"
import { useIntl } from "react-intl"
import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
import { ErrorMessage } from "@scandic-hotels/design-system/Form/ErrorMessage"
import { TextLink } from "@scandic-hotels/design-system/TextLink"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { useBookingFlowConfig } from "../../../../bookingFlowConfig/bookingFlowConfigContext"
import useLang from "../../../../hooks/useLang"
import { paymentError } from "../schema"
import styles from "./termsAndConditions.module.css"
@@ -19,24 +20,22 @@ export default function TermsAndConditions({
const intl = useIntl()
const lang = useLang()
const { routes } = useBookingFlowConfig()
const {
formState: { errors },
} = useFormContext()
return (
<div className={styles.termsAndConditions}>
<Checkbox
name="termsAndConditions"
registerOptions={{ required: true }}
errorCodeMessages={{
[paymentError.TERMS_REQUIRED]: intl.formatMessage({
id: "common.mustAcceptTermsError",
defaultMessage: "You must accept the terms and conditions",
}),
}}
hideError
>
<Typography variant="Body/Supporting text (caption)/smBold">
<span>
{intl.formatMessage({
id: "booking.acceptBookingTerms",
defaultMessage: "I accept the booking and cancellation terms",
defaultMessage: "I accept the booking and cancellation terms.",
})}
</span>
</Typography>
@@ -46,9 +45,9 @@ export default function TermsAndConditions({
{isFlexBookingTerms
? intl.formatMessage(
{
id: "enterDetails.payment.flexBookingTermsAndConditions",
id: "enterDetails.paymentStep.flexBookingTermsAndConditions",
defaultMessage:
"I accept the terms for this booking and the general <termsAndConditionsLink>Booking & Cancellation Terms</termsAndConditionsLink>, and understand that Scandic will process my personal data for this booking in accordance with <privacyPolicyLink>Scandic's Privacy policy</privacyPolicyLink>.",
"To complete your booking, please accept the general <termsAndConditionsLink>Booking & Cancellation Terms</termsAndConditionsLink>, and acknowledge that your data will be processed in accordance with Scandic's <privacyPolicyLink>Privacy policy</privacyPolicyLink>.",
},
{
termsAndConditionsLink: (str) => (
@@ -108,6 +107,14 @@ export default function TermsAndConditions({
)}
</p>
</Typography>
<ErrorMessage
name="termsAndConditions"
errors={errors}
messageLabel={intl.formatMessage({
id: "common.mustAcceptTermsError",
defaultMessage: "You must accept the terms and conditions",
})}
/>
</div>
)
}