tabexseriescomponents 0.2.849 → 0.2.851

package/dist/index.cjs.js

@@ -2423,9 +2423,533 @@ var DescriptionContent = function DescriptionContent(props) {
 
 function ownKeys$2B(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$2B(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2B(Object(t), !0).forEach(function (r) { _defineProperty__default["default"](e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2B(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var AddReview = function AddReview(props) {
+  var _css;
+  var StatePagePropertiesContext = props.actions.StatePagePropertiesContext;
+  props.actions;
+  props.actions.lang;
+  var langdetect = props.actions.langdetect;
+  var productid = props.actions.productid;
+  var GeneralAPIMutationContext = props.actions.GeneralAPIMutationContext;
+  var NotificationManager = props.actions.NotificationManager;
+  var canuserreview = props.actions.canuserreview;
+  var addreviewcallback = props.actions.addreviewcallback;
+  var ikimagecredcontext = props.actions.ikimagecredcontext;
+  var fetchProductInfoQueryContext = props.actions.fetchProductInfoQueryContext;
+  var pageindexcontext = props.actions.pageindexcontext;
+  props.actions.setpageindexcontext;
+  props.actions.setCurrentPageIdContext;
+  var templatepropcontext = props.actions.templatepropcontext;
+  var _useState = React.useState(''),
+    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    sectionproperties = _useState2[0],
+    setsectionproperties = _useState2[1];
+  var _useState3 = React.useState(''),
+    _useState4 = _slicedToArray__default["default"](_useState3, 2);
+    _useState4[0];
+    _useState4[1];
+  var _useState5 = React.useState({
+      reviewtitle: '',
+      reviewbody: '',
+      reviewrate: 0,
+      reviewname: '',
+      hasreview: 0
+    }),
+    _useState6 = _slicedToArray__default["default"](_useState5, 2),
+    reviewpayloadobj = _useState6[0],
+    setreviewpayloadobj = _useState6[1];
+  // useEffect(() => {
+  //     var cartindex = templatepropcontext.pagesnprop.findIndex((x) => x.staticpageid == '63fcbef36eebe');
+  //     if (cartindex >= 0) {
+  //         setpageindexcontext(cartindex);
+  //         setCurrentPageId(templatepropcontext.pagesnprop[cartindex].pageid);
+  //         if (props.srcfromprops != 'templatedraftrouter') {
+  //             setCurrentPageIdContext(templatepropcontext.pagesnprop[cartindex].pageid);
+  //         }
+  //     }
+  // }, []);
+  React.useEffect(function () {
+    if (Object.keys(StatePagePropertiesContext).length != 0) {
+      var secpropobj = {};
+      StatePagePropertiesContext.pageobj != undefined && StatePagePropertiesContext.pageobj.pageproperties != undefined && StatePagePropertiesContext.pageobj.pageproperties.forEach(function (arrayItem, arrayindex) {
+        secpropobj[arrayItem.property_css_name] = arrayItem.property_value;
+      });
+      setsectionproperties(_objectSpread$2B({}, secpropobj));
+    }
+  }, [StatePagePropertiesContext]);
+  React.useEffect(function () {
+    var _templatepropcontext$;
+    var secpropobj = {};
+    templatepropcontext === null || templatepropcontext === void 0 || (_templatepropcontext$ = templatepropcontext.pagesnprop[pageindexcontext]) === null || _templatepropcontext$ === void 0 || (_templatepropcontext$ = _templatepropcontext$.pageproperties) === null || _templatepropcontext$ === void 0 || _templatepropcontext$.forEach(function (arrayItem, arrayindex) {
+      secpropobj[arrayItem.property_css_name] = arrayItem.property_value;
+    });
+    setsectionproperties(_objectSpread$2B({}, secpropobj));
+  }, [pageindexcontext]);
+  var reviewstyles = {
+    submitreviewbtn: glamor.css({
+      width: sectionproperties.reviewbtn_width + 'px',
+      height: sectionproperties.reviewbtn_height + 'px',
+      borderRadius: sectionproperties.reviewbtn_borderradius + 'px',
+      fontSize: sectionproperties.reviewbtn_fontsize + 'px',
+      color: sectionproperties.reviewbtn_color,
+      fontWeight: sectionproperties.reviewbtn_fontweight,
+      backgroundColor: sectionproperties.reviewbtn_bgcolor,
+      border: sectionproperties.reviewbtn_borderwidth + 'px solid ' + sectionproperties.reviewbtn_bordercolor,
+      ':hover': {
+        transition: '.3s',
+        backgroundColor: sectionproperties.reviewbtn_bgcoloronhover,
+        color: sectionproperties.reviewbtn_coloronhover
+      }
+    }),
+    form_control: glamor.css((_css = {
+      position: 'relative',
+      display: 'flex',
+      alignItems: 'center'
+    }, _defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"](_css, "display", 'block'), "width", '100%'), "padding", '0 10px'), "transition", '.3s'), "fontWeight", 500), "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), _defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"](_css, "color", sectionproperties.inputfieldcolor), ':focus', {
+      borderColor: sectionproperties.inputfeildbordercoloronfocus
+    }), ':focus .login_input_icon', {
+      color: sectionproperties.inputfeildbordercoloronfocus
+    }))),
+    inputfield_label: glamor.css({
+      color: sectionproperties.form_labelcolor,
+      fontWeight: sectionproperties.form_labelfontweight,
+      fontSize: sectionproperties.form_labelfontsize + 'px',
+      textTransform: sectionproperties.form_labeltexttransform,
+      marginBottom: sectionproperties.inputfieldbordertype == 'All' ? 10 : 0
+    }),
+    reviewbutton: glamor.css({
+      width: sectionproperties.reviewbtn_width + 'px',
+      height: sectionproperties.reviewbtn_height + 'px',
+      background: sectionproperties.reviewbtn_bgcolor,
+      color: sectionproperties.reviewbtn_color,
+      fontSize: sectionproperties.reviewbtn_fontsize + 'px',
+      borderRadius: sectionproperties.reviewbtn_borderradius + 'px',
+      border: sectionproperties.reviewbtn_borderwidth + 'px solid ' + sectionproperties.reviewbtn_bordercolor,
+      fontWeight: sectionproperties.reviewbtn_fontweight,
+      ':hover': {
+        transition: '.3s',
+        color: sectionproperties.reviewbtn_coloronhover,
+        borderColor: sectionproperties.reviewbtn_coloronhover,
+        backgroundColor: sectionproperties.reviewbtn_bgcoloronhover
+      }
+    }),
+    productname: glamor.css({
+      fontSize: sectionproperties.prodNameFontSize + 'px',
+      textTransform: sectionproperties.prodNameTextTranform,
+      fontWeight: sectionproperties.prodNameFontWeight,
+      color: sectionproperties.prodNameColor
+    })
+  };
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: 'row w-100 ml-0 mr-0 pb-5 pt-3',
+    style: {
+      // marginTop: sectionproperties.marginTop + 'px',
+    }
+  }, sectionproperties.sectionTitleFontSize != 0 && /*#__PURE__*/React__default["default"].createElement("div", {
+    "class": "row m-0 w-100 mt-3"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    "class": "col-lg-12 p-0 allcentered"
+  }, /*#__PURE__*/React__default["default"].createElement("p", {
+    "class": "m-0 p-0",
+    style: {
+      fontSize: sectionproperties.sectionTitleFontSize + 'px',
+      color: sectionproperties.sectionTitleColor,
+      fontWeight: sectionproperties.sectionTitleFontWeight
+    }
+  }, langdetect == 'en' ? sectionproperties.sectionTitleContent : sectionproperties.sectionTitleContent_ar)), /*#__PURE__*/React__default["default"].createElement("div", {
+    "class": "col-lg-12"
+  }, /*#__PURE__*/React__default["default"].createElement("hr", null))), /*#__PURE__*/React__default["default"].createElement("div", {
+    "class": "col-lg-12 mb-3"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    "class": "row m-0 w-100 d-flex justify-content-start align-items-center"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    "class": "d-flex justify-content-start align-items-center",
+    style: {
+      width: '9vh',
+      height: '9vh'
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(Imagekitimagecomp, {
+    urlEndpoint: ikimagecredcontext === null || ikimagecredcontext === void 0 ? void 0 : ikimagecredcontext.ikimageendpoint,
+    publicKey: ikimagecredcontext === null || ikimagecredcontext === void 0 ? void 0 : ikimagecredcontext.ikimagepublickey,
+    path: fetchProductInfoQueryContext.data.data.productinfo.productmainimage,
+    style: {
+      width: '100%',
+      height: '100%',
+      objectFit: 'contain'
+    },
+    loading: "lazy"
+  })), /*#__PURE__*/React__default["default"].createElement("div", {
+    "class": "col-lg-9 co-md-9 col-sm-9 d-flex justify-content-start align-items-center"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    "class": "row m-0 w-100"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    "class": "col-lg-12 p-0 d-flex justify-content-start align-items-center"
+  }, /*#__PURE__*/React__default["default"].createElement("p", {
+    "class": reviewstyles.productname + ' m-0 p-0 '
+  }, langdetect == 'en' ? fetchProductInfoQueryContext.data.data.productinfo.name_en : fetchProductInfoQueryContext.data.data.productinfo.name_ar)), /*#__PURE__*/React__default["default"].createElement("div", {
+    "class": "col-lg-12 p-0 d-flex justify-content-start align-items-center"
+  }, /*#__PURE__*/React__default["default"].createElement(ReactStars__default["default"], {
+    count: 5,
+    value: reviewpayloadobj.reviewrate,
+    size: 18,
+    emptyIcon: /*#__PURE__*/React__default["default"].createElement("i", {
+      className: "far fa-star",
+      style: {
+        color: '#bfbfbf'
+      }
+    }),
+    halfIcon: /*#__PURE__*/React__default["default"].createElement("i", {
+      className: "fa fa-star-half-alt style={{ color: '#FAB400' }}"
+    }),
+    filledIcon: /*#__PURE__*/React__default["default"].createElement("i", {
+      className: "fa fa-star",
+      style: {
+        color: '#FAB400'
+      }
+    }),
+    activeColor: "#ffd700",
+    onChange: function onChange(event) {
+      var tempreviewpayloadobj = _objectSpread$2B({}, reviewpayloadobj);
+      tempreviewpayloadobj.reviewrate = event;
+      setreviewpayloadobj(_objectSpread$2B({}, tempreviewpayloadobj));
+    }
+  })))))), /*#__PURE__*/React__default["default"].createElement("div", {
+    "class": "col-lg-12"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    "class": "row m-0 w-100"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    "class": "col-lg-12 mb-4"
+  }, /*#__PURE__*/React__default["default"].createElement("label", {
+    className: "".concat(reviewstyles.inputfield_label) + ' text-transform-none d-flex justify-content-start '
+  }, langdetect == 'en' ? 'Your Name' : 'اسمك'), /*#__PURE__*/React__default["default"].createElement("input", {
+    "class": reviewstyles.form_control,
+    value: reviewpayloadobj.reviewname,
+    onChange: function onChange(event) {
+      var tempreviewpayloadobj = _objectSpread$2B({}, reviewpayloadobj);
+      tempreviewpayloadobj.reviewname = event.target.value;
+      setreviewpayloadobj(_objectSpread$2B({}, tempreviewpayloadobj));
+    }
+  })), /*#__PURE__*/React__default["default"].createElement("div", {
+    "class": "col-lg-12 mb-4"
+  }, /*#__PURE__*/React__default["default"].createElement("label", {
+    className: "".concat(reviewstyles.inputfield_label) + ' text-transform-none d-flex justify-content-start '
+  }, langdetect == 'en' ? 'Review title' : 'عنوان التقييم'), /*#__PURE__*/React__default["default"].createElement("input", {
+    "class": reviewstyles.form_control,
+    value: reviewpayloadobj.reviewtitle,
+    onChange: function onChange(event) {
+      var tempreviewpayloadobj = _objectSpread$2B({}, reviewpayloadobj);
+      tempreviewpayloadobj.reviewtitle = event.target.value;
+      setreviewpayloadobj(_objectSpread$2B({}, tempreviewpayloadobj));
+    }
+  })), /*#__PURE__*/React__default["default"].createElement("div", {
+    "class": "col-lg-12 mb-4"
+  }, /*#__PURE__*/React__default["default"].createElement("label", {
+    className: "".concat(reviewstyles.inputfield_label) + ' text-transform-none d-flex justify-content-start '
+  }, langdetect == 'en' ? 'Your Review' : 'تقييمك'), /*#__PURE__*/React__default["default"].createElement(TextareaAutosize__default["default"], {
+    type: 'text',
+    "class": reviewstyles.form_control + ' form_control ',
+    value: reviewpayloadobj.reviewbody,
+    onChange: function onChange(event) {
+      var tempreviewpayloadobj = _objectSpread$2B({}, reviewpayloadobj);
+      tempreviewpayloadobj.reviewbody = event.target.value;
+      setreviewpayloadobj(_objectSpread$2B({}, tempreviewpayloadobj));
+    },
+    style: {
+      resize: 'none',
+      minRows: 5
+    }
+  })))), canuserreview && /*#__PURE__*/React__default["default"].createElement("div", {
+    "class": "col-lg-12 allcentered mt-3"
+  }, /*#__PURE__*/React__default["default"].createElement("button", {
+    "class": "".concat(reviewstyles.submitreviewbtn),
+    onClick: function onClick() {
+      if (reviewpayloadobj.reviewtitle.length != 0 && reviewpayloadobj.reviewbody.length != 0 && reviewpayloadobj.reviewrate.length != 0 && parseInt(reviewpayloadobj.reviewrate) > 0 && reviewpayloadobj.reviewname.length != 0) {
+        GeneralAPIMutationContext.mutate({
+          endpointurl: '/addproductreview',
+          productid: productid,
+          reviewpayloadobj: reviewpayloadobj,
+          mutateSuccesscallback: function mutateSuccesscallback(data, variables) {
+            if (data.data.status) {
+              NotificationManager.success('', 'Success');
+              addreviewcallback();
+              window.location.reload();
+            } else {
+              NotificationManager.warning('', data.data.reason);
+            }
+          }
+        });
+      } else {
+        NotificationManager.warning('', langdetect == 'en' ? 'Please complete the missing fields' : 'من فضلك اكمل باقى البيانات');
+
+        // alert('Please fill the missing fields');
+      }
+    }
+  }, langdetect == 'en' ? sectionproperties.reviewbtn_contenten : sectionproperties.reviewbtn_contentar)));
+};
+
+function ownKeys$2A(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$2A(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2A(Object(t), !0).forEach(function (r) { _defineProperty__default["default"](e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2A(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var ProductReviews = function ProductReviews(props) {
+  var _fetchProductInfoQuer, _fetchProductInfoQuer3, _fetchProductInfoQuer4;
+  props.actions.lang;
+  var langdetect = props.actions.langdetect;
+  var fetchProductInfoQueryContext = props.actions.fetchProductInfoQueryContext;
+  var GeneralAPIMutationContext = props.actions.GeneralAPIMutationContext;
+  props.actions.NotificationManager;
+  var sectionproperties = props.actions.sectionproperties;
+  var actions = props.actions;
+  var productid = fetchProductInfoQueryContext === null || fetchProductInfoQueryContext === void 0 || (_fetchProductInfoQuer = fetchProductInfoQueryContext.data) === null || _fetchProductInfoQuer === void 0 || (_fetchProductInfoQuer = _fetchProductInfoQuer.data) === null || _fetchProductInfoQuer === void 0 || (_fetchProductInfoQuer = _fetchProductInfoQuer.productinfo) === null || _fetchProductInfoQuer === void 0 ? void 0 : _fetchProductInfoQuer.productid;
+  var productinfo_cssstyles = props.actions.productinfo_cssstyles;
+  var _useState = React.useState(false),
+    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    canuserreview = _useState2[0],
+    setcanuserreview = _useState2[1];
+  var _useState3 = React.useState(false),
+    _useState4 = _slicedToArray__default["default"](_useState3, 2),
+    openreviewmodal = _useState4[0],
+    setopenreviewmodal = _useState4[1];
+  var _useState5 = React.useState('all'),
+    _useState6 = _slicedToArray__default["default"](_useState5, 2),
+    filterproductreviews = _useState6[0],
+    setfilterproductreviews = _useState6[1];
+  var _useState7 = React.useState([]),
+    _useState8 = _slicedToArray__default["default"](_useState7, 2),
+    productreviews = _useState8[0],
+    setproductreviews = _useState8[1];
+  React.useEffect(function () {
+    if (fetchProductInfoQueryContext.isSuccess) {
+      getreviewsassignermutationfunc();
+    }
+  }, [filterproductreviews]);
+  var getreviewsassignermutationfunc = function getreviewsassignermutationfunc() {
+    var _fetchProductInfoQuer2;
+    GeneralAPIMutationContext.mutate({
+      endpointurl: '/fetchproductreviews',
+      productid: fetchProductInfoQueryContext === null || fetchProductInfoQueryContext === void 0 || (_fetchProductInfoQuer2 = fetchProductInfoQueryContext.data) === null || _fetchProductInfoQuer2 === void 0 || (_fetchProductInfoQuer2 = _fetchProductInfoQuer2.data) === null || _fetchProductInfoQuer2 === void 0 || (_fetchProductInfoQuer2 = _fetchProductInfoQuer2.productinfo) === null || _fetchProductInfoQuer2 === void 0 ? void 0 : _fetchProductInfoQuer2.productid,
+      filterproductreviews: filterproductreviews,
+      mutateSuccesscallback: function mutateSuccesscallback(data, variables) {
+        if (data.data.status) {
+          setproductreviews(data.data.productreviews);
+          setcanuserreview(data.data.canuserAddReview);
+        }
+      }
+    });
+  };
+  var addreviewcallback = function addreviewcallback() {
+    setopenreviewmodal(false);
+    getreviewsassignermutationfunc();
+    fetchProductInfoQueryContext.refetch();
+  };
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: 'row w-100 ml-0 mr-0',
+    style: {
+      marginTop: props.actions.srcfrom == 'collapsepinfo' ? 0 : sectionproperties.marginTop + 'px',
+      maxHeight: props.actions.srcfrom == 'collapsepinfo' ? '30vh' : 'auto',
+      overflowY: 'auto'
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    "class": props.actions.srcfrom == 'collapsepinfo' ? 'col-lg-12 p-0 w-100 p-0 p-md-0 plr-1025-0' : 'col-lg-12 p-0 w-100 pl-5 pr-5 p-md-0 plr-1025-0'
+  }, GeneralAPIMutationContext.isLoading && /*#__PURE__*/React__default["default"].createElement("div", {
+    "class": "col-lg-12 allcentered",
+    style: {
+      height: '20vh'
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(reactCssfxLoading.Messaging, {
+    color: "#ccc",
+    width: "10px",
+    height: "10px",
+    duration: "1s"
+  })), !GeneralAPIMutationContext.isLoading && /*#__PURE__*/React__default["default"].createElement("div", {
+    "class": "row m-0 w-100"
+  }, props.actions.srcfrom != 'collapsepinfo' && /*#__PURE__*/React__default["default"].createElement("div", {
+    "class": props.actions.srcfrom != 'collapsepinfo' ? 'col-lg-3' : 'col-12'
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    "class": "row m-0 w-100 allcentered"
+  }, canuserreview && /*#__PURE__*/React__default["default"].createElement("div", {
+    "class": props.actions.srcfrom != 'collapsepinfo' ? 'col-lg-12 allcentered mb-3 p-0' : 'col-lg-12 text-end mb-3 p-0'
+  }, /*#__PURE__*/React__default["default"].createElement("button", {
+    "class": "".concat(productinfo_cssstyles.reviewbutton) + ' ',
+    onClick: function onClick() {
+      setopenreviewmodal(true);
+    }
+  }, langdetect == 'en' ? sectionproperties.reviewbtn_contenten : sectionproperties.reviewbtn_contentar)), props.actions.srcfrom != 'collapsepinfo' && /*#__PURE__*/React__default["default"].createElement("div", {
+    "class": "col-lg-12 p-0 mb-3"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    "class": "row m-0 w-100 py-3 px-2",
+    style: {
+      borderRadius: 10,
+      background: '#eee'
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    "class": "col-lg-12 p-0 allcentered"
+  }, /*#__PURE__*/React__default["default"].createElement("p", {
+    "class": "m-0 font-weight-600 text-uppercase",
+    style: {
+      fontSize: '17px'
+    }
+  }, langdetect == 'en' ? 'Overall Ratings' : 'جميع التقييمات')), /*#__PURE__*/React__default["default"].createElement("div", {
+    "class": "col-lg-12 pl-3 pr-3"
+  }, /*#__PURE__*/React__default["default"].createElement("hr", null)), /*#__PURE__*/React__default["default"].createElement("div", {
+    "class": "col-lg-12 p-0 allcentered"
+  }, /*#__PURE__*/React__default["default"].createElement("p", {
+    "class": "m-0 p-0 font-weight-600",
+    style: {
+      fontSize: '20px'
+    }
+  }, fetchProductInfoQueryContext === null || fetchProductInfoQueryContext === void 0 || (_fetchProductInfoQuer3 = fetchProductInfoQueryContext.data) === null || _fetchProductInfoQuer3 === void 0 || (_fetchProductInfoQuer3 = _fetchProductInfoQuer3.data) === null || _fetchProductInfoQuer3 === void 0 || (_fetchProductInfoQuer3 = _fetchProductInfoQuer3.productinfo) === null || _fetchProductInfoQuer3 === void 0 ? void 0 : _fetchProductInfoQuer3.productoverallrate, "/5")), /*#__PURE__*/React__default["default"].createElement("div", {
+    "class": "col-lg-12 p-0 allcentered"
+  }, /*#__PURE__*/React__default["default"].createElement(ReactStars__default["default"], {
+    count: 5,
+    value: fetchProductInfoQueryContext === null || fetchProductInfoQueryContext === void 0 || (_fetchProductInfoQuer4 = fetchProductInfoQueryContext.data) === null || _fetchProductInfoQuer4 === void 0 || (_fetchProductInfoQuer4 = _fetchProductInfoQuer4.data) === null || _fetchProductInfoQuer4 === void 0 || (_fetchProductInfoQuer4 = _fetchProductInfoQuer4.productinfo) === null || _fetchProductInfoQuer4 === void 0 ? void 0 : _fetchProductInfoQuer4.productoverallrate,
+    edit: false,
+    size: 18,
+    emptyIcon: /*#__PURE__*/React__default["default"].createElement("i", {
+      className: "far fa-star",
+      style: {
+        color: '#bfbfbf'
+      }
+    }),
+    halfIcon: /*#__PURE__*/React__default["default"].createElement("i", {
+      className: "fa fa-star-half-alt style={{ color: '#FAB400' }}"
+    }),
+    filledIcon: /*#__PURE__*/React__default["default"].createElement("i", {
+      className: "fa fa-star",
+      style: {
+        color: '#FAB400'
+      }
+    }),
+    activeColor: "#ffd700"
+  })))), props.actions.srcfrom != 'collapsepinfo' && /*#__PURE__*/React__default["default"].createElement("div", {
+    "class": "col-lg-12 p-0 d-flex justify-content-start mb-3"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    "class": "row m-0 w-100 py-3 px-2",
+    style: {
+      borderRadius: 10,
+      background: '#eee'
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    "class": "col-lg-12 p-0 allcentered"
+  }, /*#__PURE__*/React__default["default"].createElement("p", {
+    "class": "m-0 font-weight-600 text-uppercase",
+    style: {
+      fontSize: '17px'
+    }
+  }, langdetect == 'en' ? 'Filter' : 'فلترة')), /*#__PURE__*/React__default["default"].createElement("div", {
+    "class": "col-lg-12 pl-3 pr-3"
+  }, /*#__PURE__*/React__default["default"].createElement("hr", null)), /*#__PURE__*/React__default["default"].createElement("div", {
+    "class": "col-lg-12 d-flex justify-content-center"
+  }, /*#__PURE__*/React__default["default"].createElement(ReactStars__default["default"], {
+    count: 5,
+    value: filterproductreviews
+    // edit={false}
+    ,
+    size: 18,
+    emptyIcon: /*#__PURE__*/React__default["default"].createElement("i", {
+      className: "far fa-star",
+      style: {
+        color: '#bfbfbf'
+      }
+    }),
+    halfIcon: /*#__PURE__*/React__default["default"].createElement("i", {
+      className: "fa fa-star-half-alt style={{ color: '#FAB400' }}"
+    }),
+    filledIcon: /*#__PURE__*/React__default["default"].createElement("i", {
+      className: "fa fa-star",
+      style: {
+        color: '#FAB400'
+      }
+    }),
+    activeColor: "#ffd700",
+    onChange: function onChange(event) {
+      setfilterproductreviews(event);
+    }
+  })))))), /*#__PURE__*/React__default["default"].createElement("div", {
+    "class": props.actions.srcfrom != 'collapsepinfo' ? 'col-lg-9' : 'col-12 p-0'
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    "class": "row m-0 w-100"
+  }, productreviews === null || productreviews === void 0 ? void 0 : productreviews.map(function (reviewitem, reviewindex) {
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      "class": "col-lg-12 flex-column",
+      style: {
+        color: '#000'
+      }
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      "class": "row m-0 w-100"
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      "class": "col-lg-12 d-flex justify-content-start p-0 mb-2"
+    }, /*#__PURE__*/React__default["default"].createElement(ReactStars__default["default"], {
+      count: 5,
+      value: reviewitem.review_rating,
+      edit: false,
+      size: 13,
+      emptyIcon: /*#__PURE__*/React__default["default"].createElement("i", {
+        className: "far fa-star",
+        style: {
+          color: '#bfbfbf'
+        }
+      }),
+      halfIcon: /*#__PURE__*/React__default["default"].createElement("i", {
+        className: "fa fa-star-half-alt style={{ color: '#FAB400' }}"
+      }),
+      filledIcon: /*#__PURE__*/React__default["default"].createElement("i", {
+        className: "fa fa-star",
+        style: {
+          color: '#FAB400'
+        }
+      }),
+      activeColor: "#ffd700"
+    })), /*#__PURE__*/React__default["default"].createElement("div", {
+      "class": "col-lg-12 p-0 mb-2 d-flex justify-content-start "
+    }, /*#__PURE__*/React__default["default"].createElement("p", {
+      "class": "m-0 p-0 font-weight-600",
+      style: {
+        fontSize: '15px'
+      }
+    }, reviewitem.reviewtitle)), /*#__PURE__*/React__default["default"].createElement("div", {
+      "class": "col-lg-12 p-0 d-flex justify-content-start mb-2",
+      style: {
+        fontSize: 14
+      }
+    }, /*#__PURE__*/React__default["default"].createElement("p", {
+      "class": "m-0 p-0 font-weight-500"
+    }, reviewitem.reviewbody)), /*#__PURE__*/React__default["default"].createElement("div", {
+      "class": "col-lg-6 d-flex align-items-center justify-content-start p-0"
+    }, /*#__PURE__*/React__default["default"].createElement("p", {
+      "class": "m-0 p-0 font-weight-600",
+      style: {
+        fontSize: 14
+      }
+    }, langdetect == 'en' ? 'By' : 'عن طريق', ": ", reviewitem.review_name)), /*#__PURE__*/React__default["default"].createElement("div", {
+      "class": "col-lg-6 d-flex align-items-center justify-content-end justify-content-md-start p-0 font-weight-400 text-light",
+      style: {
+        fontSize: 13
+      }
+    }, /*#__PURE__*/React__default["default"].createElement("i", {
+      "class": "fa fa-clock text-light ml-2 mr-2"
+    }), " ", reviewitem.timestamp)), /*#__PURE__*/React__default["default"].createElement("hr", null));
+  }))))), /*#__PURE__*/React__default["default"].createElement(reactBootstrap.Modal, {
+    show: openreviewmodal,
+    onHide: function onHide() {
+      return setopenreviewmodal(false);
+    },
+    centered: true,
+    size: "md",
+    "class": "reviewmodal"
+  }, /*#__PURE__*/React__default["default"].createElement(reactBootstrap.Modal.Body, null, /*#__PURE__*/React__default["default"].createElement(AddReview, {
+    actions: _objectSpread$2A(_objectSpread$2A({}, actions), {}, {
+      productid: productid,
+      canuserreview: canuserreview,
+      addreviewcallback: addreviewcallback
+    })
+  }))));
+};
+
+function ownKeys$2z(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$2z(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2z(Object(t), !0).forEach(function (r) { _defineProperty__default["default"](e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2z(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Product_itemtype = function Product_itemtype(props) {
   var _authdetailsContext$i, _authdetailsContext$i2, _authdetailsContext$i3, _authdetailsContext$i4, _fetchProductInfoQuer3, _fetchProductInfoQuer4, _fetchProductInfoQuer5, _fetchProductInfoQuer6, _fetchProductInfoQuer7, _fetchProductInfoQuer8, _fetchProductInfoQuer9, _fetchProductInfoQuer0, _fetchProductInfoQuer1, _fetchProductInfoQuer10, _fetchProductInfoQuer11, _fetchProductInfoQuer12, _fetchProductInfoQuer13, _fetchProductInfoQuer14, _fetchProductInfoQuer15, _fetchProductInfoQuer16, _fetchProductInfoQuer17, _fetchProductInfoQuer18, _fetchProductInfoQuer19, _fetchProductInfoQuer20, _fetchProductInfoQuer21, _fetchProductInfoQuer22, _fetchProductInfoQuer23, _fetchProductInfoQuer24, _fetchProductInfoQuer25, _fetchProductInfoQuer26, _fetchProductInfoQuer27, _fetchProductInfoQuer28, _fetchProductInfoQuer29, _fetchProductInfoQuer30, _authdetailsContext$i5, _fetchProductInfoQuer41, _fetchProductInfoQuer42, _fetchProductInfoQuer44, _fetchProductInfoQuer45, _fetchProductInfoQuer46, _fetchProductInfoQuer48, _fetchProductInfoQuer49, _fetchProductInfoQuer50, _fetchProductInfoQuer51, _fetchProductInfoQuer52, _fetchProductInfoQuer53, _fetchProductInfoQuer54, _fetchProductInfoQuer55, _fetchProductInfoQuer56, _returnpolicyobj, _returnpolicyobj2, _returnpolicyobj3, _returnpolicyobj4, _returnpolicyobj5, _returnpolicyobj6, _returnpolicyobj7, _returnpolicyobj8, _fetchProductInfoQuer57, _fetchProductInfoQuer58, _fetchProductInfoQuer59, _fetchProductInfoQuer60, _fetchProductInfoQuer61, _fetchProductInfoQuer62, _authdetailsContext$i6, _authdetailsContext$i7, _fetchProductInfoQuer63, _fetchProductInfoQuer64, _fetchProductInfoQuer65, _fetchProductInfoQuer66, _fetchProductInfoQuer67, _fetchProductInfoQuer68, _fetchProductInfoQuer69, _fetchProductInfoQuer70, _authdetailsContext$i8, _fetchProductInfoQuer71, _fetchProductInfoQuer72, _fetchProductInfoQuer73, _fetchProductInfoQuer74, _fetchProductInfoQuer75, _fetchProductInfoQuer78, _fetchProductInfoQuer79, _authdetailsContext$i9, _fetchProductInfoQuer80, _fetchProductInfoQuer81, _fetchProductInfoQuer82, _fetchProductInfoQuer83, _fetchProductInfoQuer84, _fetchProductInfoQuer85, _fetchProductInfoQuer86, _fetchProductInfoQuer89, _fetchProductInfoQuer90, _sizeguideimage$;
   var lang = props.actions.lang;
+  var actions = props.actions;
   var langdetect = props.actions.langdetect;
   var srcfromprops = props.actions.srcfromprops;
   var returnpolicyobj = props.actions.returnpolicyobj;
@@ -3253,7 +3777,7 @@ var Product_itemtype = function Product_itemtype(props) {
     onClick: function onClick() {
       var _fetchProductInfoQuer31, _fetchProductInfoQuer32, _fetchProductInfoQuer33, _fetchProductInfoQuer34;
       var quantitystepincrearse = 1;
-      var tempaddtocardpayloadobj = _objectSpread$2B({}, addtocardpayloadobj);
+      var tempaddtocardpayloadobj = _objectSpread$2z({}, addtocardpayloadobj);
       if ((fetchProductInfoQueryContext === null || fetchProductInfoQueryContext === void 0 || (_fetchProductInfoQuer31 = fetchProductInfoQueryContext.data) === null || _fetchProductInfoQuer31 === void 0 || (_fetchProductInfoQuer31 = _fetchProductInfoQuer31.data) === null || _fetchProductInfoQuer31 === void 0 || (_fetchProductInfoQuer31 = _fetchProductInfoQuer31.productinfo) === null || _fetchProductInfoQuer31 === void 0 ? void 0 : _fetchProductInfoQuer31.quantitystepincrearse) != undefined && (fetchProductInfoQueryContext === null || fetchProductInfoQueryContext === void 0 || (_fetchProductInfoQuer32 = fetchProductInfoQueryContext.data) === null || _fetchProductInfoQuer32 === void 0 || (_fetchProductInfoQuer32 = _fetchProductInfoQuer32.data) === null || _fetchProductInfoQuer32 === void 0 || (_fetchProductInfoQuer32 = _fetchProductInfoQuer32.productinfo) === null || _fetchProductInfoQuer32 === void 0 ? void 0 : _fetchProductInfoQuer32.quantitystepincrearse) != null && (fetchProductInfoQueryContext === null || fetchProductInfoQueryContext === void 0 || (_fetchProductInfoQuer33 = fetchProductInfoQueryContext.data) === null || _fetchProductInfoQuer33 === void 0 || (_fetchProductInfoQuer33 = _fetchProductInfoQuer33.data) === null || _fetchProductInfoQuer33 === void 0 || (_fetchProductInfoQuer33 = _fetchProductInfoQuer33.productinfo) === null || _fetchProductInfoQuer33 === void 0 ? void 0 : _fetchProductInfoQuer33.quantitystepincrearse) != 1 && (fetchProductInfoQueryContext === null || fetchProductInfoQueryContext === void 0 || (_fetchProductInfoQuer34 = fetchProductInfoQueryContext.data) === null || _fetchProductInfoQuer34 === void 0 || (_fetchProductInfoQuer34 = _fetchProductInfoQuer34.data) === null || _fetchProductInfoQuer34 === void 0 || (_fetchProductInfoQuer34 = _fetchProductInfoQuer34.productinfo) === null || _fetchProductInfoQuer34 === void 0 ? void 0 : _fetchProductInfoQuer34.quantitystepincrearse) != '') {
         var _fetchProductInfoQuer35;
         quantitystepincrearse = parseFloat(fetchProductInfoQueryContext === null || fetchProductInfoQueryContext === void 0 || (_fetchProductInfoQuer35 = fetchProductInfoQueryContext.data) === null || _fetchProductInfoQuer35 === void 0 || (_fetchProductInfoQuer35 = _fetchProductInfoQuer35.data) === null || _fetchProductInfoQuer35 === void 0 || (_fetchProductInfoQuer35 = _fetchProductInfoQuer35.productinfo) === null || _fetchProductInfoQuer35 === void 0 ? void 0 : _fetchProductInfoQuer35.quantitystepincrearse);
@@ -3262,7 +3786,7 @@ var Product_itemtype = function Product_itemtype(props) {
       if (finalquantity >= 0) {
         tempaddtocardpayloadobj.quantity = finalquantity;
       }
-      setaddtocardpayloadobj(_objectSpread$2B({}, tempaddtocardpayloadobj));
+      setaddtocardpayloadobj(_objectSpread$2z({}, tempaddtocardpayloadobj));
     }
   }, /*#__PURE__*/React__default["default"].createElement("i", {
     className: sectionproperties.quantityiconstyle == 'Arrows' ? 'fa fa-chevron-down' : 'h-100 allcentered',
@@ -3278,13 +3802,13 @@ var Product_itemtype = function Product_itemtype(props) {
     onClick: function onClick() {
       var _fetchProductInfoQuer36, _fetchProductInfoQuer37, _fetchProductInfoQuer38, _fetchProductInfoQuer39;
       var quantitystepincrearse = 1;
-      var tempaddtocardpayloadobj = _objectSpread$2B({}, addtocardpayloadobj);
+      var tempaddtocardpayloadobj = _objectSpread$2z({}, addtocardpayloadobj);
       if ((fetchProductInfoQueryContext === null || fetchProductInfoQueryContext === void 0 || (_fetchProductInfoQuer36 = fetchProductInfoQueryContext.data) === null || _fetchProductInfoQuer36 === void 0 || (_fetchProductInfoQuer36 = _fetchProductInfoQuer36.data) === null || _fetchProductInfoQuer36 === void 0 || (_fetchProductInfoQuer36 = _fetchProductInfoQuer36.productinfo) === null || _fetchProductInfoQuer36 === void 0 ? void 0 : _fetchProductInfoQuer36.quantitystepincrearse) != undefined && (fetchProductInfoQueryContext === null || fetchProductInfoQueryContext === void 0 || (_fetchProductInfoQuer37 = fetchProductInfoQueryContext.data) === null || _fetchProductInfoQuer37 === void 0 || (_fetchProductInfoQuer37 = _fetchProductInfoQuer37.data) === null || _fetchProductInfoQuer37 === void 0 || (_fetchProductInfoQuer37 = _fetchProductInfoQuer37.productinfo) === null || _fetchProductInfoQuer37 === void 0 ? void 0 : _fetchProductInfoQuer37.quantitystepincrearse) != null && (fetchProductInfoQueryContext === null || fetchProductInfoQueryContext === void 0 || (_fetchProductInfoQuer38 = fetchProductInfoQueryContext.data) === null || _fetchProductInfoQuer38 === void 0 || (_fetchProductInfoQuer38 = _fetchProductInfoQuer38.data) === null || _fetchProductInfoQuer38 === void 0 || (_fetchProductInfoQuer38 = _fetchProductInfoQuer38.productinfo) === null || _fetchProductInfoQuer38 === void 0 ? void 0 : _fetchProductInfoQuer38.quantitystepincrearse) != 1 && (fetchProductInfoQueryContext === null || fetchProductInfoQueryContext === void 0 || (_fetchProductInfoQuer39 = fetchProductInfoQueryContext.data) === null || _fetchProductInfoQuer39 === void 0 || (_fetchProductInfoQuer39 = _fetchProductInfoQuer39.data) === null || _fetchProductInfoQuer39 === void 0 || (_fetchProductInfoQuer39 = _fetchProductInfoQuer39.productinfo) === null || _fetchProductInfoQuer39 === void 0 ? void 0 : _fetchProductInfoQuer39.quantitystepincrearse) != '') {
         var _fetchProductInfoQuer40;
         quantitystepincrearse = parseFloat(fetchProductInfoQueryContext === null || fetchProductInfoQueryContext === void 0 || (_fetchProductInfoQuer40 = fetchProductInfoQueryContext.data) === null || _fetchProductInfoQuer40 === void 0 || (_fetchProductInfoQuer40 = _fetchProductInfoQuer40.data) === null || _fetchProductInfoQuer40 === void 0 || (_fetchProductInfoQuer40 = _fetchProductInfoQuer40.productinfo) === null || _fetchProductInfoQuer40 === void 0 ? void 0 : _fetchProductInfoQuer40.quantitystepincrearse);
       }
       tempaddtocardpayloadobj.quantity = tempaddtocardpayloadobj.quantity + quantitystepincrearse;
-      setaddtocardpayloadobj(_objectSpread$2B({}, tempaddtocardpayloadobj));
+      setaddtocardpayloadobj(_objectSpread$2z({}, tempaddtocardpayloadobj));
     }
   }, /*#__PURE__*/React__default["default"].createElement("i", {
     className: sectionproperties.quantityiconstyle == 'Arrows' ? 'fa fa-chevron-up' : 'h-100 allcentered',
@@ -3307,13 +3831,13 @@ var Product_itemtype = function Product_itemtype(props) {
     value: addtocardpayloadobj.quantity,
     onChange: function onChange(event) {
       if (event.target.value == NaN || event.target.value == undefined || event.target.value == null || event.target.value == '') {
-        var tempaddtocardpayloadobj = _objectSpread$2B({}, addtocardpayloadobj);
+        var tempaddtocardpayloadobj = _objectSpread$2z({}, addtocardpayloadobj);
         tempaddtocardpayloadobj.quantity = 1;
-        setaddtocardpayloadobj(_objectSpread$2B({}, tempaddtocardpayloadobj));
+        setaddtocardpayloadobj(_objectSpread$2z({}, tempaddtocardpayloadobj));
       } else {
-        var tempaddtocardpayloadobj = _objectSpread$2B({}, addtocardpayloadobj);
+        var tempaddtocardpayloadobj = _objectSpread$2z({}, addtocardpayloadobj);
         tempaddtocardpayloadobj.quantity = parseInt(event.target.value);
-        setaddtocardpayloadobj(_objectSpread$2B({}, tempaddtocardpayloadobj));
+        setaddtocardpayloadobj(_objectSpread$2z({}, tempaddtocardpayloadobj));
       }
     }
   })), sectionproperties.featuresposition != 'Under Name' && sectionproperties.featuresposition == 'Under Description' && sectionproperties.featurestyle != 'Table' && /*#__PURE__*/React__default["default"].createElement("div", {
@@ -3689,7 +4213,7 @@ var Product_itemtype = function Product_itemtype(props) {
   }, /*#__PURE__*/React__default["default"].createElement("hr", {
     "class": "m-0"
   })), sectionproperties.descriptionstyle == 'Style 2' && /*#__PURE__*/React__default["default"].createElement("div", {
-    "class": "col-lg-12 col-md-12 p-md-0 mb-3"
+    "class": sectionproperties.eviewssectionstyle == 'In Collapse' ? 'col-lg-12 col-md-12 p-md-0' : 'col-lg-12 col-md-12 p-md-0 mb-3'
   }, /*#__PURE__*/React__default["default"].createElement(reactAccessibleAccordion.Accordion, {
     allowMultipleExpanded: true,
     allowZeroExpanded: true
@@ -3807,7 +4331,56 @@ var Product_itemtype = function Product_itemtype(props) {
     onClick: function onClick() {
       routingcountext(StaticPagesLinksContext.RefundPolicy);
     }
-  }, "SEE MORE")))))), (fetchProductInfoQueryContext === null || fetchProductInfoQueryContext === void 0 || (_fetchProductInfoQuer57 = fetchProductInfoQueryContext.data) === null || _fetchProductInfoQuer57 === void 0 || (_fetchProductInfoQuer57 = _fetchProductInfoQuer57.data) === null || _fetchProductInfoQuer57 === void 0 || (_fetchProductInfoQuer57 = _fetchProductInfoQuer57.productinfo) === null || _fetchProductInfoQuer57 === void 0 ? void 0 : _fetchProductInfoQuer57.isproducttobesold) == 1 && sectionproperties.showtotalsection == 'Show' && /*#__PURE__*/React__default["default"].createElement("div", {
+  }, "SEE MORE")))))), sectionproperties.descriptionstyle == 'Style 2' && sectionproperties.reviewssectionstyle == 'In Collapse' && /*#__PURE__*/React__default["default"].createElement("div", {
+    "class": "col-lg-12 col-md-12 my-3 p-md-0"
+  }, /*#__PURE__*/React__default["default"].createElement("hr", {
+    "class": "m-0"
+  })), sectionproperties.descriptionstyle == 'Style 2' && sectionproperties.reviewssectionstyle == 'In Collapse' && /*#__PURE__*/React__default["default"].createElement("div", {
+    "class": "col-lg-12 col-md-12 p-md-0"
+  }, /*#__PURE__*/React__default["default"].createElement(reactAccessibleAccordion.Accordion, {
+    allowMultipleExpanded: true,
+    allowZeroExpanded: true
+  }, /*#__PURE__*/React__default["default"].createElement(reactAccessibleAccordion.AccordionItem, null, /*#__PURE__*/React__default["default"].createElement(reactAccessibleAccordion.AccordionItemHeading, null, /*#__PURE__*/React__default["default"].createElement(reactAccessibleAccordion.AccordionItemButton, null, /*#__PURE__*/React__default["default"].createElement("div", {
+    "class": "row m-0 w-100"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "col-lg-10 col-md-10 col-sm-10 p-0 d-flex align-items-center"
+  }, /*#__PURE__*/React__default["default"].createElement("p", {
+    "class": "m-0",
+    style: {
+      textAlign: langdetect == 'en' ? 'left' : 'right',
+      fontWeight: sectionproperties.prodCatFontWeight,
+      color: sectionproperties.prodCatColor,
+      fontSize: sectionproperties.prodCatFontSize + 'px'
+    }
+  }, langdetect == 'en' ? 'REVIEWS' : 'التقييمات')), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "col-lg-2 col-md-2 col-sm-2 p-0"
+  }, /*#__PURE__*/React__default["default"].createElement(reactAccessibleAccordion.AccordionItemState, null, function (state) {
+    if (state.expanded == true) {
+      return /*#__PURE__*/React__default["default"].createElement("i", {
+        className: ' h-100 d-flex align-items-center justify-content-end   '
+      }, /*#__PURE__*/React__default["default"].createElement(FaMinus.FaMinus, {
+        color: sectionproperties.prodCatColor
+      }));
+    } else {
+      return /*#__PURE__*/React__default["default"].createElement("i", {
+        className: ' h-100 d-flex align-items-center justify-content-end   '
+      }, /*#__PURE__*/React__default["default"].createElement(FaPlus.FaPlus, {
+        color: sectionproperties.prodCatColor
+      }));
+    }
+  }))))), /*#__PURE__*/React__default["default"].createElement(reactAccessibleAccordion.AccordionItemPanel, {
+    className: "p-0"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    "class": "col-lg-12 pl-3 pr-3 mt-3"
+  }, /*#__PURE__*/React__default["default"].createElement(ProductReviews, {
+    actions: _objectSpread$2z(_objectSpread$2z({}, actions), {}, {
+      productinfo_cssstyles: productinfo_cssstyles,
+      sectionproperties: sectionproperties,
+      srcfrom: 'collapsepinfo'
+    })
+    // actions={props.actions}
+    // srcfromprops={'collapsepinfo'}
+  })))))), (fetchProductInfoQueryContext === null || fetchProductInfoQueryContext === void 0 || (_fetchProductInfoQuer57 = fetchProductInfoQueryContext.data) === null || _fetchProductInfoQuer57 === void 0 || (_fetchProductInfoQuer57 = _fetchProductInfoQuer57.data) === null || _fetchProductInfoQuer57 === void 0 || (_fetchProductInfoQuer57 = _fetchProductInfoQuer57.productinfo) === null || _fetchProductInfoQuer57 === void 0 ? void 0 : _fetchProductInfoQuer57.isproducttobesold) == 1 && sectionproperties.showtotalsection == 'Show' && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "col-lg-12 p-0 mb-3"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "row m-0 w-100 d-flex flex-row"
@@ -4696,8 +5269,8 @@ var Product_itemtype = function Product_itemtype(props) {
   }))), /*#__PURE__*/React__default["default"].createElement(reactBootstrap.Modal.Footer, null)));
 };
 
-function ownKeys$2A(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$2A(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2A(Object(t), !0).forEach(function (r) { _defineProperty__default["default"](e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2A(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$2y(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$2y(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2y(Object(t), !0).forEach(function (r) { _defineProperty__default["default"](e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2y(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Serviceinfotabs = function Serviceinfotabs(props) {
   var _fetchProductInfoQuer10, _fetchProductInfoQuer11, _fetchProductInfoQuer12, _fetchProductInfoQuer13, _fetchProductInfoQuer14, _fetchProductInfoQuer15, _fetchProductInfoQuer18, _fetchProductInfoQuer19, _fetchProductInfoQuer22, _fetchProductInfoQuer23;
   var langdetect = props.actions.langdetect;
@@ -4758,7 +5331,7 @@ var Serviceinfotabs = function Serviceinfotabs(props) {
     minutes_Active_days_array = _useState12[0],
     setminutes_Active_days_array = _useState12[1];
   React.useEffect(function () {
-    setaddtocardpayloadobj(_objectSpread$2A(_objectSpread$2A({}, addtocardpayloadobj), {}, {
+    setaddtocardpayloadobj(_objectSpread$2y(_objectSpread$2y({}, addtocardpayloadobj), {}, {
       item_type: 'service'
     }));
   }, [tabsarray]);
@@ -4774,16 +5347,16 @@ var Serviceinfotabs = function Serviceinfotabs(props) {
     if (diffDays.toString() != 'NaN') {
       if (date2 <= date1) {
         NotificationManager.warning('', 'Please choose another date.');
-        setaddtocardpayloadobj(_objectSpread$2A(_objectSpread$2A({}, addtocardpayloadobj), {}, {
+        setaddtocardpayloadobj(_objectSpread$2y(_objectSpread$2y({}, addtocardpayloadobj), {}, {
           quantity: 0
         }));
       } else {
         if (fetchProductInfoQueryContext.data.data.productinfo.maximumproductquant >= diffDays && fetchProductInfoQueryContext.data.data.productinfo.minimumproductquant <= diffDays) {
-          setaddtocardpayloadobj(_objectSpread$2A(_objectSpread$2A({}, addtocardpayloadobj), {}, {
+          setaddtocardpayloadobj(_objectSpread$2y(_objectSpread$2y({}, addtocardpayloadobj), {}, {
             quantity: diffDays
           }));
         } else {
-          setaddtocardpayloadobj(_objectSpread$2A(_objectSpread$2A({}, addtocardpayloadobj), {}, {
+          setaddtocardpayloadobj(_objectSpread$2y(_objectSpread$2y({}, addtocardpayloadobj), {}, {
             quantity: 0
           }));
           NotificationManager.warning('', 'Max: ' + fetchProductInfoQueryContext.data.data.productinfo.maximumproductquant + ', Min: ' + fetchProductInfoQueryContext.data.data.productinfo.minimumproductquant);
@@ -4800,7 +5373,7 @@ var Serviceinfotabs = function Serviceinfotabs(props) {
         if ((fetchProductInfoQueryContext === null || fetchProductInfoQueryContext === void 0 || (_fetchProductInfoQuer4 = fetchProductInfoQueryContext.data) === null || _fetchProductInfoQuer4 === void 0 || (_fetchProductInfoQuer4 = _fetchProductInfoQuer4.data) === null || _fetchProductInfoQuer4 === void 0 || (_fetchProductInfoQuer4 = _fetchProductInfoQuer4.productinfo) === null || _fetchProductInfoQuer4 === void 0 ? void 0 : _fetchProductInfoQuer4.disabled_dates.length) != 0) {
           var _fetchProductInfoQuer5;
           //
-          var tempdisableddates = _objectSpread$2A({}, disableddates);
+          var tempdisableddates = _objectSpread$2y({}, disableddates);
           tempdisableddates = fetchProductInfoQueryContext === null || fetchProductInfoQueryContext === void 0 || (_fetchProductInfoQuer5 = fetchProductInfoQueryContext.data) === null || _fetchProductInfoQuer5 === void 0 || (_fetchProductInfoQuer5 = _fetchProductInfoQuer5.data) === null || _fetchProductInfoQuer5 === void 0 || (_fetchProductInfoQuer5 = _fetchProductInfoQuer5.productinfo) === null || _fetchProductInfoQuer5 === void 0 ? void 0 : _fetchProductInfoQuer5.disabled_dates.map(function (dateStr) {
             return new Date(dateStr);
           });
@@ -4915,6 +5488,9 @@ var Serviceinfotabs = function Serviceinfotabs(props) {
         borderColor: sectionproperties.inputfeildbordercoloronfocus
       }
     }),
+    selectedpicker: glamor.css({
+      color: sectionproperties.inputfieldcolor
+    }),
     timeSlotContainer: glamor.css({
       minWidth: '6vh',
       height: '5vh',
@@ -5051,7 +5627,7 @@ var Serviceinfotabs = function Serviceinfotabs(props) {
     }
     if (reservedslotArrtobetaken.length != 0) {
       reservedslottobetaken = reservedslotArrtobetaken[0].slot;
-      setaddtocardpayloadobj(_objectSpread$2A(_objectSpread$2A({}, addtocardpayloadobj), {}, {
+      setaddtocardpayloadobj(_objectSpread$2y(_objectSpread$2y({}, addtocardpayloadobj), {}, {
         time: reservedslottobetaken,
         reserved_slots: reservedslotArrtobetaken,
         quantity: parseInt(reservedslotArrtobetaken.length)
@@ -5110,7 +5686,7 @@ var Serviceinfotabs = function Serviceinfotabs(props) {
     selected: selectedfromdate,
     excludeDates: disableddates,
     onChange: function onChange(date) {
-      setaddtocardpayloadobj(_objectSpread$2A(_objectSpread$2A({}, addtocardpayloadobj), {}, {
+      setaddtocardpayloadobj(_objectSpread$2y(_objectSpread$2y({}, addtocardpayloadobj), {}, {
         from: date
       }));
       setselectedfromdate(date);
@@ -5131,7 +5707,7 @@ var Serviceinfotabs = function Serviceinfotabs(props) {
     selected: selectedtodate,
     excludeDates: disableddates,
     onChange: function onChange(date) {
-      setaddtocardpayloadobj(_objectSpread$2A(_objectSpread$2A({}, addtocardpayloadobj), {}, {
+      setaddtocardpayloadobj(_objectSpread$2y(_objectSpread$2y({}, addtocardpayloadobj), {}, {
         to: date
       }));
       setselectedtodate(date);
@@ -5156,8 +5732,12 @@ var Serviceinfotabs = function Serviceinfotabs(props) {
       border: sectionproperties.inputfieldborderWidth + 'px solid ' + sectionproperties.inputfieldborderColor
     }
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    "class": "w-100 px-2 h-100 allcentered"
+    "class": "w-100 px-2 h-100 allcentered",
+    style: {
+      color: sectionproperties.inputfieldcolor
+    }
   }, /*#__PURE__*/React__default["default"].createElement(DatePicker__default["default"], {
+    className: "".concat(TabsStyles.selectedpicker),
     minDate: fetchProductInfoQueryContext !== null && fetchProductInfoQueryContext !== void 0 && (_fetchProductInfoQuer13 = fetchProductInfoQueryContext.data) !== null && _fetchProductInfoQuer13 !== void 0 && (_fetchProductInfoQuer13 = _fetchProductInfoQuer13.data) !== null && _fetchProductInfoQuer13 !== void 0 && (_fetchProductInfoQuer13 = _fetchProductInfoQuer13.productinfo) !== null && _fetchProductInfoQuer13 !== void 0 && (_fetchProductInfoQuer13 = _fetchProductInfoQuer13.serviceinfo) !== null && _fetchProductInfoQuer13 !== void 0 && _fetchProductInfoQuer13.reservationstarts ? new Date(fetchProductInfoQueryContext.data.data.productinfo.serviceinfo.reservationstarts) : null,
     maxDate: fetchProductInfoQueryContext !== null && fetchProductInfoQueryContext !== void 0 && (_fetchProductInfoQuer14 = fetchProductInfoQueryContext.data) !== null && _fetchProductInfoQuer14 !== void 0 && (_fetchProductInfoQuer14 = _fetchProductInfoQuer14.data) !== null && _fetchProductInfoQuer14 !== void 0 && (_fetchProductInfoQuer14 = _fetchProductInfoQuer14.productinfo) !== null && _fetchProductInfoQuer14 !== void 0 && (_fetchProductInfoQuer14 = _fetchProductInfoQuer14.serviceinfo) !== null && _fetchProductInfoQuer14 !== void 0 && _fetchProductInfoQuer14.reservationends ? new Date(fetchProductInfoQueryContext.data.data.productinfo.serviceinfo.reservationends) : null,
     filterDate: isAllowedDay,
@@ -5170,7 +5750,7 @@ var Serviceinfotabs = function Serviceinfotabs(props) {
         var _month = String(date.getMonth() + 1).padStart(2, '0'); // Months are 0-based
         var _day = String(date.getDate()).padStart(2, '0');
         var formattedDate = "".concat(_year, "-").concat(_month, "-").concat(_day);
-        setaddtocardpayloadobj(_objectSpread$2A(_objectSpread$2A({}, addtocardpayloadobj), {}, {
+        setaddtocardpayloadobj(_objectSpread$2y(_objectSpread$2y({}, addtocardpayloadobj), {}, {
           date: formattedDate,
           time: '',
           reservedslotArrtobetaken: [],
@@ -5191,7 +5771,8 @@ var Serviceinfotabs = function Serviceinfotabs(props) {
         });
         setselectedfromdate(date);
       }
-    }
+    },
+    placeholderText: langdetect == 'en' ? 'Choose date' : 'اختر تاريخ'
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     "class": "h-100 allcentered",
     style: {
@@ -5250,7 +5831,7 @@ var Serviceinfotabs = function Serviceinfotabs(props) {
     }, /*#__PURE__*/React__default["default"].createElement("button", {
       "class": TabsStyles.booknow_btn_resp + ' allcentered  ',
       onClick: function onClick() {
-        setaddtocardpayloadobj(_objectSpread$2A(_objectSpread$2A({}, addtocardpayloadobj), {}, {
+        setaddtocardpayloadobj(_objectSpread$2y(_objectSpread$2y({}, addtocardpayloadobj), {}, {
           time: item.slot
         }));
       }
@@ -6688,515 +7269,6 @@ var Article_itemtype = function Article_itemtype(props) {
   })))))));
 };
 
-function ownKeys$2z(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$2z(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2z(Object(t), !0).forEach(function (r) { _defineProperty__default["default"](e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2z(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var AddReview = function AddReview(props) {
-  var _css;
-  var StatePagePropertiesContext = props.actions.StatePagePropertiesContext;
-  props.actions;
-  props.actions.lang;
-  var langdetect = props.actions.langdetect;
-  var productid = props.actions.productid;
-  var GeneralAPIMutationContext = props.actions.GeneralAPIMutationContext;
-  var NotificationManager = props.actions.NotificationManager;
-  var canuserreview = props.actions.canuserreview;
-  var addreviewcallback = props.actions.addreviewcallback;
-  var ikimagecredcontext = props.actions.ikimagecredcontext;
-  var fetchProductInfoQueryContext = props.actions.fetchProductInfoQueryContext;
-  var pageindexcontext = props.actions.pageindexcontext;
-  props.actions.setpageindexcontext;
-  props.actions.setCurrentPageIdContext;
-  var templatepropcontext = props.actions.templatepropcontext;
-  var _useState = React.useState(''),
-    _useState2 = _slicedToArray__default["default"](_useState, 2),
-    sectionproperties = _useState2[0],
-    setsectionproperties = _useState2[1];
-  var _useState3 = React.useState(''),
-    _useState4 = _slicedToArray__default["default"](_useState3, 2);
-    _useState4[0];
-    _useState4[1];
-  var _useState5 = React.useState({
-      reviewtitle: '',
-      reviewbody: '',
-      reviewrate: 0,
-      reviewname: '',
-      hasreview: 0
-    }),
-    _useState6 = _slicedToArray__default["default"](_useState5, 2),
-    reviewpayloadobj = _useState6[0],
-    setreviewpayloadobj = _useState6[1];
-  // useEffect(() => {
-  //     var cartindex = templatepropcontext.pagesnprop.findIndex((x) => x.staticpageid == '63fcbef36eebe');
-  //     if (cartindex >= 0) {
-  //         setpageindexcontext(cartindex);
-  //         setCurrentPageId(templatepropcontext.pagesnprop[cartindex].pageid);
-  //         if (props.srcfromprops != 'templatedraftrouter') {
-  //             setCurrentPageIdContext(templatepropcontext.pagesnprop[cartindex].pageid);
-  //         }
-  //     }
-  // }, []);
-  React.useEffect(function () {
-    if (Object.keys(StatePagePropertiesContext).length != 0) {
-      var secpropobj = {};
-      StatePagePropertiesContext.pageobj != undefined && StatePagePropertiesContext.pageobj.pageproperties != undefined && StatePagePropertiesContext.pageobj.pageproperties.forEach(function (arrayItem, arrayindex) {
-        secpropobj[arrayItem.property_css_name] = arrayItem.property_value;
-      });
-      setsectionproperties(_objectSpread$2z({}, secpropobj));
-    }
-  }, [StatePagePropertiesContext]);
-  React.useEffect(function () {
-    var _templatepropcontext$;
-    var secpropobj = {};
-    templatepropcontext === null || templatepropcontext === void 0 || (_templatepropcontext$ = templatepropcontext.pagesnprop[pageindexcontext]) === null || _templatepropcontext$ === void 0 || (_templatepropcontext$ = _templatepropcontext$.pageproperties) === null || _templatepropcontext$ === void 0 || _templatepropcontext$.forEach(function (arrayItem, arrayindex) {
-      secpropobj[arrayItem.property_css_name] = arrayItem.property_value;
-    });
-    setsectionproperties(_objectSpread$2z({}, secpropobj));
-  }, [pageindexcontext]);
-  var reviewstyles = {
-    submitreviewbtn: glamor.css({
-      width: sectionproperties.reviewbtn_width + 'px',
-      height: sectionproperties.reviewbtn_height + 'px',
-      borderRadius: sectionproperties.reviewbtn_borderradius + 'px',
-      fontSize: sectionproperties.reviewbtn_fontsize + 'px',
-      color: sectionproperties.reviewbtn_color,
-      fontWeight: sectionproperties.reviewbtn_fontweight,
-      backgroundColor: sectionproperties.reviewbtn_bgcolor,
-      border: sectionproperties.reviewbtn_borderwidth + 'px solid ' + sectionproperties.reviewbtn_bordercolor,
-      ':hover': {
-        transition: '.3s',
-        backgroundColor: sectionproperties.reviewbtn_bgcoloronhover,
-        color: sectionproperties.reviewbtn_coloronhover
-      }
-    }),
-    form_control: glamor.css((_css = {
-      position: 'relative',
-      display: 'flex',
-      alignItems: 'center'
-    }, _defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"](_css, "display", 'block'), "width", '100%'), "padding", '0 10px'), "transition", '.3s'), "fontWeight", 500), "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), _defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"](_css, "color", sectionproperties.inputfieldcolor), ':focus', {
-      borderColor: sectionproperties.inputfeildbordercoloronfocus
-    }), ':focus .login_input_icon', {
-      color: sectionproperties.inputfeildbordercoloronfocus
-    }))),
-    inputfield_label: glamor.css({
-      color: sectionproperties.form_labelcolor,
-      fontWeight: sectionproperties.form_labelfontweight,
-      fontSize: sectionproperties.form_labelfontsize + 'px',
-      textTransform: sectionproperties.form_labeltexttransform,
-      marginBottom: sectionproperties.inputfieldbordertype == 'All' ? 10 : 0
-    }),
-    reviewbutton: glamor.css({
-      width: sectionproperties.reviewbtn_width + 'px',
-      height: sectionproperties.reviewbtn_height + 'px',
-      background: sectionproperties.reviewbtn_bgcolor,
-      color: sectionproperties.reviewbtn_color,
-      fontSize: sectionproperties.reviewbtn_fontsize + 'px',
-      borderRadius: sectionproperties.reviewbtn_borderradius + 'px',
-      border: sectionproperties.reviewbtn_borderwidth + 'px solid ' + sectionproperties.reviewbtn_bordercolor,
-      fontWeight: sectionproperties.reviewbtn_fontweight,
-      ':hover': {
-        transition: '.3s',
-        color: sectionproperties.reviewbtn_coloronhover,
-        borderColor: sectionproperties.reviewbtn_coloronhover,
-        backgroundColor: sectionproperties.reviewbtn_bgcoloronhover
-      }
-    }),
-    productname: glamor.css({
-      fontSize: sectionproperties.prodNameFontSize + 'px',
-      textTransform: sectionproperties.prodNameTextTranform,
-      fontWeight: sectionproperties.prodNameFontWeight,
-      color: sectionproperties.prodNameColor
-    })
-  };
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: 'row w-100 ml-0 mr-0 pb-5',
-    style: {
-      marginTop: sectionproperties.marginTop + 'px'
-    }
-  }, sectionproperties.sectionTitleFontSize != 0 && /*#__PURE__*/React__default["default"].createElement("div", {
-    "class": "row m-0 w-100 mt-3"
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    "class": "col-lg-12 p-0 allcentered"
-  }, /*#__PURE__*/React__default["default"].createElement("p", {
-    "class": "m-0 p-0",
-    style: {
-      fontSize: sectionproperties.sectionTitleFontSize + 'px',
-      color: sectionproperties.sectionTitleColor,
-      fontWeight: sectionproperties.sectionTitleFontWeight
-    }
-  }, langdetect == 'en' ? sectionproperties.sectionTitleContent : sectionproperties.sectionTitleContent_ar)), /*#__PURE__*/React__default["default"].createElement("div", {
-    "class": "col-lg-12"
-  }, /*#__PURE__*/React__default["default"].createElement("hr", null))), /*#__PURE__*/React__default["default"].createElement("div", {
-    "class": "col-lg-12 mb-3"
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    "class": "row m-0 w-100 d-flex justify-content-start align-items-center"
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    "class": "d-flex justify-content-start align-items-center",
-    style: {
-      width: '9vh',
-      height: '9vh'
-    }
-  }, /*#__PURE__*/React__default["default"].createElement(Imagekitimagecomp, {
-    urlEndpoint: ikimagecredcontext === null || ikimagecredcontext === void 0 ? void 0 : ikimagecredcontext.ikimageendpoint,
-    publicKey: ikimagecredcontext === null || ikimagecredcontext === void 0 ? void 0 : ikimagecredcontext.ikimagepublickey,
-    path: fetchProductInfoQueryContext.data.data.productinfo.productmainimage,
-    style: {
-      width: '100%',
-      height: '100%',
-      objectFit: 'contain'
-    },
-    loading: "lazy"
-  })), /*#__PURE__*/React__default["default"].createElement("div", {
-    "class": "col-lg-9 co-md-9 col-sm-9 d-flex justify-content-start align-items-center"
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    "class": "row m-0 w-100"
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    "class": "col-lg-12 p-0 d-flex justify-content-start align-items-center"
-  }, /*#__PURE__*/React__default["default"].createElement("p", {
-    "class": reviewstyles.productname + ' m-0 p-0 '
-  }, langdetect == 'en' ? fetchProductInfoQueryContext.data.data.productinfo.name_en : fetchProductInfoQueryContext.data.data.productinfo.name_ar)), /*#__PURE__*/React__default["default"].createElement("div", {
-    "class": "col-lg-12 p-0 d-flex justify-content-start align-items-center"
-  }, /*#__PURE__*/React__default["default"].createElement(ReactStars__default["default"], {
-    count: 5,
-    value: reviewpayloadobj.reviewrate,
-    size: 18,
-    emptyIcon: /*#__PURE__*/React__default["default"].createElement("i", {
-      className: "far fa-star",
-      style: {
-        color: '#bfbfbf'
-      }
-    }),
-    halfIcon: /*#__PURE__*/React__default["default"].createElement("i", {
-      className: "fa fa-star-half-alt style={{ color: '#FAB400' }}"
-    }),
-    filledIcon: /*#__PURE__*/React__default["default"].createElement("i", {
-      className: "fa fa-star",
-      style: {
-        color: '#FAB400'
-      }
-    }),
-    activeColor: "#ffd700",
-    onChange: function onChange(event) {
-      var tempreviewpayloadobj = _objectSpread$2z({}, reviewpayloadobj);
-      tempreviewpayloadobj.reviewrate = event;
-      setreviewpayloadobj(_objectSpread$2z({}, tempreviewpayloadobj));
-    }
-  })))))), /*#__PURE__*/React__default["default"].createElement("div", {
-    "class": "col-lg-12"
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    "class": "row m-0 w-100"
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    "class": "col-lg-12 mb-4"
-  }, /*#__PURE__*/React__default["default"].createElement("label", {
-    className: "".concat(reviewstyles.inputfield_label) + ' text-transform-none d-flex justify-content-start '
-  }, langdetect == 'en' ? 'Your Name' : 'اسمك'), /*#__PURE__*/React__default["default"].createElement("input", {
-    "class": reviewstyles.form_control,
-    value: reviewpayloadobj.reviewname,
-    onChange: function onChange(event) {
-      var tempreviewpayloadobj = _objectSpread$2z({}, reviewpayloadobj);
-      tempreviewpayloadobj.reviewname = event.target.value;
-      setreviewpayloadobj(_objectSpread$2z({}, tempreviewpayloadobj));
-    }
-  })), /*#__PURE__*/React__default["default"].createElement("div", {
-    "class": "col-lg-12 mb-4"
-  }, /*#__PURE__*/React__default["default"].createElement("label", {
-    className: "".concat(reviewstyles.inputfield_label) + ' text-transform-none d-flex justify-content-start '
-  }, langdetect == 'en' ? 'Review title' : 'عنوان التقييم'), /*#__PURE__*/React__default["default"].createElement("input", {
-    "class": reviewstyles.form_control,
-    value: reviewpayloadobj.reviewtitle,
-    onChange: function onChange(event) {
-      var tempreviewpayloadobj = _objectSpread$2z({}, reviewpayloadobj);
-      tempreviewpayloadobj.reviewtitle = event.target.value;
-      setreviewpayloadobj(_objectSpread$2z({}, tempreviewpayloadobj));
-    }
-  })), /*#__PURE__*/React__default["default"].createElement("div", {
-    "class": "col-lg-12 mb-4"
-  }, /*#__PURE__*/React__default["default"].createElement("label", {
-    className: "".concat(reviewstyles.inputfield_label) + ' text-transform-none d-flex justify-content-start '
-  }, langdetect == 'en' ? 'Your Review' : 'تقييمك'), /*#__PURE__*/React__default["default"].createElement(TextareaAutosize__default["default"], {
-    type: 'text',
-    "class": reviewstyles.form_control + ' form_control ',
-    value: reviewpayloadobj.reviewbody,
-    onChange: function onChange(event) {
-      var tempreviewpayloadobj = _objectSpread$2z({}, reviewpayloadobj);
-      tempreviewpayloadobj.reviewbody = event.target.value;
-      setreviewpayloadobj(_objectSpread$2z({}, tempreviewpayloadobj));
-    },
-    style: {
-      resize: 'none',
-      minRows: 5
-    }
-  })))), canuserreview && /*#__PURE__*/React__default["default"].createElement("div", {
-    "class": "col-lg-12 allcentered mt-3"
-  }, /*#__PURE__*/React__default["default"].createElement("button", {
-    "class": "".concat(reviewstyles.submitreviewbtn),
-    onClick: function onClick() {
-      if (reviewpayloadobj.reviewtitle.length != 0 && reviewpayloadobj.reviewbody.length != 0 && reviewpayloadobj.reviewrate.length != 0 && parseInt(reviewpayloadobj.reviewrate) > 0 && reviewpayloadobj.reviewname.length != 0) {
-        GeneralAPIMutationContext.mutate({
-          endpointurl: '/addproductreview',
-          productid: productid,
-          reviewpayloadobj: reviewpayloadobj,
-          mutateSuccesscallback: function mutateSuccesscallback(data, variables) {
-            if (data.data.status) {
-              NotificationManager.success('', 'Success');
-              addreviewcallback();
-              window.location.reload();
-            } else {
-              NotificationManager.warning('', data.data.reason);
-            }
-          }
-        });
-      } else {
-        NotificationManager.warning('', langdetect == 'en' ? 'Please complete the missing fields' : 'من فضلك اكمل باقى البيانات');
-
-        // alert('Please fill the missing fields');
-      }
-    }
-  }, langdetect == 'en' ? sectionproperties.reviewbtn_contenten : sectionproperties.reviewbtn_contentar)));
-};
-
-function ownKeys$2y(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$2y(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2y(Object(t), !0).forEach(function (r) { _defineProperty__default["default"](e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2y(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var ProductReviews = function ProductReviews(props) {
-  var _fetchProductInfoQuer, _fetchProductInfoQuer3, _fetchProductInfoQuer4;
-  props.actions.lang;
-  var langdetect = props.actions.langdetect;
-  var fetchProductInfoQueryContext = props.actions.fetchProductInfoQueryContext;
-  var GeneralAPIMutationContext = props.actions.GeneralAPIMutationContext;
-  props.actions.NotificationManager;
-  var sectionproperties = props.actions.sectionproperties;
-  var actions = props.actions;
-  var productid = fetchProductInfoQueryContext === null || fetchProductInfoQueryContext === void 0 || (_fetchProductInfoQuer = fetchProductInfoQueryContext.data) === null || _fetchProductInfoQuer === void 0 || (_fetchProductInfoQuer = _fetchProductInfoQuer.data) === null || _fetchProductInfoQuer === void 0 || (_fetchProductInfoQuer = _fetchProductInfoQuer.productinfo) === null || _fetchProductInfoQuer === void 0 ? void 0 : _fetchProductInfoQuer.productid;
-  var productinfo_cssstyles = props.actions.productinfo_cssstyles;
-  var _useState = React.useState(false),
-    _useState2 = _slicedToArray__default["default"](_useState, 2),
-    canuserreview = _useState2[0],
-    setcanuserreview = _useState2[1];
-  var _useState3 = React.useState(false),
-    _useState4 = _slicedToArray__default["default"](_useState3, 2),
-    openreviewmodal = _useState4[0],
-    setopenreviewmodal = _useState4[1];
-  var _useState5 = React.useState('all'),
-    _useState6 = _slicedToArray__default["default"](_useState5, 2),
-    filterproductreviews = _useState6[0],
-    setfilterproductreviews = _useState6[1];
-  var _useState7 = React.useState([]),
-    _useState8 = _slicedToArray__default["default"](_useState7, 2),
-    productreviews = _useState8[0],
-    setproductreviews = _useState8[1];
-  React.useEffect(function () {
-    if (fetchProductInfoQueryContext.isSuccess) {
-      getreviewsassignermutationfunc();
-    }
-  }, [filterproductreviews]);
-  var getreviewsassignermutationfunc = function getreviewsassignermutationfunc() {
-    var _fetchProductInfoQuer2;
-    GeneralAPIMutationContext.mutate({
-      endpointurl: '/fetchproductreviews',
-      productid: fetchProductInfoQueryContext === null || fetchProductInfoQueryContext === void 0 || (_fetchProductInfoQuer2 = fetchProductInfoQueryContext.data) === null || _fetchProductInfoQuer2 === void 0 || (_fetchProductInfoQuer2 = _fetchProductInfoQuer2.data) === null || _fetchProductInfoQuer2 === void 0 || (_fetchProductInfoQuer2 = _fetchProductInfoQuer2.productinfo) === null || _fetchProductInfoQuer2 === void 0 ? void 0 : _fetchProductInfoQuer2.productid,
-      filterproductreviews: filterproductreviews,
-      mutateSuccesscallback: function mutateSuccesscallback(data, variables) {
-        if (data.data.status) {
-          setproductreviews(data.data.productreviews);
-          setcanuserreview(data.data.canuserAddReview);
-        }
-      }
-    });
-  };
-  var addreviewcallback = function addreviewcallback() {
-    setopenreviewmodal(false);
-    getreviewsassignermutationfunc();
-    fetchProductInfoQueryContext.refetch();
-  };
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: 'row w-100 ml-0 mr-0',
-    style: {
-      marginTop: sectionproperties.marginTop + 'px'
-    }
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    "class": "col-lg-12 p-0 w-100 pl-5 pr-5 p-md-0 plr-1025-0"
-  }, GeneralAPIMutationContext.isLoading && /*#__PURE__*/React__default["default"].createElement("div", {
-    "class": "col-lg-12 allcentered",
-    style: {
-      height: '20vh'
-    }
-  }, /*#__PURE__*/React__default["default"].createElement(reactCssfxLoading.Messaging, {
-    color: "#ccc",
-    width: "10px",
-    height: "10px",
-    duration: "1s"
-  })), !GeneralAPIMutationContext.isLoading && /*#__PURE__*/React__default["default"].createElement("div", {
-    "class": "row m-0 w-100"
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    "class": "col-lg-3"
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    "class": "row m-0 w-100 allcentered"
-  }, canuserreview && /*#__PURE__*/React__default["default"].createElement("div", {
-    "class": "col-lg-12 allcentered mb-3 p-0"
-  }, /*#__PURE__*/React__default["default"].createElement("button", {
-    "class": "".concat(productinfo_cssstyles.reviewbutton) + ' ',
-    onClick: function onClick() {
-      setopenreviewmodal(true);
-    }
-  }, langdetect == 'en' ? sectionproperties.reviewbtn_contenten : sectionproperties.reviewbtn_contentar)), /*#__PURE__*/React__default["default"].createElement("div", {
-    "class": "col-lg-12 p-0 mb-3"
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    "class": "row m-0 w-100 py-3 px-2",
-    style: {
-      borderRadius: 10,
-      background: '#eee'
-    }
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    "class": "col-lg-12 p-0 allcentered"
-  }, /*#__PURE__*/React__default["default"].createElement("p", {
-    "class": "m-0 font-weight-600 text-uppercase",
-    style: {
-      fontSize: '17px'
-    }
-  }, langdetect == 'en' ? 'Overall Ratings' : 'جميع التقييمات')), /*#__PURE__*/React__default["default"].createElement("div", {
-    "class": "col-lg-12 pl-3 pr-3"
-  }, /*#__PURE__*/React__default["default"].createElement("hr", null)), /*#__PURE__*/React__default["default"].createElement("div", {
-    "class": "col-lg-12 p-0 allcentered"
-  }, /*#__PURE__*/React__default["default"].createElement("p", {
-    "class": "m-0 p-0 font-weight-600",
-    style: {
-      fontSize: '20px'
-    }
-  }, fetchProductInfoQueryContext === null || fetchProductInfoQueryContext === void 0 || (_fetchProductInfoQuer3 = fetchProductInfoQueryContext.data) === null || _fetchProductInfoQuer3 === void 0 || (_fetchProductInfoQuer3 = _fetchProductInfoQuer3.data) === null || _fetchProductInfoQuer3 === void 0 || (_fetchProductInfoQuer3 = _fetchProductInfoQuer3.productinfo) === null || _fetchProductInfoQuer3 === void 0 ? void 0 : _fetchProductInfoQuer3.productoverallrate, "/5")), /*#__PURE__*/React__default["default"].createElement("div", {
-    "class": "col-lg-12 p-0 allcentered"
-  }, /*#__PURE__*/React__default["default"].createElement(ReactStars__default["default"], {
-    count: 5,
-    value: fetchProductInfoQueryContext === null || fetchProductInfoQueryContext === void 0 || (_fetchProductInfoQuer4 = fetchProductInfoQueryContext.data) === null || _fetchProductInfoQuer4 === void 0 || (_fetchProductInfoQuer4 = _fetchProductInfoQuer4.data) === null || _fetchProductInfoQuer4 === void 0 || (_fetchProductInfoQuer4 = _fetchProductInfoQuer4.productinfo) === null || _fetchProductInfoQuer4 === void 0 ? void 0 : _fetchProductInfoQuer4.productoverallrate,
-    edit: false,
-    size: 18,
-    emptyIcon: /*#__PURE__*/React__default["default"].createElement("i", {
-      className: "far fa-star",
-      style: {
-        color: '#bfbfbf'
-      }
-    }),
-    halfIcon: /*#__PURE__*/React__default["default"].createElement("i", {
-      className: "fa fa-star-half-alt style={{ color: '#FAB400' }}"
-    }),
-    filledIcon: /*#__PURE__*/React__default["default"].createElement("i", {
-      className: "fa fa-star",
-      style: {
-        color: '#FAB400'
-      }
-    }),
-    activeColor: "#ffd700"
-  })))), /*#__PURE__*/React__default["default"].createElement("div", {
-    "class": "col-lg-12 p-0 d-flex justify-content-start mb-3"
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    "class": "row m-0 w-100 py-3 px-2",
-    style: {
-      borderRadius: 10,
-      background: '#eee'
-    }
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    "class": "col-lg-12 p-0 allcentered"
-  }, /*#__PURE__*/React__default["default"].createElement("p", {
-    "class": "m-0 font-weight-600 text-uppercase",
-    style: {
-      fontSize: '17px'
-    }
-  }, langdetect == 'en' ? 'Filter' : 'فلترة')), /*#__PURE__*/React__default["default"].createElement("div", {
-    "class": "col-lg-12 pl-3 pr-3"
-  }, /*#__PURE__*/React__default["default"].createElement("hr", null)), /*#__PURE__*/React__default["default"].createElement("div", {
-    "class": "col-lg-12 d-flex justify-content-center"
-  }, /*#__PURE__*/React__default["default"].createElement(ReactStars__default["default"], {
-    count: 5,
-    value: filterproductreviews
-    // edit={false}
-    ,
-    size: 18,
-    emptyIcon: /*#__PURE__*/React__default["default"].createElement("i", {
-      className: "far fa-star",
-      style: {
-        color: '#bfbfbf'
-      }
-    }),
-    halfIcon: /*#__PURE__*/React__default["default"].createElement("i", {
-      className: "fa fa-star-half-alt style={{ color: '#FAB400' }}"
-    }),
-    filledIcon: /*#__PURE__*/React__default["default"].createElement("i", {
-      className: "fa fa-star",
-      style: {
-        color: '#FAB400'
-      }
-    }),
-    activeColor: "#ffd700",
-    onChange: function onChange(event) {
-      setfilterproductreviews(event);
-    }
-  })))))), /*#__PURE__*/React__default["default"].createElement("div", {
-    "class": "col-lg-9"
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    "class": "row m-0 w-100"
-  }, productreviews === null || productreviews === void 0 ? void 0 : productreviews.map(function (reviewitem, reviewindex) {
-    return /*#__PURE__*/React__default["default"].createElement("div", {
-      "class": "col-lg-12 flex-column"
-    }, /*#__PURE__*/React__default["default"].createElement("div", {
-      "class": "row m-0 w-100"
-    }, /*#__PURE__*/React__default["default"].createElement("div", {
-      "class": "col-lg-12 d-flex justify-content-start p-0 mb-2"
-    }, /*#__PURE__*/React__default["default"].createElement(ReactStars__default["default"], {
-      count: 5,
-      value: reviewitem.review_rating,
-      edit: false,
-      size: 18,
-      emptyIcon: /*#__PURE__*/React__default["default"].createElement("i", {
-        className: "far fa-star",
-        style: {
-          color: '#bfbfbf'
-        }
-      }),
-      halfIcon: /*#__PURE__*/React__default["default"].createElement("i", {
-        className: "fa fa-star-half-alt style={{ color: '#FAB400' }}"
-      }),
-      filledIcon: /*#__PURE__*/React__default["default"].createElement("i", {
-        className: "fa fa-star",
-        style: {
-          color: '#FAB400'
-        }
-      }),
-      activeColor: "#ffd700"
-    })), /*#__PURE__*/React__default["default"].createElement("div", {
-      "class": "col-lg-12 p-0 mb-2 d-flex justify-content-start "
-    }, /*#__PURE__*/React__default["default"].createElement("p", {
-      "class": "m-0 p-0 font-weight-600",
-      style: {
-        fontSize: '17px'
-      }
-    }, reviewitem.reviewtitle)), /*#__PURE__*/React__default["default"].createElement("div", {
-      "class": "col-lg-12 p-0 d-flex justify-content-start mb-2"
-    }, /*#__PURE__*/React__default["default"].createElement("p", {
-      "class": "m-0 p-0 font-weight-500"
-    }, reviewitem.reviewbody)), /*#__PURE__*/React__default["default"].createElement("div", {
-      "class": "col-lg-6 d-flex align-items-center justify-content-start p-0"
-    }, /*#__PURE__*/React__default["default"].createElement("p", {
-      "class": "m-0 p-0 font-weight-600"
-    }, langdetect == 'en' ? 'By' : 'عن طريق', ": ", reviewitem.review_name)), /*#__PURE__*/React__default["default"].createElement("div", {
-      "class": "col-lg-6 d-flex align-items-center justify-content-end justify-content-md-start p-0 font-weight-500 text-light"
-    }, /*#__PURE__*/React__default["default"].createElement("i", {
-      "class": "fa fa-clock text-light ml-2 mr-2"
-    }), " ", reviewitem.timestamp)), /*#__PURE__*/React__default["default"].createElement("hr", null));
-  }))))), /*#__PURE__*/React__default["default"].createElement(reactBootstrap.Modal, {
-    show: openreviewmodal,
-    onHide: function onHide() {
-      return setopenreviewmodal(false);
-    },
-    centered: true,
-    size: "md",
-    "class": "reviewmodal"
-  }, /*#__PURE__*/React__default["default"].createElement(reactBootstrap.Modal.Body, null, /*#__PURE__*/React__default["default"].createElement(AddReview, {
-    actions: _objectSpread$2y(_objectSpread$2y({}, actions), {}, {
-      productid: productid,
-      canuserreview: canuserreview,
-      addreviewcallback: addreviewcallback
-    })
-  }))));
-};
-
 function ownKeys$2x(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$2x(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2x(Object(t), !0).forEach(function (r) { _defineProperty__default["default"](e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2x(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Productinfo = function Productinfo(props) {
@@ -8874,7 +8946,7 @@ var Productinfo = function Productinfo(props) {
       lang: lang,
       srcfromprops: props.srcfromprops
     }, _defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"](_ref3, "returnpolicyobj", returnpolicyobj), "productinfo_cssstyles", productinfo_cssstyles), "addtocartfunc", addtocartfunc), "selectproductoptionvalue", selectproductoptionvalue), "clearchoosenvaluesbutkeepcurrentvalue", clearchoosenvaluesbutkeepcurrentvalue), "productimagesarray", productimagesarray), "fetchProductInfoQueryContext", fetchProductInfoQueryContext), "sectionproperties", sectionproperties), "addtocardpayloadobj", addtocardpayloadobj), "ProductInfoObj", ProductInfoObj), _defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"](_ref3, "currentshowingimageindex", currentshowingimageindex), "setcurrentshowingimageindex", setcurrentshowingimageindex), "setaddtocardpayloadobj", setaddtocardpayloadobj), "routingcountext", routingcountext), "AddtoCartMutationContext", AddtoCartMutationContext), "authdetailsContext", authdetailsContext), "addtofavoritescontext", addtofavoritescontext), "StaticPagesLinksContext", StaticPagesLinksContext), "variantindexcompleted", variantindexcompleted), "GeneralAPIMutationContext", GeneralAPIMutationContext), _defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"](_ref3, "NotificationManager", NotificationManager), "getprice_discountpriceprops", getprice_discountpriceprops), "quantityconditionfoundobjprops", quantityconditionfoundobj), "relatedproducts", relatedproducts), "getQuantityCondition", getQuantityCondition), "StoreInfoprops", StoreInfo), "templatepropcontext", templatepropcontext), "ikimagecredcontext", ikimagecredcontext), "sizeguideimage", sizeguideimage), "setopensizeguidemodal", setopensizeguidemodal))
-  }), props.srcfromprops != 'templatedraftrouter' && /*#__PURE__*/React__default["default"].createElement("div", {
+  }), props.srcfromprops != 'templatedraftrouter' && sectionproperties.showtabs == 'Show' && /*#__PURE__*/React__default["default"].createElement("div", {
     className: sectionproperties.card_marginLeft != 0 ? ' col-lg-12 p-0 pl-lg-3 pr-lg-3 pl-md-4 pr-md-4 pl-sm-1 pr-sm-1 ' : ' col-lg-12 p-sm-0 ',
     style: {
       paddingLeft: props.srcfromprops == 'Productinfomodel' ? langdetect == 'en' ? sectionproperties.card_marginLeft + 'px' : sectionproperties.card_marginRight + 'px' : 0,
@@ -9991,6 +10063,7 @@ var Ordershistory = function Ordershistory(props) {
   }))), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "row m-0 w-100"
   }, fetchorderhistoryQueryContext.data.data.ordershistory[orderindex].orderitems.map(function (item, index) {
+    var _authdetailsContext$i3, _authdetailsContext$i4;
     var variantoptions = [];
     if (item.isvariant == 1) {
       var decodevariantoptions = JSON.parse(item.variantoptions);
@@ -10077,7 +10150,10 @@ var Ordershistory = function Ordershistory(props) {
         textAlign: langdetect == 'en' ? 'left' : 'right'
       },
       onClick: function onClick() {
-        routingcountext(StaticPagesLinksContext.productinfo, true, item.productid);
+        var _authdetailsContext$i2;
+        if ((authdetailsContext === null || authdetailsContext === void 0 || (_authdetailsContext$i2 = authdetailsContext.instinfo) === null || _authdetailsContext$i2 === void 0 ? void 0 : _authdetailsContext$i2.instid) == '68248846ec6bc') ; else {
+          routingcountext(StaticPagesLinksContext.productinfo, true, item.productid);
+        }
       }
     }, item.productname)), sectionproperties.prodPriceShow == 'Show' && /*#__PURE__*/React__default["default"].createElement("div", {
       className: "col-lg-12 col-md-12 col-sm-12 p-0 d-flex align-items-center"
@@ -10105,7 +10181,7 @@ var Ordershistory = function Ordershistory(props) {
       }, /*#__PURE__*/React__default["default"].createElement("p", {
         className: ' m-0 p-0 font-13 fontfamilymedium wordbreak allcentered '
       }, variantoptionitem.optionname, ": ", variantoptionitem.optionvalue));
-    }))), item.product_extrafields != null && /*#__PURE__*/React__default["default"].createElement("div", {
+    }))), item.product_extrafields != null && (authdetailsContext === null || authdetailsContext === void 0 || (_authdetailsContext$i3 = authdetailsContext.instinfo) === null || _authdetailsContext$i3 === void 0 ? void 0 : _authdetailsContext$i3.instid) != '68248846ec6bc' && /*#__PURE__*/React__default["default"].createElement("div", {
       "class": "col-lg-12 p-0 d-flex align-items-center"
     }, /*#__PURE__*/React__default["default"].createElement("div", {
       "class": "row m-0 w-100"
@@ -10126,7 +10202,32 @@ var Ordershistory = function Ordershistory(props) {
           fontWeight: sectionproperties.varianttext_fontweight
         }
       }, extrafielditem.value)));
-    })))))), /*#__PURE__*/React__default["default"].createElement("div", {
+    }))), item.product_extrafields != null && (authdetailsContext === null || authdetailsContext === void 0 || (_authdetailsContext$i4 = authdetailsContext.instinfo) === null || _authdetailsContext$i4 === void 0 ? void 0 : _authdetailsContext$i4.instid) == '68248846ec6bc' && /*#__PURE__*/React__default["default"].createElement("div", {
+      "class": "col-lg-12 p-0 d-flex align-items-center"
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      "class": "row m-0 w-100"
+    }, /*#__PURE__*/React__default["default"].createElement("table", {
+      className: 'table tablevertical'
+    }, product_extrafields.map(function (extrafielditem, extrafieldindex) {
+      return /*#__PURE__*/React__default["default"].createElement("tr", null, /*#__PURE__*/React__default["default"].createElement("th", {
+        style: {
+          textTransform: 'capitalize',
+          color: '#000',
+          fontWeight: 400
+        }
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
+        "class": "d-flex flex-row",
+        style: {
+          color: sectionproperties.featurecolor
+        }
+      }, langdetect == 'en' ? extrafielditem.title_en : extrafielditem.title_ar)), /*#__PURE__*/React__default["default"].createElement("td", {
+        style: {
+          color: '#000',
+          fontWeight: 400,
+          textAlign: langdetect == 'en' ? 'left' : 'right'
+        }
+      }, extrafielditem.value));
+    }))))))), /*#__PURE__*/React__default["default"].createElement("div", {
       className: "col-lg-12 p-0"
     }, /*#__PURE__*/React__default["default"].createElement("hr", {
       className: "mt- mb-3"
@@ -14055,7 +14156,7 @@ var CustomerInformationForm = function CustomerInformationForm(props) {
         background: sectionproperties.input_bgcolor
       }
     })), /*#__PURE__*/React__default["default"].createElement("div", {
-      className: sectionproperties.cardstyletype == 'Style 1' ? 'col-lg-4 col-md-12 col-sm-12 mb-4 p-sm-0' : 'col-lg-12 col-md-12 col-sm-12 mb-4 p-sm-0',
+      className: sectionproperties.cardstyletype == 'Style 1' ? 'col-lg-4 col-md-12 col-sm-12 mb-4 p-sm-0 flex-column' : 'col-lg-12 col-md-12 col-sm-12 mb-4 p-sm-0 flex-column',
       style: {
         display: (authdetailsContext === null || authdetailsContext === void 0 || (_authdetailsContext$i2 = authdetailsContext.instinfo) === null || _authdetailsContext$i2 === void 0 ? void 0 : _authdetailsContext$i2.customerEmailrequiered) == 1 ? 'flex' : sectionproperties.showemail == 'Hide' && (authdetailsContext === null || authdetailsContext === void 0 || (_authdetailsContext$i3 = authdetailsContext.instinfo) === null || _authdetailsContext$i3 === void 0 ? void 0 : _authdetailsContext$i3.customerEmailrequiered) == 0 ? 'none' : 'flex'
       }
@@ -33686,7 +33787,7 @@ styleInject(css_248z$v);
 function ownKeys$1Y(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$1Y(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1Y(Object(t), !0).forEach(function (r) { _defineProperty__default["default"](e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1Y(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Simpleheader = function Simpleheader(props) {
-  var _header_cssstyles, _authdetailsContext$i, _logoarrayofobjects$, _logoarrayofobjects$2, _authdetailsContext$i2, _authdetailsContext$i6, _fetchcustomercartQue, _fetchcustomercartQue2, _authdetailsContext$c, _authdetailsContext$i7, _authdetailsContext$c2, _authdetailsContext$i8, _authdetailsContext$i9, _logoarrayofobjects$3, _logoarrayofobjects$4;
+  var _header_cssstyles, _authdetailsContext$i, _logoarrayofobjects$, _logoarrayofobjects$2, _authdetailsContext$i2, _authdetailsContext$i6, _fetchcustomercartQue, _fetchcustomercartQue2, _authdetailsContext$c, _authdetailsContext$i7, _authdetailsContext$i8, _authdetailsContext$i9, _authdetailsContext$c2, _authdetailsContext$i0, _authdetailsContext$i1, _authdetailsContext$i10, _authdetailsContext$i11, _logoarrayofobjects$3, _logoarrayofobjects$4;
   var actions = props.actions;
   var _useState = React.useState(''),
     _useState2 = _slicedToArray__default["default"](_useState, 2),
@@ -34226,6 +34327,28 @@ var Simpleheader = function Simpleheader(props) {
     "class": langdetect == 'en' ? 'mr-2' : 'ml-2'
   }), sectionproperties.carticonstyle == 'Calendar 1' && /*#__PURE__*/React__default["default"].createElement(FiCalendar.FiCalendar, {
     "class": langdetect == 'en' ? 'mr-2' : 'ml-2'
+  }), langdetect == 'en' ? sectionproperties.previousorders_titleen : sectionproperties.previousorders_titlear))), (authdetailsContext === null || authdetailsContext === void 0 || (_authdetailsContext$i7 = authdetailsContext.instinfo) === null || _authdetailsContext$i7 === void 0 ? void 0 : _authdetailsContext$i7.instid) == '68248846ec6bc' && /*#__PURE__*/React__default["default"].createElement(Dropdown__default["default"].Divider, null), (authdetailsContext === null || authdetailsContext === void 0 || (_authdetailsContext$i8 = authdetailsContext.instinfo) === null || _authdetailsContext$i8 === void 0 ? void 0 : _authdetailsContext$i8.instid) == '68248846ec6bc' && /*#__PURE__*/React__default["default"].createElement(Dropdown__default["default"].Item, {
+    onClick: function onClick() {
+      routingcountext(StaticPagesLinksContext.Ordershistory);
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    "class": "".concat(header_cssstyles.dropdownitemcontainer) + ' allcenetered m-0 p-0 '
+  }, /*#__PURE__*/React__default["default"].createElement("p", {
+    "class": "".concat(header_cssstyles.dropdownitem) + ' dropdownitem allcenetered m-0 p-0 '
+  }, sectionproperties.carticonstyle == 'Shopping bag 1' && /*#__PURE__*/React__default["default"].createElement(FiShoppingBag.FiShoppingBag, {
+    "class": langdetect == 'en' ? 'mr-2' : 'ml-2'
+  }), sectionproperties.carticonstyle == 'Shopping bag 2' && /*#__PURE__*/React__default["default"].createElement(CgShoppingBag.CgShoppingBag, {
+    "class": langdetect == 'en' ? 'mr-2' : 'ml-2'
+  }), sectionproperties.carticonstyle == 'Shopping bag 3' && /*#__PURE__*/React__default["default"].createElement(BsBag.BsBag, {
+    "class": langdetect == 'en' ? 'mr-2' : 'ml-2'
+  }), sectionproperties.carticonstyle == 'Shopping bag 4' && /*#__PURE__*/React__default["default"].createElement(HiOutlineShoppingBag.HiOutlineShoppingBag, {
+    "class": langdetect == 'en' ? 'mr-2' : 'ml-2'
+  }), sectionproperties.carticonstyle == 'Shopping cart 1' && /*#__PURE__*/React__default["default"].createElement(FiShoppingCart.FiShoppingCart, {
+    "class": langdetect == 'en' ? 'mr-2' : 'ml-2'
+  }), sectionproperties.carticonstyle == 'Shopping cart 2' && /*#__PURE__*/React__default["default"].createElement(MdAddShoppingCart.MdAddShoppingCart, {
+    "class": langdetect == 'en' ? 'mr-2' : 'ml-2'
+  }), sectionproperties.carticonstyle == 'Calendar 1' && /*#__PURE__*/React__default["default"].createElement(FiCalendar.FiCalendar, {
+    "class": langdetect == 'en' ? 'mr-2' : 'ml-2'
   }), langdetect == 'en' ? sectionproperties.previousorders_titleen : sectionproperties.previousorders_titlear))), sectionproperties.favBtnShow == 'Show' && /*#__PURE__*/React__default["default"].createElement(Dropdown__default["default"].Divider, null), sectionproperties.favBtnShow == 'Show' && /*#__PURE__*/React__default["default"].createElement(Dropdown__default["default"].Item, {
     onClick: function onClick() {
       routingcountext(StaticPagesLinksContext.Wishlist);
@@ -34260,7 +34383,7 @@ var Simpleheader = function Simpleheader(props) {
     "class": ' h-100 d-flex align-items-center '
   }, /*#__PURE__*/React__default["default"].createElement(HiUserCircle.HiUserCircle, {
     size: sectionproperties.userBtnTextfontsize
-  })), (authdetailsContext === null || authdetailsContext === void 0 || (_authdetailsContext$i7 = authdetailsContext.instinfo) === null || _authdetailsContext$i7 === void 0 ? void 0 : _authdetailsContext$i7.instid) == '67b1bb900a541' && /*#__PURE__*/React__default["default"].createElement("span", {
+  })), (authdetailsContext === null || authdetailsContext === void 0 || (_authdetailsContext$i9 = authdetailsContext.instinfo) === null || _authdetailsContext$i9 === void 0 ? void 0 : _authdetailsContext$i9.instid) == '67b1bb900a541' && /*#__PURE__*/React__default["default"].createElement("span", {
     className: "mx-2",
     style: {
       fontSize: 18
@@ -34313,6 +34436,28 @@ var Simpleheader = function Simpleheader(props) {
     "class": langdetect == 'en' ? 'mr-2' : 'ml-2'
   }), sectionproperties.carticonstyle == 'Calendar 1' && /*#__PURE__*/React__default["default"].createElement(FiCalendar.FiCalendar, {
     "class": langdetect == 'en' ? 'mr-2' : 'ml-2'
+  }), langdetect == 'en' ? sectionproperties.previousorders_titleen : sectionproperties.previousorders_titlear))), (authdetailsContext === null || authdetailsContext === void 0 || (_authdetailsContext$i0 = authdetailsContext.instinfo) === null || _authdetailsContext$i0 === void 0 ? void 0 : _authdetailsContext$i0.instid) == '68248846ec6bc' && /*#__PURE__*/React__default["default"].createElement(Dropdown__default["default"].Divider, null), (authdetailsContext === null || authdetailsContext === void 0 || (_authdetailsContext$i1 = authdetailsContext.instinfo) === null || _authdetailsContext$i1 === void 0 ? void 0 : _authdetailsContext$i1.instid) == '68248846ec6bc' && /*#__PURE__*/React__default["default"].createElement(Dropdown__default["default"].Item, {
+    onClick: function onClick() {
+      routingcountext(StaticPagesLinksContext.Ordershistory);
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    "class": "".concat(header_cssstyles.dropdownitemcontainer) + ' allcenetered m-0 p-0 '
+  }, /*#__PURE__*/React__default["default"].createElement("p", {
+    "class": "".concat(header_cssstyles.dropdownitem) + ' dropdownitem allcenetered m-0 p-0 '
+  }, sectionproperties.carticonstyle == 'Shopping bag 1' && /*#__PURE__*/React__default["default"].createElement(FiShoppingBag.FiShoppingBag, {
+    "class": langdetect == 'en' ? 'mr-2' : 'ml-2'
+  }), sectionproperties.carticonstyle == 'Shopping bag 2' && /*#__PURE__*/React__default["default"].createElement(CgShoppingBag.CgShoppingBag, {
+    "class": langdetect == 'en' ? 'mr-2' : 'ml-2'
+  }), sectionproperties.carticonstyle == 'Shopping bag 3' && /*#__PURE__*/React__default["default"].createElement(BsBag.BsBag, {
+    "class": langdetect == 'en' ? 'mr-2' : 'ml-2'
+  }), sectionproperties.carticonstyle == 'Shopping bag 4' && /*#__PURE__*/React__default["default"].createElement(HiOutlineShoppingBag.HiOutlineShoppingBag, {
+    "class": langdetect == 'en' ? 'mr-2' : 'ml-2'
+  }), sectionproperties.carticonstyle == 'Shopping cart 1' && /*#__PURE__*/React__default["default"].createElement(FiShoppingCart.FiShoppingCart, {
+    "class": langdetect == 'en' ? 'mr-2' : 'ml-2'
+  }), sectionproperties.carticonstyle == 'Shopping cart 2' && /*#__PURE__*/React__default["default"].createElement(MdAddShoppingCart.MdAddShoppingCart, {
+    "class": langdetect == 'en' ? 'mr-2' : 'ml-2'
+  }), sectionproperties.carticonstyle == 'Calendar 1' && /*#__PURE__*/React__default["default"].createElement(FiCalendar.FiCalendar, {
+    "class": langdetect == 'en' ? 'mr-2' : 'ml-2'
   }), langdetect == 'en' ? sectionproperties.previousorders_titleen : sectionproperties.previousorders_titlear))), sectionproperties.favBtnShow == 'Show' && /*#__PURE__*/React__default["default"].createElement(Dropdown__default["default"].Divider, null), sectionproperties.favBtnShow == 'Show' && /*#__PURE__*/React__default["default"].createElement(Dropdown__default["default"].Item, {
     onClick: function onClick() {
       routingcountext(StaticPagesLinksContext.Wishlist);
@@ -34431,7 +34576,7 @@ var Simpleheader = function Simpleheader(props) {
     "class": "".concat(header_cssstyles.dropdownitem) + ' dropdownitem d-flex align-items-center m-0 p-0 '
   }, /*#__PURE__*/React__default["default"].createElement("span", {
     "class": "ml-2 mr-2"
-  }, "English"))))))), authdetailsContext != undefined && (authdetailsContext === null || authdetailsContext === void 0 || (_authdetailsContext$i8 = authdetailsContext.instinfo) === null || _authdetailsContext$i8 === void 0 || (_authdetailsContext$i8 = _authdetailsContext$i8.instcurrencies) === null || _authdetailsContext$i8 === void 0 ? void 0 : _authdetailsContext$i8.length) > 1 && sectionproperties.showcurrency == 'Show' && /*#__PURE__*/React__default["default"].createElement("div", {
+  }, "English"))))))), authdetailsContext != undefined && (authdetailsContext === null || authdetailsContext === void 0 || (_authdetailsContext$i10 = authdetailsContext.instinfo) === null || _authdetailsContext$i10 === void 0 || (_authdetailsContext$i10 = _authdetailsContext$i10.instcurrencies) === null || _authdetailsContext$i10 === void 0 ? void 0 : _authdetailsContext$i10.length) > 1 && sectionproperties.showcurrency == 'Show' && /*#__PURE__*/React__default["default"].createElement("div", {
     "class": ' d-flex align-items-center justify-content-end '
   }, /*#__PURE__*/React__default["default"].createElement(Dropdown__default["default"], null, /*#__PURE__*/React__default["default"].createElement(Dropdown__default["default"].Toggle, null, /*#__PURE__*/React__default["default"].createElement("li", {
     "class": ' d-flex align-items-center justify-content-center '
@@ -34443,8 +34588,8 @@ var Simpleheader = function Simpleheader(props) {
     "class": header_cssstyles.currencycont + ' row m-0 w-100 d-flex align-items-center '
   }, /*#__PURE__*/React__default["default"].createElement("p", {
     "class": "m-0 p-0 ml-2 mr-2"
-  }, authdetailsContext === null || authdetailsContext === void 0 ? void 0 : authdetailsContext.currencyname_ar), /*#__PURE__*/React__default["default"].createElement(MdKeyboardArrowDown.MdKeyboardArrowDown, null)))), /*#__PURE__*/React__default["default"].createElement(Dropdown__default["default"].Menu, null, authdetailsContext === null || authdetailsContext === void 0 || (_authdetailsContext$i9 = authdetailsContext.instinfo) === null || _authdetailsContext$i9 === void 0 || (_authdetailsContext$i9 = _authdetailsContext$i9.instcurrencies) === null || _authdetailsContext$i9 === void 0 ? void 0 : _authdetailsContext$i9.map(function (item, index) {
-    var _authdetailsContext$i0;
+  }, authdetailsContext === null || authdetailsContext === void 0 ? void 0 : authdetailsContext.currencyname_ar), /*#__PURE__*/React__default["default"].createElement(MdKeyboardArrowDown.MdKeyboardArrowDown, null)))), /*#__PURE__*/React__default["default"].createElement(Dropdown__default["default"].Menu, null, authdetailsContext === null || authdetailsContext === void 0 || (_authdetailsContext$i11 = authdetailsContext.instinfo) === null || _authdetailsContext$i11 === void 0 || (_authdetailsContext$i11 = _authdetailsContext$i11.instcurrencies) === null || _authdetailsContext$i11 === void 0 ? void 0 : _authdetailsContext$i11.map(function (item, index) {
+    var _authdetailsContext$i12;
     return /*#__PURE__*/React__default["default"].createElement(Dropdown__default["default"].Item, {
       onClick: function onClick() {
         setcurrencyfunccontext(item);
@@ -34460,7 +34605,7 @@ var Simpleheader = function Simpleheader(props) {
       style: {}
     }, /*#__PURE__*/React__default["default"].createElement(FaMoneyBillWave.FaMoneyBillWave, null), /*#__PURE__*/React__default["default"].createElement("span", {
       "class": 'ml-2 mr-2'
-    }, langdetect == 'en' ? item.currencyname_en : item.currencyname_ar)))), index != (authdetailsContext === null || authdetailsContext === void 0 || (_authdetailsContext$i0 = authdetailsContext.instinfo) === null || _authdetailsContext$i0 === void 0 || (_authdetailsContext$i0 = _authdetailsContext$i0.instcurrencies) === null || _authdetailsContext$i0 === void 0 ? void 0 : _authdetailsContext$i0.length) - 1 && /*#__PURE__*/React__default["default"].createElement("div", {
+    }, langdetect == 'en' ? item.currencyname_en : item.currencyname_ar)))), index != (authdetailsContext === null || authdetailsContext === void 0 || (_authdetailsContext$i12 = authdetailsContext.instinfo) === null || _authdetailsContext$i12 === void 0 || (_authdetailsContext$i12 = _authdetailsContext$i12.instcurrencies) === null || _authdetailsContext$i12 === void 0 ? void 0 : _authdetailsContext$i12.length) - 1 && /*#__PURE__*/React__default["default"].createElement("div", {
       "class": "col-lg-12 p-0"
     }, /*#__PURE__*/React__default["default"].createElement("hr", {
       "class": "m-0"
@@ -86096,59 +86241,94 @@ var Variants_J_Cards = function Variants_J_Cards(props) {
     "class": ' row m-0 w-100 '
   }, options_w_values === null || options_w_values === void 0 ? void 0 : options_w_values.map(function (item, index) {
     var _item$values5, _item$values6, _item$values7;
-    return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "col-lg-12 col-md-12 d-flex mb-2 allcentered scrollhorixontalcontainer p-sm-0"
-    }, item === null || item === void 0 || (_item$values5 = item.values) === null || _item$values5 === void 0 ? void 0 : _item$values5.map(function (valitem, valindex) {
-      var isChoosedValueExists = false;
-      choosen_values === null || choosen_values === void 0 || choosen_values.forEach(function (choseitem, choseindex) {
-        if (choseitem != null) {
-          if ((choseitem === null || choseitem === void 0 ? void 0 : choseitem.valueid) == (valitem === null || valitem === void 0 ? void 0 : valitem.valueid)) {
-            isChoosedValueExists = true;
+    return (
+      /*#__PURE__*/
+      // scrollhorixontalcontainer
+      React__default["default"].createElement("div", {
+        className: "col-lg-12 col-md-12 d-flex mb-2 allcentered  p-sm-0"
+      }, item === null || item === void 0 || (_item$values5 = item.values) === null || _item$values5 === void 0 ? void 0 : _item$values5.map(function (valitem, valindex) {
+        var isChoosedValueExists = false;
+        choosen_values === null || choosen_values === void 0 || choosen_values.forEach(function (choseitem, choseindex) {
+          if (choseitem != null) {
+            if ((choseitem === null || choseitem === void 0 ? void 0 : choseitem.valueid) == (valitem === null || valitem === void 0 ? void 0 : valitem.valueid)) {
+              isChoosedValueExists = true;
+            }
+          }
+        });
+        if (valindex <= 3) {
+          if (sectionproperties.typeofvariantstobeshownincard == 'Show Colors Only') {
+            var _item$option_info5, _item$option_info6, _item$option_info7, _item$option_info8;
+            if ((item === null || item === void 0 || (_item$option_info5 = item.option_info) === null || _item$option_info5 === void 0 ? void 0 : _item$option_info5.optionname) == 'Color' || (item === null || item === void 0 || (_item$option_info6 = item.option_info) === null || _item$option_info6 === void 0 ? void 0 : _item$option_info6.optionname) == 'Colour' || (item === null || item === void 0 || (_item$option_info7 = item.option_info) === null || _item$option_info7 === void 0 ? void 0 : _item$option_info7.optionname) == 'color' || (item === null || item === void 0 || (_item$option_info8 = item.option_info) === null || _item$option_info8 === void 0 ? void 0 : _item$option_info8.optionname) == 'colour') {
+              var _item$option_info9, _item$option_info0, _item$option_info1, _item$option_info10, _item$option_info11, _valitem$valueinfo, _item$option_info12, _valitem$valueinfo2;
+              return /*#__PURE__*/React__default["default"].createElement("div", {
+                style: {
+                  textAlign: 'center'
+                },
+                "class": "mx-1"
+              }, /*#__PURE__*/React__default["default"].createElement("button", {
+                onClick: function onClick() {
+                  choose_valueFunc(valitem, item === null || item === void 0 ? void 0 : item.option_info);
+                },
+                style: {
+                  // backgroundColor: isChoosedValueExists ? 'lightblue' : 'white',
+                  color: isChoosedValueExists ? '#ffffff' : '#000000',
+                  border: isChoosedValueExists ? '3px solid ' + sectionproperties.activeproductcolor : '1px solid ' + sectionproperties.variantcontainerbordercolor,
+                  padding: (item === null || item === void 0 || (_item$option_info9 = item.option_info) === null || _item$option_info9 === void 0 ? void 0 : _item$option_info9.optionname) == 'Color' ? '5px' : '5px 10px',
+                  cursor: valitem.disabled ? 'not-allowed' : 'pointer',
+                  fontSize: '13px',
+                  width: (item === null || item === void 0 || (_item$option_info0 = item.option_info) === null || _item$option_info0 === void 0 ? void 0 : _item$option_info0.optionname) == 'Color' ? 25 : '',
+                  height: (item === null || item === void 0 || (_item$option_info1 = item.option_info) === null || _item$option_info1 === void 0 ? void 0 : _item$option_info1.optionname) == 'Color' ? 25 : '',
+                  borderRadius: (item === null || item === void 0 || (_item$option_info10 = item.option_info) === null || _item$option_info10 === void 0 ? void 0 : _item$option_info10.optionname) == 'Color' ? 100 : 5,
+                  background: (item === null || item === void 0 || (_item$option_info11 = item.option_info) === null || _item$option_info11 === void 0 ? void 0 : _item$option_info11.optionname) == 'Color' ? valitem === null || valitem === void 0 || (_valitem$valueinfo = valitem.valueinfo) === null || _valitem$valueinfo === void 0 ? void 0 : _valitem$valueinfo.valuename : isChoosedValueExists ? sectionproperties.activeproductcolor : '#ffffff',
+                  fontWeight: 500
+                },
+                disabled: valitem.disabled
+              }, (item === null || item === void 0 || (_item$option_info12 = item.option_info) === null || _item$option_info12 === void 0 ? void 0 : _item$option_info12.optionname) == 'Color' ? '' : (valitem === null || valitem === void 0 || (_valitem$valueinfo2 = valitem.valueinfo) === null || _valitem$valueinfo2 === void 0 ? void 0 : _valitem$valueinfo2.valuename) || 'Unnamed'));
+            }
+          } else {
+            var _item$option_info13, _item$option_info14, _item$option_info15, _item$option_info16, _item$option_info17, _valitem$valueinfo3, _item$option_info18, _valitem$valueinfo4;
+            return /*#__PURE__*/React__default["default"].createElement("div", {
+              style: {
+                textAlign: 'center'
+              },
+              "class": "mx-1"
+            }, item.optionname, /*#__PURE__*/React__default["default"].createElement("button", {
+              onClick: function onClick() {
+                choose_valueFunc(valitem, item === null || item === void 0 ? void 0 : item.option_info);
+              },
+              style: {
+                // backgroundColor: isChoosedValueExists ? 'lightblue' : 'white',
+                color: isChoosedValueExists ? '#ffffff' : '#000000',
+                border: isChoosedValueExists ? '3px solid ' + sectionproperties.activeproductcolor : '1px solid ' + sectionproperties.variantcontainerbordercolor,
+                padding: (item === null || item === void 0 || (_item$option_info13 = item.option_info) === null || _item$option_info13 === void 0 ? void 0 : _item$option_info13.optionname) == 'Color' ? '5px' : '5px 10px',
+                cursor: valitem.disabled ? 'not-allowed' : 'pointer',
+                fontSize: '13px',
+                width: (item === null || item === void 0 || (_item$option_info14 = item.option_info) === null || _item$option_info14 === void 0 ? void 0 : _item$option_info14.optionname) == 'Color' ? 25 : '',
+                height: (item === null || item === void 0 || (_item$option_info15 = item.option_info) === null || _item$option_info15 === void 0 ? void 0 : _item$option_info15.optionname) == 'Color' ? 25 : '',
+                borderRadius: (item === null || item === void 0 || (_item$option_info16 = item.option_info) === null || _item$option_info16 === void 0 ? void 0 : _item$option_info16.optionname) == 'Color' ? 100 : 5,
+                background: (item === null || item === void 0 || (_item$option_info17 = item.option_info) === null || _item$option_info17 === void 0 ? void 0 : _item$option_info17.optionname) == 'Color' ? valitem === null || valitem === void 0 || (_valitem$valueinfo3 = valitem.valueinfo) === null || _valitem$valueinfo3 === void 0 ? void 0 : _valitem$valueinfo3.valuename : isChoosedValueExists ? sectionproperties.activeproductcolor : '#ffffff',
+                fontWeight: 500
+              },
+              disabled: valitem.disabled
+            }, (item === null || item === void 0 || (_item$option_info18 = item.option_info) === null || _item$option_info18 === void 0 ? void 0 : _item$option_info18.optionname) == 'Color' ? '' : (valitem === null || valitem === void 0 || (_valitem$valueinfo4 = valitem.valueinfo) === null || _valitem$valueinfo4 === void 0 ? void 0 : _valitem$valueinfo4.valuename) || 'Unnamed'));
           }
         }
-      });
-      if (valindex <= 3) {
-        var _item$option_info5, _item$option_info6, _item$option_info7, _item$option_info8, _item$option_info9, _valitem$valueinfo, _item$option_info0, _valitem$valueinfo2;
-        return /*#__PURE__*/React__default["default"].createElement("div", {
-          style: {
-            textAlign: 'center'
-          },
-          "class": "mx-1"
-        }, /*#__PURE__*/React__default["default"].createElement("button", {
-          onClick: function onClick() {
-            choose_valueFunc(valitem, item === null || item === void 0 ? void 0 : item.option_info);
-          },
-          style: {
-            // backgroundColor: isChoosedValueExists ? 'lightblue' : 'white',
-            color: isChoosedValueExists ? '#ffffff' : '#000000',
-            border: isChoosedValueExists ? '3px solid ' + sectionproperties.activeproductcolor : '1px solid ' + sectionproperties.variantcontainerbordercolor,
-            padding: (item === null || item === void 0 || (_item$option_info5 = item.option_info) === null || _item$option_info5 === void 0 ? void 0 : _item$option_info5.optionname) == 'Color' ? '5px' : '5px 10px',
-            cursor: valitem.disabled ? 'not-allowed' : 'pointer',
-            fontSize: '13px',
-            width: (item === null || item === void 0 || (_item$option_info6 = item.option_info) === null || _item$option_info6 === void 0 ? void 0 : _item$option_info6.optionname) == 'Color' ? 25 : '',
-            height: (item === null || item === void 0 || (_item$option_info7 = item.option_info) === null || _item$option_info7 === void 0 ? void 0 : _item$option_info7.optionname) == 'Color' ? 25 : '',
-            borderRadius: (item === null || item === void 0 || (_item$option_info8 = item.option_info) === null || _item$option_info8 === void 0 ? void 0 : _item$option_info8.optionname) == 'Color' ? 100 : 5,
-            background: (item === null || item === void 0 || (_item$option_info9 = item.option_info) === null || _item$option_info9 === void 0 ? void 0 : _item$option_info9.optionname) == 'Color' ? valitem === null || valitem === void 0 || (_valitem$valueinfo = valitem.valueinfo) === null || _valitem$valueinfo === void 0 ? void 0 : _valitem$valueinfo.valuename : isChoosedValueExists ? sectionproperties.activeproductcolor : '#ffffff',
-            fontWeight: 500
-          },
-          disabled: valitem.disabled
-        }, (item === null || item === void 0 || (_item$option_info0 = item.option_info) === null || _item$option_info0 === void 0 ? void 0 : _item$option_info0.optionname) == 'Color' ? '' : (valitem === null || valitem === void 0 || (_valitem$valueinfo2 = valitem.valueinfo) === null || _valitem$valueinfo2 === void 0 ? void 0 : _valitem$valueinfo2.valuename) || 'Unnamed'));
-      }
-    }), (item === null || item === void 0 || (_item$values6 = item.values) === null || _item$values6 === void 0 ? void 0 : _item$values6.length) > 4 && /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "mx-1 d-flex align-items-center justify-content-center",
-      style: {
-        width: 25,
-        height: 25,
-        borderRadius: 100,
-        backgroundColor: sectionproperties.activeproductcolor,
-        color: '#fff',
-        fontSize: '13px',
-        cursor: 'pointer'
-      },
-      onClick: function onClick() {
-        cardonclickfunctionContext(sectionproperties === null || sectionproperties === void 0 ? void 0 : sectionproperties.onClickRoute, props.actions.item.productid, props.actions.fetchingtypeprops, null);
-      }
-    }, "+", (item === null || item === void 0 || (_item$values7 = item.values) === null || _item$values7 === void 0 ? void 0 : _item$values7.length) - 4));
+      }), (item === null || item === void 0 || (_item$values6 = item.values) === null || _item$values6 === void 0 ? void 0 : _item$values6.length) > 4 && /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "mx-1 d-flex align-items-center justify-content-center",
+        style: {
+          width: 25,
+          height: 25,
+          borderRadius: 100,
+          backgroundColor: sectionproperties.activeproductcolor,
+          color: '#fff',
+          fontSize: '13px',
+          cursor: 'pointer'
+        },
+        onClick: function onClick() {
+          cardonclickfunctionContext(sectionproperties === null || sectionproperties === void 0 ? void 0 : sectionproperties.onClickRoute, props.actions.item.productid, props.actions.fetchingtypeprops, null);
+        }
+      }, "+", (item === null || item === void 0 || (_item$values7 = item.values) === null || _item$values7 === void 0 ? void 0 : _item$values7.length) - 4))
+    );
   })));
 };