Skip to content
This repository was archived by the owner on Aug 16, 2025. It is now read-only.

Commit 4a7b6be

Browse files
Prasad BhatPrasad Bhat
authored andcommitted
docs: convert subscription and roles pages to use reusable components and fix dark mode bullets (#438)
1 parent dd9403c commit 4a7b6be

File tree

4 files changed

+200
-101
lines changed

4 files changed

+200
-101
lines changed

docs/getting-started/subscription-management.md

Lines changed: 0 additions & 63 deletions
This file was deleted.
Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
---
2+
title: Manage your subscription
3+
description: Learn how to manage your CodeRabbit subscription, including billing, plan changes, and seat management
4+
---
5+
6+
import Tip from '@site/src/components/Tip';
7+
import Note from '@site/src/components/Note';
8+
import ListItems from '@site/src/components/ListItems';
9+
10+
This guide covers how to manage your subscription, including accessing billing information, changing plans, and adjusting your seat count.
11+
12+
## Accessing Billing Information
13+
14+
### Invoices and Payment History
15+
16+
You can access your billing history and download invoices by:
17+
18+
<ListItems
19+
orderedList={true}
20+
items={[
21+
<>Going to <a href="https://app.coderabbit.ai/settings/subscription"><strong>Subscription</strong></a> on the sidebar &gt; <strong>Manage Subscription</strong></>,
22+
<>Once in the customer portal select <strong>Billing History</strong></>,
23+
<>Click to download an invoice from any specific month of billing</>
24+
]}
25+
/>
26+
27+
![Subscription page navigation](../../static/img/getting-started/subscription-page.png)
28+
29+
![Billing history view](../../static/img/getting-started/billing-history.png)
30+
31+
![Downloading an invoice](../../static/img/getting-started/download-invoice.png)
32+
33+
## Managing Your Subscription Plan
34+
35+
### Changing Plans
36+
37+
<ListItems
38+
orderedList={true}
39+
items={[
40+
<>To upgrade or change your subscription plan:</>,
41+
<>Going to <a href="https://app.coderabbit.ai/settings/subscription"><strong>Subscription</strong></a> on the sidebar &gt; <strong>Manage Subscription</strong></>,
42+
<>Once in the customer portal click the box with your plan highlighted at the top of the page</>,
43+
<>Click <strong>Update number of seats or change your plan</strong></>,
44+
<>Click <strong>Change</strong> on the section at the top mentioning your current plan</>,
45+
<>Select the new plan you'd like to change to</>,
46+
<>Click <strong>Update</strong></>
47+
]}
48+
/>
49+
50+
![Changing your plan](../../static/img/getting-started/manage-subscription.png)
51+
52+
![Changing your plan](../../static/img/getting-started/edit-subscription.png)
53+
54+
![Changing your plan](../../static/img/getting-started/change-seats.png)
55+
56+
![Changing your plan](../../static/img/getting-started/change-plan.png)
57+
58+
### Adjusting Seat Count
59+
60+
To modify the number of seats in your subscription:
61+
62+
<ListItems
63+
orderedList={true}
64+
items={[
65+
<>Going to <a href="https://app.coderabbit.ai/settings/subscription"><strong>Subscription</strong></a> on the sidebar &gt; <strong>Manage Subscription</strong></>,
66+
<>Once in the customer portal click the box with your plan highlighted at the top of the page</>,
67+
<>Click <strong>Update number of seats or change your plan</strong></>,
68+
<>Enter the new number of seats needed</>,
69+
<>Click <strong>Update Subscription</strong></>
70+
]}
71+
/>
72+
73+
![Changing your plan](../../static/img/getting-started/manage-subscription.png)
74+
75+
![Changing your plan](../../static/img/getting-started/edit-subscription.png)
76+
77+
![Changing your plan](../../static/img/getting-started/change-seats.png)
78+
79+
## What's next
80+
81+
<a id="whats-next" />
82+
83+
- [Control administrative access](/guides/roles)

docs/guides/roles.md renamed to docs/guides/roles.mdx

Lines changed: 115 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,15 @@ title: Control administrative access
33
description: Using the role-based authorization features of CodeRabbit
44
---
55

6+
import ListItems from '@site/src/components/ListItems';
7+
import Note from '@site/src/components/Note';
8+
import Table from '@site/src/components/Table';
9+
610
You can control which CodeRabbit
711
administrative features are available to your organization's user accounts by
812
assigning and updating account roles.
913

10-
## Overview of CodeRabbit roles {#overview}
14+
## Overview of CodeRabbit roles
1115

1216
Every CodeRabbit account has exactly one role for each organization
1317
that account is associated with.
@@ -19,11 +23,13 @@ CodeRabbit roles determine your ability to read or change various
1923
billing, account management, and other administrative functions related to
2024
an organization. The roles are as follows:
2125

22-
- **Admin**: allows full read/write access to all CodeRabbit administrative features.
23-
- **Member**: allows read-only access to a limited set of administrative settings. This role
24-
is appropriate for most developers in an organization.
25-
- **Billing Admin**: allows read/write access to features specific
26-
to a subscription and billing management, and limited access to other administrative features.
26+
<ListItems
27+
items={[
28+
<><strong>Admin</strong>: allows full read/write access to all CodeRabbit administrative features.</>,
29+
<><strong>Member</strong>: allows read-only access to a limited set of administrative settings. This role is appropriate for most developers in an organization.</>,
30+
<><strong>Billing Admin</strong>: allows read/write access to features specific to a subscription and billing management, and limited access to other administrative features.</>
31+
]}
32+
/>
2733

2834
CodeRabbit users with the **Admin** role can modify the roles of other users in the
2935
organization.
@@ -55,10 +61,12 @@ For more information on seat and subscription management, see [Manage your subsc
5561
CodeRabbit assigns every user account in your organization a default role,
5662
using the following metrics:
5763

58-
- If a user has an ownership-level role with the Git platform organization—for example,
59-
**Admin** on GitHub, or **Owner** on Bitbucket—then that user receives the default
60-
CodeRabbit role of **Admin**.
61-
- Otherwise, the user receives the **Member** role by default.
64+
<ListItems
65+
items={[
66+
<>If a user has an ownership-level role with the Git platform organization—for example, <strong>Admin</strong> on GitHub, or <strong>Owner</strong> on Bitbucket—then that user receives the default CodeRabbit role of <strong>Admin</strong>.</>,
67+
<>Otherwise, the user receives the <strong>Member</strong> role by default.</>
68+
]}
69+
/>
6270

6371
You can update a user's role from its default setting by following the steps detailed in the next section. This requires that your own account
6472
has an **Admin** role with the organization.
@@ -76,9 +84,14 @@ following sections.
7684

7785
To view a list of your organization's role assignments, follow these steps:
7886

79-
1. Go to the [CodeRabbit dashboard](https://app.coderabbit.ai/settings/repositories).
80-
1. At the top of the sidebar, select the organization whose user roles you want to view.
81-
1. On the sidebar, click **Subscription**.
87+
<ListItems
88+
orderedList={true}
89+
items={[
90+
<>Go to the <a href="https://app.coderabbit.ai/settings/repositories">CodeRabbit dashboard</a>.</>,
91+
<>At the top of the sidebar, select the organization whose user roles you want to view.</>,
92+
<>On the sidebar, click <strong>Subscription</strong>.</>
93+
]}
94+
/>
8295

8396
This displays a table of all of the CodeRabbit **Admin** and **Member** accounts associated with the selected
8497
organization. In this table, the **Role** column displays the CodeRabbit role for
@@ -88,31 +101,39 @@ To view a list of accounts with the **Billing Admin** role, click the **Billing
88101

89102
### Set roles {#set-roles}
90103

91-
:::note
104+
<Note>
92105
To modify users' CodeRabbit accounts, your own account must have the **Admin** role within your organization.
93-
:::
106+
</Note>
94107

95108
To change a user account's CodeRabbit role, follow these steps:
96109

97-
1. Go to your organization's list of user accounts, as detailed in the previous section.
98-
If you have the **Admin** role within this organization, then the **Role** column in the user accounts table contains selectable menus.
99-
1. Click the menu in the user's **Role** column, and select the appropriate role from
100-
the list.
110+
<ListItems
111+
orderedList={true}
112+
items={[
113+
<>Go to your organization's list of user accounts, as detailed in the previous section. If you have the <strong>Admin</strong> role within this organization, then the <strong>Role</strong> column in the user accounts table contains selectable menus.</>,
114+
<>Click the menu in the user's <strong>Role</strong> column, and select the appropriate role from the list.</>
115+
]}
116+
/>
101117

102118
The only roles you can assign through this method are **Admin** and **Member**.
103119
You can't grant the **Billing Admin** role to an existing user account. To add an account with the **Billing Admin** role, see the next section.
104120

105121
### Add billing admin accounts {#billing}
106122

107-
:::note
123+
<Note>
108124
Billing Admin users don't require CodeRabbit seat licenses. You can add Billing Admin users regardless of how many seat licenses you have available.
109-
:::
125+
</Note>
110126

111127
To add a CodeRabbit user account with the **Billing Admin** role, follow these steps:
112128

113-
1. Go to your organization's list of user accounts, as detailed in [View roles](#view-roles).
114-
1. Click **Invite Billing Admin**.
115-
1. Enter the name and email address of the billing administrator who you want to invite to the organization.
129+
<ListItems
130+
orderedList={true}
131+
items={[
132+
<>Go to your organization's list of user accounts, as detailed in <a href="#view-roles">View roles</a>.</>,
133+
<>Click <strong>Invite Billing Admin</strong>.</>,
134+
<>Enter the name and email address of the billing administrator who you want to invite to the organization.</>
135+
]}
136+
/>
116137

117138
This sends an email to the address that you specified. After the recipient completes the process of joining your organization in CodeRabbit, then their record appears in the user accounts list, under the **Billing Admins** tab.
118139

@@ -121,18 +142,76 @@ This sends an email to the address that you specified. After the recipient compl
121142
The following table lists the CodeRabbit administrative functionality
122143
available to each of the CodeRabbit roles.
123144

124-
| Resource | Admin | Member | Billing Admin |
125-
| ----------------------- | ---------- | --------- | ------------- |
126-
| Learning Resources | Read/Write | Read-only | No access |
127-
| Metrics/Dashboard | Read/Write | No access | No access |
128-
| Reports | Read/Write | Read-only | No access |
129-
| Integrations | Read/Write | Read-only | No access |
130-
| Repository Settings | Read/Write | Read-only | No access |
131-
| Organization Settings | Read/Write | Read-only | No access |
132-
| User Management | Read/Write | Read-only | Read-only |
133-
| Subscription Management | Read/Write | Read-only | Read/Write |
134-
| Billing Management | Read/Write | No access | Read/Write |
145+
<Table
146+
columns={[
147+
{ key: 'resource', label: 'Resource' },
148+
{ key: 'admin', label: 'Admin' },
149+
{ key: 'member', label: 'Member' },
150+
{ key: 'billing_admin', label: 'Billing Admin' }
151+
]}
152+
sections={[
153+
{
154+
title: '',
155+
rows: [
156+
{
157+
resource: 'Learning Resources',
158+
admin: 'Read/Write',
159+
member: 'Read-only',
160+
billing_admin: 'No access'
161+
},
162+
{
163+
resource: 'Metrics/Dashboard',
164+
admin: 'Read/Write',
165+
member: 'No access',
166+
billing_admin: 'No access'
167+
},
168+
{
169+
resource: 'Reports',
170+
admin: 'Read/Write',
171+
member: 'Read-only',
172+
billing_admin: 'No access'
173+
},
174+
{
175+
resource: 'Integrations',
176+
admin: 'Read/Write',
177+
member: 'Read-only',
178+
billing_admin: 'No access'
179+
},
180+
{
181+
resource: 'Repository Settings',
182+
admin: 'Read/Write',
183+
member: 'Read-only',
184+
billing_admin: 'No access'
185+
},
186+
{
187+
resource: 'Organization Settings',
188+
admin: 'Read/Write',
189+
member: 'Read-only',
190+
billing_admin: 'No access'
191+
},
192+
{
193+
resource: 'User Management',
194+
admin: 'Read/Write',
195+
member: 'Read-only',
196+
billing_admin: 'Read-only'
197+
},
198+
{
199+
resource: 'Subscription Management',
200+
admin: 'Read/Write',
201+
member: 'Read-only',
202+
billing_admin: 'Read/Write'
203+
},
204+
{
205+
resource: 'Billing Management',
206+
admin: 'Read/Write',
207+
member: 'No access',
208+
billing_admin: 'Read/Write'
209+
}
210+
]
211+
}
212+
]}
213+
/>
135214

136215
## What's next {#whats-next}
137216

138-
- [Manage your subscription](/getting-started/subscription-management)
217+
- [Manage your subscription](/getting-started/subscription-management)

src/components/ListItems/ListItems.module.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
width: 0.3em !important;
2727
height: 0.3em !important;
2828
top: 0.65em !important;
29-
background: #333 !important;
29+
background: var(--ifm-color-content) !important;
3030
}
3131

3232
.crNestedList .crNestedLevel2 li {
@@ -79,7 +79,7 @@
7979
top: 0.6em;
8080
width: 0.4em;
8181
height: 0.4em;
82-
background: #333;
82+
background: var(--ifm-color-content);
8383
border-radius: 50%;
8484
display: inline-block;
8585
}

0 commit comments

Comments
 (0)