Stop using componentInstance

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)
       })
     })
   })

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

@@ -38,15 +38,14 @@ class Step3Controller {
     this.commonService = commonService
     this.startDate = startDate
     this.sessionStorage = $window.sessionStorage
-    this.selfReference = this
     this.isBranded = envService.read('isBrandedCheckout')
 
     this.$scope.$on(SignInEvent, () => {
       this.$onInit()
     })
 
     this.$rootScope.$on(recaptchaFailedEvent, () => {
-      this.handleRecaptchaFailure(this)
+      this.handleRecaptchaFailure()
     })
     this.$rootScope.$on(submitOrderEvent, () => {
       this.submitOrder()
@@ -137,61 +136,61 @@ class Step3Controller {
     this.submitOrderInternal(this)
   }
 
-  submitOrderInternal (componentInstance) {
-    delete componentInstance.submissionError
-    delete componentInstance.submissionErrorStatus
+  submitOrderInternal () {
+    delete this.submissionError
+    delete this.submissionErrorStatus
     // Prevent multiple submissions
-    if (componentInstance.submittingOrder) return
-    componentInstance.submittingOrder = true
-    componentInstance.onSubmittingOrder({ value: true })
+    if (this.submittingOrder) return
+    this.submittingOrder = true
+    this.onSubmittingOrder({ value: true })
 
     let submitRequest
-    if (componentInstance.bankAccountPaymentDetails) {
-      submitRequest = componentInstance.orderService.submit()
-    } else if (componentInstance.creditCardPaymentDetails) {
-      const cvv = componentInstance.orderService.retrieveCardSecurityCode()
-      submitRequest = componentInstance.orderService.submit(cvv)
+    if (this.bankAccountPaymentDetails) {
+      submitRequest = this.orderService.submit()
+    } else if (this.creditCardPaymentDetails) {
+      const cvv = this.orderService.retrieveCardSecurityCode()
+      submitRequest = this.orderService.submit(cvv)
     } else {
       submitRequest = Observable.throw({ data: 'Current payment type is unknown' })
     }
     submitRequest.subscribe(() => {
-      componentInstance.analyticsFactory.purchase(componentInstance.donorDetails, componentInstance.cartData, componentInstance.orderService.retrieveCoverFeeDecision())
-      componentInstance.submittingOrder = false
-      componentInstance.onSubmittingOrder({ value: false })
-      componentInstance.orderService.clearCardSecurityCodes()
-      componentInstance.orderService.clearCoverFees()
-      componentInstance.onSubmitted()
-      componentInstance.$scope.$emit(cartUpdatedEvent)
-      componentInstance.changeStep({ newStep: 'thankYou' })
+      this.analyticsFactory.purchase(this.donorDetails, this.cartData, this.orderService.retrieveCoverFeeDecision())
+      this.submittingOrder = false
+      this.onSubmittingOrder({ value: false })
+      this.orderService.clearCardSecurityCodes()
+      this.orderService.clearCoverFees()
+      this.onSubmitted()
+      this.$scope.$emit(cartUpdatedEvent)
+      this.changeStep({ newStep: 'thankYou' })
     },
     error => {
-      componentInstance.analyticsFactory.checkoutFieldError('submitOrder', 'failed')
-      componentInstance.submittingOrder = false
-      componentInstance.onSubmittingOrder({ value: false })
+      this.analyticsFactory.checkoutFieldError('submitOrder', 'failed')
+      this.submittingOrder = false
+      this.onSubmittingOrder({ value: false })
 
-      componentInstance.loadCart()
+      this.loadCart()
 
       if (error.config && error.config.data && error.config.data['security-code']) {
         error.config.data['security-code'] = error.config.data['security-code'].replace(/./g, 'X') // Mask security-code
       }
-      componentInstance.$log.error('Error submitting purchase:', error)
-      componentInstance.onSubmitted()
-      componentInstance.submissionErrorStatus = error.status
-      componentInstance.submissionError = isString(error && error.data) ? (error && error.data).replace(/[:].*$/, '') : 'generic error' // Keep prefix before first colon for easier ng-switch matching
-      componentInstance.$window.scrollTo(0, 0)
+      this.$log.error('Error submitting purchase:', error)
+      this.onSubmitted()
+      this.submissionErrorStatus = error.status
+      this.submissionError = isString(error && error.data) ? (error && error.data).replace(/[:].*$/, '') : 'generic error' // Keep prefix before first colon for easier ng-switch matching
+      this.$window.scrollTo(0, 0)
     })
   }
 
-  handleRecaptchaFailure (componentInstance) {
-    componentInstance.analyticsFactory.checkoutFieldError('submitOrder', 'failed')
-    componentInstance.submittingOrder = false
-    componentInstance.onSubmittingOrder({ value: false })
+  handleRecaptchaFailure () {
+    this.analyticsFactory.checkoutFieldError('submitOrder', 'failed')
+    this.submittingOrder = false
+    this.onSubmittingOrder({ value: false })
 
-    componentInstance.loadCart()
+    this.loadCart()
 
-    componentInstance.onSubmitted()
-    componentInstance.submissionError = 'generic error'
-    componentInstance.$window.scrollTo(0, 0)
+    this.onSubmitted()
+    this.submissionError = 'generic error'
+    this.$window.scrollTo(0, 0)
   }
 }
 

src/app/checkout/step-3/step-3.component.spec.js

@@ -450,17 +450,16 @@ describe('checkout', () => {
 
     describe('handleRecaptchaFailure', () => {
       it('should show an error if recaptcha fails', () => {
-        const componentInstance = self.controller
-        jest.spyOn(componentInstance.analyticsFactory, 'checkoutFieldError').mockImplementation(() => {})
-        self.controller.handleRecaptchaFailure(componentInstance)
-
-        expect(componentInstance.analyticsFactory.checkoutFieldError).toHaveBeenCalledWith('submitOrder', 'failed')
-        expect(componentInstance.submittingOrder).toEqual(false)
-        expect(componentInstance.onSubmittingOrder).toHaveBeenCalledWith({ value: false })
-        expect(componentInstance.loadCart).toHaveBeenCalled()
-        expect(componentInstance.onSubmitted).toHaveBeenCalled()
-        expect(componentInstance.submissionError).toEqual('generic error')
-        expect(componentInstance.$window.scrollTo).toHaveBeenCalledWith(0, 0)
+        jest.spyOn(self.controller.analyticsFactory, 'checkoutFieldError').mockImplementation(() => {})
+        self.controller.handleRecaptchaFailure()
+
+        expect(self.controller.analyticsFactory.checkoutFieldError).toHaveBeenCalledWith('submitOrder', 'failed')
+        expect(self.controller.submittingOrder).toEqual(false)
+        expect(self.controller.onSubmittingOrder).toHaveBeenCalledWith({ value: false })
+        expect(self.controller.loadCart).toHaveBeenCalled()
+        expect(self.controller.onSubmitted).toHaveBeenCalled()
+        expect(self.controller.submissionError).toEqual('generic error')
+        expect(self.controller.$window.scrollTo).toHaveBeenCalledWith(0, 0)
       })
     })
 
@@ -474,7 +473,7 @@ describe('checkout', () => {
       it('should call handleRecaptchaFailure if the recaptchaFailedEvent is received', () => {
         jest.spyOn(self.controller, 'handleRecaptchaFailure').mockImplementation(() => {})
         self.controller.$rootScope.$emit(recaptchaFailedEvent)
-        expect(self.controller.handleRecaptchaFailure).toHaveBeenCalledWith(self.controller)
+        expect(self.controller.handleRecaptchaFailure).toHaveBeenCalled();
       })
     })
   })

src/app/checkout/step-3/step-3.tpl.html

@@ -206,7 +206,7 @@
                            action="$ctrl.isBranded ? 'branded_submit' : 'submit_gift'"
                            on-success="$ctrl.submitOrderInternal"
                            on-failure="$ctrl.handleRecaptchaFailure"
-                           component-instance="$ctrl.selfReference"
+                           component-instance="$ctrl"
                            button-id="'submitOrderButton'"
                            button-type="'submit'"
                            button-classes="'btn btn-primary btn-lg btn-block'"

src/common/components/Recaptcha/Recaptcha.tsx

@@ -22,8 +22,8 @@ const isValidAction = (action: string): boolean => {
 
 interface RecaptchaProps {
   action: string
-  onSuccess: (componentInstance: any) => void
-  onFailure: (componentInstance: any) => void
+  onSuccess: () => void
+  onFailure: () => void
   componentInstance: any
   buttonId: string
   buttonType?: ButtonType
@@ -89,29 +89,29 @@ export const Recaptcha = ({
         if (data?.success === true && isValidAction(data?.action)) {
           if (data.score < 0.5) {
             $log.warn(`Captcha score was below the threshold: ${data.score}`)
-            onFailure.call(componentInstance,componentInstance)
+            onFailure.call(componentInstance)
             return
           }
-          onSuccess.call(componentInstance,componentInstance)
+          onSuccess.call(componentInstance)
           return
         }
         if (data?.success === false && isValidAction(data?.action)) {
           $log.warn('Recaptcha call was unsuccessful, continuing anyway')
-          onSuccess.call(componentInstance,componentInstance)
+          onSuccess.call(componentInstance)
           return
         }
         if (!data) {
           $log.warn('Data was missing!')
-          onSuccess.call(componentInstance,componentInstance)
+          onSuccess.call(componentInstance)
           return
         }
         if (!isValidAction(data?.action)) {
           $log.warn(`Invalid action: ${data?.action}`)
-          onFailure.call(componentInstance,componentInstance)
+          onFailure.call(componentInstance)
         }
       } catch (error) {
         $log.error(`Failed to verify recaptcha, continuing on: ${error}`)
-        onSuccess.call(componentInstance,componentInstance)
+        onSuccess.call(componentInstance)
       }
     })
   }, [grecaptcha, buttonId, ready])

src/common/components/Recaptcha/RecaptchaWrapper.tsx

@@ -13,8 +13,8 @@ declare global {
 
 interface RecaptchaWrapperProps {
   action: string
-  onSuccess: (componentInstance: any) => void
-  onFailure: (componentInstance: any) => void
+  onSuccess: () => void
+  onFailure: () => void
   componentInstance: any
   buttonId: string
   buttonType?: ButtonType