@salesgenterp/ui-components 0.1.0 → 0.1.6

package/dist/index.modern.js

@@ -14,6 +14,7 @@ import FavoriteIcon from '@mui/icons-material/Favorite';
 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';
 
 function _extends() {
   _extends = Object.assign || function (target) {
@@ -2770,6 +2771,315 @@ var TestCard = function TestCard(props) {
   }, "Add rice and stir very gently to distribute. Top with artichokes and peppers, and cook without stirring, until most of the liquid is absorbed, 15 to 18 minutes. Reduce heat to medium-low, add reserved shrimp and mussels, tucking them down into the rice, and cook again without stirring, until mussels have opened and rice is just tender, 5 to 7 minutes more. (Discard any mussels that don't open.)"), /*#__PURE__*/React__default.createElement(Typography, null, "Set aside off of the heat to let rest for 10 minutes, and then serve.")))));
 };
 
+var DefaultContext = {
+  color: undefined,
+  size: undefined,
+  className: undefined,
+  style: undefined,
+  attr: undefined
+};
+var IconContext = React__default.createContext && React__default.createContext(DefaultContext);
+
+var __assign = undefined && undefined.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+
+    return t;
+  };
+
+  return __assign.apply(this, arguments);
+};
+
+var __rest = undefined && undefined.__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+function Tree2Element(tree) {
+  return tree && tree.map(function (node, i) {
+    return React__default.createElement(node.tag, __assign({
+      key: i
+    }, node.attr), Tree2Element(node.child));
+  });
+}
+
+function GenIcon(data) {
+  return function (props) {
+    return React__default.createElement(IconBase$1, __assign({
+      attr: __assign({}, data.attr)
+    }, props), Tree2Element(data.child));
+  };
+}
+function IconBase$1(props) {
+  var elem = function (conf) {
+    var attr = props.attr,
+        size = props.size,
+        title = props.title,
+        svgProps = __rest(props, ["attr", "size", "title"]);
+
+    var computedSize = size || conf.size || "1em";
+    var className;
+    if (conf.className) className = conf.className;
+    if (props.className) className = (className ? className + ' ' : '') + props.className;
+    return React__default.createElement("svg", __assign({
+      stroke: "currentColor",
+      fill: "currentColor",
+      strokeWidth: "0"
+    }, conf.attr, attr, svgProps, {
+      className: className,
+      style: __assign(__assign({
+        color: props.color || conf.color
+      }, conf.style), props.style),
+      height: computedSize,
+      width: computedSize,
+      xmlns: "http://www.w3.org/2000/svg"
+    }), title && React__default.createElement("title", null, title), props.children);
+  };
+
+  return IconContext !== undefined ? React__default.createElement(IconContext.Consumer, null, function (conf) {
+    return elem(conf);
+  }) : elem(DefaultContext);
+}
+
+// THIS FILE IS AUTO GENERATED
+function GrClose (props) {
+  return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 24 24"},"child":[{"tag":"path","attr":{"fill":"none","stroke":"#000","strokeWidth":"2","d":"M3,3 L21,21 M3,21 L21,3"}}]})(props);
+}
+
+// THIS FILE IS AUTO GENERATED
+function BsCartX (props) {
+  return GenIcon({"tag":"svg","attr":{"fill":"currentColor","viewBox":"0 0 16 16"},"child":[{"tag":"path","attr":{"d":"M7.354 5.646a.5.5 0 1 0-.708.708L7.793 7.5 6.646 8.646a.5.5 0 1 0 .708.708L8.5 8.207l1.146 1.147a.5.5 0 0 0 .708-.708L9.207 7.5l1.147-1.146a.5.5 0 0 0-.708-.708L8.5 6.793 7.354 5.646z"}},{"tag":"path","attr":{"d":"M.5 1a.5.5 0 0 0 0 1h1.11l.401 1.607 1.498 7.985A.5.5 0 0 0 4 12h1a2 2 0 1 0 0 4 2 2 0 0 0 0-4h7a2 2 0 1 0 0 4 2 2 0 0 0 0-4h1a.5.5 0 0 0 .491-.408l1.5-8A.5.5 0 0 0 14.5 3H2.89l-.405-1.621A.5.5 0 0 0 2 1H.5zm3.915 10L3.102 4h10.796l-1.313 7h-8.17zM6 14a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm7 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"}}]})(props);
+}
+
+function _templateObject7$1() {
+  var data = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: calc(100vh - 4.6rem);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: column;\n  h6 {\n    font-size: 1.8rem;\n    font-weight: bold;\n    text-transform: uppercase;\n    margin: 0;\n    margin-top: 1rem;\n    color: ", ";\n  }\n  p {\n    font-size: 1.1rem;\n    text-transform: capitalize;\n    font-weight: 500;\n    /* color: darkgrey; */\n    /* color: orange; */\n  }\n  .icon {\n    font-size: 9.5rem;\n    color: darkgrey;\n    /* color: orange; */\n  }\n"]);
+
+  _templateObject7$1 = function _templateObject7() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject6$1() {
+  var data = _taggedTemplateLiteralLoose(["\n  background: ", ";\n  color: white;\n  position: relative;\n  margin-bottom: 1rem;\n  .icon {\n    position: absolute;\n    right: 2rem;\n    margin: auto 0;\n  }\n"]);
+
+  _templateObject6$1 = function _templateObject6() {
+    return data;
+  };
+
+  return data;
+}
+
+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: 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;
+  };
+
+  return data;
+}
+
+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  /* 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;
+  };
+
+  return data;
+}
+
+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: 74vh;\n\n  @media only screen and (max-width: 748px) {\n    min-height: 75vh;\n  }\n  /* background-color: red; */\n"]);
+
+  _templateObject3$3 = function _templateObject3() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject2$3() {
+  var data = _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  .icon {\n    cursor: pointer;\n    font-size: 22px;\n  }\n  @media only screen and (max-width: 640px) {\n    font-size: 1.2rem;\n    height: 4rem;\n  }\n"]);
+
+  _templateObject2$3 = function _templateObject2() {
+    return data;
+  };
+
+  return data;
+}
+
+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"]);
+
+  _templateObject$7 = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+var CartDrawerContainer = styled.div(_templateObject$7(), function (props) {
+  return props.maxWidth || '650px';
+}, function (props) {
+  return props.fontFamily;
+});
+var CartDrawerBar = styled.div(_templateObject2$3());
+var CartDrawerProductContainer = styled.div(_templateObject3$3());
+var CartDrawerBottomSection = styled.div(_templateObject4$3());
+var CartDrawerOutlinedButton = styled.button(_templateObject5$2(), function (props) {
+  return props.color || 'black';
+}, function (props) {
+  return props.color || 'black';
+});
+var CartDrawerFilledButton = styled(CartDrawerOutlinedButton)(_templateObject6$1(), function (props) {
+  return props.color || 'black';
+});
+var CartDrawerEmptyCart = styled.div(_templateObject7$1(), function (props) {
+  return props.color || 'red';
+});
+
+// THIS FILE IS AUTO GENERATED
+function RiDeleteBin5Line (props) {
+  return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 24 24"},"child":[{"tag":"g","attr":{},"child":[{"tag":"path","attr":{"fill":"none","d":"M0 0h24v24H0z"}},{"tag":"path","attr":{"d":"M4 8h16v13a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V8zm2 2v10h12V10H6zm3 2h2v6H9v-6zm4 0h2v6h-2v-6zM7 5V3a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v2h5v2H2V5h5zm2-1v1h6V4H9z"}}]}]})(props);
+}
+
+// THIS FILE IS AUTO GENERATED
+function AiOutlineMinus (props) {
+  return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 1024 1024"},"child":[{"tag":"path","attr":{"d":"M872 474H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h720c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"}}]})(props);
+}function AiOutlinePlus (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 _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"]);
+
+  _templateObject2$4 = function _templateObject2() {
+    return data;
+  };
+
+  return data;
+}
+
+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: 1.85rem;\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;
+  };
+
+  return data;
+}
+var CartDrawerProduct = styled.div(_templateObject$8(), function (props) {
+  return props.color || 'grey';
+});
+var CartDrawerQtBox = styled.div(_templateObject2$4());
+
+var CartDrawerProductCard = function CartDrawerProductCard(_ref) {
+  var _product$cartStandard, _product$standardPric;
+
+  var product = _ref.product,
+      color = _ref.color,
+      handleIncrementDecrement = _ref.handleIncrementDecrement,
+      handleRemoveProduct = _ref.handleRemoveProduct,
+      handleRedirect = _ref.handleRedirect;
+  return /*#__PURE__*/React__default.createElement(CartDrawerProduct, {
+    color: color
+  }, /*#__PURE__*/React__default.createElement("img", {
+    src: product.imageUrl && product.imageUrl !== 'null' ? product.imageUrl : '/images/imgnotfound.jpeg',
+    alt: 'no product image available'
+  }), /*#__PURE__*/React__default.createElement(Stack, {
+    flexDirection: "column",
+    justifyContent: "space-between",
+    alignItems: "flex-start",
+    className: "middleSection"
+  }, /*#__PURE__*/React__default.createElement("h6", {
+    className: "name",
+    onClick: function onClick() {
+      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.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",
+    className: "endSection"
+  }, /*#__PURE__*/React__default.createElement(RiDeleteBin5Line, {
+    className: "icon",
+    onClick: function onClick() {
+      handleRemoveProduct(product);
+    }
+  }), /*#__PURE__*/React__default.createElement(CartDrawerQtBox, null, /*#__PURE__*/React__default.createElement("span", {
+    onClick: function onClick() {
+      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);
+    }
+  }, /*#__PURE__*/React__default.createElement(AiOutlinePlus, null)))));
+};
+
+var CartDrawer = function CartDrawer(_ref) {
+  var _cartData$cartLineIte, _cartData$totalCartPr;
+
+  var cartData = _ref.cartData,
+      maxWidth = _ref.maxWidth,
+      color = _ref.color,
+      handleRedirect = _ref.handleRedirect,
+      handleIncrementDecrement = _ref.handleIncrementDecrement,
+      handleRemoveProduct = _ref.handleRemoveProduct,
+      handleClose = _ref.handleClose;
+  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.cartLineItemDtoList) === null || _cartData$cartLineIte === void 0 ? void 0 : _cartData$cartLineIte.map(function (product, i) {
+    return /*#__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, {
+    className: "icon"
+  }), /*#__PURE__*/React__default.createElement("h6", null, "OOps!"), /*#__PURE__*/React__default.createElement("p", null, "your cart is empty")), cartData && (cartData === null || cartData === void 0 ? void 0 : cartData.totalCartQuantity) > 0 && /*#__PURE__*/React__default.createElement(CartDrawerBottomSection, null, /*#__PURE__*/React__default.createElement(Stack, {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    className: "row"
+  }, /*#__PURE__*/React__default.createElement("h5", null, "Subtotal", /*#__PURE__*/React__default.createElement("span", null, "(", cartData === null || cartData === void 0 ? void 0 : cartData.totalCartQuantity, " items)")), /*#__PURE__*/React__default.createElement("h5", null, "$", cartData === null || cartData === void 0 ? void 0 : (_cartData$totalCartPr = cartData.totalCartPrice) === null || _cartData$totalCartPr === void 0 ? void 0 : _cartData$totalCartPr.toFixed(2))), /*#__PURE__*/React__default.createElement(CartDrawerOutlinedButton, {
+    color: color,
+    onClick: function onClick() {
+      return handleRedirect('cart');
+    }
+  }, "view cart"), /*#__PURE__*/React__default.createElement(CartDrawerFilledButton, {
+    color: color,
+    onClick: function onClick() {
+      return handleRedirect('checkout');
+    }
+  }, "continue to checkout"))));
+};
+
 function debounce(func, wait, immediate) {
   var timeout;
   return function () {
@@ -2860,5 +3170,5 @@ function useGridSize() {
   return layout;
 }
 
-export { Breakpoint, Product, ProductHelper, ProductSlider, TestCard, Variant, useGridSize, useWindowSize };
+export { Breakpoint, CartDrawer, Product, ProductHelper, ProductSlider, TestCard, Variant, useGridSize, useWindowSize };
 //# sourceMappingURL=index.modern.js.map