@hellotext/hellotext 2.4.2 → 2.4.4

package/lib/models/business.js

@@ -7,6 +7,8 @@ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typ
 function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 import locales from '../locales';
 import BusinessesAPI from '../api/businesses';
+var stylesheetAttribute = 'data-hellotext-stylesheet';
+var stylesheetLoadTimeout = 10000;
 
 /**
  * @typedef {Object} BusinessCountry
@@ -46,6 +48,8 @@ var Business = /*#__PURE__*/function () {
     _classCallCheck(this, Business);
     this.id = id;
     this.data = null;
+    this.stylesheet = null;
+    this.stylesheetLoaded = Promise.resolve(false);
   }
 
   /**
@@ -91,11 +95,12 @@ var Business = /*#__PURE__*/function () {
     key: "setData",
     value: function setData(data) {
       this.data = data;
-      if (typeof document !== 'undefined') {
-        var linkTag = document.createElement('link');
-        linkTag.rel = 'stylesheet';
-        linkTag.href = data.style_url;
-        document.head.append(linkTag);
+      if (typeof document !== 'undefined' && data.style_url) {
+        this.stylesheet = this.constructor.ensureStylesheet(data.style_url);
+        this.stylesheetLoaded = this.constructor.waitForStylesheet(this.stylesheet);
+      } else {
+        this.stylesheet = null;
+        this.stylesheetLoaded = Promise.resolve(false);
       }
     }
   }, {
@@ -139,6 +144,78 @@ var Business = /*#__PURE__*/function () {
     get: function get() {
       return this.data.features;
     }
+  }], [{
+    key: "stylesheetSelector",
+    get: function get() {
+      return "link[rel=\"stylesheet\"][".concat(stylesheetAttribute, "]");
+    }
+  }, {
+    key: "ensureStylesheet",
+    value: function ensureStylesheet(styleUrl) {
+      var href = this.normalizedStylesheetUrl(styleUrl);
+      var existingLink = this.stylesheetLinks.find(link => link.href === href);
+      if (existingLink) {
+        existingLink.setAttribute(stylesheetAttribute, 'true');
+        return existingLink;
+      }
+      var linkTag = document.createElement('link');
+      linkTag.rel = 'stylesheet';
+      linkTag.href = styleUrl;
+      linkTag.setAttribute(stylesheetAttribute, 'true');
+      this.waitForStylesheet(linkTag);
+      document.head.append(linkTag);
+      return linkTag;
+    }
+  }, {
+    key: "stylesheetLinks",
+    get: function get() {
+      if (typeof document === 'undefined') return [];
+      return Array.from(document.querySelectorAll(this.stylesheetSelector));
+    }
+  }, {
+    key: "latestStylesheet",
+    get: function get() {
+      return this.stylesheetLinks[this.stylesheetLinks.length - 1];
+    }
+  }, {
+    key: "normalizedStylesheetUrl",
+    value: function normalizedStylesheetUrl(styleUrl) {
+      try {
+        return new URL(styleUrl, document.baseURI).href;
+      } catch (_error) {
+        return styleUrl;
+      }
+    }
+  }, {
+    key: "waitForStylesheet",
+    value: function waitForStylesheet(linkTag) {
+      if (!linkTag) return Promise.resolve(false);
+      if (this.stylesheetIsLoaded(linkTag)) return Promise.resolve(true);
+      if (linkTag.dataset.hellotextStylesheetLoaded === 'false') return Promise.resolve(false);
+      if (linkTag._hellotextStylesheetLoaded) return linkTag._hellotextStylesheetLoaded;
+      linkTag._hellotextStylesheetLoaded = new Promise(resolve => {
+        var timeout;
+        var finish = loaded => {
+          clearTimeout(timeout);
+          linkTag.removeEventListener('load', handleLoad);
+          linkTag.removeEventListener('error', handleError);
+          linkTag.dataset.hellotextStylesheetLoaded = loaded ? 'true' : 'false';
+          resolve(loaded);
+        };
+        var handleLoad = () => finish(this.stylesheetIsLoaded(linkTag));
+        var handleError = () => finish(false);
+        linkTag.addEventListener('load', handleLoad);
+        linkTag.addEventListener('error', handleError);
+        timeout = setTimeout(() => finish(this.stylesheetIsLoaded(linkTag)), stylesheetLoadTimeout);
+        if (timeout.unref) timeout.unref();
+      });
+      return linkTag._hellotextStylesheetLoaded;
+    }
+  }, {
+    key: "stylesheetIsLoaded",
+    value: function stylesheetIsLoaded(linkTag) {
+      return linkTag.dataset.hellotextStylesheetLoaded === 'true' || !!linkTag.sheet;
+    }
   }]);
   return Business;
 }();

package/lib/models/webchat.cjs

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.Webchat = void 0;
 var _core = require("../core");
 var _api = _interopRequireDefault(require("../api"));
+var _business = require("./business");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
@@ -16,13 +17,20 @@ let Webchat = /*#__PURE__*/function () {
   function Webchat(data) {
     _classCallCheck(this, Webchat);
     this.data = data;
-    this.render();
+    this.mounted = false;
+    this.rendered = Promise.resolve(false);
   }
   _createClass(Webchat, [{
     key: "render",
-    value: function render() {
+    value: async function render() {
       this.applyBehaviourOverride();
+      if (!(await this.stylesheetLoaded)) {
+        console.warn('Hellotext webchat was not mounted because its stylesheet failed to load.');
+        return false;
+      }
       this.containerToAppendTo.appendChild(this.data.html);
+      this.mounted = true;
+      return true;
     }
   }, {
     key: "applyBehaviourOverride",
@@ -53,13 +61,20 @@ let Webchat = /*#__PURE__*/function () {
     get: function () {
       return document.querySelector(_core.Configuration.webchat.container);
     }
+  }, {
+    key: "stylesheetLoaded",
+    get: function () {
+      return _business.Business.waitForStylesheet(_business.Business.latestStylesheet);
+    }
   }], [{
     key: "load",
     value: async function load(id) {
-      return new Webchat({
+      const webchat = new Webchat({
         id,
         html: await _api.default.webchats.get(id)
       });
+      webchat.rendered = webchat.render();
+      return webchat;
     }
   }]);
   return Webchat;

package/lib/models/webchat.js

@@ -7,18 +7,32 @@ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typ
 function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 import { Configuration } from '../core';
 import API from '../api';
+import { Business } from './business';
 var Webchat = /*#__PURE__*/function () {
   function Webchat(data) {
     _classCallCheck(this, Webchat);
     this.data = data;
-    this.render();
+    this.mounted = false;
+    this.rendered = Promise.resolve(false);
   }
   _createClass(Webchat, [{
     key: "render",
-    value: function render() {
-      this.applyBehaviourOverride();
-      this.containerToAppendTo.appendChild(this.data.html);
-    }
+    value: function () {
+      var _render = _asyncToGenerator(function* () {
+        this.applyBehaviourOverride();
+        if (!(yield this.stylesheetLoaded)) {
+          console.warn('Hellotext webchat was not mounted because its stylesheet failed to load.');
+          return false;
+        }
+        this.containerToAppendTo.appendChild(this.data.html);
+        this.mounted = true;
+        return true;
+      });
+      function render() {
+        return _render.apply(this, arguments);
+      }
+      return render;
+    }()
   }, {
     key: "applyBehaviourOverride",
     value: function applyBehaviourOverride() {
@@ -48,14 +62,21 @@ var Webchat = /*#__PURE__*/function () {
     get: function get() {
       return document.querySelector(Configuration.webchat.container);
     }
+  }, {
+    key: "stylesheetLoaded",
+    get: function get() {
+      return Business.waitForStylesheet(Business.latestStylesheet);
+    }
   }], [{
     key: "load",
     value: function () {
       var _load = _asyncToGenerator(function* (id) {
-        return new Webchat({
+        var webchat = new Webchat({
           id,
           html: yield API.webchats.get(id)
         });
+        webchat.rendered = webchat.render();
+        return webchat;
       });
       function load(_x) {
         return _load.apply(this, arguments);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hellotext/hellotext",
-  "version": "2.4.2",
+  "version": "2.4.4",
   "description": "Hellotext JavaScript Client",
   "source": "src/index.js",
   "main": "lib/index.cjs",

package/src/controllers/message_controller.js

@@ -4,7 +4,9 @@ import Hellotext from '../hellotext'
 
 export default class extends Controller {
   static values = {
+    fadeDistance: { type: Number, default: 64 },
     id: String,
+    pageStartOffset: { type: Number, default: 0 },
   }
 
   static targets = ['carouselContainer', 'leftFade', 'rightFade', 'carouselCard']
@@ -24,14 +26,16 @@ export default class extends Controller {
 
   quickReply({ currentTarget }) {
     const card = currentTarget.closest('[data-hellotext--message-target="carouselCard"]')
+    const messageElement = currentTarget.closest('[data-controller~="hellotext--message"]')
+    const body = currentTarget.dataset.text || currentTarget.textContent.trim()
 
     this.dispatch('quickReply', {
       detail: {
         id: this.idValue,
-        product: card.dataset.id,
+        product: card?.dataset.id,
         buttonId: currentTarget.dataset.id,
-        body: currentTarget.dataset.text,
-        cardElement: card,
+        body,
+        cardElement: card || messageElement || currentTarget,
       },
     })
   }
@@ -60,7 +64,10 @@ export default class extends Controller {
   moveToLeft() {
     if (!this.hasCarouselContainerTarget) return
 
-    const scrollAmount = this.getScrollAmount()
+    const nextScrollLeft = this.getPreviousPageScrollLeft()
+    const scrollAmount = this.carouselContainerTarget.scrollLeft - nextScrollLeft
+
+    if (scrollAmount < 1) return
 
     this.carouselContainerTarget.scrollBy({
       left: -scrollAmount,
@@ -71,7 +78,10 @@ export default class extends Controller {
   moveToRight() {
     if (!this.hasCarouselContainerTarget) return
 
-    const scrollAmount = this.getScrollAmount()
+    const nextScrollLeft = this.getNextPageScrollLeft()
+    const scrollAmount = nextScrollLeft - this.carouselContainerTarget.scrollLeft
+
+    if (scrollAmount < 1) return
 
     this.carouselContainerTarget.scrollBy({
       left: scrollAmount,
@@ -80,7 +90,10 @@ export default class extends Controller {
   }
 
   getScrollAmount() {
-    // Get the actual card width from DOM
+    return this.getCardScrollAmount()
+  }
+
+  getCardScrollAmount() {
     const firstCard = this.carouselContainerTarget.querySelector('.message__carousel_card')
 
     if (!firstCard) {
@@ -88,31 +101,141 @@ export default class extends Controller {
     }
 
     const cardWidth = firstCard.offsetWidth
-    const gap = 16 // gap-x-4 = 1rem = 16px
 
-    return cardWidth + gap
+    return cardWidth + this.getGap()
+  }
+
+  getPageScrollAmount() {
+    const scrollAmount = this.carouselContainerTarget.clientWidth - this.getGap()
+
+    return scrollAmount > 0 ? scrollAmount : this.getCardScrollAmount()
+  }
+
+  getNextPageScrollLeft() {
+    const currentScrollLeft = this.getCurrentScrollLeft()
+    const viewportRight = currentScrollLeft + this.carouselContainerTarget.clientWidth
+    const cardMetrics = this.getCardMetrics()
+    const nextCard = cardMetrics.find(card => card.end > viewportRight + 1)
+    const targetScrollLeft = nextCard
+      ? this.getPageAlignedScrollLeft(nextCard.start)
+      : currentScrollLeft + this.getPageScrollAmount()
+    const fallbackScrollLeft = currentScrollLeft + this.getPageScrollAmount()
+
+    return this.clampScrollLeft(targetScrollLeft > currentScrollLeft + 1 ? targetScrollLeft : fallbackScrollLeft)
+  }
+
+  getPreviousPageScrollLeft() {
+    const currentScrollLeft = this.getCurrentScrollLeft()
+
+    if (currentScrollLeft <= 1) return 0
+
+    const targetThreshold = Math.max(currentScrollLeft - this.getPageScrollAmount(), 0)
+
+    if (targetThreshold <= 1) return 0
+
+    const cardMetrics = this.getCardMetrics()
+    const previousPageCard = cardMetrics.find(card => card.start >= targetThreshold - 1 && card.start < currentScrollLeft - 1)
+    const previousCard = [...cardMetrics].reverse().find(card => card.start < currentScrollLeft - 1)
+
+    return this.getPageAlignedScrollLeft(previousPageCard?.start ?? previousCard?.start ?? 0)
+  }
+
+  getPageAlignedScrollLeft(cardStart) {
+    const pageStartOffset = this.getPageStartOffset()
+
+    if (cardStart <= pageStartOffset + 1) return 0
+
+    return this.clampScrollLeft(cardStart - pageStartOffset)
+  }
+
+  getCardMetrics() {
+    return Array.from(this.carouselContainerTarget.querySelectorAll('.message__carousel_card')).map(card => {
+      const start = this.getCardScrollLeft(card)
+
+      return {
+        start,
+        end: start + card.offsetWidth,
+      }
+    })
+  }
+
+  getCardScrollLeft(card) {
+    const cardRect = card.getBoundingClientRect()
+    const containerRect = this.carouselContainerTarget.getBoundingClientRect()
+
+    if (cardRect.left || cardRect.width || containerRect.left || containerRect.width) {
+      return cardRect.left - containerRect.left + this.carouselContainerTarget.scrollLeft
+    }
+
+    return card.offsetLeft || 0
+  }
+
+  getCurrentScrollLeft() {
+    return this.clampScrollLeft(this.carouselContainerTarget.scrollLeft)
+  }
+
+  clampScrollLeft(scrollLeft) {
+    const maxScroll = Math.max(this.carouselContainerTarget.scrollWidth - this.carouselContainerTarget.clientWidth, 0)
+
+    return Math.min(Math.max(scrollLeft, 0), maxScroll)
+  }
+
+  getGap() {
+    const styles = window.getComputedStyle(this.carouselContainerTarget)
+    const gap = Number.parseFloat(styles.columnGap || styles.gap)
+
+    return Number.isFinite(gap) ? gap : 16
+  }
+
+  getFadeDistance() {
+    return Number.isFinite(this.fadeDistanceValue) ? this.fadeDistanceValue : 64
+  }
+
+  getPageStartOffset() {
+    return Number.isFinite(this.pageStartOffsetValue) ? this.pageStartOffsetValue : 0
   }
 
   updateFades() {
     if (!this.hasCarouselContainerTarget) return
 
-    const scrollLeft = this.carouselContainerTarget.scrollLeft
-    const maxScroll =
-      this.carouselContainerTarget.scrollWidth - this.carouselContainerTarget.clientWidth
+    const maxScroll = Math.max(this.carouselContainerTarget.scrollWidth - this.carouselContainerTarget.clientWidth, 0)
 
-    // Show left fade if scrolled past start
-    if (scrollLeft > 0) {
-      this.leftFadeTarget.classList.remove('hidden')
-    } else {
-      this.leftFadeTarget.classList.add('hidden')
+    if (maxScroll <= 1) {
+      this.hideFade(this.leftFadeTarget)
+      this.hideFade(this.rightFadeTarget)
+      return
     }
 
-    // Show right fade if not at end
-    if (scrollLeft < maxScroll - 1) {
-      // -1 for rounding errors
-      this.rightFadeTarget.classList.remove('hidden')
-    } else {
-      this.rightFadeTarget.classList.add('hidden')
+    const scrollLeft = Math.min(Math.max(this.carouselContainerTarget.scrollLeft, 0), maxScroll)
+
+    const fadeDistance = this.getFadeDistance()
+
+    this.setFadeOpacity(this.leftFadeTarget, scrollLeft / fadeDistance)
+    this.setFadeOpacity(this.rightFadeTarget, (maxScroll - scrollLeft) / fadeDistance)
+  }
+
+  setFadeOpacity(fadeTarget, opacity) {
+    const clampedOpacity = Math.min(Math.max(opacity, 0), 1)
+
+    if (clampedOpacity <= 0.05) {
+      this.hideFade(fadeTarget)
+      return
     }
+
+    fadeTarget.classList.remove('hidden')
+    fadeTarget.removeAttribute('disabled')
+    fadeTarget.removeAttribute('tabindex')
+    fadeTarget.setAttribute('aria-hidden', 'false')
+    fadeTarget.style.opacity = clampedOpacity.toFixed(3)
+    fadeTarget.style.pointerEvents = 'auto'
+  }
+
+  hideFade(fadeTarget) {
+    fadeTarget.style.opacity = '0'
+    fadeTarget.style.pointerEvents = 'none'
+    fadeTarget.setAttribute('aria-hidden', 'true')
+    fadeTarget.setAttribute('tabindex', '-1')
+    if ('disabled' in fadeTarget) fadeTarget.disabled = true
+    fadeTarget.classList.add('hidden')
   }
 }

package/src/controllers/mixins/usePopover.js

@@ -35,6 +35,7 @@ export const usePopover = controller => {
       if (this.disabledValue) return
 
       if (this.openValue) {
+        this.preparePopoverOpenAnimation?.()
         this.popoverTarget.showPopover()
         this.popoverTarget.setAttribute('aria-expanded', 'true')
 

package/src/controllers/webchat/useTeaser.js

@@ -141,7 +141,10 @@ export const useTeaser = controller => {
     },
 
     teaserSeenKey() {
-      return `hellotext:webchat:${this.idValue || this.element.id}:teaser-seen`
+      const teaserVersion = this.hasTeaserTarget ? this.teaserTarget.dataset.teaserVersion : ''
+      const versionSegment = teaserVersion ? `:${teaserVersion}` : ''
+
+      return `hellotext:webchat:${this.idValue || this.element.id}:teaser-seen${versionSegment}`
     },
 
     teaserSeenForSession() {