enh: improve document capture, fix icon buttons, add capture tips (#36)

* redesign: change back button icon / font color

* redesign: switch close icon

* redesign: reinstate tips for back of document capture

* redesign: remove auto margin for actions on id entry screens

* enh: add "Skip this step" button for back of id photo

this shows up only when a document-type does not exist

* 1.0.0-beta.23

* redesign: use image-frame to crop id image

cypress/e2e/skip-back-of-id.cy.js

@@ -0,0 +1,163 @@
+context('SmartCameraWeb - Skip Back of ID Document Capture', () => {
+  beforeEach(() => {
+    cy.visit('/capture-back-of-id');
+  });
+
+  context('when a document type does not exist', () => {
+    it('should switch from the back of ID entry screen to the thanks screen on clicking the "Skip this step" button', () => {
+      cy
+        .get('smart-camera-web')
+        .shadow()
+        .find('#request-camera-access')
+        .click();
+
+      cy
+        .get('smart-camera-web')
+        .shadow()
+        .find('#start-image-capture')
+        .click();
+
+      cy
+        .wait(8000);
+
+      cy
+        .get('smart-camera-web')
+        .shadow()
+        .find('#select-selfie')
+        .click();
+
+      cy
+        .get('smart-camera-web')
+        .shadow()
+        .find('#id-entry-screen')
+        .should('be.visible');
+
+      cy
+        .get('smart-camera-web')
+        .shadow()
+        .find('#id-entry-screen #take-photo')
+        .click();
+
+      cy
+        .get('smart-camera-web')
+        .shadow()
+        .find('#id-entry-screen')
+        .should('not.be.visible');
+
+      cy
+        .get('smart-camera-web')
+        .shadow()
+        .find('#capture-id-image')
+        .click();
+
+      cy
+        .wait(2000);
+
+      cy
+        .get('smart-camera-web')
+        .shadow()
+        .find('#select-id-image')
+        .click();
+
+      cy
+        .get('smart-camera-web')
+        .shadow()
+        .find('#back-of-id-entry-screen')
+        .should('be.visible');
+
+      cy
+        .get('smart-camera-web')
+        .shadow()
+        .find('#back-of-id-entry-screen #skip-this-step')
+        .click();
+
+      cy
+        .get('smart-camera-web')
+        .shadow()
+        .find('#back-of-id-entry-screen')
+        .should('not.be.visible');
+
+      cy
+        .get('smart-camera-web')
+        .shadow()
+        .find('#thanks-screen')
+        .should('be.visible');
+    });
+  });
+
+  context('when a document-type exists', () => {
+    beforeEach(() => {
+      cy
+        .get('smart-camera-web')
+        .invoke('attr', 'document-type', 'GREEN_BOOK');
+    });
+
+    it('should not show the "skip this step" button', () => {
+      cy
+        .get('smart-camera-web')
+        .shadow()
+        .find('#request-camera-access')
+        .click();
+
+      cy
+        .get('smart-camera-web')
+        .shadow()
+        .find('#start-image-capture')
+        .click();
+
+      cy
+        .wait(8000);
+
+      cy
+        .get('smart-camera-web')
+        .shadow()
+        .find('#select-selfie')
+        .click();
+
+      cy
+        .get('smart-camera-web')
+        .shadow()
+        .find('#id-entry-screen')
+        .should('be.visible');
+
+      cy
+        .get('smart-camera-web')
+        .shadow()
+        .find('#id-entry-screen #take-photo')
+        .click();
+
+      cy
+        .get('smart-camera-web')
+        .shadow()
+        .find('#id-entry-screen')
+        .should('not.be.visible');
+
+      cy
+        .get('smart-camera-web')
+        .shadow()
+        .find('#capture-id-image')
+        .click();
+
+      cy
+        .wait(2000);
+
+      cy
+        .get('smart-camera-web')
+        .shadow()
+        .find('#select-id-image')
+        .click();
+
+      cy
+        .get('smart-camera-web')
+        .shadow()
+        .find('#back-of-id-entry-screen')
+        .should('be.visible');
+
+      cy
+        .get('smart-camera-web')
+        .shadow()
+        .find('#back-of-id-entry-screen #skip-this-step')
+        .should('not.exist');
+    });
+  });
+});

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smile_identity/smart-camera-web",
-  "version": "1.0.0-beta.22",
+  "version": "1.0.0-beta.23",
   "description": "WebComponent for smartly capturing images on the web, for use with SmileIdentity",
   "main": "smart-camera-web.js",
   "scripts": {