diff --git a/express/scripts/gnav.js b/express/scripts/gnav.js index 8d97318f..461b4caf 100644 --- a/express/scripts/gnav.js +++ b/express/scripts/gnav.js @@ -287,9 +287,9 @@ if (!window.hlx || window.hlx.gnav) { await loadIMS(); loadFEDS(); setTimeout(() => { - import('./google-yolo.js').then((mod) => { - mod.default(); - }); + // import('./google-yolo.js').then((mod) => { + // mod.default(); + // }); }, 4000); } /* Core Web Vitals RUM collection */ diff --git a/express/scripts/google-yolo.js b/express/scripts/google-yolo.js deleted file mode 100644 index c5dfe7f5..00000000 --- a/express/scripts/google-yolo.js +++ /dev/null @@ -1,96 +0,0 @@ -import { getLibs } from './utils.js'; -import BlockMediator from './block-mediator.min.js'; - -const { getMetadata } = await import(`${getLibs()}/utils/utils.js`); - -function getRedirectUri() { - const primaryCtaUrl = BlockMediator.get('primaryCtaUrl') - || document.querySelector('a.button.xlarge.same-as-floating-button-CTA, a.primaryCTA')?.href; - if (primaryCtaUrl) { - return primaryCtaUrl; - } - return false; -} - -function onGoogleToken(data) { - const token = data.credential; - const redirectURL = getRedirectUri(); - window.adobeIMS.socialHeadlessSignIn({ - provider_id: 'google', - idp_token: token, - client_id: window.adobeid.client_id, - scope: window.adobeid.scope, - }).then(() => { - if (redirectURL) { - window.location.assign(redirectURL); - } else { - window.location.reload(); - } - }).catch(() => { - const layoverUrl = new URL(window.location.href); - layoverUrl.searchParams.set('layover', 'true'); - window.adobeIMS.signInWithSocialProvider('google', { redirect_uri: layoverUrl.href }); - }); -} - -function setupOneTap() { - window.feds.utilities.imslib.onReady().then(() => { - // IMS is ready, we can detect whether the user is already logged-in - if (window.feds.utilities.imslib.isSignedInUser()) { - // User is already signed-in, no need to display Google One Tap - return; - } - - const GOOGLE_ID = '419611593676-9r4iflfe9652cjp3booqmmk8jht5as81.apps.googleusercontent.com'; - if (!window.IdentityCredential) { - const body = document.querySelector('body'); - const wrapper = document.createElement('div'); - // Position the dropdown below navigation - const navigationBarHeight = document.getElementById('feds-topnav')?.offsetHeight; - - wrapper.id = 'GoogleOneTap'; - wrapper.style = `position: absolute; z-index: 9999; top: ${navigationBarHeight}px; right: 0`; - body.appendChild(wrapper); - } - - // Load Google script - window.feds.utilities.loadResource({ - type: 'script', - path: 'https://accounts.google.com/gsi/client', - }).then(() => { - // Google script has been loaded - window.google.accounts.id.initialize({ - client_id: GOOGLE_ID, - callback: onGoogleToken, - prompt_parent_id: 'GoogleOneTap', - cancel_on_tap_outside: false, - ...(window.IdentityCredential ? { use_fedcm_for_prompt: true } : {}), - }); - - window.google.accounts.id.prompt(); - }); - }); -} - -export default function loadGoogleYolo() { - const urlParams = new URLSearchParams(window.location.search); - const relayLogin = urlParams.get('layover'); - const ctaUrl = getRedirectUri(); - const thresholdBreakpoint = ['yes', 'true', 'on', 'Y'].includes(getMetadata('mweb-google-yolo')) ? 0 : 900; - - if (window.matchMedia(`(min-width: ${thresholdBreakpoint}px)`).matches) { - if (relayLogin && ctaUrl) { - window.location.assign(ctaUrl); - } - - setTimeout(() => { - if (typeof window.feds === 'object' && window.feds?.events?.experience === true) { - setupOneTap(); - } else { - window.addEventListener('window.feds.events.experience.loaded', () => { - setupOneTap(); - }); - } - }, 3000); - } -} diff --git a/express/scripts/scripts.js b/express/scripts/scripts.js index 93e72c36..8cf7cbd1 100644 --- a/express/scripts/scripts.js +++ b/express/scripts/scripts.js @@ -10,15 +10,20 @@ * governing permissions and limitations under the License. */ -import { setLibs, buildAutoBlocks, decorateArea, removeIrrelevantSections } from './utils.js'; +import { + setLibs, + buildAutoBlocks, + decorateArea, + removeIrrelevantSections, + getRedirectUri, +} from './utils.js'; // Add project-wide style path here. const STYLES = ['/express/styles/styles.css']; // Use 'https://milo.adobe.com/libs' if you cannot map '/libs' to milo's origin. const LIBS = '/libs'; - -window.express = {}; +const miloLibs = setLibs(LIBS); // Add any config options. const CONFIG = { @@ -68,18 +73,15 @@ const CONFIG = { 'eb0dcb78-3e56-4b10-89f9-51831f2cc37f': 'express-pep', }, links: 'on', + googleLoginURLCallback: getRedirectUri, }; -const urlParams = new URLSearchParams(window.location.search); - /* * ------------------------------------------------------------ * Edit below at your own risk * ------------------------------------------------------------ */ -const miloLibs = setLibs(LIBS); - document.body.dataset.device = navigator.userAgent.includes('Mobile') ? 'mobile' : 'desktop'; removeIrrelevantSections(document); // LCP image decoration @@ -186,6 +188,9 @@ function decorateHeroLCP(loadStyle, config, createTag, getMetadata) { const footerSrc = createTag('meta', { name: 'footer-source', content: '/federal/footer/footer' }); document.head.append(footerSrc); + + const googleLoginRedirect = createTag('meta', { name: 'google-login', content: 'desktop' }); + document.head.append(googleLoginRedirect); // end TODO remove metadata after we go live const jarvisVisibleMeta = getMetadata('jarvis-immediately-visible')?.toLowerCase(); @@ -222,13 +227,12 @@ function decorateHeroLCP(loadStyle, config, createTag, getMetadata) { const footerMeta = createTag('meta', { name: 'custom-footer', content: 'on' }); document.head.append(footerMeta); - // listenMiloEvents(); buildAutoBlocks(); decorateHeroLCP(loadStyle, config, createTag, getMetadata); + const urlParams = new URLSearchParams(window.location.search); if (urlParams.get('martech') !== 'off' && getMetadata('martech') !== 'off') { import('./instrument.js').then((mod) => { mod.default(); }); } - const { default: replaceContent } = await import('./utils/content-replace.js'); await replaceContent(document.querySelector('main')); diff --git a/express/scripts/utils.js b/express/scripts/utils.js index c16dc8f5..4cefaaff 100644 --- a/express/scripts/utils.js +++ b/express/scripts/utils.js @@ -9,7 +9,6 @@ * OF ANY KIND, either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ - /** * The decision engine for where to get Milo's libs from. */ @@ -36,6 +35,7 @@ export const [setLibs, getLibs] = (() => { * Note: This file should have no self-invoking functions. * ------------------------------------------------------------ */ +export const expressObj = {}; const cachedMetadata = []; const getMetadata = (name, doc = document) => { @@ -48,6 +48,12 @@ export function getCachedMetadata(name) { return cachedMetadata[name]; } +export async function getRedirectUri() { + const BlockMediator = await import('./block-mediator.min.js'); + return BlockMediator.get('primaryCtaUrl') + || document.querySelector('a.button.xlarge.same-fcta, a.primaryCTA')?.href; +} + export const yieldToMain = () => new Promise((resolve) => { setTimeout(resolve, 0); }); function createTag(tag, attributes, html, options = {}) { @@ -268,51 +274,6 @@ export function lazyLoadLottiePlayer($block = null) { } } -// TODO we might be able to remove this before migrating -async function loadAEMGnav() { - const miloLibs = getLibs(); - const { loadScript } = await import(`${miloLibs}/utils/utils.js`); - const header = document.querySelector('header'); - - if (header) { - header.addEventListener('click', (event) => { - if (event.target.id === 'feds-topnav') { - const root = window.location.href.split('/express/')[0]; - window.location.href = `${root}/express/`; - } - }); - header.innerHTML = '
'; - } - const footer = document.querySelector('footer'); - if (footer) { - footer.innerHTML = ` - - `; - footer.setAttribute('data-status', 'loading'); - } - - const usp = new URLSearchParams(window.location.search); - const gnav = usp.get('gnav') || getMetadata('gnav'); - - const gnavUrl = '/express/scripts/gnav.js'; - if (!(gnav === 'off' || document.querySelector(`head script[src="${gnavUrl}"]`))) { - loadScript(gnavUrl, 'module'); - } -} - -// TODO we might be able to remove this before migrating -export function listenMiloEvents() { - const lcpLoadedHandler = async () => { - await loadAEMGnav(); - }; - const postSectionLoadingHandler = async () => { - const footer = document.querySelector('footer'); - delete footer.dataset.status; - }; - window.addEventListener('milo:LCP:loaded', lcpLoadedHandler); - window.addEventListener('milo:postSection:loading', postSectionLoadingHandler); -} - function transpileMarquee(area) { const handleSubCTAText = (oldContainer, newContainer) => { const elAfterBtn = oldContainer.nextElementSibling;