tabexseriescomponents 0.0.217 → 0.0.220

package/srcold/TabexComponents/StaticPages/Filter/Filter.jsx

@@ -0,0 +1,1399 @@
+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';
+
+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 [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 [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]);
+    const filterupdater = () => {
+        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 });
+        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 });
+        routingcountext(StaticPagesLinksContext.GeneralProductsComponent, true, encodeURIComponent(JSON.stringify(tempfetchproductsfilerobjcontext)));
+    };
+
+    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,
+            ':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 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} preExpanded={[0, 1, 2, 3]}>
+                {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>
+        );
+    };
+    return (
+        <div className="col-lg-12 p-0 w-100 filter mt-md-0 d-md-none" style={{ marginTop: sectionproperties.filtersection_mt + 'px' }}>
+            {sectionproperties.filterdirection == 'Horizontal' && (
+                <div className={sectionproperties.filterscat_showas == 'vertical' ? ' row m-0 w-100 ' : `${filterstyles.outercontainer}` + ' row m-0 w-100 '}>
+                    <div className={`${filterstyles.card}` + ' col-lg-2 w-100 '}>
+                        <div className={`${filterstyles.horizontalfilter_card}` + ' w-100 d-flex align-items-center '}>
+                            <div className={`${filterstyles.timeline}` + '  w-100'}>
+                                <Dropdown>
+                                    <Dropdown.Toggle className="d-flex align-items-center w-100 bg-transparent">
+                                        <div className="row m-0 w-100 h-100 d-flex align-items-center">
+                                            <div className="col-lg-11 d-flex align-items-start p-0">
+                                                <p className={`${filter_cssstyles.collapsetitle}` + ' p-0 m-0 '}>
+                                                    {langdetect == 'en' ? sectionproperties.filtercollectiontitle_en : sectionproperties.filtercollectiontitle_ar}
+                                                </p>
+                                            </div>
+                                            <i className="fa fa-chevron-down ml-auto"></i>
+                                        </div>
+                                    </Dropdown.Toggle>
+                                    <Dropdown.Menu>
+                                        {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);
+                                                        // setfilterfunc(valueitem.valueid, valueindex, index, 'assign');
+                                                    }}
+                                                >
+                                                    <div>
+                                                        <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>
+                                                    <div className={langdetect == 'en' ? 'ml-3' : 'mr-3 text-right'}>
+                                                        <p className={`${filterstyles.timeline_text} ${filter_cssstyles.timeline_text}` + ' m-0 p-0 '}>
+                                                            {langdetect == 'en' ? item.title_en : item.title_ar}
+                                                        </p>
+                                                    </div>
+                                                </div>
+                                            );
+                                        })}
+                                    </Dropdown.Menu>
+                                </Dropdown>
+                            </div>
+                        </div>
+                    </div>
+                    {instfilters.map((item, index) => {
+                        return (
+                            <div className={`${filterstyles.card}` + ' col-lg-2 w-100 '}>
+                                <div className={`${filterstyles.horizontalfilter_card}` + ' w-100 d-flex align-items-center '}>
+                                    <div className={`${filterstyles.timeline}` + '  w-100'}>
+                                        <Dropdown>
+                                            <Dropdown.Toggle className="d-flex align-items-center w-100 bg-transparent">
+                                                <div className="row m-0 w-100 h-100 d-flex align-items-center">
+                                                    <div className="col-lg-11 d-flex align-items-start p-0">
+                                                        <p className={`${filter_cssstyles.collapsetitle}` + ' p-0 m-0 '}>{item.optionname}</p>
+                                                    </div>
+                                                    <i className="fa fa-chevron-down ml-auto"></i>
+                                                </div>
+                                            </Dropdown.Toggle>
+                                            <Dropdown.Menu>
+                                                {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 '}>
+                                                                    {langdetect == 'en' ? valueitem.valuename : valueitem.valuename_ar}
+                                                                </p>
+                                                            </div>
+                                                        </div>
+                                                    );
+                                                })}
+                                            </Dropdown.Menu>
+                                        </Dropdown>
+                                    </div>
+                                </div>
+                            </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={() => {
+                                                                                    // 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)),
+                                                                                    );
+                                                                                }}
+                                                                            >
+                                                                                <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>
+                                    );
+                                })}
+                            </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.filterType == 'All' && <div class="row m-0 w-100">{CategoriesFilter()}</div>}
+                            {sectionproperties.filterType == 'Collections' && <div class="row m-0 w-100">{CollectionsFilter()}</div>}
+                            {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.filterType == 'All' && <div class="row m-0 w-100">{CategoriesFilter()}</div>}
+                                    {sectionproperties.filterType == 'Collections' && <div class="row m-0 w-100">{CollectionsFilter()}</div>}
+                                    {InstFilters()}
+                                    {/* <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 + ' 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}  ${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>
+                                    </Accordion>
+                                    <div class="col-lg-12">
+                                        <hr className="mt-3 mb-3" />
+                                    </div>
+                                    <Accordion allowMultipleExpanded={true} allowZeroExpanded={true} preExpanded={[0, 1, 2, 3]}>
+                                        {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 + ' m-0 p-0 '
+                                                                                    : filter_cssstyles.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 + ' 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.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> */}
+                                </div>
+                            </div>
+                        </div>
+                    </Offcanvas.Body>
+                </Offcanvas>
+            </div>
+        </div>
+    );
+};
+export default Filter;