@salesgenterp/ui-components 0.4.286 → 0.4.288

package/dist/index.css

@@ -1,74 +0,0 @@
-
-/* /////remove arrows from number input */
-/* Chrome, Safari, Edge, Opera */
-input::-webkit-outer-spin-button,
-input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-/* Firefox */
-input[type='number'] {
-  -moz-appearance: textfield;
-}
-
-/* //////mui inputs */
-
-._1vD5N ._2Y7wC,
-._1vD5N ._3i-OI {
-  border: none !important;
-  outline: none !important;
-}
-/* ////checkbox */
-._1vD5N ._7gACP {
-  color: black !important;
-}
-
-/* //////select inputs */
-._1vD5N ._1c9BE,
-._1vD5N ._3lPVt {
-  color: grey !important;
-  font-size: 0.875em;
-}
-/* /////////coloring */
-._1vD5N ._3HGw2 ._1vD5N ._3MZVJ,
-._1vD5N ._2wB7w,
-._1vD5N ._26InF,
-._1vD5N ._33LCH,
-._1vD5N ._2PPqR {
-  /* background: #fff0ec; //orlando */
-  background: rgba(240, 249, 240, 1);
-  border-radius: 10px;
-  border: 1px solid gray;
-}
-._1vD5N ._yC7t2 {
-  /* background: #fff0ec; //orlando */
-  background: rgba(240, 249, 240, 1);
-}
-._1vD5N ._3KkHb {
-  background: rgba(2, 83, 1, 1);
-  border-color: rgba(7, 126, 6, 1);
-}
-._1vD5N ._1wN8B {
-  color: rgba(2, 83, 1, 1) !important;
-}
-._1vD5N ._o5kFN {
-  border-color: rgba(2, 83, 1, 1) !important;
-}
-._1vD5N ._jdM-E {
-  background-color: rgba(2, 83, 1, 1) !important;
-}
-._1vD5N ._39ZP8 {
-  background-color: rgba(240, 249, 240, 1) !important;
-}
-
-._1WybA._-mciM {
-  height: 28px;
-}
-/* /////stepper length */
-._1vD5N ._2DiIp {
-  min-height: 60px !important;
-}
-._1vD5N ._1r8Up {
-  padding: 0 !important;
-}

package/dist/index.js

@@ -593,13 +593,6 @@ var handleError = function handleError(_ref6) {
 };
 
 var _templateObject;
-var StaticContainer = styled__default.div(_templateObject || (_templateObject = _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;
-}, function (props) {
-  return props.theme.primaryColor;
-});
-
-var _templateObject$1;
 var MuiButton = function MuiButton(props) {
   var fontColor = props.fontColor,
     primaryColor = props.primaryColor,
@@ -617,11 +610,11 @@ var MuiButton = function MuiButton(props) {
     size: 21
   }) : children));
 };
-var ButtonContainer = styled__default(material.Button)(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteralLoose(["\n  background: ", " !important;\n"])), function (props) {
+var ButtonContainer = styled__default(material.Button)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  background: ", " !important;\n"])), function (props) {
   return props.primaryColor;
 });
 
-var _templateObject$2;
+var _templateObject$1;
 var FormTextField = function FormTextField(props) {
   var label = props.label,
     name = props.name,
@@ -661,7 +654,7 @@ var FormTextField = function FormTextField(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) {
+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) {
   return props.fontColor;
 }, function (props) {
   return props.fontColor;
@@ -669,7 +662,7 @@ var CustomTextField = styled__default(material.TextField)(_templateObject$2 || (
   return props.fontColor;
 });
 
-var _templateObject$3, _templateObject2;
+var _templateObject$2, _templateObject2;
 var ContactUsForm = function ContactUsForm(_ref) {
   var apiEndPoint = _ref.apiEndPoint,
     primaryColor = _ref.primaryColor,
@@ -787,13 +780,29 @@ var ContactUsForm = function ContactUsForm(_ref) {
     }
   }, "Submit"))));
 };
-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) {
+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) {
   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 ? 100 : _ref$height;
+  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(material.Skeleton, {
+    variant: "rectangular",
+    height: height
+  }));
+};
+
+var _templateObject$3;
+var StaticContainer = styled__default.div(_templateObject$3 || (_templateObject$3 = _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;
+}, function (props) {
+  return props.theme.primaryColor;
+});
+
 var _templateObject$4;
 var APIStaticPage = function APIStaticPage(_ref) {
   var _ref$colors = _ref.colors,
@@ -811,13 +820,17 @@ var APIStaticPage = function APIStaticPage(_ref) {
   var _useState = React.useState(false),
     contactUsForm = _useState[0],
     setContactUsForm = _useState[1];
-  var _useState2 = React.useState(),
-    staticPage = _useState2[0],
-    setStaticPage = _useState2[1];
-  var _useState3 = React.useState(''),
-    logoUrl = _useState3[0],
-    setLogoUrl = _useState3[1];
+  var _useState2 = React.useState(false),
+    loading = _useState2[0],
+    setLoading = _useState2[1];
+  var _useState3 = React.useState(),
+    staticPage = _useState3[0],
+    setStaticPage = _useState3[1];
+  var _useState4 = React.useState(''),
+    logoUrl = _useState4[0],
+    setLogoUrl = _useState4[1];
   React.useEffect(function () {
+    setLoading(true);
     if (apiEndPoint) {
       (function () {
         return _catch(function () {
@@ -860,10 +873,11 @@ var APIStaticPage = function APIStaticPage(_ref) {
         }, function () {});
       })();
     }
+    setLoading(false);
   }, [id, pageData]);
   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, staticPage && /*#__PURE__*/React__default.createElement(StaticContainer, null, /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(material.CssBaseline, null), /*#__PURE__*/React__default.createElement(Root, null, loading ? /*#__PURE__*/React__default.createElement(Skeleton, null) : staticPage && /*#__PURE__*/React__default.createElement(StaticContainer, null, /*#__PURE__*/React__default.createElement("div", {
     className: "top-bar"
   }, staticPage === null || staticPage === void 0 ? void 0 : staticPage.header), mapSrc && /*#__PURE__*/React__default.createElement("iframe", {
     width: "100%",
@@ -907,7 +921,7 @@ var APIStaticPage = function APIStaticPage(_ref) {
     logoUrl: logoUrl
   }))))))));
 };
-var Root = styled__default(material.Box)(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteralLoose(["\n  image {\n    max-width: 100%;\n  }\n"])));
+var Root = styled__default(material.Box)(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteralLoose(["\n  img {\n    max-width: 100%;\n  }\n"])));
 
 var convertCamCaseToSnake = function convertCamCaseToSnake(child) {
   var _Object$keys;
@@ -6447,10 +6461,21 @@ var HomeBanner = function HomeBanner(_ref) {
     } : _ref$colors,
     _ref$businessTypeId = _ref.businessTypeId,
     businessTypeId = _ref$businessTypeId === void 0 ? 1 : _ref$businessTypeId;
-  var businessId = businessTypeId || 1;
-  var _useState = React.useState(),
-    sliderTypes = _useState[0],
-    setSliderTypes = _useState[1];
+  var _useState = React.useState(businessTypeId || 1),
+    businessId = _useState[0],
+    setBusinessId = _useState[1];
+  var _useState2 = React.useState(),
+    sliderTypes = _useState2[0],
+    setSliderTypes = _useState2[1];
+  React.useEffect(function () {
+    try {
+      if (businessTypeId) {
+        setBusinessId(businessTypeId || 1);
+      }
+    } catch (e) {
+      Promise.reject(e);
+    }
+  }, [businessTypeId]);
   React.useEffect(function () {
     (function () {
       try {
@@ -6459,7 +6484,14 @@ var HomeBanner = function HomeBanner(_ref) {
             apiEndPoint: apiEndPoint,
             url: "/home/sliderTypes"
           })).then(function (data) {
-            setSliderTypes(data);
+            var modifyData = lodash.sortBy(lodash.filter(data, function (o) {
+              var config = lodash.isObject(JSON.parse(o === null || o === void 0 ? void 0 : o.config)) ? JSON.parse(o === null || o === void 0 ? void 0 : o.config) : {};
+              return !(config !== null && config !== void 0 && config.hideFromEcommerce);
+            }), function (o) {
+              var config = lodash.isObject(JSON.parse(o === null || o === void 0 ? void 0 : o.config)) ? JSON.parse(o === null || o === void 0 ? void 0 : o.config) : {};
+              return config === null || config === void 0 ? void 0 : config.sequenceNumber;
+            });
+            setSliderTypes(modifyData);
           });
         }, function () {});
         return _temp && _temp.then ? _temp.then(function () {}) : void 0;
@@ -6486,19 +6518,12 @@ var HomeBanner = function HomeBanner(_ref) {
       return Promise.reject(e);
     }
   };
-  var modifySliderTypes = lodash.sortBy(lodash.filter(sliderTypes, function (o) {
-    var config = lodash.isObject(JSON.parse(o === null || o === void 0 ? void 0 : o.config)) ? JSON.parse(o === null || o === void 0 ? void 0 : o.config) : {};
-    return !(config !== null && config !== void 0 && config.hideFromEcommerce);
-  }), function (o) {
-    var config = lodash.isObject(JSON.parse(o === null || o === void 0 ? void 0 : o.config)) ? JSON.parse(o === null || o === void 0 ? void 0 : o.config) : {};
-    return config === null || config === void 0 ? void 0 : config.sequenceNumber;
-  });
   return /*#__PURE__*/React__default.createElement(styled.ThemeProvider, {
     theme: colors
   }, /*#__PURE__*/React__default.createElement(Root$a, null, /*#__PURE__*/React__default.createElement(material.CssBaseline, null), /*#__PURE__*/React__default.createElement(MainContainer$3, null, /*#__PURE__*/React__default.createElement(material.Grid, {
     container: true,
     spacing: 0
-  }, modifySliderTypes === null || modifySliderTypes === void 0 ? void 0 : modifySliderTypes.map(function (sliderType) {
+  }, sliderTypes === null || sliderTypes === void 0 ? void 0 : sliderTypes.map(function (sliderType) {
     var config = lodash.isObject(JSON.parse(sliderType === null || sliderType === void 0 ? void 0 : sliderType.config)) ? JSON.parse(sliderType === null || sliderType === void 0 ? void 0 : sliderType.config) : {};
     return /*#__PURE__*/React__default.createElement(material.Grid, {
       item: true,
@@ -6514,6 +6539,7 @@ var HomeBanner = function HomeBanner(_ref) {
     }, /*#__PURE__*/React__default.createElement(AsyncDataLoadComponent, {
       skeletonHeight: 220,
       apiEndPoint: apiEndPoint,
+      triggerChange: businessId,
       asyncService: function asyncService() {
         return geSliderImages({
           sliderTypeId: sliderType === null || sliderType === void 0 ? void 0 : sliderType.id,