feat: convert to radio buttons and make other reason text field hidden until other clicked

Author: davidmillen50

app/assets/javascripts/application.js

@@ -27,6 +27,7 @@
 //= require dietary-restrictions
 //= require cocoon
 //= require font_awesome5
+//= require how-you-found-us
 
 $(function() {
   $("body").removeClass("no-js");

app/assets/javascripts/how-you-found-us.js

@@ -0,0 +1,20 @@
+$(document).ready(function() {
+  const $otherRadioButton = $('#member_how_you_found_us_other');
+  const $otherReason = $('#member_how_you_found_us_other_reason');
+  const $elementToToggle = $otherReason.parent();
+
+  function toggleOtherReason() {
+    if ($otherRadioButton.is(':checked')) {
+      $elementToToggle.removeClass('d-none').hide().slideDown(50);
+      $otherReason.prop('disabled', false).focus(); // Optional — disabling is not needed
+    } else {
+      $elementToToggle.slideUp(50, function() {
+        $elementToToggle.addClass('d-none');
+        $otherReason.val('');
+      });
+    }
+  }
+
+  toggleOtherReason();
+  $('input[name="member[how_you_found_us]"]').on('change', toggleOtherReason);
+});

app/controllers/concerns/member_concerns.rb

@@ -10,7 +10,8 @@ module InstanceMethods
 
     def member_params
       params.require(:member).permit(
-        :pronouns, :name, :surname, :email, :mobile, :about_you, :skill_list, :newsletter, :other_dietary_restrictions, :other_reason,  :how_you_found_us_other_reason, how_you_found_us: [], dietary_restrictions: [] 
+        :pronouns, :name, :surname, :email, :mobile, :about_you, :skill_list, :newsletter, :other_dietary_restrictions, :how_you_found_us,
+        :how_you_found_us_other_reason, dietary_restrictions: []
       ).tap do |params|
         # We want to keep Rails' hidden blank field in the form so that all dietary restrictions for a member can be
         # removed by submitting the form with all check boxes unticked. However, we want to remove the blank value
@@ -29,18 +30,13 @@ def set_member
       @member = current_user
     end
 
-    def how_you_found_us_selections
-      how_found = Array(member_params[:how_you_found_us]).reject(&:blank?)
-      other_reason = member_params[:how_you_found_us_other_reason]
+    def how_you_found_us_selections_valid?
+      how_found_present = member_params[:how_you_found_us].present?
+      other_reason_present = member_params[:how_you_found_us_other_reason].present?
+      return false if member_params[:how_you_found_us] == 'other' && !other_reason_present
+      return true if member_params[:how_you_found_us] == 'other' && other_reason_present
 
-      how_found << other_reason if other_reason.present?
-      how_found.uniq!
-
-      how_found
-    end
-
-    def member_params_without_how_you_found_us_other_reason
-      member_params.to_h.except(:how_you_found_us_other_reason)
+      how_found_present != other_reason_present
     end
   end
 end

app/controllers/member/details_controller.rb

@@ -13,14 +13,19 @@ def edit
   end
 
   def update
-    if how_you_found_us_selections.blank?
-      @member.assign_attributes(member_params_without_how_you_found_us_other_reason)
-      @member.errors.add(:how_you_found_us, 'You must select at least one option')
+    attrs = member_params
+    attrs[:how_you_found_us_other_reason] = nil if attrs[:how_you_found_us] != 'other'
+
+    unless how_you_found_us_selections_valid?
+      @member.errors.add(:how_you_found_us, 'You must select one option')
       return render :edit
     end
+    attrs[:how_you_found_us] = params[:member][:how_you_found_us] if params[:member][:how_you_found_us].present?
 
-    attrs = member_params_without_how_you_found_us_other_reason
-    attrs[:how_you_found_us] = how_you_found_us_selections
+    if params[:member][:how_you_found_us_other_reason].present? && attrs[:how_you_found_us] == 'other'
+      attrs[:how_you_found_us_other_reason] =
+        params[:member][:how_you_found_us_other_reason]
+    end
 
     return render :edit unless @member.update(attrs)
 

app/models/member.rb

@@ -1,12 +1,13 @@
 class Member < ApplicationRecord
   include Permissions
 
-  HOW_YOU_FOUND_US_OPTIONS = [
-    'From a friend',
-    'Search engine (Google etc.)',
-    'Social Media',
-    "One of Codebar's hosts or partners"
-  ].freeze
+  enum how_you_found_us: {
+    from_a_friend: 0,
+    search_engine: 1,
+    social_media: 2,
+    codebar_host_or_partner: 3,
+    other: 4
+  }
 
   has_many :attendance_warnings
   has_many :bans
@@ -52,7 +53,7 @@ class Member < ApplicationRecord
 
   acts_as_taggable_on :skills
 
-  attr_accessor :attendance, :newsletter, :how_you_found_us_other_reason
+  attr_accessor :attendance, :newsletter
 
   def banned?
     bans.active.present? || bans.permanent.present?

app/views/member/details/edit.html.haml

@@ -29,21 +29,20 @@
           %span.text-danger= @member.errors[:how_you_found_us].first
         .col-12.mb-3
           %fieldset
-            %legend= t('member.details.edit.how_you_found_us')
-            %span *
-
             = f.input :how_you_found_us,
-                      as: :check_boxes,
-                      collection: Member::HOW_YOU_FOUND_US_OPTIONS,
-                      item_wrapper_class: 'form-check',
+                      as: :radio_buttons,
+                      collection: Member.how_you_found_us.keys,
+                      label_method: ->(option) { t("member.details.edit.how_you_found_us_options.#{option}") },
+                      value_method: :to_s,
+                      label: t('member.details.edit.how_you_found_us_label'),
+                      item_wrapper_class: 'form-check d-flex align-items-center mb-2',
                       label_item: true,
-                      input_html: { class: 'form-check-input' },
-                      label_html: { class: 'form-check-label', style: 'margin-left: 8px;' }
+                      input_html: { class: 'form-check-input me-2', style: 'margin-top: 0;' },
+                      label_html: { class: 'form-check-label', style: 'margin-left: 0;' }
 
-          = f.input :how_you_found_us_other_reason,
-                    label: t('member.details.edit.how_you_found_us_other_reason'),
-                    placeholder: 'Please specify how you heard about us',
-                    input_html: { class: 'form-control w-100' }
+            = f.input :how_you_found_us_other_reason,
+                label: t('member.details.edit.how_you_found_us_other_reason'),
+                input_html: { class: 'form-control w-100' }
         = f.input :newsletter, as: :boolean, checked_value: true, unchecked_value: false
         .text-right.mb-4
           = hidden_field_tag :next_page, step2_member_path(member_type: @type)

config/locales/en.yml

@@ -442,8 +442,14 @@ en:
       edit:
         title: Almost there...
         summary: We need some more details from you to finish creating your account. We use these to help run our events.
-        how_you_found_us: "How did you find out about us?"
-        how_you_found_us_other_reason: "Please specify (if Other)"
+        how_you_found_us_label: "How did you find out about us?*"
+        how_you_found_us_other_reason: "Please specify how you found us"
+        how_you_found_us_options:
+          from_a_friend: "From a friend"
+          search_engine: "Search engine (Google etc.)"
+          social_media: "Social media"
+          codebar_host_or_partner: "One of Codebar's hosts or partners"
+          other: "Other"
         coach:
           about_you: What experience do you have? What languages do you like to use? Tell us a little bit about yourself!
         student:

db/migrate/20250823151717_add_how_you_found_us_options.rb

@@ -1,5 +1,6 @@
 class AddHowYouFoundUsOptions < ActiveRecord::Migration[7.0]
   def change
-    add_column :members, :how_you_found_us, :text, array: true, default: []
+    add_column :members, :how_you_found_us, :integer
+    add_column :members, :how_you_found_us_other_reason, :string
   end
 end

db/schema.rb

@@ -397,7 +397,8 @@
     t.datetime "opt_in_newsletter_at", precision: nil
     t.enum "dietary_restrictions", default: [], array: true, enum_type: "dietary_restriction_enum"
     t.string "other_dietary_restrictions"
-    t.text "how_you_found_us", default: [], array: true
+    t.integer "how_you_found_us"
+    t.string "how_you_found_us_other_reason"
     t.index ["email"], name: "index_members_on_email", unique: true
   end
 

spec/controllers/member/details_controller_spec.rb

@@ -9,76 +9,93 @@
 
   describe 'PATCH #update' do
     context 'with valid params' do
-      it 'updates how_you_found_us with checkbox options' do
+      it 'updates how_you_found_us with radio option' do
         patch :update, params: {
           id: member.id,
           member: {
-            how_you_found_us: ['Social Media', 'From a friend'],
+            how_you_found_us: 'social_media',
             newsletter: 'true'
           }
         }
 
         member.reload
-        expect(member.how_you_found_us).to contain_exactly('Social Media', 'From a friend')
+        expect(I18n.t("member.details.edit.how_you_found_us_options.#{member.how_you_found_us}")).to eq('Social media')
+        expect(member.how_you_found_us_other_reason).to eq(nil)
         expect(response).to redirect_to(step2_member_path)
       end
 
       it 'adds other_reason to how_you_found_us when provided' do
         patch :update, params: {
           id: member.id,
           member: {
-            how_you_found_us: ['Search engine (Google etc.)'],
+            how_you_found_us: 'other',
             how_you_found_us_other_reason: 'Saw a pamphlet',
             newsletter: 'false'
           },
         }
 
         member.reload
-        expect(member.how_you_found_us).to contain_exactly('Search engine (Google etc.)', 'Saw a pamphlet')
+        expect(member.how_you_found_us).to eq('other')
+        expect(member.how_you_found_us_other_reason).to eq('Saw a pamphlet')
         expect(response).to redirect_to(step2_member_path)
       end
 
       it 'updates how_you_found_us with only other_reason' do
         patch :update, params: {
           id: member.id,
           member: {
-            how_you_found_us: [],
+            how_you_found_us: 'other',
             how_you_found_us_other_reason: 'At a meetup',
             newsletter: 'true'
           },
         }
 
         member.reload
-        expect(member.how_you_found_us).to eq(['At a meetup'])
+        expect(member.how_you_found_us).to eq('other')
+        expect(member.how_you_found_us_other_reason).to eq('At a meetup')
         expect(response).to redirect_to(step2_member_path)
       end
 
       it 'removes duplicates and blank entries' do
         patch :update, params: {
           id: member.id,
           member: {
-            how_you_found_us: ['From a friend', '', 'From a friend'],
-            how_you_found_us_other_reason: 'From a friend',
+            how_you_found_us: 'other',
+            how_you_found_us_other_reason: 'From a colleague',
             newsletter: 'true'
           },
         }
 
         member.reload
-        expect(member.how_you_found_us).to eq(['From a friend'])
+        expect(member.how_you_found_us).to eq('other')
+        expect(member.how_you_found_us_other_reason).to eq('From a colleague')
         expect(response).to redirect_to(step2_member_path)
       end
     end
 
     context 'when update fails (invalid data)' do
-      it 'renders the edit template' do
+      it 'error raised when no how you found us selection given' do
         patch :update, params: {
           id: member.id,
           member: {
-            how_you_found_us: []
+            how_you_found_us: 'other',
+            how_you_found_us_other_reason: nil,
           }
         }
 
-        expect(response.body).to include('You must select at least one option')
+        expect(response.body).to include('You must select one option')
+      end
+
+      it 'error raised when both how you found us fields popoulated' do
+        patch :update, params: {
+          id: member.id,
+          member: {
+            how_you_found_us: 'from_a_friend',
+            how_you_found_us_other_reason: 'something else',
+          }
+        }
+
+        expect(response.body).to include('You must select one option')
       end
     end
   end