Merge pull request #1 from Axelcureno/merch-card-migration

Merch card migration

libs/blocks/caas-config/caas-config.js

@@ -98,8 +98,6 @@ const defaultOptions = {
       '14257-chimera.adobeioruntime.net/api/v1/web/chimera-0.0.1/collection',
     '14257-chimera-stage.adobeioruntime.net/api/v1/web/chimera-0.0.1/collection':
       '14257-chimera-stage.adobeioruntime.net/api/v1/web/chimera-0.0.1/collection',
-    '14257-chimera-dev.adobeioruntime.net/api/v1/web/chimera-0.0.1/collection':
-      '14257-chimera-dev.adobeioruntime.net/api/v1/web/chimera-0.0.1/collection',
   },
   filterBuildPanel: {
     automatic: 'Automatic',

libs/blocks/caas/caas.js

@@ -1,7 +1,9 @@
-import { initCaas, loadCaasFiles, loadStrings } from './utils.js';
-import { parseEncodedConfig, createIntersectionObserver } from '../../utils/utils.js';
+import { initCaas, loadCaasFiles, loadStrings, fgHeaderValue } from './utils.js';
+import { parseEncodedConfig, createIntersectionObserver, getMetadata, getConfig, b64ToUtf8 } from '../../utils/utils.js';
 
 const ROOT_MARGIN = 1000;
+const P_CAAS_AIO = b64ToUtf8('MTQyNTctY2hpbWVyYS5hZG9iZWlvcnVudGltZS5uZXQvYXBpL3YxL3dlYi9jaGltZXJhLTAuMC4xL2NvbGxlY3Rpb24=');
+const S_CAAS_AIO = b64ToUtf8('MTQyNTctY2hpbWVyYS1zdGFnZS5hZG9iZWlvcnVudGltZS5uZXQvYXBpL3YxL3dlYi9jaGltZXJhLTAuMC4xL2NvbGxlY3Rpb24=');
 
 const getCaasStrings = (placeholderUrl) => new Promise((resolve) => {
   if (placeholderUrl) {
@@ -30,6 +32,28 @@ const loadCaas = async (a) => {
   a.insertAdjacentElement('afterend', block);
   a.remove();
 
+  const floodGateColor = getMetadata('floodgatecolor') || '';
+  if (floodGateColor === fgHeaderValue) {
+    state.fetchCardsFromFloodgateTree = true;
+  }
+
+  const { env } = getConfig();
+  const { host } = window.location;
+  let chimeraEndpoint = 'www.adobe.com/chimera-api/collection';
+
+  if (host.includes('stage.adobe') || env?.name === 'local') {
+    chimeraEndpoint = S_CAAS_AIO;
+  } else if (host.includes('.hlx.')) {
+    // If invoking URL is not an Acom URL, then switch to AIO
+    chimeraEndpoint = P_CAAS_AIO;
+  }
+
+  if (host.includes('hlx.page') || env?.name === 'local') {
+    state.draftDb = true;
+  }
+
+  state.endpoint = chimeraEndpoint;
+
   initCaas(state, caasStrs, block);
 };
 

libs/blocks/caas/utils.js

@@ -3,6 +3,8 @@ import { loadScript, loadStyle, getConfig as pageConfigHelper } from '../../util
 import { fetchWithTimeout } from '../utils/utils.js';
 
 const URL_ENCODED_COMMA = '%2C';
+export const fgHeaderName = 'X-Adobe-Floodgate';
+export const fgHeaderValue = 'pink';
 
 const pageConfig = pageConfigHelper();
 const pageLocales = Object.keys(pageConfig.locales || {});
@@ -291,13 +293,10 @@ const findTupleIndex = (fgHeader) => {
  * @returns requestHeaders
  */
 const addFloodgateHeader = (state) => {
-  const fgHeader = 'X-Adobe-Floodgate';
-  const fgHeaderValue = 'pink';
-
   // Delete FG header if already exists, before adding pink to avoid duplicates in requestHeaders
-  requestHeaders.splice(findTupleIndex(fgHeader, 1));
+  requestHeaders.splice(findTupleIndex(fgHeaderName, 1));
   if (state.fetchCardsFromFloodgateTree) {
-    requestHeaders.push([fgHeader, fgHeaderValue]);
+    requestHeaders.push([fgHeaderName, fgHeaderValue]);
   }
   return requestHeaders;
 };
@@ -557,7 +556,7 @@ export const defaultState = {
   contentTypeTags: [],
   country: 'caas:country/us',
   customCard: '',
-  ctaAction: '_blank',
+  ctaAction: '_self',
   doNotLazyLoad: false,
   disableBanners: false,
   draftDb: false,

libs/blocks/faas/utils.js

@@ -352,7 +352,11 @@ export const initFaas = (config, targetEl) => {
   if (state.complete) {
     if (state.js) {
       Object.keys(state.js).forEach((key) => {
-        state[key] = state.js[key];
+        if (key === 'd') {
+          state[key] = localizeLink(state.js[key]);
+        } else {
+          state[key] = state.js[key];
+        }
       });
       delete state.js;
     }

libs/blocks/global-footer/global-footer.js

@@ -98,7 +98,7 @@ class Footer {
       await task();
     }
 
-    this.footerEl.setAttribute('daa-lh', `gnav|${getExperienceName()}|footer`);
+    this.footerEl.setAttribute('daa-lh', `gnav|${getExperienceName()}|footer|${document.body.dataset.mep}`);
 
     this.footerEl.append(this.elements.footer);
   };

libs/blocks/marketo/marketo.css

@@ -43,12 +43,20 @@
   display: flex;
   flex-flow: row wrap;
   justify-content: space-between;
+  column-gap: 4.6%;
   align-items: flex-start;
   visibility: visible;
   opacity: 1;
   transition: opacity 1s ease-in, height 1s ease-in;
 }
 
+.marketo .mktoFormRow.mktoFormRowTop.comments,
+.marketo .mktoFormRow.mktoFormRowTop.demo,
+.marketo .mktoFormRow.mktoFormRowTop.name {
+  display: flex;
+  width: 100%;
+}
+
 .marketo .mktoFormRow {
   transition: height 0.5s ease-in;
   height: auto;
@@ -63,12 +71,24 @@
   margin-bottom: 11px;
 }
 
+.marketo fieldset.mktoFormCol {
+  display: none;
+}
+
+.marketo fieldset.mktoFormCol.mktoVisible {
+  display: block;
+}
+
 .marketo .mktoFormRow fieldset.mktoFormCol {
   border: none;
   margin: 0;
   padding: 0;
 }
 
+.marketo > .mktoFormRow.mktoFormRowTop > .mktoFormCol > .mktoFormRow > .mktoFormCol.mktoVisible > .mktoFieldWrap {
+  width: auto;
+}
+
 .marketo .mktoFormRow.demo fieldset.mktoFormCol {
   width: 100%;
   margin: 24px 0;
@@ -228,7 +248,7 @@
   color: var(--marketo-form-text);
 }
 
-.marketo .mktoFormRow.adobe-privacy .mktoFormCol:not(fieldset) {
+.marketo .mktoFormRow[class*="adobe-privacy"] .mktoFormCol:not(fieldset) {
   margin-top: 21px;
 }
 
@@ -385,7 +405,7 @@
   width: 100%;
 }
 
-.dialog-modal .marketo .mktoFormRow.adobe-privacy {
+.dialog-modal .marketo .mktoFormRow[class*="adobe-privacy"] {
   width: 100%;
 }
 
@@ -425,29 +445,67 @@
   margin-left: 0;
 }
 
+.marketo .mktoFormRowTop[class*="adobe-privacy"] {
+  display: flex;
+  width: 100%;
+}
+
 @media screen and (min-width: 600px) {
   .marketo .marketo-form-wrapper {
     padding: var(--spacing-xxl);
   }
 
-  .marketo .mktoFormCol.mktoVisible {
-    width: 47.7%;
-  }
-
-  .marketo [class*="adobe-privacy"] fieldset.mktoFormCol.mktoVisible {
+  .marketo .mktoFormRowTop[class*="adobe-privacy"] {
+    display: grid;
     width: 100%;
   }
 
-  .marketo .adobe-privacy .mktoFormCol.mktoVisible,
+  .marketo [class*="adobe-privacy"],
   .marketo .msg-error .mktoFormCol.mktoVisible,
   .marketo .mktoFormCol.mktoVisible .mktoFormCol.mktoVisible {
     width: 100%;
+    grid-column: span 2;
   }
 
   .marketo .mktoForm.show-warnings .mktoError {
     width: 50%;
     margin-left: 50%;
   }
+
+  .marketo form.mktoForm--fade-in.mktoVisible {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .marketo .mktoFormRow.mktoFormRowTop.name > .mktoFormCol {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-areas: "salutation ." "firstName lastName";
+    column-gap: 4.6%;
+  }
+
+  .marketo .mktoFormRow.mktoFormRowTop.comments,
+  .marketo .mktoFormRow.mktoFormRowTop.demo,
+  .marketo .mktoFormRow.mktoFormRowTop.name {
+    display: block;
+    grid-column: span 2;
+  }
+
+  .marketo .mktoFormRow.mktoFormRowTop.name .mktoFormRow[data-mktofield="Salutation"] {
+    grid-area: salutation;
+  }
+
+  .marketo .mktoFormRow.mktoFormRowTop.name .mktoFormRow[data-mktofield="FirstName"] {
+    grid-area: firstName;
+  }
+
+  .marketo .mktoFormRow.mktoFormRowTop.name .mktoFormRow[data-mktofield="LastName"] {
+    grid-area: lastName;
+  }
+
+  .marketo .mktoForm .mktoButtonRow {
+    grid-column: span 2;
+  }
 }
 
 @media screen and (min-width: 900px) {