@redacto.io/consent-sdk-react 10.0.0-beta.1 → 10.0.0-beta.12

package/src/RedactoPrivacyCenter/PrivacyCenterCaseDetailsPage.tsx

@@ -1,156 +0,0 @@
-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} caseStatus={selectedCase.status} />
-        )}
-        {activeTab === 'request-details' && (
-          <RequestDetailsTab selectedCase={selectedCase} request_details={request_details} requestTypeLabel={requestTypeLabel} />
-        )}
-      </div>
-    </div>
-  );
-};

package/src/RedactoPrivacyCenter/PrivacyCenterConsentManagerPage.tsx

@@ -1,17 +0,0 @@
-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

@@ -1,79 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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 { PrivacyCenterMyReceiptPage } from './PrivacyCenterMyReceiptPage';
-import { PrivacyCenterCaseDetailsPage } from './PrivacyCenterCaseDetailsPage';
-import { NotificationsPage } from './NotificationsPage';
-
-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 'receipts':
-      return <PrivacyCenterMyReceiptPage />;
-    case 'case-details':
-      return <PrivacyCenterCaseDetailsPage />;
-    case 'notifications':
-      return <NotificationsPage />;
-    default:
-      return <PrivacyCenterConsentManagerPage />;
-  }
-}

package/src/RedactoPrivacyCenter/PrivacyCenterLayout.tsx

@@ -1,177 +0,0 @@
-import { useEffect, useState, useRef, type ReactNode } from 'react';
-import { OrganizationProvider } from './context/OrganizationContext';
-import { DataAvailabilityProvider } from './context/DataAvailabilityContext';
-import type { OrganizationDetail } from './lib/types';
-import {
-  checkAndRefreshAuth,
-  decodeJwtToken,
-  resolveContactFromJwt,
-} from './lib/utils';
-import { useBaseUrl } from './context/BaseUrlContext';
-import { useAuth } from './context/AuthContext';
-import { PCLoader } from './ui';
-import { pcStyles } from './styles/pcStyles';
-import AppShell from './components/AppShell/AppShell';
-import { SelectUserGate } from './components/SelectUserGate';
-
-interface PrivacyCenterLayoutProps {
-  children: ReactNode;
-  slug: string;
-  onBack?: 'back' | 'signout';
-}
-
-export function PrivacyCenterLayout({ children, 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);
-
-        // Resolve the contact identifier (email, or mobile/org_user_id for
-        // mobile-only logins) for the sidebar and consent manager.
-        const contact = resolveContactFromJwt(decoded);
-        if (contact) {
-          sessionStorage.setItem('email', contact);
-        }
-      }
-    }
-
-    // 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 (
-    <OrganizationProvider organization={organization}>
-      <SelectUserGate>
-        <DataAvailabilityProvider>
-          <AppShell onBack={onBack}>
-            {children}
-          </AppShell>
-        </DataAvailabilityProvider>
-      </SelectUserGate>
-    </OrganizationProvider>
-  );
-}

package/src/RedactoPrivacyCenter/PrivacyCenterMyReceiptPage.tsx

@@ -1,26 +0,0 @@
-import { useEffect } from 'react';
-import i18n from './lib/i18n';
-import ReceiptsList from './components/ReceiptsList';
-
-export function PrivacyCenterMyReceiptPage() {
-  useEffect(() => {
-    if (!i18n.language) {
-      i18n.changeLanguage('en');
-    }
-  }, []);
-
-  return (
-    <div
-      style={{
-        width: '100%',
-        display: 'flex',
-        flexDirection: 'column',
-        gap: '0.5rem',
-      }}
-    >
-      <div style={{ paddingTop: '0.25rem' }}>
-        <ReceiptsList />
-      </div>
-    </div>
-  );
-}

package/src/RedactoPrivacyCenter/RedactoPrivacyCenter.tsx

@@ -1,58 +0,0 @@
-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 { BrandingProvider } from './context/BrandingContext';
-import { injectPCStyles } from './styles/injectStyles';
-
-// Inject Privacy Center CSS styles on module load
-injectPCStyles();
-
-interface RedactoPrivacyCenterProps {
-  baseUrl: string; // Consent server base URL
-  ledgerBaseUrl?: string; // Go ledger base URL — serves user-consents; omit to use the legacy Python privacy-center consent endpoints
-  slug: string;
-  accessToken: string;
-  refreshToken: string;
-  onError: (error: Error) => boolean;
-  initialPage?: InternalPage;
-  onBack?: 'back' | 'signout';
-}
-
-export function RedactoPrivacyCenter({
-  baseUrl,
-  ledgerBaseUrl,
-  slug,
-  accessToken,
-  refreshToken,
-  onError,
-  initialPage = 'consent-manager',
-  onBack,
-}: RedactoPrivacyCenterProps) {
-  return (
-    <I18nextProvider i18n={i18n}>
-      <BrandingProvider slug={slug} baseUrl={baseUrl}>
-        <BaseUrlProvider baseUrl={baseUrl} ledgerBaseUrl={ledgerBaseUrl}>
-          <AuthProvider
-            accessToken={accessToken}
-            refreshToken={refreshToken}
-            onError={onError}
-          >
-            <NavigationProvider initialPage={initialPage}>
-              <PageChromeProvider>
-                <PrivacyCenterLayout slug={slug} onBack={onBack}>
-                  <PrivacyCenterHomePage />
-                </PrivacyCenterLayout>
-              </PageChromeProvider>
-            </NavigationProvider>
-          </AuthProvider>
-        </BaseUrlProvider>
-      </BrandingProvider>
-    </I18nextProvider>
-  );
-}