Improve translations coverage on editor.

baptisteArno · Aug 31, 2023 · 1f4c31d · 1f4c31d
1 parent 42a872c
commit 1f4c31d
Show file tree

Hide file tree

Showing 21 changed files with 188 additions and 63 deletions.
diff --git a/apps/builder/src/features/blocks/bubbles/audio/components/AudioBubbleForm.tsx b/apps/builder/src/features/blocks/bubbles/audio/components/AudioBubbleForm.tsx
@@ -4,14 +4,17 @@ import { TextInput } from '@/components/inputs'
 import { useState } from 'react'
 import { UploadButton } from '@/components/ImageUploadContent/UploadButton'
 import { SwitchWithLabel } from '@/components/inputs/SwitchWithLabel'
+import { I18nFunction } from '@/locales'
 
 type Props = {
+  scopedT: I18nFunction
   fileUploadPath: string
   content: AudioBubbleContent
   onContentChange: (content: AudioBubbleContent) => void
 }
 
 export const AudioBubbleForm = ({
+  scopedT,
   fileUploadPath,
   content,
   onContentChange,
@@ -31,14 +34,14 @@ export const AudioBubbleForm = ({
           onClick={() => setCurrentTab('upload')}
           size="sm"
         >
-          Upload
+          {scopedT('bubbles.audio.button.upload.label')}
         </Button>
         <Button
           variant={currentTab === 'link' ? 'solid' : 'ghost'}
           onClick={() => setCurrentTab('link')}
           size="sm"
         >
-          Embed link
+          {scopedT('bubbles.audio.button.embedLink.label')}
         </Button>
       </HStack>
       <Stack p="2" spacing={4}>
@@ -51,25 +54,25 @@ export const AudioBubbleForm = ({
                 onFileUploaded={updateUrl}
                 colorScheme="blue"
               >
-                Choose a file
+                {scopedT('bubbles.audio.button.chooseFile.label')}
               </UploadButton>
             </Flex>
           )}
           {currentTab === 'link' && (
             <>
               <TextInput
-                placeholder="Paste the audio file link..."
+                placeholder={scopedT('bubbles.audio.textInput.worksWith.placeholder')}
                 defaultValue={content.url ?? ''}
                 onChange={updateUrl}
               />
               <Text fontSize="sm" color="gray.400" textAlign="center">
-                Works with .MP3s and .WAVs
+                {scopedT('bubbles.audio.textInput.worksWith.text')}
               </Text>
             </>
           )}
         </Stack>
         <SwitchWithLabel
-          label={'Enable autoplay'}
+          label={scopedT('bubbles.audio.switchWithLabel.autoplay.label')}
           initialValue={content.isAutoplayEnabled ?? true}
           onCheckChange={updateAutoPlay}
         />

diff --git a/apps/builder/src/features/blocks/bubbles/audio/components/AudioBubbleNode.tsx b/apps/builder/src/features/blocks/bubbles/audio/components/AudioBubbleNode.tsx
@@ -1,14 +1,16 @@
 import { Text } from '@chakra-ui/react'
 import { AudioBubbleContent } from '@typebot.io/schemas'
 import { isDefined } from '@typebot.io/lib'
+import { I18nFunction } from '@/locales'
 
 type Props = {
+  scopedT: I18nFunction
   url: AudioBubbleContent['url']
 }
 
-export const AudioBubbleNode = ({ url }: Props) =>
+export const AudioBubbleNode = ({ scopedT, url }: Props) =>
   isDefined(url) ? (
     <audio src={url} controls />
   ) : (
-    <Text color={'gray.500'}>Click to edit...</Text>
+    <Text color={'gray.500'}>{scopedT('bubbles.audio.node.clickToEdit.text')}</Text>
   )
diff --git a/apps/builder/src/features/blocks/bubbles/embed/components/EmbedBubbleContent.tsx b/apps/builder/src/features/blocks/bubbles/embed/components/EmbedBubbleContent.tsx
@@ -1,7 +1,13 @@
 import { Text } from '@chakra-ui/react'
 import { EmbedBubbleBlock } from '@typebot.io/schemas'
+import { I18nFunction } from '@/locales'
 
-export const EmbedBubbleContent = ({ block }: { block: EmbedBubbleBlock }) => {
-  if (!block.content?.url) return <Text color="gray.500">Click to edit...</Text>
-  return <Text>Show embed</Text>
+type Props = {
+  scopedT: I18nFunction
+  block: EmbedBubbleBlock
+}
+
+export const EmbedBubbleContent = ({ scopedT, block }: Props) => {
+  if (!block.content?.url) return <Text color="gray.500">{scopedT('bubbles.embed.node.clickToEdit.text')}</Text>
+  return <Text>{scopedT('node.show.text')}</Text>
 }
diff --git a/apps/builder/src/features/blocks/bubbles/embed/components/EmbedUploadContent.tsx b/apps/builder/src/features/blocks/bubbles/embed/components/EmbedUploadContent.tsx
@@ -2,13 +2,15 @@ import { TextInput, NumberInput } from '@/components/inputs'
 import { HStack, Stack, Text } from '@chakra-ui/react'
 import { EmbedBubbleContent } from '@typebot.io/schemas'
 import { sanitizeUrl } from '@typebot.io/lib'
+import { I18nFunction } from '@/locales'
 
 type Props = {
+  scopedT: I18nFunction
   content: EmbedBubbleContent
   onSubmit: (content: EmbedBubbleContent) => void
 }
 
-export const EmbedUploadContent = ({ content, onSubmit }: Props) => {
+export const EmbedUploadContent = ({ scopedT, content, onSubmit }: Props) => {
   const handleUrlChange = (url: string) => {
     const iframeUrl = sanitizeUrl(
       url.trim().startsWith('<iframe') ? extractUrlFromIframe(url) : url
@@ -23,12 +25,12 @@ export const EmbedUploadContent = ({ content, onSubmit }: Props) => {
     <Stack p="2" spacing={6}>
       <Stack>
         <TextInput
-          placeholder="Paste the link or code..."
+          placeholder={scopedT('bubbles.embed.worksWith.placeholder')}
           defaultValue={content?.url ?? ''}
           onChange={handleUrlChange}
         />
         <Text fontSize="sm" color="gray.400" textAlign="center">
-          Works with PDFs, iframes, websites...
+          {scopedT('bubbles.embed.worksWith.text')}
         </Text>
       </Stack>
 
@@ -38,7 +40,7 @@ export const EmbedUploadContent = ({ content, onSubmit }: Props) => {
           defaultValue={content?.height}
           onValueChange={handleHeightChange}
         />
-        <Text>px</Text>
+        <Text>{scopedT('bubbles.embed.numberInput.unit')}</Text>
       </HStack>
     </Stack>
   )

diff --git a/apps/builder/src/features/blocks/bubbles/image/components/ImageBubbleContent.tsx b/apps/builder/src/features/blocks/bubbles/image/components/ImageBubbleContent.tsx
@@ -1,11 +1,17 @@
 import { Box, Text, Image } from '@chakra-ui/react'
 import { ImageBubbleBlock } from '@typebot.io/schemas'
+import { I18nFunction } from '@/locales'
 
-export const ImageBubbleContent = ({ block }: { block: ImageBubbleBlock }) => {
+type Props = {
+  scopedT: I18nFunction
+  block: ImageBubbleBlock
+}
+
+export const ImageBubbleContent = ({ scopedT, block }: Props) => {
   const containsVariables =
     block.content?.url?.includes('{{') && block.content.url.includes('}}')
   return !block.content?.url ? (
-    <Text color={'gray.500'}>Click to edit...</Text>
+    <Text color={'gray.500'}>{scopedT('bubbles.image.node.clickToEdit.text')}</Text>
   ) : (
     <Box w="full">
       <Image

diff --git a/apps/builder/src/features/blocks/bubbles/image/components/ImageBubbleSettings.tsx b/apps/builder/src/features/blocks/bubbles/image/components/ImageBubbleSettings.tsx
@@ -5,14 +5,17 @@ import { Stack } from '@chakra-ui/react'
 import { isDefined, isNotEmpty } from '@typebot.io/lib'
 import { ImageBubbleBlock } from '@typebot.io/schemas'
 import React, { useState } from 'react'
+import { I18nFunction } from '@/locales'
 
 type Props = {
+  scopedT: I18nFunction
   typebotId: string
   block: ImageBubbleBlock
   onContentChange: (content: ImageBubbleBlock['content']) => void
 }
 
 export const ImageBubbleSettings = ({
+  scopedT,
   typebotId,
   block,
   onContentChange,
@@ -55,7 +58,7 @@ export const ImageBubbleSettings = ({
       />
       <Stack>
         <SwitchWithLabel
-          label={'On click link'}
+          label={scopedT('bubbles.image.switchWithLabel.onClick.label')}
           initialValue={showClickLinkInput}
           onCheckChange={toggleClickLink}
         />
@@ -68,7 +71,7 @@ export const ImageBubbleSettings = ({
               defaultValue={block.content.clickLink?.url}
             />
             <TextInput
-              placeholder="Link alt text (description)"
+              placeholder={scopedT('bubbles.image.switchWithLabel.onClick.placeholder')}
               onChange={updateClickLinkAltText}
               defaultValue={block.content.clickLink?.alt}
             />

diff --git a/apps/builder/src/features/blocks/bubbles/textBubble/components/TextBubbleEditor.tsx b/apps/builder/src/features/blocks/bubbles/textBubble/components/TextBubbleEditor.tsx
@@ -18,6 +18,7 @@ import { colors } from '@/lib/theme'
 import { useOutsideClick } from '@/hooks/useOutsideClick'
 import { selectEditor, TElement } from '@udecode/plate-common'
 import { TextEditorToolBar } from './TextEditorToolBar'
+import { useScopedI18n } from '@/locales'
 
 type TextBubbleEditorContentProps = {
   id: string
@@ -30,6 +31,7 @@ const TextBubbleEditorContent = ({
   textEditorValue,
   onClose,
 }: TextBubbleEditorContentProps) => {
+  const scopedT = useScopedI18n('editor.blocks.bubbles')
   const editor = usePlateEditorRef()
   const varDropdownRef = useRef<HTMLDivElement | null>(null)
   const rememberedSelection = useRef<BaseSelection | null>(null)
@@ -135,7 +137,7 @@ const TextBubbleEditorContent = ({
             })
             setIsFirstFocus(false)
           },
-          'aria-label': 'Text editor',
+          'aria-label': `${scopedT('textEditor.plate.label')}`,
           onBlur: () => {
             rememberedSelection.current = editor?.selection
           },
@@ -154,7 +156,7 @@ const TextBubbleEditorContent = ({
             <VariableSearchInput
               initialVariableId={undefined}
               onSelectVariable={handleVariableSelected}
-              placeholder="Search for a variable"
+              placeholder={scopedT('textEditor.searchVariable.placeholder')}
               autoFocus
             />
           </PopoverContent>

diff --git a/apps/builder/src/features/blocks/bubbles/video/components/VideoBubbleContent.tsx b/apps/builder/src/features/blocks/bubbles/video/components/VideoBubbleContent.tsx
@@ -1,9 +1,15 @@
 import { Box, Text } from '@chakra-ui/react'
 import { VideoBubbleBlock, VideoBubbleContentType } from '@typebot.io/schemas'
+import { I18nFunction } from '@/locales'
 
-export const VideoBubbleContent = ({ block }: { block: VideoBubbleBlock }) => {
+type Props = {
+  scopedT: I18nFunction
+  block: VideoBubbleBlock
+}
+
+export const VideoBubbleContent = ({ scopedT, block }: Props) => {
   if (!block.content?.url || !block.content.type)
-    return <Text color="gray.500">Click to edit...</Text>
+    return <Text color="gray.500">{scopedT('bubbles.video.node.clickToEdit.text')}</Text>
   switch (block.content.type) {
     case VideoBubbleContentType.URL:
       return (

diff --git a/apps/builder/src/features/blocks/bubbles/video/components/VideoUploadContent.tsx b/apps/builder/src/features/blocks/bubbles/video/components/VideoUploadContent.tsx
@@ -1,16 +1,18 @@
 import { Stack, Text } from '@chakra-ui/react'
 import { VideoBubbleContent, VideoBubbleContentType } from '@typebot.io/schemas'
 import { TextInput } from '@/components/inputs'
+import { I18nFunction } from '@/locales'
 
 const vimeoRegex = /vimeo\.com\/(\d+)/
 const youtubeRegex = /youtube\.com\/(watch\?v=|shorts\/)(\w+)|youtu\.be\/(\w+)/
 
 type Props = {
+  scopedT: I18nFunction
   content?: VideoBubbleContent
   onSubmit: (content: VideoBubbleContent) => void
 }
 
-export const VideoUploadContent = ({ content, onSubmit }: Props) => {
+export const VideoUploadContent = ({ scopedT, content, onSubmit }: Props) => {
   const handleUrlChange = (url: string) => {
     const info = parseVideoUrl(url)
     return onSubmit({
@@ -22,12 +24,12 @@ export const VideoUploadContent = ({ content, onSubmit }: Props) => {
   return (
     <Stack p="2">
       <TextInput
-        placeholder="Paste the video link..."
+        placeholder={scopedT('bubbles.video.textInput.worksWith.placeholder')}
         defaultValue={content?.url ?? ''}
         onChange={handleUrlChange}
       />
       <Text fontSize="sm" color="gray.400" textAlign="center">
-        Works with Youtube, Vimeo and others
+        {scopedT('bubbles.video.textInput.worksWith.text')}
       </Text>
     </Stack>
   )

diff --git a/apps/builder/src/features/editor/components/TypebotHeader.tsx b/apps/builder/src/features/editor/components/TypebotHeader.tsx
@@ -228,7 +228,7 @@ export const TypebotHeader = () => {
           <HStack>
             <Spinner speed="0.7s" size="sm" color="gray.400" />
             <Text fontSize="sm" color="gray.400">
-              {scopedT('SavingSpinner.label')}
+              {scopedT('savingSpinner.label')}
             </Text>
           </HStack>
         )}

diff --git a/apps/builder/src/features/editor/providers/TypebotProvider.tsx b/apps/builder/src/features/editor/providers/TypebotProvider.tsx
@@ -23,7 +23,7 @@ import { areTypebotsEqual } from '@/features/publish/helpers/areTypebotsEqual'
 import { isPublished as isPublishedHelper } from '@/features/publish/helpers/isPublished'
 import { convertPublicTypebotToTypebot } from '@/features/publish/helpers/convertPublicTypebotToTypebot'
 import { trpc } from '@/lib/trpc'
-import { useScopedI18n } from '@/locales'
+import { useScopedI18n, I18nFunction } from '@/locales'
 
 const autoSaveTimeout = 10000
 
@@ -43,8 +43,6 @@ type UpdateTypebotPayload = Partial<
   >
 >
 
-export type I18nFunction = (key: string) => string;
-
 export type SetTypebot = (
   newPresent: Typebot | ((current: Typebot) => Typebot)
 ) => void
@@ -96,12 +94,12 @@ export const TypebotProvider = ({
       enabled: isDefined(typebotId),
       onError: (error) => {
         if (error.data?.httpStatus === 404) {
-          showToast({ status: 'info', description: "Couldn't find typebot" })
+          showToast({ status: 'info', description: scopedT('messages.getTypebotError.description') })
           push('/typebots')
           return
         }
         showToast({
-          title: 'Error while fetching typebot. Refresh the page.',
+          title: scopedT('messages.getTypebotError.title'),
           description: error.message,
         })
       },
@@ -116,7 +114,7 @@ export const TypebotProvider = ({
         onError: (error) => {
           if (error.data?.httpStatus === 404) return
           showToast({
-            title: 'Error while fetching published typebot',
+            title: scopedT('messages.publishedTypebotError.title'),
             description: error.message,
           })
         },
@@ -127,7 +125,7 @@ export const TypebotProvider = ({
     trpc.typebot.updateTypebot.useMutation({
       onError: (error) =>
         showToast({
-          title: 'Error while updating typebot',
+          title: scopedT('messages.updateTypebotError.title'),
           description: error.message,
         }),
       onSuccess: () => {

diff --git a/apps/builder/src/features/editor/providers/typebotActions/groups.ts b/apps/builder/src/features/editor/providers/typebotActions/groups.ts
@@ -6,14 +6,15 @@ import {
   DraggableBlockType,
   BlockIndices,
 } from '@typebot.io/schemas'
-import { SetTypebot, I18nFunction } from '../TypebotProvider'
+import { SetTypebot } from '../TypebotProvider'
 import {
   deleteGroupDraft,
   createBlockDraft,
   duplicateBlockDraft,
 } from './blocks'
 import { isEmpty, parseGroupTitle } from '@typebot.io/lib'
 import { Coordinates } from '@/features/graph/types'
+import { I18nFunction } from '@/locales'
 
 export type GroupsActions = {
   createGroup: (

diff --git a/apps/builder/src/features/graph/components/nodes/block/BlockNode.tsx b/apps/builder/src/features/graph/components/nodes/block/BlockNode.tsx
@@ -44,6 +44,7 @@ import { setMultipleRefs } from '@/helpers/setMultipleRefs'
 import { TargetEndpoint } from '../../endpoints/TargetEndpoint'
 import { SettingsModal } from './SettingsModal'
 import { TElement } from '@udecode/plate-common'
+import { useScopedI18n, I18nFunction } from '@/locales'
 
 export const BlockNode = ({
   block,
@@ -56,6 +57,7 @@ export const BlockNode = ({
   indices: { blockIndex: number; groupIndex: number }
   onMouseDown?: (blockNodePosition: NodePosition, block: DraggableBlock) => void
 }) => {
+  const scopedT = useScopedI18n('editor.blocks')
   const bg = useColorModeValue('gray.50', 'gray.850')
   const previewingBorderColor = useColorModeValue('blue.400', 'blue.300')
   const borderColor = useColorModeValue('gray.200', 'gray.800')
@@ -237,7 +239,7 @@ export const BlockNode = ({
                   mt="1"
                   data-testid={`${block.id}-icon`}
                 />
-                <BlockNodeContent block={block} indices={indices} />
+                <BlockNodeContent scopedT={scopedT as I18nFunction} block={block} indices={indices} />
                 {(hasIcomingEdge || isDefined(connectingIds)) && (
                   <TargetEndpoint
                     pos="absolute"
@@ -284,6 +286,7 @@ export const BlockNode = ({
           )}
           {typebot && isMediaBubbleBlock(block) && (
             <MediaBubblePopoverContent
+              scopedT={scopedT as I18nFunction}
               typebotId={typebot.id}
               block={block}
               onContentChange={handleContentChange}