@salesgenterp/ui-components 0.0.20 → 0.1.3

package/README.md

@@ -11,6 +11,8 @@ Runs app in storybook mode where you can view all the components.
 
 Note: `import 'antd/dist/antd.css'` in storybook component to apply the style.
 
+# Update version when push into master:
+
 # How to publish package to NPM:
 
 Check latest version [here](https://www.npmjs.com/package/@salesgenterp/ui-components)

package/dist/index.js

@@ -5,6 +5,20 @@ var React__default = _interopDefault(React);
 var antd = require('antd');
 var styled = require('styled-components');
 var styled__default = _interopDefault(styled);
+var Card = _interopDefault(require('@mui/material/Card'));
+var CardHeader = _interopDefault(require('@mui/material/CardHeader'));
+var CardMedia = _interopDefault(require('@mui/material/CardMedia'));
+var CardContent = _interopDefault(require('@mui/material/CardContent'));
+var CardActions = _interopDefault(require('@mui/material/CardActions'));
+var Collapse = _interopDefault(require('@mui/material/Collapse'));
+var Avatar = _interopDefault(require('@mui/material/Avatar'));
+var IconButton = _interopDefault(require('@mui/material/IconButton'));
+var Typography = _interopDefault(require('@mui/material/Typography'));
+var FavoriteIcon = _interopDefault(require('@mui/icons-material/Favorite'));
+var ShareIcon = _interopDefault(require('@mui/icons-material/Share'));
+var ExpandMoreIcon = _interopDefault(require('@mui/icons-material/ExpandMore'));
+var MoreVertIcon = _interopDefault(require('@mui/icons-material/MoreVert'));
+var material = require('@mui/material');
 
 function _extends() {
   _extends = Object.assign || function (target) {
@@ -2682,6 +2696,394 @@ var ProductHelper = /*#__PURE__*/function () {
   return ProductHelper;
 }();
 
+function _templateObject$6() {
+  var data = _taggedTemplateLiteralLoose(["\n  transform: ", ";\n  margin-left: 'auto';\n"]);
+
+  _templateObject$6 = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+
+var newTheme = _extends({}, theme, {
+  colors: _extends({}, theme.colors)
+});
+
+var ExpandMore = styled__default(IconButton)(_templateObject$6(), function (props) {
+  return props.expand ? 'rotate(180deg)' : 'rotate(0deg)';
+});
+
+var TestCard = function TestCard(props) {
+  var _React$useState = React__default.useState(false),
+      expanded = _React$useState[0],
+      setExpanded = _React$useState[1];
+
+  var handleExpandClick = function handleExpandClick() {
+    setExpanded(!expanded);
+  };
+
+  return /*#__PURE__*/React__default.createElement(styled.ThemeProvider, {
+    theme: newTheme
+  }, /*#__PURE__*/React__default.createElement(Card, {
+    sx: {
+      maxWidth: 345
+    }
+  }, /*#__PURE__*/React__default.createElement(CardHeader, {
+    avatar: /*#__PURE__*/React__default.createElement(Avatar, {
+      sx: {
+        bgcolor: 'red'
+      },
+      "aria-label": "recipe"
+    }, "R"),
+    action: /*#__PURE__*/React__default.createElement(IconButton, {
+      "aria-label": "settings"
+    }, /*#__PURE__*/React__default.createElement(MoreVertIcon, null)),
+    title: "Shrimp and Chorizo Paella",
+    subheader: "September 14, 2016"
+  }), /*#__PURE__*/React__default.createElement(CardMedia, {
+    component: "img",
+    height: "194",
+    image: "https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png",
+    alt: "Paella dish"
+  }), /*#__PURE__*/React__default.createElement(CardContent, null, /*#__PURE__*/React__default.createElement(Typography, {
+    variant: "body2",
+    color: "text.secondary"
+  }, "This impressive paella is a perfect party dish and a fun meal to cook together with your guests. Add 1 cup of frozen peas along with the mussels, if you like.")), /*#__PURE__*/React__default.createElement(CardActions, {
+    disableSpacing: true
+  }, /*#__PURE__*/React__default.createElement(IconButton, {
+    "aria-label": "add to favorites"
+  }, /*#__PURE__*/React__default.createElement(FavoriteIcon, null)), /*#__PURE__*/React__default.createElement(IconButton, {
+    "aria-label": "share"
+  }, /*#__PURE__*/React__default.createElement(ShareIcon, null)), /*#__PURE__*/React__default.createElement(ExpandMore, {
+    expand: expanded,
+    onClick: handleExpandClick,
+    "aria-expanded": expanded,
+    "aria-label": "show more"
+  }, /*#__PURE__*/React__default.createElement(ExpandMoreIcon, null))), /*#__PURE__*/React__default.createElement(Collapse, {
+    "in": expanded,
+    timeout: "auto",
+    unmountOnExit: true
+  }, /*#__PURE__*/React__default.createElement(CardContent, null, /*#__PURE__*/React__default.createElement(Typography, {
+    paragraph: true
+  }, "Method:"), /*#__PURE__*/React__default.createElement(Typography, {
+    paragraph: true
+  }, "Heat 1/2 cup of the broth in a pot until simmering, add saffron and set aside for 10 minutes."), /*#__PURE__*/React__default.createElement(Typography, {
+    paragraph: true
+  }, "Heat oil in a (14- to 16-inch) paella pan or a large, deep skillet over medium-high heat. Add chicken, shrimp and chorizo, and cook, stirring occasionally until lightly browned, 6 to 8 minutes. Transfer shrimp to a large plate and set aside, leaving chicken and chorizo in the pan. Add piment\xF3n, bay leaves, garlic, tomatoes, onion, salt and pepper, and cook, stirring often until thickened and fragrant, about 10 minutes. Add saffron broth and remaining 4 1/2 cups chicken broth; bring to a boil."), /*#__PURE__*/React__default.createElement(Typography, {
+    paragraph: true
+  }, "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: 3rem;\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  /* 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"]);
+
+  _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: 73vh;\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__default.div(_templateObject$7(), function (props) {
+  return props.maxWidth || '650px';
+}, function (props) {
+  return props.fontFamily;
+});
+var CartDrawerBar = styled__default.div(_templateObject2$3());
+var CartDrawerProductContainer = styled__default.div(_templateObject3$3());
+var CartDrawerBottomSection = styled__default.div(_templateObject4$3());
+var CartDrawerOutlinedButton = styled__default.button(_templateObject5$2(), function (props) {
+  return props.color || 'black';
+}, function (props) {
+  return props.color || 'black';
+});
+var CartDrawerFilledButton = styled__default(CartDrawerOutlinedButton)(_templateObject6$1(), function (props) {
+  return props.color || 'black';
+});
+var CartDrawerEmptyCart = styled__default.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: 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"]);
+
+  _templateObject$8 = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+var CartDrawerProduct = styled__default.div(_templateObject$8(), function (props) {
+  return props.color || 'grey';
+});
+var CartDrawerQtBox = styled__default.div(_templateObject2$4());
+
+var CartDrawerProductCard = function CartDrawerProductCard(_ref) {
+  var _product$standardPric, _product$standardPric2;
+
+  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 : '',
+    alt: 'no product image available'
+  }), /*#__PURE__*/React__default.createElement(material.Stack, {
+    flexDirection: "column",
+    justifyContent: "space-between",
+    alignItems: "flex-start",
+    className: "middleSection"
+  }, /*#__PURE__*/React__default.createElement("h6", {
+    className: "name",
+    onClick: function onClick() {
+      return handleRedirect(product.aliase, product.productId);
+    }
+  }, 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(material.Stack, {
+    flexDirection: "column",
+    justifyContent: "space-between",
+    alignItems: "flex-end",
+    className: "endSection"
+  }, /*#__PURE__*/React__default.createElement(RiDeleteBin5Line, {
+    className: "icon",
+    onClick: function onClick() {
+      handleRemoveProduct(product.productId);
+    }
+  }), /*#__PURE__*/React__default.createElement(CartDrawerQtBox, null, /*#__PURE__*/React__default.createElement("span", {
+    onClick: function onClick() {
+      handleIncrementDecrement('decrement', product.productId);
+    }
+  }, ' ', /*#__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);
+    }
+  }, /*#__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(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, {
+      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(material.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 () {
@@ -2773,9 +3175,11 @@ function useGridSize() {
 }
 
 exports.Breakpoint = Breakpoint;
+exports.CartDrawer = CartDrawer;
 exports.Product = Product;
 exports.ProductHelper = ProductHelper;
 exports.ProductSlider = ProductSlider;
+exports.TestCard = TestCard;
 exports.Variant = Variant;
 exports.useGridSize = useGridSize;
 exports.useWindowSize = useWindowSize;