tabexseriescomponents 0.0.706 → 0.0.708

package/srcoman/TabexComponents/StaticPages/Productinfo/Variantoptions21-9.jsx

@@ -0,0 +1,324 @@
+//productidprops
+import React, { useEffect, useState } from 'react';
+import productinfostyles from '../../../styles/staticpages/productinfo.module.css';
+import '../../../styles/staticpages/image-gallery.css';
+import { IoMdClose } from '@react-icons/all-files/io/IoMdClose';
+import loginstyles from '../../../styles/staticpages/signup.module.css';
+import { css } from 'glamor';
+import { defaultstylesnone } from '../../../StylesJS/Customstyles';
+
+const Select = React.lazy(() => import('react-select'));
+
+const Variantoptions = (props) => {
+    const lang = props.actions.lang;
+    const langdetect = props.actions.langdetect;
+    const selectproductoptionvalue = props.actions.selectproductoptionvalue;
+    const clearchoosenvaluesbutkeepcurrentvalue = props.actions.clearchoosenvaluesbutkeepcurrentvalue;
+    const fetchProductInfoQueryContext = props.actions.fetchProductInfoQueryContext;
+    const sectionproperties = props.actions.sectionproperties;
+    const ikimagecredcontext = props.actions.ikimagecredcontext;
+    const ProductInfoObj = props.actions.ProductInfoObj;
+    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 (
+        <>
+            {fetchProductInfoQueryContext?.data?.data?.productinfo?.hasvariants == 1 && sectionproperties.productInformationType == 'Product/Service Information' && (
+                <div className="row m-0 w-100 d-flex align-items-start">
+                    {sectionproperties.variantstyle == 'Slider' &&
+                        ProductInfoObj?.data?.productinfo?.productoptions?.map((item, index) => {
+                            return (
+                                <div className="col-lg-12 p-0 mb-3 d-flex justify-content-start">
+                                    <div className="row m-0 w-100 d-flex align-items-start">
+                                        <div className="col-lg-12 col-md-12 p-0 d-flex">
+                                            <p
+                                                className={' m-0 p-0 wordbreak'}
+                                                style={{
+                                                    color: sectionproperties.varianttitle_color,
+                                                    fontWeight: sectionproperties.varianttitle_fontweight,
+                                                    textTransform: sectionproperties.varianttitle_texttransform,
+                                                    fontSize: sectionproperties.varianttitle_fontSize + 'px',
+                                                }}
+                                            >
+                                                {sectionproperties.showselect == 'Show' && <span>{lang.select}</span>} {''} {langdetect == 'en' ? item.optionname : item.optionname_ar}:
+                                            </p>
+                                        </div>
+                                        <div
+                                            className="col-lg-12 col-md-12 d-flex pb-md-3 justify-content-start align-items-start scrollhorixontalcontainer pt-1"
+                                            style={{
+                                                paddingTop: sectionproperties.showRemovebutton == 'Show' ? '1rem' : 0,
+                                            }}
+                                        >
+                                            {item.optionvalues.map((optionvaluesitem, optionvaluesindex) => {
+                                                var isoptionvalueselected = 0;
+                                                if (optionvaluesitem.isselected == 1) {
+                                                    isoptionvalueselected = 1;
+                                                } else {
+                                                    isoptionvalueselected = 0;
+                                                }
+                                                var isoptionvaluedenabled = 0;
+                                                if (optionvaluesitem.isenabled == 1) {
+                                                    isoptionvaluedenabled = 1;
+                                                } else {
+                                                    isoptionvaluedenabled = 0;
+                                                }
+                                                if (item.optionname == 'color' || item.optionname == 'Color') {
+                                                    return (
+                                                        <div
+                                                            className={
+                                                                productinfostyles.color_container +
+                                                                ' mr-2 variabttcontainer ' +
+                                                                `${isoptionvalueselected == 1 ? productinfostyles.color_container_active : ''}`
+                                                            }
+                                                            onClick={() => {
+                                                                if (optionvaluesitem.isenabled == 1) {
+                                                                    selectproductoptionvalue(index, optionvaluesitem, optionvaluesindex);
+                                                                } else {
+                                                                    clearchoosenvaluesbutkeepcurrentvalue(index, optionvaluesitem, optionvaluesindex);
+                                                                }
+                                                            }}
+                                                            style={{
+                                                                background: optionvaluesitem.valuename,
+                                                                opacity: isoptionvaluedenabled == 1 ? 1 : 0.2,
+                                                                cursor: isoptionvaluedenabled == 1 ? 'pointer' : 'not-allowed',
+                                                            }}
+                                                        ></div>
+                                                    );
+                                                } else if (item.optionname == 'size' || item.optionname == 'Size') {
+                                                    return (
+                                                        <div
+                                                            className={
+                                                                `${productinfostyles.variant_container} ${productinfostyles.size_variant_container}` +
+                                                                ' mr-2 variabttcontainer allcentered ' +
+                                                                `${isoptionvalueselected == 1 ? productinfostyles.variant_container_active : ''}`
+                                                            }
+                                                            onClick={() => {
+                                                                if (optionvaluesitem.isenabled == 1) {
+                                                                    selectproductoptionvalue(index, optionvaluesitem, optionvaluesindex);
+                                                                } else {
+                                                                    clearchoosenvaluesbutkeepcurrentvalue(index, optionvaluesitem, optionvaluesindex);
+                                                                }
+                                                            }}
+                                                            style={{
+                                                                cursor: isoptionvaluedenabled == 1 ? 'pointer' : 'not-allowed',
+                                                                backgroundColor:
+                                                                    isoptionvalueselected == 1 ? 'green' : isoptionvaluedenabled == 1 ? sectionproperties.variantcontainer_bgcolor : 'grey',
+                                                                minWidth: sectionproperties.variantcontainer_minwidth + 'px',
+                                                                height: sectionproperties.variantcontainer_height + 'px',
+                                                                borderRadius: sectionproperties.variantcontainer_borderBottomLeftRadius + 'px',
+                                                                position: 'relative',
+                                                                border:
+                                                                    isoptionvalueselected == 1
+                                                                        ? '1px solid green'
+                                                                        : isoptionvaluedenabled == 1
+                                                                        ? '1px solid ' + sectionproperties.variantcontainerbordercolor
+                                                                        : '1px solid ' + ' grey ',
+                                                            }}
+                                                        >
+                                                            {isoptionvalueselected == 1 && sectionproperties.showRemovebutton == 'Show' && (
+                                                                <p
+                                                                    class="m-0 p-0 bg-danger bgdanger-hover"
+                                                                    style={{
+                                                                        position: 'absolute',
+                                                                        top: '-15px',
+                                                                        right: '-5px',
+                                                                        width: '3vh',
+                                                                        height: '3vh',
+                                                                        borderRadius: 100,
+                                                                    }}
+                                                                >
+                                                                    <i class="h-100 allcentered">
+                                                                        <IoMdClose />
+                                                                    </i>
+                                                                </p>
+                                                            )}
+                                                            <p
+                                                                className={'wordbreak m-0 p-0 d-flex align-items-center justify-content-center'}
+                                                                style={{
+                                                                    color: sectionproperties.variantcontainer_color,
+                                                                    fontSize: sectionproperties.variantcontainer_fontSize + 'px',
+                                                                    fontWeight: 500,
+                                                                }}
+                                                            >
+                                                                {langdetect == 'en' ? optionvaluesitem.valuename : optionvaluesitem.valuename_ar}
+                                                            </p>
+                                                        </div>
+                                                    );
+                                                } else {
+                                                    return (
+                                                        <div
+                                                            className={
+                                                                productinfostyles.variant_container +
+                                                                ' mr-2 variabttcontainer allcentered pl-2 pr-2 ' +
+                                                                `${isoptionvalueselected == 1 ? productinfostyles.variant_container_active : ''}`
+                                                            }
+                                                            onClick={() => {
+                                                                if (optionvaluesitem.isenabled == 1) {
+                                                                    selectproductoptionvalue(index, optionvaluesitem, optionvaluesindex);
+                                                                } else {
+                                                                    clearchoosenvaluesbutkeepcurrentvalue(index, optionvaluesitem, optionvaluesindex);
+                                                                }
+                                                            }}
+                                                            style={{
+                                                                backgroundColor:
+                                                                    isoptionvalueselected == 1 ? 'green' : isoptionvaluedenabled == 1 ? sectionproperties.variantcontainer_bgcolor : 'grey',
+                                                                width: 'auto',
+                                                                height: sectionproperties.variantcontainer_height + 'px',
+                                                                borderRadius: sectionproperties.variantcontainer_borderBottomLeftRadius + 'px',
+                                                                position: 'relative',
+                                                            }}
+                                                        >
+                                                            {isoptionvalueselected == 1 && sectionproperties.showRemovebutton == 'Show' && (
+                                                                <p
+                                                                    class="m-0 p-0 bg-danger bgdanger-hover"
+                                                                    style={{
+                                                                        position: 'absolute',
+                                                                        top: '-15px',
+                                                                        right: '-5px',
+                                                                        width: '3vh',
+                                                                        height: '3vh',
+                                                                        borderRadius: 100,
+                                                                    }}
+                                                                >
+                                                                    <i class="h-100 allcentered">
+                                                                        <IoMdClose />
+                                                                    </i>
+                                                                </p>
+                                                            )}
+                                                            <p
+                                                                className={'m-0 p-0 allcentered'}
+                                                                style={{
+                                                                    color: sectionproperties.variantcontainer_color,
+                                                                    fontSize: sectionproperties.variantcontainer_fontSize + 'px',
+                                                                }}
+                                                            >
+                                                                {langdetect == 'en' ? optionvaluesitem.valuename : optionvaluesitem.valuename_ar}
+                                                            </p>
+                                                        </div>
+                                                    );
+                                                }
+                                            })}
+                                        </div>
+                                    </div>
+                                </div>
+                            );
+                        })}
+                    {sectionproperties.variantstyle == 'Select Box' &&
+                        ProductInfoObj?.data?.productinfo?.productoptions?.map((item, index) => {
+                            var orgselectoptions = [];
+                            var selecteditemid = null;
+                            var placeholdervalue = '';
+                            placeholdervalue = 'Choose' + ' ' + (langdetect == 'en' ? item.optionname : item.optionname_ar);
+                            if (item.optionvalues != undefined && Array.isArray(item.optionvalues)) {
+                                orgselectoptions = item.optionvalues;
+                                // optionvaluesitem.isselected
+                            }
+                            orgselectoptions.forEach(function (getselcitem, getselindex) {
+                                if (getselcitem.isselected == 1) {
+                                    selecteditemid = getselcitem.valueid;
+                                }
+                            });
+                            return (
+                                <div
+                                    class={
+                                        sectionproperties.numberofcolsperrow == '2'
+                                            ? 'col-lg-2 col-md-3 col-sm-12 mb-3 p-sm-0'
+                                            : sectionproperties.numberofcolsperrow == '3'
+                                            ? ' col-lg-3 col-md-3 col-sm-12 mb-3 p-sm-0'
+                                            : sectionproperties.numberofcolsperrow == '4'
+                                            ? 'col-lg-4 col-md-4 col-sm-12 mb-3 p-sm-0'
+                                            : sectionproperties.numberofcolsperrow == '6'
+                                            ? 'col-lg-6 col-md-6 col-sm-12 mb-3 p-sm-0'
+                                            : 'col-lg-12 col-md-12 col-sm-12 mb-3 p-sm-0'
+                                    }
+                                >
+                                    <label
+                                        className={' d-flex align-items-start mb-2 '}
+                                        style={{
+                                            color: sectionproperties.varianttitle_color,
+                                            fontWeight: sectionproperties.varianttitle_fontweight,
+                                            textTransform: sectionproperties.varianttitle_texttransform,
+                                            fontSize: sectionproperties.varianttitle_fontSize + 'px',
+                                        }}
+                                    >
+                                        {langdetect == 'en' ? item.optionname : item.optionname_ar}
+                                    </label>
+                                    <div
+                                        style={{
+                                            width: '100%',
+                                        }}
+                                        className={`${loginstyles.form_control} ${formstyles.form_control}` + ' variantselectbox '}
+                                    >
+                                        <Select
+                                            options={orgselectoptions}
+                                            getOptionLabel={(option) => {
+                                                var crname = '';
+                                                if (langdetect == 'en') {
+                                                    crname = option.valuename;
+                                                } else if (langdetect == 'ar') {
+                                                    crname = option.valuename_ar;
+                                                }
+                                                return crname;
+                                            }}
+                                            getOptionValue={(option) => option.valueid}
+                                            value={orgselectoptions.filter((option) => option.valueid == selecteditemid)}
+                                            onChange={(optionvaluesitem) => {
+                                                var optionvaluesindex = null;
+                                                orgselectoptions?.forEach(function (tempitm, tempind) {
+                                                    if (tempitm.valueid == optionvaluesitem.valueid) {
+                                                        optionvaluesindex = tempind;
+                                                    }
+                                                });
+                                                if (optionvaluesindex != null) {
+                                                    if (optionvaluesitem.isenabled == 1) {
+                                                        selectproductoptionvalue(index, optionvaluesitem, optionvaluesindex);
+                                                    } else {
+                                                        clearchoosenvaluesbutkeepcurrentvalue(index, optionvaluesitem, optionvaluesindex);
+                                                    }
+                                                }
+                                            }}
+                                            styles={defaultstylesnone}
+                                            placeholder={placeholdervalue}
+                                            isSearchable={true}
+                                        />
+                                    </div>
+                                </div>
+                            );
+                        })}
+                </div>
+            )}
+        </>
+    );
+};
+export default Variantoptions;

package/srcoman/TabexComponents/StaticPages/Productinfo/staticroutersidenav.module.css

@@ -0,0 +1,145 @@
+/* Side Nav */
+.vertical_nav_menu {
+    margin: 0;
+    padding: 0;
+    position: relative;
+    list-style: none;
+    transition: 0.3s ease-in-out;
+    border-radius: 20px;
+}
+.vertical_nav_menu li.sidebar_item {
+    transition: 0.3s !important;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    flex-direction: row;
+    padding: 5px !important;
+    position: relative;
+}
+.vertical_nav_menu .sidebar_item::after {
+    content: '';
+    position: absolute;
+    bottom: -3px;
+    display: block;
+    border-radius: 100px 0 100px 0;
+    width: 0;
+    height: 0;
+    transition: 0.2s !important;
+}
+.vertical_nav_menu .sidenav_page_name {
+    transition: 0.3s;
+}
+.vertical_nav_menu li .sidenav_icon_cont {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    transition: all 0.3s;
+    position: relative;
+}
+.vertical_nav_menu i.metismenu_icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #022648;
+    transition: 0.3s;
+    opacity: 1;
+    font-size: 16px;
+}
+/* active */
+.vertical_nav_menu .sidenav_active::after {
+    content: '';
+    position: absolute;
+    bottom: -3px;
+    /* right: -5%; */
+    display: block;
+    border-radius: 100px 0 100px 0;
+    width: 10px;
+    height: 100%;
+    /* background: red !important; */
+}
+.vertical_nav_menu .sidenav_active .sidenav_page_name {
+    font-weight: 600;
+}
+.vertical_nav_menu .sidenav_active .sidenav_icon_cont {
+    /* background-color: rgba(249, 128, 100) !important; */
+    box-shadow: none !important;
+}
+/* hover */
+.vertical_nav_menu .sidebar_item:hover {
+    cursor: pointer;
+    transition: 0.3s;
+}
+.vertical_nav_menu .sidebar_item:hover::after {
+    width: 10px;
+    height: 100%;
+}
+
+.horizontal_nav_menu {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+}
+.horizontal_nav_menu .sidebar_item {
+    transition: 0.3s !important;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    position: relative;
+    width: 180px !important;
+}
+@media screen and (max-width: 800px) {
+    .horizontal_nav_menu {
+        width: 100%;
+        display: block !important;
+        white-space: nowrap;
+        position: relative;
+        overflow-x: scroll;
+        overflow-y: hidden;
+        -webkit-overflow-scrolling: touch;
+    }
+    .sidebar_item {
+        width: 30% !important;
+        float: none;
+        display: inline-block;
+        zoom: 1;
+    }
+}
+@media screen and (max-width: 700px) {
+    .horizontal_nav_menu {
+        width: 100%;
+        display: block !important;
+        white-space: nowrap;
+        position: relative;
+        overflow-x: scroll;
+        overflow-y: hidden;
+        -webkit-overflow-scrolling: touch;
+    }
+    .sidebar_item {
+        min-width: 40% !important;
+    }
+}
+@media screen and (max-width: 500px) {
+    .horizontal_nav_menu {
+        width: 100%;
+        display: block !important;
+        white-space: nowrap;
+        position: relative;
+        overflow-x: scroll;
+        overflow-y: hidden;
+        -webkit-overflow-scrolling: touch;
+    }
+    .sidebar_item {
+        max-width: 40% !important;
+    }
+}
+
+.sidebar_itemlastchild {
+    margin-right: 0 !important;
+    margin-left: 0 !important;
+}
+.ss{
+    
+}

package/srcoman/TabexComponents/StaticPages/Productinfo4-4/Addreviewform.jsx

@@ -0,0 +1,183 @@
+// //productidprops
+// import React, { useEffect, useState, useContext } from 'react';
+// import { Imagekitimagecomp } from '../../../Imagekitconfig.jsx';
+// import ReactStars from 'react-rating-stars-component';
+// import TextareaAutosize from 'react-textarea-autosize';
+// const Addreviewform = (props) => {
+//     const StatePagePropertiesContext = props.actions.StatePagePropertiesContext;
+//     const actions = props.actions;
+//     const lang = props.actions.lang;
+//     const langdetect = props.actions.langdetect;
+//     const productid = props.actions.productid;
+//     const GeneralAPIMutationContext = props.actions.GeneralAPIMutationContext;
+//     const NotificationManager = props.actions.NotificationManager;
+//     const sectionproperties = props.actions.sectionproperties;
+//     const canuserreview = props.actions.canuserreview;
+//     const addreviewcallback = props.actions.addreviewcallback;
+//     const productinfo_cssstyles = props.actions.productinfo_cssstyles;
+//     const ikimagecredcontext = props.actions.ikimagecredcontext;
+//     const [reviewpayloadobj, setreviewpayloadobj] = useState({
+//         reviewtitle: '',
+//         reviewbody: '',
+//         reviewrate: 0,
+//         reviewname: '',
+//         hasreview: 0,
+//     });
+//     // const [item, setitem] = useState(props.actions.fetchProductInfoQueryContext);
+//     const fetchProductInfoQueryContext = props.actions.fetchProductInfoQueryContext;
+
+//     return (
+//         <div
+//             className={'row w-100 ml-0 mr-0 py-5'}
+//             style={{
+//                 marginTop: sectionproperties.marginTop + 'px',
+//             }}
+//         >
+//             <div class="col-lg-12 mb-3">
+//                 <div class="row m-0 w-100 d-flex justify-content-start align-items-center">
+//                     <div
+//                         class="d-flex justify-content-start align-items-center"
+//                         style={{
+//                             width: '9vh',
+//                             height: '9vh',
+//                         }}
+//                     >
+//                         <Imagekitimagecomp
+//                             urlEndpoint={ikimagecredcontext?.ikimageendpoint}
+//                             publicKey={ikimagecredcontext?.ikimagepublickey}
+//                             path={fetchProductInfoQueryContext.data.data.productinfo.productmainimage}
+//                             style={{
+//                                 width: '100%',
+//                                 height: '100%',
+//                                 objectFit: 'contain',
+//                             }}
+//                             loading="lazy"
+//                         />
+//                     </div>
+//                     <div class="col-lg-9 co-md-9 col-sm-9 d-flex justify-content-start align-items-center">
+//                         <div class="row m-0 w-100">
+//                             <div class="col-lg-12 p-0 d-flex justify-content-start align-items-center">
+//                                 <p class={productinfo_cssstyles.productname + ' m-0 p-0 '}>
+//                                     {langdetect == 'en' ? fetchProductInfoQueryContext.data.data.productinfo.name_en : fetchProductInfoQueryContext.data.data.productinfo.name_ar}
+//                                 </p>
+//                             </div>
+//                             <div class="col-lg-12 p-0 d-flex justify-content-start align-items-center">
+//                                 <ReactStars
+//                                     count={5}
+//                                     value={reviewpayloadobj.reviewrate}
+//                                     size={18}
+//                                     emptyIcon={<i className="far fa-star" style={{ color: '#bfbfbf' }}></i>}
+//                                     halfIcon={<i className="fa fa-star-half-alt style={{ color: '#FAB400' }}"></i>}
+//                                     filledIcon={<i className="fa fa-star" style={{ color: '#FAB400' }}></i>}
+//                                     activeColor="#ffd700"
+//                                     onChange={(event) => {
+//                                         var tempreviewpayloadobj = { ...reviewpayloadobj };
+//                                         tempreviewpayloadobj.reviewrate = event;
+//                                         setreviewpayloadobj({ ...tempreviewpayloadobj });
+//                                     }}
+//                                 />
+//                             </div>
+//                         </div>
+//                     </div>
+//                 </div>
+//             </div>
+//             <div class="col-lg-12">
+//                 <div class="row m-0 w-100">
+//                     <div class="col-lg-12 mb-4">
+//                         <label className={`${productinfo_cssstyles.inputfield_label}` + ' text-transform-none d-flex justify-content-start '}>{langdetect == 'en' ? 'Your Name' : 'اسمك'}</label>
+//                         <input
+//                             class={productinfo_cssstyles.form_control}
+//                             value={reviewpayloadobj.reviewname}
+//                             onChange={(event) => {
+//                                 var tempreviewpayloadobj = { ...reviewpayloadobj };
+//                                 tempreviewpayloadobj.reviewname = event.target.value;
+//                                 setreviewpayloadobj({ ...tempreviewpayloadobj });
+//                             }}
+//                         />
+//                     </div>
+//                     <div class="col-lg-12 mb-4">
+//                         <label className={`${productinfo_cssstyles.inputfield_label}` + ' text-transform-none d-flex justify-content-start '}>
+//                             {langdetect == 'en' ? 'Review title' : 'عنوان التقييم'}
+//                         </label>
+//                         <input
+//                             class={productinfo_cssstyles.form_control}
+//                             value={reviewpayloadobj.reviewtitle}
+//                             onChange={(event) => {
+//                                 var tempreviewpayloadobj = { ...reviewpayloadobj };
+//                                 tempreviewpayloadobj.reviewtitle = event.target.value;
+//                                 setreviewpayloadobj({ ...tempreviewpayloadobj });
+//                             }}
+//                         />
+//                     </div>
+//                     <div class="col-lg-12 mb-4">
+//                         <label className={`${productinfo_cssstyles.inputfield_label}` + ' text-transform-none d-flex justify-content-start '}>{langdetect == 'en' ? 'Your Review' : 'تقييمك'}</label>
+//                         <TextareaAutosize
+//                             type={'text'}
+//                             class={productinfo_cssstyles.form_control + ' form_control '}
+//                             value={reviewpayloadobj.reviewbody}
+//                             onChange={(event) => {
+//                                 var tempreviewpayloadobj = { ...reviewpayloadobj };
+//                                 tempreviewpayloadobj.reviewbody = event.target.value;
+//                                 setreviewpayloadobj({ ...tempreviewpayloadobj });
+//                             }}
+//                             style={{
+//                                 resize: 'none',
+//                                 minRows: 5,
+//                             }}
+//                         />
+//                     </div>
+
+//                     {/* <div class="col-lg-12 mb-4">
+//                 <label className={`${productinfo_cssstyles.inputfield_label}` + ' text-transform-none d-flex justify-content-start '}>Your Rating</label>
+//                 <input
+//                     class={productinfo_cssstyles.form_control}
+//                     value={reviewpayloadobj.reviewrate}
+//                     type="number"
+//                     onChange={(event) => {
+//                         var tempreviewpayloadobj = { ...reviewpayloadobj };
+//                         tempreviewpayloadobj.reviewrate = event.target.value;
+//                         setreviewpayloadobj({ ...tempreviewpayloadobj });
+//                     }}
+//                 />
+//             </div> */}
+//                 </div>
+//             </div>
+//             {canuserreview && (
+//                 <div class="col-lg-12 allcentered">
+//                     <button
+//                         class={`${productinfo_cssstyles.submitreviewbtn}`}
+//                         onClick={() => {
+//                             if (
+//                                 reviewpayloadobj.reviewtitle.length != 0 &&
+//                                 reviewpayloadobj.reviewbody.length != 0 &&
+//                                 reviewpayloadobj.reviewrate.length != 0 &&
+//                                 parseInt(reviewpayloadobj.reviewrate) > 0 &&
+//                                 reviewpayloadobj.reviewname.length != 0
+//                             ) {
+//                                 var tempreviewpayloadobj = reviewpayloadobj;
+//                                 GeneralAPIMutationContext.mutate({
+//                                     endpointurl: '/addproductreview',
+//                                     productid: productid,
+//                                     reviewpayloadobj: reviewpayloadobj,
+//                                     mutateSuccesscallback: (data, variables) => {
+//                                         if (data.data.status) {
+//                                             NotificationManager.success('', 'Success');
+//                                             addreviewcallback();
+//                                         } else {
+//                                             NotificationManager.warning('', data.data.reason);
+//                                         }
+//                                     },
+//                                 });
+//                             } else {
+//                                 alert('Please fill the missing fields');
+//                             }
+//                         }}
+//                     >
+//                         {langdetect == 'en' ? 'Submit your review' : 'تقديم تقييمك'}
+//                     </button>
+//                 </div>
+//             )}
+//         </div>
+//     );
+// };
+// export default Addreviewform;