header and footer cleanup (#4176)

* header and footer cleanup

* fix rubocop

* revise based on PR comments

* more header cleanup

* include missing file

* don't display text til logged in, don't link unless portal available

* push file change missed

app/helpers/bs4/bs4_header_helper.rb

@@ -32,12 +32,11 @@ def bs4_portal_type(controller) # rubocop:disable Metrics/AbcSize, Metrics/Cyclo
         else
           link_to(l10n("layout.header.role.employee"), main_app.family_account_path)
         end
-      elsif (controller_path.include?("insured") && current_user.try(:has_consumer_role?)) ||
-            (EnrollRegistry.feature_enabled?(:financial_assistance) && controller_path.include?("financial_assistance") && current_user.try(:has_consumer_role?))
+      elsif current_user.try(:has_consumer_role?)
         if current_user.identity_verified_date.present?
           link_to(l10n("layout.header.role.individual_and_family"), main_app.family_account_path)
         else
-          link_to(l10n("layout.header.role.individual_and_family"), 'javascript:;')
+          l10n("layout.header.role.individual_and_family")
         end
       # rubocop:disable Lint/DuplicateBranch
       elsif current_user.try(:has_broker_agency_staff_role?) && controller_path.exclude?('general_agencies') && controller_path.exclude?('employers')
@@ -54,6 +53,49 @@ def bs4_portal_type(controller) # rubocop:disable Metrics/AbcSize, Metrics/Cyclo
       end
     end
 
+    def my_portal_link(controller) # rubocop:disable Metrics/AbcSize, Metrics/CyclomaticComplexity, Metrics/PerceivedComplexity
+      ltext = l10n("layout.header.portal")
+      if current_user.nil?
+        nil
+      elsif current_user.try(:has_hbx_staff_role?)
+        link_to(ltext, main_app.exchanges_hbx_profiles_root_path)
+      elsif display_i_am_broker_for_consumer?(current_user.person) && controller_path.exclude?('general_agencies')
+        link_to(ltext, get_broker_profile_path)
+      elsif current_user.try(:person).try(:csr_role) || current_user.try(:person).try(:assister_role)
+        link_to(ltext, main_app.home_exchanges_agents_path)
+      elsif current_user.person&.active_employee_roles&.any?
+        if controller_path.include?('broker_agencies')
+          link_to(ltext, get_broker_profile_path)
+        elsif controller_path.include?('general_agencies')
+          link_to(ltext, benefit_sponsors.profiles_general_agencies_general_agency_profile_path(id: current_user.person.general_agency_staff_roles.first.benefit_sponsors_general_agency_profile_id))
+        elsif controller == 'employer_profiles' || controller_path.include?('employers')
+          #current user has both broker_agency staff role and employee role but not employer_staff_roles
+          if current_user.person.active_employer_staff_roles.present?
+            employer_profile_path = benefit_sponsors.profiles_employers_employer_profile_path(id: current_user.person.active_employer_staff_roles.first.benefit_sponsor_employer_profile_id, :tab => 'home')
+            link_to(ltext, employer_profile_path)
+          elsif current_user.try(:has_broker_agency_staff_role?)
+            link_to(ltext, get_broker_profile_path)
+          end
+        else
+          link_to(ltext, main_app.family_account_path)
+        end
+      elsif current_user.try(:has_consumer_role?)
+        link_to(ltext, main_app.family_account_path) if current_user.identity_verified_date.present?
+      # rubocop:disable Lint/DuplicateBranch
+      elsif current_user.try(:has_broker_agency_staff_role?) && controller_path.exclude?('general_agencies') && controller_path.exclude?('employers')
+        link_to(ltext, get_broker_profile_path)
+      # rubocop:enable Lint/DuplicateBranch
+      elsif current_user.try(:has_general_agency_staff_role?)
+        if current_user.try(:has_employer_staff_role?) && controller_path.include?('employers')
+          link_to(ltext, benefit_sponsors.profiles_employers_employer_profile_path(id: current_user.person.active_employer_staff_roles.first.benefit_sponsor_employer_profile_id, :tab => 'home'))
+        else
+          link_to(ltext, benefit_sponsors.profiles_general_agencies_general_agency_profile_path(id: current_user.person.active_general_agency_staff_roles.first.benefit_sponsors_general_agency_profile_id))
+        end
+      elsif current_user.try(:has_employer_staff_role?)
+        link_to(ltext, benefit_sponsors.profiles_employers_employer_profile_path(id: current_user.person.active_employer_staff_roles.first.benefit_sponsor_employer_profile_id, :tab => 'home'))
+      end
+    end
+
     def get_broker_profile_path # rubocop:disable Naming/AccessorMethodName
       @broker_role ||= current_user.person.broker_role
       broker_agency_profile = @broker_role&.broker_agency_profile

app/javascript/css/nav.scss

@@ -14,16 +14,15 @@ header.navbar-primary {
         text-decoration: underline;
       }
 
-      img {
-        max-height: 16px;
-        padding-right: .5rem;
+      .user-icon {
+        width: 32px;
       }
 
       .horizontal-links {
         span::after {
           content: "|";
           color: var(--grey-060);
-          padding: 0 .1rem;
+          padding: 0 .3rem;
         }
 
         span:last-child::after {
@@ -33,18 +32,19 @@ header.navbar-primary {
 
       &.site-name-market {
         font-size: 16px;
-
-        :first-child {
-          font-size: 12px;
-          font-weight: bold;
-          line-height: 13px;
+        font-weight: 600;
+        line-height: 24px;
+        a {
+          color: var(--primary-color);
+          text-decoration: none;
         }
       }
     }
 
     .nav-item-divider {
       background-color: var(--grey-050);
       width: 1px;
+      height: 60px;
       margin: -.75rem 0.5rem;
     }
   }

app/views/shared/customer_support/_live_chat_widget.html.erb

@@ -42,6 +42,7 @@
 
   .live-chat-button-bs4 {
     background-color: var(--tertiary-color, #647F3A);
+    border-color: var(--tertiary-color, #647F3A);
     color: #fff;
     display: flex;
     align-items: center;

app/views/ui-components/bs4/v1/footers/_footer.html.erb

@@ -8,17 +8,17 @@
         </div>
 
         <div id="right-column" class="get-help-container footer-column d-flex flex-column flex-md-row align-items-md-center px-2 px-md-3 py-2">
-          <span><%= l10n("layout.footer.get_help") %></span>
           <div class="btn-group">
-            <% if EnrollRegistry.feature_enabled?(:live_chat_widget) %>
-              <%= render "shared/customer_support/live_chat_widget" %>
-            <% end %>
             <a class="button btn-secondary" href="tel:<%=EnrollRegistry[:enroll_app].settings(:contact_center_short_number).item%>">
               <svg role="img" aria-label="phone icon" width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                   <path d="M5.772.44L6.848.094c1.01-.322 2.087.199 2.52 1.218l.859 2.027c.374.883.167 1.922-.514 2.568L7.819 7.706c.116 1.076.478 2.135 1.084 3.177a8.678 8.678 0 002.271 2.595l2.275-.759c.863-.287 1.802.043 2.33.82l1.233 1.81c.615.904.505 2.15-.259 2.916l-.817.822c-.814.817-1.977 1.113-3.052.777-2.539-.791-4.873-3.143-7.003-7.053-2.133-3.916-2.886-7.239-2.258-9.968C3.887 1.695 4.704.78 5.772.44z" fill="currentColor"/>
               </svg>
               <%= "#{EnrollRegistry[:enroll_app].settings(:contact_center_short_number).item} / TTY: #{EnrollRegistry[:enroll_app].setting(:contact_center_tty_number).item}" %>
             </a>
+            <% if EnrollRegistry.feature_enabled?(:live_chat_widget) %>
+              <%= render "shared/customer_support/live_chat_widget" %>
+            <% end %>
+            <%= h(link_to l10n('layout.footer.get_help'), site_help_url, target: '_blank', rel: "noopener noreferrer", class: "button btn-primary") %>
           </div>
         </div>
       </div>

app/views/ui-components/bs4/v1/navs/_header.html.erb

@@ -1,6 +1,5 @@
 <span id='dchbx_enroll_date_of_record' class='hidden d-none'><%= TimeKeeper.date_of_record.iso8601 %></span>
 <header class="bg-white navbar-primary py-2 <%= 'pre_prod_nav_color' if ENV['ENROLL_REVIEW_ENVIRONMENT'] == true %>">
-
   <nav class="top-nav navbar navbar-expand-lg container py-1 px-0">
     <a class="navbar-brand mr-0" href="#" title="<%= l10n('welcome.index.logo_title')%>">
       <%= image_pack_tag "logo_bs4_#{ENV['CLIENT'] || 'ic'}.svg", alt: "#{ENV['CLIENT']} logo"%>
@@ -23,31 +22,39 @@
     </button>
 
     <div id="desktop-navigation" class=" collapse navbar-collapse">
-      <ul id="portal-type-home-link" class="navbar-nav mr-auto">
+      <ul id="portal-type-home-link" class="navbar-nav mr-auto d-flex">
+
+        <% if bs4_portal_type(controller_name) %>
         <li class="nav-item-divider"></li>
-        <li class="nav-item d-flex flex-column site-name-market">
-          <span><%= l10n('welcome.index.welcome_to_site_header')%></span>
+        <li class="nav-item d-flex flex-column site-name-market align-self-center">
           <%= bs4_portal_type(controller_name) %>
         </li>
+        <% end %>
       </ul>
       <ul class="navbar-nav">
-        <li class="nav-item d-flex flex-column align-items-md-end align-items-lg-end">
-          <span><%= image_pack_tag "icons/phone.svg", alt: "phone icon" %><%= l10n("layout.header.customer_service") %></span>
-          <% contact_center_short_number = EnrollRegistry[:enroll_app].settings(:contact_center_short_number).item %>
-          <a href="tel:<%= contact_center_short_number %>">
-            <%= "#{contact_center_short_number} / TTY: #{EnrollRegistry[:enroll_app].setting(:contact_center_tty_number).item}" %>
-          </a>
-        </li>
         <% if signed_in? %>
-          <li class="nav-item-divider"></li>
-          <li class="nav-item d-flex flex-column align-items-md-end align-items-lg-end">
+          <li class="nav-item d-flex flex-column">
             <% user_id = current_user.try(:person).try(:hbx_id) %>
-            <span><%= image_pack_tag "icons/user-small.svg", alt:"user icon" %><%= " #{user_first_name_last_name_and_suffix}#{" #{l10n('layout.header.id')} #{user_id}" unless user_id.blank?}" %></span>
-            <span class="horizontal-links">
-              <%= render partial: "shared/my_portal_links" %>
-              <span><%= h(link_to l10n('layout.header.help'), site_help_url, target: '_blank', rel: "noopener noreferrer") %></span>
-              <span><%= h(link_to l10n('layout.header.logout'), main_app.destroy_user_session_path, method: 'delete') %></span>
-            </span>
+            <% user_name = current_user.try(:person).try(:full_name) %>
+            <div class="d-flex align-items-center">
+              <div class="mr-2">
+                <% if current_user.try(:has_hbx_staff_role?) %>
+                  <%= image_pack_tag "icons/admin-icon.svg", alt:"admin icon", class: "user-icon" %>
+                <% elsif bs4_portal_type(controller_name) == "Broker" %>
+                  <%= image_pack_tag "icons/expert-icon.svg", alt:"expert icon", class: "user-icon" %>
+                <% else %>
+                  <%= image_pack_tag "icons/user-small.svg", alt:"user icon", class: "user-icon" %>
+                <% end %>
+              </div>
+              <div>
+                <div class="bold m-0 p-0"><%= user_first_name_last_name_and_suffix %></div>
+                <div class="horizontal-links">
+                  <% unless user_id.blank? %><span><%= l10n("id").upcase %>: <%= user_id %></span><% end %>
+                  <% unless my_portal_link(controller) %><span><%= my_portal_link(controller) %></span><% end %>
+                  <span><%= h(link_to l10n('layout.header.logout'), main_app.destroy_user_session_path, method: 'delete') %></span>
+                </div>
+              </div>
+            </div>
           </li>
         <% end %>
       </ul>
@@ -57,7 +64,7 @@
 
   <nav id="nav-drawer-collapsible" class="mobile-drawer collapse" >
     <ul id="portal-type-home-link" class="list-unstyled">
-      <% if signed_in? %>
+      <% if bs4_portal_type(controller_name) %>
         <li class="nav-item-divider"></li>
         <li class="nav-item d-flex flex-column site-name-market">
           <%= bs4_portal_type(controller_name) %>
@@ -70,7 +77,16 @@
         <li class="nav-item-divider"></li>
         <li class=" nav-item d-flex flex-column align-items-md-end">
           <% user_id = current_user.try(:person).try(:hbx_id) %>
-          <span><%= image_pack_tag "icons/user-small.svg", alt:"user icon" %><%=" #{user_first_name_last_name_and_suffix}#{" #{l10n('layout.header.id')} #{user_id}" unless user_id.blank?}" %></span>
+          <span>
+            <% if current_user.try(:has_hbx_staff_role?) %>
+              <%= image_pack_tag "icons/admin-icon.svg", alt:"admin icon", class: "user-icon" %>
+            <% elsif bs4_portal_type(controller_name) == "Broker" %>
+              <%= image_pack_tag "icons/expert-icon.svg", alt:"expert icon", class: "user-icon" %>
+            <% else %>
+              <%= image_pack_tag "icons/user-small.svg", alt:"user icon", class: "user-icon" %>
+            <% end %>
+            <%=" #{user_first_name_last_name_and_suffix}#{" #{l10n('layout.header.id')} #{user_id}" unless user_id.blank?}" %>
+          </span>
         </li>
       <% end %>
       <li><% if signed_in? %><%= render partial: "shared/my_portal_links" %><% end %></li>

db/seedfiles/translations/en/me/layout.rb

@@ -13,6 +13,7 @@
   "en.layout.header.role.employer" => "Employer",
   "en.layout.header.role.employee" => "Employee",
   "en.layout.header.role.individual_and_family" => "Individual and Family",
+  "en.layout.header.portal" => "My Portal",
   "en.layout.footer.all_rights" => "All Rights Reserved.",
   "en.layout.footer.get_help" => "Get Help",
 }