Skip to content

Commit

Permalink
Enterprise fix (#2661)
Browse files Browse the repository at this point in the history
  • Loading branch information
@colegottdank
colegottdank committed Sep 19, 2024
1 parent b4b7d3e commit 09bd5ba
Show file tree
Hide file tree
Showing 10 changed files with 326 additions and 141 deletions.
42 changes: 22 additions & 20 deletions web/components/layout/auth/DesktopSidebar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,10 @@ const DesktopSidebar = ({ NAVIGATION }: SidebarProps) => {
false
);

const shouldShowInfoBox = useMemo(() => {
return tier === "pro" || tier === "growth";
}, [tier]);

const [expandedItems, setExpandedItems] = useLocalStorage<string[]>(
"expandedItems",
[]
Expand Down Expand Up @@ -202,26 +206,24 @@ const DesktopSidebar = ({ NAVIGATION }: SidebarProps) => {
</nav>
</div>
</div>
{canShowInfoBox &&
!isCollapsed &&
(tier === "free" || tier === "growth") && (
<div className="p-2">
<InfoBox icon={() => <></>} className="flex flex-col">
<div>
<span className="text-[#1c4ed8] text-xs font-semibold leading-tight">
Early Adopter Exclusive: $120 Credit for the year. <br />
</span>
<span className="text-[#1c4ed8] text-xs font-light leading-tight">
Switch to Pro and get $10/mo credit for 1 year, as a thank
you for your early support!
</span>
</div>
<Button className="bg-blue-700 mt-[10px] text-xs" size="xs">
<Link href="/settings/billing">Upgrade to Pro</Link>
</Button>
</InfoBox>
</div>
)}
{canShowInfoBox && !isCollapsed && shouldShowInfoBox && (
<div className="p-2">
<InfoBox icon={() => <></>} className="flex flex-col">
<div>
<span className="text-[#1c4ed8] text-xs font-semibold leading-tight">
Early Adopter Exclusive: $120 Credit for the year. <br />
</span>
<span className="text-[#1c4ed8] text-xs font-light leading-tight">
Switch to Pro and get $10/mo credit for 1 year, as a thank
you for your early support!
</span>
</div>
<Button className="bg-blue-700 mt-[10px] text-xs" size="xs">
<Link href="/settings/billing">Upgrade to Pro</Link>
</Button>
</InfoBox>
</div>
)}
<div className="mt-auto">
{isCollapsed ? (
<>
Expand Down
2 changes: 2 additions & 0 deletions web/components/shared/ProBlockerComponents/ProFeatureWrapper.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,8 @@ export const ProFeatureWrapper = forwardRef<
enabled &&
(org?.currentOrg?.tier === "pro-20240913" ||
org?.currentOrg?.tier === "growth" ||
org?.currentOrg?.tier === "pro" ||
org?.currentOrg?.tier === "enterprise" ||
(org?.currentOrg?.stripe_metadata as { addons?: { prompts?: boolean } })
?.addons?.prompts)
);
Expand Down
140 changes: 72 additions & 68 deletions web/components/shared/helicone/FeatureUpgradeCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ interface FeatureUpgradeCardProps {
videoSrc?: string;
youtubeVideo?: string;
documentationLink: string;
tier?: string;
}

export const FeatureUpgradeCard: React.FC<FeatureUpgradeCardProps> = ({
Expand All @@ -27,6 +28,7 @@ export const FeatureUpgradeCard: React.FC<FeatureUpgradeCardProps> = ({
videoSrc,
youtubeVideo,
documentationLink,
tier = "free",
}) => {
const [isPlanComparisonVisible, setIsPlanComparisonVisible] = useState(false);

Expand Down Expand Up @@ -60,77 +62,79 @@ export const FeatureUpgradeCard: React.FC<FeatureUpgradeCardProps> = ({
></iframe>
)}
</CardContent>
<CardFooter className="flex flex-col justify-between w-full">
<Button
variant="link"
className="px-0 w-full text-left flex justify-start"
onClick={() => setIsPlanComparisonVisible(!isPlanComparisonVisible)}
>
Compare my plan with Pro{" "}
{isPlanComparisonVisible ? (
<ChevronUpIcon className="ml-1 h-4 w-4" />
) : (
<ChevronDownIcon className="ml-1 h-4 w-4" />
)}
</Button>
{isPlanComparisonVisible && (
<div className="mt-4 p-4 border rounded-md">
<h3 className="text-lg font-semibold mb-4">Plan Comparison</h3>
<div className="grid grid-cols-2 gap-4">
<div className="border rounded-lg p-4">
<h3 className="font-semibold mb-2">Free</h3>
<span className="text-xs text-blue-600 bg-blue-100 px-2 py-1 rounded-full">
Current plan
</span>
<ul className="mt-4 space-y-2">
<li className="flex items-center text-sm">
<CheckIcon className="mr-2 h-4 w-4 text-green-500" />
10k free requests/month
</li>
<li className="flex items-center text-sm">
<CheckIcon className="mr-2 h-4 w-4 text-green-500" />
Access to Dashboard
</li>
<li className="flex items-center text-sm">
<CheckIcon className="mr-2 h-4 w-4 text-green-500" />
Free, truly
</li>
</ul>
</div>
<div className="border rounded-lg p-4">
<h3 className="font-semibold mb-2">Pro</h3>
<span className="text-sm">$20/user</span>
<p className="text-sm mt-2">Everything in Free, plus:</p>
<ul className="mt-4 space-y-2">
<li className="flex items-center text-sm">
<CheckIcon className="mr-2 h-4 w-4 text-green-500" />
Limitless requests (first 100k free)
</li>
<li className="flex items-center text-sm">
<CheckIcon className="mr-2 h-4 w-4 text-green-500" />
Access to all features
</li>
<li className="flex items-center text-sm">
<CheckIcon className="mr-2 h-4 w-4 text-green-500" />
Standard support
</li>
</ul>
<a href="#" className="text-sm text-blue-600 mt-2 block">
See all features →
</a>
{tier === "free" && (
<CardFooter className="flex flex-col justify-between w-full">
<Button
variant="link"
className="px-0 w-full text-left flex justify-start"
onClick={() => setIsPlanComparisonVisible(!isPlanComparisonVisible)}
>
Compare my plan with Pro{" "}
{isPlanComparisonVisible ? (
<ChevronUpIcon className="ml-1 h-4 w-4" />
) : (
<ChevronDownIcon className="ml-1 h-4 w-4" />
)}
</Button>
{isPlanComparisonVisible && (
<div className="mt-4 p-4 border rounded-md">
<h3 className="text-lg font-semibold mb-4">Plan Comparison</h3>
<div className="grid grid-cols-2 gap-4">
<div className="border rounded-lg p-4">
<h3 className="font-semibold mb-2">Free</h3>
<span className="text-xs text-blue-600 bg-blue-100 px-2 py-1 rounded-full">
Current plan
</span>
<ul className="mt-4 space-y-2">
<li className="flex items-center text-sm">
<CheckIcon className="mr-2 h-4 w-4 text-green-500" />
10k free requests/month
</li>
<li className="flex items-center text-sm">
<CheckIcon className="mr-2 h-4 w-4 text-green-500" />
Access to Dashboard
</li>
<li className="flex items-center text-sm">
<CheckIcon className="mr-2 h-4 w-4 text-green-500" />
Free, truly
</li>
</ul>
</div>
<div className="border rounded-lg p-4">
<h3 className="font-semibold mb-2">Pro</h3>
<span className="text-sm">$20/user</span>
<p className="text-sm mt-2">Everything in Free, plus:</p>
<ul className="mt-4 space-y-2">
<li className="flex items-center text-sm">
<CheckIcon className="mr-2 h-4 w-4 text-green-500" />
Limitless requests (first 100k free)
</li>
<li className="flex items-center text-sm">
<CheckIcon className="mr-2 h-4 w-4 text-green-500" />
Access to all features
</li>
<li className="flex items-center text-sm">
<CheckIcon className="mr-2 h-4 w-4 text-green-500" />
Standard support
</li>
</ul>
<a href="#" className="text-sm text-blue-600 mt-2 block">
See all features →
</a>
</div>
</div>
</div>
)}
<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 className="w-1/2">
<Link href="/settings/billing">Start 14-day free trial</Link>
</Button>
</div>
)}
<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 className="w-1/2">
<Link href="/settings/billing">Start 14-day free trial</Link>
</Button>
</div>
</CardFooter>
</CardFooter>
)}
</Card>
);
};
36 changes: 15 additions & 21 deletions web/components/templates/alerts/alertsPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,19 @@ const AlertsPage = (props: AlertsPageProps) => {
const { data: slackChannelsData, isLoading: isLoadingSlackChannels } =
useGetOrgSlackChannels(orgContext?.currentOrg?.id || "");

const isAlertsEnabled = () => {
const metadata = orgContext?.currentOrg?.stripe_metadata as {
addons?: { alerts?: boolean };
};
return (
(metadata?.addons?.alerts &&
orgContext?.currentOrg?.tier === "pro-20240913") ||
orgContext?.currentOrg?.tier === "enterprise" ||
orgContext?.currentOrg?.tier === "growth" ||
orgContext?.currentOrg?.tier === "pro"
);
};

function formatTimeWindow(milliseconds: number): string {
// Define the time windows with an index signature

Expand All @@ -61,7 +74,6 @@ const AlertsPage = (props: AlertsPageProps) => {
return (
<div className="flex flex-col space-y-16">
<div className="flex flex-col space-y-8">
{/* Active Alerts */}
<div className="flex flex-col sm:flex-row justify-between items-center">
<div className="flex flex-col space-y-1">
<h4 className="text-gray-800 text-xl font-semibold dark:text-gray-200">
Expand All @@ -74,16 +86,7 @@ const AlertsPage = (props: AlertsPageProps) => {
</div>

<Col className="items-end">
<ProFeatureWrapper
featureName="Alerts"
enabled={
(
orgContext?.currentOrg?.stripe_metadata as {
addons?: { alerts?: boolean };
}
)?.addons?.alerts ?? false
}
>
<ProFeatureWrapper featureName="Alerts" enabled={isAlertsEnabled()}>
<button
onClick={() => setCreateNewAlertModal(true)}
className="w-min bg-gray-900 hover:bg-gray-700 dark:bg-gray-100 dark:hover:bg-gray-300 whitespace-nowrap rounded-md px-4 py-2 text-sm font-semibold text-white dark:text-black shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-500"
Expand All @@ -95,16 +98,7 @@ const AlertsPage = (props: AlertsPageProps) => {
</div>
<ul className="">
{alerts.length === 0 ? (
<ProFeatureWrapper
featureName="Alerts"
enabled={
(
orgContext?.currentOrg?.stripe_metadata as {
addons?: { alerts?: boolean };
}
)?.addons?.alerts ?? false
}
>
<ProFeatureWrapper featureName="Alerts" enabled={isAlertsEnabled()}>
<button
onClick={() => setCreateNewAlertModal(true)}
className="relative block w-full rounded-lg border-2 border-dashed bg-gray-200 hover:bg-gray-300 dark:bg-gray-800 dark:hover:bg-gray-700 hover:cursor-pointer border-gray-500 p-12 text-center focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
Expand Down
31 changes: 30 additions & 1 deletion web/components/templates/datasets/datasetsPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ import { SortDirection } from "../../../services/lib/sorts/users/sorts";
import AuthHeader from "../../shared/authHeader";
import ThemedTable from "../../shared/themed/table/themedTable";
import { FeatureUpgradeCard } from "@/components/shared/helicone/FeatureUpgradeCard";
import { useMemo } from "react";
import { useOrg } from "@/components/layout/organizationContext";

interface DatasetsPageProps {
currentPage: number;
Expand All @@ -23,10 +25,26 @@ const DatasetsPage = (props: DatasetsPageProps) => {

const router = useRouter();

const org = useOrg();

const hasAccess = useMemo(() => {
return (
org?.currentOrg?.tier === "growth" ||
org?.currentOrg?.tier === "enterprise" ||
(org?.currentOrg?.tier === "pro-20240913" &&
(org?.currentOrg?.stripe_metadata as { addons?: { prompts?: boolean } })
?.addons?.prompts)
);
}, [org?.currentOrg?.tier, org?.currentOrg?.stripe_metadata]);

const hasLimitedAccess = useMemo(() => {
return !hasAccess && (datasets?.length ?? 0) > 0;
}, [hasAccess, datasets?.length]);

return (
<>
<AuthHeader title={"Datasets"} />
{!isLoading && datasets.length === 0 ? (
{!isLoading && org?.currentOrg?.tier === "free" ? (
<div className="flex flex-col space-y-2 w-full items-center">
<FeatureUpgradeCard
title="Unlock Datasets"
Expand All @@ -36,6 +54,17 @@ const DatasetsPage = (props: DatasetsPageProps) => {
documentationLink="https://docs.helicone.ai/features/sessions"
/>
</div>
) : datasets?.length === 0 ? (
<div className="flex flex-col space-y-2 w-full items-center">
<FeatureUpgradeCard
title="Get Started with Datasets"
description="You have access to Datasets, but haven't created any yet. It's easy to get started!"
infoBoxText="Organize your requests into datasets for evals or fine-tuning."
videoSrc="https://marketing-assets-helicone.s3.us-west-2.amazonaws.com/creating-dataset.mp4"
documentationLink="https://docs.helicone.ai/features/sessions"
tier={org?.currentOrg?.tier ?? "free"}
/>
</div>
) : (
<ThemedTable
isDatasetsPage={true}
Expand Down
Loading

0 comments on commit 09bd5ba

Please sign in to comment.