@redacto.io/consent-sdk-react 5.3.0 → 7.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/Form.tsx

@@ -1483,11 +1483,11 @@ export default function Form({
                     className="pc-flex-responsive pc-spacing-responsive"
                   >
                     {isPopup ? (
-                      <PCButton variant="outline" onClick={onClose} style={{ flexShrink: 0 }}>
+                      <PCButton variant="secondary" onClick={onClose} style={{ flexShrink: 0 }}>
                         {t('cancel') ?? 'Cancel'}
                       </PCButton>
                     ) : (
-                      <PCButton variant="outline" style={{ flexShrink: 0 }}>
+                      <PCButton variant="secondary" style={{ flexShrink: 0 }}>
                         {t('saveDraft')}
                       </PCButton>
                     )}
@@ -1523,7 +1523,7 @@ export default function Form({
         footer={
           <div className="pc-erasure-modal-footer">
             <PCButton
-              variant="outline"
+              variant="secondary"
               onClick={() => handleErasureModalChoice(false)}
               disabled={isLoading}
             >

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
@@ -297,7 +300,7 @@ export const ModifyConsentModal = ({
               ...pcStyles.gapSm,
               ...pcStyles.justifyEnd,
             }}>
-              <PCButton variant="outline" onClick={onClose}>
+              <PCButton variant="secondary" onClick={onClose}>
                 {t('cancel')}
               </PCButton>
               <PCButton
@@ -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

@@ -1,8 +1,6 @@
 import { Suspense, useState, useEffect, useCallback } from 'react';
 import SideBarPC from './SideMenuBarPC/SideBarPC';
 import Footer from '../ui/Footer';
-import ThemeToggle from '../ui/ThemeToggle';
-import ThemeTransitionOverlay from './ThemeTransitionOverlay';
 import { PCSelect } from '../ui';
 import { useTranslation } from 'react-i18next';
 import { PAGE_CHROME_BY_PAGE, languageOptions } from '../lib/constants';
@@ -14,6 +12,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 +22,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];
 
@@ -41,7 +40,6 @@ export default function PrivacyCenterLayout({
   return (
     <LocaleContext.Provider value={{ locale, setLocale }}>
       <Suspense fallback={<div style={{ ...pcStyles.flex, ...pcStyles.itemsCenter, ...pcStyles.justifyCenter, minHeight: '100vh' }}>{t('loadingEllipsis')}</div>}>
-        <ThemeTransitionOverlay />
         <main
           className="pc-root"
           style={{
@@ -59,12 +57,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 +71,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 +82,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 +164,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 +185,35 @@ export default function PrivacyCenterLayout({
                   onChange={handleLanguageChange}
                 />
                 <NotificationBell />
-                <ThemeToggle />
               </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 +243,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 +288,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 +302,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 +324,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/SideMenuBarPC/SideBarPC.tsx

@@ -18,6 +18,7 @@ const getVar = (varName: string): string => `var(${varName})`;
 import { SideMenuPC } from './SideMenuPC';
 import { useMenuItemsPC } from '../../lib/constants';
 import { useOrganization } from '../../context/OrganizationContext';
+import { useBranding } from '../../context/BrandingContext';
 import type { SideBarPCProps } from './types';
 import { signOutPrivacyCenter } from '../../lib/utils';
 
@@ -34,6 +35,7 @@ export default function SideBarPC({
   const [email, setEmail] = useState<string>('');
   // const [isSigningOut, setIsSigningOut] = useState(false);
   const { organization } = useOrganization();
+  const branding = useBranding();
 
   useEffect(() => {
     setEmail(sessionStorage.getItem('email') || '');
@@ -109,6 +111,8 @@ export default function SideBarPC({
   }, [isMobileOpen]);
 
   const organizationName = organization?.name || '';
+  const displayName = branding?.brand_name || organizationName;
+  const isExpanded = isMobileOpen || !isCollapsed;
 
   const sidebarClassName = useMemo(
     () =>
@@ -325,7 +329,17 @@ export default function SideBarPC({
               transition: 'transform 0.3s ease',
               willChange: 'transform',
             }}>
-              <PCAvatar name={organizationName} color="info" size="md" />
+              {isExpanded && branding?.logo_url ? (
+                <img
+                  src={branding.logo_url}
+                  alt={displayName}
+                  style={{ height: '32px', width: 'auto', maxWidth: '160px', objectFit: 'contain', display: 'block' }}
+                />
+              ) : branding?.icon_url ? (
+                <PCAvatar src={branding.icon_url} name={displayName} color="info" size="md" />
+              ) : (
+                <PCAvatar name={displayName} color="info" size="md" />
+              )}
             </div>
             <div style={headerTextStyle}>
               <PCText style={{
@@ -337,7 +351,7 @@ export default function SideBarPC({
                 transition: 'opacity 0.3s ease, transform 0.3s ease',
                 willChange: 'opacity, transform',
               }}>
-                {organizationName}
+                {displayName}
               </PCText>
             </div>
           </div>

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/BrandingContext.tsx

@@ -0,0 +1,44 @@
+import { createContext, useContext, useEffect, useState, type ReactNode } from 'react';
+import { fetchOrgBranding } from '../api/orgBranding';
+import { applyBrandingTheme, clearBrandingTheme } from '../styles/applyBrandingTheme';
+import type { OrgBrandingDetail } from '../lib/types';
+
+type BrandingContextValue = { branding: OrgBrandingDetail | null };
+
+const BrandingContext = createContext<BrandingContextValue | null>(null);
+
+export const BrandingProvider = ({ children, slug }: { children: ReactNode; slug: string }) => {
+  const [branding, setBranding] = useState<OrgBrandingDetail | null>(null);
+
+  useEffect(() => {
+    if (!slug) return;
+    let cancelled = false;
+    fetchOrgBranding(slug)
+      .then((data) => {
+        if (!cancelled) setBranding(data);
+      })
+      .catch((error) => {
+        console.warn('[RedactoPrivacyCenter] org branding fetch failed:', error);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [slug]);
+
+  useEffect(() => {
+    if (!branding) return;
+    applyBrandingTheme(branding.theme);
+    return clearBrandingTheme;
+  }, [branding]);
+
+  return (
+    <BrandingContext.Provider value={{ branding }}>
+      {children}
+    </BrandingContext.Provider>
+  );
+};
+
+export const useBranding = (): OrgBrandingDetail | null => {
+  const ctx = useContext(BrandingContext);
+  return ctx?.branding ?? null;
+};