@salesgenterp/ui-components 0.4.210 → 0.4.211

package/dist/index.js

@@ -19,13 +19,13 @@ var TableRow = _interopDefault(require('@mui/material/TableRow'));
 var TableSortLabel = _interopDefault(require('@mui/material/TableSortLabel'));
 var hi2 = require('react-icons/hi2');
 var lodash = require('lodash');
-var bi = require('react-icons/bi');
-var cg = require('react-icons/cg');
 var md = require('react-icons/md');
+var axios = _interopDefault(require('axios'));
 var moment = _interopDefault(require('moment'));
+var bi = require('react-icons/bi');
+var cg = require('react-icons/cg');
 var reactHookForm = require('react-hook-form');
 var hi = require('react-icons/hi');
-var axios = _interopDefault(require('axios'));
 var Cards = _interopDefault(require('react-credit-cards'));
 var fi = require('react-icons/fi');
 var styles = require('@mui/material/styles');
@@ -239,6 +239,38 @@ var CartDrawer = function CartDrawer(_ref) {
   }, "continue to checkout"))));
 };
 
+// A type of promise-like that resolves synchronously and supports only one observer
+
+const _iteratorSymbol = /*#__PURE__*/ typeof Symbol !== "undefined" ? (Symbol.iterator || (Symbol.iterator = Symbol("Symbol.iterator"))) : "@@iterator";
+
+const _asyncIteratorSymbol = /*#__PURE__*/ typeof Symbol !== "undefined" ? (Symbol.asyncIterator || (Symbol.asyncIterator = Symbol("Symbol.asyncIterator"))) : "@@asyncIterator";
+
+// Asynchronously call a function and send errors to recovery continuation
+function _catch(body, recover) {
+	try {
+		var result = body();
+	} catch(e) {
+		return recover(e);
+	}
+	if (result && result.then) {
+		return result.then(void 0, recover);
+	}
+	return result;
+}
+
+// Asynchronously await a promise and pass the result to a finally continuation
+function _finallyRethrows(body, finalizer) {
+	try {
+		var result = body();
+	} catch (e) {
+		return finalizer(true, e);
+	}
+	if (result && result.then) {
+		return result.then(finalizer.bind(null, false), finalizer.bind(null, true));
+	}
+	return finalizer(false, result);
+}
+
 var _templateObject$2, _templateObject2$2, _templateObject3$2, _templateObject4$1, _templateObject5$1, _templateObject6$1, _templateObject7$1, _templateObject8, _templateObject9;
 var CartPageSection = styled__default.section(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteralLoose(["\n  background: ", ";\n  max-width: 100%;\n  width: fit-content;\n  background: ", ";\n  overflow: hidden;\n  font-family: 'karla-fonts';\n  border-radius: 28px;\n\n  @media screen and (max-width: 1340px) {\n    padding: 0 1em;\n  }\n  @media screen and (max-width: 640px) {\n    padding: 0 1em;\n  }\n"])), function (props) {
   return props.bg;
@@ -1838,228 +1870,6 @@ var CartPageMainRetail = function CartPageMainRetail(_ref) {
   })));
 };
 
-var _templateObject$5, _templateObject2$5, _templateObject3$5, _templateObject4$4, _templateObject5$4, _templateObject6$4;
-var CartSummaryContainer = styled__default.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  min-height: 580px;\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  @media only screen and (max-width: 1340px) {\n    margin-top: 4em;\n  }\n"])), function (props) {
-  return props.maxWidth || '26.375em';
-}, function (props) {
-  return props.background || '#667080';
-}, function (props) {
-  return props.color || 'white';
-}, function (props) {
-  return props.color || 'white';
-});
-var CartSummaryRow = styled__default.div(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  justify-content: ", ";\n  align-items: center;\n  color: inherit;\n  h6,\n  h5 {\n    margin: 0;\n    font-size: 1em;\n    font-weight: 700;\n    color: inherit;\n    text-transform: capitalize;\n  }\n  h5 {\n    font-size: ", ";\n  }\n"])), function (props) {
-  return props.justify || 'space-between';
-}, function (props) {
-  return props.h5 || '1.31em';
-});
-var CartSummaryHr = styled__default.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__default.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.background || '#bfc3ca';
-}, function (props) {
-  return props.color || '#667080';
-}, function (props) {
-  return props.color || '#667080';
-}, function (props) {
-  return props.btn || '#393f48';
-}, function (props) {
-  return props.retail ? '1.19rem' : 0;
-}, function (props) {
-  return props.Btncolor || 'inherit';
-});
-var CartSummaryCheckoutBtn = styled__default.button(_templateObject5$4 || (_templateObject5$4 = _taggedTemplateLiteralLoose(["\n  font-size: 0.95em;\n  font-weight: 600;\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';
-}, function (props) {
-  return props.retail ? '2.64em' : '';
-});
-var CartSummaryCheckBoxRow = styled__default(CartSummaryRow)(_templateObject6$4 || (_templateObject6$4 = _taggedTemplateLiteralLoose(["\n  justify-content: flex-start;\n  margin-left: 1em;\n  margin-top: 1em;\n  cursor: pointer;\n  .checkBox {\n    width: 0.63em;\n    height: 0.63em;\n    border: 1px solid;\n    border-color: ", ";\n    background: transparent;\n    margin-right: 0.5em;\n    border-radius: 50%;\n    background: ", ";\n  }\n  p {\n    font-size: 1em;\n    font-weight: 6 400;\n    span {\n      font-weight: 600;\n      margin: 0 0.1em;\n    }\n    .underline {\n      font-weight: 400;\n      text-decoration: underline;\n    }\n  }\n"])), function (props) {
-  return props.background || 'white';
-}, function (props) {
-  return props.selected ? props.background : 'transparent';
-});
-
-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,
-    discount = _ref.discount,
-    AddCoupon = _ref.AddCoupon;
-  var cartSummary = styles.cartSummary,
-    Btn = styles.Btn;
-  var _useState = React.useState(''),
-    couponText = _useState[0],
-    setCouponText = _useState[1];
-  return /*#__PURE__*/React__default.createElement(CartSummaryContainer, {
-    background: cartSummary.bg,
-    color: cartSummary.color
-  }, /*#__PURE__*/React__default.createElement("p", null, "Cart summary:"), /*#__PURE__*/React__default.createElement(CartSummaryHr, {
-    color: cartSummary.hr
-  }), /*#__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__default.createElement(CartSummaryRow, null, /*#__PURE__*/React__default.createElement("h6", null, "Discount"), /*#__PURE__*/React__default.createElement("h5", null, "$", (discount === null || discount === void 0 ? void 0 : discount.toFixed(2)) || 0.0)), /*#__PURE__*/React__default.createElement(CartSummaryHr, {
-    color: cartSummary.hr
-  }), retail && /*#__PURE__*/React__default.createElement(material.Stack, {
-    flexDirection: "column",
-    justifyContent: "flexStart",
-    sx: {
-      width: '100%'
-    }
-  }, /*#__PURE__*/React__default.createElement(CartSummaryRow, {
-    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,
-      onClick: function onClick() {
-        setShipping(li);
-      },
-      background: cartSummary.color
-    }, /*#__PURE__*/React__default.createElement("span", {
-      className: "checkBox"
-    }), /*#__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__default.createElement(CartSummaryHr, {
-    color: cartSummary.hr
-  })), /*#__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,
-    onSubmit: function onSubmit(e) {
-      e.preventDefault();
-      AddCoupon(couponText);
-    }
-  }, /*#__PURE__*/React__default.createElement("input", {
-    placeholder: "Coupon code",
-    type: "text",
-    minLength: 3,
-    required: true,
-    value: couponText,
-    onChange: function onChange(e) {
-      return setCouponText(e.target.value);
-    }
-  }), /*#__PURE__*/React__default.createElement("button", null, "apply coupon")), /*#__PURE__*/React__default.createElement(CartSummaryHr, {
-    color: cartSummary.hr
-  }), /*#__PURE__*/React__default.createElement(CartSummaryRow, {
-    h5: "1.64em"
-  }, /*#__PURE__*/React__default.createElement("h6", null, "order total"), retail ? /*#__PURE__*/React__default.createElement("h5", null, "$", (_ref2 = totalCartPrice + (selectedShipping === null || selectedShipping === void 0 ? void 0 : selectedShipping.amount) - discount) === 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__default.createElement(CartSummaryCheckoutBtn, {
-    retail: retail,
-    onClick: function onClick() {
-      if (loading) return;
-      clickRedirect('/checkout');
-    },
-    background: Btn.background,
-    color: Btn.color
-  }, "proceed to checkout")), /*#__PURE__*/React__default.createElement(CartSummaryRow, {
-    justify: "center"
-  }, /*#__PURE__*/React__default.createElement("span", {
-    className: "continueShopping",
-    onClick: function onClick() {
-      if (loading) return;
-      clickRedirect('/');
-    }
-  }, "Continue to shopping")));
-};
-
-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,
-    addCoupon = _ref.addCoupon,
-    discount = _ref.discount;
-  return /*#__PURE__*/React__default.createElement(CartPageSection, {
-    bg: styles.bg,
-    retail: retail
-  }, /*#__PURE__*/React__default.createElement(CartHeading, {
-    color: styles === null || styles === void 0 ? void 0 : styles.headingColor,
-    h1: styles === null || styles === void 0 ? void 0 : styles.h1
-  }, /*#__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, {
-    retail: retail,
-    cartData: cartData,
-    loading: loading,
-    imgnotfoundUrl: imgnotfoundUrl,
-    styles: styles,
-    handleIncrementDecrement: handleIncrementDecrement,
-    handleRemoveProduct: handleRemoveProduct
-  }) : /*#__PURE__*/React__default.createElement(EnhancedTable, {
-    retail: retail,
-    cartData: cartData,
-    loading: loading,
-    imgnotfoundUrl: imgnotfoundUrl,
-    styles: styles,
-    handleIncrementDecrement: handleIncrementDecrement,
-    handleRemoveProduct: handleRemoveProduct,
-    handleRemoveAll: handleRemoveAll
-  }), /*#__PURE__*/React__default.createElement(CartSummary, {
-    retail: retail,
-    shippingData: shippingData,
-    selectedShipping: selectedShipping,
-    setShipping: setShipping,
-    clickRedirect: clickRedirect,
-    subtotal: cartData === null || cartData === void 0 ? void 0 : cartData.totalCartPrice,
-    totalCartPrice: cartData === null || cartData === void 0 ? void 0 : cartData.totalCartPrice,
-    styles: styles,
-    loading: loading,
-    AddCoupon: addCoupon,
-    discount: discount
-  })));
-};
-
-var _templateObject$6, _templateObject2$6, _templateObject3$6, _templateObject4$5, _templateObject5$5, _templateObject6$5, _templateObject7$3;
-var CheckoutPageContainer = styled__default.div(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  max-width: ", ";\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: flex-start;\n  background-color: ", ";\n  margin: 0 auto;\n  padding: 2.375em 3.5em 2.5em 4.5em;\n  padding-left: min(4.5em, 2.5vw);\n  font-family: 'karla-fonts';\n  color: rgba(50, 50, 50, 1);\n  /* max-height: 90vh; */\n  overflow: hidden;\n  /* background: gainsboro; */\n  border-radius: 28px;\n  /* background-color: #fff8f6; */\n  @media only screen and (max-width: 1508px) {\n    flex-direction: column;\n    align-items: center;\n    max-height: max-content;\n  }\n  @media only screen and (max-width: 788px) {\n    padding: 1em 0.5em;\n  }\n  .icon {\n    font-size: 12px;\n  }\n"])), function (props) {
-  return props.maxWidth || '1605px';
-}, function (props) {
-  return props.bg || '#fff8f6';
-});
-var Row = styled__default.div(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n"])));
-var CheckoutMainWithHeader = styled__default(material.Stack)(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteralLoose([""])));
-var CheckoutMain = styled__default.div(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  max-width: 1008px;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n  margin-right: 2em;\n  max-height: 65vh;\n  padding-right: 2em;\n  overflow-y: auto;\n  position: relative;\n  padding-top: 2em;\n  padding-bottom: 3em;\n  /* width */\n  ::-webkit-scrollbar {\n    width: 10px;\n    background: ", ";\n    border-radius: 16px;\n  }\n\n  /* Track */\n  ::-webkit-scrollbar-track {\n    background: ", ";\n    border-radius: 16px;\n  }\n\n  /* Handle */\n  ::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 16px;\n    border: 3px solid ", ";\n    /* border: 3px solid black; */\n  }\n  @media only screen and (max-width: 1488px) {\n    margin-bottom: 3em;\n    min-height: max-content;\n    max-height: max-content;\n    margin-right: 0;\n    overflow: visible;\n  }\n  @media only screen and (max-width: 788px) {\n    max-width: 100vw;\n    padding-right: 0;\n    width: 98vw;\n    min-width: 90vw;\n    padding-top: 1em;\n  }\n  /* overflow: hidden; */\n"])), function (props) {
-  return props.bg || 'rgba(245, 197, 189, 0.5)';
-}, function (props) {
-  return props.bg || 'rgba(245, 197, 189, 0.5)';
-}, function (props) {
-  return props.color || '#ef9687';
-}, function (props) {
-  return props.bg || 'rgba(245, 197, 189, 0.5)';
-});
-var CheckoutHeading = styled__default.div(_templateObject5$5 || (_templateObject5$5 = _taggedTemplateLiteralLoose(["\n  margin-left: 2.5em;\n  margin-bottom: 2em;\n  h5 {\n    font-size: 2.3em;\n    font-weight: 600;\n    text-transform: capitalize;\n  }\n  p {\n    font-size: 0.875em;\n    font-weight: 300;\n    margin-top: 0.5em;\n  }\n  @media only screen and (max-width: 788px) {\n    margin-left: 0;\n    padding-left: 1em;\n  }\n"])));
-var CheckoutHeader = styled__default(Row)(_templateObject6$5 || (_templateObject6$5 = _taggedTemplateLiteralLoose(["\n  justify-content: space-around;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  position: sticky;\n  top: 0;\n  background-color: white;\n  z-index: 1;\n  justify-content: flex-start;\n  min-height: 4.18em;\n  max-height: 4.1875em;\n  max-width: 57.43em;\n  width: 98%;\n  background: #ffffff;\n  border-radius: 20px;\n  margin-bottom: 1em;\n  margin-right: 0.35em;\n  color: #7d7b7b;\n  padding: 0 2em;\n  margin-right: 5em;\n  .row {\n    display: flex;\n    color: inherit;\n    flex-direction: row;\n    align-items: center;\n    justify-content: flex-start;\n    text-transform: capitalize;\n    margin-right: 2.4%;\n    .icon {\n      font-size: 14px;\n      font-weight: 400;\n      display: grid;\n      place-items: center;\n      margin-right: 6px;\n      color: inherit;\n    }\n    p,\n    span {\n      font-size: 0.95em;\n      color: inherit;\n      font-weight: 300;\n    }\n  }\n  .checked {\n    p,\n    span {\n      color: #323232;\n    }\n    .icon {\n      color: #249937;\n    }\n  }\n  @media only screen and (max-width: 1508px) {\n    margin-right: 2em;\n  }\n  @media only screen and (max-width: 788px) {\n    width: 100%;\n    padding: 2em 1em;\n    margin: 1.4em 0;\n    .row {\n      margin-right: 4.5%;\n      p {\n        font-size: 12px;\n      }\n      span {\n        display: none;\n      }\n    }\n  }\n"])));
-var CheckoutStepIcon = styled__default.div(_templateObject7$3 || (_templateObject7$3 = _taggedTemplateLiteralLoose(["\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  font-size: 5px;\n  display: grid;\n  place-items: center;\n  margin: auto;\n  padding: 0;\n  margin-left: 2px;\n  .circle {\n    width: 16px;\n    height: 16px;\n    border-radius: 50%;\n    font-size: 5px;\n    display: grid;\n    place-items: center;\n    margin: auto;\n    padding: 0;\n  }\n  .ic {\n    font-size: 8px;\n  }\n"])));
-
 var API_END_POINT = '';
 var STORAGE_KEYS = {
   ACCESS_TOKEN: 'token',
@@ -2081,1184 +1891,1526 @@ var DATE_FORMATS = {
   TIME: 'hh:mm:ss A'
 };
 
-var convertCamCaseToSnake = function convertCamCaseToSnake(child) {
-  var _Object$keys;
-  var data = [];
-  var i = 1;
-  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(),
-      name: result.charAt(0).toUpperCase() + result.slice(1),
-      value: child[k]
-    };
-    data.push(dataIndex);
-    i++;
-  });
-  return data;
-};
-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;
-  if (!time) {
-    return time;
-  }
-  var convertedTime = moment.utc(time).clone().local();
-  if (!isMoment) {
-    convertedTime = convertedTime.format(format);
+var erLocalStorage = {
+  setItem: function setItem(key, value) {
+    localStorage.setItem(key, value);
+  },
+  getItem: function getItem(key) {
+    return localStorage.getItem(key);
+  },
+  removeItem: function removeItem(key) {
+    localStorage.removeItem(key);
+  },
+  setJSONItem: function setJSONItem(key, value) {
+    value = JSON.stringify(value);
+    localStorage.setItem(key, value);
+  },
+  getJSONItem: function getJSONItem(key) {
+    var returnValue = {};
+    try {
+      returnValue = localStorage.getItem(key) ? JSON.parse(localStorage.getItem(key)) : {};
+    } catch (e) {
+      console.error(e);
+    }
+    return returnValue;
   }
-  return convertedTime;
 };
-var getUTCTime = function getUTCTime(_ref2) {
-  var time = _ref2.time,
-    _ref2$format = _ref2.format,
-    format = _ref2$format === void 0 ? DATE_FORMATS.DEFAULT_DATE_TIME_FORMAT : _ref2$format,
-    isMoment = _ref2.isMoment;
-  if (!time) {
-    return time;
-  }
-  var convertedTime = moment(time).utc();
-  if (!isMoment) {
-    convertedTime = convertedTime.format(format);
+
+var ErCache = /*#__PURE__*/function () {
+  function ErCache() {
+    this.sessionStorage = typeof window !== 'undefined' ? window.sessionStorage : {};
   }
-  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]];
+  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));
+    } catch (e) {
+      return {};
     }
-    c = '0x' + c.join('');
-    return [c >> 16 & 255, c >> 8 & 255, c & 255].join(',');
-  } else return hex;
-}
-var getRandomString = function getRandomString(length) {
-  if (length === void 0) {
-    length = 16;
-  }
-  var text = '';
-  var possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-  for (var i = 0; i < length; i++) {
-    text += possible.charAt(Math.floor(Math.random() * possible.length));
-  }
-  return text;
-};
-var currentTimeText = function currentTimeText() {
-  var data = [[0, 4, 'Good Night'], [5, 11, 'Good Morning'], [12, 16, 'Good Afternoon'], [17, 19, 'Good Evening'], [20, 24, 'Good Night']];
-  var hr = new Date().getHours();
-  var text = '';
-  for (var i = 0; i < data.length; i++) {
-    if (hr >= data[i][0] && hr <= data[i][1]) {
-      text = data[i][2];
+  };
+  _proto.removeItem = function removeItem(key) {
+    this.sessionStorage.removeItem(key);
+  };
+  _proto.setItem = function setItem(_ref) {
+    var key = _ref.key,
+      value = _ref.value;
+    return this.sessionStorage.setItem(key, value);
+  };
+  _proto.setJSONItem = function setJSONItem(_ref2) {
+    var key = _ref2.key,
+      value = _ref2.value;
+    try {
+      return this.sessionStorage.setItem(key, JSON.stringify(value));
+    } catch (e) {
+      console.error(e);
     }
-  }
-  return text;
-};
-
-var _templateObject$7, _templateObject2$7, _templateObject3$7;
-var CheckoutSummaryContainer = styled__default.div(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteralLoose(["\n  background: ", ";\n  color: ", ";\n  border-radius: 20px;\n  padding: max(1.5em, 30px);\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  max-width: 422px;\n  min-width: min(412px, 95%);\n  font-size: 16px;\n  margin-top: 6.15em;\n  @media only screen and (max-width: 1508px) {\n    margin-top: 0;\n  }\n"])), function (props) {
-  return props.bg || 'rgba(255, 240, 236, 1)';
-}, function (props) {
-  return props.color || ' rgba(50, 50, 50, 1)';
-});
-var TextRow = styled__default.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__default.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    max-width: 300px;\n    width: fit-content;\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    opacity: 0;\n  }\n"])));
+  };
+  return ErCache;
+}();
+var erCache = new ErCache();
 
-var CheckoutSummary = function CheckoutSummary(_ref) {
-  var total = _ref.total,
-    billingInformation = _ref.billingInformation,
-    shippingInformation = _ref.shippingInformation,
-    paymentMethod = _ref.paymentMethod,
-    shippingMethod = _ref.shippingMethod,
-    bg = _ref.bg,
-    color = _ref.color;
-  return /*#__PURE__*/React__default.createElement(CheckoutSummaryContainer, {
-    bg: bg,
-    color: color
-  }, /*#__PURE__*/React__default.createElement(TextRow, null, /*#__PURE__*/React__default.createElement("p", {
-    className: "text"
-  }, "order total :"), /*#__PURE__*/React__default.createElement("h6", {
-    className: "total"
-  }, renderMoney(total + (shippingMethod === null || shippingMethod === void 0 ? void 0 : shippingMethod.amount)))), /*#__PURE__*/React__default.createElement(FilledInfo, null, /*#__PURE__*/React__default.createElement("h6", {
-    className: "heading"
-  }, "Billing information"), billingInformation !== null && billingInformation !== void 0 && billingInformation.title ? /*#__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__default.createElement("p", null, billingInformation === null || billingInformation === void 0 ? void 0 : billingInformation.data)) : /*#__PURE__*/React__default.createElement("p", {
-    className: "blank bold"
-  }, "- - - - -", /*#__PURE__*/React__default.createElement("br", null), "- - -")), /*#__PURE__*/React__default.createElement(FilledInfo, null, /*#__PURE__*/React__default.createElement("h6", {
-    className: "heading"
-  }, "Shipping information"), shippingInformation !== null && shippingInformation !== void 0 && shippingInformation.title ? /*#__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__default.createElement("p", null, shippingInformation === null || shippingInformation === void 0 ? void 0 : shippingInformation.data)) : /*#__PURE__*/React__default.createElement("p", {
-    className: "blank bold"
-  }, "- - - - -", /*#__PURE__*/React__default.createElement("br", null), "- - -")), /*#__PURE__*/React__default.createElement(FilledInfo, null, /*#__PURE__*/React__default.createElement("h6", {
-    className: "heading"
-  }, "Shipping Method"), /*#__PURE__*/React__default.createElement("p", {
-    className: "bold"
-  }, shippingMethod === null || shippingMethod === void 0 ? void 0 : shippingMethod.name), /*#__PURE__*/React__default.createElement("p", {
-    className: "bold"
-  }, renderMoney(shippingMethod === null || shippingMethod === void 0 ? void 0 : shippingMethod.amount))), /*#__PURE__*/React__default.createElement(FilledInfo, null, /*#__PURE__*/React__default.createElement("h6", {
-    className: "heading"
-  }, "Payment Method"), /*#__PURE__*/React__default.createElement("p", {
-    className: "bold"
-  }, paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.name)));
+var getItem = erLocalStorage.getItem,
+  getJSONItem = erLocalStorage.getJSONItem,
+  setItem = erLocalStorage.setItem;
+var ACCESS_TOKEN = STORAGE_KEYS.ACCESS_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;
+  return API_CACHE_PREFIX + "_" + path + "_" + JSON.stringify(queryParams);
 };
-
-var _templateObject$8, _templateObject2$8, _templateObject3$8, _templateObject4$6, _templateObject5$6, _templateObject6$6, _templateObject7$4, _templateObject8$1, _templateObject9$1, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18;
-var StepContainer = styled__default.div(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  min-width: 57.43em;\n  max-width: 57.43em;\n  background: white;\n  padding: 1em 2em;\n  background: #ffffff;\n  border-radius: 20px;\n  margin-left: 2em;\n  margin-top: -2em;\n  margin-bottom: 1em;\n  @media screen and (max-width: 1305px) {\n    width: 80vw;\n    min-width: 0;\n  }\n  @media screen and (max-width: 768px) {\n    width: 96%;\n    margin-left: 1em;\n    padding: 0.8em;\n  }\n  @media screen and (max-width: 540px) {\n    width: 94%;\n    margin-left: 1.2em;\n  }\n"])));
-var StepsContent = styled__default.div(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteralLoose(["\n  padding-left: 1.565em;\n  min-height: max-content;\n  .MuiOutlinedInput-root {\n    background: ", ";\n  }\n\n  p {\n    font-size: 0.75em;\n  }\n  .bold {\n    text-transform: uppercase;\n    word-spacing: 5px;\n    margin-top: 0.95em;\n    span {\n      font-weight: 600;\n      cursor: pointer;\n      font-size: 0.94rem;\n    }\n    .red {\n      color: red;\n    }\n  }\n  @media screen and (max-width: 768px) {\n    padding: 0;\n    width: 100%;\n  }\n"])), function (props) {
-  return (props.bg || 'transparent') + '!important';
-});
-var StepsHeaderContainer = styled__default.div(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: flex-start;\n  font-family: 'karla-fonts';\n  color: #323232;\n  /* padding: ", "; */\n  margin-bottom: ", ";\n  margin-top: ", ";\n  margin-left: ", ";\n  /* color: grey; */\n  border-bottom: 1px solid #fff0ec;\n  background: #ffffff;\n  border-radius: 20px;\n  max-width: 919px;\n\n  min-height: 4.35em;\n  max-height: 4.35em;\n  padding: ", ";\n  h5 {\n    font-size: 16px;\n    font-weight: 600;\n    text-transform: capitalize;\n    margin-left: 0.6em;\n  }\n  .icon {\n    font-size: 1.3em;\n    margin-right: 8px;\n  }\n  .dropIcon {\n    font-size: 1.4em;\n    cursor: pointer;\n    transform: rotate(-90deg);\n    transition: 0.3s;\n    color: rgba(50, 50, 50, 0.75);\n    cursor: ", ";\n  }\n  .red {\n    font-weight: 600;\n    color: #fd0015;\n    font-size: inherit;\n  }\n  @media screen and (max-width: 768px) {\n    max-width: 97%;\n    margin-left: 0.5em;\n    padding-right: 1em;\n    h5 {\n      font-size: 12px;\n    }\n  }\n"])), function (props) {
-  return props.single ? '1.8em 2em' : '1em 0';
-}, function (props) {
-  return props.single ? '-1.56em' : '1em';
-}, function (props) {
-  return props.single ? '-1.56em' : '0';
-}, function (props) {
-  return props.single ? '1.45em' : '0';
-}, function (props) {
-  return props.single ? '0 2em' : '0';
-}, function (props) {
-  return props.username ? 'not-allowed' : 'pointer';
-});
-var TextFeildContainer = styled__default.div(_templateObject4$6 || (_templateObject4$6 = _taggedTemplateLiteralLoose(["\n  && {\n    input {\n      font-size: 0.875em !important;\n\n      color: rgba(107, 106, 106, 1);\n      color: black;\n      &::placeholder {\n        font-size: 0.975em !important;\n      }\n    }\n    .icon {\n      color: black;\n      font-size: 1em;\n    }\n  }\n"])));
-var CommonCheckoutBtn = styled__default.button(_templateObject5$6 || (_templateObject5$6 = _taggedTemplateLiteralLoose(["\n  border: none;\n  outline: none;\n  width: ", ";\n  height: ", ";\n\n  background: ", ";\n  display: grid;\n  place-items: center;\n  color: white;\n  margin: 0 1em;\n  font-weight: 500;\n  letter-spacing: 1px;\n  text-transform: ", ";\n  transition: 0.4s;\n  cursor: ", ";\n  &:hover,\n  &:focus {\n    opacity: 0.7;\n  }\n"])), function (props) {
-  return props.width || '8.05em';
-}, function (props) {
-  return props.height || '2.25em';
-}, function (props) {
-  return props.color || '#FD0015';
-}, function (props) {
-  return props.uppercase ? 'uppercase' : 'capitalized';
-}, function (props) {
-  return props.disabled ? 'not-allowed' : 'pointer';
-});
-var Select = styled__default.div.attrs({
-  className: 'checkout-input'
-})(_templateObject6$6 || (_templateObject6$6 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 54px;\n  border-radius: 10px;\n  background: ", ";\n  outline: none;\n  border: none;\n  padding: 0 1em;\n  cursor: pointer;\n  select {\n    width: 100%;\n    height: 100%;\n    border: none;\n    outline: none;\n    padding: 0.5em 0;\n    color: rgba(107, 106, 106, 0.6);\n    background: ", ";\n  }\n"])), function (props) {
-  return props.bg || 'transparent';
-}, function (props) {
-  return props.bg || 'transparent';
-});
-var SaveButton = styled__default.button.attrs({
-  className: 'checkout-btn'
-})(_templateObject7$4 || (_templateObject7$4 = _taggedTemplateLiteralLoose(["\n  border: none;\n  outline: none;\n  font-size: 0.8125em;\n  text-transform: uppercase;\n  font-weight: 600;\n  border-radius: 7px;\n  padding: 0.55em 1em;\n  background: ", ";\n  display: grid;\n  place-items: center;\n  color: white;\n  margin: 1em 0;\n  letter-spacing: 1px;\n  transition: 0.4s;\n  cursor: ", ";\n  &:hover,\n  &:focus {\n    opacity: 0.7;\n  }\n"])), function (props) {
-  return props.color || '#FD0015';
-}, function (props) {
-  return props.disabled ? 'not-allowed' : 'pointer';
-});
-var ButtonRowContainer = styled__default.div(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  align-items: center;\n  button {\n    width: 4.862em;\n    height: 1.96em;\n    border-radius: 0.43em;\n    display: flex;\n    flex-direction: row;\n    justify-content: center;\n    align-items: center;\n    font-weight: 600;\n    letter-spacing: 1px;\n    color: white;\n    background-color: ", ";\n    border: 2px solid\n      ", ";\n    cursor: ", ";\n  }\n  .back {\n    font-size: 0.875em;\n    font-weight: 500;\n    justify-content: flex-start;\n    margin-right: 0.2em;\n    color: #323232;\n    background: transparent;\n    border: none;\n    cursor: ", ";\n    font-size: 0.8em;\n    transition: 0.4s;\n    .icon {\n      font-size: 1.2em;\n      margin-right: 2px;\n    }\n    &:hover,\n    &:focus {\n      letter-spacing: 1px;\n      outline: none;\n    }\n  }\n"])), function (props) {
-  return props.color || '#fd0015';
-}, function (props) {
-  return props.color ? material.alpha(props.color, 0.87) : 'rgba(254, 81, 96, 0.87)';
-}, function (props) {
-  return props.disabledNext ? 'not-allowed' : 'pointer';
-}, function (props) {
-  return props.disabledBack ? 'not-allowed' : 'pointer';
-});
-var CheckBoxRow = styled__default.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\n  button {\n    border: none;\n    padding: 0.8em 3em;\n    background: ", ";\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: ", ";\n    padding: 0.8em 2em;\n    &:hover {\n      padding: 0.8em 2.4em;\n    }\n  }\n  .bold,\n  .red {\n    font-weight: 600;\n    font-size: 1.125em;\n  }\n  .red {\n    margin-left: 0.5em;\n    color: ", ";\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;
-}, function (props) {
-  return props.bg || 'rgba(253, 0, 21, 1)';
-}, function (props) {
-  return props.bg ? material.alpha(props.bg, 0.6) : 'rgba(107, 106, 106, 1)';
-}, function (prop) {
-  return prop.colorText || 'red';
-});
-var CreditCardFextField = styled__default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n  .MuiOutlinedInput-root {\n    background: ", ";\n  }\n  .save-btn {\n    background: ", ";\n  }\n"])), function (prop) {
-  return prop.bgInput + '!important' || '';
-}, function (prop) {
-  return prop.btnBg + '!important' || '';
-});
-var CardHeading = styled__default.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n  font-weight: 600;\n  margin-bottom: 1rem;\n"])));
-var DeliveryOptionContainer = styled__default.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n"])));
-var DeliveryOption = styled__default.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: flex-start;\n  max-width: 691px;\n  height: 40px;\n  padding: 0 1em;\n  border: 1px solid transparent;\n  transition: 0.3s;\n  cursor: pointer;\n  background-color: ", ";\n  border: ", ";\n  border-bottom: ", ";\n  border-radius: 5px;\n  &:last-child {\n    border-bottom: ", ";\n  }\n  &:hover {\n    background-color: ", ";\n    border: ", ";\n    border-radius: 5px;\n  }\n  p {\n    font-weight: 500;\n    color: black;\n    font-size: 0.95em;\n    text-transform: capitalize;\n  }\n  .circle {\n    border-radius: 50%;\n    display: grid;\n    place-items: center;\n    background: linear-gradient(345.48deg, #3c332a -131.29%, #ffffff 124.82%);\n    margin-right: 1em;\n    width: 14px;\n    height: 14px;\n    min-width: 14px;\n    min-height: 14px;\n    cursor: pointer;\n    .inner {\n      width: 10px;\n      height: 10px;\n      border-radius: 50%;\n      display: grid;\n      place-items: center;\n      background: linear-gradient(\n        326.37deg,\n        rgba(67, 58, 42, 0.9) -219.66%,\n        rgba(255, 255, 255, 0.9) 90.45%\n      );\n      box-shadow: inset -1px -1px 1px rgba(255, 255, 255, 0.45),\n        inset 0px 0px 10px rgba(0, 0, 0, 0.2);\n    }\n    .fill {\n      width: 6px;\n      height: 6px;\n      background: radial-gradient(\n            15.79% 15.79% at 36.84% 31.58%,\n            #ffffff 0%,\n            rgba(255, 255, 255, 0) 100%\n          )\n          /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */,\n        linear-gradient(\n          358.85deg,\n          rgba(157, 18, 30, 0.2) -19.81%,\n          rgba(12, 96, 157, 0) 64.74%\n        ),\n        radial-gradient(50% 50% at 50% 50%, #fab0b6 0%, #fd0015 100%), #fd0015;\n      background-blend-mode: normal, multiply, normal, normal;\n      box-shadow: 0px 0.5px 0px rgba(253, 0, 21, 0.25),\n        0px 1px 1px rgba(253, 0, 21, 0.2);\n      border-radius: 50%;\n      background: ", ";\n    }\n  }\n  .amount {\n    margin-left: auto;\n    color: ", ";\n    font-weight: ", ";\n    font-size: 0.95em;\n  }\n"])), function (props) {
-  return props.hovered ? props.bg : '';
-}, function (props) {
-  return props.hovered ? "1px solid " + props.border : '1px solid #fce1d9';
-}, function (props) {
-  return !props.hovered && "none";
-}, function (props) {
-  return props.hovered ? "1px solid " + props.border : '1px solid #fce1d9';
-}, function (props) {
-  return props.bg || '#fff0ec';
-}, function (props) {
-  return props.border ? "1px solid " + props.border : '1px solid #fce1d9';
-}, function (props) {
-  return props.color || '#fd0015';
-}, function (props) {
-  return props.buttonBg || props.color || '#fd0015';
-}, function (props) {
-  return props.hovered ? '800' : '700';
-});
-var CreditCard = styled__default.div(_templateObject14 || (_templateObject14 = _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__default.div(_templateObject15 || (_templateObject15 = _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__default(material.TableRow)(_templateObject16 || (_templateObject16 = _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: ", "\n      font-weight: inherit;\n    }\n    .light {\n      font-weight: 300;\n    }\n    .price {\n      font-weight: 600;\n    }\n    .sm {\n      font-weight: 500;\n    }\n    .bolder {\n      font-weight: 700;\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 ? props.bg || "'rgba(255, 240, 236, 1)'" : 'white';
-}, function (props) {
-  return props.bg || 'red';
-});
-var StyledTableCell = styled__default(material.TableCell)(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n  && {\n    border: none;\n    font-size: 1em;\n    .noAboveSm {\n      display: none;\n    }\n    @media only screen and (max-width: 748px) {\n      display: ", ";\n      padding: 0.5em 0.3em;\n      .noAboveSm {\n        display: inline-block;\n        margin-right: 6px;\n      }\n    }\n  }\n"])), function (props) {
-  return props.noSmall ? 'none' : '';
-});
-var BottomGrid = styled__default(material.Grid)(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n  .bold {\n    font-weight: 600;\n    text-transform: capitalize;\n    margin: 1em 0;\n    font-size: 1em;\n  }\n  .icon {\n    font-size: 1.6em;\n    color: ", ";\n  }\n  textarea {\n    width: 100%;\n    resize: none;\n    border: 1px solid\n      ", ";\n    border-radius: 4px;\n    margin-bottom: 2em;\n    padding: 1em;\n    background: ", ";\n  }\n  p {\n    font-size: 12px;\n    .ul {\n      text-decoration: underline;\n      font-size: inherit;\n    }\n  }\n  .bottom {\n    margin-left: 3em;\n    font-style: italic;\n    span {\n      font-weight: 600;\n      color: ", ";\n\n      cursor: pointer;\n      &:hover {\n        text-decoration: underline;\n      }\n    }\n  }\n"])), function (prop) {
-  return prop.bg || 'rgba(253, 0, 21, 1)';
-}, function (prop) {
-  var _prop$bgTextArea;
-  return ((_prop$bgTextArea = prop.bgTextArea) === null || _prop$bgTextArea === void 0 ? void 0 : _prop$bgTextArea.border) || 'rgba(253, 0, 21, 0.5)';
-}, function (prop) {
-  var _prop$bgTextArea2;
-  return ((_prop$bgTextArea2 = prop.bgTextArea) === null || _prop$bgTextArea2 === void 0 ? void 0 : _prop$bgTextArea2.bg) || '#fff8f6';
-}, function (props) {
-  return props.primaryColor || 'rgba(253, 0, 21, 1)';
-});
-
-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;
-  return /*#__PURE__*/React__default.createElement(TextFeildContainer, {
-    className: "checkout-form-input"
-  }, /*#__PURE__*/React__default.createElement(reactHookForm.Controller, _extends({}, controlls, {
-    defaultValue: "",
-    render: function render(_ref2) {
-      var field = _ref2.field;
-      return /*#__PURE__*/React__default.createElement(material.TextField, _extends({
-        placeholder: placeholder,
-        variant: "outlined",
-        required: true,
-        InputProps: showIcon ? {
-          startAdornment: /*#__PURE__*/React__default.createElement(material.InputAdornment, {
-            position: "start"
-          }, showIcon())
-        } : {},
-        fullWidth: true,
-        type: type || 'text'
-      }, field, {
-        autoFocus: autoFocus
-      }));
-    }
-  })));
-};
-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;
-  return /*#__PURE__*/React__default.createElement(TextFeildContainer, null, /*#__PURE__*/React__default.createElement(reactHookForm.Controller, {
-    control: control,
-    name: name,
-    defaultValue: "",
-    render: function render(_ref4) {
-      var field = _ref4.field;
-      return /*#__PURE__*/React__default.createElement(material.TextField, _extends({
-        fullWidth: true,
-        select: true,
-        displayEmpty: true,
-        required: true,
-        label: name,
-        autoFocus: autoFocus
-      }, field), key && (List === null || List === void 0 ? void 0 : List.map(function (item, i) {
-        return /*#__PURE__*/React__default.createElement(material.MenuItem, {
-          key: i,
-          value: item[val]
-        }, item[key]);
-      })));
-    }
+var getAPICacheData = function getAPICacheData(_ref2) {
+  var path = _ref2.path,
+    queryParams = _ref2.queryParams;
+  var cachedData = erCache.getJSONItem(getKeyFromPath({
+    path: path,
+    queryParams: queryParams
   }));
+  return lodash.isEmpty(cachedData) ? null : cachedData;
 };
-
-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;
-  return /*#__PURE__*/React__default.createElement(StepsHeaderContainer, {
-    single: single,
-    username: username,
-    onClick: function onClick() {
-      if (!handleClick) return;
-      if (username) return;
-      handleClick();
-    }
-  }, /*#__PURE__*/React__default.createElement(material.Stack, {
-    justifyContent: 'space-between',
-    flexDirection: "row",
-    sx: {
-      width: '100%'
-    },
-    alignItems: "center"
-  }, /*#__PURE__*/React__default.createElement(material.Stack, {
-    flexDirection: "row",
-    alignItems: "center"
-  }, !withoutIcon && /*#__PURE__*/React__default.createElement("img", {
-    src: "/images/checkout/vector-" + icon + ".svg",
-    alt: "vector",
-    width: 18,
-    height: 18
-  }), username ? /*#__PURE__*/React__default.createElement("h5", null, "welcome", ' ', /*#__PURE__*/React__default.createElement("span", {
-    className: "primaryColor",
-    style: {
-      fontWeight: 700
-    }
-  }, username)) : /*#__PURE__*/React__default.createElement("h5", null, text)), !withoutIcon && /*#__PURE__*/React__default.createElement(hi.HiOutlineChevronDown, {
-    className: "dropIcon",
-    style: closed ? {
-      transform: 'rotate(-90deg)'
-    } : {
-      transform: 'rotate(0deg)'
-    }
-  })));
-};
-
-var Step0 = function Step0(_ref) {
-  var loading = _ref.loading,
-    userName = _ref.userName,
-    handleLogin = _ref.handleLogin,
-    clickRedirect = _ref.clickRedirect;
-  var _useForm = reactHookForm.useForm(),
-    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,
-    icon: 1
-  }), /*#__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__default.createElement("span", {
-    onClick: function onClick() {
-      return clickRedirect('account/register');
-    }
-  }, "register"), ' ', "| ", /*#__PURE__*/React__default.createElement("span", {
-    className: "red primaryColor"
-  }, "login")), /*#__PURE__*/React__default.createElement(material.Grid, {
-    container: true,
-    component: 'form',
-    onSubmit: handleSubmit(onSubmit),
-    rowSpacing: 2,
-    sx: {
-      marginTop: '1em'
-    }
-  }, /*#__PURE__*/React__default.createElement(material.Grid, {
-    item: true,
-    sm: 6.5,
-    xs: 12
-  }, /*#__PURE__*/React__default.createElement(CheckoutInput, {
-    controlls: {
-      name: 'email',
-      placeholder: 'E-Mail Address',
-      control: control,
-      autoFocus: true,
-      type: 'email'
-    }
-  })), /*#__PURE__*/React__default.createElement(material.Grid, {
-    item: true,
-    sm: 6.5,
-    xs: 12
-  }, /*#__PURE__*/React__default.createElement(CheckoutInput, {
-    controlls: {
-      name: 'password',
-      placeholder: 'Password',
-      control: control,
-      type: 'password'
-    }
-  })), /*#__PURE__*/React__default.createElement(material.Grid, {
-    item: true,
-    sm: 4
-  }), /*#__PURE__*/React__default.createElement(CheckBoxRow, {
-    padding: ".8em 0 0 0"
-  }, /*#__PURE__*/React__default.createElement(material.Checkbox, {
-    size: "small"
-  }), /*#__PURE__*/React__default.createElement("p", null, "Remember me")), /*#__PURE__*/React__default.createElement(material.Grid, {
-    item: true,
-    xs: 12
-  }, /*#__PURE__*/React__default.createElement(CommonCheckoutBtn, {
-    padding: ".8em 3em",
-    uppercase: true,
-    type: "submit",
-    className: "primaryBgColor"
-  }, loading ? /*#__PURE__*/React__default.createElement(material.CircularProgress, {
-    color: "inherit",
-    size: 15
-  }) : 'Login')))));
-};
-
-var ButtonRow = function ButtonRow(_ref) {
-  var handleBack = _ref.handleBack,
-    handleNext = _ref.handleNext,
-    backDisabled = _ref.backDisabled,
-    nextDisabled = _ref.nextDisabled,
-    color = _ref.color;
-  return /*#__PURE__*/React__default.createElement(ButtonRowContainer, {
-    disabledBack: backDisabled,
-    disabledNext: nextDisabled,
-    color: color
-  }, /*#__PURE__*/React__default.createElement("button", {
-    className: "back",
-    tabIndex: "1",
-    onClick: function onClick() {
-      if (backDisabled) return;
-      handleBack();
-    }
-  }, /*#__PURE__*/React__default.createElement(md.MdArrowBack, {
-    className: "icon"
-  }), "Back"), /*#__PURE__*/React__default.createElement("button", {
-    disabled: nextDisabled,
-    tabIndex: "1",
-    onClick: function onClick() {
-      if (nextDisabled) return;
-      handleNext();
-    },
-    className: "checkout-btn"
-  }, "Next"));
+var setAPIDataToCache = function setAPIDataToCache(_ref3) {
+  var path = _ref3.path,
+    queryParams = _ref3.queryParams,
+    data = _ref3.data;
+  erCache.setJSONItem({
+    key: getKeyFromPath({
+      path: path,
+      queryParams: queryParams
+    }),
+    value: data
+  });
 };
-
-var StoreForm = function StoreForm(_ref) {
-  var control = _ref.control,
-    _onSubmit = _ref.onSubmit,
-    handleSubmit = _ref.handleSubmit,
-    color = _ref.color;
-  return /*#__PURE__*/React__default.createElement(material.Grid, {
-    container: true,
-    columnSpacing: 1,
-    component: "form",
-    rowSpacing: 1,
-    paddingY: 4,
-    onSubmit: function onSubmit(e) {
-      e.preventDefault();
-      handleSubmit(_onSubmit)(e);
-    }
-  }, /*#__PURE__*/React__default.createElement(material.Grid, {
-    item: true,
-    xs: 12,
-    sm: 10
-  }, /*#__PURE__*/React__default.createElement(CheckoutInput, {
-    controlls: {
-      name: 'storeName',
-      placeholder: 'Store Name',
-      control: control
-    }
-  })), /*#__PURE__*/React__default.createElement(material.Grid, {
-    item: true,
-    xs: 6,
-    sm: 3.33
-  }, /*#__PURE__*/React__default.createElement(CheckoutInput, {
-    controlls: {
-      name: 'taxNumber',
-      placeholder: 'Tax number',
-      control: control,
-      type: 'number'
-    }
-  })), /*#__PURE__*/React__default.createElement(material.Grid, {
-    item: true,
-    xs: 6,
-    sm: 3.33
-  }, /*#__PURE__*/React__default.createElement(CheckoutInput, {
-    controlls: {
-      name: 'Mobile',
-      placeholder: 'Mobile',
-      control: control,
-      type: 'number'
-    }
-  })), /*#__PURE__*/React__default.createElement(material.Grid, {
-    item: true,
-    xs: 6,
-    sm: 3.33
-  }, /*#__PURE__*/React__default.createElement(CheckoutInput, {
-    controlls: {
-      name: 'email',
-      placeholder: 'Email',
-      control: control
-    }
-  })), /*#__PURE__*/React__default.createElement(material.Grid, {
-    item: true,
-    xs: 12,
-    sm: 10
-  }, /*#__PURE__*/React__default.createElement(CheckoutInput, {
-    controlls: {
-      name: 'description',
-      placeholder: 'Description',
-      control: control,
-      rows: '4'
-    }
-  })), /*#__PURE__*/React__default.createElement(material.Grid, {
-    item: true,
-    xs: 4
-  }, /*#__PURE__*/React__default.createElement(SaveButton, {
-    color: color
-  }, "save store")));
+var CancelToken = axios.CancelToken;
+var source;
+var API$1 = 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;
+    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,
+            queryParams: queryParams
+          })) {
+            response = getAPICacheData({
+              path: apiUrl,
+              queryParams: queryParams
+            });
+          } else {
+            return Promise.resolve(axios.request({
+              method: method || 'GET',
+              url: apiUrl,
+              data: formData || body,
+              params: queryParams,
+              headers: requestHeaders,
+              cancelToken: source.token,
+              responseType: responseTypeData ? responseTypeData : null
+            })).then(function (_axios$request) {
+              response = _axios$request;
+              if (cache) {
+                setAPIDataToCache({
+                  path: apiUrl,
+                  queryParams: queryParams,
+                  data: response
+                });
+              }
+            });
+          }
+        }();
+        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 {
+              console.log('Exception on API call', url, exception);
+              return Promise.resolve(handleError({
+                exception: exception,
+                url: url,
+                apiData: apiData,
+                hideErrorMessage: hideErrorMessage
+              }));
+            }
+          }();
+        }
+        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({
+                  exception: exception,
+                  url: url,
+                  apiData: apiData,
+                  hideErrorMessage: true
+                })).then(function (_await$handleError) {
+                  _exit = true;
+                  return _await$handleError;
+                });
+              }
+            }();
+          }
+        }();
+        return _temp3 && _temp3.then ? _temp3.then(_temp4) : _temp4(_temp3);
+      });
+    }, function (_wasThrown, _result) {
+      if (_wasThrown) throw _result;
+      return _result;
+    }));
+  } catch (e) {
+    return Promise.reject(e);
+  }
 };
-
-var AddressForm = function AddressForm(_ref) {
-  var control = _ref.control,
-    countries = _ref.countries,
-    states = _ref.states,
-    _onSubmit = _ref.onSubmit,
-    handleSubmit = _ref.handleSubmit,
-    color = _ref.color;
-  return /*#__PURE__*/React__default.createElement(material.Grid, {
-    container: true,
-    rowSpacing: 2,
-    columnSpacing: 2,
-    paddingY: 2,
-    component: "form",
-    onSubmit: function onSubmit(e) {
-      e.preventDefault();
-      handleSubmit(_onSubmit)(e);
-    },
-    sx: {
-      paddingBottom: '1em'
-    }
-  }, /*#__PURE__*/React__default.createElement(material.Grid, {
-    item: true,
-    xs: 12,
-    sm: 10
-  }, /*#__PURE__*/React__default.createElement(CheckoutInput, {
-    controlls: {
-      name: 'address1',
-      placeholder: 'Address 1*',
-      control: control
-    }
-  })), /*#__PURE__*/React__default.createElement(material.Grid, {
-    item: true,
-    xs: 6,
-    sm: 3.34
-  }, /*#__PURE__*/React__default.createElement(CheckoutInput, {
-    controlls: {
-      name: 'address2',
-      placeholder: 'Address 2*',
-      control: control
-    }
-  })), /*#__PURE__*/React__default.createElement(material.Grid, {
-    item: true,
-    xs: 6,
-    sm: 3.34
-  }, /*#__PURE__*/React__default.createElement(CheckoutSelect, {
-    controlls: {
-      name: 'country',
-      placeholder: 'Country',
-      control: control,
-      List: countries,
-      key: 'name'
-    }
-  })), /*#__PURE__*/React__default.createElement(material.Grid, {
-    item: true,
-    xs: 6,
-    sm: 3.34
-  }, /*#__PURE__*/React__default.createElement(CheckoutSelect, {
-    controlls: {
-      name: 'state',
-      placeholder: 'State',
-      control: control,
-      List: states,
-      key: 'name'
-    }
-  })), /*#__PURE__*/React__default.createElement(material.Grid, {
-    item: true,
-    xs: 6,
-    sm: 3.34
-  }, /*#__PURE__*/React__default.createElement(CheckoutInput, {
-    controlls: {
-      name: 'city',
-      placeholder: 'City*',
-      control: control
-    }
-  })), /*#__PURE__*/React__default.createElement(material.Grid, {
-    item: true,
-    xs: 6,
-    sm: 3.34
-  }, /*#__PURE__*/React__default.createElement(CheckoutInput, {
-    controlls: {
-      name: 'zip',
-      placeholder: 'Zip/Postal Code*',
-      control: control,
-      type: 'number'
-    }
-  })), /*#__PURE__*/React__default.createElement(material.Grid, {
-    item: true,
-    xs: 12,
-    sm: 3.34
-  }, /*#__PURE__*/React__default.createElement(CheckoutInput, {
-    controlls: {
-      name: 'mobile',
-      placeholder: 'Mobile*',
-      control: control,
-      type: 'number'
-    }
-  })), /*#__PURE__*/React__default.createElement(material.Grid, {
-    item: true,
-    xs: 8,
-    sm: 8
-  }, /*#__PURE__*/React__default.createElement(SaveButton, {
-    color: color,
-    type: "submit"
-  }, "Save address")));
+API$1.get = function (url, options) {
+  return API$1(_extends({
+    url: url,
+    method: 'get'
+  }, options));
 };
-
-var Step1 = function Step1(_ref) {
-  var _addressList$, _styles$input, _styles$input2, _styles$button, _addressList, _styles$input3, _addressList2, _styles$button2, _styles$button3;
-  var handleNext = _ref.handleNext,
-    setShipping = _ref.setShipping,
-    setBilling = _ref.setBilling,
-    addStore = _ref.addStore,
-    addStoreAddress = _ref.addStoreAddress,
-    _ref$stores = _ref.stores,
-    stores = _ref$stores === void 0 ? [] : _ref$stores,
-    selectedStore = _ref.selectedStore,
-    setSelectedStore = _ref.setSelectedStore,
-    countries = _ref.countries,
-    setSelectedCountry = _ref.setSelectedCountry,
-    states = _ref.states,
-    styles = _ref.styles;
-  var _useForm = reactHookForm.useForm(),
-    control = _useForm.control,
-    handleSubmit = _useForm.handleSubmit;
-  var _useState = React.useState(false),
-    showShipping = _useState[0],
-    setShowShipping = _useState[1];
-  var _useForm2 = reactHookForm.useForm(),
-    addressControl = _useForm2.control,
-    watch = _useForm2.watch,
-    handleSubmitAddress = _useForm2.handleSubmit;
-  var StoresList = [].concat(stores, [{
-    storeName: 'Add Store',
-    id: 99999999
-  }]);
-  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 billing Address',
-      id: 99999999
-    }]);
-  } else {
-    addressList = [{
-      address1: 'Add billing Address',
-      id: 99999999
-    }];
+API$1.put = function (url, body, options) {
+  return API$1(_extends({
+    url: url,
+    body: body,
+    method: 'put'
+  }, options));
+};
+API$1.patch = function (url, body, options) {
+  return API$1(_extends({
+    url: url,
+    body: body,
+    method: 'patch'
+  }, options));
+};
+API$1.post = function (url, body, options) {
+  return API$1(_extends({
+    url: url,
+    body: body,
+    method: 'post'
+  }, options));
+};
+API$1["delete"] = function (url, body, options) {
+  return API$1(_extends({
+    url: url,
+    body: body,
+    method: 'delete'
+  }, options));
+};
+var handle401Error = function handle401Error(_ref4) {
+  var apiData = _ref4.apiData,
+    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;
+      return Promise.resolve(API$1({
+        url: '/refreshToken',
+        hideErrorMessage: true,
+        headers: {
+          refreshToken: oldRefreshToken,
+          Authorization: "Bearer " + oldAccessToken
+        }
+      })).then(function (_ref5) {
+        var accessToken = _ref5.access,
+          refreshToken = _ref5.refresh;
+        setItem(ACCESS_TOKEN, accessToken);
+        setItem(REFRESH_TOKEN, refreshToken);
+        if (apiData.throwErrorOnTokenTimeout) {
+          exception.reason = 'resetRefreshToken';
+          throw exception;
+        } else {
+          return Promise.resolve(API$1(apiData));
+        }
+      });
+    }, function () {
+      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;
+  try {
+    var _apiData$throwExcepti = apiData.throwException,
+      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 () {
+          return Promise.resolve(handle401Error({
+            apiData: apiData,
+            exception: exception
+          }));
+        }, function (e) {
+          alert(e);
+          if (throwException) {
+            throw exception;
+          }
+        });
+      } else {
+        if (!hideErrorMessage) {
+          var errMessage = errorMessage;
+          if (showAPIError) {
+            errMessage = lodash.get(exception, 'response.data.message');
+          }
+          alert(errMessage);
+        }
+        if (throwException) {
+          throw exception;
+        }
+      }
+    }());
+  } catch (e) {
+    return Promise.reject(e);
   }
-  var _useState2 = React.useState((_addressList$ = addressList[0]) === null || _addressList$ === void 0 ? void 0 : _addressList$.id),
-    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);
-  };
-  var next = function next() {
-    setBilling(address);
-    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, {
-    text: 'billing information',
-    icon: 2
-  }), /*#__PURE__*/React__default.createElement(StepsContent, {
-    bg: styles === null || styles === void 0 ? void 0 : (_styles$input = styles.input) === null || _styles$input === void 0 ? void 0 : _styles$input.bg
-  }, /*#__PURE__*/React__default.createElement(material.Grid, {
-    container: true,
-    rowSpacing: 2,
-    columnSpacing: 1
-  }, /*#__PURE__*/React__default.createElement(material.Grid, {
-    item: true,
-    xs: 12,
-    sm: 10
-  }, /*#__PURE__*/React__default.createElement(Select, {
-    className: "checkout-input",
-    bg: styles === null || styles === void 0 ? void 0 : (_styles$input2 = styles.input) === null || _styles$input2 === void 0 ? void 0 : _styles$input2.bg
-  }, /*#__PURE__*/React__default.createElement("select", {
-    value: selectedStore,
-    onChange: function onChange(e) {
-      return setSelectedStore(parseInt(e.target.value));
-    }
-  }, StoresList === null || StoresList === void 0 ? void 0 : StoresList.map(function (store, i) {
-    return /*#__PURE__*/React__default.createElement("option", {
-      key: i,
-      value: store === null || store === void 0 ? void 0 : store.id
-    }, store === null || store === void 0 ? void 0 : store.storeName);
-  }))))), selectedStore === 99999999 && /*#__PURE__*/React__default.createElement(StoreForm, {
-    control: control,
-    onSubmit: onSubmit,
-    handleSubmit: handleSubmit,
-    color: styles === null || styles === void 0 ? void 0 : (_styles$button = styles.button) === null || _styles$button === void 0 ? void 0 : _styles$button.bg
-  }), /*#__PURE__*/React__default.createElement(material.Grid, {
-    container: true
-  }, /*#__PURE__*/React__default.createElement(material.Grid, {
-    item: true,
-    xs: 12,
-    sm: 10,
-    sx: {
-      padding: '1em 0'
-    }
-  }, ((_addressList = addressList) === null || _addressList === void 0 ? void 0 : _addressList.length) > 0 && /*#__PURE__*/React__default.createElement(Select, {
-    style: {
-      backgroundColor: styles === null || styles === void 0 ? void 0 : (_styles$input3 = styles.input) === null || _styles$input3 === void 0 ? void 0 : _styles$input3.bg
-    }
-  }, /*#__PURE__*/React__default.createElement("select", {
-    value: address,
-    onChange: function onChange(e) {
-      return setAddress(parseInt(e.target.value));
-    }
-  }, (_addressList2 = addressList) === null || _addressList2 === void 0 ? void 0 : _addressList2.map(function (address, i) {
-    return /*#__PURE__*/React__default.createElement("option", {
-      key: i,
-      value: address.id
-    }, address === null || address === void 0 ? void 0 : address.address1);
-  }))))), address === 99999999 && /*#__PURE__*/React__default.createElement(AddressForm, {
-    control: addressControl,
-    handleSubmit: handleSubmitAddress,
-    onSubmit: addAddress,
-    countries: countries,
-    states: states,
-    color: styles === null || styles === void 0 ? void 0 : (_styles$button2 = styles.button) === null || _styles$button2 === void 0 ? void 0 : _styles$button2.bg
-  }), /*#__PURE__*/React__default.createElement(material.Grid, {
-    item: true,
-    xs: 12
-  }, /*#__PURE__*/React__default.createElement(CheckBoxRow, {
-    onClick: function onClick() {
-      setShowShipping(false);
-    }
-  }, /*#__PURE__*/React__default.createElement(material.Checkbox, {
-    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 this address"))), /*#__PURE__*/React__default.createElement(CheckBoxRow, {
-    padding: '0 0 1em 0',
-    onClick: function onClick() {
-      setShowShipping(true);
-    }
-  }, /*#__PURE__*/React__default.createElement(material.Checkbox, {
-    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, {
-    color: styles === null || styles === void 0 ? void 0 : (_styles$button3 = styles.button) === null || _styles$button3 === void 0 ? void 0 : _styles$button3.bg,
-    backDisabled: true,
-    handleNext: function handleNext() {
-      next();
-    },
-    nextDisabled: !selectedStore || !address || selectedStore === 99999999 || address === 99999999
-  })));
 };
 
-// A type of promise-like that resolves synchronously and supports only one observer
-
-const _iteratorSymbol = /*#__PURE__*/ typeof Symbol !== "undefined" ? (Symbol.iterator || (Symbol.iterator = Symbol("Symbol.iterator"))) : "@@iterator";
-
-const _asyncIteratorSymbol = /*#__PURE__*/ typeof Symbol !== "undefined" ? (Symbol.asyncIterator || (Symbol.asyncIterator = Symbol("Symbol.asyncIterator"))) : "@@asyncIterator";
-
-// Asynchronously call a function and send errors to recovery continuation
-function _catch(body, recover) {
-	try {
-		var result = body();
-	} catch(e) {
-		return recover(e);
-	}
-	if (result && result.then) {
-		return result.then(void 0, recover);
-	}
-	return result;
-}
-
-// Asynchronously await a promise and pass the result to a finally continuation
-function _finallyRethrows(body, finalizer) {
-	try {
-		var result = body();
-	} catch (e) {
-		return finalizer(true, e);
-	}
-	if (result && result.then) {
-		return result.then(finalizer.bind(null, false), finalizer.bind(null, true));
-	}
-	return finalizer(false, result);
+var convertCamCaseToSnake = function convertCamCaseToSnake(child) {
+  var _Object$keys;
+  var data = [];
+  var i = 1;
+  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(),
+      name: result.charAt(0).toUpperCase() + result.slice(1),
+      value: child[k]
+    };
+    data.push(dataIndex);
+    i++;
+  });
+  return data;
+};
+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;
+  if (!time) {
+    return time;
+  }
+  var convertedTime = moment.utc(time).clone().local();
+  if (!isMoment) {
+    convertedTime = convertedTime.format(format);
+  }
+  return convertedTime;
+};
+var getUTCTime = function getUTCTime(_ref2) {
+  var time = _ref2.time,
+    _ref2$format = _ref2.format,
+    format = _ref2$format === void 0 ? DATE_FORMATS.DEFAULT_DATE_TIME_FORMAT : _ref2$format,
+    isMoment = _ref2.isMoment;
+  if (!time) {
+    return time;
+  }
+  var convertedTime = moment(time).utc();
+  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(',');
+  } else return hex;
 }
-
-var erLocalStorage = {
-  setItem: function setItem(key, value) {
-    localStorage.setItem(key, value);
-  },
-  getItem: function getItem(key) {
-    return localStorage.getItem(key);
-  },
-  removeItem: function removeItem(key) {
-    localStorage.removeItem(key);
-  },
-  setJSONItem: function setJSONItem(key, value) {
-    value = JSON.stringify(value);
-    localStorage.setItem(key, value);
-  },
-  getJSONItem: function getJSONItem(key) {
-    var returnValue = {};
-    try {
-      returnValue = localStorage.getItem(key) ? JSON.parse(localStorage.getItem(key)) : {};
-    } catch (e) {
-      console.error(e);
+var getRandomString = function getRandomString(length) {
+  if (length === void 0) {
+    length = 16;
+  }
+  var text = '';
+  var possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+  for (var i = 0; i < length; i++) {
+    text += possible.charAt(Math.floor(Math.random() * possible.length));
+  }
+  return text;
+};
+var currentTimeText = function currentTimeText() {
+  var data = [[0, 4, 'Good Night'], [5, 11, 'Good Morning'], [12, 16, 'Good Afternoon'], [17, 19, 'Good Evening'], [20, 24, 'Good Night']];
+  var hr = new Date().getHours();
+  var text = '';
+  for (var i = 0; i < data.length; i++) {
+    if (hr >= data[i][0] && hr <= data[i][1]) {
+      text = data[i][2];
     }
-    return returnValue;
   }
+  return text;
+};
+
+var _templateObject$5;
+var MuiButton = function MuiButton(props) {
+  var fontColor = props.fontColor,
+    primaryColor = props.primaryColor,
+    children = props.children,
+    loading = props.loading,
+    disabled = props.disabled;
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ButtonContainer, _extends({
+    variant: "contained",
+    fontColor: fontColor,
+    primaryColor: primaryColor
+  }, props, {
+    disabled: loading ? true : disabled
+  }), loading ? /*#__PURE__*/React__default.createElement(material.CircularProgress, {
+    color: "inherit",
+    size: 21
+  }) : children));
 };
+var ButtonContainer = styled__default(material.Button)(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n  background: ", " !important;\n"])), function (props) {
+  return props.primaryColor;
+});
 
-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) {
+var _templateObject$6, _templateObject2$5, _templateObject3$5, _templateObject4$4, _templateObject5$4, _templateObject6$4, _templateObject7$3, _templateObject8$1;
+var CartSummaryContainer = styled__default.div(_templateObject$6 || (_templateObject$6 = _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  min-height: 580px;\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  @media only screen and (max-width: 1340px) {\n    margin-top: 4em;\n  }\n"])), function (props) {
+  return props.maxWidth || '26.375em';
+}, function (props) {
+  return props.background || '#667080';
+}, function (props) {
+  return props.color || 'white';
+}, function (props) {
+  return props.color || 'white';
+});
+var CartSummaryRow = styled__default.div(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  justify-content: ", ";\n  align-items: center;\n  color: inherit;\n  h6,\n  h5 {\n    margin: 0;\n    font-size: 1em;\n    font-weight: 700;\n    color: inherit;\n    text-transform: capitalize;\n  }\n  h5 {\n    font-size: ", ";\n  }\n"])), function (props) {
+  return props.justify || 'space-between';
+}, function (props) {
+  return props.h5 || '1.31em';
+});
+var CartSummaryHr = styled__default.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__default.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: 100%;\n  input {\n    width: 65%;\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: 35%;\n    height: 2.44rem;\n    line-height: 0.8rem;\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      background: ", ";\n    }\n  }\n"])), function (props) {
+  return props.paddingBottom ? '0' : '0';
+}, function (props) {
+  return props.retail ? '1.19rem' : '0';
+}, function (props) {
+  return props.background || '#bfc3ca';
+}, function (props) {
+  return props.color || '#667080';
+}, function (props) {
+  return props.color || '#667080';
+}, function (props) {
+  return props.btn || '#393f48';
+}, function (props) {
+  return props.retail ? '1.19rem' : 0;
+}, function (props) {
+  return props.Btncolor || 'inherit';
+}, function (props) {
+  return props.btn || '#393f48';
+});
+var DiscountCouponContainer = styled__default.div(_templateObject5$4 || (_templateObject5$4 = _taggedTemplateLiteralLoose(["\n  padding: 0.6rem 0;\n  width: 100%;\n"])));
+var DiscountCouponCard = styled__default.div(_templateObject6$4 || (_templateObject6$4 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  padding: 0.3rem;\n  svg {\n    color: ", ";\n    cursor: pointer;\n    font-size: 1.4rem;\n  }\n"])), function (props) {
+  return props.btn || '#393f48';
+});
+var CartSummaryCheckoutBtn = styled__default.button(_templateObject7$3 || (_templateObject7$3 = _taggedTemplateLiteralLoose(["\n  font-size: 0.95em;\n  font-weight: 600;\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';
+}, function (props) {
+  return props.retail ? '2.64em' : '';
+});
+var CartSummaryCheckBoxRow = styled__default(CartSummaryRow)(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteralLoose(["\n  justify-content: flex-start;\n  margin-left: 1em;\n  margin-top: 1em;\n  cursor: pointer;\n  .checkBox {\n    width: 0.63em;\n    height: 0.63em;\n    border: 1px solid;\n    border-color: ", ";\n    background: transparent;\n    margin-right: 0.5em;\n    border-radius: 50%;\n    background: ", ";\n  }\n  p {\n    font-size: 1em;\n    font-weight: 6 400;\n    span {\n      font-weight: 600;\n      margin: 0 0.1em;\n    }\n    .underline {\n      font-weight: 400;\n      text-decoration: underline;\n    }\n  }\n"])), function (props) {
+  return props.background || 'white';
+}, function (props) {
+  return props.selected ? props.background : 'transparent';
+});
+
+var CartSummary = function CartSummary(_ref) {
+  var _storeData$map, _cartSummary$input, _cartSummary$input2, _cartSummary$input3, _cartSummary$input4;
+  var apiEndPoint = _ref.apiEndPoint,
+    token = _ref.token,
+    storeData = _ref.storeData,
+    _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,
+    onChangeDiscountCoupon = _ref.onChangeDiscountCoupon,
+    _ref$discountCoupons = _ref.discountCoupons,
+    discountCoupons = _ref$discountCoupons === void 0 ? [] : _ref$discountCoupons;
+  var storeIdList = (storeData === null || storeData === void 0 ? void 0 : (_storeData$map = storeData.map(function (data) {
+    return data === null || data === void 0 ? void 0 : data.id;
+  })) === null || _storeData$map === void 0 ? void 0 : _storeData$map.join(',')) || 2;
+  var cartSummary = styles.cartSummary,
+    Btn = styles.Btn;
+  var _useState = React.useState(false),
+    buttonLoading = _useState[0],
+    setButtonLoading = _useState[1];
+  var _useState2 = React.useState(''),
+    couponText = _useState2[0],
+    setCouponText = _useState2[1];
+  var _useState3 = React.useState(discountCoupons),
+    discountCouponData = _useState3[0],
+    setDiscountCouponData = _useState3[1];
+  var ValidateDiscountCoupon = function ValidateDiscountCoupon(value) {
     try {
-      return JSON.parse(this.sessionStorage.getItem(key));
+      var _temp3 = function () {
+        if (apiEndPoint && token) {
+          var _temp2 = function _temp2() {
+            setButtonLoading(false);
+          };
+          var couponListObj = {
+            couponNames: [value],
+            totalCartAmount: subtotal
+          };
+          setButtonLoading(true);
+          var _temp = _catch(function () {
+            return Promise.resolve(API$1({
+              apiEndPoint: apiEndPoint,
+              token: token,
+              method: 'POST',
+              url: "/ecommerce/discount/validate?storeId=" + storeIdList,
+              body: couponListObj
+            })).then(function (response) {
+              var couponData = response === null || response === void 0 ? void 0 : response.map(function (item) {
+                return {
+                  id: item.discountId,
+                  discountName: item.discountName,
+                  couponCode: item.couponCode,
+                  amount: item.amount
+                };
+              });
+              setDiscountCouponData(lodash.uniqBy([].concat(discountCouponData, couponData), 'id'));
+              onChangeDiscountCoupon && onChangeDiscountCoupon(lodash.uniqBy([].concat(discountCouponData, couponData), 'id'));
+            });
+          }, function () {});
+          return _temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp);
+        }
+      }();
+      return Promise.resolve(_temp3 && _temp3.then ? _temp3.then(function () {}) : void 0);
     } catch (e) {
-      return {};
+      return Promise.reject(e);
     }
   };
-  _proto.removeItem = function removeItem(key) {
-    this.sessionStorage.removeItem(key);
-  };
-  _proto.setItem = function setItem(_ref) {
-    var key = _ref.key,
-      value = _ref.value;
-    return this.sessionStorage.setItem(key, value);
-  };
-  _proto.setJSONItem = function setJSONItem(_ref2) {
-    var key = _ref2.key,
-      value = _ref2.value;
-    try {
-      return this.sessionStorage.setItem(key, JSON.stringify(value));
-    } catch (e) {
-      console.error(e);
+  var discountTotal = 0;
+  discountCouponData === null || discountCouponData === void 0 ? void 0 : discountCouponData.forEach(function (element) {
+    discountTotal = discountTotal + element.amount;
+  });
+  return /*#__PURE__*/React__default.createElement(CartSummaryContainer, {
+    background: cartSummary.bg,
+    color: cartSummary.color
+  }, /*#__PURE__*/React__default.createElement("p", null, "Cart summary:"), /*#__PURE__*/React__default.createElement(CartSummaryHr, {
+    color: cartSummary.hr
+  }), /*#__PURE__*/React__default.createElement(CartSummaryRow, null, /*#__PURE__*/React__default.createElement("h6", null, "subtotal"), /*#__PURE__*/React__default.createElement("h5", null, renderMoney(subtotal))), /*#__PURE__*/React__default.createElement(CartSummaryHr, {
+    color: cartSummary.hr
+  }), /*#__PURE__*/React__default.createElement(CartSummaryRow, null, /*#__PURE__*/React__default.createElement("h6", null, "Discount"), /*#__PURE__*/React__default.createElement("h5", null, renderMoney(discountTotal))), /*#__PURE__*/React__default.createElement(CartSummaryHr, {
+    color: cartSummary.hr
+  }), retail && /*#__PURE__*/React__default.createElement(material.Stack, {
+    flexDirection: "column",
+    justifyContent: "flexStart",
+    sx: {
+      width: '100%'
     }
-  };
-  return ErCache;
-}();
-var erCache = new ErCache();
-
-var getItem = erLocalStorage.getItem,
-  getJSONItem = erLocalStorage.getJSONItem,
-  setItem = erLocalStorage.setItem;
-var ACCESS_TOKEN = STORAGE_KEYS.ACCESS_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;
-  return API_CACHE_PREFIX + "_" + path + "_" + JSON.stringify(queryParams);
+  }, /*#__PURE__*/React__default.createElement(CartSummaryRow, {
+    justify: "flex-start"
+  }, /*#__PURE__*/React__default.createElement("h6", null, "shipping")), shippingData && shippingData.map(function (li, i) {
+    return /*#__PURE__*/React__default.createElement(CartSummaryCheckBoxRow, {
+      key: i,
+      selected: li.id === selectedShipping.id,
+      onClick: function onClick() {
+        setShipping(li);
+      },
+      background: cartSummary.color
+    }, /*#__PURE__*/React__default.createElement("span", {
+      className: "checkBox"
+    }), /*#__PURE__*/React__default.createElement("p", null, li.name, ' ', li.amount && li.amount > 0 && /*#__PURE__*/React__default.createElement("span", null, ": ", renderMoney(li.amount))));
+  }), /*#__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__default.createElement(CartSummaryHr, {
+    color: cartSummary.hr
+  })), /*#__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,
+    onSubmit: function onSubmit(e) {
+      e.preventDefault();
+      ValidateDiscountCoupon(couponText);
+    }
+  }, /*#__PURE__*/React__default.createElement("input", {
+    placeholder: "Coupon code",
+    type: "text",
+    minLength: 2,
+    required: true,
+    value: couponText,
+    onChange: function onChange(e) {
+      return setCouponText(e.target.value);
+    }
+  }), /*#__PURE__*/React__default.createElement(MuiButton, {
+    type: "submit",
+    variant: "contained",
+    loading: buttonLoading
+  }, "apply coupon")), /*#__PURE__*/React__default.createElement(DiscountCouponContainer, {
+    background: (_cartSummary$input3 = cartSummary.input) === null || _cartSummary$input3 === void 0 ? void 0 : _cartSummary$input3.bg,
+    color: (_cartSummary$input4 = cartSummary.input) === null || _cartSummary$input4 === void 0 ? void 0 : _cartSummary$input4.color,
+    btn: Btn === null || Btn === void 0 ? void 0 : Btn.background,
+    Btncolor: Btn === null || Btn === void 0 ? void 0 : Btn.color
+  }, discountCouponData === null || discountCouponData === void 0 ? void 0 : discountCouponData.map(function (coupon) {
+    var _cartSummary$input5, _cartSummary$input6;
+    return /*#__PURE__*/React__default.createElement(DiscountCouponCard, {
+      background: (_cartSummary$input5 = cartSummary.input) === null || _cartSummary$input5 === void 0 ? void 0 : _cartSummary$input5.bg,
+      color: (_cartSummary$input6 = cartSummary.input) === null || _cartSummary$input6 === void 0 ? void 0 : _cartSummary$input6.color,
+      btn: Btn === null || Btn === void 0 ? void 0 : Btn.background,
+      Btncolor: Btn === null || Btn === void 0 ? void 0 : Btn.color
+    }, /*#__PURE__*/React__default.createElement("span", null, coupon === null || coupon === void 0 ? void 0 : coupon.discountName, " ", "(" + renderMoney(coupon === null || coupon === void 0 ? void 0 : coupon.amount) + ")"), /*#__PURE__*/React__default.createElement(md.MdDelete, {
+      onClick: function onClick() {
+        var data = discountCouponData === null || discountCouponData === void 0 ? void 0 : discountCouponData.filter(function (f) {
+          return (f === null || f === void 0 ? void 0 : f.id) !== (coupon === null || coupon === void 0 ? void 0 : coupon.id);
+        });
+        setDiscountCouponData(data);
+        onChangeDiscountCoupon(data);
+      }
+    }));
+  })), /*#__PURE__*/React__default.createElement(CartSummaryHr, {
+    color: cartSummary.hr
+  }), /*#__PURE__*/React__default.createElement(CartSummaryRow, {
+    h5: "1.64em"
+  }, /*#__PURE__*/React__default.createElement("h6", null, "order total"), /*#__PURE__*/React__default.createElement("h5", null, renderMoney(totalCartPrice + ((selectedShipping === null || selectedShipping === void 0 ? void 0 : selectedShipping.amount) || 0) - discountTotal))), /*#__PURE__*/React__default.createElement(CartSummaryRow, {
+    justify: "center"
+  }, /*#__PURE__*/React__default.createElement(CartSummaryCheckoutBtn, {
+    retail: retail,
+    onClick: function onClick() {
+      if (loading) return;
+      clickRedirect('/checkout');
+    },
+    background: Btn.background,
+    color: Btn.color
+  }, "proceed to checkout")), /*#__PURE__*/React__default.createElement(CartSummaryRow, {
+    justify: "center"
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: "continueShopping",
+    onClick: function onClick() {
+      if (loading) return;
+      clickRedirect('/');
+    }
+  }, "Continue to shopping")));
 };
-var getAPICacheData = function getAPICacheData(_ref2) {
-  var path = _ref2.path,
-    queryParams = _ref2.queryParams;
-  var cachedData = erCache.getJSONItem(getKeyFromPath({
-    path: path,
-    queryParams: queryParams
-  }));
-  return lodash.isEmpty(cachedData) ? null : cachedData;
+
+var CartPageComponent = function CartPageComponent(_ref) {
+  var apiEndPoint = _ref.apiEndPoint,
+    token = _ref.token,
+    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,
+    onChangeDiscountCoupon = _ref.onChangeDiscountCoupon,
+    discountCoupons = _ref.discountCoupons;
+  var _useState = React.useState([]),
+    storeData = _useState[0],
+    setStoreData = _useState[1];
+  React.useEffect(function () {
+    (function () {
+      try {
+        var _temp2 = function () {
+          if (apiEndPoint && token) {
+            var _temp = _catch(function () {
+              return Promise.resolve(API({
+                apiEndPoint: apiEndPoint,
+                token: token,
+                url: "/store"
+              })).then(function (data) {
+                setStoreData(data);
+              });
+            }, function () {});
+            if (_temp && _temp.then) return _temp.then(function () {});
+          }
+        }();
+        return _temp2 && _temp2.then ? _temp2.then(function () {}) : void 0;
+      } catch (e) {
+        Promise.reject(e);
+      }
+    })();
+  }, []);
+  return /*#__PURE__*/React__default.createElement(CartPageSection, {
+    bg: styles.bg,
+    retail: retail
+  }, /*#__PURE__*/React__default.createElement(CartHeading, {
+    color: styles === null || styles === void 0 ? void 0 : styles.headingColor,
+    h1: styles === null || styles === void 0 ? void 0 : styles.h1
+  }, /*#__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, {
+    retail: retail,
+    cartData: cartData,
+    loading: loading,
+    imgnotfoundUrl: imgnotfoundUrl,
+    styles: styles,
+    handleIncrementDecrement: handleIncrementDecrement,
+    handleRemoveProduct: handleRemoveProduct
+  }) : /*#__PURE__*/React__default.createElement(EnhancedTable, {
+    retail: retail,
+    cartData: cartData,
+    loading: loading,
+    imgnotfoundUrl: imgnotfoundUrl,
+    styles: styles,
+    handleIncrementDecrement: handleIncrementDecrement,
+    handleRemoveProduct: handleRemoveProduct,
+    handleRemoveAll: handleRemoveAll
+  }), /*#__PURE__*/React__default.createElement(CartSummary, {
+    apiEndPoint: apiEndPoint,
+    token: token,
+    storeData: storeData,
+    retail: retail,
+    shippingData: shippingData,
+    selectedShipping: selectedShipping,
+    setShipping: setShipping,
+    clickRedirect: clickRedirect,
+    subtotal: cartData === null || cartData === void 0 ? void 0 : cartData.totalCartPrice,
+    totalCartPrice: cartData === null || cartData === void 0 ? void 0 : cartData.totalCartPrice,
+    styles: styles,
+    loading: loading,
+    onChangeDiscountCoupon: onChangeDiscountCoupon,
+    discountCoupons: discountCoupons
+  })));
 };
-var setAPIDataToCache = function setAPIDataToCache(_ref3) {
-  var path = _ref3.path,
-    queryParams = _ref3.queryParams,
-    data = _ref3.data;
-  erCache.setJSONItem({
-    key: getKeyFromPath({
-      path: path,
-      queryParams: queryParams
-    }),
-    value: data
+
+var _templateObject$7, _templateObject2$6, _templateObject3$6, _templateObject4$5, _templateObject5$5, _templateObject6$5, _templateObject7$4;
+var CheckoutPageContainer = styled__default.div(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  max-width: ", ";\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: flex-start;\n  background-color: ", ";\n  margin: 0 auto;\n  padding: 2.375em 3.5em 2.5em 4.5em;\n  padding-left: min(4.5em, 2.5vw);\n  font-family: 'karla-fonts';\n  color: rgba(50, 50, 50, 1);\n  /* max-height: 90vh; */\n  overflow: hidden;\n  /* background: gainsboro; */\n  border-radius: 28px;\n  /* background-color: #fff8f6; */\n  @media only screen and (max-width: 1508px) {\n    flex-direction: column;\n    align-items: center;\n    max-height: max-content;\n  }\n  @media only screen and (max-width: 788px) {\n    padding: 1em 0.5em;\n  }\n  .icon {\n    font-size: 12px;\n  }\n"])), function (props) {
+  return props.maxWidth || '1605px';
+}, function (props) {
+  return props.bg || '#fff8f6';
+});
+var Row = styled__default.div(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n"])));
+var CheckoutMainWithHeader = styled__default(material.Stack)(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteralLoose([""])));
+var CheckoutMain = styled__default.div(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  max-width: 1008px;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n  margin-right: 2em;\n  max-height: 65vh;\n  padding-right: 2em;\n  overflow-y: auto;\n  position: relative;\n  padding-top: 2em;\n  padding-bottom: 3em;\n  /* width */\n  ::-webkit-scrollbar {\n    width: 10px;\n    background: ", ";\n    border-radius: 16px;\n  }\n\n  /* Track */\n  ::-webkit-scrollbar-track {\n    background: ", ";\n    border-radius: 16px;\n  }\n\n  /* Handle */\n  ::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 16px;\n    border: 3px solid ", ";\n    /* border: 3px solid black; */\n  }\n  @media only screen and (max-width: 1488px) {\n    margin-bottom: 3em;\n    min-height: max-content;\n    max-height: max-content;\n    margin-right: 0;\n    overflow: visible;\n  }\n  @media only screen and (max-width: 788px) {\n    max-width: 100vw;\n    padding-right: 0;\n    width: 98vw;\n    min-width: 90vw;\n    padding-top: 1em;\n  }\n  /* overflow: hidden; */\n"])), function (props) {
+  return props.bg || 'rgba(245, 197, 189, 0.5)';
+}, function (props) {
+  return props.bg || 'rgba(245, 197, 189, 0.5)';
+}, function (props) {
+  return props.color || '#ef9687';
+}, function (props) {
+  return props.bg || 'rgba(245, 197, 189, 0.5)';
+});
+var CheckoutHeading = styled__default.div(_templateObject5$5 || (_templateObject5$5 = _taggedTemplateLiteralLoose(["\n  margin-left: 2.5em;\n  margin-bottom: 2em;\n  h5 {\n    font-size: 2.3em;\n    font-weight: 600;\n    text-transform: capitalize;\n  }\n  p {\n    font-size: 0.875em;\n    font-weight: 300;\n    margin-top: 0.5em;\n  }\n  @media only screen and (max-width: 788px) {\n    margin-left: 0;\n    padding-left: 1em;\n  }\n"])));
+var CheckoutHeader = styled__default(Row)(_templateObject6$5 || (_templateObject6$5 = _taggedTemplateLiteralLoose(["\n  justify-content: space-around;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  position: sticky;\n  top: 0;\n  background-color: white;\n  z-index: 1;\n  justify-content: flex-start;\n  min-height: 4.18em;\n  max-height: 4.1875em;\n  max-width: 57.43em;\n  width: 98%;\n  background: #ffffff;\n  border-radius: 20px;\n  margin-bottom: 1em;\n  margin-right: 0.35em;\n  color: #7d7b7b;\n  padding: 0 2em;\n  margin-right: 5em;\n  .row {\n    display: flex;\n    color: inherit;\n    flex-direction: row;\n    align-items: center;\n    justify-content: flex-start;\n    text-transform: capitalize;\n    margin-right: 2.4%;\n    .icon {\n      font-size: 14px;\n      font-weight: 400;\n      display: grid;\n      place-items: center;\n      margin-right: 6px;\n      color: inherit;\n    }\n    p,\n    span {\n      font-size: 0.95em;\n      color: inherit;\n      font-weight: 300;\n    }\n  }\n  .checked {\n    p,\n    span {\n      color: #323232;\n    }\n    .icon {\n      color: #249937;\n    }\n  }\n  @media only screen and (max-width: 1508px) {\n    margin-right: 2em;\n  }\n  @media only screen and (max-width: 788px) {\n    width: 100%;\n    padding: 2em 1em;\n    margin: 1.4em 0;\n    .row {\n      margin-right: 4.5%;\n      p {\n        font-size: 12px;\n      }\n      span {\n        display: none;\n      }\n    }\n  }\n"])));
+var CheckoutStepIcon = styled__default.div(_templateObject7$4 || (_templateObject7$4 = _taggedTemplateLiteralLoose(["\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  font-size: 5px;\n  display: grid;\n  place-items: center;\n  margin: auto;\n  padding: 0;\n  margin-left: 2px;\n  .circle {\n    width: 16px;\n    height: 16px;\n    border-radius: 50%;\n    font-size: 5px;\n    display: grid;\n    place-items: center;\n    margin: auto;\n    padding: 0;\n  }\n  .ic {\n    font-size: 8px;\n  }\n"])));
+
+var _templateObject$8, _templateObject2$7, _templateObject3$7;
+var CheckoutSummaryContainer = styled__default.div(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteralLoose(["\n  background: ", ";\n  color: ", ";\n  border-radius: 20px;\n  padding: max(1.5em, 30px);\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  max-width: 422px;\n  min-width: min(412px, 95%);\n  font-size: 16px;\n  margin-top: 6.15em;\n  @media only screen and (max-width: 1508px) {\n    margin-top: 0;\n  }\n"])), function (props) {
+  return props.bg || 'rgba(255, 240, 236, 1)';
+}, function (props) {
+  return props.color || ' rgba(50, 50, 50, 1)';
+});
+var TextRow = styled__default.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__default.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    max-width: 300px;\n    width: fit-content;\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    opacity: 0;\n  }\n"])));
+
+var CheckoutSummary = function CheckoutSummary(_ref) {
+  var total = _ref.total,
+    billingInformation = _ref.billingInformation,
+    shippingInformation = _ref.shippingInformation,
+    paymentMethod = _ref.paymentMethod,
+    shippingMethod = _ref.shippingMethod,
+    bg = _ref.bg,
+    color = _ref.color,
+    discountCoupons = _ref.discountCoupons;
+  var discountTotal = 0;
+  discountCoupons === null || discountCoupons === void 0 ? void 0 : discountCoupons.forEach(function (element) {
+    discountTotal = discountTotal + element.amount;
   });
+  return /*#__PURE__*/React__default.createElement(CheckoutSummaryContainer, {
+    bg: bg,
+    color: color
+  }, /*#__PURE__*/React__default.createElement(TextRow, null, /*#__PURE__*/React__default.createElement("p", {
+    className: "text"
+  }, "order total :"), /*#__PURE__*/React__default.createElement("h6", {
+    className: "total"
+  }, renderMoney(total + ((shippingMethod === null || shippingMethod === void 0 ? void 0 : shippingMethod.amount) || 0) - (discountTotal || 0)))), discountTotal && /*#__PURE__*/React__default.createElement(TextRow, null, /*#__PURE__*/React__default.createElement("p", {
+    className: "text"
+  }, "discount total :"), /*#__PURE__*/React__default.createElement("h6", {
+    className: "total",
+    style: {
+      fontSize: '1rem'
+    }
+  }, renderMoney(discountTotal || 0))), /*#__PURE__*/React__default.createElement(FilledInfo, null, /*#__PURE__*/React__default.createElement("h6", {
+    className: "heading"
+  }, "Billing information"), billingInformation !== null && billingInformation !== void 0 && billingInformation.title ? /*#__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__default.createElement("p", null, billingInformation === null || billingInformation === void 0 ? void 0 : billingInformation.data)) : /*#__PURE__*/React__default.createElement("p", {
+    className: "blank bold"
+  }, "- - - - -", /*#__PURE__*/React__default.createElement("br", null), "- - -")), /*#__PURE__*/React__default.createElement(FilledInfo, null, /*#__PURE__*/React__default.createElement("h6", {
+    className: "heading"
+  }, "Shipping information"), shippingInformation !== null && shippingInformation !== void 0 && shippingInformation.title ? /*#__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__default.createElement("p", null, shippingInformation === null || shippingInformation === void 0 ? void 0 : shippingInformation.data)) : /*#__PURE__*/React__default.createElement("p", {
+    className: "blank bold"
+  }, "- - - - -", /*#__PURE__*/React__default.createElement("br", null), "- - -")), /*#__PURE__*/React__default.createElement(FilledInfo, null, /*#__PURE__*/React__default.createElement("h6", {
+    className: "heading"
+  }, "Shipping Method"), /*#__PURE__*/React__default.createElement("p", {
+    className: "bold"
+  }, shippingMethod === null || shippingMethod === void 0 ? void 0 : shippingMethod.name), /*#__PURE__*/React__default.createElement("p", {
+    className: "bold"
+  }, renderMoney(shippingMethod === null || shippingMethod === void 0 ? void 0 : shippingMethod.amount))), /*#__PURE__*/React__default.createElement(FilledInfo, null, /*#__PURE__*/React__default.createElement("h6", {
+    className: "heading"
+  }, "Payment Method"), /*#__PURE__*/React__default.createElement("p", {
+    className: "bold"
+  }, paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.name)));
 };
-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;
-    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,
-            queryParams: queryParams
-          })) {
-            response = getAPICacheData({
-              path: apiUrl,
-              queryParams: queryParams
-            });
-          } else {
-            return Promise.resolve(axios.request({
-              method: method || 'GET',
-              url: apiUrl,
-              data: formData || body,
-              params: queryParams,
-              headers: requestHeaders,
-              cancelToken: source.token,
-              responseType: responseTypeData ? responseTypeData : null
-            })).then(function (_axios$request) {
-              response = _axios$request;
-              if (cache) {
-                setAPIDataToCache({
-                  path: apiUrl,
-                  queryParams: queryParams,
-                  data: response
-                });
-              }
-            });
-          }
-        }();
-        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 {
-              console.log('Exception on API call', url, exception);
-              return Promise.resolve(handleError({
-                exception: exception,
-                url: url,
-                apiData: apiData,
-                hideErrorMessage: hideErrorMessage
-              }));
-            }
-          }();
-        }
-        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({
-                  exception: exception,
-                  url: url,
-                  apiData: apiData,
-                  hideErrorMessage: true
-                })).then(function (_await$handleError) {
-                  _exit = true;
-                  return _await$handleError;
-                });
-              }
-            }();
-          }
-        }();
-        return _temp3 && _temp3.then ? _temp3.then(_temp4) : _temp4(_temp3);
-      });
-    }, function (_wasThrown, _result) {
-      if (_wasThrown) throw _result;
-      return _result;
-    }));
-  } catch (e) {
-    return Promise.reject(e);
-  }
+
+var _templateObject$9, _templateObject2$8, _templateObject3$8, _templateObject4$6, _templateObject5$6, _templateObject6$6, _templateObject7$5, _templateObject8$2, _templateObject9$1, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18;
+var StepContainer = styled__default.div(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  min-width: 57.43em;\n  max-width: 57.43em;\n  background: white;\n  padding: 1em 2em;\n  background: #ffffff;\n  border-radius: 20px;\n  margin-left: 2em;\n  margin-top: -2em;\n  margin-bottom: 1em;\n  @media screen and (max-width: 1305px) {\n    width: 80vw;\n    min-width: 0;\n  }\n  @media screen and (max-width: 768px) {\n    width: 96%;\n    margin-left: 1em;\n    padding: 0.8em;\n  }\n  @media screen and (max-width: 540px) {\n    width: 94%;\n    margin-left: 1.2em;\n  }\n"])));
+var StepsContent = styled__default.div(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteralLoose(["\n  padding-left: 1.565em;\n  min-height: max-content;\n  .MuiOutlinedInput-root {\n    background: ", ";\n  }\n\n  p {\n    font-size: 0.75em;\n  }\n  .bold {\n    text-transform: uppercase;\n    word-spacing: 5px;\n    margin-top: 0.95em;\n    span {\n      font-weight: 600;\n      cursor: pointer;\n      font-size: 0.94rem;\n    }\n    .red {\n      color: red;\n    }\n  }\n  @media screen and (max-width: 768px) {\n    padding: 0;\n    width: 100%;\n  }\n"])), function (props) {
+  return (props.bg || 'transparent') + '!important';
+});
+var StepsHeaderContainer = styled__default.div(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: flex-start;\n  font-family: 'karla-fonts';\n  color: #323232;\n  /* padding: ", "; */\n  margin-bottom: ", ";\n  margin-top: ", ";\n  margin-left: ", ";\n  /* color: grey; */\n  border-bottom: 1px solid #fff0ec;\n  background: #ffffff;\n  border-radius: 20px;\n  max-width: 919px;\n\n  min-height: 4.35em;\n  max-height: 4.35em;\n  padding: ", ";\n  h5 {\n    font-size: 16px;\n    font-weight: 600;\n    text-transform: capitalize;\n    margin-left: 0.6em;\n  }\n  .icon {\n    font-size: 1.3em;\n    margin-right: 8px;\n  }\n  .dropIcon {\n    font-size: 1.4em;\n    cursor: pointer;\n    transform: rotate(-90deg);\n    transition: 0.3s;\n    color: rgba(50, 50, 50, 0.75);\n    cursor: ", ";\n  }\n  .red {\n    font-weight: 600;\n    color: #fd0015;\n    font-size: inherit;\n  }\n  @media screen and (max-width: 768px) {\n    max-width: 97%;\n    margin-left: 0.5em;\n    padding-right: 1em;\n    h5 {\n      font-size: 12px;\n    }\n  }\n"])), function (props) {
+  return props.single ? '1.8em 2em' : '1em 0';
+}, function (props) {
+  return props.single ? '-1.56em' : '1em';
+}, function (props) {
+  return props.single ? '-1.56em' : '0';
+}, function (props) {
+  return props.single ? '1.45em' : '0';
+}, function (props) {
+  return props.single ? '0 2em' : '0';
+}, function (props) {
+  return props.username ? 'not-allowed' : 'pointer';
+});
+var TextFeildContainer = styled__default.div(_templateObject4$6 || (_templateObject4$6 = _taggedTemplateLiteralLoose(["\n  && {\n    input {\n      font-size: 0.875em !important;\n\n      color: rgba(107, 106, 106, 1);\n      color: black;\n      &::placeholder {\n        font-size: 0.975em !important;\n      }\n    }\n    .icon {\n      color: black;\n      font-size: 1em;\n    }\n  }\n"])));
+var CommonCheckoutBtn = styled__default.button(_templateObject5$6 || (_templateObject5$6 = _taggedTemplateLiteralLoose(["\n  border: none;\n  outline: none;\n  width: ", ";\n  height: ", ";\n\n  background: ", ";\n  display: grid;\n  place-items: center;\n  color: white;\n  margin: 0 1em;\n  font-weight: 500;\n  letter-spacing: 1px;\n  text-transform: ", ";\n  transition: 0.4s;\n  cursor: ", ";\n  &:hover,\n  &:focus {\n    opacity: 0.7;\n  }\n"])), function (props) {
+  return props.width || '8.05em';
+}, function (props) {
+  return props.height || '2.25em';
+}, function (props) {
+  return props.color || '#FD0015';
+}, function (props) {
+  return props.uppercase ? 'uppercase' : 'capitalized';
+}, function (props) {
+  return props.disabled ? 'not-allowed' : 'pointer';
+});
+var Select = styled__default.div.attrs({
+  className: 'checkout-input'
+})(_templateObject6$6 || (_templateObject6$6 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 54px;\n  border-radius: 10px;\n  background: ", ";\n  outline: none;\n  border: none;\n  padding: 0 1em;\n  cursor: pointer;\n  select {\n    width: 100%;\n    height: 100%;\n    border: none;\n    outline: none;\n    padding: 0.5em 0;\n    color: rgba(107, 106, 106, 0.6);\n    background: ", ";\n  }\n"])), function (props) {
+  return props.bg || 'transparent';
+}, function (props) {
+  return props.bg || 'transparent';
+});
+var SaveButton = styled__default.button.attrs({
+  className: 'checkout-btn'
+})(_templateObject7$5 || (_templateObject7$5 = _taggedTemplateLiteralLoose(["\n  border: none;\n  outline: none;\n  font-size: 0.8125em;\n  text-transform: uppercase;\n  font-weight: 600;\n  border-radius: 7px;\n  padding: 0.55em 1em;\n  background: ", ";\n  display: grid;\n  place-items: center;\n  color: white;\n  margin: 1em 0;\n  letter-spacing: 1px;\n  transition: 0.4s;\n  cursor: ", ";\n  &:hover,\n  &:focus {\n    opacity: 0.7;\n  }\n"])), function (props) {
+  return props.color || '#FD0015';
+}, function (props) {
+  return props.disabled ? 'not-allowed' : 'pointer';
+});
+var ButtonRowContainer = styled__default.div(_templateObject8$2 || (_templateObject8$2 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  align-items: center;\n  button {\n    width: 4.862em;\n    height: 1.96em;\n    border-radius: 0.43em;\n    display: flex;\n    flex-direction: row;\n    justify-content: center;\n    align-items: center;\n    font-weight: 600;\n    letter-spacing: 1px;\n    color: white;\n    background-color: ", ";\n    border: 2px solid\n      ", ";\n    cursor: ", ";\n  }\n  .back {\n    font-size: 0.875em;\n    font-weight: 500;\n    justify-content: flex-start;\n    margin-right: 0.2em;\n    color: #323232;\n    background: transparent;\n    border: none;\n    cursor: ", ";\n    font-size: 0.8em;\n    transition: 0.4s;\n    .icon {\n      font-size: 1.2em;\n      margin-right: 2px;\n    }\n    &:hover,\n    &:focus {\n      letter-spacing: 1px;\n      outline: none;\n    }\n  }\n"])), function (props) {
+  return props.color || '#fd0015';
+}, function (props) {
+  return props.color ? material.alpha(props.color, 0.87) : 'rgba(254, 81, 96, 0.87)';
+}, function (props) {
+  return props.disabledNext ? 'not-allowed' : 'pointer';
+}, function (props) {
+  return props.disabledBack ? 'not-allowed' : 'pointer';
+});
+var CheckBoxRow = styled__default.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\n  button {\n    border: none;\n    padding: 0.8em 3em;\n    background: ", ";\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: ", ";\n    padding: 0.8em 2em;\n    &:hover {\n      padding: 0.8em 2.4em;\n    }\n  }\n  .bold,\n  .red {\n    font-weight: 600;\n    font-size: 1.125em;\n  }\n  .red {\n    margin-left: 0.5em;\n    color: ", ";\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;
+}, function (props) {
+  return props.bg || 'rgba(253, 0, 21, 1)';
+}, function (props) {
+  return props.bg ? material.alpha(props.bg, 0.6) : 'rgba(107, 106, 106, 1)';
+}, function (prop) {
+  return prop.colorText || 'red';
+});
+var CreditCardFextField = styled__default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n  .MuiOutlinedInput-root {\n    background: ", ";\n  }\n  .save-btn {\n    background: ", ";\n  }\n"])), function (prop) {
+  return prop.bgInput + '!important' || '';
+}, function (prop) {
+  return prop.btnBg + '!important' || '';
+});
+var CardHeading = styled__default.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n  font-weight: 600;\n  margin-bottom: 1rem;\n"])));
+var DeliveryOptionContainer = styled__default.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n"])));
+var DeliveryOption = styled__default.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: flex-start;\n  max-width: 691px;\n  height: 40px;\n  padding: 0 1em;\n  border: 1px solid transparent;\n  transition: 0.3s;\n  cursor: pointer;\n  background-color: ", ";\n  border: ", ";\n  border-bottom: ", ";\n  border-radius: 5px;\n  &:last-child {\n    border-bottom: ", ";\n  }\n  &:hover {\n    background-color: ", ";\n    border: ", ";\n    border-radius: 5px;\n  }\n  p {\n    font-weight: 500;\n    color: black;\n    font-size: 0.95em;\n    text-transform: capitalize;\n  }\n  .circle {\n    border-radius: 50%;\n    display: grid;\n    place-items: center;\n    background: linear-gradient(345.48deg, #3c332a -131.29%, #ffffff 124.82%);\n    margin-right: 1em;\n    width: 14px;\n    height: 14px;\n    min-width: 14px;\n    min-height: 14px;\n    cursor: pointer;\n    .inner {\n      width: 10px;\n      height: 10px;\n      border-radius: 50%;\n      display: grid;\n      place-items: center;\n      background: linear-gradient(\n        326.37deg,\n        rgba(67, 58, 42, 0.9) -219.66%,\n        rgba(255, 255, 255, 0.9) 90.45%\n      );\n      box-shadow: inset -1px -1px 1px rgba(255, 255, 255, 0.45),\n        inset 0px 0px 10px rgba(0, 0, 0, 0.2);\n    }\n    .fill {\n      width: 6px;\n      height: 6px;\n      background: radial-gradient(\n            15.79% 15.79% at 36.84% 31.58%,\n            #ffffff 0%,\n            rgba(255, 255, 255, 0) 100%\n          )\n          /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */,\n        linear-gradient(\n          358.85deg,\n          rgba(157, 18, 30, 0.2) -19.81%,\n          rgba(12, 96, 157, 0) 64.74%\n        ),\n        radial-gradient(50% 50% at 50% 50%, #fab0b6 0%, #fd0015 100%), #fd0015;\n      background-blend-mode: normal, multiply, normal, normal;\n      box-shadow: 0px 0.5px 0px rgba(253, 0, 21, 0.25),\n        0px 1px 1px rgba(253, 0, 21, 0.2);\n      border-radius: 50%;\n      background: ", ";\n    }\n  }\n  .amount {\n    margin-left: auto;\n    color: ", ";\n    font-weight: ", ";\n    font-size: 0.95em;\n  }\n"])), function (props) {
+  return props.hovered ? props.bg : '';
+}, function (props) {
+  return props.hovered ? "1px solid " + props.border : '1px solid #fce1d9';
+}, function (props) {
+  return !props.hovered && "none";
+}, function (props) {
+  return props.hovered ? "1px solid " + props.border : '1px solid #fce1d9';
+}, function (props) {
+  return props.bg || '#fff0ec';
+}, function (props) {
+  return props.border ? "1px solid " + props.border : '1px solid #fce1d9';
+}, function (props) {
+  return props.color || '#fd0015';
+}, function (props) {
+  return props.buttonBg || props.color || '#fd0015';
+}, function (props) {
+  return props.hovered ? '800' : '700';
+});
+var CreditCard = styled__default.div(_templateObject14 || (_templateObject14 = _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__default.div(_templateObject15 || (_templateObject15 = _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__default(material.TableRow)(_templateObject16 || (_templateObject16 = _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: ", "\n      font-weight: inherit;\n    }\n    .light {\n      font-weight: 300;\n    }\n    .price {\n      font-weight: 600;\n    }\n    .sm {\n      font-weight: 500;\n    }\n    .bolder {\n      font-weight: 700;\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 ? props.bg || "'rgba(255, 240, 236, 1)'" : 'white';
+}, function (props) {
+  return props.bg || 'red';
+});
+var StyledTableCell = styled__default(material.TableCell)(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n  && {\n    border: none;\n    font-size: 1em;\n    .noAboveSm {\n      display: none;\n    }\n    @media only screen and (max-width: 748px) {\n      display: ", ";\n      padding: 0.5em 0.3em;\n      .noAboveSm {\n        display: inline-block;\n        margin-right: 6px;\n      }\n    }\n  }\n"])), function (props) {
+  return props.noSmall ? 'none' : '';
+});
+var BottomGrid = styled__default(material.Grid)(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n  .bold {\n    font-weight: 600;\n    text-transform: capitalize;\n    margin: 1em 0;\n    font-size: 1em;\n  }\n  .icon {\n    font-size: 1.6em;\n    color: ", ";\n  }\n  textarea {\n    width: 100%;\n    resize: none;\n    border: 1px solid\n      ", ";\n    border-radius: 4px;\n    margin-bottom: 2em;\n    padding: 1em;\n    background: ", ";\n  }\n  p {\n    font-size: 12px;\n    .ul {\n      text-decoration: underline;\n      font-size: inherit;\n    }\n  }\n  .bottom {\n    margin-left: 3em;\n    font-style: italic;\n    span {\n      font-weight: 600;\n      color: ", ";\n\n      cursor: pointer;\n      &:hover {\n        text-decoration: underline;\n      }\n    }\n  }\n"])), function (prop) {
+  return prop.bg || 'rgba(253, 0, 21, 1)';
+}, function (prop) {
+  var _prop$bgTextArea;
+  return ((_prop$bgTextArea = prop.bgTextArea) === null || _prop$bgTextArea === void 0 ? void 0 : _prop$bgTextArea.border) || 'rgba(253, 0, 21, 0.5)';
+}, function (prop) {
+  var _prop$bgTextArea2;
+  return ((_prop$bgTextArea2 = prop.bgTextArea) === null || _prop$bgTextArea2 === void 0 ? void 0 : _prop$bgTextArea2.bg) || '#fff8f6';
+}, function (props) {
+  return props.primaryColor || 'rgba(253, 0, 21, 1)';
+});
+
+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;
+  return /*#__PURE__*/React__default.createElement(TextFeildContainer, {
+    className: "checkout-form-input"
+  }, /*#__PURE__*/React__default.createElement(reactHookForm.Controller, _extends({}, controlls, {
+    defaultValue: "",
+    render: function render(_ref2) {
+      var field = _ref2.field;
+      return /*#__PURE__*/React__default.createElement(material.TextField, _extends({
+        placeholder: placeholder,
+        variant: "outlined",
+        required: true,
+        InputProps: showIcon ? {
+          startAdornment: /*#__PURE__*/React__default.createElement(material.InputAdornment, {
+            position: "start"
+          }, showIcon())
+        } : {},
+        fullWidth: true,
+        type: type || 'text'
+      }, field, {
+        autoFocus: autoFocus
+      }));
+    }
+  })));
 };
-API.get = function (url, options) {
-  return API(_extends({
-    url: url,
-    method: 'get'
-  }, options));
+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;
+  return /*#__PURE__*/React__default.createElement(TextFeildContainer, null, /*#__PURE__*/React__default.createElement(reactHookForm.Controller, {
+    control: control,
+    name: name,
+    defaultValue: "",
+    render: function render(_ref4) {
+      var field = _ref4.field;
+      return /*#__PURE__*/React__default.createElement(material.TextField, _extends({
+        fullWidth: true,
+        select: true,
+        displayEmpty: true,
+        required: true,
+        label: name,
+        autoFocus: autoFocus
+      }, field), key && (List === null || List === void 0 ? void 0 : List.map(function (item, i) {
+        return /*#__PURE__*/React__default.createElement(material.MenuItem, {
+          key: i,
+          value: item[val]
+        }, item[key]);
+      })));
+    }
+  }));
 };
-API.put = function (url, body, options) {
-  return API(_extends({
-    url: url,
-    body: body,
-    method: 'put'
-  }, options));
+
+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;
+  return /*#__PURE__*/React__default.createElement(StepsHeaderContainer, {
+    single: single,
+    username: username,
+    onClick: function onClick() {
+      if (!handleClick) return;
+      if (username) return;
+      handleClick();
+    }
+  }, /*#__PURE__*/React__default.createElement(material.Stack, {
+    justifyContent: 'space-between',
+    flexDirection: "row",
+    sx: {
+      width: '100%'
+    },
+    alignItems: "center"
+  }, /*#__PURE__*/React__default.createElement(material.Stack, {
+    flexDirection: "row",
+    alignItems: "center"
+  }, !withoutIcon && /*#__PURE__*/React__default.createElement("img", {
+    src: "/images/checkout/vector-" + icon + ".svg",
+    alt: "vector",
+    width: 18,
+    height: 18
+  }), username ? /*#__PURE__*/React__default.createElement("h5", null, "welcome", ' ', /*#__PURE__*/React__default.createElement("span", {
+    className: "primaryColor",
+    style: {
+      fontWeight: 700
+    }
+  }, username)) : /*#__PURE__*/React__default.createElement("h5", null, text)), !withoutIcon && /*#__PURE__*/React__default.createElement(hi.HiOutlineChevronDown, {
+    className: "dropIcon",
+    style: closed ? {
+      transform: 'rotate(-90deg)'
+    } : {
+      transform: 'rotate(0deg)'
+    }
+  })));
 };
-API.patch = function (url, body, options) {
-  return API(_extends({
-    url: url,
-    body: body,
-    method: 'patch'
-  }, options));
+
+var Step0 = function Step0(_ref) {
+  var loading = _ref.loading,
+    userName = _ref.userName,
+    handleLogin = _ref.handleLogin,
+    clickRedirect = _ref.clickRedirect;
+  var _useForm = reactHookForm.useForm(),
+    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,
+    icon: 1
+  }), /*#__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__default.createElement("span", {
+    onClick: function onClick() {
+      return clickRedirect('account/register');
+    }
+  }, "register"), ' ', "| ", /*#__PURE__*/React__default.createElement("span", {
+    className: "red primaryColor"
+  }, "login")), /*#__PURE__*/React__default.createElement(material.Grid, {
+    container: true,
+    component: 'form',
+    onSubmit: handleSubmit(onSubmit),
+    rowSpacing: 2,
+    sx: {
+      marginTop: '1em'
+    }
+  }, /*#__PURE__*/React__default.createElement(material.Grid, {
+    item: true,
+    sm: 6.5,
+    xs: 12
+  }, /*#__PURE__*/React__default.createElement(CheckoutInput, {
+    controlls: {
+      name: 'email',
+      placeholder: 'E-Mail Address',
+      control: control,
+      autoFocus: true,
+      type: 'email'
+    }
+  })), /*#__PURE__*/React__default.createElement(material.Grid, {
+    item: true,
+    sm: 6.5,
+    xs: 12
+  }, /*#__PURE__*/React__default.createElement(CheckoutInput, {
+    controlls: {
+      name: 'password',
+      placeholder: 'Password',
+      control: control,
+      type: 'password'
+    }
+  })), /*#__PURE__*/React__default.createElement(material.Grid, {
+    item: true,
+    sm: 4
+  }), /*#__PURE__*/React__default.createElement(CheckBoxRow, {
+    padding: ".8em 0 0 0"
+  }, /*#__PURE__*/React__default.createElement(material.Checkbox, {
+    size: "small"
+  }), /*#__PURE__*/React__default.createElement("p", null, "Remember me")), /*#__PURE__*/React__default.createElement(material.Grid, {
+    item: true,
+    xs: 12
+  }, /*#__PURE__*/React__default.createElement(CommonCheckoutBtn, {
+    padding: ".8em 3em",
+    uppercase: true,
+    type: "submit",
+    className: "primaryBgColor"
+  }, loading ? /*#__PURE__*/React__default.createElement(material.CircularProgress, {
+    color: "inherit",
+    size: 15
+  }) : 'Login')))));
 };
-API.post = function (url, body, options) {
-  return API(_extends({
-    url: url,
-    body: body,
-    method: 'post'
-  }, options));
+
+var ButtonRow = function ButtonRow(_ref) {
+  var handleBack = _ref.handleBack,
+    handleNext = _ref.handleNext,
+    backDisabled = _ref.backDisabled,
+    nextDisabled = _ref.nextDisabled,
+    color = _ref.color;
+  return /*#__PURE__*/React__default.createElement(ButtonRowContainer, {
+    disabledBack: backDisabled,
+    disabledNext: nextDisabled,
+    color: color
+  }, /*#__PURE__*/React__default.createElement("button", {
+    className: "back",
+    tabIndex: "1",
+    onClick: function onClick() {
+      if (backDisabled) return;
+      handleBack();
+    }
+  }, /*#__PURE__*/React__default.createElement(md.MdArrowBack, {
+    className: "icon"
+  }), "Back"), /*#__PURE__*/React__default.createElement("button", {
+    disabled: nextDisabled,
+    tabIndex: "1",
+    onClick: function onClick() {
+      if (nextDisabled) return;
+      handleNext();
+    },
+    className: "checkout-btn"
+  }, "Next"));
 };
-API["delete"] = function (url, body, options) {
-  return API(_extends({
-    url: url,
-    body: body,
-    method: 'delete'
-  }, options));
+
+var StoreForm = function StoreForm(_ref) {
+  var control = _ref.control,
+    _onSubmit = _ref.onSubmit,
+    handleSubmit = _ref.handleSubmit,
+    color = _ref.color;
+  return /*#__PURE__*/React__default.createElement(material.Grid, {
+    container: true,
+    columnSpacing: 1,
+    component: "form",
+    rowSpacing: 1,
+    paddingY: 4,
+    onSubmit: function onSubmit(e) {
+      e.preventDefault();
+      handleSubmit(_onSubmit)(e);
+    }
+  }, /*#__PURE__*/React__default.createElement(material.Grid, {
+    item: true,
+    xs: 12,
+    sm: 10
+  }, /*#__PURE__*/React__default.createElement(CheckoutInput, {
+    controlls: {
+      name: 'storeName',
+      placeholder: 'Store Name',
+      control: control
+    }
+  })), /*#__PURE__*/React__default.createElement(material.Grid, {
+    item: true,
+    xs: 6,
+    sm: 3.33
+  }, /*#__PURE__*/React__default.createElement(CheckoutInput, {
+    controlls: {
+      name: 'taxNumber',
+      placeholder: 'Tax number',
+      control: control,
+      type: 'number'
+    }
+  })), /*#__PURE__*/React__default.createElement(material.Grid, {
+    item: true,
+    xs: 6,
+    sm: 3.33
+  }, /*#__PURE__*/React__default.createElement(CheckoutInput, {
+    controlls: {
+      name: 'Mobile',
+      placeholder: 'Mobile',
+      control: control,
+      type: 'number'
+    }
+  })), /*#__PURE__*/React__default.createElement(material.Grid, {
+    item: true,
+    xs: 6,
+    sm: 3.33
+  }, /*#__PURE__*/React__default.createElement(CheckoutInput, {
+    controlls: {
+      name: 'email',
+      placeholder: 'Email',
+      control: control
+    }
+  })), /*#__PURE__*/React__default.createElement(material.Grid, {
+    item: true,
+    xs: 12,
+    sm: 10
+  }, /*#__PURE__*/React__default.createElement(CheckoutInput, {
+    controlls: {
+      name: 'description',
+      placeholder: 'Description',
+      control: control,
+      rows: '4'
+    }
+  })), /*#__PURE__*/React__default.createElement(material.Grid, {
+    item: true,
+    xs: 4
+  }, /*#__PURE__*/React__default.createElement(SaveButton, {
+    color: color
+  }, "save store")));
 };
-var handle401Error = function handle401Error(_ref4) {
-  var apiData = _ref4.apiData,
-    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;
-      return Promise.resolve(API({
-        url: '/refreshToken',
-        hideErrorMessage: true,
-        headers: {
-          refreshToken: oldRefreshToken,
-          Authorization: "Bearer " + oldAccessToken
-        }
-      })).then(function (_ref5) {
-        var accessToken = _ref5.access,
-          refreshToken = _ref5.refresh;
-        setItem(ACCESS_TOKEN, accessToken);
-        setItem(REFRESH_TOKEN, refreshToken);
-        if (apiData.throwErrorOnTokenTimeout) {
-          exception.reason = 'resetRefreshToken';
-          throw exception;
-        } else {
-          return Promise.resolve(API(apiData));
-        }
-      });
-    }, function () {
-      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 AddressForm = function AddressForm(_ref) {
+  var control = _ref.control,
+    countries = _ref.countries,
+    states = _ref.states,
+    _onSubmit = _ref.onSubmit,
+    handleSubmit = _ref.handleSubmit,
+    color = _ref.color;
+  return /*#__PURE__*/React__default.createElement(material.Grid, {
+    container: true,
+    rowSpacing: 2,
+    columnSpacing: 2,
+    paddingY: 2,
+    component: "form",
+    onSubmit: function onSubmit(e) {
+      e.preventDefault();
+      handleSubmit(_onSubmit)(e);
+    },
+    sx: {
+      paddingBottom: '1em'
+    }
+  }, /*#__PURE__*/React__default.createElement(material.Grid, {
+    item: true,
+    xs: 12,
+    sm: 10
+  }, /*#__PURE__*/React__default.createElement(CheckoutInput, {
+    controlls: {
+      name: 'address1',
+      placeholder: 'Address 1*',
+      control: control
+    }
+  })), /*#__PURE__*/React__default.createElement(material.Grid, {
+    item: true,
+    xs: 6,
+    sm: 3.34
+  }, /*#__PURE__*/React__default.createElement(CheckoutInput, {
+    controlls: {
+      name: 'address2',
+      placeholder: 'Address 2*',
+      control: control
+    }
+  })), /*#__PURE__*/React__default.createElement(material.Grid, {
+    item: true,
+    xs: 6,
+    sm: 3.34
+  }, /*#__PURE__*/React__default.createElement(CheckoutSelect, {
+    controlls: {
+      name: 'country',
+      placeholder: 'Country',
+      control: control,
+      List: countries,
+      key: 'name'
+    }
+  })), /*#__PURE__*/React__default.createElement(material.Grid, {
+    item: true,
+    xs: 6,
+    sm: 3.34
+  }, /*#__PURE__*/React__default.createElement(CheckoutSelect, {
+    controlls: {
+      name: 'state',
+      placeholder: 'State',
+      control: control,
+      List: states,
+      key: 'name'
+    }
+  })), /*#__PURE__*/React__default.createElement(material.Grid, {
+    item: true,
+    xs: 6,
+    sm: 3.34
+  }, /*#__PURE__*/React__default.createElement(CheckoutInput, {
+    controlls: {
+      name: 'city',
+      placeholder: 'City*',
+      control: control
+    }
+  })), /*#__PURE__*/React__default.createElement(material.Grid, {
+    item: true,
+    xs: 6,
+    sm: 3.34
+  }, /*#__PURE__*/React__default.createElement(CheckoutInput, {
+    controlls: {
+      name: 'zip',
+      placeholder: 'Zip/Postal Code*',
+      control: control,
+      type: 'number'
+    }
+  })), /*#__PURE__*/React__default.createElement(material.Grid, {
+    item: true,
+    xs: 12,
+    sm: 3.34
+  }, /*#__PURE__*/React__default.createElement(CheckoutInput, {
+    controlls: {
+      name: 'mobile',
+      placeholder: 'Mobile*',
+      control: control,
+      type: 'number'
+    }
+  })), /*#__PURE__*/React__default.createElement(material.Grid, {
+    item: true,
+    xs: 8,
+    sm: 8
+  }, /*#__PURE__*/React__default.createElement(SaveButton, {
+    color: color,
+    type: "submit"
+  }, "Save address")));
 };
-var handleError = function handleError(_ref6) {
-  var exception = _ref6.exception,
-    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;
-    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 () {
-          return Promise.resolve(handle401Error({
-            apiData: apiData,
-            exception: exception
-          }));
-        }, function (e) {
-          alert(e);
-          if (throwException) {
-            throw exception;
-          }
-        });
-      } else {
-        if (!hideErrorMessage) {
-          var errMessage = errorMessage;
-          if (showAPIError) {
-            errMessage = lodash.get(exception, 'response.data.message');
-          }
-          alert(errMessage);
-        }
-        if (throwException) {
-          throw exception;
-        }
-      }
-    }());
-  } catch (e) {
-    return Promise.reject(e);
+
+var Step1 = function Step1(_ref) {
+  var _addressList$, _styles$input, _styles$input2, _styles$button, _addressList, _styles$input3, _addressList2, _styles$button2, _styles$button3;
+  var handleNext = _ref.handleNext,
+    setShipping = _ref.setShipping,
+    setBilling = _ref.setBilling,
+    addStore = _ref.addStore,
+    addStoreAddress = _ref.addStoreAddress,
+    _ref$stores = _ref.stores,
+    stores = _ref$stores === void 0 ? [] : _ref$stores,
+    selectedStore = _ref.selectedStore,
+    setSelectedStore = _ref.setSelectedStore,
+    countries = _ref.countries,
+    setSelectedCountry = _ref.setSelectedCountry,
+    states = _ref.states,
+    styles = _ref.styles;
+  var _useForm = reactHookForm.useForm(),
+    control = _useForm.control,
+    handleSubmit = _useForm.handleSubmit;
+  var _useState = React.useState(false),
+    showShipping = _useState[0],
+    setShowShipping = _useState[1];
+  var _useForm2 = reactHookForm.useForm(),
+    addressControl = _useForm2.control,
+    watch = _useForm2.watch,
+    handleSubmitAddress = _useForm2.handleSubmit;
+  var StoresList = [].concat(stores, [{
+    storeName: 'Add Store',
+    id: 99999999
+  }]);
+  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 billing Address',
+      id: 99999999
+    }]);
+  } else {
+    addressList = [{
+      address1: 'Add billing Address',
+      id: 99999999
+    }];
   }
+  var _useState2 = React.useState((_addressList$ = addressList[0]) === null || _addressList$ === void 0 ? void 0 : _addressList$.id),
+    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);
+  };
+  var next = function next() {
+    setBilling(address);
+    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, {
+    text: 'billing information',
+    icon: 2
+  }), /*#__PURE__*/React__default.createElement(StepsContent, {
+    bg: styles === null || styles === void 0 ? void 0 : (_styles$input = styles.input) === null || _styles$input === void 0 ? void 0 : _styles$input.bg
+  }, /*#__PURE__*/React__default.createElement(material.Grid, {
+    container: true,
+    rowSpacing: 2,
+    columnSpacing: 1
+  }, /*#__PURE__*/React__default.createElement(material.Grid, {
+    item: true,
+    xs: 12,
+    sm: 10
+  }, /*#__PURE__*/React__default.createElement(Select, {
+    className: "checkout-input",
+    bg: styles === null || styles === void 0 ? void 0 : (_styles$input2 = styles.input) === null || _styles$input2 === void 0 ? void 0 : _styles$input2.bg
+  }, /*#__PURE__*/React__default.createElement("select", {
+    value: selectedStore,
+    onChange: function onChange(e) {
+      return setSelectedStore(parseInt(e.target.value));
+    }
+  }, StoresList === null || StoresList === void 0 ? void 0 : StoresList.map(function (store, i) {
+    return /*#__PURE__*/React__default.createElement("option", {
+      key: i,
+      value: store === null || store === void 0 ? void 0 : store.id
+    }, store === null || store === void 0 ? void 0 : store.storeName);
+  }))))), selectedStore === 99999999 && /*#__PURE__*/React__default.createElement(StoreForm, {
+    control: control,
+    onSubmit: onSubmit,
+    handleSubmit: handleSubmit,
+    color: styles === null || styles === void 0 ? void 0 : (_styles$button = styles.button) === null || _styles$button === void 0 ? void 0 : _styles$button.bg
+  }), /*#__PURE__*/React__default.createElement(material.Grid, {
+    container: true
+  }, /*#__PURE__*/React__default.createElement(material.Grid, {
+    item: true,
+    xs: 12,
+    sm: 10,
+    sx: {
+      padding: '1em 0'
+    }
+  }, ((_addressList = addressList) === null || _addressList === void 0 ? void 0 : _addressList.length) > 0 && /*#__PURE__*/React__default.createElement(Select, {
+    style: {
+      backgroundColor: styles === null || styles === void 0 ? void 0 : (_styles$input3 = styles.input) === null || _styles$input3 === void 0 ? void 0 : _styles$input3.bg
+    }
+  }, /*#__PURE__*/React__default.createElement("select", {
+    value: address,
+    onChange: function onChange(e) {
+      return setAddress(parseInt(e.target.value));
+    }
+  }, (_addressList2 = addressList) === null || _addressList2 === void 0 ? void 0 : _addressList2.map(function (address, i) {
+    return /*#__PURE__*/React__default.createElement("option", {
+      key: i,
+      value: address.id
+    }, address === null || address === void 0 ? void 0 : address.address1);
+  }))))), address === 99999999 && /*#__PURE__*/React__default.createElement(AddressForm, {
+    control: addressControl,
+    handleSubmit: handleSubmitAddress,
+    onSubmit: addAddress,
+    countries: countries,
+    states: states,
+    color: styles === null || styles === void 0 ? void 0 : (_styles$button2 = styles.button) === null || _styles$button2 === void 0 ? void 0 : _styles$button2.bg
+  }), /*#__PURE__*/React__default.createElement(material.Grid, {
+    item: true,
+    xs: 12
+  }, /*#__PURE__*/React__default.createElement(CheckBoxRow, {
+    onClick: function onClick() {
+      setShowShipping(false);
+    }
+  }, /*#__PURE__*/React__default.createElement(material.Checkbox, {
+    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 this address"))), /*#__PURE__*/React__default.createElement(CheckBoxRow, {
+    padding: '0 0 1em 0',
+    onClick: function onClick() {
+      setShowShipping(true);
+    }
+  }, /*#__PURE__*/React__default.createElement(material.Checkbox, {
+    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, {
+    color: styles === null || styles === void 0 ? void 0 : (_styles$button3 = styles.button) === null || _styles$button3 === void 0 ? void 0 : _styles$button3.bg,
+    backDisabled: true,
+    handleNext: function handleNext() {
+      next();
+    },
+    nextDisabled: !selectedStore || !address || selectedStore === 99999999 || address === 99999999
+  })));
 };
 
-var _templateObject$9;
+var _templateObject$a;
 var Loader$1 = function Loader(_ref) {
   var style = _ref.style;
   return /*#__PURE__*/React__default.createElement(LoaderContainer, {
@@ -3267,7 +3419,7 @@ var Loader$1 = function Loader(_ref) {
     color: "inherit"
   })));
 };
-var LoaderContainer = styled__default.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 LoaderContainer = styled__default.div(_templateObject$a || (_templateObject$a = _taggedTemplateLiteralLoose(["\n  display: flex;\n  width: 100%;\n  & > div {\n    margin: auto;\n    width: 50px;\n    height: 50px;\n  }\n"])));
 
 var AsyncDataLoad = function AsyncDataLoad(_ref) {
   var apiEndPoint = _ref.apiEndPoint,
@@ -3306,7 +3458,7 @@ var AsyncDataLoad = function AsyncDataLoad(_ref) {
               data = _asyncService;
             });
           } else {
-            return Promise.resolve(API(_extends({
+            return Promise.resolve(API$1(_extends({
               apiEndPoint: apiEndPoint,
               token: token,
               hideErrorMessage: true
@@ -3350,7 +3502,7 @@ var AsyncDataLoad = function AsyncDataLoad(_ref) {
 };
 var AsyncDataLoadComponent = React.memo(AsyncDataLoad);
 
-var _templateObject$a;
+var _templateObject$b;
 var Step2 = function Step2(_ref) {
   var _addressList$, _addressList, _styles$button2;
   var apiEndPoint = _ref.apiEndPoint,
@@ -3475,7 +3627,7 @@ var Step2 = function Step2(_ref) {
         return Promise.resolve(function () {
           if (shipStore || shipStore !== null && shipStore !== void 0 && shipStore.showSkuOnSalePage) {
             return _catch(function () {
-              return Promise.resolve(API({
+              return Promise.resolve(API$1({
                 apiEndPoint: apiEndPoint,
                 token: token,
                 url: "/shipstation/getShippingRates",
@@ -3489,7 +3641,7 @@ var Step2 = function Step2(_ref) {
             return function () {
               if (carrier !== null && carrier !== void 0 && carrier.id) {
                 return _catch(function () {
-                  return Promise.resolve(API({
+                  return Promise.resolve(API$1({
                     apiEndPoint: apiEndPoint,
                     token: token,
                     url: "/shipping/options/v1?parentShippingId=" + (carrier === null || carrier === void 0 ? void 0 : carrier.id)
@@ -3572,7 +3724,7 @@ var Step2 = function Step2(_ref) {
     color: styles === null || styles === void 0 ? void 0 : (_styles$button2 = styles.button) === null || _styles$button2 === void 0 ? void 0 : _styles$button2.bg
   })));
 };
-var ImageContainer = styled__default(material.CardMedia)(_templateObject$a || (_templateObject$a = _taggedTemplateLiteralLoose(["\n  max-width: 100%;\n  max-height: 3rem,\n  border-radius: 14px;\n  img {\n    max-width: 100%;\n  }\n"])));
+var ImageContainer = styled__default(material.CardMedia)(_templateObject$b || (_templateObject$b = _taggedTemplateLiteralLoose(["\n  max-width: 100%;\n  max-height: 3rem,\n  border-radius: 14px;\n  img {\n    max-width: 100%;\n  }\n"])));
 
 var CreditCardForm = function CreditCardForm(_ref) {
   var handleChange = _ref.handleChange,
@@ -3993,7 +4145,7 @@ var Step3 = function Step3(_ref) {
       return Promise.resolve(function () {
         if (apiEndPoint && token && authoriseDotNet) {
           return _catch(function () {
-            return Promise.resolve(API({
+            return Promise.resolve(API$1({
               apiEndPoint: apiEndPoint,
               token: token,
               url: "/authoriseDotNet/customerProfile?customerId=" + customerId
@@ -4154,13 +4306,19 @@ var Step4 = function Step4(_ref) {
     placeOrder = _ref.placeOrder,
     storeCredits = _ref.storeCredits,
     styles = _ref.styles,
-    shippingMethod = _ref.shippingMethod;
+    shippingMethod = _ref.shippingMethod,
+    _ref$discountCoupons = _ref.discountCoupons,
+    discountCoupons = _ref$discountCoupons === void 0 ? [] : _ref$discountCoupons;
   var _React$useState = React__default.useState(false),
     checked = _React$useState[0],
     setChecked = _React$useState[1];
   var _React$useState2 = React__default.useState(''),
     comments = _React$useState2[0],
     setComments = _React$useState2[1];
+  var discountTotal = 0;
+  discountCoupons === null || discountCoupons === void 0 ? void 0 : discountCoupons.forEach(function (element) {
+    discountTotal = discountTotal + element.amount;
+  });
   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',
@@ -4241,7 +4399,41 @@ var Step4 = function Step4(_ref) {
     align: "right"
   }, /*#__PURE__*/React__default.createElement("p", {
     className: "max sm  primaryColor"
-  }, "Calculated later"))), storeCredits && storeCredits > 0 ? /*#__PURE__*/React__default.createElement(StyledTableRow, null, /*#__PURE__*/React__default.createElement(StyledTableCell, {
+  }, "Calculated later"))), discountCoupons === null || discountCoupons === void 0 ? void 0 : discountCoupons.map(function (coupon) {
+    return /*#__PURE__*/React__default.createElement(StyledTableRow, null, /*#__PURE__*/React__default.createElement(StyledTableCell, {
+      colSpan: 1,
+      noSmall: true
+    }), /*#__PURE__*/React__default.createElement(StyledTableCell, {
+      colSpan: 1
+    }), /*#__PURE__*/React__default.createElement(StyledTableCell, {
+      colSpan: 1
+    }, /*#__PURE__*/React__default.createElement("p", {
+      className: "max sm",
+      style: {
+        fontSize: '0.8rem'
+      }
+    }, coupon === null || coupon === void 0 ? void 0 : coupon.discountName)), /*#__PURE__*/React__default.createElement(StyledTableCell, {
+      align: "right"
+    }, /*#__PURE__*/React__default.createElement("p", {
+      className: "max sm  primaryColor",
+      style: {
+        fontSize: '0.8rem'
+      }
+    }, renderMoney(coupon === null || coupon === void 0 ? void 0 : coupon.amount))));
+  }), discountTotal && /*#__PURE__*/React__default.createElement(StyledTableRow, null, /*#__PURE__*/React__default.createElement(StyledTableCell, {
+    colSpan: 1,
+    noSmall: true
+  }), /*#__PURE__*/React__default.createElement(StyledTableCell, {
+    colSpan: 1
+  }), /*#__PURE__*/React__default.createElement(StyledTableCell, {
+    colSpan: 1
+  }, /*#__PURE__*/React__default.createElement("p", {
+    className: "max sm"
+  }, "Discount Total")), /*#__PURE__*/React__default.createElement(StyledTableCell, {
+    align: "right"
+  }, /*#__PURE__*/React__default.createElement("p", {
+    className: "max sm  primaryColor"
+  }, renderMoney(discountTotal)))), storeCredits && storeCredits > 0 ? /*#__PURE__*/React__default.createElement(StyledTableRow, null, /*#__PURE__*/React__default.createElement(StyledTableCell, {
     colSpan: 1,
     noSmall: true
   }), /*#__PURE__*/React__default.createElement(StyledTableCell, {
@@ -4273,7 +4465,7 @@ var Step4 = function Step4(_ref) {
     align: "right"
   }, /*#__PURE__*/React__default.createElement("p", {
     className: "max sm total bolder primaryColor"
-  }, "$", ((cartData === null || cartData === void 0 ? void 0 : cartData.totalCartPrice) - storeCr + (shippingMethod === null || shippingMethod === void 0 ? void 0 : shippingMethod.amount) || 0).toFixed(2)))))), /*#__PURE__*/React__default.createElement(BottomGrid, {
+  }, renderMoney(((cartData === null || cartData === void 0 ? void 0 : cartData.totalCartPrice) || 0) - (storeCr || 0) + ((shippingMethod === null || shippingMethod === void 0 ? void 0 : shippingMethod.amount) || 0) - discountTotal)))))), /*#__PURE__*/React__default.createElement(BottomGrid, {
     container: true,
     columnSpacing: 0,
     rowSpacing: 0,
@@ -4440,7 +4632,8 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
     shippingAddress = _ref.shippingAddress,
     billingAddress = _ref.billingAddress,
     selectedPaymentMethod = _ref.selectedPaymentMethod,
-    shippingMethod = _ref.shippingMethod;
+    shippingMethod = _ref.shippingMethod,
+    discountCoupons = _ref.discountCoupons;
   return /*#__PURE__*/React__default.createElement(CheckoutPageContainer, {
     className: "checkout",
     bg: styles === null || styles === void 0 ? void 0 : styles.bg
@@ -4606,7 +4799,8 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
       ordering: loading,
       placeOrder: placeOrder,
       styles: styles,
-      storeCredits: selectedStoreCredits
+      storeCredits: selectedStoreCredits,
+      discountCoupons: discountCoupons
     })));
   }))))), /*#__PURE__*/React__default.createElement(CheckoutSummary, {
     billingInformation: billingAddress,
@@ -4615,11 +4809,12 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
     paymentMethod: selectedPaymentMethod,
     total: cartData === null || cartData === void 0 ? void 0 : cartData.totalCartPrice,
     bg: styles === null || styles === void 0 ? void 0 : (_styles$checkoutSumma = styles.checkoutSummary) === null || _styles$checkoutSumma === void 0 ? void 0 : _styles$checkoutSumma.bg,
-    color: styles === null || styles === void 0 ? void 0 : (_styles$checkoutSumma2 = styles.checkoutSummary) === null || _styles$checkoutSumma2 === void 0 ? void 0 : _styles$checkoutSumma2.color
+    color: styles === null || styles === void 0 ? void 0 : (_styles$checkoutSumma2 = styles.checkoutSummary) === null || _styles$checkoutSumma2 === void 0 ? void 0 : _styles$checkoutSumma2.color,
+    discountCoupons: discountCoupons
   }));
 };
 
-var _templateObject$b;
+var _templateObject$c;
 var SideMenuItemComponent = function SideMenuItemComponent(props) {
   var className = props.className,
     onClick = props.onClick,
@@ -4713,7 +4908,7 @@ var SideMenuItem = function SideMenuItem(props) {
   }))) : null;
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, MenuItemRoot, MenuItemChildren);
 };
-var ListItemIconContainer = styled__default(material.ListItemIcon)(_templateObject$b || (_templateObject$b = _taggedTemplateLiteralLoose(["\n  min-width: 40px !important;\n"])));
+var ListItemIconContainer = styled__default(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,
@@ -4835,7 +5030,7 @@ var getcsvData = function getcsvData(_ref3) {
     token = _ref3.token;
   try {
     return Promise.resolve(_catch(function () {
-      return Promise.resolve(API({
+      return Promise.resolve(API$1({
         method: 'GET',
         url: url,
         responseTypeData: 'blob',
@@ -4850,7 +5045,7 @@ var getcsvData = function getcsvData(_ref3) {
   }
 };
 
-var _templateObject$c, _templateObject2$9, _templateObject3$9, _templateObject4$7, _templateObject5$7, _templateObject6$7, _templateObject7$5, _templateObject8$2, _templateObject9$2, _templateObject10$1;
+var _templateObject$d, _templateObject2$9, _templateObject3$9, _templateObject4$7, _templateObject5$7, _templateObject6$7, _templateObject7$6, _templateObject8$3, _templateObject9$2, _templateObject10$1;
 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$data, _tableData$data2, _tableData$pagination, _tableData$data3, _tableData$pagination2, _tableData$pagination3;
@@ -4998,7 +5193,7 @@ var APITable = React.forwardRef(function (_ref, ref) {
                 apiResponse = _asyncService;
               });
             } else {
-              return Promise.resolve(API(_extends({}, apiData, {
+              return Promise.resolve(API$1(_extends({}, apiData, {
                 queryParams: queryParams
               }))).then(function (_API) {
                 apiResponse = _API;
@@ -5065,7 +5260,7 @@ var APITable = React.forwardRef(function (_ref, ref) {
     onRowsPerPageChange: handleChangeRowsPerPage
   }, props))));
 });
-var Root = styled__default(material.Stack)(_templateObject$c || (_templateObject$c = _taggedTemplateLiteralLoose(["\n  background-color: ", " !important;\n  border-radius: 14px !important;\n  margin: 1.2rem 0;\n  box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px 0px;\n"])), function (props) {
+var Root = styled__default(material.Stack)(_templateObject$d || (_templateObject$d = _taggedTemplateLiteralLoose(["\n  background-color: ", " !important;\n  border-radius: 14px !important;\n  margin: 1.2rem 0;\n  box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px 0px;\n"])), function (props) {
   return props.secondaryColor;
 });
 var PaperContainer = styled__default(material.Paper)(_templateObject2$9 || (_templateObject2$9 = _taggedTemplateLiteralLoose(["\n  background-color: ", " !important;\n  color: ", " !important;\n  border-radius: 14px !important;\n  padding: 1rem;\n  box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px 0px;\n"])), function (props) {
@@ -5077,8 +5272,8 @@ var HeaderContent = styled__default.div(_templateObject3$9 || (_templateObject3$
 var TableStyledContainer = styled__default(material.TableContainer)(_templateObject4$7 || (_templateObject4$7 = _taggedTemplateLiteralLoose(["\n  border-radius: 14px 12px 0 0 !important;\n"])));
 var TableStyled = styled__default(material.Table)(_templateObject5$7 || (_templateObject5$7 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  padding: 0 1rem;\n"])));
 var TableBodyContainer = styled__default(material.TableBody)(_templateObject6$7 || (_templateObject6$7 = _taggedTemplateLiteralLoose([""])));
-var TableRowContainer = styled__default(material.TableRow)(_templateObject7$5 || (_templateObject7$5 = _taggedTemplateLiteralLoose(["\n  &:hover {\n    box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px 0px;\n    td {\n      // border: none !important;\n    }\n  }\n"])));
-var TableHeadContainer = styled__default(material.TableCell)(_templateObject8$2 || (_templateObject8$2 = _taggedTemplateLiteralLoose(["\n  background-color: ", " !important;\n  // border-bottom: 1px solid #aaa8ba80 !important;\n  color: ", " !important;\n  font-weight: 600 !important;\n  padding: 12px !important;\n  font-size: 1.1rem;\n"])), function (props) {
+var TableRowContainer = styled__default(material.TableRow)(_templateObject7$6 || (_templateObject7$6 = _taggedTemplateLiteralLoose(["\n  &:hover {\n    box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px 0px;\n    td {\n      // border: none !important;\n    }\n  }\n"])));
+var TableHeadContainer = styled__default(material.TableCell)(_templateObject8$3 || (_templateObject8$3 = _taggedTemplateLiteralLoose(["\n  background-color: ", " !important;\n  // border-bottom: 1px solid #aaa8ba80 !important;\n  color: ", " !important;\n  font-weight: 600 !important;\n  padding: 12px !important;\n  font-size: 1.1rem;\n"])), function (props) {
   return props.secondaryColor;
 }, function (props) {
   return props.fontColor;
@@ -5094,7 +5289,7 @@ var TablePaginationContainer = styled__default(material.TablePagination)(_templa
   return props.fontColor;
 });
 
-var _templateObject$d, _templateObject2$a, _templateObject3$a;
+var _templateObject$e, _templateObject2$a, _templateObject3$a;
 var DateRangePicker = function DateRangePicker(_ref) {
   var onChange = _ref.onChange,
     fontColor = _ref.fontColor,
@@ -5157,7 +5352,7 @@ var DateRangePicker = function DateRangePicker(_ref) {
     }
   }, "Apply"))));
 };
-var Root$1 = styled__default.div(_templateObject$d || (_templateObject$d = _taggedTemplateLiteralLoose([""])));
+var Root$1 = styled__default.div(_templateObject$e || (_templateObject$e = _taggedTemplateLiteralLoose([""])));
 var DatePickerContainer = styled__default(DesktopDatePicker.DesktopDatePicker)(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteralLoose(["\n  margin: 0.4rem 0 !important;\n  // margin-right: ", ";\n  .MuiFormLabel-root,\n  svg,\n  input {\n    color: ", " !important;\n  }\n  fieldset {\n    border-color: ", " !important;\n  }\n  input {\n    padding: 8px;\n  }\n  .MuiFormLabel-root.MuiInputLabel-shrink {\n    top: 0;\n  }\n  .MuiFormLabel-root {\n    top: -7px;\n  }\n"])), function (props) {
   return props.marginRight && '4px !important';
 }, function (props) {
@@ -5169,7 +5364,7 @@ var TextContainer = styled__default.span(_templateObject3$a || (_templateObject3
   return props.fontColor;
 });
 
-var _templateObject$e, _templateObject2$b, _templateObject3$b, _templateObject4$8, _templateObject5$8, _templateObject6$8, _templateObject7$6, _templateObject8$3, _templateObject9$3, _templateObject10$2, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16$1, _templateObject17$1, _templateObject18$1;
+var _templateObject$f, _templateObject2$b, _templateObject3$b, _templateObject4$8, _templateObject5$8, _templateObject6$8, _templateObject7$7, _templateObject8$4, _templateObject9$3, _templateObject10$2, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16$1, _templateObject17$1, _templateObject18$1;
 var totalIcons = [{
   name: '',
   icon: /*#__PURE__*/React__default.createElement(ai.AiOutlineShoppingCart, null)
@@ -5337,13 +5532,13 @@ var Dashboard = function Dashboard(_ref) {
     (function () {
       try {
         var _temp = _catch(function () {
-          return Promise.resolve(API({
+          return Promise.resolve(API$1({
             url: "/ecommerce/customer",
             apiEndPoint: apiEndPoint,
             token: token
           })).then(function (customerDataResponse) {
             setCustomerData(customerDataResponse);
-            return Promise.resolve(API({
+            return Promise.resolve(API$1({
               url: "/ecommerce/dashboard",
               apiEndPoint: apiEndPoint,
               token: token
@@ -5632,7 +5827,7 @@ var Dashboard = function Dashboard(_ref) {
     alt: "image"
   })))))))));
 };
-var Root$2 = styled__default.div(_templateObject$e || (_templateObject$e = _taggedTemplateLiteralLoose([""])));
+var Root$2 = styled__default.div(_templateObject$f || (_templateObject$f = _taggedTemplateLiteralLoose([""])));
 var TitleContainer = styled__default.h4(_templateObject2$b || (_templateObject2$b = _taggedTemplateLiteralLoose(["\n  span {\n    color: ", ";\n    font-size: 2.7rem;\n    font-weight: 500;\n  }\n  b {\n    color: ", ";\n    font-size: 2.7rem;\n  }\n"])), function (props) {
   return props.fontColor;
 }, function (props) {
@@ -5648,10 +5843,10 @@ var TypographyContainer = styled__default(material.Typography)(_templateObject4$
 });
 var CardMediaContainer = styled__default(material.CardMedia)(_templateObject5$8 || (_templateObject5$8 = _taggedTemplateLiteralLoose(["\n  border-radius: 50%;\n  max-width: 80px;\n  margin: 1.5rem 0;\n"])));
 var DividerContainer = styled__default(material.Divider)(_templateObject6$8 || (_templateObject6$8 = _taggedTemplateLiteralLoose([""])));
-var CardContainer = styled__default(material.Stack)(_templateObject7$6 || (_templateObject7$6 = _taggedTemplateLiteralLoose(["\n  background-color: ", ";\n  border-radius: 14px;\n  box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px 0px;\n  max-width: 300px;\n"])), function (props) {
+var CardContainer = styled__default(material.Stack)(_templateObject7$7 || (_templateObject7$7 = _taggedTemplateLiteralLoose(["\n  background-color: ", ";\n  border-radius: 14px;\n  box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px 0px;\n  max-width: 300px;\n"])), function (props) {
   return props.isNightMode ? props.secondaryColor : "rgba(" + hexToRgbA(props.primaryColor) + ",0.1)";
 });
-var SocialIconContainer = styled__default.a(_templateObject8$3 || (_templateObject8$3 = _taggedTemplateLiteralLoose(["\n  margin: 0.4rem;\n  margin-left: ", ";\n  &:hover {\n    svg {\n      color: ", ";\n    }\n  }\n  svg {\n    font-size: 1.5rem;\n    color: ", ";\n  }\n"])), function (props) {
+var SocialIconContainer = styled__default.a(_templateObject8$4 || (_templateObject8$4 = _taggedTemplateLiteralLoose(["\n  margin: 0.4rem;\n  margin-left: ", ";\n  &:hover {\n    svg {\n      color: ", ";\n    }\n  }\n  svg {\n    font-size: 1.5rem;\n    color: ", ";\n  }\n"])), function (props) {
   return props.zeroMarginLeft && '0';
 }, function (props) {
   return props.primaryColor;
@@ -5701,28 +5896,6 @@ var StatusContainer = styled__default(material.Stack)(_templateObject16$1 || (_t
 var TableContainer = styled__default.div(_templateObject17$1 || (_templateObject17$1 = _taggedTemplateLiteralLoose(["\n  margin-top: 2rem;\n  border-radius: 14px;\n"])));
 var InvoiceDialog = styled__default(material.Dialog)(_templateObject18$1 || (_templateObject18$1 = _taggedTemplateLiteralLoose(["\n  iframe {\n    width: 900px;\n    border: none;\n    height: 600px;\n  }\n"])));
 
-var _templateObject$f;
-var MuiButton = function MuiButton(props) {
-  var fontColor = props.fontColor,
-    primaryColor = props.primaryColor,
-    children = props.children,
-    loading = props.loading,
-    disabled = props.disabled;
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ButtonContainer, _extends({
-    variant: "contained",
-    fontColor: fontColor,
-    primaryColor: primaryColor
-  }, props, {
-    disabled: loading ? true : disabled
-  }), loading ? /*#__PURE__*/React__default.createElement(material.CircularProgress, {
-    color: "inherit",
-    size: 21
-  }) : children));
-};
-var ButtonContainer = styled__default(material.Button)(_templateObject$f || (_templateObject$f = _taggedTemplateLiteralLoose(["\n  background: ", " !important;\n"])), function (props) {
-  return props.primaryColor;
-});
-
 var _templateObject$g;
 var FormTextField = function FormTextField(props) {
   var label = props.label,
@@ -5794,7 +5967,7 @@ var MyProfile = function MyProfile(_ref) {
     (function () {
       try {
         var _temp = _catch(function () {
-          return Promise.resolve(API({
+          return Promise.resolve(API$1({
             apiEndPoint: apiEndPoint,
             token: token,
             url: "/ecommerce/customer",
@@ -5817,7 +5990,7 @@ var MyProfile = function MyProfile(_ref) {
       };
       setIsLoading(true);
       var _temp2 = _catch(function () {
-        return Promise.resolve(API({
+        return Promise.resolve(API$1({
           apiEndPoint: apiEndPoint,
           token: token,
           method: 'put',
@@ -6091,7 +6264,7 @@ var getStatesById = function getStatesById(_ref) {
     token = _ref.token,
     id = _ref.id;
   try {
-    return Promise.resolve(API({
+    return Promise.resolve(API$1({
       apiEndPoint: apiEndPoint,
       token: token,
       url: "/country/" + id + "/allState",
@@ -6105,7 +6278,7 @@ var getCountry = function getCountry(_ref2) {
   var apiEndPoint = _ref2.apiEndPoint,
     token = _ref2.token;
   try {
-    return Promise.resolve(API({
+    return Promise.resolve(API$1({
       apiEndPoint: apiEndPoint,
       token: token,
       url: "/country/all",
@@ -6189,7 +6362,7 @@ var AddStore = function AddStore(_ref) {
       };
       setIsLoading(true);
       var _temp3 = _catch(function () {
-        return Promise.resolve(API({
+        return Promise.resolve(API$1({
           apiEndPoint: apiEndPoint,
           token: token,
           url: '/ecommerce/customer/store',
@@ -6197,7 +6370,7 @@ var AddStore = function AddStore(_ref) {
           method: 'POST',
           errorMessage: 'Error in creating the store'
         })).then(function (addedStoreData) {
-          return Promise.resolve(API({
+          return Promise.resolve(API$1({
             apiEndPoint: apiEndPoint,
             token: token,
             url: "/ecommerce/customer/store/" + addedStoreData.id + "/address",
@@ -6538,7 +6711,7 @@ var AddEditAddress = function AddEditAddress(_ref) {
       };
       setIsLoading(true);
       var _temp2 = _catch(function () {
-        return Promise.resolve(API({
+        return Promise.resolve(API$1({
           apiEndPoint: apiEndPoint,
           token: token,
           url: addressDetails ? "/ecommerce/customer/store/" + addressDetails.customerStoreId + "/address/" + addressDetails.id : "/ecommerce/customer/store/" + (storeData === null || storeData === void 0 ? void 0 : storeData.id) + "/address",
@@ -6754,7 +6927,7 @@ var StoreDetails = function StoreDetails(_ref) {
   var getStoreData = function getStoreData() {
     try {
       var _temp = _catch(function () {
-        return Promise.resolve(API({
+        return Promise.resolve(API$1({
           apiEndPoint: apiEndPoint,
           token: token,
           url: "/ecommerce/customer/store/" + (storeData === null || storeData === void 0 ? void 0 : storeData.id) + "/address"
@@ -6779,7 +6952,7 @@ var StoreDetails = function StoreDetails(_ref) {
       };
       setIsLoading(true);
       var _temp2 = _catch(function () {
-        return Promise.resolve(API({
+        return Promise.resolve(API$1({
           apiEndPoint: apiEndPoint,
           token: token,
           url: "/ecommerce/customer/store/" + storeData.id,
@@ -6974,7 +7147,7 @@ var StoreManager = function StoreManager(_ref) {
       };
       setIsLoading(true);
       var _temp = _catch(function () {
-        return Promise.resolve(API({
+        return Promise.resolve(API$1({
           apiEndPoint: apiEndPoint,
           token: token,
           url: managerId ? "ecommerce/customer/store/" + (storeData === null || storeData === void 0 ? void 0 : storeData.id) + "/manager/" + managerId : "ecommerce/customer/store/" + (storeData === null || storeData === void 0 ? void 0 : storeData.id) + "/manager",
@@ -7110,7 +7283,7 @@ var StoreTabs = function StoreTabs(_ref) {
     (function () {
       try {
         var _temp = _catch(function () {
-          return Promise.resolve(API({
+          return Promise.resolve(API$1({
             apiEndPoint: apiEndPoint,
             token: token,
             url: "/ecommerce/customer/store/" + (selectedStore === null || selectedStore === void 0 ? void 0 : selectedStore.id) + "/details",
@@ -7196,7 +7369,7 @@ var StoreList = function StoreList(_ref) {
   var getStoreDataList = function getStoreDataList() {
     try {
       var _temp = _catch(function () {
-        return Promise.resolve(API({
+        return Promise.resolve(API$1({
           apiEndPoint: apiEndPoint,
           token: token,
           url: "/ecommerce/customer/store/list",
@@ -7435,7 +7608,7 @@ var Statement = function Statement(_ref) {
     (function () {
       try {
         var _temp = _catch(function () {
-          return Promise.resolve(API({
+          return Promise.resolve(API$1({
             url: "/ecommerce/customer",
             apiEndPoint: apiEndPoint,
             token: token
@@ -7460,7 +7633,7 @@ var Statement = function Statement(_ref) {
     var params = _ref2.params;
     try {
       var _customerData$custome4, _customerData$custome5;
-      return Promise.resolve(API({
+      return Promise.resolve(API$1({
         url: "/ecommerce/customer/report/statement?customerStoreIds=" + ((queryParams === null || queryParams === void 0 ? void 0 : queryParams.customerStoreIds) || (customerData === null || customerData === void 0 ? void 0 : (_customerData$custome4 = customerData.customerStoreDtoList) === null || _customerData$custome4 === void 0 ? void 0 : (_customerData$custome5 = _customerData$custome4[0]) === null || _customerData$custome5 === void 0 ? void 0 : _customerData$custome5.id)) + "&storeIds=" + storeIdList + "&page=0&size=20",
         apiEndPoint: apiEndPoint,
         token: token,
@@ -7581,7 +7754,7 @@ var ChangePassword = function ChangePassword(_ref) {
       };
       setIsLoading(true);
       var _temp = _catch(function () {
-        return Promise.resolve(API({
+        return Promise.resolve(API$1({
           apiEndPoint: apiEndPoint,
           token: token,
           method: 'POST',
@@ -7789,7 +7962,7 @@ var AccountDetails = function AccountDetails(_ref) {
     (function () {
       try {
         var _temp = _catch(function () {
-          return Promise.resolve(API({
+          return Promise.resolve(API$1({
             apiEndPoint: apiEndPoint,
             token: token,
             url: "/store"