@salesgenterp/ui-components 0.3.50 → 0.3.52

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -186,14 +186,16 @@ var CartDrawer = function CartDrawer(_ref) {
186
186
  }, "continue to checkout"))));
187
187
  };
188
188
 
189
- var _templateObject$2, _templateObject2$2, _templateObject3$2, _templateObject4$1, _templateObject5$1, _templateObject6$1, _templateObject7$1;
190
- var CartPageSection = styled.section(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteralLoose(["\n background: ", ";\n max-width: 100%;\n width: fit-content;\n background: ", ";\n"])), function (props) {
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) {
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 background: #eff1f5;\n background: white;\n border-radius: 28px 28px 28px 14px;\n padding: 2em 1em;\n padding-right: 5vw;\n .scrollDiv {\n width: 68%;\n height: 630px;\n max-height: 630px;\n background-color: white;\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n margin-right: 0.3em;\n &::-webkit-scrollbar {\n width: ", ";\n }\n\n /* Track */\n &::-webkit-scrollbar-track {\n background: ", ";\n border-radius: 16px;\n }\n\n /* Handle */\n &::-webkit-scrollbar-thumb {\n background: ", ";\n border-radius: 16px;\n margin: 5px 2px;\n border: 3px solid;\n border-color: ", ";\n }\n box-shadow: 0px 20px 35px rgba(0, 0, 0, 0.05);\n }\n @media only screen and (max-width: 1340px) {\n flex-direction: column;\n align-items: center;\n padding: 0.5em 0;\n .scrollDiv {\n width: 100%;\n margin: 0;\n margin-bottom: 2em;\n padding: 0 0.4em;\n }\n }\n"])), function (props) {
195
+ var CartPageContainer = styled.div(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteralLoose(["\n width: 100%;\n max-width: ", ";\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: flex-start;\n border-radius: 28px 28px 28px 14px;\n\n padding-right: max(5vw, 1em);\n padding-left: max(5vw, 1em);\n padding-top: max(5vw, 1em);\n padding-bottom: max(5vw, 1em);\n border-radius: 28px;\n opacity: ", ";\n .scrollDiv {\n width: 68%;\n height: 630px;\n max-height: 630px;\n /* background-color: white; */\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n margin-right: 0.3em;\n &::-webkit-scrollbar {\n width: ", ";\n }\n\n /* Track */\n &::-webkit-scrollbar-track {\n background: ", ";\n border-radius: 16px;\n }\n\n /* Handle */\n &::-webkit-scrollbar-thumb {\n background: ", ";\n border-radius: 16px;\n margin: 5px 2px;\n border: 3px solid;\n border-color: ", ";\n }\n box-shadow: 0px 20px 35px rgba(0, 0, 0, 0.05);\n }\n @media only screen and (max-width: 1340px) {\n flex-direction: column;\n align-items: center;\n padding: 0.5em 0;\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
+ }, function (props) {
198
+ return props.loading ? '0.7' : 1;
197
199
  }, function (props) {
198
200
  return props.retail ? '12px' : '8px';
199
201
  }, function (props) {
@@ -206,8 +208,11 @@ var CartPageContainer = styled.div(_templateObject2$2 || (_templateObject2$2 = _
206
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) {
207
209
  return props.retail ? 'grid' : 'flex';
208
210
  });
209
- var CartTableCell = styled(material.TableCell)(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteralLoose(["\n padding-bottom: 1em !important;\n border: none !important;\n"])));
210
- var CartTableContainer = styled(material.TableContainer)(_templateObject5$1 || (_templateObject5$1 = _taggedTemplateLiteralLoose(["\n max-height: 580px;\n padding-right: 2em;\n\n &::-webkit-scrollbar {\n width: ", ";\n }\n\n /* Track */\n &::-webkit-scrollbar-track {\n background: ", ";\n background: ", ";\n border-radius: 16px;\n }\n\n /* Handle */\n &::-webkit-scrollbar-thumb {\n border-radius: 16px;\n margin: 5px 2px;\n background: ", ";\n }\n @media screen and (max-width: 750px) {\n padding: 0;\n }\n"])), function (props) {
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: 1;\n"])));
212
+ var CartTableCell = styled(material.TableCell)(_templateObject5$1 || (_templateObject5$1 = _taggedTemplateLiteralLoose(["\n padding-bottom: 1em !important;\n border: none !important;\n background: ", ";\n"])), function (props) {
213
+ return props.bg + " !important";
214
+ });
215
+ var CartTableContainer = styled(material.TableContainer)(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteralLoose(["\n max-height: 580px;\n padding-right: 2em;\n\n &::-webkit-scrollbar {\n width: ", ";\n }\n\n /* Track */\n &::-webkit-scrollbar-track {\n background: ", ";\n background: ", ";\n border-radius: 16px;\n }\n\n /* Handle */\n &::-webkit-scrollbar-thumb {\n border-radius: 16px;\n margin: 5px 2px;\n background: ", ";\n }\n @media screen and (max-width: 750px) {\n padding: 0;\n }\n"])), function (props) {
211
216
  return props.retail ? '12px' : '8px';
212
217
  }, function (props) {
213
218
  return props.retail ? '#667080' : 'rgba(102, 112, 128, 0.5)';
@@ -216,12 +221,12 @@ var CartTableContainer = styled(material.TableContainer)(_templateObject5$1 || (
216
221
  }, function (props) {
217
222
  return props.color || '#ef9687';
218
223
  });
219
- var CartButtonsRow = styled.div(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteralLoose(["\n width: 100%;\n display: flex;\n flex-direction: row;\n justify-content: flex-end;\n align-items: center;\n button {\n background: ", ";\n color: ", ";\n padding: 0.5em 1em;\n margin-right: 1.5em;\n font-size: 0.85em;\n text-transform: uppercase;\n border: none;\n cursor: pointer;\n transition: 0.4s;\n &:hover {\n transform: scale(0.9);\n }\n }\n"])), function (props) {
224
+ var CartButtonsRow = styled.div(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteralLoose(["\n width: 100%;\n display: flex;\n flex-direction: row;\n justify-content: flex-end;\n align-items: center;\n button {\n background: ", ";\n color: ", ";\n padding: 0.5em 1em;\n margin-right: 1.5em;\n font-size: 0.85em;\n text-transform: uppercase;\n border: none;\n cursor: pointer;\n transition: 0.4s;\n &:hover {\n transform: scale(0.9);\n }\n }\n"])), function (props) {
220
225
  return props.bg || 'rgba(253, 0, 21, 1)';
221
226
  }, function (props) {
222
227
  return props.color || 'white';
223
228
  });
224
- var CartPageBox = styled.div(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteralLoose(["\n width: 1100px;\n max-width: 100%;\n margin-right: 2em;\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 position: relative;\n @media only screen and (max-width: 740px) {\n margin-right: 0;\n .CartnoBelowSm {\n display: none;\n }\n }\n"])));
225
230
 
226
231
  function createCommonjsModule(fn, module) {
227
232
  return module = { exports: {} }, fn(module, module.exports), module.exports;
@@ -1324,8 +1329,8 @@ if (process.env.NODE_ENV !== 'production') {
1324
1329
 
1325
1330
  var _templateObject$3, _templateObject2$3, _templateObject3$3, _templateObject4$2, _templateObject5$2, _templateObject6$2;
1326
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"])));
1327
- var ProductName = styled.h6(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteralLoose(["\n font-size: 1em;\n line-height: 1.6em;\n max-height: 1.6em;\n overflow: hidden;\n text-overflow: ellipsis;\n margin-bottom: auto;\n @media only screen and (max-width: 740px) {\n max-height: 3.8em;\n line-height: 1.25em;\n font-size: 0.75rem;\n }\n"])));
1328
- var CartTableRow = styled(material.TableRow)(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteralLoose(["\n position: relative;\n transition: 0.3s;\n .outOfStock {\n font-size: 0.75em;\n color: red;\n text-transform: uppercase;\n font-weight: 500;\n }\n .price {\n font-size: 1.19em;\n font-weight: bold;\n color: #323232;\n }\n .borderLeft {\n height: 100%;\n width: 0;\n background: #fd0015;\n transition: 0.2s;\n width: 0px;\n position: absolute;\n left: 0;\n top: 0;\n border-top-left-radius: 10px;\n display: none;\n border-bottom-left-radius: 10px;\n }\n &:hover {\n background: #ffffff;\n box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);\n border-radius: 10px;\n /* border-left: 13px solid;\n border-color: #fd0015; */\n\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.8rem;\n }\n margin: 0.5em 0;\n .cartCheckBox {\n .css-i4bv87-MuiSvgIcon-root {\n font-size: 10px !important;\n }\n }\n }\n"])));
1332
+ var ProductName = styled.h6(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteralLoose(["\n font-size: 1em;\n line-height: 1.6em;\n max-height: 1.6em;\n overflow: hidden;\n text-overflow: ellipsis;\n margin-bottom: auto;\n @media only screen and (max-width: 740px) {\n max-height: 3.8em;\n line-height: 1.25em;\n /* font-size: 0.75rem; */\n }\n"])));
1333
+ var CartTableRow = styled(material.TableRow)(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteralLoose(["\n position: relative;\n transition: 0.3s;\n background: white;\n .outOfStock {\n font-size: 0.75em;\n color: red;\n text-transform: uppercase;\n font-weight: 500;\n }\n .price {\n font-size: 1.19em;\n font-weight: bold;\n color: #323232;\n }\n .borderLeft {\n height: 100%;\n width: 0;\n background: #fd0015;\n transition: 0.2s;\n width: 0px;\n position: absolute;\n left: 0;\n top: 0;\n border-top-left-radius: 10px;\n display: none;\n border-bottom-left-radius: 10px;\n }\n &:hover {\n background: white !important;\n opacity: 1;\n box-shadow: 1px 2px 6px 2px rgba(0, 0, 0, 0.2);\n z-index: 2;\n border-radius: 20px;\n .borderLeft {\n width: 13px;\n display: inline-block;\n }\n }\n @media only screen and (max-width: 640px) {\n .CartnoPaddingSm {\n padding: 0 !important;\n }\n .price {\n font-size: 0.8rem;\n }\n margin: 0.5em 0;\n .cartCheckBox {\n .css-i4bv87-MuiSvgIcon-root {\n font-size: 10px !important;\n }\n }\n }\n"])));
1329
1334
  var CartTableCell$1 = styled(material.TableCell)(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteralLoose(["\n border: none !important;\n"])));
1330
1335
  var QuantityBox = styled.div(_templateObject5$2 || (_templateObject5$2 = _taggedTemplateLiteralLoose(["\n height: 1.75em;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n div {\n /* width:30px; */\n height: 100%;\n aspect-ratio: 1.1/1;\n display: grid;\n place-items: center;\n font-size: 0.75em;\n color: white;\n background-color: #323232;\n cursor: pointer;\n }\n .price {\n background: transparent;\n cursor: auto;\n p {\n color: #5e5c5c;\n font-size: 0.685em;\n font-weight: 500;\n }\n }\n .add {\n background-color: #ebebeb;\n color: #323232;\n }\n"])));
1331
1336
  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"])));
@@ -1471,7 +1476,8 @@ function EnhancedTableHead(props) {
1471
1476
  orderBy = props.orderBy,
1472
1477
  numSelected = props.numSelected,
1473
1478
  rowCount = props.rowCount,
1474
- onRequestSort = props.onRequestSort;
1479
+ onRequestSort = props.onRequestSort,
1480
+ styles = props.styles;
1475
1481
 
1476
1482
  var createSortHandler = function createSortHandler(property) {
1477
1483
  return function (event) {
@@ -1480,9 +1486,13 @@ function EnhancedTableHead(props) {
1480
1486
  };
1481
1487
 
1482
1488
  return /*#__PURE__*/React.createElement(TableHead, {
1483
- className: "CartnoBelowSm"
1489
+ className: "CartnoBelowSm",
1490
+ sx: {
1491
+ zIndex: '2'
1492
+ }
1484
1493
  }, /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(CartTableCell, {
1485
- padding: "checkbox"
1494
+ padding: "checkbox",
1495
+ bg: styles.bg
1486
1496
  }, /*#__PURE__*/React.createElement(material.Checkbox, {
1487
1497
  color: "primary",
1488
1498
  indeterminate: numSelected > 0 && numSelected < rowCount,
@@ -1500,7 +1510,8 @@ function EnhancedTableHead(props) {
1500
1510
  sx: {
1501
1511
  textTransform: 'uppercase'
1502
1512
  },
1503
- className: (headCell === null || headCell === void 0 ? void 0 : headCell.noBelowSm) && 'CartnoBelowSm'
1513
+ className: (headCell === null || headCell === void 0 ? void 0 : headCell.noBelowSm) && 'CartnoBelowSm',
1514
+ bg: styles.bg
1504
1515
  }, headCell.filter ? /*#__PURE__*/React.createElement(TableSortLabel, {
1505
1516
  active: orderBy === headCell.id,
1506
1517
  direction: orderBy === headCell.id ? order : 'asc',
@@ -1526,6 +1537,11 @@ function EnhancedTable(_ref) {
1526
1537
  handleIncrementDecrement = _ref.handleIncrementDecrement,
1527
1538
  handleRemoveProduct = _ref.handleRemoveProduct,
1528
1539
  styles = _ref.styles;
1540
+ var cartList = cartData === null || cartData === void 0 ? void 0 : cartData.cartLineItemDtoList.map(function (li) {
1541
+ return _extends({}, li, {
1542
+ subtotal: li.standardPrice * li.quantity
1543
+ });
1544
+ });
1529
1545
 
1530
1546
  var _React$useState = React.useState('asc'),
1531
1547
  order = _React$useState[0],
@@ -1539,11 +1555,7 @@ function EnhancedTable(_ref) {
1539
1555
  selected = _React$useState3[0],
1540
1556
  setSelected = _React$useState3[1];
1541
1557
 
1542
- var _React$useState4 = React.useState(cartData === null || cartData === void 0 ? void 0 : cartData.cartLineItemDtoList.map(function (li) {
1543
- return _extends({}, li, {
1544
- subtotal: li.standardPrice * li.quantity
1545
- });
1546
- })),
1558
+ var _React$useState4 = React.useState(cartList),
1547
1559
  cartArray = _React$useState4[0],
1548
1560
  setCartArray = _React$useState4[1];
1549
1561
 
@@ -1614,7 +1626,14 @@ function EnhancedTable(_ref) {
1614
1626
  return selected.includes(name);
1615
1627
  };
1616
1628
 
1617
- return /*#__PURE__*/React.createElement(CartPageBox, null, /*#__PURE__*/React.createElement(Box, {
1629
+ React.useEffect(function () {
1630
+ setCartArray(cartList);
1631
+ }, [cartData]);
1632
+ return /*#__PURE__*/React.createElement(CartPageBox, null, loading && /*#__PURE__*/React.createElement(Loader, null, /*#__PURE__*/React.createElement(reactSpinners.BounceLoader, {
1633
+ size: 40,
1634
+ color: styles.Btn.background,
1635
+ loading: true
1636
+ })), /*#__PURE__*/React.createElement(Box, {
1618
1637
  sx: {
1619
1638
  width: '100%',
1620
1639
  mb: 2
@@ -1632,7 +1651,8 @@ function EnhancedTable(_ref) {
1632
1651
  orderBy: orderBy,
1633
1652
  onSelectAllClick: handleSelectAllClick,
1634
1653
  onRequestSort: handleRequestSort,
1635
- rowCount: cartArray === null || cartArray === void 0 ? void 0 : cartArray.length
1654
+ rowCount: cartArray === null || cartArray === void 0 ? void 0 : cartArray.length,
1655
+ styles: styles
1636
1656
  }), /*#__PURE__*/React.createElement(TableBody, null, cartArray === null || cartArray === void 0 ? void 0 : cartArray.map(function (row, index) {
1637
1657
  var isItemSelected = isSelected(row.productId);
1638
1658
  return /*#__PURE__*/React.createElement(CardRow, {
@@ -1720,7 +1740,11 @@ var CartPageMainRetail = function CartPageMainRetail(_ref) {
1720
1740
  className: "scrollDiv"
1721
1741
  }, /*#__PURE__*/React__default.createElement(CardsBox, {
1722
1742
  retail: retail
1723
- }, cartData === null || cartData === void 0 ? void 0 : (_cartData$cartLineIte = cartData.cartLineItemDtoList) === null || _cartData$cartLineIte === void 0 ? void 0 : _cartData$cartLineIte.map(function (item) {
1743
+ }, loading && /*#__PURE__*/React__default.createElement(Loader, null, /*#__PURE__*/React__default.createElement(reactSpinners.BounceLoader, {
1744
+ size: 40,
1745
+ color: styles.Btn.background,
1746
+ loading: true
1747
+ })), cartData === null || cartData === void 0 ? void 0 : (_cartData$cartLineIte = cartData.cartLineItemDtoList) === null || _cartData$cartLineIte === void 0 ? void 0 : _cartData$cartLineIte.map(function (item) {
1724
1748
  return /*#__PURE__*/React__default.createElement(CartPageProductCard, {
1725
1749
  item: item,
1726
1750
  loading: loading,
@@ -1733,7 +1757,7 @@ var CartPageMainRetail = function CartPageMainRetail(_ref) {
1733
1757
  };
1734
1758
 
1735
1759
  var _templateObject$5, _templateObject2$5, _templateObject3$5, _templateObject4$4, _templateObject5$4, _templateObject6$4;
1736
- var CartSummaryContainer = styled.div(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n width: min(95%, 24.75em);\n max-width: ", ";\n display: flex;\n flex-direction: column;\n background: ", ";\n color: ", ";\n border-radius: 25px;\n padding: 2em 1em;\n align-items: center;\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) {
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: 20px;\n padding: 2em 1em;\n align-items: center;\n margin-top: 3em;\n p {\n font-size: 0.89em;\n font-weight: 300;\n align-self: flex-start;\n color: inherit;\n margin: 0;\n padding: 0;\n }\n .continueShopping {\n font-size: 0.75em;\n color: inherit;\n text-transform: capitalize;\n height: 20px;\n border-bottom: 1px solid;\n border-color: ", ";\n font-weight: 300;\n cursor: pointer;\n }\n"])), function (props) {
1737
1761
  return props.maxWidth || '24.75em';
1738
1762
  }, function (props) {
1739
1763
  return props.background || '#667080';
@@ -1792,7 +1816,8 @@ var CartSummary = function CartSummary(_ref) {
1792
1816
  setShipping = _ref.setShipping,
1793
1817
  clickRedirect = _ref.clickRedirect,
1794
1818
  subtotal = _ref.subtotal,
1795
- styles = _ref.styles;
1819
+ styles = _ref.styles,
1820
+ totalCartPrice = _ref.totalCartPrice;
1796
1821
  var cartSummary = styles.cartSummary,
1797
1822
  Btn = styles.Btn;
1798
1823
  return /*#__PURE__*/React__default.createElement(CartSummaryContainer, {
@@ -1844,12 +1869,13 @@ var CartSummary = function CartSummary(_ref) {
1844
1869
  color: cartSummary.hr
1845
1870
  }), /*#__PURE__*/React__default.createElement(CartSummaryRow, {
1846
1871
  h5: "1.64em"
1847
- }, /*#__PURE__*/React__default.createElement("h6", null, "total"), /*#__PURE__*/React__default.createElement("h5", null, "$", (_ref2 = subtotal + (selectedShipping === null || selectedShipping === void 0 ? void 0 : selectedShipping.amount)) === null || _ref2 === void 0 ? void 0 : _ref2.toFixed(2))), /*#__PURE__*/React__default.createElement(CartSummaryRow, {
1872
+ }, /*#__PURE__*/React__default.createElement("h6", null, "total"), retail ? /*#__PURE__*/React__default.createElement("h5", null, "$", (_ref2 = totalCartPrice + (selectedShipping === null || selectedShipping === void 0 ? void 0 : selectedShipping.amount)) === null || _ref2 === void 0 ? void 0 : _ref2.toFixed(2)) : /*#__PURE__*/React__default.createElement("h5", null, "$", totalCartPrice === null || totalCartPrice === void 0 ? void 0 : totalCartPrice.toFixed(2))), /*#__PURE__*/React__default.createElement(CartSummaryRow, {
1848
1873
  justify: "center"
1849
1874
  }, /*#__PURE__*/React__default.createElement(CartSummaryCheckoutBtn, {
1850
1875
  retail: retail,
1851
1876
  onClick: function onClick() {
1852
- return clickRedirect('/checkout');
1877
+ if (loading) return;
1878
+ clickRedirect('/checkout');
1853
1879
  },
1854
1880
  background: Btn.background,
1855
1881
  color: Btn.color
@@ -1858,7 +1884,8 @@ var CartSummary = function CartSummary(_ref) {
1858
1884
  }, /*#__PURE__*/React__default.createElement("span", {
1859
1885
  className: "continueShopping",
1860
1886
  onClick: function onClick() {
1861
- return clickRedirect('/');
1887
+ if (loading) return;
1888
+ clickRedirect('/');
1862
1889
  }
1863
1890
  }, "Continue to shopping")));
1864
1891
  };
@@ -1879,7 +1906,8 @@ var CartPageComponent = function CartPageComponent(_ref) {
1879
1906
  bg: styles.bg,
1880
1907
  retail: retail
1881
1908
  }, /*#__PURE__*/React__default.createElement(CartPageContainer, {
1882
- retail: retail
1909
+ retail: retail,
1910
+ loading: loading
1883
1911
  }, retail ? /*#__PURE__*/React__default.createElement(CartPageMainRetail, {
1884
1912
  retail: retail,
1885
1913
  cartData: cartData,
@@ -1903,6 +1931,7 @@ var CartPageComponent = function CartPageComponent(_ref) {
1903
1931
  setShipping: setShipping,
1904
1932
  clickRedirect: clickRedirect,
1905
1933
  subtotal: cartData === null || cartData === void 0 ? void 0 : cartData.totalCartPrice,
1934
+ totalCartPrice: cartData === null || cartData === void 0 ? void 0 : cartData.totalCartPrice,
1906
1935
  styles: styles
1907
1936
  })));
1908
1937
  };