From 2cdc2b43f50cc0bc2a3255ae2b34dbd9890fcacc Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <contact@baptiste-arnaud.fr>
Date: Fri, 23 Dec 2022 16:49:27 +0100
Subject: [PATCH] :bug: (settings) Fix custom head code with noscript injection

---
 apps/viewer/src/components/TypebotPage.tsx | 10 +++++++---
 packages/js/src/components/Bot.tsx         | 12 +++++++-----
 packages/utils/utils.ts                    | 20 ++++++++++++++++++++
 3 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/apps/viewer/src/components/TypebotPage.tsx b/apps/viewer/src/components/TypebotPage.tsx
index 940ef92813e..b60ea115ffb 100644
--- a/apps/viewer/src/components/TypebotPage.tsx
+++ b/apps/viewer/src/components/TypebotPage.tsx
@@ -2,7 +2,12 @@ import { TypebotViewer } from 'bot-engine'
 import { AnswerInput, PublicTypebot, Typebot, VariableWithValue } from 'models'
 import { useRouter } from 'next/router'
 import React, { useEffect, useState } from 'react'
-import { isDefined, isNotDefined, isNotEmpty } from 'utils'
+import {
+  injectCustomHeadCode,
+  isDefined,
+  isNotDefined,
+  isNotEmpty,
+} from 'utils'
 import { SEO } from './Seo'
 import { ErrorPage } from './ErrorPage'
 import { createResultQuery, updateResultQuery } from '@/features/results'
@@ -52,8 +57,7 @@ export const TypebotPage = ({
     })
     setPredefinedVariables(predefinedVariables)
     initializeResult().then()
-    if (isDefined(customHeadCode))
-      document.head.innerHTML = document.head.innerHTML + customHeadCode
+    if (isDefined(customHeadCode)) injectCustomHeadCode(customHeadCode)
     const gtmId = publishedTypebot.settings.metadata.googleTagManagerId
     if (isNotEmpty(gtmId)) document.body.prepend(gtmBodyElement(gtmId))
     // eslint-disable-next-line react-hooks/exhaustive-deps
diff --git a/packages/js/src/components/Bot.tsx b/packages/js/src/components/Bot.tsx
index 2c4b2aa809b..a394f0ae262 100644
--- a/packages/js/src/components/Bot.tsx
+++ b/packages/js/src/components/Bot.tsx
@@ -1,13 +1,17 @@
 import { LiteBadge } from './LiteBadge'
 import { createSignal, onCleanup, onMount, Show } from 'solid-js'
-import { getViewerUrl, isDefined, isNotEmpty } from 'utils'
+import {
+  getViewerUrl,
+  injectCustomHeadCode,
+  isDefined,
+  isNotEmpty,
+} from 'utils'
 import { getInitialChatReplyQuery } from '@/queries/getInitialChatReplyQuery'
 import { ConversationContainer } from './ConversationContainer'
 import css from '../assets/index.css'
 import { InitialChatReply, StartParams } from 'models'
 import { setIsMobile } from '@/utils/isMobileSignal'
 import { BotContext } from '@/types'
-import { injectHeadCode } from '@/utils/injectHeadCode'
 
 export type BotProps = StartParams & {
   initialChatReply?: InitialChatReply
@@ -25,9 +29,7 @@ export const Bot = (props: BotProps) => {
     if (isDefined(initialChatReplyValue)) {
       const customHeadCode =
         initialChatReplyValue.typebot.settings.metadata.customHeadCode
-      if (customHeadCode) {
-        injectHeadCode(customHeadCode)
-      }
+      if (customHeadCode) injectCustomHeadCode(customHeadCode)
     } else {
       const urlParams = new URLSearchParams(location.search)
       const prefilledVariables: { [key: string]: string } = {}
diff --git a/packages/utils/utils.ts b/packages/utils/utils.ts
index a0c059c0ae9..b6d07c7ff1d 100644
--- a/packages/utils/utils.ts
+++ b/packages/utils/utils.ts
@@ -283,3 +283,23 @@ export const getViewerUrl = (props?: {
 
 export const parseNumberWithCommas = (num: number) =>
   num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+
+export const injectCustomHeadCode = (customHeadCode: string) => {
+  const headCodes = customHeadCode.split('</noscript>')
+  headCodes.forEach((headCode) => {
+    const [codeToInject, noScriptContentToInject] = headCode.split('<noscript>')
+    const fragment = document
+      .createRange()
+      .createContextualFragment(codeToInject)
+    document.head.append(fragment)
+
+    if (isNotDefined(noScriptContentToInject)) return
+
+    const noScriptElement = document.createElement('noscript')
+    const noScriptContentFragment = document
+      .createRange()
+      .createContextualFragment(noScriptContentToInject)
+    noScriptElement.append(noScriptContentFragment)
+    document.head.append(noScriptElement)
+  })
+}