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

package/src/RedactoNoticeConsent/services/storage.ts

@@ -0,0 +1,122 @@
+/**
+ * Session Storage Service
+ * 
+ * Handles state persistence for consent flow during DigiLocker redirects.
+ * Uses sessionStorage to maintain state across page navigations.
+ */
+
+import type { PersistedConsentState } from "../api/types";
+
+const STORAGE_KEY = "redacto_consent_sdk_state";
+const STATE_EXPIRY_MS = 30 * 60 * 1000; // 30 minutes
+
+/**
+ * Check if code is running in browser environment
+ */
+const isBrowser = (): boolean => {
+  return typeof window !== "undefined" && typeof window.sessionStorage !== "undefined";
+};
+
+/**
+ * Save consent flow state to sessionStorage
+ */
+export const saveConsentState = (state: PersistedConsentState): void => {
+  if (!isBrowser()) {
+    console.warn("SessionStorage not available - state not persisted");
+    return;
+  }
+
+  try {
+    const stateWithTimestamp = {
+      ...state,
+      timestamp: new Date().toISOString(),
+    };
+    sessionStorage.setItem(STORAGE_KEY, JSON.stringify(stateWithTimestamp));
+  } catch (error) {
+    console.error("Failed to save consent state:", error);
+  }
+};
+
+/**
+ * Retrieve consent flow state from sessionStorage
+ * Returns null if state doesn't exist or is expired
+ */
+export const getConsentState = (): PersistedConsentState | null => {
+  if (!isBrowser()) {
+    return null;
+  }
+
+  try {
+    const savedState = sessionStorage.getItem(STORAGE_KEY);
+    if (!savedState) {
+      return null;
+    }
+
+    const parsed: PersistedConsentState = JSON.parse(savedState);
+
+    // Check if state is expired
+    const stateAge = Date.now() - new Date(parsed.timestamp).getTime();
+    if (stateAge > STATE_EXPIRY_MS) {
+      clearConsentState();
+      return null;
+    }
+
+    return parsed;
+  } catch (error) {
+    console.error("Failed to get consent state:", error);
+    return null;
+  }
+};
+
+/**
+ * Clear consent flow state from sessionStorage
+ */
+export const clearConsentState = (): void => {
+  if (!isBrowser()) {
+    return;
+  }
+
+  try {
+    sessionStorage.removeItem(STORAGE_KEY);
+  } catch (error) {
+    console.error("Failed to clear consent state:", error);
+  }
+};
+
+/**
+ * Update specific fields in the persisted consent state
+ */
+export const updateConsentState = (updates: Partial<PersistedConsentState>): void => {
+  const currentState = getConsentState();
+  if (currentState) {
+    saveConsentState({
+      ...currentState,
+      ...updates,
+      timestamp: new Date().toISOString(),
+    });
+  }
+};
+
+/**
+ * Check if there's a pending verification to resume
+ */
+export const hasPendingVerification = (): boolean => {
+  const state = getConsentState();
+  return state !== null && state.flowState === "digilocker-pending";
+};
+
+/**
+ * Get verification result from persisted state
+ */
+export const getVerificationResult = (): "pending" | "verified" | "failed" | "in_progress" | "expired" | null => {
+  const state = getConsentState();
+  return state?.verificationResult ?? null;
+};
+
+/**
+ * Get verification reference from persisted state (after successful verification)
+ */
+export const getVerificationReference = (): string | null => {
+  const state = getConsentState();
+  return state?.verificationReference ?? null;
+};

package/src/RedactoNoticeConsent/types.ts

@@ -13,6 +13,8 @@ export type Props = Readonly<{
   onError?: (error: Error) => void;
   applicationId?: string;
   validateAgainst?: "all" | "required";
+  digilockerMode?: "popup" | "redirect"; // Default: "redirect" (full page redirect - required for DigiLocker)
+  digilockerCallbackUrl?: string; // Default: "/digilocker-callback"
   includeFullyConsentedData?: boolean;
   reviewModeButtonText?: string;
 }>;

package/src/RedactoPrivacyCenter/PrivacyCenterActivityPage.tsx

@@ -0,0 +1,19 @@
+import { useEffect } from 'react';
+import i18n from './lib/i18n';
+import ActivitiesList from './components/ActivitiesList';
+
+export function PrivacyCenterActivityPage() {
+  useEffect(() => {
+    if (!i18n.language) {
+      i18n.changeLanguage('en');
+    }
+  }, []);
+
+  return (
+    <div style={{ width: '100%' }}>
+      <div style={{ paddingTop: '0.5rem' }}>
+        <ActivitiesList />
+      </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,27 @@
+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';
+
+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 />;
+    default:
+      return <PrivacyCenterConsentManagerPage />;
+  }
+}

package/src/RedactoPrivacyCenter/PrivacyCenterLayout.tsx

@@ -0,0 +1,142 @@
+import { useEffect, useState, useRef, 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 { 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();
+  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(() => {
+    // Load organization info from sessionStorage
+    if (typeof window !== 'undefined' && slug) {
+      const accessToken = sessionStorage.getItem('access_token');
+      const orgId = sessionStorage.getItem('pc_org_id');
+      const workspaceId = sessionStorage.getItem('pc_workspace_id');
+      const orgSlug = sessionStorage.getItem('pc_org_slug');
+
+      // Create organization object from sessionStorage
+      if (accessToken && orgId && workspaceId && orgSlug === slug) {
+        // 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
+            : slug
+              .split('-')
+              .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+              .join(' ');
+
+        setOrganization({
+          uuid: orgId,
+          suid: '',
+          name: orgName,
+          slug: slug,
+          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
+        // User will need to authenticate first
+        setIsLoadingOrg(false);
+      }
+    }
+  }, [slug]);
+
+  useEffect(() => {
+    // Don't check auth while still loading organization
+    if (isLoadingOrg || !slug || !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
+        const isAuthenticated = await checkAndRefreshAuth(
+          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]);
+
+  // 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,51 @@
+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';
+
+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>
+  );
+}