From 027d771c6736cd3f930e3bb53f35af2cfed47f47 Mon Sep 17 00:00:00 2001
From: Christopher Bisom <cbisom@flexion.us>
Date: Tue, 20 Aug 2024 17:26:30 -0400
Subject: [PATCH] 10353-bug: fix condition to re-enable button

---
 .../petitioner-account-creation.cy.ts            |  2 +-
 .../CreatePetitionerAccountForm.tsx              | 16 ++++++++++++----
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/cypress/deployed-and-local/integration/authentication/petitioner-account-creation.cy.ts b/cypress/deployed-and-local/integration/authentication/petitioner-account-creation.cy.ts
index ab2a45aa443..b94df3a7e23 100644
--- a/cypress/deployed-and-local/integration/authentication/petitioner-account-creation.cy.ts
+++ b/cypress/deployed-and-local/integration/authentication/petitioner-account-creation.cy.ts
@@ -116,7 +116,7 @@ describe('Petitioner Account Creation', () => {
       cy.get('@accountCreationRequest.all').should('have.length', 1);
     });
 
-    it('should create an account and verify it using the verification link, then login and create an eletronic case', () => {
+    it('should create an account and verify it using the verification link, then login and create an electronic case', () => {
       const TEST_EMAIL = `cypress_test_account+success_${GUID}@example.com`;
       createAPetitioner({
         email: TEST_EMAIL,
diff --git a/web-client/src/views/CreatePetitionerAccount/CreatePetitionerAccountForm.tsx b/web-client/src/views/CreatePetitionerAccount/CreatePetitionerAccountForm.tsx
index 941703125ee..b9fccff7117 100644
--- a/web-client/src/views/CreatePetitionerAccount/CreatePetitionerAccountForm.tsx
+++ b/web-client/src/views/CreatePetitionerAccount/CreatePetitionerAccountForm.tsx
@@ -3,10 +3,12 @@ import { RequirementsText } from '@web-client/views/CreatePetitionerAccount/Requ
 import { connect } from '@web-client/presenter/shared.cerebral';
 import { debounce } from 'lodash';
 import { sequences, state } from '@web-client/presenter/app.cerebral';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 export const CreatePetitionerAccountForm = connect(
   {
+    alertError: state.alertError,
+    alertWarning: state.alertWarning,
     confirmPassword: state.form.confirmPassword,
     createAccountHelper: state.createAccountHelper,
     navigateToLoginSequence: sequences.navigateToLoginSequence,
@@ -19,6 +21,8 @@ export const CreatePetitionerAccountForm = connect(
     updateFormValueSequence: sequences.updateFormValueSequence,
   },
   ({
+    alertError,
+    alertWarning,
     confirmPassword,
     createAccountHelper,
     navigateToLoginSequence,
@@ -33,9 +37,15 @@ export const CreatePetitionerAccountForm = connect(
     const [inFocusName, setInFocusName] = useState(true);
     const [submitDisabled, setSubmitDisabled] = useState(false);
 
+    // Re-enabled submit button if submission was unsuccessful
+    useEffect(() => {
+      if (alertError || alertWarning) {
+        setSubmitDisabled(false);
+      }
+    }, [alertError, alertWarning]);
+
     const submitFunction = debounce(() => {
       submitCreatePetitionerAccountFormSequence();
-      setSubmitDisabled(false);
     }, 500);
 
     return (
@@ -234,5 +244,3 @@ export const CreatePetitionerAccountForm = connect(
     );
   },
 );
-
-CreatePetitionerAccountForm.displayName = 'CreatePetitionerAccountForm';