MWPW-143904-New block: cc-mobile-app-banner (#271)

* app banner in cc

* app banner in CC

* add review comments

creativecloud/blocks/cc-mobile-app-banner/cc-mobile-app-banner.css

@@ -0,0 +1,4 @@
+.cc-mobile-app-banner {
+  display:none;
+}
+

creativecloud/blocks/cc-mobile-app-banner/cc-mobile-app-banner.js

@@ -0,0 +1,66 @@
+import { getConfig } from '../../scripts/utils.js';
+
+async function getKey(product) {
+  const config = getConfig();
+  let keyMatch = [];
+  const resp = await fetch(`${config.contentRoot ?? ''}/branch-io-key.json`);
+  if (resp.ok) {
+    const json = await resp.json();
+    keyMatch = json.data.filter(
+      (p) => p.product === product,
+    );
+  }
+  return keyMatch[0]?.key;
+}
+
+/* eslint-disable */
+function branchInit(header, key) {
+  let initValue = false;
+  function initBranch() {
+    if (initValue) return;
+    initValue = true;
+    (function (b, r, a, n, c, h, _, s, d, k) {
+      if (!b[n] || !b[n]._q) {
+        for (; s < _.length;) c(h, _[s++]);
+        d = r.createElement(a);
+        d.async = 1;
+        d.src = 'https://cdn.branch.io/branch-latest.min.js';
+        k = r.getElementsByTagName(a)[0];
+        k.parentNode.insertBefore(d, k);
+        b[n] = h;
+      }
+    })(
+      window,
+      document,
+      'script',
+      'branch',
+      function (b, r) {
+        b[r] = function () {
+          b._q.push([r, arguments]);
+        };
+      },
+      { _q: [], _v: 1 },
+      'addListener applyCode autoAppIndex banner closeBanner closeJourney creditHistory credits data deepview deepviewCta first getCode init link logout redeem referrals removeListener sendSMS setBranchViewData setIdentity track validateCode trackCommerceEvent logEvent disableTracking'.split(
+        ' '
+      ),
+      0
+    );
+    const privacyConsent = window.adobePrivacy?.hasUserProvidedConsent();
+    branch.init(key, { tracking_disabled: !privacyConsent });
+    branch.addListener('didShowJourney', () => header.style.position = 'relative');
+    branch.addListener('didCloseJourney', () => header.style.position = 'sticky');
+  }
+  ['adobePrivacy:PrivacyConsent', 'adobePrivacy:PrivacyReject', 'adobePrivacy:PrivacyCustom']
+    .forEach((event) => {
+      window.addEventListener(event, initBranch);
+    });
+}
+
+/* eslint-enable */
+export default async function init(el) {
+  const header = document.querySelector('.global-navigation');
+  if (!header) return;
+  const product = [...el.classList].find((token) => token.startsWith('product-')).split('-')[1];
+  const key = await getKey(product);
+  if (key) branchInit(header, key);
+}

creativecloud/scripts/utils.js

@@ -45,8 +45,8 @@ export const [setLibs, getLibs] = (() => {
 
 const miloLibs = setLibs('/libs');
 
-const { createTag, localizeLink, getConfig, loadStyle } = await import(`${miloLibs}/utils/utils.js`);
-export { createTag, loadStyle, localizeLink };
+const { createTag, localizeLink, getConfig, loadStyle, setConfig } = await import(`${miloLibs}/utils/utils.js`);
+export { createTag, loadStyle, localizeLink, setConfig, getConfig };
 
 function getDecorateAreaFn() {
   let lcpImgSet = false;

test/blocks/cc-mobile-app-banner/cc-mobile-app-banner.test.js

@@ -0,0 +1,67 @@
+import { readFile } from '@web/test-runner-commands';
+import { expect } from '@esm-bundle/chai';
+import sinon from 'sinon';
+import { delay } from '../../helpers/waitForElement.js';
+
+const { setConfig } = await import('../../../creativecloud/scripts/utils.js');
+
+const mockConfig = { contentRoot: '/test/blocks/cc-mobile-app-banner/mocks' };
+setConfig(mockConfig);
+
+describe('cc-mobile-app-banner', () => {
+  beforeEach(async () => {
+    document.body.innerHTML = await readFile({ path: './mocks/body.html' });
+  });
+  afterEach(() => {
+    sinon.restore();
+  });
+
+  it('should not call branch init if no branch-io-key.json', async () => {
+    sinon.stub(window, 'fetch');
+    const res = new window.Response('Not found', { status: 404 });
+    window.fetch.returns(Promise.resolve(res));
+
+    const module = await import('../../../creativecloud/blocks/cc-mobile-app-banner/cc-mobile-app-banner.js');
+    const banner = document.body.querySelector('.cc-mobile-app-banner.product-test');
+    await module.default(banner);
+    window.dispatchEvent(new CustomEvent('adobePrivacy:PrivacyConsent'));
+    await delay(0);
+
+    const scriptTags = document.querySelectorAll('head > script');
+    const scriptSrcs = [];
+    scriptTags.forEach((scriptTag) => {
+      scriptSrcs.push(scriptTag.getAttribute('src'));
+    });
+    expect(scriptSrcs).to.not.include('https://cdn.branch.io/branch-latest.min.js');
+  });
+
+  it('should not call branch init if product not found in branch-io-key file', async () => {
+    const module = await import('../../../creativecloud/blocks/cc-mobile-app-banner/cc-mobile-app-banner.js');
+    const banner = document.body.querySelector('.cc-mobile-app-banner.product-test1');
+    await module.default(banner);
+    window.dispatchEvent(new CustomEvent('adobePrivacy:PrivacyConsent'));
+    await delay(0);
+
+    const scriptTags = document.querySelectorAll('head > script');
+    const scriptSrcs = [];
+    scriptTags.forEach((scriptTag) => {
+      if (scriptTag.getAttribute('src') !== null) scriptSrcs.push(scriptTag.getAttribute('src'));
+    });
+    expect(scriptSrcs).to.not.include('https://cdn.branch.io/branch-latest.min.js');
+  });
+
+  it('should init by adding branchio script', async () => {
+    window.adobePrivacy = { hasUserProvidedConsent: () => true };
+    const module = await import('../../../creativecloud/blocks/cc-mobile-app-banner/cc-mobile-app-banner.js');
+    const banner = document.body.querySelector('.cc-mobile-app-banner.product-test');
+    await module.default(banner);
+    window.dispatchEvent(new CustomEvent('adobePrivacy:PrivacyConsent'));
+    await delay(0);
+    const scriptTags = document.querySelectorAll('head > script');
+    const scriptSrcs = [];
+    scriptTags.forEach((scriptTag) => {
+      if (scriptTag.getAttribute('src') !== null) scriptSrcs.push(scriptTag.getAttribute('src'));
+    });
+    expect(scriptSrcs).to.include('https://cdn.branch.io/branch-latest.min.js');
+  });
+});

test/blocks/cc-mobile-app-banner/mocks/body.html

@@ -0,0 +1,10 @@
+<header class="global-navigation" daa-im="true" daa-lh="gnav|milo"><div class="feds-curtain"></div><div class="feds-topnav-wrapper">
+</header>
+<div>Hello World</div>
+<div>
+  <div class="cc-mobile-app-banner product-test">
+  </div>
+  <div>
+    <div class="cc-mobile-app-banner product-test1">
+  </div>  
+</div>

test/blocks/cc-mobile-app-banner/mocks/branch-io-key.json

@@ -0,0 +1,8 @@
+{
+  "data": [
+    {
+      "product": "test",
+      "key": "key_test_eaNdoH8nTxeZXfOsgkELrjgpFrhm4q2m"
+    }
+  ]
+}

test/helpers/waitForElement.js

@@ -47,4 +47,16 @@ const waitForElement = (
   observer.observe(rootEl, options);
 });
 
+/**
+ * Promise based setTimeout that can be await'd
+ * @param {int} timeOut time out in milliseconds
+ * @param {*} cb Callback function to call when time elapses
+ * @returns
+ */
+export const delay = (timeOut, cb) => new Promise((resolve) => {
+  setTimeout(() => {
+    resolve((cb && cb()) || null);
+  }, timeOut);
+});
+
 export default waitForElement;