Merge branch 'fix/2679-order-Id-column-rename' of https://github.com/…

…Automattic/woocommerce-payments into fix/2679-order-Id-column-rename
Automattic · Dec 12, 2024 · f955f8b · f955f8b
2 parents 1d87284 + f56cdfd
commit f955f8b
Show file tree

Hide file tree

Showing 17 changed files with 170 additions and 107 deletions.
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/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/update-1-5316-rename-bank-reference-id b/changelog/update-1-5316-rename-bank-reference-id
@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Change 'Bank reference key' label to 'Bank reference ID' in Payouts list column for consistency.
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/changelog/update-jetpack-onboarding-flow b/changelog/update-jetpack-onboarding-flow
@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Update Jetpack onboarding flow
diff --git a/client/deposits/list/index.tsx b/client/deposits/list/index.tsx
@@ -98,9 +98,9 @@ const getColumns = ( sortByDate?: boolean ): DepositsTableHeader[] => [
 		isLeftAligned: true,
 	},
 	{
-		key: 'bankReferenceKey',
-		label: __( 'Bank reference key', 'woocommerce-payments' ),
-		screenReaderLabel: __( 'Bank reference key', 'woocommerce-payments' ),
+		key: 'bankReferenceId',
+		label: __( 'Bank reference ID', 'woocommerce-payments' ),
+		screenReaderLabel: __( 'Bank reference ID', 'woocommerce-payments' ),
 	},
 ];
 
@@ -170,7 +170,7 @@ export const DepositsList = (): JSX.Element => {
 				value: deposit.bankAccount,
 				display: clickable( deposit.bankAccount ),
 			},
-			bankReferenceKey: {
+			bankReferenceId: {
 				value: deposit.bank_reference_key,
 				display: clickable( deposit.bank_reference_key ?? 'N/A' ),
 			},

diff --git a/client/deposits/list/test/__snapshots__/index.tsx.snap b/client/deposits/list/test/__snapshots__/index.tsx.snap
@@ -321,12 +321,12 @@ exports[`Deposits list renders correctly a single deposit 1`] = `
                     <span
                       aria-hidden="true"
                     >
-                      Bank reference key
+                      Bank reference ID
                     </span>
                     <span
                       class="screen-reader-text"
                     >
-                      Bank reference key
+                      Bank reference ID
                     </span>
                   </th>
                 </tr>
@@ -1009,12 +1009,12 @@ exports[`Deposits list renders correctly with multiple currencies 1`] = `
                     <span
                       aria-hidden="true"
                     >
-                      Bank reference key
+                      Bank reference ID
                     </span>
                     <span
                       class="screen-reader-text"
                     >
-                      Bank reference key
+                      Bank reference ID
                     </span>
                   </th>
                 </tr>

diff --git a/client/deposits/list/test/index.tsx b/client/deposits/list/test/index.tsx
@@ -290,7 +290,7 @@ describe( 'Deposits list', () => {
 				'Amount',
 				'Status',
 				'"Bank account"',
-				'"Bank reference key"',
+				'"Bank reference ID"',
 			];
 
 			const csvContent = mockDownloadCSVFile.mock.calls[ 0 ][ 1 ];

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' ),
 		},
 	},