@salesgenterp/ui-components 0.4.181 → 0.4.183
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 +151 -86
- package/dist/index.js.map +1 -1
- package/dist/index.modern.js +158 -93
- package/dist/index.modern.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -199,7 +199,9 @@ var CartDrawer = function CartDrawer(_ref) {
|
|
|
199
199
|
onClick: function onClick() {
|
|
200
200
|
handleClose();
|
|
201
201
|
}
|
|
202
|
-
})),
|
|
202
|
+
})), /*#__PURE__*/React__default.createElement(material.Box, {
|
|
203
|
+
bgcolor: "#fff"
|
|
204
|
+
}, cartData && (cartData === null || cartData === void 0 ? void 0 : cartData.totalCartQuantity) > 0 ? /*#__PURE__*/React__default.createElement(CartDrawerProductContainer, {
|
|
203
205
|
opacity: loading ? '.4' : '1'
|
|
204
206
|
}, cartData === null || cartData === void 0 ? void 0 : (_cartData$cartLineIte = cartData.cartLineItemDtoList) === null || _cartData$cartLineIte === void 0 ? void 0 : _cartData$cartLineIte.map(function (product, i) {
|
|
205
207
|
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, loading && /*#__PURE__*/React__default.createElement(CartDrawerLoader, null, /*#__PURE__*/React__default.createElement(reactSpinners.PuffLoader, {
|
|
@@ -218,7 +220,7 @@ var CartDrawer = function CartDrawer(_ref) {
|
|
|
218
220
|
color: color
|
|
219
221
|
}, /*#__PURE__*/React__default.createElement(bs.BsCartX, {
|
|
220
222
|
className: "icon"
|
|
221
|
-
}), /*#__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, {
|
|
223
|
+
}), /*#__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, {
|
|
222
224
|
flexDirection: "row",
|
|
223
225
|
justifyContent: "space-between",
|
|
224
226
|
alignItems: "center",
|
|
@@ -242,7 +244,7 @@ var CartPageSection = styled__default.section(_templateObject$2 || (_templateObj
|
|
|
242
244
|
}, function (props) {
|
|
243
245
|
return props.bg || '#FAE8E5';
|
|
244
246
|
});
|
|
245
|
-
var CartPageContainer = styled__default.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 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
|
|
247
|
+
var CartPageContainer = styled__default.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 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 border-color: #fae8e5;\n /* border-color: ", "; */\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: 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) {
|
|
246
248
|
return props.maxWidth || '1620px';
|
|
247
249
|
}, function (props) {
|
|
248
250
|
return "min(" + (props.maxWidth || '1620px') + ",100%)";
|
|
@@ -267,10 +269,14 @@ var CartHeading = styled__default.div(_templateObject4$1 || (_templateObject4$1
|
|
|
267
269
|
});
|
|
268
270
|
var Loader = styled__default.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"])));
|
|
269
271
|
|
|
270
|
-
var CartTableCell = styled__default(material.TableCell)(_templateObject6$1 || (_templateObject6$1 = _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 font-family: 'karla-fonts';\n }\n span {\n
|
|
272
|
+
var CartTableCell = styled__default(material.TableCell)(_templateObject6$1 || (_templateObject6$1 = _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 font-family: 'karla-fonts';\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) {
|
|
271
273
|
return "" + props.bg;
|
|
272
274
|
}, function (props) {
|
|
273
275
|
return "" + props.color || 'inherit';
|
|
276
|
+
}, function (props) {
|
|
277
|
+
return "" + props.color || 'inherit';
|
|
278
|
+
}, function (props) {
|
|
279
|
+
return "" + props.color || 'inherit';
|
|
274
280
|
});
|
|
275
281
|
var CartTableContainer = styled__default(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) {
|
|
276
282
|
return props.retail ? '12px' : '10px';
|
|
@@ -1396,14 +1402,18 @@ var ProductName = styled__default.h6(_templateObject2$3 || (_templateObject2$3 =
|
|
|
1396
1402
|
}, function (props) {
|
|
1397
1403
|
return props.maxHeight ? props.maxHeight + "em" : '2.80em';
|
|
1398
1404
|
});
|
|
1399
|
-
var CartTableRow = styled__default(material.TableRow)(_templateObject3$3 || (_templateObject3$3 = _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 width: 0;\n background:
|
|
1405
|
+
var CartTableRow = styled__default(material.TableRow)(_templateObject3$3 || (_templateObject3$3 = _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 width: 0;\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: 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) {
|
|
1400
1406
|
return props.size || '1.19em';
|
|
1407
|
+
}, function (prop) {
|
|
1408
|
+
return prop.bg;
|
|
1409
|
+
}, function (prop) {
|
|
1410
|
+
return prop.bg;
|
|
1401
1411
|
});
|
|
1402
1412
|
var CartTableCell$1 = styled__default(material.TableCell)(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteralLoose(["\n && {\n border: none !important;\n font-family: 'karla-fonts';\n font-size: 1em;\n }\n"])));
|
|
1403
1413
|
var QuantityBox = styled__default.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.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"])));
|
|
1404
1414
|
var DeleteBtn = styled__default.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"])));
|
|
1405
1415
|
var CardRow = function CardRow(_ref) {
|
|
1406
|
-
var _styles$price, _styles$Btn,
|
|
1416
|
+
var _styles$price, _styles$Btn, _row$standardPrice, _row$subtotal;
|
|
1407
1417
|
var row = _ref.row,
|
|
1408
1418
|
isItemSelected = _ref.isItemSelected,
|
|
1409
1419
|
handleClick = _ref.handleClick,
|
|
@@ -1423,14 +1433,12 @@ var CardRow = function CardRow(_ref) {
|
|
|
1423
1433
|
"aria-checked": isItemSelected,
|
|
1424
1434
|
tabIndex: -1,
|
|
1425
1435
|
key: row.ProductId,
|
|
1426
|
-
size: styles === null || styles === void 0 ? void 0 : (_styles$price = styles.price) === null || _styles$price === void 0 ? void 0 : _styles$price.size
|
|
1436
|
+
size: styles === null || styles === void 0 ? void 0 : (_styles$price = styles.price) === null || _styles$price === void 0 ? void 0 : _styles$price.size,
|
|
1437
|
+
bg: (styles === null || styles === void 0 ? void 0 : styles.borderLeft) || (styles === null || styles === void 0 ? void 0 : (_styles$Btn = styles.Btn) === null || _styles$Btn === void 0 ? void 0 : _styles$Btn.background)
|
|
1427
1438
|
}, /*#__PURE__*/React__default.createElement(CartTableCell$1, {
|
|
1428
1439
|
padding: "checkbox"
|
|
1429
1440
|
}, /*#__PURE__*/React__default.createElement("span", {
|
|
1430
|
-
className: "borderLeft"
|
|
1431
|
-
style: {
|
|
1432
|
-
background: (styles === null || styles === void 0 ? void 0 : styles.borderLeft) || (styles === null || styles === void 0 ? void 0 : (_styles$Btn = styles.Btn) === null || _styles$Btn === void 0 ? void 0 : _styles$Btn.background)
|
|
1433
|
-
}
|
|
1441
|
+
className: "borderLeft"
|
|
1434
1442
|
}), /*#__PURE__*/React__default.createElement(material.Checkbox, {
|
|
1435
1443
|
size: "small",
|
|
1436
1444
|
color: "primary",
|
|
@@ -1438,14 +1446,7 @@ var CardRow = function CardRow(_ref) {
|
|
|
1438
1446
|
inputProps: {
|
|
1439
1447
|
'aria-labelledby': 'product'
|
|
1440
1448
|
},
|
|
1441
|
-
className: "cartCheckBox"
|
|
1442
|
-
sx: _extends({}, (styles === null || styles === void 0 ? void 0 : (_styles$cartSummary = styles.cartSummary) === null || _styles$cartSummary === void 0 ? void 0 : _styles$cartSummary.bg) && {
|
|
1443
|
-
'&.Mui-checked': {
|
|
1444
|
-
svg: {
|
|
1445
|
-
color: styles === null || styles === void 0 ? void 0 : (_styles$cartSummary2 = styles.cartSummary) === null || _styles$cartSummary2 === void 0 ? void 0 : _styles$cartSummary2.bg
|
|
1446
|
-
}
|
|
1447
|
-
}
|
|
1448
|
-
})
|
|
1449
|
+
className: "cartCheckBox"
|
|
1449
1450
|
})), /*#__PURE__*/React__default.createElement(CartTableCell$1, {
|
|
1450
1451
|
className: "CartnoPaddingSm"
|
|
1451
1452
|
}, /*#__PURE__*/React__default.createElement(ProductImage, {
|
|
@@ -1589,22 +1590,15 @@ function EnhancedTableHead(props) {
|
|
|
1589
1590
|
}
|
|
1590
1591
|
})
|
|
1591
1592
|
})), headCells.map(function (headCell) {
|
|
1593
|
+
var _styles$cartSummary3;
|
|
1592
1594
|
return /*#__PURE__*/React.createElement(CartTableCell, {
|
|
1593
1595
|
key: headCell.id,
|
|
1594
1596
|
align: headCell.numeric ? 'center' : 'left',
|
|
1595
1597
|
padding: headCell.disablePadding ? 'none' : 'normal',
|
|
1596
1598
|
sortDirection: orderBy === headCell.id ? order : false,
|
|
1597
|
-
|
|
1598
|
-
|
|
1599
|
-
|
|
1600
|
-
}, (styles === null || styles === void 0 ? void 0 : styles.headingColor) && {
|
|
1601
|
-
svg: {
|
|
1602
|
-
color: styles === null || styles === void 0 ? void 0 : styles.headingColor
|
|
1603
|
-
}
|
|
1604
|
-
}),
|
|
1605
|
-
className: (headCell === null || headCell === void 0 ? void 0 : headCell.noBelowSm) && 'CartnoBelowSm',
|
|
1606
|
-
bg: styles.bg,
|
|
1607
|
-
color: styles === null || styles === void 0 ? void 0 : styles.headingColor
|
|
1599
|
+
className: "bg-transparent " + ((headCell === null || headCell === void 0 ? void 0 : headCell.noBelowSm) && 'CartnoBelowSm'),
|
|
1600
|
+
bg: styles === null || styles === void 0 ? void 0 : styles.bg,
|
|
1601
|
+
color: styles === null || styles === void 0 ? void 0 : (_styles$cartSummary3 = styles.cartSummary) === null || _styles$cartSummary3 === void 0 ? void 0 : _styles$cartSummary3.color
|
|
1608
1602
|
}, headCell.filter ? /*#__PURE__*/React.createElement(TableSortLabel
|
|
1609
1603
|
, {
|
|
1610
1604
|
active: true,
|
|
@@ -2108,9 +2102,11 @@ var CheckoutSummary = function CheckoutSummary(_ref) {
|
|
|
2108
2102
|
}, paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.name)));
|
|
2109
2103
|
};
|
|
2110
2104
|
|
|
2111
|
-
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;
|
|
2105
|
+
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, _templateObject16;
|
|
2112
2106
|
var StepContainer = styled__default.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"])));
|
|
2113
|
-
var StepsContent = styled__default.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"])))
|
|
2107
|
+
var StepsContent = styled__default.div(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteralLoose(["\n padding-left: 1.565em;\n min-height: max-content;\n .MuiOutlinedInput-root {\n background: ", ";\n }\n\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"])), function (props) {
|
|
2108
|
+
return (props.bg || 'transparent') + '!important';
|
|
2109
|
+
});
|
|
2114
2110
|
var StepsHeaderContainer = styled__default.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) {
|
|
2115
2111
|
return props.single ? '1.8em 2em' : '1em 0';
|
|
2116
2112
|
}, function (props) {
|
|
@@ -2138,7 +2134,11 @@ var CommonCheckoutBtn = styled__default.button(_templateObject5$6 || (_templateO
|
|
|
2138
2134
|
});
|
|
2139
2135
|
var Select = styled__default.div.attrs({
|
|
2140
2136
|
className: 'checkout-input'
|
|
2141
|
-
})(_templateObject6$6 || (_templateObject6$6 = _taggedTemplateLiteralLoose(["\n width: 100%;\n height: 54px;\n border-radius: 10px;\n
|
|
2137
|
+
})(_templateObject6$6 || (_templateObject6$6 = _taggedTemplateLiteralLoose(["\n width: 100%;\n height: 54px;\n border-radius: 10px;\n background: ", ";\n outline: none;\n border: none;\n padding: 0 1em;\n cursor: pointer;\n select {\n width: 100%;\n height: 100%;\n border: none;\n outline: none;\n padding: 0.5em 0;\n color: rgba(107, 106, 106, 0.6);\n background: ", ";\n }\n"])), function (props) {
|
|
2138
|
+
return props.bg || 'transparent';
|
|
2139
|
+
}, function (props) {
|
|
2140
|
+
return props.bg || 'transparent';
|
|
2141
|
+
});
|
|
2142
2142
|
var SaveButton = styled__default.button.attrs({
|
|
2143
2143
|
className: 'checkout-btn'
|
|
2144
2144
|
})(_templateObject7$4 || (_templateObject7$4 = _taggedTemplateLiteralLoose(["\n border: none;\n outline: none;\n font-size: 0.8125em;\n text-transform: uppercase;\n font-weight: 600;\n border-radius: 7px;\n padding: 0.55em 1em;\n background: ", ";\n display: grid;\n place-items: center;\n color: white;\n margin: 1em 0;\n letter-spacing: 1px;\n transition: 0.4s;\n cursor: ", ";\n &:hover,\n &:focus {\n opacity: 0.7;\n }\n"])), function (props) {
|
|
@@ -2146,17 +2146,32 @@ var SaveButton = styled__default.button.attrs({
|
|
|
2146
2146
|
}, function (props) {
|
|
2147
2147
|
return props.disabled ? 'not-allowed' : 'pointer';
|
|
2148
2148
|
});
|
|
2149
|
-
var ButtonRowContainer = styled__default.div(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteralLoose(["\n width: 100%;\n display: flex;\n flex-direction: row;\n justify-content: flex-end;\n align-items: center;\n button {\n width: 4.862em;\n height: 1.96em;\n border-radius: 0.43em;\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n font-weight: 600;\n letter-spacing: 1px;\n color: white;\n background-color:
|
|
2149
|
+
var ButtonRowContainer = styled__default.div(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteralLoose(["\n width: 100%;\n display: flex;\n flex-direction: row;\n justify-content: flex-end;\n align-items: center;\n button {\n width: 4.862em;\n height: 1.96em;\n border-radius: 0.43em;\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n font-weight: 600;\n letter-spacing: 1px;\n color: white;\n background-color: ", ";\n border: 2px solid\n ", ";\n cursor: ", ";\n }\n .back {\n font-size: 0.875em;\n font-weight: 500;\n justify-content: flex-start;\n margin-right: 0.2em;\n color: #323232;\n background: transparent;\n border: none;\n cursor: ", ";\n font-size: 0.8em;\n transition: 0.4s;\n .icon {\n font-size: 1.2em;\n margin-right: 2px;\n }\n &:hover,\n &:focus {\n letter-spacing: 1px;\n outline: none;\n }\n }\n"])), function (props) {
|
|
2150
|
+
return props.color || '#fd0015';
|
|
2151
|
+
}, function (props) {
|
|
2152
|
+
return props.color ? material.alpha(props.color, 0.87) : 'rgba(254, 81, 96, 0.87)';
|
|
2153
|
+
}, function (props) {
|
|
2150
2154
|
return props.disabledNext ? 'not-allowed' : 'pointer';
|
|
2151
2155
|
}, function (props) {
|
|
2152
2156
|
return props.disabledBack ? 'not-allowed' : 'pointer';
|
|
2153
2157
|
});
|
|
2154
|
-
var CheckBoxRow = styled__default.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:
|
|
2158
|
+
var CheckBoxRow = styled__default.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\n button {\n border: none;\n padding: 0.8em 3em;\n background: ", ";\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: ", ";\n padding: 0.8em 2em;\n &:hover {\n padding: 0.8em 2.4em;\n }\n }\n .bold,\n .red {\n font-weight: 600;\n font-size: 1.125em;\n }\n .red {\n margin-left: 0.5em;\n color: ", ";\n }\n .medium {\n font-weight: 600;\n font-size: 1em;\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) {
|
|
2155
2159
|
return props.padding;
|
|
2156
2160
|
}, function (props) {
|
|
2157
2161
|
return props.marginLeft;
|
|
2162
|
+
}, function (props) {
|
|
2163
|
+
return props.bg || 'rgba(253, 0, 21, 1)';
|
|
2164
|
+
}, function (props) {
|
|
2165
|
+
return props.bg ? material.alpha(props.bg, 0.6) : 'rgba(107, 106, 106, 1)';
|
|
2166
|
+
}, function (prop) {
|
|
2167
|
+
return prop.colorText || 'red';
|
|
2168
|
+
});
|
|
2169
|
+
var CreditCardFextField = styled__default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n .MuiOutlinedInput-root {\n background: ", ";\n }\n .save-btn {\n background: ", ";\n }\n"])), function (prop) {
|
|
2170
|
+
return prop.bgInput + '!important' || '';
|
|
2171
|
+
}, function (prop) {
|
|
2172
|
+
return prop.btnBg + '!important' || '';
|
|
2158
2173
|
});
|
|
2159
|
-
var DeliveryOption = styled__default.div(
|
|
2174
|
+
var DeliveryOption = styled__default.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n max-width: 691px;\n height: 40px;\n padding: 0 1em;\n border: 1px solid transparent;\n transition: 0.3s;\n\n background-color: ", ";\n border-bottom: 1px solid rgba(255, 240, 236, 1);\n border: ", ";\n border-radius: ", ";\n &:hover {\n background-color: ", ";\n border: ", ";\n border-radius: 5px;\n }\n p {\n font-weight: 500;\n color: black;\n font-size: 0.95em;\n text-transform: capitalize;\n }\n .circle {\n border-radius: 50%;\n display: grid;\n place-items: center;\n background: linear-gradient(345.48deg, #3c332a -131.29%, #ffffff 124.82%);\n margin-right: 1em;\n width: 14px;\n height: 14px;\n min-width: 14px;\n min-height: 14px;\n cursor: pointer;\n .inner {\n width: 10px;\n height: 10px;\n border-radius: 50%;\n display: grid;\n place-items: center;\n background: linear-gradient(\n 326.37deg,\n rgba(67, 58, 42, 0.9) -219.66%,\n rgba(255, 255, 255, 0.9) 90.45%\n );\n box-shadow: inset -1px -1px 1px rgba(255, 255, 255, 0.45),\n inset 0px 0px 10px rgba(0, 0, 0, 0.2);\n }\n .fill {\n width: 6px;\n height: 6px;\n background: radial-gradient(\n 15.79% 15.79% at 36.84% 31.58%,\n #ffffff 0%,\n rgba(255, 255, 255, 0) 100%\n )\n /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */,\n linear-gradient(\n 358.85deg,\n rgba(157, 18, 30, 0.2) -19.81%,\n rgba(12, 96, 157, 0) 64.74%\n ),\n radial-gradient(50% 50% at 50% 50%, #fab0b6 0%, #fd0015 100%), #fd0015;\n background-blend-mode: normal, multiply, normal, normal;\n box-shadow: 0px 0.5px 0px rgba(253, 0, 21, 0.25),\n 0px 1px 1px rgba(253, 0, 21, 0.2);\n border-radius: 50%;\n background: ", ";\n }\n }\n .amount {\n margin-left: auto;\n color: ", ";\n font-weight: ", ";\n font-size: 0.95em;\n }\n"])), function (props) {
|
|
2160
2175
|
return props.hovered ? props.bg : '';
|
|
2161
2176
|
}, function (props) {
|
|
2162
2177
|
return props.hovered ? "1px solid " + props.border : '';
|
|
@@ -2169,21 +2184,33 @@ var DeliveryOption = styled__default.div(_templateObject10 || (_templateObject10
|
|
|
2169
2184
|
}, function (props) {
|
|
2170
2185
|
return props.color || '#fd0015';
|
|
2171
2186
|
}, function (props) {
|
|
2172
|
-
return props.color || '#fd0015';
|
|
2187
|
+
return props.buttonBg || props.color || '#fd0015';
|
|
2173
2188
|
}, function (props) {
|
|
2174
|
-
return props.hovered ? '
|
|
2189
|
+
return props.hovered ? '800' : '700';
|
|
2175
2190
|
});
|
|
2176
2191
|
|
|
2177
|
-
var CreditCard = styled__default.div(
|
|
2178
|
-
var PaymentLi = styled__default.div(
|
|
2192
|
+
var CreditCard = styled__default.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n width: 70px;\n min-height: 48px;\n max-height: 50px;\n background-color: white;\n border: 3px solid rgba(217, 217, 217, 0.1);\n display: grid;\n place-items: center;\n margin: auto;\n cursor: pointer;\n overflow: hidden;\n border-radius: 5px;\n transition: 0.1s;\n border: 1px solid transparent;\n text-align: center;\n p {\n font-size: 10px;\n }\n"])));
|
|
2193
|
+
var PaymentLi = styled__default.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n margin-bottom: 1.5em;\n cursor: pointer;\n .circle {\n /* background: #323232; */\n width: 16px;\n height: 16px;\n display: grid;\n place-items: center;\n border-radius: 50%;\n border: 1px solid #323232;\n margin-right: 1em;\n }\n .innerCircle {\n background: #323232;\n border-radius: 50%;\n width: 6px;\n height: 6px;\n }\n p {\n font-size: 1em;\n color: black;\n text-transform: capitalize;\n font-weight: 500;\n }\n"])));
|
|
2179
2194
|
|
|
2180
|
-
var StyledTableRow = styled__default(material.TableRow)(
|
|
2181
|
-
return props.colored ? 'rgba(255, 240, 236, 1)' : 'white';
|
|
2195
|
+
var StyledTableRow = styled__default(material.TableRow)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n && {\n box-shadow: none;\n border: none;\n background-color: ", ";\n p {\n font-size: 0.9em;\n font-family: 'karla-fonts';\n }\n .max {\n min-width: max-content;\n }\n .red {\n color: ", "\n font-weight: inherit;\n }\n .light {\n font-weight: 300;\n }\n .price {\n font-weight: 600;\n }\n .sm {\n font-weight: 500;\n }\n .bolder {\n font-weight: 700;\n font-size: 1em;\n }\n @media only screen and (max-width: 640px) {\n p {\n font-size: 12px;\n }\n .sm {\n font-size: 10px;\n }\n .price,\n .red {\n font-size: 10px;\n }\n .total {\n font-size: 14px;\n }\n .bolder {\n font-size: 12px;\n }\n }\n }\n"])), function (props) {
|
|
2196
|
+
return props.colored ? props.bg || "'rgba(255, 240, 236, 1)'" : 'white';
|
|
2197
|
+
}, function (props) {
|
|
2198
|
+
return props.bg || 'red';
|
|
2182
2199
|
});
|
|
2183
|
-
var StyledTableCell = styled__default(material.TableCell)(
|
|
2200
|
+
var StyledTableCell = styled__default(material.TableCell)(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n && {\n border: none;\n font-size: 1em;\n .noAboveSm {\n display: none;\n }\n @media only screen and (max-width: 748px) {\n display: ", ";\n padding: 0.5em 0.3em;\n .noAboveSm {\n display: inline-block;\n margin-right: 6px;\n }\n }\n }\n"])), function (props) {
|
|
2184
2201
|
return props.noSmall ? 'none' : '';
|
|
2185
2202
|
});
|
|
2186
|
-
var BottomGrid = styled__default(material.Grid)(
|
|
2203
|
+
var BottomGrid = styled__default(material.Grid)(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n .bold {\n font-weight: 600;\n text-transform: capitalize;\n margin: 1em 0;\n font-size: 1em;\n }\n .icon {\n font-size: 1.6em;\n color: ", ";\n }\n textarea {\n width: 100%;\n resize: none;\n border: 1px solid\n ", ";\n border-radius: 4px;\n margin-bottom: 2em;\n padding: 1em;\n background: ", ";\n }\n p {\n font-size: 12px;\n .ul {\n text-decoration: underline;\n font-size: inherit;\n }\n }\n .bottom {\n margin-left: 3em;\n font-style: italic;\n span {\n font-weight: 600;\n color: ", ";\n\n cursor: pointer;\n &:hover {\n text-decoration: underline;\n }\n }\n }\n"])), function (prop) {
|
|
2204
|
+
return prop.bg || 'rgba(253, 0, 21, 1)';
|
|
2205
|
+
}, function (prop) {
|
|
2206
|
+
var _prop$bgTextArea;
|
|
2207
|
+
return ((_prop$bgTextArea = prop.bgTextArea) === null || _prop$bgTextArea === void 0 ? void 0 : _prop$bgTextArea.border) || 'rgba(253, 0, 21, 0.5)';
|
|
2208
|
+
}, function (prop) {
|
|
2209
|
+
var _prop$bgTextArea2;
|
|
2210
|
+
return ((_prop$bgTextArea2 = prop.bgTextArea) === null || _prop$bgTextArea2 === void 0 ? void 0 : _prop$bgTextArea2.bg) || '#fff8f6';
|
|
2211
|
+
}, function (props) {
|
|
2212
|
+
return props.primaryColor || 'rgba(253, 0, 21, 1)';
|
|
2213
|
+
});
|
|
2187
2214
|
|
|
2188
2215
|
var CheckoutInput = function CheckoutInput(_ref) {
|
|
2189
2216
|
var controlls = _ref.controlls;
|
|
@@ -2374,10 +2401,12 @@ var ButtonRow = function ButtonRow(_ref) {
|
|
|
2374
2401
|
var handleBack = _ref.handleBack,
|
|
2375
2402
|
handleNext = _ref.handleNext,
|
|
2376
2403
|
backDisabled = _ref.backDisabled,
|
|
2377
|
-
nextDisabled = _ref.nextDisabled
|
|
2404
|
+
nextDisabled = _ref.nextDisabled,
|
|
2405
|
+
color = _ref.color;
|
|
2378
2406
|
return /*#__PURE__*/React__default.createElement(ButtonRowContainer, {
|
|
2379
2407
|
disabledBack: backDisabled,
|
|
2380
|
-
disabledNext: nextDisabled
|
|
2408
|
+
disabledNext: nextDisabled,
|
|
2409
|
+
color: color
|
|
2381
2410
|
}, /*#__PURE__*/React__default.createElement("button", {
|
|
2382
2411
|
className: "back",
|
|
2383
2412
|
tabIndex: "1",
|
|
@@ -2401,7 +2430,8 @@ var ButtonRow = function ButtonRow(_ref) {
|
|
|
2401
2430
|
var StoreForm = function StoreForm(_ref) {
|
|
2402
2431
|
var control = _ref.control,
|
|
2403
2432
|
_onSubmit = _ref.onSubmit,
|
|
2404
|
-
handleSubmit = _ref.handleSubmit
|
|
2433
|
+
handleSubmit = _ref.handleSubmit,
|
|
2434
|
+
color = _ref.color;
|
|
2405
2435
|
return /*#__PURE__*/React__default.createElement(material.Grid, {
|
|
2406
2436
|
container: true,
|
|
2407
2437
|
columnSpacing: 1,
|
|
@@ -2468,7 +2498,9 @@ var StoreForm = function StoreForm(_ref) {
|
|
|
2468
2498
|
})), /*#__PURE__*/React__default.createElement(material.Grid, {
|
|
2469
2499
|
item: true,
|
|
2470
2500
|
xs: 4
|
|
2471
|
-
}, /*#__PURE__*/React__default.createElement(SaveButton,
|
|
2501
|
+
}, /*#__PURE__*/React__default.createElement(SaveButton, {
|
|
2502
|
+
color: color
|
|
2503
|
+
}, "save store")));
|
|
2472
2504
|
};
|
|
2473
2505
|
|
|
2474
2506
|
var AddressForm = function AddressForm(_ref) {
|
|
@@ -2476,7 +2508,8 @@ var AddressForm = function AddressForm(_ref) {
|
|
|
2476
2508
|
countries = _ref.countries,
|
|
2477
2509
|
states = _ref.states,
|
|
2478
2510
|
_onSubmit = _ref.onSubmit,
|
|
2479
|
-
handleSubmit = _ref.handleSubmit
|
|
2511
|
+
handleSubmit = _ref.handleSubmit,
|
|
2512
|
+
color = _ref.color;
|
|
2480
2513
|
return /*#__PURE__*/React__default.createElement(material.Grid, {
|
|
2481
2514
|
container: true,
|
|
2482
2515
|
rowSpacing: 2,
|
|
@@ -2571,12 +2604,13 @@ var AddressForm = function AddressForm(_ref) {
|
|
|
2571
2604
|
xs: 8,
|
|
2572
2605
|
sm: 8
|
|
2573
2606
|
}, /*#__PURE__*/React__default.createElement(SaveButton, {
|
|
2607
|
+
color: color,
|
|
2574
2608
|
type: "submit"
|
|
2575
2609
|
}, "Save address")));
|
|
2576
2610
|
};
|
|
2577
2611
|
|
|
2578
2612
|
var Step1 = function Step1(_ref) {
|
|
2579
|
-
var _addressList$, _addressList, _addressList2;
|
|
2613
|
+
var _addressList$, _styles$input, _styles$input2, _styles$button, _addressList, _styles$input3, _addressList2, _styles$button2, _styles$button3;
|
|
2580
2614
|
var handleNext = _ref.handleNext,
|
|
2581
2615
|
setShipping = _ref.setShipping,
|
|
2582
2616
|
setBilling = _ref.setBilling,
|
|
@@ -2587,7 +2621,8 @@ var Step1 = function Step1(_ref) {
|
|
|
2587
2621
|
setSelectedStore = _ref.setSelectedStore,
|
|
2588
2622
|
countries = _ref.countries,
|
|
2589
2623
|
setSelectedCountry = _ref.setSelectedCountry,
|
|
2590
|
-
states = _ref.states
|
|
2624
|
+
states = _ref.states,
|
|
2625
|
+
styles = _ref.styles;
|
|
2591
2626
|
var _useForm = reactHookForm.useForm(),
|
|
2592
2627
|
control = _useForm.control,
|
|
2593
2628
|
handleSubmit = _useForm.handleSubmit;
|
|
@@ -2648,7 +2683,9 @@ var Step1 = function Step1(_ref) {
|
|
|
2648
2683
|
return /*#__PURE__*/React__default.createElement(StepContainer, null, /*#__PURE__*/React__default.createElement(StepsHeaderComponent, {
|
|
2649
2684
|
text: 'billing information',
|
|
2650
2685
|
icon: 2
|
|
2651
|
-
}), /*#__PURE__*/React__default.createElement(StepsContent,
|
|
2686
|
+
}), /*#__PURE__*/React__default.createElement(StepsContent, {
|
|
2687
|
+
bg: styles === null || styles === void 0 ? void 0 : (_styles$input = styles.input) === null || _styles$input === void 0 ? void 0 : _styles$input.bg
|
|
2688
|
+
}, /*#__PURE__*/React__default.createElement(material.Grid, {
|
|
2652
2689
|
container: true,
|
|
2653
2690
|
rowSpacing: 2,
|
|
2654
2691
|
columnSpacing: 1
|
|
@@ -2657,7 +2694,8 @@ var Step1 = function Step1(_ref) {
|
|
|
2657
2694
|
xs: 12,
|
|
2658
2695
|
sm: 10
|
|
2659
2696
|
}, /*#__PURE__*/React__default.createElement(Select, {
|
|
2660
|
-
className: "checkout-input"
|
|
2697
|
+
className: "checkout-input",
|
|
2698
|
+
bg: styles === null || styles === void 0 ? void 0 : (_styles$input2 = styles.input) === null || _styles$input2 === void 0 ? void 0 : _styles$input2.bg
|
|
2661
2699
|
}, /*#__PURE__*/React__default.createElement("select", {
|
|
2662
2700
|
value: selectedStore,
|
|
2663
2701
|
onChange: function onChange(e) {
|
|
@@ -2671,7 +2709,8 @@ var Step1 = function Step1(_ref) {
|
|
|
2671
2709
|
}))))), selectedStore === 99999999 && /*#__PURE__*/React__default.createElement(StoreForm, {
|
|
2672
2710
|
control: control,
|
|
2673
2711
|
onSubmit: onSubmit,
|
|
2674
|
-
handleSubmit: handleSubmit
|
|
2712
|
+
handleSubmit: handleSubmit,
|
|
2713
|
+
color: styles === null || styles === void 0 ? void 0 : (_styles$button = styles.button) === null || _styles$button === void 0 ? void 0 : _styles$button.bg
|
|
2675
2714
|
}), /*#__PURE__*/React__default.createElement(material.Grid, {
|
|
2676
2715
|
container: true
|
|
2677
2716
|
}, /*#__PURE__*/React__default.createElement(material.Grid, {
|
|
@@ -2681,7 +2720,11 @@ var Step1 = function Step1(_ref) {
|
|
|
2681
2720
|
sx: {
|
|
2682
2721
|
padding: '1em 0'
|
|
2683
2722
|
}
|
|
2684
|
-
}, ((_addressList = addressList) === null || _addressList === void 0 ? void 0 : _addressList.length) > 0 && /*#__PURE__*/React__default.createElement(Select,
|
|
2723
|
+
}, ((_addressList = addressList) === null || _addressList === void 0 ? void 0 : _addressList.length) > 0 && /*#__PURE__*/React__default.createElement(Select, {
|
|
2724
|
+
style: {
|
|
2725
|
+
backgroundColor: styles === null || styles === void 0 ? void 0 : (_styles$input3 = styles.input) === null || _styles$input3 === void 0 ? void 0 : _styles$input3.bg
|
|
2726
|
+
}
|
|
2727
|
+
}, /*#__PURE__*/React__default.createElement("select", {
|
|
2685
2728
|
value: address,
|
|
2686
2729
|
onChange: function onChange(e) {
|
|
2687
2730
|
return setAddress(parseInt(e.target.value));
|
|
@@ -2696,7 +2739,8 @@ var Step1 = function Step1(_ref) {
|
|
|
2696
2739
|
handleSubmit: handleSubmitAddress,
|
|
2697
2740
|
onSubmit: addAddress,
|
|
2698
2741
|
countries: countries,
|
|
2699
|
-
states: states
|
|
2742
|
+
states: states,
|
|
2743
|
+
color: styles === null || styles === void 0 ? void 0 : (_styles$button2 = styles.button) === null || _styles$button2 === void 0 ? void 0 : _styles$button2.bg
|
|
2700
2744
|
}), /*#__PURE__*/React__default.createElement(material.Grid, {
|
|
2701
2745
|
item: true,
|
|
2702
2746
|
xs: 12
|
|
@@ -2719,6 +2763,7 @@ var Step1 = function Step1(_ref) {
|
|
|
2719
2763
|
checkedIcon: /*#__PURE__*/React__default.createElement(gr.GrRadialSelected, null)
|
|
2720
2764
|
}), /*#__PURE__*/React__default.createElement("p", null, "Ship to a different address ")), /*#__PURE__*/React__default.createElement(ButtonRow
|
|
2721
2765
|
, {
|
|
2766
|
+
color: styles === null || styles === void 0 ? void 0 : (_styles$button3 = styles.button) === null || _styles$button3 === void 0 ? void 0 : _styles$button3.bg,
|
|
2722
2767
|
backDisabled: true,
|
|
2723
2768
|
handleNext: function handleNext() {
|
|
2724
2769
|
next();
|
|
@@ -2728,7 +2773,7 @@ var Step1 = function Step1(_ref) {
|
|
|
2728
2773
|
};
|
|
2729
2774
|
|
|
2730
2775
|
var Step2 = function Step2(_ref) {
|
|
2731
|
-
var _addressList$, _addressList;
|
|
2776
|
+
var _addressList$, _addressList, _styles$button;
|
|
2732
2777
|
var handleBack = _ref.handleBack,
|
|
2733
2778
|
_handleNext = _ref.handleNext,
|
|
2734
2779
|
options = _ref.options,
|
|
@@ -2827,7 +2872,8 @@ var Step2 = function Step2(_ref) {
|
|
|
2827
2872
|
key: i,
|
|
2828
2873
|
bg: styles === null || styles === void 0 ? void 0 : (_styles$input = styles.input) === null || _styles$input === void 0 ? void 0 : _styles$input.bg,
|
|
2829
2874
|
border: styles === null || styles === void 0 ? void 0 : (_styles$input2 = styles.input) === null || _styles$input2 === void 0 ? void 0 : _styles$input2.border,
|
|
2830
|
-
color: styles === null || styles === void 0 ? void 0 : styles.primaryColor
|
|
2875
|
+
color: styles === null || styles === void 0 ? void 0 : styles.primaryColor,
|
|
2876
|
+
buttonBg: styles === null || styles === void 0 ? void 0 : styles.button.bg
|
|
2831
2877
|
}, /*#__PURE__*/React__default.createElement("div", {
|
|
2832
2878
|
className: "circle"
|
|
2833
2879
|
}, /*#__PURE__*/React__default.createElement("span", {
|
|
@@ -2843,7 +2889,8 @@ var Step2 = function Step2(_ref) {
|
|
|
2843
2889
|
setShipping(address, method);
|
|
2844
2890
|
_handleNext();
|
|
2845
2891
|
},
|
|
2846
|
-
nextDisabled: showShipping && !address || (address === null || address === void 0 ? void 0 : address.id) === 99999999
|
|
2892
|
+
nextDisabled: showShipping && !address || (address === null || address === void 0 ? void 0 : address.id) === 99999999,
|
|
2893
|
+
color: styles === null || styles === void 0 ? void 0 : (_styles$button = styles.button) === null || _styles$button === void 0 ? void 0 : _styles$button.bg
|
|
2847
2894
|
})));
|
|
2848
2895
|
};
|
|
2849
2896
|
|
|
@@ -2964,7 +3011,8 @@ var CreditCardForm = function CreditCardForm(_ref) {
|
|
|
2964
3011
|
} : {
|
|
2965
3012
|
marginBottom: '3em',
|
|
2966
3013
|
padding: '.8em 1em'
|
|
2967
|
-
}
|
|
3014
|
+
},
|
|
3015
|
+
className: "save-btn"
|
|
2968
3016
|
}, saved ? 'saved' : 'save')));
|
|
2969
3017
|
};
|
|
2970
3018
|
|
|
@@ -3045,13 +3093,14 @@ var PaymentForm = /*#__PURE__*/function (_React$Component) {
|
|
|
3045
3093
|
}(React__default.Component);
|
|
3046
3094
|
|
|
3047
3095
|
var Step3 = function Step3(_ref) {
|
|
3048
|
-
var _selectedMethod$name;
|
|
3096
|
+
var _selectedMethod$name, _styles$button2;
|
|
3049
3097
|
var handleBack = _ref.handleBack,
|
|
3050
3098
|
_handleNext = _ref.handleNext,
|
|
3051
3099
|
setPaymentDetails = _ref.setPaymentDetails,
|
|
3052
3100
|
payments = _ref.payments,
|
|
3053
3101
|
storeCredits = _ref.storeCredits,
|
|
3054
|
-
total = _ref.total
|
|
3102
|
+
total = _ref.total,
|
|
3103
|
+
styles = _ref.styles;
|
|
3055
3104
|
var _useState = React.useState(payments && payments[0]),
|
|
3056
3105
|
selectedMethod = _useState[0],
|
|
3057
3106
|
setSelectedMethod = _useState[1];
|
|
@@ -3072,7 +3121,8 @@ var Step3 = function Step3(_ref) {
|
|
|
3072
3121
|
paddingBottom: '1.5em',
|
|
3073
3122
|
marginTop: '-1em',
|
|
3074
3123
|
color: 'grey'
|
|
3075
|
-
}
|
|
3124
|
+
},
|
|
3125
|
+
colorText: styles === null || styles === void 0 ? void 0 : styles.bg
|
|
3076
3126
|
}, /*#__PURE__*/React__default.createElement("p", {
|
|
3077
3127
|
className: "bold"
|
|
3078
3128
|
}, "Due Amount:"), /*#__PURE__*/React__default.createElement("span", {
|
|
@@ -3096,6 +3146,7 @@ var Step3 = function Step3(_ref) {
|
|
|
3096
3146
|
}, "$", storeCr === null || storeCr === void 0 ? void 0 : storeCr.toFixed(2)))) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null), /*#__PURE__*/React__default.createElement(StepsContent, null, payments === null || payments === void 0 ? void 0 : payments.map(function (payment, i) {
|
|
3097
3147
|
var _payment$name;
|
|
3098
3148
|
if (payment !== null && payment !== void 0 && (_payment$name = payment.name) !== null && _payment$name !== void 0 && _payment$name.toLowerCase().includes('card')) {
|
|
3149
|
+
var _styles$input, _styles$button;
|
|
3099
3150
|
return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
|
|
3100
3151
|
key: i
|
|
3101
3152
|
}, /*#__PURE__*/React__default.createElement(PaymentLi, {
|
|
@@ -3114,12 +3165,15 @@ var Step3 = function Step3(_ref) {
|
|
|
3114
3165
|
style: storeCredits >= total && useStoreCr ? {
|
|
3115
3166
|
opacity: '.5'
|
|
3116
3167
|
} : {}
|
|
3168
|
+
}, /*#__PURE__*/React__default.createElement(CreditCardFextField, {
|
|
3169
|
+
bgInput: styles === null || styles === void 0 ? void 0 : (_styles$input = styles.input) === null || _styles$input === void 0 ? void 0 : _styles$input.bg,
|
|
3170
|
+
btnBg: styles === null || styles === void 0 ? void 0 : (_styles$button = styles.button) === null || _styles$button === void 0 ? void 0 : _styles$button.bg
|
|
3117
3171
|
}, /*#__PURE__*/React__default.createElement(PaymentForm, {
|
|
3118
3172
|
handleSave: function handleSave(data) {
|
|
3119
3173
|
return setCard(data);
|
|
3120
3174
|
},
|
|
3121
3175
|
saved: card ? true : false
|
|
3122
|
-
})));
|
|
3176
|
+
}))));
|
|
3123
3177
|
} else {
|
|
3124
3178
|
return /*#__PURE__*/React__default.createElement(PaymentLi, {
|
|
3125
3179
|
style: storeCredits >= total && useStoreCr ? {
|
|
@@ -3141,7 +3195,8 @@ var Step3 = function Step3(_ref) {
|
|
|
3141
3195
|
setPaymentDetails(useStoreCr, useStoreCr && storeCredits > total ? null : selectedMethod, isCard && card);
|
|
3142
3196
|
_handleNext();
|
|
3143
3197
|
},
|
|
3144
|
-
nextDisabled: useStoreCr && storeCredits < total && isCard && !card || !useStoreCr && isCard && !card
|
|
3198
|
+
nextDisabled: useStoreCr && storeCredits < total && isCard && !card || !useStoreCr && isCard && !card,
|
|
3199
|
+
color: styles === null || styles === void 0 ? void 0 : (_styles$button2 = styles.button) === null || _styles$button2 === void 0 ? void 0 : _styles$button2.bg
|
|
3145
3200
|
})));
|
|
3146
3201
|
};
|
|
3147
3202
|
|
|
@@ -3152,7 +3207,8 @@ var Step4 = function Step4(_ref) {
|
|
|
3152
3207
|
clickRedirect = _ref.clickRedirect,
|
|
3153
3208
|
loading = _ref.loading,
|
|
3154
3209
|
placeOrder = _ref.placeOrder,
|
|
3155
|
-
storeCredits = _ref.storeCredits
|
|
3210
|
+
storeCredits = _ref.storeCredits,
|
|
3211
|
+
styles = _ref.styles;
|
|
3156
3212
|
var _React$useState = React__default.useState(false),
|
|
3157
3213
|
checked = _React$useState[0],
|
|
3158
3214
|
setChecked = _React$useState[1];
|
|
@@ -3170,11 +3226,12 @@ var Step4 = function Step4(_ref) {
|
|
|
3170
3226
|
},
|
|
3171
3227
|
size: "small"
|
|
3172
3228
|
}, /*#__PURE__*/React__default.createElement(material.TableBody, null, cartData === null || cartData === void 0 ? void 0 : (_cartData$cartLineIte = cartData.cartLineItemDtoList) === null || _cartData$cartLineIte === void 0 ? void 0 : _cartData$cartLineIte.map(function (row, i) {
|
|
3173
|
-
var _row$standardPrice, _ref2;
|
|
3229
|
+
var _styles$input, _row$standardPrice, _ref2;
|
|
3174
3230
|
return /*#__PURE__*/React__default.createElement(StyledTableRow, {
|
|
3175
3231
|
key: row.name,
|
|
3176
3232
|
colored: i % 2 === 0,
|
|
3177
|
-
className: i % 2 === 0 ? 'primaryLightBgColor' : ''
|
|
3233
|
+
className: i % 2 === 0 ? 'primaryLightBgColor' : '',
|
|
3234
|
+
bg: styles === null || styles === void 0 ? void 0 : (_styles$input = styles.input) === null || _styles$input === void 0 ? void 0 : _styles$input.bg
|
|
3178
3235
|
}, /*#__PURE__*/React__default.createElement(StyledTableCell, {
|
|
3179
3236
|
noSmall: true
|
|
3180
3237
|
}, /*#__PURE__*/React__default.createElement("p", {
|
|
@@ -3188,12 +3245,13 @@ var Step4 = function Step4(_ref) {
|
|
|
3188
3245
|
}, "ID: #", row === null || row === void 0 ? void 0 : row.productId), /*#__PURE__*/React__default.createElement("span", {
|
|
3189
3246
|
className: "light"
|
|
3190
3247
|
}, row.productName))), /*#__PURE__*/React__default.createElement(StyledTableCell, {
|
|
3191
|
-
align: "left"
|
|
3248
|
+
align: "left",
|
|
3249
|
+
color: styles === null || styles === void 0 ? void 0 : styles.bg
|
|
3192
3250
|
}, /*#__PURE__*/React__default.createElement("p", {
|
|
3193
3251
|
className: "price max"
|
|
3194
3252
|
}, (_row$standardPrice = row.standardPrice) === null || _row$standardPrice === void 0 ? void 0 : _row$standardPrice.toFixed(2), /*#__PURE__*/React__default.createElement("span", {
|
|
3195
3253
|
className: "red primaryColor"
|
|
3196
|
-
}, "x ", row.quantity))), /*#__PURE__*/React__default.createElement(StyledTableCell, {
|
|
3254
|
+
}, ' ', "x ", row.quantity))), /*#__PURE__*/React__default.createElement(StyledTableCell, {
|
|
3197
3255
|
align: "center"
|
|
3198
3256
|
}, /*#__PURE__*/React__default.createElement("p", {
|
|
3199
3257
|
className: "price max"
|
|
@@ -3272,7 +3330,10 @@ var Step4 = function Step4(_ref) {
|
|
|
3272
3330
|
}, "$", ((cartData === null || cartData === void 0 ? void 0 : cartData.totalCartPrice) - storeCr || 0).toFixed(2)))))), /*#__PURE__*/React__default.createElement(BottomGrid, {
|
|
3273
3331
|
container: true,
|
|
3274
3332
|
columnSpacing: 0,
|
|
3275
|
-
rowSpacing: 0
|
|
3333
|
+
rowSpacing: 0,
|
|
3334
|
+
bgTextArea: styles === null || styles === void 0 ? void 0 : styles.input,
|
|
3335
|
+
bg: styles === null || styles === void 0 ? void 0 : styles.bg,
|
|
3336
|
+
primaryColor: styles === null || styles === void 0 ? void 0 : styles.primaryColor
|
|
3276
3337
|
}, /*#__PURE__*/React__default.createElement(material.Grid, {
|
|
3277
3338
|
item: true,
|
|
3278
3339
|
xs: 12
|
|
@@ -3290,7 +3351,8 @@ var Step4 = function Step4(_ref) {
|
|
|
3290
3351
|
xs: 11,
|
|
3291
3352
|
sm: 11,
|
|
3292
3353
|
md: 11.5
|
|
3293
|
-
}, /*#__PURE__*/React__default.createElement(
|
|
3354
|
+
}, /*#__PURE__*/React__default.createElement(material.Box
|
|
3355
|
+
, null, /*#__PURE__*/React__default.createElement("textarea", {
|
|
3294
3356
|
rows: "3",
|
|
3295
3357
|
cols: "4",
|
|
3296
3358
|
placeholder: "Comments for the order....",
|
|
@@ -3299,7 +3361,7 @@ var Step4 = function Step4(_ref) {
|
|
|
3299
3361
|
setComments(e.target.value);
|
|
3300
3362
|
},
|
|
3301
3363
|
className: "primaryBorderColor"
|
|
3302
|
-
})), /*#__PURE__*/React__default.createElement(material.Grid, {
|
|
3364
|
+
}))), /*#__PURE__*/React__default.createElement(material.Grid, {
|
|
3303
3365
|
item: true,
|
|
3304
3366
|
xs: 12
|
|
3305
3367
|
}, /*#__PURE__*/React__default.createElement(CheckBoxRow, null, /*#__PURE__*/React__default.createElement(material.Checkbox, {
|
|
@@ -3330,8 +3392,10 @@ var Step4 = function Step4(_ref) {
|
|
|
3330
3392
|
onClick: function onClick() {
|
|
3331
3393
|
return clickRedirect('cart');
|
|
3332
3394
|
},
|
|
3333
|
-
className: "primaryColor"
|
|
3334
|
-
}, "Edit your cart"))), /*#__PURE__*/React__default.createElement(CheckBoxRow,
|
|
3395
|
+
className: "primaryColor edit-card"
|
|
3396
|
+
}, "Edit your cart"))), /*#__PURE__*/React__default.createElement(CheckBoxRow, {
|
|
3397
|
+
bg: styles === null || styles === void 0 ? void 0 : styles.primaryColor
|
|
3398
|
+
}, /*#__PURE__*/React__default.createElement("button", {
|
|
3335
3399
|
className: "back",
|
|
3336
3400
|
onClick: function onClick() {
|
|
3337
3401
|
return handleBack();
|
|
@@ -3519,6 +3583,7 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
|
|
|
3519
3583
|
padding: 0
|
|
3520
3584
|
}
|
|
3521
3585
|
}, /*#__PURE__*/React__default.createElement(Step1, {
|
|
3586
|
+
styles: styles,
|
|
3522
3587
|
currstep: currStep,
|
|
3523
3588
|
handleBack: handleBack,
|
|
3524
3589
|
handleNext: handleNext,
|
|
@@ -3563,7 +3628,8 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
|
|
|
3563
3628
|
setPaymentDetails: setPaymentDetails,
|
|
3564
3629
|
payments: paymentMethods,
|
|
3565
3630
|
storeCredits: storeCredits,
|
|
3566
|
-
total: cartData === null || cartData === void 0 ? void 0 : cartData.totalCartPrice
|
|
3631
|
+
total: cartData === null || cartData === void 0 ? void 0 : cartData.totalCartPrice,
|
|
3632
|
+
styles: styles
|
|
3567
3633
|
})), index === 4 && /*#__PURE__*/React__default.createElement(material.StepContent, {
|
|
3568
3634
|
sx: {
|
|
3569
3635
|
padding: 0
|
|
@@ -3579,6 +3645,7 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
|
|
|
3579
3645
|
deliveryCharges: deliveryCharges,
|
|
3580
3646
|
ordering: loading,
|
|
3581
3647
|
placeOrder: placeOrder,
|
|
3648
|
+
styles: styles,
|
|
3582
3649
|
storeCredits: selectedStoreCredits
|
|
3583
3650
|
})));
|
|
3584
3651
|
}))))), /*#__PURE__*/React__default.createElement(CheckoutSummary, {
|
|
@@ -4635,7 +4702,7 @@ var TextContainer = styled__default.span(_templateObject3$a || (_templateObject3
|
|
|
4635
4702
|
return props.fontColor;
|
|
4636
4703
|
});
|
|
4637
4704
|
|
|
4638
|
-
var _templateObject$d, _templateObject2$b, _templateObject3$b, _templateObject4$8, _templateObject5$8, _templateObject6$8, _templateObject7$6, _templateObject8$3, _templateObject9$3, _templateObject10$2, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16, _templateObject17, _templateObject18;
|
|
4705
|
+
var _templateObject$d, _templateObject2$b, _templateObject3$b, _templateObject4$8, _templateObject5$8, _templateObject6$8, _templateObject7$6, _templateObject8$3, _templateObject9$3, _templateObject10$2, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16$1, _templateObject17, _templateObject18;
|
|
4639
4706
|
var totalIcons = [{
|
|
4640
4707
|
name: '',
|
|
4641
4708
|
icon: /*#__PURE__*/React__default.createElement(ai.AiOutlineShoppingCart, null)
|
|
@@ -5160,7 +5227,7 @@ var DiscoverContainer = styled__default.div(_templateObject15$1 || (_templateObj
|
|
|
5160
5227
|
var _props$theme8;
|
|
5161
5228
|
return (_props$theme8 = props.theme) === null || _props$theme8 === void 0 ? void 0 : _props$theme8.fontColor;
|
|
5162
5229
|
});
|
|
5163
|
-
var StatusContainer = styled__default(material.Stack)(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px 0px;\n padding: 4px 8px;\n border-radius: 6px;\n background-color: ", ";\n color: #fff;\n width: max-content;\n"])), function (props) {
|
|
5230
|
+
var StatusContainer = styled__default(material.Stack)(_templateObject16$1 || (_templateObject16$1 = _taggedTemplateLiteralLoose(["\n box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px 0px;\n padding: 4px 8px;\n border-radius: 6px;\n background-color: ", ";\n color: #fff;\n width: max-content;\n"])), function (props) {
|
|
5164
5231
|
return props.primaryColor;
|
|
5165
5232
|
});
|
|
5166
5233
|
var TableContainer = styled__default.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n margin-top: 2rem;\n border-radius: 14px;\n"])));
|
|
@@ -7174,7 +7241,7 @@ var AccountDetails = function AccountDetails(_ref) {
|
|
|
7174
7241
|
var _ref$apiEndPoint = _ref.apiEndPoint,
|
|
7175
7242
|
apiEndPoint = _ref$apiEndPoint === void 0 ? 'https://dev.salesgent.xyz/api' : _ref$apiEndPoint,
|
|
7176
7243
|
_ref$token = _ref.token,
|
|
7177
|
-
token = _ref$token === void 0 ? 'eyJhbGciOiJIUzI1NiJ9.
|
|
7244
|
+
token = _ref$token === void 0 ? 'eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJzYWxlc2dlbnRlcnBAZ21haWwuY29tIiwidGllciI6MiwidXNlclR5cGUiOiJDdXN0b21lciIsInRva2VuVHlwZSI6ImFjY2VzcyIsInN0b3JlSWQiOjIsImV4cCI6MTY2OTA5NDY3OCwidXNlcklkIjoyNDU1LCJpYXQiOjE2NjkwNTg2NzgsInJlc2V0UGFzc3dvcmRSZXF1aXJlZCI6ZmFsc2V9.AWlpbjlTGoKCoYE3O05lEFHrGNkkVNrfJaWcXKru540' : _ref$token,
|
|
7178
7245
|
_ref$primaryColor = _ref.primaryColor,
|
|
7179
7246
|
primaryColor = _ref$primaryColor === void 0 ? '#D2122E' : _ref$primaryColor,
|
|
7180
7247
|
secondaryColor = _ref.secondaryColor,
|
|
@@ -7354,11 +7421,7 @@ var AccountDetails = function AccountDetails(_ref) {
|
|
|
7354
7421
|
};
|
|
7355
7422
|
return /*#__PURE__*/React__default.createElement(styled.ThemeProvider, {
|
|
7356
7423
|
theme: colors
|
|
7357
|
-
}, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(material.CssBaseline, null), /*#__PURE__*/React__default.createElement(Root$4, {
|
|
7358
|
-
primaryColor: colors.primaryColor,
|
|
7359
|
-
backgroundImage: colors.backgroundImage,
|
|
7360
|
-
isNightMode: isNightMode
|
|
7361
|
-
}, /*#__PURE__*/React__default.createElement(MainContainer, {
|
|
7424
|
+
}, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(material.CssBaseline, null), /*#__PURE__*/React__default.createElement(Root$4, null, /*#__PURE__*/React__default.createElement(MainContainer, {
|
|
7362
7425
|
backgroundColor: colors.backgroundColor,
|
|
7363
7426
|
open: open
|
|
7364
7427
|
}, /*#__PURE__*/React__default.createElement(ContainerDrawer, {
|
|
@@ -7441,9 +7504,11 @@ var AccountDetails = function AccountDetails(_ref) {
|
|
|
7441
7504
|
}, isNightMode ? /*#__PURE__*/React__default.createElement(md.MdDarkMode, null) : /*#__PURE__*/React__default.createElement(md.MdOutlineDarkMode, null)))), /*#__PURE__*/React__default.createElement("div", null, apiEndPoint && token && renderListItemComponent()))))));
|
|
7442
7505
|
};
|
|
7443
7506
|
var Root$4 = styled__default(material.Box)(_templateObject$u || (_templateObject$u = _taggedTemplateLiteralLoose(["\n // background-image: url(", ");\n // background-position: center;\n // background-repeat: no-repeat;\n // background-size: cover;\n padding: 1.4rem;\n background-color: ", ";\n"])), function (props) {
|
|
7444
|
-
|
|
7507
|
+
var _props$theme;
|
|
7508
|
+
return (_props$theme = props.theme) === null || _props$theme === void 0 ? void 0 : _props$theme.backgroundImage;
|
|
7445
7509
|
}, function (props) {
|
|
7446
|
-
|
|
7510
|
+
var _props$theme2, _props$theme3, _props$theme4;
|
|
7511
|
+
return (_props$theme2 = props.theme) !== null && _props$theme2 !== void 0 && _props$theme2.isNightMode ? (_props$theme3 = props.theme) === null || _props$theme3 === void 0 ? void 0 : _props$theme3.secondaryColor : "rgba(" + hexToRgbA((_props$theme4 = props.theme) === null || _props$theme4 === void 0 ? void 0 : _props$theme4.primaryColor) + ",0.1)";
|
|
7447
7512
|
});
|
|
7448
7513
|
var MainContainer = styled__default.div(_templateObject2$l || (_templateObject2$l = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: center;\n margin: auto;\n min-height: 100vh;\n background-color: ", ";\n max-width: ", ";\n padding: 2rem;\n border-radius: 14px;\n box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px 0px;\n"])), function (props) {
|
|
7449
7514
|
return props.backgroundColor;
|