@hellotext/hellotext 2.4.53 → 2.5.1

package/lib/models/whatsapp_widget.cjs

@@ -0,0 +1,77 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WhatsAppWidget = 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); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+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); }
+let WhatsAppWidget = /*#__PURE__*/function () {
+  function WhatsAppWidget(data) {
+    _classCallCheck(this, WhatsAppWidget);
+    this.data = data;
+    this.mounted = false;
+    this.rendered = Promise.resolve(false);
+  }
+  _createClass(WhatsAppWidget, [{
+    key: "render",
+    value: async function render() {
+      if (!this.data.html) return false;
+      const container = this.containerToAppendTo;
+      if (!container) {
+        console.warn(`Hellotext WhatsApp widget was not mounted because the container ${_core.Configuration.whatsapp.container} was not found.`);
+        return false;
+      }
+      if (!(await this.stylesheetLoaded)) {
+        console.warn('Hellotext WhatsApp widget was not mounted because its stylesheet failed to load.');
+        return false;
+      }
+      container.appendChild(this.data.html);
+      this.markCoexistingWidgets();
+      this.mounted = true;
+      return true;
+    }
+  }, {
+    key: "containerToAppendTo",
+    get: function () {
+      try {
+        return document.querySelector(_core.Configuration.whatsapp.container);
+      } catch (_) {
+        return null;
+      }
+    }
+  }, {
+    key: "stylesheetLoaded",
+    get: function () {
+      return _business.Business.waitForStylesheet(_business.Business.latestStylesheet);
+    }
+  }, {
+    key: "markCoexistingWidgets",
+    value: function markCoexistingWidgets() {
+      const webchat = document.querySelector('.hellotext--webchat:not(.hellotext--whatsapp-widget)');
+      const whatsapp = this.data.html;
+      if (!webchat || !whatsapp) return;
+      webchat.classList.add('hellotext--with-whatsapp-widget');
+      whatsapp.classList.add('hellotext--with-webchat');
+    }
+  }], [{
+    key: "load",
+    value: async function load(id) {
+      const widget = new WhatsAppWidget({
+        id,
+        html: await _api.default.whatsappWidgets.get(id)
+      });
+      widget.rendered = widget.render();
+      return widget;
+    }
+  }]);
+  return WhatsAppWidget;
+}();
+exports.WhatsAppWidget = WhatsAppWidget;

package/lib/models/whatsapp_widget.js

@@ -0,0 +1,84 @@
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+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); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+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 WhatsAppWidget = /*#__PURE__*/function () {
+  function WhatsAppWidget(data) {
+    _classCallCheck(this, WhatsAppWidget);
+    this.data = data;
+    this.mounted = false;
+    this.rendered = Promise.resolve(false);
+  }
+  _createClass(WhatsAppWidget, [{
+    key: "render",
+    value: function () {
+      var _render = _asyncToGenerator(function* () {
+        if (!this.data.html) return false;
+        var container = this.containerToAppendTo;
+        if (!container) {
+          console.warn("Hellotext WhatsApp widget was not mounted because the container ".concat(Configuration.whatsapp.container, " was not found."));
+          return false;
+        }
+        if (!(yield this.stylesheetLoaded)) {
+          console.warn('Hellotext WhatsApp widget was not mounted because its stylesheet failed to load.');
+          return false;
+        }
+        container.appendChild(this.data.html);
+        this.markCoexistingWidgets();
+        this.mounted = true;
+        return true;
+      });
+      function render() {
+        return _render.apply(this, arguments);
+      }
+      return render;
+    }()
+  }, {
+    key: "containerToAppendTo",
+    get: function get() {
+      try {
+        return document.querySelector(Configuration.whatsapp.container);
+      } catch (_) {
+        return null;
+      }
+    }
+  }, {
+    key: "stylesheetLoaded",
+    get: function get() {
+      return Business.waitForStylesheet(Business.latestStylesheet);
+    }
+  }, {
+    key: "markCoexistingWidgets",
+    value: function markCoexistingWidgets() {
+      var webchat = document.querySelector('.hellotext--webchat:not(.hellotext--whatsapp-widget)');
+      var whatsapp = this.data.html;
+      if (!webchat || !whatsapp) return;
+      webchat.classList.add('hellotext--with-whatsapp-widget');
+      whatsapp.classList.add('hellotext--with-webchat');
+    }
+  }], [{
+    key: "load",
+    value: function () {
+      var _load = _asyncToGenerator(function* (id) {
+        var widget = new WhatsAppWidget({
+          id,
+          html: yield API.whatsappWidgets.get(id)
+        });
+        widget.rendered = widget.render();
+        return widget;
+      });
+      function load(_x) {
+        return _load.apply(this, arguments);
+      }
+      return load;
+    }()
+  }]);
+  return WhatsAppWidget;
+}();
+export { WhatsAppWidget };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hellotext/hellotext",
-  "version": "2.4.53",
+  "version": "2.5.1",
   "description": "Hellotext JavaScript Client",
   "source": "src/index.js",
   "main": "lib/index.cjs",
@@ -55,7 +55,7 @@
     "jest-environment-jsdom": "^29.3.1",
     "prettier": "2.8.2",
     "style-loader": "^3.3.1",
-    "webpack": "^5.75.0",
+    "webpack": "^5.107.2",
     "webpack-cli": "^5.0.1",
     "whatwg-fetch": "^3.6.20"
   },
@@ -96,5 +96,8 @@
     "@hotwired/stimulus": "^3.0.0",
     "emoji-mart": "^5.6.0"
   },
-  "packageManager": "yarn@1.22.22+sha1.ac34549e6aa8e7ead463a7407e1c7390f61a6610"
+  "packageManager": "yarn@1.22.22+sha1.ac34549e6aa8e7ead463a7407e1c7390f61a6610",
+  "resolutions": {
+    "@babel/traverse": "7.23.2"
+  }
 }

package/src/api/index.js

@@ -3,6 +3,7 @@ import EventsAPI from './events'
 import FormsAPI from './forms'
 import IdentificationsAPI from './identifications'
 import WebchatsAPI from './webchats'
+import WhatsAppWidgetsAPI from './whatsapp_widgets'
 import AcksAPI from './acks'
 
 // Browsers keep `fetch(..., { keepalive: true })` requests alive during page
@@ -45,6 +46,10 @@ export default class API {
     return WebchatsAPI
   }
 
+  static get whatsappWidgets() {
+    return WhatsAppWidgetsAPI
+  }
+
   static get identifications() {
     return IdentificationsAPI
   }

package/src/api/whatsapp_widgets.js

@@ -0,0 +1,71 @@
+import { Configuration, Locale } from '../core'
+import Hellotext from '../hellotext'
+
+class WhatsAppWidgetsAPI {
+  static get endpoint() {
+    return Configuration.endpoint('public/widgets/whatsapp')
+  }
+
+  static async get(id) {
+    const url = new URL(`${this.endpoint}/${id}`)
+
+    url.searchParams.append('locale', Locale.toString())
+    url.searchParams.append('placement', Configuration.whatsapp.placement)
+    this.appendWhatsAppOverrides(url)
+
+    const response = await this.fetchWidget(url)
+
+    if (!response.ok) return null
+
+    const data = await this.parseWidgetResponse(response)
+
+    if (!data) return null
+
+    if (!Hellotext.business.data) {
+      Hellotext.business.setData(data.business)
+      Hellotext.business.setLocale(data.locale)
+    }
+
+    return new DOMParser().parseFromString(data.html, 'text/html').querySelector('article')
+  }
+
+  static appendWhatsAppOverrides(url) {
+    const { appearance, body, number } = Configuration.whatsapp
+
+    this.appendIfSupplied(
+      url,
+      'whatsapp[appearance][launcher][icon_url]',
+      appearance.launcher?.iconUrl,
+    )
+
+    this.appendIfSupplied(url, 'whatsapp[number]', number)
+    this.appendIfSupplied(url, 'whatsapp[body]', body)
+  }
+
+  static appendIfSupplied(url, key, value) {
+    if (value === undefined || value === null) return
+
+    url.searchParams.append(key, String(value))
+  }
+
+  static async fetchWidget(url) {
+    try {
+      return await fetch(url, {
+        method: 'GET',
+        headers: Hellotext.headers,
+      })
+    } catch (_) {
+      return { ok: false }
+    }
+  }
+
+  static async parseWidgetResponse(response) {
+    try {
+      return await response.json()
+    } catch (_) {
+      return null
+    }
+  }
+}
+
+export default WhatsAppWidgetsAPI

package/src/core/configuration/whatsapp.js

@@ -0,0 +1,143 @@
+/**
+ * @typedef {'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'} Placement
+ * @description Valid placements for the WhatsApp widget.
+ */
+
+/**
+ * @enum {Placement}
+ */
+const placements = {
+  TOP_LEFT: 'top-left',
+  TOP_RIGHT: 'top-right',
+  BOTTOM_LEFT: 'bottom-left',
+  BOTTOM_RIGHT: 'bottom-right'
+}
+
+/**
+ * @typedef {Object} WhatsAppWidgetAppearance
+ * @property {Object} [launcher] - Launcher appearance overrides.
+ * @property {string} [launcher.iconUrl] - Image URL used for the launcher icon.
+ */
+
+/**
+ * @class WhatsApp
+ * @classdesc Configuration for the standalone WhatsApp widget.
+ * @property {String} id - The id of the WhatsApp widget.
+ * @property {String} container - The container to append the widget to, defaults to 'body'.
+ * @property {Placement} placement - The placement of the widget, defaults to 'bottom-right'.
+ * @property {String} number - WhatsApp number used by the widget link.
+ * @property {String} body - Prefilled WhatsApp compose text.
+ * @property {WhatsAppWidgetAppearance} appearance - Appearance overrides.
+ */
+class WhatsApp {
+  static _id
+  static _container = 'body'
+  static _placement = 'bottom-right'
+  static _appearance = {}
+  static _number = null
+  static _body = null
+
+  static set id(value) {
+    this._id = value
+  }
+
+  static get id() {
+    return this._id
+  }
+
+  static set container(value) {
+    this._container = value
+  }
+
+  static get container() {
+    return this._container
+  }
+
+  static set placement(value) {
+    if (!Object.values(placements).includes(value)) {
+      throw new Error(`Invalid placement value: ${value}`)
+    }
+
+    this._placement = value
+  }
+
+  static get placement() {
+    return this._placement
+  }
+
+  static get appearance() {
+    return this._appearance
+  }
+
+  static set appearance(value) {
+    if (!this.isPlainObject(value)) {
+      throw new Error('Appearance must be an object')
+    }
+
+    Object.entries(value).forEach(([key, nestedValue]) => {
+      if (key !== 'launcher') {
+        throw new Error(`Invalid appearance property: ${key}`)
+      }
+
+      if (!this.isPlainObject(nestedValue)) {
+        throw new Error(`Appearance ${key} must be an object`)
+      }
+
+      Object.entries(nestedValue).forEach(([nestedKey, propertyValue]) => {
+        if (nestedKey !== 'iconUrl') {
+          throw new Error(`Invalid appearance launcher property: ${nestedKey}`)
+        }
+
+        if (propertyValue == null) {
+          return
+        }
+
+        if (typeof propertyValue !== 'string') {
+          throw new Error(`Invalid appearance ${key}.${nestedKey} value: ${propertyValue}`)
+        }
+      })
+    })
+
+    this._appearance = value
+  }
+
+  static get number() {
+    return this._number
+  }
+
+  static set number(value) {
+    if (value != null && typeof value !== 'string') {
+      throw new Error(`Invalid number value: ${value}`)
+    }
+
+    this._number = value
+  }
+
+  static get body() {
+    return this._body
+  }
+
+  static set body(value) {
+    if (value != null && typeof value !== 'string') {
+      throw new Error(`Invalid body value: ${value}`)
+    }
+
+    this._body = value
+  }
+
+  static assign(props) {
+    if (props) {
+      Object.entries(props).forEach(([key, value]) => {
+        this[key] = value
+      })
+    }
+
+    return this
+  }
+
+  static isPlainObject(value) {
+    return typeof value === 'object' && value !== null && !Array.isArray(value)
+  }
+}
+
+export { WhatsApp }

package/src/core/configuration.js

@@ -1,6 +1,7 @@
 import { Forms } from './configuration/forms'
 import { Locale } from './configuration/locale'
 import { Webchat } from './configuration/webchat'
+import { WhatsApp } from './configuration/whatsapp'
 
 /**
  * @class Configuration
@@ -10,6 +11,7 @@ import { Webchat } from './configuration/webchat'
  * @property {String} [session] - session id
  * @property {Forms} [forms] - form configuration
  * @property {Webchat} [webchat] - webchat configuration
+ * @property {WhatsApp} [whatsappWidget] - WhatsApp widget configuration
  * @property {Locale} [locale] - locale configuration
  */
 class Configuration {
@@ -21,6 +23,7 @@ class Configuration {
 
   static forms = Forms
   static webchat = Webchat
+  static whatsapp = WhatsApp
 
   /**
    *
@@ -42,6 +45,8 @@ class Configuration {
           this.forms = Forms.assign(value)
         } else if (key === 'webchat') {
           this.webchat = Webchat.assign(value)
+        } else if (key === 'whatsappWidget') {
+          this.whatsapp = WhatsApp.assign(value)
         } else {
           this[key] = value
         }

package/src/core/index.js

@@ -1,4 +1,5 @@
 export { Configuration } from './configuration'
 export { Locale } from './configuration/locale'
 export { Webchat } from './configuration/webchat'
+export { WhatsApp } from './configuration/whatsapp'
 export { default as Event } from './event'

package/src/hellotext.js

@@ -10,6 +10,7 @@ import {
   Session,
   User,
   Webchat,
+  WhatsAppWidget,
 } from './models'
 
 import { NotInitializedError } from './errors'
@@ -19,6 +20,7 @@ class Hellotext {
   static forms
   static business
   static webchat
+  static whatsapp
 
   /**
    * initialize the module.
@@ -44,6 +46,13 @@ class Hellotext {
             (businessData && businessData.webchat) || {},
             config.webchat || {},
           )
+    const whatsappConfig =
+      config.whatsappWidget === false
+        ? false
+        : this.mergeWhatsAppConfig(
+            (businessData && businessData.whatsapp) || {},
+            config.whatsappWidget || {},
+          )
 
     const hasExplicitBehaviourOverride =
       config.webchat &&
@@ -56,6 +65,11 @@ class Hellotext {
       this.webchat = await Webchat.load(webchatConfig.id)
     }
 
+    if (whatsappConfig && whatsappConfig.id) {
+      Configuration.whatsapp.assign(whatsappConfig)
+      this.whatsapp = await WhatsAppWidget.load(whatsappConfig.id)
+    }
+
     if (typeof MutationObserver !== 'undefined') {
       this.forms.collectExistingFormsOnPage()
     }
@@ -65,6 +79,10 @@ class Hellotext {
     return this.deepMergePlainObjects(dashboardConfig, localConfig)
   }
 
+  static mergeWhatsAppConfig(dashboardConfig, localConfig) {
+    return this.deepMergePlainObjects(dashboardConfig, localConfig)
+  }
+
   static deepMergePlainObjects(base, override) {
     const result = { ...base }
 

package/src/models/index.js

@@ -9,3 +9,4 @@ export { Session } from './session'
 export { User } from './user'
 export { UTM } from './utm'
 export { Webchat } from './webchat'
+export { WhatsAppWidget } from './whatsapp_widget'

package/src/models/webchat.js

@@ -30,6 +30,7 @@ class Webchat {
     }
 
     this.containerToAppendTo.appendChild(this.data.html)
+    this.markCoexistingWidgets()
     this.mounted = true
 
     return true
@@ -69,6 +70,16 @@ class Webchat {
   get stylesheetLoaded() {
     return Business.waitForStylesheet(Business.latestStylesheet)
   }
+
+  markCoexistingWidgets() {
+    const webchat = this.data.html
+    const whatsapp = document.querySelector('.hellotext--whatsapp-widget')
+
+    if (!webchat || !whatsapp) return
+
+    webchat.classList.add('hellotext--with-whatsapp-widget')
+    whatsapp.classList.add('hellotext--with-webchat')
+  }
 }
 
 export { Webchat }

package/src/models/whatsapp_widget.js

@@ -0,0 +1,68 @@
+import { Configuration } from '../core'
+
+import API from '../api'
+import { Business } from './business'
+
+class WhatsAppWidget {
+  static async load(id) {
+    const widget = new WhatsAppWidget({
+      id,
+      html: await API.whatsappWidgets.get(id)
+    })
+
+    widget.rendered = widget.render()
+
+    return widget
+  }
+
+  constructor(data) {
+    this.data = data
+    this.mounted = false
+    this.rendered = Promise.resolve(false)
+  }
+
+  async render() {
+    if (!this.data.html) return false
+
+    const container = this.containerToAppendTo
+    if (!container) {
+      console.warn(`Hellotext WhatsApp widget was not mounted because the container ${Configuration.whatsapp.container} was not found.`)
+      return false
+    }
+
+    if (!await this.stylesheetLoaded) {
+      console.warn('Hellotext WhatsApp widget was not mounted because its stylesheet failed to load.')
+      return false
+    }
+
+    container.appendChild(this.data.html)
+    this.markCoexistingWidgets()
+    this.mounted = true
+
+    return true
+  }
+
+  get containerToAppendTo() {
+    try {
+      return document.querySelector(Configuration.whatsapp.container)
+    } catch (_) {
+      return null
+    }
+  }
+
+  get stylesheetLoaded() {
+    return Business.waitForStylesheet(Business.latestStylesheet)
+  }
+
+  markCoexistingWidgets() {
+    const webchat = document.querySelector('.hellotext--webchat:not(.hellotext--whatsapp-widget)')
+    const whatsapp = this.data.html
+
+    if (!webchat || !whatsapp) return
+
+    webchat.classList.add('hellotext--with-whatsapp-widget')
+    whatsapp.classList.add('hellotext--with-webchat')
+  }
+}
+
+export { WhatsAppWidget }