In-Person-Proofing "Beta" Tag (LG-6073)

app/assets/stylesheets/components/_troubleshooting-options.scss

@@ -13,6 +13,10 @@
     height: 4px;
     width: 5rem;
   }
+
+  &.troubleshooting-options--no-bar::before {
+    content: none;
+  }
 }
 
 .troubleshooting-options__heading {

app/components/troubleshooting_options_component.html.erb

@@ -1,4 +1,10 @@
 <%= tag.section(**tag_options, class: css_class) do %>
+  <% if new_features? %>
+    <span class="usa-tag bg-accent-cool-darker text-uppercase display-inline-block">
+      <%= t('components.troubleshooting_options.new_feature') %>
+    </span>
+  <% end %>
+
   <%= header %>
   <ul class="troubleshooting-options__options">
     <% options.each do |option| %>

app/components/troubleshooting_options_component.rb

@@ -4,16 +4,25 @@ class TroubleshootingOptionsComponent < BaseComponent
 
   attr_reader :tag_options
 
-  def initialize(**tag_options)
-    @tag_options = tag_options
+  def initialize(new_features: false, **tag_options)
+    @new_features = new_features
+    @tag_options = tag_options.dup
   end
 
   def render?
     options?
   end
 
+  def new_features?
+    @new_features
+  end
+
   def css_class
-    ['troubleshooting-options', *tag_options[:class]]
+    [
+      'troubleshooting-options',
+      new_features? && 'troubleshooting-options--no-bar',
+      *tag_options[:class],
+    ].select(&:present?)
   end
 
   class TroubleshootingOptionsHeadingComponent < BaseComponent

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

@@ -15,18 +15,28 @@ import { useI18n } from '@18f/identity-react-i18n';
  * @prop {'h1'|'h2'|'h3'|'h4'|'h5'|'h6'=} headingTag
  * @prop {string=} heading
  * @prop {TroubleshootingOption[]} options
+ * @prop {boolean=} isNewFeatures
  */
 
 /**
  * @param {TroubleshootingOptionsProps} props
  */
-function TroubleshootingOptions({ headingTag = 'h2', heading, options }) {
+function TroubleshootingOptions({ headingTag = 'h2', heading, options, isNewFeatures }) {
   const { t } = useI18n();
 
   const HeadingTag = headingTag;
 
   return (
-    <section className="troubleshooting-options">
+    <section
+      className={['troubleshooting-options', isNewFeatures && 'troubleshooting-options--no-bar']
+        .filter(Boolean)
+        .join(' ')}
+    >
+      {isNewFeatures && (
+        <span className="usa-tag bg-accent-cool-darker text-uppercase display-inline-block">
+          {t('components.troubleshooting_options.new_feature')}
+        </span>
+      )}
       <HeadingTag className="troubleshooting-options__heading">
         {heading ?? t('components.troubleshooting_options.default_heading')}
       </HeadingTag>

app/javascript/packages/components/troubleshooting-options.spec.jsx

@@ -49,4 +49,24 @@ describe('TroubleshootingOptions', () => {
     expect(links[1].href).to.equal('https://example.com/2');
     expect(links[1].target).to.be.empty();
   });
+
+  it('renders a new features tag with isNewFeatures', () => {
+    const { container, getByText } = render(
+      <TroubleshootingOptions
+        heading=""
+        isNewFeatures
+        options={[
+          { text: <>Option 1</>, url: 'https://example.com/1', isExternal: true },
+          { text: 'Option 2', url: 'https://example.com/2' },
+        ]}
+      />,
+    );
+
+    expect(
+      container.firstElementChild?.classList.contains('troubleshooting-options--no-bar'),
+    ).to.eq(true, 'it hides the visual bar');
+
+    const tag = getByText('components.troubleshooting_options.new_feature');
+    expect(tag.classList.contains('text-uppercase')).to.eq(true);
+  });
 });

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

@@ -30,6 +30,7 @@ function CaptureAdvice({ onTryAgain, isAssessedAsGlare, isAssessedAsBlurry }) {
         <DocumentCaptureTroubleshootingOptions
           heading={t('idv.troubleshooting.headings.still_having_trouble')}
           location="capture_tips"
+          hasErrors
         />
       }
     >

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

@@ -15,47 +15,67 @@ interface DocumentCaptureTroubleshootingOptionsProps {
    * Location parameter to append to links.
    */
   location?: string;
+
+  /**
+   * If there are any errors (toggles whether or not to show in person proofing option)
+   */
+  hasErrors?: boolean;
 }
 
 function DocumentCaptureTroubleshootingOptions({
   heading,
   location = 'document_capture_troubleshooting_options',
+  hasErrors,
 }: DocumentCaptureTroubleshootingOptionsProps) {
   const { t } = useI18n();
-  const { getHelpCenterURL } = useContext(HelpCenterContext);
+  const { getHelpCenterURL, idvInPersonURL } = useContext(HelpCenterContext);
   const { name: spName, getFailureToProofURL } = useContext(ServiceProviderContext);
 
   return (
-    <TroubleshootingOptions
-      heading={heading}
-      options={
-        [
-          {
-            url: getHelpCenterURL({
-              category: 'verify-your-identity',
-              article: 'how-to-add-images-of-your-state-issued-id',
-              location,
-            }),
-            text: t('idv.troubleshooting.options.doc_capture_tips'),
-            isExternal: true,
-          },
-          {
-            url: getHelpCenterURL({
-              category: 'verify-your-identity',
-              article: 'accepted-state-issued-identification',
-              location,
-            }),
-            text: t('idv.troubleshooting.options.supported_documents'),
-            isExternal: true,
-          },
-          spName && {
-            url: getFailureToProofURL(location),
-            text: t('idv.troubleshooting.options.get_help_at_sp', { sp_name: spName }),
-            isExternal: true,
-          },
-        ].filter(Boolean) as TroubleshootingOption[]
-      }
-    />
+    <>
+      <TroubleshootingOptions
+        heading={heading}
+        options={
+          [
+            {
+              url: getHelpCenterURL({
+                category: 'verify-your-identity',
+                article: 'how-to-add-images-of-your-state-issued-id',
+                location,
+              }),
+              text: t('idv.troubleshooting.options.doc_capture_tips'),
+              isExternal: true,
+            },
+            {
+              url: getHelpCenterURL({
+                category: 'verify-your-identity',
+                article: 'accepted-state-issued-identification',
+                location,
+              }),
+              text: t('idv.troubleshooting.options.supported_documents'),
+              isExternal: true,
+            },
+            spName && {
+              url: getFailureToProofURL(location),
+              text: t('idv.troubleshooting.options.get_help_at_sp', { sp_name: spName }),
+              isExternal: true,
+            },
+          ].filter(Boolean) as TroubleshootingOption[]
+        }
+      />
+      {hasErrors && idvInPersonURL && (
+        <TroubleshootingOptions
+          isNewFeatures
+          heading={t('idv.troubleshooting.headings.are_you_near')}
+          options={[
+            {
+              url: idvInPersonURL,
+              text: t('idv.troubleshooting.options.verify_in_person'),
+            },
+          ]}
+        />
+      )}
+    </>
   );
 }
 

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

@@ -72,7 +72,7 @@ function DocumentsStep({
         />
       ))}
       <FormStepsContinueButton />
-      <DocumentCaptureTroubleshootingOptions />
+      <DocumentCaptureTroubleshootingOptions hasErrors={!!errors.length} />
       <StartOverOrCancel />
     </CaptureTroubleshooting>
   );

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

@@ -163,7 +163,10 @@ function ReviewIssuesStep({
       location="doc_auth_review_issues"
       remainingAttempts={remainingAttempts}
       troubleshootingOptions={
-        <DocumentCaptureTroubleshootingOptions location="post_submission_warning" />
+        <DocumentCaptureTroubleshootingOptions
+          location="post_submission_warning"
+          hasErrors={!!errors?.length}
+        />
       }
     >
       {!!unknownFieldErrors &&

app/javascript/packages/document-capture/context/help-center.jsx

@@ -20,6 +20,7 @@ import { addSearchParams } from '@18f/identity-url';
  *
  * @prop {string} helpCenterRedirectURL
  * @prop {GetHelpCenterURL} getHelpCenterURL
+ * @prop {string} idvInPersonURL
  */
 
 const HelpCenterContext = createContext(

app/javascript/packs/document-capture.jsx

@@ -58,6 +58,7 @@ import { I18nContext } from '@18f/identity-react-i18n';
  * @prop {FlowPath} flowPath
  * @prop {string} startOverUrl
  * @prop {string} cancelUrl
+ * @prop {string=} idvInPersonUrl
  *
  * @see AppContext
  * @see HelpCenterContextProvider
@@ -163,11 +164,12 @@ const noticeError = (error) =>
     flowPath,
     startOverUrl: startOverURL,
     cancelUrl: cancelURL,
+    idvInPersonUrl: idvInPersonURL,
   } = /** @type {AppRootData} */ (appRoot.dataset);
 
   const App = composeComponents(
     [AppContext.Provider, { value: { appName } }],
-    [HelpCenterContextProvider, { value: { helpCenterRedirectURL } }],
+    [HelpCenterContextProvider, { value: { helpCenterRedirectURL, idvInPersonURL } }],
     [DeviceContext.Provider, { value: device }],
     [AnalyticsContext.Provider, { value: { addPageAction, noticeError } }],
     [

app/views/idv/session_errors/_in_person_proofing_options.html.erb

@@ -0,0 +1,6 @@
+<% if IdentityConfig.store.in_person_proofing_enabled %>
+  <%= render TroubleshootingOptionsComponent.new(new_features: true) do |c| %>
+    <% c.header { t('idv.troubleshooting.headings.are_you_near') } %>
+    <% c.option(url: idv_in_person_url, new_tab: false).with_content(t('idv.troubleshooting.options.verify_in_person')) %>
+  <% end %>
+<% end %>

app/views/idv/session_errors/exception.html.erb

@@ -29,3 +29,5 @@
             ) %>
       </p>
     <% end %>
+
+<%= render partial: 'idv/session_errors/in_person_proofing_options' %>

app/views/idv/session_errors/failure.html.erb

@@ -16,11 +16,6 @@
           text: t('idv.troubleshooting.options.contact_support', app_name: APP_NAME),
           new_tab: true,
         },
-        IdentityConfig.store.in_person_proofing_enabled && {
-          url: idv_in_person_url,
-          text: t('in_person_proofing.link'),
-          new_tab: false,
-        },
       ].select(&:present?),
     ) do %>
       <p>
@@ -34,3 +29,5 @@
             ) %>
       </p>
     <% end %>
+
+<%= render partial: 'idv/session_errors/in_person_proofing_options' %>

app/views/idv/session_errors/throttled.html.erb

@@ -17,11 +17,6 @@
           text: t('idv.troubleshooting.options.contact_support', app_name: APP_NAME),
           new_tab: true,
         },
-        IdentityConfig.store.in_person_proofing_enabled && {
-          url: idv_in_person_url,
-          text: t('in_person_proofing.link'),
-          new_tab: false,
-        },
       ].select(&:present?),
     ) do %>
       <p>
@@ -35,3 +30,5 @@
             ) %>
       </p>
     <% end %>
+
+<%= render partial: 'idv/session_errors/in_person_proofing_options' %>

app/views/idv/session_errors/warning.html.erb

@@ -16,11 +16,6 @@
           text: t('idv.troubleshooting.options.get_help_at_sp', sp_name: decorated_session.sp_name),
           new_tab: true,
         },
-        IdentityConfig.store.in_person_proofing_enabled && {
-          url: idv_in_person_url,
-          text: t('in_person_proofing.link'),
-          new_tab: false,
-        },
       ].select(&:present?),
     ) do %>
       <p><%= t('idv.failure.sessions.warning') %></p>

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

@@ -38,6 +38,7 @@
       back_image_upload_url: back_image_upload_url,
       selfie_image_upload_url: selfie_image_upload_url,
       keep_alive_endpoint: sessions_keepalive_url,
+      idv_in_person_url: IdentityConfig.store.in_person_proofing_enabled ? idv_in_person_url : nil,
     } %>
 <div class="no-js">
   <%= render 'idv/doc_auth/error_messages', flow_session: flow_session %>

config/locales/components/en.yml

@@ -14,3 +14,4 @@ en:
         warning: Warning
     troubleshooting_options:
       default_heading: 'Having trouble? Here’s what you can do:'
+      new_feature: New Feature

config/locales/components/es.yml

@@ -14,3 +14,4 @@ es:
         warning: Advertencia
     troubleshooting_options:
       default_heading: '¿Tiene alguna dificultad? Esto es lo que puede hacer:'
+      new_feature: Nueva función

config/locales/components/fr.yml

@@ -14,3 +14,4 @@ fr:
         warning: Avertissement
     troubleshooting_options:
       default_heading: 'Des difficultés? Voici ce que vous pouvez faire:'
+      new_feature: Nouvelle fonction

config/locales/idv/en.yml

@@ -154,6 +154,7 @@ en:
         review: Re-enter your %{app_name} password to protect your data
     troubleshooting:
       headings:
+        are_you_near: 'Are you near Washington, D.C.?'
         missing_required_items: Are you missing one of these items?
         need_assistance: 'Need immediate assistance? Here’s how to get help:'
         still_having_trouble: Still having trouble?
@@ -167,3 +168,4 @@ en:
         learn_more_verify_by_phone: Learn more about verifying your phone number
         supported_documents: See a list of accepted state-issued IDs
         verify_by_mail: Verify your address by mail instead
+        verify_in_person: Verify your ID in person at a Post Office

config/locales/idv/es.yml

@@ -161,6 +161,7 @@ es:
         review: Vuelve a ingresar tu contraseña de %{app_name} para encriptar tus datos
     troubleshooting:
       headings:
+        are_you_near: '¿Se encuentra cerca de Washington D. C.?'
         missing_required_items: '¿Le falta alguno de estos puntos?'
         need_assistance: '¿Necesita ayuda inmediata? Así es como puede obtener ayuda:'
         still_having_trouble: '¿Sigue teniendo dificultades?'
@@ -176,3 +177,5 @@ es:
         supported_documents: Vea la lista de documentos de identidad emitidos por el
           estado que son aceptados
         verify_by_mail: Verifique su dirección por correo
+        verify_in_person: Verifique su identificación de manera presencial en una
+          oficina de correos

config/locales/idv/fr.yml

@@ -173,6 +173,7 @@ fr:
         review: Entrez à nouveau votre mot de passe %{app_name} pour crypter vos données
     troubleshooting:
       headings:
+        are_you_near: Êtes-vous près de Washington, D.C.?
         missing_required_items: Est-ce qu’il vous manque un de ces éléments?
         need_assistance: 'Avez-vous besoin d’une assistance immédiate? Voici comment
           obtenir de l’aide:'
@@ -187,3 +188,4 @@ fr:
         learn_more_verify_by_phone: En savoir plus sur la vérification de votre numéro de téléphone
         supported_documents: Voir la liste des pièces d’identité acceptées et délivrées par l’État
         verify_by_mail: Vérifiez plutôt votre adresse par courrier
+        verify_in_person: Vérifiez votre identité en personne dans un bureau de poste

config/locales/in_person_proofing/en.yml

@@ -3,4 +3,3 @@ en:
   in_person_proofing:
     headings:
       welcome: Verify your identity in person
-    link: Verify your identity in person

config/locales/in_person_proofing/es.yml

@@ -3,4 +3,3 @@ es:
   in_person_proofing:
     headings:
       welcome: Verifica tu identidad en persona
-    link: Verifica tu identidad en persona