give / src / Subscriptions / resources / admin / components / SubscriptionSyncList / Details.tsx

Details.tsx in GiveWP – Donation Plugin and Fundraising Platform 4.18.0, at src/Subscriptions/resources/admin/components/SubscriptionSyncList/Details.tsx

157 lines 5.3 KB

Raw Download Zip

1	import { __ } from "@wordpress/i18n";
2	import { createInterpolateElement } from '@wordpress/element';
3	import classnames from 'classnames';
4	import { CheckCircleIcon, HandHeartIcon, XCircleIcon } from "./icons";
5	import styles from "./styles.module.scss";
6
7	/**
8	* Utility function to capitalize the first letter of a string
9	*
10	* @since 4.8.0
11	* @param str - The string to capitalize
12	* @returns The string with first letter capitalized
13	*/
14	const capitalizeFirstLetter = (str: string): string => {
15	if (!str) return str;
16	return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
17	};
18
19	/**
20	* @since 4.8.0
21	*/
22	type SyncDetailsProps = {
23	isAccurate: boolean;
24	platform: string;
25	gateway: string;
26	}
27
28	/**
29	* @since 4.8.0
30	*/
31	export default function SyncDetails({ isAccurate, platform, gateway }: SyncDetailsProps) {
32	if(isAccurate) {
33	return (
34	<div
35	className={styles.accurateDetailWrapper}
36	role="region"
37	aria-label={__('Accurate synchronization details', 'give')}
38	>
39	<div className={styles.detailItem}>
40	<p className={styles.detailLabel}>{__('Platform', 'give')}</p>
41	<p className={styles.detailValue}>{platform ? capitalizeFirstLetter(platform) : __('Completed', 'give')}</p>
42	</div>
43	<CheckCircleIcon aria-label={__('Payment synchronization successful', 'give')}/>
44	<div className={styles.detailItem}>
45	<p className={styles.detailLabel}>{__('Gateway', 'give')}</p>
46	<p className={styles.detailValue}>{gateway ? capitalizeFirstLetter(gateway) : __('Completed', 'give')}</p>
47	</div>
48	</div>
49	)
50	}
51
52	return (
53	<div className={styles.syncDetails}>
54	<div className={styles.detail}>
55	<div className={styles.detailContainer}>
56	<p className={styles.detailTitle}>{__('OLD', 'give')}</p>
57	<div className={styles.detailWrapper}>
58	<div className={styles.detailItem}>
59	<p className={styles.detailLabel}>{__('Platform', 'give')}</p>
60	<p className={styles.detailValue}>{capitalizeFirstLetter(platform)}</p>
61	</div>
62	<XCircleIcon />
63	<div className={styles.detailItem}>
64	<p className={styles.detailLabel}>{__('Gateway', 'give')}</p>
65	<p className={styles.detailValue}>{capitalizeFirstLetter(gateway)}</p>
66	</div>
67	</div>
68	</div>
69	<div className={styles.detailContainer}>
70	<p className={styles.detailTitle}>{__('NEW', 'give')}</p>
71	<div className={styles.detailWrapper}>
72	<div className={styles.detailItem}>
73	<p className={styles.detailLabel}>{__('Platform', 'give')}</p>
74	<p className={styles.detailValue}>{capitalizeFirstLetter(gateway)}</p>
75	</div>
76	<CheckCircleIcon />
77	<div className={styles.detailItem}>
78	<p className={styles.detailLabel}>{__('Gateway', 'give')}</p>
79	<p className={styles.detailValue}>{capitalizeFirstLetter(gateway)}</p>
80	</div>
81	</div>
82	</div>
83	</div>
84	</div>
85	);
86	}
87
88	/**
89	* @since 4.8.0
90	*/
91	type SyncPaymentDetailsProps = {
92
93	payment: {
94	gatewayTransactionId: string;
95	id: number;
96	amount: string;
97	createdAt: string;
98	status: string;
99	type: string;
100	} \| null;
101	isAccurate?: boolean;
102	platform?: string;
103	gateway?: string;
104	}
105
106	/**
107	* @since 4.8.0
108	*/
109	export function SyncPaymentDetails({ payment, platform, gateway, isAccurate }: SyncPaymentDetailsProps) {
110	if(isAccurate) {
111	return (
112	<div
113	className={styles.accurateDetailWrapper}
114	role="region"
115	aria-label={__('Accurate payment synchronization details', 'give')}
116	>
117	<div className={styles.detailItem}>
118	<p className={styles.detailLabel}>{__('Platform', 'give')}</p>
119	<p className={styles.detailValue}>{platform ? capitalizeFirstLetter(platform) : __('Completed', 'give')}</p>
120	</div>
121	<CheckCircleIcon aria-label={__('Payment synchronization successful', 'give')}/>
122	<div className={styles.detailItem}>
123	<p className={styles.detailLabel}>{__('Gateway', 'give')}</p>
124	<p className={styles.detailValue}>{gateway ? capitalizeFirstLetter(gateway) : __('Completed', 'give')}</p>
125	</div>
126	</div>
127	)
128	}
129
130	const PaymentAmount = () => (
131	<strong className={styles.paymentDescriptionAmount}>{payment?.amount}</strong>
132	);
133
134	const description = createInterpolateElement(
135	__('A donation of <PaymentAmount/> has been added.', 'give'),
136	{ PaymentAmount: <PaymentAmount /> }
137	);
138
139	return (
140	<div
141	className={styles.paymentDetails}
142	role="region"
143	aria-label={__('Payment details', 'give')}
144	>
145	<div className={classnames(styles.paymentItem)}>
146	<div className={styles.paymentIcon}>
147	<HandHeartIcon aria-label={__('Donation icon', 'give')}/>
148	</div>
149	<div className={styles.paymentsContent}>
150	<p className={styles.paymentDescription}>{description}</p>
151	<p className={styles.paymentDate}>{payment?.createdAt}</p>
152	</div>
153	</div>
154	</div>
155	);
156	}
157