🌐 Remove default values and dropdown dynamic selector

baptisteArno · Dec 29, 2023 · 2e0a8ff · 2e0a8ff
1 parent ca7c8c1
commit 2e0a8ff
Show file tree

Hide file tree

Showing 37 changed files with 790 additions and 978 deletions.
diff --git a/apps/builder/src/components/DropdownList.tsx b/apps/builder/src/components/DropdownList.tsx
@@ -16,7 +16,6 @@ import {
 import { ChevronLeftIcon } from '@/components/icons'
 import React, { ReactNode } from 'react'
 import { MoreInfoTooltip } from './MoreInfoTooltip'
-import { useTranslate } from '@tolgee/react'
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type Props<T extends readonly any[]> = {
@@ -44,7 +43,6 @@ export const DropdownList = <T extends readonly any[]>({
   moreInfoTooltip,
   ...props
 }: Props<T> & ButtonProps) => {
-  const { t } = useTranslate()
   const handleMenuItemClick = (operator: T[number]) => () => {
     onItemSelect(operator)
   }
@@ -90,10 +88,7 @@ export const DropdownList = <T extends readonly any[]>({
                   textOverflow="ellipsis"
                   onClick={handleMenuItemClick(item)}
                 >
-                  {t(
-                    `components.dropdownList.item.${item.replace?.(/\s/g, '')}`,
-                    item.toString()
-                  )}
+                  {item}
                 </MenuItem>
               ))}
             </Stack>

diff --git a/apps/builder/src/features/blocks/inputs/buttons/components/ButtonsBlockNode.tsx b/apps/builder/src/features/blocks/inputs/buttons/components/ButtonsBlockNode.tsx
@@ -22,15 +22,11 @@ export const ButtonsBlockNode = ({ block, indices }: Props) => {
     <Stack w="full">
       {block.options?.dynamicVariableId ? (
         <Wrap spacing={1}>
-          <Text>
-            {t('editor.blocks.inputs.button.variables.display.label')}
-          </Text>
+          <Text>{t('blocks.inputs.button.variables.display.label')}</Text>
           <Tag bg="orange.400" color="white">
             {dynamicVariableName}
           </Tag>
-          <Text>
-            {t('editor.blocks.inputs.button.variables.buttons.label')}
-          </Text>
+          <Text>{t('blocks.inputs.button.variables.buttons.label')}</Text>
         </Wrap>
       ) : (
         <ItemNodesList block={block} indices={indices} />

diff --git a/apps/builder/src/features/blocks/inputs/buttons/components/ButtonsBlockSettings.tsx b/apps/builder/src/features/blocks/inputs/buttons/components/ButtonsBlockSettings.tsx
@@ -31,45 +31,42 @@ export const ButtonsBlockSettings = ({ options, onOptionsChange }: Props) => {
   return (
     <Stack spacing={4}>
       <SwitchWithRelatedSettings
-        label={t('editor.blocks.inputs.settings.multipleChoice.label')}
+        label={t('blocks.inputs.settings.multipleChoice.label')}
         initialValue={
           options?.isMultipleChoice ??
           defaultChoiceInputOptions.isMultipleChoice
         }
         onCheckChange={updateIsMultiple}
       >
         <TextInput
-          label={t('editor.blocks.inputs.settings.submitButton.label')}
+          label={t('blocks.inputs.settings.submitButton.label')}
           defaultValue={
-            options?.buttonLabel ??
-            t('editor.blocks.inputs.settings.buttonText.label')
+            options?.buttonLabel ?? t('blocks.inputs.settings.buttonText.label')
           }
           onChange={updateButtonLabel}
         />
       </SwitchWithRelatedSettings>
       <SwitchWithRelatedSettings
-        label={t('editor.blocks.inputs.settings.isSearchable.label')}
+        label={t('blocks.inputs.settings.isSearchable.label')}
         initialValue={
           options?.isSearchable ?? defaultChoiceInputOptions.isSearchable
         }
         onCheckChange={updateIsSearchable}
       >
         <TextInput
-          label={t('editor.blocks.inputs.settings.input.placeholder.label')}
+          label={t('blocks.inputs.settings.input.placeholder.label')}
           defaultValue={
             options?.searchInputPlaceholder ??
-            t('editor.blocks.inputs.settings.input.filterOptions.label')
+            t('blocks.inputs.settings.input.filterOptions.label')
           }
           onChange={updateSearchInputPlaceholder}
         />
       </SwitchWithRelatedSettings>
       <FormControl>
         <FormLabel>
-          {t('editor.blocks.inputs.button.settings.dynamicData.label')}{' '}
+          {t('blocks.inputs.button.settings.dynamicData.label')}{' '}
           <MoreInfoTooltip>
-            {t(
-              'editor.blocks.inputs.button.settings.dynamicData.infoText.label'
-            )}
+            {t('blocks.inputs.button.settings.dynamicData.infoText.label')}
           </MoreInfoTooltip>
         </FormLabel>
         <VariableSearchInput
@@ -79,7 +76,7 @@ export const ButtonsBlockSettings = ({ options, onOptionsChange }: Props) => {
       </FormControl>
       <Stack>
         <FormLabel mb="0" htmlFor="variable">
-          {t('editor.blocks.inputs.settings.saveAnswer.label')}
+          {t('blocks.inputs.settings.saveAnswer.label')}
         </FormLabel>
         <VariableSearchInput
           initialVariableId={options?.variableId}

diff --git a/apps/builder/src/features/blocks/inputs/buttons/components/ButtonsItemNode.tsx b/apps/builder/src/features/blocks/inputs/buttons/components/ButtonsItemNode.tsx
@@ -34,7 +34,7 @@ export const ButtonsItemNode = ({ item, indices, isMouseOver }: Props) => {
   const { deleteItem, updateItem, createItem } = useTypebot()
   const { openedItemId, setOpenedItemId } = useGraph()
   const [itemValue, setItemValue] = useState(
-    item.content ?? t('editor.blocks.inputs.button.clickToEdit.label')
+    item.content ?? t('blocks.inputs.button.clickToEdit.label')
   )
   const editableRef = useRef<HTMLDivElement | null>(null)
   const ref = useRef<HTMLDivElement | null>(null)
@@ -53,13 +53,13 @@ export const ButtonsItemNode = ({ item, indices, isMouseOver }: Props) => {
   const handleKeyPress = (e: React.KeyboardEvent<HTMLDivElement>) => {
     if (
       e.key === 'Escape' &&
-      itemValue === t('editor.blocks.inputs.button.clickToEdit.label')
+      itemValue === t('blocks.inputs.button.clickToEdit.label')
     )
       deleteItem(indices)
     if (
       e.key === 'Enter' &&
       itemValue !== '' &&
-      itemValue !== t('editor.blocks.inputs.button.clickToEdit.label')
+      itemValue !== t('blocks.inputs.button.clickToEdit.label')
     )
       handlePlusClick()
   }
@@ -95,8 +95,7 @@ export const ButtonsItemNode = ({ item, indices, isMouseOver }: Props) => {
             <EditablePreview
               w="full"
               color={
-                item.content !==
-                t('editor.blocks.inputs.button.clickToEdit.label')
+                item.content !== t('blocks.inputs.button.clickToEdit.label')
                   ? 'inherit'
                   : 'gray.500'
               }
@@ -118,9 +117,7 @@ export const ButtonsItemNode = ({ item, indices, isMouseOver }: Props) => {
           >
             <Flex bgColor={useColorModeValue('white', 'gray.800')} rounded="md">
               <IconButton
-                aria-label={t(
-                  'editor.blocks.inputs.button.openSettings.ariaLabel'
-                )}
+                aria-label={t('blocks.inputs.button.openSettings.ariaLabel')}
                 icon={<SettingsIcon />}
                 variant="ghost"
                 size="sm"
@@ -140,7 +137,7 @@ export const ButtonsItemNode = ({ item, indices, isMouseOver }: Props) => {
             unmountOnExit
           >
             <IconButton
-              aria-label={t('editor.blocks.inputs.button.addItem.ariaLabel')}
+              aria-label={t('blocks.inputs.button.addItem.ariaLabel')}
               icon={<PlusIcon />}
               size="xs"
               shadow="md"

diff --git a/apps/builder/src/features/blocks/inputs/buttons/components/ButtonsItemSettings.tsx b/apps/builder/src/features/blocks/inputs/buttons/components/ButtonsItemSettings.tsx
@@ -35,9 +35,9 @@ export const ButtonsItemSettings = ({ item, onSettingsChange }: Props) => {
   return (
     <Stack spacing={4}>
       <SwitchWithRelatedSettings
-        label={t('editor.blocks.inputs.settings.displayCondition.label')}
+        label={t('blocks.inputs.settings.displayCondition.label')}
         moreInfoContent={t(
-          'editor.blocks.inputs.button.buttonSettings.displayCondition.infoText.label'
+          'blocks.inputs.button.buttonSettings.displayCondition.infoText.label'
         )}
         initialValue={item.displayCondition?.isEnabled ?? false}
         onCheckChange={updateIsDisplayConditionEnabled}

diff --git a/apps/builder/src/features/blocks/inputs/date/components/DateInputSettings.tsx b/apps/builder/src/features/blocks/inputs/date/components/DateInputSettings.tsx
@@ -43,54 +43,52 @@ export const DateInputSettings = ({ options, onOptionsChange }: Props) => {
   return (
     <Stack spacing={4}>
       <SwitchWithRelatedSettings
-        label={t('editor.blocks.inputs.date.settings.isRange.label')}
+        label={t('blocks.inputs.date.settings.isRange.label')}
         initialValue={options?.isRange ?? defaultDateInputOptions.isRange}
         onCheckChange={updateIsRange}
       >
         <TextInput
-          label={t('editor.blocks.inputs.date.settings.from.label')}
+          label={t('blocks.inputs.date.settings.from.label')}
           defaultValue={
-            options?.labels?.from ??
-            t('editor.blocks.inputs.date.settings.fromInputValue.label')
+            options?.labels?.from ?? defaultDateInputOptions.labels.from
           }
           onChange={updateFromLabel}
         />
         <TextInput
-          label={t('editor.blocks.inputs.date.settings.to.label')}
+          label={t('blocks.inputs.date.settings.to.label')}
           defaultValue={
             options?.labels?.to ??
-            t('editor.blocks.inputs.date.settings.toInputValue.label')
+            t('blocks.inputs.date.settings.toInputValue.label')
           }
           onChange={updateToLabel}
         />
       </SwitchWithRelatedSettings>
       <SwitchWithLabel
-        label={t('editor.blocks.inputs.date.settings.withTime.label')}
+        label={t('blocks.inputs.date.settings.withTime.label')}
         initialValue={options?.hasTime ?? defaultDateInputOptions.hasTime}
         onCheckChange={updateHasTime}
       />
       <TextInput
-        label={t('editor.blocks.inputs.settings.button.label')}
+        label={t('blocks.inputs.settings.button.label')}
         defaultValue={
-          options?.labels?.button ??
-          t('editor.blocks.inputs.settings.buttonText.label')
+          options?.labels?.button ?? defaultDateInputOptions.labels.button
         }
         onChange={updateButtonLabel}
       />
       <TextInput
-        label={t('editor.blocks.inputs.settings.min.label')}
+        label={t('blocks.inputs.settings.min.label')}
         defaultValue={options?.min}
         placeholder={options?.hasTime ? 'YYYY-MM-DDTHH:mm' : 'YYYY-MM-DD'}
         onChange={updateMin}
       />
       <TextInput
-        label={t('editor.blocks.inputs.settings.max.label')}
+        label={t('blocks.inputs.settings.max.label')}
         defaultValue={options?.max}
         placeholder={options?.hasTime ? 'YYYY-MM-DDTHH:mm' : 'YYYY-MM-DD'}
         onChange={updateMax}
       />
       <TextInput
-        label={t('editor.blocks.inputs.date.settings.format.label')}
+        label={t('blocks.inputs.date.settings.format.label')}
         defaultValue={
           options?.format ??
           (options?.hasTime
@@ -99,15 +97,15 @@ export const DateInputSettings = ({ options, onOptionsChange }: Props) => {
         }
         moreInfoTooltip={`
 					${t(
-            'editor.blocks.inputs.date.settings.format.example.label'
+            'blocks.inputs.date.settings.format.example.label'
           )} dd/MM/yyyy, MM/dd/yy, yyyy-MM-dd
 				`}
         placeholder={options?.hasTime ? 'dd/MM/yyyy HH:mm' : 'dd/MM/yyyy'}
         onChange={updateFormat}
       />
       <Stack>
         <FormLabel mb="0" htmlFor="variable">
-          {t('editor.blocks.inputs.settings.saveAnswer.label')}
+          {t('blocks.inputs.settings.saveAnswer.label')}
         </FormLabel>
         <VariableSearchInput
           initialVariableId={options?.variableId}

diff --git a/apps/builder/src/features/blocks/inputs/date/components/DateNodeContent.tsx b/apps/builder/src/features/blocks/inputs/date/components/DateNodeContent.tsx
@@ -12,8 +12,6 @@ export const DateNodeContent = ({ variableId }: Props) => {
   return variableId ? (
     <WithVariableContent variableId={variableId} />
   ) : (
-    <Text color={'gray.500'}>
-      {t('editor.blocks.inputs.date.placeholder.label')}
-    </Text>
+    <Text color={'gray.500'}>{t('blocks.inputs.date.placeholder.label')}</Text>
   )
 }
diff --git a/apps/builder/src/features/blocks/inputs/emailInput/components/EmailInputNodeContent.tsx b/apps/builder/src/features/blocks/inputs/emailInput/components/EmailInputNodeContent.tsx
@@ -2,22 +2,19 @@ import React from 'react'
 import { Text } from '@chakra-ui/react'
 import { EmailInputBlock } from '@typebot.io/schemas'
 import { WithVariableContent } from '@/features/graph/components/nodes/block/WithVariableContent'
-import { useTranslate } from '@tolgee/react'
+import { defaultEmailInputOptions } from '@typebot.io/schemas/features/blocks/inputs/email/constants'
 
 type Props = {
   options: EmailInputBlock['options']
 }
 
 export const EmailInputNodeContent = ({
   options: { variableId, labels } = {},
-}: Props) => {
-  const { t } = useTranslate()
-
-  return variableId ? (
+}: Props) =>
+  variableId ? (
     <WithVariableContent variableId={variableId} />
   ) : (
     <Text color={'gray.500'}>
-      {labels?.placeholder ?? t('editor.blocks.inputs.email.placeholder.label')}
+      {labels?.placeholder ?? defaultEmailInputOptions.labels.placeholder}
     </Text>
   )
-}
diff --git a/apps/builder/src/features/blocks/inputs/emailInput/components/EmailInputSettings.tsx b/apps/builder/src/features/blocks/inputs/emailInput/components/EmailInputSettings.tsx
@@ -3,6 +3,7 @@ import { VariableSearchInput } from '@/components/inputs/VariableSearchInput'
 import { FormLabel, Stack } from '@chakra-ui/react'
 import { useTranslate } from '@tolgee/react'
 import { EmailInputBlock, Variable } from '@typebot.io/schemas'
+import { defaultEmailInputOptions } from '@typebot.io/schemas/features/blocks/inputs/email/constants'
 import React from 'react'
 
 type Props = {
@@ -24,32 +25,31 @@ export const EmailInputSettings = ({ options, onOptionsChange }: Props) => {
   return (
     <Stack spacing={4}>
       <TextInput
-        label={t('editor.blocks.inputs.settings.placeholder.label')}
+        label={t('blocks.inputs.settings.placeholder.label')}
         defaultValue={
           options?.labels?.placeholder ??
-          t('editor.blocks.inputs.email.placeholder.label')
+          defaultEmailInputOptions.labels.placeholder
         }
         onChange={handlePlaceholderChange}
       />
       <TextInput
-        label={t('editor.blocks.inputs.settings.button.label')}
+        label={t('blocks.inputs.settings.button.label')}
         defaultValue={
-          options?.labels?.button ??
-          t('editor.blocks.inputs.settings.buttonText.label')
+          options?.labels?.button ?? defaultEmailInputOptions.labels.button
         }
         onChange={handleButtonLabelChange}
       />
       <TextInput
-        label={t('editor.blocks.inputs.settings.retryMessage.label')}
+        label={t('blocks.inputs.settings.retryMessage.label')}
         defaultValue={
           options?.retryMessageContent ??
-          t('editor.blocks.inputs.email.settings.retryMessageText.label')
+          defaultEmailInputOptions.retryMessageContent
         }
         onChange={handleRetryMessageChange}
       />
       <Stack>
         <FormLabel mb="0" htmlFor="variable">
-          {t('editor.blocks.inputs.settings.saveAnswer.label')}
+          {t('blocks.inputs.settings.saveAnswer.label')}
         </FormLabel>
         <VariableSearchInput
           initialVariableId={options?.variableId}

diff --git a/apps/builder/src/features/blocks/inputs/fileUpload/components/FileInputContent.tsx b/apps/builder/src/features/blocks/inputs/fileUpload/components/FileInputContent.tsx
@@ -15,8 +15,8 @@ export const FileInputContent = ({ options }: Props) => {
   ) : (
     <Text noOfLines={1} pr="6">
       {options?.isMultipleAllowed
-        ? t('editor.blocks.inputs.file.collectMultiple.label')
-        : t('editor.blocks.inputs.file.collectSingle.label')}
+        ? t('blocks.inputs.file.collectMultiple.label')
+        : t('blocks.inputs.file.collectSingle.label')}
     </Text>
   )
 }