tabexseriescomponents 0.2.1280 → 0.2.1283

package/srcbefore27-11/TabexComponents/Headers/SocialMediaSection/SocialMediaSection.jsx

@@ -1,266 +0,0 @@
-import React, { useEffect, useState, useContext } from 'react';
-import { css } from 'glamor';
-import { FaFacebookF } from '@react-icons/all-files/fa/FaFacebookF';
-import { FaWhatsapp } from '@react-icons/all-files/fa/FaWhatsapp';
-import { AiFillInstagram } from '@react-icons/all-files/ai/AiFillInstagram';
-import { AiFillYoutube } from '@react-icons/all-files/ai/AiFillYoutube';
-import { IoLogoTiktok } from '@react-icons/all-files/io5/IoLogoTiktok';
-import { FaLinkedinIn } from '@react-icons/all-files/fa/FaLinkedinIn';
-import { FaMap } from '@react-icons/all-files/fa/FaMap';
-import { AiOutlineMail } from '@react-icons/all-files/ai/AiOutlineMail';
-
-const SocialMediaSection = (props) => {
-    const actions = props.actions;
-    const StatePagePropertiesContext = props.actions.StatePagePropertiesContext;
-    const [sectionproperties, setsectionproperties] = useState({});
-    const [templateproperties_context, settemplateproperties_context] = useState({});
-    const authdetailsContext = props.actions.authdetailsContext;
-
-    useEffect(() => {
-        if (props.sectionpropertiesprops != undefined) {
-            setsectionproperties({ ...props?.sectionpropertiesprops });
-        }
-    }, [props.sectionpropertiesprops]);
-    useEffect(() => {
-        if (props.templateproperties_contextprops != undefined) {
-            settemplateproperties_context({ ...props?.templateproperties_contextprops });
-        }
-    }, [props.templateproperties_contextprops]);
-
-    const header_cssstyles = {
-        socialmediaicon: css({
-            fontSize: templateproperties_context.socialmediasectioniconfontsize + 'px',
-            color: templateproperties_context.socialmediasectioniconcolor,
-            width: templateproperties_context.socialmediasectioniconwidth + 'px',
-            height: templateproperties_context.socialmediasectioniconheight + 'px',
-            border: templateproperties_context.socialmediasectioniconborderwidth + 'px solid ' + templateproperties_context.socialmediasectionbordercolor,
-            borderRadius: templateproperties_context.socialmediasectioniconborderradius,
-            ':hover': {
-                transition: '.3s',
-                color: templateproperties_context.socialmediasectioniconcoloronhover,
-                border: templateproperties_context.socialmediasectioniconborderwidth + 'px solid ' + templateproperties_context.socialmediasectioniconcoloronhover,
-            },
-        }),
-        fbsocialmediaicon: css({
-            color: templateproperties_context.fbsocialmediasectioniconcolor,
-            background: templateproperties_context.fbsocialmediasectioniconbgcolor,
-            ':hover': {
-                transition: '.3s',
-                color: templateproperties_context.fbsocialmediasectioniconcoloronhover,
-                background: templateproperties_context.fbsocialmediasectioniconbgcoloronhover,
-                border: templateproperties_context.socialmediasectioniconborderwidth + 'px solid ' + templateproperties_context.fbsocialmediasectioniconcoloronhover,
-            },
-        }),
-        instagramsocialmediaicon: css({
-            color: templateproperties_context.instagramsocialmediasectioniconcolor,
-            background: templateproperties_context.instagramsocialmediasectioniconbgcolor,
-            ':hover': {
-                transition: '.3s',
-                color: templateproperties_context.instagramsocialmediasectioniconcoloronhover,
-                background: templateproperties_context.instagramsocialmediasectioniconbgcoloronhover,
-                border: templateproperties_context.socialmediasectioniconborderwidth + 'px solid ' + templateproperties_context.instagramsocialmediasectioniconcoloronhover,
-            },
-        }),
-        ytsocialmediaicon: css({
-            color: templateproperties_context.ytsocialmediasectioniconcolor,
-            background: templateproperties_context.ytsocialmediasectioniconbgcolor,
-            ':hover': {
-                transition: '.3s',
-                color: templateproperties_context.ytsocialmediasectioniconcoloronhover,
-                background: templateproperties_context.ytsocialmediasectioniconbgcoloronhover,
-                border: templateproperties_context.socialmediasectioniconborderwidth + 'px solid ' + templateproperties_context.ytsocialmediasectioniconcoloronhover,
-            },
-        }),
-        linkedinsocialmediaicon: css({
-            color: templateproperties_context.linkedinsocialmediasectioniconcolor,
-            background: templateproperties_context.linkedinsocialmediasectioniconbgcolor,
-            ':hover': {
-                transition: '.3s',
-                color: templateproperties_context.linkedinsocialmediasectioniconcoloronhover,
-                background: templateproperties_context.linkedinsocialmediasectioniconbgcoloronhover,
-                border: templateproperties_context.socialmediasectioniconborderwidth + 'px solid ' + templateproperties_context.linkedinsocialmediasectioniconcoloronhover,
-            },
-        }),
-        tiktoksocialmediaicon: css({
-            color: templateproperties_context.tiktoksocialmediasectioniconcolor,
-            background: templateproperties_context.tiktoksocialmediasectioniconbgcolor,
-            ':hover': {
-                transition: '.3s',
-                color: templateproperties_context.tiktoksocialmediasectioniconcoloronhover,
-                background: templateproperties_context.tiktoksocialmediasectioniconbgcoloronhover,
-                border: templateproperties_context.socialmediasectioniconborderwidth + 'px solid ' + templateproperties_context.tiktoksocialmediasectioniconcoloronhover,
-            },
-        }),
-        icon: css({
-            // color: '#bd8d46',
-            color: templateproperties_context.socialmediaiconcolor,
-            ':hover': {
-                color: templateproperties_context.socialmediaiconcoloronhover,
-                transition: '.3s',
-                // color: '#000',
-            },
-        }),
-        storeinfoprop: css({
-            color: templateproperties_context.socialmediasectioniconcolor,
-            fontSize: 18,
-            ':hover': {
-                color: templateproperties_context.socialmediasectioniconcoloronhover,
-                transition: '.3s',
-            },
-        }),
-    };
-    return (
-        <div
-            class="col-lg-12 px-md-3 allcentered px-1025-1"
-            style={{
-                background: templateproperties_context.socialmediasectionbgcolor,
-                paddingTop: templateproperties_context.socialmediapaddinghorizontal + 'px',
-                paddingBottom: templateproperties_context.socialmediapaddinghorizontal + 'px',
-                paddingLeft: templateproperties_context.socialmediapaddingleftright + 'px',
-                paddingRight: templateproperties_context.socialmediapaddingleftright + 'px',
-            }}
-        >
-            <div class={templateproperties_context.showstoreinfo == 'Show' ? 'col-lg-6 p-0 text-start d-flex flex-row d-md-none' : 'd-none p-0'}>
-                {templateproperties_context.showaddress == 'Show' && (
-                    <p
-                        class={header_cssstyles.storeinfoprop + ' m-0 p-0 cursor-pointer d-flex flex-row d-flex align-items-center '}
-                        onClick={() => {
-                            window.open(templateproperties_context.locationlink, '_blank');
-                        }}
-                    >
-                        <i class={header_cssstyles.icon + ' h-100 d-flex align-items-center justify-content-center '}>
-                            <FaMap size={28} />
-                        </i>
-                        <span class={header_cssstyles.storeinfoprop + ' mx-2 '}>{authdetailsContext?.instinfo?.address_en}</span>
-                    </p>
-                )}
-                {templateproperties_context.showemail == 'Show' && (
-                    <p
-                        class={header_cssstyles.storeinfoprop + ' m-0 p-0 mx-4 cursor-pointer d-flex align-items-center '}
-                        onClick={() => {
-                            window.open('mailto:' + authdetailsContext?.instinfo?.contactinfo?.email, '_self');
-                        }}
-                    >
-                        <i class={header_cssstyles.icon + ' h-100 d-flex align-items-center justify-content-center '}>
-                            <AiOutlineMail size={28} />
-                        </i>
-                        <span class={header_cssstyles.storeinfoprop + ' mx-2 '}> {authdetailsContext?.instinfo?.contactinfo?.email}</span>
-                    </p>
-                )}
-                {templateproperties_context.showphonenumber == 'Show' && (
-                    <p
-                        class={header_cssstyles.storeinfoprop + ' m-0 p-0 mx-4 cursor-pointer d-flex align-items-center '}
-                        onClick={() => {
-                            window.open('tel:' + authdetailsContext?.CuContactphonenumber, '_self');
-                        }}
-                    >
-                        <i
-                            class={header_cssstyles.icon + ' fa fa-phone '}
-                            style={{
-                                fontSize: 25,
-                            }}
-                        ></i>
-                        <span class={header_cssstyles.storeinfoprop + ' mx-2 '}> {authdetailsContext?.CuContactphonenumber}</span>
-                    </p>
-                )}
-            </div>
-            <div class={templateproperties_context.showstoreinfo == 'Show' ? 'col-lg-6 p-0 text-end justify-content-md-center col-md-12' : 'col-lg-12 allcentered p-0'}>
-                {authdetailsContext?.instinfo?.facebooklink != null && (
-                    <div
-                        class={`${header_cssstyles.fbsocialmediaicon} ${header_cssstyles.socialmediaicon}` + '  allcentered mx-2 cursor-pointer '}
-                        onClick={() => {
-                            if (authdetailsContext?.instinfo?.facebooklink != null) {
-                                window.open(authdetailsContext?.instinfo?.facebooklink, '_blank');
-                            }
-                        }}
-                    >
-                        <FaFacebookF size={templateproperties_context.socialmediasectioniconfontsize} />
-                    </div>
-                )}
-                {authdetailsContext?.instinfo?.instagramlink != null && (
-                    <div
-                        class={`${header_cssstyles.instagramsocialmediaicon} ${header_cssstyles.socialmediaicon}` + '  allcentered mx-2 cursor-pointer '}
-                        onClick={() => {
-                            if (authdetailsContext?.instinfo?.instagramlink != null) {
-                                window.open(authdetailsContext?.instinfo?.instagramlink, '_blank');
-                            }
-                        }}
-                    >
-                        <AiFillInstagram
-                            style={{
-                                fontSize: parseFloat(templateproperties_context.socialmediasectioniconfontsize) + 2 + 'px',
-                            }}
-                        />
-                    </div>
-                )}
-                {authdetailsContext?.instinfo?.youtubelink != null && (
-                    <div
-                        class={`${header_cssstyles.ytsocialmediaicon} ${header_cssstyles.socialmediaicon}` + '  allcentered mx-2 cursor-pointer '}
-                        onClick={() => {
-                            if (authdetailsContext?.instinfo?.youtubelink != null) {
-                                window.open(authdetailsContext?.instinfo?.youtubelink, '_blank');
-                            }
-                        }}
-                    >
-                        <AiFillYoutube
-                            style={{
-                                fontSize: parseFloat(templateproperties_context.socialmediasectioniconfontsize) + 2 + 'px',
-                            }}
-                        />
-                    </div>
-                )}
-                {authdetailsContext?.instinfo?.linkedinlink != null && (
-                    <div
-                        class={`${header_cssstyles.linkedinsocialmediaicon} ${header_cssstyles.socialmediaicon}` + '  allcentered mx-2 cursor-pointer '}
-                        onClick={() => {
-                            if (authdetailsContext?.instinfo?.linkedinlink != null) {
-                                window.open(authdetailsContext?.instinfo?.linkedinlink, '_blank');
-                            }
-                        }}
-                    >
-                        <FaLinkedinIn
-                            style={{
-                                fontSize: parseFloat(templateproperties_context.socialmediasectioniconfontsize) + 2 + 'px',
-                            }}
-                        />
-                    </div>
-                )}
-                {authdetailsContext?.instinfo?.tiktoklink != null && (
-                    <div
-                        class={`${header_cssstyles.tiktoksocialmediaicon} ${header_cssstyles.socialmediaicon}` + '  allcentered mx-2 cursor-pointer '}
-                        onClick={() => {
-                            if (authdetailsContext?.instinfo?.tiktoklink != null) {
-                                window.open(authdetailsContext?.instinfo?.tiktoklink, '_blank');
-                            }
-                        }}
-                    >
-                        <IoLogoTiktok
-                            style={{
-                                fontSize: parseFloat(templateproperties_context.socialmediasectioniconfontsize) + 2 + 'px',
-                            }}
-                        />
-                    </div>
-                )}
-
-                {/* {authdetailsContext?.instinfo?.whatsappnumber != null && (
-                    <div
-                        class={`${header_cssstyles.socialmediaicon}` + '  allcentered mx-2 cursor-pointer '}
-                        onClick={() => {
-                            if (authdetailsContext?.instinfo?.whatsappnumber != null) {
-                                window.open('https://api.whatsapp.com/send?phone=' + authdetailsContext?.instinfo?.whatsappnumber, '_blank');
-                            }
-                        }}
-                    >
-                        <FaWhatsapp
-                            style={{
-                                fontSize: parseFloat(templateproperties_context.socialmediasectioniconfontsize) + 2 + 'px',
-                            }}
-                        />
-                    </div>
-                )} */}
-            </div>
-        </div>
-    );
-};
-
-export default SocialMediaSection;