feat: SW-276 Optimized code

components/Forms/BookingWidget/FormContent/index.tsx

@@ -5,12 +5,11 @@ import { useIntl } from "react-intl"
 import { dt } from "@/lib/dt"
 
 import DatePicker from "@/components/DatePicker"
+import GuestsRoomsPickerForm from "@/components/GuestsRoomsPicker"
 import { SearchIcon } from "@/components/Icons"
 import Button from "@/components/TempDesignSystem/Button"
-import GuestsRoomsPickerForm from "@/components/GuestsRoomsPicker"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 
-import Input from "./Input"
 import Search from "./Search"
 import Voucher from "./Voucher"
 

components/GuestsRoomsPicker/AdultSelector/index.tsx

@@ -3,7 +3,7 @@
 import { useFormContext } from "react-hook-form"
 import { useIntl } from "react-intl"
 
-import { guestsRoomsStore } from "@/stores/guests-rooms"
+import { useGuestsRoomsStore } from "@/stores/guests-rooms"
 
 import { MinusIcon, PlusIcon } from "@/components/Icons"
 import Button from "@/components/TempDesignSystem/Button"
@@ -13,15 +13,19 @@ import Caption from "@/components/TempDesignSystem/Text/Caption"
 import styles from "./adult-selector.module.css"
 
 import { BedTypeEnum } from "@/types/components/bookingWidget/enums"
-import { AdultSelectorProps } from "@/types/components/bookingWidget/guestsRoomsPicker"
+import {
+  AdultSelectorProps,
+  Child,
+} from "@/types/components/bookingWidget/guestsRoomsPicker"
 
 export default function AdultSelector({ roomIndex = 0 }: AdultSelectorProps) {
   const intl = useIntl()
   const adultsLabel = intl.formatMessage({ id: "Adults" })
-  const { setValue } = useFormContext()
+  const { register, setValue } = useFormContext()
-  const { adults, children, childrenInAdultsBed } =
+  const { adults, children, childrenInAdultsBed } = useGuestsRoomsStore(
-    guestsRoomsStore().rooms[roomIndex]
+    (state) => state.rooms[roomIndex]
-  const { increaseAdults, decreaseAdults } = guestsRoomsStore()
+  )
+  const { increaseAdults, decreaseAdults } = useGuestsRoomsStore()
 
   function increaseAdultsCount(roomIndex: number) {
     if (adults < 6) {
@@ -36,7 +40,7 @@ export default function AdultSelector({ roomIndex = 0 }: AdultSelectorProps) {
       setValue(`rooms.${roomIndex}.adults`, adults - 1)
       if (childrenInAdultsBed > adults) {
         const toUpdateIndex = children.findIndex(
-          (child, index) => child.bed == BedTypeEnum["In adults bed"]
+          (child: Child) => child.bed == BedTypeEnum.IN_ADULTS_BED
         )
         if (toUpdateIndex != -1) {
           setValue(

components/GuestsRoomsPicker/ChildSelector/ChildInfoSelector.tsx

@@ -3,7 +3,7 @@
 import { useFormContext } from "react-hook-form"
 import { useIntl } from "react-intl"
 
-import { guestsRoomsStore } from "@/stores/guests-rooms"
+import { useGuestsRoomsStore } from "@/stores/guests-rooms"
 
 import { ErrorCircleIcon } from "@/components/Icons"
 import Select from "@/components/TempDesignSystem/Select"
@@ -27,30 +27,21 @@ export default function ChildInfoSelector({
   const ageReqdErrMsg = intl.formatMessage({ id: "Child age is required" })
   const bedLabel = intl.formatMessage({ id: "Bed" })
   const { setValue } = useFormContext()
-  const { adults, childrenInAdultsBed } = guestsRoomsStore().rooms[roomIndex]
+  const { adults, childrenInAdultsBed } = useGuestsRoomsStore(
+    (state) => state.rooms[roomIndex]
+  )
   const {
     isValidated,
     updateChildAge,
     updateChildBed,
     increaseChildInAdultsBed,
     decreaseChildInAdultsBed,
-  } = guestsRoomsStore()
+  } = useGuestsRoomsStore()
 
-  const ageList = [
+  const ageList = Array.from(Array(13).keys()).map((age) => ({
-    { label: "0", value: 0 },
+    label: `${age}`,
-    { label: "1", value: 1 },
+    value: age,
-    { label: "2", value: 2 },
+  }))
-    { label: "3", value: 3 },
-    { label: "4", value: 4 },
-    { label: "5", value: 5 },
-    { label: "6", value: 6 },
-    { label: "7", value: 7 },
-    { label: "8", value: 8 },
-    { label: "9", value: 9 },
-    { label: "10", value: 10 },
-    { label: "11", value: 11 },
-    { label: "12", value: 12 },
-  ]
 
   function updateSelectedAge(age: number) {
     updateChildAge(age, roomIndex, index)
@@ -62,9 +53,9 @@ export default function ChildInfoSelector({
   }
 
   function updateSelectedBed(bed: number) {
-    if (bed == BedTypeEnum["In adults bed"]) {
+    if (bed == BedTypeEnum.IN_ADULTS_BED) {
       increaseChildInAdultsBed(roomIndex)
-    } else if (child.bed == BedTypeEnum["In adults bed"]) {
+    } else if (child.bed == BedTypeEnum.IN_ADULTS_BED) {
       decreaseChildInAdultsBed(roomIndex)
     }
     updateChildBed(bed, roomIndex, index)
@@ -74,15 +65,15 @@ export default function ChildInfoSelector({
   const allBedTypes: ChildBed[] = [
     {
       label: intl.formatMessage({ id: "In adults bed" }),
-      value: BedTypeEnum["In adults bed"],
+      value: BedTypeEnum.IN_ADULTS_BED,
     },
     {
       label: intl.formatMessage({ id: "In crib" }),
-      value: BedTypeEnum["In crib"],
+      value: BedTypeEnum.IN_CRIB,
     },
     {
       label: intl.formatMessage({ id: "In extra bed" }),
-      value: BedTypeEnum["In extra bed"],
+      value: BedTypeEnum.IN_EXTRA_BED,
     },
   ]
 
@@ -136,7 +127,7 @@ export default function ChildInfoSelector({
       {isValidated && child.age < 0 ? (
         <Caption color="red" className={styles.error}>
           <ErrorCircleIcon color="red" />
-          {intl.formatMessage({ id: "Child age is required" })}
+          {ageReqdErrMsg}
         </Caption>
       ) : null}
     </>

components/GuestsRoomsPicker/ChildSelector/index.tsx

@@ -3,7 +3,7 @@
 import { useFormContext } from "react-hook-form"
 import { useIntl } from "react-intl"
 
-import { guestsRoomsStore } from "@/stores/guests-rooms"
+import { useGuestsRoomsStore } from "@/stores/guests-rooms"
 
 import { MinusIcon, PlusIcon } from "@/components/Icons"
 import Button from "@/components/TempDesignSystem/Button"
@@ -20,8 +20,8 @@ export default function ChildSelector({ roomIndex = 0 }: ChildSelectorProps) {
   const intl = useIntl()
   const childrenLabel = intl.formatMessage({ id: "Children" })
   const { setValue } = useFormContext()
-  const children = guestsRoomsStore().rooms[roomIndex].children
+  const { children } = useGuestsRoomsStore((state) => state.rooms[roomIndex])
-  const { increaseChildren, decreaseChildren, childCount } = guestsRoomsStore()
+  const { increaseChildren, decreaseChildren } = useGuestsRoomsStore()
 
   function increaseChildrenCount(roomIndex: number) {
     if (children.length < 5) {

components/GuestsRoomsPicker/GuestsRoomsPicker.tsx

@@ -1,7 +1,7 @@
 "use client"
 import { useIntl } from "react-intl"
 
-import { guestsRoomsStore } from "@/stores/guests-rooms"
+import { useGuestsRoomsStore } from "@/stores/guests-rooms"
 
 import { guestRoomsSchema } from "../Forms/BookingWidget/schema"
 import { CloseLarge } from "../Icons"
@@ -21,8 +21,8 @@ export default function GuestsRoomsPicker({
   const intl = useIntl()
   const doneLabel = intl.formatMessage({ id: "Done" })
 
-  const guestsData = guestsRoomsStore().rooms
+  const rooms = useGuestsRoomsStore((state) => state.rooms)
-  const guestRoomsValidData = guestRoomsSchema.safeParse(guestsData)
+  const guestRoomsValidData = guestRoomsSchema.safeParse(rooms)
   const isInValid = !guestRoomsValidData.success
   const roomLabel = intl.formatMessage({ id: "Room" })
 
@@ -36,7 +36,7 @@ export default function GuestsRoomsPicker({
           <CloseLarge />
         </button>
       </header>
-      {guestsData.map((room, index) => (
+      {rooms.map((room, index) => (
         <section className={styles.roomContainer} key={index}>
           <section className={styles.roomDetailsContainer}>
             <Subtitle type="two" className={styles.roomHeading}>

components/GuestsRoomsPicker/index.tsx

@@ -3,7 +3,7 @@
 import { useCallback, useEffect, useRef, useState } from "react"
 import { useIntl } from "react-intl"
 
-import { guestsRoomsStore } from "@/stores/guests-rooms"
+import { useGuestsRoomsStore } from "@/stores/guests-rooms"
 
 import { guestRoomsSchema } from "@/components/Forms/BookingWidget/schema"
 import Body from "@/components/TempDesignSystem/Text/Body"
@@ -15,7 +15,8 @@ import styles from "./guests-rooms-picker.module.css"
 export default function GuestsRoomsPickerForm() {
   const intl = useIntl()
   const [isOpen, setIsOpen] = useState(false)
-  const { rooms, adultCount, childCount, setIsValidated } = guestsRoomsStore()
+  const { rooms, adultCount, childCount, setIsValidated } =
+    useGuestsRoomsStore()
   const ref = useRef<HTMLDivElement | null>(null)
   function handleOnClick() {
     setIsOpen((prevIsOpen) => !prevIsOpen)

stores/guests-rooms.ts

@@ -30,7 +30,7 @@ interface GuestsRooms {
   setIsValidated: (status: boolean) => void
 }
 
-export const guestsRoomsStore = create<GuestsRooms>((set, get) => ({
+export const useGuestsRoomsStore = create<GuestsRooms>((set, get) => ({
   rooms: [
     {
       adults: 1,
@@ -58,13 +58,13 @@ export const guestsRoomsStore = create<GuestsRooms>((set, get) => ({
           state.rooms[roomIndex].adults
         ) {
           const toUpdateIndex = state.rooms[roomIndex].children.findIndex(
-            (child) => child.bed == BedTypeEnum["In adults bed"]
+            (child) => child.bed == BedTypeEnum.IN_ADULTS_BED
           )
           if (toUpdateIndex != -1) {
             state.rooms[roomIndex].children[toUpdateIndex].bed =
               state.rooms[roomIndex].children[toUpdateIndex].age < 3
-                ? BedTypeEnum["In crib"]
+                ? BedTypeEnum.IN_CRIB
-                : BedTypeEnum["In extra bed"]
+                : BedTypeEnum.IN_EXTRA_BED
             state.rooms[roomIndex].childrenInAdultsBed =
               state.rooms[roomIndex].adults
           }
@@ -87,8 +87,7 @@ export const guestsRoomsStore = create<GuestsRooms>((set, get) => ({
         const roomChildren = state.rooms[roomIndex].children
         if (
           roomChildren.length &&
-          roomChildren[roomChildren.length - 1].bed ==
+          roomChildren[roomChildren.length - 1].bed == BedTypeEnum.IN_ADULTS_BED
-            BedTypeEnum["In adults bed"]
         ) {
           state.rooms[roomIndex].childrenInAdultsBed =
             state.rooms[roomIndex].childrenInAdultsBed - 1

types/components/bookingWidget/enums.ts

@@ -1,5 +1,5 @@
 export enum BedTypeEnum {
-  "In adults bed" = 0,
+  IN_ADULTS_BED = 0,
-  "In crib" = 1,
+  IN_CRIB = 1,
-  "In extra bed" = 2,
+  IN_EXTRA_BED = 2,
 }