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

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

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.",
           })}
         </span>
       </Typography>

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

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 (
       <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",
+                  id: "enterDetails.guarantee.guaranteeLabel",
-              defaultMessage:
+                  defaultMessage: "Guarantee for late arrival",
-                "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.",
                 })}
               </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>

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 (
     <div className={styles.termsAndConditions}>
       <Checkbox
         name="termsAndConditions"
         registerOptions={{ required: true }}
-        errorCodeMessages={{
+        hideError
-          [paymentError.TERMS_REQUIRED]: intl.formatMessage({
-            id: "common.mustAcceptTermsError",
-            defaultMessage: "You must accept the terms and conditions",
-          }),
-        }}
       >
         <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>
   )
 }