diff --git a/app/javascript/packages/document-capture/components/acuant-capture.scss b/app/javascript/packages/document-capture/components/acuant-capture.scss index 451142b77d3..977eda0306d 100644 --- a/app/javascript/packages/document-capture/components/acuant-capture.scss +++ b/app/javascript/packages/document-capture/components/acuant-capture.scss @@ -37,12 +37,13 @@ .document-capture-file-image--loading { @extend %pad-common-id-card; } - // Styles for the text that appears over the selfie capture screen to help users position their face for a good photo - .document-capture-selfie-feedback { - left: 50%; - top: 10%; - position: fixed; - transform: translateX(-50%); - z-index: 11; - } +} + +// Styles for the text that appears over the selfie capture screen to help users position their face for a good photo +.document-capture-selfie-feedback { + left: 50%; + top: 10%; + position: fixed; + transform: translateX(-50%); + z-index: 11; } diff --git a/app/javascript/packages/document-capture/components/acuant-capture.tsx b/app/javascript/packages/document-capture/components/acuant-capture.tsx index b273f2e4e0f..cc1e019a8fb 100644 --- a/app/javascript/packages/document-capture/components/acuant-capture.tsx +++ b/app/javascript/packages/document-capture/components/acuant-capture.tsx @@ -698,12 +698,16 @@ function AcuantCapture( onImageCaptureClose={onSelfieCaptureClosed} onImageCaptureFeedback={onImageCaptureFeedback} > - setIsCapturingEnvironment(false)} - imageCaptureText={imageCaptureText} - /> + + + )} - - + ); } -function AcuantSelfieCaptureCanvas({ - fullScreenRef, - onRequestClose, - fullScreenLabel, - imageCaptureText, -}) { +function AcuantSelfieCaptureCanvas({ imageCaptureText, onSelfieCaptureClosed }) { const { isReady } = useContext(AcuantContext); + const { t } = useI18n(); // The Acuant SDK script AcuantPassiveLiveness attaches to whatever element has // this id. It then uses that element as the root for the full screen selfie capture const acuantCaptureContainerId = 'acuant-face-capture-container'; - return isReady ? ( -
+ return ( + <> + {!isReady && } +

{imageCaptureText}

-
- ) : ( - + + ); } diff --git a/config/locales/doc_auth/en.yml b/config/locales/doc_auth/en.yml index a5d5dd2d1f0..97fb8758665 100644 --- a/config/locales/doc_auth/en.yml +++ b/config/locales/doc_auth/en.yml @@ -7,6 +7,7 @@ en: document_capture_dialog: Document capture buttons: add_new_photos: Add new photos + close: Close continue: Continue take_or_upload_picture_html: 'Take photo or Upload photo' diff --git a/config/locales/doc_auth/es.yml b/config/locales/doc_auth/es.yml index b6bd473dae3..77ae2c08dfb 100644 --- a/config/locales/doc_auth/es.yml +++ b/config/locales/doc_auth/es.yml @@ -7,6 +7,7 @@ es: document_capture_dialog: Captura del documento buttons: add_new_photos: Añadir nuevas fotos + close: Cerrar continue: Continuar take_or_upload_picture_html: 'Toma una foto o Sube una diff --git a/config/locales/doc_auth/fr.yml b/config/locales/doc_auth/fr.yml index 68ac732127a..9f19ea030db 100644 --- a/config/locales/doc_auth/fr.yml +++ b/config/locales/doc_auth/fr.yml @@ -7,6 +7,7 @@ fr: document_capture_dialog: Capture du document buttons: add_new_photos: Ajoutez de nouvelles photos + close: Fermer continue: Continuer take_or_upload_picture_html: 'Prendre une photo ou Télécharger une diff --git a/spec/javascript/packages/document-capture/components/acuant-selfie-capture-canvas-spec.jsx b/spec/javascript/packages/document-capture/components/acuant-selfie-capture-canvas-spec.jsx index 3558b5a2b7e..e862a1fcd79 100644 --- a/spec/javascript/packages/document-capture/components/acuant-selfie-capture-canvas-spec.jsx +++ b/spec/javascript/packages/document-capture/components/acuant-selfie-capture-canvas-spec.jsx @@ -3,7 +3,7 @@ import { AcuantContext, DeviceContext } from '@18f/identity-document-capture'; import { render } from '../../../support/document-capture'; it('shows the loading spinner when the script hasnt loaded', () => { - const { getByRole, container } = render( + const { container } = render( @@ -11,12 +11,12 @@ it('shows the loading spinner when the script hasnt loaded', () => { , ); - expect(getByRole('dialog')).to.be.ok(); - expect(container.querySelector('#acuant-face-capture-container')).to.not.exist(); + expect(container.querySelector('#acuant-face-capture-container')).to.exist(); + expect(container.querySelector('.acuant-capture-canvas__spinner')).to.exist(); }); it('shows the Acuant div when the script has loaded', () => { - const { queryByRole, container } = render( + const { container } = render( @@ -24,6 +24,6 @@ it('shows the Acuant div when the script has loaded', () => { , ); - expect(queryByRole('dialog')).to.not.exist(); expect(container.querySelector('#acuant-face-capture-container')).to.exist(); + expect(container.querySelector('.acuant-capture-canvas__spinner')).not.to.exist(); });