diff --git a/src/components/sidebar-menu/SidebarMenu.styles.ts b/src/components/sidebar-menu/SidebarMenu.styles.ts index d475eb1f3..93409b8a7 100644 --- a/src/components/sidebar-menu/SidebarMenu.styles.ts +++ b/src/components/sidebar-menu/SidebarMenu.styles.ts @@ -37,5 +37,14 @@ export const styles = { minWidth: 'unset' } } + }, + listItemContent: { + display: 'flex', + alignItems: 'center', + gap: 1.25 + }, + errorIcon: { + color: `${palette.error[800]} !important`, + fontSize: '1.25rem' } } diff --git a/src/components/sidebar-menu/SidebarMenu.tsx b/src/components/sidebar-menu/SidebarMenu.tsx index 84064ee56..84aa5afce 100644 --- a/src/components/sidebar-menu/SidebarMenu.tsx +++ b/src/components/sidebar-menu/SidebarMenu.tsx @@ -3,6 +3,8 @@ import ListItemButton from '@mui/material/ListItemButton' import ListItemText from '@mui/material/ListItemText' import List from '@mui/material/List' import ListItemIcon from '@mui/material/ListItemIcon' +import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline' +import { Box, Tooltip } from '@mui/material' import { FC } from 'react' import { useTranslation } from 'react-i18next' @@ -16,9 +18,15 @@ interface SidebarMenu { tabsData: UserProfileProps handleClick: (tab: UserProfileTabsEnum) => void activeTab: UserProfileTabsEnum + errorTooltipHolders: Partial> } -const SidebarMenu: FC = ({ handleClick, tabsData, activeTab }) => { +const SidebarMenu: FC = ({ + handleClick, + tabsData, + activeTab, + errorTooltipHolders +}) => { const { t } = useTranslation() const list = Object.keys(tabsData).map((key) => { @@ -27,11 +35,28 @@ const SidebarMenu: FC = ({ handleClick, tabsData, activeTab }) => { const isTabActive = tabKey === activeTab + const enableTooltipError = !isTabActive && errorTooltipHolders?.[tabKey] + + const toolTip = enableTooltipError && ( + + + + ) + return ( handleClick(tabKey)}> {item.icon} - + + + {t(item.title)} + {toolTip} + + ) diff --git a/src/constants/translations/en/edit-profile.json b/src/constants/translations/en/edit-profile.json index f1d42b1fa..c49262ed0 100644 --- a/src/constants/translations/en/edit-profile.json +++ b/src/constants/translations/en/edit-profile.json @@ -19,7 +19,8 @@ "professionalStatus": "Describe in short your professional summary. Maximum 200 characters.", "languagesTitle": "Language", "languagesDesc": "Select the language in which you would like to study and cooperate.", - "videoPresentationDesc": "Add the link to your presentational video. Your video needs to be public and uploaded to YouTube." + "videoPresentationDesc": "Add the link to your presentational video. Your video needs to be public and uploaded to YouTube.", + "errorTooltip": "There is a problem with your changes" }, "professionalTab": { "tabTitle": "Professional info", diff --git a/src/constants/translations/uk/edit-profile.json b/src/constants/translations/uk/edit-profile.json index 15775a79c..d2b67d7ac 100644 --- a/src/constants/translations/uk/edit-profile.json +++ b/src/constants/translations/uk/edit-profile.json @@ -19,7 +19,8 @@ "professionalStatus": "Коротко опишіть своє професійне резюме. Максимум 200 символів.", "languagesTitle": "Мова", "languagesDesc": "Виберіть мову, якою ви б хотіли навчатися та співпрацювати.", - "videoPresentationDesc": "Додайте посилання на вашу відеопрезентацію. Відео має бути публічним та розміщеним на YouTube." + "videoPresentationDesc": "Додайте посилання на вашу відеопрезентацію. Відео має бути публічним та розміщеним на YouTube.", + "errorTooltip": "Виникла проблема з вашими змінами" }, "professionalTab": { "tabTitle": "Професійні відомості", diff --git a/src/pages/edit-profile/EditProfile.tsx b/src/pages/edit-profile/EditProfile.tsx index 7972062f3..65b53ac9a 100644 --- a/src/pages/edit-profile/EditProfile.tsx +++ b/src/pages/edit-profile/EditProfile.tsx @@ -29,7 +29,9 @@ import { LoadingStatusEnum } from '~/redux/redux.constants' const EditProfile = () => { const { t } = useTranslation() const dispatch = useAppDispatch() - const { loading } = useAppSelector((state) => state.editProfile) + const { loading, tabValidityStatus } = useAppSelector( + (state) => state.editProfile + ) const [searchParams, setSearchParams] = useSearchParams({ tab: UserProfileTabsEnum.Profile @@ -66,6 +68,11 @@ const EditProfile = () => { } const cooperationContent = activeTab && tabsData[activeTab]?.content + const errorTooltipHolders = { + [UserProfileTabsEnum.Profile]: !tabValidityStatus.profileTab, + [UserProfileTabsEnum.ProfessionalInfo]: + !tabValidityStatus.professionalInfoTab + } return ( @@ -92,6 +99,7 @@ const EditProfile = () => { void handleClick(tab)} tabsData={tabsData} />