Merge branch 'develop' into fix/date-type

changelog/7466-fix-hpos-compat-order-edit

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix order status inconsistency in HPOS mode on Order Edit screen.

changelog/dev-fix-po-notice-not-appearing

@@ -0,0 +1,4 @@
+Significance: minor
+Type: fix
+
+Update to properly show tooltip on Payments > Settings page when account is in PO state.

changelog/fix-6950-fix-imp-mobile-tooltip

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fixed tooltip alignment for mobile view in payment settings

changelog/fix-7473-accept-dispute-loading-state-ui

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Show loading state when accepting a dispute from the transaction details screen.

changelog/fix-7487-dispute-e2e-tests-failing-wc-77

@@ -0,0 +1,5 @@
+Significance: patch
+Type: dev
+Comment: Fix dispute e2e tests that were broken for WC 7.7
+
+

changelog/fix-7509-afterpay-checkout-fails-when-shipping-information-is-missing

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix Afterpay checkout error when shipping information is missing

changelog/fix-express-checkout-wrapper-float

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Clear floats for payment request button wrapper.

changelog/misc-checkout-scipt-alignment

@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Align deferred intent creation UPE checkout script with UPE inn terms of fonts appearance

changelog/rpp-authentication-state-meta

@@ -0,0 +1,5 @@
+Significance: patch
+Type: dev
+Comment: Storing the metadata, that was forgotten in 7471
+
+

client/checkout/classic/upe-deferred-intent-creation/event-handlers.js

@@ -28,9 +28,16 @@ import { isPreviewing } from 'wcpay/checkout/preview';
 
 jQuery( function ( $ ) {
 	enqueueFraudScripts( getUPEConfig( 'fraudServices' ) );
+	const publishableKey = getUPEConfig( 'publishableKey' );
+
+	if ( ! publishableKey ) {
+		// If no configuration is present, probably this is not the checkout page.
+		return;
+	}
+
 	const api = new WCPayAPI(
 		{
-			publishableKey: getUPEConfig( 'publishableKey' ),
+			publishableKey: publishableKey,
 			accountId: getUPEConfig( 'accountId' ),
 			forceNetworkSavedCards: getUPEConfig( 'forceNetworkSavedCards' ),
 			locale: getUPEConfig( 'locale' ),

client/checkout/classic/upe-deferred-intent-creation/payment-processing.js

@@ -2,7 +2,7 @@
  * Internal dependencies
  */
 import { getUPEConfig } from 'wcpay/utils/checkout';
-import { getAppearance } from '../../upe-styles';
+import { getAppearance, getFontRulesFromPage } from '../../upe-styles';
 import showErrorCheckout from 'wcpay/checkout/utils/show-error-checkout';
 import {
 	appendFingerprintInputToForm,
@@ -160,6 +160,7 @@ async function createStripePaymentElement( api, paymentMethodType ) {
 		paymentMethodCreation: 'manual',
 		paymentMethodTypes: paymentMethodTypes,
 		appearance: initializeAppearance( api ),
+		fonts: getFontRulesFromPage(),
 	};
 
 	const elements = api

client/checkout/express-checkout-buttons.scss

@@ -1,6 +1,7 @@
 .wcpay-payment-request-wrapper {
 	margin-top: 1em;
 	width: 100%;
+	clear: both;
 
 	&:first-child {
 		margin-top: 0;

client/components/payment-methods-list/payment-method.tsx

@@ -111,23 +111,29 @@ const PaymentMethod = ( {
 	isPoEnabled,
 	isPoComplete,
 }: PaymentMethodProps ): React.ReactElement => {
+	// We want to show a tooltip if PO is enabled and not yet complete. (We make an exception to not show this for card payments).
+	const isPoInProgress =
+		isPoEnabled &&
+		! isPoComplete &&
+		status !== upeCapabilityStatuses.ACTIVE;
+
 	// APMs are disabled if they are inactive or if Progressive Onboarding is enabled and not yet complete.
 	const disabled =
-		upeCapabilityStatuses.INACTIVE === status ||
-		( id !== 'card' && isPoEnabled && ! isPoComplete );
+		upeCapabilityStatuses.INACTIVE === status || isPoInProgress;
 	const {
 		accountFees,
 	}: { accountFees: Record< string, FeeStructure > } = useContext(
 		WCPaySettingsContext
 	);
 	const [ isManualCaptureEnabled ] = useManualCapture();
 
-	const needsAttention = [
+	const needsMoreInformation = [
 		upeCapabilityStatuses.INACTIVE,
 		upeCapabilityStatuses.PENDING_APPROVAL,
 		upeCapabilityStatuses.PENDING_VERIFICATION,
 	].includes( status );
 
+	const needsAttention = needsMoreInformation || isPoInProgress;
 	const shouldDisplayNotice = id === 'sofort';
 
 	const needsOverlay =
@@ -190,9 +196,13 @@ const PaymentMethod = ( {
 								'woocommerce-payments'
 							) }
 							/* eslint-disable-next-line max-len */
-							href={ getDocumentationUrlForDisabledPaymentMethod(
-								paymentMethodId
-							) }
+							href={
+								isPoInProgress
+									? 'https://woocommerce.com/document/woopayments/startup-guide/gradual-signup/#additional-payment-methods'
+									: getDocumentationUrlForDisabledPaymentMethod(
+											paymentMethodId
+									  )
+							}
 						/>
 					),
 				},

client/components/tooltip/style.scss

@@ -52,21 +52,6 @@
 		padding: 10px;
 		text-align: center;
 
-		&::after {
-			content: ' ';
-			position: absolute;
-
-			// assuming all the tooltips are displayed at the top of the wrapped element.
-			// no need to complicate things since that's the only use case at the moment.
-			bottom: 0;
-			left: 50%;
-			transform: translate( -50%, 22px );
-			border: solid 15px transparent;
-			border-top-color: $gray-900;
-			// Ensure the tooltip arrow does not obscure the mouse target element.
-			pointer-events: none;
-		}
-
 		a {
 			color: var( --wp-admin-theme-color, $gutenberg-blue );
 		}

client/components/tooltip/tooltip-base.tsx

@@ -223,9 +223,18 @@ const TooltipBase: React.FC< TooltipBaseProps > = ( {
 				wrappedElement.offsetWidth / 2 + wrappedElementRect.left;
 			const tooltipWidth = tooltipElement.offsetWidth;
 			let tooltipLeft = elementMiddle - tooltipWidth / 2;
+			const tooltipRight =
+				window.innerWidth -
+				( wrappedElementRect.left + tooltipElement.offsetWidth );
+
 			if ( tooltipLeft < 0 ) {
-				tooltipLeft = 10;
+				// create a gap with the left edge if the element is out of view port
+				tooltipLeft = 45;
+			} else if ( tooltipRight < 0 ) {
+				// create a gap with the right edge if the element is out of view port
+				tooltipLeft = tooltipLeft - 85;
 			}
+
 			tooltipElement.style.left = `${ tooltipLeft }px`;
 
 			// make it visible only after all the calculations are done.

client/order/index.js

@@ -56,7 +56,15 @@ jQuery( function ( $ ) {
 	);
 
 	$( 'select#order_status' ).on( 'change', function () {
-		const originalStatus = $( 'input#original_post_status' ).val();
+		//get the original status of the order from post or order data.
+		let originalStatus =
+			$( 'input#original_post_status' ).val() ||
+			$( 'input#original_order_status' ).val();
+		//TODO: Remove this after https://github.com/woocommerce/woocommerce/issues/40871 is fixed.
+		if ( originalStatus && ! originalStatus.startsWith( 'wc-' ) ) {
+			originalStatus = 'wc-' + originalStatus;
+		}
+
 		const canRefund = getConfig( 'canRefund' );
 		const refundAmount = getConfig( 'refundAmount' );
 		if (

client/payment-details/dispute-details/dispute-awaiting-response-details.tsx

@@ -82,10 +82,14 @@ interface AcceptDisputeProps {
 /**
  * Disputes and Inquiries have different text for buttons and the modal.
  * They also have different icons and tracks events. This function returns the correct props.
- *
- * @param dispute
  */
-function getAcceptDisputeProps( dispute: Dispute ): AcceptDisputeProps {
+function getAcceptDisputeProps( {
+	dispute,
+	isDisputeAcceptRequestPending,
+}: {
+	dispute: Dispute;
+	isDisputeAcceptRequestPending: boolean;
+} ): AcceptDisputeProps {
 	if ( isInquiry( dispute ) ) {
 		return {
 			acceptButtonLabel: __( 'Issue refund', 'woocommerce-payments' ),
@@ -146,7 +150,9 @@ function getAcceptDisputeProps( dispute: Dispute ): AcceptDisputeProps {
 				),
 			},
 		],
-		modalButtonLabel: __( 'Accept dispute', 'woocommerce-payments' ),
+		modalButtonLabel: isDisputeAcceptRequestPending
+			? __( 'Accepting…', 'woocommerce-payments' )
+			: __( 'Accept dispute', 'woocommerce-payments' ),
 		modalButtonTracksEvent: wcpayTracks.events.DISPUTE_ACCEPT_CLICK,
 	};
 }
@@ -157,7 +163,10 @@ const DisputeAwaitingResponseDetails: React.FC< Props > = ( {
 	chargeCreated,
 	orderUrl,
 } ) => {
-	const { doAccept, isLoading } = useDisputeAccept( dispute );
+	const {
+		doAccept,
+		isLoading: isDisputeAcceptRequestPending,
+	} = useDisputeAccept( dispute );
 	const [ isModalOpen, setModalOpen ] = useState( false );
 
 	const now = moment();
@@ -170,7 +179,11 @@ const DisputeAwaitingResponseDetails: React.FC< Props > = ( {
 		featureFlags: { isDisputeIssuerEvidenceEnabled },
 	} = useContext( WCPaySettingsContext );
 
-	const onModalClose = () => {
+	const handleModalClose = () => {
+		// Don't allow the user to close the modal if the accept request is in progress.
+		if ( isDisputeAcceptRequestPending ) {
+			return;
+		}
 		setModalOpen( false );
 	};
 
@@ -188,7 +201,10 @@ const DisputeAwaitingResponseDetails: React.FC< Props > = ( {
 		);
 	};
 
-	const disputeAcceptAction = getAcceptDisputeProps( dispute );
+	const disputeAcceptAction = getAcceptDisputeProps( {
+		dispute,
+		isDisputeAcceptRequestPending,
+	} );
 
 	const challengeButtonDefaultText = isInquiry( dispute )
 		? __( 'Submit evidence', 'woocommerce-payments' )
@@ -239,7 +255,7 @@ const DisputeAwaitingResponseDetails: React.FC< Props > = ( {
 							<Link
 								href={
 									// Prevent the user navigating to the challenge screen if the accept request is in progress.
-									isLoading
+									isDisputeAcceptRequestPending
 										? ''
 										: getAdminUrl( {
 												page: 'wc-admin',
@@ -252,7 +268,7 @@ const DisputeAwaitingResponseDetails: React.FC< Props > = ( {
 								<Button
 									variant="primary"
 									data-testid="challenge-dispute-button"
-									disabled={ isLoading }
+									disabled={ isDisputeAcceptRequestPending }
 									onClick={ () => {
 										wcpayTracks.recordEvent(
 											wcpayTracks.events
@@ -275,7 +291,7 @@ const DisputeAwaitingResponseDetails: React.FC< Props > = ( {
 
 							<Button
 								variant="tertiary"
-								disabled={ isLoading }
+								disabled={ isDisputeAcceptRequestPending }
 								data-testid="open-accept-dispute-modal-button"
 								onClick={ () => {
 									wcpayTracks.recordEvent(
@@ -295,7 +311,7 @@ const DisputeAwaitingResponseDetails: React.FC< Props > = ( {
 							{ isModalOpen && (
 								<Modal
 									title={ disputeAcceptAction.modalTitle }
-									onRequestClose={ onModalClose }
+									onRequestClose={ handleModalClose }
 									className="transaction-details-dispute-accept-modal"
 								>
 									<p>
@@ -326,7 +342,10 @@ const DisputeAwaitingResponseDetails: React.FC< Props > = ( {
 									>
 										<Button
 											variant="tertiary"
-											onClick={ onModalClose }
+											disabled={
+												isDisputeAcceptRequestPending
+											}
+											onClick={ handleModalClose }
 										>
 											{ __(
 												'Cancel',
@@ -335,6 +354,12 @@ const DisputeAwaitingResponseDetails: React.FC< Props > = ( {
 										</Button>
 										<Button
 											variant="primary"
+											isBusy={
+												isDisputeAcceptRequestPending
+											}
+											disabled={
+												isDisputeAcceptRequestPending
+											}
 											data-testid="accept-dispute-button"
 											onClick={ () => {
 												wcpayTracks.recordEvent(
@@ -346,7 +371,7 @@ const DisputeAwaitingResponseDetails: React.FC< Props > = ( {
 															'transaction_details',
 													}
 												);
-												setModalOpen( false );
+
 												/**
 												 * Handle the primary modal action.
 												 * If it's an inquiry, redirect to the order page; otherwise, continue with the default dispute acceptance.

client/payment-details/dispute-details/style.scss

@@ -104,7 +104,9 @@
 	}
 }
 .transaction-details-dispute-accept-modal {
-	max-width: 600px;
+	&.components-modal__frame {
+		max-width: 600px;
+	}
 
 	.components-modal__content {
 		padding-top: $grid-unit-30;

includes/class-wc-payment-gateway-wcpay.php

@@ -2890,34 +2890,6 @@ public function cancel_authorization( $order ) {
 		];
 	}
 
-	/**
-	 * Create the shipping data array to send to Stripe when making a purchase.
-	 *
-	 * @param WC_Order $order The order that is being paid for.
-	 * @return array          The shipping data to send to Stripe.
-	 */
-	public function get_shipping_data_from_order( WC_Order $order ): array {
-		return [
-			'name'    => implode(
-				' ',
-				array_filter(
-					[
-						$order->get_shipping_first_name(),
-						$order->get_shipping_last_name(),
-					]
-				)
-			),
-			'address' => [
-				'line1'       => $order->get_shipping_address_1(),
-				'line2'       => $order->get_shipping_address_2(),
-				'postal_code' => $order->get_shipping_postcode(),
-				'city'        => $order->get_shipping_city(),
-				'state'       => $order->get_shipping_state(),
-				'country'     => $order->get_shipping_country(),
-			],
-		];
-	}
-
 	/**
 	 * Create the level 3 data array to send to Stripe when making a purchase.
 	 *
@@ -3736,11 +3708,11 @@ private function upe_needs_redirection( $payment_methods ) {
 	 *
 	 * @param Create_And_Confirm_Intention $request               The request object for creating and confirming intention.
 	 * @param Payment_Information          $payment_information   The payment information object.
-	 * @param mixed                        $order                 The order object or data.
+	 * @param WC_Order                     $order                 The order object.
 	 *
 	 * @return void
 	 */
-	protected function modify_create_intent_parameters_when_processing_payment( Create_And_Confirm_Intention $request, Payment_Information $payment_information, $order ) {
+	protected function modify_create_intent_parameters_when_processing_payment( Create_And_Confirm_Intention $request, Payment_Information $payment_information, WC_Order $order ) {
 		// Do nothing.
 	}
 }