Use 'Withdrawal' and 'Deducted' labels when referring to withdrawal deposits, to more accurately communicate the type of transaction that has occurred

changelog/fix-7802-deposit-withdrawal-text-changes

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Use 'Withdrawal' and 'Deducted' labels when referring to withdrawal deposits, to more accurately communicate the type of transaction that has occurred

client/components/deposit-status-chip/index.tsx

@@ -6,9 +6,9 @@ import * as React from 'react';
 /**
  * Internal dependencies
  */
-import { displayStatus } from 'deposits/strings';
 import Chip, { ChipType } from 'components/chip';
-import type { DepositStatus } from 'wcpay/types/deposits';
+import type { CachedDeposit, DepositStatus } from 'wcpay/types/deposits';
+import { depositStatusLabels } from 'wcpay/deposits/strings';
 
 /**
  * Maps a DepositStatus to a ChipType.
@@ -27,9 +27,15 @@ const mappings: Record< DepositStatus, ChipType > = {
  * @return {JSX.Element} Deposit status chip.
  */
 const DepositStatusChip: React.FC< {
-	status: DepositStatus;
-} > = ( { status } ): JSX.Element => (
-	<Chip type={ mappings[ status ] } message={ displayStatus[ status ] } />
-);
+	deposit: Pick< CachedDeposit, 'status' | 'type' >;
+} > = ( { deposit } ): JSX.Element => {
+	let message = depositStatusLabels[ deposit.status ];
+
+	// Withdrawals are displayed as 'Deducted' instead of 'Paid'.
+	if ( deposit.type === 'withdrawal' && deposit.status === 'paid' ) {
+		message = depositStatusLabels.deducted;
+	}
+	return <Chip type={ mappings[ deposit.status ] } message={ message } />;
+};
 
 export default DepositStatusChip;

client/components/deposit-status-chip/test/index.test.tsx

@@ -11,18 +11,28 @@ import DepositStatusChip from '..';
 
 describe( 'Deposits status chip renders', () => {
 	test( 'Renders "Pending" status chip.', () => {
-		const { getByText } = render( <DepositStatusChip status="pending" /> );
+		const { getByText } = render(
+			<DepositStatusChip
+				deposit={ { type: 'deposit', status: 'pending' } }
+			/>
+		);
 		expect( getByText( 'Pending' ) ).toBeTruthy();
 	} );
 
 	test( 'Renders "Paid" status chip.', () => {
-		const { getByText } = render( <DepositStatusChip status="paid" /> );
+		const { getByText } = render(
+			<DepositStatusChip
+				deposit={ { type: 'deposit', status: 'paid' } }
+			/>
+		);
 		expect( getByText( 'Paid' ) ).toBeTruthy();
 	} );
 
 	test( 'Renders "In transit" status chip.', () => {
 		const { getByText } = render(
-			<DepositStatusChip status="in_transit" />
+			<DepositStatusChip
+				deposit={ { type: 'deposit', status: 'in_transit' } }
+			/>
 		);
 		expect( getByText( 'In transit' ) ).toBeTruthy();
 	} );

client/components/deposits-overview/recent-deposits-list.tsx

@@ -11,7 +11,6 @@ import {
 } from '@wordpress/components';
 import { calendar } from '@wordpress/icons';
 import { Link } from '@woocommerce/components';
-import { Fragment } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -51,7 +50,7 @@ const RecentDepositsList: React.FC< RecentDepositsProps > = ( {
 				</Link>
 			</FlexItem>
 			<FlexItem className={ `${ tableClass }__cell` }>
-				<DepositStatusChip status={ deposit.status } />
+				<DepositStatusChip deposit={ deposit } />
 			</FlexItem>
 			<FlexItem className={ `${ tableClass }__cell` }>
 				{ formatCurrency( deposit.amount, deposit.currency ) }

client/components/deposits-overview/test/__snapshots__/index.tsx.snap

@@ -334,6 +334,54 @@ exports[`Deposits Overview information Component Renders 1`] = `
             $30.00
           </div>
         </div>
+        <div
+          class="components-flex wcpay-deposits-overview__table__row css-1giw1wa-View-Flex-sx-Base-sx-Items-ItemsRow em57xhy0"
+          data-wp-c16t="true"
+          data-wp-component="Flex"
+        >
+          <div
+            class="components-flex-item wcpay-deposits-overview__table__cell css-mw3lhz-View-Item-sx-Base em57xhy0"
+            data-wp-c16t="true"
+            data-wp-component="FlexItem"
+          >
+            <svg
+              aria-hidden="true"
+              focusable="false"
+              height="17"
+              viewBox="0 0 24 24"
+              width="17"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm.5 16c0 .3-.2.5-.5.5H5c-.3 0-.5-.2-.5-.5V7h15v12zM9 10H7v2h2v-2zm0 4H7v2h2v-2zm4-4h-2v2h2v-2zm4 0h-2v2h2v-2zm-4 4h-2v2h2v-2zm4 0h-2v2h2v-2z"
+              />
+            </svg>
+            <a
+              data-link-type="wc-admin"
+              href="admin.php?page=wc-admin&path=%2Fpayments%2Fdeposits%2Fdetails&id=po_mock3"
+            >
+              January 4, 2020
+            </a>
+          </div>
+          <div
+            class="components-flex-item wcpay-deposits-overview__table__cell css-mw3lhz-View-Item-sx-Base em57xhy0"
+            data-wp-c16t="true"
+            data-wp-component="FlexItem"
+          >
+            <span
+              class="chip chip-success"
+            >
+              Deducted
+            </span>
+          </div>
+          <div
+            class="components-flex-item wcpay-deposits-overview__table__cell css-mw3lhz-View-Item-sx-Base em57xhy0"
+            data-wp-c16t="true"
+            data-wp-component="FlexItem"
+          >
+            $40.00
+          </div>
+        </div>
       </div>
       <div
         class="components-flex components-card__footer components-card-footer wcpay-deposits-overview__footer css-p1v47q-View-Flex-sx-Base-sx-Items-ItemsRow-Footer-borderRadius-borderColor-medium em57xhy0"

client/components/deposits-overview/test/index.tsx

@@ -90,6 +90,15 @@ const mockDeposits = [
 		bankAccount: 'MOCK BANK •••• 1234 (USD)',
 		currency: 'USD',
 	} as CachedDeposit,
+	{
+		id: 'po_mock3',
+		date: '2020-01-04 17:46:02',
+		type: 'withdrawal',
+		amount: 4000,
+		status: 'paid',
+		bankAccount: 'MOCK BANK •••• 1234 (USD)',
+		currency: 'USD',
+	} as CachedDeposit,
 ];
 
 // Creates a mock Overview object for the given currency code and balance amounts.

client/deposits/details/index.tsx

@@ -35,15 +35,32 @@ import ErrorBoundary from 'components/error-boundary';
 import { TestModeNotice } from 'components/test-mode-notice';
 import InlineNotice from 'components/inline-notice';
 import { formatCurrency, formatExplicitCurrency } from 'utils/currency';
-import { displayStatus } from '../strings';
+import { depositStatusLabels } from '../strings';
 import './style.scss';
 
 /**
  * Renders the deposit status indicator UI, re-purposing the OrderStatus component from @woocommerce/components.
  */
-const Status: React.FC< { status: string } > = ( { status } ) => (
-	<OrderStatus order={ { status } } orderStatusMap={ displayStatus } />
-);
+const DepositStatusIndicator: React.FC< {
+	deposit: Pick< CachedDeposit, 'status' | 'type' >;
+} > = ( { deposit } ) => {
+	let displayStatusMap = depositStatusLabels;
+
+	// Withdrawals are displayed as 'Deducted' instead of 'Paid' when the status is 'paid'.
+	if ( deposit.type === 'withdrawal' ) {
+		displayStatusMap = {
+			...displayStatusMap,
+			paid: displayStatusMap.deducted,
+		};
+	}
+
+	return (
+		<OrderStatus
+			order={ { status: deposit.status } }
+			orderStatusMap={ displayStatusMap }
+		/>
+	);
+};
 
 interface SummaryItemProps {
 	label: string;
@@ -99,9 +116,15 @@ export const DepositOverview: React.FC< DepositOverviewProps > = ( {
 		);
 	}
 
-	const depositDateLabel = deposit.automatic
-		? __( 'Deposit date', 'woocommerce-payments' )
-		: __( 'Instant deposit date', 'woocommerce-payments' );
+	const isWithdrawal = deposit.type === 'withdrawal';
+
+	let depositDateLabel = __( 'Deposit date', 'woocommerce-payments' );
+	if ( ! deposit.automatic ) {
+		depositDateLabel = __( 'Instant deposit date', 'woocommerce-payments' );
+	}
+	if ( isWithdrawal ) {
+		depositDateLabel = __( 'Withdrawal date', 'woocommerce-payments' );
+	}
 
 	const depositDateItem = (
 		<SummaryItem
@@ -114,7 +137,7 @@ export const DepositOverview: React.FC< DepositOverviewProps > = ( {
 					true // TODO Change call to gmdateI18n and remove this deprecated param once WP 5.4 support ends.
 				)
 			}
-			value={ <Status status={ deposit.status } /> }
+			value={ <DepositStatusIndicator deposit={ deposit } /> }
 			detail={ deposit.bankAccount }
 		/>
 	);
@@ -135,16 +158,30 @@ export const DepositOverview: React.FC< DepositOverviewProps > = ( {
 				</Card>
 			) : (
 				<SummaryList
-					label={ __( 'Deposit overview', 'woocommerce-payments' ) }
+					label={
+						isWithdrawal
+							? __(
+									'Withdrawal overview',
+									'woocommerce-payments'
+							  )
+							: __( 'Deposit overview', 'woocommerce-payments' )
+					}
 				>
 					{ () => [
 						depositDateItem,
 						<SummaryItem
 							key="depositAmount"
-							label={ __(
-								'Deposit amount',
-								'woocommerce-payments'
-							) }
+							label={
+								isWithdrawal
+									? __(
+											'Withdrawal amount',
+											'woocommerce-payments'
+									  )
+									: __(
+											'Deposit amount',
+											'woocommerce-payments'
+									  )
+							}
 							value={ formatExplicitCurrency(
 								deposit.amount + deposit.fee,
 								deposit.currency
@@ -167,10 +204,17 @@ export const DepositOverview: React.FC< DepositOverviewProps > = ( {
 						/>,
 						<SummaryItem
 							key="netDepositAmount"
-							label={ __(
-								'Net deposit amount',
-								'woocommerce-payments'
-							) }
+							label={
+								isWithdrawal
+									? __(
+											'Net withdrawal amount',
+											'woocommerce-payments'
+									  )
+									: __(
+											'Net deposit amount',
+											'woocommerce-payments'
+									  )
+							}
 							value={ formatExplicitCurrency(
 								deposit.amount,
 								deposit.currency
@@ -238,7 +282,10 @@ export const DepositDetails: React.FC< DepositDetailsProps > = ( {
 							</CardBody>
 						</Card>
 					) : (
-						<TransactionsList depositId={ depositId } />
+						<TransactionsList
+							depositId={ depositId }
+							depositType={ deposit.type }
+						/>
 					) }
 				</ErrorBoundary>
 			) }

client/deposits/details/test/__snapshots__/index.tsx.snap

@@ -72,6 +72,78 @@ exports[`Deposit overview renders automatic deposit correctly 1`] = `
 </div>
 `;
 
+exports[`Deposit overview renders automatic withdrawal correctly 1`] = `
+<div>
+  <div
+    class="wcpay-deposit-overview"
+  >
+    <div
+      class="components-surface components-card wcpay-deposit-automatic css-nsno0f-View-Surface-getBorders-primary-Card-rounded em57xhy0"
+      data-wp-c16t="true"
+      data-wp-component="Card"
+    >
+      <div
+        class="css-mgwsf4-View-Content em57xhy0"
+      >
+        <ul>
+          <li
+            class="woocommerce-summary__item-container"
+          >
+            <div
+              class="woocommerce-summary__item"
+            >
+              <div
+                class="woocommerce-summary__item-label"
+              >
+                Withdrawal date: Jan 2, 2020
+              </div>
+              <div
+                class="woocommerce-summary__item-data"
+              >
+                <div
+                  class="woocommerce-summary__item-value"
+                >
+                  <div
+                    class="woocommerce-order-status"
+                  >
+                    <span
+                      class="woocommerce-order-status__indicator is-paid"
+                    />
+                    Deducted
+                  </div>
+                </div>
+              </div>
+              <div
+                class="wcpay-summary__item-detail"
+              >
+                MOCK BANK •••• 1234 (USD)
+              </div>
+            </div>
+          </li>
+          <li
+            class="wcpay-deposit-amount"
+          >
+            -$20.00
+          </li>
+        </ul>
+      </div>
+      <div
+        aria-hidden="true"
+        class="components-elevation css-91yjwm-View-Elevation-sx-Base-elevationClassName em57xhy0"
+        data-wp-c16t="true"
+        data-wp-component="Elevation"
+      />
+      <div
+        aria-hidden="true"
+        class="components-elevation css-91yjwm-View-Elevation-sx-Base-elevationClassName em57xhy0"
+        data-wp-c16t="true"
+        data-wp-component="Elevation"
+      />
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Deposit overview renders instant deposit correctly 1`] = `
 <div>
   <div