@zohodesk/dot 1.0.0-beta.20 → 1.0.0-beta.203

package/src/utils/ChannelIconMapping.js

@@ -1,112 +1,130 @@
 export function getChannelMappingObj() {
   return {
     EMAIL: {
-      default: 'ZD-channelMail',
-      incoming: 'ZD-channelMailIn',
-      outgoing: 'ZD-channelMailOut',
-      draft: 'ZD-channelDraft',
-      forward: 'ZD-channelForward',
-      forwardDraft: 'ZD-channelForwardDraft',
-      missed: 'ZD-channelMailMissed'
+      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-channelFacebook',
-      incoming: 'ZD-channelFacebookIn',
-      outgoing: 'ZD-channelFacebookOut',
-      draft: 'ZD-channelDraft',
-      forward: 'ZD-channelForward',
-      forwardDraft: 'ZD-channelForwardDraft',
-      missed: 'ZD-channelFacebookMissed'
+      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-channelDirectFb',
-      incoming: 'ZD-channelDirectFbIn',
-      outgoing: 'ZD-channelDirectFbOut',
-      draft: 'ZD-channelDraft',
-      forward: 'ZD-channelForward',
-      forwardDraft: 'ZD-channelForwardDraft',
-      missed: 'ZD-channelDirectFbMissed'
+      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-channelTwitter',
-      incoming: 'ZD-channelTwitterIn',
-      outgoing: 'ZD-channelTwitterOut',
-      draft: 'ZD-channelDraft',
-      forward: 'ZD-channelForward',
-      forwardDraft: 'ZD-channelForwardDraft',
-      missed: 'ZD-channelTwitterMissed'
+      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-channelForum',
-      incoming: 'ZD-channelForumIn',
-      outgoing: 'ZD-channelForumOut',
-      draft: 'ZD-channelDraft',
-      forward: 'ZD-channelForward',
-      forwardDraft: 'ZD-channelForwardDraft',
-      missed: 'ZD-channelForumMissed'
+      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-channelChat',
-      incoming: 'ZD-channelChatIn',
-      outgoing: 'ZD-channelChatOut',
-      draft: 'ZD-channelDraft',
-      forward: 'ZD-channelForward',
-      forwardDraft: 'ZD-channelForwardDraft',
-      missed: 'ZD-channelChatMissed'
+      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-channelChat',
-      incoming: 'ZD-channelChatIn',
-      outgoing: 'ZD-channelChatOut',
-      draft: 'ZD-channelDraft',
-      forward: 'ZD-channelForward',
-      forwardDraft: 'ZD-channelForwardDraft',
-      missed: 'ZD-channelChatMissed'
+      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-channelChat',
-      incoming: 'ZD-channelChatIn',
-      outgoing: 'ZD-channelChatOut',
-      draft: 'ZD-channelDraft',
-      forward: 'ZD-channelForward',
-      forwardDraft: 'ZD-channelForwardDraft',
-      missed: 'ZD-channelChatMissed'
+      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-channelPhone',
-      incoming: 'ZD-channelPhoneIn',
-      outgoing: 'ZD-channelPhoneOut',
-      draft: 'ZD-channelDraft',
-      forward: 'ZD-channelForward',
-      forwardDraft: 'ZD-channelForwardDraft',
-      missed: 'ZD-channelPhoneIn'
+      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-channelWeb',
-      incoming: 'ZD-channelWebIn',
-      out: 'ZD-channelWebOut',
-      draft: 'ZD-channelDraft',
-      forward: 'ZD-channelForward',
-      forwardDraft: 'ZD-channelForwardDraft',
-      missed: 'ZD-channelWebMissed'
+      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-channelWeb',
-      incoming: 'ZD-channelWebIn',
-      out: 'ZD-channelWebOut',
-      draft: 'ZD-channelDraft',
-      forward: 'ZD-channelForward',
-      forwardDraft: 'ZD-channelForwardDraft',
-      missed: 'ZD-channelWebMissed'
+      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-channelHappiness',
-      incoming: 'ZD-channelHappinessIn',
-      out: 'ZD-channelHappinessOut',
-      draft: 'ZD-channelDraft',
-      forward: 'ZD-channelForward',
-      forwardDraft: 'ZD-channelForwardDraft',
-      missed: 'ZD-channelHappinessMissed'
+      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/src/utils/Common.js

@@ -0,0 +1,20 @@
+export function findScrollEnd(element) {
+    let { scrollHeight, scrollTop, offsetHeight, clientHeight } = element || {};
+    let isElementScrollable = scrollHeight > clientHeight;
+    if (isElementScrollable) {
+      if (scrollHeight <= Math.ceil(scrollTop + offsetHeight)) {
+        return true;
+      }
+    } else {
+      throw 'Is scroll not present in this element';
+    }
+    return false;
+  }
+  
+  export function stopBubbling(event) {
+    event.preventDefault();
+    event.stopPropagation && event.stopPropagation();
+    event.nativeEvent &&
+      event.nativeEvent.stopImmediatePropagation &&
+      event.nativeEvent.stopImmediatePropagation();
+  }

package/src/utils/General.js

@@ -16,3 +16,43 @@ export function getFullName(firstName = '', lastName = '') {
   }
   return fullName;
 }
+
+export function shallowDiff(a = {}, b = {}) {
+  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;
+}
+export function formatCurrency(number, symbol) {
+  // format number 1000000 to 1,234,567
+  if (number && number != 0) {
+    let typeOfData = typeof (number);
+    let isDecimal = typeOfData == 'string' ? number.indexOf('.') != -1 : !Number.isInteger(number);
+    if (isDecimal) {
+      let val = number.toString().split('.');
+      let arr1 = `${val[0].replace(/\D/g, '').replace(/\B(?=(\d{3})+(?!\d))/g, ',')}`;
+      let finalVal = `${symbol}${arr1}.${val[1]}`;
+      return finalVal;
+    } else {
+      let value = `${symbol}${number.toString().replace(/\D/g, '').replace(/\B(?=(\d{3})+(?!\d))/g, ',')}`;
+      return value;
+    }
+  }
+  return number;
+}

package/src/utils/editorUtils.js

@@ -0,0 +1,189 @@
+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 = 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(...handlers) {
+  handlers.forEach(handler => {
+    if (__DEVELOPMENT__) {
+      if (!this[handler]) {
+        console.log('Handler method not defined: ', handler);
+      }
+    }
+    this[handler] = this[handler].bind(this);
+  });
+}

package/src/version2/AlertClose/AlertClose.js

@@ -0,0 +1,45 @@
+/*** Libraries ***/
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import Icon from '@zohodesk/icons/lib/Icon';
+import { Container, Box } from '@zohodesk/components/lib/Layout';
+
+import style from './AlertClose.module.css';
+
+
+export default class AlertClose extends PureComponent {
+  render() {
+    let { onClose, dataId, dataTitle, type, customClass } = this.props;
+    return (
+      <Container
+        className={`${style.close} ${type ? style[type] : ''} ${customClass ? customClass : ''}`}
+        data-title={dataTitle}
+        onClick={onClose}
+        dataId={dataId}
+        align='both'
+        isInline
+        alignBox='row'
+        isCover={false}
+      >
+        <Box>
+          <Icon name='GC-cross' isBold size='12' iconClass={style.closeIcon} />
+        </Box>
+      </Container>
+    );
+  }
+}
+
+AlertClose.propTypes = {
+  customClass: PropTypes.string,
+  dataId: PropTypes.string,
+  dataTitle: PropTypes.string,
+  onClose: PropTypes.func,
+  type: PropTypes.oneOf(['success', 'danger', 'info', 'warning', 'error', 'light'])
+};
+
+if (__DOCS__) {
+  AlertClose.docs = {
+    componentGroup: 'AlertClose',
+    folderName: 'Alert'
+  };
+}

package/src/version2/AlertClose/AlertClose.module.css

@@ -0,0 +1,43 @@
+.close {
+  width: var(--zd_size25);
+  height: var(--zd_size25);
+  border-radius: var(--zd_size4);
+  cursor: pointer;
+  color: var(--zdt_commonalert_close_icon);
+}
+
+.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/src/version2/AlertClose/docs/AlertClose__default.docs.js

@@ -0,0 +1,46 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import AlertClose from '../AlertClose';
+export default class AlertClose__default extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    let style = { margin: '10px' };
+    return (
+      <div>
+        <h2>Light</h2>
+        <div style={style}>
+          <AlertClose type='light' />
+        </div>
+        <h2>Info</h2>
+        <div style={style}>
+          <AlertClose type='info' />
+        </div>
+        <h2>Success</h2>
+        <div style={style}>
+          <AlertClose type='success' />
+        </div>
+        <h2>Danger</h2>
+        <div style={style}>
+          <AlertClose type='danger' />
+        </div>
+        <h2>Warning</h2>
+        <div style={style}>
+          <AlertClose type='warning' />
+        </div>
+        <h2>Error</h2>
+        <div style={style}>
+          <AlertClose type='error' />
+        </div>
+      </div>
+    );
+  }
+}
+if (__DOCS__) {
+  AlertClose__default.docs = {
+    componentGroup: 'AlertClose',
+    folderName: 'Alert'
+  };
+}