🌐 Add translation keys for input blocks (#1114)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Integrated localization support across various components using the
`useTranslate` hook for dynamic translations.

- **Enhancements**
- Replaced hardcoded text with localized strings to support multiple
languages in the user interface.

- **User Interface**
- Updated labels, placeholders, tooltips, and button texts to utilize
translated content for a multilingual experience.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Baptiste Arnaud <baptiste.arnaud95@gmail.com>
This commit is contained in:
Gabriel Pavão
2023-12-29 08:42:50 -03:00
committed by GitHub
parent 5fbbe9d86e
commit 53b702e8b1
37 changed files with 550 additions and 152 deletions

View File

@@ -2,9 +2,11 @@ import { MenuList, MenuItem } from '@chakra-ui/react'
import { CopyIcon, TrashIcon } from '@/components/icons'
import { useTypebot } from '@/features/editor/providers/TypebotProvider'
import { BlockIndices } from '@typebot.io/schemas'
import { useTranslate } from '@tolgee/react'
type Props = { indices: BlockIndices }
export const BlockNodeContextMenu = ({ indices }: Props) => {
const { t } = useTranslate()
const { deleteBlock, duplicateBlock } = useTypebot()
const handleDuplicateClick = () => duplicateBlock(indices)
@@ -14,10 +16,10 @@ export const BlockNodeContextMenu = ({ indices }: Props) => {
return (
<MenuList>
<MenuItem icon={<CopyIcon />} onClick={handleDuplicateClick}>
Duplicate
{t('duplicate')}
</MenuItem>
<MenuItem icon={<TrashIcon />} onClick={handleDeleteClick}>
Delete
{t('delete')}
</MenuItem>
</MenuList>
)

View File

@@ -9,6 +9,7 @@ import {
import { BlockWithOptions } from '@typebot.io/schemas'
import { getHelpDocUrl } from '@/features/graph/helpers/getHelpDocUrl'
import { useForgedBlock } from '@/features/forge/hooks/useForgedBlock'
import { useTranslate } from '@tolgee/react'
type Props = {
blockType: BlockWithOptions['type']
@@ -16,6 +17,7 @@ type Props = {
}
export const SettingsHoverBar = ({ blockType, onExpandClick }: Props) => {
const { t } = useTranslate()
const { blockDef } = useForgedBlock(blockType)
const helpDocUrl = getHelpDocUrl(blockType, blockDef)
return (
@@ -46,7 +48,7 @@ export const SettingsHoverBar = ({ blockType, onExpandClick }: Props) => {
href={helpDocUrl}
isExternal
>
Help
{t('help')}
</Button>
)}
</HStack>

View File

@@ -1,12 +1,14 @@
import { MenuList, MenuItem } from '@chakra-ui/react'
import { CopyIcon, TrashIcon } from '@/components/icons'
import { useTypebot } from '@/features/editor/providers/TypebotProvider'
import { useTranslate } from '@tolgee/react'
export const GroupNodeContextMenu = ({
groupIndex,
}: {
groupIndex: number
}) => {
const { t } = useTranslate()
const { deleteGroup, duplicateGroup } = useTypebot()
const handleDeleteClick = () => deleteGroup(groupIndex)
@@ -16,10 +18,10 @@ export const GroupNodeContextMenu = ({
return (
<MenuList>
<MenuItem icon={<CopyIcon />} onClick={handleDuplicateClick}>
Duplicate
{t('duplicate')}
</MenuItem>
<MenuItem icon={<TrashIcon />} onClick={handleDeleteClick}>
Delete
{t('delete')}
</MenuItem>
</MenuList>
)

View File

@@ -22,6 +22,7 @@ import { Coordinates } from '@dnd-kit/utilities'
import { BlockSourceEndpoint } from '../../endpoints/BlockSourceEndpoint'
import { LogicBlockType } from '@typebot.io/schemas/features/blocks/logic/constants'
import { InputBlockType } from '@typebot.io/schemas/features/blocks/inputs/constants'
import { useTranslate } from '@tolgee/react'
type Props = {
block: BlockWithItems
@@ -192,6 +193,8 @@ const DefaultItemNode = ({
block: BlockWithItems
groupId: string
}) => {
const { t } = useTranslate()
return (
<Flex
px="4"
@@ -205,7 +208,9 @@ const DefaultItemNode = ({
cursor="not-allowed"
>
<Text color="gray.500">
{block.type === LogicBlockType.CONDITION ? 'Else' : 'Default'}
{block.type === LogicBlockType.CONDITION
? t('blocks.inputs.button.else.label')
: t('blocks.inputs.button.default.label')}
</Text>
<BlockSourceEndpoint
source={{