feat: SW-276 Optimized code

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 = [
-    { label: "0", value: 0 },
-    { label: "1", value: 1 },
-    { 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 },
-  ]
+  const ageList = Array.from(Array(13).keys()).map((age) => ({
+    label: `${age}`,
+    value: age,
+  }))
 
   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 { increaseChildren, decreaseChildren, childCount } = guestsRoomsStore()
+  const { children } = useGuestsRoomsStore((state) => state.rooms[roomIndex])
+  const { increaseChildren, decreaseChildren } = useGuestsRoomsStore()
 
   function increaseChildrenCount(roomIndex: number) {
     if (children.length < 5) {