From f9e0cef6fe99d9c99492aa79d727bfb9f4826f13 Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <baptiste.arnaud95@gmail.com>
Date: Thu, 25 Jan 2024 12:59:40 +0100
Subject: [PATCH] :bug: (share) Fix bubble button default background in embed
 modals

Closes #1165
---
 .../embeds/modals/IframeModal/IframeSnippet.tsx      |  2 +-
 .../instructions/JavascriptBubbleInstructions.tsx    |  5 ++++-
 .../Script/instructions/ScriptBubbleInstructions.tsx | 12 +-----------
 3 files changed, 6 insertions(+), 13 deletions(-)

diff --git a/apps/builder/src/features/publish/components/embeds/modals/IframeModal/IframeSnippet.tsx b/apps/builder/src/features/publish/components/embeds/modals/IframeModal/IframeSnippet.tsx
index 569956037..f6d90021b 100644
--- a/apps/builder/src/features/publish/components/embeds/modals/IframeModal/IframeSnippet.tsx
+++ b/apps/builder/src/features/publish/components/embeds/modals/IframeModal/IframeSnippet.tsx
@@ -15,7 +15,7 @@ export const IframeSnippet = ({ widthLabel, heightLabel }: Props) => {
   const { typebot } = useTypebot()
   const src = `${env.NEXT_PUBLIC_VIEWER_URL[0]}/${typebot?.publicId}`
   const code = prettier.format(
-    `<iframe src="${src}" style="border: none; width=${widthLabel}; height=${heightLabel}"></iframe>`,
+    `<iframe src="${src}" style="border: none; width: ${widthLabel}; height: ${heightLabel}"></iframe>`,
     { parser: 'html', plugins: [parserHtml] }
   )
 
diff --git a/apps/builder/src/features/publish/components/embeds/modals/Javascript/instructions/JavascriptBubbleInstructions.tsx b/apps/builder/src/features/publish/components/embeds/modals/Javascript/instructions/JavascriptBubbleInstructions.tsx
index 97cd8f382..f9f2fc465 100644
--- a/apps/builder/src/features/publish/components/embeds/modals/Javascript/instructions/JavascriptBubbleInstructions.tsx
+++ b/apps/builder/src/features/publish/components/embeds/modals/Javascript/instructions/JavascriptBubbleInstructions.tsx
@@ -5,10 +5,13 @@ import { Typebot } from '@typebot.io/schemas'
 import { useState } from 'react'
 import { BubbleSettings } from '../../../settings/BubbleSettings/BubbleSettings'
 import { JavascriptBubbleSnippet } from '../JavascriptBubbleSnippet'
+import { defaultTheme } from '@typebot.io/schemas/features/typebot/theme/constants'
 
 export const parseDefaultBubbleTheme = (typebot?: Typebot) => ({
   button: {
-    backgroundColor: typebot?.theme.chat?.buttons?.backgroundColor,
+    backgroundColor:
+      typebot?.theme.chat?.buttons?.backgroundColor ??
+      defaultTheme.chat.buttons.backgroundColor,
   },
 })
 
diff --git a/apps/builder/src/features/publish/components/embeds/modals/Script/instructions/ScriptBubbleInstructions.tsx b/apps/builder/src/features/publish/components/embeds/modals/Script/instructions/ScriptBubbleInstructions.tsx
index cb0fada7f..9ecfc1ee2 100644
--- a/apps/builder/src/features/publish/components/embeds/modals/Script/instructions/ScriptBubbleInstructions.tsx
+++ b/apps/builder/src/features/publish/components/embeds/modals/Script/instructions/ScriptBubbleInstructions.tsx
@@ -2,7 +2,6 @@ import { CodeEditor } from '@/components/inputs/CodeEditor'
 import { useTypebot } from '@/features/editor/providers/TypebotProvider'
 import { Stack, Text } from '@chakra-ui/react'
 import { BubbleProps } from '@typebot.io/nextjs'
-import { Typebot } from '@typebot.io/schemas'
 import { useState } from 'react'
 import { BubbleSettings } from '../../../settings/BubbleSettings/BubbleSettings'
 import {
@@ -11,16 +10,7 @@ import {
   typebotImportCode,
   parseApiHostValue,
 } from '../../../snippetParsers'
-
-export const parseDefaultBubbleTheme = (typebot?: Typebot) => ({
-  button: {
-    backgroundColor: typebot?.theme.chat?.buttons?.backgroundColor,
-    iconColor: typebot?.theme.chat?.buttons?.color,
-  },
-  previewMessage: {
-    backgroundColor: typebot?.theme.general?.background?.content,
-  },
-})
+import { parseDefaultBubbleTheme } from '../../Javascript/instructions/JavascriptBubbleInstructions'
 
 export const ScriptBubbleInstructions = () => {
   const { typebot } = useTypebot()