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

Lines changed: 3 additions & 3 deletions
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

Lines changed: 2 additions & 19 deletions
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

Lines changed: 1 addition & 3 deletions
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

Lines changed: 37 additions & 25 deletions
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

Lines changed: 0 additions & 9 deletions
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

Lines changed: 26 additions & 23 deletions
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

Lines changed: 1 addition & 1 deletion
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

Lines changed: 3 additions & 3 deletions
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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy