@redacto.io/consent-sdk-react 5.2.0 → 6.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redacto.io/consent-sdk-react",
-  "version": "5.2.0",
+  "version": "6.0.0",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",

package/src/RedactoNoticeConsent/RedactoNoticeConsent.tsx

@@ -2168,11 +2168,12 @@ export const RedactoNoticeConsent = ({
         return;
       }
 
-      const err = error as Error & { status?: number };
+      const err = error as Error;
+      // The SDK is a passthrough: server-owned message wins. Only the
+      // bare-Error fallback is used when no message is present (e.g. a
+      // network failure that never produced a Response).
       const message =
-        err.status === 500
-          ? "An error occurred while submitting your consent. Please try again later."
-          : err.message || "Failed to submit consent. Please try again.";
+        err.message || "Failed to submit consent. Please try again.";
       setErrorMessage(message);
       onError?.(error as Error);
     } finally {
@@ -2713,30 +2714,25 @@ export const RedactoNoticeConsent = ({
   const availableLanguages = useMemo(() => {
     if (!content) return [language];
 
-    // English is always available since it's in active_config
-    const languages = ["English"];
-
-    // Add default language if it's not English
+    // English is always pinned first since it's in active_config.
+    // Non-English default_language is pinned second so users can find it quickly.
+    // Remaining languages are sorted A→Z by English name.
+    const pinned = ["English"];
     if (
       content.default_language &&
       content.default_language !== "English" &&
       content.default_language !== "en"
     ) {
-      languages.push(content.default_language);
+      pinned.push(content.default_language);
     }
 
-    // Add all supported languages from translations
-    if (content.supported_languages_and_translations) {
-      Object.keys(content.supported_languages_and_translations).forEach(
-        (lang) => {
-          if (!languages.includes(lang)) {
-            languages.push(lang);
-          }
-        }
-      );
-    }
+    const rest = content.supported_languages_and_translations
+      ? Object.keys(content.supported_languages_and_translations)
+          .filter((lang) => !pinned.includes(lang))
+          .sort((a, b) => a.localeCompare(b, "en"))
+      : [];
 
-    return languages;
+    return [...pinned, ...rest];
   }, [content, language]);
 
   /**

package/src/RedactoNoticeConsent/api/index.ts

@@ -1,4 +1,5 @@
 import { jwtDecode } from "jwt-decode";
+import { parseApiError } from "../../shared/api-errors";
 import type {
   ConsentContent,
   ConsentEventPayload,
@@ -109,23 +110,10 @@ export const fetchConsentContent = async ({
   });
 
   if (!response.ok) {
-    let errorMessage = `Failed to fetch consent content: ${response.status} ${response.statusText}`;
-
-    if (response.status === 401) {
-      errorMessage = "Unauthorized: Invalid or expired token";
-    } else if (response.status === 403) {
-      errorMessage = "Forbidden: Access denied";
-    } else if (response.status === 404) {
-      errorMessage = "Notice not found";
-    } else if (response.status === 409) {
-      errorMessage = "User has already provided consent";
-    } else if (response.status >= 500) {
-      errorMessage = "Server error: Please try again later";
-    }
-
-    const error = new Error(errorMessage) as Error & { status?: number };
-    error.status = response.status;
-    throw error;
+    throw await parseApiError(
+      response,
+      "Could not load the consent notice. Please try again."
+    );
   }
 
   const data: ConsentContent = await response.json();
@@ -211,28 +199,10 @@ export const submitConsentEvent = async ({
   );
 
   if (!response.ok) {
-    let errorMessage = `Failed to submit consent: ${response.status} ${response.statusText}`;
-
-    if (response.status === 400) {
-      try {
-        const errorData = await response.json();
-        errorMessage = errorData.message || "Invalid request data";
-      } catch {
-        errorMessage = "Invalid request data";
-      }
-    } else if (response.status === 401) {
-      errorMessage = "Unauthorized: Invalid or expired token";
-    } else if (response.status === 403) {
-      errorMessage = "Forbidden: Access denied";
-    } else if (response.status === 404) {
-      errorMessage = "Notice not found";
-    } else if (response.status >= 500) {
-      errorMessage = "Server error: Please try again later";
-    }
-
-    const error = new Error(errorMessage) as Error & { status?: number };
-    error.status = response.status;
-    throw error;
+    throw await parseApiError(
+      response,
+      "Could not submit your consent. Please try again."
+    );
   }
 
   // Clear any cached consent content since user preferences have changed
@@ -274,21 +244,10 @@ export const fetchTTSAudioUrls = async ({
   });
 
   if (!response.ok) {
-    let errorMessage = `Failed to fetch TTS audio URLs: ${response.status} ${response.statusText}`;
-
-    if (response.status === 401) {
-      errorMessage = "Unauthorized: Invalid or expired token";
-    } else if (response.status === 403) {
-      errorMessage = "Forbidden: Access denied";
-    } else if (response.status === 404) {
-      errorMessage = "Notice or audio not found";
-    } else if (response.status >= 500) {
-      errorMessage = "Server error: Please try again later";
-    }
-
-    const error = new Error(errorMessage) as Error & { status?: number };
-    error.status = response.status;
-    throw error;
+    throw await parseApiError(
+      response,
+      "Could not load audio narration. Please try again."
+    );
   }
 
   const data: TTSAudioUrlsResponse = await response.json();
@@ -378,33 +337,10 @@ export const initiateGuardianVerification = async ({
     );
 
     if (!response.ok) {
-      let errorMessage = `Failed to initiate verification: ${response.status} ${response.statusText}`;
-
-      if (response.status === 400) {
-        try {
-          const errorData = await response.json();
-          errorMessage = errorData.message || "Invalid request data";
-        } catch {
-          errorMessage = "Invalid request data";
-        }
-      } else if (response.status === 401) {
-        errorMessage = "Unauthorized: Invalid or expired token";
-      } else if (response.status === 404) {
-        errorMessage = "Organization or workspace not found";
-      } else if (response.status === 422) {
-        try {
-          const errorData = await response.json();
-          errorMessage = errorData.message || "Validation error: Please check your input";
-        } catch {
-          errorMessage = "Validation error: Please check your input";
-        }
-      } else if (response.status >= 500) {
-        errorMessage = "Server error: Please try again later";
-      }
-
-      const error = new Error(errorMessage) as Error & { status?: number };
-      error.status = response.status;
-      throw error;
+      throw await parseApiError(
+        response,
+        "Could not start guardian verification. Please try again."
+      );
     }
 
     const responseData = await response.json();
@@ -486,28 +422,10 @@ export const verifyGuardianStatus = async ({
   );
 
   if (!response.ok) {
-    let errorMessage = `Failed to check verification status: ${response.status} ${response.statusText}`;
-
-    if (response.status === 400) {
-      try {
-        const errorData = await response.json();
-        errorMessage = errorData.message || errorData.detail?.message || "Invalid session token";
-      } catch {
-        errorMessage = "Invalid session token";
-      }
-    } else if (response.status === 401) {
-      errorMessage = "Unauthorized: Invalid or expired token";
-    } else if (response.status === 404) {
-      errorMessage = "Verification session not found or expired. Please restart the verification process.";
-    } else if (response.status === 410) {
-      errorMessage = "Verification session has expired. Please restart the verification process.";
-    } else if (response.status >= 500) {
-      errorMessage = "Server error: Please try again later";
-    }
-
-    const error = new Error(errorMessage) as Error & { status?: number };
-    error.status = response.status;
-    throw error;
+    throw await parseApiError(
+      response,
+      "Could not check verification status. Please try again."
+    );
   }
 
   const responseData = await response.json();

package/src/RedactoNoticeConsentInline/RedactoNoticeConsentInline.tsx

@@ -363,11 +363,12 @@ const RedactoConsentInlineComponent = ({
         // Reset ref on success to allow re-submission if needed
         hasSubmittedRef.current = false;
       } catch (error) {
-        const err = error as Error & { status?: number };
+        const err = error as Error;
+        // The SDK is a passthrough: server-owned message wins. Only the
+        // bare-Error fallback is used when no message is present (e.g. a
+        // network failure that never produced a Response).
         const message =
-          err.status === 500
-            ? "An error occurred while submitting your consent. Please try again later."
-            : err.message || "Failed to submit consent. Please try again.";
+          err.message || "Failed to submit consent. Please try again.";
         setErrorMessage(message);
         // Reset ref on error to allow retry
         hasSubmittedRef.current = false;

package/src/RedactoNoticeConsentInline/api/index.ts

@@ -1,3 +1,4 @@
+import { parseApiError } from "../../shared/api-errors";
 import type {
   ConsentContent,
   ConsentEventPayload,
@@ -14,51 +15,32 @@ export const fetchConsentContent = async ({
   baseUrl,
   specific_uuid,
 }: FetchConsentContentParams): Promise<ConsentContent> => {
-  try {
-    const apiBaseUrl = baseUrl || BASE_URL;
+  const apiBaseUrl = baseUrl || BASE_URL;
 
-    const url = new URL(
-      `${apiBaseUrl}/public/organisations/${org_uuid}/workspaces/${workspace_uuid}/notices/get-notice/${notice_uuid}`
-    );
-
-    if (specific_uuid) {
-      url.searchParams.append("specific_uuid", specific_uuid);
-    }
-
-    const response = await fetch(url.toString(), {
-      method: "GET",
-      headers: {
-        "Content-Type": "application/json",
-      },
-    });
+  const url = new URL(
+    `${apiBaseUrl}/public/organisations/${org_uuid}/workspaces/${workspace_uuid}/notices/get-notice/${notice_uuid}`
+  );
 
-    if (response.status === 401) {
-      const error = new Error("Unauthorized") as Error & {
-        status?: number;
-      };
-      error.status = 401;
-      throw error;
-    }
-
-    if (response.status === 409) {
-      const error = new Error("User has already provided consent") as Error & {
-        status?: number;
-      };
-      error.status = 409;
-      throw error;
-    }
-
-    if (!response.ok) {
-      throw new Error(
-        `Failed to fetch consent content: ${response.statusText}`
-      );
-    }
+  if (specific_uuid) {
+    url.searchParams.append("specific_uuid", specific_uuid);
+  }
 
-    const data = await response.json();
-    return data;
-  } catch (error) {
-    throw error;
+  const response = await fetch(url.toString(), {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+    },
+  });
+
+  if (!response.ok) {
+    throw await parseApiError(
+      response,
+      "Could not load the consent notice. Please try again."
+    );
   }
+
+  const data = await response.json();
+  return data;
 };
 
 export const submitConsentEvent = async ({
@@ -71,86 +53,51 @@ export const submitConsentEvent = async ({
   declined,
   meta_data,
 }: SubmitConsentEventParams): Promise<void> => {
-  try {
-    const apiBaseUrl = baseUrl || BASE_URL;
-
-    const payload: ConsentEventPayload = {
-      notice_uuid: noticeUuid,
-      purposes: purposes.map((purpose) => {
-        if (!purpose.uuid) {
-          throw new Error(`Invalid purpose data: missing uuid`);
-        }
-
-        // Only include enabled data elements (disabled elements are not selectable)
-        const dataElements = purpose.data_elements
-          .filter((element) => element.enabled)
-          .map((element) => ({
-            uuid: element.uuid,
-            selected: element.required ? true : Boolean(element.selected),
-          }));
-
-        return {
-          purpose_uuid: purpose.uuid,
-          selected: Boolean(purpose.selected),
-          data_elements: dataElements.length > 0 ? dataElements : undefined,
-        };
-      }),
-      select_all_mandatory: false,
-      source: "WEB",
-      declined,
-      meta_data,
-    };
-
-    const response = await fetch(
-      `${apiBaseUrl}/public/organisations/${org_uuid}/workspaces/${workspace_uuid}/submit-consent`,
-      {
-        method: "POST",
-        headers: {
-          Authorization: `Bearer ${accessToken}`,
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify(payload),
-      }
-    );
+  const apiBaseUrl = baseUrl || BASE_URL;
 
-    if (!response.ok) {
-      // Try to parse error response body
-      let errorData;
-      try {
-        errorData = await response.json();
-      } catch {
-        // If parsing fails, use status text
-        errorData = { message: response.statusText };
+  const payload: ConsentEventPayload = {
+    notice_uuid: noticeUuid,
+    purposes: purposes.map((purpose) => {
+      if (!purpose.uuid) {
+        throw new Error(`Invalid purpose data: missing uuid`);
       }
 
-      // Handle 409 CONFLICT error (user has already consented)
-      if (response.status === 409) {
-        const error = new Error(
-          errorData.detail?.message || errorData.message || "User has already provided consent"
-        ) as Error & {
-          status?: number;
-          code?: number;
-          detail?: { message?: string };
-        };
-        error.status = 409;
-        error.code = errorData.code || 409;
-        error.detail = errorData.detail;
-        throw error;
-      }
-
-      const error = new Error(
-        errorData.detail?.message || errorData.message || `Failed to submit consent event: ${response.statusText}`
-      ) as Error & {
-        status?: number;
-        code?: number;
-        detail?: { message?: string };
+      // Only include enabled data elements (disabled elements are not selectable)
+      const dataElements = purpose.data_elements
+        .filter((element) => element.enabled)
+        .map((element) => ({
+          uuid: element.uuid,
+          selected: element.required ? true : Boolean(element.selected),
+        }));
+
+      return {
+        purpose_uuid: purpose.uuid,
+        selected: Boolean(purpose.selected),
+        data_elements: dataElements.length > 0 ? dataElements : undefined,
       };
-      error.status = response.status;
-      error.code = errorData.code;
-      error.detail = errorData.detail;
-      throw error;
+    }),
+    select_all_mandatory: false,
+    source: "WEB",
+    declined,
+    meta_data,
+  };
+
+  const response = await fetch(
+    `${apiBaseUrl}/public/organisations/${org_uuid}/workspaces/${workspace_uuid}/submit-consent`,
+    {
+      method: "POST",
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(payload),
     }
-  } catch (error) {
-    throw error;
+  );
+
+  if (!response.ok) {
+    throw await parseApiError(
+      response,
+      "Could not submit your consent. Please try again."
+    );
   }
 };

package/src/RedactoPrivacyCenter/NotificationsPage.tsx

@@ -0,0 +1,174 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { IoChevronBackOutline } from 'react-icons/io5';
+import { useTranslation } from 'react-i18next';
+import { usePageChrome } from './context/PageChromeContext';
+import { fetchNotifications } from './lib/api';
+import type { Notification, NotificationSummary, NotificationCTA, FilterTab } from './lib/types';
+import { TAB_TO_CATEGORY, POLL_INTERVAL, NOTIFICATION_PAGE_SIZE, useNotificationStatLabels } from './lib/constants';
+import { useCurrentLanguage } from './lib/useCurrentLanguage';
+import { StatCard } from './components/NotificationHub/StatCard';
+import { NotificationListPanel } from './components/NotificationHub/NotificationListPanel';
+import { useNotificationActions } from './components/NotificationHub/useNotificationActions';
+
+export const NotificationsPage = () => {
+  const { t } = useTranslation();
+  const { langParam } = useCurrentLanguage();
+  const { setPageChromeOverride, clearPageChromeOverride } = usePageChrome();
+  const statLabels = useNotificationStatLabels();
+  const {
+    organizationId, workspaceId, authContext, consentClient, navigateTo,
+    hasAcknowledgeCTA, handleMarkRead, handleMarkAllRead, handleAcknowledge, handleCTAClick,
+  } = useNotificationActions();
+
+  const [notifications, setNotifications] = useState<Notification[]>([]);
+  const [summary, setSummary] = useState<NotificationSummary>({ total: 0, unread: 0, action_needed: 0, acknowledged: 0 });
+  const [activeTab, setActiveTab] = useState<FilterTab>('all');
+  const [isLoading, setIsLoading] = useState(true);
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const [totalCount, setTotalCount] = useState(0);
+  const [skip, setSkip] = useState(0);
+  const pollRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const loadNotificationsRef = useRef<(includeSummary?: boolean, silent?: boolean) => Promise<void>>();
+
+  useEffect(() => {
+    setPageChromeOverride({ titleKey: 'notificationHub', descriptionKey: 'notificationHubSubtitle' });
+    return () => clearPageChromeOverride();
+  }, [setPageChromeOverride, clearPageChromeOverride]);
+
+  const loadNotifications = useCallback(async (includeSummary = false, silent = false) => {
+    if (!organizationId || !workspaceId) {
+      return;
+    }
+    if (!silent) {
+      setIsLoading(true);
+    }
+    try {
+      const result = await fetchNotifications(organizationId, workspaceId, {
+        category: TAB_TO_CATEGORY[activeTab], skip, limit: NOTIFICATION_PAGE_SIZE,
+        include_summary: includeSummary,
+      }, authContext, consentClient, langParam);
+      if (result) {
+        setNotifications(result.data);
+        if (result.summary) {
+          setSummary(result.summary);
+        }
+        setTotalCount(result.total);
+      }
+    } finally {
+      setIsLoading(false);
+      setIsRefreshing(false);
+    }
+  }, [organizationId, workspaceId, activeTab, skip, authContext, consentClient, langParam]);
+
+  // Initial load with summary
+  useEffect(() => { loadNotifications(true); }, [loadNotifications]);
+
+  // Keep ref pointed at the latest loadNotifications so the polling effect
+  // can call it without depending on (and resetting on) tab/pagination changes.
+  useEffect(() => {
+    loadNotificationsRef.current = loadNotifications;
+  }, [loadNotifications]);
+
+  // Silent poll without summary (counts don't change on pagination)
+  useEffect(() => {
+    pollRef.current = setInterval(() => {
+      loadNotificationsRef.current?.(false, true);
+    }, POLL_INTERVAL);
+    return () => {
+      if (pollRef.current) {
+        clearInterval(pollRef.current);
+      }
+    };
+  }, []);
+
+  useEffect(() => { setSkip(0); }, [activeTab]);
+
+  const onNotificationClick = useCallback(async (notification: Notification) => {
+    if (!organizationId || !workspaceId) {
+      return;
+    }
+    const shouldMarkRead = !notification.is_read;
+    const shouldAutoAcknowledge = !notification.is_acknowledged && !hasAcknowledgeCTA(notification);
+    if (!shouldMarkRead && !shouldAutoAcknowledge) {
+      return;
+    }
+
+    const markedRead = shouldMarkRead ? await handleMarkRead(notification.uuid) : false;
+    const acknowledged = shouldAutoAcknowledge ? await handleAcknowledge(notification.uuid) : false;
+    if (!markedRead && !acknowledged) {
+      return;
+    }
+
+    setNotifications((prev) => prev.map((n) =>
+      n.uuid === notification.uuid ? { ...n, ...(markedRead ? { is_read: true } : {}), ...(acknowledged ? { is_acknowledged: true } : {}) } : n
+    ));
+    setSummary((prev) => ({
+      ...prev,
+      unread: Math.max(0, prev.unread - (markedRead ? 1 : 0)),
+      acknowledged: prev.acknowledged + (acknowledged && !notification.is_acknowledged ? 1 : 0),
+    }));
+  }, [organizationId, workspaceId, hasAcknowledgeCTA, handleMarkRead, handleAcknowledge]);
+
+  const onCTAClick = useCallback(async (notification: Notification, cta: NotificationCTA) => {
+    const result = await handleCTAClick(notification, cta);
+    if (result === 'acknowledged') {
+      setNotifications((prev) => prev.map((n) =>
+        n.uuid === notification.uuid ? { ...n, is_read: true, is_acknowledged: true } : n
+      ));
+      setSummary((prev) => ({
+        ...prev,
+        unread: Math.max(0, prev.unread - (notification.is_read ? 0 : 1)),
+        acknowledged: prev.acknowledged + (notification.is_acknowledged ? 0 : 1),
+      }));
+    } else if (result) {
+      onNotificationClick(notification);
+    }
+  }, [handleCTAClick, onNotificationClick]);
+
+  const onMarkAllRead = useCallback(async () => {
+    const ok = await handleMarkAllRead();
+    if (!ok) {
+      return;
+    }
+    setNotifications((prev) => prev.map((n) => ({ ...n, is_read: true })));
+    setSummary((prev) => ({ ...prev, unread: 0 }));
+  }, [handleMarkAllRead]);
+
+  const onRefresh = useCallback(() => {
+    setIsRefreshing(true);
+    loadNotifications(true);
+  }, [loadNotifications]);
+
+  const onBack = useCallback(() => navigateTo('consent-manager'), [navigateTo]);
+
+  return (
+    <div className="pc-notification-page">
+      <button type="button" onClick={onBack} className="pc-notification-back-btn">
+        <IoChevronBackOutline size={14} />
+        {t('backToManageConsent')}
+      </button>
+
+      <div className="pc-notification-stats-grid">
+        <StatCard value={summary.total} label={statLabels.total} />
+        <StatCard value={summary.unread} label={statLabels.unread} />
+        <StatCard value={summary.action_needed} label={statLabels.action_needed} />
+        <StatCard value={summary.acknowledged} label={statLabels.acknowledged} />
+      </div>
+
+      <NotificationListPanel
+        notifications={notifications}
+        totalCount={totalCount}
+        activeTab={activeTab}
+        onTabChange={setActiveTab}
+        skip={skip}
+        onSkipChange={setSkip}
+        isLoading={isLoading}
+        isRefreshing={isRefreshing}
+        onRefresh={onRefresh}
+        onMarkAllRead={onMarkAllRead}
+        onNotificationClick={onNotificationClick}
+        onCTAClick={onCTAClick}
+      />
+    </div>
+  );
+};

package/src/RedactoPrivacyCenter/PrivacyCenterHomePage.tsx

@@ -5,6 +5,7 @@ import { PrivacyCenterConsentManagerPage } from './PrivacyCenterConsentManagerPa
 import { PrivacyCenterFormPage } from './PrivacyCenterFormPage';
 import { PrivacyCenterActivityPage } from './PrivacyCenterActivityPage';
 import { PrivacyCenterCaseDetailsPage } from './PrivacyCenterCaseDetailsPage';
+import { NotificationsPage } from './NotificationsPage';
 
 export function PrivacyCenterHomePage() {
   const { currentPage } = useInternalNavigation();
@@ -24,6 +25,8 @@ export function PrivacyCenterHomePage() {
       return <PrivacyCenterActivityPage />;
     case 'case-details':
       return <PrivacyCenterCaseDetailsPage />;
+    case 'notifications':
+      return <NotificationsPage />;
     default:
       return <PrivacyCenterConsentManagerPage />;
   }