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

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

@@ -1,5 +1,5 @@
 "use client"
-import { useWatch } from "react-hook-form"
+import { useFormContext, useWatch } from "react-hook-form"
 import { useIntl } from "react-intl"
 
 import { dt } from "@/lib/dt"
@@ -11,11 +11,13 @@ import SkeletonShimmer from "@/components/SkeletonShimmer"
 import Button from "@/components/TempDesignSystem/Button"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 
+import { RemoveExtraRooms } from "./BookingCode"
 import Search, { SearchSkeleton } from "./Search"
 import Voucher, { VoucherSkeleton } from "./Voucher"
 
 import styles from "./formContent.module.css"
 
+import type { BookingWidgetSchema } from "@/types/components/bookingWidget"
 import type { BookingWidgetFormContentProps } from "@/types/components/form/bookingwidget"
 
 export default function FormContent({
@@ -25,6 +27,10 @@ export default function FormContent({
   isSearching,
 }: BookingWidgetFormContentProps) {
   const intl = useIntl()
+  const {
+    formState: { errors },
+  } = useFormContext<BookingWidgetSchema>()
+  const bookingCodeError = errors["bookingCode"]?.value
   const selectedDate = useWatch({ name: "date" })
 
   const roomsLabel = intl.formatMessage({ id: "Rooms & Guests" })
@@ -79,6 +85,13 @@ export default function FormContent({
           <Voucher />
         </div>
         <div className={`${styles.buttonContainer} ${styles.hideOnTablet}`}>
+          {bookingCodeError?.message?.indexOf("Multi-room") === 0 ? (
+            <RemoveExtraRooms
+              size="medium"
+              fullWidth
+              className={styles.showOnMobile}
+            />
+          ) : null}
           <Button
             className={styles.button}
             form={formId}