From d5e3659ab2dc1ce2fdf0a6044f24399b249289d8 Mon Sep 17 00:00:00 2001
From: pradeepkumar <kongupradeep@live.com>
Date: Fri, 20 Mar 2026 12:53:13 +0530
Subject: [PATCH] feat: Implement cancel functionality in settings forms to
 revert to the last saved state and disable the cancel button when no changes
 are made.

---
 src/components/settings/NotificationsForm.tsx | 41 +++++++++++--------
 .../settings/ProfileSettingsForm.tsx          | 20 ++++-----
 2 files changed, 33 insertions(+), 28 deletions(-)

diff --git a/src/components/settings/NotificationsForm.tsx b/src/components/settings/NotificationsForm.tsx
index 5a91b44..ff112ec 100644
--- a/src/components/settings/NotificationsForm.tsx
+++ b/src/components/settings/NotificationsForm.tsx
@@ -54,6 +54,8 @@ export function NotificationsForm({ onSave }: NotificationsFormProps) {
 
   const [notifications, setNotifications] = useState<NotificationCategory[]>(DEFAULT_NOTIFICATIONS);
   const [digestFrequency, setDigestFrequency] = useState<DigestFrequency>('instant');
+  const [savedNotifications, setSavedNotifications] = useState<NotificationCategory[]>(DEFAULT_NOTIFICATIONS);
+  const [savedDigestFrequency, setSavedDigestFrequency] = useState<DigestFrequency>('instant');
 
   const fetchPreferences = useCallback(async () => {
     if (!session) return;
@@ -67,23 +69,24 @@ export function NotificationsForm({ onSave }: NotificationsFormProps) {
       const savedPrefs = response.data?.data || response.data || {};
 
       if (savedPrefs.notifications) {
-        setNotifications((prev) =>
-          prev.map((item) => {
-            const saved = savedPrefs.notifications[item.id];
-            if (saved) {
-              return {
-                ...item,
-                email: saved.email ?? item.email,
-                inApp: saved.inApp ?? item.inApp,
-              };
-            }
-            return item;
-          })
-        );
+        const updated = DEFAULT_NOTIFICATIONS.map((item) => {
+          const saved = savedPrefs.notifications[item.id];
+          if (saved) {
+            return {
+              ...item,
+              email: saved.email ?? item.email,
+              inApp: saved.inApp ?? item.inApp,
+            };
+          }
+          return item;
+        });
+        setNotifications(updated);
+        setSavedNotifications(updated);
       }
 
       if (savedPrefs.digestFrequency) {
         setDigestFrequency(savedPrefs.digestFrequency);
+        setSavedDigestFrequency(savedPrefs.digestFrequency);
       }
     } catch {
       console.log('No saved notification preferences found, using defaults');
@@ -126,6 +129,8 @@ export function NotificationsForm({ onSave }: NotificationsFormProps) {
 
       await api.put(endpoint, preferences);
 
+      setSavedNotifications([...notifications]);
+      setSavedDigestFrequency(digestFrequency);
       setSuccess('Notification preferences saved successfully!');
 
       if (onSave) {
@@ -141,9 +146,12 @@ export function NotificationsForm({ onSave }: NotificationsFormProps) {
     }
   };
 
+  const hasChanges = JSON.stringify(notifications) !== JSON.stringify(savedNotifications) || digestFrequency !== savedDigestFrequency;
+
   const handleCancel = () => {
-    setNotifications(DEFAULT_NOTIFICATIONS);
-    setDigestFrequency('instant');
+    if (!hasChanges) return;
+    setNotifications([...savedNotifications]);
+    setDigestFrequency(savedDigestFrequency);
     setError(null);
     setSuccess(null);
   };
@@ -297,7 +305,8 @@ export function NotificationsForm({ onSave }: NotificationsFormProps) {
           <button
             type="button"
             onClick={handleCancel}
-            className="px-10 py-3 border border-[#00293D]/10 rounded-[15px] font-fractul font-bold text-[14px] text-[#00293D] hover:bg-[#00293D]/5 transition-colors"
+            disabled={!hasChanges || isSaving}
+            className="px-10 py-3 border border-[#00293D]/10 rounded-[15px] font-fractul font-bold text-[14px] text-[#00293D] hover:bg-[#00293D]/5 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
           >
             Cancel
           </button>
diff --git a/src/components/settings/ProfileSettingsForm.tsx b/src/components/settings/ProfileSettingsForm.tsx
index 403e8f2..171c95f 100644
--- a/src/components/settings/ProfileSettingsForm.tsx
+++ b/src/components/settings/ProfileSettingsForm.tsx
@@ -330,19 +330,15 @@ export function ProfileSettingsForm({
     }
   };
 
+  const hasChanges = originalData
+    ? JSON.stringify(formData) !== JSON.stringify(originalData)
+    : false;
+
   const handleCancel = () => {
-    // Reset to original fetched data (including phone)
+    if (!hasChanges) return;
+    // Reset to last saved data
     if (originalData) {
       setFormData(originalData);
-    } else if (session?.user) {
-      // Fallback to session data if original not available
-      const nameParts = (session.user?.name || '').split(' ');
-      setFormData(prev => ({
-        ...prev,
-        firstName: nameParts[0] || prev.firstName,
-        lastName: nameParts.slice(1).join(' ') || prev.lastName,
-        email: session.user?.email || prev.email,
-      }));
     }
     setError(null);
     setSuccessMessage(null);
@@ -528,8 +524,8 @@ export function ProfileSettingsForm({
       <div className="mt-8 flex justify-end gap-3">
         <button
           onClick={handleCancel}
-          disabled={isSaving}
-          className="px-8 py-3 border border-[#00293D]/30 text-[#00293D] rounded-[10px] font-serif font-medium text-[14px] hover:bg-[#00293d]/5 transition-colors disabled:opacity-50"
+          disabled={isSaving || !hasChanges}
+          className="px-8 py-3 border border-[#00293D]/30 text-[#00293D] rounded-[10px] font-serif font-medium text-[14px] hover:bg-[#00293d]/5 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
         >
           Cancel
         </button>