app/views/idv/in_person/state_id.html.erb
<% self.title = t('titles.doc_auth.verify') %>
<% if updating_state_id %>
<%= render PageHeadingComponent.new.with_content(t('in_person_proofing.headings.update_state_id')) %>
<% else %>
<%= render PageHeadingComponent.new.with_content(t('in_person_proofing.headings.state_id_milestone_2')) %>
<% end %>
<p>
<%= t('in_person_proofing.body.state_id.info_html') %>
</p>
<%= render AlertComponent.new(
type: :info,
class: 'margin-bottom-4',
text_tag: 'div',
) do %>
<strong><%= t('in_person_proofing.body.state_id.alert_message') %></strong>
<ul class="margin-bottom-0">
<% t('in_person_proofing.body.state_id.id_types').each do | id_type | %>
<li>
<%= id_type %>
</li>
<% end %>
</ul>
<p>
<%= t('in_person_proofing.body.state_id.questions') %>
<%= link_to(
help_center_redirect_url(
category: 'verify-your-identity',
article: 'accepted-identification-documents',
),
class: 'display-inline',
) do %>
<%= t('in_person_proofing.body.state_id.learn_more_link') %>
<% end %>
</p>
<% end %>
<%= simple_form_for form,
as: 'identity_doc', # Renaming form as a workaround for aggressive browser autofill assumptions
url: url_for,
method: 'put',
html: { class: 'margin-y-5' } do |f| %>
<div class="margin-bottom-4">
<%= render ValidatedFieldComponent.new(
name: :first_name,
form: f,
input_html: { value: pii[:first_name] },
label: t('in_person_proofing.form.state_id.first_name'),
label_html: { class: 'usa-label' },
maxlength: 255,
required: true,
) %>
</div>
<div class="margin-bottom-4">
<%= render ValidatedFieldComponent.new(
name: :last_name,
form: f,
input_html: { value: pii[:last_name] },
label: t('in_person_proofing.form.state_id.last_name'),
label_html: { class: 'usa-label' },
maxlength: 255,
required: true,
) %>
</div>
<div class="margin-bottom-4">
<%= render MemorableDateComponent.new(
content_tag: 'memorable-date',
name: :dob,
day: parsed_dob&.day,
month: parsed_dob&.month,
year: parsed_dob&.year,
required: true,
min: '1900-01-01',
max: Time.zone.today,
hint: t('in_person_proofing.form.state_id.dob_hint'),
label: t('in_person_proofing.form.state_id.dob'),
form: f,
error_messages: {
missing_month_day_year: t('in_person_proofing.form.state_id.memorable_date.errors.date_of_birth.missing_month_day_year'),
range_overflow: t('in_person_proofing.form.state_id.memorable_date.errors.date_of_birth.range_overflow'),
},
range_errors: [
{
max: Time.zone.today - 13.years,
message: t(
'in_person_proofing.form.state_id.memorable_date.errors.date_of_birth.range_min_age',
app_name: APP_NAME,
),
},
],
)
%>
</div>
<div class="margin-bottom-4">
<%= render ValidatedFieldComponent.new(
name: :state_id_jurisdiction,
collection: @presenter.usps_states_territories,
form: f,
hint: t('in_person_proofing.form.state_id.state_id_jurisdiction_hint'),
input_html: { class: 'jurisdiction-state-selector' },
label: t('in_person_proofing.form.state_id.state_id_jurisdiction'),
label_html: { class: 'usa-label' },
prompt: t('in_person_proofing.form.state_id.state_id_jurisdiction_prompt'),
required: true,
selected: pii[:state_id_jurisdiction],
) %>
</div>
<div class="margin-bottom-5">
<% state_id_number_hint_default = capture do %>
<%= t('in_person_proofing.form.state_id.state_id_number_hint') %>
<% [
[t('in_person_proofing.form.state_id.state_id_number_hint_spaces'), ' '],
[t('in_person_proofing.form.state_id.state_id_number_hint_forward_slashes'), '/'],
[t('in_person_proofing.form.state_id.state_id_number_hint_asterisks'), '*'],
[t('in_person_proofing.form.state_id.state_id_number_hint_dashes'), '-', true],
].each do |text, symbol, last| %>
<span class="usa-sr-only"><%= text %><%= ',' if !last %></span>
<span aria-hidden="true"><%= symbol %></span>
<% end %>
<% end %>
<% state_id_number_hint = capture do %>
<% [
[:default, state_id_number_hint_default],
['FL', t('in_person_proofing.form.state_id.state_id_number_florida_hint_html')],
['TX', t('in_person_proofing.form.state_id.state_id_number_texas_hint')],
].each do |state, hint| %>
<%= content_tag(
:span,
hint,
class: state == :default ? nil : 'display-none',
data: { state: },
) %>
<% end %>
<% end %>
<%= render ValidatedFieldComponent.new(
name: :id_number, # Renaming field as a workaround for aggressive browser autofill assumptions
form: f,
hint: state_id_number_hint,
hint_html: { class: ['jurisdiction-extras'] },
input_html: { value: pii[:state_id_number] },
label: t('in_person_proofing.form.state_id.state_id_number'),
label_html: { class: 'usa-label' },
maxlength: 255,
required: true,
) %>
</div>
<h2> <%= t('in_person_proofing.headings.id_address') %> </h2>
<%= render ValidatedFieldComponent.new(
name: :identity_doc_address_state,
collection: @presenter.usps_states_territories,
form: f,
input_html: { class: 'address-state-selector' },
label: t('in_person_proofing.form.state_id.identity_doc_address_state'),
label_html: { class: 'usa-label' },
prompt: t('in_person_proofing.form.state_id.identity_doc_address_state_prompt'),
required: true,
selected: pii[:identity_doc_address_state],
) %>
<%= render ValidatedFieldComponent.new(
name: :identity_doc_address1,
form: f,
hint_html: { class: ['display-none', 'puerto-rico-extras'] },
hint: t('in_person_proofing.form.state_id.address1_hint'),
input_html: { value: pii[:identity_doc_address1] },
label: t('in_person_proofing.form.state_id.address1'),
label_html: { class: 'usa-label' },
maxlength: 255,
required: true,
) %>
<%= render ValidatedFieldComponent.new(
name: :identity_doc_address2,
form: f,
hint: t('in_person_proofing.form.state_id.address2_hint'),
hint_html: { class: ['display-none', 'puerto-rico-extras'] },
input_html: { value: pii[:identity_doc_address2] },
label: t('in_person_proofing.form.state_id.address2'),
label_html: { class: 'usa-label' },
maxlength: 255,
required: false,
) %>
<%= render ValidatedFieldComponent.new(
name: :identity_doc_city,
form: f,
input_html: { value: pii[:identity_doc_city] },
label: t('in_person_proofing.form.state_id.city'),
label_html: { class: 'usa-label' },
maxlength: 255,
required: true,
) %>
<div class="tablet:grid-col-8 margin-bottom-5">
<%# using :tel for mobile numeric keypad %>
<%= render ValidatedFieldComponent.new(
as: :tel,
error_messages: { patternMismatch: t('idv.errors.pattern_mismatch.zipcode') },
form: f,
input_html: { value: pii[:identity_doc_zipcode], class: 'zipcode' },
label: t('in_person_proofing.form.state_id.zipcode'),
label_html: { class: 'usa-label' },
name: :identity_doc_zipcode,
pattern: '\d{5}([\-]\d{4})?',
required: true,
) %>
</div>
<%= render ValidatedFieldComponent.new(
as: :radio_buttons,
checked: pii[:same_address_as_id],
collection: [
[t('in_person_proofing.form.state_id.same_address_as_id_yes'), true],
[t('in_person_proofing.form.state_id.same_address_as_id_no'), false],
],
form: f,
label: t('in_person_proofing.form.state_id.same_address_as_id'),
legend_html: { class: 'h2' },
name: :same_address_as_id,
required: true,
wrapper: :uswds_radio_buttons,
) %>
<%= f.submit do %>
<% if updating_state_id %>
<%= t('forms.buttons.submit.update') %>
<% else %>
<%= t('forms.buttons.continue') %>
<% end %>
<% end %>
<% end %>
<% if updating_state_id %>
<%= render 'idv/shared/back', action: 'cancel_update_state_id' %>
<% else %>
<%= render 'idv/doc_auth/cancel', step: 'state_id' %>
<% end %>
<%= javascript_packs_tag_once('formatted-fields', 'state-guidance') %>