Transaction breakdown component for the Transaction details page

changelog/add-1342-transaction-breakdown-block

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Transaction Fees breakdown component in the Payment details.

client/data/index.ts

@@ -25,3 +25,14 @@ export * from './payment-intents/hooks';
 export * from './authorizations/hooks';
 export * from './files/hooks';
 export * from './payment-activity/hooks';
+
+import { TimelineItem } from './timeline/types';
+import { ApiError } from '../types/errors';
+
+export declare function useTimeline(
+	transactionId: string
+): {
+	timeline: Array< TimelineItem >;
+	timelineError: ApiError | undefined;
+	isLoading: boolean;
+};

client/data/timeline/types.d.ts

@@ -0,0 +1,63 @@
+export interface TimelineFeeRate {
+	type: string;
+	additional_type?: string;
+	fee_id: string;
+	percentage_rate: number;
+	fixed_rate: number;
+	currency: string;
+}
+
+export interface TimelineFeeExchangeRate {
+	from_currency: string;
+	to_currency: string;
+	from_amount: number;
+	to_amount: number;
+	rate: number;
+}
+
+export interface TimelineFeeRates {
+	percentage: number;
+	fixed: number;
+	fixed_currency: string;
+	history?: Array< TimelineFeeRate >;
+	fee_exchange_rate?: TimelineFeeExchangeRate;
+}
+
+export interface TimelineTransactionDetails {
+	customer_currency: string;
+	customer_amount: number;
+	customer_amount_captured: number;
+	customer_fee: number;
+	store_currency: string;
+	store_amount: number;
+	store_amount_captured: number;
+	store_fee: number;
+}
+
+export interface TimelineDeposit {
+	id: string;
+	arrival_date: number;
+}
+
+export interface TimelineItem {
+	type: string;
+	datetime: number;
+	acquirer_reference_number?: string;
+	acquirer_reference_number_status?: string;
+	amount?: number;
+	amount_captured?: number;
+	amount_refunded?: number;
+	currency?: string;
+	deposit?: TimelineDeposit;
+	dispute_id?: string;
+	evidence_due_by?: number;
+	failure_reason?: string;
+	failure_transaction_id?: string;
+	fee?: number;
+	fee_rates?: TimelineFeeRates;
+	loan_id?: string;
+	reason?: string;
+	transaction_details?: TimelineTransactionDetails;
+	transaction_id?: string;
+	user_id?: number;
+}

client/payment-details/payment-details/index.tsx

@@ -14,6 +14,7 @@ import ErrorBoundary from '../../components/error-boundary';
 import PaymentDetailsSummary from '../summary';
 import PaymentDetailsTimeline from '../timeline';
 import PaymentDetailsPaymentMethod from '../payment-method';
+import PaymentTransactionBreakdown from '../transaction-breakdown';
 import { ApiError } from '../../types/errors';
 import { Charge } from '../../types/charges';
 import { PaymentIntent } from '../../types/payment-intents';
@@ -74,6 +75,10 @@ const PaymentDetails: React.FC< PaymentDetailsProps > = ( {
 				</ErrorBoundary>
 			) }
 
+			<ErrorBoundary>
+				<PaymentTransactionBreakdown paymentIntentId={ id } />
+			</ErrorBoundary>
+
 			<ErrorBoundary>
 				<PaymentDetailsPaymentMethod
 					charge={ charge }

client/payment-details/transaction-breakdown/fees-breakdown/index.tsx

@@ -0,0 +1,209 @@
+/** @format **/
+
+/**
+ * External dependencies
+ */
+import React from 'react';
+import { find } from 'lodash';
+
+/** Internal dependencies */
+import { formatCurrency } from 'multi-currency/interface/functions';
+import { formatFeeType } from '../utils';
+import { TimelineItem, TimelineFeeRate } from 'wcpay/data/timeline/types';
+import { Flex, FlexItem } from '@wordpress/components';
+
+const FeesBreakdown: React.FC< {
+	event: TimelineItem;
+} > = ( { event } ) => {
+	if ( ! event.fee_rates || ! event.transaction_details ) {
+		return null;
+	}
+
+	const storeCurrency = event.transaction_details.store_currency;
+	const feeExchangeRate = event.fee_rates.fee_exchange_rate?.rate || 1;
+	const discountFee = event.fee_rates.history
+		? find(
+				event.fee_rates.history,
+				( fee: TimelineFeeRate ) => fee.type === 'discount'
+		  )
+		: undefined;
+
+	let remainingPercentageDiscount = Math.abs(
+		discountFee?.percentage_rate || 0
+	);
+	let remainingFixedDiscount = Math.abs( discountFee?.fixed_rate || 0 );
+
+	const BreakdownFeeRate = ( {
+		percentage,
+		fixed,
+		currency,
+		displayFixedPart,
+	}: {
+		percentage: number;
+		fixed: number;
+		currency: string;
+		displayFixedPart?: boolean;
+	} ) => {
+		const formattedPercentage = percentage
+			? `${ Number.parseFloat( ( percentage * 100 ).toFixed( 2 ) ) }%`
+			: '0%';
+		const formattedFixed = formatCurrency( fixed, currency, storeCurrency );
+
+		return (
+			<>
+				{ formattedPercentage }
+				{ ( displayFixedPart || fixed > 0 ) && (
+					<>
+						{ ' + ' + formattedFixed }&nbsp;{ storeCurrency }
+					</>
+				) }
+			</>
+		);
+	};
+
+	const FeeRow = ( {
+		type,
+		additionalType,
+		percentage,
+		fixed,
+		currency,
+		isDiscounted,
+		displayFixedPart,
+	}: {
+		type: string;
+		additionalType?: string;
+		percentage: number;
+		fixed: number;
+		currency: string;
+		isDiscounted?: boolean;
+		displayFixedPart?: boolean;
+	} ) => {
+		const formattedFeeType = formatFeeType(
+			type,
+			additionalType,
+			isDiscounted
+		);
+		const feeType = type + ( additionalType ? `_${ additionalType }` : '' );
+
+		return (
+			<Flex
+				className={ `wcpay-transaction-breakdown__fee_info wcpay-transaction-breakdown__${ feeType }_fee_info` }
+				wrap={ true }
+				justify="space-between"
+				align="end"
+			>
+				<FlexItem className="wcpay-transaction-breakdown__fee_name">
+					{ formattedFeeType }
+				</FlexItem>
+				<FlexItem className="wcpay-transaction-breakdown__fee_rate">
+					<BreakdownFeeRate
+						percentage={ percentage }
+						fixed={ fixed }
+						currency={ currency }
+						displayFixedPart={ displayFixedPart }
+					/>
+				</FlexItem>
+			</Flex>
+		);
+	};
+
+	const fees = [];
+
+	if ( ! event.fee_rates.history ) {
+		fees.push(
+			<FeeRow
+				key="base"
+				type="base"
+				percentage={ event.fee_rates.percentage }
+				fixed={ event.fee_rates.fixed }
+				currency={ event.fee_rates.fixed_currency }
+			/>
+		);
+	} else {
+		event.fee_rates.history.map( ( fee: TimelineFeeRate ) => {
+			if ( 'discount' === fee.type ) {
+				/**
+				 * Skip discount fees, because we will subtract discount fees from the other fees in the fee breadown.
+				 */
+				return null;
+			}
+
+			let percentage = fee.percentage_rate;
+			let fixed = fee.fixed_rate;
+			let isDiscounted = false;
+			/**
+			 * If fee happens to be fully discounted, but had the fixed part
+			 * before discount, we will display the fixed part in the fee
+			 * breakdown.
+			 */
+			const displayFixedPart = fee.fixed_rate > 0;
+
+			/**
+			 * For each fee we keep subtracting discount's percentage and
+			 * fixed parts until the remaining dicount parts become 0.
+			 *
+			 * We do this because the fee history contains fees in the
+			 * specific order, i.e. base followed by additional fees, and we
+			 * want to apply the discount to the fees in the correct order.
+			 */
+			if ( remainingPercentageDiscount > 0 ) {
+				const percentageDiscount = Math.min(
+					remainingPercentageDiscount,
+					percentage
+				);
+				percentage = percentage - percentageDiscount;
+				remainingPercentageDiscount =
+					remainingPercentageDiscount - percentageDiscount;
+				isDiscounted = true;
+			}
+
+			if ( remainingFixedDiscount > 0 ) {
+				const fixedDiscount = Math.min( remainingFixedDiscount, fixed );
+				fixed = fixed - fixedDiscount;
+				remainingFixedDiscount = remainingFixedDiscount - fixedDiscount;
+				isDiscounted = true;
+			}
+
+			const feeType =
+				fee.type +
+				( fee.additional_type ? `_${ fee.additional_type }` : '' );
+
+			fees.push(
+				<FeeRow
+					key={ feeType }
+					type={ fee.type }
+					additionalType={ fee.additional_type }
+					percentage={ percentage }
+					fixed={ fixed }
+					currency={ fee.currency }
+					isDiscounted={ isDiscounted }
+					displayFixedPart={ displayFixedPart }
+				/>
+			);
+			return null;
+		} );
+	}
+
+	fees.push(
+		<FeeRow
+			key="total"
+			type="total"
+			percentage={ event.fee_rates.percentage }
+			fixed={ event.fee_rates.fixed / feeExchangeRate }
+			currency={ storeCurrency }
+			displayFixedPart={ true }
+		/>
+	);
+
+	return (
+		<div
+			className="wcpay-transaction-breakdown__fees-container"
+			role="table"
+			aria-label="Transaction fees breakdown"
+		>
+			{ fees }
+		</div>
+	);
+};
+
+export default FeesBreakdown;