Develop -> Master

package.json

@@ -32,31 +32,31 @@
   "homepage": "https://github.com/hellosign/hellosign-embedded",
   "dependencies": {
     "common-tags": "^1.8.0",
-    "debug": "^3.2.5",
+    "debug": "^4.1.0",
     "tiny-emitter": "^2.0.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.1.2",
+    "@babel/core": "^7.1.6",
     "@babel/plugin-proposal-class-properties": "^7.1.0",
     "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
-    "@babel/preset-env": "^7.1.0",
-    "@hellosign/eslint-config": "^1.3.1",
+    "@babel/preset-env": "^7.1.6",
+    "@hellosign/eslint-config": "^1.4.0",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.0.1",
     "babel-jest": "^23.6.0",
     "babel-loader": "^8.0.4",
-    "css-loader": "^1.0.0",
-    "eslint": "^5.6.1",
-    "eslint-plugin-compat": "^2.6.1",
+    "css-loader": "^1.0.1",
+    "eslint": "^5.9.0",
+    "eslint-plugin-compat": "^2.6.3",
     "jest": "^23.6.0",
-    "jest-runner-eslint": "^0.6.0",
-    "node-sass": "^4.9.3",
+    "jest-runner-eslint": "^0.7.1",
+    "node-sass": "^4.11.0",
     "sass-loader": "^7.1.0",
     "standard-version": "^4.4.0",
-    "style-loader": "^0.23.0",
-    "url-polyfill": "^1.0.14",
+    "style-loader": "^0.23.1",
+    "url-polyfill": "^1.1.0",
     "url-search-params-polyfill": "^5.0.0",
-    "webpack": "^4.20.2",
+    "webpack": "^4.26.0",
     "webpack-cli": "^3.1.2"
   },
   "files": [

src/embedded.js

@@ -77,14 +77,6 @@ class HelloSign extends Emitter {
    */
   _config = null;
 
-  /**
-   * The embedded flow type.
-   *
-   * @type {?string}
-   * @private
-   */
-  _embeddedType = null;
-
   /**
    * The iFrame URL object.
    *
@@ -117,6 +109,14 @@ class HelloSign extends Emitter {
    */
   _isOpen = false;
 
+  /**
+   * Whether the app is ready or not.
+   *
+   * @type {boolean}
+   * @private
+   */
+  _isReady = false;
+
   /**
    * @type {Function}
    * @private
@@ -129,6 +129,12 @@ class HelloSign extends Emitter {
    */
   _onInitTimeout = this._onInitTimeout.bind(this);
 
+  /**
+   * @type {Function}
+   * @private
+   */
+  _onBeforeUnload = this._onBeforeUnload.bind(this);
+
   /**
    * @type {Function}
    * @private
@@ -411,23 +417,6 @@ class HelloSign extends Emitter {
     this._iFrameURL = frameURL;
   }
 
-  /**
-   * Updates the type of embedded request base on the URL.
-   *
-   * @param {string} url
-   * @returns {void}
-   * @private
-   */
-  _updateEmbeddedType(url) {
-    if (url.includes('embeddedSign')) {
-      this._embeddedType = settings.types.EMBEDDED_SIGN;
-    } else if (url.includes('embeddedTemplate')) {
-      this._embeddedType = settings.types.EMBEDDED_TEMPLATE;
-    } else if (url.includes('embeddedRequest')) {
-      this._embeddedType = settings.types.EMBEDDED_REQUEST;
-    }
-  }
-
   /**
    * Renders the HelloSign Embedded markup.
    *
@@ -524,6 +513,19 @@ class HelloSign extends Emitter {
     targetWindow.postMessage(msg, targetOrigin);
   }
 
+  /**
+   * Sends a cancel request message to the app.
+   *
+   * @private
+   */
+  _sendCancelRequestMessage() {
+    debug.info('sending cancel request message');
+
+    this._sendMessage({
+      type: settings.messages.USER_CANCEL_REQUEST,
+    });
+  }
+
   /**
    * Sends the configuration message to the app.
    *
@@ -602,13 +604,15 @@ class HelloSign extends Emitter {
   }
 
   /**
-   * Starts the initialization timeout timer if this
-   * embedded flow is for embedded signing.
+   * Starts the initialization timeout timer if the workflow
+   * is embedded signing.
    *
    * @private
    */
   _maybeStartInitTimeout() {
-    if (this._embeddedType === settings.types.EMBEDDED_SIGN) {
+    if (this._iFrameURL.href.includes('embeddedSign')) {
+      // Start the initialization timeout because this is
+      // embedded signing.
       this._startInitTimeout();
     }
   }
@@ -649,10 +653,12 @@ class HelloSign extends Emitter {
   _appDidInitialize(payload) {
     debug.info('app was initialized');
 
-    this.emit(settings.events.READY, payload);
+    this._isReady = true;
 
     this._sendConfigurationMessage();
     this._clearInitTimeout();
+
+    this.emit(settings.events.READY, payload);
   }
 
   /**
@@ -845,7 +851,11 @@ class HelloSign extends Emitter {
     if (elem.classList.contains(settings.classNames.MODAL_CLOSE_BTN)) {
       evt.preventDefault();
 
-      this._userDidCancelRequest();
+      if (this._isReady) {
+        this._sendCancelRequestMessage();
+      } else {
+        this.close();
+      }
     }
   }
 
@@ -870,6 +880,29 @@ class HelloSign extends Emitter {
     this.close();
   }
 
+  /**
+   * Called when the user navigates away from the page in
+   * some way. Although modern browsers will likely block
+   * this message, the browser may still natively confirm
+   * with the user if they want to leave or stay on the
+   * page.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload
+   * @param {BeforeUnloadEvent} evt
+   * @private
+   */
+  _onBeforeUnload(evt) {
+    if (this._isReady) {
+      /* eslint-disable-next-line no-restricted-globals */
+      if (!confirm('Are you sure you want to close this signature request? You will lose your changes.')) {
+        evt.preventDefault();
+
+        // Chrome requires returnValue to be set.
+        evt.returnValue = '';
+      }
+    }
+  }
+
   /**
    * Called when a message is received by the window.
    * Validates the message origin and delegates to the
@@ -997,17 +1030,16 @@ class HelloSign extends Emitter {
     }
 
     this._updateFrameUrl(url);
-    this._updateEmbeddedType(url);
     this._appendMarkup();
     this._maybeStartInitTimeout();
 
     this._isOpen = true;
 
     window.addEventListener('message', this._onMessage);
+    window.addEventListener('beforeunload', this._onBeforeUnload);
 
     this.emit(settings.events.OPEN, {
-      iFrameUrl: this._iFrameURL.href,
-      url,
+      url: this._iFrameURL.href,
     });
   }
 
@@ -1036,12 +1068,13 @@ class HelloSign extends Emitter {
 
     this._config = null;
     this._baseEl = null;
-    this._embeddedType = null;
     this._iFrameEl = null;
     this._iFrameURL = null;
     this._isOpen = false;
+    this._isReady = false;
 
     window.removeEventListener('message', this._onMessage);
+    window.removeEventListener('beforeunload', this._onBeforeUnload);
 
     this.emit(settings.events.CLOSE);
   }
@@ -1083,6 +1116,14 @@ class HelloSign extends Emitter {
   get isOpen() {
     return this._isOpen;
   }
+
+  /**
+   * @returns {boolean}
+   * @public
+   */
+  get isReady() {
+    return this._isReady;
+  }
 }
 
 export default HelloSign;