naming and use airgap purpose title and description over default

src/components/constants.ts

@@ -6,29 +6,29 @@ import {
 
 // Mapping of purposes to the message translation key
 export const DEFAULT_PURPOSE_TO_MESSAGE_KEY: Record<string, DefinedMessage> = {
- Essential: completeOptionsMessages.essentialLabel,
- Functional: completeOptionsMessages.functionalLabel,
- Analytics: completeOptionsMessages.analyticsLabel,
- Advertising: completeOptionsMessages.advertisingLabel,
- SaleOfInfo: completeOptionsMessages.saleOfInfoLabel,
+ Essential: completeOptionsMessages['essential.title'],
+ Functional: completeOptionsMessages['functional.title'],
+ Analytics: completeOptionsMessages['analytics.title'],
+ Advertising: completeOptionsMessages['advertising.title'],
+ SaleOfInfo: completeOptionsMessages['saleOfInfo.title'],
 };
 
 export const DEFAULT_PURPOSE_TO_DESCRIPTION_KEY: Record<
  string,
  DefinedMessage
 > = {
- Essential: completeOptionsMessages.essentialDescription,
- Functional: completeOptionsMessages.functionalDescription,
- Analytics: completeOptionsMessages.analyticsDescription,
- Advertising: completeOptionsMessages.advertisingDescription,
- SaleOfInfo: completeOptionsMessages.saleOfInfoDescription,
+ Essential: completeOptionsMessages['essential.description'],
+ Functional: completeOptionsMessages['functional.description'],
+ Analytics: completeOptionsMessages['analytics.description'],
+ Advertising: completeOptionsMessages['advertising.description'],
+ SaleOfInfo: completeOptionsMessages['saleOfInfo.description'],
 }
 
 export const DEFAULT_PURPOSE_TO_INVERTED_MESSAGE_KEY: Record<
  string,
  DefinedMessage
 > = {
- Essential: completeOptionsMessages.essentialLabel,
+ Essential: completeOptionsMessages['essential.title'],
  Functional: completeOptionsInvertedMessages.functionalLabel,
  Analytics: completeOptionsInvertedMessages.analyticsLabel,
  Advertising: completeOptionsInvertedMessages.advertisingLabel,

src/hooks/useGetPurposeDescriptionKeys.ts

@@ -1,3 +1,5 @@
+import camelCase from 'lodash/camelCase';
+
 import type {
  TrackingPurposeDetails,
  TrackingPurposesTypes,
@@ -10,8 +12,7 @@ import { useMemo } from 'preact/hooks';
 
 import { DefinedMessage } from '@transcend-io/internationalization';
 
-const CUSTOM_PURPOSE_DESCRIPTION_PREFIX = 'cm-ui.purposeDescription';
-const DEFAULT_PURPOSE_DESCRIPTION_PREFIX = 'ui.src.CompleteOptions';
+const PURPOSE_MESSAGE_PREFIX = 'purpose.trackingType';
 
 export const useGetPurposeDescriptionKeys = ({
  consentSelection,
@@ -29,20 +30,7 @@ export const useGetPurposeDescriptionKeys = ({
  () =>
  // the purpose type is unique for the bundle
  Object.keys(consentSelection ?? {}).reduce((allMessages, purposeType) => {
- if (allMessages[purposeType]) {
- return allMessages;
- }
- const purposeMessageDescriptionId = Object.values(
- defaultTrackingPurposes,
- ).find(
- (defaultPurpose) =>
- (defaultPurpose as TrackingPurposeDetails).trackingType ===
- purposeType,
- )
- ? `${DEFAULT_PURPOSE_DESCRIPTION_PREFIX}.${purposeType
- .charAt(0)
- .toLowerCase()}${purposeType.slice(1)}Description`
- : `${CUSTOM_PURPOSE_DESCRIPTION_PREFIX}.${purposeType}`;
+ const purposeMessageDescriptionId = `${PURPOSE_MESSAGE_PREFIX}.${camelCase(purposeType)}.description`;
  return {
  ...allMessages,
  [purposeType]: {

src/hooks/useGetPurposeMessageKeys.ts

@@ -1,10 +1,11 @@
+import camelCase from 'lodash/camelCase';
 import { ConsentSelection } from '../types';
 
 import { useMemo } from 'preact/hooks';
 
 import { DefinedMessage } from '@transcend-io/internationalization';
 
-const CUSTOM_PURPOSE_MESSAGE_PREFIX = 'cm-ui.purpose';
+const PURPOSE_MESSAGE_PREFIX = 'purpose.trackingType';
 
 export const useGetPurposeMessageKeys = ({
  consentSelection,
@@ -19,16 +20,13 @@ export const useGetPurposeMessageKeys = ({
  () =>
  // the purpose type is unique for the bundle
  Object.keys(consentSelection ?? {}).reduce((allMessages, purposeType) => {
- if (allMessages[purposeType]) {
- return allMessages;
- }
- const customPurposeMessageLabel = `${CUSTOM_PURPOSE_MESSAGE_PREFIX}.${purposeType}`;
+ const purposeMessageLabel = `${PURPOSE_MESSAGE_PREFIX}.${camelCase(purposeType)}.title`;
  return {
  ...allMessages,
  [purposeType]: {
- id: customPurposeMessageLabel,
+ id: purposeMessageLabel,
  defaultMessage: purposeType,
- description: `Translatable name for custom purpose '${purposeType}'`,
+ description: `Translatable name for purpose '${purposeType}'`,
  } as DefinedMessage,
  };
  }, defaultPurposeToMessageKey as Record<string, DefinedMessage>),

src/messages.ts

@@ -456,57 +456,60 @@ export const bottomMenuMessages = defineMessages('ui.src.bottomMenu', {
  },
 });
 
+export const purposeMessages = defineMessages('purpose.trackingType', {
+ 'essential.title': {
+ defaultMessage: 'Essential purposes',
+ description: 'Text for essential purposes in CompleteOptions view state.',
+ },
+ 'essential.description': {
+ defaultMessage: 'No consent needed.',
+ description:
+ 'Text for essential purposes description in CompleteOptions view state.',
+ },
+ 'functional.title': {
+ defaultMessage: 'Functionality',
+ description:
+ 'Text for functional purposes in CompleteOptions view state.',
+ },
+ 'functional.description': {
+ defaultMessage: 'Personalization, autofilled forms, etc.',
+ description:
+ 'Text for functional purposes description in CompleteOptions view state.',
+ },
+ 'analytics.title': {
+ defaultMessage: 'Analytics',
+ description: 'Text for analytics purposes in CompleteOptions view state.',
+ },
+ 'analytics.description': {
+ defaultMessage: 'Help us learn how our site is used and how it performs.',
+ description:
+ 'Text for analytics purposes description in CompleteOptions view state.',
+ },
+ 'advertising.title': {
+ defaultMessage: 'Advertising',
+ description:
+ 'Text for advertising purposes in CompleteOptions view state.',
+ },
+ 'advertising.description': {
+ defaultMessage: 'Helps us and others serve ads relevant to you.',
+ description:
+ 'Text for advertising purposes description in CompleteOptions view state.',
+ },
+ 'saleOfInfo.title': {
+ defaultMessage: 'Sale of personal information',
+ description:
+ 'Text for sale of information purposes in CompleteOptions view state.',
+ },
+ 'saleOfInfo.description': {
+ defaultMessage: 'Sale of personal information.',
+ description:
+ 'Text for advertising purposes description in CompleteOptions view state.',
+ },
+});
+
 export const completeOptionsMessages = defineMessages(
  'ui.src.completeOptions',
  {
- essentialLabel: {
- defaultMessage: 'Essential purposes',
- description: 'Text for essential purposes in CompleteOptions view state.',
- },
- essentialDescription: {
- defaultMessage: 'No consent needed.',
- description:
- 'Text for essential purposes description in CompleteOptions view state.',
- },
- functionalLabel: {
- defaultMessage: 'Functionality',
- description:
- 'Text for functional purposes in CompleteOptions view state.',
- },
- functionalDescription: {
- defaultMessage: 'Personalization, autofilled forms, etc.',
- description:
- 'Text for functional purposes description in CompleteOptions view state.',
- },
- analyticsLabel: {
- defaultMessage: 'Analytics',
- description: 'Text for analytics purposes in CompleteOptions view state.',
- },
- analyticsDescription: {
- defaultMessage: 'Help us learn how our site is used and how it performs.',
- description:
- 'Text for analytics purposes description in CompleteOptions view state.',
- },
- advertisingLabel: {
- defaultMessage: 'Advertising',
- description:
- 'Text for advertising purposes in CompleteOptions view state.',
- },
- advertisingDescription: {
- defaultMessage: 'Helps us and others serve ads relevant to you.',
- description:
- 'Text for advertising purposes description in CompleteOptions view state.',
- },
- saleOfInfoLabel: {
- defaultMessage: 'Sale of personal information',
- description:
- 'Text for sale of information purposes in CompleteOptions view state.',
- },
- saleOfInfoDescription: {
- defaultMessage: 'Sale of personal information.',
- description:
- 'Text for advertising purposes description in CompleteOptions view state.',
- },
  saveButtonPrimary: {
  defaultMessage: 'Confirm',
  description: 'Confirm button text in CompleteOptions view state.',