close cooperation process

src/components/status-chip/StatusChip.styles.ts

@@ -7,7 +7,8 @@ const statusColors = {
   [StatusEnum.Active]: palette.success[600],
   [StatusEnum.Closed]: palette.primary[400],
   [StatusEnum.Draft]: palette.basic.blue,
-  [StatusEnum.NeedAction]: palette.error[600]
+  [StatusEnum.NeedAction]: palette.error[600],
+  [StatusEnum.RequestToClose]: palette.warning[500]
 }
 
 export const styles = (status: StatusEnum) => ({

src/constants/translations/en/cooperations-page.json

@@ -47,13 +47,13 @@
     "or": "or ",
     "quizzes": "quizzes ",
     "resourcesLibrary": "from resource library.",
-    "seems": "Looks like there’re", 
+    "seems": "Looks like there’re",
     "noActivities": " no activities added ",
     "engageTutor": "yet. As a student, you're here to engage with the materials provided by your tutor."
   },
   "button": {
     "create": "Create Activity",
-    "add":"Add Activity"
+    "add": "Add Activity"
   },
   "manyTypes": {
     "courseTemplate": "Course template",
@@ -66,7 +66,7 @@
     "closeCooperationDescription": "Start a closing process of current cooperation if your learning journey with the student is finished.",
     "closeCooperationBtn": "Close cooperation",
     "accessTitle": "Study materials access",
-    "accessDescription": "As a tutor, determine deadlines for student access to study materials after cooperation has finished.", 
+    "accessDescription": "As a tutor, determine deadlines for student access to study materials after cooperation has finished.",
     "noAccess": "No access",
     "monthAccess": "month access",
     "yearAccess": "year access",
@@ -83,5 +83,8 @@
     "successUpdating": "Note was successfully updated",
     "confirmDeletionMessage": "This action is permanent and will remove all related content. Please review your decision before proceeding.",
     "confirmDeletionTitle": "Do you confirm note deletion?"
+  },
+  "closeCooperationModal": {
+    "message": "Are you sure you want to close this cooperation?"
   }
 }

src/constants/translations/en/titles.json

@@ -1,5 +1,6 @@
 {
   "confirmTitle": "Please Confirm",
   "discardOffer": "Discard offer changes?",
-  "discardChanges": "Discard recent changes?"
+  "discardChanges": "Discard recent changes?",
+  "confirmCooperationClosing": "Confirmation of cooperation closing"
 }

src/constants/translations/uk/cooperations-page.json

@@ -48,12 +48,13 @@
     "or": "або ",
     "quizzes": "тестами ",
     "resourcesLibrary": "з бібліотеки ресурсів.",
-    "seems": "Схоже, що зараз тут ", 
+    "seems": "Схоже, що зараз тут ",
     "noActivities": " немає доданих активностей ",
-    "engageTutor": ". Як студента, Ваша задача -  працювати з матеріалами, наданими Вашим викладачем."  },
+    "engageTutor": ". Як студента, Ваша задача -  працювати з матеріалами, наданими Вашим викладачем."
+  },
   "button": {
     "create": "Створення активності",
-    "add":"Додавання активності"
+    "add": "Додавання активності"
   },
   "manyTypes": {
     "courseTemplate": "Шаблон курсу",
@@ -83,5 +84,8 @@
     "successUpdating": "Нотатку було успішно оновлено",
     "confirmDeletionMessage": "Ця дія є постійною та призведе до видалення всього пов’язаного вмісту. Перш ніж продовжити, перегляньте своє рішення.",
     "confirmDeletionTitle": "Ви підтверджуєте видалення нотатки?"
+  },
+  "closeCooperationModal": {
+    "message": "Ви впевнені, що хочете завершити кооперацію?"
   }
 }

src/constants/translations/uk/titles.json

@@ -1,5 +1,6 @@
 {
   "confirmTitle": "Підтвердіть вихід",
   "discardOffer": "Відхилити зміни пропозиції?",
-  "discardChanges": "Зберегти останні зміни?"
+  "discardChanges": "Зберегти останні зміни?",
+  "confirmCooperationClosing": "Підтвердження закриття кооперації"
 }

src/containers/my-cooperations/accept-cooperation-close/AcceptCooperationClosing.styles.ts

@@ -0,0 +1,32 @@
+import palette from '~/styles/app-theme/app.pallete'
+
+export const styles = {
+  root: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    border: `1px solid ${palette.basic.pinkishRed}`,
+    backgroundColor: palette.basic.softGray,
+    borderRadius: '5px',
+    padding: '24px',
+    gap: '16px'
+  },
+  span: {
+    fontWeight: '500'
+  },
+  title: {
+    color: palette.basic.mediumRed,
+    fontWeight: '500',
+    display: 'flex',
+    flexDirection: 'row',
+    gap: '8px',
+    mb: '4px'
+  },
+  body: {
+    color: palette.basic.darkGray
+  },
+  button: {
+    color: `${palette.basic.deepRed} !important`,
+    backgroundColor: `${palette.basic.lightRed} !important`
+  }
+}

src/containers/my-cooperations/accept-cooperation-close/AcceptCooperationClosing.tsx

@@ -0,0 +1,44 @@
+import { Box, Typography } from '@mui/material'
+import { FC } from 'react'
+import AppButton from '~/components/app-button/AppButton'
+
+import { styles } from './AcceptCooperationClosing.styles'
+import { ErrorOutlineRounded } from '@mui/icons-material'
+import { SizeEnum } from '~/types'
+
+interface AcceptCooperationClosureProps {
+  user: string
+  onAccept: () => void
+}
+
+const AcceptCooperationClosing: FC<AcceptCooperationClosureProps> = ({
+  user,
+  onAccept
+}) => {
+  return (
+    <Box sx={styles.root}>
+      <Box>
+        <Box sx={styles.title}>
+          <ErrorOutlineRounded />
+          <Typography>Cooperation closing process</Typography>
+        </Box>
+        <Typography sx={styles.body}>
+          <span style={styles.span}>{user}</span> started a closing process for
+          the current cooperation. You will have{' '}
+          <span style={styles.span}> 1 month of access</span> to study materials
+          after the cooperation has been closed.
+        </Typography>
+      </Box>
+      <AppButton
+        color='error'
+        onClick={onAccept}
+        size={SizeEnum.Small}
+        sx={styles.button}
+      >
+        Accept
+      </AppButton>
+    </Box>
+  )
+}
+
+export default AcceptCooperationClosing

src/containers/my-cooperations/cooperation-completion/CooperationCompletion.styles.ts

@@ -18,5 +18,14 @@ export const styles = {
   dropdown: {
     maxWidth: '216px',
     ml: '15px'
+  },
+  closeCooperationModal: {
+    text: {
+      padding: '30px'
+    },
+    button: {
+      display: 'flex',
+      justifyContent: 'center'
+    }
   }
 }

src/containers/my-cooperations/cooperation-completion/CooperationCompletion.tsx

@@ -1,17 +1,38 @@
+import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Box from '@mui/material/Box'
 import Typography from '@mui/material/Typography'
 import Divider from '@mui/material/Divider'
 
 import SettingItem from '~/components/setting-item/SettingItem'
 import AppButton from '~/components/app-button/AppButton'
+import AppSelect from '~/components/app-select/AppSelect'
 
+import { cooperationAccessValues } from '~/containers/my-cooperations/cooperation-completion/CooperationCompletion.constants'
 import { styles } from '~/containers/my-cooperations/cooperation-completion/CooperationCompletion.styles'
-import { ButtonVariantEnum, SizeEnum } from '~/types'
+import {
+  ButtonVariantEnum,
+  SizeEnum,
+  CooperationMaterialsAccessEnum,
+  UserRoleEnum
+} from '~/types'
 
-const CooperationCompletion = () => {
+interface CooperationCompletionProps {
+  onCloseCooperation: () => void
+  userRole: UserRoleEnum | ''
+}
+
+const CooperationCompletion: React.FC<CooperationCompletionProps> = ({
+  onCloseCooperation,
+  userRole
+}) => {
   const { t } = useTranslation()
 
+  const [materialsAccess, setMaterialsAccess] =
+    useState<CooperationMaterialsAccessEnum>(
+      CooperationMaterialsAccessEnum.OneMonthAccess
+    )
+
   return (
     <Box>
       <Divider />
@@ -25,13 +46,27 @@ const CooperationCompletion = () => {
         title={t('cooperationsPage.cooperationDetails.closeCooperationTitle')}
       >
         <AppButton
+          onClick={onCloseCooperation}
           size={SizeEnum.Medium}
           sx={styles.closeBtn}
           variant={ButtonVariantEnum.Text}
         >
           {t('cooperationsPage.cooperationDetails.closeCooperationBtn')}
         </AppButton>
       </SettingItem>
+      {userRole === UserRoleEnum.Tutor && (
+        <SettingItem
+          subtitle={t('cooperationsPage.cooperationDetails.accessDescription')}
+          title={t('cooperationsPage.cooperationDetails.accessTitle')}
+        >
+          <AppSelect
+            fields={cooperationAccessValues(t)}
+            setValue={setMaterialsAccess}
+            sx={styles.dropdown}
+            value={materialsAccess}
+          />
+        </SettingItem>
+      )}
     </Box>
   )
 }

src/containers/my-cooperations/cooperation-details/CooperationDetails.tsx

@@ -37,13 +37,16 @@ import {
   PositionEnum,
   Cooperation,
   SizeEnum,
-  ButtonVariantEnum
+  ButtonVariantEnum,
+  StatusEnum
 } from '~/types'
 import {
   cooperationsSelector,
   setCooperationSections,
+  setCooperationStatus,
   setIsActivityCreated
 } from '~/redux/features/cooperationsSlice'
+import AcceptCooperationClosing from '../accept-cooperation-close/AcceptCooperationClosing'
 
 const CooperationDetails = () => {
   const dispatch = useAppDispatch()
@@ -54,6 +57,9 @@ const CooperationDetails = () => {
   const { isActivityCreated } = useAppSelector(cooperationsSelector)
   const [isNotesOpen, setIsNotesOpen] = useState<boolean>(false)
   const [editMode, setEditMode] = useState<boolean>(false)
+  const [isClosed, setIsClosed] = useState<boolean>(false)
+  const { userRole } = useAppSelector((state) => state.appMain)
+  const cooperationStatus = useAppSelector((state) => state.cooperations.status)
 
   const [searchParams, setSearchParams] = useSearchParams()
 
@@ -88,8 +94,9 @@ const CooperationDetails = () => {
 
   useEffect(() => {
     dispatch(setCooperationSections(response.sections))
+    dispatch(setCooperationStatus(response.status))
     setEditMode(Boolean(response?.sections?.length))
-  }, [response.sections, dispatch])
+  }, [response.sections, response.status, dispatch])
 
   const handleEditMode = useCallback(() => {
     setEditMode((prev) => !prev)
@@ -132,6 +139,30 @@ const CooperationDetails = () => {
     return cooperationContent
   }
 
+  const handleCooperationStatusUpdate = async () => {
+    await cooperationService.updateCooperation({
+      _id: id,
+      status: StatusEnum.Closed
+    })
+    setIsClosed(true)
+    dispatch(setCooperationStatus(StatusEnum.Closed))
+  }
+
+  const handleCooperationCloseAccept = () => {
+    void handleCooperationStatusUpdate()
+  }
+
+  const cooperationCompletionConditions =
+    response.needAction === userRole &&
+    response.status === StatusEnum.RequestToClose
+
+  const acceptClosingProccess = !isClosed && (
+    <AcceptCooperationClosing
+      onAccept={handleCooperationCloseAccept}
+      user={response.initiator.firstName || 'user'}
+    />
+  )
+
   const iconConditionals = isNotesOpen ? (
     <KeyboardDoubleArrowRightIcon />
   ) : (
@@ -141,7 +172,7 @@ const CooperationDetails = () => {
   return (
     <PageWrapper>
       <Box sx={styles.header}>
-        <StatusChip status={response.status} />
+        <StatusChip status={cooperationStatus} />
         <TitleWithDescription
           key={crypto.randomUUID()}
           style={styles.cooperationTitle}
@@ -167,6 +198,9 @@ const CooperationDetails = () => {
           </AppButton>
         </Box>
       </Box>
+      {activeTab === CooperationTabsEnum.Activities &&
+        cooperationCompletionConditions &&
+        acceptClosingProccess}
       <Box sx={styles.notesBlock}>
         <Box sx={styles.pageContent}>{pageContent()}</Box>
         {!isDesktop && isNotesOpen && (

src/containers/my-cooperations/cooperations-container/CooperationContainer.tsx

@@ -50,8 +50,9 @@ const CooperationContainer: FC<CooperationContainerProps> = ({
             />
           )
         })
-      : item.status === StatusEnum.Active &&
-        navigate(`./${item._id}?tab=activities`)
+      : (item.status === StatusEnum.Active ||
+          item.status === StatusEnum.RequestToClose) &&
+        navigate(`./${item._id}`)
   }
 
   const cooperationGrid = (