enh: add "document upload" functionality (#24)

* wip

* wip: tying it all together

* redesign: smart-camera-web redesign shelved for separate PR

* redesign: restore legacy smart-camera-web to working code

* wip

* tests: add `do-not-upload` attribute to all existing tests

* redesign: change from "Nunito Sans" to "Nunito" font

* redesign: switch between camera and entry screens for document capture

* refactor: remove todo.txt file

* fix: fix broken tests

* redesign: add upload document functionality

* add styling for document upload, finalize design

* tests: add page for tests / local development

* refactor: remove new smart-camera-web component

* refactor: remove commented code in `handleError`

* refactor: remove redundant async from `SmartFileUpload.getData`, promise is returned

* redesign: handle file reader errors in `SmartFileUpload.getData`

* refactor: add comment explaining why we split dataURL strings

* redesign: switch action button sequence

* redesign: change max file size to 10mb

* redesign: add image resolution check for uploaded documents

* redesign: add `document-capture-mode` attribute, defaults to `both`

* fix: add event listeners conditionally

* redesign: observe `document-capture-mode` attributes for changes

* fix: attach event listeners after rewriting dom

* refactor: extract `setUpEventListeners` into its own function

* refactor: move event listener to `setUpEventListeners` function

* fix(styles): conditionally apply classes when upload document-capture-mode is selected

* fix: clear value when file input is clicked, enabling selection of same file

* refactor: always show entry screens for document capture

* tmp: disable test requirements

* refactor: use getter for `captureBackOfID`

* copy: change copy for document capture entry screens

* redesign: fix conditional rendering

* fix: run linter to minimize merge conflicts

* enh: restart from main

* fix: fix lint config, and run linter

* version: bump version number to 1.0.0-beta.18

* enh: add `SmartFileUpload` class for processing uploads

* redesign: switch from Nunito Sans to Nunito

* redesign: move confirm actions to right, and review to left

* config: bump version number

* redesign: remove unnecessary variable declaration

* refactor: remove redundant code, reorder, and rewrite

* enh: add document upload functionality, without triggers

* refactor: add entry screens for document capture, modify tests

* Revert "tmp: disable test requirements"

This reverts commit 8dfaf4cadc2cf2e16f2926e29d8d8aa39d225c23.

* redesign: remove height restriction on reviewed document images

* redesign: add `document-capture-mode` to observed-attributes

* refactor: make `color-digital-blue` have highest specificity

* fix: fix svg dimension error, remove max-height on preview

* enh: add extra back / close buttons on the document capture entry screens

* styles: use consistent styling in document entry screens

* tests: add command to navigate through face capture screens

* redesign: change image dimension error message copy

* enh: add image dimension tip

* tests: add document-upload tests

* format: run linter

* redesign: remove dimension restriction

* redesign: use `document-capture-modes`, and change default to `camera`

* styles: change entry-screen block-size to 45rem

* refactor: use attributes and conditional rendering for back buttons

* fix: reset `_rawImages` when restarting image capture for POL

.eslintrc.js

@@ -17,7 +17,4 @@ module.exports = {
     'no-console': ['error', { allow: ['warn', 'error', 'info'] }],
     'no-unused-vars': ['error', { vars: 'all', args: 'after-used', ignoreRestSiblings: false }],
   },
-  env: {
-    'cypress/globals': true,
-  },
 };

cypress/e2e/document-upload.cy.js

@@ -0,0 +1,157 @@
+describe('SmartCameraWeb - Document Upload', () => {
+  beforeEach(() => {
+    cy.visit('/document-upload');
+  });
+
+  describe(' - default', () => {
+    it('should not have the document-capture-mode attribute set', () => {
+      cy
+        .get('smart-camera-web')
+        .should('not.have.attr', 'document-capture-modes');
+    });
+
+    it('should only show the "Take Photo" button', () => {
+      cy.navigateFaceCaptureScreens();
+
+      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')
+        .should('be.visible');
+
+      cy
+        .get('smart-camera-web')
+        .shadow()
+        .find('#id-entry-screen #upload-photo-label')
+        .should('not.exist');
+    });
+  });
+
+  describe(' - upload', () => {
+    beforeEach(() => {
+      cy
+        .get('smart-camera-web')
+        .invoke('attr', 'document-capture-modes', 'upload');
+    });
+
+    it('should have the document-capture-modes attribute set to upload', () => {
+      cy
+        .get('smart-camera-web')
+        .should('have.attr', 'document-capture-modes', 'upload');
+    });
+
+    it('should only show the "Upload Photo" button', () => {
+      cy.navigateFaceCaptureScreens();
+
+      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')
+        .should('not.exist');
+
+      cy
+        .get('smart-camera-web')
+        .shadow()
+        .find('#id-entry-screen #upload-photo-label')
+        .should('be.visible');
+    });
+
+    it('should accept an image that is just-right by dimensions', () => {
+      cy.navigateFaceCaptureScreens();
+
+      cy
+        .get('smart-camera-web')
+        .shadow()
+        .find('#id-entry-screen #upload-photo-label')
+        .should('be.visible');
+
+      cy
+        .get('smart-camera-web')
+        .shadow()
+        .find('#id-entry-screen #upload-photo-label')
+        .selectFile('cypress/fixtures/just-right.png');
+
+      cy
+        .get('smart-camera-web')
+        .shadow()
+        .find('#id-entry-screen')
+        .should('not.be.visible');
+
+      cy
+        .get('smart-camera-web')
+        .shadow()
+        .find('#id-review-screen')
+        .should('be.visible');
+    });
+
+    it('should show an error message when an image is too-large in memory size', () => {
+      cy.navigateFaceCaptureScreens();
+
+      cy
+        .get('smart-camera-web')
+        .shadow()
+        .find('#id-entry-screen #upload-photo-label')
+        .should('be.visible');
+
+      cy
+        .get('smart-camera-web')
+        .shadow()
+        .find('#id-entry-screen #upload-photo-label')
+        .selectFile('cypress/fixtures/too-large.png');
+
+      cy
+        .get('smart-camera-web')
+        .shadow()
+        .find('#error')
+        .should('contain', 'too-large.png is too large. Please ensure that the file is less than');
+    });
+  });
+
+  describe(' - both', () => {
+    beforeEach(() => {
+      cy
+        .get('smart-camera-web')
+        .invoke('attr', 'document-capture-modes', 'camera, upload');
+    });
+
+    it('should have the document-capture-mode attribute set to a combination of both modes', () => {
+      cy
+        .get('smart-camera-web')
+        .should('have.attr', 'document-capture-modes');
+    });
+
+    it('should show both the "Take Photo" button and the "Upload Photo" button', () => {
+      cy.navigateFaceCaptureScreens();
+
+      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')
+        .should('be.visible');
+
+      cy
+        .get('smart-camera-web')
+        .shadow()
+        .find('#id-entry-screen #upload-photo-label')
+        .should('be.visible');
+    });
+  });
+});

cypress/e2e/smart-camera-web-attribution.cy.js

@@ -1,19 +1,19 @@
 describe('SmartCameraWeb', () => {
-	it('shows attribution by default', () => {
-		cy.visit('/');
-		cy
-			.get('smart-camera-web')
-			.shadow()
-			.find('.powered-by')
-			.should('contain.text', 'Powered By');
-	});
+  it('shows attribution by default', () => {
+    cy.visit('/');
+    cy
+      .get('smart-camera-web')
+      .shadow()
+      .find('.powered-by')
+      .should('contain.text', 'Powered By');
+  });
 
-	it('hides attribution when `hide-attribution` attribute is passed', () => {
-		cy.visit('/capture-back-of-id-hide-attribution');
-		cy
-			.get('smart-camera-web')
-			.shadow()
-			.find('.powered-by')
-			.should('not.exist');
-	});
+  it('hides attribution when `hide-attribution` attribute is passed', () => {
+    cy.visit('/capture-back-of-id-hide-attribution');
+    cy
+      .get('smart-camera-web')
+      .shadow()
+      .find('.powered-by')
+      .should('not.exist');
+  });
 });