bs4 fix benefits saved/edit titles (#4265)

* break out benefit title into helper, refactor options helper to use map, call new title helper in form partials in favor of humanizing the kind

* comments

* add zip mask

* rubocop fix

components/financial_assistance/app/assets/javascripts/financial_assistance/benefit.js

@@ -760,6 +760,7 @@ document.addEventListener("turbolinks:load", function() {
     });
   }
 
+  // masks from `application.js.erb` seem to be broken on the cloned forms, redefining the masks on the focus events seems to be the only reliable fix
   $(document).on('focus', '.phone_number', function () {
     $(this).mask('(000) 000-0000');
   });
@@ -768,6 +769,10 @@ document.addEventListener("turbolinks:load", function() {
     $(this).mask('99-9999999');
   });
 
+  $(document).on('focus', '.zip', function () {
+    $(this).mask("99999");
+  });
+
   $('body').on('keyup keydown keypress', '#benefit_employer_phone_full_phone_number', function (e) {
       $(this).mask('(000) 000-0000');
       return (key == 8 ||

components/financial_assistance/app/helpers/financial_assistance/application_helper.rb

@@ -456,15 +456,16 @@ def other_questions_prompt(key, use_applicant_name: false)
       l10n("faa.other_ques.#{key}", subject: use_applicant_name ? @applicant.first_name.capitalize : l10n("faa.this_person"))
     end
 
+    def hr_kind(kind, insurance_kind)
+      eligible_esi = kind == "is_eligible" && insurance_kind == 'employer_sponsored_insurance' && FinancialAssistanceRegistry.feature_enabled?(:minimum_value_standard_question)
+      term = eligible_esi ? "faa.question.#{insurance_kind}_eligible" : "faa.question.#{insurance_kind}"
+      l10n(term, short_name: EnrollRegistry[:enroll_app].setting(:short_name).item)
+    end
+
     def insurance_kind_select_options(kind)
-      insurance_kind_options = []
-      FinancialAssistance::Benefit.valid_insurance_kinds.each do |insurance_kind|
-        eligible_esi = kind == "is_eligible" && insurance_kind == 'employer_sponsored_insurance' && FinancialAssistanceRegistry.feature_enabled?(:minimum_value_standard_question)
-        term = eligible_esi ? "faa.question.#{insurance_kind}_eligible" : "faa.question.#{insurance_kind}"
-        hr_kind = l10n(term, short_name: EnrollRegistry[:enroll_app].setting(:short_name).item)
-        insurance_kind_options << [hr_kind, insurance_kind, {:'data-esi' => display_esi_fields?(insurance_kind, kind), :'data-mvsq' => display_minimum_value_standard_question?(insurance_kind)}]
+      FinancialAssistance::Benefit.valid_insurance_kinds.map do |insurance_kind|
+        [hr_kind(kind, insurance_kind), insurance_kind, {:'data-esi' => display_esi_fields?(insurance_kind, kind), :'data-mvsq' => display_minimum_value_standard_question?(insurance_kind)}]
       end
-      insurance_kind_options
     end
   end
 end

components/financial_assistance/app/views/financial_assistance/benefits/_esi_benefit.html.erb

@@ -2,7 +2,7 @@
   <div id="<%= dom_id benefit %>" class="benefit">
     <% is_hra = insurance_kind == "health_reimbursement_arrangement" %>
     <div class="my-4 p-3 border rounded bg-white benefit-show" data-cuke="esi_benefit" data-esi="true" data-hra=<%= is_hra %> data-mvsq=<%= display_minimum_value_standard_question?(insurance_kind) %>>
-      <h2><%= insurance_kind.humanize.titlecase %></h2>
+      <h2><%= hr_kind(kind, insurance_kind) %></h2>
       <h3><%= benefit.employer_name %></h3>
       <dl class="parent mb-4">
         <% if !FinancialAssistanceRegistry.feature_enabled?(:disable_employer_address_fields) %>

components/financial_assistance/app/views/financial_assistance/benefits/_esi_benefit_form.html.erb

@@ -5,8 +5,10 @@
     <%= f.hidden_field :kind, value: kind %>
     <%= f.hidden_field :insurance_kind, value: insurance_kind %>
     <div class="insurance-kind-label-container">
+      <%# the dummy forms used for benefit creation do not have a defined insurance_kind, `benefit.js` manages insurance-kind-specifc setup (unhiding the fields and setting this title) %>
+      <%# the forms used for benefit edit will have an insurance_kind %>
       <% if insurance_kind.present? %>
-        <h2><%= insurance_kind.humanize.titleize %></h2>
+        <h2><%= hr_kind(kind, insurance_kind) %></h2>
       <% end %>
     </div>
     <div class="d-flex flex-column col-6 px-0">
@@ -37,7 +39,7 @@
             <%= address_fields.select :state, options_for_select(state_options, selected: benefit.employer_address.try(:state)), {prompt: l10n("choose")}, {id: "state|#{form_id}", :required => required} %>
           </div>
           <div class="d-flex flex-column col-3 px-0">
-            <%= address_fields.label :zip, l10n("zip"), for: "zip|#{form_id}", class: "#{"required" if required}" %>
+            <%= address_fields.label :zip, l10n("zip"), for: "zip|#{form_id}", class: "zip #{"required" if required}" %>
             <%= address_fields.text_field :zip, placeholder: l10n('zip'), required: required, value: benefit.employer_address.try(:zip), class: "zip", id: "zip|#{form_id}" %>
           </div>
         </div>

components/financial_assistance/app/views/financial_assistance/benefits/_non_esi_benefit.html.erb

@@ -1,7 +1,7 @@
 <% if @bs4 %>
   <div id="<%= dom_id benefit %>" class="benefit">
     <div class="my-4 p-3 border rounded bg-white benefit-show" data-cuke="non_esi_benefit">
-      <h2><%= insurance_kind.humanize.titlecase %></h2>
+      <h2><%= hr_kind(kind, insurance_kind) %></h2>
       <dl class="parent">
         <dt><%= l10n("start_date") %></dt>
         <dd><%= benefit.start_on %>

components/financial_assistance/app/views/financial_assistance/benefits/_non_esi_benefit_form.html.erb

@@ -5,8 +5,10 @@
       <%= f.hidden_field :kind, value: kind %>
       <%= f.hidden_field :insurance_kind, value: insurance_kind %>
       <div class="insurance-kind-label-container">
+        <%# the dummy forms used for benefit creation do not have a defined insurance_kind, `benefit.js` manages setting this title %>
+        <%# the forms used for benefit edit will have an insurance_kind %>
         <% if insurance_kind.present? %>
-          <h2><%= insurance_kind.humanize.titleize %></h2>
+          <h2><%= hr_kind(kind, insurance_kind) %></h2>
         <% end %>
       </div>
       <div class="d-flex flex-column">