Form mounting when completed

__tests__/models/form_test.js

@@ -12,11 +12,63 @@ describe('id', () => {
   })
 })
 
+describe('mount', () => {
+  const data = {
+    id: 1,
+    steps: [
+      {
+        header: { content: 'Header' },
+        inputs: [],
+        button: { content: 'Button' },
+        footer: { content: 'Footer' },
+      },
+    ]
+  }
+
+  const form = new Form(data)
+
+  beforeEach(() => {
+    Hellotext.business = {
+      locale: {
+        white_label: {
+          powered_by: 'Powered by Hellotext',
+        }
+      },
+      features: {
+        white_label: false,
+      }
+    }
+
+    document.body.innerHTML = ''
+  })
+
+  it('mounts the form', () => {
+    form.mount()
+    expect(document.body.querySelector('form')).not.toBeNull()
+  })
+
+  describe('when form has been completed', () => {
+    beforeEach(() => {
+      localStorage.setItem('hello-form-1', 'true')
+    })
+
+    it('does not mount the form automatically', () => {
+      form.mount()
+      expect(document.body.querySelector('form')).toBeNull()
+    })
+
+    it('mounts the form when ifCompleted is false', () => {
+      form.mount({ ifCompleted: false })
+      expect(document.body.querySelector('form')).not.toBeNull()
+    })
+  })
+})
+
 describe('markAsCompleted', () => {
   it('saves the form as completed in localStorage', () => {
     const form = new Form({ id: 1 })
     form.markAsCompleted()
-    expect(localStorage.getItem('hello-form-1')).toEqual('completed')
+    expect(localStorage.getItem('hello-form-1')).not.toBeNull()
   })
 
   it('emits a form:completed event', () => {

docs/forms.md

@@ -63,6 +63,18 @@ Hellotext looks for a `form` element with the `data-hello-form` attribute and mo
 If this condition is not met, Hellotext creates the form manually and appends it to the body of the document.
 We recommend to make the criteria met to ensure the form is loaded into an expected place in your page.
 
+Hellotext provides seamless integration with your website, once forms are completed, they are stored in the `localStorage`,
+this ensures that the form is not displayed again to the user if they have already completed it. Of course, sometimes it may be desired to 
+show the form to a user regardless if they have completed the form or not, in these cases, you can adjust the way you call `Form.mount()`,
+
+```javascript
+Hellotext.on('forms:collected', forms => {
+  forms.getByIndex(0).mount({ ifCompleted: false })
+})
+```
+
+This will mount the form regardless if the user has completed the form or not.
+
 ### Validation
 
 Hellotext automatically validates the form inputs based on how they were configured on the dashboard

lib/api/forms.js

@@ -31,7 +31,9 @@ var FormsAPI = /*#__PURE__*/function () {
     key: "get",
     value: function () {
       var _get = _asyncToGenerator(function* (id) {
-        return fetch("".concat(this.endpoint, "/").concat(id), {
+        var url = new URL("".concat(this.endpoint, "/").concat(id));
+        url.searchParams.append('session', _hellotext.default.session);
+        return fetch(url, {
           method: 'GET',
           headers: _hellotext.default.headers
         });

lib/models/form.js

@@ -36,6 +36,12 @@ var Form = /*#__PURE__*/function () {
     key: "mount",
     value: function () {
       var _mount = _asyncToGenerator(function* () {
+        var {
+          ifCompleted = true
+        } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+        if (ifCompleted && this.hasBeenCompleted) {
+          return;
+        }
         var firstStep = this.data.steps[0];
         this.buildHeader(firstStep.header);
         this.buildInputs(firstStep.inputs);
@@ -106,11 +112,19 @@ var Form = /*#__PURE__*/function () {
   }, {
     key: "markAsCompleted",
     value: function markAsCompleted(data) {
-      localStorage.setItem("hello-form-".concat(this.id), 'completed');
+      localStorage.setItem("hello-form-".concat(this.id), JSON.stringify({
+        state: 'completed',
+        data
+      }));
       _hellotext.default.eventEmitter.dispatch('form:completed', _objectSpread({
         id: this.id
       }, data));
     }
+  }, {
+    key: "hasBeenCompleted",
+    get: function get() {
+      return localStorage.getItem("hello-form-".concat(this.id)) !== null;
+    }
   }, {
     key: "id",
     get: function get() {

package.json

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

src/api/forms.js

@@ -9,7 +9,10 @@ export default class FormsAPI {
   }
 
   static async get(id) {
-    return fetch(`${this.endpoint}/${id}`, {
+    const url = new URL(`${this.endpoint}/${id}`)
+    url.searchParams.append('session', Hellotext.session)
+
+    return fetch(url, {
       method: 'GET',
       headers: Hellotext.headers,
     })

src/models/form.js

@@ -12,7 +12,11 @@ class Form {
       document.createElement('form')
   }
 
-  async mount() {
+  async mount({ ifCompleted = true } = {}) {
+    if(ifCompleted && this.hasBeenCompleted) {
+      return
+    }
+
     const firstStep = this.data.steps[0]
 
     this.buildHeader(firstStep.header)
@@ -87,10 +91,15 @@ class Form {
   }
 
   markAsCompleted(data) {
-    localStorage.setItem(`hello-form-${this.id}`, 'completed')
+    localStorage.setItem(`hello-form-${this.id}`, JSON.stringify({ state: 'completed', data }))
+
     Hellotext.eventEmitter.dispatch('form:completed', { id: this.id, ...data })
   }
 
+  get hasBeenCompleted() {
+    return localStorage.getItem(`hello-form-${this.id}`) !== null
+  }
+
   get id() {
     return this.data.id
   }