tabexseriescomponents 0.0.217 → 0.0.220

package/srcold/TabexComponents/Sections/BackgroundImages/BacgroundThreeImageWithCategories/BacgroundThreeImageWithCategories.jsx

@@ -0,0 +1,448 @@
+import React, { useEffect, useState, useContext } from 'react';
+import { css } from 'glamor';
+import { IKImage } from 'imagekitio-react';
+import { IKpublicKey, IKurlEndpoint } from '../../../../../Env';
+import { BsChevronLeft } from '@react-icons/all-files/bs/BsChevronLeft';
+import { BsChevronRight } from '@react-icons/all-files/bs/BsChevronRight';
+const BacgroundThreeImageWithCategories = (props) => {
+    const lang = props.actions.lang;
+    const langdetect = props.actions.langdetect;
+    const StatePagePropertiesContext = props.actions.StatePagePropertiesContext;
+    const routingcountext = props.actions.routingcountext;
+    const StaticPagesLinksContext = props.actions.StaticPagesLinksContext;
+    const [sectionproperties, setsectionproperties] = useState('');
+    const [imagesarray, setimagesarray] = useState([]);
+    const authdetailsContext = props.actions.authdetailsContext;
+    const [showdownheadermenu, setshowdownheadermenu] = useState(false);
+    const [Choosenindex, setChoosenindex] = useState('');
+
+    useEffect(() => {
+        if (props.srcfrom == 'addsectionform') {
+            var secpropobj = {};
+            props.defaultproperties.forEach(function (defaultpropobj, defaultpropindex) {
+                secpropobj[defaultpropobj.property_css_name] = defaultpropobj.property_value;
+            });
+            setsectionproperties({ ...secpropobj });
+        } else {
+            var secpropobj = {};
+            StatePagePropertiesContext.pageobj.sections.forEach(function (sectionitem, sectionindex) {
+                if (sectionitem.sectionid == props.sectionidprops) {
+                    sectionitem.sectionproperties.forEach(function (sectionpropertiesobj, sectionpropertiesindex) {
+                        secpropobj[sectionpropertiesobj.property_css_name] = sectionpropertiesobj.property_value;
+                    });
+                }
+            });
+            setsectionproperties({ ...secpropobj });
+        }
+    }, [StatePagePropertiesContext]);
+
+    useEffect(() => {
+        if (sectionproperties.length != 0) {
+            if (sectionproperties.arrayofobjectimagesonly != null) {
+                var arrayofobjectimagesonlyparsed = JSON.parse(sectionproperties.arrayofobjectimagesonly);
+                if (Array.isArray(arrayofobjectimagesonlyparsed)) {
+                    setimagesarray([...arrayofobjectimagesonlyparsed]);
+                }
+            }
+        }
+    }, [sectionproperties]);
+    const [pcollarray, setpcollarray] = useState([]);
+    useEffect(() => {
+        var temppcollarray = [...pcollarray];
+        authdetailsContext?.instinfo?.instcategories?.forEach(function (arrayItem) {
+            arrayItem?.parentcolletions?.forEach(function (item) {
+                temppcollarray.push(item);
+            });
+        });
+        setpcollarray([...temppcollarray]);
+    }, []);
+    const sectionstyles = {
+        imageBackground: css({
+            ':before': {
+                content: ' ',
+                position: 'absolute',
+                width: '100%',
+                height: '100%',
+                backgroundColor: 'rgba(0,0,0,' + sectionproperties.darknessopacity + ')',
+                zIndex: 1,
+                borderTopLeftRadius: sectionproperties.image_bordertopleftradius + 'px',
+                borderTopRightRadius: sectionproperties.image_bordertoprightradius + 'px',
+                borderBottomLeftRadius: sectionproperties.image_borderBottomLeftRadius + 'px',
+                borderBottomRightRadius: sectionproperties.image_borderBottomRightRadius + 'px',
+            },
+        }),
+        categoryname: css({
+            color: sectionproperties.subheader_categorytitle_fontColor,
+            fontSize: sectionproperties.subheader_categorytitle_fontSize + 'px',
+            textTransform: sectionproperties.subheader_categorytitle_textTransform,
+            fontWeight: sectionproperties.subheader_categorytitle_textfontweight,
+            transition: '.3s',
+            ':hover': {
+                color: sectionproperties.subheader_categorytitle_coloronhover,
+            },
+        }),
+        parentcollection: css({
+            color: sectionproperties.subheader_collectiontitle_fontColor,
+            fontSize: sectionproperties.subheader_collectiontitle_fontSize + 'px',
+            textTransform: sectionproperties.subheader_collectiontitle_textTransform,
+            fontWeight: sectionproperties.subheader_collectiontitle_textfontweight,
+            transition: '.3s',
+            ':hover': {
+                color: sectionproperties.subheader_collectiontitle_coloronhover,
+            },
+        }),
+        collectionName: css({
+            color: sectionproperties.collectionsectiontextcolor,
+            fontSize: sectionproperties.collectionsectiontextfontsize + 'px',
+            textTransform: sectionproperties.collectionsectiontexttransform,
+            fontWeight: sectionproperties.collectionsectiontextfontweight,
+            transition: '.3s',
+            ':hover': {
+                color: sectionproperties.collectionsectiontextcoloronhover,
+            },
+        }),
+        dropdowntitle: css({
+            color: sectionproperties.collectionssectiontitlecolor,
+            fontSize: sectionproperties.collectionssectiontitlefontsize + 'px',
+            fontWeight: sectionproperties.collectionssectiontitlefonteweight,
+            backgroundColor: sectionproperties.collectionssectiontitlebgcolor,
+        }),
+    };
+    const CategoriesDropdown = () => {
+        return (
+            <div
+                class="row m-0 w-100"
+                style={{
+                    background: sectionproperties.collectionssectionbgcolor,
+                    boxShadow: '0 0 10px ' + sectionproperties.collectionssectionshadowcolor,
+                }}
+            >
+                <div class="col-lg-12 p-0">
+                    <div class="row m-0 w-100">
+                        <div className={sectionstyles.dropdowntitle + ' col-lg-12 p-0 '}>
+                            <p className="m-0 p-3 text-center">{langdetect == 'en' ? sectionproperties.collectionssectiontitleen : sectionproperties.collectionssectiontitlear}</p>
+                        </div>
+                        <div class="col-lg-12 flex-column cat_dropdown_hover scrollvertical pt-3 px-2" style={{ height: sectionproperties.height + 'vh', overflowY: 'scroll' }}>
+                            {sectionproperties.fetchparenttype == 'Categories' &&
+                                authdetailsContext?.instinfo?.instcategories?.map((item, index) => (
+                                    <div
+                                        class={sectionstyles.categoryname + ' 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, 'categories/' + item.categoryid);
+                                                }}
+                                            >
+                                                {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={sectionproperties.collectionsectioniconfontsize} />
+                                                ) : (
+                                                    <BsChevronLeft size={sectionproperties.collectionsectioniconfontsize} />
+                                                )}
+                                            </i>
+                                        </div>
+                                        {index != authdetailsContext?.instinfo?.instcategories - 1 && (
+                                            <div className="col-lg-12 p-0 mt-3 mb-3">
+                                                <hr class="m-0" />
+                                            </div>
+                                        )}
+                                    </div>
+                                ))}
+                            {sectionproperties.fetchparenttype == 'Parent Collections' &&
+                                pcollarray?.map((item, index) => {
+                                    if (item.isshowntocustomers == 1) {
+                                        return (
+                                            <div
+                                                class={sectionstyles.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={sectionproperties.collectionsectioniconfontsize} />
+                                                        ) : (
+                                                            <BsChevronLeft size={sectionproperties.collectionsectioniconfontsize} />
+                                                        )}
+                                                    </i>
+                                                </div>
+                                                {index != pcollarray - 1 && (
+                                                    <div className="col-lg-12 p-0 mt-3 mb-3">
+                                                        <hr class="m-0" />
+                                                    </div>
+                                                )}
+                                            </div>
+                                        );
+                                    }
+                                })}
+                            {sectionproperties.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 '}>
+                                                    <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>
+                        {sectionproperties.fetchparenttype == 'Categories' && Choosenindex.length != 0 && authdetailsContext?.instinfo?.instcategories[Choosenindex]?.parentcolletions?.length != 0 && (
+                            <div
+                                class={langdetect == 'en' ? 'cat_dropdown-menu cat_dropdown cat_dropdownen' : 'cat_dropdown-menu cat_dropdown cat_dropdownar'}
+                                style={{
+                                    minHeight: sectionproperties.height + 'vh',
+                                }}
+                                onMouseLeave={() => {
+                                    setChoosenindex('');
+                                }}
+                            >
+                                <div class="row m-0 w-100">
+                                    {authdetailsContext?.instinfo?.instcategories[Choosenindex]?.parentcolletions?.map((item, index) => (
+                                        <div class="col-lg-4 p-0">
+                                            <p
+                                                class={sectionstyles.parentcollection + ' m-0 p-0 mb-3 cursor-pointer wordbreak wordbreak2 '}
+                                                onClick={() => {
+                                                    routingcountext(StaticPagesLinksContext.GeneralProductsComponent, true, 'parentcollections/' + item.parentcollectionid);
+                                                }}
+                                                style={{
+                                                    textAlign: langdetect == 'en' ? 'left' : 'right',
+                                                }}
+                                            >
+                                                {langdetect == 'en' ? item.title_en : item.title_ar}
+                                            </p>
+                                            {item?.collections?.map((item, index) => (
+                                                <div class="col-lg-12 pl-1 pr-1">
+                                                    <p
+                                                        class={sectionstyles.collectionName + ' cursor-pointer wordbreak wordbreak2 mb-1 '}
+                                                        onClick={() => {
+                                                            routingcountext(StaticPagesLinksContext.GeneralProductsComponent, true, 'collections/' + item.collectionid);
+                                                        }}
+                                                        style={{
+                                                            textAlign: langdetect == 'en' ? 'left' : 'right',
+                                                        }}
+                                                    >
+                                                        {langdetect == 'en' ? item.title_en : item.title_ar}
+                                                    </p>
+                                                </div>
+                                            ))}
+                                        </div>
+                                    ))}
+                                </div>
+                            </div>
+                        )}
+                        {sectionproperties.fetchparenttype == 'Parent Collections' && Choosenindex.length != 0 && (
+                            <div
+                                class={langdetect == 'en' ? 'cat_dropdown-menu cat_dropdown cat_dropdownen' : 'cat_dropdown-menu cat_dropdown cat_dropdownar'}
+                                style={{
+                                    minHeight: sectionproperties.height + 'vh',
+                                }}
+                                onMouseLeave={() => {
+                                    setChoosenindex('');
+                                }}
+                            >
+                                <div class="row m-0 w-100">
+                                    {authdetailsContext?.instinfo?.instcategories[0]?.parentcolletions[Choosenindex]?.collections?.map((item, index) => (
+                                        <div
+                                            class="col-lg-4 p-0"
+                                            onClick={() => {
+                                                routingcountext(StaticPagesLinksContext.GeneralProductsComponent, true, 'collections/' + item.collectionid);
+                                            }}
+                                        >
+                                            <div class="col-lg-12 pl-1 pr-1">
+                                                <p
+                                                    class={sectionstyles.collectionName + ' cursor-pointer wordbreak wordbreak2 mb-1 '}
+                                                    style={{
+                                                        textAlign: langdetect == 'en' ? 'left' : 'right',
+                                                    }}
+                                                >
+                                                    {langdetect == 'en' ? item.title_en : item.title_ar}
+                                                </p>
+                                            </div>
+                                        </div>
+                                    ))}
+                                </div>
+                            </div>
+                        )}
+                    </div>
+                </div>
+            </div>
+        );
+    };
+    const BackgroundImagesContent = () => {
+        return (
+            <div
+                class="row m-0 w-100 align-items-center justify-content-center"
+                onMouseEnter={() => {
+                    setChoosenindex('');
+                }}
+            >
+                <div class="col-lg-7 col-md-12 col-sm-12 pl-md-1 pl-sm-1 pr-md-1 pr-sm-1 mb-md-3 mb-sm-3 h-100">
+                    <div
+                        class={
+                            sectionproperties.bgcovercontainresponsive == 'Contain'
+                                ? `${sectionstyles.imageBackground}` + ' row m-0 w-100 h-md-auto '
+                                : `${sectionstyles.imageBackground}` + ' row m-0 w-100 '
+                        }
+                        style={{
+                            height: sectionproperties.image_height + 'px',
+                            position: 'relative',
+                        }}
+                    >
+                        <IKImage
+                            urlEndpoint={IKurlEndpoint}
+                            publicKey={IKpublicKey}
+                            path={imagesarray.length != 0 ? (langdetect == 'en' ? '/tr:w-820,h-520/' + imagesarray[0]?.bgsection_image : '/tr:w-820,h-520/' + imagesarray[0]?.bgsection_image_ar) : ''}
+                            class={sectionproperties.bgcovercontainresponsive == 'Contain' ? 'objectFit-md-contain' : ''}
+                            style={{
+                                height: '100%',
+                                width: '100%',
+                                objectFit: sectionproperties.bgcovercontain == 'Cover' ? 'cover' : 'contain',
+                                borderTopLeftRadius: sectionproperties.image_bordertopleftradius + 'px',
+                                borderTopRightRadius: sectionproperties.image_bordertoprightradius + 'px',
+                                borderBottomLeftRadius: sectionproperties.image_borderBottomLeftRadius + 'px',
+                                borderBottomRightRadius: sectionproperties.image_borderBottomRightRadius + 'px',
+                            }}
+                        />
+                    </div>
+                </div>
+                <div class="col-lg-5 p-sm-0">
+                    <div class="row m-0 w-100">
+                        <div class="col-lg-12 col-md-6 col-sm-6 p-0 mb-xl-3 mb-lg-3 pl-md-1 pl-sm-1 pr-md-1 pr-sm-1">
+                            <div
+                                class={
+                                    sectionproperties.bgcovercontainresponsive == 'Contain'
+                                        ? `${sectionstyles.imageBackground}` + ' row m-0 w-100 h-md-auto '
+                                        : `${sectionstyles.imageBackground}` + ' row m-0 w-100 '
+                                }
+                                style={{
+                                    height: parseInt(sectionproperties.image_height / 2 - 5) + 'px',
+                                    position: 'relative',
+                                }}
+                            >
+                                <IKImage
+                                    urlEndpoint={IKurlEndpoint}
+                                    publicKey={IKpublicKey}
+                                    path={
+                                        imagesarray.length != 0
+                                            ? langdetect == 'en'
+                                                ? '/tr:w-' + sectionproperties.imagetr_w + ',h-' + sectionproperties.imagetr_h + '/' + imagesarray[1]?.bgsection_image
+                                                : '/tr:w-' + sectionproperties.imagetr_w + ',h-' + sectionproperties.imagetr_h + '/' + imagesarray[1]?.bgsection_image_ar
+                                            : ''
+                                    }
+                                    class={sectionproperties.bgcovercontainresponsive == 'Contain' ? 'objectFit-md-contain' : ''}
+                                    style={{
+                                        height: '100%',
+                                        width: '100%',
+                                        objectFit: sectionproperties.bgcovercontain == 'Cover' ? 'cover' : 'contain',
+                                        borderTopLeftRadius: sectionproperties.image_bordertopleftradius + 'px',
+                                        borderTopRightRadius: sectionproperties.image_bordertoprightradius + 'px',
+                                        borderBottomLeftRadius: sectionproperties.image_borderBottomLeftRadius + 'px',
+                                        borderBottomRightRadius: sectionproperties.image_borderBottomRightRadius + 'px',
+                                    }}
+                                />
+                            </div>
+                        </div>
+                        <div class="col-lg-12 col-md-6 col-sm-6 p-0 pl-md-1 pl-sm-1 pr-md-1 pr-sm-1">
+                            <div
+                                class={
+                                    sectionproperties.bgcovercontainresponsive == 'Contain'
+                                        ? `${sectionstyles.imageBackground}` + ' row m-0 w-100 h-md-auto '
+                                        : `${sectionstyles.imageBackground}` + ' row m-0 w-100 '
+                                }
+                                style={{
+                                    height: parseInt(sectionproperties.image_height / 2 - 5) + 'px',
+                                    position: 'relative',
+                                }}
+                            >
+                                <IKImage
+                                    urlEndpoint={IKurlEndpoint}
+                                    publicKey={IKpublicKey}
+                                    path={
+                                        imagesarray.length != 0
+                                            ? langdetect == 'en'
+                                                ? '/tr:w-' + sectionproperties.imagetr_w + ',h-' + sectionproperties.imagetr_h + '/' + imagesarray[2]?.bgsection_image
+                                                : '/tr:w-' + sectionproperties.imagetr_w + ',h-' + sectionproperties.imagetr_h + '/' + imagesarray[2]?.bgsection_image_ar
+                                            : ''
+                                    }
+                                    class={sectionproperties.bgcovercontainresponsive == 'Contain' ? 'objectFit-md-contain' : ''}
+                                    style={{
+                                        height: '100%',
+                                        width: '100%',
+                                        objectFit: sectionproperties.bgcovercontain == 'Cover' ? 'cover' : 'contain',
+                                        borderTopLeftRadius: sectionproperties.image_bordertopleftradius + 'px',
+                                        borderTopRightRadius: sectionproperties.image_bordertoprightradius + 'px',
+                                        borderBottomLeftRadius: sectionproperties.image_borderBottomLeftRadius + 'px',
+                                        borderBottomRightRadius: sectionproperties.image_borderBottomRightRadius + 'px',
+                                    }}
+                                />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    };
+    return (
+        <div
+            class="row m-0 w-100 pl-md-3 pr-md-3 pl-sm-2 pr-sm-2"
+            style={{
+                marginTop: sectionproperties.marginTop + 'px',
+                marginBottom: sectionproperties.marginBottom + 'px',
+                paddingTop: sectionproperties.paddingTop + 'px',
+                paddingBottom: sectionproperties.paddingBottom + 'px',
+                paddingLeft: langdetect == 'en' ? sectionproperties.paddingLeft + 'px' : sectionproperties.paddingRight + 'px',
+                paddingRight: langdetect == 'en' ? sectionproperties.paddingRight + 'px' : sectionproperties.paddingLeft + 'px',
+                background: sectionproperties.backgroundColor,
+            }}
+            onMouseLeave={() => {
+                setChoosenindex('');
+            }}
+        >
+            {sectionproperties.collectionssectionshow == 'Show' && <div class="col-lg-2 d-md-none">{CategoriesDropdown()}</div>}
+            <div class={sectionproperties.collectionssectionshow == 'Show' ? 'col-lg-10 p-0' : 'col-lg-12 p-0'}>{BackgroundImagesContent()}</div>
+        </div>
+    );
+};
+export default BacgroundThreeImageWithCategories;