{{'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..2b6c54b4e 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') {
@@ -116,7 +119,10 @@ class Step2Controller {
}
}
- getContinueDisabled () {
+ isContinueDisabled () {
+ if (this.selectedPaymentMethod?.['card-type'] && !this.isCvvValid) {
+ return true
+ }
if (this.loadingPaymentMethods) {
return true
}
@@ -129,6 +135,10 @@ class Step2Controller {
}
return false
}
+
+ enableContinue (isCvvValid) {
+ this.isCvvValid = isCvvValid
+ }
}
export default angular
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..32dfa424c 100644
--- a/src/app/checkout/step-2/step-2.component.spec.js
+++ b/src/app/checkout/step-2/step-2.component.spec.js
@@ -164,6 +164,7 @@ describe('checkout', () => {
it('should update paymentFormState if transitioning to a different state', () => {
self.controller.paymentFormState = 'unsubmitted'
+ self.controller.selectedPaymentMethod = { cvv: '123', self: { uri: 'uri'} }
self.controller.onPaymentFormStateChange({ state: 'submitted' })
expect(self.controller.paymentFormState).toEqual('submitted')
@@ -249,14 +250,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 +266,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 +274,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,18 +296,90 @@ 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)
+ })
+
+ describe('existing credit card used', () => {
+ it('should disable continue 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 disable continue 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 not disable continue 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)
+ })
+ })
+
+ describe('existing EFT used', () => {
+ 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'})
+
+ expect(self.controller.isContinueDisabled()).toBe(false)
+ })
+
+ it('should not disable continue 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)
+ })
+ })
+
+ describe('new credit card used', () => {
+ 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)
+ })
+ })
+
+ describe('new EFT used', () => {
+ 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)
+ })
+ })
+ })
+
+ describe('enableContinue', () => {
+ it('should set isCvvValid to false', () => {
+ self.controller.enableContinue(false)
+ expect(self.controller.isCvvValid).toBe(false)
+ })
+
+ it('should set isCvvValid to true', () => {
+ self.controller.enableContinue(true)
+ expect(self.controller.isCvvValid).toBe(true)
})
})
})
diff --git a/src/app/checkout/step-2/step-2.tpl.html b/src/app/checkout/step-2/step-2.tpl.html
index 7a3edb704..d2203b9cd 100644
--- a/src/app/checkout/step-2/step-2.tpl.html
+++ b/src/app/checkout/step-2/step-2.tpl.html
@@ -31,7 +31,8 @@
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"
+ enable-continue="$ctrl.enableContinue($event)">