Merge pull request #1013 from ita-social-projects/997-general-info-im…

…provements-frontend Improvement of General Information Page frontend
ita-social-projects · Dec 16, 2024 · 8c7c3c8 · 8c7c3c8
2 parents 141752e + f39733b
commit 8c7c3c8
Show file tree

Hide file tree

Showing 5 changed files with 110 additions and 43 deletions.
diff --git a/FrontEnd/src/global.css b/FrontEnd/src/global.css
@@ -159,4 +159,9 @@
   --cookie-border-color: #e9e9e9;
   --cookie-overlay-color: rgba(0, 0, 0, 0.5);
   --cookie-shadow-color: rgba(0, 0, 0, 0.15);
+
+  /* Tooltip profile page */
+  --tooltip-bg-color: #f0f0f0;
+  --tooltip-border-radius: 50%;
+  --tooltip-font-color: #292E32; 
 }
diff --git a/FrontEnd/src/pages/ProfilePage/FormComponents/FormComponents.module.css b/FrontEnd/src/pages/ProfilePage/FormComponents/FormComponents.module.css
@@ -46,6 +46,22 @@
     background-color: var(--light-seashell-background);
 }
 
+.tooltip-icon {
+    margin-left: 5px;
+    background-color: var(--tooltip-bg-color);
+    border-radius: var(--tooltip-border-radius);
+    width: 16px;
+    height: 16px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    font-size: 12px;
+    font-weight: bold;
+    font-family: 'Geologica', sans-serif;
+    color: var(--tooltip-font-color);
+  }
+
 @media only screen and (min-width: 768px) {
     .form__container {
         width: 474px;
@@ -72,12 +88,11 @@
         background-color: var(--light-seashell-background);
         display: inherit;
     }
-
 }
-
+    
 @media only screen and (min-width: 1200px) {
     .form__container {
         width: 636px;
         margin-left: 180px;
     }
-}
+}
diff --git a/FrontEnd/src/pages/ProfilePage/FormComponents/FormFields/MultipleSelectChip.module.css b/FrontEnd/src/pages/ProfilePage/FormComponents/FormFields/MultipleSelectChip.module.css
@@ -47,7 +47,7 @@
     flex: 1 0 0;
     color: var(--red-red-100, #F34444);
     font-family: var(--font-error);
-    font-size: 14px;
+    font-size: 12px;
     font-style: normal;
     font-weight: 400;
     line-height: 22px;

diff --git a/FrontEnd/src/pages/ProfilePage/FormComponents/GeneralInfo.jsx b/FrontEnd/src/pages/ProfilePage/FormComponents/GeneralInfo.jsx
@@ -3,6 +3,7 @@ import { PropTypes } from 'prop-types';
 import { useState, useEffect } from 'react';
 import { useContext } from 'react';
 import { toast } from 'react-toastify';
+import { Tooltip } from 'antd';
 import useSWR from 'swr';
 import { useAuth, useProfile } from '../../../hooks';
 import checkFormIsDirty from '../../../utils/checkFormIsDirty';
@@ -22,7 +23,7 @@ import BanerModeration from './BanerModeration';
 import ProfileFormButton from '../UI/ProfileFormButton/ProfileFormButton';
 
 const LABELS = {
-  name: 'Назва компанії',
+  name: 'Коротка назва компанії',
   official_name: 'Юридична назва компанії',
   edrpou: 'ЄДРПОУ',
   rnokpp: 'РНОКПП',
@@ -41,6 +42,10 @@ const ERRORS = {
     error: false,
     message: '',
   },
+  official_name: {
+    error: false,
+    message: '',
+  },
   categories: {
     error: false,
     message: '',
@@ -109,21 +114,31 @@ const GeneralInfo = (props) => {
     let isValid = true;
     const newFormState = {};
     for (const key in profile) {
-      if (
-        key in ERRORS &&
-        (!profile[key] ||
-          (Array.isArray(profile[key]) && profile[key]?.length === 0))
-      ) {
-        isValid = false;
-        newFormState[key] = {
-          error: true,
-          message: 'Обов’язкове поле',
-        };
-      } else {
-        newFormState[key] = {
-          error: false,
-          message: '',
-        };
+      if (key in ERRORS) {
+        if (!profile[key] || (Array.isArray(profile[key]) && profile[key]?.length === 0)) {
+          isValid = false;
+          newFormState[key] = {
+            error: true,
+            message: 'Це поле є обов’язковим для заповнення.',
+          };
+        } else if (key === 'name' && profile[key].length < 2) {
+          isValid = false;
+          newFormState[key] = {
+            error: true,
+            message: 'Введіть від 2 до 45 символів.',
+          };
+        } else if (key === 'official_name' && profile[key].length < 2) {
+          isValid = false;
+          newFormState[key] = {
+            error: true,
+            message: 'Введіть від 2 до 200 символів.',
+          };
+        } else {
+          newFormState[key] = {
+            error: false,
+            message: '',
+          };
+        }
       }
     }
     setFormStateErr({ ...formStateErr, ...newFormState });
@@ -161,31 +176,54 @@ const GeneralInfo = (props) => {
 
   const onUpdateField = (e) => {
     const { value: fieldValue, name: fieldName } = e.target;
-    const symbolCount = fieldValue.replace(/[\s]/g, '')?.length;
-    setFormStateErr({
-      ...formStateErr,
+    const symbolCount = fieldValue.replace(/[\s]/g, '').length;
+    const fieldValidationConfig = {
+      name: {
+        minLength: 2,
+        maxLength: 45,
+        errorMessage: 'Введіть від 2 до 45 символів.',
+      },
+      official_name: {
+        minLength: 2,
+        maxLength: 200,
+        errorMessage: 'Введіть від 2 до 200 символів.',
+      },
+    };
+    setFormStateErr((prev) => ({
+      ...prev,
       [fieldName]: { error: false, message: '' },
-    });
-    if (fieldName === 'name' && symbolCount < 2) {
-      setFormStateErr({
-        ...formStateErr,
-        [fieldName]: { error: true, message: 'Введіть від 2 до 100 символів' },
-      });
-    }
-    if (fieldName === 'official_name' && symbolCount !== 0 && symbolCount < 2) {
-      setFormStateErr({
-        ...formStateErr,
-        [fieldName]: { error: true, message: 'Введіть від 2 до 200 символів' },
-      });
+    }));
+    if (fieldValidationConfig[fieldName]) {
+      const { minLength, errorMessage } = fieldValidationConfig[fieldName];
+      if (symbolCount !== 0 && symbolCount < minLength) {
+        setFormStateErr((prev) => ({
+          ...prev,
+          [fieldName]: {
+            error: true,
+            message: errorMessage,
+          },
+        }));
+      }
     }
     setProfile((prevState) => {
       return { ...prevState, [fieldName]: fieldValue };
     });
   };
 
+
   const onBlurHandler = (e) => {
     const { value: rawFieldValue, name: fieldName } = e.target;
     const fieldValue = rawFieldValue.replace(/\s{2,}/g, ' ').trim();
+    const requiredFields = ['official_name', 'name'];
+    if (requiredFields.includes(fieldName) && !fieldValue) {
+      setFormStateErr((prev) => ({
+        ...prev,
+        [fieldName]: {
+          error: true,
+          message: 'Це поле є обов’язковим для заповнення.',
+        },
+      }));
+    }
     setProfile((prevState) => {
       return { ...prevState, [fieldName]: fieldValue };
     });
@@ -402,7 +440,6 @@ const GeneralInfo = (props) => {
       }
     }
   };
-
   return (
     <div className={css['form__container']}>
       <h3 className={css['form__head']}>Загальна інформація</h3>
@@ -415,11 +452,19 @@ const GeneralInfo = (props) => {
           noValidate
         >
           <div className={css['fields']}>
-            <div className={css['fields-groups']}>
-              <HalfFormField
+          <div className={css['fields-groups']}>
+            <div className={css['field-with-tooltip']}>
+            <HalfFormField
                 name="name"
                 fieldPlaceholder="Введіть назву компанії"
-                label={LABELS.name}
+                label={
+                  <span className={css['field-label']}>
+                    {LABELS.name}
+                    <Tooltip title="Назва буде використовуватися на картці компанії">
+                      <span className={css['tooltip-icon']}>?</span>
+                    </Tooltip>
+                  </span>
+                }
                 updateHandler={onUpdateField}
                 onBlur={onBlurHandler}
                 error={
@@ -429,8 +474,9 @@ const GeneralInfo = (props) => {
                 }
                 requiredField={true}
                 value={profile.name}
-                maxLength={100}
+                maxLength={45}
               />
+            </div>
               <HalfFormField
                 name="official_name"
                 fieldPlaceholder="Введіть юридичну назву компанії"
@@ -443,6 +489,7 @@ const GeneralInfo = (props) => {
                     ? formStateErr['official_name']['message']
                     : null
                 }
+                requiredField={true}
                 maxLength={200}
               />
             </div>

diff --git a/FrontEnd/src/pages/SignUp/SignupForm/SignUpFormContent.jsx b/FrontEnd/src/pages/SignUp/SignupForm/SignUpFormContent.jsx
@@ -37,7 +37,7 @@ export function SignUpFormContentComponent(props) {
     password: 'Пароль не відповідає вимогам',
     confirmPassword: 'Паролі не співпадають. Будь ласка, введіть однакові паролі в обидва поля',
     nameSurnameFieldLength: 'Введіть від 2 до 50 символів',
-    companyFieldLength: 'Введіть від 2 до 100 символів',
+    companyFieldLength: 'Введіть від 2 до 45 символів',
     notAllowedSymbols: 'Поле містить недопустимі символи та/або цифри',
     maxLength: 'Кількість символів перевищує максимально допустиму (50 символів)',
   };
@@ -202,8 +202,8 @@ export function SignUpFormContentComponent(props) {
               message: errorMessageTemplates.companyFieldLength,
             },
           }}
-          maxLength={100}
-          tooltip="Назва повинна містити від 2 до 100 символів"
+          maxLength={45}
+          tooltip="Назва повинна містити від 2 до 45 символів"
           tooltipTrigger="focus"
           error={errors.companyName}
           onBlur={() => {