From 2720e5567aabcd4406e6ae0980188d69bbbb85a4 Mon Sep 17 00:00:00 2001
From: Matthew Oliveira <m4olivei@gmail.com>
Date: Wed, 18 Dec 2024 10:32:15 -0500
Subject: [PATCH] fix(cta): cause ctas to only respond to relevant video events
 (#12169)

* fix(cta): cause ctas to only respond to relevant video events

* fix(cta): only add href where needed

* fix(cta): avoid change to link-list-item-cta

---------

Co-authored-by: Andy Blum <andy.blum.01@gmail.com>
---
 .../src/components/cta/button-cta.ts               |  6 ++++++
 packages/web-components/src/components/cta/cta.ts  | 14 +++++++++++---
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/packages/web-components/src/components/cta/button-cta.ts b/packages/web-components/src/components/cta/button-cta.ts
index d55fd318b72..1e2f905a7df 100644
--- a/packages/web-components/src/components/cta/button-cta.ts
+++ b/packages/web-components/src/components/cta/button-cta.ts
@@ -78,6 +78,12 @@ class C4DButtonCTA extends VideoCTAMixin(CTAMixin(C4DButtonGroupItem)) {
   @property({ reflect: true, attribute: 'cta-type' })
   ctaType = CTA_TYPE.REGULAR;
 
+  /**
+   * Link `href`.
+   */
+  @property({ attribute: 'href' })
+  href?: string;
+
   /**
    * The formatter for the video caption, composed with the video name and the video duration.
    * Should be changed upon the locale the UI is rendered with.
diff --git a/packages/web-components/src/components/cta/cta.ts b/packages/web-components/src/components/cta/cta.ts
index 84282761ef5..516e151c8c9 100644
--- a/packages/web-components/src/components/cta/cta.ts
+++ b/packages/web-components/src/components/cta/cta.ts
@@ -20,6 +20,7 @@ import {
   formatVideoDuration,
 } from '@carbon/ibmdotcom-utilities/es/utilities/formatVideoCaption/formatVideoCaption.js';
 import { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';
+import { CTA_TYPE } from './defs';
 
 const { stablePrefix: c4dPrefix } = settings;
 
@@ -55,6 +56,9 @@ class C4DCTAHead extends HostListenerMixin(StableSelectorMixin(LitElement)) {
   @property({ reflect: true })
   thumbnail;
 
+  @property({ attribute: 'href' })
+  href?: string;
+
   updated() {
     // transpose attributes from parent cta handler to desired cta style
     Array.from(this.attributes).forEach((e) => {
@@ -79,13 +83,17 @@ class C4DCTAHead extends HostListenerMixin(StableSelectorMixin(LitElement)) {
   // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
   private _handleVideoTitleUpdate = async (event: FocusEvent) => {
     if (event) {
-      const { videoDuration, videoName } = event.detail as any;
+      const { videoDuration, videoName, videoId } = event.detail as any;
       const formattedVideoDuration = formatVideoDuration({
         duration: !videoDuration ? videoDuration : videoDuration * 1000,
       });
       this.videoDuration ? null : (this.videoDuration = formattedVideoDuration);
-
-      if (this.ctaStyle !== 'card' && this.ctaStyle !== 'feature') {
+      if (
+        this.ctaStyle !== 'card' &&
+        this.ctaStyle !== 'feature' &&
+        this.ctaType === CTA_TYPE.VIDEO &&
+        (this as any).href === videoId
+      ) {
         const heading = formatVideoCaption({
           duration: formattedVideoDuration,
           name: videoName,