feat: enhance consent management and server configuration updates

- Updated consent handling in the ConsentDialog and SettingsSectionContent components to use new state management methods.
- Refactored the consent store to include agreeToTerms, declineTerms, and toggleTelemetry functions for better clarity and functionality.
- Modified incrementDownloads and updateServerStats functions to include client and server names based on user consent.
- Improved user experience by managing dialog visibility based on consent status.

Author: milisp

src/components/server/hooks/useSaveServerConfig.ts

@@ -35,7 +35,7 @@ export function useSaveServerConfig() {
       } catch (e) {
         // already have
       }
-      incrementDownloads(currentServer.id);
+      incrementDownloads(currentServer.id, selectedClient, selectedServer);
       console.log("add server", new Date(), server);
     } catch (error) {
       console.error(error);

src/components/settings/SettingsSectionContent.tsx

@@ -22,9 +22,12 @@ const SettingsSectionContent: React.FC<SettingsSectionContentProps> = ({
 }) => {
   // Use zustand store for privacy state
   const telemetryEnabled = useConsentStore((state) => state.telemetryEnabled);
-  const setTelemetryEnabled = useConsentStore(
-    (state) => state.setTelemetryEnabled,
+  const toggleTelemetry = useConsentStore(
+    (state) => state.toggleTelemetry,
   );
+  const hasAgreedToTerms = useConsentStore((state) => state.hasAgreedToTerms);
+  const agreeToTerms = useConsentStore((state) => state.agreeToTerms);
+  const declineTerms = useConsentStore((state) => state.declineTerms);
 
   if (selectedSection === "encryption") {
     return (
@@ -50,7 +53,14 @@ const SettingsSectionContent: React.FC<SettingsSectionContentProps> = ({
           <span>Allow anonymous usage data</span>
           <Switch
             checked={telemetryEnabled}
-            onCheckedChange={setTelemetryEnabled}
+            onCheckedChange={toggleTelemetry}
+          />
+        </div>
+        <div className="flex items-center space-x-4">
+          <span>I agree to terms</span>
+          <Switch
+            checked={hasAgreedToTerms}
+            onCheckedChange={(val) => (val ? agreeToTerms() : declineTerms())}
           />
         </div>
       </div>

src/components/settings/consent.tsx

@@ -6,25 +6,33 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog";
 import { useConsentStore } from "@/stores/consentStore";
+import { useEffect, useState } from "react";
 
 export function ConsentDialog() {
   const hasAgreed = useConsentStore((state) => state.hasAgreedToTerms);
-  const setHasAgreed = useConsentStore((state) => state.setHasAgreedToTerms);
-  const setTelemetryEnabled = useConsentStore(
-    (state) => state.setTelemetryEnabled,
-  );
+  const agreeToTerms = useConsentStore((state) => state.agreeToTerms);
+  const declineTerms = useConsentStore((state) => state.declineTerms);
+
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    if (!hasAgreed) {
+      setOpen(true);
+    }
+  }, [hasAgreed]);
 
   const handleAgree = () => {
-    setHasAgreed(true); // This will also enable telemetry
+    agreeToTerms();
+    setOpen(false);
   };
 
   const handleDecline = () => {
-    setHasAgreed(true); // Mark as seen so dialog won't show again
-    setTelemetryEnabled(false); // Disable telemetry explicitly
+    declineTerms();
+    setOpen(false);
   };
 
   return (
-    <Dialog open={!hasAgreed}>
+    <Dialog open={open} onOpenChange={setOpen}>
       <DialogContent>
         <DialogTitle>Terms and Conditions</DialogTitle>
         <div>
@@ -45,4 +53,4 @@ export function ConsentDialog() {
       </DialogContent>
     </Dialog>
   );
-}
+}

src/lib/api/servers.ts

@@ -1,4 +1,5 @@
 import { api } from "@/lib/api";
+import { useConsentStore } from "@/stores/consentStore";
 import { toast } from "sonner";
 
 function buildQueryParams(
@@ -64,15 +65,23 @@ export async function fetchServers(
   }
 }
 
-export async function updateServerStats(path: string, serverId: string) {
+export async function updateServerStats(path: string, serverId: string, clientName: string, serverName: string) {
+  const { hasAgreedToTerms } = useConsentStore.getState();
+  const payload = {
+    client_name: hasAgreedToTerms ? clientName : "",
+    server_name: hasAgreedToTerms ? serverName : "",
+  };
+  
+  console.log("hasAgreedToTerms", hasAgreedToTerms, payload);
+  
   try {
-    const response = await api.post(`/servers/${serverId}${path}`);
+    const response = await api.post(`/servers/${serverId}${path}`, payload);
     console.log("Stats updated:", response.data);
   } catch (error) {
     console.error("Error updating server stats:", error);
   }
 }
 
-export async function incrementDownloads(serverId: string) {
-  await updateServerStats("/download-count", serverId);
+export async function incrementDownloads(serverId: string, clientName: string, serverName: string) {
+  await updateServerStats("/download-count", serverId, clientName, serverName);
 }

src/stores/consentStore.ts

@@ -4,25 +4,31 @@ import { persist } from "zustand/middleware";
 interface ConsentStore {
   hasAgreedToTerms: boolean;
   telemetryEnabled: boolean;
-  setHasAgreedToTerms: (val: boolean) => void;
-  setTelemetryEnabled: (val: boolean) => void;
-  setConsentDeclined: () => void;
+  agreeToTerms: () => void;
+  declineTerms: () => void;
+  toggleTelemetry: (val: boolean) => void;
 }
 
 export const useConsentStore = create<ConsentStore>()(
   persist(
-    (set) => ({
+    (set, get) => ({
       hasAgreedToTerms: false,
       telemetryEnabled: false,
-      setHasAgreedToTerms: (val) => set({
-        hasAgreedToTerms: val,
-        telemetryEnabled: val ? true : false, // Enable telemetry only if agreed
-      }),
-      setTelemetryEnabled: (val) => set({ telemetryEnabled: val }),
-      setConsentDeclined: () => set({
-        hasAgreedToTerms: true,
-        telemetryEnabled: false,
-      }),
+      agreeToTerms: () =>
+        set({
+          hasAgreedToTerms: true,
+          telemetryEnabled: true,
+        }),
+      declineTerms: () =>
+        set({
+          hasAgreedToTerms: false,
+          telemetryEnabled: false,
+        }),
+      toggleTelemetry: (val: boolean) => {
+        if (get().hasAgreedToTerms) {
+          set({ telemetryEnabled: val });
+        }
+      },
     }),
     {
       name: "consent-storage", // unique name for localStorage