Transactions List - indicate when a transaction is expected to be inc…

…luded in a future deposit (#7878)
Automattic · Dec 13, 2023 · a81f368 · a81f368
1 parent c0e6cf5
commit a81f368
Show file tree

Hide file tree

Showing 7 changed files with 449 additions and 40 deletions.
diff --git a/changelog/add-transaction-list-future-deposit b/changelog/add-transaction-list-future-deposit
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Transactions List - indicate when a transaction is expected to be included in a future deposit
diff --git a/client/transactions/list/deposit.tsx b/client/transactions/list/deposit.tsx
@@ -3,18 +3,27 @@
 /**
  * External dependencies
  */
-import { dateI18n } from '@wordpress/date';
+import React from 'react';
 import moment from 'moment';
+import { dateI18n } from '@wordpress/date';
+import { __ } from '@wordpress/i18n';
+import interpolateComponents from '@automattic/interpolate-components';
+import { ExternalLink } from '@wordpress/components';
 import { Link } from '@woocommerce/components';
-import React from 'react';
-import { getAdminUrl } from 'wcpay/utils';
+import InfoOutlineIcon from 'gridicons/dist/info-outline';
+
+/**
+ * Internal dependencies
+ */
+import { getAdminUrl } from 'utils';
+import { ClickTooltip } from 'components/tooltip';
 
 interface DepositProps {
 	depositId?: string;
 	dateAvailable?: string;
 }
 
-const Deposit = ( { depositId, dateAvailable }: DepositProps ): JSX.Element => {
+const Deposit: React.FC< DepositProps > = ( { depositId, dateAvailable } ) => {
 	if (
 		depositId &&
 		dateAvailable &&
@@ -35,7 +44,26 @@ const Deposit = ( { depositId, dateAvailable }: DepositProps ): JSX.Element => {
 		return <Link href={ depositUrl }>{ formattedDateAvailable }</Link>;
 	}
 
-	return <></>;
+	// Show an icon with a tooltip to communicate that the deposit will be available in the future.
+	return (
+		<>
+			{ __( 'Future deposit', 'woocommerce-payments' ) }
+			<ClickTooltip
+				content={ interpolateComponents( {
+					mixedString: __(
+						'This transaction will be included in an upcoming automated deposit. The date of the deposit will be displayed here once it is scheduled. {{learnMoreLink}}Learn more{{/learnMoreLink}}',
+						'woocommerce-payments'
+					),
+					components: {
+						learnMoreLink: (
+							<ExternalLink href="https://woo.com/document/woopayments/deposits/deposit-schedule/#pending-funds" />
+						),
+					},
+				} ) }
+				buttonIcon={ <InfoOutlineIcon /> }
+			/>
+		</>
+	);
 };
 
 export default Deposit;
diff --git a/client/transactions/list/index.tsx b/client/transactions/list/index.tsx
@@ -329,12 +329,6 @@ export const TransactionsList = (
 			txn.customer_email
 		);
 
-		const deposit = (
-			<Deposit
-				depositId={ txn.deposit_id ?? '' }
-				dateAvailable={ txn.available_on }
-			/>
-		);
 		const currency = txn.currency.toUpperCase();
 
 		const dataType = txn.metadata ? txn.metadata.charge_type : txn.type;
@@ -372,14 +366,21 @@ export const TransactionsList = (
 			};
 		};
 
-		const depositStatus = txn.deposit_status
-			? displayDepositStatus[ txn.deposit_status ]
-			: '';
-
 		const isFinancingType =
 			-1 !==
 			[ 'financing_payout', 'financing_paydown' ].indexOf( txn.type );
 
+		const deposit = ! isFinancingType && (
+			<Deposit
+				depositId={ txn.deposit_id }
+				dateAvailable={ txn.available_on }
+			/>
+		);
+
+		const depositStatus = txn.deposit_status
+			? displayDepositStatus[ txn.deposit_status ]
+			: '';
+
 		// Map transaction into table row.
 		const data = {
 			transaction_id: {

diff --git a/client/transactions/list/style.scss b/client/transactions/list/style.scss
@@ -46,6 +46,11 @@ $space-header-item: 12px;
 		top: 3px;
 		left: 8px;
 	}
+	.woocommerce-table__item {
+		.wcpay-tooltip__content-wrapper {
+			white-space: normal;
+		}
+	}
 }
 
 /**

diff --git a/client/transactions/list/test/__snapshots__/deposit.tsx.snap b/client/transactions/list/test/__snapshots__/deposit.tsx.snap
@@ -11,10 +11,101 @@ exports[`Deposit renders with date and deposit available 1`] = `
 </div>
 `;
 
-exports[`Deposit renders with date available but no deposit 1`] = `<div />`;
-
-exports[`Deposit renders with deposit but no date available 1`] = `<div />`;
+exports[`Deposit renders with date available but no deposit 1`] = `
+<div>
+  Future deposit
+  <button
+    class="wcpay-tooltip__content-wrapper wcpay-tooltip--click__content-wrapper"
+    type="button"
+  >
+    <div
+      class="wcpay-tooltip__content-wrapper"
+    >
+      <div
+        role="button"
+        tabindex="0"
+      >
+        <svg
+          class="gridicon gridicons-info-outline"
+          height="16"
+          viewBox="0 0 24 24"
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <g>
+            <path
+              d="M13 9h-2V7h2v2zm0 2h-2v6h2v-6zm-1-7c-4.411 0-8 3.589-8 8s3.589 8 8 8 8-3.589 8-8-3.589-8-8-8m0-2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2z"
+            />
+          </g>
+        </svg>
+      </div>
+    </div>
+  </button>
+</div>
+`;
 
-exports[`Deposit renders with estimated date and deposit available 1`] = `<div />`;
+exports[`Deposit renders with deposit but no date available 1`] = `
+<div>
+  Future deposit
+  <button
+    class="wcpay-tooltip__content-wrapper wcpay-tooltip--click__content-wrapper"
+    type="button"
+  >
+    <div
+      class="wcpay-tooltip__content-wrapper"
+    >
+      <div
+        role="button"
+        tabindex="0"
+      >
+        <svg
+          class="gridicon gridicons-info-outline"
+          height="16"
+          viewBox="0 0 24 24"
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <g>
+            <path
+              d="M13 9h-2V7h2v2zm0 2h-2v6h2v-6zm-1-7c-4.411 0-8 3.589-8 8s3.589 8 8 8 8-3.589 8-8-3.589-8-8-8m0-2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2z"
+            />
+          </g>
+        </svg>
+      </div>
+    </div>
+  </button>
+</div>
+`;
 
-exports[`Deposit renders with no date or deposit available 1`] = `<div />`;
+exports[`Deposit renders with no date or deposit available 1`] = `
+<div>
+  Future deposit
+  <button
+    class="wcpay-tooltip__content-wrapper wcpay-tooltip--click__content-wrapper"
+    type="button"
+  >
+    <div
+      class="wcpay-tooltip__content-wrapper"
+    >
+      <div
+        role="button"
+        tabindex="0"
+      >
+        <svg
+          class="gridicon gridicons-info-outline"
+          height="16"
+          viewBox="0 0 24 24"
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <g>
+            <path
+              d="M13 9h-2V7h2v2zm0 2h-2v6h2v-6zm-1-7c-4.411 0-8 3.589-8 8s3.589 8 8 8 8-3.589 8-8-3.589-8-8-8m0-2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2z"
+            />
+          </g>
+        </svg>
+      </div>
+    </div>
+  </button>
+</div>
+`;