@hellotext/hellotext 1.4.0 → 1.5.0

package/src/api/submissions.js

@@ -0,0 +1,30 @@
+import Hellotext from '../hellotext'
+import { Configuration } from '../core'
+
+import { Response } from './response'
+
+class SubmissionsAPI {
+  static get endpoint() {
+    return Configuration.endpoint('public/submissions')
+  }
+
+  static async resendOTP(id) {
+    const response = await fetch(`${this.endpoint}/${id}/otps`, {
+      method: 'POST',
+      headers: Hellotext.headers,
+    })
+
+    return new Response(response.ok, response)
+  }
+
+  static async verifyOTP(id, otp) {
+    const response = await fetch(`${this.endpoint}/${id}/otps/${otp}/verify`, {
+      method: 'POST',
+      headers: Hellotext.headers,
+    })
+
+    return new Response(response.ok, response)
+  }
+}
+
+export default SubmissionsAPI

package/src/builders/input_builder.js

@@ -0,0 +1,55 @@
+import Hellotext from '../hellotext'
+
+class InputBuilder {
+  static build(data) {
+    const article = document.createElement('article')
+    const label = document.createElement('label')
+    const input = document.createElement('input')
+
+    label.innerText = data.label
+
+    input.type = data.type
+    input.required = data.required
+    input.placeholder = data.placeholder
+
+    if (['first_name', 'last_name'].includes(data.kind)) {
+      input.type = 'text'
+      input.id = input.name = data.kind
+      label.setAttribute('for', data.kind)
+    } else {
+      input.type = data.type
+
+      if (data.type === 'email') {
+        input.id = input.name = 'email'
+        label.setAttribute('for', 'email')
+      } else if (input.type === 'tel') {
+        input.id = input.name = 'phone'
+        label.setAttribute('for', 'phone')
+        input.value = `+${Hellotext.business.country.prefix}`
+        input.setAttribute('data-default-value', `+${Hellotext.business.country.prefix}`)
+      } else {
+        input.name = input.id = `property_by_id[${data.property}]`
+        label.setAttribute('for', `property_by_id[${data.property}]`)
+      }
+    }
+
+    const main = document.createElement('main')
+
+    main.appendChild(label)
+    main.appendChild(input)
+
+    article.appendChild(main)
+
+    article.setAttribute('data-hellotext--form-target', 'inputContainer')
+    input.setAttribute('data-hellotext--form-target', 'input')
+
+    const errorContainer = document.createElement('div')
+    errorContainer.setAttribute('data-error-container', '')
+
+    article.appendChild(errorContainer)
+
+    return article
+  }
+}
+
+export { InputBuilder }

package/src/builders/logo_builder.js

@@ -0,0 +1,25 @@
+import Hellotext from '../hellotext'
+
+class LogoBuilder {
+  static build() {
+    const container = document.createElement('div')
+    container.innerHTML = this.#template()
+
+    return container.firstElementChild
+  }
+
+  static #template() {
+    return `
+      <div data-logo-container>
+        <small>${Hellotext.business.locale.white_label.powered_by}</small>
+        
+        <svg data-hello-brand viewBox="0 0 224 43" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <title>Hellotext</title>
+          <path d="M28.2760919,19.3224299 L28.2760919,31.1946615 C28.2760919,32.2088722 27.5005873,32.9844452 26.4864658,32.9844452 L21.0579334,32.9844452 C20.043812,32.9844452 19.2683073,32.2088722 19.2683073,31.1946615 L19.2683073,19.9786839 C19.2683073,16.7570733 17.4190271,14.7883113 14.4959712,14.7883113 C11.0360274,14.7883113 8.76916774,17.11503 8.76916774,21.1122135 L8.76916774,31.3139804 C8.76916774,32.3281911 7.99366311,33.1037641 6.97954167,33.1037641 L1.78962607,33.1037641 C0.77550463,33.1037641 0,32.3281911 0,31.3139804 L0,3.45301476 C0,2.43880402 0.77550463,1.6632311 1.78962607,1.6632311 L6.97954167,1.6632311 C7.99366311,1.6632311 8.76916774,2.43880402 8.76916774,3.45301476 L8.76916774,9.06100356 L8.11297151,16.3991166 L8.70951354,16.458776 C9.78328918,11.6860196 13.5415039,8.52406846 18.4331485,8.52406846 C24.3389145,8.52406846 28.2760919,12.8195492 28.2760919,19.3224299 Z M61.1455574,26.3622456 C58.9980061,30.7173858 53.6291279,33.5213803 47.0671656,33.5213803 C37.9997269,33.5213803 31.4377646,28.2116887 31.4377646,20.7542568 C31.4377646,13.6547816 37.2838764,8.52406846 46.0530442,8.52406846 C53.7484363,8.52406846 59.1769687,12.4615925 59.8928191,18.8451542 C60.0121275,19.9190244 59.1769687,20.8735757 58.103193,20.8735757 L40.1472781,20.8735757 C40.4455492,24.8110998 43.1299883,27.2571374 47.186474,27.2571374 C50.2288383,27.2571374 52.8536232,25.7656511 54.1660157,23.4389323 C54.5835951,22.6633594 55.5380623,22.3054026 56.3732212,22.6036999 L60.1314359,23.9758674 C61.0859032,24.2741647 61.622791,25.4076943 61.1455574,26.3622456 Z M40.5648576,17.3536679 L50.706072,17.2343489 C50.0498757,14.7286518 48.3795581,13.5354627 45.8740816,13.5354627 C43.3089509,13.5354627 41.4000164,14.9672896 40.5648576,17.3536679 Z M120.143563,20.9928946 C120.143563,28.2116887 113.641255,33.4617208 104.693125,33.4617208 C95.8046489,33.4617208 89.361995,28.2116887 89.361995,20.9928946 C89.361995,13.7741005 95.8046489,8.52406846 104.693125,8.52406846 C113.641255,8.52406846 120.143563,13.7741005 120.143563,20.9928946 Z M111.076125,21.1122135 C111.076125,17.2940084 108.45134,14.7883113 104.633471,14.7883113 C100.93491,14.7883113 98.3697796,17.2940084 98.3697796,20.9332352 C98.3697796,24.7514403 100.994564,27.2571374 104.812433,27.2571374 C108.570648,27.2571374 111.076125,24.7514403 111.076125,21.1122135 Z M141.559422,26.8395213 C141.261151,25.5866727 139.82945,25.0497376 138.815329,25.8253105 C137.443282,26.8395213 136.190544,27.2571374 134.99746,27.2571374 C132.909563,27.2571374 131.835787,26.0042889 131.835787,23.796889 L131.835787,13.9530789 L139.471525,13.9530789 C140.24703,13.9530789 140.903226,13.2968249 140.903226,12.521252 L140.903226,10.4928305 C140.903226,9.71725757 140.24703,9.06100356 139.471525,9.06100356 L131.835787,9.06100356 L131.835787,3.45301476 C131.835787,2.43880402 131.060282,1.6632311 130.046161,1.6632311 L125.214171,1.6632311 C124.200049,1.6632311 123.424545,2.43880402 123.424545,3.45301476 L123.424545,9.06100356 L123.424545,13.9530789 L123.424545,24.7514403 C123.424545,30.2401102 127.182759,33.5213803 133.565759,33.5213803 C136.727432,33.5213803 139.471525,32.6861479 141.499768,31.0753426 C142.036656,30.6577264 142.275272,29.9418129 142.09631,29.2855589 L141.559422,26.8395213 Z M173.414766,26.3622456 C171.267215,30.7173858 165.898337,33.5213803 159.336374,33.5213803 C150.268936,33.5213803 143.706973,28.2116887 143.706973,20.7542568 C143.706973,13.6547816 149.553085,8.52406846 158.322253,8.52406846 C166.017645,8.52406846 171.446177,12.4615925 172.162028,18.8451542 C172.281336,19.9190244 171.446177,20.8735757 170.372402,20.8735757 L152.416487,20.8735757 C152.714758,24.8110998 155.399197,27.2571374 159.455683,27.2571374 C162.498047,27.2571374 165.122832,25.7656511 166.435224,23.4389323 C166.852804,22.6633594 167.807271,22.3054026 168.64243,22.6036999 L172.400645,23.9758674 C173.414766,24.2741647 173.892,25.4076943 173.414766,26.3622456 Z M152.834066,17.3536679 L162.975281,17.2343489 C162.319084,14.7286518 160.648767,13.5354627 158.14329,13.5354627 C155.637814,13.5354627 153.669225,14.9672896 152.834066,17.3536679 Z M192.862036,20.8139163 L201.094316,12.0439763 C202.168092,10.9104467 201.332933,9.00134411 199.781923,9.00134411 L194.711316,9.00134411 C194.174428,9.00134411 193.637541,9.23998193 193.279615,9.71725757 L188.507279,15.8621815 L183.734943,9.71725757 C183.377018,9.29964138 182.899784,9.00134411 182.303242,9.00134411 L177.113327,9.00134411 C175.562317,9.00134411 174.727159,10.8507872 175.800934,12.0439763 L184.092868,20.8735757 L175.502663,30.0014724 C174.428888,31.135002 175.204392,33.0441046 176.815056,33.0441046 L181.945317,33.0441046 C182.482205,33.0441046 183.019093,32.8054668 183.377018,32.3878506 L188.447625,25.9446294 L193.577886,32.3878506 C193.935812,32.8054668 194.413045,33.0441046 194.949933,33.0441046 L200.139849,33.0441046 C201.690858,33.0441046 202.526017,31.1946615 201.452241,30.0611318 L192.862036,20.8139163 Z M223.941875,29.2258995 L223.345333,26.8395213 C223.047062,25.5866727 221.615362,25.0497376 220.60124,25.8253105 C219.229193,26.8395213 217.976455,27.2571374 216.783371,27.2571374 C214.695474,27.2571374 213.621698,26.0042889 213.621698,23.796889 L213.621698,13.9530789 L221.257436,13.9530789 C222.032941,13.9530789 222.689137,13.2968249 222.689137,12.521252 L222.689137,10.4928305 C222.689137,9.71725757 222.032941,9.06100356 221.257436,9.06100356 L213.621698,9.06100356 L213.621698,3.45301476 C213.621698,2.43880402 212.846194,1.6632311 211.832072,1.6632311 L207.000082,1.6632311 C205.985961,1.6632311 205.210456,2.43880402 205.210456,3.45301476 L205.210456,9.06100356 L205.210456,13.9530789 L205.210456,24.7514403 C205.210456,30.2401102 208.968671,33.5213803 215.35167,33.5213803 C218.513343,33.5213803 221.257436,32.6861479 223.285679,31.0753426 C223.882221,30.5980669 224.120838,29.8821535 223.941875,29.2258995 Z M77.6697714,6.01837134 C78.2663134,5.30245788 78.2663134,4.22858768 77.6101172,3.57233367 L74.5677529,0.529701449 C73.8519024,-0.186212015 72.6588184,-0.186212015 71.942968,0.589360904 C61.3841742,12.4615925 61.3841742,30.5384075 71.942968,42.4106391 C72.5991642,43.186212 73.8519024,43.186212 74.5677529,42.4702986 L77.6101172,39.4276663 C78.2663134,38.7714123 78.3259676,37.6975421 77.6697714,36.9816287 C69.9147251,28.1520293 69.9147251,14.8479707 77.6697714,6.01837134 Z M87.1547896,10.6718089 L84.1124252,7.62917663 C83.3965748,6.91326317 82.1438366,6.91326317 81.4876403,7.74849554 C78.2663134,11.6263601 76.4766873,16.458776 76.4766873,21.5298297 C76.4766873,26.6008834 78.2663134,31.4332993 81.4876403,35.3111639 C82.1438366,36.0867368 83.3965748,36.1463963 84.1124252,35.4304828 L87.1547896,32.3878506 C87.8109858,31.7315966 87.87064,30.7173858 87.3337522,30.0611318 C85.4248177,27.6747536 84.351042,24.6917809 84.351042,21.5894892 C84.351042,18.4871975 85.3651635,15.5042247 87.3337522,13.1178465 C87.87064,12.3422736 87.8109858,11.3280629 87.1547896,10.6718089 Z" id="hellotext" fill="currentColor"></path>
+        </svg>
+      </div>
+    `
+  }
+}
+
+export { LogoBuilder }

package/src/builders/otp_builder.js

@@ -0,0 +1,42 @@
+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="Enter your OTP"
+            maxlength="6"
+            />
+        </header>
+        
+        <footer data-otp-footer>
+          <button type="button" data-hellotext--otp-target="resendButton" data-action="hellotext--otp#resend">
+            ${Hellotext.business.locale.otp.resend}
+          </button>
+        </footer>
+      </article>
+    `
+  }
+}
+
+export { OTPBuilder }

package/src/controllers/form_controller.js

@@ -0,0 +1,105 @@
+import { Controller } from '@hotwired/stimulus'
+
+import Hellotext from '../hellotext'
+import { Form } from '../models'
+
+import FormsAPI from '../api/forms'
+
+import { OTPBuilder } from '../builders/otp_builder'
+
+export default class extends Controller {
+  static values = {
+    data: Object,
+    step: { type: Number, default: 1 },
+  }
+
+  static targets = ['inputContainer', 'input', 'button', 'otpContainer']
+
+  initialize() {
+    this.form = new Form(this.dataValue, this.element)
+  }
+
+  connect() {
+    super.connect()
+    this.element.addEventListener('submit', this.submit.bind(this))
+
+    if (document.activeElement.tagName !== 'INPUT') {
+      this.inputTargets[0].focus()
+    }
+  }
+
+  async submit(e) {
+    e.preventDefault()
+
+    if (this.invalid) {
+      return this.showErrorMessages()
+    }
+
+    this.clearErrorMessages()
+
+    this.formData = Object.fromEntries(new FormData(this.element))
+    this.buttonTarget.disabled = true
+
+    const response = await FormsAPI.submit(this.form.id, this.formData)
+    this.buttonTarget.disabled = false
+
+    if(response.failed) {
+      return
+    }
+
+    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)
+    }
+  }
+
+  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))
+  }
+
+  completed() {
+    this.form.markAsCompleted(this.formData)
+    this.element.remove()
+  }
+
+  // private
+
+  showErrorMessages() {
+    this.element.querySelectorAll('input:invalid').forEach(input => {
+      const parent = input.closest('article')
+      parent.querySelector('[data-error-container]').innerText = input.validationMessage
+    })
+  }
+
+  clearErrorMessages() {
+    this.element.querySelectorAll('input').forEach(input => {
+      const parent = input.closest('article')
+      parent.querySelector('[data-error-container]').innerText = ''
+    })
+  }
+
+  inputTargetConnected(target) {
+    if (target.getAttribute('data-default-value')) {
+      target.value = target.getAttribute('data-default-value')
+    }
+  }
+
+  get requiredInputs() {
+    return this.inputTargets.filter(input => input.required)
+  }
+
+  get invalid() {
+    return !this.element.checkValidity()
+  }
+}

package/src/controllers/otp_controller.js

@@ -0,0 +1,77 @@
+import { Controller } from '@hotwired/stimulus'
+
+import Hellotext from '../hellotext'
+import SubmissionsAPI from '../api/submissions'
+
+export default class extends Controller {
+  static values = {
+    submissionId: String,
+  }
+
+  static targets = ['input', 'resendButton']
+
+  initialize() {
+    super.initialize()
+
+    this.attempts = 0
+    this.onInputChange = this.onInputChange.bind(this)
+
+    this.throttleInterval = setInterval(() => {
+      this.attempts = 0
+    }, 60000)
+  }
+
+  connect() {
+    super.connect()
+    this.inputTarget.addEventListener('input', this.onInputChange)
+  }
+
+  disconnect() {
+    clearInterval(this.throttleInterval)
+    this.inputTarget.removeEventListener('input', this.onInputChange)
+
+    super.disconnect()
+  }
+
+  async resend() {
+    if (this.throttled) {
+      return alert(Hellotext.business.locale.otp.throttled)
+    }
+
+    this.resendButtonTarget.disabled = true
+    const response = await SubmissionsAPI.resendOTP(this.submissionIdValue)
+
+    if (response.succeeded) {
+      this.resendButtonTarget.disabled = false
+    }
+
+    alert(Hellotext.business.locale.otp.resend_successful)
+    this.attempts += 1
+  }
+
+  async onInputChange() {
+    if (this.inputTarget.value.length !== 6) return
+
+    this.inputTarget.disabled = true
+    this.resendButtonTarget.disabled = true
+
+    const response = await SubmissionsAPI.verifyOTP(this.submissionIdValue, this.inputTarget.value)
+
+    if (response.succeeded) {
+      this.dispatch('verified', {
+        detail: { submissionId: this.submissionIdValue },
+      })
+    } else {
+      alert(Hellotext.business.locale.otp.invalid)
+    }
+
+    this.inputTarget.disabled = false
+    this.resendButtonTarget.disabled = false
+  }
+
+  // private
+
+  get throttled() {
+    return this.attempts >= 3
+  }
+}

package/src/core/configuration.js

@@ -0,0 +1,16 @@
+class Configuration {
+  static apiRoot = 'https://api.hellotext.com/v1'
+  static autoGenerateSession = true
+
+  static assign({ apiRoot, autoGenerateSession }) {
+    this.apiRoot = apiRoot || this.apiRoot
+    this.autoGenerateSession = autoGenerateSession
+    return this
+  }
+
+  static endpoint(path) {
+    return `${this.apiRoot}/${path}`
+  }
+}
+
+export { Configuration }

package/src/core/event.js

@@ -0,0 +1,54 @@
+import { InvalidEvent } from '../errors'
+
+export default class Event {
+  static events = ['session-set', 'forms:collected', 'form:completed']
+
+  static valid(name) {
+    return Event.exists(name)
+  }
+
+  static invalid(name) {
+    return !this.valid(name)
+  }
+
+  static exists(name) {
+    return this.events.find(eventName => eventName === name) !== undefined
+  }
+
+  constructor() {
+    this.subscribers = {}
+  }
+
+  addSubscriber(eventName, callback) {
+    if (Event.invalid(eventName)) {
+      throw new InvalidEvent(eventName)
+    }
+
+    this.subscribers = {
+      ...this.subscribers,
+      [eventName]: this.subscribers[eventName]
+        ? [...this.subscribers[eventName], callback]
+        : [callback],
+    }
+  }
+
+  removeSubscriber(eventName, callback) {
+    if (Event.invalid(eventName)) {
+      throw new InvalidEvent(eventName)
+    }
+
+    if (this.subscribers[eventName]) {
+      this.subscribers[eventName] = this.subscribers[eventName].filter(cb => cb !== callback)
+    }
+  }
+
+  dispatch(eventName, data) {
+    this.subscribers[eventName]?.forEach(subscriber => {
+      subscriber(data)
+    })
+  }
+
+  get listeners() {
+    return Object.keys(this.subscribers).length !== 0
+  }
+}

package/src/core/index.js

@@ -0,0 +1,2 @@
+export { default as Event } from './event'
+export { Configuration } from './configuration'

package/src/errors/index.js

@@ -0,0 +1,2 @@
+export { InvalidEvent } from './invalid_event'
+export { NotInitializedError } from './not_initialized_error'

package/src/hellotext.js

@@ -1,53 +1,55 @@
-import Event from "./event"
-import EventEmitter from "./eventEmitter"
-import Response from "./response";
-import Query from "./query";
+import { Event, Configuration } from './core'
 
-import { NotInitializedError } from './errors/notInitializedError'
-import { InvalidEvent } from "./errors/invalidEvent"
+import API from './api'
+import { Business, Query, Cookies, FormCollection } from './models'
+
+import { NotInitializedError } from './errors'
 
 /**
  * @typedef {Object} Config
  * @property {Boolean} autogenerateSession
  */
 
-
 class Hellotext {
-  static __apiURL = 'https://api.hellotext.com/v1/'
-
   static #session
-  static #business
   static #config
-  static #eventEmitter = new EventEmitter()
   static #query
 
+  static eventEmitter = new Event()
+  static forms
+  static business
+
   /**
    * initialize the module.
    * @param business public business id
    * @param { Config } config
    */
   static initialize(business, config = { autogenerateSession: true }) {
-    this.#business = business
-    this.#config = config
+    this.business = new Business(business)
+    this.forms = new FormCollection()
 
-    this.#query = new Query(window.location.search)
+    this.#config = Configuration.assign(config)
+    this.#query = new Query()
 
-    if(this.#query.has("preview")) return
+    addEventListener('load', () => {
+      this.forms.collect()
+    })
 
-    const session = this.#query.get("session") || this.#cookie
+    if (this.#query.inPreviewMode) return
 
-    if (session && session !== "undefined" && session !== "null") {
-      this.#session = session
-      this.#setSessionCookie()
-    } else if(config.autogenerateSession) {
-      this.#mintAnonymousSession()
-        .then(response => {
-          this.#session = response.id
-          this.#setSessionCookie()
-        })
+    if (this.#query.session) {
+      this.#session = Cookies.set('hello_session', this.#query.session)
+    } else if (config.autogenerateSession) {
+      this.#mintAnonymousSession().then(response => {
+        this.#session = Cookies.set('hello_session', response.id)
+      })
     }
   }
 
+  static setSession(value) {
+    this.#session = Cookies.set('hello_session', value)
+  }
+
   /**
    * Tracks an action that has happened on the page
    *
@@ -56,24 +58,19 @@ class Hellotext {
    * @returns {Promise<Response>}
    */
   static async track(action, params = {}) {
-    if (this.#notInitialized) { throw new NotInitializedError() }
-
-    if(this.#query.has("preview")) {
-      return new Response(true, { received: true })
+    if (this.notInitialized) {
+      throw new NotInitializedError()
     }
 
-    const response = await fetch(this.__apiURL + 'track/events', {
-      headers: this.#headers,
-      method: 'post',
-      body: JSON.stringify({
+    return await API.events.create({
+      headers: this.headers,
+      body: {
         session: this.session,
         action,
         ...params,
-        url: (params && params.url) || window.location.href
-      }),
+        url: (params && params.url) || window.location.href,
+      },
     })
-
-    return new Response(response.status === 200, await response.json())
   }
 
   /**
@@ -82,9 +79,7 @@ class Hellotext {
    * @param callback the callback. This method will be called with the payload
    */
   static on(event, callback) {
-    if(Event.invalid(event)) { throw new InvalidEvent(event) }
-
-    this.#eventEmitter.addSubscriber(event, callback)
+    this.eventEmitter.addSubscriber(event, callback)
   }
 
   /**
@@ -93,9 +88,7 @@ class Hellotext {
    * @param callback the callback to remove
    */
   static removeEventListener(event, callback) {
-    if(Event.invalid(event)) { throw new InvalidEvent(event) }
-
-    this.#eventEmitter.removeSubscriber(event, callback)
+    this.eventEmitter.removeSubscriber(event, callback)
   }
 
   /**
@@ -103,7 +96,9 @@ class Hellotext {
    * @returns {String}
    */
   static get session() {
-    if (this.#notInitialized) { throw new NotInitializedError() }
+    if (this.notInitialized) {
+      throw new NotInitializedError()
+    }
 
     return this.#session
   }
@@ -118,46 +113,29 @@ class Hellotext {
 
   // private
 
-  static get #notInitialized() {
-    return this.#business === undefined
+  static get notInitialized() {
+    return this.business.id === undefined
   }
 
   static async #mintAnonymousSession() {
-    if (this.#notInitialized) { throw new NotInitializedError() }
-
-    const trackingUrl = this.__apiURL + 'track/sessions'
-
-    this.mintingPromise = await fetch(trackingUrl, {
-      method: 'post',
-      headers: { Authorization: `Bearer ${this.#business}` },
-    })
+    if (this.notInitialized) {
+      throw new NotInitializedError()
+    }
 
-    return this.mintingPromise.json()
+    return API.sessions(this.business.id).create()
   }
 
-  static get #headers() {
-    if (this.#notInitialized) { throw new NotInitializedError() }
+  static get headers() {
+    if (this.notInitialized) {
+      throw new NotInitializedError()
+    }
 
     return {
-      Authorization: `Bearer ${this.#business}`,
+      Authorization: `Bearer ${this.business.id}`,
       Accept: 'application.json',
       'Content-Type': 'application/json',
     }
   }
-
-  static #setSessionCookie() {
-    if (this.#notInitialized) { throw new NotInitializedError() }
-
-    if(this.#eventEmitter.listeners) {
-      this.#eventEmitter.emit("session-set", this.#session)
-    }
-
-    document.cookie = `hello_session=${this.#session}`
-  }
-
-  static get #cookie() {
-    return document.cookie.match('(^|;)\\s*' + 'hello_session' + '\\s*=\\s*([^;]+)')?.pop()
-  }
 }
 
 export default Hellotext

package/src/index.js

@@ -1,3 +1,13 @@
+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'
+
 export default Hellotext

package/src/locales/en.js

@@ -0,0 +1,13 @@
+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 OTP',
+    throttled: 'You have reached the maximum number of attempts. Please try again in 1 minute.',
+  },
+  white_label: {
+    powered_by: "Powered by",
+  }
+}

package/src/locales/es.js

@@ -0,0 +1,13 @@
+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 OTP',
+    throttled: 'Has alcanzado el número máximo de intentos. Por favor intenta de nuevo en 1 minuto.',
+  },
+  white_label: {
+    powered_by: "Desarrollado por",
+  }
+}

package/src/locales/index.js

@@ -0,0 +1,7 @@
+import en from './en'
+import es from './es'
+
+export default {
+  en,
+  es,
+}