Labels over titles (#197)

* labels over titles

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.22.1",
+  "version": "4.22.2",
   "license": "MIT",
   "main": "build/ui",
   "files": [
@@ -42,6 +42,7 @@
     "playground": "yarn build:playground && concurrently 'WATCH=true yarn build' 'yarn live-server --host=localhost --open=./src/playground/index.html --mount=/src/playground/:./src/'",
     "prepublish": "yarn build",
     "test": "yarn jest",
+    "test:update": "yarn jest -u",
     "test:watch": "yarn jest --watch"
   },
   "devDependencies": {

src/hooks/useGetPurposeMessageKeys.ts

@@ -20,6 +20,9 @@ export const useGetPurposeMessageKeys = ({
       // the purpose type is unique for the bundle
       [...Object.keys(consentSelection ?? {}), 'Essential'].reduce(
         (allMessages, purposeType) => {
+          if (allMessages[purposeType]) {
+            return allMessages;
+          }
           const purposeMessageLabel = `${PURPOSE_MESSAGE_PREFIX}.${purposeType}.title`;
           return {
             ...allMessages,

src/messages.ts

@@ -509,11 +509,11 @@ export const completeOptionsMessages = defineMessages(
   'ui.src.completeOptions',
   {
     essentialLabel: {
-      defaultMessage: 'Essential',
+      defaultMessage: 'Essential purposes',
       description: 'Text for essential purposes in CompleteOptions view state.',
     },
     functionalLabel: {
-      defaultMessage: 'Functional',
+      defaultMessage: 'Functionality',
       description:
         'Text for functional purposes in CompleteOptions view state.',
     },
@@ -527,7 +527,7 @@ export const completeOptionsMessages = defineMessages(
         'Text for advertising purposes in CompleteOptions view state.',
     },
     saleOfInfoLabel: {
-      defaultMessage: 'SaleOfInfo',
+      defaultMessage: 'Sale of personal information',
       description:
         'Text for sale of information purposes in CompleteOptions view state.',
     },

src/tests/__snapshots__/CompleteOptionsToggles.test.tsx.snap

@@ -47,7 +47,9 @@ exports[`CompleteOptionsToggles matches snapshot 1`] = `
               ><span class="switch switch-button"></span></span
             >Essential purposes</label
           >
-          <p class="paragraph complete-options-toggle-description"></p></span
+          <p class="paragraph complete-options-toggle-description">
+            No consent needed.
+          </p></span
         ><span
           ><label class="switch label"
             ><input