From 715e832b50a78ca5b3f1db5a6c9855d25f3174f2 Mon Sep 17 00:00:00 2001
From: "use-tusk[bot]" <144006087+use-tusk[bot]@users.noreply.github.com>
Date: Mon, 30 Sep 2024 17:49:39 +0000
Subject: [PATCH 1/2] refactor(popups): control 'Don't worry' message
 visibility based on popup type

---
 .../ProFeatureWrapper.tsx                     | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/web/components/shared/ProBlockerComponents/ProFeatureWrapper.tsx b/web/components/shared/ProBlockerComponents/ProFeatureWrapper.tsx
index 08df37a675..07aa62b16a 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,7 +41,7 @@ const titles = {
 export const ProFeatureWrapper = forwardRef<
   HTMLElement,
   ProFeatureWrapperProps
->(({ children, featureName, enabled = true }, ref) => {
+>(({ children, featureName, enabled = true, isNeedMoreRequestsPopup = false }, ref) => {
   const [isDialogOpen, setIsDialogOpen] = useState(false);
   const org = useOrg();
 
@@ -92,6 +94,11 @@ export const ProFeatureWrapper = forwardRef<
             <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>
+            )}
           </DialogHeader>
           <p className="text-sm text-gray-500 mb-4">
             {customDescription ||
@@ -156,10 +163,12 @@ export const ProFeatureWrapper = forwardRef<
               />
             </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>
+          {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>
     </>

From 141f7a8232004ddef23d9ab70b23f6f2d0ac4ba0 Mon Sep 17 00:00:00 2001
From: "use-tusk[bot]" <144006087+use-tusk[bot]@users.noreply.github.com>
Date: Mon, 30 Sep 2024 17:53:21 +0000
Subject: [PATCH 2/2] fix(11111442745): auto linting

---
 .../ProFeatureWrapper.tsx                     | 259 +++++++++---------
 1 file changed, 134 insertions(+), 125 deletions(-)

diff --git a/web/components/shared/ProBlockerComponents/ProFeatureWrapper.tsx b/web/components/shared/ProBlockerComponents/ProFeatureWrapper.tsx
index 07aa62b16a..d5621cfc2a 100644
--- a/web/components/shared/ProBlockerComponents/ProFeatureWrapper.tsx
+++ b/web/components/shared/ProBlockerComponents/ProFeatureWrapper.tsx
@@ -41,138 +41,147 @@ const titles = {
 export const ProFeatureWrapper = forwardRef<
   HTMLElement,
   ProFeatureWrapperProps
->(({ children, featureName, enabled = true, isNeedMoreRequestsPopup = false }, 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>
-            {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>
-            )}
-          </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>
-          {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>
-    </>
-  );
-});
+            {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";