tabexseriescomponents 0.0.128 → 0.0.130

package/dist/index.cjs.js

@@ -48,6 +48,7 @@ var HiOutlineChevronRight = require('@react-icons/all-files/hi/HiOutlineChevronR
 var HiOutlineChevronLeft = require('@react-icons/all-files/hi/HiOutlineChevronLeft');
 var GoGlobe = require('@react-icons/all-files/go/GoGlobe');
 var VscGlobe = require('@react-icons/all-files/vsc/VscGlobe');
+var FiLayers = require('@react-icons/all-files/fi/FiLayers');
 var HiOutlineTrash = require('@react-icons/all-files/hi/HiOutlineTrash');
 var BiSad = require('@react-icons/all-files/bi/BiSad');
 var TextareaAutosize = require('react-textarea-autosize');
@@ -71,7 +72,6 @@ var reactHorizontalScrollingMenu = require('react-horizontal-scrolling-menu');
 var FaArrowAltCircleRight = require('@react-icons/all-files/fa/FaArrowAltCircleRight');
 var FaArrowAltCircleLeft = require('@react-icons/all-files/fa/FaArrowAltCircleLeft');
 var FiFilter = require('@react-icons/all-files/fi/FiFilter');
-var FiLayers = require('@react-icons/all-files/fi/FiLayers');
 var BiLogOutCircle = require('@react-icons/all-files/bi/BiLogOutCircle');
 var BiChevronDown = require('@react-icons/all-files/bi/BiChevronDown');
 var BiUser = require('@react-icons/all-files/bi/BiUser');
@@ -1122,7 +1122,7 @@ var Product_itemtype = function Product_itemtype(props) {
     showMore = _useState2[0],
     setShowMore = _useState2[1];
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: 'row m-0 w-100 pl-md-3 pr-md-3 p-sm-0',
+    className: 'row m-0 w-100 pl-lg-3 pr-lg-3 pl-md-4 pr-md-4 p-sm-0',
     style: {
       paddingLeft: srcfromprops == 'Productinfomodel' ? langdetect == 'en' ? sectionproperties.card_marginLeft + 'px' : sectionproperties.card_marginRight + 'px' : 0,
       paddingRight: srcfromprops == 'Productinfomodel' ? langdetect == 'en' ? sectionproperties.card_marginRight + 'px' : sectionproperties.card_marginLeft + 'px' : 0
@@ -1137,7 +1137,7 @@ var Product_itemtype = function Product_itemtype(props) {
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: 'row m-0 w-100'
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "col-xl-5 col-lg-6 col-md-12 col-sm-12 mb-md-5 pb-md-4 pl-1 pr-1"
+    className: "col-xl-5 col-lg-4 col-md-12 col-sm-12 mb-md-5 pb-md-4 pl-1 pr-1"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "col-lg-12 p-0 ",
     style: {
@@ -1150,7 +1150,7 @@ var Product_itemtype = function Product_itemtype(props) {
     showNav: false,
     showPlayButton: false
   }))), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: langdetect == 'en' ? 'col-lg-7 col-md-12 col-sm-12 pl-3 pr-0 p-md-0' : 'col-lg-7 col-md-12 col-sm-12 pl-0 pr-3 p-md-0'
+    className: langdetect == 'en' ? 'col-xl-7 col-lg-8 col-md-12 col-sm-12 pl-3 pr-0 p-md-0' : 'col-xl-7 col-lg-8 col-md-12 col-sm-12 pl-0 pr-3 p-md-0'
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "row m-0 w-100"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -2223,7 +2223,7 @@ var Service_itemtype = function Service_itemtype(props) {
   var GeneralAPIMutationContext = props.actions.GeneralAPIMutationContext;
   var NotificationManager = props.actions.NotificationManager;
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: ' row m-0 w-100 pl-md-4 pr-md-4 p-sm-0 ',
+    className: ' row m-0 w-100 pl-lg-3 pr-lg-3 pl-md-4 pr-md-4 p-sm-0 ',
     style: {
       paddingLeft: srcfromprops == 'Productinfomodel' ? langdetect == 'en' ? sectionproperties.card_marginLeft + 'px' : sectionproperties.card_marginRight + 'px' : 0,
       paddingRight: srcfromprops == 'Productinfomodel' ? langdetect == 'en' ? sectionproperties.card_marginRight + 'px' : sectionproperties.card_marginLeft + 'px' : 0
@@ -2236,7 +2236,7 @@ var Service_itemtype = function Service_itemtype(props) {
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: 'row m-0 w-100'
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    "class": "col-lg-5 col-md-12 col-sm-12 mb-md-3 pl-1 pr-1 mb-md-5 pb-md-4"
+    className: "col-xl-5 col-lg-4 col-md-12 col-sm-12 mb-md-5 pb-md-4 pl-1 pr-1"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     "class": "col-lg-12 p-0 ",
     style: {
@@ -2249,7 +2249,7 @@ var Service_itemtype = function Service_itemtype(props) {
     showNav: false,
     showPlayButton: false
   }))), /*#__PURE__*/React__default["default"].createElement("div", {
-    "class": langdetect == 'en' ? 'col-lg-7 col-md-12 col-sm-12 pl-2 pr-0 p-md-0' : 'col-lg-7 col-md-12 col-sm-12 pl-0 pr-2 p-md-0'
+    "class": langdetect == 'en' ? 'col-xl-7 col-lg-8 col-md-12 col-sm-12 pl-2 pr-0 p-md-0' : 'col-xl-7 col-lg-8 col-md-12 col-sm-12 pl-0 pr-2 p-md-0'
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     "class": "row m-0 w-100"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -3445,7 +3445,7 @@ var Ordershistory = function Ordershistory(props) {
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "col-lg-12 p-0"
   }, !fetchorderhistoryQueryContext.isFetching && fetchorderhistoryQueryContext.isSuccess && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: 'row ml-0 mr-0 d-flex justify-content-center w-100 pl-md-3 pr-md-3 pl-sm-2 pr-sm-2',
+    className: 'row ml-0 mr-0 d-flex justify-content-center w-100 pl-lg-4 pr-lg-4 pl-md-3 pr-md-3 pl-sm-2 pr-sm-2',
     style: {
       marginTop: sectionproperties.marginTop + 'px',
       marginBottom: sectionproperties.marginBottom + 'px',
@@ -3564,7 +3564,8 @@ var Ordershistory = function Ordershistory(props) {
     className: "w-100",
     style: {
       background: 'white',
-      padding: '20px'
+      padding: '20px',
+      minHeight: '70vh'
     }
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(generalstyles.table_responsive) + ' col-lg-12 '
@@ -3724,7 +3725,7 @@ var Ordershistory = function Ordershistory(props) {
       className: "row m-0 w-100"
     }, /*#__PURE__*/React__default["default"].createElement("div", {
       className: ' col-lg-12 col-md-12 d-flex p-0'
-    }, /*#__PURE__*/React__default["default"].createElement("div", {
+    }, item.mainproductimage != undefined && item.mainproductimage != '' && item.mainproductimage != null && /*#__PURE__*/React__default["default"].createElement("div", {
       className: "".concat(orderhistory_cssstyles.tableimagecont)
     }, /*#__PURE__*/React__default["default"].createElement(imagekitioReact.IKImage, {
       urlEndpoint: IKurlEndpoint,
@@ -3733,9 +3734,16 @@ var Ordershistory = function Ordershistory(props) {
       style: {
         width: '100%',
         height: '100%',
-        objectFit: 'cover'
+        objectFit: 'contain'
       },
       loading: "lazy"
+    })), item.mainproductimage == '' && /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "".concat(orderhistory_cssstyles.tableimagecont) + ' allcentered ',
+      style: {
+        background: '#eee'
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(FiLayers.FiLayers, {
+      color: "#ccc"
     })), /*#__PURE__*/React__default["default"].createElement("div", {
       className: " pl-2 pr-2 ",
       style: {
@@ -3746,12 +3754,18 @@ var Ordershistory = function Ordershistory(props) {
     }, /*#__PURE__*/React__default["default"].createElement("div", {
       className: "col-lg-12 col-md-12 col-sm-12 p-0 d-flex align-items-start"
     }, /*#__PURE__*/React__default["default"].createElement("p", {
-      className: orderhistory_cssstyles.productNameStyles + ' p-0 m-0 wordbreak '
+      className: orderhistory_cssstyles.productNameStyles + ' p-0 m-0 wordbreak wordbreak3 ',
+      style: {
+        textAlign: langdetect == 'en' ? 'left' : 'right'
+      }
     }, item.productname)), /*#__PURE__*/React__default["default"].createElement("div", {
       className: "col-lg-12 col-md-12 col-sm-12 p-0 d-flex align-items-center"
     }, /*#__PURE__*/React__default["default"].createElement("p", {
-      className: orderhistory_cssstyles.productPricestyles + ' m-0 p-0 wordbreak '
-    }, langdetect == 'en' ? 'EGP' : '', " ", item.finalprice, " x ", item.quantity, ' ', langdetect == 'en' ? '' : 'ج.م')), /*#__PURE__*/React__default["default"].createElement("div", {
+      className: orderhistory_cssstyles.productPricestyles + ' m-0 p-0 wordbreak d-flex flex-row ',
+      style: {
+        direction: 'ltr'
+      }
+    }, /*#__PURE__*/React__default["default"].createElement("div", null, item.quantity, " x ", item.finalprice, " ", langdetect == 'en' ? 'EGP' : 'ج.م'))), /*#__PURE__*/React__default["default"].createElement("div", {
       className: "col-lg-12 col-md-12 col-sm-12 p-0 d-flex align-items-center"
     }, item.isvariant == 1 && /*#__PURE__*/React__default["default"].createElement("div", {
       className: "row m-0 w-100"
@@ -4185,7 +4199,7 @@ var Wishlist = function Wishlist(props) {
   }, lang.mywishlist)))), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "col-lg-12 p-0"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: 'row ml-0 mr-0 d-flex justify-content-center w-100 pl-md-3 pr-md-3 pl-sm-2 pr-sm-2',
+    className: 'row ml-0 mr-0 d-flex justify-content-center w-100 pl-lg-4 pr-lg-4 pl-md-3 pr-md-3 pl-sm-2 pr-sm-2',
     style: {
       width: sectionproperties.width + 'vw',
       marginTop: sectionproperties.marginTop + 'px',
@@ -4761,7 +4775,7 @@ var Viewcart = function Viewcart(props) {
   }, lang.mycart)))), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "col-lg-12 p-0"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: 'row ml-0 mr-0 d-flex justify-content-center w-100 pl-md-3 pr-md-3 pl-sm-2 pr-sm-2',
+    className: 'row ml-0 mr-0 d-flex justify-content-center w-100 pl-lg-4 pr-lg-4 pl-md-3 pr-md-3 pl-sm-2 pr-sm-2',
     style: {
       marginTop: sectionproperties.marginTop + 'px',
       marginBottom: sectionproperties.marginBottom + 'px',
@@ -4836,13 +4850,16 @@ var Viewcart = function Viewcart(props) {
       style: {
         width: '100%',
         height: '100%',
-        objectFit: 'cover'
+        objectFit: 'contain'
       },
       loading: "lazy"
     })), /*#__PURE__*/React__default["default"].createElement("div", {
       className: "col-lg-8 col-sm-8 col-md-8"
     }, /*#__PURE__*/React__default["default"].createElement("p", {
-      className: "".concat(viewcart_cssstyles.productNameStyles) + ' m-0 p-0 wordbreak d-flex justify-content-start '
+      className: "".concat(viewcart_cssstyles.productNameStyles) + ' m-0 p-0 wordbreak wordbreak3 d-flex justify-content-start ',
+      style: {
+        textAlign: langdetect == 'en' ? 'left' : 'right'
+      }
     }, langdetect == 'en' ? item.productinfo.name_en : item.productinfo.name_ar), item.productinfo.hasvariants == 1 && item.productinfo.variantinfo.variantoptions.map(function (variantitem, variantindex) {
       return /*#__PURE__*/React__default["default"].createElement("div", {
         className: "col-lg-12 col-md-12 col-sm-12 p-0 d-flex"
@@ -7072,7 +7089,7 @@ var AccountInformation = function AccountInformation(props) {
   }, lang.accountinformation)))), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "col-lg-12 p-0"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "row m-0 w-100 pl-md-3 pr-md-3 pl-sm-2 pr-sm-2",
+    className: "row m-0 w-100 pl-lg-4 pr-lg-4 pl-md-3 pr-md-3 pl-sm-2 pr-sm-2",
     style: {
       marginTop: sectionproperties.marginTop + 'px',
       marginBottom: sectionproperties.marginBottom + 'px',
@@ -7290,9 +7307,12 @@ var Policies = function Policies(props) {
       fontWeight: sectionproperties.imagetextfontWeight
     }
   }, lang.policies)))), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "col-lg-12 p-0"
+    className: "col-lg-12 p-0",
+    style: {
+      minHeight: '70vh'
+    }
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "row ml-0 mr-0 w-100 pl-md-3 pr-md-3 pl-sm-2 pr-sm-2",
+    className: "row ml-0 mr-0 w-100 pl-lg-4 pr-lg-4 pl-md-3 pr-md-3 pl-sm-2 pr-sm-2",
     style: {
       marginTop: sectionproperties.marginTop + 'px',
       marginBottom: sectionproperties.marginBottom + 'px',
@@ -7707,7 +7727,10 @@ var CartSlider = function CartSlider(props) {
     }, /*#__PURE__*/React__default["default"].createElement("div", {
       className: "col-lg-12 col-md-12 col-sm-12 p-0 d-flex"
     }, /*#__PURE__*/React__default["default"].createElement("p", {
-      className: "".concat(cart_cssstyles.productNameStyles) + ' m-0 p-0 wordbreak d-flex align-items-start '
+      className: "".concat(cart_cssstyles.productNameStyles) + ' m-0 p-0 wordbreak wordbreak3 d-flex align-items-start ',
+      style: {
+        textAlign: langdetect == 'en' ? 'left' : 'right'
+      }
     }, langdetect == 'en' ? item.productinfo.name_en : item.productinfo.name_ar)), /*#__PURE__*/React__default["default"].createElement("div", {
       className: "".concat(cart_cssstyles.productPricestyles) + ' col-lg-12 col-md-12 col-sm-12 p-0 d-flex '
     }, item.quantity, " x", /*#__PURE__*/React__default["default"].createElement("span", {
@@ -22432,14 +22455,14 @@ var TwoTieredHeader = function TwoTieredHeader(props) {
       maxHeight: '100%'
     }
   }))), /*#__PURE__*/React__default["default"].createElement("div", {
-    "class": "col-lg-7 p-0 d-flex align-items-center justify-content-center"
+    "class": "col-xl-7 col-lg-6 p-0 d-flex align-items-center justify-content-center"
   }, sectionproperties.searchbar_show == 'Show' && /*#__PURE__*/React__default["default"].createElement("div", {
     "class": ' row d-flex justify-content-center m-0 ',
     style: {
       width: sectionproperties.searchbarcont_width + '%'
     }
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    "class": 'col-lg-3 p-0 d-flex align-items-center justify-content-start ',
+    "class": 'col-xl-3 col-lg-4 p-0 d-flex align-items-center justify-content-start ',
     onClick: function onClick() {
       setdropdownselect(!dropdownselect);
     }
@@ -22485,7 +22508,7 @@ var TwoTieredHeader = function TwoTieredHeader(props) {
       "class": "".concat(header_cssstyles.dropdownitem) + ' dropdownitem text-overflow m-0 p-0 '
     }, langdetect == 'en' ? item.title_en : item.title_ar)))), index != authdetailsContext.instinfo.instcollections.length - 1 && /*#__PURE__*/React__default["default"].createElement(Dropdown__default["default"].Divider, null));
   }))))), /*#__PURE__*/React__default["default"].createElement("div", {
-    "class": "col-lg-9 p-0 d-flex justify-content-start align-items-center"
+    "class": "col-xl-9 col-lg-8 p-0 d-flex justify-content-start align-items-center"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     "class": header_cssstyles.searchbarcont + ' p-0 m-0 w-100 ',
     style: {
@@ -22511,10 +22534,10 @@ var TwoTieredHeader = function TwoTieredHeader(props) {
     srcfromprops: 'headerfullwidth',
     actions: actions
   }))))), /*#__PURE__*/React__default["default"].createElement("div", {
-    "class": "col-lg-3",
+    "class": "col-xl-3 col-lg-4 plr-1025-1",
     style: {
-      paddingLeft: langdetect == 'en' ? '5rem' : 0,
-      paddingRight: langdetect == 'ar' ? '5rem' : 0
+      paddingLeft: langdetect == 'en' ? '3rem' : 0,
+      paddingRight: langdetect == 'ar' ? '3rem' : 0
     }
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     "class": "row m-0 w-100 d-flex align-items-center justify-content-between h-100"
@@ -22687,7 +22710,7 @@ var TwoTieredHeader = function TwoTieredHeader(props) {
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     "class": header_cssstyles.divider
   })), /*#__PURE__*/React__default["default"].createElement("div", {
-    "class": header_cssstyles.lowerheaderSection + ' row m-0 w-100 '
+    "class": header_cssstyles.lowerheaderSection + ' row m-0 w-100 plr-1025-1 '
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     "class": "col-lg-9 p-0 d-flex justify-content-start align-items-center "
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -23885,7 +23908,7 @@ var Allinonefooter = function Allinonefooter(props) {
       paddingLeft: langdetect == 'en' ? sectionproperties.footer_paddingLeft + 'px' : sectionproperties.footer_paddingRight + 'px',
       paddingRight: langdetect == 'en' ? sectionproperties.footer_paddingRight + 'px' : sectionproperties.footer_paddingLeft + 'px'
     },
-    "class": "".concat(footerStyles.footerContainer) + ' col-lg-12 col-md-12 col-sm-12 pl-sm-2 pr-sm-2 pl-md-3 pr-md-3 '
+    "class": "".concat(footerStyles.footerContainer) + ' col-lg-12 col-md-12 col-sm-12 pl-sm-2 pr-sm-2 pl-md-3 pr-md-3 px-2015-3 py-lg-3 '
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     "class": "row m-0 w-100 justify-content-center d-md-none"
   }, StoreInformation()), /*#__PURE__*/React__default["default"].createElement("div", {
@@ -36647,8 +36670,8 @@ var NewProductcard = function NewProductcard(props) {
     setsectionproperties = _useState2[1];
   var _useState3 = React.useState(props.cardinfoitemprops),
     _useState4 = _slicedToArray__default["default"](_useState3, 2),
-    item = _useState4[0];
-    _useState4[1];
+    item = _useState4[0],
+    setitem = _useState4[1];
   var StatePagePropertiesContext = props.actions.StatePagePropertiesContext;
   props.actions.lang;
   var langdetect = props.actions.langdetect;
@@ -36679,6 +36702,9 @@ var NewProductcard = function NewProductcard(props) {
       setsectionproperties(_objectSpread$x({}, secpropobj));
     }
   }, [StatePagePropertiesContext]);
+  React.useEffect(function () {
+    setitem(props.cardinfoitemprops);
+  }, [props.cardinfoitemprops]);
   var card_cssstyles = {
     colorvariantcontainer: glamor.css({
       width: sectionproperties.variantcontainer_minwidth + 'vh',
@@ -37042,8 +37068,8 @@ var UserCardWithSocialMediaOnHover = function UserCardWithSocialMediaOnHover(pro
     setsectionproperties = _useState2[1];
   var _useState3 = React.useState(props.cardinfoitemprops),
     _useState4 = _slicedToArray__default["default"](_useState3, 2),
-    item = _useState4[0];
-    _useState4[1];
+    item = _useState4[0],
+    setitem = _useState4[1];
   var StatePagePropertiesContext = props.actions.StatePagePropertiesContext;
   var langdetect = props.actions.langdetect;
   props.actions.StaticPagesLinksContext;
@@ -37060,6 +37086,9 @@ var UserCardWithSocialMediaOnHover = function UserCardWithSocialMediaOnHover(pro
     });
     setsectionproperties(_objectSpread$w({}, secpropobj));
   }, [StatePagePropertiesContext]);
+  React.useEffect(function () {
+    setitem(props.cardinfoitemprops);
+  }, [props.cardinfoitemprops]);
   var card_cssstyles = {
     productcard: glamor.css({
       background: sectionproperties.backgroundColortransparent == 'Transparent' ? 'transparent' : sectionproperties.backgroundColor,
@@ -37210,8 +37239,8 @@ var Card20 = function Card20(props) {
     setsectionproperties = _useState2[1];
   var _useState3 = React.useState(props.cardinfoitemprops),
     _useState4 = _slicedToArray__default["default"](_useState3, 2),
-    item = _useState4[0];
-    _useState4[1];
+    item = _useState4[0],
+    setitem = _useState4[1];
   var StatePagePropertiesContext = props.actions.StatePagePropertiesContext;
   props.actions.lang;
   var langdetect = props.actions.langdetect;
@@ -37236,6 +37265,9 @@ var Card20 = function Card20(props) {
     });
     setsectionproperties(_objectSpread$v({}, secpropobj));
   }, [StatePagePropertiesContext]);
+  React.useEffect(function () {
+    setitem(props.cardinfoitemprops);
+  }, [props.cardinfoitemprops]);
   var cardstyles = {
     productcard: glamor.css({
       background: sectionproperties.backgroundColortransparent == 'Transparent' ? 'transparent' : sectionproperties.backgroundColor,
@@ -37452,8 +37484,8 @@ var Card21 = function Card21(props) {
     setsectionproperties = _useState2[1];
   var _useState3 = React.useState(props.cardinfoitemprops),
     _useState4 = _slicedToArray__default["default"](_useState3, 2),
-    item = _useState4[0];
-    _useState4[1];
+    item = _useState4[0],
+    setitem = _useState4[1];
   var StatePagePropertiesContext = props.actions.StatePagePropertiesContext;
   props.actions.lang;
   var langdetect = props.actions.langdetect;
@@ -37486,6 +37518,9 @@ var Card21 = function Card21(props) {
       setsectionproperties(_objectSpread$u({}, secpropobj));
     }
   }, [StatePagePropertiesContext]);
+  React.useEffect(function () {
+    setitem(props.cardinfoitemprops);
+  }, [props.cardinfoitemprops]);
   var cardsstyles2 = {
     productcard: glamor.css({
       background: sectionproperties.backgroundColortransparent == 'Transparent' ? 'transparent' : sectionproperties.backgroundColor,
@@ -37780,8 +37815,8 @@ var Card22 = function Card22(props) {
     setsectionproperties = _useState2[1];
   var _useState3 = React.useState(props.cardinfoitemprops),
     _useState4 = _slicedToArray__default["default"](_useState3, 2),
-    item = _useState4[0];
-    _useState4[1];
+    item = _useState4[0],
+    setitem = _useState4[1];
   var StatePagePropertiesContext = props.actions.StatePagePropertiesContext;
   props.actions.lang;
   var langdetect = props.actions.langdetect;
@@ -37814,6 +37849,9 @@ var Card22 = function Card22(props) {
       setsectionproperties(_objectSpread$t({}, secpropobj));
     }
   }, [StatePagePropertiesContext]);
+  React.useEffect(function () {
+    setitem(props.cardinfoitemprops);
+  }, [props.cardinfoitemprops]);
   var cardsstyles2 = {
     productcard: glamor.css({
       background: sectionproperties.backgroundColortransparent == 'Transparent' ? 'transparent' : sectionproperties.backgroundColor,
@@ -38008,8 +38046,8 @@ var Card23 = function Card23(props) {
     setsectionproperties = _useState2[1];
   var _useState3 = React.useState(props.cardinfoitemprops),
     _useState4 = _slicedToArray__default["default"](_useState3, 2),
-    item = _useState4[0];
-    _useState4[1];
+    item = _useState4[0],
+    setitem = _useState4[1];
   var StatePagePropertiesContext = props.actions.StatePagePropertiesContext;
   props.actions.lang;
   var langdetect = props.actions.langdetect;
@@ -38042,6 +38080,9 @@ var Card23 = function Card23(props) {
       setsectionproperties(_objectSpread$s({}, secpropobj));
     }
   }, [StatePagePropertiesContext]);
+  React.useEffect(function () {
+    setitem(props.cardinfoitemprops);
+  }, [props.cardinfoitemprops]);
   var cardsstyles2 = {
     showmodal: glamor.css({
       backgroundColor: sectionproperties.generalbtn_bgColortransparent == 'Transparent' ? 'transparent' : sectionproperties.generalbtn_bgColor,
@@ -38302,12 +38343,15 @@ var Card23 = function Card23(props) {
       textAlign: langdetect == 'en' ? 'left' : 'right'
     }
   }, plainString(langdetect == 'en' ? item.description_en : item.description_ar)), sectionproperties.prodNameShow == 'Show' && /*#__PURE__*/React__default["default"].createElement("div", {
-    "class": "col-lg-12 p-0 "
+    "class": "col-lg-12 p-0 ",
+    style: {
+      minHeight: '6vh'
+    }
   }, /*#__PURE__*/React__default["default"].createElement("p", {
     onClick: function onClick() {
       cardonclickfunctionContext(sectionproperties === null || sectionproperties === void 0 ? void 0 : sectionproperties.onClickRoute, item.productid, props.fetchingtypeprops, item.collectionid);
     },
-    "class": sectionproperties.wordbreak == '1' ? "".concat(cardsstyles2.productNameStyles) + '  wordbreak wordbreak1 m-0 ' : "".concat(cardsstyles2.productNameStyles) + '  wordbreak wordbreak2 m-0 ',
+    "class": sectionproperties.wordbreak == '1' ? "".concat(cardsstyles2.productNameStyles) + '  wordbreak wordbreak2 m-0 ' : "".concat(cardsstyles2.productNameStyles) + '  wordbreak wordbreak2 m-0 ',
     style: {
       textAlign: langdetect == 'en' ? 'left' : 'right'
     }
@@ -38364,8 +38408,8 @@ var CardBadgeSlideFromTop = function CardBadgeSlideFromTop(props) {
     setsectionproperties = _useState2[1];
   var _useState3 = React.useState(props.cardinfoitemprops),
     _useState4 = _slicedToArray__default["default"](_useState3, 2),
-    item = _useState4[0];
-    _useState4[1];
+    item = _useState4[0],
+    setitem = _useState4[1];
   var StatePagePropertiesContext = props.actions.StatePagePropertiesContext;
   props.actions.lang;
   var langdetect = props.actions.langdetect;
@@ -38398,6 +38442,9 @@ var CardBadgeSlideFromTop = function CardBadgeSlideFromTop(props) {
       setsectionproperties(_objectSpread$r({}, secpropobj));
     }
   }, [StatePagePropertiesContext]);
+  React.useEffect(function () {
+    setitem(props.cardinfoitemprops);
+  }, [props.cardinfoitemprops]);
   var cardsstyles2 = {
     productcard: glamor.css({
       background: sectionproperties.backgroundColortransparent == 'Transparent' ? 'transparent' : sectionproperties.backgroundColor,
@@ -38739,9 +38786,7 @@ var Productcard_with_zoominonhover = function Productcard_with_zoominonhover(pro
     }
   }, [StatePagePropertiesContext]);
   React.useEffect(function () {
-    if (props.cardinfoitemprops != undefined) {
-      setitem(props.cardinfoitemprops);
-    }
+    setitem(props.cardinfoitemprops);
   }, [props.cardinfoitemprops]);
   var updatequantity = function updatequantity(type) {
     var tempitem = _objectSpread$q({}, item);
@@ -39210,8 +39255,8 @@ var Categorycard_with_twolinestransition = function Categorycard_with_twolinestr
     setsectionproperties = _useState2[1];
   var _useState3 = React.useState(props.cardinfoitemprops),
     _useState4 = _slicedToArray__default["default"](_useState3, 2),
-    item = _useState4[0];
-    _useState4[1];
+    item = _useState4[0],
+    setitem = _useState4[1];
   var StatePagePropertiesContext = props.actions.StatePagePropertiesContext;
   var langdetect = props.actions.langdetect;
   props.actions.routingcountext;
@@ -39240,6 +39285,9 @@ var Categorycard_with_twolinestransition = function Categorycard_with_twolinestr
       setsectionproperties(_objectSpread$p({}, secpropobj));
     }
   }, [StatePagePropertiesContext]);
+  React.useEffect(function () {
+    setitem(props.cardinfoitemprops);
+  }, [props.cardinfoitemprops]);
   var plainString = function plainString(html) {
     var divContainer = document.createElement('div');
     divContainer.innerHTML = html;
@@ -39387,8 +39435,8 @@ var Categorycard_fullimage = function Categorycard_fullimage(props) {
     setsectionproperties = _useState2[1];
   var _useState3 = React.useState(props.cardinfoitemprops),
     _useState4 = _slicedToArray__default["default"](_useState3, 2),
-    item = _useState4[0];
-    _useState4[1];
+    item = _useState4[0],
+    setitem = _useState4[1];
   var StatePagePropertiesContext = props.actions.StatePagePropertiesContext;
   props.actions.lang;
   var langdetect = props.actions.langdetect;
@@ -39421,6 +39469,9 @@ var Categorycard_fullimage = function Categorycard_fullimage(props) {
       setsectionproperties(_objectSpread$o({}, secpropobj));
     }
   }, [StatePagePropertiesContext]);
+  React.useEffect(function () {
+    setitem(props.cardinfoitemprops);
+  }, [props.cardinfoitemprops]);
   var card_cssstyles = {
     productcard: glamor.css({
       background: sectionproperties.backgroundColortransparent == 'Transparent' ? 'transparent' : sectionproperties.backgroundColor,
@@ -39586,8 +39637,8 @@ var Categorycard_slidebgscaled = function Categorycard_slidebgscaled(props) {
     setsectionproperties = _useState2[1];
   var _useState3 = React.useState(props.cardinfoitemprops),
     _useState4 = _slicedToArray__default["default"](_useState3, 2),
-    item = _useState4[0];
-    _useState4[1];
+    item = _useState4[0],
+    setitem = _useState4[1];
   var StatePagePropertiesContext = props.actions.StatePagePropertiesContext;
   props.actions.lang;
   var langdetect = props.actions.langdetect;
@@ -39616,6 +39667,9 @@ var Categorycard_slidebgscaled = function Categorycard_slidebgscaled(props) {
       setsectionproperties(_objectSpread$n({}, secpropobj));
     }
   }, [StatePagePropertiesContext]);
+  React.useEffect(function () {
+    setitem(props.cardinfoitemprops);
+  }, [props.cardinfoitemprops]);
   var categorycard_cssstyles = {
     categoryCard: glamor.css({
       background: sectionproperties.backgroundColortransparent == 'Transparent' ? sectionproperties.backgroundColor : '',
@@ -39765,8 +39819,8 @@ var Categorycard_with_trianglebg = function Categorycard_with_trianglebg(props)
     setsectionproperties = _useState2[1];
   var _useState3 = React.useState(props.cardinfoitemprops),
     _useState4 = _slicedToArray__default["default"](_useState3, 2),
-    item = _useState4[0];
-    _useState4[1];
+    item = _useState4[0],
+    setitem = _useState4[1];
   var StatePagePropertiesContext = props.actions.StatePagePropertiesContext;
   props.actions.lang;
   var langdetect = props.actions.langdetect;
@@ -39795,6 +39849,9 @@ var Categorycard_with_trianglebg = function Categorycard_with_trianglebg(props)
       setsectionproperties(_objectSpread$m({}, secpropobj));
     }
   }, [StatePagePropertiesContext]);
+  React.useEffect(function () {
+    setitem(props.cardinfoitemprops);
+  }, [props.cardinfoitemprops]);
   var categorycard_cssstyles = {
     cardcontainer: glamor.css({
       position: 'relative',
@@ -39924,8 +39981,8 @@ var Categorycard_withshapes = function Categorycard_withshapes(props) {
     setsectionproperties = _useState2[1];
   var _useState3 = React.useState(props.cardinfoitemprops),
     _useState4 = _slicedToArray__default["default"](_useState3, 2),
-    item = _useState4[0];
-    _useState4[1];
+    item = _useState4[0],
+    setitem = _useState4[1];
   var StatePagePropertiesContext = props.actions.StatePagePropertiesContext;
   props.actions.lang;
   props.actions.langdetect;
@@ -39958,6 +40015,9 @@ var Categorycard_withshapes = function Categorycard_withshapes(props) {
       setsectionproperties(_objectSpread$l({}, secpropobj));
     }
   }, [StatePagePropertiesContext]);
+  React.useEffect(function () {
+    setitem(props.cardinfoitemprops);
+  }, [props.cardinfoitemprops]);
   var card_cssstyles = {
     categoryCard: glamor.css((_css = {
       background: sectionproperties.backgroundColortransparent == 'Transparent' ? sectionproperties.backgroundColor : '',
@@ -40078,8 +40138,8 @@ var Categorycard_withtext = function Categorycard_withtext(props) {
     setsectionproperties = _useState2[1];
   var _useState3 = React.useState(props.cardinfoitemprops),
     _useState4 = _slicedToArray__default["default"](_useState3, 2),
-    item = _useState4[0];
-    _useState4[1];
+    item = _useState4[0],
+    setitem = _useState4[1];
   var StatePagePropertiesContext = props.actions.StatePagePropertiesContext;
   props.actions.lang;
   var langdetect = props.actions.langdetect;
@@ -40112,6 +40172,9 @@ var Categorycard_withtext = function Categorycard_withtext(props) {
       setsectionproperties(_objectSpread$k({}, secpropobj));
     }
   }, [StatePagePropertiesContext]);
+  React.useEffect(function () {
+    setitem(props.cardinfoitemprops);
+  }, [props.cardinfoitemprops]);
   var categorycard_cssstyles = {
     categorycard: glamor.css({
       background: sectionproperties.backgroundColortransparent == 'Transparent' ? 'transparent' : sectionproperties.backgroundColor,
@@ -40254,8 +40317,8 @@ var CategoryCardwithhoveraction = function CategoryCardwithhoveraction(props) {
     setsectionproperties = _useState2[1];
   var _useState3 = React.useState(props.cardinfoitemprops),
     _useState4 = _slicedToArray__default["default"](_useState3, 2),
-    item = _useState4[0];
-    _useState4[1];
+    item = _useState4[0],
+    setitem = _useState4[1];
   var StatePagePropertiesContext = props.actions.StatePagePropertiesContext;
   props.actions.lang;
   var langdetect = props.actions.langdetect;
@@ -40288,6 +40351,9 @@ var CategoryCardwithhoveraction = function CategoryCardwithhoveraction(props) {
       setsectionproperties(_objectSpread$j({}, secpropobj));
     }
   }, [StatePagePropertiesContext]);
+  React.useEffect(function () {
+    setitem(props.cardinfoitemprops);
+  }, [props.cardinfoitemprops]);
   var card_cssstyles = {
     cardcontainer: glamor.css({
       marginTop: sectionproperties.marginTop + 'px',
@@ -40421,8 +40487,8 @@ var Classiccategorycard = function Classiccategorycard(props) {
     setsectionproperties = _useState2[1];
   var _useState3 = React.useState(props.cardinfoitemprops),
     _useState4 = _slicedToArray__default["default"](_useState3, 2),
-    item = _useState4[0];
-    _useState4[1];
+    item = _useState4[0],
+    setitem = _useState4[1];
   var StatePagePropertiesContext = props.actions.StatePagePropertiesContext;
   props.actions.lang;
   var langdetect = props.actions.langdetect;
@@ -40448,6 +40514,9 @@ var Classiccategorycard = function Classiccategorycard(props) {
       setsectionproperties(_objectSpread$i({}, secpropobj));
     }
   }, [StatePagePropertiesContext]);
+  React.useEffect(function () {
+    setitem(props.cardinfoitemprops);
+  }, [props.cardinfoitemprops]);
   var card_cssstyles = {
     imagestyle: glamor.css({
       width: sectionproperties.image_width + 'px',
@@ -40551,8 +40620,8 @@ var Horizontalcard = function Horizontalcard(props) {
     setsectionproperties = _useState2[1];
   var _useState3 = React.useState(props.cardinfoitemprops),
     _useState4 = _slicedToArray__default["default"](_useState3, 2),
-    item = _useState4[0];
-    _useState4[1];
+    item = _useState4[0],
+    setitem = _useState4[1];
   var StatePagePropertiesContext = props.actions.StatePagePropertiesContext;
   var lang = props.actions.lang;
   var langdetect = props.actions.langdetect;
@@ -40581,6 +40650,9 @@ var Horizontalcard = function Horizontalcard(props) {
       setsectionproperties(_objectSpread$h({}, secpropobj));
     }
   }, [StatePagePropertiesContext]);
+  React.useEffect(function () {
+    setitem(props.cardinfoitemprops);
+  }, [props.cardinfoitemprops]);
   var card_cssstyles = {
     productcard: glamor.css({
       marginTop: sectionproperties.marginTop + 'px',
@@ -40826,6 +40898,9 @@ var MenuCard = function MenuCard(props) {
       setsectionproperties(_objectSpread$g({}, secpropobj));
     }
   }, [StatePagePropertiesContext]);
+  React.useEffect(function () {
+    setitem(props.cardinfoitemprops);
+  }, [props.cardinfoitemprops]);
   var plainString = function plainString(html) {
     var divContainer = document.createElement('div');
     divContainer.innerHTML = html;
@@ -41286,6 +41361,9 @@ var ModernCardWithQuantityButton = function ModernCardWithQuantityButton(props)
       setsectionproperties(_objectSpread$f({}, secpropobj));
     }
   }, [StatePagePropertiesContext]);
+  React.useEffect(function () {
+    setitem(props.cardinfoitemprops);
+  }, [props.cardinfoitemprops]);
   React.useEffect(function () {
     if (props.cardinfoitemprops != undefined) {
       setitem(props.cardinfoitemprops);
@@ -41722,6 +41800,9 @@ var ModernProductCard = function ModernProductCard(props) {
       setsectionproperties(_objectSpread$e({}, secpropobj));
     }
   }, [StatePagePropertiesContext]);
+  React.useEffect(function () {
+    setitem(props.cardinfoitemprops);
+  }, [props.cardinfoitemprops]);
   var plainString = function plainString(html) {
     var divContainer = document.createElement('div');
     divContainer.innerHTML = html;
@@ -42086,8 +42167,8 @@ var Productcard_animatedbuttons = function Productcard_animatedbuttons(props) {
     setsectionproperties = _useState2[1];
   var _useState3 = React.useState(props.cardinfoitemprops),
     _useState4 = _slicedToArray__default["default"](_useState3, 2),
-    item = _useState4[0];
-    _useState4[1];
+    item = _useState4[0],
+    setitem = _useState4[1];
   var StatePagePropertiesContext = props.actions.StatePagePropertiesContext;
   props.actions.lang;
   var langdetect = props.actions.langdetect;
@@ -42118,6 +42199,9 @@ var Productcard_animatedbuttons = function Productcard_animatedbuttons(props) {
       setsectionproperties(_objectSpread$d({}, secpropobj));
     }
   }, [StatePagePropertiesContext]);
+  React.useEffect(function () {
+    setitem(props.cardinfoitemprops);
+  }, [props.cardinfoitemprops]);
   var card_cssstyles = {
     productcard: glamor.css({
       background: sectionproperties.backgroundColortransparent == 'Transparent' ? 'transparent' : sectionproperties.backgroundColor,
@@ -42359,8 +42443,8 @@ var Productcard_with_circularbg = function Productcard_with_circularbg(props) {
     setsectionproperties = _useState2[1];
   var _useState3 = React.useState(props.cardinfoitemprops),
     _useState4 = _slicedToArray__default["default"](_useState3, 2),
-    item = _useState4[0];
-    _useState4[1];
+    item = _useState4[0],
+    setitem = _useState4[1];
   var StatePagePropertiesContext = props.actions.StatePagePropertiesContext;
   var lang = props.actions.lang;
   var langdetect = props.actions.langdetect;
@@ -42395,6 +42479,9 @@ var Productcard_with_circularbg = function Productcard_with_circularbg(props) {
       setsectionproperties(_objectSpread$c({}, secpropobj));
     }
   }, [StatePagePropertiesContext]);
+  React.useEffect(function () {
+    setitem(props.cardinfoitemprops);
+  }, [props.cardinfoitemprops]);
   var card_cssstyles = {
     productCard: glamor.css({
       position: 'relative',
@@ -42597,8 +42684,8 @@ var Productcard_with_circularhover = function Productcard_with_circularhover(pro
     setsectionproperties = _useState2[1];
   var _useState3 = React.useState(props.cardinfoitemprops),
     _useState4 = _slicedToArray__default["default"](_useState3, 2),
-    item = _useState4[0];
-    _useState4[1];
+    item = _useState4[0],
+    setitem = _useState4[1];
   var StatePagePropertiesContext = props.actions.StatePagePropertiesContext;
   var lang = props.actions.lang;
   var langdetect = props.actions.langdetect;
@@ -42629,6 +42716,9 @@ var Productcard_with_circularhover = function Productcard_with_circularhover(pro
       setsectionproperties(_objectSpread$b({}, secpropobj));
     }
   }, [StatePagePropertiesContext]);
+  React.useEffect(function () {
+    setitem(props.cardinfoitemprops);
+  }, [props.cardinfoitemprops]);
   var card_cssstyles = {
     cardContainer: glamor.css({
       // minHeight: 600,
@@ -42867,8 +42957,8 @@ var Productcard_with_slideanimation = function Productcard_with_slideanimation(p
     setsectionproperties = _useState2[1];
   var _useState3 = React.useState(props.cardinfoitemprops),
     _useState4 = _slicedToArray__default["default"](_useState3, 2),
-    item = _useState4[0];
-    _useState4[1];
+    item = _useState4[0],
+    setitem = _useState4[1];
   var StatePagePropertiesContext = props.actions.StatePagePropertiesContext;
   var lang = props.actions.lang;
   var langdetect = props.actions.langdetect;
@@ -42899,6 +42989,9 @@ var Productcard_with_slideanimation = function Productcard_with_slideanimation(p
       setsectionproperties(_objectSpread$a({}, secpropobj));
     }
   }, [StatePagePropertiesContext]);
+  React.useEffect(function () {
+    setitem(props.cardinfoitemprops);
+  }, [props.cardinfoitemprops]);
   var card_cssstyles = {
     productcard: glamor.css({
       position: 'relative',
@@ -43118,8 +43211,8 @@ var Productcard_with_variants = function Productcard_with_variants(props) {
     setsectionproperties = _useState2[1];
   var _useState3 = React.useState(props.cardinfoitemprops),
     _useState4 = _slicedToArray__default["default"](_useState3, 2),
-    item = _useState4[0];
-    _useState4[1];
+    item = _useState4[0],
+    setitem = _useState4[1];
   var StatePagePropertiesContext = props.actions.StatePagePropertiesContext;
   props.actions.lang;
   var langdetect = props.actions.langdetect;
@@ -43150,6 +43243,9 @@ var Productcard_with_variants = function Productcard_with_variants(props) {
       setsectionproperties(_objectSpread$9({}, secpropobj));
     }
   }, [StatePagePropertiesContext]);
+  React.useEffect(function () {
+    setitem(props.cardinfoitemprops);
+  }, [props.cardinfoitemprops]);
   var card_cssstyles = {
     colorvariantcontainer: glamor.css({
       width: sectionproperties.variantcontainer_minwidth + 'vh',
@@ -43463,8 +43559,8 @@ var Productcard6 = function Productcard6(props) {
     setsectionproperties = _useState2[1];
   var _useState3 = React.useState(props.cardinfoitemprops),
     _useState4 = _slicedToArray__default["default"](_useState3, 2),
-    item = _useState4[0];
-    _useState4[1];
+    item = _useState4[0],
+    setitem = _useState4[1];
   var StatePagePropertiesContext = props.actions.StatePagePropertiesContext;
   var lang = props.actions.lang;
   var langdetect = props.actions.langdetect;
@@ -43495,6 +43591,9 @@ var Productcard6 = function Productcard6(props) {
       setsectionproperties(_objectSpread$8({}, secpropobj));
     }
   }, [StatePagePropertiesContext]);
+  React.useEffect(function () {
+    setitem(props.cardinfoitemprops);
+  }, [props.cardinfoitemprops]);
   var card_cssstyles = {
     productcard: glamor.css((_css = {
       position: 'relative',
@@ -43682,8 +43781,8 @@ var Productcard7 = function Productcard7(props) {
     setsectionproperties = _useState2[1];
   var _useState3 = React.useState(props.cardinfoitemprops),
     _useState4 = _slicedToArray__default["default"](_useState3, 2),
-    item = _useState4[0];
-    _useState4[1];
+    item = _useState4[0],
+    setitem = _useState4[1];
   var StatePagePropertiesContext = props.actions.StatePagePropertiesContext;
   props.actions.lang;
   var langdetect = props.actions.langdetect;
@@ -43714,6 +43813,9 @@ var Productcard7 = function Productcard7(props) {
       setsectionproperties(_objectSpread$7({}, secpropobj));
     }
   }, [StatePagePropertiesContext]);
+  React.useEffect(function () {
+    setitem(props.cardinfoitemprops);
+  }, [props.cardinfoitemprops]);
   var card_cssstyles = {
     productcard: glamor.css({
       background: sectionproperties.backgroundColortransparent == 'Transparent' ? 'transparent' : sectionproperties.backgroundColor,
@@ -43928,8 +44030,8 @@ var Productcarddefault = function Productcarddefault(props) {
     setsectionproperties = _useState2[1];
   var _useState3 = React.useState(props.cardinfoitemprops),
     _useState4 = _slicedToArray__default["default"](_useState3, 2),
-    item = _useState4[0];
-    _useState4[1];
+    item = _useState4[0],
+    setitem = _useState4[1];
   var StatePagePropertiesContext = props.actions.StatePagePropertiesContext;
   props.actions.lang;
   var langdetect = props.actions.langdetect;
@@ -43960,6 +44062,9 @@ var Productcarddefault = function Productcarddefault(props) {
       setsectionproperties(_objectSpread$6({}, secpropobj));
     }
   }, [StatePagePropertiesContext]);
+  React.useEffect(function () {
+    setitem(props.cardinfoitemprops);
+  }, [props.cardinfoitemprops]);
   var card_cssstyles = {
     productcard: glamor.css({
       background: sectionproperties.backgroundColortransparent == 'Transparent' ? 'transparent' : sectionproperties.backgroundColor,
@@ -44205,6 +44310,9 @@ var Productccard_with_imageontopleft = function Productccard_with_imageontopleft
       setsectionproperties(_objectSpread$5({}, secpropobj));
     }
   }, [StatePagePropertiesContext]);
+  React.useEffect(function () {
+    setitem(props.cardinfoitemprops);
+  }, [props.cardinfoitemprops]);
   React.useEffect(function () {
     if (props.cardinfoitemprops != undefined) {
       setitem(props.cardinfoitemprops);
@@ -44470,6 +44578,9 @@ var Prouductcard_with_zoomhover = function Prouductcard_with_zoomhover(props) {
       setsectionproperties(_objectSpread$4({}, secpropobj));
     }
   }, [StatePagePropertiesContext]);
+  React.useEffect(function () {
+    setitem(props.cardinfoitemprops);
+  }, [props.cardinfoitemprops]);
   React.useEffect(function () {
     if (props.cardinfoitemprops != undefined) {
       setitem(props.cardinfoitemprops);
@@ -44566,8 +44677,8 @@ var Simplecategorycardwithtextbelow = function Simplecategorycardwithtextbelow(p
     setsectionproperties = _useState2[1];
   var _useState3 = React.useState(props.cardinfoitemprops),
     _useState4 = _slicedToArray__default["default"](_useState3, 2),
-    item = _useState4[0];
-    _useState4[1];
+    item = _useState4[0],
+    setitem = _useState4[1];
   var StatePagePropertiesContext = props.actions.StatePagePropertiesContext;
   var langdetect = props.actions.langdetect;
   var cardonclickfunctionContext = props.actions.cardonclickfunctionContext;
@@ -44586,6 +44697,9 @@ var Simplecategorycardwithtextbelow = function Simplecategorycardwithtextbelow(p
     });
     setsectionproperties(_objectSpread$3({}, secpropobj));
   }, [StatePagePropertiesContext]);
+  React.useEffect(function () {
+    setitem(props.cardinfoitemprops);
+  }, [props.cardinfoitemprops]);
   var plainString = function plainString(html) {
     var divContainer = document.createElement('div');
     divContainer.innerHTML = html;
@@ -44709,8 +44823,8 @@ var Simpleproductcard = function Simpleproductcard(props) {
     setsectionproperties = _useState2[1];
   var _useState3 = React.useState(props.cardinfoitemprops),
     _useState4 = _slicedToArray__default["default"](_useState3, 2),
-    item = _useState4[0];
-    _useState4[1];
+    item = _useState4[0],
+    setitem = _useState4[1];
   var StatePagePropertiesContext = props.actions.StatePagePropertiesContext;
   var lang = props.actions.lang;
   var langdetect = props.actions.langdetect;
@@ -44745,6 +44859,9 @@ var Simpleproductcard = function Simpleproductcard(props) {
       setsectionproperties(_objectSpread$2({}, secpropobj));
     }
   }, [StatePagePropertiesContext]);
+  React.useEffect(function () {
+    setitem(props.cardinfoitemprops);
+  }, [props.cardinfoitemprops]);
   var card_cssstyles = {
     productcard: glamor.css({
       background: sectionproperties.backgroundColortransparent == 'Transparent' ? 'transparent' : sectionproperties.backgroundColor,
@@ -44962,8 +45079,8 @@ var StylishProductCard = function StylishProductCard(props) {
     setsectionproperties = _useState2[1];
   var _useState3 = React.useState(props.cardinfoitemprops),
     _useState4 = _slicedToArray__default["default"](_useState3, 2),
-    item = _useState4[0];
-    _useState4[1];
+    item = _useState4[0],
+    setitem = _useState4[1];
   var StatePagePropertiesContext = props.actions.StatePagePropertiesContext;
   props.actions.lang;
   var langdetect = props.actions.langdetect;
@@ -44994,6 +45111,9 @@ var StylishProductCard = function StylishProductCard(props) {
       setsectionproperties(_objectSpread$1({}, secpropobj));
     }
   }, [StatePagePropertiesContext]);
+  React.useEffect(function () {
+    setitem(props.cardinfoitemprops);
+  }, [props.cardinfoitemprops]);
   var card_cssstyles = {
     productcard: glamor.css({
       marginTop: sectionproperties.marginTop + 'px',
@@ -45316,6 +45436,9 @@ var ProductCardWithTextOnImage = function ProductCardWithTextOnImage(props) {
       setsectionproperties(_objectSpread({}, secpropobj));
     }
   }, [StatePagePropertiesContext]);
+  React.useEffect(function () {
+    setitem(props.cardinfoitemprops);
+  }, [props.cardinfoitemprops]);
   React.useEffect(function () {
     if (sectionproperties.length != 0 && sectionproperties.arrayofobjectimagesonly != undefined) {
       var arrayofobjectimagesonlyparsed = JSON.parse(sectionproperties.arrayofobjectimagesonly);