tabexseriescomponents 0.2.1069 → 0.2.1071

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

@@ -0,0 +1,358 @@
+import React, { useEffect, useState, useContext } from 'react';
+import { css } from 'glamor';
+import { FiPhone } from '@react-icons/all-files/fi/FiPhone';
+import { FaWhatsapp } from '@react-icons/all-files/fa/FaWhatsapp';
+import { AiFillInstagram } from '@react-icons/all-files/ai/AiFillInstagram';
+import { IoLocationSharp } from '@react-icons/all-files/io5/IoLocationSharp';
+import { FaFacebook } from '@react-icons/all-files/fa/FaFacebook';
+import { IoLogoTiktok } from '@react-icons/all-files/io5/IoLogoTiktok';
+
+const FloatingIcons = (props) => {
+    const [sectionproperties, setsectionproperties] = useState('');
+    const langdetect = props.actions.langdetect;
+    const authdetailsContext = props.actions.authdetailsContext;
+    const routingcountext = props.actions.routingcountext;
+
+    useEffect(() => {
+        if (props.sectionpropertiesprops != undefined) {
+            setsectionproperties({ ...props.sectionpropertiesprops });
+        }
+    }, [props.sectionpropertiesprops]);
+    const header_cssstyles = {
+        floatingwaicon: css({
+            position: 'fixed',
+            zIndex: 999999,
+            transition: 'all 0.3s ease-out',
+            bottom: sectionproperties.floatingwhatsapppositionfrombottom + 'px',
+            right:
+                sectionproperties.cartBtnShow == 'Hide' ? (langdetect == 'en' ? sectionproperties.floatingwhatsapppositionfromright + 'px' : '') : sectionproperties.floatingwhatsapppositionfromright,
+            left: sectionproperties.cartBtnShow == 'Hide' ? (langdetect == 'ar' ? sectionproperties.floatingwhatsapppositionfromright + 'px' : '') : '',
+            width: sectionproperties.floatingwhatsappiconwidth + 'px',
+            height: sectionproperties.floatingwhatappiconheight + 'px',
+            background: sectionproperties.floatingwhatappiconbgcolor,
+            borderRadius: sectionproperties.floatingwhatsappiconborderradius + 'px',
+            fontSize: sectionproperties.floatingwhatsappiconfontsize + 'px',
+            color: sectionproperties.floatingwhatsappiconcolor,
+            ':hover': {
+                color: sectionproperties.floatingwhatsappiconcoloronhover,
+                background: sectionproperties.floatingwhatappiconbgcoloronhover,
+            },
+        }),
+        waicon: css({
+            color: sectionproperties.floatingwhatsappiconcolor,
+
+            ':hover': {
+                color: sectionproperties.floatingwhatsappiconcoloronhover,
+            },
+        }),
+        fbfloatingicon: css({
+            position: 'fixed',
+            zIndex: 999999,
+            transition: 'all 0.3s ease-out',
+            bottom: sectionproperties.floatingfbfrombottom + 'px',
+            width: sectionproperties.floatingfbiconwidth + 'px',
+            height: sectionproperties.floatingfbiconheight + 'px',
+            background: sectionproperties.floatingfbiconbgcolor,
+            borderRadius: sectionproperties.floatingfbiconborderradius + 'px',
+            fontSize: sectionproperties.floatingfbiconfontsize + 'px',
+            color: sectionproperties.floatingfbiconiconcolor,
+            ':hover': {
+                color: sectionproperties.floatingfbiconiconcoloronhover,
+                background: sectionproperties.floatingwhatappiconbgcoloronhover,
+            },
+        }),
+        fbfloatingiconen: css({
+            right: sectionproperties.floatingfbfromright + 'px',
+        }),
+        fbfloatingiconar: css({
+            left: sectionproperties.floatingfbfromright + 'px',
+        }),
+        instagramfloatingicon: css({
+            position: 'fixed',
+            zIndex: 999999,
+            transition: 'all 0.3s ease-out',
+            bottom: sectionproperties.floatinginstagramfrombottom + 'px',
+            width: sectionproperties.floatinginstagramiconwidth + 'px',
+            height: sectionproperties.floatinginstagramiconheight + 'px',
+            background: sectionproperties.floatinginstagramiconbgcolor,
+            borderRadius: sectionproperties.floatinginstagramiconborderradius + 'px',
+            color: sectionproperties.floatinginstagramiconiconcolor,
+            ':hover': {
+                color: sectionproperties.floatinginstagramiconiconcoloronhover,
+                background: sectionproperties.floatinginstagramiconbgcoloronhover,
+            },
+        }),
+        instagramfloatingiconen: css({
+            right: sectionproperties.floatinginstagramfromright + 'px',
+        }),
+        instagramfloatingiconar: css({
+            left: sectionproperties.floatinginstagramfromright + 'px',
+        }),
+        tiktokfloatingicon: css({
+            position: 'fixed',
+            zIndex: 999999,
+            transition: 'all 0.3s ease-out',
+            bottom: sectionproperties.tiktokfloatingiconfrombottom + 'px',
+            width: sectionproperties.tiktokfloatingiconiconwidth + 'px',
+            height: sectionproperties.tiktokfloatingiconheight + 'px',
+            background: sectionproperties.tiktokfloatingiconbgcolor,
+            borderRadius: sectionproperties.tiktokfloatingiconborderradius + 'px',
+            color: sectionproperties.tiktokfloatingiconcolor,
+            ':hover': {
+                color: sectionproperties.tiktokfloatingiconcoloronhover,
+                background: sectionproperties.tiktokfloatingiconbgcoloronhover,
+            },
+        }),
+        tiktokfloatingiconen: css({
+            right: sectionproperties.tiktokfloatingiconfromright + 'px',
+        }),
+        tiktokfloatingiconar: css({
+            left: sectionproperties.tiktokfloatingiconfromright + 'px',
+        }),
+        floatingbtn: css({
+            position: 'fixed',
+            bottom: sectionproperties.floatingbtnfrombottom + 'px',
+            zIndex: 999999,
+            transition: 'all 0.3s ease-out',
+            width: sectionproperties.floatingbtnwidth + 'px',
+            height: sectionproperties.floatingbtnheight + 'px',
+            background: sectionproperties.floatingbtnbg,
+            fontSize: sectionproperties.floatingbtnfontsize + 'px',
+            color: sectionproperties.floatingbtncolor,
+            borderRadius: sectionproperties.floatingbuttonborderradius + 'px',
+            ':hover': {
+                color: sectionproperties.floatingbtncolorhover,
+                backgroundColor: sectionproperties.floatingbtnbghover,
+                transitions: '.3s',
+                cursor: 'pointer',
+            },
+            // '@media (max-width: 800px)': {
+            //     width: '50%',
+            // },
+        }),
+        floatingbtnen: css({
+            right: sectionproperties.floatingbtnfromright + 'px',
+        }),
+        floatingbtnar: css({
+            left: sectionproperties.floatingbtnfromright + 'px',
+        }),
+        callbtn: css({
+            position: 'fixed',
+            zIndex: 999999,
+            transition: 'all 0.3s ease-out',
+            width: sectionproperties.callfloatingiconiconwidth + 'px',
+            height: sectionproperties.callfloatingiconiconheight + 'px',
+            background: sectionproperties.callfloatingbgcolor,
+            borderRadius: sectionproperties.callfloatingiconiconborderradius + 'px',
+            color: sectionproperties.callfloatingcolor,
+            ':hover': {
+                color: sectionproperties.callfloatingcoloronhover,
+                background: sectionproperties.callfloatingbgcoloronhover,
+            },
+        }),
+        callbtnen: css({
+            right: sectionproperties.callppositionfromright + 'px',
+        }),
+        callbtnar: css({
+            left: sectionproperties.callppositionfromright + 'px',
+        }),
+        callbtntms: css({
+            position: 'fixed',
+            zIndex: 999999,
+            transition: 'all 0.3s ease-out',
+            width: '50px',
+            height: '50px',
+            background: '#99dfff',
+            borderRadius: '100px',
+            color: '#fff',
+            ':hover': {
+                color: '#fff',
+                background: '#99dfff',
+            },
+        }),
+        callbtnentms: css({
+            right: sectionproperties.floatingwhatsapppositionfromright + 'px',
+        }),
+        callbtnartms: css({
+            left: sectionproperties.floatingwhatsapppositionfromright + 'px',
+        }),
+    };
+
+    const whatsappUrl = `https://wa.me/${authdetailsContext?.instinfo?.whatsappnumber}?text=${sectionproperties.directwabtnmessageen}`;
+
+    const whatsappUrl_ar = `https://wa.me/${authdetailsContext?.instinfo?.whatsappnumber}?text=${sectionproperties.directwabtnmessagear}`;
+    return (
+        <div class={''} style={{ position: 'relative' }}>
+            {sectionproperties.showfloatingwaicon == 'Show' && (
+                <div class={header_cssstyles.floatingwaicon + ' allcentered cursor-pointer '}>
+                    <a
+                        href={authdetailsContext.instinfo.instid == '68333d09dc47d' ? 'https://chat.whatsapp.com/Imq769Yj7XBG5zutHtTGgC' : langdetect == 'en' ? whatsappUrl : whatsappUrl_ar}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        style={{}}
+                        class={header_cssstyles.waicon + ' allcentered  cursor-pointer '}
+                    >
+                        <FaWhatsapp size={sectionproperties.floatingwhatsappiconiconfontsize} />
+                        {sectionproperties.floatingwhatsappiconfontsize != 0 && (
+                            <span class={langdetect == 'en' ? 'ml-1' : 'mr-1'}>{langdetect == 'en' ? sectionproperties.floatingwhatsappicontexten : sectionproperties.floatingwhatsappicontextar}</span>
+                        )}
+                    </a>
+                </div>
+            )}
+            {sectionproperties.showfloatingfbbtn == 'Show' && (
+                <div
+                    class={
+                        sectionproperties.cartBtnShow == 'Hide'
+                            ? langdetect == 'en'
+                                ? `${header_cssstyles.fbfloatingicon} ${header_cssstyles.fbfloatingiconen}` + ' allcentered cursor-pointer '
+                                : `${header_cssstyles.fbfloatingicon} ${header_cssstyles.fbfloatingiconar}` + ' allcentered cursor-pointer '
+                            : `${header_cssstyles.fbfloatingicon} ${header_cssstyles.fbfloatingiconen}` + ' allcentered cursor-pointer '
+                    }
+                    onClick={() => {
+                        if (authdetailsContext?.instinfo?.facebooklink != null) {
+                            window.open(authdetailsContext?.instinfo?.facebooklink, '_blank');
+                        }
+                    }}
+                >
+                    <FaFacebook size={sectionproperties.floatingfbiconiconsize} />
+                </div>
+            )}
+            {sectionproperties.instagramfloatingbtnshow == 'Show' && (
+                <div
+                    class={
+                        sectionproperties.cartBtnShow == 'Hide'
+                            ? langdetect == 'en'
+                                ? `${header_cssstyles.instagramfloatingicon} ${header_cssstyles.instagramfloatingiconen}` + ' allcentered cursor-pointer '
+                                : `${header_cssstyles.instagramfloatingicon} ${header_cssstyles.instagramfloatingiconar}` + ' allcentered cursor-pointer '
+                            : `${header_cssstyles.instagramfloatingicon} ${header_cssstyles.instagramfloatingiconen}` + ' allcentered cursor-pointer '
+                    }
+                    onClick={() => {
+                        if (authdetailsContext?.instinfo?.instagramlink != null) {
+                            window.open(authdetailsContext?.instinfo?.instagramlink, '_blank');
+                        }
+                    }}
+                >
+                    <AiFillInstagram size={sectionproperties.floatinginstagramiconiconsize} />
+                </div>
+            )}
+            {sectionproperties.tiktonfloatingbtnshow == 'Show' && (
+                <div
+                    class={
+                        sectionproperties.cartBtnShow == 'Hide'
+                            ? langdetect == 'en'
+                                ? `${header_cssstyles.tiktokfloatingicon} ${header_cssstyles.tiktokfloatingiconen}` + ' allcentered cursor-pointer '
+                                : `${header_cssstyles.tiktokfloatingicon} ${header_cssstyles.tiktokfloatingiconar}` + ' allcentered cursor-pointer '
+                            : `${header_cssstyles.tiktokfloatingicon} ${header_cssstyles.tiktokfloatingiconen}` + ' allcentered cursor-pointer '
+                    }
+                    onClick={() => {
+                        if (authdetailsContext?.instinfo?.instagramlink != null) {
+                            window.open(authdetailsContext?.instinfo?.instagramlink, '_blank');
+                        }
+                    }}
+                >
+                    <IoLogoTiktok size={sectionproperties.tiktokfloatingiconiconfontsize} />
+                </div>
+            )}
+            {sectionproperties.showfloatingbtn == 'Show' && (
+                <div
+                    class={
+                        sectionproperties.cartBtnShow == 'Hide'
+                            ? langdetect == 'en'
+                                ? `${header_cssstyles.floatingbtn} ${header_cssstyles.floatingbtnen}` + ' allcentered cursor-pointer '
+                                : `${header_cssstyles.floatingbtn} ${header_cssstyles.floatingbtnar}` + ' allcentered cursor-pointer '
+                            : `${header_cssstyles.floatingbtn} ${header_cssstyles.floatingbtnen}` + ' allcentered cursor-pointer '
+                    }
+                    style={{}}
+                    onClick={() => {
+                        // routingcountext(sectionproperties.floatingbtnlink, false, '');
+                        if (sectionproperties.btnlinktype == 'Website Link') {
+                            routingcountext(sectionproperties.floatingbtnlink, false, '');
+                        } else {
+                            window.open(sectionproperties.floatingbtnlink, '_blank');
+                        }
+                    }}
+                >
+                    <p class="m-0 p-0">{langdetect == 'en' ? sectionproperties.floatingbtntxten : sectionproperties.floatingbtntxtar}</p>
+                </div>
+            )}
+            {sectionproperties.showfloatingbtn == 'Show when logged in' && authdetailsContext.loggedin && (
+                <div
+                    style={{
+                        position: 'fixed',
+                        bottom: sectionproperties.floatingbtnfrombottom + 'px',
+                        right: langdetect == 'en' ? sectionproperties.floatingbtnfromright + 'px' : '',
+                        left: langdetect == 'ar' ? sectionproperties.floatingbtnfromright + 'px' : '',
+                        zIndex: 2000,
+                        transition: 'all 0.3s ease-out',
+                        width: '100%',
+                    }}
+                    class="text-end"
+                >
+                    <div
+                        class={header_cssstyles.floatingbtn + ' allcentered '}
+                        style={{}}
+                        onClick={() => {
+                            if (sectionproperties.btnlinktype == 'Website Link') {
+                                routingcountext(sectionproperties.floatingbtnlink, false, '');
+                            } else {
+                                window.open(sectionproperties.floatingbtnlink, '_blank');
+
+                                // routingcountext(sectionproperties.floatingbtnlink, true, '');
+                            }
+                        }}
+                    >
+                        <p class="m-0 p-0">{langdetect == 'en' ? sectionproperties.floatingbtntxten : sectionproperties.floatingbtntxtar}</p>
+                    </div>
+                </div>
+            )}
+            {sectionproperties.showfloatingcallbtn == 'Show' && (
+                <a
+                    href={'tel:' + authdetailsContext?.CuContactphonenumber}
+                    target={'_self'}
+                    style={{
+                        position: 'fixed',
+                        bottom: sectionproperties.callppositionfrombottom + 'px',
+                        zIndex: 999999,
+                        transition: 'all 0.3s ease-out',
+                    }}
+                    class={
+                        sectionproperties.cartBtnShow == 'Hide'
+                            ? langdetect == 'en'
+                                ? `${header_cssstyles.callbtn} ${header_cssstyles.callbtnen}` + ' allcentered '
+                                : `${header_cssstyles.callbtn} ${header_cssstyles.callbtnar}` + ' allcentered '
+                            : `${header_cssstyles.callbtn} ${header_cssstyles.callbtnen}` + ' allcentered '
+                    }
+                >
+                    <i class={'h-100 d-flex align-items-center justify-content-center'}>
+                        <FiPhone size={sectionproperties.callfloatingiconfontsize} style={{ transform: langdetect == 'en' ? 'scaleX(1)' : 'scaleX(-1)' }} />
+                    </i>
+                </a>
+            )}
+            {authdetailsContext?.instinfo?.instid == '6824564a386c2' && (
+                <a
+                    href={'tel:' + authdetailsContext?.CuContactphonenumber}
+                    target={'_self'}
+                    style={{
+                        position: 'fixed',
+                        bottom: '80px',
+                        zIndex: 999999,
+                        transition: 'all 0.3s ease-out',
+                    }}
+                    class={
+                        sectionproperties.cartBtnShow == 'Hide'
+                            ? langdetect == 'en'
+                                ? `${header_cssstyles.callbtntms} ${header_cssstyles.callbtnentms}` + ' allcentered '
+                                : `${header_cssstyles.callbtntms} ${header_cssstyles.callbtnartms}` + ' allcentered '
+                            : `${header_cssstyles.callbtntms} ${header_cssstyles.callbtnentms}` + ' allcentered '
+                    }
+                >
+                    <i class={'h-100 d-flex align-items-center justify-content-center'}>
+                        <FiPhone size={20} style={{ transform: langdetect == 'en' ? 'scaleX(1)' : 'scaleX(-1)' }} />
+                    </i>
+                </a>
+            )}
+        </div>
+    );
+};
+
+export default FloatingIcons;