Blackscreen Fix Attempt: Move Hint Text State Into a Hook

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

@@ -340,7 +340,6 @@ function AcuantCapture(
   const [captureAttempts, incrementCaptureAttempts] = useCounter(1);
   const [acuantFailureCookie, setAcuantFailureCookie, refreshAcuantFailureCookie] =
     useCookie('AcuantCameraHasFailed');
-  const [imageCaptureText, setImageCaptureText] = useState('');
   // 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';
@@ -513,15 +512,11 @@ function AcuantCapture(
 
   function onSelfieCaptureOpen() {
     trackEvent('idv_sdk_selfie_image_capture_opened', { captureAttempts });
-
-    setImageCaptureText('');
     setIsCapturingEnvironment(true);
   }
 
   function onSelfieCaptureClosed() {
     trackEvent('idv_sdk_selfie_image_capture_closed_without_photo', { captureAttempts });
-
-    setImageCaptureText('');
     setIsCapturingEnvironment(false);
   }
 
@@ -674,10 +669,6 @@ function AcuantCapture(
     });
   }
 
-  function onImageCaptureFeedback(text: string) {
-    setImageCaptureText(text);
-  }
-
   return (
     <div className={[className, 'document-capture-acuant-capture'].filter(Boolean).join(' ')}>
       {isCapturingEnvironment && !selfieCapture && (
@@ -703,17 +694,13 @@ function AcuantCapture(
           onImageCaptureFailure={onSelfieCaptureFailure}
           onImageCaptureOpen={onSelfieCaptureOpen}
           onImageCaptureClose={onSelfieCaptureClosed}
-          onImageCaptureFeedback={onImageCaptureFeedback}
         >
           <FullScreen
             ref={fullScreenRef}
             label={t('doc_auth.accessible_labels.document_capture_dialog')}
             hideCloseButton
           >
-            <AcuantSelfieCaptureCanvas
-              imageCaptureText={imageCaptureText}
-              onSelfieCaptureClosed={onSelfieCaptureClosed}
-            />
+            <AcuantSelfieCaptureCanvas onSelfieCaptureClosed={onSelfieCaptureClosed} />
           </FullScreen>
         </AcuantSelfieCamera>
       )}

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

@@ -2,6 +2,7 @@ import { useContext, useEffect } from 'react';
 import type { ReactNode } from 'react';
 import { t } from '@18f/identity-i18n';
 import AcuantContext from '../context/acuant';
+import useSelfieFeedbackText from '../hooks/use-selfie-feedback-text';
 
 declare global {
   interface Window {
@@ -44,11 +45,6 @@ interface AcuantSelfieCameraContextProps {
    * when the fullscreen selfie capture page has been closed
    */
   onImageCaptureClose: () => void;
-  /**
-   * Capture hint text from onDetection callback, tells the user
-   * why the acuant sdk cannot capture a selfie.
-   */
-  onImageCaptureFeedback: (text: string) => void;
   /**
    * React children node
    */
@@ -78,10 +74,10 @@ function AcuantSelfieCamera({
   onImageCaptureFailure = () => {},
   onImageCaptureOpen = () => {},
   onImageCaptureClose = () => {},
-  onImageCaptureFeedback = () => {},
   children,
 }: AcuantSelfieCameraContextProps) {
   const { isReady, setIsActive } = useContext(AcuantContext);
+  const { setSelfieFeedbackText } = useSelfieFeedbackText();
 
   useEffect(() => {
     const faceCaptureCallback: FaceCaptureCallback = {
@@ -91,16 +87,18 @@ function AcuantSelfieCamera({
         // You can opt to display an alert before the callback is triggered.
       },
       onDetection: (text) => {
-        onImageCaptureFeedback(text);
         // Triggered when the face does not pass the scan. The UI element
         // should be updated here to provide guidence to the user
+        setSelfieFeedbackText(text);
       },
       onOpened: () => {
         // Camera has opened
+        setSelfieFeedbackText('');
         onImageCaptureOpen();
       },
       onClosed: () => {
         // Camera has closed
+        setSelfieFeedbackText('');
         onImageCaptureClose();
       },
       onError: (error) => {

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

@@ -2,6 +2,7 @@ import { useContext } from 'react';
 import { getAssetPath } from '@18f/identity-assets';
 import { useI18n } from '@18f/identity-react-i18n';
 import AcuantContext from '../context/acuant';
+import useSelfieFeedbackText from '../hooks/use-selfie-feedback-text';
 
 function LoadingSpinner() {
   return (
@@ -15,19 +16,21 @@ function LoadingSpinner() {
   );
 }
 
-function AcuantSelfieCaptureCanvas({ imageCaptureText, onSelfieCaptureClosed }) {
+function AcuantSelfieCaptureCanvas({ onSelfieCaptureClosed }) {
   const { isReady } = useContext(AcuantContext);
   const { t } = useI18n();
+  const { selfieFeedbackText } = useSelfieFeedbackText();
   // 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 && <LoadingSpinner />}
       <div id={acuantCaptureContainerId}>
         <p aria-live="assertive">
-          {imageCaptureText && (
-            <span className="document-capture-selfie-feedback">{imageCaptureText}</span>
+          {selfieFeedbackText && (
+            <span className="document-capture-selfie-feedback">{selfieFeedbackText}</span>
           )}
         </p>
       </div>

app/javascript/packages/document-capture/hooks/use-selfie-feedback-text.ts

@@ -0,0 +1,12 @@
+import { useState } from 'react';
+
+/**
+ * Allows the Acuant PassiveLiveness code to change the selfie feedback text to prompt the user
+ * what they need to change. Text that might show includes: face_not_found: 'Face too small'
+ */
+function useSelfieFeedbackText() {
+  const [selfieFeedbackText, setSelfieFeedbackText] = useState('');
+  return { selfieFeedbackText, setSelfieFeedbackText };
+}
+
+export default useSelfieFeedbackText;