tabexseriescomponents 0.0.706 → 0.0.708

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

@@ -0,0 +1,533 @@
+import React, { useEffect, useState, useContext } from 'react';
+import { css } from 'glamor';
+import { Imagekitimagecomp } from '../../../../Imagekitconfig.jsx';
+
+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 ikimagecredcontext = props.actions.ikimagecredcontext;
+
+    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,
+                    borderRadius: sectionproperties.collectionsectionborderradius + 'px',
+                }}
+            >
+                <div class="col-lg-12 p-0">
+                    <div class="row m-0 w-100">
+                        <div
+                            className={sectionstyles.dropdowntitle + ' col-lg-12 p-0 d-flex align-items-center '}
+                            style={{
+                                justifyContent: sectionproperties.titlecentered == 'Centered' ? 'center' : 'start',
+                            }}
+                        >
+                            <p className="m-0 p-3">{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 '}>
+                                            {sectionproperties.showcatimage == 'Show' && (
+                                                <div
+                                                    style={{
+                                                        width: '4vh',
+                                                        height: '4vh',
+                                                        marginRight: langdetect == 'en' ? '5px' : 0,
+                                                        marginLeft: langdetect == 'ar' ? '5px' : 0,
+                                                    }}
+                                                >
+                                                    {authdetailsContext?.instinfo?.ikieu != undefined && (
+                                                        <Imagekitimagecomp
+                                                            urlEndpoint={ikimagecredcontext?.ikimageendpoint}
+                                                            publicKey={ikimagecredcontext?.ikimagepublickey}
+                                                            path={item.categorylogo}
+                                                            loading="lazy"
+                                                            style={{
+                                                                width: '100%',
+                                                                height: '100%',
+                                                                objectFit: 'contain',
+                                                            }}
+                                                        />
+                                                    )}
+                                                </div>
+                                            )}
+                                            <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.length - 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={sectionstyles.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">
+                <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',
+                            cursor: imagesarray[0]?.IsClickableimg == 'Yes' ? 'pointer' : 'default',
+                        }}
+                        onClick={() => {
+                            if (imagesarray[0]?.IsClickableimg == 'Yes') {
+                                if (imagesarray[0]?.clickableimg_page_route && imagesarray[0]?.clickableimg_page_route.length != 0) {
+                                    routingcountext(imagesarray[0]?.clickableimg_page_route, false, '');
+                                } else {
+                                    routingcountext(StaticPagesLinksContext.GeneralProductsComponent, true, 'collections/' + imagesarray[0]?.Clickableimg_getcoection);
+                                }
+                            }
+                        }}
+                    >
+                        <Imagekitimagecomp
+                            urlEndpoint={ikimagecredcontext?.ikimageendpoint}
+                            publicKey={ikimagecredcontext?.ikimagepublickey}
+                            path={
+                                imagesarray.length != 0
+                                    ? langdetect == 'en'
+                                        ? '/tr:w-' + sectionproperties.imagetr_w + ',h-' + sectionproperties.imagetr_h + '/' + imagesarray[0]?.bgsection_image
+                                        : '/tr:w-' + sectionproperties.imagetr_w + ',h-' + sectionproperties.imagetr_h + '/' + 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',
+                                    cursor: imagesarray[1]?.IsClickableimg == 'Yes' ? 'pointer' : 'default',
+                                }}
+                                onClick={() => {
+                                    if (imagesarray[1]?.IsClickableimg == 'Yes') {
+                                        if (imagesarray[1]?.clickableimg_page_route && imagesarray[1]?.clickableimg_page_route.length != 0) {
+                                            routingcountext(imagesarray[1]?.clickableimg_page_route, false, '');
+                                        } else {
+                                            routingcountext(StaticPagesLinksContext.GeneralProductsComponent, true, 'collections/' + imagesarray[1]?.Clickableimg_getcoection);
+                                        }
+                                    }
+                                }}
+                            >
+                                <Imagekitimagecomp
+                                    urlEndpoint={ikimagecredcontext?.ikimageendpoint}
+                                    publicKey={ikimagecredcontext?.ikimagepublickey}
+                                    path={
+                                        imagesarray.length != 0
+                                            ? langdetect == 'en'
+                                                ? '/tr:w-' + sectionproperties.imagetr_w2 + ',h-' + sectionproperties.imagetr_h2 + '/' + imagesarray[1]?.bgsection_image
+                                                : '/tr:w-' + sectionproperties.imagetr_w2 + ',h-' + sectionproperties.imagetr_h2 + '/' + 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',
+                                    cursor: imagesarray[2]?.IsClickableimg == 'Yes' ? 'pointer' : 'default',
+                                }}
+                                onClick={() => {
+                                    if (imagesarray[2]?.IsClickableimg == 'Yes') {
+                                        if (imagesarray[2]?.clickableimg_page_route && imagesarray[2]?.clickableimg_page_route.length != 0) {
+                                            routingcountext(imagesarray[2]?.clickableimg_page_route, false, '');
+                                        } else {
+                                            routingcountext(StaticPagesLinksContext.GeneralProductsComponent, true, 'collections/' + imagesarray[2]?.Clickableimg_getcoection);
+                                        }
+                                    }
+                                }}
+                            >
+                                <Imagekitimagecomp
+                                    urlEndpoint={ikimagecredcontext?.ikimageendpoint}
+                                    publicKey={ikimagecredcontext?.ikimagepublickey}
+                                    path={
+                                        imagesarray.length != 0
+                                            ? langdetect == 'en'
+                                                ? '/tr:w-' + sectionproperties.imagetr_w2 + ',h-' + sectionproperties.imagetr_h2 + '/' + imagesarray[2]?.bgsection_image
+                                                : '/tr:w-' + sectionproperties.imagetr_w2 + ',h-' + sectionproperties.imagetr_h2 + '/' + 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={sectionproperties.card_marginLeft != 0 ? 'row ml-0 mr-0 w-100 pl-md-3 pr-md-3 pl-sm-2 pr-sm-2' : 'row ml-0 mr-0 w-100'}
+            style={{
+                marginBottom: sectionproperties.marginBottom + 'px',
+                paddingLeft: sectionproperties.card_marginLeft + 'px',
+                paddingRight: sectionproperties.card_marginRight + 'px',
+            }}
+            onMouseLeave={() => {
+                setChoosenindex('');
+            }}
+        >
+            <div
+                class="row ml-0 mr-0 w-100 d-flex d-md-none pl-md-3 pr-md-3 pl-sm-2 pr-sm-2"
+                style={{
+                    marginTop: sectionproperties.marginTop + 'px',
+                    background: sectionproperties.backgroundColor,
+                    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',
+                }}
+            >
+                {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>
+            <div
+                class="row m-0 w-100 d-none d-md-flex pl-md-3 pr-md-3 pl-sm-2 pr-sm-2"
+                style={{
+                    marginTop: sectionproperties.marginTopResp + 'px',
+                    background: sectionproperties.backgroundColor,
+                    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',
+                }}
+            >
+                {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>
+        </div>
+    );
+};
+export default BacgroundThreeImageWithCategories;