Release branch for 9.7.0

.eslintrc

@@ -102,6 +102,10 @@
 			{
 				"selector": "ImportDeclaration[source.value=/gridicons(?!\\u002F)/]",
 				"message": "Do not import whole Gridicons, import them individually with 'gridicons/dist/icon-name'."
+			},
+			{
+				"selector": "ImportDeclaration[source.value='@wordpress/components']",
+				"message": "Do not import from '@wordpress/components' directly. Use components from 'wcpay/components/wp-components-wrapped' instead."
 			}
 		]
 	},

.gitignore

@@ -11,6 +11,9 @@ project.properties
 *.sublime-workspace
 .sublimelinterrc
 .cursor/
+.claude/
+.zed/
+.phpactor.json
 
 # Bundle
 dist

changelog.txt

@@ -1,5 +1,65 @@
 *** WooPayments Changelog ***
 
+= 9.7.0 - 2025-07-24 =
+* Add - Add a confirmation screen to the new flow for submitting dispute evidence.
+* Add - Add Credit not processed logic for the new evidence submission form.
+* Add - Add external help link to the recomended documents section.
+* Add - Add logic for Duplicate chargeback reason for the new evidence submission form.
+* Add - Add logic for subscription cancelled for the new evidence form.
+* Add - Add new transaction type fee_refund
+* Add - File name should show size the extension
+* Add - New evidence flow for the "General" dispute type.
+* Fix - Accept TAP_TO_PAY_DEVICE as a valid card reader model to consider a transaction as TTP.
+* Fix - Adjusted deactivation modal behavior to correctly resize when its content updates.
+* Fix - Change copy to avoid leaving words alone.
+* Fix - Consolidate test account notices in one in the WooPayments Settings page.
+* Fix - Enable WooPay Direct Checkout on mini-cart.
+* Fix - Fix - Remove unwanted animations and improve styling consistency on dispute evidence pages.
+* Fix - Fix: Allow multiple authorization cancellations on the same order.
+* Fix - Fix: Google Pay 3D Secure authentication being bypassed due to redirect URL extraction issue
+* Fix - fix: remove BNPLs from PMME when BNPL method is not active
+* Fix - Fix: Spinner alignment issues in cart checkout button and checkout address form email field.
+* Fix - Fix border color of some items.
+* Fix - Fix copy for the documents section and fix the font size of the content inside the accordion on top.
+* Fix - Fix filename issue on the new evidence submission form.
+* Fix - Fix margin of the shipping details title on the evidence submission form.
+* Fix - Fix order notes after subscriptions' payment method gets changed.
+* Fix - Fix spacings on the envidence submission form
+* Fix - Fix vertical UI shift when uploading a file
+* Fix - Fix WooPay button spinner on some themes.
+* Fix - Improve the cover letter save behavior.
+* Fix - Provide correct language code when requesting CSV exports in a region-specific language
+* Fix - Remove unnecessary gap
+* Fix - Step back should also scroll the page to the top
+* Fix - Support numbers starting from 4, 7, 8 for Hong Kong phones.
+* Update - Disallow challenging the Visa compliance disputes.
+* Update - ensure payments and transactions pages uses wp components that come with the WP installation.
+* Update - Improve multicurrency caching and use new API endpoint.
+* Update - Make the card reaaders page use the wp.components available in the WordPress installation.
+* Update - Redirect merchant to the dispute detail screen
+* Update - Redirects to the dispute list after save.
+* Update - Removes the feature flag for the new evidence submission form.
+* Update - update: deactivation survey to use WP components bundled within the WP installation
+* Update - update: ensure multi-currency settings page uses wp components that come with the WP installation; updated some styles to use WP components, rather than bespoke components;
+* Update - update: ensure settings page uses wp components that come with the WP installation
+* Update - update: multi-currency widget to use WP components bundled within the WP installation
+* Update - update: order page assets with wp components
+* Update - update: RedirectToTransactionDetails to use Gutenberg components that come with the WP installation
+* Update - update: removed the payment gateways confirmation dialog
+* Update - update: subscription-product-onboarding to use WP components bundled within the WP installation
+* Update - update: TOS agreement dialog to use WP Components bundled within the WP installation
+* Update - Update client to use NOX surfaces instead of MOX/Connect page wherever possible.
+* Update - Update copy for disputes
+* Update - Update Multi-currency settings to use wp.components available in the WordPress installation.
+* Update - Update the payments overview page to use the components available in the WP installation.
+* Update - Update the payout list and payout details pages to use the WP components available on the WP installation.
+* Dev - Fix imports for the unbundled components.
+* Dev - Prevent "Evidence saved" toast from appearing multiple times.
+* Dev - Remove conversion to the server locale, as it is done on the server.
+* Dev - Remove feature flag _wcpay_feature_documents
+* Dev - Remove old evidence submission code
+* Dev - update: ensure `wp-components-wrapped` has individually exported components
+
 = 9.6.0 - 2025-07-02 =
 * Add - Add cover letter for the new evidence submission screen for Product Unacceptable chargeback reason
 * Add - Added a URL parameter to allow merchants to access the VAT details modal.

client/card-readers/index.tsx

@@ -11,7 +11,7 @@ import { __ } from '@wordpress/i18n';
  */
 import Page from 'components/page';
 import ReadersList from './list';
-import { TabPanel } from '@wordpress/components';
+import { TabPanel } from 'wcpay/components/wp-components-wrapped/components/tab-panel';
 
 import './style.scss';
 

client/card-readers/list/index.tsx

@@ -4,11 +4,13 @@
  */
 import React from 'react';
 import { __, sprintf } from '@wordpress/i18n';
-import { Card, CardBody, CardDivider } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
+import { Card } from 'wcpay/components/wp-components-wrapped/components/card';
+import { CardBody } from 'wcpay/components/wp-components-wrapped/components/card-body';
+import { CardDivider } from 'wcpay/components/wp-components-wrapped/components/card-divider';
 import SettingsSection from 'wcpay/settings/settings-section';
 import SettingsLayout from 'wcpay/settings/settings-layout';
 import LoadableSettingsSection from 'wcpay/settings/loadable-settings-section';

client/cart/blocks/index.js

@@ -2,6 +2,7 @@
  * Internal dependencies
  */
 import { renderBNPLCartMessaging } from './product-details';
+import './style.scss';
 
 const { registerPlugin } = window.wp.plugins;
 

client/cart/blocks/style.scss

@@ -0,0 +1,19 @@
+/**
+ * Cart Blocks Styles
+ *
+ * This file contains styles specific to WooCommerce cart blocks
+ * and WCPay integrations within the cart context.
+ */
+
+/**
+ * Fix for cart submit button spinner alignment
+ */
+.wc-block-cart__submit-button .wc-block-components-button__text {
+	position: relative;
+
+	.wc-block-components-spinner {
+		/* Override the base style's top/left: initial */
+		top: 0;
+		left: 0;
+	}
+}

client/checkout/woopay/style.scss

@@ -24,6 +24,21 @@
 	}
 }
 
+/* Fix for address form email field spinner alignment */
+.wc-block-components-address-form__email {
+	position: relative;
+
+	.wc-block-components-spinner {
+		/* Override the base style's top/left: initial */
+		top: 50%;
+		left: auto;
+		right: 10px;
+		width: 24px;
+		height: 24px;
+		transform: translateY( -50% );
+	}
+}
+
 .woopay-login-session-iframe {
 	width: 100%;
 	height: 100vh;
@@ -150,6 +165,8 @@
 	box-sizing: content-box;
 	text-align: center;
 	font-size: 1.25em;
+	top: initial;
+	left: initial;
 
 	&::after {
 		content: ' ';

client/components/accordion/body.tsx

@@ -3,9 +3,6 @@
  */
 import clsx from 'clsx';
 import React, { useEffect, useRef, useState, forwardRef } from 'react';
-/**
- * WordPress dependencies
- */
 import { useMergeRefs } from '@wordpress/compose';
 
 /**

client/components/accordion/title.tsx

@@ -3,17 +3,15 @@
  */
 import React, { forwardRef } from 'react';
 import clsx from 'clsx';
-/**
- * WordPress dependencies
- */
 import { chevronUp, chevronDown } from '@wordpress/icons';
+import { Icon } from 'wcpay/components/wp-components-wrapped/components/icon';
+import { Button } from 'wcpay/components/wp-components-wrapped/components/button';
 
 /**
  * Internal dependencies
  */
 import type { AccordionTitleProps } from './types';
 import type { WordPressComponentProps } from '@wordpress/components/ui/context/wordpress-component';
-import { Button, Icon } from 'wcpay/components/wp-components-wrapped';
 import AccordionSubtitle from './subtitle';
 import './style.scss';
 
@@ -36,6 +34,7 @@ const AccordionTitle = forwardRef<
 						'is-md': md,
 						'is-lg': lg,
 					} ) }
+					// @ts-expect-error: there is a type discrepancy between the wrapped WP components and the bundled components.
 					ref={ ref }
 					{ ...props }
 				>
@@ -45,6 +44,7 @@ const AccordionTitle = forwardRef<
 			*/ }
 					<span aria-hidden="true">
 						<Icon
+							// @ts-expect-error: className is not a prop defined in the WP Icon component.
 							className="wcpay-accordion__arrow"
 							icon={ isOpened ? chevronUp : chevronDown }
 						/>
@@ -58,6 +58,7 @@ const AccordionTitle = forwardRef<
 					{ icon && (
 						<Icon
 							icon={ icon }
+							// @ts-expect-error: className is not a prop defined in the WP Icon component.
 							className="wcpay-accordion__icon"
 							size={ 20 }
 						/>

client/components/accordion/types.ts

@@ -1,8 +1,9 @@
 /**
- * WordPress dependencies
+ * External dependencies
  */
 // eslint-disable-next-line import/no-unresolved
 import { WordPressComponentProps } from '@wordpress/components/ui/context/wordpress-component';
+// eslint-disable-next-line no-restricted-syntax
 import { Button } from '@wordpress/components';
 
 export type AccordionProps = {

client/components/account-balances/balance-tooltip.tsx

@@ -12,6 +12,7 @@ import { __ } from '@wordpress/i18n';
 import { ClickTooltip } from 'components/tooltip';
 import { documentationUrls, fundLabelStrings } from './strings';
 import InlineNotice from 'components/inline-notice';
+import { ExternalLink } from 'wcpay/components/wp-components-wrapped/components/external-link';
 
 type TotalBalanceTooltipProps = {
 	balance: number;
@@ -132,10 +133,7 @@ export const AvailableBalanceTooltip: React.FC< AvailableBalanceTooltipProps > =
 								),
 								components: {
 									discoverWhyLink: (
-										// eslint-disable-next-line jsx-a11y/anchor-has-content
-										<a
-											rel="external noopener noreferrer"
-											target="_blank"
+										<ExternalLink
 											href={
 												documentationUrls.negativeBalance
 											}

client/components/account-balances/index.tsx

@@ -2,14 +2,17 @@
  * External dependencies
  */
 import React, { useState } from 'react';
-import { Card, CardBody, CardHeader, Flex } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import interpolateComponents from '@automattic/interpolate-components';
-import { Link } from '@woocommerce/components';
 
 /**
  * Internal dependencies
  */
+import { Card } from 'wcpay/components/wp-components-wrapped/components/card';
+import { CardBody } from 'wcpay/components/wp-components-wrapped/components/card-body';
+import { CardHeader } from 'wcpay/components/wp-components-wrapped/components/card-header';
+import { Flex } from 'wcpay/components/wp-components-wrapped/components/flex';
+import { ExternalLink } from 'wcpay/components/wp-components-wrapped/components/external-link';
 import type * as AccountOverview from 'wcpay/types/account-overview';
 import BalanceBlock from './balance-block';
 import HelpOutlineIcon from 'gridicons/dist/help-outline';
@@ -204,11 +207,10 @@ const AccountBalances: React.FC = () => {
 											components: {
 												strong: <strong />,
 												learnMoreLink: (
-													<Link
-														href="https://woocommerce.com/document/woopayments/payouts/instant-payouts/"
-														target="_blank"
-														rel="noreferrer"
-														type="external"
+													<ExternalLink
+														href={
+															'https://woocommerce.com/document/woopayments/payouts/instant-payouts/'
+														}
 													/>
 												),
 											},

client/components/account-status/account-fees/index.js

@@ -19,7 +19,7 @@ import {
 	getCurrentBaseFee,
 	getTransactionsPaymentMethodName,
 } from 'utils/account-fees';
-import { CardDivider } from '@wordpress/components';
+import { CardDivider } from 'wcpay/components/wp-components-wrapped/components/card-divider';
 import './styles.scss';
 
 const AccountFee = ( props ) => {

client/components/account-status/account-status-item.js

@@ -1,13 +1,11 @@
 /** @format */
 
-/**
- * External dependencies
- */
-import { Flex, FlexBlock, FlexItem } from '@wordpress/components';
-
 /**
  * Internal dependencies
  */
+import { Flex } from 'wcpay/components/wp-components-wrapped/components/flex';
+import { FlexBlock } from 'wcpay/components/wp-components-wrapped/components/flex-block';
+import { FlexItem } from 'wcpay/components/wp-components-wrapped/components/flex-item';
 
 const AccountStatusItem = ( { label, align, value, children } ) => {
 	return (

client/components/account-status/account-tools/index.tsx

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import React, { useState } from 'react';
-import { Button, CardDivider } from '@wordpress/components';
 import { addQueryArgs } from '@wordpress/url';
 
 /**
@@ -12,6 +11,8 @@ import strings from './strings';
 import './styles.scss';
 import ResetAccountModal from 'wcpay/overview/modal/reset-account';
 import { isInTestModeOnboarding } from 'wcpay/utils';
+import { Button } from 'wcpay/components/wp-components-wrapped/components/button';
+import { CardDivider } from 'wcpay/components/wp-components-wrapped/components/card-divider';
 
 const handleReset = () => {
 	window.location.href = addQueryArgs( wcpaySettings.connectUrl, {
@@ -39,6 +40,7 @@ export const AccountTools = () => {
 					<Button
 						variant={ 'secondary' }
 						onClick={ () => setModalVisible( true ) }
+						__next40pxDefaultSize
 					>
 						{ strings.reset }
 					</Button>

client/components/account-status/index.js

@@ -3,19 +3,18 @@
 /**
  * External dependencies
  */
-import {
-	Button,
-	Card,
-	CardBody,
-	CardHeader,
-	FlexBlock,
-	FlexItem,
-} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { addQueryArgs } from '@wordpress/url';
 
 /**
  * Internal dependencies
  */
+import { Button } from 'wcpay/components/wp-components-wrapped/components/button';
+import { Card } from 'wcpay/components/wp-components-wrapped/components/card';
+import { CardBody } from 'wcpay/components/wp-components-wrapped/components/card-body';
+import { CardHeader } from 'wcpay/components/wp-components-wrapped/components/card-header';
+import { FlexBlock } from 'wcpay/components/wp-components-wrapped/components/flex-block';
+import { FlexItem } from 'wcpay/components/wp-components-wrapped/components/flex-item';
 import AccountFees from './account-fees';
 import AccountStatusItem from './account-status-item';
 import DepositsStatus from 'components/deposits-status';
@@ -25,7 +24,6 @@ import './style.scss';
 import './shared.scss';
 import { AccountTools } from './account-tools';
 import { recordEvent } from 'wcpay/tracks';
-import { addQueryArgs } from '@wordpress/url';
 
 const AccountStatusCard = ( props ) => {
 	const { title, children, value } = props;
@@ -92,6 +90,7 @@ const AccountStatusDetails = ( props ) => {
 						}
 						href={ accountLink }
 						target={ '_blank' }
+						__next40pxDefaultSize
 					>
 						{ __( 'Edit details', 'woocommerce-payments' ) }
 					</Button>