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

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

@@ -188,3 +188,118 @@
     }
   }
 }
+
+/* DISMISSAL TOOLTIP */
+
+[data-pep-dismissal-tooltip]::after {
+  content: attr(data-pep-dismissal-tooltip);
+  display: inline-flex;
+  z-index: 3;
+  height: fit-content;
+  width: 8.875rem;
+  top: 125%;
+  left: -300%;
+  word-break: break-word;
+  border-radius: 7px;
+
+  padding-inline: 0.5625rem;
+  padding-block: 0.25rem 0.3125rem;
+
+  font-family: var(--body-font-family);
+  font-size: 0.75rem;
+  line-height: 0.9375rem;
+  color: white;
+}
+
+[data-pep-dismissal-tooltip]::before {
+  content: '';
+  z-index: 2;
+  width: 0.44rem;
+  height: 0.44rem;
+  border-radius: 0.05rem;
+  left: calc(50% - 0.22rem);
+  top: 115%;
+
+  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);
+  --coach-indicator-first-ring-delay-fraction: 0;
+  --coach-indicator-second-ring-delay-fraction: 0.33;
+  --coach-indicator-third-ring-delay-fraction: 0.66;
+  --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)*var(--coach-indicator-first-ring-delay-fraction));
+}
+
+.coach-indicator .coach-indicator-ring:nth-child(2) {
+  animation-delay: calc(var(--animation-duration)*var(--coach-indicator-second-ring-delay-fraction));
+}
+
+.coach-indicator .coach-indicator-ring:nth-child(3) {
+  animation-delay: calc(var(--animation-duration)*var(--coach-indicator-third-ring-delay-fraction));
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.coach-indicator .coach-indicator-ring {
+		animation: none;
+	}
+}

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

@@ -8,13 +8,21 @@
 import { getConfig, decorateSVG } from '../../utils/utils.js';
 import { replaceKey, replaceText } from '../placeholders.js';
 
+export const DISMISSAL_CONFIG = {
+  animationCount: 2,
+  animationDuration: 2500,
+  tooltipMessage: 'Use the App Switcher to quickly find apps.',
+  tooltipDuration: 5000,
+};
+
 const CONFIG = {
   selectors: { prompt: '.appPrompt' },
   delay: 7000,
   loaderColor: '#EB1000',
+  ...DISMISSAL_CONFIG,
 };
 
-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 +43,54 @@
   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 });
+};
+
 const modalsActive = () => !!document.querySelector('.dialog-modal');
 
 const waitForClosedModalsThen = (loadPEP) => {
@@ -162,6 +218,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;
   };
 
@@ -181,7 +241,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">
@@ -200,7 +260,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]
@@ -212,7 +272,7 @@
   };
 
   initRedirect = () => setTimeout(() => {
-    this.close({ saveDismissal: false });
+    this.close({ saveDismissal: false, dismissalActions: false });
     window.location.assign(this.options['redirect-url']);
   }, this.options['loader-duration']);
 
@@ -224,14 +284,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

@@ -1,6 +1,6 @@
 import { setViewport } from '@web/test-runner-commands';
 import sinon from 'sinon';
-import init from '../../../libs/features/webapp-prompt/webapp-prompt.js';
+import init, { DISMISSAL_CONFIG } from '../../../libs/features/webapp-prompt/webapp-prompt.js';
 import { viewports, mockRes as importedMockRes } from '../../blocks/global-navigation/test-utilities.js';
 import { getConfig, loadStyle, setConfig, updateConfig } from '../../../libs/utils/utils.js';
 
@@ -17,13 +17,16 @@ 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',
+  ...DISMISSAL_CONFIG,
 };
 
 export const mockRes = importedMockRes;