@hellotext/hellotext 2.0.0 → 2.0.1

package/index.d.ts

@@ -0,0 +1,61 @@
+// Type definitions for @hellotext/hellotext
+
+export interface HellotextConfig {
+  forms?: {
+    autoMount?: boolean
+    successMessage?: boolean | string
+  }
+  webchat?: {
+    id?: string
+    container?: string
+    placement?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
+    classes?: string | string[]
+    triggerClasses?: string | string[]
+    behaviour?: 'modal' | 'popover'
+    style?: {
+      primaryColor?: string
+      secondaryColor?: string
+      typography?: string
+    }
+  }
+  session?: string
+  autoGenerateSession?: boolean
+}
+
+export interface TrackingParams {
+  amount?: number
+  currency?: string
+  metadata?: Record<string, any>
+  tracked_at?: number
+  url?: string
+  headers?: Record<string, string>
+  object?: string
+  object_parameters?: Record<string, any>
+  object_type?: string
+}
+
+export interface Response {
+  data: any
+  succeeded: boolean
+  failed: boolean
+}
+
+declare class Hellotext {
+  static initialize(businessId: string, config?: HellotextConfig): Promise<void>
+  static track(action: string, params?: TrackingParams): Promise<Response>
+  static on(event: string, callback: (data: any) => void): void
+  static removeEventListener(event: string, callback: (data: any) => void): void
+  static get session(): string
+  static get isInitialized(): boolean
+  static forms: any
+  static business: any
+  static webchat: any
+}
+
+export default Hellotext
+
+// Declare the CSS module
+declare module '@hellotext/hellotext/styles/index.css' {
+  const styles: string
+  export default styles
+}

package/lib/hellotext.cjs

@@ -41,6 +41,7 @@ let Hellotext = /*#__PURE__*/function () {
       if (_core.Configuration.webchat.id) {
         this.webchat = await _models.Webchat.load(_core.Configuration.webchat.id);
       }
+      this.forms.collect();
     }
 
     /**

package/lib/hellotext.js

@@ -39,6 +39,7 @@ var Hellotext = /*#__PURE__*/function () {
         if (Configuration.webchat.id) {
           this.webchat = yield Webchat.load(Configuration.webchat.id);
         }
+        this.forms.collect();
       });
       function initialize(_x, _x2) {
         return _initialize.apply(this, arguments);

package/lib/index.cjs

@@ -7,9 +7,8 @@ exports.default = void 0;
 var _stimulus = require("@hotwired/stimulus");
 var _hellotext = _interopRequireDefault(require("./hellotext"));
 var _form_controller = _interopRequireDefault(require("./controllers/form_controller"));
-var _webchat_controller = _interopRequireDefault(require("./controllers/webchat_controller"));
 var _emoji_picker_controller = _interopRequireDefault(require("./controllers/webchat/emoji_picker_controller"));
-require("../styles/index.css");
+var _webchat_controller = _interopRequireDefault(require("./controllers/webchat_controller"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const application = _stimulus.Application.start();
 application.register('hellotext--form', _form_controller.default);

package/lib/index.js

@@ -1,12 +1,11 @@
 import { Application } from '@hotwired/stimulus';
 import Hellotext from './hellotext';
 import FormController from './controllers/form_controller';
-import WebchatController from './controllers/webchat_controller';
 import WebChatEmojiController from './controllers/webchat/emoji_picker_controller';
+import WebchatController from './controllers/webchat_controller';
 var application = Application.start();
 application.register('hellotext--form', FormController);
 application.register('hellotext--webchat', WebchatController);
 application.register('hellotext--webchat--emoji', WebChatEmojiController);
-import '../styles/index.css';
 window.Hellotext = Hellotext;
 export default Hellotext;

package/lib/models/business.cjs

@@ -17,7 +17,6 @@ let Business = /*#__PURE__*/function () {
     _classCallCheck(this, Business);
     this.id = id;
     this.data = {};
-    this.fetchPublicData();
   }
   _createClass(Business, [{
     key: "subscription",
@@ -44,12 +43,10 @@ let Business = /*#__PURE__*/function () {
     get: function () {
       return this.data.features;
     }
-
-    // private
   }, {
     key: "fetchPublicData",
-    value: function fetchPublicData() {
-      _businesses.default.get(this.id).then(response => response.json()).then(data => {
+    value: async function fetchPublicData() {
+      return _businesses.default.get(this.id).then(response => response.json()).then(data => {
         this.data = data;
         if (typeof document !== 'undefined') {
           const linkTag = document.createElement('link');

package/lib/models/business.js

@@ -1,3 +1,5 @@
+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; }
@@ -10,7 +12,6 @@ var Business = /*#__PURE__*/function () {
     _classCallCheck(this, Business);
     this.id = id;
     this.data = {};
-    this.fetchPublicData();
   }
   _createClass(Business, [{
     key: "subscription",
@@ -37,21 +38,25 @@ var Business = /*#__PURE__*/function () {
     get: function get() {
       return this.data.features;
     }
-
-    // private
   }, {
     key: "fetchPublicData",
-    value: function fetchPublicData() {
-      API.get(this.id).then(response => response.json()).then(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);
-        }
+    value: function () {
+      var _fetchPublicData = _asyncToGenerator(function* () {
+        return API.get(this.id).then(response => response.json()).then(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);
+          }
+        });
       });
-    }
+      function fetchPublicData() {
+        return _fetchPublicData.apply(this, arguments);
+      }
+      return fetchPublicData;
+    }()
   }]);
   return Business;
 }();

package/lib/models/form_collection.cjs

@@ -4,8 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.FormCollection = void 0;
-var _hellotext = _interopRequireDefault(require("../hellotext"));
 var _forms = _interopRequireDefault(require("../api/forms"));
+var _hellotext = _interopRequireDefault(require("../hellotext"));
 var _core = require("../core");
 var _form = require("./form");
 var _errors = require("../errors");
@@ -55,6 +55,9 @@ let FormCollection = /*#__PURE__*/function () {
         throw new _errors.NotInitializedError();
       }
       if (this.fetching) return;
+      if (typeof document === 'undefined' || !('querySelectorAll' in document)) {
+        return console.warn('Document is not defined, collection is not possible. Please make sure to initialize the library after the document is loaded.');
+      }
       const formsIdsToFetch = _classPrivateFieldLooseBase(this, _formIdsToFetch)[_formIdsToFetch];
       if (formsIdsToFetch.length === 0) return;
       const promises = formsIdsToFetch.map(id => {

package/lib/models/form_collection.js

@@ -8,8 +8,8 @@ function _toPrimitive(input, hint) { if (typeof input !== "object" || input ===
 function _classPrivateFieldLooseBase(receiver, privateKey) { if (!Object.prototype.hasOwnProperty.call(receiver, privateKey)) { throw new TypeError("attempted to use private field on non-instance"); } return receiver; }
 var id = 0;
 function _classPrivateFieldLooseKey(name) { return "__private_" + id++ + "_" + name; }
-import Hellotext from '../hellotext';
 import API from '../api/forms';
+import Hellotext from '../hellotext';
 import { Configuration } from '../core';
 import { Form } from './form';
 import { NotInitializedError } from '../errors';
@@ -51,6 +51,9 @@ var FormCollection = /*#__PURE__*/function () {
           throw new NotInitializedError();
         }
         if (this.fetching) return;
+        if (typeof document === 'undefined' || !('querySelectorAll' in document)) {
+          return console.warn('Document is not defined, collection is not possible. Please make sure to initialize the library after the document is loaded.');
+        }
         var formsIdsToFetch = _classPrivateFieldLooseBase(this, _formIdsToFetch)[_formIdsToFetch];
         if (formsIdsToFetch.length === 0) return;
         var promises = formsIdsToFetch.map(id => {

package/package.json

@@ -1,30 +1,37 @@
 {
   "name": "@hellotext/hellotext",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "Hellotext JavaScript Client",
   "source": "src/index.js",
   "main": "lib/index.cjs",
   "module": "lib/index.js",
   "browser": "dist/hellotext.js",
   "unpkg": "dist/hellotext.js",
+  "types": "index.d.ts",
   "author": "Hellotext",
   "license": "MIT",
   "homepage": "https://github.com/hellotext/hellotext.js",
   "files": [
     "lib",
     "dist",
-    "src"
+    "src",
+    "styles",
+    "index.d.ts"
   ],
   "exports": {
     ".": {
+      "types": "./index.d.ts",
       "import": "./lib/index.js",
       "require": "./lib/index.cjs",
       "default": "./dist/hellotext.js"
     },
     "./vanilla": {
+      "types": "./index.d.ts",
       "import": "./lib/vanilla.js",
       "require": "./lib/vanilla.cjs"
     },
+    "./styles/*": "./styles/*",
+    "./styles/index.css": "./styles/index.css",
     "./package.json": "./package.json"
   },
   "sideEffects": [
@@ -63,8 +70,8 @@
   "scripts": {
     "test": "NODE_ENV=test jest",
     "build": "npm run clean && npm run build:esm && npm run build:cjs && npm run build:bundle",
-    "build:esm": "babel src -d lib",
-    "build:cjs": "BABEL_ENV=cjs babel src -d lib --out-file-extension .cjs",
+    "build:esm": "babel src -d lib --ignore src/index.bundle.js",
+    "build:cjs": "BABEL_ENV=cjs babel src -d lib --out-file-extension .cjs --ignore src/index.bundle.js",
     "build:bundle": "webpack",
     "clean": "rm -rf lib dist",
     "prepublishOnly": "npm test && npm run build"

package/src/hellotext.js

@@ -31,6 +31,8 @@ class Hellotext {
     if (Configuration.webchat.id) {
       this.webchat = await Webchat.load(Configuration.webchat.id)
     }
+
+    this.forms.collect()
   }
 
   /**

package/src/index.bundle.js

@@ -0,0 +1,5 @@
+import '../styles/index.css'
+import './index.js'
+
+import Hellotext from './index.js'
+export default Hellotext

package/src/index.js

@@ -2,8 +2,8 @@ import { Application } from '@hotwired/stimulus'
 import Hellotext from './hellotext'
 
 import FormController from './controllers/form_controller'
-import WebchatController from './controllers/webchat_controller'
 import WebChatEmojiController from './controllers/webchat/emoji_picker_controller'
+import WebchatController from './controllers/webchat_controller'
 
 const application = Application.start()
 
@@ -11,8 +11,6 @@ application.register('hellotext--form', FormController)
 application.register('hellotext--webchat', WebchatController)
 application.register('hellotext--webchat--emoji', WebChatEmojiController)
 
-import '../styles/index.css'
-
 window.Hellotext = Hellotext
 
 export default Hellotext

package/src/models/business.js

@@ -6,7 +6,6 @@ class Business {
   constructor(id) {
     this.id = id
     this.data = {}
-    this.fetchPublicData()
   }
 
   get subscription() {
@@ -29,15 +28,13 @@ class Business {
     return this.data.features
   }
 
-  // private
-
-  fetchPublicData() {
-    API.get(this.id)
+  async fetchPublicData() {
+    return API.get(this.id)
       .then(response => response.json())
       .then(data => {
         this.data = data
 
-        if(typeof document !== 'undefined') {
+        if (typeof document !== 'undefined') {
           const linkTag = document.createElement('link')
           linkTag.rel = 'stylesheet'
           linkTag.href = data.style_url

package/src/models/form_collection.js

@@ -1,5 +1,5 @@
-import Hellotext from '../hellotext'
 import API from '../api/forms'
+import Hellotext from '../hellotext'
 
 import { Configuration } from '../core'
 import { Form } from './form'
@@ -15,7 +15,7 @@ class FormCollection {
 
     this.add = this.add.bind(this)
 
-    if(typeof MutationObserver !== 'undefined') {
+    if (typeof MutationObserver !== 'undefined') {
       this.mutationObserver = new MutationObserver(this.formMutationObserver.bind(this))
       this.mutationObserver.observe(document.body, { childList: true, subtree: true })
     }
@@ -40,7 +40,13 @@ class FormCollection {
       throw new NotInitializedError()
     }
 
-    if(this.fetching) return
+    if (this.fetching) return
+
+    if (typeof document === 'undefined' || !('querySelectorAll' in document)) {
+      return console.warn(
+        'Document is not defined, collection is not possible. Please make sure to initialize the library after the document is loaded.',
+      )
+    }
 
     const formsIdsToFetch = this.#formIdsToFetch
     if (formsIdsToFetch.length === 0) return
@@ -60,7 +66,7 @@ class FormCollection {
     await Promise.all(promises)
       .then(forms => forms.forEach(this.add))
       .then(() => Hellotext.eventEmitter.dispatch('forms:collected', this))
-      .then(() => this.fetching = false)
+      .then(() => (this.fetching = false))
 
     if (Configuration.forms.autoMount) {
       this.forms.forEach(form => form.mount())

package/styles/index.css

@@ -0,0 +1,30 @@
+form[data-hello-form] {
+  position: relative;
+}
+
+form[data-hello-form] article [data-error-container] {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  display: none;
+}
+
+form[data-hello-form] article:has(input:invalid) [data-error-container] {
+  display: block;
+}
+
+form[data-hello-form] [data-logo-container] {
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+  position: absolute;
+  right: 1rem;
+  bottom: 1rem;
+}
+
+form[data-hello-form] [data-logo-container] small {
+  margin: 0 0.3rem;
+}
+
+form[data-hello-form] [data-logo-container] [data-hello-brand] {
+  width: 4rem;
+}