@hellotext/hellotext 1.7.8 → 1.8.0

package/docs/tracking.md

@@ -49,11 +49,15 @@ Hellotext.track('page.viewed', {
 
 ### Headers 
 
-You can add any custom or additional headers to the request by passing an object as the third argument to the `track` method.
-Any duplicate headers will be overwritten by Hellotext's default headers.
+You can add any custom or additional headers to the request by passing a `headers` object in the parameter.
 
 ```javascript
-Hellotext.track('page.viewed', {}, { 'X-Custom-Header': 'value' })
+Hellotext.track('page.viewed', {
+  headers: {
+    'X-Custom-Header': 'value',
+  },
+  // event related parameters
+})
 ```
 
 ### Errors

package/lib/controllers/form_controller.js

@@ -8,6 +8,7 @@ var _stimulus = require("@hotwired/stimulus");
 var _hellotext = _interopRequireDefault(require("../hellotext"));
 var _models = require("../models");
 var _forms = _interopRequireDefault(require("../api/forms"));
+var _core = require("../core");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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); }); }; }
@@ -92,7 +93,14 @@ var _default = /*#__PURE__*/function (_Controller) {
     key: "completed",
     value: function completed() {
       this.form.markAsCompleted(this.formData);
-      this.element.remove();
+      if (!_core.Configuration.forms.shouldShowSuccessMessage) {
+        return this.element.remove();
+      }
+      if (typeof _core.Configuration.forms.successMessage === 'string') {
+        this.element.innerHTML = _core.Configuration.forms.successMessage;
+      } else {
+        this.element.innerHTML = _hellotext.default.business.locale.forms[this.form.localeAuthKey];
+      }
     }
 
     // private

package/lib/core/configuration/forms.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Forms = void 0;
+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); }
+/**
+ * @class Forms
+ * @classdesc
+ * Configuration for forms
+ * @property {Boolean} autoMount - whether to auto mount forms
+ * @property {Boolean|String} successMessage - whether to show success message after form completion or not
+ */
+var Forms = /*#__PURE__*/function () {
+  function Forms() {
+    _classCallCheck(this, Forms);
+  }
+  _createClass(Forms, null, [{
+    key: "assign",
+    value:
+    /**
+     * @param {Object} props
+     * @param {Boolean} [props.autoMount=true] - whether to auto mount forms
+     * @param {Boolean|String} [props.successMessage=true] - whether to show success message after form completion or not
+     */
+    function assign(props) {
+      if (props) {
+        Object.entries(props).forEach(_ref => {
+          var [key, value] = _ref;
+          this[key] = value;
+        });
+      }
+      return this;
+    }
+  }, {
+    key: "shouldShowSuccessMessage",
+    get: function get() {
+      return this.successMessage;
+    }
+  }]);
+  return Forms;
+}();
+exports.Forms = Forms;
+Forms.autoMount = true;
+Forms.successMessage = true;

package/lib/core/configuration.js

@@ -4,22 +4,44 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Configuration = void 0;
+var _forms = require("./configuration/forms");
 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); }
+/**
+ * @class Configuration
+ * @classdesc
+ * Configuration for Hellotext
+ * @property {Boolean} [autoGenerateSession=true] - whether to auto generate session or not
+ * @property {String} [session] - session id
+ * @property {Forms} [forms] - form configuration
+ */
 var Configuration = /*#__PURE__*/function () {
   function Configuration() {
     _classCallCheck(this, Configuration);
   }
   _createClass(Configuration, null, [{
     key: "assign",
-    value: function assign(props) {
+    value:
+    /**
+     *
+     * @param props
+     * @param {Boolean} [props.autoGenerateSession=true] - whether to auto generate session or not
+     * @param {String} [props.session] - session id
+     * @param {Object} [props.forms] - form configuration
+     * @returns {Configuration}
+     */
+    function assign(props) {
       if (props) {
         Object.entries(props).forEach(_ref => {
           var [key, value] = _ref;
-          this[key] = value;
+          if (key === 'forms') {
+            this.forms = _forms.Forms.assign(value);
+          } else {
+            this[key] = value;
+          }
         });
       }
       return this;
@@ -35,5 +57,5 @@ var Configuration = /*#__PURE__*/function () {
 exports.Configuration = Configuration;
 Configuration.apiRoot = 'https://api.hellotext.com/v1';
 Configuration.autoGenerateSession = true;
-Configuration.autoMountForms = true;
-Configuration.session = null;
+Configuration.session = null;
+Configuration.forms = _forms.Forms;

package/lib/hellotext.js

@@ -25,11 +25,6 @@ function _classPrivateFieldLooseKey(name) { return "__private_" + id++ + "_" + n
 var _session = /*#__PURE__*/_classPrivateFieldLooseKey("session");
 var _query = /*#__PURE__*/_classPrivateFieldLooseKey("query");
 var _mintAnonymousSession = /*#__PURE__*/_classPrivateFieldLooseKey("mintAnonymousSession");
-/**
- * @typedef {Object} Config
- * @property {Boolean} autoGenerateSession
- * @property {Boolean} autoMountForms
- */
 var Hellotext = /*#__PURE__*/function () {
   function Hellotext() {
     _classCallCheck(this, Hellotext);
@@ -40,7 +35,7 @@ var Hellotext = /*#__PURE__*/function () {
     /**
      * initialize the module.
      * @param business public business id
-     * @param { Config } config
+     * @param { Configuration } config
      */
     function initialize(business, config) {
       _core.Configuration.assign(config);
@@ -69,7 +64,6 @@ var Hellotext = /*#__PURE__*/function () {
      *
      * @param { String } action a valid action name
      * @param { Object } params
-     * @param { Object } headers additional headers to send
      * @returns {Promise<Response>}
      */
   }, {
@@ -77,18 +71,20 @@ var Hellotext = /*#__PURE__*/function () {
     value: function () {
       var _track = _asyncToGenerator(function* (action) {
         var params = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-        var headers = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
         if (this.notInitialized) {
           throw new _errors.NotInitializedError();
         }
+        var headers = _objectSpread(_objectSpread({}, params && params.headers || {}), this.headers);
+        var body = _objectSpread(_objectSpread({
+          session: this.session,
+          action
+        }, params), {}, {
+          url: params && params.url || window.location.href
+        });
+        delete body.headers;
         return yield _api.default.events.create({
-          headers: _objectSpread(_objectSpread({}, headers), this.headers),
-          body: _objectSpread(_objectSpread({
-            session: this.session,
-            action
-          }, params), {}, {
-            url: params && params.url || window.location.href
-          })
+          headers,
+          body
         });
       });
       function track(_x) {

package/lib/locales/en.js

@@ -11,6 +11,12 @@ var _default = {
   errors: {
     parameter_not_unique: 'This value is taken.',
     blank: 'This field is required.'
+  },
+  forms: {
+    phone: 'Click the link sent via SMS to verify your submission.',
+    email: 'Click the link sent via email to verify your submission.',
+    phone_and_email: 'Click the links sent via SMS and email to verify your submission.',
+    none: 'Your submission has been received.'
   }
 };
 exports.default = _default;

package/lib/locales/es.js

@@ -11,6 +11,12 @@ var _default = {
   errors: {
     parameter_not_unique: 'Este valor ya está en uso.',
     blank: 'Este campo es obligatorio.'
+  },
+  forms: {
+    phone: 'Haga clic en el enlace enviado por SMS para verificar su envío.',
+    email: 'Haga clic en el enlace enviado por e-mail para verificar su envío.',
+    phone_and_email: 'Haga clic en los enlaces enviados por SMS y e-mail para verificar su envío.',
+    none: 'Su envío ha sido recibido.'
   }
 };
 exports.default = _default;

package/lib/models/form.js

@@ -130,6 +130,20 @@ var Form = /*#__PURE__*/function () {
     get: function get() {
       return this.data.id;
     }
+  }, {
+    key: "localeAuthKey",
+    get: function get() {
+      var firstStep = this.data.steps[0];
+      if (firstStep.inputs.some(input => input.kind === 'email') && firstStep.inputs.some(input => input.kind === 'phone')) {
+        return 'phone_and_email';
+      } else if (firstStep.inputs.some(input => input.kind === 'email')) {
+        return 'email';
+      } else if (firstStep.inputs.some(input => input.kind === 'phone')) {
+        return 'phone';
+      } else {
+        return 'none';
+      }
+    }
   }, {
     key: "elementAttributes",
     get: function get() {

package/lib/models/form_collection.js

@@ -46,7 +46,7 @@ var FormCollection = /*#__PURE__*/function () {
       var mutation = mutations.find(mutation => mutation.type === 'childList' && mutation.addedNodes.length > 0);
       if (!mutation) return;
       var forms = Array.from(document.querySelectorAll('[data-hello-form]'));
-      if (forms && _core.Configuration.autoMountForms) {
+      if (forms && _core.Configuration.forms.autoMount) {
         this.collect();
       }
     }
@@ -68,7 +68,7 @@ var FormCollection = /*#__PURE__*/function () {
         }
         this.fetching = true;
         yield Promise.all(promises).then(forms => forms.forEach(this.add)).then(() => _hellotext.default.eventEmitter.dispatch('forms:collected', this)).then(() => this.fetching = false);
-        if (_core.Configuration.autoMountForms) {
+        if (_core.Configuration.forms.autoMount) {
           this.forms.forEach(form => form.mount());
         }
       });

package/package.json

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

package/src/controllers/form_controller.js

@@ -5,6 +5,8 @@ import { Form } from '../models'
 
 import FormsAPI from '../api/forms'
 
+import { Configuration } from '../core'
+
 export default class extends Controller {
   static values = {
     data: Object,
@@ -73,7 +75,16 @@ export default class extends Controller {
 
   completed() {
     this.form.markAsCompleted(this.formData)
-    this.element.remove()
+
+    if(!Configuration.forms.shouldShowSuccessMessage) {
+      return this.element.remove()
+    }
+
+    if(typeof Configuration.forms.successMessage === 'string') {
+      this.element.innerHTML = Configuration.forms.successMessage
+    } else {
+      this.element.innerHTML = Hellotext.business.locale.forms[this.form.localeAuthKey]
+    }
   }
 
   // private

package/src/core/configuration/forms.js

@@ -0,0 +1,32 @@
+/**
+ * @class Forms
+ * @classdesc
+ * Configuration for forms
+ * @property {Boolean} autoMount - whether to auto mount forms
+ * @property {Boolean|String} successMessage - whether to show success message after form completion or not
+ */
+class Forms {
+  static autoMount = true
+  static successMessage = true
+
+  /**
+   * @param {Object} props
+   * @param {Boolean} [props.autoMount=true] - whether to auto mount forms
+   * @param {Boolean|String} [props.successMessage=true] - whether to show success message after form completion or not
+   */
+  static assign(props) {
+    if(props) {
+      Object.entries(props).forEach(([key, value]) => {
+        this[key] = value
+      })
+    }
+
+    return this
+  }
+
+  static get shouldShowSuccessMessage() {
+    return this.successMessage
+  }
+}
+
+export { Forms }

package/src/core/configuration.js

@@ -1,13 +1,37 @@
+import { Forms } from './configuration/forms'
+
+/**
+ * @class Configuration
+ * @classdesc
+ * Configuration for Hellotext
+ * @property {Boolean} [autoGenerateSession=true] - whether to auto generate session or not
+ * @property {String} [session] - session id
+ * @property {Forms} [forms] - form configuration
+ */
 class Configuration {
   static apiRoot = 'https://api.hellotext.com/v1'
+
   static autoGenerateSession = true
-  static autoMountForms = true
   static session = null
 
+  static forms = Forms
+
+  /**
+   *
+   * @param props
+   * @param {Boolean} [props.autoGenerateSession=true] - whether to auto generate session or not
+   * @param {String} [props.session] - session id
+   * @param {Object} [props.forms] - form configuration
+   * @returns {Configuration}
+   */
   static assign(props) {
-    if(props) {
+    if (props) {
       Object.entries(props).forEach(([key, value]) => {
-        this[key] = value
+        if (key === 'forms') {
+          this.forms = Forms.assign(value)
+        } else {
+          this[key] = value
+        }
       })
     }
 
@@ -19,4 +43,4 @@ class Configuration {
   }
 }
 
-export { Configuration }
+export {Configuration}

package/src/hellotext.js

@@ -5,11 +5,6 @@ import { Business, Query, Cookies, FormCollection } from './models'
 
 import { NotInitializedError } from './errors'
 
-/**
- * @typedef {Object} Config
- * @property {Boolean} autoGenerateSession
- * @property {Boolean} autoMountForms
- */
 
 class Hellotext {
   static #session
@@ -22,7 +17,7 @@ class Hellotext {
   /**
    * initialize the module.
    * @param business public business id
-   * @param { Config } config
+   * @param { Configuration } config
    */
   static initialize(business, config) {
     Configuration.assign(config)
@@ -54,25 +49,30 @@ class Hellotext {
    *
    * @param { String } action a valid action name
    * @param { Object } params
-   * @param { Object } headers additional headers to send
    * @returns {Promise<Response>}
    */
-  static async track(action, params = {}, headers = {}) {
+  static async track(action, params = {}) {
     if (this.notInitialized) {
       throw new NotInitializedError()
     }
 
+    const headers = {
+      ...(params && params.headers) || {},
+      ...this.headers,
+    }
+
+    const body = {
+      session: this.session,
+      action,
+      ...params,
+      url: (params && params.url) || window.location.href,
+    }
+
+    delete body.headers
+
     return await API.events.create({
-      headers: {
-        ...headers,
-        ...this.headers,
-      },
-      body: {
-        session: this.session,
-        action,
-        ...params,
-        url: (params && params.url) || window.location.href,
-      },
+      headers,
+      body,
     })
   }
 

package/src/locales/en.js

@@ -5,5 +5,11 @@ export default {
   errors: {
     parameter_not_unique: 'This value is taken.',
     blank: 'This field is required.'
+  },
+  forms: {
+    phone: 'Click the link sent via SMS to verify your submission.',
+    email: 'Click the link sent via email to verify your submission.',
+    phone_and_email: 'Click the links sent via SMS and email to verify your submission.',
+    none: 'Your submission has been received.'
   }
 }

package/src/locales/es.js

@@ -5,5 +5,11 @@ export default {
   errors: {
     parameter_not_unique: 'Este valor ya está en uso.',
     blank: 'Este campo es obligatorio.'
+  },
+  forms: {
+    phone: 'Haga clic en el enlace enviado por SMS para verificar su envío.',
+    email: 'Haga clic en el enlace enviado por e-mail para verificar su envío.',
+    phone_and_email: 'Haga clic en los enlaces enviados por SMS y e-mail para verificar su envío.',
+    none: 'Su envío ha sido recibido.'
   }
 }

package/src/models/form.js

@@ -104,6 +104,20 @@ class Form {
     return this.data.id
   }
 
+  get localeAuthKey() {
+    const firstStep = this.data.steps[0]
+
+    if(firstStep.inputs.some(input => input.kind === 'email') && firstStep.inputs.some(input => input.kind === 'phone')) {
+      return 'phone_and_email'
+    } else if(firstStep.inputs.some(input => input.kind === 'email')) {
+      return 'email'
+    } else if(firstStep.inputs.some(input => input.kind === 'phone')) {
+      return 'phone'
+    } else {
+      return 'none'
+    }
+  }
+
   get elementAttributes() {
     return [
       {

package/src/models/form_collection.js

@@ -30,7 +30,7 @@ class FormCollection {
 
     const forms = Array.from(document.querySelectorAll('[data-hello-form]'))
 
-    if (forms && Configuration.autoMountForms) {
+    if (forms && Configuration.forms.autoMount) {
       this.collect()
     }
   }
@@ -62,7 +62,7 @@ class FormCollection {
       .then(() => Hellotext.eventEmitter.dispatch('forms:collected', this))
       .then(() => this.fetching = false)
 
-    if (Configuration.autoMountForms) {
+    if (Configuration.forms.autoMount) {
       this.forms.forEach(form => form.mount())
     }
   }