Merge branch 'stage' of github.com:adobecom/milo into MWPW-160011

libs/blocks/editorial-card/editorial-card.css

@@ -44,6 +44,10 @@
   box-shadow: 0 3px 6px 0  rgba(0 0 0 / 16%);
 }
 
+.editorial-card .action-area a:not([class*="button"]) {
+  font-size: var(--type-body-s-size);
+}
+
 .editorial-card.static-links-copy .foreground a:not([class*="button"]) {
   color: inherit;
   text-decoration: underline;

libs/blocks/global-navigation/utilities/utilities.js

@@ -340,9 +340,9 @@ export async function fetchAndProcessPlainHtml({ url, shouldDecorateLinks = true
   if (mepFragment?.targetManifestId) body.dataset.adobeTargetTestid = mepFragment.targetManifestId;
   const commands = mepGnav?.commands;
   if (commands?.length) {
-    const { handleCommands, deleteMarkedEls } = await import('../../../features/personalization/personalization.js');
+    /* c8 ignore next 3 */
+    const { handleCommands } = await import('../../../features/personalization/personalization.js');
     handleCommands(commands, body, true, true);
-    deleteMarkedEls(body);
   }
   const inlineFrags = [...body.querySelectorAll('a[href*="#_inline"]')];
   if (inlineFrags.length) {

libs/blocks/merch/au-merch.css

@@ -0,0 +1,71 @@
+.table .row-heading .col-heading .pricing {
+  display: flex;
+  flex-direction: column;
+}
+
+.table .row-heading .col-heading .pricing .price-annual-prefix:before {
+  content: '\A';
+  white-space: pre;
+}
+
+@media (max-width: 480px) {
+  .table .row .col .price-annual-prefix:before {
+    content: '\A';
+    white-space: pre;
+  }
+
+  .table .row .col .price-annual-prefix,
+  .table .row .col .price-annual-prefix + .price-annual,
+  .table .row .col .price-annual-suffix {
+    position: relative;
+    left: -4px;
+  }
+}
+
+.table .row-heading .col-heading .pricing .price-annual-prefix,
+.table .row-heading .col-heading .pricing .price-annual-prefix + .price-annual,
+.table .row-heading .col-heading .pricing .price-annual-suffix {
+  font-size: var(--type-heading-xxs-size);
+  line-height: var(--type-heading-xxs-size);
+  font-weight: 400;
+  position: relative;
+  left: -3px;
+}
+
+merch-card [slot='heading-m'] [is="inline-price"] .price-annual-prefix:before {
+  content: '\A';
+  white-space: pre;
+}
+merch-card [slot='heading-m'] [is="inline-price"] .price-annual-prefix,
+merch-card [slot='heading-m'] [is="inline-price"] .price-annual-prefix + .price-annual,
+merch-card [slot='heading-m'] [is="inline-price"] .price-annual-suffix {
+  font-size: 16px;
+  line-height: 16px;
+  font-weight: 400;
+  position: relative;
+  left: -6px;
+}
+
+merch-card[variant="mini-compare-chart"] [slot="heading-m-price"] {
+  display: flex;
+  flex-direction: column;
+}
+
+merch-card[variant="mini-compare-chart"] .card-heading [is="inline-price"] .price-annual-prefix:before {
+  content: '\A';
+  white-space: pre;
+}
+
+merch-card[variant="mini-compare-chart"] .card-heading [is="inline-price"] .price-annual-prefix,
+merch-card[variant="mini-compare-chart"] .card-heading [is="inline-price"] .price-annual-prefix + .price-annual,
+merch-card[variant="mini-compare-chart"] .card-heading [is="inline-price"] .price-annual-suffix {
+  font-size: 16px;
+  line-height: 16px;
+  font-weight: 400;
+  position: relative;
+  left: -4px;
+}
+
+merch-card[variant="mini-compare-chart"] .card-heading [is="inline-price"][data-template="price"] {
+  display: inline;
+}

libs/blocks/merch/merch.js

@@ -579,7 +579,7 @@ export async function initService(force = false, attributes = {}) {
   });
   initService.promise = initService.promise ?? polyfills().then(async () => {
     await import('../../deps/mas/commerce.js');
-    const { language, locale } = getMiloLocaleSettings(miloLocale);
+    const { language, locale, country } = getMiloLocaleSettings(miloLocale);
     let service = document.head.querySelector('mas-commerce-service');
     if (!service) {
       service = createTag('mas-commerce-service', {
@@ -598,6 +598,9 @@ export async function initService(force = false, attributes = {}) {
         if (isSignedIn) fetchEntitlements();
       });
     }
+    if (country === 'AU') {
+      await loadStyle(`${getConfig().base}/blocks/merch/au-merch.css`);
+    }
     return service;
   });
   return initService.promise;

libs/features/mas/build-docs.mjs

@@ -88,6 +88,7 @@ const htmlTemplate = `
     });
     document.head.appendChild(masCommerceService);
   </script>
+  <link rel="stylesheet" href="https://use.typekit.net/hah7vzn.css">
   <!-- Include Highlight.js stylesheet for syntax highlighting -->
   <link rel="stylesheet" href="../../../styles/styles.css">
   <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">

libs/features/mas/commerce/package.json

@@ -16,7 +16,7 @@
         "test:ci": "wtr --config ./web-test-runner.config.mjs --coverage"
     },
     "dependencies": {
-        "@dexter/tacocat-consonant-templates": "file:./internal/tacocat-consonant-templates-1.13.0.tgz",
+        "@dexter/tacocat-consonant-templates": "file:./internal/tacocat-consonant-templates-1.14.0.tgz",
         "@dexter/tacocat-core": "file:./internal/tacocat-core-1.13.0.tgz",
         "@pandora/commerce-checkout-url-builder": "file:./internal/commerce-checkout-url-builder-1.6.0.tgz",
         "@pandora/data-models-odm": "file:./internal/data-models-odm-0.5.4.tgz",

libs/features/mas/commerce/src/external.js

@@ -13,6 +13,8 @@ import {
     priceStrikethrough,
     priceAnnual,
     discount,
+    priceWithAnnual,
+    pricePromoWithAnnual,
 } from '@dexter/tacocat-consonant-templates';
 import {
     computePromoStatus,
@@ -76,6 +78,8 @@ export {
     priceOptical,
     priceStrikethrough,
     priceAnnual,
+    priceWithAnnual,
+    pricePromoWithAnnual,
     discount,
     toBoolean,
     toEnumeration,

libs/features/mas/commerce/src/price.js

@@ -5,6 +5,8 @@ import {
     priceOptical,
     priceStrikethrough,
     priceAnnual,
+    priceWithAnnual,
+    pricePromoWithAnnual,
     omitProperties,
     toBoolean,
     discount,
@@ -95,7 +97,11 @@ export function Price({ literals, providers, settings }) {
                 method = priceAnnual;
                 break;
             default:
-                method = options.promotionCode ? pricePromo : price;
+                if (options.country === 'AU' && offers[0].planType === 'ABM') {
+                    method = options.promotionCode ? pricePromoWithAnnual : priceWithAnnual;
+                } else {
+                    method = options.promotionCode ? pricePromo : price;
+                }
         }
 
         const context = collectPriceOptions(options);

libs/features/mas/commerce/test/price.test.js

@@ -625,11 +625,41 @@ describe('class "InlinePrice"', () => {
 });
 
 describe('commerce service', () => {
+    const offers = [
+        {
+            priceDetails: {
+                price: 32.98,
+                priceWithoutTax: 29.99,
+                usePrecision: true,
+                formatString: "'A$'#,##0.00",
+                taxDisplay: 'TAX_INCLUSIVE_DETAILS',
+                taxTerm: 'GST',
+            },
+            planType: 'ABM'
+        }
+    ];
     describe('function "buildPriceHTML"', () => {
         it('returns empty string if no orders provided', async () => {
             const { buildPriceHTML } = await initMasCommerceService();
             expect(buildPriceHTML([])).to.be.empty;
         });
+
+        it('returns empty string if no orders provided - AU with promo', async () => {
+            const { buildPriceHTML } = await initMasCommerceService();
+            const options = {
+                country: 'AU',
+                promotionCode: 'promo'
+            };
+            expect(buildPriceHTML(offers, options)).to.be.html(snapshots.auAbmAnnual);
+        });
+
+        it('returns empty string if no orders provided - AU no promo', async () => {
+            const { buildPriceHTML } = await initMasCommerceService();
+            const options = {
+                country: 'AU'
+            };
+            expect(buildPriceHTML(offers, options)).to.be.html(snapshots.auAbmAnnual);
+        });
     });
     describe('function "direct price calls"', () => {
       it('works as expected', async () => {
@@ -643,6 +673,10 @@ describe('commerce service', () => {
           buildPriceHTML({ priceDetails:{} }, { template: 'strikethrough', ...options });
           buildPriceHTML({ priceDetails:{} }, { template: 'optical', ...options });
           buildPriceHTML({ priceDetails:{} }, { template: 'annual', ...options });
+          buildPriceHTML(offers, { country: 'US' });
+          buildPriceHTML(offers, { country: 'US', promotionCode: 'promo' });
+          buildPriceHTML(offers, { country: 'AU' });
+          buildPriceHTML(offers, { country: 'AU', promotionCode: 'promo' });
       });
   });
 });

libs/features/mas/docs/ccd.html

@@ -34,7 +34,8 @@
       });
       document.head.appendChild(masCommerceService);
     </script>
-    <link rel="stylesheet" href="../../../styles/styles.css">
+    <!-- Fonts -->
+    <link rel="stylesheet" href="https://use.typekit.net/hah7vzn.css">
     <!-- Include any additional stylesheets -->
     <link rel="stylesheet" href="styles.css">
 </head>
@@ -43,22 +44,23 @@
   <main>
     <sp-theme color="light" scale="medium"> 
       <div class="gallery-content">
-        <div class="vpn-banner">
-          Please enable VPN
-        </div>
 
         <h1 id="ccd-gallery" tabindex="-1">CCD Gallery <a class="header-anchor" href="#ccd-gallery" href="#ccd-gallery" title="Permalink to this heading">#</a></h1>
         Switch Theme: <a href="?theme=dark">Dark</a> OR <a href="?theme=light">Light</a>
 
         <h2 id="ccd-slice-card" tabindex="-1">CCD Slice Card <a class="header-anchor" href="#ccd-slice-card" href="#ccd-slice-card" title="Permalink to this heading">#</a></h2>
         <div class="gallery-grid-3">
-          <h5>Percentage</h5>
-          <h5>Two icons & pricing</h5>
-          <h5>See Terms link</h5>
+          <h3>Percentage</h3>
+          <h3>Two icons & pricing</h3>
+          <h3>See Terms link</h3>
           <merch-card><aem-fragment fragment="0ef2a804-e788-4959-abb8-b4d96a18b0ef"></aem-fragment></merch-card>
           <merch-card><aem-fragment fragment="58c7906f-70a6-4e2b-bc29-257ff2ade513"></aem-fragment></merch-card>
           <merch-card><aem-fragment fragment="51c23f28-504f-450d-9764-0e60f1e279b2"></aem-fragment></merch-card>
+            <h3>Arbitrary Text</h3>
+            <h3>With Badge</h3>
+            <h3></h3>
           <merch-card><aem-fragment fragment="2a293069-1f9a-45ae-9840-2fa0303fe685"></aem-fragment></merch-card>
+            <merch-card><aem-fragment fragment="3d26df5b-0784-4967-8149-8a9e59131084"></aem-fragment></merch-card>
         </div>
 
         <h2 id="ccd-slice-wide-card" tabindex="-1">CCD Slice Wide Card <a class="header-anchor" href="#ccd-slice-wide-card" href="#ccd-slice-wide-card" title="Permalink to this heading">#</a></h2>
@@ -69,20 +71,21 @@ <h2 id="ccd-slice-wide-card" tabindex="-1">CCD Slice Wide Card <a class="header-
 
         <h2 id="ccd-suggested-card" tabindex="-1">CCD Suggested Card <a class="header-anchor" href="#ccd-suggested-card" href="#ccd-suggested-card" title="Permalink to this heading">#</a></h2>
         <div class="gallery-grid-3">
-          <h5>With eyebrow</h5>
-          <h5>See Terms link</h5>
-          <h5>No eyebrow, price with term</h5>
+          <h3>With eyebrow</h3>
+          <h3>See Terms link</h3>
+          <h3>No eyebrow, price with term</h3>
           <merch-card><aem-fragment fragment="0a2ac7c9-1965-488e-beca-856849305313"></aem-fragment></merch-card>
           <merch-card><aem-fragment fragment="549f6981-f5c8-4512-b41c-313d60f375b2"></aem-fragment></merch-card>
           <merch-card><aem-fragment fragment="8b198434-f32d-4a77-8be0-cd6b9f7155b1"></aem-fragment></merch-card>
           <merch-card><aem-fragment fragment="cdfae8c5-4129-43bc-a283-9ce46d07e21f"></aem-fragment></merch-card>
           <merch-card><aem-fragment fragment="33c8f437-3c39-48cc-8afd-938a13af5732"></aem-fragment></merch-card>
           <merch-card><aem-fragment fragment="45783ec8-ed85-4595-a445-3f018ac4ad9d"></aem-fragment></merch-card>
           <merch-card><aem-fragment fragment="6217fb6d-e793-4235-af70-6f82401fc5de"></aem-fragment></merch-card>
+            <merch-card><aem-fragment fragment="215273c2-183d-41a1-983e-ccb462ace666"></aem-fragment></merch-card>
         </div>
         <div class="gallery-grid-2">
-          <h5>With thin strip</h5>
-          <h5>With wide strip</h5>
+          <h3>With thin strip</h3>
+          <h3>With wide strip</h3>
           <merch-card><aem-fragment fragment="93fdba19-3d43-49a7-ae48-0a10605da304"></aem-fragment></merch-card>
           <merch-card><aem-fragment fragment="b253109f-9bc6-4ee2-8aea-1a0918b0b9c9"></aem-fragment></merch-card>
         </div>

libs/features/mas/docs/checkout-link.html

@@ -29,6 +29,7 @@
     });
     document.head.appendChild(masCommerceService);
   </script>
+  <link rel="stylesheet" href="https://use.typekit.net/hah7vzn.css">
   <!-- Include Highlight.js stylesheet for syntax highlighting -->
   <link rel="stylesheet" href="../../../styles/styles.css">
   <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">

libs/features/mas/docs/inline-price.html

@@ -29,6 +29,7 @@
     });
     document.head.appendChild(masCommerceService);
   </script>
+  <link rel="stylesheet" href="https://use.typekit.net/hah7vzn.css">
   <!-- Include Highlight.js stylesheet for syntax highlighting -->
   <link rel="stylesheet" href="../../../styles/styles.css">
   <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">

libs/features/mas/docs/mas.html

@@ -29,6 +29,7 @@
     });
     document.head.appendChild(masCommerceService);
   </script>
+  <link rel="stylesheet" href="https://use.typekit.net/hah7vzn.css">
   <!-- Include Highlight.js stylesheet for syntax highlighting -->
   <link rel="stylesheet" href="../../../styles/styles.css">
   <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">

libs/features/mas/docs/mas.js.html

@@ -29,6 +29,7 @@
     });
     document.head.appendChild(masCommerceService);
   </script>
+  <link rel="stylesheet" href="https://use.typekit.net/hah7vzn.css">
   <!-- Include Highlight.js stylesheet for syntax highlighting -->
   <link rel="stylesheet" href="../../../styles/styles.css">
   <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">

libs/features/mas/docs/merch-card.html

@@ -29,6 +29,7 @@
     });
     document.head.appendChild(masCommerceService);
   </script>
+  <link rel="stylesheet" href="https://use.typekit.net/hah7vzn.css">
   <!-- Include Highlight.js stylesheet for syntax highlighting -->
   <link rel="stylesheet" href="../../../styles/styles.css">
   <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">
@@ -167,7 +168,7 @@ <h3 id="properties" tabindex="-1">Properties <a class="header-anchor" href="#pro
 <tbody>
 <tr>
 <td><code>updateComplete</code></td>
-<td>a promise that resolves when the <code>merch-card</code> finishes to execute render method. Doesn’t mean that card is ready, for that use ‘mas:ready’ or ‘mas:error’ event.</td>
+<td>a promise that resolves when the <code>merch-card</code> finishes to execute render method. Doesn’t mean that card is ready, for that use ‘mas:ready’ or ‘mas:error’ event. method. Doesn’t mean that card is ready, for that use ‘mas:ready’ or ‘mas:error’ event.</td>
 </tr>
 </tbody>
 </table>

libs/features/mas/docs/styles.css

@@ -8,6 +8,7 @@ sp-theme {
   width: 100%;
   max-width: 1200px;
   font-family:
+    adobe-clean,
     var(
       --mod-body-sans-serif-font-family,
       var(--spectrum-body-sans-serif-font-family)
@@ -140,15 +141,3 @@ button {
   grid-template-columns: 1fr;
   gap: 20px;
 }
-
-.vpn-banner {
-  background-color: #f8d7da; /* Light red */
-  color: #721c24; /* Dark red text */
-  padding: 15px;
-  text-align: center;
-  border: 1px solid #f5c6cb;
-  border-radius: 5px;
-  font-family: Arial, sans-serif;
-  font-size: 18px;
-  margin-bottom: 20px;
-}