give
/
src
/
Subscriptions
/
resources
/
admin
/
components
/
SubscriptionDetailsPage
/
Tabs
/
Overview
/
SubscriptionStats
/
index.tsx
give
/
src
/
Subscriptions
/
resources
/
admin
/
components
/
SubscriptionDetailsPage
/
Tabs
/
Overview
/
SubscriptionStats
Last commit date
index.tsx
10 months ago
styles.module.scss
10 months ago
index.tsx
55 lines
| 1 | import { StatWidget } from '@givewp/admin/components'; |
| 2 | import { __ } from '@wordpress/i18n'; |
| 3 | import { amountFormatter } from '@givewp/admin/utils'; |
| 4 | import { Donation } from '@givewp/donations/admin/components/types'; |
| 5 | import styles from './styles.module.scss'; |
| 6 | |
| 7 | /** |
| 8 | * @since 4.8.0 |
| 9 | */ |
| 10 | type SubscriptionStatsProps = { |
| 11 | donations: Donation[]; |
| 12 | currency: string; |
| 13 | totalInstallments: number; |
| 14 | loading: boolean; |
| 15 | } |
| 16 | |
| 17 | |
| 18 | /** |
| 19 | * @since 4.8.0 |
| 20 | */ |
| 21 | export const getCompletedDonations = (donations: Donation[]) => { |
| 22 | return donations?.filter(donation => ['publish', 'give_subscription'].includes(donation.status)); |
| 23 | }; |
| 24 | |
| 25 | /** |
| 26 | * @since 4.8.0 |
| 27 | */ |
| 28 | export default function SubscriptionStats({ donations, currency, totalInstallments, loading }: SubscriptionStatsProps) { |
| 29 | const ongoingInstallments = totalInstallments === 0; |
| 30 | const completedDonations = getCompletedDonations(donations); |
| 31 | const paymentsCompleted = completedDonations?.length; |
| 32 | const totalContributions = completedDonations?.reduce((acc, donation) => acc + Number(donation.amount.value), 0); |
| 33 | |
| 34 | const paymentProgress = ( |
| 35 | <div className={styles.paymentProgress}> |
| 36 | {paymentsCompleted} / <span>{ongoingInstallments ? '\u221E' : totalInstallments}</span> |
| 37 | </div> |
| 38 | ); |
| 39 | |
| 40 | return ( |
| 41 | <div className={styles.container}> |
| 42 | <StatWidget |
| 43 | label={__('Total contribution so far', 'give')} |
| 44 | value={amountFormatter(currency).format(totalContributions)} |
| 45 | loading={loading} |
| 46 | /> |
| 47 | <StatWidget |
| 48 | label={__('Payments completed', 'give')} |
| 49 | value={paymentProgress} |
| 50 | loading={loading} |
| 51 | /> |
| 52 | </div> |
| 53 | ); |
| 54 | } |
| 55 |