From 3931f3ec12963672c89b6e5221a750225f25051b Mon Sep 17 00:00:00 2001
From: tams sokari <tamssokari@users.noreply.github.com>
Date: Sun, 26 Nov 2023 16:46:24 +0100
Subject: [PATCH] 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
---
 package-lock.json                                    |  5 ++++-
 .../end-user-consent/src/EndUserConsent.js           |  6 +++---
 packages/components/package.json                     | 12 +++++++++---
 .../totp-consent/src/TotpConsent.js}                 | 10 ++++++++--
 packages/components/totp-consent/src/index.js        |  3 +++
 packages/embed/cypress/support/commands.js           |  2 +-
 packages/embed/src/js/basic-kyc.js                   |  4 +---
 packages/embed/src/js/biometric-kyc.js               |  4 +---
 packages/embed/src/js/ekyc.js                        |  3 +--
 9 files changed, 31 insertions(+), 18 deletions(-)
 rename packages/{embed/src/js/components/TotpConsentApp.js => components/totp-consent/src/TotpConsent.js} (99%)
 create mode 100644 packages/components/totp-consent/src/index.js

diff --git a/package-lock.json b/package-lock.json
index 21e2537b..cb801e5a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10439,7 +10439,10 @@
     },
     "packages/components": {
       "name": "@smileid/components",
-      "version": "1.0.0"
+      "version": "1.0.0",
+      "dependencies": {
+        "validate.js": "^0.13.1"
+      }
     },
     "packages/embed": {
       "name": "@smileid/embed",
diff --git a/packages/components/end-user-consent/src/EndUserConsent.js b/packages/components/end-user-consent/src/EndUserConsent.js
index 5e75cf7a..6aaab625 100644
--- 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
index 5a753846..0f47a230 100644
--- 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 <support@usesmileid.com> (https://usesmileid.com)"
+	"keywords": [
+		"Web Components"
+	],
+	"author": "SmileID <support@usesmileid.com> (https://usesmileid.com)",
+	"dependencies": {
+		"validate.js": "^0.13.1"
+	}
 }
diff --git a/packages/embed/src/js/components/TotpConsentApp.js b/packages/components/totp-consent/src/TotpConsent.js
similarity index 99%
rename from packages/embed/src/js/components/TotpConsentApp.js
rename to packages/components/totp-consent/src/TotpConsent.js
index 0004c0a7..f2bb3984 100644
--- a/packages/embed/src/js/components/TotpConsentApp.js
+++ b/packages/components/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
new file mode 100644
index 00000000..06a3a66f
--- /dev/null
+++ 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
index 1009793b..d47c30f2 100644
--- 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
index d8e9260f..b58bcfe0 100644
--- 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
index eb3258eb..9751d46c 100644
--- 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
index f75597b1..9de6e458 100644
--- 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;