create new component , multiple search

src/Pages/BookingScreen/Components/UtillComponents/MultipleSearch.jsx

@@ -0,0 +1,126 @@
+import React, { useEffect, useState } from "react";
+import { getSession } from "../../../../Services/Others";
+import { useDispatch } from "react-redux";
+import { getmultipleSearch, PostProductSearch } from "../../../../Features/BookingScreen/BookingData/BookingData";
+import Buttons from "../../../../Components/Forms/Buttons";
+
+
+const MultipleSearch = ({ close }) => {
+    const CompId = getSession("CompId");
+    const BranchId = getSession("BranchId");
+    const AppId = getSession("AppId");
+    const dispatch = useDispatch();
+
+
+    const options = [
+        { label: "Product Name", value: "ProdName" },
+        { label: "Product Variant Name", value: "ProdVariantName" },
+        // { label: "Product ID", value: "ProdId" },
+        { label: "One Piece QR", value: "OnePcQR" },
+        { label: "QR Code", value: "QrCode" },
+        { label: "Product Name Code", value: "ProdNameCode" },
+        { label: "Category Name", value: "CategoryName" },
+        { label: "Sub Category Name", value: "SubCategoryName" },
+        { label: "Brand Name", value: "BrandName" },
+    ];
+
+
+    const [selectedValues, setSelectedValues] = useState([]);
+    console.log(selectedValues, 'selectedValuesselectedValues');
+
+    useEffect(() => {
+        GetmultipleSearchData();
+    }, []);
+
+
+    const postMultipleSearch = async () => {
+        if (selectedValues.length === 0) {
+            alert("Please select at least one option!");
+            return;
+        }
+        const data = {
+            CompId: CompId,
+            BranchId: BranchId,
+            AppId: AppId,
+            SearchTerms: selectedValues,
+        };
+        try {
+            const response = await dispatch(PostProductSearch(data)).unwrap();
+            console.log("Search Response:", response);
+            if (response?.data?.statusCode == 1) {
+                setSelectedValues('')
+                close(false);
+            }
+        } catch (error) {
+            console.error("Search Error:", error);
+        }
+    };
+
+
+    const GetmultipleSearchData = async () => {
+        const data = {
+            AppId,
+            CompId,
+            BranchId,
+        };
+
+        try {
+            const response = await dispatch(getmultipleSearch(data)).unwrap();
+
+            if (response?.data?.statusCode === 1) {
+                const selected = response?.data?.data?.[0]?.SearchTermDtl?.map(
+                    (item) => item?.SearchTerm
+                ) || [];
+
+                setSelectedValues(selected);
+            }
+        } catch (error) {
+            console.error("Get Search Terms Error:", error);
+        }
+    };
+
+    return (
+        <>
+            <div>
+                {options.map((item) => (
+                    <label
+                        key={item.value}
+                        style={{
+                            display: "block",
+                            marginBottom: "6px",
+                            cursor: "pointer",
+                            fontSize: "14px",
+                            color: "#333",
+                        }}
+                    >
+                        <input
+                            type="checkbox"
+                            checked={selectedValues.includes(item.value)}
+                            onChange={() => {
+                                setSelectedValues((prev) =>
+                                    prev.includes(item.value)
+                                        ? prev.filter((i) => i !== item.value)
+                                        : [...prev, item.value]
+                                );
+                            }}
+                            style={{ marginRight: "8px" }}
+                        />
+                        {item.label}
+                    </label>
+                ))}
+
+            </div>
+            <div>
+                <Buttons
+                    buttonText={'Submit'}
+                    handleSubmit={postMultipleSearch}
+                    color="901D77"
+                // icon={<PlusOutlined />}
+                />
+            </div>
+
+        </>
+    );
+};
+
+export default MultipleSearch;