@salesgenterp/ui-components 0.4.528 → 0.4.530

package/dist/index.js

@@ -49,6 +49,7 @@ var TableContainer$3 = _interopDefault(require('@mui/material/TableContainer'));
 var TableHead = _interopDefault(require('@mui/material/TableHead'));
 var TableRow = _interopDefault(require('@mui/material/TableRow'));
 var reactSpinners = require('react-spinners');
+var reactVirtuoso = require('react-virtuoso');
 var Box = _interopDefault(require('@mui/material/Box'));
 var TableSortLabel = _interopDefault(require('@mui/material/TableSortLabel'));
 var hi2 = require('react-icons/hi2');
@@ -302,6 +303,7 @@ var DATE_FORMATS = {
   TIMESTAMP_FORMAT: 'DD MMM YY hh:mm A',
   LIST_DATE_TIME_FORMAT: 'YYYY-MM-DD hh:mm A',
   DEFAULT_DATE_FORMAT: 'YYYY-MM-DD',
+  LOCAL_DATE_FORMAT: 'DD MMM YY',
   TIME: 'hh:mm:ss A'
 };
 var DEFAULT_PAYMENT_PROVIDER = {
@@ -6124,14 +6126,14 @@ var TableCellContainer$1 = styled__default(TableCell)(_templateObject9$2 || (_te
 });
 
 var _templateObject$r, _templateObject2$j, _templateObject3$d, _templateObject4$a, _templateObject5$6, _templateObject6$4, _templateObject7$3;
-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) {
+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) {
   return props.maxWidth || '650px';
 });
-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"])));
-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) {
+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"])));
+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) {
   return props.opacity;
 });
-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"])));
+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"])));
 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) {
   return props.color || 'black';
 }, function (props) {
@@ -8472,7 +8474,7 @@ var checkMinMaxQty = function checkMinMaxQty(_ref2) {
 };
 
 var _templateObject$w, _templateObject2$o, _templateObject3$i;
-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) {
+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) {
   return props.color || 'grey';
 });
 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"])));
@@ -8604,7 +8606,7 @@ var CartDrawerProductCard = function CartDrawerProductCard(_ref) {
 };
 
 var CartDrawer = function CartDrawer(_ref) {
-  var _cartData$cartLineIte, _cartData$cartLineIte2, _cartData$cartLineIte3, _cartData$totalCartPr;
+  var _cartData$cartLineIte, _cartData$cartLineIte3, _cartData$totalCartPr;
   var cartData = _ref.cartData,
     maxWidth = _ref.maxWidth,
     color = _ref.color,
@@ -8619,6 +8621,30 @@ var CartDrawer = function CartDrawer(_ref) {
     doNotShowPrice = _ref$doNotShowPrice === void 0 ? false : _ref$doNotShowPrice,
     _ref$allowToProcessIn = _ref.allowToProcessInvoiceForOutOfStockProductsEcommerce,
     allowToProcessInvoiceForOutOfStockProductsEcommerce = _ref$allowToProcessIn === void 0 ? false : _ref$allowToProcessIn;
+  var containerRef = React.useRef(null);
+  var _useState = React.useState(400),
+    listHeight = _useState[0],
+    setListHeight = _useState[1];
+  React.useEffect(function () {
+    var updateHeight = function updateHeight() {
+      if (containerRef.current) {
+        requestAnimationFrame(function () {
+          var _containerRef$current;
+          var height = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.clientHeight;
+          if (height && height > 0) {
+            setListHeight(height);
+          }
+        });
+      }
+    };
+    updateHeight();
+    window.addEventListener('resize', updateHeight);
+    var timeoutId = setTimeout(updateHeight, 100);
+    return function () {
+      window.removeEventListener('resize', updateHeight);
+      clearTimeout(timeoutId);
+    };
+  }, [cartData]);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(CartDrawerContainer, {
     className: "cartDrawer-container",
     maxWidth: maxWidth
@@ -8627,23 +8653,49 @@ var CartDrawer = function CartDrawer(_ref) {
     onClick: function onClick() {
       handleClose();
     }
-  })), 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, {
+  })), cartHeadingText && cartHeadingText, /*#__PURE__*/React__default.createElement(material.Box, {
+    ref: containerRef,
+    sx: {
+      flex: 1,
+      position: 'relative',
+      minHeight: 0,
+      display: 'flex',
+      flexDirection: 'column',
+      overflow: 'hidden',
+      width: '100%',
+      boxSizing: 'border-box'
+    }
+  }, (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, {
     opacity: loading ? '.4' : '1'
-  }, cartData === null || cartData === void 0 ? void 0 : (_cartData$cartLineIte2 = cartData.cartLineItemDtoList) === null || _cartData$cartLineIte2 === void 0 ? void 0 : _cartData$cartLineIte2.map(function (product, i) {
-    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, loading && /*#__PURE__*/React__default.createElement(CartDrawerLoader, null, /*#__PURE__*/React__default.createElement(reactSpinners.PuffLoader, {
-      color: "black"
-    })), /*#__PURE__*/React__default.createElement(CartDrawerProductCard, {
-      product: product,
-      handleRedirect: handleRedirect,
-      handleIncrementDecrement: handleIncrementDecrement,
-      handleRemoveProduct: handleRemoveProduct,
-      color: color,
-      key: i,
-      imgnotfoundUrl: imgnotfoundUrl,
-      loading: loading,
-      allowToProcessInvoiceForOutOfStockProductsEcommerce: allowToProcessInvoiceForOutOfStockProductsEcommerce,
-      doNotShowPrice: doNotShowPrice
-    }));
+  }, loading && /*#__PURE__*/React__default.createElement(CartDrawerLoader, null, /*#__PURE__*/React__default.createElement(reactSpinners.PuffLoader, {
+    color: "black"
+  })), /*#__PURE__*/React__default.createElement(reactVirtuoso.Virtuoso, {
+    data: cartData === null || cartData === void 0 ? void 0 : cartData.cartLineItemDtoList,
+    style: {
+      height: listHeight,
+      width: '100%',
+      boxSizing: 'border-box'
+    },
+    itemContent: function itemContent(index, product) {
+      var _cartData$cartLineIte2;
+      return /*#__PURE__*/React__default.createElement("div", {
+        style: {
+          padding: '0 1rem',
+          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',
+          boxSizing: 'border-box'
+        }
+      }, /*#__PURE__*/React__default.createElement(CartDrawerProductCard, {
+        product: product,
+        handleRedirect: handleRedirect,
+        handleIncrementDecrement: handleIncrementDecrement,
+        handleRemoveProduct: handleRemoveProduct,
+        color: color,
+        imgnotfoundUrl: imgnotfoundUrl,
+        loading: loading,
+        allowToProcessInvoiceForOutOfStockProductsEcommerce: allowToProcessInvoiceForOutOfStockProductsEcommerce,
+        doNotShowPrice: doNotShowPrice
+      }));
+    }
   })) : /*#__PURE__*/React__default.createElement(CartDrawerEmptyCart, {
     color: color
   }, /*#__PURE__*/React__default.createElement(bs.BsCartX, {
@@ -10519,7 +10571,7 @@ var StaticPageList = function StaticPageList(_ref) {
       item: true
     }, getLocalTime({
       time: item === null || item === void 0 ? void 0 : item.insertedTimestamp,
-      format: DATE_FORMATS.DEFAULT_DATE_FORMAT
+      format: DATE_FORMATS.LOCAL_DATE_FORMAT
     })), /*#__PURE__*/React__default.createElement(material.Grid, {
       item: true
     }, (item === null || item === void 0 ? void 0 : item.createdByName) || (item === null || item === void 0 ? void 0 : item.createdBy)))))))));