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 (
- {INFOLINKS.map((element) => ( + {INFOLINKS.map((element) => { + const isLinkEnabled = + (props.profile.is_registered && props.profile.is_startup) || + (props.profile.is_registered && element.title !== 'Стартап') || + (props.profile.is_startup && element.title !== 'Інформація про товари/ послуги' && element.title !== 'Додаткова інформація'); + return isLinkEnabled ? ( (`${css['infolink']} ${isActive && css['infolink__active']}`)} to={`/profile${element.link}`} key={element.title} - >{element.title} - ))} + > + {element.title} + + ) : ( + + + {element.title} + + + ); + })}
{ }; export default ProfileContent; + +ProfileContent.propTypes = { + user: PropTypes.shape({ + name: PropTypes.string.isRequired, + surname: PropTypes.string.isRequired, + profile_id: PropTypes.number.isRequired, + }).isRequired, + profile: PropTypes.shape({ + name: PropTypes.string.isRequired, + official_name: PropTypes.string, + edrpou: PropTypes.number, + region: PropTypes.string, + common_info: PropTypes.string, + phone: PropTypes.string, + address: PropTypes.string, + phounded: PropTypes.number, + person_position: PropTypes.string, + startup_idea: PropTypes.string, + product_info: PropTypes.string, + service_info: PropTypes.string, + is_registered: PropTypes.bool, + is_startup: PropTypes.bool, + categories: PropTypes.array, + activities: PropTypes.array, + }).isRequired, + currentFormNameHandler: PropTypes.func, + formName: PropTypes.string, + }; \ No newline at end of file diff --git a/FrontEnd/src/components/ProfilePage/ProfilePageComponents/ProfileContent.module.css b/FrontEnd/src/components/ProfilePage/ProfilePageComponents/ProfileContent.module.css index a76b55c48..183370b55 100644 --- a/FrontEnd/src/components/ProfilePage/ProfilePageComponents/ProfileContent.module.css +++ b/FrontEnd/src/components/ProfilePage/ProfilePageComponents/ProfileContent.module.css @@ -2,8 +2,8 @@ margin-top: 40px; display: flex; align-items: flex-start; - gap: 80px; - flex-direction: column; + gap: 80px; + flex-direction: column; } .content { @@ -40,6 +40,17 @@ text-decoration: none; } +.infolink__disabled { + color: var(--main-grey-50, #8D959C); + font-feature-settings: 'calt' off; + font-family: Inter; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 22px; + letter-spacing: -0.14px; +} + .delete { color: #F15831; } @@ -47,4 +58,4 @@ .divider { width: 222px; border-bottom: 1px #E2E5EB solid; -} +} \ No newline at end of file diff --git a/FrontEnd/src/components/ProfilePage/UI/ProfileFormButton/ProfileFormButton.module.css b/FrontEnd/src/components/ProfilePage/UI/ProfileFormButton/ProfileFormButton.module.css index 470bbf070..23a756e28 100644 --- a/FrontEnd/src/components/ProfilePage/UI/ProfileFormButton/ProfileFormButton.module.css +++ b/FrontEnd/src/components/ProfilePage/UI/ProfileFormButton/ProfileFormButton.module.css @@ -32,4 +32,8 @@ text-align: center; cursor: pointer; margin-left: 430px; +} + +.sign-up__button:active { + transform: translateY(2px); } \ No newline at end of file