tabexseriescomponents 0.0.73 → 0.0.74

package/src-aya/TabexComponents/StaticPages/Filter/Filter.jsx

@@ -1,542 +0,0 @@
-import React, { useEffect, useState, useContext } from 'react';
-import { Accordion, AccordionItem, AccordionItemHeading, AccordionItemButton, AccordionItemPanel, AccordionItemState } from 'react-accessible-accordion';
-import filterstyles from '../../../styles/staticpages/filter.module.css';
-import { IoMdClose } from 'react-icons/io';
-import { HiOutlinePlus } from 'react-icons/hi';
-import { AiOutlineMinus } from 'react-icons/ai';
-import { css } from 'glamor';
-import Dropdown from 'react-bootstrap/Dropdown';
-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 [sectionproperties, setsectionproperties] = useState('');
-    const [instfilters, setinstfilters] = useState([...authdetailsContext.instinfo.instfilters]);
-    const [instcollections, setinstcollections] = useState([...authdetailsContext.instinfo.instcollections]);
-    const [isfiltering, setisfiltering] = useState(false);
-
-    useEffect(() => {
-        filterupdater();
-    }, []);
-    useEffect(() => {
-        setinstfilters([...authdetailsContext.instinfo.instfilters]);
-        setinstcollections([...authdetailsContext.instinfo.instcollections]);
-    }, [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 (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;
-        }
-        setProductFilterObjContext({ ...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);
-        }
-        setProductFilterObjContext({ ...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 i': {
-                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({
-            ':hover': {
-                background: sectionproperties.filteritembtn_bghover,
-            },
-            width: '20px',
-            height: '20px',
-            // borderTopLeftRadius: sectionproperties.filteritembtn_borderTopLeftRadius + 'px',
-            // borderTopRightRadius: sectionproperties.filteritembtn_borderTopRightRadius + 'px',
-            // borderBottomLeftRadius: sectionproperties.filteritembtn_borderBottomLeftRadius + 'px',
-            // borderBottomRightRadius: sectionproperties.filteritembtn_borderBottomRightRadius + 'px',
-            background: sectionproperties.filteritembtn_bgcolor,
-            // marginLeft: sectionproperties.filteritembtn_ml + 'px',
-        }),
-        btn_item_active: css({
-            // background: 'green',
-            background: sectionproperties.btn_item_activebgcolor,
-        }),
-        timelineinnercont_active: css({
-            fontWeight: sectionproperties.activecat_fontweight,
-            color: sectionproperties.activecat_color,
-        }),
-    };
-
-    return (
-        <div className="col-lg-12 p-0 w-100 filter">
-            {sectionproperties.filterdirection == 'Horizontal' && (
-                <div className={sectionproperties.filterscat_showas == 'vertical' ? ' row m-0 w-100 ' : `${filterstyles.outercontainer}` + ' row m-0 w-100 '}>
-                    {/* <div className={`${filterstyles.outercontainer}` + ' row m-0 w-100 bg-info '}> */}
-                    <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' ? 'Collections' : 'المجموعات'}</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 '}>{valueitem.valuename}</p>
-                                                            </div>
-                                                        </div>
-                                                    );
-                                                })}
-                                            </Dropdown.Menu>
-                                        </Dropdown>
-                                    </div>
-                                </div>
-                            </div>
-                        );
-                    })}
-                </div>
-            )}
-            {sectionproperties.filterdirection == 'Vertical' && (
-                <div
-                    className={`${filterstyles.filterslider_container}`}
-                    id="filterslider"
-                    style={{
-                        background: sectionproperties.filter_backgroundcolor,
-                        borderRadius: sectionproperties.filter_borderBottomLeftRadius + 'px',
-                    }}
-                >
-                    <div className="row m-0 w-100 pt-2 pb-3">
-                        <div className="col-lg-9 col-md-9 col-sm-9 d-flex 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-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>
-                        <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 '}>
-                            <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 '}>
-                                                <div className="col-lg-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' ? 'Collections' : 'المجموعات'}
-                                                    </p>
-                                                </div>
-                                                <div className="col-lg-2 p-0">
-                                                    <AccordionItemState>
-                                                        {(state) => {
-                                                            if (state.expanded == true) {
-                                                                return (
-                                                                    <i className={filter_cssstyles.collapsetitleicon + ' h-100 d-flex align-items-center justify-content-end accordion__button '}>
-                                                                        <AiOutlineMinus />
-                                                                    </i>
-                                                                );
-                                                            } else {
-                                                                return (
-                                                                    <i className={filter_cssstyles.collapsetitleicon + ' h-100 d-flex align-items-center justify-content-end accordion__button '}>
-                                                                        <HiOutlinePlus />
-                                                                    </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>
-                                <hr className="mt-3 mb-3" />
-                            </Accordion>
-                            <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 '}>
-                                                            <div className="col-lg-10 p-0">
-                                                                <p
-                                                                    className={
-                                                                        langdetect == 'en' ? filter_cssstyles.collapsetitle + ' m-0 p-0 ' : filter_cssstyles.collapsetitle + ' m-0 p-0 text-right'
-                                                                    }
-                                                                >
-                                                                    {item.optionname}
-                                                                </p>
-                                                            </div>
-                                                            <div className="col-lg-2 p-0">
-                                                                <AccordionItemState>
-                                                                    {(state) => {
-                                                                        if (state.expanded == true) {
-                                                                            return (
-                                                                                <i
-                                                                                    className={
-                                                                                        filter_cssstyles.collapsetitleicon + ' h-100 d-flex align-items-center justify-content-end accordion__button '
-                                                                                    }
-                                                                                >
-                                                                                    <AiOutlineMinus />
-                                                                                </i>
-                                                                            );
-                                                                        } else {
-                                                                            return (
-                                                                                <i
-                                                                                    className={
-                                                                                        filter_cssstyles.collapsetitleicon + ' h-100 d-flex align-items-center justify-content-end accordion__button '
-                                                                                    }
-                                                                                >
-                                                                                    <HiOutlinePlus />
-                                                                                </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 : '',
-                                                                                    }}
-                                                                                >
-                                                                                    {valueitem.valuename}
-                                                                                </p>
-                                                                            </div>
-                                                                        </div>
-                                                                    );
-                                                                })}
-                                                            </div>
-                                                        </div>
-                                                    </div>
-                                                </AccordionItemPanel>
-                                            </AccordionItem>
-                                            <hr className="mt-3 mb-3" />
-                                        </>
-                                    );
-                                })}
-                            </Accordion>
-                        </div>
-                        <div
-                            className="col-lg-12 d-flex align-items-center justify-content-center"
-                            onClick={() => {
-                                setfilterfunc('', '', '', 'clearfilters');
-                            }}
-                        >
-                            <button className={filter_cssstyles.btnstyles + '  ml-1 ml-1 '}>{langdetect == 'en' ? 'Clear Filters' : 'حذف الإختيارات'}</button>
-                        </div>
-                    </div>
-                </div>
-            )}
-        </div>
-    );
-};
-export default Filter;

package/src-aya/TabexComponents/StaticPages/Login/FacebookLoginButton.jsx

@@ -1,51 +0,0 @@
-import React, { useEffect, useState, useContext } from 'react';
-
-import generalstyles from '../../../styles/general/general.module.css';
-import loginstyles from '../../../styles/staticpages/login.module.css';
-import FacebookLogin from 'react-facebook-login/dist/facebook-login-render-props';
-import { FaFacebookF } from 'react-icons/fa';
-
-const FacebookLoginButton = (props) => {
-    // const { lang, langdetect } = useContext(LanguageContext);
-    // const { fetchAuthorizationQueryContext, SocialLoginMutationContext } = useContext(FetchingContext);
-    const lang = props.actions.lang;
-    const langdetect = props.actions.langdetect;
-    const authdetailsContext = props.actions.authdetailsContext;
-    const SocialLoginMutationContext = props.actions.SocialLoginMutationContext;
-    return (
-        <div className="">
-            {authdetailsContext.instinfo?.instcred?.facebookloginappid != null && (
-                <FacebookLogin
-                    cssClass={`${generalstyles.btn} ${generalstyles.btn_primary} ${loginstyles.loginbtn}` + ' w-100 mb-3 d-flex align-items-center justify-content-center '}
-                    appId={authdetailsContext.instinfo?.instcred?.facebookloginappid}
-                    fields="name,email"
-                    callback={(responseFacebook) => {
-                        var googleresp = responseFacebook;
-
-                        if (googleresp.status != 'unknown') {
-                            SocialLoginMutationContext.mutate({
-                                email: googleresp.email,
-                                name: googleresp.name,
-                                loginplattype: 'facebook',
-                            });
-                        }
-                    }}
-                    render={(renderProps) => {
-                        return (
-                            <button
-                                type="button"
-                                onClick={renderProps.onClick}
-                                className={' d-flex align-items-center justify-content-center  text-secondaryhovercontainer'}
-                                style={{ border: '1px solid #ccc', height: '38px', borderRadius: '3px', width: '218px' }}
-                            >
-                                <FaFacebookF size={15} color="black" className="ml-1 mr-1 text-secondaryhover" />
-                                <p className="m-0 p-0 font_13 ml-1 mr-1 text-secondaryhover">{lang.loginwithfacebook}</p>
-                            </button>
-                        );
-                    }}
-                />
-            )}
-        </div>
-    );
-};
-export default FacebookLoginButton;

package/src-aya/TabexComponents/StaticPages/Login/GoogleLoginButton.jsx

@@ -1,35 +0,0 @@
-import React, { useEffect, useState, useContext } from 'react';
-import { useGoogleLogin, hasGrantedAnyScopeGoogle, GoogleLogin, GoogleOAuthProvider } from '@react-oauth/google';
-import jwtDecode from 'jwt-decode';
-const GoogleLoginButton = (props) => {
-    const lang = props.actions.lang;
-    const langdetect = props.actions.langdetect;
-    const authdetailsContext = props.actions.authdetailsContext;
-    const SocialLoginMutationContext = props.actions.SocialLoginMutationContext;
-    return (
-        <>
-            {authdetailsContext.instinfo?.instcred?.googleloginclientid != null && (
-                <div className="d-flex align-items-center justify-content-center">
-                    <GoogleOAuthProvider clientId={authdetailsContext.instinfo?.instcred?.googleloginclientid}>
-                        <div className={'row m-0 w-100 d-flex align-items-center justify-content-center'}>
-                            <GoogleLogin
-                                onSuccess={(tokenResponse) => {
-                                    var tt = jwtDecode(tokenResponse.credential);
-                                    SocialLoginMutationContext.mutate({
-                                        email: tt.email,
-                                        name: tt.name,
-                                        loginplattype: 'google',
-                                    });
-                                }}
-                                onError={() => {
-                                    console.log('Login Failed');
-                                }}
-                            />
-                        </div>
-                    </GoogleOAuthProvider>
-                </div>
-            )}
-        </>
-    );
-};
-export default GoogleLoginButton;