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

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

113 lines 4.6 KB

Raw Download Zip

1	import {Grid, GridCard, OverviewPanel, Spinner} from '@givewp/admin/components';
2	import {formatTimestamp} from '@givewp/admin/utils';
3	import {GatewayNotice} from '@givewp/donations/admin/components/DonationDetailsPage/Tabs/Overview/DonationSummaryGrid';
4	import PaymentMethodIcon from '@givewp/donations/admin/components/DonationDetailsPage/Tabs/Overview/DonationSummaryGrid/PaymentMethodIcon';
5	import ExternalLinkIcon from '@givewp/donations/admin/components/DonationDetailsPage/Tabs/Overview/DonationSummaryGrid/icon';
6	import {Subscription} from '@givewp/subscriptions/admin/components/types';
7	import {__} from '@wordpress/i18n';
8	import classnames from 'classnames';
9	import {ClockIcon, HourGlassIcon} from './Icons';
10	import DonorCard from './DonorCard';
11	import CampaignCard from './CampaignCard';
12	import styles from './styles.module.scss';
13	import { getSubscriptionEmbeds } from '@givewp/subscriptions/common';
14
15	/**
16	* @since 4.10.0 removed donation
17	* @since 4.8.0
18	*/
19	type SubscriptionSummaryGridProps = {
20	subscription: Subscription;
21	isLoading: boolean;
22	};
23
24	/**
25	* @since 4.10.0 removed donation dependency
26	* @since 4.8.0
27	*/
28	export default function SubscriptionSummaryGrid({subscription, isLoading}: SubscriptionSummaryGridProps) {
29	const { campaign, donor } = getSubscriptionEmbeds(subscription);
30	const isOngoing = subscription?.installments === 0;
31	const badgeLabel = isOngoing ? (
32	<>
33	<ClockIcon />
34	{__('Unlimited', 'give')}
35	</>
36	) : (
37	<>
38	<HourGlassIcon />
39	{__('Limited', 'give')}
40	</>
41	);
42	const renewsAt = subscription?.renewsAt;
43	const paymentMethodId = subscription?.gatewayId;
44	const hasPaymentMethodDetails = subscription?.gateway?.id;
45	const gatewayLabel = subscription?.gateway?.label;
46	const gatewayLink = subscription?.gateway?.subscriptionUrl;
47
48	return (
49	<OverviewPanel className={styles.overviewPanel}>
50	<h2 id="subscription-details-grid-title" className={'sr-only'}>
51	{__('Subscription Details', 'give')}
52	</h2>
53	<Grid ariaLabel={__('Subscription details', 'give')}>
54	{/* Campaign Name */}
55	<CampaignCard campaign={campaign} />
56
57	{/* Next Payment */}
58	<GridCard className={styles.card} heading={__('Next payment', 'give')} headingId="next-payment">
59	{isLoading && <Spinner />}
60	{!isLoading && (
61	<>
62	<time className={styles.date} dateTime={renewsAt}>
63	{formatTimestamp(renewsAt)}
64	</time>
65	<div className={styles.donationType}>
66	<span
67	className={classnames(styles.badge, {
68	[styles.unlimited]: isOngoing,
69	[styles.limited]: !isOngoing,
70	})}
71	aria-label={isOngoing ? __('Unlimited', 'give') : __('Limited', 'give')}
72	>
73	{badgeLabel}
74	</span>
75	</div>
76	</>
77	)}
78	</GridCard>
79
80	{/* Associated Donor */}
81	<DonorCard donor={donor} />
82
83	{/* Gateway Info */}
84	<GridCard heading={__('Gateway', 'give')} headingId="gateway">
85	{isLoading ? (
86	<Spinner />
87	) : !hasPaymentMethodDetails ? (
88	<GatewayNotice />
89	) : (
90	<>
91	<strong className={styles.paymentMethod}>
92	<PaymentMethodIcon paymentMethod={paymentMethodId} />
93	{gatewayLabel}
94	</strong>
95	{gatewayLink && (
96	<a
97	className={styles.gatewayLink}
98	href={gatewayLink}
99	target="_blank"
100	rel="noopener noreferrer"
101	>
102	{__('View subscription on gateway', 'give')}
103	<ExternalLinkIcon />
104	</a>
105	)}
106	</>
107	)}
108	</GridCard>
109	</Grid>
110	</OverviewPanel>
111	);
112	}
113