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