LG-11377 Add Selfie UI

app/javascript/packages/document-capture/components/acuant-capture.tsx

@@ -15,6 +15,8 @@ import { useDidUpdateEffect } from '@18f/identity-react-hooks';
 import { useI18n } from '@18f/identity-react-i18n';
 import { removeUnloadProtection } from '@18f/identity-url';
 import AcuantCamera, { AcuantDocumentType } from './acuant-camera';
+import AcuantSelfieCamera from './acuant-selfie-camera';
+import AcuantSelfieCaptureCanvas from './acuant-selfie-capture-canvas';
 import type {
   AcuantCaptureFailureError,
   AcuantSuccessResponse,
@@ -335,6 +337,9 @@ function AcuantCapture(
   const [attempt, incrementAttempt] = useCounter(1);
   const [acuantFailureCookie, setAcuantFailureCookie, refreshAcuantFailureCookie] =
     useCookie('AcuantCameraHasFailed');
+  // There's some pretty significant changes to this component when it's used for
+  // selfie capture vs document image capture. This controls those changes.
+  const selfieCapture = name === 'selfie';
 
   const {
     failedCaptureAttempts,
@@ -488,6 +493,30 @@ function AcuantCapture(
     }
   }
 
+  function onSelfieCaptureSuccess({ image }: { image: string }) {
+    onChangeAndResetError(image);
+    onResetFailedCaptureAttempts();
+    setIsCapturingEnvironment(false);
+  }
+
+  function onSelfieCaptureFailure() {
+    // Internally, Acuant sets a cookie to bail on guided capture if initialization had
+    // previously failed for any reason, including declined permission. Since the cookie
+    // never expires, and since we want to re-prompt even if the user had previously
+    // declined, unset the cookie value when failure occurs for permissions.
+    setAcuantFailureCookie(null);
+    onCameraAccessDeclined();
+
+    // Due to a bug with Safari on iOS we force the page to refresh on the third
+    // time a user denies permissions.
+    onFailedCameraPermissionAttempt();
+    if (failedCameraPermissionAttempts > 2) {
+      removeUnloadProtection();
+      window.location.reload();
+    }
+    setIsCapturingEnvironment(false);
+  }
+
   function onAcuantImageCaptureSuccess(
     nextCapture: AcuantSuccessResponse | LegacyAcuantSuccessResponse,
   ) {
@@ -598,7 +627,7 @@ function AcuantCapture(
 
   return (
     <div className={[className, 'document-capture-acuant-capture'].filter(Boolean).join(' ')}>
-      {isCapturingEnvironment && (
+      {isCapturingEnvironment && !selfieCapture && (
         <AcuantCamera
           onCropStart={() => setHasStartedCropping(true)}
           onImageCaptureSuccess={onAcuantImageCaptureSuccess}
@@ -615,6 +644,20 @@ function AcuantCapture(
           )}
         </AcuantCamera>
       )}
+      {isCapturingEnvironment && selfieCapture && (
+        <AcuantSelfieCamera
+          onImageCaptureSuccess={onSelfieCaptureSuccess}
+          onImageCaptureFailure={onSelfieCaptureFailure}
+          onImageCaptureOpen={() => setIsCapturingEnvironment(true)}
+          onImageCaptureClose={() => setIsCapturingEnvironment(false)}
+        >
+          <AcuantSelfieCaptureCanvas
+            fullScreenRef={fullScreenRef}
+            fullScreenLabel={t('doc_auth.accessible_labels.document_capture_dialog')}
+            onRequestClose={() => setIsCapturingEnvironment(false)}
+          />
+        </AcuantSelfieCamera>
+      )}
       <FileInput
         ref={inputRef}
         label={label}

app/javascript/packages/document-capture/components/acuant-selfie-camera.tsx

@@ -0,0 +1,145 @@
+import { useContext, useEffect } from 'react';
+import type { ReactNode } from 'react';
+import AcuantContext from '../context/acuant';
+
+declare global {
+  interface Window {
+    AcuantPassiveLiveness: AcuantPassiveLivenessInterface;
+  }
+}
+
+type AcuantPassiveLivenessStart = (
+  faceCaptureCallback: FaceCaptureCallback,
+  faceDetectionStates: FaceDetectionStates,
+) => void;
+
+interface AcuantPassiveLivenessInterface {
+  /**
+   * Start capture
+   */
+  start: AcuantPassiveLivenessStart;
+  /**
+   * End capture
+   */
+  end: () => void;
+}
+
+interface AcuantSelfieCameraContextProps {
+  /**
+   * Success callback
+   */
+  onImageCaptureSuccess: ({ image }: { image: string }) => void;
+  /**
+   * Failure callback
+   */
+  onImageCaptureFailure: any;
+  /**
+   * Capture open callback, tells the rest of the page
+   * when the fullscreen selfie capture page is open
+   */
+  onImageCaptureOpen: () => void;
+  /**
+   * Capture close callback, tells the rest of the page
+   * when the fullscreen selfie capture page has been closed
+   */
+  onImageCaptureClose: () => void;
+  /**
+   * React children node
+   */
+  children: ReactNode;
+}
+
+interface FaceCaptureCallback {
+  onDetectorInitialized: () => void;
+  onDetection: (text) => void;
+  onOpened: () => void;
+  onClosed: () => void;
+  onError: (error) => void;
+  onPhotoTaken: () => void;
+  onPhotoRetake: () => void;
+  onCaptured: (base64Image: Blob) => void;
+}
+
+interface FaceDetectionStates {
+  FACE_NOT_FOUND: string;
+  TOO_MANY_FACES: string;
+  FACE_ANGLE_TOO_LARGE: string;
+  PROBABILITY_TOO_SMALL: string;
+  FACE_TOO_SMALL: string;
+  FACE_CLOSE_TO_BORDER: string;
+}
+
+function AcuantSelfieCamera({
+  onImageCaptureSuccess = () => {},
+  onImageCaptureFailure = () => {},
+  onImageCaptureOpen = () => {},
+  onImageCaptureClose = () => {},
+  children,
+}: AcuantSelfieCameraContextProps) {
+  const { isReady, setIsActive } = useContext(AcuantContext);
+
+  useEffect(() => {
+    const faceCaptureCallback: FaceCaptureCallback = {
+      onDetectorInitialized: () => {
+        // This callback is triggered when the face detector is ready.
+        // Until then, no actions are executed and the user sees only the camera stream.
+        // You can opt to display an alert before the callback is triggered.
+      },
+      onDetection: () => {
+        // Triggered when the face does not pass the scan. The UI element
+        // should be updated here to provide guidence to the user
+      },
+      onOpened: () => {
+        // Camera has opened
+        onImageCaptureOpen();
+      },
+      onClosed: () => {
+        // Camera has closed
+        onImageCaptureClose();
+      },
+      onError: (error) => {
+        // Error occurred. Camera permission not granted will
+        // manifest here with 1 as error code. Unexpected errors will have 2 as error code.
+        onImageCaptureFailure({ error });
+      },
+      onPhotoTaken: () => {
+        // The photo has been taken and it's showing a preview with a button to accept or retake the image.
+      },
+      onPhotoRetake: () => {
+        // Triggered when retake button is tapped
+      },
+      onCaptured: (base64Image) => {
+        // Triggered when accept button is tapped
+        onImageCaptureSuccess({ image: `data:image/jpeg;base64,${base64Image}` });
+      },
+    };
+
+    const faceDetectionStates = {
+      FACE_NOT_FOUND: 'FACE NOT FOUND',
+      TOO_MANY_FACES: 'TOO MANY FACES',
+      FACE_ANGLE_TOO_LARGE: 'FACE ANGLE TOO LARGE',
+      PROBABILITY_TOO_SMALL: 'PROBABILITY TOO SMALL',
+      FACE_TOO_SMALL: 'FACE TOO SMALL',
+      FACE_CLOSE_TO_BORDER: 'TOO CLOSE TO THE FRAME',
+    };
+    const cleanupSelfieCamera = () => {
+      window.AcuantPassiveLiveness.end();
+      setIsActive(false);
+    };
+
+    const startSelfieCamera = () => {
+      window.AcuantPassiveLiveness.start(faceCaptureCallback, faceDetectionStates);
+      setIsActive(true);
+    };
+
+    if (isReady) {
+      startSelfieCamera();
+    }
+    // Cleanup when the AcuantSelfieCamera component is unmounted
+    return () => (isReady ? cleanupSelfieCamera() : undefined);
+  }, [isReady]);
+
+  return <>{children}</>;
+}
+
+export default AcuantSelfieCamera;

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

@@ -0,0 +1,36 @@
+import { useContext } from 'react';
+import { getAssetPath } from '@18f/identity-assets';
+import { FullScreen } from '@18f/identity-components';
+import AcuantContext from '../context/acuant';
+
+function FullScreenLoadingSpinner({ fullScreenRef, onRequestClose, fullScreenLabel }) {
+  return (
+    <FullScreen ref={fullScreenRef} label={fullScreenLabel} onRequestClose={onRequestClose}>
+      <img
+        src={getAssetPath('loading-badge.gif')}
+        alt=""
+        width="144"
+        height="144"
+        className="acuant-capture-canvas__spinner"
+      />
+    </FullScreen>
+  );
+}
+
+function AcuantSelfieCaptureCanvas({ fullScreenRef, onRequestClose, fullScreenLabel }) {
+  const { isReady } = useContext(AcuantContext);
+  // 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 ? (
+    <div id={acuantCaptureContainerId} />
+  ) : (
+    <FullScreenLoadingSpinner
+      fullScreenRef={fullScreenRef}
+      onRequestClose={onRequestClose}
+      fullScreenLabel={fullScreenLabel}
+    />
+  );
+}
+
+export default AcuantSelfieCaptureCanvas;

app/javascript/packages/document-capture/components/document-capture-review-issues.tsx

@@ -28,12 +28,8 @@ interface DocumentCaptureReviewIssuesProps {
   hasDismissed: boolean;
 }
 
-type DocumentSide = 'front' | 'back';
+type DocumentSide = 'front' | 'back' | 'selfie';
 
-/**
- * Sides of the document to present as file input.
- */
-const DOCUMENT_SIDES: DocumentSide[] = ['front', 'back'];
 function DocumentCaptureReviewIssues({
   isFailedDocType,
   remainingAttempts = Infinity,
@@ -47,7 +43,14 @@ function DocumentCaptureReviewIssues({
   hasDismissed,
 }: DocumentCaptureReviewIssuesProps) {
   const { t } = useI18n();
-  const { notReadySectionEnabled, exitQuestionSectionEnabled } = useContext(FeatureFlagContext);
+  const { notReadySectionEnabled, exitQuestionSectionEnabled, selfieCaptureEnabled } =
+    useContext(FeatureFlagContext);
+
+  // Sides of document to present as file input.
+  const documentSides: DocumentSide[] = selfieCaptureEnabled
+    ? ['front', 'back', 'selfie']
+    : ['front', 'back'];
+
   return (
     <>
       <PageHeading>{t('doc_auth.headings.review_issues')}</PageHeading>
@@ -70,7 +73,7 @@ function DocumentCaptureReviewIssues({
           ]}
         />
       )}
-      {DOCUMENT_SIDES.map((side) => (
+      {documentSides.map((side) => (
         <DocumentSideAcuantCapture
           key={side}
           side={side}

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

@@ -10,7 +10,7 @@ import AcuantCapture from './acuant-capture';
 /**
  * @typedef DocumentSideAcuantCaptureProps
  *
- * @prop {'front'|'back'} side
+ * @prop {'front'|'back'|'selfie'} side
  * @prop {RegisterFieldCallback} registerField
  * @prop {Blob|string|null|undefined} value
  * @prop {(nextValues:{[key:string]: Blob|string|null|undefined})=>void} onChange Update values,
@@ -50,9 +50,11 @@ function DocumentSideAcuantCapture({
       ref={registerField(side, { isRequired: true })}
       /* i18n-tasks-use t('doc_auth.headings.document_capture_back') */
       /* i18n-tasks-use t('doc_auth.headings.document_capture_front') */
+      /* i18n-tasks-use t('doc_auth.headings.document_capture_selfie') */
       label={t(`doc_auth.headings.document_capture_${side}`)}
       /* i18n-tasks-use t('doc_auth.headings.back') */
       /* i18n-tasks-use t('doc_auth.headings.front') */
+      /* i18n-tasks-use t('doc_auth.headings.selfie') */
       bannerText={t(`doc_auth.headings.${side}`)}
       value={value}
       onChange={(nextValue, metadata) => {

app/javascript/packages/document-capture/components/documents-step.jsx

@@ -13,7 +13,7 @@ import { FeatureFlagContext } from '../context';
 import DocumentCaptureAbandon from './document-capture-abandon';
 
 /**
- * @typedef {'front'|'back'} DocumentSide
+ * @typedef {'front'|'back'|'selfie'} DocumentSide
  */
 
 /**
@@ -25,13 +25,6 @@ import DocumentCaptureAbandon from './document-capture-abandon';
  * @prop {string=} back_image_metadata Back image metadata.
  */
 
-/**
- * Sides of document to present as file input.
- *
- * @type {DocumentSide[]}
- */
-const DOCUMENT_SIDES = ['front', 'back'];
-
 /**
  * @param {import('@18f/identity-form-steps').FormStepComponentProps<DocumentsStepValue>} props Props object.
  */
@@ -46,7 +39,16 @@ function DocumentsStep({
   const { isMobile } = useContext(DeviceContext);
   const { isLastStep } = useContext(FormStepsContext);
   const { flowPath } = useContext(UploadContext);
-  const { notReadySectionEnabled, exitQuestionSectionEnabled } = useContext(FeatureFlagContext);
+  const { notReadySectionEnabled, exitQuestionSectionEnabled, selfieCaptureEnabled } =
+    useContext(FeatureFlagContext);
+
+  /**
+   * Sides of document to present as file input.
+   *
+   * @type {DocumentSide[]}
+   */
+  const documentSides = selfieCaptureEnabled ? ['front', 'back', 'selfie'] : ['front', 'back'];
+
   return (
     <>
       {flowPath === 'hybrid' && <HybridDocCaptureWarning className="margin-bottom-4" />}
@@ -61,7 +63,7 @@ function DocumentsStep({
           t('doc_auth.tips.document_capture_id_text3'),
         ].concat(!isMobile ? [t('doc_auth.tips.document_capture_id_text4')] : [])}
       />
-      {DOCUMENT_SIDES.map((side) => (
+      {documentSides.map((side) => (
         <DocumentSideAcuantCapture
           key={side}
           side={side}

app/javascript/packages/document-capture/context/feature-flag.tsx

@@ -10,11 +10,16 @@ export interface FeatureFlagContextProps {
    * Specify whether to show exit optional questions on doc capture screen.
    */
   exitQuestionSectionEnabled: boolean;
+  /**
+   * Specify whether to show the selfie capture on the doc capture screen.
+   */
+  selfieCaptureEnabled: boolean;
 }
 
 const FeatureFlagContext = createContext<FeatureFlagContextProps>({
   notReadySectionEnabled: false,
   exitQuestionSectionEnabled: false,
+  selfieCaptureEnabled: false,
 });
 
 FeatureFlagContext.displayName = 'FeatureFlagContext';