From 1ece775c46016ba1fb6ad86ea740f89b6ab0db87 Mon Sep 17 00:00:00 2001 From: wjames111 Date: Mon, 28 Oct 2024 13:11:05 -0400 Subject: [PATCH 01/40] Updates hideCvv flag for edit payment methods and new payment methods. --- .../payment-methods/payment-method/payment-method.component.js | 2 +- src/app/profile/payment-methods/payment-methods.component.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/profile/payment-methods/payment-method/payment-method.component.js b/src/app/profile/payment-methods/payment-method/payment-method.component.js index 5eba5b34a..e54941de7 100644 --- a/src/app/profile/payment-methods/payment-method/payment-method.component.js +++ b/src/app/profile/payment-methods/payment-method/payment-method.component.js @@ -47,7 +47,7 @@ class PaymentMethodController { resolve: { paymentForm: this.paymentFormResolve, paymentMethod: this.model, - hideCvv: true, + hideCvv: false, mailingAddress: this.mailingAddress, onPaymentFormStateChange: () => params => this.onPaymentFormStateChange(params.$event) } diff --git a/src/app/profile/payment-methods/payment-methods.component.js b/src/app/profile/payment-methods/payment-methods.component.js index 193a40ce8..dd5e2542f 100644 --- a/src/app/profile/payment-methods/payment-methods.component.js +++ b/src/app/profile/payment-methods/payment-methods.component.js @@ -96,7 +96,7 @@ class PaymentMethodsController { windowTemplateUrl: giveModalWindowTemplate, resolve: { paymentForm: this.paymentFormResolve, - hideCvv: true, + hideCvv: false, mailingAddress: this.mailingAddress, onPaymentFormStateChange: () => param => this.onPaymentFormStateChange(param.$event) } From 1a9956621fb14191a5d82f9b5e93cd7b83d43bb2 Mon Sep 17 00:00:00 2001 From: wjames111 Date: Tue, 5 Nov 2024 14:48:42 -0500 Subject: [PATCH 02/40] Adds custom directive for CVV validation. --- .../existingPaymentMethods.component.js | 4 ++- .../existingPaymentMethods.tpl.html | 18 +++++++++++ .../directives/creditCardCvv.directive.js | 30 +++++++++++++++++++ 3 files changed, 51 insertions(+), 1 deletion(-) create mode 100644 src/common/directives/creditCardCvv.directive.js diff --git a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js index ce59dea7a..fc75fc006 100644 --- a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js +++ b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js @@ -11,6 +11,7 @@ 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' @@ -144,7 +145,8 @@ export default angular paymentMethodFormModal.name, coverFees.name, orderService.name, - cartService.name + cartService.name, + creditCardCvv.name ]) .component(componentName, { controller: ExistingPaymentMethodsController, diff --git a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.tpl.html b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.tpl.html index 54080a339..bd0593e2e 100644 --- a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.tpl.html +++ b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.tpl.html @@ -12,6 +12,24 @@ +
+
+ + +
+ CVV is required. +
+
+ +
+
{{'OPTIONAL'}}
diff --git a/src/common/directives/creditCardCvv.directive.js b/src/common/directives/creditCardCvv.directive.js new file mode 100644 index 000000000..141bd10c3 --- /dev/null +++ b/src/common/directives/creditCardCvv.directive.js @@ -0,0 +1,30 @@ +import angular from 'angular' +import * as cruPayments from '@cruglobal/cru-payments/dist/cru-payments' + +const directiveName = 'creditCardCvv' + +const creditCardCvv = /* @ngInject */ function () { + const directiveDefinitionObject = { + restrict: 'A', + require: ['^ngModel', '^form'], + link: function (scope, element, attributes, controllers) { + const ngModel = controllers[0] + const formController = controllers[1] + const valueModel = formController[attributes.creditCardCvv] + + scope.$watch(() => valueModel.$viewValue, function () { + ngModel.$validate() + }) + + ngModel.$validators.creditCardCvv = function (modelValue) { + console.log(modelValue) + return (cruPayments.creditCard.cvv.validate.minLength(modelValue)) && (cruPayments.creditCard.cvv.validate.maxLength(modelValue)) + } + } + } + return directiveDefinitionObject +} + +export default angular + .module(directiveName, []) + .directive(directiveName, creditCardCvv) From 75721b222a866700e9af2f2ab4e18522b846904e Mon Sep 17 00:00:00 2001 From: wjames111 Date: Fri, 8 Nov 2024 11:38:02 -0500 Subject: [PATCH 03/40] Pass function for disabling continue button when cvv is invalid. --- .../existingPaymentMethods.component.js | 8 +++++++- .../existingPaymentMethods.tpl.html | 4 +++- src/app/checkout/step-2/step-2.component.js | 11 ++++++++++- src/app/checkout/step-2/step-2.tpl.html | 4 +++- src/common/directives/creditCardCvv.directive.js | 1 - 5 files changed, 23 insertions(+), 5 deletions(-) diff --git a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js index fc75fc006..e641a87d4 100644 --- a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js +++ b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js @@ -28,13 +28,18 @@ class ExistingPaymentMethodsController { this.paymentFormResolve = {} this.validPaymentMethod = validPaymentMethod + + this.$scope.$on(SignInEvent, () => { this.$onInit() }) } + $onInit () { + console.log(this.hidePaymentTypeOptions) this.loadPaymentMethods() + this.disableContinue(false) } $onChanges (changes) { @@ -161,6 +166,7 @@ export default angular brandedCheckoutItem: '<', onPaymentFormStateChange: '&', onPaymentChange: '&', - onLoad: '&' + onLoad: '&', + disableContinue: '&', } }) diff --git a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.tpl.html b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.tpl.html index bd0593e2e..a677a283f 100644 --- a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.tpl.html +++ b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.tpl.html @@ -29,7 +29,9 @@
- + + +
{{'OPTIONAL'}}
diff --git a/src/app/checkout/step-2/step-2.component.js b/src/app/checkout/step-2/step-2.component.js index d1f384c3a..c17835a33 100644 --- a/src/app/checkout/step-2/step-2.component.js +++ b/src/app/checkout/step-2/step-2.component.js @@ -117,6 +117,9 @@ class Step2Controller { } getContinueDisabled () { + if (this.invalidCvv) { + return true + } if (this.loadingPaymentMethods) { return true } @@ -129,8 +132,14 @@ class Step2Controller { } return false } + + test(isCvvValid) { + console.log('isCvvValid', isCvvValid) + this.invalidCvv = true + } } + export default angular .module(componentName, [ paymentMethodForm.name, @@ -151,6 +160,6 @@ export default angular cartData: '<', brandedCheckoutItem: '<', changeStep: '&', - onStateChange: '&' + onStateChange: '&', } }) diff --git a/src/app/checkout/step-2/step-2.tpl.html b/src/app/checkout/step-2/step-2.tpl.html index 7a3edb704..fc5ada7fd 100644 --- a/src/app/checkout/step-2/step-2.tpl.html +++ b/src/app/checkout/step-2/step-2.tpl.html @@ -31,7 +31,9 @@ default-payment-type="$ctrl.defaultPaymentType" hide-payment-type-options="$ctrl.hidePaymentTypeOptions" cart-data="$ctrl.cartData" - branded-checkout-item="$ctrl.brandedCheckoutItem"> + branded-checkout-item="$ctrl.brandedCheckoutItem" + disable-continue="$ctrl.test()" + >
diff --git a/src/common/directives/creditCardCvv.directive.js b/src/common/directives/creditCardCvv.directive.js index 141bd10c3..900c7b418 100644 --- a/src/common/directives/creditCardCvv.directive.js +++ b/src/common/directives/creditCardCvv.directive.js @@ -17,7 +17,6 @@ const creditCardCvv = /* @ngInject */ function () { }) ngModel.$validators.creditCardCvv = function (modelValue) { - console.log(modelValue) return (cruPayments.creditCard.cvv.validate.minLength(modelValue)) && (cruPayments.creditCard.cvv.validate.maxLength(modelValue)) } } From dd884e65280c686e5e6e965ca175774fc9c64241 Mon Sep 17 00:00:00 2001 From: wjames111 Date: Fri, 8 Nov 2024 13:00:18 -0500 Subject: [PATCH 04/40] disable continue button when cvv is invalid. --- .../existingPaymentMethods.component.js | 7 +++++-- .../existingPaymentMethods.tpl.html | 3 +-- src/app/checkout/step-2/step-2.component.js | 7 +++---- src/app/checkout/step-2/step-2.tpl.html | 2 +- src/common/directives/creditCardCvv.directive.js | 11 +++++++++-- 5 files changed, 19 insertions(+), 11 deletions(-) diff --git a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js index e641a87d4..a1be665a5 100644 --- a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js +++ b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js @@ -35,13 +35,16 @@ class ExistingPaymentMethodsController { }) } - $onInit () { console.log(this.hidePaymentTypeOptions) this.loadPaymentMethods() this.disableContinue(false) } + test (test) { + console.log('test', test) + } + $onChanges (changes) { if (changes.paymentFormState) { const state = changes.paymentFormState.currentValue @@ -167,6 +170,6 @@ export default angular onPaymentFormStateChange: '&', onPaymentChange: '&', onLoad: '&', - disableContinue: '&', + setCvvValid: '&', } }) diff --git a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.tpl.html b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.tpl.html index a677a283f..45bcf930d 100644 --- a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.tpl.html +++ b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.tpl.html @@ -20,6 +20,7 @@ type="cvv" class="form-control form-control-subtle" ng-model="$ctrl.cvv" + disable-continue="$ctrl.setCvvValid({$event: $event})" credit-card-cvv="cvv" required > @@ -29,8 +30,6 @@ - -
diff --git a/src/app/checkout/step-2/step-2.component.js b/src/app/checkout/step-2/step-2.component.js index c17835a33..9e9c08b5a 100644 --- a/src/app/checkout/step-2/step-2.component.js +++ b/src/app/checkout/step-2/step-2.component.js @@ -117,7 +117,7 @@ class Step2Controller { } getContinueDisabled () { - if (this.invalidCvv) { + if (!this.isCvvValid) { return true } if (this.loadingPaymentMethods) { @@ -133,9 +133,8 @@ class Step2Controller { return false } - test(isCvvValid) { - console.log('isCvvValid', isCvvValid) - this.invalidCvv = true + setCvvValid(isCvvValid) { + this.isCvvValid = isCvvValid } } diff --git a/src/app/checkout/step-2/step-2.tpl.html b/src/app/checkout/step-2/step-2.tpl.html index fc5ada7fd..654572caf 100644 --- a/src/app/checkout/step-2/step-2.tpl.html +++ b/src/app/checkout/step-2/step-2.tpl.html @@ -32,7 +32,7 @@ hide-payment-type-options="$ctrl.hidePaymentTypeOptions" cart-data="$ctrl.cartData" branded-checkout-item="$ctrl.brandedCheckoutItem" - disable-continue="$ctrl.test()" + set-cvv-valid="$ctrl.setCvvValid($event)" >
diff --git a/src/common/directives/creditCardCvv.directive.js b/src/common/directives/creditCardCvv.directive.js index 900c7b418..daddadd0a 100644 --- a/src/common/directives/creditCardCvv.directive.js +++ b/src/common/directives/creditCardCvv.directive.js @@ -5,8 +5,12 @@ const directiveName = 'creditCardCvv' const creditCardCvv = /* @ngInject */ function () { const directiveDefinitionObject = { - restrict: 'A', + restrict: 'AE', require: ['^ngModel', '^form'], + scope: { + disableContinue: '&' + }, + link: function (scope, element, attributes, controllers) { const ngModel = controllers[0] const formController = controllers[1] @@ -17,7 +21,10 @@ const creditCardCvv = /* @ngInject */ function () { }) ngModel.$validators.creditCardCvv = function (modelValue) { - return (cruPayments.creditCard.cvv.validate.minLength(modelValue)) && (cruPayments.creditCard.cvv.validate.maxLength(modelValue)) + const isCvvValid = (cruPayments.creditCard.cvv.validate.minLength(modelValue)) && (cruPayments.creditCard.cvv.validate.maxLength(modelValue)) + scope.disableContinue({$event: isCvvValid}) + + return isCvvValid } } } From b6e6af986c7ad95aff7844be06343447c13f2bdf Mon Sep 17 00:00:00 2001 From: wjames111 Date: Fri, 8 Nov 2024 16:24:26 -0500 Subject: [PATCH 05/40] Renames function. --- .../existingPaymentMethods.component.js | 1 - .../existingPaymentMethods/existingPaymentMethods.tpl.html | 2 +- src/common/directives/creditCardCvv.directive.js | 4 ++-- 3 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js index a1be665a5..7fc069340 100644 --- a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js +++ b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js @@ -38,7 +38,6 @@ class ExistingPaymentMethodsController { $onInit () { console.log(this.hidePaymentTypeOptions) this.loadPaymentMethods() - this.disableContinue(false) } test (test) { diff --git a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.tpl.html b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.tpl.html index 45bcf930d..75ac5b357 100644 --- a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.tpl.html +++ b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.tpl.html @@ -20,7 +20,7 @@ type="cvv" class="form-control form-control-subtle" ng-model="$ctrl.cvv" - disable-continue="$ctrl.setCvvValid({$event: $event})" + set-cvv-valid="$ctrl.setCvvValid({$event: $event})" credit-card-cvv="cvv" required > diff --git a/src/common/directives/creditCardCvv.directive.js b/src/common/directives/creditCardCvv.directive.js index daddadd0a..9e1dfb9b0 100644 --- a/src/common/directives/creditCardCvv.directive.js +++ b/src/common/directives/creditCardCvv.directive.js @@ -8,7 +8,7 @@ const creditCardCvv = /* @ngInject */ function () { restrict: 'AE', require: ['^ngModel', '^form'], scope: { - disableContinue: '&' + setCvvValid: '&' }, link: function (scope, element, attributes, controllers) { @@ -22,7 +22,7 @@ const creditCardCvv = /* @ngInject */ function () { ngModel.$validators.creditCardCvv = function (modelValue) { const isCvvValid = (cruPayments.creditCard.cvv.validate.minLength(modelValue)) && (cruPayments.creditCard.cvv.validate.maxLength(modelValue)) - scope.disableContinue({$event: isCvvValid}) + scope.setCvvValid({$event: isCvvValid}) return isCvvValid } From b34a965910e1ec98a0c0cbaae10ad661188ae968 Mon Sep 17 00:00:00 2001 From: wjames111 Date: Wed, 13 Nov 2024 12:30:42 -0500 Subject: [PATCH 06/40] Move template into directive. --- .../existingPaymentMethods.tpl.html | 5 +++-- .../directives/creditCardCvv.directive.js | 21 +++++++++---------- src/common/templates/creditCardCvv.tpl.html | 17 +++++++++++++++ 3 files changed, 30 insertions(+), 13 deletions(-) create mode 100644 src/common/templates/creditCardCvv.tpl.html diff --git a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.tpl.html b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.tpl.html index 75ac5b357..a7113ea6d 100644 --- a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.tpl.html +++ b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.tpl.html @@ -12,7 +12,7 @@ -
+ +
diff --git a/src/common/directives/creditCardCvv.directive.js b/src/common/directives/creditCardCvv.directive.js index 9e1dfb9b0..0fbe5549f 100644 --- a/src/common/directives/creditCardCvv.directive.js +++ b/src/common/directives/creditCardCvv.directive.js @@ -1,29 +1,28 @@ import angular from 'angular' import * as cruPayments from '@cruglobal/cru-payments/dist/cru-payments' +import template from '../templates/creditCardCvv.tpl.html' const directiveName = 'creditCardCvv' const creditCardCvv = /* @ngInject */ function () { const directiveDefinitionObject = { - restrict: 'AE', - require: ['^ngModel', '^form'], + restrict: 'E', + templateUrl: template, scope: { setCvvValid: '&' }, - link: function (scope, element, attributes, controllers) { - const ngModel = controllers[0] - const formController = controllers[1] - const valueModel = formController[attributes.creditCardCvv] - - scope.$watch(() => valueModel.$viewValue, function () { - ngModel.$validate() + link: function (scope) { + const cvvForm = scope.$ctrl.form.cvv + + scope.$watch(() => cvvForm.$viewValue, function () { + console.log('validate') + scope.$ctrl.form.cvv.$validate() }) - ngModel.$validators.creditCardCvv = function (modelValue) { + cvvForm.$validators.creditCardCvv = function (modelValue) { const isCvvValid = (cruPayments.creditCard.cvv.validate.minLength(modelValue)) && (cruPayments.creditCard.cvv.validate.maxLength(modelValue)) scope.setCvvValid({$event: isCvvValid}) - return isCvvValid } } diff --git a/src/common/templates/creditCardCvv.tpl.html b/src/common/templates/creditCardCvv.tpl.html new file mode 100644 index 000000000..afabeeb13 --- /dev/null +++ b/src/common/templates/creditCardCvv.tpl.html @@ -0,0 +1,17 @@ + +
+ + +
+ CVV is required. +
+
+ + From 7ab82ad67285698a90f59b7a32c72f2c898eaa49 Mon Sep 17 00:00:00 2001 From: wjames111 Date: Wed, 13 Nov 2024 12:33:50 -0500 Subject: [PATCH 07/40] Removes commented out code. --- .../existingPaymentMethods.component.js | 5 ----- .../existingPaymentMethods.tpl.html | 20 ------------------- 2 files changed, 25 deletions(-) diff --git a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js index 7fc069340..d23552fb2 100644 --- a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js +++ b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js @@ -12,7 +12,6 @@ import { validPaymentMethod } from 'common/services/paymentHelpers/validPaymentM 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' @@ -40,10 +39,6 @@ class ExistingPaymentMethodsController { this.loadPaymentMethods() } - test (test) { - console.log('test', test) - } - $onChanges (changes) { if (changes.paymentFormState) { const state = changes.paymentFormState.currentValue diff --git a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.tpl.html b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.tpl.html index a7113ea6d..6e7fd39bc 100644 --- a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.tpl.html +++ b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.tpl.html @@ -11,27 +11,7 @@
- - -
{{'OPTIONAL'}}
From eaed35e5818885b17140042f015c7006a01b13d0 Mon Sep 17 00:00:00 2001 From: wjames111 Date: Thu, 14 Nov 2024 14:32:29 -0500 Subject: [PATCH 08/40] Updates form and validators in directive. --- .../existingPaymentMethods.component.js | 2 +- .../existingPaymentMethods.tpl.html | 3 +- src/app/checkout/step-2/step-2.component.js | 3 +- src/app/checkout/step-2/step-2.tpl.html | 2 +- .../creditCardForm.component.js | 1 + .../creditCardForm/creditCardForm.tpl.html | 22 +------------ .../paymentMethodForm.modal.tpl.html | 1 - .../directives/creditCardCvv.directive.js | 21 +++++------- src/common/templates/creditCardCvv.tpl.html | 33 +++++++++++-------- 9 files changed, 35 insertions(+), 53 deletions(-) diff --git a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js index d23552fb2..d7aa85a0f 100644 --- a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js +++ b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js @@ -164,6 +164,6 @@ export default angular onPaymentFormStateChange: '&', onPaymentChange: '&', onLoad: '&', - setCvvValid: '&', + disableContinue: '&', } }) diff --git a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.tpl.html b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.tpl.html index 6e7fd39bc..1ff7fd9d2 100644 --- a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.tpl.html +++ b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.tpl.html @@ -9,9 +9,10 @@ +
- +
{{'OPTIONAL'}}
diff --git a/src/app/checkout/step-2/step-2.component.js b/src/app/checkout/step-2/step-2.component.js index 9e9c08b5a..81ef405ee 100644 --- a/src/app/checkout/step-2/step-2.component.js +++ b/src/app/checkout/step-2/step-2.component.js @@ -23,6 +23,7 @@ class Step2Controller { this.analyticsFactory = analyticsFactory this.brandedAnalyticsFactory = brandedAnalyticsFactory this.scrollModalToTop = scrollModalToTop + console.log('step2', $scope); this.$scope.$on(SignInEvent, () => { this.$onInit() @@ -133,7 +134,7 @@ class Step2Controller { return false } - setCvvValid(isCvvValid) { + disableContinue(isCvvValid) { this.isCvvValid = isCvvValid } } diff --git a/src/app/checkout/step-2/step-2.tpl.html b/src/app/checkout/step-2/step-2.tpl.html index 654572caf..d6f9db20e 100644 --- a/src/app/checkout/step-2/step-2.tpl.html +++ b/src/app/checkout/step-2/step-2.tpl.html @@ -32,7 +32,7 @@ hide-payment-type-options="$ctrl.hidePaymentTypeOptions" cart-data="$ctrl.cartData" branded-checkout-item="$ctrl.brandedCheckoutItem" - set-cvv-valid="$ctrl.setCvvValid($event)" + disable-continue="$ctrl.disableContinue($event)" >
diff --git a/src/common/components/paymentMethods/creditCardForm/creditCardForm.component.js b/src/common/components/paymentMethods/creditCardForm/creditCardForm.component.js index 6e152e545..3b8e5d54f 100644 --- a/src/common/components/paymentMethods/creditCardForm/creditCardForm.component.js +++ b/src/common/components/paymentMethods/creditCardForm/creditCardForm.component.js @@ -44,6 +44,7 @@ class CreditCardController { } $onInit () { + console.log('scope4', this.$scope) this.initExistingPaymentMethod() this.waitForFormInitialization() this.initializeExpirationDateOptions() diff --git a/src/common/components/paymentMethods/creditCardForm/creditCardForm.tpl.html b/src/common/components/paymentMethods/creditCardForm/creditCardForm.tpl.html index b22a1d791..2e7653752 100644 --- a/src/common/components/paymentMethods/creditCardForm/creditCardForm.tpl.html +++ b/src/common/components/paymentMethods/creditCardForm/creditCardForm.tpl.html @@ -102,27 +102,7 @@

{{'CREDIT_CARD_PAYMENT'}}

-
- -
-
{{'CARD_SEC_CODE_ERROR'}}
-
{{'MIN_LENGTH_CARD_SEC_CODE'}}
-
{{'MAX_LENGTH_CARD_SEC_CODE'}}
-
- {{'LOCATION_OF_CODE_OTHER'}} - {{'LOCATION_OF_CODE_AMEX'}} -
-
-
+
diff --git a/src/common/components/paymentMethods/paymentMethodForm/paymentMethodForm.modal.tpl.html b/src/common/components/paymentMethods/paymentMethodForm/paymentMethodForm.modal.tpl.html index 4951c6cfe..afce1a711 100644 --- a/src/common/components/paymentMethods/paymentMethodForm/paymentMethodForm.modal.tpl.html +++ b/src/common/components/paymentMethods/paymentMethodForm/paymentMethodForm.modal.tpl.html @@ -49,4 +49,3 @@

- diff --git a/src/common/directives/creditCardCvv.directive.js b/src/common/directives/creditCardCvv.directive.js index 0fbe5549f..4cff3557e 100644 --- a/src/common/directives/creditCardCvv.directive.js +++ b/src/common/directives/creditCardCvv.directive.js @@ -9,22 +9,17 @@ const creditCardCvv = /* @ngInject */ function () { restrict: 'E', templateUrl: template, scope: { - setCvvValid: '&' + disableContinue: '&', }, - link: function (scope) { - const cvvForm = scope.$ctrl.form.cvv - - scope.$watch(() => cvvForm.$viewValue, function () { - console.log('validate') - scope.$ctrl.form.cvv.$validate() + console.log(scope) + const cvvForm = scope.paymentMethodForm.securityCode + + scope.$watch(() => cvvForm.$viewValue, () => { + cvvForm.$validators.minLength = modelValue => cruPayments.creditCard.cvv.validate.minLength(modelValue) + cvvForm.$validators.maxLength = modelValue => cruPayments.creditCard.cvv.validate.maxLength(modelValue) + scope.disableContinue({$event: cvvForm.$valid}) }) - - cvvForm.$validators.creditCardCvv = function (modelValue) { - const isCvvValid = (cruPayments.creditCard.cvv.validate.minLength(modelValue)) && (cruPayments.creditCard.cvv.validate.maxLength(modelValue)) - scope.setCvvValid({$event: isCvvValid}) - return isCvvValid - } } } return directiveDefinitionObject diff --git a/src/common/templates/creditCardCvv.tpl.html b/src/common/templates/creditCardCvv.tpl.html index afabeeb13..bfc020733 100644 --- a/src/common/templates/creditCardCvv.tpl.html +++ b/src/common/templates/creditCardCvv.tpl.html @@ -1,17 +1,22 @@ -
-
- - -
- CVV is required. + + +
+ + +
+
{{'CARD_SEC_CODE_ERROR'}}
+
{{'MIN_LENGTH_CARD_SEC_CODE'}}
+
{{'MAX_LENGTH_CARD_SEC_CODE'}}
+
+ {{'LOCATION_OF_CODE_OTHER'}} + {{'LOCATION_OF_CODE_AMEX'}} +
- From 4a08f181b786d0271c5d38fd56e993b47909dede Mon Sep 17 00:00:00 2001 From: wjames111 Date: Thu, 14 Nov 2024 15:03:52 -0500 Subject: [PATCH 09/40] Remove console logs. --- .../existingPaymentMethods/existingPaymentMethods.component.js | 1 - src/app/checkout/step-2/step-2.component.js | 1 - .../paymentMethods/creditCardForm/creditCardForm.component.js | 1 - src/common/directives/creditCardCvv.directive.js | 1 - 4 files changed, 4 deletions(-) diff --git a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js index d7aa85a0f..772977a74 100644 --- a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js +++ b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js @@ -35,7 +35,6 @@ class ExistingPaymentMethodsController { } $onInit () { - console.log(this.hidePaymentTypeOptions) this.loadPaymentMethods() } diff --git a/src/app/checkout/step-2/step-2.component.js b/src/app/checkout/step-2/step-2.component.js index 81ef405ee..22aa5ebc6 100644 --- a/src/app/checkout/step-2/step-2.component.js +++ b/src/app/checkout/step-2/step-2.component.js @@ -23,7 +23,6 @@ class Step2Controller { this.analyticsFactory = analyticsFactory this.brandedAnalyticsFactory = brandedAnalyticsFactory this.scrollModalToTop = scrollModalToTop - console.log('step2', $scope); this.$scope.$on(SignInEvent, () => { this.$onInit() diff --git a/src/common/components/paymentMethods/creditCardForm/creditCardForm.component.js b/src/common/components/paymentMethods/creditCardForm/creditCardForm.component.js index 3b8e5d54f..6e152e545 100644 --- a/src/common/components/paymentMethods/creditCardForm/creditCardForm.component.js +++ b/src/common/components/paymentMethods/creditCardForm/creditCardForm.component.js @@ -44,7 +44,6 @@ class CreditCardController { } $onInit () { - console.log('scope4', this.$scope) this.initExistingPaymentMethod() this.waitForFormInitialization() this.initializeExpirationDateOptions() diff --git a/src/common/directives/creditCardCvv.directive.js b/src/common/directives/creditCardCvv.directive.js index 4cff3557e..9dfd06a80 100644 --- a/src/common/directives/creditCardCvv.directive.js +++ b/src/common/directives/creditCardCvv.directive.js @@ -12,7 +12,6 @@ const creditCardCvv = /* @ngInject */ function () { disableContinue: '&', }, link: function (scope) { - console.log(scope) const cvvForm = scope.paymentMethodForm.securityCode scope.$watch(() => cvvForm.$viewValue, () => { From 9933f0396301ed77d9396b5e5a51e233ffae94dd Mon Sep 17 00:00:00 2001 From: wjames111 Date: Thu, 14 Nov 2024 15:47:55 -0500 Subject: [PATCH 10/40] Uses existing validators rather then adding them into the directive. --- .../existingPaymentMethods.component.js | 15 ++++++- .../existingPaymentMethods.tpl.html | 4 +- .../creditCardForm.component.js | 5 ++- .../creditCardForm/creditCardForm.tpl.html | 2 +- .../directives/creditCardCvv.directive.js | 39 +++++++++++-------- src/common/templates/creditCardCvv.tpl.html | 22 ----------- 6 files changed, 43 insertions(+), 44 deletions(-) delete mode 100644 src/common/templates/creditCardCvv.tpl.html diff --git a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js index 772977a74..6967ed301 100644 --- a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js +++ b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js @@ -6,6 +6,7 @@ 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' @@ -27,8 +28,6 @@ class ExistingPaymentMethodsController { this.paymentFormResolve = {} this.validPaymentMethod = validPaymentMethod - - this.$scope.$on(SignInEvent, () => { this.$onInit() }) @@ -36,6 +35,7 @@ class ExistingPaymentMethodsController { $onInit () { this.loadPaymentMethods() + this.addCustomValidators() } $onChanges (changes) { @@ -54,6 +54,17 @@ class ExistingPaymentMethodsController { } } + addCustomValidators () { + this.$scope.$watch('$ctrl.creditCardPaymentForm.securityCode.$viewValue', () => { + this.creditCardPaymentForm.securityCode.$validators.minLength = number => { + // If editing existing payment method, don't require a CVV + return !this.creditCardPaymentForm.securityCode.$viewValue && this.paymentMethod && !this.creditCardPayment.cardNumber || cruPayments.creditCard.cvv.validate.minLength(number) /* eslint-disable-line no-mixed-operators */ + } + this.creditCardPaymentForm.securityCode.$validators.maxLength = cruPayments.creditCard.cvv.validate.maxLength + this.disableContinue({ $event: this.creditCardPaymentForm.securityCode.$valid }) + }) + } + loadPaymentMethods () { this.orderService.getExistingPaymentMethods() .subscribe((data) => { diff --git a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.tpl.html b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.tpl.html index 1ff7fd9d2..e2a53b64e 100644 --- a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.tpl.html +++ b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.tpl.html @@ -9,7 +9,9 @@ - +
+ +
diff --git a/src/common/components/paymentMethods/creditCardForm/creditCardForm.component.js b/src/common/components/paymentMethods/creditCardForm/creditCardForm.component.js index 6e152e545..8baf97be9 100644 --- a/src/common/components/paymentMethods/creditCardForm/creditCardForm.component.js +++ b/src/common/components/paymentMethods/creditCardForm/creditCardForm.component.js @@ -43,6 +43,7 @@ class CreditCardController { this.cardInfo = cruPayments.creditCard.card.info } + $onInit () { this.initExistingPaymentMethod() this.waitForFormInitialization() @@ -78,8 +79,8 @@ class CreditCardController { } waitForSecurityCodeInitialization () { - const unregister = this.$scope.$watch('$ctrl.creditCardPaymentForm.securityCode', () => { - unregister() + this.$scope.$watch(() => this.creditCardPaymentForm.securityCode.$viewValue, () => { + this.creditCardPaymentForm.securityCode.$validators.minLength = number => { // If editing existing payment method, don't require a CVV return !this.creditCardPaymentForm.securityCode.$viewValue && this.paymentMethod && !this.creditCardPayment.cardNumber || cruPayments.creditCard.cvv.validate.minLength(number) /* eslint-disable-line no-mixed-operators */ diff --git a/src/common/components/paymentMethods/creditCardForm/creditCardForm.tpl.html b/src/common/components/paymentMethods/creditCardForm/creditCardForm.tpl.html index 2e7653752..1cd86debb 100644 --- a/src/common/components/paymentMethods/creditCardForm/creditCardForm.tpl.html +++ b/src/common/components/paymentMethods/creditCardForm/creditCardForm.tpl.html @@ -102,7 +102,7 @@

{{'CREDIT_CARD_PAYMENT'}}

- +
diff --git a/src/common/directives/creditCardCvv.directive.js b/src/common/directives/creditCardCvv.directive.js index 9dfd06a80..0445df4c7 100644 --- a/src/common/directives/creditCardCvv.directive.js +++ b/src/common/directives/creditCardCvv.directive.js @@ -1,25 +1,32 @@ import angular from 'angular' -import * as cruPayments from '@cruglobal/cru-payments/dist/cru-payments' -import template from '../templates/creditCardCvv.tpl.html' - const directiveName = 'creditCardCvv' +const template = +`
+ + +
+
{{'CARD_SEC_CODE_ERROR'}}
+
{{'MIN_LENGTH_CARD_SEC_CODE'}}
+
{{'MAX_LENGTH_CARD_SEC_CODE'}}
+
+ {{'LOCATION_OF_CODE_OTHER'}} + {{'LOCATION_OF_CODE_AMEX'}} +
+
+
` + + const creditCardCvv = /* @ngInject */ function () { const directiveDefinitionObject = { restrict: 'E', - templateUrl: template, - scope: { - disableContinue: '&', - }, - link: function (scope) { - const cvvForm = scope.paymentMethodForm.securityCode - - scope.$watch(() => cvvForm.$viewValue, () => { - cvvForm.$validators.minLength = modelValue => cruPayments.creditCard.cvv.validate.minLength(modelValue) - cvvForm.$validators.maxLength = modelValue => cruPayments.creditCard.cvv.validate.maxLength(modelValue) - scope.disableContinue({$event: cvvForm.$valid}) - }) - } + template, } return directiveDefinitionObject } diff --git a/src/common/templates/creditCardCvv.tpl.html b/src/common/templates/creditCardCvv.tpl.html deleted file mode 100644 index bfc020733..000000000 --- a/src/common/templates/creditCardCvv.tpl.html +++ /dev/null @@ -1,22 +0,0 @@ - -
-
- - -
-
{{'CARD_SEC_CODE_ERROR'}}
-
{{'MIN_LENGTH_CARD_SEC_CODE'}}
-
{{'MAX_LENGTH_CARD_SEC_CODE'}}
-
- {{'LOCATION_OF_CODE_OTHER'}} - {{'LOCATION_OF_CODE_AMEX'}} -
-
-
-
From b12a6deb60310362252495a5237d1e4c8e5bde1a Mon Sep 17 00:00:00 2001 From: wjames111 Date: Thu, 14 Nov 2024 15:57:00 -0500 Subject: [PATCH 11/40] Adds directive to creditCardForm.component. --- .../creditCardForm/creditCardForm.component.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/common/components/paymentMethods/creditCardForm/creditCardForm.component.js b/src/common/components/paymentMethods/creditCardForm/creditCardForm.component.js index 8baf97be9..aaa0d405a 100644 --- a/src/common/components/paymentMethods/creditCardForm/creditCardForm.component.js +++ b/src/common/components/paymentMethods/creditCardForm/creditCardForm.component.js @@ -21,6 +21,8 @@ import tsys from 'common/services/api/tsys.service' import template from './creditCardForm.tpl.html' import creditCardNumberDirective from '../../../directives/creditCardNumber.directive' +import creditCardCvv from '../../../../common/directives/creditCardCvv.directive' + const componentName = 'creditCardForm' @@ -196,7 +198,8 @@ export default angular showErrors.name, analyticsFactory.name, tsys.name, - creditCardNumberDirective.name + creditCardNumberDirective.name, + creditCardCvv.name ]) .component(componentName, { controller: CreditCardController, From fe82a5993dcddfc05e193ab7b7dddda2573424dd Mon Sep 17 00:00:00 2001 From: wjames111 Date: Thu, 14 Nov 2024 18:03:56 -0500 Subject: [PATCH 12/40] Fixes broken tests. --- src/app/checkout/step-2/step-2.component.js | 2 +- .../paymentMethods/creditCardForm/creditCardForm.component.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/app/checkout/step-2/step-2.component.js b/src/app/checkout/step-2/step-2.component.js index 22aa5ebc6..0bb37abe4 100644 --- a/src/app/checkout/step-2/step-2.component.js +++ b/src/app/checkout/step-2/step-2.component.js @@ -117,7 +117,7 @@ class Step2Controller { } getContinueDisabled () { - if (!this.isCvvValid) { + if (typeof this.isCvvValid !== 'undefined' && !this.isCvvValid) { return true } if (this.loadingPaymentMethods) { diff --git a/src/common/components/paymentMethods/creditCardForm/creditCardForm.component.js b/src/common/components/paymentMethods/creditCardForm/creditCardForm.component.js index aaa0d405a..4fa30e95c 100644 --- a/src/common/components/paymentMethods/creditCardForm/creditCardForm.component.js +++ b/src/common/components/paymentMethods/creditCardForm/creditCardForm.component.js @@ -81,8 +81,8 @@ class CreditCardController { } waitForSecurityCodeInitialization () { - this.$scope.$watch(() => this.creditCardPaymentForm.securityCode.$viewValue, () => { - + const unregister = this.$scope.$watch(() => '$ctrl.creditCardPaymentForm.securityCode', () => { + unregister() this.creditCardPaymentForm.securityCode.$validators.minLength = number => { // If editing existing payment method, don't require a CVV return !this.creditCardPaymentForm.securityCode.$viewValue && this.paymentMethod && !this.creditCardPayment.cardNumber || cruPayments.creditCard.cvv.validate.minLength(number) /* eslint-disable-line no-mixed-operators */ From eb8d2163d4f6ce6bbe7a86b10c8a11540ae25ee4 Mon Sep 17 00:00:00 2001 From: wjames111 Date: Mon, 18 Nov 2024 12:40:07 -0500 Subject: [PATCH 13/40] Adds test for cvv. --- .../existingPaymentMethods.component.js | 1 - .../existingPaymentMethods.component.spec.js | 44 ++++++++++++++++++- 2 files changed, 42 insertions(+), 3 deletions(-) diff --git a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js index 6967ed301..89b6a4d4a 100644 --- a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js +++ b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js @@ -57,7 +57,6 @@ class ExistingPaymentMethodsController { addCustomValidators () { this.$scope.$watch('$ctrl.creditCardPaymentForm.securityCode.$viewValue', () => { this.creditCardPaymentForm.securityCode.$validators.minLength = number => { - // If editing existing payment method, don't require a CVV return !this.creditCardPaymentForm.securityCode.$viewValue && this.paymentMethod && !this.creditCardPayment.cardNumber || cruPayments.creditCard.cvv.validate.minLength(number) /* eslint-disable-line no-mixed-operators */ } this.creditCardPaymentForm.securityCode.$validators.maxLength = cruPayments.creditCard.cvv.validate.maxLength diff --git a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.spec.js b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.spec.js index d2194b8ca..6ed5ebacb 100644 --- a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.spec.js +++ b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.spec.js @@ -1,9 +1,11 @@ import angular from 'angular' import 'angular-mocks' import { Observable } from 'rxjs/Observable' +import size from 'lodash/size' 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' @@ -21,18 +23,20 @@ describe('checkout', () => { self.controller = $componentController(module.name, {}, { onLoad: jest.fn(), onPaymentChange: jest.fn(), + disableContinue: jest.fn(), onPaymentFormStateChange: jest.fn(), - cartData: { items: [] } + cartData: { items: [] }, }) })) - describe('$onInit', () => { it('should call loadPaymentMethods', () => { jest.spyOn(self.controller, 'loadPaymentMethods').mockImplementation(() => {}) + jest.spyOn(self.controller, 'addCustomValidators').mockImplementation(() => {}) self.controller.$onInit() expect(self.controller.loadPaymentMethods).toHaveBeenCalled() + expect(self.controller.addCustomValidators).toHaveBeenCalled() }) it('should be called on sign in', () => { @@ -330,6 +334,42 @@ describe('checkout', () => { expect(self.controller.orderService.storeCoverFeeDecision).not.toHaveBeenCalled() }) }) + + describe('addCustomValidators', () => { + beforeEach(() => { + self.controller.creditCardPaymentForm = { + securityCode: { + $valid: true, + $validators: { + minLength: (value) => cruPayments.creditCard.cvv.validate.minLength(value), + maxLength: cruPayments.creditCard.cvv.validate.maxLength + } + } + } + }) + + it('should add validator functions to creditCardPaymentForm.securityCode', () => { + expect(size(self.controller.creditCardPaymentForm.securityCode.$validators)).toEqual(2) + expect(typeof self.controller.creditCardPaymentForm.securityCode.$validators.minLength).toBe('function') + expect(typeof self.controller.creditCardPaymentForm.securityCode.$validators.maxLength).toBe('function') + }) + + it('should validate minLength correctly', () => { + expect(self.controller.creditCardPaymentForm.securityCode.$validators.minLength('123')).toBe(true) + expect(self.controller.creditCardPaymentForm.securityCode.$validators.minLength('12')).toBe(false) + }) + + it('should validate maxLength correctly', () => { + expect(self.controller.creditCardPaymentForm.securityCode.$validators.maxLength('123')).toBe(true) + expect(self.controller.creditCardPaymentForm.securityCode.$validators.maxLength('12345')).toBe(false) + }) + + it('should call disableContinue with the correct validity state', () => { + self.controller.addCustomValidators() + self.controller.$scope.$apply() + expect(self.controller.disableContinue).toHaveBeenCalledWith({ $event: true }) + }) + }) }) }) }) From 4e0adf5582fcf70ed9e4bb19a42f145367cbed4b Mon Sep 17 00:00:00 2001 From: wjames111 Date: Tue, 19 Nov 2024 14:22:14 -0500 Subject: [PATCH 14/40] Update confusing function name. --- .../existingPaymentMethods.component.js | 12 ++++++------ .../existingPaymentMethods.component.spec.js | 8 ++++---- src/app/checkout/step-2/step-2.component.js | 2 +- src/app/checkout/step-2/step-2.tpl.html | 2 +- 4 files changed, 12 insertions(+), 12 deletions(-) diff --git a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js index 89b6a4d4a..fbcb10f9b 100644 --- a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js +++ b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js @@ -34,6 +34,7 @@ class ExistingPaymentMethodsController { } $onInit () { + this.enableContinue({ $event: false }) this.loadPaymentMethods() this.addCustomValidators() } @@ -55,12 +56,11 @@ class ExistingPaymentMethodsController { } addCustomValidators () { - this.$scope.$watch('$ctrl.creditCardPaymentForm.securityCode.$viewValue', () => { - this.creditCardPaymentForm.securityCode.$validators.minLength = number => { - return !this.creditCardPaymentForm.securityCode.$viewValue && this.paymentMethod && !this.creditCardPayment.cardNumber || cruPayments.creditCard.cvv.validate.minLength(number) /* eslint-disable-line no-mixed-operators */ - } + this.$scope.$watch('$ctrl.creditCardPaymentForm.securityCode.$viewValue', (number) => { + this.creditCardPaymentForm.securityCode.$validators.minLength = cruPayments.creditCard.cvv.validate.minLength /* eslint-disable-line no-mixed-operators */ this.creditCardPaymentForm.securityCode.$validators.maxLength = cruPayments.creditCard.cvv.validate.maxLength - this.disableContinue({ $event: this.creditCardPaymentForm.securityCode.$valid }) + this.enableContinue({ $event: cruPayments.creditCard.cvv.validate.minLength(number) && cruPayments.creditCard.cvv.validate.maxLength(number) }) + }) } @@ -173,6 +173,6 @@ export default angular onPaymentFormStateChange: '&', onPaymentChange: '&', onLoad: '&', - disableContinue: '&', + enableContinue: '&', } }) diff --git a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.spec.js b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.spec.js index 6ed5ebacb..128ab6275 100644 --- a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.spec.js +++ b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.spec.js @@ -23,7 +23,7 @@ describe('checkout', () => { self.controller = $componentController(module.name, {}, { onLoad: jest.fn(), onPaymentChange: jest.fn(), - disableContinue: jest.fn(), + enableContinue: jest.fn(), onPaymentFormStateChange: jest.fn(), cartData: { items: [] }, }) @@ -347,7 +347,7 @@ describe('checkout', () => { } } }) - + it('should add validator functions to creditCardPaymentForm.securityCode', () => { expect(size(self.controller.creditCardPaymentForm.securityCode.$validators)).toEqual(2) expect(typeof self.controller.creditCardPaymentForm.securityCode.$validators.minLength).toBe('function') @@ -364,10 +364,10 @@ describe('checkout', () => { expect(self.controller.creditCardPaymentForm.securityCode.$validators.maxLength('12345')).toBe(false) }) - it('should call disableContinue with the correct validity state', () => { + it('should call enableContinue with the correct validity state', () => { self.controller.addCustomValidators() self.controller.$scope.$apply() - expect(self.controller.disableContinue).toHaveBeenCalledWith({ $event: true }) + expect(self.controller.enableContinue).toHaveBeenCalledWith({ $event: true }) }) }) }) diff --git a/src/app/checkout/step-2/step-2.component.js b/src/app/checkout/step-2/step-2.component.js index 0bb37abe4..682cc42c8 100644 --- a/src/app/checkout/step-2/step-2.component.js +++ b/src/app/checkout/step-2/step-2.component.js @@ -133,7 +133,7 @@ class Step2Controller { return false } - disableContinue(isCvvValid) { + enableContinue(isCvvValid) { this.isCvvValid = isCvvValid } } diff --git a/src/app/checkout/step-2/step-2.tpl.html b/src/app/checkout/step-2/step-2.tpl.html index d6f9db20e..1db964a63 100644 --- a/src/app/checkout/step-2/step-2.tpl.html +++ b/src/app/checkout/step-2/step-2.tpl.html @@ -32,7 +32,7 @@ hide-payment-type-options="$ctrl.hidePaymentTypeOptions" cart-data="$ctrl.cartData" branded-checkout-item="$ctrl.brandedCheckoutItem" - disable-continue="$ctrl.disableContinue($event)" + enable-continue="$ctrl.enableContinue($event)" > From b4eac83803db10b42a49bd7187cc7176c03a9d27 Mon Sep 17 00:00:00 2001 From: wjames111 Date: Tue, 19 Nov 2024 15:05:28 -0500 Subject: [PATCH 15/40] Adds cvv outside of payment methods loop. updates classNames for styling. --- .../existingPaymentMethods.tpl.html | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.tpl.html b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.tpl.html index e2a53b64e..ce20884f1 100644 --- a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.tpl.html +++ b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.tpl.html @@ -9,10 +9,14 @@ -
+ + +
+
+ - +
Date: Tue, 19 Nov 2024 15:11:22 -0500 Subject: [PATCH 16/40] Updates cvv test. --- .../existingPaymentMethods.component.spec.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.spec.js b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.spec.js index 128ab6275..38aa3a752 100644 --- a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.spec.js +++ b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.spec.js @@ -365,9 +365,15 @@ describe('checkout', () => { }) it('should call enableContinue with the correct validity state', () => { + self.controller.creditCardPaymentForm.securityCode.$viewValue = '123' self.controller.addCustomValidators() self.controller.$scope.$apply() expect(self.controller.enableContinue).toHaveBeenCalledWith({ $event: true }) + + self.controller.creditCardPaymentForm.securityCode.$viewValue = '12345' + self.controller.addCustomValidators() + self.controller.$scope.$apply() + expect(self.controller.enableContinue).toHaveBeenCalledWith({ $event: false }) }) }) }) From ad30a262499a0b78549ae0047420935003b81bc3 Mon Sep 17 00:00:00 2001 From: wjames111 Date: Tue, 19 Nov 2024 15:34:49 -0500 Subject: [PATCH 17/40] Clear securityCode viewValue on switchPayment. --- .../existingPaymentMethods.component.js | 3 ++ .../existingPaymentMethods.component.spec.js | 30 +++++++++++-------- 2 files changed, 21 insertions(+), 12 deletions(-) diff --git a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js index fbcb10f9b..ac97a41d9 100644 --- a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js +++ b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js @@ -141,6 +141,9 @@ class ExistingPaymentMethodsController { } switchPayment () { + this.creditCardPaymentForm.securityCode.$setViewValue('') + this.creditCardPaymentForm.securityCode.$render() + console.log(this.selectedPaymentMethod) this.onPaymentChange({ selectedPaymentMethod: this.selectedPaymentMethod }) if (this.selectedPaymentMethod?.['bank-name']) { // This is an EFT payment method so we need to remove any fee coverage diff --git a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.spec.js b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.spec.js index 38aa3a752..a9a6d02b7 100644 --- a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.spec.js +++ b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.spec.js @@ -26,6 +26,17 @@ describe('checkout', () => { enableContinue: jest.fn(), onPaymentFormStateChange: jest.fn(), 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(), + } + } }) })) @@ -336,18 +347,6 @@ describe('checkout', () => { }) describe('addCustomValidators', () => { - beforeEach(() => { - self.controller.creditCardPaymentForm = { - securityCode: { - $valid: true, - $validators: { - minLength: (value) => cruPayments.creditCard.cvv.validate.minLength(value), - maxLength: cruPayments.creditCard.cvv.validate.maxLength - } - } - } - }) - it('should add validator functions to creditCardPaymentForm.securityCode', () => { expect(size(self.controller.creditCardPaymentForm.securityCode.$validators)).toEqual(2) expect(typeof self.controller.creditCardPaymentForm.securityCode.$validators.minLength).toBe('function') @@ -375,6 +374,13 @@ describe('checkout', () => { self.controller.$scope.$apply() expect(self.controller.enableContinue).toHaveBeenCalledWith({ $event: false }) }) + + it('should reset securityCode viewValue on switch payment', () => { + self.controller.creditCardPaymentForm.securityCode.$viewValue = '123' + self.controller.switchPayment() + expect(self.controller.creditCardPaymentForm.securityCode.$setViewValue).toHaveBeenCalledWith('') + expect(self.controller.creditCardPaymentForm.securityCode.$render).toHaveBeenCalled() + }) }) }) }) From cfbb0e41368652c21cd20275b69bb922e146fd32 Mon Sep 17 00:00:00 2001 From: wjames111 Date: Tue, 19 Nov 2024 15:35:21 -0500 Subject: [PATCH 18/40] Remove console.log. --- .../existingPaymentMethods/existingPaymentMethods.component.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js index ac97a41d9..74e3ce0ab 100644 --- a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js +++ b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js @@ -143,7 +143,6 @@ class ExistingPaymentMethodsController { switchPayment () { this.creditCardPaymentForm.securityCode.$setViewValue('') this.creditCardPaymentForm.securityCode.$render() - console.log(this.selectedPaymentMethod) this.onPaymentChange({ selectedPaymentMethod: this.selectedPaymentMethod }) if (this.selectedPaymentMethod?.['bank-name']) { // This is an EFT payment method so we need to remove any fee coverage From 9e19f3a0fcba8fd5317da7079cc255090c88bdb3 Mon Sep 17 00:00:00 2001 From: wjames111 Date: Tue, 19 Nov 2024 15:40:19 -0500 Subject: [PATCH 19/40] Fix lint issues. --- .../existingPaymentMethods.component.js | 5 +-- src/app/checkout/step-2/step-2.component.js | 5 +-- .../creditCardForm.component.js | 2 - .../directives/creditCardCvv.directive.js | 39 +++++++++---------- 4 files changed, 23 insertions(+), 28 deletions(-) diff --git a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js index 74e3ce0ab..1b2a3c96d 100644 --- a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js +++ b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js @@ -32,7 +32,7 @@ class ExistingPaymentMethodsController { this.$onInit() }) } - + $onInit () { this.enableContinue({ $event: false }) this.loadPaymentMethods() @@ -60,7 +60,6 @@ class ExistingPaymentMethodsController { this.creditCardPaymentForm.securityCode.$validators.minLength = cruPayments.creditCard.cvv.validate.minLength /* eslint-disable-line no-mixed-operators */ 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) }) - }) } @@ -175,6 +174,6 @@ export default angular onPaymentFormStateChange: '&', onPaymentChange: '&', onLoad: '&', - enableContinue: '&', + enableContinue: '&' } }) diff --git a/src/app/checkout/step-2/step-2.component.js b/src/app/checkout/step-2/step-2.component.js index 682cc42c8..dd202d495 100644 --- a/src/app/checkout/step-2/step-2.component.js +++ b/src/app/checkout/step-2/step-2.component.js @@ -133,12 +133,11 @@ class Step2Controller { return false } - enableContinue(isCvvValid) { + enableContinue (isCvvValid) { this.isCvvValid = isCvvValid } } - export default angular .module(componentName, [ paymentMethodForm.name, @@ -159,6 +158,6 @@ export default angular cartData: '<', brandedCheckoutItem: '<', changeStep: '&', - onStateChange: '&', + onStateChange: '&' } }) diff --git a/src/common/components/paymentMethods/creditCardForm/creditCardForm.component.js b/src/common/components/paymentMethods/creditCardForm/creditCardForm.component.js index 4fa30e95c..053fd9743 100644 --- a/src/common/components/paymentMethods/creditCardForm/creditCardForm.component.js +++ b/src/common/components/paymentMethods/creditCardForm/creditCardForm.component.js @@ -23,7 +23,6 @@ import template from './creditCardForm.tpl.html' import creditCardNumberDirective from '../../../directives/creditCardNumber.directive' import creditCardCvv from '../../../../common/directives/creditCardCvv.directive' - const componentName = 'creditCardForm' class CreditCardController { @@ -45,7 +44,6 @@ class CreditCardController { this.cardInfo = cruPayments.creditCard.card.info } - $onInit () { this.initExistingPaymentMethod() this.waitForFormInitialization() diff --git a/src/common/directives/creditCardCvv.directive.js b/src/common/directives/creditCardCvv.directive.js index 0445df4c7..2180777e1 100644 --- a/src/common/directives/creditCardCvv.directive.js +++ b/src/common/directives/creditCardCvv.directive.js @@ -1,32 +1,31 @@ import angular from 'angular' const directiveName = 'creditCardCvv' -const template = +const template = `
- - -
-
{{'CARD_SEC_CODE_ERROR'}}
-
{{'MIN_LENGTH_CARD_SEC_CODE'}}
-
{{'MAX_LENGTH_CARD_SEC_CODE'}}
-
- {{'LOCATION_OF_CODE_OTHER'}} - {{'LOCATION_OF_CODE_AMEX'}} -
-
+ + +
+
{{'CARD_SEC_CODE_ERROR'}}
+
{{'MIN_LENGTH_CARD_SEC_CODE'}}
+
{{'MAX_LENGTH_CARD_SEC_CODE'}}
+
+ {{'LOCATION_OF_CODE_OTHER'}} + {{'LOCATION_OF_CODE_AMEX'}} +
+
` - const creditCardCvv = /* @ngInject */ function () { const directiveDefinitionObject = { restrict: 'E', - template, + template } return directiveDefinitionObject } From db413746b7d097e6aaf7c35d347781fa416059cb Mon Sep 17 00:00:00 2001 From: wjames111 Date: Wed, 20 Nov 2024 14:10:11 -0500 Subject: [PATCH 20/40] Add check for selected payment type before disabling continue button. --- src/app/checkout/step-2/step-2.component.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/app/checkout/step-2/step-2.component.js b/src/app/checkout/step-2/step-2.component.js index dd202d495..4de6bb6ae 100644 --- a/src/app/checkout/step-2/step-2.component.js +++ b/src/app/checkout/step-2/step-2.component.js @@ -117,7 +117,8 @@ class Step2Controller { } getContinueDisabled () { - if (typeof this.isCvvValid !== 'undefined' && !this.isCvvValid) { + console.log(this.$scope) + if (this.selectedPaymentMethod?.['card-type'] && typeof this.isCvvValid !== 'undefined' && !this.isCvvValid) { return true } if (this.loadingPaymentMethods) { From 3e705e0902dbf4cbbd4782522cf2f5f3067b3fcf Mon Sep 17 00:00:00 2001 From: wjames111 Date: Wed, 20 Nov 2024 14:25:39 -0500 Subject: [PATCH 21/40] Adds test for getContinueDisabled when selection is not credit-card. --- src/app/checkout/step-2/step-2.component.js | 1 - .../checkout/step-2/step-2.component.spec.js | 18 ++++++++++++++++++ 2 files changed, 18 insertions(+), 1 deletion(-) diff --git a/src/app/checkout/step-2/step-2.component.js b/src/app/checkout/step-2/step-2.component.js index 4de6bb6ae..d8e3ffc71 100644 --- a/src/app/checkout/step-2/step-2.component.js +++ b/src/app/checkout/step-2/step-2.component.js @@ -117,7 +117,6 @@ class Step2Controller { } getContinueDisabled () { - console.log(this.$scope) if (this.selectedPaymentMethod?.['card-type'] && typeof this.isCvvValid !== 'undefined' && !this.isCvvValid) { return true } diff --git a/src/app/checkout/step-2/step-2.component.spec.js b/src/app/checkout/step-2/step-2.component.spec.js index f3e61ae79..6e4473046 100644 --- a/src/app/checkout/step-2/step-2.component.spec.js +++ b/src/app/checkout/step-2/step-2.component.spec.js @@ -308,6 +308,24 @@ describe('checkout', () => { expect(self.controller.paymentFormState).toBe('success') expect(self.controller.getContinueDisabled()).toBe(false) }) + + it('should return true when cvv is invalid and card type is credit card', () => { + self.controller.handleExistingPaymentLoading(true, true) + self.controller.isCvvValid = false + jest.spyOn(self.controller.brandedAnalyticsFactory, 'savePaymentType') + self.controller.handlePaymentChange({'card-type': 'visa'}) + + expect(self.controller.getContinueDisabled()).toBe(true) + }) + + it('should return false when cvv is invalid and card type is not credit card', () => { + self.controller.handleExistingPaymentLoading(true, true) + self.controller.isCvvValid = false + jest.spyOn(self.controller.brandedAnalyticsFactory, 'savePaymentType') + self.controller.handlePaymentChange({'account-type': 'checking'}) + + expect(self.controller.getContinueDisabled()).toBe(false) + }) }) }) }) From d4e68b1699fb5f8ea58729a7b6cf3b136605867b Mon Sep 17 00:00:00 2001 From: wjames111 Date: Thu, 21 Nov 2024 14:55:24 -0500 Subject: [PATCH 22/40] Update to handle EFT. --- .../existingPaymentMethods.component.js | 18 ++++++++++++------ .../existingPaymentMethods.tpl.html | 6 +++--- .../checkout/step-2/step-2.component.spec.js | 2 -- .../payment-method/payment-method.component.js | 2 +- .../payment-methods.component.js | 2 +- .../creditCardForm/creditCardForm.component.js | 2 +- .../directives/creditCardCvv.directive.js | 2 +- 7 files changed, 19 insertions(+), 15 deletions(-) diff --git a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js index 1b2a3c96d..19bfa0c5a 100644 --- a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js +++ b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js @@ -36,7 +36,7 @@ class ExistingPaymentMethodsController { $onInit () { this.enableContinue({ $event: false }) this.loadPaymentMethods() - this.addCustomValidators() + this.addCvvValidators() } $onChanges (changes) { @@ -55,9 +55,9 @@ class ExistingPaymentMethodsController { } } - addCustomValidators () { + addCvvValidators () { this.$scope.$watch('$ctrl.creditCardPaymentForm.securityCode.$viewValue', (number) => { - this.creditCardPaymentForm.securityCode.$validators.minLength = cruPayments.creditCard.cvv.validate.minLength /* eslint-disable-line no-mixed-operators */ + 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) }) }) @@ -91,6 +91,7 @@ class ExistingPaymentMethodsController { // Select the first payment method this.selectedPaymentMethod = paymentMethods[0] } + this.switchPayment() } @@ -140,13 +141,18 @@ class ExistingPaymentMethodsController { } switchPayment () { - this.creditCardPaymentForm.securityCode.$setViewValue('') - this.creditCardPaymentForm.securityCode.$render() this.onPaymentChange({ selectedPaymentMethod: this.selectedPaymentMethod }) + if (this.selectedPaymentMethod?.['card-type'] && this.creditCardPaymentForm?.securityCode) { + // 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) - } + } + } } diff --git a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.tpl.html b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.tpl.html index ce20884f1..00e9bad64 100644 --- a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.tpl.html +++ b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.tpl.html @@ -11,10 +11,10 @@
-
+
-
- + +
diff --git a/src/app/checkout/step-2/step-2.component.spec.js b/src/app/checkout/step-2/step-2.component.spec.js index 6e4473046..6f1e7e73c 100644 --- a/src/app/checkout/step-2/step-2.component.spec.js +++ b/src/app/checkout/step-2/step-2.component.spec.js @@ -312,7 +312,6 @@ describe('checkout', () => { it('should return true when cvv is invalid and card type is credit card', () => { self.controller.handleExistingPaymentLoading(true, true) self.controller.isCvvValid = false - jest.spyOn(self.controller.brandedAnalyticsFactory, 'savePaymentType') self.controller.handlePaymentChange({'card-type': 'visa'}) expect(self.controller.getContinueDisabled()).toBe(true) @@ -321,7 +320,6 @@ describe('checkout', () => { it('should return false when cvv is invalid and card type is not credit card', () => { self.controller.handleExistingPaymentLoading(true, true) self.controller.isCvvValid = false - jest.spyOn(self.controller.brandedAnalyticsFactory, 'savePaymentType') self.controller.handlePaymentChange({'account-type': 'checking'}) expect(self.controller.getContinueDisabled()).toBe(false) diff --git a/src/app/profile/payment-methods/payment-method/payment-method.component.js b/src/app/profile/payment-methods/payment-method/payment-method.component.js index e54941de7..5eba5b34a 100644 --- a/src/app/profile/payment-methods/payment-method/payment-method.component.js +++ b/src/app/profile/payment-methods/payment-method/payment-method.component.js @@ -47,7 +47,7 @@ class PaymentMethodController { resolve: { paymentForm: this.paymentFormResolve, paymentMethod: this.model, - hideCvv: false, + hideCvv: true, mailingAddress: this.mailingAddress, onPaymentFormStateChange: () => params => this.onPaymentFormStateChange(params.$event) } diff --git a/src/app/profile/payment-methods/payment-methods.component.js b/src/app/profile/payment-methods/payment-methods.component.js index dd5e2542f..193a40ce8 100644 --- a/src/app/profile/payment-methods/payment-methods.component.js +++ b/src/app/profile/payment-methods/payment-methods.component.js @@ -96,7 +96,7 @@ class PaymentMethodsController { windowTemplateUrl: giveModalWindowTemplate, resolve: { paymentForm: this.paymentFormResolve, - hideCvv: false, + hideCvv: true, mailingAddress: this.mailingAddress, onPaymentFormStateChange: () => param => this.onPaymentFormStateChange(param.$event) } diff --git a/src/common/components/paymentMethods/creditCardForm/creditCardForm.component.js b/src/common/components/paymentMethods/creditCardForm/creditCardForm.component.js index 053fd9743..88ca925b4 100644 --- a/src/common/components/paymentMethods/creditCardForm/creditCardForm.component.js +++ b/src/common/components/paymentMethods/creditCardForm/creditCardForm.component.js @@ -79,7 +79,7 @@ class CreditCardController { } waitForSecurityCodeInitialization () { - const unregister = this.$scope.$watch(() => '$ctrl.creditCardPaymentForm.securityCode', () => { + const unregister = this.$scope.$watch('$ctrl.creditCardPaymentForm.securityCode', () => { unregister() this.creditCardPaymentForm.securityCode.$validators.minLength = number => { // If editing existing payment method, don't require a CVV diff --git a/src/common/directives/creditCardCvv.directive.js b/src/common/directives/creditCardCvv.directive.js index 2180777e1..c77e49378 100644 --- a/src/common/directives/creditCardCvv.directive.js +++ b/src/common/directives/creditCardCvv.directive.js @@ -22,7 +22,7 @@ const template =
` -const creditCardCvv = /* @ngInject */ function () { +const creditCardCvv = /* @ngInject */ () => { const directiveDefinitionObject = { restrict: 'E', template From 872c3a0c6392fe10d83d58db84b3c3e91c4d1726 Mon Sep 17 00:00:00 2001 From: wjames111 Date: Thu, 21 Nov 2024 15:43:01 -0500 Subject: [PATCH 23/40] Add tests for new payment methods. --- branded-checkout.html | 2 +- .../checkout/step-2/step-2.component.spec.js | 31 +++++++++++++++++++ 2 files changed, 32 insertions(+), 1 deletion(-) diff --git a/branded-checkout.html b/branded-checkout.html index cf436fd12..5874ff654 100644 --- a/branded-checkout.html +++ b/branded-checkout.html @@ -12,7 +12,7 @@ - + diff --git a/src/app/checkout/step-2/step-2.component.spec.js b/src/app/checkout/step-2/step-2.component.spec.js index 6f1e7e73c..5d74935fd 100644 --- a/src/app/checkout/step-2/step-2.component.spec.js +++ b/src/app/checkout/step-2/step-2.component.spec.js @@ -324,6 +324,37 @@ describe('checkout', () => { expect(self.controller.getContinueDisabled()).toBe(false) }) + + it('should return false when cvv is invalid and new payment type is credit card', () => { + jest.spyOn(self.controller.brandedAnalyticsFactory, 'savePaymentType') + self.controller.handlePaymentChange({'card-type': 'visa'}) + self.controller.isCvvValid = false + expect(self.controller.getContinueDisabled()).toBe(true) + }) + + it('should return false when cvv is invalid and new payment type is bankAccount', () => { + jest.spyOn(self.controller.brandedAnalyticsFactory, 'savePaymentType') + self.controller.handlePaymentChange({'account-type': 'checking'}) + self.controller.isCvvValid = false + expect(self.controller.getContinueDisabled()).toBe(false) + }) + }) + describe('enableContinue', () => { + it('should set isCvvValid to false', () => { + self.controller.enableContinue(false) + expect(self.controller.isCvvValid).toBe(false) + self.controller.handlePaymentChange({'card-type': 'visa'}) + expect(self.controller.selectedPaymentMethod).toEqual({'card-type': 'visa'}) + expect(self.controller.getContinueDisabled()).toBe(true) + }) + + it('should set isCvvValid to true', () => { + self.controller.enableContinue(true) + expect(self.controller.isCvvValid).toBe(true) + self.controller.handlePaymentChange({'card-type': 'visa'}) + expect(self.controller.selectedPaymentMethod).toEqual({'card-type': 'visa'}) + expect(self.controller.getContinueDisabled()).toBe(false) + }) }) }) }) From ba4b2356586ca5140c2dd14d9e26bea92d944193 Mon Sep 17 00:00:00 2001 From: wjames111 Date: Thu, 21 Nov 2024 16:10:51 -0500 Subject: [PATCH 24/40] Remove hideCvv from ng-if. --- .../existingPaymentMethods/existingPaymentMethods.tpl.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.tpl.html b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.tpl.html index 00e9bad64..51d229aaa 100644 --- a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.tpl.html +++ b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.tpl.html @@ -11,7 +11,7 @@ -
+
From 375cfe98ff2e3830de0f72521a5c5ccf0af2e90f Mon Sep 17 00:00:00 2001 From: wjames111 Date: Thu, 21 Nov 2024 16:11:12 -0500 Subject: [PATCH 25/40] Run linter. --- .../existingPaymentMethods.component.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js index 19bfa0c5a..d8b5eacc7 100644 --- a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js +++ b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js @@ -91,7 +91,7 @@ class ExistingPaymentMethodsController { // Select the first payment method this.selectedPaymentMethod = paymentMethods[0] } - + this.switchPayment() } @@ -151,8 +151,7 @@ class ExistingPaymentMethodsController { if (this.selectedPaymentMethod?.['bank-name']) { // This is an EFT payment method so we need to remove any fee coverage this.orderService.storeCoverFeeDecision(false) - } - + } } } From 72beba9df5765cd0f9a6b6fe275c303b86d57f1a Mon Sep 17 00:00:00 2001 From: wjames111 Date: Thu, 21 Nov 2024 16:16:52 -0500 Subject: [PATCH 26/40] Fix tests. --- .../existingPaymentMethods.component.spec.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.spec.js b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.spec.js index a9a6d02b7..2c79a9d3a 100644 --- a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.spec.js +++ b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.spec.js @@ -43,11 +43,11 @@ describe('checkout', () => { describe('$onInit', () => { it('should call loadPaymentMethods', () => { jest.spyOn(self.controller, 'loadPaymentMethods').mockImplementation(() => {}) - jest.spyOn(self.controller, 'addCustomValidators').mockImplementation(() => {}) + jest.spyOn(self.controller, 'addCvvValidators').mockImplementation(() => {}) self.controller.$onInit() expect(self.controller.loadPaymentMethods).toHaveBeenCalled() - expect(self.controller.addCustomValidators).toHaveBeenCalled() + expect(self.controller.addCvvValidators).toHaveBeenCalled() }) it('should be called on sign in', () => { @@ -346,7 +346,7 @@ describe('checkout', () => { }) }) - describe('addCustomValidators', () => { + describe('addCvvValidators', () => { it('should add validator functions to creditCardPaymentForm.securityCode', () => { expect(size(self.controller.creditCardPaymentForm.securityCode.$validators)).toEqual(2) expect(typeof self.controller.creditCardPaymentForm.securityCode.$validators.minLength).toBe('function') @@ -365,18 +365,19 @@ describe('checkout', () => { it('should call enableContinue with the correct validity state', () => { self.controller.creditCardPaymentForm.securityCode.$viewValue = '123' - self.controller.addCustomValidators() + self.controller.addCvvValidators() self.controller.$scope.$apply() expect(self.controller.enableContinue).toHaveBeenCalledWith({ $event: true }) self.controller.creditCardPaymentForm.securityCode.$viewValue = '12345' - self.controller.addCustomValidators() + self.controller.addCvvValidators() self.controller.$scope.$apply() expect(self.controller.enableContinue).toHaveBeenCalledWith({ $event: false }) }) it('should reset securityCode viewValue on switch payment', () => { 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() From 2adbcf18578ece84f150f9fb3455201e8e9b489f Mon Sep 17 00:00:00 2001 From: wjames111 Date: Fri, 22 Nov 2024 15:23:51 -0500 Subject: [PATCH 27/40] Fixup tests. --- branded-checkout.html | 2 +- .../existingPaymentMethods.component.spec.js | 42 ++++++++++-------- .../checkout/step-2/step-2.component.spec.js | 44 ++++++++++++++----- 3 files changed, 58 insertions(+), 30 deletions(-) diff --git a/branded-checkout.html b/branded-checkout.html index 5874ff654..cf436fd12 100644 --- a/branded-checkout.html +++ b/branded-checkout.html @@ -12,7 +12,7 @@ - + diff --git a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.spec.js b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.spec.js index 2c79a9d3a..d72029aaa 100644 --- a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.spec.js +++ b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.spec.js @@ -1,7 +1,6 @@ import angular from 'angular' import 'angular-mocks' import { Observable } from 'rxjs/Observable' -import size from 'lodash/size' import 'rxjs/add/observable/of' import 'rxjs/add/observable/throw' import 'rxjs/add/operator/toPromise' @@ -344,43 +343,48 @@ describe('checkout', () => { expect(self.controller.onPaymentChange).toHaveBeenCalledWith({ selectedPaymentMethod: undefined }) expect(self.controller.orderService.storeCoverFeeDecision).not.toHaveBeenCalled() }) + + it('should reset securityCode viewValue on switch payment', () => { + 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() + }) }) describe('addCvvValidators', () => { it('should add validator functions to creditCardPaymentForm.securityCode', () => { - expect(size(self.controller.creditCardPaymentForm.securityCode.$validators)).toEqual(2) + self.controller.addCvvValidators() + + 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 validate minLength correctly', () => { - expect(self.controller.creditCardPaymentForm.securityCode.$validators.minLength('123')).toBe(true) - expect(self.controller.creditCardPaymentForm.securityCode.$validators.minLength('12')).toBe(false) - }) - - it('should validate maxLength correctly', () => { - expect(self.controller.creditCardPaymentForm.securityCode.$validators.maxLength('123')).toBe(true) - expect(self.controller.creditCardPaymentForm.securityCode.$validators.maxLength('12345')).toBe(false) - }) - it('should call enableContinue with the correct validity state', () => { + it('should call enableContinue when validity state is true', () => { 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 validity state 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 reset securityCode viewValue on switch payment', () => { - 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 call enableContinue when validity state is too short', () => { + self.controller.creditCardPaymentForm.securityCode.$viewValue = '1' + self.controller.addCvvValidators() + self.controller.$scope.$apply() + + expect(self.controller.enableContinue).toHaveBeenCalledWith({ $event: false }) }) }) }) diff --git a/src/app/checkout/step-2/step-2.component.spec.js b/src/app/checkout/step-2/step-2.component.spec.js index 5d74935fd..d2c532ca4 100644 --- a/src/app/checkout/step-2/step-2.component.spec.js +++ b/src/app/checkout/step-2/step-2.component.spec.js @@ -309,7 +309,7 @@ describe('checkout', () => { expect(self.controller.getContinueDisabled()).toBe(false) }) - it('should return true when cvv is invalid and card type is credit card', () => { + it('should return true when cvv validity is false and card type is credit card', () => { self.controller.handleExistingPaymentLoading(true, true) self.controller.isCvvValid = false self.controller.handlePaymentChange({'card-type': 'visa'}) @@ -317,7 +317,23 @@ describe('checkout', () => { expect(self.controller.getContinueDisabled()).toBe(true) }) - it('should return false when cvv is invalid and card type is not credit card', () => { + it('should return true when cvv validity is true and card type is credit card', () => { + self.controller.handleExistingPaymentLoading(true, true) + self.controller.isCvvValid = true + self.controller.handlePaymentChange({'card-type': 'visa'}) + + expect(self.controller.getContinueDisabled()).toBe(false) + }) + + it('should return true when cvv validity is undefined and card type is credit card', () => { + self.controller.handleExistingPaymentLoading(true, true) + self.controller.isCvvValid = undefined + self.controller.handlePaymentChange({'card-type': 'visa'}) + + expect(self.controller.getContinueDisabled()).toBe(false) + }) + + it('should return false when cvv validity is false and card type is not credit card', () => { self.controller.handleExistingPaymentLoading(true, true) self.controller.isCvvValid = false self.controller.handlePaymentChange({'account-type': 'checking'}) @@ -325,15 +341,29 @@ describe('checkout', () => { expect(self.controller.getContinueDisabled()).toBe(false) }) + it('should return false when cvv validity is undefined and card type is not credit card', () => { + self.controller.handleExistingPaymentLoading(true, true) + self.controller.isCvvValid = undefined + self.controller.handlePaymentChange({'account-type': 'checking'}) + + expect(self.controller.getContinueDisabled()).toBe(false) + }) + + it('should return false when cvv validity is true and card type is not credit card', () => { + self.controller.handleExistingPaymentLoading(true, true) + self.controller.isCvvValid = true + self.controller.handlePaymentChange({'account-type': 'checking'}) + + expect(self.controller.getContinueDisabled()).toBe(false) + }) + it('should return false when cvv is invalid and new payment type is credit card', () => { - jest.spyOn(self.controller.brandedAnalyticsFactory, 'savePaymentType') self.controller.handlePaymentChange({'card-type': 'visa'}) self.controller.isCvvValid = false expect(self.controller.getContinueDisabled()).toBe(true) }) it('should return false when cvv is invalid and new payment type is bankAccount', () => { - jest.spyOn(self.controller.brandedAnalyticsFactory, 'savePaymentType') self.controller.handlePaymentChange({'account-type': 'checking'}) self.controller.isCvvValid = false expect(self.controller.getContinueDisabled()).toBe(false) @@ -343,17 +373,11 @@ describe('checkout', () => { it('should set isCvvValid to false', () => { self.controller.enableContinue(false) expect(self.controller.isCvvValid).toBe(false) - self.controller.handlePaymentChange({'card-type': 'visa'}) - expect(self.controller.selectedPaymentMethod).toEqual({'card-type': 'visa'}) - expect(self.controller.getContinueDisabled()).toBe(true) }) it('should set isCvvValid to true', () => { self.controller.enableContinue(true) expect(self.controller.isCvvValid).toBe(true) - self.controller.handlePaymentChange({'card-type': 'visa'}) - expect(self.controller.selectedPaymentMethod).toEqual({'card-type': 'visa'}) - expect(self.controller.getContinueDisabled()).toBe(false) }) }) }) From 4ce72f3091836007719e31b41b6ebc1daa5a1a0d Mon Sep 17 00:00:00 2001 From: wjames111 Date: Fri, 22 Nov 2024 17:40:22 -0500 Subject: [PATCH 28/40] Test updates. --- .../existingPaymentMethods.component.js | 4 +++- .../existingPaymentMethods.component.spec.js | 10 ++++------ src/app/checkout/step-2/step-2.component.spec.js | 16 ++++++++-------- 3 files changed, 15 insertions(+), 15 deletions(-) diff --git a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js index d8b5eacc7..f48674d07 100644 --- a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js +++ b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js @@ -19,7 +19,7 @@ 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 @@ -27,6 +27,7 @@ class ExistingPaymentMethodsController { this.$uibModal = $uibModal this.paymentFormResolve = {} this.validPaymentMethod = validPaymentMethod + this.sessionStorage = $window.sessionStorage this.$scope.$on(SignInEvent, () => { this.$onInit() @@ -37,6 +38,7 @@ class ExistingPaymentMethodsController { this.enableContinue({ $event: false }) this.loadPaymentMethods() this.addCvvValidators() + console.log(this.sessionStorage) } $onChanges (changes) { diff --git a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.spec.js b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.spec.js index d72029aaa..56242f2e4 100644 --- a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.spec.js +++ b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.spec.js @@ -344,7 +344,7 @@ describe('checkout', () => { expect(self.controller.orderService.storeCoverFeeDecision).not.toHaveBeenCalled() }) - it('should reset securityCode viewValue on switch payment', () => { + 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() @@ -356,14 +356,12 @@ describe('checkout', () => { describe('addCvvValidators', () => { it('should add validator functions to creditCardPaymentForm.securityCode', () => { - self.controller.addCvvValidators() - 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 validity state is true', () => { + it('should call enableContinue when cvv is valid', () => { self.controller.creditCardPaymentForm.securityCode.$viewValue = '123' self.controller.addCvvValidators() self.controller.$scope.$apply() @@ -371,7 +369,7 @@ describe('checkout', () => { expect(self.controller.enableContinue).toHaveBeenCalledWith({ $event: true }) }) - it('should call enableContinue when validity state is too long', () => { + it('should call enableContinue when cvv is too long', () => { self.controller.creditCardPaymentForm.securityCode.$viewValue = '12345' self.controller.addCvvValidators() self.controller.$scope.$apply() @@ -379,7 +377,7 @@ describe('checkout', () => { expect(self.controller.enableContinue).toHaveBeenCalledWith({ $event: false }) }) - it('should call enableContinue when validity state is too short', () => { + it('should call enableContinue when cvv is too short', () => { self.controller.creditCardPaymentForm.securityCode.$viewValue = '1' self.controller.addCvvValidators() self.controller.$scope.$apply() diff --git a/src/app/checkout/step-2/step-2.component.spec.js b/src/app/checkout/step-2/step-2.component.spec.js index d2c532ca4..1ba2e6e95 100644 --- a/src/app/checkout/step-2/step-2.component.spec.js +++ b/src/app/checkout/step-2/step-2.component.spec.js @@ -309,7 +309,7 @@ describe('checkout', () => { expect(self.controller.getContinueDisabled()).toBe(false) }) - it('should return true when cvv validity is false and card type is credit card', () => { + it('should return true when cvv is invalid and credit card is used', () => { self.controller.handleExistingPaymentLoading(true, true) self.controller.isCvvValid = false self.controller.handlePaymentChange({'card-type': 'visa'}) @@ -317,7 +317,7 @@ describe('checkout', () => { expect(self.controller.getContinueDisabled()).toBe(true) }) - it('should return true when cvv validity is true and card type is credit card', () => { + it('should return true when cvv is valid and credit card is used', () => { self.controller.handleExistingPaymentLoading(true, true) self.controller.isCvvValid = true self.controller.handlePaymentChange({'card-type': 'visa'}) @@ -325,7 +325,7 @@ describe('checkout', () => { expect(self.controller.getContinueDisabled()).toBe(false) }) - it('should return true when cvv validity is undefined and card type is credit card', () => { + it('should return true when cvv validity is undefined and credit card is used', () => { self.controller.handleExistingPaymentLoading(true, true) self.controller.isCvvValid = undefined self.controller.handlePaymentChange({'card-type': 'visa'}) @@ -333,7 +333,7 @@ describe('checkout', () => { expect(self.controller.getContinueDisabled()).toBe(false) }) - it('should return false when cvv validity is false and card type is not credit card', () => { + it('should return false when cvv is invalid and credit card is used', () => { self.controller.handleExistingPaymentLoading(true, true) self.controller.isCvvValid = false self.controller.handlePaymentChange({'account-type': 'checking'}) @@ -341,7 +341,7 @@ describe('checkout', () => { expect(self.controller.getContinueDisabled()).toBe(false) }) - it('should return false when cvv validity is undefined and card type is not credit card', () => { + it('should return false when cvv validity is undefined and EFT is used', () => { self.controller.handleExistingPaymentLoading(true, true) self.controller.isCvvValid = undefined self.controller.handlePaymentChange({'account-type': 'checking'}) @@ -349,7 +349,7 @@ describe('checkout', () => { expect(self.controller.getContinueDisabled()).toBe(false) }) - it('should return false when cvv validity is true and card type is not credit card', () => { + it('should return false when cvv is valid and EFT is used', () => { self.controller.handleExistingPaymentLoading(true, true) self.controller.isCvvValid = true self.controller.handlePaymentChange({'account-type': 'checking'}) @@ -357,13 +357,13 @@ describe('checkout', () => { expect(self.controller.getContinueDisabled()).toBe(false) }) - it('should return false when cvv is invalid and new payment type is credit card', () => { + it('should return false when cvv is invalid and new credit card payment is added', () => { self.controller.handlePaymentChange({'card-type': 'visa'}) self.controller.isCvvValid = false expect(self.controller.getContinueDisabled()).toBe(true) }) - it('should return false when cvv is invalid and new payment type is bankAccount', () => { + it('should return false when cvv is invalid and new EFT is added', () => { self.controller.handlePaymentChange({'account-type': 'checking'}) self.controller.isCvvValid = false expect(self.controller.getContinueDisabled()).toBe(false) From 4fa3d1ae45ffdc547785341cd993413844a5fbab Mon Sep 17 00:00:00 2001 From: wjames111 Date: Mon, 25 Nov 2024 10:55:32 -0500 Subject: [PATCH 29/40] Fix console error, refactor tests. --- .../existingPaymentMethods.component.js | 12 +- src/app/checkout/step-2/step-2.component.js | 2 +- .../checkout/step-2/step-2.component.spec.js | 123 ++++++++++-------- src/app/checkout/step-2/step-2.tpl.html | 2 +- .../paymentMethodForm.modal.tpl.html | 1 + 5 files changed, 79 insertions(+), 61 deletions(-) diff --git a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js index f48674d07..93c52c8dd 100644 --- a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js +++ b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js @@ -37,8 +37,7 @@ class ExistingPaymentMethodsController { $onInit () { this.enableContinue({ $event: false }) this.loadPaymentMethods() - this.addCvvValidators() - console.log(this.sessionStorage) + this.waitForFormInitialization() } $onChanges (changes) { @@ -57,6 +56,15 @@ 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 diff --git a/src/app/checkout/step-2/step-2.component.js b/src/app/checkout/step-2/step-2.component.js index d8e3ffc71..8fed22432 100644 --- a/src/app/checkout/step-2/step-2.component.js +++ b/src/app/checkout/step-2/step-2.component.js @@ -116,7 +116,7 @@ class Step2Controller { } } - getContinueDisabled () { + isContinueDisabled () { if (this.selectedPaymentMethod?.['card-type'] && typeof this.isCvvValid !== 'undefined' && !this.isCvvValid) { return true } diff --git a/src/app/checkout/step-2/step-2.component.spec.js b/src/app/checkout/step-2/step-2.component.spec.js index 1ba2e6e95..b5a67a9be 100644 --- a/src/app/checkout/step-2/step-2.component.spec.js +++ b/src/app/checkout/step-2/step-2.component.spec.js @@ -249,14 +249,14 @@ describe('checkout', () => { }) }) - describe('getContinueDisabled', () => { + describe('isContinueDisabled', () => { it('should return true when there are existing payment methods but none are valid', () => { self.controller.handleExistingPaymentLoading(true, true) self.controller.handlePaymentChange(undefined) expect(self.controller.existingPaymentMethods).toBe(true) expect(self.controller.selectedPaymentMethod).toBeUndefined() - expect(self.controller.getContinueDisabled()).toBe(true) + expect(self.controller.isContinueDisabled()).toBe(true) }) it('should return false when there are existing payment methods and at least one is valid', () => { @@ -265,7 +265,7 @@ describe('checkout', () => { expect(self.controller.existingPaymentMethods).toBe(true) expect(self.controller.selectedPaymentMethod).not.toBeUndefined() - expect(self.controller.getContinueDisabled()).toBe(false) + expect(self.controller.isContinueDisabled()).toBe(false) }) it('should return false when there are not existing payment methods', () => { @@ -273,19 +273,19 @@ describe('checkout', () => { expect(self.controller.existingPaymentMethods).toBe(false) expect(self.controller.selectedPaymentMethod).toBeUndefined() - expect(self.controller.getContinueDisabled()).toBe(false) + expect(self.controller.isContinueDisabled()).toBe(false) }) it('should return true while the payment methods are loading', () => { self.controller.$onInit() expect(self.controller.loadingPaymentMethods).toBe(true) - expect(self.controller.getContinueDisabled()).toBe(true) + expect(self.controller.isContinueDisabled()).toBe(true) self.controller.handleExistingPaymentLoading(true, false) expect(self.controller.loadingPaymentMethods).toBe(false) - expect(self.controller.getContinueDisabled()).toBe(false) + expect(self.controller.isContinueDisabled()).toBe(false) }) it('should return true while the payment form is encrypting or loading', () => { @@ -295,80 +295,89 @@ describe('checkout', () => { self.controller.onPaymentFormStateChange({ state: 'encrypting' }) expect(self.controller.paymentFormState).toBe('encrypting') - expect(self.controller.getContinueDisabled()).toBe(true) + expect(self.controller.isContinueDisabled()).toBe(true) self.controller.onPaymentFormStateChange({ state: 'loading', payload: {}, update: false }) expect(self.controller.paymentFormState).toBe('loading') - expect(self.controller.getContinueDisabled()).toBe(true) + expect(self.controller.isContinueDisabled()).toBe(true) deferred.resolve() self.$flushPendingTasks() expect(self.controller.paymentFormState).toBe('success') - expect(self.controller.getContinueDisabled()).toBe(false) + expect(self.controller.isContinueDisabled()).toBe(false) }) - it('should return true when cvv is invalid and credit card is used', () => { - self.controller.handleExistingPaymentLoading(true, true) - self.controller.isCvvValid = false - self.controller.handlePaymentChange({'card-type': 'visa'}) - - expect(self.controller.getContinueDisabled()).toBe(true) - }) + describe('existing credit card used', () => { + it('should return true when cvv is invalid', () => { + self.controller.handleExistingPaymentLoading(true, true) + self.controller.isCvvValid = false + self.controller.handlePaymentChange({'card-type': 'visa'}) + + expect(self.controller.isContinueDisabled()).toBe(true) + }) - it('should return true when cvv is valid and credit card is used', () => { - self.controller.handleExistingPaymentLoading(true, true) - self.controller.isCvvValid = true - self.controller.handlePaymentChange({'card-type': 'visa'}) - - expect(self.controller.getContinueDisabled()).toBe(false) - }) + it('should return true when cvv is valid', () => { + self.controller.handleExistingPaymentLoading(true, true) + self.controller.isCvvValid = true + self.controller.handlePaymentChange({'card-type': 'visa'}) + + expect(self.controller.isContinueDisabled()).toBe(false) + }) - it('should return true when cvv validity is undefined and credit card is used', () => { - self.controller.handleExistingPaymentLoading(true, true) - self.controller.isCvvValid = undefined - self.controller.handlePaymentChange({'card-type': 'visa'}) - - expect(self.controller.getContinueDisabled()).toBe(false) - }) + it('should return true when cvv validity is undefined', () => { + self.controller.handleExistingPaymentLoading(true, true) + self.controller.isCvvValid = undefined + self.controller.handlePaymentChange({'card-type': 'visa'}) + + expect(self.controller.isContinueDisabled()).toBe(false) + }) - it('should return false when cvv is invalid and credit card is used', () => { - self.controller.handleExistingPaymentLoading(true, true) - self.controller.isCvvValid = false - self.controller.handlePaymentChange({'account-type': 'checking'}) - - expect(self.controller.getContinueDisabled()).toBe(false) + it('should return false when cvv is invalid', () => { + self.controller.handleExistingPaymentLoading(true, true) + self.controller.isCvvValid = false + self.controller.handlePaymentChange({'account-type': 'checking'}) + + expect(self.controller.isContinueDisabled()).toBe(false) + }) }) - it('should return false when cvv validity is undefined and EFT is used', () => { - self.controller.handleExistingPaymentLoading(true, true) - self.controller.isCvvValid = undefined - self.controller.handlePaymentChange({'account-type': 'checking'}) - - expect(self.controller.getContinueDisabled()).toBe(false) - }) + describe('existing EFT used', () => { + it('should return false when cvv validity is undefined', () => { + self.controller.handleExistingPaymentLoading(true, true) + self.controller.isCvvValid = undefined + self.controller.handlePaymentChange({'account-type': 'checking'}) + + expect(self.controller.isContinueDisabled()).toBe(false) + }) - it('should return false when cvv is valid and EFT is used', () => { - self.controller.handleExistingPaymentLoading(true, true) - self.controller.isCvvValid = true - self.controller.handlePaymentChange({'account-type': 'checking'}) - - expect(self.controller.getContinueDisabled()).toBe(false) + it('should return false when cvv is valid', () => { + self.controller.handleExistingPaymentLoading(true, true) + self.controller.isCvvValid = true + self.controller.handlePaymentChange({'account-type': 'checking'}) + + expect(self.controller.isContinueDisabled()).toBe(false) + }) }) - it('should return false when cvv is invalid and new credit card payment is added', () => { - self.controller.handlePaymentChange({'card-type': 'visa'}) - self.controller.isCvvValid = false - expect(self.controller.getContinueDisabled()).toBe(true) + describe('new credit card used', () => { + it('should return false when cvv is invalid and new credit card payment is added', () => { + self.controller.handlePaymentChange({'card-type': 'visa'}) + self.controller.isCvvValid = false + expect(self.controller.isContinueDisabled()).toBe(true) + }) }) - it('should return false when cvv is invalid and new EFT is added', () => { - self.controller.handlePaymentChange({'account-type': 'checking'}) - self.controller.isCvvValid = false - expect(self.controller.getContinueDisabled()).toBe(false) + describe('new EFT used', () => { + it('should return false when cvv is invalid and new EFT is added', () => { + self.controller.handlePaymentChange({'account-type': 'checking'}) + self.controller.isCvvValid = false + expect(self.controller.isContinueDisabled()).toBe(false) + }) }) }) + describe('enableContinue', () => { it('should set isCvvValid to false', () => { self.controller.enableContinue(false) diff --git a/src/app/checkout/step-2/step-2.tpl.html b/src/app/checkout/step-2/step-2.tpl.html index 1db964a63..17c09bcd5 100644 --- a/src/app/checkout/step-2/step-2.tpl.html +++ b/src/app/checkout/step-2/step-2.tpl.html @@ -44,7 +44,7 @@
- diff --git a/src/common/components/paymentMethods/paymentMethodForm/paymentMethodForm.modal.tpl.html b/src/common/components/paymentMethods/paymentMethodForm/paymentMethodForm.modal.tpl.html index afce1a711..4951c6cfe 100644 --- a/src/common/components/paymentMethods/paymentMethodForm/paymentMethodForm.modal.tpl.html +++ b/src/common/components/paymentMethods/paymentMethodForm/paymentMethodForm.modal.tpl.html @@ -49,3 +49,4 @@

+ From 5d09d9dc35bbb1b96221eae84542c40d37ddcf58 Mon Sep 17 00:00:00 2001 From: wjames111 Date: Mon, 25 Nov 2024 12:31:27 -0500 Subject: [PATCH 30/40] Fix broken test. --- .../existingPaymentMethods.component.spec.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.spec.js b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.spec.js index 56242f2e4..a73b5b7c7 100644 --- a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.spec.js +++ b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.spec.js @@ -42,11 +42,11 @@ describe('checkout', () => { describe('$onInit', () => { it('should call loadPaymentMethods', () => { jest.spyOn(self.controller, 'loadPaymentMethods').mockImplementation(() => {}) - jest.spyOn(self.controller, 'addCvvValidators').mockImplementation(() => {}) + jest.spyOn(self.controller, 'waitForFormInitialization').mockImplementation(() => {}) self.controller.$onInit() expect(self.controller.loadPaymentMethods).toHaveBeenCalled() - expect(self.controller.addCvvValidators).toHaveBeenCalled() + expect(self.controller.waitForFormInitialization).toHaveBeenCalled() }) it('should be called on sign in', () => { From 4204964a7b66d4ff391dc16a7b0f546e07ecfd65 Mon Sep 17 00:00:00 2001 From: wjames111 Date: Mon, 25 Nov 2024 13:01:02 -0500 Subject: [PATCH 31/40] Fix for flaky test. --- .../existingPaymentMethods.component.spec.js | 22 +++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.spec.js b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.spec.js index a73b5b7c7..93e0dfdbe 100644 --- a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.spec.js +++ b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.spec.js @@ -356,9 +356,31 @@ describe('checkout', () => { 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', () => { From 22c32061b49a5aa90963525d456ab02944271536 Mon Sep 17 00:00:00 2001 From: wjames111 Date: Mon, 25 Nov 2024 14:50:04 -0500 Subject: [PATCH 32/40] Fix for needing to reenter CVV upon new payment --- .../existingPaymentMethods.component.js | 18 +++++++++++++++--- .../existingPaymentMethods.component.spec.js | 16 +++++++++++++++- 2 files changed, 30 insertions(+), 4 deletions(-) diff --git a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js index 93c52c8dd..ee8727bcd 100644 --- a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js +++ b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js @@ -153,9 +153,21 @@ class ExistingPaymentMethodsController { switchPayment () { this.onPaymentChange({ selectedPaymentMethod: this.selectedPaymentMethod }) if (this.selectedPaymentMethod?.['card-type'] && this.creditCardPaymentForm?.securityCode) { - // Clear CVV when switching between payment credit card payment methods - this.creditCardPaymentForm.securityCode.$setViewValue('') - this.creditCardPaymentForm.securityCode.$render() + + const selectedUri = this.selectedPaymentMethod.self.uri + const storage = JSON.parse(this.sessionStorage.getItem('storedCvvs')) + // const storedUris = Object.keys(storage) + 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']) { diff --git a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.spec.js b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.spec.js index 93e0dfdbe..339d4bae1 100644 --- a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.spec.js +++ b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.spec.js @@ -16,7 +16,7 @@ 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, {}, { @@ -37,6 +37,8 @@ describe('checkout', () => { } } }) + self.$window = $window + self.$window.sessionStorage.clear() })) describe('$onInit', () => { @@ -352,6 +354,18 @@ describe('checkout', () => { 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"}') + console.log(self.$window.sessionStorage) + // self.controller.sessionStorage.setItem('storedCvvs', JSON.stringify({ 'selected uri': '456' })) + self.controller.switchPayment() + + expect(self.controller.creditCardPaymentForm.securityCode.$setViewValue).toHaveBeenCalledWith('456') + expect(self.controller.creditCardPaymentForm.securityCode.$render).toHaveBeenCalled() + }) }) describe('addCvvValidators', () => { From aeccc63d85cde54116ac2fc02d3a965b6a5e2c88 Mon Sep 17 00:00:00 2001 From: wjames111 Date: Mon, 25 Nov 2024 14:51:33 -0500 Subject: [PATCH 33/40] cleanup tests. --- .../existingPaymentMethods.component.js | 1 - .../existingPaymentMethods.component.spec.js | 4 +--- 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js index ee8727bcd..b247cf9e0 100644 --- a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js +++ b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js @@ -156,7 +156,6 @@ class ExistingPaymentMethodsController { const selectedUri = this.selectedPaymentMethod.self.uri const storage = JSON.parse(this.sessionStorage.getItem('storedCvvs')) - // const storedUris = Object.keys(storage) const getSelectedCvv = storage ? storage[Object.keys(storage).filter((item) => item === selectedUri)] : false; if (getSelectedCvv) { diff --git a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.spec.js b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.spec.js index 339d4bae1..1827455a7 100644 --- a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.spec.js +++ b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.spec.js @@ -359,10 +359,8 @@ describe('checkout', () => { 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"}') - console.log(self.$window.sessionStorage) - // self.controller.sessionStorage.setItem('storedCvvs', JSON.stringify({ 'selected uri': '456' })) self.controller.switchPayment() - + expect(self.controller.creditCardPaymentForm.securityCode.$setViewValue).toHaveBeenCalledWith('456') expect(self.controller.creditCardPaymentForm.securityCode.$render).toHaveBeenCalled() }) From c4717dbc442b19009ed868f88e6faf006fe060af Mon Sep 17 00:00:00 2001 From: wjames111 Date: Mon, 25 Nov 2024 14:53:59 -0500 Subject: [PATCH 34/40] Lint --- .../existingPaymentMethods.component.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js index b247cf9e0..4ea2b5cde 100644 --- a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js +++ b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js @@ -153,10 +153,9 @@ class ExistingPaymentMethodsController { switchPayment () { this.onPaymentChange({ selectedPaymentMethod: this.selectedPaymentMethod }) if (this.selectedPaymentMethod?.['card-type'] && this.creditCardPaymentForm?.securityCode) { - - const selectedUri = this.selectedPaymentMethod.self.uri + 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; + const getSelectedCvv = storage ? storage[Object.keys(storage).filter((item) => item === selectedUri)] : false if (getSelectedCvv) { // Set CVV to new credit card CVV @@ -166,7 +165,7 @@ class ExistingPaymentMethodsController { this.creditCardPaymentForm.securityCode.$setViewValue('') } - this.creditCardPaymentForm.securityCode.$render() + this.creditCardPaymentForm.securityCode.$render() } if (this.selectedPaymentMethod?.['bank-name']) { From 95ef48734c0c6384f7e730b8b95ad08a8511e921 Mon Sep 17 00:00:00 2001 From: wjames111 Date: Mon, 25 Nov 2024 16:06:07 -0500 Subject: [PATCH 35/40] Add additional test case. --- .../existingPaymentMethods.component.js | 2 +- .../existingPaymentMethods.component.spec.js | 10 ++++++++++ 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js index 4ea2b5cde..eb56aa097 100644 --- a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js +++ b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js @@ -156,7 +156,7 @@ class ExistingPaymentMethodsController { 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 - + console.log('sessionStorage', this.sessionStorage) if (getSelectedCvv) { // Set CVV to new credit card CVV this.creditCardPaymentForm.securityCode.$setViewValue(getSelectedCvv) diff --git a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.spec.js b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.spec.js index 1827455a7..92a321b08 100644 --- a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.spec.js +++ b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.spec.js @@ -364,6 +364,16 @@ describe('checkout', () => { expect(self.controller.creditCardPaymentForm.securityCode.$setViewValue).toHaveBeenCalledWith('456') expect(self.controller.creditCardPaymentForm.securityCode.$render).toHaveBeenCalled() }) + + it('should not 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/giydsnjqgs=":"456","/paymentmethods/crugive/giydsnjqgy=":"321"}') + self.controller.switchPayment() + + expect(self.controller.creditCardPaymentForm.securityCode.$setViewValue).toHaveBeenCalledWith('') + expect(self.controller.creditCardPaymentForm.securityCode.$render).toHaveBeenCalled() + }) }) describe('addCvvValidators', () => { From f58818e63b027a0ad492efbcee36de8bf534c187 Mon Sep 17 00:00:00 2001 From: wjames111 Date: Mon, 25 Nov 2024 16:52:43 -0500 Subject: [PATCH 36/40] Remove conditional, breakup test to multiple lines. --- .../existingPaymentMethods.component.js | 13 ++------- .../existingPaymentMethods.component.spec.js | 28 ++++++++++++++++--- 2 files changed, 27 insertions(+), 14 deletions(-) diff --git a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js index eb56aa097..9366365d9 100644 --- a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js +++ b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js @@ -155,16 +155,9 @@ class ExistingPaymentMethodsController { 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 - console.log('sessionStorage', this.sessionStorage) - 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('') - } - + const getSelectedCvv = storage ? storage[Object.keys(storage).filter((item) => item === selectedUri)] || '' : '' + // Set CVV to new credit card CVV + this.creditCardPaymentForm.securityCode.$setViewValue(getSelectedCvv) this.creditCardPaymentForm.securityCode.$render() } diff --git a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.spec.js b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.spec.js index 92a321b08..ad565077f 100644 --- a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.spec.js +++ b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.spec.js @@ -357,8 +357,18 @@ describe('checkout', () => { 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.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') @@ -367,8 +377,18 @@ describe('checkout', () => { it('should not 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/giydsnjqgs=":"456","/paymentmethods/crugive/giydsnjqgy=":"321"}') + 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/giydsnjqgs=":"456","/paymentmethods/crugive/giydsnjqgy=":"321"}' + ) self.controller.switchPayment() expect(self.controller.creditCardPaymentForm.securityCode.$setViewValue).toHaveBeenCalledWith('') From 049701006aa55106efbb7fc7a92a926ebebbbc74 Mon Sep 17 00:00:00 2001 From: wjames111 Date: Tue, 26 Nov 2024 12:57:26 -0500 Subject: [PATCH 37/40] Add CVV to sessionStorage on continue; Rename tests. --- .../existingPaymentMethods.component.js | 2 ++ src/app/checkout/step-2/step-2.component.js | 5 ++++- src/app/checkout/step-2/step-2.component.spec.js | 16 ++++++++-------- 3 files changed, 14 insertions(+), 9 deletions(-) diff --git a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js index 9366365d9..cca99732b 100644 --- a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js +++ b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js @@ -69,7 +69,9 @@ class ExistingPaymentMethodsController { 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) }) + this.selectedPaymentMethod.cvv = number }) } diff --git a/src/app/checkout/step-2/step-2.component.js b/src/app/checkout/step-2/step-2.component.js index 8fed22432..87504a352 100644 --- a/src/app/checkout/step-2/step-2.component.js +++ b/src/app/checkout/step-2/step-2.component.js @@ -78,6 +78,7 @@ class Step2Controller { onPaymentFormStateChange ($event) { this.paymentFormState = $event.state + if ($event.state === 'loading' && $event.payload) { const paymentType = $event.payload.creditCard ? $event.payload.creditCard['card-type'] : $event.payload.bankAccount ? $event.payload.bankAccount['account-type'] : 'Unknown' const request = $event.update @@ -109,6 +110,8 @@ class Step2Controller { this.changeStep({ newStep: 'review' }) this.onStateChange({ state: 'submitted' }) this.paymentFormState = 'success' + } else if ($event.state === 'submitted') { + // this.orderService.storeCardSecurityCode(this.selectedPaymentMethod.cvv, this.selectedPaymentMethod.self.uri) } else if ($event.state === 'unsubmitted') { this.onStateChange({ state: 'unsubmitted' }) } else if ($event.state === 'error') { @@ -117,7 +120,7 @@ class Step2Controller { } isContinueDisabled () { - if (this.selectedPaymentMethod?.['card-type'] && typeof this.isCvvValid !== 'undefined' && !this.isCvvValid) { + if (this.selectedPaymentMethod?.['card-type'] && !this.isCvvValid) { return true } if (this.loadingPaymentMethods) { diff --git a/src/app/checkout/step-2/step-2.component.spec.js b/src/app/checkout/step-2/step-2.component.spec.js index b5a67a9be..2891469ce 100644 --- a/src/app/checkout/step-2/step-2.component.spec.js +++ b/src/app/checkout/step-2/step-2.component.spec.js @@ -310,7 +310,7 @@ describe('checkout', () => { }) describe('existing credit card used', () => { - it('should return true when cvv is invalid', () => { + it('should disable continue when cvv is invalid', () => { self.controller.handleExistingPaymentLoading(true, true) self.controller.isCvvValid = false self.controller.handlePaymentChange({'card-type': 'visa'}) @@ -318,7 +318,7 @@ describe('checkout', () => { expect(self.controller.isContinueDisabled()).toBe(true) }) - it('should return true when cvv is valid', () => { + it('should disable continue when cvv is valid', () => { self.controller.handleExistingPaymentLoading(true, true) self.controller.isCvvValid = true self.controller.handlePaymentChange({'card-type': 'visa'}) @@ -326,7 +326,7 @@ describe('checkout', () => { expect(self.controller.isContinueDisabled()).toBe(false) }) - it('should return true when cvv validity is undefined', () => { + it('should disable continue when cvv validity is undefined', () => { self.controller.handleExistingPaymentLoading(true, true) self.controller.isCvvValid = undefined self.controller.handlePaymentChange({'card-type': 'visa'}) @@ -334,7 +334,7 @@ describe('checkout', () => { expect(self.controller.isContinueDisabled()).toBe(false) }) - it('should return false when cvv is invalid', () => { + it('should not disable continue when cvv is invalid', () => { self.controller.handleExistingPaymentLoading(true, true) self.controller.isCvvValid = false self.controller.handlePaymentChange({'account-type': 'checking'}) @@ -344,7 +344,7 @@ describe('checkout', () => { }) describe('existing EFT used', () => { - it('should return false when cvv validity is undefined', () => { + it('should not disable continue when cvv validity is undefined', () => { self.controller.handleExistingPaymentLoading(true, true) self.controller.isCvvValid = undefined self.controller.handlePaymentChange({'account-type': 'checking'}) @@ -352,7 +352,7 @@ describe('checkout', () => { expect(self.controller.isContinueDisabled()).toBe(false) }) - it('should return false when cvv is valid', () => { + it('should not disable continue when cvv is valid', () => { self.controller.handleExistingPaymentLoading(true, true) self.controller.isCvvValid = true self.controller.handlePaymentChange({'account-type': 'checking'}) @@ -362,7 +362,7 @@ describe('checkout', () => { }) describe('new credit card used', () => { - it('should return false when cvv is invalid and new credit card payment is added', () => { + it('should disable continue when cvv is invalid and new credit card payment is added', () => { self.controller.handlePaymentChange({'card-type': 'visa'}) self.controller.isCvvValid = false expect(self.controller.isContinueDisabled()).toBe(true) @@ -370,7 +370,7 @@ describe('checkout', () => { }) describe('new EFT used', () => { - it('should return false when cvv is invalid and new EFT is added', () => { + it('should not disable continue when cvv is invalid and new EFT is added', () => { self.controller.handlePaymentChange({'account-type': 'checking'}) self.controller.isCvvValid = false expect(self.controller.isContinueDisabled()).toBe(false) From 81345628a98b50e1691751f76d7e484951731d3c Mon Sep 17 00:00:00 2001 From: wjames111 Date: Tue, 26 Nov 2024 12:59:04 -0500 Subject: [PATCH 38/40] lint. --- .../existingPaymentMethods/existingPaymentMethods.component.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js index cca99732b..8ef383a5b 100644 --- a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js +++ b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js @@ -69,7 +69,7 @@ class ExistingPaymentMethodsController { 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) }) this.selectedPaymentMethod.cvv = number }) From 0709f6a9b63b23b03a1adfe888b3e789a8fbcefa Mon Sep 17 00:00:00 2001 From: wjames111 Date: Tue, 26 Nov 2024 13:02:58 -0500 Subject: [PATCH 39/40] Fix broken tests. --- .../existingPaymentMethods.component.spec.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.spec.js b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.spec.js index ad565077f..fd90f0dbc 100644 --- a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.spec.js +++ b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.spec.js @@ -35,6 +35,9 @@ describe('checkout', () => { $setViewValue: jest.fn(), $render: jest.fn(), } + }, + selectedPaymentMethod: { + cvv: '' } }) self.$window = $window From 74a673be6bde8cdaec04dbdffa37ed0aff4b7f64 Mon Sep 17 00:00:00 2001 From: wjames111 Date: Wed, 27 Nov 2024 15:03:44 -0500 Subject: [PATCH 40/40] Remove uneeded test. --- src/app/checkout/step-2/step-2.component.spec.js | 8 -------- 1 file changed, 8 deletions(-) diff --git a/src/app/checkout/step-2/step-2.component.spec.js b/src/app/checkout/step-2/step-2.component.spec.js index 2891469ce..a690b8e75 100644 --- a/src/app/checkout/step-2/step-2.component.spec.js +++ b/src/app/checkout/step-2/step-2.component.spec.js @@ -326,14 +326,6 @@ describe('checkout', () => { expect(self.controller.isContinueDisabled()).toBe(false) }) - it('should disable continue when cvv validity is undefined', () => { - self.controller.handleExistingPaymentLoading(true, true) - self.controller.isCvvValid = undefined - self.controller.handlePaymentChange({'card-type': 'visa'}) - - expect(self.controller.isContinueDisabled()).toBe(false) - }) - it('should not disable continue when cvv is invalid', () => { self.controller.handleExistingPaymentLoading(true, true) self.controller.isCvvValid = false