Merge branch 'develop' into add/7193-dispute-cta-for-inquries

changelog/dev-7258-remove-hooks-from-multi-currency-constructor

@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+
+Move hooks out of MultiCurrency constructor into own init_hooks method.

changelog/dev-7285-test-payment-method-title

@@ -0,0 +1,5 @@
+Significance: patch
+Type: dev
+Comment: Adding a few unit tests
+
+

changelog/feat-handle-server-side-dupe-flag

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Handle server-side feature flag for new UPE type enablement.

changelog/fix-6714-request-button-virtual-variable

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Virtual variable products no longer require shipping details when checking out with Apple Pay and Google Pay

changelog/fix-6891-redirect-dispute-detail-to-transaction

@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+
+This work is part of a UI improvements to increase disputes response that is behind a feature flag. A changelog entry will be added to represent the work as a whole.

changelog/stripe-billing-deactivate-plugin-warning-updates

@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Update the content of modals that are displayed when deactivating the WooPayments or Woo Subscriptions plugins when the store has active Stripe Billing subscriptions.

client/data/disputes/action-types.js

@@ -2,6 +2,7 @@
 
 export default {
 	SET_DISPUTE: 'SET_DISPUTE',
+	SET_ERROR_FOR_DISPUTE: 'SET_ERROR_FOR_DISPUTE',
 	SET_DISPUTES: 'SET_DISPUTES',
 	SET_DISPUTES_SUMMARY: 'SET_DISPUTES_SUMMARY',
 };

client/data/disputes/actions.js

@@ -23,6 +23,15 @@ export function updateDispute( data ) {
 	};
 }
 
+export function updateErrorForDispute( id, data, error ) {
+	return {
+		type: TYPES.SET_ERROR_FOR_DISPUTE,
+		id,
+		data,
+		error,
+	};
+}
+
 export function updateDisputes( query, data ) {
 	return {
 		type: TYPES.SET_DISPUTES,

client/data/disputes/hooks.ts

@@ -15,6 +15,7 @@ import type {
 	CachedDisputes,
 	DisputesSummary,
 } from 'wcpay/types/disputes';
+import type { ApiError } from 'wcpay/types/errors';
 import { STORE_NAME } from '../constants';
 import { disputeAwaitingResponseStatuses } from 'wcpay/disputes/filters/config';
 
@@ -25,16 +26,20 @@ import { disputeAwaitingResponseStatuses } from 'wcpay/disputes/filters/config';
 export const useDispute = (
 	id: string
 ): {
-	dispute: Dispute;
+	dispute?: Dispute;
+	error?: ApiError;
 	isLoading: boolean;
 	doAccept: () => void;
 } => {
-	const { dispute, isLoading } = useSelect(
+	const { dispute, error, isLoading } = useSelect(
 		( select ) => {
-			const { getDispute, isResolving } = select( STORE_NAME );
+			const { getDispute, getDisputeError, isResolving } = select(
+				STORE_NAME
+			);
 
 			return {
-				dispute: <Dispute>getDispute( id ),
+				dispute: <Dispute | undefined>getDispute( id ),
+				error: <ApiError | undefined>getDisputeError( id ),
 				isLoading: <boolean>isResolving( 'getDispute', [ id ] ),
 			};
 		},
@@ -44,7 +49,7 @@ export const useDispute = (
 	const { acceptDispute } = useDispatch( STORE_NAME );
 	const doAccept = () => acceptDispute( id );
 
-	return { dispute, isLoading, doAccept };
+	return { dispute, isLoading, error, doAccept };
 };
 
 /**

client/data/disputes/reducer.js

@@ -15,7 +15,7 @@ const defaultState = { byId: {}, queries: {}, summary: {}, cached: {} };
 
 const receiveDisputes = (
 	state = defaultState,
-	{ type, query = {}, data = [] }
+	{ type, query = {}, data = [], id, error }
 ) => {
 	const index = getResourceId( query );
 
@@ -25,6 +25,12 @@ const receiveDisputes = (
 				...state,
 				byId: { ...state.byId, [ data.id ]: data },
 			};
+		case TYPES.SET_ERROR_FOR_DISPUTE:
+			state = {
+				...state,
+				byId: { ...state.byId, [ id ]: { error } },
+			};
+			break;
 		case TYPES.SET_DISPUTES:
 			return {
 				...state,

client/data/disputes/resolvers.js

@@ -18,6 +18,7 @@ import {
 	updateDispute,
 	updateDisputes,
 	updateDisputesSummary,
+	updateErrorForDispute,
 } from './actions';
 
 const formatQueryFilters = ( query ) => ( {
@@ -61,6 +62,7 @@ export function* getDispute( id ) {
 			'createErrorNotice',
 			__( 'Error retrieving dispute.', 'woocommerce-payments' )
 		);
+		yield updateErrorForDispute( id, undefined, e );
 	}
 }
 

client/data/disputes/selectors.js

@@ -26,6 +26,11 @@ export const getDispute = ( state, id ) => {
 	return disputeById[ id ];
 };
 
+export const getDisputeError = ( state, id ) => {
+	const disputeById = getDisputesState( state ).byId || {};
+	return disputeById[ id ]?.error;
+};
+
 export const getCachedDispute = ( state, id ) => {
 	const disputeById = getDisputesState( state ).cached || {};
 	return disputeById[ id ];

client/data/disputes/test/resolvers.js

@@ -13,6 +13,7 @@ import {
 	updateDispute,
 	updateDisputes,
 	updateDisputesSummary,
+	updateErrorForDispute,
 } from '../actions';
 import { getDispute, getDisputes, getDisputesSummary } from '../resolvers';
 
@@ -68,6 +69,9 @@ describe( 'getDispute resolver', () => {
 					expect.any( String )
 				)
 			);
+			expect( generator.next().value ).toEqual(
+				updateErrorForDispute( 'dp_mock1', undefined, errorResponse )
+			);
 		} );
 	} );
 } );

client/disputes/details/index.tsx

@@ -23,7 +23,7 @@ import { TestModeNotice, topics } from 'components/test-mode-notice';
 import '../style.scss';
 import { Dispute } from 'wcpay/types/disputes';
 
-const DisputeDetails = ( {
+const LegacyDisputeDetails = ( {
 	query: { id: disputeId },
 }: {
 	query: { id: string };
@@ -156,4 +156,4 @@ const DisputeDetails = ( {
 	);
 };
 
-export default DisputeDetails;
+export default LegacyDisputeDetails;

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

@@ -0,0 +1,76 @@
+/**
+ * External dependencies
+ */
+import React, { useEffect } from 'react';
+import { getHistory } from '@woocommerce/navigation';
+import { Spinner, Icon, Flex, FlexItem } from '@wordpress/components';
+
+/**
+ * Internal dependencies.
+ */
+import Page from 'components/page';
+import { useDispute } from 'data/index';
+import { Charge } from 'wcpay/types/charges';
+import { getAdminUrl } from 'wcpay/utils';
+
+import './style.scss';
+import warning from 'wcpay/components/icons/warning';
+
+const RedirectToTransactionDetails: React.FC< { query: { id: string } } > = ( {
+	query: { id: disputeId },
+} ) => {
+	const { dispute, error, isLoading } = useDispute( disputeId );
+
+	useEffect( () => {
+		if ( ! isLoading && dispute?.charge ) {
+			// Dispute type allows charge as nested object or string ID,
+			// so we have to hint we expect a Charge object here.
+			const chargeObject = dispute.charge as Charge;
+			const transactionDetailsUrl = getAdminUrl( {
+				page: 'wc-admin',
+				path: '/payments/transactions/details',
+				id: chargeObject.payment_intent,
+				transaction_id: chargeObject.balance_transaction,
+				type: 'dispute',
+			} );
+			getHistory().replace( transactionDetailsUrl );
+		}
+	}, [ dispute, isLoading ] );
+
+	return (
+		<Page>
+			<Flex
+				direction="column"
+				className="wcpay-dispute-detail-legacy-redirect"
+			>
+				{ error ? (
+					<>
+						<FlexItem>
+							<Icon icon={ warning } type="warning" size={ 32 } />
+						</FlexItem>
+						<FlexItem>
+							<div>
+								<b>Error retrieving dispute</b>
+							</div>
+							<div>Please check your network and try again.</div>
+						</FlexItem>
+					</>
+				) : (
+					<>
+						<FlexItem>
+							<Spinner />
+						</FlexItem>
+						<FlexItem>
+							<div>
+								<b>One moment please</b>
+							</div>
+							<div>Redirecting to payment details…</div>
+						</FlexItem>
+					</>
+				) }
+			</Flex>
+		</Page>
+	);
+};
+
+export default RedirectToTransactionDetails;

client/disputes/redirect-to-transaction-details/style.scss

@@ -0,0 +1,9 @@
+.wcpay-dispute-detail-legacy-redirect {
+	// Shift the redirect spinner to approx center of viewport.
+	top: 10vh;
+	position: relative;
+
+	.components-flex-item {
+		text-align: center;
+	}
+}

client/index.js

@@ -20,7 +20,8 @@ import DepositDetailsPage from 'deposits/details';
 import TransactionsPage from 'transactions';
 import PaymentDetailsPage from 'payment-details';
 import DisputesPage from 'disputes';
-import DisputeDetailsPage from 'disputes/details';
+import LegacyDisputeDetailsPage 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,8 +151,15 @@ addFilter(
 			},
 			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( {
-			container: DisputeDetailsPage,
+			container: isDisputeOnTransactionPageEnabled
+				? RedirectToTransactionDetails
+				: LegacyDisputeDetailsPage,
 			path: '/payments/disputes/details',
 			wpOpenMenu: menuID,
 			breadcrumbs: [
@@ -163,11 +171,14 @@ addFilter(
 				__( 'Dispute details', 'woocommerce-payments' ),
 			],
 			navArgs: {
-				id: 'wc-payments-disputes-details',
+				id: isDisputeOnTransactionPageEnabled
+					? 'wc-payments-disputes-details-legacy-redirect'
+					: 'wc-payments-disputes-details',
 				parentPath: '/payments/disputes',
 			},
 			capability: 'manage_woocommerce',
 		} );
+
 		pages.push( {
 			container: DisputeEvidencePage,
 			path: '/payments/disputes/challenge',