@royaloperahouse/chord 0.7.30 → 0.7.33

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # CHANGELOG
 
+## [0.7.33]
+- Livechat: add Talkdesk Livechat injection component
+
+## [0.7.32]
+- Carousels: extend character limit for description
+
+## [0.7.31]
+- Card: add image alt text as a prop
+
 ## [0.7.30]
 - Navigation: add possibility to pass basket link as prop
 

package/dist/chord.cjs.development.js

@@ -4411,6 +4411,48 @@ var RotatorButtonsWrapper = /*#__PURE__*/styled__default.div(_templateObject9$1
 var RotatorButtonsWrapperMobile = /*#__PURE__*/styled__default.div(_templateObject10$1 || (_templateObject10$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n\n  @media ", " {\n    & {\n      display: flex;\n      grid-area: 1 / 12 / 2 / 14;\n      align-self: center;\n      justify-content: flex-end;\n    }\n  }\n\n  @media ", " {\n    & {\n      display: flex;\n      grid-area: 1 / 11 / 2 / 14;\n      align-self: center;\n      justify-content: flex-end;\n    }\n  }\n"])), devices.tablet, devices.mobile);
 var HtmlBodyText = /*#__PURE__*/styled__default.p(_templateObject11$1 || (_templateObject11$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 0;\n  margin: 0;\n"])));
 
+var TEXT_STYLE_HTML_TAGS_REGEXP = '<em>|</em>|<b>|</b>';
+
+var stripAllHtmlTags = function stripAllHtmlTags(htmlString) {
+  return htmlString.replace(/<[^>]*>/g, '');
+};
+
+var insertString = function insertString(mainString, str, position) {
+  return "" + mainString.substring(0, position) + str + mainString.substring(position);
+};
+
+var insertHtmlTags = function insertHtmlTags(strWithTags, strWithoutTags, resultLength) {
+  var htmlTagPositions = Array.from(strWithTags.matchAll(new RegExp(TEXT_STYLE_HTML_TAGS_REGEXP, 'g')));
+  var tagsLength = 0;
+  var resultString = strWithoutTags;
+  htmlTagPositions.forEach(function (tag) {
+    resultString = insertString(resultString, tag[0], tag.index);
+    if (tag.index - tagsLength <= resultLength) tagsLength += tag[0].length;
+  });
+  return {
+    stringWithInsertedTags: resultString,
+    tagsLength: tagsLength
+  };
+};
+
+var truncateHtmlString = function truncateHtmlString(str, resultLength, addDots) {
+  if (addDots === void 0) {
+    addDots = false;
+  }
+
+  var strWithoutTags = stripAllHtmlTags(str);
+  if (strWithoutTags.length <= resultLength) return str;
+
+  var _insertHtmlTags = insertHtmlTags(str, strWithoutTags, resultLength),
+      stringWithInsertedTags = _insertHtmlTags.stringWithInsertedTags,
+      tagsLength = _insertHtmlTags.tagsLength;
+
+  var truncatedString = stringWithInsertedTags.substring(0, resultLength + tagsLength);
+  var isSpaceNext = strWithoutTags[resultLength] === ' ';
+  if (!isSpaceNext) truncatedString = truncatedString.substring(0, truncatedString.lastIndexOf(' '));
+  return addDots ? truncatedString + "..." : truncatedString;
+};
+
 var _excluded$8 = ["text"];
 
 var HighlightsCarousel = function HighlightsCarousel(_ref) {
@@ -4442,7 +4484,7 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
   var linkText = link.text,
       restLink = _objectWithoutPropertiesLoose(link, _excluded$8);
 
-  var description = infoText == null ? void 0 : infoText.substring(0, 130);
+  var description = infoText ? truncateHtmlString(infoText, 185, true) : '';
   React.useEffect(function () {
     var slideChangeHandler = function slideChangeHandler(s) {
       return setCurrentSlide(s.realIndex);
@@ -4637,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"])));
@@ -4859,6 +4947,8 @@ var Card = function Card(_ref) {
       _ref$tags = _ref.tags,
       tags = _ref$tags === void 0 ? [] : _ref$tags,
       image = _ref.image,
+      _ref$imageAltText = _ref.imageAltText,
+      imageAltText = _ref$imageAltText === void 0 ? '' : _ref$imageAltText,
       _ref$withContinueWatc = _ref.withContinueWatching,
       withContinueWatching = _ref$withContinueWatc === void 0 ? false : _ref$withContinueWatc,
       _ref$size = _ref.size,
@@ -4876,6 +4966,7 @@ var Card = function Card(_ref) {
       hovered = _useState[0],
       setHovered = _useState[1];
 
+  var truncatedText = truncateHtmlString(text, 185, true);
   var primaryButton = links == null ? void 0 : links[0];
 
   var _ref2 = primaryButton || {},
@@ -4923,7 +5014,7 @@ var Card = function Card(_ref) {
     aspectRatio: exports.AspectRatio['4:3']
   }, /*#__PURE__*/React__default.createElement("img", {
     src: image,
-    alt: "test"
+    alt: imageAltText
   })), withContinueWatching && /*#__PURE__*/React__default.createElement(ProgressContainer, null, /*#__PURE__*/React__default.createElement(Progress, {
     progress: progress
   }))), /*#__PURE__*/React__default.createElement(ContentContainer$2, {
@@ -4940,7 +5031,7 @@ var Card = function Card(_ref) {
     level: 6
   }, title)), subtitle ? /*#__PURE__*/React__default.createElement(SubtitleContainer, null, subtitle) : null, /*#__PURE__*/React__default.createElement(TextContainer, {
     dangerouslySetInnerHTML: {
-      __html: truncate(text, 130)
+      __html: truncatedText
     }
   })), links ? /*#__PURE__*/React__default.createElement(ButtonsContainer$1, {
     ref: node,
@@ -6491,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;