Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[ENG-1132] Remove “don’t worry…” message from “Unlock Alerts” and add conditional rendering #2701

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

[ENG-1132] Remove “don’t worry…” message from “Unlock Alerts” and add conditional rendering #2701

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
715e832
refactor(popups): control 'Don't worry' message visibility based on p…
use-tusk[bot] Sep 30, 2024
141f7a8
fix(11111442745): auto linting
use-tusk[bot] Sep 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
254 changes: 136 additions & 118 deletions web/components/shared/ProBlockerComponents/ProFeatureWrapper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import {
DialogContent,
DialogHeader,
DialogTitle,
DialogDescription,
} from "@/components/ui/dialog";
import { CheckIcon } from "lucide-react";
import React, { forwardRef, useCallback, useMemo, useState } from "react";
Expand All @@ -13,6 +14,7 @@ interface ProFeatureWrapperProps {
children: React.ReactElement;
featureName: string;
enabled?: boolean;
isNeedMoreRequestsPopup?: boolean;
}

const descriptions = {
Expand All @@ -39,131 +41,147 @@ const titles = {
export const ProFeatureWrapper = forwardRef<
HTMLElement,
ProFeatureWrapperProps
>(({ children, featureName, enabled = true }, ref) => {
const [isDialogOpen, setIsDialogOpen] = useState(false);
const org = useOrg();
>(
(
{ children, featureName, enabled = true, isNeedMoreRequestsPopup = false },
ref
) => {
const [isDialogOpen, setIsDialogOpen] = useState(false);
const org = useOrg();

const customDescription = useMemo(
() => descriptions?.[featureName as keyof typeof descriptions],
[featureName]
);

const hasAccess = React.useMemo(() => {
return (
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)
const customDescription = useMemo(
() => descriptions?.[featureName as keyof typeof descriptions],
[featureName]
);
}, [org?.currentOrg?.tier, org?.currentOrg?.stripe_metadata, enabled]);

const handleClick = useCallback(
(e: React.MouseEvent) => {
if (!hasAccess) {
e.preventDefault();
e.stopPropagation();
setIsDialogOpen(true);
} else if (children.props.onClick) {
children.props.onClick(e);
}
},
[hasAccess, children.props, setIsDialogOpen]
);
const hasAccess = React.useMemo(() => {
return (
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)
);
}, [org?.currentOrg?.tier, org?.currentOrg?.stripe_metadata, enabled]);

const isPro = useMemo(() => {
return org?.currentOrg?.tier === "pro-20240913";
}, [org?.currentOrg?.tier]);
return (
<>
{React.cloneElement(children, {
ref,
onClick: handleClick,
className: !hasAccess
? `${children.props.className || ""} `
: children.props.className,
})}
const handleClick = useCallback(
(e: React.MouseEvent) => {
if (!hasAccess) {
e.preventDefault();
e.stopPropagation();
setIsDialogOpen(true);
} else if (children.props.onClick) {
children.props.onClick(e);
}
},
[hasAccess, children.props, setIsDialogOpen]
);

<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
<DialogContent className="max-w-3xl">
<DialogHeader>
<DialogTitle>
{titles[featureName as keyof typeof titles]}
</DialogTitle>
</DialogHeader>
<p className="text-sm text-gray-500 mb-4">
{customDescription ||
"The Free plan only comes with 10,000 requests per month, but getting more is easy."}
</p>
<div className="grid grid-cols-2 gap-4">
<div className="border rounded-lg p-4">
<h3 className="font-semibold mb-2">Free</h3>
{!isPro && (
<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>
{isPro && (
<span className="text-xs text-blue-600 bg-blue-100 px-2 py-1 rounded-full">
Current plan
</span>
const isPro = useMemo(() => {
return org?.currentOrg?.tier === "pro-20240913";
}, [org?.currentOrg?.tier]);
return (
<>
{React.cloneElement(children, {
ref,
onClick: handleClick,
className: !hasAccess
? `${children.props.className || ""} `
: children.props.className,
})}

<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
<DialogContent className="max-w-3xl">
<DialogHeader>
<DialogTitle>
{titles[featureName as keyof typeof titles]}
</DialogTitle>
{featureName === "Alerts" && (
<DialogDescription className="text-sm text-blue-600 bg-blue-100 p-2 rounded">
The Free plan does not include the Alerts feature, upgrade to
Pro to enable Alerts.
</DialogDescription>
)}
<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>
</DialogHeader>
<p className="text-sm text-gray-500 mb-4">
{customDescription ||
"The Free plan only comes with 10,000 requests per month, but getting more is easy."}
</p>
<div className="grid grid-cols-2 gap-4">
<div className="border rounded-lg p-4">
<h3 className="font-semibold mb-2">Free</h3>
{!isPro && (
<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>
{isPro && (
<span className="text-xs text-blue-600 bg-blue-100 px-2 py-1 rounded-full">
Current plan
</span>
)}
<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>

<UpgradeToProCTA
defaultPrompts={featureName === "Prompts"}
defaultAlerts={featureName === "Alerts"}
showAddons={
featureName === "Prompts" || featureName === "Alerts"
}
/>
<UpgradeToProCTA
defaultPrompts={featureName === "Prompts"}
defaultAlerts={featureName === "Alerts"}
showAddons={
featureName === "Prompts" || featureName === "Alerts"
}
/>
</div>
</div>
</div>
<p className="text-sm text-gray-500 mt-4">
Don&apos;t worry, we are still processing all your incoming
requests. You will be able to see them when you upgrade to Pro.
</p>
</DialogContent>
</Dialog>
</>
);
});
{isNeedMoreRequestsPopup && (
<p className="text-sm text-gray-500 mt-4">
Don&apos;t worry, we are still processing all your incoming
requests. You will be able to see them when you upgrade to Pro.
</p>
)}
</DialogContent>
</Dialog>
</>
);
}
);

ProFeatureWrapper.displayName = "ProFeatureWrapper";
Loading