Merge pull request #1067 from CruGlobal/better-error-for-bad-amount

Better error for bad amount
CruGlobal · Oct 27, 2023 · 3f7effe · 3f7effe
2 parents 9bb3850 + ebeac25
commit 3f7effe
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 6 deletions.
diff --git a/src/app/productConfig/productConfigForm/productConfigForm.component.js b/src/app/productConfig/productConfigForm/productConfigForm.component.js
@@ -306,6 +306,7 @@ class ProductConfigFormController {
     this.submittingGift = false
     this.errorAlreadyInCart = false
     this.errorSavingGeneric = false
+    this.amountFormatError = ''
     if (!this.itemConfigForm.$valid) {
       return
     }
@@ -339,6 +340,12 @@ class ProductConfigFormController {
       if (includes(error.data, 'already in the cart')) {
         this.errorAlreadyInCart = true
         this.onStateChange({ state: 'errorAlreadyInCart' })
+      } else if (error.data && error.data.messages && error.data.messages[0] && error.data.messages[0].id === 'field.invalid.decimal.format') {
+        this.amountFormatError = error.data.messages[0]['debug-message']
+        this.onStateChange({ state: 'errorSubmitting' })
+      } else if (includes(error.data, 'decimal number')) {
+        this.amountFormatError = error.data
+        this.onStateChange({ state: 'errorSubmitting' })
       } else {
         this.errorSavingGeneric = true
         this.$log.error('Error adding or updating item in cart', error)

diff --git a/src/app/productConfig/productConfigForm/productConfigForm.component.spec.js b/src/app/productConfig/productConfigForm/productConfigForm.component.spec.js
@@ -692,6 +692,41 @@ describe('product config form component', function () {
         expect($ctrl.errorSavingGeneric).toEqual(false)
       })
 
+      it('should handle an error when saving a bad decimal amount - old error style', () => {
+        const error = { data: 'Amount must be a valid decimal number without dollar signs or commas.' }
+        $ctrl.cartService[operation].mockReturnValue(Observable.throw(error))
+        $ctrl.itemConfigForm.$dirty = true
+        $ctrl.saveGiftToCart()
+
+        expect($ctrl.submittingGift).toEqual(false)
+        expect($ctrl.cartService[operation]).toHaveBeenCalledWith(...operationArgs)
+        expect($ctrl.onStateChange).toHaveBeenCalledWith({ state: 'errorSubmitting' })
+        expect($ctrl.errorAlreadyInCart).toEqual(false)
+        expect($ctrl.errorSavingGeneric).toEqual(false)
+        expect($ctrl.amountFormatError).toEqual = error.data
+      })
+
+      it('should handle an error when saving a bad decimal amount - new error style', () => {
+        const error = {
+          data: {
+            messages: [{
+              id: 'field.invalid.decimal.format',
+              'debug-message': 'Amount must be a valid decimal number without dollar signs or commas.'
+            }]
+          }
+        }
+        $ctrl.cartService[operation].mockReturnValue(Observable.throw(error))
+        $ctrl.itemConfigForm.$dirty = true
+        $ctrl.saveGiftToCart()
+
+        expect($ctrl.submittingGift).toEqual(false)
+        expect($ctrl.cartService[operation]).toHaveBeenCalledWith(...operationArgs)
+        expect($ctrl.onStateChange).toHaveBeenCalledWith({ state: 'errorSubmitting' })
+        expect($ctrl.errorAlreadyInCart).toEqual(false)
+        expect($ctrl.errorSavingGeneric).toEqual(false)
+        expect($ctrl.amountFormatError).toEqual = error.data.messages[0]['debug-message']
+      })
+
       it('should clear the cover fee decision when editing the amount of an item in the cart', () => {
         if (isEdit) {
           jest.spyOn($ctrl.orderService, 'clearCoverFees')

diff --git a/src/app/productConfig/productConfigForm/productConfigForm.tpl.html b/src/app/productConfig/productConfigForm/productConfigForm.tpl.html
@@ -57,6 +57,10 @@ <h4 class="panel-title border-bottom-small" translate>
           <p translate>{{'ADDING_CART_ERROR'}}</p>
         </div>
 
+        <div ng-if="$ctrl.amountFormatError" role="alert" class="alert alert-danger">
+          <p translate>{{$ctrl.amountFormatError}}</p>
+        </div>
+
         <div ng-if="$ctrl.errorAlreadyInCart" class="alert alert-warning" role="alert">
           <p translate>{{'GIFT_IN_CART_ERROR'}}</p>
         </div>
@@ -76,7 +80,7 @@ <h4 class="panel-title border-bottom-small" translate>
                 {{$ctrl.suggestedAmount(suggested.amount)}} {{suggested.label}}
               </label>
             </div>
-            <div class="radio radio-custom-amount form-inline" ng-class="{'has-error': ($ctrl.itemConfigForm.AMOUNT | showErrors)}">
+            <div class="radio radio-custom-amount form-inline" ng-class="{'has-error': ($ctrl.itemConfigForm.amount | showErrors)}">
               <div class="form-group">
                 <label>
                   <input name="suggestedAmount"
@@ -93,8 +97,8 @@ <h4 class="panel-title border-bottom-small" translate>
                          ng-required="$ctrl.customInputActive"
                          placeholder="{{'OTHER_PLACEHOLDER' | translate}}" />
                 </label>
-                <div role="alert" ng-messages="$ctrl.itemConfigForm.AMOUNT.$error"
-                     ng-if="($ctrl.itemConfigForm.AMOUNT | showErrors)">
+                <div role="alert" ng-messages="$ctrl.itemConfigForm.amount.$error"
+                     ng-if="($ctrl.itemConfigForm.amount | showErrors)">
                   <div class="help-block" ng-message="pattern" translate>{{'VALID_DOLLAR_AMOUNT_ERROR'}}</div>
                   <div class="help-block" ng-message="required" translate>{{'AMOUNT_EMPTY_ERROR'}}</div>
                   <div class="help-block" ng-message="minimum" translate translate-values="{currencyLimit: (1 | currency)}">{{'AMOUNT_MIN_ERROR'}}</div>
@@ -107,7 +111,7 @@ <h4 class="panel-title border-bottom-small" translate>
           </div>
 
           <div data-toggle="buttons"
-               ng-class="{'has-error': ($ctrl.itemConfigForm.AMOUNT | showErrors)}"
+               ng-class="{'has-error': ($ctrl.itemConfigForm.amount | showErrors)}"
                ng-if="!$ctrl.useSuggestedAmounts">
             <label class="btn btn-radio"
                    ng-click="$ctrl.changeAmount(a)"
@@ -133,8 +137,8 @@ <h4 class="panel-title border-bottom-small" translate>
                        required />
               </div>
             </label>
-            <div role="alert" ng-messages="$ctrl.itemConfigForm.AMOUNT.$error"
-                 ng-if="($ctrl.itemConfigForm.AMOUNT | showErrors)">
+            <div role="alert" ng-messages="$ctrl.itemConfigForm.amount.$error"
+                 ng-if="($ctrl.itemConfigForm.amount | showErrors)">
               <div class="help-block" ng-message="pattern" translate>{{'VALID_DOLLAR_AMOUNT_ERROR'}}</div>
               <div class="help-block" ng-message="required" translate>{{'AMOUNT_EMPTY_ERROR'}}</div>
               <div class="help-block" ng-message="minimum" translate="AMOUNT_MIN_ERROR" translate-values="{currencyLimit: (1 | currency)}"></div>