API for fetching, translating and inserting variables into templates

index.html

@@ -4,10 +4,12 @@
     <title>Transcend Consent Manager Playground</title>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css" />
+    <!-- <link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css" /> -->
     <style type="text/css">
       body {
-        grid-template-columns: 1fr min(70rem, 90%) 1fr;
+        display: grid;
+        place-items: center;
+        height: 100vh;
       }
 
       #load-options ul,
@@ -21,6 +23,11 @@
         padding-left: 4px;
       }
 
+      #policy-content img {
+        max-width: 100%;
+        height: auto;
+      }
+
       img:not([src]):not([srcset])::after,
     img[src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"]::after
       {
@@ -83,6 +90,10 @@ <h2>Do Not Sell/Share</h2>
     <hr />
     <h2>View States</h2>
     <p id="data"></p>
+    <h2>Policy Content</h2>
+    <div style="max-width: 600px">
+      <div id="policy-content" style="max-width: 100%"></div>
+    </div>
     <br />
     <script>
       var handleDoNotSell = (event) => {
@@ -149,6 +160,21 @@ <h2>View States</h2>
         });
       };
 
+      /**
+       * Dynamically change out policy content based on language
+       */
+      async function setPolicyContent(language) {
+        if (language) {
+          await transcend.setActiveLocale(language);
+        }
+        const [policy] = await transcend.getTranscendPolicies({
+          policyTitles: ['Label Privacy Policy'],
+          // variables: { labelName: 'Marshmalt Records' },
+          locale: language || transcend.getActiveLocale(),
+        });
+        document.getElementById('policy-content').innerHTML = policy.content;
+      }
+
       // Prepare document on ready
       transcend.ready(() => {
         // Add buttons for view states
@@ -184,6 +210,14 @@ <h2>View States</h2>
         // setup the do not sell button
         setupDoNotSellButton();
 
+        transcend
+          .setTranscendUiVariables({
+            labelName: 'Marshmalt Records',
+          })
+          .then(() => {
+            setPolicyContent();
+          });
+
         // resolve consent from backend
         // uncomment to test backend consent mocked integration
         // fetchBackendConsent(1234).then((consent) =>

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.17.4",
+  "version": "4.18.0",
   "license": "MIT",
   "main": "build/ui",
   "files": [
@@ -37,6 +37,7 @@
     "clean": "yarn pnpify tsc --build --clean",
     "lint": "yarn pnpify eslint src --ext .ts,.tsx",
     "start": "rm -rf build/ &&  yarn build && concurrently 'WATCH=true yarn build' 'yarn live-server --host=localhost --entry-file=./index.html'",
+    "start:https": "rm -rf build/ &&  yarn build && concurrently 'WATCH=true yarn build' 'yarn live-server --host=yo.com --https=../main/ssl/index.js --entry-file=./index.html'",
     "build:playground": "rm -rf build/ && yarn build && cp ./src/playground/playground.css ./build/",
     "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",
@@ -49,7 +50,7 @@
     "@prettier/sync": "^0.5.2",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/preact": "^3.2.4",
-    "@transcend-io/airgap.js-types": "^10.12.5",
+    "@transcend-io/airgap.js-types": "^12.2.0",
     "@transcend-io/type-utils": "^1.0.7",
     "@types/jest": "^29.5.12",
     "@types/node": "^17.0.45",

src/api.ts

@@ -7,19 +7,29 @@ import {
 import { isViewStateClosed } from './hooks';
 import { logger } from './logger';
 import { PRIVACY_SIGNAL_NAME } from './privacy-signals';
-import { LOG_LEVELS } from './settings';
+import { LOG_LEVELS, settings } from './settings';
 import {
   HandleSetLanguage,
   HandleChangePrivacyPolicy,
   HandleSetViewState,
+  HandleChangeUiVariables,
 } from './types';
 import { VERSION } from './constants';
+import type { ConsentManagerLanguageKey } from '@transcend-io/internationalization';
+import { getTranscendPolicies } from './utils/getTranscendPolicies';
+import { ObjByString } from '@transcend-io/type-utils';
 
 interface MakeConsentManagerAPIInput {
   /** The event target, where events as dispatched */
   eventTarget: EventTarget;
   /** Property for the current view state of the consent manager UI */
   viewState: ViewState;
+  /** The currently selected language */
+  activeLocale: ConsentManagerLanguageKey;
+  /** The current dynamic variables */
+  currentVariables: ObjByString;
+  /** Method to handle changes to UI global variables */
+  handleChangeUiVariables: HandleChangeUiVariables;
   /** Method to change language */
   handleChangeLanguage: HandleSetLanguage;
   /** Method to change view state */
@@ -43,18 +53,35 @@ let promptSuppressionNoticeShown = false;
 export function makeConsentManagerAPI({
   eventTarget,
   viewState,
+  activeLocale,
+  currentVariables,
   handleChangeLanguage,
+  handleChangeUiVariables,
   handleChangePrivacyPolicy,
   handleChangeSecondaryPolicy,
   handleSetViewState,
   airgap,
 }: MakeConsentManagerAPIInput): ConsentManagerAPI {
   const consentManagerMethods: Omit<ConsentManagerAPI, keyof EventTarget> = {
+    setTranscendUiVariables: (variables) =>
+      Promise.resolve(handleChangeUiVariables(variables)),
+    getTranscendUiVariables: () => currentVariables,
+    getTranscendPolicies: (input = {}) =>
+      Promise.resolve(
+        getTranscendPolicies(
+          input,
+          settings.policiesCdnLocation,
+          activeLocale,
+          currentVariables,
+        ),
+      ),
+
     setPrivacyPolicy: (privacyPolicyLink) =>
       Promise.resolve(handleChangePrivacyPolicy(privacyPolicyLink)),
     setSecondaryPolicy: (privacyPolicyLink) =>
       Promise.resolve(handleChangeSecondaryPolicy(privacyPolicyLink)),
     setActiveLocale: (locale) => Promise.resolve(handleChangeLanguage(locale)),
+    getActiveLocale: () => activeLocale,
     getViewState: () => viewState,
     viewStates: new Set(Object.values(ViewState)),
     doNotSell: (auth, options) =>

src/components/AcceptAll.tsx

@@ -1,3 +1,4 @@
+import { ObjByString } from '@transcend-io/type-utils';
 import { h, JSX } from 'preact';
 import { useIntl } from 'react-intl';
 import { useAirgap } from '../hooks';
@@ -10,7 +11,10 @@ import { Button } from './Button';
  */
 export function AcceptAll({
   handleSetViewState,
+  globalUiVariables,
 }: {
+  /** Global variables to pass to message contents */
+  globalUiVariables: ObjByString;
   /** Function to change viewState */
   handleSetViewState: HandleSetViewState;
 }): JSX.Element {
@@ -37,22 +41,32 @@ export function AcceptAll({
             role="heading"
             className="text-title text-title-left"
           >
-            {formatMessage(messages.consentTitleAcceptAll)}
+            {formatMessage(messages.consentTitleAcceptAll, globalUiVariables)}
           </p>
         </div>
         <div>
-          <p className="paragraph"
+          <p
+            className="paragraph"
             // eslint-disable-next-line react/no-danger
             dangerouslySetInnerHTML={{
-              __html: formatMessage(messages.acceptAllDescription),
+              __html: formatMessage(
+                messages.acceptAllDescription,
+                globalUiVariables,
+              ),
             }}
           />
         </div>
       </div>
       <Button
-        primaryText={formatMessage(messages.acceptAllButtonPrimary)}
+        primaryText={formatMessage(
+          messages.acceptAllButtonPrimary,
+          globalUiVariables,
+        )}
         handleClick={handleAcceptAll}
-        ariaDescription={formatMessage(messages.acceptAllButtonAriaDescription)}
+        ariaDescription={formatMessage(
+          messages.acceptAllButtonAriaDescription,
+          globalUiVariables,
+        )}
         initialFocus
       />
     </div>

src/components/AcceptAllOrMoreChoices.tsx

@@ -1,3 +1,4 @@
+import { ObjByString } from '@transcend-io/type-utils';
 import { h, JSX } from 'preact';
 import { useIntl } from 'react-intl';
 import { useAirgap } from '../hooks';
@@ -10,9 +11,12 @@ import { Button } from './Button';
  */
 export function AcceptAllOrMoreChoices({
   handleSetViewState,
+  globalUiVariables,
 }: {
   /** Function to change viewState */
   handleSetViewState: HandleSetViewState;
+  /** Global variables to pass to message contents */
+  globalUiVariables: ObjByString;
 }): JSX.Element {
   const { airgap } = useAirgap();
   const { formatMessage } = useIntl();
@@ -47,26 +51,35 @@ export function AcceptAllOrMoreChoices({
             role="heading"
             className="text-title text-title-left"
           >
-            {formatMessage(messages.consentTitleAcceptAll)}
+            {formatMessage(messages.consentTitleAcceptAll, globalUiVariables)}
           </p>
         </div>
         <div>
           <p
             className="paragraph"
             // eslint-disable-next-line react/no-danger
             dangerouslySetInnerHTML={{
-              __html: formatMessage(messages.acceptAllDescription),
+              __html: formatMessage(
+                messages.acceptAllDescription,
+                globalUiVariables,
+              ),
             }}
           />
         </div>
       </div>
       <div className="accept-or-reject-all-button-row">
         <Button
-          primaryText={formatMessage(messages.acceptAllButtonPrimary)}
+          primaryText={formatMessage(
+            messages.acceptAllButtonPrimary,
+            globalUiVariables,
+          )}
           handleClick={handleAcceptAll}
         />
         <Button
-          primaryText={formatMessage(messages.moreChoicesButtonPrimary)}
+          primaryText={formatMessage(
+            messages.moreChoicesButtonPrimary,
+            globalUiVariables,
+          )}
           handleClick={handleMoreChoices}
           initialFocus
         />

src/components/AcceptAllRejectAllToggle.tsx

@@ -1,3 +1,4 @@
+import { ObjByString } from '@transcend-io/type-utils';
 import { h, JSX } from 'preact';
 import { useState } from 'preact/hooks';
 import { useIntl } from 'react-intl';
@@ -18,11 +19,14 @@ let savingTimeout: ReturnType<typeof setTimeout>;
 export function AcceptAllRejectAllToggle({
   handleSetViewState,
   fontColor,
+  globalUiVariables,
 }: {
   /** Function to change viewState */
   handleSetViewState: HandleSetViewState;
   /** Font color */
   fontColor: string;
+  /** Global variables to pass to message contents */
+  globalUiVariables: ObjByString;
 }): JSX.Element {
   const { airgap } = useAirgap();
   const { formatMessage } = useIntl();
@@ -64,6 +68,7 @@ export function AcceptAllRejectAllToggle({
         }}
         className="accept-all-reject-all-toggle-close"
         fontColor={fontColor}
+        globalUiVariables={globalUiVariables}
       />
       <div>
         <div>
@@ -72,21 +77,26 @@ export function AcceptAllRejectAllToggle({
             role="heading"
             className="text-title text-title-left"
           >
-            {formatMessage(messages.consentTitleAcceptAllRejectAllToggle)}
+            {formatMessage(
+              messages.consentTitleAcceptAllRejectAllToggle,
+              globalUiVariables,
+            )}
           </p>
         </div>
         <div>
-          <p className="paragraph"
+          <p
+            className="paragraph"
             // eslint-disable-next-line react/no-danger
             dangerouslySetInnerHTML={{
               __html: formatMessage(
                 messages.acceptAllRejectAllToggleDescription,
+                globalUiVariables,
               ),
             }}
           />
         </div>
         <div className="margin-tops do-not-sell-explainer-interface">
-          <GPCIndicator />
+          <GPCIndicator globalUiVariables={globalUiVariables} />
           <Switch
             id={switchId}
             checked={consentLocal}
@@ -95,6 +105,7 @@ export function AcceptAllRejectAllToggle({
               consentLocal
                 ? messages.doNotSellOptedIn
                 : messages.doNotSellOptedOut,
+              globalUiVariables,
             )}
             initialFocus
           />
@@ -110,6 +121,7 @@ export function AcceptAllRejectAllToggle({
                     : consentLocal
                     ? messages.preferencesSavedOptedIn
                     : messages.preferencesSaved,
+                  globalUiVariables,
                 )
               : '\u200b'}
           </p>