tabexseriescomponents 0.0.706 → 0.0.708

package/srcoman/TabexComponents/StaticPages/Categoriesdropdown/Categoriesdropdown.jsx

@@ -0,0 +1,460 @@
+import React, { useEffect, useState } from 'react';
+import generalstyles from '../../../styles/general/general.module.css';
+import { css } from 'glamor';
+// import '../../../styles/staticpages/accordion.module.css';
+import { BsChevronLeft } from '@react-icons/all-files/bs/BsChevronLeft';
+import { BsChevronRight } from '@react-icons/all-files/bs/BsChevronRight';
+import { RiArrowUpSLine } from '@react-icons/all-files/ri/RiArrowUpSLine';
+import { RiArrowDownSLine } from '@react-icons/all-files/ri/RiArrowDownSLine';
+import { IoIosArrowRoundForward } from '@react-icons/all-files/io/IoIosArrowRoundForward';
+import { IoIosArrowRoundBack } from '@react-icons/all-files/io/IoIosArrowRoundBack';
+import { Imagekitimagecomp } from '../../../Imagekitconfig.jsx';
+import { Accordion, AccordionItem, AccordionItemHeading, AccordionItemButton, AccordionItemPanel, AccordionItemState } from 'react-accessible-accordion';
+import { FiChevronUp } from '@react-icons/all-files/fi/FiChevronUp';
+import { FiChevronDown } from '@react-icons/all-files/fi/FiChevronDown';
+import { HiOutlinePlus } from '@react-icons/all-files/hi/HiOutlinePlus';
+import { AiOutlineMinus } from '@react-icons/all-files/ai/AiOutlineMinus';
+
+const Categoriesdropdown = (props) => {
+    const [sectionproperties, setsectionproperties] = useState('');
+    const lang = props.actions.lang;
+    const langdetect = props.actions.langdetect;
+    const authdetailsContext = props.actions.authdetailsContext;
+    const routingcountext = props.actions.routingcountext;
+    const StaticPagesLinksContext = props.actions.StaticPagesLinksContext;
+    const ikimagecredcontext = props.actions.ikimagecredcontext;
+    const StatePagePropertiesContext = props.actions.StatePagePropertiesContext;
+    const templatepropcontext = props.actions.templatepropcontext;
+    const templateproperties_context = props.actions.templateproperties_context;
+    const actions = props.actions;
+    const history = props.actions.history;
+    const [showdownheadermenu, setshowdownheadermenu] = useState(false);
+    const [Choosenindex, setChoosenindex] = useState('');
+    const [CurrentPageId, setCurrentPageId] = useState('');
+    const CurrentSrcTypeContext = props.actions.CurrentSrcTypeContext;
+
+    useEffect(() => {
+        var cartindex = templatepropcontext.pagesnprop.findIndex((x) => x.staticpageid == '62a215c38a639');
+        if (cartindex >= 0) {
+            setCurrentPageId(cartindex);
+        }
+    }, [templatepropcontext]);
+    useEffect(() => {
+        var secpropobj = {};
+        templatepropcontext?.pagesnprop[CurrentPageId]?.pageproperties?.forEach(function (arrayItem, arrayindex) {
+            secpropobj[arrayItem.property_css_name] = arrayItem.property_value;
+        });
+        setsectionproperties({ ...secpropobj });
+    }, [CurrentPageId]);
+    useEffect(() => {
+        if (CurrentSrcTypeContext == 'workplace') {
+            if (StatePagePropertiesContext != null && StatePagePropertiesContext != undefined && StatePagePropertiesContext.length != 0) {
+                var secpropobj = {};
+                StatePagePropertiesContext?.pageobj?.pageproperties?.forEach(function (arrayItem, arrayindex) {
+                    secpropobj[arrayItem.property_css_name] = arrayItem.property_value;
+                });
+                setsectionproperties({ ...secpropobj });
+            }
+        }
+    }, [StatePagePropertiesContext]);
+    const slideshow_styles = {
+        categoryname: css({
+            color: templateproperties_context.subheader_categorytitle_fontColor,
+            fontSize: templateproperties_context.subheader_categorytitle_fontSize + 'px',
+            fontWeight: templateproperties_context.subheader_categorytitle_textfontweight,
+            transition: '.3s',
+            ':hover': {
+                color: templateproperties_context.subheader_categorytitle_coloronhover,
+            },
+        }),
+        parentcollection: css({
+            color: templateproperties_context.subheader_collectiontitle_fontColor,
+            fontSize: templateproperties_context.subheader_collectiontitle_fontSize + 'px',
+            textTransform: templateproperties_context.subheader_collectiontitle_textTransform,
+            fontWeight: templateproperties_context.subheader_collectiontitle_textfontweight,
+            transition: '.3s',
+            ':hover': {
+                color: templateproperties_context.subheader_collectiontitle_coloronhover,
+            },
+        }),
+        collectionName: css({
+            color: templateproperties_context.collectionsectiontextcolor,
+            fontSize: templateproperties_context.collectionsectiontextfontsize + 'px',
+            textTransform: templateproperties_context.collectionsectiontexttransform,
+            fontWeight: templateproperties_context.collectionsectiontextfontweight,
+            transition: '.3s',
+            ':hover': {
+                color: templateproperties_context.collectionsectiontextcoloronhover,
+            },
+        }),
+        dropdowntitle: css({
+            color: templateproperties_context.collectionssectiontitlecolor,
+            fontSize: templateproperties_context.collectionssectiontitlefontsize + 'px',
+            fontWeight: templateproperties_context.collectionssectiontitlefonteweight,
+            backgroundColor: templateproperties_context.collectionssectiontitlebgcolor,
+        }),
+        innerSection: css({
+            backgroundColor: templateproperties_context.innersectiontitlebgcolor,
+            borderRadius: templateproperties_context.innersectiontitleborderradius + 'px',
+            paddingTop: 10,
+            paddingBottom: 10,
+            paddingLeft: 10,
+            paddingRight: 10,
+            marginBottom: 15,
+        }),
+    };
+    const CategoriesDropdown = () => {
+        return (
+            <div
+                class="row m-0 w-100"
+                style={{
+                    background: templateproperties_context.collectionssectionbgcolor,
+                    boxShadow: '0 0 10px ' + templateproperties_context.collectionssectionshadowcolor,
+                }}
+            >
+                <div class="col-lg-12 p-0">
+                    <div class="row m-0 w-100">
+                        <div
+                            className={slideshow_styles.dropdowntitle + ' col-lg-12 p-0 d-flex '}
+                            style={{
+                                justifyContent: templateproperties_context.titlecentered == 'Centered' ? 'center' : 'start',
+                            }}
+                        >
+                            <p
+                                className="m-0 p-3 w-100 d-flex"
+                                style={{
+                                    justifyContent: templateproperties_context.titlecentered == 'Centered' ? 'center' : 'start',
+                                }}
+                            >
+                                {langdetect == 'en' ? templateproperties_context.collectionssectiontitleen : templateproperties_context.collectionssectiontitlear}
+                            </p>
+                        </div>
+                        <div class="col-lg-12 flex-column editor-accordion p-0">
+                            {/* templateproperties_context.fetchparenttype == 'Categories' && */}
+                            {authdetailsContext?.instinfo?.instcategories?.map((categoryItem, categoryindex) => (
+                                <Accordion allowMultipleExpanded={true} allowZeroExpanded={true}>
+                                    <AccordionItem uuid={categoryindex}>
+                                        <AccordionItemHeading>
+                                            <AccordionItemButton>
+                                                <div className={slideshow_styles.categoryname + ' row m-0 p-0 mb-1 pl-md-3 pr-md-3 '}>
+                                                    <div className="col-lg-10 col-md-10 col-sm-10 p-0 d-flex align-items-center justify-content-start">
+                                                        {templateproperties_context.showcatimage == 'Show' && (
+                                                            <div
+                                                                style={{
+                                                                    width: '6vh',
+                                                                    height: '6vh',
+                                                                    marginRight: langdetect == 'en' ? '5px' : 0,
+                                                                    marginLeft: langdetect == 'ar' ? '5px' : 0,
+                                                                }}
+                                                            >
+                                                                <Imagekitimagecomp
+                                                                    urlEndpoint={ikimagecredcontext?.ikimageendpoint}
+                                                                    publicKey={ikimagecredcontext?.ikimagepublickey}
+                                                                    path={categoryItem.categorylogo}
+                                                                    loading="lazy"
+                                                                    style={{
+                                                                        width: '100%',
+                                                                        height: '100%',
+                                                                        objectFit: 'contain',
+                                                                    }}
+                                                                />
+                                                            </div>
+                                                        )}
+                                                        <p
+                                                            className={slideshow_styles.categoryname + ' m-0 p-0 '}
+                                                            style={{
+                                                                textTransform: templateproperties_context.subheader_categorytitle_textTransform,
+                                                            }}
+                                                        >
+                                                            {langdetect == 'en' ? categoryItem.title_en : categoryItem.title_ar}
+                                                        </p>
+                                                    </div>
+                                                    {templateproperties_context.showIcon == 'Show' && (
+                                                        <div className="col-lg-2 col-md-2 col-sm-2 p-0 d-flex align-items-center justify-content-end">
+                                                            <AccordionItemState>
+                                                                {(state) => {
+                                                                    if (state.expanded == true) {
+                                                                        return (
+                                                                            <i className={slideshow_styles.categoryname + ' h-100 d-flex align-items-center justify-content-end '}>
+                                                                                <AiOutlineMinus />
+                                                                            </i>
+                                                                        );
+                                                                    } else {
+                                                                        return (
+                                                                            <i className={slideshow_styles.categoryname + ' h-100 d-flex align-items-center justify-content-end '}>
+                                                                                <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">
+                                                {templateproperties_context.innersection_show == 'Show' && (
+                                                    <div class="col-lg-12 mb-3 allcentered">
+                                                        <div class={slideshow_styles.innerSection + ' col-lg-12 allcentered '}>
+                                                            <p
+                                                                class={slideshow_styles.categoryname + ' m-0 p-0 cursor-pointer '}
+                                                                style={{
+                                                                    textTransform: templateproperties_context.subheader_categorytitle_textTransform,
+                                                                }}
+                                                                onClick={() => {
+                                                                    routingcountext(StaticPagesLinksContext.GeneralProductsComponent, true, 'categories/' + categoryItem.categoryid);
+                                                                }}
+                                                            >
+                                                                {langdetect == 'en' ? templateproperties_context.innersectioncontenten : templateproperties_context.innersectioncontentar}{' '}
+                                                                {langdetect == 'en' ? categoryItem.title_en : categoryItem.title_ar}
+                                                            </p>
+                                                        </div>
+                                                    </div>
+                                                )}
+                                                {categoryItem.parentcolletions.map((parentcollectionitem, parentcollectionindex) => {
+                                                    if (parentcollectionitem.isinftiler == 1) {
+                                                        return (
+                                                            <div class="col-lg-12">
+                                                                <Accordion allowMultipleExpanded={true} allowZeroExpanded={true}>
+                                                                    <AccordionItem uuid={parentcollectionindex}>
+                                                                        <AccordionItemHeading>
+                                                                            <AccordionItemButton>
+                                                                                <div className={slideshow_styles.parentcollection + ' 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 d-flex align-items-center justify-content-start">
+                                                                                        {templateproperties_context.pcoleectionshowimages == 'Show' && (
+                                                                                            <div
+                                                                                                style={{
+                                                                                                    width: '4.5vh',
+                                                                                                    height: '4.5vh',
+                                                                                                    marginRight: langdetect == 'en' ? '5px' : 0,
+                                                                                                    marginLeft: langdetect == 'ar' ? '5px' : 0,
+                                                                                                }}
+                                                                                            >
+                                                                                                <Imagekitimagecomp
+                                                                                                    urlEndpoint={ikimagecredcontext?.ikimageendpoint}
+                                                                                                    publicKey={ikimagecredcontext?.ikimagepublickey}
+                                                                                                    path={parentcollectionitem.parentcollectionlogo}
+                                                                                                    loading="lazy"
+                                                                                                    style={{
+                                                                                                        width: '100%',
+                                                                                                        height: '100%',
+                                                                                                        objectFit: 'contain',
+                                                                                                    }}
+                                                                                                />
+                                                                                            </div>
+                                                                                        )}
+                                                                                        <p className={slideshow_styles.parentcollection + ' text-capitalize m-0 p-0 '}>
+                                                                                            {langdetect == 'en' ? parentcollectionitem.title_en : parentcollectionitem.title_ar}
+                                                                                        </p>
+                                                                                    </div>
+                                                                                    {templateproperties_context.showIcon == 'Show' && (
+                                                                                        <div className="col-lg-2 col-md-2 col-sm-2 p-0 d-flex align-items-center justify-content-end">
+                                                                                            <AccordionItemState>
+                                                                                                {(state) => {
+                                                                                                    if (state.expanded == true) {
+                                                                                                        return (
+                                                                                                            <i
+                                                                                                                className={
+                                                                                                                    slideshow_styles.parentcollection +
+                                                                                                                    ' h-100 d-flex align-items-center justify-content-end '
+                                                                                                                }
+                                                                                                            >
+                                                                                                                <AiOutlineMinus />
+                                                                                                            </i>
+                                                                                                        );
+                                                                                                    } else {
+                                                                                                        return (
+                                                                                                            <i
+                                                                                                                className={
+                                                                                                                    slideshow_styles.parentcollection +
+                                                                                                                    ' h-100 d-flex align-items-center justify-content-end '
+                                                                                                                }
+                                                                                                            >
+                                                                                                                <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 ">
+                                                                                {templateproperties_context.innersection_show == 'Show' && (
+                                                                                    <div class="col-lg-12 mb-3 allcentered">
+                                                                                        <div class={slideshow_styles.innerSection + ' col-lg-12 allcentered '}>
+                                                                                            <p
+                                                                                                class={slideshow_styles.parentcollection + ' m-0 p-0 cursor-pointer '}
+                                                                                                style={{
+                                                                                                    textTransform: templateproperties_context.subheader_categorytitle_textTransform,
+                                                                                                }}
+                                                                                                onClick={() => {
+                                                                                                    routingcountext(
+                                                                                                        StaticPagesLinksContext.GeneralProductsComponent,
+                                                                                                        true,
+                                                                                                        'parentcollections/' + parentcollectionitem.parentcollectionid,
+                                                                                                    );
+                                                                                                }}
+                                                                                            >
+                                                                                                {langdetect == 'en'
+                                                                                                    ? templateproperties_context.innersectioncontenten
+                                                                                                    : templateproperties_context.innersectioncontentar}{' '}
+                                                                                                {langdetect == 'en' ? parentcollectionitem.title_en : parentcollectionitem.title_ar}
+                                                                                            </p>
+                                                                                        </div>
+                                                                                    </div>
+                                                                                )}
+                                                                                <div className={'col-lg-12 mb-2'}>
+                                                                                    {parentcollectionitem?.collections?.map((collectionitem, collectionindex) => {
+                                                                                        if (collectionitem.isinftiler == 1) {
+                                                                                            return (
+                                                                                                <p
+                                                                                                    onClick={() => {
+                                                                                                        setCollectionFilterFunc(collectionitem.collectionid);
+                                                                                                    }}
+                                                                                                    className={`${slideshow_styles.collectionName}` + ' cursor-pointer m-0 p-0 '}
+                                                                                                >
+                                                                                                    {langdetect == 'en' ? collectionitem.title_en : collectionitem.title_ar}
+                                                                                                </p>
+                                                                                            );
+                                                                                        }
+                                                                                    })}
+                                                                                </div>
+                                                                            </div>
+                                                                        </AccordionItemPanel>
+                                                                    </AccordionItem>
+                                                                </Accordion>
+                                                            </div>
+                                                        );
+                                                    }
+                                                })}
+                                            </div>
+                                        </AccordionItemPanel>
+                                    </AccordionItem>
+                                </Accordion>
+                            ))}
+                            {/* {templateproperties_context.fetchparenttype == 'Parent Collections' &&
+                                pcollarray?.map((item, index) => {
+                                    if (item.isshowntocustomers == 1) {
+                                        return (
+                                            <div
+                                                class={slideshow_styles.parentcollection + ' row ml-0 mr-0 w-100 cursor-pointer '}
+                                                onMouseEnter={() => {
+                                                    setshowdownheadermenu(true);
+                                                    setChoosenindex(index);
+                                                }}
+                                            >
+                                                <div className={' col-lg-10 col-md-10 col-sm-10 p-0 d-flex justify-content-start align-items-center p-0 '}>
+                                                    <p
+                                                        class={' m-0 p-0 wordbreak wordbreak1 '}
+                                                        onClick={() => {
+                                                            routingcountext(StaticPagesLinksContext.GeneralProductsComponent, true, 'parentcollections/' + item.parentcollectionid);
+                                                        }}
+                                                    >
+                                                        {langdetect == 'en' ? item.title_en : item.title_ar}
+                                                    </p>
+                                                </div>
+                                                <div className={'col-lg-2 col-md-2 col-sm-2 d-flex justify-content-end align-items-center p-0 '}>
+                                                    <i className={' p-0 h-100 allcentered '}>
+                                                        {langdetect == 'en' ? (
+                                                            <BsChevronRight size={templateproperties_context.collectionsectioniconfontsize} />
+                                                        ) : (
+                                                            <BsChevronLeft size={templateproperties_context.collectionsectioniconfontsize} />
+                                                        )}
+                                                    </i>
+                                                </div>
+                                                {index != pcollarray - 1 && (
+                                                    <div className="col-lg-12 p-0 mt-3 mb-3">
+                                                        <hr class="m-0" />
+                                                    </div>
+                                                )}
+                                            </div>
+                                        );
+                                    }
+                                })}
+                            {templateproperties_context.fetchparenttype == 'Collections' &&
+                                authdetailsContext?.instinfo?.instcollections.map((item, index) => {
+                                    if (item.isshowntocustomers == 1) {
+                                        return (
+                                            <div
+                                                class={slideshow_styles.parentcollection + ' row ml-0 mr-0 w-100 cursor-pointer '}
+                                                onMouseEnter={() => {
+                                                    setshowdownheadermenu(true);
+                                                    setChoosenindex(index);
+                                                }}
+                                            >
+                                                <div className={' col-lg-12 col-md-12 col-sm-12 p-0 d-flex justify-content-start align-items-center p-0 '}>
+                                                     {templateproperties_context.showcatimage == 'Show' && (
+                                                        <div
+                                                            style={{
+                                                                width: '4.5vh',
+                                                                height: '4.5vh',
+                                                                marginRight: langdetect == 'en' ? '5px' : 0,
+                                                                marginLeft: langdetect == 'ar' ? '5px' : 0,
+                                                            }}
+                                                        >
+                                                            <Imagekitimagecomp
+                                                                urlEndpoint={ikimagecredcontext?.ikimageendpoint}
+                                                                publicKey={ikimagecredcontext?.ikimagepublickey}
+                                                                path={item.collectionlogo}
+                                                                loading="lazy"
+                                                                style={{
+                                                                    width: '100%',
+                                                                    height: '100%',
+                                                                    objectFit: 'contain',
+                                                                }}
+                                                            />
+                                                        </div>
+                                                    )} 
+                                                    <p
+                                                        class={' m-0 p-0 wordbreak wordbreak1 '}
+                                                        onClick={() => {
+                                                            routingcountext(StaticPagesLinksContext.GeneralProductsComponent, true, 'collections/' + item.collectionid);
+                                                        }}
+                                                    >
+                                                        {langdetect == 'en' ? item.title_en : item.title_ar}
+                                                    </p>
+                                                </div>
+                                                {index != pcollarray - 1 && (
+                                                    <div className="col-lg-12 p-0 mt-3 mb-3">
+                                                        <hr class="m-0" />
+                                                    </div>
+                                                )}
+                                            </div>
+                                        );
+                                    }
+                                })} */}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    };
+    return (
+        <div class="col-lg-2 m-0 w-100 p-0" style={{}}>
+            <div
+                class="col-lg-2 d-flex d-md-none p-0"
+                style={{
+                    marginTop: templateproperties_context.collectionsectionmt + 'px',
+                    position: 'fixed',
+                }}
+            >
+                {CategoriesDropdown()}
+            </div>
+            <div
+                class="col-lg-12 d-none d-md-flex p-0"
+                style={{
+                    marginTop: templateproperties_context.collectionsectionmtresp + 'px',
+                }}
+            >
+                {CategoriesDropdown()}
+            </div>
+        </div>
+    );
+};
+export default Categoriesdropdown;