npm - @salesgenterp/ui-components - Versions diffs - 0.4.97 → 0.4.99 - Mend

@salesgenterp/ui-components 0.4.97 → 0.4.99

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

package/dist/index.js CHANGED Viewed

@@ -32,26 +32,21 @@ function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
         }
       }
     }
     return target;
   };
   return _extends.apply(this, arguments);
 }
 function _inheritsLoose(subClass, superClass) {
   subClass.prototype = Object.create(superClass.prototype);
   subClass.prototype.constructor = subClass;
   _setPrototypeOf(subClass, superClass);
 }
 function _setPrototypeOf(o, p) {
   _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
     o.__proto__ = p;
@@ -59,27 +54,25 @@ function _setPrototypeOf(o, p) {
   };
   return _setPrototypeOf(o, p);
 }
+function _objectDestructuringEmpty(obj) {
+  if (obj == null) throw new TypeError("Cannot destructure " + obj);
+}
 function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
   var target = {};
   var sourceKeys = Object.keys(source);
   var key, i;
   for (i = 0; i < sourceKeys.length; i++) {
     key = sourceKeys[i];
     if (excluded.indexOf(key) >= 0) continue;
     target[key] = source[key];
   }
   return target;
 }
 function _taggedTemplateLiteralLoose(strings, raw) {
   if (!raw) {
     raw = strings.slice(0);
   }
   strings.raw = raw;
   return strings;
 }
@@ -90,7 +83,7 @@ var CartDrawerContainer = styled.div(_templateObject || (_templateObject = _tagg
 }, function (props) {
   return props.fontFamily;
 });
-var CartDrawerBar = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  position: sticky;\n  box-sizing: border-box;\n  top: 0;\n  left: -1em;\n  padding: 1em;\n  height: 4.6rem;\n  font-size: 1.6rem;\n  background-color: white;\n  font-weight: bold;\n  padding-left: 1rem;\n  z-index: 2;\n  .icon {\n    cursor: pointer;\n    font-size: 22px;\n  }\n  @media only screen and (max-width: 640px) {\n    font-size: 1.2rem;\n    height: 4rem;\n  }\n"])));
+var CartDrawerBar = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  position: sticky;\n  box-sizing: border-box;\n  top: 0;\n  left: -1em;\n  padding: 1em;\n  height: 4.6rem;\n  font-size: 1.6rem;\n  background-color: white;\n  font-weight: bold;\n  padding-left: 1rem;\n  z-index: 2;\n  h2{\n    font-size: 1.5em;\n  }\n  .icon {\n    cursor: pointer;\n    font-size: 1em;\n  }\n  @media only screen and (max-width: 640px) {\n    font-size: 1rem;\n    height: 4rem;\n  }\n"])));
 var CartDrawerProductContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: max-content;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: flex-start;\n  position: relative;\n  /* height: 900px; */\n  padding: 1rem;\n  min-height: 74vh;\n  opacity: ", ";\n  @media only screen and (max-width: 748px) {\n    min-height: 75vh;\n  }\n  /* background-color: red; */\n"])), function (props) {
   return props.opacity;
 });
@@ -108,7 +101,7 @@ var CartDrawerEmptyCart = styled.div(_templateObject7 || (_templateObject7 = _ta
 });
 var _templateObject$1, _templateObject2$1, _templateObject3$1;
-var CartDrawerProduct = styled.div(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  height: 100px;\n  justify-content: space-around;\n  align-items: center;\n  overflow: hidden;\n  margin-bottom: 2rem;\n  img {\n    width: 20%;\n    max-height: 100%;\n    /* aspect-ratio: 1; */\n    object-fit: cover;\n  }\n  .middleSection {\n    width: 60%;\n    padding-left: 0.8rem;\n    height: 100%;\n    h6 {\n      font-size: 1.1rem;\n      font-weight: bold;\n      margin: 0;\n\n      span {\n        font-size: 0.8rem;\n        color: grey;\n        text-decoration: line-through;\n        margin-right: 0.5rem;\n      }\n    }\n    .name {\n      font-size: 0.9rem;\n      line-height: 1.2rem;\n      max-height: 2.45rem;\n      width: 100%;\n      word-wrap: break-word;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      transition: 0.3s;\n      cursor: pointer;\n      &:hover {\n        color: ", ";\n      }\n    }\n  }\n  .endSection {\n    width: 20%;\n    height: 100%;\n    .icon {\n      cursor: pointer;\n      transition: 0.4s;\n      &:hover {\n        color: red;\n        /* opacity: 0.7; */\n      }\n    }\n  }\n  @media only screen and (max-width: 340px) {\n    height: 80px;\n    .middleSection {\n      h6 {\n        font-size: 0.9rem;\n      }\n      .name {\n        font-size: 0.7rem;\n        height: 1.45rem;\n      }\n    }\n  }\n"])), function (props) {
+var CartDrawerProduct = styled.div(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  height: 100px;\n  justify-content: space-around;\n  align-items: center;\n  overflow: hidden;\n  margin-bottom: 2rem;\n\n  img {\n    width: 20%;\n    max-height: 100%;\n    /* aspect-ratio: 1; */\n    object-fit: cover;\n  }\n  .middleSection {\n    width: 60%;\n    padding-left: 0.8rem;\n    height: 95%;\n    h6 {\n      font-size: 1.1rem;\n      font-weight: bold;\n      margin: 0;\n\n      span {\n        font-size: 0.8rem;\n        color: grey;\n        text-decoration: line-through;\n        margin-right: 0.5rem;\n      }\n    }\n    .name {\n      font-size: 0.9rem;\n      line-height: 1.2rem;\n      max-height: 2.45rem;\n      width: 100%;\n      word-wrap: break-word;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      transition: 0.3s;\n      cursor: pointer;\n      &:hover {\n        color: ", ";\n      }\n    }\n  }\n  .endSection {\n    width: 20%;\n    height: 95%;\n    .icon {\n      cursor: pointer;\n      transition: 0.4s;\n      &:hover {\n        color: red;\n        /* opacity: 0.7; */\n      }\n    }\n  }\n  @media only screen and (max-width: 768px) {\n    .closeIcon {\n      font-size: 1rem;\n    }\n    height: 80px;\n    .middleSection {\n      .name {\n        max-height: 2.4rem;\n        height: 2.4rem;\n      }\n    }\n  }\n  @media only screen and (max-width: 340px) {\n    height: 80px;\n    .middleSection {\n      h6 {\n        font-size: 0.9rem;\n      }\n      .name {\n        font-size: 0.7rem;\n        height: 1.45rem;\n      }\n    }\n  }\n"])), function (props) {
   return props.color || 'grey';
 });
 var CartDrawerQtBox = styled.div(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteralLoose(["\n  height: 34px;\n  width: 82px;\n  border: 1px solid rgb(211, 210, 210);\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  font-size: 13.5px;\n  color: #333;\n  padding: 0 0.5rem;\n  border-radius: 5px;\n  max-width: 100%;\n\n  span {\n    cursor: pointer;\n    height: 100%;\n    display: grid;\n    place-items: center;\n  }\n  .qt {\n    font-size: 12px;\n    color: black;\n    font-weight: 500;\n    cursor: auto;\n  }\n  @media only screen and (max-width: 640px) {\n    min-width: 55px;\n    aspect-ratio: 1/2;\n    /* min-height: 28px; */\n    font-size: 10px;\n  }\n  @media only screen and (max-width: 340px) {\n    min-width: 50px;\n    aspect-ratio: 1/2;\n    height: 22px;\n    font-size: 8px;\n  }\n"])));
@@ -116,14 +109,13 @@ var CartDrawerLoader = styled.div(_templateObject3$1 || (_templateObject3$1 = _t
 var CartDrawerProductCard = function CartDrawerProductCard(_ref) {
   var _product$cartStandard, _product$standardPric;
   var product = _ref.product,
-      color = _ref.color,
-      handleIncrementDecrement = _ref.handleIncrementDecrement,
-      handleRemoveProduct = _ref.handleRemoveProduct,
-      handleRedirect = _ref.handleRedirect,
-      imgnotfoundUrl = _ref.imgnotfoundUrl,
-      loading = _ref.loading;
+    color = _ref.color,
+    handleIncrementDecrement = _ref.handleIncrementDecrement,
+    handleRemoveProduct = _ref.handleRemoveProduct,
+    handleRedirect = _ref.handleRedirect,
+    imgnotfoundUrl = _ref.imgnotfoundUrl,
+    loading = _ref.loading;
   var imgnotfoundUrlcommon = '/images/imgnotfound.jpeg';
   if (imgnotfoundUrl && imgnotfoundUrl !== 'null') imgnotfoundUrlcommon = imgnotfoundUrl;
   return /*#__PURE__*/React__default.createElement(CartDrawerProduct, {
@@ -154,6 +146,8 @@ var CartDrawerProductCard = function CartDrawerProductCard(_ref) {
     className: "icon",
     onClick: function onClick() {
       if (loading) return;
+      var sure = confirm('Are you sure you want to remove this item from cart');
+      if (!sure) return;
       handleRemoveProduct(product);
     }
   }), /*#__PURE__*/React__default.createElement(CartDrawerQtBox, null, /*#__PURE__*/React__default.createElement("span", {
@@ -173,16 +167,15 @@ var CartDrawerProductCard = function CartDrawerProductCard(_ref) {
 var CartDrawer = function CartDrawer(_ref) {
   var _cartData$cartLineIte, _cartData$totalCartPr;
   var cartData = _ref.cartData,
-      maxWidth = _ref.maxWidth,
-      color = _ref.color,
-      handleRedirect = _ref.handleRedirect,
-      handleIncrementDecrement = _ref.handleIncrementDecrement,
-      handleRemoveProduct = _ref.handleRemoveProduct,
-      handleClose = _ref.handleClose,
-      loading = _ref.loading,
-      imgnotfoundUrl = _ref.imgnotfoundUrl;
+    maxWidth = _ref.maxWidth,
+    color = _ref.color,
+    handleRedirect = _ref.handleRedirect,
+    handleIncrementDecrement = _ref.handleIncrementDecrement,
+    handleRemoveProduct = _ref.handleRemoveProduct,
+    handleClose = _ref.handleClose,
+    loading = _ref.loading,
+    imgnotfoundUrl = _ref.imgnotfoundUrl;
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(CartDrawerContainer, {
     maxWidth: maxWidth
   }, /*#__PURE__*/React__default.createElement(CartDrawerBar, null, /*#__PURE__*/React__default.createElement("h2", null, "Your Cart"), /*#__PURE__*/React__default.createElement(gr.GrClose, {
@@ -253,6 +246,7 @@ var CardsBox = styled.div(_templateObject3$2 || (_templateObject3$2 = _taggedTem
 });
 var CartHeading = styled.div(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  /* margin-bottom: 2em; */\n  margin-left: 2.3em;\n  margin-top: 2em;\n\n  h1 {\n    font-weight: 600;\n    font-size: 2.0375em;\n    text-transform: capitalize;\n    color: inherit;\n    /* margin-bottom: 1em; */\n  }\n  p {\n    font-size: 0.875em;\n    color: black;\n    margin-top: 0.5em;\n  }\n"])));
 var Loader = styled.div(_templateObject5$1 || (_templateObject5$1 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 40%;\n  left: 47%;\n  display: grid;\n  place-items: center;\n  z-index: 3;\n"])));
 var CartTableCell = styled(material.TableCell)(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteralLoose(["\n  && {\n    padding-bottom: 1em !important;\n    border: none !important;\n    /* font-size: 0.75em; */\n    font-size: 1em;\n    color: rgba(98, 95, 95, 1);\n    background: ", ";\n    font-family: 'karla-fonts';\n  }\n  span {\n    font-size: 0.75em;\n    font-weight: 600;\n  }\n"])), function (props) {
   return "" + props.bg;
 });
@@ -1386,19 +1380,17 @@ var CartTableRow = styled(material.TableRow)(_templateObject3$3 || (_templateObj
 var CartTableCell$1 = styled(material.TableCell)(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteralLoose(["\n  && {\n    border: none !important;\n    font-family: 'karla-fonts';\n    font-size: 1em;\n  }\n"])));
 var QuantityBox = styled.div(_templateObject5$2 || (_templateObject5$2 = _taggedTemplateLiteralLoose(["\n  height: 1.7em;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  div {\n    /* width:30px; */\n    min-height: 100%;\n    aspect-ratio: 1.15/1;\n    display: grid;\n    place-items: center;\n    font-size: 0.65em;\n    color: white;\n    background-color: #323232;\n    cursor: pointer;\n  }\n  .price {\n    background: transparent;\n    cursor: auto;\n    background: #ffffff;\n    border: 1px solid #ebebeb;\n    p {\n      color: #5e5c5c;\n      font-size: 0.685em;\n      font-weight: 500;\n    }\n  }\n  .add {\n    background-color: #ebebeb;\n    color: #323232;\n  }\n"])));
 var DeleteBtn = styled.div(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteralLoose(["\n  display: grid;\n  place-items: center;\n  cursor: pointer;\n  border-radius: 50%;\n  width: 20px;\n  height: 20px;\n  background: #eef1f4;\n  color: #393f48;\n  font-size: 0.75em;\n  transition: 0.4s;\n  &:hover {\n    background: red;\n    color: white;\n  }\n"])));
 var CardRow = function CardRow(_ref) {
   var _styles$price, _styles$Btn, _styles$name, _styles$name2, _row$standardPrice, _row$subtotal;
   var row = _ref.row,
-      isItemSelected = _ref.isItemSelected,
-      handleClick = _ref.handleClick,
-      imgnotfoundUrl = _ref.imgnotfoundUrl,
-      handleIncrementDecrement = _ref.handleIncrementDecrement,
-      handleRemoveProduct = _ref.handleRemoveProduct,
-      loading = _ref.loading,
-      imgSize = _ref.imgSize,
-      styles = _ref.styles;
+    isItemSelected = _ref.isItemSelected,
+    handleClick = _ref.handleClick,
+    imgnotfoundUrl = _ref.imgnotfoundUrl,
+    handleIncrementDecrement = _ref.handleIncrementDecrement,
+    handleRemoveProduct = _ref.handleRemoveProduct,
+    loading = _ref.loading,
+    imgSize = _ref.imgSize,
+    styles = _ref.styles;
   var imgnotfoundUrlcommon = '/images/imgnotfound.jpeg';
   if (imgnotfoundUrl && imgnotfoundUrl !== 'null') imgnotfoundUrlcommon = imgnotfoundUrl;
   return /*#__PURE__*/React__default.createElement(CartTableRow, {
@@ -1535,19 +1527,17 @@ var headCells = [{
 function EnhancedTableHead(props) {
   var onSelectAllClick = props.onSelectAllClick,
-      order = props.order,
-      orderBy = props.orderBy,
-      numSelected = props.numSelected,
-      rowCount = props.rowCount,
-      onRequestSort = props.onRequestSort,
-      styles = props.styles;
+    order = props.order,
+    orderBy = props.orderBy,
+    numSelected = props.numSelected,
+    rowCount = props.rowCount,
+    onRequestSort = props.onRequestSort,
+    styles = props.styles;
   var createSortHandler = function createSortHandler(property) {
     return function (event) {
       onRequestSort(event, property);
     };
   };
   return /*#__PURE__*/React.createElement(TableHead, {
     className: "CartnoBelowSm"
   }, /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(CartTableCell, {
@@ -1584,7 +1574,6 @@ function EnhancedTableHead(props) {
     }, headCell.label) : /*#__PURE__*/React.createElement("span", null, headCell.label));
   })));
 }
 EnhancedTableHead.propTypes = {
   numSelected: propTypes.number.isRequired,
   onRequestSort: propTypes.func.isRequired,
@@ -1593,55 +1582,48 @@ EnhancedTableHead.propTypes = {
   orderBy: propTypes.string.isRequired,
   rowCount: propTypes.number.isRequired
 };
 function EnhancedTable(_ref) {
   var _styles$scroll, _styles$scroll2;
   var cartData = _ref.cartData,
-      loading = _ref.loading,
-      imgnotfoundUrl = _ref.imgnotfoundUrl,
-      handleIncrementDecrement = _ref.handleIncrementDecrement,
-      handleRemoveProduct = _ref.handleRemoveProduct,
-      handleRemoveAll = _ref.handleRemoveAll,
-      styles = _ref.styles;
+    loading = _ref.loading,
+    imgnotfoundUrl = _ref.imgnotfoundUrl,
+    handleIncrementDecrement = _ref.handleIncrementDecrement,
+    handleRemoveProduct = _ref.handleRemoveProduct,
+    handleRemoveAll = _ref.handleRemoveAll,
+    styles = _ref.styles;
   var cartList = cartData === null || cartData === void 0 ? void 0 : cartData.cartLineItemDtoList.map(function (li) {
     return _extends({}, li, {
       subtotal: li.standardPrice * li.quantity
     });
   });
   var _React$useState = React.useState('asc'),
-      order = _React$useState[0],
-      setOrder = _React$useState[1];
+    order = _React$useState[0],
+    setOrder = _React$useState[1];
   var _React$useState2 = React.useState('calories'),
-      orderBy = _React$useState2[0],
-      setOrderBy = _React$useState2[1];
+    orderBy = _React$useState2[0],
+    setOrderBy = _React$useState2[1];
   var _React$useState3 = React.useState([]),
-      selected = _React$useState3[0],
-      setSelected = _React$useState3[1];
+    selected = _React$useState3[0],
+    setSelected = _React$useState3[1];
   var _React$useState4 = React.useState(cartList),
-      cartArray = _React$useState4[0],
-      setCartArray = _React$useState4[1];
+    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];
       });
       return setCartArray(newArray);
     }
     newArray.sort(function (a, b) {
       return b[li] - a[li];
     });
     return setCartArray(newArray);
   };
   React.useEffect(function () {
     Sort();
   }, [order, orderBy]);
@@ -1661,13 +1643,10 @@ function EnhancedTable(_ref) {
       setSelected(newSelected);
       return;
     }
     setSelected([]);
   };
   var handleClick = function handleClick(event, product) {
     var includes = selected.includes(product);
     if (includes) {
       var removedId = selected.filter(function (item) {
         return item.productId !== (product === null || product === void 0 ? void 0 : product.productId);
@@ -1680,11 +1659,9 @@ function EnhancedTable(_ref) {
       setSelected([].concat(selected, [product]));
     }
   };
   var isSelected = function isSelected(name) {
     return selected.includes(name);
   };
   React.useEffect(function () {
     setCartArray(cartList);
   }, [cartData]);
@@ -1739,6 +1716,7 @@ function EnhancedTable(_ref) {
 }
 var _templateObject$4, _templateObject2$4, _templateObject3$4, _templateObject4$3, _templateObject5$3, _templateObject6$3, _templateObject7$2;
 var CartPageCard = styled.div(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteralLoose(["\n  width: min(97%, 485px);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  padding: 1em;\n  background: #ffffff;\n  box-shadow: 0px 20px 35px rgba(0, 0, 0, 0.05);\n  border-radius: 20px;\n  position: relative;\n"])));
 var CartPageImg = styled.img(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteralLoose(["\n  /* width: 95px; */\n  width: ", ";\n  height: ", ";\n  position: relative;\n  margin-right: 1em;\n"])), function (props) {
   return props.width || 'auto';
@@ -1753,13 +1731,12 @@ var CloseBtn = styled.div(_templateObject7$2 || (_templateObject7$2 = _taggedTem
 var CartPageProductCard = function CartPageProductCard(_ref) {
   var _item$standardPrice;
   var item = _ref.item,
-      imgnotfoundUrl = _ref.imgnotfoundUrl,
-      handleIncrementDecrement = _ref.handleIncrementDecrement,
-      handleRemoveProduct = _ref.handleRemoveProduct,
-      loading = _ref.loading,
-      imgSize = _ref.imgSize;
+    imgnotfoundUrl = _ref.imgnotfoundUrl,
+    handleIncrementDecrement = _ref.handleIncrementDecrement,
+    handleRemoveProduct = _ref.handleRemoveProduct,
+    loading = _ref.loading,
+    imgSize = _ref.imgSize;
   var imgnotfoundUrlcommon = '/images/imgnotfound.jpeg';
   if (imgnotfoundUrl && imgnotfoundUrl !== 'null') imgnotfoundUrlcommon = imgnotfoundUrl;
   return /*#__PURE__*/React__default.createElement(CartPageCard, null, /*#__PURE__*/React__default.createElement(CartPageImg, {
@@ -1797,14 +1774,13 @@ var CartPageProductCard = function CartPageProductCard(_ref) {
 var CartPageMainRetail = function CartPageMainRetail(_ref) {
   var _cartData$cartLineIte;
   var retail = _ref.retail,
-      cartData = _ref.cartData,
-      loading = _ref.loading,
-      imgnotfoundUrl = _ref.imgnotfoundUrl,
-      handleIncrementDecrement = _ref.handleIncrementDecrement,
-      handleRemoveProduct = _ref.handleRemoveProduct,
-      styles = _ref.styles;
+    cartData = _ref.cartData,
+    loading = _ref.loading,
+    imgnotfoundUrl = _ref.imgnotfoundUrl,
+    handleIncrementDecrement = _ref.handleIncrementDecrement,
+    handleRemoveProduct = _ref.handleRemoveProduct,
+    styles = _ref.styles;
   return /*#__PURE__*/React__default.createElement("div", {
     className: "scrollDiv"
   }, /*#__PURE__*/React__default.createElement(CardsBox, {
@@ -1826,7 +1802,7 @@ var CartPageMainRetail = function CartPageMainRetail(_ref) {
 };
 var _templateObject$5, _templateObject2$5, _templateObject3$5, _templateObject4$4, _templateObject5$4, _templateObject6$4;
-var CartSummaryContainer = styled.div(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n  width: 26.375em;\n  max-width: ", ";\n  display: flex;\n  flex-direction: column;\n  background: ", ";\n  color: ", ";\n  border-radius: 28px;\n  padding: 2em 1em;\n  align-items: center;\n  /* margin-top: 3em; */\n  p {\n    font-size: 1.189em;\n    font-weight: 600;\n    align-self: flex-start;\n    color: inherit;\n    margin: 0;\n    padding: 0;\n  }\n  .continueShopping {\n    font-size: 0.75em;\n    color: inherit;\n    text-transform: capitalize;\n    height: 20px;\n    border-bottom: 1px solid;\n    border-color: ", ";\n    font-weight: 300;\n    cursor: pointer;\n  }\n"])), function (props) {
+var CartSummaryContainer = styled.div(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n  width: 26.375em;\n  max-width: ", ";\n  display: flex;\n  flex-direction: column;\n  background: ", ";\n  color: ", ";\n  border-radius: 20px;\n  padding: 2em 3em;\n  align-items: center;\n  /* margin-top: 3em; */\n  p {\n    font-size: 1.189em;\n    font-weight: 600;\n    align-self: flex-start;\n    color: inherit;\n    margin: 0;\n    padding: 0;\n  }\n  .continueShopping {\n    font-size: 0.75em;\n    color: inherit;\n    text-transform: capitalize;\n    height: 20px;\n    border-bottom: 1px solid;\n    border-color: ", ";\n    font-weight: 300;\n    cursor: pointer;\n  }\n"])), function (props) {
   return props.maxWidth || '26.375em';
 }, function (props) {
   return props.background || '#667080';
@@ -1843,12 +1819,10 @@ var CartSummaryRow = styled.div(_templateObject2$5 || (_templateObject2$5 = _tag
 var CartSummaryHr = styled.span(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteralLoose(["\n  border: none;\n  width: 100%;\n  height: 1px;\n  background-color: ", ";\n  margin: 1.2em 0;\n"])), function (props) {
   return props.color || 'rgba(255, 255, 255, 0.5)';
 });
-var CartSummaryInputBox = styled.form(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  padding-bottom: ", ";\n\n  input {\n    width: 10.81rem;\n    height: 2.44rem;\n    padding: 0.2rem 0.8rem;\n    text-transform: capitalize;\n    font-size: 0.89rem;\n    border-radius: ", ";\n    margin-right: ", ";\n    border: none;\n    outline: none;\n    background: ", ";\n    color: ", ";\n    &::placeholder {\n      color: ", ";\n    }\n  }\n  button {\n    width: 7.75rem;\n    height: 2.44rem;\n    background: ", ";\n    border-radius: ", ";\n    display: grid;\n    color: ", ";\n    place-items: center;\n    border: none;\n    outline: none;\n    text-transform: uppercase;\n    font-family: 'karla-fonts';\n    cursor: pointer;\n    font-size: 0.75em;\n    transition: 0.3s;\n    &:hover {\n      letter-spacing: 1px;\n    }\n  }\n"])), function (props) {
+var CartSummaryInputBox = styled.form(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  padding-bottom: ", ";\n  background-color: transparent;\n  width: 90%;\n\n  input {\n    width: 10.81rem;\n    width: 62%;\n    height: 2.44rem;\n    padding: 0.2rem 0.8rem;\n\n    text-transform: capitalize;\n    font-size: 0.89rem;\n    border-radius: ", ";\n    margin-right: 0.1em;\n\n    border: none;\n    outline: none;\n    background: ", ";\n    color: ", ";\n    &::placeholder {\n      color: ", ";\n    }\n  }\n  button {\n    width: 7.75rem;\n    width: 38%;\n    height: 2.44rem;\n    background: ", ";\n    border-radius: ", ";\n    display: grid;\n    color: ", ";\n    place-items: center;\n    border: none;\n    outline: none;\n    text-transform: uppercase;\n    font-family: 'karla-fonts';\n    cursor: pointer;\n    font-size: 0.75em;\n    transition: 0.3s;\n    &:hover {\n      letter-spacing: 1px;\n    }\n  }\n"])), function (props) {
   return props.paddingBottom ? '2em' : '0';
 }, function (props) {
   return props.retail ? '1.19rem' : '0';
-}, function (props) {
-  return props.retail ? '1rem' : '0';
 }, function (props) {
   return props.background || '#bfc3ca';
 }, function (props) {
@@ -1862,7 +1836,7 @@ var CartSummaryInputBox = styled.form(_templateObject4$4 || (_templateObject4$4
 }, function (props) {
   return props.Btncolor || 'inherit';
 });
-var CartSummaryCheckoutBtn = styled.button(_templateObject5$4 || (_templateObject5$4 = _taggedTemplateLiteralLoose(["\n  font-size: 0.95em;\n  font-weight: 700;\n  background: ", ";\n  color: ", ";\n  cursor: pointer;\n  text-transform: uppercase;\n  border: none;\n  outline: none;\n  width: 16.81em;\n  height: 3.4em;\n  display: grid;\n  place-items: center;\n  font-size: 0.75em;\n  border-radius: ", ";\n  padding: 0;\n  font-family: 'karla-fonts';\n  font-size: 0.94em;\n  margin: 1em auto;\n  transition: 0.3s;\n  margin-top: 2em;\n  &:hover {\n    opacity: 0.8;\n  }\n"])), function (props) {
+var CartSummaryCheckoutBtn = styled.button(_templateObject5$4 || (_templateObject5$4 = _taggedTemplateLiteralLoose(["\n  font-size: 0.95em;\n  font-weight: 700;\n  background: ", ";\n  color: ", ";\n  cursor: pointer;\n  text-transform: uppercase;\n  border: none;\n  outline: none;\n  width: 16.81em;\n  height: 3.4em;\n  display: grid;\n  place-items: center;\n  font-size: 0.75em;\n  border-radius: ", ";\n  padding: 0;\n  font-family: 'karla-fonts';\n  font-size: 0.94em;\n  margin: 1em auto;\n  transition: 0.3s;\n  margin-top: 3em;\n  &:hover {\n    opacity: 0.8;\n  }\n"])), function (props) {
   return props.background || '#393f48';
 }, function (props) {
   return props.color || 'inherit';
@@ -1877,19 +1851,18 @@ var CartSummaryCheckBoxRow = styled(CartSummaryRow)(_templateObject6$4 || (_temp
 var CartSummary = function CartSummary(_ref) {
   var _cartSummary$input, _cartSummary$input2, _ref2;
   var _ref$retail = _ref.retail,
-      retail = _ref$retail === void 0 ? true : _ref$retail,
-      shippingData = _ref.shippingData,
-      selectedShipping = _ref.selectedShipping,
-      setShipping = _ref.setShipping,
-      clickRedirect = _ref.clickRedirect,
-      subtotal = _ref.subtotal,
-      styles = _ref.styles,
-      totalCartPrice = _ref.totalCartPrice,
-      loading = _ref.loading;
+    retail = _ref$retail === void 0 ? true : _ref$retail,
+    shippingData = _ref.shippingData,
+    selectedShipping = _ref.selectedShipping,
+    setShipping = _ref.setShipping,
+    clickRedirect = _ref.clickRedirect,
+    subtotal = _ref.subtotal,
+    styles = _ref.styles,
+    totalCartPrice = _ref.totalCartPrice,
+    loading = _ref.loading;
   var cartSummary = styles.cartSummary,
-      Btn = styles.Btn;
+    Btn = styles.Btn;
   return /*#__PURE__*/React__default.createElement(CartSummaryContainer, {
     background: cartSummary.bg,
     color: cartSummary.color
@@ -1909,7 +1882,6 @@ var CartSummary = function CartSummary(_ref) {
     justify: "flex-start"
   }, /*#__PURE__*/React__default.createElement("h6", null, "shipping")), shippingData && shippingData.map(function (li, i) {
     var _li$amount;
     return /*#__PURE__*/React__default.createElement(CartSummaryCheckBoxRow, {
       key: i,
       selected: li.id === selectedShipping.id,
@@ -1962,21 +1934,21 @@ var CartSummary = function CartSummary(_ref) {
 var CartPageComponent = function CartPageComponent(_ref) {
   var retail = _ref.retail,
-      shippingData = _ref.shippingData,
-      selectedShipping = _ref.selectedShipping,
-      setShipping = _ref.setShipping,
-      clickRedirect = _ref.clickRedirect,
-      cartData = _ref.cartData,
-      handleIncrementDecrement = _ref.handleIncrementDecrement,
-      handleRemoveProduct = _ref.handleRemoveProduct,
-      handleRemoveAll = _ref.handleRemoveAll,
-      loading = _ref.loading,
-      imgnotfoundUrl = _ref.imgnotfoundUrl,
-      styles = _ref.styles;
+    shippingData = _ref.shippingData,
+    selectedShipping = _ref.selectedShipping,
+    setShipping = _ref.setShipping,
+    clickRedirect = _ref.clickRedirect,
+    cartData = _ref.cartData,
+    handleIncrementDecrement = _ref.handleIncrementDecrement,
+    handleRemoveProduct = _ref.handleRemoveProduct,
+    handleRemoveAll = _ref.handleRemoveAll,
+    loading = _ref.loading,
+    imgnotfoundUrl = _ref.imgnotfoundUrl,
+    styles = _ref.styles;
   return /*#__PURE__*/React__default.createElement(CartPageSection, {
     bg: styles.bg,
     retail: retail
-  }, /*#__PURE__*/React__default.createElement(CartHeading, null, /*#__PURE__*/React__default.createElement("h1", null, "Shopping Cart"), /*#__PURE__*/React__default.createElement("p", null, "You have 4 items in your cart")), /*#__PURE__*/React__default.createElement(CartPageContainer, {
+  }, /*#__PURE__*/React__default.createElement(CartHeading, null, /*#__PURE__*/React__default.createElement("h1", null, "Shopping Cart"), /*#__PURE__*/React__default.createElement("p", null, "You have ", cartData === null || cartData === void 0 ? void 0 : cartData.totalCartQuantity, " items in your cart")), /*#__PURE__*/React__default.createElement(CartPageContainer, {
     retail: retail,
     loading: loading
   }, retail ? /*#__PURE__*/React__default.createElement(CartPageMainRetail, {
@@ -2027,14 +1999,14 @@ var CheckoutSummaryContainer = styled.div(_templateObject$7 || (_templateObject$
   return props.bg || 'rgba(255, 240, 236, 1)';
 });
 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: 1.1em;\n    font-weight: 300;\n    text-transform: capitalize;\n  }\n  .total {\n    font-size: 1.65em;\n    font-weight: 800;\n  }\n"])));
-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    margin-bottom: 0.8em;\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  }\n  .blank {\n    padding-bottom: 2em;\n  }\n"])));
+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: 60%;\n  }\n  .bold {\n    font-weight: 700;\n    margin-bottom: 0.8em;\n    width: 90%;\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  }\n  .blank {\n    padding-bottom: 2em;\n  }\n"])));
 var CheckoutSummary = function CheckoutSummary(_ref) {
   var total = _ref.total,
-      billingInformation = _ref.billingInformation,
-      shippingInformation = _ref.shippingInformation,
-      paymentMethod = _ref.paymentMethod,
-      shippingMethod = _ref.shippingMethod;
+    billingInformation = _ref.billingInformation,
+    shippingInformation = _ref.shippingInformation,
+    paymentMethod = _ref.paymentMethod,
+    shippingMethod = _ref.shippingMethod;
   return /*#__PURE__*/React__default.createElement(CheckoutSummaryContainer, null, /*#__PURE__*/React__default.createElement(TextRow, null, /*#__PURE__*/React__default.createElement("p", {
     className: "text"
   }, "order total :"), /*#__PURE__*/React__default.createElement("h6", {
@@ -2101,7 +2073,7 @@ var ButtonRowContainer = styled.div(_templateObject8$1 || (_templateObject8$1 =
 }, function (props) {
   return props.disabledBack ? 'not-allowed' : 'pointer';
 });
-var CheckBoxRow = styled.div(_templateObject9$1 || (_templateObject9$1 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  cursor: pointer;\n  padding: ", ";\n  margin-left: ", ";\n  p {\n    font-size: 0.85em;\n  }\n  button {\n    border: none;\n    padding: 0.8em 3em;\n    background: rgba(253, 0, 21, 1);\n    color: white;\n    text-transform: uppercase;\n    font-weight: 600;\n    margin: 1em;\n    margin-top: 2em;\n    transition: 0.4s;\n    cursor: pointer;\n    font-family: 'karla-fonts';\n    min-width: max-content;\n    &:hover {\n      padding: 0.7em 2.7em;\n    }\n  }\n  .back {\n    background-color: rgba(107, 106, 106, 1);\n    padding: 0.8em 2em;\n    &:hover {\n      padding: 0.8em 2.4em;\n    }\n  }\n  .bold,\n  .red {\n    font-weight: 700;\n    font-size: 1.125em;\n  }\n  .red {\n    color: #fd0015;\n    margin-left: 0.5em;\n  }\n  @media only screen and (max-width: 640px) {\n    button {\n      &:hover {\n        padding: 0.8em 3em;\n      }\n    }\n\n    .back {\n      &:hover {\n        padding: 0.8em 2em;\n      }\n      margin-left: 0;\n    }\n  }\n"])), function (props) {
+var CheckBoxRow = styled.div(_templateObject9$1 || (_templateObject9$1 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  cursor: pointer;\n  padding: ", ";\n  margin-left: ", ";\n  p {\n    font-size: 0.85em;\n  }\n  button {\n    border: none;\n    padding: 0.8em 3em;\n    background: rgba(253, 0, 21, 1);\n    color: white;\n    text-transform: uppercase;\n    font-weight: 600;\n    margin: 1em;\n    margin-top: 2em;\n    transition: 0.4s;\n    cursor: pointer;\n    font-family: 'karla-fonts';\n    min-width: max-content;\n    &:hover {\n      padding: 0.7em 2.7em;\n    }\n  }\n  .back {\n    background-color: rgba(107, 106, 106, 1);\n    padding: 0.8em 2em;\n    &:hover {\n      padding: 0.8em 2.4em;\n    }\n  }\n  .bold,\n  .red {\n    font-weight: 700;\n    font-size: 1.125em;\n  }\n  .red {\n    color: #fd0015;\n    margin-left: 0.5em;\n  }\n  .medium {\n    font-weight: 600;\n    font-size: 1em;\n  }\n  @media only screen and (max-width: 640px) {\n    button {\n      &:hover {\n        padding: 0.8em 3em;\n      }\n    }\n\n    .back {\n      &:hover {\n        padding: 0.8em 2em;\n      }\n      margin-left: 0;\n    }\n  }\n"])), function (props) {
   return props.padding;
 }, function (props) {
   return props.marginLeft;
@@ -2115,8 +2087,10 @@ var DeliveryOption = styled.div(_templateObject10 || (_templateObject10 = _tagge
 }, function (props) {
   return props.hovered ? '800' : '700';
 });
 var CreditCard = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n  width: 70px;\n  min-height: 48px;\n  max-height: 50px;\n  background-color: white;\n  border: 3px solid rgba(217, 217, 217, 0.1);\n  display: grid;\n  place-items: center;\n  margin: auto;\n  cursor: pointer;\n  overflow: hidden;\n  border-radius: 5px;\n  transition: 0.1s;\n  border: 1px solid transparent;\n  text-align: center;\n  p {\n    font-size: 10px;\n  }\n"])));
 var PaymentLi = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  margin-bottom: 1.5em;\n  cursor: pointer;\n  .circle {\n    /* background: #323232; */\n    width: 16px;\n    height: 16px;\n    display: grid;\n    place-items: center;\n    border-radius: 50%;\n    border: 1px solid #323232;\n    margin-right: 1em;\n  }\n  .innerCircle {\n    background: #323232;\n    border-radius: 50%;\n    width: 6px;\n    height: 6px;\n  }\n  p {\n    font-size: 1em;\n    color: black;\n    text-transform: capitalize;\n    font-weight: 500;\n  }\n"])));
 var StyledTableRow = styled(material.TableRow)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n  && {\n    box-shadow: none;\n    border: none;\n    background-color: ", ";\n    p {\n      font-size: 0.9em;\n      font-family: 'karla-fonts';\n    }\n    .max {\n      min-width: max-content;\n    }\n    .red {\n      color: red;\n      font-weight: inherit;\n    }\n    .price {\n      font-weight: 700;\n    }\n    /* .sm {\n      font-weight: 600;\n    } */\n    .bolder {\n      font-weight: 800;\n      font-size: 1em;\n    }\n    @media only screen and (max-width: 640px) {\n      p {\n        font-size: 12px;\n      }\n      .sm {\n        font-size: 10px;\n      }\n      .price,\n      .red {\n        font-size: 10px;\n      }\n      .total {\n        font-size: 14px;\n      }\n      .bolder {\n        font-size: 12px;\n      }\n    }\n  }\n"])), function (props) {
   return props.colored ? 'rgba(255, 240, 236, 1)' : 'white';
 });
@@ -2128,10 +2102,10 @@ var BottomGrid = styled(material.Grid)(_templateObject15 || (_templateObject15 =
 var CheckoutInput = function CheckoutInput(_ref) {
   var controlls = _ref.controlls;
   var placeholder = controlls.placeholder,
-      _controlls$autoFocus = controlls.autoFocus,
-      autoFocus = _controlls$autoFocus === void 0 ? false : _controlls$autoFocus,
-      showIcon = controlls.showIcon,
-      type = controlls.type;
+    _controlls$autoFocus = controlls.autoFocus,
+    autoFocus = _controlls$autoFocus === void 0 ? false : _controlls$autoFocus,
+    showIcon = controlls.showIcon,
+    type = controlls.type;
   return /*#__PURE__*/React__default.createElement(TextFeildContainer, null, /*#__PURE__*/React__default.createElement(reactHookForm.Controller, _extends({}, controlls, {
     defaultValue: "",
     render: function render(_ref2) {
@@ -2139,7 +2113,8 @@ var CheckoutInput = function CheckoutInput(_ref) {
       return /*#__PURE__*/React__default.createElement(material.TextField, _extends({
         placeholder: placeholder,
         variant: "outlined",
-        required: true,
+        required: true
+        ,
         InputProps: showIcon ? {
           startAdornment: /*#__PURE__*/React__default.createElement(material.InputAdornment, {
             position: "start"
@@ -2156,14 +2131,14 @@ var CheckoutInput = function CheckoutInput(_ref) {
 var CheckoutSelect = function CheckoutSelect(_ref3) {
   var controlls = _ref3.controlls;
   var key = controlls.key,
-      List = controlls.List,
-      name = controlls.name,
-      control = controlls.control,
-      _controlls$val = controlls.val,
-      val = _controlls$val === void 0 ? 'id' : _controlls$val,
-      _controlls$autoFocus2 = controlls.autoFocus,
-      autoFocus = _controlls$autoFocus2 === void 0 ? false : _controlls$autoFocus2,
-      defaultValue = controlls.defaultValue;
+    List = controlls.List,
+    name = controlls.name,
+    control = controlls.control,
+    _controlls$val = controlls.val,
+    val = _controlls$val === void 0 ? 'id' : _controlls$val,
+    _controlls$autoFocus2 = controlls.autoFocus,
+    autoFocus = _controlls$autoFocus2 === void 0 ? false : _controlls$autoFocus2,
+    defaultValue = controlls.defaultValue;
   return /*#__PURE__*/React__default.createElement(TextFeildContainer, null, console.log(defaultValue), /*#__PURE__*/React__default.createElement(reactHookForm.Controller, {
     control: control,
     name: name,
@@ -2171,10 +2146,13 @@ var CheckoutSelect = function CheckoutSelect(_ref3) {
     render: function render(_ref4) {
       var field = _ref4.field;
       return /*#__PURE__*/React__default.createElement(material.TextField, _extends({
-        fullWidth: true,
-        select: true,
+        fullWidth: true
+        ,
+        select: true
+        ,
         displayEmpty: true,
-        required: true,
+        required: true
+        ,
         autoFocus: autoFocus
       }, field), /*#__PURE__*/React__default.createElement(material.MenuItem, {
         value: ""
@@ -2190,12 +2168,12 @@ var CheckoutSelect = function CheckoutSelect(_ref3) {
 var StepsHeaderComponent = function StepsHeaderComponent(_ref) {
   var text = _ref.text,
-      username = _ref.username,
-      icon = _ref.icon,
-      single = _ref.single,
-      closed = _ref.closed,
-      handleClick = _ref.handleClick,
-      withoutIcon = _ref.withoutIcon;
+    username = _ref.username,
+    icon = _ref.icon,
+    single = _ref.single,
+    closed = _ref.closed,
+    handleClick = _ref.handleClick,
+    withoutIcon = _ref.withoutIcon;
   return /*#__PURE__*/React__default.createElement(StepsHeaderContainer, {
     single: single,
     username: username,
@@ -2233,18 +2211,15 @@ var StepsHeaderComponent = function StepsHeaderComponent(_ref) {
 var Step0 = function Step0(_ref) {
   var loading = _ref.loading,
-      userName = _ref.userName,
-      handleLogin = _ref.handleLogin,
-      clickRedirect = _ref.clickRedirect;
+    userName = _ref.userName,
+    handleLogin = _ref.handleLogin,
+    clickRedirect = _ref.clickRedirect;
   var _useForm = reactHookForm.useForm(),
-      control = _useForm.control,
-      handleSubmit = _useForm.handleSubmit;
+    control = _useForm.control,
+    handleSubmit = _useForm.handleSubmit;
   var onSubmit = function onSubmit(data) {
     handleLogin(data);
   };
   return /*#__PURE__*/React__default.createElement(StepContainer, null, /*#__PURE__*/React__default.createElement(StepsHeaderComponent, {
     text: 'welcome',
     username: userName,
@@ -2310,9 +2285,9 @@ var Step0 = function Step0(_ref) {
 var ButtonRow = function ButtonRow(_ref) {
   var handleBack = _ref.handleBack,
-      handleNext = _ref.handleNext,
-      backDisabled = _ref.backDisabled,
-      nextDisabled = _ref.nextDisabled;
+    handleNext = _ref.handleNext,
+    backDisabled = _ref.backDisabled,
+    nextDisabled = _ref.nextDisabled;
   return /*#__PURE__*/React__default.createElement(ButtonRowContainer, {
     disabledBack: backDisabled,
     disabledNext: nextDisabled
@@ -2337,8 +2312,8 @@ var ButtonRow = function ButtonRow(_ref) {
 var StoreForm = function StoreForm(_ref) {
   var control = _ref.control,
-      _onSubmit = _ref.onSubmit,
-      handleSubmit = _ref.handleSubmit;
+    _onSubmit = _ref.onSubmit,
+    handleSubmit = _ref.handleSubmit;
   return /*#__PURE__*/React__default.createElement(material.Grid, {
     container: true,
     columnSpacing: 1,
@@ -2410,10 +2385,10 @@ var StoreForm = function StoreForm(_ref) {
 var AddressForm = function AddressForm(_ref) {
   var control = _ref.control,
-      countries = _ref.countries,
-      states = _ref.states,
-      _onSubmit = _ref.onSubmit,
-      handleSubmit = _ref.handleSubmit;
+    countries = _ref.countries,
+    states = _ref.states,
+    _onSubmit = _ref.onSubmit,
+    handleSubmit = _ref.handleSubmit;
   return /*#__PURE__*/React__default.createElement(material.Grid, {
     container: true,
     rowSpacing: 2,
@@ -2514,32 +2489,27 @@ var AddressForm = function AddressForm(_ref) {
 var Step1 = function Step1(_ref) {
   var _addressList$, _addressList, _addressList2;
   var handleNext = _ref.handleNext,
-      setShipping = _ref.setShipping,
-      setBilling = _ref.setBilling,
-      addStore = _ref.addStore,
-      addStoreAddress = _ref.addStoreAddress,
-      stores = _ref.stores,
-      selectedStore = _ref.selectedStore,
-      setSelectedStore = _ref.setSelectedStore,
-      countries = _ref.countries,
-      setSelectedCountry = _ref.setSelectedCountry,
-      states = _ref.states;
+    setShipping = _ref.setShipping,
+    setBilling = _ref.setBilling,
+    addStore = _ref.addStore,
+    addStoreAddress = _ref.addStoreAddress,
+    stores = _ref.stores,
+    selectedStore = _ref.selectedStore,
+    setSelectedStore = _ref.setSelectedStore,
+    countries = _ref.countries,
+    setSelectedCountry = _ref.setSelectedCountry,
+    states = _ref.states;
   var _useForm = reactHookForm.useForm(),
-      control = _useForm.control,
-      handleSubmit = _useForm.handleSubmit;
+    control = _useForm.control,
+    handleSubmit = _useForm.handleSubmit;
   var _useState = React.useState(false),
-      showShipping = _useState[0],
-      setShowShipping = _useState[1];
+    showShipping = _useState[0],
+    setShowShipping = _useState[1];
   var _useForm2 = reactHookForm.useForm(),
-      addressControl = _useForm2.control,
-      watch = _useForm2.watch,
-      handleSubmitAddress = _useForm2.handleSubmit;
+    addressControl = _useForm2.control,
+    watch = _useForm2.watch,
+    handleSubmitAddress = _useForm2.handleSubmit;
   var StoresList = [].concat(stores, [{
     storeName: 'Add Store',
     id: 99999999
@@ -2549,7 +2519,6 @@ var Step1 = function Step1(_ref) {
     return (store === null || store === void 0 ? void 0 : store.id) === selectedStore;
   });
   var addressList = [];
   if (selectedStores !== null && selectedStores !== void 0 && selectedStores.customerStoreAddressList) {
     addressList = [].concat(selectedStores === null || selectedStores === void 0 ? void 0 : selectedStores.customerStoreAddressList, [{
       address1: 'Add billing Address',
@@ -2561,21 +2530,17 @@ var Step1 = function Step1(_ref) {
       id: 99999999
     }];
   }
   var _useState2 = React.useState((_addressList$ = addressList[0]) === null || _addressList$ === void 0 ? void 0 : _addressList$.id),
-      address = _useState2[0],
-      setAddress = _useState2[1];
+    address = _useState2[0],
+    setAddress = _useState2[1];
   var onSubmit = function onSubmit(data) {
     var _stores$;
     addStore(data);
     setSelectedStore((_stores$ = stores[0]) === null || _stores$ === void 0 ? void 0 : _stores$.id);
   };
   var addAddress = function addAddress(data) {
     var _addressList$2;
     addStoreAddress(data);
     setAddress((_addressList$2 = addressList[0]) === null || _addressList$2 === void 0 ? void 0 : _addressList$2.id);
   };
@@ -2585,13 +2550,11 @@ var Step1 = function Step1(_ref) {
     setShipping(showShipping);
     handleNext();
   };
   React.useEffect(function () {
     setSelectedCountry(selectedCountry);
   }, [selectedCountry]);
   React.useEffect(function () {
     var _addressList$3;
     setAddress((_addressList$3 = addressList[0]) === null || _addressList$3 === void 0 ? void 0 : _addressList$3.id);
   }, [selectedStore]);
   return /*#__PURE__*/React__default.createElement(StepContainer, null, /*#__PURE__*/React__default.createElement(StepsHeaderComponent, {
@@ -2664,7 +2627,8 @@ var Step1 = function Step1(_ref) {
     checked: showShipping,
     icon: /*#__PURE__*/React__default.createElement(md.MdOutlineCircle, null),
     checkedIcon: /*#__PURE__*/React__default.createElement(gr.GrRadialSelected, null)
-  }), /*#__PURE__*/React__default.createElement("p", null, "Ship to a different address ")), /*#__PURE__*/React__default.createElement(ButtonRow, {
+  }), /*#__PURE__*/React__default.createElement("p", null, "Ship to a different address ")), /*#__PURE__*/React__default.createElement(ButtonRow
+  , {
     backDisabled: true,
     handleNext: function handleNext() {
       next();
@@ -2675,35 +2639,30 @@ var Step1 = function Step1(_ref) {
 var Step2 = function Step2(_ref) {
   var _addressList$, _addressList;
   var handleBack = _ref.handleBack,
-      _handleNext = _ref.handleNext,
-      options = _ref.options,
-      setShipping = _ref.setShipping,
-      countries = _ref.countries,
-      states = _ref.states,
-      addShipping = _ref.addShipping,
-      setSelectedCountry = _ref.setSelectedCountry,
-      showShipping = _ref.showShipping,
-      selectedStore = _ref.selectedStore,
-      stores = _ref.stores;
+    _handleNext = _ref.handleNext,
+    options = _ref.options,
+    setShipping = _ref.setShipping,
+    countries = _ref.countries,
+    states = _ref.states,
+    addShipping = _ref.addShipping,
+    setSelectedCountry = _ref.setSelectedCountry,
+    showShipping = _ref.showShipping,
+    selectedStore = _ref.selectedStore,
+    stores = _ref.stores;
   var _useForm = reactHookForm.useForm(),
-      control = _useForm.control,
-      handleSubmit = _useForm.handleSubmit,
-      resetField = _useForm.resetField,
-      watch = _useForm.watch;
+    control = _useForm.control,
+    handleSubmit = _useForm.handleSubmit,
+    resetField = _useForm.resetField,
+    watch = _useForm.watch;
   var _React$useState = React__default.useState(options[0]),
-      method = _React$useState[0],
-      setmethod = _React$useState[1];
+    method = _React$useState[0],
+    setmethod = _React$useState[1];
   var selectedCountry = watch('country');
   var selectedStores = stores === null || stores === void 0 ? void 0 : stores.find(function (store) {
     return (store === null || store === void 0 ? void 0 : store.id) === selectedStore;
   });
   var addressList = [];
   if (selectedStores !== null && selectedStores !== void 0 && selectedStores.customerStoreAddressList) {
     addressList = [].concat(selectedStores === null || selectedStores === void 0 ? void 0 : selectedStores.customerStoreAddressList, [{
       address1: 'Add Address',
@@ -2715,23 +2674,20 @@ var Step2 = function Step2(_ref) {
       id: 99999999
     }];
   }
   var _useState = React.useState((_addressList$ = addressList[0]) === null || _addressList$ === void 0 ? void 0 : _addressList$.id),
-      address = _useState[0],
-      setAddress = _useState[1];
+    address = _useState[0],
+    setAddress = _useState[1];
   var onSubmit = function onSubmit(data) {
     console.log(data);
     addShipping(data);
     resetField('shippingAddress');
   };
   React.useEffect(function () {
     setSelectedCountry(selectedCountry);
   }, [selectedCountry]);
   React.useEffect(function () {
     var _addressList$2;
     setAddress((_addressList$2 = addressList[0]) === null || _addressList$2 === void 0 ? void 0 : _addressList$2.id);
   }, [selectedStore]);
   return /*#__PURE__*/React__default.createElement(StepContainer, null, /*#__PURE__*/React__default.createElement(StepsHeaderComponent, {
@@ -2769,11 +2725,11 @@ var Step2 = function Step2(_ref) {
   })), /*#__PURE__*/React__default.createElement(material.Stack, {
     flexDirection: "column",
     width: "100%",
-    alignItems: 'flex-start',
+    alignItems: 'flex-start'
+    ,
     paddingBottom: '2em'
   }, options === null || options === void 0 ? void 0 : options.map(function (option, i) {
     var _option$amount;
     return /*#__PURE__*/React__default.createElement(DeliveryOption, {
       hovered: (option === null || option === void 0 ? void 0 : option.id) === (method === null || method === void 0 ? void 0 : method.id),
       onClick: function onClick() {
@@ -2793,7 +2749,6 @@ var Step2 = function Step2(_ref) {
     handleBack: handleBack,
     handleNext: function handleNext() {
       setShipping(address, method);
       _handleNext();
     },
     nextDisabled: showShipping && !address || (address === null || address === void 0 ? void 0 : address.id) === 99999999
@@ -2802,15 +2757,22 @@ var Step2 = function Step2(_ref) {
 var CreditCardForm = function CreditCardForm(_ref) {
   var handleChange = _ref.handleChange,
-      handleFocus = _ref.handleFocus,
-      handleSave = _ref.handleSave;
+    handleFocus = _ref.handleFocus,
+    saved = _ref.saved,
+    handleSave = _ref.handleSave,
+    showError = _ref.showError,
+    data = _ref.data;
+  var name = data.name,
+    number = data.number,
+    cvc = data.cvc,
+    expiry = data.expiry;
   return /*#__PURE__*/React__default.createElement(material.Grid, {
     container: true,
     rowSpacing: 2,
     component: 'form',
     onSubmit: function onSubmit(e) {
       e.preventDefault();
-      handleSave();
+      handleSave('data');
     },
     paddingLeft: "1em",
     columnSpacing: 2,
@@ -2829,7 +2791,14 @@ var CreditCardForm = function CreditCardForm(_ref) {
     name: "name",
     type: "text",
     placeholder: "Card Holder's Name*"
-  })), /*#__PURE__*/React__default.createElement(material.Grid, {
+  }), showError && name.length < 3 ? /*#__PURE__*/React__default.createElement("p", {
+    style: {
+      color: 'red',
+      marginLeft: '.5em',
+      paddingTop: '.4em',
+      fontSize: '.95em'
+    }
+  }, "Please enter a valid Card Holder's Name") : ''), /*#__PURE__*/React__default.createElement(material.Grid, {
     item: true,
     xs: 12,
     md: 10
@@ -2841,7 +2810,14 @@ var CreditCardForm = function CreditCardForm(_ref) {
     name: "number",
     type: "number",
     placeholder: "Card Nubmers   xxxx-xxxx-xxxx-xxxx"
-  })), /*#__PURE__*/React__default.createElement(material.Grid, {
+  }), showError && number.length < 14 || showError && number.length > 16 ? /*#__PURE__*/React__default.createElement("p", {
+    style: {
+      color: 'red',
+      marginLeft: '.5em',
+      paddingTop: '.4em',
+      fontSize: '.95em'
+    }
+  }, "Please enter a valid card Number") : ''), /*#__PURE__*/React__default.createElement(material.Grid, {
     item: true,
     xs: 12,
     sm: 5
@@ -2853,7 +2829,14 @@ var CreditCardForm = function CreditCardForm(_ref) {
     name: "expiry",
     type: "number",
     placeholder: "Expiration Date  MM/YYYY "
-  })), /*#__PURE__*/React__default.createElement(material.Grid, {
+  }), showError && expiry.length < 4 || showError && expiry.length > 6 ? /*#__PURE__*/React__default.createElement("p", {
+    style: {
+      color: 'red',
+      marginLeft: '.5em',
+      paddingTop: '.4em',
+      fontSize: '.95em'
+    }
+  }, "Please enter a valid date.") : ''), /*#__PURE__*/React__default.createElement(material.Grid, {
     item: true,
     xs: 12,
     sm: 3.5
@@ -2864,58 +2847,85 @@ var CreditCardForm = function CreditCardForm(_ref) {
     onFocus: handleFocus,
     name: "cvc",
     type: "number",
-    placeholder: "CVC/CVVV  ***"
-  })), /*#__PURE__*/React__default.createElement(material.Grid, {
+    placeholder: "CVC/CVV  ***"
+  }), showError && cvc.length < 3 || showError && cvc.length > 4 ? /*#__PURE__*/React__default.createElement("p", {
+    style: {
+      color: 'red',
+      marginLeft: '.5em',
+      paddingTop: '.4em',
+      fontSize: '.95em'
+    }
+  }, "Please enter a valid cvv.") : ''), /*#__PURE__*/React__default.createElement(material.Grid, {
     item: true,
     xs: 12
-  }));
+  }, /*#__PURE__*/React__default.createElement(SaveButton, {
+    type: "submit",
+    disabled: saved,
+    style: saved ? {
+      opacity: 0.8,
+      marginBottom: '3em',
+      padding: '.8em 1em'
+    } : {
+      marginBottom: '3em',
+      padding: '.8em 1em'
+    }
+  }, saved ? 'saved' : 'save')));
 };
 var PaymentForm = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(PaymentForm, _React$Component);
   function PaymentForm() {
     var _this;
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
     _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
     _this.state = {
       cvc: '',
       expiry: '',
       focus: '',
       name: '',
-      number: ''
+      number: '',
+      showError: false
     };
     _this.handleInputFocus = function (e) {
       _this.setState({
         focus: e.target.name
       });
     };
     _this.handleInputChange = function (e) {
       var _this$setState;
       var _e$target = e.target,
-          name = _e$target.name,
-          value = _e$target.value;
+        name = _e$target.name,
+        value = _e$target.value;
       _this.setState((_this$setState = {}, _this$setState[name] = value, _this$setState));
     };
     _this.handleSave = function (e) {
-      console.log(e);
+      var _this$state = _this.state,
+        name = _this$state.name,
+        number = _this$state.number,
+        cvc = _this$state.cvc,
+        expiry = _this$state.expiry;
+      if (name.length < 3) return _this.setState({
+        showError: true
+      });
+      if (number.length < 14 || number.length > 16) return _this.setState({
+        showError: true
+      });
+      if (cvc.length < 3 || cvc.length > 4) return _this.setState({
+        showError: true
+      });
+      if (expiry.length < 4 || expiry.length > 6) return _this.setState({
+        showError: true
+      });
+      _this.props.handleSave(_this.state);
     };
     return _this;
   }
   var _proto = PaymentForm.prototype;
   _proto.render = function render() {
+    var _this2 = this;
+    console.log(this.state.showError);
     return /*#__PURE__*/React__default.createElement("div", {
       id: "PaymentForm"
     }, /*#__PURE__*/React__default.createElement(Cards, {
@@ -2927,36 +2937,36 @@ var PaymentForm = /*#__PURE__*/function (_React$Component) {
     }), /*#__PURE__*/React__default.createElement(CreditCardForm, {
       handleChange: this.handleInputChange,
       handleFocus: this.handleInputFocus,
-      saved: false,
-      handleSave: this.props.handleSave(this.state)
+      saved: this.props.saved,
+      showError: this.state.showError,
+      data: this.state,
+      handleSave: function handleSave(data) {
+        return _this2.handleSave(_this2.state);
+      }
     }));
   };
   return PaymentForm;
 }(React__default.Component);
 var Step3 = function Step3(_ref) {
   var _selectedMethod$name;
   var handleBack = _ref.handleBack,
-      _handleNext = _ref.handleNext,
-      setPaymentDetails = _ref.setPaymentDetails,
-      payments = _ref.payments,
-      storeCredits = _ref.storeCredits,
-      total = _ref.total;
+    _handleNext = _ref.handleNext,
+    setPaymentDetails = _ref.setPaymentDetails,
+    payments = _ref.payments,
+    storeCredits = _ref.storeCredits,
+    total = _ref.total;
   var _useState = React.useState(payments && payments[0]),
-      selectedMethod = _useState[0],
-      setSelectedMethod = _useState[1];
+    selectedMethod = _useState[0],
+    setSelectedMethod = _useState[1];
   var _useState2 = React.useState(true),
-      useStoreCr = _useState2[0],
-      setUseStoreCr = _useState2[1];
+    useStoreCr = _useState2[0],
+    setUseStoreCr = _useState2[1];
   var _useState3 = React.useState(null),
-      card = _useState3[0],
-      setCard = _useState3[1];
+    card = _useState3[0],
+    setCard = _useState3[1];
   var isCard = selectedMethod === null || selectedMethod === void 0 ? void 0 : (_selectedMethod$name = selectedMethod.name) === null || _selectedMethod$name === void 0 ? void 0 : _selectedMethod$name.toLowerCase().includes('card');
+  var storeCr = storeCredits > total ? total : storeCredits;
   return /*#__PURE__*/React__default.createElement(StepContainer, null, /*#__PURE__*/React__default.createElement(StepsHeaderComponent, {
     text: 'Payments Method',
     icon: 4
@@ -2964,7 +2974,8 @@ var Step3 = function Step3(_ref) {
     marginLeft: "1.8em",
     style: {
       paddingBottom: '1.5em',
-      marginTop: '-1em'
+      marginTop: '-1em',
+      color: 'grey'
     }
   }, /*#__PURE__*/React__default.createElement("p", {
     className: "bold"
@@ -2983,12 +2994,11 @@ var Step3 = function Step3(_ref) {
     },
     checked: useStoreCr
   }), /*#__PURE__*/React__default.createElement("p", {
+    className: "medium"
+  }, "Store Credits: ", /*#__PURE__*/React__default.createElement("span", {
     className: "bold"
-  }, "Store Credits:", ' ', /*#__PURE__*/React__default.createElement("span", {
-    className: "bold"
-  }, "$", storeCredits === null || storeCredits === void 0 ? void 0 : storeCredits.toFixed(2)))) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null), /*#__PURE__*/React__default.createElement(StepsContent, null, payments === null || payments === void 0 ? void 0 : payments.map(function (payment, i) {
+  }, "$", storeCr === null || storeCr === void 0 ? void 0 : storeCr.toFixed(2)))) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null), /*#__PURE__*/React__default.createElement(StepsContent, null, payments === null || payments === void 0 ? void 0 : payments.map(function (payment, i) {
     var _payment$name;
     if (payment !== null && payment !== void 0 && (_payment$name = payment.name) !== null && _payment$name !== void 0 && _payment$name.toLowerCase().includes('card')) {
       return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
         key: i
@@ -3007,8 +3017,9 @@ var Step3 = function Step3(_ref) {
       })), /*#__PURE__*/React__default.createElement("p", null, payment === null || payment === void 0 ? void 0 : payment.name)), (selectedMethod === null || selectedMethod === void 0 ? void 0 : selectedMethod.id) === (payment === null || payment === void 0 ? void 0 : payment.id) && /*#__PURE__*/React__default.createElement(PaymentForm, {
         handleSave: function handleSave(data) {
           return setCard(data);
-        }
-      }));
+        },
+        saved: card ? true : false
+      }), console.log(card));
     } else {
       return /*#__PURE__*/React__default.createElement(PaymentLi, {
         style: storeCredits >= total && useStoreCr ? {
@@ -3028,29 +3039,26 @@ var Step3 = function Step3(_ref) {
     handleBack: handleBack,
     handleNext: function handleNext() {
       setPaymentDetails(useStoreCr, useStoreCr && storeCredits > total ? null : selectedMethod, isCard && card);
       _handleNext();
-    }
+    },
+    nextDisabled: isCard && !card
   })));
 };
 var Step4 = function Step4(_ref) {
   var _cartData$cartLineIte, _cartData$totalCartPr;
   var handleBack = _ref.handleBack,
-      cartData = _ref.cartData,
-      clickRedirect = _ref.clickRedirect,
-      loading = _ref.loading,
-      placeOrder = _ref.placeOrder,
-      storeCredits = _ref.storeCredits;
+    cartData = _ref.cartData,
+    clickRedirect = _ref.clickRedirect,
+    loading = _ref.loading,
+    placeOrder = _ref.placeOrder,
+    storeCredits = _ref.storeCredits;
   var _React$useState = React__default.useState(false),
-      checked = _React$useState[0],
-      setChecked = _React$useState[1];
+    checked = _React$useState[0],
+    setChecked = _React$useState[1];
   var _React$useState2 = React__default.useState(''),
-      comments = _React$useState2[0],
-      setComments = _React$useState2[1];
+    comments = _React$useState2[0],
+    setComments = _React$useState2[1];
   var storeCr = storeCredits > (cartData === null || cartData === void 0 ? void 0 : cartData.totalCartPrice) ? cartData === null || cartData === void 0 ? void 0 : cartData.totalCartPrice : storeCredits;
   return /*#__PURE__*/React__default.createElement(StepContainer, null, /*#__PURE__*/React__default.createElement(StepsHeaderComponent, {
     text: 'Order Review',
@@ -3063,7 +3071,6 @@ var Step4 = function Step4(_ref) {
     size: "small"
   }, /*#__PURE__*/React__default.createElement(material.TableBody, null, cartData === null || cartData === void 0 ? void 0 : (_cartData$cartLineIte = cartData.cartLineItemDtoList) === null || _cartData$cartLineIte === void 0 ? void 0 : _cartData$cartLineIte.map(function (row, i) {
     var _row$standardPrice, _ref2;
     return /*#__PURE__*/React__default.createElement(StyledTableRow, {
       key: row.name,
       colored: i % 2 === 0
@@ -3127,7 +3134,7 @@ var Step4 = function Step4(_ref) {
     align: "right"
   }, /*#__PURE__*/React__default.createElement("p", {
     className: "max sm  red"
-  }, "Calculated later"))), storeCredits && /*#__PURE__*/React__default.createElement(StyledTableRow, null, /*#__PURE__*/React__default.createElement(StyledTableCell, {
+  }, "Calculated later"))), storeCredits && storeCredits > 0 ? /*#__PURE__*/React__default.createElement(StyledTableRow, null, /*#__PURE__*/React__default.createElement(StyledTableCell, {
     colSpan: 1,
     noSmall: true
   }), /*#__PURE__*/React__default.createElement(StyledTableCell, {
@@ -3140,7 +3147,7 @@ var Step4 = function Step4(_ref) {
     align: "right"
   }, /*#__PURE__*/React__default.createElement("p", {
     className: "max sm price"
-  }, "- $", storeCr || 0))), /*#__PURE__*/React__default.createElement(StyledTableRow, null, /*#__PURE__*/React__default.createElement(StyledTableCell, {
+  }, "- $", (storeCr === null || storeCr === void 0 ? void 0 : storeCr.toFixed(2)) || 0))) : "", /*#__PURE__*/React__default.createElement(StyledTableRow, null, /*#__PURE__*/React__default.createElement(StyledTableCell, {
     colSpan: 1,
     noSmall: true
   }), /*#__PURE__*/React__default.createElement(StyledTableCell, {
@@ -3221,7 +3228,6 @@ var Step4 = function Step4(_ref) {
   }, "back"), /*#__PURE__*/React__default.createElement("button", {
     onClick: function onClick(e) {
       e.preventDefault();
       if (checked) {
         placeOrder(comments);
       } else {
@@ -3274,41 +3280,40 @@ var steps = [{
     });
   }
 }];
 var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
   var currStep = _ref.currStep,
-      handleNext = _ref.handleNext,
-      handleBack = _ref.handleBack,
-      loading = _ref.loading,
-      handleLogin = _ref.handleLogin,
-      userName = _ref.userName,
-      addStore = _ref.addStore,
-      setBilling = _ref.setBilling,
-      setShowShipping = _ref.setShowShipping,
-      userStores = _ref.userStores,
-      selectedStore = _ref.selectedStore,
-      setSelectedStore = _ref.setSelectedStore,
-      addStoreAddress = _ref.addStoreAddress,
-      setSelectedCountry = _ref.setSelectedCountry,
-      countries = _ref.countries,
-      states = _ref.states,
-      setShipping = _ref.setShipping,
-      showShipping = _ref.showShipping,
-      deliveryOptions = _ref.deliveryOptions,
-      setPaymentDetails = _ref.setPaymentDetails,
-      paymentMethods = _ref.paymentMethods,
-      storeCredits = _ref.storeCredits,
-      selectedStoreCredits = _ref.selectedStoreCredits,
-      cartData = _ref.cartData,
-      vat = _ref.vat,
-      clickRedirect = _ref.clickRedirect,
-      ordering = _ref.ordering,
-      deliveryCharges = _ref.deliveryCharges,
-      placeOrder = _ref.placeOrder,
-      shippingAddress = _ref.shippingAddress,
-      billingAddress = _ref.billingAddress,
-      selectedPaymentMethod = _ref.selectedPaymentMethod,
-      shippingMethod = _ref.shippingMethod;
+    handleNext = _ref.handleNext,
+    handleBack = _ref.handleBack,
+    loading = _ref.loading,
+    handleLogin = _ref.handleLogin,
+    userName = _ref.userName,
+    addStore = _ref.addStore,
+    setBilling = _ref.setBilling,
+    setShowShipping = _ref.setShowShipping,
+    userStores = _ref.userStores,
+    selectedStore = _ref.selectedStore,
+    setSelectedStore = _ref.setSelectedStore,
+    addStoreAddress = _ref.addStoreAddress,
+    setSelectedCountry = _ref.setSelectedCountry,
+    countries = _ref.countries,
+    states = _ref.states,
+    setShipping = _ref.setShipping,
+    showShipping = _ref.showShipping,
+    deliveryOptions = _ref.deliveryOptions,
+    setPaymentDetails = _ref.setPaymentDetails,
+    paymentMethods = _ref.paymentMethods,
+    storeCredits = _ref.storeCredits,
+    selectedStoreCredits = _ref.selectedStoreCredits,
+    cartData = _ref.cartData,
+    vat = _ref.vat,
+    clickRedirect = _ref.clickRedirect,
+    ordering = _ref.ordering,
+    deliveryCharges = _ref.deliveryCharges,
+    placeOrder = _ref.placeOrder,
+    shippingAddress = _ref.shippingAddress,
+    billingAddress = _ref.billingAddress,
+    selectedPaymentMethod = _ref.selectedPaymentMethod,
+    shippingMethod = _ref.shippingMethod;
   return /*#__PURE__*/React__default.createElement(CheckoutPageContainer, {
     className: "checkout"
   }, /*#__PURE__*/React__default.createElement(material.Stack, {
@@ -3395,7 +3400,8 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
       handleNext: handleNext,
       setShipping: setShowShipping,
       setBilling: setBilling,
-      stores: userStores,
+      stores: userStores
+      ,
       addStore: addStore,
       selectedStore: selectedStore,
       setSelectedStore: setSelectedStore,
@@ -3417,7 +3423,8 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
       setShipping: setShipping,
       showShipping: showShipping,
       selectedStore: selectedStore,
-      stores: userStores,
+      stores: userStores
+      ,
       addShipping: addStoreAddress,
       setSelectedCountry: setSelectedCountry
     })), index === 3 && /*#__PURE__*/React__default.createElement(material.StepContent, {
@@ -3512,9 +3519,10 @@ var DATE_FORMATS = {
 };
 var convertCamCaseToSnake = function convertCamCaseToSnake(child) {
+  var _Object$keys;
   var data = [];
   var i = 1;
-  Object.keys(child).map(function (k) {
+  Object === null || Object === void 0 ? void 0 : (_Object$keys = Object.keys(child)) === null || _Object$keys === void 0 ? void 0 : _Object$keys.map(function (k) {
     var result = k.replace(/([A-Z])/g, ' $1');
     var dataIndex = {
       key: i.toString(),
@@ -3528,49 +3536,38 @@ var convertCamCaseToSnake = function convertCamCaseToSnake(child) {
 };
 var renderMoney = function renderMoney(value) {
   var returnValue = '$0.00';
   try {
     if (value) {
       var _Math$abs, _Math$abs$toFixed, _value$toFixed;
       returnValue = value < 0 ? "-$" + ((_Math$abs = Math.abs(value)) === null || _Math$abs === void 0 ? void 0 : (_Math$abs$toFixed = _Math$abs.toFixed(2)) === null || _Math$abs$toFixed === void 0 ? void 0 : _Math$abs$toFixed.replace(/\B(?=(\d{3})+(?!\d))/g, ',')) : "$" + ((_value$toFixed = value.toFixed(2)) === null || _value$toFixed === void 0 ? void 0 : _value$toFixed.replace(/\B(?=(\d{3})+(?!\d))/g, ','));
     }
   } catch (e) {}
   return returnValue;
 };
 var getLocalTime = function getLocalTime(_ref) {
   var time = _ref.time,
-      _ref$format = _ref.format,
-      format = _ref$format === void 0 ? DATE_FORMATS.TIMESTAMP_FORMAT : _ref$format,
-      isMoment = _ref.isMoment;
+    _ref$format = _ref.format,
+    format = _ref$format === void 0 ? DATE_FORMATS.TIMESTAMP_FORMAT : _ref$format,
+    isMoment = _ref.isMoment;
   if (!time) {
     return time;
   }
   var convertedTime = moment.utc(time).clone().local();
   if (!isMoment) {
     convertedTime = convertedTime.format(format);
   }
   return convertedTime;
 };
 function hexToRgbA(hex) {
   var c;
   if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
     c = hex.substring(1).split('');
     if (c.length == 3) {
       c = [c[0], c[0], c[1], c[1], c[2], c[2]];
     }
     c = '0x' + c.join('');
     return [c >> 16 & 255, c >> 8 & 255, c & 255].join(',');
   }
   throw new Error('Bad Hex');
 }
@@ -3590,13 +3587,11 @@ var erLocalStorage = {
   },
   getJSONItem: function getJSONItem(key) {
     var returnValue = {};
     try {
       returnValue = localStorage.getItem(key) ? JSON.parse(localStorage.getItem(key)) : {};
     } catch (e) {
       console.error(e);
     }
     return returnValue;
   }
 };
@@ -3605,13 +3600,10 @@ var ErCache = /*#__PURE__*/function () {
   function ErCache() {
     this.sessionStorage = typeof window !== 'undefined' ? window.sessionStorage : {};
   }
   var _proto = ErCache.prototype;
   _proto.getItem = function getItem(key) {
     return this.sessionStorage.getItem(key);
   };
   _proto.getJSONItem = function getJSONItem(key) {
     try {
       return JSON.parse(this.sessionStorage.getItem(key));
@@ -3619,61 +3611,52 @@ var ErCache = /*#__PURE__*/function () {
       return {};
     }
   };
   _proto.removeItem = function removeItem(key) {
     this.sessionStorage.removeItem(key);
   };
   _proto.setItem = function setItem(_ref) {
     var key = _ref.key,
-        value = _ref.value;
+      value = _ref.value;
     return this.sessionStorage.setItem(key, value);
   };
   _proto.setJSONItem = function setJSONItem(_ref2) {
     var key = _ref2.key,
-        value = _ref2.value;
+      value = _ref2.value;
     try {
       return this.sessionStorage.setItem(key, JSON.stringify(value));
     } catch (e) {
       console.error(e);
     }
   };
   return ErCache;
 }();
 var erCache = new ErCache();
 var getItem = erLocalStorage.getItem,
-    getJSONItem = erLocalStorage.getJSONItem,
-    setItem = erLocalStorage.setItem;
+  getJSONItem = erLocalStorage.getJSONItem,
+  setItem = erLocalStorage.setItem;
 var ACCESS_TOKEN = STORAGE_KEYS.ACCESS_TOKEN,
-    REFRESH_TOKEN = STORAGE_KEYS.REFRESH_TOKEN;
+  REFRESH_TOKEN = STORAGE_KEYS.REFRESH_TOKEN;
 var byPassAuthAPIs = ['/authenticate'];
 var API_CACHE_PREFIX = 'API_CACHE';
 var getKeyFromPath = function getKeyFromPath(_ref) {
   var path = _ref.path,
-      queryParams = _ref.queryParams;
+    queryParams = _ref.queryParams;
   return API_CACHE_PREFIX + "_" + path + "_" + JSON.stringify(queryParams);
 };
 var getAPICacheData = function getAPICacheData(_ref2) {
   var path = _ref2.path,
-      queryParams = _ref2.queryParams;
+    queryParams = _ref2.queryParams;
   var cachedData = erCache.getJSONItem(getKeyFromPath({
     path: path,
     queryParams: queryParams
   }));
   return lodash.isEmpty(cachedData) ? null : cachedData;
 };
 var setAPIDataToCache = function setAPIDataToCache(_ref3) {
   var path = _ref3.path,
-      queryParams = _ref3.queryParams,
-      data = _ref3.data;
+    queryParams = _ref3.queryParams,
+    data = _ref3.data;
   erCache.setJSONItem({
     key: getKeyFromPath({
       path: path,
@@ -3682,66 +3665,56 @@ var setAPIDataToCache = function setAPIDataToCache(_ref3) {
     value: data
   });
 };
 var CancelToken = axios.CancelToken;
 var source;
 var API = function API(apiData) {
   try {
     var url = apiData.url,
-        method = apiData.method,
-        _apiData$queryParams = apiData.queryParams,
-        queryParams = _apiData$queryParams === void 0 ? {} : _apiData$queryParams,
-        formData = apiData.formData,
-        body = apiData.body,
-        isCancelToken = apiData.isCancelToken,
-        cache = apiData.cache,
-        _apiData$headers = apiData.headers,
-        headers = _apiData$headers === void 0 ? {} : _apiData$headers,
-        successMessage = apiData.successMessage,
-        hideErrorMessage = apiData.hideErrorMessage,
-        responseTypeData = apiData.responseTypeData,
-        apiEndPoint = apiData.apiEndPoint,
-        token = apiData.token;
+      method = apiData.method,
+      _apiData$queryParams = apiData.queryParams,
+      queryParams = _apiData$queryParams === void 0 ? {} : _apiData$queryParams,
+      formData = apiData.formData,
+      body = apiData.body,
+      isCancelToken = apiData.isCancelToken,
+      cache = apiData.cache,
+      _apiData$headers = apiData.headers,
+      headers = _apiData$headers === void 0 ? {} : _apiData$headers,
+      successMessage = apiData.successMessage,
+      hideErrorMessage = apiData.hideErrorMessage,
+      responseTypeData = apiData.responseTypeData,
+      apiEndPoint = apiData.apiEndPoint,
+      token = apiData.token;
     return Promise.resolve(_finallyRethrows(function () {
       return _catch(function () {
         function _temp2() {
           if (successMessage) {
             alert(successMessage);
           }
           if (responseTypeData) {
             return response.data;
           } else {
             return response.data.result;
           }
         }
         var apiUrl = ("/" + url).replace(/\/\//g, '/');
         var accessToken = token;
         var requestHeaders = headers;
         if (byPassAuthAPIs.indexOf(url) === -1) {
           requestHeaders = _extends({}, headers, {
             Authorization: "Bearer " + accessToken,
             Accept: "application/json, text/plain"
           });
         }
         var response;
         if (isCancelToken && typeof source != typeof undefined) {
           source.cancel();
         }
         source = CancelToken.source();
         if (apiUrl.indexOf('/services') === 0) {
           queryParams.token = accessToken;
         } else {
           apiUrl = "" + (API_END_POINT || apiEndPoint) + apiUrl;
         }
         var _temp = function () {
           if (cache && getAPICacheData({
             path: apiUrl,
@@ -3762,7 +3735,6 @@ var API = function API(apiData) {
               responseType: responseTypeData ? responseTypeData : null
             })).then(function (_axios$request) {
               response = _axios$request;
               if (cache) {
                 setAPIDataToCache({
                   path: apiUrl,
@@ -3773,11 +3745,9 @@ var API = function API(apiData) {
             });
           }
         }();
         return _temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp);
       }, function (exception) {
         var _exit = false;
         function _temp4(_result3) {
           return _exit ? _result3 : function () {
             if (axios.isCancel(exception)) {} else {
@@ -3791,15 +3761,12 @@ var API = function API(apiData) {
             }
           }();
         }
         var exceptionResponse = exception.response;
         var _temp3 = function () {
           if (exceptionResponse.data.hasError) {
             if (url != '/employee') {
               alert(exceptionResponse.data.error.message);
             }
             return function () {
               if (exceptionResponse.data.exception) {
                 return Promise.resolve(handleError({
@@ -3815,7 +3782,6 @@ var API = function API(apiData) {
             }();
           }
         }();
         return _temp3 && _temp3.then ? _temp3.then(_temp4) : _temp4(_temp3);
       });
     }, function (_wasThrown, _result) {
@@ -3826,14 +3792,12 @@ var API = function API(apiData) {
     return Promise.reject(e);
   }
 };
 API.get = function (url, options) {
   return API(_extends({
     url: url,
     method: 'get'
   }, options));
 };
 API.put = function (url, body, options) {
   return API(_extends({
     url: url,
@@ -3841,7 +3805,6 @@ API.put = function (url, body, options) {
     method: 'put'
   }, options));
 };
 API.patch = function (url, body, options) {
   return API(_extends({
     url: url,
@@ -3849,7 +3812,6 @@ API.patch = function (url, body, options) {
     method: 'patch'
   }, options));
 };
 API.post = function (url, body, options) {
   return API(_extends({
     url: url,
@@ -3857,7 +3819,6 @@ API.post = function (url, body, options) {
     method: 'post'
   }, options));
 };
 API["delete"] = function (url, body, options) {
   return API(_extends({
     url: url,
@@ -3865,19 +3826,17 @@ API["delete"] = function (url, body, options) {
     method: 'delete'
   }, options));
 };
 var handle401Error = function handle401Error(_ref4) {
   var apiData = _ref4.apiData,
-      exception = _ref4.exception;
+    exception = _ref4.exception;
   try {
     return Promise.resolve(_catch(function () {
       var _accessToken$refreshT = {
-        accessToken: getJSONItem(ACCESS_TOKEN),
-        refreshToken: getItem(REFRESH_TOKEN)
-      },
-          oldAccessToken = _accessToken$refreshT.accessToken,
-          oldRefreshToken = _accessToken$refreshT.refreshToken;
+          accessToken: getJSONItem(ACCESS_TOKEN),
+          refreshToken: getItem(REFRESH_TOKEN)
+        },
+        oldAccessToken = _accessToken$refreshT.accessToken,
+        oldRefreshToken = _accessToken$refreshT.refreshToken;
       return Promise.resolve(API({
         url: '/refreshToken',
         hideErrorMessage: true,
@@ -3887,10 +3846,9 @@ var handle401Error = function handle401Error(_ref4) {
         }
       })).then(function (_ref5) {
         var accessToken = _ref5.access,
-            refreshToken = _ref5.refresh;
+          refreshToken = _ref5.refresh;
         setItem(ACCESS_TOKEN, accessToken);
         setItem(REFRESH_TOKEN, refreshToken);
         if (apiData.throwErrorOnTokenTimeout) {
           exception.reason = 'resetRefreshToken';
           throw exception;
@@ -3902,29 +3860,25 @@ var handle401Error = function handle401Error(_ref4) {
       var isWindow = typeof window !== 'undefined';
       isWindow && window.dispatchEvent(new Event('authError'));
       exception.message = 'Your session is expired, please login again to continue.';
       if (exception.reason) {
         exception.message = '';
       }
       throw exception;
     }));
   } catch (e) {
     return Promise.reject(e);
   }
 };
 var handleError = function handleError(_ref6) {
   var exception = _ref6.exception,
-      url = _ref6.url,
-      apiData = _ref6.apiData,
-      hideErrorMessage = _ref6.hideErrorMessage;
+    url = _ref6.url,
+    apiData = _ref6.apiData,
+    hideErrorMessage = _ref6.hideErrorMessage;
   try {
     var _apiData$throwExcepti = apiData.throwException,
-        throwException = _apiData$throwExcepti === void 0 ? true : _apiData$throwExcepti,
-        errorMessage = apiData.errorMessage,
-        showAPIError = apiData.showAPIError;
+      throwException = _apiData$throwExcepti === void 0 ? true : _apiData$throwExcepti,
+      errorMessage = apiData.errorMessage,
+      showAPIError = apiData.showAPIError;
     return Promise.resolve(function () {
       if (exception.response && (exception.response.status === 401 || exception.response.status === 403) && url !== '/checkLogin' && url !== '/employee' && url !== '/authenticate' && url !== '/refreshToken') {
         return _catch(function () {
@@ -3934,7 +3888,6 @@ var handleError = function handleError(_ref6) {
           }));
         }, function (e) {
           alert(e);
           if (throwException) {
             throw exception;
           }
@@ -3942,14 +3895,11 @@ var handleError = function handleError(_ref6) {
       } else {
         if (!hideErrorMessage) {
           var errMessage = errorMessage;
           if (showAPIError) {
             errMessage = lodash.get(exception, 'response.data.message');
           }
           alert(errMessage);
         }
         if (throwException) {
           throw exception;
         }
@@ -3967,13 +3917,18 @@ var loadCachedTableState = function loadCachedTableState(_ref2) {
     filters: {}
   };
 };
-var getcsvData = function getcsvData(url) {
+var getcsvData = function getcsvData(_ref3) {
+  var url = _ref3.url,
+    apiEndPoint = _ref3.apiEndPoint,
+    token = _ref3.token;
   try {
     return Promise.resolve(_catch(function () {
       return Promise.resolve(API({
         method: 'GET',
         url: url,
-        responseTypeData: 'blob'
+        responseTypeData: 'blob',
+        apiEndPoint: apiEndPoint,
+        token: token
       }));
     }, function () {
       message.error('Error in getting csv data.');
@@ -3983,59 +3938,60 @@ var getcsvData = function getcsvData(url) {
   }
 };
-var _templateObject$9, _templateObject2$9, _templateObject3$9, _templateObject4$7, _templateObject5$7, _templateObject6$7;
+var _templateObject$9;
+var Loader$1 = function Loader(_ref) {
+  _objectDestructuringEmpty(_ref);
+  return /*#__PURE__*/React__default.createElement(LoaderContainer, null, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(material.CircularProgress, {
+    color: "inherit"
+  }), ";"));
+};
+var LoaderContainer = styled.div(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  width: 100%;\n  & > div {\n    margin: auto;\n    width: 50px;\n    height: 50px;\n  }\n"])));
+var _templateObject$a, _templateObject2$9, _templateObject3$9, _templateObject4$7, _templateObject5$7, _templateObject6$7;
 var _excluded = ["apiData", "columns", "listUpdate", "onDataLoad", "expandedRowRender", "onDataLoadError", "pagination", "extraFilterParams", "setExtraFilterParams", "cacheFilters", "tableId", "asyncService", "tableDataList", "filterData"];
 var APITable = React.forwardRef(function (_ref, ref) {
-  var _tableData$pagination, _tableData$pagination2, _tableData$pagination3;
+  var _tableData$data, _tableData$data2, _tableData$pagination, _tableData$pagination2, _tableData$pagination3;
   var apiData = _ref.apiData,
-      columns = _ref.columns,
-      listUpdate = _ref.listUpdate,
-      onDataLoad = _ref.onDataLoad,
-      onDataLoadError = _ref.onDataLoadError,
-      pagination = _ref.pagination,
-      _ref$extraFilterParam = _ref.extraFilterParams,
-      extraFilterParams = _ref$extraFilterParam === void 0 ? {} : _ref$extraFilterParam,
-      setExtraFilterParams = _ref.setExtraFilterParams,
-      tableId = _ref.tableId,
-      asyncService = _ref.asyncService,
-      tableDataList = _ref.tableDataList,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    columns = _ref.columns,
+    listUpdate = _ref.listUpdate,
+    onDataLoad = _ref.onDataLoad,
+    onDataLoadError = _ref.onDataLoadError,
+    pagination = _ref.pagination,
+    _ref$extraFilterParam = _ref.extraFilterParams,
+    extraFilterParams = _ref$extraFilterParam === void 0 ? {} : _ref$extraFilterParam,
+    setExtraFilterParams = _ref.setExtraFilterParams,
+    tableId = _ref.tableId,
+    asyncService = _ref.asyncService,
+    tableDataList = _ref.tableDataList,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
   var getJSONItem = erLocalStorage.getJSONItem;
   var tableCache = getJSONItem(STORAGE_KEYS.TABLE_DATA);
   var _useState = React.useState({
-    data: [],
-    pagination: {
-      current: (tableCache === null || tableCache === void 0 ? void 0 : tableCache.tableId) === tableId ? tableCache.currentPage : 1,
-      showSizeChanger: true,
-      pageSize: (tableCache === null || tableCache === void 0 ? void 0 : tableCache.tableId) === tableId ? tableCache === null || tableCache === void 0 ? void 0 : tableCache.pageSize : 20,
-      size: 'default'
-    },
-    apiStatus: API_STATUSES.PENDING
-  }),
-      tableData = _useState[0],
-      setTableData = _useState[1];
+      data: [],
+      pagination: {
+        current: (tableCache === null || tableCache === void 0 ? void 0 : tableCache.tableId) === tableId ? tableCache.currentPage : 1,
+        showSizeChanger: true,
+        pageSize: (tableCache === null || tableCache === void 0 ? void 0 : tableCache.tableId) === tableId ? tableCache === null || tableCache === void 0 ? void 0 : tableCache.pageSize : 20,
+        size: 'default'
+      },
+      apiStatus: API_STATUSES.PENDING
+    }),
+    tableData = _useState[0],
+    setTableData = _useState[1];
   var handleChangePage = function handleChangePage(event, newPage) {
     var pagination = _extends({}, tableData === null || tableData === void 0 ? void 0 : tableData.pagination, {
       current: newPage + 1
     });
     setTableData(_extends({}, tableData, {
       pagination: pagination
     }));
     handleTableChange(pagination);
   };
   var handleChangeRowsPerPage = function handleChangeRowsPerPage(event) {
     var pagination = _extends({}, tableData === null || tableData === void 0 ? void 0 : tableData.pagination, {
       pageSize: +event.target.value,
       current: 1
     });
     setTableData(_extends({}, tableData, {
       pagination: pagination
     }));
@@ -4050,18 +4006,15 @@ var APITable = React.forwardRef(function (_ref, ref) {
       };
     }
   };
   setTableDataOnRef();
   React.useEffect(function () {
     setTableDataOnRef();
     if (tableDataList) {
       tableDataList(tableData);
     }
   }, [tableData, ref]);
   React.useEffect(function () {
     var newPagination = _extends({}, tableData.pagination, pagination || {});
     setTableData(_extends({}, tableData, {
       pagination: newPagination
     }));
@@ -4071,10 +4024,8 @@ var APITable = React.forwardRef(function (_ref, ref) {
       });
     }, 200);
   }, [listUpdate, pagination]);
   var getFilterQueryParams = function getFilterQueryParams(filters) {
     var resultFilters = {};
     if (lodash.isPlainObject(filters)) {
       Object.keys(filters).forEach(function (filterKey) {
         var filterColumn = columns.find(function (column) {
@@ -4085,13 +4036,10 @@ var APITable = React.forwardRef(function (_ref, ref) {
       });
       setExtraFilterParams && setExtraFilterParams(_extends({}, extraFilterParams, resultFilters));
     }
     return resultFilters;
   };
   var getSortQueryParams = function getSortQueryParams(sort) {
     var resultSorters = {};
     if (sort) {
       var filterColumn = columns.find(function (column) {
         return column.dataIndex === sort;
@@ -4100,31 +4048,25 @@ var APITable = React.forwardRef(function (_ref, ref) {
       resultSorters.sort = queryKey;
       setExtraFilterParams && setExtraFilterParams(_extends({}, extraFilterParams, resultSorters));
     }
     return resultSorters;
   };
   var loadDataSource = function loadDataSource(_temp) {
     var _ref2 = _temp === void 0 ? {} : _temp,
-        _ref2$pagination = _ref2.pagination,
-        pagination = _ref2$pagination === void 0 ? tableData.pagination : _ref2$pagination,
-        filters = _ref2.filters,
-        sort = _ref2.sort,
-        sortDirection = _ref2.sortDirection;
+      _ref2$pagination = _ref2.pagination,
+      pagination = _ref2$pagination === void 0 ? tableData.pagination : _ref2$pagination,
+      filters = _ref2.filters,
+      sort = _ref2.sort,
+      sortDirection = _ref2.sortDirection;
     (function () {
       try {
         if (tableData.apiStatus === API_STATUSES.LOADING) {
           return;
         }
         setTableData(_extends({}, tableData, {
           apiStatus: API_STATUSES.LOADING
         }));
         var _temp5 = _catch(function () {
           var _ref3;
           function _temp3() {
             var responseData = apiResponse.content || apiResponse.sliderImageList || apiResponse;
             setTableData(_extends({}, tableData, {
@@ -4136,19 +4078,16 @@ var APITable = React.forwardRef(function (_ref, ref) {
             }));
             onDataLoad && onDataLoad(responseData);
           }
           var cachedTableState = loadCachedTableState({
             tableId: tableId
           });
           filters = _extends({}, cachedTableState.filters, filters);
           var apiResponse;
           var queryParams = _extends({
             page: pagination.current - 1,
             size: pagination.pageSize,
             sortDirection: sortDirection
           }, getSortQueryParams(sort), (_ref3 = apiData || {}) === null || _ref3 === void 0 ? void 0 : _ref3.queryParams, getFilterQueryParams(filters), extraFilterParams);
           var _temp2 = function () {
             if (asyncService) {
               return Promise.resolve(asyncService({
@@ -4164,7 +4103,6 @@ var APITable = React.forwardRef(function (_ref, ref) {
               });
             }
           }();
           return _temp2 && _temp2.then ? _temp2.then(_temp3) : _temp3(_temp2);
         }, function (e) {
           setTableData(_extends({}, tableData, {
@@ -4172,14 +4110,12 @@ var APITable = React.forwardRef(function (_ref, ref) {
           }));
           onDataLoadError && onDataLoadError(e);
         });
         return _temp5 && _temp5.then ? _temp5.then(function () {}) : void 0;
       } catch (e) {
         Promise.reject(e);
       }
     })();
   };
   var handleTableChange = function handleTableChange(pagination, filters, sorter) {
     var sortDirection;
     var sort;
@@ -4190,8 +4126,7 @@ var APITable = React.forwardRef(function (_ref, ref) {
       filters: filters
     });
   };
-  return /*#__PURE__*/React__default.createElement(Root, null, /*#__PURE__*/React__default.createElement(PaperContainer, props, /*#__PURE__*/React__default.createElement(TableStyledContainer, _extends({
+  return /*#__PURE__*/React__default.createElement(Root, null, /*#__PURE__*/React__default.createElement(PaperContainer, props, props.tableHeaderContent, /*#__PURE__*/React__default.createElement(TableStyledContainer, _extends({
     sx: {
       maxHeight: 600
     }
@@ -4202,8 +4137,10 @@ var APITable = React.forwardRef(function (_ref, ref) {
     return /*#__PURE__*/React__default.createElement(TableCellContainer, _extends({
       key: column.id,
       align: column.align
-    }, props), column.label);
-  }))), /*#__PURE__*/React__default.createElement(material.TableBody, null, tableData === null || tableData === void 0 ? void 0 : tableData.data.map(function (row) {
+    }, props, {
+      titleHeader: true
+    }), column.label);
+  }))), (tableData === null || tableData === void 0 ? void 0 : (_tableData$data = tableData.data) === null || _tableData$data === void 0 ? void 0 : _tableData$data.length) > 0 ? /*#__PURE__*/React__default.createElement(material.TableBody, null, tableData === null || tableData === void 0 ? void 0 : (_tableData$data2 = tableData.data) === null || _tableData$data2 === void 0 ? void 0 : _tableData$data2.map(function (row) {
     return /*#__PURE__*/React__default.createElement(material.TableRow, {
       hover: true,
       key: row === null || row === void 0 ? void 0 : row[(props === null || props === void 0 ? void 0 : props.rowKey) || 'id']
@@ -4214,7 +4151,11 @@ var APITable = React.forwardRef(function (_ref, ref) {
         align: column.align
       }, props), column.format ? column.format(value, row) : value);
     }));
-  })))), /*#__PURE__*/React__default.createElement(TablePaginationContainer, _extends({
+  })) : /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      display: 'block'
+    }
+  }, /*#__PURE__*/React__default.createElement(Loader$1, null)))), /*#__PURE__*/React__default.createElement(TablePaginationContainer, _extends({
     rowsPerPageOptions: [10, 20, 50, 100],
     component: "div",
     count: tableData === null || tableData === void 0 ? void 0 : (_tableData$pagination = tableData.pagination) === null || _tableData$pagination === void 0 ? void 0 : _tableData$pagination.total,
@@ -4224,69 +4165,76 @@ var APITable = React.forwardRef(function (_ref, ref) {
     onRowsPerPageChange: handleChangeRowsPerPage
   }, props))));
 });
-var Root = styled(material.Stack)(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteralLoose(["\n  background-color: ", " !important;\n  border-radius: 20px !important;\n  margin: 1.2rem 0;\n  box-shadow: 0px 0px 4px 0px;\n"])), function (props) {
+var Root = styled(material.Stack)(_templateObject$a || (_templateObject$a = _taggedTemplateLiteralLoose(["\n  background-color: ", " !important;\n  border-radius: 20px !important;\n  margin: 1.2rem 0;\n  box-shadow: 0px 0px 4px 0px;\n"])), function (props) {
   return props.secondaryColor;
 });
-var PaperContainer = styled(material.Paper)(_templateObject2$9 || (_templateObject2$9 = _taggedTemplateLiteralLoose(["\n  background-color: ", " !important;\n  color: ", " !important;\n  border-radius: 20px !important;\n  box-shadow: 0px 0px 4px 0px;\n"])), function (props) {
+var PaperContainer = styled(material.Paper)(_templateObject2$9 || (_templateObject2$9 = _taggedTemplateLiteralLoose(["\n  background-color: ", " !important;\n  color: ", " !important;\n  border-radius: 20px !important;\n  box-shadow: 0px 0px 4px 0px;\n  padding: 1rem;\n"])), function (props) {
   return props.secondaryColor;
 }, function (props) {
   return props.fontColor;
 });
 var TableStyledContainer = styled(material.TableContainer)(_templateObject3$9 || (_templateObject3$9 = _taggedTemplateLiteralLoose(["\n  border-radius: 20px 20px 0 0 !important;\n"])));
-var TableStyled = styled(material.Table)(_templateObject4$7 || (_templateObject4$7 = _taggedTemplateLiteralLoose([""])));
-var TableCellContainer = styled(material.TableCell)(_templateObject5$7 || (_templateObject5$7 = _taggedTemplateLiteralLoose(["\n  background-color: ", " !important;\n  color: ", " !important;\n"])), function (props) {
+var TableStyled = styled(material.Table)(_templateObject4$7 || (_templateObject4$7 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n"])));
+var TableCellContainer = styled(material.TableCell)(_templateObject5$7 || (_templateObject5$7 = _taggedTemplateLiteralLoose(["\n  font-family: Poppins !important;\n  background-color: ", " !important;\n  color: ", " !important;\n  font-weight: ", ";\n  padding: 12px !important;\n"])), function (props) {
   return props.secondaryColor;
 }, function (props) {
   return props.fontColor;
+}, function (props) {
+  return props.titleHeader && '600 !important';
 });
-var TablePaginationContainer = styled(material.TablePagination)(_templateObject6$7 || (_templateObject6$7 = _taggedTemplateLiteralLoose(["\n  background-color: ", " !important;\n  color: ", " !important;\n  border-radius: 0 0 20px 20px !important;\n"])), function (props) {
+var TablePaginationContainer = styled(material.TablePagination)(_templateObject6$7 || (_templateObject6$7 = _taggedTemplateLiteralLoose(["\n  background-color: ", " !important;\n  color: ", " !important;\n  border-radius: 0 0 20px 20px !important;\n  .MuiSelect-select,\n  p {\n    font-family: Poppins !important;\n  }\n"])), function (props) {
   return props.secondaryColor;
 }, function (props) {
   return props.fontColor;
 });
-var _templateObject$a, _templateObject2$a, _templateObject3$a, _templateObject4$8, _templateObject5$8, _templateObject6$8, _templateObject7$5, _templateObject8$2, _templateObject9$2;
+var _templateObject$b, _templateObject2$a, _templateObject3$a, _templateObject4$8, _templateObject5$8, _templateObject6$8, _templateObject7$5, _templateObject8$2, _templateObject9$2, _templateObject10$1, _templateObject11$1;
 var Dashboard = function Dashboard(_ref) {
-  var _customerData$custome, _customerData$custome2, _customerData$custome3, _customerData$custome4;
+  var _customerData$custome, _customerData$custome2, _customerData$custome3, _customerData$custome4, _customerData$custome5, _customerData$custome6, _customerData$custome7;
   var apiEndPoint = _ref.apiEndPoint,
-      token = _ref.token,
-      primaryColor = _ref.primaryColor,
-      secondaryColor = _ref.secondaryColor,
-      backgroundColor = _ref.backgroundColor,
-      fontColor = _ref.fontColor;
+    serviceApiEndPoint = _ref.serviceApiEndPoint,
+    token = _ref.token,
+    primaryColor = _ref.primaryColor,
+    secondaryColor = _ref.secondaryColor,
+    backgroundColor = _ref.backgroundColor,
+    fontColor = _ref.fontColor;
   var _useState = React.useState({}),
-      customerData = _useState[0],
-      setCustomerData = _useState[1];
+    customerData = _useState[0],
+    setCustomerData = _useState[1];
   var _useState2 = React.useState({}),
-      dashboardData = _useState2[0],
-      setDashboardData = _useState2[1];
-  var _useState3 = React.useState([null, null]);
-  var getJSONItem = erLocalStorage.getJSONItem;
-  var STORE_IDS = STORAGE_KEYS.STORE_IDS;
-  var openInvoiceData = function openInvoiceData(orderId) {};
+    dashboardData = _useState2[0],
+    setDashboardData = _useState2[1];
+  var _useState3 = React.useState({
+      open: false,
+      url: ''
+    }),
+    invoiceModal = _useState3[0],
+    setInvoiceModal = _useState3[1];
+  var defaultStoreId = (customerData === null || customerData === void 0 ? void 0 : (_customerData$custome = customerData.customerStoreDtoListt) === null || _customerData$custome === void 0 ? void 0 : (_customerData$custome2 = _customerData$custome.find(function (data) {
+    return (data === null || data === void 0 ? void 0 : data.defaultStore) === true;
+  })) === null || _customerData$custome2 === void 0 ? void 0 : _customerData$custome2.id) || 2;
+  var storeIdList = (customerData === null || customerData === void 0 ? void 0 : (_customerData$custome3 = customerData.customerStoreDtoListtt) === null || _customerData$custome3 === void 0 ? void 0 : _customerData$custome3.map(function (data) {
+    return data.id;
+  }).join(',')) || '1,2,46,47,48,49,50,51,52,53,54';
+  var openInvoiceData = function openInvoiceData(orderId) {
+    serviceApiEndPoint && setInvoiceModal({
+      open: true,
+      url: serviceApiEndPoint + "/sales-order/invoice/" + orderId + "?token=" + token + "&defaultStoreId=" + defaultStoreId + "&storeIdList=" + storeIdList
+    });
+  };
   var downloadInvoice = function downloadInvoice(orderId) {
     try {
-      var _getStoreIdsData$stor;
-      var getStoreIdsData = getJSONItem(STORE_IDS);
-      var storeIdList = (getStoreIdsData === null || getStoreIdsData === void 0 ? void 0 : (_getStoreIdsData$stor = getStoreIdsData.storeIds) === null || _getStoreIdsData$stor === void 0 ? void 0 : _getStoreIdsData$stor.map(function (data) {
-        return data.id;
-      }).join(',')) || 1;
-      var url1 = "/ecommerce/order/" + orderId + "/export/csv?storeIds=" + storeIdList;
-      return Promise.resolve(getcsvData(url1)).then(function (data) {
+      var url = "/ecommerce/order/" + orderId + "/export/csv?storeIds=" + storeIdList;
+      return Promise.resolve(getcsvData({
+        url: url,
+        apiEndPoint: apiEndPoint,
+        token: token
+      })).then(function (data) {
         if (data) {
           var blob = new Blob([data]);
-          var url = window.URL.createObjectURL(blob);
+          var url1 = window.URL.createObjectURL(blob);
           var link = document.createElement('a');
-          link.href = url;
+          link.href = url1;
           link.setAttribute('download', "invoice-" + orderId + ".xlsx");
           document.body.appendChild(link);
           link.click();
@@ -4296,7 +4244,6 @@ var Dashboard = function Dashboard(_ref) {
       return Promise.reject(e);
     }
   };
   var columns = [{
     id: 'orderId',
     label: 'Order'
@@ -4327,14 +4274,14 @@ var Dashboard = function Dashboard(_ref) {
     id: 'status',
     label: 'Status',
     format: function format(value) {
-      return /*#__PURE__*/React__default.createElement(Fragment, null, value);
+      return /*#__PURE__*/React__default.createElement("span", null, /*#__PURE__*/React__default.createElement(StatusContainer, null, value));
     }
   }, {
     id: 'trackingNumber',
     label: 'Tracking Number',
     format: function format(value, _ref2) {
       var trackingNumber = _ref2.trackingNumber,
-          trackingNumberUrl = _ref2.trackingNumberUrl;
+        trackingNumberUrl = _ref2.trackingNumberUrl;
       return /*#__PURE__*/React__default.createElement("a", {
         href: trackingNumberUrl,
         target: '_blank'
@@ -4345,27 +4292,29 @@ var Dashboard = function Dashboard(_ref) {
     label: 'Action',
     align: 'center',
     format: function format(value) {
-      return /*#__PURE__*/React__default.createElement(Fragment, null, /*#__PURE__*/React__default.createElement(material.Button, {
+      return /*#__PURE__*/React__default.createElement(Fragment, null, /*#__PURE__*/React__default.createElement(material.IconButton, {
         onClick: function onClick() {
-          return openInvoiceData();
+          return openInvoiceData(value);
         },
         style: {
-          color: primaryColor
+          color: primaryColor,
+          padding: 2
         }
       }, /*#__PURE__*/React__default.createElement(md.MdRemoveRedEye, {
         style: {
-          fontSize: '2rem'
+          fontSize: '1.6rem'
         }
-      })), /*#__PURE__*/React__default.createElement(material.Button, {
+      })), /*#__PURE__*/React__default.createElement(material.IconButton, {
         onClick: function onClick() {
           return downloadInvoice(value);
         },
         style: {
-          color: primaryColor
+          color: primaryColor,
+          padding: 2
         }
       }, /*#__PURE__*/React__default.createElement(md.MdOutlineFileDownload, {
         style: {
-          fontSize: 26
+          fontSize: '1.6rem'
         }
       })));
     }
@@ -4389,20 +4338,19 @@ var Dashboard = function Dashboard(_ref) {
             });
           });
         }, function () {});
         return _temp2 && _temp2.then ? _temp2.then(function () {}) : void 0;
       } catch (e) {
         Promise.reject(e);
       }
     })();
   }, []);
-  var totalDataSource = convertCamCaseToSnake(dashboardData);
+  var totalDataSource = convertCamCaseToSnake(dashboardData) || [];
   return /*#__PURE__*/React__default.createElement(Root$1, {
     backgroundColor: backgroundColor
   }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(TitleContainer, {
     primaryColor: primaryColor,
     backgroundColor: backgroundColor
-  }, /*#__PURE__*/React__default.createElement("span", null, "Hello!"), " ", /*#__PURE__*/React__default.createElement("b", null, customerData === null || customerData === void 0 ? void 0 : (_customerData$custome = customerData.customerDto) === null || _customerData$custome === void 0 ? void 0 : _customerData$custome.name)), /*#__PURE__*/React__default.createElement(TypographyContainer, {
+  }, /*#__PURE__*/React__default.createElement("span", null, "Hello!"), " ", /*#__PURE__*/React__default.createElement("b", null, customerData === null || customerData === void 0 ? void 0 : (_customerData$custome4 = customerData.customerDto) === null || _customerData$custome4 === void 0 ? void 0 : _customerData$custome4.name)), /*#__PURE__*/React__default.createElement(TypographyContainer, {
     variant: "h4",
     gutterBottom: true,
     backgroundColor: backgroundColor,
@@ -4428,7 +4376,7 @@ var Dashboard = function Dashboard(_ref) {
     lg: 2
   }, /*#__PURE__*/React__default.createElement(CardMediaContainer, {
     component: "img",
-    image: "/images/imgnotfound.jpeg",
+    image: "/images/userImage.png",
     alt: "image"
   })), /*#__PURE__*/React__default.createElement(material.Grid, {
     item: true,
@@ -4439,7 +4387,7 @@ var Dashboard = function Dashboard(_ref) {
     primaryColor: primaryColor,
     secondaryColor: secondaryColor,
     fontColor: fontColor
-  }, /*#__PURE__*/React__default.createElement("b", null, /*#__PURE__*/React__default.createElement("span", null, "Meet Your "), "Account Representative")), /*#__PURE__*/React__default.createElement(material.Grid, {
+  }, /*#__PURE__*/React__default.createElement("b", null, /*#__PURE__*/React__default.createElement("span", null, /*#__PURE__*/React__default.createElement("b", null, "Meet Your ")), "Account Representative")), /*#__PURE__*/React__default.createElement(material.Grid, {
     container: true,
     spacing: 4
   }, /*#__PURE__*/React__default.createElement(material.Grid, {
@@ -4461,7 +4409,7 @@ var Dashboard = function Dashboard(_ref) {
       color: primaryColor,
       marginRight: '1rem'
     }
-  }), (customerData === null || customerData === void 0 ? void 0 : (_customerData$custome2 = customerData.customerDto) === null || _customerData$custome2 === void 0 ? void 0 : _customerData$custome2.salesRepresentativeName) || 'N/A')), /*#__PURE__*/React__default.createElement(material.Grid, {
+  }), (customerData === null || customerData === void 0 ? void 0 : (_customerData$custome5 = customerData.customerDto) === null || _customerData$custome5 === void 0 ? void 0 : _customerData$custome5.salesRepresentativeName) || 'N/A')), /*#__PURE__*/React__default.createElement(material.Grid, {
     item: true,
     xs: 12,
     md: 6,
@@ -4480,7 +4428,7 @@ var Dashboard = function Dashboard(_ref) {
       color: primaryColor,
       marginRight: '1rem'
     }
-  }), (customerData === null || customerData === void 0 ? void 0 : (_customerData$custome3 = customerData.customerDto) === null || _customerData$custome3 === void 0 ? void 0 : _customerData$custome3.salesRepresentativePhone) || 'N/A')), /*#__PURE__*/React__default.createElement(material.Grid, {
+  }), (customerData === null || customerData === void 0 ? void 0 : (_customerData$custome6 = customerData.customerDto) === null || _customerData$custome6 === void 0 ? void 0 : _customerData$custome6.salesRepresentativePhone) || 'N/A')), /*#__PURE__*/React__default.createElement(material.Grid, {
     item: true,
     xs: 12,
     md: 6,
@@ -4499,12 +4447,11 @@ var Dashboard = function Dashboard(_ref) {
       color: primaryColor,
       marginRight: '1rem'
     }
-  }), (customerData === null || customerData === void 0 ? void 0 : (_customerData$custome4 = customerData.customerDto) === null || _customerData$custome4 === void 0 ? void 0 : _customerData$custome4.salesRepresentativeEmail) || 'N/A'))))))), /*#__PURE__*/React__default.createElement(TotalRoot, null, /*#__PURE__*/React__default.createElement(material.Grid, {
+  }), (customerData === null || customerData === void 0 ? void 0 : (_customerData$custome7 = customerData.customerDto) === null || _customerData$custome7 === void 0 ? void 0 : _customerData$custome7.salesRepresentativeEmail) || 'N/A'))))))), /*#__PURE__*/React__default.createElement(TotalRoot, null, /*#__PURE__*/React__default.createElement(material.Grid, {
     container: true,
     spacing: 4
   }, totalDataSource === null || totalDataSource === void 0 ? void 0 : totalDataSource.map(function (data) {
     var _data$name, _data$name2, _data$name3;
     var isAmount = (data === null || data === void 0 ? void 0 : (_data$name = data.name) === null || _data$name === void 0 ? void 0 : _data$name.indexOf('Amount')) > 1 || (data === null || data === void 0 ? void 0 : (_data$name2 = data.name) === null || _data$name2 === void 0 ? void 0 : _data$name2.indexOf('Credit')) > 1 || (data === null || data === void 0 ? void 0 : (_data$name3 = data.name) === null || _data$name3 === void 0 ? void 0 : _data$name3.indexOf('Price')) > 1;
     return /*#__PURE__*/React__default.createElement(material.Grid, {
       item: true,
@@ -4520,13 +4467,32 @@ var Dashboard = function Dashboard(_ref) {
       secondaryColor: secondaryColor,
       fontColor: fontColor
     }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("p", null, data === null || data === void 0 ? void 0 : data.name), /*#__PURE__*/React__default.createElement("h3", null, "" + (isAmount ? renderMoney(data === null || data === void 0 ? void 0 : data.value) : data === null || data === void 0 ? void 0 : data.value))), /*#__PURE__*/React__default.createElement("div", null, isAmount ? /*#__PURE__*/React__default.createElement(md.MdMonetizationOn, null) : /*#__PURE__*/React__default.createElement(gr.GrStackOverflow, null))));
-  }))), /*#__PURE__*/React__default.createElement(TableContainer, null, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(TypographyContainer, {
-    variant: "h5",
-    gutterBottom: true,
-    fontColor: fontColor,
-    backgroundColor: backgroundColor
-  }, "Recent Orders")), /*#__PURE__*/React__default.createElement(APITable, {
+  }))), /*#__PURE__*/React__default.createElement(TableContainer, null, /*#__PURE__*/React__default.createElement(InvoiceDialog, {
+    onClose: function onClose() {
+      return setInvoiceModal({
+        open: false
+      });
+    },
+    "aria-labelledby": "customized-dialog-title",
+    open: invoiceModal === null || invoiceModal === void 0 ? void 0 : invoiceModal.open,
+    maxWidth: "lg"
+  }, /*#__PURE__*/React__default.createElement(material.DialogContent, {
+    dividers: true
+  }, /*#__PURE__*/React__default.createElement("iframe", {
+    src: invoiceModal.url
+  }))), /*#__PURE__*/React__default.createElement("div", null), /*#__PURE__*/React__default.createElement(APITable, {
     cacheFilters: true,
+    tableHeaderContent: /*#__PURE__*/React__default.createElement(TypographyContainer, {
+      variant: "h5",
+      gutterBottom: true,
+      fontColor: fontColor,
+      style: {
+        fontWeight: 600,
+        color: primaryColor,
+        padding: '1rem 0',
+        margin: 0
+      }
+    }, "Recent Orders"),
     pagination: false,
     scroll: {
       x: 1000
@@ -4545,24 +4511,24 @@ var Dashboard = function Dashboard(_ref) {
     fontColor: fontColor
   })));
 };
-var Root$1 = styled.div(_templateObject$a || (_templateObject$a = _taggedTemplateLiteralLoose([""])));
-var TitleContainer = styled.h4(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteralLoose(["\n  span,\n  b {\n    color: ", ";\n    font-size: 2.5rem;\n  }\n"])), function (props) {
+var Root$1 = styled.div(_templateObject$b || (_templateObject$b = _taggedTemplateLiteralLoose([""])));
+var TitleContainer = styled.h4(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteralLoose(["\n  span,\n  b {\n    color: ", ";\n    font-size: 2.5rem;\n    font-family: Poppins;\n  }\n"])), function (props) {
   return props.primaryColor;
 });
-var MeetContainer = styled.h4(_templateObject3$a || (_templateObject3$a = _taggedTemplateLiteralLoose(["\n  margin-bottom: 1rem;\n  span {\n    color: ", ";\n    font-size: 2rem;\n  }\n  b {\n    color: ", ";\n    font-size: 2rem;\n  }\n"])), function (props) {
+var MeetContainer = styled.h4(_templateObject3$a || (_templateObject3$a = _taggedTemplateLiteralLoose(["\n  margin-bottom: 1rem;\n  font-family: Poppins;\n  span > b {\n    color: ", ";\n    font-size: 2rem;\n  }\n  b {\n    color: ", ";\n    font-size: 2rem;\n  }\n"])), function (props) {
   return props.primaryColor;
 }, function (props) {
   return props.fontColor;
 });
-var TypographyContainer = styled(material.Typography)(_templateObject4$8 || (_templateObject4$8 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  display: flex;\n  align-items: center;\n"])), function (props) {
+var TypographyContainer = styled(material.Typography)(_templateObject4$8 || (_templateObject4$8 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  display: flex;\n  align-items: center;\n  font-family: Poppins !important;\n"])), function (props) {
   return props.fontColor;
 });
 var CardMediaContainer = styled(material.CardMedia)(_templateObject5$8 || (_templateObject5$8 = _taggedTemplateLiteralLoose(["\n  border-radius: 20px;\n  max-width: 150px;\n"])));
 var CardContainer = styled(material.Stack)(_templateObject6$8 || (_templateObject6$8 = _taggedTemplateLiteralLoose(["\n  background-color: ", " !important;\n  border-radius: 20px !important;\n  margin: 1.2rem 0;\n  box-shadow: 0px 0px 4px 0px;\n"])), function (props) {
   return props.secondaryColor;
 });
-var TotalRoot = styled.div(_templateObject7$5 || (_templateObject7$5 = _taggedTemplateLiteralLoose(["\n  margin: 1.2rem 0;\n"])));
-var TotalContainer = styled(material.Stack)(_templateObject8$2 || (_templateObject8$2 = _taggedTemplateLiteralLoose(["\n  border-radius: 20px;\n  background-color: ", ";\n  padding: 1.5rem 1rem;\n  box-shadow: 0px 0px 4px 0px;\n  :hover {\n    background-color: ", ";\n    p,\n    h3,\n    svg {\n      color: #fff;\n    }\n  }\n  p {\n    font-size: 1.2rem;\n    font-weight: 600;\n    color: ", ";\n    margin-bottom: 1rem;\n  }\n  h3 {\n    font-size: 1.5rem;\n    font-weight: 600;\n    color: #746e88;\n  }\n  svg {\n    font-size: 2rem;\n    color: ", ";\n  }\n"])), function (props) {
+var TotalRoot = styled.div(_templateObject7$5 || (_templateObject7$5 = _taggedTemplateLiteralLoose(["\n  margin: 2rem 0;\n"])));
+var TotalContainer = styled(material.Stack)(_templateObject8$2 || (_templateObject8$2 = _taggedTemplateLiteralLoose(["\n  border-radius: 20px;\n  background-color: ", ";\n  padding: 1.5rem 1rem;\n  box-shadow: 0px 0px 4px 0px;\n  font-family: Poppins !important;\n  :hover {\n    background-color: ", ";\n    p,\n    h3,\n    svg {\n      color: #fff;\n    }\n  }\n  p {\n    font-size: 1.2rem;\n    font-weight: 600;\n    color: ", ";\n    margin-bottom: 1rem;\n  }\n  h3 {\n    font-size: 1.5rem;\n    font-weight: 600;\n    color: #746e88;\n  }\n  svg {\n    font-size: 2rem;\n    color: ", ";\n  }\n"])), function (props) {
   return props.secondaryColor;
 }, function (props) {
   return props.primaryColor;
@@ -4571,16 +4537,17 @@ var TotalContainer = styled(material.Stack)(_templateObject8$2 || (_templateObje
 }, function (props) {
   return props.fontColor;
 });
-var TableContainer = styled.div(_templateObject9$2 || (_templateObject9$2 = _taggedTemplateLiteralLoose(["\n  margin: 1.2rem 0;\n  border-radius: 20px;\n"])));
-var _templateObject$b;
+var StatusContainer = styled.span(_templateObject9$2 || (_templateObject9$2 = _taggedTemplateLiteralLoose(["\n  box-shadow: 0px 0px 1px 0px;\n  padding: 2px 4px;\n"])));
+var TableContainer = styled.div(_templateObject10$1 || (_templateObject10$1 = _taggedTemplateLiteralLoose(["\n  margin: 1.2rem 0;\n  border-radius: 20px;\n"])));
+var InvoiceDialog = styled(material.Dialog)(_templateObject11$1 || (_templateObject11$1 = _taggedTemplateLiteralLoose(["\n  iframe {\n    width: 900px;\n    border: none;\n    height: 600px;\n  }\n"])));
+var _templateObject$c;
 var SideMenuItemComponent = function SideMenuItemComponent(props) {
   var className = props.className,
-      onClick = props.onClick,
-      link = props.link,
-      children = props.children,
-      primaryColor = props.primaryColor;
+    onClick = props.onClick,
+    link = props.link,
+    children = props.children,
+    primaryColor = props.primaryColor;
   if (!link || typeof link !== 'string') {
     return /*#__PURE__*/React__default.createElement(material.ListItem, {
@@ -4606,29 +4573,27 @@ var SideMenuItemComponent = function SideMenuItemComponent(props) {
     to: link
   });
 };
 var SideMenuItem = function SideMenuItem(props) {
   var name = props.name,
-      link = props.link,
-      Icon = props.Icon,
-      _props$items = props.items,
-      items = _props$items === void 0 ? [] : _props$items,
-      primaryColor = props.primaryColor,
-      list = props.list;
+    link = props.link,
+    Icon = props.Icon,
+    _props$items = props.items,
+    items = _props$items === void 0 ? [] : _props$items,
+    primaryColor = props.primaryColor,
+    fontColor = props.fontColor,
+    list = props.list;
   var isExpandable = items && items.length > 0;
   var _React$useState = React__default.useState(false),
-      open = _React$useState[0],
-      setOpen = _React$useState[1];
+    open = _React$useState[0],
+    setOpen = _React$useState[1];
   function handleClick() {
     setOpen(!open);
   }
   var MenuItemRoot = /*#__PURE__*/React__default.createElement(SideMenuItemComponentContainer, {
     link: link,
     onClick: handleClick,
     primaryColor: primaryColor,
+    fontColor: fontColor,
     open: open,
     list: list
   }, !!Icon && /*#__PURE__*/React__default.createElement(ListItemIconContainer, null, /*#__PURE__*/React__default.createElement(Icon, null)), /*#__PURE__*/React__default.createElement(material.ListItemText, {
@@ -4646,26 +4611,30 @@ var SideMenuItem = function SideMenuItem(props) {
     return /*#__PURE__*/React__default.createElement(SideMenuItem, _extends({}, item, {
       key: index,
       primaryColor: primaryColor,
+      fontColor: fontColor,
       list: true
     }));
   }))) : null;
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, MenuItemRoot, MenuItemChildren);
 };
-var ListItemIconContainer = styled(material.ListItemIcon)(_templateObject$b || (_templateObject$b = _taggedTemplateLiteralLoose(["\n  color: #fff !important;\n  min-width: 40px;\n"])));
+var ListItemIconContainer = styled(material.ListItemIcon)(_templateObject$c || (_templateObject$c = _taggedTemplateLiteralLoose(["\n  min-width: 40px !important;\n"])));
 var SideMenuItemComponentContainer = styles.styled(SideMenuItemComponent)(function (_ref) {
   var primaryColor = _ref.primaryColor,
-      list = _ref.list;
+    fontColor = _ref.fontColor,
+    list = _ref.list;
   return {
-    background: list ? "rgba(" + hexToRgbA(primaryColor) + ",0.9)" : "rgba(" + hexToRgbA(primaryColor) + ")",
-    color: '#fff',
+    background: list ? "transparent" : "rgba(" + hexToRgbA(primaryColor) + ")",
+    color: list ? fontColor : '#fff',
     '& .MuiTypography-root': {
-      fontWeight: '600 '
+      fontWeight: '600 ',
+      fontFamily: 'Poppins'
     },
     '&:hover': {
       background: "rgba(" + hexToRgbA(primaryColor) + ",0.8)"
     },
     '& svg': {
-      fontSize: 22
+      fontSize: 22,
+      color: list ? fontColor : '#fff'
     }
   };
 });
@@ -4735,7 +4704,6 @@ var sideMenuItems = [{
     Icon: md.MdLibraryBooks
   }]
 }];
 var SideMenu = function SideMenu(props) {
   return /*#__PURE__*/React__default.createElement(material.List, {
     component: "nav",
@@ -4743,45 +4711,73 @@ var SideMenu = function SideMenu(props) {
   }, sideMenuItems.map(function (item, index) {
     return /*#__PURE__*/React__default.createElement(SideMenuItem, _extends({}, item, {
       key: index,
-      primaryColor: props.primaryColor
+      primaryColor: props.primaryColor,
+      fontColor: props.fontColor
     }));
   }));
 };
-var _templateObject$c, _templateObject2$b, _templateObject3$b;
-var drawerWidth = 240;
+var _templateObject$d, _templateObject2$b, _templateObject3$b;
+var drawerWidth = 280;
 var AccountDetails = function AccountDetails(_ref) {
   var _ref$apiEndPoint = _ref.apiEndPoint,
-      apiEndPoint = _ref$apiEndPoint === void 0 ? 'https://dev.salesgent.xyz/api' : _ref$apiEndPoint,
-      _ref$token = _ref.token,
-      token = _ref$token === void 0 ? 'eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJzYWxlc2dlbnRlcnBAZ21haWwuY29tIiwidGllciI6MiwidXNlclR5cGUiOiJDdXN0b21lciIsInRva2VuVHlwZSI6ImFjY2VzcyIsInN0b3JlSWQiOjIsImV4cCI6MTY2NTEyMDI3MywidXNlcklkIjoyNDU1LCJpYXQiOjE2NjUwODQyNzMsInJlc2V0UGFzc3dvcmRSZXF1aXJlZCI6ZmFsc2V9.GyaYBPaX9soFHLVPX_tSC81PhienH1qPFhfghVss91k' : _ref$token,
-      _ref$primaryColor = _ref.primaryColor,
-      primaryColor = _ref$primaryColor === void 0 ? '#BF262D' : _ref$primaryColor,
-      secondaryColor = _ref.secondaryColor,
-      backgroundColor = _ref.backgroundColor,
-      _ref$fontColor = _ref.fontColor,
-      fontColor = _ref$fontColor === void 0 ? '#000' : _ref$fontColor,
-      backgroundImage = _ref.backgroundImage;
+    apiEndPoint = _ref$apiEndPoint === void 0 ? 'https://dev.salesgent.xyz/api' : _ref$apiEndPoint,
+    _ref$token = _ref.token,
+    token = _ref$token === void 0 ? 'eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJzYWxlc2dlbnRlcnBAZ21haWwuY29tIiwidGllciI6MiwidXNlclR5cGUiOiJDdXN0b21lciIsInRva2VuVHlwZSI6ImFjY2VzcyIsInN0b3JlSWQiOjIsImV4cCI6MTY2NTQzMzY1NywidXNlcklkIjoyNDU1LCJpYXQiOjE2NjUzOTc2NTcsInJlc2V0UGFzc3dvcmRSZXF1aXJlZCI6ZmFsc2V9.R7yg7-FWMy6mvs6WmGjKFwJ6jdn8o7nEeWDIH6BfYFs' : _ref$token,
+    _ref$primaryColor = _ref.primaryColor,
+    primaryColor = _ref$primaryColor === void 0 ? '#BF262D' : _ref$primaryColor,
+    secondaryColor = _ref.secondaryColor,
+    backgroundColor = _ref.backgroundColor,
+    _ref$fontColor = _ref.fontColor,
+    fontColor = _ref$fontColor === void 0 ? '#000000D9' : _ref$fontColor,
+    backgroundImage = _ref.backgroundImage;
+  var serviceApiEndPoint = 'https://dev.salesgent.xyz/api'.replace('/api', '/services/pdf');
   var _useState = React.useState(true),
-      open = _useState[0],
-      setOpen = _useState[1];
+    open = _useState[0],
+    setOpen = _useState[1];
+  var _useState2 = React.useState(false),
+    isNightMode = _useState2[0],
+    setIsNightMode = _useState2[1];
+  var _useState3 = React.useState({
+      primaryColor: primaryColor || '#BF262D',
+      secondaryColor: secondaryColor || '#AFAEB0',
+      backgroundColor: backgroundColor || '#BCBDBF',
+      fontColor: fontColor || '#000000D9',
+      backgroundImage: backgroundImage || '/images/backgroundLight.png'
+    }),
+    colors = _useState3[0],
+    setColors = _useState3[1];
   var handleDrawerOpen = function handleDrawerOpen() {
     setOpen(function (prev) {
       return !prev;
     });
   };
+  var handleNightMode = function handleNightMode() {
+    setIsNightMode(function (prev) {
+      return !prev;
+    });
+    isNightMode ? setColors({
+      primaryColor: primaryColor || '#BF262D',
+      secondaryColor: secondaryColor || '#ACAAAE',
+      backgroundColor: backgroundColor || '#BCBDBF',
+      fontColor: fontColor || '#000000D9',
+      backgroundImage: backgroundImage || '/images/backgroundLight.png'
+    }) : setColors({
+      primaryColor: primaryColor || '#BF262D',
+      secondaryColor: secondaryColor || '#26232F',
+      backgroundColor: backgroundColor || '#1F1B1B',
+      fontColor: '#fff',
+      backgroundImage: backgroundImage || '/images/backgroundDark.png'
+    });
+  };
   return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(material.CssBaseline, null), /*#__PURE__*/React__default.createElement(Root$2, {
-    primaryColor: primaryColor,
+    primaryColor: colors.primaryColor,
     sx: {
       display: 'flex'
     },
-    backgroundImage: backgroundImage
+    backgroundImage: colors.backgroundImage
   }, /*#__PURE__*/React__default.createElement(ContainerDrawer, {
-    primaryColor: primaryColor,
+    primaryColor: colors.primaryColor,
     sx: {
       width: drawerWidth,
       flexShrink: 0,
@@ -4794,14 +4790,20 @@ var AccountDetails = function AccountDetails(_ref) {
     anchor: "left",
     open: open
   }, /*#__PURE__*/React__default.createElement(SideMenu, {
-    primaryColor: primaryColor
+    primaryColor: colors.primaryColor,
+    fontColor: colors.fontColor
   })), /*#__PURE__*/React__default.createElement(Main, {
     open: open,
-    backgroundColor: backgroundColor
+    backgroundColor: colors.backgroundColor
   }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(material.Toolbar, {
     style: {
-      padding: '0 2px',
-      minHeight: 32
+      padding: '10px 0 0 2px',
+      minHeight: 32,
+      justifyContent: 'space-between'
+    }
+  }, /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      display: 'flex'
     }
   }, /*#__PURE__*/React__default.createElement(material.IconButton, {
     color: "inherit",
@@ -4812,24 +4814,37 @@ var AccountDetails = function AccountDetails(_ref) {
       mr: 2,
       '& svg': {
         fontSize: 26,
-        color: fontColor
+        color: colors.fontColor
       }
     }
   }, open ? /*#__PURE__*/React__default.createElement(md.MdOutlineMenuOpen, null) : /*#__PURE__*/React__default.createElement(md.MdMenu, null)), /*#__PURE__*/React__default.createElement(TypographyContainer$1, {
     variant: "h6",
     noWrap: true,
     component: "div",
-    fontColor: fontColor
-  }, "Dashboard"))), /*#__PURE__*/React__default.createElement("div", null, apiEndPoint && token && /*#__PURE__*/React__default.createElement(Dashboard, {
+    fontColor: colors.fontColor
+  }, "Dashboard")), /*#__PURE__*/React__default.createElement(material.IconButton, {
+    color: "inherit",
+    "aria-label": "open drawer",
+    onClick: handleNightMode,
+    edge: "start",
+    sx: {
+      mr: 2,
+      '& svg': {
+        fontSize: 26,
+        color: colors.fontColor
+      }
+    }
+  }, isNightMode ? /*#__PURE__*/React__default.createElement(md.MdDarkMode, null) : /*#__PURE__*/React__default.createElement(md.MdOutlineDarkMode, null)))), /*#__PURE__*/React__default.createElement("div", null, apiEndPoint && token && /*#__PURE__*/React__default.createElement(Dashboard, {
     apiEndPoint: apiEndPoint,
+    serviceApiEndPoint: serviceApiEndPoint,
     token: token,
-    primaryColor: primaryColor,
-    secondaryColor: secondaryColor,
-    backgroundColor: backgroundColor,
-    fontColor: fontColor
+    primaryColor: colors.primaryColor,
+    secondaryColor: colors.secondaryColor,
+    backgroundColor: colors.backgroundColor,
+    fontColor: colors.fontColor
   }))))));
 };
-var Root$2 = styled(material.Box)(_templateObject$c || (_templateObject$c = _taggedTemplateLiteralLoose(["\n  background-image: url(", ");\n  background-position: center;\n  background-repeat: no-repeat;\n  background-size: cover;\n  padding: 2rem;\n"])), function (props) {
+var Root$2 = styled(material.Box)(_templateObject$d || (_templateObject$d = _taggedTemplateLiteralLoose(["\n  background-image: url(", ");\n  background-position: center;\n  background-repeat: no-repeat;\n  background-size: cover;\n  padding: 2rem;\n"])), function (props) {
   return props.backgroundImage;
 });
 var Main = styles.styled('main', {
@@ -4838,8 +4853,8 @@ var Main = styles.styled('main', {
   }
 })(function (_ref2) {
   var theme = _ref2.theme,
-      open = _ref2.open,
-      backgroundColor = _ref2.backgroundColor;
+    open = _ref2.open,
+    backgroundColor = _ref2.backgroundColor;
   return _extends({
     flexGrow: 1,
     padding: "0 " + theme.spacing(3),
@@ -4859,15 +4874,14 @@ var Main = styles.styled('main', {
     borderRadius: 25
   });
 });
-var ContainerDrawer = styled(material.Drawer)(_templateObject2$b || (_templateObject2$b = _taggedTemplateLiteralLoose(["\n  height: 100%;\n  margin-right: ", ";\n  .MuiDrawer-paper {\n    position: relative;\n    width: 240px;\n    z-index: 1;\n    overflow: hidden;\n    border-top-right-radius: 20px;\n  }\n"])), function (props) {
+var ContainerDrawer = styled(material.Drawer)(_templateObject2$b || (_templateObject2$b = _taggedTemplateLiteralLoose(["\n  height: 100%;\n  margin-right: ", ";\n  .MuiDrawer-paper {\n    position: relative;\n    width: 280px;\n    z-index: 1;\n    overflow: hidden;\n    border-top-right-radius: 20px;\n    background: transparent;\n  }\n"])), function (props) {
   return props.open && '2rem';
 });
-var TypographyContainer$1 = styled(material.Typography)(_templateObject3$b || (_templateObject3$b = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  display: flex;\n  align-items: center;\n"])), function (props) {
+var TypographyContainer$1 = styled(material.Typography)(_templateObject3$b || (_templateObject3$b = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  display: flex;\n  align-items: center;\n  font-family: Poppins !important;\n"])), function (props) {
   return props.fontColor;
 });
 var Breakpoint = function Breakpoint() {};
 Breakpoint.xs = 'xs';
 Breakpoint.sm = 'sm';
 Breakpoint.md = 'md';
@@ -4876,7 +4890,6 @@ Breakpoint.xl = 'xl';
 Breakpoint.xxl = 'xxl';
 var Variant = function Variant() {};
 Variant.ONE = 'one';
 Variant.TWO = 'two';
 Variant.THREE = 'three';
@@ -4885,11 +4898,9 @@ function debounce(func, wait, immediate) {
   var timeout;
   return function () {
     var _this = this;
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
     clearTimeout(timeout);
     timeout = setTimeout(function () {
       timeout = null;
@@ -4901,14 +4912,12 @@ function debounce(func, wait, immediate) {
 function useWindowSize() {
   var isWindow = typeof window !== 'undefined';
   var _useState = React.useState({
-    width: isWindow ? window.innerWidth : 1200,
-    height: isWindow ? window.innerHeight : 800
-  }),
-      windowSize = _useState[0],
-      setWindowSize = _useState[1];
+      width: isWindow ? window.innerWidth : 1200,
+      height: isWindow ? window.innerHeight : 800
+    }),
+    windowSize = _useState[0],
+    setWindowSize = _useState[1];
   React.useEffect(function () {
     var onWindowResize = function onWindowResize() {
       setWindowSize({
@@ -4916,7 +4925,6 @@ function useWindowSize() {
         height: window.innerHeight
       });
     };
     var onResize = debounce(onWindowResize, 100);
     window.addEventListener('resize', onResize);
     onWindowResize();
@@ -4930,41 +4938,31 @@ function useWindowSize() {
 var getBreakpoint = function getBreakpoint(_ref) {
   var screen = _ref.width;
   var breakpoint = '';
   if (screen <= 320) {
     breakpoint = Breakpoint.xs;
   }
   if (screen >= 375) {
     breakpoint = Breakpoint.sm;
   }
   if (screen >= 768) {
     breakpoint = Breakpoint.md;
   }
   if (screen >= 992) {
     breakpoint = Breakpoint.lg;
   }
   if (screen >= 1200) {
     breakpoint = Breakpoint.xl;
   }
   if (screen >= 1600) {
     breakpoint = Breakpoint.xxl;
   }
   return breakpoint;
 };
 function useGridSize() {
   var windowSize = useWindowSize();
   var _useState = React.useState(Breakpoint.md),
-      layout = _useState[0],
-      setLayout = _useState[1];
+    layout = _useState[0],
+    setLayout = _useState[1];
   React.useEffect(function () {
     setLayout(getBreakpoint(windowSize));
   }, [windowSize]);