Rockstar2025 - DO NOT MERGE #413

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

Draft

jvaldas wants to merge 33 commits into main from rockstar2025

blocks/header/header.css

-Original file line number
+Diff line change
@@ Expand Up / @@ -50,7 +50,7 @@ header nav .nav-brand p { @@
     }
     header nav .nav-brand .icon, header nav .nav-brand .icon svg {
-      width: 150px;
+      width: 110px;
       height: 40px;
     }
@@ Expand Down @@

blocks/header/header.js

-Original file line number
+Diff line change
@@ -1,5 +1,7 @@
     import { decorateIcons, getMetadata, getLanguagePath } from '../../scripts/lib-franklin.js';
     import { addChevronToButtons } from '../../scripts/scripts.js';
+    import initLogIn from '../../scripts/login.js';
+    import { getImageURL } from '../../scripts/personalisation-helpers.js';
     const mobileBreakpoint = 900;
     let globalWindowWidth = window.innerWidth;
@@ Expand Down Expand Up / @@ -106,6 +108,8 @@ @@
       const langSwitch = header.querySelector('.nav-tools ul');
       const langLinks = langSwitch.querySelectorAll('li:not(:last-of-type) a');
+      initLogIn(langSwitch.querySelector('li:last-of-type a'));
       const defaultLanguage = 'en';
       const currentLang = document.documentElement.lang;
       const isInDefaultLang = currentLang === defaultLanguage;
@@ Expand Down Expand Up / @@ -139,13 +143,24 @@ @@
       // fetch nav content
       const resp = await fetch(`${getLanguagePath()}${getNavPath()}.plain.html`);
       if (resp.ok) {
-        const html = await resp.text();
+        let html = await resp.text();
         const isCampaignTemplate = document.querySelector('meta[content="campaign"]');
         // decorate nav DOM
         const nav = document.createElement('nav');
+        if (window.personalizationData?.content?.profileImageURL) {
+          const classes = 'icon icon-netcentric-logo icon-decorated personalized';
+          const url = getImageURL(window.personalizationData.content.profileImageURL);
+          const altText = window.personalizationData.content?.firstName || 'Netcentric logo';
+          html = html.replace('<span class="icon icon-netcentric-logo"></span>', `
+            <span class="icon icon-netcentric-logo icon-decorated personalized">
+                <img src="${url}" alt="${altText}" class="${classes}" />
+            </span>
+          `);
+        }
         nav.innerHTML = html;
         const classes = isCampaignTemplate ? ['brand'] : ['brand', 'sections', 'search', 'tools'];
         classes.forEach((e, j) => {
           const section = nav.children[j];
@@ Expand Down @@

blocks/personalization-card/personalization-card.css

-Original file line number
+Diff line change
@@ -0,0 +1,36 @@
+    .personalization-card {
+        width: var(--section-width);
+        margin: 0 auto;
+        padding: 28px 0;
+        margin-block-end: 30px;
+        .card-offer {
+            padding-inline: 20px;
+            @media (min-width: 900px) {
+                display: flex;
+                column-gap: 20px;
+            }
+        }
+        img {
+            @media (min-width: 900px) {
+                width: 40%;
+            }
+        }
+        h1 {
+            color: inherit;
+            margin-block: 0;
+        }
+    }
+    .personalization-card-wrapper {
+        background-color: var(--c-dark-plum);
+        margin-inline: 0 !important;
+        width: 100% !important;
+    }
+    .personalization-card-container {
+        padding: 0 !important;
+    }

blocks/personalization-card/personalization-card.js

-Original file line number
+Diff line change
@@ -0,0 +1,46 @@
+    import { isValidJSON } from '../../scripts/personalisation-helpers.js';
+    import { addChevronToButtons } from '../../scripts/scripts.js';
+    function createCardOffer(offer) {
+      const offerElement = document.createElement('div');
+      const title = offer.title?.content ? `<h1>${offer.title?.content}</h1>` : '';
+      const text = offer.body?.content ? `<p>${offer.body?.content}</p>` : '';
+      const button = offer.buttons[0]?.text?.content ? `<p class="button-container"><a href="#" class="button primary">${offer.buttons[0]?.text?.content}</a></p>` : '';
+      const image = offer.image?.url ? `<img src="${offer.image?.url}" alt="${offer.image?.alt}" />` : '';
+      offerElement.className = 'section dark-plum card-offer';
+      offerElement.innerHTML = `
+        ${image}
+        <div class="offer-details">
+          ${title}
+          ${text}
+          ${button}
+        </div>
+      `;
+      return offerElement;
+    }
+    function handleOffers(block, offer) {
+      const cardOffer = createCardOffer(offer);
+      addChevronToButtons(block);
+      block.append(cardOffer);
+    }
+    export default function decorate(block) {
+      const content = block.textContent.trim();
+      const editedContent = content.replace('Personalization Card:', '').trim();
+      if (!isValidJSON(editedContent)) {
+        block.parentElement.remove();
+        return;
+      }
+      const data = JSON.parse(editedContent);
+      block.children[0].remove();
+      data.forEach((offer) => {
+        if (Array.isArray(offer.content)) {
+          offer.content.forEach((subOffer) => {
+            handleOffers(block, subOffer);
+          });
+        } else {
+          handleOffers(block, offer.content);
+        }
+      });
+    }

blocks/personalization-cbe/personalization-cbe.css

Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		.personalization-cbe {

		}

blocks/personalization-cbe/personalization-cbe.js

-Original file line number
+Diff line change
@@ -0,0 +1,13 @@
+    import { isValidJSON } from '../../scripts/personalisation-helpers.js';
+    export default function decorate(block) {
+      const content = block.textContent.trim();
+      const editedContent = content.replace('Personalization CBE:', '').trim();
+      if (!isValidJSON(editedContent)) {
+        block.parentElement.remove();
+        return;
+      }
+      const data = JSON.parse(editedContent);
+      block.children[0].remove();
+      window.personalizationData = {...data[0]};
+    }

blocks/personalization-ed/personalization-ed.css

-Original file line number
+Diff line change
@@ -0,0 +1,79 @@
+    .personalization-ed {
+        display: grid;
+        grid-template-columns: 1fr;
+        column-gap: 20px;
+        row-gap: 40px;
+        margin-block-end: 80px;
+        > *:first-child {
+            .img-wrap {
+                position: relative;
+            }
+            h2 {
+                font-size: 38px;
+            }
+            p {
+                font-size: 30px;
+            }
+            @media (min-width: 900px) {
+                grid-column: span 2;
+                .img-mask {
+                    position: absolute;
+                    top: 0;
+                    left: auto;
+                    width: 100%;
+                    height: 100%;
+                    background-color: #000;
+                    opacity: 0.4;
+                }
+                .offer-details {
+                    position: absolute;
+                    top: 40%;
+                    z-index: 2;
+                    left: 20px;
+                }
+                h2, p {
+                    color: #fff;
+                    font-weight: bold;
+                    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
+                }
+            }
+            @media (min-width: 1200px) {
+                .offer-details {
+                    width: 65%;
+                }
+            }
+        }
+        > *:not(:first-child) {
+            grid-column: span 1;
+        }
+        > *:only-child {
+            grid-column: span 2;
+        }
+        @media (min-width: 900px) {
+            grid-template-columns: 1fr 1fr;
+        }
+        .ed-offer {
+            position: relative;
+            margin-inline: 20px;
+            h2 {
+                margin-block: 0;
+            }
+        }
+        img {
+            display: block;
+        }
+    }

blocks/personalization-ed/personalization-ed.js

-Original file line number
+Diff line change
@@ -0,0 +1,52 @@
+    import { isValidJSON, getImageURL, getCookie } from '../../scripts/personalisation-helpers.js';
+    import { createOptimizedPicture } from '../../scripts/lib-franklin.js';
+    function createEdOffer(offer, index) {
+      const offerElement = document.createElement('div');
+      const imageSrc = offer.imageURL ? getImageURL(offer.imageURL) : '/insights/2023/12/media_1db1f637bcc9a28245d76086f2d141781cbcc080d.png?width=2000&format=webply&optimize=medium';
+      const subject = offer.subject ? `<p>${offer.subject}</p>` : '';
+      const button = offer.buttonText ? `<p class="button-container"><a href="#" class="button primary">${offer.buttonText}</a></p>` : '';
+      const isAutenticated = getCookie('ncUser');
+      const imgMask = isAutenticated ? '<div class="img-mask"></div>' : '';
+      const imageLoading = !isAutenticated && index === 0;
+      const offerPicture = createOptimizedPicture(imageSrc, offer.offerName, imageLoading, [{ media: '(min-width: 900px)', width: '2000' }, { width: '1000' }]);
+      offerElement.classList.add('ed-offer');
+      offerElement.innerHTML = `
+        <div class="img-wrapper">
+            ${offerPicture.outerHTML}
+            ${imgMask}
+        </div>
+        <div class="offer-details">
+          ${subject}
+          <h2>${offer.text}</h2>
+          ${button}
+        </div>
+      `;
+      return offerElement;
+    }
+    function handleOffers(block, offer, index) {
+      const edOffer = createEdOffer(offer, index);
+      block.append(edOffer);
+    }
+    export default function decorate(block) {
+      const content = block.textContent.trim();
+      const editedContent = content.replace('Personalization ED:', '').trim();
+      if (!isValidJSON(editedContent)) {
+        block.parentElement.remove();
+        return;
+      }
+      const data = JSON.parse(editedContent);
+      block.children[0].remove();
+      data.forEach((offer, index) => {
+        if (Array.isArray(offer.content)) {
+          offer.content.forEach((subOffer, subIndex) => {
+            handleOffers(block, subOffer, subIndex);
+          });
+        } else {
+          handleOffers(block, offer.content, index);
+        }
+      });
+    }

icons/netcentric-logo.svg

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Rockstar2025 - DO NOT MERGE #413

Uh oh!

Diff view

Diff view

There are no files selected for viewing

GitHub Actions / build

GitHub Actions / build

GitHub Actions / build

GitHub Actions / build

GitHub Actions / build

GitHub Actions / build

GitHub Actions / build

Uh oh!

Rockstar2025 - DO NOT MERGE #413

Are you sure you want to change the base?

Uh oh!

Rockstar2025 - DO NOT MERGE #413

Uh oh!

Uh oh!

Diff view

Diff view

There are no files selected for viewing

GitHub Actions / build

GitHub Actions / build

GitHub Actions / build

GitHub Actions / build

GitHub Actions / build

GitHub Actions / build

GitHub Actions / build

Uh oh!