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
10 months ago
SubscriptionSummaryGrid
10 months ago
index.tsx
10 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 |