Financial Assistance Form Updates

ECOM-4544

lms/djangoapps/courseware/views/views.py

@@ -1298,6 +1298,10 @@ def financial_assistance_form(request):
             mode_slug=CourseMode.VERIFIED
         ).exists()
     ]
+    incomes = ['Less than $5,000', '$5,000 - $10,000', '$10,000 - $15,000', '$15,000 - $20,000', '$20,000 - $25,000']
+    annual_incomes = [
+        {'name': _(income), 'value': income} for income in incomes  # pylint: disable=translation-of-non-string
+    ]
     return render_to_response('financial-assistance/apply.html', {
         'header_text': FINANCIAL_ASSISTANCE_HEADER,
         'student_faq_url': marketing_link('FAQ'),
@@ -1328,12 +1332,12 @@ def financial_assistance_form(request):
             },
             {
                 'name': 'income',
-                'type': 'text',
+                'type': 'select',
                 'label': FA_INCOME_LABEL,
-                'placeholder': _('income in US Dollars ($)'),
+                'placeholder': '',
                 'defaultValue': '',
                 'required': True,
-                'restrictions': {},
+                'options': annual_incomes,
                 'instructions': _('Specify your annual household income in US Dollars.')
             },
             {

lms/static/js/financial-assistance/views/financial_assistance_form_view.js

@@ -38,14 +38,10 @@
                     var context = data.context,
                         fields = context.fields;
 
-                    // Add default option to array
-                    if ( fields[0].options.length > 1 ) {
-                        fields[0].options.unshift({
-                            name: '- ' + gettext('Choose one') + ' -',
-                            value: '',
-                            default: true
-                        });
-                    }
+                    // Add default option to course array
+                    this.addDefaultOption(fields, 0);
+                    // Add default option to household income array
+                    this.addDefaultOption(fields, 1);
 
                     // Set non-form data needed to render the View
                     this.context = {
@@ -138,6 +134,16 @@
                         this.toggleDisableButton(true);
                         $submissionContainer.removeClass('hidden');
                     }
+                },
+
+                addDefaultOption: function(array, index) {
+                    if ( array[index].options.length > 1 ) {
+                        array[index].options.unshift({
+                            name: '- ' + gettext('Choose one') + ' -',
+                            value: '',
+                            default: true
+                        });
+                    }
                 }
             });
         }

lms/static/js/spec/financial-assistance/financial_assistance_form_view_spec.js

@@ -32,13 +32,19 @@ define([
                             instructions: 'Specify your annual income in USD.',
                             label: 'Annual Income',
                             name: 'income',
-                            placeholder: 'income in USD ($)',
+                            options: [
+                                {'name': 'Less than $5,000', 'value': 'Less than $5,000'},
+                                {'name': '$5,000 - $10,000', 'value': '$5,000 - $10,000'},
+                                {'name': '$10,000 - $15,000', 'value': '$10,000 - $15,000'},
+                                {'name': '$15,000 - $20,000', 'value': '$15,000 - $20,000'},
+                                {'name': '$20,000 - $25,000', 'value': '$20,000 - $25,000'}
+                            ],
+                            placeholder: '',
                             required: true,
-                            restrictions: {},
-                            type: 'text'
+                            type: 'select'
                         }, {
                             defaultValue: '',
-                            instructions: 'Use between 250 and 500 words or so in your response.',
+                            instructions: 'Your response should contain approximately 250 - 500 words.',
                             label: 'Tell us about your current financial situation, including any unusual circumstances.',
                             name: 'reason_for_applying',
                             placeholder: '',
@@ -103,11 +109,13 @@ define([
                 validCountry;
 
             completeForm = function() {
-                var options = context.fields[0].options,
-                    selectValue = options[options.length - 1].value;
+                var courseOptions = context.fields[0].options,
+                    courseSelectValue = courseOptions[courseOptions.length - 1].value;
+                var incomeOptions = context.fields[1].options,
+                    incomeSelectValue = incomeOptions[incomeOptions.length - 1].value;
 
-                view.$('#financial-assistance-course').val(selectValue);
-                view.$('#financial-assistance-income').val(1312);
+                view.$('#financial-assistance-course').val(courseSelectValue);
+                view.$('#financial-assistance-income').val(incomeSelectValue);
                 view.$('textarea').html(Array(802).join("w"));
             };
 
@@ -170,8 +178,8 @@ define([
             it('should load the form based on passed in context', function() {
                 var $form = view.$('.financial-assistance-form');
 
-                expect($form.find('select').attr('name')).toEqual(context.fields[0].name);
-                expect($form.find('input[type=text]').first().attr('name')).toEqual(context.fields[1].name);
+                expect($form.find('select').first().attr('name')).toEqual(context.fields[0].name);
+                expect($form.find('select').last().attr('name')).toEqual(context.fields[1].name);
                 expect($form.find('textarea').first().attr('name')).toEqual(context.fields[2].name);
                 expect($form.find('input[type=checkbox]').attr('name')).toEqual(context.fields[5].name);
             });