Ability to enable/disable specific languages

index.html

@@ -45,9 +45,10 @@
  data-messages="http://localhost:8080/build/translations"
  data-css="http://localhost:8080/src/cm.css"
  data-secondary-policy="http://transcend.io/test"
+ data-allowed-languages="en,es-ES,fr-FR"
  src="https://cdn.transcend.io/cm/443312ef-12f9-494d-85f5-969894260cc7/airgap.js"
- data-regime="GDPR"
  onload="window.airgapScriptLoadEvent=event;"
+ data-regime="GDPR"
  ></script>
  </head>
 

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.4.0",
+ "version": "4.5.0",
  "license": "MIT",
  "main": "build/ui",
  "files": [
@@ -44,7 +44,7 @@
  },
  "devDependencies": {
  "@monaco-editor/react": "^4.4.5",
- "@transcend-io/airgap.js-types": "^10.3.0",
+ "@transcend-io/airgap.js-types": "^10.4.1",
  "@transcend-io/type-utils": "^1.0.7",
  "@types/node": "^17.0.21",
  "@typescript-eslint/eslint-plugin": "^5.12.1",

src/components/App.tsx

@@ -12,7 +12,6 @@ import { getPrimaryRegime } from '../regimes';
 
 import { ConsentManagerLanguageKey } from '@transcend-io/internationalization';
 
-import { CONSENT_MANAGER_SUPPORTED_LANGUAGES } from '../i18n';
 import { makeConsentManagerAPI } from '../api';
 import { TranscendEventTarget } from '../event-target';
 import { useState } from 'preact/hooks';
@@ -39,7 +38,7 @@ export function App({
 }): JSX.Element {
  // Consent manager configuration
  const defaultConfig = getMergedConfig();
- const [config, setConfig] = useState(defaultConfig);
+ const [{ config, allowedLanguages }, setConfig] = useState(defaultConfig);
 
  // Get the active privacy regime
  const privacyRegime = getPrimaryRegime(airgap.getRegimes());
@@ -61,7 +60,7 @@ export function App({
 
  // Language setup
  const { language, handleChangeLanguage, messages } = useLanguage({
- supportedLanguages: CONSENT_MANAGER_SUPPORTED_LANGUAGES,
+ supportedLanguages: allowedLanguages,
  translationsLocation:
  // Order of priority:
  // 1. Take airgap.js data-messages
@@ -78,13 +77,19 @@ export function App({
  handleSetViewState,
  handleChangePrivacyPolicy: (privacyPolicyUrl) =>
  setConfig({
- ...config,
- privacyPolicy: privacyPolicyUrl,
+ allowedLanguages,
+ config: {
+ ...config,
+ privacyPolicy: privacyPolicyUrl,
+ },
  }),
  handleChangeSecondaryPolicy: (privacyPolicyUrl) =>
  setConfig({
- ...config,
- secondaryPolicy: privacyPolicyUrl,
+ allowedLanguages,
+ config: {
+ ...config,
+ secondaryPolicy: privacyPolicyUrl,
+ },
  }),
  airgap,
  });
@@ -107,7 +112,7 @@ export function App({
  modalOpenAuth={auth}
  viewState={viewState}
  config={config}
- supportedLanguages={CONSENT_MANAGER_SUPPORTED_LANGUAGES}
+ supportedLanguages={allowedLanguages}
  firstSelectedViewState={firstSelectedViewState}
  handleSetViewState={handleSetViewState}
  handleChangeLanguage={handleChangeLanguage}

src/components/LanguageButton.tsx

@@ -3,6 +3,7 @@ import type { AirgapAuth, ViewState } from '@transcend-io/airgap.js-types';
 import { useIntl } from 'react-intl';
 import type { HandleSetViewState } from '../types';
 import { messages } from '../messages';
+import { ConsentManagerLanguageKey } from '@transcend-io/internationalization';
 
 /**
  * The button to change languages
@@ -11,13 +12,19 @@ export function LanguageButton({
  handleSetViewState,
  viewState,
  fontColor,
+ allowedLanguages,
 }: {
  /** Function to change viewState */
  handleSetViewState: HandleSetViewState;
  /** Current viewState */
  viewState: ViewState;
  /** Font color */
  fontColor: string;
+ /**
+ * The list of enabled languages - when not specified, all languages are shown.
+ * When specified with length = 0 | 1, no button is shown
+ */
+ allowedLanguages?: ConsentManagerLanguageKey[];
 }): JSX.Element {
  const { formatMessage } = useIntl();
  const onLanguageOptions = viewState === 'LanguageOptions';
@@ -30,6 +37,11 @@ export function LanguageButton({
  }
  };
 
+ // show no language button when languages is disabled
+ if (allowedLanguages && allowedLanguages.length < 2) {
+ return <span />;
+ }
+
  return (
  <button
  type="button"

src/components/Main.tsx

@@ -173,6 +173,7 @@ export function Main({
  handleSetViewState={handleSetViewState}
  viewState={viewState}
  fontColor={config.theme.fontColor}
+ allowedLanguages={supportedLanguages}
  />
  </div>
  </div>

src/config.ts

@@ -8,6 +8,8 @@ import type {
  PrivacyRegimeToInitialViewState,
 } from '@transcend-io/airgap.js-types';
 import { ViewState } from '@transcend-io/airgap.js-types/build/enums/viewState';
+import { ConsentManagerLanguageKey } from '@transcend-io/internationalization';
+import { CONSENT_MANAGER_SUPPORTED_LANGUAGES } from './i18n';
 import { logger } from './logger';
 import { settings, LOG_LEVELS, extraConfig } from './settings';
 import { jsonParseSafe } from './utils/safe-json-parse';
@@ -16,6 +18,7 @@ const {
  privacyCenter,
  privacyPolicy = privacyCenter || '/privacy',
  secondaryPolicy,
+ allowedLanguages,
  dismissedViewState = 'Hidden',
 } = settings;
 
@@ -62,12 +65,18 @@ const baseConfig: Omit<
  },
  initialViewStateByPrivacyRegime: DEFAULT_VIEW_STATE_BY_PRIVACY_REGIME_COPIED,
 };
+
 /**
  * Merges config from defaults and settings. JSON is automatically decoded.
  *
  * @returns the consent manager config to use in the UI
  */
-export function getMergedConfig(): ConsentManagerConfig {
+export function getMergedConfig(): {
+ /** Merged config */
+ config: ConsentManagerConfig;
+ /** Languages split out separately for type-safety and preserving raw value */
+ allowedLanguages: ConsentManagerLanguageKey[];
+} {
  const settingsConfig: ConsentManagerConfigInput =
  typeof settings === 'string'
  ? jsonParseSafe(settings, () => ({}))
@@ -91,13 +100,24 @@ export function getMergedConfig(): ConsentManagerConfig {
  config.privacyPolicy ??= privacyPolicy;
  config.secondaryPolicy ??= secondaryPolicy;
  config.dismissedViewState ??= dismissedViewState;
+ config.allowedLanguages ??= allowedLanguages;
+
+ // Determine the language settings to use
+ const existingLanguages = config.allowedLanguages
+ ? config.allowedLanguages.split(',')
+ : [];
+ const allowedLanguagesParsed = !config.allowedLanguages
+ ? CONSENT_MANAGER_SUPPORTED_LANGUAGES
+ : CONSENT_MANAGER_SUPPORTED_LANGUAGES.filter((lang) =>
+ existingLanguages.includes(lang),
+ );
 
  const safeToContinue = validateConfig(config);
  if (!safeToContinue) {
  throw new Error('Invalid consent manager config');
  }
 
- return config;
+ return { config, allowedLanguages: allowedLanguagesParsed };
 }
 
 /**

yarn.lock

@@ -1155,14 +1155,14 @@ __metadata:
  languageName: node
  linkType: hard
 
-"@transcend-io/airgap.js-types@npm:^10.3.0":
- version: 10.3.0
- resolution: "@transcend-io/airgap.js-types@npm:10.3.0"
+"@transcend-io/airgap.js-types@npm:^10.4.1":
+ version: 10.4.1
+ resolution: "@transcend-io/airgap.js-types@npm:10.4.1"
  dependencies:
  "@transcend-io/type-utils": ^1.0.5
  fp-ts: ^2.11.8
  io-ts: ^2.2.16
- checksum: 47be7d892ab29959144fe11c7abb195dfd3e4bf8ad5034cadcfdee8d757644776bfd8b3315896e29deb6441cf937b83de3ac67114af0bc6335b23d6b00ec99b8
+ checksum: 38cf58caf2c18fefb16c79113990da8e311a9b3f15fdec5f4276e80edab80bb81bb4b58c6d7c513824b819d54c7f7a4fda81176deb14194d8c3e5543daa0a555
  languageName: node
  linkType: hard
 
@@ -1183,7 +1183,7 @@ __metadata:
  resolution: "@transcend-io/consent-manager-ui@workspace:."
  dependencies:
  "@monaco-editor/react": ^4.4.5
- "@transcend-io/airgap.js-types": ^10.3.0
+ "@transcend-io/airgap.js-types": ^10.4.1
  "@transcend-io/internationalization": ^1.5.1
  "@transcend-io/logger": ^1.0.14
  "@transcend-io/type-utils": ^1.0.7