refactor: extract totp-consent to components package (#143)

* refactor: move combobox component to components package * ci: deploy preview on PRs to all branches * deps: add `@smileid/components` as dependency of `@smileid/embed` * refactor: extract `end-user-consent` component to `components` package * refactor: extract totp-consent to components package * refactor: use `<totp-consent>` as the markup * refactor: rename `totp-consent` in tests
smileidentity · Nov 26, 2023 · 3931f3e · 3931f3e
1 parent a9f2cc6
commit 3931f3e
Show file tree

Hide file tree

Showing 9 changed files with 31 additions and 18 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/components/end-user-consent/src/EndUserConsent.js b/packages/components/end-user-consent/src/EndUserConsent.js
@@ -480,7 +480,7 @@ function templateString() {
       </section>
     </div>
 
-    <totp-consent-app
+    <totp-consent
       hidden
       base-url='${this.baseUrl}'
       country='${this.country}'
@@ -492,7 +492,7 @@ function templateString() {
       partner-name='${this.partnerName}'
       token='${this.token}'
     >
-    </totp-consent-app>
+    </totp-consent>
 
     <div hidden id='consent-rejected-screen' class='flow'>
       <section class='flow center'>
@@ -674,7 +674,7 @@ class EndUserConsent extends HTMLElement {
     this.shadowRoot.appendChild(template.content.cloneNode(true));
 
     this.consentScreen = this.shadowRoot.querySelector("#consent-screen");
-    this.totpConsentApp = this.shadowRoot.querySelector("totp-consent-app");
+    this.totpConsentApp = this.shadowRoot.querySelector("totp-consent");
     this.consentRejectedScreen = this.shadowRoot.querySelector(
       "#consent-rejected-screen",
     );

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -5,9 +5,15 @@
 	"exports": {
 		".": "./index.js",
 		"./combobox": "./combobox/src/index.js",
-		"./end-user-consent": "./end-user-consent/src/index.js"
+		"./end-user-consent": "./end-user-consent/src/index.js",
+		"./totp-consent": "./totp-consent/src/index.js"
 	},
 	"description": "A collection of Web Components used by SmileID",
-	"keywords": [ "Web Components" ],
-	"author": "SmileID <[email protected]> (https://usesmileid.com)"
+	"keywords": [
+		"Web Components"
+	],
+	"author": "SmileID <[email protected]> (https://usesmileid.com)",
+	"dependencies": {
+		"validate.js": "^0.13.1"
+	}
 }
diff --git a/...embed/src/js/components/TotpConsentApp.js → ...omponents/totp-consent/src/TotpConsent.js b/...embed/src/js/components/TotpConsentApp.js → ...omponents/totp-consent/src/TotpConsent.js
@@ -504,7 +504,7 @@ function markup() {
 	`;
 }
 
-class TotpBasedConsent extends HTMLElement {
+class TotpConsent extends HTMLElement {
   constructor() {
     super();
 
@@ -923,4 +923,10 @@ class TotpBasedConsent extends HTMLElement {
   }
 }
 
-export default TotpBasedConsent;
+if ("customElements" in window) {
+  window.customElements.define('totp-consent', TotpConsent);
+}
+
+export {
+  TotpConsent,
+};
diff --git a/packages/components/totp-consent/src/index.js b/packages/components/totp-consent/src/index.js
@@ -0,0 +1,3 @@
+export {
+  TotpConsent
+} from './TotpConsent';
diff --git a/packages/embed/cypress/support/commands.js b/packages/embed/cypress/support/commands.js
@@ -196,7 +196,7 @@ Cypress.Commands.add("getTotpConsentApp", () => {
   cy.getIFrameBody()
     .find("end-user-consent")
     .shadow()
-    .find("totp-consent-app")
+    .find("totp-consent")
     .shadow();
 });
 

diff --git a/packages/embed/src/js/basic-kyc.js b/packages/embed/src/js/basic-kyc.js
@@ -1,7 +1,7 @@
 import validate from "validate.js";
 import "@smileid/components/combobox";
 import "@smileid/components/end-user-consent";
-import TotpBasedConsent from "./components/TotpConsentApp";
+import "@smileid/components/totp-consent";
 import { version as sdkVersion } from "../../package.json";
 
 (function basicKyc() {
@@ -19,8 +19,6 @@ import { version as sdkVersion } from "../../package.json";
   const referenceWindow = window.parent;
   referenceWindow.postMessage("SmileIdentity::ChildPageReady", "*");
 
-  window.customElements.define("totp-consent-app", TotpBasedConsent);
-
   const pages = [];
   let activeScreen;
   let config;

diff --git a/packages/embed/src/js/biometric-kyc.js b/packages/embed/src/js/biometric-kyc.js
@@ -2,7 +2,7 @@ import JSZip from "jszip";
 import validate from "validate.js";
 import "@smile_identity/smart-camera-web";
 import "@smileid/components/end-user-consent";
-import TotpBasedConsent from "./components/TotpConsentApp";
+import "@smileid/components/totp-consent";
 import { version as sdkVersion } from "../../package.json";
 
 (function biometricKyc() {
@@ -20,8 +20,6 @@ import { version as sdkVersion } from "../../package.json";
   const referenceWindow = window.parent;
   referenceWindow.postMessage("SmileIdentity::ChildPageReady", "*");
 
-  window.customElements.define("totp-consent-app", TotpBasedConsent);
-
   const pages = [];
   let activeScreen;
   let config;

diff --git a/packages/embed/src/js/ekyc.js b/packages/embed/src/js/ekyc.js
@@ -1,7 +1,7 @@
 import validate from "validate.js";
 import "@smileid/components/combobox";
 import "@smileid/components/end-user-consent";
-import TotpBasedConsent from "./components/TotpConsentApp";
+import "@smileid/components/totp-consent";
 import { version as sdkVersion } from "../../package.json";
 
 (function eKYC() {
@@ -18,7 +18,6 @@ import { version as sdkVersion } from "../../package.json";
 
   const referenceWindow = window.parent;
   referenceWindow.postMessage("SmileIdentity::ChildPageReady", "*");
-  window.customElements.define("totp-consent-app", TotpBasedConsent);
 
   const pages = [];
   let activeScreen;