Merge 3rd and 4th screens in mobile IAL2 flow (LG-3962)

app/javascript/packages/document-capture/components/desktop-document-disclosure.jsx

@@ -4,7 +4,7 @@ import useI18n from '../hooks/use-i18n';
 
 /**
  * Renders a document usage disclosure for desktop devices only. On mobile devices, an equivalent
- * message is displayed on the introductory step.
+ * message in the introduction.
  *
  * @type {import('react').FC}
  */

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

@@ -5,8 +5,6 @@ import { UploadFormEntriesError } from '../services/upload';
 import DocumentsStep, { documentsStepValidator } from './documents-step';
 import SelfieStep, { selfieStepValidator } from './selfie-step';
 import ReviewIssuesStep, { reviewIssuesStepValidator } from './review-issues-step';
-import MobileIntroStep from './mobile-intro-step';
-import DeviceContext from '../context/device';
 import ServiceProviderContext from '../context/service-provider';
 import Submission from './submission';
 import SubmissionStatus from './submission-status';
@@ -54,7 +52,6 @@ function DocumentCapture({ isAsyncForm = false, onStepChange }) {
   const [formValues, setFormValues] = useState(/** @type {Record<string,any>?} */ (null));
   const [submissionError, setSubmissionError] = useState(/** @type {Error=} */ (undefined));
   const { t } = useI18n();
-  const { isMobile } = useContext(DeviceContext);
   const serviceProvider = useContext(ServiceProviderContext);
 
   /**
@@ -92,11 +89,6 @@ function DocumentCapture({ isAsyncForm = false, onStepChange }) {
         },
       ]
     : /** @type {FormStep[]} */ ([
-        isMobile && {
-          name: 'intro',
-          title: t('doc_auth.headings.document_capture'),
-          form: MobileIntroStep,
-        },
         {
           name: 'documents',
           title: t('doc_auth.headings.document_capture'),

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

@@ -3,6 +3,7 @@ import AcuantCapture from './acuant-capture';
 import FormErrorMessage from './form-error-message';
 import useI18n from '../hooks/use-i18n';
 import DeviceContext from '../context/device';
+import ServiceProviderContext from '../context/service-provider';
 import withBackgroundEncryptedUpload from '../higher-order/with-background-encrypted-upload';
 
 /**
@@ -35,11 +36,38 @@ function DocumentsStep({
   errors = [],
   registerField = () => undefined,
 }) {
-  const { t } = useI18n();
+  const { t, formatHTML } = useI18n();
   const { isMobile } = useContext(DeviceContext);
+  const serviceProvider = useContext(ServiceProviderContext);
 
   return (
     <>
+      {isMobile && (
+        <>
+          <p>{t('doc_auth.info.document_capture_intro_acknowledgment')}</p>
+          <p>
+            {formatHTML(t('doc_auth.info.id_worn_html'), {
+              strong: 'strong',
+            })}
+          </p>
+        </>
+      )}
+      {serviceProvider.name && isMobile && (
+        <p>
+          {formatHTML(
+            t('doc_auth.info.no_other_id_help_bold_html', { sp_name: serviceProvider.name }),
+            {
+              strong: 'strong',
+              a: ({ children }) =>
+                serviceProvider.failureToProofURL ? (
+                  <a href={serviceProvider.failureToProofURL}>{children}</a>
+                ) : (
+                  <>{children}</>
+                ),
+            },
+          )}
+        </p>
+      )}
       <p className="margin-bottom-0">{t('doc_auth.tips.document_capture_header_text')}</p>
       <ul>
         <li>{t('doc_auth.tips.document_capture_id_text1')}</li>

app/views/idv/shared/_document_capture.html.erb

@@ -51,7 +51,24 @@
   ) do |f| %>
     <%# ---- Front Image ----- %>
 
+    <p><%= t('doc_auth.info.document_capture_intro_acknowledgment') %></p>
+
+    <p>
+      <%= t('doc_auth.info.id_worn_html') %>
+    </p>
+
+    <% if sp_name %>
+      <p>
+        <%= t(
+                'doc_auth.info.no_other_id_help_bold_html',
+                failure_to_proof_url: decorated_session.failure_to_proof_url,
+                sp_name: sp_name,
+            ) %>
+      </p>
+    <% end %>
+
     <p class="mt2 mb0"><%= t('doc_auth.tips.document_capture_header_text') %></p>
+
     <ul>
       <li><%= t('doc_auth.tips.document_capture_id_text1') %></li>
       <li><%= t('doc_auth.tips.document_capture_id_text2') %></li>

spec/javascripts/packages/document-capture/components/document-capture-spec.jsx

@@ -57,16 +57,6 @@ describe('document-capture/components/document-capture', () => {
   });
 
   context('mobile', () => {
-    it('starts with introductory step', () => {
-      const { getByText } = render(
-        <DeviceContext.Provider value={{ isMobile: true }}>
-          <DocumentCapture />
-        </DeviceContext.Provider>,
-      );
-
-      expect(getByText('doc_auth.info.document_capture_intro_acknowledgment')).to.be.ok();
-    });
-
     it('does not show document step footer', () => {
       const { getByText } = render(
         <DeviceContext.Provider value={{ isMobile: true }}>