Forms (#17)

* dispatch completion event when attempting to mount a form that was completed previously

* remove the associated element

* update stored data in localStorage

* update readme for forms payload

* 1.8.2

* update tests

__tests__/models/form_test.js

@@ -76,7 +76,7 @@ describe('markAsCompleted', () => {
     const emit = jest.spyOn(Hellotext.eventEmitter, 'dispatch')
 
     form.markAsCompleted()
-    expect(emit).toHaveBeenCalledWith('form:completed', { id: 1 })
+    expect(emit).toHaveBeenCalled()
   })
 })
 

docs/forms.md

@@ -131,12 +131,16 @@ Hellotext.on('form:completed', (form) => {
 })
 
 {
+  state: 'completed',
+  completedAt: 1730114734999, // Timestamp when the form was completed
   id: "xxxxx", // Id of the form that has been completed
-  first_name: "Billy",
-  last_name: "Butcher",
-  email: "[email protected]",
-  phone: "+1234567890",
-  property_by_id[xxxxx]: "value"
+  data: {
+    first_name: "Billy",
+    last_name: "Butcher",
+    email: "[email protected]",
+    phone: "+1234567890",
+    property_by_id[xxxxx]: "value"
+  }
 }
 ```
 

lib/models/form.js

@@ -40,7 +40,11 @@ var Form = /*#__PURE__*/function () {
           ifCompleted = true
         } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
         if (ifCompleted && this.hasBeenCompleted) {
-          return;
+          var _this$element;
+          (_this$element = this.element) === null || _this$element === void 0 ? void 0 : _this$element.remove();
+          return _hellotext.default.eventEmitter.dispatch('form:completed', _objectSpread({
+            id: this.id
+          }, JSON.parse(localStorage.getItem("hello-form-".concat(this.id)))));
         }
         var firstStep = this.data.steps[0];
         this.buildHeader(firstStep.header);
@@ -112,13 +116,14 @@ var Form = /*#__PURE__*/function () {
   }, {
     key: "markAsCompleted",
     value: function markAsCompleted(data) {
-      localStorage.setItem("hello-form-".concat(this.id), JSON.stringify({
+      var payload = {
         state: 'completed',
-        data
-      }));
-      _hellotext.default.eventEmitter.dispatch('form:completed', _objectSpread({
-        id: this.id
-      }, data));
+        id: this.id,
+        data,
+        completedAt: new Date().getTime()
+      };
+      localStorage.setItem("hello-form-".concat(this.id), JSON.stringify(payload));
+      _hellotext.default.eventEmitter.dispatch('form:completed', payload);
     }
   }, {
     key: "hasBeenCompleted",

package.json

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

src/models/form.js

@@ -14,7 +14,12 @@ class Form {
 
   async mount({ ifCompleted = true } = {}) {
     if(ifCompleted && this.hasBeenCompleted) {
-      return
+      this.element?.remove()
+
+      return Hellotext.eventEmitter.dispatch('form:completed', {
+        id: this.id,
+        ...JSON.parse(localStorage.getItem(`hello-form-${this.id}`)),
+      })
     }
 
     const firstStep = this.data.steps[0]
@@ -91,9 +96,15 @@ class Form {
   }
 
   markAsCompleted(data) {
-    localStorage.setItem(`hello-form-${this.id}`, JSON.stringify({ state: 'completed', data }))
+    const payload = {
+      state: 'completed',
+      id: this.id,
+      data,
+      completedAt: new Date().getTime(),
+    }
 
-    Hellotext.eventEmitter.dispatch('form:completed', { id: this.id, ...data })
+    localStorage.setItem(`hello-form-${this.id}`, JSON.stringify(payload))
+    Hellotext.eventEmitter.dispatch('form:completed', payload)
   }
 
   get hasBeenCompleted() {