⚡ Add recent section in icon and emoji picker

Closes #536

apps/builder/src/features/blocks/inputs/payment/payment.spec.ts

@@ -58,7 +58,7 @@ test.describe('Payment input block', () => {
       .locator(`[placeholder="MM / YY"]`)
       .fill('12 / 25')
     await stripePaymentForm(page).locator(`[placeholder="CVC"]`).fill('240')
-    await page.locator(`text="Pay 30€"`).click()
+    await page.getByRole('button', { name: 'Pay 30,00 €' }).click()
     await expect(
       page.locator(`text="Your card has been declined."`)
     ).toBeVisible()
@@ -68,7 +68,7 @@ test.describe('Payment input block', () => {
     const zipInput = stripePaymentForm(page).getByPlaceholder('90210')
     const isZipInputVisible = await zipInput.isVisible()
     if (isZipInputVisible) await zipInput.fill('12345')
-    await page.locator(`text="Pay 30€"`).click()
+    await page.getByRole('button', { name: 'Pay 30,00 €' }).click()
     await expect(page.locator(`text="Success"`)).toBeVisible()
   })
 })

apps/builder/src/features/blocks/integrations/googleAnalytics/googleAnalytics.spec.ts

@@ -23,12 +23,9 @@ test.describe('Google Analytics block', () => {
     await page.goto(`/typebots/${typebotId}/edit`)
     await page.click('text=Configure...')
     await page.fill('input[placeholder="G-123456..."]', 'G-VWX9WG1TNS')
-    await page.fill('input[placeholder="Example: Typebot"]', 'Typebot')
-    await page.fill(
-      'input[placeholder="Example: Submit email"]',
-      'Submit email'
-    )
+    await page.fill('input[placeholder="Example: conversion"]', 'conversion')
     await page.click('text=Advanced')
+    await page.fill('input[placeholder="Example: Typebot"]', 'Typebot')
     await page.fill('input[placeholder="Example: Campaign Z"]', 'Campaign Z')
     await page.fill('input[placeholder="Example: 0"]', '0')
   })

apps/builder/src/features/settings/components/MetadataForm.tsx

@@ -59,7 +59,7 @@ export const MetadataForm = ({
               rounded="md"
             />
           </PopoverTrigger>
-          <PopoverContent p="4">
+          <PopoverContent p="4" w="400px">
             <ImageUploadContent
               filePath={`typebots/${typebotId}/favIcon`}
               defaultUrl={metadata.favIconUrl ?? ''}
@@ -85,7 +85,7 @@ export const MetadataForm = ({
               rounded="md"
             />
           </PopoverTrigger>
-          <PopoverContent p="4">
+          <PopoverContent p="4" w="500px">
             <ImageUploadContent
               filePath={`typebots/${typebotId}/ogImage`}
               defaultUrl={metadata.imageUrl}

apps/builder/src/features/theme/components/chat/AvatarForm.tsx

@@ -87,6 +87,7 @@ export const AvatarForm = ({
                   p="4"
                   onMouseDown={(e) => e.stopPropagation()}
                   onPointerDown={(e) => e.stopPropagation()}
+                  w="500px"
                 >
                   <ImageUploadContent
                     filePath={uploadFilePath}

apps/builder/src/features/theme/components/general/BackgroundContent.tsx

@@ -8,6 +8,7 @@ import {
   Text,
   Image,
   Button,
+  Portal,
 } from '@chakra-ui/react'
 import { isNotEmpty } from '@typebot.io/lib'
 import { Background, BackgroundType } from '@typebot.io/schemas'
@@ -57,14 +58,16 @@ export const BackgroundContent = ({
               <Button>Select an image</Button>
             )}
           </PopoverTrigger>
-          <PopoverContent p="4">
-            <ImageUploadContent
-              filePath={`typebots/${typebot?.id}/background`}
-              defaultUrl={background.content}
-              onSubmit={handleContentChange}
-              excludedTabs={['giphy', 'icon']}
-            />
-          </PopoverContent>
+          <Portal>
+            <PopoverContent p="4" w="500px">
+              <ImageUploadContent
+                filePath={`typebots/${typebot?.id}/background`}
+                defaultUrl={background.content}
+                onSubmit={handleContentChange}
+                excludedTabs={['giphy', 'icon']}
+              />
+            </PopoverContent>
+          </Portal>
         </Popover>
       )
     default:

apps/builder/src/features/workspace/workspaces.spec.ts

@@ -41,7 +41,9 @@ test.beforeAll(async () => {
 
 test('can switch between workspaces and access typebot', async ({ page }) => {
   await page.goto('/typebots')
-  await expect(page.locator('text="Pro typebot"')).toBeVisible()
+  await expect(page.locator('text="Pro typebot"')).toBeVisible({
+    timeout: 20000,
+  })
   await page.click('text=Pro workspace')
   await page.click('text="Starter workspace"')
   await expect(page.locator('text="Pro typebot"')).toBeHidden()