feat: SW-963 Implemented error states and handling booking code and multiroom

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

@@ -4,8 +4,17 @@ import { useCallback, useEffect } from "react"
 import { useFormContext, useWatch } from "react-hook-form"
 import { useIntl } from "react-intl"
 
-import { CloseLargeIcon, PlusCircleIcon, PlusIcon } from "../Icons"
+import { env } from "@/env/client"
+
+import {
+  CloseLargeIcon,
+  ErrorCircleIcon,
+  PlusCircleIcon,
+  PlusIcon,
+} from "../Icons"
 import Button from "../TempDesignSystem/Button"
+import Caption from "../TempDesignSystem/Text/Caption"
+import { Tooltip } from "../TempDesignSystem/Tooltip"
 import { GuestsRoom } from "./GuestsRoom"
 
 import styles from "./guests-rooms-picker.module.css"
@@ -25,12 +34,22 @@ export default function GuestsRoomsPickerDialog({
   onClose,
 }: GuestsRoomsPickerDialogProps) {
   const intl = useIntl()
-  const { getFieldState, trigger, setValue } =
+  const { getFieldState, trigger, setValue, getValues } =
     useFormContext<BookingWidgetSchema>()
   const roomsValue = useWatch<BookingWidgetSchema, "rooms">({ name: "rooms" })
   const addRoomLabel = intl.formatMessage({ id: "Add room" })
   const doneLabel = intl.formatMessage({ id: "Done" })
 
+  // Disable add room if booking code is voucher or reward night is enebaled
+  const addRoomDisabledText = getValues("redemption")
+    ? intl.formatMessage({
+        id: "Multi-room booking is not available with reward night.",
+      })
+    : getValues("bookingCode.value")?.toLowerCase().startsWith("vo") &&
+      intl.formatMessage({
+        id: "Multi-room booking is not available with this booking code.",
+      })
+
   const handleClose = useCallback(async () => {
     const isValid = await trigger("rooms")
     if (isValid) onClose()
@@ -94,28 +113,59 @@ export default function GuestsRoomsPickerDialog({
                 theme="base"
                 fullWidth
                 onPress={handleAddRoom}
+                disabled={addRoomDisabledText ? true : false}
               >
                 <PlusIcon />
                 {addRoomLabel}
               </Button>
+                {addRoomDisabledText ? (
+                  <Caption
+                    color="blue"
+                    className={styles.addRoomMobileDisabledText}
+                  >
+                    <ErrorCircleIcon color="blue" width={20} />
+                    {addRoomDisabledText}
+                  </Caption>
+                ) : null}
             </div>
           )}
         </div>
       </section>
       <footer className={styles.footer}>
-        {canAddRooms && (
+        {addRoomDisabledText ? (
           <div className={styles.hideOnMobile}>
-            <Button
-              intent="text"
-              variant="icon"
-              wrapping
-              theme="base"
-              onPress={handleAddRoom}
+            <Tooltip
+              text={addRoomDisabledText}
+              position={"bottom"}
+              arrow="left"
             >
-              <PlusCircleIcon />
-              {addRoomLabel}
-            </Button>
+              <Button
+                intent="text"
+                variant="icon"
+                wrapping
+                theme="base"
+                disabled
+              >
+                <PlusCircleIcon />
+                {addRoomLabel}
+              </Button>
+            </Tooltip>
           </div>
+        ) : (
+          canAddRooms && (
+            <div className={styles.hideOnMobile}>
+              <Button
+                intent="text"
+                variant="icon"
+                wrapping
+                theme="base"
+                onPress={handleAddRoom}
+              >
+                <PlusCircleIcon />
+                {addRoomLabel}
+              </Button>
+            </div>
+          )
         )}
         <Button
           onPress={handleClose}

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

@@ -117,9 +117,22 @@
 
   .addRoomMobileContainer {
     display: grid;
+    padding-bottom: calc(var(--sticky-button-height) + 20px);
+    gap: var(--Spacing-x2);
+  }
+
+  .addRoomMobileContainer button {
     width: 150px;
     margin: 0 auto;
-    padding-bottom: calc(var(--sticky-button-height) + 20px);
+  }
+
+  .addRoomMobileContainer .addRoomMobileDisabledText {
+    padding: var(--Spacing-x1) var(--Spacing-x2);
+    background-color: var(--Base-Background-Primary-Normal);
+    margin: 0 var(--Spacing-x2);
+    border-radius: var(--Corner-radius-Medium);
+    display: flex;
+    gap: var(--Spacing-x1);
   }
 }