tabexseriescomponents 0.2.1280 → 0.2.1283

package/srcbefore27-11/TabexComponents/StaticPages/Filter/Filter copy 2.jsx

@@ -1,2888 +0,0 @@
-// 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;