Merge branch 'develop' into scope/payment-elements-selectors

Automattic · Nov 29, 2024 · 805ab0e · 805ab0e
2 parents 73da308 + b0b67af
commit 805ab0e
Show file tree

Hide file tree

Showing 22 changed files with 309 additions and 105 deletions.
diff --git a/assets/images/illustrations/setup.svg b/assets/images/illustrations/setup.svg
diff --git a/changelog/add-5316-payout-trace-id b/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.
diff --git a/changelog/dev-allow-redirect-to-settings-page-from-wcpay-connect b/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
diff --git a/changelog/fix-pmme-appearance-blocks b/changelog/fix-pmme-appearance-blocks
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Use paragraph selector instead of label for pmme appearance
diff --git a/changelog/fix-woopay-component-spacing b/changelog/fix-woopay-component-spacing
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix WooPay component spacing.
diff --git a/client/checkout/blocks/style.scss b/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;

diff --git a/client/checkout/upe-styles/index.js b/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,
 			} )
 		),
 	};

diff --git a/client/checkout/upe-styles/upe-styles.js b/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' ],
 };
diff --git a/client/checkout/woopay/index.js b/client/checkout/woopay/index.js
@@ -46,8 +46,6 @@ const renderSaveUserSection = () => {
 					checkoutPageSaveUserContainer,
 					paymentOptions.nextSibling
 				);
-
-				paymentOptions.classList.add( 'is-woopay' );
 			}
 		}
 

diff --git a/client/components/woopay/save-user/checkout-page-save-user.js b/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'
 										: ''

diff --git a/client/components/woopay/save-user/container.js b/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>

diff --git a/client/components/woopay/save-user/style.scss b/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;

diff --git a/client/connect-account-page/index.tsx b/client/connect-account-page/index.tsx
@@ -27,11 +27,12 @@ import Incentive from './incentive';
 import InfoNotice from './info-notice-modal';
 import OnboardingLocationCheckModal from './modal';
 import LogoImg from 'assets/images/woopayments.svg?asset';
+import SetupImg from 'assets/images/illustrations/setup.svg?asset';
 import strings from './strings';
 import './style.scss';
 import InlineNotice from 'components/inline-notice';
 import { WooPaymentMethodsLogos } from 'components/payment-method-logos';
-import WooPaymentsLogo from 'assets/images/logo.svg?asset';
+import WooLogo from 'assets/images/woo-logo.svg?asset';
 import { sanitizeHTML } from 'wcpay/utils/sanitize';
 import { isInTestModeOnboarding } from 'wcpay/utils';
 import ResetAccountModal from 'wcpay/overview/modal/reset-account';
@@ -52,18 +53,19 @@ const TestDriveLoader: React.FunctionComponent< {
 	progress: number;
 } > = ( { progress } ) => (
 	<Loader className="connect-account-page__preloader">
-		<img src={ WooPaymentsLogo } alt="" />
+		<img className="logo" src={ WooLogo } alt="" />
 		<Loader.Layout>
+			<Loader.Illustration>
+				<img src={ SetupImg } alt="setup" />
+			</Loader.Illustration>
+
 			<Loader.Title>
-				{ __(
-					'Creating your sandbox account',
-					'woocommerce-payments'
-				) }
+				{ __( 'Finishing payments setup', 'woocommerce-payments' ) }
 			</Loader.Title>
 			<Loader.ProgressBar progress={ progress ?? 0 } />
 			<Loader.Sequence interval={ 0 }>
 				{ __(
-					'In just a few moments, you will be ready to test payments on your store.'
+					"In just a few moments, you'll be ready to test payments on your store."
 				) }
 			</Loader.Sequence>
 		</Loader.Layout>
@@ -193,6 +195,8 @@ const ConnectAccountPage: React.FC = () => {
 					'wcpay-sandbox-success': 'true',
 					source: determineTrackingSource(),
 					from: 'WCPAY_CONNECT',
+					redirect_to_settings_page:
+						urlParams.get( 'redirect_to_settings_page' ) || '',
 				} );
 			} else {
 				setTimeout( checkAccountStatus, 2000 );

diff --git a/client/connect-account-page/style.scss b/client/connect-account-page/style.scss
@@ -249,12 +249,12 @@
 		z-index: 999999;
 		text-align: center;
 
-		img {
+		img.logo {
 			position: absolute;
-			height: 44px;
-			width: 167px;
+			height: 40px;
+			width: 40px;
 			top: 18px;
-			left: calc( 50% - 84px );
+			left: 36px;
 		}
 	}
 }
diff --git a/client/deposits/list/index.tsx b/client/deposits/list/index.tsx
@@ -97,6 +97,11 @@ const getColumns = ( sortByDate?: boolean ): DepositsTableHeader[] => [
 		screenReaderLabel: __( 'Bank account', 'woocommerce-payments' ),
 		isLeftAligned: true,
 	},
+	{
+		key: 'bankReferenceKey',
+		label: __( 'Bank reference key', 'woocommerce-payments' ),
+		screenReaderLabel: __( 'Bank reference key', 'woocommerce-payments' ),
+	},
 ];
 
 export const DepositsList = (): JSX.Element => {
@@ -165,6 +170,10 @@ export const DepositsList = (): JSX.Element => {
 				value: deposit.bankAccount,
 				display: clickable( deposit.bankAccount ),
 			},
+			bankReferenceKey: {
+				value: deposit.bank_reference_key,
+				display: clickable( deposit.bank_reference_key ?? 'N/A' ),
+			},
 		};
 
 		return columns.map( ( { key } ) => data[ key ] || { display: null } );
-Original file line number
+Diff line change
@@ Expand Up / @@ -46,8 +46,6 @@ const renderSaveUserSection = () => { @@
     					checkoutPageSaveUserContainer,
     					paymentOptions.nextSibling
     				);
-    				paymentOptions.classList.add( 'is-woopay' );
     			}
     		}
@@ Expand Down @@