MWPW-140041: Update merch block for release 3 (#1600)

MWPW-140041: Update merch block for release 3

libs/blocks/commerce/commerce.js

@@ -97,7 +97,7 @@ export async function handleOfferSearch(event, el) {
   const osi = searchParams.get('osi');
   if (osi != null) {
     const service = await initService();
-    const [promise] = await service.resolveOfferSelectors({ offerSelectorIds: [osi] });
+    const [promise] = await service.resolveOfferSelectors({ wcsOsi: [osi] });
     const [offer] = await promise;
     await decorateOfferDetails(el, offer, searchParams);
   } else {

libs/blocks/merch-card/legacy-merch-card.css

@@ -154,9 +154,9 @@
   font-size: var(--type-heading-xs-size);
 }
 
-.merch-card .consonant-SegmentBlade-description span.placeholder-resolved[data-template="priceStrikethrough"],
-.merch-card .consonant-SpecialOffers-description span.placeholder-resolved[data-template="priceStrikethrough"],
-.merch-card .consonant-PlansCard-description span.placeholder-resolved[data-template="priceStrikethrough"] {
+.merch-card .consonant-SegmentBlade-description span.placeholder-resolved[data-template="strikethrough"],
+.merch-card .consonant-SpecialOffers-description span.placeholder-resolved[data-template="strikethrough"],
+.merch-card .consonant-PlansCard-description span.placeholder-resolved[data-template="strikethrough"] {
   font-size: var(--type-body-xs-size);
 }
 

libs/blocks/merch/merch.css

@@ -7,7 +7,7 @@ span[data-wcs-osi] {
   display: inline-block;
 }
 
-span.placeholder-resolved[data-template="priceStrikethrough"], span.price.price-strikethrough {
+span.placeholder-resolved[data-template="strikethrough"], span.price.price-strikethrough {
   text-decoration: line-through;
 }
 

libs/blocks/merch/merch.js

@@ -2,6 +2,11 @@ import { getConfig, loadScript } from '../../utils/utils.js';
 
 export const priceLiteralsURL = 'https://milo.adobe.com/libs/commerce/price-literals.json';
 
+export const PRICE_TEMPLATE_DISCOUNT = 'discount';
+export const PRICE_TEMPLATE_OPTICAL = 'optical';
+export const PRICE_TEMPLATE_REGULAR = 'price';
+export const PRICE_TEMPLATE_STRIKETHROUGH = 'strikethrough';
+
 export function polyfills() {
   /* c8 ignore start */
   if (!polyfills.promise) {
@@ -24,6 +29,9 @@ export function polyfills() {
   /* c8 ignore stop */
 }
 
+/**
+ * Activates commerce service and returns a promise resolving to its ready-to-use instance.
+ */
 export async function initService() {
   await polyfills();
   const commerce = await import('../../deps/commerce.js');
@@ -38,7 +46,7 @@ export async function getCommerceContext(el, params) {
   if (!wcsOsi) return null;
   const perpetual = params.get('perp') === 'true' || undefined;
   const promotionCode = (
-    params.get('promo') ?? el.closest('[data-promotion-code]')?.dataset.promotionCode
+    params.get('promo') ?? params.get('promotionCode') ?? el.closest('[data-promotion-code]')?.dataset.promotionCode
   ) || undefined;
   return { promotionCode, perpetual, wcsOsi };
 }
@@ -79,8 +87,24 @@ export async function getPriceContext(el, params) {
   const displayRecurrence = params.get('term');
   const displayTax = params.get('tax');
   const forceTaxExclusive = params.get('exclusive');
-  const type = params.get('type');
-  const template = type === 'price' ? undefined : type;
+  let template = PRICE_TEMPLATE_REGULAR;
+  // This mapping also supports legacy OST links
+  switch (params.get('type')) {
+    case PRICE_TEMPLATE_DISCOUNT:
+    case 'priceDiscount':
+      template = PRICE_TEMPLATE_DISCOUNT;
+      break;
+    case PRICE_TEMPLATE_OPTICAL:
+    case 'priceOptical':
+      template = PRICE_TEMPLATE_OPTICAL;
+      break;
+    case PRICE_TEMPLATE_STRIKETHROUGH:
+    case 'priceStrikethrough':
+      template = PRICE_TEMPLATE_STRIKETHROUGH;
+      break;
+    default:
+      break;
+  }
   return {
     ...context,
     displayOldPrice,
@@ -120,7 +144,7 @@ export default async function init(el) {
   const isCta = searchParams.get('type') === 'checkoutUrl';
   const merch = await (isCta ? buildCta : buildPrice)(el, searchParams);
   const service = await initService();
-  const log = service.log.module('merch');
+  const log = service.Log.module('merch');
   if (merch) {
     log.debug('Rendering:', { options: { ...merch.dataset }, merch, el });
     el.replaceWith(merch);

libs/deps/merch-card.js

@@ -526,7 +526,7 @@ merch-card.has-divider hr {
     margin-bottom: var(--spacing-xxs);
 }
 
-merch-card[variant="special-offers"] span[is="inline-price"][data-template="priceStrikethrough"] {
+merch-card[variant="special-offers"] span[is="inline-price"][data-template="strikethrough"] {
     font-size: var(--consonant-merch-card-body-xs-font-size);
 }
 

test/blocks/merch/merch.test.js

@@ -2,6 +2,9 @@ import { readFile } from '@web/test-runner-commands';
 import { expect } from '@esm-bundle/chai';
 
 import merch, {
+  PRICE_TEMPLATE_DISCOUNT,
+  PRICE_TEMPLATE_OPTICAL,
+  PRICE_TEMPLATE_STRIKETHROUGH,
   buildCta,
   getCheckoutContext,
   priceLiteralsURL,
@@ -30,9 +33,6 @@ const validatePriceSpan = async (selector, expectedAttributes) => {
   ));
   const { nodeName, dataset } = await el.onceSettled();
   expect(nodeName).to.equal('SPAN');
-  if (!expectedAttributes.template) {
-    expect(dataset.template).to.be.undefined;
-  }
   Object.keys(expectedAttributes).forEach((key) => {
     const value = expectedAttributes[key];
     expect(dataset[key], ` ${key} should equal ${value}`).to.equal(value);
@@ -69,7 +69,7 @@ describe('Merch Block', () => {
     expect(await merch(el)).to.be.null;
   });
 
-  describe('Prices', () => {
+  describe('prices', () => {
     it('renders merch link to price without term (new)', async () => {
       await validatePriceSpan('.merch.price.hide-term', { displayRecurrence: 'false' });
     });
@@ -91,25 +91,32 @@ describe('Merch Block', () => {
     });
 
     it('renders merch link to strikethrough price with term, seat and tax', async () => {
-      await validatePriceSpan('.merch.price.strikethrough', { template: 'strikethrough' });
+      await validatePriceSpan('.merch.price.strikethrough', { template: PRICE_TEMPLATE_STRIKETHROUGH });
     });
 
     it('renders merch link to optical price with term, seat and tax', async () => {
-      await validatePriceSpan('.merch.price.optical', { template: 'optical' });
+      await validatePriceSpan('.merch.price.optical', { template: PRICE_TEMPLATE_OPTICAL });
+    });
+
+    it('renders merch link to discount price', async () => {
+      await validatePriceSpan('.merch.price.discount', { template: PRICE_TEMPLATE_DISCOUNT });
     });
 
     it('renders merch link to tax exclusive price with tax exclusive attribute', async () => {
       await validatePriceSpan('.merch.price.tax-exclusive', { forceTaxExclusive: 'true' });
     });
   });
 
-  describe('Promo Prices', () => {
+  describe('promo prices', () => {
     it('renders merch link to promo price with discount', async () => {
       await validatePriceSpan('.merch.price.oldprice', { promotionCode: undefined });
     });
 
     it('renders merch link to promo price without discount', async () => {
-      await validatePriceSpan('.merch.strikethrough.oldprice', { template: 'strikethrough', promotionCode: undefined });
+      await validatePriceSpan('.merch.strikethrough.oldprice', {
+        template: PRICE_TEMPLATE_STRIKETHROUGH,
+        promotionCode: undefined,
+      });
     });
 
     it('renders merch link to promo price with discount', async () => {
@@ -121,13 +128,16 @@ describe('Merch Block', () => {
     });
   });
 
-  describe('Promo Prices in a fragment', () => {
+  describe('promo prices in a fragment', () => {
     it('renders merch link to promo price with discount', async () => {
       await validatePriceSpan('.fragment .merch.price.oldprice', { promotionCode: undefined });
     });
 
     it('renders merch link to promo price without discount', async () => {
-      await validatePriceSpan('.fragment .merch.strikethrough.oldprice', { template: 'strikethrough', promotionCode: undefined });
+      await validatePriceSpan('.fragment .merch.strikethrough.oldprice', {
+        template: PRICE_TEMPLATE_STRIKETHROUGH,
+        promotionCode: undefined,
+      });
     });
 
     it('renders merch link to promo price with discount', async () => {
@@ -279,15 +289,15 @@ describe('Merch Block', () => {
     });
   });
 
-  describe('Function "getCheckoutContext"', () => {
+  describe('function "getCheckoutContext"', () => {
     it('returns null if context params do not have osi', async () => {
       const el = document.createElement('a');
       const params = new URLSearchParams();
       expect(await getCheckoutContext(el, params)).to.be.null;
     });
   });
 
-  describe('Function "buildCta"', () => {
+  describe('function "buildCta"', () => {
     it('returns null if context params do not have osi', async () => {
       const el = document.createElement('a');
       const params = new URLSearchParams();

test/blocks/merch/mocks/body.html

@@ -39,6 +39,11 @@ <h3>Optical price</h3>
   href="/tools/ost?osi=08&type=optical&seat=true&tax=true">Price - 632B3ADD940A7FBB7864AA5AD19B8D28 - All Apps </a>
 </p>
 
+<h3>Discount price</h3>
+<p>Display term, seat and tax texts: <a class="merch price discount"
+  href="/tools/ost?osi=08&type=discount">Price - 632B3ADD940A7FBB7864AA5AD19B8D28 - All Apps </a>
+</p>
+
 <h2>Promo prices</h2>
 <p>Price without discount: <a class="merch price oldprice"
   href="/tools/ost?osi=09&type=price&promo=">Price - 632B3ADD940A7FBB7864AA5AD19B8D28 - All Apps </a> - <a class="merch cta nopromo"