tabexseriescomponents 0.0.694 → 0.0.696

package/{srcoman → srcoriginal}/TabexComponents/StaticPages/Filter/Filter.jsx

@@ -18,6 +18,7 @@ import { BsChevronRight } from '@react-icons/all-files/bs/BsChevronRight';
 const Select = React.lazy(() => import('react-select'));
 
 const Filter = (props) => {
+    const FetchAllVendorsQuery = props.actions.FetchAllVendorsQuery;
     const lang = props.actions.lang;
     const langdetect = props.actions.langdetect;
     const productfiltercontext = props.actions.productfiltercontext;
@@ -32,7 +33,9 @@ const Filter = (props) => {
     const StaticPagesLinksContext = props.actions.StaticPagesLinksContext;
     const ikimagecredcontext = props.actions.ikimagecredcontext;
     const [pricevalue, setpricevalue] = useState({ min: 0, max: 10000 });
+    const [pricevalue2, setpricevalue2] = useState({ min: '', max: '' });
     const [productfeatuesarr, setproductfeatuesarr] = useState([]);
+    const [vendorarr, setvendorsarr] = useState([]);
 
     const fetchTabexCountriesQueryContext = props.actions.fetchTabexCountriesQueryContext;
     const FetchQueriesEngineContext = props.actions.FetchQueriesEngineContext;
@@ -54,6 +57,9 @@ const Filter = (props) => {
     const [raterangevalue, setraterangevalue] = useState({ min: 0, max: 5 });
     const timeoutRef = React.useRef(null);
     const [sortbycontext, setsortbycontext] = useState('');
+    const [pricefrom, setpricefrom] = useState('');
+    const [priceto, setpriceto] = useState('');
+    const setfetchingtype = props.actions.setfetchingtype;
 
     const [otherfilters, setotherfilters] = useState([
         {
@@ -77,6 +83,16 @@ const Filter = (props) => {
     useEffect(() => {
         filterupdater();
     }, []);
+    useEffect(() => {
+        if (FetchAllVendorsQuery?.isSuccess && FetchAllVendorsQuery?.data?.data?.vendors != undefined && FetchAllVendorsQuery?.data?.data?.vendors?.length != 0) {
+            var temp = [...vendorarr];
+            temp = [...FetchAllVendorsQuery?.data?.data?.vendors];
+            temp?.forEach(function (instfilteritem, instfilterindex) {
+                instfilteritem.isfilterselected = false;
+            });
+            setvendorsarr([...temp]);
+        }
+    }, [FetchAllVendorsQuery?.isSuccess]);
     useEffect(() => {
         if (fetchproductoptionsQueryContext.isSuccess) {
             setinstfilters([...fetchproductoptionsQueryContext?.data?.data?.productoptions]);
@@ -89,7 +105,17 @@ const Filter = (props) => {
     }, [fetchCategoriesQueryContext.isSuccess]);
     useEffect(() => {
         if (fetchcollectionsQueryContext.isSuccess) {
-            setinstcollections([...fetchcollectionsQueryContext?.data?.data?.collections]);
+            var tempcoll = fetchcollectionsQueryContext?.data?.data?.collections;
+            var tempcollinfilter = [];
+            {
+                tempcoll?.map((collectionitem, collectionindex) => {
+                    if (collectionitem.isshowntocustomers == 1 && collectionitem.isinftiler == 1) {
+                        tempcollinfilter.push(collectionitem);
+                    }
+                });
+            }
+            setinstcollections([...tempcollinfilter]);
+            // setinstcollections([...fetchcollectionsQueryContext?.data?.data?.collections]);
         }
     }, [fetchcollectionsQueryContext.isSuccess]);
     // useEffect(() => {
@@ -966,7 +992,6 @@ ${collectionitem.isfilterselected ? `${filter_cssstyles.timelineinnercont_active
                                                 }}
                                             >
                                                 {langdetect == 'en' ? item.name_en : item.name_ar}
-                                                {item.type}
                                             </label>
                                             <div class={'col-lg-12 pl-4 pr-4 mt-2 mb-2'} style={{ direction: 'ltr' }}>
                                                 <InputRange
@@ -2007,6 +2032,66 @@ ${collectionitem.isfilterselected ? `${filter_cssstyles.timelineinnercont_active
                                     {sectionproperties.filterType == 'Collections' && sectionproperties.showcategoriesfilter == 'Show' && <div class="row m-0 w-100">{CollectionsFilter()}</div>}
                                     {sectionproperties.showdynamicfilter == 'Show' && <div class="row m-0 w-100">{DynamicFilter()}</div>}
                                     {sectionproperties.showvariantsfilter == 'Show' && InstFilters()}
+                                    {sectionproperties.showvendorfilter == 'Show' && (
+                                        <div class="row m-0 w-100">
+                                            <div className="col-lg-12 p-0">
+                                                <div className="row m-0 w-100">
+                                                    <div class="col-lg-12 p-0 text-start mb-2">
+                                                        <p className={langdetect == 'en' ? filter_cssstyles.collapsetitle + ' m-0 p-0 ' : filter_cssstyles.collapsetitle + ' m-0 p-0 text-right'}>
+                                                            {langdetect == 'en' ? 'Brands' : 'الماركات'}
+                                                        </p>
+                                                    </div>
+
+                                                    {vendorarr.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-center pb-3 col-12 '
+                                                                }
+                                                                onClick={() => {
+                                                                    var tempfetchproductsfilerobjcontext = { ...ProductFilterObjContext };
+                                                                    // alert(JSON.stringify(tempfetchproductsfilerobjcontext));
+                                                                    tempfetchproductsfilerobjcontext.vendorsarr = [];
+                                                                    tempfetchproductsfilerobjcontext?.vendorsarr?.push(item.vendorid);
+                                                                    setProductFilterObjContext({ ...tempfetchproductsfilerobjcontext });
+                                                                    var temp = [...vendorarr];
+                                                                    temp?.forEach(function (instfilteritem, instfilterindex) {
+                                                                        instfilteritem.isfilterselected = false;
+                                                                    });
+                                                                    item.isfilterselected = true;
+
+                                                                    setvendorsarr([...temp]);
+                                                                }}
+                                                            >
+                                                                <div class="mr-2">
+                                                                    <div
+                                                                        className={
+                                                                            ` ${item.isfilterselected ? filter_cssstyles.btn_item_active : ''} ${filterstyles.btn_item} ${filter_cssstyles.btn_item}` +
+                                                                            ' 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: item.isfilterselected ? sectionproperties.activecat_color : '',
+                                                                        }}
+                                                                    >
+                                                                        {langdetect == 'en' ? item.vendorname : item.vendorname}
+                                                                    </p>
+                                                                </div>
+                                                            </div>
+                                                        );
+                                                    })}
+                                                </div>
+                                            </div>
+                                        </div>
+                                    )}
                                 </div>
                             </div>
                         </div>
@@ -2266,181 +2351,245 @@ ${collectionitem.isfilterselected ? `${filter_cssstyles.timelineinnercont_active
                                     </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">
-                                                <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
+
+                            <div className={filter_cssstyles.filteraccordion + ' col-lg-12 filter-accordion p-md-0 pl-4 pr-4 '}>
+                                {sectionproperties.otherfilters == 'Show' && (
+                                    <div class="row m-0 w-100">
+                                        <div class="col-lg-12 d-flex justify-content-start p-0">
+                                            <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 p-0">
+                                                    <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   '
+                                                                                                }
+                                                                                            >
+                                                                                                <FiChevronUp />
+                                                                                            </i>
+                                                                                        );
+                                                                                    } else {
+                                                                                        return (
+                                                                                            <i className={filter_cssstyles.collapsetitle + ' h-100 d-flex align-items-center justify-content-end   '}>
+                                                                                                <FiChevronDown />
+                                                                                            </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'
-                                                                                    ? filter_cssstyles.collapsetitle + ' m-0 p-0 collapsetitle '
-                                                                                    : filter_cssstyles.collapsetitle + ' collapsetitle m-0 p-0 text-right'
+                                                                                    ? `${filterstyles.timeline}` + ' p-sm-0 '
+                                                                                    : `${filterstyles.timeline} ${filterstyles.timelinetrans}` + ' p-sm-0 '
                                                                             }
                                                                         >
-                                                                            {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;
+                                                                            {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}
+                                                                                return (
+                                                                                    <div
+                                                                                        className={
+                                                                                            `${filterstyles.border_left_line} ${filterstyles.timelineinnercont} ${filter_cssstyles.timelineinnercont}
                                                                 ${ischecked ? `${filter_cssstyles.timelineinnercont_active} ${filterstyles.timelineinnercont_active}` : ''}
                                                                          
                                                                             ` + ' d-flex align-items-center pb-3 '
-                                                                                    }
-                                                                                    onClick={() => {
-                                                                                        var tempfetchproductsfilerobjcontext = { ...ProductFilterObjContext };
-                                                                                        if (tempfetchproductsfilerobjcontext[item.payloadvalue] == valueitem.value) {
-                                                                                            tempfetchproductsfilerobjcontext[item.payloadvalue] = '';
-                                                                                        } else {
-                                                                                            tempfetchproductsfilerobjcontext[item.payloadvalue] = valueitem.value;
                                                                                         }
-                                                                                        tempfetchproductsfilerobjcontext.page = 0;
-                                                                                        setProductFilterObjContext({ ...tempfetchproductsfilerobjcontext });
-
-                                                                                        filterrouting(tempfetchproductsfilerobjcontext);
-                                                                                    }}
-                                                                                >
-                                                                                    <div>
-                                                                                        <div
-                                                                                            className={
-                                                                                                ` ${ischecked ? filter_cssstyles.btn_item_active : ''} ${filterstyles.btn_item} ${
-                                                                                                    filter_cssstyles.btn_item
-                                                                                                }` + ' mb-2 d-flex align-items-center '
+                                                                                        onClick={() => {
+                                                                                            var tempfetchproductsfilerobjcontext = { ...ProductFilterObjContext };
+                                                                                            if (tempfetchproductsfilerobjcontext[item.payloadvalue] == valueitem.value) {
+                                                                                                tempfetchproductsfilerobjcontext[item.payloadvalue] = '';
+                                                                                            } else {
+                                                                                                tempfetchproductsfilerobjcontext[item.payloadvalue] = valueitem.value;
                                                                                             }
-                                                                                        >
-                                                                                            <i className="h-100 d-flex align-items-center"></i>
+                                                                                            tempfetchproductsfilerobjcontext.page = 0;
+                                                                                            setProductFilterObjContext({ ...tempfetchproductsfilerobjcontext });
+
+                                                                                            filterrouting(tempfetchproductsfilerobjcontext);
+                                                                                        }}
+                                                                                    >
+                                                                                        <div>
+                                                                                            <div
+                                                                                                className={
+                                                                                                    ` ${ischecked ? filter_cssstyles.btn_item_active : ''} ${filterstyles.btn_item} ${
+                                                                                                        filter_cssstyles.btn_item
+                                                                                                    }` + ' 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 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>
-                                                            </div>
-                                                        </AccordionItemPanel>
-                                                    </AccordionItem>
-                                                </Accordion>
-                                            </div>
-                                        );
-                                    })}
-                                    {sectionproperties.showfilterbyrating == 'Show' && (
-                                        <div className="col-lg-12 pl-4 pr-4">
-                                            <div className={filter_cssstyles.titlecontainer + ' row m-0 p-0 mb-2 pl-md-3 pr-md-3  '}>
-                                                <div className="col-lg-12 col-md-12 col-sm-12 p-0 mb-3">
-                                                    <p
-                                                        className={
-                                                            langdetect == 'en'
-                                                                ? filter_cssstyles.collapsetitle + ' m-0 p-0 collapsetitle '
-                                                                : filter_cssstyles.collapsetitle + ' collapsetitle m-0 p-0 text-right'
-                                                        }
-                                                    >
-                                                        {langdetect == 'en' ? 'Ratings' : 'التقييمات'}
-                                                    </p>
+                                                            </AccordionItemPanel>
+                                                        </AccordionItem>
+                                                    </Accordion>
                                                 </div>
-                                                <div className="col-lg-12 col-md-12 col-sm-12 mb-4">
-                                                    <InputRange
-                                                        draggableTrack={true}
-                                                        formatLabel={(value) => `${value}`}
-                                                        maxValue={5}
-                                                        minValue={0}
-                                                        value={raterangevalue}
-                                                        onChange={(value) => {
-                                                            setraterangevalue({ ...value });
-                                                        }}
-                                                    />
+                                            );
+                                        })}
+                                        {sectionproperties.showfilterbyrating == 'Show' && (
+                                            <div className="col-lg-12 pl-4 pr-4">
+                                                <div className={filter_cssstyles.titlecontainer + ' row m-0 p-0 mb-2 pl-md-3 pr-md-3  '}>
+                                                    <div className="col-lg-12 col-md-12 col-sm-12 p-0 mb-3">
+                                                        <p
+                                                            className={
+                                                                langdetect == 'en'
+                                                                    ? filter_cssstyles.collapsetitle + ' m-0 p-0 collapsetitle '
+                                                                    : filter_cssstyles.collapsetitle + ' collapsetitle m-0 p-0 text-right'
+                                                            }
+                                                        >
+                                                            {langdetect == 'en' ? 'Ratings' : 'التقييمات'}
+                                                        </p>
+                                                    </div>
+                                                    <div className="col-lg-12 col-md-12 col-sm-12 mb-4">
+                                                        <InputRange
+                                                            draggableTrack={true}
+                                                            formatLabel={(value) => `${value}`}
+                                                            maxValue={5}
+                                                            minValue={0}
+                                                            value={raterangevalue}
+                                                            onChange={(value) => {
+                                                                setraterangevalue({ ...value });
+                                                            }}
+                                                        />
+                                                    </div>
                                                 </div>
                                             </div>
+                                        )}
+                                    </div>
+                                )}
+
+                                {authdetailsContext.instinfo.instid == '673f49cede6cb' && (
+                                    <div class="row m-0 w-100 mb-3 mt-2">
+                                        <div class="col-lg-12 p-0 text-start mb-2">
+                                            <p className={langdetect == 'en' ? filter_cssstyles.collapsetitle + ' m-0 p-0 ' : filter_cssstyles.collapsetitle + ' m-0 p-0 text-right'}>
+                                                {langdetect == 'en' ? 'Price' : 'السعر'}
+                                            </p>
                                         </div>
-                                    )}
-                                </div>
-                            )} */}
+                                        <div className={langdetect == 'en' ? 'col-6 pl-0 pr-1' : 'col-6 pr-0 pl-1'}>
+                                            <label className={`${filter_cssstyles.collapsetitle}` + ' d-flex justify-content-start '}>{langdetect == 'en' ? 'From' : 'من'}</label>
+                                            <input
+                                                type="text"
+                                                value={pricevalue2.min}
+                                                onChange={(event) => {
+                                                    var temppricevalue = { ...pricevalue2 };
+                                                    temppricevalue.min = event.target.value;
+                                                    setpricevalue2({ ...temppricevalue });
+                                                    // var temppayloadobj = { ...pricefrom };
+                                                    // temppayloadobj = event.target.value;
+                                                    // setpricefrom({ ...temppayloadobj });
+                                                }}
+                                                style={{
+                                                    background: '#fff',
+                                                    border: '1px solid #ccc',
+                                                    borderRadius: 5,
+                                                    color: '#000',
+                                                    height: 35,
+                                                    width: '100%',
+                                                    paddingLeft: 10,
+                                                    paddingRight: 10,
+                                                }}
+                                            />
+                                        </div>
+                                        <div className={langdetect == 'en' ? 'col-6 pr-0 pl-1' : 'col-6 pl-0 pr-1'}>
+                                            <label className={`${filter_cssstyles.collapsetitle}` + ' d-flex justify-content-start '}>{langdetect == 'en' ? 'To' : 'إلى'}</label>
+                                            <input
+                                                type="text"
+                                                value={pricevalue2.max}
+                                                onChange={(event) => {
+                                                    // var temppayloadobj = { ...priceto };
+                                                    // temppayloadobj = event.target.value;
+                                                    // setpriceto({ ...temppayloadobj });
+                                                    var temppricevalue = { ...pricevalue2 };
+                                                    temppricevalue.max = event.target.value;
+                                                    setpricevalue2({ ...temppricevalue });
+                                                }}
+                                                style={{
+                                                    width: '100%',
+                                                    background: '#fff',
+                                                    border: '1px solid #ccc',
+                                                    borderRadius: 5,
+                                                    color: '#000',
+                                                    height: 35,
+                                                    paddingRight: 10,
+                                                    paddingLeft: 10,
+                                                }}
+                                            />
+                                        </div>
+                                    </div>
+                                )}
 
-                            <div className={filter_cssstyles.filteraccordion + ' col-lg-12 filter-accordion p-md-0 pl-4 pr-4 '}>
                                 {sectionproperties.showcountriesfilter == 'Show' && Countriesfilter()}
                                 {sectionproperties.showvariantsfilter == 'Show' && InstFilters()}
                                 {sectionproperties.filterType == 'All' && sectionproperties.showcategoriesfilter == 'Show' && <div class="row m-0 w-100 mb-3">{CategoriesFilter()}</div>}
                                 {sectionproperties.filterType == 'Collections' && sectionproperties.showcategoriesfilter == 'Show' && <div class="row m-0 w-100 mb-3">{CollectionsFilter()}</div>}
+                                {/* showvendorfilter */}
+
                                 {sectionproperties.showdynamicfilter == 'Show' && <div class="row m-0 w-100 mb-3">{DynamicFilter()}</div>}
                             </div>
                         </div>
@@ -2551,115 +2700,120 @@ ${collectionitem.isfilterselected ? `${filter_cssstyles.timelineinnercont_active
                                             otherfilters.map((item, index) => {
                                                 return (
                                                     <> */}
-                                        <Accordion allowMultipleExpanded={true} allowZeroExpanded={true} preExpanded={[0, 1, 2, 3]} style={{ width: '100%' }}>
-                                            <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
+                                        {sectionproperties.otherfilters == 'Show' && (
+                                            <Accordion allowMultipleExpanded={true} allowZeroExpanded={true} preExpanded={[0, 1, 2, 3]} style={{ width: '100%' }}>
+                                                <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'
+                                                                        }
+                                                                    >
+                                                                        {lang.sortby}
+                                                                    </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   '}>
+                                                                                        <FiChevronUp />
+                                                                                    </i>
+                                                                                );
+                                                                            } else {
+                                                                                return (
+                                                                                    <i className={filter_cssstyles.collapsetitle + ' h-100 d-flex align-items-center justify-content-end   '}>
+                                                                                        <FiChevronDown />
+                                                                                    </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' ? filter_cssstyles.collapsetitle + ' m-0 p-0 ' : filter_cssstyles.collapsetitle + ' m-0 p-0 text-right'
+                                                                        langdetect == 'en'
+                                                                            ? `${filterstyles.timeline}` + ' p-sm-0 '
+                                                                            : `${filterstyles.timeline} ${filterstyles.timelinetrans}` + ' p-sm-0 '
                                                                     }
                                                                 >
-                                                                    {lang.sortby}
-                                                                </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   '}>
-                                                                                    <FiChevronUp />
-                                                                                </i>
-                                                                            );
-                                                                        } else {
-                                                                            return (
-                                                                                <i className={filter_cssstyles.collapsetitle + ' h-100 d-flex align-items-center justify-content-end   '}>
-                                                                                    <FiChevronDown />
-                                                                                </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 '
-                                                                }
-                                                            >
-                                                                {otherfilters.map((item, index) => {
-                                                                    return (
-                                                                        <div class="w-100 px-3">
-                                                                            {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;
+                                                                    {otherfilters.map((item, index) => {
+                                                                        return (
+                                                                            <div class="w-100 px-3">
+                                                                                {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}
+                                                                                    return (
+                                                                                        <div
+                                                                                            className={
+                                                                                                `${filterstyles.border_left_line} ${filterstyles.timelineinnercont} ${
+                                                                                                    filter_cssstyles.timelineinnercont
+                                                                                                }
                                                                                                         ${
                                                                                                             ischecked
                                                                                                                 ? `${filter_cssstyles.timelineinnercont_active} ${filterstyles.timelineinnercont_active}`
                                                                                                                 : ''
                                                                                                         }
                                                                                                         ` + ' d-flex align-items-center pb-3 '
-                                                                                        }
-                                                                                        onClick={() => {
-                                                                                            var tempfetchproductsfilerobjcontext = { ...ProductFilterObjContext };
-                                                                                            if (tempfetchproductsfilerobjcontext[item.payloadvalue] == valueitem.value) {
-                                                                                                tempfetchproductsfilerobjcontext[item.payloadvalue] = '';
-                                                                                            } else {
-                                                                                                tempfetchproductsfilerobjcontext[item.payloadvalue] = valueitem.value;
                                                                                             }
-                                                                                            tempfetchproductsfilerobjcontext.page = 0;
-                                                                                            setProductFilterObjContext({ ...tempfetchproductsfilerobjcontext });
+                                                                                            onClick={() => {
+                                                                                                var tempfetchproductsfilerobjcontext = { ...ProductFilterObjContext };
+                                                                                                if (tempfetchproductsfilerobjcontext[item.payloadvalue] == valueitem.value) {
+                                                                                                    tempfetchproductsfilerobjcontext[item.payloadvalue] = '';
+                                                                                                } else {
+                                                                                                    tempfetchproductsfilerobjcontext[item.payloadvalue] = valueitem.value;
+                                                                                                }
+                                                                                                tempfetchproductsfilerobjcontext.page = 0;
+                                                                                                setProductFilterObjContext({ ...tempfetchproductsfilerobjcontext });
 
-                                                                                            filterrouting(tempfetchproductsfilerobjcontext);
-                                                                                            setsortbycontext(valueitem.name);
-                                                                                        }}
-                                                                                    >
-                                                                                        <div
-                                                                                            className={
-                                                                                                ` ${ischecked ? filter_cssstyles.btn_item_active : ''} ${filterstyles.btn_item} ${
-                                                                                                    filter_cssstyles.btn_item
-                                                                                                }` + ' d-flex align-items-center '
-                                                                                            }
+                                                                                                filterrouting(tempfetchproductsfilerobjcontext);
+                                                                                                setsortbycontext(valueitem.name);
+                                                                                            }}
                                                                                         >
-                                                                                            <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: ischecked ? sectionproperties.activecat_color : '',
-                                                                                                }}
+                                                                                            <div
+                                                                                                className={
+                                                                                                    ` ${ischecked ? filter_cssstyles.btn_item_active : ''} ${filterstyles.btn_item} ${
+                                                                                                        filter_cssstyles.btn_item
+                                                                                                    }` + ' d-flex align-items-center '
+                                                                                                }
                                                                                             >
-                                                                                                {valueitem.name}
-                                                                                            </p>
+                                                                                                <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: ischecked ? sectionproperties.activecat_color : '',
+                                                                                                    }}
+                                                                                                >
+                                                                                                    {valueitem.name}
+                                                                                                </p>
+                                                                                            </div>
                                                                                         </div>
-                                                                                    </div>
-                                                                                );
-                                                                            })}
-                                                                        </div>
-                                                                    );
-                                                                })}
-                                                                {/* {item.filterarray.map((valueitem, valueindex) => {
+                                                                                    );
+                                                                                })}
+                                                                            </div>
+                                                                        );
+                                                                    })}
+                                                                    {/* {item.filterarray.map((valueitem, valueindex) => {
                                                                                     var ischecked = false;
                                                                                     if (item.payloadvalue == 'sortprice') {
                                                                                         if (valueitem.value == ProductFilterObjContext.sortprice) {
@@ -2715,12 +2869,66 @@ ${collectionitem.isfilterselected ? `${filter_cssstyles.timelineinnercont_active
                                                                                         </div>
                                                                                     );
                                                                                 })} */}
+                                                                </div>
                                                             </div>
                                                         </div>
-                                                    </div>
-                                                </AccordionItemPanel>
-                                            </AccordionItem>
-                                        </Accordion>
+                                                    </AccordionItemPanel>
+                                                </AccordionItem>
+                                            </Accordion>
+                                        )}
+                                        {authdetailsContext.instinfo.instid == '673f49cede6cb' && (
+                                            <div class="row m-0 w-100 mb-3 mt-2 px-3">
+                                                <div class="col-lg-12 p-0 text-start mb-2">
+                                                    <p className={langdetect == 'en' ? filter_cssstyles.collapsetitle + ' m-0 p-0 ' : filter_cssstyles.collapsetitle + ' m-0 p-0 text-right'}>
+                                                        {langdetect == 'en' ? 'Price' : 'السعر'}
+                                                    </p>
+                                                </div>
+                                                <div className={langdetect == 'en' ? 'col-6 pl-0 pr-1' : 'col-6 pr-0 pl-1'}>
+                                                    <label className={`${filter_cssstyles.collapsetitle}` + ' d-flex justify-content-start '}>{langdetect == 'en' ? 'From' : 'من'}</label>
+                                                    <input
+                                                        type="text"
+                                                        value={pricefrom}
+                                                        onChange={(event) => {
+                                                            var temppricevalue = { ...pricevalue2 };
+                                                            temppricevalue.min = event.target.value;
+                                                            setpricevalue2({ ...temppricevalue });
+                                                        }}
+                                                        style={{
+                                                            background: '#fff',
+                                                            border: '1px solid #ccc',
+                                                            borderRadius: 5,
+                                                            color: '#000',
+                                                            height: 35,
+                                                            width: '100%',
+                                                            paddingLeft: 15,
+                                                            paddingRight: 15,
+                                                        }}
+                                                    />
+                                                </div>
+                                                <div className={langdetect == 'en' ? 'col-6 pr-0 pl-1' : 'col-6 pl-0 pr-1'}>
+                                                    <label className={`${filter_cssstyles.collapsetitle}` + ' d-flex justify-content-start '}>{langdetect == 'en' ? 'To' : 'إلى'}</label>
+                                                    <input
+                                                        type="text"
+                                                        value={priceto}
+                                                        onChange={(event) => {
+                                                            var temppricevalue = { ...pricevalue2 };
+                                                            temppricevalue.max = event.target.value;
+                                                            setpricevalue2({ ...temppricevalue });
+                                                        }}
+                                                        style={{
+                                                            width: '100%',
+                                                            background: '#fff',
+                                                            border: '1px solid #ccc',
+                                                            borderRadius: 5,
+                                                            color: '#000',
+                                                            height: 35,
+                                                            paddingLeft: 15,
+                                                            paddingRight: 15,
+                                                        }}
+                                                    />
+                                                </div>
+                                            </div>
+                                        )}
                                         {/* <hr className="mt-3 mb-3" /> */}
                                         {/* </>
                                                 );