Merge release/8.3.0 into trunk

changelog.txt

@@ -1,5 +1,37 @@
 *** WooPayments Changelog ***
 
+= 8.3.0 - 2024-10-03 =
+* Add - Add compatibility with the buttonAttributes API from Woo Blocks
+* Add - Add rate limiter to compatibility data updates
+* Add - Add UTC to the date time column header of transactions list page.
+* Add - Disable save changes button until a setting has changed.
+* Add - Enables Klarna with amount limitations for FR country code.
+* Add - Provide locale to Express Checkout Element.
+* Add - Redesigned the Payment Method labels for the Blocks Checkout
+* Add - Show a notice in Payments > Settings > Deposits if there is an error with the bank account.
+* Add - Updates to the Embedded KYC to ensure compatibility with Progressive Onboarding
+* Fix - Allow the network saved card payment method setting to be overridden by the `wcpay_force_network_saved_cards` filter
+* Fix - Create div container element with JS dynamically.
+* Fix - Do not display BNPL methods and PMME when WooPayments is disabled
+* Fix - Fixed CC form input fields appearance when using RGBA
+* Fix - Fixed invalid appearance warnings
+* Fix - Fix event prefix duplication in Tracks events
+* Fix - Handle loadError in ECE for Block Context Initialization.
+* Fix - Prevent failures and notices related to trying to schedule AS jobs before init.
+* Fix - Prevent multi-currency conversion during a REST API request.
+* Fix - Remove text color from WooPay component.
+* Fix - Rendering Test Model badge only for Credit Card
+* Fix - Sync phone changes with WooPay phone field.
+* Fix - Update payment methods when manual capture is enabled.
+* Update - Default express checkout button label to "Only icon".
+* Update - Remove feature flag to make embedded KYC enabled by default
+* Update - Some minor styling updates on the Onboarding form.
+* Update - Update express payment methods with a title, description and gatewayId
+* Dev - fix: prevent multiple instances of WC_Payments_Apple_Pay_Registration
+* Dev - Fix gutenberg blueberry focus color
+* Dev - Fix progressive onboarding e2e test
+* Dev - Some refactors to embedded KYC logic.
+
 = 8.2.2 - 2024-09-24 =
 * Fix - Fix WooPay pre-checking place order bug when buying a subscription.
 

client/checkout/api/index.js

@@ -466,7 +466,7 @@ export default class WCPayAPI {
 			return this.request( buildAjaxURL( wcAjaxUrl, 'init_woopay' ), {
 				_wpnonce: nonce,
 				appearance: getConfig( 'isWooPayGlobalThemeSupportEnabled' )
-					? getAppearance( appearanceType )
+					? getAppearance( appearanceType, true )
 					: null,
 				email: userEmail,
 				user_session: woopayUserSession,

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

@@ -6,6 +6,9 @@ import {
 	PaymentMethodMessagingElement,
 } from '@stripe/react-stripe-js';
 import { normalizeCurrencyToMinorUnit } from '../utils';
+import { getUPEConfig } from 'wcpay/utils/checkout';
+import { __ } from '@wordpress/i18n';
+import './style.scss';
 
 export default ( {
 	api,
@@ -16,6 +19,7 @@ export default ( {
 } ) => {
 	const cartData = wp.data.select( 'wc/store/cart' ).getCartData();
 	const bnplMethods = [ 'affirm', 'afterpay_clearpay', 'klarna' ];
+	const isTestMode = getUPEConfig( 'testMode' );
 
 	// Stripe expects the amount to be sent as the minor unit of 2 digits.
 	const amount = parseInt(
@@ -32,45 +36,54 @@ export default ( {
 		window.wcBlocksCheckoutData?.storeCountry ||
 		'US';
 
+	const isCreditCard = upeName === 'card';
+
 	return (
 		<>
-			<span>
-				{ upeConfig.title }
-				{ bnplMethods.includes( upeName ) &&
-					( upeConfig.countries.length === 0 ||
-						upeConfig.countries.includes( currentCountry ) ) &&
-					amount > 0 &&
-					currentCountry && (
-						<>
-							<Elements
-								stripe={ api.getStripeForUPE( upeName ) }
-								options={ {
-									appearance: stripeAppearance ?? {},
-								} }
-							>
-								<PaymentMethodMessagingElement
-									options={ {
-										amount: amount || 0,
-										currency:
-											cartData.totals.currency_code ||
-											'USD',
-										paymentMethodTypes: [ upeName ],
-										countryCode: currentCountry,
-										displayType: 'promotional_text',
-									} }
-								/>
-							</Elements>
-						</>
-					) }
+			<div className="payment-method-label">
+				<span className="payment-method-label__label">
+					{ upeConfig.title }
+				</span>
+				{ isCreditCard && isTestMode && (
+					<span className="test-mode badge">
+						{ __( 'Test Mode', 'woocommerce-payments' ) }
+					</span>
+				) }
 				<img
+					className="payment-methods--logos"
 					src={
 						upeAppearanceTheme === 'night'
 							? upeConfig.darkIcon
 							: upeConfig.icon
 					}
 					alt={ upeConfig.title }
 				/>
-			</span>
+			</div>
+			{ bnplMethods.includes( upeName ) &&
+				( upeConfig.countries.length === 0 ||
+					upeConfig.countries.includes( currentCountry ) ) &&
+				amount > 0 &&
+				currentCountry && (
+					<div className="bnpl-message">
+						<Elements
+							stripe={ api.getStripeForUPE( upeName ) }
+							options={ {
+								appearance: stripeAppearance ?? {},
+							} }
+						>
+							<PaymentMethodMessagingElement
+								options={ {
+									amount: amount || 0,
+									currency:
+										cartData.totals.currency_code || 'USD',
+									paymentMethodTypes: [ upeName ],
+									countryCode: currentCountry,
+									displayType: 'promotional_text',
+								} }
+							/>
+						</Elements>
+					</div>
+				) }
 		</>
 	);
 };

client/checkout/blocks/style.scss

@@ -43,31 +43,58 @@ button.wcpay-stripelink-modal-trigger:hover {
 }
 
 .wc-block-checkout__payment-method {
-	.wc-block-components-radio-control__label span {
-		width: 95%;
+	.wc-block-components-radio-control__label {
+		width: 100%;
+		display: block !important;
+
+		> .payment-method-label {
+			display: grid !important;
+			justify-content: normal !important;
+			grid-template-columns: max-content auto;
+			grid-template-areas: 'label badge logos';
+			align-items: center;
+			gap: 8px;
+			width: 100%;
 
-		&:has( .StripeElement ) {
-			display: grid;
-			grid-template-columns: 1fr auto;
-		}
+			> .payment-method-label__label {
+				grid-area: label;
+				width: 100%;
+			}
 
-		img {
-			float: right;
-			border: 0;
-			padding: 0;
-			height: 24px;
-			max-height: 24px;
+			> .payment-methods--logos {
+				grid-area: logos;
+				justify-self: end;
+			}
+
+			> .test-mode.badge {
+				grid-area: badge;
+				background-color: #fff2d7;
+				border-radius: 4px;
+				padding: 4px 6px;
+				font-size: 12px;
+				font-weight: 400;
+				line-height: 16px;
+				color: #4d3716;
+				justify-self: start;
+				width: max-content;
+			}
+
+			@include breakpoint( '<480px' ) {
+				grid-template-areas: 'label logos' 'badge badge';
+				grid-template-columns: 1fr auto;
+				align-items: start;
+
+				.payment-methods--logos {
+					justify-self: end;
+				}
+			}
 		}
 
-		.StripeElement {
+		.bnpl-message {
 			width: 100%;
-			grid-column: 1 / span 2;
-			grid-row-start: 2;
-			pointer-events: none;
 
-			+ img {
-				grid-row: 1 / span 2;
-				grid-column: 2;
+			@include breakpoint( '<480px' ) {
+				margin-top: 8px;
 			}
 		}
 	}
@@ -89,10 +116,6 @@ button.wcpay-stripelink-modal-trigger:hover {
 		.StripeElement {
 			display: none;
 		}
-		img {
-			grid-column: 2;
-			grid-row: 1;
-		}
 	}
 	/* stylelint-disable-next-line selector-id-pattern */
 	#radio-control-wc-payment-method-options-woocommerce_payments_affirm__label

client/checkout/upe-styles/index.js

@@ -5,7 +5,6 @@ import { upeRestrictedProperties } from './upe-styles';
 import {
 	generateHoverRules,
 	generateOutlineStyle,
-	maybeConvertRGBAtoRGB,
 	dashedToCamelCase,
 	isColorLight,
 	getBackgroundColor,
@@ -380,8 +379,8 @@ export const getFieldStyles = (
 	for ( let i = 0; i < styles.length; i++ ) {
 		const camelCase = dashedToCamelCase( styles[ i ] );
 		if ( validProperties.includes( camelCase ) ) {
-			filteredStyles[ camelCase ] = maybeConvertRGBAtoRGB(
-				styles.getPropertyValue( styles[ i ] )
+			filteredStyles[ camelCase ] = styles.getPropertyValue(
+				styles[ i ]
 			);
 		}
 	}
@@ -443,7 +442,7 @@ export const getFontRulesFromPage = () => {
 	return fontRules;
 };
 
-export const getAppearance = ( elementsLocation ) => {
+export const getAppearance = ( elementsLocation, forWooPay = false ) => {
 	const selectors = appearanceSelectors.getSelectors( elementsLocation );
 
 	// Add hidden fields to DOM for generating styles.
@@ -505,11 +504,18 @@ export const getAppearance = ( elementsLocation ) => {
 			'.TabIcon--selected': selectedTabIconRules,
 			'.Text': labelRules,
 			'.Text--redirect': labelRules,
+		},
+	};
+
+	if ( forWooPay ) {
+		appearance.rules = {
+			...appearance.rules,
 			'.Heading': headingRules,
 			'.Button': buttonRules,
 			'.Link': linkRules,
-		},
-	};
+		};
+	}
+
 	// Remove hidden fields from DOM.
 	hiddenElementsForUPE.cleanup();
 	return appearance;

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

@@ -44,7 +44,7 @@ describe( 'Getting styles for automated theming', () => {
 			'.Input'
 		);
 		expect( fieldStyles ).toEqual( {
-			backgroundColor: 'rgb(255, 255, 255)',
+			backgroundColor: 'rgba(0, 0, 0, 0)',
 			color: 'rgb(109, 109, 109)',
 			fontFamily:
 				'"Source Sans Pro", HelveticaNeue-Light, "Helvetica Neue Light"',
@@ -119,7 +119,10 @@ describe( 'Getting styles for automated theming', () => {
 			return mockCSStyleDeclaration;
 		} );
 
-		const appearance = upeStyles.getAppearance( 'shortcode_checkout' );
+		const appearance = upeStyles.getAppearance(
+			'shortcode_checkout',
+			true
+		);
 		expect( appearance ).toEqual( {
 			variables: {
 				colorBackground: '#ffffff',
@@ -131,7 +134,7 @@ describe( 'Getting styles for automated theming', () => {
 			theme: 'stripe',
 			rules: {
 				'.Input': {
-					backgroundColor: 'rgb(255, 255, 255)',
+					backgroundColor: 'rgba(0, 0, 0, 0)',
 					color: 'rgb(109, 109, 109)',
 					fontFamily:
 						'"Source Sans Pro", HelveticaNeue-Light, "Helvetica Neue Light"',
@@ -140,7 +143,7 @@ describe( 'Getting styles for automated theming', () => {
 					padding: '10px',
 				},
 				'.Input--invalid': {
-					backgroundColor: 'rgb(255, 255, 255)',
+					backgroundColor: 'rgba(0, 0, 0, 0)',
 					color: 'rgb(109, 109, 109)',
 					fontFamily:
 						'"Source Sans Pro", HelveticaNeue-Light, "Helvetica Neue Light"',
@@ -156,24 +159,24 @@ describe( 'Getting styles for automated theming', () => {
 					padding: '10px',
 				},
 				'.Tab': {
-					backgroundColor: 'rgb(255, 255, 255)',
+					backgroundColor: 'rgba(0, 0, 0, 0)',
 					color: 'rgb(109, 109, 109)',
 					fontFamily:
 						'"Source Sans Pro", HelveticaNeue-Light, "Helvetica Neue Light"',
 				},
 				'.Tab:hover': {
-					backgroundColor: 'rgb(237, 237, 237)',
-					color: 'rgb(0, 0, 0)',
+					backgroundColor: 'rgba(18, 18, 18, 0)',
+					color: 'rgb(255, 255, 255)',
 					fontFamily:
 						'"Source Sans Pro", HelveticaNeue-Light, "Helvetica Neue Light"',
 				},
 				'.Tab--selected': {
-					backgroundColor: 'rgb(255, 255, 255)',
+					backgroundColor: 'rgba(0, 0, 0, 0)',
 					color: 'rgb(109, 109, 109)',
 					outline: '1px solid rgb(150, 88, 138)',
 				},
 				'.TabIcon:hover': {
-					color: 'rgb(0, 0, 0)',
+					color: 'rgb(255, 255, 255)',
 				},
 				'.TabIcon--selected': {
 					color: 'rgb(109, 109, 109)',
@@ -204,7 +207,7 @@ describe( 'Getting styles for automated theming', () => {
 					padding: '10px',
 				},
 				'.Button': {
-					backgroundColor: 'rgb(255, 255, 255)',
+					backgroundColor: 'rgba(0, 0, 0, 0)',
 					color: 'rgb(109, 109, 109)',
 					fontFamily:
 						'"Source Sans Pro", HelveticaNeue-Light, "Helvetica Neue Light"',