From 374cce97fb5df01a8d04016bbeffe378fd0ffa67 Mon Sep 17 00:00:00 2001
From: Caleb Alldrin <caleb.alldrin@cru.org>
Date: Fri, 22 Nov 2024 10:24:52 -0800
Subject: [PATCH] Add $apply() instead of $digest()

---
 .../branded-checkout-step-1.component.js      |  3 ---
 .../components/Recaptcha/RecaptchaWrapper.tsx | 23 +++++++++++++++----
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/src/app/branded/step-1/branded-checkout-step-1.component.js b/src/app/branded/step-1/branded-checkout-step-1.component.js
index 8870b71d4..8d3a2a5cc 100644
--- a/src/app/branded/step-1/branded-checkout-step-1.component.js
+++ b/src/app/branded/step-1/branded-checkout-step-1.component.js
@@ -92,9 +92,6 @@ class BrandedCheckoutStep1Controller {
   submit () {
     this.resetSubmission()
     this.submitted = true
-    if (this.useV3 === 'true') {
-      this.$scope.$digest()
-    }
   }
 
   resetSubmission () {
diff --git a/src/common/components/Recaptcha/RecaptchaWrapper.tsx b/src/common/components/Recaptcha/RecaptchaWrapper.tsx
index 3e0dbdaa8..2d42ad35c 100644
--- a/src/common/components/Recaptcha/RecaptchaWrapper.tsx
+++ b/src/common/components/Recaptcha/RecaptchaWrapper.tsx
@@ -24,6 +24,7 @@ interface RecaptchaWrapperProps {
   envService: any
   $translate: any
   $log: any
+  $rootScope: any
 }
 
 export const RecaptchaWrapper = ({
@@ -38,7 +39,8 @@ export const RecaptchaWrapper = ({
   buttonLabel,
   envService,
   $translate,
-  $log
+  $log,
+  $rootScope
 }: RecaptchaWrapperProps): JSX.Element => {
   const recaptchaKey = envService.read('recaptchaKey')
   const apiUrl = envService.read('apiUrl')
@@ -50,10 +52,23 @@ export const RecaptchaWrapper = ({
     document.body.appendChild(script)
   }, [])
 
+  // Because The onSuccess and onFailure callbacks are called by a React component, AngularJS doesn't know that an event happened and doesn't know it needs to rerender. We have to use $apply to ensure that AngularJS rerenders after the event handlers return.
+  const onSuccessWrapped = (()=>{
+    $rootScope.$apply(()=> {
+      onSuccess()
+    })
+  })
+
+  const onFailureWrapped = (()=>{
+    $rootScope.$apply(()=> {
+      onFailure()
+    })
+  })
+
   return (
       <Recaptcha action={action}
-                 onSuccess={onSuccess}
-                 onFailure={onFailure}
+                 onSuccess={onSuccessWrapped}
+                 onFailure={onFailureWrapped}
                  componentInstance={componentInstance}
                  buttonId={buttonId}
                  buttonType={buttonType}
@@ -84,4 +99,4 @@ export default angular
         'buttonDisabled',
         'buttonLabel'
       ],
-      ['envService', '$translate', '$log']))
+      ['envService', '$translate', '$log', '$rootScope']))