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/GuestsRoomsPicker/Form.tsx

@@ -5,6 +5,7 @@ import { useFormContext, useWatch } from "react-hook-form"
 import { useIntl } from "react-intl"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { REDEMPTION } from "@/constants/booking"
 
@@ -64,13 +65,19 @@ export default function GuestsRoomsPickerDialog({
 
   const handleRemoveRoom = useCallback(
     (index: number) => {
-      setValue(
-        "rooms",
-        roomsValue.filter((_, i) => i !== index),
-        { shouldValidate: true, shouldDirty: true }
-      )
+      const updatedRooms = roomsValue.filter((_, i) => i !== index)
+
+      setValue("rooms", updatedRooms, {
+        shouldValidate: true,
+        shouldDirty: true,
+      })
+
+      if (updatedRooms.length === 1) {
+        trigger("bookingCode.value")
+        trigger(REDEMPTION)
+      }
     },
-    [roomsValue, setValue]
+    [roomsValue, trigger, setValue]
   )
 
   // Validate rooms when they change
@@ -107,24 +114,35 @@ export default function GuestsRoomsPickerDialog({
 
           {addRoomDisabledTextForSpecialRate ? (
             <div className={styles.addRoomMobileContainer}>
-              <Tooltip
-                text={addRoomDisabledTextForSpecialRate}
-                position="bottom"
-                arrow="left"
+              <Button
+                intent="text"
+                variant="icon"
+                wrapping
+                theme="base"
+                fullWidth
+                onPress={handleAddRoom}
+                disabled
               >
-                <Button
-                  intent="text"
-                  variant="icon"
-                  wrapping
-                  theme="base"
-                  fullWidth
-                  onPress={handleAddRoom}
-                  disabled
+                <MaterialIcon icon="add" color="CurrentColor" />
+                {addRoomLabel}
+              </Button>
+              <div className={styles.errorContainer}>
+                <Typography
+                  className={styles.error}
+                  variant="Body/Supporting text (caption)/smRegular"
                 >
-                  <MaterialIcon icon="add" color="CurrentColor" />
-                  {addRoomLabel}
-                </Button>
-              </Tooltip>
+                  <span>
+                    <MaterialIcon
+                      icon="error"
+                      size={20}
+                      color="Icon/Feedback/Error"
+                      className={styles.errorIcon}
+                      isFilled
+                    />
+                    {addRoomDisabledTextForSpecialRate}
+                  </span>
+                </Typography>
+              </div>
             </div>
           ) : (
             canAddRooms && (
@@ -151,7 +169,7 @@ export default function GuestsRoomsPickerDialog({
           <div className={styles.hideOnMobile}>
             <Tooltip
               text={addRoomDisabledTextForSpecialRate}
-              position="top"
+              position="bottom"
               arrow="left"
             >
               <Button

apps/scandic-web/components/GuestsRoomsPicker/guests-rooms-picker.module.css

@@ -2,6 +2,17 @@
   display: none;
 }
 
+.errorContainer {
+  display: flex;
+  padding: var(--Space-x2);
+}
+
+.error {
+  display: flex;
+  gap: var(--Space-x1);
+  color: var(--UI-Text-Error);
+}
+
 .pickerContainerMobile {
   --header-height: 72px;
   --sticky-button-height: 140px;
@@ -59,6 +70,10 @@
   padding: 20px var(--Spacing-x-one-and-half) 0;
 }
 
+.guestsAndRooms {
+  color: var(--Text-Default);
+}
+
 .footer {
   display: flex;
   flex-direction: row;
@@ -132,7 +147,6 @@
   .addRoomMobileContainer {
     display: grid;
     padding-bottom: calc(var(--sticky-button-height) + 20px);
-    gap: var(--Spacing-x2);
   }
 
   .addRoomMobileContainer button {

apps/scandic-web/components/GuestsRoomsPicker/index.tsx

@@ -183,7 +183,7 @@ function Trigger({
       aria-labelledby={ariaLabelledBy}
     >
       <Typography variant="Body/Paragraph/mdRegular">
-        <span>{parts.join(", ")}</span>
+        <span className={styles.guestsAndRooms}>{parts.join(", ")}</span>
       </Typography>
     </Button>
   )