From 315347c6c80cb9014755075f6a6986cc97b4b65c Mon Sep 17 00:00:00 2001 From: "aem-code-sync[bot]" Date: Wed, 10 Jan 2024 20:15:09 +0000 Subject: [PATCH 1/8] Update feed.xml --- news-and-stories/press-releases/feed.xml | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/news-and-stories/press-releases/feed.xml b/news-and-stories/press-releases/feed.xml index 41981f17..2e3c5aab 100644 --- a/news-and-stories/press-releases/feed.xml +++ b/news-and-stories/press-releases/feed.xml @@ -2,10 +2,18 @@ https://www.volvotrucks.us/news-and-stories/press-releases/ Volvo Trucks USA Press Releases - 2023-12-04T00:00:00.000Z + 2024-01-10T00:00:00.000Z AEM News feed generator (GitHub action) Volvo Trucks USA Press Releases + + <![CDATA[Vanguard Truck Centers Acquires Nacarato Truck Centers, Becoming One of Volvo Trucks’ Largest Dealer Groups | Volvo Trucks USA]]> + https://www.volvotrucks.us/news-and-stories/press-releases/2024/january/vanguard-truck-centers-acquires-nacarato-truck-centers-becoming-one-of-volvo-trucks-largest-dealer-groups/ + + 2024-01-10T00:00:00.000Z + + 2024-01-10T00:00:00.000Z + <![CDATA[Volvo Trucks Expands Certified EV Dealer Network into Arizona, Georgia and North Carolina as Vanguard Truck Centers Adds Five Locations]]> https://www.volvotrucks.us/news-and-stories/press-releases/2023/december/volvo-trucks-expands-certified-ev-dealer-network-into-arizona-georgia-and-north-carolina-as-vanguard-truck-centers-adds-five-locations/ From 87c1567c5147d168fb86a2cd8e901e777863095d Mon Sep 17 00:00:00 2001 From: Syb Wartna Date: Mon, 8 Jan 2024 10:47:25 +0100 Subject: [PATCH 2/8] fix color for section and modal --- common/modal/modal.css | 1 - styles/styles.css | 4 ++-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/common/modal/modal.css b/common/modal/modal.css index abf16302..b3783b4a 100644 --- a/common/modal/modal.css +++ b/common/modal/modal.css @@ -25,7 +25,6 @@ .modal--black { --background-color: var(--c-black); --text-color: var(--c-white); - --color-icon: var(--c-white); } .modal--gray { diff --git a/styles/styles.css b/styles/styles.css index 9d3e0209..ff2aaebf 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -61,6 +61,7 @@ --border-radius: 8px; --section-padding: 40px 0; --section-div-padding: 24px 16px; + --background-color: var(--c-white); /* Form styles */ --input-padding: 16px; @@ -1097,8 +1098,6 @@ main.blue-contract .section.section-with-title p { /* stylelint-disable-next-line no-descending-specificity */ .redesign-v2 .section { - --background-color: var(--c-white); - padding: var(--section-padding); background-color: var(--background-color); scroll-margin-top: calc(var(--nav-height) + var(--inpage-navigation-height)); @@ -1145,6 +1144,7 @@ main.blue-contract .section.section-with-title p { } .section--gray-background { + --text-color: var(--c-main-black); --card-background: var(--c-white); --card-text: var(--c-main-black); --background-color: var(--c-grey-50); From 787e415c9fb2205dbd91f322e8b071b161307aea Mon Sep 17 00:00:00 2001 From: Syb Wartna Date: Mon, 8 Jan 2024 11:58:06 +0100 Subject: [PATCH 3/8] fix unwanted margin in media with tabs --- blocks/v2-media-with-tabs/v2-media-with-tabs.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/blocks/v2-media-with-tabs/v2-media-with-tabs.js b/blocks/v2-media-with-tabs/v2-media-with-tabs.js index ffe573c3..08de84f0 100644 --- a/blocks/v2-media-with-tabs/v2-media-with-tabs.js +++ b/blocks/v2-media-with-tabs/v2-media-with-tabs.js @@ -1,6 +1,7 @@ import { addClassIfChildHasClass, createElement, + removeEmptyTags, unwrapDivs, variantsClassesToBEM, } from '../../scripts/common.js'; @@ -74,4 +75,5 @@ export default function decorate(block) { block.append(imageSection, textSection); unwrapDivs(block); + removeEmptyTags(block); } From c2669bc8142568d34e9a9d658fd8d7e74631d776 Mon Sep 17 00:00:00 2001 From: Syb <133873665+cogniSyb@users.noreply.github.com> Date: Wed, 10 Jan 2024 16:21:00 +0100 Subject: [PATCH 4/8] Key facts alignment incorrect with long titles #325 (#326) fix alignment --- blocks/key-facts/key-facts.css | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/blocks/key-facts/key-facts.css b/blocks/key-facts/key-facts.css index ef32d324..4a71d3d9 100644 --- a/blocks/key-facts/key-facts.css +++ b/blocks/key-facts/key-facts.css @@ -44,20 +44,34 @@ } .key-facts .key-facts__main-text-wrapper--small { + flex-direction: column; font-size: var(--f-heading-5-font-size); letter-spacing: var(--f-heading-5-letter-spacing); line-height: var(--f-heading-5-line-height); } +.key-facts .key-facts__main-text-wrapper--small br { + content: ''; + display: none; +} + .key-facts__main-text-wrapper .key-facts__main-text { display: flex; font-family: var(--ff-volvo-novum); } +.key-facts__main-text + .key-facts__main-text--small::before { + content: '\00a0'; +} + .key-facts__main-text--small { font-size: 0.75em; } +.key-facts__main-text-wrapper--small .key-facts__main-text--small { + width: 100%; +} + .key-facts__main-text--extra-small { font-size: 0.5em; } From c74eca9675029c9022a260edc6d74b46d1c9afad Mon Sep 17 00:00:00 2001 From: Syb <133873665+cogniSyb@users.noreply.github.com> Date: Tue, 16 Jan 2024 10:45:58 +0100 Subject: [PATCH 5/8] How to display Digital Reveal Cookie management message in Modal video #313 (#318) * refactor low resolution banner * refactor check of cookie setting * add banner when no fallback video is present * add background image, change color for banner, set document cookie on okay button * add rounded corners to video * split livestream code from embed --------- Co-authored-by: Lakshmishri --- blocks/embed/embed.css | 33 ++++- blocks/embed/embed.js | 10 +- .../v2-livestream-embed.css | 63 ++++++++++ .../v2-livestream-embed.js | 113 ++++++++++++++++++ common/modal/modal.css | 17 +++ common/modal/modal.js | 6 +- placeholder.json | 16 ++- scripts/common.js | 8 +- scripts/delayed.js | 42 ++++++- scripts/video-helper.js | 45 +++++-- styles/styles.css | 27 +++++ test/scripts/common.test.js | 10 +- test/scripts/video-helper.test.js | 2 +- 13 files changed, 366 insertions(+), 26 deletions(-) create mode 100644 blocks/v2-livestream-embed/v2-livestream-embed.css create mode 100644 blocks/v2-livestream-embed/v2-livestream-embed.js diff --git a/blocks/embed/embed.css b/blocks/embed/embed.css index 346beb49..15271bfa 100644 --- a/blocks/embed/embed.css +++ b/blocks/embed/embed.css @@ -11,12 +11,43 @@ .embed-video-element { aspect-ratio: 16/9; width: 100%; + display: block; } .embed .video-icon-wrapper { pointer-events: none; } +.embed .cookie-message { + aspect-ratio: 16/9; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 16px; +} + +.embed .cookie-message__title, +.embed .cookie-message__text { + max-width: var(--text-block-max-width); + margin: 0 auto; + text-align: center; +} + +.embed .cookie-message__title { + font: var(--f-heading-5-font-size)/var(--f-heading-5-line-height) var(--ff-volvo-novum-medium); + letter-spacing: var(--f-heading-5-letter-spacing); +} + +.embed .cookie-message__text { + font: var(--f-body-font-size)/var(--f-body-line-height) var(--font-family-body); +} + +.embed .cookie-message__text a { + color: inherit; + text-decoration: underline; +} + @media screen and (min-width: 768px) { .embed-video { width: 726px; @@ -35,4 +66,4 @@ .embed.embed-full-width .embed-video { width: 100%; } -} \ No newline at end of file +} diff --git a/blocks/embed/embed.js b/blocks/embed/embed.js index 3daca21d..c5c86a54 100644 --- a/blocks/embed/embed.js +++ b/blocks/embed/embed.js @@ -1,5 +1,6 @@ import { - selectVideoLink, addPlayIcon, showVideoModal, isLowResolutionVideoUrl, + selectVideoLink, addPlayIcon, + showVideoModal, isLowResolutionVideoUrl, createLowResolutionBanner, createIframe, } from '../../scripts/video-helper.js'; @@ -13,8 +14,13 @@ export default function decorate(block) { block.classList.remove('loop', 'autoplay', 'full-width'); videoWrapper.classList.add('embed-video'); + const preferredType = (() => { + if (isFullWidth) return 'local'; + return 'auto'; + })(); + const links = block.querySelectorAll('a'); - const selectedLink = selectVideoLink(links, isFullWidth ? 'local' : 'auto'); + const selectedLink = selectVideoLink(links, preferredType); const video = document.createElement('video'); const source = document.createElement('source'); diff --git a/blocks/v2-livestream-embed/v2-livestream-embed.css b/blocks/v2-livestream-embed/v2-livestream-embed.css new file mode 100644 index 00000000..e31a880b --- /dev/null +++ b/blocks/v2-livestream-embed/v2-livestream-embed.css @@ -0,0 +1,63 @@ +.v2-livestream-embed { + border-radius: var(--border-radius); + aspect-ratio: 16/9; + width: 100%; +} + +.v2-livestream-embed iframe { + display: block; +} + +.v2-livestream-embed .cookie-message { + aspect-ratio: 16/9; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 16px; +} + +.v2-livestream-embed .cookie-message__title, +.v2-livestream-embed .cookie-message__text { + max-width: var(--text-block-max-width); + margin: 0 auto; + text-align: center; +} + +.v2-livestream-embed .cookie-message__title { + font: var(--f-heading-5-font-size)/var(--f-heading-5-line-height) var(--ff-volvo-novum-medium); + letter-spacing: var(--f-heading-5-letter-spacing); +} + +.v2-livestream-embed .cookie-message__text { + font: var(--f-body-font-size)/var(--f-body-line-height) var(--font-family-body); +} + +.v2-livestream-embed .cookie-message__text a { + color: inherit; + text-decoration: underline; +} + +.v2-livestream-embed .cookie-message__text a:hover { + color: var(--c-grey-300); +} + +.v2-livestream-embed .cookie-message__button-container { + margin-top: 16px; + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 16px; +} + +@media screen and (min-width: 1200px) { + .v2-livestream-embed .cookie-message__title { + font-size: var(--f-heading-4-font-size); + line-height: var(--f-heading-4-line-height); + } + + .v2-livestream-embed .cookie-message__text { + font-size: var(--f-body-2-font-size); + line-height: var(--f-body-2-line-height); + } +} diff --git a/blocks/v2-livestream-embed/v2-livestream-embed.js b/blocks/v2-livestream-embed/v2-livestream-embed.js new file mode 100644 index 00000000..13835558 --- /dev/null +++ b/blocks/v2-livestream-embed/v2-livestream-embed.js @@ -0,0 +1,113 @@ +/* eslint-disable no-console */ +/* eslint-disable no-unused-vars */ +/* eslint-disable max-len */ +import { loadScript } from '../../scripts/lib-franklin.js'; +import { createElement, getTextLabel, isExternalVideoAllowed } from '../../scripts/common.js'; +import { updateCookieValue } from '../../scripts/delayed.js'; +import { hideModal } from '../../common/modal/modal.js'; + +let player; + +function onPlayerReady(event) { + console.info('Event: onPlayerReady'); + event.target.playVideo(); +} + +function onPlayerError(event) { + console.warn('Event: onPlayerError'); + console.warn(event.data); +} + +function onPlayerAutoplayBlocked(event) { + console.warn('Event: onPlayerAutoplayBlocked'); + console.warn(event.data); +} + +export function playVideo() { + if (player && player.playVideo) { + player.playVideo(); + } +} + +export default function decorate(block) { + loadScript('https://www.youtube.com/iframe_api'); + + let [videoLink] = block.querySelectorAll('a'); + const [, videoId] = videoLink.getAttribute('href').split('/embed/'); + const [videoCode] = videoId.split('?'); + videoLink = videoCode; + + console.info(`video id: ${videoLink}`); + + if (!videoLink) { + block.innerHTML = ''; + /* eslint-disable-next-line no-console */ + console.warn('V2 Livestream Embed block: There is no video link. Please check the provided URL.'); + return; + } + + // eslint-disable-next-line func-names + window.onYouTubeIframeAPIReady = function () { + setTimeout(() => { + // eslint-disable-next-line no-undef + player = new YT.Player('livestream', { + events: { + onReady: onPlayerReady, + onError: onPlayerError, + onAutoplayBlocked: onPlayerAutoplayBlocked, + }, + }); + }, 3000); + }; + + if (!isExternalVideoAllowed()) { + const img = block.querySelector('picture img'); + block.innerHTML = ''; + + const cookieMsgContainer = createElement('div', { + classes: 'cookie-message', + }); + cookieMsgContainer.style.background = `linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.80) 100%), url(${img.src}) center / cover no-repeat`; + + const cookieMessage = document.createRange().createContextualFragment(` +

${getTextLabel('single video message title')}

+ ${getTextLabel('single video message text')} +
+ + +
+ `); + + cookieMsgContainer.append(cookieMessage); + block.append(cookieMsgContainer); + + block.querySelector('.cookie-message__button-container .primary')?.addEventListener('click', () => { + const domain = 'localhost'; + const path = '/'; // assuming root path + const expirationDate = new Date(); + expirationDate.setFullYear(expirationDate.getFullYear() + 1); // 1 year from now + const sameSite = 'Lax'; + + console.log('updatecookie'); + + updateCookieValue('OptanonConsent=', 'C0005:0', 'C0005:1', domain, path, expirationDate, sameSite); + }); + + block.querySelector('.cookie-message__button-container .secondary')?.addEventListener('click', () => { + hideModal(); + }); + + return; + } + + const iframeYT = document.createRange().createContextualFragment(` + + `); + + block.innerHTML = ''; + + block.append(...iframeYT.childNodes); +} diff --git a/common/modal/modal.css b/common/modal/modal.css index b3783b4a..07f40484 100644 --- a/common/modal/modal.css +++ b/common/modal/modal.css @@ -236,3 +236,20 @@ width: 100%; } } + +.modal-reveal { + display: flex; + flex-direction: column; + justify-content: center; +} + +/* stylelint-disable-next-line no-descending-specificity */ +.modal-reveal .modal-content { + height: auto; + aspect-ratio: auto; +} + +.modal-reveal .section > div { + padding-top: 0; + padding-bottom: 0; +} diff --git a/common/modal/modal.js b/common/modal/modal.js index a4d0a4cb..23343571 100644 --- a/common/modal/modal.js +++ b/common/modal/modal.js @@ -35,8 +35,10 @@ const createModal = () => { modalBackground.setAttribute('role', 'dialog'); modalBackground.addEventListener('click', () => { - // eslint-disable-next-line no-use-before-define - hideModal(); + if (!modalBackground.classList.contains('modal-reveal')) { + // eslint-disable-next-line no-use-before-define + hideModal(); + } }); const keyDownAction = (event) => { diff --git a/placeholder.json b/placeholder.json index 180252bb..5000b7f2 100644 --- a/placeholder.json +++ b/placeholder.json @@ -228,8 +228,20 @@ "Text": "Model year" }, { - "Key": "go to top", - "Text": "Go to the top of the page" + "Key": "single video message title", + "Text": "Enable cookies to view the reveal in high resolution?" + }, + { + "Key": "single video message text", + "Text": "

Our media viewer uses social media cookies and/or similar technologies set by third-party services, as outlined in our Cookie Notice. We and our digital partners use cookies to improve your browsing experience, save your preferences and provide us with information on how you use our website.

You can click “Accept All Cookies” to view the reveal and to agree to the storing of cookies on your device and to our use of cookies. You can also configure or reject cookies by clicking on “Cookie Settings” or “Reject All.” Please note that rejecting cookies means that you will not be able to view the reveal. Please also note that selecting “Reject All” still implies that necessary cookies will remain.

" + }, + { + "Key": "single video message button", + "Text": "Accept All Cookies" + }, + { + "Key": "single video message button deny", + "Text": "Reject All" } ], ":type": "sheet" diff --git a/scripts/common.js b/scripts/common.js index 77e30b9a..adf6a36b 100644 --- a/scripts/common.js +++ b/scripts/common.js @@ -316,13 +316,17 @@ export const slugify = (text) => ( * Check if one trust group is checked. * @param {String} groupName the one trust croup like: C0002 */ -export function checkOneTruckGroup(groupName) { +export function checkOneTrustGroup(groupName) { const oneTrustCookie = decodeURIComponent(document.cookie.split(';').find((cookie) => cookie.trim().startsWith('OptanonConsent='))); return oneTrustCookie.includes(`${groupName}:1`); } export function isEloquaFormAllowed() { - return checkOneTruckGroup('C0004'); + return checkOneTrustGroup('C0004'); +} + +export function isExternalVideoAllowed() { + return checkOneTrustGroup('C0005'); } /* diff --git a/scripts/delayed.js b/scripts/delayed.js index ad4168a3..992f946f 100644 --- a/scripts/delayed.js +++ b/scripts/delayed.js @@ -1,3 +1,4 @@ +// eslint-disable no-console // eslint-disable-next-line import/no-cycle import { loadScript, sampleRUM } from './lib-franklin.js'; @@ -14,6 +15,40 @@ const cookieSetting = decodeURIComponent(document.cookie.split(';') const isPerformanceAllowed = cookieSetting.includes(COOKIES.performance); const isSocialAllowed = cookieSetting.includes(COOKIES.social); +export function updateCookieValue(cookieName, oldValue, newValue, domain, path, expires, sameSite) { + let cookies = decodeURIComponent(document.cookie).split(';'); + console.info(cookies); + + for (let i = 0; i < cookies.length; i++) { + let cookie = cookies[i].trim(); + if (cookie.startsWith(cookieName)) { + let cookieValue = cookie.substring(cookieName.length); + console.info(cookieValue); + if (cookieValue.includes(oldValue)) { + console.info(oldValue); + let updatedValue = encodeURIComponent(cookieValue.replace(oldValue, newValue)); + console.info(updatedValue); + let updatedCookie = cookieName + updatedValue; + console.info(updatedCookie); + if (domain) { + updatedCookie += `; domain=${domain}`; + } + if (path) { + updatedCookie += `; path=${path}`; + } + if (expires) { + updatedCookie += `; expires=${expires.toUTCString()}`; + } + if (sameSite) { + updatedCookie += `; SameSite=${sameSite}`; + } + document.cookie = updatedCookie; + } + break; + } + } +} + if (isPerformanceAllowed) { loadGoogleTagManager(); loadHotjar(); @@ -57,9 +92,14 @@ if (!window.location.pathname.includes('srcdoc') return s1 === s2; } + const isSingleVideo = document.cookie.split('; ').reduce((r, v) => { + const parts = v.split('='); + return parts[0] === 'isSingleVideo' ? decodeURIComponent(parts[1]) : r; + }, ''); + window.OneTrust.OnConsentChanged(() => { // reloading the page only when the active group has changed - if (!isSameGroups(currentOnetrustActiveGroups, window.OnetrustActiveGroups)) { + if (!isSameGroups(currentOnetrustActiveGroups, window.OnetrustActiveGroups) && isSingleVideo !== 'true') { window.location.reload(); } }); diff --git a/scripts/video-helper.js b/scripts/video-helper.js index ec4cb763..ceb55272 100644 --- a/scripts/video-helper.js +++ b/scripts/video-helper.js @@ -1,5 +1,5 @@ // eslint-disable-next-line import/no-cycle -import { createElement, getTextLabel } from './common.js'; +import { createElement, getTextLabel, isExternalVideoAllowed } from './common.js'; /* video helpers */ export function isLowResolutionVideoUrl(url) { @@ -13,12 +13,13 @@ export function isVideoLink(link) { export function selectVideoLink(links, preferredType) { const linksList = [...links]; - const optanonConsentCookieValue = decodeURIComponent(document.cookie.split(';').find((cookie) => cookie.trim().startsWith('OptanonConsent='))); - const cookieConsentForExternalVideos = optanonConsentCookieValue.includes('C0005:1'); - const shouldUseYouTubeLinks = cookieConsentForExternalVideos && preferredType !== 'local'; + const shouldUseYouTubeLinks = isExternalVideoAllowed() && preferredType !== 'local'; const youTubeLink = linksList.find((link) => link.getAttribute('href').includes('youtube.com/embed/')); const localMediaLink = linksList.find((link) => link.getAttribute('href').split('?')[0].endsWith('.mp4')); + if (preferredType === 'singleVideo' && youTubeLink) { + return youTubeLink; + } if (shouldUseYouTubeLinks && youTubeLink) { return youTubeLink; } @@ -28,13 +29,30 @@ export function selectVideoLink(links, preferredType) { export function createLowResolutionBanner() { const lowResolutionMessage = getTextLabel('Low resolution video message'); const changeCookieSettings = getTextLabel('Change cookie settings'); + let banner; - const banner = document.createElement('div'); - banner.classList.add('low-resolution-banner'); - banner.innerHTML = `${lowResolutionMessage} `; - banner.querySelector('button').addEventListener('click', () => { - window.OneTrust.ToggleInfoDisplay(); - }); + if (document.documentElement.classList.contains('redesign-v2')) { + banner = createElement('div', { classes: 'low-resolution-banner' }); + const bannerText = createElement('p'); + const bannerButton = createElement('button', { classes: ['button', 'secondary', 'dark'] }); + + bannerText.textContent = lowResolutionMessage; + bannerButton.textContent = changeCookieSettings; + + banner.appendChild(bannerText); + banner.appendChild(bannerButton); + + bannerButton.addEventListener('click', () => { + window.OneTrust.ToggleInfoDisplay(); + }); + } else { + banner = document.createElement('div'); + banner.classList.add('low-resolution-banner'); + banner.innerHTML = `${lowResolutionMessage} `; + banner.querySelector('button').addEventListener('click', () => { + window.OneTrust.ToggleInfoDisplay(); + }); + } return banner; } @@ -347,3 +365,10 @@ export const addMuteControls = (section) => { controls.addEventListener('click', () => toggleMute(video)); }; + +export function loadYouTubeIframeAPI() { + const tag = document.createElement('script'); + tag.src = 'https://www.youtube.com/iframe_api'; + const firstScriptTag = document.getElementsByTagName('script')[0]; + firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); +} diff --git a/styles/styles.css b/styles/styles.css index ff2aaebf..a3095c08 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -874,6 +874,33 @@ a.button.text-link-with-video::after { font-size: 18px; } +.redesign-v2 .low-resolution-banner { + margin-bottom: 16px; + padding: 16px; + background: var(--c-grey-4); + text-align: left; + display: flex; + flex-wrap: wrap; + justify-content: space-between; + align-items: center; + gap: 16px; + color: var(--c-white); +} + +.redesign-v2 .low-resolution-banner p { + margin: 0; +} + +.redesign-v2 .low-resolution-banner .button.secondary { + margin-left: auto; +} + +@media screen and (min-width: 1200px) { + .redesign-v2 .low-resolution-banner { + padding: 16px 32px; + } +} + /* pagination */ .pager .pagination ol li .last::before { font-family: var(--ff-fontawesome); diff --git a/test/scripts/common.test.js b/test/scripts/common.test.js index 4b4ebe1f..8e5eee33 100644 --- a/test/scripts/common.test.js +++ b/test/scripts/common.test.js @@ -206,12 +206,12 @@ describe('slugify', () => { }); }); -describe('checkOneTruckGroup', () => { +describe('checkOneTrustGroup', () => { it('should return true when the group is present with value 1', () => { // Simulate a cookie with the group 'group1' set to 1 document.cookie = 'OptanonConsent=group1:1;'; - const result = commonScript.checkOneTruckGroup('group1'); + const result = commonScript.checkOneTrustGroup('group1'); expect(result).to.be.true; }); @@ -219,7 +219,7 @@ describe('checkOneTruckGroup', () => { // Simulate a cookie with the group 'group2' set to 0 (or any value other than 1) document.cookie = 'OptanonConsent=group2:0;'; - const result = commonScript.checkOneTruckGroup('group2'); + const result = commonScript.checkOneTrustGroup('group2'); expect(result).to.be.false; }); @@ -227,7 +227,7 @@ describe('checkOneTruckGroup', () => { // Simulate an empty cookie document.cookie = ''; - const result = commonScript.checkOneTruckGroup('group3'); + const result = commonScript.checkOneTrustGroup('group3'); expect(result).to.be.false; }); @@ -235,7 +235,7 @@ describe('checkOneTruckGroup', () => { // Simulate a cookie with a URL-encoded group name document.cookie = 'OptanonConsent=group%204:1;'; - const result = commonScript.checkOneTruckGroup('group 4'); + const result = commonScript.checkOneTrustGroup('group 4'); expect(result).to.be.true; }); }); diff --git a/test/scripts/video-helper.test.js b/test/scripts/video-helper.test.js index 2e8957ad..5866b751 100644 --- a/test/scripts/video-helper.test.js +++ b/test/scripts/video-helper.test.js @@ -88,10 +88,10 @@ describe('selectVideoLink', () => { youtubeLink = commonScript.createElement('a', { props: { href: 'https://www.youtube.com/embed/example-video' } }); mp4Link = commonScript.createElement('a', { props: { href: 'https://example.com/example-video.mp4' } }); otherLink = commonScript.createElement('a', { props: { href: 'https://example.com/other-link' } }); - document.cookie = 'OptanonConsent=C0005:1'; }); it('should return YouTube link when preferredType is not "local" and YouTube link is available', () => { + document.cookie = 'OptanonConsent=C0005:1'; const links = [youtubeLink, mp4Link]; const result = videoHelper.selectVideoLink(links, 'external'); expect(result).to.equal(youtubeLink); From 38ae2eabdffabd93d1e5d3ce126c4f6408086835 Mon Sep 17 00:00:00 2001 From: Syb <133873665+cogniSyb@users.noreply.github.com> Date: Tue, 16 Jan 2024 11:16:52 +0100 Subject: [PATCH 6/8] Fix config for production --- blocks/v2-livestream-embed/v2-livestream-embed.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/v2-livestream-embed/v2-livestream-embed.js b/blocks/v2-livestream-embed/v2-livestream-embed.js index 13835558..df3ba2b1 100644 --- a/blocks/v2-livestream-embed/v2-livestream-embed.js +++ b/blocks/v2-livestream-embed/v2-livestream-embed.js @@ -82,7 +82,7 @@ export default function decorate(block) { block.append(cookieMsgContainer); block.querySelector('.cookie-message__button-container .primary')?.addEventListener('click', () => { - const domain = 'localhost'; + const domain = '.volvotrucks.us'; const path = '/'; // assuming root path const expirationDate = new Date(); expirationDate.setFullYear(expirationDate.getFullYear() + 1); // 1 year from now From 68b0316ac52b60cd9ce7fad3ee9d85df0d3b0451 Mon Sep 17 00:00:00 2001 From: Syb <133873665+cogniSyb@users.noreply.github.com> Date: Tue, 16 Jan 2024 11:52:01 +0100 Subject: [PATCH 7/8] Update delayed.js --- scripts/delayed.js | 6 ------ 1 file changed, 6 deletions(-) diff --git a/scripts/delayed.js b/scripts/delayed.js index 992f946f..f9c0580b 100644 --- a/scripts/delayed.js +++ b/scripts/delayed.js @@ -1,4 +1,3 @@ -// eslint-disable no-console // eslint-disable-next-line import/no-cycle import { loadScript, sampleRUM } from './lib-franklin.js'; @@ -17,19 +16,14 @@ const isSocialAllowed = cookieSetting.includes(COOKIES.social); export function updateCookieValue(cookieName, oldValue, newValue, domain, path, expires, sameSite) { let cookies = decodeURIComponent(document.cookie).split(';'); - console.info(cookies); for (let i = 0; i < cookies.length; i++) { let cookie = cookies[i].trim(); if (cookie.startsWith(cookieName)) { let cookieValue = cookie.substring(cookieName.length); - console.info(cookieValue); if (cookieValue.includes(oldValue)) { - console.info(oldValue); let updatedValue = encodeURIComponent(cookieValue.replace(oldValue, newValue)); - console.info(updatedValue); let updatedCookie = cookieName + updatedValue; - console.info(updatedCookie); if (domain) { updatedCookie += `; domain=${domain}`; } From d57f71c534f40c20c16c3c6e53a1c15ec5624154 Mon Sep 17 00:00:00 2001 From: Syb <133873665+cogniSyb@users.noreply.github.com> Date: Tue, 16 Jan 2024 11:54:32 +0100 Subject: [PATCH 8/8] Add video after accepting cookies --- .../v2-livestream-embed.js | 38 +++++++++---------- 1 file changed, 18 insertions(+), 20 deletions(-) diff --git a/blocks/v2-livestream-embed/v2-livestream-embed.js b/blocks/v2-livestream-embed/v2-livestream-embed.js index df3ba2b1..0d12e72e 100644 --- a/blocks/v2-livestream-embed/v2-livestream-embed.js +++ b/blocks/v2-livestream-embed/v2-livestream-embed.js @@ -1,6 +1,4 @@ -/* eslint-disable no-console */ /* eslint-disable no-unused-vars */ -/* eslint-disable max-len */ import { loadScript } from '../../scripts/lib-franklin.js'; import { createElement, getTextLabel, isExternalVideoAllowed } from '../../scripts/common.js'; import { updateCookieValue } from '../../scripts/delayed.js'; @@ -9,17 +7,16 @@ import { hideModal } from '../../common/modal/modal.js'; let player; function onPlayerReady(event) { - console.info('Event: onPlayerReady'); event.target.playVideo(); } function onPlayerError(event) { - console.warn('Event: onPlayerError'); + /* eslint-disable-next-line no-console */ console.warn(event.data); } function onPlayerAutoplayBlocked(event) { - console.warn('Event: onPlayerAutoplayBlocked'); + /* eslint-disable-next-line no-console */ console.warn(event.data); } @@ -29,6 +26,19 @@ export function playVideo() { } } +function addVideo(block, videoLink) { + const iframeYT = document.createRange().createContextualFragment(` + + `); + + block.innerHTML = ''; + + block.append(...iframeYT.childNodes); +} + export default function decorate(block) { loadScript('https://www.youtube.com/iframe_api'); @@ -37,8 +47,6 @@ export default function decorate(block) { const [videoCode] = videoId.split('?'); videoLink = videoCode; - console.info(`video id: ${videoLink}`); - if (!videoLink) { block.innerHTML = ''; /* eslint-disable-next-line no-console */ @@ -88,9 +96,8 @@ export default function decorate(block) { expirationDate.setFullYear(expirationDate.getFullYear() + 1); // 1 year from now const sameSite = 'Lax'; - console.log('updatecookie'); - updateCookieValue('OptanonConsent=', 'C0005:0', 'C0005:1', domain, path, expirationDate, sameSite); + addVideo(block, videoLink); }); block.querySelector('.cookie-message__button-container .secondary')?.addEventListener('click', () => { @@ -98,16 +105,7 @@ export default function decorate(block) { }); return; + } else { + addVideo(block, videoLink); } - - const iframeYT = document.createRange().createContextualFragment(` - - `); - - block.innerHTML = ''; - - block.append(...iframeYT.childNodes); }