@microsoft/omnichannel-chat-widget 0.1.0-main.02fa07b

package/lib/cjs/common/utils.js

@@ -0,0 +1,411 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.setTabIndices = exports.setFocusOnSendBox = exports.setFocusOnElement = exports.preventFocusToMoveOutOfElement = exports.parseAdaptiveCardPayload = exports.newGuid = exports.isUndefinedOrEmpty = exports.isNullOrUndefined = exports.isNullOrEmptyString = exports.getWidgetEndChatEventName = exports.getWidgetCacheId = exports.getTimestampHourMinute = exports.getStateFromCache = exports.getLocaleDirection = exports.getIconText = exports.getDomain = exports.findParentFocusableElementsWithoutChildContainer = exports.findAllFocusableElement = exports.extractPreChatSurveyResponseValues = exports.escapeHtml = exports.createTimer = exports.changeLanguageCodeFormatForWebChat = exports.addDelayInMs = void 0;
+
+var _Constants = require("./Constants");
+
+var _DataStoreManager = require("./contextDataStore/DataStoreManager");
+
+var _KeyCodes = require("./KeyCodes");
+
+var _TelemetryConstants = require("./telemetry/TelemetryConstants");
+
+const getElementBySelector = selector => {
+  let element;
+
+  if (typeof selector === "string") {
+    element = document.querySelector(selector);
+  } else {
+    element = selector;
+  }
+
+  return element;
+}; // The purpose of this function is:
+// - to make elements not focusable, when confirmation pane or email transcript pane are showing,
+// - to set their initial tab indices back after confirmation pane or email transcript pane are closed
+// Otherwise, the user will be able to click on the screen and tab through different buttons or other elements, even though
+// these dialogs are showing
+
+
+const setTabIndices = (elements, tabIndexMap, shouldBeFocusable) => {
+  if (elements) {
+    if (shouldBeFocusable) {
+      for (let index = 0; index < elements.length; index++) {
+        if (tabIndexMap.has(elements[index].id)) {
+          elements[index].tabIndex = tabIndexMap.get(elements[index].id);
+        }
+      }
+
+      tabIndexMap.clear();
+    } else {
+      for (let index = 0; index < elements.length; index++) {
+        tabIndexMap.set(elements[index].id, elements[index].tabIndex);
+        elements[index].tabIndex = -1;
+      }
+    }
+  }
+};
+
+exports.setTabIndices = setTabIndices;
+
+const findParentFocusableElementsWithoutChildContainer = elementId => {
+  const childContainer = document.getElementById(elementId);
+
+  if (!childContainer) {
+    return null;
+  }
+
+  const parentContainer = childContainer.parentElement;
+
+  if (!parentContainer) {
+    return null;
+  }
+
+  const parentFocusableElements = findAllFocusableElement(parentContainer);
+
+  if (!parentFocusableElements) {
+    return null;
+  }
+
+  for (let index = 0; index < parentFocusableElements.length; index++) {
+    if (childContainer.contains(parentFocusableElements[index])) {
+      parentFocusableElements.splice(index, 1);
+      index--;
+    }
+  }
+
+  return parentFocusableElements;
+};
+
+exports.findParentFocusableElementsWithoutChildContainer = findParentFocusableElementsWithoutChildContainer;
+
+const findAllFocusableElement = parent => {
+  const container = getElementBySelector(parent);
+
+  if (container !== null) {
+    return Array.prototype.slice.call(container.querySelectorAll("a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), [tabindex=\"0\"]"));
+  }
+
+  return null;
+};
+
+exports.findAllFocusableElement = findAllFocusableElement;
+
+const preventFocusToMoveOutOfElement = elementId => {
+  const container = document.getElementById(elementId);
+
+  if (!container) {
+    return;
+  }
+
+  const focusableElements = findAllFocusableElement(container);
+
+  if (!focusableElements) {
+    return;
+  }
+
+  const firstFocusableElement = focusableElements[0];
+  const lastFocusableElement = focusableElements[focusableElements.length - 1];
+
+  firstFocusableElement.onkeydown = e => {
+    if (e.shiftKey && e.key === _KeyCodes.KeyCodes.TAB) {
+      e.preventDefault();
+      lastFocusableElement === null || lastFocusableElement === void 0 ? void 0 : lastFocusableElement.focus();
+    }
+  };
+
+  lastFocusableElement.onkeydown = e => {
+    if (!e.shiftKey && e.key === _KeyCodes.KeyCodes.TAB) {
+      e.preventDefault();
+      firstFocusableElement === null || firstFocusableElement === void 0 ? void 0 : firstFocusableElement.focus();
+    }
+  };
+};
+
+exports.preventFocusToMoveOutOfElement = preventFocusToMoveOutOfElement;
+
+const setFocusOnSendBox = () => {
+  const sendBoxSelector = "textarea[data-id=\"webchat-sendbox-input\"]";
+  setFocusOnElement(sendBoxSelector);
+};
+
+exports.setFocusOnSendBox = setFocusOnSendBox;
+
+const setFocusOnElement = selector => {
+  const element = getElementBySelector(selector);
+  element === null || element === void 0 ? void 0 : element.focus();
+};
+
+exports.setFocusOnElement = setFocusOnElement;
+
+const escapeHtml = inputString => {
+  const entityMap = {
+    "<": "&lt;",
+    ">": "&gt;",
+    "\"": "&quot;",
+    "'": "&#39;",
+    "/": "&#x2F;"
+  };
+  return String(inputString).replace(/[<>"'/]/g, s => {
+    return entityMap[s];
+  });
+};
+
+exports.escapeHtml = escapeHtml;
+
+const getIconText = text => {
+  if (text) {
+    const initials = text.split(/\s/).reduce((response, word) => response += word.slice(0, 1), "");
+
+    if (initials.length > 1) {
+      return initials.substring(0, 2).toUpperCase();
+    } else {
+      return text.substring(0, 2).toUpperCase();
+    }
+  }
+
+  return "";
+};
+
+exports.getIconText = getIconText;
+
+const getLocaleDirection = localeLCID => {
+  return _Constants.LocaleConstants.RTL_LOCALES.indexOf(localeLCID) === -1 ? "ltr" : "rtl";
+};
+
+exports.getLocaleDirection = getLocaleDirection;
+
+const changeLanguageCodeFormatForWebChat = languageCode => {
+  return languageCode.slice(0, -2) + languageCode.slice(-2).toUpperCase();
+};
+
+exports.changeLanguageCodeFormatForWebChat = changeLanguageCodeFormatForWebChat;
+
+const getTimestampHourMinute = timestampStr => {
+  let yearFormat;
+  let monthDayFormat;
+  const hourFormat = "numeric";
+  const minuteFormat = "2-digit";
+  const date = new Date(timestampStr);
+  const now = new Date();
+
+  if (isNaN(date.getTime())) {
+    return "";
+  }
+
+  if (date.getFullYear() !== now.getFullYear()) {
+    yearFormat = "numeric";
+    monthDayFormat = "2-digit";
+  }
+
+  if (date.getMonth() !== now.getMonth() || date.getDate() !== now.getDate()) {
+    monthDayFormat = "2-digit";
+  }
+
+  return date.toLocaleTimeString(navigator.language, {
+    year: yearFormat,
+    month: monthDayFormat,
+    day: monthDayFormat,
+    hour: hourFormat,
+    minute: minuteFormat
+  });
+};
+
+exports.getTimestampHourMinute = getTimestampHourMinute;
+
+const parseAdaptiveCardPayload = (payload, requiredFieldMissingMessage) => {
+  if (payload && payload !== "{}") {
+    try {
+      const parsedPayload = JSON.parse(payload.replace(/&#42;/g, "*"));
+      const body = parsedPayload.body;
+
+      if (body) {
+        //Parse ID field into available options and add required error messages
+        for (const fields of body) {
+          if (fields.id && fields.id.includes(":")) {
+            const parsedId = JSON.parse(fields.id);
+            fields.id = parsedId.Id;
+            fields.isRequired = parsedId.IsRequired ?? false;
+
+            if (fields.isRequired) {
+              fields.errorMessage = requiredFieldMissingMessage.replace("{0}", parsedId.Name ?? "");
+            }
+          }
+        }
+      }
+
+      return JSON.stringify(parsedPayload);
+    } catch (ex) {
+      throw new Error(`Adaptive card pase error: ${ex}`);
+    }
+  }
+
+  return payload;
+}; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+
+exports.parseAdaptiveCardPayload = parseAdaptiveCardPayload;
+
+const extractPreChatSurveyResponseValues = (preChatSurvey, values) => {
+  if (preChatSurvey && preChatSurvey !== "{}" && values) {
+    try {
+      const parsedSurvey = JSON.parse(preChatSurvey);
+      const body = parsedSurvey.body;
+      const type = {
+        "Type": _Constants.Constants.InputSubmit
+      };
+      const computedValues = [];
+
+      for (const val of values) {
+        const index = val.index;
+        const Id = body[index].id;
+        computedValues[Id] = val.value;
+      }
+
+      const finalPayload = { ...type,
+        ...computedValues
+      };
+      return finalPayload;
+    } catch (ex) {
+      throw new Error(`PreChatSurvey Response parse error: ${ex}`);
+    }
+  }
+
+  return {};
+}; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+
+exports.extractPreChatSurveyResponseValues = extractPreChatSurveyResponseValues;
+
+const isNullOrUndefined = obj => {
+  return obj === null || obj === undefined;
+};
+
+exports.isNullOrUndefined = isNullOrUndefined;
+
+const isNullOrEmptyString = s => {
+  return isNullOrUndefined(s) || s === "";
+};
+
+exports.isNullOrEmptyString = isNullOrEmptyString;
+
+const newGuid = () => {
+  //RFC 4122 canonical representation Version-4 xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx where x is any hexadecimal digit and y is one of 8, 9, A, or B
+  const guidPattern = _Constants.Constants.GuidPattern;
+  let newGuid = "";
+
+  for (let i = 0; i < guidPattern.length; i++) {
+    const randomString = Math.floor(Math.random() * Date.now());
+
+    switch (guidPattern[i]) {
+      case "x":
+        newGuid += randomString.toString(16).substring(0, 4);
+        break;
+      //get 4 digit
+
+      case "m":
+        newGuid += randomString.toString(16).substring(0, 3);
+        break;
+      //Get 3 digit
+
+      case "y":
+        newGuid += (randomString & 0x3 | 0x8).toString(16);
+        break;
+      // To get only one of 8, 9, A, or B
+
+      default:
+        newGuid += guidPattern[i];
+      //Default "-" and "4"
+    }
+  }
+
+  return newGuid;
+};
+
+exports.newGuid = newGuid;
+
+const createTimer = () => {
+  const timeStart = new Date().getTime();
+  return {
+    get milliSecondsElapsed() {
+      const ms = new Date().getTime() - timeStart;
+      return ms;
+    }
+
+  };
+}; // Returns the domain of the org
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+
+exports.createTimer = createTimer;
+
+const getDomain = hostValue => {
+  for (let i = 0; i < _Constants.AriaTelemetryConstants.lcwEUDomainNames.length; i++) {
+    if (hostValue.endsWith(_Constants.AriaTelemetryConstants.lcwEUDomainNames[i])) {
+      return _Constants.AriaTelemetryConstants.EU;
+    }
+  }
+
+  return _Constants.AriaTelemetryConstants.Public;
+};
+
+exports.getDomain = getDomain;
+
+const getWidgetCacheId = (orgId, widgetId) => {
+  return `${_Constants.Constants.ChatWidgetStateChangedPrefix}_${orgId}_${widgetId}`;
+};
+
+exports.getWidgetCacheId = getWidgetCacheId;
+
+const getWidgetEndChatEventName = (orgId, widgetId) => {
+  return `${_TelemetryConstants.BroadcastEvent.ChatEnded}_${orgId}_${widgetId}`;
+}; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+
+exports.getWidgetEndChatEventName = getWidgetEndChatEventName;
+
+const getStateFromCache = (orgId, widgetId) => {
+  // Getting updated state from cache
+  try {
+    if (_DataStoreManager.DataStoreManager.clientDataStore) {
+      var _DataStoreManager$cli;
+
+      const widgetStateEventName = getWidgetCacheId(orgId, widgetId);
+      const widgetStateFromCache = (_DataStoreManager$cli = _DataStoreManager.DataStoreManager.clientDataStore) === null || _DataStoreManager$cli === void 0 ? void 0 : _DataStoreManager$cli.getData(widgetStateEventName, "localStorage");
+      const persistedState = widgetStateFromCache ? JSON.parse(widgetStateFromCache) : undefined;
+      return persistedState;
+    } else {
+      return null;
+    }
+  } catch (error) {
+    console.log(error);
+    return null;
+  }
+}; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+
+exports.getStateFromCache = getStateFromCache;
+
+const isUndefinedOrEmpty = object => {
+  if (object) {
+    if (Object.keys(object).length === 0) {
+      return true;
+    }
+
+    return false;
+  } else {
+    return true;
+  }
+}; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+
+exports.isUndefinedOrEmpty = isUndefinedOrEmpty;
+
+const addDelayInMs = ms => {
+  return new Promise(resolve => setTimeout(resolve, ms));
+};
+
+exports.addDelayInMs = addDelayInMs;