Add i18n type func.

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

Hide file tree

Showing 9 changed files with 115 additions and 30 deletions.
diff --git a/apps/builder/src/features/editor/components/BlockCard.tsx b/apps/builder/src/features/editor/components/BlockCard.tsx
@@ -14,6 +14,7 @@ import { Plan } from '@typebot.io/prisma'
 import { useWorkspace } from '@/features/workspace/WorkspaceProvider'
 import { BlockLabel } from './BlockLabel'
 import { LockTag } from '@/features/billing/components/LockTag'
+import { useScopedI18n } from '@/locales'
 
 type Props = {
   type: DraggableBlockType
@@ -26,22 +27,23 @@ type Props = {
 export const BlockCard = (
   props: Pick<Props, 'type' | 'onMouseDown'>
 ): JSX.Element => {
+  const scopedT = useScopedI18n('editor.blockCard')
   const { workspace } = useWorkspace()
 
   switch (props.type) {
     case BubbleBlockType.EMBED:
       return (
         <BlockCardLayout
           {...props}
-          tooltip="Embed a pdf, an iframe, a website..."
+          tooltip={scopedT('bubbleBlock.tooltip.label')}
         >
           <BlockIcon type={props.type} />
           <BlockLabel type={props.type} />
         </BlockCardLayout>
       )
     case InputBlockType.FILE:
       return (
-        <BlockCardLayout {...props} tooltip="Upload Files">
+        <BlockCardLayout {...props} tooltip={scopedT('inputBlock.tooltip.files.label')}>
           <BlockIcon type={props.type} />
           <HStack>
             <BlockLabel type={props.type} />
@@ -51,14 +53,14 @@ export const BlockCard = (
       )
     case LogicBlockType.SCRIPT:
       return (
-        <BlockCardLayout {...props} tooltip="Execute Javascript code">
+        <BlockCardLayout {...props} tooltip={scopedT('logicBlock.tooltip.code.label')}>
           <BlockIcon type={props.type} />
           <BlockLabel type={props.type} />
         </BlockCardLayout>
       )
     case LogicBlockType.TYPEBOT_LINK:
       return (
-        <BlockCardLayout {...props} tooltip="Link and jump to another typebot">
+        <BlockCardLayout {...props} tooltip={scopedT('logicBlock.tooltip.link.label')}>
           <BlockIcon type={props.type} />
           <BlockLabel type={props.type} />
         </BlockCardLayout>
@@ -67,22 +69,22 @@ export const BlockCard = (
       return (
         <BlockCardLayout
           {...props}
-          tooltip="Fast forward the flow to another group"
+          tooltip={scopedT('logicBlock.tooltip.fastForward.label')}
         >
           <BlockIcon type={props.type} />
           <BlockLabel type={props.type} />
         </BlockCardLayout>
       )
     case IntegrationBlockType.GOOGLE_SHEETS:
       return (
-        <BlockCardLayout {...props} tooltip="Google Sheets">
+        <BlockCardLayout {...props} tooltip={scopedT('integrationBlock.tooltip.googleSheets.label')}>
           <BlockIcon type={props.type} />
           <BlockLabel type={props.type} />
         </BlockCardLayout>
       )
     case IntegrationBlockType.GOOGLE_ANALYTICS:
       return (
-        <BlockCardLayout {...props} tooltip="Google Analytics">
+        <BlockCardLayout {...props} tooltip={scopedT('integrationBlock.tooltip.googleAnalytics.label')}>
           <BlockIcon type={props.type} />
           <BlockLabel type={props.type} />
         </BlockCardLayout>

diff --git a/apps/builder/src/features/editor/components/BlocksSideBar.tsx b/apps/builder/src/features/editor/components/BlocksSideBar.tsx
@@ -104,10 +104,10 @@ export const BlocksSideBar = () => {
         className="hide-scrollbar"
       >
         <Flex justifyContent="flex-end">
-          <Tooltip label={isLocked ? 'Unlock sidebar' : 'Lock sidebar'}>
+          <Tooltip label={isLocked ? scopedT('sidebar.unlock.label') : scopedT('sidebar.lock.label') }>
             <IconButton
               icon={isLocked ? <LockedIcon /> : <UnlockedIcon />}
-              aria-label={isLocked ? 'Unlock' : 'Lock'}
+              aria-label={isLocked ? scopedT('sidebar.icon.unlock.label') : scopedT('sidebar.icon.lock.label') }
               size="sm"
               onClick={handleLockClick}
             />

diff --git a/apps/builder/src/features/editor/components/EditableTypebotName.tsx b/apps/builder/src/features/editor/components/EditableTypebotName.tsx
@@ -6,6 +6,7 @@ import {
   useColorModeValue,
 } from '@chakra-ui/react'
 import React, { useState } from 'react'
+import { useScopedI18n } from '@/locales'
 
 type EditableProps = {
   defaultName: string
@@ -15,6 +16,7 @@ export const EditableTypebotName = ({
   defaultName,
   onNewName,
 }: EditableProps) => {
+  const scopedT = useScopedI18n('editor.editableTypebotName')
   const emptyNameBg = useColorModeValue('gray.100', 'gray.700')
   const [currentName, setCurrentName] = useState(defaultName)
 
@@ -25,7 +27,7 @@ export const EditableTypebotName = ({
   }
 
   return (
-    <Tooltip label="Rename">
+    <Tooltip label={scopedT('tooltip.rename.label')}>
       <Editable
         value={currentName}
         onChange={setCurrentName}

diff --git a/apps/builder/src/features/editor/components/GettingStartedModal.tsx b/apps/builder/src/features/editor/components/GettingStartedModal.tsx
@@ -21,8 +21,10 @@ import {
 } from '@chakra-ui/react'
 import { useRouter } from 'next/router'
 import { useEffect } from 'react'
+import { useScopedI18n } from '@/locales'
 
 export const GettingStartedModal = () => {
+  const scopedT = useScopedI18n('editor.gettingStartedModal')
   const { query } = useRouter()
   const { isOpen, onOpen, onClose } = useDisclosure()
 
@@ -38,7 +40,7 @@ export const GettingStartedModal = () => {
         <ModalCloseButton />
         <ModalBody as={Stack} spacing="8" py="10">
           <Stack spacing={4}>
-            <Heading fontSize="xl">Editor basics</Heading>
+            <Heading fontSize="xl">{scopedT('editorBasics.heading')}</Heading>
             <List spacing={4}>
               <HStack as={ListItem}>
                 <Flex
@@ -52,11 +54,10 @@ export const GettingStartedModal = () => {
                   flexShrink={0}
                   fontSize="13px"
                 >
-                  1
+                  {scopedT('editorBasics.list.one.number')}
                 </Flex>
                 <Text>
-                  The left side bar contains blocks that you can drag and drop
-                  to the board.
+                  {scopedT('editorBasics.list.one.label')}
                 </Text>
               </HStack>
               <HStack as={ListItem}>
@@ -71,11 +72,10 @@ export const GettingStartedModal = () => {
                   fontWeight="bold"
                   flexShrink={0}
                 >
-                  2
+                  {scopedT('editorBasics.list.two.number')}
                 </Flex>
                 <Text>
-                  You can group blocks together by dropping them below or above
-                  each other
+                  {scopedT('editorBasics.list.two.label')}
                 </Text>
               </HStack>
               <HStack as={ListItem}>
@@ -90,9 +90,9 @@ export const GettingStartedModal = () => {
                   flexShrink={0}
                   fontSize="13px"
                 >
-                  3
+                  {scopedT('editorBasics.list.three.number')}
                 </Flex>
-                <Text>Connect the groups together</Text>
+                <Text>{scopedT('editorBasics.list.three.label')}</Text>
               </HStack>
               <HStack as={ListItem}>
                 <Flex
@@ -106,22 +106,20 @@ export const GettingStartedModal = () => {
                   flexShrink={0}
                   fontSize="13px"
                 >
-                  4
+                  {scopedT('editorBasics.list.four.number')}
                 </Flex>
                 <Text>
-                  Preview your bot by clicking the preview button on the top
-                  right
+                  {scopedT('editorBasics.list.four.label')}
                 </Text>
               </HStack>
             </List>
           </Stack>
 
           <Text>
-            Feel free to use the bottom-right bubble to reach out if you have
-            any question. I usually answer within the next 24 hours. 😃
+            {scopedT('editorBasics.list.label')}
           </Text>
           <Stack spacing={4}>
-            <Heading fontSize="xl">See it in action ({`<`} 5 minutes)</Heading>
+            <Heading fontSize="xl">{scopedT('seeAction.label')} ({`<`} {scopedT('seeAction.time')})</Heading>
             <iframe
               width="100%"
               height="315"
@@ -135,7 +133,7 @@ export const GettingStartedModal = () => {
               <AccordionItem>
                 <AccordionButton>
                   <Box flex="1" textAlign="left">
-                    Other videos
+                    {scopedT('seeAction.item.label')}
                   </Box>
                   <AccordionIcon />
                 </AccordionButton>

diff --git a/apps/builder/src/features/editor/providers/TypebotProvider.tsx b/apps/builder/src/features/editor/providers/TypebotProvider.tsx
@@ -23,6 +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'
 
 const autoSaveTimeout = 10000
 
@@ -42,6 +43,8 @@ type UpdateTypebotPayload = Partial<
   >
 >
 
+export type I18nFunction = (key: string) => string;
+
 export type SetTypebot = (
   newPresent: Typebot | ((current: Typebot) => Typebot)
 ) => void
@@ -79,6 +82,7 @@ export const TypebotProvider = ({
   children: ReactNode
   typebotId?: string
 }) => {
+  const scopedT = useScopedI18n('editor.provider')
   const { push } = useRouter()
   const { showToast } = useToast()
 
@@ -253,7 +257,7 @@ export const TypebotProvider = ({
         isPublished,
         updateTypebot: updateLocalTypebot,
         restorePublishedTypebot,
-        ...groupsActions(setLocalTypebot as SetTypebot),
+        ...groupsActions(setLocalTypebot as SetTypebot, scopedT as I18nFunction),
         ...blocksAction(setLocalTypebot as SetTypebot),
         ...variablesAction(setLocalTypebot as SetTypebot),
         ...edgesAction(setLocalTypebot as SetTypebot),

diff --git a/apps/builder/src/features/editor/providers/typebotActions/groups.ts b/apps/builder/src/features/editor/providers/typebotActions/groups.ts
@@ -6,7 +6,7 @@ import {
   DraggableBlockType,
   BlockIndices,
 } from '@typebot.io/schemas'
-import { SetTypebot } from '../TypebotProvider'
+import { SetTypebot, I18nFunction } from '../TypebotProvider'
 import {
   deleteGroupDraft,
   createBlockDraft,
@@ -28,7 +28,7 @@ export type GroupsActions = {
   deleteGroup: (groupIndex: number) => void
 }
 
-const groupsActions = (setTypebot: SetTypebot): GroupsActions => ({
+const groupsActions = (setTypebot: SetTypebot, scopedT: I18nFunction): GroupsActions => ({
   createGroup: ({
     id,
     block,
@@ -63,11 +63,12 @@ const groupsActions = (setTypebot: SetTypebot): GroupsActions => ({
       produce(typebot, (typebot) => {
         const group = typebot.groups[groupIndex]
         const id = createId()
+
         const newGroup: Group = {
           ...group,
           title: isEmpty(group.title)
             ? ''
-            : `${parseGroupTitle(group.title)} copy`,
+            : `${parseGroupTitle(group.title)} ${scopedT('groups.copy.title')}`,
           id,
           blocks: group.blocks.map((block) => duplicateBlockDraft(id)(block)),
           graphCoordinates: {

diff --git a/apps/builder/src/locales/en.ts b/apps/builder/src/locales/en.ts
@@ -203,6 +203,10 @@ export default {
   'editor.headers.helpButton.label': 'Help',
   'editor.headers.savingSpinner.label': 'Saving...',
   'editor.headers.previewButton.label': 'Preview',
+  'editor.sidebarBlocks.sidebar.lock.label': 'Lock sidebar',
+  'editor.sidebarBlocks.sidebar.unlock.label': 'Unlock sidebar',
+  'editor.sidebarBlocks.sidebar.icon.lock.label': 'Lock',
+  'editor.sidebarBlocks.sidebar.icon.unlock.label': 'Unlock',
   'editor.sidebarBlocks.blockType.bubbles.heading': 'Bubbles',
   'editor.sidebarBlocks.blockType.inputs.heading': 'Inputs',
   'editor.sidebarBlocks.blockType.logic.heading': 'Logic',
@@ -240,4 +244,26 @@ export default {
   'editor.sidebarBlock.chatwoot.label': 'Chatwoot',
   'editor.sidebarBlock.openai.label': 'OpenAI',
   'editor.sidebarBlock.pixel.label': 'Pixel',
+  'editor.blockCard.bubleBlock.tooltip.label': 'Embed a pdf, an iframe, a website...',
+  'editor.blockCard.inputBlock.tooltip.files.label': 'Upload Files',
+  'editor.blockCard.logicBlock.tooltip.code.label': 'Execute Javascript code',
+  'editor.blockCard.logicBlock.tooltip.link.label': 'Link and jump to another typebot',
+  'editor.blockCard.logicBlock.tooltip.fastForward.label': 'Fast forward the flow to another group',
+  'editor.blockCard.integrationBlock.tooltip.googleSheets.label': 'Google Sheets',
+  'editor.blockCard.integrationBlock.tooltip.googleAnalytics.label': 'Google Analytics',
+  'editor.editableTypebotName.tooltip.rename.label': 'Rename',
+  'editor.gettingStartedModal.editorBasics.heading': 'Editor Basics',
+  'editor.gettingStartedModal.editorBasics.list.one.number': '1',
+  'editor.gettingStartedModal.editorBasics.list.one.label': 'The left side bar contains blocks that you can drag and drop to the board.',
+  'editor.gettingStartedModal.editorBasics.list.two.number': '2',
+  'editor.gettingStartedModal.editorBasics.list.two.label': 'You can group blocks together by dropping them below or above each other',
+  'editor.gettingStartedModal.editorBasics.list.three.number': '3',
+  'editor.gettingStartedModal.editorBasics.list.three.label': 'Connect the groups together',
+  'editor.gettingStartedModal.editorBasics.list.four.number': '4',
+  'editor.gettingStartedModal.editorBasics.list.four.label': 'Preview your bot by clicking the preview button on the top right',
+  'editor.gettingStartedModal.editorBasics.list.label': 'Feel free to use the bottom-right bubble to reach out if you have any question. I usually answer within the next 24 hours. 😃',
+  'editor.gettingStartedModal.seeAction.label': 'See it in action',
+  'editor.gettingStartedModal.seeAction.time': '5 minutes',
+  'editor.gettingStartedModal.seeAction.item.label': 'Other videos',
+  'editor.provider.groups.copy.title': 'copy',
 } as const
diff --git a/apps/builder/src/locales/pt.ts b/apps/builder/src/locales/pt.ts
@@ -210,6 +210,10 @@ export default {
   'editor.headers.helpButton.label': 'Ajuda',
   'editor.headers.savingSpinner.label': 'Salvando...',
   'editor.headers.previewButton.label': 'Visualizar',
+  'editor.sidebarBlocks.sidebar.lock.label': 'Bloquear barra lateral',
+  'editor.sidebarBlocks.sidebar.unlock.label': 'Desbloquear barra lateral',
+  'editor.sidebarBlocks.sidebar.icon.lock.label': 'Bloquear',
+  'editor.sidebarBlocks.sidebar.icon.unlock.label': 'Desbloquear',
   'editor.sidebarBlocks.blockType.bubbles.heading': 'Bubbles',
   'editor.sidebarBlocks.blockType.inputs.heading': 'Inputs',
   'editor.sidebarBlocks.blockType.logic.heading': 'Condicionais',
@@ -247,4 +251,26 @@ export default {
   'editor.sidebarBlock.chatwoot.label': 'Chatwoot',
   'editor.sidebarBlock.openai.label': 'OpenAI',
   'editor.sidebarBlock.pixel.label': 'Pixel',
+  'editor.blockCard.bubleBlock.tooltip.label': 'Incorporar pdf, iframe, website...',
+  'editor.blockCard.inputBlock.tooltip.files.label': 'Carregar Ficheiros',
+  'editor.blockCard.logicBlock.tooltip.code.label': 'Executar código Javascript',
+  'editor.blockCard.logicBlock.tooltip.link.label': 'Link e salte para outro typebot',
+  'editor.blockCard.logicBlock.tooltip.fastForward.label': 'Encaminhar fluxo para outro grupo',
+  'editor.blockCard.integrationBlock.tooltip.googleSheets.label': 'Google Sheets',
+  'editor.blockCard.integrationBlock.tooltip.googleAnalytics.label': 'Google Analytics',
+  'editor.editableTypebotName.tooltip.rename.label': 'Renomear',
+  'editor.gettingStartedModal.editorBasics.heading': 'Noções básicas de editor',
+  'editor.gettingStartedModal.editorBasics.list.one.number': '1',
+  'editor.gettingStartedModal.editorBasics.list.one.label': 'A barra lateral esquerda contém blocos que pode arrastar e largar no quadro.',
+  'editor.gettingStartedModal.editorBasics.list.two.number': '2',
+  'editor.gettingStartedModal.editorBasics.list.two.label': 'Pode agrupar blocos juntos, colocando-os uns abaixo ou acima dos outros',
+  'editor.gettingStartedModal.editorBasics.list.three.number': '3',
+  'editor.gettingStartedModal.editorBasics.list.three.label': 'Ligue os grupos entre si',
+  'editor.gettingStartedModal.editorBasics.list.four.number': '4',
+  'editor.gettingStartedModal.editorBasics.list.four.label': 'Pré-visualize o seu bot ao clicar no botão de visualizar no canto superior direito',
+  'editor.gettingStartedModal.editorBasics.list.label': 'Sinta-se à vontade para usar o chat no canto inferior direito para entrar em contacto se tiver alguma questão. Normalmente, respondo nas próximas 24 horas. 😃',
+  'editor.gettingStartedModal.seeAction.label': 'Veja o funcionamento em',
+  'editor.gettingStartedModal.seeAction.time': '5 minutos',
+  'editor.gettingStartedModal.seeAction.item.label': 'Outros vídeos',
+  'editor.provider.groups.copy.title': 'Cópia',
 } as const
diff --git a/apps/builder/src/locales/pt_BR.ts b/apps/builder/src/locales/pt_BR.ts
@@ -210,6 +210,10 @@ export default {
   'editor.headers.helpButton.label': 'Ajuda',
   'editor.headers.savingSpinner.label': 'Salvando...',
   'editor.headers.previewButton.label': 'Visualizar',
+  'editor.sidebarBlocks.sidebar.lock.label': 'Bloquear barra lateral',
+  'editor.sidebarBlocks.sidebar.unlock.label': 'Desbloquear barra lateral',
+  'editor.sidebarBlocks.sidebar.icon.lock.label': 'Bloquear',
+  'editor.sidebarBlocks.sidebar.icon.unlock.label': 'Desbloquear',
   'editor.sidebarBlocks.blockType.bubbles.heading': 'Bubbles',
   'editor.sidebarBlocks.blockType.inputs.heading': 'Inputs',
   'editor.sidebarBlocks.blockType.logic.heading': 'Condicionais',
@@ -247,4 +251,26 @@ export default {
   'editor.sidebarBlock.chatwoot.label': 'Chatwoot',
   'editor.sidebarBlock.openai.label': 'OpenAI',
   'editor.sidebarBlock.pixel.label': 'Pixel',
+  'editor.blockCard.bubleBlock.tooltip.label': 'Incorporar pdf, iframe, website...',
+  'editor.blockCard.inputBlock.tooltip.files.label': 'Carregar Ficheiros',
+  'editor.blockCard.logicBlock.tooltip.code.label': 'Executar código Javascript',
+  'editor.blockCard.logicBlock.tooltip.link.label': 'Link e salte para outro typebot',
+  'editor.blockCard.logicBlock.tooltip.fastForward.label': 'Encaminhar fluxo para outro grupo',
+  'editor.blockCard.integrationBlock.tooltip.googleSheets.label': 'Google Sheets',
+  'editor.blockCard.integrationBlock.tooltip.googleAnalytics.label': 'Google Analytics',
+  'editor.editableTypebotName.tooltip.rename.label': 'Renomear',
+  'editor.gettingStartedModal.editorBasics.heading': 'Fundamentos do Editor',
+  'editor.gettingStartedModal.editorBasics.list.one.number': '1',
+  'editor.gettingStartedModal.editorBasics.list.one.label': 'A barra lateral esquerda contém blocos que podem ser arrastados e soltos no quadro.',
+  'editor.gettingStartedModal.editorBasics.list.two.number': '2',
+  'editor.gettingStartedModal.editorBasics.list.two.label': 'Você pode agrupar blocos juntos, colocando-os abaixo ou acima dos outros',
+  'editor.gettingStartedModal.editorBasics.list.three.number': '3',
+  'editor.gettingStartedModal.editorBasics.list.three.label': 'Conecte os grupos entre eles',
+  'editor.gettingStartedModal.editorBasics.list.four.number': '4',
+  'editor.gettingStartedModal.editorBasics.list.four.label': 'Pré-visualize o seu bot ao clicar no botão de visualizar no canto superior direito',
+  'editor.gettingStartedModal.editorBasics.list.label': 'Sinta-se à vontade para usar o chat no canto inferior direito para entrar em contato se tiver alguma dúvida. Normalmente, respondo nas próximas 24 horas. 😃',
+  'editor.gettingStartedModal.seeAction.label': 'Veja como funciona em',
+  'editor.gettingStartedModal.seeAction.time': '5 minutos',
+  'editor.gettingStartedModal.seeAction.item.label': 'Outros vídeos',
+  'editor.provider.groups.copy.title': 'Cópia',
 } as const