refactor(feedback-modal): streamline feedback modal components and enhance localization

Author: alienx5499

SortVision/src/components/feedback/FeedbackModal.jsx

@@ -0,0 +1,174 @@
+/**
+ * Assembles the payload sent to submitFeedback (telemetry + form fields).
+ * Side-effect free aside from reading window/document/localStorage.
+ */
+
+function getDeviceInfo() {
+  const ua = navigator.userAgent;
+  const isMobile =
+    /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(ua);
+  const isTablet = /iPad/i.test(ua) || (isMobile && window.innerWidth > 768);
+
+  return {
+    deviceType: isTablet ? 'tablet' : isMobile ? 'mobile' : 'desktop',
+    isMobile,
+    isTablet,
+    platform: navigator.platform || 'Unknown',
+    vendor: navigator.vendor || 'Unknown',
+    cookieEnabled: navigator.cookieEnabled,
+    onlineStatus: navigator.onLine,
+    doNotTrack: navigator.doNotTrack || 'Not set',
+  };
+}
+
+function getNetworkInfo() {
+  const connection =
+    navigator.connection ||
+    navigator.mozConnection ||
+    navigator.webkitConnection;
+  return connection
+    ? {
+        effectiveType: connection.effectiveType || 'Unknown',
+        downlink: connection.downlink || 'Unknown',
+        rtt: connection.rtt || 'Unknown',
+        saveData: connection.saveData || false,
+      }
+    : {
+        effectiveType: 'Unknown',
+        downlink: 'Unknown',
+        rtt: 'Unknown',
+        saveData: false,
+      };
+}
+
+function getPerformanceInfo() {
+  if (performance && performance.timing) {
+    const timing = performance.timing;
+    return {
+      domContentLoaded:
+        timing.domContentLoadedEventEnd - timing.navigationStart,
+      pageLoad: timing.loadEventEnd - timing.navigationStart,
+      dnsLookup: timing.domainLookupEnd - timing.domainLookupStart,
+      tcpConnect: timing.connectEnd - timing.connectStart,
+      serverResponse: timing.responseEnd - timing.requestStart,
+    };
+  }
+  return null;
+}
+
+function getBrowserCapabilities() {
+  return {
+    localStorage: typeof Storage !== 'undefined',
+    sessionStorage: typeof Storage !== 'undefined',
+    webGL: !!window.WebGLRenderingContext,
+    touchSupport: 'ontouchstart' in window,
+    geolocation: 'geolocation' in navigator,
+    webWorkers: typeof Worker !== 'undefined',
+    websockets: 'WebSocket' in window,
+    indexedDB: 'indexedDB' in window,
+    serviceWorker: 'serviceWorker' in navigator,
+    pushNotifications: 'PushManager' in window,
+  };
+}
+
+function getPageContext() {
+  return {
+    url: window.location.href,
+    pathname: window.location.pathname,
+    search: window.location.search,
+    hash: window.location.hash,
+    referrer: document.referrer || 'Direct access',
+    title: document.title,
+    scrollPosition: {
+      x: window.pageXOffset || window.scrollX,
+      y: window.pageYOffset || window.scrollY,
+    },
+    documentHeight: Math.max(
+      document.body.scrollHeight,
+      document.body.offsetHeight,
+      document.documentElement.clientHeight,
+      document.documentElement.scrollHeight,
+      document.documentElement.offsetHeight
+    ),
+  };
+}
+
+function getMemoryInfo() {
+  if (performance && performance.memory) {
+    return {
+      usedJSHeapSize: Math.round(performance.memory.usedJSHeapSize / 1048576),
+      totalJSHeapSize: Math.round(performance.memory.totalJSHeapSize / 1048576),
+      jsHeapSizeLimit: Math.round(performance.memory.jsHeapSizeLimit / 1048576),
+    };
+  }
+  return null;
+}
+
+function getErrorHistory() {
+  const errors = [];
+  try {
+    const storedErrors = localStorage.getItem('sortvision_error_log');
+    if (storedErrors) {
+      errors.push(...JSON.parse(storedErrors));
+    }
+  } catch {
+    // ignore
+  }
+  return errors.slice(-5);
+}
+
+function getFeatureUsage() {
+  try {
+    const usage = localStorage.getItem('sortvision_feature_usage');
+    return usage ? JSON.parse(usage) : null;
+  } catch {
+    return null;
+  }
+}
+
+function getAccessibilityInfo() {
+  return {
+    reduceMotion: window.matchMedia('(prefers-reduced-motion: reduce)').matches,
+    highContrast: window.matchMedia('(prefers-contrast: high)').matches,
+    darkMode: window.matchMedia('(prefers-color-scheme: dark)').matches,
+    forcedColors: window.matchMedia('(forced-colors: active)').matches,
+  };
+}
+
+export function buildEnhancedFeedbackPayload({
+  formData,
+  locationData,
+  sessionId,
+  timeSpentOnSite,
+  persistentSessionStart,
+  appLocale,
+}) {
+  return {
+    ...formData,
+    locationData,
+    sessionData: {
+      sessionId,
+      timeSpentOnSite,
+      sessionStartTime: new Date(persistentSessionStart).toISOString(),
+      submissionTime: new Date().toISOString(),
+      userAgent: navigator.userAgent,
+      screenResolution: `${screen.width}x${screen.height}`,
+      viewportSize: `${window.innerWidth}x${window.innerHeight}`,
+      language: navigator.language,
+      appLocale,
+      languages: navigator.languages || [navigator.language],
+      timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+      colorDepth: screen.colorDepth,
+      pixelRatio: window.devicePixelRatio || 1,
+    },
+    deviceInfo: getDeviceInfo(),
+    networkInfo: getNetworkInfo(),
+    performanceInfo: getPerformanceInfo(),
+    browserCapabilities: getBrowserCapabilities(),
+    pageContext: getPageContext(),
+    memoryInfo: getMemoryInfo(),
+    errorHistory: getErrorHistory(),
+    featureUsage: getFeatureUsage(),
+    accessibilityInfo: getAccessibilityInfo(),
+  };
+}

SortVision/src/components/feedback/buildEnhancedFeedbackPayload.js

@@ -0,0 +1,22 @@
+import { useEffect } from 'react';
+
+export function useFeedbackModalChrome(isOpen, onClose) {
+  useEffect(() => {
+    const onKeyDown = e => {
+      if (e.key === 'Escape' && isOpen) onClose();
+    };
+    document.addEventListener('keydown', onKeyDown);
+    return () => document.removeEventListener('keydown', onKeyDown);
+  }, [isOpen, onClose]);
+
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = 'unset';
+    }
+    return () => {
+      document.body.style.overflow = 'unset';
+    };
+  }, [isOpen]);
+}

SortVision/src/components/feedback/hooks/useFeedbackModalChrome.js

@@ -0,0 +1,92 @@
+import { useState, useEffect, useRef } from 'react';
+import { detectUserLocation, getSimplifiedRegion } from '../locationService';
+
+/**
+ * Runs one-shot geo probe when the modal opens and `locationData` is still null.
+ */
+export function useFeedbackModalLocation(
+  isOpen,
+  shouldLog,
+  onApplyDetectedRegion
+) {
+  const [detectedRegion, setDetectedRegion] = useState('');
+  const [locationData, setLocationData] = useState(null);
+  const [isDetectingLocation, setIsDetectingLocation] = useState(false);
+  const applyRef = useRef(onApplyDetectedRegion);
+  applyRef.current = onApplyDetectedRegion;
+
+  useEffect(() => {
+    if (!isOpen || locationData) return;
+
+    let cancelled = false;
+
+    (async () => {
+      setIsDetectingLocation(true);
+      try {
+        if (shouldLog) {
+          console.log('[SortVision] feedback: starting location detection');
+        }
+        const location = await detectUserLocation();
+
+        const enhancedLocationData = {
+          ...location,
+          country:
+            location.countryFromLocale && location.country === 'Unknown'
+              ? location.countryFromLocale
+              : location.country,
+          detectionDetails: {
+            browser: location.browser,
+            os: location.os,
+            locale: location.locale,
+            platform: location.platform,
+            connectionType: location.connectionType,
+            screenResolution: location.screenResolution,
+          },
+        };
+
+        if (shouldLog) {
+          console.log(
+            '[SortVision] feedback: location detected',
+            enhancedLocationData
+          );
+        }
+
+        if (cancelled) return;
+
+        setLocationData(enhancedLocationData);
+        const simplifiedRegion = getSimplifiedRegion(enhancedLocationData);
+        setDetectedRegion(simplifiedRegion);
+        applyRef.current(simplifiedRegion);
+      } catch (error) {
+        console.error(
+          '[SortVision] feedback: location detection failed',
+          error
+        );
+        if (cancelled) return;
+        setDetectedRegion('Unknown');
+        setLocationData({
+          country: 'Detection failed',
+          region: 'Unknown',
+          city: 'Unknown',
+          timezone: 'Unknown',
+          detectionMethod: 'Failed',
+          accuracy: 'none',
+        });
+      } finally {
+        if (!cancelled) setIsDetectingLocation(false);
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [isOpen, locationData, shouldLog]);
+
+  return {
+    detectedRegion,
+    setDetectedRegion,
+    locationData,
+    setLocationData,
+    isDetectingLocation,
+  };
+}

SortVision/src/components/feedback/hooks/useFeedbackModalLocation.js

@@ -0,0 +1,59 @@
+import { useState, useEffect, useCallback } from 'react';
+
+const SESSION_KEY = 'sortvision_session_id';
+const SESSION_START_KEY = 'sortvision_session_start';
+
+function readOrCreateSessionId() {
+  let id = localStorage.getItem(SESSION_KEY);
+  if (!id) {
+    const timestamp = Date.now().toString(36).toUpperCase();
+    const randomBytes = new Uint8Array(4);
+    crypto.getRandomValues(randomBytes);
+    const randomString = Array.from(randomBytes, byte => byte.toString(36))
+      .join('')
+      .toUpperCase();
+    id = `sess_${timestamp}_${randomString}`;
+    localStorage.setItem(SESSION_KEY, id);
+    localStorage.setItem(SESSION_START_KEY, Date.now().toString());
+  }
+  return id;
+}
+
+function readSessionStartMs() {
+  const stored = localStorage.getItem(SESSION_START_KEY);
+  return stored ? parseInt(stored, 10) : Date.now();
+}
+
+export function useFeedbackModalSession(isOpen) {
+  const [sessionId] = useState(readOrCreateSessionId);
+  const [persistentSessionStart] = useState(readSessionStartMs);
+  const [timeSpentOnSite, setTimeSpentOnSite] = useState(0);
+
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const tick = () => {
+      setTimeSpentOnSite(
+        Math.round((Date.now() - persistentSessionStart) / 1000)
+      );
+    };
+    tick();
+    const interval = setInterval(tick, 10000);
+    return () => clearInterval(interval);
+  }, [isOpen, persistentSessionStart]);
+
+  const formatTimeSpent = useCallback(seconds => {
+    if (seconds < 60) return `${seconds}s`;
+    if (seconds < 3600) return `${Math.floor(seconds / 60)}m ${seconds % 60}s`;
+    const hours = Math.floor(seconds / 3600);
+    const minutes = Math.floor((seconds % 3600) / 60);
+    return `${hours}h ${minutes}m`;
+  }, []);
+
+  return {
+    sessionId,
+    persistentSessionStart,
+    timeSpentOnSite,
+    formatTimeSpent,
+  };
+}

SortVision/src/components/feedback/hooks/useFeedbackModalSession.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import { CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
+import { MessageSquare } from 'lucide-react';
+
+export function FeedbackModalCardHeader({ t, isSubmitting }) {
+  const titleParts = t('feedback.title').split(' ');
+
+  return (
+    <CardHeader className="text-center pr-12">
+      <div className="flex items-center justify-center gap-3 mb-4">
+        <MessageSquare
+          className={`h-7 w-7 transition-all duration-300 ${
+            isSubmitting
+              ? 'text-amber-400 animate-spin'
+              : 'text-emerald-400 animate-pulse'
+          }`}
+          style={{ animationDuration: isSubmitting ? '1s' : '2.5s' }}
+        />
+        <CardTitle className="text-2xl font-bold font-mono text-white">
+          <span className="text-emerald-400">{titleParts[0]}</span>
+          <span className="text-purple-400">
+            {titleParts[1] ? ` ${titleParts[1]}` : ''}
+          </span>
+        </CardTitle>
+      </div>
+
+      {isSubmitting && (
+        <div className="mb-4 animate-in slide-in-from-top-2 duration-300">
+          <div className="w-full bg-slate-700 rounded-full h-1 overflow-hidden">
+            <div className="h-full bg-gradient-to-r from-amber-400 via-emerald-400 to-amber-400 animate-pulse bg-size-200 animate-shimmer" />
+          </div>
+          <div
+            className="text-xs text-amber-400 font-mono mt-2 animate-pulse"
+            style={{ animationDuration: '2s' }}
+          >
+            {t('feedback.processing')}
+          </div>
+        </div>
+      )}
+
+      <CardDescription className="text-slate-400 font-mono">
+        <span className="text-amber-400">//</span> {t('feedback.description')}
+        <br />
+        <span className="text-amber-400">//</span> {t('feedback.description2')}
+      </CardDescription>
+    </CardHeader>
+  );
+}