Skip to content

Commit

Permalink
Revert "MWPW-141022 [Project PEP] Prompt Dismissal + Tie-in with App …
Browse files Browse the repository at this point in the history 
…Launcher UX" (#2546)

Revert "MWPW-141022 [Project PEP] Prompt Dismissal + Tie-in with App Launcher…"

This reverts commit 15f8c9f.
  • Loading branch information
@salonijain3
salonijain3 authored Jul 9, 2024
1 parent 8e6ca69 commit a77e493
Show file tree
Hide file tree
Showing 5 changed files with 42 additions and 318 deletions.
115 changes: 0 additions & 115 deletions libs/features/webapp-prompt/webapp-prompt.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -188,118 +188,3 @@
}
}
}

/* 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;
}
}
95 changes: 8 additions & 87 deletions libs/features/webapp-prompt/webapp-prompt.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,21 +8,13 @@ import {
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();
const getElemText = (elem) => elem?.textContent?.trim().toLowerCase();

const getMetadata = (el) => [...el.childNodes].reduce((acc, row) => {
if (row.children?.length === 2) {
Expand All @@ -43,54 +35,6 @@ const getIcon = (content) => {
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) => {
Expand All @@ -115,10 +59,7 @@ class AppPrompt {
() => waitForClosedModalsThen(this.init),
{ once: true },
);
this.initializationQueued = true;
return;
}
this.initializationQueued = false;
} else this.init();
}

init = async () => {
Expand Down Expand Up @@ -221,10 +162,6 @@ class AppPrompt {
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;
};

Expand All @@ -244,7 +181,7 @@ class AppPrompt {
: '';

return toFragment`<div
daa-state="true" daa-im="true" daa-lh="PEP Modal_${this.options['product-name']?.toLowerCase()}"
daa-state="true" daa-im="true" daa-lh="PEP Modal_${this.options['product-name']}"
class="appPrompt" style="margin: 0 ${this.offset}px">
${this.elements.closeIcon}
<div class="appPrompt-icon">
Expand All @@ -263,7 +200,7 @@ class AppPrompt {
};

addEventListeners = () => {
this.anchor?.addEventListener('click', () => this.close({ dismissalActions: false }));
this.anchor?.addEventListener('click', this.close);
document.addEventListener('keydown', this.handleKeyDown);

[this.elements.closeIcon, this.elements.cta]
Expand All @@ -274,11 +211,9 @@ class AppPrompt {
if (event.key === 'Escape') this.close();
};

static redirectTo = (url) => window.location.assign(url);

initRedirect = () => setTimeout(() => {
this.close({ saveDismissal: false, dismissalActions: false });
this.redirectTo(this.options['redirect-url']);
this.close({ saveDismissal: false });
window.location.assign(this.options['redirect-url']);
}, this.options['loader-duration']);

isDismissedPrompt = () => AppPrompt.getDismissedPrompts().includes(this.id);
Expand All @@ -289,27 +224,14 @@ class AppPrompt {
document.cookie = `dismissedAppPrompts=${JSON.stringify([...dismissedPrompts])};path=/`;
};

close = ({ saveDismissal = true, dismissalActions = true } = {}) => {
close = ({ saveDismissal = 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 = () => {
Expand All @@ -324,8 +246,7 @@ class AppPrompt {

export default async function init(config) {
try {
const appPrompt = new AppPrompt(config);
if (!appPrompt.initializationQueued) await appPrompt.init();
const appPrompt = await new AppPrompt(config);
return appPrompt;
} catch (e) {
lanaLog({ message: 'Could not initialize PEP', e, tags: 'errorType=error,module=pep' });
Expand Down
27 changes: 1 addition & 26 deletions test/features/webapp-prompt/mocks/pep-prompt-content.js
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,4 @@
export default ({
color,
loaderDuration,
redirectUrl,
productName,
animationCount,
animationDuration,
tooltipMessage,
tooltipDuration,
}) => `<div>
export default ({ color, loaderDuration, redirectUrl, productName }) => `<div>
<p>
<picture>
<source type="image/webp" srcset="http://localhost:2000/test/features/webapp-prompt/mocks/media-icon.png" media="(min-width: 600px)">
Expand Down Expand Up @@ -36,21 +27,5 @@ export default ({
<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>`;
13 changes: 2 additions & 11 deletions test/features/webapp-prompt/test-utilities.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
import { setViewport } from '@web/test-runner-commands';
import sinon from 'sinon';
import init, { DISMISSAL_CONFIG } from '../../../libs/features/webapp-prompt/webapp-prompt.js';
import init from '../../../libs/features/webapp-prompt/webapp-prompt.js';
import { viewports, mockRes as importedMockRes } from '../../blocks/global-navigation/test-utilities.js';
import { setUserProfile } from '../../../libs/blocks/global-navigation/utilities/utilities.js';
import { getConfig, loadStyle, setConfig, updateConfig } from '../../../libs/utils/utils.js';

export const allSelectors = {
Expand All @@ -18,16 +17,13 @@ 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;
Expand All @@ -42,18 +38,13 @@ export const initPep = async ({ entName = 'firefly-web-usage', isAnchorOpen = fa
await setViewport(viewports.desktop);
await loadStyle('../../../libs/features/webapp-prompt/webapp-prompt.css');

setUserProfile({});
const pep = await init({
promptPath: 'https://pep-mocks.test/pep-prompt-content.plain.html',
getAnchorState: getAnchorStateMock || (async () => ({ id: 'unav-app-switcher', isOpen: isAnchorOpen })),
entName,
parent: document.querySelector('div.feds-utilities'),
});

Object.setPrototypeOf(pep, {
...Object.getPrototypeOf(pep),
redirectTo: sinon.stub().returns({}),
});

sinon.stub(pep, 'initRedirect').callsFake(() => null);
return pep;
};
Loading

0 comments on commit a77e493

Please sign in to comment.