@salesgenterp/ui-components 0.4.69 → 0.4.71
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 +37 -28
- package/dist/index.js.map +1 -1
- package/dist/index.modern.js +37 -28
- package/dist/index.modern.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -208,14 +208,16 @@ var CartDrawer = function CartDrawer(_ref) {
|
|
|
208
208
|
}, "continue to checkout"))));
|
|
209
209
|
};
|
|
210
210
|
|
|
211
|
-
var _templateObject$2, _templateObject2$2, _templateObject3$2, _templateObject4$1, _templateObject5$1, _templateObject6$1, _templateObject7$1, _templateObject8;
|
|
211
|
+
var _templateObject$2, _templateObject2$2, _templateObject3$2, _templateObject4$1, _templateObject5$1, _templateObject6$1, _templateObject7$1, _templateObject8, _templateObject9;
|
|
212
212
|
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 border-radius: 28px;\n"])), function (props) {
|
|
213
213
|
return props.bg;
|
|
214
214
|
}, function (props) {
|
|
215
215
|
return props.bg || '#FAE8E5';
|
|
216
216
|
});
|
|
217
|
-
var CartPageContainer = styled.div(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteralLoose(["\n width:
|
|
218
|
-
return props.maxWidth || '
|
|
217
|
+
var CartPageContainer = styled.div(_templateObject2$2 || (_templateObject2$2 = _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 2em;\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 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) {
|
|
218
|
+
return props.maxWidth || '1620px';
|
|
219
|
+
}, function (props) {
|
|
220
|
+
return "min(" + (props.maxWidth || '1620px') + ",100%)";
|
|
219
221
|
}, function (props) {
|
|
220
222
|
return props.loading ? '0.7' : 1;
|
|
221
223
|
}, function (props) {
|
|
@@ -230,11 +232,12 @@ var CartPageContainer = styled.div(_templateObject2$2 || (_templateObject2$2 = _
|
|
|
230
232
|
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) {
|
|
231
233
|
return props.retail ? 'grid' : 'flex';
|
|
232
234
|
});
|
|
233
|
-
var
|
|
234
|
-
var
|
|
235
|
+
var CartHeading = styled.div(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n /* margin-bottom: 2em; */\n margin-left: 2em;\n margin-top: 1em;\n\n h1 {\n font-weight: 600;\n font-size: 2.0375em;\n text-transform: capitalize;\n color: inherit;\n /* margin-bottom: 1em; */\n }\n p {\n font-size: 0.875em;\n color: black;\n margin-top: 0.5em;\n }\n"])));
|
|
236
|
+
var Loader = styled.div(_templateObject5$1 || (_templateObject5$1 = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 40%;\n left: 47%;\n display: grid;\n place-items: center;\n z-index: 3;\n"])));
|
|
237
|
+
var CartTableCell = styled(material.TableCell)(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteralLoose(["\n && {\n padding-bottom: 1em !important;\n border: none !important;\n font-size: 0.75rem;\n background: ", ";\n font-family: 'karla-fonts';\n }\n span {\n font-size: 0.75rem;\n }\n"])), function (props) {
|
|
235
238
|
return "" + props.bg;
|
|
236
239
|
});
|
|
237
|
-
var CartTableContainer = styled(material.TableContainer)(
|
|
240
|
+
var CartTableContainer = styled(material.TableContainer)(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteralLoose(["\n max-height: 580px;\n min-height: 460px;\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) {
|
|
238
241
|
return props.retail ? '12px' : '10px';
|
|
239
242
|
}, function (props) {
|
|
240
243
|
return props.retail ? '#667080' : 'rgba(102, 112, 128, 0.5)';
|
|
@@ -243,12 +246,12 @@ var CartTableContainer = styled(material.TableContainer)(_templateObject6$1 || (
|
|
|
243
246
|
}, function (props) {
|
|
244
247
|
return props.color || '#ef9687';
|
|
245
248
|
});
|
|
246
|
-
var CartButtonsRow = styled.div(
|
|
249
|
+
var CartButtonsRow = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n width: 100%;\n display: flex;\n flex-direction: row;\n justify-content: flex-end;\n align-items: center;\n padding-right: 1.85em;\n button {\n background: ", ";\n color: ", ";\n padding: 0.5em 1em;\n margin-left: 1em;\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) {
|
|
247
250
|
return props.bg || 'rgba(253, 0, 21, 1)';
|
|
248
251
|
}, function (props) {
|
|
249
252
|
return props.color || 'white';
|
|
250
253
|
});
|
|
251
|
-
var CartPageBox = styled.div(
|
|
254
|
+
var CartPageBox = styled.div(_templateObject9 || (_templateObject9 = _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"])));
|
|
252
255
|
|
|
253
256
|
function createCommonjsModule(fn, module) {
|
|
254
257
|
return module = { exports: {} }, fn(module, module.exports), module.exports;
|
|
@@ -1351,18 +1354,18 @@ if (process.env.NODE_ENV !== 'production') {
|
|
|
1351
1354
|
|
|
1352
1355
|
var _templateObject$3, _templateObject2$3, _templateObject3$3, _templateObject4$2, _templateObject5$2, _templateObject6$2;
|
|
1353
1356
|
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"])));
|
|
1354
|
-
var ProductName = styled.h6(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteralLoose(["\n font-size: ", ";\n padding: 0.5rem 0;\n line-height: 1.
|
|
1357
|
+
var ProductName = styled.h6(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteralLoose(["\n font-size: ", ";\n padding: 0.5rem 0;\n line-height: 1.3em;\n max-height: ", ";\n height: ", ";\n overflow: hidden;\n text-overflow: ellipsis;\n"])), function (props) {
|
|
1355
1358
|
return props.size || '1rem';
|
|
1356
1359
|
}, function (props) {
|
|
1357
|
-
return props.maxHeight ? props.maxHeight + "em" : '3.
|
|
1360
|
+
return props.maxHeight ? props.maxHeight + "em" : '3.25em';
|
|
1358
1361
|
}, function (props) {
|
|
1359
1362
|
return props.maxHeight ? props.maxHeight + "em" : '3.45em';
|
|
1360
1363
|
});
|
|
1361
|
-
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) {
|
|
1364
|
+
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 /* font-size: 1.15em; */\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) {
|
|
1362
1365
|
return props.size || '1.19rem';
|
|
1363
1366
|
});
|
|
1364
|
-
var CartTableCell$1 = styled(material.TableCell)(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteralLoose(["\n border: none !important;\n"])));
|
|
1365
|
-
var QuantityBox = styled.div(_templateObject5$2 || (_templateObject5$2 = _taggedTemplateLiteralLoose(["\n height:
|
|
1367
|
+
var CartTableCell$1 = styled(material.TableCell)(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteralLoose(["\n && {\n border: none !important;\n font-family: 'karla-fonts';\n }\n"])));
|
|
1368
|
+
var QuantityBox = styled.div(_templateObject5$2 || (_templateObject5$2 = _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.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"])));
|
|
1366
1369
|
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"])));
|
|
1367
1370
|
|
|
1368
1371
|
var CardRow = function CardRow(_ref) {
|
|
@@ -1396,6 +1399,7 @@ var CardRow = function CardRow(_ref) {
|
|
|
1396
1399
|
background: styles === null || styles === void 0 ? void 0 : (_styles$Btn = styles.Btn) === null || _styles$Btn === void 0 ? void 0 : _styles$Btn.background
|
|
1397
1400
|
}
|
|
1398
1401
|
}), /*#__PURE__*/React__default.createElement(material.Checkbox, {
|
|
1402
|
+
size: "small",
|
|
1399
1403
|
color: "primary",
|
|
1400
1404
|
checked: isItemSelected,
|
|
1401
1405
|
inputProps: {
|
|
@@ -1415,7 +1419,7 @@ var CardRow = function CardRow(_ref) {
|
|
|
1415
1419
|
scope: "row",
|
|
1416
1420
|
padding: "none"
|
|
1417
1421
|
}, /*#__PURE__*/React__default.createElement(ProductName, {
|
|
1418
|
-
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.
|
|
1422
|
+
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.5,
|
|
1419
1423
|
size: styles === null || styles === void 0 ? void 0 : (_styles$name2 = styles.name) === null || _styles$name2 === void 0 ? void 0 : _styles$name2.size
|
|
1420
1424
|
}, row.productName), row.quantity > row.availableQuantity && /*#__PURE__*/React__default.createElement("p", {
|
|
1421
1425
|
className: "outOfStock"
|
|
@@ -1455,12 +1459,16 @@ var CardRow = function CardRow(_ref) {
|
|
|
1455
1459
|
if (loading) return;
|
|
1456
1460
|
handleRemoveProduct(row);
|
|
1457
1461
|
}
|
|
1458
|
-
}, /*#__PURE__*/React__default.createElement(ai.AiOutlineClose,
|
|
1462
|
+
}, /*#__PURE__*/React__default.createElement(ai.AiOutlineClose, {
|
|
1463
|
+
style: {
|
|
1464
|
+
fontSize: 'inherit'
|
|
1465
|
+
}
|
|
1466
|
+
}))));
|
|
1459
1467
|
};
|
|
1460
1468
|
|
|
1461
1469
|
var headCells = [{
|
|
1462
1470
|
id: 'image',
|
|
1463
|
-
numeric:
|
|
1471
|
+
numeric: true,
|
|
1464
1472
|
disablePadding: true,
|
|
1465
1473
|
label: 'product',
|
|
1466
1474
|
filter: false
|
|
@@ -1485,7 +1493,7 @@ var headCells = [{
|
|
|
1485
1493
|
filter: true
|
|
1486
1494
|
}, {
|
|
1487
1495
|
id: 'subtotal',
|
|
1488
|
-
numeric:
|
|
1496
|
+
numeric: false,
|
|
1489
1497
|
disablePadding: false,
|
|
1490
1498
|
label: 'subtotal',
|
|
1491
1499
|
filter: true
|
|
@@ -1522,6 +1530,7 @@ function EnhancedTableHead(props) {
|
|
|
1522
1530
|
padding: "checkbox",
|
|
1523
1531
|
bg: styles.bg
|
|
1524
1532
|
}, /*#__PURE__*/React.createElement(material.Checkbox, {
|
|
1533
|
+
size: "small",
|
|
1525
1534
|
color: "primary",
|
|
1526
1535
|
indeterminate: numSelected > 0 && numSelected < rowCount,
|
|
1527
1536
|
checked: rowCount > 0 && numSelected === rowCount,
|
|
@@ -1659,9 +1668,9 @@ function EnhancedTable(_ref) {
|
|
|
1659
1668
|
loading: true
|
|
1660
1669
|
})), /*#__PURE__*/React.createElement(Box, {
|
|
1661
1670
|
sx: {
|
|
1662
|
-
width: '100%'
|
|
1663
|
-
|
|
1664
|
-
|
|
1671
|
+
width: '100%'
|
|
1672
|
+
},
|
|
1673
|
+
paddingBottom: "2em"
|
|
1665
1674
|
}, /*#__PURE__*/React.createElement(CartTableContainer, {
|
|
1666
1675
|
bg: styles === null || styles === void 0 ? void 0 : (_styles$scroll = styles.scroll) === null || _styles$scroll === void 0 ? void 0 : _styles$scroll.bg,
|
|
1667
1676
|
color: styles === null || styles === void 0 ? void 0 : (_styles$scroll2 = styles.scroll) === null || _styles$scroll2 === void 0 ? void 0 : _styles$scroll2.background
|
|
@@ -1790,8 +1799,8 @@ var CartPageMainRetail = function CartPageMainRetail(_ref) {
|
|
|
1790
1799
|
};
|
|
1791
1800
|
|
|
1792
1801
|
var _templateObject$5, _templateObject2$5, _templateObject3$5, _templateObject4$4, _templateObject5$4, _templateObject6$4;
|
|
1793
|
-
var CartSummaryContainer = styled.div(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n width:
|
|
1794
|
-
return props.maxWidth || '
|
|
1802
|
+
var CartSummaryContainer = styled.div(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n width: 26.375em;\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: 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 font-weight: 300;\n cursor: pointer;\n }\n"])), function (props) {
|
|
1803
|
+
return props.maxWidth || '26.375em';
|
|
1795
1804
|
}, function (props) {
|
|
1796
1805
|
return props.background || '#667080';
|
|
1797
1806
|
}, function (props) {
|
|
@@ -1807,7 +1816,7 @@ var CartSummaryRow = styled.div(_templateObject2$5 || (_templateObject2$5 = _tag
|
|
|
1807
1816
|
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) {
|
|
1808
1817
|
return props.color || 'rgba(255, 255, 255, 0.5)';
|
|
1809
1818
|
});
|
|
1810
|
-
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) {
|
|
1819
|
+
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 font-family: 'karla-fonts';\n cursor: pointer;\n font-size: 0.75em;\n transition: 0.3s;\n &:hover {\n letter-spacing: 1px;\n }\n }\n"])), function (props) {
|
|
1811
1820
|
return props.paddingBottom ? '2em' : '0';
|
|
1812
1821
|
}, function (props) {
|
|
1813
1822
|
return props.retail ? '1.19rem' : '0';
|
|
@@ -1826,7 +1835,7 @@ var CartSummaryInputBox = styled.form(_templateObject4$4 || (_templateObject4$4
|
|
|
1826
1835
|
}, function (props) {
|
|
1827
1836
|
return props.Btncolor || 'inherit';
|
|
1828
1837
|
});
|
|
1829
|
-
var CartSummaryCheckoutBtn = styled.button(_templateObject5$4 || (_templateObject5$4 = _taggedTemplateLiteralLoose(["\n font-size: 0.95em;\n font-weight: 700;\n background: ", ";\n color: ", ";\n cursor: pointer;\n text-transform: uppercase;\n border: none;\n outline: none;\n width: 16.81em;\n height: 3.
|
|
1838
|
+
var CartSummaryCheckoutBtn = styled.button(_templateObject5$4 || (_templateObject5$4 = _taggedTemplateLiteralLoose(["\n font-size: 0.95em;\n font-weight: 700;\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-family: 'karla-fonts';\n font-size: 0.94em;\n margin: 1em auto;\n transition: 0.3s;\n margin-top: 2em;\n &:hover {\n opacity: 0.8;\n }\n"])), function (props) {
|
|
1830
1839
|
return props.background || '#393f48';
|
|
1831
1840
|
}, function (props) {
|
|
1832
1841
|
return props.color || 'inherit';
|
|
@@ -1857,7 +1866,7 @@ var CartSummary = function CartSummary(_ref) {
|
|
|
1857
1866
|
return /*#__PURE__*/React__default.createElement(CartSummaryContainer, {
|
|
1858
1867
|
background: cartSummary.bg,
|
|
1859
1868
|
color: cartSummary.color
|
|
1860
|
-
}, /*#__PURE__*/React__default.createElement("p", null, "Cart summary"), /*#__PURE__*/React__default.createElement(CartSummaryHr, {
|
|
1869
|
+
}, /*#__PURE__*/React__default.createElement("p", null, "Cart summary:"), /*#__PURE__*/React__default.createElement(CartSummaryHr, {
|
|
1861
1870
|
color: cartSummary.hr
|
|
1862
1871
|
}), /*#__PURE__*/React__default.createElement(CartSummaryRow, null, /*#__PURE__*/React__default.createElement("h6", null, "subtotal"), /*#__PURE__*/React__default.createElement("h5", null, "$", subtotal === null || subtotal === void 0 ? void 0 : subtotal.toFixed(2))), /*#__PURE__*/React__default.createElement(CartSummaryHr, {
|
|
1863
1872
|
color: cartSummary.hr
|
|
@@ -1940,7 +1949,7 @@ var CartPageComponent = function CartPageComponent(_ref) {
|
|
|
1940
1949
|
return /*#__PURE__*/React__default.createElement(CartPageSection, {
|
|
1941
1950
|
bg: styles.bg,
|
|
1942
1951
|
retail: retail
|
|
1943
|
-
}, /*#__PURE__*/React__default.createElement(CartPageContainer, {
|
|
1952
|
+
}, /*#__PURE__*/React__default.createElement(CartHeading, null, /*#__PURE__*/React__default.createElement("h1", null, "Shopping Cart"), /*#__PURE__*/React__default.createElement("p", null, "You have 4 items in your cart")), /*#__PURE__*/React__default.createElement(CartPageContainer, {
|
|
1944
1953
|
retail: retail,
|
|
1945
1954
|
loading: loading
|
|
1946
1955
|
}, retail ? /*#__PURE__*/React__default.createElement(CartPageMainRetail, {
|
|
@@ -2026,7 +2035,7 @@ var CheckoutSummary = function CheckoutSummary(_ref) {
|
|
|
2026
2035
|
}, paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.name)));
|
|
2027
2036
|
};
|
|
2028
2037
|
|
|
2029
|
-
var _templateObject$8, _templateObject2$8, _templateObject3$8, _templateObject4$6, _templateObject5$6, _templateObject6$6, _templateObject7$4, _templateObject8$1, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
|
|
2038
|
+
var _templateObject$8, _templateObject2$8, _templateObject3$8, _templateObject4$6, _templateObject5$6, _templateObject6$6, _templateObject7$4, _templateObject8$1, _templateObject9$1, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
|
|
2030
2039
|
var StepContainer = styled.div(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteralLoose(["\n width: 100%;\n min-width: 57.43em;\n max-width: 57.43em;\n background: white;\n padding: 1em 2em;\n background: #ffffff;\n border-radius: 20px;\n margin-left: 2em;\n margin-top: -2em;\n margin-bottom: 1em;\n @media screen and (max-width: 1305px) {\n width: 80vw;\n min-width: 0;\n }\n @media screen and (max-width: 768px) {\n width: 96%;\n margin-left: 1em;\n padding: 0.8em;\n }\n @media screen and (max-width: 540px) {\n width: 94%;\n margin-left: 1.2em;\n }\n"])));
|
|
2031
2040
|
var StepsContent = styled.div(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteralLoose(["\n padding-left: 1.565em;\n min-height: max-content;\n p {\n font-size: 0.75em;\n }\n .bold {\n text-transform: uppercase;\n word-spacing: 5px;\n margin-top: 0.95em;\n span {\n font-weight: 600;\n cursor: pointer;\n font-size: 0.94rem;\n }\n .red {\n color: red;\n }\n }\n @media screen and (max-width: 768px) {\n padding: 0;\n width: 100%;\n }\n"])));
|
|
2032
2041
|
var StepsHeaderContainer = styled.div(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteralLoose(["\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n font-family: 'karla-fonts';\n color: #323232;\n /* padding: ", "; */\n margin-bottom: ", ";\n margin-top: ", ";\n margin-left: ", ";\n /* color: grey; */\n border-bottom: 1px solid #fff0ec;\n background: #ffffff;\n border-radius: 20px;\n max-width: 919px;\n\n min-height: 4.35em;\n max-height: 4.35em;\n padding: ", ";\n h5 {\n font-size: 16px;\n font-weight: 600;\n text-transform: capitalize;\n margin-left: 0.6em;\n }\n .icon {\n font-size: 1.3em;\n margin-right: 8px;\n }\n .dropIcon {\n font-size: 1.4em;\n cursor: pointer;\n transform: rotate(-90deg);\n transition: 0.3s;\n color: rgba(50, 50, 50, 0.75);\n cursor: ", ";\n }\n .red {\n font-weight: 600;\n color: #fd0015;\n font-size: inherit;\n }\n @media screen and (max-width: 768px) {\n max-width: 97%;\n margin-left: 0.5em;\n padding-right: 1em;\n h5 {\n font-size: 12px;\n }\n }\n"])), function (props) {
|
|
@@ -2065,7 +2074,7 @@ var ButtonRowContainer = styled.div(_templateObject8$1 || (_templateObject8$1 =
|
|
|
2065
2074
|
}, function (props) {
|
|
2066
2075
|
return props.disabledBack ? 'not-allowed' : 'pointer';
|
|
2067
2076
|
});
|
|
2068
|
-
var CheckBoxRow = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n cursor: pointer;\n padding: ", ";\n margin-left: ", ";\n p {\n font-size: 0.85em;\n }\n button {\n border: none;\n padding: 0.8em 3em;\n background: rgba(253, 0, 21, 1);\n color: white;\n text-transform: uppercase;\n font-weight: 600;\n margin: 1em;\n margin-top: 2em;\n transition: 0.4s;\n cursor: pointer;\n font-family: 'karla-fonts';\n min-width: max-content;\n &:hover {\n padding: 0.7em 2.7em;\n }\n }\n .back {\n background-color: rgba(107, 106, 106, 1);\n padding: 0.8em 2em;\n &:hover {\n padding: 0.8em 2.4em;\n }\n }\n .bold,\n .red {\n font-weight: 700;\n font-size: 1.125em;\n }\n .red {\n color: #fd0015;\n margin-left: 0.5em;\n }\n @media only screen and (max-width: 640px) {\n button {\n &:hover {\n padding: 0.8em 3em;\n }\n }\n\n .back {\n &:hover {\n padding: 0.8em 2em;\n }\n margin-left: 0;\n }\n }\n"])), function (props) {
|
|
2077
|
+
var CheckBoxRow = styled.div(_templateObject9$1 || (_templateObject9$1 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n cursor: pointer;\n padding: ", ";\n margin-left: ", ";\n p {\n font-size: 0.85em;\n }\n button {\n border: none;\n padding: 0.8em 3em;\n background: rgba(253, 0, 21, 1);\n color: white;\n text-transform: uppercase;\n font-weight: 600;\n margin: 1em;\n margin-top: 2em;\n transition: 0.4s;\n cursor: pointer;\n font-family: 'karla-fonts';\n min-width: max-content;\n &:hover {\n padding: 0.7em 2.7em;\n }\n }\n .back {\n background-color: rgba(107, 106, 106, 1);\n padding: 0.8em 2em;\n &:hover {\n padding: 0.8em 2.4em;\n }\n }\n .bold,\n .red {\n font-weight: 700;\n font-size: 1.125em;\n }\n .red {\n color: #fd0015;\n margin-left: 0.5em;\n }\n @media only screen and (max-width: 640px) {\n button {\n &:hover {\n padding: 0.8em 3em;\n }\n }\n\n .back {\n &:hover {\n padding: 0.8em 2em;\n }\n margin-left: 0;\n }\n }\n"])), function (props) {
|
|
2069
2078
|
return props.padding;
|
|
2070
2079
|
}, function (props) {
|
|
2071
2080
|
return props.marginLeft;
|