Merge pull request #348 from ita-social-projects/#339-ProfileEditAbil…

…ityToSelectCompanyStartup #339 [Profile Edit] Ability to select company and startup
ita-social-projects · Dec 8, 2023 · 7ffc320 · 7ffc320
2 parents 6c9025b + 47b38e1
commit 7ffc320
Show file tree

Hide file tree

Showing 7 changed files with 163 additions and 24 deletions.
diff --git 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) => {
                 </label>
             </div>
         </div>
+        {(props.requredField || props.error) &&
+            <span className={css['error-message']}>
+                {props.error}
+            </span>
+            }
     </div>);
 };
 
 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,
+  };
diff --git 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;
+}
diff --git 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);
+}
diff --git 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}
                         />
                     </div>
@@ -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
@@ -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 (
         <div className={css['content__container']}>
             <div className={css['content']}>
                 <div className={css['info-links-profile']}>
-                    {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 ? (
                         <NavLink
                             className={({ isActive }) => (`${css['infolink']} ${isActive && css['infolink__active']}`)}
                             to={`/profile${element.link}`}
                             key={element.title}
-                        >{element.title}</NavLink>
-                    ))}
+                        >
+                            {element.title}
+                        </NavLink>
+                    ) : (
+                        <Tooltip
+                            key={element.title}
+                            placement="bottomLeft"
+                            title={element.tooltipText}
+                            overlayInnerStyle={tooltipInnerContentStyles}
+                        >
+                                <NavLink
+                                    className={`${css['infolink']} ${css['infolink__disabled']}`}
+                                    key={element.title}
+                                    disabled
+                                >
+                                    {element.title}
+                                </NavLink>
+                        </Tooltip>
+                    );
+                })}
                     <div className={css['divider']}></div>
                     <Link
                         to="/profile/delete"
@@ -117,3 +156,31 @@ const ProfileContent = (props) => {
 };
 
 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,
+  };
diff --git 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,11 +40,22 @@
     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;
 }
 
 .divider {
     width: 222px;
     border-bottom: 1px #E2E5EB solid;
-}
+}
diff --git 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);
 }