Release branch for 8.2.0

.github/workflows/coverage.yml

@@ -17,7 +17,7 @@ jobs:
       matrix:
         woocommerce: [ 'latest' ]
         wordpress:   [ 'latest' ]
-        php:         [ '7.4' ]
+        php:         [ '7.4', '8.1' ]
         directory:   [ 'includes', 'src' ]
     env:
       WP_VERSION:   ${{ matrix.wordpress }}
@@ -36,6 +36,6 @@ jobs:
         with:
           php-version: ${{ matrix.php }}
           tools:       composer
-          coverage:    xdebug2
+          coverage:    xdebug
       # run CI checks
       - run: bash bin/run-ci-tests-check-coverage.bash

bin/check-test-coverage.sh

@@ -17,11 +17,10 @@ docker compose exec -u www-data wordpress \
 
 echo "Checking coverage..."
 
-docker compose exec -u www-data wordpress \
-	php -d xdebug.remote_autostart=on \
-	/var/www/html/wp-content/plugins/woocommerce-payments/vendor/bin/phpunit \
-	--configuration "/var/www/html/wp-content/plugins/woocommerce-payments/$CONFIGURATION_FILE" \
-	--coverage-html /var/www/html/php-test-coverage \
-	--coverage-clover /var/www/html/clover.xml
+docker-compose exec -u www-data wordpress \
+        /var/www/html/wp-content/plugins/woocommerce-payments/vendor/bin/phpunit \
+        --configuration "/var/www/html/wp-content/plugins/woocommerce-payments/$CONFIGURATION_FILE" \
+        --coverage-html /var/www/html/php-test-coverage \
+        --coverage-clover /var/www/html/clover.xml
 
 ./vendor/bin/coverage-check docker/wordpress/clover.xml $COVERAGE

bin/run-tests.sh

@@ -24,13 +24,11 @@ if $WATCH_FLAG; then
 	# Change directory to WooCommerce Payments' root in order to have access to .phpunit-watcher.yml
 	docker compose exec -u www-data wordpress bash -c \
 		"cd /var/www/html/wp-content/plugins/woocommerce-payments && \
-		php -d xdebug.remote_autostart=on \
 		./vendor/bin/phpunit-watcher watch --configuration ./phpunit.xml.dist $*"
 else
 	echo "Running the tests..."
 
-	docker compose exec -u www-data wordpress \
-		php -d xdebug.remote_autostart=on \
+	docker-compose exec -u www-data wordpress \
 		/var/www/html/wp-content/plugins/woocommerce-payments/vendor/bin/phpunit \
 		--configuration /var/www/html/wp-content/plugins/woocommerce-payments/phpunit.xml.dist \
 		$*

changelog.txt

@@ -1,5 +1,36 @@
 *** WooPayments Changelog ***
 
+= 8.2.0 - 2024-09-11 =
+* Add - add: test instructions icon animation
+* Add - Added Embdedded KYC, currently behind feature flag.
+* Fix - Avoid unnecessary account data cache refresh on WooPayments pages refresh.
+* Fix - Check payment method is available before rendering it.
+* Fix - Disables custom checkout field detection due to compatibility issues and false positives.
+* Fix - Disables testing instructions clipboard button on HTTP sites when navigator.clipboard is undefined.
+* Fix - fix: missing translations on testing instructions.
+* Fix - fix: platform_global_theme_support_enabled undefined index
+* Fix - fix: testing instructions dark theme support
+* Fix - Fix caching with tracking cookie.
+* Fix - Fixed an issue where the Connect page would scroll to the top upon clicking the Enable Sandbox Mode button.
+* Fix - Fixed default borderRadius value for the express checkout buttons
+* Fix - Fix shipping rates retrieval method for shortcode cart/checkout.
+* Fix - Fix support for merchant site styling when initializing WooPay via classic checkout
+* Fix - Fix WooPay direct checkout.
+* Fix - Handle loadError in ECE for Block Context Initialization.
+* Fix - Move woopay theme support checkbox to the appearance section.
+* Fix - Pass appearance data when initiating WooPay via the email input flow
+* Fix - Prevent preload of BNPL messaging if minimum order amount isn't hit.
+* Fix - Redirect user to WooPay OTP when the email is saved.
+* Fix - Remove obsolete ApplePay warning on wp-admin for test sites.
+* Fix - Update cache after persisting the User session via WooPay
+* Fix - Updates test mode instructions copy for cards at checkout.
+* Update - update: payment method fees in one line
+* Update - Update Jetpack packages to the latest versions
+* Dev - Fix failing e2e tests for saved cards.
+* Dev - Fix Klarna product page message E2E test after the contents inside the iframe were updated.
+* Dev - Migrate Klarna E2E tests to playwright. Reduce noise in E2E tests console output.
+* Dev - Migrate multi-currency e2e tests to Playwright.
+
 = 8.1.1 - 2024-08-29 =
 * Fix - Ensure 55px is the maximum height for Apple Pay button.
 * Fix - Fixed sandbox mode accounts being able to disable test mode for the payment gateway settings.
@@ -24,7 +55,6 @@
 * Fix - Fix uncaught error on the block based Cart page when WooPayments is disabled.
 * Fix - Fix WooPay checkboxes while signed in.
 * Fix - If a payment method fails to be created in the frontend during checkout, forward the errors to the server so it can be recorded in an order.
-* Fix - Migrate to Docker Compose V2 for test runner environment setup scripts
 * Fix - Reverts changes related to Direct Checkout that broke the PayPal extension.
 * Fix - Translate hardcoded strings on the Connect page
 * Update - refactor: separate BNPL methods from settings list
@@ -36,6 +66,7 @@
 * Dev - Match the Node version in nvm with the minimum version in package.json.
 * Dev - Remove unnecessary console.warn statements added in #9121.
 * Dev - Update bundle size checker workflow to support node v20
+* Dev - Migrate to Docker Compose V2 for test runner environment setup scripts
 
 = 8.0.2 - 2024-08-07 =
 * Fix - Add opt-in checks to prevent blocking customers using other payment methods.

client/checkout/blocks/index.js

@@ -44,6 +44,7 @@ import { handleWooPayEmailInput } from '../woopay/email-input-iframe';
 import { recordUserEvent } from 'tracks';
 import wooPayExpressCheckoutPaymentMethod from '../woopay/express-button/woopay-express-checkout-payment-method';
 import { isPreviewing } from '../preview';
+import '../utils/copy-test-number';
 
 const upeMethods = {
 	card: PAYMENT_METHOD_NAME_CARD,

client/checkout/blocks/payment-elements.js

@@ -90,6 +90,7 @@ const PaymentElements = ( { api, ...props } ) => {
 					errorMessage={ errorMessage }
 					fingerprint={ fingerprint }
 					onLoadError={ setPaymentProcessorLoadErrorMessage }
+					theme={ appearance?.theme }
 					{ ...props }
 				/>
 			</Elements>

client/checkout/blocks/payment-processor.js

@@ -12,6 +12,7 @@ import {
 } from '@woocommerce/blocks-registry';
 import { __ } from '@wordpress/i18n';
 import { useEffect, useRef } from 'react';
+import classNames from 'classnames';
 
 /**
  * Internal dependencies
@@ -64,6 +65,7 @@ const PaymentProcessor = ( {
 	shouldSavePayment,
 	fingerprint,
 	onLoadError = noop,
+	theme,
 } ) => {
 	const stripe = useStripe();
 	const elements = useElements();
@@ -267,7 +269,9 @@ const PaymentProcessor = ( {
 		<>
 			{ isTestMode && (
 				<p
-					className="content"
+					className={ classNames( 'content', {
+						[ `theme--${ theme }` ]: theme,
+					} ) }
 					dangerouslySetInnerHTML={ {
 						__html: testingInstructions,
 					} }

client/checkout/blocks/style.scss

@@ -1,11 +1,9 @@
+@import '../style';
+
 .wcpay-payment-element {
 	margin-bottom: 2rem;
 }
 
-.wcpay-card-mounted {
-	background-color: #fff;
-}
-
 /* stylelint-disable-next-line selector-id-pattern */
 #express-payment-method-woopay {
 	width: 100%;
@@ -77,8 +75,6 @@ button.wcpay-stripelink-modal-trigger:hover {
 
 #remember-me {
 	margin: 36px 0 0 0;
-	padding: 0;
-	border: 0;
 
 	h2 {
 		font-size: 18px;

client/checkout/classic/event-handlers.js

@@ -31,6 +31,7 @@ import { handleWooPayEmailInput } from 'wcpay/checkout/woopay/email-input-iframe
 import { isPreviewing } from 'wcpay/checkout/preview';
 import { recordUserEvent } from 'tracks';
 import { SHORTCODE_BILLING_ADDRESS_FIELDS } from 'wcpay/checkout/constants';
+import '../utils/copy-test-number';
 
 jQuery( function ( $ ) {
 	enqueueFraudScripts( getUPEConfig( 'fraudServices' ) );

client/checkout/classic/payment-processing.js

@@ -214,13 +214,20 @@ async function createStripePaymentElement(
 ) {
 	const amount = Number( getUPEConfig( 'cartTotal' ) );
 	const paymentMethodTypes = getPaymentMethodTypes( paymentMethodType );
+	const appearance = await initializeAppearance( api, elementsLocation );
+	document
+		.querySelector(
+			`.wcpay-upe-element[data-payment-method-type="${ paymentMethodType }"]`
+		)
+		?.closest( '.wc_payment_method' )
+		?.classList.add( `theme--${ appearance.theme || 'stripe' }` );
 	const options = {
 		mode: amount < 1 ? 'setup' : 'payment',
 		currency: getUPEConfig( 'currency' ).toLowerCase(),
 		amount: amount,
 		paymentMethodCreation: 'manual',
 		paymentMethodTypes: paymentMethodTypes,
-		appearance: await initializeAppearance( api, elementsLocation ),
+		appearance,
 		fonts: getFontRulesFromPage(),
 	};
 

client/checkout/classic/style.scss

@@ -1,3 +1,5 @@
+@import '../style';
+
 #payment .payment_method_woocommerce_payments .testmode-info {
 	margin-bottom: 0.5em;
 }

client/checkout/express-checkout-buttons.scss

@@ -2,7 +2,6 @@
 	margin-top: 1em;
 	width: 100%;
 	clear: both;
-	margin-bottom: 1.5em;
 
 	.woocommerce-cart & {
 		margin-bottom: 0;

client/checkout/style.scss

@@ -1,14 +1,57 @@
-#wcpay-card-element {
-	border: 1px solid #ddd;
-	padding: 5px 7px;
-	min-height: 29px;
-	margin-bottom: 0.5rem;
+#payment .payment_method_woocommerce_payments .woocommerce-error {
+	margin: 1rem 0;
 }
 
-.wcpay-card-mounted {
-	background-color: #fff;
-}
+.js-woopayments-copy-test-number {
+	line-height: 1.2em;
+	vertical-align: middle;
+	border-radius: 0;
+	border: none !important;
+	// some themes might override the color on all `button`s - whose selector has higher specificity and our class selector.
+	background-color: transparent !important;
+	font-weight: normal;
+	display: inline-flex;
+	cursor: pointer;
+	color: inherit;
+	font-size: initial;
+	padding: 2px 1px;
+	align-items: center;
 
-#payment .payment_method_woocommerce_payments .woocommerce-error {
-	margin: 1rem 0;
+	span {
+		margin-right: 4px;
+	}
+
+	i {
+		order: 1;
+		display: block;
+		width: 1.2em;
+		height: 1.2em;
+		background: url( 'assets/images/icons/copy.svg?asset' ) no-repeat center;
+		background-size: contain;
+	}
+
+	&:hover {
+		background-color: transparent;
+		filter: invert( 0.3 );
+
+		i {
+			filter: invert( 0.3 );
+		}
+	}
+
+	&:active i {
+		transform: scale( 0.9 );
+	}
+
+	&.state--success {
+		i {
+			background-image: url( 'assets/images/icons/check-green.svg?asset' );
+		}
+	}
+
+	.theme--night & {
+		i {
+			filter: invert( 100% ) hue-rotate( 180deg );
+		}
+	}
 }

client/checkout/upe-styles/index.js

@@ -123,6 +123,27 @@ export const appearanceSelectors = {
 		buttonSelectors: [ '.wc-block-cart__submit-button' ],
 		linkSelectors: [ 'a' ],
 	},
+	wooPayClassicCheckout: {
+		appendTarget: '.woocommerce-billing-fields__field-wrapper',
+		upeThemeInputSelector: '#billing_first_name',
+		upeThemeLabelSelector: '.woocommerce-checkout .form-row label',
+		rowElement: 'p',
+		validClasses: [ 'form-row' ],
+		invalidClasses: [
+			'form-row',
+			'woocommerce-invalid',
+			'woocommerce-invalid-required-field',
+		],
+		backgroundSelectors: [
+			'#customer_details',
+			'#order_review',
+			'form.checkout',
+			'body',
+		],
+		headingSelectors: [ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' ],
+		buttonSelectors: [ '#place_order' ],
+		linkSelectors: [ 'a' ],
+	},
 
 	/**
 	 * Update selectors to use alternate if not present on DOM.
@@ -175,6 +196,9 @@ export const appearanceSelectors = {
 			case 'bnpl_cart_block':
 				appearanceSelector = this.bnplCartBlock;
 				break;
+			case 'woopay_shortcode_checkout':
+				appearanceSelector = this.wooPayClassicCheckout;
+				break;
 		}
 
 		return {

client/checkout/utils/copy-test-number.js

@@ -0,0 +1,52 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+let previousTimeoutRef = null;
+
+document.addEventListener(
+	'click',
+	function ( event ) {
+		// using "closest", just in case the user clicks on the icon.
+		const copyNumberButton = event.target?.closest(
+			'.js-woopayments-copy-test-number'
+		);
+		if ( ! copyNumberButton ) {
+			return;
+		}
+
+		event.preventDefault();
+		const number = copyNumberButton.querySelector( 'span' ).innerText;
+
+		if ( ! navigator.clipboard ) {
+			prompt(
+				__( 'Copy the test number:', 'woocommerce-payments' ),
+				number
+			);
+			return;
+		}
+		navigator.clipboard.writeText( number );
+
+		window.wp?.data
+			?.dispatch( 'core/notices' )
+			?.createInfoNotice(
+				__(
+					'Test number copied to your clipboard!',
+					'woocommerce-payments'
+				),
+				{
+					// the unique `id` prevents the JS from creating multiple notices with the same text before they're dismissed.
+					id: 'woopayments/test-number-copied',
+					type: 'snackbar',
+					context: 'wc/checkout/payments',
+				}
+			);
+		copyNumberButton.classList.add( 'state--success' );
+		clearTimeout( previousTimeoutRef );
+		previousTimeoutRef = setTimeout( () => {
+			copyNumberButton.classList.remove( 'state--success' );
+		}, 2000 );
+	},
+	false
+);

client/checkout/utils/index.js

@@ -20,7 +20,7 @@ export const getAppearanceType = () => {
 	}
 
 	if ( document.querySelector( '.woocommerce-billing-fields' ) ) {
-		return 'shortcode_checkout';
+		return 'woopay_shortcode_checkout';
 	}
 
 	if ( document.querySelector( '.wp-block-woocommerce-cart' ) ) {