Merge release/8.4.0 into trunk

.github/actions/e2e/env-setup/action.yml

@@ -66,7 +66,7 @@ runs:
       shell: bash
       run : |
         echo "::group::Kill webserver running on port 8084"
-        sudo fuser -k -n tcp 8084
+        sudo fuser -k -n tcp 8084 || true
         echo "::endgroup::"
 
     # Prepare test environment
@@ -76,3 +76,11 @@ runs:
         echo "::group::Setup E2E test environment"
         npm run test:e2e-setup
         echo "::endgroup::"
+
+    # Disable restrictions that prevent chromium from running properly. See: https://chromium.googlesource.com/chromium/src/+/main/docs/security/apparmor-userns-restrictions.md
+    - name: Disable AppArmor User Namespace Restrictions
+      shell: bash
+      run: |
+        echo "::group::Disable AppArmor User Namespace Restrictions"
+        sudo sysctl --ignore --write kernel.apparmor_restrict_unprivileged_userns=0
+        echo "::endgroup::"

bin/run-ci-tests-check-coverage.bash

@@ -17,6 +17,11 @@ else
 fi
 
 composer self-update && composer install --no-progress
+# SVN is needed when installing WP.
+if ! [ -x "$(command -v svn)" ]; then
+	echo 'Installing SVN...'
+	sudo apt-get install -y subversion
+fi
 sudo systemctl start mysql.service
 bash bin/install-wp-tests.sh woocommerce_test root root localhost $WP_VERSION $WC_VERSION false
 echo 'Running the tests...'

bin/run-ci-tests.bash

@@ -10,6 +10,13 @@ WCPAY_DIR="$GITHUB_WORKSPACE"
 echo 'Updating composer version & Install dependencies...'
 composer self-update && composer install --no-progress
 
+# SVN is needed when installing WP.
+if ! [ -x "$(command -v svn)" ]; then
+	echo 'Installing SVN...'
+	sudo apt-get install -y subversion
+fi
+
+# SVN is needed when installing WP.
 echo 'Starting MySQL service...'
 sudo systemctl start mysql.service
 

changelog.txt

@@ -1,5 +1,26 @@
 *** WooPayments Changelog ***
 
+= 8.4.0 - 2024-10-23 =
+* Add - Add test mode badge to classic checkout and add payment method.
+* Add - Using Floating Labels with Stripe Appearance API for Blocks Checkout
+* Fix - Converting text color rgba to hex to prevent Stripe warning
+* Fix - Fix the color contrast of links within tooltips to improve readability.
+* Fix - Omit the test mode badge in the change payment method form for subscriptions.
+* Fix - Pass container styling data to WooPay
+* Fix - Prevented detaching payment methods from live Stripe accounts when working in non-production environments.
+* Fix - Rendering Test Model badge only for Credit Card
+* Fix - Stop enqueuing woopay-express-button.css to prevent 404 errors
+* Fix - The amounts used by the PMMEs will match the displayed price of the product regardless of the tax settings.
+* Fix - WooPay user registration via classic checkout
+* Update - Add support for the style controls for the WooPay button
+* Update - chore: remove deprecated is_in_dev_mode() and is_in_test_mode() methods
+* Update - Payments task onboarding flows skip the Connect page.
+* Dev - Bump WC tested up to version to 9.3.3.
+* Dev - fix: prevent multiple instances of WC_Payments_Apple_Pay_Registration
+* Dev - Fixed wrong utils path that would prevent checkout with WooPay OTP
+* Dev - Migrate WizardTaskItem and CollapsibleBody components to TypeScript, making the className prop optional.
+* Dev - Use official `phpmyadmin` Docker Hub container image
+
 = 8.3.1 - 2024-10-16 =
 * Fix - Auto-enabled WooPay for new accounts.
 * Fix - Load Stripe with merchant account's key when checking payment method availability.

client/additional-methods-setup/wizard/collapsible-body.js → client/additional-methods-setup/wizard/collapsible-body.tsx

@@ -10,7 +10,10 @@ import classNames from 'classnames';
 import WizardTaskContext from './task/context';
 import './collapsible-body.scss';
 
-const CollapsibleBody = ( { className, ...restProps } ) => {
+const CollapsibleBody: React.FC< React.HTMLAttributes< HTMLDivElement > > = ( {
+	className,
+	...restProps
+} ) => {
 	const { isActive } = useContext( WizardTaskContext );
 
 	return (

client/additional-methods-setup/wizard/task-item.js → client/additional-methods-setup/wizard/task-item.tsx

@@ -11,7 +11,19 @@ import { Icon, check } from '@wordpress/icons';
 import WizardTaskContext from './task/context';
 import './task-item.scss';
 
-const WizardTaskItem = ( { children, title, index, className } ) => {
+interface WizardTaskItemProps {
+	children: React.ReactNode;
+	title: string;
+	index: number;
+	className?: string;
+}
+
+const WizardTaskItem: React.FC< WizardTaskItemProps > = ( {
+	children,
+	title,
+	index,
+	className,
+} ) => {
 	const { isCompleted, isActive } = useContext( WizardTaskContext );
 
 	return (
@@ -26,7 +38,7 @@ const WizardTaskItem = ( { children, title, index, className } ) => {
 				className="wcpay-wizard-task__headline"
 				// tabindex with value `-1` is necessary to programmatically set the focus
 				// on an element that is not interactive.
-				tabIndex="-1"
+				tabIndex={ -1 }
 			>
 				<div className="wcpay-wizard-task__icon-wrapper">
 					<div className="wcpay-wizard-task__icon-text">

client/checkout/api/test/index.test.js

@@ -42,6 +42,7 @@ const mockAppearance = {
 		'.Heading': {},
 		'.Button': {},
 		'.Link': {},
+		'.Container': {},
 	},
 	theme: 'stripe',
 	variables: {
@@ -50,6 +51,7 @@ const mockAppearance = {
 		fontFamily: undefined,
 		fontSizeBase: undefined,
 	},
+	labels: 'above',
 };
 
 describe( 'WCPayAPI', () => {

client/checkout/blocks/payment-elements.js

@@ -36,7 +36,7 @@ const PaymentElements = ( { api, ...props } ) => {
 	useEffect( () => {
 		async function generateUPEAppearance() {
 			// Generate UPE input styles.
-			let upeAppearance = getAppearance( 'blocks_checkout' );
+			let upeAppearance = getAppearance( 'blocks_checkout', false, true );
 			upeAppearance = await api.saveUPEAppearance(
 				upeAppearance,
 				'blocks_checkout'

client/checkout/classic/style.scss

@@ -31,13 +31,65 @@
 }
 
 #payment .payment_methods {
-	li label img {
+	li[class*='payment_method_woocommerce_payments'] > label > img {
 		float: right;
 		border: 0;
 		padding: 0;
 		height: 24px !important;
 		max-height: 24px !important;
 	}
+
+	&.wc_payment_methods,
+	&.woocommerce-PaymentMethods {
+		li.payment_method_woocommerce_payments {
+			display: grid;
+			grid-template-columns: 0fr 0fr 1fr;
+			grid-template-rows: max-content;
+
+			> input[name='payment_method'] {
+				align-self: center;
+			}
+			> label {
+				grid-column: 3;
+				display: grid;
+				grid-template-columns: 0fr auto;
+				grid-template-rows: max-content;
+				grid-gap: 0;
+				margin-bottom: 0;
+
+				> .label-title-container {
+					grid-area: 1 / 2 / 2 / 3;
+				}
+
+				.payment-method-title {
+					margin-right: 8px;
+				}
+
+				.test-mode.badge {
+					display: inline-block;
+					background-color: #fff2d7;
+					border-radius: 4px;
+					padding: 4px 6px;
+					font-size: 12px;
+					font-weight: 400;
+					line-height: 16px;
+					color: #4d3716;
+					vertical-align: middle;
+				}
+
+				img {
+					float: none;
+					grid-area: 1 / 4 / 2 / 5;
+					align-self: baseline;
+					justify-self: end;
+					margin-left: 1em;
+				}
+			}
+			> div.payment_box {
+				grid-area: 2 / 1 / 3 / 4;
+			}
+		}
+	}
 }
 
 li.wc_payment_method:has( .input-radio:not( :checked )

client/checkout/upe-styles/index.js

@@ -8,13 +8,16 @@ import {
 	dashedToCamelCase,
 	isColorLight,
 	getBackgroundColor,
+	maybeConvertRGBAtoRGB,
+	handleAppearanceForFloatingLabel,
 } from './utils.js';
 
 export const appearanceSelectors = {
 	default: {
 		hiddenContainer: '#wcpay-hidden-div',
 		hiddenInput: '#wcpay-hidden-input',
 		hiddenInvalidInput: '#wcpay-hidden-invalid-input',
+		hiddenValidActiveLabel: '#wcpay-hidden-valid-active-label',
 	},
 	classicCheckout: {
 		appendTarget: '.woocommerce-billing-fields__field-wrapper',
@@ -40,16 +43,15 @@ export const appearanceSelectors = {
 		linkSelectors: [ 'a' ],
 	},
 	blocksCheckout: {
-		appendTarget: '#billing.wc-block-components-address-form',
-		upeThemeInputSelector: '#billing-first_name',
-		upeThemeLabelSelector:
-			'.wc-block-components-checkout-step__description',
+		appendTarget: '#contact-fields',
+		upeThemeInputSelector: '.wc-block-components-text-input #email',
+		upeThemeLabelSelector: '.wc-block-components-text-input label',
 		rowElement: 'div',
-		validClasses: [ 'wc-block-components-text-input' ],
+		validClasses: [ 'wc-block-components-text-input', 'is-active' ],
 		invalidClasses: [ 'wc-block-components-text-input', 'has-error' ],
 		alternateSelectors: {
-			appendTarget: '#shipping.wc-block-components-address-form',
-			upeThemeInputSelector: '#shipping-first_name',
+			appendTarget: '#billing.wc-block-components-address-form',
+			upeThemeInputSelector: '#billing-first_name',
 			upeThemeLabelSelector:
 				'.wc-block-components-checkout-step__description',
 		},
@@ -63,6 +65,9 @@ export const appearanceSelectors = {
 		headingSelectors: [ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' ],
 		buttonSelectors: [ '.wc-block-components-checkout-place-order-button' ],
 		linkSelectors: [ 'a' ],
+		containerSelectors: [
+			'.wp-block-woocommerce-checkout-order-summary-block',
+		],
 	},
 	bnplProductPage: {
 		appendTarget: '.product .cart .quantity',
@@ -99,6 +104,7 @@ export const appearanceSelectors = {
 		headingSelectors: [ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' ],
 		buttonSelectors: [ '.checkout-button' ],
 		linkSelectors: [ 'a' ],
+		containerSelectors: [ '.shop_table' ],
 	},
 	bnplCartBlock: {
 		appendTarget: '.wc-block-cart .wc-block-components-quantity-selector',
@@ -121,6 +127,7 @@ export const appearanceSelectors = {
 		headingSelectors: [ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' ],
 		buttonSelectors: [ '.wc-block-cart__submit-button' ],
 		linkSelectors: [ 'a' ],
+		containerSelectors: [ '.wp-block-woocommerce-cart-line-items-block' ],
 	},
 	wooPayClassicCheckout: {
 		appendTarget: '.woocommerce-billing-fields__field-wrapper',
@@ -142,6 +149,7 @@ export const appearanceSelectors = {
 		headingSelectors: [ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' ],
 		buttonSelectors: [ '#place_order' ],
 		linkSelectors: [ 'a' ],
+		containerSelectors: [ '.woocommerce-checkout-review-order-table' ],
 	},
 
 	/**
@@ -326,6 +334,13 @@ const hiddenElementsForUPE = {
 			selectors.hiddenInput
 		);
 
+		// Clone & append target label to hidden valid row.
+		this.appendClone(
+			hiddenValidRow,
+			selectors.upeThemeLabelSelector,
+			selectors.hiddenValidActiveLabel
+		);
+
 		// Clone & append target input  to hidden invalid row.
 		this.appendClone(
 			hiddenInvalidRow,
@@ -379,9 +394,11 @@ export const getFieldStyles = (
 	for ( let i = 0; i < styles.length; i++ ) {
 		const camelCase = dashedToCamelCase( styles[ i ] );
 		if ( validProperties.includes( camelCase ) ) {
-			filteredStyles[ camelCase ] = styles.getPropertyValue(
-				styles[ i ]
-			);
+			let propertyValue = styles.getPropertyValue( styles[ i ] );
+			if ( camelCase === 'color' ) {
+				propertyValue = maybeConvertRGBAtoRGB( propertyValue );
+			}
+			filteredStyles[ camelCase ] = propertyValue;
 		}
 	}
 
@@ -482,37 +499,58 @@ export const getAppearance = ( elementsLocation, forWooPay = false ) => {
 	);
 	const buttonRules = getFieldStyles( selectors.buttonSelectors, '.Input' );
 	const linkRules = getFieldStyles( selectors.linkSelectors, '.Label' );
+	const containerRules = getFieldStyles(
+		selectors.containerSelectors,
+		'.Container'
+	);
 	const globalRules = {
 		colorBackground: backgroundColor,
 		colorText: labelRules.color,
 		fontFamily: labelRules.fontFamily,
 		fontSizeBase: labelRules.fontSize,
 	};
 
-	const appearance = {
+	const isFloatingLabel = elementsLocation === 'blocks_checkout';
+
+	let appearance = {
 		variables: globalRules,
 		theme: isColorLight( backgroundColor ) ? 'stripe' : 'night',
-		rules: {
-			'.Input': inputRules,
-			'.Input--invalid': inputInvalidRules,
-			'.Label': labelRules,
-			'.Block': blockRules,
-			'.Tab': tabRules,
-			'.Tab:hover': tabHoverRules,
-			'.Tab--selected': selectedTabRules,
-			'.TabIcon:hover': tabIconHoverRules,
-			'.TabIcon--selected': selectedTabIconRules,
-			'.Text': labelRules,
-			'.Text--redirect': labelRules,
-		},
+		labels: isFloatingLabel ? 'floating' : 'above',
+		// We need to clone the object to avoid modifying other rules when updating the appearance for floating labels.
+		rules: JSON.parse(
+			JSON.stringify( {
+				'.Input': inputRules,
+				'.Input--invalid': inputInvalidRules,
+				'.Label': labelRules,
+				'.Block': blockRules,
+				'.Tab': tabRules,
+				'.Tab:hover': tabHoverRules,
+				'.Tab--selected': selectedTabRules,
+				'.TabIcon:hover': tabIconHoverRules,
+				'.TabIcon--selected': selectedTabIconRules,
+				'.Text': labelRules,
+				'.Text--redirect': labelRules,
+			} )
+		),
 	};
 
+	if ( isFloatingLabel ) {
+		appearance = handleAppearanceForFloatingLabel(
+			appearance,
+			getFieldStyles(
+				selectors.hiddenValidActiveLabel,
+				'.Label--floating'
+			)
+		);
+	}
+
 	if ( forWooPay ) {
 		appearance.rules = {
 			...appearance.rules,
 			'.Heading': headingRules,
 			'.Button': buttonRules,
 			'.Link': linkRules,
+			'.Container': containerRules,
 		};
 	}
 

client/checkout/upe-styles/test/index.js

@@ -222,7 +222,11 @@ describe( 'Getting styles for automated theming', () => {
 					fontSize: '12px',
 					padding: '10px',
 				},
+				'.Container': {
+					backgroundColor: 'rgba(0, 0, 0, 0)',
+				},
 			},
+			labels: 'above',
 		} );
 	} );