give
/
src
/
Subscriptions
/
resources
/
admin
/
components
/
SubscriptionDetailsPage
/
Tabs
/
Overview
/
index.tsx
give
/
src
/
Subscriptions
/
resources
/
admin
/
components
/
SubscriptionDetailsPage
/
Tabs
/
Overview
Last commit date
SubscriptionAnnualProjection
10 months ago
SubscriptionStats
10 months ago
SubscriptionSummary
9 months ago
SubscriptionSummaryGrid
9 months ago
index.tsx
9 months ago
styles.module.scss
10 months ago
index.tsx
46 lines
| 1 | |
| 2 | import SubscriptionStats from "./SubscriptionStats"; |
| 3 | import OverviewPanel from "@givewp/admin/components/OverviewPanel"; |
| 4 | import SubscriptionSummaryGrid from "./SubscriptionSummaryGrid"; |
| 5 | import { SubscriptionNotes } from "@givewp/admin/components/PrivateNotes"; |
| 6 | import { useDonationsBySubscription, useSubscriptionAmounts } from '@givewp/subscriptions/hooks'; |
| 7 | import SubscriptionSummary from '@givewp/subscriptions/admin/components/SubscriptionDetailsPage/Tabs/Overview/SubscriptionSummary'; |
| 8 | import { getSubscriptionOptionsWindowData, useSubscriptionEntityRecord } from "@givewp/subscriptions/utils"; |
| 9 | import SubscriptionAnnualProjection from "./SubscriptionAnnualProjection"; |
| 10 | import styles from "./styles.module.scss"; |
| 11 | import { Spinner } from "@givewp/admin/components"; |
| 12 | |
| 13 | /** |
| 14 | * @since 4.8.0 |
| 15 | */ |
| 16 | export default function SubscriptionDetailsPageOverviewTab() { |
| 17 | const { mode, adminUrl } = getSubscriptionOptionsWindowData(); |
| 18 | const { record: subscription, hasResolved: subscriptionsResolved, isResolving: subscriptionLoading } = useSubscriptionEntityRecord(); |
| 19 | const { intendedAmount } = useSubscriptionAmounts(subscription); |
| 20 | const { records: donations, hasResolved: donationsResolved, isResolving: donationsLoading } = useDonationsBySubscription(subscription?.id, mode); |
| 21 | |
| 22 | if (!subscriptionsResolved || !donationsResolved || !subscription || !donations) { |
| 23 | // TODO: Add loading state |
| 24 | return <Spinner />; |
| 25 | } |
| 26 | |
| 27 | return ( |
| 28 | <div className={styles.overview}> |
| 29 | <SubscriptionStats donations={donations} currency={subscription?.amount?.currency} totalInstallments={subscription?.installments} loading={!subscriptionsResolved || donationsLoading || !donationsResolved} /> |
| 30 | |
| 31 | <div className={styles.left}> |
| 32 | <SubscriptionSummaryGrid subscription={subscription} donation={donations?.[0]} isLoading={subscriptionLoading || donationsLoading} /> |
| 33 | <OverviewPanel> |
| 34 | <SubscriptionNotes subscriptionId={subscription?.id} /> |
| 35 | </OverviewPanel> |
| 36 | |
| 37 | </div> |
| 38 | |
| 39 | <div className={styles.right}> |
| 40 | <SubscriptionAnnualProjection donations={donations} currency={subscription?.amount?.currency} subscription={subscription} /> |
| 41 | <SubscriptionSummary subscription={subscription} donation={donations?.[0]} adminUrl={adminUrl} intendedAmount={intendedAmount} isLoading={subscriptionLoading || !subscriptionsResolved || donationsLoading || !donationsResolved} /> |
| 42 | </div> |
| 43 | </div> |
| 44 | ); |
| 45 | } |
| 46 |