LG-5373: Update troubleshooting options on the IAL2 Add your ID step

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

@@ -0,0 +1,40 @@
+import { useContext } from 'react';
+import { TroubleshootingOptions } from '@18f/identity-components';
+import { useI18n } from '@18f/identity-react-i18n';
+import ServiceProviderContext from '../context/service-provider';
+import MarketingSiteContext from '../context/marketing-site';
+
+/** @typedef {import('@18f/identity-components/troubleshooting-options').TroubleshootingOption} TroubleshootingOption */
+
+function DocumentCaptureTroubleshootingOptions() {
+  const { t } = useI18n();
+  const { documentCaptureTipsURL, supportedDocumentsURL } = useContext(MarketingSiteContext);
+  const { name: spName, getFailureToProofURL } = useContext(ServiceProviderContext);
+
+  return (
+    <TroubleshootingOptions
+      heading={t('idv.troubleshooting.headings.having_trouble')}
+      options={
+        /** @type {TroubleshootingOption[]} */ ([
+          documentCaptureTipsURL && {
+            url: documentCaptureTipsURL,
+            text: t('idv.troubleshooting.options.doc_capture_tips'),
+            isExternal: true,
+          },
+          supportedDocumentsURL && {
+            url: supportedDocumentsURL,
+            text: t('idv.troubleshooting.options.supported_documents'),
+            isExternal: true,
+          },
+          spName && {
+            url: getFailureToProofURL('document_capture_troubleshooting_options'),
+            text: t('idv.troubleshooting.options.get_help_at_sp', { sp_name: spName }),
+            isExternal: true,
+          },
+        ].filter(Boolean))
+      }
+    />
+  );
+}
+
+export default DocumentCaptureTroubleshootingOptions;

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

@@ -1,13 +1,11 @@
 import { useContext } from 'react';
 import { useI18n } from '@18f/identity-react-i18n';
-import { BlockLink } from '@18f/identity-components';
 import { FormStepsContinueButton } from './form-steps';
 import DocumentSideAcuantCapture from './document-side-acuant-capture';
 import DeviceContext from '../context/device';
-import ServiceProviderContext from '../context/service-provider';
 import withBackgroundEncryptedUpload from '../higher-order/with-background-encrypted-upload';
-import DesktopDocumentDisclosure from './desktop-document-disclosure';
 import CaptureTroubleshooting from './capture-troubleshooting';
+import DocumentCaptureTroubleshootingOptions from './document-capture-troubleshooting-options';
 import PageHeading from './page-heading';
 import StartOverOrCancel from './start-over-or-cancel';
 
@@ -48,9 +46,8 @@ function DocumentsStep({
   onError = () => {},
   registerField = () => undefined,
 }) {
-  const { t, formatHTML } = useI18n();
+  const { t } = useI18n();
   const { isMobile } = useContext(DeviceContext);
-  const serviceProvider = useContext(ServiceProviderContext);
 
   return (
     <CaptureTroubleshooting>
@@ -63,13 +60,6 @@ function DocumentsStep({
         <li>{t('doc_auth.tips.document_capture_id_text3')}</li>
         {!isMobile && <li>{t('doc_auth.tips.document_capture_id_text4')}</li>}
       </ul>
-      {serviceProvider.name && (
-        <BlockLink url={serviceProvider.getFailureToProofURL('documents_having_trouble')} isNewTab>
-          {formatHTML(t('doc_auth.info.get_help_at_sp_html', { sp_name: serviceProvider.name }), {
-            strong: 'strong',
-          })}
-        </BlockLink>
-      )}
       {DOCUMENT_SIDES.map((side) => (
         <DocumentSideAcuantCapture
           key={side}
@@ -82,7 +72,7 @@ function DocumentsStep({
         />
       ))}
       <FormStepsContinueButton />
-      <DesktopDocumentDisclosure />
+      <DocumentCaptureTroubleshootingOptions />
       <StartOverOrCancel />
     </CaptureTroubleshooting>
   );

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

@@ -1,7 +1,6 @@
 import { useContext, useState } from 'react';
 import { hasMediaAccess } from '@18f/identity-device';
 import { useI18n } from '@18f/identity-react-i18n';
-import { BlockLink } from '@18f/identity-components';
 import { FormStepsContext, FormStepsContinueButton } from './form-steps';
 import DeviceContext from '../context/device';
 import DocumentSideAcuantCapture from './document-side-acuant-capture';
@@ -10,14 +9,14 @@ import SelfieCapture from './selfie-capture';
 import FormErrorMessage from './form-error-message';
 import ServiceProviderContext from '../context/service-provider';
 import withBackgroundEncryptedUpload from '../higher-order/with-background-encrypted-upload';
-import './review-issues-step.scss';
-import DesktopDocumentDisclosure from './desktop-document-disclosure';
+import DocumentCaptureTroubleshootingOptions from './document-capture-troubleshooting-options';
 import PageHeading from './page-heading';
 import StartOverOrCancel from './start-over-or-cancel';
 import Warning from './warning';
 import MarketingSiteContext from '../context/marketing-site';
 import AnalyticsContext from '../context/analytics';
 import useDidUpdateEffect from '../hooks/use-did-update-effect';
+import './review-issues-step.scss';
 
 /** @typedef {import('@18f/identity-components/troubleshooting-options').TroubleshootingOption} TroubleshootingOption */
 
@@ -73,7 +72,7 @@ function ReviewIssuesStep({
   registerField = () => undefined,
   remainingAttempts,
 }) {
-  const { t, formatHTML } = useI18n();
+  const { t } = useI18n();
   const { isMobile } = useContext(DeviceContext);
   const serviceProvider = useContext(ServiceProviderContext);
   const { documentCaptureTipsURL } = useContext(MarketingSiteContext);
@@ -153,18 +152,8 @@ function ReviewIssuesStep({
           )}
         </>
       )}
-      {serviceProvider.name && (
-        <BlockLink
-          url={serviceProvider.getFailureToProofURL('review_issues_having_trouble')}
-          isNewTab
-        >
-          {formatHTML(t('doc_auth.info.get_help_at_sp_html', { sp_name: serviceProvider.name }), {
-            strong: 'strong',
-          })}
-        </BlockLink>
-      )}
       <FormStepsContinueButton />
-      <DesktopDocumentDisclosure />
+      <DocumentCaptureTroubleshootingOptions />
       <StartOverOrCancel />
     </>
   ) : (

app/javascript/packages/document-capture/context/marketing-site.jsx

@@ -4,10 +4,11 @@ import { createContext } from 'react';
  * @typedef MarketingSiteContext
  *
  * @prop {string} documentCaptureTipsURL Link to Help Center article with tips for document capture.
+ * @prop {string} supportedDocumentsURL Link to Help Center article detailing supported documents.
  */
 
 const MarketingSiteContext = createContext(
-  /** @type {MarketingSiteContext} */ ({ documentCaptureTipsURL: '' }),
+  /** @type {MarketingSiteContext} */ ({ documentCaptureTipsURL: '', supportedDocumentsURL: '' }),
 );
 
 MarketingSiteContext.displayName = 'MarketingSiteContext';

app/javascript/packs/document-capture.jsx

@@ -53,13 +53,18 @@ import { I18nContext } from '@18f/identity-react-i18n';
 /**
  * @typedef AppRootData
  *
- * @prop {string} documentCaptureTipsUrl URL to Marketing Site document capture tips.
- * @prop {string} appName Application canonical name.
- * @prop {string} maxCaptureAttemptsBeforeTips Number of failed attempts to allow before capture
- * tips are shown.
- * @prop {FlowPath} flowPath The user's session flow path, one of "standard" or "hybrid".
- * @prop {string} startOverUrl URL to application DELETE path for session restart.
- * @prop {string} cancelUrl URL to application path for session cancellation.
+ * @prop {string} documentCaptureTipsUrl
+ * @prop {string} supportedDocumentsUrl
+ * @prop {string} appName
+ * @prop {string} maxCaptureAttemptsBeforeTips
+ * @prop {FlowPath} flowPath
+ * @prop {string} startOverUrl
+ * @prop {string} cancelUrl
+ *
+ * @see AppContext
+ * @see MarketingSiteContext
+ * @see FailedCaptureAttemptsContext
+ * @see UploadContext
  */
 
 const { I18n: i18n, assets } = /** @type {DocumentCaptureGlobal} */ (window).LoginGov;
@@ -152,6 +157,7 @@ loadPolyfills(['fetch', 'crypto', 'url']).then(async () => {
 
   const {
     documentCaptureTipsUrl: documentCaptureTipsURL,
+    supportedDocumentsUrl: supportedDocumentsURL,
     maxCaptureAttemptsBeforeTips,
     appName,
     flowPath,
@@ -161,7 +167,7 @@ loadPolyfills(['fetch', 'crypto', 'url']).then(async () => {
 
   const App = composeComponents(
     [AppContext.Provider, { value: { appName } }],
-    [MarketingSiteContext.Provider, { value: { documentCaptureTipsURL } }],
+    [MarketingSiteContext.Provider, { value: { documentCaptureTipsURL, supportedDocumentsURL } }],
     [DeviceContext.Provider, { value: device }],
     [AnalyticsContext.Provider, { value: { addPageAction, noticeError } }],
     [

app/services/marketing_site.rb

@@ -86,6 +86,14 @@ def self.help_document_capture_tips_url
     ).to_s
   end
 
+  def self.help_document_capture_supported_documents_url
+    URI.join(
+      BASE_URL,
+      locale_segment,
+      'help/verify-your-identity/accepted-state-issued-identification/',
+    ).to_s
+  end
+
   def self.security_url
     URI.join(BASE_URL, locale_segment, 'security/').to_s
   end

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

@@ -21,6 +21,7 @@
   liveness_required: liveness_checking_enabled?.presence,
   mock_client: (DocAuthRouter.doc_auth_vendor(discriminator: session_id) == 'mock').presence,
   document_capture_tips_url: MarketingSite.help_document_capture_tips_url,
+  supported_documents_url: MarketingSite.help_document_capture_supported_documents_url,
   document_capture_session_uuid: flow_session[:document_capture_session_uuid],
   endpoint: FeatureManagement.document_capture_async_uploads_enabled? ?
     send(@step_url, step: :verify_document) :
@@ -136,8 +137,6 @@
     </div>
   <% end %> <%# end validated_form_for %>
 
-  <p class='margin-top-4 margin-bottom-0'><%= t('doc_auth.info.document_capture_upload_image') %></p>
-
   <%= render(
         'idv/doc_auth/start_over_or_cancel',
         step: 'document_capture',

config/locales/doc_auth/en.yml

@@ -153,9 +153,6 @@ en:
       document_capture_intro_acknowledgment: We’ll collect information about you by
         reading your state-issued ID. We do not store images you upload. We only
         verify your identity.
-      document_capture_upload_image: We only use your ID to verify your identity, and
-        we will not save any images.
-      get_help_at_sp_html: '<strong>Having trouble?</strong> Get help at %{sp_name}'
       image_updated: Image updated
       interstitial_eta: This might take up to a minute. We’ll load the next step
         automatically when it’s done.

config/locales/doc_auth/es.yml

@@ -180,9 +180,6 @@ es:
       document_capture_intro_acknowledgment: Recopilaremos información sobre usted
         leyendo su identificación emitida por el estado. No almacenamos las
         imágenes que subes. Solo verificamos su identidad.
-      document_capture_upload_image: Solo utilizamos su ID para verificar su identidad
-        y no guardaremos ninguna imagen.
-      get_help_at_sp_html: '<strong>¿Tienes algún problema?</strong> Obtén ayuda en %{sp_name}'
       image_updated: Imagen actualizada
       interstitial_eta: Esto puede tardar hasta un minuto. Cargaremos el siguiente
         paso automáticamente cuando esté terminado.

config/locales/doc_auth/fr.yml

@@ -189,10 +189,6 @@ fr:
         vous en lisant votre pièce d’identité officielle. Nous ne stockons pas
         les images que vous téléchargez. Nous vérifions uniquement votre
         identité.
-      document_capture_upload_image: Nous n’utilisons votre identifiant que pour
-        vérifier votre identité, et nous n’enregistrerons aucune image.
-      get_help_at_sp_html: '<strong>Vous avez des problèmes?</strong> Obtenez de
-        l’aide à %{sp_name}'
       image_updated: Image mise à jour
       interstitial_eta: Cette opération peut prendre jusqu’à une minute. Nous
         chargerons automatiquement l’étape suivante lorsqu’elle sera terminée.

spec/features/idv/doc_auth/document_capture_step_spec.rb

@@ -43,7 +43,7 @@
         expect(fake_analytics).to have_logged_event(
           Analytics::RETURN_TO_SP_FAILURE_TO_PROOF,
           step: 'document_capture',
-          location: 'documents_having_trouble',
+          location: 'document_capture_troubleshooting_options',
         )
       end
     end

spec/features/idv/doc_capture/document_capture_step_spec.rb

@@ -135,7 +135,7 @@
           expect(fake_analytics).to have_logged_event(
             Analytics::RETURN_TO_SP_FAILURE_TO_PROOF,
             step: 'document_capture',
-            location: 'documents_having_trouble',
+            location: 'document_capture_troubleshooting_options',
           )
         end
       end