update sep page for bs4 (#3902)

* personal information page redo mc * mc * mc * mc * feature flags, faa layouts mc mc * header progress mc * add bs4 upgrade icons, collapsed header tweaks mc * started family information mc mc * registration process mc * more work on consumer flow mc mc * client specific files re-organized mc * footer updates mc * authority & consent ridp page mc * progress nav accessibility mc * fix fonts, more ridp work started mc * added ME colors, revert app controller flag mc * ridp flow mc * don't touch FAA yet mc mc# mc * starting to rubocop mc * fix brakeman, other text changes mc * reformat devide translations mc * id bad bullets mc * id bad bullet mc * id bad bullet mc * previous and continue buttons dryed out mc * fix auth and consent previous button layout (#3825) * wrap progress button in vertically aligned flex box * combines prev and continue link partial into one partial, updates consumers of the old partials to use the new one and keep functionality * remove unneeded div * remove unneeded argument mc mc# * add missing underscore prefix to partial (#3840) mc * show help shopping button mc * 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]> mc * help me sign up flow bs4 conversion started (#3887) * help me sign up flow started * translations and search input * wave issues * translations --------- Signed-off-by: kristinmerbach <[email protected]> mc * add document list to verify identity (#3890) * cleanup, move old list to bs4 * more list work * layout cleanup * more list work * adds trash style * destroy icon update * adds js handling for delete * add new js destroy * indentation fixes * adds aria * use h6 for type * fix header span * indentation fixes, update fdish page with list changes as well * add missing change from merge * remove class * refactor row classes to support mobile * alpha tweak * remove float-end * remove align * fix unmatched span * remove align * remove d-flex * puts label and badge in col * button refactor * remove unneeded icon * add remove padding * margin fixes * more layout fixes * restore fdsh modal * use insured modal for insured * cleanup mc * merge conflicts * merge conflicts * outline for sep page * more detail work, passes in bs4 flag for date check, implements modal mc * add get_date method for date parsing based on bs4 param * add date formatting for other date param * localize error text, use progress buttons, shop link in success message * reset continue button on init, remove line break with bs4 * date input work * cleanup * cleanup * add missing closing tag * uses correct key for number * update date entry to be time-based instead of focus * default continue button to qle_submit, enable it on date entry, update it to submit on date validation * rename check_qle_date and get_qle_date methods for clarity, update *_reason js files to update submit id, update reason handler to update submit id and disable button in fail case * adds bs4 layout for reason partials * missing label tag * undo debug line * indentation fix * remove unneeded div * remove uneeded class * replace values for radio * remove todo * cleanup, add zip view for bs4 * update moving handlers to allow for button id switching * fix bug which allows zip partial to permeate when selecting another link * localized special reasons * add modal handling * localize zip error * fix modal handler * move date chose hide * consolidate check date error case * further check ql date refactoring * localize middle of month coverage error string * localize future error * refactor get_date helper for clarity * use var instead of const to avoid redeclaration error * move id to nav partial * clean up error arg * move qle zip id reset * remove unneeded class * updates moves bs4 param check for some actions into refactored enable_bs4_layout method * upgrade to bs4 base mc * revert temp changes for design review to trunk mc * personal information page redo mc * feature flags, faa layouts mc mc * header progress mc * add bs4 upgrade icons, collapsed header tweaks mc * started family information mc mc * registration process mc * more work on consumer flow mc * client specific files re-organized mc * authority & consent ridp page mc * progress nav accessibility mc * fix fonts, more ridp work started mc * ridp flow mc * don't touch FAA yet mc mc# mc * starting to rubocop mc * fix brakeman, other text changes mc * reformat devide translations mc * id bad bullets mc * id bad bullet mc * id bad bullet mc * previous and continue buttons dryed out mc * fix auth and consent previous button layout (#3825) * wrap progress button in vertically aligned flex box * combines prev and continue link partial into one partial, updates consumers of the old partials to use the new one and keep functionality * remove unneeded div * remove unneeded argument mc mc * add missing underscore prefix to partial (#3840) mc * mc show help shopping button * help me sign up flow bs4 conversion started (#3887) * help me sign up flow started * translations and search input * wave issues * translations --------- Signed-off-by: kristinmerbach <[email protected]> mc * fix fonts, more ridp work started * choose cov page wip mc * plan shopping progress bars updated mc * plan shopping nav refactoring mc * family information conversion, fixed progress nav buttons mc * translation fixes * removed debugging code * rebase cleanup mc * fix link_to CSS vunerabilities mc * webpacker depreciation warning cleanup * integrate progress nav into sep * fix success link to match new id * add record_sep to bs4 conditionally enabled to account for date parsing * add modal comment * rename submit method * remove sep-form, add sep-date class * add missing span * add personal to conditionally enabled * add missing semi colon * move date change text set out of js, add calc translation * add translation to other partial * rebase clenaup mc * more rebase cleanup * more rebase cleanup * more rebase cleanup * renames event label, adds date label * remove unneeded var * unbind selector on load * add bs4 qle_submit handler, add missing zip submit handler that was also missing in legacy * fix enter navigation * remove unneeded check * remove enter keydown from qle for bs4, move moving id reset out of completion, remove typing timer * removes button id switching, adds button partials to each special reason partial, and details landing/date/error/success divs * cleanup * undo gemfile * remove debug special case * remove whitespace * fix legacy date continue * move sep-date class up to parent to capture both date field and button * fix for keydown suppression * add effective handling * remove unneeded fields, add label to select * restore selector for form keydown * adds missing nav title * restore kinds check * remove if debug for moving fields * remove random semi colon * use symbols for conditional def * remove extraneous param for button partial, update effective on kinds setup to only disable submit button when there are multiple kinds * rebase cleanup * indentation fix * fixes dangling form labels * fix keyboard bug preventing all input * rebase cleanup * rebase cleanup * remove style attr * fix enter press --------- Co-authored-by: Kristin Merbach <[email protected]> Co-authored-by: Sarah Austin <[email protected]> Co-authored-by: kristinmerbach <[email protected]>
ideacrew · Sep 16, 2024 · abf25b4 · abf25b4
1 parent 025038e
commit abf25b4
Show file tree

Hide file tree

Showing 13 changed files with 195 additions and 158 deletions.
diff --git a/app/assets/javascripts/qle.js.erb b/app/assets/javascripts/qle.js.erb
@@ -1,5 +1,3 @@
-var bs4 = document.documentElement.dataset.bs4 == "true";
-
 var QLE = ( function( window, undefined ) {
   function initialize() {
     $(document).on('change', 'input[type=radio][name=reason]', function() {
@@ -84,6 +82,7 @@ $(function () {
     }else{
       var dateMax = pre_days + 'd';
     }
+    var cur_qle_title = $('.qle-details-title').html();
     $(target).val('');
     $(target).datepicker('destroy');
     $(target).datepicker({
@@ -93,42 +92,31 @@ $(function () {
       defaultDate: cdate
 		});
 
-    if (bs4) {
-      $("#qle_date").on("change", function(){
-        if ($("#qle_date").val()) {
-          $('#qle_submit').removeAttr('disabled');
-        } else {
-          $('#qle_submit').attr('disabled', 'disabled');
-        }
-      });
-    }
+    $(".sep-date #qle_date").on("change", function(){
+      if ($(".sep-date #qle_date").val()) {
+        $('#qle_submit').removeAttr('disabled');
+      } else {
+        $('#qle_submit').attr('disabled', 'disabled');
+      }
+    });
   }
 
-  function set_details_title(event_element) {
-    const title = $(event_element).data('title');
-    var header = document.createElement("h3");
-    if($(event_element).data('reason') == 'covid-19') {
-      var underlined_title = $(document.createElement("u")).text(title);
-      $('.qle-details-title-container').html($(header).html(underlined_title));
-      $('.qle-details-title').html(underlined_title); // legacy
-    } else {
-      $('.qle-details-title-container').html($(header).text(title));
-      $('.qle-details-title').html(title); // legacy
-    }
-  };
-
-  $(document).on('click', 'a.qle-menu-item', function(e) {
-    e.preventDefault();
+  $(document).on('click', 'a.qle-menu-item', function() {
     init_qle_message();
     $('#qle_flow_info #qle-menu').hide();
 
-    set_details_title(this);
+    if($(this).data('reason') == 'covid-19'){
+      $('.qle-details-title').html("<u>"+$(this).data('title')+"</u>");
+    } else {
+      $('.qle-details-title').html($(this).data('title'));
+    }
 
     $('.qle-label').html($(this).data('label'));
     $('#change_plan').val($(this).data('title'));
     $('#qle_id').val($(this).data('id'));
     $('#qle_reason > *').addClass('hidden');
     $('#qle-date-chose').show();
+    $('.sep-date #qle_submit').attr('disabled', 'disabled');
     $('#qle-nav').addClass('hidden');
     var is_self_attested = $(this).data('is-self-attested');
     if (!is_self_attested) {
@@ -151,24 +139,22 @@ $(function () {
 
     $('#qle-details').removeClass('hidden');
     $('#qle-details-for-existing-sep').addClass('hidden');
-    if (bs4) {
-      $('#qle_submit').attr('disabled', 'disabled');
-      $("#qle-details").get(0).scrollIntoView({behavior: 'smooth'});
-      $('.tooltip').remove();
-    }
   });
 
 
   $(document).on('click', 'a.existing-sep-item', function() {
     $('#choose_flow').modal('hide');
-    $('.modal-backdrop').remove();
     //window.scrollTo(0, 0);
     $('html,body').animate({scrollTop: 0});
     init_qle_message();
     $('.seps-panel').addClass('hidden');
     $('#no_qle_checkbox').parent().addClass('hidden');
     $('#qle_flow_info #qle-menu').hide();
-    set_details_title(this);
+    if($(this).data('reason') == 'covid-19'){
+      $('.qle-details-title').html("<u>"+$(this).data('title')+"</u>");
+    } else {
+      $('.qle-details-title').html($(this).data('title'));
+    }
     $('.qle-label').html($(this).data('label'));
     $('#change_plan').val($(this).data('title'));
     $('#qle_id').val($(this).data('id'));
@@ -200,28 +186,13 @@ $(function () {
     //$('#qle_flow_info #qle-menu').show();
   });
 
-  // Disable form submit on Enter - the user must manually use the Continue button to submit
-  $(document).on('keydown', '#qle_form', function(e) {
-    if (bs4 && e.key == 'Enter') {
-      e.preventDefault();
-      return;
-    }
-  });
-
-  // Override above `#qle_form` listener to allow default Enter behavior for buttons and links within the form
-  $(document).on('keydown', '#qle_form a, #qle_form button', function(e) {
-    if (bs4) {
-      e.stopImmediatePropagation();
-      return;
-    }
-  });
-
   // Disable form submit on pressing Enter, instead click Submit link
   $('#qle_form').on('keydown', function(e) {
-    if (bs4) {
-      return;
-    }
     var code = e.keyCode || e.which;
+    if ($("#qle-nav").length > 0) {
+      return false;
+    }
+
     if (code == 13 && !$("div.n-radio-row").is(":focus") && !$("a.btn-primary").is(":focus")) {
       e.preventDefault();
       $("#qle_submit").click();
@@ -239,6 +210,7 @@ $(function () {
     if(validate_qle_date_input()) {
       $('#qle_date').removeClass('input-error');
 
+      $('#date-nav').addClass('hidden');
       if(QLE.check_qle_reason()){
         check_qle_date();
       }

diff --git a/app/controllers/insured/families_controller.rb b/app/controllers/insured/families_controller.rb
@@ -5,6 +5,8 @@ class Insured::FamiliesController < FamiliesController
   include Config::SiteConcern
   include Insured::FamiliesHelper
 
+  layout :resolve_layout
+  before_action :enable_bs4_layout, only: [:find_sep, :record_sep, :check_qle_date, :check_move_reason, :check_marriage_reason, :check_insurance_reason, :personal] if EnrollRegistry.feature_enabled?(:bs4_consumer_flow)
   before_action :updateable?, only: [:delete_consumer_broker, :record_sep, :purchase, :upload_notice]
   before_action :init_qualifying_life_events, only: [:home, :manage_family, :find_sep]
   before_action :check_for_address_info, only: [:find_sep, :home]
@@ -139,7 +141,7 @@ def find_sep
     end
 
     respond_to do |format|
-      format.html { render :layout => 'application' }
+      format.html
     end
   end
 
@@ -151,7 +153,7 @@ def record_sep
       special_enrollment_period = @family.special_enrollment_periods.new(effective_on_kind: params[:effective_on_kind])
       special_enrollment_period.selected_effective_on = Date.strptime(params[:effective_on_date], "%m/%d/%Y") if params[:effective_on_date].present?
       special_enrollment_period.qualifying_life_event_kind = qle
-      special_enrollment_period.qle_on = Date.strptime(params[:qle_date], "%m/%d/%Y")
+      special_enrollment_period.qle_on = get_date(:qle_date)
       special_enrollment_period.market_kind = qle.market_kind == "individual" ? "ivl" : qle.market_kind
       special_enrollment_period.save
     end
@@ -175,7 +177,6 @@ def personal
     @person.resident_role.build_nested_models_for_person if @person.is_resident_role_active?
     @resident = @person.is_resident_role_active?
 
-    @bs4 = true if params[:bs4] == "true"
     respond_to do |format|
       format.html
       format.js
@@ -249,7 +250,7 @@ def check_qle_date
     today = TimeKeeper.date_of_record
     start_date = today - 30.days
     end_date = today + 30.days
-    @qle_event_date = Date.strptime(params[:date_val], "%m/%d/%Y")
+    @qle_event_date = get_date(:date_val)
 
     if params[:qle_id].present?
       @qle = QualifyingLifeEventKind.find(params[:qle_id])
@@ -372,7 +373,7 @@ def purchase
       @terminate_date = fetch_terminate_date(params["terminate_date_#{@enrollment.hbx_id}"]) if @terminate.present?
       @terminate_reason = params[:terminate_reason] || ''
       respond_to do |format|
-        format.html { render :layout => 'application' }
+        format.html
       end
     else
       redirect_to :back
@@ -660,7 +661,7 @@ def notice_upload_secure_message(notice, subject)
   end
 
   def calculate_dates
-    @qle_event_date = Date.strptime(params[:date_val], "%m/%d/%Y")
+    @qle_event_date = get_date(:date_val)
     @qle = QualifyingLifeEventKind.find(params[:qle_id])
     @qle_date = @qle.qle_event_date_kind == :qle_on ? @qle_event_date : TimeKeeper.date_of_record
     start_date = TimeKeeper.date_of_record - @qle.post_event_sep_in_days.try(:days)
@@ -677,4 +678,26 @@ def calculate_dates
     end
 
   end
+
+  def get_date(date_param)
+    date_format = @bs4 ? "%Y-%m-%d" : "%m/%d/%Y"
+    Date.strptime(params[date_param], date_format)
+  end
+
+  def conditionally_bs4_enabled_actions
+    %i[record_sep check_qle_date check_move_reason check_marriage_reason check_insurance_reason personal]
+  end
+
+  def enable_bs4_layout
+    @bs4 = conditionally_bs4_enabled_actions.include?(action_name) ? params[:bs4] == "true" : true
+  end
+
+  def resolve_layout
+    case action_name
+    when "find_sep"
+      EnrollRegistry.feature_enabled?(:bs4_consumer_flow) ? "progress" : "application"
+    when "purchase"
+      "application"
+    end
+  end
 end
diff --git a/app/helpers/navigation_helper.rb b/app/helpers/navigation_helper.rb
@@ -34,6 +34,14 @@ def local_assigned_boolean(local, default)
     local == "true"
   end
 
+  def special_enrollment_period_hash
+    if @change_plan.blank?
+      sep_nav_options
+    else
+      sep_shop_for_plans_nav_options
+    end
+  end
+
   def family_info_progress_hash
     if @change_plan.present?
       qle_nav_options

diff --git a/app/views/insured/families/_effective_on_kind_fields.html.erb b/app/views/insured/families/_effective_on_kind_fields.html.erb
@@ -1,10 +1,8 @@
 <% if @qle.effective_on_kinds.count > 1 %>
   <% if @bs4 %>
     <div onkeydown="handleButtonKeyDown(event, 'qle_success_submit')">
-      <label class="weight-n required">
-        <div><%= l10n('please_select_effective_date') %></div>
-        <%= select_tag 'effective_on_kind', options_for_select(generate_options_for_effective_on_kinds(@qle, @qle_event_date)), include_blank: l10n("select"), class: "col-auto pr-4" %>
-      </label>
+      <label class="weight-n required"><%= l10n('please_select_effective_date') %></label>
+      <%= select_tag 'effective_on_kind', options_for_select(generate_options_for_effective_on_kinds(@qle, @qle_event_date)), include_blank: l10n("select"), class: "col-auto pr-4" %>
     </div>
   <% else %>
     <div class="alert alert-danger" id='qle_effective_on_kind_alert' role="alert" style='display:none'><%= l10n(".please_select_effective_date") %></div>

diff --git a/app/views/insured/families/_insurance_fields.html.erb b/app/views/insured/families/_insurance_fields.html.erb
@@ -1,25 +1,25 @@
 <% if @bs4 %>
   <div class="special_qle_reasons hidden">
-    <fieldset>
-      <legend class="weight-n mb-2">
-        <% if EnrollRegistry.feature_enabled?(:is_your_health_coverage_ending_expanded_question) %> 
-          <%= l10n("insured.is_your_health_coverage_ending_expanded", contact_center_phone_number: EnrollRegistry[:enroll_app].settings(:contact_center_short_number).item, contact_center_tty_number: EnrollRegistry[:enroll_app].settings(:contact_center_tty_number).item, contact_center_name: EnrollRegistry[:enroll_app].settings(:contact_center_name).item) %> 
-          <div id="health-ending-expanded"></div>
-        <% else %>
-          <%= l10n("insured.is_your_health_coverage_ending") %>
-        <% end %>
-      </legend>
-      <div class="focus" onkeydown="handleButtonKeyDown(event, 'qle_submit_reason')">
-        <label class="weight-n" class="radio">
-          <%= radio_button_tag :reason, "yes", !EnrollRegistry.feature_enabled?(:default_is_your_health_coverage_ending_no), id: "reason_accept" %>
-          <%= l10n("yes") %>
-        </label>
-        <label class="weight-n" class="radio">
-          <%= radio_button_tag :reason, "no", EnrollRegistry.feature_enabled?(:default_is_your_health_coverage_ending_no), id: 'reason_accept1' %>
-          <%= l10n("no") %>
-        </label>
-      </div>
-    </fieldset>
+    <label class="weight-n mb-2">
+      <% if EnrollRegistry.feature_enabled?(:is_your_health_coverage_ending_expanded_question) %> 
+        <%= l10n("insured.is_your_health_coverage_ending_expanded", contact_center_phone_number: EnrollRegistry[:enroll_app].settings(:contact_center_short_number).item, contact_center_tty_number: EnrollRegistry[:enroll_app].settings(:contact_center_tty_number).item, contact_center_name: EnrollRegistry[:enroll_app].settings(:contact_center_name).item) %> 
+        <div id="health-ending-expanded"></div>
+      <% else %>
+        <%= l10n("insured.is_your_health_coverage_ending") %>
+      <% end %>
+    </label>
+    <div tabindex="0" onkeydown="handleButtonKeyDown(event, 'qle_submit_reason')" onfocus="handleSEPRadioButton('reason_accept')" class="n-radio-row">
+      <label class="weight-n" for="reason_accept">
+        <%= radio_button_tag :reason, "yes", !EnrollRegistry.feature_enabled?(:default_is_your_health_coverage_ending_no), id: 'reason_accept' %>
+        <%= l10n("yes") %>
+      </label>
+    </div>
+    <div tabindex="0" onkeydown="handleButtonKeyDown(event, 'qle_submit_reason')" onfocus="handleSEPRadioButton('reason_accept1')" class="n-radio-row">
+      <label class="weight-n" for="reason_accept1">
+        <%= radio_button_tag :reason, "no", EnrollRegistry.feature_enabled?(:default_is_your_health_coverage_ending_no), id: 'reason_accept1', class: "n-radio" %>
+        <%= l10n("no") %>
+      </label>
+    </div>
     <div class="mt-4 <%= pundit_class Family,:updateable? %>">
       <%= render partial: 'shared/progress_navigation_buttons', locals: {button_type: "button", button_id: "qle_submit_reason"} %>
     </div>

diff --git a/app/views/insured/families/_marriage_fields.html.erb b/app/views/insured/families/_marriage_fields.html.erb
@@ -1,20 +1,24 @@
 <% if @bs4 %>
   <div class="special_qle_reasons hidden">
-    <fieldset>
-      <legend class="weight-n mb-2"><%= l10n("insured.qle_detail.special_reason.marriage", qle_start_date: @qle_date_calc, qle_date: @qle_date) %></legend>
-      <div class="focus" onkeydown="handleButtonKeyDown(event, 'qle_submit_reason')">
-        <label class="weight-n" class="radio">
-          <%= radio_button_tag :reason, "no", false, id: "reason_accept1" %>
-          <%= l10n("yes") %>
-        </label>
-        <label class="weight-n" class="radio">
-          <%= radio_button_tag :reason, "yes", true, id: "reason_accept" %>
-          <%= l10n("no") %>
-        </label>
+    <label class="weight-n mb-2"><%= l10n("insured.qle_detail.special_reason.marriage", qle_start_date: @qle_date_calc, qle_date: @qle_date) %></label>
+    <div>
+      <div>
+        <div tabindex="0" onkeydown="handleButtonKeyDown(event, 'qle_submit_reason')" onfocus="handleSEPRadioButton('reason_accept1')" class="n-radio-row">
+          <label class="weight-n" for="reason_accept1">
+            <%= radio_button_tag :reason, "no", false, id: 'reason_accept1' %>
+            <%= l10n("yes") %>
+          </label>
+        </div>
+        <div tabindex="0" onkeydown="handleButtonKeyDown(event, 'qle_submit_reason')" onfocus="handleSEPRadioButton('reason_accept')" class="n-radio-row">
+          <label class="weight-n" for="reason_accept">
+            <%= radio_button_tag :reason, "yes", true, id: 'reason_accept', class: "n-radio" %>
+            <%= l10n("no") %>
+          </label>
+        </div>
+        <div class="mt-4 <%= pundit_class Family,:updateable? %>">
+          <%= render partial: 'shared/progress_navigation_buttons', locals: {button_type: "button", button_id: "qle_submit_reason"} %>
+        </div>
       </div>
-    </fieldset>
-    <div class="mt-4 <%= pundit_class Family,:updateable? %>">
-      <%= render partial: 'shared/progress_navigation_buttons', locals: {button_type: "button", button_id: "qle_submit_reason"} %>
     </div>
   </div>
 <% else %>