Plan shopping review and submit (#4026)

* more work on consumer flow * upgrade to bs4 base * revert temp changes for design review to trunk * personal information page redo * plan shopping page visuals work * more plan shopping styling * minor fixes * clean up from rebase * receipt page translations * upgrade to bs4 base * revert temp changes for design review to trunk * fix fonts, more ridp work started * plan shopping page visuals work * started review submitted plan page * started calculator plus lots of cleanup * session timeout * faa manage family fixes * fdsh error * no flash on waiting for elgi results * plan shopping tile * aptc minumum --------- Signed-off-by: kristinmerbach <[email protected]> Co-authored-by: Sarah Austin <[email protected]>
ideacrew · Aug 23, 2024 · b756d6e · b756d6e
1 parent 5c7fdb8
commit b756d6e
Show file tree

Hide file tree

Showing 20 changed files with 447 additions and 104 deletions.
diff --git a/app/assets/javascripts/plan_shopping.js.erb b/app/assets/javascripts/plan_shopping.js.erb
@@ -259,6 +259,74 @@ $(function() {
     }
   });
 
+  $(document).on('change', 'input[name="elected_aptc_pct"]', function(){
+    var max = parseFloat($('input#elected_aptc_value').attr('max'));
+    var elected_pct = $("input[name='elected_aptc_pct']").val() / 100;
+    var elected_amount = parseFloat($('#max_aptc').attr('value')).toFixed(2) * parseFloat(elected_pct).toFixed(2);
+    if (elected_amount <= 1) {
+      elected_amount = 1.00;
+    }
+    if (elected_amount > max) {
+      elected_amount = max;
+      $("input[name='elected_aptc_pct']").val(100);
+    }
+    $('#elected_aptc_value').val(elected_amount.toFixed(2));
+    $('#elected_aptc_value').attr('value', elected_amount.toFixed(2));
+  });
+
+  $(document).on('change', 'input#elected_aptc_value', function(){
+    var elected_aptc = $(this).val();
+    var max = $('input#elected_aptc_value').attr('max');
+    var max_aptc = $('input#max_aptc').val();
+    elected_pct = (elected_aptc/max_aptc).toFixed(2) * 100;
+    if (elected_pct <= 0) {
+      elected_amount = 0;
+    }
+    if (elected_pct > 100) {
+      elected_pct = 100;
+      $('#elected_aptc_value').val(max);
+    }
+    $("input[name='elected_aptc_pct']").val(elected_pct);
+  });
+
+  $("#updateAptc").on('click', function(){
+    $(this).addClass('hidden');
+    $('.aptc').removeClass('hidden');
+  });
+
+  var USDollar = new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD',
+  });
+
+  $("#aptc_submit").on('click', function(){
+    var elected_aptc = $("input#elected_aptc_value").val();
+    var elected_pct = $("input[name='elected_aptc_pct']").val();
+    var coverage_kind = $("input#coverage_kind").val();
+    var market_kind = $("input#market_kind").val();
+    var plan = $("input#plan").val();
+    var enrollment = $("input#enrollment").val();
+    $('.aptc-percentage').text(elected_pct);
+    $('.aptc-amount').text(USDollar.format(elected_aptc));
+    $.ajax({
+        type: "POST",
+        url: $('#set_elected_aptc_url').val(),
+        data: {
+          'elected_aptc': elected_aptc,
+          'market_kind': market_kind,
+          'coverage_kind': coverage_kind,
+          'plan': plan,
+          'enrollment': enrollment
+        },
+        success: function(data){
+          response = JSON.parse(JSON.stringify(data));
+          var amount = USDollar.format(data['responsible_amount']);
+          $('#resp-amount').text(amount);
+        },
+      });
+  });
+
+
   $(document).on('click', '.all-filters-row .apply-btn', function(){
 		applyPlanFilters();
 

diff --git a/app/controllers/insured/plan_shoppings_controller.rb b/app/controllers/insured/plan_shoppings_controller.rb
@@ -16,7 +16,7 @@ class Insured::PlanShoppingsController < ApplicationController
   before_action :validate_rating_address, only: [:show]
   before_action :check_enrollment_state, only: [:show, :thankyou]
   before_action :set_cache_headers, only: [:show, :thankyou]
-  before_action :enable_bs4_layout, only: [:show, :plans, :receipt] if EnrollRegistry.feature_enabled?(:bs4_consumer_flow)
+  before_action :enable_bs4_layout, only: [:show, :plans, :receipt, :thankyou] if EnrollRegistry.feature_enabled?(:bs4_consumer_flow)
 
   layout :resolve_layout
 
@@ -240,8 +240,20 @@ def set_elected_aptc
     plan_comparision_obj = ::Services::CheckbookServices::PlanComparision.new(@hbx_enrollment)
     plan_comparision_obj.elected_aptc = session[:elected_aptc]
     checkbook_url = plan_comparision_obj.generate_url
+
+    # for the thank you page will need member data returned to update table
+    if params[:plan].present? && params[:enrollment].present?
+      plan = BenefitMarkets::Products::Product.where(:id => params[:plan])&.first
+      enrollment = HbxEnrollment.find(params[:enrollment])
+      if plan.present? && enrollment
+        decorated_plan = UnassistedPlanCostDecorator.new(plan, enrollment, session[:elected_aptc])
+        responsible_amount = decorated_plan.total_employee_cost - enrollment.eligible_child_care_subsidy.to_f
+        amount = responsible_amount < 1 ? 0.00 : responsible_amount
+      end
+    end
+
     respond_to do |format|
-      format.json { render json: {message: 'ok',checkbook_url: checkbook_url } }
+      format.json { render json: {message: 'ok',checkbook_url: checkbook_url, responsible_amount: amount } }
     end
   end
 

diff --git a/app/javascript/css/_buttons.scss b/app/javascript/css/_buttons.scss
@@ -111,3 +111,7 @@ button.unstyled, button.close {
     color: var(--button-primary-active-color);
   }
 }
+
+button.short, .button.short, .btn.short {
+  padding: 6px 12px;
+}
diff --git a/app/javascript/css/colors.scss b/app/javascript/css/colors.scss
@@ -31,6 +31,14 @@
   --error-color: hsl(0, 69%, 38%);
   --error-tint: hsl(0, 80%, 86%);
   --body-divider: hsl(214, 16%, 80%);
+  --platinum-border: hsla(240, 2%, 37%, 1);
+  --platinum-bg: hsla(240, 1%, 84%, 1);
+  --gold-border: hsla(43, 96%, 54%, 1);
+  --gold-bg: hsla(44, 93%, 88%, 1);
+  --silver-border: hsla(0, 0%, 75%, 1);
+  --silver-bg: hsla(0, 0%, 94%, 1);
+  --bronze-border: hsla(30, 61%, 50%, 1);
+  --bronze-bg: hsla(31, 60%, 87%, 1);
 
   // May be unique colors, but used by all clients
   --bright-green: hsl(65, 100%, 42%);
@@ -116,6 +124,11 @@
   --button-error-color: var(--status-red);
   --button-error-hover-color: var(--status-red-hover);
   --button-error-active-color: var(--status-red-active);
+
+  --badge-current-bg: hsla(206, 30%, 82%, 1);
+  --badge-current-border: hsla(206, 33%, 66%, 1);
+  --badge-standard-bg: hsla(321, 19%, 80%, 1);
+  --badge-standard-border: hsla(317, 33%, 38%, 1);
 }
 
 [data-theme='dc'] {

diff --git a/app/javascript/css/main.scss b/app/javascript/css/main.scss
@@ -209,6 +209,10 @@ ul.list-right-section {
   .sm-hide {
     display: none;
   }
+
+  .sm-hide {
+    display: none;
+  }
 }
 
 .card {
@@ -258,6 +262,47 @@ ul.list-right-section {
   }
 }
 
+.badge-current-plan {
+  background-color: var(--badge-current-bg);
+  border: 1px solid var(--badge-current-border);
+  padding: 1px 8px;
+}
+
+.badge-standard {
+  background-color: var(--badge-standard-bg);
+  border: 1px solid var(--badge-standard-border);
+}
+
+.badge-platinum {
+  font-weight: 400;
+  background-color: var(--platinum-bg);
+  border: 1px solid var(--platinum-border);
+}
+
+.badge-gold {
+  font-weight: 400;
+  background-color: var(--gold-bg);
+  border: 1px solid var(--gold-border);
+}
+
+.badge-silver {
+  font-weight: 400;
+  background-color: var(--silver-bg);
+  border: 1px solid var(--silver-border);
+}
+
+.badge-bronze {
+  font-weight: 400;
+  background-color: var(--bronze-bg);
+  border: 1px solid var(--bronze-border);
+}
+
+.badge-catastrophic {
+  font-weight: 400;
+  background-color: var(--error-tint);
+  border: 1px solid var(--error-shade);
+}
+
 .float-end {
   float: inline-end;
 }
@@ -545,8 +590,24 @@ a.disabled {
   font-weight: 600;
 }
 
+.filter-input-block legend.bb, .sort-area legend {
+  padding-bottom: ($spacer / 2);
+  border-bottom: 1px solid var(--body-divider);
+}
 
 .filter-input-block legend.bb, .sort-area legend {
   padding-bottom: ($spacer / 2);
   border-bottom: 1px solid var(--body-divider);
 }
+
+.plan-card {
+  background: var(--grey-010);
+
+  .plan-footer {
+    a:not(.btn) {
+      text-decoration: none;
+      font-weight: 600;
+      color: var(--info-color);
+    }
+  }
+}
diff --git a/app/javascript/css/table.scss b/app/javascript/css/table.scss
@@ -82,3 +82,26 @@ table {
     font-weight: 600;
   }
 }
+
+.compare-table.table {
+  th, td {
+    border-top: none;
+    border-bottom: none;
+  }
+  tr.left-border-all td:nth-child(1n+1) {
+    border-right: 1px solid var(--grey-060);
+  }
+  tr:not(.left-border-all) td:nth-child(1n+1) {
+    border-right: 1px solid var(--grey-030);
+  }
+  tr:not(.left-border-all) td:nth-child(2n+1) {
+    border-right: 1px solid var(--grey-060);
+  }
+  tr.left-border-all td:last-of-type, tr:not(.left-border-all) td:last-of-type {
+    border-right: none;
+  }
+  th {
+    background: var(--grey-010);
+    font-weight: 600;
+  }
+}
diff --git a/app/models/benefit_coverage_period.rb b/app/models/benefit_coverage_period.rb
@@ -177,10 +177,7 @@ def elected_plans_by_enrollment_members(hbx_enrollment_members, coverage_kind, t
                    'csr_limited'
                  end
     end
-
-    ivl_bgs = get_benefit_packages({family_members: family_members, coverage_kind: coverage_kind, family: hbx_enrollment.family, american_indian_members: american_indian_members,
-                                    hbx_enrollment: hbx_enrollment,
-                                    effective_on: hbx_enrollment.effective_on, market: market, shopping_family_members_ids: shopping_family_member_ids, csr_kind: csr_kind }).uniq
+    ivl_bgs = get_benefit_packages({family_members: family_members, coverage_kind: coverage_kind, family: hbx_enrollment.family, american_indian_members: american_indian_members, hbx_enrollment: hbx_enrollment, effective_on: hbx_enrollment.effective_on, market: market, shopping_family_members_ids: shopping_family_member_ids, csr_kind: csr_kind }).uniq
     elected_product_ids = ivl_bgs.map(&:benefit_ids).flatten.uniq
     market = market.nil? || market == 'coverall' ? 'individual' : market
     product_entries({market: market, coverage_kind: coverage_kind, csr_kind: csr_kind, elected_product_ids: elected_product_ids, subcriber: subcriber, effective_on: hbx_enrollment.effective_on})

diff --git a/app/views/insured/family_members/index.html.erb b/app/views/insured/family_members/index.html.erb
@@ -1,6 +1,5 @@
 <% if @bs4 %>
   <%= render partial: 'shared/plan_shopping_progress', locals: { current_page: :household_info, nav_options: family_info_progress_hash } %>
-
   <div id="family_information" class="">
     <div id="dependents_info_wrapper">
         <%= render partial: 'family_members' %>

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
@@ -75,7 +75,7 @@
                       <% end %>
                       <% if pundit_allow(HbxProfile, :can_delete_identity_application_documents?) %>
                         <span class="<%=pundit_class(Family, :updateable?)%> pl-1" >
-                          <%= h(link_to insured_ridp_document_path(ridp_doc, :person_id => @person.id), method: :delete, remote: true, class: "btn-error outline text-nowrap" do %>
+                          <%= h(link_to(insured_ridp_document_path(ridp_doc, :person_id => @person.id), method: :delete, remote: true, class: "btn-error outline text-nowrap") do %>
                             <%= l10n("insured.consumer_roles.upload_ridp_documents.remove") %>
                           <% end)%>
                         </span>

diff --git a/app/views/insured/group_selection/new.html.erb b/app/views/insured/group_selection/new.html.erb
@@ -125,7 +125,6 @@
       <div id="plan-shopping-page-navigation-buttons" class="d-flex flex-column flex-md-row mt-4" >
         <%= render partial: "shared/progress_navigation_buttons", locals: { previous_style: "outline", button_type: "submit" } %>
       </div>
-
     <% end %>
   </div>
 
@@ -288,6 +287,7 @@
         </div>
         <div class="col-xs-3 right-section pull-right">
           <% if @change_plan.blank? && @market_kind == "individual" %>
+
             <% if @enrollment_kind.blank? && is_under_open_enrollment? %>
               <%= render partial: 'shared/individual_progress', locals: {step: '3'} %>
             <% else %>

diff --git a/app/views/insured/plan_shoppings/_individual_agreement.en.html.erb b/app/views/insured/plan_shoppings/_individual_agreement.en.html.erb
@@ -1,3 +1,55 @@
+<% if @bs4 %>
+  <section>
+    <h2><%= l10n("insured.individual_agreement.agreement.title") %></h2>
+    <p><%= l10n("insured.individual_agreement.agreement.report_changes", contact_center_name: contact_center_name, contact_center_phone_number: contact_center_phone_number) %></p>
+    <p><%= l10n("insured.individual_agreement.agreement.i_am_signature") %></p>
+    <p><%= l10n("insured.individual_agreement.agreement.reviewed_info") %></p>
+    <% if EnrollRegistry.feature_enabled?(:extended_aptc_individual_agreement_message) && @plan.total_aptc_amount > 0 %>
+      <% cov_year = locals[:coverage_year] %>
+      <p><%= l10n("insured.individual_agreement.agreement.aptc.on_my_behalf") %></p>
+      <ul>
+        <li><%= l10n("insured.individual_agreement.agreement.aptc.on_my_behalf.file_return", coverage_year: cov_year)%></li>
+        <li><%= l10n("insured.individual_agreement.agreement.aptc.on_my_behalf.if_married_file", coverage_year: cov_year) %></li>
+      </ul>
+      <p><%= l10n("insured.individual_agreement.agreement.aptc.i_expect") %></p>
+      <ul>
+        <li><%= l10n("insured.individual_agreement.agreement.aptc.i_expect.not_dependent", coverage_year: cov_year) %></li>
+        <li><%= l10n("insured.individual_agreement.agreement.aptc.i_expect.claim_dependents", coverage_year: cov_year, site_short_name: site_short_name) %></li>
+      </ul>
+      <p><%= l10n("insured.individual_agreement.agreement.aptc.if_changes") %></p>
+      <ul>
+        <li><%= l10n("insured.individual_agreement.agreement.aptc.if_changes.impact_credit") %></li>
+        <li><%= l10n("insured.individual_agreement.agreement.aptc.if_changes.irs_compares", coverage_year: cov_year) %></li>
+      </ul>
+    <% end %>
+    <label class="agree weight-n d-flex align-items-center" for="terms_check_thank_you"><%= check_box_tag 'terms_check_thank_you', true, false, class: 'mr-2' %><%= l10n("insured.individual_agreement.agreement.i_agree") %></label>
+  </section>
+  <section class="mt-4">
+    <h2><%= l10n("insured.individual_agreement.terms_conditions.title") %></h2>
+    <p><%= l10n("insured.individual_agreement.terms_conditions.cant_change_terms") %></p>
+    <p><%= l10n("insured.individual_agreement.terms_conditions.limitations") %></p>
+    <p><%= l10n("insured.individual_agreement.terms_conditions.collect_info", aca_state_name: aca_state_name) %></p>
+    <p><%= l10n("insured.individual_agreement.terms_conditions.best_of_knowledge") %></p>
+    <p><%= l10n("insured.individual_agreement.terms_conditions.contract") %></p>
+    <p><%= l10n("insured.individual_agreement.terms_conditions.insurer_agreement") %></p>
+    <p><%= l10n("insured.individual_agreement.terms_conditions.fraud_warning") %></p>
+    <h3><%= l10n("insured.individual_agreement.electronic_signature.title") %></h3>
+    <p><%= l10n("insured.individual_agreement.electronic_signature.desc") %></p>
+    <div class="d-flex">
+      <div class="mr-3">
+        <label for="first_name_thank_you" class="required"><%= l10n("first_name") %></label>
+        <%= text_field_tag 'first_name_thank_you', "", :placeholder => l10n("first_name"), :class => "thank_you_field" %>
+      </div>
+      <div>
+        <label for="last_name_thank_you" class="required"><%= l10n("last_name") %></label>
+        <%= text_field_tag 'last_name_thank_you', "", :placeholder => l10n("last_name"), :class => "thank_you_field" %>
+      </div>
+    </div>
+    <% person = @enrollment.try(:household).try(:family).try(:primary_applicant).try(:person) || @person %>
+    <%= hidden_field_tag 'subscriber_first_name', person.first_name.downcase %>
+    <%= hidden_field_tag 'subscriber_last_name', person.last_name.downcase %>
+  </section>
+<% else %>
 <div class="table-border table-responsive">
   <table class="table">
     <tbody>
@@ -61,3 +113,4 @@
     </tbody>
   </table>
 </div>
+<% end %>