Merge branch 'develop' into refactor/server-export-sync-download

# Conflicts:
#	client/transactions/list/test/index.tsx

bin/docker-setup.sh

@@ -101,6 +101,12 @@ cli wp option set woocommerce_currency "USD"
 cli wp option set woocommerce_product_type "both"
 cli wp option set woocommerce_allow_tracking "no"
 
+echo "Deactivating Coming Soon mode in WooCommerce..."
+cli wp option set woocommerce_coming_soon "no"
+
+echo "Enabling company field as an optional parameter in checkout form..."
+cli wp option set woocommerce_checkout_company_field "optional"
+
 echo "Importing WooCommerce shop pages..."
 cli wp wc --user=admin tool run install_pages
 

changelog/add-545-persist-reporting-table-column-visibility

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Added persistent column visibility preferences for reporting tables, allowing merchants to customize and save their preferred table view layouts across sessions.

changelog/dev-10061-e2e-create-playwright-shopper-checkout-failures-spec

@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+
+E2E Playwright Migration: convert shopper-checkout-failures spec to Playwright and remove Puppeteer spec.

changelog/dev-10084-shopper-myaccount-renew-subscription-e2e-test

@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+
+Migrate the Shopper Renew Subscription spec to Playwright and remove the corresponding Puppeteer test.

changelog/fix-failing-e2e-tests

@@ -0,0 +1,5 @@
+Significance: patch
+Type: dev
+Comment: Fix for multiple failing E2E tests.
+
+

changelog/update-10021-remove-dateformatnotice

@@ -0,0 +1,4 @@
+Significance: patch
+Type: update
+
+Remove date format notice across all admin pages.

client/capital/index.tsx

@@ -25,7 +25,6 @@ import { useLoans } from 'wcpay/data';
 import { getAdminUrl } from 'wcpay/utils';
 import './style.scss';
 import { formatDateTimeFromString } from 'wcpay/utils/date-time';
-import DateFormatNotice from 'wcpay/components/date-format-notice';
 
 const columns = [
 	{
@@ -210,7 +209,6 @@ const CapitalPage = (): JSX.Element => {
 
 	return (
 		<Page>
-			<DateFormatNotice />
 			<TestModeNotice currentPage="loans" />
 
 			{ wcpaySettings.accountLoans.has_active_loan && (
@@ -227,6 +225,7 @@ const CapitalPage = (): JSX.Element => {
 				rows={ getRowsData( loans ) }
 				rowsPerPage={ loans.length }
 				summary={ getSummary( loans ) }
+				// The Capital Loan table does not have column configuration enabled, see issue #10106.
 				showMenu={ false }
 			/>
 		</Page>

client/capital/test/__snapshots__/index.test.tsx.snap

@@ -5,54 +5,6 @@ exports[`CapitalPage renders the TableCard component with loan data 1`] = `
   <div
     class=" woocommerce-payments-page"
   >
-    <div
-      class="date-format-notice wcpay-banner-notice is-info"
-    >
-      <svg
-        aria-hidden="true"
-        class="wcpay-banner-notice__icon"
-        focusable="false"
-        height="24"
-        viewBox="0 0 24 24"
-        width="24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M12 3.2c-4.8 0-8.8 3.9-8.8 8.8 0 4.8 3.9 8.8 8.8 8.8 4.8 0 8.8-3.9 8.8-8.8 0-4.8-4-8.8-8.8-8.8zm0 16c-4 0-7.2-3.3-7.2-7.2C4.8 8 8 4.8 12 4.8s7.2 3.3 7.2 7.2c0 4-3.2 7.2-7.2 7.2zM11 17h2v-6h-2v6zm0-8h2V7h-2v2z"
-        />
-      </svg>
-      <div
-        class="wcpay-banner-notice__content"
-      >
-        The date and time formats now match your preferences. You can update them anytime in the 
-        <a
-          data-link-type="external"
-          href="/wp-admin/options-general.php"
-        >
-          settings
-        </a>
-        .
-      </div>
-      <button
-        aria-label="Dismiss this notice"
-        class="components-button wcpay-banner-notice__dismiss has-icon"
-        type="button"
-      >
-        <svg
-          class="gridicon gridicons-cross-small"
-          height="24"
-          viewBox="0 0 24 24"
-          width="24"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <g>
-            <path
-              d="M17.705 7.705l-1.41-1.41L12 10.59 7.705 6.295l-1.41 1.41L10.59 12l-4.295 4.295 1.41 1.41L12 13.41l4.295 4.295 1.41-1.41L13.41 12l4.295-4.295z"
-            />
-          </g>
-        </svg>
-      </button>
-    </div>
     <div
       class="wcpay-banner-notice is-warning"
     >

client/deposits/details/index.tsx

@@ -39,7 +39,6 @@ import {
 import { depositStatusLabels } from '../strings';
 import './style.scss';
 import { formatDateTimeFromString } from 'wcpay/utils/date-time';
-import DateFormatNotice from 'wcpay/components/date-format-notice';
 
 /**
  * Renders the deposit status indicator UI, re-purposing the OrderStatus component from @woocommerce/components.
@@ -242,7 +241,6 @@ export const DepositDetails: React.FC< DepositDetailsProps > = ( {
 
 	return (
 		<Page>
-			<DateFormatNotice />
 			<TestModeNotice currentPage="deposits" isDetailsView={ true } />
 			<ErrorBoundary>
 				{ isLoading ? (

client/deposits/index.tsx

@@ -22,7 +22,6 @@ import { useSettings } from 'wcpay/data';
 import DepositsList from './list';
 import { hasAutomaticScheduledDeposits } from 'wcpay/deposits/utils';
 import { recordEvent } from 'wcpay/tracks';
-import DateFormatNotice from 'wcpay/components/date-format-notice';
 
 const useNextDepositNoticeState = () => {
 	const { updateOptions } = useDispatch( 'wc/admin/options' );
@@ -149,7 +148,6 @@ const DepositsPage: React.FC = () => {
 
 	return (
 		<Page>
-			<DateFormatNotice />
 			<TestModeNotice currentPage="deposits" />
 			<NextDepositNotice />
 			<DepositFailureNotice />

client/deposits/list/index.tsx

@@ -5,7 +5,6 @@
  */
 import React, { useState } from 'react';
 import { recordEvent } from 'tracks';
-import { useMemo } from '@wordpress/element';
 import { __, _n, sprintf } from '@wordpress/i18n';
 import { TableCard, Link } from '@woocommerce/components';
 import { onQueryChange, getQuery } from '@woocommerce/navigation';
@@ -39,6 +38,7 @@ import DepositStatusChip from 'components/deposit-status-chip';
 
 import './style.scss';
 import { formatDateTimeFromString } from 'wcpay/utils/date-time';
+import { usePersistedColumnVisibility } from 'wcpay/hooks/use-persisted-table-column-visibility';
 
 const getColumns = ( sortByDate?: boolean ): DepositsTableHeader[] => [
 	{
@@ -104,7 +104,11 @@ export const DepositsList = (): JSX.Element => {
 	);
 
 	const sortByDate = ! getQuery().orderby || 'date' === getQuery().orderby;
-	const columns = useMemo( () => getColumns( sortByDate ), [ sortByDate ] );
+	const columns = getColumns( sortByDate );
+	const { columnsToDisplay, onColumnsChange } = usePersistedColumnVisibility<
+		DepositsTableHeader
+	>( 'wc_payments_payouts_hidden_columns', columns );
+
 	const totalRows = depositsSummary.count || 0;
 
 	const rows = deposits.map( ( deposit ) => {
@@ -157,7 +161,9 @@ export const DepositsList = (): JSX.Element => {
 			},
 		};
 
-		return columns.map( ( { key } ) => data[ key ] || { display: null } );
+		return columnsToDisplay.map(
+			( { key } ) => data[ key ] || { display: null }
+		);
 	} );
 
 	const isCurrencyFiltered = 'string' === typeof getQuery().store_currency_is;
@@ -341,11 +347,12 @@ export const DepositsList = (): JSX.Element => {
 				isLoading={ isLoading }
 				rowsPerPage={ parseInt( getQuery().per_page ?? '' ) || 25 }
 				totalRows={ totalRows }
-				headers={ columns }
+				headers={ columnsToDisplay }
 				rows={ rows }
 				summary={ summary }
 				query={ getQuery() }
 				onQueryChange={ onQueryChange }
+				onColumnsChange={ onColumnsChange }
 				actions={ [
 					downloadable && (
 						<DownloadButton

client/deposits/list/test/index.tsx

@@ -3,12 +3,13 @@
 /**
  * External dependencies
  */
+import React from 'react';
 import { render, waitFor } from '@testing-library/react';
 import { updateQueryString } from '@woocommerce/navigation';
 import { downloadCSVFile } from '@woocommerce/csv-export';
 import apiFetch from '@wordpress/api-fetch';
-
 import os from 'os';
+import { useUserPreferences } from '@woocommerce/data';
 
 /**
  * Internal dependencies
@@ -21,7 +22,6 @@ import {
 	CachedDeposits,
 	DepositsSummary,
 } from 'wcpay/types/deposits';
-import React from 'react';
 
 jest.mock( 'wcpay/data', () => ( {
 	useDeposits: jest.fn(),
@@ -39,6 +39,15 @@ jest.mock( '@woocommerce/csv-export', () => {
 
 jest.mock( '@wordpress/api-fetch', () => jest.fn() );
 
+jest.mock( '@woocommerce/data', () => {
+	const actualModule = jest.requireActual( '@woocommerce/data' );
+
+	return {
+		...actualModule,
+		useUserPreferences: jest.fn(),
+	};
+} );
+
 const mockDeposits = [
 	{
 		id: 'po_mock1',
@@ -117,13 +126,23 @@ const mockDownloadCSVFile = downloadCSVFile as jest.MockedFunction<
 	typeof downloadCSVFile
 >;
 
+const mockUseUserPreferences = useUserPreferences as jest.MockedFunction<
+	typeof useUserPreferences
+>;
+
 describe( 'Deposits list', () => {
 	beforeEach( () => {
 		jest.clearAllMocks();
 
 		// the query string is preserved across tests, so we need to reset it
 		updateQueryString( {}, '/', {} );
 
+		mockUseUserPreferences.mockReturnValue( {
+			updateUserPreferences: jest.fn(),
+			wc_payments_payouts_hidden_columns: '',
+			isRequesting: false,
+		} as any );
+
 		global.wcpaySettings = {
 			zeroDecimalCurrencies: [],
 			connect: {

client/disputes/index.tsx

@@ -44,9 +44,9 @@ import { getDisputesCSV } from 'wcpay/data/disputes/resolvers';
 import { applyThousandSeparator } from 'wcpay/utils';
 import { useSettings } from 'wcpay/data';
 import { isAwaitingResponse } from 'wcpay/disputes/utils';
-import DateFormatNotice from 'wcpay/components/date-format-notice';
 import './style.scss';
 import { formatDateTimeFromString } from 'wcpay/utils/date-time';
+import { usePersistedColumnVisibility } from 'wcpay/hooks/use-persisted-table-column-visibility';
 
 const getHeaders = ( sortColumn?: string ): DisputesTableHeader[] => [
 	{
@@ -208,6 +208,10 @@ export const DisputesList = (): JSX.Element => {
 	);
 
 	const headers = getHeaders( getQuery().orderby );
+	const { columnsToDisplay, onColumnsChange } = usePersistedColumnVisibility<
+		DisputesTableHeader
+	>( 'wc_payments_disputes_hidden_columns', headers );
+
 	const totalRows = disputesSummary.count || 0;
 
 	const rows = disputes.map( ( dispute ) => {
@@ -524,7 +528,6 @@ export const DisputesList = (): JSX.Element => {
 
 	return (
 		<Page>
-			<DateFormatNotice />
 			<TestModeNotice currentPage="disputes" />
 			<DisputesFilters storeCurrencies={ storeCurrencies } />
 			<TableCard
@@ -533,11 +536,12 @@ export const DisputesList = (): JSX.Element => {
 				isLoading={ isLoading }
 				rowsPerPage={ parseInt( getQuery().per_page ?? '', 10 ) || 25 }
 				totalRows={ totalRows }
-				headers={ headers }
+				headers={ columnsToDisplay }
 				rows={ rows }
 				summary={ summary }
 				query={ getQuery() }
 				onQueryChange={ onQueryChange }
+				onColumnsChange={ onColumnsChange }
 				actions={ [
 					downloadable && (
 						<DownloadButton