feat: add usage banner on landing page (#2304)

livepeer · Sep 3, 2024 · 9609119 · 9609119
1 parent 5c4808c
commit 9609119
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 5 deletions.
diff --git a/packages/www/pages/projects/[projectId]/index.tsx b/packages/www/pages/projects/[projectId]/index.tsx
@@ -19,7 +19,7 @@ const Dashboard = () => {
   const [loading, setLoading] = useState(false);
   const [shouldShowFeature, setShouldShowFeature] = useState(false);
   const product = getUserProduct(user);
-  const showPromo = user.disabled;
+  const showPromo = user?.disabled;
   const [openSnackbar] = useSnackbar();
 
   const resendVerificationEmail = async () => {
@@ -68,19 +68,34 @@ const Dashboard = () => {
       {showPromo && (
         <Banner
           title="Upgrade"
+          titleCss={{
+            color: "$red11",
+            fontWeight: 600,
+            fontSize: "14px",
+          }}
+          descriptionCss={{
+            color: "$red11",
+            fontSize: "12px",
+          }}
+          css={{
+            background: "$red3",
+            mb: "$6",
+          }}
           description="Your free tier usage limit has been reached or we were unable to process your payment. Upgrade to our Growth or Scale plans or update your payment method to continue using Livepeer Studio."
           button={
-            <Link href="/dashboard/billing/plans" passHref legacyBehavior>
+            <Link href={"/settings/billing/plans"} passHref legacyBehavior>
               <Button
-                variant="primary"
+                variant="tomato"
                 as="a"
                 size="2"
-                css={{ cursor: "default" }}>
+                css={{
+                  cursor: "default",
+                  border: "1px solid $tomato7",
+                }}>
                 Upgrade
               </Button>
             </Link>
           }
-          css={{ mb: "$7" }}
         />
       )}
       <Box css={{ mb: "$6" }}>

diff --git a/packages/www/pages/settings/projects.tsx b/packages/www/pages/settings/projects.tsx
@@ -17,6 +17,7 @@ import CreateProjectDialog from "components/Project/createProjectDialog";
 import { useProjectContext } from "context/ProjectContext";
 import Link from "next/link";
 import FeaturesModel from "components/FeaturesModel";
+import Banner from "components/Banner";
 
 const WorkspaceProjects = () => {
   useLoggedIn();
@@ -43,6 +44,7 @@ const WorkspaceProjects = () => {
   }, [queryClient]);
 
   const { data } = useQuery("projects", getProjects);
+  const showPromo = user?.disabled;
 
   if (!user) {
     return <Layout />;
@@ -63,6 +65,39 @@ const WorkspaceProjects = () => {
           },
         }}>
         <Box css={{ mb: "$6" }}>
+          {showPromo && (
+            <Banner
+              title="Upgrade"
+              titleCss={{
+                color: "$red11",
+                fontWeight: 600,
+                fontSize: "14px",
+              }}
+              descriptionCss={{
+                color: "$red11",
+                fontSize: "12px",
+              }}
+              css={{
+                background: "$red3",
+                mb: "$6",
+              }}
+              description="Your free tier usage limit has been reached or we were unable to process your payment. Upgrade to our Growth or Scale plans or update your payment method to continue using Livepeer Studio."
+              button={
+                <Link href={"/settings/billing/plans"} passHref legacyBehavior>
+                  <Button
+                    variant="tomato"
+                    as="a"
+                    size="2"
+                    css={{
+                      cursor: "default",
+                      border: "1px solid $tomato7",
+                    }}>
+                    Upgrade
+                  </Button>
+                </Link>
+              }
+            />
+          )}
           <Flex
             justify={"between"}
             css={{