CompleteOptionsInverted description customizable

.vscode/settings.json

@@ -34,7 +34,7 @@
     "**/.pnp.*": true
   },
   "editor.codeActionsOnSave": {
-    "source.fixAll": true
+    "source.fixAll": "explicit"
   },
   "cSpell.words": [
     "airgap",

package.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/transcend-io/consent-manager-ui.git"
   },
   "homepage": "https://github.com/transcend-io/consent-manager-ui",
-  "version": "4.10.0",
+  "version": "4.11.0",
   "license": "MIT",
   "main": "build/ui",
   "files": [

src/components/CompleteOptionsInverted.tsx

@@ -2,7 +2,11 @@ import { h, JSX } from 'preact';
 import { useState } from 'preact/hooks';
 import { useIntl } from 'react-intl';
 import { useAirgap, useGetPurposeMessageKeys } from '../hooks';
-import { messages, completeOptionsMessages } from '../messages';
+import {
+  messages,
+  completeOptionsMessages,
+  completeOptionsInvertedMessages,
+} from '../messages';
 import type { ConsentSelection, HandleSetViewState } from '../types';
 import { getConsentSelections } from '../consent-selections';
 import { Button } from './Button';
@@ -69,13 +73,28 @@ export function CompleteOptionsInverted({
         ORDER_OF_PURPOSES.indexOf(a) - ORDER_OF_PURPOSES.indexOf(b),
   );
 
+  // Render description
+  const description = formatMessage(
+    completeOptionsInvertedMessages.description,
+  );
+
   return (
     <div className="complete-options-container">
       <p id="consent-dialog-title" className="text-title text-title-center">
         {formatMessage(messages.completeOptionsInvertedTitle)}
       </p>
       <form className="complete-options-form">
         <GPCIndicator />
+        {description && description !== '-' ? (
+          <p className="paragraph">
+            <div
+              // eslint-disable-next-line react/no-danger
+              dangerouslySetInnerHTML={{
+                __html: description,
+              }}
+            />
+          </p>
+        ) : undefined}
         <div className="toggles-container">
           {orderedSelections.map(([purpose, isChecked]) => (
             <Toggle

src/messages.ts

@@ -478,6 +478,11 @@ export const completeOptionsMessages = defineMessages(
 export const completeOptionsInvertedMessages = defineMessages(
   'ui.src.completeOptionsInverted',
   {
+    description: {
+      defaultMessage: '-',
+      description:
+        'Freeform description text for the CompleteOptionsInverted consent banner.',
+    },
     functionalLabel: {
       defaultMessage: 'Opt out of Functional',
       description: