🌐 Add pt_BR and more translations (#767)

Original PR: https://github.com/baptisteArno/typebot.io/pull/694

---------

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

apps/builder/src/features/templates/components/CreateNewTypebotButtons.tsx

@@ -16,8 +16,10 @@ import { useWorkspace } from '@/features/workspace/WorkspaceProvider'
 import { useUser } from '@/features/account/hooks/useUser'
 import { useToast } from '@/hooks/useToast'
 import { trpc } from '@/lib/trpc'
+import { useScopedI18n } from '@/locales'
 
 export const CreateNewTypebotButtons = () => {
+  const scopedT = useScopedI18n('templates.buttons')
   const { workspace } = useWorkspace()
   const { user } = useUser()
   const router = useRouter()
@@ -70,7 +72,7 @@ export const CreateNewTypebotButtons = () => {
 
   return (
     <VStack maxW="600px" w="full" flex="1" pt="20" spacing={10}>
-      <Heading>Create a new typebot</Heading>
+      <Heading>{scopedT('heading')}</Heading>
       <Stack w="full" spacing={6}>
         <Button
           variant="outline"
@@ -87,7 +89,7 @@ export const CreateNewTypebotButtons = () => {
           onClick={() => handleCreateSubmit()}
           isLoading={isLoading}
         >
-          Start from scratch
+          {scopedT('fromScratchButton.label')}
         </Button>
         <Button
           variant="outline"
@@ -104,7 +106,7 @@ export const CreateNewTypebotButtons = () => {
           onClick={onOpen}
           isLoading={isLoading}
         >
-          Start from a template
+          {scopedT('fromTemplateButton.label')}
         </Button>
         <ImportTypebotFromFileButton
           variant="outline"
@@ -121,7 +123,7 @@ export const CreateNewTypebotButtons = () => {
           isLoading={isLoading}
           onNewTypebot={handleCreateSubmit}
         >
-          Import a file
+          {scopedT('importFileButton.label')}
         </ImportTypebotFromFileButton>
       </Stack>
       <TemplatesModal

apps/builder/src/features/templates/components/ImportTypebotFromFileButton.tsx

@@ -4,6 +4,7 @@ import { Typebot, typebotCreateSchema } from '@typebot.io/schemas'
 import { preprocessTypebot } from '@typebot.io/schemas/features/typebot/helpers/preprocessTypebot'
 import React, { ChangeEvent } from 'react'
 import { z } from 'zod'
+import { useScopedI18n } from '@/locales'
 
 type Props = {
   onNewTypebot: (typebot: Typebot) => void
@@ -13,6 +14,7 @@ export const ImportTypebotFromFileButton = ({
   onNewTypebot,
   ...props
 }: Props) => {
+  const scopedT = useScopedI18n('templates.importFromFileButon')
   const { showToast } = useToast()
 
   const handleInputChange = async (e: ChangeEvent<HTMLInputElement>) => {
@@ -27,7 +29,7 @@ export const ImportTypebotFromFileButton = ({
     } catch (err) {
       console.error(err)
       showToast({
-        description: "Failed to parse the file. Are you sure it's a typebot?",
+        description: scopedT('toastError.description'),
         details: {
           content: JSON.stringify(err, null, 2),
           lang: 'json',

apps/builder/src/features/templates/components/TemplatesModal.tsx

@@ -19,6 +19,7 @@ import { templates } from '../data'
 import { TemplateProps } from '../types'
 import { useToast } from '@/hooks/useToast'
 import { sendRequest } from '@typebot.io/lib'
+import { useScopedI18n } from '@/locales'
 
 type Props = {
   isOpen: boolean
@@ -27,6 +28,7 @@ type Props = {
 }
 
 export const TemplatesModal = ({ isOpen, onClose, onTypebotChoose }: Props) => {
+  const scopedT = useScopedI18n('templates.modal')
   const templateCardBackgroundColor = useColorModeValue('white', 'gray.800')
   const [typebot, setTypebot] = useState<Typebot>()
   const [selectedTemplate, setSelectedTemplate] = useState<TemplateProps>(
@@ -88,7 +90,7 @@ export const TemplatesModal = ({ isOpen, onClose, onTypebotChoose }: Props) => {
                   pl="1"
                   color="gray.500"
                 >
-                  Marketing
+                  {scopedT('menuHeading.marketing')}
                 </Text>
                 {templates
                   .filter((template) => template.category === 'marketing')
@@ -110,7 +112,7 @@ export const TemplatesModal = ({ isOpen, onClose, onTypebotChoose }: Props) => {
                         <Text>{template.name}</Text>
                         {template.isNew && (
                           <Tag colorScheme="orange" size="sm" flexShrink={0}>
-                            New
+                            {scopedT('menuHeading.new.tag')}
                           </Tag>
                         )}
                       </HStack>
@@ -124,7 +126,7 @@ export const TemplatesModal = ({ isOpen, onClose, onTypebotChoose }: Props) => {
                   pl="1"
                   color="gray.500"
                 >
-                  Product
+                  {scopedT('menuHeading.product')}
                 </Text>
                 {templates
                   .filter((template) => template.category === 'product')
@@ -146,7 +148,7 @@ export const TemplatesModal = ({ isOpen, onClose, onTypebotChoose }: Props) => {
                         <Text>{template.name}</Text>
                         {template.isNew && (
                           <Tag colorScheme="orange" size="sm" flexShrink={0}>
-                            New
+                            {scopedT('menuHeading.new.tag')}
                           </Tag>
                         )}
                       </HStack>
@@ -160,7 +162,7 @@ export const TemplatesModal = ({ isOpen, onClose, onTypebotChoose }: Props) => {
                   pl="1"
                   color="gray.500"
                 >
-                  Other
+                  {scopedT('menuHeading.other')}
                 </Text>
                 {templates
                   .filter((template) => template.category === undefined)
@@ -182,7 +184,7 @@ export const TemplatesModal = ({ isOpen, onClose, onTypebotChoose }: Props) => {
                         <Text>{template.name}</Text>
                         {template.isNew && (
                           <Tag colorScheme="orange" size="sm" flexShrink={0}>
-                            New
+                            {scopedT('menuHeading.new.tag')}
                           </Tag>
                         )}
                       </HStack>
@@ -229,7 +231,7 @@ export const TemplatesModal = ({ isOpen, onClose, onTypebotChoose }: Props) => {
                 onClick={onUseThisTemplateClick}
                 isLoading={isLoading}
               >
-                Use this template
+                {scopedT('useTemplateButton.label')}
               </Button>
             </HStack>
           </Stack>