@salesgenterp/ui-components 0.3.52 → 0.3.54
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 +65 -55
- package/dist/index.js.map +1 -1
- package/dist/index.modern.js +65 -55
- package/dist/index.modern.js.map +1 -1
- package/package.json +10 -10
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
|
|
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' : '
|
|
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) {
|
|
@@ -208,12 +208,12 @@ var CartPageContainer = styled.div(_templateObject2$2 || (_templateObject2$2 = _
|
|
|
208
208
|
var CardsBox = styled.div(_templateObject3$2 || (_templateObject3$2 = _taggedTemplateLiteralLoose(["\n width: 100%;\n /* min-height: 1000px; */\n position: relative;\n max-width: 860px;\n margin-right: auto;\n padding: 1em 2em;\n display: ", ";\n grid-template-columns: 1fr 1fr;\n flex-direction: column;\n align-items: flex-start;\n grid-gap: 1em;\n justify-content: flex-start;\n align-items: center;\n border-radius: 20px;\n @media only screen and (max-width: 960px) {\n display: flex;\n }\n @media only screen and (max-width: 640px) {\n padding: 1em 0.2em;\n }\n"])), function (props) {
|
|
209
209
|
return props.retail ? 'grid' : 'flex';
|
|
210
210
|
});
|
|
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:
|
|
212
|
-
var CartTableCell = styled(material.TableCell)(_templateObject5$1 || (_templateObject5$1 = _taggedTemplateLiteralLoose(["\n padding-bottom: 1em !important;\n
|
|
213
|
-
return props.bg
|
|
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 && {\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 padding-right:
|
|
216
|
-
return props.retail ? '12px' : '
|
|
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:
|
|
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:
|
|
1333
|
-
|
|
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:
|
|
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,
|
|
@@ -1350,15 +1358,14 @@ var CardRow = function CardRow(_ref) {
|
|
|
1350
1358
|
var imgnotfoundUrlcommon = '/images/imgnotfound.jpeg';
|
|
1351
1359
|
if (imgnotfoundUrl && imgnotfoundUrl !== 'null') imgnotfoundUrlcommon = imgnotfoundUrl;
|
|
1352
1360
|
return /*#__PURE__*/React__default.createElement(CartTableRow, {
|
|
1353
|
-
hover: true,
|
|
1354
1361
|
onClick: function onClick(event) {
|
|
1355
|
-
return handleClick(event, row
|
|
1362
|
+
return handleClick(event, row);
|
|
1356
1363
|
},
|
|
1357
1364
|
role: "checkbox",
|
|
1358
1365
|
"aria-checked": isItemSelected,
|
|
1359
1366
|
tabIndex: -1,
|
|
1360
1367
|
key: row.ProductId,
|
|
1361
|
-
|
|
1368
|
+
size: styles === null || styles === void 0 ? void 0 : (_styles$price = styles.price) === null || _styles$price === void 0 ? void 0 : _styles$price.size
|
|
1362
1369
|
}, /*#__PURE__*/React__default.createElement(CartTableCell$1, {
|
|
1363
1370
|
padding: "checkbox"
|
|
1364
1371
|
}, /*#__PURE__*/React__default.createElement("span", {
|
|
@@ -1385,11 +1392,10 @@ var CardRow = function CardRow(_ref) {
|
|
|
1385
1392
|
id: row === null || row === void 0 ? void 0 : row.labelId,
|
|
1386
1393
|
scope: "row",
|
|
1387
1394
|
padding: "none"
|
|
1388
|
-
}, /*#__PURE__*/React__default.createElement(
|
|
1389
|
-
|
|
1390
|
-
|
|
1391
|
-
|
|
1392
|
-
}, /*#__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", {
|
|
1393
1399
|
className: "outOfStock"
|
|
1394
1400
|
}, "out of stock")), /*#__PURE__*/React__default.createElement(CartTableCell$1, {
|
|
1395
1401
|
align: "center",
|
|
@@ -1404,7 +1410,7 @@ var CardRow = function CardRow(_ref) {
|
|
|
1404
1410
|
if (loading) return;
|
|
1405
1411
|
handleIncrementDecrement('decrement', row);
|
|
1406
1412
|
}
|
|
1407
|
-
},
|
|
1413
|
+
}, /*#__PURE__*/React__default.createElement(ai.AiOutlineMinus, null)), /*#__PURE__*/React__default.createElement("div", {
|
|
1408
1414
|
className: "price"
|
|
1409
1415
|
}, /*#__PURE__*/React__default.createElement("p", null, row === null || row === void 0 ? void 0 : row.quantity)), /*#__PURE__*/React__default.createElement("div", {
|
|
1410
1416
|
className: "add",
|
|
@@ -1413,7 +1419,7 @@ var CardRow = function CardRow(_ref) {
|
|
|
1413
1419
|
if (loading) return;
|
|
1414
1420
|
handleIncrementDecrement('increment', row);
|
|
1415
1421
|
}
|
|
1416
|
-
},
|
|
1422
|
+
}, /*#__PURE__*/React__default.createElement(ai.AiOutlinePlus, null)))), /*#__PURE__*/React__default.createElement(CartTableCell$1, {
|
|
1417
1423
|
alig: "center",
|
|
1418
1424
|
className: "CartnoPaddingSm"
|
|
1419
1425
|
}, /*#__PURE__*/React__default.createElement("p", {
|
|
@@ -1427,7 +1433,7 @@ var CardRow = function CardRow(_ref) {
|
|
|
1427
1433
|
if (loading) return;
|
|
1428
1434
|
handleRemoveProduct(row);
|
|
1429
1435
|
}
|
|
1430
|
-
},
|
|
1436
|
+
}, /*#__PURE__*/React__default.createElement(ai.AiOutlineClose, null))));
|
|
1431
1437
|
};
|
|
1432
1438
|
|
|
1433
1439
|
var headCells = [{
|
|
@@ -1486,11 +1492,11 @@ function EnhancedTableHead(props) {
|
|
|
1486
1492
|
};
|
|
1487
1493
|
|
|
1488
1494
|
return /*#__PURE__*/React.createElement(TableHead, {
|
|
1489
|
-
className: "CartnoBelowSm"
|
|
1490
|
-
sx: {
|
|
1491
|
-
zIndex: '2'
|
|
1492
|
-
}
|
|
1495
|
+
className: "CartnoBelowSm"
|
|
1493
1496
|
}, /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(CartTableCell, {
|
|
1497
|
+
sx: {
|
|
1498
|
+
zIndex: '3 !important'
|
|
1499
|
+
},
|
|
1494
1500
|
padding: "checkbox",
|
|
1495
1501
|
bg: styles.bg
|
|
1496
1502
|
}, /*#__PURE__*/React.createElement(material.Checkbox, {
|
|
@@ -1508,15 +1514,17 @@ function EnhancedTableHead(props) {
|
|
|
1508
1514
|
padding: headCell.disablePadding ? 'none' : 'normal',
|
|
1509
1515
|
sortDirection: orderBy === headCell.id ? order : false,
|
|
1510
1516
|
sx: {
|
|
1511
|
-
textTransform: 'uppercase'
|
|
1517
|
+
textTransform: 'uppercase',
|
|
1518
|
+
zIndex: '3 !important'
|
|
1512
1519
|
},
|
|
1513
1520
|
className: (headCell === null || headCell === void 0 ? void 0 : headCell.noBelowSm) && 'CartnoBelowSm',
|
|
1514
1521
|
bg: styles.bg
|
|
1515
1522
|
}, headCell.filter ? /*#__PURE__*/React.createElement(TableSortLabel, {
|
|
1516
1523
|
active: orderBy === headCell.id,
|
|
1517
1524
|
direction: orderBy === headCell.id ? order : 'asc',
|
|
1525
|
+
hideSortIcon: false,
|
|
1518
1526
|
onClick: createSortHandler(headCell.id)
|
|
1519
|
-
}, headCell.label) : headCell.label);
|
|
1527
|
+
}, /*#__PURE__*/React.createElement(Fragment, null, headCell.label)) : headCell.label);
|
|
1520
1528
|
})));
|
|
1521
1529
|
}
|
|
1522
1530
|
|
|
@@ -1536,6 +1544,7 @@ function EnhancedTable(_ref) {
|
|
|
1536
1544
|
imgnotfoundUrl = _ref.imgnotfoundUrl,
|
|
1537
1545
|
handleIncrementDecrement = _ref.handleIncrementDecrement,
|
|
1538
1546
|
handleRemoveProduct = _ref.handleRemoveProduct,
|
|
1547
|
+
handleRemoveAll = _ref.handleRemoveAll,
|
|
1539
1548
|
styles = _ref.styles;
|
|
1540
1549
|
var cartList = cartData === null || cartData === void 0 ? void 0 : cartData.cartLineItemDtoList.map(function (li) {
|
|
1541
1550
|
return _extends({}, li, {
|
|
@@ -1560,7 +1569,6 @@ function EnhancedTable(_ref) {
|
|
|
1560
1569
|
setCartArray = _React$useState4[1];
|
|
1561
1570
|
|
|
1562
1571
|
var Sort = function Sort() {
|
|
1563
|
-
console.log(orderBy, order);
|
|
1564
1572
|
var newArray = cartArray || [];
|
|
1565
1573
|
var li = orderBy;
|
|
1566
1574
|
|
|
@@ -1588,15 +1596,10 @@ function EnhancedTable(_ref) {
|
|
|
1588
1596
|
};
|
|
1589
1597
|
|
|
1590
1598
|
var handleSelectAllClick = function handleSelectAllClick(event) {
|
|
1591
|
-
console.log(event.target.checked, 'checked');
|
|
1592
|
-
|
|
1593
1599
|
if (selected.length < (cartArray === null || cartArray === void 0 ? void 0 : cartArray.length)) {
|
|
1594
1600
|
var newSelected = [];
|
|
1595
1601
|
cartArray === null || cartArray === void 0 ? void 0 : cartArray.map(function (n) {
|
|
1596
|
-
return newSelected.push(n
|
|
1597
|
-
});
|
|
1598
|
-
console.log({
|
|
1599
|
-
newSelected: newSelected
|
|
1602
|
+
return newSelected.push(n);
|
|
1600
1603
|
});
|
|
1601
1604
|
setSelected(newSelected);
|
|
1602
1605
|
return;
|
|
@@ -1605,20 +1608,19 @@ function EnhancedTable(_ref) {
|
|
|
1605
1608
|
setSelected([]);
|
|
1606
1609
|
};
|
|
1607
1610
|
|
|
1608
|
-
var handleClick = function handleClick(event,
|
|
1609
|
-
|
|
1610
|
-
var includes = selected.includes(id);
|
|
1611
|
+
var handleClick = function handleClick(event, product) {
|
|
1612
|
+
var includes = selected.includes(product);
|
|
1611
1613
|
|
|
1612
1614
|
if (includes) {
|
|
1613
|
-
var removedId = selected.filter(function (
|
|
1614
|
-
return
|
|
1615
|
+
var removedId = selected.filter(function (item) {
|
|
1616
|
+
return item.productId !== (product === null || product === void 0 ? void 0 : product.productId);
|
|
1615
1617
|
});
|
|
1616
1618
|
console.log({
|
|
1617
1619
|
removedId: removedId
|
|
1618
1620
|
});
|
|
1619
1621
|
setSelected(removedId);
|
|
1620
1622
|
} else {
|
|
1621
|
-
setSelected([].concat(selected, [
|
|
1623
|
+
setSelected([].concat(selected, [product]));
|
|
1622
1624
|
}
|
|
1623
1625
|
};
|
|
1624
1626
|
|
|
@@ -1629,6 +1631,7 @@ function EnhancedTable(_ref) {
|
|
|
1629
1631
|
React.useEffect(function () {
|
|
1630
1632
|
setCartArray(cartList);
|
|
1631
1633
|
}, [cartData]);
|
|
1634
|
+
console.log(selected);
|
|
1632
1635
|
return /*#__PURE__*/React.createElement(CartPageBox, null, loading && /*#__PURE__*/React.createElement(Loader, null, /*#__PURE__*/React.createElement(reactSpinners.BounceLoader, {
|
|
1633
1636
|
size: 40,
|
|
1634
1637
|
color: styles.Btn.background,
|
|
@@ -1654,7 +1657,7 @@ function EnhancedTable(_ref) {
|
|
|
1654
1657
|
rowCount: cartArray === null || cartArray === void 0 ? void 0 : cartArray.length,
|
|
1655
1658
|
styles: styles
|
|
1656
1659
|
}), /*#__PURE__*/React.createElement(TableBody, null, cartArray === null || cartArray === void 0 ? void 0 : cartArray.map(function (row, index) {
|
|
1657
|
-
var isItemSelected = isSelected(row
|
|
1660
|
+
var isItemSelected = isSelected(row);
|
|
1658
1661
|
return /*#__PURE__*/React.createElement(CardRow, {
|
|
1659
1662
|
row: row,
|
|
1660
1663
|
isItemSelected: isItemSelected,
|
|
@@ -1666,18 +1669,23 @@ function EnhancedTable(_ref) {
|
|
|
1666
1669
|
handleIncrementDecrement: handleIncrementDecrement,
|
|
1667
1670
|
handleRemoveProduct: handleRemoveProduct
|
|
1668
1671
|
});
|
|
1669
|
-
}))))), /*#__PURE__*/React.createElement(CartButtonsRow, null, /*#__PURE__*/React.createElement("button",
|
|
1672
|
+
}))))), /*#__PURE__*/React.createElement(CartButtonsRow, null, /*#__PURE__*/React.createElement("button", {
|
|
1673
|
+
onClick: function onClick() {
|
|
1674
|
+
if (loading) return;
|
|
1675
|
+
handleRemoveAll(selected);
|
|
1676
|
+
}
|
|
1677
|
+
}, "remove selected"), /*#__PURE__*/React.createElement("button", null, "updated cart")));
|
|
1670
1678
|
}
|
|
1671
1679
|
|
|
1672
1680
|
var _templateObject$4, _templateObject2$4, _templateObject3$4, _templateObject4$3, _templateObject5$3, _templateObject6$3, _templateObject7$2;
|
|
1673
|
-
var CartPageCard = styled.div(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteralLoose(["\n width: min(97%, 485px);\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n padding:
|
|
1681
|
+
var CartPageCard = styled.div(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteralLoose(["\n width: min(97%, 485px);\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n padding: 1em;\n background: #ffffff;\n box-shadow: 0px 20px 35px rgba(0, 0, 0, 0.05);\n border-radius: 20px;\n position: relative;\n"])));
|
|
1674
1682
|
var CartPageImg = styled.img(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteralLoose(["\n /* width: 95px; */\n width: ", ";\n height: ", ";\n position: relative;\n margin-right: 1em;\n"])), function (props) {
|
|
1675
1683
|
return props.width || 'auto';
|
|
1676
1684
|
}, function (props) {
|
|
1677
1685
|
return props.height || '81px';
|
|
1678
1686
|
});
|
|
1679
1687
|
var NameAndQtBox = styled.div(_templateObject3$4 || (_templateObject3$4 = _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"])));
|
|
1680
|
-
var CartPageCardName = styled.div(_templateObject4$3 || (_templateObject4$3 = _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.
|
|
1688
|
+
var CartPageCardName = styled.div(_templateObject4$3 || (_templateObject4$3 = _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"])));
|
|
1681
1689
|
var QtAndPriceBox = styled.div(_templateObject5$3 || (_templateObject5$3 = _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"])));
|
|
1682
1690
|
var CartPageQtBox = styled.div(_templateObject6$3 || (_templateObject6$3 = _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"])));
|
|
1683
1691
|
var CloseBtn = styled.div(_templateObject7$2 || (_templateObject7$2 = _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"])));
|
|
@@ -1757,8 +1765,8 @@ var CartPageMainRetail = function CartPageMainRetail(_ref) {
|
|
|
1757
1765
|
};
|
|
1758
1766
|
|
|
1759
1767
|
var _templateObject$5, _templateObject2$5, _templateObject3$5, _templateObject4$4, _templateObject5$4, _templateObject6$4;
|
|
1760
|
-
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:
|
|
1761
|
-
return props.maxWidth || '
|
|
1768
|
+
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) {
|
|
1769
|
+
return props.maxWidth || '28.75em';
|
|
1762
1770
|
}, function (props) {
|
|
1763
1771
|
return props.background || '#667080';
|
|
1764
1772
|
}, function (props) {
|
|
@@ -1774,12 +1782,12 @@ var CartSummaryRow = styled.div(_templateObject2$5 || (_templateObject2$5 = _tag
|
|
|
1774
1782
|
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) {
|
|
1775
1783
|
return props.color || 'rgba(255, 255, 255, 0.5)';
|
|
1776
1784
|
});
|
|
1777
|
-
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.81rem;\n height: 2.44rem;\n padding: 0.
|
|
1785
|
+
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) {
|
|
1778
1786
|
return props.paddingBottom ? '2em' : '0';
|
|
1779
1787
|
}, function (props) {
|
|
1780
1788
|
return props.retail ? '1.19rem' : '0';
|
|
1781
1789
|
}, function (props) {
|
|
1782
|
-
return props.retail ? '
|
|
1790
|
+
return props.retail ? '1rem' : '0';
|
|
1783
1791
|
}, function (props) {
|
|
1784
1792
|
return props.background || '#bfc3ca';
|
|
1785
1793
|
}, function (props) {
|
|
@@ -1899,6 +1907,7 @@ var CartPageComponent = function CartPageComponent(_ref) {
|
|
|
1899
1907
|
cartData = _ref.cartData,
|
|
1900
1908
|
handleIncrementDecrement = _ref.handleIncrementDecrement,
|
|
1901
1909
|
handleRemoveProduct = _ref.handleRemoveProduct,
|
|
1910
|
+
handleRemoveAll = _ref.handleRemoveAll,
|
|
1902
1911
|
loading = _ref.loading,
|
|
1903
1912
|
imgnotfoundUrl = _ref.imgnotfoundUrl,
|
|
1904
1913
|
styles = _ref.styles;
|
|
@@ -1923,7 +1932,8 @@ var CartPageComponent = function CartPageComponent(_ref) {
|
|
|
1923
1932
|
imgnotfoundUrl: imgnotfoundUrl,
|
|
1924
1933
|
styles: styles,
|
|
1925
1934
|
handleIncrementDecrement: handleIncrementDecrement,
|
|
1926
|
-
handleRemoveProduct: handleRemoveProduct
|
|
1935
|
+
handleRemoveProduct: handleRemoveProduct,
|
|
1936
|
+
handleRemoveAll: handleRemoveAll
|
|
1927
1937
|
}), /*#__PURE__*/React__default.createElement(CartSummary, {
|
|
1928
1938
|
retail: retail,
|
|
1929
1939
|
shippingData: shippingData,
|