From 79e5af16f6b25f343f144e4a7341c7e2e477a5b2 Mon Sep 17 00:00:00 2001
From: "Japheth Louie M. Gofredo" <83058948+japhethLG@users.noreply.github.com>
Date: Sat, 13 Jul 2024 11:47:40 +0800
Subject: [PATCH] fix: Error on Homepage Demo CTA (#2474)

# Description

Fix wrong props of homepage cta; Removed spans in headings for articles

Fixes #2472, #2473

## Type of change

Please delete options that are not relevant.

- [x] Bug fix (non-breaking change which fixes an issue)

# How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide
instructions so we can reproduce.

- [x] Manual Test

# Screenshots / Screen recording
Before:

![image](https://github.com/user-attachments/assets/ef1994f5-81ee-42cd-b185-a4d166c27417)

![image](https://github.com/user-attachments/assets/f49dd7ff-8872-4adf-a1c7-b866c280a9e2)

After:

![image](https://github.com/user-attachments/assets/416038be-33cd-4e60-8a58-1ec2a37fa71d)

![image](https://github.com/user-attachments/assets/0c761b0e-a65c-46cc-aeec-66182d8f5ae3)
---
 src/views/zesty/Article.js                   | 25 +++++++++++++++++++-
 src/views/zesty/Homepage/EnterpriseGrowth.js |  4 ++--
 2 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/src/views/zesty/Article.js b/src/views/zesty/Article.js
index 40dcaf1e1..3c08d10c5 100644
--- a/src/views/zesty/Article.js
+++ b/src/views/zesty/Article.js
@@ -89,6 +89,26 @@ function Article({ content }) {
   // Define a regular expression pattern to match [_CTA_]
   let regexPattern = /\[CALL TO ACTION (\d+)\]/g;
 
+  useEffect(() => {
+    const removeSpansInHeadings = (html) => {
+      let tempDiv = document.createElement('div');
+      tempDiv.innerHTML = html;
+
+      let headings = tempDiv.querySelectorAll('h1, h2, h3, h4, h5, h6');
+
+      headings.forEach((heading) => {
+        let spans = heading.querySelectorAll('span');
+        spans.forEach((span) => {
+          span.replaceWith(...span.childNodes);
+        });
+      });
+
+      return tempDiv.innerHTML;
+    };
+
+    setNewContent(removeSpansInHeadings(newContent));
+  }, [newContent]);
+
   useEffect(() => {
     const validateWysiwyg = () => {
       if (newContent?.includes('Error hydrating')) {
@@ -209,7 +229,10 @@ function Article({ content }) {
     ? `:is(span, p, h1, h2, h3, h4, h5, h6) :is(img) {
   width: auto;
   max-width: 100%;
-}`
+  }
+  :h1 span, :h2 span {
+    color: black;
+  }`
     : ``;
 
   // Match CTA component sort order id from array to return its props
diff --git a/src/views/zesty/Homepage/EnterpriseGrowth.js b/src/views/zesty/Homepage/EnterpriseGrowth.js
index 59f20d63c..b35efe140 100644
--- a/src/views/zesty/Homepage/EnterpriseGrowth.js
+++ b/src/views/zesty/Homepage/EnterpriseGrowth.js
@@ -6,12 +6,12 @@ const Child = dynamic(() => import('revamp/ui/EnterpriseGrowth'), {
   loading: Placeholder,
 });
 
-const Index = () => {
+const Index = (props) => {
   const { ref, inView } = useInView({
     triggerOnce: true,
     threshold: 0,
   });
-  return <div ref={ref}>{inView && <Child />}</div>;
+  return <div ref={ref}>{inView && <Child {...props} />}</div>;
 };
 
 export default Index;