@salesgenterp/ui-components 0.1.3 → 0.1.8

package/dist/index.modern.js

@@ -15,6 +15,7 @@ import ShareIcon from '@mui/icons-material/Share';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import { Stack } from '@mui/material';
+import { PuffLoader } from 'react-spinners';
 
 function _extends() {
   _extends = Object.assign || function (target) {
@@ -2882,7 +2883,7 @@ function _templateObject6$1() {
 }
 
 function _templateObject5$2() {
-  var data = _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: 640px) {\n    height: 3rem;\n  }\n"]);
+  var data = _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: 640px) {\n    height: 2.9rem;\n  }\n  @media only screen and (max-width: 340px) {\n    height: 2.2rem;\n    margin: 0.3rem 0;\n  }\n"]);
 
   _templateObject5$2 = function _templateObject5() {
     return data;
@@ -2892,7 +2893,7 @@ function _templateObject5$2() {
 }
 
 function _templateObject4$3() {
-  var data = _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  /* left: 0; */\n  align-items: center;\n  .row {\n    width: 90%;\n    margin: 0rem auto;\n    margin-top: 0.3rem;\n    h5 {\n      font-weight: bold;\n      font-size: 1.1rem;\n      span {\n        font-weight: 400;\n        margin-left: 0.5rem;\n      }\n    }\n  }\n"]);
+  var data = _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  /* padding-bottom: 0.5rem; */\n\n  /* left: 0; */\n  align-items: center;\n  .row {\n    width: 90%;\n    margin: 0rem auto;\n    margin-top: 0.3rem;\n    h5 {\n      font-weight: bold;\n      font-size: 1.1rem;\n      span {\n        font-weight: 400;\n        margin-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"]);
 
   _templateObject4$3 = function _templateObject4() {
     return data;
@@ -2902,7 +2903,7 @@ function _templateObject4$3() {
 }
 
 function _templateObject3$3() {
-  var data = _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  /* height: 900px; */\n  padding: 1rem;\n  min-height: 73vh;\n  /* background-color: red; */\n"]);
+  var data = _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: 748px) {\n    min-height: 75vh;\n  }\n  /* background-color: red; */\n"]);
 
   _templateObject3$3 = function _templateObject3() {
     return data;
@@ -2922,7 +2923,7 @@ function _templateObject2$3() {
 }
 
 function _templateObject$7() {
-  var data = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  max-width: ", ";\n  height: 100%;\n  font-family: ", ";\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  /* background-color: grey; */\n  border: 1px solid;\n"]);
+  var data = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  max-width: ", ";\n  height: 100%;\n  font-family: ", ";\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  /* background-color: grey; */\n  /* border: 1px solid; */\n"]);
 
   _templateObject$7 = function _templateObject() {
     return data;
@@ -2936,7 +2937,9 @@ var CartDrawerContainer = styled.div(_templateObject$7(), function (props) {
   return props.fontFamily;
 });
 var CartDrawerBar = styled.div(_templateObject2$3());
-var CartDrawerProductContainer = styled.div(_templateObject3$3());
+var CartDrawerProductContainer = styled.div(_templateObject3$3(), function (props) {
+  return props.opacity;
+});
 var CartDrawerBottomSection = styled.div(_templateObject4$3());
 var CartDrawerOutlinedButton = styled.button(_templateObject5$2(), function (props) {
   return props.color || 'black';
@@ -2962,8 +2965,18 @@ function AiOutlineMinus (props) {
   return GenIcon({"tag":"svg","attr":{"t":"1551322312294","style":"","viewBox":"0 0 1024 1024","version":"1.1"},"child":[{"tag":"defs","attr":{},"child":[]},{"tag":"path","attr":{"d":"M474 152m8 0l60 0q8 0 8 8l0 704q0 8-8 8l-60 0q-8 0-8-8l0-704q0-8 8-8Z"}},{"tag":"path","attr":{"d":"M168 474m8 0l672 0q8 0 8 8l0 60q0 8-8 8l-672 0q-8 0-8-8l0-60q0-8 8-8Z"}}]})(props);
 }
 
+function _templateObject3$4() {
+  var data = _taggedTemplateLiteralLoose(["\nposition:absolute;\ntop:30%;\nwidth:100px;\nheight:100px;\ndisplay:grid;\nplace-items:center;\n"]);
+
+  _templateObject3$4 = function _templateObject3() {
+    return data;
+  };
+
+  return data;
+}
+
 function _templateObject2$4() {
-  var data = _taggedTemplateLiteralLoose(["\n  height: 34px;\n  width: 82px;\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: #333;\n  padding: 0 0.5rem;\n  border-radius: 5px;\n  max-width: 100%;\n\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: copy;\n  }\n  @media only screen and (max-width: 640px) {\n    min-width: 55px;\n    aspect-ratio: 1/2;\n    /* min-height: 28px; */\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"]);
+  var data = _taggedTemplateLiteralLoose(["\n  height: 34px;\n  width: 82px;\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: #333;\n  padding: 0 0.5rem;\n  border-radius: 5px;\n  max-width: 100%;\n\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  }\n  @media only screen and (max-width: 640px) {\n    min-width: 55px;\n    aspect-ratio: 1/2;\n    /* min-height: 28px; */\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"]);
 
   _templateObject2$4 = function _templateObject2() {
     return data;
@@ -2973,7 +2986,7 @@ function _templateObject2$4() {
 }
 
 function _templateObject$8() {
-  var data = _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: 2rem;\n  img {\n    width: 20%;\n    /* aspect-ratio: 1; */\n    object-fit: cover;\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      span {\n        font-size: 0.8rem;\n        color: grey;\n        text-decoration: line-through;\n        margin-right: 0.5rem;\n      }\n    }\n    .name {\n      font-size: 0.9rem;\n      max-height: 50px;\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: 100%;\n    .icon {\n      cursor: pointer;\n      transition: 0.4s;\n      &:hover {\n        opacity: 0.7;\n      }\n    }\n  }\n  @media only screen and (max-width: 340px) {\n    height: 80px;\n    .middleSection {\n      h6 {\n        font-size: 0.9rem;\n      }\n      .name {\n        font-size: 0.7rem;\n        height: 2rem;\n      }\n    }\n  }\n"]);
+  var data = _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: 2rem;\n  img {\n    width: 20%;\n    /* aspect-ratio: 1; */\n    object-fit: cover;\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      span {\n        font-size: 0.8rem;\n        color: grey;\n        text-decoration: line-through;\n        margin-right: 0.5rem;\n      }\n    }\n    .name {\n      font-size: 0.9rem;\n      line-height: 1.2rem;\n      max-height: 2.45rem;\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: 100%;\n    .icon {\n      cursor: pointer;\n      transition: 0.4s;\n      &:hover {\n        opacity: 0.7;\n      }\n    }\n  }\n  @media only screen and (max-width: 340px) {\n    height: 80px;\n    .middleSection {\n      h6 {\n        font-size: 0.9rem;\n      }\n      .name {\n        font-size: 0.7rem;\n        height: 1.45rem;\n      }\n    }\n  }\n"]);
 
   _templateObject$8 = function _templateObject() {
     return data;
@@ -2985,9 +2998,10 @@ var CartDrawerProduct = styled.div(_templateObject$8(), function (props) {
   return props.color || 'grey';
 });
 var CartDrawerQtBox = styled.div(_templateObject2$4());
+var CartDrawerLoader = styled.div(_templateObject3$4());
 
 var CartDrawerProductCard = function CartDrawerProductCard(_ref) {
-  var _product$standardPric, _product$standardPric2;
+  var _product$cartStandard, _product$standardPric;
 
   var product = _ref.product,
       color = _ref.color,
@@ -2997,7 +3011,7 @@ var CartDrawerProductCard = function CartDrawerProductCard(_ref) {
   return /*#__PURE__*/React__default.createElement(CartDrawerProduct, {
     color: color
   }, /*#__PURE__*/React__default.createElement("img", {
-    src: product.imageUrl && product.imageUrl !== 'null' ? product.imageUrl : '',
+    src: product.imageUrl && product.imageUrl !== 'null' ? product.imageUrl : '/images/imgnotfound.jpeg',
     alt: 'no product image available'
   }), /*#__PURE__*/React__default.createElement(Stack, {
     flexDirection: "column",
@@ -3007,9 +3021,9 @@ var CartDrawerProductCard = function CartDrawerProductCard(_ref) {
   }, /*#__PURE__*/React__default.createElement("h6", {
     className: "name",
     onClick: function onClick() {
-      return handleRedirect(product.aliase, product.productId);
+      return handleRedirect(product);
     }
-  }, product === null || product === void 0 ? void 0 : product.productName), /*#__PURE__*/React__default.createElement("h6", null, (product === null || product === void 0 ? void 0 : product.standardPrice) === (product === null || product === void 0 ? void 0 : product.standardPriceWithoutDiscount) ? "$" + (product === null || product === void 0 ? void 0 : product.standardPrice) : /*#__PURE__*/React__default.createElement(Fragment, null, /*#__PURE__*/React__default.createElement("span", null, "$", product === null || product === void 0 ? void 0 : (_product$standardPric = product.standardPriceWithoutDiscount) === null || _product$standardPric === void 0 ? void 0 : _product$standardPric.toFixed(2)), "$", product === null || product === void 0 ? void 0 : (_product$standardPric2 = product.standardPrice) === null || _product$standardPric2 === void 0 ? void 0 : _product$standardPric2.toFixed(2)))), /*#__PURE__*/React__default.createElement(Stack, {
+  }, product === null || product === void 0 ? void 0 : product.productName), /*#__PURE__*/React__default.createElement("h6", null, (product === null || product === void 0 ? void 0 : product.standardPrice) === (product === null || product === void 0 ? void 0 : product.cartStandardPrice) ? "$" + (product === null || product === void 0 ? void 0 : product.standardPrice) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("span", null, "$", product === null || product === void 0 ? void 0 : (_product$cartStandard = product.cartStandardPrice) === null || _product$cartStandard === void 0 ? void 0 : _product$cartStandard.toFixed(2)), "$", product === null || product === void 0 ? void 0 : (_product$standardPric = product.standardPrice) === null || _product$standardPric === void 0 ? void 0 : _product$standardPric.toFixed(2)))), /*#__PURE__*/React__default.createElement(Stack, {
     flexDirection: "column",
     justifyContent: "space-between",
     alignItems: "flex-end",
@@ -3017,17 +3031,17 @@ var CartDrawerProductCard = function CartDrawerProductCard(_ref) {
   }, /*#__PURE__*/React__default.createElement(RiDeleteBin5Line, {
     className: "icon",
     onClick: function onClick() {
-      handleRemoveProduct(product.productId);
+      handleRemoveProduct(product);
     }
   }), /*#__PURE__*/React__default.createElement(CartDrawerQtBox, null, /*#__PURE__*/React__default.createElement("span", {
     onClick: function onClick() {
-      handleIncrementDecrement('decrement', product.productId);
+      handleIncrementDecrement('decrement', product);
     }
   }, ' ', /*#__PURE__*/React__default.createElement(AiOutlineMinus, null)), ' ', /*#__PURE__*/React__default.createElement("span", {
     className: 'qt'
   }, product === null || product === void 0 ? void 0 : product.quantity), /*#__PURE__*/React__default.createElement("span", {
     onClick: function onClick() {
-      handleIncrementDecrement('increment', product.productId);
+      handleIncrementDecrement('increment', product);
     }
   }, /*#__PURE__*/React__default.createElement(AiOutlinePlus, null)))));
 };
@@ -3041,23 +3055,28 @@ var CartDrawer = function CartDrawer(_ref) {
       handleRedirect = _ref.handleRedirect,
       handleIncrementDecrement = _ref.handleIncrementDecrement,
       handleRemoveProduct = _ref.handleRemoveProduct,
-      handleClose = _ref.handleClose;
-  return /*#__PURE__*/React__default.createElement(Fragment, null, /*#__PURE__*/React__default.createElement(CartDrawerContainer, {
+      handleClose = _ref.handleClose,
+      loading = _ref.loading;
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(CartDrawerContainer, {
     maxWidth: maxWidth
   }, /*#__PURE__*/React__default.createElement(CartDrawerBar, null, /*#__PURE__*/React__default.createElement("h2", null, "Your Cart"), /*#__PURE__*/React__default.createElement(GrClose, {
     className: "icon",
     onClick: function onClick() {
       handleClose();
     }
-  })), cartData && (cartData === null || cartData === void 0 ? void 0 : cartData.totalCartQuantity) > 0 ? /*#__PURE__*/React__default.createElement(CartDrawerProductContainer, null, cartData === null || cartData === void 0 ? void 0 : (_cartData$cartLineIte = cartData.cartLineItems) === null || _cartData$cartLineIte === void 0 ? void 0 : _cartData$cartLineIte.map(function (product, i) {
-    return /*#__PURE__*/React__default.createElement(CartDrawerProductCard, {
+  })), cartData && (cartData === null || cartData === void 0 ? void 0 : cartData.totalCartQuantity) > 0 ? /*#__PURE__*/React__default.createElement(CartDrawerProductContainer, {
+    opacity: loading ? '.4' : '1'
+  }, cartData === null || cartData === void 0 ? void 0 : (_cartData$cartLineIte = cartData.cartLineItemDtoList) === null || _cartData$cartLineIte === void 0 ? void 0 : _cartData$cartLineIte.map(function (product, i) {
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(CartDrawerLoader, null, /*#__PURE__*/React__default.createElement(PuffLoader, {
+      color: "black"
+    })), /*#__PURE__*/React__default.createElement(CartDrawerProductCard, {
       product: product,
       handleRedirect: handleRedirect,
       handleIncrementDecrement: handleIncrementDecrement,
       handleRemoveProduct: handleRemoveProduct,
       color: color,
       key: i
-    });
+    }));
   })) : /*#__PURE__*/React__default.createElement(CartDrawerEmptyCart, {
     color: color
   }, /*#__PURE__*/React__default.createElement(BsCartX, {