@hellotext/hellotext 1.4.0 → 1.5.0

package/src/models/business.js

@@ -0,0 +1,41 @@
+import API from '../api/businesses'
+
+import locales from '../locales'
+
+class Business {
+  constructor(id) {
+    this.id = id
+    this.data = {}
+    this.fetchPublicData()
+  }
+
+  get subscription() {
+    return this.data.subscription
+  }
+
+  get country() {
+    return this.data.country
+  }
+
+  get enabledWhitelist() {
+    return this.data.whitelist !== 'disabled'
+  }
+
+  get locale() {
+    return locales[this.data.locale]
+  }
+
+  get features() {
+    return this.data.features
+  }
+
+  // private
+
+  fetchPublicData() {
+    API.get(this.id)
+      .then(response => response.json())
+      .then(data => (this.data = data))
+  }
+}
+
+export { Business }

package/src/models/cookies.js

@@ -0,0 +1,16 @@
+import Hellotext from '../hellotext'
+
+class Cookies {
+  static set(name, value) {
+    document.cookie = `${name}=${value}`
+    Hellotext.eventEmitter.dispatch('session-set', value)
+
+    return value
+  }
+
+  static get(name) {
+    return document.cookie.match('(^|;)\\s*' + name + '\\s*=\\s*([^;]+)')?.pop()
+  }
+}
+
+export { Cookies }

package/src/models/form.js

@@ -0,0 +1,133 @@
+import Hellotext from '../hellotext'
+
+import { InputBuilder } from '../builders/input_builder'
+import { LogoBuilder } from '../builders/logo_builder'
+
+class Form {
+  constructor(data, element = null) {
+    this.data = data
+    this.element =
+      element ||
+      document.querySelector(`[data-hello-form="${this.id}"]`) ||
+      document.createElement('form')
+  }
+
+  async mount() {
+    const firstStep = this.data.steps[0]
+
+    this.buildHeader(firstStep.header)
+    this.buildInputs(firstStep.inputs)
+    this.buildButton(firstStep.button)
+    this.buildFooter(firstStep.footer)
+
+    this.elementAttributes.forEach(attribute => {
+      this.element.setAttribute(attribute.name, attribute.value)
+    })
+
+    if (!document.contains(this.element)) {
+      document.body.appendChild(this.element)
+    }
+
+    if(!Hellotext.business.features.white_label) {
+      this.element.prepend(LogoBuilder.build())
+    }
+  }
+
+  buildHeader(header) {
+    const headerElement = this.#findOrCreateComponent('[data-form-header]', 'header')
+    headerElement.innerHTML = header.content
+
+    if (this.element.querySelector('[data-form-header]')) {
+      this.element.querySelector('[data-form-header]').replaceWith(headerElement)
+    } else {
+      this.element.prepend(headerElement)
+    }
+  }
+
+  buildInputs(inputs) {
+    const inputsContainerElement = this.#findOrCreateComponent('[data-form-inputs]', 'main')
+    const inputElements = inputs.map(input => InputBuilder.build(input))
+
+    inputElements.forEach(inputElement => inputsContainerElement.appendChild(inputElement))
+
+    if (this.element.querySelector('[data-form-inputs]')) {
+      this.element.querySelector('[data-form-inputs]').replaceWith(inputsContainerElement)
+    } else {
+      this.element
+        .querySelector('[data-form-header]')
+        .insertAdjacentHTML('afterend', inputsContainerElement.outerHTML)
+    }
+  }
+
+  buildButton(button) {
+    const buttonElement = this.#findOrCreateComponent('[data-form-button]', 'button')
+    buttonElement.innerText = button.text
+
+    buttonElement.setAttribute('data-action', 'click->hellotext--form#submit')
+    buttonElement.setAttribute('data-hellotext--form-target', 'button')
+
+    if (this.element.querySelector('[data-form-button]')) {
+      this.element.querySelector('[data-form-button]').replaceWith(buttonElement)
+    } else {
+      this.element
+        .querySelector('[data-form-inputs]')
+        .insertAdjacentHTML('afterend', buttonElement.outerHTML)
+    }
+  }
+
+  buildFooter(footer) {
+    const element = this.#findOrCreateComponent('[data-form-footer]', 'footer')
+    element.innerHTML = footer.content
+
+    if (this.element.querySelector('[data-form-footer]')) {
+      this.element.querySelector('[data-form-footer]').replaceWith(element)
+    } else {
+      this.element.appendChild(element)
+    }
+  }
+
+  markAsCompleted(data) {
+    localStorage.setItem(`hello-form-${this.id}`, 'completed')
+    Hellotext.eventEmitter.dispatch('form:completed', { id: this.id, ...data })
+  }
+
+  get id() {
+    return this.data.id
+  }
+
+  get elementAttributes() {
+    return [
+      {
+        name: 'data-controller',
+        value: 'hellotext--form',
+      },
+      {
+        name: 'data-hello-form',
+        value: this.id,
+      },
+      {
+        name: 'data-hellotext--form-data-value',
+        value: JSON.stringify(this.data),
+      },
+      {
+        name: 'data-action',
+        value: 'hellotext--otp:verified->hellotext--form#completed',
+      },
+    ]
+  }
+
+  #findOrCreateComponent(selector, tag) {
+    const existingElement = this.element.querySelector(selector)
+
+    if (existingElement) {
+      return existingElement.cloneNode(true)
+    }
+
+    const createdElement = document.createElement(tag)
+    createdElement.setAttribute(selector.replace('[', '').replace(']', ''), '')
+
+    return createdElement
+  }
+}
+
+export { Form }

package/src/models/form_collection.js

@@ -0,0 +1,81 @@
+import Hellotext from '../hellotext.js'
+import API from '../api'
+
+import { Form } from './form'
+
+import { NotInitializedError } from '../errors'
+
+class FormCollection {
+  constructor() {
+    this.forms = []
+
+    this.includes = this.includes.bind(this)
+    this.excludes = this.excludes.bind(this)
+
+    this.add = this.add.bind(this)
+  }
+
+  collect() {
+    if(Hellotext.notInitialized) {
+      throw new NotInitializedError()
+    }
+
+    const formsIdsToFetch = this.#formIdsToFetch
+    if (formsIdsToFetch.length === 0) return
+
+    const promises = formsIdsToFetch.map(id => {
+      return API.forms.get(id).then(response => response.json())
+    })
+
+    if (!Hellotext.business.enabledWhitelist) {
+      console.warn(
+        'No whitelist has been configured. It is advised to whitelist the domain to avoid bots from submitting forms.',
+      )
+    }
+
+    Promise.all(promises)
+      .then(forms => forms.forEach(this.add))
+      .then(() => Hellotext.eventEmitter.dispatch('forms:collected', this))
+  }
+
+  forEach(callback) {
+    this.forms.forEach(callback)
+  }
+
+  map(callback) {
+    return this.forms.map(callback)
+  }
+
+  add(data) {
+    if (this.includes(data.id)) return
+    this.forms.push(new Form(data))
+  }
+
+  getById(id) {
+    return this.forms.find(form => form.id === id)
+  }
+
+  getByIndex(index) {
+    return this.forms[index]
+  }
+
+  includes(formId) {
+    return this.forms.some(form => form.id === formId)
+  }
+
+  excludes(id) {
+    return !this.includes(id)
+  }
+
+  get length() {
+    return this.forms.length
+  }
+
+  get #formIdsToFetch() {
+    return Array.from(document.querySelectorAll('[data-hello-form]'))
+      .map(form => form.dataset.helloForm)
+      .filter(this.excludes)
+  }
+}
+
+export { FormCollection }

package/src/models/index.js

@@ -0,0 +1,5 @@
+export { Business } from './business'
+export { Form } from './form'
+export { Query } from './query'
+export { Cookies } from './cookies'
+export { FormCollection } from './form_collection'

package/src/models/query.js

@@ -0,0 +1,33 @@
+import { Cookies } from './cookies'
+
+class Query {
+  static get inPreviewMode() {
+    return new this().inPreviewMode
+  }
+
+  constructor() {
+    this.urlSearchParams = new URLSearchParams(window.location.search)
+  }
+
+  get(param) {
+    return this.urlSearchParams.get(this.toHellotextParam(param))
+  }
+
+  has(param) {
+    return this.urlSearchParams.has(this.toHellotextParam(param))
+  }
+
+  get inPreviewMode() {
+    return this.has('preview')
+  }
+
+  get session() {
+    return this.get('session') || Cookies.get('hello_session')
+  }
+
+  toHellotextParam(param) {
+    return `hello_${param}`
+  }
+}
+
+export { Query }

package/styles/index.css

@@ -0,0 +1,32 @@
+form[data-hello-form] {
+  position: relative;
+
+  article {
+    [data-error-container] {
+      display: none;
+    }
+
+    &:has(input:invalid) {
+      [data-error-container] {
+        display: block;
+      }
+    }
+  }
+
+  [data-logo-container] {
+    display: flex;
+    justify-content: center;
+    align-items: flex-end;
+    position: absolute;
+    right: 1rem;
+    bottom: 1rem;
+
+    small {
+      margin: 0 .3rem;
+    }
+
+    [data-hello-brand] {
+      width: 4rem;
+    }
+  }
+}

package/webpack.config.js

@@ -1,18 +1,24 @@
 module.exports = {
   mode: 'production',
-  entry: ['whatwg-fetch', './lib/hellotext.js'],
+  entry: ['whatwg-fetch', '@hotwired/stimulus', './lib/index.js'],
   output: {
-    filename: 'hellotext.js'
+    filename: 'hellotext.js',
   },
   module: {
     rules: [
       {
         test: /\.m?js$/,
         exclude: [/node_modules/],
-        use: [{
-          loader: 'babel-loader',
-        }]
-      }
-    ]
-  }
-};
+        use: [
+          {
+            loader: 'babel-loader',
+          },
+        ],
+      },
+      {
+        test: /\.css$/i,
+        use: ['style-loader', 'css-loader'],
+      },
+    ],
+  },
+}

package/__tests__/event_test.js

@@ -1,21 +0,0 @@
-import Event from "../src/event"
-
-describe(".valid", function () {
-  it("is true when event name is a valid defined name", () => {
-    expect(Event.valid("session-set")).toEqual(true)
-  });
-
-  it("is false when event name is not defined", () =>  {
-    expect(Event.valid("undefined-event")).toEqual(false)
-  });
-});
-
-describe(".invalid", () => {
-  it("is true when event name is not defined", () =>  {
-    expect(Event.invalid("undefined-event")).toEqual(true)
-  });
-
-  it("is false when event name is a valid defined name", () => {
-    expect(Event.invalid("session-set")).toEqual(false)
-  });
-});

package/__tests__/query_test.js

@@ -1,13 +0,0 @@
-/**
- * @jest-environment jsdom
- */
-
-import Query from "../src/query";
-
-describe("#toHellotextParameter", () => {
-  it("prefixes the argument with hello_", () => {
-    const query = new Query()
-
-    expect(query.toHellotextParam("preview")).toEqual("hello_preview")
-  });
-})

package/src/event.js

@@ -1,15 +0,0 @@
-export default class Event {
-  static events = ["session-set"]
-
-  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
-  }
-}

package/src/eventEmitter.js

@@ -1,28 +0,0 @@
-export default class EventEmitter {
-  constructor() {
-    this.subscribers = {}
-  }
-
-  addSubscriber(eventName, callback) {
-    this.subscribers = {
-      ...this.subscribers,
-      [eventName]: this.subscribers[eventName] ? [...this.subscribers[eventName], callback] : [callback]
-    }
-  }
-
-  removeSubscriber(eventName, callback) {
-    if(this.subscribers[eventName]) {
-      this.subscribers[eventName] = this.subscribers[eventName].filter((cb) => cb !== callback)
-    }
-  }
-
-  emit(eventName, data) {
-    this.subscribers[eventName].forEach((subscriber) => {
-      subscriber(data)
-    })
-  }
-
-  get listeners() {
-    return Object.keys(this.subscribers).length !== 0
-  }
-}

package/src/query.js

@@ -1,21 +0,0 @@
-export default class Query {
-  constructor(urlQueries) {
-    this.urlSearchParams = new URLSearchParams(urlQueries)
-  }
-
-  get(param) {
-    return this.urlSearchParams.get(
-      this.toHellotextParam(param)
-    )
-  }
-
-  has(param) {
-    return this.urlSearchParams.has(
-      this.toHellotextParam(param)
-    )
-  }
-
-  toHellotextParam(param) {
-    return `hello_${param}`
-  }
-}