Implement AcuantCapture React component

.eslintrc

@@ -25,7 +25,8 @@
     "import/extensions": ["off", "never"],
     "no-param-reassign": ["off", "never"],
     "no-confusing-arrow": "off",
-    "implicit-arrow-linebreak": "off"
+    "implicit-arrow-linebreak": "off",
+    "object-curly-newline": "off"
   },
   "parserOptions": {
     "ecmaVersion": 6,

app/assets/javascripts/i18n-strings.js.erb

@@ -46,6 +46,7 @@ window.LoginGov = window.LoginGov || {};
   'zxcvbn.feedback.this_is_similar_to_a_commonly_used_password',
   'zxcvbn.feedback.for_a_stronger_password_use_a_few_words_separated_by_spaces_but_avoid_common_phrases',
   'zxcvbn.feedback.use_a_longer_keyboard_pattern_with_more_turns',
+  'doc_auth.buttons.take_picture',
   'doc_auth.headings.welcome'
 ] %>
 

app/javascript/app/document-capture/components/acuant-capture-canvas.jsx

@@ -0,0 +1,66 @@
+import React, { useRef, useEffect } from 'react';
+import PropTypes from 'prop-types';
+
+function AcuantCaptureCanvas({ onImageCaptureSuccess, onImageCaptureFailure }) {
+  const isCapturing = useRef(false);
+
+  useEffect(() => {
+    /**
+     * Creates a new callback function which also sets the internal component
+     * state to mark capture as completed.
+     *
+     * @param {Function} callback Original callback.
+     *
+     * @return {Function} Enhanced callback.
+     */
+    const createOnComplete = (callback) => (result) => {
+      isCapturing.current = false;
+      callback(result);
+    };
+
+    isCapturing.current = true;
+
+    window.AcuantCameraUI.start(
+      createOnComplete(onImageCaptureSuccess),
+      createOnComplete(onImageCaptureFailure),
+    );
+
+    return () => {
+      // If capturing while component unmounts, end the capture.
+      if (isCapturing.current) {
+        window.AcuantCameraUI.end();
+      }
+    };
+  }, []);
+
+  // The video element is never visible to the user, but it needs to be present
+  // in the DOM for the Acuant SDK to capture the feed from the camera.
+
+  return (
+    <>
+      {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
+      <video
+        id="acuant-player"
+        controls
+        autoPlay
+        playsInline
+        style={{ display: 'none' }}
+      />
+      <div id="acuant-sdk-capture-view">
+        <canvas id="acuant-video-canvas" width="100%" height="auto" />
+      </div>
+    </>
+  );
+}
+
+AcuantCaptureCanvas.propTypes = {
+  onImageCaptureSuccess: PropTypes.func,
+  onImageCaptureFailure: PropTypes.func,
+};
+
+AcuantCaptureCanvas.defaultProps = {
+  onImageCaptureSuccess: () => {},
+  onImageCaptureFailure: () => {},
+};
+
+export default AcuantCaptureCanvas;

app/javascript/app/document-capture/components/acuant-capture.jsx

@@ -0,0 +1,42 @@
+import React, { useContext, useState } from 'react';
+import AcuantContext from '../context/acuant';
+import AcuantCaptureCanvas from './acuant-capture-canvas';
+import useI18n from '../hooks/use-i18n';
+
+function AcuantCapture() {
+  const { isReady, isError } = useContext(AcuantContext);
+  const [isCapturing, setIsCapturing] = useState(false);
+  const [capture, setCapture] = useState(null);
+  const t = useI18n();
+
+  if (isError) {
+    return 'Error!';
+  }
+
+  if (!isReady) {
+    return 'Loading…';
+  }
+
+  if (capture) {
+    const { data, width, height } = capture.image;
+    return (
+      <img alt="Captured result" src={data} width={width} height={height} />
+    );
+  }
+
+  return isCapturing ? (
+    <AcuantCaptureCanvas
+      onImageCaptureSuccess={(nextCapture) => {
+        setCapture(nextCapture);
+        setIsCapturing(false);
+      }}
+      onImageCaptureFailure={() => setIsCapturing(false)}
+    />
+  ) : (
+    <button type="button" onClick={() => setIsCapturing(true)}>
+      {t('doc_auth.buttons.take_picture')}
+    </button>
+  );
+}
+
+export default AcuantCapture;

app/javascript/app/document-capture/components/document-capture.jsx

@@ -1,9 +1,16 @@
+import React from 'react';
+import AcuantCapture from './acuant-capture';
 import useI18n from '../hooks/use-i18n';
 
 function DocumentCapture() {
   const t = useI18n();
 
-  return t('doc_auth.headings.welcome');
+  return (
+    <>
+      <h2>{t('doc_auth.headings.welcome')}</h2>
+      <AcuantCapture />
+    </>
+  );
 }
 
 export default DocumentCapture;

app/javascript/app/document-capture/context/acuant.jsx

@@ -0,0 +1,64 @@
+import React, { createContext, useMemo, useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+
+const AcuantContext = createContext({
+  isReady: false,
+  isError: false,
+  credentials: null,
+  endpoint: null,
+});
+
+function AcuantContextProvider({ sdkSrc, credentials, endpoint, children }) {
+  const [isReady, setIsReady] = useState(false);
+  const [isError, setIsError] = useState(false);
+  const value = useMemo(() => ({ isReady, isError, endpoint, credentials }), [
+    isReady,
+    isError,
+    endpoint,
+    credentials,
+  ]);
+
+  useEffect(() => {
+    // Acuant SDK expects this global to be assigned at the time the script is
+    // loaded, which is why the script element is manually appended to the DOM.
+    const originalOnAcuantSdkLoaded = window.onAcuantSdkLoaded;
+    window.onAcuantSdkLoaded = () => {
+      window.AcuantJavascriptWebSdk.initialize(credentials, endpoint, {
+        onSuccess: () => setIsReady(true),
+        onFail: () => setIsError(true),
+      });
+    };
+
+    const script = document.createElement('script');
+    script.async = true;
+    script.src = sdkSrc;
+    document.body.appendChild(script);
+
+    return () => {
+      window.onAcuantSdkLoaded = originalOnAcuantSdkLoaded;
+      document.body.removeChild(script);
+    };
+  }, []);
+
+  return (
+    <AcuantContext.Provider value={value}>{children}</AcuantContext.Provider>
+  );
+}
+
+AcuantContextProvider.propTypes = {
+  sdkSrc: PropTypes.string,
+  credentials: PropTypes.string,
+  endpoint: PropTypes.string,
+  children: PropTypes.node,
+};
+
+AcuantContextProvider.defaultProps = {
+  sdkSrc: '/AcuantJavascriptWebSdk.min.js',
+  credentials: null,
+  endpoint: null,
+  children: null,
+};
+
+export const Provider = AcuantContextProvider;
+
+export default AcuantContext;

app/javascript/packs/document-capture.jsx

@@ -2,14 +2,24 @@ import React from 'react';
 import { render } from 'react-dom';
 import DocumentCapture from '../app/document-capture/components/document-capture';
 import I18nContext from '../app/document-capture/context/i18n';
+import { Provider as AcuantProvider } from '../app/document-capture/context/acuant';
 
 const { I18n: i18n } = window.LoginGov;
 
+function getMetaContent(name) {
+  return document.querySelector(`meta[name="${name}"]`)?.content ?? null;
+}
+
 const appRoot = document.getElementById('document-capture-form');
 appRoot.innerHTML = '';
 render(
-  <I18nContext.Provider value={i18n.strings[i18n.currentLocale()]}>
-    <DocumentCapture />
-  </I18nContext.Provider>,
+  <AcuantProvider
+    credentials={getMetaContent('acuant-sdk-initialization-creds')}
+    endpoint={getMetaContent('acuant-sdk-initialization-endpoint')}
+  >
+    <I18nContext.Provider value={i18n.strings[i18n.currentLocale()]}>
+      <DocumentCapture />
+    </I18nContext.Provider>
+  </AcuantProvider>,
   appRoot,
 );

app/views/idv/doc_auth/document_capture.html.erb

@@ -1,6 +1,17 @@
-<div id='document-capture-form'>
-</div>
-
+<% if Figaro.env.acuant_sdk_document_capture_enabled == 'true' %>
+  <% content_for :meta_tags do %>
+    <meta
+      name="acuant-sdk-initialization-endpoint"
+      content="<%= Figaro.env.acuant_sdk_initialization_endpoint %>"
+    >
+    <meta
+      name="acuant-sdk-initialization-creds"
+      content="<%= Figaro.env.acuant_sdk_initialization_creds %>"
+    >
+  <% end %>
+  <div id="document-capture-form"></div>
+  <%= javascript_pack_tag 'document-capture' %>
+<% end %>
 <div>
 <% title t('doc_auth.titles.doc_auth') %>
 
@@ -68,4 +79,3 @@
 <%= render 'idv/doc_auth/start_over_or_cancel' %>
 <%= javascript_pack_tag 'image-preview' %>
 </div>
-<%= javascript_pack_tag 'document-capture' %>

package.json

@@ -27,6 +27,7 @@
     "jquery": "^3.5.0",
     "libphonenumber-js": "^1.7.26",
     "normalize.css": "^4.2.0",
+    "prop-types": "^15.7.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "sinon": "^1.17.7",
@@ -37,7 +38,7 @@
     "@babel/preset-react": "^7.10.4",
     "@babel/register": "^7.4.4",
     "atob": "^2.1.2",
-    "babel-eslint": "^7.2.3",
+    "babel-eslint": "^10.1.0",
     "btoa": "^1.2.1",
     "chai": "^3.5.0",
     "dirty-chai": "^1.2.2",