start moving FAA to use bootstrap 4 (#3855)

* fix fonts, more ridp work started * start faa * fix resolve layout * fix resolve layout * fix rebase issues * pr requests and translations --------- Signed-off-by: kristinmerbach <[email protected]>
ideacrew · May 29, 2024 · 983fcc0 · 983fcc0
1 parent 0a9e679
commit 983fcc0
Show file tree

Hide file tree

Showing 21 changed files with 419 additions and 61 deletions.
diff --git a/app/javascript/css/_buttons.scss b/app/javascript/css/_buttons.scss
@@ -88,6 +88,6 @@ button.error, .button.error, .btn.error, .btn-error {
 }
 
 a.button:hover {
-  text-decoration: underline;
+  text-decoration: none;
   cursor: pointer;
 }
diff --git a/app/javascript/css/colors.scss b/app/javascript/css/colors.scss
@@ -40,6 +40,13 @@
   --primary-color: #3D5D6F;
   --primary-color-dark: #314A59;
   --primary-color-darker: #253843;
+  --default-font-color: #323130;
+  --placeholder-color: #676767;
+  --placeholder-font-weight: 400;
+  --floatlabel-color: #767676;
+  --floatlabel-onclick-color:#676767;
+  --input-text-color: #454545;
+  --form-element-text-color: #454545;
 
   --secondary-color: #3B6B90;
   --secondary-color-dark: #2E5470;
@@ -104,7 +111,6 @@
   --body-color: #FAFAFA;
 
   --placeholder-color: #676767;
-  --placeholder-font-weight: 400;
   --floatlabel-color: #767676;
   --floatlabel-onclick-color:#676767;
   --input-text-color: #454545;
@@ -168,7 +174,6 @@
   --default-font-color: #323130;
 
   --placeholder-color: #676767;
-  --placeholder-font-weight: 400;
   --floatlabel-color: #767676;
   --floatlabel-onclick-color:#676767;
   --input-text-color: #454545;

diff --git a/app/javascript/css/contrast_level_aa.scss b/app/javascript/css/contrast_level_aa.scss
@@ -2,6 +2,7 @@
 // These will only be applied if the contrast level is set to true in the layout.
 [data-contrast="true"] {
   --font: Barlow, sans-serif;
+  --placeholder-font-weight: 400;
 
   .warning-notice {
     padding: 8px 14px 8px 14px;

diff --git a/app/javascript/css/dc.scss b/app/javascript/css/dc.scss
@@ -1,4 +1,5 @@
 // all contents of this file must be nested within the data-theme="dc" selector to make sure they don't leak to other clients.
 [data-theme="dc"] {
   --font: 'Open Sans', sans-serif;
+  --placeholder-font-weight: 400;
 }
diff --git a/app/javascript/css/main.scss b/app/javascript/css/main.scss
@@ -302,6 +302,15 @@ ul.list-right-section li {
 .verification-update-reason {display: none}
 
 @media screen and (max-width: 767px) {
+  .d-flex.sm-block {
+    display: block !important;
+  }
+
+  .progress-nav-container {
+    margin-left: $spacer;
+    margin-right: $spacer;
+  }
+
   .sm-space, .col-sm {
     margin-bottom: $spacer;
   }
@@ -330,6 +339,14 @@ ul.list-right-section li {
   height: 70vh;
 }
 
+.card {
+  border: 1px solid var(--grey-060);
+  border-radius: 5px;
+  margin-bottom: $spacer;
+  padding: 13px 12px;
+  background: var(--grey-000);
+}
+
 // modals
 
 .backdrop-modal {

diff --git a/app/views/insured/fdsh_ridp_verifications/_outstanding_ridp_documents.html.erb b/app/views/insured/fdsh_ridp_verifications/_outstanding_ridp_documents.html.erb
@@ -140,9 +140,10 @@
     </div>
   </div>
 
+
 <div class="row">
   <div class="col-xs-12">
-    <%= (link_to 'Documents FAQ', ::EnrollRegistry[:enroll_app].setting(:submit_docs_url).item, class: "btn btn-default btn-small pull-right", target: '_blank', rel: "noopener noreferrer") %>
+    <%= h(link_to 'Documents FAQ', ::EnrollRegistry[:enroll_app].setting(:submit_docs_url).item, class: "btn btn-default btn-small pull-right", target: '_blank', rel: "noopener noreferrer") %>
   </div>
 
   <div class="collapse" id="docs-verification-faq">

diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" data-theme="<%= ENV['CLIENT'] %>" data-contrast="t<%= EnrollRegistry.feature_enabled?(:contrast_level_aa) %>">
+<html lang="en" data-theme="<%= ENV['CLIENT'] %>" data-contrast="<%= EnrollRegistry.feature_enabled?(:contrast_level_aa) %>">
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=Edge">

diff --git a/app/views/layouts/progress.html.erb b/app/views/layouts/progress.html.erb
@@ -47,11 +47,16 @@
       <div class="mt-4 mb-4">
         <div class="container mt-4">
           <div class="row">
-            <div class="col-sm-12 col-md-12 col-lg-3 mr-auto p-0">
+            <div class="col-sm-12 col-md-12 col-lg-3 mr-auto p-0 progress-nav-container">
               <% step = content_for?(:step) ? yield(:step).to_i : 1 %>
               <% title = content_for?(:title) ? yield(:title) : "" %>
+              <% title_link = content_for?(:title_link) ? yield(:title_link) : nil %>
               <nav class="progress-nav">
-                <h3><%= title %></h3>
+                <% if title_link.present? %>
+                  <h3><a href="<%= title_link %>"><i class="fa fa-arrow-circle-left white-font hh-previous-icon" aria-hidden="true"></i> <%= title %></a></h3>
+                <% else %>
+                  <h3><%= title %></h3>
+                <% end %>
                 <ul class="progress-wrapper">
                   <%= yield(:nav_options) if content_for?(:nav_options) %>
                 </ul>

diff --git a/app/views/shared/_shopping_nav_panel.html.erb b/app/views/shared/_shopping_nav_panel.html.erb
@@ -12,7 +12,7 @@
     <%= h(link_to to_account_text, main_app.family_account_path, class: "button btn-block my-4 text-center #{is_complete ? 'btn-primary' : 'secondary outline'}", id: 'btn-continue') %>
   <% end %>
 
-  <div style="display: flex; flex-direction: column;">
+  <div class=" d-flex flex-column mt-2">
     <ul class="list-unstyled list-right-section">
       <% if show_previous_button %>
         <li>

diff --git a/...ents/financial_assistance/app/controllers/financial_assistance/applications_controller.rb b/...ents/financial_assistance/app/controllers/financial_assistance/applications_controller.rb
@@ -7,6 +7,7 @@ class ApplicationsController < FinancialAssistance::ApplicationController
     before_action :set_current_person
     before_action :set_family
     before_action :find_application, :except => [:index, :index_with_filter, :new, :review, :raw_application]
+    before_action :enable_bs4_layout, only: [:application_year_selection, :application_checklist] if EnrollRegistry.feature_enabled?(:bs4_consumer_flow)
 
     around_action :cache_current_hbx, :only => [:index_with_filter]
 
@@ -15,13 +16,14 @@ class ApplicationsController < FinancialAssistance::ApplicationController
     include Acapi::Notifiers
     include FinancialAssistance::L10nHelper
     include ::FileUploadHelper
+    include FinancialAssistance::NavigationHelper
     require 'securerandom'
 
     before_action :check_eligibility, only: [:copy]
     before_action :init_cfl_service, only: [:review_and_submit, :raw_application]
     before_action :set_cache_headers, only: [:index, :relationships, :review_and_submit, :index_with_filter]
 
-    layout "financial_assistance_nav", only: %i[edit step review_and_submit eligibility_response_error application_publish_error]
+    layout :resolve_layout
 
     # We should ONLY be getting applications that are associated with PrimaryFamily of Current Person.
     # DO NOT include applications from other families.
@@ -154,16 +156,13 @@ def application_year_selection
       save_faa_bookmark(request.original_url)
       set_admin_bookmark_url
 
-      respond_to do |format|
-        format.html { render layout: 'financial_assistance' }
-      end
+      respond_to :html
     end
 
     def application_checklist
       authorize @application, :application_checklist?
       save_faa_bookmark(request.original_url)
       set_admin_bookmark_url
-
       respond_to :html
     end
 
@@ -378,6 +377,21 @@ def set_family
       @family = @person.primary_family
     end
 
+    def enable_bs4_layout
+      @bs4 = true
+    end
+
+    def resolve_layout
+      case action_name
+      when "edit", "step", "review_and_submit", "eligibility_response_error", "application_publish_error"
+        "financial_assistance_nav"
+      when %i[application_year_selection application_checklist]
+        EnrollRegistry.feature_enabled?(:bs4_consumer_flow) ? "financial_assistance_progress" : "financial_assistance"
+      else
+        "financial_assistance"
+      end
+    end
+
     def determination_token_present?(application)
       Rails.cache.read("application_#{application.hbx_id}_determined").present?.to_s
     end

diff --git a/components/financial_assistance/app/helpers/financial_assistance/application_helper.rb b/components/financial_assistance/app/helpers/financial_assistance/application_helper.rb
@@ -371,5 +371,27 @@ def assistance_year
       year_selection_enabled = FinancialAssistanceRegistry.feature_enabled?(:iap_year_selection) && (HbxProfile.current_hbx.under_open_enrollment? || FinancialAssistanceRegistry.feature_enabled?(:iap_year_selection_form))
       @assistance_year = year_selection_enabled ? @application.assistance_year.to_s : FinancialAssistanceRegistry[:enrollment_dates].setting(:application_year).item.constantize.new.call.value!.to_s
     end
+
+    def no_applicant_faa_nav_options(application)
+      step1_link = (application.present? && application.is_draft?) ? financial_assistance.edit_application_path(application) : "javascript:void(0);"
+      links = [
+        {step: 1, label: l10n('faa.nav.family_info', link: step1_link)},
+      ]
+      relationship_step = {step: 2, label: l10n('faa.nav.family_relationships'), link: "javascript:void(0);"}
+      review_step = {step: 2, label: l10n('faa.nav.review'), link: "javascript:void(0);"}
+      if application && application.incomplete_applicants?
+        relationship_step[:link] = nil
+      elsif application && application.applicants.count > 1 && application.is_draft?
+        relationship_step[:link] = financial_assistance.application_relationships_path(application)
+      end
+
+      if application.applicants.count > 1
+        links << relationship_step
+        review_step[:step] = 3
+      end
+
+      review_step[:link] = financial_assistance.review_and_submit_application_path(application) if application.present? && application.ready_for_attestation? && application.is_draft?
+      links << review_step
+    end
   end
 end
diff --git a/...ial_assistance/app/views/financial_assistance/applications/_faa_progress_options.html.erb b/...ial_assistance/app/views/financial_assistance/applications/_faa_progress_options.html.erb
@@ -0,0 +1,26 @@
+<% step = (defined? step) ? step.to_i : 1 %>
+
+<% content_for(:step) { step } %>
+<% content_for(:show_exit_button) { "true" } %>
+<% content_for(:show_previous_button) { "false" } %>
+<% content_for(:show_account_button) { EnrollRegistry.feature_enabled?(:back_to_account_all_shop)&.to_s } %>
+<% content_for(:show_help_button) { "true" } %>
+<% content_for(:back_to_account_flag) { "true" } %>
+
+<% if @applicant.present? %>
+  <% content_for(:title) { l10n("faa.left_nav.my_household") } %>
+  <% content_for(:title_link) { edit_application_path(@application) } %>
+<% else %>
+  <% content_for(:title) { l10n('faa.my_applications') } %>
+  <% content_for(:title_link) { financial_assistance.applications_path } %>
+  <% content_for(:nav_options) do %>
+    <% no_applicant_faa_nav_options(@application).each do |nav_option| %>
+      <li class="<%= 'complete' if step > nav_option[:step] %> <%= 'active' if step == nav_option[:step] %>">
+        <span class="circle-progress"></span>
+        <div class="vertical-line-progress"></div>
+        <a class="<%= 'cna disabled' unless step > nav_option[:step] or step == nav_option[:step] %>"><%= nav_option[:label] %></a>
+      </li>
+    <% end %>
+  <% end %>
+<% end %>
+
diff --git a/...sistance/app/views/financial_assistance/applications/_non_oe_year_selection_form.html.erb b/...sistance/app/views/financial_assistance/applications/_non_oe_year_selection_form.html.erb
@@ -1,3 +1,25 @@
+<% if @bs4 %>
+  <%= form_for @application, url: {action: "update_application_year", params: {id: @application.id}} do |f| %>
+    <% calendar_year = Family.application_applicable_year %>
+    <% previous_year = calendar_year - 1 %>
+    <h1><%= l10n("faa.year_selection_header") %></h1>
+    <p><%= l10n("faa.year_selection_subheader") %></p>
+    <p><b><%= calendar_year %></b><br> <%= l10n("faa.non_oe_see_if_you_qualify_1", year: calendar_year) %><br><%= link_to l10n("faa.non_oe_learn_more"), FinancialAssistanceRegistry[:iap_year_selection_form].setting(:iap_year_sep_link).item %>.</p>
+    <p><b><%= previous_year %></b><br> <%= l10n("faa.non_oe_see_if_you_qualify_2", calendar_year: calendar_year, previous_year: previous_year, site_short_name: EnrollRegistry[:enroll_app].setting(:short_name).item) %></p>
+    <fieldset class="mb-4">
+      <legend><%= l10n("faa.choose_a_plan_year") %></legend>
+      <label><%= f.radio_button :assistance_year, calendar_year %> <%= calendar_year %></label>
+      <label><%= f.radio_button :assistance_year, previous_year %> <%= previous_year %></label>
+    </fieldset>
+    <% content_for :submit_button do %>
+      <%= f.submit l10n("continue_next"), class: 'btn btn-continue', id: 'btn-continue', disabled: (local_assigns[:disabled].nil? ? false : disabled) %>
+    <% end %>
+    <%= render partial: 'financial_assistance/shared/progress_navigation_buttons', locals: {
+      previous_link: main_app.help_paying_coverage_insured_consumer_role_index_path,
+      next_link: financial_assistance.application_checklist_application_path(@application)
+    } %>
+  <% end %>
+<% else %>
 <div class="container">
   <div id="new_person_wrapper">
     <%= form_for @application, url: {action: "update_application_year", params: {id: @application.id}} do |f| %>
@@ -31,3 +53,4 @@
     <% end %>
   </div>
 </div>
+<% end %>
diff --git a/...cial_assistance/app/views/financial_assistance/applications/_year_selection_form.html.erb b/...cial_assistance/app/views/financial_assistance/applications/_year_selection_form.html.erb
@@ -1,3 +1,35 @@
+<% if @bs4 %>
+  <%= form_for @application, url: {action: "update_application_year", params: {id: @application.id}} do |f| %>
+    <% oe_year = Family.application_applicable_year %>
+    <% current_year = oe_year - 1 %>
+    <h1><%= l10n("faa.year_selection_header") %></h1>
+    <p><%= l10n("faa.year_selection_subheader") %></p>
+    <p><b><%= l10n("faa.assitance_year_option1", year: oe_year) %></b><br> <%= l10n("faa.see_if_you_qualify_1", short_name: EnrollRegistry[:enroll_app].setting(:short_name).item, medicaid_or_chip_program_short_name: FinancialAssistanceRegistry[:medicaid_or_chip_program_short_name].setting(:name).item) %> <%= l10n("faa.year_selection_oe_range_from") %> <%= HbxProfile.current_hbx.benefit_sponsorship.benefit_coverage_periods.last.open_enrollment_start_on %> <%= l10n("faa.year_selection_oe_range_through") %> <%= HbxProfile.current_hbx.benefit_sponsorship.benefit_coverage_periods.last.open_enrollment_end_on %>.</p>
+    <p><b><%= l10n("faa.assitance_year_option2", year: current_year) %></b><br> <%= l10n("faa.see_if_you_qualify_2", short_name: EnrollRegistry[:enroll_app].setting(:short_name).item, medicaid_or_chip_program_short_name: FinancialAssistanceRegistry[:medicaid_or_chip_program_short_name].setting(:name).item) %>. <%= sanitize link_to l10n("faa.learn_more_about_life_changes"), FinancialAssistanceRegistry[:iap_year_selection_form].setting(:iap_year_sep_link).item %>.</p>
+    <% if FinancialAssistanceRegistry.feature_enabled?(:iap_year_selection_form) %>
+      <div class="alert alert-warning d-flex" role="alert">
+        <div>
+          <div class="warning-icon icon" alt="warning" aria-hidden="true">&nbsp;</div>
+        </div>
+        <div class="mt-2 mb-1">
+          <%= l10n("faa.update_reminder", year: current_year, year2: oe_year) %>
+        </div>
+      </div>
+    <% end %>
+    <fieldset class="mb-4">
+      <legend><%= l10n("faa.choose_a_plan_year") %></legend>
+      <label><%= f.radio_button :assistance_year, oe_year, checked: true, id: 'renewal_assistance_year' %> <%= l10n("faa.assitance_year_option1", year: oe_year) %></label>
+      <label><%= f.radio_button :assistance_year, current_year, checked: false, id: 'current_assistance_year' %> <%= l10n("faa.assitance_year_option2", year: current_year) %></label>
+    </fieldset>
+    <% content_for :submit_button do %>
+      <%= f.submit l10n("continue_next"), class: 'btn btn-continue', id: 'btn-continue', disabled: (local_assigns[:disabled].nil? ? false : disabled) %>
+    <% end %>
+    <%= render partial: 'financial_assistance/shared/progress_navigation_buttons', locals: {
+      previous_link: main_app.help_paying_coverage_insured_consumer_role_index_path,
+      next_link: financial_assistance.application_checklist_application_path(@application)
+    } %>
+  <% end %>
+<% else %>
 <div class="container">
   <div id="new_person_wrapper">
     <%= form_for @application, url: {action: "update_application_year", params: {id: @application.id}} do |f| %>
@@ -36,3 +68,4 @@
     <% end %>
   </div>
 </div>
+<% end %>
diff --git a/...ial_assistance/app/views/financial_assistance/applications/application_checklist.html.erb b/...ial_assistance/app/views/financial_assistance/applications/application_checklist.html.erb
@@ -1,3 +1,68 @@
+<% if @bs4 %>
+  <%= render partial: 'faa_progress_options', locals: {step: 1} %>
+  <h1><%= l10n("faa.checklist.heading") %></h1>
+  <p><%= l10n("faa.checklist.instructions1") %></p>
+  <p class="b"><%= l10n("faa.checklist.instructions2") %></p>
+  <div class="d-flex sm-block my-4">
+    <div class="mr-auto col-sm col-md-6 pl-0">
+      <p class="b"><%= l10n("faa.checklist.needs_insurance_header") %></p>
+      <ul class="spaced">
+        <li class="mb-4"><%= l10n("faa.checklist.require_bullet1") %></li>
+        <li class="mb-4"><%= l10n("faa.checklist.require_bullet2") %>
+          <ul>
+            <li><%= l10n("faa.checklist.require_bullet2_a") %></li>
+            <li><%= l10n("faa.checklist.require_bullet2_b") %></li>
+            <li><%= l10n("faa.checklist.require_bullet2_c") %></li>
+          </ul>
+        </li>
+        <li class="mb-4"><%= l10n("faa.checklist.require_bullet3") %>
+          <ul>
+            <li><%= l10n("faa.checklist.require_bullet3_a") %></li>
+            <li><%= l10n("faa.checklist.require_bullet3_b") %></li>
+            <li><%= l10n("faa.checklist.require_bullet3_c") %></li>
+            <li><%= l10n("faa.checklist.require_bullet3_d") %></li>
+          </ul>
+        </li>
+        <li class="mb-4"><%= l10n("faa.checklist.require_bullet4") %></li>
+        <li><%= l10n("faa.checklist.require_bullet5") %>
+          <ul>
+            <li><%= l10n("faa.checklist.require_bullet5_a") %></li>
+            <li><%= l10n("faa.checklist.require_bullet5_b") %></li>
+            <li><%= l10n("faa.checklist.require_bullet5_c") %></li>
+          </ul>
+        </li>
+      </ul>
+    </div>
+    <div class="col-sm col-md-6 pr-0">
+      <p class="b"><%= l10n("faa.checklist.doesnt_need_insurance_header") %></p>
+      <ul class="spaced">
+        <li class="mb-4"><%= l10n("faa.checklist.require_bullet1") %></li>
+        <li class="mb-4"><%= l10n("faa.checklist.require_bullet2") %>
+          <ul>
+            <li><%= l10n("faa.checklist.require_bullet2_a") %></li>
+            <li><%= l10n("faa.checklist.require_bullet2_b") %></li>
+            <li><%= l10n("faa.checklist.require_bullet2_c") %></li>
+          </ul>
+        </li>
+        <li class="mb-4"><%= l10n("faa.checklist.require_bullet3") %>
+          <ul>
+            <li><%= l10n("faa.checklist.require_bullet3_a") %></li>
+            <li><%= l10n("faa.checklist.require_bullet3_b") %></li>
+            <li><%= l10n("faa.checklist.require_bullet3_c") %></li>
+            <li><%= l10n("faa.checklist.require_bullet3_d") %></li>
+          </ul>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <% content_for :submit_button do %>
+    <%= h(link_to_with_noopener_noreferrer(l10n("faa.checklist.begin_application"), financial_assistance.edit_application_path(@application), class: 'button btn-continue', id: 'btn-continue')) %>
+  <% end %>
+  <%= render partial: 'financial_assistance/shared/progress_navigation_buttons', locals: {
+      previous_link: application_checklist_previous_url(@application),
+      next_link: financial_assistance.edit_application_path(@application)
+    } %>
+<% else %>
 <div class="container">
   <div id="new_person_wrapper">
     <div class="row">
@@ -45,3 +110,4 @@
     </div>
   </div>
 </div>
+<% end %>