Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Stage test #62

Closed
wants to merge 5 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
97 changes: 97 additions & 0 deletions libs/blocks/media/media.css
Original file line number Diff line number Diff line change
Expand Up @@ -439,3 +439,100 @@ div[class*="-up"] .media .foreground > .media-row {
height: 120px;
}
}

/* In the delayed modal used for promotions */
.media.in-modal > .container.foreground {
width: 250px;
}

@media (min-width: 430px) and (orientation: portrait) {
.media.in-modal > .container.foreground {
width: 320px;
}
}

@media (min-width: 430px) and (orientation: landscape) {
.media.in-modal > .container.foreground {
width: 540px;
}
}

@media (min-width: 768px) {
.media.in-modal:not(.full-bleed-image) > .container.foreground {
width: 500px;
}
}

@media (min-width: 829px) {
.media.in-modal:not(.full-bleed-image) > .container.foreground {
width: 700px;
}
}

@media (min-width: 1366px) {
.media.in-modal > .container.foreground {
width: 800px;
}
}

.media.in-modal > .container.foreground > .media-row {
display: grid;
gap: 0;
}

.media.in-modal.full-bleed-image {
padding: 0;
}

.media.in-modal.full-bleed-image > .container.foreground {
width: 100%;
}

@media (orientation: portrait) {
.media.in-modal > .container.foreground > .media-row {
grid-template-rows: 1fr auto;
}

.media.in-modal.media-reverse-mobile > .container.foreground > .media-row div:first-child {
grid-area: 2 / 1 / 3 / 2;
}

.media.in-modal.media-reverse-mobile > .container.foreground > .media-row div:nth-child(2) {
grid-area: 1 / 1 / 2 / 2;
}
}

@media (orientation: landscape) {
.media.in-modal > .container.foreground > .media-row {
grid-template-columns: 1fr 1fr;
}

.media.in-modal > .container.foreground > .media-row div:first-child {
grid-area: 1 / 1 / 2 / 2;
}

.media.in-modal > .container.foreground > .media-row div:nth-child(2) {
grid-area: 1 / 2 / 2 / 3;
}
}

.media.in-modal > .container.foreground > .media-row > .text {
width: auto;
box-sizing: border-box;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
}

.media.in-modal.full-bleed-image > .container.foreground > .media-row > .text {
padding: var(--spacing-s);
}

.media.in-modal.full-bleed-image > .container.foreground > .media-row > .image {
height: 100%;
}

.media.in-modal.full-bleed-image > .container.foreground > .media-row > .image img {
height: 100%;
width: 100%;
object-fit: cover;
}
42 changes: 42 additions & 0 deletions libs/blocks/modal/modal.css
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,48 @@
z-index: 103;
}

.dialog-modal.delayed-modal {
width: 300px;
max-width: none;
border-radius: var(--l-rounded-corners);
}

@media (min-width: 430px) and (orientation: portrait) {
.dialog-modal.delayed-modal {
width: 370px;
}
}

@media (min-width: 430px) and (orientation: landscape) {
.dialog-modal.delayed-modal {
width: 600px;
}
}

@media (min-width: 576px) and (orientation: portrait) {
.dialog-modal.delayed-modal {
width: 516px;
}
}

@media (min-width: 768px) {
.dialog-modal.delayed-modal {
width: 600px;
}
}

@media (min-width: 829px) {
.dialog-modal.delayed-modal {
width: 800px;
}
}

@media (min-width: 1366px) {
.dialog-modal.delayed-modal {
width: 900px;
}
}

.dialog-modal.upgrade-flow-modal {
height: 100%;
width: 100%;
Expand Down
14 changes: 14 additions & 0 deletions libs/blocks/modal/modal.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ const CLOSE_ICON = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="2
</g>
</svg>`;

let isDelayedModal = false;

export function findDetails(hash, el) {
const id = hash.replace('#', '');
const a = el || document.querySelector(`a[data-modal-hash="${hash}"]`);
Expand Down Expand Up @@ -53,6 +55,7 @@ export function closeModal(modal) {

const hashId = window.location.hash.replace('#', '');
if (hashId === modal.id) window.history.pushState('', document.title, `${window.location.pathname}${window.location.search}`);
isDelayedModal = false;
}

function isElementInView(element) {
Expand Down Expand Up @@ -96,6 +99,16 @@ export async function getModal(details, custom) {

if (custom) getCustomModal(custom, dialog);
if (details) await getPathModal(details.path, dialog);
if (isDelayedModal) {
dialog.classList.add('delayed-modal');
const mediaBlock = dialog.querySelector('div.media');
if (mediaBlock) {
mediaBlock.classList.add('in-modal');
const { miloLibs, codeRoot } = getConfig();
const base = miloLibs || codeRoot;
loadStyle(`${base}/styles/rounded-corners.css`);
}
}

const localeModal = id?.includes('locale-modal') ? 'localeModal' : 'milo';
const analyticsEventName = window.location.hash ? window.location.hash.replace('#', '') : localeModal;
Expand Down Expand Up @@ -195,6 +208,7 @@ export function getHashParams(hashStr) {
export function delayedModal(el) {
const { hash, delay } = getHashParams(el?.dataset.modalHash);
if (!delay || !hash) return false;
isDelayedModal = true;
el.classList.add('hide-block');
const modalOpenEvent = new Event(`${hash}:modalOpen`);
const pagesModalWasShownOn = window.sessionStorage.getItem(`shown:${hash}`);
Expand Down
30 changes: 20 additions & 10 deletions libs/blocks/quiz-entry/quiz-entry.js
Original file line number Diff line number Diff line change
Expand Up @@ -54,14 +54,17 @@ const App = ({
return optionItem && optionItem[prop] ? optionItem[prop] : '';
};

const sendMLFieldFiCodesAnalytics = (filtered) => {
const sendMLFieldAnalytics = (input, isFieldText = true) => {
let val = '';
if (filtered.length > 0) {
const fiCodes = filtered.map((result) => result.ficode);

if (isFieldText) {
val = `Filters|${analyticsType}|${input}`;
} else if (input.length > 0) {
const fiCodes = input.map((result) => result.ficode);
val = `Filters|${analyticsType}|${selectedQuestion?.questions}/interest-${fiCodes.join('-')}`;
}
window.alloy('sendEvent', {
documentUnloading: true,

const eventData = {
xdm: {
eventType: 'web.webinteraction.linkClicks',
web: {
Expand All @@ -75,12 +78,15 @@ const App = ({
data: {
_adobe_corpnew: {
digitalData: {
primaryEvent:
{ eventInfo: { eventName: val } },
search: isFieldText ? { searchInfo: { keyword: val } } : undefined,
primaryEvent: !isFieldText ? { eventInfo: { eventName: val } } : undefined,
},
},
},
});
};

// eslint-disable-next-line no-underscore-dangle
window._satellite?.track('event', eventData);
};

useEffect(() => {
Expand Down Expand Up @@ -197,17 +203,19 @@ const App = ({
selections[item.ficode] = true;
});

sendMLFieldFiCodesAnalytics(filtered);
sendMLFieldAnalytics(filtered, false);
} else if (fiResults.errors || fiResults.error_code) {
for (const ficode of fallback) {
selections[ficode] = true;
}
if (fiResults.errors) error = fiResults.errors[0].title;
if (fiResults.error_code) error = fiResults.message;
window.lana.log(`ML results error - ${error}`, { tags: 'errorType=info,module=quiz-entry' });
sendMLFieldFiCodesAnalytics(fallback);
sendMLFieldAnalytics(fallback, false);
}

sendMLFieldAnalytics(mlFieldText, true);

if (debug) {
let fiCodes = [];
if (!fiResults.errors && !fiResults.error_code) {
Expand All @@ -223,6 +231,8 @@ const App = ({
fiCodes = fallback.map((result) => result.ficode);
}
// eslint-disable-next-line no-console
console.log('sending ML field text to Adobe Analytics: ', `Filters|${analyticsType}|${mlFieldText}`);
// eslint-disable-next-line no-console
console.log('sending ML field fiCodes to Adobe Analytics: ', `Filters|${analyticsType}|${selectedQuestion?.questions}/interest-${fiCodes.join('-')}`);
}
}
Expand Down
12 changes: 9 additions & 3 deletions libs/blocks/table/table.css
Original file line number Diff line number Diff line change
Expand Up @@ -357,6 +357,10 @@
border-top-right-radius: 0;
}

[dir="rtl"] .table.merch .col-merch .col-merch-content picture {
margin-right: 0;
margin-left: 16px;
}

/* hover */
@media (min-width: 900px) {
Expand Down Expand Up @@ -554,6 +558,7 @@ header.global-navigation {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
margin: 20px 30px 0;
gap: 30px;
}

.filter-wrapper {
Expand All @@ -566,7 +571,7 @@ header.global-navigation {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 160px;
max-width: 146px;
appearance: none;
position: relative;
padding-right: 30px;
Expand All @@ -590,14 +595,15 @@ header.global-navigation {
}
}

@media (max-width: 400px) {
@media (max-width: 480px) {
.table,
.table.merch {
margin: 0 2px;
min-width: 100%;
min-width: 395px;
}

.table.merch .col-merch .col-merch-content {
flex-direction: column;
align-items: initial;
}
}
4 changes: 2 additions & 2 deletions libs/deps/imslib.min.js

Large diffs are not rendered by default.

3 changes: 1 addition & 2 deletions libs/features/personalization/personalization.js
Original file line number Diff line number Diff line change
Expand Up @@ -827,15 +827,14 @@ export async function applyPers(manifests, postLCP = false) {
mep: mepParam,
mepHighlight,
mepButton,
target,
} = Object.fromEntries(PAGE_URL.searchParams);
config.mep = {
handleFragmentCommand,
preview: (mepButton !== 'off' && (config.env?.name !== 'prod' || mepButton)),
override: mepParam ? decodeURIComponent(mepParam) : '',
highlight: (mepHighlight !== undefined && mepHighlight !== 'false'),
mepParam,
targetEnabled: target,
targetEnabled: config.mep?.targetEnabled,
};
}

Expand Down
7 changes: 3 additions & 4 deletions libs/utils/utils.js
Original file line number Diff line number Diff line change
Expand Up @@ -908,6 +908,7 @@ async function checkForPageMods() {
if (!mepEnabled) return;

const config = getConfig();
config.mep = { targetEnabled };
loadLink(
`${config.base}/features/personalization/personalization.js`,
{ as: 'script', rel: 'modulepreload' },
Expand All @@ -918,10 +919,8 @@ async function checkForPageMods() {
await loadMartech({ persEnabled: true, persManifests, targetEnabled });
return;
}
if (!persManifests.length) {
config.mep = { targetEnabled };
return;
}
if (!persManifests.length) return;

loadIms()
.then(() => {
if (window.adobeIMS.isSignedInUser()) loadMartech();
Expand Down
16 changes: 10 additions & 6 deletions test/blocks/modals/modals.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -197,18 +197,22 @@ describe('Modals', () => {

it('shows the modal with a delay, and remembers it was shown on this page', async () => {
window.sessionStorage.removeItem('shown:#delayed-modal');
const el = document.createElement('a');
el.setAttribute('data-modal-hash', '#delayed-modal:delay=1');
expect(delayedModal(el)).to.be.true;
const anchor = document.createElement('a');
anchor.setAttribute('data-modal-path', '/fragments/promos/fragments/cc-all-apps-promo-full-bleed-image');
anchor.setAttribute('data-modal-hash', '#delayed-modal:delay=1');
document.body.appendChild(anchor);
expect(delayedModal(anchor)).to.be.true;
await delay(1000);
expect(el.classList.contains('hide-block')).to.be.true;
const modal = waitForElement('#delayed-modal');
expect(anchor.classList.contains('hide-block')).to.be.true;
const modal = await waitForElement('#delayed-modal');
expect(modal).to.be.not.null;
expect(document.querySelector('#delayed-modal').classList.contains('delayed-modal'));
expect(window.sessionStorage.getItem('shown:#delayed-modal').includes(window.location.pathname)).to.be.true;
// eslint-disable-next-line no-underscore-dangle
expect(window._satellite.track.called).to.be.true;
window.sessionStorage.removeItem('shown:#delayed-modal');
el.remove();
modal.remove();
anchor.remove();
});

it('does not show the modal if it was shown on this page', async () => {
Expand Down
Loading