tabexseriescomponents 0.0.225 → 0.0.227

package/srcold/TabexComponents/Sections/Slideshow/Backgroundimage_with_topcircle/Backgroundimage_with_topcircle.jsx

@@ -1,160 +0,0 @@
-import React, { useEffect, useState, useContext } from 'react';
-import { css } from 'glamor';
-import { serverbaselink } from '../../../../../Env';
-import sectionstyles from '../../../../styles/sections/Backgroundimage_with_topcircle.module.css';
-
-const Backgroundimage_with_topcircle = (props) => {
-    const [sectionproperties, setsectionproperties] = useState('');
-    const [cardsarray, setcardsarray] = useState([]);
-    const StatePagePropertiesContext = props.actions.StatePagePropertiesContext;
-    const lang = props.actions.lang;
-    const langdetect = props.actions.langdetect;
-    const routingcountext = props.actions.routingcountext;
-    const StaticPagesLinksContext = props.actions.StaticPagesLinksContext;
-
-    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.bgsection_imagearrayofobjs != null) {
-                var bgsection_imagearrayofobjsparsed = JSON.parse(sectionproperties.bgsection_imagearrayofobjs);
-                if (Array.isArray(bgsection_imagearrayofobjsparsed)) {
-                    setcardsarray([...bgsection_imagearrayofobjsparsed]);
-                }
-            }
-        }
-    }, [sectionproperties]);
-    const bg1_cssstyles = {
-        topcircle: css({
-            height: sectionproperties.topcircle_height + 'px',
-            // height: '800px',
-            background: sectionproperties.backgroundColor,
-            // background:sectionproperties.topcircle_bgcolor,
-            width: '100%',
-            borderTopLeftRadius: sectionproperties.topcircle_borderTopLeftRadius + 'px',
-            borderTopRightRadius: sectionproperties.topcircle_borderTopRightRadius + 'px',
-            borderBottomLeftRadius: sectionproperties.topcircle_borderBottomLeftRadius + 'px',
-            borderBottomRightRadius: sectionproperties.topcircle_borderBottomRightRadius + 'px',
-            transition: '.3s',
-        }),
-        textstyle: css({
-            color: sectionproperties.slideshowText1ContentColor,
-            fontSize: sectionproperties.slideshowText1ContentFontSize + 'px',
-            textTransform: sectionproperties.slideshowText1ContentTextTransform,
-            fontWeight: sectionproperties.slideshowText1ContentFontWeight,
-            position: 'absolute',
-            top: sectionproperties.slideshowText1Content_marginTop + 'px',
-            left: sectionproperties.slideshowText1Content_marginLeft + 'px',
-        }),
-        textstyle2: css({
-            color: sectionproperties.slideshowText2ContentColor,
-            fontSize: sectionproperties.slideshowText2ContentFontSize + 'px',
-            textTransform: sectionproperties.slideshowText2ContentTextTransform,
-            fontWeight: sectionproperties.slideshowText2ContentFontWeight,
-            position: 'absolute',
-            top: sectionproperties.generaltext2_topposition + 'px',
-            left: sectionproperties.generaltext2_leftposition + 'px',
-        }),
-        general_btn: css({
-            height: sectionproperties.generalbtn_height + 'px',
-            width: sectionproperties.generalbtn_width + 'px',
-            background: sectionproperties.generalbtn_bgColor,
-            color: sectionproperties.generalbtn_textColor,
-            borderTopRightRadius: sectionproperties.generalbtn_bordertoprightradius + 'px',
-            borderTopLeftRadius: sectionproperties.generalbtn_bordertopleftradius + 'px',
-            borderBottomLeftRadius: sectionproperties.generalbtn_borderbottomleftradius + 'px',
-            borderBottomRightRadius: sectionproperties.generalbtn_borderbottomrightradius + 'px',
-            textTransform: sectionproperties.generalbtn_texttransform,
-            fontSize: sectionproperties.generalbtn_fontsize + 'px',
-            fontWeight: sectionproperties.generalbtn_fontweight,
-            position: 'absolute',
-            top: sectionproperties.generalbtn_topposition + 'px',
-            left: sectionproperties.generalbtn_marginLeft + 'px',
-            transition: '.3s',
-            ':hover': {
-                background: sectionproperties.generalbtn_bgColoronhover,
-                color: sectionproperties.generalbtn_textColoronhover,
-            },
-        }),
-        img_container: css({
-            width: sectionproperties.img_height + 'px',
-            height: sectionproperties.img_width + 'px',
-        }),
-        imgstyle: css({
-            width: '100%',
-            height: '100%',
-            objectFit: 'contain',
-        }),
-        sectionstyle: css({
-            height: '90vh',
-        }),
-    };
-    return (
-        <div class={`${bg1_cssstyles.sectionstyle}` + ' row w-100  m-0 '} style={{ position: 'relative', overflowY: 'hidden' }}>
-            <div class={`${sectionstyles.homestyling} ${bg1_cssstyles.topcircle}`}></div>
-            <div
-                class={`${sectionstyles.home1_container}`}
-                style={{
-                    paddingRight: sectionproperties.paddingRight + 'px',
-                    paddingLeft: sectionproperties.paddingLeft + 'px',
-                    paddingTop: sectionproperties.paddingTop + 'px',
-                    paddingBottom: sectionproperties.paddingBottom + 'px',
-                    position: 'absolute',
-                    top: 100,
-                    bottom: 0,
-                }}
-            >
-                <div class="row w-100 m-0 ">
-                    {sectionproperties.imgstyle_show == 'show' && (
-                        <div class="col-lg-12 d-flex flex-column justify-content-start align-items-center" style={{}}>
-                            <div class={`${bg1_cssstyles.img_container} `}>
-                                <img class={`${bg1_cssstyles.imgstyle}`} src={cardsarray.length != 0 ? serverbaselink + cardsarray[0].bgsection_image : ''}></img>
-                            </div>
-                        </div>
-                    )}
-                    {sectionproperties.slideshowtext1_show == 'Show' && (
-                        <div class="col-lg-12 d-flex flex-row justify-content-center align-items-center">
-                            <p class={`${bg1_cssstyles.textstyle}` + ' m-0 '}>{sectionproperties.slideshowText1Content}</p>
-                        </div>
-                    )}
-                    {sectionproperties.slideshowtext2_show == 'Show' && (
-                        <div class="col-lg-12 d-flex flex-row justify-content-center align-items-center">
-                            <p class={`${bg1_cssstyles.textstyle2}` + ' m-0 '}>{sectionproperties.slideshowText2Content}</p>
-                        </div>
-                    )}
-                    {sectionproperties.generalbtn_show == 'Show' && (
-                        <div class="col-lg-12 text-center d-flex flex-row justify-content-center mt-3 " style={{ zIndex: 1000 }}>
-                            <button
-                                class={`${bg1_cssstyles.general_btn} `}
-                                onClick={() => {
-                                    routingcountext(StaticPagesLinksContext.GeneralProductsComponent);
-                                }}
-                            >
-                                {sectionproperties.generalbtn_content}
-                            </button>
-                        </div>
-                    )}
-                </div>
-            </div>
-        </div>
-    );
-};
-export default Backgroundimage_with_topcircle;

package/srcold/TabexComponents/Sections/Slideshow/ContactUsSection/ContactUsSection.jsx

@@ -1,256 +0,0 @@
-import React, { useEffect, useState, useContext } from 'react';
-import { css } from 'glamor';
-import { HiOutlineLocationMarker } from '@react-icons/all-files/hi/HiOutlineLocationMarker';
-import { FiPhoneCall } from '@react-icons/all-files/fi/FiPhoneCall';
-import { AiOutlineMail } from '@react-icons/all-files/ai/AiOutlineMail';
-
-const ContactUsSection = (props) => {
-    const [sectionproperties, setsectionproperties] = useState('');
-    const StatePagePropertiesContext = props.actions.StatePagePropertiesContext;
-    const lang = props.actions.lang;
-    const langdetect = props.actions.langdetect;
-    const authdetailsContext = props.actions.authdetailsContext;
-
-    useEffect(() => {
-        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]);
-
-    const section_styles = {
-        cards_sections: css({
-            width: sectionproperties.width + 'vw',
-            height: sectionproperties.height + 'vh',
-            marginTop: sectionproperties.marginTop + 'px',
-            marginBottom: sectionproperties.marginBottom + 'px',
-            paddingLeft: langdetect == 'en' ? sectionproperties.paddingLeft + 'px' : sectionproperties.paddingRight + 'px',
-            paddingRight: langdetect == 'en' ? sectionproperties.paddingRight + 'px' : sectionproperties.paddingLeft + 'px',
-            paddingTop: sectionproperties.paddingTop + 'px',
-            paddingBottom: sectionproperties.paddingBottom + 'px',
-            background: sectionproperties.backgroundColor,
-            borderBottomLeftRadius: langdetect == 'en' ? sectionproperties.borderBottomLeftRadius + 'px' : sectionproperties.borderBottomRightRadius + 'px',
-            borderBottomRightRadius: langdetect == 'en' ? sectionproperties.borderBottomRightRadius + 'px' : sectionproperties.borderBottomLeftRadius + 'px',
-            borderTopLeftRadius: langdetect == 'en' ? sectionproperties.borderTopLeftRadius + 'px' : sectionproperties.borderTopRightRadius + 'px',
-            borderTopRightRadius: langdetect == 'en' ? sectionproperties.borderTopRightRadius + 'px' : sectionproperties.borderTopLeftRadius + 'px',
-            borderColor: sectionproperties.sectioncardbordercolor,
-            border: sectionproperties.sectioncardborderwidth + 'px solid',
-        }),
-        sectionTitle: css({
-            marginTop: sectionproperties.sectionTitleMarginTop + 'px',
-            marginBottom: sectionproperties.sectionTitleMarginBottom + 'px',
-            fontWeight: sectionproperties.sectionTitleFontWeight,
-            color: sectionproperties.sectionTitleColor,
-        }),
-        description: css({
-            fontWeight: sectionproperties.prodCatFontWeight,
-            color: sectionproperties.prodCatColor,
-            marginBottom: sectionproperties.descriptionMarginBottom + 'px',
-        }),
-        iconContainer: css({
-            width: sectionproperties.iconcontainerwidth + 'vh',
-            height: sectionproperties.iconcontainerheight + 'vh',
-            border: sectionproperties.iconcontainer_borderWidth + 'px solid ' + sectionproperties.iconcontainer_bordercolor,
-            borderRadius: sectionproperties.iconcontainerborderbl + 'px',
-            background: sectionproperties.iconcontainerbg,
-            color: sectionproperties.iconcontainercolor,
-            transition: '.3s',
-            ':hover': {
-                color: sectionproperties.iconcontainercoloronhover,
-            },
-        }),
-        storeinfotitle: css({
-            fontSize: sectionproperties.footerinfotext_secondaryfontsize + 'px',
-            fontWeight: sectionproperties.footerinfotext_secondaryfontweight,
-            color: sectionproperties.footerinfotext_secondarycolor,
-        }),
-        storeinfo: css({
-            cursor: 'pointer',
-            fontSize: sectionproperties.footerinfotext_fontsize + 'px',
-            color: sectionproperties.footerinfotext_color,
-            fontWeight: sectionproperties.footerinfotext_fontweight,
-            transition: '.3s',
-            ':hover .storeinfo': {
-                color: sectionproperties.footerinfotext_coloronhover,
-                transition: '.3s',
-            },
-            ':hover .storeinfoicon': {
-                backgroundColor: sectionproperties.iconcontainerbgonhover,
-                transition: '.3s',
-            },
-        }),
-    };
-    const SectionTitle = () => {
-        return (
-            <p
-                class={
-                    sectionproperties.sectiontitlefontfamily == 'Pacifico'
-                        ? section_styles.sectionTitle + ' PacificoFont p-0 wordbreak '
-                        : sectionproperties.sectiontitlefontfamily == 'Playfair'
-                        ? section_styles.sectionTitle + ' PlayfairFont p-0 wordbreak '
-                        : sectionproperties.sectiontitlefontfamily == 'Great Vibes'
-                        ? section_styles.sectionTitle + ' GreatvibesFont p-0 wordbreak '
-                        : sectionproperties.sectiontitlefontfamily == 'Quicksand'
-                        ? section_styles.sectionTitle + ' QuicksandFont p-0 wordbreak '
-                        : sectionproperties.sectiontitlefontfamily == 'Satisfy'
-                        ? section_styles.sectionTitle + ' SatisfyFont p-0 wordbreak '
-                        : section_styles.sectionTitle + '  p-0 wordbreak '
-                }
-                style={{
-                    textAlign: sectionproperties.sectiontitleposition == 'Centered' ? 'center' : '',
-                }}
-            >
-                {langdetect == 'en' ? sectionproperties.sectionTitleContent : sectionproperties.sectionTitleContent_ar}
-            </p>
-        );
-    };
-    const Description = () => {
-        return (
-            <p
-                class={
-                    sectionproperties.descFontFamily == 'Pacifico'
-                        ? section_styles.description + ' PacificoFont p-0 wordbreak '
-                        : sectionproperties.descFontFamily == 'Playfair'
-                        ? section_styles.description + ' PlayfairFont p-0 wordbreak '
-                        : sectionproperties.descFontFamily == 'Great Vibes'
-                        ? section_styles.description + ' GreatvibesFont p-0 wordbreak '
-                        : sectionproperties.descFontFamily == 'Quicksand'
-                        ? section_styles.description + ' QuicksandFont p-0 wordbreak '
-                        : sectionproperties.descFontFamily == 'Satisfy'
-                        ? section_styles.description + ' SatisfyFont p-0 wordbreak '
-                        : section_styles.description + '  p-0 wordbreak '
-                }
-                style={{
-                    textAlign: sectionproperties.sectiontitleposition == 'Centered' ? 'center' : '',
-                }}
-            >
-                {langdetect == 'en' ? sectionproperties.descriptionContentEn : sectionproperties.descriptionContentAr}
-            </p>
-        );
-    };
-    return (
-        <div class={section_styles.cards_sections + ' row m-0 d-flex align-items-center h-md-150vh pl-sm-3 pr-sm-3 pb-md-5 '}>
-            <div class={' col-lg-12 p-0 h-100 '} style={{ overflow: 'hidden' }}>
-                <div class="row m-0 d-flex justify-content-center w-100 h-100">
-                    <div class="col-lg-6 d-flex align-items-center justify-content-start flex-column p-0">
-                        <div class="row m-0 w-100 d-flex align-items-center justify-content-start pl-5 pr-5 pl-md-2 pr-md-2 p-sm-0">
-                            <div
-                                class="col-lg-12 p-0 d-flex d-sm-none align-items-center"
-                                style={{
-                                    justifyContent: sectionproperties.sectiontitleposition == 'Centered' ? 'center' : 'start',
-                                    fontSize: sectionproperties.sectionTitleFontSize + 'px',
-                                }}
-                            >
-                                {SectionTitle()}
-                            </div>
-                            <div
-                                class="col-lg-12 p-0 d-none d-sm-flex align-items-center justify-content-start"
-                                style={{
-                                    justifyContent: sectionproperties.sectiontitleposition == 'Centered' ? 'center' : 'start',
-                                    fontSize: sectionproperties.sectionTitleFontSizeresp + 'px',
-                                }}
-                            >
-                                {SectionTitle()}
-                            </div>
-                            <div
-                                class="col-lg-12 p-0 d-flex d-sm-none align-items-center"
-                                style={{
-                                    justifyContent: sectionproperties.sectiontitleposition == 'Centered' ? 'center' : 'start',
-                                    fontSize: sectionproperties.prodCatFontSize + 'px',
-                                }}
-                            >
-                                {Description()}
-                            </div>
-                            <div
-                                class="col-lg-12 p-0 d-none d-sm-flex align-items-center"
-                                style={{
-                                    justifyContent: sectionproperties.sectiontitleposition == 'Centered' ? 'center' : 'start',
-                                    fontSize: sectionproperties.prodCatFontSizeResp + 'px',
-                                }}
-                            >
-                                {Description()}
-                            </div>
-
-                            {sectionproperties.showfooteremail == 'Show' && (
-                                <div class="col-lg-12 p-0 d-flex align-items-center justify-content-start mb-5">
-                                    <p
-                                        class={section_styles.storeinfo + ' m-0 p-0 d-flex justify-content-start flex-row '}
-                                        onClick={() => {
-                                            window.open('mailto:' + authdetailsContext?.instinfo?.contactinfo?.email, '_self');
-                                        }}
-                                    >
-                                        <span class={section_styles.iconContainer + ' allcentered storeinfoicon '}>
-                                            <i class="h-100 allcentered">
-                                                <AiOutlineMail size={sectionproperties.iconcontainer_iconfontsize} />
-                                            </i>
-                                        </span>
-                                        <span class="ml-2 mr-2 d-flex justify-content-start flex-column">
-                                            <span class={section_styles.storeinfotitle} style={{ textAlign: langdetect == 'en' ? 'left' : 'right' }}>
-                                                {langdetect == 'en' ? sectionproperties.emailtitle_en : sectionproperties.emailtitle_ar}
-                                            </span>
-                                            <span class="storeinfo">{authdetailsContext?.instinfo?.contactinfo?.email}</span>
-                                        </span>
-                                    </p>
-                                </div>
-                            )}
-                            {sectionproperties.showfooterphonenumber == 'Show' && (
-                                <div class="col-lg-12 p-0 d-flex align-items-center justify-content-start mb-5">
-                                    <p
-                                        class={section_styles.storeinfo + ' m-0 p-0 d-flex justify-content-start flex-row '}
-                                        onClick={() => {
-                                            window.open('tel:' + authdetailsContext?.CuContactphonenumber, '_blank');
-                                        }}
-                                    >
-                                        <span class={section_styles.iconContainer + ' allcentered storeinfoicon '}>
-                                            <i class="h-100 allcentered">
-                                                <FiPhoneCall size={sectionproperties.iconcontainer_iconfontsize} />
-                                            </i>
-                                        </span>
-                                        <span class="ml-2 mr-2 d-flex justify-content-start flex-column">
-                                            <span class={section_styles.storeinfotitle} style={{ textAlign: langdetect == 'en' ? 'left' : 'right' }}>
-                                                {langdetect == 'en' ? sectionproperties.phonetitle_en : sectionproperties.phonetitle_ar}
-                                            </span>
-                                            <span class="storeinfo">{authdetailsContext?.CuContactphonenumber}</span>
-                                        </span>
-                                    </p>
-                                </div>
-                            )}
-                            {sectionproperties.showfooteraddress == 'Show' && (
-                                <div class="col-lg-12 p-0 d-flex align-items-center justify-content-start mb-5 ">
-                                    <p
-                                        class={section_styles.storeinfo + ' m-0 p-0 d-flex justify-content-start flex-row '}
-                                        onClick={() => {
-                                            window.open(authdetailsContext?.instinfo?.googlemapslink);
-                                        }}
-                                    >
-                                        <span class={section_styles.iconContainer + ' allcentered storeinfoicon '}>
-                                            <i class="h-100 allcentered">
-                                                <HiOutlineLocationMarker size={sectionproperties.iconcontainer_iconfontsize} />
-                                            </i>
-                                        </span>
-                                        <span class="ml-2 mr-2 d-flex justify-content-start flex-column">
-                                            <span class={section_styles.storeinfotitle}></span>
-                                            <span class={section_styles.storeinfotitle} style={{ textAlign: langdetect == 'en' ? 'left' : 'right' }}>
-                                                {langdetect == 'en' ? sectionproperties.addresstitle_en : sectionproperties.addresstitle_ar}
-                                            </span>
-                                            <span class="storeinfo">{authdetailsContext?.instinfo?.address_en}</span>
-                                        </span>
-                                    </p>
-                                </div>
-                            )}
-                        </div>
-                    </div>
-                    <div class="col-lg-6 allcentered p-0 h-100">
-                        <iframe src={authdetailsContext?.instinfo?.googlemapslink} width="100%" height="100%" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
-                    </div>
-                </div>
-            </div>
-        </div>
-    );
-};
-export default ContactUsSection;