konnosDashboard
BillingSettings.tsx115 lines · main
1import { cn } from 'ui'
2
3import PaymentMethods from '../../Billing/Payment/PaymentMethods/PaymentMethods'
4import { InvoicesSection } from '../InvoicesSettings/InvoicesSection'
5import BillingBreakdown from './BillingBreakdown/BillingBreakdown'
6import { BillingCustomerData } from './BillingCustomerData/BillingCustomerData'
7import BillingEmail from './BillingEmail'
8import CostControl from './CostControl/CostControl'
9import CreditBalance from './CreditBalance'
10import Subscription from './Subscription/Subscription'
11import {
12 ScaffoldContainer,
13 ScaffoldContainerLegacy,
14 ScaffoldDivider,
15 ScaffoldTitle,
16} from '@/components/layouts/Scaffold'
17import { useOrgSubscriptionQuery } from '@/data/subscriptions/org-subscription-query'
18import { useIsFeatureEnabled } from '@/hooks/misc/useIsFeatureEnabled'
19import { useSelectedOrganizationQuery } from '@/hooks/misc/useSelectedOrganization'
20import { MANAGED_BY } from '@/lib/constants/infrastructure'
21
22export const BillingSettings = () => {
23 const {
24 billingAccountData: isBillingAccountDataEnabledOnProfileLevel,
25 billingPaymentMethods: isBillingPaymentMethodsEnabledOnProfileLevel,
26 billingCredits: isBillingCreditsEnabledOnProfileLevel,
27 billingInvoices: isBillingInvoicesEnabledOnProfileLevel,
28 } = useIsFeatureEnabled([
29 'billing:account_data',
30 'billing:payment_methods',
31 'billing:credits',
32 'billing:invoices',
33 ])
34
35 const { data: org } = useSelectedOrganizationQuery()
36 const { data: subscription } = useOrgSubscriptionQuery({ orgSlug: org?.slug })
37 const isNotOrgWithPartnerBilling = !subscription?.billing_via_partner
38 const isStripeOrg = org?.managed_by === MANAGED_BY.STRIPE_PROJECTS
39
40 const billingAccountDataEnabled =
41 isBillingAccountDataEnabledOnProfileLevel && isNotOrgWithPartnerBilling
42 const billingPaymentMethodsEnabled =
43 isBillingPaymentMethodsEnabledOnProfileLevel && (isNotOrgWithPartnerBilling || isStripeOrg)
44
45 return (
46 <>
47 <ScaffoldContainerLegacy>
48 <ScaffoldTitle>Billing</ScaffoldTitle>
49 </ScaffoldContainerLegacy>
50
51 <ScaffoldContainer id="subscription" className={cn('[&>div]:pt-0!')}>
52 <Subscription />
53 </ScaffoldContainer>
54
55 <ScaffoldDivider />
56
57 <ScaffoldContainer id="cost-control">
58 <CostControl />
59 </ScaffoldContainer>
60
61 <ScaffoldDivider />
62
63 {org && org.plan.id !== 'free' && (
64 <ScaffoldContainer id="breakdown">
65 <BillingBreakdown />
66 </ScaffoldContainer>
67 )}
68
69 {isBillingInvoicesEnabledOnProfileLevel && (
70 <>
71 <ScaffoldDivider />
72 <ScaffoldContainer id="invoices">
73 <InvoicesSection />
74 </ScaffoldContainer>
75 </>
76 )}
77
78 {billingPaymentMethodsEnabled && (
79 <>
80 <ScaffoldDivider />
81
82 <ScaffoldContainer id="payment-methods">
83 <PaymentMethods />
84 </ScaffoldContainer>
85 </>
86 )}
87
88 {isBillingCreditsEnabledOnProfileLevel && (
89 <>
90 <ScaffoldDivider />
91
92 <ScaffoldContainer id="credits-balance">
93 <CreditBalance />
94 </ScaffoldContainer>
95 </>
96 )}
97
98 {billingAccountDataEnabled && (
99 <>
100 <ScaffoldDivider />
101
102 <ScaffoldContainer id="email">
103 <BillingEmail />
104 </ScaffoldContainer>
105
106 <ScaffoldDivider />
107
108 <ScaffoldContainer id="address">
109 <BillingCustomerData />
110 </ScaffoldContainer>
111 </>
112 )}
113 </>
114 )
115}