tabexseriescomponents 0.0.706 → 0.0.708

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

@@ -0,0 +1,462 @@
+import React, { useEffect, useState } from 'react';
+import { css } from 'glamor';
+import { Imagekitimagecomp } from '../../../../Imagekitconfig.jsx';
+
+const TextSectionConnectToWA = (props) => {
+    const [sectionproperties, setsectionproperties] = useState('');
+    const langdetect = props.actions.langdetect;
+    const StatePagePropertiesContext = props.actions.StatePagePropertiesContext;
+    const authdetailsContext = props.actions.authdetailsContext;
+    const ikimagecredcontext = props.actions.ikimagecredcontext;
+    const routingcountext = props.actions.routingcountext;
+
+    const [maincontainerarrayofobjs, setmaincontainerarrayofobjs] = useState([]);
+    useEffect(() => {
+        if (sectionproperties.length != 0 && sectionproperties.maincontainerarrayofobjs != undefined) {
+            var maincontainerarrayofobjsparsed = JSON.parse(sectionproperties.maincontainerarrayofobjs);
+            if (Array.isArray(maincontainerarrayofobjsparsed)) {
+                setmaincontainerarrayofobjs([...maincontainerarrayofobjsparsed]);
+            }
+        }
+    }, [sectionproperties]);
+    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 sectionstyles = {
+        sectionTitleStyles: css({
+            color: sectionproperties.sectionTitleColor,
+            fontWeight: sectionproperties.sectionTitleFontWeight,
+            marginBottom: sectionproperties.sectionTitleMarginBottom + 'px',
+        }),
+        descriptionStyles: css({
+            color: sectionproperties.prodCatColor,
+            fontWeight: sectionproperties.prodCatFontWeight,
+            marginBottom: sectionproperties.descriptionMarginBottom + 'px',
+        }),
+        btnStyles: css({
+            width: sectionproperties.generalbtn_width > 0 ? sectionproperties.generalbtn_width : 'auto',
+            paddingLeft: sectionproperties.generalbtn_width > 0 ? 0 : 10,
+            paddingRight: sectionproperties.generalbtn_width > 0 ? 0 : 10,
+            height: sectionproperties.generalbtn_height + 'px',
+            backgroundColor: sectionproperties.slideshow_btn_bg,
+            color: sectionproperties.generalbtn_textColor,
+            fontSize: sectionproperties.generalbtn_fontsize + 'px',
+            borderTopLeftRadius: langdetect == 'en' ? sectionproperties.generalbtn_bordertopleftradius + 'px' : sectionproperties.generalbtn_bordertoprightradius + 'px',
+            borderTopRightRadius: langdetect == 'en' ? sectionproperties.generalbtn_bordertoprightradius + 'px' : sectionproperties.generalbtn_bordertopleftradius + 'px',
+            borderBottomLeftRadius: langdetect == 'en' ? sectionproperties.generalbtn_borderbottomleftradius + 'px' : sectionproperties.generalbtn_borderbottomrightradius + 'px',
+            borderBottomRightRadius: langdetect == 'en' ? sectionproperties.generalbtn_borderbottomrightradius + 'px' : sectionproperties.generalbtn_borderbottomleftradius + 'px',
+            transition: '.3s',
+            ':hover': {
+                backgroundColor: sectionproperties.slideshow_btn_hoverbg,
+                color: sectionproperties.generalbtn_textColoronhover,
+            },
+        }),
+        imgcontainer: css({
+            ':before': {
+                width: '100%',
+                height: '100%',
+                background: 'rgba(0,0,0,' + sectionproperties.cardimg_opacity + ')',
+                zIndex: 1,
+                position: 'absolute',
+                content: 's',
+                fontSize: 0,
+                left: 0,
+                right: 0,
+                top: 0,
+                bottom: 0,
+            },
+        }),
+    };
+
+    return (
+        <div
+            className={sectionproperties.card_marginLeft != 0 ? 'row ml-0 mr-0 w-100 pl-md-2 pr-md-2 allcentered' : 'row ml-0 mr-0 w-100 allcentered'}
+            style={{
+                position: 'relative',
+                background: sectionproperties.backgroundColor,
+                paddingLeft: langdetect == 'en' ? sectionproperties.card_marginLeft + 'px' : sectionproperties.card_marginRight + 'px',
+                paddingRight: langdetect == 'en' ? sectionproperties.card_marginRight + 'px' : sectionproperties.card_marginLeft + 'px',
+            }}
+        >
+            <div
+                class={sectionproperties.width == 100 ? 'row m-0 w-md-100 px-1025-1 pl-md-2 pr-md-2' : 'row m-0 w-md-100 px-1025-1 pl-md-2 pr-md-2'}
+                style={{
+                    width: sectionproperties.width + 'vw',
+                    position: 'relative',
+                    background: sectionproperties.reservation_bgcolor,
+                    border: sectionproperties.sectioncardborderwidth + 'px solid ' + sectionproperties.sectioncardbordercolor,
+                    borderTopLeftRadius: sectionproperties.borderTopLeftRadius + 'px',
+                    borderTopRightRadius: sectionproperties.borderTopRightRadius + 'px',
+                    borderBottomLeftRadius: sectionproperties.borderBottomLeftRadius + 'px',
+                    borderBottomRightRadius: sectionproperties.borderBottomRightRadius + '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',
+                }}
+            >
+                {maincontainerarrayofobjs != undefined && maincontainerarrayofobjs?.length != 0 && (
+                    <div class={sectionstyles.imgcontainer}>
+                        <Imagekitimagecomp
+                            urlEndpoint={ikimagecredcontext?.ikimageendpoint}
+                            publicKey={ikimagecredcontext?.ikimagepublickey}
+                            path={maincontainerarrayofobjs[0]?.back_bgimage}
+                            style={{
+                                height: '100%',
+                                width: '100%',
+                                objectFit: 'cover',
+                                margin: 0,
+                                padding: 0,
+                                position: 'absolute',
+                                top: 0,
+                                bottom: 0,
+                                right: 0,
+                                left: 0,
+                            }}
+                        />
+                    </div>
+                )}
+                <div class="col-lg-12 p-0" style={{ zIndex: 1 }}>
+                    {sectionproperties.cardsdirection == 'Vertical' && (
+                        <div class="row m-0 w-100">
+                            {sectionproperties.sectiontitleshow == 'Show' && (
+                                <div
+                                    class={'col-lg-12 p-0 d-flex align-items-center'}
+                                    style={{
+                                        justifyContent: sectionproperties.sectiontitleposition == 'Centered' ? 'center' : 'start',
+                                    }}
+                                >
+                                    <div class={sectionstyles.sectionTitleStyles + ' p-0 d-flex d-sm-none '}>
+                                        <p
+                                            class={
+                                                sectionproperties.sectiontitlefontfamily == 'Pacifico'
+                                                    ? ' PacificoFont wordbreak m-0 p-0 '
+                                                    : sectionproperties.sectiontitlefontfamily == 'Playfair'
+                                                    ? ' PlayfairFont wordbreak m-0 p-0 '
+                                                    : sectionproperties.sectiontitlefontfamily == 'Great Vibes'
+                                                    ? ' GreatvibesFont wordbreak m-0 p-0 '
+                                                    : sectionproperties.sectiontitlefontfamily == 'Quicksand'
+                                                    ? ' QuicksandFont wordbreak m-0 p-0 '
+                                                    : sectionproperties.sectiontitlefontfamily == 'Satisfy'
+                                                    ? ' SatisfyFont wordbreak m-0 p-0 '
+                                                    : sectionproperties.sectiontitlefontfamily == 'ASUL'
+                                                    ? ' ASUL wordbreak m-0 p-0 '
+                                                    : '  wordbreak m-0 p-0 '
+                                            }
+                                            style={{
+                                                fontSize: sectionproperties.sectionTitleFontSize + 'px',
+                                                textAlign: sectionproperties.sectiontitleposition == 'Centered' ? 'center' : langdetect == 'en' ? 'left' : 'right',
+                                            }}
+                                        >
+                                            {langdetect == 'en' ? sectionproperties.sectionTitleContent : sectionproperties.sectionTitleContent_ar}
+                                        </p>
+                                    </div>
+                                    <div class={sectionstyles.sectionTitleStyles + ' p-0 d-none d-sm-flex  '}>
+                                        <p
+                                            class={
+                                                sectionproperties.sectiontitlefontfamily == 'Pacifico'
+                                                    ? ' PacificoFont wordbreak m-0 p-0 '
+                                                    : sectionproperties.sectiontitlefontfamily == 'Playfair'
+                                                    ? ' PlayfairFont wordbreak m-0 p-0 '
+                                                    : sectionproperties.sectiontitlefontfamily == 'Great Vibes'
+                                                    ? ' GreatvibesFont wordbreak m-0 p-0 '
+                                                    : sectionproperties.sectiontitlefontfamily == 'Quicksand'
+                                                    ? ' QuicksandFont wordbreak m-0 p-0 '
+                                                    : sectionproperties.sectiontitlefontfamily == 'Satisfy'
+                                                    ? ' SatisfyFont wordbreak m-0 p-0 '
+                                                    : sectionproperties.sectiontitlefontfamily == 'ASUL'
+                                                    ? ' ASUL wordbreak m-0 p-0 '
+                                                    : '  wordbreak m-0 p-0 '
+                                            }
+                                            style={{
+                                                fontSize: sectionproperties.sectionTitleFontSizeresp + 'px',
+                                                textAlign: sectionproperties.sectiontitleposition == 'Centered' ? 'center' : langdetect == 'en' ? 'left' : 'right',
+                                            }}
+                                        >
+                                            {langdetect == 'en' ? sectionproperties.sectionTitleContent : sectionproperties.sectionTitleContent_ar}
+                                        </p>
+                                    </div>
+                                </div>
+                            )}
+                            {sectionproperties.prodCatShow == 'Show' && (
+                                <div
+                                    class={'col-lg-12 p-0 d-flex align-items-center'}
+                                    style={{
+                                        justifyContent: sectionproperties.descriptionCentered == 'Centered' ? 'center' : 'start',
+                                    }}
+                                >
+                                    <div class={sectionstyles.descriptionStyles + ' p-0 d-flex d-sm-none '}>
+                                        <p
+                                            class={
+                                                sectionproperties.descFontFamily == 'Pacifico'
+                                                    ? ' PacificoFont m-0 p-0 wordbreak '
+                                                    : sectionproperties.descFontFamily == 'Playfair'
+                                                    ? ' PlayfairFont m-0 p-0 wordbreak '
+                                                    : sectionproperties.descFontFamily == 'Great Vibes'
+                                                    ? ' GreatvibesFont m-0 p-0 wordbreak '
+                                                    : sectionproperties.descFontFamily == 'Quicksand'
+                                                    ? ' QuicksandFont m-0 p-0 wordbreak'
+                                                    : sectionproperties.descFontFamily == 'ASUL'
+                                                    ? ' ASUL  m-0 p-0 wordbreak '
+                                                    : ' m-0 p-0 wordbreak '
+                                            }
+                                            style={{
+                                                fontSize: sectionproperties.prodCatFontSize + 'px',
+                                                textAlign: sectionproperties.descriptionCentered == 'Centered' ? 'center' : langdetect == 'en' ? 'left' : 'right',
+                                            }}
+                                        >
+                                            {langdetect == 'en' ? sectionproperties.descriptionContentEn : sectionproperties.descriptionContentAr}
+                                        </p>
+                                    </div>
+                                    <div class={sectionstyles.descriptionStyles + ' p-0 d-none d-sm-flex  '}>
+                                        <p
+                                            class={
+                                                sectionproperties.descFontFamily == 'Pacifico'
+                                                    ? ' PacificoFont m-0 p-0 wordbreak '
+                                                    : sectionproperties.descFontFamily == 'Playfair'
+                                                    ? ' PlayfairFont m-0 p-0 wordbreak '
+                                                    : sectionproperties.descFontFamily == 'Great Vibes'
+                                                    ? ' GreatvibesFont m-0 p-0 wordbreak '
+                                                    : sectionproperties.descFontFamily == 'Quicksand'
+                                                    ? ' QuicksandFont m-0 p-0 wordbreak'
+                                                    : sectionproperties.descFontFamily == 'ASUL'
+                                                    ? ' ASUL  m-0 p-0 wordbreak '
+                                                    : ' m-0 p-0 wordbreak '
+                                            }
+                                            style={{
+                                                fontSize: sectionproperties.prodCatFontSizeResp + 'px',
+                                                textAlign: sectionproperties.descriptionCentered == 'Centered' ? 'center' : langdetect == 'en' ? 'left' : 'right',
+                                            }}
+                                        >
+                                            {langdetect == 'en' ? sectionproperties.descriptionContentEn : sectionproperties.descriptionContentAr}
+                                        </p>
+                                    </div>
+                                </div>
+                            )}
+                            <div
+                                class={'col-lg-12 p-0 d-flex align-items-center mt-md-3'}
+                                style={{
+                                    justifyContent: sectionproperties.descriptionCentered == 'Centered' ? 'center' : 'start',
+                                }}
+                            >
+                                {sectionproperties.btntype == 'Phone Number' && (
+                                    <div class={sectionstyles.btnStyles + ' allcentered '}>
+                                        <a href={'tel:' + authdetailsContext?.CuContactphonenumber} target={'_self'} class="d-flex align-items-center">
+                                            <p class={sectionstyles.btnStyles + ' m-0 p-0 allcentered '}>
+                                                {langdetect == 'en' ? sectionproperties.generalbtn_content : sectionproperties.slideshow_btn_text_ar}
+                                            </p>
+                                        </a>
+                                    </div>
+                                )}
+                                {sectionproperties.btntype == 'Another Phone Number' && (
+                                    <div class={sectionstyles.btnStyles + ' allcentered '}>
+                                        {/* <a href={'tel:' + sectionproperties.btnlink} target={'_self'} class="d-flex align-items-center"> */}
+                                        <p
+                                            class={sectionstyles.btnStyles + ' m-0 p-0 allcentered '}
+                                            onClick={() => {
+                                                window.open('tel:' + sectionproperties.btnlink, '_blank');
+                                            }}
+                                        >
+                                            {langdetect == 'en' ? sectionproperties.generalbtn_content : sectionproperties.slideshow_btn_text_ar}
+                                        </p>
+                                        {/* </a> */}
+                                    </div>
+                                )}
+                                {sectionproperties.btntype != 'Phone Number' && sectionproperties.btntype != 'Another Phone Number' && (
+                                    <button
+                                        class={sectionstyles.btnStyles}
+                                        onClick={() => {
+                                            if (sectionproperties.btntype == 'WhatsApp') {
+                                                if (authdetailsContext?.instinfo?.whatsappnumber != null) {
+                                                    window.open('https://api.whatsapp.com/send?phone=' + authdetailsContext?.instinfo?.whatsappnumber, '_blank');
+                                                }
+                                            } else if (sectionproperties.btntype == 'App/Web Page') {
+                                                // window.open(sectionproperties.btnlink, '_target');
+                                                routingcountext(sectionproperties.btnlink, false, '');
+                                            } else {
+                                                window.open(sectionproperties.btnlink, '_blank');
+                                            }
+                                        }}
+                                    >
+                                        {langdetect == 'en' ? sectionproperties.generalbtn_content : sectionproperties.slideshow_btn_text_ar}
+                                    </button>
+                                )}
+                            </div>
+                        </div>
+                    )}
+                    {sectionproperties.cardsdirection == 'Horizontal' && (
+                        <div class="row m-0 w-100 d-flex align-items-center">
+                            <div class="col-lg-9 col-md-12 p-0">
+                                <div class="row m-0 w-100">
+                                    {sectionproperties.sectiontitleshow == 'Show' && (
+                                        <div
+                                            class={'col-lg-12 p-0 d-flex align-items-center justify-content-md-center'}
+                                            style={{
+                                                justifyContent: sectionproperties.sectiontitleposition == 'Centered' ? 'center' : 'start',
+                                            }}
+                                        >
+                                            <div class={sectionstyles.sectionTitleStyles + ' p-0 d-flex d-sm-none '}>
+                                                <p
+                                                    class={
+                                                        sectionproperties.sectiontitlefontfamily == 'Pacifico'
+                                                            ? ' PacificoFont wordbreak m-0 p-0 '
+                                                            : sectionproperties.sectiontitlefontfamily == 'Playfair'
+                                                            ? ' PlayfairFont wordbreak m-0 p-0 '
+                                                            : sectionproperties.sectiontitlefontfamily == 'Great Vibes'
+                                                            ? ' GreatvibesFont wordbreak m-0 p-0 '
+                                                            : sectionproperties.sectiontitlefontfamily == 'Quicksand'
+                                                            ? ' QuicksandFont wordbreak m-0 p-0 '
+                                                            : sectionproperties.sectiontitlefontfamily == 'Satisfy'
+                                                            ? ' SatisfyFont wordbreak m-0 p-0 '
+                                                            : sectionproperties.sectiontitlefontfamily == 'ASUL'
+                                                            ? ' ASUL wordbreak m-0 p-0 '
+                                                            : '  wordbreak m-0 p-0 '
+                                                    }
+                                                    style={{
+                                                        fontSize: sectionproperties.sectionTitleFontSize + 'px',
+                                                        textAlign: sectionproperties.sectiontitleposition == 'Centered' ? 'center' : langdetect == 'en' ? 'left' : 'right',
+                                                    }}
+                                                >
+                                                    {langdetect == 'en' ? sectionproperties.sectionTitleContent : sectionproperties.sectionTitleContent_ar}
+                                                </p>
+                                            </div>
+                                            <div class={sectionstyles.sectionTitleStyles + ' p-0 d-none d-sm-flex  '}>
+                                                <p
+                                                    class={
+                                                        sectionproperties.sectiontitlefontfamily == 'Pacifico'
+                                                            ? ' PacificoFont wordbreak m-0 p-0 '
+                                                            : sectionproperties.sectiontitlefontfamily == 'Playfair'
+                                                            ? ' PlayfairFont wordbreak m-0 p-0 '
+                                                            : sectionproperties.sectiontitlefontfamily == 'Great Vibes'
+                                                            ? ' GreatvibesFont wordbreak m-0 p-0 '
+                                                            : sectionproperties.sectiontitlefontfamily == 'Quicksand'
+                                                            ? ' QuicksandFont wordbreak m-0 p-0 '
+                                                            : sectionproperties.sectiontitlefontfamily == 'Satisfy'
+                                                            ? ' SatisfyFont wordbreak m-0 p-0 '
+                                                            : sectionproperties.sectiontitlefontfamily == 'ASUL'
+                                                            ? ' ASUL wordbreak m-0 p-0 '
+                                                            : '  wordbreak m-0 p-0 '
+                                                    }
+                                                    style={{
+                                                        fontSize: sectionproperties.sectionTitleFontSizeresp + 'px',
+                                                        textAlign: sectionproperties.sectiontitleposition == 'Centered' ? 'center' : langdetect == 'en' ? 'left' : 'right',
+                                                    }}
+                                                >
+                                                    {langdetect == 'en' ? sectionproperties.sectionTitleContent : sectionproperties.sectionTitleContent_ar}
+                                                </p>
+                                            </div>
+                                        </div>
+                                    )}
+                                    {sectionproperties.prodCatShow == 'Show' && (
+                                        <div
+                                            class={'col-lg-12 p-0 d-flex align-items-center justify-content-md-center'}
+                                            style={{
+                                                justifyContent: sectionproperties.descriptionCentered == 'Centered' ? 'center' : 'start',
+                                            }}
+                                        >
+                                            <div class={sectionstyles.descriptionStyles + ' p-0 d-flex d-sm-none '}>
+                                                <p
+                                                    class={
+                                                        sectionproperties.descFontFamily == 'Pacifico'
+                                                            ? ' PacificoFont m-0 p-0 wordbreak '
+                                                            : sectionproperties.descFontFamily == 'Playfair'
+                                                            ? ' PlayfairFont m-0 p-0 wordbreak '
+                                                            : sectionproperties.descFontFamily == 'Great Vibes'
+                                                            ? ' GreatvibesFont m-0 p-0 wordbreak '
+                                                            : sectionproperties.descFontFamily == 'Quicksand'
+                                                            ? ' QuicksandFont m-0 p-0 wordbreak'
+                                                            : sectionproperties.descFontFamily == 'ASUL'
+                                                            ? ' ASUL  m-0 p-0 wordbreak '
+                                                            : ' m-0 p-0 wordbreak '
+                                                    }
+                                                    style={{
+                                                        fontSize: sectionproperties.prodCatFontSize + 'px',
+                                                        textAlign: sectionproperties.descriptionCentered == 'Centered' ? 'center' : langdetect == 'en' ? 'left' : 'right',
+                                                    }}
+                                                >
+                                                    {langdetect == 'en' ? sectionproperties.descriptionContentEn : sectionproperties.descriptionContentAr}
+                                                </p>
+                                            </div>
+                                            <div class={sectionstyles.descriptionStyles + ' p-0 d-none d-sm-flex  '}>
+                                                <p
+                                                    class={
+                                                        sectionproperties.descFontFamily == 'Pacifico'
+                                                            ? ' PacificoFont m-0 p-0 wordbreak '
+                                                            : sectionproperties.descFontFamily == 'Playfair'
+                                                            ? ' PlayfairFont m-0 p-0 wordbreak '
+                                                            : sectionproperties.descFontFamily == 'Great Vibes'
+                                                            ? ' GreatvibesFont m-0 p-0 wordbreak '
+                                                            : sectionproperties.descFontFamily == 'Quicksand'
+                                                            ? ' QuicksandFont m-0 p-0 wordbreak'
+                                                            : sectionproperties.descFontFamily == 'ASUL'
+                                                            ? ' ASUL  m-0 p-0 wordbreak '
+                                                            : ' m-0 p-0 wordbreak '
+                                                    }
+                                                    style={{
+                                                        fontSize: sectionproperties.prodCatFontSizeResp + 'px',
+                                                        textAlign: sectionproperties.descriptionCentered == 'Centered' ? 'center' : langdetect == 'en' ? 'left' : 'right',
+                                                    }}
+                                                >
+                                                    {langdetect == 'en' ? sectionproperties.descriptionContentEn : sectionproperties.descriptionContentAr}
+                                                </p>
+                                            </div>
+                                        </div>
+                                    )}
+                                </div>
+                            </div>
+                            <div
+                                class={'col-lg-3 col-md-12 p-0 d-flex align-items-center mt-md-3 justify-content-md-center'}
+                                style={{
+                                    justifyContent: sectionproperties.descriptionCentered == 'Centered' ? 'center' : 'start',
+                                }}
+                            >
+                                {sectionproperties.btntype == 'Phone Number' && (
+                                    <div class={sectionstyles.btnStyles}>
+                                        <a href={'tel:' + authdetailsContext?.CuContactphonenumber} target={'_self'} class="d-flex align-items-center">
+                                            <p class={' m-0 p-0 '}>{langdetect == 'en' ? sectionproperties.generalbtn_content : sectionproperties.slideshow_btn_text_ar}</p>
+                                        </a>
+                                    </div>
+                                )}
+                                {sectionproperties.btntype == 'Another Phone Number' && (
+                                    <div class={sectionstyles.btnStyles}>
+                                        <a href={'tel:' + sectionproperties.btnlink} target={'_self'} class="d-flex align-items-center">
+                                            <p class={' m-0 p-0 '}>{langdetect == 'en' ? sectionproperties.generalbtn_content : sectionproperties.slideshow_btn_text_ar}</p>
+                                        </a>
+                                    </div>
+                                )}
+                                {sectionproperties.btntype != 'Phone Number' && sectionproperties.btntype != 'Another Phone Number' && (
+                                    <button
+                                        class={sectionstyles.btnStyles}
+                                        onClick={() => {
+                                            if (sectionproperties.btntype == 'WhatsApp') {
+                                                if (authdetailsContext?.instinfo?.whatsappnumber != null) {
+                                                    window.open('https://api.whatsapp.com/send?phone=' + authdetailsContext?.instinfo?.whatsappnumber, '_blank');
+                                                }
+                                            } else if (sectionproperties.btntype == 'App/Web Page') {
+                                                // window.open(sectionproperties.btnlink, '_target');
+                                                routingcountext(sectionproperties.btnlink, false, '');
+                                            } else {
+                                                window.open(sectionproperties.btnlink, '_blank');
+                                            }
+                                        }}
+                                    >
+                                        {langdetect == 'en' ? sectionproperties.generalbtn_content : sectionproperties.slideshow_btn_text_ar}
+                                    </button>
+                                )}
+                            </div>
+                        </div>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+};
+export default TextSectionConnectToWA;