From ad7111c4a692723d4fdaa99e647b9d134fb9a370 Mon Sep 17 00:00:00 2001
From: James Allan <james.allan@automattic.com>
Date: Thu, 21 Dec 2023 11:12:39 +1000
Subject: [PATCH 1/4] Updates WooPayments with the latest from Subscriptions
 Core library (6.6.0) (#7934)

Co-authored-by: Matt Allan <matt.allan@automattic.com>
---
 changelog/subscriptions-6.6.0-1      |  4 ++++
 changelog/subscriptions-6.6.0-2      |  4 ++++
 changelog/subscriptions-core-6.6.0   |  4 ++++
 changelog/subscriptions-core-6.6.0-3 |  4 ++++
 changelog/subscriptions-core-6.6.0-4 |  4 ++++
 changelog/subscriptions-core-6.6.0-5 |  4 ++++
 changelog/subscriptions-core-6.6.0-6 |  4 ++++
 changelog/subscriptions-core-6.6.0-7 |  4 ++++
 changelog/subscriptions-core-6.6.0-8 |  4 ++++
 composer.json                        |  2 +-
 composer.lock                        | 16 ++++++++--------
 11 files changed, 45 insertions(+), 9 deletions(-)
 create mode 100644 changelog/subscriptions-6.6.0-1
 create mode 100644 changelog/subscriptions-6.6.0-2
 create mode 100644 changelog/subscriptions-core-6.6.0
 create mode 100644 changelog/subscriptions-core-6.6.0-3
 create mode 100644 changelog/subscriptions-core-6.6.0-4
 create mode 100644 changelog/subscriptions-core-6.6.0-5
 create mode 100644 changelog/subscriptions-core-6.6.0-6
 create mode 100644 changelog/subscriptions-core-6.6.0-7
 create mode 100644 changelog/subscriptions-core-6.6.0-8

diff --git a/changelog/subscriptions-6.6.0-1 b/changelog/subscriptions-6.6.0-1
new file mode 100644
index 00000000000..9c70ea3d4ce
--- /dev/null
+++ b/changelog/subscriptions-6.6.0-1
@@ -0,0 +1,4 @@
+Significance: minor
+Type: dev
+
+Deprecate the WC_Subscriptions_Synchroniser::add_to_recurring_cart_key(). Use WC_Subscriptions_Synchroniser::add_to_recurring_product_grouping_key() instead.
diff --git a/changelog/subscriptions-6.6.0-2 b/changelog/subscriptions-6.6.0-2
new file mode 100644
index 00000000000..98a24e2a8d8
--- /dev/null
+++ b/changelog/subscriptions-6.6.0-2
@@ -0,0 +1,4 @@
+Significance: minor
+Type: dev
+
+Introduce a new wcs_get_subscription_grouping_key() function to generate a unique key for a subscription based on its billing schedule. This function uses the existing recurring cart key concept.
diff --git a/changelog/subscriptions-core-6.6.0 b/changelog/subscriptions-core-6.6.0
new file mode 100644
index 00000000000..192de7697f3
--- /dev/null
+++ b/changelog/subscriptions-core-6.6.0
@@ -0,0 +1,4 @@
+Significance: minor
+Type: dev
+
+Updated subscriptions-core to version 6.6.0
diff --git a/changelog/subscriptions-core-6.6.0-3 b/changelog/subscriptions-core-6.6.0-3
new file mode 100644
index 00000000000..39e3728713e
--- /dev/null
+++ b/changelog/subscriptions-core-6.6.0-3
@@ -0,0 +1,4 @@
+Significance: minor
+Type: fix
+
+Fetch and update the `_cancelled_email_sent` meta in a HPOS compatibile way.
diff --git a/changelog/subscriptions-core-6.6.0-4 b/changelog/subscriptions-core-6.6.0-4
new file mode 100644
index 00000000000..adf5488ac54
--- /dev/null
+++ b/changelog/subscriptions-core-6.6.0-4
@@ -0,0 +1,4 @@
+Significance: minor
+Type: fix
+
+Ensure proper backfilling of subscription metadata (i.e. dates and cache) to the postmeta table when HPOS is enabled and compatibility mode (data syncing) is turned on.
diff --git a/changelog/subscriptions-core-6.6.0-5 b/changelog/subscriptions-core-6.6.0-5
new file mode 100644
index 00000000000..fc15acdb576
--- /dev/null
+++ b/changelog/subscriptions-core-6.6.0-5
@@ -0,0 +1,4 @@
+Significance: minor
+Type: fix
+
+Resolved an issue that would cause undefined $current_page, $max_num_pages, and $paginate variable errors when viewing a page with the subscriptions-shortcode.
diff --git a/changelog/subscriptions-core-6.6.0-6 b/changelog/subscriptions-core-6.6.0-6
new file mode 100644
index 00000000000..df965094736
--- /dev/null
+++ b/changelog/subscriptions-core-6.6.0-6
@@ -0,0 +1,4 @@
+Significance: minor
+Type: fix
+
+When HPOS is enabled and data compatibility mode is turned on, make sure subscription date changes made to postmeta are synced to orders_meta table.
diff --git a/changelog/subscriptions-core-6.6.0-7 b/changelog/subscriptions-core-6.6.0-7
new file mode 100644
index 00000000000..96c2cae1f2c
--- /dev/null
+++ b/changelog/subscriptions-core-6.6.0-7
@@ -0,0 +1,4 @@
+Significance: minor
+Type: fix
+
+Prevents a PHP fatal error that occurs when the cart contains a renewal order item that no longer exists.
diff --git a/changelog/subscriptions-core-6.6.0-8 b/changelog/subscriptions-core-6.6.0-8
new file mode 100644
index 00000000000..a2ffa0feb0c
--- /dev/null
+++ b/changelog/subscriptions-core-6.6.0-8
@@ -0,0 +1,4 @@
+Significance: minor
+Type: fix
+
+When using the checkout block to pay for renewal orders, ensure the order's cart hash is updated to make sure the existing order can be used.
diff --git a/composer.json b/composer.json
index 01444821e33..0b2890b6228 100644
--- a/composer.json
+++ b/composer.json
@@ -27,7 +27,7 @@
         "automattic/jetpack-autoloader": "2.11.18",
         "automattic/jetpack-identity-crisis": "0.8.43",
         "automattic/jetpack-sync": "1.47.7",
-        "woocommerce/subscriptions-core": "6.4.0"
+        "woocommerce/subscriptions-core": "6.6.0"
     },
     "require-dev": {
         "composer/installers": "1.10.0",
diff --git a/composer.lock b/composer.lock
index 54c7ccceb4e..686f8f9aa92 100644
--- a/composer.lock
+++ b/composer.lock
@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "9dfc107cbaa90afb69bed66432c8cf70",
+    "content-hash": "2f207d4579d3db832302089bb6f3a11f",
     "packages": [
         {
             "name": "automattic/jetpack-a8c-mc-stats",
@@ -940,16 +940,16 @@
         },
         {
             "name": "woocommerce/subscriptions-core",
-            "version": "6.4.0",
+            "version": "6.6.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/Automattic/woocommerce-subscriptions-core.git",
-                "reference": "a94c9aab6d47f32461974ed09a4d3cad590f25b0"
+                "reference": "5abcf9aac4e53ad9bdcf3752a34a04ae42261bac"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/Automattic/woocommerce-subscriptions-core/zipball/a94c9aab6d47f32461974ed09a4d3cad590f25b0",
-                "reference": "a94c9aab6d47f32461974ed09a4d3cad590f25b0",
+                "url": "https://api.github.com/repos/Automattic/woocommerce-subscriptions-core/zipball/5abcf9aac4e53ad9bdcf3752a34a04ae42261bac",
+                "reference": "5abcf9aac4e53ad9bdcf3752a34a04ae42261bac",
                 "shasum": ""
             },
             "require": {
@@ -960,7 +960,7 @@
                 "dave-liddament/sarb": "^1.1",
                 "phpunit/phpunit": "9.5.14",
                 "woocommerce/woocommerce-sniffs": "0.1.0",
-                "yoast/phpunit-polyfills": "1.0.3"
+                "yoast/phpunit-polyfills": "1.1.0"
             },
             "type": "wordpress-plugin",
             "extra": {
@@ -990,10 +990,10 @@
             "description": "Sell products and services with recurring payments in your WooCommerce Store.",
             "homepage": "https://github.com/Automattic/woocommerce-subscriptions-core",
             "support": {
-                "source": "https://github.com/Automattic/woocommerce-subscriptions-core/tree/6.4.0",
+                "source": "https://github.com/Automattic/woocommerce-subscriptions-core/tree/6.6.0",
                 "issues": "https://github.com/Automattic/woocommerce-subscriptions-core/issues"
             },
-            "time": "2023-10-18T03:32:50+00:00"
+            "time": "2023-12-20T07:19:09+00:00"
         }
     ],
     "packages-dev": [

From f73f0df93f336101ffe995ec47849c0a8a60b589 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?K=C4=81rlis=20Janisels?= <karlisjanisels@gmail.com>
Date: Thu, 21 Dec 2023 09:09:35 +0200
Subject: [PATCH 2/4] Refund transaction from details page (#7742)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Kārlis Janisels <karlisjanisels@Karliss-MacBook-Pro.local>
Co-authored-by: Vladimir Reznichenko <kalessil@gmail.com>
Co-authored-by: Miguel Gasca <miguel.gasca@automattic.com>
---
 ...-7248-refund-transaction-from-details-page |   4 +
 client/data/payment-intents/actions.ts        |  63 +++++
 client/data/payment-intents/hooks.ts          |  20 +-
 client/data/payment-intents/test/hooks.ts     |  13 ++
 .../test/__snapshots__/index.test.tsx.snap    |   3 +
 client/payment-details/summary/index.tsx      | 116 +++++++++-
 .../summary/missing-order-notice/index.tsx    | 136 +++--------
 .../test/__snapshots__/index.test.tsx.snap    |  34 +++
 .../missing-order-notice/test/index.test.tsx  |  39 ++++
 .../summary/refund-modal/index.tsx            | 127 ++++++++++
 .../test/__snapshots__/index.test.tsx.snap    |   7 +
 .../summary/refund-modal/test/index.test.tsx  |  92 ++++++++
 client/payment-details/summary/style.scss     |  10 +
 .../test/__snapshots__/index.test.tsx.snap    | 218 +++++++++++++++++-
 .../test/__snapshots__/index.test.tsx.snap    |  74 ++++++
 client/payment-details/types.ts               |   1 +
 client/settings/wcpay-settings-context.js     |   1 -
 ...ss-wc-rest-payments-refunds-controller.php |  80 +++++++
 includes/class-wc-payment-gateway-wcpay.php   |   4 +
 includes/class-wc-payments.php                |   4 +
 .../server/request/class-refund-charge.php    |  27 +++
 ...ss-wc-rest-payments-refunds-controller.php |  73 ++++++
 tests/unit/bootstrap.php                      |   1 +
 23 files changed, 1023 insertions(+), 124 deletions(-)
 create mode 100644 changelog/add-7248-refund-transaction-from-details-page
 create mode 100644 client/payment-details/summary/missing-order-notice/test/__snapshots__/index.test.tsx.snap
 create mode 100644 client/payment-details/summary/missing-order-notice/test/index.test.tsx
 create mode 100644 client/payment-details/summary/refund-modal/index.tsx
 create mode 100644 client/payment-details/summary/refund-modal/test/__snapshots__/index.test.tsx.snap
 create mode 100644 client/payment-details/summary/refund-modal/test/index.test.tsx
 create mode 100644 includes/admin/class-wc-rest-payments-refunds-controller.php
 create mode 100644 tests/unit/admin/test-class-wc-rest-payments-refunds-controller.php

diff --git a/changelog/add-7248-refund-transaction-from-details-page b/changelog/add-7248-refund-transaction-from-details-page
new file mode 100644
index 00000000000..bfd753860e8
--- /dev/null
+++ b/changelog/add-7248-refund-transaction-from-details-page
@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Add refund controls to transaction details view
diff --git a/client/data/payment-intents/actions.ts b/client/data/payment-intents/actions.ts
index ea74c5036bb..ceae8ef6efa 100644
--- a/client/data/payment-intents/actions.ts
+++ b/client/data/payment-intents/actions.ts
@@ -1,5 +1,12 @@
 /** @format */
 
+/**
+ * External dependencies
+ */
+import { apiFetch } from '@wordpress/data-controls';
+import { controls } from '@wordpress/data';
+import { __, sprintf } from '@wordpress/i18n';
+
 /**
  * Internal Dependencies
  */
@@ -10,6 +17,8 @@ import {
 	UpdateErrorForPaymentIntentAction,
 	UpdatePaymentIntentAction,
 } from './types';
+import { Charge } from 'wcpay/types/charges';
+import { STORE_NAME } from 'wcpay/data/constants';
 
 export function updatePaymentIntent(
 	id: string,
@@ -32,3 +41,57 @@ export function updateErrorForPaymentIntent(
 		error,
 	};
 }
+
+export function* refundCharge(
+	charge: Charge,
+	reason: string | null
+): Generator {
+	const paymentIntentId = charge.payment_intent;
+	try {
+		yield apiFetch( {
+			path: `/wc/v3/payments/refund/`,
+			method: 'post',
+			data: {
+				charge_id: charge.id,
+				amount: charge.amount,
+				reason: reason,
+				order_id: charge?.order?.number,
+			},
+		} );
+
+		yield controls.dispatch(
+			STORE_NAME,
+			'invalidateResolutionForStoreSelector',
+			'getTimeline'
+		);
+
+		yield controls.dispatch(
+			STORE_NAME,
+			'invalidateResolutionForStoreSelector',
+			'getPaymentIntent'
+		);
+
+		yield controls.dispatch(
+			'core/notices',
+			'createSuccessNotice',
+			sprintf(
+				// translators: %s payment intent id
+				__( 'Refunded payment #%s.', 'woocommerce-payments' ),
+				paymentIntentId
+			)
+		);
+	} catch ( error ) {
+		yield controls.dispatch(
+			'core/notices',
+			'createErrorNotice',
+			sprintf(
+				// translators: %s payment intent id
+				__(
+					'There has been an error refunding the payment #%s. Please try again later.',
+					'woocommerce-payments'
+				),
+				paymentIntentId
+			)
+		);
+	}
+}
diff --git a/client/data/payment-intents/hooks.ts b/client/data/payment-intents/hooks.ts
index 61f51442fd1..330365219ad 100644
--- a/client/data/payment-intents/hooks.ts
+++ b/client/data/payment-intents/hooks.ts
@@ -2,19 +2,20 @@
 /**
  * External dependencies
  */
-import { useSelect } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { PaymentIntent } from '../../types/payment-intents';
 import { getChargeData } from '../charges';
 import { PaymentChargeDetailsResponse } from '../../payment-details/types';
 import { STORE_NAME } from '../constants';
+import { Charge } from 'wcpay/types/charges';
 
 export const getIsChargeId = ( id: string ): boolean =>
 	-1 !== id.indexOf( 'ch_' ) || -1 !== id.indexOf( 'py_' );
 
 export const usePaymentIntentWithChargeFallback = (
 	id: string
-): PaymentChargeDetailsResponse =>
-	useSelect(
+): PaymentChargeDetailsResponse => {
+	const { data, error, isLoading } = useSelect(
 		( select ) => {
 			const selectors = select( STORE_NAME );
 			const isChargeId = getIsChargeId( id );
@@ -52,3 +53,16 @@ export const usePaymentIntentWithChargeFallback = (
 		},
 		[ id ]
 	);
+
+	const { refundCharge } = useDispatch( STORE_NAME );
+
+	const doRefund = ( charge: Charge, reason: string | null ) =>
+		refundCharge( charge, reason );
+
+	return {
+		data,
+		error,
+		isLoading,
+		doRefund,
+	};
+};
diff --git a/client/data/payment-intents/test/hooks.ts b/client/data/payment-intents/test/hooks.ts
index 370816ac23a..e2631e291f2 100644
--- a/client/data/payment-intents/test/hooks.ts
+++ b/client/data/payment-intents/test/hooks.ts
@@ -110,6 +110,16 @@ describe( 'Payment Intent hooks', () => {
 		( useSelect as jest.Mock ).mockImplementation(
 			( cb: ( callback: any ) => jest.Mock ) => cb( selectMock )
 		);
+
+		jest.spyOn(
+			// eslint-disable-next-line @typescript-eslint/no-var-requires
+			require( '@wordpress/data' ),
+			'useDispatch'
+		).mockReturnValue( () => {
+			return {
+				refundCharge: jest.fn(), // Mock the refundCharge function
+			};
+		} );
 	} );
 
 	describe( 'usePaymentIntentWithChargeFallback', () => {
@@ -133,6 +143,7 @@ describe( 'Payment Intent hooks', () => {
 
 			expect( result ).toEqual( {
 				data: paymentIntentMock.charge,
+				doRefund: expect.any( Function ),
 				error: {},
 				isLoading: false,
 			} );
@@ -158,6 +169,7 @@ describe( 'Payment Intent hooks', () => {
 
 			expect( result ).toEqual( {
 				data: paymentIntentMock,
+				doRefund: expect.any( Function ),
 				error: {},
 				isLoading: false,
 			} );
@@ -181,6 +193,7 @@ describe( 'Payment Intent hooks', () => {
 
 			expect( result ).toEqual( {
 				data: {},
+				doRefund: expect.any( Function ),
 				error: {},
 				isLoading: true,
 			} );
diff --git a/client/payment-details/order-details/test/__snapshots__/index.test.tsx.snap b/client/payment-details/order-details/test/__snapshots__/index.test.tsx.snap
index d02d14d3476..f28176053a7 100644
--- a/client/payment-details/order-details/test/__snapshots__/index.test.tsx.snap
+++ b/client/payment-details/order-details/test/__snapshots__/index.test.tsx.snap
@@ -66,6 +66,9 @@ exports[`Order details page should match the snapshot - Charge without payment i
               </div>
             </div>
           </div>
+          <div
+            class="payment-details__refund-controls"
+          />
         </div>
         <hr
           aria-orientation="horizontal"
diff --git a/client/payment-details/summary/index.tsx b/client/payment-details/summary/index.tsx
index 34887da95db..c35a236f94a 100644
--- a/client/payment-details/summary/index.tsx
+++ b/client/payment-details/summary/index.tsx
@@ -5,13 +5,26 @@
  */
 import { __ } from '@wordpress/i18n';
 import { dateI18n } from '@wordpress/date';
-import { Card, CardBody, CardDivider, Flex } from '@wordpress/components';
+import {
+	Card,
+	CardBody,
+	CardDivider,
+	Flex,
+	DropdownMenu,
+	MenuGroup,
+	MenuItem,
+} from '@wordpress/components';
+import { moreVertical } from '@wordpress/icons';
 import moment from 'moment';
-import React, { useContext } from 'react';
+import React, { useContext, useState } from 'react';
 import { createInterpolateElement } from '@wordpress/element';
 import HelpOutlineIcon from 'gridicons/dist/help-outline';
 import _ from 'lodash';
 
+// This is a workaround for the position of the dropdown menu. At the same time underlines the need for a better solution.
+import '../../../node_modules/@wordpress/components/src/dropdown-menu/style.scss';
+import '../../../node_modules/@wordpress/components/src/popover/style.scss';
+
 /**
  * Internal dependencies.
  */
@@ -49,6 +62,7 @@ import MissingOrderNotice from 'wcpay/payment-details/summary/missing-order-noti
 import DisputeAwaitingResponseDetails from '../dispute-details/dispute-awaiting-response-details';
 import DisputeResolutionFooter from '../dispute-details/dispute-resolution-footer';
 import ErrorBoundary from 'components/error-boundary';
+import RefundModal from 'wcpay/payment-details/summary/refund-modal';
 import CardNotice from 'wcpay/components/card-notice';
 
 declare const window: any;
@@ -171,7 +185,7 @@ const PaymentDetailsSummary: React.FC< PaymentDetailsSummaryProps > = ( {
 		charge.currency && balance.currency !== charge.currency;
 
 	const {
-		featureFlags: { isAuthAndCaptureEnabled, isRefundControlsEnabled },
+		featureFlags: { isAuthAndCaptureEnabled },
 	} = useContext( WCPaySettingsContext );
 
 	// We should only fetch the authorization data if the payment is marked for manual capture and it is not already captured.
@@ -225,6 +239,7 @@ const PaymentDetailsSummary: React.FC< PaymentDetailsSummaryProps > = ( {
 		balance.currency
 	);
 
+	const [ isRefundModalOpen, setIsRefundModalOpen ] = useState( false );
 	return (
 		<Card>
 			<CardBody>
@@ -464,6 +479,71 @@ const PaymentDetailsSummary: React.FC< PaymentDetailsSummaryProps > = ( {
 						</div>
 					</div>
 				</div>
+				<div className="payment-details__refund-controls">
+					{ ! charge?.refunded && charge?.captured && (
+						<Loadable
+							isLoading={ isLoading }
+							placeholder={ moreVertical }
+						>
+							<DropdownMenu
+								icon={ moreVertical }
+								label={ __(
+									'Translation actions',
+									'woocommerce-payments'
+								) }
+								popoverProps={ {
+									position: 'bottom left',
+								} }
+							>
+								{ ( { onClose } ) => (
+									<MenuGroup>
+										<MenuItem
+											onClick={ () => {
+												setIsRefundModalOpen( true );
+												wcpayTracks.recordEvent(
+													'payments_transactions_details_refund_modal_open',
+													{
+														payment_intent_id:
+															charge.payment_intent,
+													}
+												);
+												onClose();
+											} }
+										>
+											{ __(
+												'Refund in full',
+												'woocommerce-payments'
+											) }
+										</MenuItem>
+										{ charge.order && (
+											<MenuItem
+												onClick={ () => {
+													wcpayTracks.recordEvent(
+														'payments_transactions_details_partial_refund',
+														{
+															payment_intent_id:
+																charge.payment_intent,
+															order_id:
+																charge.order
+																	?.number,
+														}
+													);
+													window.location =
+														charge.order?.url;
+												} }
+											>
+												{ __(
+													'Partial refund',
+													'woocommerce-payments'
+												) }
+											</MenuItem>
+										) }
+									</MenuGroup>
+								) }
+							</DropdownMenu>
+						</Loadable>
+					) }
+				</div>
 			</CardBody>
 			<CardDivider />
 			<CardBody>
@@ -491,14 +571,28 @@ const PaymentDetailsSummary: React.FC< PaymentDetailsSummaryProps > = ( {
 					) }
 				</ErrorBoundary>
 			) }
-			{ isRefundControlsEnabled &&
-				! _.isEmpty( charge ) &&
-				! charge.order && (
-					<MissingOrderNotice
-						isLoading={ isLoading }
-						formattedAmount={ formattedAmount }
-					/>
-				) }
+			{ isRefundModalOpen && (
+				<RefundModal
+					charge={ charge }
+					formattedAmount={ formattedAmount }
+					onModalClose={ () => {
+						setIsRefundModalOpen( false );
+						wcpayTracks.recordEvent(
+							'payments_transactions_details_refund_modal_close',
+							{
+								payment_intent_id: charge.payment_intent,
+							}
+						);
+					} }
+				/>
+			) }
+			{ ! _.isEmpty( charge ) && ! charge.order && ! isLoading && (
+				<MissingOrderNotice
+					charge={ charge }
+					isLoading={ isLoading }
+					onButtonClick={ () => setIsRefundModalOpen( true ) }
+				/>
+			) }
 			{ isAuthAndCaptureEnabled &&
 				authorization &&
 				! authorization.captured && (
diff --git a/client/payment-details/summary/missing-order-notice/index.tsx b/client/payment-details/summary/missing-order-notice/index.tsx
index 69d7f008760..7b05331ee4c 100644
--- a/client/payment-details/summary/missing-order-notice/index.tsx
+++ b/client/payment-details/summary/missing-order-notice/index.tsx
@@ -5,10 +5,8 @@
  */
 
 import React from 'react';
-import { Button, RadioControl } from '@wordpress/components';
-import { __, sprintf } from '@wordpress/i18n';
-import { useState } from '@wordpress/element';
-import interpolateComponents from '@automattic/interpolate-components';
+import { Button } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies.
@@ -16,131 +14,53 @@ import interpolateComponents from '@automattic/interpolate-components';
 
 import './style.scss';
 import CardNotice from 'wcpay/components/card-notice';
-import ConfirmationModal from 'wcpay/components/confirmation-modal';
 import Loadable from 'wcpay/components/loadable';
+import { Charge } from 'wcpay/types/charges';
 
 interface MissingOrderNoticeProps {
+	charge: Charge;
 	isLoading: boolean;
-	formattedAmount: string;
+	onButtonClick: () => void;
 }
 
 const MissingOrderNotice: React.FC< MissingOrderNoticeProps > = ( {
+	charge,
 	isLoading,
-	formattedAmount,
+	onButtonClick,
 } ) => {
-	const [ isModalOpen, setIsModalOpen ] = useState( false );
-
-	const [ reason, setReason ] = useState< string | null >( null );
-
-	const handleOnButtonClick = () => {
-		setIsModalOpen( true );
-	};
-
-	const handleModalCancel = () => {
-		setIsModalOpen( false );
-	};
-
-	const handleModalConfirmation = () => {
-		// TODO: Handle the refund.
-	};
-
 	return (
 		<>
 			<Loadable isLoading={ isLoading } placeholder="">
 				<CardNotice
 					actions={
-						<Button
-							variant="primary"
-							isSmall={ false }
-							onClick={ handleOnButtonClick }
-						>
-							{ __( 'Refund', 'woocommerce-payments' ) }
-						</Button>
+						! charge.refunded ? (
+							<Button
+								variant="primary"
+								isSmall={ false }
+								onClick={ onButtonClick }
+							>
+								{ __( 'Refund', 'woocommerce-payments' ) }
+							</Button>
+						) : (
+							<></>
+						)
 					}
 				>
 					{ __(
-						'This transaction is not connected to order. Investigate this purchase and refund the transaction as needed.',
+						'This transaction is not connected to order. ',
 						'woocommerce-payments'
 					) }
+					{ charge.refunded
+						? __(
+								'It has been refunded and is not a subject for disputes.',
+								'woocommerce-payments'
+						  )
+						: __(
+								'Investigate this purchase and refund the transaction as needed.',
+								'woocommerce-payments'
+						  ) }
 				</CardNotice>
 			</Loadable>
-			{ isModalOpen && (
-				<ConfirmationModal
-					className="missing-order-notice-modal"
-					title={ __( 'Refund Transaction', 'woocommerce-payments' ) }
-					actions={
-						<>
-							<Button
-								onClick={ handleModalCancel }
-								variant="secondary"
-							>
-								{ __( 'Cancel', 'woocommerce-payments' ) }
-							</Button>
-							<Button
-								onClick={ handleModalConfirmation }
-								isPrimary
-							>
-								{ __(
-									'Refund transaction',
-									'woocommerce-payments'
-								) }
-							</Button>
-						</>
-					}
-					onRequestClose={ handleModalCancel }
-				>
-					<p>
-						{ interpolateComponents( {
-							mixedString: sprintf(
-								__(
-									'This will issue a full refund of {{strong}}%s{{/strong}} to the customer.',
-									'woocommerce-payments'
-								),
-								formattedAmount
-							),
-							components: {
-								strong: <strong />,
-							},
-						} ) }
-					</p>
-					<RadioControl
-						className="missing-order-notice-modal__reason"
-						label={ __(
-							'Select a reason (Optional)',
-							'woocommerce-payments'
-						) }
-						selected={ reason }
-						options={ [
-							{
-								label: __(
-									'Duplicate order',
-									'woocommerce-payments'
-								),
-								value: 'duplicate_order',
-							},
-							{
-								label: __(
-									'Fraudulent',
-									'woocommerce-payments'
-								),
-								value: 'fraudulent',
-							},
-							{
-								label: __(
-									'Requested by customer',
-									'woocommerce-payments'
-								),
-								value: 'requested_by_customer',
-							},
-							{
-								label: __( 'Other', 'woocommerce-payments' ),
-								value: 'other',
-							},
-						] }
-						onChange={ ( value: string ) => setReason( value ) }
-					/>
-				</ConfirmationModal>
-			) }
 		</>
 	);
 };
diff --git a/client/payment-details/summary/missing-order-notice/test/__snapshots__/index.test.tsx.snap b/client/payment-details/summary/missing-order-notice/test/__snapshots__/index.test.tsx.snap
new file mode 100644
index 00000000000..64cd813ebc2
--- /dev/null
+++ b/client/payment-details/summary/missing-order-notice/test/__snapshots__/index.test.tsx.snap
@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MissingOrderNotice it renders correctly 1`] = `
+<div>
+  <div
+    class="components-flex components-card__footer components-card-footer card-notice css-p1v47q-View-Flex-sx-Base-sx-Items-ItemsRow-Footer-borderRadius-borderColor-medium em57xhy0"
+    data-wp-c16t="true"
+    data-wp-component="CardFooter"
+  >
+    <div
+      class="card-notice__section"
+    >
+      <div
+        class="card-notice__text"
+      >
+        This transaction is not connected to order. 
+        It has been refunded and is not a subject for disputes.
+      </div>
+      <div
+        class="card-notice__button"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`MissingOrderNotice renders loading state 1`] = `
+<div>
+  <span
+    aria-busy="true"
+    class="is-loadable-placeholder"
+  />
+</div>
+`;
diff --git a/client/payment-details/summary/missing-order-notice/test/index.test.tsx b/client/payment-details/summary/missing-order-notice/test/index.test.tsx
new file mode 100644
index 00000000000..97758906fdc
--- /dev/null
+++ b/client/payment-details/summary/missing-order-notice/test/index.test.tsx
@@ -0,0 +1,39 @@
+/** @format */
+
+/**
+ * External dependencies
+ */
+import React from 'react';
+import { render } from '@testing-library/react';
+import { chargeMock } from 'wcpay/data/payment-intents/test/hooks';
+
+/**
+ * Internal dependencies
+ */
+import MissingOrderNotice from '..';
+import { Charge } from 'wcpay/types/charges';
+
+describe( 'MissingOrderNotice', () => {
+	test( 'it renders correctly', () => {
+		const { container: notice } = render(
+			<MissingOrderNotice
+				charge={ chargeMock }
+				isLoading={ false }
+				onButtonClick={ jest.fn() }
+			/>
+		);
+
+		expect( notice ).toMatchSnapshot();
+	} );
+
+	test( 'renders loading state', () => {
+		const { container: notice } = render(
+			<MissingOrderNotice
+				charge={ {} as Charge }
+				isLoading={ true }
+				onButtonClick={ jest.fn }
+			/>
+		);
+		expect( notice ).toMatchSnapshot();
+	} );
+} );
diff --git a/client/payment-details/summary/refund-modal/index.tsx b/client/payment-details/summary/refund-modal/index.tsx
new file mode 100644
index 00000000000..0127e379210
--- /dev/null
+++ b/client/payment-details/summary/refund-modal/index.tsx
@@ -0,0 +1,127 @@
+/** @format **/
+
+/**
+ * External dependencies
+ */
+
+import React from 'react';
+import { Button, RadioControl } from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
+import interpolateComponents from '@automattic/interpolate-components';
+
+/**
+ * Internal dependencies.
+ */
+
+import ConfirmationModal from 'wcpay/components/confirmation-modal';
+import { Charge } from 'wcpay/types/charges';
+import { usePaymentIntentWithChargeFallback } from 'wcpay/data';
+import { PaymentChargeDetailsResponse } from 'wcpay/payment-details/types';
+import wcpayTracks from 'tracks';
+
+interface RefundModalProps {
+	charge: Charge;
+	formattedAmount: string;
+	onModalClose: () => void;
+}
+
+const RefundModal: React.FC< RefundModalProps > = ( {
+	charge,
+	formattedAmount,
+	onModalClose,
+} ) => {
+	const [ reason, setReason ] = useState< string | null >( null );
+
+	const [ isRefundInProgress, setIsRefundInProgress ] = useState< boolean >(
+		false
+	);
+
+	const { doRefund } = usePaymentIntentWithChargeFallback(
+		charge.payment_intent as string
+	) as PaymentChargeDetailsResponse;
+
+	const handleModalCancel = () => {
+		onModalClose();
+	};
+
+	const handleRefund = async () => {
+		wcpayTracks.recordEvent( 'payments_transactions_details_refund_full', {
+			payment_intent_id: charge.payment_intent,
+		} );
+		setIsRefundInProgress( true );
+		await doRefund( charge, reason === 'other' ? null : reason );
+		setIsRefundInProgress( false );
+		handleModalCancel();
+	};
+
+	return (
+		<ConfirmationModal
+			className="missing-order-notice-modal"
+			title={ __( 'Refund Transaction', 'woocommerce-payments' ) }
+			actions={
+				<>
+					<Button onClick={ handleModalCancel } variant="secondary">
+						{ __( 'Cancel', 'woocommerce-payments' ) }
+					</Button>
+					<Button
+						onClick={ handleRefund }
+						isPrimary
+						isBusy={ isRefundInProgress }
+						disabled={ isRefundInProgress }
+					>
+						{ __( 'Refund transaction', 'woocommerce-payments' ) }
+					</Button>
+				</>
+			}
+			onRequestClose={ handleModalCancel }
+		>
+			<p>
+				{ interpolateComponents( {
+					mixedString: sprintf(
+						__(
+							'This will issue a full refund of {{strong}}%s{{/strong}} to the customer.',
+							'woocommerce-payments'
+						),
+						formattedAmount
+					),
+					components: {
+						strong: <strong />,
+					},
+				} ) }
+			</p>
+			<RadioControl
+				className="missing-order-notice-modal__reason"
+				label={ __(
+					'Select a reason (Optional)',
+					'woocommerce-payments'
+				) }
+				selected={ reason }
+				options={ [
+					{
+						label: __( 'Duplicate order', 'woocommerce-payments' ),
+						value: 'duplicate',
+					},
+					{
+						label: __( 'Fraudulent', 'woocommerce-payments' ),
+						value: 'fraudulent',
+					},
+					{
+						label: __(
+							'Requested by customer',
+							'woocommerce-payments'
+						),
+						value: 'requested_by_customer',
+					},
+					{
+						label: __( 'Other', 'woocommerce-payments' ),
+						value: 'other',
+					},
+				] }
+				onChange={ ( value: string ) => setReason( value ) }
+			/>
+		</ConfirmationModal>
+	);
+};
+
+export default RefundModal;
diff --git a/client/payment-details/summary/refund-modal/test/__snapshots__/index.test.tsx.snap b/client/payment-details/summary/refund-modal/test/__snapshots__/index.test.tsx.snap
new file mode 100644
index 00000000000..251b5f8438f
--- /dev/null
+++ b/client/payment-details/summary/refund-modal/test/__snapshots__/index.test.tsx.snap
@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RefundModal it renders correctly 1`] = `
+<div
+  aria-hidden="true"
+/>
+`;
diff --git a/client/payment-details/summary/refund-modal/test/index.test.tsx b/client/payment-details/summary/refund-modal/test/index.test.tsx
new file mode 100644
index 00000000000..fdd41eb1adb
--- /dev/null
+++ b/client/payment-details/summary/refund-modal/test/index.test.tsx
@@ -0,0 +1,92 @@
+/** @format */
+
+/**
+ * External dependencies
+ */
+import React from 'react';
+import { render } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import { Charge } from 'wcpay/types/charges';
+import RefundModal from '..';
+import { usePaymentIntentWithChargeFallback } from 'wcpay/data';
+import { ApiError } from 'wcpay/types/errors';
+
+jest.mock( 'wcpay/data', () => ( {
+	usePaymentIntentWithChargeFallback: jest.fn(),
+} ) );
+
+const mockUsePaymentIntentWithChargeFallback = usePaymentIntentWithChargeFallback as jest.MockedFunction<
+	typeof usePaymentIntentWithChargeFallback
+>;
+
+describe( 'RefundModal', () => {
+	test( 'it renders correctly', () => {
+		const charge: any = {
+			id: '776',
+			amount: 1500,
+			amount_captured: 0,
+			amount_refunded: 0,
+			application_fee_amount: 0,
+			balance_transaction: { currency: 'USD', amount: 1500, fee: 0 },
+			billing_details: {
+				address: {
+					city: 'San Francisco',
+					country: 'US',
+					line1: '60 29th street',
+					line2: '',
+					postal_code: '91140',
+					state: 'CA',
+				},
+				email: 'admin_test_example@email.com',
+				name: 'First Last',
+				phone: '20000000000',
+				formatted_address: '60 29th street<br/>San Francisco, CA 91140',
+			},
+			created: 1679922581,
+			currency: 'USD',
+			disputed: false,
+			outcome: null,
+			order: {
+				number: 776,
+				url: 'http://wcpay.test/wp-admin/post.php?post=776&action=edit',
+				customer_url:
+					'admin.php?page=wc-admin&path=/customers&filter=single_customer&customers=55',
+				customer_name: '',
+				customer_email: '',
+				subscriptions: [],
+				fraud_meta_box_type: 'succeeded',
+			},
+			paid: false,
+			paydown: null,
+			payment_method: '',
+			payment_intent: null,
+			payment_method_details: {
+				card: { country: 'US', checks: [], network: '' },
+				type: 'card' as any,
+			},
+			refunded: false,
+			refunds: null,
+			status: 'pending',
+		};
+
+		mockUsePaymentIntentWithChargeFallback.mockReturnValue( {
+			doRefund: jest.fn(),
+			data: charge,
+			error: {} as ApiError,
+			isLoading: false,
+		} );
+
+		const { container: modal } = render(
+			<RefundModal
+				charge={ charge as Charge }
+				formattedAmount={ 'USD 15' }
+				onModalClose={ jest.fn() }
+			/>
+		);
+
+		expect( modal ).toMatchSnapshot();
+	} );
+} );
diff --git a/client/payment-details/summary/style.scss b/client/payment-details/summary/style.scss
index 42e5c91e368..95df0d33edd 100755
--- a/client/payment-details/summary/style.scss
+++ b/client/payment-details/summary/style.scss
@@ -8,8 +8,14 @@
 	margin-bottom: 24px;
 }
 
+.components-card__body:first-of-type {
+	display: flex;
+	flex-direction: row;
+}
+
 .payment-details-summary {
 	display: flex;
+	flex: 1;
 	@include breakpoint( '<660px' ) {
 		flex-direction: column;
 	}
@@ -93,3 +99,7 @@
 .woocommerce-list--horizontal {
 	margin-top: 0 !important;
 }
+
+.payment-details__refund-controls {
+	flex: 0 0 auto;
+}
diff --git a/client/payment-details/summary/test/__snapshots__/index.test.tsx.snap b/client/payment-details/summary/test/__snapshots__/index.test.tsx.snap
index e9a596d35d5..b719e25c342 100644
--- a/client/payment-details/summary/test/__snapshots__/index.test.tsx.snap
+++ b/client/payment-details/summary/test/__snapshots__/index.test.tsx.snap
@@ -62,6 +62,9 @@ exports[`PaymentDetailsSummary capture notification and fraud buttons renders ca
             </div>
           </div>
         </div>
+        <div
+          class="payment-details__refund-controls"
+        />
       </div>
       <hr
         aria-orientation="horizontal"
@@ -379,6 +382,9 @@ exports[`PaymentDetailsSummary capture notification and fraud buttons renders th
             </div>
           </div>
         </div>
+        <div
+          class="payment-details__refund-controls"
+        />
       </div>
       <hr
         aria-orientation="horizontal"
@@ -674,6 +680,35 @@ exports[`PaymentDetailsSummary correctly renders a charge 1`] = `
             </div>
           </div>
         </div>
+        <div
+          class="payment-details__refund-controls"
+        >
+          <div
+            class="components-dropdown components-dropdown-menu"
+            tabindex="-1"
+          >
+            <button
+              aria-expanded="false"
+              aria-haspopup="true"
+              aria-label="Translation actions"
+              class="components-button components-dropdown-menu__toggle has-icon"
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                focusable="false"
+                height="24"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M13 19h-2v-2h2v2zm0-6h-2v-2h2v2zm0-6h-2V5h2v2z"
+                />
+              </svg>
+            </button>
+          </div>
+        </div>
       </div>
       <hr
         aria-orientation="horizontal"
@@ -934,6 +969,35 @@ exports[`PaymentDetailsSummary order missing notice does not render notice if or
             </div>
           </div>
         </div>
+        <div
+          class="payment-details__refund-controls"
+        >
+          <div
+            class="components-dropdown components-dropdown-menu"
+            tabindex="-1"
+          >
+            <button
+              aria-expanded="false"
+              aria-haspopup="true"
+              aria-label="Translation actions"
+              class="components-button components-dropdown-menu__toggle has-icon"
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                focusable="false"
+                height="24"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M13 19h-2v-2h2v2zm0-6h-2v-2h2v2zm0-6h-2V5h2v2z"
+                />
+              </svg>
+            </button>
+          </div>
+        </div>
       </div>
       <hr
         aria-orientation="horizontal"
@@ -1194,6 +1258,35 @@ exports[`PaymentDetailsSummary order missing notice renders notice if order miss
             </div>
           </div>
         </div>
+        <div
+          class="payment-details__refund-controls"
+        >
+          <div
+            class="components-dropdown components-dropdown-menu"
+            tabindex="-1"
+          >
+            <button
+              aria-expanded="false"
+              aria-haspopup="true"
+              aria-label="Translation actions"
+              class="components-button components-dropdown-menu__toggle has-icon"
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                focusable="false"
+                height="24"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M13 19h-2v-2h2v2zm0-6h-2v-2h2v2zm0-6h-2V5h2v2z"
+                />
+              </svg>
+            </button>
+          </div>
+        </div>
       </div>
       <hr
         aria-orientation="horizontal"
@@ -1383,7 +1476,8 @@ exports[`PaymentDetailsSummary order missing notice renders notice if order miss
           <div
             class="card-notice__text"
           >
-            This transaction is not connected to order. Investigate this purchase and refund the transaction as needed.
+            This transaction is not connected to order. 
+            Investigate this purchase and refund the transaction as needed.
           </div>
           <div
             class="card-notice__button"
@@ -1476,6 +1570,35 @@ exports[`PaymentDetailsSummary renders a charge with subscriptions 1`] = `
             </div>
           </div>
         </div>
+        <div
+          class="payment-details__refund-controls"
+        >
+          <div
+            class="components-dropdown components-dropdown-menu"
+            tabindex="-1"
+          >
+            <button
+              aria-expanded="false"
+              aria-haspopup="true"
+              aria-label="Translation actions"
+              class="components-button components-dropdown-menu__toggle has-icon"
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                focusable="false"
+                height="24"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M13 19h-2v-2h2v2zm0-6h-2v-2h2v2zm0-6h-2V5h2v2z"
+                />
+              </svg>
+            </button>
+          </div>
+        </div>
       </div>
       <hr
         aria-orientation="horizontal"
@@ -1766,6 +1889,9 @@ exports[`PaymentDetailsSummary renders fully refunded information for a charge 1
             </div>
           </div>
         </div>
+        <div
+          class="payment-details__refund-controls"
+        />
       </div>
       <hr
         aria-orientation="horizontal"
@@ -2023,6 +2149,9 @@ exports[`PaymentDetailsSummary renders loading state 1`] = `
             </div>
           </div>
         </div>
+        <div
+          class="payment-details__refund-controls"
+        />
       </div>
       <hr
         aria-orientation="horizontal"
@@ -2262,6 +2391,35 @@ exports[`PaymentDetailsSummary renders partially refunded information for a char
             </div>
           </div>
         </div>
+        <div
+          class="payment-details__refund-controls"
+        >
+          <div
+            class="components-dropdown components-dropdown-menu"
+            tabindex="-1"
+          >
+            <button
+              aria-expanded="false"
+              aria-haspopup="true"
+              aria-label="Translation actions"
+              class="components-button components-dropdown-menu__toggle has-icon"
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                focusable="false"
+                height="24"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M13 19h-2v-2h2v2zm0-6h-2v-2h2v2zm0-6h-2V5h2v2z"
+                />
+              </svg>
+            </button>
+          </div>
+        </div>
       </div>
       <hr
         aria-orientation="horizontal"
@@ -2522,6 +2680,35 @@ exports[`PaymentDetailsSummary renders the Tap to Pay channel from metadata 1`]
             </div>
           </div>
         </div>
+        <div
+          class="payment-details__refund-controls"
+        >
+          <div
+            class="components-dropdown components-dropdown-menu"
+            tabindex="-1"
+          >
+            <button
+              aria-expanded="false"
+              aria-haspopup="true"
+              aria-label="Translation actions"
+              class="components-button components-dropdown-menu__toggle has-icon"
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                focusable="false"
+                height="24"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M13 19h-2v-2h2v2zm0-6h-2v-2h2v2zm0-6h-2V5h2v2z"
+                />
+              </svg>
+            </button>
+          </div>
+        </div>
       </div>
       <hr
         aria-orientation="horizontal"
@@ -2782,6 +2969,35 @@ exports[`PaymentDetailsSummary renders the information of a dispute-reversal cha
             </div>
           </div>
         </div>
+        <div
+          class="payment-details__refund-controls"
+        >
+          <div
+            class="components-dropdown components-dropdown-menu"
+            tabindex="-1"
+          >
+            <button
+              aria-expanded="false"
+              aria-haspopup="true"
+              aria-label="Translation actions"
+              class="components-button components-dropdown-menu__toggle has-icon"
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                focusable="false"
+                height="24"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M13 19h-2v-2h2v2zm0-6h-2v-2h2v2zm0-6h-2V5h2v2z"
+                />
+              </svg>
+            </button>
+          </div>
+        </div>
       </div>
       <hr
         aria-orientation="horizontal"
diff --git a/client/payment-details/test/__snapshots__/index.test.tsx.snap b/client/payment-details/test/__snapshots__/index.test.tsx.snap
index b2ed253f99d..7a3274751bf 100644
--- a/client/payment-details/test/__snapshots__/index.test.tsx.snap
+++ b/client/payment-details/test/__snapshots__/index.test.tsx.snap
@@ -73,6 +73,25 @@ exports[`Payment details page should match the snapshot - Charge query param 1`]
               </div>
             </div>
           </div>
+          <div
+            class="payment-details__refund-controls"
+          >
+            <span
+              aria-busy="true"
+              class="is-loadable-placeholder"
+            >
+              <svg
+                aria-hidden="true"
+                focusable="false"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M13 19h-2v-2h2v2zm0-6h-2v-2h2v2zm0-6h-2V5h2v2z"
+                />
+              </svg>
+            </span>
+          </div>
         </div>
         <hr
           aria-orientation="horizontal"
@@ -504,6 +523,35 @@ exports[`Payment details page should match the snapshot - Payment Intent query p
               </div>
             </div>
           </div>
+          <div
+            class="payment-details__refund-controls"
+          >
+            <div
+              class="components-dropdown components-dropdown-menu"
+              tabindex="-1"
+            >
+              <button
+                aria-expanded="false"
+                aria-haspopup="true"
+                aria-label="Translation actions"
+                class="components-button components-dropdown-menu__toggle has-icon"
+                type="button"
+              >
+                <svg
+                  aria-hidden="true"
+                  focusable="false"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  width="24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M13 19h-2v-2h2v2zm0-6h-2v-2h2v2zm0-6h-2V5h2v2z"
+                  />
+                </svg>
+              </button>
+            </div>
+          </div>
         </div>
         <hr
           aria-orientation="horizontal"
@@ -682,6 +730,32 @@ exports[`Payment details page should match the snapshot - Payment Intent query p
             </li>
           </ul>
         </div>
+        <div
+          class="components-flex components-card__footer components-card-footer card-notice css-p1v47q-View-Flex-sx-Base-sx-Items-ItemsRow-Footer-borderRadius-borderColor-medium em57xhy0"
+          data-wp-c16t="true"
+          data-wp-component="CardFooter"
+        >
+          <div
+            class="card-notice__section"
+          >
+            <div
+              class="card-notice__text"
+            >
+              This transaction is not connected to order. 
+              Investigate this purchase and refund the transaction as needed.
+            </div>
+            <div
+              class="card-notice__button"
+            >
+              <button
+                class="components-button is-primary"
+                type="button"
+              >
+                Refund
+              </button>
+            </div>
+          </div>
+        </div>
       </div>
       <div
         aria-hidden="true"
diff --git a/client/payment-details/types.ts b/client/payment-details/types.ts
index 363b168ab0b..d2142207dbd 100644
--- a/client/payment-details/types.ts
+++ b/client/payment-details/types.ts
@@ -9,6 +9,7 @@ export interface PaymentChargeDetailsResponse {
 	data: PaymentIntent | Charge;
 	error: ApiError;
 	isLoading: boolean;
+	doRefund: ( charge: Charge, reason: string | null ) => void;
 }
 
 export interface PaymentDetailsProps {
diff --git a/client/settings/wcpay-settings-context.js b/client/settings/wcpay-settings-context.js
index 60508988dc9..531e806ff27 100644
--- a/client/settings/wcpay-settings-context.js
+++ b/client/settings/wcpay-settings-context.js
@@ -11,7 +11,6 @@ const WCPaySettingsContext = createContext( {
 		isAuthAndCaptureEnabled: false,
 		isDisputeIssuerEvidenceEnabled: false,
 		woopay: false,
-		isRefundControlsEnabled: false,
 	},
 } );
 
diff --git a/includes/admin/class-wc-rest-payments-refunds-controller.php b/includes/admin/class-wc-rest-payments-refunds-controller.php
new file mode 100644
index 00000000000..26d3c14c670
--- /dev/null
+++ b/includes/admin/class-wc-rest-payments-refunds-controller.php
@@ -0,0 +1,80 @@
+<?php
+/**
+ * Class WC_REST_Payments_Timeline_Controller
+ *
+ * @package WooCommerce\Payments\Admin
+ */
+
+use WCPay\Core\Server\Request\Refund_Charge;
+use WCPay\Exceptions\API_Exception;
+
+defined( 'ABSPATH' ) || exit;
+
+/**
+ * REST controller for the timeline, which includes all events related to an intention.
+ */
+class WC_REST_Payments_Refunds_Controller extends WC_Payments_REST_Controller {
+	/**
+	 * Endpoint path.
+	 *
+	 * @var string
+	 */
+	protected $rest_base = 'payments/refund';
+
+	/**
+	 * Configure REST API routes.
+	 */
+	public function register_routes() {
+		register_rest_route(
+			$this->namespace,
+			'/' . $this->rest_base,
+			[
+				'methods'             => WP_REST_Server::CREATABLE,
+				'callback'            => [ $this, 'process_refund' ],
+				'permission_callback' => [ $this, 'check_permission' ],
+			]
+		);
+	}
+
+	/**
+	 * Makes direct refund bypassing any order checks.
+	 *
+	 * @internal Not intended for usage in integrations or outside of WooCommerce Payments.
+	 * @param WP_REST_Request $request Full data about the request.
+	 */
+	public function process_refund( $request ) {
+		$order_id  = $request->get_param( 'order_id' );
+		$charge_id = $request->get_param( 'charge_id' );
+		$amount    = $request->get_param( 'amount' );
+		$reason    = $request->get_param( 'reason' );
+
+		if ( $order_id ) {
+			$order = wc_get_order( $order_id );
+			if ( $order ) {
+				$result = wc_create_refund(
+					[
+						'amount'         => WC_Payments_Utils::interpret_stripe_amount( $amount, $order->get_currency() ),
+						'reason'         => $reason,
+						'order_id'       => $order_id,
+						'refund_payment' => true,
+					]
+				);
+
+				return rest_ensure_response( $result );
+			}
+		}
+
+		try {
+			$refund_request = Refund_Charge::create( $charge_id );
+			$refund_request->set_charge( $charge_id );
+			$refund_request->set_amount( $amount );
+			$refund_request->set_reason( $reason );
+			$refund_request->set_source( 'transaction_details_no_order' );
+			$response = $refund_request->send();
+
+			return rest_ensure_response( $response );
+		} catch ( API_Exception $e ) {
+			return rest_ensure_response( new WP_Error( 'wcpay_refund_payment', $e->getMessage() ) );
+		}
+	}
+}
diff --git a/includes/class-wc-payment-gateway-wcpay.php b/includes/class-wc-payment-gateway-wcpay.php
index b07ee398a92..03b8c9ebf12 100644
--- a/includes/class-wc-payment-gateway-wcpay.php
+++ b/includes/class-wc-payment-gateway-wcpay.php
@@ -1817,6 +1817,10 @@ static function ( $refund ) use ( $refund_amount ) {
 				if ( null !== $amount ) {
 					$refund_request->set_amount( WC_Payments_Utils::prepare_amount( $amount, $order->get_currency() ) );
 				}
+				// These are reasons supported by Stripe https://stripe.com/docs/api/refunds/create#create_refund-reason.
+				if ( in_array( $reason, [ 'duplicate', 'fraudulent', 'requested_by_customer' ], true ) ) {
+					$refund_request->set_reason( $reason );
+				}
 				$refund = $refund_request->send();
 			}
 			$currency = strtoupper( $refund['currency'] );
diff --git a/includes/class-wc-payments.php b/includes/class-wc-payments.php
index 26e51088d9f..c1cbfb64f7c 100644
--- a/includes/class-wc-payments.php
+++ b/includes/class-wc-payments.php
@@ -1052,6 +1052,10 @@ public static function init_rest_api() {
 		$customer_controller = new WC_REST_Payments_Customer_Controller( self::$api_client, self::$customer_service );
 		$customer_controller->register_routes();
 
+		include_once WCPAY_ABSPATH . 'includes/admin/class-wc-rest-payments-refunds-controller.php';
+		$refunds_controller = new WC_REST_Payments_Refunds_Controller( self::$api_client );
+		$refunds_controller->register_routes();
+
 		include_once WCPAY_ABSPATH . 'includes/admin/class-wc-rest-payments-survey-controller.php';
 		$survey_controller = new WC_REST_Payments_Survey_Controller( self::get_wc_payments_http() );
 		$survey_controller->register_routes();
diff --git a/includes/core/server/request/class-refund-charge.php b/includes/core/server/request/class-refund-charge.php
index d792c942e53..93be681fb5e 100644
--- a/includes/core/server/request/class-refund-charge.php
+++ b/includes/core/server/request/class-refund-charge.php
@@ -19,6 +19,7 @@ class Refund_Charge extends Request {
 
 	const DEFAULT_PARAMS = [
 		'amount' => null,
+		'reason' => null,
 	];
 
 	const IMMUTABLE_PARAMS = [ 'charge' ];
@@ -59,6 +60,32 @@ public function set_amount( int $amount ) {
 		$this->set_param( 'amount', $amount );
 	}
 
+	/**
+	 * Sets the reason for the refund.
+	 *
+	 * @param string|null $reason The reason for the refund.
+	 * @throws Invalid_Request_Parameter_Exception
+	 */
+	public function set_reason( ?string $reason ) {
+		$this->set_param( 'reason', $reason );
+	}
+
+	/**
+	 * Sets the refund source describing where it was initiated from.
+	 *
+	 * @param string $source The reason for the refund.
+	 * @throws Invalid_Request_Parameter_Exception
+	 */
+	public function set_source( string $source ) {
+		$this->set_param(
+			'metadata',
+			array_merge(
+				$this->get_params()['metadata'] ?? [],
+				[ 'refund_source' => $source ]
+			)
+		);
+	}
+
 	/**
 	 * Returns the request's API.
 	 *
diff --git a/tests/unit/admin/test-class-wc-rest-payments-refunds-controller.php b/tests/unit/admin/test-class-wc-rest-payments-refunds-controller.php
new file mode 100644
index 00000000000..3f5b912e56f
--- /dev/null
+++ b/tests/unit/admin/test-class-wc-rest-payments-refunds-controller.php
@@ -0,0 +1,73 @@
+<?php
+/**
+ * Class WC_REST_Payments_Refunds_Controller_Test
+ *
+ * @package WooCommerce\Payments\Tests
+ */
+
+use PHPUnit\Framework\MockObject\MockObject;
+use WCPay\Core\Server\Request\Refund_Charge;
+
+/**
+ * WC_REST_Payments_Refunds_Controller_Test unit tests.
+ */
+class WC_REST_Payments_Refunds_Controller_Test extends WCPAY_UnitTestCase {
+
+	/**
+	 * Controller under test.
+	 *
+	 * @var WC_REST_Payments_Refunds_Controller
+	 */
+	private $controller;
+
+	/**
+	 * @var WC_Payments_API_Client|MockObject
+	 */
+	private $mock_api_client;
+
+	public function set_up() {
+		parent::set_up();
+
+		$this->mock_api_client = $this->createMock( WC_Payments_API_Client::class );
+
+		$this->controller = new WC_REST_Payments_Refunds_Controller(
+			$this->mock_api_client
+		);
+	}
+
+	public function test_process_refund_without_order_id(): void {
+
+		$request = new WP_REST_Request( 'POST' );
+		$request->set_body_params(
+			[
+				'order_id'  => null,
+				'charge_id' => 'ch_test',
+				'amount'    => 5000,
+				'reason'    => 'duplicate',
+			]
+		);
+
+		$refund_request = $this->mock_wcpay_request( Refund_Charge::class );
+
+		$refund_request->expects( $this->once() )
+			->method( 'set_charge' )
+			->with( 'ch_test' );
+		$refund_request->expects( $this->once() )
+			->method( 'set_amount' )
+			->with( 5000 );
+		$refund_request->expects( $this->once() )
+			->method( 'set_reason' )
+			->with( 'duplicate' );
+		$refund_response = [
+			'id' => 're_test',
+		];
+		$refund_request->expects( $this->once() )
+			->method( 'format_response' )
+			->with()
+			->willReturn( $refund_response );
+
+		$response = $this->controller->process_refund( $request );
+		$this->assertSame( 200, $response->get_status() );
+		$this->assertSame( $refund_response, $response->get_data() );
+	}
+}
diff --git a/tests/unit/bootstrap.php b/tests/unit/bootstrap.php
index 0188cfb4f93..0ff3d5a9ed1 100755
--- a/tests/unit/bootstrap.php
+++ b/tests/unit/bootstrap.php
@@ -96,6 +96,7 @@ function() {
 	require_once $_plugin_dir . 'includes/admin/class-wc-rest-payments-payment-intents-controller.php';
 	require_once $_plugin_dir . 'includes/class-woopay-tracker.php';
 	require_once $_plugin_dir . 'includes/admin/class-wc-rest-payments-customer-controller.php';
+	require_once $_plugin_dir . 'includes/admin/class-wc-rest-payments-refunds-controller.php';
 
 	// Load currency helper class early to ensure its implementation is used over the one resolved during further test initialization.
 	require_once __DIR__ . '/helpers/class-wc-helper-site-currency.php';

From 9a3237e32ad8e138b96e1b55486db9c260c236fd Mon Sep 17 00:00:00 2001
From: Dat Hoang <htdat@users.noreply.github.com>
Date: Thu, 21 Dec 2023 15:18:21 +0700
Subject: [PATCH 3/4] Add test mode notice in page order detail. (#7898)

---
 .../add-334-test-mode-notice-order-details    |  4 ++
 client/order/index.js                         | 22 ++++++----
 client/order/test-mode-notice/index.tsx       | 40 +++++++++++++++++++
 includes/admin/class-wc-payments-admin.php    |  1 +
 includes/class-wc-payment-gateway-wcpay.php   |  3 +-
 ...s-wc-payments-action-scheduler-service.php |  6 ++-
 includes/class-wc-payments-order-service.php  |  9 +++++
 includes/class-wc-payments.php                |  1 +
 includes/constants/class-order-mode.php       | 22 ++++++++++
 src/Internal/Service/OrderService.php         |  4 +-
 .../Service/PaymentProcessingService.php      |  3 +-
 11 files changed, 102 insertions(+), 13 deletions(-)
 create mode 100644 changelog/add-334-test-mode-notice-order-details
 create mode 100644 client/order/test-mode-notice/index.tsx
 create mode 100644 includes/constants/class-order-mode.php

diff --git a/changelog/add-334-test-mode-notice-order-details b/changelog/add-334-test-mode-notice-order-details
new file mode 100644
index 00000000000..de22a34c323
--- /dev/null
+++ b/changelog/add-334-test-mode-notice-order-details
@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Add test mode notice in page order detail.
diff --git a/client/order/index.js b/client/order/index.js
index 4b2606caff0..1bfdfeee7ad 100644
--- a/client/order/index.js
+++ b/client/order/index.js
@@ -13,6 +13,7 @@ import { isAwaitingResponse, isUnderReview } from 'wcpay/disputes/utils';
 import RefundConfirmationModal from './refund-confirm-modal';
 import CancelConfirmationModal from './cancel-confirm-modal';
 import CancelAuthorizationConfirmationModal from './cancel-authorization-confirm-modal';
+import TestModeNotice from './test-mode-notice';
 import DisputedOrderNoticeHandler from 'wcpay/components/disputed-order-notice';
 
 function disableWooOrderRefundButton( disputeStatus ) {
@@ -59,8 +60,9 @@ jQuery( function ( $ ) {
 	const disableManualRefunds = getConfig( 'disableManualRefunds' ) ?? false;
 	const manualRefundsTip = getConfig( 'manualRefundsTip' ) ?? '';
 	const chargeId = getConfig( 'chargeId' );
+	const testMode = getConfig( 'testMode' );
 
-	maybeShowDisputeNotice();
+	maybeShowOrderNotices();
 
 	$( '#woocommerce-order-items' ).on(
 		'click',
@@ -168,21 +170,27 @@ jQuery( function ( $ ) {
 		ReactDOM.render( modalToRender, container );
 	}
 
-	function maybeShowDisputeNotice() {
+	function maybeShowOrderNotices() {
 		const container = document.querySelector(
 			'#wcpay-order-payment-details-container'
 		);
 
 		// If the container doesn't exist (WC < 7.9), or the charge ID isn't present, don't render the notice.
-		if ( ! container || ! chargeId ) {
+		if ( ! container ) {
 			return;
 		}
 
 		ReactDOM.render(
-			<DisputedOrderNoticeHandler
-				chargeId={ chargeId }
-				onDisableOrderRefund={ disableWooOrderRefundButton }
-			/>,
+			<>
+				{ testMode && <TestModeNotice /> }
+
+				{ chargeId && (
+					<DisputedOrderNoticeHandler
+						chargeId={ chargeId }
+						onDisableOrderRefund={ disableWooOrderRefundButton }
+					/>
+				) }
+			</>,
 			container
 		);
 	}
diff --git a/client/order/test-mode-notice/index.tsx b/client/order/test-mode-notice/index.tsx
new file mode 100644
index 00000000000..7778f38a65a
--- /dev/null
+++ b/client/order/test-mode-notice/index.tsx
@@ -0,0 +1,40 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import { __ } from '@wordpress/i18n';
+import interpolateComponents from '@automattic/interpolate-components';
+
+/**
+ * Internal dependencies
+ */
+import InlineNotice from 'wcpay/components/inline-notice';
+
+const TestModeNotice = (): JSX.Element => {
+	return (
+		<InlineNotice icon={ true } status="warning" isDismissible={ false }>
+			{ interpolateComponents( {
+				mixedString: __(
+					'WooPayments was in test mode when this order was placed. {{learnMoreLink/}}',
+					'woocommerce-payments'
+				),
+				components: {
+					learnMoreLink: (
+						<a
+							target="_blank"
+							href="https://woo.com/document/woopayments/testing-and-troubleshooting/testing/"
+							rel="noopener noreferrer"
+						>
+							{ __(
+								'Learn more about test mode',
+								'woocommerce-payments'
+							) }
+						</a>
+					),
+				},
+			} ) }
+		</InlineNotice>
+	);
+};
+
+export default TestModeNotice;
diff --git a/includes/admin/class-wc-payments-admin.php b/includes/admin/class-wc-payments-admin.php
index 31934da5ebe..0aa9f9dd03c 100644
--- a/includes/admin/class-wc-payments-admin.php
+++ b/includes/admin/class-wc-payments-admin.php
@@ -735,6 +735,7 @@ public function enqueue_payments_scripts() {
 						'canRefund'             => $this->wcpay_gateway->can_refund_order( $order ),
 						'chargeId'              => $this->order_service->get_charge_id_for_order( $order ),
 						'hasOpenAuthorization'  => $this->order_service->has_open_authorization( $order ),
+						'testMode'              => \WCPay\Constants\Order_Mode::TEST === $order->get_meta( WC_Payments_Order_Service::WCPAY_MODE_META_KEY ),
 					]
 				);
 				wp_localize_script(
diff --git a/includes/class-wc-payment-gateway-wcpay.php b/includes/class-wc-payment-gateway-wcpay.php
index 03b8c9ebf12..8d21920ac8f 100644
--- a/includes/class-wc-payment-gateway-wcpay.php
+++ b/includes/class-wc-payment-gateway-wcpay.php
@@ -10,6 +10,7 @@
 }
 
 use WCPay\Constants\Fraud_Meta_Box_Type;
+use WCPay\Constants\Order_Mode;
 use WCPay\Constants\Order_Status;
 use WCPay\Constants\Payment_Capture_Type;
 use WCPay\Constants\Payment_Initiated_By;
@@ -1204,7 +1205,7 @@ public function process_payment_for_order( $cart, $payment_information, $schedul
 		$payment_method = $payment_information->get_payment_method();
 		$this->order_service->set_payment_method_id_for_order( $order, $payment_method );
 		$this->order_service->set_customer_id_for_order( $order, $customer_id );
-		$order->update_meta_data( '_wcpay_mode', WC_Payments::mode()->is_test() ? 'test' : 'prod' );
+		$order->update_meta_data( WC_Payments_Order_Service::WCPAY_MODE_META_KEY, WC_Payments::mode()->is_test() ? Order_Mode::TEST : Order_Mode::PRODUCTION );
 
 		// In case amount is 0 and we're not saving the payment method, we won't be using intents and can confirm the order payment.
 		if ( apply_filters( 'wcpay_confirm_without_payment_intent', ! $payment_needed && ! $save_payment_method_to_store ) ) {
diff --git a/includes/class-wc-payments-action-scheduler-service.php b/includes/class-wc-payments-action-scheduler-service.php
index 4f19611ac0e..1952d427a31 100644
--- a/includes/class-wc-payments-action-scheduler-service.php
+++ b/includes/class-wc-payments-action-scheduler-service.php
@@ -5,6 +5,8 @@
  * @package WooCommerce\Payments
  */
 
+use WCPay\Constants\Order_Mode;
+
 defined( 'ABSPATH' ) || exit;
 
 /**
@@ -99,10 +101,10 @@ private function track_order( $order_id, $is_update = false ) {
 		if ( empty( $payment_method ) ) {
 			return false;
 		}
-		$order_mode = $order->get_meta( '_wcpay_mode' );
+		$order_mode = $order->get_meta( WC_Payments_Order_Service::WCPAY_MODE_META_KEY );
 
 		if ( $order_mode ) {
-			$current_mode = WC_Payments::mode()->is_test() ? 'test' : 'prod';
+			$current_mode = WC_Payments::mode()->is_test() ? Order_Mode::TEST : Order_Mode::PRODUCTION;
 			if ( $current_mode !== $order_mode ) {
 				// If mode doesn't match make sure to stop order tracking to prevent order tracking issues.
 				// False will be returned so maybe future crons will have correct mode.
diff --git a/includes/class-wc-payments-order-service.php b/includes/class-wc-payments-order-service.php
index 44c5f22302f..eab529f6d92 100644
--- a/includes/class-wc-payments-order-service.php
+++ b/includes/class-wc-payments-order-service.php
@@ -97,6 +97,15 @@ class WC_Payments_Order_Service {
 	 */
 	const WCPAY_TRANSACTION_FEE_META_KEY = '_wcpay_transaction_fee';
 
+	/**
+	 * Meta key used to store the mode, either 'test', or 'prod' of order.
+	 *
+	 * @see Order_Mode
+	 *
+	 * @const string
+	 */
+	const WCPAY_MODE_META_KEY = '_wcpay_mode';
+
 	/**
 	 * Client for making requests to the WooCommerce Payments API
 	 *
diff --git a/includes/class-wc-payments.php b/includes/class-wc-payments.php
index c1cbfb64f7c..006f2deef2a 100644
--- a/includes/class-wc-payments.php
+++ b/includes/class-wc-payments.php
@@ -436,6 +436,7 @@ public static function init() {
 		include_once __DIR__ . '/exceptions/class-order-not-found-exception.php';
 		include_once __DIR__ . '/constants/class-base-constant.php';
 		include_once __DIR__ . '/constants/class-fraud-meta-box-type.php';
+		include_once __DIR__ . '/constants/class-order-mode.php';
 		include_once __DIR__ . '/constants/class-order-status.php';
 		include_once __DIR__ . '/constants/class-payment-type.php';
 		include_once __DIR__ . '/constants/class-payment-initiated-by.php';
diff --git a/includes/constants/class-order-mode.php b/includes/constants/class-order-mode.php
new file mode 100644
index 00000000000..689baca331d
--- /dev/null
+++ b/includes/constants/class-order-mode.php
@@ -0,0 +1,22 @@
+<?php
+/**
+ * Class Order_Mode
+ *
+ * @package WooCommerce\Payments
+ */
+
+namespace WCPay\Constants;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly.
+}
+
+/**
+ * Enum saved in the order meta for the mode that the payment was processed in.
+ *
+ * @psalm-immutable
+ */
+class Order_Mode extends Base_Constant {
+	const TEST       = 'test';
+	const PRODUCTION = 'prod';
+}
diff --git a/src/Internal/Service/OrderService.php b/src/Internal/Service/OrderService.php
index 150509ac8db..25e962cdadd 100644
--- a/src/Internal/Service/OrderService.php
+++ b/src/Internal/Service/OrderService.php
@@ -221,7 +221,7 @@ public function update_order_from_successful_intent(
 	 */
 	public function set_mode( string $order_id, string $mode ) : void {
 		$order = $this->get_order( $order_id );
-		$order->update_meta_data( '_wcpay_mode', $mode );
+		$order->update_meta_data( WC_Payments_Order_Service::WCPAY_MODE_META_KEY, $mode );
 		$order->save_meta_data();
 	}
 
@@ -235,7 +235,7 @@ public function set_mode( string $order_id, string $mode ) : void {
 	 */
 	public function get_mode( string $order_id ) : string {
 		$order = $this->get_order( $order_id );
-		return $order->get_meta( '_wcpay_mode', true );
+		return $order->get_meta( WC_Payments_Order_Service::WCPAY_MODE_META_KEY, true );
 	}
 
 	/**
diff --git a/src/Internal/Service/PaymentProcessingService.php b/src/Internal/Service/PaymentProcessingService.php
index ca3647fcfc7..c68be314128 100644
--- a/src/Internal/Service/PaymentProcessingService.php
+++ b/src/Internal/Service/PaymentProcessingService.php
@@ -10,6 +10,7 @@
 use Exception;
 use WC_Payments_API_Abstract_Intention;
 use WC_Payments_API_Setup_Intention;
+use WCPay\Constants\Order_Mode;
 use WCPay\Exceptions\API_Exception;
 use WCPay\Exceptions\Order_Not_Found_Exception;
 use WCPay\Vendor\League\Container\Exception\ContainerException;
@@ -147,7 +148,7 @@ public function get_authentication_redirect_url( $intent, int $order_id ) {
 	protected function create_payment_context( int $order_id, bool $automatic_capture = false ): PaymentContext {
 		$context = new PaymentContext( $order_id );
 		try {
-			$context->set_mode( $this->mode->is_test() ? 'test' : 'prod' );
+			$context->set_mode( $this->mode->is_test() ? Order_Mode::TEST : Order_Mode::PRODUCTION );
 		} catch ( Exception $e ) {
 			$context->set_mode( 'unknown' );
 		}

From f62ff7e5f70091b9da7fe06bce25509cf3e7f99c Mon Sep 17 00:00:00 2001
From: Daniel Mallory <daniel.mallory@automattic.com>
Date: Thu, 21 Dec 2023 10:15:38 +0000
Subject: [PATCH 4/4] Reset Account Management (#7914)

Co-authored-by: Oleksandr Aratovskyi <79862886+oaratovskyi@users.noreply.github.com>
---
 .../dev-3468-allow-reset-account-management   |   4 +
 .../account-status/account-fees/index.js      |   9 +-
 .../account-status/account-fees/styles.scss   |   3 +
 .../test/__snapshots__/index.js.snap          | 187 ++++++++++++++----
 .../account-status/account-tools/index.tsx    |  67 +++++++
 .../account-status/account-tools/strings.tsx  |  15 ++
 .../account-status/account-tools/styles.scss  |  11 ++
 .../test/__snapshots__/index.test.tsx.snap    |  40 ++++
 .../account-tools/test/index.test.tsx         |  49 +++++
 client/components/account-status/index.js     |   4 +
 .../test/__snapshots__/index.js.snap          |  50 ++++-
 client/onboarding/tracking.ts                 |   3 +
 client/overview/modal/reset-account/index.tsx |  64 ++++++
 .../overview/modal/reset-account/strings.tsx  |  36 ++++
 .../overview/modal/reset-account/style.scss   |  25 +++
 .../modal/reset-account/test/index.test.tsx   |  35 ++++
 client/tracks/index.js                        |   1 +
 client/utils/index.js                         |  14 ++
 includes/class-wc-payments-account.php        |   9 +
 19 files changed, 589 insertions(+), 37 deletions(-)
 create mode 100644 changelog/dev-3468-allow-reset-account-management
 create mode 100644 client/components/account-status/account-fees/styles.scss
 create mode 100644 client/components/account-status/account-tools/index.tsx
 create mode 100644 client/components/account-status/account-tools/strings.tsx
 create mode 100644 client/components/account-status/account-tools/styles.scss
 create mode 100644 client/components/account-status/account-tools/test/__snapshots__/index.test.tsx.snap
 create mode 100644 client/components/account-status/account-tools/test/index.test.tsx
 create mode 100644 client/overview/modal/reset-account/index.tsx
 create mode 100644 client/overview/modal/reset-account/strings.tsx
 create mode 100644 client/overview/modal/reset-account/style.scss
 create mode 100644 client/overview/modal/reset-account/test/index.test.tsx

diff --git a/changelog/dev-3468-allow-reset-account-management b/changelog/dev-3468-allow-reset-account-management
new file mode 100644
index 00000000000..ed030674f95
--- /dev/null
+++ b/changelog/dev-3468-allow-reset-account-management
@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Add Account Management tools with reset account functionality for partially onboarded accounts.
diff --git a/client/components/account-status/account-fees/index.js b/client/components/account-status/account-fees/index.js
index 066a4faf1b3..93a93293c11 100644
--- a/client/components/account-status/account-fees/index.js
+++ b/client/components/account-status/account-fees/index.js
@@ -16,6 +16,8 @@ import {
 	getCurrentBaseFee,
 	getTransactionsPaymentMethodName,
 } from 'utils/account-fees';
+import { CardDivider } from '@wordpress/components';
+import './styles.scss';
 
 const AccountFee = ( props ) => {
 	const { accountFee, paymentMethod } = props;
@@ -59,7 +61,12 @@ const AccountFees = ( props ) => {
 	return (
 		<>
 			{ haveDiscounts && (
-				<h4>{ __( 'Active discounts', 'woocommerce-payments' ) }</h4>
+				<div className="account-fees">
+					<CardDivider />
+					<h4>
+						{ __( 'Active discounts', 'woocommerce-payments' ) }
+					</h4>
+				</div>
 			) }
 			{ activeDiscounts }
 		</>
diff --git a/client/components/account-status/account-fees/styles.scss b/client/components/account-status/account-fees/styles.scss
new file mode 100644
index 00000000000..9938ef462b1
--- /dev/null
+++ b/client/components/account-status/account-fees/styles.scss
@@ -0,0 +1,3 @@
+.account-fees {
+	padding-top: 16px;
+}
diff --git a/client/components/account-status/account-fees/test/__snapshots__/index.js.snap b/client/components/account-status/account-fees/test/__snapshots__/index.js.snap
index 6a2576c6862..653e680afac 100644
--- a/client/components/account-status/account-fees/test/__snapshots__/index.js.snap
+++ b/client/components/account-status/account-fees/test/__snapshots__/index.js.snap
@@ -2,9 +2,20 @@
 
 exports[`AccountFees renders discounted base fee 1`] = `
 <div>
-  <h4>
-    Active discounts
-  </h4>
+  <div
+    class="account-fees"
+  >
+    <hr
+      aria-orientation="horizontal"
+      class="components-divider components-card__divider components-card-divider css-yo8r29-DividerView-renderBorder-renderSize-renderMargin-Divider-borderColor e19on6iw0"
+      data-wp-c16t="true"
+      data-wp-component="CardDivider"
+      role="separator"
+    />
+    <h4>
+      Active discounts
+    </h4>
+  </div>
   <p>
     Card transactions
     :
@@ -47,9 +58,20 @@ exports[`AccountFees renders discounted base fee 1`] = `
 
 exports[`AccountFees renders discounted fee with USD volume currency and non-USD base fee 1`] = `
 <div>
-  <h4>
-    Active discounts
-  </h4>
+  <div
+    class="account-fees"
+  >
+    <hr
+      aria-orientation="horizontal"
+      class="components-divider components-card__divider components-card-divider css-yo8r29-DividerView-renderBorder-renderSize-renderMargin-Divider-borderColor e19on6iw0"
+      data-wp-c16t="true"
+      data-wp-component="CardDivider"
+      role="separator"
+    />
+    <h4>
+      Active discounts
+    </h4>
+  </div>
   <p>
     Card transactions
     :
@@ -92,9 +114,20 @@ exports[`AccountFees renders discounted fee with USD volume currency and non-USD
 
 exports[`AccountFees renders discounted fee with end date 1`] = `
 <div>
-  <h4>
-    Active discounts
-  </h4>
+  <div
+    class="account-fees"
+  >
+    <hr
+      aria-orientation="horizontal"
+      class="components-divider components-card__divider components-card-divider css-yo8r29-DividerView-renderBorder-renderSize-renderMargin-Divider-borderColor e19on6iw0"
+      data-wp-c16t="true"
+      data-wp-component="CardDivider"
+      role="separator"
+    />
+    <h4>
+      Active discounts
+    </h4>
+  </div>
   <p>
     Card transactions
     :
@@ -115,9 +148,20 @@ exports[`AccountFees renders discounted fee with end date 1`] = `
 
 exports[`AccountFees renders discounted fee with volume limit 1`] = `
 <div>
-  <h4>
-    Active discounts
-  </h4>
+  <div
+    class="account-fees"
+  >
+    <hr
+      aria-orientation="horizontal"
+      class="components-divider components-card__divider components-card-divider css-yo8r29-DividerView-renderBorder-renderSize-renderMargin-Divider-borderColor e19on6iw0"
+      data-wp-c16t="true"
+      data-wp-component="CardDivider"
+      role="separator"
+    />
+    <h4>
+      Active discounts
+    </h4>
+  </div>
   <p>
     Card transactions
     :
@@ -160,9 +204,20 @@ exports[`AccountFees renders discounted fee with volume limit 1`] = `
 
 exports[`AccountFees renders discounted fee with volume limit and end date 1`] = `
 <div>
-  <h4>
-    Active discounts
-  </h4>
+  <div
+    class="account-fees"
+  >
+    <hr
+      aria-orientation="horizontal"
+      class="components-divider components-card__divider components-card-divider css-yo8r29-DividerView-renderBorder-renderSize-renderMargin-Divider-borderColor e19on6iw0"
+      data-wp-c16t="true"
+      data-wp-component="CardDivider"
+      role="separator"
+    />
+    <h4>
+      Active discounts
+    </h4>
+  </div>
   <p>
     Card transactions
     :
@@ -205,9 +260,20 @@ exports[`AccountFees renders discounted fee with volume limit and end date 1`] =
 
 exports[`AccountFees renders discounted fee without volume limit 1`] = `
 <div>
-  <h4>
-    Active discounts
-  </h4>
+  <div
+    class="account-fees"
+  >
+    <hr
+      aria-orientation="horizontal"
+      class="components-divider components-card__divider components-card-divider css-yo8r29-DividerView-renderBorder-renderSize-renderMargin-Divider-borderColor e19on6iw0"
+      data-wp-c16t="true"
+      data-wp-component="CardDivider"
+      role="separator"
+    />
+    <h4>
+      Active discounts
+    </h4>
+  </div>
   <p>
     Card transactions
     :
@@ -223,9 +289,20 @@ exports[`AccountFees renders discounted fee without volume limit 1`] = `
 
 exports[`AccountFees renders discounted non-USD base fee 1`] = `
 <div>
-  <h4>
-    Active discounts
-  </h4>
+  <div
+    class="account-fees"
+  >
+    <hr
+      aria-orientation="horizontal"
+      class="components-divider components-card__divider components-card-divider css-yo8r29-DividerView-renderBorder-renderSize-renderMargin-Divider-borderColor e19on6iw0"
+      data-wp-c16t="true"
+      data-wp-component="CardDivider"
+      role="separator"
+    />
+    <h4>
+      Active discounts
+    </h4>
+  </div>
   <p>
     Card transactions
     :
@@ -268,9 +345,20 @@ exports[`AccountFees renders discounted non-USD base fee 1`] = `
 
 exports[`AccountFees renders discounts multiple payment methods 1`] = `
 <div>
-  <h4>
-    Active discounts
-  </h4>
+  <div
+    class="account-fees"
+  >
+    <hr
+      aria-orientation="horizontal"
+      class="components-divider components-card__divider components-card-divider css-yo8r29-DividerView-renderBorder-renderSize-renderMargin-Divider-borderColor e19on6iw0"
+      data-wp-c16t="true"
+      data-wp-component="CardDivider"
+      role="separator"
+    />
+    <h4>
+      Active discounts
+    </h4>
+  </div>
   <p>
     Card transactions
     :
@@ -306,9 +394,20 @@ exports[`AccountFees renders discounts multiple payment methods 1`] = `
 
 exports[`AccountFees renders first discounted fee ignoring the rest 1`] = `
 <div>
-  <h4>
-    Active discounts
-  </h4>
+  <div
+    class="account-fees"
+  >
+    <hr
+      aria-orientation="horizontal"
+      class="components-divider components-card__divider components-card-divider css-yo8r29-DividerView-renderBorder-renderSize-renderMargin-Divider-borderColor e19on6iw0"
+      data-wp-c16t="true"
+      data-wp-component="CardDivider"
+      role="separator"
+    />
+    <h4>
+      Active discounts
+    </h4>
+  </div>
   <p>
     Card transactions
     :
@@ -324,9 +423,20 @@ exports[`AccountFees renders first discounted fee ignoring the rest 1`] = `
 
 exports[`AccountFees renders non-USD base fee 1`] = `
 <div>
-  <h4>
-    Active discounts
-  </h4>
+  <div
+    class="account-fees"
+  >
+    <hr
+      aria-orientation="horizontal"
+      class="components-divider components-card__divider components-card-divider css-yo8r29-DividerView-renderBorder-renderSize-renderMargin-Divider-borderColor e19on6iw0"
+      data-wp-c16t="true"
+      data-wp-component="CardDivider"
+      role="separator"
+    />
+    <h4>
+      Active discounts
+    </h4>
+  </div>
   <p>
     Card transactions
     :
@@ -342,9 +452,20 @@ exports[`AccountFees renders non-USD base fee 1`] = `
 
 exports[`AccountFees renders normal base fee 1`] = `
 <div>
-  <h4>
-    Active discounts
-  </h4>
+  <div
+    class="account-fees"
+  >
+    <hr
+      aria-orientation="horizontal"
+      class="components-divider components-card__divider components-card-divider css-yo8r29-DividerView-renderBorder-renderSize-renderMargin-Divider-borderColor e19on6iw0"
+      data-wp-c16t="true"
+      data-wp-component="CardDivider"
+      role="separator"
+    />
+    <h4>
+      Active discounts
+    </h4>
+  </div>
   <p>
     Card transactions
     :
diff --git a/client/components/account-status/account-tools/index.tsx b/client/components/account-status/account-tools/index.tsx
new file mode 100644
index 00000000000..1a7d8039829
--- /dev/null
+++ b/client/components/account-status/account-tools/index.tsx
@@ -0,0 +1,67 @@
+/**
+ * External dependencies
+ */
+import React, { useState } from 'react';
+import { Button, CardDivider } from '@wordpress/components';
+import { addQueryArgs } from '@wordpress/url';
+
+/**
+ * Internal dependencies
+ */
+import strings from './strings';
+import { isInDevMode } from 'utils';
+import './styles.scss';
+import ResetAccountModal from 'wcpay/overview/modal/reset-account';
+import { trackAccountReset } from 'wcpay/onboarding/tracking';
+
+interface Props {
+	accountLink: string;
+	openModal: () => void;
+}
+
+const handleReset = () => {
+	trackAccountReset();
+
+	window.location.href = addQueryArgs( wcpaySettings.connectUrl, {
+		'wcpay-reset-account': true,
+	} );
+};
+
+export const AccountTools: React.FC< Props > = ( props: Props ) => {
+	const accountLink = props.accountLink;
+	const [ modalVisible, setModalVisible ] = useState( false );
+
+	if ( isInDevMode() ) return null;
+
+	return (
+		<>
+			<div className="account-tools">
+				<CardDivider />
+				<h4>{ strings.title }</h4>
+				<p>{ strings.description }</p>
+				{ /* Use wrapping div to keep buttons grouped together. */ }
+				<div className="account-tools__actions">
+					<Button
+						variant={ 'secondary' }
+						href={ accountLink }
+						target={ '_blank' }
+					>
+						{ strings.finish }
+					</Button>
+					<Button
+						variant={ 'tertiary' }
+						onClick={ () => setModalVisible( true ) }
+					>
+						{ strings.reset }
+					</Button>
+				</div>
+			</div>
+
+			<ResetAccountModal
+				isVisible={ modalVisible }
+				onDismiss={ () => setModalVisible( false ) }
+				onSubmit={ handleReset }
+			/>
+		</>
+	);
+};
diff --git a/client/components/account-status/account-tools/strings.tsx b/client/components/account-status/account-tools/strings.tsx
new file mode 100644
index 00000000000..47c668d0a88
--- /dev/null
+++ b/client/components/account-status/account-tools/strings.tsx
@@ -0,0 +1,15 @@
+/* eslint-disable max-len */
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+export default {
+	title: __( 'Account Tools', 'woocommerce-payments' ),
+	description: __(
+		'Payments and deposits are disabled until account setup is completed. If you are experiencing problems completing account setup, or need to change the email/country associated with your account, you can reset your account and start from the beginning.',
+		'woocommerce-payments'
+	),
+	finish: __( 'Finish setup', 'woocommerce-payments' ),
+	reset: __( 'Reset account', 'woocommerce-payments' ),
+};
diff --git a/client/components/account-status/account-tools/styles.scss b/client/components/account-status/account-tools/styles.scss
new file mode 100644
index 00000000000..aa2a29348cd
--- /dev/null
+++ b/client/components/account-status/account-tools/styles.scss
@@ -0,0 +1,11 @@
+.account-tools {
+	padding-top: $gap;
+
+	&__actions {
+		display: grid;
+		grid-auto-flow: column;
+		grid-auto-columns: max-content;
+		column-gap: $gap-small;
+		margin-top: $gap-small;
+	}
+}
diff --git a/client/components/account-status/account-tools/test/__snapshots__/index.test.tsx.snap b/client/components/account-status/account-tools/test/__snapshots__/index.test.tsx.snap
new file mode 100644
index 00000000000..cfeba86037a
--- /dev/null
+++ b/client/components/account-status/account-tools/test/__snapshots__/index.test.tsx.snap
@@ -0,0 +1,40 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AccountTools should render in live mode 1`] = `
+<div>
+  <div
+    class="account-tools"
+  >
+    <hr
+      aria-orientation="horizontal"
+      class="components-divider components-card__divider components-card-divider css-yo8r29-DividerView-renderBorder-renderSize-renderMargin-Divider-borderColor e19on6iw0"
+      data-wp-c16t="true"
+      data-wp-component="CardDivider"
+      role="separator"
+    />
+    <h4>
+      Account Tools
+    </h4>
+    <p>
+      Payments and deposits are disabled until account setup is completed. If you are experiencing problems completing account setup, or need to change the email/country associated with your account, you can reset your account and start from the beginning.
+    </p>
+    <div
+      class="account-tools__actions"
+    >
+      <a
+        class="components-button is-secondary"
+        href="/onboarding"
+        target="_blank"
+      >
+        Finish setup
+      </a>
+      <button
+        class="components-button is-tertiary"
+        type="button"
+      >
+        Reset account
+      </button>
+    </div>
+  </div>
+</div>
+`;
diff --git a/client/components/account-status/account-tools/test/index.test.tsx b/client/components/account-status/account-tools/test/index.test.tsx
new file mode 100644
index 00000000000..7c5827b115a
--- /dev/null
+++ b/client/components/account-status/account-tools/test/index.test.tsx
@@ -0,0 +1,49 @@
+/** @format */
+/**
+ * External dependencies
+ */
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import { AccountTools } from '..';
+
+const accountLink = '/onboarding';
+const openModal = jest.fn();
+
+declare const global: {
+	wcpaySettings: {
+		devMode: boolean;
+	};
+};
+
+describe( 'AccountTools', () => {
+	it( 'should render in live mode', () => {
+		global.wcpaySettings = {
+			devMode: false,
+		};
+
+		const { container } = render(
+			<AccountTools accountLink={ accountLink } openModal={ openModal } />
+		);
+		expect( container ).toMatchSnapshot();
+	} );
+
+	it( 'should not render in dev mode', () => {
+		global.wcpaySettings = {
+			devMode: true,
+		};
+
+		render(
+			<AccountTools accountLink={ accountLink } openModal={ openModal } />
+		);
+
+		expect(
+			screen.queryByText(
+				'If you are experiencing problems completing account setup, or need to change the email/country associated with your account, you can reset your account and start from the beginning.'
+			)
+		).not.toBeInTheDocument();
+	} );
+} );
diff --git a/client/components/account-status/index.js b/client/components/account-status/index.js
index 6a35084ad18..19fc715b1ff 100755
--- a/client/components/account-status/index.js
+++ b/client/components/account-status/index.js
@@ -23,6 +23,7 @@ import PaymentsStatus from 'components/payments-status';
 import StatusChip from './status-chip';
 import './style.scss';
 import './shared.scss';
+import { AccountTools } from './account-tools';
 
 const AccountStatusCard = ( props ) => {
 	const { title, children, value } = props;
@@ -102,6 +103,9 @@ const AccountStatusDetails = ( props ) => {
 					}
 				/>
 			</AccountStatusItem>
+			{ ! accountStatus.detailsSubmitted && (
+				<AccountTools accountLink={ accountStatus.accountLink } />
+			) }
 			{ accountFees.length > 0 && (
 				<AccountFees accountFees={ accountFees } />
 			) }
diff --git a/client/components/account-status/test/__snapshots__/index.js.snap b/client/components/account-status/test/__snapshots__/index.js.snap
index edead6f2fbd..712f139c0ca 100644
--- a/client/components/account-status/test/__snapshots__/index.js.snap
+++ b/client/components/account-status/test/__snapshots__/index.js.snap
@@ -166,9 +166,53 @@ exports[`AccountStatus renders normal status 1`] = `
             </span>
           </div>
         </div>
-        <h4>
-          Active discounts
-        </h4>
+        <div
+          class="account-tools"
+        >
+          <hr
+            aria-orientation="horizontal"
+            class="components-divider components-card__divider components-card-divider css-yo8r29-DividerView-renderBorder-renderSize-renderMargin-Divider-borderColor e19on6iw0"
+            data-wp-c16t="true"
+            data-wp-component="CardDivider"
+            role="separator"
+          />
+          <h4>
+            Account Tools
+          </h4>
+          <p>
+            Payments and deposits are disabled until account setup is completed. If you are experiencing problems completing account setup, or need to change the email/country associated with your account, you can reset your account and start from the beginning.
+          </p>
+          <div
+            class="account-tools__actions"
+          >
+            <button
+              class="components-button is-secondary"
+              type="button"
+            >
+              Finish setup
+            </button>
+            <button
+              class="components-button is-tertiary"
+              type="button"
+            >
+              Reset account
+            </button>
+          </div>
+        </div>
+        <div
+          class="account-fees"
+        >
+          <hr
+            aria-orientation="horizontal"
+            class="components-divider components-card__divider components-card-divider css-yo8r29-DividerView-renderBorder-renderSize-renderMargin-Divider-borderColor e19on6iw0"
+            data-wp-c16t="true"
+            data-wp-component="CardDivider"
+            role="separator"
+          />
+          <h4>
+            Active discounts
+          </h4>
+        </div>
         <p>
           Card transactions
           :
diff --git a/client/onboarding/tracking.ts b/client/onboarding/tracking.ts
index 3a083eeb64b..66ea41ebf60 100644
--- a/client/onboarding/tracking.ts
+++ b/client/onboarding/tracking.ts
@@ -57,6 +57,9 @@ export const trackRedirected = ( isEligible: boolean ): void => {
 	} );
 };
 
+export const trackAccountReset = (): void =>
+	wcpayTracks.recordEvent( wcpayTracks.events.ONBOARDING_FLOW_RESET, {} );
+
 export const trackEligibilityModalClosed = (
 	action: 'dismiss' | 'setup_deposits' | 'enable_payments_only'
 ): void =>
diff --git a/client/overview/modal/reset-account/index.tsx b/client/overview/modal/reset-account/index.tsx
new file mode 100644
index 00000000000..1146645566c
--- /dev/null
+++ b/client/overview/modal/reset-account/index.tsx
@@ -0,0 +1,64 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import { Button, CardDivider, Modal } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import strings from './strings';
+
+interface Props {
+	isVisible: boolean;
+	onSubmit: () => void;
+	onDismiss: () => void;
+}
+
+const ResetAccountModal: React.FC< Props > = ( props: Props ) => {
+	const { isVisible, onDismiss, onSubmit } = props;
+	if ( ! isVisible ) return null;
+
+	return (
+		<Modal
+			title={ 'Reset account' }
+			className="wcpay-reset-account-modal"
+			onRequestClose={ onDismiss }
+		>
+			<div className="wcpay-reset-account-modal__content">
+				<p>{ strings.description }</p>
+				<p>
+					<b>{ strings.beforeContinue }</b>
+				</p>
+				<ol>
+					<li>{ strings.step1 }</li>
+				</ol>
+				<CardDivider />
+				<ol start={ 2 }>
+					<li>{ strings.step2 }</li>
+				</ol>
+				<CardDivider />
+				<ol start={ 3 }>
+					<li>{ strings.step3 }</li>
+				</ol>
+				<CardDivider />
+				<p>{ strings.confirmation }</p>
+			</div>
+			<div className="wcpay-reset-account-modal__footer">
+				<Button variant={ 'secondary' } onClick={ onDismiss }>
+					{ strings.cancel }
+				</Button>
+				<Button
+					variant={ 'primary' }
+					isDestructive={ true }
+					onClick={ onSubmit }
+				>
+					{ strings.reset }
+				</Button>
+			</div>
+		</Modal>
+	);
+};
+
+export default ResetAccountModal;
diff --git a/client/overview/modal/reset-account/strings.tsx b/client/overview/modal/reset-account/strings.tsx
new file mode 100644
index 00000000000..1a1c7616ff0
--- /dev/null
+++ b/client/overview/modal/reset-account/strings.tsx
@@ -0,0 +1,36 @@
+/* eslint-disable max-len */
+/**
+ * External dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+
+export default {
+	title: __( 'Reset account', 'woocommerce-payments' ),
+	description: __(
+		'If you are experiencing problems completing account setup, or need to change the email/country associated with your account, you can reset your account and start from the beginning.',
+		'woocommerce-payments'
+	),
+	beforeContinue: __( 'Before you continue', 'woocommerce-payments' ),
+	step1: sprintf(
+		/* translators: %s: WooPayments. */
+		__(
+			'Your %s account will be reset, and all data will be lost.',
+			'woocommerce-payments'
+		),
+		'WooPayments'
+	),
+	step2: __(
+		'You will have to re-confirm your business and banking details.',
+		'woocommerce-payments'
+	),
+	step3: __(
+		'Once confirmed, this cannot be undone.',
+		'woocommerce-payments'
+	),
+	confirmation: __(
+		'Are you sure you want to continue?',
+		'woocommerce-payments'
+	),
+	cancel: __( 'Cancel', 'woocommerce-payments' ),
+	reset: __( 'Yes, reset account', 'woocommerce-payments' ),
+};
diff --git a/client/overview/modal/reset-account/style.scss b/client/overview/modal/reset-account/style.scss
new file mode 100644
index 00000000000..1c0f9fc0f36
--- /dev/null
+++ b/client/overview/modal/reset-account/style.scss
@@ -0,0 +1,25 @@
+.wcpay-reset-account-modal {
+	// fix for the modal being too short on smaller screens
+	@media ( max-height: 880px ) {
+		max-height: 100% !important;
+	}
+
+	.components-modal__content {
+		box-sizing: border-box;
+		max-width: 700px;
+	}
+
+	&__footer {
+		text-align: right;
+		margin-top: $gap-large;
+
+		& :first-child {
+			margin-right: $gap-smaller;
+		}
+
+		button {
+			margin-top: $gap;
+			padding: $gap-smaller $gap;
+		}
+	}
+}
diff --git a/client/overview/modal/reset-account/test/index.test.tsx b/client/overview/modal/reset-account/test/index.test.tsx
new file mode 100644
index 00000000000..50f55e78bbe
--- /dev/null
+++ b/client/overview/modal/reset-account/test/index.test.tsx
@@ -0,0 +1,35 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import ResetAccountModal from '..';
+
+jest.mock( '@wordpress/data', () => ( {
+	useDispatch: jest.fn().mockReturnValue( { updateOptions: jest.fn() } ),
+} ) );
+
+const onSubmit = jest.fn();
+const onDismiss = jest.fn();
+
+describe( 'Reset Account Modal', () => {
+	it( 'modal is open when is visible is true', () => {
+		render(
+			<ResetAccountModal
+				isVisible={ true }
+				onSubmit={ onSubmit }
+				onDismiss={ onDismiss }
+			/>
+		);
+
+		expect(
+			screen.queryByText(
+				'If you are experiencing problems completing account setup, or need to change the email/country associated with your account, you can reset your account and start from the beginning.'
+			)
+		).toBeInTheDocument();
+	} );
+} );
diff --git a/client/tracks/index.js b/client/tracks/index.js
index c02615f781d..c862f189954 100644
--- a/client/tracks/index.js
+++ b/client/tracks/index.js
@@ -124,6 +124,7 @@ const events = {
 	ONBOARDING_FLOW_HIDDEN: 'wcpay_onboarding_flow_hidden',
 	ONBOARDING_FLOW_EXITED: 'wcpay_onboarding_flow_exited',
 	ONBOARDING_FLOW_REDIRECTED: 'wcpay_onboarding_flow_redirected',
+	ONBOARDING_FLOW_RESET: 'wcpay_onboarding_flow_reset',
 	ONBOARDING_FLOW_ELIGIBILITY_MODAL_CLOSED:
 		'wcpay_onboarding_flow_eligibility_modal_closed',
 };
diff --git a/client/utils/index.js b/client/utils/index.js
index 88756614649..d6e7a1c971d 100644
--- a/client/utils/index.js
+++ b/client/utils/index.js
@@ -22,6 +22,20 @@ export const isInTestMode = ( fallback = false ) => {
 	return wcpaySettings.testMode === '1' || fallback;
 };
 
+/**
+ * Returns true if WooPayments is in dev mode, false otherwise.
+ *
+ * @param {boolean} fallback Fallback in case dev mode value can't be found (for example if the wcpaySettings are undefined).
+ *
+ * @return {boolean} True if in dev mode, false otherwise. Fallback value if test/dev mode value can't be found.
+ */
+export const isInDevMode = ( fallback = false ) => {
+	if ( typeof wcpaySettings === 'undefined' ) {
+		return fallback;
+	}
+	return wcpaySettings.devMode === '1' || fallback;
+};
+
 export const getAdminUrl = ( args ) => addQueryArgs( 'admin.php', args );
 
 /**
diff --git a/includes/class-wc-payments-account.php b/includes/class-wc-payments-account.php
index 18567fe25b6..fa4d3b45e45 100644
--- a/includes/class-wc-payments-account.php
+++ b/includes/class-wc-payments-account.php
@@ -1048,6 +1048,15 @@ public function maybe_handle_onboarding() {
 				return;
 			}
 
+			if ( isset( $_GET['wcpay-reset-account'] ) ) {
+				$test_mode = WC_Payments_Onboarding_Service::is_test_mode_enabled();
+
+				// Delete the account.
+				$this->payments_api_client->delete_account( $test_mode );
+				$this->redirect_to_onboarding_flow_page();
+				return;
+			}
+
 			// Hide menu notification badge upon starting setup.
 			update_option( 'wcpay_menu_badge_hidden', 'yes' );