@redacto.io/consent-sdk-react 3.4.0 → 3.6.0

package/src/RedactoPrivacyCenter/context/NavigationContext.tsx

@@ -0,0 +1,64 @@
+import { createContext, useContext, useState, useCallback, type ReactNode } from 'react';
+
+export type InternalPage = 'consent-manager' | 'form' | 'activity';
+
+const NAV_STORAGE_KEY = 'pc_current_page';
+
+const VALID_PAGES: ReadonlySet<string> = new Set<InternalPage>([
+  'consent-manager', 'form', 'activity',
+]);
+
+function getStoredPage(fallback: InternalPage): InternalPage {
+  if (typeof window === 'undefined') return fallback;
+  try {
+    const stored = sessionStorage.getItem(NAV_STORAGE_KEY);
+    if (stored && VALID_PAGES.has(stored)) {
+      return stored as InternalPage;
+    }
+  } catch {
+    // sessionStorage unavailable
+  }
+  return fallback;
+}
+
+interface NavigationContextType {
+  currentPage: InternalPage;
+  navigateTo: (page: InternalPage) => void;
+}
+
+const NavigationContext = createContext<NavigationContextType | null>(null);
+
+export const NavigationProvider = ({
+  children,
+  initialPage = 'consent-manager'
+}: {
+  children: ReactNode;
+  initialPage?: InternalPage;
+}) => {
+  const [currentPage, setCurrentPage] = useState<InternalPage>(
+    () => getStoredPage(initialPage)
+  );
+
+  const navigateTo = useCallback((page: InternalPage) => {
+    setCurrentPage(page);
+    try {
+      sessionStorage.setItem(NAV_STORAGE_KEY, page);
+    } catch {
+      // sessionStorage unavailable
+    }
+  }, []);
+
+  return (
+    <NavigationContext.Provider value={{ currentPage, navigateTo }}>
+      {children}
+    </NavigationContext.Provider>
+  );
+};
+
+export const useInternalNavigation = () => {
+  const context = useContext(NavigationContext);
+  if (!context) {
+    throw new Error('useInternalNavigation must be used within a NavigationProvider');
+  }
+  return context;
+};

package/src/RedactoPrivacyCenter/context/OrganizationContext.tsx

@@ -0,0 +1,30 @@
+import React, { createContext, useContext, ReactNode } from 'react';
+import type { OrganizationDetail } from '../lib/types';
+
+export const OrganizationContext = createContext<{
+  organization: OrganizationDetail | null;
+} | null>(null);
+
+export const OrganizationProvider = ({
+  children,
+  organization,
+}: {
+  children: ReactNode;
+  organization: OrganizationDetail | null;
+}) => {
+  return (
+    <OrganizationContext.Provider value={{ organization }}>
+      {children}
+    </OrganizationContext.Provider>
+  );
+};
+
+export const useOrganization = () => {
+  const context = useContext(OrganizationContext);
+  if (!context) {
+    throw new Error(
+      'useOrganization must be used within a OrganizationProvider'
+    );
+  }
+  return context;
+};

package/src/RedactoPrivacyCenter/context/PageChromeContext.tsx

@@ -0,0 +1,60 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+  type ReactNode,
+} from 'react';
+
+export type PageChromeOverride = {
+  titleKey: string;
+  descriptionKey?: string;
+};
+
+type PageChromeContextValue = {
+  pageChromeOverride: PageChromeOverride | null;
+  setPageChromeOverride: (override: PageChromeOverride | null) => void;
+  clearPageChromeOverride: () => void;
+};
+
+const PageChromeContext = createContext<PageChromeContextValue | null>(null);
+
+export function PageChromeProvider({ children }: { children: ReactNode }) {
+  const [pageChromeOverride, setPageChromeOverrideState] =
+    useState<PageChromeOverride | null>(null);
+
+  const setPageChromeOverride = useCallback(
+    (override: PageChromeOverride | null) => {
+      setPageChromeOverrideState(override);
+    },
+    []
+  );
+
+  const clearPageChromeOverride = useCallback(() => {
+    setPageChromeOverrideState(null);
+  }, []);
+
+  const value = useMemo(
+    () => ({
+      pageChromeOverride,
+      setPageChromeOverride,
+      clearPageChromeOverride,
+    }),
+    [pageChromeOverride, setPageChromeOverride, clearPageChromeOverride]
+  );
+
+  return (
+    <PageChromeContext.Provider value={value}>
+      {children}
+    </PageChromeContext.Provider>
+  );
+}
+
+export function usePageChrome() {
+  const context = useContext(PageChromeContext);
+  if (!context) {
+    throw new Error('usePageChrome must be used within a PageChromeProvider');
+  }
+  return context;
+}

package/src/RedactoPrivacyCenter/context/theme.tsx

@@ -0,0 +1,127 @@
+import {
+  createContext,
+  useContext,
+  useState,
+  useEffect,
+  useCallback,
+  type ReactNode,
+} from 'react';
+
+export type Theme = 'light' | 'dark';
+
+type ThemeContextType = {
+  theme: Theme;
+  toggleTheme: () => void;
+  setTheme: (theme: Theme) => void;
+  isTransitioning: boolean;
+  targetTheme: Theme | null;
+};
+
+const THEME_STORAGE_KEY = 'privacy-center-theme';
+
+const ThemeContext = createContext<ThemeContextType | null>(null);
+
+function getInitialTheme(defaultTheme?: Theme): Theme {
+  // If defaultTheme is provided, always use it (takes precedence over sessionStorage)
+  // This ensures that when a parent component explicitly sets a theme, it's respected
+  if (defaultTheme !== undefined) {
+    return defaultTheme;
+  }
+
+  // Otherwise, check sessionStorage first
+  if (typeof window !== 'undefined') {
+    const stored = sessionStorage.getItem(THEME_STORAGE_KEY);
+    if (stored === 'light' || stored === 'dark') {
+      return stored;
+    }
+
+    // Fallback to system preference
+    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      return 'dark';
+    }
+  }
+
+  return 'light';
+}
+
+type ThemeProviderProps = {
+  children: ReactNode;
+  defaultTheme?: Theme;
+};
+
+export const ThemeProvider = ({ children, defaultTheme }: ThemeProviderProps) => {
+  // Initialize with defaultTheme if provided, otherwise use stored/system preference
+  // When defaultTheme is provided, it takes precedence over sessionStorage
+  const [theme, setThemeState] = useState<Theme>(() => getInitialTheme(defaultTheme));
+  const [isTransitioning, setIsTransitioning] = useState(false);
+  const [targetTheme, setTargetTheme] = useState<Theme | null>(null);
+  
+  // Ensure defaultTheme is applied on mount if provided
+  // This handles the case where sessionStorage had a different value
+  useEffect(() => {
+    if (defaultTheme !== undefined) {
+      setThemeState(defaultTheme);
+    }
+  }, []); // Only run on mount
+
+  const setTheme = useCallback((newTheme: Theme) => {
+    if (newTheme !== theme) {
+      setIsTransitioning(true);
+      setTargetTheme(newTheme);
+      setThemeState(newTheme);
+      // Reset transition state after animation completes
+      setTimeout(() => {
+        setIsTransitioning(false);
+        setTargetTheme(null);
+      }, 1000);
+    }
+  }, [theme]);
+
+  const toggleTheme = useCallback(() => {
+    setIsTransitioning(true);
+    const newTheme = theme === 'light' ? 'dark' : 'light';
+    setTargetTheme(newTheme);
+    setThemeState(newTheme);
+    // Reset transition state after animation completes
+    setTimeout(() => {
+      setIsTransitioning(false);
+      setTargetTheme(null);
+    }, 1000);
+  }, [theme]);
+
+  // Apply theme to document and persist to sessionStorage
+  useEffect(() => {
+    document.documentElement.setAttribute('data-theme', theme);
+    sessionStorage.setItem(THEME_STORAGE_KEY, theme);
+  }, [theme]);
+
+  // Listen for system theme changes
+  useEffect(() => {
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+
+    const handleChange = (e: MediaQueryListEvent) => {
+      // Only auto-switch if user hasn't explicitly set a preference
+      const stored = sessionStorage.getItem(THEME_STORAGE_KEY);
+      if (!stored) {
+        setThemeState(e.matches ? 'dark' : 'light');
+      }
+    };
+
+    mediaQuery.addEventListener('change', handleChange);
+    return () => mediaQuery.removeEventListener('change', handleChange);
+  }, []);
+
+  return (
+    <ThemeContext.Provider value={{ theme, toggleTheme, setTheme, isTransitioning, targetTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};
+
+export const useTheme = (): ThemeContextType => {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return context;
+};