♻️ (builder) Change to features-centric folder structure

apps/builder/src/features/blocks/bubbles/image/components/ImageBubbleContent.tsx

@@ -0,0 +1,21 @@
+import { Box, Text, Image } from '@chakra-ui/react'
+import { ImageBubbleBlock } from 'models'
+
+export const ImageBubbleContent = ({ block }: { block: ImageBubbleBlock }) => {
+  const containsVariables =
+    block.content?.url?.includes('{{') && block.content.url.includes('}}')
+  return !block.content?.url ? (
+    <Text color={'gray.500'}>Click to edit...</Text>
+  ) : (
+    <Box w="full">
+      <Image
+        src={
+          containsVariables ? '/images/dynamic-image.png' : block.content?.url
+        }
+        alt="Group image"
+        rounded="md"
+        objectFit="cover"
+      />
+    </Box>
+  )
+}

apps/builder/src/features/blocks/bubbles/image/components/ImageBubbleIcon.tsx

@@ -0,0 +1,7 @@
+import { ImageIcon } from '@/components/icons'
+import { IconProps } from '@chakra-ui/react'
+import React from 'react'
+
+export const ImageBubbleIcon = (props: IconProps) => (
+  <ImageIcon color="blue.500" {...props} />
+)

apps/builder/src/features/blocks/bubbles/image/image.spec.ts

@@ -0,0 +1,130 @@
+import test, { expect } from '@playwright/test'
+import { createTypebots } from 'utils/playwright/databaseActions'
+import { parseDefaultGroupWithBlock } from 'utils/playwright/databaseHelpers'
+import { BubbleBlockType, defaultImageBubbleContent } from 'models'
+import cuid from 'cuid'
+import { typebotViewer } from 'utils/playwright/testHelpers'
+import { getTestAsset } from '@/test/utils/playwright'
+
+const unsplashImageSrc =
+  'https://images.unsplash.com/photo-1504297050568-910d24c426d3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1287&q=80'
+
+test.describe.parallel('Image bubble block', () => {
+  test.describe('Content settings', () => {
+    test('should upload image file correctly', async ({ page }) => {
+      const typebotId = cuid()
+      await createTypebots([
+        {
+          id: typebotId,
+          ...parseDefaultGroupWithBlock({
+            type: BubbleBlockType.IMAGE,
+            content: defaultImageBubbleContent,
+          }),
+        },
+      ])
+
+      await page.goto(`/typebots/${typebotId}/edit`)
+
+      await page.click('text=Click to edit...')
+      await page.setInputFiles('input[type="file"]', getTestAsset('avatar.jpg'))
+      await expect(page.locator('img')).toHaveAttribute(
+        'src',
+        `${process.env.S3_SSL === 'false' ? 'http://' : 'https://'}${
+          process.env.S3_ENDPOINT
+        }${process.env.S3_PORT ? `:${process.env.S3_PORT}` : ''}/${
+          process.env.S3_BUCKET
+        }/public/typebots/${typebotId}/blocks/block2`
+      )
+    })
+
+    test('should import image link correctly', async ({ page }) => {
+      const typebotId = cuid()
+      await createTypebots([
+        {
+          id: typebotId,
+          ...parseDefaultGroupWithBlock({
+            type: BubbleBlockType.IMAGE,
+            content: defaultImageBubbleContent,
+          }),
+        },
+      ])
+
+      await page.goto(`/typebots/${typebotId}/edit`)
+
+      await page.click('text=Click to edit...')
+      await page.click('text=Embed link')
+      await page.fill(
+        'input[placeholder="Paste the image link..."]',
+        unsplashImageSrc
+      )
+      await expect(page.locator('img')).toHaveAttribute('src', unsplashImageSrc)
+    })
+
+    test('should import gifs correctly', async ({ page }) => {
+      const typebotId = cuid()
+      await createTypebots([
+        {
+          id: typebotId,
+          ...parseDefaultGroupWithBlock({
+            type: BubbleBlockType.IMAGE,
+            content: defaultImageBubbleContent,
+          }),
+        },
+      ])
+
+      await page.goto(`/typebots/${typebotId}/edit`)
+
+      await page.click('text=Click to edit...')
+      await page.click('text=Giphy')
+      const firstGiphyImage = page.locator('.giphy-gif-img >> nth=0')
+      await expect(firstGiphyImage).toHaveAttribute(
+        'src',
+        new RegExp('giphy.com/media', 'gm')
+      )
+      const trendingfirstImageSrc = await firstGiphyImage.getAttribute('src')
+      expect(trendingfirstImageSrc).toMatch(new RegExp('giphy.com/media', 'gm'))
+      await page.type('[placeholder="Search..."]', 'fun')
+      await expect(page.locator('[placeholder="Search..."]')).toHaveValue('fun')
+      await page.waitForTimeout(500)
+      await expect(firstGiphyImage).toHaveAttribute(
+        'src',
+        new RegExp('giphy.com/media', 'gm')
+      )
+      const funFirstImageSrc = await firstGiphyImage.getAttribute('src')
+      expect(funFirstImageSrc).toMatch(new RegExp('giphy.com/media', 'gm'))
+      expect(trendingfirstImageSrc).not.toBe(funFirstImageSrc)
+      await firstGiphyImage.click({
+        force: true,
+        position: { x: 0, y: 0 },
+      })
+      await expect(page.locator('img[alt="Group image"]')).toHaveAttribute(
+        'src',
+        new RegExp('giphy.com/media', 'gm')
+      )
+    })
+  })
+
+  test.describe('Preview', () => {
+    test('should display correctly', async ({ page }) => {
+      const typebotId = cuid()
+      await createTypebots([
+        {
+          id: typebotId,
+          ...parseDefaultGroupWithBlock({
+            type: BubbleBlockType.IMAGE,
+            content: {
+              url: unsplashImageSrc,
+            },
+          }),
+        },
+      ])
+
+      await page.goto(`/typebots/${typebotId}/edit`)
+      await page.click('text=Preview')
+      await expect(typebotViewer(page).locator('img')).toHaveAttribute(
+        'src',
+        unsplashImageSrc
+      )
+    })
+  })
+})

apps/builder/src/features/blocks/bubbles/image/index.ts

@@ -0,0 +1,2 @@
+export { ImageBubbleContent } from './components/ImageBubbleContent'
+export { ImageBubbleIcon } from './components/ImageBubbleIcon'