MWPW-146326 introduce promo text for all cards (#2483)

* MWPW-146326 refactor merch-card unit tests * MWPW-146326 introduce promo text for all merch cards except special offer cards. Also get rid of Devices text in slot['detail-m'] as per ticket decision * MWPW-146326 first set of feedbacks * MWPW-146326 removing only * MWPW-146326 some more changes * MWPW-146326 fixed new lint issues * MWPW-146326 make card UT more talkative * MWPW-146326 rename TEXT_STYLES * MWPW-146326 last changes * MWPW-146326 final commit from mas main
adobecom · Jun 26, 2024 · 7971880 · 7971880
1 parent 9e9751e
commit 7971880
Show file tree

Hide file tree

Showing 8 changed files with 215 additions and 262 deletions.
diff --git a/libs/blocks/merch-card/merch-card.js b/libs/blocks/merch-card/merch-card.js
@@ -28,13 +28,15 @@ const CARD_TYPES = [
 
 const CARD_SIZES = ['wide', 'super-wide'];
 
-const TEXT_STYLES = {
-  H5: 'detail-m',
+const SLOT_MAP_DEFAULT = {
+  H5: 'promo-text',
   H4: 'body-xxs',
   H3: 'heading-xs',
   H2: 'heading-m',
 };
 
+const SLOT_MAP = { 'special-offers': { H5: 'detail-m' } };
+
 const HEADING_MAP = {
   'special-offers': {
     H5: 'H4',
@@ -153,9 +155,7 @@ const parseContent = async (el, merchCard) => {
 
   if (merchCard.variant === MINI_COMPARE_CHART) {
     bodySlotName = 'body-m';
-    const promoText = el.querySelectorAll('h5');
     const priceSmallType = el.querySelectorAll('h6');
-    appendSlot(promoText, 'promo-text', merchCard);
     appendSlot(priceSmallType, 'price-commitment', merchCard);
   }
 
@@ -171,7 +171,7 @@ const parseContent = async (el, merchCard) => {
   innerElements.forEach((element) => {
     let { tagName } = element;
     if (isHeadingTag(tagName)) {
-      let slotName = TEXT_STYLES[tagName];
+      let slotName = SLOT_MAP[merchCard.variant]?.[tagName] || SLOT_MAP_DEFAULT[tagName];
       if (slotName) {
         if (['H2', 'H3', 'H4', 'H5'].includes(tagName)) {
           element.classList.add('card-heading');

diff --git a/libs/deps/merch-card.js b/libs/deps/merch-card.js
diff --git a/test/blocks/merch-card/merch-card.test.js b/test/blocks/merch-card/merch-card.test.js
diff --git a/test/blocks/merch-card/mocks/catalog.html b/test/blocks/merch-card/mocks/catalog.html
@@ -4,7 +4,7 @@
   }
 </style>
 <div class="section">
-  <div class="merch-card catalog ribbon">
+  <div class="merch-card catalog ribbon promo">
     <div>
       <div>#EDCC2D, #000000</div>
       <div>LOREM IPSUM DOLOR</div>
@@ -33,7 +33,7 @@
         </picture>
         <h2 id="individuals">INDIVIDUALS</h2>
         <h3 id="get-10-off-photoshop">Get 10% off Photoshop.</h3>
-        <h5>Desktop + Mobile</h5>
+        <h5>this promo is great <a href="#terms">see terms</a></h5>
         <p>Create gorgeous images, rich graphics, and incredible art. Save 10% for the first year. Ends Mar 20.</p>
         <p><a href="https://adobe.com/">See terms</a></p>
         <p><em><a href="https://business.adobe.com/">Learn More</a></em> <strong><a href="https://business.adobe.com/">Save now</a></strong></p>
@@ -63,7 +63,6 @@ <h5>Desktop + Mobile</h5>
         </picture>
         <h2 id="individuals1">INDIVIDUALS</h2>
         <h3 id="get-10-off-photoshop1">Get 10% off Photoshop.</h3>
-        <h5>Desktop + Mobile</h5>
         <p>Create gorgeous images, rich graphics, and incredible art. Save 10% for the first year. Ends Mar 20.</p>
         <p><a href="https://adobe.com/">See terms</a></p>
         <p><em><a href="https://business.adobe.com/">Learn More</a></em> <strong><a href="https://business.adobe.com/">Save now</a></strong></p>
@@ -81,7 +80,6 @@ <h5>Desktop + Mobile</h5>
         </picture>
         <h2 id="individuals2">INDIVIDUALS</h2>
         <h3 id="get-10-off-photoshop2">Get 10% off Photoshop.</h3>
-        <h5>Desktop + Mobile</h5>
         <p>Create gorgeous images, rich graphics, and incredible art. Save 10% for the first year. Ends Mar 20.</p>
         <p><a href="https://adobe.com/">See terms</a></p>
         <p><em><a href="https://business.adobe.com/">Learn More</a></em> <strong><a
@@ -104,7 +102,6 @@ <h5>Desktop + Mobile</h5>
         </picture>
         <h2 id="individuals1">INDIVIDUALS</h2>
         <h3 id="get-10-off-photoshop1">Get 10% off Photoshop.</h3>
-        <h5>Desktop + Mobile</h5>
         <p>Create gorgeous images, rich graphics, and incredible art. Save 10% for the first year. Ends Mar 20.</p>
         <p><a href="https://adobe.com/">See terms</a></p>
         <p><em><a href="https://business.adobe.com/">Learn More</a></em> <strong><a href="https://business.adobe.com/">Save now</a></strong></p>
@@ -122,7 +119,6 @@ <h5>Desktop + Mobile</h5>
         </picture>
         <h3>Photoshop</h3>
         <h2>US$79.99/mo</h2>
-        <h5>Desktop + Mobile</h5>
         <p>Create gorgeous images, rich graphics, and incredible art. Save 10% for the first year. Ends Mar 20.</p>
         <p><a href="https://adobe.com/">See terms</a></p>
         <p><em><a href="https://business.adobe.com/">Learn More</a></em> <strong><a href="https://business.adobe.com/">Save now</a></strong></p>

diff --git a/test/blocks/merch-card/mocks/intro-pricing.html b/test/blocks/merch-card/mocks/intro-pricing.html
@@ -15,6 +15,7 @@
             <h3>Photoshop</h3>
             <h2>US$79.99/mo</h2>
             <h4>Desktop + Mobile</h4>
+            <h5>this promo is great <a href="#terms">see terms</a></h5>
             <p>Create gorgeous images, rich graphics, and incredible art. Save 10% for the first year. Ends Mar 20.</p>
             <p><em><a href="https://business.adobe.com/">Learn More</a></em> <strong><a href="https://business.adobe.com/">Save now</a></strong></p>
         </div>

diff --git a/test/blocks/merch-card/mocks/mini-compare-chart.html b/test/blocks/merch-card/mocks/mini-compare-chart.html
@@ -93,6 +93,7 @@ <h2 id="price---abm---creative-cloud-all-apps-with-4tb-1"><a href="#">PRICE - AB
           <img loading="lazy" alt="" src="" width="5000" height="2812">
         </picture>
         <h2 id="illustrator">Illustrator</h2>
+        <h5>this promo is great <a href="#terms">see terms</a></h5>
         <p>Get Illustrator on desktop and iPad as part of Creative Cloud. <em>This is promo text</em></p>
         <p>Cloud storage:</p>
         <ul>

diff --git a/test/blocks/merch-card/mocks/plans-card.html b/test/blocks/merch-card/mocks/plans-card.html
@@ -38,7 +38,7 @@
         </picture>
         <h2 id="lorem-ipsum-dolor-sit-amet1"><em>Lorem ipsum dolor sit amet</em></h2>
         <h3 id="lorem-ipsum-dolor1">Lorem ipsum dolor</h3>
-        <h5>Maecenas porttitor enim.</h5>
+        <h5>this promo is great <a href="#terms">see terms</a></h5>
         <p>Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim.</p>
         <p><strong>Maecenas</strong></p>
         <p><a href="https://adobe.com/">See terms about lorem ipsum</a></p>
@@ -68,7 +68,6 @@ <h5>Maecenas porttitor enim.</h5>
         </picture>
         <h2 id="lorem-ipsum-dolor-sit-amet1"><em>Lorem ipsum dolor sit amet</em></h2>
         <h3 id="lorem-ipsum-dolor1">Lorem ipsum dolor</h3>
-        <h5>Maecenas porttitor enim.</h5>
         <p>Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim.</p>
         <p><strong>Maecenas</strong></p>
         <p><a href="https://adobe.com/">See terms about lorem ipsum</a></p>
@@ -97,7 +96,6 @@ <h5>Maecenas porttitor enim.</h5>
         </picture>
         <h2 id="lorem-ipsum-dolor-sit-amet"><em>Lorem ipsum dolor sit amet</em></h2>
         <h3 id="lorem-ipsum-dolor">Lorem ipsum dolor</h3>
-        <h5>Maecenas porttitor enim.</h5>
         <p>Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim.</p>
         <p><a href="https://adobe.com/">See terms about lorem ipsum</a></p>
         <p><em><a href="https://business.adobe.com/">Learn More</a></em> <strong><a href="https://business.adobe.com/">Save now</a></strong></p>

diff --git a/test/blocks/merch-card/mocks/segment-card.html b/test/blocks/merch-card/mocks/segment-card.html
@@ -5,6 +5,7 @@
     <div>
       <div>
         <h3 id="lorem-ipsum-dolor-sit-amet">Lorem ipsum dolor sit amet</h3>
+        <h5>this promo is great <a href="#terms">see terms</a></h5>
         <p>Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim.</p>
         <p><a href="https://www.adobe.com/">See what's included</a> | <a href="https://www.adobe.com/">Learn more</a></p>
         <p><strong><em><a href="https://business.adobe.com/">Learn More</a></em></strong> <strong><a href="https://business.adobe.com/">Save now</a></strong></p>