Validate country on FA form

lms/djangoapps/courseware/views.py

@@ -1541,6 +1541,7 @@ def financial_assistance_form(request):
         'header_text': FINANCIAL_ASSISTANCE_HEADER,
         'student_faq_url': marketing_link('FAQ'),
         'dashboard_url': reverse('dashboard'),
+        'account_settings_url': reverse('account_settings'),
         'platform_name': settings.PLATFORM_NAME,
         'user_details': {
             'email': user.email,

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

@@ -12,7 +12,17 @@
             'text!templates/student_account/form_field.underscore',
             'string_utils'
          ],
-         function(Backbone, $, _, gettext, FinancialAssistanceModel, FormView, formViewTpl, successTpl, formFieldTpl) {
+         function(
+             Backbone,
+             $,
+             _,
+             gettext,
+             FinancialAssistanceModel,
+             FormView,
+             formViewTpl,
+             successTpl,
+             formFieldTpl
+         ) {
             return FormView.extend({
                 el: '.financial-assistance-wrapper',
                 events: {
@@ -42,7 +52,8 @@
                         dashboard_url: context.dashboard_url,
                         header_text: context.header_text,
                         platform_name: context.platform_name,
-                        student_faq_url: context.student_faq_url
+                        student_faq_url: context.student_faq_url,
+                        account_settings_url: context.account_settings_url
                     };
 
                     // Make the value accessible to this View
@@ -68,6 +79,7 @@
                     this.$el.html(_.template(this.tpl, data));
 
                     this.postRender();
+                    this.validateCountry();
 
                     return this;
                 },
@@ -101,6 +113,31 @@
 
                 setExtraData: function(data) {
                     return _.extend(data, this.user_details);
+                },
+
+                validateCountry: function() {
+                    var $submissionContainer = $('.submission-error'),
+                        $errorMessageContainer = $submissionContainer.find('.message-copy'),
+                        $countryLabel = $('#user-country-title'),
+                        txt = [
+                            'Please go to your {link_start}profile page{link_end} ',
+                            'and provide your country of residence.'
+                        ],
+                        msg = window.interpolate_text(
+                            // Translators: link_start and link_end denote the html to link back to the profile page.
+                            gettext(txt.join('')),
+                            {
+                                link_start: '<a href="' + this.context.account_settings_url + '">',
+                                link_end: '</a>'
+                            }
+                        );
+
+                    if( !this.model.get('country') ){
+                        $countryLabel.addClass('error');
+                        $errorMessageContainer.append("<li>" + msg + "</li>");
+                        this.toggleDisableButton(true);
+                        $submissionContainer.removeClass('hidden');
+                    }
                 }
             });
         }

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

@@ -98,7 +98,9 @@ define([
                 completeForm,
                 validSubmission,
                 successfulSubmission,
-                failedSubmission;
+                failedSubmission,
+                invalidCountry,
+                validCountry;
 
             completeForm = function() {
                 var options = context.fields[0].options,
@@ -131,6 +133,20 @@ define([
                 expect(view.$('.submission-error')).not.toHaveClass('hidden');
             };
 
+            invalidCountry = function() {
+                expect(view.$('.js-success-message').length).toEqual(0);
+                expect(view.$('.submission-error')).not.toHaveClass('hidden');
+                expect(view.$('#user-country-title')).toHaveClass('error');
+                expect(view.$('.js-submit-form').prop('disabled')).toBeTruthy();
+            };
+
+            validCountry = function() {
+                expect(view.$('.js-success-message').length).toEqual(0);
+                expect(view.$('.submission-error')).toHaveClass('hidden');
+                expect(view.$('#user-country-title')).not.toHaveClass('error');
+                expect(view.$('.js-submit-form').prop('disabled')).toBeFalsy();
+            };
+
             beforeEach(function() {
                 setFixtures('<div class="financial-assistance-wrapper"></div>');
                 
@@ -189,6 +205,25 @@ define([
                 failedSubmission();
                 successfulSubmission();
             });
+
+            it('renders with valid country', function(){
+                validCountry();
+            });
+
+            describe('when no country', function(){
+                beforeEach(function() {
+                    context.user_details.country = '';
+
+                    view = new FinancialAssistanceFormView({
+                        el: '.financial-assistance-wrapper',
+                        context: context
+                    });
+                });
+
+                it('renders invalid country', function() {
+                    invalidCountry();
+                });
+            });
         });
     }
 );

lms/static/sass/views/_financial-assistance.scss

@@ -121,6 +121,10 @@
     .title {
       @extend %fa-copy;
       padding: 0;
+
+      &.error {
+        color: $red;
+      }
     }
 
     .data {

lms/templates/financial-assistance/apply.html

@@ -14,6 +14,7 @@ FinancialAssistanceFactory({
     header_text: ${escape_json_dumps(header_text)},
     student_faq_url: ${json.dumps(student_faq_url)},
     dashboard_url: ${json.dumps(dashboard_url)},
+    account_settings_url: ${json.dumps(account_settings_url)},
     platform_name: ${escape_json_dumps(platform_name)},
     submit_url: ${json.dumps(submit_url)}
 });

lms/templates/financial-assistance/financial_assessment_form.underscore

@@ -8,7 +8,7 @@
 
 <form class="financial-assistance-form">
 	<div class="status submission-error hidden" aria-live="polite">
-	    <h4 class="message-title"><%- gettext('Application not submitted') %></h4>
+	    <h4 class="message-title"><%- gettext('Unable to submit application') %></h4>
 	    <ul class="message-copy"></ul>
 	</div>
 
@@ -31,7 +31,7 @@
 			<div class="data"><%- name %></div>
 		</div>
 		<div class="info-column">
-			<div class="title"><%- gettext('Country of residence') %></div>
+			<div id="user-country-title" class="title"><%- gettext('Country of residence') %></div>
 			<div class="data"><%- country %></div>
 		</div>
 	</div>