Exposes transcend.setPrivacyPolicy API

package.json

@@ -44,7 +44,7 @@
  },
  "devDependencies": {
  "@monaco-editor/react": "^4.4.5",
- "@transcend-io/airgap.js-types": "^10.0.0",
+ "@transcend-io/airgap.js-types": "^10.2.0",
  "@transcend-io/type-utils": "^1.0.7",
  "@types/node": "^17.0.21",
  "@typescript-eslint/eslint-plugin": "^5.12.1",

src/api.ts

@@ -7,7 +7,11 @@ import { isViewStateClosed } from './hooks';
 import { logger } from './logger';
 import { PRIVACY_SIGNAL_NAME } from './privacy-signals';
 import { LOG_LEVELS } from './settings';
-import { HandleSetLanguage, HandleSetViewState } from './types';
+import {
+ HandleSetLanguage,
+ HandleChangePrivacyPolicy,
+ HandleSetViewState,
+} from './types';
 
 interface MakeConsentManagerAPIInput {
  /** The event target, where events as dispatched */
@@ -18,6 +22,10 @@ interface MakeConsentManagerAPIInput {
  handleChangeLanguage: HandleSetLanguage;
  /** Method to change view state */
  handleSetViewState: HandleSetViewState;
+ /** Method to change the current privacy policy URL */
+ handleChangePrivacyPolicy: HandleChangePrivacyPolicy;
+ /** Method to change the current secondary policy URL */
+ handleChangeSecondaryPolicy: HandleChangePrivacyPolicy;
  /** Airgap.js */
  airgap: AirgapAPI;
 }
@@ -34,10 +42,16 @@ export function makeConsentManagerAPI({
  eventTarget,
  viewState,
  handleChangeLanguage,
+ handleChangePrivacyPolicy,
+ handleChangeSecondaryPolicy,
  handleSetViewState,
  airgap,
 }: MakeConsentManagerAPIInput): ConsentManagerAPI {
  const consentManagerMethods: Omit<ConsentManagerAPI, keyof EventTarget> = {
+ setPrivacyPolicy: (privacyPolicyLink) =>
+ Promise.resolve(handleChangePrivacyPolicy(privacyPolicyLink)),
+ setSecondaryPolicy: (privacyPolicyLink) =>
+ Promise.resolve(handleChangeSecondaryPolicy(privacyPolicyLink)),
  setActiveLocale: (locale) => Promise.resolve(handleChangeLanguage(locale)),
  getViewState: () => viewState,
  viewStates: new Set(Object.values(ViewState)),

src/components/App.tsx

@@ -5,12 +5,7 @@ import type {
  ConsentManagerAPI,
 } from '@transcend-io/airgap.js-types';
 import { getMergedConfig } from '../config';
-import {
- AirgapProvider,
- ConfigProvider,
- useLanguage,
- useViewState,
-} from '../hooks';
+import { AirgapProvider, useLanguage, useViewState } from '../hooks';
 import { settings } from '../settings';
 import { Main } from './Main';
 import { getPrimaryRegime } from '../regimes';
@@ -20,13 +15,14 @@ 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';
 
 // TODO: https://transcend.height.app/T-13483
 // Fix IntlProvider JSX types
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const IntlProvider = _IntlProvider as any;
 
-// Create `transcend` eventTarget on the global scope so this isn't derefenced on the next render of App
+// Create `transcend` eventTarget on the global scope so this isn't dereferenced on the next render of App
 const eventTarget = new TranscendEventTarget();
 
 /**
@@ -42,7 +38,8 @@ export function App({
  callback: (finalizedConsentManagerAPI: ConsentManagerAPI) => void;
 }): JSX.Element {
  // Consent manager configuration
- const config = getMergedConfig();
+ const defaultConfig = getMergedConfig();
+ const [config, setConfig] = useState(defaultConfig);
 
  // Get the active privacy regime
  const privacyRegime = getPrimaryRegime(airgap.getRegimes());
@@ -79,6 +76,16 @@ export function App({
  viewState,
  handleChangeLanguage,
  handleSetViewState,
+ handleChangePrivacyPolicy: (privacyPolicyUrl) =>
+ setConfig({
+ ...config,
+ privacyPolicy: privacyPolicyUrl,
+ }),
+ handleChangeSecondaryPolicy: (privacyPolicyUrl) =>
+ setConfig({
+ ...config,
+ secondaryPolicy: privacyPolicyUrl,
+ }),
  airgap,
  });
 
@@ -92,22 +99,21 @@ export function App({
  // messages.ts are translated in english
  defaultLocale={ConsentManagerLanguageKey.En}
  >
- <ConfigProvider newConfig={config}>
- <AirgapProvider newAirgap={airgap}>
- {/** Ensure messages are loaded before any UI is displayed */}
- {messages ? (
- <Main
- airgap={airgap}
- modalOpenAuth={auth}
- viewState={viewState}
- supportedLanguages={CONSENT_MANAGER_SUPPORTED_LANGUAGES}
- firstSelectedViewState={firstSelectedViewState}
- handleSetViewState={handleSetViewState}
- handleChangeLanguage={handleChangeLanguage}
- />
- ) : null}
- </AirgapProvider>
- </ConfigProvider>
+ <AirgapProvider newAirgap={airgap}>
+ {/** Ensure messages are loaded before any UI is displayed */}
+ {messages ? (
+ <Main
+ airgap={airgap}
+ modalOpenAuth={auth}
+ viewState={viewState}
+ config={config}
+ supportedLanguages={CONSENT_MANAGER_SUPPORTED_LANGUAGES}
+ firstSelectedViewState={firstSelectedViewState}
+ handleSetViewState={handleSetViewState}
+ handleChangeLanguage={handleChangeLanguage}
+ />
+ ) : null}
+ </AirgapProvider>
  </IntlProvider>
  );
 }

src/components/BottomMenu.tsx

@@ -1,7 +1,6 @@
 import { h, JSX } from 'preact';
 import { useIntl } from 'react-intl';
 import type { ViewState } from '@transcend-io/airgap.js-types';
-import { useConfig } from '../hooks';
 import { bottomMenuMessages, noticeAndDoNotSellMessages } from '../messages';
 import type { HandleSetViewState } from '../types';
 import { MenuItem } from './MenuItem';
@@ -13,15 +12,20 @@ export function BottomMenu({
  viewState,
  handleSetViewState,
  firstSelectedViewState,
+ secondaryPolicy,
+ privacyPolicy,
 }: {
  /** The first view state when opening the modal */
  firstSelectedViewState: ViewState | null;
  /** The current viewState */
  viewState: ViewState;
  /** Function to change viewState */
  handleSetViewState: HandleSetViewState;
+ /** Privacy policy */
+ privacyPolicy: string;
+ /** Secondary policy */
+ secondaryPolicy: string;
 }): JSX.Element {
- const { config } = useConfig();
  const { formatMessage } = useIntl();
 
  return (
@@ -77,14 +81,14 @@ export function BottomMenu({
  </div>
  )}
 
- {config.secondaryPolicy && viewState === 'CompleteOptionsInverted' && (
+ {secondaryPolicy && viewState === 'CompleteOptionsInverted' && (
  <div className="bottom-menu-item-container">
  <MenuItem
  label={formatMessage(
  bottomMenuMessages.showSecondaryPolicyButtonLabel,
  )}
  type="a"
- href={config.secondaryPolicy}
+ href={secondaryPolicy}
  target="_blank"
  rel="noopener noreferrer"
  >
@@ -97,7 +101,7 @@ export function BottomMenu({
  <MenuItem
  label={formatMessage(bottomMenuMessages.showPolicyButtonLabel)}
  type="a"
- href={config.privacyPolicy}
+ href={privacyPolicy}
  target="_blank"
  rel="noopener noreferrer"
  >

src/components/DoNotSellExplainer.tsx

@@ -2,7 +2,7 @@ import { h, JSX } from 'preact';
 import { useState } from 'preact/hooks';
 import { useIntl } from 'react-intl';
 import { CONSENT_OPTIONS } from '../constants';
-import { useAirgap, useConfig } from '../hooks';
+import { useAirgap } from '../hooks';
 import { messages } from '../messages';
 import type { HandleSetViewState } from '../types';
 import { GPCIndicator } from './GPCIndicator';
@@ -17,13 +17,15 @@ let savingTimeout: ReturnType<typeof setTimeout>;
  */
 export function DoNotSellExplainer({
  handleSetViewState,
+ fontColor,
 }: {
  /** Function to change viewState */
  handleSetViewState: HandleSetViewState;
+ /** Font color */
+ fontColor: string;
 }): JSX.Element {
  const { airgap } = useAirgap();
  const { formatMessage } = useIntl();
- const { config } = useConfig();
  const [saving, setSaving] = useState<boolean | null>(null);
  const [consentLocal, setConsentLocal] = useState(
  !!airgap.getConsent().purposes.SaleOfInfo,
@@ -59,7 +61,7 @@ export function DoNotSellExplainer({
  >
  <svg width="24" height="24" viewBox="0 0 32 32" aria-hidden="true">
  <path
- fill={config.theme.fontColor}
+ fill={fontColor}
  // eslint-disable-next-line max-len
  d="M25.71 24.29a.996.996 0 1 1-1.41 1.41L16 17.41 7.71 25.7a.996.996 0 1 1-1.41-1.41L14.59 16l-8.3-8.29A.996.996 0 1 1 7.7 6.3l8.3 8.29 8.29-8.29a.996.996 0 1 1 1.41 1.41L17.41 16l8.3 8.29z"
  />

src/components/LanguageButton.tsx

@@ -1,7 +1,6 @@
 import { h, JSX } from 'preact';
 import type { AirgapAuth, ViewState } from '@transcend-io/airgap.js-types';
 import { useIntl } from 'react-intl';
-import { useConfig } from '../hooks';
 import type { HandleSetViewState } from '../types';
 import { messages } from '../messages';
 
@@ -11,13 +10,15 @@ import { messages } from '../messages';
 export function LanguageButton({
  handleSetViewState,
  viewState,
+ fontColor,
 }: {
  /** Function to change viewState */
  handleSetViewState: HandleSetViewState;
  /** Current viewState */
  viewState: ViewState;
+ /** Font color */
+ fontColor: string;
 }): JSX.Element {
- const { config } = useConfig();
  const { formatMessage } = useIntl();
  const onLanguageOptions = viewState === 'LanguageOptions';
 
@@ -41,7 +42,7 @@ export function LanguageButton({
  aria-label={formatMessage(messages.switchLanguage)}
  >
  <svg
- fill={config.theme.fontColor}
+ fill={fontColor}
  width="17"
  height="17"
  viewBox="0 0 17 17"

src/components/Main.tsx

@@ -2,6 +2,7 @@ import { h, JSX } from 'preact';
 import type {
  AirgapAPI,
  AirgapAuth,
+ ConsentManagerConfig,
  ViewState,
 } from '@transcend-io/airgap.js-types';
 import { ConsentManagerLanguageKey } from '@transcend-io/internationalization';
@@ -34,6 +35,7 @@ import { AcceptOrRejectAllOrMoreChoices } from './AcceptOrRejectAllOrMoreChoices
 export function Main({
  airgap,
  viewState,
+ config,
  firstSelectedViewState,
  handleSetViewState,
  handleChangeLanguage,
@@ -42,6 +44,8 @@ export function Main({
 }: {
  /** airgap.js API */
  airgap: AirgapAPI;
+ /** Configuration for consent UI */
+ config: ConsentManagerConfig;
  /** The on click event passed as authentication to airgap. Needed for do-not-sell acknowledgement */
  modalOpenAuth?: AirgapAuth;
  /** The current viewState of the consent manager */
@@ -84,7 +88,10 @@ export function Main({
  )}
 
  {viewState === 'DoNotSellExplainer' && (
- <DoNotSellExplainer handleSetViewState={handleSetViewState} />
+ <DoNotSellExplainer
+ handleSetViewState={handleSetViewState}
+ fontColor={config.theme.fontColor}
+ />
  )}
 
  {viewState === 'QuickOptions3' && (
@@ -146,15 +153,18 @@ export function Main({
  )}
  </div>
  <div className="footer-container">
- <TranscendLogo />
+ <TranscendLogo fontColor={config.theme.fontColor} />
  <BottomMenu
  firstSelectedViewState={firstSelectedViewState}
  viewState={viewState}
  handleSetViewState={handleSetViewState}
+ privacyPolicy={config.privacyPolicy}
+ secondaryPolicy={config.secondaryPolicy}
  />
  <LanguageButton
  handleSetViewState={handleSetViewState}
  viewState={viewState}
+ fontColor={config.theme.fontColor}
  />
  </div>
  </div>

src/components/TranscendLogo.tsx

@@ -1,6 +1,5 @@
 /* eslint max-len: 0 */
 import { h, JSX } from 'preact';
-import { useConfig } from '../hooks';
 
 /**
  * The Transcend square logo
@@ -37,8 +36,12 @@ export function TranscendLogoLogomark(): JSX.Element {
  * The Transcend logo rendered as SVG.
  * On Desktop, hovering shows wordmark. On Mobile, only square logo is visible
  */
-export function TranscendLogo(): JSX.Element {
- const { config } = useConfig();
+export function TranscendLogo({
+ fontColor,
+}: {
+ /** Font color */
+ fontColor: string;
+}): JSX.Element {
  return (
  <a
  className="transcend-logo-container"
@@ -55,7 +58,7 @@ export function TranscendLogo(): JSX.Element {
  xmlns="http://www.w3.org/2000/svg"
  >
  <TranscendLogoLogomark />
- <g className="transcend-wordmark" fill={config.theme.fontColor}>
+ <g className="transcend-wordmark" fill={fontColor}>
  <path d="M17.3591 4.46346H23.1514V5.6923H20.9856V11.6658H19.5284V5.6923H17.3591V4.46346Z" />
  <path d="M24.0778 7.32484H24.1084C24.4203 6.73632 24.7734 6.43852 25.3772 6.43852C25.4863 6.43201 25.5956 6.44557 25.6997 6.47854V7.67678H25.6691C24.7734 7.58615 24.1284 8.05933 24.1284 9.1481V11.6658H22.7583V6.49855H24.0778V7.32484Z" />
  <path d="M29.3862 11.0914H29.365C29.1025 11.4846 28.7306 11.7871 27.8443 11.7871C26.7849 11.7871 26.041 11.2327 26.041 10.2051C26.041 9.06689 26.9674 8.70436 28.1162 8.5431C28.9719 8.4254 29.365 8.35242 29.365 7.95458C29.365 7.58145 29.0731 7.34016 28.4987 7.34016C27.8537 7.34016 27.5418 7.57557 27.5017 8.06522H26.2835C26.3235 7.15889 26.9991 6.3632 28.5093 6.3632C30.0606 6.3632 30.6857 7.05767 30.6857 8.2665V10.9019C30.6857 11.2939 30.7457 11.5258 30.8669 11.6164V11.667H29.5474C29.4662 11.5646 29.4156 11.3233 29.3862 11.0914ZM29.3956 9.84257V9.06689C29.1543 9.20814 28.7812 9.28818 28.4387 9.36939C27.7242 9.53065 27.3711 9.69191 27.3711 10.1757C27.3711 10.6594 27.6936 10.8301 28.1774 10.8301C28.9625 10.8301 29.3956 10.3463 29.3956 9.84257Z" />

src/hooks/index.ts

@@ -1,5 +1,4 @@
 export * from './useLanguage';
 export * from './useStickyState';
 export * from './useViewState';
-export * from './useConfig';
 export * from './useAirgap';