From 5ebb9a8c846454e591f62c4a2d9dc7fde1f7144b Mon Sep 17 00:00:00 2001 From: Rafael Meneses Date: Mon, 21 Jul 2025 10:02:11 -0300 Subject: [PATCH 01/37] Fix icon border color (#10957) --- changelog/fix-icon-border-gray-200 | 4 ++++ client/payment-details/dispute-details/style.scss | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) create mode 100644 changelog/fix-icon-border-gray-200 diff --git a/changelog/fix-icon-border-gray-200 b/changelog/fix-icon-border-gray-200 new file mode 100644 index 00000000000..a8b816f1f2c --- /dev/null +++ b/changelog/fix-icon-border-gray-200 @@ -0,0 +1,4 @@ +Significance: patch +Type: fix + +Fix the icon border of the Steps component for a dispute. diff --git a/client/payment-details/dispute-details/style.scss b/client/payment-details/dispute-details/style.scss index 400c86ef5a1..04cb6339774 100644 --- a/client/payment-details/dispute-details/style.scss +++ b/client/payment-details/dispute-details/style.scss @@ -134,7 +134,7 @@ height: 44px; border-radius: var( --radius-s, 2px ); padding: 10px; - border: 1px solid rgba( 0, 0, 0, 0.1 ); + border: 1px solid $gray-200; margin-right: 12px; @media screen and ( max-width: $break-small ) { From faafc5d6075790772189f7aca930574272c38b73 Mon Sep 17 00:00:00 2001 From: Miguel Gasca Date: Mon, 21 Jul 2025 16:16:31 +0200 Subject: [PATCH 02/37] Update confirmation screen link to how disputes work docs (#10956) --- .../update-woopmnt-5193-fix-link-to-disputes-documentation | 4 ++++ client/disputes/new-evidence/confirmation-screen.tsx | 2 +- .../disputes/new-evidence/test/confirmation-screen.test.tsx | 2 +- 3 files changed, 6 insertions(+), 2 deletions(-) create mode 100644 changelog/update-woopmnt-5193-fix-link-to-disputes-documentation diff --git a/changelog/update-woopmnt-5193-fix-link-to-disputes-documentation b/changelog/update-woopmnt-5193-fix-link-to-disputes-documentation new file mode 100644 index 00000000000..5b444807d2c --- /dev/null +++ b/changelog/update-woopmnt-5193-fix-link-to-disputes-documentation @@ -0,0 +1,4 @@ +Significance: patch +Type: update + +Update the "Learn more about disputes" link in the confirmation screen of the disputes documentation. diff --git a/client/disputes/new-evidence/confirmation-screen.tsx b/client/disputes/new-evidence/confirmation-screen.tsx index 468e898731c..17f31b71d56 100644 --- a/client/disputes/new-evidence/confirmation-screen.tsx +++ b/client/disputes/new-evidence/confirmation-screen.tsx @@ -103,7 +103,7 @@ const ConfirmationScreen: React.FC< ConfirmationScreenProps > = ( { ), { learnMoreLink: ( - + { __( 'Learn more about disputes', 'woocommerce-payments' diff --git a/client/disputes/new-evidence/test/confirmation-screen.test.tsx b/client/disputes/new-evidence/test/confirmation-screen.test.tsx index dc2b49dc2b8..76c07e1e43f 100644 --- a/client/disputes/new-evidence/test/confirmation-screen.test.tsx +++ b/client/disputes/new-evidence/test/confirmation-screen.test.tsx @@ -168,7 +168,7 @@ describe( 'ConfirmationScreen', () => { expect( learnMoreLink ).toBeInTheDocument(); expect( learnMoreLink ).toHaveAttribute( 'href', - 'https://woocommerce.com/document/payments/disputes/' + 'https://woocommerce.com/document/woopayments/fraud-and-disputes/managing-disputes/#how-they-work' ); expect( learnMoreLink ).toHaveAttribute( 'target', '_blank' ); expect( learnMoreLink ).toHaveAttribute( From f0f389224fea0c45181d329bce1887efc608ff9a Mon Sep 17 00:00:00 2001 From: Miguel Gasca Date: Tue, 22 Jul 2025 10:33:51 +0200 Subject: [PATCH 03/37] Extract redirect URL from payment details if not provided. (#10958) --- ...fication-dialog-fails-to-appear-when-using | 4 + .../__tests__/event-handlers.test.js | 78 +++++++++++++++++++ client/express-checkout/cart-api.js | 3 +- client/express-checkout/event-handlers.js | 19 +++-- 4 files changed, 97 insertions(+), 7 deletions(-) create mode 100644 changelog/fix-woopmnt-5191-3d-secure-verification-dialog-fails-to-appear-when-using diff --git a/changelog/fix-woopmnt-5191-3d-secure-verification-dialog-fails-to-appear-when-using b/changelog/fix-woopmnt-5191-3d-secure-verification-dialog-fails-to-appear-when-using new file mode 100644 index 00000000000..997a399d333 --- /dev/null +++ b/changelog/fix-woopmnt-5191-3d-secure-verification-dialog-fails-to-appear-when-using @@ -0,0 +1,4 @@ +Significance: patch +Type: fix + +Fix: Google Pay 3D Secure authentication being bypassed due to redirect URL extraction issue diff --git a/client/express-checkout/__tests__/event-handlers.test.js b/client/express-checkout/__tests__/event-handlers.test.js index a6e9a74b930..1724bf531e3 100644 --- a/client/express-checkout/__tests__/event-handlers.test.js +++ b/client/express-checkout/__tests__/event-handlers.test.js @@ -475,5 +475,83 @@ describe( 'Express checkout event handlers', () => { ); expect( completePayment ).not.toHaveBeenCalled(); } ); + + it( 'should extract redirect URL from payment_details when redirect_url is empty for 3DS authentication', async () => { + const threeDSRedirectUrl = + '#wcpay-confirm-pi:123:pi_1234567890abcdef_secret_test1234567890abcdef:fake_nonce'; + + cartApiPlaceOrderMock.mockResolvedValue( { + order_id: 123, + status: 'pending', + order_key: 'wc_order_test123', + order_number: '123', + customer_note: '', + customer_id: 1, + billing_address: { + first_name: 'Card', + last_name: 'Holder Name', + country: 'US', + address_1: '123 Main St', + address_2: 'Apt 4B', + city: 'New York', + state: 'NY', + postcode: '10001', + company: 'Some Company', + email: 'john.doe@example.com', + phone: '1234567890', + }, + shipping_address: { + first_name: 'Card', + last_name: 'Holder Name', + country: 'US', + address_1: '123 Main St', + address_2: 'Apt 4B', + city: 'New York', + state: 'NY', + postcode: '10001', + company: 'Some Company', + phone: '1234567890', + }, + payment_method: 'woocommerce_payments', + payment_result: { + payment_status: 'success', + payment_details: [ + { + key: 'result', + value: 'success', + }, + { + key: 'redirect', + value: threeDSRedirectUrl, + }, + { + key: 'payment_method', + value: 'pm_test1234567890abcdef', + }, + ], + redirect_url: '', // Empty redirect_url - this is the bug scenario + }, + additional_fields: [], + extensions: {}, + } ); + + api.confirmIntent.mockResolvedValue( true ); + + await onConfirmHandler( + api, + stripe, + elements, + completePayment, + abortPayment, + event + ); + + expect( cartApiPlaceOrderMock ).toHaveBeenCalled(); + expect( api.confirmIntent ).toHaveBeenCalledWith( + threeDSRedirectUrl + ); + expect( completePayment ).toHaveBeenCalled(); + expect( abortPayment ).not.toHaveBeenCalled(); + } ); } ); } ); diff --git a/client/express-checkout/cart-api.js b/client/express-checkout/cart-api.js index bb15bbbe3f4..ba4f435f564 100644 --- a/client/express-checkout/cart-api.js +++ b/client/express-checkout/cart-api.js @@ -68,7 +68,8 @@ export default class ExpressCheckoutCartApi { /** * Creates an order from the cart object. - * See https://github.com/woocommerce/woocommerce/blob/trunk/plugins/woocommerce/src/StoreApi/docs/checkout.md#process-order-and-payment + * See https://github.com/woocommerce/woocommerce/blob/trunk/docs/apis/store-api/ + * resources-endpoints/checkout.md#process-order-and-payment * * @param {{ * billing_address: Object, diff --git a/client/express-checkout/event-handlers.js b/client/express-checkout/event-handlers.js index 89932d134b8..9a146e1ecb4 100644 --- a/client/express-checkout/event-handlers.js +++ b/client/express-checkout/event-handlers.js @@ -143,17 +143,24 @@ export const onConfirmHandler = async ( ); } - const confirmationRequest = api.confirmIntent( - orderResponse.payment_result.redirect_url - ); + // Extract redirect URL from payment_details if redirect_url is empty + let redirectUrl = orderResponse.payment_result.redirect_url; + if ( ! redirectUrl ) { + const redirectDetail = orderResponse.payment_result.payment_details?.find( + ( detail ) => detail.key === 'redirect' + ); + redirectUrl = redirectDetail?.value || ''; + } + + const confirmationRequest = api.confirmIntent( redirectUrl ); // `true` means there is no intent to confirm. if ( confirmationRequest === true ) { - completePayment( orderResponse.payment_result.redirect_url ); + completePayment( redirectUrl ); } else { - const redirectUrl = await confirmationRequest; + const authenticatedRedirectUrl = await confirmationRequest; - completePayment( redirectUrl ); + completePayment( authenticatedRedirectUrl ); } } catch ( e ) { // API errors are not parsed, so we need to do it ourselves. From 0ef4d4f36923086768b64ac65a39c0aa1a07af33 Mon Sep 17 00:00:00 2001 From: Akeda Bagus Date: Wed, 23 Jul 2025 18:20:08 +0700 Subject: [PATCH 04/37] Suppress sending completed-renewal-order email after dispute resolution (#10937) Co-authored-by: Francesco --- changelog/fix-suppress-renewal-order-completed-on-dispute-won | 4 ++++ includes/class-wc-payments-order-service.php | 2 ++ 2 files changed, 6 insertions(+) create mode 100644 changelog/fix-suppress-renewal-order-completed-on-dispute-won diff --git a/changelog/fix-suppress-renewal-order-completed-on-dispute-won b/changelog/fix-suppress-renewal-order-completed-on-dispute-won new file mode 100644 index 00000000000..2919ce57aeb --- /dev/null +++ b/changelog/fix-suppress-renewal-order-completed-on-dispute-won @@ -0,0 +1,4 @@ +Significance: patch +Type: fix + +Suppress sending completed-renewal-order email after dispute resolution diff --git a/includes/class-wc-payments-order-service.php b/includes/class-wc-payments-order-service.php index fbcfa07d40c..64a980ea84f 100644 --- a/includes/class-wc-payments-order-service.php +++ b/includes/class-wc-payments-order-service.php @@ -411,6 +411,7 @@ public function mark_payment_dispute_closed( $order, $charge_id, $status ) { // Order `completed` and `refunded` emails should both be blocked when disputes are closed. add_filter( 'woocommerce_email_enabled_customer_completed_order', '__return_false' ); add_filter( 'woocommerce_email_enabled_customer_refunded_order', '__return_false' ); + add_filter( 'woocommerce_email_enabled_customer_completed_renewal_order', '__return_false' ); if ( 'lost' === $status ) { wc_create_refund( @@ -430,6 +431,7 @@ public function mark_payment_dispute_closed( $order, $charge_id, $status ) { // Restore completed and refunded order emails. remove_filter( 'woocommerce_email_enabled_customer_completed_order', '__return_false' ); remove_filter( 'woocommerce_email_enabled_customer_refunded_order', '__return_false' ); + remove_filter( 'woocommerce_email_enabled_customer_completed_renewal_order', '__return_false' ); $order->add_order_note( $note ); } From 6837901568e78579da1591a756405bd9712a4771 Mon Sep 17 00:00:00 2001 From: Radoslav Georgiev Date: Thu, 24 Jul 2025 10:55:58 +0300 Subject: [PATCH 05/37] Fix subscription PM change notes (#10962) --- ...6-non-specific-card-details-notice-when-updating-payment | 4 ++++ includes/class-wc-payment-gateway-wcpay.php | 2 +- includes/payment-methods/class-cc-payment-method.php | 2 +- .../shopper-subscriptions-purchase-no-signup-fee.spec.ts | 2 +- tests/e2e/utils/shopper.ts | 6 +++--- .../unit/payment-methods/test-class-upe-payment-gateway.php | 2 +- .../test-class-upe-split-payment-gateway.php | 2 +- tests/unit/test-class-wc-payment-gateway-wcpay.php | 2 +- tests/unit/test-class-wc-payments-checkout.php | 2 +- 9 files changed, 14 insertions(+), 10 deletions(-) create mode 100644 changelog/woopmnt-4836-non-specific-card-details-notice-when-updating-payment diff --git a/changelog/woopmnt-4836-non-specific-card-details-notice-when-updating-payment b/changelog/woopmnt-4836-non-specific-card-details-notice-when-updating-payment new file mode 100644 index 00000000000..13b79096357 --- /dev/null +++ b/changelog/woopmnt-4836-non-specific-card-details-notice-when-updating-payment @@ -0,0 +1,4 @@ +Significance: patch +Type: fix + +Fix order notes after subscriptions' payment method gets changed. diff --git a/includes/class-wc-payment-gateway-wcpay.php b/includes/class-wc-payment-gateway-wcpay.php index b6d8dfa5dba..5e5801cfe2e 100644 --- a/includes/class-wc-payment-gateway-wcpay.php +++ b/includes/class-wc-payment-gateway-wcpay.php @@ -1757,7 +1757,7 @@ public function process_payment_for_order( $cart, $payment_information, $schedul // Only attempt to use WC_Subscriptions_Change_Payment_Gateway if it exists. if ( class_exists( 'WC_Subscriptions_Change_Payment_Gateway' ) ) { // Update the payment method for subscription if the payment intent is not requiring action. - WC_Subscriptions_Change_Payment_Gateway::update_payment_method( $order, $payment_information->get_payment_method() ); + WC_Subscriptions_Change_Payment_Gateway::update_payment_method( $order, $this->id ); } // Because this new payment does not require action/confirmation, remove this filter so that WC_Subscriptions_Change_Payment_Gateway proceeds to update all subscriptions if flagged. diff --git a/includes/payment-methods/class-cc-payment-method.php b/includes/payment-methods/class-cc-payment-method.php index 125ac5e1a1b..7912830804a 100644 --- a/includes/payment-methods/class-cc-payment-method.php +++ b/includes/payment-methods/class-cc-payment-method.php @@ -39,7 +39,7 @@ public function __construct( $token_service ) { */ public function get_title( ?string $account_country = null, $payment_details = false ) { if ( ! $payment_details ) { - return __( 'Cards', 'woocommerce-payments' ); + return __( 'Card', 'woocommerce-payments' ); } $details = $payment_details[ $this->stripe_id ]; diff --git a/tests/e2e/specs/subscriptions/shopper/shopper-subscriptions-purchase-no-signup-fee.spec.ts b/tests/e2e/specs/subscriptions/shopper/shopper-subscriptions-purchase-no-signup-fee.spec.ts index b1bc49fab09..9c48a3eaf71 100644 --- a/tests/e2e/specs/subscriptions/shopper/shopper-subscriptions-purchase-no-signup-fee.spec.ts +++ b/tests/e2e/specs/subscriptions/shopper/shopper-subscriptions-purchase-no-signup-fee.spec.ts @@ -94,7 +94,7 @@ describeif( shouldRunSubscriptionsTests )( .replace( '#', '' ); const transactionPageLink = await merchantPage - .getByText( 'Payment via Cards', { exact: false } ) + .getByText( 'Payment via Card', { exact: false } ) .getByRole( 'link', { name: /pi_.+/ } ) .getAttribute( 'href' ); diff --git a/tests/e2e/utils/shopper.ts b/tests/e2e/utils/shopper.ts index 38c4d529ee4..54efef22a73 100644 --- a/tests/e2e/utils/shopper.ts +++ b/tests/e2e/utils/shopper.ts @@ -336,9 +336,9 @@ export const addToCartFromShopPage = async ( export const selectPaymentMethod = async ( page: Page, - paymentMethod = 'Cards' + paymentMethod = 'Card' ) => { - await page.getByText( paymentMethod ).click(); + await page.getByText( paymentMethod, { exact: true } ).click(); }; /** @@ -542,7 +542,7 @@ export const addSavedCard = async ( ) => { await page.getByRole( 'link', { name: 'Add payment method' } ).click(); await page.waitForLoadState( 'networkidle' ); - await page.getByText( 'Cards', { exact: true } ).click(); + await page.getByText( 'Card', { exact: true } ).click(); const frameHandle = page.getByTitle( 'Secure payment input frame' ); const stripeFrame = frameHandle.contentFrame(); diff --git a/tests/unit/payment-methods/test-class-upe-payment-gateway.php b/tests/unit/payment-methods/test-class-upe-payment-gateway.php index d37033667e8..6148ba67adf 100644 --- a/tests/unit/payment-methods/test-class-upe-payment-gateway.php +++ b/tests/unit/payment-methods/test-class-upe-payment-gateway.php @@ -698,7 +698,7 @@ public function test_payment_methods_show_correct_default_outputs() { $afterpay_method = $this->mock_payment_methods['afterpay_clearpay']; $this->assertEquals( 'card', $card_method->get_id() ); - $this->assertEquals( 'Cards', $card_method->get_title( 'US' ) ); + $this->assertEquals( 'Card', $card_method->get_title( 'US' ) ); $this->assertEquals( 'Visa debit card', $card_method->get_title( 'US', $mock_visa_details ) ); $this->assertEquals( 'Mastercard credit card', $card_method->get_title( 'US', $mock_mastercard_details ) ); $this->assertTrue( $card_method->is_enabled_at_checkout( 'US' ) ); diff --git a/tests/unit/payment-methods/test-class-upe-split-payment-gateway.php b/tests/unit/payment-methods/test-class-upe-split-payment-gateway.php index 8bfa76e0f54..0b53a392576 100644 --- a/tests/unit/payment-methods/test-class-upe-split-payment-gateway.php +++ b/tests/unit/payment-methods/test-class-upe-split-payment-gateway.php @@ -1011,7 +1011,7 @@ public function test_payment_methods_show_correct_default_outputs() { $becs_method = $this->mock_payment_methods['au_becs_debit']; $this->assertEquals( 'card', $card_method->get_id() ); - $this->assertEquals( 'Cards', $card_method->get_title( 'US' ) ); + $this->assertEquals( 'Card', $card_method->get_title( 'US' ) ); $this->assertEquals( 'Visa debit card', $card_method->get_title( 'US', $mock_visa_details ) ); $this->assertEquals( 'Mastercard credit card', $card_method->get_title( 'US', $mock_mastercard_details ) ); $this->assertTrue( $card_method->is_enabled_at_checkout( 'US' ) ); diff --git a/tests/unit/test-class-wc-payment-gateway-wcpay.php b/tests/unit/test-class-wc-payment-gateway-wcpay.php index 02fb62b9f94..d8fbd1d0f5f 100644 --- a/tests/unit/test-class-wc-payment-gateway-wcpay.php +++ b/tests/unit/test-class-wc-payment-gateway-wcpay.php @@ -625,7 +625,7 @@ public function test_payment_methods_show_correct_default_outputs() { $afterpay_method = $this->payment_methods['afterpay_clearpay']; $grabpay_method = $this->payment_methods['grabpay']; $this->assertEquals( 'card', $card_method->get_id() ); - $this->assertEquals( 'Cards', $card_method->get_title() ); + $this->assertEquals( 'Card', $card_method->get_title() ); $this->assertEquals( 'Visa debit card', $card_method->get_title( 'US', $mock_visa_details ) ); $this->assertEquals( 'Mastercard credit card', $card_method->get_title( 'US', $mock_mastercard_details ) ); $this->assertTrue( $card_method->is_enabled_at_checkout( 'US' ) ); diff --git a/tests/unit/test-class-wc-payments-checkout.php b/tests/unit/test-class-wc-payments-checkout.php index 13447a735cd..63859b5bd23 100644 --- a/tests/unit/test-class-wc-payments-checkout.php +++ b/tests/unit/test-class-wc-payments-checkout.php @@ -389,7 +389,7 @@ public function test_link_payment_method_provided_when_card_enabled() { 'card' => [ 'isReusable' => true, 'isBnpl' => false, - 'title' => 'Cards', + 'title' => 'Card', 'icon' => $icon_url, 'darkIcon' => $dark_icon_url, 'showSaveOption' => true, From c78ed6f3f094cc32350fc59623e40e5c70e3fbb5 Mon Sep 17 00:00:00 2001 From: Miguel Gasca Date: Thu, 24 Jul 2025 10:01:11 +0200 Subject: [PATCH 06/37] Fix spinner misaligned in Proceed to Checkout button (#10960) --- ...e-proceed-to-checkout-button-is-misaligned | 4 ++++ client/cart/blocks/index.js | 1 + client/cart/blocks/style.scss | 19 +++++++++++++++++++ client/checkout/woopay/style.scss | 15 +++++++++++++++ includes/class-wc-payments.php | 9 +++++++++ 5 files changed, 48 insertions(+) create mode 100644 changelog/fix-woopmnt-5198-spinner-in-the-proceed-to-checkout-button-is-misaligned create mode 100644 client/cart/blocks/style.scss diff --git a/changelog/fix-woopmnt-5198-spinner-in-the-proceed-to-checkout-button-is-misaligned b/changelog/fix-woopmnt-5198-spinner-in-the-proceed-to-checkout-button-is-misaligned new file mode 100644 index 00000000000..1ed53f20ac8 --- /dev/null +++ b/changelog/fix-woopmnt-5198-spinner-in-the-proceed-to-checkout-button-is-misaligned @@ -0,0 +1,4 @@ +Significance: patch +Type: fix + +Fix: Spinner alignment issues in cart checkout button and checkout address form email field. diff --git a/client/cart/blocks/index.js b/client/cart/blocks/index.js index d00195c1abe..ba34c4b9c27 100644 --- a/client/cart/blocks/index.js +++ b/client/cart/blocks/index.js @@ -2,6 +2,7 @@ * Internal dependencies */ import { renderBNPLCartMessaging } from './product-details'; +import './style.scss'; const { registerPlugin } = window.wp.plugins; diff --git a/client/cart/blocks/style.scss b/client/cart/blocks/style.scss new file mode 100644 index 00000000000..29dbb60399c --- /dev/null +++ b/client/cart/blocks/style.scss @@ -0,0 +1,19 @@ +/** + * Cart Blocks Styles + * + * This file contains styles specific to WooCommerce cart blocks + * and WCPay integrations within the cart context. + */ + +/** + * Fix for cart submit button spinner alignment + */ +.wc-block-cart__submit-button .wc-block-components-button__text { + position: relative; + + .wc-block-components-spinner { + /* Override the base style's top/left: initial */ + top: 0; + left: 0; + } +} diff --git a/client/checkout/woopay/style.scss b/client/checkout/woopay/style.scss index 5bb8bda54dd..d6dc0d99dae 100644 --- a/client/checkout/woopay/style.scss +++ b/client/checkout/woopay/style.scss @@ -24,6 +24,21 @@ } } +/* Fix for address form email field spinner alignment */ +.wc-block-components-address-form__email { + position: relative; + + .wc-block-components-spinner { + /* Override the base style's top/left: initial */ + top: 50%; + left: auto; + right: 10px; + width: 24px; + height: 24px; + transform: translateY( -50% ); + } +} + .woopay-login-session-iframe { width: 100%; height: 100vh; diff --git a/includes/class-wc-payments.php b/includes/class-wc-payments.php index 49d7aff5e56..07784d4fa6f 100644 --- a/includes/class-wc-payments.php +++ b/includes/class-wc-payments.php @@ -1885,6 +1885,15 @@ public static function enqueue_cart_scripts() { if ( WC_Payments_Utils::is_cart_block() ) { self::register_script_with_dependencies( 'WCPAY_CART_BLOCK', 'dist/cart-block', [ 'wc-cart-block-frontend' ] ); wp_enqueue_script( 'WCPAY_CART_BLOCK' ); + + // Enqueue cart block styles. + WC_Payments_Utils::enqueue_style( + 'WCPAY_CART_BLOCK', + plugins_url( 'dist/cart-block.css', WCPAY_PLUGIN_FILE ), + [], + self::get_file_version( 'dist/cart-block.css' ), + 'all' + ); } } From 62be20c7925c308bfe026566414f97673bbe9bee Mon Sep 17 00:00:00 2001 From: Rafael Meneses Date: Fri, 25 Jul 2025 11:13:13 -0300 Subject: [PATCH 07/37] Loans page to use the wp.components available in the WordPress installation (#10952) --- changelog/loan-page-wp-components-update | 4 ++++ client/components/active-loan-summary/index.tsx | 1 + client/index.js | 6 +++++- 3 files changed, 10 insertions(+), 1 deletion(-) create mode 100644 changelog/loan-page-wp-components-update diff --git a/changelog/loan-page-wp-components-update b/changelog/loan-page-wp-components-update new file mode 100644 index 00000000000..d27e95ae8f7 --- /dev/null +++ b/changelog/loan-page-wp-components-update @@ -0,0 +1,4 @@ +Significance: patch +Type: update + +Update loan page to use the installation WordPress components. diff --git a/client/components/active-loan-summary/index.tsx b/client/components/active-loan-summary/index.tsx index 21af69ef24d..d5dce0333be 100755 --- a/client/components/active-loan-summary/index.tsx +++ b/client/components/active-loan-summary/index.tsx @@ -168,6 +168,7 @@ const ActiveLoanSummary = (): JSX.Element => { filter: 'advanced', loan_id_is: getActiveLoanId(), } ) } + __next40pxDefaultSize > { __( 'View transactions', diff --git a/client/index.js b/client/index.js index f8b823e1ce8..e6e9b577d58 100644 --- a/client/index.js +++ b/client/index.js @@ -267,7 +267,11 @@ addFilter( capability: 'manage_woocommerce', } ); pages.push( { - container: CapitalPage, + container: () => ( + + + + ), path: '/payments/loans', wpOpenMenu: menuID, breadcrumbs: [ From c9b50845a555c87c8c865c2728138072d7fd100e Mon Sep 17 00:00:00 2001 From: Rafael Meneses Date: Fri, 25 Jul 2025 11:47:13 -0300 Subject: [PATCH 08/37] Make onboarding KYC use wp.components from the WP installation (#10959) --- ...ke-kyc-onboarding-use-wp-components-from-wp-installation | 4 ++++ client/index.js | 6 +++++- 2 files changed, 9 insertions(+), 1 deletion(-) create mode 100644 changelog/make-kyc-onboarding-use-wp-components-from-wp-installation diff --git a/changelog/make-kyc-onboarding-use-wp-components-from-wp-installation b/changelog/make-kyc-onboarding-use-wp-components-from-wp-installation new file mode 100644 index 00000000000..46f6c525593 --- /dev/null +++ b/changelog/make-kyc-onboarding-use-wp-components-from-wp-installation @@ -0,0 +1,4 @@ +Significance: patch +Type: update + +Make the KYC onboarding use the WP components available in the installation. diff --git a/client/index.js b/client/index.js index e6e9b577d58..6f5ebedf810 100644 --- a/client/index.js +++ b/client/index.js @@ -71,7 +71,11 @@ addFilter( } ); pages.push( { - container: OnboardingKycPage, + container: () => ( + + + + ), path: '/payments/onboarding/kyc', wpOpenMenu: menuID, breadcrumbs: [ From b92aa4d15a6a30e8c9c1bef08cbac8e3f3dd0aaa Mon Sep 17 00:00:00 2001 From: Rafael Meneses Date: Fri, 25 Jul 2025 11:59:42 -0300 Subject: [PATCH 09/37] Make the Onboarding use wp.components from the WP installation (#10961) --- changelog/onboading-pages-wp-components | 4 ++++ client/components/custom-select-control/index.tsx | 3 ++- client/index.js | 6 +++++- client/onboarding/form.tsx | 3 ++- 4 files changed, 13 insertions(+), 3 deletions(-) create mode 100644 changelog/onboading-pages-wp-components diff --git a/changelog/onboading-pages-wp-components b/changelog/onboading-pages-wp-components new file mode 100644 index 00000000000..ce75c648dd2 --- /dev/null +++ b/changelog/onboading-pages-wp-components @@ -0,0 +1,4 @@ +Significance: patch +Type: update + +Make onboading pages use the pw.components available in the WordPress installation. diff --git a/client/components/custom-select-control/index.tsx b/client/components/custom-select-control/index.tsx index 6bfead7d40b..0f055af6884 100644 --- a/client/components/custom-select-control/index.tsx +++ b/client/components/custom-select-control/index.tsx @@ -10,7 +10,6 @@ * External Dependencies */ import React from 'react'; -import { Button } from 'wcpay/components/wp-components-wrapped/components/button'; import { check, chevronDown, Icon } from '@wordpress/icons'; import { useCallback } from '@wordpress/element'; import clsx from 'clsx'; @@ -20,6 +19,7 @@ import { useSelect, UseSelectState } from 'downshift'; /** * Internal Dependencies */ +import { Button } from 'wcpay/components/wp-components-wrapped/components/button'; import './style.scss'; export interface Item { @@ -172,6 +172,7 @@ function CustomSelectControl< ItemType extends Item >( { ), name, } ) } + __next40pxDefaultSize > { itemString || placeholder } diff --git a/client/index.js b/client/index.js index 6f5ebedf810..24bfb1c51d4 100644 --- a/client/index.js +++ b/client/index.js @@ -57,7 +57,11 @@ addFilter( } ); pages.push( { - container: OnboardingPage, + container: () => ( + + + + ), path: '/payments/onboarding', wpOpenMenu: menuID, breadcrumbs: [ diff --git a/client/onboarding/form.tsx b/client/onboarding/form.tsx index 5ae92ccaf6f..d107a91659b 100644 --- a/client/onboarding/form.tsx +++ b/client/onboarding/form.tsx @@ -2,12 +2,12 @@ * External dependencies */ import React from 'react'; -import { Button } from 'wcpay/components/wp-components-wrapped/components/button'; import { isEmpty, mapValues } from 'lodash'; /** * Internal dependencies */ +import { Button } from 'wcpay/components/wp-components-wrapped/components/button'; import { useStepperContext } from 'components/stepper'; import { Item as SelectItem } from 'components/custom-select-control'; import { ListItem as GroupedSelectItem } from 'components/grouped-select-control'; @@ -51,6 +51,7 @@ export const OnboardingForm: React.FC< { children?: React.ReactNode } > = ( { variant={ 'primary' } type="submit" className="stepper__cta" + __next40pxDefaultSize > { strings.continue } From 6185cd4af296010946effbc0c6abd00682c11bd6 Mon Sep 17 00:00:00 2001 From: Rafael Meneses Date: Fri, 25 Jul 2025 14:33:33 -0300 Subject: [PATCH 10/37] Documents page to use the wp.components available in the WordPress installation (#10953) --- changelog/update-documents-wp-components | 4 +++ client/components/test-mode-notice/index.tsx | 7 ++-- .../test/__snapshots__/index.tsx.snap | 33 +++++++++++++++++-- client/documents/list/index.tsx | 3 +- client/index.js | 8 ++++- client/vat/form-modal/index.tsx | 2 +- client/vat/form/style.scss | 22 +++++++++++++ client/vat/form/tasks/company-data-task.tsx | 7 ++++ client/vat/form/tasks/vat-number-task.tsx | 6 ++++ 9 files changed, 82 insertions(+), 10 deletions(-) create mode 100644 changelog/update-documents-wp-components diff --git a/changelog/update-documents-wp-components b/changelog/update-documents-wp-components new file mode 100644 index 00000000000..d8d57bd851f --- /dev/null +++ b/changelog/update-documents-wp-components @@ -0,0 +1,4 @@ +Significance: patch +Type: update + +Update documents page to use WP components available in the WordPress installation. diff --git a/client/components/test-mode-notice/index.tsx b/client/components/test-mode-notice/index.tsx index 7b8ac27073d..1b1983436c8 100644 --- a/client/components/test-mode-notice/index.tsx +++ b/client/components/test-mode-notice/index.tsx @@ -10,7 +10,7 @@ import { __, _n, sprintf } from '@wordpress/i18n'; import { getPaymentSettingsUrl, isInTestMode } from 'utils'; import BannerNotice from '../banner-notice'; import interpolateComponents from '@automattic/interpolate-components'; -import { Link } from '@woocommerce/components'; +import { ExternalLink } from 'wcpay/components/wp-components-wrapped/components/external-link'; import { recordEvent } from 'wcpay/tracks'; type CurrentPage = @@ -86,13 +86,10 @@ const getNoticeContent = ( learnMoreLink: ( // Link content is in the format string above. Consider disabling jsx-a11y/anchor-has-content. // eslint-disable-next-line jsx-a11y/anchor-has-content - recordEvent( 'wcpay_overview_test_mode_learn_more_clicked' diff --git a/client/components/test-mode-notice/test/__snapshots__/index.tsx.snap b/client/components/test-mode-notice/test/__snapshots__/index.tsx.snap index 92877be2b29..dea8d93d544 100644 --- a/client/components/test-mode-notice/test/__snapshots__/index.tsx.snap +++ b/client/components/test-mode-notice/test/__snapshots__/index.tsx.snap @@ -95,6 +95,14 @@ exports[`Test mode notification Returns valid component for loans page 1`] = ` `; exports[`Test mode notification Returns valid component for overview page 1`] = ` +.emotion-2 { + width: 1em; + height: 1em; + margin: 0; + vertical-align: middle; + fill: currentColor; +} +
All transactions will be simulated. Learn more + + (opens in a new tab) + +
diff --git a/client/documents/list/index.tsx b/client/documents/list/index.tsx index d43785bc210..6c73475bf23 100644 --- a/client/documents/list/index.tsx +++ b/client/documents/list/index.tsx @@ -7,11 +7,11 @@ import React, { useCallback, useEffect, useState } from 'react'; import { __, _n, sprintf } from '@wordpress/i18n'; import { TableCard, TableCardColumn } from '@woocommerce/components'; import { onQueryChange, getQuery } from '@woocommerce/navigation'; -import { Button } from 'wcpay/components/wp-components-wrapped/components/button'; /** * Internal dependencies */ +import { Button } from 'wcpay/components/wp-components-wrapped/components/button'; import { displayType } from 'documents/strings'; import { Document, useDocuments, useDocumentsSummary } from 'data/index'; import './style.scss'; @@ -198,6 +198,7 @@ export const DocumentsList = (): JSX.Element => { document.type ) } + __next40pxDefaultSize > { __( 'Download', 'woocommerce-payments' ) } diff --git a/client/index.js b/client/index.js index 24bfb1c51d4..23b012ed240 100644 --- a/client/index.js +++ b/client/index.js @@ -293,7 +293,13 @@ addFilter( } ); if ( wcpaySettings && wcpaySettings.featureFlags.documents ) { pages.push( { - container: DocumentsPage, + container: () => ( + + + + ), path: '/payments/documents', wpOpenMenu: menuID, breadcrumbs: [ diff --git a/client/vat/form-modal/index.tsx b/client/vat/form-modal/index.tsx index ea27beb4938..c366965d57c 100644 --- a/client/vat/form-modal/index.tsx +++ b/client/vat/form-modal/index.tsx @@ -4,12 +4,12 @@ * External dependencies */ import React from 'react'; -import { Modal } from 'wcpay/components/wp-components-wrapped/components/modal'; import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ +import { Modal } from 'wcpay/components/wp-components-wrapped/components/modal'; import VatForm from '../form'; import { VatFormOnCompleted } from '../types'; diff --git a/client/vat/form/style.scss b/client/vat/form/style.scss index 5a62bfbe142..69b62d1cf70 100644 --- a/client/vat/form/style.scss +++ b/client/vat/form/style.scss @@ -2,3 +2,25 @@ margin: 0; margin-top: 15px; } + +// This matches the styling of the VatNumberTask component before __nextHasNoMarginBottom was added in a few internal components. +.wcpay-vat-number-task { + &__checkbox { + margin-bottom: 16px; + } + + &__text-control { + margin-bottom: 16px; + } +} + +// This matches the styling of the CompanyDataTask component before __nextHasNoMarginBottom was added in a few internal components. +.wcpay-company-data-task { + &__text-control { + margin-bottom: 16px; + } + + &__textarea-control { + margin-bottom: 16px; + } +} diff --git a/client/vat/form/tasks/company-data-task.tsx b/client/vat/form/tasks/company-data-task.tsx index f18be73121d..f83ba0710f8 100644 --- a/client/vat/form/tasks/company-data-task.tsx +++ b/client/vat/form/tasks/company-data-task.tsx @@ -97,15 +97,21 @@ export const CompanyDataTask = ( { > diff --git a/client/vat/form/tasks/vat-number-task.tsx b/client/vat/form/tasks/vat-number-task.tsx index 2ca5ac6582c..2c31a9993b2 100644 --- a/client/vat/form/tasks/vat-number-task.tsx +++ b/client/vat/form/tasks/vat-number-task.tsx @@ -218,6 +218,7 @@ export const VatNumberTask = ( { { isVatRegistered && ( // Note: this TextControl is heavily parameterised to support different regions (VAT vs GST vs Corporate Number). // Long term, if we implement a dedicated WizardTaskItem component for each tax region, then this component will be simpler. ) } @@ -246,6 +251,7 @@ export const VatNumberTask = ( { disabled={ isVatButtonDisabled || isLoading } isBusy={ isLoading } onClick={ submit } + __next40pxDefaultSize > { __( 'Continue', 'woocommerce-payments' ) } From f4e41016fee06304dedf27479ad83b470fde612f Mon Sep 17 00:00:00 2001 From: Francesco Date: Mon, 28 Jul 2025 09:11:28 +0200 Subject: [PATCH 11/37] fix: Google Pay/Apple Pay checkout w/ LT addresses (#10946) --- changelog/update-add-lt-address-no-state | 4 ++++ includes/constants/class-express-checkout-element-states.php | 1 + 2 files changed, 5 insertions(+) create mode 100644 changelog/update-add-lt-address-no-state diff --git a/changelog/update-add-lt-address-no-state b/changelog/update-add-lt-address-no-state new file mode 100644 index 00000000000..d75a7de52d5 --- /dev/null +++ b/changelog/update-add-lt-address-no-state @@ -0,0 +1,4 @@ +Significance: patch +Type: update + +update: ensure Google Pay/Apple Pay can check out w/ LT addresses diff --git a/includes/constants/class-express-checkout-element-states.php b/includes/constants/class-express-checkout-element-states.php index 7b1617a9c81..24c53d4229d 100644 --- a/includes/constants/class-express-checkout-element-states.php +++ b/includes/constants/class-express-checkout-element-states.php @@ -1186,6 +1186,7 @@ class Express_Checkout_Element_States { Country_Code::KENYA, Country_Code::LAOS, Country_Code::LIBERIA, + Country_Code::LITHUANIA, Country_Code::MOLDOVA, Country_Code::NAMIBIA, Country_Code::NEPAL, From c5c7019cd355597abd8344bf83e0fde3e18edf7b Mon Sep 17 00:00:00 2001 From: Francesco Date: Mon, 28 Jul 2025 17:26:59 +0200 Subject: [PATCH 12/37] chore: remove unused config dependency (#10966) --- .../chore-remove-config-and-qrcode-dependencies | 5 +++++ package-lock.json | 13 ------------- package.json | 1 - 3 files changed, 5 insertions(+), 14 deletions(-) create mode 100644 changelog/chore-remove-config-and-qrcode-dependencies diff --git a/changelog/chore-remove-config-and-qrcode-dependencies b/changelog/chore-remove-config-and-qrcode-dependencies new file mode 100644 index 00000000000..b796984797e --- /dev/null +++ b/changelog/chore-remove-config-and-qrcode-dependencies @@ -0,0 +1,5 @@ +Significance: patch +Type: dev +Comment: chore: remove 'config' dependency, since it's not used. + + diff --git a/package-lock.json b/package-lock.json index 7c58fe74929..226bd52ed48 100644 --- a/package-lock.json +++ b/package-lock.json @@ -85,7 +85,6 @@ "babel-loader": "8.2.2", "chalk": "4.1.2", "clsx": "2.1.1", - "config": "3.3.6", "core-js": "3.9.0", "crypto-browserify": "3.12.1", "css-loader": "6.3.0", @@ -20712,18 +20711,6 @@ "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==", "dev": true }, - "node_modules/config": { - "version": "3.3.6", - "resolved": "https://registry.npmjs.org/config/-/config-3.3.6.tgz", - "integrity": "sha512-Hj5916C5HFawjYJat1epbyY2PlAgLpBtDUlr0MxGLgo3p5+7kylyvnRY18PqJHgnNWXcdd0eWDemT7eYWuFgwg==", - "dev": true, - "dependencies": { - "json5": "^2.1.1" - }, - "engines": { - "node": ">= 10.0.0" - } - }, "node_modules/configstore": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/configstore/-/configstore-5.0.1.tgz", diff --git a/package.json b/package.json index f8beeb0ade2..f881b938bdb 100644 --- a/package.json +++ b/package.json @@ -151,7 +151,6 @@ "babel-loader": "8.2.2", "chalk": "4.1.2", "clsx": "2.1.1", - "config": "3.3.6", "core-js": "3.9.0", "crypto-browserify": "3.12.1", "css-loader": "6.3.0", From 05672329c0f780c80deae4bf0ac60c18d4261b48 Mon Sep 17 00:00:00 2001 From: Ahmed Date: Tue, 29 Jul 2025 11:11:35 +0200 Subject: [PATCH 13/37] Update "WC tested up to" header to include WooCommerce 10.1.0 (#10965) --- changelog/dev-update-tested-up-to | 4 ++++ woocommerce-payments.php | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) create mode 100644 changelog/dev-update-tested-up-to diff --git a/changelog/dev-update-tested-up-to b/changelog/dev-update-tested-up-to new file mode 100644 index 00000000000..d13ec25b01d --- /dev/null +++ b/changelog/dev-update-tested-up-to @@ -0,0 +1,4 @@ +Significance: minor +Type: dev + +Update tested WooCommerce version to 10.1.0 diff --git a/woocommerce-payments.php b/woocommerce-payments.php index 423a14f94da..934b3d9cc14 100644 --- a/woocommerce-payments.php +++ b/woocommerce-payments.php @@ -8,7 +8,7 @@ * Text Domain: woocommerce-payments * Domain Path: /languages * WC requires at least: 7.6 - * WC tested up to: 10.0.0 + * WC tested up to: 10.1.0 * Requires at least: 6.0 * Requires PHP: 7.3 * Version: 9.7.0 From 45a94a3a4bf92edd335e7a345585771a3eeac0bb Mon Sep 17 00:00:00 2001 From: Seghir Nadir Date: Tue, 29 Jul 2025 15:32:31 +0200 Subject: [PATCH 14/37] Add Automattic address autocomplete service to Checkout (#10928) Co-authored-by: Marcin Bot Co-authored-by: Rafael Meneses --- changelog/add-address-autocomplete-service | 4 + .../class-wc-payments-address-provider.php | 77 +++++++++++++++++++ includes/class-wc-payments.php | 26 +++++++ .../class-wc-payments-api-client.php | 15 ++++ 4 files changed, 122 insertions(+) create mode 100644 changelog/add-address-autocomplete-service create mode 100644 includes/class-wc-payments-address-provider.php diff --git a/changelog/add-address-autocomplete-service b/changelog/add-address-autocomplete-service new file mode 100644 index 00000000000..7a6a74ec049 --- /dev/null +++ b/changelog/add-address-autocomplete-service @@ -0,0 +1,4 @@ +Significance: minor +Type: add + +Add address autocomplete to Checkout diff --git a/includes/class-wc-payments-address-provider.php b/includes/class-wc-payments-address-provider.php new file mode 100644 index 00000000000..2add8f0da27 --- /dev/null +++ b/includes/class-wc-payments-address-provider.php @@ -0,0 +1,77 @@ +id = 'woocommerce_payments'; + $this->name = __( 'WooCommerce Payments', 'woocommerce-payments' ); + $this->payments_api_client = $payments_api_client; + parent::__construct(); + } + + + /** + * Get address service JWT token from the WCPay server. + * + * This method calls the address-autocomplete-token endpoint to retrieve + * a JWT token for address autocomplete services. + * + * Caching and retries and backoff logic is handled by the parent class, if you must override that without fixing it upstream, you should also override `load_jwt`. + * + * @return string|WP_Error The JWT token on success, WP_Error on failure. + */ + public function get_address_service_jwt() { + try { + $response = $this->payments_api_client->get_address_autocomplete_token(); + return $response['token']; + } catch ( \Exception $e ) { + Logger::error( 'Unexpected error getting address service JWT: ' . $e->getMessage() ); + return new WP_Error( + 'wcpay_address_service_error', + 'An unexpected error occurred while retrieving the address service token.' + ); + } + } + + /** + * Whether the address provider can send frontend telemetry data. + * + * @return bool True if telemetry is allowed, false otherwise. + */ + public function can_telemetry() { + // We defer to the global Woo setting. + return WC_Site_Tracking::is_tracking_enabled(); + } +} diff --git a/includes/class-wc-payments.php b/includes/class-wc-payments.php index 07784d4fa6f..4065fbcc70c 100644 --- a/includes/class-wc-payments.php +++ b/includes/class-wc-payments.php @@ -681,6 +681,7 @@ function () { add_filter( 'default_option_woocommerce_gateway_order', [ __CLASS__, 'order_woopayments_gateways' ], 3 ); add_filter( 'woocommerce_admin_get_user_data_fields', [ __CLASS__, 'add_user_data_fields' ] ); + add_filter( 'woocommerce_address_providers', [ __CLASS__, 'add_address_provider' ] ); // Add note query support for source. add_filter( 'woocommerce_rest_notes_object_query', [ __CLASS__, 'possibly_add_source_to_notes_query' ], 10, 2 ); add_filter( 'woocommerce_note_where_clauses', [ __CLASS__, 'possibly_add_note_source_where_clause' ], 10, 2 ); @@ -872,6 +873,31 @@ public static function register_gateway( $gateways ) { return $gateways; } + /** + * Add the WooCommerce Payments address autocomplete provider, but only if a WCPay gateway is enabled. + * + * @psalm-suppress MissingDependency + * + * @param array $providers The address providers. + * @return array The address providers. + */ + public static function add_address_provider( $providers ) { + // Only enable address provider integration if a WCPay gateway is enabled. + if ( ! self::get_gateway()->is_enabled() ) { + return $providers; + } + + if ( ! class_exists( 'Automattic\WooCommerce\Internal\AddressProvider\AbstractAutomatticAddressProvider' ) ) { + return $providers; + } + + include_once __DIR__ . '/class-wc-payments-address-provider.php'; + + $providers[] = new WC_Payments_Address_Provider( self::$api_client ); + + return $providers; + } + /** * Called on Payments setting page. * diff --git a/includes/wc-payment-api/class-wc-payments-api-client.php b/includes/wc-payment-api/class-wc-payments-api-client.php index 9d1233bd0e9..ae2d72ec4c3 100644 --- a/includes/wc-payment-api/class-wc-payments-api-client.php +++ b/includes/wc-payment-api/class-wc-payments-api-client.php @@ -83,6 +83,7 @@ class WC_Payments_API_Client implements MultiCurrencyApiClientInterface { const FRAUD_RULESET_API = 'fraud_ruleset'; const COMPATIBILITY_API = 'compatibility'; const RECOMMENDED_PAYMENT_METHODS = 'payment_methods/recommended'; + const ADDRESS_AUTOCOMPLETE_TOKEN = 'address-autocomplete-token'; /** * Common keys in API requests/responses that we might want to redact. @@ -2161,6 +2162,20 @@ public function get_tracking_info() { ); } + /** + * Get the address autocomplete token. + * + * @return array The address autocomplete token. + * + * @throws API_Exception - If not connected or request failed. + */ + public function get_address_autocomplete_token() { + return $this->request( + [], + self::ADDRESS_AUTOCOMPLETE_TOKEN, + self::POST, + ); + } /** * Sends a request object. * From 191fb259c59b1de1387aa64481a88c2a0cb2e978 Mon Sep 17 00:00:00 2001 From: Rafael Meneses Date: Tue, 29 Jul 2025 11:13:08 -0300 Subject: [PATCH 15/37] Make the connect account components to use wp.components from the WP installation (#10964) --- ...ccount-use-wp-components-from-installation | 4 ++ client/components/banner-notice/index.tsx | 1 - client/connect-account-page/index.tsx | 3 + .../info-notice-modal.tsx | 13 ++-- client/connect-account-page/modal/index.js | 23 +++---- .../modal/test/__snapshots__/index.js.snap | 66 +++++++++++++++++-- client/index.js | 6 +- 7 files changed, 92 insertions(+), 24 deletions(-) create mode 100644 changelog/make-connect-account-use-wp-components-from-installation diff --git a/changelog/make-connect-account-use-wp-components-from-installation b/changelog/make-connect-account-use-wp-components-from-installation new file mode 100644 index 00000000000..99017c457d9 --- /dev/null +++ b/changelog/make-connect-account-use-wp-components-from-installation @@ -0,0 +1,4 @@ +Significance: patch +Type: update + +Make the connect acctount components use the wp.components from the installation. diff --git a/client/components/banner-notice/index.tsx b/client/components/banner-notice/index.tsx index 1547aec8b73..3c82fccc11b 100644 --- a/client/components/banner-notice/index.tsx +++ b/client/components/banner-notice/index.tsx @@ -7,7 +7,6 @@ * External dependencies */ import React, { ComponentProps } from 'react'; - import { __ } from '@wordpress/i18n'; import { useEffect, renderToString } from '@wordpress/element'; import { speak } from '@wordpress/a11y'; diff --git a/client/connect-account-page/index.tsx b/client/connect-account-page/index.tsx index c1dfbd3469a..5421c439d38 100644 --- a/client/connect-account-page/index.tsx +++ b/client/connect-account-page/index.tsx @@ -577,6 +577,7 @@ const ConnectAccountPage: React.FC = () => { isSubmitted || isAccountSetupSessionError } onClick={ handleSetup } + __next40pxDefaultSize > { ctaLabel } @@ -591,6 +592,7 @@ const ConnectAccountPage: React.FC = () => { onClick={ () => setModalVisible( true ) } + __next40pxDefaultSize > { strings.button.reset } @@ -624,6 +626,7 @@ const ConnectAccountPage: React.FC = () => { isBusy={ isTestDriveModeSubmitted } disabled={ isTestDriveModeSubmitted } onClick={ handleSetupTestDriveMode } + __next40pxDefaultSize > { strings.button.sandbox } diff --git a/client/connect-account-page/info-notice-modal.tsx b/client/connect-account-page/info-notice-modal.tsx index e855fce2ee4..4679c9cf573 100644 --- a/client/connect-account-page/info-notice-modal.tsx +++ b/client/connect-account-page/info-notice-modal.tsx @@ -4,14 +4,14 @@ * External dependencies */ import React, { useState } from 'react'; -import { Button } from 'wcpay/components/wp-components-wrapped/components/button'; -import { Modal } from 'wcpay/components/wp-components-wrapped/components/modal'; -import { Notice } from 'wcpay/components/wp-components-wrapped/components/notice'; import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ +import { Button } from 'wcpay/components/wp-components-wrapped/components/button'; +import { Modal } from 'wcpay/components/wp-components-wrapped/components/modal'; +import { Notice } from 'wcpay/components/wp-components-wrapped/components/notice'; import { recordEvent } from 'tracks'; import TipBox from 'components/tip-box'; import strings from './strings'; @@ -42,6 +42,7 @@ const InfoNoticeModal: React.FC = () => { ); setModalOpen( true ); } } + __next40pxDefaultSize > { strings.infoNotice.button } @@ -94,7 +95,11 @@ const InfoNoticeModal: React.FC = () => {
-
diff --git a/client/connect-account-page/modal/index.js b/client/connect-account-page/modal/index.js index 270bbcac265..fee058958d1 100644 --- a/client/connect-account-page/modal/index.js +++ b/client/connect-account-page/modal/index.js @@ -8,21 +8,12 @@ import interpolateComponents from '@automattic/interpolate-components'; */ import { Button } from 'wcpay/components/wp-components-wrapped/components/button'; import { Modal } from 'wcpay/components/wp-components-wrapped/components/modal'; +import { ExternalLink } from 'wcpay/components/wp-components-wrapped/components/external-link'; import { __, sprintf } from '@wordpress/i18n'; -import { Link, List } from '@woocommerce/components'; +import { List } from '@woocommerce/components'; import { useState } from '@wordpress/element'; import './style.scss'; -const LearnMoreLink = ( props ) => ( - -); - const OnboardingLocationCheckModal = ( { countries, onDeclined, @@ -60,7 +51,9 @@ const OnboardingLocationCheckModal = ( { 'WooPayments' ), components: { - link: , + link: ( + + ), list: , }, } ); @@ -80,17 +73,19 @@ const OnboardingLocationCheckModal = ( {
diff --git a/client/connect-account-page/modal/test/__snapshots__/index.js.snap b/client/connect-account-page/modal/test/__snapshots__/index.js.snap index 4610ba434e9..b7680e3cfe2 100644 --- a/client/connect-account-page/modal/test/__snapshots__/index.js.snap +++ b/client/connect-account-page/modal/test/__snapshots__/index.js.snap @@ -3,6 +3,14 @@ exports[`Onboarding: location check dialog renders correctly when cancel button is clicked 1`] = `null`; exports[`Onboarding: location check dialog renders correctly when continue button is clicked 1`] = ` +.emotion-2 { + width: 1em; + height: 1em; + margin: 0; + vertical-align: middle; + fill: currentColor; +} +
Learn more + + (opens in a new tab) + + about setting up business entities in foreign countries.
@@ -125,6 +154,14 @@ exports[`Onboarding: location check dialog renders correctly when continue butto `; exports[`Onboarding: location check dialog renders correctly when opened 1`] = ` +.emotion-2 { + width: 1em; + height: 1em; + margin: 0; + vertical-align: middle; + fill: currentColor; +} +
Learn more + + (opens in a new tab) + + about setting up business entities in foreign countries.
diff --git a/client/index.js b/client/index.js index 23b012ed240..042910856d6 100644 --- a/client/index.js +++ b/client/index.js @@ -46,7 +46,11 @@ addFilter( : __( 'Connect', 'woocommerce-payments' ); pages.push( { - container: ConnectAccountPage, + container: () => ( + + + + ), path: '/payments/connect', wpOpenMenu: menuID, breadcrumbs: [ rootLink, connectionPageTitle ], From 96ccddd651eff2e16eba80fe4b33979798f58433 Mon Sep 17 00:00:00 2001 From: Francesco Date: Tue, 29 Jul 2025 16:30:29 +0200 Subject: [PATCH 16/37] feat: jetpack beta action for develop (#10975) --- .github/workflows/build-live-branch.yml | 119 ++++++++++++++++++++++++ changelog/feat-jp-beta-action | 5 + 2 files changed, 124 insertions(+) create mode 100644 .github/workflows/build-live-branch.yml create mode 100644 changelog/feat-jp-beta-action diff --git a/.github/workflows/build-live-branch.yml b/.github/workflows/build-live-branch.yml new file mode 100644 index 00000000000..81393af1c3e --- /dev/null +++ b/.github/workflows/build-live-branch.yml @@ -0,0 +1,119 @@ +name: Build live branch when develop updated +on: + workflow_dispatch: + push: + branches: + - develop + paths-ignore: + - '.cursor/**' + - '.github/**' + - '!.github/workflows/build-live-branch.yml' + - '.husky/**' + - '.bin/**' + - 'docker/**' + - 'docs/**' + - 'tasks/**' + - 'tests/**' + - '**/tests/**' + - 'wordpress-org-assets/**' + - '**/changelog/**' + - '**/changelog.txt' + - '**/readme.txt' + - '.gitignore' + - 'CODEOWNERS' + - '**/*.md' + +concurrency: + group: ${{ github.workflow }}-${{ github.ref }} + cancel-in-progress: true + +permissions: {} + +jobs: + build: + if: github.repository_owner == 'automattic' && github.actor != 'github-actions[bot]' + runs-on: ubuntu-latest + permissions: + contents: read + steps: + - name: "Checkout repository" + uses: actions/checkout@v4 + + - name: "Set up repository" + uses: ./.github/actions/setup-repo + + - name: "Get current version" + id: current-version + run: | + VERSION=$(jq '.version' package.json -r) + echo "Current version found: $VERSION" >> $GITHUB_STEP_SUMMARY + echo "VERSION=$VERSION" >> $GITHUB_OUTPUT + + - name: "Get dev version" + id: get-dev-version + env: + CURRENT_VERSION: ${{ steps.current-version.outputs.VERSION }} + run: | + DEV_SUFFIX_VERSION="${GITHUB_RUN_ID}-g$(git rev-parse --short HEAD)" + DEV_VERSION="${CURRENT_VERSION}-${DEV_SUFFIX_VERSION}" + echo "Dev Version: $DEV_VERSION" >> $GITHUB_STEP_SUMMARY + echo "DEV_VERSION=$DEV_VERSION" >> $GITHUB_OUTPUT + + - name: "Bump dev version" + id: bump-dev-version + env: + DEV_VERSION: ${{ steps.get-dev-version.outputs.DEV_VERSION }} + run: | + # 'Version' header in woocommerce-payments.php + sed -i "s/^ \* Version: .*$/ * Version: $DEV_VERSION/" woocommerce-payments.php + + # 'version' field in package.json + sed -ri 's/("version": )".*"/\1"'${DEV_VERSION}'"/' package.json + + # 'Stable tag' header in readme.txt; + sed -i "s/^Stable tag: .*$/Stable tag: $DEV_VERSION/" readme.txt + + - name: "Build the plugin" + id: build_plugin + uses: ./.github/actions/build + + - name: "Update the structure of artifacts for Jetpack Beta Builder" + run: | + cd release + mv woocommerce-payments woocommerce-payments-dev + zip -q -r "woocommerce-payments-dev.zip" "woocommerce-payments-dev/" + rm -fR "woocommerce-payments-dev" + + - name: "Get plugin data for Jetpack Beta Builder" + id: get-plugin-data + env: + DEV_VERSION: ${{ steps.get-dev-version.outputs.DEV_VERSION }} + run: | + # Plugin data is passed as a JSON object. + PLUGIN_DATA="{}" + PLUGIN_DATA=$( jq -c --arg slug "woocommerce-payments" --arg ver "$DEV_VERSION" '.[ $slug ] = { version: $ver }' <<<"$PLUGIN_DATA" ) + echo "plugin-data=$PLUGIN_DATA" >> $GITHUB_OUTPUT + + - name: "Upload the zip file as an artifact" + uses: actions/upload-artifact@v4 + if: steps.get-plugin-data.outputs.plugin-data != '{}' + env: + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + with: + name: plugins + path: release + # Only need to retain for a day since the beta builder slurps it up to distribute. + retention-days: 1 + + - name: "Inform Jetpack Beta Builder webhook" + if: steps.get-plugin-data.outputs.plugin-data != '{}' + env: + SECRET: ${{ secrets.WCPAYBETA_SECRET }} + PLUGIN_DATA: ${{ steps.get-plugin-data.outputs.plugin-data }} + run: | + curl -v --fail -L \ + --url "https://betadownload.jetpack.me/gh-action.php?run_id=$GITHUB_RUN_ID&commit=$GITHUB_SHA" \ + --form-string "repo=$GITHUB_REPOSITORY" \ + --form-string "branch=${GITHUB_REF#refs/heads/}" \ + --form-string "plugins=$PLUGIN_DATA" \ + --form-string "secret=$SECRET" diff --git a/changelog/feat-jp-beta-action b/changelog/feat-jp-beta-action new file mode 100644 index 00000000000..327cf80bf03 --- /dev/null +++ b/changelog/feat-jp-beta-action @@ -0,0 +1,5 @@ +Significance: patch +Type: add +Comment: feat: jetpack beta action for develop + + From 01ffba9c0c5101792a02313b6feffbaa2b6a2885 Mon Sep 17 00:00:00 2001 From: Vlad Olaru Date: Wed, 30 Jul 2025 16:05:04 +0300 Subject: [PATCH 17/37] Reset UPE enabled payment methods to default on account reset (#10972) --- .../fix-WOOPMNT-5219-reset-upe-enabled-pms-on-account-reset | 4 ++++ includes/class-wc-payments-onboarding-service.php | 1 + 2 files changed, 5 insertions(+) create mode 100644 changelog/fix-WOOPMNT-5219-reset-upe-enabled-pms-on-account-reset diff --git a/changelog/fix-WOOPMNT-5219-reset-upe-enabled-pms-on-account-reset b/changelog/fix-WOOPMNT-5219-reset-upe-enabled-pms-on-account-reset new file mode 100644 index 00000000000..79b8d4c8326 --- /dev/null +++ b/changelog/fix-WOOPMNT-5219-reset-upe-enabled-pms-on-account-reset @@ -0,0 +1,4 @@ +Significance: patch +Type: fix + +Reset the enabled payment methods to default value on account reset. diff --git a/includes/class-wc-payments-onboarding-service.php b/includes/class-wc-payments-onboarding-service.php index 33c81b9e642..1cf456ac382 100644 --- a/includes/class-wc-payments-onboarding-service.php +++ b/includes/class-wc-payments-onboarding-service.php @@ -884,6 +884,7 @@ public function cleanup_on_account_reset() { $gateway = WC_Payments::get_gateway(); $gateway->update_option( 'enabled', 'no' ); $gateway->update_option( 'test_mode', 'no' ); + $gateway->update_option( 'upe_enabled_payment_method_ids', [ 'card' ] ); update_option( '_wcpay_onboarding_stripe_connected', [] ); update_option( self::TEST_MODE_OPTION, 'no' ); From 50699efe46f0505a6f8a5a700c1275e7533c4d46 Mon Sep 17 00:00:00 2001 From: Francesco Date: Wed, 30 Jul 2025 15:35:33 +0200 Subject: [PATCH 18/37] update: fraud protection rules with unbundled wp components (#10940) Co-authored-by: Rafael Meneses --- ...pdate-fraud-protection-rules-wp-components | 4 + client/components/amount-input/index.tsx | 36 +- client/components/amount-input/style.scss | 44 +- .../test/__snapshots__/index.test.tsx.snap | 79 +- client/globals.d.ts | 2 +- client/index.js | 8 +- .../allow-countries-notice.test.js.snap} | 20 +- .../__snapshots__/index.test.js.snap} | 3938 ++++++++++------- .../rule-card-notice.test.js.snap} | 12 +- .../__snapshots__/rule-card.test.js.snap} | 20 +- .../rule-description.test.js.snap} | 0 .../__snapshots__/rule-toggle.test.js.snap} | 154 +- .../allow-countries-notice.test.js} | 32 +- .../index.test.js} | 63 +- .../rule-card-notice.test.js} | 5 +- .../rule-card.test.js} | 0 .../rule-description.test.js} | 0 .../rule-toggle.test.js} | 50 +- .../utils.test.ts => __tests__/utils.test.js} | 124 +- .../allow-countries-notice.tsx | 2 +- .../address-mismatch.test.js.snap} | 158 +- .../__snapshots__/avs-mismatch.test.js.snap} | 78 +- .../cvc-verification.test.js.snap} | 66 +- .../international-ip-address.test.js.snap} | 569 ++- .../ip-address-mismatch.test.js.snap} | 334 +- .../order-items-threshold.test.js.snap} | 546 +-- .../purchase-price-threshold.test.js.snap} | 550 ++- .../address-mismatch.test.js} | 14 +- .../avs-mismatch.test.js} | 19 +- .../cvc-verification.test.js} | 21 +- .../international-ip-address.test.js} | 31 +- .../ip-address-mismatch.test.js} | 26 +- .../order-items-threshold.test.js} | 27 +- .../purchase-price-threshold.test.js} | 42 +- .../cards/address-mismatch.tsx | 3 +- .../cards/cvc-verification.tsx | 8 +- .../cards/international-ip-address.tsx | 18 +- .../cards/ip-address-mismatch.tsx | 13 +- .../cards/order-items-threshold.tsx | 35 +- .../cards/purchase-price-threshold.tsx | 35 +- .../advanced-settings/index.tsx | 121 +- .../advanced-settings/rule-card-notice.tsx | 7 +- .../advanced-settings/rule-card.scss | 3 + .../advanced-settings/rule-card.tsx | 8 +- .../advanced-settings/rule-description.scss | 5 + .../advanced-settings/rule-description.tsx | 2 +- .../advanced-settings/rule-toggle.scss | 21 + .../advanced-settings/rule-toggle.tsx | 37 +- .../advanced-settings/style.scss | 69 + .../advanced-settings/utils.ts | 4 +- .../components/fp-modal/index.tsx | 93 - .../fraud-protection/components/index.ts | 14 - client/settings/fraud-protection/index.tsx | 3 +- .../protection-levels.test.js.snap} | 0 .../__tests__/protection-levels.test.js} | 11 +- .../__snapshots__/index.test.js.snap} | 0 .../fp-help-text/__tests__/index.test.js} | 2 +- .../fp-help-text/index.tsx | 2 +- .../protection-levels/fp-modal/index.tsx | 90 + .../protection-levels/fp-modal/styles.scss | 53 + .../protection-levels/index.tsx | 26 +- .../__snapshots__/index.test.js.snap} | 0 .../__tests__/index.test.js} | 2 +- .../protection-level-modal-notice/index.tsx | 0 .../protection-levels/styles.scss | 85 + client/settings/fraud-protection/style.scss | 339 -- .../index.test.js} | 12 +- includes/admin/class-wc-payments-admin.php | 1 - includes/class-wc-payments-features.php | 1 + 69 files changed, 4620 insertions(+), 3577 deletions(-) create mode 100644 changelog/update-fraud-protection-rules-wp-components rename client/settings/fraud-protection/advanced-settings/{test/__snapshots__/allow-countries-notice.test.tsx.snap => __tests__/__snapshots__/allow-countries-notice.test.js.snap} (95%) rename client/settings/fraud-protection/advanced-settings/{test/__snapshots__/index.test.tsx.snap => __tests__/__snapshots__/index.test.js.snap} (70%) rename client/settings/fraud-protection/advanced-settings/{test/__snapshots__/rule-card-notice.test.tsx.snap => __tests__/__snapshots__/rule-card-notice.test.js.snap} (95%) rename client/settings/fraud-protection/advanced-settings/{test/__snapshots__/rule-card.test.tsx.snap => __tests__/__snapshots__/rule-card.test.js.snap} (95%) rename client/settings/fraud-protection/advanced-settings/{test/__snapshots__/rule-description.test.tsx.snap => __tests__/__snapshots__/rule-description.test.js.snap} (100%) rename client/settings/fraud-protection/advanced-settings/{test/__snapshots__/rule-toggle.test.tsx.snap => __tests__/__snapshots__/rule-toggle.test.js.snap} (86%) rename client/settings/fraud-protection/advanced-settings/{test/allow-countries-notice.test.tsx => __tests__/allow-countries-notice.test.js} (88%) rename client/settings/fraud-protection/advanced-settings/{test/index.test.tsx => __tests__/index.test.js} (92%) rename client/settings/fraud-protection/advanced-settings/{test/rule-card-notice.test.tsx => __tests__/rule-card-notice.test.js} (95%) rename client/settings/fraud-protection/advanced-settings/{test/rule-card.test.tsx => __tests__/rule-card.test.js} (100%) rename client/settings/fraud-protection/advanced-settings/{test/rule-description.test.tsx => __tests__/rule-description.test.js} (100%) rename client/settings/fraud-protection/advanced-settings/{test/rule-toggle.test.tsx => __tests__/rule-toggle.test.js} (80%) rename client/settings/fraud-protection/advanced-settings/{test/utils.test.ts => __tests__/utils.test.js} (88%) rename client/settings/fraud-protection/advanced-settings/cards/{test/__snapshots__/address-mismatch.test.tsx.snap => __tests__/__snapshots__/address-mismatch.test.js.snap} (82%) rename client/settings/fraud-protection/advanced-settings/cards/{test/__snapshots__/avs-mismatch.test.tsx.snap => __tests__/__snapshots__/avs-mismatch.test.js.snap} (81%) rename client/settings/fraud-protection/advanced-settings/cards/{test/__snapshots__/cvc-verification.test.tsx.snap => __tests__/__snapshots__/cvc-verification.test.js.snap} (84%) rename client/settings/fraud-protection/advanced-settings/cards/{test/__snapshots__/international-ip-address.test.tsx.snap => __tests__/__snapshots__/international-ip-address.test.js.snap} (70%) rename client/settings/fraud-protection/advanced-settings/cards/{test/__snapshots__/ip-address-mismatch.test.tsx.snap => __tests__/__snapshots__/ip-address-mismatch.test.js.snap} (61%) rename client/settings/fraud-protection/advanced-settings/cards/{test/__snapshots__/order-items-threshold.test.tsx.snap => __tests__/__snapshots__/order-items-threshold.test.js.snap} (60%) rename client/settings/fraud-protection/advanced-settings/cards/{test/__snapshots__/purchase-price-threshold.test.tsx.snap => __tests__/__snapshots__/purchase-price-threshold.test.js.snap} (58%) rename client/settings/fraud-protection/advanced-settings/cards/{test/address-mismatch.test.tsx => __tests__/address-mismatch.test.js} (94%) rename client/settings/fraud-protection/advanced-settings/cards/{test/avs-mismatch.test.tsx => __tests__/avs-mismatch.test.js} (88%) rename client/settings/fraud-protection/advanced-settings/cards/{test/cvc-verification.test.tsx => __tests__/cvc-verification.test.js} (87%) rename client/settings/fraud-protection/advanced-settings/cards/{test/international-ip-address.test.tsx => __tests__/international-ip-address.test.js} (91%) rename client/settings/fraud-protection/advanced-settings/cards/{test/ip-address-mismatch.test.tsx => __tests__/ip-address-mismatch.test.js} (86%) rename client/settings/fraud-protection/advanced-settings/cards/{test/order-items-threshold.test.tsx => __tests__/order-items-threshold.test.js} (96%) rename client/settings/fraud-protection/advanced-settings/cards/{test/purchase-price-threshold.test.tsx => __tests__/purchase-price-threshold.test.js} (94%) create mode 100644 client/settings/fraud-protection/advanced-settings/rule-card.scss create mode 100644 client/settings/fraud-protection/advanced-settings/rule-description.scss create mode 100644 client/settings/fraud-protection/advanced-settings/rule-toggle.scss create mode 100644 client/settings/fraud-protection/advanced-settings/style.scss delete mode 100644 client/settings/fraud-protection/components/fp-modal/index.tsx delete mode 100644 client/settings/fraud-protection/components/index.ts rename client/settings/fraud-protection/{components/protection-levels/test/__snapshots__/index.test.tsx.snap => protection-levels/__tests__/__snapshots__/protection-levels.test.js.snap} (100%) rename client/settings/fraud-protection/{components/protection-levels/test/index.test.tsx => protection-levels/__tests__/protection-levels.test.js} (84%) rename client/settings/fraud-protection/{components/fp-help-text/test/__snapshots__/index.test.tsx.snap => protection-levels/fp-help-text/__tests__/__snapshots__/index.test.js.snap} (100%) rename client/settings/fraud-protection/{components/fp-help-text/test/index.test.tsx => protection-levels/fp-help-text/__tests__/index.test.js} (93%) rename client/settings/fraud-protection/{components => protection-levels}/fp-help-text/index.tsx (95%) create mode 100644 client/settings/fraud-protection/protection-levels/fp-modal/index.tsx create mode 100644 client/settings/fraud-protection/protection-levels/fp-modal/styles.scss rename client/settings/fraud-protection/{components => }/protection-levels/index.tsx (92%) rename client/settings/fraud-protection/{components/protection-level-modal-notice/test/__snapshots__/index.test.tsx.snap => protection-levels/protection-level-modal-notice/__tests__/__snapshots__/index.test.js.snap} (100%) rename client/settings/fraud-protection/{components/protection-level-modal-notice/test/index.test.tsx => protection-levels/protection-level-modal-notice/__tests__/index.test.js} (92%) rename client/settings/fraud-protection/{components => protection-levels}/protection-level-modal-notice/index.tsx (100%) create mode 100644 client/settings/fraud-protection/protection-levels/styles.scss delete mode 100644 client/settings/fraud-protection/style.scss rename client/settings/fraud-protection/tour/{index.test.tsx => __tests__/index.test.js} (92%) diff --git a/changelog/update-fraud-protection-rules-wp-components b/changelog/update-fraud-protection-rules-wp-components new file mode 100644 index 00000000000..c115064fc80 --- /dev/null +++ b/changelog/update-fraud-protection-rules-wp-components @@ -0,0 +1,4 @@ +Significance: patch +Type: update + +update: fraud protection rules to use WP components bundled within the WP installation diff --git a/client/components/amount-input/index.tsx b/client/components/amount-input/index.tsx index 251db1726f8..1780d90d33f 100644 --- a/client/components/amount-input/index.tsx +++ b/client/components/amount-input/index.tsx @@ -2,10 +2,13 @@ * External dependencies */ import React, { useCallback, useEffect } from 'react'; +// @ts-expect-error The component exists. +import { TextControlWithAffixes } from '@woocommerce/components'; import './style.scss'; interface AmountInputProps { id?: string; + label?: string; prefix?: string; value: string; placeholder?: string; @@ -16,6 +19,7 @@ interface AmountInputProps { const AmountInput: React.FC< AmountInputProps > = ( { id, prefix, + label, value, placeholder, help, @@ -39,9 +43,6 @@ const AmountInput: React.FC< AmountInputProps > = ( { } }, [ validateInput, internalValue, onChange ] ); - if ( isNaN( Number( value ) ) || null === value || '0' === value ) - value = ''; - const handleChange = ( inputValue: string ) => { if ( validateInput( inputValue ) ) { setInternalValue( inputValue ); @@ -50,24 +51,17 @@ const AmountInput: React.FC< AmountInputProps > = ( { }; return ( -
-
- { prefix && ( - - { prefix } - - ) } - handleChange( e.target.value ) } - className="components-text-control__input components-amount-input__input" - /> -
- { help } -
+ ); }; diff --git a/client/components/amount-input/style.scss b/client/components/amount-input/style.scss index d7e06f0deea..5cddd95d169 100644 --- a/client/components/amount-input/style.scss +++ b/client/components/amount-input/style.scss @@ -1,38 +1,16 @@ -.components-amount-input { - &__input_container { - display: flex; - position: relative; - align-items: center; +.wcpay-components-amount-input { + .components-base-control__field { + margin-bottom: 0; } - &__prefix { - position: absolute; - padding: 0 12px; - font-size: 13px; - line-height: 16px; - font-weight: 400; - color: #757575; + + p { + margin-bottom: 0; } - &__input.components-text-control__input { - text-align: end; - padding: 4px 12px 4px 32px; - color: #1e1e1e; - display: block; - flex: 1; - font-size: 13px; + + .text-control-with-affixes__prefix { line-height: 16px; - font-weight: 400; - border: 1px solid #757575; - border-radius: 2px; - ::placeholder { - color: #949494; - } - } - &__help_text { - display: block; - font-weight: 400; - font-size: 12px; - line-height: 16px; - margin-top: 8px; - color: #757575; + display: flex; + align-items: center; + padding: 7px 12px; } } diff --git a/client/components/amount-input/test/__snapshots__/index.test.tsx.snap b/client/components/amount-input/test/__snapshots__/index.test.tsx.snap index 09fd09cbdf5..3287bd2e136 100644 --- a/client/components/amount-input/test/__snapshots__/index.test.tsx.snap +++ b/client/components/amount-input/test/__snapshots__/index.test.tsx.snap @@ -1,31 +1,70 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Amount input renders correctly 1`] = ` +.emotion-0 { + font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif; + font-size: 13px; + box-sizing: border-box; +} + +.emotion-0 *, +.emotion-0 *::before, +.emotion-0 *::after { + box-sizing: inherit; +} + +.emotion-2 { + margin-bottom: calc(4px * 2); +} + +.components-panel__row .emotion-2 { + margin-bottom: inherit; +} + +.emotion-4 { + margin-top: calc(4px * 2); + margin-bottom: 0; + font-size: 12px; + font-style: normal; + color: #757575; + margin-bottom: revert; +} +
-
+
- +
+ + test_prefix + + +
+
+

- test_prefix - - + this is a helptext +

- - this is a helptext -
`; diff --git a/client/globals.d.ts b/client/globals.d.ts index ec2954a3bfd..f6c2bf02beb 100644 --- a/client/globals.d.ts +++ b/client/globals.d.ts @@ -32,6 +32,7 @@ declare global { paymentTimeline: boolean; isDisputeIssuerEvidenceEnabled: boolean; multiCurrency?: boolean; + isFRTReviewFeatureActive: boolean; }; accountFees: Record< string, any >; fraudServices: unknown[]; @@ -123,7 +124,6 @@ declare global { }; dismissedDuplicateNotices: PaymentMethodToPluginsMap; accountDefaultCurrency: string; - isFRTReviewFeatureActive: boolean; onboardingFieldsData?: { business_types: Country[]; mccs_display_tree: MccsDisplayTreeItem[]; diff --git a/client/index.js b/client/index.js index 042910856d6..e0b9cb9bb6b 100644 --- a/client/index.js +++ b/client/index.js @@ -318,7 +318,13 @@ addFilter( } if ( wcpaySettings ) { pages.push( { - container: FraudProtectionAdvancedSettingsPage, + container: () => ( + + + + ), path: '/payments/fraud-protection', wpOpenMenu: menuID, breadcrumbs: [ rootLink, 'Settings' ], // to align with the WooPayments settings pages. diff --git a/client/settings/fraud-protection/advanced-settings/test/__snapshots__/allow-countries-notice.test.tsx.snap b/client/settings/fraud-protection/advanced-settings/__tests__/__snapshots__/allow-countries-notice.test.js.snap similarity index 95% rename from client/settings/fraud-protection/advanced-settings/test/__snapshots__/allow-countries-notice.test.tsx.snap rename to client/settings/fraud-protection/advanced-settings/__tests__/__snapshots__/allow-countries-notice.test.js.snap index 3304f5b21bd..649436b42ad 100644 --- a/client/settings/fraud-protection/advanced-settings/test/__snapshots__/allow-countries-notice.test.tsx.snap +++ b/client/settings/fraud-protection/advanced-settings/__tests__/__snapshots__/allow-countries-notice.test.js.snap @@ -66,7 +66,7 @@ exports[`Allowed countries rule card notice tests renders correctly when countri
*+*:not( marquee ) { + margin-left: calc(4px * 2); +} + +.emotion-0>* { + min-width: 0; +} + +.emotion-2 { + display: block; + max-height: 100%; + max-width: 100%; + min-height: 0; + min-width: 0; +} + +.emotion-4 { background-color: #fff; color: #1e1e1e; position: relative; @@ -12,41 +47,50 @@ exports[`Advanced fraud protection settings doesn't save when there's a validati border-radius: calc(2px - 1px); } -.emotion-2 { +.emotion-6 { height: 100%; } -.emotion-4 { +.emotion-8 { box-sizing: border-box; height: auto; max-height: 100%; padding: calc(4px * 4) calc(4px * 6); } -.emotion-4:first-of-type { +.emotion-8:first-of-type { border-top-left-radius: calc(2px - 1px); border-top-right-radius: calc(2px - 1px); } -.emotion-4:last-of-type { +.emotion-8:last-of-type { border-bottom-left-radius: calc(2px - 1px); border-bottom-right-radius: calc(2px - 1px); } -.emotion-6 { +.emotion-10 { font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif; font-size: 13px; } -.emotion-8 { +.emotion-12 { margin-bottom: calc(4px * 2); } -.components-panel__row .emotion-8 { +.components-panel__row .emotion-12 { margin-bottom: inherit; } -.emotion-10 { +.emotion-14 { + margin-top: calc(4px * 2); + margin-bottom: 0; + font-size: 12px; + font-style: normal; + color: #757575; + margin-bottom: revert; +} + +.emotion-16 { background: transparent; display: block; margin: 0!important; @@ -66,44 +110,39 @@ exports[`Advanced fraud protection settings doesn't save when there's a validati } @media ( prefers-reduced-motion: reduce ) { - .emotion-10 { + .emotion-16 { transition-duration: 0ms; } } -.emotion-24 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-box-pack: start; - -ms-flex-pack: start; - -webkit-justify-content: flex-start; - justify-content: flex-start; - width: 100%; +.emotion-34 { + width: 1em; + height: 1em; + margin: 0; + vertical-align: middle; + fill: currentColor; } -.emotion-24>*+*:not( marquee ) { - margin-left: calc(4px * 2); +.emotion-94 { + font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif; + font-size: 13px; + box-sizing: border-box; } -.emotion-24>* { - min-width: 0; +.emotion-94 *, +.emotion-94 *::before, +.emotion-94 *::after { + box-sizing: inherit; } -.emotion-26 { - display: block; - max-height: 100%; - max-width: 100%; - min-height: 0; - min-width: 0; +.emotion-98 { + font-size: 11px; + font-weight: 500; + line-height: 1.4; + text-transform: uppercase; + display: inline-block; + margin-bottom: calc(4px * 2); + padding: 0; } @@ -122,7 +161,7 @@ exports[`Advanced fraud protection settings doesn't save when there's a validati id="a11y-speak-assertive" style="position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px, 1px, 1px, 1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;" > - Settings were not saved. Maximum purchase price must be greater than the minimum purchase price. + Settings were not saved. Maximum purchase price must be greater than the minimum purchase price.

Advanced fraud protection @@ -175,73 +214,78 @@ exports[`Advanced fraud protection settings doesn't save when there's a validati class="settings-section__controls" >
- Settings were not saved. Maximum purchase price must be greater than the minimum purchase price.
-
- + Settings were not saved. Maximum purchase price must be greater than the minimum purchase price. +
+
+
+
-
-

- AVS Mismatch -

-
+

+ AVS Mismatch +

-
-
- This filter compares the street number and the post code submitted by the customer against the data on file with the card issuer. When enabled the payment will be blocked. +

+ This filter compares the street number and the post code submitted by the customer against the data on file with the card issuer. When enabled the payment will be blocked. +