Merge branch 'stage' into analyticsusebold

.github/workflows/localWorkflowConfigs.js

@@ -0,0 +1,25 @@
+// Those env variables are set by an github action automatically
+// For local testing, you should test on your fork.
+const owner = process.env.REPO_OWNER || ''; // example owner: adobecom
+const repo = process.env.REPO_NAME || ''; // example repo name: milo
+const auth = process.env.GH_TOKEN || ''; // https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens
+
+const getLocalConfigs = () => {
+  if (!owner || !repo || !auth) {
+    throw new Error(`Create a .env file on the root of the project with credentials.
+Then run: node --env-file=.env .github/workflows/update-ims.js`);
+  }
+
+  const { Octokit } = require('@octokit/rest');
+  return {
+    github: { rest: new Octokit({ auth: process.env.GH_TOKEN }) },
+    context: {
+      repo: {
+        owner,
+        repo,
+      },
+    },
+  };
+};
+
+module.exports = getLocalConfigs;

.github/workflows/update-dependencies.yaml

@@ -0,0 +1,30 @@
+name: Update dependencies
+
+on:
+  schedule:
+    - cron: '0 0 * * *'
+  workflow_dispatch:
+
+jobs:
+  update:
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v2
+
+    - name: Update file and create PR if needed
+      uses: actions/github-script@v7
+      with:
+        script: |
+          const updateDependency = require('./.github/workflows/update-script.js')
+          updateDependency({
+            github, 
+            context, 
+            title: '[AUTOMATED-PR] Update imslib.min.js dependency', 
+            path: 'https://auth.services.adobe.com/imslib/imslib.min.js',
+            branch: 'update-imslib',
+            scriptPath: './libs/deps/imslib.min.js'
+          })
+      env:
+        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/update-script.js

@@ -0,0 +1,158 @@
+const https = require('https');
+const { execSync } = require('child_process');
+const fs = require('fs');
+
+// Run from the root of the project for local testing: node --env-file=.env .github/workflows/update-script.js
+const localExecution = process.env.LOCAL_RUN || false;
+const localRunConfigs = {
+  branch: process.env.LOCAL_RUN_BRANCH || 'update-imslib',
+  title: process.env.LOCAL_RUN_TITLTE || '[AUTOMATED-PR] Update imslib.min.js dependency',
+  path: process.env.LOCAL_RUN_SCRIPT || 'https://auth.services.adobe.com/imslib/imslib.min.js',
+  scriptPath: process.env.LOCAL_RUN_SCRIPT_PATH || './libs/deps/imslib.min.js',
+  origin: process.env.LOCAL_RUN_ORIGIN || 'origin',
+};
+
+const getPrDescription = ({ branch, scriptPath }) => `## Description
+Update ${scriptPath} to the latest version
+## Related Issue
+Resolves: NO TICKET - AUTOMATED CREATED PR.
+## Testing instructions
+1. Signing in should still function
+2. Signing out should still work
+3. Regression tests on all consumers
+## Test URLs
+**Acrobat:**
+- Before: https://www.stage.adobe.com/acrobat/online/sign-pdf.html?martech=off
+- After: https://www.stage.adobe.com/acrobat/online/sign-pdf.html?martech=off&milolibs=${branch}--milo--adobecom
+**BACOM:**
+- Before: https://business.stage.adobe.com/fr/customer-success-stories.html?martech=off
+- After: https://business.stage.adobe.com/fr/customer-success-stories.html?martech=off&milolibs=${branch}--milo--adobecom
+**CC:**
+- Before: https://main--cc--adobecom.hlx.live/?martech=off
+- After: https://main--cc--adobecom.hlx.live/?martech=off&milolibs=${branch}--milo--adobecom
+**Homepage:**
+- Before: https://main--homepage--adobecom.hlx.page/homepage/index-loggedout?martech=off
+- After: https://main--homepage--adobecom.hlx.page/homepage/index-loggedout?martech=off&milolibs=${branch}--milo--adobecom
+**Blog:**
+- Before: https://main--blog--adobecom.hlx.page/?martech=off
+- After: https://main--blog--adobecom.hlx.page/?martech=off&milolibs=${branch}--milo--adobecom
+**Milo:**
+- Before: https://main--milo--adobecom.hlx.page/ch_de/drafts/ramuntea/gnav-refactor?martech=off
+- After: https://${branch}--milo--adobecom.hlx.page/ch_de/drafts/ramuntea/gnav-refactor?martech=off`;
+
+const fetchScript = (path) => new Promise((resolve, reject) => {
+  console.log(`Fetching script from ${path}`);
+  https
+    .get(path, (res) => {
+      if (res.statusCode < 200 || res.statusCode >= 300) {
+        return reject(new Error(`statusCode=${res.statusCode}`));
+      }
+
+      let data = '';
+
+      res.on('data', (chunk) => {
+        data += chunk;
+      });
+
+      res.on('end', () => {
+        resolve({
+          data,
+          headers: res.headers,
+        });
+      });
+    })
+    .on('error', (err) => {
+      reject(err);
+    });
+});
+
+// Use this for conditional execution of commands
+const execSyncSafe = (command) => {
+  try {
+    execSync(command);
+  } catch (error) {
+    console.log(`Skipped command ${command}`);
+  }
+};
+
+const createAndPushBranch = ({ script, branch, scriptPath, origin = 'origin' }) => {
+  // When testing locally, u likely do not want to kill your dev branch
+  if (!localExecution) {
+    execSync('git config --global user.name "GitHub Action"');
+    execSync('git config --global user.email "action@github.com"');
+    execSync('git fetch');
+    execSync('git checkout stage');
+    execSyncSafe(`git branch -D ${branch}`);
+    execSync(`git checkout -b ${branch}`);
+  }
+  console.log('writing script to file', scriptPath);
+  fs.writeFileSync(scriptPath, script);
+  execSync(`git add ${scriptPath}`);
+  execSyncSafe('git commit -m "Update self hosted dependency"');
+  execSync(`git push --force ${origin} ${branch}`);
+};
+
+const main = async ({
+  github, context, title, path, branch, scriptPath, origin,
+}) => {
+  try {
+    const { data: script } = await fetchScript(path);
+    const selfHostedScript = fs.existsSync(scriptPath) && fs.readFileSync(scriptPath, 'utf8');
+    const scriptHasChanged = script !== selfHostedScript;
+    console.log(`Validating if "${scriptPath}" has changed. Script change: ${scriptHasChanged}`);
+
+    if (scriptHasChanged || localExecution) {
+      const { data: openPRs } = await github.rest.pulls.list({
+        owner: context.repo.owner,
+        repo: context.repo.repo,
+        state: 'open',
+      });
+
+      const hasPR = openPRs.find((pr) => pr.head.ref === branch);
+      if (hasPR) return console.log(`PR already exists for branch ${branch}. Execution stopped.`);
+
+      createAndPushBranch({ script, branch, scriptPath, origin });
+
+      const pr = await github.rest.pulls.create({
+        owner: context.repo.owner,
+        repo: context.repo.repo,
+        title,
+        head: branch,
+        base: 'stage',
+        body: getPrDescription({ branch, scriptPath }),
+      });
+
+      await github.rest.issues.addLabels({
+        owner: context.repo.owner,
+        repo: context.repo.repo,
+        issue_number: pr.data.number,
+        labels: ['needs-verification'],
+      });
+
+      await github.rest.pulls.requestReviewers({
+        owner: context.repo.owner,
+        repo: context.repo.repo,
+        pull_number: pr.data.number,
+        team_reviewers: ['admins'],
+        reviewers: ['mokimo', 'overmyheadandbody', 'narcis-radu', 'robert-bogos'],
+      });
+    }
+  } catch (error) {
+    console.error(`An error occurred while running workflow for ${title}`, error);
+  }
+};
+
+if (localExecution) {
+  const { github, context } = require('./localWorkflowConfigs.js')();
+  main({
+    github,
+    context,
+    title: localRunConfigs.title,
+    path: localRunConfigs.path,
+    branch: localRunConfigs.branch,
+    scriptPath: localRunConfigs.scriptPath,
+    origin: localRunConfigs.origin,
+  });
+}
+
+module.exports = main;

.gitignore

@@ -6,3 +6,4 @@ node_modules/*
 .DS_Store
 .idea
 .iml
+.env

libs/blocks/merch-card/merch-card.js

@@ -15,10 +15,9 @@ const MULTI_OFFER_CARDS = ['plans', 'product', MINI_COMPARE_CHART];
 // Force cards to refresh once they become visible so that the footer rows are properly aligned.
 const intersectionObserver = new IntersectionObserver((entries) => {
   entries.forEach((entry) => {
-    const container = entry.target.closest('main > div');
-    if (!container) return;
-    [...container.querySelectorAll('merch-card')].forEach((card) => card.requestUpdate());
+    if (entry.target.clientHeight === 0) return;
     intersectionObserver.unobserve(entry.target);
+    entry.target.requestUpdate();
   });
 });
 
@@ -35,7 +34,7 @@ const isHeadingTag = (tagName) => /^H[2-5]$/.test(tagName);
 const isParagraphTag = (tagName) => tagName === 'P';
 
 const appendSlot = (slotEls, slotName, merchCard) => {
-  if (slotEls.length === 0) return;
+  if (slotEls.length === 0 && merchCard.variant !== MINI_COMPARE_CHART) return;
   const newEl = createTag(
     'p',
     { slot: slotName, class: slotName },
@@ -190,7 +189,7 @@ const simplifyHrs = (el) => {
   });
 };
 
-function extractQuantitySelect(el) {
+async function extractQuantitySelect(el) {
   const quantitySelectConfig = el.querySelector('ul');
   if (!quantitySelectConfig) return null;
   const configMarkup = quantitySelectConfig.querySelector('li');
@@ -202,7 +201,7 @@ function extractQuantitySelect(el) {
   const quantityValues = config[1].textContent.split(',').map((value) => value.trim())
     .filter((value) => /^\d+$/.test(value));
   if (quantityValues.length !== 3) return null;
-  import('../../deps/merch-quantity-select.js');
+  await import('../../deps/merch-quantity-select.js');
   [attributes.min, attributes.max, attributes.step] = quantityValues.map(Number);
   const quantitySelect = createTag('merch-quantity-select', attributes);
   quantitySelectConfig.remove();
@@ -240,8 +239,12 @@ const decorateFooterRows = (merchCard, footerRows) => {
 
 const setMiniCompareOfferSlot = (merchCard, offers) => {
   if (merchCard.variant !== MINI_COMPARE_CHART) return;
-  const miniCompareOffers = createTag('div', { slot: 'offers' }, offers);
-  if (offers === undefined) { miniCompareOffers.appendChild(createTag('p')); }
+  const miniCompareOffers = merchCard.querySelector('div[slot="offers"]');
+  if (offers) {
+    miniCompareOffers.append(offers);
+  } else {
+    miniCompareOffers.appendChild(createTag('p'));
+  }
   merchCard.appendChild(miniCompareOffers);
 };
 
@@ -306,10 +309,7 @@ const init = async (el) => {
   }
   let footerRows;
   if (cardType === MINI_COMPARE_CHART) {
-    const container = el.closest('[data-status="decorated"]');
-    if (container) {
-      intersectionObserver.observe(container);
-    }
+    intersectionObserver.observe(merchCard);
     footerRows = getMiniCompareChartFooterRows(el);
   }
   const images = el.querySelectorAll('picture');
@@ -386,7 +386,11 @@ const init = async (el) => {
   merchCard.appendChild(footer);
 
   if (MULTI_OFFER_CARDS.includes(cardType)) {
-    const quantitySelect = extractQuantitySelect(el);
+    if (merchCard.variant === MINI_COMPARE_CHART) {
+      const miniCompareOffers = createTag('div', { slot: 'offers' });
+      merchCard.append(miniCompareOffers);
+    }
+    const quantitySelect = await extractQuantitySelect(el, cardType);
     const offerSelection = el.querySelector('ul');
     if (offerSelection) {
       const { initOfferSelection } = await import('./merch-offer-select.js');

libs/blocks/merch-card/merch-offer-select.js

@@ -25,6 +25,7 @@ function createDynamicSlots(el, bodySlot) {
       const descriptionSlot = el.querySelector('p[slot="description"]');
       if (descriptionSlot) {
         descriptionSlot.innerHTML += description.innerHTML;
+        description.parentNode.removeChild(description);
       }
     }
   }

libs/blocks/modal/modal.js

@@ -179,7 +179,7 @@ export async function getModal(details, custom) {
 // Deep link-based
 export default function init(el) {
   const { modalHash } = el.dataset;
-  if (window.location.hash === modalHash) {
+  if (window.location.hash === modalHash && !document.querySelector(`div.dialog-modal${modalHash}`)) {
     const details = findDetails(window.location.hash, el);
     if (details) return getModal(details);
   }