Popup fixes

web/components/shared/ProBlockerComponents/ProFeatureWrapper.tsx

@@ -24,6 +24,16 @@ const descriptions = {
     "Free plan users can only access data up to 30 days old. Upgrade to Pro for unlimited access to 3m+ data.",
   invite:
     "The Free plan does not allow you to invite members to your organization. Upgrade to Pro to invite your team members.",
+  RateLimit:
+    "The Free plan does not allow you to set custom rate limits. Upgrade to Pro to set custom rate limits.",
+};
+
+const titles = {
+  Datasets: "Unlock Datasets",
+  Alerts: "Unlock Alerts",
+  time_filter: "Unlock Time Filter",
+  invite: "Unlock Invite",
+  RateLimit: "Unlock Rate Limits",
 };
 
 export const ProFeatureWrapper = forwardRef<
@@ -77,7 +87,9 @@ export const ProFeatureWrapper = forwardRef<
       <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
         <DialogContent className="max-w-3xl">
           <DialogHeader>
-            <DialogTitle>Need more requests?</DialogTitle>
+            <DialogTitle>
+              {titles[featureName as keyof typeof titles]}
+            </DialogTitle>
           </DialogHeader>
           <p className="text-sm text-gray-500 mb-4">
             {customDescription ||

web/components/shared/helicone/FeatureUpgradeCard.tsx

@@ -60,7 +60,7 @@ export const FeatureUpgradeCard: React.FC<FeatureUpgradeCardProps> = ({
           ></iframe>
         )}
       </CardContent>
-      <CardFooter className="flex flex-col justify-between">
+      <CardFooter className="flex flex-col justify-between w-full">
         <Button
           variant="link"
           className="px-0 w-full text-left flex justify-start"
@@ -122,11 +122,11 @@ export const FeatureUpgradeCard: React.FC<FeatureUpgradeCardProps> = ({
             </div>
           </div>
         )}
-        <div className="space-x-2 mt-4">
-          <Button variant="outline" asChild>
+        <div className="flex mt-4 flex-row w-full gap-4">
+          <Button variant="outline" asChild className="w-1/2">
             <Link href={documentationLink}>View documentation</Link>
           </Button>
-          <Button asChild>
+          <Button asChild className="w-1/2">
             <Link href="/settings/billing">Start 14-day free trial</Link>
           </Button>
         </div>

web/components/templates/rateLimit/rateLimitPage.tsx

@@ -1,5 +1,5 @@
-import { BookOpenIcon, ShieldCheckIcon } from "@heroicons/react/24/outline";
-import { AreaChart, Badge, Divider } from "@tremor/react";
+import { BookOpenIcon } from "@heroicons/react/24/outline";
+import { AreaChart, Badge } from "@tremor/react";
 import Link from "next/link";
 import { useState } from "react";
 import { TimeFilter } from "../../../lib/api/handlerWrappers";
@@ -19,8 +19,8 @@ import RequestsPageV2 from "../requestsV2/requestsPageV2";
 import { useGetPropertiesV2 } from "../../../services/hooks/propertiesV2";
 import { getPropertyFiltersV2 } from "../../../services/lib/filters/frontendFilterDefs";
 import { useOrg } from "@/components/layout/organizationContext";
-import { Button } from "@/components/ui/button";
-import { DiffHighlight } from "../welcome/diffHighlight";
+
+import { FeatureUpgradeCard } from "../../shared/helicone/FeatureUpgradeCard";
 
 const RateLimitPage = (props: {}) => {
   const [timeFilter, setTimeFilter] = useState<TimeFilter>({
@@ -37,7 +37,7 @@ const RateLimitPage = (props: {}) => {
       return currentTimeFilter || "24h";
     }
   };
-  const { properties } = useGetPropertiesV2(getPropertyFiltersV2);
+  const { properties, isLoading } = useGetPropertiesV2(getPropertyFiltersV2);
 
   const org = useOrg();
   const isPro =
@@ -109,71 +109,14 @@ const RateLimitPage = (props: {}) => {
           </Link>
         }
       />
-      {!isPro || !properties.find((x) => x === "Helicone-Rate-Limit-Status") ? (
-        <div className="flex flex-col w-full mt-16 justify-center items-center">
-          <div className="flex flex-col">
-            <div className="w-fit pt-2 pl-0.5 bg-white border border-gray-300 rounded-md">
-              <ShieldCheckIcon className="h-10 w-10 flex items-center justify-center ml-2 text-gray-500" />
-            </div>
-
-            <p className="text-xl text-black dark:text-white font-semibold mt-8">
-              {!isPro
-                ? "Upgrade to Pro to start using Rate Limits"
-                : "No Rate Limit Data Found"}
-            </p>
-            <p className="text-sm text-gray-500 max-w-sm mt-2">
-              View our documentation to learn how to use rate limiting.
-            </p>
-            <div className="mt-4 flex gap-2">
-              <Link
-                href="https://docs.helicone.ai/features/advanced-usage/custom-rate-limits"
-                className="w-fit items-center rounded-lg bg-black dark:bg-white px-2.5 py-1.5 gap-2 text-sm flex font-medium text-white dark:text-black shadow-sm hover:bg-gray-800 dark:hover:bg-gray-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
-              >
-                <BookOpenIcon className="h-4 w-4" />
-                View Docs
-              </Link>
-              {!isPro && (
-                <Link href="/settings/billing">
-                  <Button className="bg-sky-500 hover:bg-sky-600">
-                    Start free trial
-                  </Button>
-                </Link>
-              )}
-            </div>
-            {isPro && (
-              <div>
-                <Divider>Or</Divider>
-
-                <div className="mt-4">
-                  <h3 className="text-xl text-black dark:text-white font-semibold">
-                    TS/JS Quick Start
-                  </h3>
-                  <DiffHighlight
-                    code={`
-import { Configuration, OpenAIApi } from "openai";
-const configuration = new Configuration({
-  apiKey: process.env.OPENAI_API_KEY,
-  basePath: "https://oai.helicone.ai/v1",
-  defaultHeaders: {
-    "Helicone-Property-IP": "111.1.1.1",
-    "Helicone-RateLimit-Policy": "10;w=1000;u=cents;s=user", // add this header and set the header value
-  },
-});
-const openai = new OpenAIApi(configuration);
-
-const response = await openai.createCompletion({
-  model: "text-davinci-003",
-  prompt: "How do I set custom rate limits?",
-});
-`}
-                    language="typescript"
-                    newLines={[]}
-                    oldLines={[]}
-                  />
-                </div>
-              </div>
-            )}
-          </div>
+      {!isPro && !properties.find((x) => x === "Helicone-Rate-Limit-Status") ? (
+        <div className="flex justify-center items-center min-h-[calc(100vh-200px)]">
+          <FeatureUpgradeCard
+            title="Unlock Rate Limits"
+            description="The Free plan does not include the Rate Limits feature, but getting access is easy."
+            infoBoxText="Enforcing custom API usage restrictions with rate limits."
+            documentationLink="https://docs.helicone.ai/features/advanced-usage/custom-rate-limits"
+          />
         </div>
       ) : (
         <Col className="gap-8">

web/pages/signin.tsx

@@ -8,7 +8,6 @@ import { supabaseServer } from "../lib/supabaseServer";
 import { Result, err, ok } from "../lib/result";
 import PublicMetaData from "../components/layout/public/publicMetaData";
 import { useEffect } from "react";
-import { InfoBox } from "../components/ui/helicone/infoBox"; // Import InfoBox
 
 export type CustomerPortalContent = {
   domain: string;

web/pages/signup.tsx

@@ -10,7 +10,6 @@ import PublicMetaData from "../components/layout/public/publicMetaData";
 import { GetServerSidePropsContext } from "next";
 import posthog from "posthog-js";
 import { InfoBanner } from "../components/shared/themed/themedDemoBanner";
-import { InfoBox } from "../components/ui/helicone/infoBox";
 
 const SignUp = () => {
   const supabase = useSupabaseClient();