npm - @salesgenterp/ui-components - Versions diffs - 0.2.21 → 0.3.5 - Mend

@salesgenterp/ui-components 0.2.21 → 0.3.5

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.

Files changed (5) hide show

package/dist/index.js CHANGED Viewed

@@ -58,7 +58,8 @@ var CartDrawerProductCard = function CartDrawerProductCard(_ref) {
       handleIncrementDecrement = _ref.handleIncrementDecrement,
       handleRemoveProduct = _ref.handleRemoveProduct,
       handleRedirect = _ref.handleRedirect,
-      imgnotfoundUrl = _ref.imgnotfoundUrl;
+      imgnotfoundUrl = _ref.imgnotfoundUrl,
+      loading = _ref.loading;
   var imgnotfoundUrlcommon = '/images/imgnotfound.jpeg';
   if (imgnotfoundUrl && imgnotfoundUrl !== 'null') imgnotfoundUrlcommon = imgnotfoundUrl;
   return /*#__PURE__*/React__default.createElement(CartDrawerProduct, {
@@ -88,16 +89,19 @@ var CartDrawerProductCard = function CartDrawerProductCard(_ref) {
   }, /*#__PURE__*/React__default.createElement(ri.RiDeleteBin5Line, {
     className: "icon",
     onClick: function onClick() {
+      if (loading) return;
       handleRemoveProduct(product);
     }
   }), /*#__PURE__*/React__default.createElement(CartDrawerQtBox, null, /*#__PURE__*/React__default.createElement("span", {
     onClick: function onClick() {
+      if (loading) return;
       handleIncrementDecrement('decrement', product);
     }
   }, ' ', /*#__PURE__*/React__default.createElement(ai.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() {
+      if (loading) return;
       handleIncrementDecrement('increment', product);
     }
   }, /*#__PURE__*/React__default.createElement(ai.AiOutlinePlus, null)))));
@@ -134,7 +138,8 @@ var CartDrawer = function CartDrawer(_ref) {
       handleRemoveProduct: handleRemoveProduct,
       color: color,
       key: i,
-      imgnotfoundUrl: imgnotfoundUrl
+      imgnotfoundUrl: imgnotfoundUrl,
+      loading: loading
     }));
   })) : /*#__PURE__*/React__default.createElement(CartDrawerEmptyCart, {
     color: color
@@ -158,6 +163,231 @@ var CartDrawer = function CartDrawer(_ref) {
   }, "continue to checkout"))));
 };
+var _templateObject$2, _templateObject2$2;
+var CartPageContainer = styled.div(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  max-width: ", ";\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: flex-start;\n\n  .scrollDiv {\n    width: 68%;\n    height: 630px;\n    max-height: 630px;\n    background-color: white;\n    display: flex;\n    flex-direction: column;\n    overflow-y: auto;\n    margin-right: 0.3em;\n    &::-webkit-scrollbar {\n      width: ", ";\n    }\n\n    /* Track */\n    &::-webkit-scrollbar-track {\n      background: ", ";\n      border-radius: 16px;\n    }\n\n    /* Handle */\n    &::-webkit-scrollbar-thumb {\n      background: ", ";\n      border-radius: 16px;\n      margin: 5px 2px;\n      border: 3px solid;\n      border-color: ", ";\n    }\n    box-shadow: 0px 20px 35px rgba(0, 0, 0, 0.05);\n  }\n  @media only screen and (max-width: 840px) {\n    flex-direction: column;\n    .scrollDiv {\n      width: 100%;\n      margin: 0;\n      margin-bottom: 2em;\n      padding: 0 0.4em;\n    }\n  }\n"])), function (props) {
+  return props.maxWidth || '1350px';
+}, function (props) {
+  return props.retail ? '12px' : '8px';
+}, function (props) {
+  return props.retail ? '#667080' : 'rgba(102, 112, 128, 0.5)';
+}, function (props) {
+  return props.retail ? '#BFC3CA' : '#EDEDED';
+}, function (props) {
+  return props.retail ? '#667080' : 'rgba(102, 112, 128, 0.5)';
+});
+var CardsBox = styled.div(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  /* min-height: 1000px; */\n  position: relative;\n  max-width: 860px;\n  margin-right: auto;\n  padding: 1em 2em;\n  display: ", ";\n  grid-template-columns: 1fr 1fr;\n  flex-direction: column;\n  align-items: flex-start;\n  grid-gap: 1em;\n  justify-content: flex-start;\n  align-items: center;\n  border-radius: 20px;\n  @media only screen and (max-width: 1220px) {\n    display: flex;\n  }\n  @media only screen and (max-width: 640px) {\n    padding: 1em 0.2em;\n  }\n"])), function (props) {
+  return props.retail ? 'grid' : 'flex';
+});
+var _templateObject$3, _templateObject2$3, _templateObject3$2, _templateObject4$1, _templateObject5$1, _templateObject6$1;
+var CartSummaryContainer = styled.div(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteralLoose(["\n  width: min(95%, 24.75em);\n  max-width: ", ";\n  display: flex;\n  flex-direction: column;\n  background: ", ";\n  color: ", ";\n  border-radius: 25px;\n  padding: 2em 1em;\n  align-items: center;\n  p {\n    font-size: 0.89em;\n    font-weight: 300;\n    align-self: flex-start;\n    color: inherit;\n    margin: 0;\n    padding: 0;\n  }\n  .continueShopping {\n    font-size: 0.75em;\n    color: inherit;\n    text-transform: capitalize;\n    height: 20px;\n    border-bottom: 1px solid;\n    border-color: ", ";\n    font-weight: 300;\n    cursor: pointer;\n  }\n"])), function (props) {
+  return props.maxWidth || '24.75em';
+}, function (props) {
+  return props.background || '#667080';
+}, function (props) {
+  return props.color || 'white';
+}, function (props) {
+  return props.color || 'white';
+});
+var CartSummaryRow = styled.div(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  justify-content: ", ";\n  align-items: center;\n  color: inherit;\n  h6,\n  h5 {\n    margin: 0;\n    font-size: 1em;\n    font-weight: 700;\n    color: inherit;\n    text-transform: capitalize;\n  }\n  h5 {\n    font-size: ", ";\n  }\n"])), function (props) {
+  return props.justify || 'space-between';
+}, function (props) {
+  return props.h5 || '1.31em';
+});
+var CartSummaryHr = styled.span(_templateObject3$2 || (_templateObject3$2 = _taggedTemplateLiteralLoose(["\n  border: none;\n  width: 100%;\n  height: 1px;\n  background-color: ", ";\n  margin: 1em 0;\n"])), function (props) {
+  return props.color || 'rgba(255, 255, 255, 0.5)';
+});
+var CartSummaryInputBox = styled.form(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  padding-bottom: ", ";\n  input {\n    width: 10.81rem;\n    height: 2.44rem;\n    padding: 0.2em 0.8em;\n    text-transform: capitalize;\n    font-size: 0.89em;\n    border-radius: 1.19rem;\n    margin-right: 1em;\n    border: none;\n    outline: none;\n    background: ", ";\n    color: ", ";\n    &::placeholder {\n      color: ", ";\n    }\n  }\n  button {\n    width: 7.75rem;\n    height: 2.44rem;\n    background: ", ";\n    border-radius: 1.19rem;\n    display: grid;\n    color: inherit;\n    place-items: center;\n    border: none;\n    outline: none;\n    text-transform: uppercase;\n    cursor: pointer;\n    font-size: 0.75em;\n    transition: 0.3s;\n    &:hover {\n      letter-spacing: 1px;\n    }\n  }\n"])), function (props) {
+  return props.paddingBottom ? '2em' : '0';
+}, function (props) {
+  return props.background || '#bfc3ca';
+}, function (props) {
+  return props.color || '#667080';
+}, function (props) {
+  return props.color || '#667080';
+}, function (props) {
+  return props.btn || '#393f48';
+});
+var CartSummaryCheckoutBtn = styled.button(_templateObject5$1 || (_templateObject5$1 = _taggedTemplateLiteralLoose(["\n  font-size: 0.95em;\n  font-weight: 700;\n  background: #393f48;\n  cursor: pointer;\n  text-transform: uppercase;\n  color: inherit;\n  border: none;\n  outline: none;\n  width: 16.81em;\n  height: 3.75em;\n  display: grid;\n  place-items: center;\n  font-size: 0.75em;\n  border-radius: 2.64em;\n  padding: 0;\n  font-size: 0.94em;\n  margin: 1em auto;\n  transition: 0.3s;\n  margin-top: 2em;\n  &:hover {\n    opacity: 0.8;\n  }\n"])));
+var CartSummaryCheckBoxRow = styled(CartSummaryRow)(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteralLoose(["\n  justify-content: flex-start;\n  margin-left: 1em;\n  margin-top: 1em;\n  cursor: pointer;\n  .checkBox {\n    width: 0.63em;\n    height: 0.63em;\n    border: 1px solid;\n    border-color: ", ";\n    background: transparent;\n    margin-right: 0.5em;\n    border-radius: 50%;\n    background: ", ";\n  }\n  p {\n    font-size: 1em;\n    font-weight: 6 400;\n    span {\n      font-weight: 600;\n      margin: 0 0.1em;\n    }\n    .underline{\n      font-weight: 400;\n      text-decoration: underline;\n    }\n  }\n"])), function (props) {
+  return props.background || 'white';
+}, function (props) {
+  return props.selected ? props.background : 'transparent';
+});
+var CartSummary = function CartSummary(_ref) {
+  var _styles$input, _styles$input2, _ref2;
+  var _ref$retail = _ref.retail,
+      retail = _ref$retail === void 0 ? true : _ref$retail,
+      shippingData = _ref.shippingData,
+      selectedShipping = _ref.selectedShipping,
+      setShipping = _ref.setShipping,
+      clickRedirect = _ref.clickRedirect,
+      subtotal = _ref.subtotal,
+      styles = _ref.styles;
+  console.log(selectedShipping);
+  return /*#__PURE__*/React__default.createElement(CartSummaryContainer, {
+    background: styles === null || styles === void 0 ? void 0 : styles.bg,
+    color: styles === null || styles === void 0 ? void 0 : styles.color
+  }, /*#__PURE__*/React__default.createElement("p", null, "Cart summary"), /*#__PURE__*/React__default.createElement(CartSummaryHr, {
+    color: styles === null || styles === void 0 ? void 0 : styles.hr
+  }), /*#__PURE__*/React__default.createElement(CartSummaryRow, null, /*#__PURE__*/React__default.createElement("h6", null, "subtotal"), /*#__PURE__*/React__default.createElement("h5", null, "$", subtotal === null || subtotal === void 0 ? void 0 : subtotal.toFixed(2))), /*#__PURE__*/React__default.createElement(CartSummaryHr, {
+    color: styles === null || styles === void 0 ? void 0 : styles.hr
+  }), /*#__PURE__*/React__default.createElement(CartSummaryRow, null, /*#__PURE__*/React__default.createElement("h6", null, "Discount"), /*#__PURE__*/React__default.createElement("h5", null, "$0.00")), /*#__PURE__*/React__default.createElement(CartSummaryHr, {
+    color: styles === null || styles === void 0 ? void 0 : styles.hr
+  }), retail && /*#__PURE__*/React__default.createElement(material.Stack, {
+    flexDirection: "column",
+    justifyContent: "flexStart",
+    sx: {
+      width: '100%'
+    }
+  }, /*#__PURE__*/React__default.createElement(CartSummaryRow, {
+    justify: "flex-start"
+  }, /*#__PURE__*/React__default.createElement("h6", null, "shipping")), shippingData && shippingData.map(function (li, i) {
+    var _li$amount;
+    return /*#__PURE__*/React__default.createElement(CartSummaryCheckBoxRow, {
+      key: i,
+      selected: li.id === selectedShipping.id,
+      onClick: function onClick() {
+        setShipping(li);
+      },
+      background: styles === null || styles === void 0 ? void 0 : styles.color
+    }, /*#__PURE__*/React__default.createElement("span", {
+      className: "checkBox"
+    }), /*#__PURE__*/React__default.createElement("p", null, li.name, ' ', li.amount && li.amount > 0 && /*#__PURE__*/React__default.createElement("span", null, ": $", (_li$amount = li.amount) === null || _li$amount === void 0 ? void 0 : _li$amount.toFixed(2))));
+  }), /*#__PURE__*/React__default.createElement(CartSummaryCheckBoxRow, null, /*#__PURE__*/React__default.createElement("p", null, "Shipping options will be updated during checkout.", /*#__PURE__*/React__default.createElement("br", null), /*#__PURE__*/React__default.createElement("span", {
+    className: "underline"
+  }, "Calculate shipping"))), /*#__PURE__*/React__default.createElement(CartSummaryHr, {
+    color: styles === null || styles === void 0 ? void 0 : styles.hr
+  })), /*#__PURE__*/React__default.createElement(CartSummaryInputBox, {
+    paddingBottom: !retail,
+    background: styles === null || styles === void 0 ? void 0 : (_styles$input = styles.input) === null || _styles$input === void 0 ? void 0 : _styles$input.bg,
+    color: styles === null || styles === void 0 ? void 0 : (_styles$input2 = styles.input) === null || _styles$input2 === void 0 ? void 0 : _styles$input2.color,
+    btn: styles === null || styles === void 0 ? void 0 : styles.btnColor
+  }, /*#__PURE__*/React__default.createElement("input", {
+    placeholder: "Coupon code",
+    type: "email",
+    required: true
+  }), /*#__PURE__*/React__default.createElement("button", null, "apply coupon")), /*#__PURE__*/React__default.createElement(CartSummaryHr, {
+    color: styles === null || styles === void 0 ? void 0 : styles.hr
+  }), /*#__PURE__*/React__default.createElement(CartSummaryRow, {
+    h5: "1.64em"
+  }, /*#__PURE__*/React__default.createElement("h6", null, "total"), /*#__PURE__*/React__default.createElement("h5", null, "$", (_ref2 = subtotal + (selectedShipping === null || selectedShipping === void 0 ? void 0 : selectedShipping.amount)) === null || _ref2 === void 0 ? void 0 : _ref2.toFixed(2))), /*#__PURE__*/React__default.createElement(CartSummaryRow, {
+    justify: "center"
+  }, /*#__PURE__*/React__default.createElement(CartSummaryCheckoutBtn, {
+    onClick: function onClick() {
+      return clickRedirect('/checkout');
+    },
+    background: styles === null || styles === void 0 ? void 0 : styles.btnColor
+  }, "proceed to checkokut")), /*#__PURE__*/React__default.createElement(CartSummaryRow, {
+    justify: "center"
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: "continueShopping",
+    onClick: function onClick() {
+      return clickRedirect('/');
+    }
+  }, "Continue to shopping")));
+};
+var _templateObject$4, _templateObject2$4, _templateObject3$3, _templateObject4$2, _templateObject5$2, _templateObject6$2, _templateObject7$1;
+var CartPageCard = styled.div(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteralLoose(["\n  width: min(97%, 485px);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  padding: 1rem;\n  background: #ffffff;\n  box-shadow: 0px 20px 35px rgba(0, 0, 0, 0.05);\n  border-radius: 20px;\n  position: relative;\n"])));
+var CartPageImg = styled.img(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteralLoose(["\n  /* width: 95px; */\n  width: ", ";\n  height: ", ";\n  position: relative;\n  margin-right: 1em;\n"])), function (props) {
+  return props.width || 'auto';
+}, function (props) {
+  return props.height || '81px';
+});
+var NameAndQtBox = styled.div(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteralLoose(["\n  width: 90%;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: space-between;\n  position: relative;\n"])));
+var CartPageCardName = styled.div(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: flex-start;\n  width: 90%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  margin-bottom: 0.6em;\n  h6 {\n    color: #323232;\n    font-size: 0.9em;\n    margin-bottom: 0.6em;\n    line-height: 1.3rem;\n    max-height: 1.4rem;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n  p {\n    font-size: 1.1em;\n    color: #c3c6c9;\n  }\n"])));
+var QtAndPriceBox = styled.div(_templateObject5$2 || (_templateObject5$2 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  width: 100%;\n  .subtotal {\n    color: #323232;\n    text-transform: capitalize;\n    font-weight: bold;\n    font-size: 0.85em;\n  }\n"])));
+var CartPageQtBox = styled.div(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  max-width: 80px;\n  min-width: 80px;\n  height: 22px;\n  .icon {\n    width: 20.5px;\n    height: 20.5px;\n    display: grid;\n    place-items: center;\n    font-size: 10px;\n    background: #eef1f4;\n    cursor: pointer;\n  }\n  .qt {\n    font-size: 18px;\n    font-weight: 500;\n    display: grid;\n    place-items: center;\n    color: #c3c6c9;\n  }\n"])));
+var CloseBtn = styled.div(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteralLoose(["\n  width: 25px;\n  height: 25px;\n  display: grid;\n  place-items: center;\n  position: absolute;\n  top: 1em;\n  right: 1em;\n  cursor: pointer;\n  border-radius: 50%;\n  background: #eef1f4;\n  font-size: 12px;\n"])));
+var CartPageProductCard = function CartPageProductCard(_ref) {
+  var _item$standardPrice;
+  var item = _ref.item,
+      imgnotfoundUrl = _ref.imgnotfoundUrl,
+      handleIncrementDecrement = _ref.handleIncrementDecrement,
+      handleRemoveProduct = _ref.handleRemoveProduct,
+      loading = _ref.loading,
+      imgSize = _ref.imgSize;
+  var imgnotfoundUrlcommon = '/images/imgnotfound.jpeg';
+  if (imgnotfoundUrl && imgnotfoundUrl !== 'null') imgnotfoundUrlcommon = imgnotfoundUrl;
+  return /*#__PURE__*/React__default.createElement(CartPageCard, null, /*#__PURE__*/React__default.createElement(CartPageImg, {
+    src: item.imageUrl && item.imageUrl !== 'null' ? item.imageUrl : imgnotfoundUrlcommon,
+    alt: 'no product image available',
+    width: imgSize === null || imgSize === void 0 ? void 0 : imgSize.width,
+    height: imgSize === null || imgSize === void 0 ? void 0 : imgSize.height
+  }), /*#__PURE__*/React__default.createElement(NameAndQtBox, null, /*#__PURE__*/React__default.createElement(CartPageCardName, null, /*#__PURE__*/React__default.createElement(material.Tooltip, {
+    title: item.productName,
+    placement: "top",
+    arrow: true
+  }, /*#__PURE__*/React__default.createElement("h6", null, item.productName)), /*#__PURE__*/React__default.createElement("p", null, "$", (_item$standardPrice = item.standardPrice) === null || _item$standardPrice === void 0 ? void 0 : _item$standardPrice.toFixed(2))), /*#__PURE__*/React__default.createElement(QtAndPriceBox, null, /*#__PURE__*/React__default.createElement(CartPageQtBox, null, /*#__PURE__*/React__default.createElement("span", {
+    className: "icon",
+    onClick: function onClick() {
+      if (loading) return;
+      handleIncrementDecrement('decrement', item);
+    }
+  }, /*#__PURE__*/React__default.createElement(ai.AiOutlineMinus, null)), /*#__PURE__*/React__default.createElement("span", {
+    className: "qt"
+  }, item.quantity), /*#__PURE__*/React__default.createElement("span", {
+    className: "icon",
+    onClick: function onClick() {
+      if (loading) return;
+      handleIncrementDecrement('increment', item);
+    }
+  }, /*#__PURE__*/React__default.createElement(ai.AiOutlinePlus, null))), /*#__PURE__*/React__default.createElement("p", {
+    className: "subtotal"
+  }, "subtotal: $", (item.standardPrice * item.quantity).toFixed(2)))), /*#__PURE__*/React__default.createElement(CloseBtn, {
+    onClick: function onClick() {
+      if (loading) return;
+      handleRemoveProduct(item);
+    }
+  }, /*#__PURE__*/React__default.createElement(ai.AiOutlineClose, null)));
+};
+var CartPageComponent = function CartPageComponent(_ref) {
+  var _cartData$cartLineIte;
+  var retail = _ref.retail,
+      shippingData = _ref.shippingData,
+      selectedShipping = _ref.selectedShipping,
+      setShipping = _ref.setShipping,
+      clickRedirect = _ref.clickRedirect,
+      cartData = _ref.cartData,
+      handleIncrementDecrement = _ref.handleIncrementDecrement,
+      handleRemoveProduct = _ref.handleRemoveProduct,
+      loading = _ref.loading,
+      imgnotfoundUrl = _ref.imgnotfoundUrl,
+      styles = _ref.styles;
+  return /*#__PURE__*/React__default.createElement(CartPageContainer, {
+    retail: retail
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "scrollDiv"
+  }, /*#__PURE__*/React__default.createElement(CardsBox, {
+    retail: retail
+  }, cartData === null || cartData === void 0 ? void 0 : (_cartData$cartLineIte = cartData.cartLineItemDtoList) === null || _cartData$cartLineIte === void 0 ? void 0 : _cartData$cartLineIte.map(function (item) {
+    return /*#__PURE__*/React__default.createElement(CartPageProductCard, {
+      item: item,
+      loading: loading,
+      imgnotfoundUrl: imgnotfoundUrl,
+      handleIncrementDecrement: handleIncrementDecrement,
+      handleRemoveProduct: handleRemoveProduct,
+      imgSize: styles === null || styles === void 0 ? void 0 : styles.imgSize
+    });
+  }))), /*#__PURE__*/React__default.createElement(CartSummary, {
+    retail: retail,
+    shippingData: shippingData,
+    selectedShipping: selectedShipping,
+    setShipping: setShipping,
+    clickRedirect: clickRedirect,
+    subtotal: cartData === null || cartData === void 0 ? void 0 : cartData.totalCartPrice,
+    styles: styles === null || styles === void 0 ? void 0 : styles.cartSummary
+  }));
+};
 var Breakpoint = function Breakpoint() {};
 Breakpoint.xs = 'xs';
@@ -265,6 +495,7 @@ function useGridSize() {
 exports.Breakpoint = Breakpoint;
 exports.CartDrawer = CartDrawer;
+exports.CartPageComponent = CartPageComponent;
 exports.Variant = Variant;
 exports.useGridSize = useGridSize;
 exports.useWindowSize = useWindowSize;

package/dist/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../src/components/CartDrawer/cartDrawer.styles.js","../src/components/CartDrawer/CartDrawerCard/CartDrawerProduct.styles.js","../src/components/CartDrawer/CartDrawerCard/CartDrawerCard.jsx","../src/components/CartDrawer/CartDrawer.jsx","../src/constants/Breakpoint.js","../src/constants/Variant.js","../src/utils/debounce.js","../src/hooks/useWindowSize.jsx","../src/hooks/useGridSize.jsx"],"sourcesContent":["import styled from 'styled-components';\nexport const CartDrawerContainer = styled.div`\n width: 100%;\n max-width: ${(props) => props.maxWidth \|\| '650px'};\n height: 100%;\n font-family: ${(props) => props.fontFamily};\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`;\n\nexport const CartDrawerBar = styled.div`\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 .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`;\n\nexport const CartDrawerProductContainer = styled.div`\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: ${(props) => props.opacity};\n @media only screen and (max-width: 748px) {\n min-height: 75vh;\n }\n / background-color: red; /\n`;\n\nexport const CartDrawerBottomSection = styled.div`\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: 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`;\n\nexport const CartDrawerOutlinedButton = styled.button`\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: ${(props) => props.color \|\| 'black'};\n color: ${(props) => props.color \|\| 'black'};\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`;\n\nexport const CartDrawerFilledButton = styled(CartDrawerOutlinedButton)`\n background: ${(props) => props.color \|\| 'black'};\n color: white;\n position: relative;\n margin-bottom: 1rem;\n .icon {\n position: absolute;\n right: 2rem;\n margin: auto 0;\n }\n`;\n\nexport const CartDrawerEmptyCart = styled.div`\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: ${(props) => props.color \|\| 'red'};\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`;\n","import styled from 'styled-components';\nexport const CartDrawerProduct = styled.div`\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 max-height: 100%;\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: ${(props) => props.color \|\| 'grey'};\n }\n }\n }\n .endSection {\n width: 20%;\n height: 100%;\n .icon {\n cursor: pointer;\n transition: 0.4s;\n &:hover {\n color: red;\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`;\n\nexport const CartDrawerQtBox = styled.div`\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`;\nexport const CartDrawerLoader = styled.div`\n position: absolute;\n top: 30%;\n width: 100px;\n height: 100px;\n display: grid;\n place-items: center;\n`;\n","import React from 'react';\nimport { Stack, Tooltip } from '@mui/material';\nimport { RiDeleteBin5Line } from 'react-icons/ri';\nimport { AiOutlinePlus, AiOutlineMinus } from 'react-icons/ai';\n// import imgnotfound from '../../../assets/imgnotfound.jpeg';\n////////\nimport { CartDrawerProduct, CartDrawerQtBox } from './CartDrawerProduct.styles';\nconst CartDrawerProductCard = ({\n product,\n color,\n handleIncrementDecrement,\n handleRemoveProduct,\n handleRedirect,\n imgnotfoundUrl,\n}) => {\n let imgnotfoundUrlcommon = '/images/imgnotfound.jpeg';\n if (imgnotfoundUrl && imgnotfoundUrl !== 'null')\n imgnotfoundUrlcommon = imgnotfoundUrl;\n\n return (\n <CartDrawerProduct color={color}>\n <img\n src={\n product.imageUrl && product.imageUrl !== 'null'\n ? product.imageUrl\n : imgnotfoundUrlcommon\n }\n alt={'no product image available'}\n />\n <Stack\n flexDirection=\"column\"\n justifyContent=\"space-between\"\n alignItems=\"flex-start\"\n className=\"middleSection\"\n >\n <Tooltip title={product?.productName} placement=\"top\" arrow>\n <h6 className=\"name\" onClick={() => handleRedirect(product)}>\n {product?.productName}\n </h6>\n </Tooltip>\n\n <h6>\n {product?.standardPrice === product?.cartStandardPrice ? (\n `$${product?.standardPrice}`\n ) : (\n <React.Fragment>\n <span>${product?.cartStandardPrice?.toFixed(2)}</span>$\n {product?.standardPrice?.toFixed(2)}\n </React.Fragment>\n )}\n </h6>\n </Stack>\n <Stack\n flexDirection=\"column\"\n justifyContent=\"space-between\"\n alignItems=\"flex-end\"\n className=\"endSection\"\n >\n <RiDeleteBin5Line\n className=\"icon\"\n onClick={() => {\n handleRemoveProduct(product);\n }}\n />\n <CartDrawerQtBox>\n <span\n onClick={() => {\n handleIncrementDecrement('decrement', product);\n }}\n >\n {' '}\n <AiOutlineMinus />\n </span>{' '}\n <span className={'qt'}>{product?.quantity}</span>\n <span\n onClick={() => {\n handleIncrementDecrement('increment', product);\n }}\n >\n <AiOutlinePlus />\n </span>\n </CartDrawerQtBox>\n </Stack>\n </CartDrawerProduct>\n );\n};\n\nexport default CartDrawerProductCard;\n","import { Stack } from '@mui/material';\nimport React from 'react';\nimport { GrClose } from 'react-icons/gr';\nimport { GiShoppingCart } from 'react-icons/gi';\nimport { BsCartX } from 'react-icons/bs';\n//////\nimport {\n CartDrawerBar,\n CartDrawerBottomSection,\n CartDrawerContainer,\n CartDrawerOutlinedButton,\n CartDrawerFilledButton,\n CartDrawerProductContainer,\n CartDrawerEmptyCart,\n} from './cartDrawer.styles';\nimport CartDrawerProductCard from './CartDrawerCard/CartDrawerCard';\nimport { CartDrawerLoader } from './CartDrawerCard/CartDrawerProduct.styles';\nimport { PuffLoader } from 'react-spinners';\n\nconst CartDrawer = ({\n cartData,\n maxWidth,\n color,\n handleRedirect,\n handleIncrementDecrement,\n handleRemoveProduct,\n handleClose,\n loading,\n imgnotfoundUrl,\n}) => {\n return (\n <React.Fragment>\n <CartDrawerContainer maxWidth={maxWidth}>\n <CartDrawerBar>\n <h2>Your Cart</h2>\n <GrClose\n className=\"icon\"\n onClick={() => {\n handleClose();\n }}\n />\n </CartDrawerBar>\n {cartData && cartData?.totalCartQuantity > 0 ? (\n <CartDrawerProductContainer opacity={loading ? '.4' : '1'}>\n {cartData?.cartLineItemDtoList?.map((product, i) => (\n <React.Fragment>\n {loading && (\n <CartDrawerLoader>\n <PuffLoader color=\"black\" />\n </CartDrawerLoader>\n )}\n\n <CartDrawerProductCard\n product={product}\n handleRedirect={handleRedirect}\n handleIncrementDecrement={handleIncrementDecrement}\n handleRemoveProduct={handleRemoveProduct}\n color={color}\n key={i}\n imgnotfoundUrl={imgnotfoundUrl}\n />\n </React.Fragment>\n ))}\n </CartDrawerProductContainer>\n ) : (\n <CartDrawerEmptyCart color={color}>\n <BsCartX className=\"icon\" />\n <h6>OOps!</h6>\n <p>your cart is empty</p>\n </CartDrawerEmptyCart>\n )}\n {cartData && cartData?.totalCartQuantity > 0 && (\n <CartDrawerBottomSection>\n <Stack\n flexDirection=\"row\"\n justifyContent=\"space-between\"\n alignItems=\"center\"\n className=\"row\"\n >\n <h5>\n Subtotal<span>({cartData?.totalCartQuantity} items)</span>\n </h5>\n <h5>${cartData?.totalCartPrice?.toFixed(2)}</h5>\n </Stack>\n <CartDrawerOutlinedButton\n color={color}\n onClick={() => handleRedirect('cart')}\n >\n view cart\n </CartDrawerOutlinedButton>\n <CartDrawerFilledButton\n color={color}\n onClick={() => handleRedirect('checkout')}\n >\n continue to checkout\n </CartDrawerFilledButton>\n </CartDrawerBottomSection>\n )}\n </CartDrawerContainer>\n </React.Fragment>\n );\n};\n\nexport default CartDrawer;\n","class Breakpoint {\n static xs = 'xs';\n static sm = 'sm';\n static md = 'md';\n static lg = 'lg';\n static xl = 'xl';\n static xxl = 'xxl';\n}\n\nexport default Breakpoint;\n","class Variant {\n static ONE = 'one';\n static TWO = 'two';\n static THREE = 'three';\n}\n\nexport default Variant;\n","export default function debounce(func, wait, immediate) {\n let timeout;\n return function (...args) {\n clearTimeout(timeout);\n timeout = setTimeout(() => {\n timeout = null;\n if (!immediate) func.apply(this, args);\n }, wait);\n if (immediate && !timeout) func.apply(this, [...args]);\n };\n}\n","import { useEffect, useState } from 'react';\nimport debounce from '../utils/debounce';\n\nfunction useWindowSize() {\n const isWindow = typeof window !== 'undefined';\n const [windowSize, setWindowSize] = useState({\n width: isWindow ? window.innerWidth : 1200,\n height: isWindow ? window.innerHeight : 800,\n });\n\n useEffect(() => {\n const onWindowResize = () => {\n setWindowSize({\n width: window.innerWidth,\n height: window.innerHeight,\n });\n };\n\n const onResize = debounce(onWindowResize, 100);\n\n window.addEventListener('resize', onResize);\n onWindowResize();\n\n return () => {\n window.removeEventListener('resize', onResize);\n };\n }, []);\n\n return windowSize;\n}\n\nexport default useWindowSize;\n","import { useEffect, useState } from 'react';\nimport useWindowSize from './useWindowSize';\nimport { Breakpoint } from '../constants';\n\n/\n The breakpoints of responsive grid follow Google chrome media queries rules\n*/\nconst getBreakpoint = ({ width: screen }) => {\n let breakpoint = '';\n\n if (screen <= 320) {\n breakpoint = Breakpoint.xs;\n }\n if (screen >= 375) {\n breakpoint = Breakpoint.sm;\n }\n if (screen >= 768) {\n breakpoint = Breakpoint.md;\n }\n if (screen >= 992) {\n breakpoint = Breakpoint.lg;\n }\n if (screen >= 1200) {\n breakpoint = Breakpoint.xl;\n }\n if (screen >= 1600) {\n breakpoint = Breakpoint.xxl;\n }\n\n return breakpoint;\n};\n\nfunction useGridSize() {\n const windowSize = useWindowSize();\n const [layout, setLayout] = useState(Breakpoint.md);\n\n useEffect(() => {\n setLayout(getBreakpoint(windowSize));\n }, [windowSize]);\n return layout;\n}\n\nexport default useGridSize;\n"],"names":["CartDrawerContainer","styled","div","props","maxWidth","fontFamily","CartDrawerBar","CartDrawerProductContainer","opacity","CartDrawerBottomSection","CartDrawerOutlinedButton","button","color","CartDrawerFilledButton","CartDrawerEmptyCart","CartDrawerProduct","CartDrawerQtBox","CartDrawerLoader","CartDrawerProductCard","product","handleIncrementDecrement","handleRemoveProduct","handleRedirect","imgnotfoundUrl","imgnotfoundUrlcommon","React","imageUrl","Stack","Tooltip","productName","standardPrice","cartStandardPrice","toFixed","RiDeleteBin5Line","AiOutlineMinus","quantity","AiOutlinePlus","CartDrawer","cartData","handleClose","loading","GrClose","totalCartQuantity","cartLineItemDtoList","map","i","PuffLoader","BsCartX","totalCartPrice","Breakpoint","xs","sm","md","lg","xl","xxl","Variant","ONE","TWO","THREE","debounce","func","wait","immediate","timeout","args","clearTimeout","setTimeout","apply","useWindowSize","isWindow","window","useState","width","innerWidth","height","innerHeight","windowSize","setWindowSize","useEffect","onWindowResize","onResize","addEventListener","removeEventListener","getBreakpoint","screen","breakpoint","useGridSize","layout","setLayout"],"mappings":"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"}
1	+ {"version":3,"file":"index.js","sources":["../src/components/CartDrawer/cartDrawer.styles.js","../src/components/CartDrawer/CartDrawerCard/CartDrawerProduct.styles.js","../src/components/CartDrawer/CartDrawerCard/CartDrawerCard.jsx","../src/components/CartDrawer/CartDrawer.jsx","../src/components/CartPage/CartPage.styles.js","../src/components/CartPage/CartSummary/CartSummary.styles.js","../src/components/CartPage/CartSummary/index.jsx","../src/components/CartPage/ProductCard/Card.styles.js","../src/components/CartPage/ProductCard/CartPageCard.jsx","../src/components/CartPage/index.jsx","../src/constants/Breakpoint.js","../src/constants/Variant.js","../src/utils/debounce.js","../src/hooks/useWindowSize.jsx","../src/hooks/useGridSize.jsx"],"sourcesContent":["import styled from 'styled-components';\nexport const CartDrawerContainer = styled.div`\n width: 100%;\n max-width: ${(props) => props.maxWidth \|\| '650px'};\n height: 100%;\n font-family: ${(props) => props.fontFamily};\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`;\n\nexport const CartDrawerBar = styled.div`\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 .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`;\n\nexport const CartDrawerProductContainer = styled.div`\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: ${(props) => props.opacity};\n @media only screen and (max-width: 748px) {\n min-height: 75vh;\n }\n / background-color: red; /\n`;\n\nexport const CartDrawerBottomSection = styled.div`\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: 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`;\n\nexport const CartDrawerOutlinedButton = styled.button`\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: ${(props) => props.color \|\| 'black'};\n color: ${(props) => props.color \|\| 'black'};\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`;\n\nexport const CartDrawerFilledButton = styled(CartDrawerOutlinedButton)`\n background: ${(props) => props.color \|\| 'black'};\n color: white;\n position: relative;\n margin-bottom: 1rem;\n .icon {\n position: absolute;\n right: 2rem;\n margin: auto 0;\n }\n`;\n\nexport const CartDrawerEmptyCart = styled.div`\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: ${(props) => props.color \|\| 'red'};\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`;\n","import styled from 'styled-components';\nexport const CartDrawerProduct = styled.div`\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 max-height: 100%;\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: ${(props) => props.color \|\| 'grey'};\n }\n }\n }\n .endSection {\n width: 20%;\n height: 100%;\n .icon {\n cursor: pointer;\n transition: 0.4s;\n &:hover {\n color: red;\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`;\n\nexport const CartDrawerQtBox = styled.div`\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`;\nexport const CartDrawerLoader = styled.div`\n position: absolute;\n top: 30%;\n width: 100px;\n height: 100px;\n display: grid;\n place-items: center;\n`;\n","import React from 'react';\nimport { Stack, Tooltip } from '@mui/material';\nimport { RiDeleteBin5Line } from 'react-icons/ri';\nimport { AiOutlinePlus, AiOutlineMinus } from 'react-icons/ai';\n// import imgnotfound from '../../../assets/imgnotfound.jpeg';\n////////\nimport { CartDrawerProduct, CartDrawerQtBox } from './CartDrawerProduct.styles';\nconst CartDrawerProductCard = ({\n product,\n color,\n handleIncrementDecrement,\n handleRemoveProduct,\n handleRedirect,\n imgnotfoundUrl,\n loading,\n}) => {\n let imgnotfoundUrlcommon = '/images/imgnotfound.jpeg';\n if (imgnotfoundUrl && imgnotfoundUrl !== 'null')\n imgnotfoundUrlcommon = imgnotfoundUrl;\n\n return (\n <CartDrawerProduct color={color}>\n <img\n src={\n product.imageUrl && product.imageUrl !== 'null'\n ? product.imageUrl\n : imgnotfoundUrlcommon\n }\n alt={'no product image available'}\n />\n <Stack\n flexDirection=\"column\"\n justifyContent=\"space-between\"\n alignItems=\"flex-start\"\n className=\"middleSection\"\n >\n <Tooltip title={product?.productName} placement=\"top\" arrow>\n <h6 className=\"name\" onClick={() => handleRedirect(product)}>\n {product?.productName}\n </h6>\n </Tooltip>\n\n <h6>\n {product?.standardPrice === product?.cartStandardPrice ? (\n `$${product?.standardPrice}`\n ) : (\n <React.Fragment>\n <span>${product?.cartStandardPrice?.toFixed(2)}</span>$\n {product?.standardPrice?.toFixed(2)}\n </React.Fragment>\n )}\n </h6>\n </Stack>\n <Stack\n flexDirection=\"column\"\n justifyContent=\"space-between\"\n alignItems=\"flex-end\"\n className=\"endSection\"\n >\n <RiDeleteBin5Line\n className=\"icon\"\n onClick={() => {\n if (loading) return;\n handleRemoveProduct(product);\n }}\n />\n <CartDrawerQtBox>\n <span\n onClick={() => {\n if (loading) return;\n handleIncrementDecrement('decrement', product);\n }}\n >\n {' '}\n <AiOutlineMinus />\n </span>{' '}\n <span className={'qt'}>{product?.quantity}</span>\n <span\n onClick={() => {\n if (loading) return;\n handleIncrementDecrement('increment', product);\n }}\n >\n <AiOutlinePlus />\n </span>\n </CartDrawerQtBox>\n </Stack>\n </CartDrawerProduct>\n );\n};\n\nexport default CartDrawerProductCard;\n","import { Stack } from '@mui/material';\nimport React from 'react';\nimport { GrClose } from 'react-icons/gr';\nimport { GiShoppingCart } from 'react-icons/gi';\nimport { BsCartX } from 'react-icons/bs';\n//////\nimport {\n CartDrawerBar,\n CartDrawerBottomSection,\n CartDrawerContainer,\n CartDrawerOutlinedButton,\n CartDrawerFilledButton,\n CartDrawerProductContainer,\n CartDrawerEmptyCart,\n} from './cartDrawer.styles';\nimport CartDrawerProductCard from './CartDrawerCard/CartDrawerCard';\nimport { CartDrawerLoader } from './CartDrawerCard/CartDrawerProduct.styles';\nimport { PuffLoader } from 'react-spinners';\n\nconst CartDrawer = ({\n cartData,\n maxWidth,\n color,\n handleRedirect,\n handleIncrementDecrement,\n handleRemoveProduct,\n handleClose,\n loading,\n imgnotfoundUrl,\n}) => {\n return (\n <React.Fragment>\n <CartDrawerContainer maxWidth={maxWidth}>\n <CartDrawerBar>\n <h2>Your Cart</h2>\n <GrClose\n className=\"icon\"\n onClick={() => {\n handleClose();\n }}\n />\n </CartDrawerBar>\n {cartData && cartData?.totalCartQuantity > 0 ? (\n <CartDrawerProductContainer opacity={loading ? '.4' : '1'}>\n {cartData?.cartLineItemDtoList?.map((product, i) => (\n <React.Fragment>\n {loading && (\n <CartDrawerLoader>\n <PuffLoader color=\"black\" />\n </CartDrawerLoader>\n )}\n\n <CartDrawerProductCard\n product={product}\n handleRedirect={handleRedirect}\n handleIncrementDecrement={handleIncrementDecrement}\n handleRemoveProduct={handleRemoveProduct}\n color={color}\n key={i}\n imgnotfoundUrl={imgnotfoundUrl}\n loading={loading}\n />\n </React.Fragment>\n ))}\n </CartDrawerProductContainer>\n ) : (\n <CartDrawerEmptyCart color={color}>\n <BsCartX className=\"icon\" />\n <h6>OOps!</h6>\n <p>your cart is empty</p>\n </CartDrawerEmptyCart>\n )}\n {cartData && cartData?.totalCartQuantity > 0 && (\n <CartDrawerBottomSection>\n <Stack\n flexDirection=\"row\"\n justifyContent=\"space-between\"\n alignItems=\"center\"\n className=\"row\"\n >\n <h5>\n Subtotal<span>({cartData?.totalCartQuantity} items)</span>\n </h5>\n <h5>${cartData?.totalCartPrice?.toFixed(2)}</h5>\n </Stack>\n <CartDrawerOutlinedButton\n color={color}\n onClick={() => handleRedirect('cart')}\n >\n view cart\n </CartDrawerOutlinedButton>\n <CartDrawerFilledButton\n color={color}\n onClick={() => handleRedirect('checkout')}\n >\n continue to checkout\n </CartDrawerFilledButton>\n </CartDrawerBottomSection>\n )}\n </CartDrawerContainer>\n </React.Fragment>\n );\n};\n\nexport default CartDrawer;\n","import styled from 'styled-components'\n\n\nexport const CartPageContainer = styled.div`\n width: 100%;\n max-width: ${(props) => props.maxWidth \|\| '1350px'};\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: flex-start;\n\n .scrollDiv {\n width: 68%;\n height: 630px;\n max-height: 630px;\n background-color: white;\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n margin-right: 0.3em;\n &::-webkit-scrollbar {\n width: ${(props) => (props.retail ? '12px' : '8px')};\n }\n\n / Track /\n &::-webkit-scrollbar-track {\n background: ${(props) =>\n props.retail ? '#667080' : 'rgba(102, 112, 128, 0.5)'};\n border-radius: 16px;\n }\n\n / Handle /\n &::-webkit-scrollbar-thumb {\n background: ${(props) => (props.retail ? '#BFC3CA' : '#EDEDED')};\n border-radius: 16px;\n margin: 5px 2px;\n border: 3px solid;\n border-color: ${(props) =>\n props.retail ? '#667080' : 'rgba(102, 112, 128, 0.5)'};\n }\n box-shadow: 0px 20px 35px rgba(0, 0, 0, 0.05);\n }\n @media only screen and (max-width: 840px) {\n flex-direction: column;\n .scrollDiv {\n width: 100%;\n margin: 0;\n margin-bottom: 2em;\n padding: 0 0.4em;\n }\n }\n`;\nexport const CardsBox = styled.div`\n width: 100%;\n / min-height: 1000px; /\n position: relative;\n max-width: 860px;\n margin-right: auto;\n padding: 1em 2em;\n display: ${(props) => (props.retail ? 'grid' : 'flex')};\n grid-template-columns: 1fr 1fr;\n flex-direction: column;\n align-items: flex-start;\n grid-gap: 1em;\n justify-content: flex-start;\n align-items: center;\n border-radius: 20px;\n @media only screen and (max-width: 1220px) {\n display: flex;\n }\n @media only screen and (max-width: 640px) {\n padding: 1em 0.2em;\n }\n`;","import styled from 'styled-components';\n\nexport const CartSummaryContainer = styled.div`\n width: min(95%, 24.75em);\n max-width: ${(props) => props.maxWidth \|\| '24.75em'};\n display: flex;\n flex-direction: column;\n background: ${(props) => props.background \|\| '#667080'};\n color: ${(props) => props.color \|\| 'white'};\n border-radius: 25px;\n padding: 2em 1em;\n align-items: center;\n p {\n font-size: 0.89em;\n font-weight: 300;\n align-self: flex-start;\n color: inherit;\n margin: 0;\n padding: 0;\n }\n .continueShopping {\n font-size: 0.75em;\n color: inherit;\n text-transform: capitalize;\n height: 20px;\n border-bottom: 1px solid;\n border-color: ${(props) => props.color \|\| 'white'};\n font-weight: 300;\n cursor: pointer;\n }\n`;\nexport const CartSummaryRow = styled.div`\n width: 100%;\n display: flex;\n flex-direction: row;\n justify-content: ${(props) => props.justify \|\| 'space-between'};\n align-items: center;\n color: inherit;\n h6,\n h5 {\n margin: 0;\n font-size: 1em;\n font-weight: 700;\n color: inherit;\n text-transform: capitalize;\n }\n h5 {\n font-size: ${(props) => props.h5 \|\| '1.31em'};\n }\n`;\nexport const CartSummaryHr = styled.span`\n border: none;\n width: 100%;\n height: 1px;\n background-color: ${(props) => props.color \|\| 'rgba(255, 255, 255, 0.5)'};\n margin: 1em 0;\n`;\n\nexport const CartSummaryInputBox = styled.form`\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding-bottom: ${(props) => (props.paddingBottom ? '2em' : '0')};\n input {\n width: 10.81rem;\n height: 2.44rem;\n padding: 0.2em 0.8em;\n text-transform: capitalize;\n font-size: 0.89em;\n border-radius: 1.19rem;\n margin-right: 1em;\n border: none;\n outline: none;\n background: ${(props) => props.background \|\| '#bfc3ca'};\n color: ${(props) => props.color \|\| '#667080'};\n &::placeholder {\n color: ${(props) => props.color \|\| '#667080'};\n }\n }\n button {\n width: 7.75rem;\n height: 2.44rem;\n background: ${(props) => props.btn \|\| '#393f48'};\n border-radius: 1.19rem;\n display: grid;\n color: inherit;\n place-items: center;\n border: none;\n outline: none;\n text-transform: uppercase;\n cursor: pointer;\n font-size: 0.75em;\n transition: 0.3s;\n &:hover {\n letter-spacing: 1px;\n }\n }\n`;\nexport const CartSummaryCheckoutBtn = styled.button`\n font-size: 0.95em;\n font-weight: 700;\n background: #393f48;\n cursor: pointer;\n text-transform: uppercase;\n color: inherit;\n border: none;\n outline: none;\n width: 16.81em;\n height: 3.75em;\n display: grid;\n place-items: center;\n font-size: 0.75em;\n border-radius: 2.64em;\n padding: 0;\n font-size: 0.94em;\n margin: 1em auto;\n transition: 0.3s;\n margin-top: 2em;\n &:hover {\n opacity: 0.8;\n }\n`;\n\nexport const CartSummaryCheckBoxRow = styled(CartSummaryRow)`\n justify-content: flex-start;\n margin-left: 1em;\n margin-top: 1em;\n cursor: pointer;\n .checkBox {\n width: 0.63em;\n height: 0.63em;\n border: 1px solid;\n border-color: ${(props) => props.background \|\| 'white'};\n background: transparent;\n margin-right: 0.5em;\n border-radius: 50%;\n background: ${(props) =>\n props.selected ? props.background : 'transparent'};\n }\n p {\n font-size: 1em;\n font-weight: 6 400;\n span {\n font-weight: 600;\n margin: 0 0.1em;\n }\n .underline{\n font-weight: 400;\n text-decoration: underline;\n }\n }\n`;\n","import { Stack } from '@mui/material';\nimport React, { useState } from 'react';\n\nimport {\n CartSummaryCheckBoxRow,\n CartSummaryCheckoutBtn,\n CartSummaryContainer,\n CartSummaryHr,\n CartSummaryInputBox,\n CartSummaryRow,\n} from './CartSummary.styles';\n\nconst CartSummary = ({\n retail = true,\n shippingData,\n selectedShipping,\n setShipping,\n clickRedirect,\n subtotal,\n styles,\n}) => {\n console.log(selectedShipping);\n return (\n <CartSummaryContainer background={styles?.bg} color={styles?.color}>\n <p>Cart summary</p>\n <CartSummaryHr color={styles?.hr} />\n <CartSummaryRow>\n <h6>subtotal</h6>\n <h5>${subtotal?.toFixed(2)}</h5>\n </CartSummaryRow>\n <CartSummaryHr color={styles?.hr} />\n <CartSummaryRow>\n <h6>Discount</h6>\n <h5>$0.00</h5>\n </CartSummaryRow>\n <CartSummaryHr color={styles?.hr} />\n {retail && (\n <Stack\n flexDirection=\"column\"\n justifyContent=\"flexStart\"\n sx={{ width: '100%' }}\n >\n <CartSummaryRow justify=\"flex-start\">\n <h6>shipping</h6>\n </CartSummaryRow>\n {shippingData &&\n shippingData.map((li, i) => (\n <CartSummaryCheckBoxRow\n key={i}\n selected={li.id === selectedShipping.id}\n onClick={() => {\n setShipping(li);\n }}\n background={styles?.color}\n >\n <span className=\"checkBox\"></span>\n <p>\n {li.name}{' '}\n {li.amount && li.amount > 0 && (\n <span>: ${li.amount?.toFixed(2)}</span>\n )}\n </p>\n </CartSummaryCheckBoxRow>\n ))}\n <CartSummaryCheckBoxRow>\n <p>\n Shipping options will be updated during checkout.\n <br />\n <span className=\"underline\">Calculate shipping</span>\n </p>\n </CartSummaryCheckBoxRow>\n <CartSummaryHr color={styles?.hr} />\n </Stack>\n )}\n <CartSummaryInputBox\n paddingBottom={!retail}\n background={styles?.input?.bg}\n color={styles?.input?.color}\n btn={styles?.btnColor}\n >\n <input placeholder=\"Coupon code\" type=\"email\" required />\n <button>apply coupon</button>\n </CartSummaryInputBox>\n\n <CartSummaryHr color={styles?.hr} />\n <CartSummaryRow h5=\"1.64em\">\n <h6>total</h6>\n <h5>${(subtotal + selectedShipping?.amount)?.toFixed(2)}</h5>\n </CartSummaryRow>\n <CartSummaryRow justify=\"center\">\n <CartSummaryCheckoutBtn\n onClick={() => clickRedirect('/checkout')}\n background={styles?.btnColor}\n >\n proceed to checkokut\n </CartSummaryCheckoutBtn>\n </CartSummaryRow>\n <CartSummaryRow justify=\"center\">\n <span className=\"continueShopping\" onClick={() => clickRedirect('/')}>\n Continue to shopping\n </span>\n </CartSummaryRow>\n </CartSummaryContainer>\n );\n};\n\nexport default CartSummary;\n","import styled from 'styled-components';\n\n// export const CartTableHeader = styled.div`\n// width: 100%;\n// display: flex;\n// flex-direction: row;\n// align-items: center;\n// background-color: red;\n// min-height: 80px;\n// position: sticky;\n// top: 0;\n// right: 0;\n// z-index: 1;\n// `;\n\nexport const CartPageCard = styled.div`\n width: min(97%, 485px);\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n padding: 1rem;\n background: #ffffff;\n box-shadow: 0px 20px 35px rgba(0, 0, 0, 0.05);\n border-radius: 20px;\n position: relative;\n`;\n\nexport const CartPageImg = styled.img`\n / width: 95px; /\n width: ${(props) => props.width \|\| 'auto'};\n height: ${(props) => props.height \|\| '81px'};\n position: relative;\n margin-right: 1em;\n`;\nexport const NameAndQtBox = styled.div`\n width: 90%;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: space-between;\n position: relative;\n`;\nexport const CartPageCardName = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: flex-start;\n width: 90%;\n overflow: hidden;\n text-overflow: ellipsis;\n margin-bottom: 0.6em;\n h6 {\n color: #323232;\n font-size: 0.9em;\n margin-bottom: 0.6em;\n line-height: 1.3rem;\n max-height: 1.4rem;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n p {\n font-size: 1.1em;\n color: #c3c6c9;\n }\n`;\n\nexport const QtAndPriceBox = styled.div`\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n .subtotal {\n color: #323232;\n text-transform: capitalize;\n font-weight: bold;\n font-size: 0.85em;\n }\n`;\n\nexport const CartPageQtBox = styled.div`\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n max-width: 80px;\n min-width: 80px;\n height: 22px;\n .icon {\n width: 20.5px;\n height: 20.5px;\n display: grid;\n place-items: center;\n font-size: 10px;\n background: #eef1f4;\n cursor: pointer;\n }\n .qt {\n font-size: 18px;\n font-weight: 500;\n display: grid;\n place-items: center;\n color: #c3c6c9;\n }\n`;\n\nexport const CloseBtn = styled.div`\n width: 25px;\n height: 25px;\n display: grid;\n place-items: center;\n position: absolute;\n top: 1em;\n right: 1em;\n cursor: pointer;\n border-radius: 50%;\n background: #eef1f4;\n font-size: 12px;\n`;\n","import { Tooltip } from '@mui/material';\nimport React from 'react';\nimport { AiOutlineMinus, AiOutlinePlus, AiOutlineClose } from 'react-icons/ai';\nimport {\n CartPageCard,\n CartPageCardName,\n CartPageImg,\n CartPageQtBox,\n CloseBtn,\n NameAndQtBox,\n QtAndPriceBox,\n} from './Card.styles';\n\nconst CartPageProductCard = ({\n item,\n imgnotfoundUrl,\n handleIncrementDecrement,\n handleRemoveProduct,\n loading,\n imgSize,\n}) => {\n let imgnotfoundUrlcommon = '/images/imgnotfound.jpeg';\n if (imgnotfoundUrl && imgnotfoundUrl !== 'null')\n imgnotfoundUrlcommon = imgnotfoundUrl;\n\n return (\n <CartPageCard>\n <CartPageImg\n src={\n item.imageUrl && item.imageUrl !== 'null'\n ? item.imageUrl\n : imgnotfoundUrlcommon\n }\n alt={'no product image available'}\n width={imgSize?.width}\n height={imgSize?.height}\n />\n <NameAndQtBox>\n <CartPageCardName>\n <Tooltip title={item.productName} placement=\"top\" arrow>\n <h6>{item.productName}</h6>\n </Tooltip>\n <p>${item.standardPrice?.toFixed(2)}</p>\n </CartPageCardName>\n <QtAndPriceBox>\n <CartPageQtBox>\n <span\n className=\"icon\"\n onClick={() => {\n if (loading) return;\n handleIncrementDecrement('decrement', item);\n }}\n >\n <AiOutlineMinus />\n </span>\n <span className=\"qt\">{item.quantity}</span>\n <span\n className=\"icon\"\n onClick={() => {\n if (loading) return;\n handleIncrementDecrement('increment', item);\n }}\n >\n <AiOutlinePlus />\n </span>\n </CartPageQtBox>\n <p className=\"subtotal\">\n subtotal: ${(item.standardPrice item.quantity).toFixed(2)}\n </p>\n </QtAndPriceBox>\n </NameAndQtBox>\n <CloseBtn\n onClick={() => {\n if (loading) return;\n handleRemoveProduct(item);\n }}\n >\n <AiOutlineClose />\n </CloseBtn>\n </CartPageCard>\n );\n};\n\nexport default CartPageProductCard;\n","import React from 'react';\nimport styled from 'styled-components';\nimport { CardsBox, CartPageContainer } from './CartPage.styles';\nimport CartSummary from './CartSummary';\nimport { CartHeader, CartTableHeader } from './ProductCard/Card.styles';\nimport CartPageProductCard from './ProductCard/CartPageCard';\n\nconst CartPageComponent = ({\n retail,\n shippingData,\n selectedShipping,\n setShipping,\n clickRedirect,\n cartData,\n handleIncrementDecrement,\n handleRemoveProduct,\n loading,\n imgnotfoundUrl,\n styles\n}) => {\n return (\n <CartPageContainer retail={retail}>\n <div className=\"scrollDiv\">\n {/* <CartTableHeader> div</CartTableHeader> /}\n <CardsBox retail={retail}>\n {cartData?.cartLineItemDtoList?.map((item) => (\n <CartPageProductCard\n item={item}\n loading={loading}\n imgnotfoundUrl={imgnotfoundUrl}\n handleIncrementDecrement={handleIncrementDecrement}\n handleRemoveProduct={handleRemoveProduct}\n imgSize={styles?.imgSize}\n />\n ))}\n </CardsBox>\n </div>\n <CartSummary\n retail={retail}\n shippingData={shippingData}\n selectedShipping={selectedShipping}\n setShipping={setShipping}\n clickRedirect={clickRedirect}\n subtotal={cartData?.totalCartPrice}\n styles={styles?.cartSummary}\n />\n </CartPageContainer>\n );\n};\n\nexport default CartPageComponent;\n","class Breakpoint {\n static xs = 'xs';\n static sm = 'sm';\n static md = 'md';\n static lg = 'lg';\n static xl = 'xl';\n static xxl = 'xxl';\n}\n\nexport default Breakpoint;\n","class Variant {\n static ONE = 'one';\n static TWO = 'two';\n static THREE = 'three';\n}\n\nexport default Variant;\n","export default function debounce(func, wait, immediate) {\n let timeout;\n return function (...args) {\n clearTimeout(timeout);\n timeout = setTimeout(() => {\n timeout = null;\n if (!immediate) func.apply(this, args);\n }, wait);\n if (immediate && !timeout) func.apply(this, [...args]);\n };\n}\n","import { useEffect, useState } from 'react';\nimport debounce from '../utils/debounce';\n\nfunction useWindowSize() {\n const isWindow = typeof window !== 'undefined';\n const [windowSize, setWindowSize] = useState({\n width: isWindow ? window.innerWidth : 1200,\n height: isWindow ? window.innerHeight : 800,\n });\n\n useEffect(() => {\n const onWindowResize = () => {\n setWindowSize({\n width: window.innerWidth,\n height: window.innerHeight,\n });\n };\n\n const onResize = debounce(onWindowResize, 100);\n\n window.addEventListener('resize', onResize);\n onWindowResize();\n\n return () => {\n window.removeEventListener('resize', onResize);\n };\n }, []);\n\n return windowSize;\n}\n\nexport default useWindowSize;\n","import { useEffect, useState } from 'react';\nimport useWindowSize from './useWindowSize';\nimport { Breakpoint } from '../constants';\n\n/\n The breakpoints of responsive grid follow Google chrome media queries rules\n*/\nconst getBreakpoint = ({ width: screen }) => {\n let breakpoint = '';\n\n if (screen <= 320) {\n breakpoint = Breakpoint.xs;\n }\n if (screen >= 375) {\n breakpoint = Breakpoint.sm;\n }\n if (screen >= 768) {\n breakpoint = Breakpoint.md;\n }\n if (screen >= 992) {\n breakpoint = Breakpoint.lg;\n }\n if (screen >= 1200) {\n breakpoint = Breakpoint.xl;\n }\n if (screen >= 1600) {\n breakpoint = Breakpoint.xxl;\n }\n\n return breakpoint;\n};\n\nfunction useGridSize() {\n const windowSize = useWindowSize();\n const [layout, setLayout] = useState(Breakpoint.md);\n\n useEffect(() => {\n setLayout(getBreakpoint(windowSize));\n }, [windowSize]);\n return layout;\n}\n\nexport default useGridSize;\n"],"names":["CartDrawerContainer","styled","div","props","maxWidth","fontFamily","CartDrawerBar","CartDrawerProductContainer","opacity","CartDrawerBottomSection","CartDrawerOutlinedButton","button","color","CartDrawerFilledButton","CartDrawerEmptyCart","CartDrawerProduct","CartDrawerQtBox","CartDrawerLoader","CartDrawerProductCard","product","handleIncrementDecrement","handleRemoveProduct","handleRedirect","imgnotfoundUrl","loading","imgnotfoundUrlcommon","React","imageUrl","Stack","Tooltip","productName","standardPrice","cartStandardPrice","toFixed","RiDeleteBin5Line","AiOutlineMinus","quantity","AiOutlinePlus","CartDrawer","cartData","handleClose","GrClose","totalCartQuantity","cartLineItemDtoList","map","i","PuffLoader","BsCartX","totalCartPrice","CartPageContainer","retail","CardsBox","CartSummaryContainer","background","CartSummaryRow","justify","h5","CartSummaryHr","span","CartSummaryInputBox","form","paddingBottom","btn","CartSummaryCheckoutBtn","CartSummaryCheckBoxRow","selected","CartSummary","shippingData","selectedShipping","setShipping","clickRedirect","subtotal","styles","console","log","bg","hr","width","li","id","name","amount","input","btnColor","CartPageCard","CartPageImg","img","height","NameAndQtBox","CartPageCardName","QtAndPriceBox","CartPageQtBox","CloseBtn","CartPageProductCard","item","imgSize","AiOutlineClose","CartPageComponent","cartSummary","Breakpoint","xs","sm","md","lg","xl","xxl","Variant","ONE","TWO","THREE","debounce","func","wait","immediate","timeout","args","clearTimeout","setTimeout","apply","useWindowSize","isWindow","window","useState","innerWidth","innerHeight","windowSize","setWindowSize","useEffect","onWindowResize","onResize","addEventListener","removeEventListener","getBreakpoint","screen","breakpoint","useGridSize","layout","setLayout"],"mappings":"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"}

package/dist/index.modern.js CHANGED Viewed

@@ -5,7 +5,7 @@ import 'react-icons/gi';
 import { BsCartX } from 'react-icons/bs';
 import styled from 'styled-components';
 import { RiDeleteBin5Line } from 'react-icons/ri';
-import { AiOutlineMinus, AiOutlinePlus } from 'react-icons/ai';
+import { AiOutlineMinus, AiOutlinePlus, AiOutlineClose } from 'react-icons/ai';
 import { PuffLoader } from 'react-spinners';
 function _taggedTemplateLiteralLoose(strings, raw) {
@@ -55,7 +55,8 @@ var CartDrawerProductCard = function CartDrawerProductCard(_ref) {
       handleIncrementDecrement = _ref.handleIncrementDecrement,
       handleRemoveProduct = _ref.handleRemoveProduct,
       handleRedirect = _ref.handleRedirect,
-      imgnotfoundUrl = _ref.imgnotfoundUrl;
+      imgnotfoundUrl = _ref.imgnotfoundUrl,
+      loading = _ref.loading;
   var imgnotfoundUrlcommon = '/images/imgnotfound.jpeg';
   if (imgnotfoundUrl && imgnotfoundUrl !== 'null') imgnotfoundUrlcommon = imgnotfoundUrl;
   return /*#__PURE__*/React.createElement(CartDrawerProduct, {
@@ -85,16 +86,19 @@ var CartDrawerProductCard = function CartDrawerProductCard(_ref) {
   }, /*#__PURE__*/React.createElement(RiDeleteBin5Line, {
     className: "icon",
     onClick: function onClick() {
+      if (loading) return;
       handleRemoveProduct(product);
     }
   }), /*#__PURE__*/React.createElement(CartDrawerQtBox, null, /*#__PURE__*/React.createElement("span", {
     onClick: function onClick() {
+      if (loading) return;
       handleIncrementDecrement('decrement', product);
     }
   }, ' ', /*#__PURE__*/React.createElement(AiOutlineMinus, null)), ' ', /*#__PURE__*/React.createElement("span", {
     className: 'qt'
   }, product === null || product === void 0 ? void 0 : product.quantity), /*#__PURE__*/React.createElement("span", {
     onClick: function onClick() {
+      if (loading) return;
       handleIncrementDecrement('increment', product);
     }
   }, /*#__PURE__*/React.createElement(AiOutlinePlus, null)))));
@@ -131,7 +135,8 @@ var CartDrawer = function CartDrawer(_ref) {
       handleRemoveProduct: handleRemoveProduct,
       color: color,
       key: i,
-      imgnotfoundUrl: imgnotfoundUrl
+      imgnotfoundUrl: imgnotfoundUrl,
+      loading: loading
     }));
   })) : /*#__PURE__*/React.createElement(CartDrawerEmptyCart, {
     color: color
@@ -155,6 +160,231 @@ var CartDrawer = function CartDrawer(_ref) {
   }, "continue to checkout"))));
 };
+var _templateObject$2, _templateObject2$2;
+var CartPageContainer = styled.div(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  max-width: ", ";\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: flex-start;\n\n  .scrollDiv {\n    width: 68%;\n    height: 630px;\n    max-height: 630px;\n    background-color: white;\n    display: flex;\n    flex-direction: column;\n    overflow-y: auto;\n    margin-right: 0.3em;\n    &::-webkit-scrollbar {\n      width: ", ";\n    }\n\n    /* Track */\n    &::-webkit-scrollbar-track {\n      background: ", ";\n      border-radius: 16px;\n    }\n\n    /* Handle */\n    &::-webkit-scrollbar-thumb {\n      background: ", ";\n      border-radius: 16px;\n      margin: 5px 2px;\n      border: 3px solid;\n      border-color: ", ";\n    }\n    box-shadow: 0px 20px 35px rgba(0, 0, 0, 0.05);\n  }\n  @media only screen and (max-width: 840px) {\n    flex-direction: column;\n    .scrollDiv {\n      width: 100%;\n      margin: 0;\n      margin-bottom: 2em;\n      padding: 0 0.4em;\n    }\n  }\n"])), function (props) {
+  return props.maxWidth || '1350px';
+}, function (props) {
+  return props.retail ? '12px' : '8px';
+}, function (props) {
+  return props.retail ? '#667080' : 'rgba(102, 112, 128, 0.5)';
+}, function (props) {
+  return props.retail ? '#BFC3CA' : '#EDEDED';
+}, function (props) {
+  return props.retail ? '#667080' : 'rgba(102, 112, 128, 0.5)';
+});
+var CardsBox = styled.div(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  /* min-height: 1000px; */\n  position: relative;\n  max-width: 860px;\n  margin-right: auto;\n  padding: 1em 2em;\n  display: ", ";\n  grid-template-columns: 1fr 1fr;\n  flex-direction: column;\n  align-items: flex-start;\n  grid-gap: 1em;\n  justify-content: flex-start;\n  align-items: center;\n  border-radius: 20px;\n  @media only screen and (max-width: 1220px) {\n    display: flex;\n  }\n  @media only screen and (max-width: 640px) {\n    padding: 1em 0.2em;\n  }\n"])), function (props) {
+  return props.retail ? 'grid' : 'flex';
+});
+var _templateObject$3, _templateObject2$3, _templateObject3$2, _templateObject4$1, _templateObject5$1, _templateObject6$1;
+var CartSummaryContainer = styled.div(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteralLoose(["\n  width: min(95%, 24.75em);\n  max-width: ", ";\n  display: flex;\n  flex-direction: column;\n  background: ", ";\n  color: ", ";\n  border-radius: 25px;\n  padding: 2em 1em;\n  align-items: center;\n  p {\n    font-size: 0.89em;\n    font-weight: 300;\n    align-self: flex-start;\n    color: inherit;\n    margin: 0;\n    padding: 0;\n  }\n  .continueShopping {\n    font-size: 0.75em;\n    color: inherit;\n    text-transform: capitalize;\n    height: 20px;\n    border-bottom: 1px solid;\n    border-color: ", ";\n    font-weight: 300;\n    cursor: pointer;\n  }\n"])), function (props) {
+  return props.maxWidth || '24.75em';
+}, function (props) {
+  return props.background || '#667080';
+}, function (props) {
+  return props.color || 'white';
+}, function (props) {
+  return props.color || 'white';
+});
+var CartSummaryRow = styled.div(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  justify-content: ", ";\n  align-items: center;\n  color: inherit;\n  h6,\n  h5 {\n    margin: 0;\n    font-size: 1em;\n    font-weight: 700;\n    color: inherit;\n    text-transform: capitalize;\n  }\n  h5 {\n    font-size: ", ";\n  }\n"])), function (props) {
+  return props.justify || 'space-between';
+}, function (props) {
+  return props.h5 || '1.31em';
+});
+var CartSummaryHr = styled.span(_templateObject3$2 || (_templateObject3$2 = _taggedTemplateLiteralLoose(["\n  border: none;\n  width: 100%;\n  height: 1px;\n  background-color: ", ";\n  margin: 1em 0;\n"])), function (props) {
+  return props.color || 'rgba(255, 255, 255, 0.5)';
+});
+var CartSummaryInputBox = styled.form(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  padding-bottom: ", ";\n  input {\n    width: 10.81rem;\n    height: 2.44rem;\n    padding: 0.2em 0.8em;\n    text-transform: capitalize;\n    font-size: 0.89em;\n    border-radius: 1.19rem;\n    margin-right: 1em;\n    border: none;\n    outline: none;\n    background: ", ";\n    color: ", ";\n    &::placeholder {\n      color: ", ";\n    }\n  }\n  button {\n    width: 7.75rem;\n    height: 2.44rem;\n    background: ", ";\n    border-radius: 1.19rem;\n    display: grid;\n    color: inherit;\n    place-items: center;\n    border: none;\n    outline: none;\n    text-transform: uppercase;\n    cursor: pointer;\n    font-size: 0.75em;\n    transition: 0.3s;\n    &:hover {\n      letter-spacing: 1px;\n    }\n  }\n"])), function (props) {
+  return props.paddingBottom ? '2em' : '0';
+}, function (props) {
+  return props.background || '#bfc3ca';
+}, function (props) {
+  return props.color || '#667080';
+}, function (props) {
+  return props.color || '#667080';
+}, function (props) {
+  return props.btn || '#393f48';
+});
+var CartSummaryCheckoutBtn = styled.button(_templateObject5$1 || (_templateObject5$1 = _taggedTemplateLiteralLoose(["\n  font-size: 0.95em;\n  font-weight: 700;\n  background: #393f48;\n  cursor: pointer;\n  text-transform: uppercase;\n  color: inherit;\n  border: none;\n  outline: none;\n  width: 16.81em;\n  height: 3.75em;\n  display: grid;\n  place-items: center;\n  font-size: 0.75em;\n  border-radius: 2.64em;\n  padding: 0;\n  font-size: 0.94em;\n  margin: 1em auto;\n  transition: 0.3s;\n  margin-top: 2em;\n  &:hover {\n    opacity: 0.8;\n  }\n"])));
+var CartSummaryCheckBoxRow = styled(CartSummaryRow)(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteralLoose(["\n  justify-content: flex-start;\n  margin-left: 1em;\n  margin-top: 1em;\n  cursor: pointer;\n  .checkBox {\n    width: 0.63em;\n    height: 0.63em;\n    border: 1px solid;\n    border-color: ", ";\n    background: transparent;\n    margin-right: 0.5em;\n    border-radius: 50%;\n    background: ", ";\n  }\n  p {\n    font-size: 1em;\n    font-weight: 6 400;\n    span {\n      font-weight: 600;\n      margin: 0 0.1em;\n    }\n    .underline{\n      font-weight: 400;\n      text-decoration: underline;\n    }\n  }\n"])), function (props) {
+  return props.background || 'white';
+}, function (props) {
+  return props.selected ? props.background : 'transparent';
+});
+var CartSummary = function CartSummary(_ref) {
+  var _styles$input, _styles$input2, _ref2;
+  var _ref$retail = _ref.retail,
+      retail = _ref$retail === void 0 ? true : _ref$retail,
+      shippingData = _ref.shippingData,
+      selectedShipping = _ref.selectedShipping,
+      setShipping = _ref.setShipping,
+      clickRedirect = _ref.clickRedirect,
+      subtotal = _ref.subtotal,
+      styles = _ref.styles;
+  console.log(selectedShipping);
+  return /*#__PURE__*/React.createElement(CartSummaryContainer, {
+    background: styles === null || styles === void 0 ? void 0 : styles.bg,
+    color: styles === null || styles === void 0 ? void 0 : styles.color
+  }, /*#__PURE__*/React.createElement("p", null, "Cart summary"), /*#__PURE__*/React.createElement(CartSummaryHr, {
+    color: styles === null || styles === void 0 ? void 0 : styles.hr
+  }), /*#__PURE__*/React.createElement(CartSummaryRow, null, /*#__PURE__*/React.createElement("h6", null, "subtotal"), /*#__PURE__*/React.createElement("h5", null, "$", subtotal === null || subtotal === void 0 ? void 0 : subtotal.toFixed(2))), /*#__PURE__*/React.createElement(CartSummaryHr, {
+    color: styles === null || styles === void 0 ? void 0 : styles.hr
+  }), /*#__PURE__*/React.createElement(CartSummaryRow, null, /*#__PURE__*/React.createElement("h6", null, "Discount"), /*#__PURE__*/React.createElement("h5", null, "$0.00")), /*#__PURE__*/React.createElement(CartSummaryHr, {
+    color: styles === null || styles === void 0 ? void 0 : styles.hr
+  }), retail && /*#__PURE__*/React.createElement(Stack, {
+    flexDirection: "column",
+    justifyContent: "flexStart",
+    sx: {
+      width: '100%'
+    }
+  }, /*#__PURE__*/React.createElement(CartSummaryRow, {
+    justify: "flex-start"
+  }, /*#__PURE__*/React.createElement("h6", null, "shipping")), shippingData && shippingData.map(function (li, i) {
+    var _li$amount;
+    return /*#__PURE__*/React.createElement(CartSummaryCheckBoxRow, {
+      key: i,
+      selected: li.id === selectedShipping.id,
+      onClick: function onClick() {
+        setShipping(li);
+      },
+      background: styles === null || styles === void 0 ? void 0 : styles.color
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "checkBox"
+    }), /*#__PURE__*/React.createElement("p", null, li.name, ' ', li.amount && li.amount > 0 && /*#__PURE__*/React.createElement("span", null, ": $", (_li$amount = li.amount) === null || _li$amount === void 0 ? void 0 : _li$amount.toFixed(2))));
+  }), /*#__PURE__*/React.createElement(CartSummaryCheckBoxRow, null, /*#__PURE__*/React.createElement("p", null, "Shipping options will be updated during checkout.", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("span", {
+    className: "underline"
+  }, "Calculate shipping"))), /*#__PURE__*/React.createElement(CartSummaryHr, {
+    color: styles === null || styles === void 0 ? void 0 : styles.hr
+  })), /*#__PURE__*/React.createElement(CartSummaryInputBox, {
+    paddingBottom: !retail,
+    background: styles === null || styles === void 0 ? void 0 : (_styles$input = styles.input) === null || _styles$input === void 0 ? void 0 : _styles$input.bg,
+    color: styles === null || styles === void 0 ? void 0 : (_styles$input2 = styles.input) === null || _styles$input2 === void 0 ? void 0 : _styles$input2.color,
+    btn: styles === null || styles === void 0 ? void 0 : styles.btnColor
+  }, /*#__PURE__*/React.createElement("input", {
+    placeholder: "Coupon code",
+    type: "email",
+    required: true
+  }), /*#__PURE__*/React.createElement("button", null, "apply coupon")), /*#__PURE__*/React.createElement(CartSummaryHr, {
+    color: styles === null || styles === void 0 ? void 0 : styles.hr
+  }), /*#__PURE__*/React.createElement(CartSummaryRow, {
+    h5: "1.64em"
+  }, /*#__PURE__*/React.createElement("h6", null, "total"), /*#__PURE__*/React.createElement("h5", null, "$", (_ref2 = subtotal + (selectedShipping === null || selectedShipping === void 0 ? void 0 : selectedShipping.amount)) === null || _ref2 === void 0 ? void 0 : _ref2.toFixed(2))), /*#__PURE__*/React.createElement(CartSummaryRow, {
+    justify: "center"
+  }, /*#__PURE__*/React.createElement(CartSummaryCheckoutBtn, {
+    onClick: function onClick() {
+      return clickRedirect('/checkout');
+    },
+    background: styles === null || styles === void 0 ? void 0 : styles.btnColor
+  }, "proceed to checkokut")), /*#__PURE__*/React.createElement(CartSummaryRow, {
+    justify: "center"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "continueShopping",
+    onClick: function onClick() {
+      return clickRedirect('/');
+    }
+  }, "Continue to shopping")));
+};
+var _templateObject$4, _templateObject2$4, _templateObject3$3, _templateObject4$2, _templateObject5$2, _templateObject6$2, _templateObject7$1;
+var CartPageCard = styled.div(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteralLoose(["\n  width: min(97%, 485px);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  padding: 1rem;\n  background: #ffffff;\n  box-shadow: 0px 20px 35px rgba(0, 0, 0, 0.05);\n  border-radius: 20px;\n  position: relative;\n"])));
+var CartPageImg = styled.img(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteralLoose(["\n  /* width: 95px; */\n  width: ", ";\n  height: ", ";\n  position: relative;\n  margin-right: 1em;\n"])), function (props) {
+  return props.width || 'auto';
+}, function (props) {
+  return props.height || '81px';
+});
+var NameAndQtBox = styled.div(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteralLoose(["\n  width: 90%;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: space-between;\n  position: relative;\n"])));
+var CartPageCardName = styled.div(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: flex-start;\n  width: 90%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  margin-bottom: 0.6em;\n  h6 {\n    color: #323232;\n    font-size: 0.9em;\n    margin-bottom: 0.6em;\n    line-height: 1.3rem;\n    max-height: 1.4rem;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n  p {\n    font-size: 1.1em;\n    color: #c3c6c9;\n  }\n"])));
+var QtAndPriceBox = styled.div(_templateObject5$2 || (_templateObject5$2 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  width: 100%;\n  .subtotal {\n    color: #323232;\n    text-transform: capitalize;\n    font-weight: bold;\n    font-size: 0.85em;\n  }\n"])));
+var CartPageQtBox = styled.div(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  max-width: 80px;\n  min-width: 80px;\n  height: 22px;\n  .icon {\n    width: 20.5px;\n    height: 20.5px;\n    display: grid;\n    place-items: center;\n    font-size: 10px;\n    background: #eef1f4;\n    cursor: pointer;\n  }\n  .qt {\n    font-size: 18px;\n    font-weight: 500;\n    display: grid;\n    place-items: center;\n    color: #c3c6c9;\n  }\n"])));
+var CloseBtn = styled.div(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteralLoose(["\n  width: 25px;\n  height: 25px;\n  display: grid;\n  place-items: center;\n  position: absolute;\n  top: 1em;\n  right: 1em;\n  cursor: pointer;\n  border-radius: 50%;\n  background: #eef1f4;\n  font-size: 12px;\n"])));
+var CartPageProductCard = function CartPageProductCard(_ref) {
+  var _item$standardPrice;
+  var item = _ref.item,
+      imgnotfoundUrl = _ref.imgnotfoundUrl,
+      handleIncrementDecrement = _ref.handleIncrementDecrement,
+      handleRemoveProduct = _ref.handleRemoveProduct,
+      loading = _ref.loading,
+      imgSize = _ref.imgSize;
+  var imgnotfoundUrlcommon = '/images/imgnotfound.jpeg';
+  if (imgnotfoundUrl && imgnotfoundUrl !== 'null') imgnotfoundUrlcommon = imgnotfoundUrl;
+  return /*#__PURE__*/React.createElement(CartPageCard, null, /*#__PURE__*/React.createElement(CartPageImg, {
+    src: item.imageUrl && item.imageUrl !== 'null' ? item.imageUrl : imgnotfoundUrlcommon,
+    alt: 'no product image available',
+    width: imgSize === null || imgSize === void 0 ? void 0 : imgSize.width,
+    height: imgSize === null || imgSize === void 0 ? void 0 : imgSize.height
+  }), /*#__PURE__*/React.createElement(NameAndQtBox, null, /*#__PURE__*/React.createElement(CartPageCardName, null, /*#__PURE__*/React.createElement(Tooltip, {
+    title: item.productName,
+    placement: "top",
+    arrow: true
+  }, /*#__PURE__*/React.createElement("h6", null, item.productName)), /*#__PURE__*/React.createElement("p", null, "$", (_item$standardPrice = item.standardPrice) === null || _item$standardPrice === void 0 ? void 0 : _item$standardPrice.toFixed(2))), /*#__PURE__*/React.createElement(QtAndPriceBox, null, /*#__PURE__*/React.createElement(CartPageQtBox, null, /*#__PURE__*/React.createElement("span", {
+    className: "icon",
+    onClick: function onClick() {
+      if (loading) return;
+      handleIncrementDecrement('decrement', item);
+    }
+  }, /*#__PURE__*/React.createElement(AiOutlineMinus, null)), /*#__PURE__*/React.createElement("span", {
+    className: "qt"
+  }, item.quantity), /*#__PURE__*/React.createElement("span", {
+    className: "icon",
+    onClick: function onClick() {
+      if (loading) return;
+      handleIncrementDecrement('increment', item);
+    }
+  }, /*#__PURE__*/React.createElement(AiOutlinePlus, null))), /*#__PURE__*/React.createElement("p", {
+    className: "subtotal"
+  }, "subtotal: $", (item.standardPrice * item.quantity).toFixed(2)))), /*#__PURE__*/React.createElement(CloseBtn, {
+    onClick: function onClick() {
+      if (loading) return;
+      handleRemoveProduct(item);
+    }
+  }, /*#__PURE__*/React.createElement(AiOutlineClose, null)));
+};
+var CartPageComponent = function CartPageComponent(_ref) {
+  var _cartData$cartLineIte;
+  var retail = _ref.retail,
+      shippingData = _ref.shippingData,
+      selectedShipping = _ref.selectedShipping,
+      setShipping = _ref.setShipping,
+      clickRedirect = _ref.clickRedirect,
+      cartData = _ref.cartData,
+      handleIncrementDecrement = _ref.handleIncrementDecrement,
+      handleRemoveProduct = _ref.handleRemoveProduct,
+      loading = _ref.loading,
+      imgnotfoundUrl = _ref.imgnotfoundUrl,
+      styles = _ref.styles;
+  return /*#__PURE__*/React.createElement(CartPageContainer, {
+    retail: retail
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "scrollDiv"
+  }, /*#__PURE__*/React.createElement(CardsBox, {
+    retail: retail
+  }, cartData === null || cartData === void 0 ? void 0 : (_cartData$cartLineIte = cartData.cartLineItemDtoList) === null || _cartData$cartLineIte === void 0 ? void 0 : _cartData$cartLineIte.map(function (item) {
+    return /*#__PURE__*/React.createElement(CartPageProductCard, {
+      item: item,
+      loading: loading,
+      imgnotfoundUrl: imgnotfoundUrl,
+      handleIncrementDecrement: handleIncrementDecrement,
+      handleRemoveProduct: handleRemoveProduct,
+      imgSize: styles === null || styles === void 0 ? void 0 : styles.imgSize
+    });
+  }))), /*#__PURE__*/React.createElement(CartSummary, {
+    retail: retail,
+    shippingData: shippingData,
+    selectedShipping: selectedShipping,
+    setShipping: setShipping,
+    clickRedirect: clickRedirect,
+    subtotal: cartData === null || cartData === void 0 ? void 0 : cartData.totalCartPrice,
+    styles: styles === null || styles === void 0 ? void 0 : styles.cartSummary
+  }));
+};
 var Breakpoint = function Breakpoint() {};
 Breakpoint.xs = 'xs';
@@ -260,5 +490,5 @@ function useGridSize() {
   return layout;
 }
-export { Breakpoint, CartDrawer, Variant, useGridSize, useWindowSize };
+export { Breakpoint, CartDrawer, CartPageComponent, Variant, useGridSize, useWindowSize };
 //# sourceMappingURL=index.modern.js.map

package/dist/index.modern.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.modern.js","sources":["../src/components/CartDrawer/cartDrawer.styles.js","../src/components/CartDrawer/CartDrawerCard/CartDrawerProduct.styles.js","../src/components/CartDrawer/CartDrawerCard/CartDrawerCard.jsx","../src/components/CartDrawer/CartDrawer.jsx","../src/constants/Breakpoint.js","../src/constants/Variant.js","../src/utils/debounce.js","../src/hooks/useWindowSize.jsx","../src/hooks/useGridSize.jsx"],"sourcesContent":["import styled from 'styled-components';\nexport const CartDrawerContainer = styled.div`\n width: 100%;\n max-width: ${(props) => props.maxWidth \|\| '650px'};\n height: 100%;\n font-family: ${(props) => props.fontFamily};\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`;\n\nexport const CartDrawerBar = styled.div`\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 .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`;\n\nexport const CartDrawerProductContainer = styled.div`\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: ${(props) => props.opacity};\n @media only screen and (max-width: 748px) {\n min-height: 75vh;\n }\n / background-color: red; /\n`;\n\nexport const CartDrawerBottomSection = styled.div`\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: 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`;\n\nexport const CartDrawerOutlinedButton = styled.button`\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: ${(props) => props.color \|\| 'black'};\n color: ${(props) => props.color \|\| 'black'};\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`;\n\nexport const CartDrawerFilledButton = styled(CartDrawerOutlinedButton)`\n background: ${(props) => props.color \|\| 'black'};\n color: white;\n position: relative;\n margin-bottom: 1rem;\n .icon {\n position: absolute;\n right: 2rem;\n margin: auto 0;\n }\n`;\n\nexport const CartDrawerEmptyCart = styled.div`\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: ${(props) => props.color \|\| 'red'};\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`;\n","import styled from 'styled-components';\nexport const CartDrawerProduct = styled.div`\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 max-height: 100%;\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: ${(props) => props.color \|\| 'grey'};\n }\n }\n }\n .endSection {\n width: 20%;\n height: 100%;\n .icon {\n cursor: pointer;\n transition: 0.4s;\n &:hover {\n color: red;\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`;\n\nexport const CartDrawerQtBox = styled.div`\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`;\nexport const CartDrawerLoader = styled.div`\n position: absolute;\n top: 30%;\n width: 100px;\n height: 100px;\n display: grid;\n place-items: center;\n`;\n","import React from 'react';\nimport { Stack, Tooltip } from '@mui/material';\nimport { RiDeleteBin5Line } from 'react-icons/ri';\nimport { AiOutlinePlus, AiOutlineMinus } from 'react-icons/ai';\n// import imgnotfound from '../../../assets/imgnotfound.jpeg';\n////////\nimport { CartDrawerProduct, CartDrawerQtBox } from './CartDrawerProduct.styles';\nconst CartDrawerProductCard = ({\n product,\n color,\n handleIncrementDecrement,\n handleRemoveProduct,\n handleRedirect,\n imgnotfoundUrl,\n}) => {\n let imgnotfoundUrlcommon = '/images/imgnotfound.jpeg';\n if (imgnotfoundUrl && imgnotfoundUrl !== 'null')\n imgnotfoundUrlcommon = imgnotfoundUrl;\n\n return (\n <CartDrawerProduct color={color}>\n <img\n src={\n product.imageUrl && product.imageUrl !== 'null'\n ? product.imageUrl\n : imgnotfoundUrlcommon\n }\n alt={'no product image available'}\n />\n <Stack\n flexDirection=\"column\"\n justifyContent=\"space-between\"\n alignItems=\"flex-start\"\n className=\"middleSection\"\n >\n <Tooltip title={product?.productName} placement=\"top\" arrow>\n <h6 className=\"name\" onClick={() => handleRedirect(product)}>\n {product?.productName}\n </h6>\n </Tooltip>\n\n <h6>\n {product?.standardPrice === product?.cartStandardPrice ? (\n `$${product?.standardPrice}`\n ) : (\n <React.Fragment>\n <span>${product?.cartStandardPrice?.toFixed(2)}</span>$\n {product?.standardPrice?.toFixed(2)}\n </React.Fragment>\n )}\n </h6>\n </Stack>\n <Stack\n flexDirection=\"column\"\n justifyContent=\"space-between\"\n alignItems=\"flex-end\"\n className=\"endSection\"\n >\n <RiDeleteBin5Line\n className=\"icon\"\n onClick={() => {\n handleRemoveProduct(product);\n }}\n />\n <CartDrawerQtBox>\n <span\n onClick={() => {\n handleIncrementDecrement('decrement', product);\n }}\n >\n {' '}\n <AiOutlineMinus />\n </span>{' '}\n <span className={'qt'}>{product?.quantity}</span>\n <span\n onClick={() => {\n handleIncrementDecrement('increment', product);\n }}\n >\n <AiOutlinePlus />\n </span>\n </CartDrawerQtBox>\n </Stack>\n </CartDrawerProduct>\n );\n};\n\nexport default CartDrawerProductCard;\n","import { Stack } from '@mui/material';\nimport React from 'react';\nimport { GrClose } from 'react-icons/gr';\nimport { GiShoppingCart } from 'react-icons/gi';\nimport { BsCartX } from 'react-icons/bs';\n//////\nimport {\n CartDrawerBar,\n CartDrawerBottomSection,\n CartDrawerContainer,\n CartDrawerOutlinedButton,\n CartDrawerFilledButton,\n CartDrawerProductContainer,\n CartDrawerEmptyCart,\n} from './cartDrawer.styles';\nimport CartDrawerProductCard from './CartDrawerCard/CartDrawerCard';\nimport { CartDrawerLoader } from './CartDrawerCard/CartDrawerProduct.styles';\nimport { PuffLoader } from 'react-spinners';\n\nconst CartDrawer = ({\n cartData,\n maxWidth,\n color,\n handleRedirect,\n handleIncrementDecrement,\n handleRemoveProduct,\n handleClose,\n loading,\n imgnotfoundUrl,\n}) => {\n return (\n <React.Fragment>\n <CartDrawerContainer maxWidth={maxWidth}>\n <CartDrawerBar>\n <h2>Your Cart</h2>\n <GrClose\n className=\"icon\"\n onClick={() => {\n handleClose();\n }}\n />\n </CartDrawerBar>\n {cartData && cartData?.totalCartQuantity > 0 ? (\n <CartDrawerProductContainer opacity={loading ? '.4' : '1'}>\n {cartData?.cartLineItemDtoList?.map((product, i) => (\n <React.Fragment>\n {loading && (\n <CartDrawerLoader>\n <PuffLoader color=\"black\" />\n </CartDrawerLoader>\n )}\n\n <CartDrawerProductCard\n product={product}\n handleRedirect={handleRedirect}\n handleIncrementDecrement={handleIncrementDecrement}\n handleRemoveProduct={handleRemoveProduct}\n color={color}\n key={i}\n imgnotfoundUrl={imgnotfoundUrl}\n />\n </React.Fragment>\n ))}\n </CartDrawerProductContainer>\n ) : (\n <CartDrawerEmptyCart color={color}>\n <BsCartX className=\"icon\" />\n <h6>OOps!</h6>\n <p>your cart is empty</p>\n </CartDrawerEmptyCart>\n )}\n {cartData && cartData?.totalCartQuantity > 0 && (\n <CartDrawerBottomSection>\n <Stack\n flexDirection=\"row\"\n justifyContent=\"space-between\"\n alignItems=\"center\"\n className=\"row\"\n >\n <h5>\n Subtotal<span>({cartData?.totalCartQuantity} items)</span>\n </h5>\n <h5>${cartData?.totalCartPrice?.toFixed(2)}</h5>\n </Stack>\n <CartDrawerOutlinedButton\n color={color}\n onClick={() => handleRedirect('cart')}\n >\n view cart\n </CartDrawerOutlinedButton>\n <CartDrawerFilledButton\n color={color}\n onClick={() => handleRedirect('checkout')}\n >\n continue to checkout\n </CartDrawerFilledButton>\n </CartDrawerBottomSection>\n )}\n </CartDrawerContainer>\n </React.Fragment>\n );\n};\n\nexport default CartDrawer;\n","class Breakpoint {\n static xs = 'xs';\n static sm = 'sm';\n static md = 'md';\n static lg = 'lg';\n static xl = 'xl';\n static xxl = 'xxl';\n}\n\nexport default Breakpoint;\n","class Variant {\n static ONE = 'one';\n static TWO = 'two';\n static THREE = 'three';\n}\n\nexport default Variant;\n","export default function debounce(func, wait, immediate) {\n let timeout;\n return function (...args) {\n clearTimeout(timeout);\n timeout = setTimeout(() => {\n timeout = null;\n if (!immediate) func.apply(this, args);\n }, wait);\n if (immediate && !timeout) func.apply(this, [...args]);\n };\n}\n","import { useEffect, useState } from 'react';\nimport debounce from '../utils/debounce';\n\nfunction useWindowSize() {\n const isWindow = typeof window !== 'undefined';\n const [windowSize, setWindowSize] = useState({\n width: isWindow ? window.innerWidth : 1200,\n height: isWindow ? window.innerHeight : 800,\n });\n\n useEffect(() => {\n const onWindowResize = () => {\n setWindowSize({\n width: window.innerWidth,\n height: window.innerHeight,\n });\n };\n\n const onResize = debounce(onWindowResize, 100);\n\n window.addEventListener('resize', onResize);\n onWindowResize();\n\n return () => {\n window.removeEventListener('resize', onResize);\n };\n }, []);\n\n return windowSize;\n}\n\nexport default useWindowSize;\n","import { useEffect, useState } from 'react';\nimport useWindowSize from './useWindowSize';\nimport { Breakpoint } from '../constants';\n\n/\n The breakpoints of responsive grid follow Google chrome media queries rules\n*/\nconst getBreakpoint = ({ width: screen }) => {\n let breakpoint = '';\n\n if (screen <= 320) {\n breakpoint = Breakpoint.xs;\n }\n if (screen >= 375) {\n breakpoint = Breakpoint.sm;\n }\n if (screen >= 768) {\n breakpoint = Breakpoint.md;\n }\n if (screen >= 992) {\n breakpoint = Breakpoint.lg;\n }\n if (screen >= 1200) {\n breakpoint = Breakpoint.xl;\n }\n if (screen >= 1600) {\n breakpoint = Breakpoint.xxl;\n }\n\n return breakpoint;\n};\n\nfunction useGridSize() {\n const windowSize = useWindowSize();\n const [layout, setLayout] = useState(Breakpoint.md);\n\n useEffect(() => {\n setLayout(getBreakpoint(windowSize));\n }, [windowSize]);\n return layout;\n}\n\nexport default useGridSize;\n"],"names":["CartDrawerContainer","styled","div","props","maxWidth","fontFamily","CartDrawerBar","CartDrawerProductContainer","opacity","CartDrawerBottomSection","CartDrawerOutlinedButton","button","color","CartDrawerFilledButton","CartDrawerEmptyCart","CartDrawerProduct","CartDrawerQtBox","CartDrawerLoader","CartDrawerProductCard","product","handleIncrementDecrement","handleRemoveProduct","handleRedirect","imgnotfoundUrl","imgnotfoundUrlcommon","imageUrl","productName","standardPrice","cartStandardPrice","toFixed","quantity","CartDrawer","cartData","handleClose","loading","totalCartQuantity","cartLineItemDtoList","map","i","totalCartPrice","Breakpoint","xs","sm","md","lg","xl","xxl","Variant","ONE","TWO","THREE","debounce","func","wait","immediate","timeout","args","clearTimeout","setTimeout","apply","useWindowSize","isWindow","window","useState","width","innerWidth","height","innerHeight","windowSize","setWindowSize","useEffect","onWindowResize","onResize","addEventListener","removeEventListener","getBreakpoint","screen","breakpoint","useGridSize","layout","setLayout"],"mappings":";;;;;;;;;;;;;;;;;;;;AACO,IAAMA,mBAAmB,GAAGC,MAAM,CAACC,GAAV,oXAEjB,UAACC,KAAD;EAAA,OAAWA,KAAK,CAACC,QAAN,IAAkB,OAA7B;AAAA,CAFiB,EAIf,UAACD,KAAD;EAAA,OAAWA,KAAK,CAACE,UAAjB;AAAA,CAJe,CAAzB;AAgBA,IAAMC,aAAa,GAAGL,MAAM,CAACC,GAAV,0jBAAnB;AA2BA,IAAMK,0BAA0B,GAAGN,MAAM,CAACC,GAAV,+aAW1B,UAACC,KAAD;EAAA,OAAWA,KAAK,CAACK,OAAjB;AAAA,CAX0B,CAAhC;AAkBA,IAAMC,uBAAuB,GAAGR,MAAM,CAACC,GAAV,2uBAA7B;AAoCA,IAAMQ,wBAAwB,GAAGT,MAAM,CAACU,MAAV,ssBAYnB,UAACR,KAAD;EAAA,OAAWA,KAAK,CAACS,KAAN,IAAe,OAA1B;AAAA,CAZmB,EAa1B,UAACT,KAAD;EAAA,OAAWA,KAAK,CAACS,KAAN,IAAe,OAA1B;AAAA,CAb0B,CAA9B;AAiCA,IAAMC,sBAAsB,GAAGZ,MAAM,CAACS,wBAAD,CAAT,oPACnB,UAACP,KAAD;EAAA,OAAWA,KAAK,CAACS,KAAN,IAAe,OAA1B;AAAA,CADmB,CAA5B;AAYA,IAAME,mBAAmB,GAAGb,MAAM,CAACC,GAAV,imBAanB,UAACC,KAAD;EAAA,OAAWA,KAAK,CAACS,KAAN,IAAe,KAA1B;AAAA,CAbmB,CAAzB;;;AC9IA,IAAMG,iBAAiB,GAAGd,MAAM,CAACC,GAAV,+4CA0Cb,UAACC,KAAD;EAAA,OAAWA,KAAK,CAACS,KAAN,IAAe,MAA1B;AAAA,CA1Ca,CAAvB;AAwEP,AAAO,IAAMI,eAAe,GAAGf,MAAM,CAACC,GAAV,wzBAArB;AAsCP,AAAO,IAAMe,gBAAgB,GAAGhB,MAAM,CAACC,GAAV,mMAAtB;;ACxGP,IAAMgB,qBAAqB,GAAG,SAAxBA,qBAAwB,OAOxB;EAAA;;EAAA,IANJC,OAMI,QANJA,OAMI;MALJP,KAKI,QALJA,KAKI;MAJJQ,wBAII,QAJJA,wBAII;MAHJC,mBAGI,QAHJA,mBAGI;MAFJC,cAEI,QAFJA,cAEI;MADJC,cACI,QADJA,cACI;EACJ,IAAIC,oBAAoB,GAAG,0BAA3B;EACA,IAAID,cAAc,IAAIA,cAAc,KAAK,MAAzC,EACEC,oBAAoB,GAAGD,cAAvB;EAEF,oBACE,oBAAC,iBAAD;IAAmB,KAAK,EAAEX;kBACxB;IACE,GAAG,EACDO,OAAO,CAACM,QAAR,IAAoBN,OAAO,CAACM,QAAR,KAAqB,MAAzC,GACIN,OAAO,CAACM,QADZ,GAEID,oBAJR;IAME,GAAG,EAAE;IAPT,eASE,oBAAC,KAAD;IACE,aAAa,EAAC,QADhB;IAEE,cAAc,EAAC,eAFjB;IAGE,UAAU,EAAC,YAHb;IAIE,SAAS,EAAC;kBAEV,oBAAC,OAAD;IAAS,KAAK,EAAEL,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEO,WAAzB;IAAsC,SAAS,EAAC,KAAhD;IAAsD,KAAK;kBACzD;IAAI,SAAS,EAAC,MAAd;IAAqB,OAAO,EAAE;MAAA,OAAMJ,cAAc,CAACH,OAAD,CAApB;;KAC3BA,OADH,aACGA,OADH,uBACGA,OAAO,CAAEO,WADZ,CADF,CANF,eAYE,gCACG,CAAAP,OAAO,SAAP,IAAAA,OAAO,WAAP,YAAAA,OAAO,CAAEQ,aAAT,OAA2BR,OAA3B,aAA2BA,OAA3B,uBAA2BA,OAAO,CAAES,iBAApC,WACKT,OADL,aACKA,OADL,uBACKA,OAAO,CAAEQ,aADd,iBAGC,oBAAC,KAAD,CAAO,QAAP,qBACE,uCAAQR,OAAR,aAAQA,OAAR,gDAAQA,OAAO,CAAES,iBAAjB,0DAAQ,sBAA4BC,OAA5B,CAAoC,CAApC,CAAR,CADF,OAEGV,OAFH,aAEGA,OAFH,gDAEGA,OAAO,CAAEQ,aAFZ,0DAEG,sBAAwBE,OAAxB,CAAgC,CAAhC,CAFH,CAJJ,CAZF,CATF,eAgCE,oBAAC,KAAD;IACE,aAAa,EAAC,QADhB;IAEE,cAAc,EAAC,eAFjB;IAGE,UAAU,EAAC,UAHb;IAIE,SAAS,EAAC;kBAEV,oBAAC,gBAAD;IACE,SAAS,EAAC,MADZ;IAEE,OAAO,EAAE,mBAAM;MACbR,mBAAmB,CAACF,OAAD,CAAnB;;IATN,eAYE,oBAAC,eAAD,qBACE;IACE,OAAO,EAAE,mBAAM;MACbC,wBAAwB,CAAC,WAAD,EAAcD,OAAd,CAAxB;;KAGD,GALH,eAME,oBAAC,cAAD,OANF,CADF,EAQU,GARV,eASE;IAAM,SAAS,EAAE;KAAOA,OAAxB,aAAwBA,OAAxB,uBAAwBA,OAAO,CAAEW,QAAjC,CATF,eAUE;IACE,OAAO,EAAE,mBAAM;MACbV,wBAAwB,CAAC,WAAD,EAAcD,OAAd,CAAxB;;kBAGF,oBAAC,aAAD,OALF,CAVF,CAZF,CAhCF,CADF;AAkED,CA9ED;;ACYA,IAAMY,UAAU,GAAG,SAAbA,UAAa,OAUb;EAAA;;EAAA,IATJC,QASI,QATJA,QASI;MARJ5B,QAQI,QARJA,QAQI;MAPJQ,KAOI,QAPJA,KAOI;MANJU,cAMI,QANJA,cAMI;MALJF,wBAKI,QALJA,wBAKI;MAJJC,mBAII,QAJJA,mBAII;MAHJY,WAGI,QAHJA,WAGI;MAFJC,OAEI,QAFJA,OAEI;MADJX,cACI,QADJA,cACI;EACJ,oBACE,oBAAC,KAAD,CAAO,QAAP,qBACE,oBAAC,mBAAD;IAAqB,QAAQ,EAAEnB;kBAC7B,oBAAC,aAAD,qBACE,4CADF,eAEE,oBAAC,OAAD;IACE,SAAS,EAAC,MADZ;IAEE,OAAO,EAAE,mBAAM;MACb6B,WAAW;;IALjB,CADF,EAUGD,QAAQ,IAAI,CAAAA,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAEG,iBAAV,IAA8B,CAA1C,gBACC,oBAAC,0BAAD;IAA4B,OAAO,EAAED,OAAO,GAAG,IAAH,GAAU;KACnDF,QADH,aACGA,QADH,gDACGA,QAAQ,CAAEI,mBADb,0DACG,sBAA+BC,GAA/B,CAAmC,UAAClB,OAAD,EAAUmB,CAAV;IAAA,oBAClC,oBAAC,KAAD,CAAO,QAAP,QACGJ,OAAO,iBACN,oBAAC,gBAAD,qBACE,oBAAC,UAAD;MAAY,KAAK,EAAC;MADpB,CAFJ,eAOE,oBAAC,qBAAD;MACE,OAAO,EAAEf,OADX;MAEE,cAAc,EAAEG,cAFlB;MAGE,wBAAwB,EAAEF,wBAH5B;MAIE,mBAAmB,EAAEC,mBAJvB;MAKE,KAAK,EAAET,KALT;MAME,GAAG,EAAE0B,CANP;MAOE,cAAc,EAAEf;MAdpB,CADkC;GAAnC,CADH,CADD,gBAuBC,oBAAC,mBAAD;IAAqB,KAAK,EAAEX;kBAC1B,oBAAC,OAAD;IAAS,SAAS,EAAC;IADrB,eAEE,wCAFF,eAGE,oDAHF,CAjCJ,EAuCGoB,QAAQ,IAAI,CAAAA,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAEG,iBAAV,IAA8B,CAA1C,iBACC,oBAAC,uBAAD,qBACE,oBAAC,KAAD;IACE,aAAa,EAAC,KADhB;IAEE,cAAc,EAAC,eAFjB;IAGE,UAAU,EAAC,QAHb;IAIE,SAAS,EAAC;kBAEV,yDACU,uCAAQH,QAAR,aAAQA,QAAR,uBAAQA,QAAQ,CAAEG,iBAAlB,YADV,CANF,eASE,qCAAMH,QAAN,aAAMA,QAAN,gDAAMA,QAAQ,CAAEO,cAAhB,0DAAM,sBAA0BV,OAA1B,CAAkC,CAAlC,CAAN,CATF,CADF,eAYE,oBAAC,wBAAD;IACE,KAAK,EAAEjB,KADT;IAEE,OAAO,EAAE;MAAA,OAAMU,cAAc,CAAC,MAAD,CAApB;;iBAdb,eAkBE,oBAAC,sBAAD;IACE,KAAK,EAAEV,KADT;IAEE,OAAO,EAAE;MAAA,OAAMU,cAAc,CAAC,UAAD,CAApB;;4BApBb,CAxCJ,CADF,CADF;AAuED,CAlFD;;ICnBMkB;;AAAAA,WACGC,KAAK;AADRD,WAEGE,KAAK;AAFRF,WAGGG,KAAK;AAHRH,WAIGI,KAAK;AAJRJ,WAKGK,KAAK;AALRL,WAMGM,MAAM;;ICNTC;;AAAAA,QACGC,MAAM;AADTD,QAEGE,MAAM;AAFTF,QAGGG,QAAQ;;ACHF,SAASC,QAAT,CAAkBC,IAAlB,EAAwBC,IAAxB,EAA8BC,SAA9B,EAAyC;EACtD,IAAIC,OAAJ;EACA,OAAO,YAAmB;IAAA;;IAAA,kCAANC,IAAM;MAANA,IAAM;;;IACxBC,YAAY,CAACF,OAAD,CAAZ;IACAA,OAAO,GAAGG,UAAU,CAAC,YAAM;MACzBH,OAAO,GAAG,IAAV;MACA,IAAI,CAACD,SAAL,EAAgBF,IAAI,CAACO,KAAL,CAAW,KAAX,EAAiBH,IAAjB;KAFE,EAGjBH,IAHiB,CAApB;IAIA,IAAIC,SAAS,IAAI,CAACC,OAAlB,EAA2BH,IAAI,CAACO,KAAL,CAAW,IAAX,YAAqBH,IAArB;GAN7B;AAQD;;ACPD,SAASI,aAAT,GAAyB;EACvB,IAAMC,QAAQ,GAAG,OAAOC,MAAP,KAAkB,WAAnC;;EACA,gBAAoCC,QAAQ,CAAC;IAC3CC,KAAK,EAAEH,QAAQ,GAAGC,MAAM,CAACG,UAAV,GAAuB,IADK;IAE3CC,MAAM,EAAEL,QAAQ,GAAGC,MAAM,CAACK,WAAV,GAAwB;GAFE,CAA5C;MAAOC,UAAP;MAAmBC,aAAnB;;EAKAC,SAAS,CAAC,YAAM;IACd,IAAMC,cAAc,GAAG,SAAjBA,cAAiB,GAAM;MAC3BF,aAAa,CAAC;QACZL,KAAK,EAAEF,MAAM,CAACG,UADF;QAEZC,MAAM,EAAEJ,MAAM,CAACK;OAFJ,CAAb;KADF;;IAOA,IAAMK,QAAQ,GAAGrB,QAAQ,CAACoB,cAAD,EAAiB,GAAjB,CAAzB;IAEAT,MAAM,CAACW,gBAAP,CAAwB,QAAxB,EAAkCD,QAAlC;IACAD,cAAc;IAEd,OAAO,YAAM;MACXT,MAAM,CAACY,mBAAP,CAA2B,QAA3B,EAAqCF,QAArC;KADF;GAbO,EAgBN,EAhBM,CAAT;EAkBA,OAAOJ,UAAP;AACD;;ACtBD,IAAMO,aAAa,GAAG,SAAhBA,aAAgB,OAAuB;EAAA,IAAbC,MAAa,QAApBZ,KAAoB;EAC3C,IAAIa,UAAU,GAAG,EAAjB;;EAEA,IAAID,MAAM,IAAI,GAAd,EAAmB;IACjBC,UAAU,GAAGrC,UAAU,CAACC,EAAxB;;;EAEF,IAAImC,MAAM,IAAI,GAAd,EAAmB;IACjBC,UAAU,GAAGrC,UAAU,CAACE,EAAxB;;;EAEF,IAAIkC,MAAM,IAAI,GAAd,EAAmB;IACjBC,UAAU,GAAGrC,UAAU,CAACG,EAAxB;;;EAEF,IAAIiC,MAAM,IAAI,GAAd,EAAmB;IACjBC,UAAU,GAAGrC,UAAU,CAACI,EAAxB;;;EAEF,IAAIgC,MAAM,IAAI,IAAd,EAAoB;IAClBC,UAAU,GAAGrC,UAAU,CAACK,EAAxB;;;EAEF,IAAI+B,MAAM,IAAI,IAAd,EAAoB;IAClBC,UAAU,GAAGrC,UAAU,CAACM,GAAxB;;;EAGF,OAAO+B,UAAP;AACD,CAvBD;;AAyBA,SAASC,WAAT,GAAuB;EACrB,IAAMV,UAAU,GAAGR,aAAa,EAAhC;;EACA,gBAA4BG,QAAQ,CAACvB,UAAU,CAACG,EAAZ,CAApC;MAAOoC,MAAP;MAAeC,SAAf;;EAEAV,SAAS,CAAC,YAAM;IACdU,SAAS,CAACL,aAAa,CAACP,UAAD,CAAd,CAAT;GADO,EAEN,CAACA,UAAD,CAFM,CAAT;EAGA,OAAOW,MAAP;AACD;;;;"}
1	+ {"version":3,"file":"index.modern.js","sources":["../src/components/CartDrawer/cartDrawer.styles.js","../src/components/CartDrawer/CartDrawerCard/CartDrawerProduct.styles.js","../src/components/CartDrawer/CartDrawerCard/CartDrawerCard.jsx","../src/components/CartDrawer/CartDrawer.jsx","../src/components/CartPage/CartPage.styles.js","../src/components/CartPage/CartSummary/CartSummary.styles.js","../src/components/CartPage/CartSummary/index.jsx","../src/components/CartPage/ProductCard/Card.styles.js","../src/components/CartPage/ProductCard/CartPageCard.jsx","../src/components/CartPage/index.jsx","../src/constants/Breakpoint.js","../src/constants/Variant.js","../src/utils/debounce.js","../src/hooks/useWindowSize.jsx","../src/hooks/useGridSize.jsx"],"sourcesContent":["import styled from 'styled-components';\nexport const CartDrawerContainer = styled.div`\n width: 100%;\n max-width: ${(props) => props.maxWidth \|\| '650px'};\n height: 100%;\n font-family: ${(props) => props.fontFamily};\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`;\n\nexport const CartDrawerBar = styled.div`\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 .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`;\n\nexport const CartDrawerProductContainer = styled.div`\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: ${(props) => props.opacity};\n @media only screen and (max-width: 748px) {\n min-height: 75vh;\n }\n / background-color: red; /\n`;\n\nexport const CartDrawerBottomSection = styled.div`\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: 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`;\n\nexport const CartDrawerOutlinedButton = styled.button`\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: ${(props) => props.color \|\| 'black'};\n color: ${(props) => props.color \|\| 'black'};\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`;\n\nexport const CartDrawerFilledButton = styled(CartDrawerOutlinedButton)`\n background: ${(props) => props.color \|\| 'black'};\n color: white;\n position: relative;\n margin-bottom: 1rem;\n .icon {\n position: absolute;\n right: 2rem;\n margin: auto 0;\n }\n`;\n\nexport const CartDrawerEmptyCart = styled.div`\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: ${(props) => props.color \|\| 'red'};\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`;\n","import styled from 'styled-components';\nexport const CartDrawerProduct = styled.div`\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 max-height: 100%;\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: ${(props) => props.color \|\| 'grey'};\n }\n }\n }\n .endSection {\n width: 20%;\n height: 100%;\n .icon {\n cursor: pointer;\n transition: 0.4s;\n &:hover {\n color: red;\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`;\n\nexport const CartDrawerQtBox = styled.div`\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`;\nexport const CartDrawerLoader = styled.div`\n position: absolute;\n top: 30%;\n width: 100px;\n height: 100px;\n display: grid;\n place-items: center;\n`;\n","import React from 'react';\nimport { Stack, Tooltip } from '@mui/material';\nimport { RiDeleteBin5Line } from 'react-icons/ri';\nimport { AiOutlinePlus, AiOutlineMinus } from 'react-icons/ai';\n// import imgnotfound from '../../../assets/imgnotfound.jpeg';\n////////\nimport { CartDrawerProduct, CartDrawerQtBox } from './CartDrawerProduct.styles';\nconst CartDrawerProductCard = ({\n product,\n color,\n handleIncrementDecrement,\n handleRemoveProduct,\n handleRedirect,\n imgnotfoundUrl,\n loading,\n}) => {\n let imgnotfoundUrlcommon = '/images/imgnotfound.jpeg';\n if (imgnotfoundUrl && imgnotfoundUrl !== 'null')\n imgnotfoundUrlcommon = imgnotfoundUrl;\n\n return (\n <CartDrawerProduct color={color}>\n <img\n src={\n product.imageUrl && product.imageUrl !== 'null'\n ? product.imageUrl\n : imgnotfoundUrlcommon\n }\n alt={'no product image available'}\n />\n <Stack\n flexDirection=\"column\"\n justifyContent=\"space-between\"\n alignItems=\"flex-start\"\n className=\"middleSection\"\n >\n <Tooltip title={product?.productName} placement=\"top\" arrow>\n <h6 className=\"name\" onClick={() => handleRedirect(product)}>\n {product?.productName}\n </h6>\n </Tooltip>\n\n <h6>\n {product?.standardPrice === product?.cartStandardPrice ? (\n `$${product?.standardPrice}`\n ) : (\n <React.Fragment>\n <span>${product?.cartStandardPrice?.toFixed(2)}</span>$\n {product?.standardPrice?.toFixed(2)}\n </React.Fragment>\n )}\n </h6>\n </Stack>\n <Stack\n flexDirection=\"column\"\n justifyContent=\"space-between\"\n alignItems=\"flex-end\"\n className=\"endSection\"\n >\n <RiDeleteBin5Line\n className=\"icon\"\n onClick={() => {\n if (loading) return;\n handleRemoveProduct(product);\n }}\n />\n <CartDrawerQtBox>\n <span\n onClick={() => {\n if (loading) return;\n handleIncrementDecrement('decrement', product);\n }}\n >\n {' '}\n <AiOutlineMinus />\n </span>{' '}\n <span className={'qt'}>{product?.quantity}</span>\n <span\n onClick={() => {\n if (loading) return;\n handleIncrementDecrement('increment', product);\n }}\n >\n <AiOutlinePlus />\n </span>\n </CartDrawerQtBox>\n </Stack>\n </CartDrawerProduct>\n );\n};\n\nexport default CartDrawerProductCard;\n","import { Stack } from '@mui/material';\nimport React from 'react';\nimport { GrClose } from 'react-icons/gr';\nimport { GiShoppingCart } from 'react-icons/gi';\nimport { BsCartX } from 'react-icons/bs';\n//////\nimport {\n CartDrawerBar,\n CartDrawerBottomSection,\n CartDrawerContainer,\n CartDrawerOutlinedButton,\n CartDrawerFilledButton,\n CartDrawerProductContainer,\n CartDrawerEmptyCart,\n} from './cartDrawer.styles';\nimport CartDrawerProductCard from './CartDrawerCard/CartDrawerCard';\nimport { CartDrawerLoader } from './CartDrawerCard/CartDrawerProduct.styles';\nimport { PuffLoader } from 'react-spinners';\n\nconst CartDrawer = ({\n cartData,\n maxWidth,\n color,\n handleRedirect,\n handleIncrementDecrement,\n handleRemoveProduct,\n handleClose,\n loading,\n imgnotfoundUrl,\n}) => {\n return (\n <React.Fragment>\n <CartDrawerContainer maxWidth={maxWidth}>\n <CartDrawerBar>\n <h2>Your Cart</h2>\n <GrClose\n className=\"icon\"\n onClick={() => {\n handleClose();\n }}\n />\n </CartDrawerBar>\n {cartData && cartData?.totalCartQuantity > 0 ? (\n <CartDrawerProductContainer opacity={loading ? '.4' : '1'}>\n {cartData?.cartLineItemDtoList?.map((product, i) => (\n <React.Fragment>\n {loading && (\n <CartDrawerLoader>\n <PuffLoader color=\"black\" />\n </CartDrawerLoader>\n )}\n\n <CartDrawerProductCard\n product={product}\n handleRedirect={handleRedirect}\n handleIncrementDecrement={handleIncrementDecrement}\n handleRemoveProduct={handleRemoveProduct}\n color={color}\n key={i}\n imgnotfoundUrl={imgnotfoundUrl}\n loading={loading}\n />\n </React.Fragment>\n ))}\n </CartDrawerProductContainer>\n ) : (\n <CartDrawerEmptyCart color={color}>\n <BsCartX className=\"icon\" />\n <h6>OOps!</h6>\n <p>your cart is empty</p>\n </CartDrawerEmptyCart>\n )}\n {cartData && cartData?.totalCartQuantity > 0 && (\n <CartDrawerBottomSection>\n <Stack\n flexDirection=\"row\"\n justifyContent=\"space-between\"\n alignItems=\"center\"\n className=\"row\"\n >\n <h5>\n Subtotal<span>({cartData?.totalCartQuantity} items)</span>\n </h5>\n <h5>${cartData?.totalCartPrice?.toFixed(2)}</h5>\n </Stack>\n <CartDrawerOutlinedButton\n color={color}\n onClick={() => handleRedirect('cart')}\n >\n view cart\n </CartDrawerOutlinedButton>\n <CartDrawerFilledButton\n color={color}\n onClick={() => handleRedirect('checkout')}\n >\n continue to checkout\n </CartDrawerFilledButton>\n </CartDrawerBottomSection>\n )}\n </CartDrawerContainer>\n </React.Fragment>\n );\n};\n\nexport default CartDrawer;\n","import styled from 'styled-components'\n\n\nexport const CartPageContainer = styled.div`\n width: 100%;\n max-width: ${(props) => props.maxWidth \|\| '1350px'};\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: flex-start;\n\n .scrollDiv {\n width: 68%;\n height: 630px;\n max-height: 630px;\n background-color: white;\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n margin-right: 0.3em;\n &::-webkit-scrollbar {\n width: ${(props) => (props.retail ? '12px' : '8px')};\n }\n\n / Track /\n &::-webkit-scrollbar-track {\n background: ${(props) =>\n props.retail ? '#667080' : 'rgba(102, 112, 128, 0.5)'};\n border-radius: 16px;\n }\n\n / Handle /\n &::-webkit-scrollbar-thumb {\n background: ${(props) => (props.retail ? '#BFC3CA' : '#EDEDED')};\n border-radius: 16px;\n margin: 5px 2px;\n border: 3px solid;\n border-color: ${(props) =>\n props.retail ? '#667080' : 'rgba(102, 112, 128, 0.5)'};\n }\n box-shadow: 0px 20px 35px rgba(0, 0, 0, 0.05);\n }\n @media only screen and (max-width: 840px) {\n flex-direction: column;\n .scrollDiv {\n width: 100%;\n margin: 0;\n margin-bottom: 2em;\n padding: 0 0.4em;\n }\n }\n`;\nexport const CardsBox = styled.div`\n width: 100%;\n / min-height: 1000px; /\n position: relative;\n max-width: 860px;\n margin-right: auto;\n padding: 1em 2em;\n display: ${(props) => (props.retail ? 'grid' : 'flex')};\n grid-template-columns: 1fr 1fr;\n flex-direction: column;\n align-items: flex-start;\n grid-gap: 1em;\n justify-content: flex-start;\n align-items: center;\n border-radius: 20px;\n @media only screen and (max-width: 1220px) {\n display: flex;\n }\n @media only screen and (max-width: 640px) {\n padding: 1em 0.2em;\n }\n`;","import styled from 'styled-components';\n\nexport const CartSummaryContainer = styled.div`\n width: min(95%, 24.75em);\n max-width: ${(props) => props.maxWidth \|\| '24.75em'};\n display: flex;\n flex-direction: column;\n background: ${(props) => props.background \|\| '#667080'};\n color: ${(props) => props.color \|\| 'white'};\n border-radius: 25px;\n padding: 2em 1em;\n align-items: center;\n p {\n font-size: 0.89em;\n font-weight: 300;\n align-self: flex-start;\n color: inherit;\n margin: 0;\n padding: 0;\n }\n .continueShopping {\n font-size: 0.75em;\n color: inherit;\n text-transform: capitalize;\n height: 20px;\n border-bottom: 1px solid;\n border-color: ${(props) => props.color \|\| 'white'};\n font-weight: 300;\n cursor: pointer;\n }\n`;\nexport const CartSummaryRow = styled.div`\n width: 100%;\n display: flex;\n flex-direction: row;\n justify-content: ${(props) => props.justify \|\| 'space-between'};\n align-items: center;\n color: inherit;\n h6,\n h5 {\n margin: 0;\n font-size: 1em;\n font-weight: 700;\n color: inherit;\n text-transform: capitalize;\n }\n h5 {\n font-size: ${(props) => props.h5 \|\| '1.31em'};\n }\n`;\nexport const CartSummaryHr = styled.span`\n border: none;\n width: 100%;\n height: 1px;\n background-color: ${(props) => props.color \|\| 'rgba(255, 255, 255, 0.5)'};\n margin: 1em 0;\n`;\n\nexport const CartSummaryInputBox = styled.form`\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding-bottom: ${(props) => (props.paddingBottom ? '2em' : '0')};\n input {\n width: 10.81rem;\n height: 2.44rem;\n padding: 0.2em 0.8em;\n text-transform: capitalize;\n font-size: 0.89em;\n border-radius: 1.19rem;\n margin-right: 1em;\n border: none;\n outline: none;\n background: ${(props) => props.background \|\| '#bfc3ca'};\n color: ${(props) => props.color \|\| '#667080'};\n &::placeholder {\n color: ${(props) => props.color \|\| '#667080'};\n }\n }\n button {\n width: 7.75rem;\n height: 2.44rem;\n background: ${(props) => props.btn \|\| '#393f48'};\n border-radius: 1.19rem;\n display: grid;\n color: inherit;\n place-items: center;\n border: none;\n outline: none;\n text-transform: uppercase;\n cursor: pointer;\n font-size: 0.75em;\n transition: 0.3s;\n &:hover {\n letter-spacing: 1px;\n }\n }\n`;\nexport const CartSummaryCheckoutBtn = styled.button`\n font-size: 0.95em;\n font-weight: 700;\n background: #393f48;\n cursor: pointer;\n text-transform: uppercase;\n color: inherit;\n border: none;\n outline: none;\n width: 16.81em;\n height: 3.75em;\n display: grid;\n place-items: center;\n font-size: 0.75em;\n border-radius: 2.64em;\n padding: 0;\n font-size: 0.94em;\n margin: 1em auto;\n transition: 0.3s;\n margin-top: 2em;\n &:hover {\n opacity: 0.8;\n }\n`;\n\nexport const CartSummaryCheckBoxRow = styled(CartSummaryRow)`\n justify-content: flex-start;\n margin-left: 1em;\n margin-top: 1em;\n cursor: pointer;\n .checkBox {\n width: 0.63em;\n height: 0.63em;\n border: 1px solid;\n border-color: ${(props) => props.background \|\| 'white'};\n background: transparent;\n margin-right: 0.5em;\n border-radius: 50%;\n background: ${(props) =>\n props.selected ? props.background : 'transparent'};\n }\n p {\n font-size: 1em;\n font-weight: 6 400;\n span {\n font-weight: 600;\n margin: 0 0.1em;\n }\n .underline{\n font-weight: 400;\n text-decoration: underline;\n }\n }\n`;\n","import { Stack } from '@mui/material';\nimport React, { useState } from 'react';\n\nimport {\n CartSummaryCheckBoxRow,\n CartSummaryCheckoutBtn,\n CartSummaryContainer,\n CartSummaryHr,\n CartSummaryInputBox,\n CartSummaryRow,\n} from './CartSummary.styles';\n\nconst CartSummary = ({\n retail = true,\n shippingData,\n selectedShipping,\n setShipping,\n clickRedirect,\n subtotal,\n styles,\n}) => {\n console.log(selectedShipping);\n return (\n <CartSummaryContainer background={styles?.bg} color={styles?.color}>\n <p>Cart summary</p>\n <CartSummaryHr color={styles?.hr} />\n <CartSummaryRow>\n <h6>subtotal</h6>\n <h5>${subtotal?.toFixed(2)}</h5>\n </CartSummaryRow>\n <CartSummaryHr color={styles?.hr} />\n <CartSummaryRow>\n <h6>Discount</h6>\n <h5>$0.00</h5>\n </CartSummaryRow>\n <CartSummaryHr color={styles?.hr} />\n {retail && (\n <Stack\n flexDirection=\"column\"\n justifyContent=\"flexStart\"\n sx={{ width: '100%' }}\n >\n <CartSummaryRow justify=\"flex-start\">\n <h6>shipping</h6>\n </CartSummaryRow>\n {shippingData &&\n shippingData.map((li, i) => (\n <CartSummaryCheckBoxRow\n key={i}\n selected={li.id === selectedShipping.id}\n onClick={() => {\n setShipping(li);\n }}\n background={styles?.color}\n >\n <span className=\"checkBox\"></span>\n <p>\n {li.name}{' '}\n {li.amount && li.amount > 0 && (\n <span>: ${li.amount?.toFixed(2)}</span>\n )}\n </p>\n </CartSummaryCheckBoxRow>\n ))}\n <CartSummaryCheckBoxRow>\n <p>\n Shipping options will be updated during checkout.\n <br />\n <span className=\"underline\">Calculate shipping</span>\n </p>\n </CartSummaryCheckBoxRow>\n <CartSummaryHr color={styles?.hr} />\n </Stack>\n )}\n <CartSummaryInputBox\n paddingBottom={!retail}\n background={styles?.input?.bg}\n color={styles?.input?.color}\n btn={styles?.btnColor}\n >\n <input placeholder=\"Coupon code\" type=\"email\" required />\n <button>apply coupon</button>\n </CartSummaryInputBox>\n\n <CartSummaryHr color={styles?.hr} />\n <CartSummaryRow h5=\"1.64em\">\n <h6>total</h6>\n <h5>${(subtotal + selectedShipping?.amount)?.toFixed(2)}</h5>\n </CartSummaryRow>\n <CartSummaryRow justify=\"center\">\n <CartSummaryCheckoutBtn\n onClick={() => clickRedirect('/checkout')}\n background={styles?.btnColor}\n >\n proceed to checkokut\n </CartSummaryCheckoutBtn>\n </CartSummaryRow>\n <CartSummaryRow justify=\"center\">\n <span className=\"continueShopping\" onClick={() => clickRedirect('/')}>\n Continue to shopping\n </span>\n </CartSummaryRow>\n </CartSummaryContainer>\n );\n};\n\nexport default CartSummary;\n","import styled from 'styled-components';\n\n// export const CartTableHeader = styled.div`\n// width: 100%;\n// display: flex;\n// flex-direction: row;\n// align-items: center;\n// background-color: red;\n// min-height: 80px;\n// position: sticky;\n// top: 0;\n// right: 0;\n// z-index: 1;\n// `;\n\nexport const CartPageCard = styled.div`\n width: min(97%, 485px);\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n padding: 1rem;\n background: #ffffff;\n box-shadow: 0px 20px 35px rgba(0, 0, 0, 0.05);\n border-radius: 20px;\n position: relative;\n`;\n\nexport const CartPageImg = styled.img`\n / width: 95px; /\n width: ${(props) => props.width \|\| 'auto'};\n height: ${(props) => props.height \|\| '81px'};\n position: relative;\n margin-right: 1em;\n`;\nexport const NameAndQtBox = styled.div`\n width: 90%;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: space-between;\n position: relative;\n`;\nexport const CartPageCardName = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: flex-start;\n width: 90%;\n overflow: hidden;\n text-overflow: ellipsis;\n margin-bottom: 0.6em;\n h6 {\n color: #323232;\n font-size: 0.9em;\n margin-bottom: 0.6em;\n line-height: 1.3rem;\n max-height: 1.4rem;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n p {\n font-size: 1.1em;\n color: #c3c6c9;\n }\n`;\n\nexport const QtAndPriceBox = styled.div`\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n .subtotal {\n color: #323232;\n text-transform: capitalize;\n font-weight: bold;\n font-size: 0.85em;\n }\n`;\n\nexport const CartPageQtBox = styled.div`\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n max-width: 80px;\n min-width: 80px;\n height: 22px;\n .icon {\n width: 20.5px;\n height: 20.5px;\n display: grid;\n place-items: center;\n font-size: 10px;\n background: #eef1f4;\n cursor: pointer;\n }\n .qt {\n font-size: 18px;\n font-weight: 500;\n display: grid;\n place-items: center;\n color: #c3c6c9;\n }\n`;\n\nexport const CloseBtn = styled.div`\n width: 25px;\n height: 25px;\n display: grid;\n place-items: center;\n position: absolute;\n top: 1em;\n right: 1em;\n cursor: pointer;\n border-radius: 50%;\n background: #eef1f4;\n font-size: 12px;\n`;\n","import { Tooltip } from '@mui/material';\nimport React from 'react';\nimport { AiOutlineMinus, AiOutlinePlus, AiOutlineClose } from 'react-icons/ai';\nimport {\n CartPageCard,\n CartPageCardName,\n CartPageImg,\n CartPageQtBox,\n CloseBtn,\n NameAndQtBox,\n QtAndPriceBox,\n} from './Card.styles';\n\nconst CartPageProductCard = ({\n item,\n imgnotfoundUrl,\n handleIncrementDecrement,\n handleRemoveProduct,\n loading,\n imgSize,\n}) => {\n let imgnotfoundUrlcommon = '/images/imgnotfound.jpeg';\n if (imgnotfoundUrl && imgnotfoundUrl !== 'null')\n imgnotfoundUrlcommon = imgnotfoundUrl;\n\n return (\n <CartPageCard>\n <CartPageImg\n src={\n item.imageUrl && item.imageUrl !== 'null'\n ? item.imageUrl\n : imgnotfoundUrlcommon\n }\n alt={'no product image available'}\n width={imgSize?.width}\n height={imgSize?.height}\n />\n <NameAndQtBox>\n <CartPageCardName>\n <Tooltip title={item.productName} placement=\"top\" arrow>\n <h6>{item.productName}</h6>\n </Tooltip>\n <p>${item.standardPrice?.toFixed(2)}</p>\n </CartPageCardName>\n <QtAndPriceBox>\n <CartPageQtBox>\n <span\n className=\"icon\"\n onClick={() => {\n if (loading) return;\n handleIncrementDecrement('decrement', item);\n }}\n >\n <AiOutlineMinus />\n </span>\n <span className=\"qt\">{item.quantity}</span>\n <span\n className=\"icon\"\n onClick={() => {\n if (loading) return;\n handleIncrementDecrement('increment', item);\n }}\n >\n <AiOutlinePlus />\n </span>\n </CartPageQtBox>\n <p className=\"subtotal\">\n subtotal: ${(item.standardPrice item.quantity).toFixed(2)}\n </p>\n </QtAndPriceBox>\n </NameAndQtBox>\n <CloseBtn\n onClick={() => {\n if (loading) return;\n handleRemoveProduct(item);\n }}\n >\n <AiOutlineClose />\n </CloseBtn>\n </CartPageCard>\n );\n};\n\nexport default CartPageProductCard;\n","import React from 'react';\nimport styled from 'styled-components';\nimport { CardsBox, CartPageContainer } from './CartPage.styles';\nimport CartSummary from './CartSummary';\nimport { CartHeader, CartTableHeader } from './ProductCard/Card.styles';\nimport CartPageProductCard from './ProductCard/CartPageCard';\n\nconst CartPageComponent = ({\n retail,\n shippingData,\n selectedShipping,\n setShipping,\n clickRedirect,\n cartData,\n handleIncrementDecrement,\n handleRemoveProduct,\n loading,\n imgnotfoundUrl,\n styles\n}) => {\n return (\n <CartPageContainer retail={retail}>\n <div className=\"scrollDiv\">\n {/* <CartTableHeader> div</CartTableHeader> /}\n <CardsBox retail={retail}>\n {cartData?.cartLineItemDtoList?.map((item) => (\n <CartPageProductCard\n item={item}\n loading={loading}\n imgnotfoundUrl={imgnotfoundUrl}\n handleIncrementDecrement={handleIncrementDecrement}\n handleRemoveProduct={handleRemoveProduct}\n imgSize={styles?.imgSize}\n />\n ))}\n </CardsBox>\n </div>\n <CartSummary\n retail={retail}\n shippingData={shippingData}\n selectedShipping={selectedShipping}\n setShipping={setShipping}\n clickRedirect={clickRedirect}\n subtotal={cartData?.totalCartPrice}\n styles={styles?.cartSummary}\n />\n </CartPageContainer>\n );\n};\n\nexport default CartPageComponent;\n","class Breakpoint {\n static xs = 'xs';\n static sm = 'sm';\n static md = 'md';\n static lg = 'lg';\n static xl = 'xl';\n static xxl = 'xxl';\n}\n\nexport default Breakpoint;\n","class Variant {\n static ONE = 'one';\n static TWO = 'two';\n static THREE = 'three';\n}\n\nexport default Variant;\n","export default function debounce(func, wait, immediate) {\n let timeout;\n return function (...args) {\n clearTimeout(timeout);\n timeout = setTimeout(() => {\n timeout = null;\n if (!immediate) func.apply(this, args);\n }, wait);\n if (immediate && !timeout) func.apply(this, [...args]);\n };\n}\n","import { useEffect, useState } from 'react';\nimport debounce from '../utils/debounce';\n\nfunction useWindowSize() {\n const isWindow = typeof window !== 'undefined';\n const [windowSize, setWindowSize] = useState({\n width: isWindow ? window.innerWidth : 1200,\n height: isWindow ? window.innerHeight : 800,\n });\n\n useEffect(() => {\n const onWindowResize = () => {\n setWindowSize({\n width: window.innerWidth,\n height: window.innerHeight,\n });\n };\n\n const onResize = debounce(onWindowResize, 100);\n\n window.addEventListener('resize', onResize);\n onWindowResize();\n\n return () => {\n window.removeEventListener('resize', onResize);\n };\n }, []);\n\n return windowSize;\n}\n\nexport default useWindowSize;\n","import { useEffect, useState } from 'react';\nimport useWindowSize from './useWindowSize';\nimport { Breakpoint } from '../constants';\n\n/\n The breakpoints of responsive grid follow Google chrome media queries rules\n*/\nconst getBreakpoint = ({ width: screen }) => {\n let breakpoint = '';\n\n if (screen <= 320) {\n breakpoint = Breakpoint.xs;\n }\n if (screen >= 375) {\n breakpoint = Breakpoint.sm;\n }\n if (screen >= 768) {\n breakpoint = Breakpoint.md;\n }\n if (screen >= 992) {\n breakpoint = Breakpoint.lg;\n }\n if (screen >= 1200) {\n breakpoint = Breakpoint.xl;\n }\n if (screen >= 1600) {\n breakpoint = Breakpoint.xxl;\n }\n\n return breakpoint;\n};\n\nfunction useGridSize() {\n const windowSize = useWindowSize();\n const [layout, setLayout] = useState(Breakpoint.md);\n\n useEffect(() => {\n setLayout(getBreakpoint(windowSize));\n }, [windowSize]);\n return layout;\n}\n\nexport default useGridSize;\n"],"names":["CartDrawerContainer","styled","div","props","maxWidth","fontFamily","CartDrawerBar","CartDrawerProductContainer","opacity","CartDrawerBottomSection","CartDrawerOutlinedButton","button","color","CartDrawerFilledButton","CartDrawerEmptyCart","CartDrawerProduct","CartDrawerQtBox","CartDrawerLoader","CartDrawerProductCard","product","handleIncrementDecrement","handleRemoveProduct","handleRedirect","imgnotfoundUrl","loading","imgnotfoundUrlcommon","imageUrl","productName","standardPrice","cartStandardPrice","toFixed","quantity","CartDrawer","cartData","handleClose","totalCartQuantity","cartLineItemDtoList","map","i","totalCartPrice","CartPageContainer","retail","CardsBox","CartSummaryContainer","background","CartSummaryRow","justify","h5","CartSummaryHr","span","CartSummaryInputBox","form","paddingBottom","btn","CartSummaryCheckoutBtn","CartSummaryCheckBoxRow","selected","CartSummary","shippingData","selectedShipping","setShipping","clickRedirect","subtotal","styles","console","log","bg","hr","width","li","id","name","amount","input","btnColor","CartPageCard","CartPageImg","img","height","NameAndQtBox","CartPageCardName","QtAndPriceBox","CartPageQtBox","CloseBtn","CartPageProductCard","item","imgSize","CartPageComponent","cartSummary","Breakpoint","xs","sm","md","lg","xl","xxl","Variant","ONE","TWO","THREE","debounce","func","wait","immediate","timeout","args","clearTimeout","setTimeout","apply","useWindowSize","isWindow","window","useState","innerWidth","innerHeight","windowSize","setWindowSize","useEffect","onWindowResize","onResize","addEventListener","removeEventListener","getBreakpoint","screen","breakpoint","useGridSize","layout","setLayout"],"mappings":"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"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@salesgenterp/ui-components",
-  "version": "0.2.21",
+  "version": "0.3.05",
   "description": "Made with create-react-library",
   "author": "",
   "license": "MIT",
@@ -42,7 +42,8 @@
     "styled-components": "^5.3.5"
   },
   "dependencies": {
-    "react-spinners": "^0.13.4"
+    "react-spinners": "^0.13.4",
+    "storybook-addon-state": "^1.0.3"
   },
   "devDependencies": {
     "@babel/core": "^7.12.10",