Merge release/10.2.0 into trunk

Author: vladolaru

.claude/CLAUDE.md

@@ -0,0 +1,188 @@
+# CLAUDE.md - WooCommerce Payments Repository Guide
+
+This file provides context about the WooCommerce Payments repository to help Claude Code assist more effectively.
+
+## Repository Overview
+
+WooCommerce Payments (WCPay) is a WordPress plugin that provides payment processing capabilities for WooCommerce stores. It's a complex project combining PHP backend code with a React-based admin interface.
+
+**Key Info:**
+- Plugin Name: WooPayments
+- License: GPL-3.0-or-later
+- Repository: github:Automattic/woocommerce-payments
+
+**Version & Requirements:**
+- See `woocommerce-payments.php` header for current version and WordPress/WooCommerce/PHP requirements
+- See `package.json` for Node.js version requirements (engines field)
+
+## Directory Structure
+
+### PHP Code
+- **`src/`** - Modern PHP code using PSR-4 autoloading and dependency injection
+  - Uses a service `Container` for dependency injection
+  - Preferred location for new PHP code
+- **`includes/`** - Legacy PHP codebase organized by feature
+  - `admin/`, `payment-methods/`, `subscriptions/`, `multi-currency/`, etc.
+  - Still actively used but prefer `src/` for new code
+
+### Frontend Code
+- **`client/`** - React/TypeScript frontend application
+  - `components/` - Reusable UI components
+  - `settings/`, `checkout/`, `onboarding/` - Feature areas
+  - `data/` - Redux state management (@wordpress/data)
+  - Uses React 18.3 and TypeScript
+
+### Tests
+- **`tests/unit/`** - PHP unit tests (PHPUnit)
+- **`tests/js/`** - JavaScript test configuration
+- **`tests/e2e/`** - End-to-end tests (Playwright)
+- JS tests are co-located with source files in `client/**/__tests__/`
+
+### Build & Config
+- **`webpack/`** - Modular webpack configuration (shared, production, development, HMR)
+- **`tasks/`** - Build and release automation
+- **`bin/`** - Helper scripts
+- **`docker/`** - Docker development environment
+
+## Technology Stack
+
+**Backend:** PHP, WordPress APIs, WooCommerce hooks, Composer
+**Frontend:** React, TypeScript, @wordpress/data (Redux), SCSS
+**Build:** Webpack, Babel, PostCSS, @wordpress/scripts
+**Testing:** PHPUnit, Jest, Playwright, React Testing Library
+**Quality:** ESLint, PHPCS, Psalm, TypeScript, Prettier
+
+*See `composer.json`, `package.json`, and `woocommerce-payments.php` for specific version requirements*
+
+## Common Commands
+
+### Development
+```bash
+npm install             # Install dependencies
+npm start               # Watch JS changes (alias: npm run watch)
+npm run hmr             # Hot module replacement server
+npm run up              # Start Docker environment
+npm run dev             # Start Docker + watch mode
+```
+
+### Testing
+
+**PHP Tests:**
+```bash
+# Standard approach
+npm run test:php                    # Run all PHP tests in Docker
+npm run test:php-watch              # Watch mode
+npm run test:php-coverage           # With coverage
+```
+
+**JavaScript Tests:**
+```bash
+npm run test:js                     # Run all JS tests
+npm run test:watch                  # Watch mode
+npm run test:debug                  # Debug mode
+npm run test:update-snapshots       # Update snapshots
+```
+
+**E2E Tests:**
+```bash
+npm run test:e2e                    # Run E2E tests
+npm run test:e2e-ui                 # UI mode
+npm run test:e2e-up                 # Setup test environment
+npm run test:e2e-down               # Teardown
+```
+
+### Build & Quality
+```bash
+npm run build:client                # Build production JS
+npm run build                       # Build release package
+npm run lint                        # Run all linters
+npm run lint:js                     # ESLint + TypeScript
+npm run lint:php                    # PHPCS
+npm run lint:php-fix                # Auto-fix PHP issues
+npm run format                      # Format with Prettier
+npm run psalm                       # PHP static analysis
+```
+
+### Other
+```bash
+npm run changelog                   # Add changelog entry
+npm run i18n:pot                    # Generate translations
+```
+
+## Development Workflows
+
+### Code Organization
+- **New PHP code:** Use `src/` with dependency injection
+- **Legacy PHP:** Lives in `includes/`, prefer refactoring to `src/`
+- **Frontend:** React components in `client/` with TypeScript
+- **Tests:** Mirror source structure in `tests/unit/` for PHP
+
+### Testing Conventions
+- PHP tests use PHPUnit and follow WordPress testing practices
+- JS tests use Jest with @wordpress/scripts preset
+- Co-locate JS tests with source files or in `__tests__/` directories
+- PHP tests run in Docker via `npm run test:php` (see `bin/run-tests.sh`)
+
+### Git Workflow
+- Main branch for PRs: `develop`
+- Release branch: `trunk`
+- Husky manages git hooks
+- **Before creating a PR:**
+  - Must run `npm run changelog add` and commit the changelog entry (choose 'patch' if change is not significant)
+  - Changelog must be committed and pushed before creating the PR
+- Use PR template from `.github/PULL_REQUEST_TEMPLATE.md` when creating pull requests
+  - Include testing instructions
+  - Check mobile testing requirement
+  - Link to release testing docs post-merge
+
+### Docker Environment
+- WordPress: http://localhost:8082
+- phpMyAdmin: http://localhost:8083
+- MySQL: localhost:5678
+- Xdebug ready (requires IDE path mapping)
+
+### Dependency Management
+- WordPress dependencies extracted automatically via webpack plugin
+- External packages added via `requestToExternal` and `requestToHandle` in webpack.config.js
+- Use Composer for PHP dependencies
+- Use npm for JavaScript dependencies
+
+### Changelog
+- Use `npm run changelog` to add entries
+- Types: Add, Fix, Update, Dev
+- Entries go in `changelog/` directory
+
+## Important Configuration Files
+
+| File | Purpose |
+|------|---------|
+| `package.json` | npm scripts and dependencies |
+| `composer.json` | PHP dependencies and autoloading |
+| `webpack.config.js` | Main webpack entry |
+| `phpunit.xml.dist` | PHPUnit configuration |
+| `phpcs.xml.dist` | PHP coding standards |
+| `tests/js/jest.config.js` | Jest configuration |
+| `tests/e2e/playwright.config.ts` | E2E test config |
+| `tsconfig.json` | TypeScript configuration |
+| `.eslintrc` | ESLint rules |
+
+## Version Support Policy
+- WordPress: Strict L-2 (supports current and 2 previous major versions)
+- WooCommerce: Loose L-2
+- See `docs/version-support-policy.md` for details
+
+## Documentation
+- `README.md` - Main setup and overview
+- `CONTRIBUTING.md` - Contribution guidelines
+- `tests/README.md` - Testing guide
+- `docker/README.md` - Docker setup
+- `includes/core/README.md` - Extensibility docs
+- `docs/` - Additional documentation
+
+## Tips for Claude
+- Prefer editing existing files over creating new ones
+- Check both `src/` and `includes/` when searching for PHP code
+- React components follow WordPress coding patterns (@wordpress packages)
+- Test files mirror source structure
+- PHP tests require Docker - ensure it's running before executing tests
+- Use `npm run test:php` to run all tests or edit the command to pass PHPUnit filters

.gitignore

@@ -11,7 +11,7 @@ project.properties
 *.sublime-workspace
 .sublimelinterrc
 .cursor/
-.claude/
+**/.claude/**/*.local.*
 .zed/
 .phpactor.json
 

changelog.txt

@@ -1,5 +1,23 @@
 *** WooPayments Changelog ***
 
+= 10.2.0 - 2025-11-06 =
+* Add - Add WooCommerce Tool to delete test orders.
+* Add - Sync store setup details with the Transact Platform.
+* Fix - Comment: fix JCB logo.
+* Fix - Fix - WCPay Subscriptions setting not persisting when unchecked
+* Fix - Fix missing payment method logos (JCB, CUP, CB) in checkout.
+* Fix - Fix payment method logos overflow in shortcode checkout after adding JCB and UnionPay logos.
+* Fix - Only show WooPay error messages for connection errors in available countries.
+* Fix - Prevent Express Checkout from being disabled on product page when updating quantity of variable products.
+* Fix - Prevent WooPayments-specific styles for the Checkout block to leak to other payment methods
+* Fix - Use Woo custom cap `pay_for_order` for validating the owner of order
+* Update - Avoid loading shipping zones when adjusting currencies for free shipping methods.
+* Update - Hide bundled subscription management UI while preserving renewal processing functionality
+* Update - Minor copy update to the delete test orders tool.
+* Update - Show message about bundled subscriptions until 10.2.0.
+* Dev - Add CLAUDE.md file to improve AI code assistance.
+* Dev - Bump WC tested up to version to 10.3.0.
+
 = 10.1.1 - 2025-10-27 =
 * Fix - Overrides the core `AbstractAutomatticAddressProvider`'s `load_scripts` method to only run if the core setting (`woocommerce_address_autocomplete_enabled` is enabled).
 

client/checkout/blocks/payment-method-label.js

@@ -2,37 +2,13 @@
  * Internal dependencies
  */
 import { PaymentMethodsLogos } from './payment-methods-logos';
-import Visa from 'assets/images/payment-method-icons/visa.svg?asset';
-import Mastercard from 'assets/images/payment-method-icons/mastercard.svg?asset';
-import Amex from 'assets/images/payment-method-icons/amex.svg?asset';
-import Discover from 'assets/images/payment-method-icons/discover.svg?asset';
+import { getCardBrands } from 'wcpay/utils/card-brands';
 import { useStripeForUPE } from 'wcpay/hooks/use-stripe-async';
 import { getUPEConfig } from 'wcpay/utils/checkout';
 import { __ } from '@wordpress/i18n';
 import './style.scss';
 import { useEffect, useState, useRef } from '@wordpress/element';
 import { getAppearance } from 'wcpay/checkout/upe-styles';
-
-const paymentMethods = [
-	{
-		name: 'visa',
-		component: Visa,
-	},
-	{
-		name: 'mastercard',
-		component: Mastercard,
-	},
-	{
-		name: 'amex',
-		component: Amex,
-	},
-	{
-		name: 'discover',
-		component: Discover,
-	},
-	// TODO: Missing Diners Club
-	// TODO: What other card payment methods should be here?
-];
 const breakpointConfigs = [
 	{ breakpoint: 550, maxElements: 2 },
 	{ breakpoint: 330, maxElements: 1 },
@@ -90,7 +66,7 @@ export default ( { api, title, iconLight, iconDark, upeName } ) => {
 			{ upeName === 'card' ? (
 				<PaymentMethodsLogos
 					maxElements={ 4 }
-					paymentMethods={ paymentMethods }
+					paymentMethods={ getCardBrands() }
 					breakpointConfigs={ breakpointConfigs }
 				/>
 			) : (

client/checkout/blocks/payment-methods-logos/style.scss

@@ -53,3 +53,9 @@
 		box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.1 );
 	}
 }
+
+.payment-methods--logos-popover {
+	> img {
+		object-position: center !important;
+	}
+}

client/checkout/blocks/style.scss

@@ -44,7 +44,8 @@ button.wcpay-stripelink-modal-trigger:hover {
 
 .wc-block-checkout__payment-method {
 	input:checked ~ div {
-		.wc-block-components-radio-control__label {
+		/* stylelint-disable-next-line selector-id-pattern */
+		.wc-block-components-radio-control__label:where( [id^='radio-control-wc-payment-method-options-woocommerce_payments'][id$='__label'] ) {
 			> .payment-method-label {
 				.test-mode.badge {
 					// hiding the badge when the payment method is not selected
@@ -54,7 +55,8 @@ button.wcpay-stripelink-modal-trigger:hover {
 		}
 	}
 
-	.wc-block-components-radio-control__label {
+	/* stylelint-disable-next-line selector-id-pattern */
+	.wc-block-components-radio-control__label:where( [id^='radio-control-wc-payment-method-options-woocommerce_payments'][id$='__label'] ) {
 		width: 100%;
 		display: block !important;
 

client/checkout/classic/event-handlers.js

@@ -32,10 +32,7 @@ import { isPreviewing } from 'wcpay/checkout/preview';
 import { recordUserEvent } from 'tracks';
 import '../utils/copy-test-number';
 import { SHORTCODE_BILLING_ADDRESS_FIELDS } from '../constants';
-import Visa from 'assets/images/payment-method-icons/visa.svg?asset';
-import Mastercard from 'assets/images/payment-method-icons/mastercard.svg?asset';
-import Amex from 'assets/images/payment-method-icons/amex.svg?asset';
-import Discover from 'assets/images/payment-method-icons/discover.svg?asset';
+import { getCardBrands } from 'wcpay/utils/card-brands';
 
 jQuery( function ( $ ) {
 	enqueueFraudScripts( getUPEConfig( 'fraudServices' ) );
@@ -181,27 +178,18 @@ jQuery( function ( $ ) {
 		innerContainer.setAttribute( 'tabindex', '0' );
 		innerContainer.setAttribute( 'data-testid', 'payment-methods-logos' );
 
-		const paymentMethods = [
-			{ name: 'visa', component: Visa },
-			{ name: 'mastercard', component: Mastercard },
-			{ name: 'amex', component: Amex },
-			{ name: 'discover', component: Discover },
-		];
+		const paymentMethods = getCardBrands();
 
 		function getMaxElements() {
-			const paymentMethodElement = document.querySelector(
-				'.payment_method_woocommerce_payments'
-			);
-			if ( ! paymentMethodElement ) {
-				return 4; // Default fallback
-			}
+			// Use viewport width as primary indicator (similar to blocks checkout)
+			const viewportWidth = window.innerWidth;
 
-			const elementWidth = paymentMethodElement.offsetWidth;
-			if ( elementWidth <= 300 ) {
+			// Specific tablet viewport range (768-781px) - needs room for Test Mode badge
+			if ( viewportWidth >= 768 && viewportWidth <= 900 ) {
 				return 1;
-			} else if ( elementWidth <= 330 ) {
-				return 2;
 			}
+			// Default - show 3 logos + counter badge = 4 visual elements total
+			return 3;
 		}
 
 		function shouldHavePopover() {

client/checkout/classic/style.scss

@@ -41,6 +41,15 @@
 			img:last-of-type {
 				margin-right: 0;
 			}
+
+			&-count {
+				margin-left: 4px;
+
+				// Tighter spacing on tablet viewports (768-900px) to conserve space for Test Mode badge
+				@media ( min-width: 768px ) and ( max-width: 900px ) {
+					margin-left: 0;
+				}
+			}
 		}
 		img {
 			float: right;