@salesgenterp/ui-components 0.4.350 → 0.4.352

package/dist/index.js

@@ -54,6 +54,7 @@ var InputBase = _interopDefault(require('@mui/material/InputBase'));
 var reactSelect = require('react-select');
 var ReactAsyncSelect = _interopDefault(require('react-select/async'));
 var Snowfall = _interopDefault(require('react-snowfall'));
+var paramCase = require('param-case');
 var cg = require('react-icons/cg');
 var fi = require('react-icons/fi');
 
@@ -604,7 +605,69 @@ var handleError = function handleError(_ref6) {
   }
 };
 
+var getJSONItem = erLocalStorage.getJSONItem;
+var loadCachedTableState = function loadCachedTableState(_ref2) {
+  var tableId = _ref2.tableId;
+  return (getJSONItem(STORAGE_KEYS.TABLE_STATE) || {})[tableId] || {
+    filters: {}
+  };
+};
+var getcsvData = function getcsvData(_ref3) {
+  var url = _ref3.url,
+    apiEndPoint = _ref3.apiEndPoint,
+    token = _ref3.token;
+  try {
+    return Promise.resolve(_catch(function () {
+      return Promise.resolve(API$1({
+        method: 'GET',
+        url: url,
+        responseTypeData: 'blob',
+        apiEndPoint: apiEndPoint,
+        token: token
+      }));
+    }, function () {
+      message.error('Error in getting csv data.');
+    }));
+  } catch (e) {
+    return Promise.reject(e);
+  }
+};
+var jsonParse = function jsonParse(value) {
+  if (value && lodash.isString(value)) {
+    return JSON.parse(value);
+  }
+  return value;
+};
+
+var Skeleton = function Skeleton(_ref) {
+  var _ref$height = _ref.height,
+    height = _ref$height === void 0 ? 200 : _ref$height;
+  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(material.Skeleton, {
+    variant: "rectangular",
+    height: height
+  }));
+};
+
 var _templateObject;
+var Loader = function Loader(_ref) {
+  var style = _ref.style,
+    skeleton = _ref.skeleton,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? 200 : _ref$height;
+  return skeleton ? /*#__PURE__*/React__default.createElement(Skeleton, {
+    height: height
+  }) : /*#__PURE__*/React__default.createElement(LoaderContainer, {
+    style: style,
+    height: height
+  }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(material.CircularProgress, {
+    color: "inherit"
+  })));
+};
+var LoaderContainer = styled__default.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  display: flex;\n  width: 100%;\n  min-height: ", "px;\n  & > div {\n    margin: auto;\n    width: 50px;\n    height: 50px;\n  }\n"])), function (props) {
+  return props.height || 200;
+});
+
+var _templateObject$1;
 var MuiButton = function MuiButton(props) {
   var fontColor = props.fontColor,
     primaryColor = props.primaryColor,
@@ -622,7 +685,7 @@ var MuiButton = function MuiButton(props) {
     size: 21
   }) : children));
 };
-var ButtonContainer = styled__default(material.Button)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  background: ", " !important;\n"])), function (props) {
+var ButtonContainer = styled__default(material.Button)(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteralLoose(["\n  background: ", " !important;\n"])), function (props) {
   return props.primaryColor;
 });
 
@@ -763,7 +826,7 @@ var isVideo = function isVideo(filename) {
   return videoExtensions === null || videoExtensions === void 0 ? void 0 : videoExtensions.includes('.' + (extension === null || extension === void 0 ? void 0 : extension.toLowerCase()));
 };
 
-var _templateObject$1;
+var _templateObject$2;
 var FormTextField = function FormTextField(props) {
   var label = props.label,
     name = props.name,
@@ -820,7 +883,7 @@ var FormTextField = function FormTextField(props) {
     }
   });
 };
-var CustomTextField = styled__default(material.TextField)(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteralLoose(["\n  color: ", " !important;\n  svg,\n  input,\n  .MuiFormLabel-root,\n  .MuiInputBase-root {\n    color: ", " !important;\n  }\n  fieldset {\n    border-color: ", " !important;\n  }\n"])), function (props) {
+var CustomTextField = styled__default(material.TextField)(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteralLoose(["\n  color: ", " !important;\n  svg,\n  input,\n  .MuiFormLabel-root,\n  .MuiInputBase-root {\n    color: ", " !important;\n  }\n  fieldset {\n    border-color: ", " !important;\n  }\n"])), function (props) {
   return props.fontColor;
 }, function (props) {
   return props.fontColor;
@@ -828,7 +891,7 @@ var CustomTextField = styled__default(material.TextField)(_templateObject$1 || (
   return props.fontColor;
 });
 
-var _templateObject$2, _templateObject2;
+var _templateObject$3, _templateObject2;
 var ContactUsForm = function ContactUsForm(_ref) {
   var apiEndPoint = _ref.apiEndPoint,
     primaryColor = _ref.primaryColor,
@@ -946,41 +1009,13 @@ var ContactUsForm = function ContactUsForm(_ref) {
     }
   }, "Submit"))));
 };
-var TypographyContainer = styled__default(material.Typography)(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  display: flex;\n  font-size: 1.2rem !important;\n  align-items: center;\n"])), function (props) {
+var TypographyContainer = styled__default(material.Typography)(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  display: flex;\n  font-size: 1.2rem !important;\n  align-items: center;\n"])), function (props) {
   return props.fontColor;
 });
 var RootContainer = styled__default(material.Stack)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  background-color: ", " !important;\n  border-radius: 14px !important;\n  padding: 1.3rem;\n  margin-bottom: 1rem;\n  box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px 0px;\n  p {\n    margin: 0 !important;\n  }\n"])), function (props) {
   return props.secondaryColor;
 });
 
-var Skeleton = function Skeleton(_ref) {
-  var _ref$height = _ref.height,
-    height = _ref$height === void 0 ? 200 : _ref$height;
-  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(material.Skeleton, {
-    variant: "rectangular",
-    height: height
-  }));
-};
-
-var _templateObject$3;
-var Loader = function Loader(_ref) {
-  var style = _ref.style,
-    skeleton = _ref.skeleton,
-    _ref$height = _ref.height,
-    height = _ref$height === void 0 ? 200 : _ref$height;
-  return skeleton ? /*#__PURE__*/React__default.createElement(Skeleton, {
-    height: height
-  }) : /*#__PURE__*/React__default.createElement(LoaderContainer, {
-    style: style,
-    height: height
-  }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(material.CircularProgress, {
-    color: "inherit"
-  })));
-};
-var LoaderContainer = styled__default.div(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  width: 100%;\n  min-height: ", "px;\n  & > div {\n    margin: auto;\n    width: 50px;\n    height: 50px;\n  }\n"])), function (props) {
-  return props.height || 200;
-});
-
 var _templateObject$4;
 var StaticContainer = styled__default.div(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteralLoose(["\n  padding: 1rem;\n  width: 100%;\n  color: #606060;\n  .top-bar {\n    background-color: #f5f5f5;\n    padding: 1rem;\n    text-align: center;\n    font-size: 3.2rem;\n    font-weight: bold;\n    text-transform: uppercase;\n    color: ", ";\n  }\n  .route-bar {\n    text-transform: capitalize;\n    p {\n      padding: 0;\n      word-spacing: 5px;\n      display: flex;\n      align-items: center;\n      color: #606060;\n    }\n  }\n  .data-container {\n    margin: auto;\n  }\n  hr {\n    border-bottom: 2px solid #eceff8;\n    border-top: 0px;\n    margin: 1rem 0;\n  }\n  li {\n    margin-left: 1rem;\n  }\n  a {\n    color: ", ";\n  }\n  p {\n    font-size: 1.2rem;\n    margin: 1rem 0;\n    width: 100%;\n    color: #606060;\n  }\n"])), function (props) {
   return props.theme.primaryColor;
@@ -999,6 +1034,7 @@ var APIStaticPage = function APIStaticPage(_ref) {
     googleReCaptchaKey = _ref.googleReCaptchaKey,
     apiEndPoint = _ref.apiEndPoint,
     id = _ref.id,
+    alias = _ref.alias,
     extra = _ref.extra,
     pageData = _ref.pageData,
     hideRouteBar = _ref.hideRouteBar;
@@ -1024,7 +1060,7 @@ var APIStaticPage = function APIStaticPage(_ref) {
           setLoading(true);
           var _temp5 = _catch(function () {
             var _temp4 = function () {
-              if (id || pageData) {
+              if (id || pageData || alias) {
                 var _temp3 = function _temp3() {
                   if (pageData) {
                     _response2 = pageData;
@@ -1046,10 +1082,14 @@ var APIStaticPage = function APIStaticPage(_ref) {
                 };
                 var _response2;
                 var _temp2 = function () {
-                  if (id) {
+                  if (id || alias) {
                     return Promise.resolve(API$1({
                       apiEndPoint: apiEndPoint,
-                      url: "/ecommerce/staticPage/" + id
+                      url: "/ecommerce/staticPage",
+                      queryParams: {
+                        id: id,
+                        alias: alias
+                      }
                     })).then(function (_API) {
                       _response2 = _API;
                     });
@@ -1066,10 +1106,10 @@ var APIStaticPage = function APIStaticPage(_ref) {
         }
       })();
     }
-  }, [id, pageData]);
+  }, [id, pageData, alias]);
   return /*#__PURE__*/React__default.createElement(styled.ThemeProvider, {
     theme: colors
-  }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(material.CssBaseline, null), /*#__PURE__*/React__default.createElement(Root, null, loading ? /*#__PURE__*/React__default.createElement(Loader, null) : staticPage && /*#__PURE__*/React__default.createElement(StaticContainer, null, !hideRouteBar && /*#__PURE__*/React__default.createElement("h1", {
+  }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(material.CssBaseline, null), /*#__PURE__*/React__default.createElement(Root, null, loading ? /*#__PURE__*/React__default.createElement(Loader, null) : staticPage ? /*#__PURE__*/React__default.createElement(StaticContainer, null, !hideRouteBar && /*#__PURE__*/React__default.createElement("h1", {
     className: "top-bar"
   }, staticPage === null || staticPage === void 0 ? void 0 : staticPage.header), mapSrc && /*#__PURE__*/React__default.createElement("iframe", {
     width: "100%",
@@ -1096,7 +1136,9 @@ var APIStaticPage = function APIStaticPage(_ref) {
     item: true,
     sm: 12,
     md: contactUsForm ? 6 : 12
-  }, extra && (typeof extra === 'function' ? extra(staticPage) : extra), /*#__PURE__*/React__default.createElement("div", {
+  }, extra && (typeof extra === 'function' ? extra(_extends({}, staticPage, {
+    config: jsonParse(staticPage === null || staticPage === void 0 ? void 0 : staticPage.config)
+  })) : extra), /*#__PURE__*/React__default.createElement("div", {
     dangerouslySetInnerHTML: {
       __html: (staticPage === null || staticPage === void 0 ? void 0 : staticPage.body) || ''
     }
@@ -1111,7 +1153,13 @@ var APIStaticPage = function APIStaticPage(_ref) {
     apiEndPoint: apiEndPoint,
     token: token,
     logoUrl: logoUrl
-  }))))))));
+  }))))) : /*#__PURE__*/React__default.createElement("p", {
+    style: {
+      fontSize: '2rem',
+      textAlign: 'center',
+      padding: '1rem'
+    }
+  }, "Not found"))));
 };
 var Root = styled__default(material.Box)(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n  img {\n    max-width: 100%;\n  }\n"])));
 
@@ -1291,34 +1339,6 @@ var TypographyContainer$1 = styled__default(material.Typography)(_templateObject
   return props.fontColor;
 });
 
-var getJSONItem = erLocalStorage.getJSONItem;
-var loadCachedTableState = function loadCachedTableState(_ref2) {
-  var tableId = _ref2.tableId;
-  return (getJSONItem(STORAGE_KEYS.TABLE_STATE) || {})[tableId] || {
-    filters: {}
-  };
-};
-var getcsvData = function getcsvData(_ref3) {
-  var url = _ref3.url,
-    apiEndPoint = _ref3.apiEndPoint,
-    token = _ref3.token;
-  try {
-    return Promise.resolve(_catch(function () {
-      return Promise.resolve(API$1({
-        method: 'GET',
-        url: url,
-        responseTypeData: 'blob',
-        apiEndPoint: apiEndPoint,
-        token: token
-      }));
-    }, function () {
-      message.error('Error in getting csv data.');
-    }));
-  } catch (e) {
-    return Promise.reject(e);
-  }
-};
-
 var _templateObject$7, _templateObject2$2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
 var _excluded$1 = ["apiData", "columns", "listUpdate", "onDataLoad", "expandedRowRender", "onDataLoadError", "pagination", "extraFilterParams", "setExtraFilterParams", "cacheFilters", "tableId", "asyncService", "tableDataList", "filterData", "loading"];
 var APITable = React.forwardRef(function (_ref, ref) {
@@ -8928,6 +8948,78 @@ var StaticPage = function StaticPage(_ref) {
 };
 var Root$c = styled__default(material.Box)(_templateObject$G || (_templateObject$G = _taggedTemplateLiteralLoose([""])));
 
+var _templateObject$H;
+var StaticPageList = function StaticPageList(_ref) {
+  var _sortBy;
+  var apiEndPoint = _ref.apiEndPoint,
+    queryParams = _ref.queryParams,
+    itemLink = _ref.itemLink;
+  var _useState = React.useState(false),
+    loading = _useState[0],
+    setLoading = _useState[1];
+  var _useState2 = React.useState([]),
+    staticPageData = _useState2[0],
+    setStaticPageData = _useState2[1];
+  React.useEffect(function () {
+    (function () {
+      try {
+        var _temp3 = function () {
+          if (apiEndPoint) {
+            var _temp2 = function _temp2() {
+              setLoading(false);
+            };
+            setLoading(true);
+            var _temp = _catch(function () {
+              return Promise.resolve(API$1({
+                apiEndPoint: apiEndPoint,
+                url: "/ecommerce/staticPage/list?page=0&size=9999",
+                queryParams: queryParams
+              })).then(function (response) {
+                setStaticPageData(response === null || response === void 0 ? void 0 : response.content);
+              });
+            }, function () {});
+            return _temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp);
+          }
+        }();
+        return _temp3 && _temp3.then ? _temp3.then(function () {}) : void 0;
+      } catch (e) {
+        Promise.reject(e);
+      }
+    })();
+  }, []);
+  return /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      padding: '1rem'
+    }
+  }, /*#__PURE__*/React__default.createElement(DataLoader, {
+    loading: loading
+  }, /*#__PURE__*/React__default.createElement(material.Grid, {
+    container: true,
+    spacing: 2
+  }, staticPageData !== null && staticPageData !== void 0 && staticPageData.length ? (_sortBy = lodash.sortBy(staticPageData, 'sequenceNumber')) === null || _sortBy === void 0 ? void 0 : _sortBy.map(function (item, i) {
+    return /*#__PURE__*/React__default.createElement(material.Grid, {
+      xs: 12,
+      sm: 6,
+      md: 4,
+      lg: 3,
+      item: true,
+      key: i
+    }, /*#__PURE__*/React__default.createElement("a", {
+      href: itemLink && itemLink(item) || "/" + paramCase.paramCase((item === null || item === void 0 ? void 0 : item.urlAlias) || (item === null || item === void 0 ? void 0 : item.title) || (item === null || item === void 0 ? void 0 : item.header))
+    }, /*#__PURE__*/React__default.createElement(TitleContainer$2, null, /*#__PURE__*/React__default.createElement("h2", null, item === null || item === void 0 ? void 0 : item.title), /*#__PURE__*/React__default.createElement("h4", null, item === null || item === void 0 ? void 0 : item.header))));
+  }) : /*#__PURE__*/React__default.createElement(material.Grid, {
+    xs: 12,
+    item: true
+  }, /*#__PURE__*/React__default.createElement("p", {
+    style: {
+      fontSize: '2rem',
+      textAlign: 'center',
+      padding: '1rem'
+    }
+  }, "Not found")))));
+};
+var TitleContainer$2 = styled__default.div(_templateObject$H || (_templateObject$H = _taggedTemplateLiteralLoose(["\n  border: 1px solid #ededed;\n  padding: 1.2rem;\n  cursor: pointer;\n"])));
+
 var _excluded$6 = ["userName", "children", "style"];
 var colors$1 = ['#FFB900', '#D83B01', '#B50E0E', '#E81123', '#B4009E', '#5C2D91', '#0078D7', '#00B4FF', '#008272', '#107C10'];
 var getRandomColor = function getRandomColor(userName) {
@@ -8962,7 +9054,7 @@ var Avatar = function Avatar(_ref) {
   }));
 };
 
-var _templateObject$H, _templateObject2$t;
+var _templateObject$I, _templateObject2$t;
 var SwitchUser = function SwitchUser(_ref) {
   var _customerData$filter, _customerData$filter$;
   var _ref$apiEndPoint = _ref.apiEndPoint,
@@ -9050,14 +9142,14 @@ var SwitchUser = function SwitchUser(_ref) {
     }, /*#__PURE__*/React__default.createElement(ai.AiOutlineShop, null), /*#__PURE__*/React__default.createElement("span", null, (item === null || item === void 0 ? void 0 : item.dbaName) || (item === null || item === void 0 ? void 0 : item.company)))));
   }))));
 };
-var RootContainer$4 = styled__default.div(_templateObject$H || (_templateObject$H = _taggedTemplateLiteralLoose(["\n  margin: auto;\n  padding: 2.4rem;\n  max-width: 1920px;\n"])));
+var RootContainer$4 = styled__default.div(_templateObject$I || (_templateObject$I = _taggedTemplateLiteralLoose(["\n  margin: auto;\n  padding: 2.4rem;\n  max-width: 1920px;\n"])));
 var CustomerContainer = styled__default.div(_templateObject2$t || (_templateObject2$t = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  transition: all 0.5s;\n  padding: 1.1rem;\n  border-radius: 1rem;\n  box-shadow: 2px 2px 6px 0px #00000020;\n  &:hover {\n    transform: scale(1.05);\n  }\n  .name {\n    color: ", ";\n    font-size: 2.5rem;\n    font-weight: 700;\n  }\n  .infoDetails {\n    font-size: 1.1rem;\n    color: #46464680;\n    margin: 1rem 0;\n    display: flex;\n    align-items: center;\n    svg {\n      color: ", ";\n      font-size: 1.5rem;\n      margin-right: 0.5rem;\n    }\n  }\n"])), function (props) {
   return props.theme.primaryColor || '#000000d9';
 }, function (props) {
   return props.theme.primaryColor || '#000000d9';
 });
 
-var _templateObject$I, _templateObject2$u;
+var _templateObject$J, _templateObject2$u;
 var ThankYou = function ThankYou(_ref) {
   var _ref$id = _ref.id,
     id = _ref$id === void 0 ? 0 : _ref$id,
@@ -9116,7 +9208,7 @@ var ThankYou = function ThankYou(_ref) {
     onClick: onContinue
   }, /*#__PURE__*/React__default.createElement("p", null, "Continue Shopping"))))))));
 };
-var Root$d = styled__default(material.Box)(_templateObject$I || (_templateObject$I = _taggedTemplateLiteralLoose([""])));
+var Root$d = styled__default(material.Box)(_templateObject$J || (_templateObject$J = _taggedTemplateLiteralLoose([""])));
 var StyledButton = styled__default.button(_templateObject2$u || (_templateObject2$u = _taggedTemplateLiteralLoose(["\n  outline: none;\n  border: 1px solid;\n  border-color: ", ";\n  background: none;\n  border-radius: 14px;\n  padding: 10px 20px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  transition: background 0.5s ease;\n  width: 200px;\n  color: ", ";\n  text-transform: uppercase;\n  &:hover {\n    cursor: pointer;\n    background: ", ";\n    color: #fff;\n  }\n"])), function (props) {
   return props.theme.primaryColor;
 }, function (props) {
@@ -9125,8 +9217,8 @@ var StyledButton = styled__default.button(_templateObject2$u || (_templateObject
   return props.theme.primaryColor;
 });
 
-var _templateObject$J, _templateObject2$v, _templateObject3$m, _templateObject4$h, _templateObject5$e, _templateObject6$c, _templateObject7$8, _templateObject8$6;
-var CheckoutRootContainer = styled__default.div(_templateObject$J || (_templateObject$J = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  padding: 4rem;\n  background-color: ", ";\n  font-size: 16px;\n\n  div,\n  button,\n  span {\n    font-size: 16px;\n  }\n  @media only screen and (max-width: 1600px) {\n    padding: 3em 0.5em;\n  }\n  @media screen and (max-width: 900px) {\n    div,\n    button,\n    span {\n      font-size: 12px;\n    }\n    padding: 2rem 0.5rem;\n  }\n"])), function (props) {
+var _templateObject$K, _templateObject2$v, _templateObject3$m, _templateObject4$h, _templateObject5$e, _templateObject6$c, _templateObject7$8, _templateObject8$6;
+var CheckoutRootContainer = styled__default.div(_templateObject$K || (_templateObject$K = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  padding: 4rem;\n  background-color: ", ";\n  font-size: 16px;\n\n  div,\n  button,\n  span {\n    font-size: 16px;\n  }\n  @media only screen and (max-width: 1600px) {\n    padding: 3em 0.5em;\n  }\n  @media screen and (max-width: 900px) {\n    div,\n    button,\n    span {\n      font-size: 12px;\n    }\n    padding: 2rem 0.5rem;\n  }\n"])), function (props) {
   return props.bg;
 });
 var CheckoutPageContainer = styled__default.div(_templateObject2$v || (_templateObject2$v = _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  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: 1200px) {\n    flex-direction: column;\n    align-items: center;\n    max-height: max-content;\n  }\n  @media only screen and (max-width: 768px) {\n    padding: 1em 0.5em;\n  }\n  .icon {\n    font-size: 12px;\n  }\n  ////////////checkout and cart fonts\n  /////////////////\n  /* /////remove arrows from number input */\n  /* Chrome, Safari, Edge, Opera */\n  input::-webkit-outer-spin-button,\n  input::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n\n  /* Firefox */\n  input[type='number'] {\n    -moz-appearance: textfield;\n  }\n\n  /* //////mui inputs */\n\n  .Mui-checked {\n    color: ", ";\n  }\n\n  .MuiOutlinedInput-notchedOutline {\n    border: none;\n    outline: none;\n  }\n\n  .MuiInputBase-root .MuiOutlinedInput-root,\n  .MuiInputBase-colorPrimary,\n  .MuiInputBase-fullWidth,\n  .MuiInputBase-formControl {\n    border-radius: 10px;\n  }\n  // /* /////stepper length */\n  .MuiStepConnector-line,\n  .MuiStepConnector-lineVertical {\n    min-height: 60px !important;\n  }\n\n  @media only screen and (max-width: 600px) {\n    .MuiStepConnector-line,\n    .MuiStepConnector-lineVertical {\n      min-height: 40px !important;\n    }\n  }\n"])), function (props) {
@@ -9149,8 +9241,8 @@ var CheckoutHeading = styled__default.div(_templateObject6$c || (_templateObject
 var CheckoutHeader = styled__default(Row)(_templateObject7$8 || (_templateObject7$8 = _taggedTemplateLiteralLoose(["\n  overflow: auto;\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    }\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: 1200px) {\n    margin-right: 2em;\n  }\n  @media only screen and (max-width: 768px) {\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(_templateObject8$6 || (_templateObject8$6 = _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$K, _templateObject2$w, _templateObject3$n;
-var CheckoutSummaryContainer = styled__default.div(_templateObject$K || (_templateObject$K = _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: 1200px) {\n    margin-top: 0;\n  }\n"])), function (props) {
+var _templateObject$L, _templateObject2$w, _templateObject3$n;
+var CheckoutSummaryContainer = styled__default.div(_templateObject$L || (_templateObject$L = _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: 1200px) {\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)';
@@ -9221,8 +9313,8 @@ var CheckoutSummary = function CheckoutSummary(_ref) {
   }, renderMoney(orderTotal === null || orderTotal === void 0 ? void 0 : orderTotal.adjustmentValue))));
 };
 
-var _templateObject$L, _templateObject2$x, _templateObject3$o, _templateObject4$i, _templateObject5$f, _templateObject6$d, _templateObject7$9, _templateObject8$7, _templateObject9$5, _templateObject10$2, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16$1, _templateObject17$1, _templateObject18$1;
-var StepContainer = styled__default.div(_templateObject$L || (_templateObject$L = _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: 1200px) {\n    width: 80vw;\n    min-width: 0;\n  }\n  @media screen and (max-width: 768px) {\n    width: 96%;\n    margin-left: 1em;\n    padding: 0.8em;\n  }\n  @media screen and (max-width: 600px) {\n    width: 94%;\n    margin-left: 1.2em;\n  }\n"])));
+var _templateObject$M, _templateObject2$x, _templateObject3$o, _templateObject4$i, _templateObject5$f, _templateObject6$d, _templateObject7$9, _templateObject8$7, _templateObject9$5, _templateObject10$2, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16$1, _templateObject17$1, _templateObject18$1;
+var StepContainer = styled__default.div(_templateObject$M || (_templateObject$M = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  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: 1200px) {\n    width: 80vw;\n    min-width: 0;\n  }\n  @media screen and (max-width: 768px) {\n    width: 96%;\n    margin-left: 1em;\n    padding: 0.8em;\n  }\n  @media screen and (max-width: 600px) {\n    width: 94%;\n    margin-left: 1.2em;\n  }\n"])));
 var StepsContent = styled__default.div(_templateObject2$x || (_templateObject2$x = _taggedTemplateLiteralLoose(["\n  padding-left: 1.565em;\n  min-height: max-content;\n  .MuiOutlinedInput-root {\n    background: ", ";\n  }\n\n  p {\n    font-size: 0.75em;\n  }\n  .bold {\n    text-transform: uppercase;\n    word-spacing: 5px;\n    margin-top: 0.95em;\n    span {\n      font-weight: 600;\n      cursor: pointer;\n      font-size: 0.94rem;\n    }\n    .red {\n      color: ", ";\n    }\n  }\n  @media screen and (max-width: 768px) {\n    padding: 0;\n    width: 100%;\n  }\n"])), function (props) {
   return 'transparent' + '!important';
 }, function (props) {
@@ -9806,7 +9898,7 @@ var Step1 = function Step1(_ref) {
   })));
 };
 
-var _templateObject$M;
+var _templateObject$N;
 var Step2 = function Step2(_ref) {
   var _filter, _customer$customerDto, _addressList$, _addressList2, _styles$button2, _JSON$parse2, _styles$button3;
   var apiEndPoint = _ref.apiEndPoint,
@@ -10088,7 +10180,7 @@ var Step2 = function Step2(_ref) {
     color: styles === null || styles === void 0 ? void 0 : (_styles$button3 = styles.button) === null || _styles$button3 === void 0 ? void 0 : _styles$button3.bg
   })));
 };
-var ImageContainer$1 = styled__default(material.CardMedia)(_templateObject$M || (_templateObject$M = _taggedTemplateLiteralLoose(["\n  max-width: 100%;\n  max-height: 3rem,\n  border-radius: 14px;\n  img {\n    max-width: 100%;\n  }\n"])));
+var ImageContainer$1 = styled__default(material.CardMedia)(_templateObject$N || (_templateObject$N = _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 _React$createElement, _React$createElement2;
@@ -10666,7 +10758,7 @@ var Step3 = function Step3(_ref) {
   })));
 };
 
-var _templateObject$N, _templateObject2$y;
+var _templateObject$O, _templateObject2$y;
 var ConsentForm = function ConsentForm(_ref) {
   var apiEndPoint = _ref.apiEndPoint,
     token = _ref.token,
@@ -10832,7 +10924,7 @@ var InfoComponent = function InfoComponent(_ref2) {
     });
   }))));
 };
-var InfoContainer$1 = styled__default.div(_templateObject$N || (_templateObject$N = _taggedTemplateLiteralLoose(["\n  h2 {\n    border-bottom: 1px solid #00000040;\n    margin-bottom: 0.8rem;\n  }\n  p {\n    font-size: 1.2rem;\n  }\n"])));
+var InfoContainer$1 = styled__default.div(_templateObject$O || (_templateObject$O = _taggedTemplateLiteralLoose(["\n  h2 {\n    border-bottom: 1px solid #00000040;\n    margin-bottom: 0.8rem;\n  }\n  p {\n    font-size: 1.2rem;\n  }\n"])));
 var InfoItem = function InfoItem(_ref3) {
   var name = _ref3.name,
     value = _ref3.value;
@@ -12018,6 +12110,7 @@ exports.QuickOrder = QuickOrder;
 exports.RenderTawk = RenderTawk;
 exports.Snowfall = SnowfallComponent;
 exports.StaticPage = StaticPage;
+exports.StaticPageList = StaticPageList;
 exports.SwitchUser = SwitchUser;
 exports.ThankYou = ThankYou;
 exports.Variant = Variant;