Merge branch 'develop' into fix/6527-improved-navigation-time

Automattic · Mar 15, 2024 · 84fa8e1 · 84fa8e1
2 parents 47d83bf + 9e98720
commit 84fa8e1
Show file tree

Hide file tree

Showing 27 changed files with 481 additions and 2,520 deletions.
diff --git a/assets/css/admin.css b/assets/css/admin.css
@@ -17,10 +17,6 @@
 #adminmenu
 	#toplevel_page_wc-admin-path--payments-connect
 	.menu-icon-generic
-	div.wp-menu-image::before,
-#adminmenu
-	#toplevel_page_wc-admin-path--payments-deposits
-	.menu-icon-generic
 	div.wp-menu-image::before {
 	font-family: 'WCPay' !important;
 	content: '\e900';
@@ -36,7 +32,8 @@
 	height: 1.25rem;
 	width: 32px;
 	width: 2rem;
-	background-size: contain;
+	background-size: cover;
+	background-position: center;
 	background-repeat: no-repeat;
 	border-radius: 2px;
 	outline: 1px solid rgba( 0, 0, 0, 0.25 );

diff --git a/assets/css/admin.rtl.css b/assets/css/admin.rtl.css
@@ -36,7 +36,8 @@
 	height: 1.25rem;
 	width: 32px;
 	width: 2rem;
-	background-size: contain;
+	background-size: cover;
+	background-position: center;
 	background-repeat: no-repeat;
 	border-radius: 2px;
 	outline: 1px solid rgba( 0, 0, 0, 0.25 );

diff --git a/changelog/add-6294-deposit-account-error-notice b/changelog/add-6294-deposit-account-error-notice
@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Added a notice to inform the merchant when the payout bank account is in errored state
diff --git a/changelog/add-8346-deposits-overview-docs b/changelog/add-8346-deposits-overview-docs
@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Updated deposits API documentation to add default_external_accounts element
diff --git a/changelog/chore-use-a8c-webpack-rtl-plugin b/changelog/chore-use-a8c-webpack-rtl-plugin
@@ -0,0 +1,5 @@
+Significance: patch
+Type: dev
+Comment: Only replacing a webpack plugin.
+
+
diff --git a/changelog/dev-4710-remove-deposit-status b/changelog/dev-4710-remove-deposit-status
@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+
+Removed deprecated deposit_status key from account status
diff --git a/changelog/fix-7183-pm-icon-styling-issue-in-transaction-details-page b/changelog/fix-7183-pm-icon-styling-issue-in-transaction-details-page
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fixed a 1px gap on the right side of some payment method icons in transaction details.
diff --git a/changelog/fix-8292-reducing-stock b/changelog/fix-8292-reducing-stock
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Preventing stock quantity from being reduced twice.
diff --git a/changelog/fix-adds-correct-options-to-bnpl-messaging-element b/changelog/fix-adds-correct-options-to-bnpl-messaging-element
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Uses WCPayAPI to initialise Stripe for BNPL payment element, includes necessary required parameters.
diff --git a/changelog/update-6224-clean-up-old-experiment-code b/changelog/update-6224-clean-up-old-experiment-code
@@ -0,0 +1,4 @@
+Significance: patch
+Type: update
+
+Clean up remaining unused code from a past experiment - `wcpay_empty_state_preview_mode`, done on Deposits list.
diff --git a/client/components/account-balances/test/index.test.tsx b/client/components/account-balances/test/index.test.tsx
@@ -23,6 +23,7 @@ const mockAccount: AccountOverview.Account = {
 		weekly_anchor: 'Monday',
 		monthly_anchor: 1,
 	},
+	default_external_accounts: [],
 };
 
 // Mock the wcpaySettings localized variables needed by these tests.

diff --git a/client/components/deposits-overview/deposit-notices.tsx b/client/components/deposits-overview/deposit-notices.tsx
@@ -6,6 +6,7 @@ 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';
 
 /**
  * Internal dependencies
@@ -211,3 +212,30 @@ export const NoFundsAvailableForDepositNotice: React.FC = () => (
 		} ) }
 	</InlineNotice>
 );
+
+/**
+ * Renders a notice informing the user that deposits are paused due to a recent deposit failure.
+ */
+export const DepositFailureNotice: React.FC< {
+	/**
+	 * The link to update the account details.
+	 */
+	updateAccountLink: string;
+} > = ( { updateAccountLink } ) => (
+	<InlineNotice
+		status="warning"
+		icon
+		className="deposit-failure-notice"
+		isDismissible={ false }
+	>
+		{ interpolateComponents( {
+			mixedString: __(
+				'Deposits are currently paused because a recent deposit failed. Please {{updateLink}}update your bank account details{{/updateLink}}.',
+				'woocommerce-payments'
+			),
+			components: {
+				updateLink: <ExternalLink href={ updateAccountLink } />,
+			},
+		} ) }
+	</InlineNotice>
+);
diff --git a/client/components/deposits-overview/index.tsx b/client/components/deposits-overview/index.tsx
@@ -29,6 +29,7 @@ import {
 	NewAccountWaitingPeriodNotice,
 	NoFundsAvailableForDepositNotice,
 	SuspendedDepositNotice,
+	DepositFailureNotice,
 } from './deposit-notices';
 import { hasAutomaticScheduledDeposits } from 'wcpay/deposits/utils';
 import useRecentDeposits from './hooks';
@@ -73,6 +74,12 @@ const DepositsOverview: React.FC = () => {
 	const hasScheduledDeposits = hasAutomaticScheduledDeposits(
 		account?.deposits_schedule?.interval
 	);
+	const hasErroredExternalAccount =
+		account?.default_external_accounts?.some(
+			( externalAccount ) =>
+				externalAccount.currency === selectedCurrency &&
+				externalAccount.status === 'errored'
+		) ?? false;
 
 	const navigateToDepositsHistory = () => {
 		recordEvent( 'wcpay_overview_deposits_view_history_click' );
@@ -145,7 +152,8 @@ const DepositsOverview: React.FC = () => {
 				) : (
 					<>
 						{ isDepositsUnrestricted &&
-							! isDepositAwaitingPendingFunds && (
+							! isDepositAwaitingPendingFunds &&
+							! hasErroredExternalAccount && (
 								<DepositTransitDaysNotice />
 							) }
 						{ ! hasCompletedWaitingPeriod && (
@@ -158,6 +166,13 @@ const DepositsOverview: React.FC = () => {
 						{ isNegativeBalanceDepositsPaused && (
 							<NegativeBalanceDepositsPausedNotice />
 						) }
+						{ hasErroredExternalAccount && (
+							<DepositFailureNotice
+								updateAccountLink={
+									wcpaySettings.accountStatus.accountLink
+								}
+							/>
+						) }
 						{ availableFunds > 0 &&
 							! isAboveMinimumDepositAmount && (
 								<DepositMinimumBalanceNotice

diff --git a/client/components/deposits-overview/test/__snapshots__/index.tsx.snap b/client/components/deposits-overview/test/__snapshots__/index.tsx.snap
@@ -1,5 +1,83 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`DepositFailureNotice Renders Renders DepositFailureNotice component correctly 1`] = `
+<div>
+  <div
+    class="wcpay-inline-notice wcpay-inline-warning-notice deposit-failure-notice components-notice is-warning"
+  >
+    <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-warning-notice__icon css-mw3lhz-View-Item-sx-Base em57xhy0"
+          data-wp-c16t="true"
+          data-wp-component="FlexItem"
+        >
+          <svg
+            class="gridicon gridicons-notice-outline"
+            height="24"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <g>
+              <path
+                d="M12 4c4.411 0 8 3.589 8 8s-3.589 8-8 8-8-3.589-8-8 3.589-8 8-8m0-2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm1 13h-2v2h2v-2zm-2-2h2l.5-6h-3l.5 6z"
+              />
+            </g>
+          </svg>
+        </div>
+        <div
+          class="components-flex-item wcpay-inline-notice__content wcpay-inline-warning-notice__content css-mw3lhz-View-Item-sx-Base em57xhy0"
+          data-wp-c16t="true"
+          data-wp-component="FlexItem"
+        >
+          Deposits are currently paused because a recent deposit failed. Please 
+          <a
+            class="components-external-link"
+            href="https://example.com"
+            rel="external noreferrer noopener"
+            target="_blank"
+          >
+            update your bank account details
+            <span
+              class="components-visually-hidden css-1mm2cvy-View em57xhy0"
+              data-wp-c16t="true"
+              data-wp-component="VisuallyHidden"
+              style="border: 0px; clip: rect(1px, 1px, 1px, 1px); clip-path: inset( 50% ); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; word-wrap: normal;"
+            >
+              (opens in a new tab)
+            </span>
+            <svg
+              aria-hidden="true"
+              class="components-external-link__icon css-16iaek2-StyledIcon etxm6pv0"
+              focusable="false"
+              height="24"
+              viewBox="0 0 24 24"
+              width="24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M18.2 17c0 .7-.6 1.2-1.2 1.2H7c-.7 0-1.2-.6-1.2-1.2V7c0-.7.6-1.2 1.2-1.2h3.2V4.2H7C5.5 4.2 4.2 5.5 4.2 7v10c0 1.5 1.2 2.8 2.8 2.8h10c1.5 0 2.8-1.2 2.8-2.8v-3.6h-1.5V17zM14.9 3v1.5h3.7l-6.4 6.4 1.1 1.1 6.4-6.4v3.7h1.5V3h-6.3z"
+              />
+            </svg>
+          </a>
+          .
+        </div>
+      </div>
+      <div
+        class="components-notice__actions"
+      />
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Deposits Overview information Component Renders 1`] = `
 <div>
   <div