@salesgenterp/ui-components 0.3.53 → 0.3.55

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.
package/dist/index.js CHANGED
@@ -187,17 +187,17 @@ var CartDrawer = function CartDrawer(_ref) {
187
187
  };
188
188
 
189
189
  var _templateObject$2, _templateObject2$2, _templateObject3$2, _templateObject4$1, _templateObject5$1, _templateObject6$1, _templateObject7$1, _templateObject8;
190
- var CartPageSection = styled.section(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteralLoose(["\n background: ", ";\n max-width: 100%;\n width: fit-content;\n background: ", ";\n overflow: hidden;\n"])), function (props) {
190
+ var CartPageSection = styled.section(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteralLoose(["\n background: ", ";\n max-width: 100%;\n width: fit-content;\n background: ", ";\n overflow: hidden;\n font-family: 'karla-fonts';\n"])), function (props) {
191
191
  return props.bg;
192
192
  }, function (props) {
193
193
  return props.bg || '#FAE8E5';
194
194
  });
195
- var CartPageContainer = styled.div(_templateObject2$2 || (_templateObject2$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 border-radius: 28px 28px 28px 14px;\n padding: 3em 2em;\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 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: 1340px) {\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) {
195
+ var CartPageContainer = styled.div(_templateObject2$2 || (_templateObject2$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 border-radius: 28px 28px 28px 14px;\n padding: 3em 2em;\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 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 border: 2px solid;\n border-color: #fae8e5;\n /* border-color: ", "; */\n }\n /* box-shadow: 0px 20px 35px rgba(0, 0, 0, 0.05); */\n }\n @media only screen and (max-width: 1340px) {\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) {
196
196
  return props.maxWidth || '1450px';
197
197
  }, function (props) {
198
198
  return props.loading ? '0.7' : 1;
199
199
  }, function (props) {
200
- return props.retail ? '12px' : '8px';
200
+ return props.retail ? '12px' : '10px';
201
201
  }, function (props) {
202
202
  return props.retail ? '#667080' : 'rgba(102, 112, 128, 0.5)';
203
203
  }, function (props) {
@@ -209,11 +209,11 @@ var CardsBox = styled.div(_templateObject3$2 || (_templateObject3$2 = _taggedTem
209
209
  return props.retail ? 'grid' : 'flex';
210
210
  });
211
211
  var Loader = styled.div(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 40%;\n left: 47%;\n display: grid;\n place-items: center;\n z-index: 3;\n"])));
212
- var CartTableCell = styled(material.TableCell)(_templateObject5$1 || (_templateObject5$1 = _taggedTemplateLiteralLoose(["\n padding-bottom: 1em !important;\n border: none !important;\n background: ", ";\n"])), function (props) {
213
- return props.bg + " !important";
212
+ var CartTableCell = styled(material.TableCell)(_templateObject5$1 || (_templateObject5$1 = _taggedTemplateLiteralLoose(["\n && {\n padding-bottom: 1em !important;\n border: none !important;\n font-size: 0.75rem;\n background: ", ";\n }\n"])), function (props) {
213
+ return "" + props.bg;
214
214
  });
215
- var CartTableContainer = styled(material.TableContainer)(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteralLoose(["\n max-height: 580px;\n min-height: 400px;\n padding-right: 2em;\n\n &::-webkit-scrollbar {\n width: ", ";\n }\n\n /* Track */\n &::-webkit-scrollbar-track {\n background: ", ";\n background: ", ";\n border-radius: 16px;\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: 750px) {\n padding: 0;\n }\n"])), function (props) {
216
- return props.retail ? '12px' : '8px';
215
+ var CartTableContainer = styled(material.TableContainer)(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteralLoose(["\n max-height: 580px;\n min-height: 400px;\n padding-right: 1.5em;\n\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 border: 3px solid;\n border-color: #fae8e5;\n }\n @media screen and (max-width: 750px) {\n padding: 0;\n }\n"])), function (props) {
216
+ return props.retail ? '12px' : '10px';
217
217
  }, function (props) {
218
218
  return props.retail ? '#667080' : 'rgba(102, 112, 128, 0.5)';
219
219
  }, function (props) {
@@ -221,12 +221,12 @@ var CartTableContainer = styled(material.TableContainer)(_templateObject6$1 || (
221
221
  }, function (props) {
222
222
  return props.color || '#ef9687';
223
223
  });
224
- var CartButtonsRow = styled.div(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteralLoose(["\n width: 100%;\n display: flex;\n flex-direction: row;\n justify-content: flex-end;\n align-items: center;\n button {\n background: ", ";\n color: ", ";\n padding: 0.5em 1em;\n margin-right: 1.5em;\n font-size: 0.85em;\n text-transform: uppercase;\n border: none;\n cursor: pointer;\n transition: 0.4s;\n &:hover {\n transform: scale(0.9);\n }\n }\n"])), function (props) {
224
+ var CartButtonsRow = styled.div(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteralLoose(["\n width: 100%;\n display: flex;\n flex-direction: row;\n justify-content: flex-end;\n align-items: center;\n button {\n background: ", ";\n color: ", ";\n padding: 0.5em 1em;\n margin-right: 2em;\n font-size: 0.85em;\n text-transform: uppercase;\n border: none;\n cursor: pointer;\n transition: 0.4s;\n &:hover {\n transform: scale(0.9);\n }\n }\n"])), function (props) {
225
225
  return props.bg || 'rgba(253, 0, 21, 1)';
226
226
  }, function (props) {
227
227
  return props.color || 'white';
228
228
  });
229
- var CartPageBox = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n width: 1000px;\n max-width: 100%;\n margin-right: 2em;\n position: relative;\n @media only screen and (max-width: 740px) {\n margin-right: 0;\n .CartnoBelowSm {\n display: none;\n }\n }\n"])));
229
+ var CartPageBox = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n width: 1000px;\n max-width: 100%;\n margin-right: 2em;\n min-height: 30rem;\n position: relative;\n @media only screen and (max-width: 740px) {\n margin-right: 0;\n .CartnoBelowSm {\n display: none;\n }\n }\n"])));
230
230
 
231
231
  function createCommonjsModule(fn, module) {
232
232
  return module = { exports: {} }, fn(module, module.exports), module.exports;
@@ -242,7 +242,7 @@ function createCommonjsModule(fn, module) {
242
242
  */
243
243
  var b="function"===typeof Symbol&&Symbol.for,c=b?Symbol.for("react.element"):60103,d=b?Symbol.for("react.portal"):60106,e=b?Symbol.for("react.fragment"):60107,f=b?Symbol.for("react.strict_mode"):60108,g=b?Symbol.for("react.profiler"):60114,h=b?Symbol.for("react.provider"):60109,k=b?Symbol.for("react.context"):60110,l=b?Symbol.for("react.async_mode"):60111,m=b?Symbol.for("react.concurrent_mode"):60111,n=b?Symbol.for("react.forward_ref"):60112,p=b?Symbol.for("react.suspense"):60113,q=b?
244
244
  Symbol.for("react.suspense_list"):60120,r=b?Symbol.for("react.memo"):60115,t=b?Symbol.for("react.lazy"):60116,v=b?Symbol.for("react.block"):60121,w=b?Symbol.for("react.fundamental"):60117,x=b?Symbol.for("react.responder"):60118,y=b?Symbol.for("react.scope"):60119;
245
- function z(a){if("object"===typeof a&&null!==a){var u=a.$$typeof;switch(u){case c:switch(a=a.type,a){case l:case m:case e:case g:case f:case p:return a;default:switch(a=a&&a.$$typeof,a){case k:case n:case t:case r:case h:return a;default:return u}}case d:return u}}}function A(a){return z(a)===m}var AsyncMode=l;var ConcurrentMode=m;var ContextConsumer=k;var ContextProvider=h;var Element=c;var ForwardRef=n;var Fragment=e;var Lazy=t;var Memo=r;var Portal=d;
245
+ function z(a){if("object"===typeof a&&null!==a){var u=a.$$typeof;switch(u){case c:switch(a=a.type,a){case l:case m:case e:case g:case f:case p:return a;default:switch(a=a&&a.$$typeof,a){case k:case n:case t:case r:case h:return a;default:return u}}case d:return u}}}function A(a){return z(a)===m}var AsyncMode=l;var ConcurrentMode=m;var ContextConsumer=k;var ContextProvider=h;var Element=c;var ForwardRef=n;var Fragment$1=e;var Lazy=t;var Memo=r;var Portal=d;
246
246
  var Profiler=g;var StrictMode=f;var Suspense=p;var isAsyncMode=function(a){return A(a)||z(a)===l};var isConcurrentMode=A;var isContextConsumer=function(a){return z(a)===k};var isContextProvider=function(a){return z(a)===h};var isElement=function(a){return "object"===typeof a&&null!==a&&a.$$typeof===c};var isForwardRef=function(a){return z(a)===n};var isFragment=function(a){return z(a)===e};var isLazy=function(a){return z(a)===t};
247
247
  var isMemo=function(a){return z(a)===r};var isPortal=function(a){return z(a)===d};var isProfiler=function(a){return z(a)===g};var isStrictMode=function(a){return z(a)===f};var isSuspense=function(a){return z(a)===p};
248
248
  var isValidElementType=function(a){return "string"===typeof a||"function"===typeof a||a===e||a===m||a===g||a===f||a===p||a===q||"object"===typeof a&&null!==a&&(a.$$typeof===t||a.$$typeof===r||a.$$typeof===h||a.$$typeof===k||a.$$typeof===n||a.$$typeof===w||a.$$typeof===x||a.$$typeof===y||a.$$typeof===v)};var typeOf=z;
@@ -254,7 +254,7 @@ var reactIs_production_min = {
254
254
  ContextProvider: ContextProvider,
255
255
  Element: Element,
256
256
  ForwardRef: ForwardRef,
257
- Fragment: Fragment,
257
+ Fragment: Fragment$1,
258
258
  Lazy: Lazy,
259
259
  Memo: Memo,
260
260
  Portal: Portal,
@@ -1329,14 +1329,22 @@ if (process.env.NODE_ENV !== 'production') {
1329
1329
 
1330
1330
  var _templateObject$3, _templateObject2$3, _templateObject3$3, _templateObject4$2, _templateObject5$2, _templateObject6$2;
1331
1331
  var ProductImage = styled.img(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteralLoose(["\n min-width: 50px;\n min-height: 58px;\n @media only screen and (max-width: 640px) {\n margin: 0.5em 0;\n padding-right: 0.5em;\n }\n"])));
1332
- var ProductName = styled.h6(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteralLoose(["\n font-size: 1em;\n line-height: 1.6em;\n max-height: 1.6em;\n overflow: hidden;\n text-overflow: ellipsis;\n margin-bottom: auto;\n @media only screen and (max-width: 740px) {\n max-height: 3.8em;\n line-height: 1.25em;\n /* font-size: 0.75em0.8em; */\n }\n"])));
1333
- var CartTableRow = styled(material.TableRow)(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteralLoose(["\n position: relative;\n transition: 0.3s;\n background: white;\n .outOfStock {\n font-size: 0.75em;\n color: red;\n text-transform: uppercase;\n font-weight: 500;\n }\n .price {\n font-size: 1.19em;\n font-weight: bold;\n color: #323232;\n }\n .borderLeft {\n height: 100%;\n width: 0;\n background: #fd0015;\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 &:hover {\n background: white !important;\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: 13px;\n display: inline-block;\n }\n }\n @media only screen and (max-width: 640px) {\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"])));
1332
+ var ProductName = styled.h6(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteralLoose(["\n font-size: ", ";\n padding: 0.5rem 0;\n line-height: 1.5em;\n max-height: ", ";\n height: ", ";\n overflow: hidden;\n text-overflow: ellipsis;\n"])), function (props) {
1333
+ return props.size || '1rem';
1334
+ }, function (props) {
1335
+ return props.maxHeight ? props.maxHeight + "em" : '3.45em';
1336
+ }, function (props) {
1337
+ return props.maxHeight ? props.maxHeight + "em" : '3.45em';
1338
+ });
1339
+ var CartTableRow = styled(material.TableRow)(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteralLoose(["\n position: relative;\n transition: 0.3s;\n background: white;\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 }\n .borderLeft {\n height: 100%;\n width: 0;\n background: #fd0015;\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 &: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: 13px;\n display: inline-block;\n }\n }\n @media only screen and (max-width: 640px) {\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) {
1340
+ return props.size || '1.19rem';
1341
+ });
1334
1342
  var CartTableCell$1 = styled(material.TableCell)(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteralLoose(["\n border: none !important;\n"])));
1335
- var QuantityBox = styled.div(_templateObject5$2 || (_templateObject5$2 = _taggedTemplateLiteralLoose(["\n height: 1.75em;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n div {\n /* width:30px; */\n height: 100%;\n aspect-ratio: 1.1/1;\n display: grid;\n place-items: center;\n font-size: 0.75em;\n color: white;\n background-color: #323232;\n cursor: pointer;\n }\n .price {\n background: transparent;\n cursor: auto;\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"])));
1343
+ var QuantityBox = styled.div(_templateObject5$2 || (_templateObject5$2 = _taggedTemplateLiteralLoose(["\n height: 2.05em;\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.05/1;\n display: grid;\n place-items: center;\n font-size: 0.75em;\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"])));
1336
1344
  var DeleteBtn = styled.div(_templateObject6$2 || (_templateObject6$2 = _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"])));
1337
1345
 
1338
1346
  var CardRow = function CardRow(_ref) {
1339
- var _styles$Btn, _row$standardPrice, _row$subtotal;
1347
+ var _styles$price, _styles$Btn, _styles$name, _styles$name2, _row$standardPrice, _row$subtotal;
1340
1348
 
1341
1349
  var row = _ref.row,
1342
1350
  isItemSelected = _ref.isItemSelected,
@@ -1356,7 +1364,8 @@ var CardRow = function CardRow(_ref) {
1356
1364
  role: "checkbox",
1357
1365
  "aria-checked": isItemSelected,
1358
1366
  tabIndex: -1,
1359
- key: row.ProductId
1367
+ key: row.ProductId,
1368
+ size: styles === null || styles === void 0 ? void 0 : (_styles$price = styles.price) === null || _styles$price === void 0 ? void 0 : _styles$price.size
1360
1369
  }, /*#__PURE__*/React__default.createElement(CartTableCell$1, {
1361
1370
  padding: "checkbox"
1362
1371
  }, /*#__PURE__*/React__default.createElement("span", {
@@ -1383,11 +1392,10 @@ var CardRow = function CardRow(_ref) {
1383
1392
  id: row === null || row === void 0 ? void 0 : row.labelId,
1384
1393
  scope: "row",
1385
1394
  padding: "none"
1386
- }, /*#__PURE__*/React__default.createElement(material.Tooltip, {
1387
- title: row === null || row === void 0 ? void 0 : row.productName,
1388
- placement: "top",
1389
- arrow: true
1390
- }, /*#__PURE__*/React__default.createElement(ProductName, null, row.productName)), row.quantity > row.availableQuantity && /*#__PURE__*/React__default.createElement("p", {
1395
+ }, /*#__PURE__*/React__default.createElement(ProductName, {
1396
+ maxHeight: styles.name && (styles === null || styles === void 0 ? void 0 : (_styles$name = styles.name) === null || _styles$name === void 0 ? void 0 : _styles$name.lines) * 1.7,
1397
+ size: styles === null || styles === void 0 ? void 0 : (_styles$name2 = styles.name) === null || _styles$name2 === void 0 ? void 0 : _styles$name2.size
1398
+ }, row.productName), row.quantity > row.availableQuantity && /*#__PURE__*/React__default.createElement("p", {
1391
1399
  className: "outOfStock"
1392
1400
  }, "out of stock")), /*#__PURE__*/React__default.createElement(CartTableCell$1, {
1393
1401
  align: "center",
@@ -1402,7 +1410,7 @@ var CardRow = function CardRow(_ref) {
1402
1410
  if (loading) return;
1403
1411
  handleIncrementDecrement('decrement', row);
1404
1412
  }
1405
- }, "-"), /*#__PURE__*/React__default.createElement("div", {
1413
+ }, /*#__PURE__*/React__default.createElement(ai.AiOutlineMinus, null)), /*#__PURE__*/React__default.createElement("div", {
1406
1414
  className: "price"
1407
1415
  }, /*#__PURE__*/React__default.createElement("p", null, row === null || row === void 0 ? void 0 : row.quantity)), /*#__PURE__*/React__default.createElement("div", {
1408
1416
  className: "add",
@@ -1411,7 +1419,7 @@ var CardRow = function CardRow(_ref) {
1411
1419
  if (loading) return;
1412
1420
  handleIncrementDecrement('increment', row);
1413
1421
  }
1414
- }, "+"))), /*#__PURE__*/React__default.createElement(CartTableCell$1, {
1422
+ }, /*#__PURE__*/React__default.createElement(ai.AiOutlinePlus, null)))), /*#__PURE__*/React__default.createElement(CartTableCell$1, {
1415
1423
  alig: "center",
1416
1424
  className: "CartnoPaddingSm"
1417
1425
  }, /*#__PURE__*/React__default.createElement("p", {
@@ -1425,7 +1433,7 @@ var CardRow = function CardRow(_ref) {
1425
1433
  if (loading) return;
1426
1434
  handleRemoveProduct(row);
1427
1435
  }
1428
- }, "x")));
1436
+ }, /*#__PURE__*/React__default.createElement(ai.AiOutlineClose, null))));
1429
1437
  };
1430
1438
 
1431
1439
  var headCells = [{
@@ -1515,7 +1523,7 @@ function EnhancedTableHead(props) {
1515
1523
  active: orderBy === headCell.id,
1516
1524
  direction: orderBy === headCell.id ? order : 'asc',
1517
1525
  onClick: createSortHandler(headCell.id)
1518
- }, headCell.label) : headCell.label);
1526
+ }, /*#__PURE__*/React.createElement(Fragment, null, headCell.label)) : headCell.label);
1519
1527
  })));
1520
1528
  }
1521
1529
 
@@ -1535,6 +1543,7 @@ function EnhancedTable(_ref) {
1535
1543
  imgnotfoundUrl = _ref.imgnotfoundUrl,
1536
1544
  handleIncrementDecrement = _ref.handleIncrementDecrement,
1537
1545
  handleRemoveProduct = _ref.handleRemoveProduct,
1546
+ handleRemoveAll = _ref.handleRemoveAll,
1538
1547
  styles = _ref.styles;
1539
1548
  var cartList = cartData === null || cartData === void 0 ? void 0 : cartData.cartLineItemDtoList.map(function (li) {
1540
1549
  return _extends({}, li, {
@@ -1599,11 +1608,14 @@ function EnhancedTable(_ref) {
1599
1608
  };
1600
1609
 
1601
1610
  var handleClick = function handleClick(event, product) {
1602
- var includes = selected.includes(product.productId);
1611
+ var includes = selected.includes(product);
1603
1612
 
1604
1613
  if (includes) {
1605
1614
  var removedId = selected.filter(function (item) {
1606
- return item.Id !== (product === null || product === void 0 ? void 0 : product.productId);
1615
+ return item.productId !== (product === null || product === void 0 ? void 0 : product.productId);
1616
+ });
1617
+ console.log({
1618
+ removedId: removedId
1607
1619
  });
1608
1620
  setSelected(removedId);
1609
1621
  } else {
@@ -1618,6 +1630,7 @@ function EnhancedTable(_ref) {
1618
1630
  React.useEffect(function () {
1619
1631
  setCartArray(cartList);
1620
1632
  }, [cartData]);
1633
+ console.log(selected);
1621
1634
  return /*#__PURE__*/React.createElement(CartPageBox, null, loading && /*#__PURE__*/React.createElement(Loader, null, /*#__PURE__*/React.createElement(reactSpinners.BounceLoader, {
1622
1635
  size: 40,
1623
1636
  color: styles.Btn.background,
@@ -1655,7 +1668,12 @@ function EnhancedTable(_ref) {
1655
1668
  handleIncrementDecrement: handleIncrementDecrement,
1656
1669
  handleRemoveProduct: handleRemoveProduct
1657
1670
  });
1658
- }))))), /*#__PURE__*/React.createElement(CartButtonsRow, null, /*#__PURE__*/React.createElement("button", null, "remove selected"), /*#__PURE__*/React.createElement("button", null, "updated cart")));
1671
+ }))))), /*#__PURE__*/React.createElement(CartButtonsRow, null, /*#__PURE__*/React.createElement("button", {
1672
+ onClick: function onClick() {
1673
+ if (loading) return;
1674
+ handleRemoveAll(selected);
1675
+ }
1676
+ }, "remove selected"), /*#__PURE__*/React.createElement("button", null, "updated cart")));
1659
1677
  }
1660
1678
 
1661
1679
  var _templateObject$4, _templateObject2$4, _templateObject3$4, _templateObject4$3, _templateObject5$3, _templateObject6$3, _templateObject7$2;
@@ -1746,8 +1764,8 @@ var CartPageMainRetail = function CartPageMainRetail(_ref) {
1746
1764
  };
1747
1765
 
1748
1766
  var _templateObject$5, _templateObject2$5, _templateObject3$5, _templateObject4$4, _templateObject5$4, _templateObject6$4;
1749
- var CartSummaryContainer = styled.div(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n width: min(95%, 28.75em);\n max-width: ", ";\n display: flex;\n flex-direction: column;\n background: ", ";\n color: ", ";\n border-radius: 20px;\n padding: 2em 1em;\n align-items: center;\n margin-top: 3em;\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) {
1750
- return props.maxWidth || '24.75em';
1767
+ var CartSummaryContainer = styled.div(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n width: min(95%, 28.75em);\n max-width: ", ";\n display: flex;\n flex-direction: column;\n background: ", ";\n color: ", ";\n border-radius: 28px;\n padding: 2em 1em;\n align-items: center;\n margin-top: 3em;\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) {
1768
+ return props.maxWidth || '28.75em';
1751
1769
  }, function (props) {
1752
1770
  return props.background || '#667080';
1753
1771
  }, function (props) {
@@ -1763,12 +1781,12 @@ var CartSummaryRow = styled.div(_templateObject2$5 || (_templateObject2$5 = _tag
1763
1781
  var CartSummaryHr = styled.span(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteralLoose(["\n border: none;\n width: 100%;\n height: 1px;\n background-color: ", ";\n margin: 1em 0;\n"])), function (props) {
1764
1782
  return props.color || 'rgba(255, 255, 255, 0.5)';
1765
1783
  });
1766
- var CartSummaryInputBox = styled.form(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding-bottom: ", ";\n input {\n width: 10.81em;\n height: 2.44em;\n padding: 0.2em 0.8em;\n text-transform: capitalize;\n font-size: 0.89em;\n border-radius: ", ";\n margin-right: ", ";\n border: none;\n outline: none;\n background: ", ";\n color: ", ";\n &::placeholder {\n color: ", ";\n }\n }\n button {\n width: 7.75em;\n height: 2.44em;\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 }\n }\n"])), function (props) {
1784
+ var CartSummaryInputBox = styled.form(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding-bottom: ", ";\n\n input {\n width: 10.81rem;\n height: 2.44rem;\n padding: 0.2rem 0.8rem;\n text-transform: capitalize;\n font-size: 0.89rem;\n border-radius: ", ";\n margin-right: ", ";\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: ", ";\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 }\n }\n"])), function (props) {
1767
1785
  return props.paddingBottom ? '2em' : '0';
1768
1786
  }, function (props) {
1769
- return props.retail ? '1.19em' : '0';
1787
+ return props.retail ? '1.19rem' : '0';
1770
1788
  }, function (props) {
1771
- return props.retail ? '1em' : '0';
1789
+ return props.retail ? '1rem' : '0';
1772
1790
  }, function (props) {
1773
1791
  return props.background || '#bfc3ca';
1774
1792
  }, function (props) {
@@ -1778,7 +1796,7 @@ var CartSummaryInputBox = styled.form(_templateObject4$4 || (_templateObject4$4
1778
1796
  }, function (props) {
1779
1797
  return props.btn || '#393f48';
1780
1798
  }, function (props) {
1781
- return props.retail ? '1.19em' : 0;
1799
+ return props.retail ? '1.19rem' : 0;
1782
1800
  }, function (props) {
1783
1801
  return props.Btncolor || 'inherit';
1784
1802
  });
@@ -1888,6 +1906,7 @@ var CartPageComponent = function CartPageComponent(_ref) {
1888
1906
  cartData = _ref.cartData,
1889
1907
  handleIncrementDecrement = _ref.handleIncrementDecrement,
1890
1908
  handleRemoveProduct = _ref.handleRemoveProduct,
1909
+ handleRemoveAll = _ref.handleRemoveAll,
1891
1910
  loading = _ref.loading,
1892
1911
  imgnotfoundUrl = _ref.imgnotfoundUrl,
1893
1912
  styles = _ref.styles;
@@ -1912,7 +1931,8 @@ var CartPageComponent = function CartPageComponent(_ref) {
1912
1931
  imgnotfoundUrl: imgnotfoundUrl,
1913
1932
  styles: styles,
1914
1933
  handleIncrementDecrement: handleIncrementDecrement,
1915
- handleRemoveProduct: handleRemoveProduct
1934
+ handleRemoveProduct: handleRemoveProduct,
1935
+ handleRemoveAll: handleRemoveAll
1916
1936
  }), /*#__PURE__*/React__default.createElement(CartSummary, {
1917
1937
  retail: retail,
1918
1938
  shippingData: shippingData,