Transaction breakdown component for the Payment Details page

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';
@@ -72,6 +73,10 @@ const PaymentDetails: React.FC< PaymentDetailsProps > = ( {
 				</ErrorBoundary>
 			) }
 
+			<ErrorBoundary>
+				<PaymentTransactionBreakdown paymentIntentId={ id } />
+			</ErrorBoundary>
+
 			<ErrorBoundary>
 				<PaymentDetailsPaymentMethod
 					charge={ charge }