CompleteOptionsInverted description customizable (#152)

* CompleteOptionsInverted description customizable

* Adds new message

.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:

src/translations/af-ZA.json

@@ -39,6 +39,7 @@
   "ui.src.completeOptions.toggleEnable": "Kliek om die versameling van data vir hierdie doel te aktiveer",
   "ui.src.completeOptionsInverted.advertisingLabel": "Kies uit Advertising",
   "ui.src.completeOptionsInverted.analyticsLabel": "Kies uit Analytics",
+  "ui.src.completeOptionsInverted.description": "-",
   "ui.src.completeOptionsInverted.functionalLabel": "Kies uit Funksionele",
   "ui.src.completeOptionsInverted.saleOfInfoLabel": "Moenie verkoop/Deel My Persoonlike Inligting.",
   "ui.src.messages.acceptAdvertising": "Goed",

src/translations/ar-AE.json

@@ -39,6 +39,7 @@
   "ui.src.completeOptions.toggleEnable": "انقر لتمكين جمع البيانات لهذا الغرض",
   "ui.src.completeOptionsInverted.advertisingLabel": "إلغاء الاشتراك في الإعلانات",
   "ui.src.completeOptionsInverted.analyticsLabel": "إلغاء الاشتراك في التحليلات",
+  "ui.src.completeOptionsInverted.description": "-",
   "ui.src.completeOptionsInverted.functionalLabel": "إلغاء الاشتراك في الوظيفة",
   "ui.src.completeOptionsInverted.saleOfInfoLabel": "لا تبيع/تشارك معلوماتي الشخصية.",
   "ui.src.messages.acceptAdvertising": "حسنا",

src/translations/bg-BG.json

@@ -39,6 +39,7 @@
   "ui.src.completeOptions.toggleEnable": "Кликнете, за да разрешите събирането на данни за тази цел",
   "ui.src.completeOptionsInverted.advertisingLabel": "Излезте от рекламата",
   "ui.src.completeOptionsInverted.analyticsLabel": "Излезте от Анализ",
+  "ui.src.completeOptionsInverted.description": "-",
   "ui.src.completeOptionsInverted.functionalLabel": "Излезте от функционално",
   "ui.src.completeOptionsInverted.saleOfInfoLabel": "Не продавайте/споделяйте моята лична информация.",
   "ui.src.messages.acceptAdvertising": "Добре.",

src/translations/cs-CZ.json

@@ -39,6 +39,7 @@
   "ui.src.completeOptions.toggleEnable": "Kliknutím povolíte shromažďování údajů za tímto účelem",
   "ui.src.completeOptionsInverted.advertisingLabel": "Odhlásit se z reklamy",
   "ui.src.completeOptionsInverted.analyticsLabel": "Odhlásit se z Analytics",
+  "ui.src.completeOptionsInverted.description": "-",
   "ui.src.completeOptionsInverted.functionalLabel": "Odhlásit se z funkčního",
   "ui.src.completeOptionsInverted.saleOfInfoLabel": "Neprodávají/nesdílejte mé osobní údaje.",
   "ui.src.messages.acceptAdvertising": "Dobře",

src/translations/da-DK.json

@@ -39,6 +39,7 @@
   "ui.src.completeOptions.toggleEnable": "Klik for at aktivere indsamling af data til dette formål",
   "ui.src.completeOptionsInverted.advertisingLabel": "Fravælg annoncering",
   "ui.src.completeOptionsInverted.analyticsLabel": "Fravælg Analytics",
+  "ui.src.completeOptionsInverted.description": "-",
   "ui.src.completeOptionsInverted.functionalLabel": "Fravælg Functional",
   "ui.src.completeOptionsInverted.saleOfInfoLabel": "Sælg/Del ikke/del mine personlige oplysninger.",
   "ui.src.messages.acceptAdvertising": "Okay",

src/translations/de-DE.json

@@ -39,6 +39,7 @@
   "ui.src.completeOptions.toggleEnable": "Klicken Sie hier, um die Datenerfassung für diesen Zweck zu aktivieren",
   "ui.src.completeOptionsInverted.advertisingLabel": "Werbung abbestellen",
   "ui.src.completeOptionsInverted.analyticsLabel": "Analytik abbestellen",
+  "ui.src.completeOptionsInverted.description": "-",
   "ui.src.completeOptionsInverted.functionalLabel": "Funktional abbestellen",
   "ui.src.completeOptionsInverted.saleOfInfoLabel": "Verkaufen/teilen Sie meine persönlichen Daten nicht.",
   "ui.src.messages.acceptAdvertising": "Okay",

src/translations/description.json

@@ -39,6 +39,7 @@
   "ui.src.completeOptions.toggleEnable": "Hover/alt text for disabled opt in/opt out checkboxes when user is opted out in CompleteOptions view state.",
   "ui.src.completeOptionsInverted.advertisingLabel": "Text for advertising purposes in CompleteOptionsInverted view state.",
   "ui.src.completeOptionsInverted.analyticsLabel": "Text for analytics purposes in CompleteOptionsInverted view state.",
+  "ui.src.completeOptionsInverted.description": "Freeform description text for the CompleteOptionsInverted consent banner.",
   "ui.src.completeOptionsInverted.functionalLabel": "Text for functional purposes in CompleteOptionsInverted view state.",
   "ui.src.completeOptionsInverted.saleOfInfoLabel": "Text for sale of information purposes in CompleteOptionsInverted view state.",
   "ui.src.messages.acceptAdvertising": "The affirmative response for opting into advertising in the \"AcceptOrRejectAdvertising\" view state.",

src/translations/el-GR.json

@@ -39,6 +39,7 @@
   "ui.src.completeOptions.toggleEnable": "Κάντε κλικ για να ενεργοποιήσετε τη συλλογή δεδομένων για το σκοπό αυτό",
   "ui.src.completeOptionsInverted.advertisingLabel": "Εξαίρεση από διαφημίσεις",
   "ui.src.completeOptionsInverted.analyticsLabel": "Εξαίρεση από το Analytics",
+  "ui.src.completeOptionsInverted.description": "-",
   "ui.src.completeOptionsInverted.functionalLabel": "Εξαίρεση Λειτουργικής",
   "ui.src.completeOptionsInverted.saleOfInfoLabel": "Να μην πωλούν/κοινοποιώ τα προσωπικά μου στοιχεία.",
   "ui.src.messages.acceptAdvertising": "ΟΚ",

src/translations/en.json

@@ -39,6 +39,7 @@
   "ui.src.completeOptions.toggleEnable": "Click to enable collection of data for this purpose",
   "ui.src.completeOptionsInverted.advertisingLabel": "Opt out of Advertising",
   "ui.src.completeOptionsInverted.analyticsLabel": "Opt out of Analytics",
+  "ui.src.completeOptionsInverted.description": "-",
   "ui.src.completeOptionsInverted.functionalLabel": "Opt out of Functional",
   "ui.src.completeOptionsInverted.saleOfInfoLabel": "Do Not Sell/Share My Personal Information.",
   "ui.src.messages.acceptAdvertising": "Okay",

src/translations/es-419.json

@@ -39,6 +39,7 @@
   "ui.src.completeOptions.toggleEnable": "Haga clic para habilitar la recopilación de datos con este fin",
   "ui.src.completeOptionsInverted.advertisingLabel": "Optar por no participar en la publicidad",
   "ui.src.completeOptionsInverted.analyticsLabel": "Optar por no participar en Analytics",
+  "ui.src.completeOptionsInverted.description": "-",
   "ui.src.completeOptionsInverted.functionalLabel": "Optar por no participar en Funcional",
   "ui.src.completeOptionsInverted.saleOfInfoLabel": "No vender/compartir mi información personal.",
   "ui.src.messages.acceptAdvertising": "Bien",

src/translations/es-ES.json

@@ -39,6 +39,7 @@
   "ui.src.completeOptions.toggleEnable": "Haga clic para habilitar la recopilación de datos con este fin",
   "ui.src.completeOptionsInverted.advertisingLabel": "Inhabilitar la publicidad",
   "ui.src.completeOptionsInverted.analyticsLabel": "Excluirse de Analytics",
+  "ui.src.completeOptionsInverted.description": "-",
   "ui.src.completeOptionsInverted.functionalLabel": "Inhabilitar Functional",
   "ui.src.completeOptionsInverted.saleOfInfoLabel": "No vendas ni compartas mi información personal.",
   "ui.src.messages.acceptAdvertising": "Ok",

src/translations/fi-FI.json

@@ -39,6 +39,7 @@
   "ui.src.completeOptions.toggleEnable": "Napsauta, jos haluat ottaa käyttöön tietojen keräämisen tätä tarkoitusta varten",
   "ui.src.completeOptionsInverted.advertisingLabel": "Poistaminen mainonnasta",
   "ui.src.completeOptionsInverted.analyticsLabel": "Analyticsin kieltäytyminen",
+  "ui.src.completeOptionsInverted.description": "-",
   "ui.src.completeOptionsInverted.functionalLabel": "Ota pois toiminnallinen",
   "ui.src.completeOptionsInverted.saleOfInfoLabel": "Älä myy/jaa henkilökohtaisia tietojani.",
   "ui.src.messages.acceptAdvertising": "Okei",

src/translations/fr-FR.json

@@ -39,6 +39,7 @@
   "ui.src.completeOptions.toggleEnable": "Cliquez pour activer la collecte de données à cette fin",
   "ui.src.completeOptionsInverted.advertisingLabel": "Se désinscrire de la publicité",
   "ui.src.completeOptionsInverted.analyticsLabel": "Se désinscrire d'Analytics",
+  "ui.src.completeOptionsInverted.description": "-",
   "ui.src.completeOptionsInverted.functionalLabel": "Désactiver Functional",
   "ui.src.completeOptionsInverted.saleOfInfoLabel": "Ne vendez pas et ne partagez pas mes informations personnelles.",
   "ui.src.messages.acceptAdvertising": "OK",

src/translations/he-IL.json

@@ -39,6 +39,7 @@
   "ui.src.completeOptions.toggleEnable": "לחץ כדי לאפשר איסוף נתונים למטרה זו",
   "ui.src.completeOptionsInverted.advertisingLabel": "לבטל את ההצטרפות לפרסום",
   "ui.src.completeOptionsInverted.analyticsLabel": "ביטול ההצטרפות ל-Analytics",
+  "ui.src.completeOptionsInverted.description": "-",
   "ui.src.completeOptionsInverted.functionalLabel": "לבטל את הצטרפותו של פונקציונלי",
   "ui.src.completeOptionsInverted.saleOfInfoLabel": "אל תמכור או שתף את המידע האישי שלי.",
   "ui.src.messages.acceptAdvertising": "בסדר",

src/translations/hi-IN.json

@@ -39,6 +39,7 @@
   "ui.src.completeOptions.toggleEnable": "इस उद्देश्य के लिए डेटा के संग्रह को सक्षम करने के लिए क्लिक करें",
   "ui.src.completeOptionsInverted.advertisingLabel": "विज्ञापन से ऑप्ट आउट करें",
   "ui.src.completeOptionsInverted.analyticsLabel": "एनालिटिक्स से ऑप्ट आउट करें",
+  "ui.src.completeOptionsInverted.description": "-",
   "ui.src.completeOptionsInverted.functionalLabel": "फंक्शनल से ऑप्ट आउट करें",
   "ui.src.completeOptionsInverted.saleOfInfoLabel": "मेरी व्यक्तिगत जानकारी न बेचें/साझा न करें।",
   "ui.src.messages.acceptAdvertising": "ठीक है",

src/translations/hr-HR.json

@@ -39,6 +39,7 @@
   "ui.src.completeOptions.toggleEnable": "Kliknite da biste omogućili prikupljanje podataka u tu svrhu",
   "ui.src.completeOptionsInverted.advertisingLabel": "Isključivanje oglašavanja",
   "ui.src.completeOptionsInverted.analyticsLabel": "Isključivanje usluge Analytics",
+  "ui.src.completeOptionsInverted.description": "-",
   "ui.src.completeOptionsInverted.functionalLabel": "Isključite Funkcionalno",
   "ui.src.completeOptionsInverted.saleOfInfoLabel": "Ne prodati/dijeliti moje osobne podatke.",
   "ui.src.messages.acceptAdvertising": "u redu",

src/translations/hu-HU.json

@@ -39,6 +39,7 @@
   "ui.src.completeOptions.toggleEnable": "Kattintson ide, hogy engedélyezze az adatok gyűjtését erre a célra",
   "ui.src.completeOptionsInverted.advertisingLabel": "Leiratkozás a hirdetésekről",
   "ui.src.completeOptionsInverted.analyticsLabel": "Leiratkozás az Analytics szolgáltatásról",
+  "ui.src.completeOptionsInverted.description": "-",
   "ui.src.completeOptionsInverted.functionalLabel": "Leiratkozás a Funkcionális lehetőségről",
   "ui.src.completeOptionsInverted.saleOfInfoLabel": "Ne adja el/ossza meg személyes adataimat.",
   "ui.src.messages.acceptAdvertising": "oké",

src/translations/id-ID.json

@@ -39,6 +39,7 @@
   "ui.src.completeOptions.toggleEnable": "Klik untuk mengaktifkan pengumpulan data untuk tujuan ini",
   "ui.src.completeOptionsInverted.advertisingLabel": "Menyisih dari Iklan",
   "ui.src.completeOptionsInverted.analyticsLabel": "Menyisih dari Analytics",
+  "ui.src.completeOptionsInverted.description": "-",
   "ui.src.completeOptionsInverted.functionalLabel": "Menyisih dari Fungsional",
   "ui.src.completeOptionsInverted.saleOfInfoLabel": "Jangan Menjual/Membagikan Informasi Pribadi Saya.",
   "ui.src.messages.acceptAdvertising": "baik",

src/translations/it-IT.json

@@ -39,6 +39,7 @@
   "ui.src.completeOptions.toggleEnable": "Fare clic per abilitare la raccolta di dati per questo scopo",
   "ui.src.completeOptionsInverted.advertisingLabel": "Disattiva la pubblicità",
   "ui.src.completeOptionsInverted.analyticsLabel": "Disattiva Analytics",
+  "ui.src.completeOptionsInverted.description": "-",
   "ui.src.completeOptionsInverted.functionalLabel": "Disattiva Functional",
   "ui.src.completeOptionsInverted.saleOfInfoLabel": "Non vendere/condividere le mie informazioni personali.",
   "ui.src.messages.acceptAdvertising": "Va bene",

src/translations/ja-JP.json

@@ -39,6 +39,7 @@
   "ui.src.completeOptions.toggleEnable": "クリックすると、この目的のためにデータの収集が有効になります",
   "ui.src.completeOptionsInverted.advertisingLabel": "広告のオプトアウト",
   "ui.src.completeOptionsInverted.analyticsLabel": "アナリティクスをオプトアウト",
+  "ui.src.completeOptionsInverted.description": "-",
   "ui.src.completeOptionsInverted.functionalLabel": "機能からオプトアウト",
   "ui.src.completeOptionsInverted.saleOfInfoLabel": "私の個人情報を販売/共有しないでください。",
   "ui.src.messages.acceptAdvertising": "はい",

src/translations/ko-KR.json

@@ -39,6 +39,7 @@
   "ui.src.completeOptions.toggleEnable": "이 목적을 위한 데이터 수집을 활성화하려면 클릭하십시오.",
   "ui.src.completeOptionsInverted.advertisingLabel": "광고 수신 거부",
   "ui.src.completeOptionsInverted.analyticsLabel": "애널리틱스 수신 거부",
+  "ui.src.completeOptionsInverted.description": "-",
   "ui.src.completeOptionsInverted.functionalLabel": "옵트아웃 기능",
   "ui.src.completeOptionsInverted.saleOfInfoLabel": "내 개인 정보를 판매/공유하지 마십시오.",
   "ui.src.messages.acceptAdvertising": "괜찮아",

src/translations/lt-LT.json

@@ -39,6 +39,7 @@
   "ui.src.completeOptions.toggleEnable": "Spustelėkite, kad šiuo tikslu būtų galima rinkti duomenis",
   "ui.src.completeOptionsInverted.advertisingLabel": "Pasitraukti iš reklamos",
   "ui.src.completeOptionsInverted.analyticsLabel": "Pasitraukti iš “Analytics”",
+  "ui.src.completeOptionsInverted.description": "-",
   "ui.src.completeOptionsInverted.functionalLabel": "Pasitraukti iš funkcinio",
   "ui.src.completeOptionsInverted.saleOfInfoLabel": "Negalima parduoti/dalytis mano asmenine informacija.",
   "ui.src.messages.acceptAdvertising": "Gerai",

src/translations/mr-IN.json

@@ -39,6 +39,7 @@
   "ui.src.completeOptions.toggleEnable": "Click to enable collection of data for this purpose",
   "ui.src.completeOptionsInverted.advertisingLabel": "Opt out of Advertising",
   "ui.src.completeOptionsInverted.analyticsLabel": "Opt out of Analytics",
+  "ui.src.completeOptionsInverted.description": "-",
   "ui.src.completeOptionsInverted.functionalLabel": "Opt out of Functional",
   "ui.src.completeOptionsInverted.saleOfInfoLabel": "Do Not Sell/Share My Personal Information.",
   "ui.src.messages.acceptAdvertising": "Okay",

src/translations/ms-MY.json

@@ -39,6 +39,7 @@
   "ui.src.completeOptions.toggleEnable": "Klik untuk membolehkan pengumpulan data untuk tujuan ini",
   "ui.src.completeOptionsInverted.advertisingLabel": "Menarik diri daripada Pengiklanan",
   "ui.src.completeOptionsInverted.analyticsLabel": "Memilih keluar daripada Analytics",
+  "ui.src.completeOptionsInverted.description": "-",
   "ui.src.completeOptionsInverted.functionalLabel": "Memilih keluar daripada Fungsian",
   "ui.src.completeOptionsInverted.saleOfInfoLabel": "Jangan Jual/Kongsi Maklumat Peribadi Saya.",
   "ui.src.messages.acceptAdvertising": "Baiklah",

src/translations/nb-NO.json

@@ -39,6 +39,7 @@
   "ui.src.completeOptions.toggleEnable": "Klikk for å aktivere innsamling av data for dette formålet",
   "ui.src.completeOptionsInverted.advertisingLabel": "Velg bort reklame",
   "ui.src.completeOptionsInverted.analyticsLabel": "Velg bort Analytics",
+  "ui.src.completeOptionsInverted.description": "-",
   "ui.src.completeOptionsInverted.functionalLabel": "Velg bort Functional",
   "ui.src.completeOptionsInverted.saleOfInfoLabel": "Ikke selg/del min personlige informasjon.",
   "ui.src.messages.acceptAdvertising": "Greit",

src/translations/nl-NL.json

@@ -39,6 +39,7 @@
   "ui.src.completeOptions.toggleEnable": "Klik om het verzamelen van gegevens voor dit doel in te schakelen",
   "ui.src.completeOptionsInverted.advertisingLabel": "Afmelden voor advertenties",
   "ui.src.completeOptionsInverted.analyticsLabel": "Analytics uitschakelen",
+  "ui.src.completeOptionsInverted.description": "-",
   "ui.src.completeOptionsInverted.functionalLabel": "Afmelden voor Functional",
   "ui.src.completeOptionsInverted.saleOfInfoLabel": "Verkoop/deel mijn persoonlijke gegevens niet.",
   "ui.src.messages.acceptAdvertising": "oké",

src/translations/pl-PL.json

@@ -39,6 +39,7 @@
   "ui.src.completeOptions.toggleEnable": "Kliknij, aby włączyć zbieranie danych w tym celu",
   "ui.src.completeOptionsInverted.advertisingLabel": "Zrezygnuj z reklam",
   "ui.src.completeOptionsInverted.analyticsLabel": "Zrezygnuj z Analytics",
+  "ui.src.completeOptionsInverted.description": "-",
   "ui.src.completeOptionsInverted.functionalLabel": "Zrezygnuj z funkcji",
   "ui.src.completeOptionsInverted.saleOfInfoLabel": "Nie sprzedawaj/nie udostępniaj moich danych osobowych.",
   "ui.src.messages.acceptAdvertising": "Dobrze",

src/translations/pt-BR.json

@@ -39,6 +39,7 @@
   "ui.src.completeOptions.toggleEnable": "Clique para ativar a coleta de dados para essa finalidade",
   "ui.src.completeOptionsInverted.advertisingLabel": "Optar por não receber publicidade",
   "ui.src.completeOptionsInverted.analyticsLabel": "Desativar o Analytics",
+  "ui.src.completeOptionsInverted.description": "-",
   "ui.src.completeOptionsInverted.functionalLabel": "Desativar o recurso Funcional",
   "ui.src.completeOptionsInverted.saleOfInfoLabel": "Não venda/compartilhe minhas informações pessoais.",
   "ui.src.messages.acceptAdvertising": "OK",

src/translations/ro-RO.json

@@ -39,6 +39,7 @@
   "ui.src.completeOptions.toggleEnable": "Faceți clic pentru a permite colectarea datelor în acest scop",
   "ui.src.completeOptionsInverted.advertisingLabel": "Renunțați la publicitate",
   "ui.src.completeOptionsInverted.analyticsLabel": "Renunțați la Analytics",
+  "ui.src.completeOptionsInverted.description": "-",
   "ui.src.completeOptionsInverted.functionalLabel": "Renunțați la Funcțional",
   "ui.src.completeOptionsInverted.saleOfInfoLabel": "Nu vindeți/distribuiți informațiile mele personale.",
   "ui.src.messages.acceptAdvertising": "Bine.",