Merge branch 'develop' into fix/9651-record-tracks-event-capital-view…

…-offer-redirect

assets/css/success.css

@@ -3,13 +3,13 @@
 	align-items: center;
 	flex-wrap: wrap;
 	line-height: 1;
+	padding-top: 4px;
 }
 
 .wc-payment-gateway-method-logo-wrapper img {
 	margin-right: 0.5rem;
-	padding-top: 4px;
 }
 
-.wc-payment-gateway-method-logo-wrapper.wc-payment-bnpl-logo img {
-	max-height: 30px;
+.wc-payment-gateway-method-logo-wrapper.wc-payment-lpm-logo img {
+	max-height: 26px;
 }

assets/css/success.rtl.css

@@ -3,13 +3,13 @@
 	align-items: center;
 	flex-wrap: wrap;
 	line-height: 1;
+	padding-top: 4px;
 }
 
 .wc-payment-gateway-method-logo-wrapper img {
 	margin-left: 0.5rem;
-	padding-top: 4px;
 }
 
-.wc-payment-gateway-method-logo-wrapper.wc-payment-bnpl-logo img {
-	max-height: 30px;
+.wc-payment-gateway-method-logo-wrapper.wc-payment-lpm-logo img {
+	max-height: 26px;
 }

changelog/fix-8423-klarna-cant-undo-manual-refunds-and-process-refunds-again-via-woopayments

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Include missing scripts that handle refunds for non credit card payments in the order details page.

changelog/fix-9676-multi-currency-autoload

@@ -0,0 +1,5 @@
+Significance: patch
+Type: fix
+Comment: Keep multi-currency module in the same path to avoid autoload errors.
+
+

changelog/fix-saving-duplicate-3ds-cards

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix duplicate saving of 3DS card entry after checkout

changelog/update-order-success-lpm-icon

@@ -0,0 +1,4 @@
+Significance: patch
+Type: update
+
+update: show LPM payment method icon on order success page

changelog/update-payment-method-test-mode-label

@@ -0,0 +1,4 @@
+Significance: patch
+Type: update
+
+update: payment method "test mode" label at checkout to be displayed only when payment method is selected

client/checkout/api/index.js

@@ -125,10 +125,10 @@ export default class WCPayAPI {
 	 * and displays the intent confirmation modal (if needed).
 	 *
 	 * @param {string} redirectUrl The redirect URL, returned from the server.
-	 * @param {string} paymentMethodToSave The ID of a Payment Method if it should be saved (optional).
+	 * @param {boolean} shouldSavePaymentMethod Whether the payment method should be saved.
 	 * @return {Promise<string>|boolean} A redirect URL on success, or `true` if no confirmation is needed.
 	 */
-	confirmIntent( redirectUrl, paymentMethodToSave ) {
+	confirmIntent( redirectUrl, shouldSavePaymentMethod = false ) {
 		const partials = redirectUrl.match(
 			/#wcpay-confirm-(pi|si):(.+):(.+):(.+)$/
 		);
@@ -219,7 +219,9 @@ export default class WCPayAPI {
 						// order status call works when a guest user creates an account during checkout.
 						_ajax_nonce: nonce,
 						intent_id: intentId,
-						payment_method_id: paymentMethodToSave || null,
+						should_save_payment_method: shouldSavePaymentMethod
+							? 'true'
+							: 'false',
 					} );
 
 					return [ ajaxCall, result.error ];

client/checkout/blocks/confirm-card-payment.js

@@ -13,12 +13,12 @@ export default async function confirmCardPayment(
 	emitResponse,
 	shouldSavePayment
 ) {
-	const { redirect, payment_method: paymentMethod } = paymentDetails;
+	const { redirect } = paymentDetails;
 
 	try {
 		const confirmationRequest = api.confirmIntent(
 			redirect,
-			shouldSavePayment ? paymentMethod : null
+			shouldSavePayment
 		);
 
 		// `true` means there is no intent to confirm.

client/checkout/blocks/index.js

@@ -110,7 +110,10 @@ Object.entries( enabledPaymentMethodsConfig )
 			label: (
 				<PaymentMethodLabel
 					api={ api }
-					upeConfig={ upeConfig }
+					title={ upeConfig.title }
+					countries={ upeConfig.countries }
+					iconLight={ upeConfig.icon }
+					iconDark={ upeConfig.darkIcon }
 					upeName={ upeName }
 					upeAppearanceTheme={ upeAppearanceTheme }
 				/>

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

@@ -12,9 +12,50 @@ import './style.scss';
 import { useEffect, useState } from '@wordpress/element';
 import { getAppearance } from 'wcpay/checkout/upe-styles';
 
-export default ( { api, upeConfig, upeName, upeAppearanceTheme } ) => {
+const bnplMethods = [ 'affirm', 'afterpay_clearpay', 'klarna' ];
+const PaymentMethodMessageWrapper = ( {
+	upeName,
+	countries,
+	currentCountry,
+	amount,
+	appearance,
+	children,
+} ) => {
+	if ( ! bnplMethods.includes( upeName ) ) {
+		return null;
+	}
+
+	if ( amount <= 0 ) {
+		return null;
+	}
+
+	if ( ! currentCountry ) {
+		return null;
+	}
+
+	if ( ! appearance ) {
+		return null;
+	}
+
+	if ( countries.length !== 0 && ! countries.includes( currentCountry ) ) {
+		return null;
+	}
+
+	return (
+		<div className="payment-method-label__pmme-container">{ children }</div>
+	);
+};
+
+export default ( {
+	api,
+	title,
+	countries,
+	iconLight,
+	iconDark,
+	upeName,
+	upeAppearanceTheme,
+} ) => {
 	const cartData = wp.data.select( 'wc/store/cart' ).getCartData();
-	const bnplMethods = [ 'affirm', 'afterpay_clearpay', 'klarna' ];
 	const isTestMode = getUPEConfig( 'testMode' );
 	const [ appearance, setAppearance ] = useState(
 		getUPEConfig( 'wcBlocksUPEAppearance' )
@@ -35,8 +76,6 @@ export default ( { api, upeConfig, upeName, upeAppearanceTheme } ) => {
 		window.wcBlocksCheckoutData?.storeCountry ||
 		'US';
 
-	const isCreditCard = upeName === 'card';
-
 	useEffect( () => {
 		async function generateUPEAppearance() {
 			// Generate UPE input styles.
@@ -56,50 +95,44 @@ export default ( { api, upeConfig, upeName, upeAppearanceTheme } ) => {
 	return (
 		<>
 			<div className="payment-method-label">
-				<span className="payment-method-label__label">
-					{ upeConfig.title }
-				</span>
-				{ isCreditCard && isTestMode && (
+				<span className="payment-method-label__label">{ title }</span>
+				{ isTestMode && (
 					<span className="test-mode badge">
 						{ __( 'Test Mode', 'woocommerce-payments' ) }
 					</span>
 				) }
 				<img
 					className="payment-methods--logos"
 					src={
-						upeAppearanceTheme === 'night'
-							? upeConfig.darkIcon
-							: upeConfig.icon
+						upeAppearanceTheme === 'night' ? iconDark : iconLight
 					}
-					alt={ upeConfig.title }
+					alt={ title }
 				/>
 			</div>
-			{ bnplMethods.includes( upeName ) &&
-				( upeConfig.countries.length === 0 ||
-					upeConfig.countries.includes( currentCountry ) ) &&
-				amount > 0 &&
-				currentCountry &&
-				appearance && (
-					<div className="bnpl-message">
-						<Elements
-							stripe={ api.getStripeForUPE( upeName ) }
-							options={ {
-								appearance: appearance,
-							} }
-						>
-							<PaymentMethodMessagingElement
-								options={ {
-									amount: amount || 0,
-									currency:
-										cartData.totals.currency_code || 'USD',
-									paymentMethodTypes: [ upeName ],
-									countryCode: currentCountry,
-									displayType: 'promotional_text',
-								} }
-							/>
-						</Elements>
-					</div>
-				) }
+			<PaymentMethodMessageWrapper
+				upeName={ upeName }
+				countries={ countries }
+				amount={ amount }
+				currentCountry={ currentCountry }
+				appearance={ appearance }
+			>
+				<Elements
+					stripe={ api.getStripeForUPE( upeName ) }
+					options={ {
+						appearance: appearance,
+					} }
+				>
+					<PaymentMethodMessagingElement
+						options={ {
+							amount: amount || 0,
+							currency: cartData.totals.currency_code || 'USD',
+							paymentMethodTypes: [ upeName ],
+							countryCode: currentCountry,
+							displayType: 'promotional_text',
+						} }
+					/>
+				</Elements>
+			</PaymentMethodMessageWrapper>
 		</>
 	);
 };

client/checkout/blocks/style.scss

@@ -43,6 +43,21 @@ button.wcpay-stripelink-modal-trigger:hover {
 }
 
 .wc-block-checkout__payment-method {
+	input:checked ~ div {
+		.wc-block-components-radio-control__label {
+			> .payment-method-label {
+				.test-mode.badge {
+					// hiding the badge when the payment method is not selected
+					display: inline-block;
+				}
+
+				&__pmme-container {
+					display: none;
+				}
+			}
+		}
+	}
+
 	.wc-block-components-radio-control__label {
 		width: 100%;
 		display: block !important;
@@ -77,6 +92,7 @@ button.wcpay-stripelink-modal-trigger:hover {
 				color: #4d3716;
 				justify-self: start;
 				width: max-content;
+				display: none;
 			}
 
 			@include breakpoint( '<480px' ) {
@@ -88,13 +104,14 @@ button.wcpay-stripelink-modal-trigger:hover {
 					justify-self: end;
 				}
 			}
-		}
 
-		.bnpl-message {
-			width: 100%;
+			&__pmme-container {
+				width: 100%;
+				pointer-events: none;
 
-			@include breakpoint( '<480px' ) {
-				margin-top: 8px;
+				@include breakpoint( '<480px' ) {
+					margin-top: 8px;
+				}
 			}
 		}
 	}
@@ -112,11 +129,6 @@ button.wcpay-stripelink-modal-trigger:hover {
 }
 
 #payment-method {
-	label.wc-block-components-radio-control__option-checked {
-		.StripeElement {
-			display: none;
-		}
-	}
 	/* stylelint-disable-next-line selector-id-pattern */
 	#radio-control-wc-payment-method-options-woocommerce_payments_affirm__label
 		img {

client/checkout/classic/3ds-flow-handling.js

@@ -22,12 +22,9 @@ const cleanupURL = () => {
 };
 
 export const showAuthenticationModalIfRequired = ( api ) => {
-	const paymentMethodId = document.querySelector( '#wcpay-payment-method' )
-		?.value;
-
 	const confirmationRequest = api.confirmIntent(
 		window.location.href,
-		shouldSavePaymentPaymentMethod() ? paymentMethodId : null
+		shouldSavePaymentPaymentMethod()
 	);
 
 	// Boolean `true` means that there is nothing to confirm.