@salesgenterp/ui-components 0.4.22 → 0.4.24

package/dist/index.js

@@ -1,8 +1,8 @@
 function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
 var material = require('@mui/material');
-var React$1 = require('react');
-var React$1__default = _interopDefault(React$1);
+var React = require('react');
+var React__default = _interopDefault(React);
 var gr = require('react-icons/gr');
 require('react-icons/gi');
 var bs = require('react-icons/bs');
@@ -19,10 +19,10 @@ var TableSortLabel = _interopDefault(require('@mui/material/TableSortLabel'));
 var bi = require('react-icons/bi');
 var cg = require('react-icons/cg');
 var md = require('react-icons/md');
-var io5 = require('react-icons/io5');
 var reactHookForm = require('react-hook-form');
 var hi = require('react-icons/hi');
 var fi = require('react-icons/fi');
+var io5 = require('react-icons/io5');
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -92,49 +92,49 @@ var CartDrawerProductCard = function CartDrawerProductCard(_ref) {
       loading = _ref.loading;
   var imgnotfoundUrlcommon = '/images/imgnotfound.jpeg';
   if (imgnotfoundUrl && imgnotfoundUrl !== 'null') imgnotfoundUrlcommon = imgnotfoundUrl;
-  return /*#__PURE__*/React$1__default.createElement(CartDrawerProduct, {
+  return /*#__PURE__*/React__default.createElement(CartDrawerProduct, {
     color: color
-  }, /*#__PURE__*/React$1__default.createElement("img", {
+  }, /*#__PURE__*/React__default.createElement("img", {
     src: product.imageUrl && product.imageUrl !== 'null' ? product.imageUrl : imgnotfoundUrlcommon,
     alt: 'no product image available'
-  }), /*#__PURE__*/React$1__default.createElement(material.Stack, {
+  }), /*#__PURE__*/React__default.createElement(material.Stack, {
     flexDirection: "column",
     justifyContent: "space-between",
     alignItems: "flex-start",
     className: "middleSection"
-  }, /*#__PURE__*/React$1__default.createElement(material.Tooltip, {
+  }, /*#__PURE__*/React__default.createElement(material.Tooltip, {
     title: product === null || product === void 0 ? void 0 : product.productName,
     placement: "top",
     arrow: true
-  }, /*#__PURE__*/React$1__default.createElement("h6", {
+  }, /*#__PURE__*/React__default.createElement("h6", {
     className: "name",
     onClick: function onClick() {
       return handleRedirect(product);
     }
-  }, product === null || product === void 0 ? void 0 : product.productName)), /*#__PURE__*/React$1__default.createElement("h6", null, (product === null || product === void 0 ? void 0 : product.standardPrice) === (product === null || product === void 0 ? void 0 : product.cartStandardPrice) ? "$" + (product === null || product === void 0 ? void 0 : product.standardPrice) : /*#__PURE__*/React$1__default.createElement(React$1__default.Fragment, null, /*#__PURE__*/React$1__default.createElement("span", null, "$", product === null || product === void 0 ? void 0 : (_product$cartStandard = product.cartStandardPrice) === null || _product$cartStandard === void 0 ? void 0 : _product$cartStandard.toFixed(2)), "$", product === null || product === void 0 ? void 0 : (_product$standardPric = product.standardPrice) === null || _product$standardPric === void 0 ? void 0 : _product$standardPric.toFixed(2)))), /*#__PURE__*/React$1__default.createElement(material.Stack, {
+  }, product === null || product === void 0 ? void 0 : product.productName)), /*#__PURE__*/React__default.createElement("h6", null, (product === null || product === void 0 ? void 0 : product.standardPrice) === (product === null || product === void 0 ? void 0 : product.cartStandardPrice) ? "$" + (product === null || product === void 0 ? void 0 : product.standardPrice) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("span", null, "$", product === null || product === void 0 ? void 0 : (_product$cartStandard = product.cartStandardPrice) === null || _product$cartStandard === void 0 ? void 0 : _product$cartStandard.toFixed(2)), "$", product === null || product === void 0 ? void 0 : (_product$standardPric = product.standardPrice) === null || _product$standardPric === void 0 ? void 0 : _product$standardPric.toFixed(2)))), /*#__PURE__*/React__default.createElement(material.Stack, {
     flexDirection: "column",
     justifyContent: "space-between",
     alignItems: "flex-end",
     className: "endSection"
-  }, /*#__PURE__*/React$1__default.createElement(ri.RiDeleteBin5Line, {
+  }, /*#__PURE__*/React__default.createElement(ri.RiDeleteBin5Line, {
     className: "icon",
     onClick: function onClick() {
       if (loading) return;
       handleRemoveProduct(product);
     }
-  }), /*#__PURE__*/React$1__default.createElement(CartDrawerQtBox, null, /*#__PURE__*/React$1__default.createElement("span", {
+  }), /*#__PURE__*/React__default.createElement(CartDrawerQtBox, null, /*#__PURE__*/React__default.createElement("span", {
     onClick: function onClick() {
       if (loading) return;
       handleIncrementDecrement('decrement', product);
     }
-  }, ' ', /*#__PURE__*/React$1__default.createElement(ai.AiOutlineMinus, null)), ' ', /*#__PURE__*/React$1__default.createElement("span", {
+  }, ' ', /*#__PURE__*/React__default.createElement(ai.AiOutlineMinus, null)), ' ', /*#__PURE__*/React__default.createElement("span", {
     className: 'qt'
-  }, product === null || product === void 0 ? void 0 : product.quantity), /*#__PURE__*/React$1__default.createElement("span", {
+  }, product === null || product === void 0 ? void 0 : product.quantity), /*#__PURE__*/React__default.createElement("span", {
     onClick: function onClick() {
       if (loading) return;
       handleIncrementDecrement('increment', product);
     }
-  }, /*#__PURE__*/React$1__default.createElement(ai.AiOutlinePlus, null)))));
+  }, /*#__PURE__*/React__default.createElement(ai.AiOutlinePlus, null)))));
 };
 
 var CartDrawer = function CartDrawer(_ref) {
@@ -149,19 +149,19 @@ var CartDrawer = function CartDrawer(_ref) {
       handleClose = _ref.handleClose,
       loading = _ref.loading,
       imgnotfoundUrl = _ref.imgnotfoundUrl;
-  return /*#__PURE__*/React$1__default.createElement(React$1__default.Fragment, null, /*#__PURE__*/React$1__default.createElement(CartDrawerContainer, {
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(CartDrawerContainer, {
     maxWidth: maxWidth
-  }, /*#__PURE__*/React$1__default.createElement(CartDrawerBar, null, /*#__PURE__*/React$1__default.createElement("h2", null, "Your Cart"), /*#__PURE__*/React$1__default.createElement(gr.GrClose, {
+  }, /*#__PURE__*/React__default.createElement(CartDrawerBar, null, /*#__PURE__*/React__default.createElement("h2", null, "Your Cart"), /*#__PURE__*/React__default.createElement(gr.GrClose, {
     className: "icon",
     onClick: function onClick() {
       handleClose();
     }
-  })), cartData && (cartData === null || cartData === void 0 ? void 0 : cartData.totalCartQuantity) > 0 ? /*#__PURE__*/React$1__default.createElement(CartDrawerProductContainer, {
+  })), cartData && (cartData === null || cartData === void 0 ? void 0 : cartData.totalCartQuantity) > 0 ? /*#__PURE__*/React__default.createElement(CartDrawerProductContainer, {
     opacity: loading ? '.4' : '1'
   }, cartData === null || cartData === void 0 ? void 0 : (_cartData$cartLineIte = cartData.cartLineItemDtoList) === null || _cartData$cartLineIte === void 0 ? void 0 : _cartData$cartLineIte.map(function (product, i) {
-    return /*#__PURE__*/React$1__default.createElement(React$1__default.Fragment, null, loading && /*#__PURE__*/React$1__default.createElement(CartDrawerLoader, null, /*#__PURE__*/React$1__default.createElement(reactSpinners.PuffLoader, {
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, loading && /*#__PURE__*/React__default.createElement(CartDrawerLoader, null, /*#__PURE__*/React__default.createElement(reactSpinners.PuffLoader, {
       color: "black"
-    })), /*#__PURE__*/React$1__default.createElement(CartDrawerProductCard, {
+    })), /*#__PURE__*/React__default.createElement(CartDrawerProductCard, {
       product: product,
       handleRedirect: handleRedirect,
       handleIncrementDecrement: handleIncrementDecrement,
@@ -171,21 +171,21 @@ var CartDrawer = function CartDrawer(_ref) {
       imgnotfoundUrl: imgnotfoundUrl,
       loading: loading
     }));
-  })) : /*#__PURE__*/React$1__default.createElement(CartDrawerEmptyCart, {
+  })) : /*#__PURE__*/React__default.createElement(CartDrawerEmptyCart, {
     color: color
-  }, /*#__PURE__*/React$1__default.createElement(bs.BsCartX, {
+  }, /*#__PURE__*/React__default.createElement(bs.BsCartX, {
     className: "icon"
-  }), /*#__PURE__*/React$1__default.createElement("h6", null, "OOps!"), /*#__PURE__*/React$1__default.createElement("p", null, "your cart is empty")), cartData && (cartData === null || cartData === void 0 ? void 0 : cartData.totalCartQuantity) > 0 && /*#__PURE__*/React$1__default.createElement(CartDrawerBottomSection, null, /*#__PURE__*/React$1__default.createElement(material.Stack, {
+  }), /*#__PURE__*/React__default.createElement("h6", null, "OOps!"), /*#__PURE__*/React__default.createElement("p", null, "your cart is empty")), cartData && (cartData === null || cartData === void 0 ? void 0 : cartData.totalCartQuantity) > 0 && /*#__PURE__*/React__default.createElement(CartDrawerBottomSection, null, /*#__PURE__*/React__default.createElement(material.Stack, {
     flexDirection: "row",
     justifyContent: "space-between",
     alignItems: "center",
     className: "row"
-  }, /*#__PURE__*/React$1__default.createElement("h5", null, "Subtotal", /*#__PURE__*/React$1__default.createElement("span", null, "(", cartData === null || cartData === void 0 ? void 0 : cartData.totalCartQuantity, " items)")), /*#__PURE__*/React$1__default.createElement("h5", null, "$", cartData === null || cartData === void 0 ? void 0 : (_cartData$totalCartPr = cartData.totalCartPrice) === null || _cartData$totalCartPr === void 0 ? void 0 : _cartData$totalCartPr.toFixed(2))), /*#__PURE__*/React$1__default.createElement(CartDrawerOutlinedButton, {
+  }, /*#__PURE__*/React__default.createElement("h5", null, "Subtotal", /*#__PURE__*/React__default.createElement("span", null, "(", cartData === null || cartData === void 0 ? void 0 : cartData.totalCartQuantity, " items)")), /*#__PURE__*/React__default.createElement("h5", null, "$", cartData === null || cartData === void 0 ? void 0 : (_cartData$totalCartPr = cartData.totalCartPrice) === null || _cartData$totalCartPr === void 0 ? void 0 : _cartData$totalCartPr.toFixed(2))), /*#__PURE__*/React__default.createElement(CartDrawerOutlinedButton, {
     color: color,
     onClick: function onClick() {
       return handleRedirect('cart');
     }
-  }, "view cart"), /*#__PURE__*/React$1__default.createElement(CartDrawerFilledButton, {
+  }, "view cart"), /*#__PURE__*/React__default.createElement(CartDrawerFilledButton, {
     color: color,
     onClick: function onClick() {
       return handleRedirect('checkout');
@@ -1364,7 +1364,7 @@ var CardRow = function CardRow(_ref) {
       styles = _ref.styles;
   var imgnotfoundUrlcommon = '/images/imgnotfound.jpeg';
   if (imgnotfoundUrl && imgnotfoundUrl !== 'null') imgnotfoundUrlcommon = imgnotfoundUrl;
-  return /*#__PURE__*/React$1__default.createElement(CartTableRow, {
+  return /*#__PURE__*/React__default.createElement(CartTableRow, {
     onClick: function onClick(event) {
       return handleClick(event, row);
     },
@@ -1373,74 +1373,74 @@ var CardRow = function CardRow(_ref) {
     tabIndex: -1,
     key: row.ProductId,
     size: styles === null || styles === void 0 ? void 0 : (_styles$price = styles.price) === null || _styles$price === void 0 ? void 0 : _styles$price.size
-  }, /*#__PURE__*/React$1__default.createElement(CartTableCell$1, {
+  }, /*#__PURE__*/React__default.createElement(CartTableCell$1, {
     padding: "checkbox"
-  }, /*#__PURE__*/React$1__default.createElement("span", {
+  }, /*#__PURE__*/React__default.createElement("span", {
     className: "borderLeft",
     style: {
       background: styles === null || styles === void 0 ? void 0 : (_styles$Btn = styles.Btn) === null || _styles$Btn === void 0 ? void 0 : _styles$Btn.background
     }
-  }), /*#__PURE__*/React$1__default.createElement(material.Checkbox, {
+  }), /*#__PURE__*/React__default.createElement(material.Checkbox, {
     color: "primary",
     checked: isItemSelected,
     inputProps: {
       'aria-labelledby': 'product'
     },
     className: "cartCheckBox"
-  })), /*#__PURE__*/React$1__default.createElement(CartTableCell$1, {
+  })), /*#__PURE__*/React__default.createElement(CartTableCell$1, {
     className: "CartnoPaddingSm"
-  }, /*#__PURE__*/React$1__default.createElement(ProductImage, {
+  }, /*#__PURE__*/React__default.createElement(ProductImage, {
     src: row.imageUrl && row.imageUrl !== 'null' ? row.imageUrl : imgnotfoundUrlcommon,
     alt: 'no product image available',
     width: (imgSize === null || imgSize === void 0 ? void 0 : imgSize.width) || 50,
     height: (imgSize === null || imgSize === void 0 ? void 0 : imgSize.height) || 58
-  })), /*#__PURE__*/React$1__default.createElement(CartTableCell$1, {
+  })), /*#__PURE__*/React__default.createElement(CartTableCell$1, {
     component: "th",
     id: row === null || row === void 0 ? void 0 : row.labelId,
     scope: "row",
     padding: "none"
-  }, /*#__PURE__*/React$1__default.createElement(ProductName, {
+  }, /*#__PURE__*/React__default.createElement(ProductName, {
     maxHeight: styles.name && (styles === null || styles === void 0 ? void 0 : (_styles$name = styles.name) === null || _styles$name === void 0 ? void 0 : _styles$name.lines) * 1.7,
     size: styles === null || styles === void 0 ? void 0 : (_styles$name2 = styles.name) === null || _styles$name2 === void 0 ? void 0 : _styles$name2.size
-  }, row.productName), row.quantity > row.availableQuantity && /*#__PURE__*/React$1__default.createElement("p", {
+  }, row.productName), row.quantity > row.availableQuantity && /*#__PURE__*/React__default.createElement("p", {
     className: "outOfStock"
-  }, "out of stock")), /*#__PURE__*/React$1__default.createElement(CartTableCell$1, {
+  }, "out of stock")), /*#__PURE__*/React__default.createElement(CartTableCell$1, {
     align: "center",
     className: "CartnoBelowSm"
-  }, /*#__PURE__*/React$1__default.createElement("p", {
+  }, /*#__PURE__*/React__default.createElement("p", {
     className: "price"
-  }, "$", row === null || row === void 0 ? void 0 : (_row$standardPrice = row.standardPrice) === null || _row$standardPrice === void 0 ? void 0 : _row$standardPrice.toFixed(2))), /*#__PURE__*/React$1__default.createElement(CartTableCell$1, {
+  }, "$", row === null || row === void 0 ? void 0 : (_row$standardPrice = row.standardPrice) === null || _row$standardPrice === void 0 ? void 0 : _row$standardPrice.toFixed(2))), /*#__PURE__*/React__default.createElement(CartTableCell$1, {
     align: "center"
-  }, /*#__PURE__*/React$1__default.createElement(QuantityBox, null, /*#__PURE__*/React$1__default.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement(QuantityBox, null, /*#__PURE__*/React__default.createElement("div", {
     onClick: function onClick(e) {
       e.stopPropagation();
       if (loading) return;
       handleIncrementDecrement('decrement', row);
     }
-  }, /*#__PURE__*/React$1__default.createElement(ai.AiOutlineMinus, null)), /*#__PURE__*/React$1__default.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement(ai.AiOutlineMinus, null)), /*#__PURE__*/React__default.createElement("div", {
     className: "price"
-  }, /*#__PURE__*/React$1__default.createElement("p", null, row === null || row === void 0 ? void 0 : row.quantity)), /*#__PURE__*/React$1__default.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("p", null, row === null || row === void 0 ? void 0 : row.quantity)), /*#__PURE__*/React__default.createElement("div", {
     className: "add",
     onClick: function onClick(e) {
       e.stopPropagation();
       if (loading) return;
       handleIncrementDecrement('increment', row);
     }
-  }, /*#__PURE__*/React$1__default.createElement(ai.AiOutlinePlus, null)))), /*#__PURE__*/React$1__default.createElement(CartTableCell$1, {
+  }, /*#__PURE__*/React__default.createElement(ai.AiOutlinePlus, null)))), /*#__PURE__*/React__default.createElement(CartTableCell$1, {
     alig: "center",
     className: "CartnoPaddingSm"
-  }, /*#__PURE__*/React$1__default.createElement("p", {
+  }, /*#__PURE__*/React__default.createElement("p", {
     className: "price"
-  }, "$", (_row$subtotal = row.subtotal) === null || _row$subtotal === void 0 ? void 0 : _row$subtotal.toFixed(2))), /*#__PURE__*/React$1__default.createElement(CartTableCell$1, {
+  }, "$", (_row$subtotal = row.subtotal) === null || _row$subtotal === void 0 ? void 0 : _row$subtotal.toFixed(2))), /*#__PURE__*/React__default.createElement(CartTableCell$1, {
     alig: "center",
     className: "CartnoBelowSm"
-  }, /*#__PURE__*/React$1__default.createElement(DeleteBtn, {
+  }, /*#__PURE__*/React__default.createElement(DeleteBtn, {
     onClick: function onClick(e) {
       e.stopPropagation();
       if (loading) return;
       handleRemoveProduct(row);
     }
-  }, /*#__PURE__*/React$1__default.createElement(ai.AiOutlineClose, null))));
+  }, /*#__PURE__*/React__default.createElement(ai.AiOutlineClose, null))));
 };
 
 var headCells = [{
@@ -1498,15 +1498,15 @@ function EnhancedTableHead(props) {
     };
   };
 
-  return /*#__PURE__*/React$1.createElement(TableHead, {
+  return /*#__PURE__*/React.createElement(TableHead, {
     className: "CartnoBelowSm"
-  }, /*#__PURE__*/React$1.createElement(TableRow, null, /*#__PURE__*/React$1.createElement(CartTableCell, {
+  }, /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(CartTableCell, {
     sx: {
       zIndex: '3 !important'
     },
     padding: "checkbox",
     bg: styles.bg
-  }, /*#__PURE__*/React$1.createElement(material.Checkbox, {
+  }, /*#__PURE__*/React.createElement(material.Checkbox, {
     color: "primary",
     indeterminate: numSelected > 0 && numSelected < rowCount,
     checked: rowCount > 0 && numSelected === rowCount,
@@ -1515,7 +1515,7 @@ function EnhancedTableHead(props) {
       'aria-label': 'select all products'
     }
   })), headCells.map(function (headCell) {
-    return /*#__PURE__*/React$1.createElement(CartTableCell, {
+    return /*#__PURE__*/React.createElement(CartTableCell, {
       key: headCell.id,
       align: headCell.numeric ? 'center' : 'left',
       padding: headCell.disablePadding ? 'none' : 'normal',
@@ -1526,7 +1526,7 @@ function EnhancedTableHead(props) {
       },
       className: (headCell === null || headCell === void 0 ? void 0 : headCell.noBelowSm) && 'CartnoBelowSm',
       bg: styles.bg
-    }, headCell.filter ? /*#__PURE__*/React$1.createElement(TableSortLabel, {
+    }, headCell.filter ? /*#__PURE__*/React.createElement(TableSortLabel, {
       active: orderBy === headCell.id,
       direction: orderBy === headCell.id ? order : 'asc',
       onClick: createSortHandler(headCell.id)
@@ -1558,19 +1558,19 @@ function EnhancedTable(_ref) {
     });
   });
 
-  var _React$useState = React$1.useState('asc'),
+  var _React$useState = React.useState('asc'),
       order = _React$useState[0],
       setOrder = _React$useState[1];
 
-  var _React$useState2 = React$1.useState('calories'),
+  var _React$useState2 = React.useState('calories'),
       orderBy = _React$useState2[0],
       setOrderBy = _React$useState2[1];
 
-  var _React$useState3 = React$1.useState([]),
+  var _React$useState3 = React.useState([]),
       selected = _React$useState3[0],
       setSelected = _React$useState3[1];
 
-  var _React$useState4 = React$1.useState(cartList),
+  var _React$useState4 = React.useState(cartList),
       cartArray = _React$useState4[0],
       setCartArray = _React$useState4[1];
 
@@ -1591,7 +1591,7 @@ function EnhancedTable(_ref) {
     return setCartArray(newArray);
   };
 
-  React$1.useEffect(function () {
+  React.useEffect(function () {
     Sort();
   }, [order, orderBy]);
 
@@ -1634,27 +1634,27 @@ function EnhancedTable(_ref) {
     return selected.includes(name);
   };
 
-  React$1.useEffect(function () {
+  React.useEffect(function () {
     setCartArray(cartList);
   }, [cartData]);
   console.log(selected);
-  return /*#__PURE__*/React$1.createElement(CartPageBox, null, loading && /*#__PURE__*/React$1.createElement(Loader, null, /*#__PURE__*/React$1.createElement(reactSpinners.BounceLoader, {
+  return /*#__PURE__*/React.createElement(CartPageBox, null, loading && /*#__PURE__*/React.createElement(Loader, null, /*#__PURE__*/React.createElement(reactSpinners.BounceLoader, {
     size: 40,
     color: styles.Btn.background,
     loading: true
-  })), /*#__PURE__*/React$1.createElement(Box, {
+  })), /*#__PURE__*/React.createElement(Box, {
     sx: {
       width: '100%',
       mb: 2
     }
-  }, /*#__PURE__*/React$1.createElement(CartTableContainer, {
+  }, /*#__PURE__*/React.createElement(CartTableContainer, {
     bg: styles === null || styles === void 0 ? void 0 : (_styles$scroll = styles.scroll) === null || _styles$scroll === void 0 ? void 0 : _styles$scroll.bg,
     color: styles === null || styles === void 0 ? void 0 : (_styles$scroll2 = styles.scroll) === null || _styles$scroll2 === void 0 ? void 0 : _styles$scroll2.background
-  }, /*#__PURE__*/React$1.createElement(Table, {
+  }, /*#__PURE__*/React.createElement(Table, {
     "aria-labelledby": "tableTitle",
     size: 'small',
     stickyHeader: true
-  }, /*#__PURE__*/React$1.createElement(EnhancedTableHead, {
+  }, /*#__PURE__*/React.createElement(EnhancedTableHead, {
     numSelected: selected.length,
     order: order,
     orderBy: orderBy,
@@ -1662,9 +1662,9 @@ function EnhancedTable(_ref) {
     onRequestSort: handleRequestSort,
     rowCount: cartArray === null || cartArray === void 0 ? void 0 : cartArray.length,
     styles: styles
-  }), /*#__PURE__*/React$1.createElement(TableBody, null, cartArray === null || cartArray === void 0 ? void 0 : cartArray.map(function (row, index) {
+  }), /*#__PURE__*/React.createElement(TableBody, null, cartArray === null || cartArray === void 0 ? void 0 : cartArray.map(function (row, index) {
     var isItemSelected = isSelected(row);
-    return /*#__PURE__*/React$1.createElement(CardRow, {
+    return /*#__PURE__*/React.createElement(CardRow, {
       row: row,
       isItemSelected: isItemSelected,
       handleClick: handleClick,
@@ -1675,7 +1675,7 @@ function EnhancedTable(_ref) {
       handleIncrementDecrement: handleIncrementDecrement,
       handleRemoveProduct: handleRemoveProduct
     });
-  }))))), /*#__PURE__*/React$1.createElement(CartButtonsRow, null, /*#__PURE__*/React$1.createElement("button", {
+  }))))), /*#__PURE__*/React.createElement(CartButtonsRow, null, /*#__PURE__*/React.createElement("button", {
     onClick: function onClick() {
       new Promise(function (resolve, reject) {
         if (loading) return;
@@ -1684,7 +1684,7 @@ function EnhancedTable(_ref) {
       });
       setSelected([]);
     }
-  }, "remove selected"), /*#__PURE__*/React$1.createElement("button", null, "updated cart")));
+  }, "remove selected"), /*#__PURE__*/React.createElement("button", null, "updated cart")));
 }
 
 var _templateObject$4, _templateObject2$4, _templateObject3$4, _templateObject4$3, _templateObject5$3, _templateObject6$3, _templateObject7$2;
@@ -1711,37 +1711,37 @@ var CartPageProductCard = function CartPageProductCard(_ref) {
       imgSize = _ref.imgSize;
   var imgnotfoundUrlcommon = '/images/imgnotfound.jpeg';
   if (imgnotfoundUrl && imgnotfoundUrl !== 'null') imgnotfoundUrlcommon = imgnotfoundUrl;
-  return /*#__PURE__*/React$1__default.createElement(CartPageCard, null, /*#__PURE__*/React$1__default.createElement(CartPageImg, {
+  return /*#__PURE__*/React__default.createElement(CartPageCard, null, /*#__PURE__*/React__default.createElement(CartPageImg, {
     src: item.imageUrl && item.imageUrl !== 'null' ? item.imageUrl : imgnotfoundUrlcommon,
     alt: 'no product image available',
     width: imgSize === null || imgSize === void 0 ? void 0 : imgSize.width,
     height: imgSize === null || imgSize === void 0 ? void 0 : imgSize.height
-  }), /*#__PURE__*/React$1__default.createElement(NameAndQtBox, null, /*#__PURE__*/React$1__default.createElement(CartPageCardName, null, /*#__PURE__*/React$1__default.createElement(material.Tooltip, {
+  }), /*#__PURE__*/React__default.createElement(NameAndQtBox, null, /*#__PURE__*/React__default.createElement(CartPageCardName, null, /*#__PURE__*/React__default.createElement(material.Tooltip, {
     title: item.productName,
     placement: "top",
     arrow: true
-  }, /*#__PURE__*/React$1__default.createElement("h6", null, item.productName)), /*#__PURE__*/React$1__default.createElement("p", null, "$", (_item$standardPrice = item.standardPrice) === null || _item$standardPrice === void 0 ? void 0 : _item$standardPrice.toFixed(2))), /*#__PURE__*/React$1__default.createElement(QtAndPriceBox, null, /*#__PURE__*/React$1__default.createElement(CartPageQtBox, null, /*#__PURE__*/React$1__default.createElement("span", {
+  }, /*#__PURE__*/React__default.createElement("h6", null, item.productName)), /*#__PURE__*/React__default.createElement("p", null, "$", (_item$standardPrice = item.standardPrice) === null || _item$standardPrice === void 0 ? void 0 : _item$standardPrice.toFixed(2))), /*#__PURE__*/React__default.createElement(QtAndPriceBox, null, /*#__PURE__*/React__default.createElement(CartPageQtBox, null, /*#__PURE__*/React__default.createElement("span", {
     className: "icon",
     onClick: function onClick() {
       if (loading) return;
       handleIncrementDecrement('decrement', item);
     }
-  }, /*#__PURE__*/React$1__default.createElement(ai.AiOutlineMinus, null)), /*#__PURE__*/React$1__default.createElement("span", {
+  }, /*#__PURE__*/React__default.createElement(ai.AiOutlineMinus, null)), /*#__PURE__*/React__default.createElement("span", {
     className: "qt"
-  }, item.quantity), /*#__PURE__*/React$1__default.createElement("span", {
+  }, item.quantity), /*#__PURE__*/React__default.createElement("span", {
     className: "icon",
     onClick: function onClick() {
       if (loading) return;
       handleIncrementDecrement('increment', item);
     }
-  }, /*#__PURE__*/React$1__default.createElement(ai.AiOutlinePlus, null))), /*#__PURE__*/React$1__default.createElement("p", {
+  }, /*#__PURE__*/React__default.createElement(ai.AiOutlinePlus, null))), /*#__PURE__*/React__default.createElement("p", {
     className: "subtotal"
-  }, "subtotal: $", (item.standardPrice * item.quantity).toFixed(2)))), /*#__PURE__*/React$1__default.createElement(CloseBtn, {
+  }, "subtotal: $", (item.standardPrice * item.quantity).toFixed(2)))), /*#__PURE__*/React__default.createElement(CloseBtn, {
     onClick: function onClick() {
       if (loading) return;
       handleRemoveProduct(item);
     }
-  }, /*#__PURE__*/React$1__default.createElement(ai.AiOutlineClose, null)));
+  }, /*#__PURE__*/React__default.createElement(ai.AiOutlineClose, null)));
 };
 
 var CartPageMainRetail = function CartPageMainRetail(_ref) {
@@ -1754,16 +1754,16 @@ var CartPageMainRetail = function CartPageMainRetail(_ref) {
       handleIncrementDecrement = _ref.handleIncrementDecrement,
       handleRemoveProduct = _ref.handleRemoveProduct,
       styles = _ref.styles;
-  return /*#__PURE__*/React$1__default.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", {
     className: "scrollDiv"
-  }, /*#__PURE__*/React$1__default.createElement(CardsBox, {
+  }, /*#__PURE__*/React__default.createElement(CardsBox, {
     retail: retail
-  }, loading && /*#__PURE__*/React$1__default.createElement(Loader, null, /*#__PURE__*/React$1__default.createElement(reactSpinners.BounceLoader, {
+  }, loading && /*#__PURE__*/React__default.createElement(Loader, null, /*#__PURE__*/React__default.createElement(reactSpinners.BounceLoader, {
     size: 40,
     color: styles.Btn.background,
     loading: true
   })), cartData === null || cartData === void 0 ? void 0 : (_cartData$cartLineIte = cartData.cartLineItemDtoList) === null || _cartData$cartLineIte === void 0 ? void 0 : _cartData$cartLineIte.map(function (item) {
-    return /*#__PURE__*/React$1__default.createElement(CartPageProductCard, {
+    return /*#__PURE__*/React__default.createElement(CartPageProductCard, {
       item: item,
       loading: loading,
       imgnotfoundUrl: imgnotfoundUrl,
@@ -1838,58 +1838,58 @@ var CartSummary = function CartSummary(_ref) {
       totalCartPrice = _ref.totalCartPrice;
   var cartSummary = styles.cartSummary,
       Btn = styles.Btn;
-  return /*#__PURE__*/React$1__default.createElement(CartSummaryContainer, {
+  return /*#__PURE__*/React__default.createElement(CartSummaryContainer, {
     background: cartSummary.bg,
     color: cartSummary.color
-  }, /*#__PURE__*/React$1__default.createElement("p", null, "Cart summary"), /*#__PURE__*/React$1__default.createElement(CartSummaryHr, {
+  }, /*#__PURE__*/React__default.createElement("p", null, "Cart summary"), /*#__PURE__*/React__default.createElement(CartSummaryHr, {
     color: cartSummary.hr
-  }), /*#__PURE__*/React$1__default.createElement(CartSummaryRow, null, /*#__PURE__*/React$1__default.createElement("h6", null, "subtotal"), /*#__PURE__*/React$1__default.createElement("h5", null, "$", subtotal === null || subtotal === void 0 ? void 0 : subtotal.toFixed(2))), /*#__PURE__*/React$1__default.createElement(CartSummaryHr, {
+  }), /*#__PURE__*/React__default.createElement(CartSummaryRow, null, /*#__PURE__*/React__default.createElement("h6", null, "subtotal"), /*#__PURE__*/React__default.createElement("h5", null, "$", subtotal === null || subtotal === void 0 ? void 0 : subtotal.toFixed(2))), /*#__PURE__*/React__default.createElement(CartSummaryHr, {
     color: cartSummary.hr
-  }), /*#__PURE__*/React$1__default.createElement(CartSummaryRow, null, /*#__PURE__*/React$1__default.createElement("h6", null, "Discount"), /*#__PURE__*/React$1__default.createElement("h5", null, "$0.00")), /*#__PURE__*/React$1__default.createElement(CartSummaryHr, {
+  }), /*#__PURE__*/React__default.createElement(CartSummaryRow, null, /*#__PURE__*/React__default.createElement("h6", null, "Discount"), /*#__PURE__*/React__default.createElement("h5", null, "$0.00")), /*#__PURE__*/React__default.createElement(CartSummaryHr, {
     color: cartSummary.hr
-  }), retail && /*#__PURE__*/React$1__default.createElement(material.Stack, {
+  }), retail && /*#__PURE__*/React__default.createElement(material.Stack, {
     flexDirection: "column",
     justifyContent: "flexStart",
     sx: {
       width: '100%'
     }
-  }, /*#__PURE__*/React$1__default.createElement(CartSummaryRow, {
+  }, /*#__PURE__*/React__default.createElement(CartSummaryRow, {
     justify: "flex-start"
-  }, /*#__PURE__*/React$1__default.createElement("h6", null, "shipping")), shippingData && shippingData.map(function (li, i) {
+  }, /*#__PURE__*/React__default.createElement("h6", null, "shipping")), shippingData && shippingData.map(function (li, i) {
     var _li$amount;
 
-    return /*#__PURE__*/React$1__default.createElement(CartSummaryCheckBoxRow, {
+    return /*#__PURE__*/React__default.createElement(CartSummaryCheckBoxRow, {
       key: i,
       selected: li.id === selectedShipping.id,
       onClick: function onClick() {
         setShipping(li);
       },
       background: cartSummary.color
-    }, /*#__PURE__*/React$1__default.createElement("span", {
+    }, /*#__PURE__*/React__default.createElement("span", {
       className: "checkBox"
-    }), /*#__PURE__*/React$1__default.createElement("p", null, li.name, ' ', li.amount && li.amount > 0 && /*#__PURE__*/React$1__default.createElement("span", null, ": $", (_li$amount = li.amount) === null || _li$amount === void 0 ? void 0 : _li$amount.toFixed(2))));
-  }), /*#__PURE__*/React$1__default.createElement(CartSummaryCheckBoxRow, null, /*#__PURE__*/React$1__default.createElement("p", null, "Shipping options will be updated during checkout.", /*#__PURE__*/React$1__default.createElement("br", null), /*#__PURE__*/React$1__default.createElement("span", {
+    }), /*#__PURE__*/React__default.createElement("p", null, li.name, ' ', li.amount && li.amount > 0 && /*#__PURE__*/React__default.createElement("span", null, ": $", (_li$amount = li.amount) === null || _li$amount === void 0 ? void 0 : _li$amount.toFixed(2))));
+  }), /*#__PURE__*/React__default.createElement(CartSummaryCheckBoxRow, null, /*#__PURE__*/React__default.createElement("p", null, "Shipping options will be updated during checkout.", /*#__PURE__*/React__default.createElement("br", null), /*#__PURE__*/React__default.createElement("span", {
     className: "underline"
-  }, "Calculate shipping"))), /*#__PURE__*/React$1__default.createElement(CartSummaryHr, {
+  }, "Calculate shipping"))), /*#__PURE__*/React__default.createElement(CartSummaryHr, {
     color: cartSummary.hr
-  })), /*#__PURE__*/React$1__default.createElement(CartSummaryInputBox, {
+  })), /*#__PURE__*/React__default.createElement(CartSummaryInputBox, {
     paddingBottom: !retail,
     background: (_cartSummary$input = cartSummary.input) === null || _cartSummary$input === void 0 ? void 0 : _cartSummary$input.bg,
     color: (_cartSummary$input2 = cartSummary.input) === null || _cartSummary$input2 === void 0 ? void 0 : _cartSummary$input2.color,
     btn: Btn === null || Btn === void 0 ? void 0 : Btn.background,
     Btncolor: Btn === null || Btn === void 0 ? void 0 : Btn.color,
     retail: retail
-  }, /*#__PURE__*/React$1__default.createElement("input", {
+  }, /*#__PURE__*/React__default.createElement("input", {
     placeholder: "Coupon code",
     type: "email",
     required: true
-  }), /*#__PURE__*/React$1__default.createElement("button", null, "apply coupon")), /*#__PURE__*/React$1__default.createElement(CartSummaryHr, {
+  }), /*#__PURE__*/React__default.createElement("button", null, "apply coupon")), /*#__PURE__*/React__default.createElement(CartSummaryHr, {
     color: cartSummary.hr
-  }), /*#__PURE__*/React$1__default.createElement(CartSummaryRow, {
+  }), /*#__PURE__*/React__default.createElement(CartSummaryRow, {
     h5: "1.64em"
-  }, /*#__PURE__*/React$1__default.createElement("h6", null, "total"), retail ? /*#__PURE__*/React$1__default.createElement("h5", null, "$", (_ref2 = totalCartPrice + (selectedShipping === null || selectedShipping === void 0 ? void 0 : selectedShipping.amount)) === null || _ref2 === void 0 ? void 0 : _ref2.toFixed(2)) : /*#__PURE__*/React$1__default.createElement("h5", null, "$", totalCartPrice === null || totalCartPrice === void 0 ? void 0 : totalCartPrice.toFixed(2))), /*#__PURE__*/React$1__default.createElement(CartSummaryRow, {
+  }, /*#__PURE__*/React__default.createElement("h6", null, "total"), retail ? /*#__PURE__*/React__default.createElement("h5", null, "$", (_ref2 = totalCartPrice + (selectedShipping === null || selectedShipping === void 0 ? void 0 : selectedShipping.amount)) === null || _ref2 === void 0 ? void 0 : _ref2.toFixed(2)) : /*#__PURE__*/React__default.createElement("h5", null, "$", totalCartPrice === null || totalCartPrice === void 0 ? void 0 : totalCartPrice.toFixed(2))), /*#__PURE__*/React__default.createElement(CartSummaryRow, {
     justify: "center"
-  }, /*#__PURE__*/React$1__default.createElement(CartSummaryCheckoutBtn, {
+  }, /*#__PURE__*/React__default.createElement(CartSummaryCheckoutBtn, {
     retail: retail,
     onClick: function onClick() {
       if (loading) return;
@@ -1897,9 +1897,9 @@ var CartSummary = function CartSummary(_ref) {
     },
     background: Btn.background,
     color: Btn.color
-  }, "proceed to checkokut")), /*#__PURE__*/React$1__default.createElement(CartSummaryRow, {
+  }, "proceed to checkokut")), /*#__PURE__*/React__default.createElement(CartSummaryRow, {
     justify: "center"
-  }, /*#__PURE__*/React$1__default.createElement("span", {
+  }, /*#__PURE__*/React__default.createElement("span", {
     className: "continueShopping",
     onClick: function onClick() {
       if (loading) return;
@@ -1921,13 +1921,13 @@ var CartPageComponent = function CartPageComponent(_ref) {
       loading = _ref.loading,
       imgnotfoundUrl = _ref.imgnotfoundUrl,
       styles = _ref.styles;
-  return /*#__PURE__*/React$1__default.createElement(CartPageSection, {
+  return /*#__PURE__*/React__default.createElement(CartPageSection, {
     bg: styles.bg,
     retail: retail
-  }, /*#__PURE__*/React$1__default.createElement(CartPageContainer, {
+  }, /*#__PURE__*/React__default.createElement(CartPageContainer, {
     retail: retail,
     loading: loading
-  }, retail ? /*#__PURE__*/React$1__default.createElement(CartPageMainRetail, {
+  }, retail ? /*#__PURE__*/React__default.createElement(CartPageMainRetail, {
     retail: retail,
     cartData: cartData,
     loading: loading,
@@ -1935,7 +1935,7 @@ var CartPageComponent = function CartPageComponent(_ref) {
     styles: styles,
     handleIncrementDecrement: handleIncrementDecrement,
     handleRemoveProduct: handleRemoveProduct
-  }) : /*#__PURE__*/React$1__default.createElement(EnhancedTable, {
+  }) : /*#__PURE__*/React__default.createElement(EnhancedTable, {
     retail: retail,
     cartData: cartData,
     loading: loading,
@@ -1944,7 +1944,7 @@ var CartPageComponent = function CartPageComponent(_ref) {
     handleIncrementDecrement: handleIncrementDecrement,
     handleRemoveProduct: handleRemoveProduct,
     handleRemoveAll: handleRemoveAll
-  }), /*#__PURE__*/React$1__default.createElement(CartSummary, {
+  }), /*#__PURE__*/React__default.createElement(CartSummary, {
     retail: retail,
     shippingData: shippingData,
     selectedShipping: selectedShipping,
@@ -1972,7 +1972,7 @@ 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: 0.875em;\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  }\n  .payment {\n    width: 70px;\n    height: 48px;\n    background: #ffffff;\n    border-radius: 15.875px;\n    display: grid;\n    place-items: center;\n    overflow: hidden;\n    /* img {\n      object-fit: cover;\n      width: 70px;\n      height: 48px;\n    } */\n  }\n  .blank {\n    padding-bottom: 2em;\n  }\n"])));
+var FilledInfo = styled.div(_templateObject3$7 || (_templateObject3$7 = _taggedTemplateLiteralLoose(["\n  margin-bottom: 2em;\n  .heading {\n    font-size: 1.25em;\n    font-weight: 800;\n    margin-bottom: 0.8em;\n  }\n\n  p {\n    font-size: 0.875em;\n    font-weight: 300;\n    text-transform: capitalize;\n    max-width: 50%;\n  }\n  .bold {\n    font-weight: 700;\n  }\n  .payment {\n    width: 70px;\n    height: 48px;\n    background: #ffffff;\n    border-radius: 15.875px;\n    display: grid;\n    place-items: center;\n    overflow: hidden;\n  }\n  .blank {\n    padding-bottom: 2em;\n  }\n"])));
 
 var CheckoutSummary = function CheckoutSummary(_ref) {
   var _paymentMethod$name;
@@ -1981,27 +1981,27 @@ var CheckoutSummary = function CheckoutSummary(_ref) {
       billingInformation = _ref.billingInformation,
       shippingInformation = _ref.shippingInformation,
       paymentMethod = _ref.paymentMethod;
-  return /*#__PURE__*/React$1__default.createElement(CheckoutSummaryContainer, null, /*#__PURE__*/React$1__default.createElement(TextRow, null, /*#__PURE__*/React$1__default.createElement("p", {
+  return /*#__PURE__*/React__default.createElement(CheckoutSummaryContainer, null, /*#__PURE__*/React__default.createElement(TextRow, null, /*#__PURE__*/React__default.createElement("p", {
     className: "text"
-  }, "order total:"), /*#__PURE__*/React$1__default.createElement("h6", {
+  }, "order total:"), /*#__PURE__*/React__default.createElement("h6", {
     className: "total"
-  }, total && "$" + (total === null || total === void 0 ? void 0 : total.toFixed(2)))), /*#__PURE__*/React$1__default.createElement(FilledInfo, null, /*#__PURE__*/React$1__default.createElement("h6", {
+  }, total && "$" + (total === null || total === void 0 ? void 0 : total.toFixed(2)))), /*#__PURE__*/React__default.createElement(FilledInfo, null, /*#__PURE__*/React__default.createElement("h6", {
     className: "heading"
-  }, "Billing information"), billingInformation ? /*#__PURE__*/React$1__default.createElement(React$1__default.Fragment, null, /*#__PURE__*/React$1__default.createElement("p", {
+  }, "Billing information"), billingInformation ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("p", {
     className: "bold"
-  }, billingInformation === null || billingInformation === void 0 ? void 0 : billingInformation.title), /*#__PURE__*/React$1__default.createElement("p", null, billingInformation === null || billingInformation === void 0 ? void 0 : billingInformation.data)) : /*#__PURE__*/React$1__default.createElement("p", {
+  }, billingInformation === null || billingInformation === void 0 ? void 0 : billingInformation.title), /*#__PURE__*/React__default.createElement("p", null, billingInformation === null || billingInformation === void 0 ? void 0 : billingInformation.data)) : /*#__PURE__*/React__default.createElement("p", {
     className: "blank bold"
-  }, "- - - - -", /*#__PURE__*/React$1__default.createElement("br", null), "- - -")), /*#__PURE__*/React$1__default.createElement(FilledInfo, null, /*#__PURE__*/React$1__default.createElement("h6", {
+  }, "- - - - -", /*#__PURE__*/React__default.createElement("br", null), "- - -")), /*#__PURE__*/React__default.createElement(FilledInfo, null, /*#__PURE__*/React__default.createElement("h6", {
     className: "heading"
-  }, "Shipping information"), shippingInformation ? /*#__PURE__*/React$1__default.createElement(React$1__default.Fragment, null, /*#__PURE__*/React$1__default.createElement("p", {
+  }, "Shipping information"), shippingInformation ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("p", {
     className: "bold"
-  }, shippingInformation === null || shippingInformation === void 0 ? void 0 : shippingInformation.title), /*#__PURE__*/React$1__default.createElement("p", null, shippingInformation === null || shippingInformation === void 0 ? void 0 : shippingInformation.data)) : /*#__PURE__*/React$1__default.createElement("p", {
+  }, shippingInformation === null || shippingInformation === void 0 ? void 0 : shippingInformation.title), /*#__PURE__*/React__default.createElement("p", null, shippingInformation === null || shippingInformation === void 0 ? void 0 : shippingInformation.data)) : /*#__PURE__*/React__default.createElement("p", {
     className: "blank bold"
-  }, "- - - - -", /*#__PURE__*/React$1__default.createElement("br", null), "- - -")), /*#__PURE__*/React$1__default.createElement(FilledInfo, null, /*#__PURE__*/React$1__default.createElement("h6", {
+  }, "- - - - -", /*#__PURE__*/React__default.createElement("br", null), "- - -")), /*#__PURE__*/React__default.createElement(FilledInfo, null, /*#__PURE__*/React__default.createElement("h6", {
     className: "heading"
-  }, "Payment Method"), /*#__PURE__*/React$1__default.createElement("div", {
+  }, "Payment Method"), /*#__PURE__*/React__default.createElement("div", {
     className: "payment"
-  }, paymentMethod && /*#__PURE__*/React$1__default.createElement("img", {
+  }, paymentMethod && /*#__PURE__*/React__default.createElement("img", {
     src: "/images/" + (paymentMethod === null || paymentMethod === void 0 ? void 0 : (_paymentMethod$name = paymentMethod.name) === null || _paymentMethod$name === void 0 ? void 0 : _paymentMethod$name.toLowerCase()) + ".png",
     alt: "payment"
   }))));
@@ -2050,17 +2050,17 @@ var CheckoutInput = function CheckoutInput(_ref) {
       autoFocus = _controlls$autoFocus === void 0 ? false : _controlls$autoFocus,
       showIcon = controlls.showIcon,
       type = controlls.type;
-  return /*#__PURE__*/React.createElement(TextFeildContainer, null, /*#__PURE__*/React.createElement(reactHookForm.Controller, _extends({}, controlls, {
+  return /*#__PURE__*/React__default.createElement(TextFeildContainer, null, /*#__PURE__*/React__default.createElement(reactHookForm.Controller, _extends({}, controlls, {
     defaultValue: "",
     render: function render(_ref2) {
       var field = _ref2.field;
-      return /*#__PURE__*/React.createElement(material.TextField, _extends({
+      return /*#__PURE__*/React__default.createElement(material.TextField, _extends({
         placeholder: placeholder,
         variant: "outlined",
         required: true,
         size: "small",
         InputProps: showIcon ? {
-          startAdornment: /*#__PURE__*/React.createElement(material.InputAdornment, {
+          startAdornment: /*#__PURE__*/React__default.createElement(material.InputAdornment, {
             position: "start"
           }, showIcon())
         } : {},
@@ -2083,15 +2083,15 @@ var CheckoutSelect = function CheckoutSelect(_ref3) {
       val = _controlls$val === void 0 ? 'id' : _controlls$val,
       _controlls$autoFocus2 = controlls.autoFocus,
       autoFocus = _controlls$autoFocus2 === void 0 ? false : _controlls$autoFocus2;
-  return /*#__PURE__*/React.createElement(TextFeildContainer, {
+  return /*#__PURE__*/React__default.createElement(TextFeildContainer, {
     select: true
-  }, /*#__PURE__*/React.createElement(reactHookForm.Controller, {
+  }, /*#__PURE__*/React__default.createElement(reactHookForm.Controller, {
     control: control,
     name: name,
     defaultValue: "",
     render: function render(_ref4) {
       var field = _ref4.field;
-      return /*#__PURE__*/React.createElement(material.TextField, _extends({
+      return /*#__PURE__*/React__default.createElement(material.TextField, _extends({
         fullWidth: true,
         label: placeholder,
         select: true,
@@ -2099,7 +2099,7 @@ var CheckoutSelect = function CheckoutSelect(_ref3) {
         size: "small",
         autoFocus: autoFocus
       }, field), key && (List === null || List === void 0 ? void 0 : List.map(function (item, i) {
-        return /*#__PURE__*/React.createElement(material.MenuItem, {
+        return /*#__PURE__*/React__default.createElement(material.MenuItem, {
           key: i,
           value: item[val]
         }, item[key]);
@@ -2113,18 +2113,18 @@ var ButtonRow = function ButtonRow(_ref) {
       handleNext = _ref.handleNext,
       backDisabled = _ref.backDisabled,
       nextDisabled = _ref.nextDisabled;
-  return /*#__PURE__*/React$1__default.createElement(ButtonRowContainer, {
+  return /*#__PURE__*/React__default.createElement(ButtonRowContainer, {
     disabled: backDisabled
-  }, /*#__PURE__*/React$1__default.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", {
     className: "back",
     tabIndex: "1",
     onClick: function onClick() {
       if (backDisabled) return;
       handleBack();
     }
-  }, /*#__PURE__*/React$1__default.createElement(bi.BiArrowBack, {
+  }, /*#__PURE__*/React__default.createElement(bi.BiArrowBack, {
     className: "icon"
-  }), "Back"), /*#__PURE__*/React$1__default.createElement(CommonCheckoutBtn, {
+  }), "Back"), /*#__PURE__*/React__default.createElement(CommonCheckoutBtn, {
     disabled: nextDisabled,
     tabIndex: "1",
     onClick: function onClick() {
@@ -2141,17 +2141,17 @@ var StepsHeaderComponent = function StepsHeaderComponent(_ref) {
       single = _ref.single,
       closed = _ref.closed,
       handleClick = _ref.handleClick;
-  return /*#__PURE__*/React$1__default.createElement(StepsHeaderContainer, {
+  return /*#__PURE__*/React__default.createElement(StepsHeaderContainer, {
     single: single
-  }, /*#__PURE__*/React$1__default.createElement(material.Stack, {
+  }, /*#__PURE__*/React__default.createElement(material.Stack, {
     justifyContent: 'space-between',
     flexDirection: "row",
     sx: {
       width: '100%'
     }
-  }, /*#__PURE__*/React$1__default.createElement(material.Stack, {
+  }, /*#__PURE__*/React__default.createElement(material.Stack, {
     flexDirection: "row"
-  }, Icon(), /*#__PURE__*/React$1__default.createElement("h5", null, text, " ", username && "" + username)), /*#__PURE__*/React$1__default.createElement(hi.HiOutlineChevronDown, {
+  }, Icon(), /*#__PURE__*/React__default.createElement("h5", null, text, " ", username && "" + username)), /*#__PURE__*/React__default.createElement(hi.HiOutlineChevronDown, {
     className: "dropIcon",
     style: closed ? {
       transform: 'rotate(-90deg)'
@@ -2181,21 +2181,21 @@ var Step0 = function Step0(_ref) {
   };
 
   function Icon() {
-    return /*#__PURE__*/React$1__default.createElement(cg.CgProfile, {
+    return /*#__PURE__*/React__default.createElement(cg.CgProfile, {
       className: "icon"
     });
   }
 
-  return /*#__PURE__*/React$1__default.createElement(StepContainer, null, /*#__PURE__*/React$1__default.createElement(StepsHeaderComponent, {
+  return /*#__PURE__*/React__default.createElement(StepContainer, null, /*#__PURE__*/React__default.createElement(StepsHeaderComponent, {
     text: 'welcome',
     username: userName,
     Icon: Icon,
     step: 0
-  }), /*#__PURE__*/React$1__default.createElement(StepsContent, null, /*#__PURE__*/React$1__default.createElement("p", null, "Please choose how you want to proceed"), /*#__PURE__*/React$1__default.createElement("p", {
+  }), /*#__PURE__*/React__default.createElement(StepsContent, null, /*#__PURE__*/React__default.createElement("p", null, "Please choose how you want to proceed"), /*#__PURE__*/React__default.createElement("p", {
     className: "bold"
-  }, /*#__PURE__*/React$1__default.createElement("span", null, "register"), " | ", /*#__PURE__*/React$1__default.createElement("span", {
+  }, /*#__PURE__*/React__default.createElement("span", null, "register"), " | ", /*#__PURE__*/React__default.createElement("span", {
     className: "red"
-  }, "login")), /*#__PURE__*/React$1__default.createElement(material.Grid, {
+  }, "login")), /*#__PURE__*/React__default.createElement(material.Grid, {
     container: true,
     component: 'form',
     onSubmit: handleSubmit(onSubmit),
@@ -2203,11 +2203,11 @@ var Step0 = function Step0(_ref) {
     sx: {
       marginTop: '1em'
     }
-  }, /*#__PURE__*/React$1__default.createElement(material.Grid, {
+  }, /*#__PURE__*/React__default.createElement(material.Grid, {
     item: true,
     sm: 8,
     xs: 12
-  }, /*#__PURE__*/React$1__default.createElement(CheckoutInput, {
+  }, /*#__PURE__*/React__default.createElement(CheckoutInput, {
     controlls: {
       name: 'email',
       placeholder: 'E-Mail Address',
@@ -2215,35 +2215,35 @@ var Step0 = function Step0(_ref) {
       autoFocus: true,
       type: 'email'
     }
-  })), /*#__PURE__*/React$1__default.createElement(material.Grid, {
+  })), /*#__PURE__*/React__default.createElement(material.Grid, {
     item: true,
     sm: 8,
     xs: 12
-  }, /*#__PURE__*/React$1__default.createElement(CheckoutInput, {
+  }, /*#__PURE__*/React__default.createElement(CheckoutInput, {
     controlls: {
       name: 'password',
       placeholder: 'Password',
       control: control,
       type: 'password'
     }
-  })), /*#__PURE__*/React$1__default.createElement(material.Grid, {
+  })), /*#__PURE__*/React__default.createElement(material.Grid, {
     item: true,
     sm: 4
-  }), /*#__PURE__*/React$1__default.createElement(CheckBoxRow, {
+  }), /*#__PURE__*/React__default.createElement(CheckBoxRow, {
     padding: ".8em 0 0 0"
-  }, /*#__PURE__*/React$1__default.createElement(material.Checkbox, {
+  }, /*#__PURE__*/React__default.createElement(material.Checkbox, {
     size: "small"
-  }), /*#__PURE__*/React$1__default.createElement("p", null, "Remember me")), /*#__PURE__*/React$1__default.createElement(material.Grid, {
+  }), /*#__PURE__*/React__default.createElement("p", null, "Remember me")), /*#__PURE__*/React__default.createElement(material.Grid, {
     item: true,
     xs: 12
-  }, /*#__PURE__*/React$1__default.createElement(CommonCheckoutBtn, {
+  }, /*#__PURE__*/React__default.createElement(CommonCheckoutBtn, {
     padding: ".8em 3em",
     uppercase: true,
     type: "submit"
-  }, loading ? /*#__PURE__*/React$1__default.createElement(material.CircularProgress, {
+  }, loading ? /*#__PURE__*/React__default.createElement(material.CircularProgress, {
     color: "inherit",
     size: 15
-  }) : 'Login'))), /*#__PURE__*/React$1__default.createElement(ButtonRow, {
+  }) : 'Login'))), /*#__PURE__*/React__default.createElement(ButtonRow, {
     handleBack: handleBack,
     handleNext: handleNext,
     backDisabled: true,
@@ -2266,30 +2266,30 @@ var Step1 = function Step1(_ref) {
       dirtyFields = _useForm.formState.dirtyFields,
       getValues = _useForm.getValues;
 
-  var _React$useState = React$1__default.useState(false),
+  var _React$useState = React__default.useState(false),
       setAddress = _React$useState[0],
       setSetAddress = _React$useState[1];
 
   function Icon() {
-    return /*#__PURE__*/React$1__default.createElement(bi.BiNotepad, {
+    return /*#__PURE__*/React__default.createElement(bi.BiNotepad, {
       className: "icon"
     });
   }
 
-  return /*#__PURE__*/React$1__default.createElement(StepContainer, null, /*#__PURE__*/React$1__default.createElement(StepsHeaderComponent, {
+  return /*#__PURE__*/React__default.createElement(StepContainer, null, /*#__PURE__*/React__default.createElement(StepsHeaderComponent, {
     text: 'billing information',
     Icon: Icon
-  }), /*#__PURE__*/React$1__default.createElement(StepsContent, null, /*#__PURE__*/React$1__default.createElement(material.Grid, {
+  }), /*#__PURE__*/React__default.createElement(StepsContent, null, /*#__PURE__*/React__default.createElement(material.Grid, {
     container: true,
     rowSpacing: 2,
     sx: {
       paddingTop: '1em'
     }
-  }, /*#__PURE__*/React$1__default.createElement(material.Grid, {
+  }, /*#__PURE__*/React__default.createElement(material.Grid, {
     item: true,
     xs: 12,
     md: 10
-  }, /*#__PURE__*/React$1__default.createElement(CheckoutSelect, {
+  }, /*#__PURE__*/React__default.createElement(CheckoutSelect, {
     controlls: {
       name: 'store',
       placeholder: 'Please Select your store',
@@ -2297,11 +2297,11 @@ var Step1 = function Step1(_ref) {
       List: stores,
       key: 'name'
     }
-  })), /*#__PURE__*/React$1__default.createElement(material.Grid, {
+  })), /*#__PURE__*/React__default.createElement(material.Grid, {
     item: true,
     xs: 12,
     md: 10
-  }, /*#__PURE__*/React$1__default.createElement(CheckoutSelect, {
+  }, /*#__PURE__*/React__default.createElement(CheckoutSelect, {
     controlls: {
       name: 'billingAddress',
       placeholder: 'Select a billing address from your address book ',
@@ -2309,27 +2309,27 @@ var Step1 = function Step1(_ref) {
       List: addresses,
       key: 'name'
     }
-  })), /*#__PURE__*/React$1__default.createElement(material.Grid, {
+  })), /*#__PURE__*/React__default.createElement(material.Grid, {
     item: true,
     xs: 12
-  }, /*#__PURE__*/React$1__default.createElement(CheckBoxRow, {
+  }, /*#__PURE__*/React__default.createElement(CheckBoxRow, {
     onClick: function onClick() {
       setSetAddress(false);
     }
-  }, /*#__PURE__*/React$1__default.createElement(material.Checkbox, {
+  }, /*#__PURE__*/React__default.createElement(material.Checkbox, {
     checked: !setAddress,
-    icon: /*#__PURE__*/React$1__default.createElement(md.MdOutlineCircle, null),
-    checkedIcon: /*#__PURE__*/React$1__default.createElement(gr.GrRadialSelected, null)
-  }), /*#__PURE__*/React$1__default.createElement("p", null, "Ship to this address"))), /*#__PURE__*/React$1__default.createElement(CheckBoxRow, {
+    icon: /*#__PURE__*/React__default.createElement(md.MdOutlineCircle, null),
+    checkedIcon: /*#__PURE__*/React__default.createElement(gr.GrRadialSelected, null)
+  }), /*#__PURE__*/React__default.createElement("p", null, "Ship to this address"))), /*#__PURE__*/React__default.createElement(CheckBoxRow, {
     padding: '0 0 1em 0',
     onClick: function onClick() {
       setSetAddress(true);
     }
-  }, /*#__PURE__*/React$1__default.createElement(material.Checkbox, {
+  }, /*#__PURE__*/React__default.createElement(material.Checkbox, {
     checked: setAddress,
-    icon: /*#__PURE__*/React$1__default.createElement(md.MdOutlineCircle, null),
-    checkedIcon: /*#__PURE__*/React$1__default.createElement(gr.GrRadialSelected, null)
-  }), /*#__PURE__*/React$1__default.createElement("p", null, "Ship to a different address "))), /*#__PURE__*/React$1__default.createElement(ButtonRow, {
+    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, {
     handleBack: handleBack,
     handleNext: function handleNext() {
       var _Object$keys;
@@ -2362,62 +2362,62 @@ var Step2 = function Step2(_ref) {
       dirtyFields = _useForm.formState.dirtyFields,
       getValues = _useForm.getValues;
 
-  var _React$useState = React$1__default.useState(options[0]),
+  var _React$useState = React__default.useState(options[0]),
       method = _React$useState[0],
       setmethod = _React$useState[1];
 
   function Icon() {
-    return /*#__PURE__*/React$1__default.createElement(fi.FiTruck, {
+    return /*#__PURE__*/React__default.createElement(fi.FiTruck, {
       className: "icon"
     });
   }
 
-  return /*#__PURE__*/React$1__default.createElement(StepContainer, null, /*#__PURE__*/React$1__default.createElement(StepsHeaderComponent, {
+  return /*#__PURE__*/React__default.createElement(StepContainer, null, /*#__PURE__*/React__default.createElement(StepsHeaderComponent, {
     text: 'shipping information',
     Icon: Icon
-  }), /*#__PURE__*/React$1__default.createElement(StepsContent, null, showShipping && /*#__PURE__*/React$1__default.createElement(material.Grid, {
+  }), /*#__PURE__*/React__default.createElement(StepsContent, null, showShipping && /*#__PURE__*/React__default.createElement(material.Grid, {
     container: true,
     rowSpacing: 2,
     columnSpacing: 2,
     sx: {
       paddingBottom: '1em'
     }
-  }, /*#__PURE__*/React$1__default.createElement(material.Grid, {
+  }, /*#__PURE__*/React__default.createElement(material.Grid, {
     item: true,
     xs: 12,
     md: 10
-  }, /*#__PURE__*/React$1__default.createElement(CheckoutInput, {
+  }, /*#__PURE__*/React__default.createElement(CheckoutInput, {
     controlls: {
       name: 'fullAddress',
       placeholder: 'Full Address*',
       control: control
     }
-  })), /*#__PURE__*/React$1__default.createElement(material.Grid, {
+  })), /*#__PURE__*/React__default.createElement(material.Grid, {
     item: true,
     xs: 6,
     md: 3.33
-  }, /*#__PURE__*/React$1__default.createElement(CheckoutInput, {
+  }, /*#__PURE__*/React__default.createElement(CheckoutInput, {
     controlls: {
       name: 'zipCode',
       placeholder: 'Zip/Postal Code*',
       control: control,
       type: 'number'
     }
-  })), /*#__PURE__*/React$1__default.createElement(material.Grid, {
+  })), /*#__PURE__*/React__default.createElement(material.Grid, {
     item: true,
     xs: 6,
     md: 3.33
-  }, /*#__PURE__*/React$1__default.createElement(CheckoutInput, {
+  }, /*#__PURE__*/React__default.createElement(CheckoutInput, {
     controlls: {
       name: 'city',
       placeholder: 'City*',
       control: control
     }
-  })), /*#__PURE__*/React$1__default.createElement(material.Grid, {
+  })), /*#__PURE__*/React__default.createElement(material.Grid, {
     item: true,
     xs: 12,
     md: 3.34
-  }, /*#__PURE__*/React$1__default.createElement(CheckoutSelect, {
+  }, /*#__PURE__*/React__default.createElement(CheckoutSelect, {
     controlls: {
       name: 'country',
       placeholder: 'Country',
@@ -2425,7 +2425,7 @@ var Step2 = function Step2(_ref) {
       List: countries,
       key: 'name'
     }
-  }))), /*#__PURE__*/React$1__default.createElement(material.Grid, {
+  }))), /*#__PURE__*/React__default.createElement(material.Grid, {
     container: true,
     columnSpacing: 0.5,
     rowSpacing: 2,
@@ -2444,24 +2444,24 @@ var Step2 = function Step2(_ref) {
       replaced = (_option$name2 = option.name) === null || _option$name2 === void 0 ? void 0 : _option$name2.replace(/fedex/i, ' ');
     }
 
-    return /*#__PURE__*/React$1__default.createElement(material.Stack, {
+    return /*#__PURE__*/React__default.createElement(material.Stack, {
       flexDirection: "row",
       justifyContent: "space-around",
       aligItems: "center",
       flexWrap: 'wrap'
-    }, /*#__PURE__*/React$1__default.createElement(DeliveryCard, {
+    }, /*#__PURE__*/React__default.createElement(DeliveryCard, {
       onClick: function onClick() {
         return setmethod(option);
       }
-    }, fedex && /*#__PURE__*/React$1__default.createElement("img", {
+    }, fedex && /*#__PURE__*/React__default.createElement("img", {
       src: "/images/fedex.png",
       alt: "fedex"
-    }), fedex ? /*#__PURE__*/React$1__default.createElement("p", null, replaced) : /*#__PURE__*/React$1__default.createElement("p", null, /*#__PURE__*/React$1__default.createElement("p", null, option.name)), /*#__PURE__*/React$1__default.createElement("span", {
+    }), fedex ? /*#__PURE__*/React__default.createElement("p", null, replaced) : /*#__PURE__*/React__default.createElement("p", null, /*#__PURE__*/React__default.createElement("p", null, option.name)), /*#__PURE__*/React__default.createElement("span", {
       className: "circle"
-    }, (option === null || option === void 0 ? void 0 : option.id) === (method === null || method === void 0 ? void 0 : method.id) && /*#__PURE__*/React$1__default.createElement("span", {
+    }, (option === null || option === void 0 ? void 0 : option.id) === (method === null || method === void 0 ? void 0 : method.id) && /*#__PURE__*/React__default.createElement("span", {
       className: "smallCircle"
     }))));
-  })), /*#__PURE__*/React$1__default.createElement(ButtonRow, {
+  })), /*#__PURE__*/React__default.createElement(ButtonRow, {
     handleBack: handleBack,
     handleNext: function handleNext() {
       var _Object$keys;
@@ -2496,33 +2496,33 @@ var Step3 = function Step3(_ref) {
   };
 
   function Icon() {
-    return /*#__PURE__*/React$1__default.createElement(bi.BiWallet, {
+    return /*#__PURE__*/React__default.createElement(bi.BiWallet, {
       className: "icon"
     });
   }
 
-  return /*#__PURE__*/React$1__default.createElement(StepContainer, null, /*#__PURE__*/React$1__default.createElement(StepsHeaderComponent, {
+  return /*#__PURE__*/React__default.createElement(StepContainer, null, /*#__PURE__*/React__default.createElement(StepsHeaderComponent, {
     text: 'Payments Method',
     Icon: Icon
-  }), /*#__PURE__*/React$1__default.createElement(StepsContent, null, /*#__PURE__*/React$1__default.createElement(material.Grid, {
+  }), /*#__PURE__*/React__default.createElement(StepsContent, null, /*#__PURE__*/React__default.createElement(material.Grid, {
     container: true,
     rowSpacing: 2,
     sx: {
       margin: '1.5em 0'
     }
   }, payments === null || payments === void 0 ? void 0 : payments.map(function (payment, i) {
-    return /*#__PURE__*/React$1__default.createElement(material.Grid, {
+    return /*#__PURE__*/React__default.createElement(material.Grid, {
       item: true,
       key: i,
       xs: 2.8,
       sm: 1.5
-    }, /*#__PURE__*/React$1__default.createElement(CreditCard, {
+    }, /*#__PURE__*/React__default.createElement(CreditCard, {
       tabIndex: 1
-    }, /*#__PURE__*/React$1__default.createElement("img", {
+    }, /*#__PURE__*/React__default.createElement("img", {
       src: "/images/" + (payment === null || payment === void 0 ? void 0 : payment.name) + ".png",
       alt: payment.name
     })));
-  })), /*#__PURE__*/React$1__default.createElement(material.Grid, {
+  })), /*#__PURE__*/React__default.createElement(material.Grid, {
     container: true,
     component: 'form',
     onSubmit: handleSubmit(onSubmit),
@@ -2531,75 +2531,75 @@ var Step3 = function Step3(_ref) {
     sx: {
       paddingBottom: '1em'
     }
-  }, /*#__PURE__*/React$1__default.createElement(material.Grid, {
+  }, /*#__PURE__*/React__default.createElement(material.Grid, {
     item: true,
     xs: 10
-  }, /*#__PURE__*/React$1__default.createElement(CheckoutInput, {
+  }, /*#__PURE__*/React__default.createElement(CheckoutInput, {
     controlls: {
       name: 'cardName',
       placeholder: "Card Holder's Name*",
       control: control,
       showIcon: function showIcon() {
-        return /*#__PURE__*/React$1__default.createElement(io5.IoPersonOutline, {
+        return /*#__PURE__*/React__default.createElement(io5.IoPersonOutline, {
           className: "icon"
         });
       }
     }
-  })), /*#__PURE__*/React$1__default.createElement(material.Grid, {
+  })), /*#__PURE__*/React__default.createElement(material.Grid, {
     item: true,
     xs: 10
-  }, /*#__PURE__*/React$1__default.createElement(CheckoutInput, {
+  }, /*#__PURE__*/React__default.createElement(CheckoutInput, {
     controlls: {
       name: 'cardNumber',
       placeholder: 'Card Nubmers   xxxx-xxxx-xxxx-xxxx',
       control: control,
       showIcon: function showIcon() {
-        return /*#__PURE__*/React$1__default.createElement(bs.BsCreditCard, {
+        return /*#__PURE__*/React__default.createElement(bs.BsCreditCard, {
           className: "icon"
         });
       },
       type: 'number'
     }
-  })), /*#__PURE__*/React$1__default.createElement(material.Grid, {
+  })), /*#__PURE__*/React__default.createElement(material.Grid, {
     item: true,
     xs: 12,
     sm: 5
-  }, /*#__PURE__*/React$1__default.createElement(CheckoutInput, {
+  }, /*#__PURE__*/React__default.createElement(CheckoutInput, {
     controlls: {
       name: 'expiryDate ',
       placeholder: 'Expiration Date  MM/YYYY',
       control: control,
       showIcon: function showIcon() {
-        return /*#__PURE__*/React$1__default.createElement(md.MdOutlineDateRange, {
+        return /*#__PURE__*/React__default.createElement(md.MdOutlineDateRange, {
           className: "icon"
         });
       },
       type: 'number'
     }
-  })), /*#__PURE__*/React$1__default.createElement(material.Grid, {
+  })), /*#__PURE__*/React__default.createElement(material.Grid, {
     item: true,
     xs: 12,
     sm: 3.5
-  }, /*#__PURE__*/React$1__default.createElement(CheckoutInput, {
+  }, /*#__PURE__*/React__default.createElement(CheckoutInput, {
     controlls: {
       name: 'cvv',
       placeholder: 'CVC/CVVV  ***',
       control: control,
       showIcon: function showIcon() {
-        return /*#__PURE__*/React$1__default.createElement(bi.BiLockAlt, {
+        return /*#__PURE__*/React__default.createElement(bi.BiLockAlt, {
           className: "icon"
         });
       },
       type: 'password'
     }
-  })), /*#__PURE__*/React$1__default.createElement(material.Grid, {
+  })), /*#__PURE__*/React__default.createElement(material.Grid, {
     item: true,
     xs: 12
-  }, /*#__PURE__*/React$1__default.createElement(CheckBoxRow, {
+  }, /*#__PURE__*/React__default.createElement(CheckBoxRow, {
     padding: ".8em 0 0 0"
-  }, /*#__PURE__*/React$1__default.createElement(material.Checkbox, {
+  }, /*#__PURE__*/React__default.createElement(material.Checkbox, {
     size: "small"
-  }), /*#__PURE__*/React$1__default.createElement("p", null, "Remember me")))), /*#__PURE__*/React$1__default.createElement(ButtonRow, {
+  }), /*#__PURE__*/React__default.createElement("p", null, "Remember me")))), /*#__PURE__*/React__default.createElement(ButtonRow, {
     handleBack: handleBack,
     handleNext: function handleNext() {
       var _Object$keys;
@@ -2624,116 +2624,116 @@ var Step4 = function Step4(_ref) {
       vatPercentage = _ref.vat,
       clickRedirect = _ref.clickRedirect;
 
-  var _React$useState = React$1__default.useState(false),
+  var _React$useState = React__default.useState(false),
       checked = _React$useState[0],
       setChecked = _React$useState[1];
 
-  var _React$useState2 = React$1__default.useState(''),
+  var _React$useState2 = React__default.useState(''),
       comments = _React$useState2[0],
       setComments = _React$useState2[1];
 
   function Icon() {
-    return /*#__PURE__*/React$1__default.createElement(md.MdOutlineStickyNote2, {
+    return /*#__PURE__*/React__default.createElement(md.MdOutlineStickyNote2, {
       className: "icon"
     });
   }
 
   var vat = vatPercentage / 100 * (cartData === null || cartData === void 0 ? void 0 : cartData.totalCartPrice);
   console.log(vat);
-  return /*#__PURE__*/React$1__default.createElement(StepContainer, null, /*#__PURE__*/React$1__default.createElement(StepsHeaderComponent, {
+  return /*#__PURE__*/React__default.createElement(StepContainer, null, /*#__PURE__*/React__default.createElement(StepsHeaderComponent, {
     text: 'Order Review',
     Icon: Icon
-  }), /*#__PURE__*/React$1__default.createElement(StepsContent, null, /*#__PURE__*/React$1__default.createElement(material.TableContainer, null, /*#__PURE__*/React$1__default.createElement(material.Table, {
+  }), /*#__PURE__*/React__default.createElement(StepsContent, null, /*#__PURE__*/React__default.createElement(material.TableContainer, null, /*#__PURE__*/React__default.createElement(material.Table, {
     "aria-label": "customized table",
     sx: {
       maxHeight: '600px'
     },
     size: "small"
-  }, /*#__PURE__*/React$1__default.createElement(material.TableBody, null, cartData === null || cartData === void 0 ? void 0 : (_cartData$cartLineIte = cartData.cartLineItemDtoList) === null || _cartData$cartLineIte === void 0 ? void 0 : _cartData$cartLineIte.map(function (row, i) {
+  }, /*#__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$1__default.createElement(StyledTableRow, {
+    return /*#__PURE__*/React__default.createElement(StyledTableRow, {
       key: row.name,
       colored: i % 2 === 0
-    }, /*#__PURE__*/React$1__default.createElement(StyledTableCell, null, /*#__PURE__*/React$1__default.createElement("p", {
+    }, /*#__PURE__*/React__default.createElement(StyledTableCell, null, /*#__PURE__*/React__default.createElement("p", {
       className: "price max"
-    }, "ID: #", row === null || row === void 0 ? void 0 : row.productId)), /*#__PURE__*/React$1__default.createElement(StyledTableCell, {
+    }, "ID: #", row === null || row === void 0 ? void 0 : row.productId)), /*#__PURE__*/React__default.createElement(StyledTableCell, {
       align: "left"
-    }, /*#__PURE__*/React$1__default.createElement("p", null, row.productName)), /*#__PURE__*/React$1__default.createElement(StyledTableCell, {
+    }, /*#__PURE__*/React__default.createElement("p", null, row.productName)), /*#__PURE__*/React__default.createElement(StyledTableCell, {
       align: "left"
-    }, /*#__PURE__*/React$1__default.createElement("p", {
+    }, /*#__PURE__*/React__default.createElement("p", {
       className: "price"
-    }, (_row$standardPrice = row.standardPrice) === null || _row$standardPrice === void 0 ? void 0 : _row$standardPrice.toFixed(2), /*#__PURE__*/React$1__default.createElement("span", {
+    }, (_row$standardPrice = row.standardPrice) === null || _row$standardPrice === void 0 ? void 0 : _row$standardPrice.toFixed(2), /*#__PURE__*/React__default.createElement("span", {
       className: "red"
-    }, " x ", row.quantity))), /*#__PURE__*/React$1__default.createElement(StyledTableCell, {
+    }, " x ", row.quantity))), /*#__PURE__*/React__default.createElement(StyledTableCell, {
       align: "center"
-    }, /*#__PURE__*/React$1__default.createElement("p", {
+    }, /*#__PURE__*/React__default.createElement("p", {
       className: "price max"
     }, (_ref2 = row.quantity * (row === null || row === void 0 ? void 0 : row.standardPrice)) === null || _ref2 === void 0 ? void 0 : _ref2.toFixed(2))));
-  }), /*#__PURE__*/React$1__default.createElement(StyledTableRow, null, /*#__PURE__*/React$1__default.createElement(StyledTableCell, {
+  }), /*#__PURE__*/React__default.createElement(StyledTableRow, null, /*#__PURE__*/React__default.createElement(StyledTableCell, {
     colSpan: 2
-  }), /*#__PURE__*/React$1__default.createElement(StyledTableCell, {
+  }), /*#__PURE__*/React__default.createElement(StyledTableCell, {
     colSpan: 1
-  }, /*#__PURE__*/React$1__default.createElement("p", {
+  }, /*#__PURE__*/React__default.createElement("p", {
     className: "max"
-  }, "Total(", cartData === null || cartData === void 0 ? void 0 : cartData.totalCartQuantity, " items)")), /*#__PURE__*/React$1__default.createElement(StyledTableCell, {
+  }, "Total(", cartData === null || cartData === void 0 ? void 0 : cartData.totalCartQuantity, " items)")), /*#__PURE__*/React__default.createElement(StyledTableCell, {
     align: "right"
-  }, /*#__PURE__*/React$1__default.createElement("p", {
+  }, /*#__PURE__*/React__default.createElement("p", {
     className: "max price"
-  }, "$", cartData === null || cartData === void 0 ? void 0 : (_cartData$totalCartPr = cartData.totalCartPrice) === null || _cartData$totalCartPr === void 0 ? void 0 : _cartData$totalCartPr.toFixed(2)))), /*#__PURE__*/React$1__default.createElement(StyledTableRow, null, /*#__PURE__*/React$1__default.createElement(StyledTableCell, {
+  }, "$", cartData === null || cartData === void 0 ? void 0 : (_cartData$totalCartPr = cartData.totalCartPrice) === null || _cartData$totalCartPr === void 0 ? void 0 : _cartData$totalCartPr.toFixed(2)))), /*#__PURE__*/React__default.createElement(StyledTableRow, null, /*#__PURE__*/React__default.createElement(StyledTableCell, {
     colSpan: 2
-  }), /*#__PURE__*/React$1__default.createElement(StyledTableCell, {
+  }), /*#__PURE__*/React__default.createElement(StyledTableCell, {
     colSpan: 1
-  }, /*#__PURE__*/React$1__default.createElement("p", {
+  }, /*#__PURE__*/React__default.createElement("p", {
     className: "max"
-  }, "Value added tax (VAT)")), /*#__PURE__*/React$1__default.createElement(StyledTableCell, {
+  }, "Value added tax (VAT)")), /*#__PURE__*/React__default.createElement(StyledTableCell, {
     align: "right"
-  }, /*#__PURE__*/React$1__default.createElement("p", {
+  }, /*#__PURE__*/React__default.createElement("p", {
     className: "max price"
-  }, "$", vat === null || vat === void 0 ? void 0 : vat.toFixed(2)))), /*#__PURE__*/React$1__default.createElement(StyledTableRow, null, /*#__PURE__*/React$1__default.createElement(StyledTableCell, {
+  }, "$", vat === null || vat === void 0 ? void 0 : vat.toFixed(2)))), /*#__PURE__*/React__default.createElement(StyledTableRow, null, /*#__PURE__*/React__default.createElement(StyledTableCell, {
     colSpan: 2
-  }), /*#__PURE__*/React$1__default.createElement(StyledTableCell, {
+  }), /*#__PURE__*/React__default.createElement(StyledTableCell, {
     colSpan: 1
-  }, /*#__PURE__*/React$1__default.createElement("p", {
+  }, /*#__PURE__*/React__default.createElement("p", {
     className: "max"
-  }, "Delivery Charge")), /*#__PURE__*/React$1__default.createElement(StyledTableCell, {
+  }, "Delivery Charge")), /*#__PURE__*/React__default.createElement(StyledTableCell, {
     align: "right"
-  }, /*#__PURE__*/React$1__default.createElement("p", {
+  }, /*#__PURE__*/React__default.createElement("p", {
     className: "max price red"
-  }, "Free"))), /*#__PURE__*/React$1__default.createElement(StyledTableRow, null, /*#__PURE__*/React$1__default.createElement(StyledTableCell, {
+  }, "Free"))), /*#__PURE__*/React__default.createElement(StyledTableRow, null, /*#__PURE__*/React__default.createElement(StyledTableCell, {
     colSpan: 2
-  }), /*#__PURE__*/React$1__default.createElement(StyledTableCell, {
+  }), /*#__PURE__*/React__default.createElement(StyledTableCell, {
     sx: {
       paddingTop: '1em'
     },
     colSpan: 1
-  }, /*#__PURE__*/React$1__default.createElement("p", {
+  }, /*#__PURE__*/React__default.createElement("p", {
     className: "max price red"
-  }, "Subtotal")), /*#__PURE__*/React$1__default.createElement(StyledTableCell, {
+  }, "Subtotal")), /*#__PURE__*/React__default.createElement(StyledTableCell, {
     sx: {
       paddingTop: '1em'
     },
     align: "right"
-  }, /*#__PURE__*/React$1__default.createElement("p", {
+  }, /*#__PURE__*/React__default.createElement("p", {
     className: "max price red"
-  }, "$", ((cartData === null || cartData === void 0 ? void 0 : cartData.totalCartPrice) + vat).toFixed(2)))))), /*#__PURE__*/React$1__default.createElement(BottomGrid, {
+  }, "$", ((cartData === null || cartData === void 0 ? void 0 : cartData.totalCartPrice) + vat).toFixed(2)))))), /*#__PURE__*/React__default.createElement(BottomGrid, {
     container: true,
     columnSpacing: 0,
     rowSpacing: 0
-  }, /*#__PURE__*/React$1__default.createElement(material.Grid, {
+  }, /*#__PURE__*/React__default.createElement(material.Grid, {
     item: true,
     xs: 12
-  }, /*#__PURE__*/React$1__default.createElement("p", {
+  }, /*#__PURE__*/React__default.createElement("p", {
     className: "bold"
-  }, "Your Comment")), /*#__PURE__*/React$1__default.createElement(material.Grid, {
+  }, "Your Comment")), /*#__PURE__*/React__default.createElement(material.Grid, {
     item: true,
     xs: 0.5
-  }, /*#__PURE__*/React$1__default.createElement(cg.CgProfile, {
+  }, /*#__PURE__*/React__default.createElement(cg.CgProfile, {
     className: "icon"
-  })), /*#__PURE__*/React$1__default.createElement(material.Grid, {
+  })), /*#__PURE__*/React__default.createElement(material.Grid, {
     item: true,
     xs: 11.5
-  }, /*#__PURE__*/React$1__default.createElement("textarea", {
+  }, /*#__PURE__*/React__default.createElement("textarea", {
     rows: "3",
     cols: "4",
     placeholder: "Comments for the order....",
@@ -2741,10 +2741,10 @@ var Step4 = function Step4(_ref) {
     onChange: function onChange(e) {
       setComments(e.target.value);
     }
-  })), /*#__PURE__*/React$1__default.createElement(material.Grid, {
+  })), /*#__PURE__*/React__default.createElement(material.Grid, {
     item: true,
     xs: 12
-  }, /*#__PURE__*/React$1__default.createElement(CheckBoxRow, null, /*#__PURE__*/React$1__default.createElement(material.Checkbox, {
+  }, /*#__PURE__*/React__default.createElement(CheckBoxRow, null, /*#__PURE__*/React__default.createElement(material.Checkbox, {
     size: "small",
     value: checked,
     onChange: function onChange() {
@@ -2752,25 +2752,25 @@ var Step4 = function Step4(_ref) {
         return !checked;
       });
     }
-  }), /*#__PURE__*/React$1__default.createElement("p", null, "I Accept the ", /*#__PURE__*/React$1__default.createElement("span", {
+  }), /*#__PURE__*/React__default.createElement("p", null, "I Accept the ", /*#__PURE__*/React__default.createElement("span", {
     className: "ul"
-  }, "Tearms and Conditions"), ' ', "& ", /*#__PURE__*/React$1__default.createElement("span", {
+  }, "Tearms and Conditions"), ' ', "& ", /*#__PURE__*/React__default.createElement("span", {
     className: "ul"
-  }, "Privacy Policy?"), ' '))), /*#__PURE__*/React$1__default.createElement(material.Grid, {
+  }, "Privacy Policy?"), ' '))), /*#__PURE__*/React__default.createElement(material.Grid, {
     item: true,
     xs: 12
-  }, /*#__PURE__*/React$1__default.createElement(CheckBoxRow, null, /*#__PURE__*/React$1__default.createElement("p", {
+  }, /*#__PURE__*/React__default.createElement(CheckBoxRow, null, /*#__PURE__*/React__default.createElement("p", {
     className: "bottom"
-  }, "Forgot an Item? \xA0", ' ', /*#__PURE__*/React$1__default.createElement("span", {
+  }, "Forgot an Item? \xA0", ' ', /*#__PURE__*/React__default.createElement("span", {
     onClick: function onClick() {
       return clickRedirect('cart');
     }
-  }, "Edit your cart"))), /*#__PURE__*/React$1__default.createElement(CheckBoxRow, null, /*#__PURE__*/React$1__default.createElement("button", {
+  }, "Edit your cart"))), /*#__PURE__*/React__default.createElement(CheckBoxRow, null, /*#__PURE__*/React__default.createElement("button", {
     className: "back",
     onClick: function onClick() {
       return handleBack();
     }
-  }, "back"), /*#__PURE__*/React$1__default.createElement("button", {
+  }, "back"), /*#__PURE__*/React__default.createElement("button", {
     onClick: function onClick() {
       if (checked) {
         handleNext();
@@ -2782,35 +2782,35 @@ var Step4 = function Step4(_ref) {
 var steps = [{
   text: 'welcome',
   Icon: function Icon() {
-    return /*#__PURE__*/React$1__default.createElement(cg.CgProfile, {
+    return /*#__PURE__*/React__default.createElement(cg.CgProfile, {
       className: "icon"
     });
   }
 }, {
   text: 'billing information',
   Icon: function Icon() {
-    return /*#__PURE__*/React$1__default.createElement(bi.BiNotepad, {
+    return /*#__PURE__*/React__default.createElement(bi.BiNotepad, {
       className: "icon"
     });
   }
 }, {
   text: 'shipping information',
   Icon: function Icon() {
-    return /*#__PURE__*/React$1__default.createElement(fi.FiTruck, {
+    return /*#__PURE__*/React__default.createElement(fi.FiTruck, {
       className: "icon"
     });
   }
 }, {
   text: 'payment method',
   Icon: function Icon() {
-    return /*#__PURE__*/React$1__default.createElement(bi.BiWallet, {
+    return /*#__PURE__*/React__default.createElement(bi.BiWallet, {
       className: "icon"
     });
   }
 }, {
   text: 'order review',
   Icon: function Icon() {
-    return /*#__PURE__*/React$1__default.createElement(md.MdOutlineStickyNote2, {
+    return /*#__PURE__*/React__default.createElement(md.MdOutlineStickyNote2, {
       className: "icon"
     });
   }
@@ -2840,29 +2840,29 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
       userAddresses = _ref.userAddresses,
       showShipping = _ref.showShipping,
       clickRedirect = _ref.clickRedirect;
-  return /*#__PURE__*/React$1__default.createElement(CheckoutPageContainer, {
+  return /*#__PURE__*/React__default.createElement(CheckoutPageContainer, {
     className: "checkout"
-  }, /*#__PURE__*/React$1__default.createElement(CheckoutMain, null, /*#__PURE__*/React$1__default.createElement(CheckoutHeader, null, steps.map(function (item, i) {
+  }, /*#__PURE__*/React__default.createElement(CheckoutMain, null, /*#__PURE__*/React__default.createElement(CheckoutHeader, null, steps.map(function (item, i) {
     var words = item.text.split(' ');
-    return /*#__PURE__*/React$1__default.createElement("div", {
+    return /*#__PURE__*/React__default.createElement("div", {
       className: "row"
-    }, /*#__PURE__*/React$1__default.createElement("span", {
+    }, /*#__PURE__*/React__default.createElement("span", {
       className: "icon",
       style: currStep > i ? {
         color: 'rgba(36, 153, 55, 1)'
       } : {}
-    }, /*#__PURE__*/React$1__default.createElement(ai.AiOutlineCheckCircle, null)), ' ', /*#__PURE__*/React$1__default.createElement("p", null, words[0], " ", /*#__PURE__*/React$1__default.createElement("span", null, words[1])));
-  })), /*#__PURE__*/React$1__default.createElement(material.Stepper, {
+    }, /*#__PURE__*/React__default.createElement(ai.AiOutlineCheckCircle, null)), ' ', /*#__PURE__*/React__default.createElement("p", null, words[0], " ", /*#__PURE__*/React__default.createElement("span", null, words[1])));
+  })), /*#__PURE__*/React__default.createElement(material.Stepper, {
     activeStep: currStep,
     orientation: "vertical"
   }, steps.map(function (item, index) {
-    return /*#__PURE__*/React$1__default.createElement(material.Step, {
+    return /*#__PURE__*/React__default.createElement(material.Step, {
       key: index
-    }, /*#__PURE__*/React$1__default.createElement(material.StepLabel, {
+    }, /*#__PURE__*/React__default.createElement(material.StepLabel, {
       sx: {
         padding: 0
       },
-      icon: /*#__PURE__*/React$1__default.createElement(CheckoutStepIcon, {
+      icon: /*#__PURE__*/React__default.createElement(CheckoutStepIcon, {
         style: currStep >= index ? {
           background: 'rgba(253, 0, 21, 1)',
           color: 'white',
@@ -2872,10 +2872,10 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
           color: 'inherit',
           padding: 0
         }
-      }, /*#__PURE__*/React$1__default.createElement(ai.AiOutlineCheck, {
+      }, /*#__PURE__*/React__default.createElement(ai.AiOutlineCheck, {
         className: "ic"
       }))
-    }, currStep !== index && /*#__PURE__*/React$1__default.createElement(StepsHeaderComponent, {
+    }, currStep !== index && /*#__PURE__*/React__default.createElement(StepsHeaderComponent, {
       text: item.text,
       Icon: item.Icon,
       single: true,
@@ -2886,22 +2886,22 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
           handleBack(index);
         }
       }
-    })), index === 0 && /*#__PURE__*/React$1__default.createElement(material.StepContent, {
+    })), index === 0 && /*#__PURE__*/React__default.createElement(material.StepContent, {
       sx: {
         padding: 0
       }
-    }, /*#__PURE__*/React$1__default.createElement(Step0, {
+    }, /*#__PURE__*/React__default.createElement(Step0, {
       currStep: currStep,
       loading: loading,
       userName: userName,
       handleBack: handleBack,
       handleNext: handleNext,
       handleLogin: handleLogin
-    })), index === 1 && /*#__PURE__*/React$1__default.createElement(material.StepContent, {
+    })), index === 1 && /*#__PURE__*/React__default.createElement(material.StepContent, {
       sx: {
         padding: 0
       }
-    }, /*#__PURE__*/React$1__default.createElement(Step1, {
+    }, /*#__PURE__*/React__default.createElement(Step1, {
       currstep: currStep,
       handleBack: handleBack,
       handleNext: handleNext,
@@ -2909,11 +2909,11 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
       setBillingAddress: setBillingAddress,
       stores: userStores,
       addresses: userAddresses
-    })), index === 2 && /*#__PURE__*/React$1__default.createElement(material.StepContent, {
+    })), index === 2 && /*#__PURE__*/React__default.createElement(material.StepContent, {
       sx: {
         padding: 0
       }
-    }, /*#__PURE__*/React$1__default.createElement(Step2, {
+    }, /*#__PURE__*/React__default.createElement(Step2, {
       currstep: currStep,
       handleBack: handleBack,
       handleNext: handleNext,
@@ -2922,21 +2922,21 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
       setShipping: setShippingAddress,
       setShippingMethod: setShippingMethod,
       showShipping: showShipping
-    })), index === 3 && /*#__PURE__*/React$1__default.createElement(material.StepContent, {
+    })), index === 3 && /*#__PURE__*/React__default.createElement(material.StepContent, {
       sx: {
         padding: 0
       }
-    }, /*#__PURE__*/React$1__default.createElement(Step3, {
+    }, /*#__PURE__*/React__default.createElement(Step3, {
       currstep: currStep,
       handleBack: handleBack,
       handleNext: handleNext,
       setPaymentDetails: setPaymentDetails,
       payments: paymentMethods
-    })), index === 4 && /*#__PURE__*/React$1__default.createElement(material.StepContent, {
+    })), index === 4 && /*#__PURE__*/React__default.createElement(material.StepContent, {
       sx: {
         padding: 0
       }
-    }, /*#__PURE__*/React$1__default.createElement(Step4, {
+    }, /*#__PURE__*/React__default.createElement(Step4, {
       currstep: currStep,
       handleBack: handleBack,
       handleNext: handleNext,
@@ -2944,7 +2944,7 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
       vat: vat,
       clickRedirect: clickRedirect
     })));
-  }))), /*#__PURE__*/React$1__default.createElement(CheckoutSummary, {
+  }))), /*#__PURE__*/React__default.createElement(CheckoutSummary, {
     billingInformation: billingAddress,
     shippingInformation: shippingAddress,
     paymentMethod: selectedPaymentMethod,
@@ -2988,14 +2988,14 @@ function debounce(func, wait, immediate) {
 function useWindowSize() {
   var isWindow = typeof window !== 'undefined';
 
-  var _useState = React$1.useState({
+  var _useState = React.useState({
     width: isWindow ? window.innerWidth : 1200,
     height: isWindow ? window.innerHeight : 800
   }),
       windowSize = _useState[0],
       setWindowSize = _useState[1];
 
-  React$1.useEffect(function () {
+  React.useEffect(function () {
     var onWindowResize = function onWindowResize() {
       setWindowSize({
         width: window.innerWidth,
@@ -3047,11 +3047,11 @@ var getBreakpoint = function getBreakpoint(_ref) {
 function useGridSize() {
   var windowSize = useWindowSize();
 
-  var _useState = React$1.useState(Breakpoint.md),
+  var _useState = React.useState(Breakpoint.md),
       layout = _useState[0],
       setLayout = _useState[1];
 
-  React$1.useEffect(function () {
+  React.useEffect(function () {
     setLayout(getBreakpoint(windowSize));
   }, [windowSize]);
   return layout;