From c5fc49b4fae0d15ab0c68434d086947ee3cc89db Mon Sep 17 00:00:00 2001
From: Fred KISSIE <fredkiss3@gmail.com>
Date: Thu, 5 Mar 2026 19:31:19 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A7=20wip?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../CreatePolicyAuthMethodsSectionForm.tsx    | 30 ++++++++++++-------
 .../CreatePolicyOtpEmailSectionForm.tsx       |  6 ++--
 .../CreatePolicyRulesSectionForm.tsx          |  6 ++--
 3 files changed, 26 insertions(+), 16 deletions(-)

diff --git a/src/components/resource-policy/CreatePolicyAuthMethodsSectionForm.tsx b/src/components/resource-policy/CreatePolicyAuthMethodsSectionForm.tsx
index fb456e823..f881104cb 100644
--- a/src/components/resource-policy/CreatePolicyAuthMethodsSectionForm.tsx
+++ b/src/components/resource-policy/CreatePolicyAuthMethodsSectionForm.tsx
@@ -43,10 +43,11 @@ import {
     InputOTPSlot
 } from "@app/components/ui/input-otp";
 
+import { cn } from "@app/lib/cn";
 import { Binary, Bot, Key, Plus } from "lucide-react";
 
 import { useState } from "react";
-import { type UseFormReturn, useForm } from "react-hook-form";
+import { type UseFormReturn, useForm, useWatch } from "react-hook-form";
 
 // ─── CreatePolicyAuthMethodsSectionForm ───────────────────────────────────────
 
@@ -72,14 +73,23 @@ export function CreatePolicyAuthMethodsSectionForm({
     form
 }: CreatePolicyAuthMethodsSectionFormProps) {
     const t = useTranslations();
-    const [isOpen, setIsOpen] = useState(false);
+    const [isExpanded, setIsExpanded] = useState(false);
     const [isSetPasswordOpen, setIsSetPasswordOpen] = useState(false);
     const [isSetPincodeOpen, setIsSetPincodeOpen] = useState(false);
     const [isSetHeaderAuthOpen, setIsSetHeaderAuthOpen] = useState(false);
 
-    const password = form.watch("password");
-    const pincode = form.watch("pincode");
-    const headerAuth = form.watch("headerAuth");
+    const password = useWatch({
+        control: form.control,
+        name: "password"
+    });
+    const pincode = useWatch({
+        control: form.control,
+        name: "pincode"
+    });
+    const headerAuth = useWatch({
+        control: form.control,
+        name: "headerAuth"
+    });
 
     const passwordForm = useForm({
         resolver: zodResolver(setPasswordSchema),
@@ -96,7 +106,7 @@ export function CreatePolicyAuthMethodsSectionForm({
         defaultValues: { user: "", password: "", extendedCompatibility: true }
     });
 
-    if (!isOpen) {
+    if (!isExpanded) {
         return (
             <SettingsSection>
                 <SettingsSectionHeader>
@@ -111,7 +121,7 @@ export function CreatePolicyAuthMethodsSectionForm({
                     <Button
                         type="button"
                         variant="outline"
-                        onClick={() => setIsOpen(true)}
+                        onClick={() => setIsExpanded(true)}
                     >
                         <Plus className="mr-2 h-4 w-4" />
                         {t("resourcePolicyAuthMethodAdd")}
@@ -392,7 +402,7 @@ export function CreatePolicyAuthMethodsSectionForm({
                         {/* Password row */}
                         <div className="flex items-center justify-between border rounded-md p-2 mb-4">
                             <div
-                                className={`flex items-center ${password ? "text-green-500" : ""} text-sm space-x-2`}
+                                className={cn("flex items-center text-sm space-x-2", password && "text-green-500")}
                             >
                                 <Key size="14" />
                                 <span>
@@ -422,7 +432,7 @@ export function CreatePolicyAuthMethodsSectionForm({
                         {/* Pincode row */}
                         <div className="flex items-center justify-between border rounded-md p-2">
                             <div
-                                className={`flex items-center ${pincode ? "text-green-500" : ""} space-x-2 text-sm`}
+                                className={cn("flex items-center space-x-2 text-sm", pincode && "text-green-500")}
                             >
                                 <Binary size="14" />
                                 <span>
@@ -450,7 +460,7 @@ export function CreatePolicyAuthMethodsSectionForm({
                         {/* Header auth row */}
                         <div className="flex items-center justify-between border rounded-md p-2">
                             <div
-                                className={`flex items-center ${headerAuth ? "text-green-500" : ""} space-x-2 text-sm`}
+                                className={cn("flex items-center space-x-2 text-sm", headerAuth && "text-green-500")}
                             >
                                 <Bot size="14" />
                                 <span>
diff --git a/src/components/resource-policy/CreatePolicyOtpEmailSectionForm.tsx b/src/components/resource-policy/CreatePolicyOtpEmailSectionForm.tsx
index a43dfcc11..ce8ac54b9 100644
--- a/src/components/resource-policy/CreatePolicyOtpEmailSectionForm.tsx
+++ b/src/components/resource-policy/CreatePolicyOtpEmailSectionForm.tsx
@@ -46,13 +46,13 @@ export function CreatePolicyOtpEmailSectionForm({
     emailEnabled
 }: CreatePolicyOtpEmailSectionFormProps) {
     const t = useTranslations();
-    const [isOpen, setIsOpen] = useState(false);
+    const [isExpanded, setIsExpanded] = useState(false);
     const [whitelistEnabled, setWhitelistEnabled] = useState(false);
     const [activeEmailTagIndex, setActiveEmailTagIndex] = useState<
         number | null
     >(null);
 
-    if (!isOpen) {
+    if (!isExpanded) {
         return (
             <SettingsSection>
                 <SettingsSectionHeader>
@@ -67,7 +67,7 @@ export function CreatePolicyOtpEmailSectionForm({
                     <Button
                         type="button"
                         variant="outline"
-                        onClick={() => setIsOpen(true)}
+                        onClick={() => setIsExpanded(true)}
                     >
                         <Plus className="mr-2 h-4 w-4" />
                         {t("resourcePolicyOtpEmailAdd")}
diff --git a/src/components/resource-policy/CreatePolicyRulesSectionForm.tsx b/src/components/resource-policy/CreatePolicyRulesSectionForm.tsx
index 7cb703dad..87152fa09 100644
--- a/src/components/resource-policy/CreatePolicyRulesSectionForm.tsx
+++ b/src/components/resource-policy/CreatePolicyRulesSectionForm.tsx
@@ -116,7 +116,7 @@ export function CreatePolicyRulesSectionForm({
     isMaxmindAsnAvailable
 }: CreatePolicyRulesSectionFormProps) {
     const t = useTranslations();
-    const [isOpen, setIsOpen] = useState(false);
+    const [isExpanded, setIsExpanded] = useState(false);
     const [rules, setRules] = useState<LocalRule[]>([]);
     const [rulesEnabled, setRulesEnabled] = useState(false);
     const [openAddRuleCountrySelect, setOpenAddRuleCountrySelect] =
@@ -613,7 +613,7 @@ export function CreatePolicyRulesSectionForm({
         state: { pagination: { pageIndex: 0, pageSize: 1000 } }
     });
 
-    if (!isOpen) {
+    if (!isExpanded) {
         return (
             <SettingsSection>
                 <SettingsSectionHeader>
@@ -628,7 +628,7 @@ export function CreatePolicyRulesSectionForm({
                     <Button
                         type="button"
                         variant="outline"
-                        onClick={() => setIsOpen(true)}
+                        onClick={() => setIsExpanded(true)}
                     >
                         <Plus className="mr-2 h-4 w-4" />
                         {t("resourcePolicyRulesAdd")}