LG-13914 Implementation: EIPP Barcode page visual tag and REAL ID updates

app/assets/stylesheets/email.css.scss

@@ -5,6 +5,8 @@
 @use 'variables/app' as *;
 @use 'variables/email' as *;
 
+@forward 'usa-tag';
+
 .gray {
   &:active,
   &:hover,

app/views/idv/in_person/ready_to_verify/show.html.erb

@@ -23,15 +23,26 @@
   <%= @presenter.barcode_heading_text %>
 <% end %>
 
-      <div class="text-center">
-        <%= render 'idv/shared/mini_logo' %>
-        <%= render BarcodeComponent.new(
-              barcode_data: @presenter.enrollment_code,
-              label: t('in_person_proofing.process.barcode.caption_label'),
-              label_formatter: Idv::InPerson::EnrollmentCodeFormatter.method(:format),
-            ) %>
-      </div>
+<%# Tag for GSA Enhanced Pilot Barcode %>
+<% if @is_enhanced_ipp %>
+  <div class="text-center margin-y-4">
+    <span class="usa-tag usa-tag--informative">
+      <%= t('in_person_proofing.body.barcode.eipp_tag') %>
+    </span>
+  </div>
+<% end %>
 
+<%# Barcode %>
+<div class="text-center">
+  <%= render 'idv/shared/mini_logo' %>
+  <%= render BarcodeComponent.new(
+        barcode_data: @presenter.enrollment_code,
+        label: t('in_person_proofing.process.barcode.caption_label'),
+        label_formatter: Idv::InPerson::EnrollmentCodeFormatter.method(:format),
+      ) %>
+</div>
+
+<%# Alert %>
 <%= render AlertComponent.new(type: :info, class: 'margin-y-4', text_tag: :div) do %>
   <p class="margin-bottom-1 margin-top-0 h3"><strong><%= t('in_person_proofing.body.barcode.deadline', deadline: @presenter.formatted_due_date) %></strong></p>
   <p><%= t('in_person_proofing.body.barcode.deadline_restart') %></p>
@@ -44,9 +55,10 @@
     <h2 class="margin-top-0 margin-bottom-2"><%= t('in_person_proofing.headings.barcode_what_to_bring') %></h2>
     <p><%= t('in_person_proofing.body.barcode.eipp_what_to_bring') %></p>
 
-    <%# Option 1: Bring a Real ID %>
+    <%# Option 1: Bring a REAL ID %>
+    <%# A. REAL ID with current address %>
     <h3 class="margin-y-2"><%= t('in_person_proofing.process.eipp_bring_id.heading') %></h3>
-    <div class="grid-row">
+    <div class="grid-row margin-top-3 margin-bottom-3">
       <%= image_tag(
             asset_url('idv/real-id.svg'),
             width: 110,
@@ -55,20 +67,45 @@
             class: 'grid-col-auto margin-left-0 margin-bottom-2',
             role: 'img',
           ) %>
-      <p class='grid-col-auto margin-left-0 tablet:grid-col-fill tablet:margin-left-3'><%= t('in_person_proofing.process.eipp_bring_id.info') %></p>
+      <div class="grid-col-auto margin-left-0 tablet:grid-col-fill tablet:margin-left-3">
+        <p class="text-bold margin-y-0"><%= t('in_person_proofing.process.eipp_bring_id_with_current_address.heading') %></p>
+        <p class="margin-y-0"><%= t('in_person_proofing.process.eipp_bring_id.info') %></p>
+      </div>
     </div>
     <hr />
 
-    <%# Option 2: Bring a standard State ID... %>
-    <h3 class="margin-y-2"><%= t('in_person_proofing.process.eipp_bring_id_plus_documents.heading') %></h3>
+    <%# B. REAL ID + two support documents %>
+    <div class="grid-row margin-top-3 margin-bottom-3">
+      <%= image_tag(
+            asset_url('idv/real-id-and-fair-evidence-documents.svg'),
+            width: 110,
+            height: 107,
+            alt: t('in_person_proofing.process.real_id_and_supporting_docs.image_alt_text'),
+            class: 'grid-col-auto margin-left-0 margin-bottom-3 tablet:margin-bottom-0',
+            role: 'img',
+          ) %>
+      <div class="grid-col-auto margin-left-0 tablet:grid-col-fill tablet:margin-left-3">
+        <p class="text-bold margin-y-0"><%= t('in_person_proofing.process.real_id_and_supporting_docs.heading') %></p>
+        <p class="margin-y-0"><%= t('in_person_proofing.process.real_id_and_supporting_docs.info') %></p>
+        <ul class="usa-list margin-top-0">
+          <% t('in_person_proofing.process.eipp_state_id_supporting_docs.info_list').each do |doc| %>
+            <li><%= doc %></li> 
+          <% end %>
+        </ul>
+      </div>
+    </div>
+    <hr />
+
+    <%# Option 2: Bring a standard state-issued ID plus supporting documents %>
+    <h3 class="margin-top-3 margin-bottom-2"><%= t('in_person_proofing.process.eipp_bring_id_plus_documents.heading') %></h3>
     <p><%= t('in_person_proofing.process.eipp_bring_id_plus_documents.info') %></p>
 
-    <%# A. State ID + Passport %>
+    <%# A. State-issued ID + Passport %>
     <div class="grid-row margin-top-3 margin-bottom-3">
       <%= image_tag(
             asset_url('idv/state-id-and-passport.svg'),
-            width: 110.46,
-            height: 129.11,
+            width: 110,
+            height: 129,
             alt: t('in_person_proofing.process.eipp_state_id_passport.image_alt_text'),
             class: 'grid-col-auto margin-left-0 margin-bottom-3 tablet:margin-bottom-0',
             role: 'img',
@@ -80,11 +117,11 @@
     </div>
     <hr />
 
-    <%# B. State ID + Military ID %>
+    <%# B. State-issued ID + military ID %>
     <div class="grid-row margin-top-3 margin-bottom-3">
       <%= image_tag(
             asset_url('idv/state-id-and-military-id.svg'),
-            width: 110.46,
+            width: 110,
             height: 93,
             alt: t('in_person_proofing.process.eipp_state_id_military_id.image_alt_text'),
             class: 'grid-col-auto margin-left-0 margin-bottom-3 tablet:margin-bottom-0',
@@ -97,11 +134,11 @@
     </div>
     <hr />
 
-    <%# C. State ID + two supporting documents %>
+    <%# C. State-issued ID + two supporting documents %>
     <div class="grid-row margin-top-3 margin-bottom-3">
       <%= image_tag(
             asset_url('idv/state-id-and-fair-evidence-documents.svg'),
-            width: 110.46,
+            width: 110,
             height: 107,
             alt: t('in_person_proofing.process.eipp_state_id_supporting_docs.image_alt_text'),
             class: 'grid-col-auto margin-left-0 margin-bottom-3 tablet:margin-bottom-0',

app/views/user_mailer/shared/_in_person_ready_to_verify.html.erb

@@ -14,6 +14,15 @@
   </h1>
 <% end %>
 
+<%# Tag for GSA Enhanced Pilot Barcode %>
+<% if @is_enhanced_ipp %>
+  <div class="text-center margin-y-4">
+    <span class="usa-tag usa-tag--informative">
+      <%= t('in_person_proofing.body.barcode.eipp_tag') %>
+    </span>
+  </div>
+<% end %>
+
 <%# Barcode %>
 <div class="text-center margin-y-4">
   <%= render 'idv/shared/mini_logo', filename: 'email/logo.png' %>
@@ -25,7 +34,7 @@
       ) %>
 </div>
 
-<%# Alert box %>
+<%# Alert %>
 <table class="info-alert margin-y-4 radius-lg">
   <tr>
     <td style="width:16px;">
@@ -38,17 +47,18 @@
   </tr>
 </table>
 
-<%# Enhanced IPP Only - What to bring section %>
+<%# Enhanced IPP Only - What to bring to the Post Office %>
 <% if @is_enhanced_ipp %>
   <section class="border-1px radius-lg border-primary-light padding-4 margin-bottom-4">
     <%# What to bring to the Post Office %>
     <h2 class="margin-bottom-2"><%= t('in_person_proofing.headings.barcode_what_to_bring') %></h2>
     <p class="margin-bottom-2"><%= t('in_person_proofing.body.barcode.eipp_what_to_bring') %></p>
 
-    <%# Option 1: Bring a Real ID %>
+    <%# Option 1: Bring a REAL ID %>
+    <%# A. REAL ID with current address %>
     <h3 class="margin-bottom-2"><%= t('in_person_proofing.process.eipp_bring_id.heading') %></h3>
     <div>
-      <table>
+      <table class="margin-bottom-3">
         <tbody>
           <tr>
             <td align="left" style="width:110px;">
@@ -58,25 +68,56 @@
                     height: 80,
                     alt: t('in_person_proofing.process.eipp_bring_id.image_alt_text'),
                     role: 'img',
-                    class: 'margin-bottom-3',
                   ) %>
             </td>
             <td style="width:24px;">
             </td>
             <td>
-              <p class="margin-bottom-3"><%= t('in_person_proofing.process.eipp_bring_id.info') %></p>
+              <p class="text-bold margin-bottom-0"><%= t('in_person_proofing.process.eipp_bring_id_with_current_address.heading') %></p>
+              <p class="margin-bottom-0"><%= t('in_person_proofing.process.eipp_bring_id.info') %></p>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <hr class="margin-bottom-3 border-primary-light border-top-0 margin-top-0">
+
+    <%# B. REAL ID + two support documents %>
+    <div>
+      <table class="margin-bottom-3">
+        <tbody>
+          <tr>
+            <td align="left" style="width:110px;">
+              <%= image_tag(
+                    asset_url('email/real-id-and-fair-evidence-documents.png'),
+                    width: 110,
+                    height: 107,
+                    alt: t('in_person_proofing.process.real_id_and_supporting_docs.image_alt_text'),
+                    role: 'img',
+                  ) %>
+            </td>
+            <td style="width:24px;">
+            </td>
+            <td>
+              <p class="text-bold margin-bottom-0"><%= t('in_person_proofing.process.real_id_and_supporting_docs.heading') %></p>
+              <p class="margin-bottom-0"><%= t('in_person_proofing.process.real_id_and_supporting_docs.info') %></p>
+              <ul class="usa-list margin-top-0">
+                <% t('in_person_proofing.process.eipp_state_id_supporting_docs.info_list').each do |doc| %>
+                  <li><%= doc %></li> 
+                <% end %>
+              </ul>
             </td>
           </tr>
         </tbody>
       </table>
     </div>
     <hr class="margin-bottom-3 border-primary-light border-top-0 margin-top-0">
 
-    <%# Option 2: Bring a standard State ID... %>
+    <%# Option 2: Bring a standard state-issued ID plus supporting documents %>
     <h3 class="margin-bottom-2"><%= t('in_person_proofing.process.eipp_bring_id_plus_documents.heading') %></h3>
     <p class="margin-bottom-3"><%= t('in_person_proofing.process.eipp_bring_id_plus_documents.info') %></p>
 
-    <%# A. State ID + Passport %>
+    <%# A. State-issued ID + Passport %>
     <table class="margin-bottom-3">
       <tbody>
         <tr>
@@ -93,14 +134,14 @@
           </td>
           <td>
             <p class="text-bold margin-bottom-0"><%= t('in_person_proofing.process.eipp_state_id_passport.heading') %></p>
-            <p class=""><%= t('in_person_proofing.process.eipp_state_id_passport.info') %></p>
+            <p><%= t('in_person_proofing.process.eipp_state_id_passport.info') %></p>
           </td>
         </tr>
       </tbody>
     </table>
     <hr class="margin-bottom-3 border-primary-light border-top-0 margin-top-0">
 
-    <%# B. State ID + Military ID %>
+    <%# B. State-issued ID + military ID %>
     <table class="margin-bottom-3">
       <tbody>
         <tr>
@@ -117,14 +158,14 @@
           </td>
           <td>
             <p class="text-bold margin-bottom-0"><%= t('in_person_proofing.process.eipp_state_id_military_id.heading') %></p>
-            <p class=""><%= t('in_person_proofing.process.eipp_state_id_military_id.info') %></p>
+            <p><%= t('in_person_proofing.process.eipp_state_id_military_id.info') %></p>
           </td>
         </tr>
       </tbody>
     </table>
     <hr class="margin-bottom-3 border-primary-light border-top-0 margin-top-0">
 
-    <%# C. State ID + two supporting documents %>
+    <%# C. State-issued ID + two supporting documents %>
     <table class="margin-bottom-2">
       <tbody>
         <tr>

config/locales/en.yml

@@ -1179,6 +1179,7 @@ in_person_proofing.body.barcode.cancel_link_text: Cancel your barcode
 in_person_proofing.body.barcode.close_window: You may now close this window.
 in_person_proofing.body.barcode.deadline: You must visit any participating Post Office by %{deadline}.
 in_person_proofing.body.barcode.deadline_restart: If you go after this deadline, your information will not be saved and you will need to restart the process.
+in_person_proofing.body.barcode.eipp_tag: GSA Enhanced Pilot Barcode
 in_person_proofing.body.barcode.eipp_what_to_bring: 'Depending on your ID, you may need to show supporting documents. Review the following options carefully:'
 in_person_proofing.body.barcode.email_sent: We have sent your barcode and the information below to the email you used to sign in
 in_person_proofing.body.barcode.learn_more: Learn more about what to bring
@@ -1284,9 +1285,10 @@ in_person_proofing.process.barcode.heading: Show your %{app_name} barcode
 in_person_proofing.process.barcode.info: The retail associate needs to scan your barcode at the top of this page. You can print this page or show it on your mobile device.
 in_person_proofing.process.eipp_bring_id_plus_documents.heading: 'Option 2: Bring a standard state-issued ID plus supporting documents'
 in_person_proofing.process.eipp_bring_id_plus_documents.info: 'You can present your standard driver’s license or state ID card, along with supporting documents from the following options A, B or C. You only need to pick ONE option:'
+in_person_proofing.process.eipp_bring_id_with_current_address.heading: A. REAL ID with current address
 in_person_proofing.process.eipp_bring_id.heading: 'Option 1: Bring a REAL ID'
 in_person_proofing.process.eipp_bring_id.image_alt_text: Real ID
-in_person_proofing.process.eipp_bring_id.info: 'If you present a Real State ID or Driver’s license, you don’t need to show supporting documents.'
+in_person_proofing.process.eipp_bring_id.info: 'If you present a REAL ID driver’s license or ID card and the address on it is your current address, you don’t need to show supporting documents.'
 in_person_proofing.process.eipp_state_id_military_id.heading: B. State-issued ID + military ID
 in_person_proofing.process.eipp_state_id_military_id.image_alt_text: State ID and Military ID
 in_person_proofing.process.eipp_state_id_military_id.info: 'Present a standard driver’s license or state ID card, along with a military ID.'
@@ -1304,6 +1306,9 @@ in_person_proofing.process.eipp_state_id_supporting_docs.info_list:
   - Vehicle registration card
   - Home insurance policy
   - Vehicle insurance policy
+in_person_proofing.process.real_id_and_supporting_docs.heading: B. REAL ID + two supporting documents
+in_person_proofing.process.real_id_and_supporting_docs.image_alt_text: REAL ID and two documents
+in_person_proofing.process.real_id_and_supporting_docs.info: 'If the address on your REAL ID is not your current address, present a REAL ID, along with two supporting documents from this list:'
 in_person_proofing.process.state_id.heading: Show your State Driver’s License or State Non-Driver’s Identification Card
 in_person_proofing.process.state_id.heading_eipp: Show your ID and supporting documents
 in_person_proofing.process.state_id.info: This must not be expired. We do not currently accept any other forms of identification, such as passports and military IDs.