tabexseriescomponents 0.0.172 → 0.0.174

package/dist/index.cjs.js

@@ -72,6 +72,9 @@ var reactIntersectionObserver = require('react-intersection-observer');
 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 FiChevronLeft = require('@react-icons/all-files/fi/FiChevronLeft');
+var FiChevronRight = require('@react-icons/all-files/fi/FiChevronRight');
+var ReactPaginate = require('react-paginate');
 var MdKeyboardArrowDown = require('@react-icons/all-files/md/MdKeyboardArrowDown');
 var FaMoneyBillWave = require('@react-icons/all-files/fa/FaMoneyBillWave');
 var BiLogOutCircle = require('@react-icons/all-files/bi/BiLogOutCircle');
@@ -158,6 +161,7 @@ var ImageGallery__default = /*#__PURE__*/_interopDefaultLegacy(ImageGallery);
 var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
 var TextareaAutosize__default = /*#__PURE__*/_interopDefaultLegacy(TextareaAutosize);
 var Dropdown__default = /*#__PURE__*/_interopDefaultLegacy(Dropdown);
+var ReactPaginate__default = /*#__PURE__*/_interopDefaultLegacy(ReactPaginate);
 var Select__default = /*#__PURE__*/_interopDefaultLegacy(Select$2);
 var ReactPlayer__default = /*#__PURE__*/_interopDefaultLegacy(ReactPlayer);
 var BackgroundSlideshow__default = /*#__PURE__*/_interopDefaultLegacy(BackgroundSlideshow);
@@ -432,7 +436,8 @@ var ProductsCardsSectionContext_Provider = function ProductsCardsSectionContext_
       grouptype: '',
       grouptyperefid: '',
       sortprice: '',
-      sortdates: ''
+      sortdates: '',
+      page: 0
     }),
     _useState4 = _slicedToArray__default["default"](_useState3, 2),
     ProductFilterObjContext = _useState4[0],
@@ -9207,9 +9212,10 @@ var Filter$1 = function Filter(props) {
 function ownKeys$1B(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$1B(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1B(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1B(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var CardsSection = function CardsSection(props) {
-  var _useInView = reactIntersectionObserver.useInView(),
-    ref = _useInView.ref,
-    inView = _useInView.inView;
+  var refscr = /*#__PURE__*/React.createRef();
+  var _useInView = reactIntersectionObserver.useInView();
+    _useInView.ref;
+    _useInView.inView;
   var StatePagePropertiesContext = props.actions.StatePagePropertiesContext;
   props.actions.lang;
   var langdetect = props.actions.langdetect;
@@ -9259,11 +9265,11 @@ var CardsSection = function CardsSection(props) {
     _useState12 = _slicedToArray__default["default"](_useState11, 2),
     maincontainerarrayofobjs = _useState12[0],
     setmaincontainerarrayofobjs = _useState12[1];
-  React__default["default"].useEffect(function () {
-    if (inView) {
-      fetchProductsQuery.fetchNextPage();
-    }
-  }, [inView]);
+  // React.useEffect(() => {
+  //     if (inView) {
+  //         fetchProductsQuery.fetchNextPage();
+  //     }
+  // }, [inView]);
   React.useEffect(function () {
     StatePagePropertiesContext.pageobj.sections.forEach(function (sectionitem, sectionindex) {
       if (sectionitem.sectionid == props.sectionidprops) {
@@ -9304,11 +9310,15 @@ var CardsSection = function CardsSection(props) {
           }
         } else if (fetchingtype == 'products') {
           if (fetchProductsQuery.isSuccess) {
+            var _fetchProductsQuery$d, _fetchProductsQuery$d2, _fetchProductsQuery$d3;
             var allpagesarr = [];
-            fetchProductsQuery.data.pages.forEach(function (page) {
-              page.data.products.forEach(function (productobj) {
-                allpagesarr.push(productobj);
-              });
+            // fetchProductsQuery.data.pages.forEach((page) => {
+            //     page.data.products.forEach((productobj) => {
+            //         allpagesarr.push(productobj);
+            //     });
+            // });
+            fetchProductsQuery === null || fetchProductsQuery === void 0 ? void 0 : (_fetchProductsQuery$d = fetchProductsQuery.data) === null || _fetchProductsQuery$d === void 0 ? void 0 : (_fetchProductsQuery$d2 = _fetchProductsQuery$d.data) === null || _fetchProductsQuery$d2 === void 0 ? void 0 : (_fetchProductsQuery$d3 = _fetchProductsQuery$d2.products) === null || _fetchProductsQuery$d3 === void 0 ? void 0 : _fetchProductsQuery$d3.forEach(function (item) {
+              allpagesarr.push(item);
             });
             cardobjassigner(allpagesarr);
           }
@@ -9416,11 +9426,15 @@ var CardsSection = function CardsSection(props) {
   React.useEffect(function () {
     if (fetchingtype == 'products') {
       if (fetchProductsQuery.isSuccess && fetchcustomercartQueryContext.isSuccess) {
+        var _fetchProductsQuery$d4, _fetchProductsQuery$d5, _fetchProductsQuery$d6;
         var allpagesarr = [];
-        fetchProductsQuery.data.pages.forEach(function (page) {
-          page.data.products.forEach(function (productobj) {
-            allpagesarr.push(productobj);
-          });
+        // fetchProductsQuery.data.pages.forEach((page) => {
+        //     page.data.products.forEach((productobj) => {
+        //         allpagesarr.push(productobj);
+        //     });
+        // });
+        fetchProductsQuery === null || fetchProductsQuery === void 0 ? void 0 : (_fetchProductsQuery$d4 = fetchProductsQuery.data) === null || _fetchProductsQuery$d4 === void 0 ? void 0 : (_fetchProductsQuery$d5 = _fetchProductsQuery$d4.data) === null || _fetchProductsQuery$d5 === void 0 ? void 0 : (_fetchProductsQuery$d6 = _fetchProductsQuery$d5.products) === null || _fetchProductsQuery$d6 === void 0 ? void 0 : _fetchProductsQuery$d6.forEach(function (item) {
+          allpagesarr.push(item);
         });
         cardobjassigner(allpagesarr);
       }
@@ -9548,7 +9562,142 @@ var CardsSection = function CardsSection(props) {
     });
     setcardsarray([].concat(temparray));
   };
+  // Example items, to simulate fetching from another resources.
+
+  var handlePageClick = function handlePageClick(event) {
+    props.scrolltotop();
+    var tempProductFilterObjContext = _objectSpread$1B({}, ProductFilterObjContext);
+    tempProductFilterObjContext.page = event.selected;
+    setProductFilterObjContext(_objectSpread$1B({}, tempProductFilterObjContext));
+  };
+  function PaginatedItems(_ref) {
+    var _fetchProductsQuery$d7, _fetchProductsQuery$d8, _fetchProductsQuery$d9, _fetchProductsQuery$d10;
+    _ref.itemsPerPage;
+    // Here we use item offsets; we could also use page offsets
+    // following the API or data you're working with.
+    var _useState13 = React.useState(0),
+      _useState14 = _slicedToArray__default["default"](_useState13, 2);
+      _useState14[0];
+      _useState14[1];
+
+    // const currentItems = items.slice(itemOffset, endOffset);
+    // const pageCount = Math.ceil(items.length / itemsPerPage);
+    var pageCount = Math.ceil((fetchProductsQuery === null || fetchProductsQuery === void 0 ? void 0 : (_fetchProductsQuery$d7 = fetchProductsQuery.data) === null || _fetchProductsQuery$d7 === void 0 ? void 0 : (_fetchProductsQuery$d8 = _fetchProductsQuery$d7.data) === null || _fetchProductsQuery$d8 === void 0 ? void 0 : _fetchProductsQuery$d8.productscou) / 12);
+    //
+
+    // Invoke when user click to request another page.
+
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      "class": "d-flex containerClassName"
+    }, /*#__PURE__*/React__default["default"].createElement(ReactPaginate__default["default"], {
+      breakLabel: "...",
+      forcePage: fetchProductsQuery === null || fetchProductsQuery === void 0 ? void 0 : (_fetchProductsQuery$d9 = fetchProductsQuery.data) === null || _fetchProductsQuery$d9 === void 0 ? void 0 : (_fetchProductsQuery$d10 = _fetchProductsQuery$d9.data) === null || _fetchProductsQuery$d10 === void 0 ? void 0 : _fetchProductsQuery$d10.page,
+      nextLabel: /*#__PURE__*/React__default["default"].createElement(FiChevronRight.FiChevronRight, {
+        size: parseInt(sectionproperties.paginationFontSize) + 3
+      }),
+      onPageChange: handlePageClick,
+      active: true,
+      pageRangeDisplayed: 5,
+      pageCount: pageCount,
+      previousLabel: /*#__PURE__*/React__default["default"].createElement(FiChevronLeft.FiChevronLeft, {
+        size: parseInt(sectionproperties.paginationFontSize) + 3
+      }),
+      renderOnZeroPageCount: null,
+      pageLinkClassName: section_cssstyles.pageLinkClassName,
+      nextLinkClassName: section_cssstyles.nextLinkClassName,
+      previousLinkClassName: section_cssstyles.previousLinkClassName,
+      activeClassName: section_cssstyles.activeClassName,
+      activeLinkClassName: section_cssstyles.activeLinkClassName,
+      previousClassName: section_cssstyles.previousClassName,
+      nextClassName: section_cssstyles.nextClassName,
+      disabledClassName: section_cssstyles.disabledClassName,
+      disabledLinkClassName: section_cssstyles.disabledLinkClassName
+    }));
+  }
   var section_cssstyles = {
+    disabledClassName: glamor.css({
+      cursor: 'not-allowed',
+      ':hover': {
+        cursor: 'not-allowed',
+        color: sectionproperties.paginationColor
+      }
+    }),
+    disabledLinkClassName: glamor.css({
+      cursor: 'not-allowed',
+      ':hover': {
+        cursor: 'not-allowed',
+        color: sectionproperties.paginationColor
+      }
+    }),
+    pageLinkClassName: glamor.css({
+      minWidth: sectionproperties.paginationContainerWidth + 'vh',
+      height: sectionproperties.paginationContainerHeight + 'vh',
+      padding: '17px',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      color: sectionproperties.paginationColor,
+      border: sectionproperties.paginationBorderWidth + 'px solid ' + sectionproperties.paginationBorderColor,
+      transition: '.3s',
+      ':hover': {
+        color: sectionproperties.paginationColoronHover,
+        borderColor: sectionproperties.paginationColoronHover
+      }
+    }),
+    activeClassName: glamor.css({
+      color: sectionproperties.paginationActiveColor,
+      borderColor: sectionproperties.paginationActiveColor
+    }),
+    activeLinkClassName: glamor.css({
+      color: sectionproperties.paginationActiveColor,
+      borderColor: sectionproperties.paginationActiveColor
+    }),
+    previousClassName: glamor.css({
+      width: sectionproperties.paginationContainerWidth + 'vh',
+      height: sectionproperties.paginationContainerHeight + 'vh',
+      padding: '17px',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      color: sectionproperties.paginationColor,
+      border: sectionproperties.paginationBorderWidth + 'px solid ' + sectionproperties.paginationBorderColor,
+      transition: '.3s',
+      ':hover': {
+        color: sectionproperties.paginationColoronHover,
+        borderColor: sectionproperties.paginationColoronHover
+      }
+    }),
+    nextClassName: glamor.css({
+      width: sectionproperties.paginationContainerWidth + 'vh',
+      height: sectionproperties.paginationContainerHeight + 'vh',
+      padding: '17px',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      color: sectionproperties.paginationColor,
+      border: sectionproperties.paginationBorderWidth + 'px solid ' + sectionproperties.paginationBorderColor,
+      transition: '.3s',
+      ':hover': {
+        color: sectionproperties.paginationColoronHover,
+        borderColor: sectionproperties.paginationColoronHover
+      }
+    }),
+    previousLinkClassName: glamor.css({
+      fontSize: sectionproperties.paginationFontSize + 'px',
+      color: sectionproperties.paginationColor,
+      transition: '.3s',
+      ':hover': {
+        color: sectionproperties.paginationColoronHover
+      }
+    }),
+    nextLinkClassName: glamor.css({
+      fontSize: sectionproperties.paginationFontSize + 'px',
+      color: sectionproperties.paginationColor,
+      transition: '.3s',
+      ':hover': {
+        color: sectionproperties.paginationColoronHover
+      }
+    }),
     sectiontitlespan: glamor.css({
       ':after': {
         height: '5px',
@@ -9812,19 +9961,7 @@ var CardsSection = function CardsSection(props) {
               actions: actions,
               fontFamilyprops: sectionproperties.sectiontitlefontfamily == 'ASUL' ? 'ASUL' : ''
             }));
-          }), fetchingtype == 'products' && fetchProductsQuery.isFetchingNextPage && /*#__PURE__*/React__default["default"].createElement("button", {
-            className: section_cssstyles.loadbtn + ' d-flex justify-content-end align-items-center mt-4 ',
-            ref: ref,
-            onClick: function onClick() {
-              return fetchProductsQuery.fetchNextPage();
-            },
-            disabled: !fetchProductsQuery.hasNextPage || fetchProductsQuery.isFetchingNextPage
-          }, /*#__PURE__*/React__default["default"].createElement(reactCssfxLoading.CircularProgress, {
-            color: "#000",
-            width: "20px",
-            height: "20px",
-            duration: "1s"
-          })))), sectionproperties.view_as_slider_vertical != 'Slider (Horizontal)' && /*#__PURE__*/React__default["default"].createElement("div", {
+          }))), sectionproperties.view_as_slider_vertical != 'Slider (Horizontal)' && /*#__PURE__*/React__default["default"].createElement("div", {
             className: "row m-0 w-100 d-flex ",
             style: {
               justifyContent: sectionproperties.justifyContentCenter == 'Centered' ? 'center' : 'start'
@@ -9844,30 +9981,15 @@ var CardsSection = function CardsSection(props) {
             }));
           }), fetchingtype == 'products' && /*#__PURE__*/React__default["default"].createElement("div", {
             className: "w-100 col-lg-12 allcentered mt-2"
-          }, /*#__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(reactCssfxLoading.CircularProgress, {
-            color: "#000",
-            width: "20px",
-            height: "20px",
-            duration: "1s"
-          }) : fetchProductsQuery.hasNextPage ? langdetect == 'en' ? 'Load more' : 'المزيد' : /*#__PURE__*/React__default["default"].createElement(reactCssfxLoading.CircularProgress, {
-            color: "#000",
-            width: "20px",
-            height: "20px",
-            duration: "1s"
-          })))));
+          }, /*#__PURE__*/React__default["default"].createElement(PaginatedItems, {
+            itemsPerPage: 5
+          }))));
         }
       }
     }))));
   };
   return /*#__PURE__*/React__default["default"].createElement("div", {
+    ref: refscr,
     "class": ' row m-0 d-flex justify-content-center ml-auto mr-auto w-md-100 w-sm-100 ',
     style: {
       zIndex: 2,
@@ -23481,7 +23603,7 @@ var TwoTieredHeader = function TwoTieredHeader(props) {
     }
   }, lang.loginregister)))), authdetailsContext.loggedin && /*#__PURE__*/React__default["default"].createElement("div", {
     "class": header_cssstyles.userBtnLoggedinContainer + ' allcentered ',
-    sytle: {
+    style: {
       position: 'relative'
     }
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -23506,7 +23628,7 @@ var TwoTieredHeader = function TwoTieredHeader(props) {
   }, lang.hello, langdetect == 'en' ? ',' : '،'), /*#__PURE__*/React__default["default"].createElement("p", {
     "class": header_cssstyles.loggedinusername + ' loggedinuserbtn m-0 p-0 text-overflow ',
     style: {
-      maxWidth: '65px'
+      maxWidth: sectionproperties.showfooterphonenumber == 'Show' ? '65px' : '140px'
     }
   }, authdetailsContext === null || authdetailsContext === void 0 ? void 0 : (_authdetailsContext$c = authdetailsContext.customerinfo) === null || _authdetailsContext$c === void 0 ? void 0 : _authdetailsContext$c.name)))), !authdetailsContext.loggedin && /*#__PURE__*/React__default["default"].createElement(Dropdown__default["default"].Menu, null, /*#__PURE__*/React__default["default"].createElement(Dropdown__default["default"].Item, {
     onClick: function onClick() {
@@ -39897,7 +40019,7 @@ var Card23 = function Card23(props) {
       fontSize: '12px'
     }
   }, langdetect == 'en' ? sectionproperties.badgeContentEn : sectionproperties.badgeContentAr))), /*#__PURE__*/React__default["default"].createElement("div", {
-    "class": sectionproperties.paddingLeft != 0 && sectionproperties.paddingRight != 0 ? langdetect == 'en' ? 'row m-0 w-100 pl-sm-0 pr-sm-0' : ' row m-0 w-100' : ' row m-0 w-100',
+    "class": 'row m-0 w-100 pl-sm-0 pr-sm-0',
     style: {
       paddingLeft: '10px',
       paddingRight: '10px',

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import React, { useState, useEffect, Component, useContext } from 'react';
+import React, { useState, useEffect, Component, createRef, useContext } from 'react';
 import _classCallCheck from '@babel/runtime/helpers/classCallCheck';
 import _createClass from '@babel/runtime/helpers/createClass';
 import _assertThisInitialized from '@babel/runtime/helpers/assertThisInitialized';
@@ -70,6 +70,9 @@ import { useInView } from 'react-intersection-observer';
 import { FaArrowAltCircleRight } from '@react-icons/all-files/fa/FaArrowAltCircleRight';
 import { FaArrowAltCircleLeft } from '@react-icons/all-files/fa/FaArrowAltCircleLeft';
 import { FiFilter } from '@react-icons/all-files/fi/FiFilter';
+import { FiChevronLeft } from '@react-icons/all-files/fi/FiChevronLeft';
+import { FiChevronRight } from '@react-icons/all-files/fi/FiChevronRight';
+import ReactPaginate from 'react-paginate';
 import { MdKeyboardArrowDown } from '@react-icons/all-files/md/MdKeyboardArrowDown';
 import { FaMoneyBillWave } from '@react-icons/all-files/fa/FaMoneyBillWave';
 import { BiLogOutCircle } from '@react-icons/all-files/bi/BiLogOutCircle';
@@ -389,7 +392,8 @@ var ProductsCardsSectionContext_Provider = function ProductsCardsSectionContext_
       grouptype: '',
       grouptyperefid: '',
       sortprice: '',
-      sortdates: ''
+      sortdates: '',
+      page: 0
     }),
     _useState4 = _slicedToArray(_useState3, 2),
     ProductFilterObjContext = _useState4[0],
@@ -9164,9 +9168,10 @@ var Filter$1 = function Filter(props) {
 function ownKeys$1B(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$1B(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1B(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1B(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var CardsSection = function CardsSection(props) {
-  var _useInView = useInView(),
-    ref = _useInView.ref,
-    inView = _useInView.inView;
+  var refscr = /*#__PURE__*/createRef();
+  var _useInView = useInView();
+    _useInView.ref;
+    _useInView.inView;
   var StatePagePropertiesContext = props.actions.StatePagePropertiesContext;
   props.actions.lang;
   var langdetect = props.actions.langdetect;
@@ -9216,11 +9221,11 @@ var CardsSection = function CardsSection(props) {
     _useState12 = _slicedToArray(_useState11, 2),
     maincontainerarrayofobjs = _useState12[0],
     setmaincontainerarrayofobjs = _useState12[1];
-  React.useEffect(function () {
-    if (inView) {
-      fetchProductsQuery.fetchNextPage();
-    }
-  }, [inView]);
+  // React.useEffect(() => {
+  //     if (inView) {
+  //         fetchProductsQuery.fetchNextPage();
+  //     }
+  // }, [inView]);
   useEffect(function () {
     StatePagePropertiesContext.pageobj.sections.forEach(function (sectionitem, sectionindex) {
       if (sectionitem.sectionid == props.sectionidprops) {
@@ -9261,11 +9266,15 @@ var CardsSection = function CardsSection(props) {
           }
         } else if (fetchingtype == 'products') {
           if (fetchProductsQuery.isSuccess) {
+            var _fetchProductsQuery$d, _fetchProductsQuery$d2, _fetchProductsQuery$d3;
             var allpagesarr = [];
-            fetchProductsQuery.data.pages.forEach(function (page) {
-              page.data.products.forEach(function (productobj) {
-                allpagesarr.push(productobj);
-              });
+            // fetchProductsQuery.data.pages.forEach((page) => {
+            //     page.data.products.forEach((productobj) => {
+            //         allpagesarr.push(productobj);
+            //     });
+            // });
+            fetchProductsQuery === null || fetchProductsQuery === void 0 ? void 0 : (_fetchProductsQuery$d = fetchProductsQuery.data) === null || _fetchProductsQuery$d === void 0 ? void 0 : (_fetchProductsQuery$d2 = _fetchProductsQuery$d.data) === null || _fetchProductsQuery$d2 === void 0 ? void 0 : (_fetchProductsQuery$d3 = _fetchProductsQuery$d2.products) === null || _fetchProductsQuery$d3 === void 0 ? void 0 : _fetchProductsQuery$d3.forEach(function (item) {
+              allpagesarr.push(item);
             });
             cardobjassigner(allpagesarr);
           }
@@ -9373,11 +9382,15 @@ var CardsSection = function CardsSection(props) {
   useEffect(function () {
     if (fetchingtype == 'products') {
       if (fetchProductsQuery.isSuccess && fetchcustomercartQueryContext.isSuccess) {
+        var _fetchProductsQuery$d4, _fetchProductsQuery$d5, _fetchProductsQuery$d6;
         var allpagesarr = [];
-        fetchProductsQuery.data.pages.forEach(function (page) {
-          page.data.products.forEach(function (productobj) {
-            allpagesarr.push(productobj);
-          });
+        // fetchProductsQuery.data.pages.forEach((page) => {
+        //     page.data.products.forEach((productobj) => {
+        //         allpagesarr.push(productobj);
+        //     });
+        // });
+        fetchProductsQuery === null || fetchProductsQuery === void 0 ? void 0 : (_fetchProductsQuery$d4 = fetchProductsQuery.data) === null || _fetchProductsQuery$d4 === void 0 ? void 0 : (_fetchProductsQuery$d5 = _fetchProductsQuery$d4.data) === null || _fetchProductsQuery$d5 === void 0 ? void 0 : (_fetchProductsQuery$d6 = _fetchProductsQuery$d5.products) === null || _fetchProductsQuery$d6 === void 0 ? void 0 : _fetchProductsQuery$d6.forEach(function (item) {
+          allpagesarr.push(item);
         });
         cardobjassigner(allpagesarr);
       }
@@ -9505,7 +9518,142 @@ var CardsSection = function CardsSection(props) {
     });
     setcardsarray([].concat(temparray));
   };
+  // Example items, to simulate fetching from another resources.
+
+  var handlePageClick = function handlePageClick(event) {
+    props.scrolltotop();
+    var tempProductFilterObjContext = _objectSpread$1B({}, ProductFilterObjContext);
+    tempProductFilterObjContext.page = event.selected;
+    setProductFilterObjContext(_objectSpread$1B({}, tempProductFilterObjContext));
+  };
+  function PaginatedItems(_ref) {
+    var _fetchProductsQuery$d7, _fetchProductsQuery$d8, _fetchProductsQuery$d9, _fetchProductsQuery$d10;
+    _ref.itemsPerPage;
+    // Here we use item offsets; we could also use page offsets
+    // following the API or data you're working with.
+    var _useState13 = useState(0),
+      _useState14 = _slicedToArray(_useState13, 2);
+      _useState14[0];
+      _useState14[1];
+
+    // const currentItems = items.slice(itemOffset, endOffset);
+    // const pageCount = Math.ceil(items.length / itemsPerPage);
+    var pageCount = Math.ceil((fetchProductsQuery === null || fetchProductsQuery === void 0 ? void 0 : (_fetchProductsQuery$d7 = fetchProductsQuery.data) === null || _fetchProductsQuery$d7 === void 0 ? void 0 : (_fetchProductsQuery$d8 = _fetchProductsQuery$d7.data) === null || _fetchProductsQuery$d8 === void 0 ? void 0 : _fetchProductsQuery$d8.productscou) / 12);
+    //
+
+    // Invoke when user click to request another page.
+
+    return /*#__PURE__*/React.createElement("div", {
+      "class": "d-flex containerClassName"
+    }, /*#__PURE__*/React.createElement(ReactPaginate, {
+      breakLabel: "...",
+      forcePage: fetchProductsQuery === null || fetchProductsQuery === void 0 ? void 0 : (_fetchProductsQuery$d9 = fetchProductsQuery.data) === null || _fetchProductsQuery$d9 === void 0 ? void 0 : (_fetchProductsQuery$d10 = _fetchProductsQuery$d9.data) === null || _fetchProductsQuery$d10 === void 0 ? void 0 : _fetchProductsQuery$d10.page,
+      nextLabel: /*#__PURE__*/React.createElement(FiChevronRight, {
+        size: parseInt(sectionproperties.paginationFontSize) + 3
+      }),
+      onPageChange: handlePageClick,
+      active: true,
+      pageRangeDisplayed: 5,
+      pageCount: pageCount,
+      previousLabel: /*#__PURE__*/React.createElement(FiChevronLeft, {
+        size: parseInt(sectionproperties.paginationFontSize) + 3
+      }),
+      renderOnZeroPageCount: null,
+      pageLinkClassName: section_cssstyles.pageLinkClassName,
+      nextLinkClassName: section_cssstyles.nextLinkClassName,
+      previousLinkClassName: section_cssstyles.previousLinkClassName,
+      activeClassName: section_cssstyles.activeClassName,
+      activeLinkClassName: section_cssstyles.activeLinkClassName,
+      previousClassName: section_cssstyles.previousClassName,
+      nextClassName: section_cssstyles.nextClassName,
+      disabledClassName: section_cssstyles.disabledClassName,
+      disabledLinkClassName: section_cssstyles.disabledLinkClassName
+    }));
+  }
   var section_cssstyles = {
+    disabledClassName: css({
+      cursor: 'not-allowed',
+      ':hover': {
+        cursor: 'not-allowed',
+        color: sectionproperties.paginationColor
+      }
+    }),
+    disabledLinkClassName: css({
+      cursor: 'not-allowed',
+      ':hover': {
+        cursor: 'not-allowed',
+        color: sectionproperties.paginationColor
+      }
+    }),
+    pageLinkClassName: css({
+      minWidth: sectionproperties.paginationContainerWidth + 'vh',
+      height: sectionproperties.paginationContainerHeight + 'vh',
+      padding: '17px',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      color: sectionproperties.paginationColor,
+      border: sectionproperties.paginationBorderWidth + 'px solid ' + sectionproperties.paginationBorderColor,
+      transition: '.3s',
+      ':hover': {
+        color: sectionproperties.paginationColoronHover,
+        borderColor: sectionproperties.paginationColoronHover
+      }
+    }),
+    activeClassName: css({
+      color: sectionproperties.paginationActiveColor,
+      borderColor: sectionproperties.paginationActiveColor
+    }),
+    activeLinkClassName: css({
+      color: sectionproperties.paginationActiveColor,
+      borderColor: sectionproperties.paginationActiveColor
+    }),
+    previousClassName: css({
+      width: sectionproperties.paginationContainerWidth + 'vh',
+      height: sectionproperties.paginationContainerHeight + 'vh',
+      padding: '17px',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      color: sectionproperties.paginationColor,
+      border: sectionproperties.paginationBorderWidth + 'px solid ' + sectionproperties.paginationBorderColor,
+      transition: '.3s',
+      ':hover': {
+        color: sectionproperties.paginationColoronHover,
+        borderColor: sectionproperties.paginationColoronHover
+      }
+    }),
+    nextClassName: css({
+      width: sectionproperties.paginationContainerWidth + 'vh',
+      height: sectionproperties.paginationContainerHeight + 'vh',
+      padding: '17px',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      color: sectionproperties.paginationColor,
+      border: sectionproperties.paginationBorderWidth + 'px solid ' + sectionproperties.paginationBorderColor,
+      transition: '.3s',
+      ':hover': {
+        color: sectionproperties.paginationColoronHover,
+        borderColor: sectionproperties.paginationColoronHover
+      }
+    }),
+    previousLinkClassName: css({
+      fontSize: sectionproperties.paginationFontSize + 'px',
+      color: sectionproperties.paginationColor,
+      transition: '.3s',
+      ':hover': {
+        color: sectionproperties.paginationColoronHover
+      }
+    }),
+    nextLinkClassName: css({
+      fontSize: sectionproperties.paginationFontSize + 'px',
+      color: sectionproperties.paginationColor,
+      transition: '.3s',
+      ':hover': {
+        color: sectionproperties.paginationColoronHover
+      }
+    }),
     sectiontitlespan: css({
       ':after': {
         height: '5px',
@@ -9769,19 +9917,7 @@ var CardsSection = function CardsSection(props) {
               actions: actions,
               fontFamilyprops: sectionproperties.sectiontitlefontfamily == 'ASUL' ? 'ASUL' : ''
             }));
-          }), fetchingtype == 'products' && fetchProductsQuery.isFetchingNextPage && /*#__PURE__*/React.createElement("button", {
-            className: section_cssstyles.loadbtn + ' d-flex justify-content-end align-items-center mt-4 ',
-            ref: ref,
-            onClick: function onClick() {
-              return fetchProductsQuery.fetchNextPage();
-            },
-            disabled: !fetchProductsQuery.hasNextPage || fetchProductsQuery.isFetchingNextPage
-          }, /*#__PURE__*/React.createElement(CircularProgress, {
-            color: "#000",
-            width: "20px",
-            height: "20px",
-            duration: "1s"
-          })))), sectionproperties.view_as_slider_vertical != 'Slider (Horizontal)' && /*#__PURE__*/React.createElement("div", {
+          }))), sectionproperties.view_as_slider_vertical != 'Slider (Horizontal)' && /*#__PURE__*/React.createElement("div", {
             className: "row m-0 w-100 d-flex ",
             style: {
               justifyContent: sectionproperties.justifyContentCenter == 'Centered' ? 'center' : 'start'
@@ -9801,30 +9937,15 @@ var CardsSection = function CardsSection(props) {
             }));
           }), fetchingtype == 'products' && /*#__PURE__*/React.createElement("div", {
             className: "w-100 col-lg-12 allcentered mt-2"
-          }, /*#__PURE__*/React.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.createElement(CircularProgress, {
-            color: "#000",
-            width: "20px",
-            height: "20px",
-            duration: "1s"
-          }) : fetchProductsQuery.hasNextPage ? langdetect == 'en' ? 'Load more' : 'المزيد' : /*#__PURE__*/React.createElement(CircularProgress, {
-            color: "#000",
-            width: "20px",
-            height: "20px",
-            duration: "1s"
-          })))));
+          }, /*#__PURE__*/React.createElement(PaginatedItems, {
+            itemsPerPage: 5
+          }))));
         }
       }
     }))));
   };
   return /*#__PURE__*/React.createElement("div", {
+    ref: refscr,
     "class": ' row m-0 d-flex justify-content-center ml-auto mr-auto w-md-100 w-sm-100 ',
     style: {
       zIndex: 2,
@@ -23438,7 +23559,7 @@ var TwoTieredHeader = function TwoTieredHeader(props) {
     }
   }, lang.loginregister)))), authdetailsContext.loggedin && /*#__PURE__*/React.createElement("div", {
     "class": header_cssstyles.userBtnLoggedinContainer + ' allcentered ',
-    sytle: {
+    style: {
       position: 'relative'
     }
   }, /*#__PURE__*/React.createElement("div", {
@@ -23463,7 +23584,7 @@ var TwoTieredHeader = function TwoTieredHeader(props) {
   }, lang.hello, langdetect == 'en' ? ',' : '،'), /*#__PURE__*/React.createElement("p", {
     "class": header_cssstyles.loggedinusername + ' loggedinuserbtn m-0 p-0 text-overflow ',
     style: {
-      maxWidth: '65px'
+      maxWidth: sectionproperties.showfooterphonenumber == 'Show' ? '65px' : '140px'
     }
   }, authdetailsContext === null || authdetailsContext === void 0 ? void 0 : (_authdetailsContext$c = authdetailsContext.customerinfo) === null || _authdetailsContext$c === void 0 ? void 0 : _authdetailsContext$c.name)))), !authdetailsContext.loggedin && /*#__PURE__*/React.createElement(Dropdown.Menu, null, /*#__PURE__*/React.createElement(Dropdown.Item, {
     onClick: function onClick() {
@@ -39854,7 +39975,7 @@ var Card23 = function Card23(props) {
       fontSize: '12px'
     }
   }, langdetect == 'en' ? sectionproperties.badgeContentEn : sectionproperties.badgeContentAr))), /*#__PURE__*/React.createElement("div", {
-    "class": sectionproperties.paddingLeft != 0 && sectionproperties.paddingRight != 0 ? langdetect == 'en' ? 'row m-0 w-100 pl-sm-0 pr-sm-0' : ' row m-0 w-100' : ' row m-0 w-100',
+    "class": 'row m-0 w-100 pl-sm-0 pr-sm-0',
     style: {
       paddingLeft: '10px',
       paddingRight: '10px',

package/dist/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('@babel/runtime/helpers/slicedToArray'), require('react'), require('@babel/runtime/helpers/classCallCheck'), require('@babel/runtime/helpers/createClass'), require('@babel/runtime/helpers/assertThisInitialized'), require('@babel/runtime/helpers/inherits'), require('@babel/runtime/helpers/possibleConstructorReturn'), require('@babel/runtime/helpers/getPrototypeOf'), require('@babel/runtime/helpers/defineProperty'), require('universal-cookie'), require('react-cssfx-loading'), require('glamor'), require('@react-oauth/google'), require('jwt-decode'), require('react-facebook-login/dist/facebook-login-render-props'), require('@react-icons/all-files/fa/FaFacebookF'), require('@react-icons/all-files/ai/AiOutlineUser'), require('@react-icons/all-files/io/IoMdClose'), require('react-bootstrap'), require('react-query'), require('imagekitio-react'), require('react-image-gallery'), require('@react-icons/all-files/md/MdAddShoppingCart'), require('@react-icons/all-files/io5/IoBagHandleOutline'), require('@react-icons/all-files/bs/BsBag'), require('@react-icons/all-files/cg/CgShoppingBag'), require('@react-icons/all-files/fa/FaRegHeart'), require('@react-icons/all-files/fa/FaHeart'), require('@react-icons/all-files/fi/FiShoppingBag'), require('@react-icons/all-files/fi/FiShoppingCart'), require('@react-icons/all-files/ai/AiFillStar'), require('@react-icons/all-files/ai/AiOutlineStar'), require('@react-icons/all-files/ri/RiSecurePaymentLine'), require('@react-icons/all-files/hi/HiOutlinePhone'), require('@react-icons/all-files/ai/AiOutlineSecurityScan'), require('@react-icons/all-files/fi/FiMapPin'), require('@react-icons/all-files/fa/FaShippingFast'), require('react-share'), require('@babel/runtime/helpers/toConsumableArray'), require('@react-icons/all-files/ai/AiOutlineClockCircle'), require('@react-icons/all-files/ai/AiOutlinePlus'), require('@react-icons/all-files/ai/AiOutlineCheck'), require('react-horizontal-scrolling-menu'), require('@react-icons/all-files/fa/FaStar'), require('@react-icons/all-files/io5/IoLocationSharp'), require('@react-icons/all-files/hi/HiOutlineChevronRight'), require('@react-icons/all-files/hi/HiOutlineChevronLeft'), require('@react-icons/all-files/go/GoGlobe'), require('@react-icons/all-files/vsc/VscGlobe'), require('@react-icons/all-files/fi/FiLayers'), require('@react-icons/all-files/hi/HiOutlineTrash'), require('@react-icons/all-files/bi/BiSad'), require('react-textarea-autosize'), require('@react-icons/all-files/hi/HiUser'), require('@react-icons/all-files/gr/GrMail'), require('@react-icons/all-files/fi/FiCheckCircle'), require('@react-icons/all-files/bi/BiPhone'), require('react-accessible-accordion'), require('@react-icons/all-files/bs/BsChevronLeft'), require('@react-icons/all-files/bs/BsChevronRight'), require('@react-icons/all-files/ri/RiArrowUpSLine'), require('@react-icons/all-files/ri/RiArrowDownSLine'), require('react-router-dom'), require('@react-icons/all-files/io5/IoBagCheckOutline'), require('@react-icons/all-files/io5/IoBagRemoveOutline'), require('react-bootstrap/Dropdown'), require('@react-icons/all-files/hi/HiOutlinePlus'), require('@react-icons/all-files/ai/AiOutlineMinus'), require('react-intersection-observer'), require('@react-icons/all-files/fa/FaArrowAltCircleRight'), require('@react-icons/all-files/fa/FaArrowAltCircleLeft'), require('@react-icons/all-files/fi/FiFilter'), require('@react-icons/all-files/md/MdKeyboardArrowDown'), require('@react-icons/all-files/fa/FaMoneyBillWave'), require('@react-icons/all-files/bi/BiLogOutCircle'), require('@react-icons/all-files/bi/BiChevronDown'), require('@react-icons/all-files/bi/BiUser'), require('@react-icons/all-files/ai/AiOutlineLogin'), require('@react-icons/all-files/ai/AiOutlineUserAdd'), require('@react-icons/all-files/ri/RiSearchLine'), require('@react-icons/all-files/cg/CgMenuLeft'), require('@react-icons/all-files/cg/CgMenuRight'), require('@react-icons/all-files/hi/HiOutlineShoppingBag'), require('@react-icons/all-files/ri/RiHandbagLine'), require('@react-icons/all-files/go/GoSearch'), require('@react-icons/all-files/fi/FiUser'), require('@react-icons/all-files/bi/BiSearch'), require('@react-icons/all-files/ai/AiOutlineHeart'), require('@react-icons/all-files/ai/AiOutlineMail'), require('@react-icons/all-files/fi/FiPhone'), require('@react-icons/all-files/hi/HiMenuAlt4'), require('@react-icons/all-files/fi/FiSearch'), require('@react-icons/all-files/bs/BsSearch'), require('@react-icons/all-files/ai/AiFillInstagram'), require('@react-icons/all-files/fa/FaWhatsapp'), require('@react-icons/all-files/ai/AiOutlineInstagram'), require('@react-icons/all-files/bs/BsInfoCircle'), require('@react-icons/all-files/ai/AiFillPhone'), require('@react-icons/all-files/io5/IoClose'), require('@react-icons/all-files/md/MdKeyboardArrowUp'), require('@react-icons/all-files/bi/BiGlobe'), require('@react-icons/all-files/fa/FaPhoneAlt'), require('@react-icons/all-files/fa/FaPhone'), require('@react-icons/all-files/go/GoLocation'), require('@react-icons/all-files/ai/AiOutlinePhone'), require('@react-icons/all-files/ri/RiRoadMapLine'), require('@react-icons/all-files/hi/HiOutlineClock'), require('react-select'), require('@react-icons/all-files/io/IoIosArrowRoundForward'), require('@react-icons/all-files/io/IoIosArrowRoundBack'), require('react-player'), require('react-background-slideshow'), require('@babel/runtime/helpers/extends'), require('react-slideshow-image'), require('@react-icons/all-files/hi/HiOutlineLocationMarker'), require('@react-icons/all-files/fi/FiPhoneCall'), require('@react-icons/all-files/bs/BsEye'), require('@react-icons/all-files/bi/BiTimeFive'), require('@react-icons/all-files/io/IoIosArrowUp'), require('@react-icons/all-files/fi/FiMinus'), require('@react-icons/all-files/fi/FiPlus')) :
-    typeof define === 'function' && define.amd ? define(['@babel/runtime/helpers/slicedToArray', 'react', '@babel/runtime/helpers/classCallCheck', '@babel/runtime/helpers/createClass', '@babel/runtime/helpers/assertThisInitialized', '@babel/runtime/helpers/inherits', '@babel/runtime/helpers/possibleConstructorReturn', '@babel/runtime/helpers/getPrototypeOf', '@babel/runtime/helpers/defineProperty', 'universal-cookie', 'react-cssfx-loading', 'glamor', '@react-oauth/google', 'jwt-decode', 'react-facebook-login/dist/facebook-login-render-props', '@react-icons/all-files/fa/FaFacebookF', '@react-icons/all-files/ai/AiOutlineUser', '@react-icons/all-files/io/IoMdClose', 'react-bootstrap', 'react-query', 'imagekitio-react', 'react-image-gallery', '@react-icons/all-files/md/MdAddShoppingCart', '@react-icons/all-files/io5/IoBagHandleOutline', '@react-icons/all-files/bs/BsBag', '@react-icons/all-files/cg/CgShoppingBag', '@react-icons/all-files/fa/FaRegHeart', '@react-icons/all-files/fa/FaHeart', '@react-icons/all-files/fi/FiShoppingBag', '@react-icons/all-files/fi/FiShoppingCart', '@react-icons/all-files/ai/AiFillStar', '@react-icons/all-files/ai/AiOutlineStar', '@react-icons/all-files/ri/RiSecurePaymentLine', '@react-icons/all-files/hi/HiOutlinePhone', '@react-icons/all-files/ai/AiOutlineSecurityScan', '@react-icons/all-files/fi/FiMapPin', '@react-icons/all-files/fa/FaShippingFast', 'react-share', '@babel/runtime/helpers/toConsumableArray', '@react-icons/all-files/ai/AiOutlineClockCircle', '@react-icons/all-files/ai/AiOutlinePlus', '@react-icons/all-files/ai/AiOutlineCheck', 'react-horizontal-scrolling-menu', '@react-icons/all-files/fa/FaStar', '@react-icons/all-files/io5/IoLocationSharp', '@react-icons/all-files/hi/HiOutlineChevronRight', '@react-icons/all-files/hi/HiOutlineChevronLeft', '@react-icons/all-files/go/GoGlobe', '@react-icons/all-files/vsc/VscGlobe', '@react-icons/all-files/fi/FiLayers', '@react-icons/all-files/hi/HiOutlineTrash', '@react-icons/all-files/bi/BiSad', 'react-textarea-autosize', '@react-icons/all-files/hi/HiUser', '@react-icons/all-files/gr/GrMail', '@react-icons/all-files/fi/FiCheckCircle', '@react-icons/all-files/bi/BiPhone', 'react-accessible-accordion', '@react-icons/all-files/bs/BsChevronLeft', '@react-icons/all-files/bs/BsChevronRight', '@react-icons/all-files/ri/RiArrowUpSLine', '@react-icons/all-files/ri/RiArrowDownSLine', 'react-router-dom', '@react-icons/all-files/io5/IoBagCheckOutline', '@react-icons/all-files/io5/IoBagRemoveOutline', 'react-bootstrap/Dropdown', '@react-icons/all-files/hi/HiOutlinePlus', '@react-icons/all-files/ai/AiOutlineMinus', 'react-intersection-observer', '@react-icons/all-files/fa/FaArrowAltCircleRight', '@react-icons/all-files/fa/FaArrowAltCircleLeft', '@react-icons/all-files/fi/FiFilter', '@react-icons/all-files/md/MdKeyboardArrowDown', '@react-icons/all-files/fa/FaMoneyBillWave', '@react-icons/all-files/bi/BiLogOutCircle', '@react-icons/all-files/bi/BiChevronDown', '@react-icons/all-files/bi/BiUser', '@react-icons/all-files/ai/AiOutlineLogin', '@react-icons/all-files/ai/AiOutlineUserAdd', '@react-icons/all-files/ri/RiSearchLine', '@react-icons/all-files/cg/CgMenuLeft', '@react-icons/all-files/cg/CgMenuRight', '@react-icons/all-files/hi/HiOutlineShoppingBag', '@react-icons/all-files/ri/RiHandbagLine', '@react-icons/all-files/go/GoSearch', '@react-icons/all-files/fi/FiUser', '@react-icons/all-files/bi/BiSearch', '@react-icons/all-files/ai/AiOutlineHeart', '@react-icons/all-files/ai/AiOutlineMail', '@react-icons/all-files/fi/FiPhone', '@react-icons/all-files/hi/HiMenuAlt4', '@react-icons/all-files/fi/FiSearch', '@react-icons/all-files/bs/BsSearch', '@react-icons/all-files/ai/AiFillInstagram', '@react-icons/all-files/fa/FaWhatsapp', '@react-icons/all-files/ai/AiOutlineInstagram', '@react-icons/all-files/bs/BsInfoCircle', '@react-icons/all-files/ai/AiFillPhone', '@react-icons/all-files/io5/IoClose', '@react-icons/all-files/md/MdKeyboardArrowUp', '@react-icons/all-files/bi/BiGlobe', '@react-icons/all-files/fa/FaPhoneAlt', '@react-icons/all-files/fa/FaPhone', '@react-icons/all-files/go/GoLocation', '@react-icons/all-files/ai/AiOutlinePhone', '@react-icons/all-files/ri/RiRoadMapLine', '@react-icons/all-files/hi/HiOutlineClock', 'react-select', '@react-icons/all-files/io/IoIosArrowRoundForward', '@react-icons/all-files/io/IoIosArrowRoundBack', 'react-player', 'react-background-slideshow', '@babel/runtime/helpers/extends', 'react-slideshow-image', '@react-icons/all-files/hi/HiOutlineLocationMarker', '@react-icons/all-files/fi/FiPhoneCall', '@react-icons/all-files/bs/BsEye', '@react-icons/all-files/bi/BiTimeFive', '@react-icons/all-files/io/IoIosArrowUp', '@react-icons/all-files/fi/FiMinus', '@react-icons/all-files/fi/FiPlus'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.tabexseriescomponents = factory(global._slicedToArray, global.React, global._classCallCheck, global._createClass, global._assertThisInitialized, global._inherits, global._possibleConstructorReturn, global._getPrototypeOf, global._defineProperty, global.Cookies, global.reactCssfxLoading, global.glamor, global.google, global.jwtDecode, global.FacebookLogin, global.FaFacebookF, global.AiOutlineUser, global.IoMdClose, global.reactBootstrap, null, global.imagekitioReact, global.ImageGallery, global.MdAddShoppingCart, global.IoBagHandleOutline, global.BsBag, global.CgShoppingBag, global.FaRegHeart, global.FaHeart, global.FiShoppingBag, global.FiShoppingCart, global.AiFillStar, global.AiOutlineStar, global.RiSecurePaymentLine, global.HiOutlinePhone, global.AiOutlineSecurityScan, global.FiMapPin, global.FaShippingFast, global.reactShare, global._toConsumableArray, global.AiOutlineClockCircle, global.AiOutlinePlus, global.AiOutlineCheck, global.reactHorizontalScrollingMenu, global.FaStar, global.IoLocationSharp, global.HiOutlineChevronRight, global.HiOutlineChevronLeft, global.GoGlobe, global.VscGlobe, global.FiLayers, global.HiOutlineTrash, global.BiSad, global.TextareaAutosize, global.HiUser, global.GrMail, global.FiCheckCircle, global.BiPhone, global.reactAccessibleAccordion, global.BsChevronLeft, global.BsChevronRight, global.RiArrowUpSLine, global.RiArrowDownSLine, null, global.IoBagCheckOutline, global.IoBagRemoveOutline, global.Dropdown, global.HiOutlinePlus, global.AiOutlineMinus, global.reactIntersectionObserver, global.FaArrowAltCircleRight, global.FaArrowAltCircleLeft, global.FiFilter, global.MdKeyboardArrowDown, global.FaMoneyBillWave, global.BiLogOutCircle, global.BiChevronDown, global.BiUser, global.AiOutlineLogin, global.AiOutlineUserAdd, global.RiSearchLine, global.CgMenuLeft, global.CgMenuRight, global.HiOutlineShoppingBag, global.RiHandbagLine, global.GoSearch, global.FiUser, global.BiSearch, global.AiOutlineHeart, global.AiOutlineMail, global.FiPhone, global.HiMenuAlt4, global.FiSearch, global.BsSearch, global.AiFillInstagram, global.FaWhatsapp, global.AiOutlineInstagram, global.BsInfoCircle, global.AiFillPhone, global.IoClose, global.MdKeyboardArrowUp, global.BiGlobe, global.FaPhoneAlt, global.FaPhone, global.GoLocation, global.AiOutlinePhone, global.RiRoadMapLine, global.HiOutlineClock, global.Select$2, global.IoIosArrowRoundForward, global.IoIosArrowRoundBack, global.ReactPlayer, global.BackgroundSlideshow, global._extends, global.reactSlideshowImage, global.HiOutlineLocationMarker, global.FiPhoneCall, global.BsEye, global.BiTimeFive, global.IoIosArrowUp, global.FiMinus, global.FiPlus));
-})(this, (function (_slicedToArray, React, _classCallCheck, _createClass, _assertThisInitialized, _inherits, _possibleConstructorReturn, _getPrototypeOf, _defineProperty, Cookies, reactCssfxLoading, glamor, google, jwtDecode, FacebookLogin, FaFacebookF, AiOutlineUser, IoMdClose, reactBootstrap, reactQuery, imagekitioReact, ImageGallery, MdAddShoppingCart, IoBagHandleOutline, BsBag, CgShoppingBag, FaRegHeart, FaHeart, FiShoppingBag, FiShoppingCart, AiFillStar, AiOutlineStar, RiSecurePaymentLine, HiOutlinePhone, AiOutlineSecurityScan, FiMapPin, FaShippingFast, reactShare, _toConsumableArray, AiOutlineClockCircle, AiOutlinePlus, AiOutlineCheck, reactHorizontalScrollingMenu, FaStar, IoLocationSharp, HiOutlineChevronRight, HiOutlineChevronLeft, GoGlobe, VscGlobe, FiLayers, HiOutlineTrash, BiSad, TextareaAutosize, HiUser, GrMail, FiCheckCircle, BiPhone, reactAccessibleAccordion, BsChevronLeft, BsChevronRight, RiArrowUpSLine, RiArrowDownSLine, reactRouterDom, IoBagCheckOutline, IoBagRemoveOutline, Dropdown, HiOutlinePlus, AiOutlineMinus, reactIntersectionObserver, FaArrowAltCircleRight, FaArrowAltCircleLeft, FiFilter, MdKeyboardArrowDown, FaMoneyBillWave, BiLogOutCircle, BiChevronDown, BiUser, AiOutlineLogin, AiOutlineUserAdd, RiSearchLine, CgMenuLeft, CgMenuRight, HiOutlineShoppingBag, RiHandbagLine, GoSearch, FiUser, BiSearch, AiOutlineHeart, AiOutlineMail, FiPhone, HiMenuAlt4, FiSearch, BsSearch, AiFillInstagram, FaWhatsapp, AiOutlineInstagram, BsInfoCircle, AiFillPhone, IoClose, MdKeyboardArrowUp, BiGlobe, FaPhoneAlt, FaPhone, GoLocation, AiOutlinePhone, RiRoadMapLine, HiOutlineClock, Select$2, IoIosArrowRoundForward, IoIosArrowRoundBack, ReactPlayer, BackgroundSlideshow, _extends, reactSlideshowImage, HiOutlineLocationMarker, FiPhoneCall, BsEye, BiTimeFive, IoIosArrowUp, FiMinus, FiPlus) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('@babel/runtime/helpers/slicedToArray'), require('react'), require('@babel/runtime/helpers/classCallCheck'), require('@babel/runtime/helpers/createClass'), require('@babel/runtime/helpers/assertThisInitialized'), require('@babel/runtime/helpers/inherits'), require('@babel/runtime/helpers/possibleConstructorReturn'), require('@babel/runtime/helpers/getPrototypeOf'), require('@babel/runtime/helpers/defineProperty'), require('universal-cookie'), require('react-cssfx-loading'), require('glamor'), require('@react-oauth/google'), require('jwt-decode'), require('react-facebook-login/dist/facebook-login-render-props'), require('@react-icons/all-files/fa/FaFacebookF'), require('@react-icons/all-files/ai/AiOutlineUser'), require('@react-icons/all-files/io/IoMdClose'), require('react-bootstrap'), require('react-query'), require('imagekitio-react'), require('react-image-gallery'), require('@react-icons/all-files/md/MdAddShoppingCart'), require('@react-icons/all-files/io5/IoBagHandleOutline'), require('@react-icons/all-files/bs/BsBag'), require('@react-icons/all-files/cg/CgShoppingBag'), require('@react-icons/all-files/fa/FaRegHeart'), require('@react-icons/all-files/fa/FaHeart'), require('@react-icons/all-files/fi/FiShoppingBag'), require('@react-icons/all-files/fi/FiShoppingCart'), require('@react-icons/all-files/ai/AiFillStar'), require('@react-icons/all-files/ai/AiOutlineStar'), require('@react-icons/all-files/ri/RiSecurePaymentLine'), require('@react-icons/all-files/hi/HiOutlinePhone'), require('@react-icons/all-files/ai/AiOutlineSecurityScan'), require('@react-icons/all-files/fi/FiMapPin'), require('@react-icons/all-files/fa/FaShippingFast'), require('react-share'), require('@babel/runtime/helpers/toConsumableArray'), require('@react-icons/all-files/ai/AiOutlineClockCircle'), require('@react-icons/all-files/ai/AiOutlinePlus'), require('@react-icons/all-files/ai/AiOutlineCheck'), require('react-horizontal-scrolling-menu'), require('@react-icons/all-files/fa/FaStar'), require('@react-icons/all-files/io5/IoLocationSharp'), require('@react-icons/all-files/hi/HiOutlineChevronRight'), require('@react-icons/all-files/hi/HiOutlineChevronLeft'), require('@react-icons/all-files/go/GoGlobe'), require('@react-icons/all-files/vsc/VscGlobe'), require('@react-icons/all-files/fi/FiLayers'), require('@react-icons/all-files/hi/HiOutlineTrash'), require('@react-icons/all-files/bi/BiSad'), require('react-textarea-autosize'), require('@react-icons/all-files/hi/HiUser'), require('@react-icons/all-files/gr/GrMail'), require('@react-icons/all-files/fi/FiCheckCircle'), require('@react-icons/all-files/bi/BiPhone'), require('react-accessible-accordion'), require('@react-icons/all-files/bs/BsChevronLeft'), require('@react-icons/all-files/bs/BsChevronRight'), require('@react-icons/all-files/ri/RiArrowUpSLine'), require('@react-icons/all-files/ri/RiArrowDownSLine'), require('react-router-dom'), require('@react-icons/all-files/io5/IoBagCheckOutline'), require('@react-icons/all-files/io5/IoBagRemoveOutline'), require('react-bootstrap/Dropdown'), require('@react-icons/all-files/hi/HiOutlinePlus'), require('@react-icons/all-files/ai/AiOutlineMinus'), require('react-intersection-observer'), require('@react-icons/all-files/fa/FaArrowAltCircleRight'), require('@react-icons/all-files/fa/FaArrowAltCircleLeft'), require('@react-icons/all-files/fi/FiFilter'), require('@react-icons/all-files/fi/FiChevronLeft'), require('@react-icons/all-files/fi/FiChevronRight'), require('react-paginate'), require('@react-icons/all-files/md/MdKeyboardArrowDown'), require('@react-icons/all-files/fa/FaMoneyBillWave'), require('@react-icons/all-files/bi/BiLogOutCircle'), require('@react-icons/all-files/bi/BiChevronDown'), require('@react-icons/all-files/bi/BiUser'), require('@react-icons/all-files/ai/AiOutlineLogin'), require('@react-icons/all-files/ai/AiOutlineUserAdd'), require('@react-icons/all-files/ri/RiSearchLine'), require('@react-icons/all-files/cg/CgMenuLeft'), require('@react-icons/all-files/cg/CgMenuRight'), require('@react-icons/all-files/hi/HiOutlineShoppingBag'), require('@react-icons/all-files/ri/RiHandbagLine'), require('@react-icons/all-files/go/GoSearch'), require('@react-icons/all-files/fi/FiUser'), require('@react-icons/all-files/bi/BiSearch'), require('@react-icons/all-files/ai/AiOutlineHeart'), require('@react-icons/all-files/ai/AiOutlineMail'), require('@react-icons/all-files/fi/FiPhone'), require('@react-icons/all-files/hi/HiMenuAlt4'), require('@react-icons/all-files/fi/FiSearch'), require('@react-icons/all-files/bs/BsSearch'), require('@react-icons/all-files/ai/AiFillInstagram'), require('@react-icons/all-files/fa/FaWhatsapp'), require('@react-icons/all-files/ai/AiOutlineInstagram'), require('@react-icons/all-files/bs/BsInfoCircle'), require('@react-icons/all-files/ai/AiFillPhone'), require('@react-icons/all-files/io5/IoClose'), require('@react-icons/all-files/md/MdKeyboardArrowUp'), require('@react-icons/all-files/bi/BiGlobe'), require('@react-icons/all-files/fa/FaPhoneAlt'), require('@react-icons/all-files/fa/FaPhone'), require('@react-icons/all-files/go/GoLocation'), require('@react-icons/all-files/ai/AiOutlinePhone'), require('@react-icons/all-files/ri/RiRoadMapLine'), require('@react-icons/all-files/hi/HiOutlineClock'), require('react-select'), require('@react-icons/all-files/io/IoIosArrowRoundForward'), require('@react-icons/all-files/io/IoIosArrowRoundBack'), require('react-player'), require('react-background-slideshow'), require('@babel/runtime/helpers/extends'), require('react-slideshow-image'), require('@react-icons/all-files/hi/HiOutlineLocationMarker'), require('@react-icons/all-files/fi/FiPhoneCall'), require('@react-icons/all-files/bs/BsEye'), require('@react-icons/all-files/bi/BiTimeFive'), require('@react-icons/all-files/io/IoIosArrowUp'), require('@react-icons/all-files/fi/FiMinus'), require('@react-icons/all-files/fi/FiPlus')) :
+    typeof define === 'function' && define.amd ? define(['@babel/runtime/helpers/slicedToArray', 'react', '@babel/runtime/helpers/classCallCheck', '@babel/runtime/helpers/createClass', '@babel/runtime/helpers/assertThisInitialized', '@babel/runtime/helpers/inherits', '@babel/runtime/helpers/possibleConstructorReturn', '@babel/runtime/helpers/getPrototypeOf', '@babel/runtime/helpers/defineProperty', 'universal-cookie', 'react-cssfx-loading', 'glamor', '@react-oauth/google', 'jwt-decode', 'react-facebook-login/dist/facebook-login-render-props', '@react-icons/all-files/fa/FaFacebookF', '@react-icons/all-files/ai/AiOutlineUser', '@react-icons/all-files/io/IoMdClose', 'react-bootstrap', 'react-query', 'imagekitio-react', 'react-image-gallery', '@react-icons/all-files/md/MdAddShoppingCart', '@react-icons/all-files/io5/IoBagHandleOutline', '@react-icons/all-files/bs/BsBag', '@react-icons/all-files/cg/CgShoppingBag', '@react-icons/all-files/fa/FaRegHeart', '@react-icons/all-files/fa/FaHeart', '@react-icons/all-files/fi/FiShoppingBag', '@react-icons/all-files/fi/FiShoppingCart', '@react-icons/all-files/ai/AiFillStar', '@react-icons/all-files/ai/AiOutlineStar', '@react-icons/all-files/ri/RiSecurePaymentLine', '@react-icons/all-files/hi/HiOutlinePhone', '@react-icons/all-files/ai/AiOutlineSecurityScan', '@react-icons/all-files/fi/FiMapPin', '@react-icons/all-files/fa/FaShippingFast', 'react-share', '@babel/runtime/helpers/toConsumableArray', '@react-icons/all-files/ai/AiOutlineClockCircle', '@react-icons/all-files/ai/AiOutlinePlus', '@react-icons/all-files/ai/AiOutlineCheck', 'react-horizontal-scrolling-menu', '@react-icons/all-files/fa/FaStar', '@react-icons/all-files/io5/IoLocationSharp', '@react-icons/all-files/hi/HiOutlineChevronRight', '@react-icons/all-files/hi/HiOutlineChevronLeft', '@react-icons/all-files/go/GoGlobe', '@react-icons/all-files/vsc/VscGlobe', '@react-icons/all-files/fi/FiLayers', '@react-icons/all-files/hi/HiOutlineTrash', '@react-icons/all-files/bi/BiSad', 'react-textarea-autosize', '@react-icons/all-files/hi/HiUser', '@react-icons/all-files/gr/GrMail', '@react-icons/all-files/fi/FiCheckCircle', '@react-icons/all-files/bi/BiPhone', 'react-accessible-accordion', '@react-icons/all-files/bs/BsChevronLeft', '@react-icons/all-files/bs/BsChevronRight', '@react-icons/all-files/ri/RiArrowUpSLine', '@react-icons/all-files/ri/RiArrowDownSLine', 'react-router-dom', '@react-icons/all-files/io5/IoBagCheckOutline', '@react-icons/all-files/io5/IoBagRemoveOutline', 'react-bootstrap/Dropdown', '@react-icons/all-files/hi/HiOutlinePlus', '@react-icons/all-files/ai/AiOutlineMinus', 'react-intersection-observer', '@react-icons/all-files/fa/FaArrowAltCircleRight', '@react-icons/all-files/fa/FaArrowAltCircleLeft', '@react-icons/all-files/fi/FiFilter', '@react-icons/all-files/fi/FiChevronLeft', '@react-icons/all-files/fi/FiChevronRight', 'react-paginate', '@react-icons/all-files/md/MdKeyboardArrowDown', '@react-icons/all-files/fa/FaMoneyBillWave', '@react-icons/all-files/bi/BiLogOutCircle', '@react-icons/all-files/bi/BiChevronDown', '@react-icons/all-files/bi/BiUser', '@react-icons/all-files/ai/AiOutlineLogin', '@react-icons/all-files/ai/AiOutlineUserAdd', '@react-icons/all-files/ri/RiSearchLine', '@react-icons/all-files/cg/CgMenuLeft', '@react-icons/all-files/cg/CgMenuRight', '@react-icons/all-files/hi/HiOutlineShoppingBag', '@react-icons/all-files/ri/RiHandbagLine', '@react-icons/all-files/go/GoSearch', '@react-icons/all-files/fi/FiUser', '@react-icons/all-files/bi/BiSearch', '@react-icons/all-files/ai/AiOutlineHeart', '@react-icons/all-files/ai/AiOutlineMail', '@react-icons/all-files/fi/FiPhone', '@react-icons/all-files/hi/HiMenuAlt4', '@react-icons/all-files/fi/FiSearch', '@react-icons/all-files/bs/BsSearch', '@react-icons/all-files/ai/AiFillInstagram', '@react-icons/all-files/fa/FaWhatsapp', '@react-icons/all-files/ai/AiOutlineInstagram', '@react-icons/all-files/bs/BsInfoCircle', '@react-icons/all-files/ai/AiFillPhone', '@react-icons/all-files/io5/IoClose', '@react-icons/all-files/md/MdKeyboardArrowUp', '@react-icons/all-files/bi/BiGlobe', '@react-icons/all-files/fa/FaPhoneAlt', '@react-icons/all-files/fa/FaPhone', '@react-icons/all-files/go/GoLocation', '@react-icons/all-files/ai/AiOutlinePhone', '@react-icons/all-files/ri/RiRoadMapLine', '@react-icons/all-files/hi/HiOutlineClock', 'react-select', '@react-icons/all-files/io/IoIosArrowRoundForward', '@react-icons/all-files/io/IoIosArrowRoundBack', 'react-player', 'react-background-slideshow', '@babel/runtime/helpers/extends', 'react-slideshow-image', '@react-icons/all-files/hi/HiOutlineLocationMarker', '@react-icons/all-files/fi/FiPhoneCall', '@react-icons/all-files/bs/BsEye', '@react-icons/all-files/bi/BiTimeFive', '@react-icons/all-files/io/IoIosArrowUp', '@react-icons/all-files/fi/FiMinus', '@react-icons/all-files/fi/FiPlus'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.tabexseriescomponents = factory(global._slicedToArray, global.React, global._classCallCheck, global._createClass, global._assertThisInitialized, global._inherits, global._possibleConstructorReturn, global._getPrototypeOf, global._defineProperty, global.Cookies, global.reactCssfxLoading, global.glamor, global.google, global.jwtDecode, global.FacebookLogin, global.FaFacebookF, global.AiOutlineUser, global.IoMdClose, global.reactBootstrap, null, global.imagekitioReact, global.ImageGallery, global.MdAddShoppingCart, global.IoBagHandleOutline, global.BsBag, global.CgShoppingBag, global.FaRegHeart, global.FaHeart, global.FiShoppingBag, global.FiShoppingCart, global.AiFillStar, global.AiOutlineStar, global.RiSecurePaymentLine, global.HiOutlinePhone, global.AiOutlineSecurityScan, global.FiMapPin, global.FaShippingFast, global.reactShare, global._toConsumableArray, global.AiOutlineClockCircle, global.AiOutlinePlus, global.AiOutlineCheck, global.reactHorizontalScrollingMenu, global.FaStar, global.IoLocationSharp, global.HiOutlineChevronRight, global.HiOutlineChevronLeft, global.GoGlobe, global.VscGlobe, global.FiLayers, global.HiOutlineTrash, global.BiSad, global.TextareaAutosize, global.HiUser, global.GrMail, global.FiCheckCircle, global.BiPhone, global.reactAccessibleAccordion, global.BsChevronLeft, global.BsChevronRight, global.RiArrowUpSLine, global.RiArrowDownSLine, null, global.IoBagCheckOutline, global.IoBagRemoveOutline, global.Dropdown, global.HiOutlinePlus, global.AiOutlineMinus, global.reactIntersectionObserver, global.FaArrowAltCircleRight, global.FaArrowAltCircleLeft, global.FiFilter, global.FiChevronLeft, global.FiChevronRight, global.ReactPaginate, global.MdKeyboardArrowDown, global.FaMoneyBillWave, global.BiLogOutCircle, global.BiChevronDown, global.BiUser, global.AiOutlineLogin, global.AiOutlineUserAdd, global.RiSearchLine, global.CgMenuLeft, global.CgMenuRight, global.HiOutlineShoppingBag, global.RiHandbagLine, global.GoSearch, global.FiUser, global.BiSearch, global.AiOutlineHeart, global.AiOutlineMail, global.FiPhone, global.HiMenuAlt4, global.FiSearch, global.BsSearch, global.AiFillInstagram, global.FaWhatsapp, global.AiOutlineInstagram, global.BsInfoCircle, global.AiFillPhone, global.IoClose, global.MdKeyboardArrowUp, global.BiGlobe, global.FaPhoneAlt, global.FaPhone, global.GoLocation, global.AiOutlinePhone, global.RiRoadMapLine, global.HiOutlineClock, global.Select$2, global.IoIosArrowRoundForward, global.IoIosArrowRoundBack, global.ReactPlayer, global.BackgroundSlideshow, global._extends, global.reactSlideshowImage, global.HiOutlineLocationMarker, global.FiPhoneCall, global.BsEye, global.BiTimeFive, global.IoIosArrowUp, global.FiMinus, global.FiPlus));
+})(this, (function (_slicedToArray, React, _classCallCheck, _createClass, _assertThisInitialized, _inherits, _possibleConstructorReturn, _getPrototypeOf, _defineProperty, Cookies, reactCssfxLoading, glamor, google, jwtDecode, FacebookLogin, FaFacebookF, AiOutlineUser, IoMdClose, reactBootstrap, reactQuery, imagekitioReact, ImageGallery, MdAddShoppingCart, IoBagHandleOutline, BsBag, CgShoppingBag, FaRegHeart, FaHeart, FiShoppingBag, FiShoppingCart, AiFillStar, AiOutlineStar, RiSecurePaymentLine, HiOutlinePhone, AiOutlineSecurityScan, FiMapPin, FaShippingFast, reactShare, _toConsumableArray, AiOutlineClockCircle, AiOutlinePlus, AiOutlineCheck, reactHorizontalScrollingMenu, FaStar, IoLocationSharp, HiOutlineChevronRight, HiOutlineChevronLeft, GoGlobe, VscGlobe, FiLayers, HiOutlineTrash, BiSad, TextareaAutosize, HiUser, GrMail, FiCheckCircle, BiPhone, reactAccessibleAccordion, BsChevronLeft, BsChevronRight, RiArrowUpSLine, RiArrowDownSLine, reactRouterDom, IoBagCheckOutline, IoBagRemoveOutline, Dropdown, HiOutlinePlus, AiOutlineMinus, reactIntersectionObserver, FaArrowAltCircleRight, FaArrowAltCircleLeft, FiFilter, FiChevronLeft, FiChevronRight, ReactPaginate, MdKeyboardArrowDown, FaMoneyBillWave, BiLogOutCircle, BiChevronDown, BiUser, AiOutlineLogin, AiOutlineUserAdd, RiSearchLine, CgMenuLeft, CgMenuRight, HiOutlineShoppingBag, RiHandbagLine, GoSearch, FiUser, BiSearch, AiOutlineHeart, AiOutlineMail, FiPhone, HiMenuAlt4, FiSearch, BsSearch, AiFillInstagram, FaWhatsapp, AiOutlineInstagram, BsInfoCircle, AiFillPhone, IoClose, MdKeyboardArrowUp, BiGlobe, FaPhoneAlt, FaPhone, GoLocation, AiOutlinePhone, RiRoadMapLine, HiOutlineClock, Select$2, IoIosArrowRoundForward, IoIosArrowRoundBack, ReactPlayer, BackgroundSlideshow, _extends, reactSlideshowImage, HiOutlineLocationMarker, FiPhoneCall, BsEye, BiTimeFive, IoIosArrowUp, FiMinus, FiPlus) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -22,6 +22,7 @@
     var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
     var TextareaAutosize__default = /*#__PURE__*/_interopDefaultLegacy(TextareaAutosize);
     var Dropdown__default = /*#__PURE__*/_interopDefaultLegacy(Dropdown);
+    var ReactPaginate__default = /*#__PURE__*/_interopDefaultLegacy(ReactPaginate);
     var Select__default = /*#__PURE__*/_interopDefaultLegacy(Select$2);
     var ReactPlayer__default = /*#__PURE__*/_interopDefaultLegacy(ReactPlayer);
     var BackgroundSlideshow__default = /*#__PURE__*/_interopDefaultLegacy(BackgroundSlideshow);
@@ -296,7 +297,8 @@
           grouptype: '',
           grouptyperefid: '',
           sortprice: '',
-          sortdates: ''
+          sortdates: '',
+          page: 0
         }),
         _useState4 = _slicedToArray__default["default"](_useState3, 2),
         ProductFilterObjContext = _useState4[0],
@@ -9071,9 +9073,10 @@
     function ownKeys$1B(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$1B(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1B(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1B(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
     var CardsSection = function CardsSection(props) {
-      var _useInView = reactIntersectionObserver.useInView(),
-        ref = _useInView.ref,
-        inView = _useInView.inView;
+      var refscr = /*#__PURE__*/React.createRef();
+      var _useInView = reactIntersectionObserver.useInView();
+        _useInView.ref;
+        _useInView.inView;
       var StatePagePropertiesContext = props.actions.StatePagePropertiesContext;
       props.actions.lang;
       var langdetect = props.actions.langdetect;
@@ -9123,11 +9126,11 @@
         _useState12 = _slicedToArray__default["default"](_useState11, 2),
         maincontainerarrayofobjs = _useState12[0],
         setmaincontainerarrayofobjs = _useState12[1];
-      React__default["default"].useEffect(function () {
-        if (inView) {
-          fetchProductsQuery.fetchNextPage();
-        }
-      }, [inView]);
+      // React.useEffect(() => {
+      //     if (inView) {
+      //         fetchProductsQuery.fetchNextPage();
+      //     }
+      // }, [inView]);
       React.useEffect(function () {
         StatePagePropertiesContext.pageobj.sections.forEach(function (sectionitem, sectionindex) {
           if (sectionitem.sectionid == props.sectionidprops) {
@@ -9168,11 +9171,15 @@
               }
             } else if (fetchingtype == 'products') {
               if (fetchProductsQuery.isSuccess) {
+                var _fetchProductsQuery$d, _fetchProductsQuery$d2, _fetchProductsQuery$d3;
                 var allpagesarr = [];
-                fetchProductsQuery.data.pages.forEach(function (page) {
-                  page.data.products.forEach(function (productobj) {
-                    allpagesarr.push(productobj);
-                  });
+                // fetchProductsQuery.data.pages.forEach((page) => {
+                //     page.data.products.forEach((productobj) => {
+                //         allpagesarr.push(productobj);
+                //     });
+                // });
+                fetchProductsQuery === null || fetchProductsQuery === void 0 ? void 0 : (_fetchProductsQuery$d = fetchProductsQuery.data) === null || _fetchProductsQuery$d === void 0 ? void 0 : (_fetchProductsQuery$d2 = _fetchProductsQuery$d.data) === null || _fetchProductsQuery$d2 === void 0 ? void 0 : (_fetchProductsQuery$d3 = _fetchProductsQuery$d2.products) === null || _fetchProductsQuery$d3 === void 0 ? void 0 : _fetchProductsQuery$d3.forEach(function (item) {
+                  allpagesarr.push(item);
                 });
                 cardobjassigner(allpagesarr);
               }
@@ -9280,11 +9287,15 @@
       React.useEffect(function () {
         if (fetchingtype == 'products') {
           if (fetchProductsQuery.isSuccess && fetchcustomercartQueryContext.isSuccess) {
+            var _fetchProductsQuery$d4, _fetchProductsQuery$d5, _fetchProductsQuery$d6;
             var allpagesarr = [];
-            fetchProductsQuery.data.pages.forEach(function (page) {
-              page.data.products.forEach(function (productobj) {
-                allpagesarr.push(productobj);
-              });
+            // fetchProductsQuery.data.pages.forEach((page) => {
+            //     page.data.products.forEach((productobj) => {
+            //         allpagesarr.push(productobj);
+            //     });
+            // });
+            fetchProductsQuery === null || fetchProductsQuery === void 0 ? void 0 : (_fetchProductsQuery$d4 = fetchProductsQuery.data) === null || _fetchProductsQuery$d4 === void 0 ? void 0 : (_fetchProductsQuery$d5 = _fetchProductsQuery$d4.data) === null || _fetchProductsQuery$d5 === void 0 ? void 0 : (_fetchProductsQuery$d6 = _fetchProductsQuery$d5.products) === null || _fetchProductsQuery$d6 === void 0 ? void 0 : _fetchProductsQuery$d6.forEach(function (item) {
+              allpagesarr.push(item);
             });
             cardobjassigner(allpagesarr);
           }
@@ -9412,7 +9423,142 @@
         });
         setcardsarray([].concat(temparray));
       };
+      // Example items, to simulate fetching from another resources.
+
+      var handlePageClick = function handlePageClick(event) {
+        props.scrolltotop();
+        var tempProductFilterObjContext = _objectSpread$1B({}, ProductFilterObjContext);
+        tempProductFilterObjContext.page = event.selected;
+        setProductFilterObjContext(_objectSpread$1B({}, tempProductFilterObjContext));
+      };
+      function PaginatedItems(_ref) {
+        var _fetchProductsQuery$d7, _fetchProductsQuery$d8, _fetchProductsQuery$d9, _fetchProductsQuery$d10;
+        _ref.itemsPerPage;
+        // Here we use item offsets; we could also use page offsets
+        // following the API or data you're working with.
+        var _useState13 = React.useState(0),
+          _useState14 = _slicedToArray__default["default"](_useState13, 2);
+          _useState14[0];
+          _useState14[1];
+
+        // const currentItems = items.slice(itemOffset, endOffset);
+        // const pageCount = Math.ceil(items.length / itemsPerPage);
+        var pageCount = Math.ceil((fetchProductsQuery === null || fetchProductsQuery === void 0 ? void 0 : (_fetchProductsQuery$d7 = fetchProductsQuery.data) === null || _fetchProductsQuery$d7 === void 0 ? void 0 : (_fetchProductsQuery$d8 = _fetchProductsQuery$d7.data) === null || _fetchProductsQuery$d8 === void 0 ? void 0 : _fetchProductsQuery$d8.productscou) / 12);
+        //
+
+        // Invoke when user click to request another page.
+
+        return /*#__PURE__*/React__default["default"].createElement("div", {
+          "class": "d-flex containerClassName"
+        }, /*#__PURE__*/React__default["default"].createElement(ReactPaginate__default["default"], {
+          breakLabel: "...",
+          forcePage: fetchProductsQuery === null || fetchProductsQuery === void 0 ? void 0 : (_fetchProductsQuery$d9 = fetchProductsQuery.data) === null || _fetchProductsQuery$d9 === void 0 ? void 0 : (_fetchProductsQuery$d10 = _fetchProductsQuery$d9.data) === null || _fetchProductsQuery$d10 === void 0 ? void 0 : _fetchProductsQuery$d10.page,
+          nextLabel: /*#__PURE__*/React__default["default"].createElement(FiChevronRight.FiChevronRight, {
+            size: parseInt(sectionproperties.paginationFontSize) + 3
+          }),
+          onPageChange: handlePageClick,
+          active: true,
+          pageRangeDisplayed: 5,
+          pageCount: pageCount,
+          previousLabel: /*#__PURE__*/React__default["default"].createElement(FiChevronLeft.FiChevronLeft, {
+            size: parseInt(sectionproperties.paginationFontSize) + 3
+          }),
+          renderOnZeroPageCount: null,
+          pageLinkClassName: section_cssstyles.pageLinkClassName,
+          nextLinkClassName: section_cssstyles.nextLinkClassName,
+          previousLinkClassName: section_cssstyles.previousLinkClassName,
+          activeClassName: section_cssstyles.activeClassName,
+          activeLinkClassName: section_cssstyles.activeLinkClassName,
+          previousClassName: section_cssstyles.previousClassName,
+          nextClassName: section_cssstyles.nextClassName,
+          disabledClassName: section_cssstyles.disabledClassName,
+          disabledLinkClassName: section_cssstyles.disabledLinkClassName
+        }));
+      }
       var section_cssstyles = {
+        disabledClassName: glamor.css({
+          cursor: 'not-allowed',
+          ':hover': {
+            cursor: 'not-allowed',
+            color: sectionproperties.paginationColor
+          }
+        }),
+        disabledLinkClassName: glamor.css({
+          cursor: 'not-allowed',
+          ':hover': {
+            cursor: 'not-allowed',
+            color: sectionproperties.paginationColor
+          }
+        }),
+        pageLinkClassName: glamor.css({
+          minWidth: sectionproperties.paginationContainerWidth + 'vh',
+          height: sectionproperties.paginationContainerHeight + 'vh',
+          padding: '17px',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          color: sectionproperties.paginationColor,
+          border: sectionproperties.paginationBorderWidth + 'px solid ' + sectionproperties.paginationBorderColor,
+          transition: '.3s',
+          ':hover': {
+            color: sectionproperties.paginationColoronHover,
+            borderColor: sectionproperties.paginationColoronHover
+          }
+        }),
+        activeClassName: glamor.css({
+          color: sectionproperties.paginationActiveColor,
+          borderColor: sectionproperties.paginationActiveColor
+        }),
+        activeLinkClassName: glamor.css({
+          color: sectionproperties.paginationActiveColor,
+          borderColor: sectionproperties.paginationActiveColor
+        }),
+        previousClassName: glamor.css({
+          width: sectionproperties.paginationContainerWidth + 'vh',
+          height: sectionproperties.paginationContainerHeight + 'vh',
+          padding: '17px',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          color: sectionproperties.paginationColor,
+          border: sectionproperties.paginationBorderWidth + 'px solid ' + sectionproperties.paginationBorderColor,
+          transition: '.3s',
+          ':hover': {
+            color: sectionproperties.paginationColoronHover,
+            borderColor: sectionproperties.paginationColoronHover
+          }
+        }),
+        nextClassName: glamor.css({
+          width: sectionproperties.paginationContainerWidth + 'vh',
+          height: sectionproperties.paginationContainerHeight + 'vh',
+          padding: '17px',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          color: sectionproperties.paginationColor,
+          border: sectionproperties.paginationBorderWidth + 'px solid ' + sectionproperties.paginationBorderColor,
+          transition: '.3s',
+          ':hover': {
+            color: sectionproperties.paginationColoronHover,
+            borderColor: sectionproperties.paginationColoronHover
+          }
+        }),
+        previousLinkClassName: glamor.css({
+          fontSize: sectionproperties.paginationFontSize + 'px',
+          color: sectionproperties.paginationColor,
+          transition: '.3s',
+          ':hover': {
+            color: sectionproperties.paginationColoronHover
+          }
+        }),
+        nextLinkClassName: glamor.css({
+          fontSize: sectionproperties.paginationFontSize + 'px',
+          color: sectionproperties.paginationColor,
+          transition: '.3s',
+          ':hover': {
+            color: sectionproperties.paginationColoronHover
+          }
+        }),
         sectiontitlespan: glamor.css({
           ':after': {
             height: '5px',
@@ -9676,19 +9822,7 @@
                   actions: actions,
                   fontFamilyprops: sectionproperties.sectiontitlefontfamily == 'ASUL' ? 'ASUL' : ''
                 }));
-              }), fetchingtype == 'products' && fetchProductsQuery.isFetchingNextPage && /*#__PURE__*/React__default["default"].createElement("button", {
-                className: section_cssstyles.loadbtn + ' d-flex justify-content-end align-items-center mt-4 ',
-                ref: ref,
-                onClick: function onClick() {
-                  return fetchProductsQuery.fetchNextPage();
-                },
-                disabled: !fetchProductsQuery.hasNextPage || fetchProductsQuery.isFetchingNextPage
-              }, /*#__PURE__*/React__default["default"].createElement(reactCssfxLoading.CircularProgress, {
-                color: "#000",
-                width: "20px",
-                height: "20px",
-                duration: "1s"
-              })))), sectionproperties.view_as_slider_vertical != 'Slider (Horizontal)' && /*#__PURE__*/React__default["default"].createElement("div", {
+              }))), sectionproperties.view_as_slider_vertical != 'Slider (Horizontal)' && /*#__PURE__*/React__default["default"].createElement("div", {
                 className: "row m-0 w-100 d-flex ",
                 style: {
                   justifyContent: sectionproperties.justifyContentCenter == 'Centered' ? 'center' : 'start'
@@ -9708,30 +9842,15 @@
                 }));
               }), fetchingtype == 'products' && /*#__PURE__*/React__default["default"].createElement("div", {
                 className: "w-100 col-lg-12 allcentered mt-2"
-              }, /*#__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(reactCssfxLoading.CircularProgress, {
-                color: "#000",
-                width: "20px",
-                height: "20px",
-                duration: "1s"
-              }) : fetchProductsQuery.hasNextPage ? langdetect == 'en' ? 'Load more' : 'المزيد' : /*#__PURE__*/React__default["default"].createElement(reactCssfxLoading.CircularProgress, {
-                color: "#000",
-                width: "20px",
-                height: "20px",
-                duration: "1s"
-              })))));
+              }, /*#__PURE__*/React__default["default"].createElement(PaginatedItems, {
+                itemsPerPage: 5
+              }))));
             }
           }
         }))));
       };
       return /*#__PURE__*/React__default["default"].createElement("div", {
+        ref: refscr,
         "class": ' row m-0 d-flex justify-content-center ml-auto mr-auto w-md-100 w-sm-100 ',
         style: {
           zIndex: 2,
@@ -23345,7 +23464,7 @@
         }
       }, lang.loginregister)))), authdetailsContext.loggedin && /*#__PURE__*/React__default["default"].createElement("div", {
         "class": header_cssstyles.userBtnLoggedinContainer + ' allcentered ',
-        sytle: {
+        style: {
           position: 'relative'
         }
       }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -23370,7 +23489,7 @@
       }, lang.hello, langdetect == 'en' ? ',' : '،'), /*#__PURE__*/React__default["default"].createElement("p", {
         "class": header_cssstyles.loggedinusername + ' loggedinuserbtn m-0 p-0 text-overflow ',
         style: {
-          maxWidth: '65px'
+          maxWidth: sectionproperties.showfooterphonenumber == 'Show' ? '65px' : '140px'
         }
       }, authdetailsContext === null || authdetailsContext === void 0 ? void 0 : (_authdetailsContext$c = authdetailsContext.customerinfo) === null || _authdetailsContext$c === void 0 ? void 0 : _authdetailsContext$c.name)))), !authdetailsContext.loggedin && /*#__PURE__*/React__default["default"].createElement(Dropdown__default["default"].Menu, null, /*#__PURE__*/React__default["default"].createElement(Dropdown__default["default"].Item, {
         onClick: function onClick() {
@@ -39761,7 +39880,7 @@
           fontSize: '12px'
         }
       }, langdetect == 'en' ? sectionproperties.badgeContentEn : sectionproperties.badgeContentAr))), /*#__PURE__*/React__default["default"].createElement("div", {
-        "class": sectionproperties.paddingLeft != 0 && sectionproperties.paddingRight != 0 ? langdetect == 'en' ? 'row m-0 w-100 pl-sm-0 pr-sm-0' : ' row m-0 w-100' : ' row m-0 w-100',
+        "class": 'row m-0 w-100 pl-sm-0 pr-sm-0',
         style: {
           paddingLeft: '10px',
           paddingRight: '10px',

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "tabexseriescomponents",
-	"version": "0.0.172",
+	"version": "0.0.174",
 	"description": "your description",
 	"main": "dist/index.cjs.js",
 	"scripts": {
@@ -29,6 +29,7 @@
 		"react-image-gallery": "^1.2.9",
 		"react-intersection-observer": "^9.4.0",
 		"react-notifications": "^1.7.4",
+		"react-paginate": "^8.1.4",
 		"react-player": "^2.11.0",
 		"react-query": "^3.39.2",
 		"react-router": "^6.3.0",