Resolves #5281 (#5284)

* Hide Other Agency Type field unless Agency Type is Other

* Fix partner profile agency type visibility tests and functionality

- Add system tests for Other Agency Type field visibility
- Enable partner_step_form feature flag in tests
- Fix CSS selectors to properly test hidden elements with visible: false
- Tests verify Other Agency Type field shows/hides correctly based on selection
- Update hide_by_source_val_controller.js for proper field visibility

* Add test for nil agency type and fix empty dropdown behavior

- Add comprehensive test suite for Other Agency Type field visibility
- Update JavaScript controller to hide field when dropdown is empty
- All 5 test scenarios now pass including nil agency type case

* Fix rubocop trailing whitespace in test file

* Fix ERB linting issues in agency information form

* Fix agency type field visibility using valuesToShow logic

- Update hide_by_source_val_controller to use Bootstrap d-none class
- Change from valuesToHide to valuesToShow for cleaner code
- Ensure Other Agency Type field shows only when 'other' is selected
- Optimize system tests by combining scenarios
- Address reviewer feedback on controller logic simplification

* Add backward compatibility for valuesToHide parameter

---------

Co-authored-by: Viikaax <[email protected]>

Author: Vikx001

app/javascript/controllers/hide_by_source_val_controller.js

@@ -2,13 +2,32 @@ import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
   static targets = ["source", "destination"]
-  static values = {
-    valuesToHide: Array
+  static values = { 
+    valuesToHide: Array,
+    valuesToShow: Array 
   }
+
+  connect() {
+    this.toggleVisibility()
+  }
+
   sourceChanged() {
-    const val = $(this.sourceTarget).val()
-    this.destinationTargets.forEach(
-      destination_target => { $(destination_target).toggleClass("d-none", this.valuesToHideValue.includes(val)); }
-    )
+    this.toggleVisibility()
+  }
+
+  toggleVisibility() {
+    const sourceValue = this.sourceTarget.value
+    let shouldShow = false
+
+    if (this.hasValuesToShowValue && this.valuesToShowValue.length > 0) {
+      shouldShow = this.valuesToShowValue.includes(sourceValue)
+    } else if (this.hasValuesToHideValue && this.valuesToHideValue.length > 0) {
+      shouldShow = !this.valuesToHideValue.includes(sourceValue)
+    }
+    if (shouldShow) {
+      this.destinationTarget.classList.remove("d-none")
+    } else {
+      this.destinationTarget.classList.add("d-none")
+    }
   }
 }

app/views/partners/profiles/step/_agency_information_form.html.erb

@@ -3,18 +3,20 @@
 </div>
 
 <%= f.fields_for :profile, profile do |pf| %>
-  <div class="form-group">
-    <%= pf.input :agency_type,
-    # Symbolize keys, because simple_form will only do a I18n lookup for
-    # symbols
-      collection: Partners::Profile.agency_types_for_selection,
-      label: "Agency Type",
-      class: "form-control",
-      wrapper: :input_group %>
-  </div>
-
-  <div class="form-group">
-    <%= pf.input :other_agency_type, label: "Other Agency Type", class: "form-control" %>
+  <div data-controller="hide-by-source-val"
+       data-hide-by-source-val-values-to-show-value='["other"]'>
+    <div class="form-group">
+      <%= pf.input :agency_type,
+        collection: Partners::Profile.agency_types_for_selection,
+        label: "Agency Type",
+        class: "form-control",
+        wrapper: :input_group,
+        input_html: { data: { "hide-by-source-val-target": "source", action: "change->hide-by-source-val#sourceChanged" } } %>
+    </div>
+
+    <div class="form-group" data-hide-by-source-val-target="destination">
+      <%= pf.input :other_agency_type, label: "Other Agency Type", class: "form-control" %>
+    </div>
   </div>
 
   <%= render "shared/custom_file_input",

spec/system/partners/profile_agency_type_spec.rb

@@ -0,0 +1,43 @@
+require "rails_helper"
+
+RSpec.describe "Partner Profile Agency Type Field Visibility", type: :system, js: true do
+  let(:partner) { create(:partner) }
+
+  before do
+    Flipper.enable(:partner_step_form)
+    sign_in(partner.primary_user)
+    visit edit_partners_profile_path
+    find("button[data-bs-target='#agency_information']").click
+  end
+
+  after do
+    Flipper.disable(:partner_step_form)
+  end
+
+  it "shows/hides Other Agency Type field based on selection and initial state" do
+    select "Food bank/pantry", from: "Agency Type"
+    expect(page).to have_css('[data-hide-by-source-val-target="destination"].d-none', visible: false, wait: 5)
+
+    select "Other", from: "Agency Type"
+    expect(page).not_to have_css('[data-hide-by-source-val-target="destination"].d-none', visible: false, wait: 5)
+  end
+
+  context "initial state based on partner agency type" do
+    it "handles different initial agency types correctly" do
+      partner.profile.update!(agency_type: nil)
+      visit edit_partners_profile_path
+      find("button[data-bs-target='#agency_information']").click
+      expect(page).to have_css('[data-hide-by-source-val-target="destination"].d-none', visible: false, wait: 5)
+
+      partner.profile.update!(agency_type: "food")
+      visit edit_partners_profile_path
+      find("button[data-bs-target='#agency_information']").click
+      expect(page).to have_css('[data-hide-by-source-val-target="destination"].d-none', visible: false, wait: 5)
+
+      partner.profile.update!(agency_type: "other")
+      visit edit_partners_profile_path
+      find("button[data-bs-target='#agency_information']").click
+      expect(page).not_to have_css('[data-hide-by-source-val-target="destination"].d-none', visible: false, wait: 5)
+    end
+  end
+end