From 65c4157290e7a978db4965b94b3d062f51281c73 Mon Sep 17 00:00:00 2001 From: wjames111 Date: Mon, 4 Nov 2024 16:56:40 -0500 Subject: [PATCH] Adds CVV, custom validators and savePayment method. --- .../paymentMethodDisplay.component.js | 110 +++++++++++++++++- .../paymentMethodDisplay.tpl.html | 34 +++++- 2 files changed, 132 insertions(+), 12 deletions(-) diff --git a/src/common/components/paymentMethods/paymentMethodDisplay.component.js b/src/common/components/paymentMethods/paymentMethodDisplay.component.js index 3a719bf6b..2eb6544dc 100644 --- a/src/common/components/paymentMethods/paymentMethodDisplay.component.js +++ b/src/common/components/paymentMethods/paymentMethodDisplay.component.js @@ -1,26 +1,124 @@ import angular from 'angular' import appConfig from 'common/app.config' - +import get from 'lodash/get' import template from './paymentMethodDisplay.tpl.html' - +import creditCardForm from './creditCardForm/creditCardForm.component' +import tsys from 'common/services/api/tsys.service' +import { Observable } from 'rxjs/Observable' +import * as cruPayments from '@cruglobal/cru-payments/dist/cru-payments' +import { scrollModalToTop } from 'common/services/modalState.service' +import analyticsFactory from 'app/analytics/analytics.factory' +import showErrors from 'common/filters/showErrors.filter' +import creditCardNumberDirective from '../../directives/creditCardNumber.directive' +import 'rxjs/add/observable/of' +import 'rxjs/add/operator/combineLatest' +import 'rxjs/add/operator/mergeMap' const componentName = 'paymentMethodDisplay' class PaymentMethodDisplayController { /* @ngInject */ - constructor (envService) { - this.imgDomain = envService.read('imgDomain') + constructor ($scope, $log, analyticsFactory, envService, tsysService) { + this.imgDomain = envService.read('imgDomain'); + this.tsysService = tsysService + this.$log = $log + this.envService = envService + this.analyticsFactory = analyticsFactory + this.$scope = $scope; + } + + $onInit () { + this.addCustomValidators() + } + + addCustomValidators () { + this.$scope.$watch('$ctrl.creditCardPaymentForm.securityCode', (value) => { + console.log('value', value) + this.creditCardPaymentForm.securityCode.$validators.minLength = cruPayments.creditCard.cvv.validate.minLength + this.creditCardPaymentForm.securityCode.$validators.maxLength = cruPayments.creditCard.cvv.validate.maxLength + this.creditCardPaymentForm.securityCode.$validate() + }) + } + + savePayment () { + this.creditCardPaymentForm.$setSubmitted() + if (this.creditCardPaymentForm.$valid) { + + this.onPaymentFormStateChange({ + $event: { + state: 'encrypting' + } + }) + const tokenObservable = this.paymentMethod + ? Observable.of({ + tsepToken: this.paymentMethod['last-four-digits'], + maskedCardNumber: this.paymentMethod['last-four-digits'] + }) // Send masked card number when card number is not updated + : this.tsysService.getManifest() + .mergeMap(data => { + const productionEnvironments = ['production', 'prodcloud', 'preprod'] + const actualEnvironment = this.envService.get() + const ccpEnvironment = productionEnvironments.includes(actualEnvironment) ? 'production' : actualEnvironment + + cruPayments.creditCard.init(ccpEnvironment, data.deviceId, data.manifest) + return cruPayments.creditCard.encrypt(this.paymentMethod['card-number'], this.creditCardPayment.securityCode, this.paymentMethod['expiry-month'], this.paymentMethod['expiry-year']) + }) + tokenObservable.subscribe(tokenObj => { + console.log('loading') + this.onPaymentFormStateChange({ + $event: { + state: 'loading', + payload: { + creditCard: { + address: this.paymentMethod['address'], + 'card-number': tokenObj.tsepToken, + 'card-type': this.paymentMethod['card-type'], /* eslint-disable-line no-mixed-operators */ + 'cardholder-name': this.paymentMethod['cardholder-name'], + 'expiry-month': this.paymentMethod['expiry-month'], + 'expiry-year': this.paymentMethod['expiry-year'], + 'last-four-digits': tokenObj.maskedCardNumber, + transactionId: tokenObj.transactionID, + cvv: this.creditCardPayment.securityCode + } + } + } + }) + }, error => { + this.$log.error('Error tokenizing credit card', error) + this.analyticsFactory.checkoutFieldError('tokenizeCard', 'failed') + this.onPaymentFormStateChange({ + $event: { + state: 'error', + error: error + } + }) + scrollModalToTop() + }) + } else { + this.analyticsFactory.handleCheckoutFormErrors(this.creditCardPaymentForm) + this.onPaymentFormStateChange({ + $event: { + state: 'unsubmitted' + } + }) + } } } export default angular .module(componentName, [ - appConfig.name + 'ngMessages', + showErrors.name, + analyticsFactory.name, + tsys.name, + creditCardNumberDirective.name ]) .component(componentName, { controller: PaymentMethodDisplayController, templateUrl: template, bindings: { + paymentFormState: '<', paymentMethod: '<', - expired: '<' + expired: '<', + onPaymentFormStateChange: '&' } }) diff --git a/src/common/components/paymentMethods/paymentMethodDisplay.tpl.html b/src/common/components/paymentMethods/paymentMethodDisplay.tpl.html index cb3ae6f9b..c1a5017d4 100644 --- a/src/common/components/paymentMethods/paymentMethodDisplay.tpl.html +++ b/src/common/components/paymentMethods/paymentMethodDisplay.tpl.html @@ -1,3 +1,4 @@ +
+