@redacto.io/consent-sdk-react 4.0.0 → 5.1.0

package/src/RedactoPrivacyCenter/PrivacyCenterCaseDetailsPage.tsx

@@ -0,0 +1,154 @@
+import { useState, useEffect, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { IoArrowBack } from 'react-icons/io5';
+import { PCButton, PCBadge, PCLoader } from './ui';
+import { useInternalNavigation } from './context/NavigationContext';
+import { formatDate } from './components/utils';
+import type { CaseDetailsTab, TabId } from './lib/types';
+import { getCaseStatusVariant, formatCaseStatus } from './components/CaseDetails/utils';
+import { MessagesTab } from './components/CaseDetails/MessagesTab';
+import { RequestDetailsTab } from './components/CaseDetails/RequestDetailsTab';
+import { useCaseHistory } from './lib/queries';
+import { useOrganization } from './context/OrganizationContext';
+import { useAuth } from './context/AuthContext';
+
+// ─── Page shell ──────────────────────────────────────────────────────────────
+
+export const PrivacyCenterCaseDetailsPage = () => {
+  const { t } = useTranslation();
+  const { navigateTo, selectedCase, setSelectedCase, pendingCaseUuid } = useInternalNavigation();
+  const [activeTab, setActiveTab] = useState<TabId>('request-details');
+
+  const { organization } = useOrganization();
+  const { accessToken, refreshToken, onError, updateTokens } = useAuth();
+  const organizationId = organization?.uuid;
+  const workspaceId = organization?.workspaces[0]?.uuid;
+  const contact = typeof window !== 'undefined' ? sessionStorage.getItem('email') || '' : '';
+
+  const authContext = useMemo(() => ({
+    accessToken, refreshToken, onError, updateTokens,
+  }), [accessToken, refreshToken, onError, updateTokens]);
+
+  // The target UUID comes from the in-memory case (normal navigation) or the
+  // persisted UUID (page-refresh). Always fetch so language changes re-hydrate
+  // selectedCase with fresh server-translated data.
+  const targetUuid = selectedCase?.uuid ?? pendingCaseUuid;
+
+  const { data: cases, isLoading } = useCaseHistory(
+    organizationId,
+    workspaceId,
+    contact,
+    authContext,
+  );
+
+  // Update selectedCase from fetched list (covers language-change re-hydration and page-refresh).
+  useEffect(() => {
+    if (!cases) return;
+    if (cases.length === 0) {
+      navigateTo('form');
+      return;
+    }
+    if (!targetUuid) return;
+    const found = cases.find((c) => c.uuid === targetUuid);
+    if (found) {
+      setSelectedCase(found);
+    } else {
+      navigateTo('form');
+    }
+  }, [cases, targetUuid, setSelectedCase, navigateTo]);
+
+  // If the query is disabled (missing org/workspace/contact), cases stays undefined
+  // and isLoading stays false — navigate away so the component does not stay blank.
+  useEffect(() => {
+    if (!targetUuid || isLoading || cases !== undefined) return;
+    if (!organizationId || !workspaceId || !contact) {
+      navigateTo('form');
+    }
+  }, [targetUuid, organizationId, workspaceId, contact, cases, isLoading, navigateTo]);
+
+  // Navigate away when there is no case and nothing to load — kept in an effect
+  // to avoid calling navigateTo during render.
+  useEffect(() => {
+    if (!selectedCase && !targetUuid && !isLoading) {
+      navigateTo('form');
+    }
+  }, [selectedCase, targetUuid, isLoading, navigateTo]);
+
+  if (!selectedCase) {
+    return isLoading ? (
+      <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '200px' }}>
+        <PCLoader size="lg" />
+      </div>
+    ) : null;
+  }
+
+  const { request_details } = selectedCase;
+  const requestTypeLabel = selectedCase.request_type_display || selectedCase.request_type.replace('_', ' ');
+  const isDueDateOverdue = selectedCase.due_date && new Date(selectedCase.due_date) < new Date();
+
+  const tabs: CaseDetailsTab[] = [
+    { id: 'request-details', label: t('requestDetails') },
+    { id: 'messages', label: t('messages') },
+  ];
+
+  return (
+    <div className="pc-case-page">
+      {/* Back */}
+      <div className="pc-case-back">
+        <PCButton
+          variant="text"
+          size="sm"
+          onClick={() => navigateTo('form')}
+          className="pc-case-back-btn"
+        >
+          <IoArrowBack size={16} className="pc-case-back-icon" />
+          {t('backToHome')}
+        </PCButton>
+      </div>
+
+      {/* Case header */}
+      <div className="pc-case-header">
+        <span className="pc-case-header-id">
+          {selectedCase.case_id}
+        </span>
+        <span>·</span>
+        <span>{requestTypeLabel}</span>
+        <span>·</span>
+        <span>{t('submitted')} {formatDate(selectedCase.created_at)}</span>
+        {selectedCase.due_date && (
+          <>
+            <span>·</span>
+            <span className={isDueDateOverdue ? 'pc-case-header-overdue' : undefined}>
+              {t('responseDue')} {formatDate(selectedCase.due_date)}
+            </span>
+          </>
+        )}
+        <span>·</span>
+        <PCBadge variant={getCaseStatusVariant(selectedCase.status)} size="sm" className="pc-status-badge">
+          {selectedCase.status_display || formatCaseStatus(selectedCase.status)}
+        </PCBadge>
+      </div>
+
+      {/* Tabs */}
+      <div className="pc-case-tabs">
+        {tabs.map((tab) => (
+          <button
+            key={tab.id}
+            onClick={() => setActiveTab(tab.id)}
+            className={`pc-case-tab ${activeTab === tab.id ? 'pc-case-tab--active' : ''}`}
+          >
+            {tab.label}
+          </button>
+        ))}
+      </div>
+
+      {/* Tab content */}
+      <div className="pc-case-tab-content">
+        {activeTab === 'messages' && <MessagesTab caseUuid={selectedCase.uuid} />}
+        {activeTab === 'request-details' && (
+          <RequestDetailsTab selectedCase={selectedCase} request_details={request_details} requestTypeLabel={requestTypeLabel} />
+        )}
+      </div>
+    </div>
+  );
+};

package/src/RedactoPrivacyCenter/PrivacyCenterConsentManagerPage.tsx

@@ -0,0 +1,17 @@
+import { useEffect } from 'react';
+import i18n from './lib/i18n';
+import ConsentManager from './components/ConsentManager';
+
+export function PrivacyCenterConsentManagerPage() {
+  useEffect(() => {
+    if (!i18n.language) {
+      i18n.changeLanguage('en');
+    }
+  }, []);
+
+  return (
+    <div style={{ width: '100%' }}>
+      <ConsentManager />
+    </div>
+  );
+}

package/src/RedactoPrivacyCenter/PrivacyCenterFormPage.tsx

@@ -0,0 +1,79 @@
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { PCButton } from './ui';
+import { pcStyles } from './styles/pcStyles';
+import { IoArrowBack } from 'react-icons/io5';
+import i18n from './lib/i18n';
+import Form from './components/Form';
+import CaseHistory from './components/CaseHistory';
+import { usePageChrome } from './context/PageChromeContext';
+
+const getVar = (varName: string): string => `var(${varName})`;
+
+export function PrivacyCenterFormPage() {
+  const { t } = useTranslation();
+  const [showForm, setShowForm] = useState(() => {
+    try {
+      return sessionStorage.getItem('pc_grievance_view') === 'form';
+    } catch {
+      return false;
+    }
+  });
+  const { setPageChromeOverride, clearPageChromeOverride } = usePageChrome();
+
+  useEffect(() => {
+    if (!i18n.language) {
+      i18n.changeLanguage('en');
+    }
+  }, []);
+
+  useEffect(() => {
+    try {
+      sessionStorage.setItem('pc_grievance_view', showForm ? 'form' : 'list');
+    } catch {
+      // sessionStorage unavailable
+    }
+  }, [showForm]);
+
+  useEffect(() => {
+    if (showForm) {
+      setPageChromeOverride({
+        titleKey: 'yourPrivacyCenter',
+        descriptionKey: 'yourRightsOverDataSimplified',
+      });
+    } else {
+      clearPageChromeOverride();
+    }
+
+    return () => {
+      clearPageChromeOverride();
+    };
+  }, [showForm, setPageChromeOverride, clearPageChromeOverride]);
+
+  return (
+    <div style={{ ...pcStyles.wFull, ...pcStyles.flex, ...pcStyles.flexCol, gap: pcStyles.gapLg.gap }}>
+      {showForm ? (
+        <>
+          <div style={pcStyles.mbMd}>
+            <PCButton
+              variant="text"
+              size="sm"
+              onClick={() => setShowForm(false)}
+              style={{ paddingLeft: 0, color: getVar('--pc-text-secondary') }}
+            >
+              <IoArrowBack size={16} style={{ marginRight: '0.5rem' }} />
+              {t('backToHome')}
+            </PCButton>
+          </div>
+          <div style={{ width: '100%' }}>
+            <Form onCreateRequest={() => setShowForm(false)} />
+          </div>
+        </>
+      ) : (
+        <div style={{ width: '100%' }}>
+          <CaseHistory onCreateRequest={() => setShowForm(true)} />
+        </div>
+      )}
+    </div>
+  );
+}

package/src/RedactoPrivacyCenter/PrivacyCenterHomePage.tsx

@@ -0,0 +1,30 @@
+import { useEffect } from 'react';
+import i18n from './lib/i18n';
+import { useInternalNavigation } from './context/NavigationContext';
+import { PrivacyCenterConsentManagerPage } from './PrivacyCenterConsentManagerPage';
+import { PrivacyCenterFormPage } from './PrivacyCenterFormPage';
+import { PrivacyCenterActivityPage } from './PrivacyCenterActivityPage';
+import { PrivacyCenterCaseDetailsPage } from './PrivacyCenterCaseDetailsPage';
+
+export function PrivacyCenterHomePage() {
+  const { currentPage } = useInternalNavigation();
+
+  useEffect(() => {
+    if (!i18n.language) {
+      i18n.changeLanguage('en');
+    }
+  }, []);
+
+  switch (currentPage) {
+    case 'consent-manager':
+      return <PrivacyCenterConsentManagerPage />;
+    case 'form':
+      return <PrivacyCenterFormPage />;
+    case 'activity':
+      return <PrivacyCenterActivityPage />;
+    case 'case-details':
+      return <PrivacyCenterCaseDetailsPage />;
+    default:
+      return <PrivacyCenterConsentManagerPage />;
+  }
+}

package/src/RedactoPrivacyCenter/PrivacyCenterLayout.tsx

@@ -0,0 +1,173 @@
+import { useEffect, useState, useRef, type ReactNode } from 'react';
+import { OrganizationProvider } from './context/OrganizationContext';
+import { ThemeProvider } from './context/theme';
+import type { OrganizationDetail } from './lib/types';
+import {
+  checkAndRefreshAuth,
+  decodeJwtToken,
+} from './lib/utils';
+import { useBaseUrl } from './context/BaseUrlContext';
+import { useAuth } from './context/AuthContext';
+import { PCLoader } from './ui';
+import { pcStyles } from './styles/pcStyles';
+import PrivacyCenterLayoutComponent from './components/PrivacyCenterLayout';
+
+interface PrivacyCenterLayoutProps {
+  children: ReactNode;
+  defaultTheme?: 'light' | 'dark';
+  slug: string;
+  onBack?: 'back' | 'signout';
+}
+
+export function PrivacyCenterLayout({ children, defaultTheme, slug, onBack }: PrivacyCenterLayoutProps) {
+  const { consentClient } = useBaseUrl();
+  // Read accessToken from AuthContext so this effect re-runs after AuthProvider
+  // syncs JWT data to sessionStorage (fixes race condition where child effects
+  // run before parent effects in React)
+  const { accessToken: authAccessToken } = useAuth();
+  const [organization, setOrganization] = useState<OrganizationDetail | null>(null);
+  const [isCheckingAuth, setIsCheckingAuth] = useState(true);
+  const [isLoadingOrg, setIsLoadingOrg] = useState(true);
+  const hasRedirectedRef = useRef(false);
+  const authCheckInProgressRef = useRef(false);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+
+    // Try sessionStorage first
+    let accessToken = sessionStorage.getItem('access_token');
+    let orgId = sessionStorage.getItem('pc_org_id');
+    let workspaceId = sessionStorage.getItem('pc_workspace_id');
+    let orgSlug = sessionStorage.getItem('pc_org_slug');
+
+    // If sessionStorage is not yet populated (race condition: AuthProvider's
+    // effect hasn't run yet), fall back to decoding the JWT from AuthContext
+    if (authAccessToken && (!accessToken || !orgId || !workspaceId || !orgSlug)) {
+      const decoded = decodeJwtToken(authAccessToken);
+      if (decoded) {
+        accessToken = accessToken || authAccessToken;
+        orgId = orgId || (typeof decoded.organisation_uuid === 'string' ? decoded.organisation_uuid : null);
+        workspaceId = workspaceId || (typeof decoded.workspace_uuid === 'string' ? decoded.workspace_uuid : null);
+        orgSlug = orgSlug || (typeof decoded.organisation_slug === 'string' ? decoded.organisation_slug : null);
+
+        // Write to sessionStorage so child components (SideBarPC, ConsentManager)
+        // can read these values when they mount
+        if (accessToken) sessionStorage.setItem('access_token', accessToken);
+        if (orgId) sessionStorage.setItem('pc_org_id', orgId);
+        if (workspaceId) sessionStorage.setItem('pc_workspace_id', workspaceId);
+        if (orgSlug) sessionStorage.setItem('pc_org_slug', orgSlug);
+
+        // Extract and set email from JWT for sidebar and consent manager
+        const email = decoded.contact || decoded.primary_email;
+        if (email && typeof email === 'string') {
+          sessionStorage.setItem('email', email);
+        }
+      }
+    }
+
+    // Use slug prop if provided, otherwise fall back to JWT-derived slug
+    const effectiveSlug = slug || orgSlug || '';
+
+    if (accessToken && orgId && workspaceId && effectiveSlug) {
+      // Prefer organisation_name from JWT; fall back to slug-derived name
+      const decoded = decodeJwtToken(accessToken);
+      const orgNameFromJwt = decoded?.organisation_name;
+      const orgName =
+        typeof orgNameFromJwt === 'string' && orgNameFromJwt.trim() !== ''
+          ? orgNameFromJwt
+          : effectiveSlug
+            .split('-')
+            .map((word: string) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+            .join(' ');
+
+      setOrganization({
+        uuid: orgId,
+        suid: '',
+        name: orgName,
+        slug: effectiveSlug,
+        description: '',
+        domain: '',
+        workspaces: [{
+          uuid: workspaceId,
+          suid: '',
+          name: '',
+          description: '',
+          workspace_type: '',
+          status: '',
+        }],
+        ai_summary: {},
+        icon_url: null,
+        activated: true,
+        allowed_domains: [],
+      });
+      setIsLoadingOrg(false);
+    } else {
+      // If organization info is not available, set loading to false
+      setIsLoadingOrg(false);
+    }
+  }, [slug, authAccessToken]);
+
+  useEffect(() => {
+    // Don't check auth while still loading organization
+    if (isLoadingOrg || !organization) {
+      return;
+    }
+
+    // Prevent multiple simultaneous auth checks
+    if (authCheckInProgressRef.current) {
+      return;
+    }
+
+    // Check authentication status with token refresh capability
+    const checkAuth = async () => {
+      authCheckInProgressRef.current = true;
+
+      try {
+        // Check if user is authenticated, attempt refresh if needed
+        await checkAndRefreshAuth(
+          organization.slug || slug,
+          organization?.uuid,
+          organization?.workspaces[0]?.uuid,
+          consentClient
+        );
+
+        // User is authenticated, allow access
+        hasRedirectedRef.current = false;
+        setIsCheckingAuth(false);
+      } catch (error) {
+        // Auth check failed - user will need to provide tokens via props
+        setIsCheckingAuth(false);
+      } finally {
+        authCheckInProgressRef.current = false;
+      }
+    };
+
+    // Check auth after organization is loaded
+    checkAuth();
+  }, [slug, organization, isLoadingOrg, consentClient, authAccessToken]);
+
+  // Show loading state while checking authentication or loading organization
+  if (isLoadingOrg || !organization || isCheckingAuth) {
+    return (
+      <div style={{
+        ...pcStyles.flex,
+        ...pcStyles.hScreen,
+        ...pcStyles.wScreen,
+        ...pcStyles.itemsCenter,
+        ...pcStyles.justifyCenter,
+      }}>
+        <PCLoader variant="spinner" color="info" size="lg" />
+      </div>
+    );
+  }
+
+  return (
+    <ThemeProvider defaultTheme={defaultTheme}>
+      <OrganizationProvider organization={organization}>
+        <PrivacyCenterLayoutComponent onBack={onBack}>
+          {children}
+        </PrivacyCenterLayoutComponent>
+      </OrganizationProvider>
+    </ThemeProvider>
+  );
+}

package/src/RedactoPrivacyCenter/RedactoPrivacyCenter.tsx

@@ -0,0 +1,55 @@
+import { I18nextProvider } from 'react-i18next';
+import i18n from './lib/i18n';
+import { PrivacyCenterLayout } from './PrivacyCenterLayout';
+import { PrivacyCenterHomePage } from './PrivacyCenterHomePage';
+import { BaseUrlProvider } from './context/BaseUrlContext';
+import { AuthProvider } from './context/AuthContext';
+import { NavigationProvider } from './context/NavigationContext';
+import type { InternalPage } from './context/NavigationContext';
+import { PageChromeProvider } from './context/PageChromeContext';
+import { injectPCStyles } from './styles/injectStyles';
+
+// Inject Privacy Center CSS styles on module load
+injectPCStyles();
+
+interface RedactoPrivacyCenterProps {
+  baseUrl: string; // Consent server base URL
+  slug: string;
+  theme?: 'light' | 'dark';
+  accessToken: string;
+  refreshToken: string;
+  onError: (error: Error) => boolean;
+  initialPage?: InternalPage;
+  onBack?: 'back' | 'signout';
+}
+
+export function RedactoPrivacyCenter({
+  baseUrl,
+  slug,
+  theme = 'light',
+  accessToken,
+  refreshToken,
+  onError,
+  initialPage = 'consent-manager',
+  onBack,
+}: RedactoPrivacyCenterProps) {
+  return (
+    <I18nextProvider i18n={i18n}>
+      <BaseUrlProvider baseUrl={baseUrl}>
+        <AuthProvider
+          accessToken={accessToken}
+          refreshToken={refreshToken}
+          onError={onError}
+        >
+          <NavigationProvider initialPage={initialPage}>
+            <PageChromeProvider>
+              <PrivacyCenterLayout defaultTheme={theme} slug={slug} onBack={onBack}>
+                <PrivacyCenterHomePage />
+              </PrivacyCenterLayout>
+            </PageChromeProvider>
+          </NavigationProvider>
+        </AuthProvider>
+      </BaseUrlProvider>
+    </I18nextProvider>
+  );
+}