tabexseriescomponents 0.0.706 → 0.0.708

package/srcoman/TabexComponents/StaticPages/Filter/Filter copy 2.jsx

@@ -0,0 +1,2888 @@
+// import React, { useEffect, useState, useContext } from 'react';
+// import { Accordion, AccordionItem, AccordionItemHeading, AccordionItemButton, AccordionItemPanel, AccordionItemState } from 'react-accessible-accordion';
+// import filterstyles from '../../../styles/staticpages/filter.module.css';
+// import { css } from 'glamor';
+// import Dropdown from 'react-bootstrap/Dropdown';
+// import { IoMdClose } from '@react-icons/all-files/io/IoMdClose';
+// import { FiChevronUp } from '@react-icons/all-files/fi/FiChevronUp';
+// import { FiChevronDown } from '@react-icons/all-files/fi/FiChevronDown';
+// import { Offcanvas } from 'react-bootstrap';
+// import InputRange from 'react-input-range';
+// import { Imagekitimagecomp } from '../../../Imagekitconfig.jsx';
+// import { ScrollMenu, VisibilityContext } from 'react-horizontal-scrolling-menu';
+// import { defaultstyles, defaultstylestranslated } from '../../../StylesJS/Customstyles';
+// import { CircularProgress, Messaging } from 'react-cssfx-loading';
+
+// const Select = React.lazy(() => import('react-select'));
+
+// const Filter = (props) => {
+//     const lang = props.actions.lang;
+//     const langdetect = props.actions.langdetect;
+//     const productfiltercontext = props.actions.productfiltercontext;
+//     const setproductfiltercontext = props.actions.setproductfiltercontext;
+//     const ProductFilterObjContext = props.actions.ProductFilterObjContext;
+//     const setProductFilterObjContext = props.actions.setProductFilterObjContext;
+//     const authdetailsContext = props.actions.authdetailsContext;
+//     const routingcountext = props.actions.routingcountext;
+//     const StaticPagesLinksContext = props.actions.StaticPagesLinksContext;
+//     const ikimagecredcontext = props.actions.ikimagecredcontext;
+
+//     const fetchTabexCountriesQueryContext = props.actions.fetchTabexCountriesQueryContext;
+//     const FetchQueriesEngineContext = props.actions.FetchQueriesEngineContext;
+//     const setFetchQueriesEngineContext = props.actions.setFetchQueriesEngineContext;
+
+//     const fetchTabexCitiesQueryContext = props.actions.fetchTabexCitiesQueryContext;
+//     const fetchTabexStatesQueryContext = props.actions.fetchTabexStatesQueryContext;
+//     const FetchTabexStatesPayloadobjContext = props.actions.FetchTabexStatesPayloadobjContext;
+//     const setFetchTabexStatesPayloadobjContext = props.actions.setFetchTabexStatesPayloadobjContext;
+
+//     const [sectionproperties, setsectionproperties] = useState('');
+//     const [instfilters, setinstfilters] = useState([...authdetailsContext.instinfo.instfilters]);
+//     const [instcollections, setinstcollections] = useState([...authdetailsContext.instinfo.instcollections]);
+//     const [instcategories, setinstcategories] = useState([...authdetailsContext?.instinfo?.instcategories]);
+//     const [sortby, setSortby] = useState('Sort by');
+//     const [raterangevalue, setraterangevalue] = useState({ min: 0, max: 5 });
+
+//     const timeoutRef = React.useRef(null);
+//     const [otherfilters, setotherfilters] = useState([
+//         {
+//             payloadvalue: 'sortprice',
+//             name: lang.price,
+//             filterarray: [
+//                 { name: lang.pricehightolow, value: 'hightolow', isfilterselected: false },
+//                 { name: lang.pricelowtohigh, value: 'lowtohigh', isfilterselected: false },
+//             ],
+//         },
+//         {
+//             payloadvalue: 'sortdates',
+
+//             name: lang.dates,
+//             filterarray: [
+//                 { name: lang.recent, value: 'recent', isfilterselected: false },
+//                 { name: lang.oldest, value: 'old', isfilterselected: false },
+//             ],
+//         },
+//     ]);
+//     useEffect(() => {
+//         filterupdater();
+//     }, []);
+//     useEffect(() => {
+//         setinstfilters([...authdetailsContext.instinfo.instfilters]);
+//         setinstcollections([...authdetailsContext.instinfo.instcollections]);
+//         setinstcategories([...authdetailsContext?.instinfo?.instcategories]);
+//     }, [authdetailsContext]);
+//     useEffect(() => {
+//         if (props.sectionpropertiesprops != undefined && props.sectionpropertiesprops.length != 0) {
+//             setsectionproperties(props.sectionpropertiesprops);
+//         }
+//     }, [props.sectionpropertiesprops]);
+//     useEffect(() => {
+//         filterupdater();
+//     }, [ProductFilterObjContext]);
+//     React.useEffect(() => {
+//         if (timeoutRef.current !== null) {
+//             clearTimeout(timeoutRef.current);
+//         }
+
+//         timeoutRef.current = setTimeout(() => {
+//             if (raterangevalue.min != 0 || raterangevalue.max != 5) {
+//                 var tempfetchproductsfilerobjcontext = { ...ProductFilterObjContext };
+//                 tempfetchproductsfilerobjcontext.minrate = raterangevalue.min;
+//                 tempfetchproductsfilerobjcontext.maxrate = raterangevalue.max;
+//                 tempfetchproductsfilerobjcontext.page = 0;
+//                 setProductFilterObjContext({ ...tempfetchproductsfilerobjcontext });
+//                 // routingcountext(StaticPagesLinksContext.GeneralProductsComponent, true, encodeURIComponent(JSON.stringify(tempfetchproductsfilerobjcontext)));
+//             }
+//         }, 500);
+//     }, [raterangevalue]);
+//     useEffect(() => {
+//         if (fetchTabexStatesQueryContext.isSuccess) {
+//             if (ProductFilterObjContext.stateid != undefined && ProductFilterObjContext.stateid != null && ProductFilterObjContext.stateid != '' && ProductFilterObjContext.stateid != 'all') {
+//                 var tempFetchTabexStatesPayloadobjContext = { ...FetchTabexStatesPayloadobjContext };
+//                 tempFetchTabexStatesPayloadobjContext.functype = 'cities';
+//                 tempFetchTabexStatesPayloadobjContext.state_id = ProductFilterObjContext.stateid;
+//                 setFetchTabexStatesPayloadobjContext({ ...tempFetchTabexStatesPayloadobjContext });
+//             }
+//         }
+//     }, [fetchTabexStatesQueryContext.isSuccess]);
+//     const filterupdater = () => {
+//         setTimeout(() => {
+//             var tempFetchQueriesEngineContext = { ...FetchQueriesEngineContext };
+//             tempFetchQueriesEngineContext.fetchtabexcountries = true;
+//             setFetchQueriesEngineContext(tempFetchQueriesEngineContext);
+//         }, 100);
+//         if (ProductFilterObjContext.countryid != undefined && ProductFilterObjContext.countryid != null && ProductFilterObjContext.countryid != '' && ProductFilterObjContext.countryid != 'all') {
+//             var tempFetchTabexStatesPayloadobjContext = { ...FetchTabexStatesPayloadobjContext };
+//             tempFetchTabexStatesPayloadobjContext.functype = 'states';
+//             tempFetchTabexStatesPayloadobjContext.country_id = ProductFilterObjContext.countryid;
+//             setFetchTabexStatesPayloadobjContext({ ...tempFetchTabexStatesPayloadobjContext });
+//         }
+
+//         if (instfilters.length != 0) {
+//             var tempinstfilters = [...instfilters];
+//             tempinstfilters?.forEach(function (instfilteritem, instfilterindex) {
+//                 instfilteritem.productvaluesfilter.forEach(function (valefilteritem, valefilteritemindex) {
+//                     valefilteritem.isfilterselected = false;
+//                 });
+//             });
+//             ProductFilterObjContext?.FilterOptions?.forEach(function (filteritem, filterindex) {
+//                 tempinstfilters?.forEach(function (instfilteritem, instfilterindex) {
+//                     instfilteritem?.productvaluesfilter?.forEach(function (valefilteritem, valefilteritemindex) {
+//                         if (filteritem.valueid == valefilteritem.valueid) {
+//                             valefilteritem.isfilterselected = true;
+//                         }
+//                     });
+//                 });
+//             });
+//             setinstfilters([...tempinstfilters]);
+//         }
+//         if (instcategories.length != 0) {
+//             var tempInstcategories = [...instcategories];
+//             tempInstcategories.forEach(function (catitem, catindex) {
+//                 catitem.parentcolletions.forEach(function (parentcolitem, parentcolindex) {
+//                     parentcolitem.collections.forEach(function (colitem, colindex) {
+//                         colitem.isfilterselected = false;
+//                     });
+//                 });
+//             });
+
+//             ProductFilterObjContext?.collections?.forEach(function (filteritem, filterindex) {
+//                 tempInstcategories.forEach(function (catitem, catindex) {
+//                     catitem.parentcolletions.forEach(function (parentcolitem, parentcolindex) {
+//                         parentcolitem.collections.forEach(function (colitem, colindex) {
+//                             if (colitem.collectionid == filteritem) {
+//                                 colitem.isfilterselected = true;
+//                             }
+//                         });
+//                     });
+//                 });
+//             });
+
+//             setinstcategories([...tempInstcategories]);
+//         }
+//         if (instcollections.length != 0) {
+//             var tempInstcollections = [...instcollections];
+//             tempInstcollections.forEach(function (instfilteritem, valefilteritemindex) {
+//                 instfilteritem.isfilterselected = false;
+//             });
+//             ProductFilterObjContext?.collections?.forEach(function (filteritem, filterindex) {
+//                 tempInstcollections?.forEach(function (instfilteritem, instfilterindex) {
+//                     if (instfilteritem.collectionid == filteritem) {
+//                         instfilteritem.isfilterselected = true;
+//                     }
+//                 });
+//             });
+//             setinstcollections([...tempInstcollections]);
+//         }
+//     };
+//     const setfilterfunc = (valueid, valueindex, mainparentindex, type) => {
+//         var tempfetchproductsfilerobjcontext = { ...ProductFilterObjContext };
+//         if (type == 'clearfilters') {
+//             tempfetchproductsfilerobjcontext.FilterOptions = [];
+//         } else {
+//             var FilterExists = false;
+//             tempfetchproductsfilerobjcontext?.FilterOptions?.forEach(function (filteritem, filterindex) {
+//                 if (filteritem.valueid == valueid) {
+//                     FilterExists = true;
+//                     tempfetchproductsfilerobjcontext.FilterOptions.splice(filterindex, 1);
+//                 }
+//             });
+//             if (!FilterExists) {
+//                 tempfetchproductsfilerobjcontext.FilterOptions.push({ valueid: valueid });
+//             }
+//         }
+//         if (tempfetchproductsfilerobjcontext.FilterOptions.length == 0) {
+//             tempfetchproductsfilerobjcontext.isfilter = 0;
+//         } else {
+//             tempfetchproductsfilerobjcontext.isfilter = 1;
+//         }
+//         tempfetchproductsfilerobjcontext.page = 0;
+//         setProductFilterObjContext({ ...tempfetchproductsfilerobjcontext });
+//         filterrouting(tempfetchproductsfilerobjcontext);
+//         // routingcountext(StaticPagesLinksContext.GeneralProductsComponent, true, encodeURIComponent(JSON.stringify(tempfetchproductsfilerobjcontext)));
+//     };
+//     const setCollectionFilterFunc = (collectionid) => {
+//         var tempfetchproductsfilerobjcontext = { ...ProductFilterObjContext };
+//         var CollectionExists = false;
+//         tempfetchproductsfilerobjcontext?.collections?.forEach(function (filteritem, filterindex) {
+//             if (filteritem == collectionid) {
+//                 CollectionExists = true;
+//                 tempfetchproductsfilerobjcontext.collections.splice(filterindex, 1);
+//             }
+//         });
+//         if (!CollectionExists) {
+//             tempfetchproductsfilerobjcontext.collections.push(collectionid);
+//         }
+//         tempfetchproductsfilerobjcontext.page = 0;
+//         setProductFilterObjContext({ ...tempfetchproductsfilerobjcontext });
+//         filterrouting(tempfetchproductsfilerobjcontext);
+//         // routingcountext(StaticPagesLinksContext.GeneralProductsComponent, true, encodeURIComponent(JSON.stringify(tempfetchproductsfilerobjcontext)));
+//     };
+//     const CategoriesFilter = () => {
+//         return (
+//             <div class="col-lg-12 p-0">
+//                 {instcategories?.map((categoryItem, categoryIndex) => {
+//                     if (categoryItem.isinftiler == 1) {
+//                         return (
+//                             <Accordion allowMultipleExpanded={true} allowZeroExpanded={true}>
+//                                 <AccordionItem uuid={categoryIndex}>
+//                                     <AccordionItemHeading>
+//                                         <AccordionItemButton>
+//                                             <div className={filter_cssstyles.titlecontainer + ' row m-0 p-0 mb-1 pl-md-3 pr-md-3 '}>
+//                                                 <div className="col-lg-10 col-md-10 col-sm-10 p-0 d-flex align-items-center justify-content-start">
+//                                                     <p className={filter_cssstyles.categoryName + ' collapsetitle text-capitalize m-0 p-0 '}>
+//                                                         {langdetect == 'en' ? categoryItem.title_en : categoryItem.title_ar}
+//                                                     </p>
+//                                                 </div>
+//                                                 <div className="col-lg-2 col-md-2 col-sm-2 p-0">
+//                                                     <AccordionItemState>
+//                                                         {(state) => {
+//                                                             if (state.expanded == true) {
+//                                                                 return (
+//                                                                     <i className={filter_cssstyles.collapsetitle + ' collapsetitle h-100 d-flex align-items-center justify-content-end   '}>
+//                                                                         <FiChevronDown />
+//                                                                     </i>
+//                                                                 );
+//                                                             } else {
+//                                                                 return (
+//                                                                     <i className={filter_cssstyles.collapsetitle + ' collapsetitle h-100 d-flex align-items-center justify-content-end   '}>
+//                                                                         <FiChevronUp />
+//                                                                     </i>
+//                                                                 );
+//                                                             }
+//                                                         }}
+//                                                     </AccordionItemState>
+//                                                 </div>
+//                                                 <div className="col-lg-12 p-0">
+//                                                     <hr className="mt-3 mb-2" />
+//                                                 </div>
+//                                             </div>
+//                                         </AccordionItemButton>
+//                                     </AccordionItemHeading>
+//                                     <AccordionItemPanel className="p-0">
+//                                         <div className="row mt-0 mb-2 ml-0 mr-0 d-lg-flex">
+//                                             <div class="col-lg-12 mb-3 allcentered">
+//                                                 <p
+//                                                     class={filter_cssstyles.explorebtn + ' m-0 p-0 cursor-pointer text-capitalize '}
+//                                                     style={{ textDecoration: 'underline' }}
+//                                                     onClick={() => {
+//                                                         routingcountext(StaticPagesLinksContext.GeneralProductsComponent, true, 'categories/' + categoryItem.categoryid);
+//                                                     }}
+//                                                 >
+//                                                     {langdetect == 'en' ? sectionproperties.explorebtncontenten : sectionproperties.explorebtncontentar}{' '}
+//                                                     {langdetect == 'en' ? categoryItem.title_en : categoryItem.title_ar}
+//                                                 </p>
+//                                             </div>
+//                                             {authdetailsContext?.instinfo?.instcategories[categoryIndex]?.parentcolletions.map((parentcollectionitem, parentcollectionindex) => {
+//                                                 if (parentcollectionitem.isinftiler == 1) {
+//                                                     return (
+//                                                         <div class="col-lg-12">
+//                                                             <Accordion allowMultipleExpanded={true} allowZeroExpanded={true}>
+//                                                                 <AccordionItem uuid={parentcollectionindex}>
+//                                                                     <AccordionItemHeading>
+//                                                                         <AccordionItemButton>
+//                                                                             <div className={filter_cssstyles.titlecontainer + ' row m-0 p-0 mb-2 pl-md-3 pr-md-3 '}>
+//                                                                                 <div className="col-lg-10 col-md-10 col-sm-10 p-0">
+//                                                                                     <p
+//                                                                                         className={
+//                                                                                             langdetect == 'en'
+//                                                                                                 ? filter_cssstyles.pCollectionName + ' collapsetitle text-capitalize m-0 p-0 '
+//                                                                                                 : filter_cssstyles.pCollectionName + ' collapsetitle text-capitalize m-0 p-0 text-right'
+//                                                                                         }
+//                                                                                     >
+//                                                                                         {langdetect == 'en' ? parentcollectionitem.title_en : parentcollectionitem.title_ar}
+//                                                                                     </p>
+//                                                                                 </div>
+//                                                                                 <div className="col-lg-2 col-md-2 col-sm-2 p-0">
+//                                                                                     <AccordionItemState>
+//                                                                                         {(state) => {
+//                                                                                             if (state.expanded == true) {
+//                                                                                                 return (
+//                                                                                                     <i
+//                                                                                                         className={
+//                                                                                                             filter_cssstyles.collapsetitle +
+//                                                                                                             ' collapsetitle h-100 d-flex align-items-center justify-content-end   '
+//                                                                                                         }
+//                                                                                                     >
+//                                                                                                         <FiChevronDown />
+//                                                                                                     </i>
+//                                                                                                 );
+//                                                                                             } else {
+//                                                                                                 return (
+//                                                                                                     <i
+//                                                                                                         className={
+//                                                                                                             filter_cssstyles.collapsetitle +
+//                                                                                                             ' collapsetitle h-100 d-flex align-items-center justify-content-end   '
+//                                                                                                         }
+//                                                                                                     >
+//                                                                                                         <FiChevronUp />
+//                                                                                                     </i>
+//                                                                                                 );
+//                                                                                             }
+//                                                                                         }}
+//                                                                                     </AccordionItemState>
+//                                                                                 </div>
+//                                                                             </div>
+//                                                                         </AccordionItemButton>
+//                                                                     </AccordionItemHeading>
+//                                                                     <AccordionItemPanel className="p-0">
+//                                                                         <div className="row mt-0 mb-2 ml-0 mr-0 d-lg-flex ">
+//                                                                             <div class="col-lg-12 mb-3 allcentered">
+//                                                                                 <p
+//                                                                                     class={filter_cssstyles.explorebtn + ' m-0 p-0 cursor-pointer text-capitalize '}
+//                                                                                     style={{ textDecoration: 'underline' }}
+//                                                                                     onClick={() => {
+//                                                                                         routingcountext(
+//                                                                                             StaticPagesLinksContext.GeneralProductsComponent,
+//                                                                                             true,
+//                                                                                             'parentcollections/' + parentcollectionitem.parentcollectionid,
+//                                                                                         );
+//                                                                                     }}
+//                                                                                 >
+//                                                                                     {langdetect == 'en' ? sectionproperties.explorebtncontenten : sectionproperties.explorebtncontentar}{' '}
+//                                                                                     {langdetect == 'en' ? parentcollectionitem.title_en : parentcollectionitem.title_ar}
+//                                                                                 </p>
+//                                                                             </div>
+//                                                                             <div className={'col-lg-12 pl-md-3 pr-md-3'}>
+//                                                                                 <div
+//                                                                                     className={
+//                                                                                         langdetect == 'en'
+//                                                                                             ? `${filterstyles.timeline}  ${filterstyles.timelinetrans}` + ' p-sm-0 '
+//                                                                                             : `${filterstyles.timeline} ${filterstyles.timelinetrans}` + ' p-sm-0 '
+//                                                                                     }
+//                                                                                 >
+//                                                                                     {parentcollectionitem?.collections?.map((collectionitem, collectionindex) => {
+//                                                                                         if (collectionitem.isinftiler == 1) {
+//                                                                                             return (
+//                                                                                                 <div
+//                                                                                                     className={
+//                                                                                                         `${filterstyles.border_left_line} ${filterstyles.timelineinnercont} ${
+//                                                                                                             filter_cssstyles.timelineinnercont
+//                                                                                                         }
+//                                                     ${collectionitem.isfilterselected ? `${filter_cssstyles.timelineinnercont_active} ${filterstyles.timelineinnercont_active}` : ''}
+//                                                     ` + ' d-flex align-items-start pb-3 '
+//                                                                                                     }
+//                                                                                                     onClick={() => {
+//                                                                                                         setCollectionFilterFunc(collectionitem.collectionid);
+//                                                                                                     }}
+//                                                                                                 >
+//                                                                                                     <div
+//                                                                                                         className={
+//                                                                                                             ` ${collectionitem.isfilterselected ? filter_cssstyles.btn_item_active : ''} ${
+//                                                                                                                 filterstyles.btn_item
+//                                                                                                             } ${filter_cssstyles.btn_item}` + ' mb-2 d-flex align-items-center '
+//                                                                                                         }
+//                                                                                                     >
+//                                                                                                         <i className="h-100 d-flex align-items-center"></i>
+//                                                                                                     </div>
+//                                                                                                     <div className={langdetect == 'en' ? 'ml-3' : 'mr-3 text-right'}>
+//                                                                                                         <p
+//                                                                                                             className={`${filterstyles.timeline_text} ${filter_cssstyles.timeline_text}` + ' m-0 p-0 '}
+//                                                                                                             style={{
+//                                                                                                                 color: collectionitem.isfilterselected ? sectionproperties.activecat_color : '',
+//                                                                                                             }}
+//                                                                                                         >
+//                                                                                                             {langdetect == 'en' ? collectionitem.title_en : collectionitem.title_ar}
+//                                                                                                         </p>
+//                                                                                                     </div>
+//                                                                                                 </div>
+//                                                                                             );
+//                                                                                         }
+//                                                                                     })}
+//                                                                                 </div>
+//                                                                             </div>
+//                                                                         </div>
+//                                                                     </AccordionItemPanel>
+//                                                                 </AccordionItem>
+//                                                             </Accordion>
+//                                                         </div>
+//                                                     );
+//                                                 }
+//                                             })}
+//                                         </div>
+//                                     </AccordionItemPanel>
+//                                 </AccordionItem>
+//                             </Accordion>
+//                         );
+//                     }
+//                 })}
+//             </div>
+//         );
+//     };
+//     const CollectionsFilter = () => {
+//         return (
+//             <div class="col-lg-12 p-0">
+//                 <Accordion allowMultipleExpanded={true} allowZeroExpanded={true} preExpanded={[0, 1, 2, 3]}>
+//                     <AccordionItem uuid={0}>
+//                         <AccordionItemHeading>
+//                             <AccordionItemButton>
+//                                 <div className={filter_cssstyles.titlecontainer + ' row m-0 p-0 mb-2 pl-md-3 pr-md-3 '}>
+//                                     <div className="col-lg-10 col-md-10 col-sm-10 p-0">
+//                                         <p className={langdetect == 'en' ? filter_cssstyles.collapsetitle + ' m-0 p-0 ' : filter_cssstyles.collapsetitle + ' m-0 p-0 text-right'}>
+//                                             {langdetect == 'en' ? sectionproperties.filtercollectiontitle_en : sectionproperties.filtercollectiontitle_ar}
+//                                         </p>
+//                                     </div>
+//                                     <div className="col-lg-2 col-md-2 col-sm-2 p-0">
+//                                         <AccordionItemState>
+//                                             {(state) => {
+//                                                 if (state.expanded == true) {
+//                                                     return (
+//                                                         <i className={filter_cssstyles.collapsetitle + ' collapsetitle h-100 d-flex align-items-center justify-content-end   '}>
+//                                                             <FiChevronDown />
+//                                                         </i>
+//                                                     );
+//                                                 } else {
+//                                                     return (
+//                                                         <i className={filter_cssstyles.collapsetitle + ' collapsetitle h-100 d-flex align-items-center justify-content-end   '}>
+//                                                             <FiChevronUp />
+//                                                         </i>
+//                                                     );
+//                                                 }
+//                                             }}
+//                                         </AccordionItemState>
+//                                     </div>
+//                                 </div>
+//                             </AccordionItemButton>
+//                         </AccordionItemHeading>
+//                         <AccordionItemPanel className="p-0">
+//                             <div className="row mt-0 mb-2 ml-0 mr-0 d-lg-flex pl-md-3 pr-md-3">
+//                                 <div className={'col-lg-12'}>
+//                                     <div
+//                                         className={
+//                                             langdetect == 'en'
+//                                                 ? `${filterstyles.timeline}  ${filterstyles.timelinetrans}` + ' p-sm-0 '
+//                                                 : `${filterstyles.timeline} ${filterstyles.timelinetrans}` + ' p-sm-0 '
+//                                         }
+//                                     >
+//                                         {instcollections.map((item, index) => {
+//                                             return (
+//                                                 <div
+//                                                     className={
+//                                                         `${filterstyles.border_left_line} ${filterstyles.timelineinnercont} ${filter_cssstyles.timelineinnercont}
+//                                                                         ${item.isfilterselected ? `${filter_cssstyles.timelineinnercont_active} ${filterstyles.timelineinnercont_active}` : ''}
+//                                                                         ` + ' d-flex align-items-start pb-3 '
+//                                                     }
+//                                                     onClick={() => {
+//                                                         setCollectionFilterFunc(item.collectionid);
+//                                                     }}
+//                                                 >
+//                                                     <div
+//                                                         className={
+//                                                             ` ${item.isfilterselected ? filter_cssstyles.btn_item_active : ''} ${filterstyles.btn_item} ${filter_cssstyles.btn_item}` +
+//                                                             ' mb-2 d-flex align-items-center '
+//                                                         }
+//                                                     >
+//                                                         <i className="h-100 d-flex align-items-center"></i>
+//                                                     </div>
+//                                                     <div className={langdetect == 'en' ? 'ml-3' : 'mr-3 text-right'}>
+//                                                         <p
+//                                                             className={`${filterstyles.timeline_text} ${filter_cssstyles.timeline_text}` + ' m-0 p-0 '}
+//                                                             style={{
+//                                                                 color: item.isfilterselected ? sectionproperties.activecat_color : '',
+//                                                             }}
+//                                                         >
+//                                                             {langdetect == 'en' ? item.title_en : item.title_ar}
+//                                                         </p>
+//                                                     </div>
+//                                                 </div>
+//                                             );
+//                                         })}
+//                                     </div>
+//                                 </div>
+//                             </div>
+//                         </AccordionItemPanel>
+//                     </AccordionItem>
+//                     <hr className="mt-3 mb-3" />
+//                 </Accordion>
+//             </div>
+//         );
+//     };
+//     const InstFilters = () => {
+//         return (
+//             <Accordion allowMultipleExpanded={true} allowZeroExpanded={true}>
+//                 {instfilters.map((item, index) => {
+//                     return (
+//                         <>
+//                             <AccordionItem uuid={index}>
+//                                 <AccordionItemHeading>
+//                                     <AccordionItemButton>
+//                                         <div className={filter_cssstyles.titlecontainer + ' row m-0 p-0 mb-2 pl-md-3 pr-md-3 '}>
+//                                             <div className="col-lg-10 col-md-10 col-sm-10 p-0">
+//                                                 <p
+//                                                     className={
+//                                                         langdetect == 'en'
+//                                                             ? filter_cssstyles.collapsetitle + ' collapsetitle m-0 p-0 '
+//                                                             : filter_cssstyles.collapsetitle + ' collapsetitle m-0 p-0 text-right'
+//                                                     }
+//                                                 >
+//                                                     {langdetect == 'en' ? item.optionname : item.optionname_ar}
+//                                                 </p>
+//                                             </div>
+//                                             <div className="col-lg-2 col-md-2 col-sm-2 p-0">
+//                                                 <AccordionItemState>
+//                                                     {(state) => {
+//                                                         if (state.expanded == true) {
+//                                                             return (
+//                                                                 <i className={filter_cssstyles.collapsetitle + ' collapsetitle h-100 d-flex align-items-center justify-content-end   '}>
+//                                                                     <FiChevronDown />
+//                                                                 </i>
+//                                                             );
+//                                                         } else {
+//                                                             return (
+//                                                                 <i className={filter_cssstyles.collapsetitle + ' collapsetitle h-100 d-flex align-items-center justify-content-end   '}>
+//                                                                     <FiChevronUp />
+//                                                                 </i>
+//                                                             );
+//                                                         }
+//                                                     }}
+//                                                 </AccordionItemState>
+//                                             </div>
+//                                         </div>
+//                                     </AccordionItemButton>
+//                                 </AccordionItemHeading>
+//                                 <AccordionItemPanel className="p-0">
+//                                     <div className="row mt-0 mb-2 ml-0 mr-0 d-lg-flex pl-md-3 pr-md-3">
+//                                         <div className={'col-lg-12'}>
+//                                             <div className={langdetect == 'en' ? `${filterstyles.timeline}` + ' p-sm-0 ' : `${filterstyles.timeline} ${filterstyles.timelinetrans}` + ' p-sm-0 '}>
+//                                                 {item.productvaluesfilter.map((valueitem, valueindex) => {
+//                                                     return (
+//                                                         <div
+//                                                             className={
+//                                                                 `${filterstyles.border_left_line} ${filterstyles.timelineinnercont} ${filter_cssstyles.timelineinnercont}
+//                                             ${valueitem.isfilterselected ? `${filter_cssstyles.timelineinnercont_active} ${filterstyles.timelineinnercont_active}` : ''}
+
+//                                                         ` + ' d-flex align-items-start pb-3 '
+//                                                             }
+//                                                             onClick={() => {
+//                                                                 setfilterfunc(valueitem.valueid, valueindex, index, 'assign');
+//                                                             }}
+//                                                         >
+//                                                             <div>
+//                                                                 <div
+//                                                                     className={
+//                                                                         ` ${valueitem.isfilterselected ? filter_cssstyles.btn_item_active : ''} ${filterstyles.btn_item} ${filter_cssstyles.btn_item}` +
+//                                                                         ' mb-2 d-flex align-items-center '
+//                                                                     }
+//                                                                 >
+//                                                                     <i className="h-100 d-flex align-items-center"></i>
+//                                                                 </div>
+//                                                             </div>
+//                                                             <div className={langdetect == 'en' ? 'ml-3' : 'mr-3 text-right'}>
+//                                                                 <p
+//                                                                     className={`${filterstyles.timeline_text} ${filter_cssstyles.timeline_text}` + ' m-0 p-0 '}
+//                                                                     style={{
+//                                                                         color: valueitem.isfilterselected ? sectionproperties.activecat_color : '',
+//                                                                     }}
+//                                                                 >
+//                                                                     {langdetect == 'en' ? valueitem.valuename : valueitem.valuename_ar}
+//                                                                 </p>
+//                                                             </div>
+//                                                         </div>
+//                                                     );
+//                                                 })}
+//                                             </div>
+//                                         </div>
+//                                     </div>
+//                                 </AccordionItemPanel>
+//                             </AccordionItem>
+//                             <hr className="mt-3 mb-3" />
+//                         </>
+//                     );
+//                 })}
+//             </Accordion>
+//         );
+//     };
+//     const filter_cssstyles = {
+//         collapsetitle: css({
+//             fontSize: sectionproperties.filtertitle_fontsize + 'px',
+//             fontWeight: sectionproperties.filtertitle_fontweight,
+//             textTransform: sectionproperties.filtertitle_texttransform,
+//             color: sectionproperties.filtertitle_color,
+//             ':hover': {
+//                 color: sectionproperties.filtertitle_coloronhover,
+//             },
+//         }),
+//         titlecontainer: css({
+//             color: sectionproperties.filtertitle_color,
+//             ':hover .collapsetitle': {
+//                 color: sectionproperties.filtertitle_coloronhover,
+//             },
+//         }),
+//         timeline_text: css({
+//             fontSize: sectionproperties.timeline_text_fontsize + 'px',
+//             fontWeight: sectionproperties.timeline_text_fontweight,
+//             textTransform: sectionproperties.timeline_text_texttransform,
+//             color: sectionproperties.timeline_text_color,
+//             transition: '.3s',
+//             ':hover': {
+//                 color: sectionproperties.timeline_text_coloronhover,
+//             },
+//         }),
+//         btnstyles: css({
+//             color: sectionproperties.generalbtn_textColor,
+//             fontSize: sectionproperties.generalbtn_fontsize + 'px',
+//             textTransform: sectionproperties.generalbtn_texttransform,
+//             width: sectionproperties.generalbtn_width + 'px',
+//             height: sectionproperties.generalbtn_height + 'px',
+//             background: sectionproperties.generalbtn_bgColor,
+//             borderTopLeftRadius: sectionproperties.generalbtn_bordertopleftradius + 'px',
+//             borderTopRightRadius: sectionproperties.generalbtn_bordertoprightradius + 'px',
+//             borderBottomRightRadius: sectionproperties.generalbtn_borderbottomrightradius + 'px',
+//             borderBottomLeftRadius: sectionproperties.generalbtn_borderbottomleftradius + 'px',
+//             fontWeight: sectionproperties.generalbtn_fontweight,
+//             transition: '.3s',
+//             ':hover': {
+//                 background: sectionproperties.generalbtn_bgColoronhover,
+//                 color: sectionproperties.generalbtn_textColoronhover,
+//             },
+//         }),
+//         close_menu_icon_cont: css({
+//             background: sectionproperties.closeSliderBgColor,
+//             width: sectionproperties.closeSliderWidth + 'px',
+//             height: sectionproperties.closeSliderHeight + 'px',
+//             borderRadius: sectionproperties.closeSlider_borderBottomLeftRadius + 'px',
+//             ':hover': {
+//                 background: sectionproperties.closeSliderBgColorHover,
+//             },
+//         }),
+//         horizontalfilter_card: css({
+//             marginBottom: sectionproperties.horizontalfilter_mb + 'px',
+//             marginTop: sectionproperties.horizontalfilter_mt + 'px',
+//             background: sectionproperties.horizontalfilter_cardbg,
+//             border: sectionproperties.horizontalfilter_cardborderwidth + 'px solid ' + sectionproperties.horizontalfilter_cardbordercolor,
+//             boxShadow: sectionproperties.horizontalfilter_cardboxShadow == 'Show' ? sectionproperties.horizontalfilter_cardboxShadowcolor : 'horizontalfilter_cardboxShadow',
+//         }),
+//         btn_item: css({
+//             width: '20px',
+//             height: '20px',
+//             background: sectionproperties.filteritembtn_bgcolor,
+//             ':hover': {
+//                 background: sectionproperties.filteritembtn_bghover,
+//             },
+//         }),
+//         btn_item_active: css({
+//             background: sectionproperties.btn_item_activebgcolor,
+//         }),
+//         timelineinnercont_active: css({
+//             fontWeight: sectionproperties.activecat_fontweight,
+//             color: sectionproperties.activecat_color,
+//         }),
+//         categoryName: css({
+//             color: sectionproperties.filtertitle_color,
+//             fontWeight: sectionproperties.filterCatFontWeight,
+//             fontSize: sectionproperties.filterCatFontSize + 'px',
+//         }),
+//         pCollectionName: css({
+//             color: sectionproperties.filtertitle_color,
+//             fontWeight: sectionproperties.filterPCollFontWeight,
+//             fontSize: sectionproperties.filterPCollFontSize + 'px',
+//         }),
+//         explorebtn: css({
+//             fontSize: sectionproperties.explorebtnfontsize + 'px',
+//             fontWeight: 600,
+//             color: sectionproperties.explorebtncolor,
+//             transition: '.3s',
+//             ':hover': {
+//                 color: sectionproperties.explorebtncoloronhover,
+//             },
+//         }),
+//     };
+//     const filterrouting = (tempfetchproductsfilerobjcontext) => {
+//         const path = window.location.pathname.split('/');
+//         var currentpagepath = path[1];
+//         var pagenamepathinstaticpagelinkcont = '';
+//         for (const key in StaticPagesLinksContext) {
+//             if (StaticPagesLinksContext[key] == currentpagepath) {
+//                 pagenamepathinstaticpagelinkcont = key;
+//             }
+//         }
+//         if (pagenamepathinstaticpagelinkcont != undefined && pagenamepathinstaticpagelinkcont != '') {
+//             routingcountext(StaticPagesLinksContext[pagenamepathinstaticpagelinkcont], true, encodeURIComponent(JSON.stringify(tempfetchproductsfilerobjcontext)));
+//         }
+//     };
+//     const Countriesfilter = () => {
+//         return (
+//             <div class="row m-0 w-100 pl-md-3 pr-md-3">
+//                 <div class="col-lg-12 p-0 mt-3">
+//                     <div class="row m-0 w-100">
+//                         <div class="col-lg-12 p-0 mb-3">
+//                             {fetchTabexCountriesQueryContext?.isFetching && (
+//                                 <div className="w-100 allcentered mt-1">
+//                                     <CircularProgress color="#000" width="20px" height="20px" duration="1s" />
+//                                 </div>
+//                             )}
+
+//                             {!fetchTabexCountriesQueryContext?.isFetching && fetchTabexCountriesQueryContext?.isSuccess && (
+//                                 <Select
+//                                     options={fetchTabexCountriesQueryContext?.data?.data?.countries}
+//                                     getOptionLabel={(option) => {
+//                                         var crname = '';
+//                                         if (langdetect == 'en') {
+//                                             crname = option.name;
+//                                         } else if (langdetect == 'ar') {
+//                                             if (option.name_ar != null) {
+//                                                 crname = option.name_ar;
+//                                             } else {
+//                                                 crname = option.name;
+//                                             }
+//                                         }
+//                                         return crname;
+//                                     }}
+//                                     getOptionValue={(option) => option.id}
+//                                     value={fetchTabexCountriesQueryContext.data.data.countries.filter((option) => option.id == ProductFilterObjContext.countryid)}
+//                                     onChange={(option) => {
+//                                         var tempFetchTabexStatesPayloadobjContext = { ...FetchTabexStatesPayloadobjContext };
+//                                         tempFetchTabexStatesPayloadobjContext.functype = 'states';
+//                                         tempFetchTabexStatesPayloadobjContext.country_id = option.id;
+//                                         setFetchTabexStatesPayloadobjContext({ ...tempFetchTabexStatesPayloadobjContext });
+
+//                                         var tempfetchproductsfilerobjcontext = { ...ProductFilterObjContext };
+//                                         tempfetchproductsfilerobjcontext.countryid = option.id;
+//                                         tempfetchproductsfilerobjcontext.page = 0;
+//                                         setProductFilterObjContext({ ...tempfetchproductsfilerobjcontext });
+//                                         filterrouting(tempfetchproductsfilerobjcontext);
+//                                     }}
+//                                     styles={langdetect == 'en' ? defaultstyles : defaultstylestranslated}
+//                                     placeholder={lang.choosecountry}
+//                                     isSearchable={true}
+//                                 />
+//                             )}
+//                         </div>
+//                         <div class="col-lg-12 mb-3 p-0">
+//                             {fetchTabexStatesQueryContext?.isFetching && (
+//                                 <div className="w-100 allcentered mt-1">
+//                                     <CircularProgress color="#000" width="20px" height="20px" duration="1s" />
+//                                 </div>
+//                             )}
+
+//                             {!fetchTabexStatesQueryContext?.isFetching && fetchTabexStatesQueryContext?.isSuccess && (
+//                                 <Select
+//                                     options={fetchTabexStatesQueryContext?.data?.data?.states}
+//                                     getOptionLabel={(option) => {
+//                                         var crname = '';
+//                                         if (langdetect == 'en') {
+//                                             crname = option.name;
+//                                         } else if (langdetect == 'ar') {
+//                                             if (option.name_ar != null) {
+//                                                 crname = option.name_ar;
+//                                             } else {
+//                                                 crname = option.name;
+//                                             }
+//                                         }
+//                                         return crname;
+//                                     }}
+//                                     getOptionValue={(option) => option.id}
+//                                     value={fetchTabexStatesQueryContext?.data?.data?.states.filter((option) => option.id == ProductFilterObjContext.stateid)}
+//                                     onChange={(option) => {
+//                                         var tempFetchTabexStatesPayloadobjContext = { ...FetchTabexStatesPayloadobjContext };
+//                                         tempFetchTabexStatesPayloadobjContext.functype = 'cities';
+//                                         tempFetchTabexStatesPayloadobjContext.state_id = option.id;
+//                                         setFetchTabexStatesPayloadobjContext({ ...tempFetchTabexStatesPayloadobjContext });
+
+//                                         var tempfetchproductsfilerobjcontext = { ...ProductFilterObjContext };
+//                                         tempfetchproductsfilerobjcontext.stateid = option.id;
+//                                         tempfetchproductsfilerobjcontext.page = 0;
+//                                         setProductFilterObjContext({ ...tempfetchproductsfilerobjcontext });
+//                                         filterrouting(tempfetchproductsfilerobjcontext);
+//                                     }}
+//                                     styles={langdetect == 'en' ? defaultstyles : defaultstylestranslated}
+//                                     placeholder={lang.choosestategov}
+//                                     isSearchable={true}
+//                                 />
+//                             )}
+//                         </div>
+//                         <div class="col-lg-12 mb-3 p-0">
+//                             {fetchTabexCitiesQueryContext?.isFetching && (
+//                                 <div className="w-100 allcentered mt-1">
+//                                     <CircularProgress color="#000" width="20px" height="20px" duration="1s" />
+//                                 </div>
+//                             )}
+
+//                             {!fetchTabexCitiesQueryContext?.isFetching && fetchTabexCitiesQueryContext?.isSuccess && (
+//                                 <Select
+//                                     options={fetchTabexCitiesQueryContext?.data?.data?.cities}
+//                                     getOptionLabel={(option) => {
+//                                         var crname = '';
+//                                         if (langdetect == 'en') {
+//                                             crname = option.name;
+//                                         } else if (langdetect == 'ar') {
+//                                             if (option.name_ar != null) {
+//                                                 crname = option.name_ar;
+//                                             } else {
+//                                                 crname = option.name;
+//                                             }
+//                                         }
+//                                         return crname;
+//                                     }}
+//                                     getOptionValue={(option) => option.id}
+//                                     value={fetchTabexCitiesQueryContext?.data?.data?.cities.filter((option) => option.id == ProductFilterObjContext.cityid)}
+//                                     onChange={(option) => {
+//                                         var tempfetchproductsfilerobjcontext = { ...ProductFilterObjContext };
+//                                         tempfetchproductsfilerobjcontext.cityid = option.id;
+//                                         tempfetchproductsfilerobjcontext.page = 0;
+//                                         setProductFilterObjContext({ ...tempfetchproductsfilerobjcontext });
+//                                         filterrouting(tempfetchproductsfilerobjcontext);
+//                                     }}
+//                                     styles={langdetect == 'en' ? defaultstyles : defaultstylestranslated}
+//                                     placeholder={lang.choosecity}
+//                                     isSearchable={true}
+//                                 />
+//                             )}
+//                         </div>
+//                     </div>
+//                 </div>
+//             </div>
+//         );
+//     };
+//     return (
+//         <div
+//             className={sectionproperties.filterdirection == 'Horizontal' ? 'col-lg-12 p-0 w-100 filter mt-md-0 ' : 'col-lg-12 p-0 w-100 filter mt-md-0 d-md-none'}
+//             style={{ marginTop: sectionproperties.filtersection_mt + 'px' }}
+//         >
+//             {sectionproperties.filterdirection == 'Horizontal' && (
+//                 <div class="row m-0 w-100">
+//                     <div className="col-lg-12 col-md-12 col-sm-12 p-0 d-flex justify-content-start mb-3">
+//                         <p className={langdetect == 'en' ? filter_cssstyles.collapsetitle + ' m-0 p-0 ' : filter_cssstyles.collapsetitle + ' m-0 p-0 text-right'}>
+//                             {langdetect == 'en' ? sectionproperties.filtercollectiontitle_en : sectionproperties.filtercollectiontitle_ar}
+//                         </p>
+//                     </div>
+//                     <div class="col-lg-12 p-0 mb-4">
+//                         <ScrollMenu transitionBehavior={'auto'} wrapperClassName={''} itemClassName={'filtercard'} scrollContainerClassName={'scrollmenuclasssubscrollbar'}>
+//                             {instcollections.map((item, index) => {
+//                                 return (
+//                                     <div
+//                                         className={filter_cssstyles.timeline_text + ' col-xl-12 p-0 col-lg-12 col-md-12 col-sm-12 w-100 cursor-pointer '}
+//                                         onClick={() => {
+//                                             setCollectionFilterFunc(item.collectionid);
+//                                         }}
+//                                         style={{
+//                                             color: item.isfilterselected == true ? 'red' : '',
+//                                         }}
+//                                     >
+//                                         <div class="col-lg-12 allcentered mb-2">
+//                                             <div
+//                                                 style={{
+//                                                     width: 200,
+//                                                     height: 200,
+//                                                 }}
+//                                             >
+//                                                 <Imagekitimagecomp
+//                                                     urlEndpoint={ikimagecredcontext?.ikimageendpoint}
+//                                                     publicKey={ikimagecredcontext?.ikimagepublickey}
+//                                                     path={'/tr:w-' + sectionproperties.imagetr_w + ',h-' + sectionproperties.imagetr_h + '/' + item.collectionlogo}
+//                                                     style={{
+//                                                         width: '100%',
+//                                                         height: '100%',
+//                                                         objectFit: 'contain',
+//                                                     }}
+//                                                     loading="lazy"
+//                                                 />
+//                                             </div>
+//                                         </div>
+//                                         <div class="col-lg-12 allcentered">
+//                                             <p class={' m-0 p-0 '}>{langdetect == 'en' ? item.title_en : item.title_ar}</p>
+//                                         </div>
+//                                     </div>
+//                                 );
+//                             })}
+//                         </ScrollMenu>
+//                     </div>
+//                 </div>
+//             )}
+//             {sectionproperties.filterdirection == 'Vertical' && (
+//                 <div
+//                     className={`${filterstyles.filterslider_container}` + ' pb-md-5 '}
+//                     id="filterslider"
+//                     style={{
+//                         background: sectionproperties.filter_backgroundcolor,
+//                         borderRadius: sectionproperties.filter_borderBottomLeftRadius + 'px',
+//                     }}
+//                 >
+//                     <div className={filter_cssstyles.filteraccordion + ' row m-0 w-100 pt-2 pb-3 filter-accordion '}>
+//                         <div className="col-lg-9 col-md-9 col-sm-9 d-none align-items-center d-md-flex">
+//                             <p
+//                                 className="m-0 p-0  font-16 font-weight-600"
+//                                 style={{
+//                                     color: sectionproperties.filter_titlecolor,
+//                                     fontSize: sectionproperties.filter_titlefontsize + 'px',
+//                                     fontWeight: sectionproperties.filter_titlefontweight,
+//                                     textTransform: sectionproperties.filter_titletextransform,
+//                                 }}
+//                             >
+//                                 {langdetect == 'en' ? 'Filter' : 'فلترة'}
+//                             </p>
+//                         </div>
+//                         <div className="col-lg-3 col-md-3 col-sm-3 d-none d-md-flex align-items-center justify-content-end p-0">
+//                             <div
+//                                 className={`${filterstyles.close_menu_icon_cont} ${filter_cssstyles.close_menu_icon_cont}` + ' d-none d-md-flex align-items-center justify-content-center '}
+//                                 onClick={() => {
+//                                     var element = document.getElementById('filterslider');
+//                                     element.classList.remove(filterstyles.filterslider_container_opened);
+//                                 }}
+//                             >
+//                                 <i className="h-100 d-flex align-items-center justify-content-center">
+//                                     <IoMdClose
+//                                         size={sectionproperties.closeSlider_fontSize}
+//                                         style={{
+//                                             color: sectionproperties.closeSlider_color,
+//                                         }}
+//                                     />
+//                                 </i>
+//                             </div>
+//                         </div>
+//                         {sectionproperties.otherfilters == 'Show' && (
+//                             <div class="row m-0 w-100">
+//                                 <div class="col-lg-12 d-flex justify-content-start">
+//                                     <p
+//                                         className="m-0 p-0 font-16 font-weight-600"
+//                                         style={{
+//                                             color: sectionproperties.filter_titlecolor,
+//                                             fontSize: sectionproperties.filter_titlefontsize + 'px',
+//                                             fontWeight: sectionproperties.filter_titlefontweight,
+//                                             textTransform: sectionproperties.filter_titletextransform,
+//                                         }}
+//                                     >
+//                                         {langdetect == 'en' ? 'Sort By' : 'ترتيب حسب'}
+//                                     </p>
+//                                 </div>
+//                                 <div className="col-lg-12">
+//                                     <hr className="mt-2 mb-3" />
+//                                 </div>
+//                                 {otherfilters.map((item, index) => {
+//                                     return (
+//                                         <div className="col-lg-12 pl-4 pr-4">
+//                                             {/* <div class="dropdowncontainer mr-2 mt-sm-3">
+//                                                 {/* checked={checked}
+//                                                 <input class="dropdown" type="checkbox" id="dropdown" name="dropdown" hidden />
+//                                                 <label
+//                                                     // onClick={() => {
+//                                                     //     setChecked(!checked);
+//                                                     // }}
+//                                                     className={' d-flex justify-content-center align-items-center for-dropdown'}
+//                                                     for="dropdown"
+//                                                     style={{ cursor: 'pointer' }}
+//                                                 >
+//                                                     {sortby}
+//                                                     {/* <i className="bx bx-chevron-down ml-2" style={{ fontSize: '20px' }}></i>
+//                                                 </label>
+//                                                 <div class="dropdownmenu">
+//                                                     {item.filterarray.map((valueitem, valueindex) => {
+//                                                         var ischecked = false;
+//                                                         if (item.payloadvalue == 'sortprice') {
+//                                                             if (valueitem.value == ProductFilterObjContext.sortprice) {
+//                                                                 ischecked = true;
+//                                                             }
+//                                                         } else if (item.payloadvalue == 'sortdates') {
+//                                                             if (valueitem.value == ProductFilterObjContext.sortdates) {
+//                                                                 ischecked = true;
+//                                                             }
+//                                                         }
+//                                                         return (
+//                                                             <p
+//                                                                 class="dropdownlink"
+//                                                                 onClick={() => {
+//                                                                     // setfilterfunc(valueitem.valueid, valueindex, index, 'assign');
+//                                                                     var tempfetchproductsfilerobjcontext = { ...ProductFilterObjContext };
+//                                                                     if (tempfetchproductsfilerobjcontext[item.payloadvalue] == valueitem.value) {
+//                                                                         tempfetchproductsfilerobjcontext[item.payloadvalue] = '';
+//                                                                     } else {
+//                                                                         tempfetchproductsfilerobjcontext[item.payloadvalue] = valueitem.value;
+//                                                                     }
+//                                                                     tempfetchproductsfilerobjcontext.page = 0;
+//                                                                     setProductFilterObjContext({ ...tempfetchproductsfilerobjcontext });
+//                                                                     routingcountext(
+//                                                                         StaticPagesLinksContext.GeneralProductsComponent,
+//                                                                         true,
+//                                                                         encodeURIComponent(JSON.stringify(tempfetchproductsfilerobjcontext)),
+//                                                                     );
+//                                                                     setSortby(valueitem.name);
+//                                                                 }}
+//                                                             >
+//                                                                 {valueitem.name}
+//                                                             </p>
+//                                                         );
+//                                                     })}
+//                                                 </div>
+//                                             </div> */}
+//                                             <Accordion allowMultipleExpanded={true} allowZeroExpanded={true} preExpanded={[0, 1, 2, 3]} style={{ width: '100%' }}>
+//                                                 <AccordionItem uuid={index}>
+//                                                     <AccordionItemHeading>
+//                                                         <AccordionItemButton>
+//                                                             <div className={filter_cssstyles.titlecontainer + ' row m-0 p-0 mb-2 pl-md-3 pr-md-3  '}>
+//                                                                 <div className="col-lg-10 col-md-10 col-sm-10 p-0">
+//                                                                     <p
+//                                                                         className={
+//                                                                             langdetect == 'en'
+//                                                                                 ? filter_cssstyles.collapsetitle + ' m-0 p-0 collapsetitle '
+//                                                                                 : filter_cssstyles.collapsetitle + ' collapsetitle m-0 p-0 text-right'
+//                                                                         }
+//                                                                     >
+//                                                                         {item.name}
+//                                                                     </p>
+//                                                                 </div>
+//                                                                 <div className="col-lg-2 col-md-2 col-sm-2 p-0">
+//                                                                     <AccordionItemState>
+//                                                                         {(state) => {
+//                                                                             if (state.expanded == true) {
+//                                                                                 return (
+//                                                                                     <i
+//                                                                                         className={
+//                                                                                             filter_cssstyles.collapsetitle + ' collapsetitle h-100 d-flex align-items-center justify-content-end   '
+//                                                                                         }
+//                                                                                     >
+//                                                                                         <FiChevronDown />
+//                                                                                     </i>
+//                                                                                 );
+//                                                                             } else {
+//                                                                                 return (
+//                                                                                     <i className={filter_cssstyles.collapsetitle + ' h-100 d-flex align-items-center justify-content-end   '}>
+//                                                                                         <FiChevronUp />
+//                                                                                     </i>
+//                                                                                 );
+//                                                                             }
+//                                                                         }}
+//                                                                     </AccordionItemState>
+//                                                                 </div>
+//                                                             </div>
+//                                                         </AccordionItemButton>
+//                                                     </AccordionItemHeading>
+//                                                     <AccordionItemPanel className="p-0">
+//                                                         <div className="row mt-0 mb-2 ml-0 mr-0 d-lg-flex">
+//                                                             <div className={'col-lg-12'}>
+//                                                                 <div
+//                                                                     className={
+//                                                                         langdetect == 'en'
+//                                                                             ? `${filterstyles.timeline}` + ' p-sm-0 '
+//                                                                             : `${filterstyles.timeline} ${filterstyles.timelinetrans}` + ' p-sm-0 '
+//                                                                     }
+//                                                                 >
+//                                                                     {item.filterarray.map((valueitem, valueindex) => {
+//                                                                         var ischecked = false;
+//                                                                         if (item.payloadvalue == 'sortprice') {
+//                                                                             if (valueitem.value == ProductFilterObjContext.sortprice) {
+//                                                                                 ischecked = true;
+//                                                                             }
+//                                                                         } else if (item.payloadvalue == 'sortdates') {
+//                                                                             if (valueitem.value == ProductFilterObjContext.sortdates) {
+//                                                                                 ischecked = true;
+//                                                                             }
+//                                                                         }
+//                                                                         return (
+//                                                                             <div
+//                                                                                 className={
+//                                                                                     `${filterstyles.border_left_line} ${filterstyles.timelineinnercont} ${filter_cssstyles.timelineinnercont}
+//                                                                 ${ischecked ? `${filter_cssstyles.timelineinnercont_active} ${filterstyles.timelineinnercont_active}` : ''}
+
+//                                                                             ` + ' d-flex align-items-start pb-3 '
+//                                                                                 }
+//                                                                                 onClick={() => {
+//                                                                                     var tempfetchproductsfilerobjcontext = { ...ProductFilterObjContext };
+//                                                                                     if (tempfetchproductsfilerobjcontext[item.payloadvalue] == valueitem.value) {
+//                                                                                         tempfetchproductsfilerobjcontext[item.payloadvalue] = '';
+//                                                                                     } else {
+//                                                                                         tempfetchproductsfilerobjcontext[item.payloadvalue] = valueitem.value;
+//                                                                                     }
+//                                                                                     tempfetchproductsfilerobjcontext.page = 0;
+//                                                                                     setProductFilterObjContext({ ...tempfetchproductsfilerobjcontext });
+
+//                                                                                     filterrouting(tempfetchproductsfilerobjcontext);
+//                                                                                 }}
+//                                                                             >
+//                                                                                 <div>
+//                                                                                     <div
+//                                                                                         className={
+//                                                                                             ` ${ischecked ? filter_cssstyles.btn_item_active : ''} ${filterstyles.btn_item} ${
+//                                                                                                 filter_cssstyles.btn_item
+//                                                                                             }` + ' mb-2 d-flex align-items-center '
+//                                                                                         }
+//                                                                                     >
+//                                                                                         <i className="h-100 d-flex align-items-center"></i>
+//                                                                                     </div>
+//                                                                                 </div>
+//                                                                                 <div className={langdetect == 'en' ? 'ml-3' : 'mr-3 text-right'}>
+//                                                                                     <p
+//                                                                                         className={`${filterstyles.timeline_text} ${filter_cssstyles.timeline_text}` + ' m-0 p-0 '}
+//                                                                                         style={{
+//                                                                                             color: ischecked ? sectionproperties.activecat_color : '',
+//                                                                                         }}
+//                                                                                     >
+//                                                                                         {valueitem.name}
+//                                                                                     </p>
+//                                                                                 </div>
+//                                                                             </div>
+//                                                                         );
+//                                                                     })}
+//                                                                 </div>
+//                                                             </div>
+//                                                         </div>
+//                                                     </AccordionItemPanel>
+//                                                 </AccordionItem>
+//                                             </Accordion>
+//                                         </div>
+//                                     );
+//                                 })}
+//                                 {sectionproperties.showfilterbyrating == 'Show' && (
+//                                     <div className="col-lg-12 pl-4 pr-4">
+//                                         <div className={filter_cssstyles.titlecontainer + ' row m-0 p-0 mb-2 pl-md-3 pr-md-3  '}>
+//                                             <div className="col-lg-12 col-md-12 col-sm-12 p-0 mb-3">
+//                                                 <p
+//                                                     className={
+//                                                         langdetect == 'en'
+//                                                             ? filter_cssstyles.collapsetitle + ' m-0 p-0 collapsetitle '
+//                                                             : filter_cssstyles.collapsetitle + ' collapsetitle m-0 p-0 text-right'
+//                                                     }
+//                                                 >
+//                                                     {langdetect == 'en' ? 'Ratings' : 'التقييمات'}
+//                                                 </p>
+//                                             </div>
+//                                             <div className="col-lg-12 col-md-12 col-sm-12 mb-4">
+//                                                 <InputRange
+//                                                     draggableTrack={true}
+//                                                     formatLabel={(value) => `${value}`}
+//                                                     maxValue={5}
+//                                                     minValue={0}
+//                                                     value={raterangevalue}
+//                                                     onChange={(value) => {
+//                                                         setraterangevalue({ ...value });
+//                                                     }}
+//                                                 />
+//                                             </div>
+//                                         </div>
+//                                     </div>
+//                                 )}
+//                             </div>
+//                         )}
+//                         <div className="col-lg-9 col-md-9 col-sm-9 d-flex align-items-center d-md-none">
+//                             <p
+//                                 className="m-0 p-0 font-16 font-weight-600"
+//                                 style={{
+//                                     color: sectionproperties.filter_titlecolor,
+//                                     fontSize: sectionproperties.filter_titlefontsize + 'px',
+//                                     fontWeight: sectionproperties.filter_titlefontweight,
+//                                     textTransform: sectionproperties.filter_titletextransform,
+//                                 }}
+//                             >
+//                                 {langdetect == 'en' ? 'Filter' : 'فلترة'}
+//                             </p>
+//                         </div>
+//                         <div className="col-lg-3 col-md-3 col-sm-3 d-flex d-md-none align-items-center justify-content-end p-0">
+//                             <div
+//                                 className={`${filterstyles.close_menu_icon_cont} ${filter_cssstyles.close_menu_icon_cont}` + ' d-none d-md-flex align-items-center justify-content-center '}
+//                                 onClick={() => {
+//                                     var element = document.getElementById('filterslider');
+//                                     element.classList.remove(filterstyles.filterslider_container_opened);
+//                                 }}
+//                             >
+//                                 <i className="h-100 d-flex align-items-center justify-content-center">
+//                                     <IoMdClose
+//                                         size={sectionproperties.closeSlider_fontSize}
+//                                         style={{
+//                                             color: sectionproperties.closeSlider_color,
+//                                         }}
+//                                     />
+//                                 </i>
+//                             </div>
+//                         </div>
+//                         <div className="col-lg-12">
+//                             <hr className="mt-2 mb-3" />
+//                         </div>
+//                         <div className={filter_cssstyles.filteraccordion + ' col-lg-12 filter-accordion p-md-0 pl-4 pr-4 '}>
+//                             {sectionproperties.showcountriesfilter == 'Show' && Countriesfilter()}
+//                             {sectionproperties.filterType == 'All' && sectionproperties.showcategoriesfilter == 'Show' && <div class="row m-0 w-100">{CategoriesFilter()}</div>}
+//                             {sectionproperties.filterType == 'Collections' && sectionproperties.showcategoriesfilter == 'Show' && <div class="row m-0 w-100">{CollectionsFilter()}</div>}
+//                             {sectionproperties.showvariantsfilter == 'Show' && InstFilters()}
+//                         </div>
+//                     </div>
+//                 </div>
+//             )}
+//             <div className="col-lg-12">
+//                 <Offcanvas
+//                     show={props?.openFilterSlider}
+//                     onHide={() => {
+//                         props.setopenFilterSlider(false);
+//                     }}
+//                     placement="end"
+//                     scroll={true}
+//                     style={{
+//                         minWidth: '200px',
+//                         background: sectionproperties.filter_backgroundcolor,
+//                         borderRadius: sectionproperties.filter_borderBottomLeftRadius + 'px',
+//                     }}
+//                     backdrop={true}
+//                 >
+//                     <Offcanvas.Header>
+//                         <Offcanvas.Title>
+//                             <div className="row m-0 w-100 mt-2">
+//                                 <div className="col-lg-9 col-md-9 col-sm-9 d-none align-items-center d-md-flex">
+//                                     <p
+//                                         className="m-0 p-0  font-16 font-weight-600"
+//                                         style={{
+//                                             color: sectionproperties.filter_titlecolor,
+//                                             fontSize: sectionproperties.filter_titlefontsize + 'px',
+//                                             fontWeight: sectionproperties.filter_titlefontweight,
+//                                             textTransform: sectionproperties.filter_titletextransform,
+//                                         }}
+//                                     >
+//                                         {langdetect == 'en' ? 'Filter' : 'فلترة'}
+//                                     </p>
+//                                 </div>
+//                                 <div className="col-lg-3 col-md-3 col-sm-3 d-none d-md-flex align-items-center justify-content-end p-0">
+//                                     <div
+//                                         className={`${filterstyles.close_menu_icon_cont} ${filter_cssstyles.close_menu_icon_cont}` + ' d-none d-md-flex align-items-center justify-content-center '}
+//                                         onClick={() => {
+//                                             props.setopenFilterSlider(false);
+//                                         }}
+//                                     >
+//                                         <i className="h-100 d-flex align-items-center justify-content-center">
+//                                             <IoMdClose
+//                                                 size={sectionproperties.closeSlider_fontSize}
+//                                                 style={{
+//                                                     color: sectionproperties.closeSlider_color,
+//                                                 }}
+//                                             />
+//                                         </i>
+//                                     </div>
+//                                 </div>
+//                                 <div class="col-lg-12">
+//                                     <hr class="mt-2 mb-2" />
+//                                 </div>
+//                             </div>
+//                         </Offcanvas.Title>
+//                     </Offcanvas.Header>
+//                     <Offcanvas.Body>
+//                         <div
+//                             className={' pb-md-5 '}
+//                             style={{
+//                                 background: sectionproperties.filter_backgroundcolor,
+//                                 borderRadius: sectionproperties.filter_borderBottomLeftRadius + 'px',
+//                             }}
+//                         >
+//                             <div className={filter_cssstyles.filteraccordion + ' row m-0 w-100 pt-2 pb-3 filter-accordion '}>
+//                                 {sectionproperties.otherfilters == 'Show' &&
+//                                     otherfilters.map((item, index) => {
+//                                         return (
+//                                             <>
+//                                                 <Accordion allowMultipleExpanded={true} allowZeroExpanded={true} preExpanded={[0, 1, 2, 3]} style={{ width: '100%' }}>
+//                                                     <AccordionItem uuid={index}>
+//                                                         <AccordionItemHeading>
+//                                                             <AccordionItemButton>
+//                                                                 <div className={filter_cssstyles.titlecontainer + ' row m-0 p-0 mb-2 pl-md-3 pr-md-3  '}>
+//                                                                     <div className="col-lg-10 col-md-10 col-sm-10 p-0">
+//                                                                         <p
+//                                                                             className={
+//                                                                                 langdetect == 'en'
+//                                                                                     ? filter_cssstyles.collapsetitle + ' m-0 p-0 '
+//                                                                                     : filter_cssstyles.collapsetitle + ' m-0 p-0 text-right'
+//                                                                             }
+//                                                                         >
+//                                                                             {item.name}
+//                                                                         </p>
+//                                                                     </div>
+//                                                                     <div className="col-lg-2 col-md-2 col-sm-2 p-0">
+//                                                                         <AccordionItemState>
+//                                                                             {(state) => {
+//                                                                                 if (state.expanded == true) {
+//                                                                                     return (
+//                                                                                         <i className={filter_cssstyles.collapsetitle + ' h-100 d-flex align-items-center justify-content-end   '}>
+//                                                                                             <FiChevronDown />
+//                                                                                         </i>
+//                                                                                     );
+//                                                                                 } else {
+//                                                                                     return (
+//                                                                                         <i className={filter_cssstyles.collapsetitle + ' h-100 d-flex align-items-center justify-content-end   '}>
+//                                                                                             <FiChevronUp />
+//                                                                                         </i>
+//                                                                                     );
+//                                                                                 }
+//                                                                             }}
+//                                                                         </AccordionItemState>
+//                                                                     </div>
+//                                                                 </div>
+//                                                             </AccordionItemButton>
+//                                                         </AccordionItemHeading>
+//                                                         <AccordionItemPanel className="p-0">
+//                                                             <div className="row mt-0 mb-2 ml-0 mr-0 d-lg-flex">
+//                                                                 <div className={'col-lg-12'}>
+//                                                                     <div
+//                                                                         className={
+//                                                                             langdetect == 'en'
+//                                                                                 ? `${filterstyles.timeline}` + ' p-sm-0 '
+//                                                                                 : `${filterstyles.timeline} ${filterstyles.timelinetrans}` + ' p-sm-0 '
+//                                                                         }
+//                                                                     >
+//                                                                         {item.filterarray.map((valueitem, valueindex) => {
+//                                                                             var ischecked = false;
+//                                                                             if (item.payloadvalue == 'sortprice') {
+//                                                                                 if (valueitem.value == ProductFilterObjContext.sortprice) {
+//                                                                                     ischecked = true;
+//                                                                                 }
+//                                                                             } else if (item.payloadvalue == 'sortdates') {
+//                                                                                 if (valueitem.value == ProductFilterObjContext.sortdates) {
+//                                                                                     ischecked = true;
+//                                                                                 }
+//                                                                             }
+//                                                                             return (
+//                                                                                 <div
+//                                                                                     className={
+//                                                                                         `${filterstyles.border_left_line} ${filterstyles.timelineinnercont} ${filter_cssstyles.timelineinnercont}
+//                                                                 ${ischecked ? `${filter_cssstyles.timelineinnercont_active} ${filterstyles.timelineinnercont_active}` : ''}
+
+//                                                                             ` + ' d-flex align-items-start pb-3 '
+//                                                                                     }
+//                                                                                     onClick={() => {
+//                                                                                         // setfilterfunc(valueitem.valueid, valueindex, index, 'assign');
+//                                                                                         var tempfetchproductsfilerobjcontext = { ...ProductFilterObjContext };
+//                                                                                         if (tempfetchproductsfilerobjcontext[item.payloadvalue] == valueitem.value) {
+//                                                                                             tempfetchproductsfilerobjcontext[item.payloadvalue] = '';
+//                                                                                         } else {
+//                                                                                             tempfetchproductsfilerobjcontext[item.payloadvalue] = valueitem.value;
+//                                                                                         }
+//                                                                                         setProductFilterObjContext({ ...tempfetchproductsfilerobjcontext });
+//                                                                                     }}
+//                                                                                 >
+//                                                                                     <div>
+//                                                                                         <div
+//                                                                                             className={
+//                                                                                                 ` ${ischecked ? filter_cssstyles.btn_item_active : ''} ${filterstyles.btn_item} ${
+//                                                                                                     filter_cssstyles.btn_item
+//                                                                                                 }` + ' mb-2 d-flex align-items-center '
+//                                                                                             }
+//                                                                                         >
+//                                                                                             <i className="h-100 d-flex align-items-center"></i>
+//                                                                                         </div>
+//                                                                                     </div>
+//                                                                                     <div className={langdetect == 'en' ? 'ml-3' : 'mr-3 text-right'}>
+//                                                                                         <p
+//                                                                                             className={`${filterstyles.timeline_text} ${filter_cssstyles.timeline_text}` + ' m-0 p-0 '}
+//                                                                                             style={{
+//                                                                                                 color: ischecked ? sectionproperties.activecat_color : '',
+//                                                                                             }}
+//                                                                                         >
+//                                                                                             {valueitem.name}
+//                                                                                         </p>
+//                                                                                     </div>
+//                                                                                 </div>
+//                                                                             );
+//                                                                         })}
+//                                                                     </div>
+//                                                                 </div>
+//                                                             </div>
+//                                                         </AccordionItemPanel>
+//                                                     </AccordionItem>
+//                                                 </Accordion>
+//                                                 <hr className="mt-3 mb-3" />
+//                                             </>
+//                                         );
+//                                     })}
+//                                 {sectionproperties.otherfilters == 'Show' && (
+//                                     <div className="col-lg-12">
+//                                         <hr className="mt-2 mb-3" />
+//                                     </div>
+//                                 )}
+//                                 <div className={filter_cssstyles.filteraccordion + ' col-lg-12 filter-accordion p-md-0 '}>
+//                                     {sectionproperties.showcountriesfilter == 'Show' && Countriesfilter()}
+//                                     {sectionproperties.filterType == 'All' && sectionproperties.showcategoriesfilter == 'Show' && <div class="row m-0 w-100">{CategoriesFilter()}</div>}
+//                                     {sectionproperties.filterType == 'Collections' && sectionproperties.showcategoriesfilter == 'Show' && <div class="row m-0 w-100">{CollectionsFilter()}</div>}
+//                                     {sectionproperties.showvariantsfilter == 'Show' && InstFilters()}
+//                                 </div>
+//                             </div>
+//                         </div>
+//                     </Offcanvas.Body>
+//                 </Offcanvas>
+//             </div>
+//         </div>
+//     );
+// };
+// export default Filter;
+
+import React, { useEffect, useState, useContext } from 'react';
+import { Accordion, AccordionItem, AccordionItemHeading, AccordionItemButton, AccordionItemPanel, AccordionItemState } from 'react-accessible-accordion';
+import filterstyles from '../../../styles/staticpages/filter.module.css';
+import { css } from 'glamor';
+import Dropdown from 'react-bootstrap/Dropdown';
+import { IoMdClose } from '@react-icons/all-files/io/IoMdClose';
+import { FiChevronUp } from '@react-icons/all-files/fi/FiChevronUp';
+import { FiChevronDown } from '@react-icons/all-files/fi/FiChevronDown';
+import { Offcanvas } from 'react-bootstrap';
+import InputRange from 'react-input-range';
+import { Imagekitimagecomp } from '../../../Imagekitconfig.jsx';
+import { ScrollMenu, VisibilityContext } from 'react-horizontal-scrolling-menu';
+import { defaultstyles, defaultstylestranslated } from '../../../StylesJS/Customstyles';
+import { CircularProgress, Messaging } from 'react-cssfx-loading';
+
+const Select = React.lazy(() => import('react-select'));
+
+const Filter = (props) => {
+    const lang = props.actions.lang;
+    const langdetect = props.actions.langdetect;
+    const productfiltercontext = props.actions.productfiltercontext;
+    const setproductfiltercontext = props.actions.setproductfiltercontext;
+    const ProductFilterObjContext = props.actions.ProductFilterObjContext;
+    const setProductFilterObjContext = props.actions.setProductFilterObjContext;
+    const authdetailsContext = props.actions.authdetailsContext;
+    const routingcountext = props.actions.routingcountext;
+    const StaticPagesLinksContext = props.actions.StaticPagesLinksContext;
+    const ikimagecredcontext = props.actions.ikimagecredcontext;
+
+    const fetchTabexCountriesQueryContext = props.actions.fetchTabexCountriesQueryContext;
+    const FetchQueriesEngineContext = props.actions.FetchQueriesEngineContext;
+    const setFetchQueriesEngineContext = props.actions.setFetchQueriesEngineContext;
+
+    const fetchTabexCitiesQueryContext = props.actions.fetchTabexCitiesQueryContext;
+    const fetchTabexStatesQueryContext = props.actions.fetchTabexStatesQueryContext;
+    const FetchTabexStatesPayloadobjContext = props.actions.FetchTabexStatesPayloadobjContext;
+    const setFetchTabexStatesPayloadobjContext = props.actions.setFetchTabexStatesPayloadobjContext;
+
+    const [sectionproperties, setsectionproperties] = useState('');
+    const [instfilters, setinstfilters] = useState([...authdetailsContext.instinfo.instfilters]);
+    const [collectionstobevisible, setcollectionstobevisible] = useState([]);
+    const [instcollections, setinstcollections] = useState([...authdetailsContext.instinfo.instcollections]);
+    const [instcategories, setinstcategories] = useState([...authdetailsContext?.instinfo?.instcategories]);
+    const [sortby, setSortby] = useState('Sort by');
+    const [raterangevalue, setraterangevalue] = useState({ min: 0, max: 5 });
+
+    const timeoutRef = React.useRef(null);
+    const [otherfilters, setotherfilters] = useState([
+        {
+            payloadvalue: 'sortprice',
+            name: lang.price,
+            filterarray: [
+                { name: lang.pricehightolow, value: 'hightolow', isfilterselected: false },
+                { name: lang.pricelowtohigh, value: 'lowtohigh', isfilterselected: false },
+            ],
+        },
+        {
+            payloadvalue: 'sortdates',
+
+            name: lang.dates,
+            filterarray: [
+                { name: lang.recent, value: 'recent', isfilterselected: false },
+                { name: lang.oldest, value: 'old', isfilterselected: false },
+            ],
+        },
+    ]);
+    useEffect(() => {
+        filterupdater();
+    }, []);
+    useEffect(() => {
+        setinstfilters([...authdetailsContext.instinfo.instfilters]);
+        setinstcollections([...authdetailsContext.instinfo.instcollections]);
+        setinstcategories([...authdetailsContext?.instinfo?.instcategories]);
+    }, [authdetailsContext]);
+    useEffect(() => {
+        if (props.sectionpropertiesprops != undefined && props.sectionpropertiesprops.length != 0) {
+            setsectionproperties(props.sectionpropertiesprops);
+        }
+    }, [props.sectionpropertiesprops]);
+    useEffect(() => {
+        filterupdater();
+    }, [ProductFilterObjContext]);
+    React.useEffect(() => {
+        if (timeoutRef.current !== null) {
+            clearTimeout(timeoutRef.current);
+        }
+
+        timeoutRef.current = setTimeout(() => {
+            if (raterangevalue.min != 0 || raterangevalue.max != 5) {
+                var tempfetchproductsfilerobjcontext = { ...ProductFilterObjContext };
+                tempfetchproductsfilerobjcontext.minrate = raterangevalue.min;
+                tempfetchproductsfilerobjcontext.maxrate = raterangevalue.max;
+                tempfetchproductsfilerobjcontext.page = 0;
+                setProductFilterObjContext({ ...tempfetchproductsfilerobjcontext });
+                // routingcountext(StaticPagesLinksContext.GeneralProductsComponent, true, encodeURIComponent(JSON.stringify(tempfetchproductsfilerobjcontext)));
+            }
+        }, 500);
+    }, [raterangevalue]);
+    useEffect(() => {
+        if (sectionproperties?.filterretreivetype == 'Depend on chosen parent group') {
+            if (ProductFilterObjContext?.collections != undefined && ProductFilterObjContext?.collections != null && Array.isArray(ProductFilterObjContext?.collections)) {
+                var collectiontobevisible = [];
+                var parentidsfound = [];
+                if (ProductFilterObjContext.ProductFetchingType == 'Parent Collection') {
+                    parentidsfound = ProductFilterObjContext?.collections;
+                } else if (ProductFilterObjContext.ProductFetchingType == 'Category') {
+                    instcategories?.forEach(function (catitem, catindex) {
+                        ProductFilterObjContext?.collections?.forEach(function (colitem2, colindex2) {
+                            if (catitem.categoryid == colitem2) {
+                                catitem?.parentcolletions?.forEach(function (parentcolitem, parentcolindex) {
+                                    parentidsfound.push(parentcolitem.parentcollectionid);
+                                });
+                            }
+                        });
+                    });
+                } else {
+                    instcategories?.forEach(function (catitem, catindex) {
+                        catitem?.parentcolletions?.forEach(function (parentcolitem, parentcolindex) {
+                            parentcolitem?.collections?.forEach(function (colitem, colindex) {
+                                ProductFilterObjContext?.collections?.forEach(function (colitem2, colindex2) {
+                                    if (colitem.collectionid == colitem2) {
+                                        parentidsfound.push(parentcolitem.parentcollectionid);
+                                    }
+                                });
+                            });
+                        });
+                    });
+                }
+
+                parentidsfound = parentidsfound.filter((val, id, array) => array.indexOf(val) == id);
+
+                if (parentidsfound?.length != 0) {
+                    instcategories?.forEach(function (catitem, catindex) {
+                        catitem?.parentcolletions?.forEach(function (parentcolitem, parentcolindex) {
+                            parentidsfound?.forEach(function (parentidfounditem, parentidfoundindex) {
+                                if (parentidfounditem == parentcolitem?.parentcollectionid) {
+                                    parentcolitem?.collections?.forEach(function (colitem, colindex) {
+                                        var iscolexists = false;
+                                        collectiontobevisible?.forEach(function (colitemex, colindexex) {
+                                            if (colitemex.collectionid == colitem.collectionid) {
+                                                iscolexists = true;
+                                            }
+                                        });
+                                        if (iscolexists == false) {
+                                            collectiontobevisible.push(colitem);
+                                        }
+                                    });
+                                }
+                            });
+                        });
+                    });
+
+                    if (collectiontobevisible?.length != 0) {
+                        setcollectionstobevisible(collectiontobevisible);
+                    } else {
+                        setcollectionstobevisible(instcollections);
+                    }
+                } else {
+                    setcollectionstobevisible(instcollections);
+                }
+            } else {
+                setcollectionstobevisible(instcollections);
+            }
+        } else {
+            setcollectionstobevisible(instcollections);
+        }
+    }, [ProductFilterObjContext]);
+    useEffect(() => {
+        if (fetchTabexStatesQueryContext.isSuccess) {
+            if (ProductFilterObjContext.stateid != undefined && ProductFilterObjContext.stateid != null && ProductFilterObjContext.stateid != '' && ProductFilterObjContext.stateid != 'all') {
+                var tempFetchTabexStatesPayloadobjContext = { ...FetchTabexStatesPayloadobjContext };
+                tempFetchTabexStatesPayloadobjContext.functype = 'cities';
+                tempFetchTabexStatesPayloadobjContext.state_id = ProductFilterObjContext.stateid;
+                setFetchTabexStatesPayloadobjContext({ ...tempFetchTabexStatesPayloadobjContext });
+            }
+        }
+    }, [fetchTabexStatesQueryContext.isSuccess]);
+    const filterupdater = () => {
+        setTimeout(() => {
+            var tempFetchQueriesEngineContext = { ...FetchQueriesEngineContext };
+            tempFetchQueriesEngineContext.fetchtabexcountries = true;
+            setFetchQueriesEngineContext(tempFetchQueriesEngineContext);
+        }, 100);
+        if (ProductFilterObjContext.countryid != undefined && ProductFilterObjContext.countryid != null && ProductFilterObjContext.countryid != '' && ProductFilterObjContext.countryid != 'all') {
+            var tempFetchTabexStatesPayloadobjContext = { ...FetchTabexStatesPayloadobjContext };
+            tempFetchTabexStatesPayloadobjContext.functype = 'states';
+            tempFetchTabexStatesPayloadobjContext.country_id = ProductFilterObjContext.countryid;
+            setFetchTabexStatesPayloadobjContext({ ...tempFetchTabexStatesPayloadobjContext });
+        }
+
+        if (instfilters.length != 0) {
+            var tempinstfilters = [...instfilters];
+            tempinstfilters?.forEach(function (instfilteritem, instfilterindex) {
+                instfilteritem.productvaluesfilter.forEach(function (valefilteritem, valefilteritemindex) {
+                    valefilteritem.isfilterselected = false;
+                });
+            });
+            ProductFilterObjContext?.FilterOptions?.forEach(function (filteritem, filterindex) {
+                tempinstfilters?.forEach(function (instfilteritem, instfilterindex) {
+                    instfilteritem?.productvaluesfilter?.forEach(function (valefilteritem, valefilteritemindex) {
+                        if (filteritem.valueid == valefilteritem.valueid) {
+                            valefilteritem.isfilterselected = true;
+                        }
+                    });
+                });
+            });
+            setinstfilters([...tempinstfilters]);
+        }
+        if (instcategories.length != 0) {
+            var tempInstcategories = [...instcategories];
+            tempInstcategories.forEach(function (catitem, catindex) {
+                catitem.parentcolletions.forEach(function (parentcolitem, parentcolindex) {
+                    parentcolitem.collections.forEach(function (colitem, colindex) {
+                        colitem.isfilterselected = false;
+                    });
+                });
+            });
+
+            ProductFilterObjContext?.collections?.forEach(function (filteritem, filterindex) {
+                tempInstcategories.forEach(function (catitem, catindex) {
+                    catitem.parentcolletions.forEach(function (parentcolitem, parentcolindex) {
+                        parentcolitem.collections.forEach(function (colitem, colindex) {
+                            if (colitem.collectionid == filteritem) {
+                                colitem.isfilterselected = true;
+                            }
+                        });
+                    });
+                });
+            });
+
+            setinstcategories([...tempInstcategories]);
+        }
+        if (instcollections.length != 0) {
+            var tempInstcollections = [...instcollections];
+            tempInstcollections.forEach(function (instfilteritem, valefilteritemindex) {
+                instfilteritem.isfilterselected = false;
+            });
+            ProductFilterObjContext?.collections?.forEach(function (filteritem, filterindex) {
+                tempInstcollections?.forEach(function (instfilteritem, instfilterindex) {
+                    if (instfilteritem.collectionid == filteritem) {
+                        instfilteritem.isfilterselected = true;
+                    }
+                });
+            });
+            setinstcollections([...tempInstcollections]);
+        }
+    };
+    const setfilterfunc = (valueid, valueindex, mainparentindex, type) => {
+        var tempfetchproductsfilerobjcontext = { ...ProductFilterObjContext };
+        if (type == 'clearfilters') {
+            tempfetchproductsfilerobjcontext.FilterOptions = [];
+        } else {
+            var FilterExists = false;
+            tempfetchproductsfilerobjcontext?.FilterOptions?.forEach(function (filteritem, filterindex) {
+                if (filteritem.valueid == valueid) {
+                    FilterExists = true;
+                    tempfetchproductsfilerobjcontext.FilterOptions.splice(filterindex, 1);
+                }
+            });
+            if (!FilterExists) {
+                tempfetchproductsfilerobjcontext.FilterOptions.push({ valueid: valueid });
+            }
+        }
+        if (tempfetchproductsfilerobjcontext.FilterOptions.length == 0) {
+            tempfetchproductsfilerobjcontext.isfilter = 0;
+        } else {
+            tempfetchproductsfilerobjcontext.isfilter = 1;
+        }
+        tempfetchproductsfilerobjcontext.page = 0;
+        setProductFilterObjContext({ ...tempfetchproductsfilerobjcontext });
+        filterrouting(tempfetchproductsfilerobjcontext);
+        // routingcountext(StaticPagesLinksContext.GeneralProductsComponent, true, encodeURIComponent(JSON.stringify(tempfetchproductsfilerobjcontext)));
+    };
+    const setCollectionFilterFunc = (collectionid) => {
+        var tempfetchproductsfilerobjcontext = { ...ProductFilterObjContext };
+        var CollectionExists = false;
+        tempfetchproductsfilerobjcontext?.collections?.forEach(function (filteritem, filterindex) {
+            if (filteritem == collectionid) {
+                CollectionExists = true;
+                tempfetchproductsfilerobjcontext.collections.splice(filterindex, 1);
+            }
+        });
+        if (!CollectionExists) {
+            tempfetchproductsfilerobjcontext.collections.push(collectionid);
+        }
+
+        tempfetchproductsfilerobjcontext.page = 0;
+        tempfetchproductsfilerobjcontext.ProductFetchingType = 'Random';
+        setProductFilterObjContext({ ...tempfetchproductsfilerobjcontext });
+        filterrouting(tempfetchproductsfilerobjcontext);
+        // routingcountext(StaticPagesLinksContext.GeneralProductsComponent, true, encodeURIComponent(JSON.stringify(tempfetchproductsfilerobjcontext)));
+    };
+    const CategoriesFilter = () => {
+        return (
+            <div class="col-lg-12 p-0">
+                {instcategories?.map((categoryItem, categoryIndex) => {
+                    if (categoryItem.isinftiler == 1) {
+                        return (
+                            <Accordion allowMultipleExpanded={true} allowZeroExpanded={true}>
+                                <AccordionItem uuid={categoryIndex}>
+                                    <AccordionItemHeading>
+                                        <AccordionItemButton>
+                                            <div className={filter_cssstyles.titlecontainer + ' row m-0 p-0 mb-1 pl-md-3 pr-md-3 '}>
+                                                <div className="col-lg-10 col-md-10 col-sm-10 p-0 d-flex align-items-center justify-content-start">
+                                                    <p className={filter_cssstyles.categoryName + ' collapsetitle text-capitalize m-0 p-0 '}>
+                                                        {langdetect == 'en' ? categoryItem.title_en : categoryItem.title_ar}
+                                                    </p>
+                                                </div>
+                                                <div className="col-lg-2 col-md-2 col-sm-2 p-0">
+                                                    <AccordionItemState>
+                                                        {(state) => {
+                                                            if (state.expanded == true) {
+                                                                return (
+                                                                    <i className={filter_cssstyles.collapsetitle + ' collapsetitle h-100 d-flex align-items-center justify-content-end   '}>
+                                                                        <FiChevronDown />
+                                                                    </i>
+                                                                );
+                                                            } else {
+                                                                return (
+                                                                    <i className={filter_cssstyles.collapsetitle + ' collapsetitle h-100 d-flex align-items-center justify-content-end   '}>
+                                                                        <FiChevronUp />
+                                                                    </i>
+                                                                );
+                                                            }
+                                                        }}
+                                                    </AccordionItemState>
+                                                </div>
+                                                <div className="col-lg-12 p-0">
+                                                    <hr className="mt-3 mb-2" />
+                                                </div>
+                                            </div>
+                                        </AccordionItemButton>
+                                    </AccordionItemHeading>
+                                    <AccordionItemPanel className="p-0">
+                                        <div className="row mt-0 mb-2 ml-0 mr-0 d-lg-flex">
+                                            <div class="col-lg-12 mb-3 allcentered">
+                                                <p
+                                                    class={filter_cssstyles.explorebtn + ' m-0 p-0 cursor-pointer text-capitalize '}
+                                                    style={{ textDecoration: 'underline' }}
+                                                    onClick={() => {
+                                                        routingcountext(StaticPagesLinksContext.GeneralProductsComponent, true, 'categories/' + categoryItem.categoryid);
+                                                    }}
+                                                >
+                                                    {langdetect == 'en' ? sectionproperties.explorebtncontenten : sectionproperties.explorebtncontentar}{' '}
+                                                    {langdetect == 'en' ? categoryItem.title_en : categoryItem.title_ar}
+                                                </p>
+                                            </div>
+                                            {authdetailsContext?.instinfo?.instcategories[categoryIndex]?.parentcolletions.map((parentcollectionitem, parentcollectionindex) => {
+                                                if (parentcollectionitem.isinftiler == 1) {
+                                                    return (
+                                                        <div class="col-lg-12">
+                                                            <Accordion allowMultipleExpanded={true} allowZeroExpanded={true}>
+                                                                <AccordionItem uuid={parentcollectionindex}>
+                                                                    <AccordionItemHeading>
+                                                                        <AccordionItemButton>
+                                                                            <div className={filter_cssstyles.titlecontainer + ' row m-0 p-0 mb-2 pl-md-3 pr-md-3 '}>
+                                                                                <div className="col-lg-10 col-md-10 col-sm-10 p-0">
+                                                                                    <p
+                                                                                        className={
+                                                                                            langdetect == 'en'
+                                                                                                ? filter_cssstyles.pCollectionName + ' collapsetitle text-capitalize m-0 p-0 '
+                                                                                                : filter_cssstyles.pCollectionName + ' collapsetitle text-capitalize m-0 p-0 text-right'
+                                                                                        }
+                                                                                    >
+                                                                                        {langdetect == 'en' ? parentcollectionitem.title_en : parentcollectionitem.title_ar}
+                                                                                    </p>
+                                                                                </div>
+                                                                                <div className="col-lg-2 col-md-2 col-sm-2 p-0">
+                                                                                    <AccordionItemState>
+                                                                                        {(state) => {
+                                                                                            if (state.expanded == true) {
+                                                                                                return (
+                                                                                                    <i
+                                                                                                        className={
+                                                                                                            filter_cssstyles.collapsetitle +
+                                                                                                            ' collapsetitle h-100 d-flex align-items-center justify-content-end   '
+                                                                                                        }
+                                                                                                    >
+                                                                                                        <FiChevronDown />
+                                                                                                    </i>
+                                                                                                );
+                                                                                            } else {
+                                                                                                return (
+                                                                                                    <i
+                                                                                                        className={
+                                                                                                            filter_cssstyles.collapsetitle +
+                                                                                                            ' collapsetitle h-100 d-flex align-items-center justify-content-end   '
+                                                                                                        }
+                                                                                                    >
+                                                                                                        <FiChevronUp />
+                                                                                                    </i>
+                                                                                                );
+                                                                                            }
+                                                                                        }}
+                                                                                    </AccordionItemState>
+                                                                                </div>
+                                                                            </div>
+                                                                        </AccordionItemButton>
+                                                                    </AccordionItemHeading>
+                                                                    <AccordionItemPanel className="p-0">
+                                                                        <div className="row mt-0 mb-2 ml-0 mr-0 d-lg-flex ">
+                                                                            <div class="col-lg-12 mb-3 allcentered">
+                                                                                <p
+                                                                                    class={filter_cssstyles.explorebtn + ' m-0 p-0 cursor-pointer text-capitalize '}
+                                                                                    style={{ textDecoration: 'underline' }}
+                                                                                    onClick={() => {
+                                                                                        routingcountext(
+                                                                                            StaticPagesLinksContext.GeneralProductsComponent,
+                                                                                            true,
+                                                                                            'parentcollections/' + parentcollectionitem.parentcollectionid,
+                                                                                        );
+                                                                                    }}
+                                                                                >
+                                                                                    {langdetect == 'en' ? sectionproperties.explorebtncontenten : sectionproperties.explorebtncontentar}{' '}
+                                                                                    {langdetect == 'en' ? parentcollectionitem.title_en : parentcollectionitem.title_ar}
+                                                                                </p>
+                                                                            </div>
+                                                                            <div className={'col-lg-12 pl-md-3 pr-md-3'}>
+                                                                                <div
+                                                                                    className={
+                                                                                        langdetect == 'en'
+                                                                                            ? `${filterstyles.timeline}  ${filterstyles.timelinetrans}` + ' p-sm-0 '
+                                                                                            : `${filterstyles.timeline} ${filterstyles.timelinetrans}` + ' p-sm-0 '
+                                                                                    }
+                                                                                >
+                                                                                    {parentcollectionitem?.collections?.map((collectionitem, collectionindex) => {
+                                                                                        if (collectionitem.isinftiler == 1) {
+                                                                                            return (
+                                                                                                <div
+                                                                                                    className={
+                                                                                                        `${filterstyles.border_left_line} ${filterstyles.timelineinnercont} ${
+                                                                                                            filter_cssstyles.timelineinnercont
+                                                                                                        }
+                                                    ${collectionitem.isfilterselected ? `${filter_cssstyles.timelineinnercont_active} ${filterstyles.timelineinnercont_active}` : ''}
+                                                    ` + ' d-flex align-items-start pb-3 '
+                                                                                                    }
+                                                                                                    onClick={() => {
+                                                                                                        setCollectionFilterFunc(collectionitem.collectionid);
+                                                                                                    }}
+                                                                                                >
+                                                                                                    <div
+                                                                                                        className={
+                                                                                                            ` ${collectionitem.isfilterselected ? filter_cssstyles.btn_item_active : ''} ${
+                                                                                                                filterstyles.btn_item
+                                                                                                            } ${filter_cssstyles.btn_item}` + ' mb-2 d-flex align-items-center '
+                                                                                                        }
+                                                                                                    >
+                                                                                                        <i className="h-100 d-flex align-items-center"></i>
+                                                                                                    </div>
+                                                                                                    <div className={langdetect == 'en' ? 'ml-3' : 'mr-3 text-right'}>
+                                                                                                        <p
+                                                                                                            className={`${filterstyles.timeline_text} ${filter_cssstyles.timeline_text}` + ' m-0 p-0 '}
+                                                                                                            style={{
+                                                                                                                color: collectionitem.isfilterselected ? sectionproperties.activecat_color : '',
+                                                                                                            }}
+                                                                                                        >
+                                                                                                            {langdetect == 'en' ? collectionitem.title_en : collectionitem.title_ar}
+                                                                                                        </p>
+                                                                                                    </div>
+                                                                                                </div>
+                                                                                            );
+                                                                                        }
+                                                                                    })}
+                                                                                </div>
+                                                                            </div>
+                                                                        </div>
+                                                                    </AccordionItemPanel>
+                                                                </AccordionItem>
+                                                            </Accordion>
+                                                        </div>
+                                                    );
+                                                }
+                                            })}
+                                        </div>
+                                    </AccordionItemPanel>
+                                </AccordionItem>
+                            </Accordion>
+                        );
+                    }
+                })}
+            </div>
+        );
+    };
+    const CollectionsFilter = () => {
+        return (
+            <div class="col-lg-12 p-0">
+                <Accordion allowMultipleExpanded={true} allowZeroExpanded={true} preExpanded={[0, 1, 2, 3]}>
+                    <AccordionItem uuid={0}>
+                        <AccordionItemHeading>
+                            <AccordionItemButton>
+                                <div className={filter_cssstyles.titlecontainer + ' row m-0 p-0 mb-2 pl-md-3 pr-md-3 '}>
+                                    <div className="col-lg-10 col-md-10 col-sm-10 p-0">
+                                        <p className={langdetect == 'en' ? filter_cssstyles.collapsetitle + ' m-0 p-0 ' : filter_cssstyles.collapsetitle + ' m-0 p-0 text-right'}>
+                                            {langdetect == 'en' ? sectionproperties.filtercollectiontitle_en : sectionproperties.filtercollectiontitle_ar}
+                                        </p>
+                                    </div>
+                                    <div className="col-lg-2 col-md-2 col-sm-2 p-0">
+                                        <AccordionItemState>
+                                            {(state) => {
+                                                if (state.expanded == true) {
+                                                    return (
+                                                        <i className={filter_cssstyles.collapsetitle + ' collapsetitle h-100 d-flex align-items-center justify-content-end   '}>
+                                                            <FiChevronDown />
+                                                        </i>
+                                                    );
+                                                } else {
+                                                    return (
+                                                        <i className={filter_cssstyles.collapsetitle + ' collapsetitle h-100 d-flex align-items-center justify-content-end   '}>
+                                                            <FiChevronUp />
+                                                        </i>
+                                                    );
+                                                }
+                                            }}
+                                        </AccordionItemState>
+                                    </div>
+                                </div>
+                            </AccordionItemButton>
+                        </AccordionItemHeading>
+                        <AccordionItemPanel className="p-0">
+                            <div className="row mt-0 mb-2 ml-0 mr-0 d-lg-flex pl-md-3 pr-md-3">
+                                <div className={'col-lg-12'}>
+                                    <div
+                                        className={
+                                            langdetect == 'en'
+                                                ? `${filterstyles.timeline}  ${filterstyles.timelinetrans}` + ' p-sm-0 '
+                                                : `${filterstyles.timeline} ${filterstyles.timelinetrans}` + ' p-sm-0 '
+                                        }
+                                    >
+                                        {collectionstobevisible.map((item, index) => {
+                                            return (
+                                                <div
+                                                    className={
+                                                        `${filterstyles.border_left_line} ${filterstyles.timelineinnercont} ${filter_cssstyles.timelineinnercont}
+                                                                        ${item.isfilterselected ? `${filter_cssstyles.timelineinnercont_active} ${filterstyles.timelineinnercont_active}` : ''}
+                                                                        ` + ' d-flex align-items-start pb-3 '
+                                                    }
+                                                    onClick={() => {
+                                                        setCollectionFilterFunc(item.collectionid);
+                                                    }}
+                                                >
+                                                    <div
+                                                        className={
+                                                            ` ${item.isfilterselected ? filter_cssstyles.btn_item_active : ''} ${filterstyles.btn_item} ${filter_cssstyles.btn_item}` +
+                                                            ' mb-2 d-flex align-items-center '
+                                                        }
+                                                    >
+                                                        <i className="h-100 d-flex align-items-center"></i>
+                                                    </div>
+                                                    <div className={langdetect == 'en' ? 'ml-3' : 'mr-3 text-right'}>
+                                                        <p
+                                                            className={`${filterstyles.timeline_text} ${filter_cssstyles.timeline_text}` + ' m-0 p-0 '}
+                                                            style={{
+                                                                color: item.isfilterselected ? sectionproperties.activecat_color : '',
+                                                            }}
+                                                        >
+                                                            {langdetect == 'en' ? item.title_en : item.title_ar}
+                                                        </p>
+                                                    </div>
+                                                </div>
+                                            );
+                                        })}
+                                    </div>
+                                    {sectionproperties.showshowallbtn == 'Show' && (
+                                        <div class="col-lg-12 allcentered">
+                                            <div class={filter_cssstyles.showallbtn} style={{}}>
+                                                <p
+                                                    class="m-0 p-0"
+                                                    onClick={() => {
+                                                        setcollectionstobevisible(instcollections);
+                                                    }}
+                                                    // style={{ cursor: 'pointer' }}
+                                                >
+                                                    {langdetect == 'en' ? sectionproperties.showalltexten : sectionproperties.showalltextar}
+                                                </p>
+                                            </div>
+                                        </div>
+                                    )}
+                                </div>
+                            </div>
+                        </AccordionItemPanel>
+                    </AccordionItem>
+                    <hr className="mt-3 mb-3" />
+                </Accordion>
+            </div>
+        );
+    };
+    const InstFilters = () => {
+        return (
+            <Accordion allowMultipleExpanded={true} allowZeroExpanded={true}>
+                {instfilters.map((item, index) => {
+                    return (
+                        <>
+                            <AccordionItem uuid={index}>
+                                <AccordionItemHeading>
+                                    <AccordionItemButton>
+                                        <div className={filter_cssstyles.titlecontainer + ' row m-0 p-0 mb-2 pl-md-3 pr-md-3 '}>
+                                            <div className="col-lg-10 col-md-10 col-sm-10 p-0">
+                                                <p
+                                                    className={
+                                                        langdetect == 'en'
+                                                            ? filter_cssstyles.collapsetitle + ' collapsetitle m-0 p-0 '
+                                                            : filter_cssstyles.collapsetitle + ' collapsetitle m-0 p-0 text-right'
+                                                    }
+                                                >
+                                                    {langdetect == 'en' ? item.optionname : item.optionname_ar}
+                                                </p>
+                                            </div>
+                                            <div className="col-lg-2 col-md-2 col-sm-2 p-0">
+                                                <AccordionItemState>
+                                                    {(state) => {
+                                                        if (state.expanded == true) {
+                                                            return (
+                                                                <i className={filter_cssstyles.collapsetitle + ' collapsetitle h-100 d-flex align-items-center justify-content-end   '}>
+                                                                    <FiChevronDown />
+                                                                </i>
+                                                            );
+                                                        } else {
+                                                            return (
+                                                                <i className={filter_cssstyles.collapsetitle + ' collapsetitle h-100 d-flex align-items-center justify-content-end   '}>
+                                                                    <FiChevronUp />
+                                                                </i>
+                                                            );
+                                                        }
+                                                    }}
+                                                </AccordionItemState>
+                                            </div>
+                                        </div>
+                                    </AccordionItemButton>
+                                </AccordionItemHeading>
+                                <AccordionItemPanel className="p-0">
+                                    <div className="row mt-0 mb-2 ml-0 mr-0 d-lg-flex pl-md-3 pr-md-3">
+                                        <div className={'col-lg-12'}>
+                                            <div className={langdetect == 'en' ? `${filterstyles.timeline}` + ' p-sm-0 ' : `${filterstyles.timeline} ${filterstyles.timelinetrans}` + ' p-sm-0 '}>
+                                                {item.productvaluesfilter.map((valueitem, valueindex) => {
+                                                    return (
+                                                        <div
+                                                            className={
+                                                                `${filterstyles.border_left_line} ${filterstyles.timelineinnercont} ${filter_cssstyles.timelineinnercont}
+                                            ${valueitem.isfilterselected ? `${filter_cssstyles.timelineinnercont_active} ${filterstyles.timelineinnercont_active}` : ''}
+                                                     
+                                                        ` + ' d-flex align-items-start pb-3 '
+                                                            }
+                                                            onClick={() => {
+                                                                setfilterfunc(valueitem.valueid, valueindex, index, 'assign');
+                                                            }}
+                                                        >
+                                                            <div>
+                                                                <div
+                                                                    className={
+                                                                        ` ${valueitem.isfilterselected ? filter_cssstyles.btn_item_active : ''} ${filterstyles.btn_item} ${filter_cssstyles.btn_item}` +
+                                                                        ' mb-2 d-flex align-items-center '
+                                                                    }
+                                                                >
+                                                                    <i className="h-100 d-flex align-items-center"></i>
+                                                                </div>
+                                                            </div>
+                                                            <div className={langdetect == 'en' ? 'ml-3' : 'mr-3 text-right'}>
+                                                                <p
+                                                                    className={`${filterstyles.timeline_text} ${filter_cssstyles.timeline_text}` + ' m-0 p-0 '}
+                                                                    style={{
+                                                                        color: valueitem.isfilterselected ? sectionproperties.activecat_color : '',
+                                                                    }}
+                                                                >
+                                                                    {langdetect == 'en' ? valueitem.valuename : valueitem.valuename_ar}
+                                                                </p>
+                                                            </div>
+                                                        </div>
+                                                    );
+                                                })}
+                                            </div>
+                                        </div>
+                                    </div>
+                                </AccordionItemPanel>
+                            </AccordionItem>
+                            <hr className="mt-3 mb-3" />
+                        </>
+                    );
+                })}
+            </Accordion>
+        );
+    };
+    const filter_cssstyles = {
+        collapsetitle: css({
+            fontSize: sectionproperties.filtertitle_fontsize + 'px',
+            fontWeight: sectionproperties.filtertitle_fontweight,
+            textTransform: sectionproperties.filtertitle_texttransform,
+            color: sectionproperties.filtertitle_color,
+            ':hover': {
+                color: sectionproperties.filtertitle_coloronhover,
+            },
+        }),
+        titlecontainer: css({
+            color: sectionproperties.filtertitle_color,
+            ':hover .collapsetitle': {
+                color: sectionproperties.filtertitle_coloronhover,
+            },
+        }),
+        timeline_text: css({
+            fontSize: sectionproperties.timeline_text_fontsize + 'px',
+            fontWeight: sectionproperties.timeline_text_fontweight,
+            textTransform: sectionproperties.timeline_text_texttransform,
+            color: sectionproperties.timeline_text_color,
+            transition: '.3s',
+            ':hover': {
+                color: sectionproperties.timeline_text_coloronhover,
+            },
+        }),
+        btnstyles: css({
+            color: sectionproperties.generalbtn_textColor,
+            fontSize: sectionproperties.generalbtn_fontsize + 'px',
+            textTransform: sectionproperties.generalbtn_texttransform,
+            width: sectionproperties.generalbtn_width + 'px',
+            height: sectionproperties.generalbtn_height + 'px',
+            background: sectionproperties.generalbtn_bgColor,
+            borderTopLeftRadius: sectionproperties.generalbtn_bordertopleftradius + 'px',
+            borderTopRightRadius: sectionproperties.generalbtn_bordertoprightradius + 'px',
+            borderBottomRightRadius: sectionproperties.generalbtn_borderbottomrightradius + 'px',
+            borderBottomLeftRadius: sectionproperties.generalbtn_borderbottomleftradius + 'px',
+            fontWeight: sectionproperties.generalbtn_fontweight,
+            transition: '.3s',
+            ':hover': {
+                background: sectionproperties.generalbtn_bgColoronhover,
+                color: sectionproperties.generalbtn_textColoronhover,
+            },
+        }),
+        close_menu_icon_cont: css({
+            background: sectionproperties.closeSliderBgColor,
+            width: sectionproperties.closeSliderWidth + 'px',
+            height: sectionproperties.closeSliderHeight + 'px',
+            borderRadius: sectionproperties.closeSlider_borderBottomLeftRadius + 'px',
+            ':hover': {
+                background: sectionproperties.closeSliderBgColorHover,
+            },
+        }),
+        horizontalfilter_card: css({
+            marginBottom: sectionproperties.horizontalfilter_mb + 'px',
+            marginTop: sectionproperties.horizontalfilter_mt + 'px',
+            background: sectionproperties.horizontalfilter_cardbg,
+            border: sectionproperties.horizontalfilter_cardborderwidth + 'px solid ' + sectionproperties.horizontalfilter_cardbordercolor,
+            boxShadow: sectionproperties.horizontalfilter_cardboxShadow == 'Show' ? sectionproperties.horizontalfilter_cardboxShadowcolor : 'horizontalfilter_cardboxShadow',
+        }),
+        btn_item: css({
+            width: '20px',
+            height: '20px',
+            background: sectionproperties.filteritembtn_bgcolor,
+            ':hover': {
+                background: sectionproperties.filteritembtn_bghover,
+            },
+        }),
+        btn_item_active: css({
+            background: sectionproperties.btn_item_activebgcolor,
+        }),
+        timelineinnercont_active: css({
+            fontWeight: sectionproperties.activecat_fontweight,
+            color: sectionproperties.activecat_color,
+        }),
+        categoryName: css({
+            color: sectionproperties.filtertitle_color,
+            fontWeight: sectionproperties.filterCatFontWeight,
+            fontSize: sectionproperties.filterCatFontSize + 'px',
+        }),
+        pCollectionName: css({
+            color: sectionproperties.filtertitle_color,
+            fontWeight: sectionproperties.filterPCollFontWeight,
+            fontSize: sectionproperties.filterPCollFontSize + 'px',
+        }),
+        explorebtn: css({
+            fontSize: sectionproperties.explorebtnfontsize + 'px',
+            fontWeight: 600,
+            color: sectionproperties.explorebtncolor,
+            transition: '.3s',
+            ':hover': {
+                color: sectionproperties.explorebtncoloronhover,
+            },
+        }),
+        showallbtn: css({
+            color: sectionproperties.showallcolor,
+            ':hover': {
+                transition: '.3s',
+                cursor: 'pointer',
+                color: sectionproperties.showallcolorhover,
+            },
+        }),
+    };
+    const filterrouting = (tempfetchproductsfilerobjcontext) => {
+        const path = window.location.pathname.split('/');
+        var currentpagepath = path[1];
+        var pagenamepathinstaticpagelinkcont = '';
+        for (const key in StaticPagesLinksContext) {
+            if (StaticPagesLinksContext[key] == currentpagepath) {
+                pagenamepathinstaticpagelinkcont = key;
+            }
+        }
+        if (pagenamepathinstaticpagelinkcont != undefined && pagenamepathinstaticpagelinkcont != '') {
+            routingcountext(StaticPagesLinksContext[pagenamepathinstaticpagelinkcont], true, encodeURIComponent(JSON.stringify(tempfetchproductsfilerobjcontext)));
+        }
+    };
+    const Countriesfilter = () => {
+        return (
+            <div class="row m-0 w-100 pl-md-3 pr-md-3">
+                <div class="col-lg-12 p-0 mt-3">
+                    <div class="row m-0 w-100">
+                        <div class="col-lg-12 p-0 mb-3">
+                            {fetchTabexCountriesQueryContext?.isFetching && (
+                                <div className="w-100 allcentered mt-1">
+                                    <CircularProgress color="#000" width="20px" height="20px" duration="1s" />
+                                </div>
+                            )}
+
+                            {!fetchTabexCountriesQueryContext?.isFetching && fetchTabexCountriesQueryContext?.isSuccess && (
+                                <Select
+                                    options={fetchTabexCountriesQueryContext?.data?.data?.countries}
+                                    getOptionLabel={(option) => {
+                                        var crname = '';
+                                        if (langdetect == 'en') {
+                                            crname = option.name;
+                                        } else if (langdetect == 'ar') {
+                                            if (option.name_ar != null) {
+                                                crname = option.name_ar;
+                                            } else {
+                                                crname = option.name;
+                                            }
+                                        }
+                                        return crname;
+                                    }}
+                                    getOptionValue={(option) => option.id}
+                                    value={fetchTabexCountriesQueryContext.data.data.countries.filter((option) => option.id == ProductFilterObjContext.countryid)}
+                                    onChange={(option) => {
+                                        var tempFetchTabexStatesPayloadobjContext = { ...FetchTabexStatesPayloadobjContext };
+                                        tempFetchTabexStatesPayloadobjContext.functype = 'states';
+                                        tempFetchTabexStatesPayloadobjContext.country_id = option.id;
+                                        setFetchTabexStatesPayloadobjContext({ ...tempFetchTabexStatesPayloadobjContext });
+
+                                        var tempfetchproductsfilerobjcontext = { ...ProductFilterObjContext };
+                                        tempfetchproductsfilerobjcontext.countryid = option.id;
+                                        tempfetchproductsfilerobjcontext.page = 0;
+                                        setProductFilterObjContext({ ...tempfetchproductsfilerobjcontext });
+                                        filterrouting(tempfetchproductsfilerobjcontext);
+                                    }}
+                                    styles={langdetect == 'en' ? defaultstyles : defaultstylestranslated}
+                                    placeholder={lang.choosecountry}
+                                    isSearchable={true}
+                                />
+                            )}
+                        </div>
+                        <div class="col-lg-12 mb-3 p-0">
+                            {fetchTabexStatesQueryContext?.isFetching && (
+                                <div className="w-100 allcentered mt-1">
+                                    <CircularProgress color="#000" width="20px" height="20px" duration="1s" />
+                                </div>
+                            )}
+
+                            {!fetchTabexStatesQueryContext?.isFetching && fetchTabexStatesQueryContext?.isSuccess && (
+                                <Select
+                                    options={fetchTabexStatesQueryContext?.data?.data?.states}
+                                    getOptionLabel={(option) => {
+                                        var crname = '';
+                                        if (langdetect == 'en') {
+                                            crname = option.name;
+                                        } else if (langdetect == 'ar') {
+                                            if (option.name_ar != null) {
+                                                crname = option.name_ar;
+                                            } else {
+                                                crname = option.name;
+                                            }
+                                        }
+                                        return crname;
+                                    }}
+                                    getOptionValue={(option) => option.id}
+                                    value={fetchTabexStatesQueryContext?.data?.data?.states.filter((option) => option.id == ProductFilterObjContext.stateid)}
+                                    onChange={(option) => {
+                                        var tempFetchTabexStatesPayloadobjContext = { ...FetchTabexStatesPayloadobjContext };
+                                        tempFetchTabexStatesPayloadobjContext.functype = 'cities';
+                                        tempFetchTabexStatesPayloadobjContext.state_id = option.id;
+                                        setFetchTabexStatesPayloadobjContext({ ...tempFetchTabexStatesPayloadobjContext });
+
+                                        var tempfetchproductsfilerobjcontext = { ...ProductFilterObjContext };
+                                        tempfetchproductsfilerobjcontext.stateid = option.id;
+                                        tempfetchproductsfilerobjcontext.page = 0;
+                                        setProductFilterObjContext({ ...tempfetchproductsfilerobjcontext });
+                                        filterrouting(tempfetchproductsfilerobjcontext);
+                                    }}
+                                    styles={langdetect == 'en' ? defaultstyles : defaultstylestranslated}
+                                    placeholder={lang.choosestategov}
+                                    isSearchable={true}
+                                />
+                            )}
+                        </div>
+                        <div class="col-lg-12 mb-3 p-0">
+                            {fetchTabexCitiesQueryContext?.isFetching && (
+                                <div className="w-100 allcentered mt-1">
+                                    <CircularProgress color="#000" width="20px" height="20px" duration="1s" />
+                                </div>
+                            )}
+
+                            {!fetchTabexCitiesQueryContext?.isFetching && fetchTabexCitiesQueryContext?.isSuccess && (
+                                <Select
+                                    options={fetchTabexCitiesQueryContext?.data?.data?.cities}
+                                    getOptionLabel={(option) => {
+                                        var crname = '';
+                                        if (langdetect == 'en') {
+                                            crname = option.name;
+                                        } else if (langdetect == 'ar') {
+                                            if (option.name_ar != null) {
+                                                crname = option.name_ar;
+                                            } else {
+                                                crname = option.name;
+                                            }
+                                        }
+                                        return crname;
+                                    }}
+                                    getOptionValue={(option) => option.id}
+                                    value={fetchTabexCitiesQueryContext?.data?.data?.cities.filter((option) => option.id == ProductFilterObjContext.cityid)}
+                                    onChange={(option) => {
+                                        var tempfetchproductsfilerobjcontext = { ...ProductFilterObjContext };
+                                        tempfetchproductsfilerobjcontext.cityid = option.id;
+                                        tempfetchproductsfilerobjcontext.page = 0;
+                                        setProductFilterObjContext({ ...tempfetchproductsfilerobjcontext });
+                                        filterrouting(tempfetchproductsfilerobjcontext);
+                                    }}
+                                    styles={langdetect == 'en' ? defaultstyles : defaultstylestranslated}
+                                    placeholder={lang.choosecity}
+                                    isSearchable={true}
+                                />
+                            )}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    };
+    return (
+        <div
+            className={sectionproperties.filterdirection == 'Horizontal' ? 'col-lg-12 p-0 w-100 filter mt-md-0 ' : 'col-lg-12 p-0 w-100 filter mt-md-0 d-md-none'}
+            style={{ marginTop: sectionproperties.filtersection_mt + 'px', minHeight: sectionproperties.filterminheight == 0 ? 'auto' : sectionproperties.filterminheight + 'vh' }}
+        >
+            {sectionproperties.filterdirection == 'Horizontal' && (
+                <div class="row m-0 w-100">
+                    <div className="col-lg-12 col-md-12 col-sm-12 p-0 d-flex justify-content-start mb-3">
+                        <p className={langdetect == 'en' ? filter_cssstyles.collapsetitle + ' m-0 p-0 ' : filter_cssstyles.collapsetitle + ' m-0 p-0 text-right'}>
+                            {langdetect == 'en' ? sectionproperties.filtercollectiontitle_en : sectionproperties.filtercollectiontitle_ar}
+                        </p>
+                    </div>
+                    <div class="col-lg-12 p-0 mb-4">
+                        <ScrollMenu transitionBehavior={'auto'} wrapperClassName={''} itemClassName={'filtercard'} scrollContainerClassName={'scrollmenuclasssubscrollbar'}>
+                            {instcollections.map((item, index) => {
+                                return (
+                                    <div
+                                        className={filter_cssstyles.timeline_text + ' col-xl-12 p-0 col-lg-12 col-md-12 col-sm-12 w-100 cursor-pointer '}
+                                        onClick={() => {
+                                            setCollectionFilterFunc(item.collectionid);
+                                        }}
+                                        style={{
+                                            color: item.isfilterselected == true ? 'red' : '',
+                                        }}
+                                    >
+                                        <div class="col-lg-12 allcentered mb-2">
+                                            <div
+                                                style={{
+                                                    width: 200,
+                                                    height: 200,
+                                                }}
+                                            >
+                                                <Imagekitimagecomp
+                                                    urlEndpoint={ikimagecredcontext?.ikimageendpoint}
+                                                    publicKey={ikimagecredcontext?.ikimagepublickey}
+                                                    path={'/tr:w-' + sectionproperties.imagetr_w + ',h-' + sectionproperties.imagetr_h + '/' + item.collectionlogo}
+                                                    style={{
+                                                        width: '100%',
+                                                        height: '100%',
+                                                        objectFit: 'contain',
+                                                    }}
+                                                    loading="lazy"
+                                                />
+                                            </div>
+                                        </div>
+                                        <div class="col-lg-12 allcentered">
+                                            <p class={' m-0 p-0 '}>{langdetect == 'en' ? item.title_en : item.title_ar}</p>
+                                        </div>
+                                    </div>
+                                );
+                            })}
+                        </ScrollMenu>
+                    </div>
+                </div>
+            )}
+            {sectionproperties.filterdirection == 'Vertical' && (
+                <div
+                    className={`${filterstyles.filterslider_container}` + ' pb-md-5 '}
+                    id="filterslider"
+                    style={{
+                        background: sectionproperties.filter_backgroundcolor,
+                        borderRadius: sectionproperties.filter_borderBottomLeftRadius + 'px',
+                    }}
+                >
+                    <div className={filter_cssstyles.filteraccordion + ' row m-0 w-100 pt-2 pb-3 filter-accordion '}>
+                        <div className="col-lg-9 col-md-9 col-sm-9 d-none align-items-center d-md-flex">
+                            <p
+                                className="m-0 p-0  font-16 font-weight-600"
+                                style={{
+                                    color: sectionproperties.filter_titlecolor,
+                                    fontSize: sectionproperties.filter_titlefontsize + 'px',
+                                    fontWeight: sectionproperties.filter_titlefontweight,
+                                    textTransform: sectionproperties.filter_titletextransform,
+                                }}
+                            >
+                                {langdetect == 'en' ? 'Filter' : 'فلترة'}
+                            </p>
+                        </div>
+                        <div className="col-lg-3 col-md-3 col-sm-3 d-none d-md-flex align-items-center justify-content-end p-0">
+                            <div
+                                className={`${filterstyles.close_menu_icon_cont} ${filter_cssstyles.close_menu_icon_cont}` + ' d-none d-md-flex align-items-center justify-content-center '}
+                                onClick={() => {
+                                    var element = document.getElementById('filterslider');
+                                    element.classList.remove(filterstyles.filterslider_container_opened);
+                                }}
+                            >
+                                <i className="h-100 d-flex align-items-center justify-content-center">
+                                    <IoMdClose
+                                        size={sectionproperties.closeSlider_fontSize}
+                                        style={{
+                                            color: sectionproperties.closeSlider_color,
+                                        }}
+                                    />
+                                </i>
+                            </div>
+                        </div>
+                        {sectionproperties.otherfilters == 'Show' && (
+                            <div class="row m-0 w-100">
+                                <div class="col-lg-12 d-flex justify-content-start">
+                                    <p
+                                        className="m-0 p-0 font-16 font-weight-600"
+                                        style={{
+                                            color: sectionproperties.filter_titlecolor,
+                                            fontSize: sectionproperties.filter_titlefontsize + 'px',
+                                            fontWeight: sectionproperties.filter_titlefontweight,
+                                            textTransform: sectionproperties.filter_titletextransform,
+                                        }}
+                                    >
+                                        {langdetect == 'en' ? 'Sort By' : 'ترتيب حسب'}
+                                    </p>
+                                </div>
+                                <div className="col-lg-12">
+                                    <hr className="mt-2 mb-3" />
+                                </div>
+                                {otherfilters.map((item, index) => {
+                                    return (
+                                        <div className="col-lg-12 pl-4 pr-4">
+                                            {/* <div class="dropdowncontainer mr-2 mt-sm-3">
+                                                {/* checked={checked}
+                                                <input class="dropdown" type="checkbox" id="dropdown" name="dropdown" hidden />
+                                                <label
+                                                    // onClick={() => {
+                                                    //     setChecked(!checked);
+                                                    // }}
+                                                    className={' d-flex justify-content-center align-items-center for-dropdown'}
+                                                    for="dropdown"
+                                                    style={{ cursor: 'pointer' }}
+                                                >
+                                                    {sortby}
+                                                    {/* <i className="bx bx-chevron-down ml-2" style={{ fontSize: '20px' }}></i>
+                                                </label>
+                                                <div class="dropdownmenu">
+                                                    {item.filterarray.map((valueitem, valueindex) => {
+                                                        var ischecked = false;
+                                                        if (item.payloadvalue == 'sortprice') {
+                                                            if (valueitem.value == ProductFilterObjContext.sortprice) {
+                                                                ischecked = true;
+                                                            }
+                                                        } else if (item.payloadvalue == 'sortdates') {
+                                                            if (valueitem.value == ProductFilterObjContext.sortdates) {
+                                                                ischecked = true;
+                                                            }
+                                                        }
+                                                        return (
+                                                            <p
+                                                                class="dropdownlink"
+                                                                onClick={() => {
+                                                                    // setfilterfunc(valueitem.valueid, valueindex, index, 'assign');
+                                                                    var tempfetchproductsfilerobjcontext = { ...ProductFilterObjContext };
+                                                                    if (tempfetchproductsfilerobjcontext[item.payloadvalue] == valueitem.value) {
+                                                                        tempfetchproductsfilerobjcontext[item.payloadvalue] = '';
+                                                                    } else {
+                                                                        tempfetchproductsfilerobjcontext[item.payloadvalue] = valueitem.value;
+                                                                    }
+                                                                    tempfetchproductsfilerobjcontext.page = 0;
+                                                                    setProductFilterObjContext({ ...tempfetchproductsfilerobjcontext });
+                                                                    routingcountext(
+                                                                        StaticPagesLinksContext.GeneralProductsComponent,
+                                                                        true,
+                                                                        encodeURIComponent(JSON.stringify(tempfetchproductsfilerobjcontext)),
+                                                                    );
+                                                                    setSortby(valueitem.name);
+                                                                }}
+                                                            >
+                                                                {valueitem.name}
+                                                            </p>
+                                                        );
+                                                    })}
+                                                </div>
+                                            </div> */}
+                                            <Accordion allowMultipleExpanded={true} allowZeroExpanded={true} preExpanded={[0, 1, 2, 3]} style={{ width: '100%' }}>
+                                                <AccordionItem uuid={index}>
+                                                    <AccordionItemHeading>
+                                                        <AccordionItemButton>
+                                                            <div className={filter_cssstyles.titlecontainer + ' row m-0 p-0 mb-2 pl-md-3 pr-md-3  '}>
+                                                                <div className="col-lg-10 col-md-10 col-sm-10 p-0">
+                                                                    <p
+                                                                        className={
+                                                                            langdetect == 'en'
+                                                                                ? filter_cssstyles.collapsetitle + ' m-0 p-0 collapsetitle '
+                                                                                : filter_cssstyles.collapsetitle + ' collapsetitle m-0 p-0 text-right'
+                                                                        }
+                                                                    >
+                                                                        {item.name}
+                                                                    </p>
+                                                                </div>
+                                                                <div className="col-lg-2 col-md-2 col-sm-2 p-0">
+                                                                    <AccordionItemState>
+                                                                        {(state) => {
+                                                                            if (state.expanded == true) {
+                                                                                return (
+                                                                                    <i
+                                                                                        className={
+                                                                                            filter_cssstyles.collapsetitle + ' collapsetitle h-100 d-flex align-items-center justify-content-end   '
+                                                                                        }
+                                                                                    >
+                                                                                        <FiChevronDown />
+                                                                                    </i>
+                                                                                );
+                                                                            } else {
+                                                                                return (
+                                                                                    <i className={filter_cssstyles.collapsetitle + ' h-100 d-flex align-items-center justify-content-end   '}>
+                                                                                        <FiChevronUp />
+                                                                                    </i>
+                                                                                );
+                                                                            }
+                                                                        }}
+                                                                    </AccordionItemState>
+                                                                </div>
+                                                            </div>
+                                                        </AccordionItemButton>
+                                                    </AccordionItemHeading>
+                                                    <AccordionItemPanel className="p-0">
+                                                        <div className="row mt-0 mb-2 ml-0 mr-0 d-lg-flex">
+                                                            <div className={'col-lg-12'}>
+                                                                <div
+                                                                    className={
+                                                                        langdetect == 'en'
+                                                                            ? `${filterstyles.timeline}` + ' p-sm-0 '
+                                                                            : `${filterstyles.timeline} ${filterstyles.timelinetrans}` + ' p-sm-0 '
+                                                                    }
+                                                                >
+                                                                    {item.filterarray.map((valueitem, valueindex) => {
+                                                                        var ischecked = false;
+                                                                        if (item.payloadvalue == 'sortprice') {
+                                                                            if (valueitem.value == ProductFilterObjContext.sortprice) {
+                                                                                ischecked = true;
+                                                                            }
+                                                                        } else if (item.payloadvalue == 'sortdates') {
+                                                                            if (valueitem.value == ProductFilterObjContext.sortdates) {
+                                                                                ischecked = true;
+                                                                            }
+                                                                        }
+                                                                        return (
+                                                                            <div
+                                                                                className={
+                                                                                    `${filterstyles.border_left_line} ${filterstyles.timelineinnercont} ${filter_cssstyles.timelineinnercont}
+                                                                ${ischecked ? `${filter_cssstyles.timelineinnercont_active} ${filterstyles.timelineinnercont_active}` : ''}
+                                                                         
+                                                                            ` + ' d-flex align-items-start pb-3 '
+                                                                                }
+                                                                                onClick={() => {
+                                                                                    var tempfetchproductsfilerobjcontext = { ...ProductFilterObjContext };
+                                                                                    if (tempfetchproductsfilerobjcontext[item.payloadvalue] == valueitem.value) {
+                                                                                        tempfetchproductsfilerobjcontext[item.payloadvalue] = '';
+                                                                                    } else {
+                                                                                        tempfetchproductsfilerobjcontext[item.payloadvalue] = valueitem.value;
+                                                                                    }
+                                                                                    tempfetchproductsfilerobjcontext.page = 0;
+                                                                                    setProductFilterObjContext({ ...tempfetchproductsfilerobjcontext });
+
+                                                                                    filterrouting(tempfetchproductsfilerobjcontext);
+                                                                                }}
+                                                                            >
+                                                                                <div>
+                                                                                    <div
+                                                                                        className={
+                                                                                            ` ${ischecked ? filter_cssstyles.btn_item_active : ''} ${filterstyles.btn_item} ${
+                                                                                                filter_cssstyles.btn_item
+                                                                                            }` + ' mb-2 d-flex align-items-center '
+                                                                                        }
+                                                                                    >
+                                                                                        <i className="h-100 d-flex align-items-center"></i>
+                                                                                    </div>
+                                                                                </div>
+                                                                                <div className={langdetect == 'en' ? 'ml-3' : 'mr-3 text-right'}>
+                                                                                    <p
+                                                                                        className={`${filterstyles.timeline_text} ${filter_cssstyles.timeline_text}` + ' m-0 p-0 '}
+                                                                                        style={{
+                                                                                            color: ischecked ? sectionproperties.activecat_color : '',
+                                                                                        }}
+                                                                                    >
+                                                                                        {valueitem.name}
+                                                                                    </p>
+                                                                                </div>
+                                                                            </div>
+                                                                        );
+                                                                    })}
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </AccordionItemPanel>
+                                                </AccordionItem>
+                                            </Accordion>
+                                        </div>
+                                    );
+                                })}
+                                {sectionproperties.showfilterbyrating == 'Show' && (
+                                    <div className="col-lg-12 pl-4 pr-4">
+                                        <div className={filter_cssstyles.titlecontainer + ' row m-0 p-0 mb-2 pl-md-3 pr-md-3  '}>
+                                            <div className="col-lg-12 col-md-12 col-sm-12 p-0 mb-3">
+                                                <p
+                                                    className={
+                                                        langdetect == 'en'
+                                                            ? filter_cssstyles.collapsetitle + ' m-0 p-0 collapsetitle '
+                                                            : filter_cssstyles.collapsetitle + ' collapsetitle m-0 p-0 text-right'
+                                                    }
+                                                >
+                                                    {langdetect == 'en' ? 'Ratings' : 'التقييمات'}
+                                                </p>
+                                            </div>
+                                            <div className="col-lg-12 col-md-12 col-sm-12 mb-4">
+                                                <InputRange
+                                                    draggableTrack={true}
+                                                    formatLabel={(value) => `${value}`}
+                                                    maxValue={5}
+                                                    minValue={0}
+                                                    value={raterangevalue}
+                                                    onChange={(value) => {
+                                                        setraterangevalue({ ...value });
+                                                    }}
+                                                />
+                                            </div>
+                                        </div>
+                                    </div>
+                                )}
+                            </div>
+                        )}
+                        <div className="col-lg-9 col-md-9 col-sm-9 d-flex align-items-center d-md-none">
+                            <p
+                                className="m-0 p-0 font-16 font-weight-600"
+                                style={{
+                                    color: sectionproperties.filter_titlecolor,
+                                    fontSize: sectionproperties.filter_titlefontsize + 'px',
+                                    fontWeight: sectionproperties.filter_titlefontweight,
+                                    textTransform: sectionproperties.filter_titletextransform,
+                                }}
+                            >
+                                {langdetect == 'en' ? 'Filter' : 'فلترة'}
+                            </p>
+                        </div>
+                        <div className="col-lg-3 col-md-3 col-sm-3 d-flex d-md-none align-items-center justify-content-end p-0">
+                            <div
+                                className={`${filterstyles.close_menu_icon_cont} ${filter_cssstyles.close_menu_icon_cont}` + ' d-none d-md-flex align-items-center justify-content-center '}
+                                onClick={() => {
+                                    var element = document.getElementById('filterslider');
+                                    element.classList.remove(filterstyles.filterslider_container_opened);
+                                }}
+                            >
+                                <i className="h-100 d-flex align-items-center justify-content-center">
+                                    <IoMdClose
+                                        size={sectionproperties.closeSlider_fontSize}
+                                        style={{
+                                            color: sectionproperties.closeSlider_color,
+                                        }}
+                                    />
+                                </i>
+                            </div>
+                        </div>
+                        <div className="col-lg-12">
+                            <hr className="mt-2 mb-3" />
+                        </div>
+                        <div className={filter_cssstyles.filteraccordion + ' col-lg-12 filter-accordion p-md-0 pl-4 pr-4 '}>
+                            {sectionproperties.showcountriesfilter == 'Show' && Countriesfilter()}
+                            {sectionproperties.filterType == 'All' && sectionproperties.showcategoriesfilter == 'Show' && <div class="row m-0 w-100">{CategoriesFilter()}</div>}
+                            {sectionproperties.filterType == 'Collections' && sectionproperties.showcategoriesfilter == 'Show' && <div class="row m-0 w-100">{CollectionsFilter()}</div>}
+                            {sectionproperties.showvariantsfilter == 'Show' && InstFilters()}
+                        </div>
+                    </div>
+                </div>
+            )}
+            <div className="col-lg-12">
+                <Offcanvas
+                    show={props?.openFilterSlider}
+                    onHide={() => {
+                        props.setopenFilterSlider(false);
+                    }}
+                    placement="end"
+                    scroll={true}
+                    style={{
+                        minWidth: '200px',
+                        background: sectionproperties.filter_backgroundcolor,
+                        borderRadius: sectionproperties.filter_borderBottomLeftRadius + 'px',
+                    }}
+                    backdrop={true}
+                >
+                    <Offcanvas.Header>
+                        <Offcanvas.Title>
+                            <div className="row m-0 w-100 mt-2">
+                                <div className="col-lg-9 col-md-9 col-sm-9 d-none align-items-center d-md-flex">
+                                    <p
+                                        className="m-0 p-0  font-16 font-weight-600"
+                                        style={{
+                                            color: sectionproperties.filter_titlecolor,
+                                            fontSize: sectionproperties.filter_titlefontsize + 'px',
+                                            fontWeight: sectionproperties.filter_titlefontweight,
+                                            textTransform: sectionproperties.filter_titletextransform,
+                                        }}
+                                    >
+                                        {langdetect == 'en' ? 'Filter' : 'فلترة'}
+                                    </p>
+                                </div>
+                                <div className="col-lg-3 col-md-3 col-sm-3 d-none d-md-flex align-items-center justify-content-end p-0">
+                                    <div
+                                        className={`${filterstyles.close_menu_icon_cont} ${filter_cssstyles.close_menu_icon_cont}` + ' d-none d-md-flex align-items-center justify-content-center '}
+                                        onClick={() => {
+                                            props.setopenFilterSlider(false);
+                                        }}
+                                    >
+                                        <i className="h-100 d-flex align-items-center justify-content-center">
+                                            <IoMdClose
+                                                size={sectionproperties.closeSlider_fontSize}
+                                                style={{
+                                                    color: sectionproperties.closeSlider_color,
+                                                }}
+                                            />
+                                        </i>
+                                    </div>
+                                </div>
+                                <div class="col-lg-12">
+                                    <hr class="mt-2 mb-2" />
+                                </div>
+                            </div>
+                        </Offcanvas.Title>
+                    </Offcanvas.Header>
+                    <Offcanvas.Body>
+                        <div
+                            className={' pb-md-5 '}
+                            style={{
+                                background: sectionproperties.filter_backgroundcolor,
+                                borderRadius: sectionproperties.filter_borderBottomLeftRadius + 'px',
+                            }}
+                        >
+                            <div className={filter_cssstyles.filteraccordion + ' row m-0 w-100 pt-2 pb-3 filter-accordion '}>
+                                {sectionproperties.otherfilters == 'Show' &&
+                                    otherfilters.map((item, index) => {
+                                        return (
+                                            <>
+                                                <Accordion allowMultipleExpanded={true} allowZeroExpanded={true} preExpanded={[0, 1, 2, 3]} style={{ width: '100%' }}>
+                                                    <AccordionItem uuid={index}>
+                                                        <AccordionItemHeading>
+                                                            <AccordionItemButton>
+                                                                <div className={filter_cssstyles.titlecontainer + ' row m-0 p-0 mb-2 pl-md-3 pr-md-3  '}>
+                                                                    <div className="col-lg-10 col-md-10 col-sm-10 p-0">
+                                                                        <p
+                                                                            className={
+                                                                                langdetect == 'en'
+                                                                                    ? filter_cssstyles.collapsetitle + ' m-0 p-0 '
+                                                                                    : filter_cssstyles.collapsetitle + ' m-0 p-0 text-right'
+                                                                            }
+                                                                        >
+                                                                            {item.name}
+                                                                        </p>
+                                                                    </div>
+                                                                    <div className="col-lg-2 col-md-2 col-sm-2 p-0">
+                                                                        <AccordionItemState>
+                                                                            {(state) => {
+                                                                                if (state.expanded == true) {
+                                                                                    return (
+                                                                                        <i className={filter_cssstyles.collapsetitle + ' h-100 d-flex align-items-center justify-content-end   '}>
+                                                                                            <FiChevronDown />
+                                                                                        </i>
+                                                                                    );
+                                                                                } else {
+                                                                                    return (
+                                                                                        <i className={filter_cssstyles.collapsetitle + ' h-100 d-flex align-items-center justify-content-end   '}>
+                                                                                            <FiChevronUp />
+                                                                                        </i>
+                                                                                    );
+                                                                                }
+                                                                            }}
+                                                                        </AccordionItemState>
+                                                                    </div>
+                                                                </div>
+                                                            </AccordionItemButton>
+                                                        </AccordionItemHeading>
+                                                        <AccordionItemPanel className="p-0">
+                                                            <div className="row mt-0 mb-2 ml-0 mr-0 d-lg-flex">
+                                                                <div className={'col-lg-12'}>
+                                                                    <div
+                                                                        className={
+                                                                            langdetect == 'en'
+                                                                                ? `${filterstyles.timeline}` + ' p-sm-0 '
+                                                                                : `${filterstyles.timeline} ${filterstyles.timelinetrans}` + ' p-sm-0 '
+                                                                        }
+                                                                    >
+                                                                        {item.filterarray.map((valueitem, valueindex) => {
+                                                                            var ischecked = false;
+                                                                            if (item.payloadvalue == 'sortprice') {
+                                                                                if (valueitem.value == ProductFilterObjContext.sortprice) {
+                                                                                    ischecked = true;
+                                                                                }
+                                                                            } else if (item.payloadvalue == 'sortdates') {
+                                                                                if (valueitem.value == ProductFilterObjContext.sortdates) {
+                                                                                    ischecked = true;
+                                                                                }
+                                                                            }
+                                                                            return (
+                                                                                <div
+                                                                                    className={
+                                                                                        `${filterstyles.border_left_line} ${filterstyles.timelineinnercont} ${filter_cssstyles.timelineinnercont}
+                                                                ${ischecked ? `${filter_cssstyles.timelineinnercont_active} ${filterstyles.timelineinnercont_active}` : ''}
+                                                                         
+                                                                            ` + ' d-flex align-items-start pb-3 '
+                                                                                    }
+                                                                                    onClick={() => {
+                                                                                        // setfilterfunc(valueitem.valueid, valueindex, index, 'assign');
+                                                                                        var tempfetchproductsfilerobjcontext = { ...ProductFilterObjContext };
+                                                                                        if (tempfetchproductsfilerobjcontext[item.payloadvalue] == valueitem.value) {
+                                                                                            tempfetchproductsfilerobjcontext[item.payloadvalue] = '';
+                                                                                        } else {
+                                                                                            tempfetchproductsfilerobjcontext[item.payloadvalue] = valueitem.value;
+                                                                                        }
+                                                                                        setProductFilterObjContext({ ...tempfetchproductsfilerobjcontext });
+                                                                                    }}
+                                                                                >
+                                                                                    <div>
+                                                                                        <div
+                                                                                            className={
+                                                                                                ` ${ischecked ? filter_cssstyles.btn_item_active : ''} ${filterstyles.btn_item} ${
+                                                                                                    filter_cssstyles.btn_item
+                                                                                                }` + ' mb-2 d-flex align-items-center '
+                                                                                            }
+                                                                                        >
+                                                                                            <i className="h-100 d-flex align-items-center"></i>
+                                                                                        </div>
+                                                                                    </div>
+                                                                                    <div className={langdetect == 'en' ? 'ml-3' : 'mr-3 text-right'}>
+                                                                                        <p
+                                                                                            className={`${filterstyles.timeline_text} ${filter_cssstyles.timeline_text}` + ' m-0 p-0 '}
+                                                                                            style={{
+                                                                                                color: ischecked ? sectionproperties.activecat_color : '',
+                                                                                            }}
+                                                                                        >
+                                                                                            {valueitem.name}
+                                                                                        </p>
+                                                                                    </div>
+                                                                                </div>
+                                                                            );
+                                                                        })}
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </AccordionItemPanel>
+                                                    </AccordionItem>
+                                                </Accordion>
+                                                <hr className="mt-3 mb-3" />
+                                            </>
+                                        );
+                                    })}
+                                {sectionproperties.otherfilters == 'Show' && (
+                                    <div className="col-lg-12">
+                                        <hr className="mt-2 mb-3" />
+                                    </div>
+                                )}
+                                <div className={filter_cssstyles.filteraccordion + ' col-lg-12 filter-accordion p-md-0 '}>
+                                    {sectionproperties.showcountriesfilter == 'Show' && Countriesfilter()}
+                                    {sectionproperties.filterType == 'All' && sectionproperties.showcategoriesfilter == 'Show' && <div class="row m-0 w-100">{CategoriesFilter()}</div>}
+                                    {sectionproperties.filterType == 'Collections' && sectionproperties.showcategoriesfilter == 'Show' && <div class="row m-0 w-100">{CollectionsFilter()}</div>}
+                                    {sectionproperties.showvariantsfilter == 'Show' && InstFilters()}
+                                </div>
+                            </div>
+                        </div>
+                    </Offcanvas.Body>
+                </Offcanvas>
+            </div>
+        </div>
+    );
+};
+export default Filter;