MWPW-164959 Create SUSI Light Block

acrobat/blocks/susi-light/susi-light.css

@@ -0,0 +1,5 @@
+/* preserving modal space for ux */
+.dialog-modal:has(.susi-light) {
+  width: 360px;
+  min-height: 462px;
+}

acrobat/blocks/susi-light/susi-light.js

@@ -0,0 +1,125 @@
+/* eslint-disable chai-friendly/no-unused-expressions */
+/* eslint-disable camelcase */
+/* eslint-disable compat/compat */
+/* eslint-disable no-underscore-dangle */
+import { setLibs, getEnv } from '../../scripts/utils.js';
+
+const miloLibs = setLibs('/libs');
+const { createTag, loadScript, getConfig } = await import(`${miloLibs}/utils/utils.js`);
+
+const variant = 'standard';
+const isStage = ['stage', 'dev'].includes(getEnv());
+
+const onRedirect = (e) => {
+  // eslint-disable-next-line no-console
+  console.log('redirecting to:', e.detail);
+  setTimeout(() => {
+    window.location.assign(e.detail);
+    // temporary solution: allows analytics to go thru
+  }, 100);
+};
+const onError = (e) => {
+  window.lana?.log('on error:', e);
+};
+
+export function loadWrapper() {
+  const CDN_URL = `https://auth-light.identity${
+    isStage ? '-stage' : ''
+  }.adobe.com/sentry/wrapper.js`;
+  return loadScript(CDN_URL);
+}
+
+function getDestURL(url) {
+  let destURL;
+  try {
+    destURL = new URL(url);
+  } catch (err) {
+    window.lana?.log(`invalid redirect uri for susi-light: ${url}`);
+    destURL = new URL('https://www.adobe.com');
+  }
+  if (isStage) {
+    destURL.hostname = 'www.stage.adobe.com';
+  }
+  return destURL.toString();
+}
+
+export default async function init(el) {
+  const rows = el.querySelectorAll(':scope> div > div');
+  const redirectUrl = rows[0]?.textContent?.trim().toLowerCase();
+  const { client_id, redirect_uri } = window.adobeid;
+  const title = rows[2]?.textContent?.trim();
+  const authParams = {
+    dt: false,
+    locale: getConfig().locale.ietf.toLowerCase(),
+    response_type: 'code',
+    client_id: 'AdobeExpressWeb',
+    redirect_uri: redirectUrl || redirect_uri,
+    scope: 'AdobeID,openid',
+  };
+  const destURL = getDestURL(redirectUrl);
+  const goDest = () => window.location.assign(destURL);
+  if (window.feds?.utilities?.imslib) {
+    const { imslib } = window.feds.utilities;
+    imslib.isReady() && imslib.isSignedInUser() && goDest();
+    imslib.onReady().then(() => imslib.isSignedInUser() && goDest());
+  }
+  el.innerHTML = '';
+  await loadWrapper();
+  const config = { consentProfile: 'free' };
+  if (title) {
+    config.title = title;
+  }
+  const susi = createTag('susi-sentry-light');
+  susi.authParams = authParams;
+  susi.authParams.redirect_uri = destURL;
+  susi.config = config;
+  if (isStage) susi.stage = 'true';
+  susi.variant = variant;
+  function sendEventToAnalytics(type, eventName) {
+    const sendEvent = () => {
+      window._satellite.track('event', {
+        xdm: {},
+        data: {
+          eventType: 'web.webinteraction.linkClicks',
+          web: {
+            webInteraction: {
+              name: eventName,
+              linkClicks: { value: 1 },
+              type,
+            },
+          },
+          _adobe_corpnew: {
+            digitalData: {
+              primaryEvent: {
+                eventInfo: {
+                  eventName,
+                  client_id,
+                },
+              },
+            },
+          },
+        },
+      });
+    };
+    if (window._satellite?.track) {
+      sendEvent();
+    } else {
+      window.addEventListener(
+        'alloy_sendEvent',
+        () => {
+          sendEvent();
+        },
+        { once: true },
+      );
+    }
+  }
+
+  const onAnalytics = (e) => {
+    const { type, event } = e.detail;
+    sendEventToAnalytics(type, event);
+  };
+  susi.addEventListener('redirect', onRedirect);
+  susi.addEventListener('on-error', onError);
+  susi.addEventListener('on-analytics', onAnalytics);
+  el.append(susi);
+}

test/integration/susi-light/mocks/body.html

@@ -0,0 +1,6 @@
+<div class="susi-light">
+    <div>
+        <div><a href="https://www.adobe.com">https://www.adobe.com</a>
+        </div>
+    </div>
+</div>

test/integration/susi-light/mocks/head.html

@@ -0,0 +1,2 @@
+<link rel="icon" href="data:,">
+<meta name="martech" content="off">

test/integration/susi-light/susi-light.int.js

@@ -0,0 +1,28 @@
+/* eslint-env mocha */
+/* eslint-disable no-unused-vars */
+import { readFile } from '@web/test-runner-commands';
+import { expect } from '@esm-bundle/chai';
+import { setLibs } from '../../../acrobat/scripts/utils.js';
+
+const miloLibs = setLibs('/libs');
+const { setConfig } = await import(`${miloLibs}/utils/utils.js`);
+
+document.head.innerHTML = await readFile({ path: './mocks/head.html' });
+document.body.innerHTML = await readFile({ path: './mocks/body.html' });
+
+describe('Susi-light', async () => {
+  before(async () => {
+    setConfig({ origin: '', locale: { ietf: 'en-us' } });
+    window.adobeid = { client_id: 'test', redirect_uri: 'https://www.adobe.com' };
+    const block = document.querySelector('.susi-light');
+    const { default: init } = await import(
+      '../../../acrobat/blocks/susi-light/susi-light.js'
+    );
+    init(block);
+  });
+
+  it('Susi-light gets decorated', () => {
+    const block = document.querySelector('.susi-light');
+    expect(block).to.exist;
+  });
+});