From 5f6c23bf75427fbe527bf167e99725d9ef103d29 Mon Sep 17 00:00:00 2001
From: maryia-matskevich-deriv
 <103181650+maryia-matskevich-deriv@users.noreply.github.com>
Date: Tue, 20 Aug 2024 07:14:22 +0300
Subject: [PATCH] [BOT]maryia/BOT-2108/refactor: Remove dangerouslySetInnerHTML
 (#16514)

* refactor: Remove dangerouslySetInnerHTML

* chore: Empty-Commit

* chore: Empty-Commit
---
 packages/bot-web-ui/package.json              |  1 +
 .../descriptions/strategy-description.tsx     | 27 ++++++++++++-------
 .../src/pages/tutorials/faq-content/index.tsx |  8 +++---
 3 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/packages/bot-web-ui/package.json b/packages/bot-web-ui/package.json
index c59394543f95..fd894baec8f5 100644
--- a/packages/bot-web-ui/package.json
+++ b/packages/bot-web-ui/package.json
@@ -104,6 +104,7 @@
         "react-router-dom": "^5.2.0",
         "react-toastify": "^9.1.3",
         "react-transition-group": "4.4.2",
+        "html-react-parser": "5.1.12",
         "yup": "^0.32.11"
     }
 }
diff --git a/packages/bot-web-ui/src/pages/bot-builder/quick-strategy/descriptions/strategy-description.tsx b/packages/bot-web-ui/src/pages/bot-builder/quick-strategy/descriptions/strategy-description.tsx
index 702cdf056c70..b27ca487eef0 100644
--- a/packages/bot-web-ui/src/pages/bot-builder/quick-strategy/descriptions/strategy-description.tsx
+++ b/packages/bot-web-ui/src/pages/bot-builder/quick-strategy/descriptions/strategy-description.tsx
@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import { Text } from '@deriv/components';
 import { observer, useStore } from '@deriv/stores';
 import { TStrategyDescription } from '../types';
+import parse from 'html-react-parser';
 
 const StrategyDescription = observer(({ item, font_size }: TStrategyDescription) => {
     const { ui } = useStore();
@@ -13,11 +14,14 @@ const StrategyDescription = observer(({ item, font_size }: TStrategyDescription)
             const class_names = classNames(`qs__description__content ${class_name}`);
             return (
                 <>
-                    {item?.content?.map((text: string) => (
-                        <div className={class_names} key={text}>
-                            <Text size={font_size} dangerouslySetInnerHTML={{ __html: text }} />
-                        </div>
-                    ))}
+                    {item?.content?.map((text: string) => {
+                        const parsed_text = parse(text);
+                        return (
+                            <div className={class_names} key={text}>
+                                <Text size={font_size}>{parsed_text}</Text>
+                            </div>
+                        );
+                    })}
                 </>
             );
         }
@@ -25,11 +29,14 @@ const StrategyDescription = observer(({ item, font_size }: TStrategyDescription)
             const class_names = classNames(`qs__description__content italic ${class_name}`);
             return (
                 <>
-                    {item?.content?.map((text: string) => (
-                        <div className={class_names} key={text}>
-                            <Text size={font_size} dangerouslySetInnerHTML={{ __html: text }} />
-                        </div>
-                    ))}
+                    {item?.content?.map((text: string) => {
+                        const parsed_text = parse(text);
+                        return (
+                            <div className={class_names} key={text}>
+                                <Text size={font_size}>{parsed_text}</Text>
+                            </div>
+                        );
+                    })}
                 </>
             );
         }
diff --git a/packages/bot-web-ui/src/pages/tutorials/faq-content/index.tsx b/packages/bot-web-ui/src/pages/tutorials/faq-content/index.tsx
index 83bc82959552..3447dcda6753 100644
--- a/packages/bot-web-ui/src/pages/tutorials/faq-content/index.tsx
+++ b/packages/bot-web-ui/src/pages/tutorials/faq-content/index.tsx
@@ -5,6 +5,7 @@ import { Localize } from '@deriv/translations';
 import { DBOT_TABS } from 'Constants/bot-contents';
 import { useDBotStore } from 'Stores/useDBotStore';
 import { TDescription } from '../tutorials.types';
+import parse from 'html-react-parser';
 
 type TFAQContent = {
     faq_list: TFAQList[];
@@ -19,7 +20,7 @@ type TFAQList = {
 
 const FAQ = ({ type, content = '', src, imageclass, is_mobile }: TDescription) => {
     if (type === 'image') return <img src={src} className={imageclass} />;
-
+    const parsed_content = parse(content);
     return (
         <Text
             as='p'
@@ -28,8 +29,9 @@ const FAQ = ({ type, content = '', src, imageclass, is_mobile }: TDescription) =
             className='faq__description'
             weight='normal'
             key={content}
-            dangerouslySetInnerHTML={{ __html: content }}
-        />
+        >
+            {parsed_content}
+        </Text>
     );
 };