Customised Analytics for admins and users (#4687)

Adds granular privacy controls for analytics - splits single enableAnalytics toggle into separate PostHog and Scarf controls with improved admin UX. Backend Changes Configuration (ApplicationProperties.java) - Added enablePosthog and enableScarf boolean fields - New methods: isPosthogEnabled(), isScarfEnabled() (null = enabled when analytics is on) Services - PostHogService: Now checks isPosthogEnabled() instead of isAnalyticsEnabled() - ConfigController: Exposes new flags via API - SettingsController: Changed endpoint from @RequestBody to @RequestParam Frontend Changes Architecture - Converted useAppConfig hook → AppConfigContext provider for global access - Added refetch() method for config updates without reload New Features 1. AdminAnalyticsChoiceModal: First-launch modal when enableAnalytics === null - Enable/disable without editing YAML - Includes documentation link 2. Scarf Tracking System: Modular utility with React hook wrapper - Respects config + per-service cookie consent - Works from any code location (React or vanilla JS) 3. Enhanced Cookie Consent: Per-service toggles (PostHog and Scarf separate) Integration - App.tsx: Added AppConfigProvider + scarf initializer - HomePage.tsx: Shows admin modal when needed - index.tsx: PostHog opt-out by default, service-level consent Key Benefits ✅ Backward compatible (null defaults to enabled) ✅ Granular control per analytics service ✅ First-launch admin modal (no YAML editing) ✅ Privacy-focused with opt-out defaults ✅ API-based config updates --------- Co-authored-by: Connor Yoh <connor@stirlingpdf.com>
2025-10-27 16:54:59 +00:00
parent 2e932f30bf
commit 960d48f80c
22 changed files with 418 additions and 109 deletions
@@ -0,0 +1,112 @@
+import { Modal, Stack, Button, Text, Title, Anchor } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import { useState } from 'react';
+import { Z_ANALYTICS_MODAL } from '../../styles/zIndex';
+import { useAppConfig } from '../../contexts/AppConfigContext';
+import apiClient from '../../services/apiClient';
+
+interface AdminAnalyticsChoiceModalProps {
+  opened: boolean;
+  onClose: () => void;
+}
+
+export default function AdminAnalyticsChoiceModal({ opened, onClose }: AdminAnalyticsChoiceModalProps) {
+  const { t } = useTranslation();
+  const { refetch } = useAppConfig();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleChoice = async (enableAnalytics: boolean) => {
+    setLoading(true);
+    setError(null);
+
+    try {
+      const formData = new FormData();
+      formData.append('enabled', enableAnalytics.toString());
+
+      await apiClient.post('/api/v1/settings/update-enable-analytics', formData);
+
+      // Refetch config to apply new settings without page reload
+      await refetch();
+
+      // Close the modal after successful save
+      onClose();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Unknown error occurred');
+      setLoading(false);
+    }
+  };
+
+  const handleEnable = () => {
+    handleChoice(true);
+  };
+
+  const handleDisable = () => {
+    handleChoice(false);
+  };
+
+  return (
+    <Modal
+      opened={opened}
+      onClose={() => {}} // Prevent closing
+      closeOnClickOutside={false}
+      closeOnEscape={false}
+      withCloseButton={false}
+      size="lg"
+      centered
+      zIndex={Z_ANALYTICS_MODAL}
+    >
+      <Stack gap="md">
+        <Title order={2}>{t('analytics.title', 'Do you want make Stirling PDF better?')}</Title>
+
+        <Text size="sm" c="dimmed">
+          {t('analytics.paragraph1', 'Stirling PDF has opt in analytics to help us improve the product. We do not track any personal information or file contents.')}
+        </Text>
+
+        <Text size="sm" c="dimmed">
+          {t('analytics.paragraph2', 'Please consider enabling analytics to help Stirling-PDF grow and to allow us to understand our users better.')}{' '}
+          <Anchor
+            href="https://docs.stirlingpdf.com/analytics-telemetry"
+            target="_blank"
+            rel="noopener noreferrer"
+            size="sm"
+          >
+            {t('analytics.learnMore', 'Learn more')}
+          </Anchor>
+        </Text>
+
+        {error && (
+          <Text c="red" size="sm">
+            {error}
+          </Text>
+        )}
+
+        <Stack gap="sm">
+          <Button
+            onClick={handleEnable}
+            loading={loading}
+            fullWidth
+            size="md"
+          >
+            {t('analytics.enable', 'Enable analytics')}
+          </Button>
+
+          <Button
+            onClick={handleDisable}
+            loading={loading}
+            fullWidth
+            size="md"
+            variant="subtle"
+            c="gray"
+          >
+            {t('analytics.disable', 'Disable analytics')}
+          </Button>
+        </Stack>
+
+        <Text size="xs" c="dimmed" ta="center">
+          {t('analytics.settings', 'You can change the settings for analytics in the config/settings.yml file')}
+        </Text>
+      </Stack>
+    </Modal>
+  );
+}