add a new page component for redirecting disputes => details:

client/disputes/details/index.tsx

@@ -27,11 +27,19 @@ const DisputeDetails = ( {
 	query: { id: disputeId },
 }: {
 	query: { id: string };
-} ): JSX.Element => {
+} ): JSX.Element | null => {
 	const { dispute, isLoading, doAccept } = useDispute( disputeId );
 	const disputeObject = dispute || ( {} as Dispute );
 	const disputeIsAvailable = ! isLoading && dispute && disputeObject.id;
 
+	// Bail early and return nothing if the feature flag is not enabled.
+	// Here as a hint/reminder to delete this file when the feature flag is removed.
+	const isDisputeOnTransactionPageEnabled =
+		wcpaySettings.featureFlags.isDisputeOnTransactionPageEnabled;
+	if ( isDisputeOnTransactionPageEnabled ) {
+		return null;
+	}
+
 	const actions = disputeIsAvailable && (
 		<Actions
 			id={ disputeObject.id }

client/disputes/redirect-to-transaction-details.tsx

@@ -0,0 +1,58 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import { getHistory } from '@woocommerce/navigation';
+import { Notice, Spinner, Flex, FlexItem } from '@wordpress/components';
+
+/**
+ * Internal dependencies.
+ */
+import Page from 'components/page';
+import { useDispute } from 'data/index';
+import { Charge } from 'wcpay/types/charges';
+import { Dispute } from 'wcpay/types/disputes';
+import { getAdminUrl } from 'wcpay/utils';
+
+const RedirectToTransactionDetails = ( {
+	query: { id: disputeId },
+}: {
+	query: { id: string };
+} ): JSX.Element | null => {
+	const { dispute, isLoading } = useDispute( disputeId );
+	const disputeObject = dispute || ( {} as Dispute );
+	const disputeIsAvailable = ! isLoading && dispute && disputeObject.id;
+	// Dispute type allows charge as nested object or string ID,
+	// so we have to hint we expect a Charge object here.
+	const chargeObject = disputeObject.charge as Charge;
+
+	let transactionDetailsUrl = '';
+	if ( disputeIsAvailable ) {
+		transactionDetailsUrl = getAdminUrl( {
+			page: 'wc-admin',
+			path: '/payments/transactions/details',
+			id: chargeObject.payment_intent,
+			transaction_id: chargeObject.balance_transaction,
+			type: 'dispute',
+		} );
+		getHistory().replace( transactionDetailsUrl );
+		return null;
+	}
+
+	return (
+		<Page>
+			<Notice status="info" isDismissible={ false }>
+				<Flex justify="left">
+					<FlexItem>
+						<Spinner />
+					</FlexItem>
+					<FlexItem>
+						<span>Redirecting to payment details…</span>
+					</FlexItem>
+				</Flex>
+			</Notice>
+		</Page>
+	);
+};
+
+export default RedirectToTransactionDetails;

client/index.js

@@ -21,6 +21,7 @@ import TransactionsPage from 'transactions';
 import PaymentDetailsPage from 'payment-details';
 import DisputesPage from 'disputes';
 import DisputeDetailsPage from 'disputes/details';
+import RedirectToTransactionDetails from 'disputes/redirect-to-transaction-details';
 import DisputeEvidencePage from 'disputes/evidence';
 import AdditionalMethodsPage from 'wcpay/additional-methods-setup';
 import MultiCurrencySetupPage from 'wcpay/multi-currency-setup';
@@ -150,24 +151,51 @@ addFilter(
 			},
 			capability: 'manage_woocommerce',
 		} );
-		pages.push( {
-			container: DisputeDetailsPage,
-			path: '/payments/disputes/details',
-			wpOpenMenu: menuID,
-			breadcrumbs: [
-				rootLink,
-				[
-					'/payments/disputes',
-					__( 'Disputes', 'woocommerce-payments' ),
-				],
-				__( 'Dispute details', 'woocommerce-payments' ),
-			],
-			navArgs: {
-				id: 'wc-payments-disputes-details',
-				parentPath: '/payments/disputes',
-			},
-			capability: 'manage_woocommerce',
-		} );
+
+		// If disputes on transaction page feature is enabled, set up a soft
+		// redirect component; otherwise register the (legacy) dispute details page.
+		const isDisputeOnTransactionPageEnabled =
+			window.wcpaySettings.featureFlags.isDisputeOnTransactionPageEnabled;
+		pages.push(
+			isDisputeOnTransactionPageEnabled
+				? {
+						container: RedirectToTransactionDetails,
+						path: '/payments/disputes/details',
+						wpOpenMenu: menuID,
+						breadcrumbs: [
+							rootLink,
+							[
+								'/payments/disputes',
+								__( 'Disputes', 'woocommerce-payments' ),
+							],
+							__( 'Dispute details', 'woocommerce-payments' ),
+						],
+						navArgs: {
+							id: 'wc-payments-disputes-details-legacy-redirect',
+							parentPath: '/payments/disputes',
+						},
+						capability: 'manage_woocommerce',
+				  }
+				: {
+						container: DisputeDetailsPage,
+						path: '/payments/disputes/details',
+						wpOpenMenu: menuID,
+						breadcrumbs: [
+							rootLink,
+							[
+								'/payments/disputes',
+								__( 'Disputes', 'woocommerce-payments' ),
+							],
+							__( 'Dispute details', 'woocommerce-payments' ),
+						],
+						navArgs: {
+							id: 'wc-payments-disputes-details',
+							parentPath: '/payments/disputes',
+						},
+						capability: 'manage_woocommerce',
+				  }
+		);
+
 		pages.push( {
 			container: DisputeEvidencePage,
 			path: '/payments/disputes/challenge',