@soyio/soyio-widget 2.23.0 → 2.25.0

package/README.md

@@ -191,6 +191,43 @@ The `PrivacyCenterBox` lets you embed the Privacy Center inside your page. You c
       { id: "op_rectification", label: "Rectification" },
     ],
 
+    // Header and copy customization (optional)
+    content: {
+      header: {
+        title: "Privacy preferences",
+        description: "Manage your requests and consent settings.",
+      },
+      consentManagement: {
+        header: {
+          title: "Manage your consent settings",
+          description: "Select which permissions should remain active.",
+        },
+      },
+      rightExamples: {
+        access: 'Example: "I want to know what data you store about me."',
+      },
+    },
+
+    // Consent management grouping customization (optional)
+    consentManagement: {
+      scopeGroups: [
+        {
+          title: "Financial products",
+          scopes: [
+            { scopeType: "product", scopeId: "prod_checking_account" },
+            { scopeType: "product", scopeId: "prod_credit_card" },
+          ],
+        },
+        {
+          title: "Main branches",
+          scopes: [
+            { scopeType: "branch", scopeId: "branch_centro" },
+            { scopeType: "branch", scopeId: "branch_providencia" },
+          ],
+        },
+      ],
+    },
+
     // Common options
     consentControl: "checkbox", // Optional: 'switch' (default) | 'checkbox'
     consentMode: "batch", // Optional: 'immediate' (default) | 'batch'
@@ -201,7 +238,12 @@ The `PrivacyCenterBox` lets you embed the Privacy Center inside your page. You c
     onEvent: (event) => console.log(event),
     onReady: () => console.log("PrivacyCenterBox is ready"), // Optional
     isSandbox: true, // Optional
-    appearance: {}, // Optional
+    appearance: {
+      config: {
+        showHeader: true,
+        showConsentManagementHeader: true,
+      },
+    }, // Optional
   };
 
   // Wait for DOM to be fully loaded
@@ -224,12 +266,20 @@ The `PrivacyCenterBox` lets you embed the Privacy Center inside your page. You c
   - `allowedExtensions`: Array of allowed file extensions (e.g. `['pdf', 'jpg']`). Default: `['pdf', 'png', 'jpeg', 'jpg']`.
   - `maxFileSize`: Maximum file size in bytes. Default: `5 * 1024 * 1024` (5MB).
 - `redecOperationIds`: Optional array of `{ id, label }` values for the Redec operation select. Required if `redec` right is included in `enabledRights` param.
+- `appearance.config.showHeader`: Optional boolean to show/hide the privacy center header (title and description).
+- `content.header`: Optional object with `title` and `description` overrides for the privacy center header copy.
+- `appearance.config.showConsentManagementHeader`: Optional boolean to show/hide the title and description in the consent management page.
+- `content.consentManagement.header`: Optional object with `title` and `description` overrides for the consent management header copy.
+- `content.rightExamples`: Optional object to override DSR right examples. Supported keys: `access`, `opposition`, `rectification`, `suppression`, `portability`, `redec_update`, `redec_rectification`, `redec_complementation`, `redec_cancellation`.
+- `header`: Optional legacy alias for `content.header`.
+- `rightExamples`: Optional legacy alias for `content.rightExamples`.
 - `isSandbox`: Whether to use the sandbox environment. Defaults to `false`.
 - `consentControl`: Optional, controls the visual interaction for consent toggles. Values: `'switch'` (default) or `'checkbox'`.
 - `consentMode`: Optional, controls how consent changes are committed. Values: `'immediate'` (default) or `'batch'` (save multiple changes at once).
 - `consentRetentionPeriod`: Optional, specifies a duration during which a consent cannot be revoked after being granted. Format: `"<value> <unit>"`. Supported units: `day`, `week`, `month`, `year` (and their plural forms). Example: `'30 days'`, `'1 week'`.
 - `allowGranularScopeSelection`: Optional boolean, enables selecting/deselecting individual consent scopes in consent management when templates define multiple scopes. When enabled and a consent has more than one scope, the main consent checkbox supports partial state.
-- `groupConsentsByScope`: Optional boolean, groups consent templates by scope in consent management.
+- `groupConsentsByScope`: Optional boolean, groups consent templates by scope in consent management. This must be enabled for `consentManagement.scopeGroups` to apply.
+- `consentManagement.scopeGroups`: Optional array to customize accordion groups in consent management. Each group requires a `title` and a `scopes` array with `{ scopeType: 'product' | 'branch', scopeId: string }` entries. Scopes not included in custom groups keep the default scope grouping.
 - `showBatchConsentConfirmation`: Optional boolean, whether to show a confirmation dialog before saving consent changes in batch mode.
 - `appearance`: Customize the iframe appearance. See Appearance section below.
 - `onEvent`: Callback that receives events from the iframe.
@@ -237,6 +287,8 @@ The `PrivacyCenterBox` lets you embed the Privacy Center inside your page. You c
 
 Note:
 - When `sessionToken` is provided, do not pass `companyId`.
+- `consentManagement.scopeGroups` is applied during initial iframe URL render and also synchronized through `SET_PRIVACY_CENTER_CONFIG` updates.
+- `content.header`, `content.consentManagement.header`, and `appearance.config.showConsentManagementHeader` are applied through `SET_PRIVACY_CENTER_CONFIG`; the header may briefly appear before the update is received.
 
 ### Privacy Center Events
 

package/dist/index.d.ts

@@ -186,6 +186,8 @@ declare type CSSProperties = {
 
 declare type DataSubject = 'anonymous_user' | 'citizen_voter' | 'commuter' | 'consultant' | 'customer' | 'employee' | 'job_applicant' | 'next_of_kin' | 'passenger' | 'patient' | 'prospect' | 'shareholder' | 'supplier_vendor' | 'trainee' | 'visitor';
 
+declare type DataSubjectRequestKind = 'access' | 'opposition' | 'rectification' | 'suppression' | 'portability' | 'redec_update' | 'redec_rectification' | 'redec_complementation' | 'redec_cancellation';
+
 export declare class DisclosureRequestBox extends BaseIframeBox<DisclosureRequestBoxEvent, DisclosureRequestBoxConfig> {
     readonly defaultIframePrefix = "disclosure-request-box";
     private passkeyPopupWindow;
@@ -336,7 +338,11 @@ declare type PrivacyCenterConfig = BaseConfig & {
     allowGranularScopeSelection?: boolean;
     groupConsentsByScope?: boolean;
     showBatchConsentConfirmation?: boolean;
+    consentManagement?: PrivacyCenterConsentManagementConfig;
     redecOperationIds?: RedecOperationId[];
+    content?: PrivacyCenterContentConfig;
+    header?: PrivacyCenterHeaderCopyConfig;
+    rightExamples?: PrivacyCenterContentConfig['rightExamples'];
 } & ({
     companyId: `com_${string}`;
     sessionToken?: never;
@@ -345,8 +351,40 @@ declare type PrivacyCenterConfig = BaseConfig & {
     companyId?: never;
 });
 
+declare type PrivacyCenterConsentManagementConfig = {
+    scopeGroups?: [
+    PrivacyCenterConsentManagementScopeGroupConfig,
+    ...PrivacyCenterConsentManagementScopeGroupConfig[]
+    ];
+};
+
+declare type PrivacyCenterConsentManagementCopyConfig = {
+    header?: PrivacyCenterHeaderCopyConfig;
+};
+
+declare type PrivacyCenterConsentManagementScopeGroupConfig = {
+    title: string;
+    scopes: [PrivacyCenterScopeReference, ...PrivacyCenterScopeReference[]];
+};
+
+declare type PrivacyCenterContentConfig = {
+    header?: PrivacyCenterHeaderCopyConfig;
+    consentManagement?: PrivacyCenterConsentManagementCopyConfig;
+    rightExamples?: Partial<Record<DataSubjectRequestKind, string>>;
+};
+
+declare type PrivacyCenterHeaderCopyConfig = {
+    title?: string;
+    description?: string;
+};
+
 declare type PrivacyCenterRight = 'arsop' | 'redec';
 
+declare type PrivacyCenterScopeReference = {
+    scopeType: 'product' | 'branch';
+    scopeId: string;
+};
+
 declare type PrivacyManagerFeature = 'DataSubjectRequest' | 'ConsentManagement' | 'RequestTracking';
 
 declare type RedecOperationId = {
@@ -389,6 +427,8 @@ declare interface SoyioAppearanceConfig {
      * @default 'switch'
      */
     consentControl?: 'switch' | 'checkbox';
+    showHeader?: boolean;
+    showConsentManagementHeader?: boolean;
     /**
      * Icon name to use for hint/help tooltips on input labels.
      * Available icons: 'Question' (default), 'Info', 'QuestionMark', etc.