187579400 update flash (#3854)

* add BS4 view to flash partial * updates flash partial for bs4, updates progress and bs4 layouts to render new flash * fix underscore on close button * close icon work * white space fix * map legacy alert type to bs4, update flash layout to work well with larger messages, accessibility updates * add success case, more whitespace cleanup * update alert-error to use correct border and add error icon * move container out of layout, update padding on header to match footer * update padding and margins on flash * simplify flash in progress layout now that we have flash in its own container * unrelated fix for failed validations, replace old alert style, add missing legacy style in BS4 flash style map, add new alert style, update flash margin, * adds @bs4 arguments for render_flash calls and restores horizontal status in bs4 layout * rename flash type helper method * update info step 1 banner (#3860) * adds warning option to DOB error, updates error_messages partial to handle error option and use new UI * remove left padding for list in alert * remove unneeded classes * remove padding style * updates classes for error banner to match mockups * move flash into content column for progress layout, remove mt class from flash to allow layouts to drive top margin
ideacrew · Sep 13, 2024 · eb5e918 · eb5e918
1 parent 62b744b
commit eb5e918
Show file tree

Hide file tree

Showing 9 changed files with 74 additions and 24 deletions.
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
@@ -348,30 +348,44 @@ def link_to_add_fields(name, f, association, classes = '')
             '#', class: "add_fields #{classes}", data: {id: id, fields: fields.gsub("\n", "")})
   end
 
-  def render_flash
+  def render_flash(use_bs4 = false)
     rendered = []
     flash.each do |type, messages|
       next if messages.blank? || (messages.respond_to?(:include?) && messages.include?("nil is not a symbol nor a string"))
 
       if messages.respond_to?(:each)
         messages.each do |m|
-          rendered << get_flash(type, m) if m.present?
+          rendered << get_flash(use_bs4, type, m) if m.present?
         end
       else
-        rendered << get_flash(type, messages)
+        rendered << get_flash(use_bs4, type, messages)
       end
     end
     sanitize_html(rendered.join)
   end
 
-  def get_flash(type, msg)
+  def get_flash(use_bs4, type, msg)
+    type = use_bs4 ? get_flash_type(type) : type
     if is_announcement?(msg)
       render(:partial => 'layouts/announcement_flash', :locals => {:type => type, :message => msg[:announcement]})
     else
       render(:partial => 'layouts/flash', :locals => {:type => type, :message => msg})
     end
   end
 
+  def get_flash_type(type)
+    case type
+    when "notice"
+      "info"
+    when "warning", "message" 
+      "warning"
+    when "success"
+      "success"
+    else 
+      "severe"
+    end
+  end
+
   def is_announcement?(item)
     item.respond_to?(:keys) && item[:is_announcement]
   end

diff --git a/app/javascript/css/alerts.scss b/app/javascript/css/alerts.scss
@@ -53,6 +53,12 @@
   border-radius: 6px;
 }
 
+.alert-severe {
+  background-color: var(--error-tint);
+  border-color: var(--error-color);
+  color: var(--error-shade);
+}
+
 .alert-warning, .notice-warning {
   background-color: var(--warning-tint);
   border-color: var(--warning-color);
@@ -76,6 +82,14 @@
   margin-right: .25em;
 }
 
+.severe-icon {
+  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='10' fill='%23A21E1F'/%3E%3Cline x1='8.46451' y1='8.46448' x2='15.5356' y2='15.5355' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='15.5356' y1='8.46451' x2='8.46458' y2='15.5356' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: center;
+  color: transparent !important;
+  font-size: 27px !important;
+}
+
 .warning-icon {
   background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.49845 2.29672C10.5292 0.234426 13.4708 0.234426 14.5016 2.29672L22.9501 19.2003C23.8802 21.0612 22.5273 23.25 20.4485 23.25H3.55146C1.47273 23.25 0.11977 21.0612 1.0499 19.2003L9.49845 2.29672Z' fill='%23FFD600' stroke='%233B3A39' stroke-width='1.5'/%3E%3Cpath d='M13.0089 15.8215H11.0074L10.589 7.80707H13.4273L13.0089 15.8215ZM10.5562 18.627C10.5562 18.1676 10.6793 17.8203 10.9254 17.5852C11.1714 17.35 11.5297 17.2325 12 17.2325C12.4539 17.2325 12.8039 17.3528 13.05 17.5934C13.3015 17.834 13.4273 18.1786 13.4273 18.627C13.4273 19.059 13.3015 19.4008 13.05 19.6524C12.7984 19.8985 12.4484 20.0215 12 20.0215C11.5406 20.0215 11.1851 19.9012 10.9336 19.6606C10.682 19.4145 10.5562 19.07 10.5562 18.627Z' fill='%233B3A39'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
@@ -91,3 +105,11 @@
   color: transparent !important;
   font-size: 27px !important;
 }
+
+.close-icon {
+  background-image: url("data:image/svg+xml, %3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z' fill='gray' /%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: center;
+  color: transparent !important;
+  font-size: 27px !important;
+}
diff --git a/app/models/forms/consumer_candidate.rb b/app/models/forms/consumer_candidate.rb
@@ -160,8 +160,7 @@ def age_less_than_18
       return unless (self.dob_check == "false" || self.dob_check.blank?) && self.dob.present?
 
       if ::TimeKeeper.date_of_record.year - self.dob.year < 18
-        continue_substring_key = EnrollRegistry.feature_enabled?(:bs4_consumer_flow) ? "continue_next" : "continue"
-        errors.add(:base, l10n("insured.match_person.dob_valid_error", continue_substring: l10n(continue_substring_key).downcase), :level => :warning)
+        errors.add(:base, "Please verify your date of birth. If it's correct, please continue.", :level => :warning)
         self.dob_check = true
       else
         self.dob_check = false

diff --git a/app/views/layouts/_flash.html.erb b/app/views/layouts/_flash.html.erb
@@ -1,10 +1,24 @@
-<div class="row flash module">
-  <div class="alert alert-<%= type %>" style="width: 100%; margin-top: 0px !important;">
-    <div class="container">
-      <div class="col-xs-12" style="width: 100%; max-width: 1170px; margin: auto;">
-        <a class="close" data-dismiss="alert" href="#">×</a>
+<% if @bs4 %>
+  <div class="container mb-0 px-0">
+    <div class="alert alert-<%= type %> d-flex flash" role="alert">
+      <div class="pl-1">
+        <div class="<%= type %>-icon icon" alt=<%= type %>>&nbsp;</div>
+      </div>
+      <div class="col my-1 mr-auto p-0 align-self-center">
         <%= raw message %>
       </div>
+      <a class="close-icon icon pr-1 align-self-start" alt="Close" href="#">&nbsp;</a>
+    </div>
+  </div>
+<% else %>
+  <div class="row flash module">
+    <div class="alert alert-<%= type %>" style="width: 100%; margin-top: 0px !important;">
+      <div class="container">
+        <div class="col-xs-12" style="width: 100%; max-width: 1170px; margin: auto;">
+          <a class="close" data-dismiss="alert" href="#">×</a>
+          <%= raw message %>
+        </div>
+      </div>
     </div>
   </div>
-</div>
+<% end %>
diff --git a/app/views/layouts/bootstrap_4.html.erb b/app/views/layouts/bootstrap_4.html.erb
@@ -51,7 +51,9 @@
         <%= render 'users/security_question_responses/modal' %>
       <% end %>
 
-      <%= render_flash %>
+      <div class=<%= "mt-4" if @bs4 %>>
+       <%= render_flash use_bs4: @bs4 %>
+      </div>
 
       <aside class="container">
         <%= yield :horizontal_status %>

diff --git a/app/views/layouts/bootstrap_4_two_column.html.erb b/app/views/layouts/bootstrap_4_two_column.html.erb
@@ -40,7 +40,7 @@
         </div>
         <div class="col-md-10">
           <div class="col-xs-12 notice">
-            <%= render_flash %>
+            <%= render_flash use_bs4: @bs4 %>
           </div>
           <%= yield %>
         </div>

diff --git a/app/views/layouts/progress.html.erb b/app/views/layouts/progress.html.erb
@@ -44,8 +44,6 @@
         <%= render 'users/security_question_responses/modal' %>
       <% end %>
 
-      <%= render_flash %>
-
       <div class="mt-4 mb-4">
         <div class="container mt-4">
           <div class="row">
@@ -67,6 +65,7 @@
                             back_to_account_flag: content_for?(:back_to_account_flag) ? yield(:back_to_account_flag) : EnrollRegistry.feature_enabled?(:back_to_account_all_shop) } %>
             </div>
             <div class="col-sm-12 col-md-12 col-lg-9 pl-4">
+              <%= render_flash use_bs4: @bs4 %>
               <% if content_for? :content %>
                 <%= yield :content %>
               <% else %>

diff --git a/app/views/shared/_error_messages.html.erb b/app/views/shared/_error_messages.html.erb
@@ -1,21 +1,21 @@
 <% if object.errors.any? %>
 	<% if @bs4 %>
 		<% is_only_warning = object.errors.details.values.all? {|error_type| error_type.all? {|details| details[:level] == :warning}} %>
-		<% type = is_only_warning ? "warning" : "error" %>
+		<% type = is_only_warning ? "warning" : "severe" %>
 		<div class="mt-2 mb-0 px-0">
    			<div class="alert alert-<%= type %> d-flex flash" role="alert">
-          <div class="pl-1">
-            <div class="<%= type %>-icon icon" alt=<%= type %>>&nbsp;</div>
-          </div>
+      			<div class="pl-1">
+        			<div class="<%= type %>-icon icon" alt=<%= type %>>&nbsp;</div>
+      			</div>
 				<div class="mt-2 p-0 align-self-center">
-					<p><%= l10n('insured.consumer_roles.error_prompt') %></p>
+					<label class="weight-n">You need to correct the following errors:</label>
 					<ul class="list-unstyled">
 						<% object.errors.each do |attr, msg| %>
 							<% if attr == :base %>
 								<li><%= "#{msg}" %></li>
 							<% else %>
 								<% attr = (attr == :gender && EnrollRegistry.feature_enabled?(:gender_to_sex)) ? "sex" : attr %>
-								<li><%= attr.to_s.titleize %>: <%= h(msg) %></li>
+								<li><%= attr.to_s.titleize %>: <%= raw(msg) %></li>
 							<% end %>
 						<% end %>
 					</ul>
@@ -37,4 +37,4 @@
 			</ul>
 		</div>
 	<% end %>
-<% end %>
+<% end %>
diff --git a/app/views/ui-components/bs4/v1/navs/_header.html.erb b/app/views/ui-components/bs4/v1/navs/_header.html.erb
@@ -1,7 +1,7 @@
 <hidden id='dchbx_enroll_date_of_record' class='d-none'><%= TimeKeeper.date_of_record.iso8601 %></hidden>
 <header class="bg-white navbar-primary py-2 <%= 'pre_prod_nav_color' if ENV['ENROLL_REVIEW_ENVIRONMENT'] == true %>">
 
-  <nav class="navbar navbar-default navbar-expand-lg container py-1">
+  <nav class="navbar navbar-default navbar-expand-lg container py-1 px-0">
     <a class="navbar-brand mr-0" href="#">
       <%= image_pack_tag "logo_bs4_#{ENV['CLIENT'] || 'ic'}.svg", alt: "#{ENV['CLIENT']} logo"%>
     </a>