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

package/package.json

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

package/src/RedactoNoticeConsent/RedactoNoticeConsent.tsx

@@ -1511,6 +1511,15 @@ export const RedactoNoticeConsent = ({
         height: isMobile ? "auto" : undefined,
         width: isMobile ? "auto" : undefined,
       },
+      topSection: {
+        flexDirection: isMobile ? ("column" as const) : ("row" as const),
+        alignItems: isMobile ? ("stretch" as const) : ("flex-start" as const),
+        gap: isMobile ? "12px" : "10px",
+      },
+      logo: {
+        maxWidth: isMobile ? "96px" : "140px",
+        maxHeight: isMobile ? "28px" : "32px",
+      },
       languageItem: {
         fontSize: isMobile ? "11px" : "12px",
         padding: isMobile ? "6px 10px" : "8px 12px",
@@ -3663,176 +3672,221 @@ export const RedactoNoticeConsent = ({
                     </button>
                   </div>
                 )}
-                <div style={{ ...styles.topSection, ...sectionStyle }}>
-                  <div style={styles.topLeft}>
-                    <img
-                      style={styles.logo}
-                      src={content?.logo_url || logo}
-                      alt="Redacto Logo"
-                    />
-                    <h2
-                      key={`privacy-notice-title-${selectedLanguage}`}
-                      id="privacy-notice-title"
-                      style={{
-                        ...styles.title,
-                        ...responsiveStyles.title,
-                        ...componentHeadingStyle,
-                      }}
-                    >
-                      {getTranslatedText(
-                        "notice_banner_heading",
-                        content?.notice_banner_heading || "Privacy Notice"
-                      )}
-                    </h2>
-                  </div>
-                  <div style={styles.languageSelectorContainer}>
-                    <div
-                      style={{
-                        display: "flex",
-                        alignItems: "center",
-                        gap: "8px",
-                      }}
-                    >
-                      {/* Speaker icon button - only visible when TTS is available */}
-                      {isTTSAvailable && (
-                        <button
-                          onClick={toggleAudio}
+                <div
+                  style={{
+                    ...styles.topSection,
+                    ...responsiveStyles.topSection,
+                    ...sectionStyle,
+                  }}
+                >
+                  {(() => {
+                    const logoNode = (
+                      <img
+                        style={{ ...styles.logo, ...responsiveStyles.logo }}
+                        src={content?.logo_url || logo}
+                        alt="Redacto Logo"
+                      />
+                    );
+                    const titleNode = (
+                      <h2
+                        key={`privacy-notice-title-${selectedLanguage}`}
+                        id="privacy-notice-title"
+                        style={{
+                          ...styles.title,
+                          ...responsiveStyles.title,
+                          ...componentHeadingStyle,
+                        }}
+                      >
+                        {getTranslatedText(
+                          "notice_banner_heading",
+                          content?.notice_banner_heading || "Privacy Notice"
+                        )}
+                      </h2>
+                    );
+                    const controlsBlock = (
+                      <div style={styles.languageSelectorContainer}>
+                        <div
                           style={{
-                            ...styles.topRight,
-                            ...responsiveStyles.topRight,
-                            ...languageSelectorStyle,
-                            padding: "3px 9px",
                             display: "flex",
                             alignItems: "center",
-                            justifyContent: "center",
+                            gap: "8px",
                           }}
-                          aria-label={
-                            isPlaying && !isPaused
-                              ? "Pause audio playback"
-                              : isPaused
-                                ? "Resume audio playback"
-                                : "Start audio playback"
-                          }
-                          title={
-                            isPlaying && !isPaused
-                              ? "Pause Talkback"
-                              : isPaused
-                                ? "Resume Talkback"
-                                : "Start Talkback"
-                          }
                         >
-                          {isPlaying && !isPaused ? (
-                            // Pause icon
-                            <svg
-                              xmlns="http://www.w3.org/2000/svg"
-                              width="16"
-                              height="16"
-                              viewBox="0 0 24 24"
-                              fill="none"
-                              stroke={
-                                settings?.button?.language?.textColor ||
-                                "currentColor"
+                          {/* Speaker icon button - only visible when TTS is available */}
+                          {isTTSAvailable && (
+                            <button
+                              onClick={toggleAudio}
+                              style={{
+                                ...styles.topRight,
+                                ...responsiveStyles.topRight,
+                                ...languageSelectorStyle,
+                                padding: "3px 9px",
+                                display: "flex",
+                                alignItems: "center",
+                                justifyContent: "center",
+                              }}
+                              aria-label={
+                                isPlaying && !isPaused
+                                  ? "Pause audio playback"
+                                  : isPaused
+                                    ? "Resume audio playback"
+                                    : "Start audio playback"
                               }
-                              strokeWidth="2"
-                              strokeLinecap="round"
-                              strokeLinejoin="round"
-                              aria-hidden="true"
-                            >
-                              <rect x="6" y="4" width="4" height="16" />
-                              <rect x="14" y="4" width="4" height="16" />
-                            </svg>
-                          ) : (
-                            // Play/Sound icon
-                            <svg
-                              xmlns="http://www.w3.org/2000/svg"
-                              width="16"
-                              height="16"
-                              viewBox="0 0 24 24"
-                              fill="none"
-                              stroke={
-                                settings?.button?.language?.textColor ||
-                                "currentColor"
+                              title={
+                                isPlaying && !isPaused
+                                  ? "Pause Talkback"
+                                  : isPaused
+                                    ? "Resume Talkback"
+                                    : "Start Talkback"
                               }
-                              strokeWidth="2"
-                              strokeLinecap="round"
-                              strokeLinejoin="round"
-                              aria-hidden="true"
                             >
-                              <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" />
-                              <path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07" />
-                            </svg>
+                              {isPlaying && !isPaused ? (
+                                // Pause icon
+                                <svg
+                                  xmlns="http://www.w3.org/2000/svg"
+                                  width="16"
+                                  height="16"
+                                  viewBox="0 0 24 24"
+                                  fill="none"
+                                  stroke={
+                                    settings?.button?.language?.textColor ||
+                                    "currentColor"
+                                  }
+                                  strokeWidth="2"
+                                  strokeLinecap="round"
+                                  strokeLinejoin="round"
+                                  aria-hidden="true"
+                                >
+                                  <rect x="6" y="4" width="4" height="16" />
+                                  <rect x="14" y="4" width="4" height="16" />
+                                </svg>
+                              ) : (
+                                // Play/Sound icon
+                                <svg
+                                  xmlns="http://www.w3.org/2000/svg"
+                                  width="16"
+                                  height="16"
+                                  viewBox="0 0 24 24"
+                                  fill="none"
+                                  stroke={
+                                    settings?.button?.language?.textColor ||
+                                    "currentColor"
+                                  }
+                                  strokeWidth="2"
+                                  strokeLinecap="round"
+                                  strokeLinejoin="round"
+                                  aria-hidden="true"
+                                >
+                                  <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" />
+                                  <path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07" />
+                                </svg>
+                              )}
+                            </button>
                           )}
-                        </button>
-                      )}
-                      <div>
-                        <button
-                          ref={firstFocusableRef}
+                          <div>
+                            <button
+                              ref={firstFocusableRef}
+                              style={{
+                                ...styles.topRight,
+                                ...responsiveStyles.topRight,
+                                ...languageSelectorStyle,
+                              }}
+                              onClick={toggleLanguageDropdown}
+                              aria-expanded={isLanguageDropdownOpen}
+                              aria-haspopup="listbox"
+                              aria-controls="language-listbox"
+                              aria-label={`Select language. Current language: ${toNativeLabel(selectedLanguage)}`}
+                            >
+                              {toNativeLabel(selectedLanguage)}
+                              <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                width="16"
+                                height="16"
+                                viewBox="0 0 16 16"
+                                fill="none"
+                                stroke={
+                                  settings?.button?.language?.textColor ||
+                                  "currentColor"
+                                }
+                                strokeWidth="2"
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                style={{ flexShrink: 0, marginLeft: "4px" }}
+                                aria-hidden="true"
+                              >
+                                <path d="M4 6l4 4 4-4" />
+                              </svg>
+                            </button>
+                          </div>
+                        </div>
+                        {isLanguageDropdownOpen && (
+                          <ul
+                            id="language-listbox"
+                            style={{
+                              ...styles.languageDropdown,
+                              ...languageSelectorStyle,
+                            }}
+                            role="listbox"
+                            aria-label="Select language"
+                          >
+                            {availableLanguages.map((lang: string) => (
+                              <li
+                                key={lang}
+                                style={{
+                                  ...styles.languageItem,
+                                  ...responsiveStyles.languageItem,
+                                  ...(selectedLanguage === lang
+                                    ? selectedLanguageItemStyle
+                                    : languageSelectorStyle),
+                                  listStyle: "none",
+                                }}
+                                onClick={() => handleLanguageSelect(lang)}
+                                role="option"
+                                aria-selected={selectedLanguage === lang}
+                                tabIndex={0}
+                                aria-label={`Select ${toNativeLabel(lang)} language`}
+                              >
+                                {toNativeLabel(lang)}
+                              </li>
+                            ))}
+                          </ul>
+                        )}
+                      </div>
+                    );
+                    return isMobile ? (
+                      <>
+                        <div
                           style={{
-                            ...styles.topRight,
-                            ...responsiveStyles.topRight,
-                            ...languageSelectorStyle,
+                            display: "flex",
+                            alignItems: "center",
+                            gap: "10px",
+                            width: "100%",
                           }}
-                          onClick={toggleLanguageDropdown}
-                          aria-expanded={isLanguageDropdownOpen}
-                          aria-haspopup="listbox"
-                          aria-controls="language-listbox"
-                          aria-label={`Select language. Current language: ${toNativeLabel(selectedLanguage)}`}
                         >
-                          {toNativeLabel(selectedLanguage)}
-                          <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            width="16"
-                            height="16"
-                            viewBox="0 0 16 16"
-                            fill="none"
-                            stroke={
-                              settings?.button?.language?.textColor ||
-                              "currentColor"
-                            }
-                            strokeWidth="2"
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                            style={{ flexShrink: 0, marginLeft: "4px" }}
-                            aria-hidden="true"
-                          >
-                            <path d="M4 6l4 4 4-4" />
-                          </svg>
-                        </button>
-                      </div>
-                    </div>
-                    {isLanguageDropdownOpen && (
-                      <ul
-                        id="language-listbox"
-                        style={{
-                          ...styles.languageDropdown,
-                          ...languageSelectorStyle,
-                        }}
-                        role="listbox"
-                        aria-label="Select language"
-                      >
-                        {availableLanguages.map((lang: string) => (
-                          <li
-                            key={lang}
+                          {logoNode}
+                          <div
                             style={{
-                              ...styles.languageItem,
-                              ...responsiveStyles.languageItem,
-                              ...(selectedLanguage === lang
-                                ? selectedLanguageItemStyle
-                                : languageSelectorStyle),
-                              listStyle: "none",
+                              marginLeft: "auto",
+                              display: "flex",
+                              alignItems: "center",
+                              flexShrink: 0,
                             }}
-                            onClick={() => handleLanguageSelect(lang)}
-                            role="option"
-                            aria-selected={selectedLanguage === lang}
-                            tabIndex={0}
-                            aria-label={`Select ${toNativeLabel(lang)} language`}
                           >
-                            {toNativeLabel(lang)}
-                          </li>
-                        ))}
-                      </ul>
-                    )}
-                  </div>
+                            {controlsBlock}
+                          </div>
+                        </div>
+                        {titleNode}
+                      </>
+                    ) : (
+                      <>
+                        <div style={styles.topLeft}>
+                          {logoNode}
+                          {titleNode}
+                        </div>
+                        {controlsBlock}
+                      </>
+                    );
+                  })()}
                 </div>
                 <div
                   id="privacy-notice-description"

package/src/RedactoNoticeConsent/styles.ts

@@ -52,7 +52,8 @@ export const styles = {
   topSection: {
     display: "flex",
     justifyContent: "space-between",
-    alignItems: "center",
+    alignItems: "flex-start",
+    gap: "10px",
     paddingBottom: "15px",
     borderBottom: "none",
     backgroundColor: "#ffffff",
@@ -65,6 +66,8 @@ export const styles = {
     display: "flex",
     alignItems: "center",
     gap: "10px",
+    flex: "1 1 0",
+    minWidth: 0,
     margin: 0,
     padding: 0,
     boxSizing: "border-box",
@@ -73,7 +76,9 @@ export const styles = {
   logo: {
     height: "32px",
     width: "auto",
+    maxWidth: "140px",
     objectFit: "contain",
+    flexShrink: 0,
     margin: 0,
     padding: 0,
     display: "block",
@@ -86,6 +91,10 @@ export const styles = {
     letterSpacing: "0.2px",
     verticalAlign: "middle",
     color: "#101828",
+    flex: "1 1 auto",
+    minWidth: 0,
+    wordBreak: "normal",
+    overflowWrap: "anywhere",
     margin: 0,
     padding: 0,
     textAlign: "left",

package/src/RedactoPrivacyCenter/PrivacyCenterLayout.tsx

@@ -1,6 +1,5 @@
 import { useEffect, useState, useRef, type ReactNode } from 'react';
 import { OrganizationProvider } from './context/OrganizationContext';
-import { ThemeProvider } from './context/theme';
 import type { OrganizationDetail } from './lib/types';
 import {
   checkAndRefreshAuth,
@@ -14,12 +13,11 @@ 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) {
+export function PrivacyCenterLayout({ children, slug, onBack }: PrivacyCenterLayoutProps) {
   const { consentClient } = useBaseUrl();
   // Read accessToken from AuthContext so this effect re-runs after AuthProvider
   // syncs JWT data to sessionStorage (fixes race condition where child effects
@@ -162,12 +160,10 @@ export function PrivacyCenterLayout({ children, defaultTheme, slug, onBack }: Pr
   }
 
   return (
-    <ThemeProvider defaultTheme={defaultTheme}>
-      <OrganizationProvider organization={organization}>
-        <PrivacyCenterLayoutComponent onBack={onBack}>
-          {children}
-        </PrivacyCenterLayoutComponent>
-      </OrganizationProvider>
-    </ThemeProvider>
+    <OrganizationProvider organization={organization}>
+      <PrivacyCenterLayoutComponent onBack={onBack}>
+        {children}
+      </PrivacyCenterLayoutComponent>
+    </OrganizationProvider>
   );
 }

package/src/RedactoPrivacyCenter/RedactoPrivacyCenter.tsx

@@ -7,6 +7,7 @@ import { AuthProvider } from './context/AuthContext';
 import { NavigationProvider } from './context/NavigationContext';
 import type { InternalPage } from './context/NavigationContext';
 import { PageChromeProvider } from './context/PageChromeContext';
+import { BrandingProvider } from './context/BrandingContext';
 import { injectPCStyles } from './styles/injectStyles';
 
 // Inject Privacy Center CSS styles on module load
@@ -15,7 +16,6 @@ injectPCStyles();
 interface RedactoPrivacyCenterProps {
   baseUrl: string; // Consent server base URL
   slug: string;
-  theme?: 'light' | 'dark';
   accessToken: string;
   refreshToken: string;
   onError: (error: Error) => boolean;
@@ -26,7 +26,6 @@ interface RedactoPrivacyCenterProps {
 export function RedactoPrivacyCenter({
   baseUrl,
   slug,
-  theme = 'light',
   accessToken,
   refreshToken,
   onError,
@@ -35,21 +34,23 @@ export function RedactoPrivacyCenter({
 }: 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>
+      <BrandingProvider slug={slug}>
+        <BaseUrlProvider baseUrl={baseUrl}>
+          <AuthProvider
+            accessToken={accessToken}
+            refreshToken={refreshToken}
+            onError={onError}
+          >
+            <NavigationProvider initialPage={initialPage}>
+              <PageChromeProvider>
+                <PrivacyCenterLayout slug={slug} onBack={onBack}>
+                  <PrivacyCenterHomePage />
+                </PrivacyCenterLayout>
+              </PageChromeProvider>
+            </NavigationProvider>
+          </AuthProvider>
+        </BaseUrlProvider>
+      </BrandingProvider>
     </I18nextProvider>
   );
 }

package/src/RedactoPrivacyCenter/api/orgBranding.ts

@@ -0,0 +1,9 @@
+import { apiFetch } from './fetcher';
+import type { OrgBrandingDetail } from '../lib/types';
+
+const USER_SERVER_BASE_URL = 'https://api.redacto.tech/user/api/0';
+
+export async function fetchOrgBranding(slug: string): Promise<OrgBrandingDetail> {
+  const url = `${USER_SERVER_BASE_URL}/public/org-branding/by-slug/${encodeURIComponent(slug)}`;
+  return apiFetch<OrgBrandingDetail>(url, { method: 'GET' });
+}

package/src/RedactoPrivacyCenter/components/ConsentManager.tsx

@@ -447,12 +447,17 @@ export default function ConsentManager({ variant }: ConsentManagerProps) {
       );
       setConsentRows(filteredRows);
 
-      // Extract unique products from all groups
-      const combinedGroups = [
-        ...(response.direct || []),
-        ...(response.nominated || []),
-      ];
-      setProductOptions(buildProductOptionsFromGroups(combinedGroups));
+      // Only refresh the product filter options from an unfiltered fetch.
+      // When a product filter is active the API returns rows for that one
+      // product, so re-deriving options here would shrink the dropdown to
+      // just the selected product (forcing the user to refresh to recover).
+      if (!productFilter) {
+        const combinedGroups = [
+          ...(response.direct || []),
+          ...(response.nominated || []),
+        ];
+        setProductOptions(buildProductOptionsFromGroups(combinedGroups));
+      }
     } catch (error) {
       console.error(error);
       setConsentDetail(null);
@@ -1122,14 +1127,11 @@ export default function ConsentManager({ variant }: ConsentManagerProps) {
           </>
         )}
 
-        {/* Always show pagination, even during loading */}
-        <div className="pc-consent-pagination-wrap">
-          {viewMode === 'product' ? (
+        {viewMode === 'product' && (
+          <div className="pc-consent-pagination-wrap">
             <AdvancedTablePagination table={productTable} />
-          ) : (
-            <AdvancedTablePagination table={purposeTable} />
-          )}
-        </div>
+          </div>
+        )}
       </div>
 
       <PCModal
@@ -1153,7 +1155,7 @@ export default function ConsentManager({ variant }: ConsentManagerProps) {
         }
         footer={
           <div className="pc-modal-footer-actions">
-            <PCButton variant="outline" onClick={() => setExportModal(false)}>
+            <PCButton variant="secondary" onClick={() => setExportModal(false)}>
               {t('cancel')}
             </PCButton>
             <PCButton variant="primary" onClick={handleExport}>

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

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