Add premium badge

code-asher · code-asher · commit 0a526a5facf8 · 2024-08-07T16:46:43.000-08:00
diff --git a/site/src/components/Badges/Badges.tsx b/site/src/components/Badges/Badges.tsx
@@ -123,6 +123,23 @@ export const EnterpriseBadge: FC = () => {
   );
 };
 
+export const PremiumBadge: FC = () => {
+  return (
+    <span
+      css={[
+        styles.badge,
+        (theme) => ({
+          backgroundColor: theme.roles.info.background,
+          border: `1px solid ${theme.roles.info.outline}`,
+          color: theme.roles.info.text,
+        }),
+      ]}
+    >
+      Premium
+    </span>
+  );
+};
+
 export const PreviewBadge: FC = () => {
   return (
     <span
diff --git a/site/src/components/Paywall/PopoverPaywall.stories.tsx b/site/src/components/Paywall/PopoverPaywall.stories.tsx
@@ -9,12 +9,19 @@ const meta: Meta<typeof PopoverPaywall> = {
 export default meta;
 type Story = StoryObj<typeof PopoverPaywall>;
 
-const Example: Story = {
+export const Enterprise: Story = {
   args: {
     message: "Black Lotus",
     description:
       "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.",
   },
 };
 
-export { Example as PopoverPaywall };
+export const Premium: Story = {
+  args: {
+    message: "Black Lotus",
+    description:
+      "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.",
+    licenseType: "premium",
+  },
+};
diff --git a/site/src/components/Paywall/PopoverPaywall.tsx b/site/src/components/Paywall/PopoverPaywall.tsx
@@ -3,27 +3,29 @@ import TaskAltIcon from "@mui/icons-material/TaskAlt";
 import Button from "@mui/material/Button";
 import Link from "@mui/material/Link";
 import type { FC, ReactNode } from "react";
-import { EnterpriseBadge } from "components/Badges/Badges";
+import { EnterpriseBadge, PremiumBadge } from "components/Badges/Badges";
 import { Stack } from "components/Stack/Stack";
 import { docs } from "utils/docs";
 
 export interface PopoverPaywallProps {
   message: string;
   description?: ReactNode;
   documentationLink?: string;
+  licenseType?: "enterprise" | "premium";
 }
 
 export const PopoverPaywall: FC<PopoverPaywallProps> = ({
   message,
   description,
   documentationLink,
+  licenseType = "enterprise",
 }) => {
   return (
     <div css={styles.root}>
       <div>
         <Stack direction="row" alignItems="center" css={{ marginBottom: 18 }}>
           <h5 css={styles.title}>{message}</h5>
-          <EnterpriseBadge />
+          {licenseType === "premium" ? <PremiumBadge /> : <EnterpriseBadge />}
         </Stack>
 
         {description && <p css={styles.description}>{description}</p>}
@@ -51,6 +53,11 @@ export const PopoverPaywall: FC<PopoverPaywallProps> = ({
           <li css={styles.feature}>
             <FeatureIcon /> Audit logs
           </li>
+          {licenseType === "premium" && (
+            <li css={styles.feature}>
+              <FeatureIcon /> Organizations
+            </li>
+          )}
         </ul>
         <Button
           href={docs("/enterprise")}
@@ -60,7 +67,7 @@ export const PopoverPaywall: FC<PopoverPaywallProps> = ({
           variant="outlined"
           color="neutral"
         >
-          Learn about Enterprise
+          Learn about {licenseType === "premium" ? "Premium" : "Enterprise"}
         </Button>
       </Stack>
     </div>
