diff --git a/apps/builder/src/features/editor/components/BlockCard.tsx b/apps/builder/src/features/editor/components/BlockCard.tsx index d742b0bd53..044e299268 100644 --- 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,6 +27,7 @@ type Props = { export const BlockCard = ( props: Pick ): JSX.Element => { + const scopedT = useScopedI18n('editor.blockCard') const { workspace } = useWorkspace() switch (props.type) { @@ -33,7 +35,7 @@ export const BlockCard = ( return ( @@ -41,7 +43,7 @@ export const BlockCard = ( ) case InputBlockType.FILE: return ( - + @@ -51,14 +53,14 @@ export const BlockCard = ( ) case LogicBlockType.SCRIPT: return ( - + ) case LogicBlockType.TYPEBOT_LINK: return ( - + @@ -67,7 +69,7 @@ export const BlockCard = ( return ( @@ -75,14 +77,14 @@ export const BlockCard = ( ) case IntegrationBlockType.GOOGLE_SHEETS: return ( - + ) case IntegrationBlockType.GOOGLE_ANALYTICS: return ( - + diff --git a/apps/builder/src/features/editor/components/BlocksSideBar.tsx b/apps/builder/src/features/editor/components/BlocksSideBar.tsx index 45c1952df8..67a9d5cd0c 100644 --- 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" > - + : } - 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 index 4a91488cd8..ecf3445270 100644 --- 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 ( - + { + const scopedT = useScopedI18n('editor.gettingStartedModal') const { query } = useRouter() const { isOpen, onOpen, onClose } = useDisclosure() @@ -38,7 +40,7 @@ export const GettingStartedModal = () => { - Editor basics + {scopedT('editorBasics.heading')} { flexShrink={0} fontSize="13px" > - 1 + {scopedT('editorBasics.list.one.number')} - The left side bar contains blocks that you can drag and drop - to the board. + {scopedT('editorBasics.list.one.label')} @@ -71,11 +72,10 @@ export const GettingStartedModal = () => { fontWeight="bold" flexShrink={0} > - 2 + {scopedT('editorBasics.list.two.number')} - You can group blocks together by dropping them below or above - each other + {scopedT('editorBasics.list.two.label')} @@ -90,9 +90,9 @@ export const GettingStartedModal = () => { flexShrink={0} fontSize="13px" > - 3 + {scopedT('editorBasics.list.three.number')} - Connect the groups together + {scopedT('editorBasics.list.three.label')} { flexShrink={0} fontSize="13px" > - 4 + {scopedT('editorBasics.list.four.number')} - Preview your bot by clicking the preview button on the top - right + {scopedT('editorBasics.list.four.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. 😃 + {scopedT('editorBasics.list.label')} - See it in action ({`<`} 5 minutes) + {scopedT('seeAction.label')} ({`<`} {scopedT('seeAction.time')})