MWPW-162795: Complimentary/Product Entry CTAs

libs/blocks/fallback/fallback.js

@@ -17,6 +17,7 @@ const SYNTHETIC_BLOCKS = [
   'region-selector',
   'search',
   'social',
+  'product-entry-cta',
 ];
 
 // eslint-disable-next-line import/prefer-default-export

libs/blocks/global-navigation/global-navigation.css

@@ -86,6 +86,11 @@ header.global-navigation {
   z-index: 1;
 }
 
+/* Product Entry CTA */
+.feds-product-entry-cta{
+  align-items: center;
+}
+
 /* Hamburger toggle */
 .feds-toggle {
   width: 60px;
@@ -488,6 +493,12 @@ header.global-navigation {
   right: auto;
 }
 
+@media (max-width: 900px) {
+  .feds-product-entry-cta {
+    display: none;
+  }
+}
+
 /* Desktop styles */
 @media (min-width: 900px) {
   /* General */

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

@@ -347,6 +347,14 @@ class Gnav {
       lanaLog({ message: 'GNAV: Error with IMS', e, tags: 'errorType=info,module=gnav' });
     }));
 
+  decorateProductEntryCTA = () => {
+    const button = this.content.querySelector('.product-entry-cta a');
+    if (!button) return null;
+    const cta = decorateCta({ elem: button, type: this.getMainNavItemType(button) });
+    cta.closest('.feds-cta-wrapper').classList.add('feds-product-entry-cta');
+    return cta;
+  };
+
   decorateTopNav = () => {
     this.elements.mobileToggle = this.decorateToggle();
     this.elements.topnav = toFragment`
@@ -356,6 +364,7 @@ class Gnav {
           ${this.decorateBrand()}
         </div>
         ${this.elements.navWrapper}
+        ${getMetadata('product-entry-cta')?.toLowerCase() === 'on' ? this.decorateProductEntryCTA() : ''}
         ${getConfig().searchEnabled === 'on' ? toFragment`<div class="feds-client-search"></div>` : ''}
         ${this.useUniversalNav ? this.blocks.universalNav : ''}
         ${(!this.useUniversalNav && this.blocks.profile.rawElem) ? this.blocks.profile.decoratedElem : ''}

test/blocks/global-navigation/global-navigation.test.js

@@ -21,6 +21,7 @@ import darkNav from './mocks/dark-global-navigation.plain.js';
 import navigationWithCustomLinks from './mocks/navigation-with-custom-links.plain.js';
 import globalNavigationMock from './mocks/global-navigation.plain.js';
 import noDropdownNav from './mocks/global-navigation-no-dropdown.plain.js';
+import productEntryCTA from './mocks/global-navigation-product-entry-cta.plain.js';
 import { getConfig } from '../../../tools/send-to-caas/send-utils.js';
 
 // TODO
@@ -665,6 +666,22 @@ describe('global navigation', () => {
     });
   });
 
+  describe('Product Entry CTA feature in global navigation', () => {
+    it('should not append the feds-product-entry-cta class when product entry cta is disabled', async () => {
+      document.head.innerHTML = '<meta name="product-entry-cta" content="off"/>';
+      const gnav = await createFullGlobalNavigation({ globalNavigation: productEntryCTA });
+      gnav.decorateProductEntryCTA();
+      expect(document.querySelector(selectors.topNav).querySelector('.feds-cta-wrapper.feds-product-entry-cta')).to.not.exist;
+    });
+
+    it('should append the feds-product-entry-cta class when product entry cta is enabled', async () => {
+      document.head.innerHTML = '<meta name="product-entry-cta" content="on" />';
+      const gnav = await createFullGlobalNavigation({ globalNavigation: productEntryCTA });
+      gnav.decorateProductEntryCTA();
+      expect(document.querySelector(selectors.topNav).querySelector('.feds-cta-wrapper.feds-product-entry-cta')).to.exist;
+    });
+  });
+
   describe('Custom Links for mobile hamburger menu', () => {
     it('Add custom links through Link Group block in parallel to large menu\'s', async () => {
       const customLinks = 'home,apps,learn';

test/blocks/global-navigation/mocks/global-navigation-product-entry-cta.plain.js

@@ -0,0 +1,9 @@
+export default `
+<div>
+  <div class="product-entry-cta">
+    <div>
+      <div><strong><a href="https://adobe.com/">Go To Acrobat</a></strong></div>
+    </div>
+  </div>
+</div> 
+`;