@zohodesk/dot 1.0.0-temp-170 → 1.0.0-temp-171

package/es/v1/svg/TemplateIcon.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { TemplateIcon_defaultProps } from '../../svg/props/defaultProps';
-import { TemplateIcon_propTypes } from '../../svg/props/propTypes';
+import { TemplateIcon_defaultProps } from './props/defaultProps';
+import { TemplateIcon_propTypes } from './props/propTypes';
 import SVG from '@zohodesk/svg/lib/v1/SVG/SVG';
 export default function TemplateIcon(props) {
   let {

package/es/v1/svg/props/defaultProps.js

@@ -0,0 +1,15 @@
+export const PlusIcon_defaultProps = {
+  isRender: true,
+  isSymbol: false,
+  className: ''
+};
+export const SnippetIcon_defaultProps = {
+  isRender: true,
+  isSymbol: false,
+  className: ''
+};
+export const TemplateIcon_defaultProps = {
+  isRender: true,
+  isSymbol: false,
+  className: ''
+};

package/es/v1/svg/props/propTypes.js

@@ -0,0 +1,16 @@
+import PropTypes from 'prop-types';
+export const PlusIcon_propTypes = {
+  className: PropTypes.string,
+  isRender: PropTypes.bool,
+  isSymbol: PropTypes.bool
+};
+export const SnippetIcon_propTypes = {
+  className: PropTypes.string,
+  isRender: PropTypes.bool,
+  isSymbol: PropTypes.bool
+};
+export const TemplateIcon_propTypes = {
+  className: PropTypes.string,
+  isRender: PropTypes.bool,
+  isSymbol: PropTypes.bool
+};

package/es/v1/utils/ChannelIconMapping.js

@@ -0,0 +1,129 @@
+export function getChannelMappingObj() {
+  return {
+    EMAIL: {
+      default: 'ZD-CH-mail',
+      incoming: 'ZD-CH-mailIn',
+      outgoing: 'ZD-CH-mailOut',
+      draft: 'ZD-CH-draft',
+      forward: 'ZD-CH-emailForward',
+      forwardDraft: 'ZD-TK-forwardDraft',
+      missed: 'ZD-CH-mailMissed'
+    },
+    FACEBOOK: {
+      default: 'ZD-CH-facebook',
+      incoming: 'ZD-CH-facebookIn',
+      outgoing: 'ZD-CH-facebookOut',
+      draft: 'ZD-CH-draft',
+      forward: 'ZD-CH-emailForward',
+      forwardDraft: 'ZD-TK-forwardDraft',
+      missed: 'ZD-CH-facebookMissed'
+    },
+    FACEBOOK_DM: {
+      default: 'ZD-CH-directFacebook',
+      incoming: 'ZD-CH-directFacebookIn',
+      outgoing: 'ZD-CH-directFacebookOut',
+      draft: 'ZD-CH-draft',
+      forward: 'ZD-CH-emailForward',
+      forwardDraft: 'ZD-TK-forwardDraft',
+      missed: 'ZD-CH-directFacebookMissed'
+    },
+    TWITTER: {
+      default: 'ZD-CH-twitter',
+      incoming: 'ZD-CH-twitterIn',
+      outgoing: 'ZD-CH-twitterOut',
+      draft: 'ZD-CH-draft',
+      forward: 'ZD-CH-emailForward',
+      forwardDraft: 'ZD-TK-forwardDraft',
+      missed: 'ZD-CH-twitterMissed'
+    },
+    FORUMS: {
+      default: 'ZD-CH-forum',
+      incoming: 'ZD-CH-forumIn',
+      outgoing: 'ZD-CH-forumOut',
+      draft: 'ZD-CH-draft',
+      forward: 'ZD-CH-emailForward',
+      forwardDraft: 'ZD-TK-forwardDraft',
+      missed: 'ZD-CH-forumMissed'
+    },
+    CHAT: {
+      default: 'ZD-CH-chat',
+      incoming: 'ZD-CH-chatIn',
+      outgoing: 'ZD-CH-chatOut',
+      draft: 'ZD-CH-draft',
+      forward: 'ZD-CH-emailForward',
+      forwardDraft: 'ZD-TK-forwardDraft',
+      missed: 'ZD-CH-chatMissed'
+    },
+    OFFLINE_CHAT: {
+      default: 'ZD-CH-chat',
+      incoming: 'ZD-CH-chatIn',
+      outgoing: 'ZD-CH-chatOut',
+      draft: 'ZD-CH-draft',
+      forward: 'ZD-CH-emailForward',
+      forwardDraft: 'ZD-TK-forwardDraft',
+      missed: 'ZD-CH-chatMissed'
+    },
+    ONLINE_CHAT: {
+      default: 'ZD-CH-chat',
+      incoming: 'ZD-CH-chatIn',
+      outgoing: 'ZD-CH-chatOut',
+      draft: 'ZD-CH-draft',
+      forward: 'ZD-CH-emailForward',
+      forwardDraft: 'ZD-TK-forwardDraft',
+      missed: 'ZD-CH-chatMissed'
+    },
+    PHONE: {
+      default: 'ZD-CH-call',
+      incoming: 'ZD-CH-callIn',
+      outgoing: 'ZD-CH-callOut',
+      draft: 'ZD-CH-draft',
+      forward: 'ZD-CH-emailForward',
+      forwardDraft: 'ZD-TK-forwardDraft',
+      missed: 'ZD-CH-callMissed'
+    },
+    WEB: {
+      default: 'ZD-CH-web',
+      incoming: 'ZD-CH-webIn',
+      out: 'ZD-CH-webOut',
+      draft: 'ZD-CH-draft',
+      forward: 'ZD-CH-emailForward',
+      forwardDraft: 'ZD-TK-forwardDraft',
+      missed: 'ZD-CH-webMissed'
+    },
+    CUSTOMERPORTAL: {
+      default: 'ZD-CH-web',
+      incoming: 'ZD-CH-webIn',
+      out: 'ZD-CH-webOut',
+      draft: 'ZD-CH-draft',
+      forward: 'ZD-CH-emailForward',
+      forwardDraft: 'ZD-TK-forwardDraft',
+      missed: 'ZD-CH-webMissed'
+    },
+    FEEDBACK: {
+      default: 'ZD-CH-happiness',
+      incoming: 'ZD-CH-happinessIn',
+      out: 'ZD-CH-happinessOut',
+      draft: 'ZD-CH-draft',
+      forward: 'ZD-CH-emailForward',
+      forwardDraft: 'ZD-TK-forwardDraft',
+      missed: 'ZD-CH-happinessMissed'
+    },
+    'FEEDBACK WIDGET': {
+      default: 'ZD-CH-feedbackWidget'
+    }
+  };
+}
+export function getActivitiesIconObj(name) {
+  let activitiesIcons = {
+    'ZD-TK-task': '18',
+    'ZD-SE-conversation': '21',
+    'ZD-GN-phone': '21',
+    'ZD-TK-remoteAssist': '18',
+    'ZD-TK-event': '18',
+    'ZD-CH-callIn': '21',
+    'ZD-CH-callMissed': '21',
+    'ZD-CH-callOut': '21',
+    'ZD-CH-callOutBound': '21'
+  };
+  return activitiesIcons[name] ? activitiesIcons[name] : null;
+}

package/es/v1/utils/General.js

@@ -0,0 +1,45 @@
+export function stopBubbling(event) {
+  event.preventDefault();
+  event.stopPropagation && event.stopPropagation();
+  event.nativeEvent && event.nativeEvent.stopImmediatePropagation && event.nativeEvent.stopImmediatePropagation();
+}
+export function getFullName() {
+  let firstName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  let lastName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  let fullName = '';
+
+  if (firstName !== null && firstName !== '') {
+    fullName = firstName;
+  }
+
+  if (lastName !== null && lastName !== '') {
+    fullName = `${fullName}${lastName}`;
+  }
+
+  return fullName;
+}
+export function shallowDiff() {
+  let a = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  let b = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
+  for (let i in a) {
+    if (!(i in b)) {
+      return true;
+    }
+  }
+
+  for (let i in b) {
+    if (a[i] !== b[i]) {
+      return true;
+    }
+  }
+
+  return false;
+}
+export function formatPhoneUrl(phone) {
+  if (/^[0-9]{1,10}$/.test(phone)) {
+    return phone.length == 10 ? `(${phone.slice(0, 3)}) ${phone.slice(3, 6)}-${phone.slice(6, 10)}` : phone;
+  }
+
+  return phone;
+}

package/es/v1/utils/editorUtils.js

@@ -0,0 +1,193 @@
+const ATTACHMENT_FILE_NAME_SIZE_LIMIT = 200; // editorUtils
+
+export function editorContentValidate(editorObj) {
+  let content = editorObj && editorObj.getContent && editorObj.getContent() || '';
+
+  if (content == '' || !content.length || content == '<div><br></div>' || editorObj.mode !== 'plaintext' && !editorObj.doc.body.innerText.trim().length && !editorObj.doc.getElementsByTagName('img').length && !editorObj.doc.getElementsByTagName('iframe').length && !isValidSpace(editorObj)) {
+    return false;
+  }
+
+  return true;
+}
+
+function isValidSpace(editorObj) {
+  let uTags = editorObj.doc.body.getElementsByTagName('u');
+  let isValidContent = false;
+
+  for (let i = 0; i < uTags.length; i++) {
+    let uTag = uTags[i];
+    let contentLength = uTag.innerText.length;
+
+    if (contentLength) {
+      isValidContent = true;
+      break;
+    }
+  }
+
+  return isValidContent;
+}
+
+export function fixEncoding(str) {
+  if (/&amp;lt;|&amp;gt;/g.test(str) == true) {
+    str = str.replace(/&amp;lt;/g, '&lt;');
+    str = str.replace(/&amp;gt;/g, '&gt;');
+  }
+
+  return str;
+}
+export function encodeForHtml(str) {
+  if (/<|>|&|"|'|\\/g.test(str) == true) {
+    str = str.replace(/&/g, '&amp;');
+    str = str.replace(/</g, '&lt;');
+    str = str.replace(/>/g, '&gt;');
+    str = str.replace(/"/g, '&quot;');
+    str = str.replace(/\\/g, '&#x5c;');
+    str = str.replace(/'/g, '&#39;');
+  }
+
+  return str;
+} // attachment
+
+export function isFileNameSizeInvalid(fileName) {
+  return fileName.length > ATTACHMENT_FILE_NAME_SIZE_LIMIT;
+}
+export function isImageFormat(fileName) {
+  let extension = getExtensionFromFileName(fileName);
+  return /jpeg|jpg|png|gif|bmp|ico/i.test(extension);
+}
+export function getExtensionFromFileName(fileName) {
+  if (fileName && fileName.indexOf('.') != -1) {
+    return fileName.substring(fileName.lastIndexOf('.') + 1, fileName.length).toLowerCase();
+  }
+
+  return '';
+} // common
+
+export function triggerKeyup(elem) {
+  let keyup = new KeyboardEvent('keyup');
+  elem && elem.dispatchEvent && elem.dispatchEvent(keyup);
+} // editor
+
+export function getRichEditorContent(key) {
+  let richTextEditor = global.editor[key];
+
+  if (richTextEditor != undefined) {
+    let content = richTextEditor.getContent();
+    content = content.trim();
+
+    if (content == '<br>') {
+      return '';
+    }
+
+    if (richTextEditor.mode == 'plaintext') {
+      content = replaceNewLineCharacter(content);
+    }
+
+    return content;
+  }
+
+  return '';
+}
+
+function replaceNewLineCharacter(content) {
+  if (typeof content !== 'undefined') {
+    content = encodeForHtml(content);
+    content = content.replace(/\n/g, '<br/>');
+  }
+
+  return content;
+}
+
+export const changeContent = (id, value) => {
+  let editorObj = global.editor && global.editor[id];
+
+  if (editorObj) {
+    let content = fixEncoding(value);
+
+    if (editorObj.mode === 'plaintext') {
+      editorObj.squireInstance.setHTML(content);
+      editorObj.plainText(editorObj.squireInstance.getHTML());
+    } else {
+      editorObj.setContent(content);
+    }
+  }
+};
+export function validateEditorContentOnInsertHtml(node) {
+  if (node.nodeName === 'IFRAME') {
+    let iframeSrcRegex = /^(https?:)?\/\/((www\.youtube\.com)|(www\.youtube-nocookie\.com)|(([a-z\-]+\.)?flowplayer\.org)|(www\.useloom\.com)|(player\.vimeo\.com)|(www\.dailymotion\.com)|(w\.soundcloud\.com)|(whatfix\.com)|([a-z\-]+\.zoho\.com)|([a-z\-]+\.google\.com)|([a-z\-]+\.efficientforms\.com)|([a-z0-9\-]+\.microsoftstream\.com)).*$/;
+
+    if (!node.getAttribute('src') || !iframeSrcRegex.test(node.getAttribute('src'))) {
+      node.parentNode.removeChild(node);
+    }
+  }
+} // loadresource
+
+/* use promise and remove callback*/
+
+export function loadResource(url, type, id, callback) {
+  return new Promise(resolve => {
+    let css, script;
+
+    if (id && document.getElementById(id)) {
+      resolve();
+      return;
+    }
+
+    if (type === 'css') {
+      css = document.createElement('link');
+      css.type = 'text/css';
+      css.rel = 'stylesheet';
+      css.href = url;
+      css.id = id || '';
+
+      css.onload = function () {
+        resolve();
+      };
+
+      css.onerror = function () {
+        resolve();
+      };
+
+      document.getElementsByTagName('head')[0].appendChild(css);
+    } else if (type === 'js') {
+      script = document.createElement('script');
+      script.type = 'text/javascript';
+      script.src = url;
+      script.defer = true;
+
+      script.onload = function () {
+        resolve();
+
+        if (id) {
+          script.id = id;
+        }
+
+        if (typeof callback === 'function') {
+          callback();
+        }
+      };
+
+      script.onerror = function () {
+        resolve();
+      };
+
+      document.getElementsByTagName('head')[0].appendChild(script);
+    }
+  });
+} // bind
+
+export function bind() {
+  for (var _len = arguments.length, handlers = new Array(_len), _key = 0; _key < _len; _key++) {
+    handlers[_key] = arguments[_key];
+  }
+
+  handlers.forEach(handler => {
+    if (__DEVELOPMENT__) {
+      if (!this[handler]) {
+        console.log('Handler method not defined: ', handler);
+      }
+    }
+
+    this[handler] = this[handler].bind(this);
+  });
+}

package/es/version2/AlertClose/AlertClose.module.css

@@ -1,43 +1,43 @@
-.close {
-  width: var(--zd_size25) ;
-  height: var(--zd_size25) ;
-  color: var(--zdt_commonalert_close_icon);
-  border-radius: var(--zd_size4);
-  cursor: pointer;
-}
-
-.closeIcon {
-  display: block;
-}
-
-.light {
-  color: var(--zdt_commonalert_close_light_icon);
-}
-
-.close:hover {
-  background-color: var(--zdt_commonalert_close_hover_bg);
-}
-
-.light:hover {
-  background-color: var(--zdt_commonalert_light_hover_bg);
-}
-
-.success:hover {
-  background-color: var(--zdt_commonalert_success_hover_bg);
-}
-
-.info:hover {
-  background-color:var(--zdt_commonalert_info_hover_bg);
-}
-
-.warning:hover {
-  background-color: var(--zdt_commonalert_warning_hover_bg);
-}
-
-.danger:hover {
-  background-color: var(--zdt_commonalert_danger_hover_bg);
-}
-
-.error:hover {
-  background-color: var(--zdt_commonalert_error_hover_bg);
+.close {
+  width: var(--zd_size25) ;
+  height: var(--zd_size25) ;
+  color: var(--zdt_commonalert_close_icon);
+  border-radius: var(--zd_size4);
+  cursor: pointer;
+}
+
+.closeIcon {
+  display: block;
+}
+
+.light {
+  color: var(--zdt_commonalert_close_light_icon);
+}
+
+.close:hover {
+  background-color: var(--zdt_commonalert_close_hover_bg);
+}
+
+.light:hover {
+  background-color: var(--zdt_commonalert_light_hover_bg);
+}
+
+.success:hover {
+  background-color: var(--zdt_commonalert_success_hover_bg);
+}
+
+.info:hover {
+  background-color:var(--zdt_commonalert_info_hover_bg);
+}
+
+.warning:hover {
+  background-color: var(--zdt_commonalert_warning_hover_bg);
+}
+
+.danger:hover {
+  background-color: var(--zdt_commonalert_danger_hover_bg);
+}
+
+.error:hover {
+  background-color: var(--zdt_commonalert_error_hover_bg);
 }

package/es/version2/GlobalNotification/GlobalNotification.js

@@ -1,6 +1,6 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-import React from 'react';
+import React, { useState } from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes, UI_propTypes, new_propTypes } from './props/propTypes';
 import AutoClose from '../../actions/AutoClose';
@@ -8,40 +8,34 @@ import AlertIcons from '../alertIcons/AlertIcons';
 import AlertClose from '../AlertClose/AlertClose';
 import style from './GlobalNotification.module.css';
 import { Container, Box } from '@zohodesk/components/lib/Layout';
+import { cancelBubblingEffect } from '@zohodesk/components/es/utils/Common';
 export default class GlobalNotification extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
       hideMessage: false
     };
+    this.setTimeoutId = null;
   }
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
+  componentDidMount() {
     let {
-      showMessage,
       hideMessage,
-      type
+      hideTime,
+      id,
+      needAutoClose
     } = this.props;
 
-    if (showMessage !== nextProps.showMessage || type !== nextProps.type) {
-      if (!['danger', 'error', 'warning'].includes(nextProps.type)) {
-        setTimeout(() => {
-          hideMessage();
-        }, 3000);
-      }
+    if (needAutoClose) {
+      this.setTimoutId = setTimeout(() => {
+        hideMessage(id);
+      }, hideTime);
     }
   }
 
-  componentDidMount() {
-    let {
-      type,
-      hideMessage
-    } = this.props;
-
-    if (!['danger', 'error', 'warning'].includes(type)) {
-      setTimeout(() => {
-        hideMessage();
-      }, 3000);
+  componentWillUnmount() {
+    if (this.setTimeoutId) {
+      clearTimeout(this.setTimeoutId);
     }
   }
 
@@ -53,7 +47,10 @@ export default class GlobalNotification extends React.Component {
       onClick,
       i18nKeys = {},
       customProps,
-      dataSelectorId
+      dataSelectorId,
+      id,
+      needNotificationExpandUI,
+      notificationCount
     } = this.props;
     let {
       closeTitle = 'Close'
@@ -65,7 +62,10 @@ export default class GlobalNotification extends React.Component {
       onClick: onClick,
       closeTitle: closeTitle,
       customProps: customProps,
-      dataSelectorId: dataSelectorId
+      dataSelectorId: dataSelectorId,
+      id: id,
+      needNotificationExpandUI: needNotificationExpandUI,
+      notificationCount: notificationCount
     });
   }
 
@@ -79,12 +79,17 @@ GlobalNotification.defaultProps = defaultProps; // if (__DOCS__) {
 // }
 
 export function GlobalNotificationUI(props) {
+  const [shadowClose, setshadowClose] = useState(true);
+
   function onClose(e) {
+    setshadowClose(false);
     let {
       hideMessage,
-      onClose
+      onClose,
+      id
     } = props;
-    hideMessage && hideMessage(e);
+    cancelBubblingEffect(e);
+    hideMessage && hideMessage(id);
     onClose && onClose(e);
   }
 
@@ -94,13 +99,15 @@ export function GlobalNotificationUI(props) {
     onClick,
     closeTitle = '',
     customProps = {},
-    dataSelectorId
+    dataSelectorId,
+    needNotificationExpandUI,
+    notificationCount
   } = props;
   let {
     ExtraProps = {}
   } = customProps;
   return /*#__PURE__*/React.createElement("div", _extends({
-    className: `${style.message} ${type ? style[type] : ''}`,
+    className: `${style.message} ${!needNotificationExpandUI && notificationCount > 1 && shadowClose ? style.stackShadowOne : ''} ${!needNotificationExpandUI && notificationCount > 2 && shadowClose ? style.stackShadowTwo : ''} ${type ? style[type] : ''}`,
     "data-id": `show_${type}_message`,
     "data-test-id": `show_${type}_message`,
     tabIndex: 0,