diff --git a/changelog/dev-fix-po-notice-not-appearing b/changelog/dev-fix-po-notice-not-appearing new file mode 100644 index 00000000000..c6d74e1e348 --- /dev/null +++ b/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. diff --git a/changelog/fix-6950-fix-imp-mobile-tooltip b/changelog/fix-6950-fix-imp-mobile-tooltip new file mode 100644 index 00000000000..651b5757222 --- /dev/null +++ b/changelog/fix-6950-fix-imp-mobile-tooltip @@ -0,0 +1,4 @@ +Significance: patch +Type: fix + +Fixed tooltip alignment for mobile view in payment settings diff --git a/changelog/fix-express-checkout-wrapper-float b/changelog/fix-express-checkout-wrapper-float new file mode 100644 index 00000000000..398c084b0a0 --- /dev/null +++ b/changelog/fix-express-checkout-wrapper-float @@ -0,0 +1,4 @@ +Significance: patch +Type: fix + +Clear floats for payment request button wrapper. diff --git a/changelog/misc-checkout-scipt-alignment b/changelog/misc-checkout-scipt-alignment new file mode 100644 index 00000000000..a06bc0e494d --- /dev/null +++ b/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 diff --git a/changelog/rpp-authentication-state-meta b/changelog/rpp-authentication-state-meta new file mode 100644 index 00000000000..b35cdfbeb63 --- /dev/null +++ b/changelog/rpp-authentication-state-meta @@ -0,0 +1,5 @@ +Significance: patch +Type: dev +Comment: Storing the metadata, that was forgotten in 7471 + + diff --git a/client/checkout/classic/upe-deferred-intent-creation/event-handlers.js b/client/checkout/classic/upe-deferred-intent-creation/event-handlers.js index c41f476816c..2738fa6537c 100644 --- a/client/checkout/classic/upe-deferred-intent-creation/event-handlers.js +++ b/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' ), diff --git a/client/checkout/classic/upe-deferred-intent-creation/payment-processing.js b/client/checkout/classic/upe-deferred-intent-creation/payment-processing.js index dc4dc62c5d6..0db865f562d 100644 --- a/client/checkout/classic/upe-deferred-intent-creation/payment-processing.js +++ b/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 diff --git a/client/checkout/express-checkout-buttons.scss b/client/checkout/express-checkout-buttons.scss index ef813873378..9cf1134ed5b 100644 --- a/client/checkout/express-checkout-buttons.scss +++ b/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; diff --git a/client/components/payment-methods-list/payment-method.tsx b/client/components/payment-methods-list/payment-method.tsx index 7f5bb405f37..57d7dd105d8 100644 --- a/client/components/payment-methods-list/payment-method.tsx +++ b/client/components/payment-methods-list/payment-method.tsx @@ -111,10 +111,15 @@ 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( @@ -122,12 +127,13 @@ const PaymentMethod = ( { ); 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 + ) + } /> ), }, diff --git a/client/components/tooltip/style.scss b/client/components/tooltip/style.scss index b0d053c2fcb..aa0cfe52062 100644 --- a/client/components/tooltip/style.scss +++ b/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 ); } diff --git a/client/components/tooltip/tooltip-base.tsx b/client/components/tooltip/tooltip-base.tsx index 7dbb818fba4..0a2c0f5ca92 100644 --- a/client/components/tooltip/tooltip-base.tsx +++ b/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. diff --git a/src/Internal/Payment/State/InitialState.php b/src/Internal/Payment/State/InitialState.php index 7e3311d6819..87b59eec817 100644 --- a/src/Internal/Payment/State/InitialState.php +++ b/src/Internal/Payment/State/InitialState.php @@ -106,6 +106,7 @@ public function start_processing( PaymentRequest $request ) { // Intent requires authorization (3DS check). if ( Intent_Status::REQUIRES_ACTION === $intent->get_status() ) { + $this->order_service->update_order_from_intent_that_requires_action( $context->get_order_id(), $intent, $context ); return $this->create_state( AuthenticationRequiredState::class ); } diff --git a/src/Internal/Service/OrderService.php b/src/Internal/Service/OrderService.php index ca7b3ee9083..457cd9a0176 100644 --- a/src/Internal/Service/OrderService.php +++ b/src/Internal/Service/OrderService.php @@ -213,6 +213,34 @@ public function update_order_from_successful_intent( } } + /** + * Updates the order with the necessary details whenever an intent requires action. + * + * @param int $order_id ID of the order. + * @param WC_Payments_API_Abstract_Intention $intent Remote object. To be abstracted soon. + * @param PaymentContext $context Context for the payment. + * @throws Order_Not_Found_Exception + */ + public function update_order_from_intent_that_requires_action( + int $order_id, + WC_Payments_API_Abstract_Intention $intent, + PaymentContext $context + ) { + $order = $this->get_order( $order_id ); + + $this->legacy_service->attach_intent_info_to_order( + $order, + $intent->get_id(), + $intent->get_status(), + $context->get_payment_method()->get_id(), + $context->get_customer_id(), + '', + $context->get_currency() + ); + + $this->legacy_service->update_order_status_from_intent( $order, $intent ); + } + /** * Given the charge data, checks if there was an exchange and adds it to the given order as metadata * diff --git a/tests/unit/src/Internal/Payment/State/InitialStateTest.php b/tests/unit/src/Internal/Payment/State/InitialStateTest.php index 74687a167e6..f0df9ce0833 100644 --- a/tests/unit/src/Internal/Payment/State/InitialStateTest.php +++ b/tests/unit/src/Internal/Payment/State/InitialStateTest.php @@ -15,6 +15,7 @@ use PHPUnit\Framework\MockObject\MockObject; use PHPUnit_Utils; use WC_Order; +use WC_Payments_API_Payment_Intention; use WC_Payments_Customer_Service; use WCPay\Core\Exceptions\Server\Request\Invalid_Request_Parameter_Exception; use WCPay\Internal\Payment\State\InitialState; @@ -175,22 +176,35 @@ public function test_start_processing_will_transition_to_error_state_when_api_ex } public function test_processing_will_transition_to_auth_required_state() { + $order_id = 123; $mock_request = $this->createMock( PaymentRequest::class ); $mock_auth_state = $this->createMock( AuthenticationRequiredState::class ); + // Create an intent, and make sure it will be returned by the service. + $mock_intent = $this->createMock( WC_Payments_API_Payment_Intention::class ); + $mock_intent->expects( $this->once() )->method( 'get_status' )->willReturn( Intent_Status::REQUIRES_ACTION ); $this->mock_payment_request_service->expects( $this->once() ) ->method( 'create_intent' ) ->with( $this->mock_context ) - ->willReturn( WC_Helper_Intention::create_intention( [ 'status' => Intent_Status::REQUIRES_ACTION ] ) ); + ->willReturn( $mock_intent ); // Let's mock these services in order to prevent real execution of them. $this->mocked_sut->expects( $this->once() )->method( 'populate_context_from_request' )->with( $mock_request ); $this->mocked_sut->expects( $this->once() )->method( 'populate_context_from_order' ); + // Before the transition, the order service should update the order. + $this->mock_context->expects( $this->once() ) + ->method( 'get_order_id' ) + ->willReturn( $order_id ); + $this->mock_order_service->expects( $this->once() ) + ->method( 'update_order_from_intent_that_requires_action' ) + ->with( $order_id, $mock_intent, $this->mock_context ); + $this->mock_state_factory->expects( $this->once() ) ->method( 'create_state' ) ->with( AuthenticationRequiredState::class, $this->mock_context ) ->willReturn( $mock_auth_state ); + $result = $this->mocked_sut->start_processing( $mock_request ); $this->assertSame( $mock_auth_state, $result ); } diff --git a/tests/unit/src/Internal/Service/OrderServiceTest.php b/tests/unit/src/Internal/Service/OrderServiceTest.php index 362cb725fa9..168de422bf8 100644 --- a/tests/unit/src/Internal/Service/OrderServiceTest.php +++ b/tests/unit/src/Internal/Service/OrderServiceTest.php @@ -385,6 +385,53 @@ public function test_update_order_from_successful_intent( $intent ) { $this->sut->update_order_from_successful_intent( $this->order_id, $intent, $mock_context ); } + /** + * Test for the `update_order_from_intent_that_requires_action` method. + */ + public function test_update_order_from_intent_that_requires_action() { + $intent_id = 'pi_XYZ'; + $intent_status = 'success'; + $customer_id = 'cus_XYZ'; + $currency = 'usd'; + $payment_method_id = 'pm_XYZ'; + + // Prepare the context, and all needed getters. + $mock_context = $this->createMock( PaymentContext::class ); + $mock_context->expects( $this->once() )->method( 'get_payment_method' )->willReturn( new NewPaymentMethod( $payment_method_id ) ); + $mock_context->expects( $this->once() )->method( 'get_customer_id' )->willReturn( $customer_id ); + $mock_context->expects( $this->once() )->method( 'get_currency' )->willReturn( $currency ); + + // Create a mock order that will be used, and return it. + $mock_order = $this->createMock( WC_Order::class ); + $this->sut->expects( $this->once() ) + ->method( 'get_order' ) + ->with( $this->order_id ) + ->willReturn( $mock_order ); + + // Prepare the intent, and all expected getters. + $mock_intent = $this->createMock( WC_Payments_API_Payment_Intention::class ); + $mock_intent->expects( $this->once() )->method( 'get_id' )->willReturn( $intent_id ); + $mock_intent->expects( $this->once() )->method( 'get_status' )->willReturn( $intent_status ); + + $this->mock_legacy_service->expects( $this->once() ) + ->method( 'attach_intent_info_to_order' ) + ->with( + $mock_order, + $intent_id, + $intent_status, + $payment_method_id, + $customer_id, + null, + $currency + ); + + $this->mock_legacy_service->expects( $this->once() ) + ->method( 'update_order_status_from_intent' ) + ->with( $mock_order, $mock_intent ); + + $this->sut->update_order_from_intent_that_requires_action( $this->order_id, $mock_intent, $mock_context ); + } + public function provider_attach_exchange_info_to_order() { return [ 'Different store and account currencies' => [ 'USD', 'USD', 'EUR', null, null ],