tabexseriescomponents 0.2.1280 → 0.2.1283

package/srcbefore27-11/TabexComponents/Sections/Slideshow/TableSection/TableSection.jsx

@@ -1,423 +0,0 @@
-import React, { useEffect, useState, useContext } from 'react';
-import { css } from 'glamor';
-import generalstyles from '../../../../styles/general/general.module.css';
-import sectionstyles from '../../../../styles/sections/Freetext.module.css';
-
-import { Imagekitimagecomp } from '../../../../Imagekitconfig.jsx';
-import { serverbaselink } from '../../../../../Env.js';
-import { borderRadius, height, width } from '@mui/system';
-const TableSection = (props) => {
-    const [sectionproperties, setsectionproperties] = useState('');
-    const StatePagePropertiesContext = props.actions.StatePagePropertiesContext;
-    const lang = props.actions.lang;
-    const langdetect = props.actions.langdetect;
-    const ikimagecredcontext = props.actions.ikimagecredcontext;
-    const [tablearray, settablearray] = useState([]);
-
-    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 [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(() => {
-        if (sectionproperties.length != 0) {
-            if (sectionproperties.card_arrayofobjects != null) {
-                var bgsection_imagearrayofobjsparsed = JSON.parse(sectionproperties.card_arrayofobjects);
-                if (Array.isArray(bgsection_imagearrayofobjsparsed)) {
-                    settablearray([...bgsection_imagearrayofobjsparsed]);
-                }
-            }
-        }
-    }, [sectionproperties]);
-    const section_styles = {
-        sectiontitlespan: css({
-            fontSize: sectionproperties.sectionTitleFontSize + 'px',
-
-            '@media (max-width: 800px)': {
-                fontSize: sectionproperties.sectionTitleFontSizeresp + 'px',
-            },
-            ':after': {
-                height: '5px',
-                width: sectionproperties.sectitle_lineafterwidth + '%',
-                backgroundColor: sectionproperties.linebgcolor,
-            },
-        }),
-        line_left: css({
-            height: '1px',
-            position: 'relative',
-            flex: '1 1 auto',
-            minWidth: '10%',
-            background: sectionproperties.linebgcolor,
-        }),
-        line_right: css({
-            height: '1px',
-            position: 'relative',
-            flex: '1 1 auto',
-            minWidth: '10%',
-            background: sectionproperties.linebgcolor,
-        }),
-        btn: css({
-            width: sectionproperties.generalbtn_width + 'px',
-            height: sectionproperties.generalbtn_height + 'px',
-            backgroundColor: sectionproperties.generalbtn_bgColor,
-            color: sectionproperties.generalbtn_textColor,
-            borderTopLeftRadius: sectionproperties.generalbtn_bordertopleftradius + 'px',
-            borderTopRightRadius: sectionproperties.generalbtn_bordertoprightradius + 'px',
-            borderBottomLeftRadius: sectionproperties.generalbtn_borderbottomleftradius + 'px',
-            borderBottomRightRadius: sectionproperties.generalbtn_borderbottomrightradius + 'px',
-            border: sectionproperties.generalbtn_borderwidth + 'px solid ' + sectionproperties.generalbtn_bordercolor,
-            fontSize: sectionproperties.generalbtn_fontsize + 'px',
-            fontWeight: sectionproperties.generalbtn_fontweight,
-            marginTop: sectionproperties.generalbtn_marginTop + 'px',
-            marginBottom: sectionproperties.generalbtn_marginBottom + 'px',
-            transition: '.3s',
-            cursor: 'pointer',
-            ':hover': {
-                backgroundColor: sectionproperties.generalbtn_bgColoronhover,
-                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,
-            },
-        }),
-        sectioncontent: css({
-            background: sectionproperties.backgroundColortransparent == 'Transparent' ? 'transparent' : sectionproperties.backgroundColor,
-            borderTopLeftRadius: langdetect == 'en' ? sectionproperties.borderTopLeftRadius + 'px' : sectionproperties.borderTopRightRadius + 'px',
-            borderTopRightRadius: langdetect == 'en' ? sectionproperties.borderTopRightRadius + 'px' : sectionproperties.borderTopLeftRadius + 'px',
-            borderBottomLeftRadius: langdetect == 'en' ? sectionproperties.borderBottomLeftRadius + 'px' : sectionproperties.borderBottomRightRadius + 'px',
-            borderBottomRightRadius: langdetect == 'en' ? sectionproperties.borderBottomRightRadius + 'px' : sectionproperties.borderBottomLeftRadius + 'px',
-            position: 'relative',
-            border: sectionproperties.sectioncardborderwidth + 'px solid ' + sectionproperties.sectioncardbordercolor,
-            width: sectionproperties.width + 'vw',
-            paddingTop: sectionproperties.paddingTop + 'px',
-            paddingBottom: sectionproperties.paddingBottom + 'px',
-            '@media (max-width: 800px)': {
-                paddingTop: sectionproperties.paddingtopresponsive + 'px',
-                paddingBottom: sectionproperties.paddingbottomresponsive + 'px',
-            },
-        }),
-        paddings: css({
-            paddingLeft: langdetect == 'en' ? sectionproperties.paddingLeft + 'px' : sectionproperties.paddingRight + 'px',
-            paddingRight: langdetect == 'en' ? sectionproperties.paddingRight + 'px' : sectionproperties.paddingLeft + 'px',
-            '@media (max-width: 800px)': {
-                paddingLeft: sectionproperties.paddinghorizontalresponsive + 'px',
-                paddingRight: sectionproperties.paddinghorizontalresponsive + 'px',
-            },
-        }),
-        sectioncont: css({
-            marginTop: sectionproperties.marginTop + 'px',
-            marginBottom: sectionproperties.marginBottom + 'px',
-            background:
-                sectionproperties.hideshowcardtransition == 'Show' ? (maincontainerarrayofobjs.length != 0 ? 'url(' + serverbaselink + maincontainerarrayofobjs[0]?.back_bgimage + ')' : '') : '',
-            '@media (max-width: 800px)': {
-                marginTop: sectionproperties.marginTopResp + 'px',
-                marginBottom: sectionproperties.marginBottom + 'px',
-            },
-        }),
-        descpancea: css({
-            fontSize: sectionproperties.prodCatFontSize + 'px',
-
-            '@media (max-width: 800px)': {
-                fontSize: sectionproperties.prodCatFontSizeResp + 'px',
-            },
-        }),
-        titlepana: css({
-            fontSize: sectionproperties.sectionTitleFontSize + 'px',
-
-            '@media (max-width: 800px)': {
-                fontSize: sectionproperties.sectionTitleFontSizeresp + 'px',
-            },
-        }),
-    };
-    const [imagesarray, setimagesarray] = useState([]);
-
-    const authdetailsContext = props.actions.authdetailsContext;
-    useEffect(() => {
-        if (sectionproperties.length != 0) {
-            if (sectionproperties.arrayofobjectimagesonly != null) {
-                var arrayofobjectimagesonlyparsed = JSON.parse(sectionproperties.arrayofobjectimagesonly);
-                if (Array.isArray(arrayofobjectimagesonlyparsed)) {
-                    setimagesarray([...arrayofobjectimagesonlyparsed]);
-                }
-            }
-        }
-    }, [sectionproperties]);
-    return (
-        <div class="row m-0 w-100 allcentered py-5 px-5 px-md-3">
-            {authdetailsContext?.instinfo?.contactinfo.instid == '68a9e83c05b75' && (
-                <div class="row m-0 w-100">
-                    <div class="col-4 col-md-12 text-md-center mb-md-3">
-                        <Imagekitimagecomp
-                            urlEndpoint={ikimagecredcontext?.ikimageendpoint}
-                            publicKey={ikimagecredcontext?.ikimagepublickey}
-                            path={
-                                langdetect == 'en'
-                                    ? '/tr:w-' + sectionproperties.imagetr_w + ',h-' + sectionproperties.imagetr_h + '/' + imagesarray[0]?.bgsection_image
-                                    : '/tr:w-' + sectionproperties.imagetr_w + ',h-' + sectionproperties.imagetr_h + '/' + imagesarray[0]?.bgsection_image_ar
-                            }
-                            style={{
-                                width: '100%',
-                                height: '100%',
-                                borderRadius: 30,
-                            }}
-                        />
-                    </div>
-                    <div class="col-8 col-md-12 table_responsive">
-                        <table className={'table tablevertical'}>
-                            <thead className="">
-                                <th className={'mw-150 mw-md-300 text-center'}>
-                                    <p class="m-0 p-0 text-black font-weight-600">{langdetect == 'en' ? 'Device' : 'الجهاز'}</p>
-                                </th>
-                                <th className="text-center font-weight-600">
-                                    <p class="m-0 p-0 text-black">{langdetect == 'en' ? 'Monthly Rent' : 'إيجار شهر'}</p>
-                                </th>
-
-                                <th className="text-center font-weight-600">
-                                    <p class="m-0 p-0 text-black">{langdetect == 'en' ? 'Half Month Rent' : 'إيجار نصف شهر'}</p>
-                                </th>
-                                <th className="text-center font-weight-600">
-                                    <p class="m-0 p-0 text-black">{langdetect == 'en' ? 'Weekly Rent' : 'إيجار إسبوع'}</p>
-                                </th>
-                            </thead>
-                            <tbody>
-                                <tr className="">
-                                    <td className="text-center">
-                                        <p class="m-0 p-0 text-black">مولد أكسجين 5 لتر</p>
-                                    </td>
-                                    <td className="text-center">
-                                        <p class="m-0 p-0 text-black">2500</p>
-                                    </td>
-                                    <td className="text-center">
-                                        <p class="m-0 p-0 text-black">1500</p>
-                                    </td>
-                                    <td className="text-center">
-                                        <p class="m-0 p-0 text-black">1000</p>
-                                    </td>
-                                </tr>
-                                <tr className="">
-                                    <td className="text-center">
-                                        <p class="m-0 p-0 text-black">مولد أكسجين 10 لتر</p>
-                                    </td>
-                                    <td className="text-center">
-                                        <p class="m-0 p-0 text-black">4000</p>
-                                    </td>
-                                    <td className="text-center">
-                                        <p class="m-0 p-0 text-black">2500</p>
-                                    </td>
-                                    <td className="text-center">
-                                        <p class="m-0 p-0 text-black">1500</p>
-                                    </td>
-                                </tr>
-                                <tr className="">
-                                    <td className="text-center">
-                                        <p class="m-0 p-0 text-black">جهاز سيباب</p>
-                                    </td>
-                                    <td className="text-center">
-                                        <p class="m-0 p-0 text-black">2500</p>
-                                    </td>
-                                    <td className="text-center">
-                                        <p class="m-0 p-0 text-black">1500</p>
-                                    </td>
-                                    <td className="text-center">
-                                        <p class="m-0 p-0 text-black">1000</p>
-                                    </td>
-                                </tr>
-                            </tbody>
-                        </table>
-                    </div>
-                </div>
-            )}
-            {authdetailsContext?.instinfo?.contactinfo.instid == '68a9e83c05b75' && (
-                <div class="col-12 col-md-12 table_responsive">
-                    <table className={'table tablevertical'}>
-                        <thead className="">
-                            <th className={'mw-150 mw-md-300 text-center'}>
-                                <p class="m-0 p-0 text-black font-weight-600">{langdetect == 'en' ? 'Advantages' : 'الميزة'}</p>
-                            </th>
-                            <th className="text-center font-weight-600">
-                                <p class="m-0 p-0 text-black">{langdetect == 'en' ? 'Basic' : 'إيجار شهر'}</p>
-                            </th>
-
-                            <th className="text-center font-weight-600">
-                                <p class="m-0 p-0 text-black">{langdetect == 'en' ? 'Premium' : 'إيجار نصف شهر'}</p>
-                            </th>
-                            <th className="text-center font-weight-600">
-                                <p class="m-0 p-0 text-black">{langdetect == 'en' ? 'VIP' : 'إيجار إسبوع'}</p>
-                            </th>
-                        </thead>
-                        <tbody>
-                            <tr className="">
-                                <td className="text-center">
-                                    <p class="m-0 p-0 text-black">عدد الأوردرات</p>
-                                </td>
-                                <td className="text-center">
-                                    <p class="m-0 p-0 text-black">1 أوردر</p>
-                                </td>
-                                <td className="text-center">
-                                    <p class="m-0 p-0 text-black">5 أوردرات (حد أدنى 5000 جنيه)</p>
-                                </td>
-                                <td className="text-center">
-                                    <p class="m-0 p-0 text-black">10 أوردرات (حد أدنى 10000 جنيه)</p>
-                                </td>
-                            </tr>
-                            <tr className="">
-                                <td className="text-center">
-                                    <p class="m-0 p-0 text-black">الشحن</p>
-                                </td>
-                                <td className="text-center">
-                                    <p class="m-0 p-0 text-black">x</p>
-                                </td>
-                                <td className="text-center">
-                                    <p class="m-0 p-0 text-black">(مجاني لأول أوردر)</p>
-                                </td>
-                                <td className="text-center">
-                                    <p class="m-0 p-0 text-black">(مجاني على كل الأوردرات)</p>
-                                </td>
-                            </tr>
-                            <tr className="">
-                                <td className="text-center">
-                                    <p class="m-0 p-0 text-black">الخصومات</p>
-                                </td>
-                                <td className="text-center">
-                                    <p class="m-0 p-0 text-black">x</p>
-                                </td>
-                                <td className="text-center">
-                                    <p class="m-0 p-0 text-black">x</p>
-                                </td>
-                                <td className="text-center">
-                                    <p class="m-0 p-0 text-black">5%</p>
-                                </td>
-                            </tr>
-                            <tr className="">
-                                <td className="text-center">
-                                    <p class="m-0 p-0 text-black">الاستبدال</p>
-                                </td>
-                                <td className="text-center">
-                                    <p class="m-0 p-0 text-black">(7 أيام مدفوع)</p>
-                                </td>
-                                <td className="text-center">
-                                    <p class="m-0 p-0 text-black">(7 أيام مجاني)</p>
-                                </td>
-                                <td className="text-center">
-                                    <p class="m-0 p-0 text-black">(14 يوم مجاني)</p>
-                                </td>
-                            </tr>
-                            <tr className="">
-                                <td className="text-center">
-                                    <p class="m-0 p-0 text-black">الضمان</p>
-                                </td>
-                                <td className="text-center">
-                                    <p class="m-0 p-0 text-black">(14 يوم)</p>
-                                </td>
-                                <td className="text-center">
-                                    <p class="m-0 p-0 text-black">(3 شهور)</p>
-                                </td>
-                                <td className="text-center">
-                                    <p class="m-0 p-0 text-black">(6 شهور)</p>
-                                </td>
-                            </tr>
-                            <tr className="">
-                                <td className="text-center">
-                                    <p class="m-0 p-0 text-black">قسيمة شراء</p>
-                                </td>
-                                <td className="text-center">
-                                    <p class="m-0 p-0 text-black">x</p>
-                                </td>
-                                <td className="text-center">
-                                    <p class="m-0 p-0 text-black">(100 جنيه)</p>
-                                </td>
-                                <td className="text-center">
-                                    <p class="m-0 p-0 text-black">(250 جنيه)</p>
-                                </td>
-                            </tr>
-                            <tr className="">
-                                <td className="text-center">
-                                    <p class="m-0 p-0 text-black">العروض الموسمية</p>
-                                </td>
-                                <td className="text-center">
-                                    <p class="m-0 p-0 text-black">(العروض العامة)</p>
-                                </td>
-                                <td className="text-center">
-                                    <p class="m-0 p-0 text-black">(خصومات إضافية)</p>
-                                </td>
-                                <td className="text-center">
-                                    <p class="m-0 p-0 text-black">(خصومات حصرية)</p>
-                                </td>
-                            </tr>
-                            <tr className="">
-                                <td className="text-center">
-                                    <p class="m-0 p-0 text-black">الدعم</p>
-                                </td>
-                                <td className="text-center">
-                                    <p class="m-0 p-0 text-black">(خلال مواعيد العمل)</p>
-                                </td>
-                                <td className="text-center">
-                                    <p class="m-0 p-0 text-black">(أولوية في الدعم)</p>
-                                </td>
-                                <td className="text-center">
-                                    <p class="m-0 p-0 text-black">(دعم مميز + متابعة خاصة)</p>
-                                </td>
-                            </tr>
-                            <tr className="">
-                                <td className="text-center">
-                                    <p class="m-0 p-0 text-black">إمكانية إضافة شخص مخوّل بالشراء</p>
-                                </td>
-                                <td className="text-center">
-                                    <p class="m-0 p-0 text-black">لا</p>
-                                </td>
-                                <td className="text-center">
-                                    <p class="m-0 p-0 text-black">لا</p>
-                                </td>
-                                <td className="text-center">
-                                    <p class="m-0 p-0 text-black">نعم</p>
-                                </td>
-                            </tr>
-                            <tr className="">
-                                <td className="text-center">
-                                    <p class="m-0 p-0 text-black">نظام النقاط / الولاء</p>
-                                </td>
-                                <td className="text-center">
-                                    <p class="m-0 p-0 text-black">x</p>
-                                </td>
-                                <td className="text-center">
-                                    <p class="m-0 p-0 text-black">(1 نقطة لكل أوردر)</p>
-                                </td>
-                                <td className="text-center">
-                                    <p class="m-0 p-0 text-black">(2 نقطة لكل أوردر)</p>
-                                </td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-            )}
-        </div>
-    );
-};
-export default TableSection;