Add StatusPageComponent for standard status page layout

app/assets/stylesheets/components/_modal.scss

@@ -80,7 +80,7 @@
 
 .modal-warning {
   &::before {
-    background-image: url('alert/warning-lg.svg');
+    background-image: url('status/warning.svg');
   }
 
   hr {

app/components/button_component.rb

@@ -1,20 +1,26 @@
 class ButtonComponent < BaseComponent
-  attr_reader :action, :icon, :outline, :tag_options
+  attr_reader :action, :icon, :big, :wide, :outline, :tag_options
 
   def initialize(
     action: ->(**tag_options, &block) { button_tag(**tag_options, &block) },
     icon: nil,
+    big: false,
+    wide: false,
     outline: false,
     **tag_options
   )
     @action = action
     @icon = icon
+    @big = big
+    @wide = wide
     @outline = outline
     @tag_options = tag_options
   end
 
   def css_class
     classes = ['usa-button', *tag_options[:class]]
+    classes << 'usa-button--big' if big
+    classes << 'usa-button--wide' if wide
     classes << 'usa-button--outline' if outline
     classes
   end

app/components/status_page_component.html.erb

@@ -0,0 +1,21 @@
+<%= image_tag(icon_src, width: 54, height: 54, alt: icon_alt, class: 'display-block margin-bottom-4') %>
+
+<%= header %>
+
+<%= content %>
+
+<% if action_buttons? %>
+  <div class="margin-top-4">
+    <% action_buttons.each do |action| %>
+      <div class="margin-top-2">
+        <%= action %>
+      </div>
+    <% end %>
+  </div>
+<% end %>
+
+<% if troubleshooting_options? %>
+  <div class="margin-top-5">
+    <%= troubleshooting_options %>
+  </div>
+<% end %>

app/components/status_page_component.rb

@@ -0,0 +1,38 @@
+class StatusPageComponent < BaseComponent
+  ICONS = {
+    warning: [],
+    error: [:lock],
+  }.freeze
+
+  renders_one :header, ::PageHeadingComponent
+  renders_many :action_buttons, ->(**button_options) do
+    ButtonComponent.new(**button_options, big: true, wide: true)
+  end
+  renders_one :troubleshooting_options
+
+  attr_reader :status, :icon
+
+  def initialize(status: :error, icon: nil)
+    if !ICONS.key?(status)
+      raise ArgumentError, "`status` #{status} is invalid, expected one of #{ICONS.keys}"
+    end
+
+    if icon && !ICONS[status].include?(icon)
+      raise ArgumentError, "`icon` #{icon} is invalid, expected one of #{ICONS[status]}"
+    end
+
+    @icon = icon
+    @status = status
+  end
+
+  def icon_src
+    image_path("status/#{[status, icon].compact.join('-')}")
+  end
+
+  def icon_alt
+    # i18n-tasks-use t('components.status_page.icons.error')
+    # i18n-tasks-use t('components.status_page.icons.warning')
+    # i18n-tasks-use t('components.status_page.icons.lock')
+    t(icon || status, scope: [:components, :status_page, :icons])
+  end
+end

app/controllers/concerns/idv/phone_otp_rate_limitable.rb

@@ -43,7 +43,7 @@ def handle_max_attempts(type)
         decorated_user,
       )
       sign_out
-      render_full_width('shared/_failure', locals: { presenter: presenter })
+      render_full_width('two_factor_authentication/_locked', locals: { presenter: presenter })
     end
 
     def decorated_user

app/controllers/concerns/two_factor_authenticatable_methods.rb

@@ -34,7 +34,7 @@ def handle_max_attempts(type)
       decorated_user,
     )
     sign_out
-    render_full_width('shared/_failure', locals: { presenter: presenter })
+    render_full_width('two_factor_authentication/_locked', locals: { presenter: presenter })
   end
 
   def require_current_password

app/controllers/users/sessions_controller.rb

@@ -121,7 +121,7 @@ def process_locked_out_user
         current_user.decorate,
       )
       sign_out
-      render_full_width('shared/_failure', locals: { presenter: presenter })
+      render_full_width('two_factor_authentication/_locked', locals: { presenter: presenter })
     end
 
     def handle_valid_authentication

app/javascript/packages/document-capture/components/warning.jsx

@@ -44,7 +44,7 @@ function Warning({
     <>
       <img
         alt={t('errors.alt.warning')}
-        src={getAssetPath('alert/warning-lg.svg')}
+        src={getAssetPath('status/warning.svg')}
         width={54}
         height={54}
         className="display-block margin-bottom-4"

app/presenters/cancellation_presenter.rb

@@ -1,32 +1,13 @@
-class CancellationPresenter < FailurePresenter
-  include ActionView::Helpers::TranslationHelper
+class CancellationPresenter
   include Rails.application.routes.url_helpers
 
   attr_reader :referer
 
   def initialize(referer:, url_options:)
-    super(:warning)
     @referer = referer
     @url_options = url_options
   end
 
-  def title
-    t('headings.cancellations.prompt')
-  end
-
-  def header
-    t('headings.cancellations.prompt')
-  end
-
-  def cancellation_warnings
-    [
-      t('users.delete.bullet_1', app_name: APP_NAME),
-      t('users.delete.bullet_2_loa1'),
-      t('users.delete.bullet_3', app_name: APP_NAME),
-      t('users.delete.bullet_4', app_name: APP_NAME),
-    ]
-  end
-
   def go_back_path
     referer_path || two_factor_options_path
   end

app/presenters/two_factor_auth_code/max_attempts_reached_presenter.rb

@@ -1,32 +1,14 @@
 module TwoFactorAuthCode
-  class MaxAttemptsReachedPresenter < FailurePresenter
+  class MaxAttemptsReachedPresenter
     include ActionView::Helpers::TranslationHelper
-    include ActionView::Helpers::UrlHelper
 
     attr_reader :type, :decorated_user
 
     def initialize(type, decorated_user)
-      super(:locked)
       @type = type
       @decorated_user = decorated_user
     end
 
-    def title
-      t('titles.account_locked')
-    end
-
-    def header
-      t('titles.account_locked')
-    end
-
-    def description(view_context)
-      [locked_reason, please_try_again(view_context)]
-    end
-
-    def troubleshooting_options
-      [read_about_two_factor_authentication, contact_support]
-    end
-
     def locked_reason
       case type.to_s
       when 'backup_code_login_attempts'
@@ -45,30 +27,5 @@ def locked_reason
         raise "Unsupported description type: #{type}"
       end
     end
-
-    def please_try_again(view_context)
-      t(
-        'two_factor_authentication.please_try_again_html',
-        countdown: view_context.render(
-          CountdownComponent.new(expiration: decorated_user.lockout_time_expiration),
-        ),
-      )
-    end
-
-    def read_about_two_factor_authentication
-      {
-        text: t('two_factor_authentication.read_about_two_factor_authentication'),
-        url: MarketingSite.help_url,
-        new_tab: true,
-      }
-    end
-
-    def contact_support
-      {
-        url: MarketingSite.contact_url,
-        text: t('idv.troubleshooting.options.contact_support', app_name: APP_NAME),
-        new_tab: true,
-      }
-    end
   end
 end

app/views/account_reset/confirm_delete_account/show.html.erb

@@ -1,7 +1,7 @@
 <% title t('account_reset.confirm_delete_account.title') %>
 <div class="margin-y-2 padding-y-6 padding-x-4 tablet:padding-x-6 border border-error rounded-xl position-relative">
   <%= image_tag(
-        asset_url('alert/fail-x.svg'),
+        asset_url('status/error.svg'),
         size: '48x48',
         alt: t('errors.alt.error'),
         class: 'pin-top pin-x margin-top-neg-3 margin-x-auto',

app/views/banned_user/show.html.erb

@@ -1,6 +1,6 @@
 <% title t('banned_user.title') %>
 
-<%= image_tag('alert/fail-x.svg', width: 54, alt: t('errors.alt.error'), class: 'display-block margin-bottom-4') %>
+<%= image_tag('status/error.svg', width: 54, alt: t('errors.alt.error'), class: 'display-block margin-bottom-4') %>
 <%= render PageHeadingComponent.new.with_content(t('banned_user.title')) %>
 <p>
   <%= t('banned_user.details') %>

app/views/idv/shared/_document_capture.html.erb

@@ -146,7 +146,7 @@
        'id-card.svg',
        'spinner.gif',
        'spinner@2x.gif',
-       'alert/warning-lg.svg',
+       'status/warning.svg',
        'idv/capture-tips-clean.svg',
        'idv/capture-tips-surface.svg',
        'idv/capture-tips-lighting.svg',

app/views/idv/shared/_error.html.erb

@@ -9,11 +9,11 @@ locals:
 * options: Array of troubleshooting options.
 %>
 <% if local_assigns.fetch(:type, :error) == :error
-  image_src = 'alert/fail-x.svg'
+  image_src = 'status/error.svg'
   troubleshooting_heading = t('idv.troubleshooting.headings.need_assistance')
   alt = t('errors.alt.error')
 else
-  image_src = 'alert/warning-lg.svg'
+  image_src = 'status/warning.svg'
   troubleshooting_heading = t('components.troubleshooting_options.default_heading')
   alt = t('errors.alt.warning')
 end

app/views/sign_up/cancellations/new.html.erb

@@ -1,21 +1,29 @@
-<%= render 'shared/failure', presenter: @presenter %>
+<% title t('headings.cancellations.prompt') %>
 
-<p class='margin-bottom-1 text-bold'>
-  <%= t('sign_up.cancel.warning_header') %>
-</p>
+<%= render StatusPageComponent.new(status: :warning) do |c| %>
+  <% c.header { t('headings.cancellations.prompt') } %>
 
-<ul class='usa-list--unstyled <%= @presenter.state_color %>-dots'>
-  <% @presenter.cancellation_warnings.each do |warning| %>
-    <li><%= warning %></li>
-  <% end %>
-</ul>
+  <p>
+    <strong><%= t('sign_up.cancel.warning_header') %></strong>
+  </p>
 
-<div class='margin-top-4'>
-  <%= button_to t('forms.buttons.cancel'), destroy_user_path,
-                method: :delete, class: 'usa-button usa-button--big usa-button--wide' %>
-</div>
+  <ul class="usa-list">
+    <li><%= t('users.delete.bullet_1', app_name: APP_NAME) %></li>
+    <li><%= t('users.delete.bullet_2_loa1') %></li>
+    <li><%= t('users.delete.bullet_3', app_name: APP_NAME) %></li>
+    <li><%= t('users.delete.bullet_4', app_name: APP_NAME) %></li>
+  </ul>
 
-<div class='margin-top-2'>
-  <%= link_to t('links.go_back'), @presenter.go_back_path,
-              class: 'usa-button usa-button--big usa-button--wide usa-button--outline' %>
-</div>
+  <% c.action_button(
+       action: ->(**tag_options, &block) do
+         button_to(destroy_user_path, method: :delete, **tag_options, &block)
+       end,
+     ) { t('forms.buttons.cancel') } %>
+
+  <% c.action_button(
+       action: ->(**tag_options, &block) do
+         link_to(@presenter.go_back_path, **tag_options, &block)
+       end,
+       outline: true,
+     ) { t('links.go_back') } %>
+<% end %>