embed: add e-signature product (#150)

* assets: add `e-signature.html` file * assets: add `js/e-signature.js` file * components: add `signature_pad` component * redesign: add `e_signature` product, improve error handling * feat(eSignature): add html / js files for eSignature * styles: add styles for eSignature * tests: add tests for eSignature product * deps(components): add `signature_pad` as a dependency for components * redesign(SignaturePad): make upload optional etc. - change reset icon - make uploads optional (off by default, enabled using `allow-upload` attribute - show preview of images uploaded, modify reset to match that - reinstate JPG images * enh(eSignature): embed up to signature review screen * redesign: use single name field, disable button until checkbox checked, etc * format: run prettier through files * enh: work on back buttons * enh: add submitSignature method * format: fix lint error * fix: fix typos and more * fix: add explicit `Content-Type` header, fix others * enh: add failure / progress screens * fix: change `Content-Type` to `Content-type` header * redesign: `image` is a blob object * redesign: pass file and not blob, use toISOString for date * redesign: fix file constructor * enh: allow the browser set the Content-Type header * redesign: add upload progress and upload failed screens * fix: SignaturePad captures full drawn signature * fix: signature-previews with max-width of 10rem * enh(SignaturePad): support jpeg uploads * enh(SignaturePad): restrict upload preview to one file * styles: change icon sizes for back and close buttons * redesign: use top offset, instead of center * fix(BackNavigation): make `setActiveScreen` direction aware * components: create component for navigation * redesign: use navigation component in eSignature * redesign: resize checkbox input size, fix alignment * stories: add storybook page for SignaturePad component * redesign(SignaturePad): reset signature on pad should float * fix(SignaturePad): no more offset for SignaturePad * redesign: calculate canvas width relative to container * deps: export signature-pad component * fix: fix lint errors
smileidentity · Jan 25, 2024 · 5027ff7 · 5027ff7
1 parent 8595c68
commit 5027ff7
Show file tree

Hide file tree

Showing 11 changed files with 1,543 additions and 39 deletions.
diff --git a/packages/embed/cypress/fixtures/e_signature_documents.json b/packages/embed/cypress/fixtures/e_signature_documents.json
@@ -0,0 +1,16 @@
+{
+    "documents": [
+        {
+            "id": "07ef4595-aaed-4597-b6af-444986ae4565",
+            "link": "https://smile-signable-document-development.s3.us-west-2.amazonaws.com/development/921/SINGLE_USE/caa31f97-0056-4672-99de-2e1b1c439e82-privacy%20policy.pdf?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=ASIA4OAOFXPAHPEZQXW5%2F20231202%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20231202T190423Z&X-Amz-Expires=900&X-Amz-Security-Token=IQoJb3JpZ2luX2VjEMv%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEaCXVzLXdlc3QtMiJHMEUCIQDx6xxYPXeC6Nm1O6NkDRWNskY6jpWnTo0rhGsSq%2FhLpQIgP3rVKh1%2B0Mm8tceD%2BXXRPeyRCZHysxZNw6YFxhN0EXQqpwMINBADGgw4NTQ3MjgyMjc3NzYiDBIuWCw54%2BS8bXD4iiqEAygeRz2MdUibORe2HlZ7I53MftfqQdqtUZ6CCzSee%2F53ERKuFuQ59SfeEX6KwEpfDsgKxAJsSE%2B5DWdFz3F4KLXeaVb9Ri9EHl7%2BYfYFbFUe25eCk1r0%2FewDpEgDlYr7KSuV84oNCJDmHxxa%2BsMcG6PvfBJ26UNUk5MhHfYBaqhjLTHSlFODgu%2FwYalDEcEcyK5oiJfr3%2BUx8KcNlpQVx2ep%2BbNidaVX30K2lIGqkQ9BFTjYGGzXlJ2JuNoTQjNdobptZdL8lawO1MuXaBJLdFy3AMSbcB8Bp4v39N1HA5q5aVd3odt0JEBpJ0H9pf%2BBa%2BNsS5kaMXwO0w0xjc7SLDHSClMexzwf4vXqLHMW6oPbGvUMIwmqpkYVSkhPPBBDOpEO%2FezO1Eco5shWXBByJjLrAC8wyQcWxX7TS7M9dZAjKSNSAl6D0aHYTgDhCkyJiWFfMHFF4AAR0TurBZO7LMiPoU97D7CvI7lCT0%2FTSFF1c5%2B%2B5fD7vP0PKlDF%2B4o5bqp7%2Bs8wtP%2BtqwY6nQFJodwV1R2DKbSt%2BkrCRHKB8AsdRa2mw8r59BO7ZE3x7m%2FVl61yKoqq5F0G5VW1vr7rT3OHdrUP9aOQaLHtWpKpUby4H5LGAjSZzYkBEO6MunuQ79L6lZVBe23zE2NMxGdxkWCuuj5SNP12ewlslnC1aJBN38StdO520j%2Fs9ayIvtgsmZWkLC99Wv8Sb4xpAz2paN7a%2FTwFPqAnkZVD&X-Amz-Signature=d157d3439c22a5832038af7a63928b4dec62b4326742184f88323556ebcf2fe7&X-Amz-SignedHeaders=host&x-id=GetObject",
+            "name": "privacy policy",
+            "size": 186790
+        },
+        {
+            "id": "6df1ceb5-72e5-4e38-9eef-66ee085aec17",
+            "link": "https://smile-signable-document-development.s3.us-west-2.amazonaws.com/development/921/SINGLE_USE/fbedce72-58f7-45c6-9e47-240e278719a7-terms%20and%20conditions.pdf?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=ASIA4OAOFXPAHPEZQXW5%2F20231202%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20231202T190423Z&X-Amz-Expires=900&X-Amz-Security-Token=IQoJb3JpZ2luX2VjEMv%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEaCXVzLXdlc3QtMiJHMEUCIQDx6xxYPXeC6Nm1O6NkDRWNskY6jpWnTo0rhGsSq%2FhLpQIgP3rVKh1%2B0Mm8tceD%2BXXRPeyRCZHysxZNw6YFxhN0EXQqpwMINBADGgw4NTQ3MjgyMjc3NzYiDBIuWCw54%2BS8bXD4iiqEAygeRz2MdUibORe2HlZ7I53MftfqQdqtUZ6CCzSee%2F53ERKuFuQ59SfeEX6KwEpfDsgKxAJsSE%2B5DWdFz3F4KLXeaVb9Ri9EHl7%2BYfYFbFUe25eCk1r0%2FewDpEgDlYr7KSuV84oNCJDmHxxa%2BsMcG6PvfBJ26UNUk5MhHfYBaqhjLTHSlFODgu%2FwYalDEcEcyK5oiJfr3%2BUx8KcNlpQVx2ep%2BbNidaVX30K2lIGqkQ9BFTjYGGzXlJ2JuNoTQjNdobptZdL8lawO1MuXaBJLdFy3AMSbcB8Bp4v39N1HA5q5aVd3odt0JEBpJ0H9pf%2BBa%2BNsS5kaMXwO0w0xjc7SLDHSClMexzwf4vXqLHMW6oPbGvUMIwmqpkYVSkhPPBBDOpEO%2FezO1Eco5shWXBByJjLrAC8wyQcWxX7TS7M9dZAjKSNSAl6D0aHYTgDhCkyJiWFfMHFF4AAR0TurBZO7LMiPoU97D7CvI7lCT0%2FTSFF1c5%2B%2B5fD7vP0PKlDF%2B4o5bqp7%2Bs8wtP%2BtqwY6nQFJodwV1R2DKbSt%2BkrCRHKB8AsdRa2mw8r59BO7ZE3x7m%2FVl61yKoqq5F0G5VW1vr7rT3OHdrUP9aOQaLHtWpKpUby4H5LGAjSZzYkBEO6MunuQ79L6lZVBe23zE2NMxGdxkWCuuj5SNP12ewlslnC1aJBN38StdO520j%2Fs9ayIvtgsmZWkLC99Wv8Sb4xpAz2paN7a%2FTwFPqAnkZVD&X-Amz-Signature=889ccd4c0be2eb3fdc868b534c31c51c2c084542b44a89f37a4738203bff5d52&X-Amz-SignedHeaders=host&x-id=GetObject",
+            "name": "terms and conditions",
+            "size": 384244
+        }
+    ]
+}
diff --git a/packages/embed/cypress/fixtures/e_signature_documents_no_file.json b/packages/embed/cypress/fixtures/e_signature_documents_no_file.json
@@ -0,0 +1,3 @@
+{
+    "error": "File not found for ID(s) 6df1ceb5-72e5-4e38-9eef-66ee085aec19"
+}
diff --git a/packages/embed/cypress/fixtures/e_signature_documents_no_ids.json b/packages/embed/cypress/fixtures/e_signature_documents_no_ids.json
@@ -0,0 +1,4 @@
+{
+    "code": "2413",
+    "error": "\"ids\" does not contain 1 required value(s)"
+}
diff --git a/packages/embed/cypress/pages/e_signature.html b/packages/embed/cypress/pages/e_signature.html
@@ -0,0 +1,57 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+      }
+
+      body {
+        max-width: 100%;
+        min-height: 100%;
+      }
+    </style>
+  </head>
+
+  <body>
+    <script src="js/script.min.js"></script>
+
+    <script>
+      function displayError(error) {
+        const errorDiv = document.createElement("div");
+        errorDiv.setAttribute("class", "validation-message");
+        errorDiv.textContent = error;
+        document.body.appendChild(errorDiv);
+      }
+
+      SmileIdentity({
+        token:
+          "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJwYXJ0bmVyX3BhcmFtcyI6eyJ1c2VyX2lkIjoid2ViLXRva2VuLXRlc3QtdXNlci0wMDEiLCJqb2JfaWQiOiJ3ZWItdG9rZW4tam9iLTEyMyIsImpvYl90eXBlIjo1fSwiY2FsbGJhY2tfdXJsIjoiaHR0cHM6Ly93ZWJob29rLnNpdGUvMWFhYTdhN2ItYWNjYi00MGFjLTg2NDMtZmQ4YTg3MDNlOWJlIiwiaWF0IjoxNjQ2OTQxNTQ5LCJleHAiOjE2NDg1ODg0ODN9.D83B4jSgQGJfSnQ5xALKea48okutLpbTcqojJTk4iGI",
+        product: "e_signature",
+        document_ids: ['07ef4595-aaed-4597-b6af-444986ae4565', '6df1ceb5-72e5-4e38-9eef-66ee085aec17'],
+        callback_url:
+          "https://webhook.site/1aaa7a7b-accb-40ac-8643-fd8a8703e9be",
+        environment: "development",
+        partner_details: {
+          name: "Test Org",
+          logo_url: "https://portal.smileidentity.com/favicon.ico",
+          partner_id: "212",
+          policy_url: "https://smileidentity.com/privacy-policy",
+          theme_color: "#000",
+        },
+        onSuccess: () => {},
+        onClose: () => {
+          displayError("User triggered this close action");
+        },
+        onError: (data) => {
+          displayError(JSON.stringify(data, null, 2));
+        },
+      });
+    </script>
+  </body>
+</html>
diff --git a/packages/embed/cypress/pages/e_signature_no_file.html b/packages/embed/cypress/pages/e_signature_no_file.html
@@ -0,0 +1,58 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+      }
+
+      body {
+        max-width: 100%;
+        min-height: 100%;
+      }
+    </style>
+  </head>
+
+  <body>
+    <script src="js/script.min.js"></script>
+
+    <script>
+      function displayError(error) {
+        const errorDiv = document.createElement("div");
+        errorDiv.setAttribute("class", "validation-message");
+        errorDiv.textContent = error;
+        document.body.appendChild(errorDiv);
+      }
+
+      SmileIdentity({
+        token:
+          "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJwYXJ0bmVyX3BhcmFtcyI6eyJ1c2VyX2lkIjoid2ViLXRva2VuLXRlc3QtdXNlci0wMDEiLCJqb2JfaWQiOiJ3ZWItdG9rZW4tam9iLTEyMyIsImpvYl90eXBlIjo1fSwiY2FsbGJhY2tfdXJsIjoiaHR0cHM6Ly93ZWJob29rLnNpdGUvMWFhYTdhN2ItYWNjYi00MGFjLTg2NDMtZmQ4YTg3MDNlOWJlIiwiaWF0IjoxNjQ2OTQxNTQ5LCJleHAiOjE2NDg1ODg0ODN9.D83B4jSgQGJfSnQ5xALKea48okutLpbTcqojJTk4iGI",
+        product: "e_signature",
+        document_ids: ['07ef4595-aaed-4597-b6af-444986ae4565', '6df1ceb5-72e5-4e38-9eef-66ee085aec17'],
+        callback_url:
+          "https://webhook.site/1aaa7a7b-accb-40ac-8643-fd8a8703e9be",
+        environment: "development",
+        partner_details: {
+          name: "Test Org",
+          logo_url: "https://portal.smileidentity.com/favicon.ico",
+          partner_id: "212",
+          policy_url: "https://smileidentity.com/privacy-policy",
+          theme_color: "#000",
+        },
+        onSuccess: () => {},
+        onClose: () => {
+          displayError("User triggered this close action");
+        },
+        onError: (data) => {
+          console.log(data);
+          displayError(JSON.stringify(data, null, 2));
+        },
+      });
+    </script>
+  </body>
+</html>
diff --git a/packages/embed/cypress/pages/e_signature_no_ids.html b/packages/embed/cypress/pages/e_signature_no_ids.html
@@ -0,0 +1,56 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+      }
+
+      body {
+        max-width: 100%;
+        min-height: 100%;
+      }
+    </style>
+  </head>
+
+  <body>
+    <script src="js/script.min.js"></script>
+
+    <script>
+      function displayError(error) {
+        const errorDiv = document.createElement("div");
+        errorDiv.setAttribute("class", "validation-message");
+        errorDiv.textContent = error;
+        document.body.appendChild(errorDiv);
+      }
+
+      SmileIdentity({
+        token:
+          "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJwYXJ0bmVyX3BhcmFtcyI6eyJ1c2VyX2lkIjoid2ViLXRva2VuLXRlc3QtdXNlci0wMDEiLCJqb2JfaWQiOiJ3ZWItdG9rZW4tam9iLTEyMyIsImpvYl90eXBlIjo1fSwiY2FsbGJhY2tfdXJsIjoiaHR0cHM6Ly93ZWJob29rLnNpdGUvMWFhYTdhN2ItYWNjYi00MGFjLTg2NDMtZmQ4YTg3MDNlOWJlIiwiaWF0IjoxNjQ2OTQxNTQ5LCJleHAiOjE2NDg1ODg0ODN9.D83B4jSgQGJfSnQ5xALKea48okutLpbTcqojJTk4iGI",
+        product: "e_signature",
+        callback_url:
+          "https://webhook.site/1aaa7a7b-accb-40ac-8643-fd8a8703e9be",
+        environment: "sandbox",
+        partner_details: {
+          name: "Test Org",
+          logo_url: "https://portal.smileidentity.com/favicon.ico",
+          partner_id: "212",
+          policy_url: "https://smileidentity.com/privacy-policy",
+          theme_color: "#000",
+        },
+        onSuccess: () => {},
+        onClose: () => {
+          displayError("User triggered this close action");
+        },
+        onError: (data) => {
+          displayError(JSON.stringify(data, null, 2));
+        },
+      });
+    </script>
+  </body>
+</html>
diff --git a/packages/embed/cypress/tests/e-signature.cy.cjs b/packages/embed/cypress/tests/e-signature.cy.cjs
@@ -0,0 +1,76 @@
+describe("eSignature", () => {
+  describe("with no document ids passed", () => {
+    beforeEach(() => {
+      cy.visit("/e_signature_no_ids");
+    });
+
+    it("should show an error message", () => {
+      cy.get("iframe").should("not.exist");
+      cy.get(".validation-message").should("be.visible");
+      cy.get(".validation-message").should(
+        "contain",
+        "`document_ids` field is required for `e_signature` ",
+      );
+    });
+  });
+
+  describe("with no file found", () => {
+    beforeEach(() => {
+      cy.intercept(
+        {
+          method: "OPTIONS",
+          url: "*v1/documents**",
+        },
+        {
+          statusCode: 204,
+          headers: {
+            "Access-Control-Allow-Origin": "*",
+            "Access-Control-Allow-Methods": "OPTIONS,GET,POST",
+            "Access-Control-Allow-Headers": "*",
+          },
+        },
+      );
+
+      cy.intercept(
+        {
+          method: "GET",
+          url: "*v1/documents**",
+        },
+        {
+          statusCode: 400,
+          fixture: "e_signature_documents_no_file.json",
+        },
+      );
+
+      cy.visit("/e_signature_no_file");
+    });
+
+    it("should show an error message", () => {
+      cy.get("iframe").should("not.exist");
+      cy.get(".validation-message").should("be.visible");
+      cy.get(".validation-message").should("contain", "File not found");
+    });
+  });
+
+  describe.only("with both document ids valid", () => {
+    beforeEach(() => {
+      cy.intercept(
+        {
+          method: "GET",
+          url: "*v1/documents**",
+        },
+        {
+          statusCode: 200,
+          fixture: "e_signature_documents.json",
+        },
+      );
+      cy.visit("/e_signature");
+    });
+
+    it("should proceed to upload a signature", () => {
+      cy.get("iframe").should("exist");
+
+      cy.getIFrameBody().find("#entry-screen").should("be.visible");
+    });
+  });
+});
diff --git a/packages/embed/src/css/styles.css b/packages/embed/src/css/styles.css
@@ -91,21 +91,14 @@ main {
   padding: 2rem;
   overflow-y: scroll;
   position: absolute;
-  max-height: 100vh;
 }
 
 @media screen and (min-width: 40rem) {
   main {
     padding: 2rem 5rem;
-    top: 50%;
+    top: 4rem;
     left: 50%;
-    transform: translate(-50%, -50%);
-  }
-}
-
-@media screen and (min-width: 80rem) {
-  main {
-    max-height: 80%;
+    transform: translateX(-50%);
   }
 }
 
@@ -304,6 +297,20 @@ button[data-type="icon"] {
   justify-content: end !important;
 }
 
+.checkbox-input {
+	display: flex;
+}
+
+.checkbox-input input {
+	inline-size: 1.25rem;
+	block-size: 1.25rem;
+}
+
+.checkbox-input label {
+	margin-inline-start: .5rem;
+	text-align: initial;
+}
+
 .nav {
   display: flex;
   justify-content: space-between;
@@ -319,8 +326,7 @@ button[data-type="icon"] {
 }
 
 .back-button-text {
-  font-size: 11px;
-  line-height: 11px;
+  line-height: 1;
   color: rgb(21, 31, 114);
 }
 
@@ -558,3 +564,61 @@ smileid-combobox-option[aria-selected] {
 smileid-combobox-option[hidden] {
   display: none;
 }
+
+.document-tips {
+	margin-block-start: 1.5rem;
+	display: flex;
+	align-items: center;
+	text-align: initial;
+}
+
+.document-tips svg {
+	flex-shrink: 0;
+	margin-inline-end: 1rem;
+}
+
+.document-tips p {
+	margin-block: 0;
+}
+
+.document-tips p:first-of-type {
+	font-size; 1.875rem;
+	font-weight: bold
+}
+
+[type='file'] {
+	display: none;
+}
+
+.document-tips > * + * {
+	margin-inline-start; 1em;
+}
+
+.document-list {
+	padding: 0px;
+}
+
+.document-list li {
+	list-style: none;
+	background-color: #F9F0E7;
+	padding: 1rem;
+	border-radius: .5rem;
+}
+
+.document-list li + li {
+	margin-block-start: 1rem;
+}
+
+.document-list a {
+	color: initial;
+	text-decoration: none;
+	margin: 0px;
+}
+
+smileid-signature-pad {
+	margin-inline: auto;
+}
+
+[id='preview-signature'] {
+  max-inline-size: 10rem;
+}