{"version":3,"file":"static/js/567.b989e7bd.chunk.js","mappings":"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","sources":["pages/OurProducts.js"],"sourcesContent":["import React, { useState, useEffect, useRef } from \"react\";\r\nimport axios from \"axios\";\r\nimport { Helmet, HelmetProvider } from \"react-helmet-async\";\r\n// import { useForm } from 'react-hook-form';\r\n\r\nimport GoToTop from \"../components/GoToTop\";\r\nimport { Container, Card, Accordion } from \"react-bootstrap\";\r\n\r\nimport Banner from \"../assets/Banners/Products.jpg\";\r\nimport deskbanner from \"../images/products/banner.jpg\";\r\nimport mbbanner from \"../images/products/mbbanner.png\";\r\nimport \"./OurProducts.scss\";\r\nimport AOS from \"aos\";\r\nimport \"aos/dist/aos.css\";\r\nimport Spinner from \"../images/loader.gif\";\r\nimport { imgUrlData, urlData } from \"../urlData\";\r\n\r\nimport MetaDecorator from \"../componentsnew/MetaDecorator/MetaDecorator\";\r\nimport { downloadIcon, productPDF } from \"../images\";\r\nimport { useWindowSize } from \"react-use\";\r\nimport config from \"../config/config\";\r\n\r\nconst OurProducts = () => {\r\n  //initial productList\r\n  const [bannerData, setBannerData] = useState({});\r\n  const [productList, setProductList] = useState();\r\n  const [filteredProducts, setFilteredProducts] = useState([]);\r\n  const [checkBoxesArray, setcheckBoxesArray] = useState([]);\r\n  const [loading, setLoading] = useState(true);\r\n  const [isChecked, setIsChecked] = useState(true);\r\n  const { width: windowWidth } = useWindowSize();\r\n\r\n  //Fetch products API\r\n  const getProductsData = () => {\r\n    axios\r\n      .get(urlData + \"/product/products\")\r\n      .then((res) => {\r\n        setProductList(res.data);\r\n        setFilteredProducts(res.data);\r\n        let newArrayOfCheckBoxes = res.data.map((item, index) => {\r\n          return item.category;\r\n        });\r\n        newArrayOfCheckBoxes = [...new Set(newArrayOfCheckBoxes)];\r\n        setcheckBoxesArray(newArrayOfCheckBoxes);\r\n        console.log(newArrayOfCheckBoxes);\r\n        setLoading(false);\r\n      })\r\n      .catch((error) => {\r\n        console.log(error, \"error fetching products API\");\r\n        setProductList([]);\r\n        setFilteredProducts([]);\r\n        setcheckBoxesArray([]);\r\n      });\r\n  };\r\n\r\n  //Fetch call to get product banner\r\n  const getProductBanner = () => {\r\n    axios\r\n      .get(urlData + \"/product/banners\")\r\n      .then((res) => {\r\n        setBannerData(res.data[0]);\r\n      })\r\n      .catch((error) => {\r\n        console.log(error, \"error fetching product banner\");\r\n      });\r\n  };\r\n\r\n  // window dimensions\r\n  const { width } = useWindowDimensions();\r\n  useEffect(() => {\r\n    getProductBanner();\r\n    getProductsData();\r\n  }, []);\r\n\r\n  const handleAllRadioBtnChange = (e) => {\r\n    setIsChecked(true);\r\n    if (e.target.value === \"ALL\") {\r\n      setFilteredProducts(productList);\r\n    }\r\n  };\r\n  const handleCategoryChange = (e) => {\r\n    const filterProductsArr = productList.filter(\r\n      (product) => product.category === e.target.value\r\n    );\r\n    setIsChecked(false);\r\n    setFilteredProducts(filterProductsArr);\r\n  };\r\n\r\n  // const applyScroll = () => {\r\n  //   const yOffset = -120;\r\n  // }\r\n  // const handleSubCategoryChange = (e) => {\r\n  //   const filterProductsArr = productList.filter(\r\n  //     (product) => product.subCategory === e.target.value\r\n  //   );\r\n  //   setIsChecked(false);\r\n  //   setFilteredProducts(filterProductsArr);\r\n  // };\r\n\r\n  useEffect(() => {\r\n    AOS.init();\r\n  }, []);\r\n\r\n  // const categoryList = checkBoxesArray.map((value, index) => {\r\n  //   return (\r\n  //     <>\r\n  //       <div key={index} className=\"checkboxContainer py-1\">\r\n  //         <div className=\"boxParent form-group\">\r\n  //           <input\r\n  //             type=\"radio\"\r\n  //             id={value.title}\r\n  //             name=\"cat_filter\"\r\n  //             value={value.title}\r\n  //             onChange={(e) => handleCategoryChange(e)}\r\n  //             className=\"box\"\r\n  //           />\r\n  //           <label htmlFor={value.title} className=\"boxText\">\r\n  //             {value.title}\r\n  //           </label>\r\n  //         </div>\r\n  //       </div>\r\n  //       {value.subcategories.length > 0 &&\r\n  //         value.subcategories.map((subcatgeory, index) => (\r\n  //           <div\r\n  //             key={index}\r\n  //             className=\"checkboxContainer py-1 sub_checkboxContainer\"\r\n  //           >\r\n  //             <div className=\"boxParent form-group\">\r\n  //               <input\r\n  //                 type=\"checkbox\"\r\n  //                 id={subcatgeory.title}\r\n  //                 name=\"cat_filter\"\r\n  //                 value={subcatgeory.title}\r\n  //                 onChange={(e) => handleSubCategoryChange(e)}\r\n  //                 className=\"box\"\r\n  //               />\r\n  //               <label htmlFor={subcatgeory.title} className=\"boxText\">\r\n  //                 {subcatgeory.title}\r\n  //               </label>\r\n  //             </div>\r\n  //           </div>\r\n  //         ))}\r\n  //     </>\r\n  //   );\r\n  // });\r\n\r\n  if (loading) {\r\n    return (\r\n      <div className=\"Spinner\">\r\n        <img src={Spinner} alt=\"spinner\" loading=\"lazy\" />\r\n      </div>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <>\r\n      <MetaDecorator\r\n        metaTitle=\"Laxmi - Products - High Quality, Affordable & Authentic Foods\"\r\n        metaDesc=\"A trusted provider of quality Flour, Beans, Cereals, Rice, Spices and a lot more across North America, helping you stay connected with your culture.\"\r\n        canonicalLink={window.href}\r\n      />\r\n\r\n      <div className=\"MainContent\">\r\n        <div className=\"banner-container\">\r\n          <img\r\n            src={\r\n              width < 768\r\n                ? `${imgUrlData}${bannerData.mobileImageUrl}`\r\n                : `${imgUrlData}${bannerData.desktopImageUrl}`\r\n            }\r\n            alt=\"banner\"\r\n            className=\"banner-img\"\r\n          />\r\n          <h1 className=\"banner-title f-DVB-B-70 our-story-title\">\r\n            {bannerData.text}\r\n          </h1>\r\n        </div>\r\n        <Container className=\"my_container ourproductssection2\">\r\n          <Container className=\"productstock\">\r\n            <span className=\"productsSize\">\r\n              {\" \"}\r\n              {filteredProducts.length} PRODUCTS\r\n            </span>\r\n            <a\r\n              href={productPDF}\r\n              target=\"_blank\"\r\n              className=\"download_cta\"\r\n              rel=\"noreferrer\"\r\n            >\r\n              <span className=\"downloadtext\">downLOAD CATALOgue</span>\r\n              <img\r\n                src={downloadIcon}\r\n                alt=\"download icon\"\r\n                className=\"download_icon\"\r\n              />\r\n            </a>\r\n          </Container>\r\n          <div className=\"row\">\r\n            <div\r\n              className=\"col-lg-3\"\r\n              data-aos=\"fade-right\"\r\n              // data-aos-delay=\"600\"\r\n              data-aos-duration=\"1400\"\r\n            >\r\n              <div className=\"filterByContainer\">\r\n                <Accordion defaultActiveKey=\"0\">\r\n                  <Card>\r\n                    <Card.Header className=\"accordionHeader\">\r\n                      <Accordion.Toggle\r\n                        className=\"accordionToggleHeader\"\r\n                        as={Card.Header}\r\n                        // variant=\"link\"\r\n                        eventKey=\"0\"\r\n                      >\r\n                        Filter By\r\n                      </Accordion.Toggle>\r\n                      <Container className=\"\"></Container>\r\n                    </Card.Header>\r\n                    <Accordion.Collapse eventKey=\"0\">\r\n                      <Card.Body>\r\n                        <Card.Text className=\"text-start px-3 categoriestitle\">\r\n                          Categories\r\n                        </Card.Text>\r\n                        <form className=\"productCategoryForm\">\r\n                          {/* {checkBoxesArray ? ( */}\r\n                          <div\r\n                            key=\"ALLFilterCheckbox\"\r\n                            className=\"checkboxContainer px-3 py-1\"\r\n                          >\r\n                            <div className=\"boxParent form-group\">\r\n                              <input\r\n                                type=\"radio\"\r\n                                id=\"ALL\"\r\n                                name=\"cat_filter\"\r\n                                value=\"ALL\"\r\n                                checked={isChecked ? true : false}\r\n                                onChange={(e) => handleAllRadioBtnChange(e)}\r\n                                className=\"box\"\r\n                              />\r\n                              <label htmlFor=\"ALL\" className=\"boxText\">\r\n                                All\r\n                              </label>\r\n                            </div>\r\n                          </div>\r\n                          {/* // ) : null} */}\r\n                          {/* {checkBoxesArray ?*/}\r\n                          {checkBoxesArray.map((value, index) => {\r\n                            return (\r\n                              <div\r\n                                key={index}\r\n                                className=\"checkboxContainer px-3 py-1\"\r\n                              >\r\n                                <div className=\"boxParent form-group\">\r\n                                  <input\r\n                                    type=\"radio\"\r\n                                    id={value}\r\n                                    name=\"cat_filter\"\r\n                                    value={value}\r\n                                    onChange={(e) => handleCategoryChange(e)}\r\n                                    className=\"box\"\r\n                                  />\r\n                                  <label htmlFor={value} className=\"boxText\">\r\n                                    {value}\r\n                                  </label>\r\n                                </div>\r\n                              </div>\r\n                            );\r\n                          })}\r\n                          {/* : null} */}\r\n                          {/* {categoryList} */}\r\n                        </form>\r\n                      </Card.Body>\r\n                    </Accordion.Collapse>\r\n                  </Card>\r\n                </Accordion>\r\n              </div>\r\n            </div>\r\n            <div className=\"col-lg-9\">\r\n              <div className=\"productsWrapper\">\r\n                {/* <Container className=\"\">\r\n                  <span className=\"productsSize\">\r\n                    {\" \"}\r\n                    {filteredProducts.length} PRODUCTS\r\n                  </span>\r\n                </Container> */}\r\n                {/* <Container className=\"productContainer py-lg-5\"> */}\r\n                <Container className=\"productContainer\">\r\n                  {/* {filteredProducts?  */}\r\n                  {filteredProducts.map((product, index) => {\r\n                    return (\r\n                      <div key={index} className=\"productCardContainer\">\r\n                        <Card\r\n                          className=\"productCard\"\r\n                          data-aos=\"fade-up\"\r\n                          // data-aos-delay=\"600\"\r\n                          data-aos-duration=\"1400\"\r\n                        >\r\n                          <Card.Img\r\n                            className=\"productImage\"\r\n                            src={\r\n                              width < 768\r\n                                ? `${imgUrlData}${product.desktopImageUrl}`\r\n                                : `${imgUrlData}${product.desktopImageUrl}`\r\n                            }\r\n                          />\r\n                          <Card.Body>\r\n                            <Card.Title\r\n                              className=\"productTitle\"\r\n                              // style={{ color: \"#1A1818\" }}\r\n                            >\r\n                              {product.title}\r\n                            </Card.Title>\r\n                            <Card.Text className=\"productDescription\">\r\n                              {product.description}\r\n                            </Card.Text>\r\n                            <Card.Text className=\"productUnit my-2\">\r\n                              {/* Available in {v.unit} */}\r\n                              Available in{\" \"}\r\n                              {product.title == \"Peanuts\"\r\n                                ? `${product.unit} Blanched 100g, 200g, 400g, 2lb, 4lb`\r\n                                : product.unit}\r\n                            </Card.Text>\r\n                          </Card.Body>\r\n                        </Card>\r\n                      </div>\r\n                    );\r\n                  })}\r\n                  {/* // : null} */}\r\n                </Container>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </Container>\r\n\r\n        <GoToTop />\r\n      </div>\r\n    </>\r\n  );\r\n};\r\n\r\nfunction getWindowDimensions() {\r\n  const { innerWidth: width, innerHeight: height } = window;\r\n  return {\r\n    width,\r\n    height,\r\n  };\r\n}\r\n\r\nfunction useWindowDimensions() {\r\n  const [windowDimensions, setWindowDimensions] = useState(\r\n    getWindowDimensions()\r\n  );\r\n\r\n  useEffect(() => {\r\n    function handleResize() {\r\n      setWindowDimensions(getWindowDimensions());\r\n    }\r\n\r\n    window.addEventListener(\"resize\", handleResize);\r\n    return () => window.removeEventListener(\"resize\", handleResize);\r\n  }, []);\r\n\r\n  return windowDimensions;\r\n}\r\n\r\nexport default OurProducts;\r\n"],"names":["getWindowDimensions","innerWidth","width","innerHeight","height","window","OurProducts","bannerData","setBannerData","useState","productList","setProductList","filteredProducts","setFilteredProducts","checkBoxesArray","setcheckBoxesArray","loading","setLoading","isChecked","setIsChecked","windowWidth","useWindowSize","windowDimensions","setWindowDimensions","useEffect","handleResize","addEventListener","removeEventListener","useWindowDimensions","axios","get","urlData","then","res","data","catch","error","console","log","newArrayOfCheckBoxes","map","item","index","category","Set","AOS","_jsx","className","children","src","Spinner","alt","_jsxs","_Fragment","MetaDecorator","metaTitle","metaDesc","canonicalLink","href","concat","imgUrlData","mobileImageUrl","desktopImageUrl","text","Container","length","productPDF","target","rel","downloadIcon","Accordion","defaultActiveKey","Card","Header","Toggle","as","eventKey","Collapse","Body","Text","type","id","name","value","checked","onChange","e","handleAllRadioBtnChange","htmlFor","filterProductsArr","filter","product","handleCategoryChange","Img","Title","title","description","unit","GoToTop"],"sourceRoot":""}