modal code refactor done

db.json

 {
   "users": [
     {
-      "id": "594f",
+      "id": "eba4",
       "email": "syedabdul.rahman@krds.com",
       "selectionCount": "3"
+    },
+    {
+      "id": "eece",
+      "email": "lucy@gmail.com",
+      "selectionCount": "4"
+    },
+    {
+      "id": "bd3f",
+      "email": "abdul@gmail.com",
+      "selectionCount": "4"
+    },
+    {
+      "id": "fa09",
+      "email": "test@gmail.com"
+    },
+    {
+      "id": "da06",
+      "email": "testing@gmail.com",
+      "selectionCount": 3
     }
   ],
   "selectedSeats": [
-    
+    {
+      "id": "eba4",
+      "userid": "eba4",
+      "selected": [
+        {
+          "row": 6,
+          "seat": 3
+        },
+        {
+          "row": 6,
+          "seat": 4
+        },
+        {
+          "row": 5,
+          "seat": 4
+        }
+      ]
+    },
+    {
+      "id": "eece",
+      "userid": "eece",
+      "selected": [
+        {
+          "row": 7,
+          "seat": 1
+        },
+        {
+          "row": 7,
+          "seat": 2
+        },
+        {
+          "row": 7,
+          "seat": 4
+        },
+        {
+          "row": 6,
+          "seat": 2
+        }
+      ]
+    },
+    {
+      "id": "bd3f",
+      "userid": "bd3f",
+      "selected": [
+        {
+          "row": 5,
+          "seat": 5
+        },
+        {
+          "row": 5,
+          "seat": 6
+        },
+        {
+          "row": 5,
+          "seat": 7
+        },
+        {
+          "row": 5,
+          "seat": 8
+        }
+      ]
+    }
   ]
 }
\ No newline at end of file

src/components/Base/Input/styles.module.css

 .inputWrapper {
   display: flex;
   flex-direction: column;
-  gap: .5rem;
+  gap: 0.5rem;
 }
 
 .label {
@@ -13,7 +13,6 @@
   outline: none;
   padding: 0.8em;
   border-radius: 5px;
-  width: 93%;
   font-family: 'Inter-Medium';
   color: #000000db;
   font-size: 16px;

src/components/Shared/Modal/Index.jsx

-import Input from "../../Base/Input/Index";
-import Button from "../../Base/Button/Index";
-import styles from "./styles.module.css";
+import Input from '../../Base/Input/Index';
+import Button from '../../Base/Button/Index';
+import styles from './styles.module.css';
 
-const Modal = ({ onConfirm, onChange, variant, onOfSeats, onCancel }) => {
+const Modal = ({ children }) => {
   return (
-    <div className={styles["overlay-container"]}>
-      <div className={styles["modal-dialog"]} role="dialog" aria-modal="true">
-        {variant == "input" && (
-          <>
-            <h2 className={styles["modal-title"]}>Select Your Seats</h2>
-            <p>Please choose how many seats you'd like to book.</p>
-            <Input
-              label={"Number of Seats"}
-              placeholder="Enter number of seats"
-              type="number"
-              max="10"
-              min="1"
-              onChange={(e) => onChange(e.target.value)}
-            />
-            <div className={`${styles["btn-wrapper"]} ${styles["flex-direction"]}`}>
-              <Button size={"sm"} onClick={onConfirm}>
-                Confirm
-              </Button>
-            </div>
-          </>
-        )}
-        {variant == "confirm" && (
-          <>
-            <h2 className={styles["modal-title"]}>Confirm Your Selection</h2>
-            {/* <p>
-              You have selected <strong>{onOfSeats}</strong> seat
-              {onOfSeats !== 1 ? "s" : ""}.
-            </p> */}
-            <p>Please confirm to proceed with your booking.</p>
-            <div className={styles["btn-wrapper"]}>
-              {/* <Button size={"sm"} onClick={onCancel}>
-                Cancel
-              </Button> */}
-              <Button size={"sm"} onClick={onConfirm}>
-                Confirm
-              </Button>
-            </div>
-          </>
-        )}
+    <div className={styles['overlay-container']}>
+      <div className={styles['modal-dialog']} role="dialog" aria-modal="true">
+        {children}
       </div>
     </div>
   );

src/components/Shared/Modal/Modal.stories.jsx

@@ -4,24 +4,9 @@ export default {
   tags: ['autodocs'],
   title: 'component/Shared/Modal',
   component: Modal,
-  argTypes: {
-    onConfirm: { action: 'On Modal confirm' },
-    onChange: { action: 'On No of seats value change' },
-    variant: {
-      control: { type: 'select' },
-      options: ['confirm', 'input']
-    },
-    onChange: {
-      action: 'onchange'
-    },
-    onConfirm: {
-      action: 'onconfirmm'
-    }
-  }
+  argTypes: {}
 };
 
 export const Default = {
-  args: {
-    variant: 'input'
-  }
+  args: {}
 };

src/components/Shared/Modal/styles.module.css

@@ -19,6 +19,8 @@
   border-radius: 10px;
   padding: 1rem 1.5rem;
   box-sizing: border-box;
+  min-width: 300px;
+  min-height: 150px;
 }
 
 .btn-wrapper {
@@ -27,7 +29,7 @@
   gap: 1rem;
   margin: 1rem 0;
 }
-.flex-direction{
+.flex-direction {
   flex-direction: column;
 }
 

src/components/TopLevel/ConfirmSeatContent/ConfirmSeatContent.stories.jsx

+import SeatConfirmationContent from './Index';
+
+export default {
+  title: 'Component/TopLevel/ConfirmationModal',
+  tags: ['autodocs'],
+  component: SeatConfirmationContent,
+  argTypes: {
+    onConfirm: { action: 'onConfirm' }
+  }
+};
+
+export const ConfirmationModal = {};

src/components/TopLevel/ConfirmSeatContent/Index.jsx

+import Button from '../../Base/Button/Index';
+import styles from './styles.module.css';
+
+const Index = ({ onConfirm }) => {
+  return (
+    <>
+      <h2 className={styles['modal-title']}>Confirm Your Selection</h2>
+      <p className={styles['modal-title']}>
+        Please confirm to proceed with your booking.
+      </p>
+      <div className={styles['btn-wrapper']}>
+        <Button size={'md'} onClick={onConfirm}>
+          Confirm
+        </Button>
+      </div>
+    </>
+  );
+};
+
+export default Index;

src/components/TopLevel/ConfirmSeatContent/styles.module.css

+.btn-wrapper {
+  display: flex;
+  gap: 1rem;
+  margin: 1rem 0;
+  flex-direction: column;
+}
+
+.modal-title {
+  font-family: 'Poppins-Medium';
+  font-weight: 500;
+}

src/components/TopLevel/Login/Login.stories.jsx

@@ -4,7 +4,7 @@ export default {
   title: 'component/TopLevel/Login',
   component: Login,
   argTypes: {
-    handleSubmit: { action: 'Form Value' }
+    onSubmit: { action: 'Form Value' }
   }
 };
 

src/components/TopLevel/SeatSelectionContent/Index.jsx

+import Input from '../../Base/Input/Index';
+import Button from '../../Base/Button/Index';
+import styles from './styles.module.css';
+
+const Index = ({ onChange, onConfirm, disabled }) => {
+  return (
+    <>
+      <h2 className={styles['modal-title']}>Select Your Seats</h2>
+      <p className={styles['modal-title']}>
+        Please choose how many seats you'd like to book.
+      </p>
+      <Input
+        label={'Number of Seats'}
+        placeholder="Enter number of seats"
+        type="number"
+        max="10"
+        min="1"
+        onChange={(e) => onChange(e.target.value)}
+      />
+      <div className={`${styles['btn-wrapper']} ${styles['flex-direction']}`}>
+        <Button size={'md'} onClick={onConfirm} disabled={disabled}>
+          Confirm
+        </Button>
+      </div>
+    </>
+  );
+};
+
+export default Index;

src/components/TopLevel/SeatSelectionContent/SeatSelectionContent.stories.jsx

+import SeatSelectionContent from './Index';
+
+export default {
+  title: 'Component/TopLevel/SeatSelectionContent',
+  tags: ['autodocs'],
+  component: SeatSelectionContent,
+  argTypes: {
+    onChange: { action: 'onChange' },
+    onConfirm: { action: 'onConfirm' }
+  }
+};
+
+export const SelectSeatContent = {};

src/components/TopLevel/SeatSelectionContent/styles.module.css

+.btn-wrapper {
+  display: flex;
+  /* justify-content: flex-end; */
+  flex-direction: column;
+  gap: 1rem;
+  margin: 1rem 0;
+  width: 100%;
+}
+
+.modal-title {
+  font-family: 'Poppins-Medium';
+  font-weight: 500;
+}

src/pages/BookingPage/Index.jsx

@@ -12,6 +12,8 @@ import {
 import BookingWrapper from '../../components/Layout/BookingWrapper/Index';
 import Header from '../../components/Layout/Header/Index';
 import Modal from '../../components/Shared/Modal/Index';
+import ConfirmSeatContent from '../../components/TopLevel/ConfirmSeatContent/Index';
+import SeatSelectionContent from '../../components/TopLevel/SeatSelectionContent/Index';
 import Button from '../../components/Base/Button/Index';
 import LegendWrapper from '../../components/TopLevel/LegendWrapper/Index';
 import img from '../../assets/images/power-button_12080802.png';
@@ -30,14 +32,8 @@ const BookingPage = () => {
     useState(false);
   const [noOfSeats, setNoOfSeats] = useState();
   const [buttonState, setButtonState] = useState(true);
-
+  const [modalButtonState, setModalButtonState] = useState(true);
   useEffect(() => {
-    const fetchSelectedSeats = async () => {
-      const data = await getSelectedSeatsApi();
-      const currentData = data?.find((e) => e.userid == userId);
-      setSelectedSeats(data);
-      setCurrentSeats(currentData?.selected);
-    };
     const fetchSeatSelectionCount = async () => {
       const data = await getSeatSelectionCountApi(userId);
       setNoOfSeats(data?.selectionCount);
@@ -47,6 +43,13 @@ const BookingPage = () => {
     setShowSeatsModal(getItem(appConstants.MODAL));
   }, []);
 
+  const fetchSelectedSeats = async () => {
+    const data = await getSelectedSeatsApi();
+    const currentData = data?.find((e) => e.userid == userId);
+    setSelectedSeats(data);
+    setCurrentSeats(currentData?.selected);
+  };
+
   const data = [
     {
       row_id: 1,
@@ -333,7 +336,13 @@ const BookingPage = () => {
   };
 
   const onModalChange = (value) => {
-    setNoOfSeats(value);
+    const numericValue = parseInt(value, 10);
+    setNoOfSeats(numericValue);
+    if (value && value !== '') {
+      setModalButtonState(false);
+    } else {
+      setModalButtonState(true);
+    }
   };
 
   const modalClose = () => {
@@ -341,6 +350,7 @@ const BookingPage = () => {
     if (userId && noOfSeats) {
       saveSeatSelectionCountApi(userId, noOfSeats);
     }
+    fetchSelectedSeats();
     setShowSeatsModal(false);
   };
 
@@ -378,20 +388,23 @@ const BookingPage = () => {
           setButtonState(true);
         }
       } else {
-        if (prev?.length < noOfSeats) {
+        console.log('INSIDE ELSE', prev?.length, noOfSeats);
+        if (prev?.length < noOfSeats || !prev?.length) {
+          console.log('INSIDE IF 22');
+          if (prev) {
             updatedSeats = [...prev, { row: rowId, seat: columnId }];
+          } else {
+            updatedSeats = [{ row: rowId, seat: columnId }];
+          }
           if (updatedSeats?.length === parseInt(noOfSeats)) {
             setButtonState(false);
           } else {
             setButtonState(true);
           }
         } else {
+          console.log('INSIDE ELSE 222');
+
           updatedSeats = prev ? [...prev] : [];
-          // if (updatedSeats?.length === parseInt(noOfSeats)) {
-          //   setButtonState(false);
-          // } else {
-          //   setButtonState(true);
-          // }
         }
       }
 
@@ -420,10 +433,10 @@ const BookingPage = () => {
       };
       await createSeatApi(info);
     }
-    setCurrentSeats([]);
     fetchData();
     setShowSeatsConfirmationModal(false);
   };
+
   return (
     <div className={styles['seat-booking-wrapper']}>
       <img
@@ -442,30 +455,24 @@ const BookingPage = () => {
         />
       </div>
       <div className={styles['btn-wrapper']}>
-        <Button
-          size={'lg'}
-          onClick={onSeatsConfirm}
-          // disabled={currentSeats?.length == noOfSeats ? true : false}>
-          disabled={buttonState}>
+        <Button size={'lg'} onClick={onSeatsConfirm} disabled={buttonState}>
           Confirm
         </Button>
       </div>
       <LegendWrapper />
       {showSeatsModal && (
-        <Modal
-          onConfirm={modalClose}
+        <Modal>
+          <SeatSelectionContent
             onChange={onModalChange}
-          variant="input"
-          value={noOfSeats}
+            onConfirm={modalClose}
+            disabled={modalButtonState}
           />
+        </Modal>
       )}
       {showSeatsConfirmationModal && (
-        <Modal
-          onConfirm={seatsFinal}
-          onChange={onModalChange}
-          variant={'confirm'}
-          onCancel={finalCancel}
-        />
+        <Modal>
+          <ConfirmSeatContent onConfirm={seatsFinal} />
+        </Modal>
       )}
     </div>
   );