tabexseriescomponents 0.0.655 → 0.0.657

package/src22-1/TabexComponents/Sections/BackgroundImages/Twobgimages/Twobgimages.jsx

@@ -1,421 +0,0 @@
-import Categoriesdropdown from '../../../StaticPages/Categoriesdropdown/Categoriesdropdown.jsx';
-import React, { useEffect, useState, useContext } from 'react';
-import { css } from 'glamor';
-import { serverbaselink } from '../../../../../Env';
-import { Imagekitimagecomp } from '../../../../Imagekitconfig.jsx';
-
-import { IoIosArrowRoundForward } from '@react-icons/all-files/io/IoIosArrowRoundForward';
-import { IoIosArrowRoundBack } from '@react-icons/all-files/io/IoIosArrowRoundBack';
-
-const Twobgimages = (props) => {
-    const [sectionproperties, setsectionproperties] = useState('');
-    const [bgimagearrayofobjs, setbgimagearrayofobjs] = useState([]);
-    const [maincontainerarrayofobjs, setmaincontainerarrayofobjs] = useState([]);
-    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 history = props.actions.history;
-    const actions = props.actions;
-
-    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 && sectionproperties.bg1_arrayofobjs != undefined) {
-            var bg1_arrayofobjsparsed = JSON.parse(sectionproperties.bg1_arrayofobjs);
-            if (Array.isArray(bg1_arrayofobjsparsed)) {
-                setbgimagearrayofobjs([...bg1_arrayofobjsparsed]);
-            }
-            var maincontainerarrayofobjsparsed = JSON.parse(sectionproperties.maincontainerarrayofobjs);
-            if (Array.isArray(maincontainerarrayofobjsparsed)) {
-                setmaincontainerarrayofobjs([...maincontainerarrayofobjsparsed]);
-            }
-        }
-    }, [sectionproperties]);
-    const bgcssstyles = {
-        bgImageContainer: css({
-            height: sectionproperties.height + 'vh',
-            backgroundPosition: 'center',
-            backgroundRepeat: 'no-repeat',
-            backgroundSize: 'cover',
-            margin: 0,
-            padding: 0,
-            position: 'relative',
-            borderTopLeftRadius: sectionproperties.borderTopLeftRadius + 'px',
-            borderTopRightRadius: sectionproperties.borderTopRightRadius + 'px',
-            borderBottomLeftRadius: sectionproperties.borderBottomLeftRadius + 'px',
-            borderBottomRightRadius: sectionproperties.borderBottomRightRadius + 'px',
-            alignItems: sectionproperties.generaltext_textposition == 'Center Center' ? 'center' : sectionproperties.generaltext_textposition == 'Top Left' ? '' : '',
-            justifyContent: sectionproperties.generaltext_textposition == 'Center Center' ? 'center' : '',
-        }),
-        centered_container: css({
-            position: 'absolute',
-            display: 'flex',
-            width: '100%',
-            height: '100%',
-            zIndex: 100,
-        }),
-        bgimage: css({
-            ':before': {
-                content: 'h',
-                position: 'absolute',
-                width: '100%',
-                height: '100%',
-                backgroundColor: 'rgba(0,0,0,' + sectionproperties.darknessopacity + ')',
-                top: 0,
-                borrom: 0,
-                right: 0,
-                left: 0,
-                zIndex: 1,
-                fontSize: 0,
-                borderTopLeftRadius: sectionproperties.image_bordertopleftradius + 'px',
-                borderTopRightRadius: sectionproperties.image_bordertoprightradius + 'px',
-                borderBottomLeftRadius: sectionproperties.image_borderBottomLeftRadius + 'px',
-                borderBottomRightRadius: sectionproperties.image_borderBottomRightRadius + 'px',
-            },
-            height: '100%',
-            width: '100%',
-            '@media (max-width: 800px)': {
-                width: sectionproperties.innerwidthheightresp + '%',
-                height: sectionproperties.innerwidthheightresp + '%',
-            },
-        }),
-        text1styles: css({
-            fontSize: sectionproperties.slideshowText1ContentFontSize + 'px',
-            fontWeight: sectionproperties.slideshowText1ContentFontWeight,
-            marginTop: sectionproperties.slideshowText1Content_marginTop + 'px',
-            marginBottom: sectionproperties.slideshowText1Content_marginBottom + 'px',
-            marginLeft: sectionproperties.slideshowText1Content_marginLeft + 'px',
-            textAlign: sectionproperties.text1centered == 'Centered' ? 'center' : langdetect == 'en' ? 'left' : 'right',
-        }),
-        text2styles: css({
-            marginBottom: sectionproperties.slideshowText2Content_marginBottom + 'px',
-            fontSize: sectionproperties.slideshowText2ContentFontSize + 'px',
-            fontWeight: sectionproperties.slideshowText2ContentFontWeight,
-            marginLeft: sectionproperties.generaltext2_leftposition + 'px',
-            textAlign: sectionproperties.text2centered == 'Centered' ? 'center' : langdetect == 'en' ? 'left' : 'right',
-        }),
-        btnone: css({
-            width: sectionproperties.generalbtn_width + 'px',
-            height: sectionproperties.generalbtn_height + 'px',
-            background: sectionproperties.generalbtn_bgColortransparent == 'Transparent' ? 'transparent' : sectionproperties.generalbtn_bgColor,
-            fontSize: sectionproperties.generalbtn_fontsize + 'px',
-            color: sectionproperties.generalbtn_textColor,
-            textTransform: sectionproperties.generalbtn_texttransform,
-            borderTopLeftRadius: sectionproperties.generalbtn_bordertopleftradius + 'px',
-            borderTopRightRadius: sectionproperties.generalbtn_bordertoprightradius + 'px',
-            borderBottomLeftRadius: sectionproperties.generalbtn_borderbottomleftradius + 'px',
-            borderBottomRightRadius: sectionproperties.generalbtn_borderbottomrightradius + 'px',
-            fontWeight: sectionproperties.generalbtn_fontweight,
-            border: sectionproperties.generalbtn_borderwidth + 'px solid ' + sectionproperties.generalbtn_bordercolor,
-            marginLeft: sectionproperties.generalbtn_position == 'Centered' ? 'auto' : langdetect == 'en' ? sectionproperties.generalbtn_leftposition + 'px' : '',
-            marginRight: sectionproperties.generalbtn_position == 'Centered' ? 'auto' : langdetect == 'ar' ? sectionproperties.generalbtn_leftposition + 'px' : '',
-            marginTop: 'auto',
-            marginBottom: sectionproperties.generalbtn_topposition + 'px',
-            transition: '.3s',
-            ':hover': {
-                background: sectionproperties.generalbtn_bgColortransparentonhover == 'Transparent' ? 'transparent' : sectionproperties.generalbtn_bgColoronhover,
-                color: sectionproperties.generalbtn_textColoronhover,
-            },
-        }),
-        btnresp: css({
-            width: sectionproperties.generalbtn_width + 'px',
-            height: sectionproperties.generalbtn_height + 'px',
-            background: sectionproperties.generalbtn_bgColortransparent == 'Transparent' ? 'transparent' : sectionproperties.generalbtn_bgColor,
-            fontSize: sectionproperties.generalbtn_fontsize + 'px',
-            color: sectionproperties.generalbtn_textColor,
-            textTransform: sectionproperties.generalbtn_texttransform,
-            borderTopLeftRadius: sectionproperties.generalbtn_bordertopleftradius + 'px',
-            borderTopRightRadius: sectionproperties.generalbtn_bordertoprightradius + 'px',
-            borderBottomLeftRadius: sectionproperties.generalbtn_borderbottomleftradius + 'px',
-            borderBottomRightRadius: sectionproperties.generalbtn_borderbottomrightradius + 'px',
-            fontWeight: sectionproperties.generalbtn_fontweight,
-            border: sectionproperties.generalbtn_borderwidth + 'px solid ' + sectionproperties.generalbtn_bordercolor,
-            marginLeft: sectionproperties.generalbtn_position == 'Centered' ? 'auto' : langdetect == 'en' ? sectionproperties.generalbtn_leftposition + 'px' : '',
-            marginRight: sectionproperties.generalbtn_position == 'Centered' ? 'auto' : langdetect == 'ar' ? sectionproperties.generalbtn_leftposition + 'px' : '',
-            transition: '.3s',
-            ':hover': {
-                background: sectionproperties.generalbtn_bgColortransparentonhover == 'Transparent' ? 'transparent' : sectionproperties.generalbtn_bgColoronhover,
-                color: sectionproperties.generalbtn_textColoronhover,
-            },
-        }),
-    };
-    const BackgroundImage = () => {
-        return (
-            <div
-                className={
-                    bgimagearrayofobjs[0]?.bg1_numberofcols == '12'
-                        ? sectionproperties.paddingLeft != 0
-                            ? 'row w-100 ml-0 mr-0 pl-md-2 pr-md-2 no-repeat'
-                            : 'row w-100 ml-0 mr-0 pl-md-0 pr-md-0 no-repeat'
-                        : 'row w-100 ml-0 mr-0 pl-md-3 pr-md-3 no-repeat'
-                }
-                style={{
-                    paddingTop: sectionproperties.paddingTop + 'px',
-                    paddingBottom: sectionproperties.paddingBottom + 'px',
-                    paddingLeft: sectionproperties.paddingLeft + 'px',
-                    paddingRight: sectionproperties.paddingRight + 'px',
-                    backgroundImage: maincontainerarrayofobjs.length != 0 ? 'url(' + serverbaselink + maincontainerarrayofobjs[0].back_bgimage + ')' : '',
-                    backgroundSize: 'cover',
-                    background: sectionproperties.backgroundColor,
-                }}
-            >
-                {/* {sectionproperties.collectionssectionshow == 'Show' && (
-                    <div className="col-lg-2 col-md-12 pl-2 pr-2 mb-md-3">
-                        <Categoriesdropdown sectionpropertiesprops={sectionproperties} actions={actions} />
-                    </div>
-                )}
-                */}
-                <div className={sectionproperties.collectionssectionshow == 'Show' ? 'col-lg-10 col-md-12 p-md-0' : 'col-lg-12 p-0'}>
-                    <div className={sectionproperties.justifyContentCenter == 'Centered' ? 'row m-0 w-100 allcentered' : 'row m-0 w-100 allcentered'}>
-                        {Object.keys(bgimagearrayofobjs).length != 0 &&
-                            bgimagearrayofobjs.map((item, index) => {
-                                return (
-                                    <div
-                                        className={
-                                            bgimagearrayofobjs[index].bg1_numberofcols != 12
-                                                ? ' d-flex align-items-stretch col-md-6 col-sm-12 pr-sm-2 pl-sm-2 mb-md-3 mt-md-3 col-lg-' + bgimagearrayofobjs[index].bg1_numberofcols
-                                                : ' d-flex align-items-stretch col-md-12 col-sm-12 pr-md-0 pl-md-0 col-lg-' + bgimagearrayofobjs[index].bg1_numberofcols
-                                        }
-                                        style={{
-                                            paddingLeft: bgimagearrayofobjs[index].bg1_numberofcols == '12' ? 0 : '7px',
-                                            paddingRight: bgimagearrayofobjs[index].bg1_numberofcols == '12' ? 0 : '7px',
-                                            cursor: item.place_clickable == 'General' ? 'pointer' : 'default',
-                                        }}
-                                        onClick={() => {
-                                            if (item.IsClickable == 'Yes') {
-                                                if (item.place_clickable == 'General') {
-                                                    if (item.externallink == 'Yes') {
-                                                        window.open(item.clickable_page_route, '_blank');
-                                                        // history.push(item.clickable_page_route);
-                                                    } else if (item.clickable_page_route && item.clickable_page_route.length != 0) {
-                                                        routingcountext(item.clickable_page_route, false, '');
-                                                    } else {
-                                                        routingcountext(StaticPagesLinksContext.GeneralProductsComponent, true, 'collections/' + item.Clickable_Reference_Collection_ID);
-                                                    }
-                                                }
-                                            }
-                                        }}
-                                    >
-                                        <div className="row ml-0 mr-0 d-flex justify-content-center w-100">
-                                            <div
-                                                className={sectionproperties.bgcovercontainresponsive == 'Contain' ? 'col-lg-12 p-0 h-md-auto allcentered' : 'col-lg-12 p-0 allcentered'}
-                                                style={{
-                                                    height: sectionproperties.bgcovercontain == 'Contain' ? 'auto' : sectionproperties.image_height + 'vh',
-                                                }}
-                                            >
-                                                <div className={`${bgcssstyles.bgimage}` + ' d-md-flex d-sm-none '} style={{}}>
-                                                    <Imagekitimagecomp
-                                                        urlEndpoint={ikimagecredcontext?.ikimageendpoint}
-                                                        publicKey={ikimagecredcontext?.ikimagepublickey}
-                                                        path={
-                                                            bgimagearrayofobjs.length != 0
-                                                                ? langdetect == 'en'
-                                                                    ? '/tr:w-' + sectionproperties.imagetr_w + ',h-' + sectionproperties.imagetr_h + '/' + bgimagearrayofobjs[index].bg1_image
-                                                                    : '/tr:w-' + sectionproperties.imagetr_w + ',h-' + sectionproperties.imagetr_h + '/' + bgimagearrayofobjs[index].bg1_image_ar
-                                                                : ''
-                                                        }
-                                                        className={sectionproperties.bgcovercontainresponsive == 'Contain' ? 'objectFit-md-contain' : ''}
-                                                        style={{
-                                                            height: '100%',
-                                                            width: '100%',
-                                                            objectFit: sectionproperties.bgcovercontain,
-                                                            borderTopLeftRadius: sectionproperties.image_bordertopleftradius + 'px',
-                                                            borderTopRightRadius: sectionproperties.image_bordertoprightradius + 'px',
-                                                            borderBottomLeftRadius: sectionproperties.image_borderBottomLeftRadius + 'px',
-                                                            borderBottomRightRadius: sectionproperties.image_borderBottomRightRadius + 'px',
-                                                        }}
-                                                    />
-                                                </div>
-                                                <div className={`${bgcssstyles.bgimage}` + ' d-none d-md-none d-sm-flex'} style={{}}>
-                                                    <Imagekitimagecomp
-                                                        urlEndpoint={ikimagecredcontext?.ikimageendpoint}
-                                                        publicKey={ikimagecredcontext?.ikimagepublickey}
-                                                        path={
-                                                            bgimagearrayofobjs.length != 0
-                                                                ? langdetect == 'en'
-                                                                    ? '/tr:w-' +
-                                                                      sectionproperties.imagetr_w_resp +
-                                                                      ',h-' +
-                                                                      sectionproperties.imagetr_h_resp +
-                                                                      '/' +
-                                                                      bgimagearrayofobjs[index].bg1_imageresponsive
-                                                                    : '/tr:w-' +
-                                                                      sectionproperties.imagetr_w_resp +
-                                                                      ',h-' +
-                                                                      sectionproperties.imagetr_h_resp +
-                                                                      '/' +
-                                                                      bgimagearrayofobjs[index].bg1_imageresponsive_ar
-                                                                : ''
-                                                        }
-                                                        className={sectionproperties.bgcovercontainresponsive == 'Contain' ? 'objectFit-md-contain' : ''}
-                                                        style={{
-                                                            height: '100%',
-                                                            width: '100%',
-                                                            objectFit: sectionproperties.bgcovercontain,
-                                                            borderTopLeftRadius: sectionproperties.image_bordertopleftradius + 'px',
-                                                            borderTopRightRadius: sectionproperties.image_bordertoprightradius + 'px',
-                                                            borderBottomLeftRadius: sectionproperties.image_borderBottomLeftRadius + 'px',
-                                                            borderBottomRightRadius: sectionproperties.image_borderBottomRightRadius + 'px',
-                                                        }}
-                                                    />
-                                                </div>
-                                                <div
-                                                    className={`${bgcssstyles.bgImageContainer}` + ' col-lg-12 p-0 w-100 '}
-                                                    style={{
-                                                        position: 'absolute',
-                                                        top: 0,
-                                                        right: 0,
-                                                        bottom: 0,
-                                                        left: 0,
-                                                        zIndex: 1,
-                                                    }}
-                                                >
-                                                    <div className={`${bgcssstyles.centered_container}` + ' row m-0 d-flex pt-0 d-flex align-items-stretch '}>
-                                                        <div
-                                                            className={
-                                                                bgimagearrayofobjs[index].bg1_numberofcols == '12'
-                                                                    ? ' d-flex flex-column d-md-none col-lg-12 d-flex align-items-stretch '
-                                                                    : bgimagearrayofobjs[index].bg1_numberofcols >= '6'
-                                                                    ? ' d-flex flex-column d-md-none col-lg-6 d-flex align-items-stretch '
-                                                                    : ' d-flex flex-column d-md-none col-lg-10 d-flex align-items-stretch '
-                                                            }
-                                                            style={{ position: 'relative', overflow: 'hidden' }}
-                                                        >
-                                                            <p
-                                                                className={bgcssstyles.text1styles + ' d-flex justify-content-md-center wordbreak '}
-                                                                style={{
-                                                                    maxWidth: '100%',
-                                                                    color: bgimagearrayofobjs[index].bg1_txtcolor,
-                                                                }}
-                                                            >
-                                                                {langdetect == 'en' ? bgimagearrayofobjs[index].bg1_text_en : bgimagearrayofobjs[index].bg1_text_ar}
-                                                            </p>
-                                                            {bgimagearrayofobjs[index].showdescription1 == 'Show' && (
-                                                                <p
-                                                                    className={bgcssstyles.text2styles + ' d-flex justify-content-md-center wordbreak '}
-                                                                    style={{
-                                                                        color: bgimagearrayofobjs[index].bg1_descolor,
-                                                                    }}
-                                                                >
-                                                                    {langdetect == 'en' ? bgimagearrayofobjs[index].bg1_descriptionen : bgimagearrayofobjs[index].bg1_descriptionar}
-                                                                </p>
-                                                            )}
-                                                            {bgimagearrayofobjs[index].showbutton1 == 'Show' && (
-                                                                <button
-                                                                    className={`${bgcssstyles.btnone}` + ' allcentered '}
-                                                                    style={{
-                                                                        letterSpacing: langdetect == 'en' ? '1px' : 0,
-                                                                    }}
-                                                                    onClick={() => {
-                                                                        if (item.IsClickable == 'Yes') {
-                                                                            if (item.place_clickable == 'Button') {
-                                                                                if (item.clickable_page_route && item.clickable_page_route.length != 0) {
-                                                                                    routingcountext(item.clickable_page_route, false, '');
-                                                                                } else {
-                                                                                    routingcountext(
-                                                                                        StaticPagesLinksContext.GeneralProductsComponent,
-                                                                                        true,
-                                                                                        'collections/' + item.Clickable_Reference_Collection_ID,
-                                                                                    );
-                                                                                }
-                                                                            }
-                                                                        }
-                                                                    }}
-                                                                >
-                                                                    {langdetect == 'en' ? sectionproperties.generalbtn_content : sectionproperties.slideshow_btn_text_ar}{' '}
-                                                                    {/* {langdetect == 'en' ? <IoIosArrowRoundForward size={20} /> : <IoIosArrowRoundBack size={20} />} */}
-                                                                </button>
-                                                            )}
-                                                        </div>
-                                                        <div className="col-md-12 d-none d-md-flex flex-column mt-auto mb-auto ">
-                                                            <p
-                                                                className={bgcssstyles.text1styles + ' wordbreak m-0 '}
-                                                                style={{
-                                                                    color: bgimagearrayofobjs[index].bg1_txtcolor,
-                                                                }}
-                                                            >
-                                                                {langdetect == 'en' ? bgimagearrayofobjs[index].bg1_text_en : bgimagearrayofobjs[index].bg1_text_ar}
-                                                            </p>
-                                                            {bgimagearrayofobjs[index].showdescription1 == 'Show' && (
-                                                                <p
-                                                                    className={bgcssstyles.text2styles + ' d-flex justify-content-md-center wordbreak m-0 '}
-                                                                    style={{
-                                                                        color: bgimagearrayofobjs[index].bg1_descolor,
-                                                                    }}
-                                                                >
-                                                                    {langdetect == 'en' ? bgimagearrayofobjs[index].bg1_descriptionen : bgimagearrayofobjs[index].bg1_descriptionar}
-                                                                </p>
-                                                            )}
-                                                            {bgimagearrayofobjs[index].showbutton1 == 'Show' && (
-                                                                <button
-                                                                    className={`${bgcssstyles.btnresp}` + ' mt-md-5 mt-sm-3 '}
-                                                                    onClick={() => {
-                                                                        if (item.IsClickable == 'Yes') {
-                                                                            if (item.place_clickable == 'Button') {
-                                                                                if (item.clickable_page_route && item.clickable_page_route.length != 0) {
-                                                                                    routingcountext(item.clickable_page_route, false, '');
-                                                                                } else {
-                                                                                    routingcountext(
-                                                                                        StaticPagesLinksContext.GeneralProductsComponent,
-                                                                                        true,
-                                                                                        'collections/' + item.Clickable_Reference_Collection_ID,
-                                                                                    );
-                                                                                }
-                                                                            }
-                                                                        }
-                                                                    }}
-                                                                >
-                                                                    {langdetect == 'en' ? sectionproperties.generalbtn_content : sectionproperties.slideshow_btn_text_ar}
-                                                                </button>
-                                                            )}
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                );
-                            })}
-                    </div>
-                </div>
-            </div>
-        );
-    };
-    return (
-        <div
-            className="row m-0 w-md-100"
-            style={{
-                width: sectionproperties.width + 'vw',
-            }}
-        >
-            <div className="col-lg-12 p-0 d-flex d-md-none" style={{ marginTop: sectionproperties.marginTop + 'px', marginBottom: sectionproperties.marginBottom + 'px' }}>
-                {BackgroundImage()}
-            </div>
-            <div className="col-lg-12 p-0 d-none d-md-flex" style={{ marginTop: sectionproperties.marginTopResp + 'px', marginBottom: sectionproperties.marginBottomResp + 'px' }}>
-                {BackgroundImage()}
-            </div>
-        </div>
-    );
-};
-export default Twobgimages;