feat: SW-276 Optimized code

components/GuestsRoomsPicker/AdultSelector/index.tsx

@@ -21,7 +21,7 @@ import {
 export default function AdultSelector({ roomIndex = 0 }: AdultSelectorProps) {
   const intl = useIntl()
   const adultsLabel = intl.formatMessage({ id: "Adults" })
-  const { register, setValue } = useFormContext()
+  const { trigger, setValue } = useFormContext()
   const { adults, children, childrenInAdultsBed } = useGuestsRoomsStore(
     (state) => state.rooms[roomIndex]
   )
@@ -47,6 +47,7 @@ export default function AdultSelector({ roomIndex = 0 }: AdultSelectorProps) {
             `rooms.${roomIndex}.children.${toUpdateIndex}.bed`,
             children[toUpdateIndex].age < 3 ? 1 : 2
           )
+          trigger()
         }
       }
     }

components/GuestsRoomsPicker/ChildSelector/ChildInfoSelector.tsx

@@ -26,7 +26,7 @@ export default function ChildInfoSelector({
   const ageLabel = intl.formatMessage({ id: "Age" })
   const ageReqdErrMsg = intl.formatMessage({ id: "Child age is required" })
   const bedLabel = intl.formatMessage({ id: "Bed" })
-  const { setValue } = useFormContext()
+  const { setValue, trigger } = useFormContext()
   const { adults, childrenInAdultsBed } = useGuestsRoomsStore(
     (state) => state.rooms[roomIndex]
   )
@@ -45,9 +45,7 @@ export default function ChildInfoSelector({
 
   function updateSelectedAge(age: number) {
     updateChildAge(age, roomIndex, index)
-    setValue(`rooms.${roomIndex}.children.${index}.age`, age, {
+    setValue(`rooms.${roomIndex}.children.${index}.age`, age)
-      shouldTouch: true,
-    })
     const availableBedTypes = getAvailableBeds(age)
     updateSelectedBed(availableBedTypes[0].value)
   }
@@ -60,6 +58,7 @@ export default function ChildInfoSelector({
     }
     updateChildBed(bed, roomIndex, index)
     setValue(`rooms.${roomIndex}.children.${index}.bed`, bed)
+    trigger()
   }
 
   const allBedTypes: ChildBed[] = [

components/GuestsRoomsPicker/ChildSelector/index.tsx

@@ -14,12 +14,13 @@ import ChildInfoSelector from "./ChildInfoSelector"
 
 import styles from "./child-selector.module.css"
 
+import { BookingWidgetSchema } from "@/types/components/bookingWidget"
 import { ChildSelectorProps } from "@/types/components/bookingWidget/guestsRoomsPicker"
 
 export default function ChildSelector({ roomIndex = 0 }: ChildSelectorProps) {
   const intl = useIntl()
   const childrenLabel = intl.formatMessage({ id: "Children" })
-  const { setValue } = useFormContext()
+  const { setValue, trigger } = useFormContext<BookingWidgetSchema>()
   const { children } = useGuestsRoomsStore((state) => state.rooms[roomIndex])
   const { increaseChildren, decreaseChildren } = useGuestsRoomsStore()
 
@@ -30,6 +31,7 @@ export default function ChildSelector({ roomIndex = 0 }: ChildSelectorProps) {
         age: -1,
         bed: -1,
       })
+      trigger()
     }
   }
   function decreaseChildrenCount(roomIndex: number) {
@@ -38,6 +40,7 @@ export default function ChildSelector({ roomIndex = 0 }: ChildSelectorProps) {
       let newChildrenList = JSON.parse(JSON.stringify(children))
       newChildrenList.pop()
       setValue(`rooms.${roomIndex}.children`, newChildrenList)
+      trigger()
     }
   }
 

components/GuestsRoomsPicker/GuestsRoomsPicker.tsx

@@ -1,4 +1,5 @@
 "use client"
+import { useFormContext } from "react-hook-form"
 import { useIntl } from "react-intl"
 
 import { useGuestsRoomsStore } from "@/stores/guests-rooms"
@@ -13,6 +14,7 @@ import ChildSelector from "./ChildSelector"
 
 import styles from "./guests-rooms-picker.module.css"
 
+import { BookingWidgetSchema } from "@/types/components/bookingWidget"
 import { GuestsRoomsPickerProps } from "@/types/components/bookingWidget/guestsRoomsPicker"
 
 export default function GuestsRoomsPicker({
@@ -20,11 +22,11 @@ export default function GuestsRoomsPicker({
 }: GuestsRoomsPickerProps) {
   const intl = useIntl()
   const doneLabel = intl.formatMessage({ id: "Done" })
+  const roomLabel = intl.formatMessage({ id: "Room" })
+
+  const { getFieldState } = useFormContext<BookingWidgetSchema>()
 
   const rooms = useGuestsRoomsStore((state) => state.rooms)
-  const guestRoomsValidData = guestRoomsSchema.safeParse(rooms)
-  const isInValid = !guestRoomsValidData.success
-  const roomLabel = intl.formatMessage({ id: "Room" })
 
   // Not in MVP
   // const { increaseRoom, decreaseRoom } = guestsRoomsStore()
@@ -63,7 +65,7 @@ export default function GuestsRoomsPicker({
         ) : null} */}
         <Button
           onClick={closePicker}
-          disabled={isInValid}
+          disabled={getFieldState("rooms").invalid}
           className={styles.hideOnMobile}
           intent="tertiary"
           theme="base"
@@ -73,7 +75,7 @@ export default function GuestsRoomsPicker({
         </Button>
         <Button
           onClick={closePicker}
-          disabled={isInValid}
+          disabled={getFieldState("rooms").invalid}
           className={styles.hideOnDesktop}
           intent="tertiary"
           theme="base"