Skip to content

Commit 7de576b

Browse files
jaaydenhjaaydenh
authored
feat: add premium license banner for custom roles page (#14595)
* feat: initial commit for premium banners * feat: update design and copy * fix: fix format * fix: cleanup * fix: paywall stories and popoverpaywall * fix: updates for review comments * chore: remove references to enterprise license * chore:n remove references to enterprise license * fix: format * chore: simplify branding colors * fix: fix color references
1 parent 3301212 commit 7de576b

File tree

30 files changed

+215
-177
lines changed

30 files changed

+215
-177
lines changed

‎site/src/components/Badges/Badges.stories.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,12 @@ import {
44
Badges,
55
DisabledBadge,
66
EnabledBadge,
7-
EnterpriseBadge,
87
EntitledBadge,
98
HealthyBadge,
109
NotHealthyBadge,
1110
NotReachableBadge,
1211
NotRegisteredBadge,
12+
PremiumBadge,
1313
PreviewBadge,
1414
} from "./Badges";
1515

@@ -50,9 +50,9 @@ export const Disabled: Story = {
5050
children: <DisabledBadge />,
5151
},
5252
};
53-
export const Enterprise: Story = {
53+
export const Premium: Story = {
5454
args: {
55-
children: <EnterpriseBadge />,
55+
children: <PremiumBadge />,
5656
},
5757
};
5858
export const Preview: Story = {

‎site/src/components/Badges/Badges.tsx

+2-19
Original file line numberDiff line numberDiff line change
@@ -106,31 +106,14 @@ export const DisabledBadge: FC = forwardRef<
106106
);
107107
});
108108

109-
export const EnterpriseBadge: FC = () => {
110-
return (
111-
<span
112-
css={[
113-
styles.badge,
114-
(theme) => ({
115-
backgroundColor: theme.roles.notice.background,
116-
border: `1px solid ${theme.roles.notice.outline}`,
117-
color: theme.roles.notice.text,
118-
}),
119-
]}
120-
>
121-
Enterprise
122-
</span>
123-
);
124-
};
125-
126109
export const PremiumBadge: FC = () => {
127110
return (
128111
<span
129112
css={[
130113
styles.badge,
131114
(theme) => ({
132-
backgroundColor: theme.roles.notice.background,
133-
border: `1px solid ${theme.roles.notice.outline}`,
115+
backgroundColor: theme.branding.background,
116+
border: `1px solid ${theme.branding.border}`,
134117
color: theme.roles.notice.text,
135118
}),
136119
]}

‎site/src/components/Paywall/Paywall.stories.tsx

+1-3
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,10 @@ const meta: Meta<typeof Paywall> = {
99
export default meta;
1010
type Story = StoryObj<typeof Paywall>;
1111

12-
const Example: Story = {
12+
export const Premium: Story = {
1313
args: {
1414
message: "Black Lotus",
1515
description:
1616
"Adds 3 mana of any single color of your choice to your mana pool, then is discarded. Tapping this artifact can be played as an interrupt.",
1717
},
1818
};
19-
20-
export { Example as Paywall };

‎site/src/components/Paywall/Paywall.tsx

+37-25
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import type { Interpolation, Theme } from "@emotion/react";
22
import TaskAltIcon from "@mui/icons-material/TaskAlt";
33
import Button from "@mui/material/Button";
44
import Link from "@mui/material/Link";
5-
import { EnterpriseBadge } from "components/Badges/Badges";
5+
import { PremiumBadge } from "components/Badges/Badges";
66
import { Stack } from "components/Stack/Stack";
77
import type { FC, ReactNode } from "react";
88
import { docs } from "utils/docs";
@@ -19,11 +19,19 @@ export const Paywall: FC<PaywallProps> = ({
1919
documentationLink,
2020
}) => {
2121
return (
22-
<div css={styles.root}>
22+
<div
23+
css={[
24+
styles.root,
25+
(theme) => ({
26+
backgroundImage: `linear-gradient(160deg, transparent, ${theme.branding.background})`,
27+
border: `1px solid ${theme.branding.border}`,
28+
}),
29+
]}
30+
>
2331
<div>
2432
<Stack direction="row" alignItems="center" css={{ marginBottom: 24 }}>
2533
<h5 css={styles.title}>{message}</h5>
26-
<EnterpriseBadge />
34+
<PremiumBadge />
2735
</Stack>
2836

2937
{description && <p css={styles.description}>{description}</p>}
@@ -36,20 +44,24 @@ export const Paywall: FC<PaywallProps> = ({
3644
Read the documentation
3745
</Link>
3846
</div>
39-
<div css={styles.separator}></div>
47+
<div css={styles.separator} />
4048
<Stack direction="column" alignItems="center" spacing={3}>
4149
<ul css={styles.featureList}>
4250
<li css={styles.feature}>
43-
<FeatureIcon /> Template access control
51+
<FeatureIcon />
52+
High availability & workspace proxies
4453
</li>
4554
<li css={styles.feature}>
46-
<FeatureIcon /> User groups
55+
<FeatureIcon />
56+
Multi-org & role-based access control
4757
</li>
4858
<li css={styles.feature}>
49-
<FeatureIcon /> 24 hour support
59+
<FeatureIcon />
60+
24x7 global support with SLA
5061
</li>
5162
<li css={styles.feature}>
52-
<FeatureIcon /> Audit logs
63+
<FeatureIcon />
64+
Unlimited Git & external auth integrations
5365
</li>
5466
</ul>
5567
<Button
@@ -60,29 +72,33 @@ export const Paywall: FC<PaywallProps> = ({
6072
variant="outlined"
6173
color="neutral"
6274
>
63-
Learn about Enterprise
75+
Learn about Premium
6476
</Button>
6577
</Stack>
6678
</div>
6779
);
6880
};
6981

7082
const FeatureIcon: FC = () => {
71-
return <TaskAltIcon css={styles.featureIcon} />;
83+
return (
84+
<TaskAltIcon
85+
css={[
86+
(theme) => ({
87+
color: theme.branding.border,
88+
}),
89+
]}
90+
/>
91+
);
7292
};
7393

7494
const styles = {
75-
root: (theme) => ({
95+
root: () => ({
7696
display: "flex",
7797
flexDirection: "row",
7898
justifyContent: "center",
7999
alignItems: "center",
80-
minHeight: 300,
81-
maxWidth: 920,
82-
margin: "auto",
100+
minHeight: 280,
83101
padding: 24,
84-
backgroundImage: `linear-gradient(160deg, transparent, ${theme.roles.active.background})`,
85-
border: `1px solid ${theme.roles.active.fill.outline}`,
86102
borderRadius: 8,
87103
gap: 32,
88104
}),
@@ -92,25 +108,21 @@ const styles = {
92108
fontSize: 22,
93109
margin: 0,
94110
},
95-
description: (theme) => ({
96-
marginTop: 16,
111+
description: () => ({
97112
fontFamily: "inherit",
98-
maxWidth: 420,
99-
lineHeight: "160%",
100-
color: theme.palette.text.secondary,
101-
fontSize: 16,
113+
maxWidth: 460,
114+
fontSize: 14,
102115
}),
103116
separator: (theme) => ({
104117
width: 1,
105118
height: 220,
106-
backgroundColor: theme.palette.divider,
119+
backgroundColor: theme.branding.divider,
107120
marginLeft: 8,
108121
}),
109122
featureList: {
110123
listStyle: "none",
111124
margin: 0,
112-
marginRight: 8,
113-
padding: "0 12px",
125+
padding: "0 24px",
114126
fontSize: 14,
115127
fontWeight: 500,
116128
},

‎site/src/components/Paywall/PopoverPaywall.stories.tsx

-9
Original file line numberDiff line numberDiff line change
@@ -9,19 +9,10 @@ const meta: Meta<typeof PopoverPaywall> = {
99
export default meta;
1010
type Story = StoryObj<typeof PopoverPaywall>;
1111

12-
export const Enterprise: Story = {
13-
args: {
14-
message: "Black Lotus",
15-
description:
16-
"Adds 3 mana of any single color of your choice to your mana pool, then is discarded. Tapping this artifact can be played as an interrupt.",
17-
},
18-
};
19-
2012
export const Premium: Story = {
2113
args: {
2214
message: "Black Lotus",
2315
description:
2416
"Adds 3 mana of any single color of your choice to your mana pool, then is discarded. Tapping this artifact can be played as an interrupt.",
25-
licenseType: "premium",
2617
},
2718
};

‎site/src/components/Paywall/PopoverPaywall.tsx

+26-23
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import type { Interpolation, Theme } from "@emotion/react";
22
import TaskAltIcon from "@mui/icons-material/TaskAlt";
33
import Button from "@mui/material/Button";
44
import Link from "@mui/material/Link";
5-
import { EnterpriseBadge, PremiumBadge } from "components/Badges/Badges";
5+
import { PremiumBadge } from "components/Badges/Badges";
66
import { Stack } from "components/Stack/Stack";
77
import type { FC, ReactNode } from "react";
88
import { docs } from "utils/docs";
@@ -11,21 +11,27 @@ export interface PopoverPaywallProps {
1111
message: string;
1212
description?: ReactNode;
1313
documentationLink?: string;
14-
licenseType?: "enterprise" | "premium";
1514
}
1615

1716
export const PopoverPaywall: FC<PopoverPaywallProps> = ({
1817
message,
1918
description,
2019
documentationLink,
21-
licenseType = "enterprise",
2220
}) => {
2321
return (
24-
<div css={styles.root}>
22+
<div
23+
css={[
24+
styles.root,
25+
(theme) => ({
26+
backgroundImage: `linear-gradient(160deg, transparent, ${theme.branding.background})`,
27+
border: `1px solid ${theme.branding.border}`,
28+
}),
29+
]}
30+
>
2531
<div>
2632
<Stack direction="row" alignItems="center" css={{ marginBottom: 18 }}>
2733
<h5 css={styles.title}>{message}</h5>
28-
{licenseType === "premium" ? <PremiumBadge /> : <EnterpriseBadge />}
34+
<PremiumBadge />
2935
</Stack>
3036

3137
{description && <p css={styles.description}>{description}</p>}
@@ -38,26 +44,21 @@ export const PopoverPaywall: FC<PopoverPaywallProps> = ({
3844
Read the documentation
3945
</Link>
4046
</div>
41-
<div css={styles.separator}></div>
47+
<div css={styles.separator} />
4248
<Stack direction="column" alignItems="center" spacing={2}>
4349
<ul css={styles.featureList}>
4450
<li css={styles.feature}>
45-
<FeatureIcon /> Template access control
51+
<FeatureIcon /> High availability & workspace proxies
4652
</li>
4753
<li css={styles.feature}>
48-
<FeatureIcon /> User groups
54+
<FeatureIcon /> Multi-org & role-based access control
4955
</li>
5056
<li css={styles.feature}>
51-
<FeatureIcon /> 24 hour support
57+
<FeatureIcon /> 24x7 global support with SLA
5258
</li>
5359
<li css={styles.feature}>
54-
<FeatureIcon /> Audit logs
60+
<FeatureIcon /> Unlimited Git & external auth integrations
5561
</li>
56-
{licenseType === "premium" && (
57-
<li css={styles.feature}>
58-
<FeatureIcon /> Organizations
59-
</li>
60-
)}
6162
</ul>
6263
<Button
6364
href={docs("/enterprise")}
@@ -67,15 +68,23 @@ export const PopoverPaywall: FC<PopoverPaywallProps> = ({
6768
variant="outlined"
6869
color="neutral"
6970
>
70-
Learn about {licenseType === "premium" ? "Premium" : "Enterprise"}
71+
Learn about Premium
7172
</Button>
7273
</Stack>
7374
</div>
7475
);
7576
};
7677

7778
const FeatureIcon: FC = () => {
78-
return <TaskAltIcon css={styles.featureIcon} />;
79+
return (
80+
<TaskAltIcon
81+
css={[
82+
(theme) => ({
83+
color: theme.branding.border,
84+
}),
85+
]}
86+
/>
87+
);
7988
};
8089

8190
const styles = {
@@ -85,8 +94,6 @@ const styles = {
8594
alignItems: "center",
8695
maxWidth: 600,
8796
padding: "24px 36px",
88-
backgroundImage: `linear-gradient(160deg, transparent, ${theme.roles.active.background})`,
89-
border: `1px solid ${theme.roles.active.fill.outline}`,
9097
borderRadius: 8,
9198
gap: 18,
9299
}),
@@ -118,10 +125,6 @@ const styles = {
118125
fontSize: 13,
119126
fontWeight: 500,
120127
},
121-
featureIcon: (theme) => ({
122-
color: theme.roles.active.fill.outline,
123-
fontSize: "1.5em",
124-
}),
125128
feature: {
126129
display: "flex",
127130
alignItems: "center",

‎site/src/pages/AuditPage/AuditPageView.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -138,7 +138,7 @@ export const AuditPageView: FC<AuditPageViewProps> = ({
138138
<Cond>
139139
<Paywall
140140
message="Audit logs"
141-
description="Audit logs allow you to monitor user operations on your deployment. You need an Enterprise license to use this feature."
141+
description="Audit logs allow you to monitor user operations on your deployment. You need an Premium license to use this feature."
142142
documentationLink={docs("/admin/audit-logs")}
143143
/>
144144
</Cond>

‎site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ import type { UpdateAppearanceConfig } from "api/typesGenerated";
55
import {
66
Badges,
77
DisabledBadge,
8-
EnterpriseBadge,
98
EntitledBadge,
9+
PremiumBadge,
1010
} from "components/Badges/Badges";
1111
import { PopoverPaywall } from "components/Paywall/PopoverPaywall";
1212
import {
@@ -64,13 +64,13 @@ export const AppearanceSettingsPageView: FC<
6464
<Popover mode="hover">
6565
<PopoverTrigger>
6666
<span>
67-
<EnterpriseBadge />
67+
<PremiumBadge />
6868
</span>
6969
</PopoverTrigger>
7070
<PopoverContent css={{ transform: "translateY(-28px)" }}>
7171
<PopoverPaywall
7272
message="Appearance"
73-
description="With an Enterprise license, you can customize the appearance of your deployment."
73+
description="With a Premium license, you can customize the appearance of your deployment."
7474
documentationLink="https://coder.com/docs/admin/appearance"
7575
/>
7676
</PopoverContent>

0 commit comments

Comments
 (0)