diff --git a/FrontEnd/src/components/ProfilePage/FormComponents/FormFields/CheckBoxField.js b/FrontEnd/src/components/ProfilePage/FormComponents/FormFields/CheckBoxField.js index 7e5c05284..1ae7b884b 100644 --- a/FrontEnd/src/components/ProfilePage/FormComponents/FormFields/CheckBoxField.js +++ b/FrontEnd/src/components/ProfilePage/FormComponents/FormFields/CheckBoxField.js @@ -1,3 +1,4 @@ +import { PropTypes } from 'prop-types'; import css from './CheckBoxField.module.css'; const CheckBoxField = (props) => { @@ -38,7 +39,22 @@ const CheckBoxField = (props) => { + {(props.requredField || props.error) && + + {props.error} + + } ); }; export default CheckBoxField; + +CheckBoxField.propTypes = { + requredField: PropTypes.bool.isRequired, + nameRegister: PropTypes.string.isRequired, + valueRegister: PropTypes.bool.isRequired, + nameStartup: PropTypes.string.isRequired, + valueStartup: PropTypes.bool.isRequired, + updateHandler: PropTypes.func.isRequired, + error:PropTypes.string, + }; \ No newline at end of file diff --git a/FrontEnd/src/components/ProfilePage/FormComponents/FormFields/CheckBoxField.module.css b/FrontEnd/src/components/ProfilePage/FormComponents/FormFields/CheckBoxField.module.css index 289ed3889..88a59b6d6 100644 --- a/FrontEnd/src/components/ProfilePage/FormComponents/FormFields/CheckBoxField.module.css +++ b/FrontEnd/src/components/ProfilePage/FormComponents/FormFields/CheckBoxField.module.css @@ -1,5 +1,6 @@ .representative { display: flex; + min-height: 102px; flex-direction: column; align-items: flex-start; gap: 8px; @@ -67,7 +68,22 @@ letter-spacing: -0.14px; } - .checkbox__input { +.checkbox__input { justify-content: start; accent-color: #1F9A7C; - } +} + +.error-message { + display: flex; + padding: 1px 0px; + align-items: flex-start; + gap: 10px; + align-self: stretch; + flex: 1 0 0; + color: var(--red-red-100, #F34444); + font-family: Roboto; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 22px; +} \ No newline at end of file diff --git a/FrontEnd/src/components/ProfilePage/FormComponents/FormFields/HalfFormField.module.css b/FrontEnd/src/components/ProfilePage/FormComponents/FormFields/HalfFormField.module.css index 3a23b7435..cebe5d462 100644 --- a/FrontEnd/src/components/ProfilePage/FormComponents/FormFields/HalfFormField.module.css +++ b/FrontEnd/src/components/ProfilePage/FormComponents/FormFields/HalfFormField.module.css @@ -70,7 +70,7 @@ font-weight: 400; line-height: 22px; letter-spacing: -0.01em; - text-align: left; + text-align: left; color: #00000040; } @@ -79,7 +79,7 @@ border: 1px solid #1f9a7c; background: #fff; outline: none; - } +} .error-message { display: flex; @@ -105,5 +105,5 @@ text-align: left; color: #00000040; background: linear-gradient(0deg, #F5F5F5, #F5F5F5), - linear-gradient(0deg, #D9D9D9, #D9D9D9); -} + linear-gradient(0deg, #D9D9D9, #D9D9D9); +} \ No newline at end of file diff --git a/FrontEnd/src/components/ProfilePage/FormComponents/GeneralInfo.js b/FrontEnd/src/components/ProfilePage/FormComponents/GeneralInfo.js index 62f1ab6c9..0dc19188d 100644 --- a/FrontEnd/src/components/ProfilePage/FormComponents/GeneralInfo.js +++ b/FrontEnd/src/components/ProfilePage/FormComponents/GeneralInfo.js @@ -1,7 +1,8 @@ -import css from './FormComponents.module.css'; +import { PropTypes } from 'prop-types'; import { useState, useEffect } from 'react'; import useSWR from 'swr'; import { useUser, useProfile } from '../../../hooks/'; +import css from './FormComponents.module.css'; import CheckBoxField from './FormFields/CheckBoxField'; import FullField from './FormFields/FullField'; @@ -49,6 +50,7 @@ const GeneralInfo = (props) => { const [profile, setProfile] = useState(props.profile); const [formStateErr, setFormStateErr] = useState(ERRORS); const [edrpouError, setEdrpouError] = useState(null); + const [companyTypeError, setCompanyTypeError] = useState(null); const { data: fetchedRegions, isLoading: isRegionLoading } = useSWR(`${process.env.REACT_APP_BASE_API_URL}/api/regions/`, fetcher); const { data: fetchedActivities, isLoading: isActivitiesLoading } = useSWR(`${process.env.REACT_APP_BASE_API_URL}/api/activities/`, fetcher); @@ -79,6 +81,9 @@ const GeneralInfo = (props) => { if (profile.edrpou && profile.edrpou.toString().length !== 8) { isValid = false; } + if (!profile.is_registered && !profile.is_startup) { + isValid = false; + } return isValid; }; @@ -109,16 +114,19 @@ const GeneralInfo = (props) => { } }; - const onChangeCheckbox = e => { - if (e.target.name === 'is_startup') { - setProfile((prevState) => { - return { ...prevState, [e.target.name]: true, 'is_registered': false }; - }); - } else if (e.target.name === 'is_registered') { - setProfile((prevState) => { - return { ...prevState, [e.target.name]: true, 'is_startup': false }; - }); - } + const onChangeCheckbox = (e) => { + const isAnyChecked = + (profile.is_registered && e.target.name === 'is_startup') || + (profile.is_startup && e.target.name === 'is_registered') || + e.target.checked; + if (!isAnyChecked) { + setCompanyTypeError('Оберіть тип компанії, яку Ви представляєте'); + } else { + setCompanyTypeError(null); + } + setProfile((prevState) => { + return { ...prevState, [e.target.name]: e.target.checked }; + }); }; const onUpdateTextAreaField = e => { @@ -294,6 +302,7 @@ const GeneralInfo = (props) => { nameStartup="is_startup" valueStartup={profile.is_startup} updateHandler={onChangeCheckbox} + error={companyTypeError} requredField={true} /> @@ -304,3 +313,19 @@ const GeneralInfo = (props) => { }; export default GeneralInfo; + +GeneralInfo.propTypes = { + profile: PropTypes.shape({ + name: PropTypes.string.isRequired, + official_name: PropTypes.string, + edrpou: PropTypes.number, + region: PropTypes.string, + common_info: PropTypes.string, + is_registered: PropTypes.bool, + is_startup: PropTypes.bool, + categories: PropTypes.array, + activities: PropTypes.array, + }).isRequired, + currentFormNameHandler: PropTypes.func, + curForm: PropTypes.string, + }; diff --git a/FrontEnd/src/components/ProfilePage/ProfilePageComponents/ProfileContent.js b/FrontEnd/src/components/ProfilePage/ProfilePageComponents/ProfileContent.js index 6af3a8eac..c57d4d13d 100644 --- a/FrontEnd/src/components/ProfilePage/ProfilePageComponents/ProfileContent.js +++ b/FrontEnd/src/components/ProfilePage/ProfilePageComponents/ProfileContent.js @@ -1,4 +1,5 @@ -import css from './ProfileContent.module.css'; +import { Tooltip } from 'antd'; +import { PropTypes } from 'prop-types'; import { Link, NavLink, Route, Routes } from 'react-router-dom'; import AdditionalInfo from '../FormComponents/AdditionalInfo'; import ContactsInfo from '../FormComponents/ContactsInfo'; @@ -8,6 +9,7 @@ import ProductServiceInfo from '../FormComponents/ProductServiceInfo'; import StartupInfo from '../FormComponents/StartupInfo'; import UserInfo from '../FormComponents/UserInfo'; import ProfileFormButton from '../UI/ProfileFormButton/ProfileFormButton'; +import css from './ProfileContent.module.css'; const INFOLINKS = [ @@ -26,14 +28,17 @@ const INFOLINKS = [ { title: 'Інформація про товари/ послуги', link: '/products-service-info', + tooltipText: 'Цей розділ доступний, коли обрано опцію "Зареєстрована компанія" у розділі Загальна інформація' }, { title: 'Додаткова інформація', link: '/additional-info', + tooltipText: 'Цей розділ доступний, коли обрано опцію "Зареєстрована компанія" у розділі Загальна інформація' }, { title: 'Стартап', link: '/startup', + tooltipText: 'Цей розділ доступний, коли обрано опцію "Стартап проект" у розділі Загальна інформація' }, ]; @@ -48,17 +53,51 @@ const FORM_NAMES = [ ]; const ProfileContent = (props) => { + + const tooltipInnerContentStyles = { + display: 'flex', + borderRadius: '2px', + background: 'var(--main-grey-90, #25292C)', + color: 'var(--main-white, #FFF)', + fontFeatureSettings: 'calt', + fontFamily: 'Inter', + letterSpacing: '-0.14px', + }; + return (