Merge pull request #1084 from CruGlobal/2471-loading-payment-error

[EP-2471] Customize payment method loading error
CruGlobal · Dec 20, 2023 · 73af65d · 73af65d
2 parents d7bba09 + 1e80bbb
commit 73af65d
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 3 deletions.
diff --git a/src/app/profile/payment-methods/payment-methods.component.js b/src/app/profile/payment-methods/payment-methods.component.js
@@ -79,7 +79,11 @@ class PaymentMethodsController {
         },
         error => {
           this.loading = false
-          this.loadingError = true
+          if (error.status === 500) {
+            this.loadingError = 'authentication'
+          } else {
+            this.loadingError = true
+          }
           this.$log.error('Error loading payment methods', error)
         }
       )

diff --git a/src/app/profile/payment-methods/payment-methods.component.spec.js b/src/app/profile/payment-methods/payment-methods.component.spec.js
@@ -99,6 +99,15 @@ describe('PaymentMethodsComponent', function () {
       expect($ctrl.profileService.getPaymentMethodsWithDonations).toHaveBeenCalled()
       expect($ctrl.$log.error.logs[0]).toEqual(['Error loading payment methods', { data: 'some error' }])
     })
+
+    it('should handle 500 errors differently when loading payment methods', () => {
+      jest.spyOn($ctrl.profileService, 'getPaymentMethodsWithDonations').mockReturnValue(Observable.throw({
+        status: 500
+      }))
+      $ctrl.loadPaymentMethods()
+
+      expect($ctrl.loadingError).toEqual('authentication')
+    })
   })
 
   describe('loadDonorDetails()', () => {

diff --git a/src/app/profile/payment-methods/payment-methods.tpl.html b/src/app/profile/payment-methods/payment-methods.tpl.html
@@ -22,8 +22,11 @@ <h3 translate>Your Payment Methods</h3>
             <loading ng-if="$ctrl.loading" class="mb">
               <translate>Loading payment methods...</translate>
             </loading>
-            <div class="alert alert-danger" role="alert" ng-if="$ctrl.loadingError" translate>
-              There was an error loading your payment methods. You may <a href="" ng-click="$ctrl.loadPaymentMethods()">try again</a>.
+            <div class="alert alert-danger" role="alert" ng-if="$ctrl.loadingError === true">
+              <span translate>There was an error loading your payment methods. You may</span> <a href="" ng-click="$ctrl.loadPaymentMethods()" translate>try again</a>.
+            </div>
+            <div class="alert alert-danger" role="alert" ng-if="$ctrl.loadingError === 'authentication'" translate>
+              There was an error loading your payment methods. Please log out and log in again.
             </div>
             <div class="alert alert-warning" role="alert" ng-if="!$ctrl.loading && !$ctrl.loadingError && $ctrl.paymentMethods.length === 0" translate>
               You haven't added any payment methods. Feel free to add one.