Merge branch 'develop' into add/appearance-editor

Automattic · Dec 10, 2024 · c8df7d3 · c8df7d3
2 parents 71e31f8 + 63376c3
commit c8df7d3
Show file tree

Hide file tree

Showing 36 changed files with 1,024 additions and 201 deletions.
diff --git a/changelog/8969-fallback-to-card-payment-type b/changelog/8969-fallback-to-card-payment-type
@@ -0,0 +1,5 @@
+Significance: patch
+Type: update
+Comment: Small change to payment method types fallback scenario.
+
+
diff --git a/changelog/add-2253-clickwrap-terms-and-conditions b/changelog/add-2253-clickwrap-terms-and-conditions
@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Clickwrap terms and conditions support on WooPay
diff --git a/changelog/add-9690-recommended-pm b/changelog/add-9690-recommended-pm
@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Implement gateway method to retrieve recommended payment method.
diff --git a/changelog/as-fix-ece-variable-subs b/changelog/as-fix-ece-variable-subs
@@ -0,0 +1,4 @@
+Significance: minor
+Type: dev
+
+Refine verification for disabling ECE on subscriptions that require shipping.
diff --git a/changelog/as-hk-address b/changelog/as-hk-address
@@ -0,0 +1,4 @@
+Significance: minor
+Type: fix
+
+Normalize HK addresses for ECE
diff --git a/changelog/fix-9889-log-level b/changelog/fix-9889-log-level
@@ -0,0 +1,4 @@
+Significance: minor
+Type: fix
+
+Errors were incorrectly marked as info in logs.
diff --git a/changelog/fix-add-payment-method-check b/changelog/fix-add-payment-method-check
@@ -0,0 +1,5 @@
+Significance: patch
+Type: dev
+Comment: Added a check for the gateway id before comparing it
+
+
diff --git a/changelog/fix-rounding-error-with-deposit-products b/changelog/fix-rounding-error-with-deposit-products
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Ceil product prices after applying currency conversion, but before charm pricing and price rounding from settings is applied.
diff --git a/changelog/fix-use-effect-console-warning b/changelog/fix-use-effect-console-warning
@@ -0,0 +1,5 @@
+Significance: patch
+Type: dev
+Comment: fix: console warning on plugins page
+
+
diff --git a/changelog/frosso-patch-1 b/changelog/frosso-patch-1
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+fix: undefined $cart_contains_subscription
diff --git a/changelog/update-confirmation-modal-nox b/changelog/update-confirmation-modal-nox
@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Update confirmation modal after onbarding
diff --git a/client/overview/modal/progressive-onboarding-eligibility/index.tsx b/client/overview/modal/progressive-onboarding-eligibility/index.tsx
@@ -5,8 +5,9 @@ import React, { useEffect, useState } from 'react';
 import { __, sprintf } from '@wordpress/i18n';
 import { addQueryArgs } from '@wordpress/url';
 import { Button, Modal } from '@wordpress/components';
-import { Icon, store, widget, tool } from '@wordpress/icons';
+import { Icon, store, currencyDollar } from '@wordpress/icons';
 import { useDispatch } from '@wordpress/data';
+import interpolateComponents from '@automattic/interpolate-components';
 
 /**
  * Internal dependencies
@@ -59,75 +60,74 @@ const ProgressiveOnboardingEligibilityModal: React.FC = () => {
 		setModalVisible( false );
 	};
 
-	// Workaround to remove Modal header from the modal until `hideHeader` prop can be used.
-	useEffect( () => {
-		document
-			.querySelector(
-				'.wcpay-progressive-onboarding-eligibility-modal .components-modal__header-heading-container'
-			)
-			?.remove();
-	}, [] );
-
 	if ( ! modalVisible || modalDismissed ) return null;
 
 	return (
 		<Modal
-			title={ '' }
+			title={ __(
+				"You're ready to accept payments!",
+				'woocommerce-payments'
+			) }
 			className="wcpay-progressive-onboarding-eligibility-modal"
 			onRequestClose={ handleDismiss }
 		>
 			<ConfettiAnimation />
-			<h1 className="wcpay-progressive-onboarding-eligibility-modal__heading">
-				{ __( 'You’re ready to sell.', 'woocommerce-payments' ) }
-			</h1>
 			<h2 className="wcpay-progressive-onboarding-eligibility-modal__subheading">
-				{ __(
-					'Start selling now and fast track the setup process, or continue the process to set up payouts with WooPayments.',
-					'woocommerce-payments'
-				) }
+				{ interpolateComponents( {
+					mixedString: sprintf(
+						__(
+							'Great news — your %s account has been activated. You can now start accepting payments on your store, subject to {{restrictionsLink}}certain restrictions{{/restrictionsLink}}.',
+							'woocommerce-payments'
+						),
+						'WooPayments'
+					),
+					components: {
+						restrictionsLink: (
+							// eslint-disable-next-line jsx-a11y/anchor-has-content
+							<a
+								rel="external noopener noreferrer"
+								target="_blank"
+								href="https://woocommerce.com/document/woopayments/startup-guide/gradual-signup/"
+							/>
+						),
+					},
+				} ) }
 			</h2>
 			<div className="wcpay-progressive-onboarding-eligibility-modal__benefits">
 				<div>
-					<Icon icon={ store } size={ 32 } />
-					<h3 className="wcpay-progressive-onboarding-eligibility-modal__benefits__subtitle">
+					<Icon icon={ store } width={ 24 } height={ 24 } />
+					<div>
+						<h3 className="wcpay-progressive-onboarding-eligibility-modal__benefits__subtitle">
+							{ __(
+								'Start selling instantly',
+								'woocommerce-payments'
+							) }
+						</h3>
 						{ __(
-							'Start selling instantly',
+							'You have 30 days from your first transaction or until you reach $5,000 in sales to verify your information and set up payouts.',
 							'woocommerce-payments'
 						) }
-					</h3>
-					{ sprintf(
-						/* translators: %s: WooPayments */
-						__(
-							'%s enables you to start processing credit card payments right away.',
-							'woocommerce-payments'
-						),
-						'WooPayments'
-					) }
-				</div>
-				<div>
-					<Icon icon={ widget } size={ 32 } />
-					<h3 className="wcpay-progressive-onboarding-eligibility-modal__benefits__subtitle">
-						{ __( 'Quick and easy setup', 'woocommerce-payments' ) }
-					</h3>
-					{ __(
-						'The setup process is super simple and ensures your store is ready to accept card payments.',
-						'woocommerce-payments'
-					) }
+					</div>
 				</div>
 				<div>
-					<Icon icon={ tool } size={ 32 } />
-					<h3 className="wcpay-progressive-onboarding-eligibility-modal__benefits__subtitle">
-						{ __( 'Flexible process', 'woocommerce-payments' ) }
-					</h3>
-					{ __(
-						'You have a $5,000 balance limit or 30 days from your first transaction to verify and set up payouts in your account.',
-						'woocommerce-payments'
-					) }
+					<Icon icon={ currencyDollar } width={ 24 } height={ 24 } />
+					<div>
+						<h3 className="wcpay-progressive-onboarding-eligibility-modal__benefits__subtitle">
+							{ __(
+								'Start receiving payouts',
+								'woocommerce-payments'
+							) }
+						</h3>
+						{ __(
+							'Provide some additional details about your business so you can continue accepting payments and begin receiving payouts without restrictions.',
+							'woocommerce-payments'
+						) }
+					</div>
 				</div>
 			</div>
 			<div className="wcpay-progressive-onboarding-eligibility-modal__footer">
 				<Button variant="secondary" onClick={ handleSetup }>
-					{ __( 'Start receiving payouts', 'woocommerce-payments' ) }
+					{ __( 'Set up payouts', 'woocommerce-payments' ) }
 				</Button>
 				<Button variant="primary" onClick={ handlePaymentsOnly }>
 					{ __( 'Start selling', 'woocommerce-payments' ) }

diff --git a/client/overview/modal/progressive-onboarding-eligibility/style.scss b/client/overview/modal/progressive-onboarding-eligibility/style.scss
@@ -2,27 +2,33 @@
 	&.components-modal__frame {
 		border-radius: 2px !important;
 		overflow: visible;
+
+		@media screen and ( max-width: $break-small ) {
+			height: fit-content;
+			margin: auto auto;
+			max-width: 90vw;
+		}
 	}
 
 	.components-modal__content {
 		box-sizing: border-box;
-		max-width: 700px;
-		margin: 0;
+		max-width: 516px;
+		margin: 72px 0 0;
 		padding: $gap-larger;
 		display: flex;
 		flex-direction: column;
-		align-items: center;
+		padding: $gap $gap-larger $gap-larger $gap-larger;
+		flex: 1;
+		overflow: auto;
 	}
 
 	.components-modal__header {
-		height: 0;
+		.components-modal__header-heading {
+			font-weight: 300;
+			text-wrap: auto;
+		}
 
 		.components-button {
-			position: absolute;
-			left: initial;
-			top: $gap-smaller;
-			right: $gap-smaller;
-
 			svg {
 				width: 32px;
 				height: 32px;
@@ -31,50 +37,72 @@
 	}
 
 	&__heading {
-		font-size: 40px;
+		font-size: 20px;
 		font-weight: 400;
-		line-height: 60px;
+		line-height: 28px;
 		margin-bottom: $gap-smallest;
 	}
 
 	&__subheading {
 		@include wc-body-large;
-		text-align: center;
-		font-weight: normal;
-		color: $gray-60;
-		max-width: 480px;
+		font-weight: 400;
+		color: $gray-700;
+		font-size: 13px;
+		line-height: 20px;
 		margin: 0 0 $gap-large 0;
+		text-wrap: wrap !important;
 	}
 
 	&__benefits {
-		display: grid;
-		grid-template-columns: repeat( 3, 1fr );
-		column-gap: $gap-largest;
-		padding: 0 $gap;
-		fill: $studio-woocommerce-purple-50;
-		font-size: 14px;
+		fill: $gray-900;
+		font-size: 13px;
 		line-height: 20px;
-		color: $gray-60;
+		color: $gray-700;
+
+		> div {
+			display: grid;
+			grid-template-columns: auto 1fr;
+			gap: $gap;
+			color: $gray-700;
+			font-weight: 400;
+			font-size: 13px;
+			line-height: 20px;
+		}
+
+		> div:not( :last-child ) {
+			margin-bottom: $gap;
+		}
 
 		svg {
 			display: block;
-			margin: $gap-smaller auto;
+			margin: $gap-smallest 0;
+			color: $gray-900;
 		}
 
 		&__subtitle {
 			@include wp-subtitle;
-			margin: $gap-large 0 $gap-smallest;
+			margin: $gap-smallest 0;
+			font-weight: 600;
+			color: $gray-900;
+			line-height: 20px;
+			font-size: 13px;
 		}
 
 		@media screen and ( max-width: $break-small ) {
 			grid-template-columns: 1fr;
 			row-gap: $gap-large;
+
+			svg {
+				width: 24px;
+				height: 24px;
+			}
 		}
 	}
 
 	&__footer {
-		text-align: center;
-		margin: $gap-large 0;
+		text-align: right;
+		margin: $gap-large 0 0 0;
+		width: 100%;
 
 		& :first-child {
 			margin-right: $gap;
@@ -87,6 +115,11 @@
 			line-height: 20px;
 			height: 40px;
 		}
+
+		@media screen and ( max-width: $break-small ) {
+			text-wrap: nowrap;
+			text-align: center;
+		}
 	}
 
 	&__confetti {

diff --git a/client/overview/modal/progressive-onboarding-eligibility/test/index.test.tsx b/client/overview/modal/progressive-onboarding-eligibility/test/index.test.tsx
@@ -36,7 +36,7 @@ describe( 'Progressive Onboarding Eligibility Modal', () => {
 
 		const queryHeading = () =>
 			screen.queryByRole( 'heading', {
-				name: 'You’re ready to sell.',
+				name: "You're ready to accept payments!",
 			} );
 
 		expect( queryHeading() ).toBeInTheDocument();
@@ -83,7 +83,7 @@ describe( 'Progressive Onboarding Eligibility Modal', () => {
 
 		user.click(
 			screen.getByRole( 'button', {
-				name: 'Start receiving payouts',
+				name: 'Set up payouts',
 			} )
 		);
 

diff --git a/client/overview/task-list/strings.tsx b/client/overview/task-list/strings.tsx
@@ -423,10 +423,7 @@ export default {
 			),
 		},
 		go_live: {
-			title: __(
-				'Set up real payments on your store',
-				'woocommerce-payments'
-			),
+			title: __( 'Set up live payments', 'woocommerce-payments' ),
 			time: __( '10 minutes', 'woocommerce-payments' ),
 		},
 	},

diff --git a/client/overview/test/index.js b/client/overview/test/index.js
@@ -326,7 +326,7 @@ describe( 'Overview page', () => {
 		render( <OverviewPage /> );
 
 		expect(
-			screen.getByText( 'You’re ready to sell.' )
+			screen.getByText( "You're ready to accept payments!" )
 		).toBeInTheDocument();
 	} );
 

diff --git a/client/plugins-page/index.js b/client/plugins-page/index.js
@@ -77,12 +77,12 @@ const PluginsPage = () => {
 	useEffect( () => {
 		// If the survey is dismissed skip event listeners.
 		if ( isModalDismissed() ) {
-			return null;
+			return;
 		}
 
 		// Abort if the deactivation link is not present.
 		if ( deactivationLink === null ) {
-			return null;
+			return;
 		}
 
 		// Handle click event.

diff --git a/client/settings/express-checkout-settings/test/woopay-settings.test.js b/client/settings/express-checkout-settings/test/woopay-settings.test.js
@@ -149,7 +149,7 @@ describe( 'WooPaySettings', () => {
 		// confirm settings headings
 		expect(
 			screen.queryByRole( 'heading', {
-				name: 'Policies and custom text',
+				name: 'Checkout policies',
 			} )
 		).toBeInTheDocument();