MWPW-141022 [Project PEP] Prompt Dismissal + Tie-in with App Launcher UX

libs/features/webapp-prompt/webapp-prompt.css

@@ -188,3 +188,121 @@
     }
   }
 }
+
+/* DISMISSAL TOOLTIP */
+
+[data-pep-dismissal-tooltip]::after {
+  content: attr(data-pep-dismissal-tooltip);
+  display: inline-flex;
+  z-index: 3;
+  background-color: #3B63FB;
+  height: fit-content;
+  width: 8.875rem;
+  top: 120%;
+  left: -300%;
+  word-break: break-word;
+  border-radius: 7px;
+
+  padding-inline-start: 0.5625rem;
+  padding-inline-end: 0.5625rem;
+  padding-block-start: 0.25rem;
+  padding-block-end: 0.3125rem;
+
+
+  font-family: 'Adobe Clean';
+  font-size: 0.75rem;
+  line-height: 0.9375rem;
+  color: white;
+}
+
+[data-pep-dismissal-tooltip]::before {
+  content: '';
+  z-index: 2;
+  background-color: #3B63FB;
+  width: 0.44rem;
+  height: 0.44rem;
+  border-radius: 0.05rem;
+  left: calc(50% - 0.22rem);
+  top: 110%;
+
+  transform: rotate(45deg);
+}
+
+[data-pep-dismissal-tooltip]::before,
+[data-pep-dismissal-tooltip]::after {
+  background-color: #3B63FB;
+  position: absolute;
+  pointer-events: none;
+  transition: opacity 0.5s;
+}
+
+@media (min-width: 1520px) {
+  [data-pep-dismissal-tooltip]::after {
+    left: calc(50% - 5rem);
+  }
+}
+
+
+/* DISMISSAL ANIMATION */
+
+.coach-indicator {
+  --coach-indicator-ring-default-color: rgba(56,146,243);
+  --coach-indicator-ring-diameter: 1.25rem;
+	--coach-indicator-ring-border-size: 2px;
+	--coach-indicator-ring-inline-size: var(--coach-indicator-ring-diameter);
+	--coach-indicator-ring-block-size: var(--coach-indicator-ring-diameter);
+  --animation-duration: 3000ms;
+}
+
+@keyframes pulse {
+	0% {
+		transform: scale(0.8);
+		opacity: 0;
+	}
+
+	50% {
+		transform: scale(1.5);
+		opacity: 1;
+	}
+
+	100% {
+		transform: scale(2);
+		opacity: 0;
+	}
+}
+
+.coach-indicator .coach-indicator-ring {
+	display: block;
+	position: absolute;
+  top: 14%;
+  left: 13%;
+
+	border-style: solid;
+	border-width: var(--coach-indicator-ring-border-size);
+	border-color: var(--coach-indicator-ring-default-color);
+
+	inline-size: var(--coach-indicator-ring-inline-size);
+	block-size: var(--coach-indicator-ring-block-size);
+	animation: pulse var(--animation-duration) linear;
+  animation-fill-mode: both;
+
+  border-radius: 5px;
+}
+
+.coach-indicator .coach-indicator-ring:nth-child(1) {
+  animation-delay: calc(var(--animation-duration)*(0));
+}
+
+.coach-indicator .coach-indicator-ring:nth-child(2) {
+  animation-delay: calc(var(--animation-duration)*(0.33));
+}
+
+.coach-indicator .coach-indicator-ring:nth-child(3) {
+  animation-delay: calc(var(--animation-duration)*(0.66));
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.coach-indicator .coach-indicator-ring {
+		animation: none;
+	}
+}

libs/features/webapp-prompt/webapp-prompt.js

@@ -12,9 +12,13 @@
   selectors: { prompt: '.appPrompt' },
   delay: 7000,
   loaderColor: '#EB1000',
+  animationCount: 2,
+  animationDuration: 2500,
+  tooltipMessage: 'Use the App Switcher to quickly find apps.',
+  tooltipDuration: 5000,
 };
 
-const getElemText = (elem) => elem?.textContent?.trim().toLowerCase();
+const getElemText = (elem) => elem?.textContent?.trim();
 
 const getMetadata = (el) => [...el.childNodes].reduce((acc, row) => {
   if (row.children?.length === 2) {
@@ -35,6 +39,58 @@
   return icons.company;
 };
 
+const showTooltip = (
+  element,
+  message = CONFIG.tooltipMessage,
+  time = CONFIG.tooltipDuration,
+) => {
+  element.setAttribute('data-pep-dismissal-tooltip', message);
+  const cleanup = () => {
+    element.removeAttribute('data-pep-dismissal-tooltip');
+  };
+  const timeoutID = setTimeout(() => {
+    cleanup();
+  }, time);
+  element.addEventListener('click', () => {
+    cleanup();
+    clearTimeout(timeoutID);
+  }, { once: true });
+};
+
+const playFocusAnimation = (
+  element,
+  iterationCount = CONFIG.animationCount,
+  animationDuration = CONFIG.animationDuration,
+) => {
+  element.classList.add('coach-indicator');
+  element.style.setProperty('--animation-duration', `${animationDuration}ms`);
+  const rings = [];
+  const createRing = () => toFragment`
+    <div
+      class="coach-indicator-ring"
+      style="animation-iteration-count: ${iterationCount};">
+    </div>`;
+  for (let i = 0; i < 3; i += 1) {
+    const ring = createRing();
+    element.insertAdjacentElement('afterbegin', ring);
+    rings.push(ring);
+  }
+  // The cleanup function is added to the event queue
+  // some time after the end of the animation because
+  // the cleanup isn't high priority but it should be done
+  // eventually. (Animation truly ends slightly after
+  // animationDuration * iterationCount due to animation-delay)
+  const cleanup = () => {
+    rings.forEach((ring) => ring.remove());
+    element.classList.remove('coach-indicator');
+  };
+  const timeoutID = setTimeout(cleanup, (iterationCount + 1) * animationDuration);
+  element.addEventListener('click', () => {
+    cleanup();
+    clearTimeout(timeoutID);
+  }, { once: true });
+};
+
 class AppPrompt {
   constructor({ promptPath, entName, parent, getAnchorState } = {}) {
     this.promptPath = promptPath;
@@ -147,6 +203,10 @@
     const metadata = getMetadata(content.querySelector('.section-metadata'));
     metadata['loader-duration'] = parseInt(metadata['loader-duration'] || CONFIG.delay, 10);
     metadata['loader-color'] = metadata['loader-color'] || CONFIG.loaderColor;
+    metadata['dismissal-animation-count'] = parseInt(metadata['dismissal-animation-count'] ?? CONFIG.animationCount, 10);
+    metadata['dismissal-animation-duration'] = parseInt(metadata['dismissal-animation-duration'] ?? CONFIG.animationDuration, 10);
+    metadata['dismissal-tooltip-message'] ??= CONFIG.tooltipMessage;
+    metadata['dismissal-tooltip-duration'] = parseInt(metadata['dismissal-tooltip-duration'] ?? CONFIG.tooltipDuration, 10);
     this.options = metadata;
   };
 
@@ -166,7 +226,7 @@
       : '';
 
     return toFragment`<div
-      daa-state="true" daa-im="true" daa-lh="PEP Modal_${this.options['product-name']}"
+      daa-state="true" daa-im="true" daa-lh="PEP Modal_${this.options['product-name']?.toLowerCase()}"
       class="appPrompt" style="margin: 0 ${this.offset}px">
       ${this.elements.closeIcon}
       <div class="appPrompt-icon">
@@ -185,7 +245,7 @@
   };
 
   addEventListeners = () => {
-    this.anchor?.addEventListener('click', this.close);
+    this.anchor?.addEventListener('click', () => this.close({ dismissalActions: false }));
     document.addEventListener('keydown', this.handleKeyDown);
 
     [this.elements.closeIcon, this.elements.cta]
@@ -197,7 +257,7 @@
   };
 
   initRedirect = () => setTimeout(() => {
-    this.close({ saveDismissal: false });
+    this.close({ saveDismissal: false, dismissalActions: false });
     window.location.assign(this.options['redirect-url']);
   }, this.options['loader-duration']);
 
@@ -209,14 +269,27 @@
     document.cookie = `dismissedAppPrompts=${JSON.stringify([...dismissedPrompts])};path=/`;
   };
 
-  close = ({ saveDismissal = true } = {}) => {
+  close = ({ saveDismissal = true, dismissalActions = true } = {}) => {
     const appPromptElem = document.querySelector(CONFIG.selectors.prompt);
     appPromptElem?.remove();
     clearTimeout(this.redirectFn);
     if (saveDismissal) this.setDismissedPrompt();
     document.removeEventListener('keydown', this.handleKeyDown);
     this.anchor?.focus();
     this.anchor?.removeEventListener('click', this.close);
+
+    if (dismissalActions) {
+      playFocusAnimation(
+        this.anchor,
+        this.options['dismissal-animation-count'],
+        this.options['dismissal-animation-duration'],
+      );
+      showTooltip(
+        this.anchor,
+        this.options['dismissal-tooltip-message'],
+        this.options['dismissal-tooltip-duration'],
+      );
+    }
   };
 
   static getDismissedPrompts = () => {

test/features/webapp-prompt/mocks/pep-prompt-content.js

@@ -1,4 +1,13 @@
-export default ({ color, loaderDuration, redirectUrl, productName }) => `<div>
+export default ({
+  color,
+  loaderDuration,
+  redirectUrl,
+  productName,
+  animationCount,
+  animationDuration,
+  tooltipMessage,
+  tooltipDuration,
+}) => `<div>
   <p>
     <picture>
       <source type="image/webp" srcset="http://localhost:2000/test/features/webapp-prompt/mocks/media-icon.png" media="(min-width: 600px)">
@@ -27,5 +36,21 @@ export default ({ color, loaderDuration, redirectUrl, productName }) => `<div>
       <div>product-name</div>
       <div>${productName}</div>
     </div>`}
+    ${animationCount && `<div>
+      <div>dismissal-animation-count</div>
+      <div>${animationCount}</div>
+    </div>`}
+    ${animationDuration && `<div>
+      <div>dismissal-animation-duration</div>
+      <div>${animationDuration}</div>
+    </div>`}
+    ${tooltipMessage && `<div>
+      <div>dismissal-tooltip-message</div>
+      <div>${tooltipMessage}</div>
+    </div>`}
+    ${tooltipDuration && `<div>
+      <div>dismissal-tooltip-duration</div>
+      <div>${tooltipDuration}</div>
+    </div>`}
   </div>
 </div>`;

test/features/webapp-prompt/test-utilities.js

@@ -17,13 +17,19 @@ export const allSelectors = {
   progressWrapper: '.appPrompt-progressWrapper',
   progress: '.appPrompt-progress',
   appSwitcher: '#unav-app-switcher',
+  indicatorRing: '.coach-indicator-ring',
+  tooltip: '[data-pep-dismissal-tooltip]',
 };
 
 export const defaultConfig = {
   color: '#b30b00',
   loaderDuration: 7500,
   redirectUrl: 'https://www.adobe.com/?pep=true',
   productName: 'photoshop',
+  animationCount: 5,
+  animationDuration: 2500,
+  tooltipMessage: 'Use the App Switcher to quickly find apps.',
+  tooltipDuration: 5000,
 };
 
 export const mockRes = importedMockRes;

test/features/webapp-prompt/webapp-prompt.test.js

@@ -94,16 +94,43 @@ describe('PEP', () => {
   });
 
   describe('PEP configuration tests', () => {
-    it('should use config values when metadata loader color or duration are not provided', async () => {
+    it('should use config values when metadata loader color, duration, or dismissal options are not provided', async () => {
       sinon.restore();
       stub(window, 'fetch').callsFake(async (url) => {
-        if (url.includes('pep-prompt-content.plain.html')) return mockRes({ payload: pepPromptContent({ ...defaultConfig, color: false, loaderDuration: false }) });
+        if (url.includes('pep-prompt-content.plain.html')) {
+          return mockRes({
+            payload: pepPromptContent({
+              ...defaultConfig,
+              color: false,
+              loaderDuration: false,
+              animationCount: false,
+              animationDuration: false,
+              tooltipMessage: false,
+              tooltipDuration: false,
+            }),
+          });
+        }
         return null;
       });
       const pep = await initPep({});
       await clock.runAllAsync();
-      const { 'loader-color': pepColor, 'loader-duration': pepDuration } = pep.options;
-      expect(!!pepColor && !!pepDuration).to.equal(true);
+      const {
+        'loader-color': pepColor,
+        'loader-duration': pepDuration,
+        'dismissal-animation-count': animCount,
+        'dismissal-animation-duration': animDuration,
+        'dismissal-tooltip-message': tooltipMessage,
+        'dismissal-tooltip-duration': tooltipDuration,
+      } = pep.options;
+      const configPresent = [
+        pepColor,
+        pepDuration,
+        animCount,
+        animDuration,
+        tooltipMessage,
+        tooltipDuration,
+      ].reduce((acc, x) => acc && !!x, true);
+      expect(configPresent).to.equal(true);
     });
   });
 
@@ -152,6 +179,26 @@ describe('PEP', () => {
     });
   });
 
+  describe('PEP dismissal tests', () => {
+    it('should add three rings to the app switcher and remove them after the alloted time', async () => {
+      await initPep({});
+      await clock.runAllAsync();
+      document.querySelector(allSelectors.closeIcon).click();
+      expect([...document.querySelectorAll(allSelectors.indicatorRing)].length).to.equal(3);
+      await clock.runAllAsync();
+      expect([...document.querySelectorAll(allSelectors.indicatorRing)].length).to.equal(0);
+    });
+
+    it('should add a data attribute to the app switcher with the correct data and remove it after the allotted time', async () => {
+      await initPep({});
+      await clock.runAllAsync();
+      document.querySelector(allSelectors.closeIcon).click();
+      expect(document.querySelector(allSelectors.tooltip)).to.exist;
+      await clock.runAllAsync();
+      expect(document.querySelector(allSelectors.tooltip)).to.not.exist;
+    });
+  });
+
   describe('PEP logging tests', () => {
     beforeEach(() => {
       window.lana.log = sinon.spy();