Merge branch 'develop' into update/remove-payout-status-icon

Author: htdat

.stylelintrc.json

@@ -15,6 +15,15 @@
 		"media-feature-parentheses-space-inside": "always",
 		"no-descending-specificity": null,
 		"no-duplicate-selectors": null,
+		"property-no-unknown": [
+			true,
+			{
+				"ignoreProperties": [
+					"container-type",
+					"container-name"
+				]
+			}
+		],
 		"rule-empty-line-before": null,
 		"selector-class-pattern": null,
 		"selector-pseudo-class-parentheses-space-inside": "always",

changelog/dev-qit-e2e-basic-checkout

@@ -0,0 +1,3 @@
+Significance: patch
+Type: dev
+Comment: Dev only changes to run E2E tests with QIT.

changelog/dev-qit-e2e-foundation

@@ -0,0 +1,5 @@
+Significance: patch
+Type: dev
+Comment: Add foundation to run E2E tests with QIT and basic tests.
+
+

changelog/woopmnt-5396-woopay-pill-shaped-button-is-cutoff-on-checkout-alt

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix WooPay express button text clipping

changelog/woopmnt-5449-update-payout-banner-in-the-settings

@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Change payout texts for  New Account Waiting Period to be consistent with new Account Details

client/checkout/woopay/express-button/style.scss

@@ -1,4 +1,8 @@
 #wcpay-woopay-button {
+	// Enable container queries on the button wrapper
+	container-type: inline-size;
+	container-name: woopay-button;
+
 	.woopay-express-button {
 		font-size: 18px;
 		font-weight: 500;
@@ -18,13 +22,15 @@
 		text-transform: none;
 		list-style-type: none;
 		min-height: auto;
+		overflow: hidden;
 		position: relative;
 
 		.button-content {
 			display: flex;
-			align-content: center;
+			align-items: center;
 			justify-content: center;
 			transform: scale( 0.9 );
+			max-width: 100%;
 		}
 
 		&:not( :disabled ) {
@@ -57,11 +63,42 @@
 		&[data-type='buy'],
 		&[data-type='book'],
 		&[data-type='donate'] {
-			min-width: 200px;
+			min-width: 150px;
 
 			svg {
 				margin-left: 5px;
 			}
+
+			// Container queries for small buttons (40px height)
+			@container woopay-button (max-width: 280px) {
+				font-size: 14px;
+				letter-spacing: 0.5px;
+
+				svg {
+					width: 88px;
+					margin-left: 4px;
+				}
+			}
+
+			@container woopay-button (max-width: 240px) {
+				font-size: 12px;
+				letter-spacing: 0.3px;
+
+				svg {
+					width: 84px;
+					margin-left: 3px;
+				}
+			}
+
+			@container woopay-button (max-width: 200px) {
+				font-size: 10px;
+				letter-spacing: 0.2px;
+
+				svg {
+					width: 80px;
+					margin-left: 2px;
+				}
+			}
 		}
 
 		&[data-theme='dark'] {
@@ -91,7 +128,46 @@
 			&[data-type='buy'],
 			&[data-type='book'],
 			&[data-type='donate'] {
-				min-width: 229px;
+				min-width: 150px;
+
+				// Container queries: respond to actual button container width
+				// These trigger based on the button's actual width in the layout
+
+				// Default state for wide containers (> 280px)
+				// Uses default 18px font, 99px logo from parent
+
+				// When container is moderately constrained
+				@container woopay-button (max-width: 280px) {
+					font-size: 15px;
+					letter-spacing: 0.5px;
+
+					svg {
+						width: 90px;
+						margin-left: 4px;
+					}
+				}
+
+				// When container is squeezed (common in 3-button horizontal layouts)
+				@container woopay-button (max-width: 240px) {
+					font-size: 13px;
+					letter-spacing: 0.3px;
+
+					svg {
+						width: 86px;
+						margin-left: 3px;
+					}
+				}
+
+				// When container is very tight
+				@container woopay-button (max-width: 200px) {
+					font-size: 11px;
+					letter-spacing: 0.2px;
+
+					svg {
+						width: 82px;
+						margin-left: 2px;
+					}
+				}
 			}
 
 			.button-content {
@@ -105,7 +181,40 @@
 			&[data-type='buy'],
 			&[data-type='book'],
 			&[data-type='donate'] {
-				min-width: 229px;
+				min-width: 150px;
+
+				// Container queries for large buttons
+				// Slightly larger than medium buttons at each breakpoint
+
+				@container woopay-button (max-width: 280px) {
+					font-size: 16px;
+					letter-spacing: 0.6px;
+
+					svg {
+						width: 93px;
+						margin-left: 4px;
+					}
+				}
+
+				@container woopay-button (max-width: 240px) {
+					font-size: 14px;
+					letter-spacing: 0.4px;
+
+					svg {
+						width: 89px;
+						margin-left: 3px;
+					}
+				}
+
+				@container woopay-button (max-width: 200px) {
+					font-size: 12px;
+					letter-spacing: 0.3px;
+
+					svg {
+						width: 85px;
+						margin-left: 2px;
+					}
+				}
 			}
 
 			.button-content {

client/components/deposits-overview/__tests__/index.test.tsx

@@ -306,9 +306,12 @@ describe( 'Deposits Overview information', () => {
 			setSelectedCurrency: mockSetSelectedCurrency,
 		} );
 		const { getByText, queryByText } = render( <DepositsOverview /> );
-		getByText( /Your first payout is held for/, {
-			ignore: '.a11y-speak-region',
-		} );
+		getByText(
+			/Payout scheduling becomes available after the standard 7-day waiting period for new accounts is complete/,
+			{
+				ignore: '.a11y-speak-region',
+			}
+		);
 		expect( queryByText( 'Change deposit schedule' ) ).toBeFalsy();
 		expect( queryByText( 'View full deposits history' ) ).toBeFalsy();
 	} );
@@ -426,7 +429,11 @@ describe( 'Deposits Overview information', () => {
 		} );
 
 		const { queryByText } = render( <DepositsOverview /> );
-		expect( queryByText( /Your first payout is held for/ ) ).toBeFalsy();
+		expect(
+			queryByText(
+				/Payout scheduling becomes available after the standard 7-day waiting period for new accounts is complete/
+			)
+		).toBeFalsy();
 	} );
 
 	test( 'Confirm new account waiting period notice shows if within waiting period', () => {
@@ -444,10 +451,13 @@ describe( 'Deposits Overview information', () => {
 		} );
 
 		const { getByText, getByRole } = render( <DepositsOverview /> );
-		getByText( /Your first payout is held for/, {
-			ignore: '.a11y-speak-region',
-		} );
-		expect( getByRole( 'link', { name: /Why\?/ } ) ).toHaveAttribute(
+		getByText(
+			/Payout scheduling becomes available after the standard 7-day waiting period for new accounts is complete/,
+			{
+				ignore: '.a11y-speak-region',
+			}
+		);
+		expect( getByRole( 'link', { name: /Learn more/ } ) ).toHaveAttribute(
 			'href',
 			'https://woocommerce.com/document/woopayments/payouts/payout-schedule/#new-accounts'
 		);

client/components/deposits-overview/deposit-notices.tsx

@@ -58,11 +58,11 @@ export const NewAccountWaitingPeriodNotice: React.FC = () => (
 	>
 		{ interpolateComponents( {
 			mixedString: __(
-				'Your first payout is held for 7-14 days. {{whyLink}}Why?{{/whyLink}}',
+				'Payout scheduling becomes available after the standard 7-day waiting period for new accounts is complete. {{learnMoreLink}}Learn more{{/learnMoreLink}}',
 				'woocommerce-payments'
 			),
 			components: {
-				whyLink: (
+				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
 					<a

client/settings/deposits/__tests__/index.test.js

@@ -163,7 +163,7 @@ describe( 'Deposits', () => {
 		);
 
 		const depositsMessage = screen.getByText(
-			/Your first payout will be held for/,
+			/Payout scheduling becomes available after the standard 7-day waiting period for new accounts is complete/,
 			{
 				ignore: '.a11y-speak-region',
 			}

client/settings/deposits/index.js

@@ -189,8 +189,9 @@ const DepositsSchedule = () => {
 			<InlineNotice status="warning" isDismissible={ false } icon>
 				{ interpolateComponents( {
 					mixedString: __(
-						'Your first payout will be held for 7-14 days. ' +
-							'Payout scheduling will be available after this period. {{learnMoreLink}}Learn more{{/learnMoreLink}}',
+						'Payout scheduling becomes available after the standard 7-day waiting period for new accounts is complete.' +
+							' ' +
+							'{{learnMoreLink}}Learn more{{/learnMoreLink}}',
 						'woocommerce-payments'
 					),
 					components: {