From 355227939606169f1415bad157d095991cedc438 Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <contact@baptiste-arnaud.fr>
Date: Tue, 29 Mar 2022 14:57:53 +0200
Subject: [PATCH] =?UTF-8?q?fix(engine):=20=E2=9A=A1=EF=B8=8F=20Enforce=20l?=
 =?UTF-8?q?ite=20badge=20even=20when=20removed?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../bot-engine/src/components/LiteBadge.tsx   | 46 +++++++++++++++++++
 .../src/components/TypebotViewer.tsx          | 13 +-----
 2 files changed, 48 insertions(+), 11 deletions(-)
 create mode 100644 packages/bot-engine/src/components/LiteBadge.tsx

diff --git a/packages/bot-engine/src/components/LiteBadge.tsx b/packages/bot-engine/src/components/LiteBadge.tsx
new file mode 100644
index 00000000000..d3ae31b322b
--- /dev/null
+++ b/packages/bot-engine/src/components/LiteBadge.tsx
@@ -0,0 +1,46 @@
+import React, { useEffect, useRef } from 'react'
+import { useFrame } from 'react-frame-component'
+
+export const LiteBadge = () => {
+  const { document } = useFrame()
+  const liteBadge = useRef<HTMLAnchorElement | null>(null)
+
+  useEffect(() => {
+    const container = document.querySelector(
+      '[data-testid="container"]'
+    ) as HTMLDivElement
+    const observer = new MutationObserver(function (mutations_list) {
+      mutations_list.forEach(function (mutation) {
+        mutation.removedNodes.forEach(function (removed_node) {
+          if ((removed_node as HTMLElement).id == 'lite-badge') {
+            console.log('litebadge has been removed')
+            container.append(liteBadge.current as Node)
+          }
+        })
+      })
+    })
+    observer.observe(container, {
+      subtree: false,
+      childList: true,
+    })
+
+    return () => {
+      observer.disconnect()
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  return (
+    <a
+      ref={liteBadge}
+      href={'https://www.typebot.io/?utm_source=litebadge'}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="fixed py-1 px-2 bg-white z-50 rounded shadow-md lite-badge"
+      style={{ bottom: '20px' }}
+      id="lite-badge"
+    >
+      Made with <span className="text-blue-500">Typebot</span>.
+    </a>
+  )
+}
diff --git a/packages/bot-engine/src/components/TypebotViewer.tsx b/packages/bot-engine/src/components/TypebotViewer.tsx
index d6df9200212..99ff78c7e23 100644
--- a/packages/bot-engine/src/components/TypebotViewer.tsx
+++ b/packages/bot-engine/src/components/TypebotViewer.tsx
@@ -20,6 +20,7 @@ import {
   VariableWithValue,
 } from 'models'
 import { Log } from 'db'
+import { LiteBadge } from './LiteBadge'
 
 export type TypebotViewerProps = {
   typebot: PublicTypebot
@@ -113,17 +114,7 @@ export const TypebotViewer = ({
                 predefinedVariables={predefinedVariables}
               />
             </div>
-            {typebot.settings.general.isBrandingEnabled && (
-              <a
-                href={'https://www.typebot.io/?utm_source=litebadge'}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="fixed py-1 px-2 bg-white z-50 rounded shadow-md lite-badge"
-                style={{ bottom: '20px' }}
-              >
-                Made with <span className="text-blue-500">Typebot</span>.
-              </a>
-            )}
+            {typebot.settings.general.isBrandingEnabled && <LiteBadge />}
           </div>
         </AnswersContext>
       </TypebotContext>