Merge branch 'adobecom:main' into main

suhjainadobe · Mar 15, 2024 · feb3e40 · feb3e40
2 parents 4b2d885 + 7be25a8
commit feb3e40
Show file tree

Hide file tree

Showing 19 changed files with 1,371 additions and 94 deletions.
diff --git a/README.md b/README.md
@@ -2,12 +2,12 @@
 The Franklin based project for creative cloud pages on www.adobe.com. Based off of milo-college.
 
 ## Developing
-1. Install the [Helix CLI](https://github.com/adobe/helix-cli): `sudo npm install -g @adobe/helix-cli`
-2. Run `hlx up` this repo's folder. (opens your browser at `http://localhost:3000`)
+1. Install the [AEM CLI](https://github.com/adobe/helix-cli): `sudo npm install -g @adobe/aem-cli`
+2. Run `aem up` this repo's folder. (opens your browser at `http://localhost:3000`)
 3. Open this repo's folder in your favorite editor and start coding.
 
 ## Testing Milo Changes on CC Pages
-1. Run 'hlx up' in this folder to ensure the cc site is running locally. 
+1. Run 'aem up' in this folder to ensure the cc site is running locally. 
 2. Make changes in milo, and then from the milo folder, run `npm run libs`.
 3. Milo will run at:
 ```

diff --git a/creativecloud/blocks/interactive-marquee/milo-marquee.css b/creativecloud/blocks/interactive-marquee/milo-marquee.css
@@ -27,6 +27,7 @@
 .interactive-marquee .media {
   max-width: 300px;
   position: relative;
+  padding: 0;
 }
 
 .interactive-marquee .text {
@@ -59,8 +60,8 @@
 .interactive-marquee .icon-text {
   margin: auto var(--spacing-xs);
   font-weight: 700;
-  font-size: 18px;
-  line-height: 22.5px;
+  font-size: var(--type-heading-m-size);
+  line-height: var(--type-heading-m-lh);
   font-style: normal;
 }
 

diff --git a/creativecloud/blocks/sidenav/sidenav.js b/creativecloud/blocks/sidenav/sidenav.js
@@ -5,7 +5,7 @@ import '../../deps/merch-sidenav.js';
 const CATEGORY_ID_PREFIX = 'categories/';
 const TYPE_ID_PREFIX = 'types/';
 
-const getIdLeaf = (id) => (id?.substring(id.lastIndexOf('/') + 1) || id);
+const getIdLeaf = (id) => (id?.substring(id.lastIndexOf('/') + 1) || id).toLowerCase();
 
 const getCategories = (items, isMultilevel, mapCategories) => {
   const configuration = { manageTabIndex: true };

diff --git a/creativecloud/blocks/universal-promo-terms/universal-promo-terms.css b/creativecloud/blocks/universal-promo-terms/universal-promo-terms.css
@@ -0,0 +1,9 @@
+@media (min-width: 900px) {
+  body .feds-topnav-wrapper {
+    border: 0;
+  }  
+}
+
+body .global-footer {
+  background: none;
+}
diff --git a/creativecloud/blocks/universal-promo-terms/universal-promo-terms.js b/creativecloud/blocks/universal-promo-terms/universal-promo-terms.js
@@ -0,0 +1,52 @@
+const OFFER_ID_API_BASE = 'https://aos.adobe.io/offers/';
+const SELECTOR_ID_API_BASE = 'https://aos.adobe.io/offers:search.selector';
+const STAGE_OFFER_ID_API_BASE = 'https://aos-stage.adobe.io/offers/';
+const STAGE_SELECTOR_ID_API_BASE = 'https://aos-stage.adobe.io/offers:search.selector';
+const API_KEY = 'universalPromoTerm';
+const SERVICE_PROVIDERS = 'PROMO_TERMS';
+
+function getEnv(env) {
+  if (env) return env;
+  if (window.location.hostname === 'www.adobe.com') return 'production';
+  return 'stage';
+}
+
+async function getTermsHTML(params, el, env, search) {
+  const locationSearch = search ?? window.location.search;
+  let promoTerms;
+  if (!params.get('offer_selector_ids')) {
+    let fetchURL = `${env === 'stage' ? STAGE_OFFER_ID_API_BASE : OFFER_ID_API_BASE}${params.get('offer_id')}${locationSearch}`;
+    fetchURL += params.get('api_key') ? '' : `&api_key=${API_KEY}`;
+    fetchURL += params.get('service_providers') ? '' : `&service_providers=${SERVICE_PROVIDERS}`;
+
+    const res = await fetch(fetchURL);
+    if (!res.ok) return false;
+    const json = await res.json();
+    promoTerms = json[0]?.promo_terms;
+  } else {
+    let fetchURL = `${env === 'stage' ? STAGE_SELECTOR_ID_API_BASE : SELECTOR_ID_API_BASE}${locationSearch}`;
+    fetchURL += params.get('api_key') ? '' : `&api_key=${API_KEY}`;
+    fetchURL += params.get('service_providers') ? '' : `&service_providers=${SERVICE_PROVIDERS}`;
+
+    const res = await fetch(fetchURL);
+    if (!res.ok) return false;
+    const json = await res.json();
+    promoTerms = json[0]?.offers[0]?.promo_terms;
+  }
+
+  if (!promoTerms || !promoTerms.header || !promoTerms.text) {
+    return false;
+  }
+  return `<div class="container">${el.innerHTML}<h1>${promoTerms.header}</h1><p>${promoTerms.text}</p></div>`;
+}
+
+export default async function init(el, search) {
+  const params = new URLSearchParams(search ?? window.location.search);
+  const env = getEnv(params.get('env'));
+  const termsHTML = await getTermsHTML(params, el, env, search);
+  if (!termsHTML && env !== 'stage') {
+    window.location = '404.html';
+  } else {
+    el.innerHTML = termsHTML;
+  }
+}
diff --git a/creativecloud/features/firefly/firefly-interactive.css b/creativecloud/features/firefly/firefly-interactive.css
@@ -79,20 +79,34 @@
 
 @media (max-width: 600px) {
   .firefly-selectortray {
-    min-width: 110%;
-    margin-inline: -22px 16px;
     justify-content: center;
     margin-top: -7px;
     margin-bottom: 24px;
+    width: 80%;
+    margin-inline-start: 20px;
+  }
+
+  .firefly-selectortray.three-options {
+    width: 110%;
+    margin-inline: -22px 16px;
   }
 
   .interactive-marquee.firefly .interactive-container {
     height: 440px;
   }
 
   .interactive-marquee.firefly .media {
-    top: 8px;
-  }  
+    top: 24px;
+  }
+
+  .interactive-marquee.firefly .foreground {
+    padding-top: 0;
+  }
+
+  .interactive-marquee.firefly.ff-text-effects .interactive-container,
+  .interactive-marquee.firefly.ff-text-to-image .interactive-container {
+    height: 346px;
+  }
 }
 
 @media (min-width: 600px) and (max-width: 1199px) {
@@ -109,22 +123,40 @@
 
   .firefly-selectortray {
     top: 0;
+    width: 50%;
+    margin-inline: 126px;
+  }
+
+  .firefly-selectortray.three-options {
     margin-inline: 42px;
     width: 80%;
   }
 
   .interactive-marquee.firefly .interactive-container {
     height: 813px;
   }
+
+  .interactive-marquee.firefly .foreground {
+    padding-top: 0;
+  }
+
+  .interactive-marquee.firefly.ff-text-effects .interactive-container,
+  .interactive-marquee.firefly.ff-text-to-image .interactive-container {
+    height: 662px;
+  }
 }
 
 @media screen and (min-width: 1200px) {
   .firefly-selectortray {
-    top: 144px;
+    top: 187px;
     position: absolute;
     right: -122px;
   }
 
+  .firefly-selectortray.three-options {
+    top: 144px;
+  }
+
   [dir="rtl"] .firefly-selectortray {
     left: -122px;
     right: 446px;

diff --git a/creativecloud/features/firefly/firefly-interactive.js b/creativecloud/features/firefly/firefly-interactive.js
@@ -1,21 +1,26 @@
 import { getLibs } from '../../scripts/utils.js';
 
+const { default: defineDeviceByScreenSize } = await import('../../scripts/decorate.js');
+
 function focusOnInput(media, createTag) {
   const input = media.querySelector('.prompt-text');
   if (input) {
-    input.focus();
+    const device = defineDeviceByScreenSize();
+    const blinkingCursor = createTag('div', { class: 'blinking-cursor' });
+    if (input.classList.contains('light')) blinkingCursor.classList.add('blink-light');
+    if (device === 'MOBILE' || device === 'TABLET') {
+      input.insertAdjacentElement('beforebegin', blinkingCursor);
+    } else input.focus();
     input.addEventListener('focusout', () => {
-      if (document.querySelector('.locale-modal-v2')) {
-        const blinkingCursor = createTag('div', { class: 'blinking-cursor' });
+      if (document.querySelector('.locale-modal-v2') && device === 'DESKTOP') {
         input.insertAdjacentElement('beforebegin', blinkingCursor);
-        if (input.classList.contains('light')) blinkingCursor.classList.add('blink-light');
       }
     }, { once: true });
     input.addEventListener('click', () => { document.querySelector('.blinking-cursor')?.remove(); });
   }
 }
 
-function eventOnGenerate(generateButton, media) {
+function eventOnGenerate(generateButton, media, fireflyfeature = '') {
   const btnConfigs = {
     TextToImage: ['SubmitTextToImage', 'SubmitTextToImageUserContent', 'goToFirefly'],
     TextEffects: ['SubmitTextEffects', 'SubmitTextEffectsUserContent', 'goToFireflyEffects'],
@@ -24,13 +29,16 @@ function eventOnGenerate(generateButton, media) {
     const userprompt = media.querySelector('.prompt-text')?.value;
     const placeholderprompt = media.querySelector('.prompt-text')?.getAttribute('placeholder');
     const prompt = userprompt || placeholderprompt;
-    const selected = media.querySelector('.selected');
-    const className = selected.getAttribute('class').split(' ')[1].trim();
+    let className = '';
+    if (fireflyfeature === '') {
+      const selected = media.querySelector('.selected');
+      className = selected.getAttribute('class').split(' ')[1].trim();
+    } else className = fireflyfeature;
     if (Object.keys(btnConfigs).includes(className)) {
       const btnConfig = btnConfigs[className];
       const dall = userprompt === '' ? btnConfig[0] : btnConfig[1];
       e.target.setAttribute('daa-ll', dall);
-      const { signIn } = await import('./firefly-susi.js');
+      const { default: signIn } = await import('./firefly-susi.js');
       signIn(prompt, btnConfig[2]);
     }
   });
@@ -73,7 +81,7 @@ async function eventOnSelectorOption(option, prompt, media, mediaP, createPrompt
     genfilprompt.classList.add('genfill-promptbar');
     const genFillButton = media.querySelector('#genfill');
     genFillButton.addEventListener('click', async () => {
-      const { signIn } = await import('./firefly-susi.js');
+      const { default: signIn } = await import('./firefly-susi.js');
       signIn('', 'goToFireflyGenFill');
     });
   } else {
@@ -86,6 +94,16 @@ async function eventOnSelectorOption(option, prompt, media, mediaP, createPrompt
   }
 }
 
+async function singleFireflyFeature(promptDet, mode, createPromptField, media, feature, createTag) {
+  const firstOptionDetail = promptDet.innerText.split('|');
+  const fireflyPrompt = await createPromptField(`${firstOptionDetail[0]}`, `${firstOptionDetail[1]}`, mode);
+  fireflyPrompt.classList.add('firefly-prompt');
+  media.appendChild(fireflyPrompt);
+  const generateButton = media.querySelector('#promptbutton');
+  eventOnGenerate(generateButton, media, feature);
+  focusOnInput(media, createTag);
+}
+
 export default async function setInteractiveFirefly(el) {
   const enticementMode = el.classList.contains('light') ? 'light' : 'dark';
   const interactiveElemMode = el.classList.contains('light') ? 'dark' : 'light';
@@ -128,7 +146,6 @@ export default async function setInteractiveFirefly(el) {
     };
     selections.push(option);
   });
-
   [...allP].forEach((s) => { if (!s.querySelector('picture') && !s.querySelector('video')) s.remove(); });
   const mediaP = media.querySelectorAll('p:not(:empty)');
   [...mediaP].forEach((image) => { image.classList.add('hide'); });
@@ -139,52 +156,57 @@ export default async function setInteractiveFirefly(el) {
   const enticementIcon = allAnchorTag[0].href;
   const enticementDiv = await createEnticement(`${enticementText}|${enticementIcon}`, enticementMode);
   media.appendChild(enticementDiv, media.firstChild);
-
+  const { createTag } = await import(`${getLibs()}/utils/utils.js`);
+  if (el.classList.contains('ff-text-effects')) {
+    mediaP[0].classList.remove('hide');
+    singleFireflyFeature(allP[2], interactiveElemMode, createPromptField, media, 'TextEffects', createTag);
+    return;
+  }
+  if (el.classList.contains('ff-text-to-image')) {
+    mediaP[0].classList.remove('hide');
+    singleFireflyFeature(allP[2], interactiveElemMode, createPromptField, media, 'TextToImage', createTag);
+    return;
+  }
   const fireflyOptions = await createSelectorTray(selections, interactiveElemMode);
   fireflyOptions.classList.add('firefly-selectortray');
+  if (selections.length === 3) fireflyOptions.classList.add('three-options');
   media.append(fireflyOptions);
-
   const ttiOption = media.querySelector('.TextToImage');
   const genFillOption = media.querySelector('.GenerativeFill');
   const teOption = media.querySelector('.TextEffects');
   const firstOption = media.querySelector('.selector-tray > button');
-
   hideRemoveElements(firstOption, media, mediaP);
-  const { createTag } = await import(`${getLibs()}/utils/utils.js`);
-
-  const genfillPrompt = createGenFillPrompt(genfDetail.promptpos, createTag);
 
   // Create prompt field for first option on page load
   const firstOptionDetail = allP[3].innerText.split('|');
-  const fireflyPrompt = await createPromptField(`${firstOptionDetail[0]}`, `${firstOptionDetail[1]}`, interactiveElemMode);
+  const mode = firstOption.classList.contains('GenerativeFill') ? 'genfill' : interactiveElemMode;
+  const fireflyPrompt = await createPromptField(`${firstOptionDetail[0]}`, `${firstOptionDetail[1]}`, mode);
   if (firstOption.classList.contains('TextToImage') || firstOption.classList.contains('TextEffects')) {
     fireflyPrompt.classList.add('firefly-prompt');
     media.appendChild(fireflyPrompt);
     const generateButton = media.querySelector('#promptbutton');
     eventOnGenerate(generateButton, media);
   } else if (firstOption.classList.contains('GenerativeFill')) {
     fireflyPrompt.classList.add('genfill-promptbar');
+    const genfillPrompt = createGenFillPrompt(genfDetail.promptpos, createTag);
     media.append(genfillPrompt, fireflyPrompt);
     const genFillButton = media.querySelector('#genfill');
     genFillButton.addEventListener('click', async () => {
-      const { signIn } = await import('./firefly-susi.js');
+      const { default: signIn } = await import('./firefly-susi.js');
       signIn('', 'goToFireflyGenFill');
     });
   }
-
   focusOnInput(media, createTag);
   /* Handle action on click of each firefly option button */
-
-  ttiOption.addEventListener('click', () => {
+  ttiOption?.addEventListener('click', () => {
     eventOnSelectorOption(ttiOption, ttiDetail, media, mediaP, createPromptField, createTag);
   });
-
-  genFillOption.addEventListener('click', () => {
+  genFillOption?.addEventListener('click', () => {
     eventOnSelectorOption(genFillOption, genfDetail, media, mediaP, createPromptField);
+    const genfillPrompt = createGenFillPrompt(genfDetail.promptpos, createTag);
     media.appendChild(genfillPrompt);
   });
-
-  teOption.addEventListener('click', () => {
+  teOption?.addEventListener('click', () => {
     eventOnSelectorOption(teOption, teDetail, media, mediaP, createPromptField, createTag);
   });
 }
diff --git a/creativecloud/features/firefly/firefly-susi.js b/creativecloud/features/firefly/firefly-susi.js
@@ -10,31 +10,25 @@ function generateRandomSeed(min = 1, max = 100000) {
   return Math.floor(Math.random() * (max - min + 1)) + min;
 }
 
-export function redirectWithParam() {
-  const url = new URL(window.location.href);
-  let prompt;
+function redirectUrl(prompt, paramKey) {
   let windowLocation = '';
   const queryParam = 'ff_channel=adobe_com&ff_campaign=ffly_homepage&ff_source=firefly_seo';
-  if (window.location.search.includes('goToFireflyGenFill')) {
+  if (paramKey === 'goToFireflyGenFill') {
     windowLocation = env === 'prod' ? `${fireflyprod}/upload/inpaint?${queryParam}` : `${fireflystage}/upload/inpaint?&${queryParam}`;
-  } else if (window.location.search.includes('goToFireflyEffects')) {
-    prompt = url.searchParams.get('goToFireflyEffects');
-    const effectsPath = `generate/font-styles?prompt=${prompt}&${queryParam}`;
+  } else if (paramKey === 'goToFireflyEffects') {
+    const effectsPath = `generate/font-styles?prompt=${encodeURI(prompt)}&${queryParam}`;
     windowLocation = env === 'prod' ? `${fireflyprod}/${effectsPath}` : `${fireflystage}/${effectsPath}`;
-  } else if (window.location.search.includes('goToFirefly')) {
-    prompt = url.searchParams.get('goToFirefly');
-    const fireflyPath = `generate/images?prompt=${prompt}&${queryParam}&seed=${generateRandomSeed()}&seed=${generateRandomSeed()}&seed=${generateRandomSeed()}&seed=${generateRandomSeed()}&modelInputVersion=v2&modelConfig=v2`;
+  } else if (paramKey === 'goToFirefly') {
+    const fireflyPath = `generate/images?prompt=${encodeURI(prompt)}&${queryParam}&seed=${generateRandomSeed()}&seed=${generateRandomSeed()}&seed=${generateRandomSeed()}&seed=${generateRandomSeed()}&modelInputVersion=v2&modelConfig=v2`;
     windowLocation = env === 'prod' ? `${fireflyprod}/${fireflyPath}` : `${fireflystage}/${fireflyPath}`;
   }
-  if (windowLocation) window.location = windowLocation;
+  return windowLocation;
 }
 
-export const signIn = (prompt, paramKey) => {
-  const url = new URL(window.location.href);
-  url.searchParams.delete('goToFirefly', 'goToFireflyEffects', 'goToFireflyGenFill', 'prompt', 'seed', 'ff_channel', 'ff_campaign', 'ff_source');
-  url.searchParams.set(paramKey, encodeURI(prompt));
-  const stageSigninObj = { dctx_id: 'v:2,s,f,bg:firefly2023,2e2b3d80-4e50-11ee-acbc-ab67eaa89524', redirect_uri: url.href };
-  const prodSigninObj = { dctx_id: 'v:2,s,f,bg:firefly2023,cea19bc0-4e72-11ee-888a-c95a795c7f23', redirect_uri: url.href };
+export default function signIn(prompt, paramKey) {
+  const redirectUri = redirectUrl(prompt, paramKey);
+  const stageSigninObj = { dctx_id: 'v:2,s,f,bg:firefly2023,2e2b3d80-4e50-11ee-acbc-ab67eaa89524', redirect_uri: redirectUri };
+  const prodSigninObj = { dctx_id: 'v:2,s,f,bg:firefly2023,cea19bc0-4e72-11ee-888a-c95a795c7f23', redirect_uri: redirectUri };
   if (env === 'stage') window.adobeIMS?.signIn(stageSigninObj);
   else window.adobeIMS?.signIn(prodSigninObj);
-};
+}