Merge branch 'main' into methomas/marketo-html

adobecom · Jan 8, 2024 · 99dd553 · 99dd553
2 parents ab62824 + ba21fa0
commit 99dd553
Show file tree

Hide file tree

Showing 8 changed files with 114 additions and 5 deletions.
diff --git a/.github/workflows/auto-merge-main-to-stage.yml b/.github/workflows/auto-merge-main-to-stage.yml
@@ -0,0 +1,23 @@
+name: PRs to main
+on: 
+  pull_request:
+    branches: [main]
+    types: [closed]
+jobs:
+  merge-main-to-stage:
+    if: github.event.pull_request.merged == true
+    timeout-minutes: 2
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v2
+    - name: Set Git config
+      run: |
+          git config user.email "[email protected]"
+          git config user.name "github-actions"
+    - name: Merge main to stage
+      run: |
+          git fetch
+          git checkout stage
+          git pull
+          git merge --no-ff main -m "Auto-merge main to stage"
+          git push
diff --git a/libs/blocks/media/media.css b/libs/blocks/media/media.css
@@ -170,6 +170,7 @@ div[class*="-up"] .media .foreground > .media-row {
   padding-bottom: 0;
   padding-top: 0;
   display: inline-flex;
+  margin-top: var(--spacing-xxs);
 }
 
 .media.qr-code .google-play {
@@ -341,8 +342,9 @@ div[class*="-up"] .media .foreground > .media-row {
 
   .media.qr-code img.qr-code-img {
     display: flex;
-    width: 150px;
-    height: 170px;
+    width: 140px;
+    height: 140px;
+    margin-top: var(--spacing-s);
   }
 
   .media.qr-code .qr-button-container {

diff --git a/libs/blocks/media/media.js b/libs/blocks/media/media.js
@@ -72,7 +72,7 @@ export default function init(el) {
 
     // qr code
     if (row.closest('.qr-code')) {
-      const imgQRCode = row.querySelector('.text > p.body-s > picture > img');
+      const imgQRCode = row.querySelector('.text img');
       if (imgQRCode) {
         imgQRCode.classList.add('qr-code-img');
       }

diff --git a/libs/blocks/merch/README.md b/libs/blocks/merch/README.md
@@ -0,0 +1,30 @@
+# Commerce Settings
+
+## WCS Locale
+To check which locale was used to render the price/CTA:
+* In the network tab search for a 'wcs' request, e.g.
+https://wcs.adobe.com/web_commerce_artifact?offer_selector_ids=PpnQ-UmW9NBwZwXlFw79zw2JybhvwIUwMTDYiIlu5qI&country=DE&language=MULT&locale=de_DE&api_key=wcms-commerce-ims-ro-user-milo&landscape=PUBLISHED
+* The 'country' parameter decides the format and exact price
+
+### Where does the WCS 'country' parameter come from?
+* Check the 'lang' parameter value on your page (it's set on <html> tag)
+* If the value is special, e.g. 'africa', Commerce(tacocat) will do the mapping. Below is an example of GeoMap, for the latest visit [tacocat project](https://git.corp.adobe.com/wcms/tacocat.js)
+```
+const GeoMap = {
+    africa: 'en-ZA',
+    mena_en: 'en-DZ',
+    il_he: 'iw-IL',
+    mena_ar: 'ar-DZ',
+    id_id: 'in-ID',
+    no: 'nb-NO',
+    cis_en: 'en-AZ',
+    cis_ru: 'ru-AZ',
+    SEA: 'en-SG',
+};
+```
+* If the value is in format 'xx-YY' (case doesn't matter), for example 'en-GB', Commerce will split it in the 'xx' becoming a language and 'YY' a country.
+* If the value is in format 'xx', language only, e.g. 'hi', Commerce will set language to hindi, but fetch US prices, as US is a default value for country
+* In there is no value set, 'en' language and 'US' country is used
+
+### Where does the 'lang' value come from?
+scripts.js file, see 'locales' object, 'ietf' value.
diff --git a/libs/blocks/ost/README.md b/libs/blocks/ost/README.md
@@ -23,3 +23,13 @@ perform the following:
 - open devtools console,
 - execute `copy(adobeIMS.getAccessToken().token)`,
 - add token to OST URL querystring, e.g.: `https://mwpw-127984--milo--vladen.hlx.page/tools/ost?token=eyJhb...`
+
+## Settings
+
+| Parameter                    | WCS & AOS Env    |  WCS & AOS landscape   |  Example                                               |
+| :---:   | :---: | :---: | :---: |
+| default (no parameter)       | Prod             | PUBLISHED              | https://milo.adobe.com/tools/ost                       |
+| ?wcsLandscape                | Prod             | DRAFT                  | https://milo.adobe.com/tools/ost?wcsLandscape=DRAFT    |
+| ?env=stage                   | Stage            | ALL                    | https://milo.adobe.com/tools/ost?env=stage             |
+
+Please note that the last parameter is not yet fully functional (env=stage). It will switch OST to use aos-stg env but will still use the prod token, so OST won't find any offer. This is to be fixed when the need to use env=stage comes.
diff --git a/libs/utils/utils.js b/libs/utils/utils.js
@@ -239,7 +239,7 @@ export function isInTextNode(node) {
   return node.parentElement.firstChild.nodeType === Node.TEXT_NODE;
 }
 
-export function createTag(tag, attributes, html) {
+export function createTag(tag, attributes, html, options = {}) {
   const el = document.createElement(tag);
   if (html) {
     if (html instanceof HTMLElement
@@ -257,6 +257,7 @@ export function createTag(tag, attributes, html) {
       el.setAttribute(key, val);
     });
   }
+  options.parent?.append(el);
   return el;
 }
 

diff --git a/test/blocks/media/media.test.js b/test/blocks/media/media.test.js
@@ -1,6 +1,7 @@
-import { readFile } from '@web/test-runner-commands';
+import { readFile, setViewport } from '@web/test-runner-commands';
 import { expect } from '@esm-bundle/chai';
 
+document.head.innerHTML = "<link rel='stylesheet' href='../../../libs/blocks/media/media.css'>";
 document.body.innerHTML = await readFile({ path: './mocks/body.html' });
 const { default: init } = await import('../../../libs/blocks/media/media.js');
 describe('media', () => {
@@ -67,6 +68,33 @@ describe('media', () => {
       const appStoreCta = medias[5].querySelector('a.app-store');
       expect(appStoreCta).to.exist;
     });
+    it('desktop view has visibile qr code image and no google-play and app-store CTA', async () => {
+      await setViewport({ width: 1200, height: 100 });
+      const qrCodeImg = medias[5].querySelector('img.qr-code-img');
+      const qrCTA = medias[5].querySelectorAll('.qr-button-container');
+      expect(window.getComputedStyle(qrCodeImg).getPropertyValue('display')).not.to.equal('none');
+      qrCTA.forEach((cta) => {
+        expect(window.getComputedStyle(cta).getPropertyValue('display')).to.equal('none');
+      });
+    });
+    it('mobile view has visibile google-play and app-store CTA and no qr code image', async () => {
+      await setViewport({ width: 600, height: 100 });
+      const qrCodeImg = medias[5].querySelector('img.qr-code-img');
+      const qrCTA = medias[5].querySelectorAll('.qr-button-container');
+      expect(window.getComputedStyle(qrCodeImg).getPropertyValue('display')).to.equal('none');
+      qrCTA.forEach((cta) => {
+        expect(window.getComputedStyle(cta).getPropertyValue('display')).not.to.equal('none');
+      });
+    });
+    it('tablet view has visibile google-play and app-store CTA and no qr code image', async () => {
+      await setViewport({ width: 1199, height: 100 });
+      const qrCodeImg = medias[5].querySelector('img.qr-code-img');
+      const qrCTA = medias[5].querySelectorAll('.qr-button-container');
+      expect(window.getComputedStyle(qrCodeImg).getPropertyValue('display')).to.equal('none');
+      qrCTA.forEach((cta) => {
+        expect(window.getComputedStyle(cta).getPropertyValue('display')).not.to.equal('none');
+      });
+    });
   });
   describe('with bio variant', () => {
     it('has a bio avatar and icon-stack area', () => {

diff --git a/test/utils/utils.test.js b/test/utils/utils.test.js
@@ -3,6 +3,7 @@ import { expect } from '@esm-bundle/chai';
 import sinon from 'sinon';
 import { waitFor, waitForElement } from '../helpers/waitfor.js';
 import { mockFetch } from '../helpers/generalHelpers.js';
+import { createTag } from '../../libs/utils/utils.js';
 
 const utils = {};
 
@@ -572,6 +573,20 @@ describe('Utils', () => {
     });
   });
 
+  describe('createTag', async () => {
+    /**
+       * create tag creates a tag from first parameter tag name,
+       * second parameter is requested attributes map in created tag,
+       * third parameter is the innerHTML of the tag, can be either node or text,
+       * fourth parameter is an object of creation options:
+       *  - @parent parent element to append the tag to.
+       */
+    createTag('var', { class: 'foo' }, 'bar', { parent: document.body });
+    const varTag = document.querySelector('body > var.foo');
+    expect(varTag).to.exist;
+    expect(varTag.textContent).to.equal('bar');
+  });
+
   describe('personalization', async () => {
     const MANIFEST_JSON = {
       info: { total: 2, offset: 0, limit: 2, data: [{ key: 'manifest-type', value: 'Personalization' }, { key: 'manifest-override-name', value: '' }, { key: 'name', value: '1' }] }, placeholders: { total: 0, offset: 0, limit: 0, data: [] }, experiences: { total: 1, offset: 0, limit: 1, data: [{ action: 'insertContentAfter', selector: '.marquee', 'page filter (optional)': '/products/special-offers', chrome: 'https://main--milo--adobecom.hlx.page/drafts/mariia/fragments/personalizationtext' }] }, ':version': 3, ':names': ['info', 'placeholders', 'experiences'], ':type': 'multi-sheet',