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

@@ -7,6 +7,7 @@ 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"
 import { hotelreservation } from "@/constants/routes/hotelReservation"
 import { dt } from "@/lib/dt"
 
@@ -18,6 +19,7 @@ import useLang from "@/hooks/useLang"
 
 import { RemoveExtraRooms } from "./BookingCode"
 import { Search, SearchSkeleton } from "./Search"
+import { isMultiRoomError } from "./utils"
 import ValidationError from "./ValidationError"
 import Voucher, { VoucherSkeleton } from "./Voucher"
 
@@ -108,12 +110,11 @@ export default function FormContent({
         <Voucher />
       </div>
       <div className={`${styles.buttonContainer} ${styles.hideOnTablet}`}>
-        {errors.bookingCode?.value?.message?.indexOf("Multi-room") === 0 ? (
-          <RemoveExtraRooms
-            size="medium"
-            fullWidth
-            className={styles.showOnMobile}
-          />
+        {isMultiRoomError(errors.bookingCode?.value?.message) ||
+        isMultiRoomError(errors[REDEMPTION]?.message) ? (
+          <div className={styles.showOnMobile}>
+            <RemoveExtraRooms size="medium" fullWidth />
+          </div>
         ) : null}
         <Button
           className={styles.button}