LG-12693 How to verify biometric design updates

app/controllers/idv/how_to_verify_controller.rb

@@ -7,6 +7,7 @@ class HowToVerifyController < ApplicationController
     include RenderConditionConcern
 
     before_action :confirm_step_allowed
+    before_action :set_how_to_verify_presenter
 
     check_or_render_not_found -> { self.class.enabled? }
 
@@ -90,5 +91,10 @@ def how_to_verify_form_params
     rescue ActionController::ParameterMissing
       ActionController::Parameters.new(selection: [])
     end
+
+    def set_how_to_verify_presenter
+      @selfie_required = idv_session.selfie_check_required
+      @presenter = Idv::HowToVerifyPresenter.new(selfie_check_required: @selfie_required)
+    end
   end
 end

app/presenters/idv/how_to_verify_presenter.rb

@@ -0,0 +1,84 @@
+# frozen_string_literal: true
+
+class Idv::HowToVerifyPresenter
+  include ActionView::Helpers::TagHelper
+  include ActionView::Helpers::TranslationHelper
+
+  attr_reader :idv_session
+
+  def initialize(selfie_check_required:)
+    @selfie_required = selfie_check_required
+  end
+
+  def how_to_verify_info
+    if @selfie_required
+      t('doc_auth.info.how_to_verify_selfie')
+    else
+      t('doc_auth.info.how_to_verify')
+    end
+  end
+
+  def asset_url
+    if @selfie_required
+      'idv/mobile-phone-icon.svg'
+    else
+      'idv/remote.svg'
+    end
+  end
+
+  def alt_text
+    if @selfie_required
+      t('image_description.phone_icon')
+    else
+      t('image_description.laptop_and_phone')
+    end
+  end
+
+  def verify_online_text
+    if @selfie_required
+      t('doc_auth.headings.verify_online_selfie')
+    else
+      t('doc_auth.headings.verify_online')
+    end
+  end
+
+  def verify_online_instruction
+    if @selfie_required
+      t('doc_auth.info.verify_online_instruction_selfie')
+    else
+      t('doc_auth.info.verify_online_instruction')
+    end
+  end
+
+  def verify_online_description
+    if @selfie_required
+      t('doc_auth.info.verify_online_description_selfie')
+    else
+      t('doc_auth.info.verify_online_description')
+    end
+  end
+
+  def submit
+    if @selfie_required
+      t('forms.buttons.continue_remote_selfie')
+    else
+      t('forms.buttons.continue_remote')
+    end
+  end
+
+  def post_office_instruction
+    if @selfie_required
+      t('doc_auth.info.verify_at_post_office_instruction_selfie')
+    else
+      t('doc_auth.info.verify_at_post_office_instruction')
+    end
+  end
+
+  def post_office_description
+    if @selfie_required
+      t('doc_auth.info.verify_at_post_office_description_selfie')
+    else
+      t('doc_auth.info.verify_at_post_office_description')
+    end
+  end
+end

app/views/idv/how_to_verify/show.html.erb

@@ -1,25 +1,23 @@
 <% self.title = t('doc_auth.headings.how_to_verify') %>
-
 <%= render PageHeadingComponent.new.with_content(t('doc_auth.headings.how_to_verify')) %>
-<p id='how-to-verify-info'><%= t('doc_auth.info.how_to_verify') %></p>
-
+<p id='how-to-verify-info'><%= @presenter.how_to_verify_info %></p>
   <div role="group" aria-labelledby="how-to-verify-info" class="border-bottom border-primary-light grid-row">
     <div class="grid-col-12 tablet:grid-col-auto">
-        <%= image_tag(
-              asset_url('idv/remote.svg'),
-              width: 88,
-              height: 88,
-              class: 'margin-right-1 margin-top-4',
-              alt: t('image_description.laptop_and_phone'),
-            ) %>
+      <%= image_tag(
+            asset_url(@presenter.asset_url),
+            width: 88,
+            height: 88,
+            class: 'margin-right-1 margin-top-4',
+            alt: @presenter.alt_text,
+          ) %>
     </div>
     <div class="grid-col-12 tablet:grid-col-fill">
     <%= simple_form_for(
           @idv_how_to_verify_form,
           html: {
             autocomplete: 'off',
             id: nil,
-            aria: { label: t('forms.buttons.continue_remote') },
+            aria: { label: @presenter.submit },
           },
           method: :put,
           url: idv_how_to_verify_url,
@@ -32,14 +30,18 @@
     <%= f.label(
           :selection_remote,
         ) do %>
-              <h2 class="margin-top-0"><%= t('doc_auth.headings.verify_online') %></h2>
-              <div>
-                <p><%= t('doc_auth.info.verify_online_instruction') %></p>
-                <p><%= t('doc_auth.info.verify_online_description') %></p>
-              </div>
-
+            <% if @selfie_required %>
+                <span class="usa-tag usa-tag--informative">
+                  <%= t('doc_auth.tips.mobile_phone_required') %>
+                </span>
+            <% end %>
+            <h2 class="margin-top-0"><%= @presenter.verify_online_text %></h2>
+            <div>
+              <p><%= @presenter.verify_online_instruction %></p>
+              <p><%= @presenter.verify_online_description %></p>
+            </div>
         <% end %>
-          <%= f.submit t('forms.buttons.continue_remote'), class: 'display-block margin-top-3 margin-bottom-5' %>
+        <%= f.submit @presenter.submit, class: 'display-block margin-top-3 margin-bottom-5' %>
     <% end %>
     </div>
   </div>
@@ -74,8 +76,8 @@
           ) do %>
             <h3 class="h2 margin-top-0"><%= t('doc_auth.headings.verify_at_post_office') %></h3>
             <div>
-              <p><%= t('doc_auth.info.verify_at_post_office_instruction') %></p>
-              <p><%= t('doc_auth.info.verify_at_post_office_description') %></p>
+              <p><%= @presenter.post_office_instruction %></p>
+              <p><%= @presenter.post_office_description %></p>
             </div>
           <% end %>
       <%= f.submit t('forms.buttons.continue_ipp'), class: 'display-block margin-top-3 margin-bottom-5', outline: true %>
@@ -106,4 +108,4 @@
         },
       ],
     ) %>
-<%= render 'idv/doc_auth/cancel', step: 'how_to_verify' %>
+<%= render 'idv/doc_auth/cancel', step: 'how_to_verify' %>

config/locales/doc_auth/en.yml

@@ -158,6 +158,7 @@ en:
       verify_at_post_office: Verify your identity at a Post Office
       verify_identity: Verify your identity
       verify_online: Verify your identity online
+      verify_online_selfie: Verify your identity online using your phone
       welcome: Let’s verify your identity for %{sp_name}
     hybrid_flow_warning:
       explanation_html: You’re using <strong>%{app_name}</strong> to verify your
@@ -185,6 +186,8 @@ en:
       getting_started_learn_more: Learn more about verifying your identity
       how_to_verify: You have the option to verify your identity online, or in person
         at a participating Post Office.
+      how_to_verify_selfie: You have the option to verify your identity online with
+        your phone, or in person at a participating Post Office.
       how_to_verify_troubleshooting_options_header: Want to learn more about how to verify your identity?
       hybrid_handoff: We’ll collect information about you by reading your state‑issued ID.
       hybrid_handoff_ipp_html: <strong>Don’t have a mobile phone?</strong> You can
@@ -223,14 +226,21 @@ en:
         camera and a web browser.
       verify_at_post_office_description: This option is better if you don’t have a
         phone to take photos of your ID.
+      verify_at_post_office_description_selfie: Choose this option if you don’t have a phone to take pictures.
       verify_at_post_office_instruction: You’ll enter your ID information online, and
         verify your identity in person at a participating Post Office.
+      verify_at_post_office_instruction_selfie: You’ll enter your ID information
+        online, and verify your identity in person at a participating Post
+        Office.
       verify_at_post_office_link_text: Learn more about verifying in person
       verify_identity: We’ll ask for your ID, phone number, and other personal
         information to verify your identity against public records.
       verify_online_description: This option is better if you have a phone to take photos of your ID.
+      verify_online_description_selfie: Choose this option if you have a phone to take pictures.
       verify_online_instruction: You’ll take photos of your ID to verify your identity
         fully online. Most users finish this process in one sitting.
+      verify_online_instruction_selfie: You’ll take photos of your ID and a photo of
+        yourself using a phone. Most users finish this process in one sitting.
       verify_online_link_text: Learn more about verifying online
       you_entered: 'You entered:'
     instructions:
@@ -266,6 +276,7 @@ en:
       document_capture_selfie_text2: Take your photo in a well-lit place.
       document_capture_selfie_text3: Keep your expression neutral.
       document_capture_selfie_text4: Make sure your whole face is visible within the green circle.
+      mobile_phone_required: Mobile Phone Required
       review_issues_id_header_text: 'Review the images of your state‑issued ID:'
       review_issues_id_text1: Did you use a dark background?
       review_issues_id_text2: Did you take the photo on a flat surface?

config/locales/doc_auth/es.yml

@@ -188,6 +188,7 @@ es:
       verify_at_post_office: Verifique su identidad en una oficina de correos
       verify_identity: Verifique su identidad
       verify_online: Verifique su identidad en línea
+      verify_online_selfie: Verifique su identidad en línea con su teléfono
       welcome: 'Verifiquemos su identidad para
%{sp_name}'
     hybrid_flow_warning:
       explanation_html: Usted está utilizando <strong>%{app_name}</strong> para
@@ -218,6 +219,8 @@ es:
       getting_started_learn_more: Obtenga más información sobre la verificación de su identidad
       how_to_verify: Tiene la opción de verificar su identidad en línea o en persona
         en una oficina de correos participante.
+      how_to_verify_selfie: Tiene la opción de verificar su identidad en línea con su
+        teléfono, o en persona en una oficina de correos participante.
       how_to_verify_troubleshooting_options_header: ¿Quiere saber más sobre cómo verificar su identidad?
       hybrid_handoff: Recopilaremos información sobre usted leyendo su documento de
         identidad expedido por el estado.
@@ -262,18 +265,26 @@ es:
         tener una cámara y un navegador web.
       verify_at_post_office_description: Esta opción es mejor si no tiene un teléfono
         para tomar fotografías de su identificación.
+      verify_at_post_office_description_selfie: Elija esta opción si no tiene un teléfono para tomar fotografías.
       verify_at_post_office_instruction: Ingresará su información de identificación en
         línea y verificará su identidad en persona en una oficina de correos
         participante.
+      verify_at_post_office_instruction_selfie: Ingresará la información de su
+        identificación en línea, y verificará su identidad en persona en una
+        oficina de correos participante.
       verify_at_post_office_link_text: Obtenga más información sobre la verificación en persona
       verify_identity: Le pediremos su identificación, número de teléfono y otros
         datos personales para verificar su identidad comparándola con los
         registros públicos.
       verify_online_description: Esta opción es mejor si tiene un teléfono para tomar
         fotografías de su identificación.
+      verify_online_description_selfie: Elija esta opción si tiene un teléfono para tomar fotografías.
       verify_online_instruction: Tomará fotografías de su identificación para
         verificar su identidad completamente en línea. La mayoría de los
         usuarios finalizan este proceso de una sola vez.
+      verify_online_instruction_selfie: Tomará con un teléfono fotos de su
+        identificación y una foto de usted. La mayoría de los usuarios logran
+        terminar este proceso en una sola sesión.
       verify_online_link_text: Obtenga más información sobre la verificación en línea
       you_entered: 'Ud. entregó:'
     instructions:
@@ -310,6 +321,7 @@ es:
       document_capture_selfie_text2: Tómese la foto en un lugar bien iluminado.
       document_capture_selfie_text3: Mantenga una expresión neutral.
       document_capture_selfie_text4: Revise que se vea su rostro completo dentro del círculo verde.
+      mobile_phone_required: Se necesita un teléfono móvil
       review_issues_id_header_text: 'Revise las imágenes de su documento de identidad
         expedido por el estado:'
       review_issues_id_text1: '¿Ha usado un fondo oscuro?'