@salesgenterp/ui-components 0.4.529 → 0.4.531

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -49,6 +49,7 @@ var TableContainer$3 = _interopDefault(require('@mui/material/TableContainer'));
49
49
  var TableHead = _interopDefault(require('@mui/material/TableHead'));
50
50
  var TableRow = _interopDefault(require('@mui/material/TableRow'));
51
51
  var reactSpinners = require('react-spinners');
52
+ var reactVirtuoso = require('react-virtuoso');
52
53
  var Box = _interopDefault(require('@mui/material/Box'));
53
54
  var TableSortLabel = _interopDefault(require('@mui/material/TableSortLabel'));
54
55
  var hi2 = require('react-icons/hi2');
@@ -6125,14 +6126,14 @@ var TableCellContainer$1 = styled__default(TableCell)(_templateObject9$2 || (_te
6125
6126
  });
6126
6127
 
6127
6128
  var _templateObject$r, _templateObject2$j, _templateObject3$d, _templateObject4$a, _templateObject5$6, _templateObject6$4, _templateObject7$3;
6128
- var CartDrawerContainer = styled__default.div(_templateObject$r || (_templateObject$r = _taggedTemplateLiteralLoose(["\n width: 100%;\n max-width: ", ";\n height: 100%;\n /* padding: 1em;\n padding-top: 0rem; */\n position: relative;\n /* min-width: 100%; */\n min-height: 100vh;\n max-height: 100vh;\n overflow-y: auto;\n\n display: flex;\n flex-direction: column;\n /* border: 1px solid; */\n"])), function (props) {
6129
+ var CartDrawerContainer = styled__default.div(_templateObject$r || (_templateObject$r = _taggedTemplateLiteralLoose(["\n width: 100%;\n max-width: ", ";\n height: 100%;\n /* padding: 1em;\n padding-top: 0rem; */\n position: relative;\n /* min-width: 100%; */\n min-height: 100vh;\n max-height: 100vh;\n overflow: hidden;\n box-sizing: border-box;\n\n display: flex;\n flex-direction: column;\n /* border: 1px solid; */\n"])), function (props) {
6129
6130
  return props.maxWidth || '650px';
6130
6131
  });
6131
- var CartDrawerBar = styled__default.div(_templateObject2$j || (_templateObject2$j = _taggedTemplateLiteralLoose(["\n width: 100%;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n position: sticky;\n box-sizing: border-box;\n top: 0;\n left: -1em;\n padding: 1em;\n height: 4.6rem;\n font-size: 1.6rem;\n background-color: white;\n font-weight: bold;\n padding-left: 1rem;\n z-index: 2;\n h2 {\n font-size: 1.5em;\n }\n .icon {\n cursor: pointer;\n font-size: 1em;\n }\n @media only screen and (max-width: 600px) {\n font-size: 1rem;\n height: 4rem;\n }\n"])));
6132
- var CartDrawerProductContainer = styled__default.div(_templateObject3$d || (_templateObject3$d = _taggedTemplateLiteralLoose(["\n width: 100%;\n height: max-content;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n position: relative;\n /* height: 900px; */\n padding: 1rem;\n min-height: 74vh;\n opacity: ", ";\n @media only screen and (max-width: 768px) {\n min-height: 75vh;\n }\n /* background-color: red; */\n"])), function (props) {
6132
+ var CartDrawerBar = styled__default.div(_templateObject2$j || (_templateObject2$j = _taggedTemplateLiteralLoose(["\n width: 100%;\n max-width: 100%;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n position: sticky;\n box-sizing: border-box;\n top: 0;\n left: 0;\n padding: 1em;\n height: 4.6rem;\n font-size: 1.6rem;\n background-color: white;\n font-weight: bold;\n padding-left: 1rem;\n z-index: 2;\n h2 {\n font-size: 1.5em;\n }\n .icon {\n cursor: pointer;\n font-size: 1em;\n }\n @media only screen and (max-width: 600px) {\n font-size: 1rem;\n height: 4rem;\n }\n"])));
6133
+ var CartDrawerProductContainer = styled__default.div(_templateObject3$d || (_templateObject3$d = _taggedTemplateLiteralLoose(["\n width: 100%;\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n position: relative;\n padding-top: 1rem;\n min-height: 0;\n height: 100%;\n overflow: hidden;\n box-sizing: border-box;\n opacity: ", ";\n /* background-color: red; */\n"])), function (props) {
6133
6134
  return props.opacity;
6134
6135
  });
6135
- var CartDrawerBottomSection = styled__default.div(_templateObject4$a || (_templateObject4$a = _taggedTemplateLiteralLoose(["\n width: 100%;\n /* height: 8rem; */\n background-color: white;\n box-shadow: 3px -2px 10px #b1b1b1;\n display: flex;\n flex-direction: column;\n // min-height: 7rem;\n position: sticky;\n bottom: 0;\n margin-top: auto;\n /* padding-bottom: 0.5rem; */\n\n /* left: 0; */\n align-items: center;\n .row {\n width: 100%;\n padding: 0rem 1rem;\n padding-top: 1rem;\n /* padding-left: 1rem; */\n h5 {\n font-weight: bold;\n font-size: 1.1rem;\n span {\n font-weight: 400;\n padding-left: 0.5rem;\n }\n }\n }\n @media only screen and (max-width: 340px) {\n min-height: 6rem;\n .row h5 {\n font-size: 0.8rem;\n }\n }\n"])));
6136
+ var CartDrawerBottomSection = styled__default.div(_templateObject4$a || (_templateObject4$a = _taggedTemplateLiteralLoose(["\n width: 100%;\n max-width: 100%;\n box-sizing: border-box;\n /* height: 8rem; */\n background-color: white;\n box-shadow: 3px -2px 10px #b1b1b1;\n display: flex;\n flex-direction: column;\n // min-height: 7rem;\n position: sticky;\n bottom: 0;\n margin-top: auto;\n /* padding-bottom: 0.5rem; */\n\n /* left: 0; */\n align-items: center;\n .row {\n width: 100%;\n padding: 0rem 1rem;\n padding-top: 1rem;\n /* padding-left: 1rem; */\n h5 {\n font-weight: bold;\n font-size: 1.1rem;\n span {\n font-weight: 400;\n padding-left: 0.5rem;\n }\n }\n }\n @media only screen and (max-width: 340px) {\n min-height: 6rem;\n .row h5 {\n font-size: 0.8rem;\n }\n }\n"])));
6136
6137
  var CartDrawerOutlinedButton = styled__default.button(_templateObject5$6 || (_templateObject5$6 = _taggedTemplateLiteralLoose(["\n width: 90%;\n height: 3.55rem;\n border: 2px solid;\n border-radius: 1rem;\n display: grid;\n place-items: center;\n font-weight: 500;\n font-size: 1rem;\n transition: 0.5s;\n outline: none;\n text-transform: capitalize;\n border-color: ", ";\n color: ", ";\n text-transform: capitalize;\n margin: 0.6rem 0;\n cursor: pointer;\n background: white;\n &:hover,\n &:focus {\n opacity: 0.8;\n letter-spacing: 1px;\n outline: none;\n }\n @media only screen and (max-width: 600px) {\n height: 2.9rem;\n }\n @media only screen and (max-width: 340px) {\n height: 2.2rem;\n margin: 0.3rem 0;\n }\n"])), function (props) {
6137
6138
  return props.color || 'black';
6138
6139
  }, function (props) {
@@ -6233,7 +6234,7 @@ function useGridSize() {
6233
6234
  return layout;
6234
6235
  }
6235
6236
 
6236
- var _templateObject$s, _templateObject2$k, _templateObject3$e, _templateObject4$b, _templateObject5$7, _templateObject6$5, _templateObject7$4, _templateObject8$3, _templateObject9$3;
6237
+ var _templateObject$s, _templateObject2$k, _templateObject3$e, _templateObject4$b, _templateObject5$7, _templateObject6$5, _templateObject7$4, _templateObject8$3, _templateObject9$3, _templateObject10$2;
6237
6238
  var CartPageSection = styled__default.section(_templateObject$s || (_templateObject$s = _taggedTemplateLiteralLoose(["\n background: ", ";\n max-width: 100%;\n width: fit-content;\n background: ", ";\n overflow: hidden;\n border-radius: 20px;\n max-width: 1600px;\n width: min(1600px, 100%);\n margin: auto;\n @media screen and (max-width: 1200px) {\n padding: 0 1em;\n }\n"])), function (props) {
6238
6239
  return props.bg;
6239
6240
  }, function (props) {
@@ -6273,12 +6274,13 @@ var CartTableContainer = styled__default(material.TableContainer)(_templateObjec
6273
6274
  }, function (props) {
6274
6275
  return props.color;
6275
6276
  });
6276
- var CartButtonsRow = styled__default.div(_templateObject8$3 || (_templateObject8$3 = _taggedTemplateLiteralLoose(["\n width: 100%;\n display: flex;\n flex-direction: row;\n justify-content: flex-end;\n align-items: center;\n padding-right: 1.85em;\n button {\n background: ", ";\n color: ", ";\n padding: 0.5em 1em;\n margin-left: 1em;\n font-size: 0.85em;\n text-transform: uppercase;\n border: none;\n cursor: pointer;\n transition: 0.4s;\n &:hover {\n transform: scale(0.9);\n }\n }\n"])), function (props) {
6277
+ var CartButtonsRow = styled__default.div(_templateObject8$3 || (_templateObject8$3 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: start;\n align-items: center;\n padding-right: 1.85em;\n button {\n background: ", ";\n color: ", ";\n padding: 0.5em 1em;\n margin-left: 1em;\n font-size: 0.85em;\n text-transform: uppercase;\n border: none;\n cursor: pointer;\n transition: 0.4s;\n &:hover {\n transform: scale(0.9);\n }\n }\n"])), function (props) {
6277
6278
  return props.bg || 'rgba(107, 106, 106, 1)';
6278
6279
  }, function (props) {
6279
6280
  return props.color || 'white';
6280
6281
  });
6281
- var CartPageBox = styled__default.div(_templateObject9$3 || (_templateObject9$3 = _taggedTemplateLiteralLoose(["\n width: 100%;\n max-width: 100%;\n margin-right: 1rem;\n min-height: 30em;\n position: relative;\n @media only screen and (max-width: 768px) {\n margin-right: 0;\n .CartnoBelowSm {\n display: none;\n }\n }\n"])));
6282
+ var PaginationRow = styled__default.div(_templateObject9$3 || (_templateObject9$3 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: flex-end;\n align-items: center;\n padding: 1em 0;\n gap: 1em;\n flex-wrap: wrap;\n .MuiPagination-root {\n .MuiPagination-ul {\n flex-wrap: wrap;\n }\n }\n @media screen and (max-width: 768px) {\n justify-content: center;\n padding: 1em 0.5em;\n }\n"])));
6283
+ var CartPageBox = styled__default.div(_templateObject10$2 || (_templateObject10$2 = _taggedTemplateLiteralLoose(["\n width: 100%;\n max-width: 100%;\n margin-right: 1rem;\n min-height: 30em;\n position: relative;\n @media only screen and (max-width: 768px) {\n margin-right: 0;\n .CartnoBelowSm {\n display: none;\n }\n }\n"])));
6282
6284
 
6283
6285
  function createCommonjsModule(fn, module) {
6284
6286
  return module = { exports: {} }, fn(module, module.exports), module.exports;
@@ -7608,6 +7610,8 @@ var CardRow = function CardRow(_ref) {
7608
7610
  }))));
7609
7611
  };
7610
7612
 
7613
+ var DEFAULT_PAGE_SIZE = 50;
7614
+ var PAGE_SIZE_OPTIONS = [50, 100, 300, 500];
7611
7615
  var headCells = function headCells(_ref) {
7612
7616
  var doNotShowPrice = _ref.doNotShowPrice;
7613
7617
  return [{
@@ -7723,7 +7727,7 @@ EnhancedTableHead.propTypes = {
7723
7727
  rowCount: propTypes.number.isRequired
7724
7728
  };
7725
7729
  function EnhancedTable(_ref2) {
7726
- var _cartData$cartLineIte, _styles$Btn, _styles$scroll, _styles$scroll2, _sortBy, _styles$Btn2, _styles$Btn3;
7730
+ var _cartData$cartLineIte, _styles$Btn, _styles$scroll, _styles$scroll2, _styles$Btn2, _styles$Btn3, _styles$Btn4, _styles$Btn5, _styles$Btn6, _styles$Btn7, _styles$Btn8, _styles$Btn9, _styles$Btn10;
7727
7731
  var cartData = _ref2.cartData,
7728
7732
  loading = _ref2.loading,
7729
7733
  imgnotfoundUrl = _ref2.imgnotfoundUrl,
@@ -7752,27 +7756,23 @@ function EnhancedTable(_ref2) {
7752
7756
  var _React$useState4 = React.useState(cartList),
7753
7757
  cartArray = _React$useState4[0],
7754
7758
  setCartArray = _React$useState4[1];
7755
- var Sort = function Sort() {
7756
- var newArray = cartArray || [];
7757
- var li = orderBy;
7758
- if (order === 'asc') {
7759
- newArray.sort(function (a, b) {
7760
- return a[li] - b[li];
7759
+ var _React$useState5 = React.useState(1),
7760
+ page = _React$useState5[0],
7761
+ setPage = _React$useState5[1];
7762
+ var _React$useState6 = React.useState(DEFAULT_PAGE_SIZE),
7763
+ rowsPerPage = _React$useState6[0],
7764
+ setRowsPerPage = _React$useState6[1];
7765
+ var NUMERIC_SORT_COLUMNS = ['quantity', 'standardPrice', 'subtotal'];
7766
+ var handleRequestSort = function handleRequestSort(event, property) {
7767
+ var isSameColumn = orderBy === property;
7768
+ if (isSameColumn) {
7769
+ setOrder(function (prev) {
7770
+ return prev === 'asc' ? 'desc' : 'asc';
7761
7771
  });
7762
- return setCartArray(newArray);
7772
+ } else {
7773
+ setOrderBy(property);
7774
+ setOrder(NUMERIC_SORT_COLUMNS.includes(property) ? 'desc' : 'asc');
7763
7775
  }
7764
- newArray.sort(function (a, b) {
7765
- return b[li] - a[li];
7766
- });
7767
- return setCartArray(newArray);
7768
- };
7769
- React.useEffect(function () {
7770
- Sort();
7771
- }, [order, orderBy]);
7772
- var handleRequestSort = function handleRequestSort(event, property) {
7773
- var isAsc = orderBy === property && order === 'asc';
7774
- setOrder(isAsc ? 'desc' : 'asc');
7775
- setOrderBy(property);
7776
7776
  };
7777
7777
  var handleSelectAllClick = function handleSelectAllClick(event) {
7778
7778
  if ((selected === null || selected === void 0 ? void 0 : selected.length) < (cartArray === null || cartArray === void 0 ? void 0 : cartArray.length)) {
@@ -7798,6 +7798,38 @@ function EnhancedTable(_ref2) {
7798
7798
  React.useEffect(function () {
7799
7799
  setCartArray(cartList);
7800
7800
  }, [cartData]);
7801
+ var getSortValue = function getSortValue(row, key) {
7802
+ var _row$key;
7803
+ if (key === 'subtotal') {
7804
+ var _row$discountAmount, _row$quantity, _row$couponDiscount;
7805
+ return ((row === null || row === void 0 ? void 0 : row.standardPrice) - ((_row$discountAmount = row === null || row === void 0 ? void 0 : row.discountAmount) != null ? _row$discountAmount : 0)) * ((_row$quantity = row === null || row === void 0 ? void 0 : row.quantity) != null ? _row$quantity : 0) - ((_row$couponDiscount = row === null || row === void 0 ? void 0 : row.couponDiscount) != null ? _row$couponDiscount : 0);
7806
+ }
7807
+ return (_row$key = row[key]) != null ? _row$key : 0;
7808
+ };
7809
+ var columnSortedArray = React.useMemo(function () {
7810
+ var arr = [].concat(cartArray || []);
7811
+ var key = orderBy;
7812
+ if (order === 'asc') {
7813
+ arr.sort(function (a, b) {
7814
+ return getSortValue(a, key) - getSortValue(b, key);
7815
+ });
7816
+ } else {
7817
+ arr.sort(function (a, b) {
7818
+ return getSortValue(b, key) - getSortValue(a, key);
7819
+ });
7820
+ }
7821
+ return arr;
7822
+ }, [cartArray, order, orderBy]);
7823
+ var sortedCartArray = lodash.sortBy(columnSortedArray, function (o) {
7824
+ return !((o === null || o === void 0 ? void 0 : o.quantity) <= 0 || (o === null || o === void 0 ? void 0 : o.availableQuantity) <= 0 || (o === null || o === void 0 ? void 0 : o.quantity) > (o === null || o === void 0 ? void 0 : o.availableQuantity));
7825
+ }) || [];
7826
+ var totalPages = Math.max(1, Math.ceil(sortedCartArray.length / rowsPerPage));
7827
+ var paginatedCartArray = sortedCartArray.slice((page - 1) * rowsPerPage, page * rowsPerPage);
7828
+ React.useEffect(function () {
7829
+ if (page > totalPages) {
7830
+ setPage(1);
7831
+ }
7832
+ }, [totalPages, page]);
7801
7833
  return /*#__PURE__*/React.createElement(CartPageBox, null, loading && /*#__PURE__*/React.createElement(Loader$1, null, /*#__PURE__*/React.createElement(reactSpinners.BounceLoader, {
7802
7834
  size: 40,
7803
7835
  color: styles === null || styles === void 0 ? void 0 : (_styles$Btn = styles.Btn) === null || _styles$Btn === void 0 ? void 0 : _styles$Btn.background,
@@ -7805,8 +7837,7 @@ function EnhancedTable(_ref2) {
7805
7837
  })), /*#__PURE__*/React.createElement(Box, {
7806
7838
  sx: {
7807
7839
  width: '100%'
7808
- },
7809
- paddingBottom: "2em"
7840
+ }
7810
7841
  }, /*#__PURE__*/React.createElement(CartTableContainer, {
7811
7842
  bg: styles === null || styles === void 0 ? void 0 : (_styles$scroll = styles.scroll) === null || _styles$scroll === void 0 ? void 0 : _styles$scroll.bg,
7812
7843
  color: styles === null || styles === void 0 ? void 0 : (_styles$scroll2 = styles.scroll) === null || _styles$scroll2 === void 0 ? void 0 : _styles$scroll2.color
@@ -7825,9 +7856,7 @@ function EnhancedTable(_ref2) {
7825
7856
  disabledSelectAllProductCheckbox: disabledSelectAllProductCheckbox,
7826
7857
  allowToProcessInvoiceForOutOfStockProductsEcommerce: allowToProcessInvoiceForOutOfStockProductsEcommerce,
7827
7858
  doNotShowPrice: doNotShowPrice
7828
- }), /*#__PURE__*/React.createElement(TableBody, null, (_sortBy = lodash.sortBy(cartArray, function (o) {
7829
- return !((o === null || o === void 0 ? void 0 : o.quantity) <= 0 || (o === null || o === void 0 ? void 0 : o.availableQuantity) <= 0 || (o === null || o === void 0 ? void 0 : o.quantity) > (o === null || o === void 0 ? void 0 : o.availableQuantity));
7830
- })) === null || _sortBy === void 0 ? void 0 : _sortBy.map(function (row, index) {
7859
+ }), /*#__PURE__*/React.createElement(TableBody, null, paginatedCartArray.map(function (row, index) {
7831
7860
  var isItemSelected = isSelected(row);
7832
7861
  return /*#__PURE__*/React.createElement(CardRow, {
7833
7862
  row: row,
@@ -7842,7 +7871,14 @@ function EnhancedTable(_ref2) {
7842
7871
  allowToProcessInvoiceForOutOfStockProductsEcommerce: allowToProcessInvoiceForOutOfStockProductsEcommerce,
7843
7872
  doNotShowPrice: doNotShowPrice
7844
7873
  });
7845
- }))))), (cartArray === null || cartArray === void 0 ? void 0 : cartArray.length) > 0 && /*#__PURE__*/React.createElement(CartButtonsRow, {
7874
+ }))))), /*#__PURE__*/React.createElement("div", {
7875
+ style: {
7876
+ display: 'flex',
7877
+ justifyContent: 'space-between',
7878
+ flexWrap: 'wrap',
7879
+ width: '100%'
7880
+ }
7881
+ }, (cartArray === null || cartArray === void 0 ? void 0 : cartArray.length) > 0 && /*#__PURE__*/React.createElement(CartButtonsRow, {
7846
7882
  bg: styles === null || styles === void 0 ? void 0 : (_styles$Btn2 = styles.Btn) === null || _styles$Btn2 === void 0 ? void 0 : _styles$Btn2.background,
7847
7883
  color: styles === null || styles === void 0 ? void 0 : (_styles$Btn3 = styles.Btn) === null || _styles$Btn3 === void 0 ? void 0 : _styles$Btn3.color
7848
7884
  }, /*#__PURE__*/React.createElement("button", {
@@ -7856,7 +7892,51 @@ function EnhancedTable(_ref2) {
7856
7892
  });
7857
7893
  setSelected([]);
7858
7894
  }
7859
- }, "remove selected")));
7895
+ }, "remove selected")), sortedCartArray.length > 0 && /*#__PURE__*/React.createElement(PaginationRow, null, totalPages > 1 && /*#__PURE__*/React.createElement(material.Pagination, {
7896
+ count: totalPages,
7897
+ page: page,
7898
+ onChange: function onChange(_, value) {
7899
+ return setPage(value);
7900
+ },
7901
+ color: "primary",
7902
+ sx: {
7903
+ '& .MuiPaginationItem-root.Mui-selected': {
7904
+ backgroundColor: styles === null || styles === void 0 ? void 0 : (_styles$Btn4 = styles.Btn) === null || _styles$Btn4 === void 0 ? void 0 : _styles$Btn4.background,
7905
+ color: (styles === null || styles === void 0 ? void 0 : (_styles$Btn5 = styles.Btn) === null || _styles$Btn5 === void 0 ? void 0 : _styles$Btn5.color) || '#fff',
7906
+ borderColor: styles === null || styles === void 0 ? void 0 : (_styles$Btn6 = styles.Btn) === null || _styles$Btn6 === void 0 ? void 0 : _styles$Btn6.background
7907
+ },
7908
+ '& .MuiPaginationItem-root.Mui-selected:hover': {
7909
+ backgroundColor: (styles === null || styles === void 0 ? void 0 : (_styles$Btn7 = styles.Btn) === null || _styles$Btn7 === void 0 ? void 0 : _styles$Btn7.background) + '80',
7910
+ color: (styles === null || styles === void 0 ? void 0 : (_styles$Btn8 = styles.Btn) === null || _styles$Btn8 === void 0 ? void 0 : _styles$Btn8.color) || '#fff',
7911
+ borderColor: styles === null || styles === void 0 ? void 0 : (_styles$Btn9 = styles.Btn) === null || _styles$Btn9 === void 0 ? void 0 : _styles$Btn9.background
7912
+ }
7913
+ },
7914
+ showFirstButton: true,
7915
+ showLastButton: true
7916
+ }), /*#__PURE__*/React.createElement(material.FormControl, {
7917
+ size: "small",
7918
+ sx: {
7919
+ minWidth: 120
7920
+ }
7921
+ }, /*#__PURE__*/React.createElement(material.Select, {
7922
+ value: rowsPerPage,
7923
+ onChange: function onChange(e) {
7924
+ setRowsPerPage(Number(e.target.value));
7925
+ setPage(1);
7926
+ },
7927
+ sx: {
7928
+ '& .MuiSelect-select': {
7929
+ backgroundColor: '#ffffff',
7930
+ borderRadius: '5px',
7931
+ borderColor: (styles === null || styles === void 0 ? void 0 : (_styles$Btn10 = styles.Btn) === null || _styles$Btn10 === void 0 ? void 0 : _styles$Btn10.background) || '#d3d3d3'
7932
+ }
7933
+ }
7934
+ }, PAGE_SIZE_OPTIONS.map(function (size) {
7935
+ return /*#__PURE__*/React.createElement(material.MenuItem, {
7936
+ key: size,
7937
+ value: size
7938
+ }, size, " per page");
7939
+ }))))));
7860
7940
  }
7861
7941
 
7862
7942
  var _templateObject$u, _templateObject2$m, _templateObject3$g, _templateObject4$d, _templateObject5$9, _templateObject6$7, _templateObject7$5;
@@ -7988,8 +8068,10 @@ var CartPageProductCard = function CartPageProductCard(_ref) {
7988
8068
  }, /*#__PURE__*/React__default.createElement(ri.RiDeleteBin5Line, null)));
7989
8069
  };
7990
8070
 
8071
+ var DEFAULT_PAGE_SIZE$1 = 50;
8072
+ var PAGE_SIZE_OPTIONS$1 = [50, 100, 300, 500];
7991
8073
  var CartPageMainRetail = function CartPageMainRetail(_ref) {
7992
- var _styles$Btn, _sortBy;
8074
+ var _styles$Btn, _styles$Btn2, _styles$Btn3, _styles$Btn4, _styles$Btn5, _styles$Btn6, _styles$Btn7, _styles$Btn8;
7993
8075
  var retail = _ref.retail,
7994
8076
  cartData = _ref.cartData,
7995
8077
  loading = _ref.loading,
@@ -8000,7 +8082,25 @@ var CartPageMainRetail = function CartPageMainRetail(_ref) {
8000
8082
  clickRedirect = _ref.clickRedirect,
8001
8083
  allowToProcessInvoiceForOutOfStockProductsEcommerce = _ref.allowToProcessInvoiceForOutOfStockProductsEcommerce,
8002
8084
  doNotShowPrice = _ref.doNotShowPrice;
8085
+ var _useState = React.useState(1),
8086
+ page = _useState[0],
8087
+ setPage = _useState[1];
8088
+ var _useState2 = React.useState(DEFAULT_PAGE_SIZE$1),
8089
+ rowsPerPage = _useState2[0],
8090
+ setRowsPerPage = _useState2[1];
8091
+ var sortedCartArray = React.useMemo(function () {
8092
+ return lodash.sortBy((cartData === null || cartData === void 0 ? void 0 : cartData.cartLineItemDtoList) || [], function (o) {
8093
+ return !((o === null || o === void 0 ? void 0 : o.quantity) <= 0 || (o === null || o === void 0 ? void 0 : o.availableQuantity) <= 0 || (o === null || o === void 0 ? void 0 : o.quantity) > (o === null || o === void 0 ? void 0 : o.availableQuantity));
8094
+ });
8095
+ }, [cartData === null || cartData === void 0 ? void 0 : cartData.cartLineItemDtoList]);
8096
+ var totalPages = Math.max(1, Math.ceil(sortedCartArray.length / rowsPerPage));
8097
+ var paginatedCartArray = sortedCartArray.slice((page - 1) * rowsPerPage, page * rowsPerPage);
8098
+ React__default.useEffect(function () {
8099
+ if (page > totalPages) setPage(1);
8100
+ }, [totalPages, page]);
8003
8101
  return /*#__PURE__*/React__default.createElement("div", {
8102
+ className: ""
8103
+ }, /*#__PURE__*/React__default.createElement("div", {
8004
8104
  className: "scrollDiv"
8005
8105
  }, /*#__PURE__*/React__default.createElement(CardsBox, {
8006
8106
  retail: retail
@@ -8008,10 +8108,9 @@ var CartPageMainRetail = function CartPageMainRetail(_ref) {
8008
8108
  size: 40,
8009
8109
  color: styles === null || styles === void 0 ? void 0 : (_styles$Btn = styles.Btn) === null || _styles$Btn === void 0 ? void 0 : _styles$Btn.background,
8010
8110
  loading: true
8011
- })), (_sortBy = lodash.sortBy(cartData === null || cartData === void 0 ? void 0 : cartData.cartLineItemDtoList, function (o) {
8012
- return !((o === null || o === void 0 ? void 0 : o.quantity) <= 0 || (o === null || o === void 0 ? void 0 : o.availableQuantity) <= 0 || (o === null || o === void 0 ? void 0 : o.quantity) > (o === null || o === void 0 ? void 0 : o.availableQuantity));
8013
- })) === null || _sortBy === void 0 ? void 0 : _sortBy.map(function (item) {
8111
+ })), paginatedCartArray.map(function (item) {
8014
8112
  return /*#__PURE__*/React__default.createElement(CartPageProductCard, {
8113
+ key: item === null || item === void 0 ? void 0 : item.productId,
8015
8114
  item: item,
8016
8115
  loading: loading,
8017
8116
  imgnotfoundUrl: imgnotfoundUrl,
@@ -8022,7 +8121,51 @@ var CartPageMainRetail = function CartPageMainRetail(_ref) {
8022
8121
  allowToProcessInvoiceForOutOfStockProductsEcommerce: allowToProcessInvoiceForOutOfStockProductsEcommerce,
8023
8122
  doNotShowPrice: doNotShowPrice
8024
8123
  });
8025
- })));
8124
+ }))), sortedCartArray.length > 0 && /*#__PURE__*/React__default.createElement(PaginationRow, null, totalPages > 1 && /*#__PURE__*/React__default.createElement(material.Pagination, {
8125
+ count: totalPages,
8126
+ page: page,
8127
+ onChange: function onChange(_, value) {
8128
+ return setPage(value);
8129
+ },
8130
+ color: "primary",
8131
+ sx: {
8132
+ '& .MuiPaginationItem-root.Mui-selected': {
8133
+ backgroundColor: styles === null || styles === void 0 ? void 0 : (_styles$Btn2 = styles.Btn) === null || _styles$Btn2 === void 0 ? void 0 : _styles$Btn2.background,
8134
+ color: (styles === null || styles === void 0 ? void 0 : (_styles$Btn3 = styles.Btn) === null || _styles$Btn3 === void 0 ? void 0 : _styles$Btn3.color) || '#fff',
8135
+ borderColor: styles === null || styles === void 0 ? void 0 : (_styles$Btn4 = styles.Btn) === null || _styles$Btn4 === void 0 ? void 0 : _styles$Btn4.background
8136
+ },
8137
+ '& .MuiPaginationItem-root.Mui-selected:hover': {
8138
+ backgroundColor: (styles === null || styles === void 0 ? void 0 : (_styles$Btn5 = styles.Btn) === null || _styles$Btn5 === void 0 ? void 0 : _styles$Btn5.background) + '80',
8139
+ color: (styles === null || styles === void 0 ? void 0 : (_styles$Btn6 = styles.Btn) === null || _styles$Btn6 === void 0 ? void 0 : _styles$Btn6.color) || '#fff',
8140
+ borderColor: styles === null || styles === void 0 ? void 0 : (_styles$Btn7 = styles.Btn) === null || _styles$Btn7 === void 0 ? void 0 : _styles$Btn7.background
8141
+ }
8142
+ },
8143
+ showFirstButton: true,
8144
+ showLastButton: true
8145
+ }), /*#__PURE__*/React__default.createElement(material.FormControl, {
8146
+ size: "small",
8147
+ sx: {
8148
+ minWidth: 120
8149
+ }
8150
+ }, /*#__PURE__*/React__default.createElement(material.Select, {
8151
+ value: rowsPerPage,
8152
+ onChange: function onChange(e) {
8153
+ setRowsPerPage(Number(e.target.value));
8154
+ setPage(1);
8155
+ },
8156
+ sx: {
8157
+ '& .MuiSelect-select': {
8158
+ backgroundColor: '#ffffff',
8159
+ borderRadius: '5px',
8160
+ borderColor: (styles === null || styles === void 0 ? void 0 : (_styles$Btn8 = styles.Btn) === null || _styles$Btn8 === void 0 ? void 0 : _styles$Btn8.background) || '#d3d3d3'
8161
+ }
8162
+ }
8163
+ }, PAGE_SIZE_OPTIONS$1.map(function (size) {
8164
+ return /*#__PURE__*/React__default.createElement(material.MenuItem, {
8165
+ key: size,
8166
+ value: size
8167
+ }, size, " per page");
8168
+ })))));
8026
8169
  };
8027
8170
 
8028
8171
  var _templateObject$v, _templateObject2$n, _templateObject3$h, _templateObject4$e, _templateObject5$a, _templateObject6$8, _templateObject7$6, _templateObject8$4;
@@ -8473,7 +8616,7 @@ var checkMinMaxQty = function checkMinMaxQty(_ref2) {
8473
8616
  };
8474
8617
 
8475
8618
  var _templateObject$w, _templateObject2$o, _templateObject3$i;
8476
- var CartDrawerProduct = styled__default.div(_templateObject$w || (_templateObject$w = _taggedTemplateLiteralLoose(["\n width: 100%;\n display: flex;\n flex-direction: row;\n height: 100px;\n justify-content: space-around;\n align-items: center;\n overflow: hidden;\n margin-bottom: 1rem;\n user-select: none;\n background: #f2f2f290;\n border: 1px solid #f2f2f290;\n padding: 0.5rem;\n border-radius: 12px;\n\n img {\n width: 20%;\n max-height: 100%;\n /* aspect-ratio: 1; */\n object-fit: contain;\n }\n .middleSection {\n width: 60%;\n padding-left: 0.8rem;\n height: 100%;\n h6 {\n font-size: 1.1rem;\n font-weight: bold;\n margin: 0;\n }\n .name {\n font-size: 0.9rem;\n line-height: 1.2rem;\n width: 100%;\n word-wrap: break-word;\n overflow: hidden;\n text-overflow: ellipsis;\n transition: 0.3s;\n cursor: pointer;\n &:hover {\n color: ", ";\n }\n }\n }\n .endSection {\n // width: 20%;\n height: 95%;\n .icon {\n cursor: pointer;\n transition: 0.4s;\n &:hover {\n color: red;\n }\n }\n }\n @media only screen and (max-width: 768px) {\n .closeIcon {\n font-size: 1rem;\n }\n }\n @media only screen and (max-width: 340px) {\n .middleSection {\n h6 {\n font-size: 0.9rem;\n }\n }\n }\n"])), function (props) {
8619
+ var CartDrawerProduct = styled__default.div(_templateObject$w || (_templateObject$w = _taggedTemplateLiteralLoose(["\n width: 100%;\n max-width: 100%;\n display: flex;\n flex-direction: row;\n height: 100px;\n justify-content: space-around;\n align-items: center;\n overflow: hidden;\n margin-bottom: 1rem;\n user-select: none;\n background: #f2f2f290;\n border: 1px solid #f2f2f290;\n padding: 0.5rem;\n border-radius: 12px;\n box-sizing: border-box;\n\n img {\n width: 20%;\n max-height: 100%;\n /* aspect-ratio: 1; */\n object-fit: contain;\n }\n .middleSection {\n width: 60%;\n padding-left: 0.8rem;\n height: 100%;\n h6 {\n font-size: 1.1rem;\n font-weight: bold;\n margin: 0;\n }\n .name {\n font-size: 0.9rem;\n line-height: 1.2rem;\n width: 100%;\n word-wrap: break-word;\n overflow: hidden;\n text-overflow: ellipsis;\n transition: 0.3s;\n cursor: pointer;\n &:hover {\n color: ", ";\n }\n }\n }\n .endSection {\n // width: 20%;\n height: 95%;\n .icon {\n cursor: pointer;\n transition: 0.4s;\n &:hover {\n color: red;\n }\n }\n }\n @media only screen and (max-width: 768px) {\n .closeIcon {\n font-size: 1rem;\n }\n }\n @media only screen and (max-width: 340px) {\n .middleSection {\n h6 {\n font-size: 0.9rem;\n }\n }\n }\n"])), function (props) {
8477
8620
  return props.color || 'grey';
8478
8621
  });
8479
8622
  var CartDrawerQtBox = styled__default.div(_templateObject2$o || (_templateObject2$o = _taggedTemplateLiteralLoose(["\n height: 30px;\n width: 86px;\n border: 1px solid rgb(211, 210, 210);\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 13.5px;\n color: #323232;\n padding: 0 0.5rem;\n border-radius: 5px;\n max-width: 100%;\n span {\n cursor: pointer;\n height: 100%;\n display: grid;\n place-items: center;\n }\n .qt {\n font-size: 12px;\n color: black;\n font-weight: 500;\n cursor: auto;\n input {\n width: 40px;\n height: 100%;\n text-align: center;\n border: none;\n }\n }\n @media only screen and (max-width: 600px) {\n min-width: 55px;\n aspect-ratio: 1/2;\n font-size: 10px;\n }\n @media only screen and (max-width: 340px) {\n min-width: 50px;\n aspect-ratio: 1/2;\n height: 22px;\n font-size: 8px;\n }\n"])));
@@ -8605,7 +8748,7 @@ var CartDrawerProductCard = function CartDrawerProductCard(_ref) {
8605
8748
  };
8606
8749
 
8607
8750
  var CartDrawer = function CartDrawer(_ref) {
8608
- var _cartData$cartLineIte, _cartData$cartLineIte2, _cartData$cartLineIte3, _cartData$totalCartPr;
8751
+ var _cartData$cartLineIte, _cartData$cartLineIte3, _cartData$totalCartPr;
8609
8752
  var cartData = _ref.cartData,
8610
8753
  maxWidth = _ref.maxWidth,
8611
8754
  color = _ref.color,
@@ -8620,6 +8763,30 @@ var CartDrawer = function CartDrawer(_ref) {
8620
8763
  doNotShowPrice = _ref$doNotShowPrice === void 0 ? false : _ref$doNotShowPrice,
8621
8764
  _ref$allowToProcessIn = _ref.allowToProcessInvoiceForOutOfStockProductsEcommerce,
8622
8765
  allowToProcessInvoiceForOutOfStockProductsEcommerce = _ref$allowToProcessIn === void 0 ? false : _ref$allowToProcessIn;
8766
+ var containerRef = React.useRef(null);
8767
+ var _useState = React.useState(400),
8768
+ listHeight = _useState[0],
8769
+ setListHeight = _useState[1];
8770
+ React.useEffect(function () {
8771
+ var updateHeight = function updateHeight() {
8772
+ if (containerRef.current) {
8773
+ requestAnimationFrame(function () {
8774
+ var _containerRef$current;
8775
+ var height = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.clientHeight;
8776
+ if (height && height > 0) {
8777
+ setListHeight(height);
8778
+ }
8779
+ });
8780
+ }
8781
+ };
8782
+ updateHeight();
8783
+ window.addEventListener('resize', updateHeight);
8784
+ var timeoutId = setTimeout(updateHeight, 100);
8785
+ return function () {
8786
+ window.removeEventListener('resize', updateHeight);
8787
+ clearTimeout(timeoutId);
8788
+ };
8789
+ }, [cartData]);
8623
8790
  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(CartDrawerContainer, {
8624
8791
  className: "cartDrawer-container",
8625
8792
  maxWidth: maxWidth
@@ -8628,23 +8795,49 @@ var CartDrawer = function CartDrawer(_ref) {
8628
8795
  onClick: function onClick() {
8629
8796
  handleClose();
8630
8797
  }
8631
- })), cartHeadingText && cartHeadingText, /*#__PURE__*/React__default.createElement(material.Box, null, (cartData === null || cartData === void 0 ? void 0 : (_cartData$cartLineIte = cartData.cartLineItemDtoList) === null || _cartData$cartLineIte === void 0 ? void 0 : _cartData$cartLineIte.length) > 0 ? /*#__PURE__*/React__default.createElement(CartDrawerProductContainer, {
8798
+ })), cartHeadingText && cartHeadingText, /*#__PURE__*/React__default.createElement(material.Box, {
8799
+ ref: containerRef,
8800
+ sx: {
8801
+ flex: 1,
8802
+ position: 'relative',
8803
+ minHeight: 0,
8804
+ display: 'flex',
8805
+ flexDirection: 'column',
8806
+ overflow: 'hidden',
8807
+ width: '100%',
8808
+ boxSizing: 'border-box'
8809
+ }
8810
+ }, loading || (cartData === null || cartData === void 0 ? void 0 : (_cartData$cartLineIte = cartData.cartLineItemDtoList) === null || _cartData$cartLineIte === void 0 ? void 0 : _cartData$cartLineIte.length) > 0 ? /*#__PURE__*/React__default.createElement(CartDrawerProductContainer, {
8632
8811
  opacity: loading ? '.4' : '1'
8633
- }, cartData === null || cartData === void 0 ? void 0 : (_cartData$cartLineIte2 = cartData.cartLineItemDtoList) === null || _cartData$cartLineIte2 === void 0 ? void 0 : _cartData$cartLineIte2.map(function (product, i) {
8634
- return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, loading && /*#__PURE__*/React__default.createElement(CartDrawerLoader, null, /*#__PURE__*/React__default.createElement(reactSpinners.PuffLoader, {
8635
- color: "black"
8636
- })), /*#__PURE__*/React__default.createElement(CartDrawerProductCard, {
8637
- product: product,
8638
- handleRedirect: handleRedirect,
8639
- handleIncrementDecrement: handleIncrementDecrement,
8640
- handleRemoveProduct: handleRemoveProduct,
8641
- color: color,
8642
- key: i,
8643
- imgnotfoundUrl: imgnotfoundUrl,
8644
- loading: loading,
8645
- allowToProcessInvoiceForOutOfStockProductsEcommerce: allowToProcessInvoiceForOutOfStockProductsEcommerce,
8646
- doNotShowPrice: doNotShowPrice
8647
- }));
8812
+ }, loading && /*#__PURE__*/React__default.createElement(CartDrawerLoader, null, /*#__PURE__*/React__default.createElement(reactSpinners.PuffLoader, {
8813
+ color: "black"
8814
+ })), /*#__PURE__*/React__default.createElement(reactVirtuoso.Virtuoso, {
8815
+ data: cartData === null || cartData === void 0 ? void 0 : cartData.cartLineItemDtoList,
8816
+ style: {
8817
+ height: listHeight,
8818
+ width: '100%',
8819
+ boxSizing: 'border-box'
8820
+ },
8821
+ itemContent: function itemContent(index, product) {
8822
+ var _cartData$cartLineIte2;
8823
+ return /*#__PURE__*/React__default.createElement("div", {
8824
+ style: {
8825
+ padding: '0 1rem',
8826
+ paddingBottom: index === (cartData === null || cartData === void 0 ? void 0 : (_cartData$cartLineIte2 = cartData.cartLineItemDtoList) === null || _cartData$cartLineIte2 === void 0 ? void 0 : _cartData$cartLineIte2.length) - 1 ? '1rem' : '0',
8827
+ boxSizing: 'border-box'
8828
+ }
8829
+ }, /*#__PURE__*/React__default.createElement(CartDrawerProductCard, {
8830
+ product: product,
8831
+ handleRedirect: handleRedirect,
8832
+ handleIncrementDecrement: handleIncrementDecrement,
8833
+ handleRemoveProduct: handleRemoveProduct,
8834
+ color: color,
8835
+ imgnotfoundUrl: imgnotfoundUrl,
8836
+ loading: loading,
8837
+ allowToProcessInvoiceForOutOfStockProductsEcommerce: allowToProcessInvoiceForOutOfStockProductsEcommerce,
8838
+ doNotShowPrice: doNotShowPrice
8839
+ }));
8840
+ }
8648
8841
  })) : /*#__PURE__*/React__default.createElement(CartDrawerEmptyCart, {
8649
8842
  color: color
8650
8843
  }, /*#__PURE__*/React__default.createElement(bs.BsCartX, {
@@ -10982,7 +11175,7 @@ var CheckoutSummary = function CheckoutSummary(_ref) {
10982
11175
  }, renderMoney(orderTotal === null || orderTotal === void 0 ? void 0 : orderTotal.adjustmentValue))));
10983
11176
  };
10984
11177
 
10985
- var _templateObject$M, _templateObject2$x, _templateObject3$o, _templateObject4$j, _templateObject5$f, _templateObject6$d, _templateObject7$9, _templateObject8$7, _templateObject9$5, _templateObject10$2, _templateObject11$2, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16$1, _templateObject17$1, _templateObject18$1;
11178
+ var _templateObject$M, _templateObject2$x, _templateObject3$o, _templateObject4$j, _templateObject5$f, _templateObject6$d, _templateObject7$9, _templateObject8$7, _templateObject9$5, _templateObject10$3, _templateObject11$2, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16$1, _templateObject17$1, _templateObject18$1;
10986
11179
  var StepContainer = styled__default.div(_templateObject$M || (_templateObject$M = _taggedTemplateLiteralLoose(["\n width: 100%;\n max-width: 60em;\n background: white;\n padding: 1em 2em;\n background: #ffffff;\n border-radius: 20px;\n margin-left: 2em;\n margin-top: -2em;\n margin-bottom: 1em;\n // @media screen and (max-width: 1200px) {\n // width: 80vw;\n // min-width: 0;\n // }\n @media screen and (max-width: 768px) {\n // width: 96%;\n margin-left: 1em;\n padding: 0.8em;\n }\n @media screen and (max-width: 600px) {\n // width: 94%;\n margin-left: 1.2em;\n }\n"])));
10987
11180
  var StepsContent = styled__default.div(_templateObject2$x || (_templateObject2$x = _taggedTemplateLiteralLoose(["\n padding-left: 1.565em;\n min-height: max-content;\n .MuiOutlinedInput-root {\n background: ", ";\n }\n\n p {\n font-size: 0.75em;\n }\n .bold {\n text-transform: uppercase;\n word-spacing: 5px;\n margin-top: 0.95em;\n span {\n font-weight: 600;\n cursor: pointer;\n font-size: 0.94rem;\n }\n .red {\n color: ", ";\n }\n }\n @media screen and (max-width: 768px) {\n padding: 0;\n width: 100%;\n }\n"])), function (props) {
10988
11181
  return 'transparent' + '!important';
@@ -11054,7 +11247,7 @@ var CheckBoxRow = styled__default.div(_templateObject9$5 || (_templateObject9$5
11054
11247
  }, function (prop) {
11055
11248
  return prop.colorText || 'red';
11056
11249
  });
11057
- var CreditCardFextField = styled__default.div(_templateObject10$2 || (_templateObject10$2 = _taggedTemplateLiteralLoose(["\n label {\n color: rgba(107, 106, 106, 0.6) !important;\n }\n .MuiOutlinedInput-root {\n background: ", ";\n }\n .save-btn {\n background: ", ";\n }\n"])), function (prop) {
11250
+ var CreditCardFextField = styled__default.div(_templateObject10$3 || (_templateObject10$3 = _taggedTemplateLiteralLoose(["\n label {\n color: rgba(107, 106, 106, 0.6) !important;\n }\n .MuiOutlinedInput-root {\n background: ", ";\n }\n .save-btn {\n background: ", ";\n }\n"])), function (prop) {
11058
11251
  return prop.bgInput + '!important' || '';
11059
11252
  }, function (prop) {
11060
11253
  return prop.btnBg + '!important' || '';