Merge commit '5fbbe9d86e52f6fc8370d5fea089781e07ea3043' into builder_…

…feat/input-blocks-pt_BR-translation

.vscode/settings.json

@@ -1,5 +1,5 @@
 {
-  "i18n-ally.localesPaths": ["apps/builder/public/locales"],
+  "i18n-ally.localesPaths": ["apps/builder/src/i18n"],
   "i18n-ally.keystyle": "flat",
   "i18n-ally.displayLanguage": "en",
   "i18n-ally.enabledFrameworks": ["custom"],

apps/builder/package.json

@@ -31,8 +31,8 @@
     "@sentry/nextjs": "7.77.0",
     "@tanstack/react-query": "4.29.19",
     "@tanstack/react-table": "8.9.3",
-    "@tolgee/format-icu": "5.13.3",
-    "@tolgee/react": "5.13.3",
+    "@tolgee/format-icu": "5.19.0",
+    "@tolgee/react": "5.19.0",
     "@trpc/client": "10.40.0",
     "@trpc/next": "10.40.0",
     "@trpc/react-query": "10.40.0",

apps/builder/src/components/ColorPicker.tsx

@@ -14,6 +14,7 @@ import {
   ButtonProps,
   Box,
 } from '@chakra-ui/react'
+import { useTranslate } from '@tolgee/react'
 import React, { ChangeEvent, useState } from 'react'
 import tinyColor from 'tinycolor2'
 
@@ -37,6 +38,7 @@ type Props = {
 }
 
 export const ColorPicker = ({ value, defaultValue, onColorChange }: Props) => {
+  const { t } = useTranslate()
   const [color, setColor] = useState(defaultValue ?? '')
   const displayedValue = value ?? color
 
@@ -54,7 +56,7 @@ export const ColorPicker = ({ value, defaultValue, onColorChange }: Props) => {
     <Popover variant="picker" placement="right" isLazy>
       <PopoverTrigger>
         <Button
-          aria-label={'Pick a color'}
+          aria-label={t('colorPicker.pickColor.ariaLabel')}
           height="22px"
           width="22px"
           padding={0}
@@ -98,7 +100,7 @@ export const ColorPicker = ({ value, defaultValue, onColorChange }: Props) => {
             borderRadius={3}
             marginTop={3}
             placeholder="#2a9d8f"
-            aria-label="Color value"
+            aria-label={t('colorPicker.colorValue.ariaLabel')}
             size="sm"
             value={displayedValue}
             onChange={handleColorChange}
@@ -108,7 +110,7 @@ export const ColorPicker = ({ value, defaultValue, onColorChange }: Props) => {
             color={displayedValue}
             onColorChange={handleColorChange}
           >
-            Advanced picker
+            {t('colorPicker.advancedColors')}
           </NativeColorPicker>
         </PopoverBody>
       </PopoverContent>

apps/builder/src/components/ConfirmModal.tsx

@@ -61,7 +61,7 @@ export const ConfirmModal = ({
 
           <AlertDialogFooter>
             <Button ref={cancelRef} onClick={onClose}>
-              Cancel
+              {t('cancel')}
             </Button>
             <Button
               colorScheme={confirmButtonColor}

apps/builder/src/components/TimeSince.tsx

@@ -0,0 +1,46 @@
+import { T } from '@tolgee/react'
+
+type Props = {
+  date: string
+}
+
+export const TimeSince = ({ date }: Props) => {
+  const seconds = Math.floor(
+    (new Date().getTime() - new Date(date).getTime()) / 1000
+  )
+
+  let interval = seconds / 31536000
+
+  if (interval > 1) {
+    return (
+      <T keyName="timeSince.years" params={{ count: Math.floor(interval) }} />
+    )
+  }
+  interval = seconds / 2592000
+  if (interval > 1) {
+    return (
+      <T keyName="timeSince.months" params={{ count: Math.floor(interval) }} />
+    )
+  }
+  interval = seconds / 86400
+  if (interval > 1) {
+    return (
+      <T keyName="timeSince.days" params={{ count: Math.floor(interval) }} />
+    )
+  }
+  interval = seconds / 3600
+  if (interval > 1) {
+    return (
+      <T keyName="timeSince.hours" params={{ count: Math.floor(interval) }} />
+    )
+  }
+  interval = seconds / 60
+  if (interval > 1) {
+    return (
+      <T keyName="timeSince.minutes" params={{ count: Math.floor(interval) }} />
+    )
+  }
+  return (
+    <T keyName="timeSince.seconds" params={{ count: Math.floor(interval) }} />
+  )
+}

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

@@ -23,9 +23,9 @@ import { byId, isDefined } from '@typebot.io/lib'
 import { CreateTokenModal } from './CreateTokenModal'
 import { useApiTokens } from '../hooks/useApiTokens'
 import { ApiTokenFromServer } from '../types'
-import { parseTimeSince } from '@/helpers/parseTimeSince'
 import { deleteApiTokenQuery } from '../queries/deleteApiTokenQuery'
 import { T, useTranslate } from '@tolgee/react'
+import { TimeSince } from '@/components/TimeSince'
 
 type Props = { user: User }
 
@@ -84,7 +84,9 @@ export const ApiTokensList = ({ user }: Props) => {
             {apiTokens?.map((token) => (
               <Tr key={token.id}>
                 <Td>{token.name}</Td>
-                <Td>{parseTimeSince(token.createdAt)} ago</Td>
+                <Td>
+                  <TimeSince date={token.createdAt} />
+                </Td>
                 <Td>
                   <Button
                     size="xs"

apps/builder/src/features/collaboration/components/CollaborationList.tsx

@@ -28,7 +28,8 @@ import { deleteInvitationQuery } from '../queries/deleteInvitationQuery'
 import { updateCollaboratorQuery } from '../queries/updateCollaboratorQuery'
 import { deleteCollaboratorQuery } from '../queries/deleteCollaboratorQuery'
 import { sendInvitationQuery } from '../queries/sendInvitationQuery'
-import { TFnType, useTranslate } from '@tolgee/react'
+import { useTranslate } from '@tolgee/react'
+import { ReadableCollaborationType } from './ReadableCollaborationType'
 
 export const CollaborationList = () => {
   const { currentRole, workspace } = useWorkspace()
@@ -180,10 +181,7 @@ export const CollaborationList = () => {
             </Text>
           </HStack>
           <Tag flexShrink={0}>
-            {convertCollaborationTypeEnumToReadable(
-              t,
-              CollaborationType.FULL_ACCESS
-            )}
+            <ReadableCollaborationType type={CollaborationType.FULL_ACCESS} />
           </Tag>
         </Flex>
       )}
@@ -232,43 +230,25 @@ const CollaborationTypeMenuButton = ({
 }: {
   type: CollaborationType
   onChange: (type: CollaborationType) => void
-}) => {
-  const { t } = useTranslate()
-
-  return (
-    <Menu placement="bottom-end">
-      <MenuButton
-        flexShrink={0}
-        size="sm"
-        as={Button}
-        rightIcon={<ChevronLeftIcon transform={'rotate(-90deg)'} />}
-      >
-        {convertCollaborationTypeEnumToReadable(t, type)}
-      </MenuButton>
-      <MenuList minW={0}>
-        <Stack maxH={'35vh'} overflowY="scroll" spacing="0">
-          <MenuItem onClick={() => onChange(CollaborationType.READ)}>
-            {convertCollaborationTypeEnumToReadable(t, CollaborationType.READ)}
-          </MenuItem>
-          <MenuItem onClick={() => onChange(CollaborationType.WRITE)}>
-            {convertCollaborationTypeEnumToReadable(t, CollaborationType.WRITE)}
-          </MenuItem>
-        </Stack>
-      </MenuList>
-    </Menu>
-  )
-}
-
-export const convertCollaborationTypeEnumToReadable = (
-  t: TFnType,
-  type: CollaborationType
-) => {
-  switch (type) {
-    case CollaborationType.READ:
-      return t('collaboration.roles.view.label')
-    case CollaborationType.WRITE:
-      return t('collaboration.roles.edit.label')
-    case CollaborationType.FULL_ACCESS:
-      return t('collaboration.roles.full.label')
-  }
-}
+}) => (
+  <Menu placement="bottom-end">
+    <MenuButton
+      flexShrink={0}
+      size="sm"
+      as={Button}
+      rightIcon={<ChevronLeftIcon transform={'rotate(-90deg)'} />}
+    >
+      <ReadableCollaborationType type={type} />
+    </MenuButton>
+    <MenuList minW={0}>
+      <Stack maxH={'35vh'} overflowY="scroll" spacing="0">
+        <MenuItem onClick={() => onChange(CollaborationType.READ)}>
+          <ReadableCollaborationType type={CollaborationType.READ} />
+        </MenuItem>
+        <MenuItem onClick={() => onChange(CollaborationType.WRITE)}>
+          <ReadableCollaborationType type={CollaborationType.WRITE} />
+        </MenuItem>
+      </Stack>
+    </MenuList>
+  </Menu>
+)

apps/builder/src/features/collaboration/components/CollaboratorButton.tsx

@@ -12,8 +12,8 @@ import {
 } from '@chakra-ui/react'
 import { CollaborationType } from '@typebot.io/prisma'
 import React from 'react'
-import { convertCollaborationTypeEnumToReadable } from './CollaborationList'
 import { useTranslate } from '@tolgee/react'
+import { ReadableCollaborationType } from './ReadableCollaborationType'
 
 type Props = {
   image?: string
@@ -50,16 +50,16 @@ export const CollaboratorItem = ({
           name={name}
           image={image}
           isGuest={isGuest}
-          tag={convertCollaborationTypeEnumToReadable(t, type)}
+          type={type}
         />
       </MenuButton>
       {isOwner && (
         <MenuList shadow="lg">
           <MenuItem onClick={handleEditClick}>
-            {convertCollaborationTypeEnumToReadable(t, CollaborationType.WRITE)}
+            <ReadableCollaborationType type={CollaborationType.WRITE} />
           </MenuItem>
           <MenuItem onClick={handleViewClick}>
-            {convertCollaborationTypeEnumToReadable(t, CollaborationType.READ)}
+            <ReadableCollaborationType type={CollaborationType.READ} />
           </MenuItem>
           <MenuItem color="red.500" onClick={onDeleteClick}>
             {t('remove')}
@@ -72,13 +72,13 @@ export const CollaboratorItem = ({
 
 export const CollaboratorIdentityContent = ({
   name,
-  tag,
+  type,
   isGuest = false,
   image,
   email,
 }: {
   name?: string
-  tag?: string
+  type: CollaborationType
   image?: string
   isGuest?: boolean
   email: string
@@ -106,7 +106,9 @@ export const CollaboratorIdentityContent = ({
       </HStack>
       <HStack flexShrink={0}>
         {isGuest && <Tag color="gray.400">{t('pending')}</Tag>}
-        <Tag>{tag}</Tag>
+        <Tag>
+          <ReadableCollaborationType type={type} />
+        </Tag>
       </HStack>
     </HStack>
   )

apps/builder/src/features/collaboration/components/ReadableCollaborationType.tsx

@@ -0,0 +1,14 @@
+import { T } from '@tolgee/react'
+import { CollaborationType } from '@typebot.io/prisma'
+
+type Props = { type: CollaborationType }
+export const ReadableCollaborationType = ({ type }: Props) => {
+  switch (type) {
+    case CollaborationType.READ:
+      return <T keyName="collaboration.roles.view.label" />
+    case CollaborationType.WRITE:
+      return <T keyName="collaboration.roles.edit.label" />
+    case CollaborationType.FULL_ACCESS:
+      return <T keyName="collaboration.roles.full.label" />
+  }
+}

apps/builder/src/features/editor/components/EditableTypebotName.tsx

@@ -27,7 +27,7 @@ export const EditableTypebotName = ({
   }
 
   return (
-    <Tooltip label={t('editor.editableTypebotName.tooltip.rename.label')}>
+    <Tooltip label={t('rename')}>
       <Editable
         value={currentName}
         onChange={setCurrentName}

apps/builder/src/features/folders/components/TypebotButton.tsx

@@ -214,7 +214,7 @@ export const TypebotButton = ({
               </Alert>
             </Stack>
           }
-          confirmButtonLabel="Delete"
+          confirmButtonLabel={t('delete')}
           onConfirm={handleDeleteTypebotClick}
           isOpen={isDeleteOpen}
           onClose={onDeleteClose}

apps/builder/src/features/publish/components/PublishButton.tsx

@@ -24,15 +24,15 @@ import { useRouter } from 'next/router'
 import { isNotDefined } from '@typebot.io/lib'
 import { ChangePlanModal } from '@/features/billing/components/ChangePlanModal'
 import { isFreePlan } from '@/features/billing/helpers/isFreePlan'
-import { parseTimeSince } from '@/helpers/parseTimeSince'
-import { useTranslate } from '@tolgee/react'
+import { T, useTranslate } from '@tolgee/react'
 import { trpc } from '@/lib/trpc'
 import { useToast } from '@/hooks/useToast'
 import { parseDefaultPublicId } from '../helpers/parseDefaultPublicId'
 import { InputBlockType } from '@typebot.io/schemas/features/blocks/inputs/constants'
 import { ConfirmModal } from '@/components/ConfirmModal'
 import { TextLink } from '@/components/TextLink'
 import { useUser } from '@/features/account/hooks/useUser'
+import { useTimeSince } from '@/hooks/useTimeSince'
 
 type Props = ButtonProps & {
   isMoreMenuDisabled?: boolean
@@ -61,6 +61,9 @@ export const PublishButton = ({
     save,
     publishedTypebotVersion,
   } = useTypebot()
+  const timeSinceLastPublish = useTimeSince(
+    publishedTypebot?.updatedAt.toString()
+  )
   const { showToast } = useToast()
 
   const {
@@ -156,16 +159,19 @@ export const PublishButton = ({
                 {t('publish.versionWarning.message.aboutToDeploy.label')}
               </Text>
               <Text fontWeight="bold">
-                {t('publish.versionWarning.message.check.label')}{' '}
-                <TextLink
-                  href="https://docs.typebot.io/breaking-changes#typebot-v6"
-                  isExternal
-                >
-                  {t('publish.versionWarning.message.breakingChanges.label')}
-                </TextLink>
+                <T
+                  keyName="publish.versionWarning.checkBreakingChanges"
+                  params={{
+                    link: (
+                      <TextLink
+                        href="https://docs.typebot.io/breaking-changes#typebot-v6"
+                        isExternal
+                      />
+                    ),
+                  }}
+                />
               </Text>
               <Text>
-                {' '}
                 {t('publish.versionWarning.message.testInPreviewMode.label')}
               </Text>
             </Stack>
@@ -178,12 +184,16 @@ export const PublishButton = ({
         label={
           <Stack>
             <Text>{t('publishButton.tooltip.nonPublishedChanges.label')}</Text>
-            <Text fontStyle="italic">
-              {t('publishButton.tooltip.publishedVersion.from.label')}{' '}
-              {publishedTypebot &&
-                parseTimeSince(publishedTypebot.updatedAt.toString())}{' '}
-              {t('publishButton.tooltip.publishedVersion.ago.label')}
-            </Text>
+            {timeSinceLastPublish ? (
+              <Text fontStyle="italic">
+                <T
+                  keyName="publishButton.tooltip.publishedVersion.from.label"
+                  params={{
+                    timeSince: timeSinceLastPublish,
+                  }}
+                />
+              </Text>
+            ) : null}
           </Stack>
         }
         isDisabled={isNotDefined(publishedTypebot) || isPublished}