From 619d10ae4e161c27a970d2cb453af9af13984f32 Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <contact@baptiste-arnaud.fr>
Date: Mon, 24 Jan 2022 09:36:28 +0100
Subject: [PATCH] =?UTF-8?q?chore(theme):=20=E2=9C=85=20Add=20general=20the?=
 =?UTF-8?q?me=20settings=20tests?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../BackgroundTypeRadioButtons.tsx            |  2 +-
 .../theme/GeneralContent/ColorPicker.tsx      |  5 +--
 .../FontSelector/FontSelector.tsx             |  6 ++--
 apps/builder/cypress/tests/theme/general.ts   | 36 +++++++++++++++++++
 .../theme/ThemeContent.tsx                    |  5 +--
 .../pages/typebots/[typebotId]/theme.tsx      |  2 +-
 .../src/components/TypebotViewer.tsx          |  1 +
 packages/bot-engine/src/services/theme.ts     |  2 +-
 8 files changed, 49 insertions(+), 10 deletions(-)
 create mode 100644 apps/builder/cypress/tests/theme/general.ts
 rename apps/builder/{components => layouts}/theme/ThemeContent.tsx (81%)

diff --git a/apps/builder/components/theme/GeneralContent/BackgroundSelector/BackgroundTypeRadioButtons.tsx b/apps/builder/components/theme/GeneralContent/BackgroundSelector/BackgroundTypeRadioButtons.tsx
index f171fa59e..6dae8f298 100644
--- a/apps/builder/components/theme/GeneralContent/BackgroundSelector/BackgroundTypeRadioButtons.tsx
+++ b/apps/builder/components/theme/GeneralContent/BackgroundSelector/BackgroundTypeRadioButtons.tsx
@@ -17,7 +17,7 @@ export const BackgroundTypeRadioButtons = ({
   backgroundType,
   onBackgroundTypeChange,
 }: Props) => {
-  const options = ['Color', 'Image', 'None']
+  const options = ['Color', 'None']
 
   const { getRootProps, getRadioProps } = useRadioGroup({
     name: 'background-type',
diff --git a/apps/builder/components/theme/GeneralContent/ColorPicker.tsx b/apps/builder/components/theme/GeneralContent/ColorPicker.tsx
index 3494017d8..633aa230f 100644
--- a/apps/builder/components/theme/GeneralContent/ColorPicker.tsx
+++ b/apps/builder/components/theme/GeneralContent/ColorPicker.tsx
@@ -42,7 +42,7 @@ export const ColorPicker = ({ initialColor, onColorChange }: Props) => {
     <Popover variant="picker">
       <PopoverTrigger>
         <Button
-          aria-label={color}
+          aria-label={'Pick a color'}
           background={color}
           height="22px"
           width="22px"
@@ -85,7 +85,8 @@ export const ColorPicker = ({ initialColor, onColorChange }: Props) => {
           <Input
             borderRadius={3}
             marginTop={3}
-            placeholder="red.100"
+            placeholder="#2a9d8f"
+            aria-label="Color value"
             size="sm"
             value={color}
             onChange={(e) => {
diff --git a/apps/builder/components/theme/GeneralContent/FontSelector/FontSelector.tsx b/apps/builder/components/theme/GeneralContent/FontSelector/FontSelector.tsx
index 90efbaafa..7d28188a3 100644
--- a/apps/builder/components/theme/GeneralContent/FontSelector/FontSelector.tsx
+++ b/apps/builder/components/theme/GeneralContent/FontSelector/FontSelector.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react'
-import { Text, Flex } from '@chakra-ui/react'
+import { Text, HStack } from '@chakra-ui/react'
 import { SearchableDropdown } from '../../../shared/SearchableDropdown'
 
 type FontSelectorProps = {
@@ -34,13 +34,13 @@ export const FontSelector = ({
   }
 
   return (
-    <Flex justify="space-between" align="center">
+    <HStack justify="space-between" align="center">
       <Text>Font</Text>
       <SearchableDropdown
         selectedItem={activeFont}
         items={googleFonts}
         onValueChange={handleFontSelected}
       />
-    </Flex>
+    </HStack>
   )
 }
diff --git a/apps/builder/cypress/tests/theme/general.ts b/apps/builder/cypress/tests/theme/general.ts
new file mode 100644
index 000000000..96acb248d
--- /dev/null
+++ b/apps/builder/cypress/tests/theme/general.ts
@@ -0,0 +1,36 @@
+import { getIframeBody } from 'cypress/support'
+
+describe('General theme settings', () => {
+  beforeEach(() => {
+    cy.task('seed')
+    cy.signOut()
+  })
+
+  it.only('should reflect changes in real time', () => {
+    cy.loadTypebotFixtureInDatabase('typebots/integrations/webhook.json')
+    cy.signIn('test2@gmail.com')
+    cy.visit('/typebots/typebot4/theme')
+    cy.findByRole('button', { name: 'General' }).click()
+
+    // Font
+    cy.findByDisplayValue('Open Sans').clear().type('Roboto')
+    cy.findByRole('menuitem', { name: 'Roboto Slab' }).click()
+    getIframeBody()
+      .findByTestId('container')
+      .should('have.css', 'font-family')
+      .should('eq', '"Roboto Slab"')
+
+    // BG color
+    getIframeBody()
+      .findByTestId('container')
+      .should('have.css', 'background-color')
+      .should('eq', 'rgba(0, 0, 0, 0)')
+    cy.findByDisplayValue('Color').check({ force: true })
+    cy.findByRole('button', { name: 'Pick a color' }).click()
+    cy.findByRole('textbox', { name: 'Color value' }).clear().type('#2a9d8f')
+    getIframeBody()
+      .findByTestId('container')
+      .should('have.css', 'background-color')
+      .should('eq', 'rgb(42, 157, 143)')
+  })
+})
diff --git a/apps/builder/components/theme/ThemeContent.tsx b/apps/builder/layouts/theme/ThemeContent.tsx
similarity index 81%
rename from apps/builder/components/theme/ThemeContent.tsx
rename to apps/builder/layouts/theme/ThemeContent.tsx
index f1fb0d14a..38c6ffcf2 100644
--- a/apps/builder/components/theme/ThemeContent.tsx
+++ b/apps/builder/layouts/theme/ThemeContent.tsx
@@ -3,13 +3,14 @@ import { TypebotViewer } from 'bot-engine'
 import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
 import React, { useMemo } from 'react'
 import { parseTypebotToPublicTypebot } from 'services/publicTypebot'
-import { SideMenu } from './SideMenu'
+import { SideMenu } from '../../components/theme/SideMenu'
 
 export const ThemeContent = () => {
   const { typebot } = useTypebot()
   const publicTypebot = useMemo(
     () => (typebot ? parseTypebotToPublicTypebot(typebot) : undefined),
-    [typebot]
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [typebot?.theme]
   )
   return (
     <Flex h="full" w="full">
diff --git a/apps/builder/pages/typebots/[typebotId]/theme.tsx b/apps/builder/pages/typebots/[typebotId]/theme.tsx
index 01e24b820..485f513cc 100644
--- a/apps/builder/pages/typebots/[typebotId]/theme.tsx
+++ b/apps/builder/pages/typebots/[typebotId]/theme.tsx
@@ -1,7 +1,7 @@
 import { Flex } from '@chakra-ui/layout'
 import { Seo } from 'components/Seo'
 import { TypebotHeader } from 'components/shared/TypebotHeader'
-import { ThemeContent } from 'components/theme/ThemeContent'
+import { ThemeContent } from 'layouts/theme/ThemeContent'
 import React from 'react'
 
 const ThemePage = () => (
diff --git a/packages/bot-engine/src/components/TypebotViewer.tsx b/packages/bot-engine/src/components/TypebotViewer.tsx
index 1daa49b0f..eec45d96e 100644
--- a/packages/bot-engine/src/components/TypebotViewer.tsx
+++ b/packages/bot-engine/src/components/TypebotViewer.tsx
@@ -62,6 +62,7 @@ export const TypebotViewer = ({
               // We set this as inline style to avoid color flash for SSR
               backgroundColor: containerBgColor,
             }}
+            data-testid="container"
           >
             <div className="flex w-full h-full justify-center">
               <ConversationContainer
diff --git a/packages/bot-engine/src/services/theme.ts b/packages/bot-engine/src/services/theme.ts
index 5a74aa45a..aee51e416 100644
--- a/packages/bot-engine/src/services/theme.ts
+++ b/packages/bot-engine/src/services/theme.ts
@@ -19,7 +19,7 @@ export const setCssVariablesValue = (
     background.type === BackgroundType.IMAGE
       ? cssVariableNames.container.bg.image
       : cssVariableNames.container.bg.color,
-    background.content
+    background.type === BackgroundType.NONE ? 'transparent' : background.content
   )
   documentStyle.setProperty(cssVariableNames.container.fontFamily, font)
 }