feat: SW-276 Implemented Store usage

components/GuestsRoomsPicker/GuestsRoomsPicker.tsx

@@ -1,83 +1,47 @@
 "use client"
-import { useState } from "react"
 import { useIntl } from "react-intl"
 
-import useLang from "@/hooks/useLang"
+import { guestsRoomsStore } from "@/stores/guests-rooms"
 
+import { guestRoomsSchema } from "../Forms/BookingWidget/schema"
 import Button from "../TempDesignSystem/Button"
 import Divider from "../TempDesignSystem/Divider"
-import GuestsRoomPicker from "./GuestsRoomPicker"
+import Subtitle from "../TempDesignSystem/Text/Subtitle"
+import AdultSelector from "./AdultSelector"
+import ChildSelector from "./ChildSelector"
 
 import styles from "./guests-rooms-picker.module.css"
 
-import {
-  GuestsRoom,
-  GuestsRoomsPickerProps,
-} from "@/types/components/bookingWidget/guestsRoomsPicker"
+import { GuestsRoomsPickerProps } from "@/types/components/bookingWidget/guestsRoomsPicker"
 
 export default function GuestsRoomsPicker({
-  handleOnSelect,
-  initialSelected = [
-    {
-      adults: 1,
-      children: [],
-    },
-  ],
   closePicker,
-  isValid,
 }: GuestsRoomsPickerProps) {
-  const lang = useLang()
   const intl = useIntl()
   const doneLabel = intl.formatMessage({ id: "Done" })
-  const [selectedGuests, setSelectedGuests] =
-    useState<GuestsRoom[]>(initialSelected)
 
-  function handleSelectRoomGuests(
-    selectedGuestsRoom: GuestsRoom,
-    index: number
-  ) {
-    let updatedSelectedGuests = JSON.parse(JSON.stringify(selectedGuests))
-    updatedSelectedGuests[index] = selectedGuestsRoom
-    handleOnSelect(updatedSelectedGuests)
-    setSelectedGuests(updatedSelectedGuests)
-  }
+  const guestsData = guestsRoomsStore().rooms
+  const guestRoomsValidData = guestRoomsSchema.safeParse(guestsData)
+  const isInValid = !guestRoomsValidData.success
+  const roomLabel = intl.formatMessage({ id: "Room" })
 
-  // Not in MVP scope
-  function addRoom() {
-    if (selectedGuests.length < 4) {
-      let updatedSelectedGuests = JSON.parse(JSON.stringify(selectedGuests))
-      updatedSelectedGuests.push({
-        adults: 1,
-        children: [],
-      })
-      setSelectedGuests(updatedSelectedGuests)
-      handleOnSelect(updatedSelectedGuests)
-    }
-  }
-
-  // Not in MVP scope
-  function removeRoom(index: number) {
-    if (selectedGuests.length > 1) {
-      let updatedSelectedGuests = JSON.parse(JSON.stringify(selectedGuests))
-      updatedSelectedGuests.splice(index, 1)
-      setSelectedGuests(updatedSelectedGuests)
-      handleOnSelect(updatedSelectedGuests)
-    }
-  }
+  // Not in MVP
+  // const { increaseRoom, decreaseRoom } = guestsRoomsStore()
 
   return (
     <>
-      {selectedGuests.map((room, index) => (
+      {guestsData.map((room, index) => (
         <section className={styles.roomContainer} key={index}>
-          <GuestsRoomPicker
-            room={room}
-            handleOnSelect={handleSelectRoomGuests}
-            index={index}
-            isValid={isValid}
-          />
+          <section className={styles.roomDetailsContainer}>
+            <Subtitle>
+              {roomLabel} {index + 1}
+            </Subtitle>
+            <AdultSelector roomIndex={index} />
+            <ChildSelector roomIndex={index} />
+          </section>
           {/* Not in MVP
            {index > 0 ? (
-            <Button intent="text" onClick={() => removeRoom(index)}>
+            <Button intent="text" onClick={() => decreaseRoom(index)}>
               Remove Room
             </Button>
           ) : null} */}
@@ -86,12 +50,12 @@ export default function GuestsRoomsPicker({
       ))}
       <footer className={styles.footer}>
         {/*  Not in MVP
-        {selectedGuests.length < 4 ? (
-          <Button intent="text" onClick={addRoom}>
+        {guestsData.length < 4 ? (
+          <Button intent="text" onClick={increaseRoom}>
             Add Room
           </Button>
         ) : null} */}
-        <Button onClick={closePicker} disabled={!isValid}>
+        <Button onClick={closePicker} disabled={isInValid}>
           {doneLabel}
         </Button>
       </footer>