Add paywall for audit logs v2

frontend/src/views/Project/AuditLogsPage/components/LogsSection.tsx

@@ -1,13 +1,25 @@
+import { useEffect } from "react";
 import { useForm } from "react-hook-form";
+import { useRouter } from "next/router";
 import { yupResolver } from "@hookform/resolvers/yup";
 
+import { UpgradePlanModal } from "@app/components/v2";
+import { useSubscription } from "@app/context";
 import { EventType, UserAgentType } from "@app/hooks/api/auditLogs/enums";
+import { usePopUp } from "@app/hooks/usePopUp";
 
 import { LogsFilter } from "./LogsFilter";
 import { LogsTable } from "./LogsTable";
 import { AuditLogFilterFormData, auditLogFilterFormSchema } from "./types";
 
 export const LogsSection = () => {
+    const { subscription } = useSubscription();
+    const router = useRouter();
+    
+    const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp([
+        "upgradePlan"
+    ] as const);
+    
     const {
         control,
         reset,
@@ -20,6 +32,12 @@ export const LogsSection = () => {
             perPage: 10
         }
     });
+    
+    useEffect(() => {
+        if (subscription && !subscription.auditLogs) {
+            handlePopUpOpen("upgradePlan");
+        }
+    }, [subscription]);
 
     const eventType = watch("eventType") as EventType | undefined;
     const userAgentType = watch("userAgentType") as UserAgentType | undefined;
@@ -54,6 +72,19 @@ export const LogsSection = () => {
                 perPage={perPage}
                 setValue={setValue}
             />
+            <UpgradePlanModal
+                isOpen={popUp.upgradePlan.isOpen}
+                onOpenChange={(isOpen) => {
+                    
+                    if (!isOpen) {
+                        router.back();
+                        return;
+                    }
+
+                    handlePopUpToggle("upgradePlan", isOpen)
+                }}
+                text="You can use audit logs if you switch to a paid Infisical plan."
+            />
         </div>
     );
  }