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 6, 2024 · ac46878 · ac46878
1 parent 65e7365
commit ac46878
Show file tree

Hide file tree

Showing 18 changed files with 626 additions and 284 deletions.
diff --git a/app/assets/javascripts/qle.js.erb b/app/assets/javascripts/qle.js.erb
@@ -9,7 +9,7 @@ var QLE = ( function( window, undefined ) {
   function qle_question(url){
     $.ajax({
       type: "GET",
-      data:{date_val: $("#qle_date").val(), qle_id: $("#qle_id").val()},
+      data:{date_val: $("#qle_date").val(), qle_id: $("#qle_id").val(), bs4: $("#bs4").val()},
       url: "/insured/families/" + url
     });
   }
@@ -41,7 +41,7 @@ var QLE = ( function( window, undefined ) {
 } )( window );
 
 $(function () {
-	function check_qle_date() {
+	function validate_qle_date_input() {
 		var date_value = $('#qle_date').val();
 		if(date_value == "" || isNaN(Date.parse(date_value))) { return false; }
 		return true;
@@ -52,14 +52,15 @@ $(function () {
     $('#qle-details .error-info').addClass('hidden');
     $('#qle-details #qle-date-chose').removeClass('hidden');
     $("#qle_date").val("");
+    $('#qle-nav').removeClass('hidden');
     var errorNotice = "Based on the information you entered, you may be eligible for a special enrollment period. Please call us at <%= EnrollRegistry[:enroll_app].setting(:health_benefit_exchange_authority_phone_number)&.item %> to give us more information so we can see if you qualify.";
     $("#qle-details .error-text").html(errorNotice);
   }
 
-  function get_qle_date() {
+  function check_qle_date() {
     $.ajax({
       type: "GET",
-      data:{date_val: $("#qle_date").val(), qle_id: $("#qle_id").val(), qle_reason_val: $("input:radio[name=reason]:checked").val()},
+      data:{date_val: $("#qle_date").val(), qle_id: $("#qle_id").val(), qle_reason_val: $("input:radio[name=reason]:checked").val(), bs4: $("#bs4").val()},
       url: "/insured/families/check_qle_date.js"
     });
   }
@@ -90,6 +91,14 @@ $(function () {
       dateFormat: 'mm/dd/yy',
       defaultDate: cdate
 		});
+
+    $(".sep-date #qle_date").on("change", function(){
+      if ($(".sep-date #qle_date").val()) {
+        $('#qle_submit').removeAttr('disabled');
+      } else {
+        $('#qle_submit').attr('disabled', 'disabled');
+      }
+    });
   }
 
   $(document).on('click', 'a.qle-menu-item', function() {
@@ -105,8 +114,10 @@ $(function () {
     $('.qle-label').html($(this).data('label'));
     $('#change_plan').val($(this).data('title'));
     $('#qle_id').val($(this).data('id'));
-    $('#qle_reason .special_qle_reasons').addClass('hidden');
+    $('#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) {
       $('#qle-date-chose').addClass('hidden');
@@ -162,6 +173,11 @@ $(function () {
 		$('#qle_flow_info #qle-menu').show();
 	});
 
+  $('.sep-modal.modal').on('hide.bs.modal', function() {
+    init_qle_message();
+		$('#qle-details').addClass('hidden');
+  });
+
   $(document).on('click', '#qle-details-for-existing-sep .close-popup, #qle-details-for-existing-sep .cancel', function() {
     //init_qle_message();
     //$('.seps-panel').removeClass('hidden');
@@ -173,6 +189,10 @@ $(function () {
   // Disable form submit on pressing Enter, instead click Submit link
   $('#qle_form').on('keydown', function(e) {
     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();
@@ -187,11 +207,12 @@ $(function () {
 	/* QLE Date Validator */
   $(document).off('click', '#qle_submit')
   $(document).on('click', '#qle_submit', function() {
-    if(check_qle_date()) {
+    if(validate_qle_date_input()) {
       $('#qle_date').removeClass('input-error');
 
+      $('#date-nav').addClass('hidden');
       if(QLE.check_qle_reason()){
-        get_qle_date();
+        check_qle_date();
       }
     } else {
       $('#qle_date').addClass('input-error');
@@ -203,7 +224,7 @@ $(function () {
     var not_expected_response = ( health_message ) ? 'no' : 'yes';
 
     if( $("input:radio[name=reason]:checked").val() != 'None of the Above' && $("input:radio[name=reason]:checked").val() != not_expected_response){
-      get_qle_date();
+      check_qle_date();
     } else {
       $('#qle_reason').hide();
       var errorNoticeAction = "Based on the information you have provided, you are not eligible for this special enrollment period. If you have questions or would like to provide additional information, please contact <%= EnrollRegistry[:enroll_app].setting(:short_name).item %> customer service at <%= EnrollRegistry[:enroll_app].setting(:contact_center_short_number).item %>.";
@@ -243,6 +264,14 @@ $(function () {
     }
   });
 
+  $(document).on('change', '#effective_on_kind', function(e) {
+    if ($('#effective_on_kind').find(":selected").val()){
+      $('#qle_success_submit').removeAttr('disabled');
+    } else {
+      $('#qle_success_submit').attr('disabled', 'disabled');
+    }
+  });
+
   $(document).on('submit', '.qle-detail-for-existing-kind', function(e) {
     if($('#qle_date').val() == ''){
       $('#qle_effective_on_kind_alert-4').removeClass('hidden');
@@ -260,4 +289,8 @@ $(function () {
       });
     }
   });
+
+  $(document).on('click', '#shop-link', function() {
+		$('#qle_success_submit').trigger('click');
+  });
 });
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,12 +1,18 @@
 <% if @qle.effective_on_kinds.count > 1 %>
-  <div class="alert alert-danger" id='qle_effective_on_kind_alert' role="alert" style='display:none'><%= l10n(".please_select_effective_date") %></div>
-  <div style='margin: 0 auto;max-width:250px;'>
-    <%= select_tag 'effective_on_kind', options_for_select(generate_options_for_effective_on_kinds(@qle, @qle_event_date)), include_blank: "#{l10n('.select_effective_date').to_s.upcase} *" %>
-  </div>
+  <% if @bs4 %>
+    <div onkeydown="handleButtonKeyDown(event, 'qle_success_submit')">
+      <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>
+    <div style='margin: 0 auto;max-width:250px;'>
+      <%= select_tag 'effective_on_kind', options_for_select(generate_options_for_effective_on_kinds(@qle, @qle_event_date)), include_blank: "#{l10n('.select_effective_date').to_s.upcase} *" %>
+    </div>
+    <script type="text/javascript">
+      $('select').selectric();
+    </script>
+  <% end %>
 <% else %>
   <%= hidden_field_tag 'effective_on_kind', @qle.effective_on_kinds.first %>
-<% end %>
-
-<script type="text/javascript">
-  $('select').selectric();
-</script>
+<% end %>
diff --git a/app/views/insured/families/_insurance_fields.html.erb b/app/views/insured/families/_insurance_fields.html.erb
@@ -1,35 +1,63 @@
-<div class="special_qle_reasons hidden">
-  <% translation_keys = {
-        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
-      } %>
-  <h4>
-    <% if EnrollRegistry.feature_enabled?(:is_your_health_coverage_ending_expanded_question) %> 
-      <%= l10n("insured.is_your_health_coverage_ending_expanded", translation_keys) %> <div id="health-ending-expanded" />
-    <% else %>
-      <%= l10n("insured.is_your_health_coverage_ending") %>
-    <% end %>
-  </h4> <br/>
-  <div class = 'moving_radio_btn'>
-    <div class="n-radio-group">
-      <div tabindex="0" onkeydown="handleButtonKeyDown(event, 'qle_submit_reason')" onfocus="handleSEPRadioButton('reason_accept')" class="n-radio-row">
-    	  <label class="n-radio vertically-aligned-row" for="reason_accept">
-    	    <%= radio_button_tag :reason, "yes",  !EnrollRegistry.feature_enabled?(:default_is_your_health_coverage_ending_no), id: 'reason_accept', class: "n-radio" %>
-    	    <span class = "n-radio"></span>
-    	      <%= l10n("yes") %>
-    	  </label>
-      </div>
-      <div tabindex="0" onkeydown="handleButtonKeyDown(event, 'qle_submit_reason')" onfocus="handleSEPRadioButton('reason_accept1')" class="n-radio-row">
-        <label class="n-radio" for="reason_accept1">
+<% if @bs4 %>
+  <div class="special_qle_reasons hidden">
+    <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" %>
-        <span class="n-radio"></span>
-          <%= l10n("no") %>
-        </label>
-      </div>
+        <%= 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 class="center">
-      <%= link_to l10n("continue").to_s.upcase, 'javascript:;', class: 'btn btn-primary btn-md', id: 'qle_submit_reason' %>
+  </div>
+<% else %>
+  <div class="special_qle_reasons hidden">
+    <% translation_keys = {
+          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
+        } %>
+    <h4>
+      <% if EnrollRegistry.feature_enabled?(:is_your_health_coverage_ending_expanded_question) %> 
+        <%= l10n("insured.is_your_health_coverage_ending_expanded", translation_keys) %> <div id="health-ending-expanded" />
+      <% else %>
+        <%= l10n("insured.is_your_health_coverage_ending") %>
+      <% end %>
+    </h4> <br/>
+    <div class = 'moving_radio_btn'>
+      <div class="n-radio-group">
+        <div tabindex="0" onkeydown="handleButtonKeyDown(event, 'qle_submit_reason')" onfocus="handleSEPRadioButton('reason_accept')" class="n-radio-row">
+          <label class="n-radio vertically-aligned-row" for="reason_accept">
+            <%= radio_button_tag :reason, "yes",  !EnrollRegistry.feature_enabled?(:default_is_your_health_coverage_ending_no), id: 'reason_accept', class: "n-radio" %>
+            <span class = "n-radio"></span>
+              <%= l10n("yes") %>
+          </label>
+        </div>
+        <div tabindex="0" onkeydown="handleButtonKeyDown(event, 'qle_submit_reason')" onfocus="handleSEPRadioButton('reason_accept1')" class="n-radio-row">
+          <label class="n-radio" for="reason_accept1">
+          <%= radio_button_tag :reason, "no", EnrollRegistry.feature_enabled?(:default_is_your_health_coverage_ending_no), id: 'reason_accept1', class: "n-radio" %>
+          <span class="n-radio"></span>
+            <%= l10n("no") %>
+          </label>
+        </div>
+      </div>
+      <div class="center">
+        <%= link_to l10n("continue").to_s.upcase, 'javascript:;', class: 'btn btn-primary btn-md', id: 'qle_submit_reason' %>
+      </div>
     </div>
   </div>
-</div>
+<% end %>