diff --git a/packages/components/end-user-consent/src/EndUserConsent.js b/packages/components/end-user-consent/src/EndUserConsent.js new file mode 100644 index 00000000..5e75cf7a --- /dev/null +++ b/packages/components/end-user-consent/src/EndUserConsent.js @@ -0,0 +1,858 @@ +"use strict"; + +function templateString() { + return ` + + + + + + + + `; +} + +class EndUserConsent extends HTMLElement { + constructor() { + super(); + + this.idRequiresTotpConsent = ["BVN_MFA"]; + this.templateString = templateString.bind(this); + this.render = () => { + return this.templateString(); + }; + + this.attachShadow({ mode: "open" }); + } + + connectedCallback() { + this.pages = []; + const template = document.createElement("template"); + template.innerHTML = this.render(); + + this.shadowRoot.appendChild(template.content.cloneNode(true)); + + this.consentScreen = this.shadowRoot.querySelector("#consent-screen"); + this.totpConsentApp = this.shadowRoot.querySelector("totp-consent-app"); + this.consentRejectedScreen = this.shadowRoot.querySelector( + "#consent-rejected-screen", + ); + + this.allowButton = this.shadowRoot.querySelector("#allow"); + this.rejectButton = this.shadowRoot.querySelector("#cancel"); + this.backToConsentButton = + this.shadowRoot.querySelector("#back-to-consent"); + this.confirmConsentRejectionButton = this.shadowRoot.querySelector( + "#confirm-consent-rejection", + ); + this.backButton = this.shadowRoot.querySelector("#back-button"); + const CloseIframeButtons = + this.shadowRoot.querySelectorAll(".close-iframe"); + + this.allowButton.addEventListener("click", (e) => + this.handleConsentGrant(e), + ); + this.rejectButton.addEventListener("click", (e) => + this.handleConsentGrant(e), + ); + + this.backToConsentButton.addEventListener("click", () => + this.setActiveScreen(this.consentScreen), + ); + this.confirmConsentRejectionButton.addEventListener("click", (e) => + this.handleConsentRejection(e), + ); + + this.totpConsentApp.addEventListener( + "SmileIdentity::ConsentDenied::TOTP::ContactMethodsOutdated", + (e) => this.handleTotpConsentEvents(e), + ); + this.totpConsentApp.addEventListener( + "SmileIdentity::ConsentGranted::TOTP", + (e) => this.handleTotpConsentEvents(e), + ); + this.totpConsentApp.addEventListener( + "SmileIdentity::ConsentDenied::Back", + (e) => this.handleBackEvents(e), + ); + + this.backButton.addEventListener("click", (e) => { + this.handleBackEvents(e); + }); + + CloseIframeButtons.forEach((button) => { + button.addEventListener( + "click", + () => { + this.closeWindow(); + }, + false, + ); + }); + + this.activeScreen = this.consentScreen; + } + + setActiveScreen(screen) { + this.activeScreen.hidden = true; + screen.hidden = false; + this.activeScreen = screen; + } + + get baseUrl() { + return this.getAttribute("base-url"); + } + + get country() { + return this.getAttribute("country"); + } + + get demoMode() { + return !!this.hasAttribute("demo-mode"); + } + + get hideBack() { + return this.hasAttribute("hide-back-to-host"); + } + + get idHint() { + return this.getAttribute("id-hint") || "Your BVN should be 11 digits long"; + } + + get idRegex() { + return this.getAttribute("id-regex"); + } + + get idType() { + return this.getAttribute("id-type"); + } + + get idTypeLabel() { + return this.getAttribute("id-type-label"); + } + + get partnerId() { + return this.getAttribute("partner-id"); + } + + get partnerName() { + return this.getAttribute("partner-name"); + } + + get partnerLogoURL() { + return this.getAttribute("partner-logo"); + } + + get partnerPolicyURL() { + return this.getAttribute("policy-url"); + } + + get themeColor() { + return this.getAttribute("theme-color") || "#043C93"; + } + + get token() { + return this.getAttribute("token"); + } + + handleConsentGrant(e) { + const granted = e.target === this.allowButton; + + if (granted) { + if (this.idRequiresTotpConsent.includes(this.idType)) { + this.setActiveScreen(this.totpConsentApp); + this.pages.push(this.consentScreen); + } else { + this.dispatchEvent( + new CustomEvent("SmileIdentity::ConsentGranted", { + detail: { + consented: { + personal_details: granted, + contact_information: granted, + document_information: granted, + }, + }, + }), + ); + } + } else { + this.setActiveScreen(this.consentRejectedScreen); + } + } + + handleConsentRejection() { + this.dispatchEvent(new CustomEvent("SmileIdentity::ConsentDenied")); + } + + handleTotpConsentEvents(e) { + const customEvent = new CustomEvent(e.type, { + detail: { + ...e.detail, + }, + }); + this.dispatchEvent(customEvent); + } + + handleBackEvents() { + const page = this.pages.pop(); + if (page) { + this.setActiveScreen(page); + } else { + this.dispatchEvent(new CustomEvent("SmileIdentity::Exit")); + } + } + + closeWindow() { + const referenceWindow = window.parent; + referenceWindow.postMessage("SmileIdentity::Close", "*"); + } +} + +if ("customElements" in window) { + window.customElements.define('end-user-consent', EndUserConsent); +} + +export { + EndUserConsent +}; diff --git a/packages/components/end-user-consent/src/index.js b/packages/components/end-user-consent/src/index.js new file mode 100644 index 00000000..562c109d --- /dev/null +++ b/packages/components/end-user-consent/src/index.js @@ -0,0 +1,3 @@ +export { + EndUserConsent +} from './EndUserConsent'; diff --git a/packages/components/package.json b/packages/components/package.json index 23627c1e..5a753846 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -4,7 +4,8 @@ "private": "true", "exports": { ".": "./index.js", - "./combobox": "./combobox/src/index.js" + "./combobox": "./combobox/src/index.js", + "./end-user-consent": "./end-user-consent/src/index.js" }, "description": "A collection of Web Components used by SmileID", "keywords": [ "Web Components" ], diff --git a/packages/embed/src/js/basic-kyc.js b/packages/embed/src/js/basic-kyc.js index 8cf975fc..d8e9260f 100644 --- a/packages/embed/src/js/basic-kyc.js +++ b/packages/embed/src/js/basic-kyc.js @@ -1,6 +1,6 @@ import validate from "validate.js"; import "@smileid/components/combobox"; -import ConsentScreen from "./components/ConsentScreen"; +import "@smileid/components/end-user-consent"; import TotpBasedConsent from "./components/TotpConsentApp"; import { version as sdkVersion } from "../../package.json"; @@ -19,7 +19,6 @@ import { version as sdkVersion } from "../../package.json"; const referenceWindow = window.parent; referenceWindow.postMessage("SmileIdentity::ChildPageReady", "*"); - window.customElements.define("end-user-consent", ConsentScreen); window.customElements.define("totp-consent-app", TotpBasedConsent); const pages = []; diff --git a/packages/embed/src/js/biometric-kyc.js b/packages/embed/src/js/biometric-kyc.js index 7089757d..eb3258eb 100644 --- a/packages/embed/src/js/biometric-kyc.js +++ b/packages/embed/src/js/biometric-kyc.js @@ -1,7 +1,7 @@ import JSZip from "jszip"; import validate from "validate.js"; import "@smile_identity/smart-camera-web"; -import ConsentScreen from "./components/ConsentScreen"; +import "@smileid/components/end-user-consent"; import TotpBasedConsent from "./components/TotpConsentApp"; import { version as sdkVersion } from "../../package.json"; @@ -20,7 +20,6 @@ import { version as sdkVersion } from "../../package.json"; const referenceWindow = window.parent; referenceWindow.postMessage("SmileIdentity::ChildPageReady", "*"); - window.customElements.define("end-user-consent", ConsentScreen); window.customElements.define("totp-consent-app", TotpBasedConsent); const pages = []; diff --git a/packages/embed/src/js/components/ConsentScreen.js b/packages/embed/src/js/components/ConsentScreen.js deleted file mode 100644 index 2e56d442..00000000 --- a/packages/embed/src/js/components/ConsentScreen.js +++ /dev/null @@ -1,852 +0,0 @@ -"use strict"; - -function templateString() { - return ` - - - - - - - - `; -} - -class EndUserConsent extends HTMLElement { - constructor() { - super(); - - this.idRequiresTotpConsent = ["BVN_MFA"]; - this.templateString = templateString.bind(this); - this.render = () => { - return this.templateString(); - }; - - this.attachShadow({ mode: "open" }); - } - - connectedCallback() { - this.pages = []; - const template = document.createElement("template"); - template.innerHTML = this.render(); - - this.shadowRoot.appendChild(template.content.cloneNode(true)); - - this.consentScreen = this.shadowRoot.querySelector("#consent-screen"); - this.totpConsentApp = this.shadowRoot.querySelector("totp-consent-app"); - this.consentRejectedScreen = this.shadowRoot.querySelector( - "#consent-rejected-screen", - ); - - this.allowButton = this.shadowRoot.querySelector("#allow"); - this.rejectButton = this.shadowRoot.querySelector("#cancel"); - this.backToConsentButton = - this.shadowRoot.querySelector("#back-to-consent"); - this.confirmConsentRejectionButton = this.shadowRoot.querySelector( - "#confirm-consent-rejection", - ); - this.backButton = this.shadowRoot.querySelector("#back-button"); - const CloseIframeButtons = - this.shadowRoot.querySelectorAll(".close-iframe"); - - this.allowButton.addEventListener("click", (e) => - this.handleConsentGrant(e), - ); - this.rejectButton.addEventListener("click", (e) => - this.handleConsentGrant(e), - ); - - this.backToConsentButton.addEventListener("click", () => - this.setActiveScreen(this.consentScreen), - ); - this.confirmConsentRejectionButton.addEventListener("click", (e) => - this.handleConsentRejection(e), - ); - - this.totpConsentApp.addEventListener( - "SmileIdentity::ConsentDenied::TOTP::ContactMethodsOutdated", - (e) => this.handleTotpConsentEvents(e), - ); - this.totpConsentApp.addEventListener( - "SmileIdentity::ConsentGranted::TOTP", - (e) => this.handleTotpConsentEvents(e), - ); - this.totpConsentApp.addEventListener( - "SmileIdentity::ConsentDenied::Back", - (e) => this.handleBackEvents(e), - ); - - this.backButton.addEventListener("click", (e) => { - this.handleBackEvents(e); - }); - - CloseIframeButtons.forEach((button) => { - button.addEventListener( - "click", - () => { - this.closeWindow(); - }, - false, - ); - }); - - this.activeScreen = this.consentScreen; - } - - setActiveScreen(screen) { - this.activeScreen.hidden = true; - screen.hidden = false; - this.activeScreen = screen; - } - - get baseUrl() { - return this.getAttribute("base-url"); - } - - get country() { - return this.getAttribute("country"); - } - - get demoMode() { - return !!this.hasAttribute("demo-mode"); - } - - get hideBack() { - return this.hasAttribute("hide-back-to-host"); - } - - get idHint() { - return this.getAttribute("id-hint") || "Your BVN should be 11 digits long"; - } - - get idRegex() { - return this.getAttribute("id-regex"); - } - - get idType() { - return this.getAttribute("id-type"); - } - - get idTypeLabel() { - return this.getAttribute("id-type-label"); - } - - get partnerId() { - return this.getAttribute("partner-id"); - } - - get partnerName() { - return this.getAttribute("partner-name"); - } - - get partnerLogoURL() { - return this.getAttribute("partner-logo"); - } - - get partnerPolicyURL() { - return this.getAttribute("policy-url"); - } - - get themeColor() { - return this.getAttribute("theme-color") || "#043C93"; - } - - get token() { - return this.getAttribute("token"); - } - - handleConsentGrant(e) { - const granted = e.target === this.allowButton; - - if (granted) { - if (this.idRequiresTotpConsent.includes(this.idType)) { - this.setActiveScreen(this.totpConsentApp); - this.pages.push(this.consentScreen); - } else { - this.dispatchEvent( - new CustomEvent("SmileIdentity::ConsentGranted", { - detail: { - consented: { - personal_details: granted, - contact_information: granted, - document_information: granted, - }, - }, - }), - ); - } - } else { - this.setActiveScreen(this.consentRejectedScreen); - } - } - - handleConsentRejection() { - this.dispatchEvent(new CustomEvent("SmileIdentity::ConsentDenied")); - } - - handleTotpConsentEvents(e) { - const customEvent = new CustomEvent(e.type, { - detail: { - ...e.detail, - }, - }); - this.dispatchEvent(customEvent); - } - - handleBackEvents() { - const page = this.pages.pop(); - if (page) { - this.setActiveScreen(page); - } else { - this.dispatchEvent(new CustomEvent("SmileIdentity::Exit")); - } - } - - closeWindow() { - const referenceWindow = window.parent; - referenceWindow.postMessage("SmileIdentity::Close", "*"); - } -} - -export default EndUserConsent; diff --git a/packages/embed/src/js/ekyc.js b/packages/embed/src/js/ekyc.js index 03c8d329..f75597b1 100644 --- a/packages/embed/src/js/ekyc.js +++ b/packages/embed/src/js/ekyc.js @@ -1,6 +1,6 @@ import validate from "validate.js"; import "@smileid/components/combobox"; -import ConsentScreen from "./components/ConsentScreen"; +import "@smileid/components/end-user-consent"; import TotpBasedConsent from "./components/TotpConsentApp"; import { version as sdkVersion } from "../../package.json"; @@ -18,7 +18,6 @@ import { version as sdkVersion } from "../../package.json"; const referenceWindow = window.parent; referenceWindow.postMessage("SmileIdentity::ChildPageReady", "*"); - window.customElements.define("end-user-consent", ConsentScreen); window.customElements.define("totp-consent-app", TotpBasedConsent); const pages = [];