Merge pull request #251 from adobecom/MWPW-167662

feat(mwpw-167662): add ability to have alt cta work with overlays
adobecom · Feb 25, 2025 · 22404e3 · 22404e3
2 parents 6b7fe18 + 85f3f0b
commit 22404e3
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 14 deletions.
diff --git a/dist/app.css b/dist/app.css
diff --git a/dist/main.js b/dist/main.js
@@ -1,5 +1,5 @@
 /*!
- * Chimera UI Libraries - Build 0.30.2 (2/24/2025, 09:27:47)
+ * Chimera UI Libraries - Build 0.30.3 (2/25/2025, 12:39:16)
  *         
  */
 /******/ (function(modules) { // webpackBootstrap
@@ -47042,7 +47042,7 @@ var Card = function Card(props) {
     var registrationUrl = getConfig('collection', 'banner.register.url');
     var hideDateInterval = getConfig('collection', 'hideDateInterval');
     var showCardBadges = getConfig('collection', 'showCardBadges');
-    var altCta = getConfig('collection', 'dynamicCTAForLiveEvents');
+    var altCtaUsed = getConfig('collection', 'dynamicCTAForLiveEvents');
     var ctaAction = getConfig('collection', 'ctaAction');
 
     /**
@@ -47129,6 +47129,26 @@ var Card = function Card(props) {
         });
     }
 
+    /**
+     * Extends footer data and extracts an alt CTA if it exists
+     * this is important for when overlay links are being used for live events
+     * @param {Array} footerData
+     * @return {String}
+     */
+    function getAltCtaLink(footerData) {
+        if (!footerData) return '';
+        if (footerData.length === 1) {
+            var _footerData$0$altCta = footerData[0].altCta,
+                altCta = _footerData$0$altCta === undefined ? [] : _footerData$0$altCta;
+
+            if (altCta.length === 1) {
+                return altCta[0].href;
+            }
+        }
+        // default value is an unauthored alt cta
+        return '';
+    }
+
     // Card styles
     var isOneHalf = cardStyle === 'one-half';
     var isThreeFourths = cardStyle === 'three-fourths';
@@ -47150,7 +47170,7 @@ var Card = function Card(props) {
     var showText = !isHalfHeight && !isFull && !isNews;
     var showFooter = isOneHalf || isProduct || isText || isNews;
     var showFooterLeft = !isProduct;
-    var showFooterCenter = !isProduct && !altCta;
+    var showFooterCenter = !isProduct && !altCtaUsed;
     var hideBanner = false;
     var eventBanner = '';
     var hideOnDemandDates = hideDateInterval && (0, _general.isDateAfterInterval)((0, _general.getCurrentDate)(), endDate);
@@ -47195,7 +47215,10 @@ var Card = function Card(props) {
 
     var linkBlockerTarget = (0, _general.getLinkTarget)(overlayLink, ctaAction);
     var addParams = new URLSearchParams(additionalParams);
-    var overlay = additionalParams && addParams.keys().next().value ? overlayLink + '?' + addParams.toString() : overlayLink;
+    var overlayParams = additionalParams && addParams.keys().next().value ? overlayLink + '?' + addParams.toString() : overlayLink;
+    var isLive = (0, _general.isDateWithinInterval)((0, _general.getCurrentDate)(), startDate, endDate);
+    var altCtaLink = getAltCtaLink(footer);
+    var overlay = altCtaUsed && isLive && altCtaLink !== '' ? altCtaLink : overlayParams;
     var getsFocus = isHalfHeight || isThreeFourths || isFull || isDoubleWide || isIcon || hideCTA;
 
     return _react2.default.createElement(
@@ -47329,7 +47352,7 @@ var Card = function Card(props) {
                     left: showFooterLeft && !hideOnDemandDates ? extendFooterData(footerItem.left) : [],
                     center: showFooterCenter ? extendFooterData(footerItem.center) : [],
                     right: extendFooterData(footerItem.right),
-                    altRight: altCta ? extendFooterData(footerItem.altCta) : [],
+                    altRight: altCtaUsed ? extendFooterData(footerItem.altCta) : [],
                     startDate: startDate,
                     endDate: endDate,
                     cardStyle: cardStyle,

diff --git a/dist/main.min.js b/dist/main.min.js
diff --git a/dist/main.source.js b/dist/main.source.js
diff --git a/react/src/js/components/Consonant/Cards/Card.jsx b/react/src/js/components/Consonant/Cards/Card.jsx
@@ -13,7 +13,7 @@ import CardFooter from './CardFooter/CardFooter';
 import prettyFormatDate from '../Helpers/prettyFormat';
 import { INFOBIT_TYPE } from '../Helpers/constants';
 import { hasTag } from '../Helpers/Helpers';
-import { getEventBanner, getLinkTarget, isDateBeforeInterval, isDateAfterInterval, getCurrentDate, getSearchParam } from '../Helpers/general';
+import { getEventBanner, getLinkTarget, isDateBeforeInterval, isDateWithinInterval, isDateAfterInterval, getCurrentDate, getSearchParam } from '../Helpers/general';
 import { useConfig, useRegistered } from '../Helpers/hooks';
 import {
     stylesType,
@@ -177,7 +177,7 @@ const Card = (props) => {
     const registrationUrl = getConfig('collection', 'banner.register.url');
     const hideDateInterval = getConfig('collection', 'hideDateInterval');
     const showCardBadges = getConfig('collection', 'showCardBadges');
-    const altCta = getConfig('collection', 'dynamicCTAForLiveEvents');
+    const altCtaUsed = getConfig('collection', 'dynamicCTAForLiveEvents');
     const ctaAction = getConfig('collection', 'ctaAction');
 
     /**
@@ -273,6 +273,26 @@ const Card = (props) => {
         });
     }
 
+    /**
+     * Extends footer data and extracts an alt CTA if it exists
+     * this is important for when overlay links are being used for live events
+     * @param {Array} footerData
+     * @return {String}
+     */
+    function getAltCtaLink(footerData) {
+        if (!footerData) return '';
+        if (footerData.length === 1) {
+            const {
+                altCta = [],
+            } = footerData[0];
+            if (altCta.length === 1) {
+                return altCta[0].href;
+            }
+        }
+        // default value is an unauthored alt cta
+        return '';
+    }
+
     // Card styles
     const isOneHalf = cardStyle === 'one-half';
     const isThreeFourths = cardStyle === 'three-fourths';
@@ -294,7 +314,7 @@ const Card = (props) => {
     const showText = !isHalfHeight && !isFull && !isNews;
     const showFooter = isOneHalf || isProduct || isText || isNews;
     const showFooterLeft = !isProduct;
-    const showFooterCenter = !isProduct && !altCta;
+    const showFooterCenter = !isProduct && !altCtaUsed;
     let hideBanner = false;
     let eventBanner = '';
     const hideOnDemandDates = hideDateInterval && isDateAfterInterval(getCurrentDate(), endDate);
@@ -345,7 +365,10 @@ const Card = (props) => {
 
     const linkBlockerTarget = getLinkTarget(overlayLink, ctaAction);
     const addParams = new URLSearchParams(additionalParams);
-    const overlay = (additionalParams && addParams.keys().next().value) ? `${overlayLink}?${addParams.toString()}` : overlayLink;
+    const overlayParams = (additionalParams && addParams.keys().next().value) ? `${overlayLink}?${addParams.toString()}` : overlayLink;
+    const isLive = isDateWithinInterval(getCurrentDate(), startDate, endDate);
+    const altCtaLink = getAltCtaLink(footer);
+    const overlay = (altCtaUsed && isLive && altCtaLink !== '') ? altCtaLink : overlayParams;
     const getsFocus = isHalfHeight
         || isThreeFourths
         || isFull
@@ -494,7 +517,7 @@ const Card = (props) => {
                             extendFooterData(footerItem.left) : []}
                         center={showFooterCenter ? extendFooterData(footerItem.center) : []}
                         right={extendFooterData(footerItem.right)}
-                        altRight={altCta ? extendFooterData(footerItem.altCta) : []}
+                        altRight={altCtaUsed ? extendFooterData(footerItem.altCta) : []}
                         startDate={startDate}
                         endDate={endDate}
                         cardStyle={cardStyle}