@hellotext/hellotext 1.7.0 → 1.7.2

package/docs/forms.md

@@ -79,15 +79,28 @@ This will mount the form regardless if the user has completed the form or not.
 
 Hellotext automatically validates the form inputs based on how they were configured on the dashboard
 using browser's native [checkValidity()](https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/checkValidity).
+
 Once the user tries to submit the form and there are missing required fields,
 the submission is halted and we display default browser's error message using [HTMLObjectElement.validationMessage](https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validationMessage) property.
 
-### Authentication
+If the form contains a unique property and the client enters a value that is already taken,
+the submission will not be complete. Instead, an error will be reported to the client and the form will not be submitted.
+
+Uniqueness errors use the browser's native [setCustomValidity()](https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/setCustomValidity)
+method which are reported as normal form validation errors, they can be styled with the `input:invalid` selector.
+
+### Understanding Verification
 
 Hellotext protects you from bot submissions and protects your customers from identity theft and impersonation.
-When a subscriber fills the form, Hellotext sends a One Time Password (OTP) code to the subscriber. If they have an email,
-an email is sent to them, otherwise an SMS is sent to their phone number.
-Until a valid OTP has been entered, data will not show up on the dashboard and will not contribute to attribution marketing.
+
+When a subscriber fills the form with an email and/or phone number, Hellotext sends a verification link to the value the submission had at the time of creation. 
+When the customer clicks the link in their email and/or the SMS they receive, the attribute is verified. 
+Once the email/phone number were verified, the data is considered to be _verified_.
+
+Once verification of a submission is complete, Hellotext performs an automatic merge (if needed) of all profiles 
+that have the same email and/or phone number. After automatic merging, if a property has multiple values, 
+it will be visible in the Audience page and the user can see the values that were merged and they can decide which one 
+to ignore and which one to accept.
 
 ### Form Completion
 

package/lib/controllers/form_controller.js

@@ -8,7 +8,6 @@ var _stimulus = require("@hotwired/stimulus");
 var _hellotext = _interopRequireDefault(require("../hellotext"));
 var _models = require("../models");
 var _forms = _interopRequireDefault(require("../api/forms"));
-var _otp_builder = require("../builders/otp_builder");
 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); }); }; }
@@ -60,30 +59,35 @@ var _default = /*#__PURE__*/function (_Controller) {
         this.buttonTarget.disabled = true;
         var response = yield _forms.default.submit(this.form.id, this.formData);
         this.buttonTarget.disabled = false;
+        var data = yield response.json();
         if (response.failed) {
-          return;
+          data.errors.forEach(error => {
+            var {
+              type,
+              parameter
+            } = error;
+            var input = this.inputTargets.find(input => input.name === parameter);
+            input.setCustomValidity(_hellotext.default.business.locale.errors[type]);
+            input.reportValidity();
+            input.addEventListener('input', () => {
+              input.setCustomValidity('');
+              input.reportValidity();
+            });
+          });
+          return this.showErrorMessages();
         }
         this.buttonTarget.style.display = 'none';
         this.element.querySelectorAll('input').forEach(input => input.disabled = true);
-        var submission = yield response.json();
-        if (submission.identified) {
-          this.completed();
-        } else {
-          _hellotext.default.setSession(submission.session);
-          this.revealOTPContainer(submission.id);
+        if (!data.identified) {
+          _hellotext.default.setSession(data.session);
         }
+        this.completed();
       });
       function submit(_x) {
         return _submit.apply(this, arguments);
       }
       return submit;
     }()
-  }, {
-    key: "revealOTPContainer",
-    value: function revealOTPContainer(submissionId) {
-      var paragraph = this.requiredInputs.find(input => input.name === 'email') ? _hellotext.default.business.locale.otp.sent_to_email : _hellotext.default.business.locale.otp.sent_to_phone;
-      this.element.appendChild(_otp_builder.OTPBuilder.build(submissionId, paragraph));
-    }
   }, {
     key: "completed",
     value: function completed() {
@@ -104,6 +108,7 @@ var _default = /*#__PURE__*/function (_Controller) {
     key: "clearErrorMessages",
     value: function clearErrorMessages() {
       this.element.querySelectorAll('input').forEach(input => {
+        input.setCustomValidity('');
         var parent = input.closest('article');
         parent.querySelector('[data-error-container]').innerText = '';
       });

package/lib/hellotext.js

@@ -23,12 +23,11 @@ function _classPrivateFieldLooseBase(receiver, privateKey) { if (!Object.prototy
 var id = 0;
 function _classPrivateFieldLooseKey(name) { return "__private_" + id++ + "_" + name; }
 var _session = /*#__PURE__*/_classPrivateFieldLooseKey("session");
-var _config = /*#__PURE__*/_classPrivateFieldLooseKey("config");
 var _query = /*#__PURE__*/_classPrivateFieldLooseKey("query");
 var _mintAnonymousSession = /*#__PURE__*/_classPrivateFieldLooseKey("mintAnonymousSession");
 /**
  * @typedef {Object} Config
- * @property {Boolean} autogenerateSession
+ * @property {Boolean} autoGenerateSession
  * @property {Boolean} autoMountForms
  */
 var Hellotext = /*#__PURE__*/function () {
@@ -44,14 +43,14 @@ var Hellotext = /*#__PURE__*/function () {
      * @param { Config } config
      */
     function initialize(business, config) {
-      _classPrivateFieldLooseBase(this, _config)[_config] = _core.Configuration.assign(config);
+      _core.Configuration.assign(config);
       _classPrivateFieldLooseBase(this, _query)[_query] = new _models.Query();
       this.business = new _models.Business(business);
       this.forms = new _models.FormCollection();
       if (_classPrivateFieldLooseBase(this, _query)[_query].inPreviewMode) return;
       if (_classPrivateFieldLooseBase(this, _query)[_query].session) {
         _classPrivateFieldLooseBase(this, _session)[_session] = _models.Cookies.set('hello_session', _classPrivateFieldLooseBase(this, _query)[_query].session);
-      } else if (config.autogenerateSession) {
+      } else if (_core.Configuration.autoGenerateSession) {
         _classPrivateFieldLooseBase(this, _mintAnonymousSession)[_mintAnonymousSession]().then(response => {
           _classPrivateFieldLooseBase(this, _session)[_session] = _models.Cookies.set('hello_session', response.id);
         });
@@ -178,10 +177,6 @@ Object.defineProperty(Hellotext, _session, {
   writable: true,
   value: void 0
 });
-Object.defineProperty(Hellotext, _config, {
-  writable: true,
-  value: void 0
-});
 Object.defineProperty(Hellotext, _query, {
   writable: true,
   value: void 0

package/lib/index.js

@@ -7,12 +7,10 @@ exports.default = void 0;
 var _stimulus = require("@hotwired/stimulus");
 var _hellotext = _interopRequireDefault(require("./hellotext"));
 var _form_controller = _interopRequireDefault(require("./controllers/form_controller"));
-var _otp_controller = _interopRequireDefault(require("./controllers/otp_controller"));
 require("../styles/index.css");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var application = _stimulus.Application.start();
 application.register('hellotext--form', _form_controller.default);
-application.register('hellotext--otp', _otp_controller.default);
 window.Hellotext = _hellotext.default;
 var _default = _hellotext.default;
 exports.default = _default;

package/lib/locales/en.js

@@ -5,18 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _default = {
-  otp: {
-    sent_to_email: 'A One-Time Password has been sent to your email address',
-    sent_to_phone: 'An One-Time Password has been sent to your phone number',
-    resend_successful: 'The One-Time Password has been resent successfully',
-    invalid: 'Invalid One-Time Password',
-    resend: 'Resend verification code',
-    submit: 'Submit',
-    throttled: 'You have reached the maximum number of attempts. Please try again in 1 minute.',
-    placeholder: 'Enter the code here'
-  },
   white_label: {
     powered_by: 'Powered by'
+  },
+  errors: {
+    parameter_not_unique: 'This value is taken.',
+    blank: 'This field is required.'
   }
 };
 exports.default = _default;

package/lib/locales/es.js

@@ -5,18 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _default = {
-  otp: {
-    sent_to_email: 'Un código de un solo uso ha sido enviado a tu correo electrónico',
-    sent_to_phone: 'Un código de un solo uso ha sido enviado a tu número de teléfono',
-    resend_successful: 'El código de un solo uso ha sido reenviado exitosamente',
-    invalid: 'Código de un solo uso inválido',
-    resend: 'Reenviar código de verificación',
-    submit: 'Enviar',
-    throttled: 'Has alcanzado el número máximo de intentos. Por favor intenta de nuevo en 1 minuto.',
-    placeholder: 'Ingresa el código aquí'
-  },
   white_label: {
     powered_by: 'Desarrollado por'
+  },
+  errors: {
+    parameter_not_unique: 'Este valor ya está en uso.',
+    blank: 'Este campo es obligatorio.'
   }
 };
 exports.default = _default;

package/lib/models/form.js

@@ -142,9 +142,6 @@ var Form = /*#__PURE__*/function () {
       }, {
         name: 'data-hellotext--form-data-value',
         value: JSON.stringify(this.data)
-      }, {
-        name: 'data-action',
-        value: 'hellotext--otp:verified->hellotext--form#completed'
       }];
     }
   }]);

package/package.json

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

package/src/controllers/form_controller.js

@@ -5,8 +5,6 @@ import { Form } from '../models'
 
 import FormsAPI from '../api/forms'
 
-import { OTPBuilder } from '../builders/otp_builder'
-
 export default class extends Controller {
   static values = {
     data: Object,
@@ -43,29 +41,34 @@ export default class extends Controller {
     const response = await FormsAPI.submit(this.form.id, this.formData)
     this.buttonTarget.disabled = false
 
+    const data = await response.json()
+
     if (response.failed) {
-      return
+      data.errors.forEach(error => {
+        const { type, parameter } = error
+
+        const input = this.inputTargets.find(input => input.name === parameter)
+
+        input.setCustomValidity(Hellotext.business.locale.errors[type])
+        input.reportValidity()
+
+        input.addEventListener('input', () => {
+          input.setCustomValidity('')
+          input.reportValidity()
+        })
+      })
+
+      return this.showErrorMessages()
     }
 
     this.buttonTarget.style.display = 'none'
     this.element.querySelectorAll('input').forEach(input => (input.disabled = true))
 
-    const submission = await response.json()
-
-    if (submission.identified) {
-      this.completed()
-    } else {
-      Hellotext.setSession(submission.session)
-      this.revealOTPContainer(submission.id)
+    if (!data.identified) {
+      Hellotext.setSession(data.session)
     }
-  }
-
-  revealOTPContainer(submissionId) {
-    const paragraph = this.requiredInputs.find(input => input.name === 'email')
-      ? Hellotext.business.locale.otp.sent_to_email
-      : Hellotext.business.locale.otp.sent_to_phone
 
-    this.element.appendChild(OTPBuilder.build(submissionId, paragraph))
+    this.completed()
   }
 
   completed() {
@@ -84,6 +87,7 @@ export default class extends Controller {
 
   clearErrorMessages() {
     this.element.querySelectorAll('input').forEach(input => {
+      input.setCustomValidity('')
       const parent = input.closest('article')
       parent.querySelector('[data-error-container]').innerText = ''
     })

package/src/hellotext.js

@@ -7,13 +7,12 @@ import { NotInitializedError } from './errors'
 
 /**
  * @typedef {Object} Config
- * @property {Boolean} autogenerateSession
+ * @property {Boolean} autoGenerateSession
  * @property {Boolean} autoMountForms
  */
 
 class Hellotext {
   static #session
-  static #config
   static #query
 
   static eventEmitter = new Event()
@@ -26,7 +25,8 @@ class Hellotext {
    * @param { Config } config
    */
   static initialize(business, config) {
-    this.#config = Configuration.assign(config)
+    Configuration.assign(config)
+
     this.#query = new Query()
 
     this.business = new Business(business)
@@ -36,7 +36,7 @@ class Hellotext {
 
     if (this.#query.session) {
       this.#session = Cookies.set('hello_session', this.#query.session)
-    } else if (config.autogenerateSession) {
+    } else if (Configuration.autoGenerateSession) {
       this.#mintAnonymousSession().then(response => {
         this.#session = Cookies.set('hello_session', response.id)
       })

package/src/index.js

@@ -2,11 +2,9 @@ import { Application } from '@hotwired/stimulus'
 import Hellotext from './hellotext'
 
 import FormController from './controllers/form_controller'
-import OTPController from './controllers/otp_controller'
 
 const application = Application.start()
 application.register('hellotext--form', FormController)
-application.register('hellotext--otp', OTPController)
 
 import '../styles/index.css'
 

package/src/locales/en.js

@@ -1,15 +1,9 @@
 export default {
-  otp: {
-    sent_to_email: 'A One-Time Password has been sent to your email address',
-    sent_to_phone: 'An One-Time Password has been sent to your phone number',
-    resend_successful: 'The One-Time Password has been resent successfully',
-    invalid: 'Invalid One-Time Password',
-    resend: 'Resend verification code',
-    submit: 'Submit',
-    throttled: 'You have reached the maximum number of attempts. Please try again in 1 minute.',
-    placeholder: 'Enter the code here',
-  },
   white_label: {
     powered_by: 'Powered by',
   },
+  errors: {
+    parameter_not_unique: 'This value is taken.',
+    blank: 'This field is required.'
+  }
 }

package/src/locales/es.js

@@ -1,15 +1,9 @@
 export default {
-  otp: {
-    sent_to_email: 'Un código de un solo uso ha sido enviado a tu correo electrónico',
-    sent_to_phone: 'Un código de un solo uso ha sido enviado a tu número de teléfono',
-    resend_successful: 'El código de un solo uso ha sido reenviado exitosamente',
-    invalid: 'Código de un solo uso inválido',
-    resend: 'Reenviar código de verificación',
-    submit: 'Enviar',
-    throttled: 'Has alcanzado el número máximo de intentos. Por favor intenta de nuevo en 1 minuto.',
-    placeholder: 'Ingresa el código aquí'
-  },
   white_label: {
     powered_by: 'Desarrollado por',
   },
+  errors: {
+    parameter_not_unique: 'Este valor ya está en uso.',
+    blank: 'Este campo es obligatorio.'
+  }
 }

package/src/models/form.js

@@ -118,10 +118,6 @@ class Form {
         name: 'data-hellotext--form-data-value',
         value: JSON.stringify(this.data),
       },
-      {
-        name: 'data-action',
-        value: 'hellotext--otp:verified->hellotext--form#completed',
-      },
     ]
   }
 

package/styles/index.css

@@ -3,6 +3,8 @@ form[data-hello-form] {
 
   & article {
     & [data-error-container] {
+      font-size: 0.875rem;
+      line-height: 1.25rem;
       display: none;
     }
 

package/alpha.html

@@ -1,23 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport"
-          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>Document</title>
-</head>
-<body>
-
-hello there
-<script type="module">
-  import 'https://unpkg.com/@hellotext/hellotext@latest/dist/hellotext.js';
-
-  Hellotext.initialize('zGrDJ1Lb', {
-    apiRoot: 'http://api.lvh.me:3000',
-  })
-
-  // Hellotext.initialize('deadass')
-</script>
-</body>
-</html>

package/lib/builders/otp_builder.js

@@ -1,39 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.OTPBuilder = void 0;
-var _hellotext = _interopRequireDefault(require("../hellotext"));
-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); }
-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; }
-var _template = /*#__PURE__*/_classPrivateFieldLooseKey("template");
-var OTPBuilder = /*#__PURE__*/function () {
-  function OTPBuilder() {
-    _classCallCheck(this, OTPBuilder);
-  }
-  _createClass(OTPBuilder, null, [{
-    key: "build",
-    value: function build(submissionId, label) {
-      var element = _classPrivateFieldLooseBase(this, _template)[_template](submissionId, label);
-      var container = document.createElement('div');
-      container.innerHTML = element;
-      return container;
-    }
-  }]);
-  return OTPBuilder;
-}();
-exports.OTPBuilder = OTPBuilder;
-function _template2(submissionId, label) {
-  return "\n      <article \n        data-controller=\"hellotext--otp\" \n        data-hellotext--otp-submission-id-value=\"".concat(submissionId, "\"\n        data-hellotext--form-target=\"otpContainer\"\n        data-form-otp\n        >\n        <header data-otp-header>\n          <p>").concat(label, "</p>\n          <input \n            type=\"text\"\n            name=\"otp\"\n            data-hellotext--otp-target=\"input\"\n            placeholder=\"").concat(_hellotext.default.business.locale.otp.placeholder, "\"\n            maxlength=\"6\"\n            />\n        </header>\n        \n        <footer data-otp-footer>\n          <button type=\"button\" data-hellotext--otp-target=\"submitButton\" data-action=\"hellotext--otp#submit\">\n            ").concat(_hellotext.default.business.locale.otp.submit, "\n          </button>\n          \n          <button type=\"button\" data-hellotext--otp-target=\"resendButton\" data-action=\"hellotext--otp#resend\">\n            ").concat(_hellotext.default.business.locale.otp.resend, "\n          </button>\n        </footer>\n      </article>\n    ");
-}
-Object.defineProperty(OTPBuilder, _template, {
-  value: _template2
-});

package/lib/controllers/otp_controller.js

@@ -1,139 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _stimulus = require("@hotwired/stimulus");
-var _hellotext = _interopRequireDefault(require("../hellotext"));
-var _submissions = _interopRequireDefault(require("../api/submissions"));
-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); }); }; }
-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); }
-function _get() { if (typeof Reflect !== "undefined" && Reflect.get) { _get = Reflect.get.bind(); } else { _get = function _get(target, property, receiver) { var base = _superPropBase(target, property); if (!base) return; var desc = Object.getOwnPropertyDescriptor(base, property); if (desc.get) { return desc.get.call(arguments.length < 3 ? target : receiver); } return desc.value; }; } return _get.apply(this, arguments); }
-function _superPropBase(object, property) { while (!Object.prototype.hasOwnProperty.call(object, property)) { object = _getPrototypeOf(object); if (object === null) break; } return object; }
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _possibleConstructorReturn(self, call) { if (call && (typeof call === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-var _default = /*#__PURE__*/function (_Controller) {
-  _inherits(_default, _Controller);
-  var _super = _createSuper(_default);
-  function _default() {
-    _classCallCheck(this, _default);
-    return _super.apply(this, arguments);
-  }
-  _createClass(_default, [{
-    key: "initialize",
-    value: function initialize() {
-      _get(_getPrototypeOf(_default.prototype), "initialize", this).call(this);
-      this.attempts = 0;
-      this.onInputChange = this.onInputChange.bind(this);
-      this.throttleInterval = setInterval(() => {
-        this.attempts = 0;
-      }, 60000);
-    }
-  }, {
-    key: "connect",
-    value: function connect() {
-      this.inputTarget.addEventListener('input', this.onInputChange);
-      this.inputTarget.focus();
-      _get(_getPrototypeOf(_default.prototype), "connect", this).call(this);
-    }
-  }, {
-    key: "disconnect",
-    value: function disconnect() {
-      clearInterval(this.throttleInterval);
-      this.inputTarget.removeEventListener('input', this.onInputChange);
-      _get(_getPrototypeOf(_default.prototype), "disconnect", this).call(this);
-    }
-  }, {
-    key: "resend",
-    value: function () {
-      var _resend = _asyncToGenerator(function* () {
-        if (this.throttled) {
-          return alert(_hellotext.default.business.locale.otp.throttled);
-        }
-        this.resendButtonTarget.disabled = true;
-        var response = yield _submissions.default.resendOTP(this.submissionIdValue);
-        if (response.succeeded) {
-          this.resendButtonTarget.disabled = false;
-        }
-        alert(_hellotext.default.business.locale.otp.resend_successful);
-        this.attempts += 1;
-      });
-      function resend() {
-        return _resend.apply(this, arguments);
-      }
-      return resend;
-    }()
-  }, {
-    key: "onInputChange",
-    value: function onInputChange() {
-      if (this.inputTarget.value.length !== 6) return;
-      this.submit();
-    }
-  }, {
-    key: "submit",
-    value: function () {
-      var _submit = _asyncToGenerator(function* () {
-        if (this.inputTarget.value.length !== 6) {
-          return alert(_hellotext.default.business.locale.otp.invalid);
-        }
-        this.disable();
-        var response = yield _submissions.default.verifyOTP(this.submissionIdValue, this.inputTarget.value);
-        if (response.succeeded) {
-          this.dispatch('verified', {
-            detail: {
-              submissionId: this.submissionIdValue
-            }
-          });
-        } else {
-          alert(_hellotext.default.business.locale.otp.invalid);
-          setTimeout(() => {
-            this.inputTarget.value = '';
-            this.inputTarget.focus();
-          });
-        }
-        this.enable();
-      });
-      function submit() {
-        return _submit.apply(this, arguments);
-      }
-      return submit;
-    }() // private
-  }, {
-    key: "disable",
-    value: function disable() {
-      this.inputTarget.disabled = true;
-      this.resendButtonTarget.disabled = true;
-      this.submitButtonTarget.disabled = true;
-    }
-  }, {
-    key: "enable",
-    value: function enable() {
-      this.inputTarget.disabled = false;
-      this.resendButtonTarget.disabled = false;
-      this.submitButtonTarget.disabled = false;
-    }
-  }, {
-    key: "throttled",
-    get: function get() {
-      return this.attempts >= 3;
-    }
-  }]);
-  return _default;
-}(_stimulus.Controller);
-exports.default = _default;
-_default.values = {
-  submissionId: String
-};
-_default.targets = ['input', 'submitButton', 'resendButton'];

package/src/builders/otp_builder.js

@@ -1,46 +0,0 @@
-import Hellotext from '../hellotext'
-
-class OTPBuilder {
-  static build(submissionId, label) {
-    const element = this.#template(submissionId, label)
-    const container = document.createElement('div')
-
-    container.innerHTML = element
-
-    return container
-  }
-
-  static #template(submissionId, label) {
-    return `
-      <article 
-        data-controller="hellotext--otp" 
-        data-hellotext--otp-submission-id-value="${submissionId}"
-        data-hellotext--form-target="otpContainer"
-        data-form-otp
-        >
-        <header data-otp-header>
-          <p>${label}</p>
-          <input 
-            type="text"
-            name="otp"
-            data-hellotext--otp-target="input"
-            placeholder="${Hellotext.business.locale.otp.placeholder}"
-            maxlength="6"
-            />
-        </header>
-        
-        <footer data-otp-footer>
-          <button type="button" data-hellotext--otp-target="submitButton" data-action="hellotext--otp#submit">
-            ${Hellotext.business.locale.otp.submit}
-          </button>
-          
-          <button type="button" data-hellotext--otp-target="resendButton" data-action="hellotext--otp#resend">
-            ${Hellotext.business.locale.otp.resend}
-          </button>
-        </footer>
-      </article>
-    `
-  }
-}
-
-export { OTPBuilder }