Merge branch 'develop' into add-more-typescript-guidelines

changelog/add-7736-task-go-live

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Add a task on WooCommerce Home page to remind accounts operating in sandbox mode to set up live payments.

changelog/add-8615-account-management-track-events

@@ -0,0 +1,4 @@
+Significance: patch
+Type: add
+
+Adding a tracking event for external redirects to finish setup and start receiving deposits.

changelog/add-variable-analysis-phpcs-sniffs

@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+
+Add VariableAnalysis sniffs for better ergonomics around unused and undefined variables

changelog/feat-bnpl-announcement-apr

@@ -0,0 +1,4 @@
+Significance: patch
+Type: add
+
+feat: BNPL April announcement.

changelog/fix-8583-sync-discount-calculation-with-server-processing

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Sync discount brakedown with how server processes it

changelog/fix-connect-page-double-woopay-logo

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Remove extra WooPay icon on connect page

changelog/fix-infinite-recursive-call-for-price-decimal-separator-filter-2

@@ -0,0 +1,5 @@
+Significance: patch
+Type: fix
+Comment: This supplements a previous fix
+
+

changelog/fix-register-pmme-bnpl-enabled

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Defensive check for cart block PMME which hasn't yet been deployed.

changelog/refactor-payments-activity-tiles-ui

@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+
+Changes are not user facing, behind a feature flag. Refactor - tooltip component flattened in place, instead of calling it from a separate file.

changelog/update-8449-change-overview-sandbox-mode-notice

@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Reduce the visual footprint of the sandbox mode notice.

changelog/update-8580-discover-and-diners-logos

@@ -0,0 +1,4 @@
+Significance: patch
+Type: update
+
+Update Discover and Diners logos

changelog/update-proceed-to-checkout-tracking

@@ -0,0 +1,5 @@
+Significance: patch
+Type: dev
+Comment: Update "Proceed to checkout" tracking to take the skip_woopay cookie into account.
+
+

client/bnpl-announcement/index.js

@@ -0,0 +1,99 @@
+/**
+ * External dependencies
+ */
+import React, { useEffect, useState } from 'react';
+import ReactDOM from 'react-dom';
+import { __ } from '@wordpress/i18n';
+import { Button, ExternalLink } from '@wordpress/components';
+import { recordEvent } from 'tracks';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import ConfirmationModal from 'wcpay/components/confirmation-modal';
+import AfterpayBanner from 'assets/images/bnpl_announcement_afterpay.png?asset';
+import ClearpayBanner from 'assets/images/bnpl_announcement_clearpay.png?asset';
+
+const BannerIcon =
+	window.wcpayBnplAnnouncement?.accountCountry === 'GB'
+		? ClearpayBanner
+		: AfterpayBanner;
+
+const Dialog = () => {
+	useEffect( () => {
+		recordEvent( 'wcpay_bnpl_april15_feature_announcement_view' );
+	}, [] );
+
+	const [ isHidden, setIsHidden ] = useState( false );
+
+	if ( isHidden ) return null;
+
+	return (
+		<ConfirmationModal
+			aria={ { labelledby: 'wcpay-bnpl-announcement' } }
+			className="wcpay-bnpl-announcement"
+			onRequestClose={ () => setIsHidden( true ) }
+			actions={
+				<>
+					<ExternalLink
+						onClick={ () => {
+							recordEvent(
+								'wcpay_bnpl_april15_feature_announcement_learn_click'
+							);
+							setIsHidden( true );
+						} }
+						href="https://woo.com/document/woopayments/payment-methods/buy-now-pay-later/"
+					>
+						{ __( 'Learn more', 'woocommerce-payments' ) }
+					</ExternalLink>
+					<Button
+						variant="primary"
+						onClick={ () => {
+							recordEvent(
+								'wcpay_bnpl_april15_feature_announcement_enable_click'
+							);
+							setIsHidden( true );
+						} }
+					>
+						{ __( 'Get started', 'woocommerce-payments' ) }
+					</Button>
+				</>
+			}
+		>
+			<div className="wcpay-bnpl-announcement__payment-icons">
+				<img
+					src={ BannerIcon }
+					alt={ __(
+						'Buy now, pay later is here',
+						'woocommerce-payments'
+					) }
+				></img>
+			</div>
+			<h1 id="wcpay-bnpl-announcement">
+				{ __( 'Buy now, pay later is here', 'woocommerce-payments' ) }
+			</h1>
+			<p>
+				{ __(
+					// eslint-disable-next-line max-len
+					'Boost conversions and give your shoppers additional buying power, with buy now, pay later — now available in your WooPayments dashboard.*',
+					'woocommerce-payments'
+				) }
+			</p>
+			<p className="wcpay-bnpl-announcement__fine-print">
+				{ __(
+					'*Subject to country availability',
+					'woocommerce-payments'
+				) }
+			</p>
+		</ConfirmationModal>
+	);
+};
+
+const container = document.getElementById( 'wpwrap' );
+if ( container ) {
+	const dialogWrapper = document.createElement( 'div' );
+	container.appendChild( dialogWrapper );
+
+	ReactDOM.createRoot( dialogWrapper ).render( <Dialog /> );
+}

client/bnpl-announcement/style.scss

@@ -0,0 +1,68 @@
+.wcpay-bnpl-announcement {
+	&.wcpay-confirmation-modal.wcpay-confirmation-modal {
+		margin-top: auto;
+		height: auto;
+
+		@media screen and ( min-width: 600px ) {
+			max-width: 400px;
+		}
+
+		.components-modal__header {
+			padding: 0;
+
+			.components-button.has-icon {
+				position: absolute;
+				top: 18px;
+				left: auto;
+				right: 18px;
+			}
+		}
+
+		.components-modal__content {
+			padding: 0 20px 100px;
+			margin-top: 60px;
+
+			@media screen and ( min-width: 600px ) {
+				padding: 0 35px 24px;
+			}
+		}
+
+		.wcpay-confirmation-modal__separator {
+			opacity: 0;
+		}
+	}
+
+	&__payment-icons {
+		display: flex;
+		justify-content: center;
+		align-items: flex-start;
+		flex-wrap: wrap;
+		gap: 17px;
+		margin-bottom: 20px;
+
+		.payment-method__icon {
+			margin-right: 0;
+			max-height: 35px;
+			outline: none;
+
+			&[alt='Affirm'] {
+				max-height: 30px;
+			}
+		}
+	}
+
+	h1 {
+		text-align: left;
+		width: 100%;
+	}
+
+	p {
+		text-align: left;
+	}
+
+	.components-external-link {
+		padding: 6px 12px;
+		align-items: center;
+		display: flex;
+	}
+}

client/cart/blocks/index.js

@@ -2,11 +2,26 @@
  * Internal dependencies
  */
 import { renderBNPLCartMessaging } from './product-details';
+import { getUPEConfig } from 'wcpay/utils/checkout';
 
 const { registerPlugin } = window.wp.plugins;
 
-// Register BNPL site messaging on the cart block.
-registerPlugin( 'bnpl-site-messaging', {
-	render: renderBNPLCartMessaging,
-	scope: 'woocommerce-checkout',
-} );
+const paymentMethods = getUPEConfig( 'paymentMethodsConfig' );
+
+const BNPL_PAYMENT_METHODS = {
+	AFFIRM: 'affirm',
+	AFTERPAY: 'afterpay_clearpay',
+	KLARNA: 'klarna',
+};
+
+const bnplPaymentMethods = Object.values( BNPL_PAYMENT_METHODS ).filter(
+	( method ) => method in paymentMethods
+);
+
+if ( bnplPaymentMethods.length ) {
+	// Register BNPL site messaging on the cart block.
+	registerPlugin( 'bnpl-site-messaging', {
+		render: renderBNPLCartMessaging,
+		scope: 'woocommerce-checkout',
+	} );
+}

client/cart/index.js

@@ -4,12 +4,13 @@
 import { recordUserEvent } from 'tracks';
 import { getConfig } from 'wcpay/utils/checkout';
 import WooPayDirectCheckout from 'wcpay/checkout/woopay/direct-checkout/woopay-direct-checkout';
+import { shouldSkipWooPay } from 'wcpay/checkout/woopay/utils';
 
 const recordProceedToCheckoutButtonClick = () => {
 	recordUserEvent( 'wcpay_proceed_to_checkout_button_click', {
-		woopay_direct_checkout: Boolean(
-			getConfig( 'isWooPayDirectCheckoutEnabled' )
-		),
+		woopay_direct_checkout:
+			Boolean( getConfig( 'isWooPayDirectCheckoutEnabled' ) ) &&
+			! shouldSkipWooPay(),
 	} );
 };
 

client/components/account-status/account-tools/index.tsx

@@ -12,6 +12,7 @@ import strings from './strings';
 import './styles.scss';
 import ResetAccountModal from 'wcpay/overview/modal/reset-account';
 import { trackAccountReset } from 'wcpay/onboarding/tracking';
+import { recordEvent } from 'wcpay/tracks';
 
 interface Props {
 	accountLink: string;
@@ -43,14 +44,23 @@ export const AccountTools: React.FC< Props > = ( props: Props ) => {
 					{ ! detailsSubmitted && (
 						<Button
 							variant={ 'secondary' }
+							onClick={ () =>
+								recordEvent(
+									'wcpay_account_details_link_clicked',
+									{
+										source:
+											'account-tools__finish-setup-button',
+									}
+								)
+							}
 							href={ accountLink }
 							target={ '_blank' }
 						>
 							{ strings.finish }
 						</Button>
 					) }
 					<Button
-						variant={ 'tertiary' }
+						variant={ detailsSubmitted ? 'secondary' : 'tertiary' }
 						onClick={ () => setModalVisible( true ) }
 					>
 						{ strings.reset }

client/components/payments-activity/payments-activity-data.tsx

@@ -3,19 +3,15 @@
  */
 import * as React from 'react';
 import { __ } from '@wordpress/i18n';
+import HelpOutlineIcon from 'gridicons/dist/help-outline';
 
 /**
  * Internal dependencies.
  */
 import PaymentsDataTile from './payments-data-tile';
-import {
-	TotalPaymentsVolumeTooltip,
-	PaymentsDataChargeTooltip,
-	PaymentsDataFeesTooltip,
-} from './payments-data-highlights-tooltips';
-
-import './style.scss';
+import { ClickTooltip } from '../tooltip';
 import { getAdminUrl } from 'wcpay/utils';
+import './style.scss';
 
 const PaymentsActivityData: React.FC = () => {
 	return (
@@ -25,7 +21,20 @@ const PaymentsActivityData: React.FC = () => {
 				label={ __( 'Total payments volume', 'woocommerce-payments' ) }
 				currencyCode="EUR"
 				amount={ 156373 }
-				tooltip={ <TotalPaymentsVolumeTooltip /> }
+				tooltip={
+					<ClickTooltip
+						className="total-payments-volume__tooltip"
+						buttonIcon={ <HelpOutlineIcon /> }
+						buttonLabel={ __(
+							'Total payments volume tooltip',
+							'woocommerce-payments'
+						) }
+						content={ __(
+							'test total payments volume content',
+							'woocommerce-payments'
+						) }
+					/>
+				}
 				reportLink={ getAdminUrl( {
 					page: 'wc-admin',
 					path: '/payments/transactions',
@@ -37,7 +46,17 @@ const PaymentsActivityData: React.FC = () => {
 					label={ __( 'Charges', 'woocommerce-payments' ) }
 					currencyCode="EUR"
 					amount={ 314300 }
-					tooltip={ <PaymentsDataChargeTooltip /> }
+					tooltip={
+						<ClickTooltip
+							className="payments-data-highlights__charges__tooltip"
+							buttonIcon={ <HelpOutlineIcon /> }
+							buttonLabel={ __(
+								'Charges tooltip',
+								'woocommerce-payments'
+							) }
+							content={ __( 'test charge content' ) }
+						/>
+					}
 					reportLink={ getAdminUrl( {
 						page: 'wc-admin',
 						path: '/payments/transactions',
@@ -73,7 +92,20 @@ const PaymentsActivityData: React.FC = () => {
 					label={ __( 'Fees', 'woocommerce-payments' ) }
 					currencyCode="EUR"
 					amount={ 9429 }
-					tooltip={ <PaymentsDataFeesTooltip /> }
+					tooltip={
+						<ClickTooltip
+							className="payments-data-highlights__fees__tooltip"
+							buttonIcon={ <HelpOutlineIcon /> }
+							buttonLabel={ __(
+								'Fees tooltip',
+								'woocommerce-payments'
+							) }
+							content={ __(
+								'test fees content',
+								'woocommerce-payments'
+							) }
+						/>
+					}
 				/>
 			</div>
 		</div>