tabexseriescomponents 0.0.7 → 0.0.10

package/dist/index.cjs.js

@@ -15,6 +15,10 @@ var md = require('react-icons/md');
 var imagekitioReact = require('imagekitio-react');
 var bs = require('react-icons/bs');
 var hi = require('react-icons/hi');
+var _extends = require('@babel/runtime/helpers/extends');
+var reactIntersectionObserver = require('react-intersection-observer');
+require('axios');
+var reactHorizontalScrollingMenu = require('react-horizontal-scrolling-menu');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -23,11 +27,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var Dropdown__default = /*#__PURE__*/_interopDefaultLegacy(Dropdown);
-
-var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
-
-var css = ".buttonComponent {\n\tborder-radius: 3px;\n\tpadding: 0.3rem 0.5rem;\n\ttransition: all 0.3s ease-out;\n\tbox-shadow: #272727b0 1px 1px 1px, #272727b0 -1px -1px 1px;\n}\n.buttonComponent:hover {\n\tbox-shadow: #272727b0 1px 1px 3px, #272727b0 -1px -1px 3px;\n}\n.buttonComponent:active {\n\topacity: 0.8;\n}\n";
-n(css,{});
+var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
 
 var AwesomeButton = function AwesomeButton(props) {
   var _useState = React.useState(null),
@@ -54,12 +54,15 @@ var AwesomeButton = function AwesomeButton(props) {
     style: {
       backgroundColor: color
     }
-  }, "ssdadadad", children.toUpperCase());
+  }, "sdasdasdadsd", children.toUpperCase());
 };
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+var IKurlEndpoint = 'https://ik.imagekit.io/kcrbhhnh0';
+var IKpublicKey = 'public_ro8Tmo5Nlgw12YIFkn9MNUQLvQE=';
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 // import { Contexthandlerscontext } from '../../../../../../../Contexts/Contexthandlerscontext';
 
 var Header8 = function Header8(props) {
@@ -78,6 +81,9 @@ var Header8 = function Header8(props) {
   //     templateproperties_context,
   // } = useContext(FetchingContext);
   // const { routingcountext, StaticPagesLinksContext } = useContext(TemplateRoutingContext);
+  var LogoutMutationContext = props.actions.LogoutMutationContext;
+  var setsidecartnavshowcontext = props.actions.setsidecartnavshowcontext;
+  var setSearchHeaderInputContext = props.actions.setSearchHeaderInputContext;
   var StatePagePropertiesContext = props.actions.StatePagePropertiesContext;
   var lang = props.actions.lang;
   var langdetect = props.actions.langdetect;
@@ -86,8 +92,9 @@ var Header8 = function Header8(props) {
   var fetchAuthorizationQueryContext = props.actions.fetchAuthorizationQueryContext;
   var fetchcustomercartQueryContext = props.actions.fetchcustomercartQueryContext;
   var templateproperties_context = props.actions.templateproperties_context;
-  var StaticPagesLinksContext = props.actions.StaticPagesLinkxwsContext;
   var favoriteprojectscountContext = props.actions.favoriteprojectscountContext;
+  var routingcountext = props.actions.routingcountext;
+  var StaticPagesLinksContext = props.actions.StaticPagesLinksContext;
 
   var _useState = React.useState(''),
       _useState2 = _slicedToArray__default["default"](_useState, 2),
@@ -119,7 +126,7 @@ var Header8 = function Header8(props) {
       });
     }
 
-    setsectionproperties(_objectSpread({}, secpropobj));
+    setsectionproperties(_objectSpread$3({}, secpropobj));
   }, [StatePagePropertiesContext]);
   var header_cssstyles = {
     headercontainer: glamor.css({
@@ -453,8 +460,8 @@ var Header8 = function Header8(props) {
       routingcountext('home');
     }
   }, /*#__PURE__*/React__default["default"].createElement(imagekitioReact.IKImage, {
-    urlEndpoint: 'https://ik.imagekit.io/kcrbhhnh0',
-    publicKey: "public_ro8Tmo5Nlgw12YIFkn9MNUQLvQE=",
+    urlEndpoint: IKurlEndpoint,
+    publicKey: IKpublicKey,
     path: langdetect == 'en' ? (_logoarrayofobjects$ = logoarrayofobjects[0]) === null || _logoarrayofobjects$ === void 0 ? void 0 : _logoarrayofobjects$.englishlogo : (_logoarrayofobjects$2 = logoarrayofobjects[0]) === null || _logoarrayofobjects$2 === void 0 ? void 0 : _logoarrayofobjects$2.arabiclogo,
     style: {
       maxWidth: '100%',
@@ -575,9 +582,7 @@ var Header8 = function Header8(props) {
     className: "".concat(header_cssstyles.dropdownitemcontainer) + ' d-flex align-items-center m-0 p-0 '
   }, /*#__PURE__*/React__default["default"].createElement("p", {
     className: "".concat(header_cssstyles.dropdownitem) + ' d-flex align-items-center dropdownitem m-0 p-0 '
-  }, /*#__PURE__*/React__default["default"].createElement(ai.AiOutlineLogin, null), /*#__PURE__*/React__default["default"].createElement("span", {
-    className: "ml-2 mr-2"
-  }, lang.login)))), /*#__PURE__*/React__default["default"].createElement(Dropdown__default["default"].Divider, {
+  }, /*#__PURE__*/React__default["default"].createElement(ai.AiOutlineLogin, null)))), /*#__PURE__*/React__default["default"].createElement(Dropdown__default["default"].Divider, {
     style: {
       marginBottom: 0,
       marginTop: 0
@@ -840,11 +845,1276 @@ var Header8 = function Header8(props) {
   }))));
 };
 
+var generalstyles = {"shadow_bottom":"general-module_shadow_bottom__YcJR3","overflowY_scroll":"general-module_overflowY_scroll__m5upZ","sub_scrollbar":"general-module_sub_scrollbar__mpHTI","badge":"general-module_badge__GTiMs","badge_secondary":"general-module_badge_secondary__p6ErJ","divider":"general-module_divider__WFV-A","verical_divider":"general-module_verical_divider__u5DxE","table":"general-module_table__hdcWN","mw-200":"general-module_mw-200__PaU8G","table_bordered":"general-module_table_bordered__JKIJp","table_borderless":"general-module_table_borderless__OF0cl","table_striped":"general-module_table_striped__wWBA6","table_hover":"general-module_table_hover__EiJha","table_responsive":"general-module_table_responsive__JPCKF","table_translation":"general-module_table_translation__x1Rpf","table_icon":"general-module_table_icon__EMMDI","image_table":"general-module_image_table__HqRaH","shownumber_cont":"general-module_shownumber_cont__34Y5j","card_input_table":"general-module_card_input_table__vVK0p","btn":"general-module_btn__FAb1b","btn_rounded":"general-module_btn_rounded__Rkb8o","focus":"general-module_focus__8-F6p","disabled":"general-module_disabled__PRzt-","btn_tranparent":"general-module_btn_tranparent__GFTRs","btn_circle":"general-module_btn_circle__lOyd4","btn_white":"general-module_btn_white__H0esd","btn_black":"general-module_btn_black__NcqLp","btn_primary":"general-module_btn_primary__C5oTz","btn_secondary":"general-module_btn_secondary__MbOCN","btn_success":"general-module_btn_success__iV5-t","btn_info":"general-module_btn_info__-ClLB","btn_danger":"general-module_btn_danger__b0QkM","btn_dark":"general-module_btn_dark__hSWyC","active":"general-module_active__MPpsF","btn_grey":"general-module_btn_grey__fGIYU","btn_cardheader":"general-module_btn_cardheader__vccWl","border_primary":"general-module_border_primary__Jqm8o","border_secondary":"general-module_border_secondary__xiHt3","border_success":"general-module_border_success__kWv6N","border_info":"general-module_border_info__wfOF-","border_warning":"general-module_border_warning__mSIRm","border_danger":"general-module_border_danger__U7veI","border":"general-module_border__Pvp44","border_top":"general-module_border_top__0-KRU","border_right":"general-module_border_right__7QXHH","border_bottom":"general-module_border_bottom__Xyy95","border_left":"general-module_border_left__90qSD","border_0":"general-module_border_0__YO9qY","border_top_0":"general-module_border_top_0__KFIha","border_right_0":"general-module_border_right_0__FaED6","border_bottom_0":"general-module_border_bottom_0__NZhJm","border_left_0":"general-module_border_left_0__gjITr","app_container":"general-module_app_container__-NNzK","app_main":"general-module_app_main__3s9rd","app_main_inner":"general-module_app_main_inner__OdEv-","app_main_inner_headertwo":"general-module_app_main_inner_headertwo__UkOlN","app_main_inner_headerfour":"general-module_app_main_inner_headerfour__slUk1","card":"general-module_card__KT-JI","card_border_10":"general-module_card_border_10__M-cl-","app_main_outer":"general-module_app_main_outer__gNSLc","app_main_outertranslated":"general-module_app_main_outertranslated__IZRx2","pill":"general-module_pill__gHCcE","fadeIn":"general-module_fadeIn__bUx2u","fadeOut":"general-module_fadeOut__R13Fc","fadeInButton":"general-module_fadeInButton__1daVD","fadeOutButton":"general-module_fadeOutButton__8BRUG","sectiontitlecont":"general-module_sectiontitlecont__F-e6k","homesectiontitlecont":"general-module_homesectiontitlecont__ZfXNm","sectiontitlecont2":"general-module_sectiontitlecont2__mfEaP"};
+
+function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+// import { Contexthandlerscontext } from '../../../../../../../../Contexts/Contexthandlerscontext';
+
+var CardsSection = function CardsSection(props) {
+  var _useInView = reactIntersectionObserver.useInView(),
+      ref = _useInView.ref,
+      inView = _useInView.inView; // const { lang, langdetect } = useContext(LanguageContext);
+  // const { TabexSectionsComponentsContext, StatePagePropertiesContext } = useContext(WebsiteDesignWorkPlaceContext);
+  // const { FetchQueriesEngineContext, setFetchQueriesEngineContext, SearchHeaderMutationContext, favoriteprojectscountContext, fetchcustomercartQueryContext } = useContext(FetchingContext);
+  // const { templatepropcontext } = useContext(Contexthandlerscontext);
+  // const { ProductFilterObjContext, setProductFilterObjContext } = useContext(ProductsCardsSectionContext);
+  // const { routingcountext, StaticPagesLinksContext } = useContext(TemplateRoutingContext);
+
+
+  var StatePagePropertiesContext = props.actions.StatePagePropertiesContext;
+  props.actions.lang;
+  var langdetect = props.actions.langdetect;
+  props.actions.setlang;
+  props.actions.templatepropcontext;
+  var fetchcustomercartQueryContext = props.actions.fetchcustomercartQueryContext;
+  var favoriteprojectscountContext = props.actions.favoriteprojectscountContext;
+  var routingcountext = props.actions.routingcountext;
+  var StaticPagesLinksContext = props.actions.StaticPagesLinksContext;
+  var ProductFilterObjContext = props.actions.ProductFilterObjContext;
+  var setProductFilterObjContext = props.actions.setProductFilterObjContext;
+  var TabexSectionsComponentsContext = props.actions.TabexSectionsComponentsContext;
+  var FetchQueriesEngineContext = props.actions.FetchQueriesEngineContext;
+  var setFetchQueriesEngineContext = props.actions.setFetchQueriesEngineContext;
+  var SearchHeaderMutationContext = props.actions.SearchHeaderMutationContext;
+  props.actions.serverbaselink;
+  props.actions.instapikey;
+  props.actions.fetchcollections_API;
+  var fetchProductsQuery = props.actions.fetchProductsQuery;
+  var fetchcollectionsQueryContext = props.actions.fetchcollectionsQueryContext;
+  var setParentCollectionsForCollectionQueryArr = props.actions.setParentCollectionsForCollectionQueryArr;
+  props.actions.ParentCollectionsForCollectionQueryArr;
+  var setfetchingtype = props.actions.setfetchingtype;
+  var fetchingtype = props.actions.fetchingtype;
+
+  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([]),
+      _useState6 = _slicedToArray__default["default"](_useState5, 2),
+      cardsarray = _useState6[0],
+      setcardsarray = _useState6[1];
+
+  var _useState7 = React.useState(''),
+      _useState8 = _slicedToArray__default["default"](_useState7, 2),
+      searchinput = _useState8[0];
+      _useState8[1]; // const [ParentCollectionsForCollectionQueryArr, setParentCollectionsForCollectionQueryArr] = useState('');
+  // const fetchcollectionsQueryContext = useQuery(
+  //     ['fetchcollections_API' + JSON.stringify(ParentCollectionsForCollectionQueryArr)],
+  //     () => fetchcollections_API({ parentcollectionid: ParentCollectionsForCollectionQueryArr }),
+  //     {
+  //         keepPreviousData: true,
+  //         staleTime: Infinity,
+  //         enabled: instapikey().length != 0 && ParentCollectionsForCollectionQueryArr.length != 0 ? true : false,
+  //     },
+  // );
+  // const FetchProductsAxios = (axiosdatatemp) => {
+  //     var tempProductFilterObjContext = { ...ProductFilterObjContext };
+  //     tempProductFilterObjContext.page = axiosdatatemp;
+  //     if (templatepropcontext.instid == 'tabex') {
+  //         tempProductFilterObjContext.instapikey = 'tabex';
+  //     } else {
+  //         tempProductFilterObjContext.instapikey = instapikey();
+  //     }
+  //     var serverbaselinktemp = window.location.hostname;
+  //     if (serverbaselinktemp == 'localhost') {
+  //         serverbaselinktemp = 'https://tabex-co.com';
+  //     } else {
+  //         serverbaselinktemp = 'https://' + serverbaselinktemp;
+  //     }
+  //     const axiosfetch = axios({
+  //         method: 'post',
+  //         url: serverbaselinktemp + '/customer/webapp/fetchproducts',
+  //         headers: {
+  //             Accept: 'application/json',
+  //             'Content-Type': 'application/json',
+  //         },
+  //         data: tempProductFilterObjContext,
+  //     });
+  //     return axiosfetch;
+  // };
+  // const fetchProductsQuery = useInfiniteQuery(['fetchproducts_API' + JSON.stringify(ProductFilterObjContext)], ({ pageParam = 0 }) => FetchProductsAxios(pageParam), {
+  //     keepPreviousData: true,
+  //     staleTime: Infinity,
+  //     enabled:
+  //         instapikey().length != 0 && fetchingtype == 'products' && ProductFilterObjContext.ProductFetchingType != undefined && ProductFilterObjContext.ProductFetchingType.length != 0
+  //             ? true
+  //             : false,
+  //     initialPageParam: 0,
+  //     getNextPageParam: (lastPage, allPages) => {
+  //         var currentpagefrombackend = lastPage.data.page;
+  //         if (currentpagefrombackend == 'full') {
+  //             return undefined;
+  //         } else {
+  //             var nextpage = parseInt(currentpagefrombackend) + 1;
+  //             return nextpage;
+  //         }
+  //     },
+  //     getPreviousPageParam: (firstPage, allPages) => firstPage.data.page - 1,
+  // });
+
+
+  React__default["default"].useEffect(function () {
+    if (inView) {
+      fetchProductsQuery.fetchNextPage();
+    }
+  }, [inView]);
+
+  var _useState9 = React.useState({
+    productfetchingtype: 'Random',
+    collectionid: ''
+  }),
+      _useState10 = _slicedToArray__default["default"](_useState9, 2),
+      ProductsFetchingTypeSectionObj = _useState10[0],
+      setProductsFetchingTypeSectionObj = _useState10[1];
+
+  React.useEffect(function () {
+    StatePagePropertiesContext.pageobj.sections.forEach(function (sectionitem, sectionindex) {
+      if (sectionitem.sectionid == props.sectionidprops) {
+        var secpropobj = {};
+        sectionitem.sectionproperties.forEach(function (sectionpropertiesobj, sectionpropertiesindex) {
+          secpropobj[sectionpropertiesobj.property_css_name] = sectionpropertiesobj.property_value;
+        });
+        setsectionproperties(_objectSpread$2({}, secpropobj));
+
+        if (props.srcfromprops == 'GeneralProductsComponent') {
+          setfetchingtype('products');
+          setProductsFetchingTypeSectionObj({
+            productfetchingtype: 'Random',
+            collectionid: props.collectionidprops
+          });
+        } else {
+          setfetchingtype(sectionitem.fetchingtype);
+          setProductsFetchingTypeSectionObj({
+            productfetchingtype: sectionitem.productsfetchingtype,
+            collectionid: sectionitem.productsfetchingtypeCollectioncollectionid
+          });
+        }
+      }
+    });
+  }, [StatePagePropertiesContext]);
+  React.useEffect(function () {
+    SearchHeaderMutationContext.reset();
+    var delayDebounceFn = setTimeout(function () {
+      if (searchinput.length != 0) {
+        SearchHeaderMutationContext.mutate({
+          SearchHeaderValue: searchinput
+        });
+      }
+    }, 1000);
+    return function () {
+      return clearTimeout(delayDebounceFn);
+    };
+  }, [searchinput]);
+  React.useEffect(function () {
+    if (sectionproperties.length != 0) {
+      if (cardsarray.length == 0) {
+        if (fetchingtype == 'collections') {
+          if (fetchcollectionsQueryContext.isSuccess) {
+            cardobjassigner(fetchcollectionsQueryContext.data.data.collections);
+          }
+        } else if (fetchingtype == 'products') {
+          if (fetchProductsQuery.isSuccess) {
+            var allpagesarr = [];
+            fetchProductsQuery.data.pages.forEach(function (page) {
+              page.data.products.forEach(function (productobj) {
+                allpagesarr.push(productobj);
+              });
+            });
+            cardobjassigner(allpagesarr);
+          }
+        }
+      }
+    }
+  }, [sectionproperties]);
+  React.useEffect(function () {
+    if (fetchingtype.length != 0) {
+      var tempFetchQueriesEngineContext = FetchQueriesEngineContext;
+
+      if (fetchingtype == 'collections') {
+        // tempFetchQueriesEngineContext.collections = true;
+        if (ProductsFetchingTypeSectionObj.collectionid == 'all' || ProductsFetchingTypeSectionObj.collectionid == null || ProductsFetchingTypeSectionObj.collectionid == undefined) {
+          setParentCollectionsForCollectionQueryArr('all');
+        } else {
+          setParentCollectionsForCollectionQueryArr([ProductsFetchingTypeSectionObj.collectionid]);
+        }
+      }
+
+      if (fetchingtype == 'products') {
+        var tempfetchproductsfilerobjcontext = ProductFilterObjContext;
+        tempfetchproductsfilerobjcontext.ProductFetchingType = ProductsFetchingTypeSectionObj.productfetchingtype;
+        tempfetchproductsfilerobjcontext.collections.push(ProductsFetchingTypeSectionObj.collectionid);
+        setProductFilterObjContext(_objectSpread$2({}, tempfetchproductsfilerobjcontext));
+      }
+
+      setFetchQueriesEngineContext(_objectSpread$2({}, tempFetchQueriesEngineContext));
+    }
+  }, [fetchingtype, ProductsFetchingTypeSectionObj]);
+  React.useEffect(function () {
+    if (fetchingtype == 'products') {
+      if (fetchProductsQuery.isSuccess && fetchcustomercartQueryContext.isSuccess) {
+        var allpagesarr = [];
+        fetchProductsQuery.data.pages.forEach(function (page) {
+          page.data.products.forEach(function (productobj) {
+            allpagesarr.push(productobj);
+          });
+        });
+        cardobjassigner(allpagesarr);
+      }
+    }
+  }, [fetchProductsQuery.isSuccess, fetchProductsQuery.dataUpdatedAt, fetchProductsQuery.data, fetchcustomercartQueryContext.dataUpdatedAt]);
+  React.useEffect(function () {
+    if (fetchingtype == 'collections') {
+      if (fetchcollectionsQueryContext.isSuccess) {
+        cardobjassigner(fetchcollectionsQueryContext.data.data.collections);
+      }
+    }
+  }, [fetchcollectionsQueryContext.isSuccess]);
+  React.useEffect(function () {
+    favassigner();
+  }, [favoriteprojectscountContext]);
+
+  var favassigner = function favassigner() {
+    if (fetchingtype == 'products') {
+      if (cardsarray.length != 0) {
+        if (favoriteprojectscountContext != undefined && Array.isArray(favoriteprojectscountContext)) {
+          var tempcardsarray = _toConsumableArray__default["default"](cardsarray);
+
+          tempcardsarray.forEach(function (arrayItem, arrayindex) {
+            arrayItem.IsFavExists = false;
+          });
+          tempcardsarray.forEach(function (arrayItem, arrayindex) {
+            favoriteprojectscountContext.forEach(function (favitem, favindex) {
+              if (arrayItem.productid == favitem) {
+                arrayItem.IsFavExists = true;
+              }
+            });
+          });
+          setcardsarray(_toConsumableArray__default["default"](tempcardsarray));
+        }
+      }
+    }
+  };
+
+  var cardobjassigner = function cardobjassigner(fetchedarray) {
+    var temparray = [];
+    fetchedarray.forEach(function (arrayItem, arrayindex) {
+      var cardobj = {
+        name: '',
+        image: ''
+      };
+
+      if (fetchingtype == 'products') {
+        var itemquantity = 0;
+
+        if (langdetect == 'en') {
+          cardobj.name = arrayItem.productinfo.name_en;
+        } else {
+          cardobj.name = arrayItem.productinfo.name_ar;
+        }
+
+        if (langdetect == 'en') {
+          cardobj.description = arrayItem.productinfo.description_en;
+        } else {
+          cardobj.description = arrayItem.productinfo.description_ar;
+        }
+
+        if (arrayItem.productinfo.hasvariants == 0) {
+          fetchcustomercartQueryContext.data.data.customercart.cartitems.forEach(function (cartitem, cartindex) {
+            if (cartitem.productid == arrayItem.productinfo.productid) {
+              itemquantity = cartitem.quantity;
+            }
+          });
+        }
+
+        cardobj.image = arrayItem.productinfo.productmainimage;
+        cardobj.hassale = arrayItem.productinfo.hassale;
+        cardobj.productid = arrayItem.productinfo.productid;
+        cardobj.hasvariants = arrayItem.productinfo.hasvariants;
+        cardobj.description_en = arrayItem.productinfo.description_en;
+        cardobj.description_ar = arrayItem.productinfo.description_ar;
+        cardobj.defaultprice = arrayItem.productinfo.defaultprice;
+        cardobj.defaultsaleprice = arrayItem.productinfo.defaultsaleprice;
+        cardobj.productimages = arrayItem.productinfo.productimages;
+        cardobj.quantity = itemquantity;
+        cardobj.timestamp = arrayItem.productinfo.timestamp;
+
+        if (favoriteprojectscountContext != undefined && favoriteprojectscountContext.length != 0) {
+          favoriteprojectscountContext.forEach(function (favitem, favindex) {
+            if (arrayItem.productinfo.productid == favitem) {
+              cardobj.IsFavExists = true;
+            }
+          });
+        }
+      } else if (fetchingtype == 'collections') {
+        cardobj.collectionid = arrayItem.collectionid;
+
+        if (langdetect == 'en') {
+          cardobj.name = arrayItem.title_en;
+          cardobj.description = arrayItem.description_en;
+        } else if (langdetect == 'ar') {
+          cardobj.name = arrayItem.title_ar;
+          cardobj.description = arrayItem.description_ar;
+        }
+
+        cardobj.image = arrayItem.collectionlogo;
+      } else ;
+
+      temparray.push(cardobj);
+    });
+    setcardsarray([].concat(temparray));
+  };
+
+  var section_cssstyles = {
+    sectiontitlespan: glamor.css({
+      ':after': {
+        height: '5px',
+        width: sectionproperties.sectitle_lineafterwidth + '%',
+        backgroundColor: sectionproperties.linebgcolor
+      }
+    }),
+    line_left: glamor.css({
+      height: '1px',
+      position: 'relative',
+      flex: '1 1 auto',
+      minWidth: '10%',
+      background: sectionproperties.linebgcolor
+    }),
+    line_right: glamor.css({
+      height: '1px',
+      position: 'relative',
+      flex: '1 1 auto',
+      minWidth: '10%',
+      background: sectionproperties.linebgcolor
+    }),
+    cards_sections: glamor.css({
+      marginTop: sectionproperties.marginTop + 'px',
+      marginBottom: sectionproperties.marginBottom + 'px',
+      paddingLeft: langdetect == 'en' ? sectionproperties.paddingLeft + 'px' : sectionproperties.paddingRight + 'px',
+      paddingRight: langdetect == 'en' ? sectionproperties.paddingRight + 'px' : sectionproperties.paddingLeft + 'px',
+      paddingTop: sectionproperties.paddingTop + 'px',
+      paddingBottom: sectionproperties.paddingBottom + 'px',
+      borderBottomLeftRadius: sectionproperties.borderBottomLeftRadius + 'px',
+      borderBottomRightRadius: sectionproperties.borderBottomRightRadius + 'px',
+      borderTopLeftRadius: sectionproperties.borderTopLeftRadius + 'px',
+      borderTopRightRadius: sectionproperties.borderTopRightRadius + 'px',
+      boxShadow: sectionproperties.sectioncardshadow == 'Show' ? '0 0 10px ' + sectionproperties.sectioncardshadowcolor : 'none',
+      borderColor: sectionproperties.sectioncardbordercolor,
+      border: sectionproperties.sectioncardborderwidth + 'px solid'
+    }),
+    filterbtn: glamor.css({
+      width: sectionproperties.filterbtn_Width + 'px',
+      height: sectionproperties.filterbtn_Height + 'px',
+      background: sectionproperties.filterbtn_bgtransparent == 'Transparent' ? 'transparent' : sectionproperties.filterbtn_bgColor,
+      borderBottomLeftRadius: sectionproperties.filterbtn_borderBottomLeftRadius + 'px',
+      borderBottomRightRadius: sectionproperties.filterbtn_borderBottomRightRadius + 'px',
+      borderTopLeftRadius: sectionproperties.filterbtn_borderTopLeftRadius + 'px',
+      borderTopRightRadius: sectionproperties.filterbtn_borderTopRightRadius + 'px',
+      color: sectionproperties.filterbtn_Textcolor,
+      boxShadow: sectionproperties.filterbtn_showshadow == 'Show' ? '0 0 10px ' + sectionproperties.filterbtn_shadowcolor : '',
+      marginTop: sectionproperties.filterbtn_marginTop + 'px',
+      marginBottom: sectionproperties.filterbtn_marginBottom + 'px',
+      marginLeft: sectionproperties.filterbtn_marginLeft + 'px',
+      marginRight: sectionproperties.filterbtn_marginRight + 'px',
+      transition: '.3s',
+      ':hover': {
+        background: sectionproperties.filterbtn_transparentbgcoloronhover == 'Transparent' ? 'transparent' : sectionproperties.filterbtn_bgColoronhover,
+        color: sectionproperties.filterbtn_Textcoloronhover
+      }
+    }),
+    viewmorebtn: glamor.css({
+      width: sectionproperties.viewmorebtn_Width + 'px',
+      height: sectionproperties.viewmorebtn_Height + 'px',
+      background: sectionproperties.viewmorebtn_bgtransparent == 'Transparent' ? 'transparent' : sectionproperties.viewmorebtn_bgColor,
+      borderRadius: sectionproperties.viewmorebtn_borderBottomLeftRadius + 'px',
+      color: sectionproperties.viewmorebtn_Textcolor,
+      fontSize: sectionproperties.viewmorebtn_fontSize + 'px',
+      fontWeight: sectionproperties.viewmorebtn_fontWeight,
+      textDecoration: sectionproperties.viewmorebtn_bgtransparent == 'Transparent' ? 'underline' : 'none',
+      transition: '.3s',
+      ':hover': {
+        background: sectionproperties.viewmorebtn_transparentbgcoloronhover == 'Transparent' ? 'transparent' : sectionproperties.viewmorebtn_bgColoronhover,
+        color: sectionproperties.viewmorebtn_Textcoloronhover
+      }
+    }),
+    loadbtn: glamor.css({
+      fontSize: sectionproperties.generaltext_fontSize + 'px',
+      color: sectionproperties.generaltext_fontColor,
+      fontWeight: sectionproperties.generaltext_fontWeight,
+      textDecoration: 'underline',
+      transition: '.3s',
+      ':hover': {
+        color: sectionproperties.text_secondarycolor
+      }
+    })
+  };
+
+  var cardsrender = function cardsrender() {
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      style: {
+        background: sectionproperties.backgroundColor
+      },
+      className: sectionproperties.showFilter == 'show' && sectionproperties.filterdirection == 'Vertical' ? 'col-lg-9 p-sm-0' : 'row m-0 w-100'
+    }, !fetchProductsQuery.isFetching && cardsarray.length == 0 && /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "row m-0 w-100 d-flex align-items-center",
+      style: {
+        height: '50vh'
+      }
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "col-lg-12 text-light d-flex align-items-center justify-content-center flex-column"
+    }, /*#__PURE__*/React__default["default"].createElement(md.MdOutlineLayersClear, {
+      style: {
+        fontSize: sectionproperties.noprod_iconfontSize + 'px',
+        color: sectionproperties.noprod_iconcolor
+      }
+    }), /*#__PURE__*/React__default["default"].createElement("p", {
+      style: {
+        fontSize: sectionproperties.noprod_fontSize + 'px',
+        fontWeight: sectionproperties.noprod_fontWeight,
+        textTransform: sectionproperties.noprod_textTransform,
+        color: sectionproperties.noprod_color
+      }
+    }, langdetect == 'en' ? 'No Products Found' : 'لا توجد منتجات'))), cardsarray.length != 0 && sectionproperties.length != 0 && /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "row m-0 w-100 d-flex align-items-center p-sm-0"
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "row ml-0 mr-0 w-100 pl-md-2 pr-md-2 pl-sm-2 pr-sm-2",
+      style: {
+        marginTop: sectionproperties.sectionTitleMarginTop + 'px',
+        marginBottom: sectionproperties.sectionTitleMarginBottom + 'px',
+        paddingLeft: sectionproperties.sectionTitleMarginLeft + 'px',
+        paddingRight: sectionproperties.sectionTitleMarginRight + 'px'
+      }
+    }, sectionproperties.sectiontitleshow == 'Show' && /*#__PURE__*/React__default["default"].createElement("div", {
+      className: sectionproperties.viewmorebtnshow == 'Show' ? sectionproperties.sectiontitleposition == 'Centered' ? ' col-lg-12 col-md-12 col-sm-12 d-flex align-items-center p-0  ' : ' col-lg-7 col-md-7 col-sm-7 d-flex align-items-center p-0  ' : sectionproperties.showFilter == 'show' ? ' col-lg-12 col-md-7 col-sm-7 d-flex align-items-center p-0 ' : ' col-lg-12 col-md-12 col-sm-12 d-flex align-items-center p-0 '
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      // mb-auto
+      className: "".concat(generalstyles.sectiontitlecont) + ' col-lg-12 p-0 d-flex align-items-center ',
+      style: {
+        justifyContent: sectionproperties.sectiontitleposition == 'Centered' ? 'center' : 'start'
+      }
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "d-flex align-items-center flex-row",
+      style: {
+        position: 'relative',
+        justifyContent: sectionproperties.sectiontitleposition == 'Centered' ? 'center' : '',
+        width: sectionproperties.sectiontitlestyle == 'Line Before Text' ? '100%' : ''
+      }
+    }, sectionproperties.sectiontitlestyle == 'Line Before Text' && /*#__PURE__*/React__default["default"].createElement("span", {
+      className: section_cssstyles.line_left
+    }), /*#__PURE__*/React__default["default"].createElement("p", {
+      className: sectionproperties.sectiontitlefontfamily == 'Pacifico' ? "".concat(section_cssstyles.sectiontitlespan) + ' PacificoFont mb-auto mb-0 pb-0 font-sm-18 font-md-20 wordbreak d-flex align-items-center justify-content-start ' : sectionproperties.sectiontitlefontfamily == 'Playfair' ? "".concat(section_cssstyles.sectiontitlespan) + ' PlayfairFont mb-auto mb-0 pb-0 font-sm-18 font-md-20 wordbreak d-flex align-items-center justify-content-start ' : sectionproperties.sectiontitlefontfamily == 'Great Vibes' ? "".concat(section_cssstyles.sectiontitlespan) + ' GreatvibesFont mb-auto mb-0 pb-0 font-sm-18 font-md-20 wordbreak d-flex align-items-center justify-content-start ' : "".concat(section_cssstyles.sectiontitlespan) + '  mb-auto mb-0 pb-0 font-sm-18 font-md-20 wordbreak d-flex align-items-center justify-content-start ',
+      style: {
+        fontSize: sectionproperties.sectionTitleFontSize + 'px',
+        color: sectionproperties.sectionTitleColor,
+        fontWeight: sectionproperties.sectionTitleFontWeight,
+        paddingLeft: sectionproperties.sectiontitlestyle == 'Line Before Text' ? '12px' : 0,
+        paddingRight: sectionproperties.sectiontitlestyle == 'Line Before Text' ? '12px' : 0,
+        textAlign: sectionproperties.sectiontitleposition == 'Centered' ? 'center' : ''
+      }
+    }, langdetect == 'en' ? sectionproperties.sectionTitleContent : sectionproperties.sectionTitleContent_ar), sectionproperties.sectiontitlestyle == 'Line Before Text' && /*#__PURE__*/React__default["default"].createElement("span", {
+      className: section_cssstyles.line_right
+    })))), sectionproperties.prodCatShow == 'Show' && /*#__PURE__*/React__default["default"].createElement("div", {
+      className: ' col-lg-12 d-flex align-items-center  ',
+      style: {
+        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'
+      }
+    }, /*#__PURE__*/React__default["default"].createElement("p", {
+      className: "m-0 p-0 wordbreak ",
+      style: {
+        fontSize: sectionproperties.prodCatFontSize + 'px',
+        color: sectionproperties.prodCatColor,
+        fontWeight: sectionproperties.prodCatFontWeight,
+        textAlign: sectionproperties.descriptionCentered == 'Centered' ? 'center' : langdetect == 'en' ? 'left' : 'right'
+      }
+    }, langdetect == 'en' ? sectionproperties.descriptionContentEn : sectionproperties.descriptionContentAr)), /*#__PURE__*/React__default["default"].createElement("div", {
+      className: sectionproperties.sectiontitleposition == 'Centered' ? 'col-lg-12 col-md-12 col-sm-12 d-flex align-item-center justify-content-center p-0' : 'col-lg-5 col-md-5 col-sm-5 d-flex align-item-center justify-content-end justify-content-sm-center p-0',
+      style: {
+        marginTop: sectionproperties.sectiontitleposition == 'Centered' ? '10px' : 0
+      }
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: sectionproperties.sectiontitleposition == 'Centered' ? ' row m-0 w-100 d-flex align-item-center justify-content-center ' : ' row m-0 w-100 d-flex align-item-center justify-content-end '
+    }, sectionproperties.viewmorebtnshow == 'Show' && /*#__PURE__*/React__default["default"].createElement("button", {
+      className: sectionproperties.sectiontitleposition == 'Centered' ? "".concat(section_cssstyles.viewmorebtn) + ' m-sm-0 allcentered mt-auto mb-auto ' : "".concat(section_cssstyles.viewmorebtn) + ' w-sm-auto btn-circle-resp m-sm-0 mt-auto mb-auto ',
+      onClick: function onClick() {
+        if (fetchingtype == 'products') {
+          if (ProductsFetchingTypeSectionObj.productfetchingtype == 'Collection') {
+            routingcountext(StaticPagesLinksContext.GeneralProductsComponent, true, ProductsFetchingTypeSectionObj.collectionid);
+          } else {
+            routingcountext(StaticPagesLinksContext.GeneralProductsComponent, false);
+          }
+        } else {
+          routingcountext(StaticPagesLinksContext.GeneralProductsComponent, false);
+        }
+      }
+    }, /*#__PURE__*/React__default["default"].createElement("span", {
+      className: sectionproperties.sectiontitleposition == 'Centered' ? 'd-flex justify-content-center align-items-center' : 'd-flex justify-content-center align-items-center d-md-none'
+    }, langdetect == 'en' ? sectionproperties.viewmorebtn_text : sectionproperties.viewmorebtn_text_ar), /*#__PURE__*/React__default["default"].createElement("span", {
+      className: sectionproperties.sectiontitleposition == 'Centered' ? 'd-none align-items-center justify-content-center' : 'd-none d-md-flex align-items-center justify-content-center'
+    }, /*#__PURE__*/React__default["default"].createElement("i", {
+      className: "h-100 d-flex align-items-center justify-content-center"
+    }, langdetect == 'en' ? /*#__PURE__*/React__default["default"].createElement(bs.BsFillArrowRightCircleFill, null) : /*#__PURE__*/React__default["default"].createElement(bs.BsFillArrowLeftCircleFill, null)))), sectionproperties.showFilter == 'show' && /*#__PURE__*/React__default["default"].createElement("button", {
+      className: sectionproperties.searchbar_show == 'Show' ? ' col-lg-3 col-md-3 pl-0 pr-0 d-none d-md-flex justify-content-end ml-1 ' : ' col-lg-12 col-sm-12 pl-0 pr-0 d-none d-md-flex justify-content-end ml-1 ',
+      onClick: function onClick() {
+        var element = document.getElementById('filterslider');
+        element.classList.add(filterstyles.filterslider_container_opened);
+      }
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "".concat(section_cssstyles.filterbtn) + ' btn-circle-resp '
+    }, /*#__PURE__*/React__default["default"].createElement("i", {
+      className: "h-100 d-flex align-items-center justify-content-center"
+    }, /*#__PURE__*/React__default["default"].createElement(fi.FiFilter, null)))))), sectionproperties.showseparator == 'Show' && /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "col-lg-12 p-0"
+    }, /*#__PURE__*/React__default["default"].createElement("hr", {
+      className: "mt-3 mb-2",
+      style: {
+        borderColor: sectionproperties.upperseparatorbgcolor
+      }
+    }))), StatePagePropertiesContext.pageobj.sections[props.sectionindexprops].childsections.map(function (item, index) {
+      if (item.tabexsectioninfo != null) {
+        if (item.sectionstructype == 'child' && TabexSectionsComponentsContext[item.tabexsectioninfo.sectioncompname] != undefined) {
+          var Sectioncomp = TabexSectionsComponentsContext[item.tabexsectioninfo.sectioncompname];
+          return /*#__PURE__*/React__default["default"].createElement("div", {
+            className: sectionproperties.paddingLeft != 0 && sectionproperties.paddingRight != 0 ? section_cssstyles.cards_sections + ' row ml-0 mr-0 w-100 pl-md-2 pr-md-2 ' : sectionproperties.paddingRight != 0 ? section_cssstyles.cards_sections + ' row ml-0 mr-0 w-100 pr-md-2 ' : sectionproperties.paddingLeft != 0 ? section_cssstyles.cards_sections + ' row ml-0 mr-0 w-100 pl-md-2 ' : section_cssstyles.cards_sections + ' row ml-0 mr-0 w-100 '
+          }, sectionproperties.view_as_slider_vertical == 'Slider (Horizontal)' && /*#__PURE__*/React__default["default"].createElement("div", {
+            className: langdetect == 'en' ? 'col-lg-12 p-0 pl-sm-2' : 'col-lg-12 p-0 pr-sm-2'
+          }, /*#__PURE__*/React__default["default"].createElement(reactHorizontalScrollingMenu.ScrollMenu, {
+            transitionBehavior: 'auto',
+            wrapperClassName: '',
+            itemClassName: item.tabexsectioninfo.sectioncompname == 'Productcard6' ? 'scrollmenuclassnameitemProductcard6' : item.tabexsectioninfo.sectioncompname == 'Productcard_with_circularhover' ? 'scrollmenuclassnameitemProductcard_with_circularhover' : item.tabexsectioninfo.sectioncompname == 'Productcard_with_circularbg' ? 'scrollmenuclassnameitemProductcard_with_circularbg' : item.tabexsectioninfo.sectioncompname == 'Categorycard_with_twolinestransition' ? 'scrollmenuclassnameitemCategorycard_with_twolinestransition' : item.tabexsectioninfo.sectioncompname == 'Productcard_with_slideanimation' ? 'scrollmenuclassnameitemProductcard_with_slideanimation' : item.tabexsectioninfo.sectioncompname == 'Categorycard_withtext' ? 'scrollmenuclassnameitemCategorycard_withtext' : item.tabexsectioninfo.sectioncompname == 'Productcard_animatedbuttons' ? 'scrollmenuclassnameitemProductcard_animatedbuttons' : item.tabexsectioninfo.sectioncompname == 'Productcard_with_variants' ? 'scrollmenuclassnameitemProductcard_with_variants' : item.tabexsectioninfo.sectioncompname == 'Productcarddefault' ? 'scrollmenuclassnameitemProductcarddefault' : item.tabexsectioninfo.sectioncompname == 'Simpleproductcard' ? 'scrollmenuclassnameitemSimpleproductcard' : item.tabexsectioninfo.sectioncompname == 'Categorycard_with_trianglebg' ? 'scrollmenuclassnameitemCategorycard_with_trianglebg' : item.tabexsectioninfo.sectioncompname == 'Productcard_with_textonhover' ? 'scrollmenuclassnameitemProductcard_with_textonhover' : item.tabexsectioninfo.sectioncompname == 'Categorycard_slidebgscaled' ? 'scrollmenuclassnameitemCategorycard_slidebgscaled' : item.tabexsectioninfo.sectioncompname == 'Productccard_with_imageontopleft' ? 'scrollmenuclassnameitemProductccard_with_imageontopleft' : item.tabexsectioninfo.sectioncompname == 'Productcard_with_zoominonhover' ? 'scrollmenuclassnameitemProductcard_with_zoominonhover' : item.tabexsectioninfo.sectioncompname == 'Horizontalcard' ? 'scrollmenuclassnameitemProductcard_Horizontalcard' : item.tabexsectioninfo.sectioncompname == 'Categorycard_fullimage' ? 'scrollmenuclassnameitemCategorycard_fullimage' : item.tabexsectioninfo.sectioncompname == 'Classiccategorycard' ? 'scrollmenuclassnameitemClassiccategorycard' : item.tabexsectioninfo.sectioncompname == 'ModernProductCard' ? 'scrollmenuclassnameitemModernProductCard' : item.tabexsectioninfo.sectioncompname == 'Simplecategorycardwithtextbelow' ? 'scrollmenuclassnameitemSimplecategorycardwithtextbelow' : item.tabexsectioninfo.sectioncompname == 'Productcard7' ? 'scrollmenuclassnameitemProductcard7' : item.tabexsectioninfo.sectioncompname == 'MenuCard' ? 'scrollmenuclassnameitemMenuCard' : 'scrollmenuclassnameitem',
+            scrollContainerClassName: 'scrollmenuclasssubscrollbar'
+          }, cardsarray.map(function (cardinfoitem, cardinfoindex) {
+            return /*#__PURE__*/React__default["default"].createElement("div", {
+              className: ' col-xl-12 p-0 col-lg-12 col-md-12 col-sm-12 w-100' // style={{
+              //     minWidth:
+              //         item.tabexsectioninfo.sectioncompname == 'Productcard_animatedbuttons' ||
+              //         item.tabexsectioninfo.sectioncompname == 'Horizontalcard'
+              //             ? sectionproperties.width + 'px'
+              //             : '',
+              //     maxWidth:
+              //         item.tabexsectioninfo.sectioncompname == 'Productcard_animatedbuttons' ||
+              //         item.tabexsectioninfo.sectioncompname == 'Horizontalcard'
+              //             ? sectionproperties.width + 'px'
+              //             : '',
+              // }}
+
+            }, /*#__PURE__*/React__default["default"].createElement(Sectioncomp, _extends__default["default"]({
+              sectiontypeprops: 'horizontal',
+              fetchingtypeprops: fetchingtype,
+              cardinfoindexprops: cardinfoindex,
+              cardinfoitemprops: cardinfoitem,
+              sectionindexprops: index,
+              sectionidprops: item.sectionid
+            }, props)));
+          }), fetchingtype == 'products' && fetchProductsQuery.isFetchingNextPage && /*#__PURE__*/React__default["default"].createElement("button", {
+            className: section_cssstyles.loadbtn + ' d-flex justify-content-end align-items-center ',
+            ref: ref,
+            onClick: function onClick() {
+              return fetchProductsQuery.fetchNextPage();
+            },
+            disabled: !fetchProductsQuery.hasNextPage || fetchProductsQuery.isFetchingNextPage
+          }, /*#__PURE__*/React__default["default"].createElement(CircularProgress, {
+            color: "#000",
+            width: "20px",
+            height: "20px",
+            duration: "1s"
+          })))), sectionproperties.view_as_slider_vertical != 'Slider (Horizontal)' && /*#__PURE__*/React__default["default"].createElement("div", {
+            className: "row m-0 w-100 "
+          }, cardsarray.map(function (cardinfoitem, cardinfoindex) {
+            return /*#__PURE__*/React__default["default"].createElement("div", {
+              className: sectionproperties.numberOfColsvertical == '1' ? item.tabexsectioninfo.sectioncompname == 'Productcard_with_circularhover' ? ' col-xl-12 p-0 col-lg-12 col-md-4 p-0 d-flex justify-content-center col-sm-6 ' : item.tabexsectioninfo.sectioncompname == 'Productccard_with_imageontopleft' ? ' col-xl-12 p-0 col-lg-12 col-md-12 col-sm-6 d-flex justify-content-center p-0 ' : item.tabexsectioninfo.sectioncompname == 'ModernProductCard' ? ' col-xl-12 p-0 col-lg-12 col-md-12 col-sm-12 d-flex justify-content-center p-0 ' : item.tabexsectioninfo.sectioncompname == 'MenuCard' ? ' col-xl-12 p-0 col-lg-12 col-md-12 col-sm-12 d-flex justify-content-center p-0 ' : ' col-xl-12 p-0 col-lg-12 col-md-6 col-sm-12 d-flex justify-content-center p-0 ' : sectionproperties.numberOfColsvertical == '2' ? item.tabexsectioninfo.sectioncompname == 'Productcard_with_circularhover' ? ' col-xl-6 p-0 col-lg-6 col-md-4 col-sm-6 d-flex justify-content-center p-0  ' : item.tabexsectioninfo.sectioncompname == 'Productccard_with_imageontopleft ' ? ' col-xl-6 p-0 col-lg-6 col-md-6 col-sm-6 d-flex justify-content-center p-0 ' : item.tabexsectioninfo.sectioncompname == 'ModernProductCard' ? ' col-xl-6 p-0 col-lg-6 col-md-6 col-sm-12 d-flex justify-content-center p-0 ' : item.tabexsectioninfo.sectioncompname == 'MenuCard' ? ' col-xl-6 p-0 col-lg-6 col-md-12 col-sm-12 d-flex justify-content-center p-0 ' : ' col-xl-6 p-0 col-lg-6 col-md-6 col-sm-12 d-flex justify-content-center p-0' : sectionproperties.numberOfColsvertical == '3' ? item.tabexsectioninfo.sectioncompname == 'Productcard_with_circularhover' ? ' col-xl-4 col-lg-4 col-md-4 col-sm-6 p-0 d-flex justify-content-center ' : item.tabexsectioninfo.sectioncompname == 'Productccard_with_imageontopleft' ? ' col-xl-4 col-lg-4 col-md-4 col-sm-6 d-flex justify-content-center p-0 ' : item.tabexsectioninfo.sectioncompname == 'ModernProductCard' ? ' col-xl-4 p-0 col-lg-4 col-md-4 col-sm-12 d-flex justify-content-center p-0 ' : item.tabexsectioninfo.sectioncompname == 'MenuCard' ? ' col-xl-4 p-0 col-lg-4 col-md-12 col-sm-12 d-flex justify-content-center p-0 ' : ' col-xl-4 col-lg-4 col-md-6 col-sm-12 d-flex justify-content-center p-0 ' : sectionproperties.numberOfColsvertical == '4' ? item.tabexsectioninfo.sectioncompname == 'Productcard_with_circularhover' ? ' col-xl-3 p-0  col-lg-4 col-md-4 col-sm-6 d-flex justify-content-center p-0 ' : item.tabexsectioninfo.sectioncompname == 'Productccard_with_imageontopleft' ? ' col-xl-3 p-0  col-lg-4 col-md-4 col-sm-6 d-flex justify-content-center p-0 ' : item.tabexsectioninfo.sectioncompname == 'ModernProductCard' ? ' col-xl-3 p-0 col-lg-4 col-md-6 col-sm-12 d-flex justify-content-center p-0 ' : item.tabexsectioninfo.sectioncompname == 'MenuCard' ? ' col-xl-3 p-0 col-lg-3 col-md-12 col-sm-12 d-flex justify-content-center p-0 ' : ' col-xl-3 col-lg-4 col-md-4 col-sm-6 p-0 d-flex justify-content-center p-0 ' : sectionproperties.numberOfColsvertical == '12' ? item.tabexsectioninfo.sectioncompname == 'Productcard_with_circularhover' ? ' col-xl-3 col-lg-4 col-md-4 col-sm-6 d-flex justify-content-center p-0 ' : item.tabexsectioninfo.sectioncompname == 'Productccard_with_imageontopleft' ? ' col-xl-3 col-lg-4 col-md-4 col-sm-6  d-flex justify-content-center p-0 ' : item.tabexsectioninfo.sectioncompname == 'MenuCard' ? ' col-xl-3 p-0 col-lg-4 col-md-12 col-sm-12 d-flex justify-content-center p-0 ' : '' : sectionproperties.numberOfColsvertical == '6' ? item.tabexsectioninfo.sectioncompname == 'Productcard_with_circularhover' ? '  col-xl-2 col-lg-4 col-md-4 col-sm-6 d-flex justify-content-center p-0 ' : item.tabexsectioninfo.sectioncompname == 'Productccard_with_imageontopleft' ? '  col-xl-2 col-lg-4 col-md-4 col-sm-6 d-flex justify-content-center p-0 ' : item.tabexsectioninfo.sectioncompname == 'MenuCard' ? ' col-xl-2 p-0 col-lg-2 col-md-12 col-sm-12 d-flex justify-content-center p-0 ' : ' col-xl-2 col-lg-4 col-md-6 col-sm-12 d-flex justify-content-center p-0 ' : ''
+            }, /*#__PURE__*/React__default["default"].createElement(Sectioncomp, _extends__default["default"]({
+              sectiontypeprops: 'horizontal',
+              fetchingtypeprops: fetchingtype,
+              cardinfoindexprops: cardinfoindex,
+              cardinfoitemprops: cardinfoitem,
+              sectionindexprops: index,
+              sectionidprops: item.sectionid
+            }, props)));
+          }), fetchingtype == 'products' && /*#__PURE__*/React__default["default"].createElement("div", {
+            className: "w-100 col-lg-12 allcentered"
+          }, /*#__PURE__*/React__default["default"].createElement("button", {
+            className: section_cssstyles.loadbtn + ' d-flex justify-content-end align-items-center ' // ref={ref}
+            ,
+            onClick: function onClick() {
+              return fetchProductsQuery.fetchNextPage();
+            },
+            disabled: !fetchProductsQuery.hasNextPage || fetchProductsQuery.isFetchingNextPage
+          }, fetchProductsQuery.isFetchingNextPage ? /*#__PURE__*/React__default["default"].createElement(CircularProgress, {
+            color: "#000",
+            width: "20px",
+            height: "20px",
+            duration: "1s"
+          }) : fetchProductsQuery.hasNextPage ? 'Load more' : /*#__PURE__*/React__default["default"].createElement(CircularProgress, {
+            color: "#000",
+            width: "20px",
+            height: "20px",
+            duration: "1s"
+          })))));
+        }
+      }
+    })));
+  };
+
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: sectionproperties.card_marginLeft != 0 && sectionproperties.card_marginRight != 0 ? // mb-md-4
+    ' row m-0 d-flex w-100 justify-content-center align-items-center pl-md-2 pr-md-2 ' : sectionproperties.card_marginRight != 0 ? ' row m-0 d-flex w-100 justify-content-center align-items-center pr-md-2 ' : sectionproperties.card_marginLeft != 0 ? ' row m-0 d-flex w-100 justify-content-center align-items-center pl-md-2 ' : ' row m-0 d-flex w-100 justify-content-center align-items-center ',
+    style: {
+      zIndex: 2,
+      paddingLeft: langdetect == 'en' ? sectionproperties.card_marginLeft + 'px' : sectionproperties.card_marginRight + 'px',
+      paddingRight: langdetect == 'en' ? sectionproperties.card_marginRight + 'px' : sectionproperties.card_marginLeft + 'px'
+    }
+  }, sectionproperties.length != 0 && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: ' row ml-0 mr-0 d-flex align-items-center justify-content-center w-md-100 h-md-100 w-100 '
+  }, sectionproperties.showFilter == 'show' && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: sectionproperties.filterdirection == 'Horizontal' ? ' col-lg-12 ' : 'col-lg-3'
+  }, /*#__PURE__*/React__default["default"].createElement(Filter, {
+    sectionpropertiesprops: sectionproperties
+  })), fetchingtype == 'custom' && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, cardsrender()), fetchingtype != 'custom' && cardsrender()));
+};
+
+var cardsstyles = {"productcard":"Productccard_with_zoominonhover-module_productcard__8ASdR","card_thumbnail":"Productccard_with_zoominonhover-module_card_thumbnail__xCWyB","wishlistbtn":"Productccard_with_zoominonhover-module_wishlistbtn__-9K6V","card_inner":"Productccard_with_zoominonhover-module_card_inner__-pVNl","product_details":"Productccard_with_zoominonhover-module_product_details__3SLId","card_informationcontainer":"Productccard_with_zoominonhover-module_card_informationcontainer__suyHK","price":"Productccard_with_zoominonhover-module_price__12djA"};
+
+function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var Productcard_with_zoominonhover = function Productcard_with_zoominonhover(props) {
+  var _css;
+
+  // const { lang, langdetect } = useContext(LanguageContext);
+  // const { fetch_inst_tabex_websitetemplatesQueryContext, sectionindexcontext, pageindexcontext, StatePagePropertiesContext } = useContext(WebsiteDesignWorkPlaceContext);
+  // const { addtofavoritescontext, setShowProductInfoModalContext, ProductIdProdutInfoModalContext, setProductIdProdutInfoModalContext, AddtoCartContext, AddtoCartMutationContext } =
+  //     useContext(FetchingContext);
+  var _useState = React.useState(''),
+      _useState2 = _slicedToArray__default["default"](_useState, 2),
+      sectionproperties = _useState2[0],
+      setsectionproperties = _useState2[1];
+
+  var _useState3 = React.useState(props.cardinfoitemprops),
+      _useState4 = _slicedToArray__default["default"](_useState3, 2),
+      item = _useState4[0],
+      setitem = _useState4[1];
+
+  var StatePagePropertiesContext = props.actions.StatePagePropertiesContext;
+  var lang = props.actions.lang;
+  var langdetect = props.actions.langdetect;
+  var setShowProductInfoModalContext = props.actions.setShowProductInfoModalContext;
+  var addtofavoritescontext = props.actions.addtofavoritescontext;
+  var setProductIdProdutInfoModalContext = props.actions.setProductIdProdutInfoModalContext;
+  var AddtoCartContext = props.actions.AddtoCartContext;
+  var AddtoCartMutationContext = props.actions.AddtoCartMutationContext;
+  var NotificationManager = NotificationManager;
+  React.useEffect(function () {
+    if (props.srcfrom == 'addsectionform') {
+      var secpropobj = {};
+      props.defaultproperties.forEach(function (defaultpropobj, defaultpropindex) {
+        secpropobj[defaultpropobj.property_css_name] = defaultpropobj.property_value;
+      });
+      setsectionproperties(_objectSpread$1({}, secpropobj));
+    } else {
+      var secpropobj = {};
+      StatePagePropertiesContext.pageobj.sections.forEach(function (sectionitem, sectionindex) {
+        if (sectionitem.sectionid == props.sectionidprops) {
+          sectionitem.sectionproperties.forEach(function (sectionpropertiesobj, sectionpropertiesindex) {
+            secpropobj[sectionpropertiesobj.property_css_name] = sectionpropertiesobj.property_value;
+          });
+        }
+      });
+      setsectionproperties(_objectSpread$1({}, secpropobj));
+    }
+  }, [StatePagePropertiesContext]);
+  React.useEffect(function () {
+    if (props.cardinfoitemprops != undefined) {
+      setitem(props.cardinfoitemprops);
+    }
+  }, [props.cardinfoitemprops]);
+
+  var updatequantity = function updatequantity(type) {
+    var tempitem = _objectSpread$1({}, item);
+
+    tempitem.quantity = parseInt(tempitem.quantity);
+
+    if (type == 'add') {
+      tempitem.quantity = tempitem.quantity + 1;
+    } else if (type == 'remove') {
+      tempitem.quantity = tempitem.quantity - 1;
+    }
+
+    if (tempitem.quantity <= 0) {
+      tempitem.quantity = 0;
+    }
+
+    setitem(_objectSpread$1({}, tempitem));
+  };
+
+  var addtocartfunc = function addtocartfunc() {
+    var addtocardpayloadobj = {
+      functype: 'add',
+      productid: item.productid,
+      variantid: '',
+      quantity: item.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('', 'Please Choose Product Options');
+        }
+      } else {
+        runfunc = true;
+      }
+    } else {
+      NotificationManager.warning('', 'Please Choose Quantity');
+    }
+
+    if (runfunc == true) {
+      AddtoCartContext(addtocardpayloadobj);
+    }
+  };
+
+  var cardsstyles2 = {
+    productcard: glamor.css({
+      background: sectionproperties.backgroundColortransparent == 'Transparent' ? 'transparent' : sectionproperties.backgroundColor,
+      opacity: sectionproperties.cardbg_opacity,
+      borderBottomLeftRadius: sectionproperties.borderBottomLeftRadius + 'px',
+      borderBottomRightRadius: sectionproperties.borderBottomRightRadius + 'px',
+      borderTopLeftRadius: sectionproperties.borderTopLeftRadius + 'px',
+      borderTopRightRadius: sectionproperties.borderTopRightRadius + 'px',
+      paddingTop: sectionproperties.paddingTop + 'px',
+      paddingBottom: sectionproperties.paddingBottom + 'px',
+      paddingLeft: sectionproperties.paddingLeft + 'px',
+      paddingRight: sectionproperties.paddingRight + 'px',
+      boxShadow: sectionproperties.sectioncardshadow == 'Show' ? '0 0 10px ' + sectionproperties.sectioncardshadowcolor : 'none',
+      border: sectionproperties.sectioncardborderwidth + 'px solid ' + sectionproperties.sectioncardbordercolor,
+      transition: '.3s',
+      ':hover': {
+        zIndex: 1000
+      }
+    }),
+    productNameStyles: glamor.css({
+      color: sectionproperties.prodNameColor,
+      fontSize: sectionproperties.prodNameFontSize + 'px',
+      textTransform: sectionproperties.prodNameTextTranform,
+      fontWeight: sectionproperties.prodNameFontWeight,
+      transition: '.3s',
+      cursor: 'pointer',
+      ':hover': {
+        color: sectionproperties.prodNameColorOnHover
+      }
+    }),
+    productDescStyles: glamor.css({
+      color: sectionproperties.prodCatColor,
+      fontSize: sectionproperties.prodCatFontSize + 'px',
+      textTransform: sectionproperties.prodCatTextTranform,
+      fontWeight: sectionproperties.prodCatFontWeight,
+      transition: '.3s'
+    }),
+    productPricestyles: glamor.css({
+      color: sectionproperties.prodPriceColor,
+      fontSize: sectionproperties.prodpriceFontSize + 'px',
+      fontWeight: sectionproperties.prodPriceFontWeight
+    }),
+    productSalePricestyles: glamor.css({
+      color: sectionproperties.prodsalePriceColor,
+      fontSize: sectionproperties.prodsalepriceFontSize + 'px',
+      fontWeight: sectionproperties.prodsalePriceFontWeight
+    }),
+    producttotalstyles: glamor.css({
+      color: sectionproperties.total_color,
+      fontSize: sectionproperties.total_fontsize + 'px',
+      fontWeight: 500
+    }),
+    wishlist_btn: glamor.css({
+      width: sectionproperties.favBtnWidth + 'px',
+      height: sectionproperties.favBtnHeight + 'px',
+      background: sectionproperties.favbtn_bgtransparent == 'Transparent' ? 'transparent' : sectionproperties.favBtnbgColor,
+      borderRadius: sectionproperties.fav_btn_borderBottomLeftRadius + 'px',
+      color: sectionproperties.favBtniconcolor,
+      fontSize: sectionproperties.favBtnTextfontsize + 'px',
+      textTransform: sectionproperties.favBtnTexttransform,
+      fontWeight: sectionproperties.favBtnTextfontweight,
+      transition: '.3s',
+      border: sectionproperties.favbtnborderwidth + 'px solid ' + sectionproperties.favbtnbordercolor,
+      ':hover': {
+        background: sectionproperties.favbtn_transparentbgcoloronhover == 'Transparent' ? 'transparent' : sectionproperties.favBtnbgColoronhover,
+        color: sectionproperties.favBtnTextcoloronhover
+      }
+    }),
+    cart_btn: glamor.css({
+      width: sectionproperties.cartBtnWidth + 'px',
+      height: sectionproperties.cartBtnHeight + 'px',
+      background: sectionproperties.cartbtn_bgtransparent == 'Transparent' ? 'transparent' : sectionproperties.cartBtnbgColor,
+      borderRadius: sectionproperties.cart_btn_borderBottomLeftRadius + 'px',
+      color: sectionproperties.cartBtnTextcolor,
+      fontSize: sectionproperties.cartBtnTextfontsize + 'px',
+      // fontSize: sectionproperties.cartBtn_iconFontSize + 'px',
+      textTransform: sectionproperties.cartBtnTexttransform,
+      fontWeight: sectionproperties.cartBtnTextfontweight,
+      border: sectionproperties.cartbtnborderwidth + 'px solid ' + sectionproperties.cartbtnbordercolor,
+      transition: '.3s',
+      ':hover': {
+        background: sectionproperties.cartbtn_transparentbgcoloronhover == 'Transparent' ? 'transparent' : sectionproperties.cartBtnbgColoronhover,
+        color: sectionproperties.cartBtnTextcoloronhover
+      }
+    }),
+    img_container: glamor.css({
+      position: 'relative',
+      height: sectionproperties.prodimage_height + 'px',
+      border: sectionproperties.prodimage_borderwidth + 'px solid ' + sectionproperties.prodimage_color,
+      borderBottomLeftRadius: sectionproperties.prodimage__borderBottomLeftRadius + 'px',
+      borderBottomRightRadius: sectionproperties.prodimage__borderBottomRightRadius + 'px',
+      borderTopLeftRadius: sectionproperties.prodimage__borderTopLeftRadius + 'px',
+      borderTopRightRadius: sectionproperties.prodimage__borderTopRightRadius + 'px',
+      background: sectionproperties.prodimage_bgcolor
+    }),
+    quantitybtn: glamor.css((_css = {
+      flex: 1,
+      border: sectionproperties.quantitybtnborderwidth + 'px solid ' + sectionproperties.quantitybtnbordercolor,
+      height: sectionproperties.quantitybtn_height + 'px'
+    }, _defineProperty__default["default"](_css, "height", '40px'), _defineProperty__default["default"](_css, "display", 'flex'), _defineProperty__default["default"](_css, "flexDirection", 'row'), _defineProperty__default["default"](_css, "overflow", 'hidden'), _defineProperty__default["default"](_css, "borderRadius", sectionproperties.quantitybtn_borderradius + 'px'), _defineProperty__default["default"](_css, "background", sectionproperties.quantitybtn_bgcolor), _defineProperty__default["default"](_css, "alignItems", 'center'), _defineProperty__default["default"](_css, "justifyContent", 'center'), _defineProperty__default["default"](_css, "margin", 0), _defineProperty__default["default"](_css, "position", 'relative'), _defineProperty__default["default"](_css, "fontWeight", sectionproperties.quantitybtn_textfontweight), _defineProperty__default["default"](_css, "color", sectionproperties.quantitybtn_textcolor), _defineProperty__default["default"](_css, "fontSize", sectionproperties.quantitybtn_textfontsize + 'px'), _css)),
+    quantitybtn_text: glamor.css({
+      margin: 'auto'
+    }),
+    add_quantitybtn_icon_container: glamor.css({
+      position: 'relative',
+      width: sectionproperties.add_quantitybtn_width + 'px',
+      height: sectionproperties.add_quantitybtn_height + 'px',
+      background: sectionproperties.add_quantitybtn_bgcolor,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderRadius: sectionproperties.add_quantitybtn_borderradius + 'px',
+      fontSize: sectionproperties.add_quantitybtn_textfontsize + 'px',
+      color: sectionproperties.add_quantitybtn_textcolor,
+      transition: '.3s',
+      ':hover': {
+        color: sectionproperties.add_quantitybtn_textcoloronhover,
+        background: sectionproperties.add_quantitybtn_bgcoloronhover
+      }
+    }),
+    minus_quantitybtn_icon_container: glamor.css({
+      position: 'relative',
+      width: sectionproperties.remove_quantitybtn_width + 'px',
+      height: sectionproperties.remove_quantitybtn_height + 'px',
+      background: sectionproperties.remove_quantitybtn_bgcolor,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderRadius: sectionproperties.remove_quantitybtn_borderradius + 'px',
+      fontSize: sectionproperties.remove_quantitybtn_textfontsize + '25px',
+      color: sectionproperties.remove_quantitybtn_textcolor,
+      transition: '.3s',
+      ':hover': {
+        color: sectionproperties.remove_quantitybtn_textcoloronhover,
+        background: sectionproperties.remove_quantitybtn_bgcoloronhover
+      }
+    })
+  };
+
+  var addtocartbuttonrender = function addtocartbuttonrender() {
+    if (AddtoCartMutationContext.isLoading) {
+      var _AddtoCartMutationCon;
+
+      if ((AddtoCartMutationContext === null || AddtoCartMutationContext === void 0 ? void 0 : (_AddtoCartMutationCon = AddtoCartMutationContext.variables) === null || _AddtoCartMutationCon === void 0 ? void 0 : _AddtoCartMutationCon.productid) == item.productid) {
+        return /*#__PURE__*/React__default["default"].createElement("div", {
+          className: ' d-flex align-items-center justify-content-center '
+        }, /*#__PURE__*/React__default["default"].createElement(CircularProgress, {
+          color: "white",
+          width: "20px",
+          height: "20px",
+          duration: "1s"
+        }));
+      } else {
+        return lang.addtocart;
+      }
+    }
+
+    if (!AddtoCartMutationContext.isLoading) {
+      return lang.addtocart;
+    }
+  };
+
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "row ml-0 mr-0 w-100 mb-sm-5",
+    style: {
+      paddingLeft: sectionproperties.card_marginLeft + 'px',
+      paddingRight: sectionproperties.card_marginRight + 'px',
+      marginBottom: sectionproperties.marginBottom + 'px',
+      minHeight: '370px'
+    }
+  }, sectionproperties.length != 0 && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(cardsstyles.productcard, " ").concat(cardsstyles2.productcard) + ' w-100 '
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(cardsstyles.card_inner)
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(cardsstyles.card_thumbnail)
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(cardsstyles.img_container, " ").concat(cardsstyles2.img_container) + ' w-100  ',
+    onClick: function onClick() {
+      setShowProductInfoModalContext(true);
+      setProductIdProdutInfoModalContext(item.productid);
+    },
+    style: {
+      cursor: 'pointer',
+      overflow: 'hidden'
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(imagekitioReact.IKImage, {
+    urlEndpoint: IKurlEndpoint,
+    publicKey: IKpublicKey,
+    path: '/tr:w-300,h-300/' + item.image,
+    style: {
+      width: '100%',
+      objectFit: 'contain',
+      position: 'relative',
+      borderBottomLeftRadius: sectionproperties.prodimage__borderBottomLeftRadius + 'px',
+      borderBottomRightRadius: sectionproperties.prodimage__borderBottomRightRadius + 'px',
+      borderTopLeftRadius: sectionproperties.prodimage__borderTopLeftRadius + 'px',
+      borderTopRightRadius: sectionproperties.prodimage__borderTopRightRadius + 'px',
+      marginBottom: 'auto'
+    },
+    loading: "lazy"
+  })), sectionproperties.favBtnShow == 'Show' && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(cardsstyles.wishlistbtn),
+    onClick: function onClick() {
+      addtofavoritescontext(item.productid);
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("button", {
+    className: " ".concat(cardsstyles2.wishlist_btn) + ' m-0 p-0 d-flex align-items-center justify-content-center ',
+    style: {
+      position: 'absolute',
+      top: 10,
+      right: 10,
+      background: item.IsFavExists == true ? sectionproperties.activebgcolor : ''
+    }
+  }, item.IsFavExists && /*#__PURE__*/React__default["default"].createElement("i", {
+    className: "h-100 d-flex align-items-center justify-content-center"
+  }, /*#__PURE__*/React__default["default"].createElement(ai.AiFillStar, {
+    size: sectionproperties.favBtnIconfontsize,
+    style: {
+      color: sectionproperties.activefaviconcolor
+    }
+  })), !item.IsFavExists && /*#__PURE__*/React__default["default"].createElement("i", {
+    className: "h-100 d-flex align-items-center justify-content-center"
+  }, /*#__PURE__*/React__default["default"].createElement(ai.AiFillStar, {
+    size: sectionproperties.favBtnIconfontsize
+  }))))), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(cardsstyles.product_details) + ' mb-2 '
+  }, sectionproperties.prodNameShow == 'Show' && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "col-lg-12",
+    style: {
+      minHeight: '5vh'
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("p", {
+    className: "".concat(cardsstyles2.productNameStyles) + ' m-0 p-0 wordbreak wordbreak2 ',
+    style: {
+      textAlign: langdetect == 'en' ? 'left' : 'right'
+    }
+  }, item.name)), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "col-lg-12 d-flex align-items-center"
+  }, sectionproperties.prodPriceShow == 'Show' && /*#__PURE__*/React__default["default"].createElement("p", {
+    className: "".concat(cardsstyles2.productPricestyles) + ' m-0 p-0 wordbreak ',
+    style: {
+      textAlign: langdetect == 'en' ? 'left' : 'right'
+    }
+  }, langdetect == 'en' ? 'EGP' : '', " ", item.hassale == 1 ? item.defaultsaleprice : item.defaultprice, " ", langdetect == 'en' ? '' : 'ج.م'), item.hassale == 1 && /*#__PURE__*/React__default["default"].createElement("p", {
+    className: "".concat(cardsstyles2.productSalePricestyles) + ' linethrough mt-auto mb-0 p-0 wordbreak mr-1 ml-1  ',
+    style: {
+      textAlign: langdetect == 'en' ? 'left' : 'right'
+    }
+  }, langdetect == 'en' ? 'EGP' : '', " ", item.defaultprice, " ", langdetect == 'en' ? '' : 'ج.م'))), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(cardsstyles.card_informationcontainer)
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "row m-0 w-100 d-flex align-items-center"
+  }, /*#__PURE__*/React__default["default"].createElement("button", {
+    className: "".concat(cardsstyles2.quantitybtn) + ' p-0 d-flex align-items-center justify-content-center '
+  }, langdetect == 'en' && /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "".concat(cardsstyles2.minus_quantitybtn_icon_container) + ' m-1 ',
+    style: {
+      transform: ' rotate(-180deg)'
+    },
+    onClick: function onClick() {
+      if (item.hasvariants == 0) {
+        updatequantity('remove');
+      } else {
+        setShowProductInfoModalContext(true);
+        setProductIdProdutInfoModalContext(item.productid);
+      }
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("i", {
+    className: "fa fa-chevron-up font-12"
+  })), langdetect == 'ar' && /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "".concat(cardsstyles2.add_quantitybtn_icon_container) + ' m-1 ',
+    onClick: function onClick() {
+      updatequantity('add');
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("i", {
+    className: "fa fa-chevron-up font-12"
+  })), /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "".concat(cardsstyles2.quantitybtn_text) + ' d-flex align-items-center justify-content-center '
+  }, item.quantity), langdetect == 'ar' && /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "".concat(cardsstyles2.minus_quantitybtn_icon_container) + ' m-1 ',
+    style: {
+      transform: ' rotate(-180deg)'
+    },
+    onClick: function onClick() {
+      updatequantity('remove');
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("i", {
+    className: "fa fa-chevron-up font-12"
+  })), langdetect == 'en' && /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "".concat(cardsstyles2.add_quantitybtn_icon_container) + ' m-1 ',
+    onClick: function onClick() {
+      if (item.hasvariants == 0) {
+        updatequantity('add');
+      } else {
+        setShowProductInfoModalContext(true);
+        setProductIdProdutInfoModalContext(item.productid);
+      }
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("i", {
+    className: "fa fa-chevron-up font-12"
+  }))), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "d-flex justify-content-start pl-2 pr-2",
+    style: {
+      flex: 1
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("p", {
+    className: "".concat(cardsstyles2.producttotalstyles) + ' mb-0 ',
+    style: {
+      textAlign: langdetect == 'en' ? 'left' : 'right'
+    }
+  }, lang.total, ": ", /*#__PURE__*/React__default["default"].createElement("br", null), /*#__PURE__*/React__default["default"].createElement("span", {
+    style: {
+      color: sectionproperties.total_secondaryColor,
+      fontWeight: sectionproperties.total_fontweight,
+      textAlign: langdetect == 'en' ? 'left' : 'right'
+    }
+  }, langdetect == 'en' ? 'EGP' : '', " ", item.hassale == 1 ? item.quantity * item.defaultsaleprice : item.quantity * item.defaultprice, ' ', langdetect == 'en' ? '' : 'ج.م')))), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "col-lg-12 d-flex align-items-center justify-content-center p-0 mb-2 mt-2"
+  }, sectionproperties.cartBtnShow == 'Show' && /*#__PURE__*/React__default["default"].createElement("p", {
+    className: "".concat(cardsstyles2.cart_btn) + ' font-md-13 m-0 p-0 d-flex align-items-center justify-content-center cursor-pointer ',
+    onClick: function onClick() {
+      if (item.hasvariants == 0) {
+        addtocartfunc();
+      } else {
+        setShowProductInfoModalContext(true);
+        setProductIdProdutInfoModalContext(item.productid);
+      }
+    },
+    disabled: AddtoCartMutationContext.isLoading
+  }, /*#__PURE__*/React__default["default"].createElement("i", {
+    className: langdetect == 'en' ? 'h-100 mr-2 d-flex align-items-center justify-content-center' : 'h-100 ml-2 d-flex align-items-center justify-content-center'
+  }, /*#__PURE__*/React__default["default"].createElement(fi.FiShoppingCart, {
+    size: sectionproperties.cartBtn_iconFontSize
+  })), addtocartbuttonrender()))))));
+};
+
+var cardstyles = {"categoryCard":"categorycard3-module_categoryCard__3mSQo"};
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var Categorycard_with_twolinestransition = function Categorycard_with_twolinestransition(props) {
+  var _css;
+
+  // const { lang, setlang, langdetect } = useContext(LanguageContext);
+  // const { fetch_inst_tabex_websitetemplatesQueryContext, sectionindexcontext, pageindexcontext, StatePagePropertiesContext } = React.useContext(WebsiteDesignWorkPlaceContext);
+  // const { routingcountext, StaticPagesLinksContext } = useContext(TemplateRoutingContext);
+  var _useState = React.useState(''),
+      _useState2 = _slicedToArray__default["default"](_useState, 2),
+      sectionproperties = _useState2[0],
+      setsectionproperties = _useState2[1];
+
+  var _useState3 = React.useState(props.cardinfoitemprops),
+      _useState4 = _slicedToArray__default["default"](_useState3, 2),
+      item = _useState4[0];
+      _useState4[1];
+
+  var _useState5 = React.useState(props.cardinfoindexprops),
+      _useState6 = _slicedToArray__default["default"](_useState5, 2);
+      _useState6[0];
+      _useState6[1];
+
+  var StatePagePropertiesContext = props.actions.StatePagePropertiesContext;
+  props.actions.lang;
+  var langdetect = props.actions.langdetect;
+  React.useEffect(function () {
+    if (props.srcfrom == 'addsectionform') {
+      var secpropobj = {};
+      props.defaultproperties.forEach(function (defaultpropobj, defaultpropindex) {
+        secpropobj[defaultpropobj.property_css_name] = defaultpropobj.property_value;
+      });
+      setsectionproperties(_objectSpread({}, secpropobj));
+    } else {
+      var secpropobj = {};
+      StatePagePropertiesContext.pageobj.sections.forEach(function (sectionitem, sectionindex) {
+        if (sectionitem.sectionid == props.sectionidprops) {
+          sectionitem.sectionproperties.forEach(function (sectionpropertiesobj, sectionpropertiesindex) {
+            secpropobj[sectionpropertiesobj.property_css_name] = sectionpropertiesobj.property_value;
+          });
+        }
+      });
+      setsectionproperties(_objectSpread({}, secpropobj));
+    }
+  }, [StatePagePropertiesContext]);
+
+  var plainString = function plainString(html) {
+    var divContainer = document.createElement('div');
+    divContainer.innerHTML = html;
+    return divContainer.textContent || divContainer.innerText || '';
+  };
+
+  var categorycard_cssstyles = {
+    categoryCard: glamor.css((_css = {
+      background: sectionproperties.backgroundColortransparent == 'Transparent' ? sectionproperties.backgroundColor : '',
+      border: sectionproperties.sectioncardborderwidth + 'px solid ' + sectionproperties.sectioncardbordercolor,
+      height: sectionproperties.height + 'px',
+      borderBottomLeftRadius: sectionproperties.borderBottomLeftRadius + 'px',
+      borderBottomRightRadius: sectionproperties.borderBottomRightRadius + 'px',
+      borderTopLeftRadius: sectionproperties.borderTopLeftRadius + 'px',
+      borderTopRightRadius: sectionproperties.borderTopRightRadius + 'px'
+    }, _defineProperty__default["default"](_css, "border", sectionproperties.sectioncardborderwidth + 'px solid ' + sectionproperties.sectioncardbordercolor), _defineProperty__default["default"](_css, "marginTop", sectionproperties.marginTop + 'px'), _defineProperty__default["default"](_css, "marginBottom", sectionproperties.marginBottom + 'px'), _defineProperty__default["default"](_css, "paddingLeft", sectionproperties.paddingLeft + 'px'), _defineProperty__default["default"](_css, "paddingRight", sectionproperties.paddingRight + 'px'), _defineProperty__default["default"](_css, "paddingTop", sectionproperties.paddingTop + 'px'), _defineProperty__default["default"](_css, "paddingBottom", sectionproperties.paddingBottom + 'px'), _defineProperty__default["default"](_css, "transition", '0.3s'), _defineProperty__default["default"](_css, "cursor", 'pointer'), _defineProperty__default["default"](_css, ':after', {
+      borderBottomLeftRadius: sectionproperties.borderBottomLeftRadius + 'px',
+      borderBottomRightRadius: sectionproperties.borderBottomRightRadius + 'px',
+      borderTopLeftRadius: sectionproperties.borderTopLeftRadius + 'px',
+      borderTopRightRadius: sectionproperties.borderTopRightRadius + 'px',
+      content: 's',
+      fontSize: 0,
+      position: 'absolute',
+      top: 0,
+      bottom: 0,
+      left: 0,
+      width: '100%',
+      height: '100%',
+      zIndex: 1,
+      transition: ' 0.3s',
+      background: sectionproperties.transitionbg_color,
+      opacity: sectionproperties.cardtransition_opacity
+    }), _defineProperty__default["default"](_css, ':hover:after', {
+      opacity: sectionproperties.cardtransitionbgopacityonhover
+    }), _css)),
+    caption: glamor.css({
+      zIndex: 2,
+      ':before': {
+        borderTop: sectionproperties.bordertransitionbg_colorwidth + 'px solid ' + sectionproperties.bordertransitionbg_color,
+        borderBottom: sectionproperties.bordertransitionbg_colorwidth + 'px solid ' + sectionproperties.bordertransitionbg_color,
+        opacity: sectionproperties.bordertransitionopacityonhover
+      }
+    }),
+    categorycardtext: glamor.css({
+      fontSize: sectionproperties.generaltext_fontSize + 'px',
+      color: sectionproperties.generaltext_fontColor,
+      textTransform: sectionproperties.generaltext_textTransform,
+      fontWeight: sectionproperties.generaltext_fontWeight,
+      opacity: 1,
+      transitionDelay: '0.3s'
+    }),
+    categorydescription: glamor.css({
+      fontSize: sectionproperties.prodCatFontSize + 'px',
+      color: sectionproperties.prodCatColor,
+      fontWeight: sectionproperties.prodCatFontWeight,
+      opacity: 1,
+      transitionDelay: '0.3s'
+    }),
+    cardbtn: glamor.css({
+      transition: '0.3s',
+      color: sectionproperties.generalbtn_textColor,
+      fontSize: sectionproperties.generalbtn_fontsize + 'px',
+      height: sectionproperties.generalbtn_height + 'px',
+      width: sectionproperties.generalbtn_width + 'px',
+      background: sectionproperties.generalbtn_bgColortransparent == 'Transparent' ? 'transparent' : sectionproperties.generalbtn_bgColor,
+      borderTopLeftRadius: sectionproperties.generalbtn_bordertopleftradius + 'px',
+      borderTopRightRadius: sectionproperties.generalbtn_bordertoprightradius + 'px',
+      borderBottomLeftRadius: sectionproperties.generalbtn_borderbottomleftradius + 'px',
+      borderBottomRightRadius: sectionproperties.generalbtn_borderbottomrightradius + 'px',
+      fontWeight: sectionproperties.generalbtn_fontweight,
+      zIndex: 100,
+      ':hover': {
+        background: sectionproperties.generalbtn_bgColortransparentonhover == 'Transparent' ? 'transparent' : sectionproperties.generalbtn_bgColoronhover,
+        color: sectionproperties.generalbtn_textColoronhover
+      }
+    })
+  };
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "row m-0 w-100",
+    style: {
+      paddingLeft: sectionproperties.card_marginLeft + 'px',
+      paddingRight: sectionproperties.card_marginRight + 'px'
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(categorycard_cssstyles.categoryCard, " ").concat(cardstyles.categoryCard) + ' col-lg-12 ',
+    onClick: function onClick() {
+      if (props.fetchingtypeprops == 'collections') {
+        routingcountext(StaticPagesLinksContext.GeneralProductsComponent, true, item.collectionid);
+      }
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(imagekitioReact.IKImage, {
+    urlEndpoint: IKurlEndpoint,
+    publicKey: IKpublicKey,
+    path: item.image,
+    loading: "lazy",
+    style: {
+      height: '100%',
+      width: '100%',
+      objectFit: 'cover'
+    }
+  }), /*#__PURE__*/React__default["default"].createElement("figcaption", {
+    className: "".concat(categorycard_cssstyles.caption) + ' row w-100 m-0 d-flex align-items-center justify-content-center ',
+    style: {
+      position: 'absolute',
+      top: 0,
+      left: 0
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    clas: "col-lg-12 m-0 d-flex align-items-center justify-content-start w-100 h-100 ",
+    style: {
+      width: '100%',
+      height: '100%'
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "row m-0 w-100 h-100",
+    style: {
+      position: 'relative',
+      height: '100%'
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "col-lg-12 d-flex justify-content-center align-items-center flex-column"
+  }, sectionproperties.general_showtext == 'Show' && /*#__PURE__*/React__default["default"].createElement("p", {
+    className: "".concat(categorycard_cssstyles.categorycardtext) + ' m-0 p-0 text-center '
+  }, item.name), sectionproperties.prodCatShow == 'Show' && /*#__PURE__*/React__default["default"].createElement("p", {
+    className: "".concat(categorycard_cssstyles.categorydescription) + ' PacificoFont m-0 p-0 text-center '
+  }, plainString(item.description)), sectionproperties.generalbtn_show == 'Show' && /*#__PURE__*/React__default["default"].createElement("button", {
+    className: "".concat(categorycard_cssstyles.cardbtn, " "),
+    onClick: function onClick() {
+      if (props.fetchingtypeprops == 'collections') {
+        routingcountext(StaticPagesLinksContext.GeneralProductsComponent, true, item.collectionid);
+      }
+    }
+  }, langdetect == 'en' ? sectionproperties.slideshow_btn_text : sectionproperties.slideshow_btn_text_ar)))))));
+};
+
 var returnLibrary = function returnLibrary() {
   return {
     AwesomeButton: AwesomeButton,
-    Header8: Header8 // you can add here other components that you want to export
-
+    Header8: Header8,
+    CardsSection: CardsSection,
+    Categorycard_with_twolinestransition: Categorycard_with_twolinestransition,
+    Productcard_with_zoominonhover: Productcard_with_zoominonhover
   };
 };