ideacrew · kristinmerbach · May 24, 2024 · Apr 23, 2024 · May 17, 2024 · May 17, 2024
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;

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;
   }
@@ -329,3 +338,11 @@ ul.list-right-section li {
 .full-height {
   height: 70vh;
 }
+
+.card {
+  border: 1px solid var(--grey-060);
+  border-radius: 5px;
+  margin-bottom: $spacer;
+  padding: 13px 12px;
+  background: var(--grey-000);
+}
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
@@ -141,9 +141,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
@@ -49,11 +49,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/_progress_navigation_buttons.html.erb b/app/views/shared/_progress_navigation_buttons.html.erb
@@ -1,5 +1,6 @@
 <%# previous button params %>
 <% dont_show_prev_button = local_assigns[:dont_show_prev_button] ? dont_show_prev_button : false %>
+<% previous_link = local_assigns[:previous_link] ? previous_link : '#' %>
 <% previous_style = local_assigns[:previous_style] ? previous_style : "outline" %>
 
 <%# continue button params %>
@@ -37,3 +38,13 @@
     <% end %>
   <% end %>
 </div>
+
+<script>
+  // Without this, the user can use the continue button to continue to navigate through the workflow via the enter button.
+  // The original approach with the disabled setting does not prevent keyboard navigation, only use of mouse clicks.
+  document.addEventListener('keydown', function(event) {
+    if (event.key === 'Enter' && event.target.id === 'btn-continue' && event.target.getAttribute('disabled') === 'disabled') {
+      event.preventDefault();
+    }
+  });
+</script>
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) } %>
+<% 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>Application Checklist</h1>
+  <p>Before you get started, please review the application checklist below. If you gather the information in advance, you can complete the application quickly. When you’re ready to begin, select ‘Begin Application’. This application takes about 15-20 minutes to complete, you may save your progress at any time.</p>
+  <p class="b">You will need detailed information on each person in your household (even if they don’t need coverage) to complete the application. </p>
+  <div class="d-flex sm-block my-4">
+    <div class="mr-auto col-sm col-md-6 pl-0">
+      <p class="b">For each person in your household who needs health insurance, you’ll need:</p>
+      <ul class="spaced">
+        <li class="mb-4">Full legal names, birth dates, social security numbers, and addresses</li>
+        <li class="mb-4">Tax filing plans for the year you want coverage. For example:
+          <ul>
+            <li>Who will file federal taxes?</li>
+            <li>Who will be claiming dependents on their tax return?</li>
+            <li>If anyone is married, will they file taxes jointly?</li>
+          </ul>
+        </li>
+        <li class="mb-4">Information about income (how much you get, how often you get it, etc.). It helps to have:
+          <ul>
+            <li>Your most recent tax return</li>
+            <li>Recent paystubs</li>
+            <li>Recent statements for benefits like social security or unemployment</li>
+            <li>Recent bank and brokerage statements that show interest, capital gains, dividends or retirement distributions</li>
+          </ul>
+        </li>
+        <li class="mb-4">For anyone who could get health insurance through a job, a completed Employer Coverage Tool Form</li>
+        <li>For anyone who is not a US citizen, immigration documents such as an:
+          <ul>
+            <li>I-551 (also called a green card)</li>
+            <li>I-94 (also called an arrival/departure record)</li>
+            <li>Employment authorization card</li>
+          </ul>
+        </li>
+      </ul>
+    </div>
+    <div class="col-sm col-md-6 pr-0">
+      <p class="b">For anyone in your household who doesn’t need health insurance, you’ll need:</p>
+      <ul class="spaced">
+        <li class="mb-4">Full legal names, birth dates, social security numbers, and addresses</li>
+        <li class="mb-4">Tax filing plans for the year you want coverage. For example:
+          <ul>
+            <li>Who will file federal taxes?</li>
+            <li>Who will be claiming dependents on their tax return?</li>
+            <li>If anyone is married, will they file taxes jointly?</li>
+          </ul>
+        </li>
+        <li class="mb-4">Information about income (how much you get, how often you get it, etc.). It helps to have:
+          <ul>
+            <li>Your most recent tax return</li>
+            <li>Recent paystubs</li>
+            <li>Recent statements for benefits like social security or unemployment</li>
+            <li>Recent bank and brokerage statements that show interest, capital gains, dividends or retirement distributions</li>
+          </ul>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <% content_for :submit_button do %>
+    <%= h(link_to_with_noopener_noreferrer("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 %>