@salesgenterp/ui-components 0.4.214 → 0.4.216

package/dist/index.js

@@ -43,6 +43,7 @@ var hi2 = require('react-icons/hi2');
 var cg = require('react-icons/cg');
 var Cards = _interopDefault(require('react-credit-cards'));
 var fi = require('react-icons/fi');
+var ReCAPTCHA = _interopDefault(require('react-google-recaptcha'));
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -8200,44 +8201,206 @@ var CheckoutPageComponent = function CheckoutPageComponent(_ref) {
   }));
 };
 
-var _templateObject$w;
-var StaticContainer = styled__default.div(_templateObject$w || (_templateObject$w = _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    margin: 1rem 0;\n    width: 100%;\n    color: #606060;\n  }\n"])), function (props) {
+var RenderTawk = function RenderTawk(_ref) {
+  var propertyId = _ref.propertyId,
+    tawkId = _ref.tawkId;
+  React.useEffect(function () {
+    if (propertyId && tawkId) {
+      var TAWK_SCRIPT = "https://embed.tawk.to/" + propertyId + "/" + tawkId;
+      var script = document.createElement('script');
+      script.setAttribute('src', TAWK_SCRIPT);
+      script.setAttribute('async', 'true');
+      script.setAttribute('charset', 'UTF-8');
+      script.setAttribute('crossorigin', '*');
+      document.body.appendChild(script);
+    }
+  }, []);
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null);
+};
+
+var _templateObject$w, _templateObject2$m;
+var ContactUsForm = function ContactUsForm(_ref) {
+  var primaryColor = _ref.primaryColor,
+    secondaryColor = _ref.secondaryColor,
+    fontColor = _ref.fontColor,
+    googleReCaptchaKey = _ref.googleReCaptchaKey,
+    _ref$logoUrl = _ref.logoUrl,
+    logoUrl = _ref$logoUrl === void 0 ? '' : _ref$logoUrl;
+  var _useState = React.useState(false),
+    isLoading = _useState[0],
+    setIsLoading = _useState[1];
+  var _React$useState = React__default.useState(false),
+    isCaptchaVerified = _React$useState[0],
+    setIsCaptchaVerified = _React$useState[1];
+  var _useState2 = React.useState([]);
+  var _useForm = reactHookForm.useForm({}),
+    handleSubmit = _useForm.handleSubmit,
+    control = _useForm.control,
+    reset = _useForm.reset;
+  var update = function update(formData) {
+    try {
+      var _temp2 = function _temp2() {
+        setIsLoading(false);
+      };
+      if (!isCaptchaVerified) return Promise.resolve(alert('Please Mark the captcha to continue'));
+      setIsLoading(true);
+      var _temp = _catch(function () {
+        return Promise.resolve(API$1({
+          method: 'POST',
+          url: "/services/email/customer/contact-us",
+          body: _extends({}, formData, logoUrl),
+          errorMessage: 'Error in contact us form.',
+          successMessage: 'Your message is sent successfully. We will contact you soon.'
+        })).then(function () {
+          reset();
+        });
+      }, function () {});
+      return Promise.resolve(_temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp));
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(RootContainer$4, {
+    secondaryColor: secondaryColor
+  }, /*#__PURE__*/React__default.createElement(TypographyContainer$8, {
+    fontColor: fontColor
+  }, "Get In Touch"), /*#__PURE__*/React__default.createElement("form", null, /*#__PURE__*/React__default.createElement(material.Grid, {
+    container: true,
+    columnSpacing: 2
+  }, /*#__PURE__*/React__default.createElement(material.Grid, {
+    item: true,
+    xs: 12,
+    md: 6
+  }, /*#__PURE__*/React__default.createElement(FormTextField, {
+    label: "Name",
+    name: "name",
+    required: true,
+    control: control,
+    fontColor: fontColor
+  })), /*#__PURE__*/React__default.createElement(material.Grid, {
+    item: true,
+    xs: 12,
+    md: 6
+  }, /*#__PURE__*/React__default.createElement(FormTextField, {
+    label: "Email",
+    name: "email",
+    type: "email",
+    required: true,
+    control: control,
+    fontColor: fontColor
+  })), /*#__PURE__*/React__default.createElement(material.Grid, {
+    item: true,
+    xs: 12
+  }, /*#__PURE__*/React__default.createElement(FormTextField, {
+    label: "Phone",
+    name: "phone",
+    type: "number",
+    control: control,
+    fontColor: fontColor
+  })), /*#__PURE__*/React__default.createElement(material.Grid, {
+    item: true,
+    xs: 12
+  }, /*#__PURE__*/React__default.createElement(FormTextField, {
+    label: "Message",
+    name: "message",
+    multiline: true,
+    rows: 4,
+    control: control,
+    fontColor: fontColor
+  })), /*#__PURE__*/React__default.createElement(material.Grid, {
+    item: true,
+    xs: 12
+  }, /*#__PURE__*/React__default.createElement(ReCAPTCHA, {
+    sitekey: googleReCaptchaKey,
+    onChange: function onChange() {
+      return setIsCaptchaVerified(true);
+    }
+  }))), /*#__PURE__*/React__default.createElement(MuiButton, {
+    variant: "contained",
+    loading: isLoading,
+    onClick: handleSubmit(update),
+    primaryColor: primaryColor,
+    style: {
+      marginTop: 12
+    }
+  }, "Submit"))));
+};
+var TypographyContainer$8 = styled__default(material.Typography)(_templateObject$w || (_templateObject$w = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  display: flex;\n  font-size: 1.2rem !important;\n  align-items: center;\n"])), function (props) {
+  return props.fontColor;
+});
+var RootContainer$4 = styled__default(material.Stack)(_templateObject2$m || (_templateObject2$m = _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 _templateObject$x;
+var StaticContainer = styled__default.div(_templateObject$x || (_templateObject$x = _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    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$x;
+var _templateObject$y;
 var StaticPage = function StaticPage(_ref) {
+  var _data$content;
   var _ref$colors = _ref.colors,
     colors = _ref$colors === void 0 ? {
       primaryColor: '#D2122E'
     } : _ref$colors,
     data = _ref.data,
-    maxWidth = _ref.maxWidth;
+    maxWidth = _ref.maxWidth,
+    mapSrc = _ref.mapSrc,
+    contactUsForm = _ref.contactUsForm,
+    googleReCaptchaKey = _ref.googleReCaptchaKey,
+    apiEndPoint = _ref.apiEndPoint,
+    token = _ref.token,
+    logoUrl = _ref.logoUrl;
   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$5, null, /*#__PURE__*/React__default.createElement(StaticContainer, null, /*#__PURE__*/React__default.createElement("div", {
     className: "top-bar"
-  }, data.mainTitle), /*#__PURE__*/React__default.createElement("div", {
+  }, data.mainTitle), mapSrc && /*#__PURE__*/React__default.createElement("iframe", {
+    width: "100%",
+    height: "600",
+    frameBorder: "0",
+    src: mapSrc
+  }), /*#__PURE__*/React__default.createElement("div", {
     className: "data-container",
     style: {
       maxWidth: maxWidth || 1470
     }
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "route-bar"
-  }, /*#__PURE__*/React__default.createElement("p", null, /*#__PURE__*/React__default.createElement(ai.AiOutlineHome, null), "\xA0Home\xA0", /*#__PURE__*/React__default.createElement(ai.AiOutlineRight, null), "\xA0", data.mainTitle)), data.content.map(function (text, i) {
+  }, /*#__PURE__*/React__default.createElement("p", null, /*#__PURE__*/React__default.createElement(ai.AiOutlineHome, null), "\xA0Home\xA0", /*#__PURE__*/React__default.createElement(ai.AiOutlineRight, null), "\xA0", data.mainTitle)), /*#__PURE__*/React__default.createElement(material.Grid, {
+    container: true,
+    spacing: 4,
+    justifyContent: "center"
+  }, /*#__PURE__*/React__default.createElement(material.Grid, {
+    item: true,
+    sm: 12,
+    md: contactUsForm ? 6 : 12
+  }, data === null || data === void 0 ? void 0 : (_data$content = data.content) === null || _data$content === void 0 ? void 0 : _data$content.map(function (text, i) {
     return /*#__PURE__*/React__default.createElement("div", {
       key: i,
       style: {
         textAlign: text === null || text === void 0 ? void 0 : text.align
       }
     }, /*#__PURE__*/React__default.createElement("hr", null), text.h2 && /*#__PURE__*/React__default.createElement("h2", null, text.h2), text.pb && /*#__PURE__*/React__default.createElement("p", null, /*#__PURE__*/React__default.createElement("strong", null, text.pb)), text.p && /*#__PURE__*/React__default.createElement("p", null, text.p));
-  }))))));
+  })), contactUsForm && /*#__PURE__*/React__default.createElement(material.Grid, {
+    item: true,
+    sm: 12,
+    md: 6
+  }, /*#__PURE__*/React__default.createElement(ContactUsForm, {
+    primaryColor: colors === null || colors === void 0 ? void 0 : colors.primaryColor,
+    fontColor: "#606060",
+    googleReCaptchaKey: googleReCaptchaKey,
+    apiEndPoint: apiEndPoint,
+    token: token,
+    logoUrl: logoUrl
+  }))))))));
 };
-var Root$5 = styled__default(material.Box)(_templateObject$x || (_templateObject$x = _taggedTemplateLiteralLoose([""])));
+var Root$5 = styled__default(material.Box)(_templateObject$y || (_templateObject$y = _taggedTemplateLiteralLoose([""])));
 
-var _templateObject$y, _templateObject2$m;
+var _templateObject$z, _templateObject2$n;
 var ThankYou = function ThankYou(_ref) {
   var _ref$id = _ref.id,
     id = _ref$id === void 0 ? 0 : _ref$id,
@@ -8296,8 +8459,8 @@ var ThankYou = function ThankYou(_ref) {
     onClick: onContinue
   }, /*#__PURE__*/React__default.createElement("p", null, "Continue Shopping"))))))));
 };
-var Root$6 = styled__default(material.Box)(_templateObject$y || (_templateObject$y = _taggedTemplateLiteralLoose([""])));
-var StyledButton = styled__default.button(_templateObject2$m || (_templateObject2$m = _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) {
+var Root$6 = styled__default(material.Box)(_templateObject$z || (_templateObject$z = _taggedTemplateLiteralLoose([""])));
+var StyledButton = styled__default.button(_templateObject2$n || (_templateObject2$n = _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) {
   return props.theme.primaryColor;
@@ -8398,6 +8561,7 @@ exports.Breakpoint = Breakpoint;
 exports.CartDrawer = CartDrawer;
 exports.CartPageComponent = CartPageComponent;
 exports.CheckoutPageComponent = CheckoutPageComponent;
+exports.RenderTawk = RenderTawk;
 exports.StaticPage = StaticPage;
 exports.ThankYou = ThankYou;
 exports.Variant = Variant;