fix(engine): ⚡️ Enforce lite badge even when removed

baptisteArno · Mar 29, 2022 · 3552279 · 3552279 · vercel · Mar 29, 2022
1 parent d43623b
commit 3552279
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 11 deletions.
diff --git a/packages/bot-engine/src/components/LiteBadge.tsx 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
@@ -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>