EP-2518 Remove ConfirmationStep

src/app/branded/branded-checkout.component.js

@@ -75,8 +75,13 @@ class BrandedCheckoutController {
   next () {
     switch (this.checkoutStep) {
       case 'giftContactPayment':
-        this.checkoutStep = 'review'
-        this.fireAnalyticsEvents('review')
+        // If it is a single step form, the next step should be 'thankYou'
+        if (this.useV3 === 'true') {
+          this.checkoutStep = 'thankYou'
+        } else {
+          this.checkoutStep = 'review'
+          this.fireAnalyticsEvents('review')
+        }
         break
       case 'review':
         this.checkoutStep = 'thankYou'
@@ -182,6 +187,6 @@ export default angular
       onOrderFailed: '&',
       language: '@',
       showCoverFees: '@',
-      useV3: '@',
+      useV3: '@'
     }
   })

src/app/branded/step-1/branded-checkout-step-1.component.js

@@ -7,22 +7,27 @@ import checkoutStep2 from 'app/checkout/step-2/step-2.component'
 
 import cartService from 'common/services/api/cart.service'
 import orderService from 'common/services/api/order.service'
+import analyticsFactory from '../../analytics/analytics.factory'
 import brandedAnalyticsFactory from '../../branded/analytics/branded-analytics.factory'
-
 import { FEE_DERIVATIVE } from 'common/components/paymentMethods/coverFees/coverFees.component'
 
 import template from './branded-checkout-step-1.tpl.html'
+import { Observable } from 'rxjs'
+import { tap, catchError } from 'rxjs/operators'
 
 const componentName = 'brandedCheckoutStep1'
 
 class BrandedCheckoutStep1Controller {
   /* @ngInject */
-  constructor ($log, $filter, brandedAnalyticsFactory, cartService, orderService) {
+  constructor ($scope, $log, $filter, $window, analyticsFactory, brandedAnalyticsFactory, cartService, orderService) {
+    this.$scope = $scope
     this.$log = $log
     this.$filter = $filter
+    this.analyticsFactory = analyticsFactory
     this.brandedAnalyticsFactory = brandedAnalyticsFactory
     this.cartService = cartService
     this.orderService = orderService
+    this.$window = $window
   }
 
   $onInit () {
@@ -154,12 +159,116 @@ class BrandedCheckoutStep1Controller {
   checkSuccessfulSubmission () {
     if (every(this.submission, 'completed')) {
       if (every(this.submission, { error: false })) {
-        this.next()
+        if (this.useV3 === 'true') {
+          this.submitOrderInternal()
+        } else {
+          this.next()
+        }
       } else {
         this.submitted = false
       }
     }
   }
+
+  loadCart () {
+    this.errorLoadingCart = false
+
+    // Return the observable instead of subscribing here
+    return this.cartService.get().pipe(
+      tap(data => {
+        // Setting cart data and analytics
+        this.cartData = data
+        this.brandedAnalyticsFactory.saveCoverFees(this.orderService.retrieveCoverFeeDecision())
+        this.brandedAnalyticsFactory.saveItem(this.cartData.items[0])
+        this.brandedAnalyticsFactory.addPaymentInfo()
+        this.brandedAnalyticsFactory.reviewOrder()
+        console.log('done loading cart')
+      }),
+      catchError(error => {
+        // Handle errors by setting flag and logging the error
+        this.errorLoadingCart = true
+        this.$log.error('Error loading cart data for branded checkout step 2', error)
+        return Observable.throw(error) // Rethrow the error so the observable chain can handle it
+      })
+    )
+  }
+
+  loadCurrentPayment () {
+    this.loadingCurrentPayment = true
+
+    return this.orderService.getCurrentPayment().pipe(
+      tap(data => {
+        if (!data) {
+          this.$log.error('Error loading current payment info: current payment doesn\'t seem to exist')
+        } else if (data['account-type']) {
+          this.bankAccountPaymentDetails = data
+        } else if (data['card-type']) {
+          this.creditCardPaymentDetails = data
+        } else {
+          this.$log.error('Error loading current payment info: current payment type is unknown')
+        }
+        this.loadingCurrentPayment = false
+      }),
+      catchError(error => {
+        this.loadingCurrentPayment = false
+        this.$log.error('Error loading current payment info', error)
+        return Observable.throw(error) // Propagate error
+      })
+    )
+  }
+
+  checkErrors () {
+    // Then check for errors on the API
+    return this.orderService.checkErrors().do(
+      (data) => {
+        this.needinfoErrors = data
+        console.log('checking errors')
+      })
+      .catch(error => {
+        this.$log.error('Error loading checkErrors', error)
+        return Observable.throw(error)
+      })
+  }
+
+  submitOrderInternal () {
+    this.loadingAndSubmitting = true
+    // Start by loading the cart
+    this.loadCart()
+      .mergeMap(() => {
+        // After loadCart completes, call loadCurrentPayment
+        console.log('loadCurrentPayment')
+        return this.loadCurrentPayment()
+      })
+      .mergeMap(() => {
+        // After loadCurrentPayment completes, call checkErrors
+        console.log('checkErrors')
+        return this.checkErrors()
+      })
+      .mergeMap(() => {
+        return this.orderService.submitOrder(this)
+      })
+      .subscribe(() => {
+        this.next()
+        this.loadingAndSubmitting = false
+      })
+  }
+
+  handleRecaptchaFailure () {
+    this.analyticsFactory.checkoutFieldError('submitOrder', 'failed')
+    this.submittingOrder = false
+    this.loadingAndSubmitting = false
+    this.onSubmittingOrder({ value: false })
+
+    this.loadCart()
+
+    this.onSubmitted()
+    this.submissionError = 'generic error'
+    this.$window.scrollTo(0, 0)
+  }
+
+  canSubmitOrder () {
+    return !this.submittingOrder
+  }
 }
 
 export default angular
@@ -169,6 +278,7 @@ export default angular
     checkoutStep2.name,
     cartService.name,
     orderService.name,
+    analyticsFactory.name,
     brandedAnalyticsFactory.name
   ])
   .component(componentName, {
@@ -189,6 +299,9 @@ export default angular
       onPaymentFailed: '&',
       radioStationApiUrl: '<',
       radioStationRadius: '<',
+      onSubmittingOrder: '&',
+      onSubmitted: '&',
       useV3: '<',
+      loadingAndSubmitting: '<'
     }
   })

src/app/branded/step-1/branded-checkout-step-1.tpl.html

@@ -1,3 +1,47 @@
+<div class="alert alert-danger" role="alert" ng-if="$ctrl.needinfoErrors || $ctrl.submissionError">
+  <p ng-repeat="error in $ctrl.needinfoErrors" ng-switch="error">
+    <span ng-switch-when="need.email" translate>{{'REVIEW_EMAIL_ERROR'}}</span>
+    <span ng-switch-when="need.payment.method" translate>{{'REVIEW_PAYMENT_ERROR'}}</span>
+    <span ng-switch-when="need.billing.address" translate>{{'REVIEW_BILLING_ADDRESS_ERROR'}}</span>
+    <span ng-switch-default translate>
+      <span ng-if="$ctrl.submissionErrorStatus > -1" translate>
+        {{'REVIEW_MISSING_DATA_ERROR'}}
+      </span>
+     <span ng-if="$ctrl.submissionErrorStatus === -1" translate>
+       {{'REVIEW_TIME_OUT_ERROR'}}
+     </span>
+    </span>
+  </p>
+  <p ng-if="$ctrl.submissionError" ng-switch="$ctrl.submissionError">
+    <span ng-switch-when="Current payment type is unknown" translate>
+      {{'REVIEW_SUBMITTING_PAYMENT_ERROR'}}
+    </span>
+    <span ng-switch-when="CardExpiredException" translate>
+      {{'REVIEW_CARD_EXPIRED_ERROR'}}
+    </span>
+    <span ng-switch-when="CardErrorException" translate>
+      {{'REVIEW_INVALID_CARD_ERROR'}}
+    </span>
+    <span ng-switch-when="CardDeclinedException" translate>
+      {{'REVIEW_CARD_DECLINED_ERROR'}}
+    </span>
+    <span ng-switch-when="InsufficientFundException" translate>
+      {{'REVIEW_INSUFFICIENT_FUNDS_ERROR'}}
+    </span>
+    <span ng-switch-when="AuthorizedAmountExceededException" translate>
+      {{'REVIEW_EXCEEDS_BALANCE_ERROR'}}
+    </span>
+    <span ng-switch-when="InvalidCVV2Exception" translate>
+      {{'REVIEW_INVALID_SEC_CODE_ERROR'}}
+    </span>
+    <span ng-switch-when="InvalidAddressException" translate>
+      {{'REVIEW_ADDRESS_MISMATCH_ERROR'}}
+    </span>
+    <span ng-switch-default translate>
+      {{'REVIEW_DEFAULT_ERROR'}}
+    </span>
+  </p>
+</div>
 <div class="panel">
   <div class="panel-body loading-overlay-parent">
     <loading ng-if="$ctrl.loadingProductConfig">
@@ -46,10 +90,26 @@ <h3 class="panel-name" translate>{{'PAYMENT'}}</h3>
   </div>
   <div class="panel">
     <div class="panel-body text-right">
-      <button class="btn btn-primary"
+      <div class="checkout-cta pull-right" ng-if="$ctrl.useV3 === 'true'">
+       <recaptcha-wrapper
+              action="'branded_submit'"
+              on-success="$ctrl.submit"
+              on-failure="$ctrl.handleRecaptchaFailure"
+              component-instance="$ctrl"
+              button-id="'submitOrderButton'"
+              button-type="'submit'"
+              button-classes="'btn btn-primary btn-lg btn-block'"
+              button-disabled="$ctrl.errorLoadingProductConfig || !$ctrl.canSubmitOrder()"
+              button-label="'SUBMIT_GIFT'"></recaptcha-wrapper>
+        </div>
+
+      <button ng-if="$ctrl.useV3 !== 'true'" class="btn btn-primary"
               ng-click="$ctrl.submit()"
               ng-disabled="$ctrl.errorLoadingProductConfig"
               translate>{{'CONTINUE'}}</button>
-    </div>
+  </div>
   </div>
 </div>
+<loading type="fixed" ng-if="$ctrl.loadingAndSubmitting">
+  <translate>{{'SUBMITTING_GIFT'}}</translate>
+</loading>

src/app/cart/cart.component.js

@@ -10,7 +10,7 @@ import productModalService from 'common/services/productModal.service'
 import desigSrcDirective from 'common/directives/desigSrc.directive'
 
 import displayRateTotals from 'common/components/displayRateTotals/displayRateTotals.component'
-import { cartUpdatedEvent } from 'common/components/nav/navCart/navCart.component'
+import { cartUpdatedEvent } from 'common/lib/cartEvents'
 
 import analyticsFactory from 'app/analytics/analytics.factory'
 

src/app/cart/cart.component.spec.js

@@ -6,7 +6,7 @@ import { Observable } from 'rxjs/Observable'
 import 'rxjs/add/observable/of'
 import 'rxjs/add/observable/throw'
 
-import { cartUpdatedEvent } from 'common/components/nav/navCart/navCart.component'
+import { cartUpdatedEvent } from 'common/lib/cartEvents'
 
 describe('cart', () => {
   beforeEach(angular.mock.module(module.name))

src/app/checkout/cart-summary/cart-summary.component.js

@@ -13,21 +13,22 @@ export const submitOrderEvent = 'submitOrderEvent'
 
 class CartSummaryController {
   /* @ngInject */
-  constructor (cartService, $scope) {
+  constructor (cartService, $scope, $rootScope) {
     this.$scope = $scope
+    this.$rootScope = $rootScope
     this.cartService = cartService
   }
 
   buildCartUrl () {
     return this.cartService.buildCartUrl()
   }
 
-  handleRecaptchaFailure (componentInstance) {
-    componentInstance.$rootScope.$emit(recaptchaFailedEvent)
+  handleRecaptchaFailure () {
+    this.$rootScope.$emit(recaptchaFailedEvent)
   }
 
-  onSubmit (componentInstance) {
-    componentInstance.$rootScope.$emit(submitOrderEvent)
+  onSubmit () {
+    this.$rootScope.$emit(submitOrderEvent)
   }
 }
 

src/app/checkout/cart-summary/cart-summary.spec.js

@@ -31,17 +31,17 @@ describe('checkout', function () {
 
     describe('onSubmit', () => {
       it('should emit an event', () => {
-        jest.spyOn(componentInstance.$rootScope, '$emit').mockImplementation(() => {})
-        self.controller.onSubmit(componentInstance)
-        expect(componentInstance.$rootScope.$emit).toHaveBeenCalledWith(submitOrderEvent)
+        jest.spyOn(self.controller.$rootScope, '$emit').mockImplementation(() => {})
+        self.controller.onSubmit()
+        expect(self.controller.$rootScope.$emit).toHaveBeenCalledWith(submitOrderEvent)
       })
     })
 
     describe('handleRecaptchaFailure', () => {
       it('should emit an event', () => {
-        jest.spyOn(componentInstance.$rootScope, '$emit').mockImplementation(() => {})
-        self.controller.handleRecaptchaFailure(componentInstance)
-        expect(componentInstance.$rootScope.$emit).toHaveBeenCalledWith(recaptchaFailedEvent)
+        jest.spyOn(self.controller.$rootScope, '$emit').mockImplementation(() => {})
+        self.controller.handleRecaptchaFailure()
+        expect(self.controller.$rootScope.$emit).toHaveBeenCalledWith(recaptchaFailedEvent)
       })
     })
   })