From aab14718a4b17ec4b066229b069657fc5c4a7a10 Mon Sep 17 00:00:00 2001
From: Eric Jinks <3147296+Jinksi@users.noreply.github.com>
Date: Fri, 13 Oct 2023 15:35:44 +1000
Subject: [PATCH 1/9] Disable accept dispute modal close when request in
 progress

---
 .../dispute-details/dispute-awaiting-response-details.tsx      | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/client/payment-details/dispute-details/dispute-awaiting-response-details.tsx b/client/payment-details/dispute-details/dispute-awaiting-response-details.tsx
index 07882870f2b..1c7431bf97b 100644
--- a/client/payment-details/dispute-details/dispute-awaiting-response-details.tsx
+++ b/client/payment-details/dispute-details/dispute-awaiting-response-details.tsx
@@ -171,6 +171,9 @@ const DisputeAwaitingResponseDetails: React.FC< Props > = ( {
 	} = useContext( WCPaySettingsContext );
 
 	const onModalClose = () => {
+		if ( isLoading ) {
+			return;
+		}
 		setModalOpen( false );
 	};
 

From 1d68e48be6f4e36b90f2e33f448af28bd1e9a0b1 Mon Sep 17 00:00:00 2001
From: Eric Jinks <3147296+Jinksi@users.noreply.github.com>
Date: Fri, 13 Oct 2023 15:36:54 +1000
Subject: [PATCH 2/9] Disable accept dispute modal buttons when request in
 progress

---
 .../dispute-details/dispute-awaiting-response-details.tsx       | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/client/payment-details/dispute-details/dispute-awaiting-response-details.tsx b/client/payment-details/dispute-details/dispute-awaiting-response-details.tsx
index 1c7431bf97b..f831694c477 100644
--- a/client/payment-details/dispute-details/dispute-awaiting-response-details.tsx
+++ b/client/payment-details/dispute-details/dispute-awaiting-response-details.tsx
@@ -329,6 +329,7 @@ const DisputeAwaitingResponseDetails: React.FC< Props > = ( {
 									>
 										<Button
 											variant="tertiary"
+											disabled={ isLoading }
 											onClick={ onModalClose }
 										>
 											{ __(
@@ -338,6 +339,7 @@ const DisputeAwaitingResponseDetails: React.FC< Props > = ( {
 										</Button>
 										<Button
 											variant="primary"
+											disabled={ isLoading }
 											data-testid="accept-dispute-button"
 											onClick={ () => {
 												wcpayTracks.recordEvent(

From a141018c5a1741d9ae4277c464305859d70eaecb Mon Sep 17 00:00:00 2001
From: Eric Jinks <3147296+Jinksi@users.noreply.github.com>
Date: Fri, 13 Oct 2023 15:37:25 +1000
Subject: [PATCH 3/9] Show "Accept dispute" button loading animation when in
 progress

---
 .../dispute-details/dispute-awaiting-response-details.tsx        | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client/payment-details/dispute-details/dispute-awaiting-response-details.tsx b/client/payment-details/dispute-details/dispute-awaiting-response-details.tsx
index f831694c477..09fe25a7727 100644
--- a/client/payment-details/dispute-details/dispute-awaiting-response-details.tsx
+++ b/client/payment-details/dispute-details/dispute-awaiting-response-details.tsx
@@ -339,6 +339,7 @@ const DisputeAwaitingResponseDetails: React.FC< Props > = ( {
 										</Button>
 										<Button
 											variant="primary"
+											isBusy={ isLoading }
 											disabled={ isLoading }
 											data-testid="accept-dispute-button"
 											onClick={ () => {

From 28ac2e900972222a0adb881e25d935f61b0743c2 Mon Sep 17 00:00:00 2001
From: Eric Jinks <3147296+Jinksi@users.noreply.github.com>
Date: Fri, 13 Oct 2023 15:38:26 +1000
Subject: [PATCH 4/9] Leave accept dispute modal open when clicking accept or
 issue inquiry refund

---
 .../dispute-details/dispute-awaiting-response-details.tsx       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/payment-details/dispute-details/dispute-awaiting-response-details.tsx b/client/payment-details/dispute-details/dispute-awaiting-response-details.tsx
index 09fe25a7727..7fcfbb946ea 100644
--- a/client/payment-details/dispute-details/dispute-awaiting-response-details.tsx
+++ b/client/payment-details/dispute-details/dispute-awaiting-response-details.tsx
@@ -352,7 +352,7 @@ const DisputeAwaitingResponseDetails: React.FC< Props > = ( {
 															'transaction_details',
 													}
 												);
-												setModalOpen( false );
+
 												/**
 												 * Handle the primary modal action.
 												 * If it's an inquiry, redirect to the order page; otherwise, continue with the default dispute acceptance.

From 20173b5238b780b439bdc67af5d66a13ebfc4411 Mon Sep 17 00:00:00 2001
From: Eric Jinks <3147296+Jinksi@users.noreply.github.com>
Date: Fri, 13 Oct 2023 15:39:51 +1000
Subject: [PATCH 5/9] Add changelog entry

---
 changelog/fix-7473-accept-dispute-loading-state-ui | 4 ++++
 1 file changed, 4 insertions(+)
 create mode 100644 changelog/fix-7473-accept-dispute-loading-state-ui

diff --git a/changelog/fix-7473-accept-dispute-loading-state-ui b/changelog/fix-7473-accept-dispute-loading-state-ui
new file mode 100644
index 00000000000..90961cf931e
--- /dev/null
+++ b/changelog/fix-7473-accept-dispute-loading-state-ui
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Show loading state when accepting a dispute from the transaction details screen.

From 528c7ca90449e30a29676e16e543dc8dc8357937 Mon Sep 17 00:00:00 2001
From: Eric Jinks <3147296+Jinksi@users.noreply.github.com>
Date: Mon, 23 Oct 2023 15:51:30 +1000
Subject: [PATCH 6/9] Fix accept dispute modal max-width

---
 client/payment-details/dispute-details/style.scss | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/client/payment-details/dispute-details/style.scss b/client/payment-details/dispute-details/style.scss
index e51559f4fcd..60773396b54 100644
--- a/client/payment-details/dispute-details/style.scss
+++ b/client/payment-details/dispute-details/style.scss
@@ -104,7 +104,9 @@
 	}
 }
 .transaction-details-dispute-accept-modal {
-	max-width: 600px;
+	&.components-modal__frame {
+		max-width: 600px;
+	}
 
 	.components-modal__content {
 		padding-top: $grid-unit-30;

From af9ec159193df970e9d31f7004ce4418608e2fa2 Mon Sep 17 00:00:00 2001
From: Eric Jinks <3147296+Jinksi@users.noreply.github.com>
Date: Mon, 23 Oct 2023 16:01:19 +1000
Subject: [PATCH 7/9] Use `Accepting` button label when in progress

---
 .../dispute-awaiting-response-details.tsx        | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/client/payment-details/dispute-details/dispute-awaiting-response-details.tsx b/client/payment-details/dispute-details/dispute-awaiting-response-details.tsx
index 7fcfbb946ea..f84191eeab2 100644
--- a/client/payment-details/dispute-details/dispute-awaiting-response-details.tsx
+++ b/client/payment-details/dispute-details/dispute-awaiting-response-details.tsx
@@ -82,10 +82,14 @@ interface AcceptDisputeProps {
 /**
  * Disputes and Inquiries have different text for buttons and the modal.
  * They also have different icons and tracks events. This function returns the correct props.
- *
- * @param dispute
  */
-function getAcceptDisputeProps( dispute: Dispute ): AcceptDisputeProps {
+function getAcceptDisputeProps( {
+	dispute,
+	isLoading,
+}: {
+	dispute: Dispute;
+	isLoading: boolean;
+} ): AcceptDisputeProps {
 	if ( isInquiry( dispute ) ) {
 		return {
 			acceptButtonLabel: __( 'Issue refund', 'woocommerce-payments' ),
@@ -146,7 +150,9 @@ function getAcceptDisputeProps( dispute: Dispute ): AcceptDisputeProps {
 				),
 			},
 		],
-		modalButtonLabel: __( 'Accept dispute', 'woocommerce-payments' ),
+		modalButtonLabel: isLoading
+			? __( 'Accepting…', 'woocommerce-payments' )
+			: __( 'Accept dispute', 'woocommerce-payments' ),
 		modalButtonTracksEvent: wcpayTracks.events.DISPUTE_ACCEPT_CLICK,
 	};
 }
@@ -191,7 +197,7 @@ const DisputeAwaitingResponseDetails: React.FC< Props > = ( {
 		);
 	};
 
-	const disputeAcceptAction = getAcceptDisputeProps( dispute );
+	const disputeAcceptAction = getAcceptDisputeProps( { dispute, isLoading } );
 
 	const challengeButtonDefaultText = isInquiry( dispute )
 		? __( 'Submit evidence', 'woocommerce-payments' )

From b60c8dc6c4fec0a533d7d7b5da8e1804964af734 Mon Sep 17 00:00:00 2001
From: Eric Jinks <3147296+Jinksi@users.noreply.github.com>
Date: Wed, 25 Oct 2023 09:50:53 +1000
Subject: [PATCH 8/9] =?UTF-8?q?Rename=20isLoading=20=E2=86=92=20isDisputeA?=
 =?UTF-8?q?cceptRequestPending?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dispute-awaiting-response-details.tsx     | 36 ++++++++++++-------
 1 file changed, 24 insertions(+), 12 deletions(-)

diff --git a/client/payment-details/dispute-details/dispute-awaiting-response-details.tsx b/client/payment-details/dispute-details/dispute-awaiting-response-details.tsx
index f84191eeab2..0cd33066b47 100644
--- a/client/payment-details/dispute-details/dispute-awaiting-response-details.tsx
+++ b/client/payment-details/dispute-details/dispute-awaiting-response-details.tsx
@@ -85,10 +85,10 @@ interface AcceptDisputeProps {
  */
 function getAcceptDisputeProps( {
 	dispute,
-	isLoading,
+	isDisputeAcceptRequestPending,
 }: {
 	dispute: Dispute;
-	isLoading: boolean;
+	isDisputeAcceptRequestPending: boolean;
 } ): AcceptDisputeProps {
 	if ( isInquiry( dispute ) ) {
 		return {
@@ -150,7 +150,7 @@ function getAcceptDisputeProps( {
 				),
 			},
 		],
-		modalButtonLabel: isLoading
+		modalButtonLabel: isDisputeAcceptRequestPending
 			? __( 'Accepting…', 'woocommerce-payments' )
 			: __( 'Accept dispute', 'woocommerce-payments' ),
 		modalButtonTracksEvent: wcpayTracks.events.DISPUTE_ACCEPT_CLICK,
@@ -163,7 +163,10 @@ const DisputeAwaitingResponseDetails: React.FC< Props > = ( {
 	chargeCreated,
 	orderUrl,
 } ) => {
-	const { doAccept, isLoading } = useDisputeAccept( dispute );
+	const {
+		doAccept,
+		isLoading: isDisputeAcceptRequestPending,
+	} = useDisputeAccept( dispute );
 	const [ isModalOpen, setModalOpen ] = useState( false );
 
 	const now = moment();
@@ -177,7 +180,7 @@ const DisputeAwaitingResponseDetails: React.FC< Props > = ( {
 	} = useContext( WCPaySettingsContext );
 
 	const onModalClose = () => {
-		if ( isLoading ) {
+		if ( isDisputeAcceptRequestPending ) {
 			return;
 		}
 		setModalOpen( false );
@@ -197,7 +200,10 @@ const DisputeAwaitingResponseDetails: React.FC< Props > = ( {
 		);
 	};
 
-	const disputeAcceptAction = getAcceptDisputeProps( { dispute, isLoading } );
+	const disputeAcceptAction = getAcceptDisputeProps( {
+		dispute,
+		isDisputeAcceptRequestPending,
+	} );
 
 	const challengeButtonDefaultText = isInquiry( dispute )
 		? __( 'Submit evidence', 'woocommerce-payments' )
@@ -248,7 +254,7 @@ const DisputeAwaitingResponseDetails: React.FC< Props > = ( {
 							<Link
 								href={
 									// Prevent the user navigating to the challenge screen if the accept request is in progress.
-									isLoading
+									isDisputeAcceptRequestPending
 										? ''
 										: getAdminUrl( {
 												page: 'wc-admin',
@@ -261,7 +267,7 @@ const DisputeAwaitingResponseDetails: React.FC< Props > = ( {
 								<Button
 									variant="primary"
 									data-testid="challenge-dispute-button"
-									disabled={ isLoading }
+									disabled={ isDisputeAcceptRequestPending }
 									onClick={ () => {
 										wcpayTracks.recordEvent(
 											wcpayTracks.events
@@ -284,7 +290,7 @@ const DisputeAwaitingResponseDetails: React.FC< Props > = ( {
 
 							<Button
 								variant="tertiary"
-								disabled={ isLoading }
+								disabled={ isDisputeAcceptRequestPending }
 								data-testid="open-accept-dispute-modal-button"
 								onClick={ () => {
 									wcpayTracks.recordEvent(
@@ -335,7 +341,9 @@ const DisputeAwaitingResponseDetails: React.FC< Props > = ( {
 									>
 										<Button
 											variant="tertiary"
-											disabled={ isLoading }
+											disabled={
+												isDisputeAcceptRequestPending
+											}
 											onClick={ onModalClose }
 										>
 											{ __(
@@ -345,8 +353,12 @@ const DisputeAwaitingResponseDetails: React.FC< Props > = ( {
 										</Button>
 										<Button
 											variant="primary"
-											isBusy={ isLoading }
-											disabled={ isLoading }
+											isBusy={
+												isDisputeAcceptRequestPending
+											}
+											disabled={
+												isDisputeAcceptRequestPending
+											}
 											data-testid="accept-dispute-button"
 											onClick={ () => {
 												wcpayTracks.recordEvent(

From 27e7621a41173b35047296ba7c70a3d3c2377155 Mon Sep 17 00:00:00 2001
From: Eric Jinks <3147296+Jinksi@users.noreply.github.com>
Date: Wed, 25 Oct 2023 10:30:04 +1000
Subject: [PATCH 9/9] =?UTF-8?q?Rename=20onModalClose=20=E2=86=92=20handleM?=
 =?UTF-8?q?odalClose?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dispute-details/dispute-awaiting-response-details.tsx  | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/client/payment-details/dispute-details/dispute-awaiting-response-details.tsx b/client/payment-details/dispute-details/dispute-awaiting-response-details.tsx
index 0cd33066b47..ac90232316d 100644
--- a/client/payment-details/dispute-details/dispute-awaiting-response-details.tsx
+++ b/client/payment-details/dispute-details/dispute-awaiting-response-details.tsx
@@ -179,7 +179,8 @@ const DisputeAwaitingResponseDetails: React.FC< Props > = ( {
 		featureFlags: { isDisputeIssuerEvidenceEnabled },
 	} = useContext( WCPaySettingsContext );
 
-	const onModalClose = () => {
+	const handleModalClose = () => {
+		// Don't allow the user to close the modal if the accept request is in progress.
 		if ( isDisputeAcceptRequestPending ) {
 			return;
 		}
@@ -310,7 +311,7 @@ const DisputeAwaitingResponseDetails: React.FC< Props > = ( {
 							{ isModalOpen && (
 								<Modal
 									title={ disputeAcceptAction.modalTitle }
-									onRequestClose={ onModalClose }
+									onRequestClose={ handleModalClose }
 									className="transaction-details-dispute-accept-modal"
 								>
 									<p>
@@ -344,7 +345,7 @@ const DisputeAwaitingResponseDetails: React.FC< Props > = ( {
 											disabled={
 												isDisputeAcceptRequestPending
 											}
-											onClick={ onModalClose }
+											onClick={ handleModalClose }
 										>
 											{ __(
 												'Cancel',