@salesgenterp/ui-components 0.4.530 → 0.4.531

package/dist/index.js

@@ -6234,7 +6234,7 @@ function useGridSize() {
   return layout;
 }
 
-var _templateObject$s, _templateObject2$k, _templateObject3$e, _templateObject4$b, _templateObject5$7, _templateObject6$5, _templateObject7$4, _templateObject8$3, _templateObject9$3;
+var _templateObject$s, _templateObject2$k, _templateObject3$e, _templateObject4$b, _templateObject5$7, _templateObject6$5, _templateObject7$4, _templateObject8$3, _templateObject9$3, _templateObject10$2;
 var CartPageSection = styled__default.section(_templateObject$s || (_templateObject$s = _taggedTemplateLiteralLoose(["\n  background: ", ";\n  max-width: 100%;\n  width: fit-content;\n  background: ", ";\n  overflow: hidden;\n  border-radius: 20px;\n  max-width: 1600px;\n  width: min(1600px, 100%);\n  margin: auto;\n  @media screen and (max-width: 1200px) {\n    padding: 0 1em;\n  }\n"])), function (props) {
   return props.bg;
 }, function (props) {
@@ -6274,12 +6274,13 @@ var CartTableContainer = styled__default(material.TableContainer)(_templateObjec
 }, function (props) {
   return props.color;
 });
-var CartButtonsRow = styled__default.div(_templateObject8$3 || (_templateObject8$3 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  align-items: center;\n  padding-right: 1.85em;\n  button {\n    background: ", ";\n    color: ", ";\n    padding: 0.5em 1em;\n    margin-left: 1em;\n    font-size: 0.85em;\n    text-transform: uppercase;\n    border: none;\n    cursor: pointer;\n    transition: 0.4s;\n    &:hover {\n      transform: scale(0.9);\n    }\n  }\n"])), function (props) {
+var CartButtonsRow = styled__default.div(_templateObject8$3 || (_templateObject8$3 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  justify-content: start;\n  align-items: center;\n  padding-right: 1.85em;\n  button {\n    background: ", ";\n    color: ", ";\n    padding: 0.5em 1em;\n    margin-left: 1em;\n    font-size: 0.85em;\n    text-transform: uppercase;\n    border: none;\n    cursor: pointer;\n    transition: 0.4s;\n    &:hover {\n      transform: scale(0.9);\n    }\n  }\n"])), function (props) {
   return props.bg || 'rgba(107, 106, 106, 1)';
 }, function (props) {
   return props.color || 'white';
 });
-var CartPageBox = styled__default.div(_templateObject9$3 || (_templateObject9$3 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  max-width: 100%;\n  margin-right: 1rem;\n  min-height: 30em;\n  position: relative;\n  @media only screen and (max-width: 768px) {\n    margin-right: 0;\n    .CartnoBelowSm {\n      display: none;\n    }\n  }\n"])));
+var PaginationRow = styled__default.div(_templateObject9$3 || (_templateObject9$3 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  align-items: center;\n  padding: 1em 0;\n  gap: 1em;\n  flex-wrap: wrap;\n  .MuiPagination-root {\n    .MuiPagination-ul {\n      flex-wrap: wrap;\n    }\n  }\n  @media screen and (max-width: 768px) {\n    justify-content: center;\n    padding: 1em 0.5em;\n  }\n"])));
+var CartPageBox = styled__default.div(_templateObject10$2 || (_templateObject10$2 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  max-width: 100%;\n  margin-right: 1rem;\n  min-height: 30em;\n  position: relative;\n  @media only screen and (max-width: 768px) {\n    margin-right: 0;\n    .CartnoBelowSm {\n      display: none;\n    }\n  }\n"])));
 
 function createCommonjsModule(fn, module) {
 	return module = { exports: {} }, fn(module, module.exports), module.exports;
@@ -7609,6 +7610,8 @@ var CardRow = function CardRow(_ref) {
   }))));
 };
 
+var DEFAULT_PAGE_SIZE = 50;
+var PAGE_SIZE_OPTIONS = [50, 100, 300, 500];
 var headCells = function headCells(_ref) {
   var doNotShowPrice = _ref.doNotShowPrice;
   return [{
@@ -7724,7 +7727,7 @@ EnhancedTableHead.propTypes = {
   rowCount: propTypes.number.isRequired
 };
 function EnhancedTable(_ref2) {
-  var _cartData$cartLineIte, _styles$Btn, _styles$scroll, _styles$scroll2, _sortBy, _styles$Btn2, _styles$Btn3;
+  var _cartData$cartLineIte, _styles$Btn, _styles$scroll, _styles$scroll2, _styles$Btn2, _styles$Btn3, _styles$Btn4, _styles$Btn5, _styles$Btn6, _styles$Btn7, _styles$Btn8, _styles$Btn9, _styles$Btn10;
   var cartData = _ref2.cartData,
     loading = _ref2.loading,
     imgnotfoundUrl = _ref2.imgnotfoundUrl,
@@ -7753,27 +7756,23 @@ function EnhancedTable(_ref2) {
   var _React$useState4 = React.useState(cartList),
     cartArray = _React$useState4[0],
     setCartArray = _React$useState4[1];
-  var Sort = function Sort() {
-    var newArray = cartArray || [];
-    var li = orderBy;
-    if (order === 'asc') {
-      newArray.sort(function (a, b) {
-        return a[li] - b[li];
+  var _React$useState5 = React.useState(1),
+    page = _React$useState5[0],
+    setPage = _React$useState5[1];
+  var _React$useState6 = React.useState(DEFAULT_PAGE_SIZE),
+    rowsPerPage = _React$useState6[0],
+    setRowsPerPage = _React$useState6[1];
+  var NUMERIC_SORT_COLUMNS = ['quantity', 'standardPrice', 'subtotal'];
+  var handleRequestSort = function handleRequestSort(event, property) {
+    var isSameColumn = orderBy === property;
+    if (isSameColumn) {
+      setOrder(function (prev) {
+        return prev === 'asc' ? 'desc' : 'asc';
       });
-      return setCartArray(newArray);
+    } else {
+      setOrderBy(property);
+      setOrder(NUMERIC_SORT_COLUMNS.includes(property) ? 'desc' : 'asc');
     }
-    newArray.sort(function (a, b) {
-      return b[li] - a[li];
-    });
-    return setCartArray(newArray);
-  };
-  React.useEffect(function () {
-    Sort();
-  }, [order, orderBy]);
-  var handleRequestSort = function handleRequestSort(event, property) {
-    var isAsc = orderBy === property && order === 'asc';
-    setOrder(isAsc ? 'desc' : 'asc');
-    setOrderBy(property);
   };
   var handleSelectAllClick = function handleSelectAllClick(event) {
     if ((selected === null || selected === void 0 ? void 0 : selected.length) < (cartArray === null || cartArray === void 0 ? void 0 : cartArray.length)) {
@@ -7799,6 +7798,38 @@ function EnhancedTable(_ref2) {
   React.useEffect(function () {
     setCartArray(cartList);
   }, [cartData]);
+  var getSortValue = function getSortValue(row, key) {
+    var _row$key;
+    if (key === 'subtotal') {
+      var _row$discountAmount, _row$quantity, _row$couponDiscount;
+      return ((row === null || row === void 0 ? void 0 : row.standardPrice) - ((_row$discountAmount = row === null || row === void 0 ? void 0 : row.discountAmount) != null ? _row$discountAmount : 0)) * ((_row$quantity = row === null || row === void 0 ? void 0 : row.quantity) != null ? _row$quantity : 0) - ((_row$couponDiscount = row === null || row === void 0 ? void 0 : row.couponDiscount) != null ? _row$couponDiscount : 0);
+    }
+    return (_row$key = row[key]) != null ? _row$key : 0;
+  };
+  var columnSortedArray = React.useMemo(function () {
+    var arr = [].concat(cartArray || []);
+    var key = orderBy;
+    if (order === 'asc') {
+      arr.sort(function (a, b) {
+        return getSortValue(a, key) - getSortValue(b, key);
+      });
+    } else {
+      arr.sort(function (a, b) {
+        return getSortValue(b, key) - getSortValue(a, key);
+      });
+    }
+    return arr;
+  }, [cartArray, order, orderBy]);
+  var sortedCartArray = lodash.sortBy(columnSortedArray, function (o) {
+    return !((o === null || o === void 0 ? void 0 : o.quantity) <= 0 || (o === null || o === void 0 ? void 0 : o.availableQuantity) <= 0 || (o === null || o === void 0 ? void 0 : o.quantity) > (o === null || o === void 0 ? void 0 : o.availableQuantity));
+  }) || [];
+  var totalPages = Math.max(1, Math.ceil(sortedCartArray.length / rowsPerPage));
+  var paginatedCartArray = sortedCartArray.slice((page - 1) * rowsPerPage, page * rowsPerPage);
+  React.useEffect(function () {
+    if (page > totalPages) {
+      setPage(1);
+    }
+  }, [totalPages, page]);
   return /*#__PURE__*/React.createElement(CartPageBox, null, loading && /*#__PURE__*/React.createElement(Loader$1, null, /*#__PURE__*/React.createElement(reactSpinners.BounceLoader, {
     size: 40,
     color: styles === null || styles === void 0 ? void 0 : (_styles$Btn = styles.Btn) === null || _styles$Btn === void 0 ? void 0 : _styles$Btn.background,
@@ -7806,8 +7837,7 @@ function EnhancedTable(_ref2) {
   })), /*#__PURE__*/React.createElement(Box, {
     sx: {
       width: '100%'
-    },
-    paddingBottom: "2em"
+    }
   }, /*#__PURE__*/React.createElement(CartTableContainer, {
     bg: styles === null || styles === void 0 ? void 0 : (_styles$scroll = styles.scroll) === null || _styles$scroll === void 0 ? void 0 : _styles$scroll.bg,
     color: styles === null || styles === void 0 ? void 0 : (_styles$scroll2 = styles.scroll) === null || _styles$scroll2 === void 0 ? void 0 : _styles$scroll2.color
@@ -7826,9 +7856,7 @@ function EnhancedTable(_ref2) {
     disabledSelectAllProductCheckbox: disabledSelectAllProductCheckbox,
     allowToProcessInvoiceForOutOfStockProductsEcommerce: allowToProcessInvoiceForOutOfStockProductsEcommerce,
     doNotShowPrice: doNotShowPrice
-  }), /*#__PURE__*/React.createElement(TableBody, null, (_sortBy = lodash.sortBy(cartArray, function (o) {
-    return !((o === null || o === void 0 ? void 0 : o.quantity) <= 0 || (o === null || o === void 0 ? void 0 : o.availableQuantity) <= 0 || (o === null || o === void 0 ? void 0 : o.quantity) > (o === null || o === void 0 ? void 0 : o.availableQuantity));
-  })) === null || _sortBy === void 0 ? void 0 : _sortBy.map(function (row, index) {
+  }), /*#__PURE__*/React.createElement(TableBody, null, paginatedCartArray.map(function (row, index) {
     var isItemSelected = isSelected(row);
     return /*#__PURE__*/React.createElement(CardRow, {
       row: row,
@@ -7843,7 +7871,14 @@ function EnhancedTable(_ref2) {
       allowToProcessInvoiceForOutOfStockProductsEcommerce: allowToProcessInvoiceForOutOfStockProductsEcommerce,
       doNotShowPrice: doNotShowPrice
     });
-  }))))), (cartArray === null || cartArray === void 0 ? void 0 : cartArray.length) > 0 && /*#__PURE__*/React.createElement(CartButtonsRow, {
+  }))))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      flexWrap: 'wrap',
+      width: '100%'
+    }
+  }, (cartArray === null || cartArray === void 0 ? void 0 : cartArray.length) > 0 && /*#__PURE__*/React.createElement(CartButtonsRow, {
     bg: styles === null || styles === void 0 ? void 0 : (_styles$Btn2 = styles.Btn) === null || _styles$Btn2 === void 0 ? void 0 : _styles$Btn2.background,
     color: styles === null || styles === void 0 ? void 0 : (_styles$Btn3 = styles.Btn) === null || _styles$Btn3 === void 0 ? void 0 : _styles$Btn3.color
   }, /*#__PURE__*/React.createElement("button", {
@@ -7857,7 +7892,51 @@ function EnhancedTable(_ref2) {
       });
       setSelected([]);
     }
-  }, "remove selected")));
+  }, "remove selected")), sortedCartArray.length > 0 && /*#__PURE__*/React.createElement(PaginationRow, null, totalPages > 1 && /*#__PURE__*/React.createElement(material.Pagination, {
+    count: totalPages,
+    page: page,
+    onChange: function onChange(_, value) {
+      return setPage(value);
+    },
+    color: "primary",
+    sx: {
+      '& .MuiPaginationItem-root.Mui-selected': {
+        backgroundColor: styles === null || styles === void 0 ? void 0 : (_styles$Btn4 = styles.Btn) === null || _styles$Btn4 === void 0 ? void 0 : _styles$Btn4.background,
+        color: (styles === null || styles === void 0 ? void 0 : (_styles$Btn5 = styles.Btn) === null || _styles$Btn5 === void 0 ? void 0 : _styles$Btn5.color) || '#fff',
+        borderColor: styles === null || styles === void 0 ? void 0 : (_styles$Btn6 = styles.Btn) === null || _styles$Btn6 === void 0 ? void 0 : _styles$Btn6.background
+      },
+      '& .MuiPaginationItem-root.Mui-selected:hover': {
+        backgroundColor: (styles === null || styles === void 0 ? void 0 : (_styles$Btn7 = styles.Btn) === null || _styles$Btn7 === void 0 ? void 0 : _styles$Btn7.background) + '80',
+        color: (styles === null || styles === void 0 ? void 0 : (_styles$Btn8 = styles.Btn) === null || _styles$Btn8 === void 0 ? void 0 : _styles$Btn8.color) || '#fff',
+        borderColor: styles === null || styles === void 0 ? void 0 : (_styles$Btn9 = styles.Btn) === null || _styles$Btn9 === void 0 ? void 0 : _styles$Btn9.background
+      }
+    },
+    showFirstButton: true,
+    showLastButton: true
+  }), /*#__PURE__*/React.createElement(material.FormControl, {
+    size: "small",
+    sx: {
+      minWidth: 120
+    }
+  }, /*#__PURE__*/React.createElement(material.Select, {
+    value: rowsPerPage,
+    onChange: function onChange(e) {
+      setRowsPerPage(Number(e.target.value));
+      setPage(1);
+    },
+    sx: {
+      '& .MuiSelect-select': {
+        backgroundColor: '#ffffff',
+        borderRadius: '5px',
+        borderColor: (styles === null || styles === void 0 ? void 0 : (_styles$Btn10 = styles.Btn) === null || _styles$Btn10 === void 0 ? void 0 : _styles$Btn10.background) || '#d3d3d3'
+      }
+    }
+  }, PAGE_SIZE_OPTIONS.map(function (size) {
+    return /*#__PURE__*/React.createElement(material.MenuItem, {
+      key: size,
+      value: size
+    }, size, " per page");
+  }))))));
 }
 
 var _templateObject$u, _templateObject2$m, _templateObject3$g, _templateObject4$d, _templateObject5$9, _templateObject6$7, _templateObject7$5;
@@ -7989,8 +8068,10 @@ var CartPageProductCard = function CartPageProductCard(_ref) {
   }, /*#__PURE__*/React__default.createElement(ri.RiDeleteBin5Line, null)));
 };
 
+var DEFAULT_PAGE_SIZE$1 = 50;
+var PAGE_SIZE_OPTIONS$1 = [50, 100, 300, 500];
 var CartPageMainRetail = function CartPageMainRetail(_ref) {
-  var _styles$Btn, _sortBy;
+  var _styles$Btn, _styles$Btn2, _styles$Btn3, _styles$Btn4, _styles$Btn5, _styles$Btn6, _styles$Btn7, _styles$Btn8;
   var retail = _ref.retail,
     cartData = _ref.cartData,
     loading = _ref.loading,
@@ -8001,7 +8082,25 @@ var CartPageMainRetail = function CartPageMainRetail(_ref) {
     clickRedirect = _ref.clickRedirect,
     allowToProcessInvoiceForOutOfStockProductsEcommerce = _ref.allowToProcessInvoiceForOutOfStockProductsEcommerce,
     doNotShowPrice = _ref.doNotShowPrice;
+  var _useState = React.useState(1),
+    page = _useState[0],
+    setPage = _useState[1];
+  var _useState2 = React.useState(DEFAULT_PAGE_SIZE$1),
+    rowsPerPage = _useState2[0],
+    setRowsPerPage = _useState2[1];
+  var sortedCartArray = React.useMemo(function () {
+    return lodash.sortBy((cartData === null || cartData === void 0 ? void 0 : cartData.cartLineItemDtoList) || [], function (o) {
+      return !((o === null || o === void 0 ? void 0 : o.quantity) <= 0 || (o === null || o === void 0 ? void 0 : o.availableQuantity) <= 0 || (o === null || o === void 0 ? void 0 : o.quantity) > (o === null || o === void 0 ? void 0 : o.availableQuantity));
+    });
+  }, [cartData === null || cartData === void 0 ? void 0 : cartData.cartLineItemDtoList]);
+  var totalPages = Math.max(1, Math.ceil(sortedCartArray.length / rowsPerPage));
+  var paginatedCartArray = sortedCartArray.slice((page - 1) * rowsPerPage, page * rowsPerPage);
+  React__default.useEffect(function () {
+    if (page > totalPages) setPage(1);
+  }, [totalPages, page]);
   return /*#__PURE__*/React__default.createElement("div", {
+    className: ""
+  }, /*#__PURE__*/React__default.createElement("div", {
     className: "scrollDiv"
   }, /*#__PURE__*/React__default.createElement(CardsBox, {
     retail: retail
@@ -8009,10 +8108,9 @@ var CartPageMainRetail = function CartPageMainRetail(_ref) {
     size: 40,
     color: styles === null || styles === void 0 ? void 0 : (_styles$Btn = styles.Btn) === null || _styles$Btn === void 0 ? void 0 : _styles$Btn.background,
     loading: true
-  })), (_sortBy = lodash.sortBy(cartData === null || cartData === void 0 ? void 0 : cartData.cartLineItemDtoList, function (o) {
-    return !((o === null || o === void 0 ? void 0 : o.quantity) <= 0 || (o === null || o === void 0 ? void 0 : o.availableQuantity) <= 0 || (o === null || o === void 0 ? void 0 : o.quantity) > (o === null || o === void 0 ? void 0 : o.availableQuantity));
-  })) === null || _sortBy === void 0 ? void 0 : _sortBy.map(function (item) {
+  })), paginatedCartArray.map(function (item) {
     return /*#__PURE__*/React__default.createElement(CartPageProductCard, {
+      key: item === null || item === void 0 ? void 0 : item.productId,
       item: item,
       loading: loading,
       imgnotfoundUrl: imgnotfoundUrl,
@@ -8023,7 +8121,51 @@ var CartPageMainRetail = function CartPageMainRetail(_ref) {
       allowToProcessInvoiceForOutOfStockProductsEcommerce: allowToProcessInvoiceForOutOfStockProductsEcommerce,
       doNotShowPrice: doNotShowPrice
     });
-  })));
+  }))), sortedCartArray.length > 0 && /*#__PURE__*/React__default.createElement(PaginationRow, null, totalPages > 1 && /*#__PURE__*/React__default.createElement(material.Pagination, {
+    count: totalPages,
+    page: page,
+    onChange: function onChange(_, value) {
+      return setPage(value);
+    },
+    color: "primary",
+    sx: {
+      '& .MuiPaginationItem-root.Mui-selected': {
+        backgroundColor: styles === null || styles === void 0 ? void 0 : (_styles$Btn2 = styles.Btn) === null || _styles$Btn2 === void 0 ? void 0 : _styles$Btn2.background,
+        color: (styles === null || styles === void 0 ? void 0 : (_styles$Btn3 = styles.Btn) === null || _styles$Btn3 === void 0 ? void 0 : _styles$Btn3.color) || '#fff',
+        borderColor: styles === null || styles === void 0 ? void 0 : (_styles$Btn4 = styles.Btn) === null || _styles$Btn4 === void 0 ? void 0 : _styles$Btn4.background
+      },
+      '& .MuiPaginationItem-root.Mui-selected:hover': {
+        backgroundColor: (styles === null || styles === void 0 ? void 0 : (_styles$Btn5 = styles.Btn) === null || _styles$Btn5 === void 0 ? void 0 : _styles$Btn5.background) + '80',
+        color: (styles === null || styles === void 0 ? void 0 : (_styles$Btn6 = styles.Btn) === null || _styles$Btn6 === void 0 ? void 0 : _styles$Btn6.color) || '#fff',
+        borderColor: styles === null || styles === void 0 ? void 0 : (_styles$Btn7 = styles.Btn) === null || _styles$Btn7 === void 0 ? void 0 : _styles$Btn7.background
+      }
+    },
+    showFirstButton: true,
+    showLastButton: true
+  }), /*#__PURE__*/React__default.createElement(material.FormControl, {
+    size: "small",
+    sx: {
+      minWidth: 120
+    }
+  }, /*#__PURE__*/React__default.createElement(material.Select, {
+    value: rowsPerPage,
+    onChange: function onChange(e) {
+      setRowsPerPage(Number(e.target.value));
+      setPage(1);
+    },
+    sx: {
+      '& .MuiSelect-select': {
+        backgroundColor: '#ffffff',
+        borderRadius: '5px',
+        borderColor: (styles === null || styles === void 0 ? void 0 : (_styles$Btn8 = styles.Btn) === null || _styles$Btn8 === void 0 ? void 0 : _styles$Btn8.background) || '#d3d3d3'
+      }
+    }
+  }, PAGE_SIZE_OPTIONS$1.map(function (size) {
+    return /*#__PURE__*/React__default.createElement(material.MenuItem, {
+      key: size,
+      value: size
+    }, size, " per page");
+  })))));
 };
 
 var _templateObject$v, _templateObject2$n, _templateObject3$h, _templateObject4$e, _templateObject5$a, _templateObject6$8, _templateObject7$6, _templateObject8$4;
@@ -8665,7 +8807,7 @@ var CartDrawer = function CartDrawer(_ref) {
       width: '100%',
       boxSizing: 'border-box'
     }
-  }, (cartData === null || cartData === void 0 ? void 0 : (_cartData$cartLineIte = cartData.cartLineItemDtoList) === null || _cartData$cartLineIte === void 0 ? void 0 : _cartData$cartLineIte.length) > 0 ? /*#__PURE__*/React__default.createElement(CartDrawerProductContainer, {
+  }, loading || (cartData === null || cartData === void 0 ? void 0 : (_cartData$cartLineIte = cartData.cartLineItemDtoList) === null || _cartData$cartLineIte === void 0 ? void 0 : _cartData$cartLineIte.length) > 0 ? /*#__PURE__*/React__default.createElement(CartDrawerProductContainer, {
     opacity: loading ? '.4' : '1'
   }, loading && /*#__PURE__*/React__default.createElement(CartDrawerLoader, null, /*#__PURE__*/React__default.createElement(reactSpinners.PuffLoader, {
     color: "black"
@@ -11033,7 +11175,7 @@ var CheckoutSummary = function CheckoutSummary(_ref) {
   }, renderMoney(orderTotal === null || orderTotal === void 0 ? void 0 : orderTotal.adjustmentValue))));
 };
 
-var _templateObject$M, _templateObject2$x, _templateObject3$o, _templateObject4$j, _templateObject5$f, _templateObject6$d, _templateObject7$9, _templateObject8$7, _templateObject9$5, _templateObject10$2, _templateObject11$2, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16$1, _templateObject17$1, _templateObject18$1;
+var _templateObject$M, _templateObject2$x, _templateObject3$o, _templateObject4$j, _templateObject5$f, _templateObject6$d, _templateObject7$9, _templateObject8$7, _templateObject9$5, _templateObject10$3, _templateObject11$2, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16$1, _templateObject17$1, _templateObject18$1;
 var StepContainer = styled__default.div(_templateObject$M || (_templateObject$M = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  max-width: 60em;\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: 1200px) {\n  //   width: 80vw;\n  //   min-width: 0;\n  // }\n  @media screen and (max-width: 768px) {\n    // width: 96%;\n    margin-left: 1em;\n    padding: 0.8em;\n  }\n  @media screen and (max-width: 600px) {\n    // width: 94%;\n    margin-left: 1.2em;\n  }\n"])));
 var StepsContent = styled__default.div(_templateObject2$x || (_templateObject2$x = _taggedTemplateLiteralLoose(["\n  padding-left: 1.565em;\n  min-height: max-content;\n  .MuiOutlinedInput-root {\n    background: ", ";\n  }\n\n  p {\n    font-size: 0.75em;\n  }\n  .bold {\n    text-transform: uppercase;\n    word-spacing: 5px;\n    margin-top: 0.95em;\n    span {\n      font-weight: 600;\n      cursor: pointer;\n      font-size: 0.94rem;\n    }\n    .red {\n      color: ", ";\n    }\n  }\n  @media screen and (max-width: 768px) {\n    padding: 0;\n    width: 100%;\n  }\n"])), function (props) {
   return 'transparent' + '!important';
@@ -11105,7 +11247,7 @@ var CheckBoxRow = styled__default.div(_templateObject9$5 || (_templateObject9$5
 }, function (prop) {
   return prop.colorText || 'red';
 });
-var CreditCardFextField = styled__default.div(_templateObject10$2 || (_templateObject10$2 = _taggedTemplateLiteralLoose(["\n  label {\n    color: rgba(107, 106, 106, 0.6) !important;\n  }\n  .MuiOutlinedInput-root {\n    background: ", ";\n  }\n  .save-btn {\n    background: ", ";\n  }\n"])), function (prop) {
+var CreditCardFextField = styled__default.div(_templateObject10$3 || (_templateObject10$3 = _taggedTemplateLiteralLoose(["\n  label {\n    color: rgba(107, 106, 106, 0.6) !important;\n  }\n  .MuiOutlinedInput-root {\n    background: ", ";\n  }\n  .save-btn {\n    background: ", ";\n  }\n"])), function (prop) {
   return prop.bgInput + '!important' || '';
 }, function (prop) {
   return prop.btnBg + '!important' || '';