diff --git a/packages/client/modules/userDashboard/components/OrgBilling/OrgPlansAndBilling.tsx b/packages/client/modules/userDashboard/components/OrgBilling/OrgPlansAndBilling.tsx index 72a921ee61c..dee6eb069aa 100644 --- a/packages/client/modules/userDashboard/components/OrgBilling/OrgPlansAndBilling.tsx +++ b/packages/client/modules/userDashboard/components/OrgBilling/OrgPlansAndBilling.tsx @@ -12,6 +12,7 @@ import OrgBillingInvoices from './OrgBillingInvoices' import OrgPlanDrawer from './OrgPlanDrawer' import OrgPlans from './OrgPlans' import OrgPlansAndBillingHeading from './OrgPlansAndBillingHeading' +import OrgUsage from './OrgUsage' import PaymentDetails from './PaymentDetails' type Props = { @@ -50,6 +51,7 @@ const OrgPlansAndBilling = (props: Props) => { ...BillingLeaders_organization ...PaymentDetails_organization ...OrgPlanDrawer_organization + ...OrgUsage_organization id billingTier isBillingLeader @@ -92,6 +94,7 @@ const OrgPlansAndBilling = (props: Props) => {
+ {billingTier === 'enterprise' && } {isBillingLeader && billingTier === 'team' && ( <> diff --git a/packages/client/modules/userDashboard/components/OrgBilling/OrgUsage.tsx b/packages/client/modules/userDashboard/components/OrgBilling/OrgUsage.tsx new file mode 100644 index 00000000000..86034698525 --- /dev/null +++ b/packages/client/modules/userDashboard/components/OrgBilling/OrgUsage.tsx @@ -0,0 +1,64 @@ +import graphql from 'babel-plugin-relay/macro' +import React from 'react' +import {useFragment} from 'react-relay' +import {OrgUsage_organization$key} from '../../../../__generated__/OrgUsage_organization.graphql' +import Panel from '../../../../components/Panel/Panel' +import useRouter from '../../../../hooks/useRouter' + +interface Props { + organizationRef: OrgUsage_organization$key +} + +const OrgUsage = (props: Props) => { + const {organizationRef} = props + const organization = useFragment( + graphql` + fragment OrgUsage_organization on Organization { + id + allTeamsCount + orgUserCount { + activeUserCount + inactiveUserCount + } + } + `, + organizationRef + ) + + const {id: orgId, allTeamsCount, orgUserCount} = organization + const totalUserCount = orgUserCount.activeUserCount + orgUserCount.inactiveUserCount + const {history} = useRouter() + + return ( + + + + ) +} + +export default OrgUsage diff --git a/packages/client/modules/userDashboard/components/OrganizationRow/OrganizationRow.tsx b/packages/client/modules/userDashboard/components/OrganizationRow/OrganizationRow.tsx index 2032ba8a87c..c3cf18a3a59 100644 --- a/packages/client/modules/userDashboard/components/OrganizationRow/OrganizationRow.tsx +++ b/packages/client/modules/userDashboard/components/OrganizationRow/OrganizationRow.tsx @@ -140,7 +140,8 @@ const OrganizationRow = (props: Props) => { )} - {`${totalUsers} ${plural(totalUsers, 'User')} (${activeUserCount} Active)`} + {`${totalUsers} ${plural(totalUsers, 'User')}`} + {billingTier !== 'enterprise' && ` (${activeUserCount} Active)`}