tabexseriescomponents 0.0.836 → 0.0.837

package/dist/index.cjs.js

@@ -20078,7 +20078,7 @@ var CardsSection = function CardsSection(props) {
               } else if (item.tabexsectioninfo.sectioncompname == 'Classiccategorycard') {
                 bootstapclass = ' col-xl-12 p-0 col-lg-12 col-md-4 d-flex justify-content-center p-0 col-sm-' + sectionproperties.numberOfColsverticalresp;
               } else if (item.tabexsectioninfo.sectioncompname == 'Horizontalcard') {
-                bootstapclass = ' col-xl-12 p-0 col-lg-12 col-md-4 d-flex justify-content-center p-0 col-sm-' + sectionproperties.numberOfColsverticalresp;
+                bootstapclass = ' col-xl-12 p-0 col-lg-12 col-md-6 d-flex justify-content-center p-0 col-sm-' + sectionproperties.numberOfColsverticalresp;
               } else {
                 bootstapclass = ' col-xl-12 p-0 col-lg-12 col-md-6 col-sm-12 d-flex justify-content-center p-0 ';
               }
@@ -20112,7 +20112,7 @@ var CardsSection = function CardsSection(props) {
               } else if (item.tabexsectioninfo.sectioncompname == 'Classiccategorycard') {
                 bootstapclass = ' col-xl-6 p-0 col-lg-6 col-md-4 d-flex justify-content-center p-0 col-sm-' + sectionproperties.numberOfColsverticalresp;
               } else if (item.tabexsectioninfo.sectioncompname == 'Horizontalcard') {
-                bootstapclass = ' col-xl-6 p-0 col-lg-6 col-md-4 d-flex justify-content-center p-0 col-sm-' + sectionproperties.numberOfColsverticalresp;
+                bootstapclass = ' col-xl-6 p-0 col-lg-6 col-md-6 d-flex justify-content-center p-0 col-sm-' + sectionproperties.numberOfColsverticalresp;
               } else {
                 bootstapclass = ' col-xl-6 p-0 col-lg-6 col-md-6 d-flex justify-content-center p-0 col-sm-' + sectionproperties.numberOfColsverticalresp;
               }
@@ -20146,7 +20146,7 @@ var CardsSection = function CardsSection(props) {
               } else if (item.tabexsectioninfo.sectioncompname == 'Classiccategorycard') {
                 bootstapclass = ' col-xl-4 p-0 col-lg-4 col-md-4 d-flex justify-content-center p-0 col-sm-' + sectionproperties.numberOfColsverticalresp;
               } else if (item.tabexsectioninfo.sectioncompname == 'Horizontalcard') {
-                bootstapclass = ' col-xl-4 p-0 col-lg-4 col-md-4 d-flex justify-content-center p-0 col-sm-' + sectionproperties.numberOfColsverticalresp;
+                bootstapclass = ' col-xl-4 p-0 col-lg-4 col-md-6 d-flex justify-content-center p-0 col-sm-' + sectionproperties.numberOfColsverticalresp;
               } else {
                 bootstapclass = ' col-xl-4 col-lg-4 col-md-6 d-flex justify-content-center p-0 col-sm-' + sectionproperties.numberOfColsverticalresp;
               }
@@ -20178,7 +20178,7 @@ var CardsSection = function CardsSection(props) {
               } else if (item.tabexsectioninfo.sectioncompname == 'Classiccategorycard') {
                 bootstapclass = ' col-xl-3 p-0 col-lg-3 col-md-4 d-flex justify-content-center p-0 col-sm-' + sectionproperties.numberOfColsverticalresp;
               } else if (item.tabexsectioninfo.sectioncompname == 'Horizontalcard') {
-                bootstapclass = ' col-xl-3 p-0 col-lg-3 col-md-4 d-flex justify-content-center p-0 col-sm-' + sectionproperties.numberOfColsverticalresp;
+                bootstapclass = ' col-xl-3 p-0 col-lg-3 col-md-6 d-flex justify-content-center p-0 col-sm-' + sectionproperties.numberOfColsverticalresp;
               } else {
                 bootstapclass = ' col-xl-3 col-lg-4 col-md-4 p-0 d-flex justify-content-center p-0 col-sm-' + sectionproperties.numberOfColsverticalresp;
               }
@@ -20209,7 +20209,7 @@ var CardsSection = function CardsSection(props) {
               } else if (item.tabexsectioninfo.sectioncompname == 'Categorycard_fullimage') {
                 bootstapclass = ' col-xl-3 p-0 col-lg-3 col-md-4 col-sm-12 d-flex justify-content-center p-0 ';
               } else if (item.tabexsectioninfo.sectioncompname == 'Horizontalcard') {
-                bootstapclass = ' col-xl-3 p-0 col-lg-3 col-md-4 d-flex justify-content-center p-0 col-sm-' + sectionproperties.numberOfColsverticalresp;
+                bootstapclass = ' col-xl-3 p-0 col-lg-3 col-md-6 d-flex justify-content-center p-0 col-sm-' + sectionproperties.numberOfColsverticalresp;
               } else {
                 bootstapclass = ' col-xl-3 p-0 col-lg-3 col-md-4 d-flex justify-content-center p-0 col-sm-' + sectionproperties.numberOfColsverticalresp;
               }
@@ -20243,7 +20243,7 @@ var CardsSection = function CardsSection(props) {
               } else if (item.tabexsectioninfo.sectioncompname == 'Classiccategorycard') {
                 bootstapclass = ' col-xl-2 p-0 col-lg-3 col-md-4 d-flex justify-content-center p-0 col-sm-' + sectionproperties.numberOfColsverticalresp;
               } else if (item.tabexsectioninfo.sectioncompname == 'Horizontalcard') {
-                bootstapclass = ' col-xl-2 p-0 col-lg-3 col-md-4 d-flex justify-content-center p-0 col-sm-' + sectionproperties.numberOfColsverticalresp;
+                bootstapclass = ' col-xl-2 p-0 col-lg-3 col-md-6 d-flex justify-content-center p-0 col-sm-' + sectionproperties.numberOfColsverticalresp;
               } else {
                 bootstapclass = ' col-xl-2 col-lg-2 col-md-6 d-flex justify-content-center p-0 col-sm-' + sectionproperties.numberOfColsverticalresp;
               }
@@ -62306,22 +62306,23 @@ var PopupCountryComponent = function PopupCountryComponent(props) {
   //     let returningUser = localStorage.getItem('seenPopUp');
   //     setshowpopup(!returningUser);
   // }, []);
-  var _useState7 = React.useState(false),
-    _useState8 = _slicedToArray__default["default"](_useState7, 2);
-    _useState8[0];
-    var setModalVisible = _useState8[1];
-  React.useEffect(function () {
-    // Check if the modal has been shown in the current session
-    var hasModalBeenShown = sessionStorage.getItem('modalShown');
-    if (!hasModalBeenShown) {
-      setModalVisible(true);
-      // Set the flag in sessionStorage
-      sessionStorage.setItem('modalShown', 'true');
-    }
-  }, []);
-  var closePopUp = function closePopUp() {
-    setModalVisible(false);
-  };
+  // const [isModalVisible, setModalVisible] = useState(false);
+
+  // useEffect(() => {
+  //     // Check if the modal has been shown in the current session
+  //     const hasModalBeenShown = sessionStorage.getItem('modalShown');
+
+  //     if (!hasModalBeenShown) {
+  //         setModalVisible(true);
+  //         // Set the flag in sessionStorage
+  //         sessionStorage.setItem('modalShown', 'true');
+  //     }
+  // }, []);
+
+  // const closePopUp = () => {
+  //     setModalVisible(false);
+  // };
+
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "row ml-0 mr-0 w-100"
   }, /*#__PURE__*/React__default["default"].createElement(reactBootstrap.Modal, {
@@ -62332,7 +62333,11 @@ var PopupCountryComponent = function PopupCountryComponent(props) {
     centered: true,
     size: 'md'
   }, /*#__PURE__*/React__default["default"].createElement(reactBootstrap.Modal.Body, null, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "row w-100 m-0"
+    className: "row w-100 m-0",
+    style: {
+      minHeight: '20vh',
+      position: 'relative'
+    }
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "allcentered bgdanger-hover cursor-pointer",
     onClick: function onClick() {
@@ -62355,35 +62360,12 @@ var PopupCountryComponent = function PopupCountryComponent(props) {
   }))), /*#__PURE__*/React__default["default"].createElement("div", {
     "class": "col-lg-12 mb-2"
   }, "Country/Region"), /*#__PURE__*/React__default["default"].createElement("div", {
-    "class": "custom-select",
-    style: "width:200px;"
-  }, /*#__PURE__*/React__default["default"].createElement("select", null, /*#__PURE__*/React__default["default"].createElement("option", {
-    value: "0"
-  }, "Country Name/Currency"), /*#__PURE__*/React__default["default"].createElement("option", {
-    value: "1"
-  }, "Audi"), /*#__PURE__*/React__default["default"].createElement("option", {
-    value: "2"
-  }, "BMW"), /*#__PURE__*/React__default["default"].createElement("option", {
-    value: "3"
-  }, "Citroen"), /*#__PURE__*/React__default["default"].createElement("option", {
-    value: "4"
-  }, "Ford"), /*#__PURE__*/React__default["default"].createElement("option", {
-    value: "5"
-  }, "Honda"), /*#__PURE__*/React__default["default"].createElement("option", {
-    value: "6"
-  }, "Jaguar"), /*#__PURE__*/React__default["default"].createElement("option", {
-    value: "7"
-  }, "Land Rover"), /*#__PURE__*/React__default["default"].createElement("option", {
-    value: "8"
-  }, "Mercedes"), /*#__PURE__*/React__default["default"].createElement("option", {
-    value: "9"
-  }, "Mini"), /*#__PURE__*/React__default["default"].createElement("option", {
-    value: "10"
-  }, "Nissan"), /*#__PURE__*/React__default["default"].createElement("option", {
-    value: "11"
-  }, "Toyota"), /*#__PURE__*/React__default["default"].createElement("option", {
-    value: "12"
-  }, "Volvo"))))), /*#__PURE__*/React__default["default"].createElement(reactBootstrap.Modal.Footer, null)));
+    "class": "col-lg-12"
+  }, /*#__PURE__*/React__default["default"].createElement("select", {
+    style: {
+      width: '100%'
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("option", null, "Egypt/EGP"))))), /*#__PURE__*/React__default["default"].createElement(reactBootstrap.Modal.Footer, null)));
 };
 
 function ownKeys$13(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; }
@@ -67310,7 +67292,8 @@ var ServicesectionCenteredcards = function ServicesectionCenteredcards(props) {
       justifyContent: sectionproperties.descriptionCentered == 'Centered' ? 'center' : 'start',
       marginBottom: sectionproperties.descriptionMarginBottom + 'px',
       paddingLeft: langdetect == 'en' ? sectionproperties.description_marginLeft + 'px' : sectionproperties.description_marginRight + 'px',
-      paddingRight: langdetect == 'en' ? sectionproperties.description_marginRight + 'px' : sectionproperties.description_marginLeft + 'px'
+      paddingRight: langdetect == 'en' ? sectionproperties.description_marginRight + 'px' : sectionproperties.description_marginLeft + 'px',
+      zIndex: 1
     }
   }, /*#__PURE__*/React__default["default"].createElement("p", {
     "class": sectionproperties.descFontFamily == 'Pacifico' ? sectionStyles.descriptioncont + ' PacificoFont m-0 p-0 wordbreak ' : sectionproperties.descFontFamily == 'Playfair' ? sectionStyles.descriptioncont + ' PlayfairFont m-0 p-0 wordbreak ' : sectionproperties.descFontFamily == 'Great Vibes' ? sectionStyles.descriptioncont + ' GreatvibesFont m-0 p-0 wordbreak ' : sectionproperties.descFontFamily == 'Quicksand' ? sectionStyles.descriptioncont + ' QuicksandFont m-0 p-0 wordbreak' : sectionStyles.descriptioncont + ' m-0 p-0 wordbreak',
@@ -77491,10 +77474,17 @@ var Horizontalcard = function Horizontalcard(props) {
   props.actions.routingcountext;
   props.actions.StaticPagesLinksContext;
   var addtofavoritescontext = props.actions.addtofavoritescontext;
-  var setShowProductInfoModalContext = props.actions.setShowProductInfoModalContext;
-  var setProductIdProdutInfoModalContext = props.actions.setProductIdProdutInfoModalContext;
+  props.actions.setShowProductInfoModalContext;
+  props.actions.setProductIdProdutInfoModalContext;
   var cardonclickfunctionContext = props.actions.cardonclickfunctionContext;
   var ikimagecredcontext = props.actions.ikimagecredcontext;
+  var NotificationManager = props.actions.NotificationManager;
+  var _useState5 = React.useState(false),
+    _useState6 = _slicedToArray__default["default"](_useState5, 2),
+    showquantity = _useState6[0],
+    setshowquantity = _useState6[1];
+  var AddtoCartContext = props.actions.AddtoCartContext;
+  var AddtoCartMutationContext = props.actions.AddtoCartMutationContext;
   var plainString = function plainString(html) {
     var divContainer = document.createElement('div');
     divContainer.innerHTML = html;
@@ -77621,8 +77611,122 @@ var Horizontalcard = function Horizontalcard(props) {
       '@media (max-width: 800px)': {
         height: sectionproperties.height_responsive + 'px'
       }
+    }),
+    quantitybtn: glamor.css(_defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"]({
+      // height: sectionproperties.quantitybtn_height + 'px',
+      // width: sectionproperties.quantitybtn_width + 'px',
+      width: sectionproperties.cartBtnWidth == 0 ? 'auto' : sectionproperties.cartBtnWidth + 'px',
+      height: sectionproperties.cartBtnHeight == 0 ? 'auto' : sectionproperties.cartBtnHeight + 'px',
+      display: 'flex',
+      flexDirection: 'row',
+      overflow: 'hidden',
+      // borderRadius: sectionproperties.quantitybtn_borderradius + 'px',
+      // background: sectionproperties.quantitybtn_bgcolor,
+      borderRadius: sectionproperties.cart_btn_borderBottomLeftRadius + 'px',
+      color: sectionproperties.cartBtnTextcolor,
+      alignItems: 'center',
+      justifyContent: 'center',
+      margin: 0,
+      position: 'relative',
+      fontWeight: sectionproperties.quantitybtn_textfontweight
+    }, "color", sectionproperties.quantitybtn_textcolor), "fontSize", sectionproperties.quantitybtn_textfontsize + 'px'), "border", '1px solid ' + sectionproperties.cartBtnbgColor), "zIndex", 100)),
+    quantitybtn_text: glamor.css({
+      margin: 'auto'
+    }),
+    add_quantitybtn_icon_container: glamor.css({
+      position: 'relative',
+      width: '40px',
+      height: '40px',
+      // background: sectionproperties.add_quantitybtn_bgcolor,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      // borderTopLeftRadius: langdetect == 'en' ? sectionproperties.add_quantitybtn_leftborderradius + 'px' : sectionproperties.add_quantitybtn_rightborderradius + 'px',
+      // borderBottomLeftRadius: langdetect == 'en' ? sectionproperties.add_quantitybtn_leftborderradius + 'px' : sectionproperties.add_quantitybtn_rightborderradius + 'px',
+      // borderTopRightRadius: langdetect == 'en' ? sectionproperties.add_quantitybtn_rightborderradius + 'px' : sectionproperties.add_quantitybtn_leftborderradius + 'px',
+      // borderBottomRightRadius: langdetect == 'en' ? sectionproperties.add_quantitybtn_rightborderradius + 'px' : sectionproperties.add_quantitybtn_leftborderradius + 'px',
+      fontSize: '14px',
+      color: sectionproperties.cartBtnbgColor,
+      transition: '.3s',
+      ':hover': {
+        color: sectionproperties.cartBtnbgColor
+        // background: sectionproperties.add_quantitybtn_bgcoloronhover,
+      },
+      ':hover .addbtn': {
+        color: sectionproperties.cartBtnbgColor,
+        transition: '.3s'
+      }
+    }),
+    minus_quantitybtn_icon_container: glamor.css({
+      position: 'relative',
+      width: '40px',
+      height: '40px',
+      // background: sectionproperties.add_quantitybtn_bgcolor,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      // borderTopLeftRadius: langdetect == 'en' ? sectionproperties.add_quantitybtn_leftborderradius + 'px' : sectionproperties.add_quantitybtn_rightborderradius + 'px',
+      // borderBottomLeftRadius: langdetect == 'en' ? sectionproperties.add_quantitybtn_leftborderradius + 'px' : sectionproperties.add_quantitybtn_rightborderradius + 'px',
+      // borderTopRightRadius: langdetect == 'en' ? sectionproperties.add_quantitybtn_rightborderradius + 'px' : sectionproperties.add_quantitybtn_leftborderradius + 'px',
+      // borderBottomRightRadius: langdetect == 'en' ? sectionproperties.add_quantitybtn_rightborderradius + 'px' : sectionproperties.add_quantitybtn_leftborderradius + 'px',
+      fontSize: '14px',
+      color: sectionproperties.cartBtnbgColor,
+      transition: '.3s',
+      ':hover': {
+        color: sectionproperties.cartBtnbgColor
+        // background: sectionproperties.add_quantitybtn_bgcoloronhover,
+      },
+      ':hover .minusbtn': {
+        color: sectionproperties.cartBtnbgColor,
+        transition: '.3s'
+      }
     })
   };
+  var addtocartfunc = function addtocartfunc(type, quantity) {
+    var addtocardpayloadobj = {
+      functype: 'add',
+      productid: item.productid,
+      variantid: '',
+      quantity: quantity
+    };
+    var runfunc = false;
+    if (addtocardpayloadobj.productid.length != 0 && addtocardpayloadobj.quantity > 0) {
+      if (item.hasvariants == 1) {
+        if (addtocardpayloadobj.variantid.length != 0) {
+          runfunc = true;
+        } else {
+          NotificationManager.warning('', langdetect == 'en' ? 'Please Choose Product Options' : 'من فضلك اختر متغير');
+        }
+      } else {
+        runfunc = true;
+      }
+    } else {
+      NotificationManager.warning('', langdetect == 'en' ? 'Please Choose Quantity' : 'من فضلك اختر الكمية');
+    }
+    if (runfunc == true) {
+      AddtoCartContext(addtocardpayloadobj);
+    }
+  };
+  var addtocartbuttonrender = function addtocartbuttonrender() {
+    if (AddtoCartMutationContext.isLoading) {
+      var _AddtoCartMutationCon;
+      if ((AddtoCartMutationContext === null || AddtoCartMutationContext === void 0 || (_AddtoCartMutationCon = AddtoCartMutationContext.variables) === null || _AddtoCartMutationCon === void 0 ? void 0 : _AddtoCartMutationCon.productid) == item.productid) {
+        return /*#__PURE__*/React__default["default"].createElement("div", {
+          "class": ' d-flex align-items-center justify-content-center '
+        }, /*#__PURE__*/React__default["default"].createElement(reactCssfxLoading.CircularProgress, {
+          color: sectionproperties.quantitybtn_textcolor,
+          width: "20px",
+          height: "20px",
+          duration: "1s"
+        }));
+      } else {
+        return item.quantity;
+      }
+    }
+    if (!AddtoCartMutationContext.isLoading) {
+      return item.quantity;
+    }
+  };
   return /*#__PURE__*/React__default["default"].createElement("div", {
     "class": "row m-0 w-100",
     style: {
@@ -77640,7 +77744,7 @@ var Horizontalcard = function Horizontalcard(props) {
       paddingBottom: sectionproperties.paddingBottom + 'px'
     }
   }, sectionproperties.image_show == 'show' && /*#__PURE__*/React__default["default"].createElement("div", {
-    "class": props.numberOfColsvertical == '1' ? 'col-lg-2 col-md-3 col-sm-3 p-0 h-100' : 'col-lg-4 col-md-4 col-sm-4 p-0 h-100'
+    "class": props.numberOfColsvertical == '1' ? 'col-lg-3 col-md-3 col-sm-3 p-0 h-100' : 'col-lg-4 col-md-4 col-sm-4 p-0 h-100'
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     "class": card_cssstyles.imagecont + ' d-flex allcentered ',
     onClick: function onClick() {
@@ -77687,7 +77791,13 @@ var Horizontalcard = function Horizontalcard(props) {
       fontSize: sectionproperties.badge_fontsize + 'px'
     }
   }, langdetect == 'en' ? sectionproperties.badgeContentEn : sectionproperties.badgeContentAr))), /*#__PURE__*/React__default["default"].createElement("div", {
-    "class": sectionproperties.image_show == 'show' ? props.numberOfColsvertical == '1' ? 'col-lg-10 col-md-9 col-sm-9 pt-2' : 'col-lg-8 col-md-8 col-sm-8 pt-2' : 'col-lg-12 col-md-12 col-sm-12 pt-2',
+    "class": sectionproperties.image_show == 'show' ? props.numberOfColsvertical == '1' ? 'col-lg-9 col-md-9 col-sm-9 pt-' : 'col-lg-8 col-md-8 col-sm-8 pt-' : 'col-lg-12 col-md-12 col-sm-12 pt-'
+    // sectionproperties.image_show == 'show'
+    // ? props.numberOfColsvertical == '1'
+    //     ? 'col-lg-10 col-md-9 col-sm-9 pt-2'
+    //     : 'col-lg-8 col-md-8 col-sm-8 pt-2'
+    // : 'col-lg-12 col-md-12 col-sm-12 pt-2'
+    ,
     style: {
       paddingRight: langdetect == 'en' ? 0 : '',
       paddingLeft: langdetect == 'ar' ? 0 : '',
@@ -77749,16 +77859,8 @@ var Horizontalcard = function Horizontalcard(props) {
     style: {
       textAlign: langdetect == 'en' ? 'left' : 'right'
     }
-  }, plainString(langdetect == 'en' ? item.description : item.description))), sectionproperties.cartBtnShow == 'Show' && props.numberOfColsvertical == '1' && /*#__PURE__*/React__default["default"].createElement("div", {
-    "class": "col-lg-3 col-md-12 col-sm-12 p-0 d-flex align-items-center justify-content-end justify-content-md-start"
-  }, /*#__PURE__*/React__default["default"].createElement("button", {
-    "class": card_cssstyles.cart_btn,
-    onClick: function onClick() {
-      setShowProductInfoModalContext(true);
-      setProductIdProdutInfoModalContext(item.productid);
-    }
-  }, langdetect == 'en' ? sectionproperties.cartBtnContentenglish : sectionproperties.cartBtnContentarabic)), item.isproducttobesold == 1 && /*#__PURE__*/React__default["default"].createElement("div", {
-    "class": "col-lg-12 p-0 d-flex align-items-center"
+  }, plainString(langdetect == 'en' ? item.description : item.description))), item.isproducttobesold == 1 && /*#__PURE__*/React__default["default"].createElement("div", {
+    "class": "col-lg-9 col-md-12 p-0 d-flex align-items-center"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     "class": "row m-0 w-100"
   }, sectionproperties.prodPriceShow == 'Show' && /*#__PURE__*/React__default["default"].createElement("div", {
@@ -77768,12 +77870,12 @@ var Horizontalcard = function Horizontalcard(props) {
   }, langdetect == 'en' ? item.currencyname : '', " ", item.hassale == 1 ? item.defaultsaleprice : item.defaultprice, ' ', langdetect == 'en' ? '' : item.currencyname)), /*#__PURE__*/React__default["default"].createElement("div", {
     "class": "col-lg-12 p-0 text-start"
   }, item.hassale == 1 && sectionproperties.prodsalePriceshow == 'Show' && /*#__PURE__*/React__default["default"].createElement("p", {
-    "class": card_cssstyles.productSalePricestyles + ' m-0 p-0  ml-2 mr-2 ',
+    "class": card_cssstyles.productSalePricestyles + ' m-0 p-0 ',
     style: {
       textDecoration: 'line-through'
     }
   }, langdetect == 'en' ? item.currencyname : '', " ", item.defaultprice, " ", langdetect == 'en' ? '' : item.currencyname), sectionproperties.showpill == 'Show' && item.hassale == 1 && /*#__PURE__*/React__default["default"].createElement("div", {
-    "class": 'allcentered',
+    "class": 'allcentered mx-2',
     style: {
       width: sectionproperties.pillwidth + 'px',
       height: sectionproperties.pillheight + 'px',
@@ -77794,15 +77896,78 @@ var Horizontalcard = function Horizontalcard(props) {
       fontSize: sectionproperties.pillfontSize + 'px',
       direction: 'ltr'
     }
-  }, langdetect == 'en' ? 'Save' : 'وفر', " ", langdetect == 'en' ? item.currencyname : '', ' ', parseFloat(Math.round(parseInt(item.defaultprice) - parseInt(item.defaultsaleprice))).toFixed(0), ' ', langdetect == 'en' ? '' : item.currencyname))))), sectionproperties.cartBtnShow == 'Show' && props.numberOfColsvertical != '1' && /*#__PURE__*/React__default["default"].createElement("div", {
-    "class": "col-lg-12 p-0 d-flex align-items-center mt-2"
-  }, /*#__PURE__*/React__default["default"].createElement("button", {
-    "class": card_cssstyles.cart_btn,
+  }, langdetect == 'en' ? 'Save' : 'وفر', " ", langdetect == 'en' ? item.currencyname : '', ' ', parseFloat(Math.round(parseInt(item.defaultprice) - parseInt(item.defaultsaleprice))).toFixed(0), ' ', langdetect == 'en' ? '' : item.currencyname))))), sectionproperties.cartBtnShow == 'Show' && /*#__PURE__*/React__default["default"].createElement("div", {
+    "class": "col-lg-3 col-md-12 col-sm-12 p-0 d-flex align-items-center justify-content-end mt-md-2"
+  }, showquantity == false && /*#__PURE__*/React__default["default"].createElement("button", {
+    "class": card_cssstyles.cart_btn
+    // onClick={() => {
+    //     setShowProductInfoModalContext(true);
+    //     setProductIdProdutInfoModalContext(item.productid);
+    // }}
+    ,
     onClick: function onClick() {
-      setShowProductInfoModalContext(true);
-      setProductIdProdutInfoModalContext(item.productid);
+      if (showquantity == false) {
+        setshowquantity(true);
+        if (item.hasvariants == 0) {
+          var tempitem = _objectSpread$n({}, item);
+          tempitem.quantity = 1;
+          setitem(_objectSpread$n({}, tempitem));
+          addtocartfunc('add', tempitem.quantity);
+        }
+      } else {
+        if (item.currentquantity < 1 && sectionproperties.showoutofstock == 'Show' && item.quantavailtype == 'limit' && item.hasvariants == 0) {
+          NotificationManager.warning('', langdetect == 'en' ? 'Sold Out' : 'نفذت الكمية');
+        } else {
+          cardonclickfunctionContext(sectionproperties === null || sectionproperties === void 0 ? void 0 : sectionproperties.onClickRoute, item.productid, props.fetchingtypeprops, item.collectionid);
+        }
+      }
     }
-  }, langdetect == 'en' ? sectionproperties.cartBtnContentenglish : sectionproperties.cartBtnContentarabic)))))));
+  }, langdetect == 'en' ? sectionproperties.cartBtnContentenglish : sectionproperties.cartBtnContentarabic), showquantity == true && /*#__PURE__*/React__default["default"].createElement("div", {
+    "class": "".concat(card_cssstyles.quantitybtn) + ' p-0 d-flex align-items-center justify-content-center ',
+    style: {
+      direction: 'ltr'
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("button", {
+    "class": "".concat(card_cssstyles.minus_quantitybtn_icon_container),
+    onClick: function onClick() {
+      if (item.hasvariants == 0) {
+        var tempitem = _objectSpread$n({}, item);
+        tempitem.quantity = parseInt(tempitem.quantity);
+        tempitem.quantity = tempitem.quantity - 1;
+        if (tempitem.quantity <= 0) {
+          tempitem.quantity = 0;
+        }
+        setitem(_objectSpread$n({}, tempitem));
+        addtocartfunc('add', tempitem.quantity);
+      } else {
+        cardonclickfunctionContext(sectionproperties === null || sectionproperties === void 0 ? void 0 : sectionproperties.onClickRoute, item.productid, props.fetchingtypeprops, item.collectionid);
+      }
+    },
+    disabled: AddtoCartMutationContext.isLoading == true ? true : false
+  }, /*#__PURE__*/React__default["default"].createElement("i", {
+    "class": "h-100 allcentered minusbtn"
+  }, /*#__PURE__*/React__default["default"].createElement(FiMinus.FiMinus, null))), /*#__PURE__*/React__default["default"].createElement("span", {
+    "class": "".concat(card_cssstyles.quantitybtn_text) + ' d-flex align-items-center justify-content-center '
+  }, addtocartbuttonrender()), /*#__PURE__*/React__default["default"].createElement("button", {
+    "class": "".concat(card_cssstyles.add_quantitybtn_icon_container),
+    onClick: function onClick() {
+      if (item.hasvariants == 0) {
+        var tempitem = _objectSpread$n({}, item);
+        tempitem.quantity = parseInt(tempitem.quantity);
+        tempitem.quantity = tempitem.quantity + 1;
+        if (tempitem.quantity <= 0) {
+          tempitem.quantity = 0;
+        }
+        setitem(_objectSpread$n({}, tempitem));
+        addtocartfunc('add', tempitem.quantity);
+      } else {
+        cardonclickfunctionContext(sectionproperties === null || sectionproperties === void 0 ? void 0 : sectionproperties.onClickRoute, item.productid, props.fetchingtypeprops, item.collectionid);
+      }
+    },
+    disabled: AddtoCartMutationContext.isLoading == true ? true : false
+  }, /*#__PURE__*/React__default["default"].createElement("i", {
+    "class": "h-100 allcentered addbtn"
+  }, /*#__PURE__*/React__default["default"].createElement(FiPlus.FiPlus, null))))))))));
 };
 
 function ownKeys$m(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; }