🌐 Add pt_BR and more translations (#767)

Original PR: #694

---------

Co-authored-by: Daniel Oliveira <daniel.oliveira@kununu.com>
Co-authored-by: Daniel Oliveira <daniel@headdev.com.br>

apps/builder/next.config.mjs

@@ -22,7 +22,7 @@ const nextConfig = {
   ],
   i18n: {
     defaultLocale: 'en',
-    locales: ['en', 'fr', 'pt', 'de'],
+    locales: ['en', 'fr', 'pt', 'pt_BR', 'de'],
   },
   experimental: {
     outputFileTracingRoot: join(__dirname, '../../'),

apps/builder/src/features/account/components/UserPreferencesForm.tsx

@@ -19,10 +19,11 @@ import { ChevronDownIcon } from '@/components/icons'
 import { MoreInfoTooltip } from '@/components/MoreInfoTooltip'
 
 const localeHumanReadable = {
-  en: 'English',
-  fr: 'Français',
-  de: 'Deutsch',
-  pt: 'Português',
+  en:    'English',
+  fr:    'Français',
+  de:    'Deutsch',
+  pt:    'Português',
+  pt_BR: 'Português (BR)'
 } as const
 
 export const UserPreferencesForm = () => {

apps/builder/src/features/billing/components/CurrentSubscriptionSummary.tsx

@@ -30,7 +30,8 @@ export const CurrentSubscriptionSummary = ({ workspace }: Props) => {
         <PlanTag plan={workspace.plan} />
         {data?.subscription?.cancelDate && (
           <Text fontSize="sm">
-            (Will be cancelled on {data.subscription.cancelDate.toDateString()})
+            ({scopedT('cancelDate')}{' '}
+            {data.subscription.cancelDate.toDateString()})
           </Text>
         )}
       </HStack>

apps/builder/src/features/billing/components/UsageProgressBars.tsx

@@ -88,7 +88,7 @@ export const UsageProgressBars = ({ workspace }: Props) => {
             <Text>
               /{' '}
               {workspaceChatsLimit === -1
-                ? 'Unlimited'
+                ? scopedT('unlimited')
                 : parseNumberWithCommas(workspaceChatsLimit)}
             </Text>
           </HStack>
@@ -141,7 +141,7 @@ export const UsageProgressBars = ({ workspace }: Props) => {
               <Text>
                 /{' '}
                 {workspaceStorageLimit === -1
-                  ? 'Unlimited'
+                  ? scopedT('unlimited')
                   : `${workspaceStorageLimit} GB`}
               </Text>
             </HStack>

apps/builder/src/features/blocks/bubbles/audio/components/AudioBubbleForm.tsx

@@ -4,6 +4,7 @@ import { TextInput } from '@/components/inputs'
 import { useState } from 'react'
 import { UploadButton } from '@/components/ImageUploadContent/UploadButton'
 import { SwitchWithLabel } from '@/components/inputs/SwitchWithLabel'
+import { useScopedI18n } from '@/locales'
 
 type Props = {
   fileUploadPath: string
@@ -16,6 +17,7 @@ export const AudioBubbleForm = ({
   content,
   onContentChange,
 }: Props) => {
+  const scopedT = useScopedI18n('editor.blocks.bubbles.audio.settings')
   const [currentTab, setCurrentTab] = useState<'link' | 'upload'>('link')
 
   const updateUrl = (url: string) => onContentChange({ ...content, url })
@@ -31,14 +33,14 @@ export const AudioBubbleForm = ({
           onClick={() => setCurrentTab('upload')}
           size="sm"
         >
-          Upload
+          {scopedT('upload.label')}
         </Button>
         <Button
           variant={currentTab === 'link' ? 'solid' : 'ghost'}
           onClick={() => setCurrentTab('link')}
           size="sm"
         >
-          Embed link
+          {scopedT('embedLink.label')}
         </Button>
       </HStack>
       <Stack p="2" spacing={4}>
@@ -51,25 +53,25 @@ export const AudioBubbleForm = ({
                 onFileUploaded={updateUrl}
                 colorScheme="blue"
               >
-                Choose a file
+                {scopedT('chooseFile.label')}
               </UploadButton>
             </Flex>
           )}
           {currentTab === 'link' && (
             <>
               <TextInput
-                placeholder="Paste the audio file link..."
+                placeholder={scopedT('worksWith.placeholder')}
                 defaultValue={content.url ?? ''}
                 onChange={updateUrl}
               />
               <Text fontSize="sm" color="gray.400" textAlign="center">
-                Works with .MP3s and .WAVs
+                {scopedT('worksWith.text')}
               </Text>
             </>
           )}
         </Stack>
         <SwitchWithLabel
-          label={'Enable autoplay'}
+          label={scopedT('autoplay.label')}
           initialValue={content.isAutoplayEnabled ?? true}
           onCheckChange={updateAutoPlay}
         />

apps/builder/src/features/blocks/bubbles/audio/components/AudioBubbleNode.tsx

@@ -1,14 +1,17 @@
 import { Text } from '@chakra-ui/react'
 import { AudioBubbleContent } from '@typebot.io/schemas'
 import { isDefined } from '@typebot.io/lib'
+import { useScopedI18n } from '@/locales'
 
 type Props = {
   url: AudioBubbleContent['url']
 }
 
-export const AudioBubbleNode = ({ url }: Props) =>
-  isDefined(url) ? (
+export const AudioBubbleNode = ({ url }: Props) => {
+  const scopedT = useScopedI18n('editor.blocks.bubbles.audio.node')
+  return isDefined(url) ? (
     <audio src={url} controls />
   ) : (
-    <Text color={'gray.500'}>Click to edit...</Text>
+    <Text color={'gray.500'}>{scopedT('clickToEdit.text')}</Text>
   )
+}

apps/builder/src/features/blocks/bubbles/embed/components/EmbedBubbleContent.tsx

@@ -1,7 +1,14 @@
+import { useScopedI18n } from '@/locales'
 import { Text } from '@chakra-ui/react'
 import { EmbedBubbleBlock } from '@typebot.io/schemas'
 
-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 = {
+  block: EmbedBubbleBlock
+}
+
+export const EmbedBubbleContent = ({ block }: Props) => {
+  const scopedT = useScopedI18n('editor.blocks.bubbles.embed.node')
+  if (!block.content?.url)
+    return <Text color="gray.500">{scopedT('clickToEdit.text')}</Text>
+  return <Text>{scopedT('show.text')}</Text>
 }

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 { useScopedI18n } from '@/locales'
 
 type Props = {
   content: EmbedBubbleContent
   onSubmit: (content: EmbedBubbleContent) => void
 }
 
 export const EmbedUploadContent = ({ content, onSubmit }: Props) => {
+  const scopedT = useScopedI18n('editor.blocks.bubbles.embed.settings')
   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('worksWith.placeholder')}
           defaultValue={content?.url ?? ''}
           onChange={handleUrlChange}
         />
         <Text fontSize="sm" color="gray.400" textAlign="center">
-          Works with PDFs, iframes, websites...
+          {scopedT('worksWith.text')}
         </Text>
       </Stack>
 
@@ -38,7 +40,7 @@ export const EmbedUploadContent = ({ content, onSubmit }: Props) => {
           defaultValue={content?.height}
           onValueChange={handleHeightChange}
         />
-        <Text>px</Text>
+        <Text>{scopedT('numberInput.unit')}</Text>
       </HStack>
     </Stack>
   )

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

@@ -1,11 +1,17 @@
+import { useScopedI18n } from '@/locales'
 import { Box, Text, Image } from '@chakra-ui/react'
 import { ImageBubbleBlock } from '@typebot.io/schemas'
 
-export const ImageBubbleContent = ({ block }: { block: ImageBubbleBlock }) => {
+type Props = {
+  block: ImageBubbleBlock
+}
+
+export const ImageBubbleContent = ({ block }: Props) => {
+  const scopedT = useScopedI18n('editor.blocks.bubbles.image.node')
   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('clickToEdit.text')}</Text>
   ) : (
     <Box w="full">
       <Image

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

@@ -1,6 +1,7 @@
 import { ImageUploadContent } from '@/components/ImageUploadContent'
 import { TextInput } from '@/components/inputs'
 import { SwitchWithLabel } from '@/components/inputs/SwitchWithLabel'
+import { useScopedI18n } from '@/locales'
 import { Stack } from '@chakra-ui/react'
 import { isDefined, isNotEmpty } from '@typebot.io/lib'
 import { ImageBubbleBlock } from '@typebot.io/schemas'
@@ -17,6 +18,9 @@ export const ImageBubbleSettings = ({
   block,
   onContentChange,
 }: Props) => {
+  const scopedT = useScopedI18n(
+    'editor.blocks.bubbles.image.switchWithLabel.onClick'
+  )
   const [showClickLinkInput, setShowClickLinkInput] = useState(
     isNotEmpty(block.content.clickLink?.url)
   )
@@ -55,7 +59,7 @@ export const ImageBubbleSettings = ({
       />
       <Stack>
         <SwitchWithLabel
-          label={'On click link'}
+          label={scopedT('label')}
           initialValue={showClickLinkInput}
           onCheckChange={toggleClickLink}
         />
@@ -68,7 +72,7 @@ export const ImageBubbleSettings = ({
               defaultValue={block.content.clickLink?.url}
             />
             <TextInput
-              placeholder="Link alt text (description)"
+              placeholder={scopedT('placeholder')}
               onChange={updateClickLinkAltText}
               defaultValue={block.content.clickLink?.alt}
             />

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)
@@ -108,7 +110,7 @@ const TextBubbleEditorContent = ({
           backgroundColor: useColorModeValue('white', 'gray.800'),
           borderRadius: 'md',
           transitionProperty: 'background-color',
-          transitionDuration: 'normal'
+          transitionDuration: 'normal',
         },
         '[class^="FloatingVerticalDivider___"]': {
           '--tw-bg-opacity': useColorModeValue('1', '.4') + '!important',
@@ -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>

apps/builder/src/features/blocks/bubbles/video/components/VideoBubbleContent.tsx

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

apps/builder/src/features/blocks/bubbles/video/components/VideoUploadContent.tsx

@@ -1,6 +1,7 @@
 import { Stack, Text } from '@chakra-ui/react'
 import { VideoBubbleContent, VideoBubbleContentType } from '@typebot.io/schemas'
 import { TextInput } from '@/components/inputs'
+import { useScopedI18n } from '@/locales'
 
 const vimeoRegex = /vimeo\.com\/(\d+)/
 const youtubeRegex = /youtube\.com\/(watch\?v=|shorts\/)(\w+)|youtu\.be\/(\w+)/
@@ -11,6 +12,7 @@ type Props = {
 }
 
 export const VideoUploadContent = ({ content, onSubmit }: Props) => {
+  const scopedT = useScopedI18n('editor.blocks.bubbles.video.settings')
   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('worksWith.placeholder')}
         defaultValue={content?.url ?? ''}
         onChange={handleUrlChange}
       />
       <Text fontSize="sm" color="gray.400" textAlign="center">
-        Works with Youtube, Vimeo and others
+        {scopedT('worksWith.text')}
       </Text>
     </Stack>
   )