LG-11906 Update Review Step UI with Selfie to Match Document Step with Selfie

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

@@ -14,21 +14,26 @@ import DocumentSideAcuantCapture from './document-side-acuant-capture';
 import DocumentCaptureNotReady from './document-capture-not-ready';
 import { FeatureFlagContext } from '../context';
 import DocumentCaptureAbandon from './document-capture-abandon';
+import { DocumentCaptureSubheaderOne, SelfieStepWithHeader } from './documents-step';
 
 interface DocumentCaptureReviewIssuesProps {
   isFailedDocType: boolean;
   remainingAttempts: number;
   captureHints: boolean;
   registerField: RegisterFieldCallback;
-  value: { string: Blob | string | null | undefined } | {};
+  value: {
+    front?: Blob | string | null | undefined;
+    back?: Blob | string | null | undefined;
+    selfie?: Blob | string | null | undefined;
+  };
   unknownFieldErrors: FormStepError<any>[];
   errors: FormStepError<any>[];
   onChange: (...args: any) => void;
   onError: OnErrorCallback;
   hasDismissed: boolean;
 }
 
-type DocumentSide = 'front' | 'back' | 'selfie';
+type DocumentSide = 'front' | 'back';
 
 function DocumentCaptureReviewIssues({
   isFailedDocType,
@@ -39,21 +44,20 @@ function DocumentCaptureReviewIssues({
   errors = [],
   onChange = () => undefined,
   onError = () => undefined,
-  value = {},
+  value,
   hasDismissed,
 }: DocumentCaptureReviewIssuesProps) {
   const { t } = useI18n();
   const { notReadySectionEnabled, exitQuestionSectionEnabled, selfieCaptureEnabled } =
     useContext(FeatureFlagContext);
 
   // Sides of document to present as file input.
-  const documentSides: DocumentSide[] = selfieCaptureEnabled
-    ? ['front', 'back', 'selfie']
-    : ['front', 'back'];
+  const documentSides: DocumentSide[] = ['front', 'back'];
 
   return (
     <>
       <PageHeading>{t('doc_auth.headings.review_issues')}</PageHeading>
+      <DocumentCaptureSubheaderOne selfieCaptureEnabled={selfieCaptureEnabled} />
       <UnknownError
         unknownFieldErrors={unknownFieldErrors}
         remainingAttempts={remainingAttempts}
@@ -85,6 +89,17 @@ function DocumentCaptureReviewIssues({
           className="document-capture-review-issues-step__input"
         />
       ))}
+      {selfieCaptureEnabled && (
+        <SelfieStepWithHeader
+          defaultSideProps={{
+            registerField,
+            onChange,
+            errors,
+            onError,
+          }}
+          selfieValue={value.selfie}
+        />
+      )}
       <FormStepsButton.Submit />
       {notReadySectionEnabled && <DocumentCaptureNotReady />}
       {exitQuestionSectionEnabled && <DocumentCaptureAbandon />}

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

@@ -12,8 +12,43 @@ import DocumentCaptureNotReady from './document-capture-not-ready';
 import { FeatureFlagContext } from '../context';
 import DocumentCaptureAbandon from './document-capture-abandon';
 
+export function DocumentCaptureSubheaderOne({ selfieCaptureEnabled }) {
+  const { t } = useI18n();
+  return (
+    <h2>
+      {selfieCaptureEnabled && '1. '}
+      {t('doc_auth.headings.document_capture_subheader_id')}
+    </h2>
+  );
+}
+
+export function SelfieStepWithHeader({ defaultSideProps, selfieValue }) {
+  const { t } = useI18n();
+  return (
+    <>
+      <hr className="margin-y-5" />
+      <h2>2. {t('doc_auth.headings.document_capture_subheader_selfie')}</h2>
+      <TipList
+        title={t('doc_auth.tips.document_capture_selfie_selfie_text')}
+        titleClassName="margin-bottom-0 text-bold"
+        items={[
+          t('doc_auth.tips.document_capture_selfie_text1'),
+          t('doc_auth.tips.document_capture_selfie_text2'),
+          t('doc_auth.tips.document_capture_selfie_text3'),
+        ]}
+      />
+      <DocumentSideAcuantCapture
+        {...defaultSideProps}
+        key="selfie"
+        side="selfie"
+        value={selfieValue}
+      />
+    </>
+  );
+}
+
 /**
- * @typedef {'front'|'back'|'selfie'} DocumentSide
+ * @typedef {'front'|'back'} DocumentSide
  */
 
 /**
@@ -64,10 +99,7 @@ function DocumentsStep({
     <>
       {flowPath === 'hybrid' && <HybridDocCaptureWarning className="margin-bottom-4" />}
       <PageHeading>{pageHeaderText}</PageHeading>
-      <h2>
-        {selfieCaptureEnabled && '1. '}
-        {t('doc_auth.headings.document_capture_subheader_id')}
-      </h2>
+      <DocumentCaptureSubheaderOne selfieCaptureEnabled={selfieCaptureEnabled} />
       <TipList
         titleClassName="margin-bottom-0 text-bold"
         title={t('doc_auth.tips.document_capture_selfie_id_header_text')}
@@ -86,25 +118,7 @@ function DocumentsStep({
         />
       ))}
       {selfieCaptureEnabled && (
-        <>
-          <hr className="margin-y-5" />
-          <h2>2. {t('doc_auth.headings.document_capture_subheader_selfie')}</h2>
-          <TipList
-            title={t('doc_auth.tips.document_capture_selfie_selfie_text')}
-            titleClassName="margin-bottom-0 text-bold"
-            items={[
-              t('doc_auth.tips.document_capture_selfie_text1'),
-              t('doc_auth.tips.document_capture_selfie_text2'),
-              t('doc_auth.tips.document_capture_selfie_text3'),
-            ]}
-          />
-          <DocumentSideAcuantCapture
-            {...defaultSideProps}
-            key="selfie"
-            side="selfie"
-            value={value.selfie}
-          />
-        </>
+        <SelfieStepWithHeader defaultSideProps={defaultSideProps} selfieValue={value.selfie} />
       )}
       {isLastStep ? <FormStepsButton.Submit /> : <FormStepsButton.Continue />}
       {notReadySectionEnabled && <DocumentCaptureNotReady />}

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

@@ -20,6 +20,11 @@ interface ReviewIssuesStepValue {
    */
   back: Blob | string | null | undefined;
 
+  /**
+   * Selfie image value.
+   */
+  selfie?: Blob | string | null | undefined;
+
   /**
    * Front image metadata.
    */