Skip to content

Commit

Permalink
[web-components] Enh/use new navigation (#237)
Browse files Browse the repository at this point in the history 
* Add new navigation to other web components

* Add tests new navigation to components
Add tests for back navigations

* run all tests

* remove unnecessary custom event listeners

* Fix navigation alignment on larger screens

* Handle close buttons

* Fix selfie review navigation padding
Update tests

* Add tests for closing screens
Update readme

* Fix video play interruption
  • Loading branch information
@ayinloya
ayinloya authored Apr 4, 2024
1 parent 97566f7 commit 2b4f065
Show file tree
Hide file tree
Showing 20 changed files with 1,028 additions and 350 deletions.
28 changes: 4 additions & 24 deletions packages/web-components/components/camera-permission/CameraPermission.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import SmartCamera from '../../domain/camera/src/SmartCamera';
import styles from '../../styles/src/styles';
import '../attribution/PoweredBySmileId';
import '../navigation/src';

function templateString() {
return `
Expand Down Expand Up @@ -31,28 +32,7 @@ function templateString() {
}
</style>
<div class='flow center'>
${this.showNavigation ? `
<div class="nav back-to-host-nav${this.hideBackToHost ? ' justify-right' : ''}">
${this.hideBackToHost ? '' : `
<div class="back-wrapper back-to-host-wrapper">
<button type='button' data-type='icon' id="back-button-exit" class="back-button back-button-exit icon-btn">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
<path fill="#DBDBC4" d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Z" opacity=".4"/>
<path fill="#001096" d="M15.5 11.25h-5.19l1.72-1.72c.29-.29.29-.77 0-1.06a.754.754 0 0 0-1.06 0l-3 3c-.29.29-.29.77 0 1.06l3 3c.15.15.34.22.53.22s.38-.07.53-.22c.29-.29.29-.77 0-1.06l-1.72-1.72h5.19c.41 0 .75-.34.75-.75s-.34-.75-.75-.75Z"/>
</svg>
</button>
<div class="back-button-text">Back</div>
</div>
`}
<button data-type='icon' type='button' id='request-screen-close' class='close-iframe icon-btn'>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none">
<path fill="#DBDBC4" d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Z" opacity=".4"/>
<path fill="#91190F" d="m13.06 12 2.3-2.3c.29-.29.29-.77 0-1.06a.754.754 0 0 0-1.06 0l-2.3 2.3-2.3-2.3a.754.754 0 0 0-1.06 0c-.29.29-.29.77 0 1.06l2.3 2.3-2.3 2.3c-.29.29-.29.77 0 1.06.15.15.34.22.53.22s.38-.07.53-.22l2.3-2.3 2.3 2.3c.15.15.34.22.53.22s.38-.07.53-.22c.29-.29.29-.77 0-1.06l-2.3-2.3Z"/>
</svg>
<span class='visually-hidden'>Close SmileIdentity Verification frame</span>
</button>
</div>
` : ''}
<smileid-navigation ${this.showNavigation ? 'show-navigation' : ''} ${this.hideBack ? 'hide-back' : ''}></smileid-navigation>
<div class='flow center'>
<p class='color-red | center' id='error'>
</p>
Expand Down Expand Up @@ -140,8 +120,8 @@ class CameraPermission extends HTMLElement {
return this.hasAttribute('hide-attribution');
}

get hideBackToHost() {
return this.hasAttribute('hide-back-to-host');
get hideBack() {
return this.hasAttribute('hide-back');
}
}

Expand Down
74 changes: 65 additions & 9 deletions packages/web-components/components/document/src/DocumentCaptureScreens.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,13 +34,13 @@ class DocumentCaptureScreens extends HTMLElement {
this.innerHTML = `
${styles}
<div>
<document-capture-instructions ${this.title} ${this.documentCaptureModes} ${this.showNavigation} ${this.hideInstructions ? 'hidden' : ''}></document-capture-instructions>
<document-capture side-of-id='Front'
<document-capture-instructions id='document-capture-instructions-front' ${this.title} ${this.documentCaptureModes} ${this.showNavigation} ${this.hideInstructions ? 'hidden' : ''}></document-capture-instructions>
<document-capture id='document-capture-front' side-of-id='Front'
${this.title} ${this.showNavigation} ${this.hideInstructions ? '' : 'hidden'}
${this.documentCaptureModes}
></document-capture>
<document-capture-instructions id='document-capture-instructions-back' title='Submit Back of ID' ${this.documentCaptureModes} ${this.showNavigation} hidden></document-capture-instructions>
<document-capture id='back-of-id' side-of-id='Back' ${this.title} ${this.showNavigation}
<document-capture id='document-capture-back' side-of-id='Back' ${this.title} ${this.showNavigation}
${this.documentCaptureModes}
hidden
></document-capture>
Expand All @@ -60,9 +60,9 @@ class DocumentCaptureScreens extends HTMLElement {
this.documentInstructionBack = this.querySelector(
'#document-capture-instructions-back',
);
this.idCapture = this.querySelector('document-capture');
this.idCapture = this.querySelector('#document-capture-front');
this.idReview = this.querySelector('#front-of-document-capture-review');
this.idCaptureBack = this.querySelector('#back-of-id');
this.idCaptureBack = this.querySelector('#document-capture-back');
this.backOfIdReview = this.querySelector('#back-of-document-capture-review');
this.thankYouScreen = this.querySelector('thank-you');

Expand All @@ -86,6 +86,10 @@ class DocumentCaptureScreens extends HTMLElement {
}

setUpEventListeners() {
this.documentInstruction.addEventListener('document-capture-instructions.cancelled', () => {
this.handleBackEvents();
});

this.documentInstruction.addEventListener(
'document-capture-instructions.capture',
async () => {
Expand Down Expand Up @@ -115,7 +119,15 @@ class DocumentCaptureScreens extends HTMLElement {
this.setActiveScreen(this.idReview);
});

this.idReview.addEventListener('document-review.rejected', async () => {
this.idCapture.addEventListener('document-capture.cancelled', () => {
if (this.hideInstructions) {
this.handleBackEvents();
} else {
this.setActiveScreen(this.documentInstruction);
}
});

this.idReview.addEventListener('document-capture-review.rejected', async () => {
this.idReview.removeAttribute('data-image');
this._data.images.pop();
if (this.hideInstructions) {
Expand All @@ -126,7 +138,7 @@ class DocumentCaptureScreens extends HTMLElement {
}
});

this.idReview.addEventListener('document-review.accepted', async () => {
this.idReview.addEventListener('document-capture-review.accepted', async () => {
if (this.hideBackOfId) {
this._publishSelectedImages();
} else if (this.hideInstructions) {
Expand All @@ -145,6 +157,20 @@ class DocumentCaptureScreens extends HTMLElement {
},
);

this.documentInstructionBack.addEventListener(
'document-capture-instructions.cancelled',
async () => {
this.idReview.removeAttribute('data-image');
this._data.images.pop();
if (this.hideInstructions) {
this.setActiveScreen(this.idCapture);
await getPermissions(this.idCapture);
} else {
this.setActiveScreen(this.documentInstruction);
}
},
);

this.documentInstructionBack.addEventListener(
'document-capture-instructions.upload',
async (event) => {
Expand All @@ -166,7 +192,16 @@ class DocumentCaptureScreens extends HTMLElement {
SmartCamera.stopMedia();
});

this.backOfIdReview.addEventListener('document-review.rejected', async () => {
this.idCaptureBack.addEventListener('document-capture.cancelled', async () => {
if (this.hideInstructions) {
this.setActiveScreen(this.idCapture);
await getPermissions(this.idCapture);
} else {
this.setActiveScreen(this.documentInstructionBack);
}
});

this.backOfIdReview.addEventListener('document-capture-review.rejected', async () => {
this.backOfIdReview.removeAttribute('data-image');
this._data.images.pop();
if (this.hideInstructions) {
Expand All @@ -177,9 +212,22 @@ class DocumentCaptureScreens extends HTMLElement {
}
});

this.backOfIdReview.addEventListener('document-review.accepted', () => {
this.backOfIdReview.addEventListener('document-capture-review.accepted', () => {
this._publishSelectedImages();
});

const screens = [
this.documentInstruction,
this.idCapture,
this.documentInstructionBack,
this.idCaptureBack,
this.idReview,
this.backOfIdReview,
];

screens.forEach((screen) => {
screen.addEventListener(`${screen.nodeName.toLowerCase()}.close`, () => this.handleCloseEvents());
});
}

_publishSelectedImages() {
Expand Down Expand Up @@ -212,6 +260,14 @@ class DocumentCaptureScreens extends HTMLElement {
: '';
}

handleBackEvents() {
this.dispatchEvent(new CustomEvent('document-capture-screens.cancelled'));
}

handleCloseEvents() {
this.dispatchEvent(new CustomEvent('document-capture-screens.close'));
}

setActiveScreen(screen) {
this.activeScreen?.setAttribute('hidden', '');
screen.removeAttribute('hidden');
Expand Down
84 changes: 10 additions & 74 deletions ...ents/components/document/src/document-capture-instructions/DocumentCaptureInstructions.js
View file
Original file line number Diff line number Diff line change
@@ -1,66 +1,12 @@
import SmartFileUpload from '../../../../domain/file-upload/src/SmartFileUpload';
import styles from '../../../../styles/src/styles';
import '../../../navigation/src';

function templateString() {
return `
<div id="document-capture-instructions-screen" class="flow center">
<section className="main">
${
this.showNavigation
? `
<div class="nav">
<div class="back-wrapper">
<button
type="button"
data-type="icon"
id="back-button"
class="back-button icon-btn">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
fill="none">
<path
fill="#DBDBC4"
d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Z"
opacity=".4"
/>
<path
fill="#001096"
d="M15.5 11.25h-5.19l1.72-1.72c.29-.29.29-.77 0-1.06a.754.754 0 0 0-1.06 0l-3 3c-.29.29-.29.77 0 1.06l3 3c.15.15.34.22.53.22s.38-.07.53-.22c.29-.29.29-.77 0-1.06l-1.72-1.72h5.19c.41 0 .75-.34.75-.75s-.34-.75-.75-.75Z"/>
</svg>
<div class="back-button-text">Back</div>
</button>
</div>
<button
data-type="icon"
type="button"
id="id-entry-close"
class="close-iframe icon-btn"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
fill="none"
>
<path
fill="#DBDBC4"
d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Z"
opacity=".4"
/>
<path
fill="#91190F"
d="m13.06 12 2.3-2.3c.29-.29.29-.77 0-1.06a.754.754 0 0 0-1.06 0l-2.3 2.3-2.3-2.3a.754.754 0 0 0-1.06 0c-.29.29-.29.77 0 1.06l2.3 2.3-2.3 2.3c-.29.29-.29.77 0 1.06.15.15.34.22.53.22s.38-.07.53-.22l2.3-2.3 2.3 2.3c.15.15.34.22.53.22s.38-.07.53-.22c.29-.29.29-.77 0-1.06l-2.3-2.3Z"
/>
</svg>
<span class="visually-hidden"
>Close SmileIdentity Verification frame</span
>
</button>
</div>`
: ''
}
<smileid-navigation ${this.showNavigation ? 'show-navigation' : ''} ${this.hideBack ? 'hide-back' : ''}></smileid-navigation>
<header>
<svg xmlns="http://www.w3.org/2000/svg" width="51" height="78" viewBox="0 0 51 78" fill="none">
<g clip-path="url(#clip0_604_800)">
Expand Down Expand Up @@ -308,26 +254,16 @@ class DocumentInstruction extends HTMLElement {

this.shadowRoot.appendChild(template.content.cloneNode(true));

this.backButton = this.shadowRoot.querySelector('#back-button');
this.navigation = this.shadowRoot.querySelector('smileid-navigation');
this.takeDocumentPhotoButton = this.shadowRoot.querySelector('#take-photo');
this.uploadDocumentPhotoButton = this.shadowRoot.querySelector('#upload-photo');

const CloseIframeButtons = this.shadowRoot.querySelectorAll('.close-iframe');

if (this.backButton) {
this.backButton.addEventListener('click', (e) => {
this.handleBackEvents(e);
});
}
this.navigation.addEventListener('navigation.back', () => {
this.handleBackEvents();
});

CloseIframeButtons.forEach((button) => {
button.addEventListener(
'click',
() => {
this.closeWindow();
},
false,
);
this.navigation.addEventListener('navigation.close', () => {
this.handleCloseEvents();
});

if (this.takeDocumentPhotoButton) {
Expand Down Expand Up @@ -395,8 +331,8 @@ class DocumentInstruction extends HTMLElement {
this.dispatchEvent(new CustomEvent('document-capture-instructions.cancelled'));
}

closeWindow() {
window.parent.postMessage('SmileIdentity::Close', '*');
handleCloseEvents() {
this.dispatchEvent(new CustomEvent('document-capture-instructions.close'));
}
}

Expand Down
Loading

0 comments on commit 2b4f065

Please sign in to comment.