diff --git a/packages/booking-flow/lib/components/EnterDetails/Confirm/SmsConfirmation.tsx b/packages/booking-flow/lib/components/EnterDetails/Confirm/SmsConfirmation.tsx index d40a41c19..7d10fa4f1 100644 --- a/packages/booking-flow/lib/components/EnterDetails/Confirm/SmsConfirmation.tsx +++ b/packages/booking-flow/lib/components/EnterDetails/Confirm/SmsConfirmation.tsx @@ -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.", })} diff --git a/packages/booking-flow/lib/components/EnterDetails/Confirm/confirm.module.css b/packages/booking-flow/lib/components/EnterDetails/Confirm/confirm.module.css index ede307156..25e7dcc1a 100644 --- a/packages/booking-flow/lib/components/EnterDetails/Confirm/confirm.module.css +++ b/packages/booking-flow/lib/components/EnterDetails/Confirm/confirm.module.css @@ -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); diff --git a/packages/booking-flow/lib/components/EnterDetails/Confirm/index.tsx b/packages/booking-flow/lib/components/EnterDetails/Confirm/index.tsx index 1ab82fede..83a3a8752 100644 --- a/packages/booking-flow/lib/components/EnterDetails/Confirm/index.tsx +++ b/packages/booking-flow/lib/components/EnterDetails/Confirm/index.tsx @@ -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 (
- -

- {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.", - })} -

-
+
+ +
+ +

+ {intl.formatMessage({ + id: "enterDetails.guarantee.guaranteeLabel", + defaultMessage: "Guarantee for late arrival", + })} +

+
+ +

+ {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.", + })} +

+
+
+
+
diff --git a/packages/booking-flow/lib/components/EnterDetails/Payment/TermsAndConditions/index.tsx b/packages/booking-flow/lib/components/EnterDetails/Payment/TermsAndConditions/index.tsx index a43b7c623..be50ed47d 100644 --- a/packages/booking-flow/lib/components/EnterDetails/Payment/TermsAndConditions/index.tsx +++ b/packages/booking-flow/lib/components/EnterDetails/Payment/TermsAndConditions/index.tsx @@ -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 (
{intl.formatMessage({ id: "booking.acceptBookingTerms", - defaultMessage: "I accept the booking and cancellation terms", + defaultMessage: "I accept the booking and cancellation terms.", })} @@ -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 Booking & Cancellation Terms, and understand that Scandic will process my personal data for this booking in accordance with Scandic's Privacy policy.", + "To complete your booking, please accept the general Booking & Cancellation Terms, and acknowledge that your data will be processed in accordance with Scandic's Privacy policy.", }, { termsAndConditionsLink: (str) => ( @@ -108,6 +107,14 @@ export default function TermsAndConditions({ )}

+
) }