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

package/src/RedactoPrivacyCenter/components/ConsentManagerPurposeCards.tsx

@@ -0,0 +1,102 @@
+import { useTranslation } from 'react-i18next';
+import { PCEmpty, PCText } from '../ui';
+import type { ConsentModalRecord, DisplayPurposeRow } from '../lib/types';
+import {
+  renderGivenDate,
+  renderMethod,
+  renderModifyButton,
+  renderStatusBadge,
+  renderValidTill,
+} from './ConsentManagerCells';
+
+type ConsentManagerPurposeCardsProps = {
+  rows: DisplayPurposeRow[];
+  onModify: (record: ConsentModalRecord) => void;
+};
+
+const toModalRecord = (row: DisplayPurposeRow): ConsentModalRecord => ({
+  ...row,
+});
+
+export function ConsentManagerPurposeCards({
+  rows,
+  onModify,
+}: ConsentManagerPurposeCardsProps) {
+  const { t } = useTranslation();
+
+  if (rows.length === 0) {
+    return (
+      <div className="pc-consent-mobile-empty">
+        <PCEmpty title={t('noData')} />
+      </div>
+    );
+  }
+
+  return (
+    <div className="pc-consent-mobile-list">
+      {rows.map((row) => (
+        <article
+          key={`${row.product_uuid}:${row.purpose_uuid}`}
+          className="pc-consent-mobile-card"
+        >
+          <div className="pc-consent-mobile-purpose-head">
+            <div style={{ minWidth: 0 }}>
+              <PCText size="sm" weight="semibold">{row.name}</PCText>
+              {row.description && (
+                <PCText size="sm" color="secondary" className="pc-consent-mobile-subtle-text">
+                  {row.description}
+                </PCText>
+              )}
+            </div>
+            {renderStatusBadge(row.status, t)}
+          </div>
+
+          <div className="pc-consent-mobile-activity-row">
+            <PCText size="sm" color="secondary" className="pc-consent-mobile-meta-label">
+              {t('product')}
+            </PCText>
+            <PCText size="sm" weight="medium">{row.product_name || '-'}</PCText>
+          </div>
+
+          {row.nominator && (
+            <div className="pc-consent-mobile-activity-row">
+              <PCText size="sm" color="secondary" className="pc-consent-mobile-meta-label">
+                {t('nominatedBy')}
+              </PCText>
+              <PCText size="sm" weight="medium">
+                {row.nominator.name || row.nominator.email || row.nominator.org_user_id}
+              </PCText>
+            </div>
+          )}
+
+          <div className="pc-consent-mobile-meta-grid">
+            <div>
+              <PCText size="sm" color="secondary" className="pc-consent-mobile-meta-label">
+                {t('givenDate')}
+              </PCText>
+              {renderGivenDate(row.given_date, { showTooltip: false })}
+            </div>
+            <div>
+              <PCText size="sm" color="secondary" className="pc-consent-mobile-meta-label">
+                {t('validTill')}
+              </PCText>
+              {renderValidTill(row, t)}
+            </div>
+            <div>
+              <PCText size="sm" color="secondary" className="pc-consent-mobile-meta-label">
+                {t('method')}
+              </PCText>
+              {renderMethod(row.method)}
+            </div>
+            <div className="pc-consent-mobile-action-cell">
+              <PCText size="sm" color="secondary" className="pc-consent-mobile-meta-label">
+                {t('action')}
+              </PCText>
+              {renderModifyButton(toModalRecord(row), onModify, t)}
+            </div>
+          </div>
+        </article>
+      ))}
+    </div>
+  );
+}

package/src/RedactoPrivacyCenter/components/ConsentManagerTableSkeleton.tsx

@@ -6,8 +6,9 @@ const getVar = (varName: string): string => `var(${varName})`;
 export const ConsentManagerTableSkeleton = () => {
   return (
     <div style={{
-      borderRadius: getVar('--pc-border-radius-md'),
+      borderRadius: `${getVar('--pc-border-radius-lg')} ${getVar('--pc-border-radius-lg')} 0 0`,
       border: `1px solid ${getVar('--pc-border-color')}`,
+      borderBottom: 'none',
       backgroundColor: getVar('--pc-bg-primary'),
     }}>
       {/* Table Header */}
@@ -44,7 +45,10 @@ export const ConsentManagerTableSkeleton = () => {
         <div
           key={index}
           style={{
-            borderBottom: `1px solid ${getVar('--pc-border-color')}`,
+            borderBottom:
+              index === SKELETON_ROW_COUNT - 1
+                ? 'none'
+                : `1px solid ${getVar('--pc-border-color')}`,
             backgroundColor: getVar('--pc-bg-primary'),
           }}
         >

package/src/RedactoPrivacyCenter/components/ModifyConsentModal.tsx

@@ -19,7 +19,7 @@ export const ModifyConsentModal = ({
   const [isAccordionOpen, setIsAccordionOpen] = useState(false);
   const [selectedDataElementUuids, setSelectedDataElementUuids] = useState<string[]>([]);
 
-  const nominatorInfo = selectedRecord?.nominator_info;
+  const nominatorInfo = selectedRecord?.nominator;
   const nominatorLabel = nominatorInfo?.name || nominatorInfo?.email || nominatorInfo?.org_user_id || null;
 
   const actionConfig = useMemo(() => {
@@ -39,7 +39,10 @@ export const ModifyConsentModal = ({
       };
     }
 
-    if (status === ConsentStatusEnum.WITHDRAWN) {
+    if (
+      status === ConsentStatusEnum.WITHDRAWN ||
+      status === ConsentStatusEnum.REVOKED
+    ) {
       return {
         action: 'regrant' as ConsentAction,
         buttonLabel: t('regrantConsent'),
@@ -158,7 +161,7 @@ export const ModifyConsentModal = ({
                           fontWeight: pcStyles.fontWeightSemibold.fontWeight,
                           color: pcStyles.textPrimary.color,
                         }}>
-                          {selectedRecord.purpose}
+                          {selectedRecord.name}
                         </p>
                         <p style={{
                           textAlign: 'left',
@@ -167,7 +170,7 @@ export const ModifyConsentModal = ({
                           color: pcStyles.textSecondary.color,
                           margin: 0,
                         }}>
-                          {selectedRecord.purpose_description}
+                          {selectedRecord.description}
                         </p>
                       </div>
                       <ChevronDownIcon
@@ -309,7 +312,7 @@ export const ModifyConsentModal = ({
                 variant={actionConfig.buttonVariant}
                 onClick={() => {
                   if (selectedRecord.purpose_uuid) {
-                    const nomContact = selectedRecord.nominator_info?.email || selectedRecord.nominator_info?.org_user_id || undefined;
+                    const nomContact = selectedRecord.nominator?.email || selectedRecord.nominator?.org_user_id || undefined;
                     onManageConsent(
                       selectedRecord.purpose_uuid,
                       actionConfig.action,

package/src/RedactoPrivacyCenter/components/NotificationHub/NotificationBell.tsx

@@ -148,7 +148,7 @@ export const NotificationBell = () => {
       <PCTooltip content={t('notifications')} placement="bottom" color="invert">
         <div className="pc-notification-bell-wrapper">
           <button type="button" aria-label={t('notifications')} className="pc-notification-bell-btn">
-            <IoNotificationsOutline size={20} />
+            <IoNotificationsOutline size={18} />
           </button>
           {unreadCount > 0 && (
             <span className="pc-notification-badge">{unreadCount}</span>

package/src/RedactoPrivacyCenter/components/PrivacyCenterLayout.tsx

@@ -14,6 +14,7 @@ import { pcStyles } from '../styles/pcStyles';
 import type { PrivacyCenterLayoutProps } from './types';
 import { NotificationBell } from './NotificationHub/NotificationBell';
 import { getVar } from '../lib/utils';
+import { Globe2 } from 'lucide-react';
 
 export default function PrivacyCenterLayout({
   children,
@@ -23,7 +24,7 @@ export default function PrivacyCenterLayout({
 }: PrivacyCenterLayoutProps) {
   const { t } = useTranslation();
   const { currentPage } = useInternalNavigation();
-  const { pageChromeOverride } = usePageChrome();
+  const { pageChromeOverride, headerStatus } = usePageChrome();
   const [locale, setLocale] = useState(i18n.language);
   const pageChrome = pageChromeOverride ?? PAGE_CHROME_BY_PAGE[currentPage];
 
@@ -59,12 +60,11 @@ export default function PrivacyCenterLayout({
             flex: 1,
             minWidth: 0,
             backgroundColor: getVar('--pc-bg-shell'),
+            minHeight: 0,
           }} className="pc-content-wrapper">
             {/* Top Navbar with Theme Toggle */}
             <nav style={{
-              position: 'fixed',
-              top: 0,
-              zIndex: 50,
+              position: 'relative',
               ...pcStyles.flex,
               ...pcStyles.itemsCenter,
               ...pcStyles.justifyBetween,
@@ -74,8 +74,8 @@ export default function PrivacyCenterLayout({
               paddingRight: 'var(--pc-navbar-padding-right, 0.75rem)',
               paddingTop: 'var(--pc-navbar-padding-top, 0.625rem)',
               paddingBottom: 'var(--pc-navbar-padding-bottom, 0.625rem)',
-              transition: 'background-color 0.3s ease, border-color 0.3s ease, width 0.3s ease, left 0.3s ease',
-              willChange: 'background-color, border-color, width, left',
+              transition: 'background-color 0.3s ease, border-color 0.3s ease',
+              willChange: 'background-color, border-color',
             }} className="pc-navbar">
               <div
                 className="pc-navbar-page-meta"
@@ -85,32 +85,76 @@ export default function PrivacyCenterLayout({
                   justifyContent: 'center',
                   minWidth: 0,
                   flex: 1,
-                  gap: '0.125rem',
+                  gap: '0.1875rem',
                 }}
               >
-                <p
-                  className="pc-navbar-title"
-                  style={{
-                    margin: 0,
-                    color: getVar('--pc-text-primary'),
-                    fontSize: '1rem',
-                    fontWeight: 600,
-                    lineHeight: 1.3,
-                    whiteSpace: 'nowrap',
-                    overflow: 'hidden',
-                    textOverflow: 'ellipsis',
-                  }}
-                >
-                  {t(pageChrome.titleKey)}
-                </p>
+                <div style={{ display: 'flex', alignItems: 'center', gap: '0.625rem', minWidth: 0 }}>
+                  <p
+                    className="pc-navbar-title"
+                    style={{
+                      margin: 0,
+                      color: getVar('--pc-text-primary'),
+                      fontSize: '1.0625rem',
+                      fontWeight: 700,
+                      lineHeight: 1.2,
+                      whiteSpace: 'nowrap',
+                      overflow: 'hidden',
+                      textOverflow: 'ellipsis',
+                    }}
+                  >
+                    {t(pageChrome.titleKey)}
+                  </p>
+                  {headerStatus && (
+                    <span
+                      style={{
+                        display: 'inline-flex',
+                        alignItems: 'center',
+                        flexShrink: 0,
+                        borderRadius: '9999px',
+                        gap: '0.375rem',
+                        padding: '0.25rem 0.75rem',
+                        fontSize: '0.625rem',
+                        fontWeight: 600,
+                        lineHeight: 1.2,
+                        border: `1px solid ${
+                          headerStatus.variant === 'success'
+                            ? 'rgba(16, 185, 129, 0.35)'
+                            : 'rgba(245, 158, 11, 0.35)'
+                        }`,
+                        backgroundColor:
+                          headerStatus.variant === 'success'
+                            ? 'rgba(16, 185, 129, 0.1)'
+                            : '#fff7ed',
+                        color:
+                          headerStatus.variant === 'success'
+                            ? getVar('--pc-success')
+                            : '#d97706',
+                      }}
+                    >
+                      <span
+                        aria-hidden="true"
+                        style={{
+                          width: '0.4375rem',
+                          height: '0.4375rem',
+                          borderRadius: '9999px',
+                          backgroundColor:
+                            headerStatus.variant === 'success'
+                              ? getVar('--pc-success')
+                              : '#d97706',
+                        }}
+                      />
+                      {headerStatus.label}
+                    </span>
+                  )}
+                </div>
                 {pageChrome.descriptionKey && (
                   <p
                     className="pc-navbar-description"
                     style={{
                       margin: 0,
                       color: getVar('--pc-text-secondary'),
-                      fontSize: '0.8125rem',
-                      lineHeight: 1.35,
+                      fontSize: '0.75rem',
+                      lineHeight: 1.2,
                       whiteSpace: 'nowrap',
                       overflow: 'hidden',
                       textOverflow: 'ellipsis',
@@ -123,18 +167,20 @@ export default function PrivacyCenterLayout({
               <div style={{
                 display: 'flex',
                 alignItems: 'center',
-                gap: '0.5rem',
+                gap: '0.375rem',
                 flexShrink: 0,
               }} className="pc-navbar-actions">
                 <PCSelect
+                  className="pc-navbar-language-select"
                   size="sm"
                   searchable
+                  prefix={<Globe2 size={12} strokeWidth={1.8} />}
                   searchPlaceholder={t('searchPlaceholder')}
                   noOptionsMessage={t('noOptionsFound')}
                   style={{
                     width: 'auto',
-                    minWidth: '92px',
-                    maxWidth: '136px',
+                    minWidth: '120px',
+                    maxWidth: 'min(65vw, 320px)',
                     flexShrink: 0,
                   }}
                   options={languageOptions}
@@ -142,34 +188,36 @@ export default function PrivacyCenterLayout({
                   onChange={handleLanguageChange}
                 />
                 <NotificationBell />
-                <ThemeToggle />
+                <ThemeToggle className="pc-navbar-icon-btn" />
               </div>
             </nav>
             <div style={{
               ...pcStyles.flex,
               ...pcStyles.flexCol,
-              flexGrow: 1,
+              flex: 1,
+              minHeight: 0,
               paddingLeft: 'var(--pc-content-padding-left, 0.75rem)',
               paddingRight: 'var(--pc-content-padding-right, 0.75rem)',
-              paddingTop: 'var(--pc-content-padding-top, 4rem)',
+              paddingTop: 'var(--pc-content-padding-top, 0)',
               minWidth: 0,
               backgroundColor: getVar('--pc-bg-shell'),
             }} className="pc-content-container">
               <div style={{
-                minHeight: '100vh',
+                display: 'flex',
+                flexDirection: 'column',
+                flex: 1,
+                minHeight: 0,
                 width: '100%',
               }}>
                 <div style={{
                   ...pcStyles.flex,
                   ...pcStyles.flexCol,
-                  height: '100%',
-                  minHeight: '100vh',
+                  flex: 1,
+                  minHeight: 0,
                   ...pcStyles.justifyBetween,
-                  ...pcStyles.gapMd,
-                  paddingLeft: '0.5rem',
-                  paddingRight: '0.5rem',
-                  paddingTop: '1rem',
-                  paddingBottom: '1rem',
+                  ...pcStyles.gapSm,
+                  paddingTop: '0.625rem',
+                  paddingBottom: '0.75rem',
                 }}>
                   <div className={contentClassName} style={{ width: '100%' }}>{children}</div>
                   <div style={{
@@ -199,17 +247,14 @@ export default function PrivacyCenterLayout({
         .pc-navbar {
           --pc-navbar-padding-left: 0.75rem;
           --pc-navbar-padding-right: 0.75rem;
-          --pc-navbar-padding-top: 0.625rem;
-          --pc-navbar-padding-bottom: 0.625rem;
-          left: var(--pc-sidebar-offset) !important;
-          width: calc(100% - var(--pc-sidebar-offset)) !important;
-          transition: left 0.3s ease, width 0.3s ease !important;
+          --pc-navbar-padding-top: 0.875rem;
+          --pc-navbar-padding-bottom: 0.75rem;
         }
 
         .pc-content-container {
           --pc-content-padding-left: 0.75rem;
           --pc-content-padding-right: 0.75rem;
-          --pc-content-padding-top: 4rem;
+          --pc-content-padding-top: 0;
         }
 
         .pc-navbar-page-meta {
@@ -247,7 +292,7 @@ export default function PrivacyCenterLayout({
           .pc-navbar {
             --pc-navbar-padding-left: 3.75rem;
             --pc-navbar-padding-right: 0.75rem;
-            --pc-navbar-padding-top: 0.625rem;
+            --pc-navbar-padding-top: 0.75rem;
             --pc-navbar-padding-bottom: 0.625rem;
           }
           .pc-navbar-description {
@@ -261,21 +306,21 @@ export default function PrivacyCenterLayout({
             gap: 0.375rem;
           }
           .pc-content-container {
-            --pc-content-padding-top: 4rem;
+            --pc-content-padding-top: 0;
           }
         }
         @media (min-width: 768px) {
           .pc-navbar {
-            --pc-navbar-padding-left: 1rem;
-            --pc-navbar-padding-right: 1rem;
-            --pc-navbar-padding-top: 0.75rem;
+            --pc-navbar-padding-left: 1.25rem;
+            --pc-navbar-padding-right: 1.25rem;
+            --pc-navbar-padding-top: 0.875rem;
             --pc-navbar-padding-bottom: 0.75rem;
           }
           .pc-navbar-description {
             display: block;
           }
           .pc-content-container {
-            --pc-content-padding-top: 4.5rem;
+            --pc-content-padding-top: 0;
           }
         }
         @media (min-width: 768px) {
@@ -283,19 +328,23 @@ export default function PrivacyCenterLayout({
             font-size: 1.0625rem;
           }
           .pc-navbar-description {
-            font-size: 0.8125rem;
+            font-size: 0.6875rem;
           }
           .pc-content-container {
             --pc-content-padding-left: 1.25rem;
             --pc-content-padding-right: 1.25rem;
-            --pc-content-padding-top: 4.5rem;
+            --pc-content-padding-top: 0;
           }
         }
         @media (min-width: 1024px) {
+          .pc-navbar {
+            --pc-navbar-padding-left: 1.5rem;
+            --pc-navbar-padding-right: 1.5rem;
+          }
           .pc-content-container {
             --pc-content-padding-left: 1.5rem;
             --pc-content-padding-right: 1.5rem;
-            --pc-content-padding-top: 4.75rem;
+            --pc-content-padding-top: 0;
           }
         }
       `}</style>

package/src/RedactoPrivacyCenter/components/types.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import type { CaseRequest, UserConsent } from '../lib/types';
+import type { CaseRequest, ConsentModalRecord } from '../lib/types';
 
 export type TableColumnAlign = 'left' | 'center' | 'right';
 
@@ -61,7 +61,7 @@ export type ConsentManagerProps = {
 export type ModifyConsentModalProps = {
   isOpen: boolean;
   onClose: () => void;
-  selectedRecord: UserConsent | null;
+  selectedRecord: ConsentModalRecord | null;
   isLoading: boolean;
   onManageConsent: (
     purposeId: string,
@@ -71,6 +71,3 @@ export type ModifyConsentModalProps = {
   ) => void;
 };
 
-export type UseConsentManagerColumnsProps = {
-  onOpenModal: (record: UserConsent) => void;
-};

package/src/RedactoPrivacyCenter/context/PageChromeContext.tsx

@@ -12,10 +12,17 @@ export type PageChromeOverride = {
   descriptionKey?: string;
 };
 
+export type PageHeaderStatus = {
+  label: string;
+  variant: 'success' | 'warning';
+};
+
 type PageChromeContextValue = {
   pageChromeOverride: PageChromeOverride | null;
   setPageChromeOverride: (override: PageChromeOverride | null) => void;
   clearPageChromeOverride: () => void;
+  headerStatus: PageHeaderStatus | null;
+  setHeaderStatus: (status: PageHeaderStatus | null) => void;
 };
 
 const PageChromeContext = createContext<PageChromeContextValue | null>(null);
@@ -23,6 +30,7 @@ const PageChromeContext = createContext<PageChromeContextValue | null>(null);
 export function PageChromeProvider({ children }: { children: ReactNode }) {
   const [pageChromeOverride, setPageChromeOverrideState] =
     useState<PageChromeOverride | null>(null);
+  const [headerStatus, setHeaderStatusState] = useState<PageHeaderStatus | null>(null);
 
   const setPageChromeOverride = useCallback(
     (override: PageChromeOverride | null) => {
@@ -35,13 +43,25 @@ export function PageChromeProvider({ children }: { children: ReactNode }) {
     setPageChromeOverrideState(null);
   }, []);
 
+  const setHeaderStatus = useCallback((status: PageHeaderStatus | null) => {
+    setHeaderStatusState(status);
+  }, []);
+
   const value = useMemo(
     () => ({
       pageChromeOverride,
       setPageChromeOverride,
       clearPageChromeOverride,
+      headerStatus,
+      setHeaderStatus,
     }),
-    [pageChromeOverride, setPageChromeOverride, clearPageChromeOverride]
+    [
+      pageChromeOverride,
+      setPageChromeOverride,
+      clearPageChromeOverride,
+      headerStatus,
+      setHeaderStatus,
+    ]
   );
 
   return (