Add AboutStudentAccordion in professional tab

src/constants/translations/en/edit-profile.json

@@ -47,14 +47,22 @@
       "proficiencyLevels": "Proficiency Levels",
       "editCategoryBtn": "Edit category",
       "deleteCategoryBtnDisabledTooltip": "You have opened cooperation(s)/offers with this category.\nPlease close it before deactivation",
-      "aboutTheTutorTitle": "About the tutor",
-      "aboutTheTutorDescription": "Describe your professional experience. This information will be displayed on your public profile.",
-      "accordion": {
+      "tutorAboutTitle": "About the tutor",
+      "tutorAboutDescription": "Describe your professional experience. This information will be displayed on your public profile.",
+      "studentAboutTitle": "About the student",
+      "studentAboutDescription": "Describe yourself and your learning experiance. This information will be displayed on your public profile.",
+      "accordionTutor": {
         "education": "Education",
         "workExperience": "Work experience",
         "scientificActivities": "Scientific activities",
         "awards": "Awards",
         "textareaLabel": "Text here"
+      },
+      "accordionStudent": {
+        "personalIntroduction": "Personal Introduction",
+        "learningGoals": "Learning Goals",
+        "learningActivities": "Learning Activities",
+        "textareaLabel": "Text here"
       }
     },
     "notificationsTab": {

src/constants/translations/uk/edit-profile.json

@@ -47,14 +47,22 @@
       "proficiencyLevels": "Рівні кваліфікації",
       "editCategoryBtn": "Редагувати",
       "deleteCategoryBtnDisabledTooltip": "Ви розпочали співпрацю(і)/пропозицію. з цією категорією.\nБудь ласка, закрийте її перед деактивацією",
-      "aboutTheTutorTitle": "Про викладача",
-      "aboutTheTutorDescription": "Опишіть ваш професійний досвід. Ця інформація буде відображена у вашому публічному профілі.",
-      "accordion": {
+      "tutorAboutTitle": "Про викладача",
+      "tutorAboutDescription": "Опишіть ваш професійний досвід. Ця інформація буде відображена у вашому публічному профілі.",
+      "studentAboutTitle": "Про студента",
+      "studentAboutDescription": "Опишіть себе та свій досвід навчання. Ця інформація буде відображена у вашому публічному профілі.",
+      "accordionTutor": {
         "education": "Освіта",
         "workExperience": "Досвід роботи",
         "scientificActivities": "Наукова діяльність",
         "awards": "Нагороди",
         "textareaLabel": "Текст"
+      },
+      "accordionStudent": {
+        "personalIntroduction": "Особисте представлення",
+        "learningGoals": "Навчальні цілі",
+        "learningActivities": "Навчальні активності",
+        "textareaLabel": "Текст"
       }
     },
     "notificationsTab": {

src/containers/edit-profile/professional-info-tab/ProfessionalInfoTab.tsx

@@ -29,9 +29,11 @@ import { useAppDispatch, useAppSelector } from '~/hooks/use-redux'
 import ProfessionalCategoryList from '~/containers/edit-profile/professional-info-tab/professional-category-list/ProfessionalCategoryList'
 import AddProfessionalCategoryModal from '~/containers/edit-profile/professional-info-tab/add-professional-category-modal/AddProfessionalCategoryModal'
 import AboutTutorAccordion from '~/containers/edit-profile/professional-info-tab/about-tutor-accordion/AboutTutorAccordion'
+import AboutStudentAccordion from '~/containers/edit-profile/professional-info-tab/about-student-accordion/AboutStudentAccordion'
 import TitleWithDescription from '~/components/title-with-description/TitleWithDescription'
 import AppButton from '~/components/app-button/AppButton'
 import { scrollToAndHighlight } from '~/utils/scroll-and-highlight'
+import { aboutStudentData } from '~/containers/user-profile/about-user-block/about-user-block.constants'
 
 import { styles } from '~/containers/edit-profile/professional-info-tab/ProfessionalInfoTab.styles'
 import { highlightElem } from '~/containers/edit-profile/common.styles'
@@ -98,22 +100,28 @@ const ProfessionalInfoTab: FC = () => {
     })
   }
 
-  const TutorInfo = userRole === UserRoleEnum.Tutor && (
+  const TutorInfo = (
     <Box component='section' id='education'>
       <Box sx={highlightElem}></Box>
       <TitleWithDescription
         description={t(
-          'editProfilePage.profile.professionalTab.aboutTheTutorDescription'
+          `editProfilePage.profile.professionalTab.${userRole}AboutDescription`
         )}
         isHighlighted
         style={styles.titleWithDescription}
-        title={t('editProfilePage.profile.professionalTab.aboutTheTutorTitle')}
+        title={t(
+          `editProfilePage.profile.professionalTab.${userRole}AboutTitle`
+        )}
       />
       <Box sx={styles.accordionContainer}>
-        <AboutTutorAccordion
-          data={data}
-          handleInputChange={handleInputChange}
-        />
+        {userRole === UserRoleEnum.Tutor ? (
+          <AboutTutorAccordion
+            data={data}
+            handleInputChange={handleInputChange}
+          />
+        ) : (
+          <AboutStudentAccordion data={aboutStudentData} />
+        )}
       </Box>
     </Box>
   )

src/containers/edit-profile/professional-info-tab/about-student-accordion/AboutStudentAccordion.tsx

@@ -0,0 +1,68 @@
+import { FC, useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import {
+  AccordionItem,
+  AboutStudentData,
+  TypographyVariantEnum,
+  UseFormEventHandler
+} from '~/types'
+
+import ExpandMore from '@mui/icons-material/ExpandMore'
+
+import useAccordions from '~/hooks/use-accordions'
+import Accordions from '~/components/accordion/Accordions'
+import AppTextArea from '~/components/app-text-area/AppTextArea'
+
+import { styles } from '~/containers/edit-profile/professional-info-tab/about-tutor-accordion/AboutTutorAccordion.styles'
+import {
+  aboutStudentKeys,
+  mockHandleStudentInputChange
+} from '~/containers/user-profile/about-user-block/about-user-block.constants'
+
+interface AboutStudentAccordionProps {
+  data: AboutStudentData
+  handleInputChange?: UseFormEventHandler<
+    AboutStudentData,
+    React.ChangeEvent<HTMLInputElement>
+  >
+}
+
+const AboutStudentAccordion: FC<AboutStudentAccordionProps> = ({ data }) => {
+  const { t } = useTranslation()
+  const [expandedItem, handleAccordionChange] = useAccordions({
+    initialState: 0,
+    toggle: true
+  })
+
+  const accordionItems: AccordionItem[] = useMemo(() => {
+    return aboutStudentKeys.map((item) => ({
+      title: `editProfilePage.profile.professionalTab.accordionStudent.${item}`,
+      content: (
+        <AppTextArea
+          fullWidth
+          label={t(
+            'editProfilePage.profile.professionalTab.accordionStudent.textareaLabel'
+          )}
+          maxLength={1000}
+          onChange={mockHandleStudentInputChange}
+          value={data[item]}
+        />
+      )
+    }))
+  }, [t, data])
+
+  return (
+    <Accordions
+      activeIndex={expandedItem}
+      descriptionVariant={TypographyVariantEnum.Body2}
+      icon={<ExpandMore />}
+      items={accordionItems}
+      onChange={handleAccordionChange}
+      sx={styles.accordion}
+      titleVariant={TypographyVariantEnum.Body2}
+    />
+  )
+}
+
+export default AboutStudentAccordion

src/containers/edit-profile/professional-info-tab/about-tutor-accordion/AboutTutorAccordion.tsx

@@ -1,5 +1,4 @@
-import { FC } from 'react'
-
+import { FC, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import {
@@ -16,6 +15,7 @@ import Accordions from '~/components/accordion/Accordions'
 import AppTextArea from '~/components/app-text-area/AppTextArea'
 
 import { styles } from '~/containers/edit-profile/professional-info-tab/about-tutor-accordion/AboutTutorAccordion.styles'
+import { aboutTutorKeys } from '~/containers/user-profile/about-user-block/about-user-block.constants'
 
 interface AboutTutorAccordionProps {
   data: ProfessionalBlock
@@ -35,65 +35,24 @@ const AboutTutorAccordion: FC<AboutTutorAccordionProps> = ({
     toggle: true
   })
 
-  const accordionItems: AccordionItem[] = [
-    {
-      title: 'editProfilePage.profile.professionalTab.accordion.education',
-      content: (
-        <AppTextArea
-          fullWidth
-          label={t(
-            'editProfilePage.profile.professionalTab.accordion.textareaLabel'
-          )}
-          maxLength={1000}
-          onChange={handleInputChange('education')}
-          value={data.education}
-        />
-      )
-    },
-    {
-      title: 'editProfilePage.profile.professionalTab.accordion.workExperience',
-      content: (
-        <AppTextArea
-          fullWidth
-          label={t(
-            'editProfilePage.profile.professionalTab.accordion.textareaLabel'
-          )}
-          maxLength={1000}
-          onChange={handleInputChange('workExperience')}
-          value={data.workExperience}
-        />
-      )
-    },
-    {
-      title:
-        'editProfilePage.profile.professionalTab.accordion.scientificActivities',
-      content: (
-        <AppTextArea
-          fullWidth
-          label={t(
-            'editProfilePage.profile.professionalTab.accordion.textareaLabel'
-          )}
-          maxLength={1000}
-          onChange={handleInputChange('scientificActivities')}
-          value={data.scientificActivities}
-        />
-      )
-    },
-    {
-      title: 'editProfilePage.profile.professionalTab.accordion.awards',
-      content: (
-        <AppTextArea
-          fullWidth
-          label={t(
-            'editProfilePage.profile.professionalTab.accordion.textareaLabel'
-          )}
-          maxLength={1000}
-          onChange={handleInputChange('awards')}
-          value={data.awards}
-        />
-      )
-    }
-  ]
+  const accordionItems: AccordionItem[] = useMemo(() => {
+    return aboutTutorKeys.map((item) => {
+      return {
+        title: `editProfilePage.profile.professionalTab.accordionTutor.${item}`,
+        content: (
+          <AppTextArea
+            fullWidth
+            label={t(
+              'editProfilePage.profile.professionalTab.accordionTutor.textareaLabel'
+            )}
+            maxLength={1000}
+            onChange={handleInputChange(item)}
+            value={data[item]}
+          />
+        )
+      }
+    })
+  }, [t, handleInputChange, data])
 
   return (
     <Accordions

src/containers/user-profile/about-user-block/about-user-block.constants.ts

@@ -19,3 +19,5 @@ export const aboutTutorKeys: Array<keyof ProfessionalBlock> = [
   'scientificActivities',
   'awards'
 ]
+
+export const mockHandleStudentInputChange = () => null

tests/unit/containers/edit-profile/professional-info-tab/ProfessionalInfoTab.spec.jsx

@@ -128,7 +128,7 @@ describe('ProfessionalInfoTab for tutor', () => {
 
   it('should render about tutor block', () => {
     const aboutTutorTitle = screen.getByText(
-      'editProfilePage.profile.professionalTab.aboutTheTutorTitle'
+      'editProfilePage.profile.professionalTab.tutorAboutTitle'
     )
 
     expect(aboutTutorTitle).toBeInTheDocument()

tests/unit/containers/edit-profile/professional-info-tab/about-tutor-accordion/AboutTutorAccordion.spec.jsx

@@ -18,7 +18,7 @@ describe('AboutTutorAccordion', () => {
 
   it('should open first accordion by default', () => {
     const textAreas = screen.getAllByLabelText(
-      'editProfilePage.profile.professionalTab.accordion.textareaLabel'
+      'editProfilePage.profile.professionalTab.accordionTutor.textareaLabel'
     )
 
     expect(textAreas).toHaveLength(4)
@@ -28,7 +28,7 @@ describe('AboutTutorAccordion', () => {
 
   it('should open corresponding accordion content', () => {
     const secondItemTitle = screen.getByText(
-      'editProfilePage.profile.professionalTab.accordion.workExperience'
+      'editProfilePage.profile.professionalTab.accordionTutor.workExperience'
     )
     fireEvent.click(secondItemTitle)