diff --git a/web/components/shared/ProBlockerComponents/ProFeatureWrapper.tsx b/web/components/shared/ProBlockerComponents/ProFeatureWrapper.tsx index 08df37a675..d5621cfc2a 100644 --- a/web/components/shared/ProBlockerComponents/ProFeatureWrapper.tsx +++ b/web/components/shared/ProBlockerComponents/ProFeatureWrapper.tsx @@ -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"; @@ -13,6 +14,7 @@ interface ProFeatureWrapperProps { children: React.ReactElement; featureName: string; enabled?: boolean; + isNeedMoreRequestsPopup?: boolean; } const descriptions = { @@ -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] + ); - - - - - {titles[featureName as keyof typeof titles]} - - -

- {customDescription || - "The Free plan only comes with 10,000 requests per month, but getting more is easy."} -

-
-
-

Free

- {!isPro && ( - - Current plan - - )} -
    -
  • - - 10k free requests/month -
  • -
  • - - Access to Dashboard -
  • -
  • - - Free, truly -
  • -
-
-
-

Pro

- {isPro && ( - - Current plan - + 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, + })} + + + + + + {titles[featureName as keyof typeof titles]} + + {featureName === "Alerts" && ( + + The Free plan does not include the Alerts feature, upgrade to + Pro to enable Alerts. + )} - $20/user -

Everything in Free, plus:

-
    -
  • - - Limitless requests (first 100k free) -
  • -
  • - - Access to all features -
  • -
  • - - Standard support -
  • -
- - See all features → - +
+

+ {customDescription || + "The Free plan only comes with 10,000 requests per month, but getting more is easy."} +

+
+
+

Free

+ {!isPro && ( + + Current plan + + )} +
    +
  • + + 10k free requests/month +
  • +
  • + + Access to Dashboard +
  • +
  • + + Free, truly +
  • +
+
+
+

Pro

+ {isPro && ( + + Current plan + + )} + $20/user +

Everything in Free, plus:

+
    +
  • + + Limitless requests (first 100k free) +
  • +
  • + + Access to all features +
  • +
  • + + Standard support +
  • +
+ + See all features → + - + +
-
-

- Don't worry, we are still processing all your incoming - requests. You will be able to see them when you upgrade to Pro. -

- -
- - ); -}); + {isNeedMoreRequestsPopup && ( +

+ Don't worry, we are still processing all your incoming + requests. You will be able to see them when you upgrade to Pro. +

+ )} + + + + ); + } +); ProFeatureWrapper.displayName = "ProFeatureWrapper";