LG-14323 add content about selfie sdk

Makefile

@@ -239,7 +239,7 @@ normalize_yaml: ## Normalizes YAML files (alphabetizes keys, fixes line length,
 optimize_svg: ## Optimizes SVG images
 	# Exclusions:
 	# - `login-icon-bimi.svg` is hand-optimized and includes required metadata that would be stripped by SVGO
-	find app/assets/images public -name '*.svg' -not -name 'login-icon-bimi.svg' | xargs ./node_modules/.bin/svgo
+	find app/assets/images public -name '*.svg' -not -name 'login-icon-bimi.svg' -not -name 'selfie-capture-accept-help.svg' | xargs ./node_modules/.bin/svgo
 
 optimize_assets: optimize_svg ## Optimizes all assets
 

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

@@ -327,12 +327,11 @@ function AcuantCapture(
   } = useContext(AcuantContext);
   const { isMockClient } = useContext(UploadContext);
   const { trackEvent } = useContext(AnalyticsContext);
-  const { isSelfieCaptureEnabled } = useContext(SelfieCaptureContext);
+  const { isSelfieCaptureEnabled, immediatelyBeginCapture } = useContext(SelfieCaptureContext);
   const fullScreenRef = useRef<FullScreenRefHandle>(null);
   const inputRef = useRef<HTMLInputElement>(null);
   const isForceUploading = useRef(false);
   const isSuppressingClickLogging = useRef(false);
-  const [isCapturingEnvironment, setIsCapturingEnvironment] = useState(false);
   const [ownErrorMessage, setOwnErrorMessage] = useState<string | null>(null);
   const [hasStartedCropping, setHasStartedCropping] = useState(false);
   useMemo(() => setOwnErrorMessage(null), [value]);
@@ -350,6 +349,9 @@ function AcuantCapture(
   // This hook does that.
   const isBackOfId = name === 'back';
   useLogCameraInfo({ isBackOfId, hasStartedCropping });
+  const [isCapturingEnvironment, setIsCapturingEnvironment] = useState(
+    selfieCapture && immediatelyBeginCapture,
+  );
 
   const {
     failedCaptureAttempts,

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

@@ -157,12 +157,12 @@ function AcuantSelfieCamera({
       CAPTURE_ALT: t('doc_auth.info.selfie_capture.action.capture'),
     };
     const cleanupSelfieCamera = () => {
-      window.AcuantPassiveLiveness.end();
+      window.AcuantPassiveLiveness?.end();
       setIsActive(false);
     };
 
     const startSelfieCamera = () => {
-      window.AcuantPassiveLiveness.start(faceCaptureCallback, faceDetectionStates);
+      window.AcuantPassiveLiveness?.start(faceCaptureCallback, faceDetectionStates);
       setIsActive(true);
     };
 

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

@@ -0,0 +1,29 @@
+import { render } from '@testing-library/react';
+import AcuantSelfieInstructions from './acuant-selfie-instructions';
+
+describe('SelfieInstructions', () => {
+  let getByText;
+  let queryAllByRole;
+
+  beforeEach(() => {
+    const renderedComponent = render(<AcuantSelfieInstructions />);
+    getByText = renderedComponent.getByText;
+    queryAllByRole = renderedComponent.queryAllByRole;
+  });
+
+  it('renders the header', () => {
+    expect(getByText('doc_auth.headings.selfie_instructions.howto')).to.exist();
+  });
+
+  it('renders the instruction graphics', () => {
+    expect(queryAllByRole('img').length).to.equal(2);
+  });
+
+  it('renders the first instruction block', () => {
+    expect(getByText('doc_auth.info.selfie_capture_help_1')).to.exist();
+  });
+
+  it('renders the second instruction block', () => {
+    expect(getByText('doc_auth.info.selfie_capture_help_2')).to.exist();
+  });
+});

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

@@ -0,0 +1,26 @@
+import { getAssetPath } from '@18f/identity-assets';
+import { t } from '@18f/identity-i18n';
+
+export default function AcuantSelfieInstructions() {
+  return (
+    <>
+      <div className="margin-bottom-1 text-bold">
+        {t('doc_auth.headings.selfie_instructions.howto')}
+      </div>
+      <div className="display-flex">
+        <img
+          src={getAssetPath('idv/selfie-capture-help.svg')}
+          alt={t('doc_auth.alt.selfie_help_1')}
+        />
+        <div className="margin-left-2">{t('doc_auth.info.selfie_capture_help_1')}</div>
+      </div>
+      <div className="display-flex margin-top-1">
+        <img
+          src={getAssetPath('idv/selfie-capture-accept-help.svg')}
+          alt={t('doc_auth.alt.selfie_help_2')}
+        />
+        <div className="margin-left-2">{t('doc_auth.info.selfie_capture_help_2')}</div>
+      </div>
+    </>
+  );
+}

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

@@ -82,6 +82,7 @@ function DocumentCaptureReviewIssues({
           defaultSideProps={defaultSideProps}
           selfieValue={value.selfie}
           isReviewStep
+          showHelp={false}
         />
       )}
       <FormStepsButton.Submit />