Merged in fix/SW-2626-error-message-multiroom-reward (pull request #2299)

fix(SW-2626): add multiroom reward error message for mobile

* fix(SW-2626): add multiroom reward error message for mobile

* fix(SW-2626): error message to red color

* fix(SW-2626): fix errorContainer

* fix(SW-2626): fix button fullwidth

* fix(SW-2626): fix button fullwidth

* fix(SW-2626): add design

* fix(SW-2626): add new colors for checkbox

* fix(SW-2626): new color for input

* fix(SW-2626): fix pr comment

* fix(SW-2626): final ui for desktop and mobile


Approved-by: Hrishikesh Vaipurkar

apps/scandic-web/components/Forms/BookingWidget/FormContent/BookingCode/booking-code.module.css

@@ -16,20 +16,20 @@
   align-items: center;
   gap: var(--Spacing-x-half);
   position: relative;
+  color: var(--Text-Accent-Primary);
 }
 
 .errorContainer {
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x1);
-}
-.error {
-  display: flex;
-  gap: var(--Spacing-x-half);
+  gap: var(--Space-x2);
 }
 
-.errorIcon {
-  min-width: 20px;
+.error {
+  display: flex;
+  gap: var(--Space-x1);
+  white-space: break-spaces;
+  color: var(--UI-Text-Error);
 }
 
 .bookingCodeRemember,
@@ -52,10 +52,17 @@
   align-items: center;
 }
 
+.removeButton {
+  width: 100%;
+}
+
 @media screen and (max-width: 767px) {
   .hideOnMobile {
     display: none;
   }
+  .removeButton {
+    display: none;
+  }
 }
 
 @media screen and (min-width: 768px) {
@@ -69,6 +76,9 @@
     justify-content: space-between;
     border-radius: var(--Spacing-x-one-and-half);
   }
+  .error {
+    color: var(--Text-Default);
+  }
 }
 
 @media screen and (min-width: 768px) and (max-width: 1366px) {

apps/scandic-web/components/Forms/BookingWidget/FormContent/BookingCode/index.tsx

@@ -5,6 +5,7 @@ import { useIntl } from "react-intl"
 import { useMediaQuery } from "usehooks-ts"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { REDEMPTION } from "@/constants/booking"
 
@@ -17,8 +18,8 @@ import Switch from "@/components/TempDesignSystem/Form/Switch"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 
-import { bookingWidgetErrors } from "../../schema"
 import { Input as BookingWidgetInput } from "../Input"
+import { isMultiRoomError } from "../utils"
 
 import styles from "./booking-code.module.css"
 
@@ -70,6 +71,7 @@ export default function BookingCode() {
       // Add delay to handle table mode rendering
       setTimeout(function () {
         setValue(REDEMPTION, false, {
+          shouldValidate: true,
           shouldDirty: true,
         })
       })
@@ -147,13 +149,9 @@ export default function BookingCode() {
     >
       <div className={styles.bookingCode}>
         <div className={styles.bookingCodeLabel}>
-          <Caption
-            color={showRemember ? "uiTextActive" : "red"}
-            type="bold"
-            asChild
-          >
+          <Typography variant="Body/Supporting text (caption)/smBold">
             <span>{codeVoucher}</span>
-          </Caption>
+          </Typography>
           <CodeRulesModal />
         </div>
         <BookingWidgetInput
@@ -176,7 +174,7 @@ export default function BookingCode() {
           }
         >
           {codeError?.message ? (
-            <BookingCodeError codeError={codeError} />
+            <BookingCodeError codeError={codeError} isDesktop />
           ) : (
             <CodeRemember
               bookingCodeValue={bookingCode?.value}
@@ -266,7 +264,8 @@ function CodeRemember({ bookingCodeValue, onApplyClick }: CodeRememberProps) {
         <Button
           size="small"
           className={styles.hideOnMobile}
-          intent="secondary"
+          intent="tertiary"
+          theme="base"
           type="button"
           onClick={onApplyClick}
         >
@@ -279,29 +278,36 @@ function CodeRemember({ bookingCodeValue, onApplyClick }: CodeRememberProps) {
   )
 }
 
-function BookingCodeError({ codeError }: { codeError: FieldError }) {
+function BookingCodeError({
+  codeError,
+  isDesktop = false,
+}: {
+  codeError: FieldError
+  isDesktop?: boolean
+}) {
   const intl = useIntl()
-  const isMultiroomErr =
-    codeError.message ===
-      bookingWidgetErrors.MULTIROOM_BOOKING_CODE_UNAVAILABLE ||
-    codeError.message === bookingWidgetErrors.MULTIROOM_REWARD_NIGHT_UNAVAILABLE
-  const isInvalidErr =
-    codeError.message === bookingWidgetErrors.BOOKING_CODE_INVALID
+  const isMultiroomError = isMultiRoomError(codeError.message)
 
   return (
     <div className={styles.errorContainer}>
-      <Caption className={styles.error}>
-        <MaterialIcon
-          icon="error"
-          color={
-            isInvalidErr ? "Icon/Feedback/Information" : "Icon/Feedback/Error"
-          }
-          className={styles.errorIcon}
-        />
-        {getErrorMessage(intl, codeError.message)}
-      </Caption>
-      {isMultiroomErr ? (
-        <RemoveExtraRooms className={styles.hideOnMobile} />
+      <Typography
+        className={styles.error}
+        variant="Body/Supporting text (caption)/smRegular"
+      >
+        <span>
+          <MaterialIcon
+            size={20}
+            icon="error"
+            color="Icon/Feedback/Error"
+            isFilled={!isDesktop}
+          />
+          {getErrorMessage(intl, codeError.message)}
+        </span>
+      </Typography>
+      {isMultiroomError ? (
+        <div className={styles.removeButton}>
+          <RemoveExtraRooms fullWidth />
+        </div>
       ) : null}
     </div>
   )
@@ -325,7 +331,7 @@ export function RemoveExtraRooms({ ...props }: ButtonProps) {
       type="button"
       onClick={removeExtraRooms}
       size="small"
-      intent="primary"
+      intent="secondary"
       {...props}
     >
       {intl.formatMessage({