UPDates

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

@@ -44,7 +44,7 @@
  },
  "devDependencies": {
  "@monaco-editor/react": "^4.4.5",
- "@transcend-io/airgap.js-types": "^10.4.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,10 +12,9 @@ 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 { useMemo, useState } from 'preact/hooks';
+import { useState } from 'preact/hooks';
 
 // TODO: https://transcend.height.app/T-13483
 // Fix IntlProvider JSX types
@@ -39,13 +38,7 @@ export function App({
 }): JSX.Element {
  // Consent manager configuration
  const defaultConfig = getMergedConfig();
- const [config, setConfig] = useState(defaultConfig);
- const supportedLanguages = useMemo(
- () =>
- (config.allowedLanguages as ConsentManagerLanguageKey[]) ||
- CONSENT_MANAGER_SUPPORTED_LANGUAGES,
- [config.allowedLanguages],
- );
+ const [{ config, allowedLanguages }, setConfig] = useState(defaultConfig);
 
  // Get the active privacy regime
  const privacyRegime = getPrimaryRegime(airgap.getRegimes());
@@ -67,7 +60,7 @@ export function App({
 
  // Language setup
  const { language, handleChangeLanguage, messages } = useLanguage({
- supportedLanguages,
+ supportedLanguages: allowedLanguages,
  translationsLocation:
  // Order of priority:
  // 1. Take airgap.js data-messages
@@ -84,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,
  });
@@ -113,7 +112,7 @@ export function App({
  modalOpenAuth={auth}
  viewState={viewState}
  config={config}
- supportedLanguages={supportedLanguages}
+ supportedLanguages={allowedLanguages}
  firstSelectedViewState={firstSelectedViewState}
  handleSetViewState={handleSetViewState}
  handleChangeLanguage={handleChangeLanguage}

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,7 @@ 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';
@@ -17,7 +18,7 @@ const {
  privacyCenter,
  privacyPolicy = privacyCenter || '/privacy',
  secondaryPolicy,
- allowedLanguages = CONSENT_MANAGER_SUPPORTED_LANGUAGES,
+ allowedLanguages,
  dismissedViewState = 'Hidden',
 } = settings;
 
@@ -64,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, () => ({}))
@@ -95,12 +102,22 @@ export function getMergedConfig(): ConsentManagerConfig {
  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.4.0":
- version: 10.4.0
- resolution: "@transcend-io/airgap.js-types@npm:10.4.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: 2723ab7a0d168050f492bab9113451a52508746e41556d8d88f18b801857a813cb8de0fee4eb160ee9e21df63ceb161be47c66b52c35fc55f72d8a8b05925a84
+ 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.4.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