@royaloperahouse/chord 0.7.32 → 0.7.33

package/CHANGELOG.md

@@ -1,5 +1,8 @@
 # CHANGELOG
 
+## [0.7.33]
+- Livechat: add Talkdesk Livechat injection component
+
 ## [0.7.32]
 - Carousels: extend character limit for description
 

package/dist/chord.cjs.development.js

@@ -4679,6 +4679,52 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
   }, message)));
 };
 
+var SCRIPT_SRC = 'https://talkdeskchatsdk.talkdeskapp.com/talkdeskchatsdk.js?t=';
+var THEME_COLOR = core.colors.core;
+var DATA_BIND = '5ea4b1ad-1a17-11ec-af32-06f09e0065e0';
+var DATA_ORG = '';
+var DIV_ID = 'tdWebchat';
+var THEME_ICON = 'https://static.roh.org.uk/images/logo-crest.png';
+var SCRIPT_CONTENT = "var webchat;\n((window, document, node, props, configs) => {\n  if (window.TalkdeskChatSDK) {\n    console.error(\"TalkdeskChatSDK already included\");\n    return;\n  }\n  var divContainer = document.createElement(\"div\");\n  divContainer.id = node;\n  document.body.appendChild(divContainer);\n  var currentDate = new Date().getTime();\n  var src = \"" + SCRIPT_SRC + "\" + currentDate;\n  var script = document.createElement(\"script\");\n  var firstScriptTag = document.getElementsByTagName(\"script\")[0];\n  script.type = \"text/javascript\";\n  script.charset = \"UTF-8\";\n  script.id = \"tdwebchatscript\";\n  script.src = src;\n  script.async = true;\n  firstScriptTag.parentNode.insertBefore(script, firstScriptTag);\n  script.onload = () => {\n    webchat = TalkdeskChatSDK(node, props);\n    webchat.init(configs);\n  };\n})(\n  window,\n  document,\n  \"" + DIV_ID + "\",\n  { flowId: \"cd19d348b5fb4a0ab0d3277686f28d1e\", accountId: \"\", region: \"td-us-1\" },\n  { enableEmoji: true, enableUserInput: true, styles :{\n    \"chatThemeColor\": \"" + THEME_COLOR + "\",\n    \"chatTitleIcon\": \"" + THEME_ICON + "\"\n  }}\n);";
+
+var loadLiveChatScript = function loadLiveChatScript(callback) {
+  var existingScript = document.getElementById(DIV_ID);
+
+  if (!existingScript) {
+    var liveChatDiv = document.createElement('div');
+    liveChatDiv.id = DIV_ID;
+    liveChatDiv.setAttribute('data-bind', DATA_BIND);
+    liveChatDiv.setAttribute('data-org', DATA_ORG);
+    var script = document.createElement('script');
+    var scriptBody = document.createTextNode(SCRIPT_CONTENT);
+    script.appendChild(scriptBody);
+    document.body.appendChild(liveChatDiv);
+    document.body.appendChild(script);
+
+    script.onload = function () {
+      if (callback) callback();
+    };
+  }
+
+  if (existingScript && callback) callback();
+};
+
+var LiveChat = function LiveChat() {
+  // eslint-disable-next-line
+  var _React$useState = React.useState(false),
+      loaded = _React$useState[0],
+      setLoaded = _React$useState[1];
+
+  React.useEffect(function () {
+    loadLiveChatScript(function () {
+      setLoaded(true);
+    });
+  });
+  return /*#__PURE__*/React.createElement("span", {
+    "data-loaded": loaded
+  });
+};
+
 var _templateObject$B, _templateObject2$l, _templateObject3$f, _templateObject4$b, _templateObject5$7;
 var AccordionContainer = /*#__PURE__*/styled__default.div(_templateObject$B || (_templateObject$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n"])));
 var LineContainer = /*#__PURE__*/styled__default.div(_templateObject2$l || (_templateObject2$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 2px;\n  background-color: var(--base-color-lightgrey);\n  width: 100%;\n"])));
@@ -6536,6 +6582,7 @@ exports.HighlightsCarouselStream = HighlightsStream;
 exports.Icon = Icon;
 exports.ImageAspectRatioWrapper = ImageAspectRatioWrapper;
 exports.ImageWithCaption = ImageWithCaption;
+exports.LiveChat = LiveChat;
 exports.Navigation = Navigation;
 exports.Overline = Overline;
 exports.PageHeadingCinema = PageHeadingCinema;