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

* develop: Remove payout timing notice and update the help tooltip. (#9812) Fix styling on payment details page in mobile view. (#9790) Prevent browser error on dispute evidence submission (#9847) Update inquiry order notes to use inquiry specific content (#9828) Restrict Stripe Link to credit card payment method and improve cleanup (#9822)
Automattic · Dec 3, 2024 · 9314dc2 · 9314dc2
2 parents 85f5176 + 04f1e4c
commit 9314dc2
Show file tree

Hide file tree

Showing 26 changed files with 512 additions and 326 deletions.
diff --git a/changelog/fix-7230-payments-details-mobile-view b/changelog/fix-7230-payments-details-mobile-view
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix styling of transaction details page in mobile view.
diff --git a/changelog/fix-9612-inquiry-order-note b/changelog/fix-9612-inquiry-order-note
@@ -0,0 +1,4 @@
+Significance: minor
+Type: fix
+
+Order notes for inquiries have clearer content.
diff --git a/changelog/fix-9830-browser-error-on-dispute-submission b/changelog/fix-9830-browser-error-on-dispute-submission
@@ -0,0 +1,4 @@
+Significance: minor
+Type: fix
+
+Browser error no longer shows after dispute evidence submission
diff --git a/changelog/fix-stripe-link-button b/changelog/fix-stripe-link-button
@@ -0,0 +1,4 @@
+Significance: minor
+Type: fix
+
+Restrict Stripe Link to credit card payment method and improve cleanup.
diff --git a/changelog/update-7900-payout-notice b/changelog/update-7900-payout-notice
@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Remove payout timing notice and update the help tooltil on Payments Overview page.
diff --git a/client/checkout/blocks/payment-processor.js b/client/checkout/blocks/payment-processor.js
@@ -28,7 +28,10 @@ import { useCustomerData } from './utils';
 import enableStripeLinkPaymentMethod from 'wcpay/checkout/stripe-link';
 import { getUPEConfig } from 'wcpay/utils/checkout';
 import { validateElements } from 'wcpay/checkout/classic/payment-processing';
-import { PAYMENT_METHOD_ERROR } from 'wcpay/checkout/constants';
+import {
+	PAYMENT_METHOD_ERROR,
+	PAYMENT_METHOD_NAME_CARD,
+} from 'wcpay/checkout/constants';
 
 const getBillingDetails = ( billingData ) => {
 	return {
@@ -70,6 +73,7 @@ const PaymentProcessor = ( {
 	const stripe = useStripe();
 	const elements = useElements();
 	const hasLoadErrorRef = useRef( false );
+	const linkCleanupRef = useRef( null );
 
 	const paymentMethodsConfig = getUPEConfig( 'paymentMethodsConfig' );
 	const isTestMode = getUPEConfig( 'testMode' );
@@ -81,7 +85,10 @@ const PaymentProcessor = ( {
 	} = useCustomerData();
 
 	useEffect( () => {
-		if ( isLinkEnabled( paymentMethodsConfig ) ) {
+		if (
+			activePaymentMethod === PAYMENT_METHOD_NAME_CARD &&
+			isLinkEnabled( paymentMethodsConfig )
+		) {
 			enableStripeLinkPaymentMethod( {
 				api: api,
 				elements: elements,
@@ -123,11 +130,22 @@ const PaymentProcessor = ( {
 					} );
 				},
 				onButtonShow: blocksShowLinkButtonHandler,
+			} ).then( ( cleanup ) => {
+				linkCleanupRef.current = cleanup;
 			} );
+
+			// Cleanup the Link button when the component unmounts
+			return () => {
+				if ( linkCleanupRef.current ) {
+					linkCleanupRef.current();
+					linkCleanupRef.current = null;
+				}
+			};
 		}
 	}, [
 		api,
 		elements,
+		activePaymentMethod,
 		paymentMethodsConfig,
 		setBillingAddress,
 		setShippingAddress,

diff --git a/client/checkout/stripe-link/index.js b/client/checkout/stripe-link/index.js
@@ -4,6 +4,13 @@
 import { dispatchChangeEventFor } from '../utils/upe';
 
 export const switchToNewPaymentTokenElement = () => {
+	// Switch to card payment method before enabling new payment token element
+	document
+		.querySelector(
+			'input[name="payment_method"][value="woocommerce_payments"]'
+		)
+		?.click();
+
 	const newPaymentTokenElement = document.getElementById(
 		'wc-woocommerce_payments-payment-token-new'
 	);
@@ -44,16 +51,17 @@ const enableStripeLinkPaymentMethod = async ( options ) => {
 	const emailField = document.getElementById( options.emailId );
 
 	if ( ! emailField ) {
-		return;
+		return Promise.resolve( () => null );
 	}
 
 	const stripe = await options.api.getStripe();
 	// https://stripe.com/docs/payments/link/autofill-modal
 	const linkAutofill = stripe.linkAutofillModal( options.elements );
 
-	emailField.addEventListener( 'keyup', ( event ) => {
+	const handleKeyup = ( event ) => {
 		linkAutofill.launch( { email: event.target.value } );
-	} );
+	};
+	emailField.addEventListener( 'keyup', handleKeyup );
 
 	options.onButtonShow( linkAutofill );
 
@@ -65,6 +73,11 @@ const enableStripeLinkPaymentMethod = async ( options ) => {
 		);
 		switchToNewPaymentTokenElement();
 	} );
+
+	return () => {
+		emailField.removeEventListener( 'keyup', handleKeyup );
+		removeLinkButton();
+	};
 };
 
 export default enableStripeLinkPaymentMethod;
diff --git a/client/checkout/stripe-link/test/index.test.js b/client/checkout/stripe-link/test/index.test.js
@@ -85,6 +85,35 @@ describe( 'Stripe Link elements behavior', () => {
 		expect( handleButtonShow ).toHaveBeenCalled();
 	} );
 
+	test( 'Should properly clean up when cleanup function is called', async () => {
+		createStripeLinkElements();
+		const billingEmailInput = document.getElementById( 'billing_email' );
+		const removeEventListenerSpy = jest.spyOn(
+			billingEmailInput,
+			'removeEventListener'
+		);
+		const removeLinkButtonSpy = jest.spyOn(
+			document.querySelector( '.wcpay-stripelink-modal-trigger' ),
+			'remove'
+		);
+
+		const cleanup = await enableStripeLinkPaymentMethod( {
+			api: WCPayAPI(),
+			emailId: 'billing_email',
+			onAutofill: () => null,
+			onButtonShow: () => null,
+		} );
+
+		// Call the cleanup function
+		cleanup();
+
+		expect( removeEventListenerSpy ).toHaveBeenCalledWith(
+			'keyup',
+			expect.any( Function )
+		);
+		expect( removeLinkButtonSpy ).toHaveBeenCalled();
+	} );
+
 	function createStripeLinkElements() {
 		// Create the input field
 		const billingEmailInput = document.createElement( 'input' );

diff --git a/client/components/deposits-overview/deposit-notices.tsx b/client/components/deposits-overview/deposit-notices.tsx
@@ -5,7 +5,6 @@ import React from 'react';
 import { __, sprintf } from '@wordpress/i18n';
 import interpolateComponents from '@automattic/interpolate-components';
 import { Link } from '@woocommerce/components';
-import { tip } from '@wordpress/icons';
 import { ExternalLink } from '@wordpress/components';
 import { addQueryArgs } from '@wordpress/url';
 
@@ -104,22 +103,6 @@ export const NewAccountWaitingPeriodNotice: React.FC = () => (
 	</InlineNotice>
 );
 
-/**
- * Renders a notice informing the user of the number of days it may take for deposits to appear in their bank account.
- */
-export const DepositTransitDaysNotice: React.FC = () => (
-	<InlineNotice
-		icon={ tip }
-		isDismissible={ false }
-		className="wcpay-deposit-transit-days-notice"
-	>
-		{ __(
-			'It may take 1-3 business days for payouts to reach your bank account.',
-			'woocommerce-payments'
-		) }
-	</InlineNotice>
-);
-
 /**
  * Renders a notice informing the user that their deposits may be paused due to a negative balance.
  */

diff --git a/client/components/deposits-overview/deposit-schedule.tsx b/client/components/deposits-overview/deposit-schedule.tsx
@@ -118,72 +118,24 @@ const DepositSchedule: React.FC< DepositScheduleProps > = ( {
 
 	const nextDepositHelpContent = (
 		<>
-			{ __(
-				'Payouts are initiated based on the following criteria:',
-				'woocommerce-payments'
-			) }
-			<ul>
-				<li>
-					{ interpolateComponents( {
-						mixedString: __(
-							'The {{link}}pending period{{/link}} in your country',
-							'woocommerce-payments'
-						),
-						components: {
-							link: (
-								// eslint-disable-next-line jsx-a11y/anchor-has-content
-								<a
-									rel="external noopener noreferrer"
-									target="_blank"
-									href={
-										'https://woocommerce.com/document/woopayments/payouts/payout-schedule/#pending-period-chart'
-									}
-								/>
-							),
-						},
-					} ) }
-				</li>
-				<li>
-					{ interpolateComponents( {
-						mixedString: __(
-							"Your account's {{link}}available funds{{/link}}",
-							'woocommerce-payments'
-						),
-						components: {
-							link: (
-								// eslint-disable-next-line jsx-a11y/anchor-has-content
-								<a
-									rel="external noopener noreferrer"
-									target="_blank"
-									href={
-										'https://woocommerce.com/document/woopayments/payouts/payout-schedule/#available-funds'
-									}
-								/>
-							),
-						},
-					} ) }
-				</li>
-				<li>
-					{ interpolateComponents( {
-						mixedString: __(
-							'Your {{link}}payout schedule{{/link}} settings',
-							'woocommerce-payments'
-						),
-						components: {
-							link: (
-								// eslint-disable-next-line jsx-a11y/anchor-has-content
-								<a
-									rel="external noopener noreferrer"
-									target="_blank"
-									href={
-										'https://woocommerce.com/document/woopayments/payouts/change-payout-schedule/'
-									}
-								/>
-							),
-						},
-					} ) }
-				</li>
-			</ul>
+			{ interpolateComponents( {
+				mixedString: __(
+					'The timing and amount of your payouts may vary due to several factors. Check out our {{link}}payout schedule guide{{/link}} for details.',
+					'woocommerce-payments'
+				),
+				components: {
+					link: (
+						// eslint-disable-next-line jsx-a11y/anchor-has-content
+						<a
+							rel="external noopener noreferrer"
+							target="_blank"
+							href={
+								'https://woocommerce.com/document/woopayments/payouts/payout-schedule/'
+							}
+						/>
+					),
+				},
+			} ) }
 		</>
 	);
 

diff --git a/client/components/deposits-overview/index.tsx b/client/components/deposits-overview/index.tsx
@@ -24,7 +24,6 @@ import RecentDepositsList from './recent-deposits-list';
 import DepositSchedule from './deposit-schedule';
 import {
 	DepositMinimumBalanceNotice,
-	DepositTransitDaysNotice,
 	NegativeBalanceDepositsPausedNotice,
 	NewAccountWaitingPeriodNotice,
 	NoFundsAvailableForDepositNotice,
@@ -149,11 +148,6 @@ const DepositsOverview: React.FC = () => {
 					<SuspendedDepositNotice />
 				) : (
 					<>
-						{ isDepositsUnrestricted &&
-							! isDepositAwaitingPendingFunds &&
-							! hasErroredExternalAccount && (
-								<DepositTransitDaysNotice />
-							) }
 						{ ! hasCompletedWaitingPeriod && (
 							<NewAccountWaitingPeriodNotice />
 						) }

diff --git a/client/components/deposits-overview/test/__snapshots__/index.tsx.snap b/client/components/deposits-overview/test/__snapshots__/index.tsx.snap
@@ -138,50 +138,7 @@ exports[`Deposits Overview information Component Renders 1`] = `
         class="components-card__body components-card-body wcpay-deposits-overview__notices__container css-1nwhnu3-View-Body-borderRadius-medium em57xhy0"
         data-wp-c16t="true"
         data-wp-component="CardBody"
-      >
-        <div
-          class="wcpay-inline-notice wcpay-inline-undefined-notice wcpay-deposit-transit-days-notice components-notice is-info"
-        >
-          <div
-            class="components-notice__content"
-          >
-            <div
-              class="components-flex css-bmzg3m-View-Flex-sx-Base-sx-Items-ItemsRow em57xhy0"
-              data-wp-c16t="true"
-              data-wp-component="Flex"
-            >
-              <div
-                class="components-flex-item wcpay-inline-notice__icon wcpay-inline-undefined-notice__icon css-mw3lhz-View-Item-sx-Base em57xhy0"
-                data-wp-c16t="true"
-                data-wp-component="FlexItem"
-              >
-                <svg
-                  aria-hidden="true"
-                  focusable="false"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  width="24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M12 15.8c-3.7 0-6.8-3-6.8-6.8s3-6.8 6.8-6.8c3.7 0 6.8 3 6.8 6.8s-3.1 6.8-6.8 6.8zm0-12C9.1 3.8 6.8 6.1 6.8 9s2.4 5.2 5.2 5.2c2.9 0 5.2-2.4 5.2-5.2S14.9 3.8 12 3.8zM8 17.5h8V19H8zM10 20.5h4V22h-4z"
-                  />
-                </svg>
-              </div>
-              <div
-                class="components-flex-item wcpay-inline-notice__content wcpay-inline-undefined-notice__content css-mw3lhz-View-Item-sx-Base em57xhy0"
-                data-wp-c16t="true"
-                data-wp-component="FlexItem"
-              >
-                It may take 1-3 business days for payouts to reach your bank account.
-              </div>
-            </div>
-            <div
-              class="components-notice__actions"
-            />
-          </div>
-        </div>
-      </div>
+      />
       <div
         class="components-card__body components-card-body wcpay-deposits-overview__heading css-1nwhnu3-View-Body-borderRadius-medium em57xhy0"
         data-wp-c16t="true"

diff --git a/client/components/dispute-status-chip/index.tsx b/client/components/dispute-status-chip/index.tsx
@@ -23,11 +23,13 @@ interface Props {
 	status: DisputeStatus | string;
 	dueBy?: CachedDispute[ 'due_by' ] | EvidenceDetails[ 'due_by' ];
 	prefixDisputeType?: boolean;
+	className?: string;
 }
 const DisputeStatusChip: React.FC< Props > = ( {
 	status,
 	dueBy,
 	prefixDisputeType,
+	className,
 } ) => {
 	const mapping = displayStatus[ status ] || {};
 	let message = mapping.message || formatStringValue( status );
@@ -50,7 +52,7 @@ const DisputeStatusChip: React.FC< Props > = ( {
 		type = 'alert';
 	}
 
-	return <Chip message={ message } type={ type } />;
+	return <Chip className={ className } message={ message } type={ type } />;
 };
 
 export default DisputeStatusChip;
diff --git a/client/components/payment-status-chip/index.js b/client/components/payment-status-chip/index.js
@@ -11,11 +11,11 @@ import displayStatus from './mappings';
 import Chip from '../chip';
 import { formatStringValue } from 'utils';
 
-const PaymentStatusChip = ( { status } ) => {
+const PaymentStatusChip = ( { status, className } ) => {
 	const mapping = displayStatus[ status ] || {};
 	const message = mapping.message || formatStringValue( status );
 	const type = mapping.type || 'light';
-	return <Chip message={ message } type={ type } />;
+	return <Chip className={ className } message={ message } type={ type } />;
 };
 
 export default PaymentStatusChip;