MWPW-175016 [OST] add strikethrough template for promotion price

studio/ost/index.css

@@ -22,7 +22,7 @@ button.promo-tag-button {
 .no-promo {
   opacity: 0.2;
 }
-.price-strikethrough {
+.price-strikethrough, .price-promo-strikethrough {
   text-decoration: line-through;
 }
 .placeholders-list {

web-components/src/inline-price.js

@@ -210,7 +210,6 @@ export class InlinePrice extends HTMLSpanElement {
     }
 
     static createInlinePrice(options) {
-        // eslint-disable-next-line react-hooks/rules-of-hooks
         const service = getService();
         if (!service) return null;
         const {
@@ -311,7 +310,6 @@ export class InlinePrice extends HTMLSpanElement {
      */
     async render(overrides = {}) {
         if (!this.isConnected) return false;
-        // eslint-disable-next-line react-hooks/rules-of-hooks
         const service = getService();
         if (!service) return false;
         const priceOptions = service.collectPriceOptions(overrides, this);
@@ -326,7 +324,7 @@ export class InlinePrice extends HTMLSpanElement {
             const [offerSelectors] =
                 await service.resolveOfferSelectors(options);
             let offers = selectOffers(await offerSelectors, options);
-            let [offer] = offers;
+            const [offer] = offers;
 
             if (service.featureFlags[FF_DEFAULTS] || options[FF_DEFAULTS]) {
                 if (priceOptions.displayPerUnit === undefined) {
@@ -382,7 +380,6 @@ export class InlinePrice extends HTMLSpanElement {
      */
     renderOffers(offers, options, version = undefined) {
         if (!this.isConnected) return;
-        // eslint-disable-next-line react-hooks/rules-of-hooks
         const service = getService();
         if (!service) return false;
         version ??= this.masElement.togglePending();

web-components/src/price.js

@@ -4,6 +4,7 @@ import {
     pricePromo,
     priceOptical,
     priceStrikethrough,
+    pricePromoStrikethrough,
     priceAnnual,
     priceWithAnnual,
     pricePromoWithAnnual,
@@ -90,6 +91,9 @@ export function Price({ literals, providers, settings }) {
             case 'strikethrough':
                 method = priceStrikethrough;
                 break;
+            case 'promo-strikethrough':
+                method = pricePromoStrikethrough;
+                break;
             case 'annual':
                 method = priceAnnual;
                 break;

web-components/src/price/index.js

@@ -17,6 +17,9 @@ const priceOptical = createPriceTemplate({
 const priceStrikethrough = createPriceTemplate({
     displayStrikethrough: true,
 });
+const pricePromoStrikethrough = createPriceTemplate({
+    displayPromoStrikethrough: true,
+});
 const priceAnnual = createPriceTemplate({
     displayAnnual: true,
 });
@@ -38,6 +41,7 @@ export {
     pricePromo,
     priceOptical,
     priceStrikethrough,
+    pricePromoStrikethrough,
     priceAnnual,
     priceAlternative,
     priceOpticalAlternative,

web-components/src/price/template.js

@@ -41,6 +41,7 @@ export const cssClassNames = {
     container: 'price',
     containerOptical: 'price-optical',
     containerStrikethrough: 'price-strikethrough',
+    containerPromoStrikethrough: 'price-promo-strikethrough',
     containerAlternative: 'price-alternative',
     containerAnnual: 'price-annual',
     containerAnnualPrefix: 'price-annual-prefix',
@@ -215,6 +216,7 @@ const createPriceTemplate =
         isAlternativePrice = false,
         displayOptical = false,
         displayStrikethrough = false,
+        displayPromoStrikethrough = false,
         displayAnnual = false,
         instant = undefined,
     } = {}) =>
@@ -269,7 +271,10 @@ const createPriceTemplate =
         let displayPrice;
 
         if (promotion && !isPromoApplied && priceWithoutDiscount) {
-            displayPrice = isAlternativePrice ? price : priceWithoutDiscount;
+            displayPrice =
+                isAlternativePrice || displayPromoStrikethrough
+                    ? price
+                    : priceWithoutDiscount;
         } else if (displayStrikethrough && priceWithoutDiscount) {
             displayPrice = priceWithoutDiscount;
         } else {
@@ -368,6 +373,9 @@ const createPriceTemplate =
         if (displayStrikethrough) {
             cssClass += ' ' + cssClassNames.containerStrikethrough;
         }
+        if (displayPromoStrikethrough) {
+            cssClass += ' ' + cssClassNames.containerPromoStrikethrough;
+        }
         if (isAlternativePrice) {
             cssClass += ' ' + cssClassNames.containerAlternative;
         }

web-components/test/price/index.test.js

@@ -5,6 +5,7 @@ import {
     price,
     priceOptical,
     priceStrikethrough,
+    pricePromoStrikethrough,
     priceAnnual,
     priceWithAnnual,
     pricePromoWithAnnual,
@@ -37,6 +38,7 @@ Object.entries({
     price,
     priceOptical,
     priceStrikethrough,
+    pricePromoStrikethrough,
     priceAnnual,
     priceWithAnnual,
     pricePromoWithAnnual,

web-components/test/price/template.test.js

@@ -144,6 +144,16 @@ describe('function "createPriceTemplate"', () => {
             );
         });
 
+        it('uses priceWithoutDiscount when displayPromoStrikethrough is true', function () {
+            const template = createPriceTemplate({
+                displayPromoStrikethrough: true,
+            });
+            renderAndComparePrice(
+                'createPriceTemplatePromoStrikethrough',
+                template(context, valueDiscount, {}),
+            );
+        });
+
         it('uses price in default case', function () {
             const template = createPriceTemplate();
             renderAndComparePrice(