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 :selfie_required
+
+  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,24 +1,22 @@
 <% 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-0 tablet: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: {
             id: nil,
-            aria: { label: t('forms.buttons.continue_remote') },
+            aria: { label: @presenter.submit },
           },
           method: :put,
           url: idv_how_to_verify_url,
@@ -31,14 +29,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 margin-bottom-2">
+                  <%= 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>
@@ -72,8 +74,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 %>

config/locales/en.yml

@@ -569,6 +569,7 @@ doc_auth.headings.upload_from_phone: Use your phone to take photos
 doc_auth.headings.verify_at_post_office: Verify your identity at a Post Office
 doc_auth.headings.verify_identity: Verify your identity
 doc_auth.headings.verify_online: Verify your identity online
+doc_auth.headings.verify_online_selfie: Verify your identity online using your phone
 doc_auth.headings.welcome: Let’s verify your identity for %{sp_name}
 doc_auth.hybrid_flow_warning.explanation_html: You’re using <strong>%{app_name}</strong> to verify your identity for access to <strong>%{service_provider_name}</strong> and its services.
 doc_auth.hybrid_flow_warning.explanation_non_sp_html: You’re using <strong>%{app_name}</strong> to verify your identity.
@@ -587,6 +588,7 @@ doc_auth.info.exit.without_sp: Exit identity verification and go to your account
 doc_auth.info.getting_started_html: '%{sp_name} needs to make sure you are you — not someone pretending to be you. %{link_html}'
 doc_auth.info.getting_started_learn_more: Learn more about verifying your identity
 doc_auth.info.how_to_verify: You have the option to verify your identity online, or in person at a participating Post Office.
+doc_auth.info.how_to_verify_selfie: You have the option to verify your identity online with your phone, or in person at a participating Post Office.
 doc_auth.info.how_to_verify_troubleshooting_options_header: Want to learn more about how to verify your identity?
 doc_auth.info.hybrid_handoff: We’ll collect information about you by reading your state‑issued ID.
 doc_auth.info.hybrid_handoff_ipp_html: '<strong>Don’t have a mobile phone?</strong> You can verify your identity at a United States Post Office instead.'
@@ -615,11 +617,15 @@ doc_auth.info.tag: Recommended
 doc_auth.info.upload_from_computer: Don’t have a phone? Upload photos of your ID from this computer.
 doc_auth.info.upload_from_phone: You won’t have to sign in again, and you’ll switch back to this computer after you take photos. Your mobile phone must have a camera and a web browser.
 doc_auth.info.verify_at_post_office_description: This option is better if you don’t have a phone to take photos of your ID.
+doc_auth.info.verify_at_post_office_description_selfie: Choose this option if you don’t have a phone to take pictures.
 doc_auth.info.verify_at_post_office_instruction: You’ll enter your ID information online, and verify your identity in person at a participating Post Office.
+doc_auth.info.verify_at_post_office_instruction_selfie: You’ll enter your ID information online, and verify your identity in person at a participating Post Office.
 doc_auth.info.verify_at_post_office_link_text: Learn more about verifying in person
 doc_auth.info.verify_identity: We’ll ask for your ID, phone number, and other personal information to verify your identity against public records.
 doc_auth.info.verify_online_description: This option is better if you have a phone to take photos of your ID.
+doc_auth.info.verify_online_description_selfie: Choose this option if you have a phone to take pictures.
 doc_auth.info.verify_online_instruction: You’ll take photos of your ID to verify your identity fully online. Most users finish this process in one sitting.
+doc_auth.info.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.
 doc_auth.info.verify_online_link_text: Learn more about verifying online
 doc_auth.info.you_entered: 'You entered:'
 doc_auth.instructions.bullet1: Have a driver’s license or state ID
@@ -647,6 +653,7 @@ doc_auth.tips.document_capture_selfie_text1: Remove any clothing items or access
 doc_auth.tips.document_capture_selfie_text2: Take your photo in a well-lit place.
 doc_auth.tips.document_capture_selfie_text3: Keep your expression neutral.
 doc_auth.tips.document_capture_selfie_text4: Make sure your whole face is visible within the green circle.
+doc_auth.tips.mobile_phone_required: Mobile Phone Required
 doc_auth.tips.review_issues_id_header_text: 'Review the images of your state‑issued ID:'
 doc_auth.tips.review_issues_id_text1: Did you use a dark background?
 doc_auth.tips.review_issues_id_text2: Did you take the photo on a flat surface?
@@ -804,6 +811,7 @@ forms.buttons.confirm: Confirm
 forms.buttons.continue: Continue
 forms.buttons.continue_ipp: Continue in person
 forms.buttons.continue_remote: Continue online
+forms.buttons.continue_remote_selfie: Continue on your phone
 forms.buttons.delete: Delete
 forms.buttons.disable: Delete
 forms.buttons.edit: Edit