Merged in feat/SW-1308-booking-codes-track-b (pull request #1607)

Feat/SW-1308 booking codes track b

* feat: SW-1308 Booking codes track b

* feat: SW-1308 Booking codes Track B implementation

* feat: SW-1308 Optimized after rebase


Approved-by: Arvid Norlin

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

@@ -21,7 +21,7 @@
 .errorContainer {
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x-half);
+  gap: var(--Spacing-x1);
 }
 .error {
   display: flex;

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

@@ -25,6 +25,8 @@ import type {
 } from "@/types/components/bookingWidget"
 import type { ButtonProps } from "@/components/TempDesignSystem/Button/button"
 
+const invalidBookingCodeMsg = "Invalid booking code"
+
 export default function BookingCode() {
   const intl = useIntl()
   const checkIsTablet = useMediaQuery(
@@ -53,11 +55,14 @@ export default function BookingCode() {
 
   function updateBookingCodeFormValue(value: string) {
     // Set value and show error if validation fails
-    setValue("bookingCode.value", value, { shouldValidate: true })
+    setValue("bookingCode.value", value.toUpperCase(), { shouldValidate: true })
 
     if (getValues(REDEMPTION)) {
       // Remove the redemption as user types booking code and show notification for the same
-      setValue(REDEMPTION, false)
+      // Add delay to handle table mode rendering
+      setTimeout(function () {
+        setValue(REDEMPTION, false)
+      })
       // Hide the above notification popup after 5 seconds by re-triggering validation
       // This is kept consistent with location search field error notification timeout
       setTimeout(function () {
@@ -247,12 +252,13 @@ function CodeRemember({ bookingCodeValue, onApplyClick }: CodeRememberProps) {
 function BookingCodeError({ codeError }: { codeError: FieldError }) {
   const intl = useIntl()
   const isMultiroomErr = codeError.message?.indexOf("Multi-room") !== -1
+  const isInvalidErr = codeError.message === invalidBookingCodeMsg
 
   return (
     <div className={styles.errorContainer}>
-      <Caption color={isMultiroomErr ? "blue" : "red"} className={styles.error}>
+      <Caption color={isInvalidErr ? "red" : "blue"} className={styles.error}>
         <ErrorCircleIcon
-          color={isMultiroomErr ? "blue" : "red"}
+          color={isInvalidErr ? "red" : "blue"}
           className={styles.errorIcon}
         />
         {intl.formatMessage({ id: codeError.message })}
@@ -282,7 +288,7 @@ export function RemoveExtraRooms({ ...props }: ButtonProps) {
       type="button"
       onClick={removeExtraRooms}
       size="small"
-      intent="secondary"
+      intent="primary"
       {...props}
     >
       {intl.formatMessage({ id: "Remove extra rooms" })}
@@ -354,10 +360,11 @@ function TabletBookingCode({
                     onChange: (e) => updateValue(e.target.value),
                   })}
                   autoComplete="off"
+                  hideError
                 />
                 <div className={styles.bookingCodeRememberVisible}>
                   {codeError?.message ? (
-                    <RemoveExtraRooms />
+                    <BookingCodeError codeError={codeError} />
                   ) : (
                     <CodeRemember
                       bookingCodeValue={bookingCode?.value}

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

@@ -6,7 +6,7 @@ import { useIntl } from "react-intl"
 
 import { REDEMPTION } from "@/constants/booking"
 
-import { ErrorCircleIcon } from "@/components/Icons"
+import { InfoCircleIcon } from "@/components/Icons"
 import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 
@@ -27,14 +27,13 @@ export default function RewardNight() {
   const ref = useRef<HTMLDivElement | null>(null)
   const reward = intl.formatMessage({ id: "Book Reward Night" })
   const redemptionErr = errors[REDEMPTION]
-  const bookingCode = getValues("bookingCode.value")
   const isMultiRoomError = redemptionErr?.message?.indexOf("Multi-room") === 0
-  const errorInfoColor = isMultiRoomError ? "red" : "blue"
 
   function validateRedemption(value: boolean) {
     // Validate redemption as per the rules defined in the schema
     trigger(REDEMPTION)
-    if (value && bookingCode) {
+    if (value && getValues("bookingCode.value")) {
+      setValue("bookingCode.flag", false)
       setValue("bookingCode.value", "", { shouldValidate: true })
       // Hide the notification popup after 5 seconds by re-triggering validation
       // This is kept consistent with location search field error notification timeout
@@ -87,15 +86,8 @@ export default function RewardNight() {
       </Checkbox>
       {redemptionErr && (
         <div className={styles.errorContainer}>
-          <Caption
-            className={styles.error}
-            type="regular"
-            color={errorInfoColor}
-          >
-            <ErrorCircleIcon
-              color={errorInfoColor}
-              className={styles.errorIcon}
-            />
+          <Caption className={styles.error} type="regular" color="blue">
+            <InfoCircleIcon color="blue" className={styles.errorIcon} />
             {intl.formatMessage({ id: redemptionErr.message })}
           </Caption>
           {isMultiRoomError ? <RemoveExtraRooms /> : null}

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

@@ -12,7 +12,6 @@
 .error {
   display: flex;
   gap: var(--Spacing-x-half);
-  align-items: center;
 }
 
 .errorIcon {