reset captcha

studio/components/interfaces/Billing/AddNewPaymentMethodModal/AddNewPaymentMethodModal.tsx

@@ -46,6 +46,11 @@ const AddNewPaymentMethodModal: FC<Props> = ({ visible, returnUrl, onCancel }) =
     setCaptchaLoaded(true)
   }
 
+  const resetCaptcha = () => {
+    setCaptchaToken(null)
+    captchaRef.current?.resetCaptcha()
+  }
+
   const setupIntent = async (hcaptchaToken: string | undefined) => {
     setIntent(undefined)
 
@@ -54,10 +59,9 @@ const AddNewPaymentMethodModal: FC<Props> = ({ visible, returnUrl, onCancel }) =
       hcaptchaToken,
     })
 
-    if (intent.error) {
-      setCaptchaToken(null)
-      captchaRef.current?.resetCaptcha()
+    resetCaptcha()
 
+    if (intent.error) {
       return ui.setNotification({
         category: 'error',
         message: intent.error.message,
@@ -65,7 +69,7 @@ const AddNewPaymentMethodModal: FC<Props> = ({ visible, returnUrl, onCancel }) =
       })
     }
 
-    setIntent(intent)
+    captchaRef.current?.resetCaptcha()
   }
 
   const options = {

studio/components/interfaces/Billing/EnterpriseUpdate.tsx

@@ -132,6 +132,11 @@ const EnterpriseUpdate: FC<Props> = ({
     setIsRefreshingPreview(false)
   }
 
+  const resetCaptcha = () => {
+    setCaptchaToken(null)
+    captchaRef.current?.resetCaptcha()
+  }
+
   // Last todo to support enterprise billing on dashboard + E2E test
   const onConfirmPayment = async () => {
     let token = captchaToken
@@ -155,9 +160,9 @@ const EnterpriseUpdate: FC<Props> = ({
 
     setIsSubmitting(true)
     const res = await patch(`${API_URL}/projects/${projectRef}/subscription`, payload)
+    resetCaptcha()
+
     if (res?.error) {
-      setCaptchaToken(null)
-      captchaRef.current?.resetCaptcha()
       ui.setNotification({
         category: 'error',
         message: `Failed to update subscription: ${res?.error?.message}`,

studio/components/interfaces/Billing/ExitSurvey/ExitSurvey.tsx

@@ -100,6 +100,11 @@ const ExitSurvey: FC<Props> = ({ freeTier, subscription, onSelectBack }) => {
     }
   }
 
+  const resetCaptcha = () => {
+    setCaptchaToken(null)
+    captchaRef.current?.resetCaptcha()
+  }
+
   const downgradeProject = async (values?: any) => {
     const downgradeMessage = values?.message ?? message
 
@@ -123,9 +128,9 @@ const ExitSurvey: FC<Props> = ({ freeTier, subscription, onSelectBack }) => {
         hcaptchaToken: token ?? undefined,
       })
 
+      resetCaptcha()
+
       if (res?.error) {
-        setCaptchaToken(null)
-        captchaRef.current?.resetCaptcha()
         return ui.setNotification({
           category: 'error',
           message: `Failed to cancel subscription: ${res?.error?.message}`,

studio/components/interfaces/Billing/ProUpgrade.tsx

@@ -153,6 +153,11 @@ const ProUpgrade: FC<Props> = ({
     setIsRefreshingPreview(false)
   }
 
+  const resetCaptcha = () => {
+    setCaptchaToken(null)
+    captchaRef.current?.resetCaptcha()
+  }
+
   const onConfirmPayment = async () => {
     let token = captchaToken
     if (!token) {
@@ -166,18 +171,19 @@ const ProUpgrade: FC<Props> = ({
       nonChangeableAddons,
       selectedPaymentMethodId,
       projectRegion,
-      token ?? undefined,
+      token ?? undefined
     )
 
     setIsSubmitting(true)
     const res = await patch(`${API_URL}/projects/${projectRef}/subscription`, payload)
+
+    resetCaptcha()
+
     if (res?.error) {
       ui.setNotification({
         category: 'error',
         message: `Failed to update subscription: ${res?.error?.message}`,
       })
-      setCaptchaToken(null)
-      captchaRef.current?.resetCaptcha()
     } else {
       if (isChangingComputeSize) {
         app.onProjectStatusUpdated(projectId, PROJECT_STATUS.RESTORING)