[Beta Tester] Add WCPay test order meta data (#50467)

plugins/woocommerce-beta-tester/changelog/50467-add-beta-tester-wcpay-test-order

@@ -0,0 +1,4 @@
+Significance: patch
+Type: add
+
+Add WCPay test order meta data

plugins/woocommerce-beta-tester/src/app/app.js

@@ -14,6 +14,7 @@ import { default as Features } from '../features';
 import { default as RestAPIFilters } from '../rest-api-filters';
 import RemoteInboxNotifications from '../remote-inbox-notifications';
 import RemoteLogging from '../remote-logging';
+import Payments from '../payments';
 
 const tabs = applyFilters( 'woocommerce_admin_test_helper_tabs', [
 	{
@@ -51,6 +52,11 @@ const tabs = applyFilters( 'woocommerce_admin_test_helper_tabs', [
 		title: 'Remote Logging',
 		content: <RemoteLogging />,
 	},
+	{
+		name: 'woocommerce-payments',
+		title: 'WCPay',
+		content: <Payments />,
+	},
 ] );
 
 export function App() {

plugins/woocommerce-beta-tester/src/payments/index.js

@@ -0,0 +1,160 @@
+/**
+ * External dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { ORDERS_STORE_NAME } from '@woocommerce/data';
+import { ToggleControl } from '@wordpress/components';
+import apiFetch from '@wordpress/api-fetch';
+
+const metaKey = '_wcpay_mode';
+
+const Payments = () => {
+	const {
+		orders = [],
+		isRequesting,
+		isError,
+	} = useSelect( ( select ) => {
+		const { getOrders, hasFinishedResolution, getOrdersError } =
+			select( ORDERS_STORE_NAME );
+
+		const query = {
+			page: 1,
+			per_page: 10,
+		};
+		const orders = getOrders( query, null );
+		const isRequesting = hasFinishedResolution( 'getOrders', [ query ] );
+
+		return {
+			orders,
+			isError: Boolean( getOrdersError( orders ) ),
+			isRequesting,
+		};
+	} );
+
+	const { getOrderSuccess } = useDispatch( ORDERS_STORE_NAME );
+
+	const isTestOrder = ( order ) =>
+		order.meta_data.find( ( metaItem ) => metaItem.key === metaKey )
+			?.value === 'test';
+
+	const onToggle = async ( order, isChecked ) => {
+		const data = {
+			meta_data: [
+				{
+					key: metaKey,
+					value: isChecked ? 'test' : 'live',
+				},
+			],
+		};
+
+		try {
+			const updatedOrder = await apiFetch( {
+				path: `/wc/v3/orders/${ order.id }`,
+				method: 'PUT',
+				data: data,
+				headers: {
+					'Content-Type': 'application/json',
+				},
+			} );
+			getOrderSuccess( order.id, updatedOrder );
+		} catch ( error ) {
+			throw error;
+		}
+	};
+
+	const renderOrders = ( orders ) => {
+		return orders.map( ( order ) => {
+			return (
+				<tr key={ order.id }>
+					<td className="manage-column column-thumb" key={ 0 }>
+						{ `${ order?.billing?.first_name } ${ order?.billing?.last_name }` }
+					</td>
+					<td className="manage-column column-thumb" key={ 1 }>
+						{ order.id }
+					</td>
+					<td
+						className="manage-column column-thumb"
+						key={ 'optionValue' }
+					>
+						{ order.date_created_gmt }
+					</td>
+					<td
+						className="manage-column column-thumb align-center"
+						key={ 2 }
+					>
+						{ order.status }
+					</td>
+					<td
+						className="manage-column column-thumb align-center"
+						key={ 3 }
+					>
+						{ order.total }
+					</td>
+					<td
+						className="manage-column column-thumb align-center"
+						key={ 4 }
+					>
+						<ToggleControl
+							checked={ isTestOrder( order ) }
+							onChange={ ( isChecked ) =>
+								onToggle( order, isChecked )
+							}
+						/>
+					</td>
+				</tr>
+			);
+		} );
+	};
+
+	return (
+		<>
+			<h2>WooCommerce Payments</h2>
+			<table className="wp-list-table striped table-view-list widefat">
+				<thead>
+					<tr>
+						<td className="manage-column column-thumb" key={ 0 }>
+							Order
+						</td>
+						<td className="manage-column column-thumb" key={ 1 }>
+							ID
+						</td>
+						<td
+							className="manage-column column-thumb"
+							key={ 'optionValue' }
+						>
+							Date
+						</td>
+						<td
+							className="manage-column column-thumb align-center"
+							key={ 2 }
+						>
+							Status
+						</td>
+						<td
+							className="manage-column column-thumb align-center"
+							key={ 3 }
+						>
+							Total
+						</td>
+						<td
+							className="manage-column column-thumb align-center"
+							key={ 4 }
+						>
+							WCPay Test Order
+						</td>
+					</tr>
+				</thead>
+				<tbody>
+					{ ! isRequesting &&
+						orders?.length &&
+						renderOrders( orders ) }
+				</tbody>
+			</table>
+			{ ! isRequesting && orders?.length === 0 && (
+				<p>No orders found.</p>
+			) }
+		</>
+	);
+};
+
+export default Payments;