@salesgenterp/ui-components 0.4.16 → 0.4.20

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.
Files changed (5) hide show
  1. package/dist/index.js +1108 -104
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.modern.js +1008 -5
  4. package/dist/index.modern.js.map +1 -1
  5. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -1,8 +1,8 @@
1
1
  function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
2
2
 
3
3
  var material = require('@mui/material');
4
- var React = require('react');
5
- var React__default = _interopDefault(React);
4
+ var React$1 = require('react');
5
+ var React$1__default = _interopDefault(React$1);
6
6
  var gr = require('react-icons/gr');
7
7
  require('react-icons/gi');
8
8
  var bs = require('react-icons/bs');
@@ -16,6 +16,13 @@ var TableBody = _interopDefault(require('@mui/material/TableBody'));
16
16
  var TableHead = _interopDefault(require('@mui/material/TableHead'));
17
17
  var TableRow = _interopDefault(require('@mui/material/TableRow'));
18
18
  var TableSortLabel = _interopDefault(require('@mui/material/TableSortLabel'));
19
+ var bi = require('react-icons/bi');
20
+ var cg = require('react-icons/cg');
21
+ var md = require('react-icons/md');
22
+ var io5 = require('react-icons/io5');
23
+ var reactHookForm = require('react-hook-form');
24
+ var hi = require('react-icons/hi');
25
+ var fi = require('react-icons/fi');
19
26
 
20
27
  function _extends() {
21
28
  _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -85,49 +92,49 @@ var CartDrawerProductCard = function CartDrawerProductCard(_ref) {
85
92
  loading = _ref.loading;
86
93
  var imgnotfoundUrlcommon = '/images/imgnotfound.jpeg';
87
94
  if (imgnotfoundUrl && imgnotfoundUrl !== 'null') imgnotfoundUrlcommon = imgnotfoundUrl;
88
- return /*#__PURE__*/React__default.createElement(CartDrawerProduct, {
95
+ return /*#__PURE__*/React$1__default.createElement(CartDrawerProduct, {
89
96
  color: color
90
- }, /*#__PURE__*/React__default.createElement("img", {
97
+ }, /*#__PURE__*/React$1__default.createElement("img", {
91
98
  src: product.imageUrl && product.imageUrl !== 'null' ? product.imageUrl : imgnotfoundUrlcommon,
92
99
  alt: 'no product image available'
93
- }), /*#__PURE__*/React__default.createElement(material.Stack, {
100
+ }), /*#__PURE__*/React$1__default.createElement(material.Stack, {
94
101
  flexDirection: "column",
95
102
  justifyContent: "space-between",
96
103
  alignItems: "flex-start",
97
104
  className: "middleSection"
98
- }, /*#__PURE__*/React__default.createElement(material.Tooltip, {
105
+ }, /*#__PURE__*/React$1__default.createElement(material.Tooltip, {
99
106
  title: product === null || product === void 0 ? void 0 : product.productName,
100
107
  placement: "top",
101
108
  arrow: true
102
- }, /*#__PURE__*/React__default.createElement("h6", {
109
+ }, /*#__PURE__*/React$1__default.createElement("h6", {
103
110
  className: "name",
104
111
  onClick: function onClick() {
105
112
  return handleRedirect(product);
106
113
  }
107
- }, product === null || product === void 0 ? void 0 : product.productName)), /*#__PURE__*/React__default.createElement("h6", null, (product === null || product === void 0 ? void 0 : product.standardPrice) === (product === null || product === void 0 ? void 0 : product.cartStandardPrice) ? "$" + (product === null || product === void 0 ? void 0 : product.standardPrice) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("span", null, "$", product === null || product === void 0 ? void 0 : (_product$cartStandard = product.cartStandardPrice) === null || _product$cartStandard === void 0 ? void 0 : _product$cartStandard.toFixed(2)), "$", product === null || product === void 0 ? void 0 : (_product$standardPric = product.standardPrice) === null || _product$standardPric === void 0 ? void 0 : _product$standardPric.toFixed(2)))), /*#__PURE__*/React__default.createElement(material.Stack, {
114
+ }, product === null || product === void 0 ? void 0 : product.productName)), /*#__PURE__*/React$1__default.createElement("h6", null, (product === null || product === void 0 ? void 0 : product.standardPrice) === (product === null || product === void 0 ? void 0 : product.cartStandardPrice) ? "$" + (product === null || product === void 0 ? void 0 : product.standardPrice) : /*#__PURE__*/React$1__default.createElement(React$1__default.Fragment, null, /*#__PURE__*/React$1__default.createElement("span", null, "$", product === null || product === void 0 ? void 0 : (_product$cartStandard = product.cartStandardPrice) === null || _product$cartStandard === void 0 ? void 0 : _product$cartStandard.toFixed(2)), "$", product === null || product === void 0 ? void 0 : (_product$standardPric = product.standardPrice) === null || _product$standardPric === void 0 ? void 0 : _product$standardPric.toFixed(2)))), /*#__PURE__*/React$1__default.createElement(material.Stack, {
108
115
  flexDirection: "column",
109
116
  justifyContent: "space-between",
110
117
  alignItems: "flex-end",
111
118
  className: "endSection"
112
- }, /*#__PURE__*/React__default.createElement(ri.RiDeleteBin5Line, {
119
+ }, /*#__PURE__*/React$1__default.createElement(ri.RiDeleteBin5Line, {
113
120
  className: "icon",
114
121
  onClick: function onClick() {
115
122
  if (loading) return;
116
123
  handleRemoveProduct(product);
117
124
  }
118
- }), /*#__PURE__*/React__default.createElement(CartDrawerQtBox, null, /*#__PURE__*/React__default.createElement("span", {
125
+ }), /*#__PURE__*/React$1__default.createElement(CartDrawerQtBox, null, /*#__PURE__*/React$1__default.createElement("span", {
119
126
  onClick: function onClick() {
120
127
  if (loading) return;
121
128
  handleIncrementDecrement('decrement', product);
122
129
  }
123
- }, ' ', /*#__PURE__*/React__default.createElement(ai.AiOutlineMinus, null)), ' ', /*#__PURE__*/React__default.createElement("span", {
130
+ }, ' ', /*#__PURE__*/React$1__default.createElement(ai.AiOutlineMinus, null)), ' ', /*#__PURE__*/React$1__default.createElement("span", {
124
131
  className: 'qt'
125
- }, product === null || product === void 0 ? void 0 : product.quantity), /*#__PURE__*/React__default.createElement("span", {
132
+ }, product === null || product === void 0 ? void 0 : product.quantity), /*#__PURE__*/React$1__default.createElement("span", {
126
133
  onClick: function onClick() {
127
134
  if (loading) return;
128
135
  handleIncrementDecrement('increment', product);
129
136
  }
130
- }, /*#__PURE__*/React__default.createElement(ai.AiOutlinePlus, null)))));
137
+ }, /*#__PURE__*/React$1__default.createElement(ai.AiOutlinePlus, null)))));
131
138
  };
132
139
 
133
140
  var CartDrawer = function CartDrawer(_ref) {
@@ -142,19 +149,19 @@ var CartDrawer = function CartDrawer(_ref) {
142
149
  handleClose = _ref.handleClose,
143
150
  loading = _ref.loading,
144
151
  imgnotfoundUrl = _ref.imgnotfoundUrl;
145
- return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(CartDrawerContainer, {
152
+ return /*#__PURE__*/React$1__default.createElement(React$1__default.Fragment, null, /*#__PURE__*/React$1__default.createElement(CartDrawerContainer, {
146
153
  maxWidth: maxWidth
147
- }, /*#__PURE__*/React__default.createElement(CartDrawerBar, null, /*#__PURE__*/React__default.createElement("h2", null, "Your Cart"), /*#__PURE__*/React__default.createElement(gr.GrClose, {
154
+ }, /*#__PURE__*/React$1__default.createElement(CartDrawerBar, null, /*#__PURE__*/React$1__default.createElement("h2", null, "Your Cart"), /*#__PURE__*/React$1__default.createElement(gr.GrClose, {
148
155
  className: "icon",
149
156
  onClick: function onClick() {
150
157
  handleClose();
151
158
  }
152
- })), cartData && (cartData === null || cartData === void 0 ? void 0 : cartData.totalCartQuantity) > 0 ? /*#__PURE__*/React__default.createElement(CartDrawerProductContainer, {
159
+ })), cartData && (cartData === null || cartData === void 0 ? void 0 : cartData.totalCartQuantity) > 0 ? /*#__PURE__*/React$1__default.createElement(CartDrawerProductContainer, {
153
160
  opacity: loading ? '.4' : '1'
154
161
  }, cartData === null || cartData === void 0 ? void 0 : (_cartData$cartLineIte = cartData.cartLineItemDtoList) === null || _cartData$cartLineIte === void 0 ? void 0 : _cartData$cartLineIte.map(function (product, i) {
155
- return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, loading && /*#__PURE__*/React__default.createElement(CartDrawerLoader, null, /*#__PURE__*/React__default.createElement(reactSpinners.PuffLoader, {
162
+ return /*#__PURE__*/React$1__default.createElement(React$1__default.Fragment, null, loading && /*#__PURE__*/React$1__default.createElement(CartDrawerLoader, null, /*#__PURE__*/React$1__default.createElement(reactSpinners.PuffLoader, {
156
163
  color: "black"
157
- })), /*#__PURE__*/React__default.createElement(CartDrawerProductCard, {
164
+ })), /*#__PURE__*/React$1__default.createElement(CartDrawerProductCard, {
158
165
  product: product,
159
166
  handleRedirect: handleRedirect,
160
167
  handleIncrementDecrement: handleIncrementDecrement,
@@ -164,21 +171,21 @@ var CartDrawer = function CartDrawer(_ref) {
164
171
  imgnotfoundUrl: imgnotfoundUrl,
165
172
  loading: loading
166
173
  }));
167
- })) : /*#__PURE__*/React__default.createElement(CartDrawerEmptyCart, {
174
+ })) : /*#__PURE__*/React$1__default.createElement(CartDrawerEmptyCart, {
168
175
  color: color
169
- }, /*#__PURE__*/React__default.createElement(bs.BsCartX, {
176
+ }, /*#__PURE__*/React$1__default.createElement(bs.BsCartX, {
170
177
  className: "icon"
171
- }), /*#__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, {
178
+ }), /*#__PURE__*/React$1__default.createElement("h6", null, "OOps!"), /*#__PURE__*/React$1__default.createElement("p", null, "your cart is empty")), cartData && (cartData === null || cartData === void 0 ? void 0 : cartData.totalCartQuantity) > 0 && /*#__PURE__*/React$1__default.createElement(CartDrawerBottomSection, null, /*#__PURE__*/React$1__default.createElement(material.Stack, {
172
179
  flexDirection: "row",
173
180
  justifyContent: "space-between",
174
181
  alignItems: "center",
175
182
  className: "row"
176
- }, /*#__PURE__*/React__default.createElement("h5", null, "Subtotal", /*#__PURE__*/React__default.createElement("span", null, "(", cartData === null || cartData === void 0 ? void 0 : cartData.totalCartQuantity, " items)")), /*#__PURE__*/React__default.createElement("h5", null, "$", cartData === null || cartData === void 0 ? void 0 : (_cartData$totalCartPr = cartData.totalCartPrice) === null || _cartData$totalCartPr === void 0 ? void 0 : _cartData$totalCartPr.toFixed(2))), /*#__PURE__*/React__default.createElement(CartDrawerOutlinedButton, {
183
+ }, /*#__PURE__*/React$1__default.createElement("h5", null, "Subtotal", /*#__PURE__*/React$1__default.createElement("span", null, "(", cartData === null || cartData === void 0 ? void 0 : cartData.totalCartQuantity, " items)")), /*#__PURE__*/React$1__default.createElement("h5", null, "$", cartData === null || cartData === void 0 ? void 0 : (_cartData$totalCartPr = cartData.totalCartPrice) === null || _cartData$totalCartPr === void 0 ? void 0 : _cartData$totalCartPr.toFixed(2))), /*#__PURE__*/React$1__default.createElement(CartDrawerOutlinedButton, {
177
184
  color: color,
178
185
  onClick: function onClick() {
179
186
  return handleRedirect('cart');
180
187
  }
181
- }, "view cart"), /*#__PURE__*/React__default.createElement(CartDrawerFilledButton, {
188
+ }, "view cart"), /*#__PURE__*/React$1__default.createElement(CartDrawerFilledButton, {
182
189
  color: color,
183
190
  onClick: function onClick() {
184
191
  return handleRedirect('checkout');
@@ -1357,7 +1364,7 @@ var CardRow = function CardRow(_ref) {
1357
1364
  styles = _ref.styles;
1358
1365
  var imgnotfoundUrlcommon = '/images/imgnotfound.jpeg';
1359
1366
  if (imgnotfoundUrl && imgnotfoundUrl !== 'null') imgnotfoundUrlcommon = imgnotfoundUrl;
1360
- return /*#__PURE__*/React__default.createElement(CartTableRow, {
1367
+ return /*#__PURE__*/React$1__default.createElement(CartTableRow, {
1361
1368
  onClick: function onClick(event) {
1362
1369
  return handleClick(event, row);
1363
1370
  },
@@ -1366,74 +1373,74 @@ var CardRow = function CardRow(_ref) {
1366
1373
  tabIndex: -1,
1367
1374
  key: row.ProductId,
1368
1375
  size: styles === null || styles === void 0 ? void 0 : (_styles$price = styles.price) === null || _styles$price === void 0 ? void 0 : _styles$price.size
1369
- }, /*#__PURE__*/React__default.createElement(CartTableCell$1, {
1376
+ }, /*#__PURE__*/React$1__default.createElement(CartTableCell$1, {
1370
1377
  padding: "checkbox"
1371
- }, /*#__PURE__*/React__default.createElement("span", {
1378
+ }, /*#__PURE__*/React$1__default.createElement("span", {
1372
1379
  className: "borderLeft",
1373
1380
  style: {
1374
1381
  background: styles === null || styles === void 0 ? void 0 : (_styles$Btn = styles.Btn) === null || _styles$Btn === void 0 ? void 0 : _styles$Btn.background
1375
1382
  }
1376
- }), /*#__PURE__*/React__default.createElement(material.Checkbox, {
1383
+ }), /*#__PURE__*/React$1__default.createElement(material.Checkbox, {
1377
1384
  color: "primary",
1378
1385
  checked: isItemSelected,
1379
1386
  inputProps: {
1380
1387
  'aria-labelledby': 'product'
1381
1388
  },
1382
1389
  className: "cartCheckBox"
1383
- })), /*#__PURE__*/React__default.createElement(CartTableCell$1, {
1390
+ })), /*#__PURE__*/React$1__default.createElement(CartTableCell$1, {
1384
1391
  className: "CartnoPaddingSm"
1385
- }, /*#__PURE__*/React__default.createElement(ProductImage, {
1392
+ }, /*#__PURE__*/React$1__default.createElement(ProductImage, {
1386
1393
  src: row.imageUrl && row.imageUrl !== 'null' ? row.imageUrl : imgnotfoundUrlcommon,
1387
1394
  alt: 'no product image available',
1388
1395
  width: (imgSize === null || imgSize === void 0 ? void 0 : imgSize.width) || 50,
1389
1396
  height: (imgSize === null || imgSize === void 0 ? void 0 : imgSize.height) || 58
1390
- })), /*#__PURE__*/React__default.createElement(CartTableCell$1, {
1397
+ })), /*#__PURE__*/React$1__default.createElement(CartTableCell$1, {
1391
1398
  component: "th",
1392
1399
  id: row === null || row === void 0 ? void 0 : row.labelId,
1393
1400
  scope: "row",
1394
1401
  padding: "none"
1395
- }, /*#__PURE__*/React__default.createElement(ProductName, {
1402
+ }, /*#__PURE__*/React$1__default.createElement(ProductName, {
1396
1403
  maxHeight: styles.name && (styles === null || styles === void 0 ? void 0 : (_styles$name = styles.name) === null || _styles$name === void 0 ? void 0 : _styles$name.lines) * 1.7,
1397
1404
  size: styles === null || styles === void 0 ? void 0 : (_styles$name2 = styles.name) === null || _styles$name2 === void 0 ? void 0 : _styles$name2.size
1398
- }, row.productName), row.quantity > row.availableQuantity && /*#__PURE__*/React__default.createElement("p", {
1405
+ }, row.productName), row.quantity > row.availableQuantity && /*#__PURE__*/React$1__default.createElement("p", {
1399
1406
  className: "outOfStock"
1400
- }, "out of stock")), /*#__PURE__*/React__default.createElement(CartTableCell$1, {
1407
+ }, "out of stock")), /*#__PURE__*/React$1__default.createElement(CartTableCell$1, {
1401
1408
  align: "center",
1402
1409
  className: "CartnoBelowSm"
1403
- }, /*#__PURE__*/React__default.createElement("p", {
1410
+ }, /*#__PURE__*/React$1__default.createElement("p", {
1404
1411
  className: "price"
1405
- }, "$", row === null || row === void 0 ? void 0 : (_row$standardPrice = row.standardPrice) === null || _row$standardPrice === void 0 ? void 0 : _row$standardPrice.toFixed(2))), /*#__PURE__*/React__default.createElement(CartTableCell$1, {
1412
+ }, "$", row === null || row === void 0 ? void 0 : (_row$standardPrice = row.standardPrice) === null || _row$standardPrice === void 0 ? void 0 : _row$standardPrice.toFixed(2))), /*#__PURE__*/React$1__default.createElement(CartTableCell$1, {
1406
1413
  align: "center"
1407
- }, /*#__PURE__*/React__default.createElement(QuantityBox, null, /*#__PURE__*/React__default.createElement("div", {
1414
+ }, /*#__PURE__*/React$1__default.createElement(QuantityBox, null, /*#__PURE__*/React$1__default.createElement("div", {
1408
1415
  onClick: function onClick(e) {
1409
1416
  e.stopPropagation();
1410
1417
  if (loading) return;
1411
1418
  handleIncrementDecrement('decrement', row);
1412
1419
  }
1413
- }, /*#__PURE__*/React__default.createElement(ai.AiOutlineMinus, null)), /*#__PURE__*/React__default.createElement("div", {
1420
+ }, /*#__PURE__*/React$1__default.createElement(ai.AiOutlineMinus, null)), /*#__PURE__*/React$1__default.createElement("div", {
1414
1421
  className: "price"
1415
- }, /*#__PURE__*/React__default.createElement("p", null, row === null || row === void 0 ? void 0 : row.quantity)), /*#__PURE__*/React__default.createElement("div", {
1422
+ }, /*#__PURE__*/React$1__default.createElement("p", null, row === null || row === void 0 ? void 0 : row.quantity)), /*#__PURE__*/React$1__default.createElement("div", {
1416
1423
  className: "add",
1417
1424
  onClick: function onClick(e) {
1418
1425
  e.stopPropagation();
1419
1426
  if (loading) return;
1420
1427
  handleIncrementDecrement('increment', row);
1421
1428
  }
1422
- }, /*#__PURE__*/React__default.createElement(ai.AiOutlinePlus, null)))), /*#__PURE__*/React__default.createElement(CartTableCell$1, {
1429
+ }, /*#__PURE__*/React$1__default.createElement(ai.AiOutlinePlus, null)))), /*#__PURE__*/React$1__default.createElement(CartTableCell$1, {
1423
1430
  alig: "center",
1424
1431
  className: "CartnoPaddingSm"
1425
- }, /*#__PURE__*/React__default.createElement("p", {
1432
+ }, /*#__PURE__*/React$1__default.createElement("p", {
1426
1433
  className: "price"
1427
- }, "$", (_row$subtotal = row.subtotal) === null || _row$subtotal === void 0 ? void 0 : _row$subtotal.toFixed(2))), /*#__PURE__*/React__default.createElement(CartTableCell$1, {
1434
+ }, "$", (_row$subtotal = row.subtotal) === null || _row$subtotal === void 0 ? void 0 : _row$subtotal.toFixed(2))), /*#__PURE__*/React$1__default.createElement(CartTableCell$1, {
1428
1435
  alig: "center",
1429
1436
  className: "CartnoBelowSm"
1430
- }, /*#__PURE__*/React__default.createElement(DeleteBtn, {
1437
+ }, /*#__PURE__*/React$1__default.createElement(DeleteBtn, {
1431
1438
  onClick: function onClick(e) {
1432
1439
  e.stopPropagation();
1433
1440
  if (loading) return;
1434
1441
  handleRemoveProduct(row);
1435
1442
  }
1436
- }, /*#__PURE__*/React__default.createElement(ai.AiOutlineClose, null))));
1443
+ }, /*#__PURE__*/React$1__default.createElement(ai.AiOutlineClose, null))));
1437
1444
  };
1438
1445
 
1439
1446
  var headCells = [{
@@ -1491,15 +1498,15 @@ function EnhancedTableHead(props) {
1491
1498
  };
1492
1499
  };
1493
1500
 
1494
- return /*#__PURE__*/React.createElement(TableHead, {
1501
+ return /*#__PURE__*/React$1.createElement(TableHead, {
1495
1502
  className: "CartnoBelowSm"
1496
- }, /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(CartTableCell, {
1503
+ }, /*#__PURE__*/React$1.createElement(TableRow, null, /*#__PURE__*/React$1.createElement(CartTableCell, {
1497
1504
  sx: {
1498
1505
  zIndex: '3 !important'
1499
1506
  },
1500
1507
  padding: "checkbox",
1501
1508
  bg: styles.bg
1502
- }, /*#__PURE__*/React.createElement(material.Checkbox, {
1509
+ }, /*#__PURE__*/React$1.createElement(material.Checkbox, {
1503
1510
  color: "primary",
1504
1511
  indeterminate: numSelected > 0 && numSelected < rowCount,
1505
1512
  checked: rowCount > 0 && numSelected === rowCount,
@@ -1508,7 +1515,7 @@ function EnhancedTableHead(props) {
1508
1515
  'aria-label': 'select all products'
1509
1516
  }
1510
1517
  })), headCells.map(function (headCell) {
1511
- return /*#__PURE__*/React.createElement(CartTableCell, {
1518
+ return /*#__PURE__*/React$1.createElement(CartTableCell, {
1512
1519
  key: headCell.id,
1513
1520
  align: headCell.numeric ? 'center' : 'left',
1514
1521
  padding: headCell.disablePadding ? 'none' : 'normal',
@@ -1519,7 +1526,7 @@ function EnhancedTableHead(props) {
1519
1526
  },
1520
1527
  className: (headCell === null || headCell === void 0 ? void 0 : headCell.noBelowSm) && 'CartnoBelowSm',
1521
1528
  bg: styles.bg
1522
- }, headCell.filter ? /*#__PURE__*/React.createElement(TableSortLabel, {
1529
+ }, headCell.filter ? /*#__PURE__*/React$1.createElement(TableSortLabel, {
1523
1530
  active: orderBy === headCell.id,
1524
1531
  direction: orderBy === headCell.id ? order : 'asc',
1525
1532
  onClick: createSortHandler(headCell.id)
@@ -1551,19 +1558,19 @@ function EnhancedTable(_ref) {
1551
1558
  });
1552
1559
  });
1553
1560
 
1554
- var _React$useState = React.useState('asc'),
1561
+ var _React$useState = React$1.useState('asc'),
1555
1562
  order = _React$useState[0],
1556
1563
  setOrder = _React$useState[1];
1557
1564
 
1558
- var _React$useState2 = React.useState('calories'),
1565
+ var _React$useState2 = React$1.useState('calories'),
1559
1566
  orderBy = _React$useState2[0],
1560
1567
  setOrderBy = _React$useState2[1];
1561
1568
 
1562
- var _React$useState3 = React.useState([]),
1569
+ var _React$useState3 = React$1.useState([]),
1563
1570
  selected = _React$useState3[0],
1564
1571
  setSelected = _React$useState3[1];
1565
1572
 
1566
- var _React$useState4 = React.useState(cartList),
1573
+ var _React$useState4 = React$1.useState(cartList),
1567
1574
  cartArray = _React$useState4[0],
1568
1575
  setCartArray = _React$useState4[1];
1569
1576
 
@@ -1584,7 +1591,7 @@ function EnhancedTable(_ref) {
1584
1591
  return setCartArray(newArray);
1585
1592
  };
1586
1593
 
1587
- React.useEffect(function () {
1594
+ React$1.useEffect(function () {
1588
1595
  Sort();
1589
1596
  }, [order, orderBy]);
1590
1597
 
@@ -1627,27 +1634,27 @@ function EnhancedTable(_ref) {
1627
1634
  return selected.includes(name);
1628
1635
  };
1629
1636
 
1630
- React.useEffect(function () {
1637
+ React$1.useEffect(function () {
1631
1638
  setCartArray(cartList);
1632
1639
  }, [cartData]);
1633
1640
  console.log(selected);
1634
- return /*#__PURE__*/React.createElement(CartPageBox, null, loading && /*#__PURE__*/React.createElement(Loader, null, /*#__PURE__*/React.createElement(reactSpinners.BounceLoader, {
1641
+ return /*#__PURE__*/React$1.createElement(CartPageBox, null, loading && /*#__PURE__*/React$1.createElement(Loader, null, /*#__PURE__*/React$1.createElement(reactSpinners.BounceLoader, {
1635
1642
  size: 40,
1636
1643
  color: styles.Btn.background,
1637
1644
  loading: true
1638
- })), /*#__PURE__*/React.createElement(Box, {
1645
+ })), /*#__PURE__*/React$1.createElement(Box, {
1639
1646
  sx: {
1640
1647
  width: '100%',
1641
1648
  mb: 2
1642
1649
  }
1643
- }, /*#__PURE__*/React.createElement(CartTableContainer, {
1650
+ }, /*#__PURE__*/React$1.createElement(CartTableContainer, {
1644
1651
  bg: styles === null || styles === void 0 ? void 0 : (_styles$scroll = styles.scroll) === null || _styles$scroll === void 0 ? void 0 : _styles$scroll.bg,
1645
1652
  color: styles === null || styles === void 0 ? void 0 : (_styles$scroll2 = styles.scroll) === null || _styles$scroll2 === void 0 ? void 0 : _styles$scroll2.background
1646
- }, /*#__PURE__*/React.createElement(Table, {
1653
+ }, /*#__PURE__*/React$1.createElement(Table, {
1647
1654
  "aria-labelledby": "tableTitle",
1648
1655
  size: 'small',
1649
1656
  stickyHeader: true
1650
- }, /*#__PURE__*/React.createElement(EnhancedTableHead, {
1657
+ }, /*#__PURE__*/React$1.createElement(EnhancedTableHead, {
1651
1658
  numSelected: selected.length,
1652
1659
  order: order,
1653
1660
  orderBy: orderBy,
@@ -1655,9 +1662,9 @@ function EnhancedTable(_ref) {
1655
1662
  onRequestSort: handleRequestSort,
1656
1663
  rowCount: cartArray === null || cartArray === void 0 ? void 0 : cartArray.length,
1657
1664
  styles: styles
1658
- }), /*#__PURE__*/React.createElement(TableBody, null, cartArray === null || cartArray === void 0 ? void 0 : cartArray.map(function (row, index) {
1665
+ }), /*#__PURE__*/React$1.createElement(TableBody, null, cartArray === null || cartArray === void 0 ? void 0 : cartArray.map(function (row, index) {
1659
1666
  var isItemSelected = isSelected(row);
1660
- return /*#__PURE__*/React.createElement(CardRow, {
1667
+ return /*#__PURE__*/React$1.createElement(CardRow, {
1661
1668
  row: row,
1662
1669
  isItemSelected: isItemSelected,
1663
1670
  handleClick: handleClick,
@@ -1668,7 +1675,7 @@ function EnhancedTable(_ref) {
1668
1675
  handleIncrementDecrement: handleIncrementDecrement,
1669
1676
  handleRemoveProduct: handleRemoveProduct
1670
1677
  });
1671
- }))))), /*#__PURE__*/React.createElement(CartButtonsRow, null, /*#__PURE__*/React.createElement("button", {
1678
+ }))))), /*#__PURE__*/React$1.createElement(CartButtonsRow, null, /*#__PURE__*/React$1.createElement("button", {
1672
1679
  onClick: function onClick() {
1673
1680
  new Promise(function (resolve, reject) {
1674
1681
  if (loading) return;
@@ -1677,7 +1684,7 @@ function EnhancedTable(_ref) {
1677
1684
  });
1678
1685
  setSelected([]);
1679
1686
  }
1680
- }, "remove selected"), /*#__PURE__*/React.createElement("button", null, "updated cart")));
1687
+ }, "remove selected"), /*#__PURE__*/React$1.createElement("button", null, "updated cart")));
1681
1688
  }
1682
1689
 
1683
1690
  var _templateObject$4, _templateObject2$4, _templateObject3$4, _templateObject4$3, _templateObject5$3, _templateObject6$3, _templateObject7$2;
@@ -1704,37 +1711,37 @@ var CartPageProductCard = function CartPageProductCard(_ref) {
1704
1711
  imgSize = _ref.imgSize;
1705
1712
  var imgnotfoundUrlcommon = '/images/imgnotfound.jpeg';
1706
1713
  if (imgnotfoundUrl && imgnotfoundUrl !== 'null') imgnotfoundUrlcommon = imgnotfoundUrl;
1707
- return /*#__PURE__*/React__default.createElement(CartPageCard, null, /*#__PURE__*/React__default.createElement(CartPageImg, {
1714
+ return /*#__PURE__*/React$1__default.createElement(CartPageCard, null, /*#__PURE__*/React$1__default.createElement(CartPageImg, {
1708
1715
  src: item.imageUrl && item.imageUrl !== 'null' ? item.imageUrl : imgnotfoundUrlcommon,
1709
1716
  alt: 'no product image available',
1710
1717
  width: imgSize === null || imgSize === void 0 ? void 0 : imgSize.width,
1711
1718
  height: imgSize === null || imgSize === void 0 ? void 0 : imgSize.height
1712
- }), /*#__PURE__*/React__default.createElement(NameAndQtBox, null, /*#__PURE__*/React__default.createElement(CartPageCardName, null, /*#__PURE__*/React__default.createElement(material.Tooltip, {
1719
+ }), /*#__PURE__*/React$1__default.createElement(NameAndQtBox, null, /*#__PURE__*/React$1__default.createElement(CartPageCardName, null, /*#__PURE__*/React$1__default.createElement(material.Tooltip, {
1713
1720
  title: item.productName,
1714
1721
  placement: "top",
1715
1722
  arrow: true
1716
- }, /*#__PURE__*/React__default.createElement("h6", null, item.productName)), /*#__PURE__*/React__default.createElement("p", null, "$", (_item$standardPrice = item.standardPrice) === null || _item$standardPrice === void 0 ? void 0 : _item$standardPrice.toFixed(2))), /*#__PURE__*/React__default.createElement(QtAndPriceBox, null, /*#__PURE__*/React__default.createElement(CartPageQtBox, null, /*#__PURE__*/React__default.createElement("span", {
1723
+ }, /*#__PURE__*/React$1__default.createElement("h6", null, item.productName)), /*#__PURE__*/React$1__default.createElement("p", null, "$", (_item$standardPrice = item.standardPrice) === null || _item$standardPrice === void 0 ? void 0 : _item$standardPrice.toFixed(2))), /*#__PURE__*/React$1__default.createElement(QtAndPriceBox, null, /*#__PURE__*/React$1__default.createElement(CartPageQtBox, null, /*#__PURE__*/React$1__default.createElement("span", {
1717
1724
  className: "icon",
1718
1725
  onClick: function onClick() {
1719
1726
  if (loading) return;
1720
1727
  handleIncrementDecrement('decrement', item);
1721
1728
  }
1722
- }, /*#__PURE__*/React__default.createElement(ai.AiOutlineMinus, null)), /*#__PURE__*/React__default.createElement("span", {
1729
+ }, /*#__PURE__*/React$1__default.createElement(ai.AiOutlineMinus, null)), /*#__PURE__*/React$1__default.createElement("span", {
1723
1730
  className: "qt"
1724
- }, item.quantity), /*#__PURE__*/React__default.createElement("span", {
1731
+ }, item.quantity), /*#__PURE__*/React$1__default.createElement("span", {
1725
1732
  className: "icon",
1726
1733
  onClick: function onClick() {
1727
1734
  if (loading) return;
1728
1735
  handleIncrementDecrement('increment', item);
1729
1736
  }
1730
- }, /*#__PURE__*/React__default.createElement(ai.AiOutlinePlus, null))), /*#__PURE__*/React__default.createElement("p", {
1737
+ }, /*#__PURE__*/React$1__default.createElement(ai.AiOutlinePlus, null))), /*#__PURE__*/React$1__default.createElement("p", {
1731
1738
  className: "subtotal"
1732
- }, "subtotal: $", (item.standardPrice * item.quantity).toFixed(2)))), /*#__PURE__*/React__default.createElement(CloseBtn, {
1739
+ }, "subtotal: $", (item.standardPrice * item.quantity).toFixed(2)))), /*#__PURE__*/React$1__default.createElement(CloseBtn, {
1733
1740
  onClick: function onClick() {
1734
1741
  if (loading) return;
1735
1742
  handleRemoveProduct(item);
1736
1743
  }
1737
- }, /*#__PURE__*/React__default.createElement(ai.AiOutlineClose, null)));
1744
+ }, /*#__PURE__*/React$1__default.createElement(ai.AiOutlineClose, null)));
1738
1745
  };
1739
1746
 
1740
1747
  var CartPageMainRetail = function CartPageMainRetail(_ref) {
@@ -1747,16 +1754,16 @@ var CartPageMainRetail = function CartPageMainRetail(_ref) {
1747
1754
  handleIncrementDecrement = _ref.handleIncrementDecrement,
1748
1755
  handleRemoveProduct = _ref.handleRemoveProduct,
1749
1756
  styles = _ref.styles;
1750
- return /*#__PURE__*/React__default.createElement("div", {
1757
+ return /*#__PURE__*/React$1__default.createElement("div", {
1751
1758
  className: "scrollDiv"
1752
- }, /*#__PURE__*/React__default.createElement(CardsBox, {
1759
+ }, /*#__PURE__*/React$1__default.createElement(CardsBox, {
1753
1760
  retail: retail
1754
- }, loading && /*#__PURE__*/React__default.createElement(Loader, null, /*#__PURE__*/React__default.createElement(reactSpinners.BounceLoader, {
1761
+ }, loading && /*#__PURE__*/React$1__default.createElement(Loader, null, /*#__PURE__*/React$1__default.createElement(reactSpinners.BounceLoader, {
1755
1762
  size: 40,
1756
1763
  color: styles.Btn.background,
1757
1764
  loading: true
1758
1765
  })), cartData === null || cartData === void 0 ? void 0 : (_cartData$cartLineIte = cartData.cartLineItemDtoList) === null || _cartData$cartLineIte === void 0 ? void 0 : _cartData$cartLineIte.map(function (item) {
1759
- return /*#__PURE__*/React__default.createElement(CartPageProductCard, {
1766
+ return /*#__PURE__*/React$1__default.createElement(CartPageProductCard, {
1760
1767
  item: item,
1761
1768
  loading: loading,
1762
1769
  imgnotfoundUrl: imgnotfoundUrl,
@@ -1831,58 +1838,58 @@ var CartSummary = function CartSummary(_ref) {
1831
1838
  totalCartPrice = _ref.totalCartPrice;
1832
1839
  var cartSummary = styles.cartSummary,
1833
1840
  Btn = styles.Btn;
1834
- return /*#__PURE__*/React__default.createElement(CartSummaryContainer, {
1841
+ return /*#__PURE__*/React$1__default.createElement(CartSummaryContainer, {
1835
1842
  background: cartSummary.bg,
1836
1843
  color: cartSummary.color
1837
- }, /*#__PURE__*/React__default.createElement("p", null, "Cart summary"), /*#__PURE__*/React__default.createElement(CartSummaryHr, {
1844
+ }, /*#__PURE__*/React$1__default.createElement("p", null, "Cart summary"), /*#__PURE__*/React$1__default.createElement(CartSummaryHr, {
1838
1845
  color: cartSummary.hr
1839
- }), /*#__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, {
1846
+ }), /*#__PURE__*/React$1__default.createElement(CartSummaryRow, null, /*#__PURE__*/React$1__default.createElement("h6", null, "subtotal"), /*#__PURE__*/React$1__default.createElement("h5", null, "$", subtotal === null || subtotal === void 0 ? void 0 : subtotal.toFixed(2))), /*#__PURE__*/React$1__default.createElement(CartSummaryHr, {
1840
1847
  color: cartSummary.hr
1841
- }), /*#__PURE__*/React__default.createElement(CartSummaryRow, null, /*#__PURE__*/React__default.createElement("h6", null, "Discount"), /*#__PURE__*/React__default.createElement("h5", null, "$0.00")), /*#__PURE__*/React__default.createElement(CartSummaryHr, {
1848
+ }), /*#__PURE__*/React$1__default.createElement(CartSummaryRow, null, /*#__PURE__*/React$1__default.createElement("h6", null, "Discount"), /*#__PURE__*/React$1__default.createElement("h5", null, "$0.00")), /*#__PURE__*/React$1__default.createElement(CartSummaryHr, {
1842
1849
  color: cartSummary.hr
1843
- }), retail && /*#__PURE__*/React__default.createElement(material.Stack, {
1850
+ }), retail && /*#__PURE__*/React$1__default.createElement(material.Stack, {
1844
1851
  flexDirection: "column",
1845
1852
  justifyContent: "flexStart",
1846
1853
  sx: {
1847
1854
  width: '100%'
1848
1855
  }
1849
- }, /*#__PURE__*/React__default.createElement(CartSummaryRow, {
1856
+ }, /*#__PURE__*/React$1__default.createElement(CartSummaryRow, {
1850
1857
  justify: "flex-start"
1851
- }, /*#__PURE__*/React__default.createElement("h6", null, "shipping")), shippingData && shippingData.map(function (li, i) {
1858
+ }, /*#__PURE__*/React$1__default.createElement("h6", null, "shipping")), shippingData && shippingData.map(function (li, i) {
1852
1859
  var _li$amount;
1853
1860
 
1854
- return /*#__PURE__*/React__default.createElement(CartSummaryCheckBoxRow, {
1861
+ return /*#__PURE__*/React$1__default.createElement(CartSummaryCheckBoxRow, {
1855
1862
  key: i,
1856
1863
  selected: li.id === selectedShipping.id,
1857
1864
  onClick: function onClick() {
1858
1865
  setShipping(li);
1859
1866
  },
1860
1867
  background: cartSummary.color
1861
- }, /*#__PURE__*/React__default.createElement("span", {
1868
+ }, /*#__PURE__*/React$1__default.createElement("span", {
1862
1869
  className: "checkBox"
1863
- }), /*#__PURE__*/React__default.createElement("p", null, li.name, ' ', li.amount && li.amount > 0 && /*#__PURE__*/React__default.createElement("span", null, ": $", (_li$amount = li.amount) === null || _li$amount === void 0 ? void 0 : _li$amount.toFixed(2))));
1864
- }), /*#__PURE__*/React__default.createElement(CartSummaryCheckBoxRow, null, /*#__PURE__*/React__default.createElement("p", null, "Shipping options will be updated during checkout.", /*#__PURE__*/React__default.createElement("br", null), /*#__PURE__*/React__default.createElement("span", {
1870
+ }), /*#__PURE__*/React$1__default.createElement("p", null, li.name, ' ', li.amount && li.amount > 0 && /*#__PURE__*/React$1__default.createElement("span", null, ": $", (_li$amount = li.amount) === null || _li$amount === void 0 ? void 0 : _li$amount.toFixed(2))));
1871
+ }), /*#__PURE__*/React$1__default.createElement(CartSummaryCheckBoxRow, null, /*#__PURE__*/React$1__default.createElement("p", null, "Shipping options will be updated during checkout.", /*#__PURE__*/React$1__default.createElement("br", null), /*#__PURE__*/React$1__default.createElement("span", {
1865
1872
  className: "underline"
1866
- }, "Calculate shipping"))), /*#__PURE__*/React__default.createElement(CartSummaryHr, {
1873
+ }, "Calculate shipping"))), /*#__PURE__*/React$1__default.createElement(CartSummaryHr, {
1867
1874
  color: cartSummary.hr
1868
- })), /*#__PURE__*/React__default.createElement(CartSummaryInputBox, {
1875
+ })), /*#__PURE__*/React$1__default.createElement(CartSummaryInputBox, {
1869
1876
  paddingBottom: !retail,
1870
1877
  background: (_cartSummary$input = cartSummary.input) === null || _cartSummary$input === void 0 ? void 0 : _cartSummary$input.bg,
1871
1878
  color: (_cartSummary$input2 = cartSummary.input) === null || _cartSummary$input2 === void 0 ? void 0 : _cartSummary$input2.color,
1872
1879
  btn: Btn === null || Btn === void 0 ? void 0 : Btn.background,
1873
1880
  Btncolor: Btn === null || Btn === void 0 ? void 0 : Btn.color,
1874
1881
  retail: retail
1875
- }, /*#__PURE__*/React__default.createElement("input", {
1882
+ }, /*#__PURE__*/React$1__default.createElement("input", {
1876
1883
  placeholder: "Coupon code",
1877
1884
  type: "email",
1878
1885
  required: true
1879
- }), /*#__PURE__*/React__default.createElement("button", null, "apply coupon")), /*#__PURE__*/React__default.createElement(CartSummaryHr, {
1886
+ }), /*#__PURE__*/React$1__default.createElement("button", null, "apply coupon")), /*#__PURE__*/React$1__default.createElement(CartSummaryHr, {
1880
1887
  color: cartSummary.hr
1881
- }), /*#__PURE__*/React__default.createElement(CartSummaryRow, {
1888
+ }), /*#__PURE__*/React$1__default.createElement(CartSummaryRow, {
1882
1889
  h5: "1.64em"
1883
- }, /*#__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, {
1890
+ }, /*#__PURE__*/React$1__default.createElement("h6", null, "total"), retail ? /*#__PURE__*/React$1__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$1__default.createElement("h5", null, "$", totalCartPrice === null || totalCartPrice === void 0 ? void 0 : totalCartPrice.toFixed(2))), /*#__PURE__*/React$1__default.createElement(CartSummaryRow, {
1884
1891
  justify: "center"
1885
- }, /*#__PURE__*/React__default.createElement(CartSummaryCheckoutBtn, {
1892
+ }, /*#__PURE__*/React$1__default.createElement(CartSummaryCheckoutBtn, {
1886
1893
  retail: retail,
1887
1894
  onClick: function onClick() {
1888
1895
  if (loading) return;
@@ -1890,9 +1897,9 @@ var CartSummary = function CartSummary(_ref) {
1890
1897
  },
1891
1898
  background: Btn.background,
1892
1899
  color: Btn.color
1893
- }, "proceed to checkokut")), /*#__PURE__*/React__default.createElement(CartSummaryRow, {
1900
+ }, "proceed to checkokut")), /*#__PURE__*/React$1__default.createElement(CartSummaryRow, {
1894
1901
  justify: "center"
1895
- }, /*#__PURE__*/React__default.createElement("span", {
1902
+ }, /*#__PURE__*/React$1__default.createElement("span", {
1896
1903
  className: "continueShopping",
1897
1904
  onClick: function onClick() {
1898
1905
  if (loading) return;
@@ -1914,13 +1921,13 @@ var CartPageComponent = function CartPageComponent(_ref) {
1914
1921
  loading = _ref.loading,
1915
1922
  imgnotfoundUrl = _ref.imgnotfoundUrl,
1916
1923
  styles = _ref.styles;
1917
- return /*#__PURE__*/React__default.createElement(CartPageSection, {
1924
+ return /*#__PURE__*/React$1__default.createElement(CartPageSection, {
1918
1925
  bg: styles.bg,
1919
1926
  retail: retail
1920
- }, /*#__PURE__*/React__default.createElement(CartPageContainer, {
1927
+ }, /*#__PURE__*/React$1__default.createElement(CartPageContainer, {
1921
1928
  retail: retail,
1922
1929
  loading: loading
1923
- }, retail ? /*#__PURE__*/React__default.createElement(CartPageMainRetail, {
1930
+ }, retail ? /*#__PURE__*/React$1__default.createElement(CartPageMainRetail, {
1924
1931
  retail: retail,
1925
1932
  cartData: cartData,
1926
1933
  loading: loading,
@@ -1928,7 +1935,7 @@ var CartPageComponent = function CartPageComponent(_ref) {
1928
1935
  styles: styles,
1929
1936
  handleIncrementDecrement: handleIncrementDecrement,
1930
1937
  handleRemoveProduct: handleRemoveProduct
1931
- }) : /*#__PURE__*/React__default.createElement(EnhancedTable, {
1938
+ }) : /*#__PURE__*/React$1__default.createElement(EnhancedTable, {
1932
1939
  retail: retail,
1933
1940
  cartData: cartData,
1934
1941
  loading: loading,
@@ -1937,7 +1944,7 @@ var CartPageComponent = function CartPageComponent(_ref) {
1937
1944
  handleIncrementDecrement: handleIncrementDecrement,
1938
1945
  handleRemoveProduct: handleRemoveProduct,
1939
1946
  handleRemoveAll: handleRemoveAll
1940
- }), /*#__PURE__*/React__default.createElement(CartSummary, {
1947
+ }), /*#__PURE__*/React$1__default.createElement(CartSummary, {
1941
1948
  retail: retail,
1942
1949
  shippingData: shippingData,
1943
1950
  selectedShipping: selectedShipping,
@@ -1949,6 +1956,1002 @@ var CartPageComponent = function CartPageComponent(_ref) {
1949
1956
  })));
1950
1957
  };
1951
1958
 
1959
+ var _templateObject$6, _templateObject2$6, _templateObject3$6, _templateObject4$5, _templateObject5$5;
1960
+ var CheckoutPageContainer = styled.div(_templateObject$6 || (_templateObject$6 = _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-color: ", ";\n margin: 0 auto;\n padding: 3.5em 3.5em 2.5em 4.5em;\n padding-left: min(4.5rem, 2.5vw);\n font-family: 'karla-fonts';\n color: rgba(50, 50, 50, 1);\n max-height: 90vh;\n overflow: hidden;\n border-radius: 28px;\n @media only screen and (max-width: 1488px) {\n flex-direction: column;\n align-items: center;\n max-height: max-content;\n }\n @media only screen and (max-width: 788px) {\n padding: 0.5em;\n }\n .icon {\n font-size: 12px;\n }\n"])), function (props) {
1961
+ return props.maxWidth || '1605px';
1962
+ }, function (props) {
1963
+ return props.bg || 'rgba(255, 248, 246, 1)';
1964
+ });
1965
+ var Row = styled.div(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n"])));
1966
+ var CheckoutMain = styled.div(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteralLoose(["\n width: 100%;\n max-width: 1060px;\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n margin-right: 2em;\n max-height: 80vh;\n padding-right: 2em;\n overflow-y: auto;\n /* width */\n ::-webkit-scrollbar {\n width: 10px;\n background: rgba(245, 197, 189, 0.5);\n border-radius: 16px;\n }\n\n /* Track */\n ::-webkit-scrollbar-track {\n background: rgba(245, 197, 189, 0.5);\n border-radius: 16px;\n }\n\n /* Handle */\n ::-webkit-scrollbar-thumb {\n background: #ef9687;\n border-radius: 16px;\n border: 3px solid rgba(245, 197, 189, 0.5);\n /* border: 3px solid black; */\n }\n @media only screen and (max-width: 1488px) {\n margin-bottom: 3em;\n min-height: max-content;\n max-height: max-content;\n margin-right: 0;\n overflow: visible;\n }\n @media only screen and (max-width: 788px) {\n max-width: 100vw;\n padding-right: 0;\n }\n /* overflow: hidden; */\n"])));
1967
+ var CheckoutHeader = styled(Row)(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteralLoose(["\n justify-content: space-around;\n padding: 2em;\n padding-right: 4em;\n max-width: 57.43rem;\n width: 98%;\n background: #ffffff;\n border-radius: 20px;\n margin-bottom: 2em;\n .row {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-start;\n text-transform: capitalize;\n .icon {\n font-size: 14px;\n font-weight: 400;\n display: grid;\n place-items: center;\n margin-right: 6px;\n color: inherit;\n }\n p {\n font-size: 14px;\n }\n }\n @media only screen and (max-width: 788px) {\n width: 100%;\n padding: 2em 0.5em;\n .row {\n p {\n font-size: 12px;\n }\n span {\n display: none;\n }\n }\n }\n"])));
1968
+ var CheckoutStepIcon = styled.div(_templateObject5$5 || (_templateObject5$5 = _taggedTemplateLiteralLoose(["\n width: 20px;\n height: 20px;\n border-radius: 50%;\n font-size: 5px;\n display: grid;\n place-items: center;\n margin: auto;\n padding: 0;\n .ic {\n font-size: 12px;\n }\n"])));
1969
+
1970
+ var _templateObject$7, _templateObject2$7, _templateObject3$7;
1971
+ var CheckoutSummaryContainer = styled.div(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteralLoose(["\n background: ", ";\n\n border-radius: 20px;\n padding: max(1.5em, 30px);\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n max-width: 422px;\n min-width: min(412px, 95%);\n font-size: 16px;\n"])), function (props) {
1972
+ return props.bg || 'rgba(255, 240, 236, 1)';
1973
+ });
1974
+ var TextRow = styled.div(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n max-width: 90%;\n margin-bottom: 1em;\n padding-bottom: 1em;\n width: 90%;\n border-bottom: 1px solid rgba(250, 232, 229, 1);\n .text {\n font-size: 0.875em;\n font-weight: 300;\n text-transform: capitalize;\n }\n .total {\n font-size: 1.65em;\n font-weight: 800;\n }\n"])));
1975
+ var FilledInfo = styled.div(_templateObject3$7 || (_templateObject3$7 = _taggedTemplateLiteralLoose(["\n margin-bottom: 2em;\n .heading {\n font-size: 1.25em;\n font-weight: 800;\n margin-bottom: 0.8em;\n }\n\n p {\n font-size: 0.875em;\n font-weight: 300;\n text-transform: capitalize;\n max-width: 50%;\n }\n .bold {\n font-weight: 700;\n }\n .payment {\n width: 70px;\n height: 48px;\n background: #ffffff;\n border-radius: 15.875px;\n display: grid;\n place-items: center;\n overflow: hidden;\n /* img {\n object-fit: cover;\n width: 70px;\n height: 48px;\n } */\n }\n .blank {\n padding-bottom: 2em;\n }\n"])));
1976
+
1977
+ var CheckoutSummary = function CheckoutSummary(_ref) {
1978
+ var _paymentMethod$name;
1979
+
1980
+ var total = _ref.total,
1981
+ billingInformation = _ref.billingInformation,
1982
+ shippingInformation = _ref.shippingInformation,
1983
+ paymentMethod = _ref.paymentMethod;
1984
+ return /*#__PURE__*/React$1__default.createElement(CheckoutSummaryContainer, null, /*#__PURE__*/React$1__default.createElement(TextRow, null, /*#__PURE__*/React$1__default.createElement("p", {
1985
+ className: "text"
1986
+ }, "order total:"), /*#__PURE__*/React$1__default.createElement("h6", {
1987
+ className: "total"
1988
+ }, total && "$" + (total === null || total === void 0 ? void 0 : total.toFixed(2)))), /*#__PURE__*/React$1__default.createElement(FilledInfo, null, /*#__PURE__*/React$1__default.createElement("h6", {
1989
+ className: "heading"
1990
+ }, "Billing information"), billingInformation ? /*#__PURE__*/React$1__default.createElement(React$1__default.Fragment, null, /*#__PURE__*/React$1__default.createElement("p", {
1991
+ className: "bold"
1992
+ }, billingInformation === null || billingInformation === void 0 ? void 0 : billingInformation.title), /*#__PURE__*/React$1__default.createElement("p", null, billingInformation === null || billingInformation === void 0 ? void 0 : billingInformation.data)) : /*#__PURE__*/React$1__default.createElement("p", {
1993
+ className: "blank bold"
1994
+ }, "- - - - -", /*#__PURE__*/React$1__default.createElement("br", null), "- - -")), /*#__PURE__*/React$1__default.createElement(FilledInfo, null, /*#__PURE__*/React$1__default.createElement("h6", {
1995
+ className: "heading"
1996
+ }, "Shipping information"), shippingInformation ? /*#__PURE__*/React$1__default.createElement(React$1__default.Fragment, null, /*#__PURE__*/React$1__default.createElement("p", {
1997
+ className: "bold"
1998
+ }, shippingInformation === null || shippingInformation === void 0 ? void 0 : shippingInformation.title), /*#__PURE__*/React$1__default.createElement("p", null, shippingInformation === null || shippingInformation === void 0 ? void 0 : shippingInformation.data)) : /*#__PURE__*/React$1__default.createElement("p", {
1999
+ className: "blank bold"
2000
+ }, "- - - - -", /*#__PURE__*/React$1__default.createElement("br", null), "- - -")), /*#__PURE__*/React$1__default.createElement(FilledInfo, null, /*#__PURE__*/React$1__default.createElement("h6", {
2001
+ className: "heading"
2002
+ }, "Payment Method"), /*#__PURE__*/React$1__default.createElement("div", {
2003
+ className: "payment"
2004
+ }, paymentMethod && /*#__PURE__*/React$1__default.createElement("img", {
2005
+ src: "/images/" + (paymentMethod === null || paymentMethod === void 0 ? void 0 : (_paymentMethod$name = paymentMethod.name) === null || _paymentMethod$name === void 0 ? void 0 : _paymentMethod$name.toLowerCase()) + ".png",
2006
+ alt: "payment"
2007
+ }))));
2008
+ };
2009
+
2010
+ var _templateObject$8, _templateObject2$8, _templateObject3$8, _templateObject4$6, _templateObject5$6, _templateObject6$5, _templateObject7$3, _templateObject8$1, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
2011
+ var StepContainer = styled.div(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteralLoose(["\n width: 100%;\n min-width: 57.43rem;\n max-width: 57.43rem;\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: calc(100vw - 40px);\n margin-left: 1em;\n padding: 1em;\n }\n"])));
2012
+ var StepsContent = styled.div(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteralLoose(["\n padding-left: 2.5em;\n min-height: max-content;\n .bold {\n text-transform: uppercase;\n word-spacing: 5px;\n margin-top: 1em;\n span {\n font-weight: 700;\n cursor: pointer;\n }\n .red {\n color: red;\n }\n }\n"])));
2013
+ 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 h5 {\n font-size: 1em;\n font-weight: 700;\n text-transform: capitalize;\n }\n .icon {\n font-size: 1.3rem;\n margin-right: 8px;\n }\n .dropIcon {\n font-size: 1.4rem;\n cursor: pointer;\n transform: rotate(-90deg);\n transition: 0.3s;\n color: rgba(50, 50, 50, 0.75);\n }\n @media screen and (max-width: 768px) {\n max-width: 97%;\n margin-left: 1em;\n /* padding: 1.5em 2em; */\n }\n"])), function (props) {
2014
+ return props.single ? '1.8em 2em' : '1em 0';
2015
+ }, function (props) {
2016
+ return props.single ? '-1.56em' : '1em';
2017
+ }, function (props) {
2018
+ return props.single ? '-1.56em' : '0';
2019
+ }, function (props) {
2020
+ return props.single ? '1.5em' : '0';
2021
+ });
2022
+ var TextFeildContainer = styled.div(_templateObject4$6 || (_templateObject4$6 = _taggedTemplateLiteralLoose(["\n && {\n input {\n font-size: 0.875em !important;\n height: 28px;\n &::placeholder {\n font-size: 0.875em !important;\n }\n }\n .icon {\n color: black;\n font-size: 1rem;\n }\n }\n"])));
2023
+ var CommonCheckoutBtn = styled.button(_templateObject5$6 || (_templateObject5$6 = _taggedTemplateLiteralLoose(["\n border: none;\n outline: none;\n padding: ", ";\n background: ", ";\n display: grid;\n place-items: center;\n color: white;\n margin: 0 1em;\n text-transform: ", ";\n transition: 0.4s;\n cursor: ", ";\n &:hover,\n &:focus {\n opacity: 0.7;\n }\n"])), function (props) {
2024
+ return props.padding || '.4em 1.6em';
2025
+ }, function (props) {
2026
+ return props.color || '#FD0015';
2027
+ }, function (props) {
2028
+ return props.uppercase ? 'uppercase' : 'capitalized';
2029
+ }, function (props) {
2030
+ return props.disabled ? 'not-allowed' : 'pointer';
2031
+ });
2032
+ var ButtonRowContainer = styled.div(_templateObject6$5 || (_templateObject6$5 = _taggedTemplateLiteralLoose(["\n width: 100%;\n display: flex;\n flex-direction: row;\n justify-content: flex-end;\n align-items: center;\n\n .back {\n display: flex;\n flex-direction: row;\n align-items: center;\n font-size: 0.812em;\n font-weight: 500;\n justify-content: flex-start;\n font-size: 0.8em;\n cursor: ", ";\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) {
2033
+ return props.disabled ? 'not-allowed' : 'pointer';
2034
+ });
2035
+ var CheckBoxRow = styled.div(_templateObject7$3 || (_templateObject7$3 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n cursor: pointer;\n padding: ", ";\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: 700;\n margin: 1em;\n margin-top: 2em;\n transition: 0.4s;\n cursor: pointer;\n font-family: 'karla-fonts';\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"])), function (props) {
2036
+ return props.padding;
2037
+ });
2038
+ var DeliveryCard = styled.div(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteralLoose(["\n width: 100%;\n background: #fd0015;\n color: white;\n height: 34px;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n padding: 0.5em 1em;\n margin-right: 1em;\n /* padding: 1em 0.4rem; */\n cursor: pointer;\n img {\n width: 38px;\n height: 17px;\n margin-bottom: -5px;\n margin-right: 4px;\n }\n p {\n font-size: 10px;\n }\n .circle {\n width: 10px;\n height: 10px;\n border-radius: 1px solid black;\n background-color: white;\n display: grid;\n place-items: center;\n border-radius: 50%;\n margin-left: auto;\n margin-left: 5px;\n .smallCircle {\n width: 4px;\n height: 4px;\n background: black;\n border-radius: 50%;\n }\n }\n"])));
2039
+ var CreditCard = styled.div(_templateObject9 || (_templateObject9 = _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 &:hover,\n &:focus {\n border: 1px solid black;\n }\n"])));
2040
+ var StyledTableRow = styled(material.TableRow)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n && {\n box-shadow: none;\n border: none;\n background-color: ", ";\n p {\n font-size: 0.9rem;\n font-family: 'karla-fonts';\n }\n .max {\n min-width: max-content;\n }\n .red {\n color: red;\n font-weight: inherit;\n }\n .price {\n font-weight: 700;\n }\n }\n"])), function (props) {
2041
+ return props.colored ? 'rgba(255, 240, 236, 1)' : 'white';
2042
+ });
2043
+ var StyledTableCell = styled(material.TableCell)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n && {\n border: none;\n }\n"])));
2044
+ var BottomGrid = styled(material.Grid)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n .bold {\n font-weight: 700;\n text-transform: capitalize;\n margin: 1em 0;\n font-size: 1rem;\n }\n .icon {\n font-size: 1.6em;\n color: rgba(253, 0, 21, 1);\n }\n textarea {\n width: 100%;\n resize: none;\n background: #fff8f6;\n border: 1px solid rgba(253, 0, 21, 0.5);\n border-radius: 4px;\n margin-bottom: 2em;\n padding: 1em;\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: 700;\n color: rgba(253, 0, 21, 1);\n\n cursor: pointer;\n &:hover {\n text-decoration: underline;\n }\n }\n }\n"])));
2045
+
2046
+ var CheckoutInput = function CheckoutInput(_ref) {
2047
+ var controlls = _ref.controlls;
2048
+ var placeholder = controlls.placeholder,
2049
+ _controlls$autoFocus = controlls.autoFocus,
2050
+ autoFocus = _controlls$autoFocus === void 0 ? false : _controlls$autoFocus,
2051
+ showIcon = controlls.showIcon,
2052
+ type = controlls.type;
2053
+ return /*#__PURE__*/React.createElement(TextFeildContainer, null, /*#__PURE__*/React.createElement(reactHookForm.Controller, _extends({}, controlls, {
2054
+ defaultValue: "",
2055
+ render: function render(_ref2) {
2056
+ var field = _ref2.field;
2057
+ return /*#__PURE__*/React.createElement(material.TextField, _extends({
2058
+ placeholder: placeholder,
2059
+ variant: "outlined",
2060
+ required: true,
2061
+ size: "small",
2062
+ InputProps: showIcon ? {
2063
+ startAdornment: /*#__PURE__*/React.createElement(material.InputAdornment, {
2064
+ position: "start"
2065
+ }, showIcon())
2066
+ } : {},
2067
+ fullWidth: true,
2068
+ type: type || 'text'
2069
+ }, field, {
2070
+ autoFocus: autoFocus
2071
+ }));
2072
+ }
2073
+ })));
2074
+ };
2075
+ var CheckoutSelect = function CheckoutSelect(_ref3) {
2076
+ var controlls = _ref3.controlls;
2077
+ var key = controlls.key,
2078
+ List = controlls.List,
2079
+ name = controlls.name,
2080
+ placeholder = controlls.placeholder,
2081
+ control = controlls.control,
2082
+ _controlls$val = controlls.val,
2083
+ val = _controlls$val === void 0 ? 'id' : _controlls$val,
2084
+ _controlls$autoFocus2 = controlls.autoFocus,
2085
+ autoFocus = _controlls$autoFocus2 === void 0 ? false : _controlls$autoFocus2;
2086
+ return /*#__PURE__*/React.createElement(TextFeildContainer, {
2087
+ select: true
2088
+ }, /*#__PURE__*/React.createElement(reactHookForm.Controller, {
2089
+ control: control,
2090
+ name: name,
2091
+ defaultValue: "",
2092
+ render: function render(_ref4) {
2093
+ var field = _ref4.field;
2094
+ return /*#__PURE__*/React.createElement(material.TextField, _extends({
2095
+ fullWidth: true,
2096
+ label: placeholder,
2097
+ select: true,
2098
+ required: true,
2099
+ size: "small",
2100
+ autoFocus: autoFocus
2101
+ }, field), key && (List === null || List === void 0 ? void 0 : List.map(function (item, i) {
2102
+ return /*#__PURE__*/React.createElement(material.MenuItem, {
2103
+ key: i,
2104
+ value: item[val]
2105
+ }, item[key]);
2106
+ })));
2107
+ }
2108
+ }));
2109
+ };
2110
+
2111
+ var ButtonRow = function ButtonRow(_ref) {
2112
+ var handleBack = _ref.handleBack,
2113
+ handleNext = _ref.handleNext,
2114
+ backDisabled = _ref.backDisabled,
2115
+ nextDisabled = _ref.nextDisabled;
2116
+ return /*#__PURE__*/React$1__default.createElement(ButtonRowContainer, {
2117
+ disabled: backDisabled
2118
+ }, /*#__PURE__*/React$1__default.createElement("div", {
2119
+ className: "back",
2120
+ tabIndex: "1",
2121
+ onClick: function onClick() {
2122
+ if (backDisabled) return;
2123
+ handleBack();
2124
+ }
2125
+ }, /*#__PURE__*/React$1__default.createElement(bi.BiArrowBack, {
2126
+ className: "icon"
2127
+ }), "Back"), /*#__PURE__*/React$1__default.createElement(CommonCheckoutBtn, {
2128
+ disabled: nextDisabled,
2129
+ tabIndex: "1",
2130
+ onClick: function onClick() {
2131
+ if (nextDisabled) return;
2132
+ handleNext();
2133
+ }
2134
+ }, "Next"));
2135
+ };
2136
+
2137
+ var StepsHeaderComponent = function StepsHeaderComponent(_ref) {
2138
+ var text = _ref.text,
2139
+ username = _ref.username,
2140
+ Icon = _ref.Icon,
2141
+ single = _ref.single,
2142
+ closed = _ref.closed,
2143
+ handleClick = _ref.handleClick;
2144
+ return /*#__PURE__*/React$1__default.createElement(StepsHeaderContainer, {
2145
+ single: single
2146
+ }, /*#__PURE__*/React$1__default.createElement(material.Stack, {
2147
+ justifyContent: 'space-between',
2148
+ flexDirection: "row",
2149
+ sx: {
2150
+ width: '100%'
2151
+ }
2152
+ }, /*#__PURE__*/React$1__default.createElement(material.Stack, {
2153
+ flexDirection: "row"
2154
+ }, Icon(), /*#__PURE__*/React$1__default.createElement("h5", null, text, " ", username && "" + username)), /*#__PURE__*/React$1__default.createElement(hi.HiOutlineChevronDown, {
2155
+ className: "dropIcon",
2156
+ style: closed ? {
2157
+ transform: 'rotate(-90deg)'
2158
+ } : {
2159
+ transform: 'rotate(0deg)'
2160
+ },
2161
+ onClick: function onClick() {
2162
+ if (!handleClick) return;
2163
+ handleClick();
2164
+ }
2165
+ })));
2166
+ };
2167
+
2168
+ var Step0 = function Step0(_ref) {
2169
+ var loading = _ref.loading,
2170
+ userName = _ref.userName,
2171
+ handleBack = _ref.handleBack,
2172
+ handleNext = _ref.handleNext,
2173
+ handleLogin = _ref.handleLogin;
2174
+
2175
+ var _useForm = reactHookForm.useForm(),
2176
+ control = _useForm.control,
2177
+ handleSubmit = _useForm.handleSubmit;
2178
+
2179
+ var onSubmit = function onSubmit(data) {
2180
+ handleLogin(data);
2181
+ };
2182
+
2183
+ function Icon() {
2184
+ return /*#__PURE__*/React$1__default.createElement(cg.CgProfile, {
2185
+ className: "icon"
2186
+ });
2187
+ }
2188
+
2189
+ return /*#__PURE__*/React$1__default.createElement(StepContainer, null, /*#__PURE__*/React$1__default.createElement(StepsHeaderComponent, {
2190
+ text: 'welcome',
2191
+ username: userName,
2192
+ Icon: Icon,
2193
+ step: 0
2194
+ }), /*#__PURE__*/React$1__default.createElement(StepsContent, null, /*#__PURE__*/React$1__default.createElement("p", null, "Please choose how you want to proceed"), /*#__PURE__*/React$1__default.createElement("p", {
2195
+ className: "bold"
2196
+ }, /*#__PURE__*/React$1__default.createElement("span", null, "register"), " | ", /*#__PURE__*/React$1__default.createElement("span", {
2197
+ className: "red"
2198
+ }, "login")), /*#__PURE__*/React$1__default.createElement(material.Grid, {
2199
+ container: true,
2200
+ component: 'form',
2201
+ onSubmit: handleSubmit(onSubmit),
2202
+ rowSpacing: 2,
2203
+ sx: {
2204
+ marginTop: '1em'
2205
+ }
2206
+ }, /*#__PURE__*/React$1__default.createElement(material.Grid, {
2207
+ item: true,
2208
+ sm: 8,
2209
+ xs: 12
2210
+ }, /*#__PURE__*/React$1__default.createElement(CheckoutInput, {
2211
+ controlls: {
2212
+ name: 'email',
2213
+ placeholder: 'E-Mail Address',
2214
+ control: control,
2215
+ autoFocus: true,
2216
+ type: 'email'
2217
+ }
2218
+ })), /*#__PURE__*/React$1__default.createElement(material.Grid, {
2219
+ item: true,
2220
+ sm: 8,
2221
+ xs: 12
2222
+ }, /*#__PURE__*/React$1__default.createElement(CheckoutInput, {
2223
+ controlls: {
2224
+ name: 'password',
2225
+ placeholder: 'Password',
2226
+ control: control,
2227
+ type: 'password'
2228
+ }
2229
+ })), /*#__PURE__*/React$1__default.createElement(material.Grid, {
2230
+ item: true,
2231
+ sm: 4
2232
+ }), /*#__PURE__*/React$1__default.createElement(CheckBoxRow, {
2233
+ padding: ".8em 0 0 0"
2234
+ }, /*#__PURE__*/React$1__default.createElement(material.Checkbox, {
2235
+ size: "small"
2236
+ }), /*#__PURE__*/React$1__default.createElement("p", null, "Remember me")), /*#__PURE__*/React$1__default.createElement(material.Grid, {
2237
+ item: true,
2238
+ xs: 12
2239
+ }, /*#__PURE__*/React$1__default.createElement(CommonCheckoutBtn, {
2240
+ padding: ".8em 3em",
2241
+ uppercase: true,
2242
+ type: "submit"
2243
+ }, loading ? /*#__PURE__*/React$1__default.createElement(material.CircularProgress, {
2244
+ color: "inherit",
2245
+ size: 15
2246
+ }) : 'Login'))), /*#__PURE__*/React$1__default.createElement(ButtonRow, {
2247
+ handleBack: handleBack,
2248
+ handleNext: handleNext,
2249
+ backDisabled: true,
2250
+ nextDisabled: !userName
2251
+ })));
2252
+ };
2253
+
2254
+ var Step1 = function Step1(_ref) {
2255
+ var _Object$keys2;
2256
+
2257
+ var handleBack = _ref.handleBack,
2258
+ _handleNext = _ref.handleNext,
2259
+ setShipping = _ref.setShipping,
2260
+ setBillingAddress = _ref.setBillingAddress,
2261
+ stores = _ref.stores,
2262
+ addresses = _ref.addresses;
2263
+
2264
+ var _useForm = reactHookForm.useForm(),
2265
+ control = _useForm.control,
2266
+ dirtyFields = _useForm.formState.dirtyFields,
2267
+ getValues = _useForm.getValues;
2268
+
2269
+ var _React$useState = React$1__default.useState(false),
2270
+ setAddress = _React$useState[0],
2271
+ setSetAddress = _React$useState[1];
2272
+
2273
+ function Icon() {
2274
+ return /*#__PURE__*/React$1__default.createElement(bi.BiNotepad, {
2275
+ className: "icon"
2276
+ });
2277
+ }
2278
+
2279
+ return /*#__PURE__*/React$1__default.createElement(StepContainer, null, /*#__PURE__*/React$1__default.createElement(StepsHeaderComponent, {
2280
+ text: 'billing information',
2281
+ Icon: Icon
2282
+ }), /*#__PURE__*/React$1__default.createElement(StepsContent, null, /*#__PURE__*/React$1__default.createElement(material.Grid, {
2283
+ container: true,
2284
+ rowSpacing: 2,
2285
+ sx: {
2286
+ paddingTop: '1em'
2287
+ }
2288
+ }, /*#__PURE__*/React$1__default.createElement(material.Grid, {
2289
+ item: true,
2290
+ xs: 12,
2291
+ md: 10
2292
+ }, /*#__PURE__*/React$1__default.createElement(CheckoutSelect, {
2293
+ controlls: {
2294
+ name: 'store',
2295
+ placeholder: 'Please Select your store',
2296
+ control: control,
2297
+ List: stores,
2298
+ key: 'name'
2299
+ }
2300
+ })), /*#__PURE__*/React$1__default.createElement(material.Grid, {
2301
+ item: true,
2302
+ xs: 12,
2303
+ md: 10
2304
+ }, /*#__PURE__*/React$1__default.createElement(CheckoutSelect, {
2305
+ controlls: {
2306
+ name: 'billingAddress',
2307
+ placeholder: 'Select a billing address from your address book ',
2308
+ control: control,
2309
+ List: addresses,
2310
+ key: 'name'
2311
+ }
2312
+ })), /*#__PURE__*/React$1__default.createElement(material.Grid, {
2313
+ item: true,
2314
+ xs: 12
2315
+ }, /*#__PURE__*/React$1__default.createElement(CheckBoxRow, {
2316
+ onClick: function onClick() {
2317
+ setSetAddress(false);
2318
+ }
2319
+ }, /*#__PURE__*/React$1__default.createElement(material.Checkbox, {
2320
+ checked: !setAddress,
2321
+ icon: /*#__PURE__*/React$1__default.createElement(md.MdOutlineCircle, null),
2322
+ checkedIcon: /*#__PURE__*/React$1__default.createElement(gr.GrRadialSelected, null)
2323
+ }), /*#__PURE__*/React$1__default.createElement("p", null, "Ship to this address"))), /*#__PURE__*/React$1__default.createElement(CheckBoxRow, {
2324
+ padding: '0 0 1em 0',
2325
+ onClick: function onClick() {
2326
+ setSetAddress(true);
2327
+ }
2328
+ }, /*#__PURE__*/React$1__default.createElement(material.Checkbox, {
2329
+ checked: setAddress,
2330
+ icon: /*#__PURE__*/React$1__default.createElement(md.MdOutlineCircle, null),
2331
+ checkedIcon: /*#__PURE__*/React$1__default.createElement(gr.GrRadialSelected, null)
2332
+ }), /*#__PURE__*/React$1__default.createElement("p", null, "Ship to a different address "))), /*#__PURE__*/React$1__default.createElement(ButtonRow, {
2333
+ handleBack: handleBack,
2334
+ handleNext: function handleNext() {
2335
+ var _Object$keys;
2336
+
2337
+ if (((_Object$keys = Object.keys(dirtyFields)) === null || _Object$keys === void 0 ? void 0 : _Object$keys.length) === 2) {
2338
+ console.log(setAddress, getValues());
2339
+ setShipping(setAddress);
2340
+ setBillingAddress(getValues());
2341
+
2342
+ _handleNext();
2343
+ }
2344
+ },
2345
+ nextDisabled: ((_Object$keys2 = Object.keys(dirtyFields)) === null || _Object$keys2 === void 0 ? void 0 : _Object$keys2.length) !== 2
2346
+ })));
2347
+ };
2348
+
2349
+ var Step2 = function Step2(_ref) {
2350
+ var _Object$keys2;
2351
+
2352
+ var handleBack = _ref.handleBack,
2353
+ _handleNext = _ref.handleNext,
2354
+ options = _ref.options,
2355
+ setShipping = _ref.setShipping,
2356
+ countries = _ref.countries,
2357
+ setShippingMethod = _ref.setShippingMethod,
2358
+ showShipping = _ref.showShipping;
2359
+
2360
+ var _useForm = reactHookForm.useForm(),
2361
+ control = _useForm.control,
2362
+ dirtyFields = _useForm.formState.dirtyFields,
2363
+ getValues = _useForm.getValues;
2364
+
2365
+ var _React$useState = React$1__default.useState(options[0]),
2366
+ method = _React$useState[0],
2367
+ setmethod = _React$useState[1];
2368
+
2369
+ function Icon() {
2370
+ return /*#__PURE__*/React$1__default.createElement(fi.FiTruck, {
2371
+ className: "icon"
2372
+ });
2373
+ }
2374
+
2375
+ return /*#__PURE__*/React$1__default.createElement(StepContainer, null, /*#__PURE__*/React$1__default.createElement(StepsHeaderComponent, {
2376
+ text: 'shipping information',
2377
+ Icon: Icon
2378
+ }), /*#__PURE__*/React$1__default.createElement(StepsContent, null, showShipping && /*#__PURE__*/React$1__default.createElement(material.Grid, {
2379
+ container: true,
2380
+ rowSpacing: 2,
2381
+ columnSpacing: 2,
2382
+ sx: {
2383
+ paddingBottom: '1em'
2384
+ }
2385
+ }, /*#__PURE__*/React$1__default.createElement(material.Grid, {
2386
+ item: true,
2387
+ xs: 12,
2388
+ md: 10
2389
+ }, /*#__PURE__*/React$1__default.createElement(CheckoutInput, {
2390
+ controlls: {
2391
+ name: 'fullAddress',
2392
+ placeholder: 'Full Address*',
2393
+ control: control
2394
+ }
2395
+ })), /*#__PURE__*/React$1__default.createElement(material.Grid, {
2396
+ item: true,
2397
+ xs: 6,
2398
+ md: 3.33
2399
+ }, /*#__PURE__*/React$1__default.createElement(CheckoutInput, {
2400
+ controlls: {
2401
+ name: 'zipCode',
2402
+ placeholder: 'Zip/Postal Code*',
2403
+ control: control,
2404
+ type: 'number'
2405
+ }
2406
+ })), /*#__PURE__*/React$1__default.createElement(material.Grid, {
2407
+ item: true,
2408
+ xs: 6,
2409
+ md: 3.33
2410
+ }, /*#__PURE__*/React$1__default.createElement(CheckoutInput, {
2411
+ controlls: {
2412
+ name: 'city',
2413
+ placeholder: 'City*',
2414
+ control: control
2415
+ }
2416
+ })), /*#__PURE__*/React$1__default.createElement(material.Grid, {
2417
+ item: true,
2418
+ xs: 12,
2419
+ md: 3.34
2420
+ }, /*#__PURE__*/React$1__default.createElement(CheckoutSelect, {
2421
+ controlls: {
2422
+ name: 'country',
2423
+ placeholder: 'Country',
2424
+ control: control,
2425
+ List: countries,
2426
+ key: 'name'
2427
+ }
2428
+ }))), /*#__PURE__*/React$1__default.createElement(material.Grid, {
2429
+ container: true,
2430
+ columnSpacing: 0.5,
2431
+ rowSpacing: 2,
2432
+ sx: {
2433
+ margin: '1em 0'
2434
+ }
2435
+ }, options === null || options === void 0 ? void 0 : options.map(function (option, i) {
2436
+ var _option$name, _option$name$toLowerC;
2437
+
2438
+ var fedex = option === null || option === void 0 ? void 0 : (_option$name = option.name) === null || _option$name === void 0 ? void 0 : (_option$name$toLowerC = _option$name.toLowerCase()) === null || _option$name$toLowerC === void 0 ? void 0 : _option$name$toLowerC.includes('fedex');
2439
+ var replaced;
2440
+
2441
+ if (fedex) {
2442
+ var _option$name2;
2443
+
2444
+ replaced = (_option$name2 = option.name) === null || _option$name2 === void 0 ? void 0 : _option$name2.replace(/fedex/i, ' ');
2445
+ }
2446
+
2447
+ return /*#__PURE__*/React$1__default.createElement(material.Stack, {
2448
+ flexDirection: "row",
2449
+ justifyContent: "space-around",
2450
+ aligItems: "center",
2451
+ flexWrap: 'wrap'
2452
+ }, /*#__PURE__*/React$1__default.createElement(DeliveryCard, {
2453
+ onClick: function onClick() {
2454
+ return setmethod(option);
2455
+ }
2456
+ }, fedex && /*#__PURE__*/React$1__default.createElement("img", {
2457
+ src: "/images/fedex.png",
2458
+ alt: "fedex"
2459
+ }), fedex ? /*#__PURE__*/React$1__default.createElement("p", null, replaced) : /*#__PURE__*/React$1__default.createElement("p", null, /*#__PURE__*/React$1__default.createElement("p", null, option.name)), /*#__PURE__*/React$1__default.createElement("span", {
2460
+ className: "circle"
2461
+ }, (option === null || option === void 0 ? void 0 : option.id) === (method === null || method === void 0 ? void 0 : method.id) && /*#__PURE__*/React$1__default.createElement("span", {
2462
+ className: "smallCircle"
2463
+ }))));
2464
+ })), /*#__PURE__*/React$1__default.createElement(ButtonRow, {
2465
+ handleBack: handleBack,
2466
+ handleNext: function handleNext() {
2467
+ var _Object$keys;
2468
+
2469
+ if (((_Object$keys = Object.keys(dirtyFields)) === null || _Object$keys === void 0 ? void 0 : _Object$keys.length) === 4) {
2470
+ setShipping(getValues());
2471
+ setShippingMethod(method);
2472
+
2473
+ _handleNext();
2474
+ }
2475
+ },
2476
+ nextDisabled: ((_Object$keys2 = Object.keys(dirtyFields)) === null || _Object$keys2 === void 0 ? void 0 : _Object$keys2.length) !== 4
2477
+ })));
2478
+ };
2479
+
2480
+ var Step3 = function Step3(_ref) {
2481
+ var _Object$keys2;
2482
+
2483
+ var handleBack = _ref.handleBack,
2484
+ _handleNext = _ref.handleNext,
2485
+ setPaymentDetails = _ref.setPaymentDetails,
2486
+ payments = _ref.payments;
2487
+
2488
+ var _useForm = reactHookForm.useForm(),
2489
+ control = _useForm.control,
2490
+ handleSubmit = _useForm.handleSubmit,
2491
+ dirtyFields = _useForm.formState.dirtyFields,
2492
+ getValues = _useForm.getValues;
2493
+
2494
+ var onSubmit = function onSubmit(data) {
2495
+ console.log(data);
2496
+ };
2497
+
2498
+ function Icon() {
2499
+ return /*#__PURE__*/React$1__default.createElement(bi.BiWallet, {
2500
+ className: "icon"
2501
+ });
2502
+ }
2503
+
2504
+ return /*#__PURE__*/React$1__default.createElement(StepContainer, null, /*#__PURE__*/React$1__default.createElement(StepsHeaderComponent, {
2505
+ text: 'Payments Method',
2506
+ Icon: Icon
2507
+ }), /*#__PURE__*/React$1__default.createElement(StepsContent, null, /*#__PURE__*/React$1__default.createElement(material.Grid, {
2508
+ container: true,
2509
+ rowSpacing: 2,
2510
+ sx: {
2511
+ margin: '1.5em 0'
2512
+ }
2513
+ }, payments === null || payments === void 0 ? void 0 : payments.map(function (payment, i) {
2514
+ return /*#__PURE__*/React$1__default.createElement(material.Grid, {
2515
+ item: true,
2516
+ key: i,
2517
+ xs: 2.8,
2518
+ sm: 1.5
2519
+ }, /*#__PURE__*/React$1__default.createElement(CreditCard, {
2520
+ tabIndex: 1
2521
+ }, /*#__PURE__*/React$1__default.createElement("img", {
2522
+ src: "/images/" + (payment === null || payment === void 0 ? void 0 : payment.name) + ".png",
2523
+ alt: payment.name
2524
+ })));
2525
+ })), /*#__PURE__*/React$1__default.createElement(material.Grid, {
2526
+ container: true,
2527
+ component: 'form',
2528
+ onSubmit: handleSubmit(onSubmit),
2529
+ rowSpacing: 2,
2530
+ columnSpacing: 2,
2531
+ sx: {
2532
+ paddingBottom: '1em'
2533
+ }
2534
+ }, /*#__PURE__*/React$1__default.createElement(material.Grid, {
2535
+ item: true,
2536
+ xs: 10
2537
+ }, /*#__PURE__*/React$1__default.createElement(CheckoutInput, {
2538
+ controlls: {
2539
+ name: 'cardName',
2540
+ placeholder: "Card Holder's Name*",
2541
+ control: control,
2542
+ showIcon: function showIcon() {
2543
+ return /*#__PURE__*/React$1__default.createElement(io5.IoPersonOutline, {
2544
+ className: "icon"
2545
+ });
2546
+ }
2547
+ }
2548
+ })), /*#__PURE__*/React$1__default.createElement(material.Grid, {
2549
+ item: true,
2550
+ xs: 10
2551
+ }, /*#__PURE__*/React$1__default.createElement(CheckoutInput, {
2552
+ controlls: {
2553
+ name: 'cardNumber',
2554
+ placeholder: 'Card Nubmers xxxx-xxxx-xxxx-xxxx',
2555
+ control: control,
2556
+ showIcon: function showIcon() {
2557
+ return /*#__PURE__*/React$1__default.createElement(bs.BsCreditCard, {
2558
+ className: "icon"
2559
+ });
2560
+ },
2561
+ type: 'number'
2562
+ }
2563
+ })), /*#__PURE__*/React$1__default.createElement(material.Grid, {
2564
+ item: true,
2565
+ xs: 12,
2566
+ sm: 5
2567
+ }, /*#__PURE__*/React$1__default.createElement(CheckoutInput, {
2568
+ controlls: {
2569
+ name: 'expiryDate ',
2570
+ placeholder: 'Expiration Date MM/YYYY',
2571
+ control: control,
2572
+ showIcon: function showIcon() {
2573
+ return /*#__PURE__*/React$1__default.createElement(md.MdOutlineDateRange, {
2574
+ className: "icon"
2575
+ });
2576
+ },
2577
+ type: 'number'
2578
+ }
2579
+ })), /*#__PURE__*/React$1__default.createElement(material.Grid, {
2580
+ item: true,
2581
+ xs: 12,
2582
+ sm: 3.5
2583
+ }, /*#__PURE__*/React$1__default.createElement(CheckoutInput, {
2584
+ controlls: {
2585
+ name: 'cvv',
2586
+ placeholder: 'CVC/CVVV ***',
2587
+ control: control,
2588
+ showIcon: function showIcon() {
2589
+ return /*#__PURE__*/React$1__default.createElement(bi.BiLockAlt, {
2590
+ className: "icon"
2591
+ });
2592
+ },
2593
+ type: 'password'
2594
+ }
2595
+ })), /*#__PURE__*/React$1__default.createElement(material.Grid, {
2596
+ item: true,
2597
+ xs: 12
2598
+ }, /*#__PURE__*/React$1__default.createElement(CheckBoxRow, {
2599
+ padding: ".8em 0 0 0"
2600
+ }, /*#__PURE__*/React$1__default.createElement(material.Checkbox, {
2601
+ size: "small"
2602
+ }), /*#__PURE__*/React$1__default.createElement("p", null, "Remember me")))), /*#__PURE__*/React$1__default.createElement(ButtonRow, {
2603
+ handleBack: handleBack,
2604
+ handleNext: function handleNext() {
2605
+ var _Object$keys;
2606
+
2607
+ if (((_Object$keys = Object.keys(dirtyFields)) === null || _Object$keys === void 0 ? void 0 : _Object$keys.length) === 4) {
2608
+ console.log('clicked', getValues());
2609
+ setPaymentDetails(getValues());
2610
+
2611
+ _handleNext();
2612
+ }
2613
+ },
2614
+ nextDisabled: ((_Object$keys2 = Object.keys(dirtyFields)) === null || _Object$keys2 === void 0 ? void 0 : _Object$keys2.length) !== 4
2615
+ })));
2616
+ };
2617
+
2618
+ var Step4 = function Step4(_ref) {
2619
+ var _cartData$cartLineIte, _cartData$totalCartPr;
2620
+
2621
+ var handleBack = _ref.handleBack,
2622
+ handleNext = _ref.handleNext,
2623
+ cartData = _ref.cartData,
2624
+ vatPercentage = _ref.vat,
2625
+ clickRedirect = _ref.clickRedirect;
2626
+
2627
+ var _React$useState = React$1__default.useState(false),
2628
+ checked = _React$useState[0],
2629
+ setChecked = _React$useState[1];
2630
+
2631
+ var _React$useState2 = React$1__default.useState(''),
2632
+ comments = _React$useState2[0],
2633
+ setComments = _React$useState2[1];
2634
+
2635
+ function Icon() {
2636
+ return /*#__PURE__*/React$1__default.createElement(md.MdOutlineStickyNote2, {
2637
+ className: "icon"
2638
+ });
2639
+ }
2640
+
2641
+ var vat = vatPercentage / 100 * (cartData === null || cartData === void 0 ? void 0 : cartData.totalCartPrice);
2642
+ console.log(vat);
2643
+ return /*#__PURE__*/React$1__default.createElement(StepContainer, null, /*#__PURE__*/React$1__default.createElement(StepsHeaderComponent, {
2644
+ text: 'Order Review',
2645
+ Icon: Icon
2646
+ }), /*#__PURE__*/React$1__default.createElement(StepsContent, null, /*#__PURE__*/React$1__default.createElement(material.TableContainer, null, /*#__PURE__*/React$1__default.createElement(material.Table, {
2647
+ "aria-label": "customized table",
2648
+ sx: {
2649
+ maxHeight: '600px'
2650
+ },
2651
+ size: "small"
2652
+ }, /*#__PURE__*/React$1__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) {
2653
+ var _row$standardPrice, _ref2;
2654
+
2655
+ return /*#__PURE__*/React$1__default.createElement(StyledTableRow, {
2656
+ key: row.name,
2657
+ colored: i % 2 === 0
2658
+ }, /*#__PURE__*/React$1__default.createElement(StyledTableCell, null, /*#__PURE__*/React$1__default.createElement("p", {
2659
+ className: "price max"
2660
+ }, "ID: #", row === null || row === void 0 ? void 0 : row.productId)), /*#__PURE__*/React$1__default.createElement(StyledTableCell, {
2661
+ align: "left"
2662
+ }, /*#__PURE__*/React$1__default.createElement("p", null, row.productName)), /*#__PURE__*/React$1__default.createElement(StyledTableCell, {
2663
+ align: "left"
2664
+ }, /*#__PURE__*/React$1__default.createElement("p", {
2665
+ className: "price"
2666
+ }, (_row$standardPrice = row.standardPrice) === null || _row$standardPrice === void 0 ? void 0 : _row$standardPrice.toFixed(2), /*#__PURE__*/React$1__default.createElement("span", {
2667
+ className: "red"
2668
+ }, " x ", row.quantity))), /*#__PURE__*/React$1__default.createElement(StyledTableCell, {
2669
+ align: "center"
2670
+ }, /*#__PURE__*/React$1__default.createElement("p", {
2671
+ className: "price max"
2672
+ }, (_ref2 = row.quantity * (row === null || row === void 0 ? void 0 : row.standardPrice)) === null || _ref2 === void 0 ? void 0 : _ref2.toFixed(2))));
2673
+ }), /*#__PURE__*/React$1__default.createElement(StyledTableRow, null, /*#__PURE__*/React$1__default.createElement(StyledTableCell, {
2674
+ colSpan: 2
2675
+ }), /*#__PURE__*/React$1__default.createElement(StyledTableCell, {
2676
+ colSpan: 1
2677
+ }, /*#__PURE__*/React$1__default.createElement("p", {
2678
+ className: "max"
2679
+ }, "Total(", cartData === null || cartData === void 0 ? void 0 : cartData.totalCartQuantity, " items)")), /*#__PURE__*/React$1__default.createElement(StyledTableCell, {
2680
+ align: "right"
2681
+ }, /*#__PURE__*/React$1__default.createElement("p", {
2682
+ className: "max price"
2683
+ }, "$", cartData === null || cartData === void 0 ? void 0 : (_cartData$totalCartPr = cartData.totalCartPrice) === null || _cartData$totalCartPr === void 0 ? void 0 : _cartData$totalCartPr.toFixed(2)))), /*#__PURE__*/React$1__default.createElement(StyledTableRow, null, /*#__PURE__*/React$1__default.createElement(StyledTableCell, {
2684
+ colSpan: 2
2685
+ }), /*#__PURE__*/React$1__default.createElement(StyledTableCell, {
2686
+ colSpan: 1
2687
+ }, /*#__PURE__*/React$1__default.createElement("p", {
2688
+ className: "max"
2689
+ }, "Value added tax (VAT)")), /*#__PURE__*/React$1__default.createElement(StyledTableCell, {
2690
+ align: "right"
2691
+ }, /*#__PURE__*/React$1__default.createElement("p", {
2692
+ className: "max price"
2693
+ }, "$", vat === null || vat === void 0 ? void 0 : vat.toFixed(2)))), /*#__PURE__*/React$1__default.createElement(StyledTableRow, null, /*#__PURE__*/React$1__default.createElement(StyledTableCell, {
2694
+ colSpan: 2
2695
+ }), /*#__PURE__*/React$1__default.createElement(StyledTableCell, {
2696
+ colSpan: 1
2697
+ }, /*#__PURE__*/React$1__default.createElement("p", {
2698
+ className: "max"
2699
+ }, "Delivery Charge")), /*#__PURE__*/React$1__default.createElement(StyledTableCell, {
2700
+ align: "right"
2701
+ }, /*#__PURE__*/React$1__default.createElement("p", {
2702
+ className: "max price red"
2703
+ }, "Free"))), /*#__PURE__*/React$1__default.createElement(StyledTableRow, null, /*#__PURE__*/React$1__default.createElement(StyledTableCell, {
2704
+ colSpan: 2
2705
+ }), /*#__PURE__*/React$1__default.createElement(StyledTableCell, {
2706
+ sx: {
2707
+ paddingTop: '1em'
2708
+ },
2709
+ colSpan: 1
2710
+ }, /*#__PURE__*/React$1__default.createElement("p", {
2711
+ className: "max price red"
2712
+ }, "Subtotal")), /*#__PURE__*/React$1__default.createElement(StyledTableCell, {
2713
+ sx: {
2714
+ paddingTop: '1em'
2715
+ },
2716
+ align: "right"
2717
+ }, /*#__PURE__*/React$1__default.createElement("p", {
2718
+ className: "max price red"
2719
+ }, "$", ((cartData === null || cartData === void 0 ? void 0 : cartData.totalCartPrice) + vat).toFixed(2)))))), /*#__PURE__*/React$1__default.createElement(BottomGrid, {
2720
+ container: true,
2721
+ columnSpacing: 0,
2722
+ rowSpacing: 0
2723
+ }, /*#__PURE__*/React$1__default.createElement(material.Grid, {
2724
+ item: true,
2725
+ xs: 12
2726
+ }, /*#__PURE__*/React$1__default.createElement("p", {
2727
+ className: "bold"
2728
+ }, "Your Comment")), /*#__PURE__*/React$1__default.createElement(material.Grid, {
2729
+ item: true,
2730
+ xs: 0.5
2731
+ }, /*#__PURE__*/React$1__default.createElement(cg.CgProfile, {
2732
+ className: "icon"
2733
+ })), /*#__PURE__*/React$1__default.createElement(material.Grid, {
2734
+ item: true,
2735
+ xs: 11.5
2736
+ }, /*#__PURE__*/React$1__default.createElement("textarea", {
2737
+ rows: "3",
2738
+ cols: "4",
2739
+ placeholder: "Comments for the order....",
2740
+ value: comments,
2741
+ onChange: function onChange(e) {
2742
+ setComments(e.target.value);
2743
+ }
2744
+ })), /*#__PURE__*/React$1__default.createElement(material.Grid, {
2745
+ item: true,
2746
+ xs: 12
2747
+ }, /*#__PURE__*/React$1__default.createElement(CheckBoxRow, null, /*#__PURE__*/React$1__default.createElement(material.Checkbox, {
2748
+ size: "small",
2749
+ value: checked,
2750
+ onChange: function onChange() {
2751
+ return setChecked(function (checked) {
2752
+ return !checked;
2753
+ });
2754
+ }
2755
+ }), /*#__PURE__*/React$1__default.createElement("p", null, "I Accept the ", /*#__PURE__*/React$1__default.createElement("span", {
2756
+ className: "ul"
2757
+ }, "Tearms and Conditions"), ' ', "& ", /*#__PURE__*/React$1__default.createElement("span", {
2758
+ className: "ul"
2759
+ }, "Privacy Policy?"), ' '))), /*#__PURE__*/React$1__default.createElement(material.Grid, {
2760
+ item: true,
2761
+ xs: 12
2762
+ }, /*#__PURE__*/React$1__default.createElement(CheckBoxRow, null, /*#__PURE__*/React$1__default.createElement("p", {
2763
+ className: "bottom"
2764
+ }, "Forgot an Item? \xA0", ' ', /*#__PURE__*/React$1__default.createElement("span", {
2765
+ onClick: function onClick() {
2766
+ return clickRedirect('cart');
2767
+ }
2768
+ }, "Edit your cart"))), /*#__PURE__*/React$1__default.createElement(CheckBoxRow, null, /*#__PURE__*/React$1__default.createElement("button", {
2769
+ className: "back",
2770
+ onClick: function onClick() {
2771
+ return handleBack();
2772
+ }
2773
+ }, "back"), /*#__PURE__*/React$1__default.createElement("button", {
2774
+ onClick: function onClick() {
2775
+ if (checked) {
2776
+ handleNext();
2777
+ }
2778
+ }
2779
+ }, "place order")))))));
2780
+ };
2781
+
2782
+ var steps = [{
2783
+ text: 'welcome',
2784
+ Icon: function Icon() {
2785
+ return /*#__PURE__*/React$1__default.createElement(cg.CgProfile, {
2786
+ className: "icon"
2787
+ });
2788
+ }
2789
+ }, {
2790
+ text: 'billing information',
2791
+ Icon: function Icon() {
2792
+ return /*#__PURE__*/React$1__default.createElement(bi.BiNotepad, {
2793
+ className: "icon"
2794
+ });
2795
+ }
2796
+ }, {
2797
+ text: 'shipping information',
2798
+ Icon: function Icon() {
2799
+ return /*#__PURE__*/React$1__default.createElement(fi.FiTruck, {
2800
+ className: "icon"
2801
+ });
2802
+ }
2803
+ }, {
2804
+ text: 'payment method',
2805
+ Icon: function Icon() {
2806
+ return /*#__PURE__*/React$1__default.createElement(bi.BiWallet, {
2807
+ className: "icon"
2808
+ });
2809
+ }
2810
+ }, {
2811
+ text: 'order review',
2812
+ Icon: function Icon() {
2813
+ return /*#__PURE__*/React$1__default.createElement(md.MdOutlineStickyNote2, {
2814
+ className: "icon"
2815
+ });
2816
+ }
2817
+ }];
2818
+
2819
+ var CheckoutComp = function CheckoutComp(_ref) {
2820
+ var currStep = _ref.currStep,
2821
+ handleNext = _ref.handleNext,
2822
+ handleBack = _ref.handleBack,
2823
+ loading = _ref.loading,
2824
+ handleLogin = _ref.handleLogin,
2825
+ setShipping = _ref.setShipping,
2826
+ userName = _ref.userName,
2827
+ setBillingAddress = _ref.setBillingAddress,
2828
+ setShippingAddress = _ref.setShippingAddress,
2829
+ setShippingMethod = _ref.setShippingMethod,
2830
+ deliveryOptions = _ref.deliveryOptions,
2831
+ countries = _ref.countries,
2832
+ setPaymentDetails = _ref.setPaymentDetails,
2833
+ paymentMethods = _ref.paymentMethods,
2834
+ cartData = _ref.cartData,
2835
+ vat = _ref.vat,
2836
+ shippingAddress = _ref.shippingAddress,
2837
+ billingAddress = _ref.billingAddress,
2838
+ selectedPaymentMethod = _ref.selectedPaymentMethod,
2839
+ userStores = _ref.userStores,
2840
+ userAddresses = _ref.userAddresses,
2841
+ showShipping = _ref.showShipping,
2842
+ clickRedirect = _ref.clickRedirect;
2843
+ return /*#__PURE__*/React$1__default.createElement(CheckoutPageContainer, {
2844
+ className: "checkout"
2845
+ }, /*#__PURE__*/React$1__default.createElement(CheckoutMain, null, /*#__PURE__*/React$1__default.createElement(CheckoutHeader, null, steps.map(function (item, i) {
2846
+ var words = item.text.split(' ');
2847
+ return /*#__PURE__*/React$1__default.createElement("div", {
2848
+ className: "row"
2849
+ }, /*#__PURE__*/React$1__default.createElement("span", {
2850
+ className: "icon",
2851
+ style: currStep > i ? {
2852
+ color: 'rgba(36, 153, 55, 1)'
2853
+ } : {}
2854
+ }, /*#__PURE__*/React$1__default.createElement(ai.AiOutlineCheckCircle, null)), ' ', /*#__PURE__*/React$1__default.createElement("p", null, words[0], " ", /*#__PURE__*/React$1__default.createElement("span", null, words[1])));
2855
+ })), /*#__PURE__*/React$1__default.createElement(material.Stepper, {
2856
+ activeStep: currStep,
2857
+ orientation: "vertical"
2858
+ }, steps.map(function (item, index) {
2859
+ return /*#__PURE__*/React$1__default.createElement(material.Step, {
2860
+ key: index
2861
+ }, /*#__PURE__*/React$1__default.createElement(material.StepLabel, {
2862
+ sx: {
2863
+ padding: 0
2864
+ },
2865
+ icon: /*#__PURE__*/React$1__default.createElement(CheckoutStepIcon, {
2866
+ style: currStep >= index ? {
2867
+ background: 'rgba(253, 0, 21, 1)',
2868
+ color: 'white',
2869
+ padding: 0
2870
+ } : {
2871
+ background: '#FDD6D0',
2872
+ color: 'inherit',
2873
+ padding: 0
2874
+ }
2875
+ }, /*#__PURE__*/React$1__default.createElement(ai.AiOutlineCheck, {
2876
+ className: "ic"
2877
+ }))
2878
+ }, currStep !== index && /*#__PURE__*/React$1__default.createElement(StepsHeaderComponent, {
2879
+ text: item.text,
2880
+ Icon: item.Icon,
2881
+ single: true,
2882
+ username: index === 0 ? userName : '',
2883
+ closed: true,
2884
+ handleClick: function handleClick() {
2885
+ if (currStep > index) {
2886
+ handleBack(index);
2887
+ }
2888
+ }
2889
+ })), index === 0 && /*#__PURE__*/React$1__default.createElement(material.StepContent, {
2890
+ sx: {
2891
+ padding: 0
2892
+ }
2893
+ }, /*#__PURE__*/React$1__default.createElement(Step0, {
2894
+ currStep: currStep,
2895
+ loading: loading,
2896
+ userName: userName,
2897
+ handleBack: handleBack,
2898
+ handleNext: handleNext,
2899
+ handleLogin: handleLogin
2900
+ })), index === 1 && /*#__PURE__*/React$1__default.createElement(material.StepContent, {
2901
+ sx: {
2902
+ padding: 0
2903
+ }
2904
+ }, /*#__PURE__*/React$1__default.createElement(Step1, {
2905
+ currstep: currStep,
2906
+ handleBack: handleBack,
2907
+ handleNext: handleNext,
2908
+ setShipping: setShipping,
2909
+ setBillingAddress: setBillingAddress,
2910
+ stores: userStores,
2911
+ addresses: userAddresses
2912
+ })), index === 2 && /*#__PURE__*/React$1__default.createElement(material.StepContent, {
2913
+ sx: {
2914
+ padding: 0
2915
+ }
2916
+ }, /*#__PURE__*/React$1__default.createElement(Step2, {
2917
+ currstep: currStep,
2918
+ handleBack: handleBack,
2919
+ handleNext: handleNext,
2920
+ options: deliveryOptions,
2921
+ countries: countries,
2922
+ setShipping: setShippingAddress,
2923
+ setShippingMethod: setShippingMethod,
2924
+ showShipping: showShipping
2925
+ })), index === 3 && /*#__PURE__*/React$1__default.createElement(material.StepContent, {
2926
+ sx: {
2927
+ padding: 0
2928
+ }
2929
+ }, /*#__PURE__*/React$1__default.createElement(Step3, {
2930
+ currstep: currStep,
2931
+ handleBack: handleBack,
2932
+ handleNext: handleNext,
2933
+ setPaymentDetails: setPaymentDetails,
2934
+ payments: paymentMethods
2935
+ })), index === 4 && /*#__PURE__*/React$1__default.createElement(material.StepContent, {
2936
+ sx: {
2937
+ padding: 0
2938
+ }
2939
+ }, /*#__PURE__*/React$1__default.createElement(Step4, {
2940
+ currstep: currStep,
2941
+ handleBack: handleBack,
2942
+ handleNext: handleNext,
2943
+ cartData: cartData,
2944
+ vat: vat,
2945
+ clickRedirect: clickRedirect
2946
+ })));
2947
+ }))), /*#__PURE__*/React$1__default.createElement(CheckoutSummary, {
2948
+ billingInformation: billingAddress,
2949
+ shippingInformation: shippingAddress,
2950
+ paymentMethod: selectedPaymentMethod,
2951
+ total: cartData === null || cartData === void 0 ? void 0 : cartData.totalCartPrice
2952
+ }));
2953
+ };
2954
+
1952
2955
  var Breakpoint = function Breakpoint() {};
1953
2956
 
1954
2957
  Breakpoint.xs = 'xs';
@@ -1985,14 +2988,14 @@ function debounce(func, wait, immediate) {
1985
2988
  function useWindowSize() {
1986
2989
  var isWindow = typeof window !== 'undefined';
1987
2990
 
1988
- var _useState = React.useState({
2991
+ var _useState = React$1.useState({
1989
2992
  width: isWindow ? window.innerWidth : 1200,
1990
2993
  height: isWindow ? window.innerHeight : 800
1991
2994
  }),
1992
2995
  windowSize = _useState[0],
1993
2996
  setWindowSize = _useState[1];
1994
2997
 
1995
- React.useEffect(function () {
2998
+ React$1.useEffect(function () {
1996
2999
  var onWindowResize = function onWindowResize() {
1997
3000
  setWindowSize({
1998
3001
  width: window.innerWidth,
@@ -2044,11 +3047,11 @@ var getBreakpoint = function getBreakpoint(_ref) {
2044
3047
  function useGridSize() {
2045
3048
  var windowSize = useWindowSize();
2046
3049
 
2047
- var _useState = React.useState(Breakpoint.md),
3050
+ var _useState = React$1.useState(Breakpoint.md),
2048
3051
  layout = _useState[0],
2049
3052
  setLayout = _useState[1];
2050
3053
 
2051
- React.useEffect(function () {
3054
+ React$1.useEffect(function () {
2052
3055
  setLayout(getBreakpoint(windowSize));
2053
3056
  }, [windowSize]);
2054
3057
  return layout;
@@ -2057,6 +3060,7 @@ function useGridSize() {
2057
3060
  exports.Breakpoint = Breakpoint;
2058
3061
  exports.CartDrawer = CartDrawer;
2059
3062
  exports.CartPageComponent = CartPageComponent;
3063
+ exports.CheckoutComponent = CheckoutComp;
2060
3064
  exports.Variant = Variant;
2061
3065
  exports.useGridSize = useGridSize;
2062
3066
  exports.useWindowSize = useWindowSize;