Updates hideCvv flag for edit payment methods and new payment methods.

src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js

@@ -6,34 +6,38 @@ import paymentMethodDisplay from 'common/components/paymentMethods/paymentMethod
 import paymentMethodFormModal from 'common/components/paymentMethods/paymentMethodForm/paymentMethodForm.modal.component'
 import coverFees from 'common/components/paymentMethods/coverFees/coverFees.component'
 
+import * as cruPayments from '@cruglobal/cru-payments/dist/cru-payments'
 import orderService from 'common/services/api/order.service'
 import cartService from 'common/services/api/cart.service'
 import { validPaymentMethod } from 'common/services/paymentHelpers/validPaymentMethods'
 import giveModalWindowTemplate from 'common/templates/giveModalWindow.tpl.html'
 import { SignInEvent } from 'common/services/session/session.service'
-
+import creditCardCvv from '../../../../common/directives/creditCardCvv.directive'
 import template from './existingPaymentMethods.tpl.html'
 
 const componentName = 'checkoutExistingPaymentMethods'
 
 class ExistingPaymentMethodsController {
   /* @ngInject */
-  constructor ($log, $scope, orderService, cartService, $uibModal) {
+  constructor ($log, $scope, orderService, cartService, $uibModal, $window) {
     this.$log = $log
     this.$scope = $scope
     this.orderService = orderService
     this.cartService = cartService
     this.$uibModal = $uibModal
     this.paymentFormResolve = {}
     this.validPaymentMethod = validPaymentMethod
+    this.sessionStorage = $window.sessionStorage
 
     this.$scope.$on(SignInEvent, () => {
       this.$onInit()
     })
   }
 
   $onInit () {
+    this.enableContinue({ $event: false })
     this.loadPaymentMethods()
+    this.waitForFormInitialization()
   }
 
   $onChanges (changes) {
@@ -52,6 +56,23 @@ class ExistingPaymentMethodsController {
     }
   }
 
+  waitForFormInitialization () {
+    const unregister = this.$scope.$watch('$ctrl.creditCardPaymentForm.securityCode', () => {
+      if (this.creditCardPaymentForm && this.creditCardPaymentForm.securityCode) {
+        unregister()
+        this.addCvvValidators()
+      }
+    })
+  }
+
+  addCvvValidators () {
+    this.$scope.$watch('$ctrl.creditCardPaymentForm.securityCode.$viewValue', (number) => {
+      this.creditCardPaymentForm.securityCode.$validators.minLength = cruPayments.creditCard.cvv.validate.minLength
+      this.creditCardPaymentForm.securityCode.$validators.maxLength = cruPayments.creditCard.cvv.validate.maxLength
+      this.enableContinue({ $event: cruPayments.creditCard.cvv.validate.minLength(number) && cruPayments.creditCard.cvv.validate.maxLength(number) })
+    })
+  }
+
   loadPaymentMethods () {
     this.orderService.getExistingPaymentMethods()
       .subscribe((data) => {
@@ -80,6 +101,7 @@ class ExistingPaymentMethodsController {
       // Select the first payment method
       this.selectedPaymentMethod = paymentMethods[0]
     }
+
     this.switchPayment()
   }
 
@@ -130,6 +152,22 @@ class ExistingPaymentMethodsController {
 
   switchPayment () {
     this.onPaymentChange({ selectedPaymentMethod: this.selectedPaymentMethod })
+    if (this.selectedPaymentMethod?.['card-type'] && this.creditCardPaymentForm?.securityCode) {
+      const selectedUri = this.selectedPaymentMethod.self.uri
+      const storage = JSON.parse(this.sessionStorage.getItem('storedCvvs'))
+      const getSelectedCvv = storage ? storage[Object.keys(storage).filter((item) => item === selectedUri)] : false
+
+      if (getSelectedCvv) {
+        // Set CVV to new credit card CVV
+        this.creditCardPaymentForm.securityCode.$setViewValue(getSelectedCvv)
+      } else {
+        // Clear CVV when switching between payment credit card payment methods
+        this.creditCardPaymentForm.securityCode.$setViewValue('')
+      }
+
+      this.creditCardPaymentForm.securityCode.$render()
+    }
+
     if (this.selectedPaymentMethod?.['bank-name']) {
       // This is an EFT payment method so we need to remove any fee coverage
       this.orderService.storeCoverFeeDecision(false)
@@ -144,7 +182,8 @@ export default angular
     paymentMethodFormModal.name,
     coverFees.name,
     orderService.name,
-    cartService.name
+    cartService.name,
+    creditCardCvv.name
   ])
   .component(componentName, {
     controller: ExistingPaymentMethodsController,
@@ -159,6 +198,7 @@ export default angular
       brandedCheckoutItem: '<',
       onPaymentFormStateChange: '&',
       onPaymentChange: '&',
-      onLoad: '&'
+      onLoad: '&',
+      enableContinue: '&'
     }
   })

src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.spec.js

@@ -4,6 +4,7 @@ import { Observable } from 'rxjs/Observable'
 import 'rxjs/add/observable/of'
 import 'rxjs/add/observable/throw'
 import 'rxjs/add/operator/toPromise'
+import * as cruPayments from '@cruglobal/cru-payments/dist/cru-payments'
 
 import { SignInEvent } from 'common/services/session/session.service'
 
@@ -15,24 +16,39 @@ describe('checkout', () => {
       beforeEach(angular.mock.module(module.name))
       const self = {}
 
-      beforeEach(inject(($componentController, $timeout) => {
+      beforeEach(inject(($componentController, $timeout, $window) => {
         self.$timeout = $timeout
 
         self.controller = $componentController(module.name, {}, {
           onLoad: jest.fn(),
           onPaymentChange: jest.fn(),
+          enableContinue: jest.fn(),
           onPaymentFormStateChange: jest.fn(),
-          cartData: { items: [] }
+          cartData: { items: [] },
+          creditCardPaymentForm: {
+            securityCode: {
+              $valid: true,
+              $validators: {
+                minLength: (value) => cruPayments.creditCard.cvv.validate.minLength(value),
+                maxLength: cruPayments.creditCard.cvv.validate.maxLength
+              },
+              $setViewValue: jest.fn(),
+              $render: jest.fn(),
+            }
+          }
         })
+        self.$window = $window
+        self.$window.sessionStorage.clear()
       }))
 
-
       describe('$onInit', () => {
         it('should call loadPaymentMethods', () => {
           jest.spyOn(self.controller, 'loadPaymentMethods').mockImplementation(() => {})
+          jest.spyOn(self.controller, 'waitForFormInitialization').mockImplementation(() => {})
           self.controller.$onInit()
 
           expect(self.controller.loadPaymentMethods).toHaveBeenCalled()
+          expect(self.controller.waitForFormInitialization).toHaveBeenCalled()
         })
 
         it('should be called on sign in', () => {
@@ -329,6 +345,79 @@ describe('checkout', () => {
           expect(self.controller.onPaymentChange).toHaveBeenCalledWith({ selectedPaymentMethod: undefined })
           expect(self.controller.orderService.storeCoverFeeDecision).not.toHaveBeenCalled()
         })
+
+        it('should reset securityCode viewValue', () => {
+          self.controller.creditCardPaymentForm.securityCode.$viewValue = '123'
+          self.controller.selectedPaymentMethod = { 'card-type': 'Visa', self: { type: 'cru.creditcards.named-credit-card', uri: 'selected uri' }, selectAction: 'some uri' }
+          self.controller.switchPayment()
+
+          expect(self.controller.creditCardPaymentForm.securityCode.$setViewValue).toHaveBeenCalledWith('')
+          expect(self.controller.creditCardPaymentForm.securityCode.$render).toHaveBeenCalled()
+        })
+
+        it('should add securityCode viewValue from sessionStorage', () => {
+          self.controller.creditCardPaymentForm.securityCode.$viewValue = '123'
+          self.controller.selectedPaymentMethod = { 'card-type': 'Visa', self: { type: 'cru.creditcards.named-credit-card', uri: '/paymentmethods/crugive/giydsnjqgi=' }, selectAction: 'some uri' }
+          self.$window.sessionStorage.setItem('storedCvvs', '{"/paymentmethods/crugive/giydsnjqgi=":"456","/paymentmethods/crugive/giydsnjqgy=":"321"}')
+          self.controller.switchPayment()
+
+          expect(self.controller.creditCardPaymentForm.securityCode.$setViewValue).toHaveBeenCalledWith('456')
+          expect(self.controller.creditCardPaymentForm.securityCode.$render).toHaveBeenCalled()
+        })
+      })
+
+      describe('addCvvValidators', () => {
+        it('should add validator functions to creditCardPaymentForm.securityCode', () => {
+          jest.spyOn(self.controller, 'addCvvValidators').mockImplementation(() => {
+            self.controller.creditCardPaymentForm.securityCode.$validators = {
+              minLength: cruPayments.creditCard.cvv.validate.minLength,
+              maxLength: cruPayments.creditCard.cvv.validate.maxLength
+            }
+          })
+          delete  self.controller.creditCardPaymentForm
+          self.controller.waitForFormInitialization()
+          self.controller.$scope.$digest()
+
+          expect(self.controller.addCvvValidators).not.toHaveBeenCalled()
+          self.controller.creditCardPaymentForm = {
+            $valid: true,
+            $dirty: false,
+            securityCode: {
+              $viewValue: '123',
+            }
+          }
+          self.controller.$scope.$digest()
+
+          expect(self.controller.addCvvValidators).toHaveBeenCalled()
+          expect(Object.keys(self.controller.creditCardPaymentForm.securityCode.$validators).length).toEqual(2)
+          expect(typeof self.controller.creditCardPaymentForm.securityCode.$validators.minLength).toBe('function')
+          expect(typeof self.controller.creditCardPaymentForm.securityCode.$validators.maxLength).toBe('function')
+
+        })
+
+        it('should call enableContinue when cvv is valid', () => {
+          self.controller.creditCardPaymentForm.securityCode.$viewValue = '123'
+          self.controller.addCvvValidators()
+          self.controller.$scope.$apply()
+
+          expect(self.controller.enableContinue).toHaveBeenCalledWith({ $event: true })
+        })
+
+        it('should call enableContinue when cvv is too long', () => {
+          self.controller.creditCardPaymentForm.securityCode.$viewValue = '12345'
+          self.controller.addCvvValidators()
+          self.controller.$scope.$apply()
+
+          expect(self.controller.enableContinue).toHaveBeenCalledWith({ $event: false })
+        })
+
+        it('should call enableContinue when cvv is too short', () => {
+          self.controller.creditCardPaymentForm.securityCode.$viewValue = '1'
+          self.controller.addCvvValidators()
+          self.controller.$scope.$apply()
+
+          expect(self.controller.enableContinue).toHaveBeenCalledWith({ $event: false })
+        })
       })
     })
   })

src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.tpl.html

@@ -11,7 +11,14 @@
         <button class="btn btn-xs btn-link" ng-click="$ctrl.openPaymentMethodFormModal(paymentMethod)" ng-if="paymentMethod['card-type']" translate>edit</button>
       </label>
     </div>
-
+    <div ng-if="$ctrl.selectedPaymentMethod['card-type']" class="row">
+      <div class="col-sm-4">
+        <form novalidate name="$ctrl.creditCardPaymentForm">
+          <credit-card-cvv ></credit-card-cvv>
+        </form>
+      </div>
+    </div>
+
     <div class="panel panel-default tab-toggle mb0 mt"
          ng-if="(($ctrl.cartData && $ctrl.cartData.items) || $ctrl.brandedCheckoutItem) && $ctrl.selectedPaymentMethod && $ctrl.selectedPaymentMethod['card-type']">
       <div class="panel-title panel-heading" translate>{{'OPTIONAL'}}</div>

src/app/checkout/step-2/step-2.component.js

@@ -116,7 +116,10 @@ class Step2Controller {
     }
   }
 
-  getContinueDisabled () {
+  isContinueDisabled () {
+    if (this.selectedPaymentMethod?.['card-type'] && typeof this.isCvvValid !== 'undefined' && !this.isCvvValid) {
+      return true
+    }
     if (this.loadingPaymentMethods) {
       return true
     }
@@ -129,6 +132,10 @@ class Step2Controller {
     }
     return false
   }
+
+  enableContinue (isCvvValid) {
+    this.isCvvValid = isCvvValid
+  }
 }
 
 export default angular