give / src / Subscriptions / resources / admin / components / SubscriptionDetailsPage / Tabs / Overview / SubscriptionAnnualProjection / index.tsx

index.tsx in GiveWP – Donation Plugin and Fundraising Platform 4.18.0, at src/Subscriptions/resources/admin/components/SubscriptionDetailsPage/Tabs/Overview/SubscriptionAnnualProjection/index.tsx

68 lines 2.6 KB

Raw Download Zip

1	import { __ } from '@wordpress/i18n';
2	import Chart from 'react-apexcharts';
3	import { amountFormatter } from '@givewp/campaigns/utils';
4	import { Header, OverviewPanel } from '@givewp/admin/components';
5	import { Subscription } from '@givewp/subscriptions/admin/components/types';
6	import { Donation } from '@givewp/donations/admin/components/types';
7	import {
8	getCurrentYearCompletedDonations,
9	calculateTotalContributions,
10	calculateProgressPercentage,
11	chartOptions
12	} from './utils';
13	import styles from './styles.module.scss';
14
15	/**
16	* @since 4.8.0
17	*/
18	type SubscriptionAnnualProjectionProps = {
19	donations: Donation[];
20	subscription: Subscription;
21	currency: string;
22	};
23
24	/**
25	* @since 4.8.0
26	*/
27	export default function SubscriptionAnnualProjection({ subscription, donations, currency }: SubscriptionAnnualProjectionProps) {
28	const currencyFormatter = amountFormatter(currency);
29	const projectedAnnualRevenue = subscription?.projectedAnnualRevenue;
30
31	// Calculate completed donations and contributions using utility functions
32	const currentYearCompletedDonations = getCurrentYearCompletedDonations(donations);
33	const totalContributions = calculateTotalContributions(currentYearCompletedDonations);
34
35	// Calculate progress - ensure both values are in the same units
36	const projectedAmount = projectedAnnualRevenue ? Number(projectedAnnualRevenue?.value) : 0;
37	const percentage = projectedAmount > 0 ? calculateProgressPercentage(totalContributions, projectedAmount) : 0;
38
39	// Set chart options and series
40	const options = chartOptions(currencyFormatter.format(totalContributions));
41	const series = [percentage];
42
43
44	return (
45	<OverviewPanel>
46	<div className={styles.goalProgressChart}>
47	<Header
48	title={__('Projected Annual Revenue', 'give')}
49	subtitle={__('Estimated yearly contribution based on billing amount.', 'give')} />
50	<div className={styles.chartContainer}>
51	<Chart
52	options={options}
53	series={series}
54	type="radialBar"
55	/>
56	<div className={styles.goalDetails}>
57	<span className={styles.detailsLabel}>{__('Estimated contribution', 'give')}</span>
58	<span className={styles.amount}>
59	{currencyFormatter.format(projectedAnnualRevenue?.value)}
60	</span>
61	</div>
62	</div>
63	</div>
64	</OverviewPanel>
65	);
66	}
67
68