Refactor Alert partial to ViewComponent

.erb-lint.yml

@@ -26,7 +26,6 @@ linters:
       - '*/app/views/idv/capture_doc/document_capture.html.erb'
       - '*/app/views/idv/confirmations/show.html.erb'
       - '*/app/views/idv/doc_auth/_back.html.erb'
-      - '*/app/views/idv/doc_auth/_error_messages.html.erb'
       - '*/app/views/idv/doc_auth/_ssn_init.html.erb'
       - '*/app/views/idv/doc_auth/_ssn_update.html.erb'
       - '*/app/views/idv/doc_auth/agreement.html.erb'
@@ -47,14 +46,12 @@ linters:
       - '*/app/views/shared/_banner.html.erb'
       - '*/app/views/shared/_block_link.html.erb'
       - '*/app/views/shared/_email_languages.html.erb'
-      - '*/app/views/shared/_flashes.html.erb'
       - '*/app/views/shared/_footer_lite.html.erb'
       - '*/app/views/shared/_maintenance_window_alert.html.erb'
       - '*/app/views/shared/_masked_text.html.erb'
       - '*/app/views/shared/_nav_branded.html.erb'
       - '*/app/views/shared/_one_time_code_input.html.erb'
       - '*/app/views/shared/_personal_key.html.erb'
-      - '*/app/views/shared/_personal_key_confirmation_modal.html.erb'
       - '*/app/views/shared/_spinner_button.html.erb'
       - '*/app/views/shared/_ssn_field.html.erb'
       - '*/app/views/shared/_step_indicator.html.erb'

app/components/alert_component.html.erb

@@ -0,0 +1,5 @@
+<%= tag.div(**tag_options, class: css_class, role: role) do %>
+  <div class="usa-alert__body">
+    <%= content_tag(text_tag, content, class: 'usa-alert__text') %>
+  </div>
+<% end %>

app/components/alert_component.rb

@@ -0,0 +1,47 @@
+class AlertComponent < BaseComponent
+  VALID_TYPES = %i[info success warning error emergency other].freeze
+
+  attr_reader :type, :message, :tag_options, :text_tag
+
+  def initialize(type: :info, text_tag: 'p', message: nil, **tag_options)
+    if !VALID_TYPES.include?(type)
+      raise ArgumentError, "`type` #{type} is invalid, expected one of #{VALID_TYPES}"
+    end
+
+    @type = type
+    @message = message
+    @tag_options = tag_options
+    @text_tag = text_tag
+  end
+
+  def role
+    if type == :error
+      'alert'
+    else
+      'status'
+    end
+  end
+
+  def css_class
+    ['usa-alert', modifier_css_class, *tag_options[:class]]
+  end
+
+  def modifier_css_class
+    case type
+    when :info
+      'usa-alert--info'
+    when :success
+      'usa-alert--success'
+    when :error
+      'usa-alert--error'
+    when :warning
+      'usa-alert--warning'
+    when :emergency
+      'usa-alert--emergency'
+    end
+  end
+
+  def content
+    @message || super
+  end
+end

app/components/flash_component.html.erb

@@ -0,0 +1,3 @@
+<% alerts.each do |type, message| %>
+  <%= render AlertComponent.new(type: type, message: message.html_safe, class: 'margin-bottom-4') %>
+<% end %>

app/components/flash_component.rb

@@ -0,0 +1,28 @@
+class FlashComponent < BaseComponent
+  VALID_FLASH_TYPES = %w[error info success warning other notice alert].freeze
+
+  attr_reader :flash
+
+  def initialize(flash:)
+    @flash = flash
+  end
+
+  def alerts
+    flash.
+      to_hash.
+      slice(*VALID_FLASH_TYPES).
+      select { |_flash_type, message| message.present? }.
+      map { |flash_type, message| [alert_type(flash_type), message] }
+  end
+
+  def alert_type(flash_type)
+    case flash_type
+    when 'notice'
+      :info
+    when 'alert'
+      :error
+    else
+      flash_type.to_sym
+    end
+  end
+end

app/controllers/application_controller.rb

@@ -7,9 +7,6 @@ class ApplicationController < ActionController::Base
   include VerifySpAttributesConcern
   include EffectiveUser
 
-  FLASH_KEYS = %w[error info success warning other].freeze
-  FLASH_KEY_MAP = { 'notice' => 'info', 'alert' => 'error' }.freeze
-
   # Prevent CSRF attacks by raising an exception.
   # For APIs, you may want to use :null_session instead.
   protect_from_forgery with: :exception

app/views/accounts/_password_reset.html.erb

@@ -1,4 +1,4 @@
-<%= render 'shared/alert', { type: 'warning', text_tag: 'div' } do %>
+<%= render AlertComponent.new(type: :warning, text_tag: 'div') do %>
   <p>
     <%= t('account.index.reactivation.instructions') %>
   </p>

app/views/accounts/_pending_profile_bounced_gpo.html.erb

@@ -1,4 +1,4 @@
-<%= render 'shared/alert', { type: 'warning', text_tag: 'div' } do %>
+<%= render AlertComponent.new(type: :warning, text_tag: 'div') do %>
   <p>
     <%= t('account.index.verification.bounced') %>
   </p>

app/views/accounts/_pending_profile_gpo.html.erb

@@ -1,4 +1,4 @@
-<%= render 'shared/alert', { type: 'warning', text_tag: 'div' } do %>
+<%= render AlertComponent.new(type: :warning, text_tag: 'div') do %>
   <p>
     <%= t('account.index.verification.instructions') %>
   </p>

app/views/accounts/_personal_key.html.erb

@@ -1,4 +1,4 @@
-<%= render 'shared/alert', { type: 'warning', class: 'margin-bottom-2', text_tag: 'div' } do %>
+<%= render AlertComponent.new(type: :warning, class: 'margin-bottom-2', text_tag: 'div') do %>
   <p>
     <%= t('idv.messages.personal_key') %>
   </p>

app/views/accounts/_service_provider_continue.html.erb

@@ -1,3 +1,3 @@
-<%= render 'shared/alert', { type: 'info', text_tag: 'div' } do %>
-    <%= link_to(t('account.index.continue_to_service_provider', service_provider: view_model.sp_name), view_model.sp_session_request_url) %>
+<%= render AlertComponent.new(type: :info, text_tag: 'div') do %>
+  <%= link_to(t('account.index.continue_to_service_provider', service_provider: view_model.sp_name), view_model.sp_session_request_url) %>
 <% end %>

app/views/forgot_password/_resend_alert.html.erb

@@ -1,5 +1,5 @@
-<%= render 'shared/alert', {
-      type: 'success',
+<%= render AlertComponent.new(
+      type: :success,
       class: 'margin-bottom-4',
       message: t('notices.forgot_password.resend_email_success'),
-    } %>
+    ) %>

app/views/idv/capture_doc/capture_complete.html.erb

@@ -1,6 +1,6 @@
 <% title t('titles.doc_auth.switch_back') %>
 
-<%= render 'shared/alert', { type: 'success', class: 'margin-bottom-4' } do %>
+<%= render AlertComponent.new(type: :success, class: 'margin-bottom-4') do %>
   <%= t('doc_auth.headings.capture_complete') %>
 <% end %>
 

app/views/idv/doc_auth/_error_messages.html.erb

@@ -1,8 +1,8 @@
 <% unless flow_session[:error_message].nil? %>
-  <%= render 'shared/alert', {
-    type: 'error',
-    class: 'margin-bottom-4',
-  } do %>
+  <%= render AlertComponent.new(
+        type: :error,
+        class: 'margin-bottom-4',
+      ) do %>
     <%= flow_session[:error_message] %>
   <% end %>
 <% end %>

app/views/idv/doc_auth/_ssn_init.html.erb

@@ -1,9 +1,9 @@
 <% title t('titles.doc_auth.ssn') %>
 
-<%= render 'shared/alert', {
-  type: 'success',
-  class: 'margin-bottom-4'
-} do %>
+<%= render AlertComponent.new(
+      type: :success,
+      class: 'margin-bottom-4'
+    ) do %>
   <%= t('doc_auth.headings.capture_complete') %>
 <% end %>
 

app/views/idv/doc_auth/agreement.html.erb

@@ -1,14 +1,14 @@
 <% title t('titles.doc_auth.get_started') %>
 
-<%= render 'shared/alert', {
-  type: 'error',
-  class: [
-    'js-consent-form-alert',
-    'margin-bottom-4',
-    flow_session[:error_message].blank? && 'display-none',
-  ].select(&:present?),
-  message: flow_session[:error_message].presence || t('errors.doc_auth.consent_form'),
-} %>
+<%= render AlertComponent.new(
+      type: :error,
+      class: [
+        'js-consent-form-alert',
+        'margin-bottom-4',
+        flow_session[:error_message].blank? && 'display-none',
+      ].select(&:present?),
+      message: flow_session[:error_message].presence || t('errors.doc_auth.consent_form'),
+    ) %>
 
 <h1><%= t('doc_auth.headings.lets_go') %></h1>
 <p><%= t('doc_auth.info.lets_go') %></p>

app/views/idv/doc_auth/link_sent.html.erb

@@ -5,11 +5,11 @@
   <%= content_for(:meta_refresh) { "#{@meta_refresh}" } %>
 <% end %>
 <% if flow_session[:error_message] %>
-  <%= render 'shared/alert', {
-    type: 'error',
-    class: 'margin-bottom-4',
-    message: flow_session[:error_message],
-  } %>
+  <%= render AlertComponent.new(
+        type: :error,
+        class: 'margin-bottom-4',
+        message: flow_session[:error_message],
+      ) %>
 <% end %>
 <h1 class='margin-y-0'><%= t('doc_auth.headings.text_message') %></h1>
 
@@ -21,7 +21,7 @@
   </div>
   <div class='sm-col sm-col-9 padding-x-1 h2 margin-bottom-2 margin-top-0 margin-y-0'>
     <p><%= t('doc_auth.info.link_sent') %></p>
-    <%= render 'shared/alert', type: 'warning' do %>
+    <%= render AlertComponent.new(type: :warning) do %>
       <strong class="display-block"><%= t('doc_auth.info.keep_window_open') %></strong>
       <span class="no-js"><%= t('doc_auth.info.link_sent_complete_nojs') %></span>
       <span class="js"><%= t('doc_auth.info.link_sent_complete_js') %></span>

app/views/idv/doc_auth/send_link.html.erb

@@ -1,11 +1,11 @@
 <% title t('titles.doc_auth.take_photo') %>
 
 <% if flow_session[:error_message] %>
-  <%= render 'shared/alert', {
-        type: 'error',
+  <%= render AlertComponent.new(
+        type: :error,
         class: 'margin-bottom-4',
         message: flow_session[:error_message],
-      } %>
+      ) %>
 <% end %>
 
 <h1>

app/views/idv/phone/new.html.erb

@@ -8,11 +8,11 @@
 <% end %>
 
 <div id="form-steps-wait-alert">
-  <%= render 'shared/alert', {
-    type: 'success',
-    class: 'margin-bottom-4',
-    message: I18n.t('doc_auth.forms.doc_success'),
-  } %>
+  <%= render AlertComponent.new(
+        type: :success,
+        class: 'margin-bottom-4',
+        message: I18n.t('doc_auth.forms.doc_success'),
+      ) %>
 </div>
 
 <% title t('titles.idv.phone') %>
@@ -57,9 +57,9 @@
                          method: :put,
                          class: 'margin-top-2',
                        }) do |f| %>
-  <%= f.input :phone, required: true, 
-              input_html: { aria: { invalid: false }, 
-              class: 'sm-col-8' }, 
+  <%= f.input :phone, required: true,
+              input_html: { aria: { invalid: false },
+              class: 'sm-col-8' },
               label: t('idv.form.phone'),
               wrapper: false,
               label_html: { class: 'bold' } %>

app/views/layouts/base.html.erb

@@ -76,7 +76,7 @@
     <div class="container">
       <div class="padding-x-2 padding-y-4 tablet:padding-y-8 tablet:padding-x-10 margin-x-auto tablet:margin-bottom-8 border-box <%= local_assigns[:disable_card].present? ? '' : 'card' %>">
         <%= yield(:pre_flash_content) if content_for?(:pre_flash_content) %>
-        <%= render 'shared/flashes' %>
+        <%= render FlashComponent.new(flash: flash) %>
         <%= content_for?(:content) ? yield(:content) : yield %>
       </div>
     </div>

app/views/reactivate_account/index.html.erb

@@ -1,10 +1,10 @@
 <% title t('titles.reactivate_account') %>
 
 <div class="no-js">
-  <%= render 'shared/alert', {
-    type: 'warning',
-    class: 'margin-bottom-4',
-  } do %>
+  <%= render AlertComponent.new(
+        type: :warning,
+        class: 'margin-bottom-4',
+      ) do %>
     <div class="bold">
       <%= t('instructions.account.reactivate.modal.copy') %>
     </div>

app/views/shared/_maintenance_window_alert.html.erb

@@ -6,7 +6,7 @@
   )
 %>
 <% if maintenance_window.active? %>
-  <%= render 'shared/alert', { type: 'warning', class: 'margin-bottom-2', text_tag: 'div' } do %>
+  <%= render AlertComponent.new(type: :warning, class: 'margin-bottom-2', text_tag: 'div') do %>
     <p>
       <%= t('notices.maintenance.currently_under_maintenance_html',
             finish: l(maintenance_window.finish,

app/views/shared/_personal_key_confirmation_modal.html.erb

@@ -9,19 +9,19 @@
       </p>
 
       <div id="personal-key-alert" class="display-none">
-        <%= render 'shared/alert', {
-          type: 'error',
-          class: 'margin-bottom-4',
-          message: t('users.personal_key.confirmation_error'),
-        } %>
+        <%= render AlertComponent.new(
+              type: :error,
+              class: 'margin-bottom-4',
+              message: t('users.personal_key.confirmation_error'),
+            ) %>
       </div>
       <form id="confirm-key" method="post" action="<%= update_path %>" name="key-confirm" novalidate="novalidate">
         <%= render 'shared/personal_key_input', code: code %>
         <%= hidden_field_tag :authenticity_token, form_authenticity_token %>
         <%= render 'shared/validation_message', {
-          class: 'margin-bottom-2',
-          message: t('simple_form.required.text'),
-        } %>
+              class: 'margin-bottom-2',
+              message: t('simple_form.required.text'),
+            } %>
         <div class="clearfix margin-x-neg-2">
           <div class="col col-12 sm-col-6 padding-x-2 margin-bottom-2 tablet:margin-bottom-0 tablet:display-none">
             <button type="submit" class="usa-button usa-button--big usa-button--full-width personal-key-confirm">

app/views/shared/_sp_alert.html.erb

@@ -1,6 +1,6 @@
 <% alert = decorated_session.sp_alert(request.path) %>
 <% if alert %>
-  <%= render 'shared/alert', text_tag: 'div' do %>
+  <%= render AlertComponent.new(text_tag: 'div') do %>
     <%= raw sanitize(alert, tags: %w[a b br p], attributes: %w[href]) %>
   <% end %>
 <% end %>