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.
@@ -23,13 +23,17 @@ const mappings: Record< DepositStatus, ChipType > = {
 
 /**
  * Renders a deposits status chip.
- *
- * @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 } ) => {
+	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" /> );
-		expect( getByText( 'Paid' ) ).toBeTruthy();
+		const { getByText } = render(
+			<DepositStatusChip
+				deposit={ { type: 'deposit', status: 'paid' } }
+			/>
+		);
+		expect( getByText( 'Completed (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';
 
 /**
@@ -20,6 +19,7 @@ import { __ } from '@wordpress/i18n';
 import './style.scss';
 import DepositStatusChip from 'components/deposit-status-chip';
 import { getDepositDate } from 'deposits/utils';
+import { displayType } from 'deposits/strings';
 import { CachedDeposit } from 'wcpay/types/deposits';
 import { formatCurrency } from 'multi-currency/interface/functions';
 import { getDetailsURL } from 'wcpay/components/details-link';
@@ -51,7 +51,10 @@ const RecentDepositsList: React.FC< RecentDepositsProps > = ( {
 				</Link>
 			</FlexItem>
 			<FlexItem className={ `${ tableClass }__cell` }>
-				<DepositStatusChip status={ deposit.status } />
+				<DepositStatusChip deposit={ deposit } />
+			</FlexItem>
+			<FlexItem className={ `${ tableClass }__cell` }>
+				{ displayType[ deposit.type ] }
 			</FlexItem>
 			<FlexItem className={ `${ tableClass }__cell` }>
 				{ formatCurrency( deposit.amount, deposit.currency ) }
@@ -69,6 +72,9 @@ const RecentDepositsList: React.FC< RecentDepositsProps > = ( {
 					<FlexItem className={ `${ tableClass }__cell` }>
 						{ __( 'Status', 'woocommerce-payments' ) }
 					</FlexItem>
+					<FlexItem className={ `${ tableClass }__cell` }>
+						{ __( 'Type', 'woocommerce-payments' ) }
+					</FlexItem>
 					<FlexItem className={ `${ tableClass }__cell` }>
 						{ __( 'Amount', 'woocommerce-payments' ) }
 					</FlexItem>

client/components/deposits-overview/style.scss

@@ -66,6 +66,8 @@
 			font-size: 13px;
 			align-items: center;
 			padding: 16px 0;
+			width: 20%;
+			text-align: center;
 
 			svg {
 				fill: $gray-900;
@@ -75,11 +77,25 @@
 			}
 
 			&:first-child {
-				width: 35%;
+				width: 40%;
+				text-align: left;
 			}
 
 			&:last-child {
-				margin-left: auto;
+				text-align: right;
+			}
+
+			@media screen and ( max-width: 605px ) {
+				width: 25%;
+
+				&:first-child {
+					width: 25%;
+				}
+
+				// Hide icon on mobile to save horizontal space.
+				svg {
+					display: none;
+				}
 			}
 		}
 	}
@@ -101,9 +117,3 @@
 		}
 	}
 }
-
-@media screen and ( max-width: 605px ) {
-	.wcpay-deposits-overview__table__cell:first-child {
-		width: 45%;
-	}
-}

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

@@ -217,6 +217,13 @@ exports[`Deposits Overview information Component Renders 1`] = `
           >
             Status
           </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"
+          >
+            Type
+          </div>
           <div
             class="components-flex-item wcpay-deposits-overview__table__cell css-mw3lhz-View-Item-sx-Base em57xhy0"
             data-wp-c16t="true"
@@ -275,9 +282,16 @@ exports[`Deposits Overview information Component Renders 1`] = `
             <span
               class="chip chip-success"
             >
-              Paid
+              Completed (paid)
             </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"
+          >
+            Deposit
+          </div>
           <div
             class="components-flex-item wcpay-deposits-overview__table__cell css-mw3lhz-View-Item-sx-Base em57xhy0"
             data-wp-c16t="true"
@@ -326,6 +340,13 @@ exports[`Deposits Overview information Component Renders 1`] = `
               Pending
             </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"
+          >
+            Withdrawal
+          </div>
           <div
             class="components-flex-item wcpay-deposits-overview__table__cell css-mw3lhz-View-Item-sx-Base em57xhy0"
             data-wp-c16t="true"
@@ -334,6 +355,61 @@ 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"
+            >
+              Completed (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"
+          >
+            Withdrawal
+          </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.