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}