Merge branch 'develop' into mobile/tpv-tracking-channel

* develop:
  Ensure ECE button load events are triggered for multiple buttons on the same page (#9845)
  Payouts: Add payout bank reference key to payout reports and CSV (#9832)
  Fix WooPay component spacing (#9748)
  Use paragraph selector instead of label for pmme appearance (#9840)
  Allow redirect to the settings page from WCPay connect (#9827)
  Update references to woocommerce_payments_server (#9824)
  Fix return types in DocBlocks (#9815)
  Fix WooPay trial subscriptions purchases (#9778)

.github/workflows/e2e-pull-request.yml

@@ -18,23 +18,23 @@ on:
         description: "Branch to be used for running tests"
 
 env:
-  E2E_GH_TOKEN:          ${{ secrets.E2E_GH_TOKEN }}
-  WCP_DEV_TOOLS_REPO:    ${{ secrets.WCP_DEV_TOOLS_REPO }}
-  WCP_DEV_TOOLS_BRANCH:  'trunk'
-  WCP_SERVER_REPO:       ${{ secrets.WCP_SERVER_REPO }}
-  WC_SUBSCRIPTIONS_REPO: ${{ secrets.WC_SUBSCRIPTIONS_REPO }}
-  E2E_BLOG_ID:           ${{ secrets.E2E_BLOG_ID }}
-  E2E_BLOG_TOKEN:        ${{ secrets.E2E_BLOG_TOKEN }}
-  E2E_USER_TOKEN:        ${{ secrets.E2E_USER_TOKEN }}
-  WC_E2E_SCREENSHOTS:    1
-  E2E_SLACK_CHANNEL:     ${{ secrets.E2E_SLACK_CHANNEL }}
-  E2E_SLACK_TOKEN:       ${{ secrets.E2E_SLACK_TOKEN }}
-  E2E_USE_LOCAL_SERVER:  false
-  E2E_RESULT_FILEPATH:   'tests/e2e/results.json'
-  WCPAY_USE_BUILD_ARTIFACT: ${{ inputs.wcpay-use-build-artifact }}
-  WCPAY_ARTIFACT_DIRECTORY: 'zipfile'
-  NODE_ENV: 'test'
-  FORCE_E2E_DEPS_SETUP: true
+  E2E_GH_TOKEN:                  ${{ secrets.E2E_GH_TOKEN }}
+  WCP_DEV_TOOLS_REPO:            ${{ secrets.WCP_DEV_TOOLS_REPO }}
+  WCP_DEV_TOOLS_BRANCH:          'trunk'
+  TRANSACT_PLATFORM_SERVER_REPO: ${{ secrets.TRANSACT_PLATFORM_SERVER_REPO }}
+  WC_SUBSCRIPTIONS_REPO:         ${{ secrets.WC_SUBSCRIPTIONS_REPO }}
+  E2E_BLOG_ID:                   ${{ secrets.E2E_BLOG_ID }}
+  E2E_BLOG_TOKEN:                ${{ secrets.E2E_BLOG_TOKEN }}
+  E2E_USER_TOKEN:                ${{ secrets.E2E_USER_TOKEN }}
+  WC_E2E_SCREENSHOTS:            1
+  E2E_SLACK_CHANNEL:             ${{ secrets.E2E_SLACK_CHANNEL }}
+  E2E_SLACK_TOKEN:               ${{ secrets.E2E_SLACK_TOKEN }}
+  E2E_USE_LOCAL_SERVER:          false
+  E2E_RESULT_FILEPATH:           'tests/e2e/results.json'
+  WCPAY_USE_BUILD_ARTIFACT:      ${{ inputs.wcpay-use-build-artifact }}
+  WCPAY_ARTIFACT_DIRECTORY:      'zipfile'
+  NODE_ENV:                      'test'
+  FORCE_E2E_DEPS_SETUP:          true
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}

.github/workflows/e2e-pw-pull-request.yml

@@ -21,7 +21,7 @@ env:
     E2E_GH_TOKEN: ${{ secrets.E2E_GH_TOKEN }}
     WCP_DEV_TOOLS_REPO: ${{ secrets.WCP_DEV_TOOLS_REPO }}
     WCP_DEV_TOOLS_BRANCH: 'trunk'
-    WCP_SERVER_REPO: ${{ secrets.WCP_SERVER_REPO }}
+    TRANSACT_PLATFORM_SERVER_REPO: ${{ secrets.TRANSACT_PLATFORM_SERVER_REPO }}
     WC_SUBSCRIPTIONS_REPO: ${{ secrets.WC_SUBSCRIPTIONS_REPO }}
     E2E_BLOG_ID: ${{ secrets.E2E_BLOG_ID }}
     E2E_BLOG_TOKEN: ${{ secrets.E2E_BLOG_TOKEN }}

.github/workflows/e2e-test.yml

@@ -10,22 +10,22 @@ on:
   workflow_dispatch:
 
 env:
-  E2E_GH_TOKEN:          ${{ secrets.E2E_GH_TOKEN }}
-  WCP_DEV_TOOLS_REPO:    ${{ secrets.WCP_DEV_TOOLS_REPO }}
-  WCP_DEV_TOOLS_BRANCH:  'trunk'
-  WCP_SERVER_REPO:       ${{ secrets.WCP_SERVER_REPO }}
-  WC_SUBSCRIPTIONS_REPO: ${{ secrets.WC_SUBSCRIPTIONS_REPO }}
-  E2E_BLOG_ID:           ${{ secrets.E2E_BLOG_ID }}
-  E2E_BLOG_TOKEN:        ${{ secrets.E2E_BLOG_TOKEN }}
-  E2E_USER_TOKEN:        ${{ secrets.E2E_USER_TOKEN }}
-  WC_E2E_SCREENSHOTS:    1
-  E2E_SLACK_CHANNEL:     ${{ secrets.E2E_SLACK_CHANNEL }}
-  E2E_SLACK_TOKEN:       ${{ secrets.E2E_SLACK_TOKEN }}
-  E2E_USE_LOCAL_SERVER:  false
-  E2E_RESULT_FILEPATH:   'tests/e2e/results.json'
-  WC_MIN_SUPPORTED_VERSION: '7.6.0'
-  NODE_ENV: 'test'
-  FORCE_E2E_DEPS_SETUP: true
+  E2E_GH_TOKEN:                  ${{ secrets.E2E_GH_TOKEN }}
+  WCP_DEV_TOOLS_REPO:            ${{ secrets.WCP_DEV_TOOLS_REPO }}
+  WCP_DEV_TOOLS_BRANCH:          'trunk'
+  TRANSACT_PLATFORM_SERVER_REPO: ${{ secrets.TRANSACT_PLATFORM_SERVER_REPO }}
+  WC_SUBSCRIPTIONS_REPO:         ${{ secrets.WC_SUBSCRIPTIONS_REPO }}
+  E2E_BLOG_ID:                   ${{ secrets.E2E_BLOG_ID }}
+  E2E_BLOG_TOKEN:                ${{ secrets.E2E_BLOG_TOKEN }}
+  E2E_USER_TOKEN:                ${{ secrets.E2E_USER_TOKEN }}
+  WC_E2E_SCREENSHOTS:            1
+  E2E_SLACK_CHANNEL:             ${{ secrets.E2E_SLACK_CHANNEL }}
+  E2E_SLACK_TOKEN:               ${{ secrets.E2E_SLACK_TOKEN }}
+  E2E_USE_LOCAL_SERVER:          false
+  E2E_RESULT_FILEPATH:           'tests/e2e/results.json'
+  WC_MIN_SUPPORTED_VERSION:      '7.6.0'
+  NODE_ENV:                      'test'
+  FORCE_E2E_DEPS_SETUP:          true
 
 jobs:
   generate-matrix:

changelog/add-5316-payout-trace-id

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Add Bank reference key column in Payout reports. This will help reconcile WooPayments Payouts with bank statements.

changelog/dev-4293-address-additional-union-types

@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+
+Fix return types

changelog/dev-allow-redirect-to-settings-page-from-wcpay-connect

@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+
+Allow redirect to the settings page from WCPay connect

changelog/fix-9795-debounce-of-ece-load-events

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Ensure ECE button load events are triggered for multiple buttons on the same page.

changelog/fix-pmme-appearance-blocks

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Use paragraph selector instead of label for pmme appearance

changelog/fix-woopay-component-spacing

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix WooPay component spacing.

changelog/fix-woopay-trial-subscriptions

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix WooPay trial subscriptions purchases.

changelog/update-server-container-name

@@ -0,0 +1,5 @@
+Significance: patch
+Type: dev
+Comment: Updates server container name used by E2E tests
+
+

client/checkout/blocks/style.scss

@@ -118,8 +118,6 @@ button.wcpay-stripelink-modal-trigger:hover {
 }
 
 #remember-me {
-	margin: 36px 0 0 0;
-
 	h2 {
 		font-size: 18px;
 		font-weight: 600;

client/checkout/upe-styles/index.js

@@ -23,6 +23,7 @@ export const appearanceSelectors = {
 		appendTarget: '.woocommerce-billing-fields__field-wrapper',
 		upeThemeInputSelector: '#billing_first_name',
 		upeThemeLabelSelector: '.woocommerce-checkout .form-row label',
+		upeThemeTextSelector: '.woocommerce-checkout .form-row',
 		rowElement: 'p',
 		validClasses: [ 'form-row' ],
 		invalidClasses: [
@@ -46,6 +47,7 @@ export const appearanceSelectors = {
 		appendTarget: '#contact-fields',
 		upeThemeInputSelector: '.wc-block-components-text-input #email',
 		upeThemeLabelSelector: '.wc-block-components-text-input label',
+		upeThemeTextSelector: '.wc-block-components-text-input',
 		rowElement: 'div',
 		validClasses: [ 'wc-block-components-text-input', 'is-active' ],
 		invalidClasses: [ 'wc-block-components-text-input', 'has-error' ],
@@ -73,6 +75,7 @@ export const appearanceSelectors = {
 		appendTarget: '.product .cart .quantity',
 		upeThemeInputSelector: '.product .cart .quantity .qty',
 		upeThemeLabelSelector: '.product .cart .quantity label',
+		upeThemeTextSelector: '.product .cart .quantity',
 		rowElement: 'div',
 		validClasses: [ 'input-text' ],
 		invalidClasses: [ 'input-text', 'has-error' ],
@@ -91,6 +94,7 @@ export const appearanceSelectors = {
 		appendTarget: '.cart .quantity',
 		upeThemeInputSelector: '.cart .quantity .qty',
 		upeThemeLabelSelector: '.cart .quantity label',
+		upeThemeTextSelector: '.cart .quantity',
 		rowElement: 'div',
 		validClasses: [ 'input-text' ],
 		invalidClasses: [ 'input-text', 'has-error' ],
@@ -111,6 +115,7 @@ export const appearanceSelectors = {
 		upeThemeInputSelector:
 			'.wc-block-cart .wc-block-components-quantity-selector .wc-block-components-quantity-selector__input',
 		upeThemeLabelSelector: '.wc-block-components-text-input',
+		upeThemeTextSelector: '.wc-block-components-text-input',
 		rowElement: 'div',
 		validClasses: [ 'wc-block-components-text-input' ],
 		invalidClasses: [ 'wc-block-components-text-input', 'has-error' ],
@@ -133,6 +138,7 @@ export const appearanceSelectors = {
 		appendTarget: '.woocommerce-billing-fields__field-wrapper',
 		upeThemeInputSelector: '#billing_first_name',
 		upeThemeLabelSelector: '.woocommerce-checkout .form-row label',
+		upeThemeTextSelector: '.woocommerce-checkout .form-row',
 		rowElement: 'p',
 		validClasses: [ 'form-row' ],
 		invalidClasses: [
@@ -476,6 +482,11 @@ export const getAppearance = ( elementsLocation, forWooPay = false ) => {
 		'.Label'
 	);
 
+	const paragraphRules = getFieldStyles(
+		selectors.upeThemeTextSelector,
+		'.Text'
+	);
+
 	const tabRules = getFieldStyles( selectors.upeThemeInputSelector, '.Tab' );
 	const selectedTabRules = getFieldStyles(
 		selectors.hiddenInput,
@@ -505,9 +516,9 @@ export const getAppearance = ( elementsLocation, forWooPay = false ) => {
 	);
 	const globalRules = {
 		colorBackground: backgroundColor,
-		colorText: labelRules.color,
-		fontFamily: labelRules.fontFamily,
-		fontSizeBase: labelRules.fontSize,
+		colorText: paragraphRules.color,
+		fontFamily: paragraphRules.fontFamily,
+		fontSizeBase: paragraphRules.fontSize,
 	};
 
 	const isFloatingLabel = elementsLocation === 'blocks_checkout';
@@ -528,8 +539,8 @@ export const getAppearance = ( elementsLocation, forWooPay = false ) => {
 				'.Tab--selected': selectedTabRules,
 				'.TabIcon:hover': tabIconHoverRules,
 				'.TabIcon--selected': selectedTabIconRules,
-				'.Text': labelRules,
-				'.Text--redirect': labelRules,
+				'.Text': paragraphRules,
+				'.Text--redirect': paragraphRules,
 			} )
 		),
 	};

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

@@ -55,6 +55,7 @@ const borderOutlineBackgroundProps = [
 ];
 const upeSupportedProperties = {
 	'.Label': [ ...paddingColorProps, ...textFontTransitionProps ],
+	'.Text': [ ...paddingColorProps, ...textFontTransitionProps ],
 	'.Input': [
 		...paddingColorProps,
 		...textFontTransitionProps,
@@ -112,4 +113,6 @@ export const upeRestrictedProperties = {
 	'.TabLabel': upeSupportedProperties[ '.TabLabel' ],
 	'.Block': upeSupportedProperties[ '.Block' ],
 	'.Container': upeSupportedProperties[ '.Container' ],
+	'.Text': upeSupportedProperties[ '.Text' ],
+	'.Text--redirect': upeSupportedProperties[ '.Text' ],
 };

client/checkout/woopay/index.js

@@ -46,8 +46,6 @@ const renderSaveUserSection = () => {
 					checkoutPageSaveUserContainer,
 					paymentOptions.nextSibling
 				);
-
-				paymentOptions.classList.add( 'is-woopay' );
 			}
 		}
 

client/components/woopay/save-user/checkout-page-save-user.js

@@ -26,7 +26,6 @@ import request from '../../../checkout/utils/request';
 import useSelectedPaymentMethod from '../hooks/use-selected-payment-method';
 import { recordUserEvent } from 'tracks';
 import './style.scss';
-import { compare } from 'compare-versions';
 
 const CheckoutPageSaveUser = ( { isBlocksCheckout } ) => {
 	const errorId = 'invalid-woopay-phone-number';
@@ -57,12 +56,6 @@ const CheckoutPageSaveUser = ( { isBlocksCheckout } ) => {
 	);
 	const viewportWidth = window.document.documentElement.clientWidth;
 	const viewportHeight = window.document.documentElement.clientHeight;
-	const wooCommerceVersionString = window.wcSettings?.wcVersion;
-	const wcVersionGreaterThan91 = compare(
-		wooCommerceVersionString,
-		'9.1',
-		'>='
-	);
 
 	useEffect( () => {
 		if ( ! isBlocksCheckout ) {
@@ -291,10 +284,7 @@ const CheckoutPageSaveUser = ( { isBlocksCheckout } ) => {
 	}
 
 	return (
-		<Container
-			isBlocksCheckout={ isBlocksCheckout }
-			wcVersionGreaterThan91={ wcVersionGreaterThan91 }
-		>
+		<Container isBlocksCheckout={ isBlocksCheckout }>
 			<div className="save-details">
 				<div className="save-details-header">
 					<div
@@ -313,10 +303,6 @@ const CheckoutPageSaveUser = ( { isBlocksCheckout } ) => {
 								id="save_user_in_woopay"
 								value="true"
 								className={ `save-details-checkbox ${
-									wcVersionGreaterThan91
-										? 'without-margin-right'
-										: ''
-								} ${
 									isBlocksCheckout
 										? 'wc-block-components-checkbox__input'
 										: ''

client/components/woopay/save-user/container.js

@@ -3,19 +3,11 @@
  */
 import { __ } from '@wordpress/i18n';
 
-const Container = ( {
-	children,
-	isBlocksCheckout,
-	wcVersionGreaterThan91,
-} ) => {
+const Container = ( { children, isBlocksCheckout } ) => {
 	if ( ! isBlocksCheckout ) return children;
 	return (
 		<>
-			<div
-				className={ `woopay-save-new-user-container ${
-					wcVersionGreaterThan91 ? 'wc-version-greater-than-91' : ''
-				}` }
-			>
+			<div className="woopay-save-new-user-container">
 				<h2>{ __( 'Save my info' ) }</h2>
 				{ children }
 			</div>

client/components/woopay/save-user/style.scss

@@ -7,53 +7,13 @@
 	}
 }
 
-.is-mobile,
-.is-small {
-	.woopay-save-new-user-container.wc-version-greater-than-91::after {
-		background: currentColor;
-		box-shadow: -50vw 0 0 0 currentColor, 50vw 0 0 0 currentColor;
-		content: '';
-		height: 1px;
-		opacity: 0.11;
-		width: 100%;
-		margin-top: 22px;
-	}
-}
-
-.is-medium,
-.is-large {
-	.woopay-save-new-user-container.wc-version-greater-than-91 {
-		border-bottom: 1px solid hsla( 0, 0%, 7%, 0.11 );
-		margin-bottom: 48px;
-	}
-}
-
-@media ( max-width: 600px ) {
-	.is-mobile,
-	.is-small {
-		.wc-block-components-form
-			.wc-block-components-checkout-step.is-woopay::after {
-			height: 0;
-		}
-	}
-}
-
 .woopay-save-new-user-container {
 	.save-details {
 		.wc-block-components-text-input input:-webkit-autofill {
 			padding: 1.5em 0.5em 1.5em 0.5em;
 		}
 	}
 
-	&.wc-version-greater-than-91 {
-		@media ( min-width: 601px ),
-			( min-width: 566px ) and ( max-width: 568px ) {
-			.save-details {
-				margin-bottom: 48px;
-			}
-		}
-	}
-
 	.save-details-header {
 		display: flex;
 		align-items: flex-start;
@@ -87,10 +47,6 @@
 				text-indent: 0;
 			}
 
-			input:not( .without-margin-right ) {
-				margin-right: $gap-small;
-			}
-
 			span {
 				@include breakpoint( '>960px' ) {
 					margin-right: 1.25rem;