tabexseriescomponents 0.0.706 → 0.0.708

package/srcoman/TabexComponents/StaticPages/Productinfo/DescriptionContent.jsx

@@ -0,0 +1,176 @@
+//productidprops
+import React, { useEffect, useState } from 'react';
+import { Imagekitimagecomp } from '../../../Imagekitconfig.jsx';
+
+const DescriptionContent = (props) => {
+    const lang = props.actions.lang;
+    const langdetect = props.actions.langdetect;
+    const fetchProductInfoQueryContext = props.actions.fetchProductInfoQueryContext;
+    const sectionproperties = props.actions.sectionproperties;
+    const [showMore, setShowMore] = useState(false);
+    const ikimagecredcontext = props.actions.ikimagecredcontext;
+
+    return (
+        <div
+            class={
+                props.srcfromprops == 'Articles'
+                    ? 'mt-3 px-3 mb-4'
+                    : props.srcfromprops == 'undername'
+                    ? 'col-lg-12 p-0 w-100'
+                    : props.srcfromprops == 'undername'
+                    ? 'col-lg-12 p-0 w-100'
+                    : sectionproperties.gallerystyle == 'Style 1' && props.srcfromprops != 'service' && props.srcfromprops != 'collap'
+                    ? 'col-lg-12 pl-5 pr-5 p-md-0 w-100'
+                    : sectionproperties.gallerystyle == 'Style 1' && props.srcfromprops == 'collap'
+                    ? 'col-lg-12 pl-3 pr-3 p-md-0 w-100'
+                    : 'col-lg-12 p-0 w-100'
+            }
+        >
+            <div class="row m-0 w-100">
+                {sectionproperties.gallerystyle == 'Style 2' && props.srcfromprops != 'collap' && (
+                    <div class="col-lg-12 p-0 mb-3">
+                        <p
+                            class="m-0 p-0"
+                            style={{
+                                fontSize: sectionproperties.prodCatFontSize + 'px',
+                                color: sectionproperties.prodCatColor,
+                                fontWeight: sectionproperties.prodCatFontWeight,
+                            }}
+                        >
+                            {langdetect == 'en' ? sectionproperties.descriptionContentEn : sectionproperties.descriptionContentAr}
+                        </p>
+                    </div>
+                )}
+                {langdetect == 'en' &&
+                    fetchProductInfoQueryContext?.data?.data?.productinfo?.description_en != '' &&
+                    fetchProductInfoQueryContext?.data?.data?.productinfo?.description_en != null &&
+                    sectionproperties.prodCatShow == 'Show' && (
+                        <div className={props.srcfromprops == 'collap' ? 'col-lg-12 p-0 d-flex justify-content-center' : 'col-lg-12 p-0 mb-4 d-flex justify-content-center'}>
+                            <div className="row m-0 w-100 d-flex">
+                                <div class="col-lg-12 p-0 d-flex justify-content-start">
+                                    {props.srcfromprops != 'Articles' && (
+                                        <p
+                                            className={'m-0 p-0 wordbreak'}
+                                            style={{
+                                                textAlign: langdetect == 'en' ? 'left' : 'right',
+                                                color: '#000000',
+                                            }}
+                                            dangerouslySetInnerHTML={{
+                                                __html:
+                                                    showMore == true
+                                                        ? fetchProductInfoQueryContext?.data?.data?.productinfo?.description_en
+                                                        : fetchProductInfoQueryContext?.data?.data?.productinfo?.description_en.slice(0, 1000),
+                                            }}
+                                        ></p>
+                                    )}
+                                    {props.srcfromprops == 'Articles' && (
+                                        <p
+                                            className={'m-0 p-0 wordbreak'}
+                                            style={{
+                                                textAlign: langdetect == 'en' ? 'left' : 'right',
+                                                color: '#000000',
+                                            }}
+                                            dangerouslySetInnerHTML={{
+                                                __html: fetchProductInfoQueryContext?.data?.data?.productinfo?.description_en,
+                                            }}
+                                        ></p>
+                                    )}
+                                </div>
+                                {props.srcfromprops != 'Articles' && (
+                                    <div class="col-lg-12 allcentered">
+                                        {fetchProductInfoQueryContext?.data?.data?.productinfo?.description_en.length > 1000 && (
+                                            <p class="m-0 p-0 cursor-pointer text-grey font-weight-600" onClick={() => setShowMore(!showMore)}>
+                                                {showMore ? lang.showless : lang.showmore}
+                                            </p>
+                                        )}
+                                    </div>
+                                )}
+                            </div>
+                        </div>
+                    )}
+                {langdetect == 'ar' &&
+                    fetchProductInfoQueryContext?.data?.data?.productinfo?.description_ar != '' &&
+                    fetchProductInfoQueryContext?.data?.data?.productinfo?.description_ar != null &&
+                    sectionproperties.prodCatShow == 'Show' && (
+                        <div className="col-lg-12 p-0 mb-4 d-flex justify-content-center">
+                            <div className="row m-0 w-100 d-flex">
+                                <div class="col-lg-12 p-0 d-flex justify-content-start flex-column">
+                                    {props.srcfromprops != 'Articles' && (
+                                        <p
+                                            className={'text-black m-0 p-0 wordbreak'}
+                                            style={{
+                                                textAlign: langdetect == 'en' ? 'left' : 'right',
+                                            }}
+                                            dangerouslySetInnerHTML={{
+                                                __html:
+                                                    showMore == true
+                                                        ? fetchProductInfoQueryContext?.data?.data?.productinfo?.description_ar
+                                                        : fetchProductInfoQueryContext?.data?.data?.productinfo?.description_ar.slice(0, 1000),
+                                            }}
+                                        ></p>
+                                    )}
+                                    {props.srcfromprops == 'Articles' && (
+                                        <p
+                                            className={'text-black m-0 p-0 wordbreak'}
+                                            style={{
+                                                textAlign: langdetect == 'en' ? 'left' : 'right',
+                                            }}
+                                            dangerouslySetInnerHTML={{
+                                                __html: fetchProductInfoQueryContext?.data?.data?.productinfo?.description_ar,
+                                            }}
+                                        ></p>
+                                    )}
+                                </div>
+                                {props.srcfromprops != 'Articles' && (
+                                    <div class="col-lg-12 allcentered">
+                                        {fetchProductInfoQueryContext?.data?.data?.productinfo?.description_ar.length > 1000 && (
+                                            <p class="m-0 p-0 cursor-pointer text-grey font-weight-600 text-right" onClick={() => setShowMore(!showMore)}>
+                                                {showMore ? lang.showless : lang.showmore}
+                                            </p>
+                                        )}
+                                    </div>
+                                )}
+                            </div>
+                        </div>
+                    )}
+                {props.srcfromprops != 'collap' && sectionproperties.showGallery == 'Show' && fetchProductInfoQueryContext?.data?.data?.productinfo?.productimages?.length != 0 && (
+                    <div class="col-lg-12 p-0">
+                        <div
+                            class="row m-0 w-100 allcentered pl-md-3 pr-md-3"
+                            style={{
+                                paddingLeft: sectionproperties.galleryPaddingHorizontal + 'px',
+                                paddingRight: sectionproperties.galleryPaddingHorizontal + 'px',
+                            }}
+                        >
+                            {fetchProductInfoQueryContext?.data?.data?.productinfo?.productimages?.map((item, index) => {
+                                if (index <= 6) {
+                                    return (
+                                        <div
+                                            class={' col-md-4 col-sm-12 mb-3 col-lg-' + sectionproperties.galleryNoOfCols}
+                                            style={{
+                                                height: sectionproperties.galleryHeight + 'px',
+                                            }}
+                                        >
+                                            <Imagekitimagecomp
+                                                urlEndpoint={ikimagecredcontext?.ikimageendpoint}
+                                                publicKey={ikimagecredcontext?.ikimagepublickey}
+                                                path={'/tr:w-' + sectionproperties.galleryWidthDimension + ',h-' + sectionproperties.galleryHeightDimension + '/' + item.path}
+                                                style={{
+                                                    width: '100%',
+                                                    height: '100%',
+                                                    objectFit: 'contain',
+                                                }}
+                                                loading="lazy"
+                                            />
+                                        </div>
+                                    );
+                                }
+                            })}
+                        </div>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};
+export default DescriptionContent;

package/srcoman/TabexComponents/StaticPages/Productinfo/ProductExtraFields.jsx

@@ -0,0 +1,225 @@
+//productidprops
+import React, { useEffect, useState } from 'react';
+import { Messaging } from 'react-cssfx-loading';
+import '../../../styles/staticpages/image-gallery.css';
+import ReactStars from 'react-rating-stars-component';
+import { Modal } from 'react-bootstrap';
+// import Addreviewform from './Addreviewform.jsx';
+import TextareaAutosize from 'react-textarea-autosize';
+
+import loginstyles from '../../../styles/staticpages/signup.module.css';
+import { css } from 'glamor';
+
+const ProductExtraFields = (props) => {
+    const lang = props.actions.lang;
+    const langdetect = props.actions.langdetect;
+    const fetchProductInfoQueryContext = props.actions.fetchProductInfoQueryContext;
+    const GeneralAPIMutationContext = props.actions.GeneralAPIMutationContext;
+    const NotificationManager = props.actions.NotificationManager;
+    const sectionproperties = props.actions.sectionproperties;
+    const addtocardpayloadobj = props.actions.addtocardpayloadobj;
+    const setaddtocardpayloadobj = props.actions.setaddtocardpayloadobj;
+    const actions = props.actions;
+    const productid = fetchProductInfoQueryContext?.data?.data?.productinfo?.productid;
+    // const templatepropcontext = props.actions.templatepropcontext;
+
+    const productinfo_cssstyles = props.actions.productinfo_cssstyles;
+    const [productextravaluesarray, setproductextravaluesarray] = useState([]);
+    const [canuserreview, setcanuserreview] = useState(false);
+    const [openreviewmodal, setopenreviewmodal] = useState(false);
+    const [filterproductreviews, setfilterproductreviews] = useState('all');
+    const [productreviews, setproductreviews] = useState([]);
+    useEffect(() => {
+        if (fetchProductInfoQueryContext.isSuccess) {
+        }
+    }, [filterproductreviews]);
+    const getreviewsassignermutationfunc = () => {};
+    const addreviewcallback = () => {
+        setopenreviewmodal(false);
+        getreviewsassignermutationfunc();
+        fetchProductInfoQueryContext.refetch();
+    };
+    const handleonchangeinput = (value, item) => {
+        var tempproductextravaluesarray = [...productextravaluesarray];
+        var isfieldexists = false;
+        var fieldexistsid = null;
+        tempproductextravaluesarray.forEach(function (choosenitem, choosenindex) {
+            if (item.id == choosenitem.id) {
+                isfieldexists = true;
+                fieldexistsid = choosenindex;
+                tempproductextravaluesarray.splice(choosenindex, 1);
+            }
+        });
+        if (value.length != 0) {
+            tempproductextravaluesarray.push({
+                id: item.id,
+                title_en: item.title_en,
+                title_ar: item.title_ar,
+                value: value,
+            });
+        }
+        setproductextravaluesarray([...tempproductextravaluesarray]);
+        var tempaddtocardpayloadobj = { ...addtocardpayloadobj };
+        tempaddtocardpayloadobj.extrafields = tempproductextravaluesarray;
+        setaddtocardpayloadobj({ ...tempaddtocardpayloadobj });
+    };
+    const formstyles = {
+        input_label_name: css({
+            color: sectionproperties.form_labelcolor,
+            textTransform: sectionproperties.form_labeltexttransform,
+            fontWeight: sectionproperties.form_labelfontweight,
+            fontSize: sectionproperties.form_labelfontsize + 'px',
+            marginBottom: sectionproperties.inputfieldbordertype == 'All' ? 10 : 0,
+        }),
+        form_control: css({
+            background: 'transparent',
+            color: sectionproperties.inputfieldcolor,
+            fontSize: sectionproperties.inputfieldfontsize + 'px',
+            position: 'relative',
+            display: 'flex',
+            alignItems: 'center',
+            display: 'block',
+            width: '100%',
+            // height: '35px',
+            padding: '0 10px',
+            transition: '.3s',
+            border: sectionproperties.inputfieldbordertype == 'All' ? sectionproperties.inputfieldborderWidth + 'px solid ' + sectionproperties.inputfieldborderColor : 0,
+            borderBottom: sectionproperties.inputfieldborderWidth + 'px solid ' + sectionproperties.inputfieldborderColor,
+            borderRadius: sectionproperties.inputfieldborderradius + 'px',
+            height: sectionproperties.inputfieldheight + 'px',
+            background: sectionproperties.input_bgcolor,
+            color: sectionproperties.inputfieldcolor,
+            ':focus': {
+                borderColor: sectionproperties.inputfeildbordercoloronfocus,
+            },
+            ':focus .login_input_icon': {
+                color: sectionproperties.inputfeildbordercoloronfocus,
+            },
+        }),
+    };
+    return (
+        <div className={'row w-100 ml-0 mr-0'}>
+            <div class="col-lg-12 p-0">
+                <div class="row m-0 w-100">
+                    {fetchProductInfoQueryContext?.data?.data?.productinfo?.productextrafields?.map(function (item, index) {
+                        var inputtype = '';
+                        if (item.type == 'input') {
+                            inputtype = 'text';
+                        } else if (item.type == 'datetime') {
+                            inputtype = 'datetime-local';
+                        } else {
+                            inputtype = item.type;
+                        }
+                        var isinputcomponent = 0;
+                        if (
+                            inputtype == 'color' ||
+                            inputtype == 'text' ||
+                            inputtype == 'input' ||
+                            inputtype == 'date' ||
+                            inputtype == 'time' ||
+                            inputtype == 'number' ||
+                            inputtype == 'datetime' ||
+                            inputtype == 'datetime-local' ||
+                            inputtype == 'url' ||
+                            inputtype == 'week'
+                        ) {
+                            isinputcomponent = 1;
+                        }
+                        var selectboxvaluesparsedarray = [];
+                        if (item.selectboxvalues != undefined && item.selectboxvalues != null) {
+                            var selectboxvaluesparsed = JSON.parse(item.selectboxvalues);
+                            if (selectboxvaluesparsed != undefined && selectboxvaluesparsed != null && Array.isArray(selectboxvaluesparsed)) {
+                                selectboxvaluesparsedarray = selectboxvaluesparsed;
+                            }
+                        }
+                        var inputvalue = '';
+                        productextravaluesarray.forEach(function (chooseditem, chooseditemindex) {
+                            if (chooseditem.id == item.id) {
+                                inputvalue = chooseditem.value;
+                            }
+                        });
+                        return (
+                            <div className={'col-lg-6 col-md-6 col-sm-12 mb-4 p-sm-0'}>
+                                <div class="row m-0 w-100">
+                                    <div class="col-lg-12 p-0 d-flex align-items-start flex-row">
+                                        <label
+                                            className={' d-flex align-items-start '}
+                                            style={{
+                                                color: sectionproperties.form_labelcolor,
+                                                fontWeight: sectionproperties.form_labelfontweight,
+                                                fontSize: sectionproperties.form_labelfontsize + 'px',
+                                                textTransform: sectionproperties.form_labeltexttransform,
+                                            }}
+                                        >
+                                            {langdetect == 'en' ? item.title_en : item.title_ar} <span class="text-danger ml-1 mr-1">{item.isrequired == 1 ? '*' : ''}</span>
+                                        </label>
+                                        <label
+                                            className={' d-flex align-items-start mx-2 '}
+                                            style={{
+                                                color: '#666666',
+                                                fontWeight: 400,
+                                                fontSize: '13px',
+                                                textTransform: sectionproperties.form_labeltexttransform,
+                                            }}
+                                        >
+                                            {item.subtitle_en != null && langdetect == 'en' && '(' + item.subtitle_en + ')'}
+                                            {item.subtitle_ar != null && langdetect == 'ar' && '(' + item.subtitle_ar + ')'}
+                                        </label>
+                                    </div>
+
+                                    <div class="col-lg-12 p-0">
+                                        <div className={loginstyles.wrap_input100 + ' textarea '}>
+                                            {isinputcomponent == 1 && (
+                                                <input
+                                                    className={`${loginstyles.form_control} ${formstyles.form_control}`}
+                                                    type={inputtype}
+                                                    value={inputvalue}
+                                                    onChange={(event) => {
+                                                        handleonchangeinput(event.target.value, item);
+                                                    }}
+                                                />
+                                            )}
+                                            {isinputcomponent == 0 && (
+                                                <>
+                                                    {item.type == 'selectbox' && (
+                                                        <select
+                                                            className={`${loginstyles.form_control} ${formstyles.form_control}` + ' selectareaextrafields '}
+                                                            value={inputvalue}
+                                                            onChange={(event) => {
+                                                                handleonchangeinput(event.target.value, item);
+                                                            }}
+                                                        >
+                                                            <option value={''}>{langdetect == 'en' ? 'Choose' : 'إختر'}</option>
+                                                            {selectboxvaluesparsedarray?.map((selectboxitem, selectboxindex) => {
+                                                                return <option value={selectboxitem.value_en}>{langdetect == 'en' ? selectboxitem.value_en : selectboxitem.value_ar}</option>;
+                                                            })}
+                                                        </select>
+                                                    )}
+                                                    {item.type == 'textarea' && (
+                                                        <TextareaAutosize
+                                                            type="text"
+                                                            className={`${loginstyles.form_control} ${formstyles.form_control}`}
+                                                            value={inputvalue}
+                                                            onChange={(event) => {
+                                                                handleonchangeinput(event.target.value, item);
+                                                            }}
+                                                            style={{
+                                                                resize: 'none',
+                                                            }}
+                                                        />
+                                                    )}
+                                                </>
+                                            )}
+                                            <span className={loginstyles.login_input_focus}></span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        );
+                    })}
+                </div>
+            </div>
+        </div>
+    );
+};
+export default ProductExtraFields;

package/srcoman/TabexComponents/StaticPages/Productinfo/ProductExtras.jsx

@@ -0,0 +1,92 @@
+//productidprops
+import React, { useEffect, useState } from 'react';
+import { css } from 'glamor';
+import { HiOutlinePlusCircle } from '@react-icons/all-files/hi/HiOutlinePlusCircle';
+import { HiOutlineMinusCircle } from '@react-icons/all-files/hi/HiOutlineMinusCircle';
+
+const ProductExtras = (props) => {
+    const lang = props.actions.lang;
+    const langdetect = props.actions.langdetect;
+    const fetchProductInfoQueryContext = props.actions.fetchProductInfoQueryContext;
+    const GeneralAPIMutationContext = props.actions.GeneralAPIMutationContext;
+    const NotificationManager = props.actions.NotificationManager;
+    const sectionproperties = props.actions.sectionproperties;
+    const addtocardpayloadobj = props.actions.addtocardpayloadobj;
+    const setaddtocardpayloadobj = props.actions.setaddtocardpayloadobj;
+    const actions = props.actions;
+    const productid = fetchProductInfoQueryContext?.data?.data?.productinfo?.productid;
+    // const templatepropcontext = props.actions.templatepropcontext;
+
+    const productinfo_cssstyles = props.actions.productinfo_cssstyles;
+    const [productextravaluesarray, setproductextravaluesarray] = useState([]);
+    const [canuserreview, setcanuserreview] = useState(false);
+    const [openreviewmodal, setopenreviewmodal] = useState(false);
+    const [filterproductreviews, setfilterproductreviews] = useState('all');
+    const [productreviews, setproductreviews] = useState([]);
+    useEffect(() => {
+        if (fetchProductInfoQueryContext.isSuccess) {
+        }
+    }, [filterproductreviews]);
+    const getreviewsassignermutationfunc = () => {};
+    const addreviewcallback = () => {
+        setopenreviewmodal(false);
+        getreviewsassignermutationfunc();
+        fetchProductInfoQueryContext.refetch();
+    };
+    const handleonchangeinput = (value, item) => {
+        var tempproductextravaluesarray = [...productextravaluesarray];
+        var isfieldexists = false;
+        var fieldexistsid = null;
+        tempproductextravaluesarray.forEach(function (choosenitem, choosenindex) {
+            if (item.id == choosenitem.id) {
+                isfieldexists = true;
+                fieldexistsid = choosenindex;
+                tempproductextravaluesarray.splice(choosenindex, 1);
+            }
+        });
+        if (value.length != 0) {
+            tempproductextravaluesarray.push({
+                id: item.id,
+                title_en: item.title_en,
+                title_ar: item.title_ar,
+                value: value,
+            });
+        }
+        setproductextravaluesarray([...tempproductextravaluesarray]);
+        var tempaddtocardpayloadobj = { ...addtocardpayloadobj };
+        tempaddtocardpayloadobj.extrafields = tempproductextravaluesarray;
+        setaddtocardpayloadobj({ ...tempaddtocardpayloadobj });
+    };
+    const formstyles = {
+        input_label_name: css({
+            color: sectionproperties.form_labelcolor,
+            textTransform: sectionproperties.form_labeltexttransform,
+            fontWeight: sectionproperties.form_labelfontweight,
+            fontSize: sectionproperties.form_labelfontsize + 'px',
+        }),
+        extracontainer: css({
+            ':hover': {
+                transitions: '.3s',
+                color: '#4faa47',
+            },
+        }),
+    };
+    return (
+        <div className={'row w-100 ml-0 mr-0 mt-3'}>
+            {fetchProductInfoQueryContext?.data?.data?.productinfo?.product_extras?.map(function (item, index) {
+                return (
+                    <div class="col-lg-6 p-0">
+                        <div class="row m-0 w-100">
+                            <div className={formstyles.extracontainer + ' col-lg-12 col-md-12 mb-3 p-sm-0 d-flex align-items-center justofy-content-start cursor-pointer '}>
+                                <HiOutlinePlusCircle size={20} color={sectionproperties.form_labelcolor} />
+                                {/* <HiOutlineMinusCircle size={20} color={sectionproperties.form_labelcolor}/> */}
+                                <p className={`${formstyles.input_label_name}` + ' m-0 p-0 mx-2 '}>{item?.productinfo?.name_en}</p>
+                            </div>
+                        </div>
+                    </div>
+                );
+            })}
+        </div>
+    );
+};
+export default ProductExtras;