119 lines
3.4 KiB
TypeScript
119 lines
3.4 KiB
TypeScript
import {
|
|
Stack,
|
|
Heading,
|
|
useColorMode,
|
|
Menu,
|
|
MenuButton,
|
|
MenuList,
|
|
MenuItem,
|
|
Button,
|
|
HStack,
|
|
} from '@chakra-ui/react'
|
|
import { GraphNavigation } from '@typebot.io/prisma'
|
|
import React, { useEffect } from 'react'
|
|
import { GraphNavigationRadioGroup } from './GraphNavigationRadioGroup'
|
|
import { AppearanceRadioGroup } from './AppearanceRadioGroup'
|
|
import { useUser } from '../hooks/useUser'
|
|
import { ChevronDownIcon } from '@/components/icons'
|
|
import { MoreInfoTooltip } from '@/components/MoreInfoTooltip'
|
|
import { useTranslate, useTolgee } from '@tolgee/react'
|
|
import { useRouter } from 'next/router'
|
|
|
|
const localeHumanReadable = {
|
|
en: 'English',
|
|
fr: 'Français',
|
|
de: 'Deutsch',
|
|
pt: 'Português',
|
|
'pt-BR': 'Português (BR)',
|
|
ro: 'Română',
|
|
es: 'Español',
|
|
} as const
|
|
|
|
export const UserPreferencesForm = () => {
|
|
const { getLanguage } = useTolgee()
|
|
const router = useRouter()
|
|
const { t } = useTranslate()
|
|
const { colorMode } = useColorMode()
|
|
const { user, updateUser } = useUser()
|
|
|
|
useEffect(() => {
|
|
if (!user?.graphNavigation)
|
|
updateUser({ graphNavigation: GraphNavigation.TRACKPAD })
|
|
}, [updateUser, user?.graphNavigation])
|
|
|
|
const changeGraphNavigation = async (value: string) => {
|
|
updateUser({ graphNavigation: value as GraphNavigation })
|
|
}
|
|
|
|
const changeAppearance = async (value: string) => {
|
|
updateUser({ preferredAppAppearance: value })
|
|
}
|
|
|
|
const updateLocale = (locale: keyof typeof localeHumanReadable) => () => {
|
|
document.cookie = `NEXT_LOCALE=${locale}; path=/; max-age=31536000`
|
|
router.replace(router.pathname, undefined, { locale })
|
|
}
|
|
|
|
const currentLanguage = getLanguage()
|
|
|
|
return (
|
|
<Stack spacing={12}>
|
|
<HStack spacing={4}>
|
|
<Heading size="md">{t('account.preferences.language.heading')}</Heading>
|
|
<Menu>
|
|
<MenuButton as={Button} rightIcon={<ChevronDownIcon />}>
|
|
{currentLanguage
|
|
? localeHumanReadable[
|
|
currentLanguage as keyof typeof localeHumanReadable
|
|
]
|
|
: 'Loading...'}
|
|
</MenuButton>
|
|
<MenuList>
|
|
{Object.keys(localeHumanReadable).map((locale) => (
|
|
<MenuItem
|
|
key={locale}
|
|
onClick={updateLocale(
|
|
locale as keyof typeof localeHumanReadable
|
|
)}
|
|
>
|
|
{
|
|
localeHumanReadable[
|
|
locale as keyof typeof localeHumanReadable
|
|
]
|
|
}
|
|
</MenuItem>
|
|
))}
|
|
</MenuList>
|
|
</Menu>
|
|
{currentLanguage !== 'en' && (
|
|
<MoreInfoTooltip>
|
|
{t('account.preferences.language.tooltip')}
|
|
</MoreInfoTooltip>
|
|
)}
|
|
</HStack>
|
|
<Stack spacing={6}>
|
|
<Heading size="md">
|
|
{t('account.preferences.graphNavigation.heading')}
|
|
</Heading>
|
|
<GraphNavigationRadioGroup
|
|
defaultValue={user?.graphNavigation ?? GraphNavigation.TRACKPAD}
|
|
onChange={changeGraphNavigation}
|
|
/>
|
|
</Stack>
|
|
<Stack spacing={6}>
|
|
<Heading size="md">
|
|
{t('account.preferences.appearance.heading')}
|
|
</Heading>
|
|
<AppearanceRadioGroup
|
|
defaultValue={
|
|
user?.preferredAppAppearance
|
|
? user.preferredAppAppearance
|
|
: colorMode
|
|
}
|
|
onChange={changeAppearance}
|
|
/>
|
|
</Stack>
|
|
</Stack>
|
|
)
|
|
}
|