From 6353bb2e8ecfc081164e3d403e28c58fac310e76 Mon Sep 17 00:00:00 2001
From: Chris Pappas <christopappas@users.noreply.github.com>
Date: Fri, 16 Feb 2024 13:12:40 -0500
Subject: [PATCH] feat: make FA form error messaging more descript (#34247)

* feat: make FA form error messaging more descript

* chore: quality

* fix: split up tests

* fix: make test more specific

* chore: fix comment typo

* chore: fix comment typo
---
 .../views/financial_assistance_form_view.js       | 15 ++++++++++++++-
 .../financial_assistance_form_view_spec.js        | 13 +++++++++----
 2 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/lms/static/js/financial-assistance/views/financial_assistance_form_view.js b/lms/static/js/financial-assistance/views/financial_assistance_form_view.js
index 3ff0b2b9ff2f..63dfed8aee6c 100644
--- a/lms/static/js/financial-assistance/views/financial_assistance_form_view.js
+++ b/lms/static/js/financial-assistance/views/financial_assistance_form_view.js
@@ -28,7 +28,8 @@
         return FormView.extend({
             el: '.financial-assistance-wrapper',
             events: {
-                'click .js-submit-form': 'submitForm'
+                'click .js-submit-form': 'submitForm',
+                'ajaxError': 'handleAjaxError'
             },
             tpl: formViewTpl,
             fieldTpl: formFieldTpl,
@@ -101,6 +102,12 @@
 
                 if (error.status === 0) {
                     msg = gettext('An error has occurred. Check your Internet connection and try again.');
+                } else if (error.status === 403) {
+                    txt = [
+                        'You must confirm your email to complete registration before applying for financial assistance.',
+                        'If you continue to have issues please contact support.'
+                    ],
+                    msg = gettext(txt.join(' '));
                 }
 
                 this.errors = [HtmlUtils.joinHtml(
@@ -155,6 +162,12 @@
                         });
                     }
                 }
+            },
+
+            // this.model.save() makes an ajax call, which, when it errors,
+            // should have an error message displayed on the banner on the page
+            handleAjaxError: function (event, request, settings, thrownError) {
+                this.saveError(request);
             }
         });
     }
diff --git a/lms/static/js/spec/financial-assistance/financial_assistance_form_view_spec.js b/lms/static/js/spec/financial-assistance/financial_assistance_form_view_spec.js
index 738dd272ef80..a65a7ab8de11 100644
--- a/lms/static/js/spec/financial-assistance/financial_assistance_form_view_spec.js
+++ b/lms/static/js/spec/financial-assistance/financial_assistance_form_view_spec.js
@@ -98,11 +98,11 @@ define([
             expect(view.$('.js-success-message').length).toEqual(1);
         };
 
-        failedSubmission = function() {
+        failedSubmission = function(statusCode) {
             expect(view.$('.js-success-message').length).toEqual(0);
             expect(view.$formFeedback.find('.' + view.formErrorsJsHook).length).toEqual(0);
             validSubmission();
-            view.model.trigger('error', {status: 500});
+            view.model.trigger('error', {status: statusCode});
             expect(view.$('.js-success-message').length).toEqual(0);
             expect(view.$formFeedback.find('.' + view.formErrorsJsHook).length).toEqual(1);
         };
@@ -166,7 +166,12 @@ define([
         });
 
         it('should submit the form and show an error message if content is valid and API returns error', function() {
-            failedSubmission();
+            failedSubmission(500);
+        });
+
+        it('should submit the form and show an error message if content is valid and API returns 403 error', function() {
+            failedSubmission(403);
+            expect(view.$('.message-copy').text()).toContain('You must confirm your email');
         });
 
         it('should allow form resubmission after a front end validation failure', function() {
@@ -176,7 +181,7 @@ define([
         });
 
         it('should allow form resubmission after an API error is returned', function() {
-            failedSubmission();
+            failedSubmission(500);
             successfulSubmission();
         });