@salesgenterp/ui-components 0.4.353 → 0.4.355

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
  1. package/dist/index.js +410 -323
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.modern.js +411 -324
  4. package/dist/index.modern.js.map +1 -1
  5. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -492,8 +492,8 @@ var API$1 = function API(apiData) {
492
492
  return _temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp);
493
493
  }, function (exception) {
494
494
  var _exit = false;
495
- function _temp4(_result3) {
496
- return _exit ? _result3 : function () {
495
+ function _temp4(_result4) {
496
+ return _exit ? _result4 : function () {
497
497
  if (axios.isCancel(exception)) {} else {
498
498
  return Promise.resolve(handleError({
499
499
  exception: exception,
@@ -507,21 +507,23 @@ var API$1 = function API(apiData) {
507
507
  var exceptionResponse = exception.response;
508
508
  var _temp3 = function () {
509
509
  if (exceptionResponse.data.hasError) {
510
- if (url != '/employee') {
511
- alert(exceptionResponse.data.error.message);
512
- }
513
510
  return function () {
514
- if (exceptionResponse.data.exception) {
515
- return Promise.resolve(handleError({
516
- exception: exception,
517
- apiEndPoint: apiEndPoint,
518
- url: url,
519
- apiData: apiData,
520
- hideErrorMessage: true
521
- })).then(function (_await$handleError) {
522
- _exit = true;
523
- return _await$handleError;
524
- });
511
+ if (!hideErrorMessage) {
512
+ alert(exceptionResponse.data.error.message);
513
+ return function () {
514
+ if (exceptionResponse.data.exception) {
515
+ return Promise.resolve(handleError({
516
+ exception: exception,
517
+ apiEndPoint: apiEndPoint,
518
+ url: url,
519
+ apiData: apiData,
520
+ hideErrorMessage: true
521
+ })).then(function (_await$handleError) {
522
+ _exit = true;
523
+ return _await$handleError;
524
+ });
525
+ }
526
+ }();
525
527
  }
526
528
  }();
527
529
  }
@@ -580,7 +582,7 @@ var handleError = function handleError(_ref6) {
580
582
  throwException = _apiData$throwExcepti === void 0 ? true : _apiData$throwExcepti,
581
583
  errorMessage = apiData.errorMessage,
582
584
  showAPIError = apiData.showAPIError;
583
- if (exception.response && (exception.response.status === 401 || exception.response.status === 403) && url !== '/employee' && url !== '/authenticate' && url !== '/refreshToken') {
585
+ if (exception.response && (exception.response.status === 401 || exception.response.status === 403) && url !== '/authenticate' && url !== '/refreshToken') {
584
586
  try {} catch (e) {
585
587
  alert(e);
586
588
  if (throwException) {
@@ -2678,7 +2680,8 @@ var Dashboard = function Dashboard(_ref) {
2678
2680
  return Promise.resolve(API$1({
2679
2681
  url: "/ecommerce/customer",
2680
2682
  apiEndPoint: apiEndPoint,
2681
- token: token
2683
+ token: token,
2684
+ hideErrorMessage: true
2682
2685
  })).then(function (customerDataResponse) {
2683
2686
  setCustomerData(customerDataResponse);
2684
2687
  return Promise.resolve(API$1({
@@ -5207,170 +5210,130 @@ var CartDrawerEmptyCart = styled__default.div(_templateObject7$3 || (_templateOb
5207
5210
  return props.color || 'red';
5208
5211
  });
5209
5212
 
5210
- var _templateObject$s, _templateObject2$i, _templateObject3$c;
5211
- var CartDrawerProduct = styled__default.div(_templateObject$s || (_templateObject$s = _taggedTemplateLiteralLoose(["\n width: 100%;\n display: flex;\n flex-direction: row;\n height: 100px;\n justify-content: space-around;\n align-items: center;\n overflow: hidden;\n margin-bottom: 2rem;\n user-select: none;\n\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 width: 100%;\n word-wrap: break-word;\n overflow: hidden;\n text-overflow: ellipsis;\n transition: 0.3s;\n cursor: pointer;\n &:hover {\n color: ", ";\n }\n }\n }\n .endSection {\n width: 20%;\n height: 95%;\n .icon {\n cursor: pointer;\n transition: 0.4s;\n &:hover {\n color: red;\n /* opacity: 0.7; */\n }\n }\n }\n @media only screen and (max-width: 768px) {\n .closeIcon {\n font-size: 1rem;\n }\n height: 80px;\n .middleSection {\n .name {\n max-height: 2.4rem;\n height: 2.4rem;\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"])), function (props) {
5212
- return props.color || 'grey';
5213
- });
5214
- var CartDrawerQtBox = styled__default.div(_templateObject2$i || (_templateObject2$i = _taggedTemplateLiteralLoose(["\n height: 34px;\n width: 82px;\n border: 1px solid rgb(211, 210, 210);\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 13.5px;\n color: #333;\n padding: 0 0.5rem;\n border-radius: 5px;\n max-width: 100%;\n\n span {\n cursor: pointer;\n height: 100%;\n display: grid;\n place-items: center;\n }\n .qt {\n font-size: 12px;\n color: black;\n font-weight: 500;\n cursor: auto;\n }\n @media only screen and (max-width: 600px) {\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"])));
5215
- var CartDrawerLoader = styled__default.div(_templateObject3$c || (_templateObject3$c = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 30%;\n width: 100px;\n height: 100px;\n display: grid;\n place-items: center;\n"])));
5216
-
5217
- var CartDrawerProductCard = function CartDrawerProductCard(_ref) {
5218
- var product = _ref.product,
5219
- color = _ref.color,
5220
- handleIncrementDecrement = _ref.handleIncrementDecrement,
5221
- handleRemoveProduct = _ref.handleRemoveProduct,
5222
- handleRedirect = _ref.handleRedirect,
5223
- imgnotfoundUrl = _ref.imgnotfoundUrl,
5224
- loading = _ref.loading;
5225
- var imgnotfoundUrlcommon = noImgAvailable$1;
5226
- if (imgnotfoundUrl && imgnotfoundUrl !== 'null') imgnotfoundUrlcommon = imgnotfoundUrl;
5227
- return /*#__PURE__*/React__default.createElement(CartDrawerProduct, {
5228
- color: color
5229
- }, /*#__PURE__*/React__default.createElement("img", {
5230
- src: product.imageUrl && product.imageUrl !== 'null' ? product.imageUrl : imgnotfoundUrlcommon,
5231
- alt: 'no product image available'
5232
- }), /*#__PURE__*/React__default.createElement(material.Stack, {
5233
- flexDirection: "column",
5234
- justifyContent: "space-between",
5235
- alignItems: "flex-start",
5236
- className: "middleSection"
5237
- }, /*#__PURE__*/React__default.createElement(material.Tooltip, {
5238
- title: product === null || product === void 0 ? void 0 : product.productName,
5239
- placement: "top",
5240
- arrow: true
5241
- }, /*#__PURE__*/React__default.createElement("h6", {
5242
- className: "name",
5243
- onClick: function onClick() {
5244
- return handleRedirect(product);
5245
- }
5246
- }, product === null || product === void 0 ? void 0 : product.productName)), /*#__PURE__*/React__default.createElement("h6", null, (product === null || product === void 0 ? void 0 : product.standardPrice) === (product === null || product === void 0 ? void 0 : product.cartStandardPrice) ? "$" + (product === null || product === void 0 ? void 0 : product.standardPrice) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, (product === null || product === void 0 ? void 0 : product.cartStandardPrice) && /*#__PURE__*/React__default.createElement("span", null, renderMoney(product === null || product === void 0 ? void 0 : product.cartStandardPrice)), renderMoney(product === null || product === void 0 ? void 0 : product.standardPrice)))), /*#__PURE__*/React__default.createElement(material.Stack, {
5247
- flexDirection: "column",
5248
- justifyContent: "space-between",
5249
- alignItems: "flex-end",
5250
- className: "endSection"
5251
- }, /*#__PURE__*/React__default.createElement(ri.RiDeleteBin5Line, {
5252
- className: "icon",
5253
- onClick: function onClick() {
5254
- if (loading) return;
5255
- var sure = confirm('Are you sure you want to remove this item from cart');
5256
- if (!sure) return;
5257
- handleRemoveProduct(product);
5258
- }
5259
- }), /*#__PURE__*/React__default.createElement(CartDrawerQtBox, null, /*#__PURE__*/React__default.createElement("span", {
5260
- onClick: function onClick() {
5261
- if (loading) return;
5262
- handleIncrementDecrement('decrement', _extends({}, product, {
5263
- quantity: (product === null || product === void 0 ? void 0 : product.quantity) > (product === null || product === void 0 ? void 0 : product.availableQuantity) ? product === null || product === void 0 ? void 0 : product.availableQuantity : product === null || product === void 0 ? void 0 : product.quantity
5264
- }));
5265
- }
5266
- }, ' ', /*#__PURE__*/React__default.createElement(ai.AiOutlineMinus, null)), ' ', /*#__PURE__*/React__default.createElement("span", {
5267
- className: 'qt'
5268
- }, product === null || product === void 0 ? void 0 : product.quantity), /*#__PURE__*/React__default.createElement("span", {
5269
- onClick: function onClick() {
5270
- if (loading) return;
5271
- handleIncrementDecrement('increment', _extends({}, product, product, {
5272
- quantity: (product === null || product === void 0 ? void 0 : product.quantity) > (product === null || product === void 0 ? void 0 : product.availableQuantity) ? product === null || product === void 0 ? void 0 : product.availableQuantity : product === null || product === void 0 ? void 0 : product.quantity
5273
- }));
5213
+ function debounce(func, wait, immediate) {
5214
+ var timeout;
5215
+ return function () {
5216
+ var _this = this;
5217
+ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
5218
+ args[_key] = arguments[_key];
5274
5219
  }
5275
- }, /*#__PURE__*/React__default.createElement(ai.AiOutlinePlus, null)))));
5276
- };
5220
+ clearTimeout(timeout);
5221
+ timeout = setTimeout(function () {
5222
+ timeout = null;
5223
+ if (!immediate) func.apply(_this, args);
5224
+ }, wait);
5225
+ if (immediate && !timeout) func.apply(this, [].concat(args));
5226
+ };
5227
+ }
5277
5228
 
5278
- var CartDrawer = function CartDrawer(_ref) {
5279
- var _cartData$cartLineIte, _cartData$totalCartPr;
5280
- var cartData = _ref.cartData,
5281
- maxWidth = _ref.maxWidth,
5282
- color = _ref.color,
5283
- handleRedirect = _ref.handleRedirect,
5284
- handleIncrementDecrement = _ref.handleIncrementDecrement,
5285
- handleRemoveProduct = _ref.handleRemoveProduct,
5286
- handleClose = _ref.handleClose,
5287
- loading = _ref.loading,
5288
- imgnotfoundUrl = _ref.imgnotfoundUrl;
5289
- return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(CartDrawerContainer, {
5290
- className: "cartDrawer-container",
5291
- maxWidth: maxWidth
5292
- }, /*#__PURE__*/React__default.createElement(CartDrawerBar, null, /*#__PURE__*/React__default.createElement("h2", null, "Your Cart"), /*#__PURE__*/React__default.createElement(gr.GrClose, {
5293
- className: "icon",
5294
- onClick: function onClick() {
5295
- handleClose();
5296
- }
5297
- })), /*#__PURE__*/React__default.createElement(material.Box, null, cartData && (cartData === null || cartData === void 0 ? void 0 : cartData.totalCartQuantity) > 0 ? /*#__PURE__*/React__default.createElement(CartDrawerProductContainer, {
5298
- opacity: loading ? '.4' : '1'
5299
- }, cartData === null || cartData === void 0 ? void 0 : (_cartData$cartLineIte = cartData.cartLineItemDtoList) === null || _cartData$cartLineIte === void 0 ? void 0 : _cartData$cartLineIte.map(function (product, i) {
5300
- return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, loading && /*#__PURE__*/React__default.createElement(CartDrawerLoader, null, /*#__PURE__*/React__default.createElement(reactSpinners.PuffLoader, {
5301
- color: "black"
5302
- })), /*#__PURE__*/React__default.createElement(CartDrawerProductCard, {
5303
- product: product,
5304
- handleRedirect: handleRedirect,
5305
- handleIncrementDecrement: handleIncrementDecrement,
5306
- handleRemoveProduct: handleRemoveProduct,
5307
- color: color,
5308
- key: i,
5309
- imgnotfoundUrl: imgnotfoundUrl,
5310
- loading: loading
5311
- }));
5312
- })) : /*#__PURE__*/React__default.createElement(CartDrawerEmptyCart, {
5313
- color: color
5314
- }, /*#__PURE__*/React__default.createElement(bs.BsCartX, {
5315
- className: "icon"
5316
- }), /*#__PURE__*/React__default.createElement("h6", null, "Oops!"), /*#__PURE__*/React__default.createElement("p", null, "your cart is empty"))), cartData && (cartData === null || cartData === void 0 ? void 0 : cartData.totalCartQuantity) > 0 && /*#__PURE__*/React__default.createElement(CartDrawerBottomSection, null, /*#__PURE__*/React__default.createElement(material.Stack, {
5317
- flexDirection: "row",
5318
- justifyContent: "space-between",
5319
- alignItems: "center",
5320
- className: "row"
5321
- }, /*#__PURE__*/React__default.createElement("h5", null, "Subtotal", /*#__PURE__*/React__default.createElement("span", null, "(", cartData === null || cartData === void 0 ? void 0 : cartData.totalCartQuantity, " items)")), /*#__PURE__*/React__default.createElement("h5", null, "$", cartData === null || cartData === void 0 ? void 0 : (_cartData$totalCartPr = cartData.totalCartPrice) === null || _cartData$totalCartPr === void 0 ? void 0 : _cartData$totalCartPr.toFixed(2))), /*#__PURE__*/React__default.createElement(CartDrawerOutlinedButton, {
5322
- color: color,
5323
- onClick: function onClick() {
5324
- return handleRedirect('cart');
5325
- }
5326
- }, "view cart"), /*#__PURE__*/React__default.createElement(CartDrawerFilledButton, {
5327
- color: color,
5328
- onClick: function onClick() {
5329
- return handleRedirect('checkout');
5330
- }
5331
- }, "continue to checkout"))));
5229
+ function useWindowSize() {
5230
+ var isWindow = typeof window !== 'undefined';
5231
+ var _useState = React.useState({
5232
+ width: isWindow ? window.innerWidth : 1200,
5233
+ height: isWindow ? window.innerHeight : 800
5234
+ }),
5235
+ windowSize = _useState[0],
5236
+ setWindowSize = _useState[1];
5237
+ React.useEffect(function () {
5238
+ var onWindowResize = function onWindowResize() {
5239
+ setWindowSize({
5240
+ width: window.innerWidth,
5241
+ height: window.innerHeight
5242
+ });
5243
+ };
5244
+ var onResize = debounce(onWindowResize, 100);
5245
+ window.addEventListener('resize', onResize);
5246
+ onWindowResize();
5247
+ return function () {
5248
+ window.removeEventListener('resize', onResize);
5249
+ };
5250
+ }, []);
5251
+ return windowSize;
5252
+ }
5253
+
5254
+ var Breakpoint = function Breakpoint() {};
5255
+ Breakpoint.xs = 'xs';
5256
+ Breakpoint.sm = 'sm';
5257
+ Breakpoint.md = 'md';
5258
+ Breakpoint.lg = 'lg';
5259
+ Breakpoint.xl = 'xl';
5260
+ Breakpoint.xxl = 'xxl';
5261
+
5262
+ var Variant = function Variant() {};
5263
+ Variant.ONE = 'one';
5264
+ Variant.TWO = 'two';
5265
+ Variant.THREE = 'three';
5266
+
5267
+ var getBreakpoint = function getBreakpoint(_ref) {
5268
+ var screen = _ref.width;
5269
+ var breakpoint = '';
5270
+ if (screen <= 320) {
5271
+ breakpoint = Breakpoint.xs;
5272
+ }
5273
+ if (screen >= 375) {
5274
+ breakpoint = Breakpoint.sm;
5275
+ }
5276
+ if (screen >= 768) {
5277
+ breakpoint = Breakpoint.md;
5278
+ }
5279
+ if (screen >= 992) {
5280
+ breakpoint = Breakpoint.lg;
5281
+ }
5282
+ if (screen >= 1200) {
5283
+ breakpoint = Breakpoint.xl;
5284
+ }
5285
+ if (screen >= 1600) {
5286
+ breakpoint = Breakpoint.xxl;
5287
+ }
5288
+ return breakpoint;
5332
5289
  };
5290
+ function useGridSize() {
5291
+ var windowSize = useWindowSize();
5292
+ var _useState = React.useState(Breakpoint.md),
5293
+ layout = _useState[0],
5294
+ setLayout = _useState[1];
5295
+ React.useEffect(function () {
5296
+ setLayout(getBreakpoint(windowSize));
5297
+ }, [windowSize]);
5298
+ return layout;
5299
+ }
5333
5300
 
5334
- var _templateObject$t, _templateObject2$j, _templateObject3$d, _templateObject4$9, _templateObject5$7, _templateObject6$5, _templateObject7$4, _templateObject8$3, _templateObject9$3;
5335
- var CartPageSection = styled__default.section(_templateObject$t || (_templateObject$t = _taggedTemplateLiteralLoose(["\n background: ", ";\n max-width: 100%;\n width: fit-content;\n background: ", ";\n overflow: hidden;\n border-radius: 28px;\n max-width: 1600px;\n width: min(1600px, 100%);\n margin: auto;\n @media screen and (max-width: 1200px) {\n padding: 0 1em;\n }\n @media screen and (max-width: 600px) {\n padding: 0 1em;\n }\n"])), function (props) {
5301
+ var _templateObject$s, _templateObject2$i, _templateObject3$c, _templateObject4$9, _templateObject5$7, _templateObject6$5, _templateObject7$4, _templateObject8$3, _templateObject9$3;
5302
+ var CartPageSection = styled__default.section(_templateObject$s || (_templateObject$s = _taggedTemplateLiteralLoose(["\n background: ", ";\n max-width: 100%;\n width: fit-content;\n background: ", ";\n overflow: hidden;\n border-radius: 28px;\n max-width: 1600px;\n width: min(1600px, 100%);\n margin: auto;\n @media screen and (max-width: 1200px) {\n padding: 0 1em;\n }\n @media screen and (max-width: 600px) {\n padding: 0 1em;\n }\n"])), function (props) {
5336
5303
  return props.bg;
5337
5304
  }, function (props) {
5338
5305
  return props.bg || '#FAE8E5';
5339
5306
  });
5340
- var CartPageContainer = styled__default.div(_templateObject2$j || (_templateObject2$j = _taggedTemplateLiteralLoose(["\n max-width: ", ";\n width: ", ";\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: flex-start;\n border-radius: 28px 28px 28px 14px;\n padding: 2em 2.5em;\n padding-bottom: 3em;\n border-radius: 28px;\n opacity: ", ";\n .scrollDiv {\n width: 68%;\n height: 630px;\n max-height: 630px;\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n\n margin-right: 0.3em;\n &::-webkit-scrollbar {\n width: ", ";\n }\n\n /* Track */\n &::-webkit-scrollbar-track {\n background: ", ";\n\n border-radius: 16px;\n }\n\n /* Handle */\n &::-webkit-scrollbar-thumb {\n background: ", ";\n border-radius: 16px;\n }\n /* box-shadow: 0px 20px 35px rgba(0, 0, 0, 0.05); */\n }\n table {\n border-collapse: separate;\n border-spacing: 0 4px;\n row-gap: 4px;\n }\n\n td {\n /* border: solid 1px #000; */\n border-style: none solid solid none;\n /* padding: 10px; */\n /* margin-bottom:5px; */\n }\n\n tr:first-child td:first-child {\n border-top-left-radius: 10px;\n }\n tr td:last-child {\n border-top-right-radius: 10px;\n border-bottom-right-radius: 10px;\n }\n\n tr td:first-child {\n border-bottom-left-radius: 10px;\n border-top-left-radius: 10px;\n }\n tr td:last-child {\n border-bottom-right-radius: 10px;\n }\n\n tr td {\n border-top-style: solid;\n }\n tr td:first-child {\n border-left-style: solid;\n }\n\n @media only screen and (max-width: 1200px) {\n flex-direction: column;\n align-items: center;\n padding: 0.5rem;\n .scrollDiv {\n width: 100%;\n margin: 0;\n margin-bottom: 2em;\n padding: 0 0.4em;\n }\n }\n"])), function (props) {
5307
+ var CartPageContainer = styled__default.div(_templateObject2$i || (_templateObject2$i = _taggedTemplateLiteralLoose(["\n max-width: ", ";\n width: ", ";\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: flex-start;\n border-radius: 28px 28px 28px 14px;\n padding: 1rem;\n padding-bottom: 2em;\n border-radius: 12px;\n opacity: ", ";\n .scrollDiv {\n width: 68%;\n height: 630px;\n max-height: 630px;\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n margin-right: 0.3em;\n &::-webkit-scrollbar {\n width: 10px;\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 }\n /* box-shadow: 0px 20px 35px rgba(0, 0, 0, 0.05); */\n }\n table {\n border-collapse: separate;\n border-spacing: 0 4px;\n row-gap: 4px;\n }\n\n td {\n /* border: solid 1px #000; */\n border-style: none solid solid none;\n /* padding: 10px; */\n /* margin-bottom:5px; */\n }\n\n tr:first-child td:first-child {\n border-top-left-radius: 10px;\n }\n tr td:last-child {\n border-top-right-radius: 10px;\n border-bottom-right-radius: 10px;\n }\n\n tr td:first-child {\n border-bottom-left-radius: 10px;\n border-top-left-radius: 10px;\n }\n tr td:last-child {\n border-bottom-right-radius: 10px;\n }\n\n tr td {\n border-top-style: solid;\n }\n tr td:first-child {\n border-left-style: solid;\n }\n\n @media only screen and (max-width: 1200px) {\n flex-direction: column;\n align-items: center;\n padding: 1rem 0;\n .scrollDiv {\n width: 100%;\n margin: 0;\n margin-bottom: 2em;\n // padding: 0 0.4em;\n }\n }\n"])), function (props) {
5341
5308
  return props.maxWidth || '1600px';
5342
5309
  }, function (props) {
5343
5310
  return "min(" + (props.maxWidth || '1600px') + ",100%)";
5344
5311
  }, function (props) {
5345
5312
  return props.loading ? '0.7' : 1;
5346
5313
  }, function (props) {
5347
- return props.retail ? '12px' : '10px';
5314
+ var _props$scroll;
5315
+ return (props === null || props === void 0 ? void 0 : (_props$scroll = props.scroll) === null || _props$scroll === void 0 ? void 0 : _props$scroll.bg) || 'rgba(102, 112, 128, 0.5)';
5348
5316
  }, function (props) {
5349
- return props.ScrollBg || 'rgba(102, 112, 128, 0.5)';
5350
- }, function (props) {
5351
- return props.color || '#BFC3CA';
5317
+ var _props$scroll2;
5318
+ return (props === null || props === void 0 ? void 0 : (_props$scroll2 = props.scroll) === null || _props$scroll2 === void 0 ? void 0 : _props$scroll2.color) || '#BFC3CA';
5352
5319
  });
5353
- var CardsBox = styled__default.div(_templateObject3$d || (_templateObject3$d = _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: 900px) {\n display: flex;\n }\n @media only screen and (max-width: 600px) {\n padding: 1em 0.2em;\n }\n"])), function (props) {
5320
+ var CardsBox = styled__default.div(_templateObject3$c || (_templateObject3$c = _taggedTemplateLiteralLoose(["\n width: 100%;\n /* min-height: 1000px; */\n position: relative;\n margin-right: auto;\n padding: 1em;\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: 12px;\n @media only screen and (max-width: 900px) {\n display: flex;\n }\n @media only screen and (max-width: 768px) {\n padding: 0;\n }\n"])), function (props) {
5354
5321
  return props.retail ? 'grid' : 'flex';
5355
5322
  });
5356
- var CartHeading = styled__default.div(_templateObject4$9 || (_templateObject4$9 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n /* margin-bottom: 2em; */\n margin-left: 2.3em;\n margin-top: 2em;\n\n color: ", ";\n h1 {\n font-weight: 600;\n font-size: 2.0375em;\n text-transform: capitalize;\n color: ", ";\n /* margin-bottom: 1em; */\n }\n p {\n font-size: 0.875em;\n color: inherit;\n margin-top: 0.5em;\n }\n"])), function (props) {
5323
+ var CartHeading = styled__default.div(_templateObject4$9 || (_templateObject4$9 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n /* margin-bottom: 2em; */\n margin-left: 1em;\n margin-top: 2em;\n @media only screen and (max-width: 768px) {\n margin-left: 1em;\n }\n\n color: ", ";\n h1 {\n font-weight: 600;\n font-size: 2em;\n text-transform: capitalize;\n color: ", ";\n /* margin-bottom: 1em; */\n }\n p {\n font-size: 0.875em;\n color: inherit;\n margin-top: 0.5em;\n }\n"])), function (props) {
5357
5324
  return props.color || 'black';
5358
5325
  }, function (props) {
5359
5326
  return props.h1 || 'inherit';
5360
5327
  });
5361
5328
  var Loader$1 = styled__default.div(_templateObject5$7 || (_templateObject5$7 = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 40%;\n left: 47%;\n display: grid;\n place-items: center;\n z-index: 3;\n"])));
5362
- var CartTableCell = styled__default(material.TableCell)(_templateObject6$5 || (_templateObject6$5 = _taggedTemplateLiteralLoose(["\n && {\n padding-bottom: 1em !important;\n // border: none !important;\n /* font-size: 0.75em; */\n font-size: 1em;\n color: rgba(98, 95, 95, 1);\n // background: ", ";\n color: ", ";\n }\n &.bg-transparent {\n // background-color: transparent !important;\n text-transform: uppercase;\n z-index: 3 !important;\n span {\n font-size: 0.75em;\n font-weight: 600;\n }\n svg {\n color: ", ";\n }\n .MuiTableSortLabel-root {\n color: ", "!important;\n }\n }\n"])), function (props) {
5363
- return "" + props.bg;
5364
- }, function (props) {
5329
+ var CartTableCell = styled__default(material.TableCell)(_templateObject6$5 || (_templateObject6$5 = _taggedTemplateLiteralLoose(["\n && {\n padding-bottom: 1em !important;\n // border: none !important;\n /* font-size: 0.75em; */\n font-size: 1em;\n color: rgba(98, 95, 95, 1);\n color: ", ";\n }\n &.bg-transparent {\n // background-color: transparent !important;\n text-transform: uppercase;\n z-index: 3 !important;\n span {\n font-size: 0.75em;\n font-weight: 600;\n }\n svg {\n color: ", ";\n }\n .MuiTableSortLabel-root {\n color: ", "!important;\n }\n }\n"])), function (props) {
5365
5330
  return "" + props.color || 'inherit';
5366
5331
  }, function (props) {
5367
5332
  return "" + props.color || 'inherit';
5368
5333
  }, function (props) {
5369
5334
  return "" + props.color || 'inherit';
5370
5335
  });
5371
- var CartTableContainer = styled__default(material.TableContainer)(_templateObject7$4 || (_templateObject7$4 = _taggedTemplateLiteralLoose(["\n max-height: 580px;\n min-height: 440px;\n padding-right: 1rem;\n\n &::-webkit-scrollbar {\n width: ", ";\n }\n\n /* Track */\n &::-webkit-scrollbar-track {\n background: ", ";\n border-radius: 16px;\n width: 100%;\n }\n\n /* Handle */\n &::-webkit-scrollbar-thumb {\n border-radius: 16px;\n margin: 5px 2px;\n background: ", ";\n }\n @media screen and (max-width: 768px) {\n padding: 0;\n }\n"])), function (props) {
5372
- return props.retail ? '12px' : '10px';
5373
- }, function (props) {
5336
+ var CartTableContainer = styled__default(material.TableContainer)(_templateObject7$4 || (_templateObject7$4 = _taggedTemplateLiteralLoose(["\n max-height: 580px;\n min-height: 440px;\n padding-right: 1rem;\n\n &::-webkit-scrollbar {\n width: 10px;\n }\n\n /* Track */\n &::-webkit-scrollbar-track {\n background: ", ";\n border-radius: 16px;\n width: 100%;\n }\n\n /* Handle */\n &::-webkit-scrollbar-thumb {\n border-radius: 16px;\n margin: 5px 2px;\n background: ", ";\n }\n @media screen and (max-width: 768px) {\n padding: 0;\n }\n"])), function (props) {
5374
5337
  return 'rgba(102, 112, 128, 0.5)';
5375
5338
  }, function (props) {
5376
5339
  return props.color;
@@ -6481,16 +6444,12 @@ if (process.env.NODE_ENV !== 'production') {
6481
6444
  }
6482
6445
  });
6483
6446
 
6484
- var _templateObject$u, _templateObject2$k, _templateObject3$e, _templateObject4$a, _templateObject5$8, _templateObject6$6;
6485
- var ProductImage = styled__default.img(_templateObject$u || (_templateObject$u = _taggedTemplateLiteralLoose(["\n min-width: 50px;\n min-height: 50px;\n object-fit: contain;\n @media only screen and (max-width: 600px) {\n margin: 0.5em 0;\n padding-right: 0.5em;\n }\n"])));
6486
- var ProductName = styled__default.h6(_templateObject2$k || (_templateObject2$k = _taggedTemplateLiteralLoose(["\n font-size: ", ";\n padding: 0;\n line-height: 1.3em;\n max-height: ", ";\n height: ", ";\n overflow: hidden;\n text-overflow: ellipsis;\n height: fit-content;\n"])), function (props) {
6447
+ var _templateObject$t, _templateObject2$j, _templateObject3$d, _templateObject4$a, _templateObject5$8, _templateObject6$6;
6448
+ var ProductImage = styled__default.img(_templateObject$t || (_templateObject$t = _taggedTemplateLiteralLoose(["\n min-width: 50px;\n min-height: 50px;\n object-fit: contain;\n @media only screen and (max-width: 600px) {\n margin: 0.5em 0;\n padding-right: 0.5em;\n }\n"])));
6449
+ var ProductName = styled__default.h6(_templateObject2$j || (_templateObject2$j = _taggedTemplateLiteralLoose(["\n font-size: ", ";\n padding: 0;\n line-height: 1.3em;\n overflow: hidden;\n text-overflow: ellipsis;\n height: fit-content;\n"])), function (props) {
6487
6450
  return props.size || '1em';
6488
- }, function (props) {
6489
- return props.maxHeight ? props.maxHeight + "em" : '2.75em';
6490
- }, function (props) {
6491
- return props.maxHeight ? props.maxHeight + "em" : '2.80em';
6492
6451
  });
6493
- var CartTableRow = styled__default(material.TableRow)(_templateObject3$e || (_templateObject3$e = _taggedTemplateLiteralLoose(["\n position: relative;\n transition: 0.3s;\n background: white;\n /* &:hover {\n td:first-child,\n td:last-child {\n border-left-style: solid;\n border-top-style: solid;\n border-top-right-radius: 10px;\n }\n } */\n .outOfStock {\n font-size: 0.75em;\n color: red;\n text-transform: uppercase;\n font-weight: 500;\n }\n .price {\n font-size: ", ";\n font-weight: bold;\n color: #323232;\n /* font-size: 1.15em; */\n }\n .borderLeft {\n height: 100%;\n background: ", ";\n transition: 0.2s;\n width: 0px;\n position: absolute;\n left: 0;\n top: 0;\n border-top-left-radius: 10px;\n display: none;\n border-bottom-left-radius: 10px;\n }\n .cartCheckBox {\n &.Mui-checked {\n svg {\n color: ", ";\n }\n }\n }\n &:hover {\n background: white !important;\n box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);\n border-radius: 10px;\n /* opacity: 1;\n box-shadow: 1px 2px 6px 2px rgba(0, 0, 0, 0.2); */\n z-index: 2;\n /* border-radius: 20px; */\n .borderLeft {\n width: 12px;\n display: inline-block;\n }\n }\n @media only screen and (max-width: 600px) {\n .CartnoPaddingSm {\n padding: 0 !important;\n }\n .price {\n font-size: 0.8em;\n }\n margin: 0.5em 0;\n .cartCheckBox {\n .css-i4bv87-MuiSvgIcon-root {\n font-size: 10px !important;\n }\n }\n }\n"])), function (props) {
6452
+ var CartTableRow = styled__default(material.TableRow)(_templateObject3$d || (_templateObject3$d = _taggedTemplateLiteralLoose(["\n position: relative;\n transition: 0.3s;\n background: white;\n /* &:hover {\n td:first-child,\n td:last-child {\n border-left-style: solid;\n border-top-style: solid;\n border-top-right-radius: 10px;\n }\n } */\n .outOfStock {\n font-size: 0.75em;\n color: red;\n text-transform: uppercase;\n font-weight: 500;\n }\n .price {\n font-size: ", ";\n font-weight: bold;\n color: #323232;\n /* font-size: 1.15em; */\n }\n .borderLeft {\n height: 100%;\n background: ", ";\n transition: 0.2s;\n width: 0px;\n position: absolute;\n left: 0;\n top: 0;\n border-top-left-radius: 10px;\n display: none;\n border-bottom-left-radius: 10px;\n }\n .cartCheckBox {\n &.Mui-checked {\n svg {\n color: ", ";\n }\n }\n }\n &:hover {\n background: white !important;\n box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);\n border-radius: 10px;\n /* opacity: 1;\n box-shadow: 1px 2px 6px 2px rgba(0, 0, 0, 0.2); */\n z-index: 2;\n /* border-radius: 20px; */\n .borderLeft {\n width: 12px;\n display: inline-block;\n }\n }\n @media only screen and (max-width: 600px) {\n .CartnoPaddingSm {\n padding: 0 !important;\n }\n .price {\n font-size: 0.8em;\n }\n margin: 0.5em 0;\n .cartCheckBox {\n .css-i4bv87-MuiSvgIcon-root {\n font-size: 10px !important;\n }\n }\n }\n"])), function (props) {
6494
6453
  return props.size || '1.19em';
6495
6454
  }, function (prop) {
6496
6455
  return prop.bg;
@@ -6498,7 +6457,7 @@ var CartTableRow = styled__default(material.TableRow)(_templateObject3$e || (_te
6498
6457
  return prop.bg;
6499
6458
  });
6500
6459
  var CartTableCell$1 = styled__default(material.TableCell)(_templateObject4$a || (_templateObject4$a = _taggedTemplateLiteralLoose(["\n && {\n border: none !important;\n font-size: 1em;\n }\n"])));
6501
- var QuantityBox = styled__default.div(_templateObject5$8 || (_templateObject5$8 = _taggedTemplateLiteralLoose(["\n height: 1.7em;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n div {\n /* width:30px; */\n min-height: 100%;\n aspect-ratio: 1.15/1;\n display: grid;\n place-items: center;\n font-size: 0.65em;\n color: white;\n background-color: #323232;\n cursor: pointer;\n }\n .price {\n background: transparent;\n cursor: auto;\n background: #ffffff;\n border: 1px solid #ebebeb;\n p {\n color: #5e5c5c;\n font-size: 0.685em;\n font-weight: 500;\n }\n }\n .add {\n background-color: #ebebeb;\n color: #323232;\n }\n"])));
6460
+ var QuantityBox = styled__default.div(_templateObject5$8 || (_templateObject5$8 = _taggedTemplateLiteralLoose(["\n height: 1.7em;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n div {\n /* width:30px; */\n min-height: 100%;\n aspect-ratio: 1.15/1;\n display: grid;\n place-items: center;\n font-size: 0.65em;\n color: white;\n background-color: #323232;\n cursor: pointer;\n }\n .price {\n background: transparent;\n cursor: auto;\n background: #ffffff;\n border: 1px solid #ebebeb;\n input {\n width: 40px;\n height: 100%;\n text-align: center;\n border: none;\n }\n }\n .add {\n background-color: #ebebeb;\n color: #323232;\n }\n"])));
6502
6461
  var DeleteBtn = styled__default.div(_templateObject6$6 || (_templateObject6$6 = _taggedTemplateLiteralLoose(["\n display: grid;\n place-items: center;\n cursor: pointer;\n border-radius: 50%;\n width: 20px;\n height: 20px;\n background: #eef1f4;\n color: #393f48;\n font-size: 0.75em;\n transition: 0.4s;\n &:hover {\n background: red;\n color: white;\n }\n"])));
6503
6462
  var CardRow = function CardRow(_ref) {
6504
6463
  var _styles$price, _styles$Btn, _row$standardPrice, _row$subtotal;
@@ -6513,6 +6472,31 @@ var CardRow = function CardRow(_ref) {
6513
6472
  styles = _ref.styles;
6514
6473
  var imgnotfoundUrlcommon = noImgAvailable$1;
6515
6474
  if (imgnotfoundUrl && imgnotfoundUrl !== 'null') imgnotfoundUrlcommon = imgnotfoundUrl;
6475
+ var timer = React.useRef();
6476
+ var _useState = React.useState(row === null || row === void 0 ? void 0 : row.quantity),
6477
+ quantity = _useState[0],
6478
+ setQuantity = _useState[1];
6479
+ React.useEffect(function () {
6480
+ setQuantity(row === null || row === void 0 ? void 0 : row.quantity);
6481
+ }, [row]);
6482
+ var onChangeQuantity = function onChangeQuantity(product) {
6483
+ handleIncrementDecrement(product, product);
6484
+ };
6485
+ var onChangeInput = function onChangeInput(e) {
6486
+ var value = e.target.value;
6487
+ setQuantity(value || 1);
6488
+ if (timer.current) {
6489
+ clearTimeout(timer.current);
6490
+ }
6491
+ timer.current = setTimeout(function () {
6492
+ onChangeQuantity(_extends({}, row, {
6493
+ quantity: checkMinMaxQty({
6494
+ quantity: value,
6495
+ product: row
6496
+ })
6497
+ }));
6498
+ }, 500);
6499
+ };
6516
6500
  return /*#__PURE__*/React__default.createElement(CartTableRow, {
6517
6501
  onClick: function onClick(event) {
6518
6502
  return handleClick(event, row);
@@ -6569,17 +6553,24 @@ var CardRow = function CardRow(_ref) {
6569
6553
  if ((row === null || row === void 0 ? void 0 : row.availableQuantity) === 0 || (row === null || row === void 0 ? void 0 : row.quantity) === 1) {
6570
6554
  return handleRemoveProduct(row);
6571
6555
  }
6572
- handleIncrementDecrement('decrement', _extends({}, row, {
6573
- quantity: (row === null || row === void 0 ? void 0 : row.quantity) > (row === null || row === void 0 ? void 0 : row.availableQuantity) ? row === null || row === void 0 ? void 0 : row.availableQuantity : row === null || row === void 0 ? void 0 : row.quantity
6556
+ onChangeQuantity(_extends({}, row, {
6557
+ quantity: checkMinMaxQty({
6558
+ quantity: (row === null || row === void 0 ? void 0 : row.quantity) - 1,
6559
+ product: row
6560
+ })
6574
6561
  }));
6575
6562
  }
6576
6563
  }, /*#__PURE__*/React__default.createElement(ai.AiOutlineMinus, {
6577
6564
  style: {
6578
6565
  fontSize: 'inherit'
6579
6566
  }
6580
- })), /*#__PURE__*/React__default.createElement("div", {
6567
+ })), /*#__PURE__*/React__default.createElement("p", {
6581
6568
  className: "price"
6582
- }, /*#__PURE__*/React__default.createElement("p", null, row === null || row === void 0 ? void 0 : row.quantity)), /*#__PURE__*/React__default.createElement("div", {
6569
+ }, /*#__PURE__*/React__default.createElement("input", {
6570
+ type: "number",
6571
+ value: quantity,
6572
+ onChange: onChangeInput
6573
+ })), /*#__PURE__*/React__default.createElement("div", {
6583
6574
  className: "add",
6584
6575
  onClick: function onClick(e) {
6585
6576
  e.stopPropagation();
@@ -6587,8 +6578,11 @@ var CardRow = function CardRow(_ref) {
6587
6578
  if ((row === null || row === void 0 ? void 0 : row.availableQuantity) === 0) {
6588
6579
  return handleRemoveProduct(row);
6589
6580
  }
6590
- handleIncrementDecrement('increment', _extends({}, row, {
6591
- quantity: (row === null || row === void 0 ? void 0 : row.quantity) > (row === null || row === void 0 ? void 0 : row.availableQuantity) ? row === null || row === void 0 ? void 0 : row.availableQuantity : row === null || row === void 0 ? void 0 : row.quantity
6581
+ onChangeQuantity(_extends({}, row, {
6582
+ quantity: checkMinMaxQty({
6583
+ quantity: (row === null || row === void 0 ? void 0 : row.quantity) + 1,
6584
+ product: row
6585
+ })
6592
6586
  }));
6593
6587
  }
6594
6588
  }, /*#__PURE__*/React__default.createElement(ai.AiOutlinePlus, {
@@ -6852,17 +6846,17 @@ function EnhancedTable(_ref) {
6852
6846
  }, "remove selected")));
6853
6847
  }
6854
6848
 
6855
- var _templateObject$v, _templateObject2$l, _templateObject3$f, _templateObject4$b, _templateObject5$9, _templateObject6$7, _templateObject7$5;
6856
- var CartPageCard = styled__default.div(_templateObject$v || (_templateObject$v = _taggedTemplateLiteralLoose(["\n width: min(97%, 485px);\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n padding: 1em;\n background: #ffffff;\n box-shadow: 0px 20px 35px rgba(0, 0, 0, 0.05);\n border-radius: 20px;\n position: relative;\n"])));
6857
- var CartPageImg = styled__default.img(_templateObject2$l || (_templateObject2$l = _taggedTemplateLiteralLoose(["\n /* width: 95px; */\n width: ", ";\n height: ", ";\n position: relative;\n margin-right: 1em;\n"])), function (props) {
6849
+ var _templateObject$u, _templateObject2$k, _templateObject3$e, _templateObject4$b, _templateObject5$9, _templateObject6$7, _templateObject7$5;
6850
+ var CartPageCard = styled__default.div(_templateObject$u || (_templateObject$u = _taggedTemplateLiteralLoose(["\n // width: min(97%, 485px);\n width: 98%;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n padding: 1em;\n background: #ffffff;\n box-shadow: 0px 20px 35px rgba(0, 0, 0, 0.05);\n border-radius: 12px;\n position: relative;\n"])));
6851
+ var CartPageImg = styled__default.img(_templateObject2$k || (_templateObject2$k = _taggedTemplateLiteralLoose(["\n width: ", ";\n height: ", ";\n max-width: 50px;\n max-height: 50px;\n position: relative;\n margin-right: 1em;\n"])), function (props) {
6858
6852
  return props.width || 'auto';
6859
6853
  }, function (props) {
6860
- return props.height || '81px';
6854
+ return props.height || 'auto';
6861
6855
  });
6862
- var NameAndQtBox = styled__default.div(_templateObject3$f || (_templateObject3$f = _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"])));
6863
- var CartPageCardName = styled__default.div(_templateObject4$b || (_templateObject4$b = _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.3em;\n max-height: 1.4em;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n p {\n font-size: 1.1em;\n color: #c3c6c9;\n }\n"])));
6864
- var QtAndPriceBox = styled__default.div(_templateObject5$9 || (_templateObject5$9 = _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"])));
6865
- var CartPageQtBox = styled__default.div(_templateObject6$7 || (_templateObject6$7 = _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"])));
6856
+ var NameAndQtBox = styled__default.div(_templateObject3$e || (_templateObject3$e = _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"])));
6857
+ var CartPageCardName = styled__default.div(_templateObject4$b || (_templateObject4$b = _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.3em;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n p {\n font-size: 1.1em;\n font-weight: 600;\n color: #323232;\n }\n"])));
6858
+ var QtAndPriceBox = styled__default.div(_templateObject5$9 || (_templateObject5$9 = _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: 1em;\n }\n"])));
6859
+ var CartPageQtBox = styled__default.div(_templateObject6$7 || (_templateObject6$7 = _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: #323232;\n input {\n width: 40px;\n height: 100%;\n text-align: center;\n border: none;\n }\n }\n"])));
6866
6860
  var CloseBtn = styled__default.div(_templateObject7$5 || (_templateObject7$5 = _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"])));
6867
6861
 
6868
6862
  var CartPageProductCard = function CartPageProductCard(_ref) {
@@ -6875,6 +6869,31 @@ var CartPageProductCard = function CartPageProductCard(_ref) {
6875
6869
  imgSize = _ref.imgSize;
6876
6870
  var imgnotfoundUrlcommon = noImgAvailable$1;
6877
6871
  if (imgnotfoundUrl && imgnotfoundUrl !== 'null') imgnotfoundUrlcommon = imgnotfoundUrl;
6872
+ var timer = React.useRef();
6873
+ var _useState = React.useState(item === null || item === void 0 ? void 0 : item.quantity),
6874
+ quantity = _useState[0],
6875
+ setQuantity = _useState[1];
6876
+ React.useEffect(function () {
6877
+ setQuantity(item === null || item === void 0 ? void 0 : item.quantity);
6878
+ }, [item]);
6879
+ var onChangeQuantity = function onChangeQuantity(product) {
6880
+ handleIncrementDecrement(product, product);
6881
+ };
6882
+ var onChangeInput = function onChangeInput(e) {
6883
+ var value = e.target.value;
6884
+ setQuantity(value || 1);
6885
+ if (timer.current) {
6886
+ clearTimeout(timer.current);
6887
+ }
6888
+ timer.current = setTimeout(function () {
6889
+ onChangeQuantity(_extends({}, item, {
6890
+ quantity: checkMinMaxQty({
6891
+ quantity: value,
6892
+ product: item
6893
+ })
6894
+ }));
6895
+ }, 500);
6896
+ };
6878
6897
  return /*#__PURE__*/React__default.createElement(CartPageCard, null, /*#__PURE__*/React__default.createElement(CartPageImg, {
6879
6898
  src: item.imageUrl && item.imageUrl !== 'null' ? item.imageUrl : imgnotfoundUrlcommon,
6880
6899
  alt: 'no product image available',
@@ -6888,15 +6907,29 @@ var CartPageProductCard = function CartPageProductCard(_ref) {
6888
6907
  className: "icon",
6889
6908
  onClick: function onClick() {
6890
6909
  if (loading) return;
6891
- handleIncrementDecrement('decrement', item);
6910
+ onChangeQuantity(_extends({}, item, {
6911
+ quantity: checkMinMaxQty({
6912
+ quantity: (item === null || item === void 0 ? void 0 : item.quantity) - 1,
6913
+ product: item
6914
+ })
6915
+ }));
6892
6916
  }
6893
6917
  }, /*#__PURE__*/React__default.createElement(ai.AiOutlineMinus, null)), /*#__PURE__*/React__default.createElement("span", {
6894
6918
  className: "qt"
6895
- }, item.quantity), /*#__PURE__*/React__default.createElement("span", {
6919
+ }, /*#__PURE__*/React__default.createElement("input", {
6920
+ type: "number",
6921
+ value: quantity,
6922
+ onChange: onChangeInput
6923
+ })), /*#__PURE__*/React__default.createElement("span", {
6896
6924
  className: "icon",
6897
6925
  onClick: function onClick() {
6898
6926
  if (loading) return;
6899
- handleIncrementDecrement('increment', item);
6927
+ onChangeQuantity(_extends({}, item, {
6928
+ quantity: checkMinMaxQty({
6929
+ quantity: (item === null || item === void 0 ? void 0 : item.quantity) + 1,
6930
+ product: item
6931
+ })
6932
+ }));
6900
6933
  }
6901
6934
  }, /*#__PURE__*/React__default.createElement(ai.AiOutlinePlus, null))), /*#__PURE__*/React__default.createElement("p", {
6902
6935
  className: "subtotal"
@@ -6937,26 +6970,24 @@ var CartPageMainRetail = function CartPageMainRetail(_ref) {
6937
6970
  })));
6938
6971
  };
6939
6972
 
6940
- var _templateObject$w, _templateObject2$m, _templateObject3$g, _templateObject4$c, _templateObject5$a, _templateObject6$8, _templateObject7$6, _templateObject8$4;
6941
- var CartSummaryContainer = styled__default.div(_templateObject$w || (_templateObject$w = _taggedTemplateLiteralLoose(["\n width: 25rem;\n max-width: 100%;\n display: flex;\n flex-direction: column;\n background: ", ";\n color: ", ";\n border-radius: 20px;\n padding: 2em 3em;\n align-items: center;\n /* margin-top: 3em; */\n p {\n font-size: 1.189em;\n font-weight: 600;\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 cursor: pointer;\n }\n @media only screen and (max-width: 1200px) {\n margin-top: 4em;\n }\n"])), function (props) {
6973
+ var _templateObject$v, _templateObject2$l, _templateObject3$f, _templateObject4$c, _templateObject5$a, _templateObject6$8, _templateObject7$6, _templateObject8$4;
6974
+ var CartSummaryContainer = styled__default.div(_templateObject$v || (_templateObject$v = _taggedTemplateLiteralLoose(["\n width: 25rem;\n max-width: 100%;\n display: flex;\n flex-direction: column;\n background: ", ";\n color: ", ";\n border-radius: 20px;\n padding: 2em 3em;\n align-items: center;\n /* margin-top: 3em; */\n p {\n font-size: 1.189em;\n font-weight: 600;\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 cursor: pointer;\n }\n"])), function (props) {
6942
6975
  return props.background || '#667080';
6943
6976
  }, function (props) {
6944
6977
  return props.color || 'white';
6945
6978
  }, function (props) {
6946
6979
  return props.color || 'white';
6947
6980
  });
6948
- var CartSummaryRow = styled__default.div(_templateObject2$m || (_templateObject2$m = _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) {
6981
+ var CartSummaryRow = styled__default.div(_templateObject2$l || (_templateObject2$l = _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) {
6949
6982
  return props.justify || 'space-between';
6950
6983
  }, function (props) {
6951
6984
  return props.h5 || '1.31em';
6952
6985
  });
6953
- var CartSummaryHr = styled__default.span(_templateObject3$g || (_templateObject3$g = _taggedTemplateLiteralLoose(["\n border: none;\n width: 100%;\n height: 1px;\n background-color: ", ";\n margin: 1.2em 0;\n"])), function (props) {
6986
+ var CartSummaryHr = styled__default.span(_templateObject3$f || (_templateObject3$f = _taggedTemplateLiteralLoose(["\n border: none;\n width: 100%;\n height: 1px;\n background-color: ", ";\n margin: 1.2em 0;\n"])), function (props) {
6954
6987
  return props.color || 'rgba(255, 255, 255, 0.5)';
6955
6988
  });
6956
- var CartSummaryInputBox = styled__default.form(_templateObject4$c || (_templateObject4$c = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding-bottom: ", ";\n background-color: transparent;\n width: 100%;\n input {\n width: 65%;\n height: 2.44rem;\n padding: 0.2rem 0.8rem;\n\n text-transform: capitalize;\n font-size: 0.89rem;\n border-radius: ", ";\n margin-right: 0.1em;\n\n border: none;\n outline: none;\n background: ", ";\n color: ", ";\n &::placeholder {\n color: ", ";\n }\n }\n button {\n width: 35%;\n height: 2.44rem;\n line-height: 0.8rem;\n background: ", ";\n border-radius: ", ";\n display: grid;\n color: ", ";\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 background: ", ";\n }\n }\n"])), function (props) {
6989
+ var CartSummaryInputBox = styled__default.form(_templateObject4$c || (_templateObject4$c = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding-bottom: ", ";\n background-color: transparent;\n width: 100%;\n input {\n width: 65%;\n height: 2.44rem;\n padding: 0.2rem 0.8rem;\n\n text-transform: capitalize;\n font-size: 0.89rem;\n margin-right: 0.1em;\n\n border: none;\n outline: none;\n background: ", ";\n color: ", ";\n &::placeholder {\n color: ", ";\n }\n }\n button {\n width: 35%;\n height: 2.44rem;\n line-height: 0.8rem;\n background: ", ";\n display: grid;\n color: ", ";\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 background: ", ";\n }\n }\n"])), function (props) {
6957
6990
  return props.paddingBottom ? '0' : '0';
6958
- }, function (props) {
6959
- return props.retail ? '1.19rem' : '0';
6960
6991
  }, function (props) {
6961
6992
  return props.background || '#bfc3ca';
6962
6993
  }, function (props) {
@@ -6965,8 +6996,6 @@ var CartSummaryInputBox = styled__default.form(_templateObject4$c || (_templateO
6965
6996
  return props.color || '#667080';
6966
6997
  }, function (props) {
6967
6998
  return props.btn || '#393f48';
6968
- }, function (props) {
6969
- return props.retail ? '1.19rem' : 0;
6970
6999
  }, function (props) {
6971
7000
  return props.Btncolor || 'inherit';
6972
7001
  }, function (props) {
@@ -6976,12 +7005,10 @@ var DiscountCouponContainer = styled__default.div(_templateObject5$a || (_templa
6976
7005
  var DiscountCouponCard = styled__default.div(_templateObject6$8 || (_templateObject6$8 = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: space-between;\n padding: 0.3rem;\n svg {\n color: ", ";\n cursor: pointer;\n font-size: 1.4rem;\n }\n"])), function (props) {
6977
7006
  return props.btn || '#393f48';
6978
7007
  });
6979
- var CartSummaryCheckoutBtn = styled__default.button(_templateObject7$6 || (_templateObject7$6 = _taggedTemplateLiteralLoose(["\n font-size: 0.95em;\n font-weight: 600;\n background: ", ";\n color: ", ";\n cursor: pointer;\n text-transform: uppercase;\n border: none;\n outline: none;\n width: 16.81em;\n height: 3.4em;\n display: grid;\n place-items: center;\n font-size: 0.75em;\n border-radius: ", ";\n padding: 0;\n font-size: 0.94em;\n margin: 1em auto;\n transition: 0.3s;\n margin-top: 3em;\n &:hover {\n opacity: 0.8;\n }\n"])), function (props) {
7008
+ var CartSummaryCheckoutBtn = styled__default.button(_templateObject7$6 || (_templateObject7$6 = _taggedTemplateLiteralLoose(["\n font-size: 0.95em;\n font-weight: 600;\n background: ", ";\n color: ", ";\n cursor: pointer;\n text-transform: uppercase;\n border: none;\n outline: none;\n width: 16.81em;\n height: 3.4em;\n display: grid;\n place-items: center;\n font-size: 0.75em;\n padding: 0;\n font-size: 0.94em;\n margin: 1em auto;\n transition: 0.3s;\n margin-top: 3em;\n &:hover {\n opacity: 0.8;\n }\n"])), function (props) {
6980
7009
  return props.background || '#393f48';
6981
7010
  }, function (props) {
6982
7011
  return props.color || 'inherit';
6983
- }, function (props) {
6984
- return props.retail ? '2.64em' : '';
6985
7012
  });
6986
7013
  var CartSummaryCheckBoxRow = styled__default(CartSummaryRow)(_templateObject8$4 || (_templateObject8$4 = _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) {
6987
7014
  return props.background || 'white';
@@ -6994,11 +7021,7 @@ var CartSummary = function CartSummary(_ref) {
6994
7021
  var apiEndPoint = _ref.apiEndPoint,
6995
7022
  token = _ref.token,
6996
7023
  storeData = _ref.storeData,
6997
- _ref$retail = _ref.retail,
6998
- retail = _ref$retail === void 0 ? true : _ref$retail,
6999
- shippingData = _ref.shippingData,
7000
7024
  selectedShipping = _ref.selectedShipping,
7001
- setShipping = _ref.setShipping,
7002
7025
  clickRedirect = _ref.clickRedirect,
7003
7026
  subtotal = _ref.subtotal,
7004
7027
  styles = _ref.styles,
@@ -7075,36 +7098,11 @@ var CartSummary = function CartSummary(_ref) {
7075
7098
  color: cartSummary.hr
7076
7099
  }), /*#__PURE__*/React__default.createElement(CartSummaryRow, null, /*#__PURE__*/React__default.createElement("h6", null, "Discount"), /*#__PURE__*/React__default.createElement("h5", null, renderMoney(discountTotal))), /*#__PURE__*/React__default.createElement(CartSummaryHr, {
7077
7100
  color: cartSummary.hr
7078
- }), retail && /*#__PURE__*/React__default.createElement(material.Stack, {
7079
- flexDirection: "column",
7080
- justifyContent: "flexStart",
7081
- sx: {
7082
- width: '100%'
7083
- }
7084
- }, /*#__PURE__*/React__default.createElement(CartSummaryRow, {
7085
- justify: "flex-start"
7086
- }, /*#__PURE__*/React__default.createElement("h6", null, "shipping")), shippingData && shippingData.map(function (li, i) {
7087
- return /*#__PURE__*/React__default.createElement(CartSummaryCheckBoxRow, {
7088
- key: i,
7089
- selected: li.id === selectedShipping.id,
7090
- onClick: function onClick() {
7091
- setShipping(li);
7092
- },
7093
- background: cartSummary.color
7094
- }, /*#__PURE__*/React__default.createElement("span", {
7095
- className: "checkBox"
7096
- }), /*#__PURE__*/React__default.createElement("p", null, li.name, ' ', li.amount && li.amount > 0 && /*#__PURE__*/React__default.createElement("span", null, ": ", renderMoney(li.amount))));
7097
- }), /*#__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", {
7098
- className: "underline"
7099
- }, "Calculate shipping"))), /*#__PURE__*/React__default.createElement(CartSummaryHr, {
7100
- color: cartSummary.hr
7101
- })), /*#__PURE__*/React__default.createElement(CartSummaryInputBox, {
7102
- paddingBottom: !retail,
7101
+ }), /*#__PURE__*/React__default.createElement(CartSummaryInputBox, {
7103
7102
  background: cartSummary === null || cartSummary === void 0 ? void 0 : (_cartSummary$input = cartSummary.input) === null || _cartSummary$input === void 0 ? void 0 : _cartSummary$input.bg,
7104
7103
  color: cartSummary === null || cartSummary === void 0 ? void 0 : (_cartSummary$input2 = cartSummary.input) === null || _cartSummary$input2 === void 0 ? void 0 : _cartSummary$input2.color,
7105
7104
  btn: Btn === null || Btn === void 0 ? void 0 : Btn.background,
7106
7105
  Btncolor: Btn === null || Btn === void 0 ? void 0 : Btn.color,
7107
- retail: retail,
7108
7106
  onSubmit: function onSubmit(e) {
7109
7107
  e.preventDefault();
7110
7108
  ValidateDiscountCoupon(couponText);
@@ -7150,7 +7148,6 @@ var CartSummary = function CartSummary(_ref) {
7150
7148
  }, /*#__PURE__*/React__default.createElement("h6", null, "order total"), /*#__PURE__*/React__default.createElement("h5", null, renderMoney(totalCartPrice + ((selectedShipping === null || selectedShipping === void 0 ? void 0 : selectedShipping.amount) || 0) - discountTotal))), /*#__PURE__*/React__default.createElement(CartSummaryRow, {
7151
7149
  justify: "center"
7152
7150
  }, /*#__PURE__*/React__default.createElement(CartSummaryCheckoutBtn, {
7153
- retail: retail,
7154
7151
  onClick: function onClick() {
7155
7152
  if (loading) return;
7156
7153
  clickRedirect('/checkout');
@@ -7172,7 +7169,6 @@ var CartPageComponent = function CartPageComponent(_ref) {
7172
7169
  var _styles$input;
7173
7170
  var apiEndPoint = _ref.apiEndPoint,
7174
7171
  token = _ref.token,
7175
- retail = _ref.retail,
7176
7172
  shippingData = _ref.shippingData,
7177
7173
  selectedShipping = _ref.selectedShipping,
7178
7174
  setShipping = _ref.setShipping,
@@ -7190,6 +7186,9 @@ var CartPageComponent = function CartPageComponent(_ref) {
7190
7186
  var _useState = React.useState([]),
7191
7187
  storeData = _useState[0],
7192
7188
  setStoreData = _useState[1];
7189
+ var _useWindowSize = useWindowSize(),
7190
+ width = _useWindowSize.width;
7191
+ var retail = width <= 768;
7193
7192
  React.useEffect(function () {
7194
7193
  (function () {
7195
7194
  try {
@@ -7213,6 +7212,9 @@ var CartPageComponent = function CartPageComponent(_ref) {
7213
7212
  }
7214
7213
  })();
7215
7214
  }, []);
7215
+ var onChangeQuantity = function onChangeQuantity(product) {
7216
+ handleIncrementDecrement(product, product);
7217
+ };
7216
7218
  return /*#__PURE__*/React__default.createElement(CartPageSection, {
7217
7219
  bg: styles === null || styles === void 0 ? void 0 : styles.bg,
7218
7220
  retail: retail
@@ -7222,14 +7224,15 @@ var CartPageComponent = function CartPageComponent(_ref) {
7222
7224
  }, /*#__PURE__*/React__default.createElement("h1", null, "Shopping Cart"), /*#__PURE__*/React__default.createElement("p", null, "You have ", cartData === null || cartData === void 0 ? void 0 : cartData.totalCartQuantity, " items in your cart")), /*#__PURE__*/React__default.createElement(CartPageContainer, {
7223
7225
  retail: retail,
7224
7226
  loading: loading,
7225
- color: styles === null || styles === void 0 ? void 0 : (_styles$input = styles.input) === null || _styles$input === void 0 ? void 0 : _styles$input.color
7227
+ color: styles === null || styles === void 0 ? void 0 : (_styles$input = styles.input) === null || _styles$input === void 0 ? void 0 : _styles$input.color,
7228
+ scroll: styles === null || styles === void 0 ? void 0 : styles.scroll
7226
7229
  }, retail ? /*#__PURE__*/React__default.createElement(CartPageMainRetail, {
7227
7230
  retail: retail,
7228
7231
  cartData: cartData,
7229
7232
  loading: loading,
7230
7233
  imgnotfoundUrl: imgnotfoundUrl,
7231
7234
  styles: styles,
7232
- handleIncrementDecrement: handleIncrementDecrement,
7235
+ handleIncrementDecrement: onChangeQuantity,
7233
7236
  handleRemoveProduct: handleRemoveProduct
7234
7237
  }) : /*#__PURE__*/React__default.createElement(EnhancedTable, {
7235
7238
  retail: retail,
@@ -7237,7 +7240,7 @@ var CartPageComponent = function CartPageComponent(_ref) {
7237
7240
  loading: loading,
7238
7241
  imgnotfoundUrl: imgnotfoundUrl,
7239
7242
  styles: styles,
7240
- handleIncrementDecrement: handleIncrementDecrement,
7243
+ handleIncrementDecrement: onChangeQuantity,
7241
7244
  handleRemoveProduct: handleRemoveProduct,
7242
7245
  handleRemoveAll: handleRemoveAll,
7243
7246
  disabledSelectAllProductCheckbox: disabledSelectAllProductCheckbox
@@ -7259,6 +7262,183 @@ var CartPageComponent = function CartPageComponent(_ref) {
7259
7262
  discountCoupons: discountCoupons
7260
7263
  })));
7261
7264
  };
7265
+ var checkMinMaxQty = function checkMinMaxQty(_ref2) {
7266
+ var quantity = _ref2.quantity,
7267
+ product = _ref2.product;
7268
+ var quantityReturn = quantity;
7269
+ if (quantityReturn >= (product === null || product === void 0 ? void 0 : product.availableQuantity)) {
7270
+ alert("Only " + (product === null || product === void 0 ? void 0 : product.availableQuantity) + " is available");
7271
+ quantityReturn = product === null || product === void 0 ? void 0 : product.availableQuantity;
7272
+ }
7273
+ if (product !== null && product !== void 0 && product.minQuantityToSale && (product === null || product === void 0 ? void 0 : product.minQuantityToSale) > 1 && quantityReturn < (product === null || product === void 0 ? void 0 : product.minQuantityToSale)) {
7274
+ alert("Quantity should be minimum " + (product === null || product === void 0 ? void 0 : product.minQuantityToSale));
7275
+ quantityReturn = product === null || product === void 0 ? void 0 : product.minQuantityToSale;
7276
+ }
7277
+ if (product !== null && product !== void 0 && product.maxQuantityToSale && (product === null || product === void 0 ? void 0 : product.maxQuantityToSale) >= 1 && quantityReturn > (product === null || product === void 0 ? void 0 : product.maxQuantityToSale)) {
7278
+ alert("Quantity should not be more than " + (product === null || product === void 0 ? void 0 : product.maxQuantityToSale));
7279
+ quantityReturn = product === null || product === void 0 ? void 0 : product.maxQuantityToSale;
7280
+ }
7281
+ return quantityReturn;
7282
+ };
7283
+
7284
+ var _templateObject$w, _templateObject2$m, _templateObject3$g;
7285
+ var CartDrawerProduct = styled__default.div(_templateObject$w || (_templateObject$w = _taggedTemplateLiteralLoose(["\n width: 100%;\n display: flex;\n flex-direction: row;\n height: 100px;\n justify-content: space-around;\n align-items: center;\n overflow: hidden;\n margin-bottom: 2rem;\n user-select: none;\n\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 width: 100%;\n word-wrap: break-word;\n overflow: hidden;\n text-overflow: ellipsis;\n transition: 0.3s;\n cursor: pointer;\n &:hover {\n color: ", ";\n }\n }\n }\n .endSection {\n width: 20%;\n height: 95%;\n .icon {\n cursor: pointer;\n transition: 0.4s;\n &:hover {\n color: red;\n /* opacity: 0.7; */\n }\n }\n }\n @media only screen and (max-width: 768px) {\n .closeIcon {\n font-size: 1rem;\n }\n }\n @media only screen and (max-width: 340px) {\n .middleSection {\n h6 {\n font-size: 0.9rem;\n }\n }\n }\n"])), function (props) {
7286
+ return props.color || 'grey';
7287
+ });
7288
+ var CartDrawerQtBox = styled__default.div(_templateObject2$m || (_templateObject2$m = _taggedTemplateLiteralLoose(["\n height: 34px;\n width: 82px;\n border: 1px solid rgb(211, 210, 210);\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 13.5px;\n color: #333;\n padding: 0 0.5rem;\n border-radius: 5px;\n max-width: 100%;\n\n span {\n cursor: pointer;\n height: 100%;\n display: grid;\n place-items: center;\n }\n .qt {\n font-size: 12px;\n color: black;\n font-weight: 500;\n cursor: auto;\n input {\n width: 40px;\n height: 100%;\n text-align: center;\n border: none;\n }\n }\n @media only screen and (max-width: 600px) {\n min-width: 55px;\n aspect-ratio: 1/2;\n /* 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"])));
7289
+ var CartDrawerLoader = styled__default.div(_templateObject3$g || (_templateObject3$g = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 30%;\n width: 100px;\n height: 100px;\n display: grid;\n place-items: center;\n"])));
7290
+
7291
+ var CartDrawerProductCard = function CartDrawerProductCard(_ref) {
7292
+ var product = _ref.product,
7293
+ color = _ref.color,
7294
+ handleIncrementDecrement = _ref.handleIncrementDecrement,
7295
+ handleRemoveProduct = _ref.handleRemoveProduct,
7296
+ handleRedirect = _ref.handleRedirect,
7297
+ imgnotfoundUrl = _ref.imgnotfoundUrl,
7298
+ loading = _ref.loading;
7299
+ var timer = React.useRef();
7300
+ var _useState = React.useState(product === null || product === void 0 ? void 0 : product.quantity),
7301
+ quantity = _useState[0],
7302
+ setQuantity = _useState[1];
7303
+ React.useEffect(function () {
7304
+ setQuantity(product === null || product === void 0 ? void 0 : product.quantity);
7305
+ }, [product]);
7306
+ var imgnotfoundUrlcommon = noImgAvailable$1;
7307
+ if (imgnotfoundUrl && imgnotfoundUrl !== 'null') imgnotfoundUrlcommon = imgnotfoundUrl;
7308
+ var onChangeQuantity = function onChangeQuantity(product) {
7309
+ handleIncrementDecrement(product, product);
7310
+ };
7311
+ var onChangeInput = function onChangeInput(e) {
7312
+ var value = e.target.value;
7313
+ setQuantity(value || 1);
7314
+ if (timer.current) {
7315
+ clearTimeout(timer.current);
7316
+ }
7317
+ timer.current = setTimeout(function () {
7318
+ onChangeQuantity(_extends({}, product, {
7319
+ quantity: checkMinMaxQty({
7320
+ quantity: value,
7321
+ product: product
7322
+ })
7323
+ }));
7324
+ }, 500);
7325
+ };
7326
+ return /*#__PURE__*/React__default.createElement(CartDrawerProduct, {
7327
+ color: color
7328
+ }, /*#__PURE__*/React__default.createElement("img", {
7329
+ src: product.imageUrl && product.imageUrl !== 'null' ? product.imageUrl : imgnotfoundUrlcommon,
7330
+ alt: 'no product image available'
7331
+ }), /*#__PURE__*/React__default.createElement(material.Stack, {
7332
+ flexDirection: "column",
7333
+ justifyContent: "space-between",
7334
+ alignItems: "flex-start",
7335
+ className: "middleSection"
7336
+ }, /*#__PURE__*/React__default.createElement(material.Tooltip, {
7337
+ title: product === null || product === void 0 ? void 0 : product.productName,
7338
+ placement: "top",
7339
+ arrow: true
7340
+ }, /*#__PURE__*/React__default.createElement("h6", {
7341
+ className: "name",
7342
+ onClick: function onClick() {
7343
+ return handleRedirect(product);
7344
+ }
7345
+ }, product === null || product === void 0 ? void 0 : product.productName)), /*#__PURE__*/React__default.createElement("h6", null, (product === null || product === void 0 ? void 0 : product.standardPrice) === (product === null || product === void 0 ? void 0 : product.cartStandardPrice) ? "$" + (product === null || product === void 0 ? void 0 : product.standardPrice) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, (product === null || product === void 0 ? void 0 : product.cartStandardPrice) && /*#__PURE__*/React__default.createElement("span", null, renderMoney(product === null || product === void 0 ? void 0 : product.cartStandardPrice)), renderMoney(product === null || product === void 0 ? void 0 : product.standardPrice)))), /*#__PURE__*/React__default.createElement(material.Stack, {
7346
+ flexDirection: "column",
7347
+ justifyContent: "space-between",
7348
+ alignItems: "flex-end",
7349
+ className: "endSection"
7350
+ }, /*#__PURE__*/React__default.createElement(ri.RiDeleteBin5Line, {
7351
+ className: "icon",
7352
+ onClick: function onClick() {
7353
+ if (loading) return;
7354
+ var sure = confirm('Are you sure you want to remove this item from cart');
7355
+ if (!sure) return;
7356
+ handleRemoveProduct(product);
7357
+ }
7358
+ }), /*#__PURE__*/React__default.createElement(CartDrawerQtBox, null, /*#__PURE__*/React__default.createElement("span", {
7359
+ onClick: function onClick() {
7360
+ if (loading) return;
7361
+ onChangeQuantity(_extends({}, product, {
7362
+ quantity: checkMinMaxQty({
7363
+ quantity: (product === null || product === void 0 ? void 0 : product.quantity) - 1,
7364
+ product: product
7365
+ })
7366
+ }));
7367
+ }
7368
+ }, /*#__PURE__*/React__default.createElement(ai.AiOutlineMinus, null)), /*#__PURE__*/React__default.createElement("span", {
7369
+ className: 'qt'
7370
+ }, /*#__PURE__*/React__default.createElement("input", {
7371
+ type: "number",
7372
+ value: quantity,
7373
+ onChange: onChangeInput
7374
+ })), /*#__PURE__*/React__default.createElement("span", {
7375
+ onClick: function onClick() {
7376
+ if (loading) return;
7377
+ onChangeQuantity(_extends({}, product, {
7378
+ quantity: checkMinMaxQty({
7379
+ quantity: (product === null || product === void 0 ? void 0 : product.quantity) + 1,
7380
+ product: product
7381
+ })
7382
+ }));
7383
+ }
7384
+ }, /*#__PURE__*/React__default.createElement(ai.AiOutlinePlus, null)))));
7385
+ };
7386
+
7387
+ var CartDrawer = function CartDrawer(_ref) {
7388
+ var _cartData$cartLineIte, _cartData$totalCartPr;
7389
+ var cartData = _ref.cartData,
7390
+ maxWidth = _ref.maxWidth,
7391
+ color = _ref.color,
7392
+ handleRedirect = _ref.handleRedirect,
7393
+ handleIncrementDecrement = _ref.handleIncrementDecrement,
7394
+ handleRemoveProduct = _ref.handleRemoveProduct,
7395
+ handleClose = _ref.handleClose,
7396
+ loading = _ref.loading,
7397
+ imgnotfoundUrl = _ref.imgnotfoundUrl;
7398
+ return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(CartDrawerContainer, {
7399
+ className: "cartDrawer-container",
7400
+ maxWidth: maxWidth
7401
+ }, /*#__PURE__*/React__default.createElement(CartDrawerBar, null, /*#__PURE__*/React__default.createElement("h2", null, "Your Cart"), /*#__PURE__*/React__default.createElement(gr.GrClose, {
7402
+ className: "icon",
7403
+ onClick: function onClick() {
7404
+ handleClose();
7405
+ }
7406
+ })), /*#__PURE__*/React__default.createElement(material.Box, null, cartData && (cartData === null || cartData === void 0 ? void 0 : cartData.totalCartQuantity) > 0 ? /*#__PURE__*/React__default.createElement(CartDrawerProductContainer, {
7407
+ opacity: loading ? '.4' : '1'
7408
+ }, cartData === null || cartData === void 0 ? void 0 : (_cartData$cartLineIte = cartData.cartLineItemDtoList) === null || _cartData$cartLineIte === void 0 ? void 0 : _cartData$cartLineIte.map(function (product, i) {
7409
+ return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, loading && /*#__PURE__*/React__default.createElement(CartDrawerLoader, null, /*#__PURE__*/React__default.createElement(reactSpinners.PuffLoader, {
7410
+ color: "black"
7411
+ })), /*#__PURE__*/React__default.createElement(CartDrawerProductCard, {
7412
+ product: product,
7413
+ handleRedirect: handleRedirect,
7414
+ handleIncrementDecrement: handleIncrementDecrement,
7415
+ handleRemoveProduct: handleRemoveProduct,
7416
+ color: color,
7417
+ key: i,
7418
+ imgnotfoundUrl: imgnotfoundUrl,
7419
+ loading: loading
7420
+ }));
7421
+ })) : /*#__PURE__*/React__default.createElement(CartDrawerEmptyCart, {
7422
+ color: color
7423
+ }, /*#__PURE__*/React__default.createElement(bs.BsCartX, {
7424
+ className: "icon"
7425
+ }), /*#__PURE__*/React__default.createElement("h6", null, "Oops!"), /*#__PURE__*/React__default.createElement("p", null, "your cart is empty"))), cartData && (cartData === null || cartData === void 0 ? void 0 : cartData.totalCartQuantity) > 0 && /*#__PURE__*/React__default.createElement(CartDrawerBottomSection, null, /*#__PURE__*/React__default.createElement(material.Stack, {
7426
+ flexDirection: "row",
7427
+ justifyContent: "space-between",
7428
+ alignItems: "center",
7429
+ className: "row"
7430
+ }, /*#__PURE__*/React__default.createElement("h5", null, "Subtotal", /*#__PURE__*/React__default.createElement("span", null, "(", cartData === null || cartData === void 0 ? void 0 : cartData.totalCartQuantity, " items)")), /*#__PURE__*/React__default.createElement("h5", null, "$", cartData === null || cartData === void 0 ? void 0 : (_cartData$totalCartPr = cartData.totalCartPrice) === null || _cartData$totalCartPr === void 0 ? void 0 : _cartData$totalCartPr.toFixed(2))), /*#__PURE__*/React__default.createElement(CartDrawerOutlinedButton, {
7431
+ color: color,
7432
+ onClick: function onClick() {
7433
+ return handleRedirect('cart');
7434
+ }
7435
+ }, "view cart"), /*#__PURE__*/React__default.createElement(CartDrawerFilledButton, {
7436
+ color: color,
7437
+ onClick: function onClick() {
7438
+ return handleRedirect('checkout');
7439
+ }
7440
+ }, "continue to checkout"))));
7441
+ };
7262
7442
 
7263
7443
  var GTagManager = function GTagManager(_ref) {
7264
7444
  var gTagId = _ref.gTagId;
@@ -8422,14 +8602,12 @@ var CartPageSection$1 = styled__default.section(_templateObject$E || (_templateO
8422
8602
  }, function (props) {
8423
8603
  return props.bg || '#FAE8E5';
8424
8604
  });
8425
- var CartPageContainer$1 = styled__default.div(_templateObject2$s || (_templateObject2$s = _taggedTemplateLiteralLoose(["\n max-width: ", ";\n width: ", ";\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: flex-start;\n border-radius: 28px 28px 28px 14px;\n padding: 2em 2.5em;\n padding-bottom: 3em;\n border-radius: 28px;\n opacity: ", ";\n .scrollDiv {\n width: 68%;\n height: 630px;\n max-height: 630px;\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n\n margin-right: 0.3em;\n &::-webkit-scrollbar {\n width: ", ";\n }\n\n /* Track */\n &::-webkit-scrollbar-track {\n background: ", ";\n\n border-radius: 16px;\n }\n\n /* Handle */\n &::-webkit-scrollbar-thumb {\n background: ", ";\n border-radius: 16px;\n border: 2px solid;\n }\n /* box-shadow: 0px 20px 35px rgba(0, 0, 0, 0.05); */\n }\n table {\n border-collapse: separate;\n border-spacing: 0 4px;\n row-gap: 4px;\n }\n\n td {\n /* border: solid 1px #000; */\n border-style: none solid solid none;\n /* padding: 10px; */\n /* margin-bottom:5px; */\n }\n\n tr:first-child td:first-child {\n border-top-left-radius: 10px;\n }\n tr td:last-child {\n border-top-right-radius: 10px;\n border-bottom-right-radius: 10px;\n }\n\n tr td:first-child {\n border-bottom-left-radius: 10px;\n border-top-left-radius: 10px;\n }\n tr td:last-child {\n border-bottom-right-radius: 10px;\n }\n\n tr td {\n border-top-style: solid;\n }\n tr td:first-child {\n border-left-style: solid;\n }\n\n @media only screen and (max-width: 1200px) {\n flex-direction: column;\n align-items: center;\n padding: 0.5em;\n .scrollDiv {\n width: 100%;\n margin: 0;\n margin-bottom: 2em;\n padding: 0 0.4em;\n }\n }\n"])), function (props) {
8605
+ var CartPageContainer$1 = styled__default.div(_templateObject2$s || (_templateObject2$s = _taggedTemplateLiteralLoose(["\n max-width: ", ";\n width: ", ";\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: flex-start;\n border-radius: 28px 28px 28px 14px;\n padding: 2em 2.5em;\n padding-bottom: 3em;\n border-radius: 28px;\n opacity: ", ";\n .scrollDiv {\n width: 68%;\n height: 630px;\n max-height: 630px;\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n\n margin-right: 0.3em;\n &::-webkit-scrollbar {\n width: 10px;\n }\n\n /* Track */\n &::-webkit-scrollbar-track {\n background: ", ";\n\n border-radius: 16px;\n }\n\n /* Handle */\n &::-webkit-scrollbar-thumb {\n background: ", ";\n border-radius: 16px;\n border: 2px solid;\n }\n /* box-shadow: 0px 20px 35px rgba(0, 0, 0, 0.05); */\n }\n table {\n border-collapse: separate;\n border-spacing: 0 4px;\n row-gap: 4px;\n }\n\n td {\n /* border: solid 1px #000; */\n border-style: none solid solid none;\n /* padding: 10px; */\n /* margin-bottom:5px; */\n }\n\n tr:first-child td:first-child {\n border-top-left-radius: 10px;\n }\n tr td:last-child {\n border-top-right-radius: 10px;\n border-bottom-right-radius: 10px;\n }\n\n tr td:first-child {\n border-bottom-left-radius: 10px;\n border-top-left-radius: 10px;\n }\n tr td:last-child {\n border-bottom-right-radius: 10px;\n }\n\n tr td {\n border-top-style: solid;\n }\n tr td:first-child {\n border-left-style: solid;\n }\n\n @media only screen and (max-width: 1200px) {\n flex-direction: column;\n align-items: center;\n padding: 0.5em;\n .scrollDiv {\n width: 100%;\n margin: 0;\n margin-bottom: 2em;\n padding: 0 0.4em;\n }\n }\n"])), function (props) {
8426
8606
  return props.maxWidth || '1600px';
8427
8607
  }, function (props) {
8428
8608
  return "min(" + (props.maxWidth || '1600px') + ",100%)";
8429
8609
  }, function (props) {
8430
8610
  return props.loading ? '0.7' : 1;
8431
- }, function (props) {
8432
- return props.retail ? '12px' : '10px';
8433
8611
  }, function (props) {
8434
8612
  return props.ScrollBg || 'rgba(102, 112, 128, 0.5)';
8435
8613
  }, function (props) {
@@ -8453,11 +8631,7 @@ var CartTableCell$3 = styled__default(material.TableCell)(_templateObject6$b ||
8453
8631
  }, function (props) {
8454
8632
  return "" + props.color || 'inherit';
8455
8633
  });
8456
- var CartTableContainer$1 = styled__default(material.TableContainer)(_templateObject7$7 || (_templateObject7$7 = _taggedTemplateLiteralLoose(["\n max-height: 580px;\n padding-right: 1.5em;\n overflow: inherit !important;\n &::-webkit-scrollbar {\n width: ", ";\n }\n\n /* Track */\n &::-webkit-scrollbar-track {\n background: ", ";\n background: ", ";\n border-radius: 16px;\n width: 100%;\n }\n\n /* Handle */\n &::-webkit-scrollbar-thumb {\n border-radius: 16px;\n margin: 5px 2px;\n background: ", ";\n }\n @media screen and (max-width: 768px) {\n padding: 0;\n }\n"])), function (props) {
8457
- return props.retail ? '12px' : '10px';
8458
- }, function (props) {
8459
- return props.retail ? '#667080' : 'rgba(102, 112, 128, 0.5)';
8460
- }, function (props) {
8634
+ var CartTableContainer$1 = styled__default(material.TableContainer)(_templateObject7$7 || (_templateObject7$7 = _taggedTemplateLiteralLoose(["\n max-height: 580px;\n padding-right: 1.5em;\n overflow: inherit !important;\n &::-webkit-scrollbar {\n width: 10px;\n }\n\n /* Track */\n &::-webkit-scrollbar-track {\n background: ", ";\n border-radius: 16px;\n width: 100%;\n }\n\n /* Handle */\n &::-webkit-scrollbar-thumb {\n border-radius: 16px;\n margin: 5px 2px;\n background: ", ";\n }\n @media screen and (max-width: 768px) {\n padding: 0;\n }\n"])), function (props) {
8461
8635
  return props.bg || '#fdccc480';
8462
8636
  }, function (props) {
8463
8637
  return props.color || 'red';
@@ -11566,7 +11740,8 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
11566
11740
  return Promise.resolve(API$1({
11567
11741
  apiEndPoint: apiEndPoint,
11568
11742
  token: token,
11569
- url: "/ecommerce/customer"
11743
+ url: "/ecommerce/customer",
11744
+ hideErrorMessage: true
11570
11745
  })).then(function (data) {
11571
11746
  setCustomer(data);
11572
11747
  });
@@ -12006,94 +12181,6 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
12006
12181
  }))));
12007
12182
  };
12008
12183
 
12009
- var Breakpoint = function Breakpoint() {};
12010
- Breakpoint.xs = 'xs';
12011
- Breakpoint.sm = 'sm';
12012
- Breakpoint.md = 'md';
12013
- Breakpoint.lg = 'lg';
12014
- Breakpoint.xl = 'xl';
12015
- Breakpoint.xxl = 'xxl';
12016
-
12017
- var Variant = function Variant() {};
12018
- Variant.ONE = 'one';
12019
- Variant.TWO = 'two';
12020
- Variant.THREE = 'three';
12021
-
12022
- function debounce(func, wait, immediate) {
12023
- var timeout;
12024
- return function () {
12025
- var _this = this;
12026
- for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
12027
- args[_key] = arguments[_key];
12028
- }
12029
- clearTimeout(timeout);
12030
- timeout = setTimeout(function () {
12031
- timeout = null;
12032
- if (!immediate) func.apply(_this, args);
12033
- }, wait);
12034
- if (immediate && !timeout) func.apply(this, [].concat(args));
12035
- };
12036
- }
12037
-
12038
- function useWindowSize() {
12039
- var isWindow = typeof window !== 'undefined';
12040
- var _useState = React.useState({
12041
- width: isWindow ? window.innerWidth : 1200,
12042
- height: isWindow ? window.innerHeight : 800
12043
- }),
12044
- windowSize = _useState[0],
12045
- setWindowSize = _useState[1];
12046
- React.useEffect(function () {
12047
- var onWindowResize = function onWindowResize() {
12048
- setWindowSize({
12049
- width: window.innerWidth,
12050
- height: window.innerHeight
12051
- });
12052
- };
12053
- var onResize = debounce(onWindowResize, 100);
12054
- window.addEventListener('resize', onResize);
12055
- onWindowResize();
12056
- return function () {
12057
- window.removeEventListener('resize', onResize);
12058
- };
12059
- }, []);
12060
- return windowSize;
12061
- }
12062
-
12063
- var getBreakpoint = function getBreakpoint(_ref) {
12064
- var screen = _ref.width;
12065
- var breakpoint = '';
12066
- if (screen <= 320) {
12067
- breakpoint = Breakpoint.xs;
12068
- }
12069
- if (screen >= 375) {
12070
- breakpoint = Breakpoint.sm;
12071
- }
12072
- if (screen >= 768) {
12073
- breakpoint = Breakpoint.md;
12074
- }
12075
- if (screen >= 992) {
12076
- breakpoint = Breakpoint.lg;
12077
- }
12078
- if (screen >= 1200) {
12079
- breakpoint = Breakpoint.xl;
12080
- }
12081
- if (screen >= 1600) {
12082
- breakpoint = Breakpoint.xxl;
12083
- }
12084
- return breakpoint;
12085
- };
12086
- function useGridSize() {
12087
- var windowSize = useWindowSize();
12088
- var _useState = React.useState(Breakpoint.md),
12089
- layout = _useState[0],
12090
- setLayout = _useState[1];
12091
- React.useEffect(function () {
12092
- setLayout(getBreakpoint(windowSize));
12093
- }, [windowSize]);
12094
- return layout;
12095
- }
12096
-
12097
12184
  exports.APIStaticPage = APIStaticPage;
12098
12185
  exports.AccountDetails = AccountDetails;
12099
12186
  exports.BrandList = BrandList;