@redacto.io/consent-sdk-react 10.0.0-beta.9 → 10.1.0-beta.0

package/src/RedactoNoticeConsentInline/styles.ts

@@ -1,397 +0,0 @@
-export const styles = {
-  overlay: {
-    position: "fixed",
-    top: 0,
-    left: 0,
-    width: "100%",
-    height: "100%",
-    backgroundColor: "rgba(0, 0, 0, 0.5)",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    zIndex: 999,
-    animation: "overlayFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1)",
-    pointerEvents: "all",
-    margin: 0,
-    padding: 0,
-    boxSizing: "border-box",
-  },
-
-  container: {
-    position: "relative",
-    width: "100%",
-    maxWidth: "700px",
-    borderRadius: "8px",
-    backgroundColor: "#ffffff",
-    boxShadow: "0px 1px 3px rgba(0, 0, 0, 0.1)",
-    border: "1px solid #e5e7eb",
-    display: "flex",
-    flexDirection: "column",
-    margin: 0,
-    padding: 0,
-    boxSizing: "border-box",
-    textAlign: "left",
-    fontFamily: "inherit",
-  },
-
-  content: {
-    margin: "22px",
-    display: "flex",
-    flexDirection: "column",
-    flexGrow: 1,
-    overflow: "hidden",
-    minHeight: 0,
-    boxSizing: "border-box",
-    textAlign: "left",
-  },
-
-  topSection: {
-    display: "flex",
-    justifyContent: "space-between",
-    alignItems: "center",
-    paddingBottom: "15px",
-    borderBottom: "1px solid #e5e7eb",
-    boxShadow: "0 1px 2px rgba(0, 0, 0, 0.03)",
-    backgroundColor: "#ffffff",
-    margin: 0,
-    boxSizing: "border-box",
-    textAlign: "left",
-  },
-
-  topLeft: {
-    display: "flex",
-    alignItems: "center",
-    gap: "10px",
-    margin: 0,
-    padding: 0,
-    boxSizing: "border-box",
-  },
-
-  logo: {
-    height: "32px",
-    width: "auto",
-    objectFit: "contain",
-    margin: 0,
-    padding: 0,
-    display: "block",
-  },
-
-  title: {
-    fontSize: "18px",
-    fontWeight: 700,
-    lineHeight: "150%",
-    letterSpacing: "0.2px",
-    verticalAlign: "middle",
-    color: "#101828",
-    margin: 0,
-    padding: 0,
-    textAlign: "left",
-  },
-
-  topRight: {
-    borderRadius: "8px",
-    padding: "3px 9px",
-    border: "1px solid #d0d5dd",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    fontWeight: 400,
-    fontSize: "12px",
-    lineHeight: "150%",
-    letterSpacing: "0.2px",
-    verticalAlign: "middle",
-    color: "#344054",
-    gap: "5px",
-    margin: 0,
-    boxSizing: "border-box",
-    textAlign: "left",
-    cursor: "pointer",
-    backgroundColor: "#ffffff",
-  },
-
-  middleSection: {
-    margin: "20px 0px",
-    display: "flex",
-    flexDirection: "column",
-    gap: "12px",
-    flexGrow: 1,
-    overflowY: "auto",
-    minHeight: 0,
-    paddingRight: "15px",
-    boxSizing: "border-box",
-    textAlign: "left",
-  },
-
-  privacyText: {
-    fontSize: "16px",
-    fontWeight: 400,
-    lineHeight: "150%",
-    letterSpacing: "0.2px",
-    color: "#344054",
-    margin: 0,
-    padding: 0,
-    textAlign: "left",
-  },
-
-  link: {
-    color: "#4f87ff",
-    textDecoration: "none",
-    margin: 0,
-    padding: 0,
-    boxSizing: "border-box",
-  },
-
-  subTitle: {
-    fontWeight: 600,
-    fontSize: "16px",
-    lineHeight: "150%",
-    letterSpacing: "0.2px",
-    color: "#101828",
-    margin: 0,
-    padding: 0,
-    textAlign: "left",
-  },
-
-  optionsContainer: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "14px",
-    margin: 0,
-    padding: 0,
-    boxSizing: "border-box",
-  },
-
-  optionItem: {
-    display: "flex",
-    justifyContent: "space-between",
-    alignItems: "center",
-    margin: 0,
-    padding: 0,
-    boxSizing: "border-box",
-  },
-
-  optionLeft: {
-    display: "flex",
-    gap: "12px",
-    alignItems: "center",
-    cursor: "pointer",
-    margin: 0,
-    padding: 0,
-    boxSizing: "border-box",
-  },
-
-  optionTextContainer: {
-    display: "flex",
-    flexDirection: "column",
-    margin: 0,
-    padding: 0,
-    boxSizing: "border-box",
-  },
-
-  optionTitle: {
-    fontWeight: 500,
-    fontSize: "16px",
-    lineHeight: "150%",
-    letterSpacing: "0.2px",
-    color: "#101828",
-    margin: 0,
-    padding: 0,
-    textAlign: "left",
-  },
-
-  optionDescription: {
-    fontWeight: 400,
-    fontSize: "12px",
-    lineHeight: "150%",
-    letterSpacing: "0.2px",
-    color: "#475467",
-    verticalAlign: "middle",
-    margin: 0,
-    padding: 0,
-    textAlign: "left",
-  },
-
-  checkboxLarge: {
-    height: "20px",
-    width: "20px",
-    padding: "4px",
-    borderRadius: "5px",
-    border: "2px solid #d0d5dd",
-    margin: 0,
-    boxSizing: "border-box",
-    appearance: "none",
-    WebkitAppearance: "none",
-    MozAppearance: "none",
-    cursor: "pointer",
-    position: "relative",
-    backgroundColor: "transparent",
-  },
-
-  dataElementsContainer: {
-    marginLeft: "27px",
-    display: "flex",
-    flexDirection: "column",
-    margin: 0,
-    padding: 0,
-    boxSizing: "border-box",
-    paddingLeft: "22px",
-  },
-
-  dataElementItem: {
-    display: "flex",
-    alignItems: "center",
-    gap: "10px",
-    justifyContent: "space-between",
-    margin: 0,
-    padding: 0,
-    boxSizing: "border-box",
-    minHeight: "24px",
-  },
-
-  dataElementText: {
-    fontWeight: 400,
-    fontSize: "14px",
-    lineHeight: "150%",
-    letterSpacing: "0.2px",
-    color: "#344054",
-    margin: 0,
-    padding: 0,
-    textAlign: "left",
-  },
-
-  checkboxSmall: {
-    height: "16px",
-    width: "16px",
-    padding: "4px",
-    borderRadius: "5px",
-    border: "2px solid #d0d5dd",
-    margin: 0,
-    boxSizing: "border-box",
-    appearance: "none",
-    WebkitAppearance: "none",
-    MozAppearance: "none",
-    cursor: "pointer",
-    position: "relative",
-    backgroundColor: "transparent",
-  },
-
-  bottomSection: {
-    display: "flex",
-    justifyContent: "space-between",
-    gap: "29px",
-    paddingTop: "15px",
-    borderTop: "1px solid #e5e7eb",
-    boxShadow: "0 -1px 2px rgba(0, 0, 0, 0.03)",
-    backgroundColor: "#ffffff",
-    margin: 0,
-    boxSizing: "border-box",
-  },
-
-  button: {
-    width: "100%",
-    borderRadius: "8px",
-    padding: "9px 45px",
-    fontWeight: 400,
-    fontSize: "16px",
-    lineHeight: "150%",
-    letterSpacing: "0.2px",
-    cursor: "pointer",
-    margin: 0,
-    boxSizing: "border-box",
-    textAlign: "center",
-  },
-
-  acceptButton: {
-    backgroundColor: "#4f87ff",
-    border: "none",
-    color: "#ffffff",
-  },
-
-  cancelButton: {
-    border: "1px solid #d0d5dd",
-    backgroundColor: "#ffffff",
-    color: "#000000",
-  },
-
-  languageSelectorContainer: {
-    position: "relative",
-    margin: 0,
-    padding: 0,
-    boxSizing: "border-box",
-  },
-
-  languageDropdown: {
-    position: "absolute",
-    top: "100%",
-    right: 0,
-    backgroundColor: "#ffffff",
-    border: "1px solid #d0d5dd",
-    borderRadius: "4px",
-    boxShadow: "0px 2px 4px rgba(0, 0, 0, 0.1)",
-    zIndex: 10,
-    width: "max-content",
-    marginTop: "4px",
-    padding: 0,
-    boxSizing: "border-box",
-    textAlign: "left",
-  },
-
-  languageItem: {
-    padding: "8px 12px",
-    cursor: "pointer",
-    fontSize: "12px",
-    color: "#344054",
-    backgroundColor: "#ffffff",
-    borderBottom: "1px solid #e5e7eb",
-    margin: 0,
-    boxSizing: "border-box",
-    textAlign: "left",
-  },
-
-  selectedLanguageItem: {
-    backgroundColor: "#f3f4f6",
-    fontWeight: 600,
-  },
-
-  loadingContainer: {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-    justifyContent: "center",
-    padding: "2rem",
-    minHeight: "200px",
-    margin: 0,
-    boxSizing: "border-box",
-  },
-
-  loadingSpinner: {
-    width: "40px",
-    height: "40px",
-    border: "4px solid #f3f3f3",
-    borderTop: "4px solid #3498db",
-    borderRadius: "50%",
-    animation: "spin 1s linear infinite",
-    marginBottom: "1rem",
-    boxSizing: "border-box",
-  },
-} as const;
-
-// Keyframes
-export const keyframes = {
-  overlayFadeIn: {
-    from: {
-      opacity: 0,
-    },
-    to: {
-      opacity: 1,
-    },
-  },
-  spin: {
-    "0%": {
-      transform: "rotate(0deg)",
-    },
-    "100%": {
-      transform: "rotate(360deg)",
-    },
-  },
-} as const;

package/src/RedactoNoticeConsentInline/types.ts

@@ -1,51 +0,0 @@
-import type { Settings } from "./api/types";
-import type { DpoInfoTranslation } from "../RedactoNoticeConsent/api/types";
-
-export type Props = Readonly<{
-  org_uuid: string;
-  workspace_uuid: string;
-  notice_uuid: string;
-  accessToken?: string;
-  refreshToken?: string;
-  baseUrl?: string;
-  ledgerBaseUrl?: string;
-  settings?: Partial<Settings>;
-  language?: string;
-  onAccept?: () => void;
-  onDecline?: () => void;
-  onError?: (error: Error) => void;
-  onValidationChange?: (isValid: boolean) => void;
-  applicationId?: string;
-}>;
-
-export type PurposeTranslation = string | { name: string; description: string };
-
-export type PurposeTranslations = {
-  [purposeId: string]: PurposeTranslation;
-};
-
-export type DataElementTranslations = {
-  [elementId: string]: string;
-};
-
-export type TranslationObject = {
-  notice_text?: string;
-  additional_text?: string;
-  confirm_button_text?: string;
-  decline_button_text?: string;
-  purposes?: PurposeTranslations;
-  data_elements?: DataElementTranslations;
-  purpose_section_heading?: string;
-  privacy_policy_prefix_text?: string;
-  privacy_policy_anchor_text?: string;
-  privacy_center_anchor_text?: string;
-  dpo_info?: DpoInfoTranslation;
-  [key: string]:
-    | string
-    | PurposeTranslations
-    | DataElementTranslations
-    | DpoInfoTranslation
-    | Record<string, string | undefined>
-    | Record<string, string | { name: string; description: string }>
-    | undefined;
-};

package/src/RedactoNoticeConsentInline/useMediaQuery.ts

@@ -1,36 +0,0 @@
-import { useState, useEffect } from "react";
-
-export const useMediaQuery = (query: string): boolean => {
-  const getMatches = () =>
-    typeof window !== "undefined" ? window.matchMedia(query).matches : false;
-  const [matches, setMatches] = useState<boolean>(getMatches);
-
-  useEffect(() => {
-    if (typeof window === "undefined") return;
-    const media = window.matchMedia(query);
-
-    // Create event listener
-    const listener = (e: MediaQueryListEvent) => {
-      setMatches(e.matches);
-    };
-
-    // Add listener (fallback for legacy browsers)
-    if (media.addEventListener) {
-      media.addEventListener("change", listener);
-    } else {
-      // @ts-ignore – deprecated fallback
-      media.addListener(listener);
-    }
-
-    // Clean up
-    return () => {
-      if (media.removeEventListener) {
-        media.removeEventListener("change", listener);
-      } else {
-        media.removeListener(listener);
-      }
-    };
-  }, [query]);
-
-  return matches;
-};

package/src/RedactoPrivacyCenter/NotificationsPage.tsx

@@ -1,182 +0,0 @@
-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 { isRefreshBlocked } from './lib/utils';
-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;
-    }
-    // Skip polling/loading work while auth is terminally failed / backing off
-    // (incident 2026-06-22); clear spinners so the UI doesn't hang.
-    if (isRefreshBlocked(authContext)) {
-      setIsLoading(false);
-      setIsRefreshing(false);
-      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/PrivacyCenterActivityPage.tsx

@@ -1,19 +0,0 @@
-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>
-  );
-}