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/RewardNight/index.tsx

@@ -3,6 +3,7 @@
 import { useCallback, useEffect, useRef } from "react"
 import { useFormContext } from "react-hook-form"
 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"
@@ -16,6 +17,7 @@ import { getErrorMessage } from "@/components/TempDesignSystem/Form/Input/errors
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 
 import { RemoveExtraRooms } from "../BookingCode"
+import { isMultiRoomError } from "../utils"
 
 import styles from "./reward-night.module.css"
 
@@ -38,7 +40,7 @@ export default function RewardNight() {
       "To book a reward night, make sure you're logged in to your Scandic Friends account.",
   })
   const redemptionErr = errors[REDEMPTION]
-  const isMultiRoomError = redemptionErr?.message?.indexOf("Multi-room") === 0
+  const isDesktop = useMediaQuery("(min-width: 767px)")
 
   function validateRedemption(value: boolean) {
     // Validate redemption as per the rules defined in the schema
@@ -55,10 +57,10 @@ export default function RewardNight() {
   }
 
   const resetOnMultiroomError = useCallback(() => {
-    if (isMultiRoomError) {
+    if (isMultiRoomError(redemptionErr?.message) && isDesktop) {
       setValue(REDEMPTION, false, { shouldValidate: true })
     }
-  }, [isMultiRoomError, setValue])
+  }, [redemptionErr?.message, setValue, isDesktop])
 
   function closeOnBlur(evt: FocusEvent) {
     const target = evt.relatedTarget as HTMLElement
@@ -119,16 +121,26 @@ export default function RewardNight() {
       </Checkbox>
       {redemptionErr && (
         <div className={styles.errorContainer}>
-          <Caption className={styles.error} type="regular" color="blue">
-            <MaterialIcon
-              icon="error"
-              size={24}
-              color="Icon/Feedback/Information"
-              className={styles.errorIcon}
-            />
-            {getErrorMessage(intl, redemptionErr.message)}
-          </Caption>
-          {isMultiRoomError ? <RemoveExtraRooms /> : null}
+          <Typography
+            className={styles.error}
+            variant="Body/Supporting text (caption)/smRegular"
+          >
+            <span>
+              <MaterialIcon
+                icon="error"
+                size={20}
+                color="Icon/Feedback/Error"
+                className={styles.errorIcon}
+                isFilled={!isDesktop}
+              />
+              {getErrorMessage(intl, redemptionErr.message)}
+            </span>
+          </Typography>
+          {isMultiRoomError(redemptionErr.message) ? (
+            <div className={styles.hideOnMobile}>
+              <RemoveExtraRooms fullWidth />
+            </div>
+          ) : null}
         </div>
       )}
     </div>

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

@@ -1,23 +1,19 @@
 .errorContainer {
-  background: var(--Base-Surface-Primary-light-Normal);
-  border-radius: var(--Spacing-x-one-and-half);
   display: grid;
-  gap: var(--Spacing-x1);
-  padding: var(--Spacing-x2);
-  position: absolute;
-  top: calc(100% + 16px);
-  width: 320px;
+  gap: var(--Space-x2);
+  margin-top: var(--Space-x2);
 }
 
 .error {
   display: flex;
-  gap: var(--Spacing-x-half);
+  gap: var(--Space-x1);
+  color: var(--UI-Text-Error);
+  white-space: break-spaces;
 }
 
 .errorIcon {
   min-width: 20px;
 }
-
 .rewardNightLabel {
   align-items: center;
   display: flex;
@@ -28,3 +24,25 @@
   max-width: 560px;
   margin-top: var(--Spacing-x2);
 }
+
+@media screen and (max-width: 767px) {
+  .hideOnMobile {
+    display: none;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .errorContainer {
+    border-radius: var(--Space-x15);
+    padding: var(--Space-x2);
+    background: var(--Base-Surface-Primary-light-Normal);
+    position: absolute;
+    top: calc(100% + 16px);
+    width: 320px;
+    margin-top: 0;
+    box-shadow: var(--popup-box-shadow);
+  }
+  .error {
+    color: var(--Text-Default);
+  }
+}