updated AcceptCooperationClosing

src/constants/translations/en/cooperation-details.json

@@ -33,5 +33,11 @@
   "closingMessage1": " started a closing process for the current cooperation. You will have ",
   "accessDuration": "1 month of access",
   "closingMessage2": " to study materials after the cooperation has been closed.",
-  "acceptBtn": "Accept"
+  "acceptBtn": "Accept",
+  "declineBtn": "Decline",
+  "submitBtn": "Submit",
+  "inputFieldPlaceholder": "Enter your reason for declining",
+  "InputFieldLabel": "Please provide a reason for declining to close the cooperation.",
+  "inputError": "This field is required.",
+  "submitMessage": "Your reason has been successfully submitted to the opposite party."
 }

src/constants/translations/uk/cooperation-details.json

@@ -33,5 +33,11 @@
   "closingMessage1": " ініціював(-ла) процес припинення співпраці. У вас залишиться доступ до матеріалів поточної співпраці протягом ",
   "accessDuration": "1 місяця",
   "closingMessage2": " з моменту закриття.",
-  "acceptBtn": "Прийняти"
+  "acceptBtn": "Прийняти",
+  "declineBtn": "Відхилити",
+  "submitBtn": "Підтвердити",
+  "inputFieldPlaceholder": "Введіть причину відмови",
+  "InputFieldLabel": "Будь ласка, вкажіть причину відмови від закриття співпраці.",
+  "inputError": "Це поле є обов'язковим для заповнення.",
+  "submitMessage": "Вашу причину було успішно надіслано протилежній стороні."
 }

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

@@ -1,5 +1,25 @@
+import palette from '~/styles/app-theme/app.pallete'
+
 export const styles = {
   boldText: {
     fontWeight: 500
+  },
+  inputBox: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '10px',
+    mb: '8px'
+  },
+  inputField: {
+    display: 'flex',
+    gap: '16px',
+    width: '100%',
+    height: '50px'
+  },
+  input: {
+    flex: 1
+  },
+  textGray: {
+    color: palette.basic.darkGray
   }
 }

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

@@ -1,28 +1,81 @@
 import { ErrorOutlineRounded } from '@mui/icons-material'
-import { Typography } from '@mui/material'
+import { Box, Typography } from '@mui/material'
 import { useTranslation } from 'react-i18next'
 import CooperationActionBanner from '~/containers/my-cooperations/cooperation-action-banner/CooperationActionBanner'
 import Button from '~/design-system/components/button/Button'
 
 import { styles } from './AcceptCooperationClosing.styles'
+import { useState } from 'react'
+import InputField from '~/design-system/components/input-field/InputField'
+import { InputFieldVariantEnum } from '~/design-system/components/input-field/InputField.constants'
+import useForm from '~/hooks/use-form'
 
 interface AcceptCooperationClosureProps {
   user: string
   onAccept: () => void
+  onReasonSubmit: (reason: string) => void
 }
 
 const AcceptCooperationClosing: React.FC<AcceptCooperationClosureProps> = ({
   user,
-  onAccept
+  onAccept,
+  onReasonSubmit
 }) => {
   const { t } = useTranslation()
+  const [isInputShown, setIsInputShown] = useState<boolean>(false)
+  const [isReasonSubmitted, setIsReasonSubmitted] = useState<boolean>(false)
+
+  const handleDecline = () => {
+    setIsInputShown(true)
+  }
+
+  const {
+    data,
+    errors,
+    trigger,
+    handleInputChange,
+    handleNonInputValueChange,
+    handleSubmit
+  } = useForm({
+    initialValues: { declineReason: '' },
+    validations: {
+      declineReason: (value) =>
+        value ? '' : t('cooperationDetailsPage.inputError')
+    },
+    onSubmit: (formData) => {
+      if (formData) {
+        onReasonSubmit(formData.declineReason)
+      }
+    }
+  })
+
+  const handleReasonSubmit = () => {
+    const isValid = trigger('declineReason')
+    handleSubmit()
+    if (isValid && !errors.declineReason) {
+      setIsReasonSubmitted(true)
+      setIsInputShown(false)
+    }
+  }
+
+  const isSubmitMessageShown =
+    isReasonSubmitted && !errors.declineReason ? (
+      <Typography sx={styles.textGray}>
+        {t('cooperationDetailsPage.submitMessage')}
+      </Typography>
+    ) : null
 
   return (
     <CooperationActionBanner
       actionButtons={
-        <Button color='tonal-error' onClick={onAccept} size='xs'>
-          {t('cooperationDetailsPage.acceptBtn')}
-        </Button>
+        <>
+          <Button color='tonal-error' onClick={onAccept} size='xs'>
+            {t('cooperationDetailsPage.acceptBtn')}
+          </Button>
+          <Button onClick={handleDecline} size='xs'>
+            {t('cooperationDetailsPage.declineBtn')}
+          </Button>
+        </>
       }
       description={
         <>
@@ -38,7 +91,32 @@ const AcceptCooperationClosing: React.FC<AcceptCooperationClosureProps> = ({
       }
       icon={<ErrorOutlineRounded />}
       title={t('titles.acceptCooperationClosing')}
-    />
+    >
+      {isInputShown ? (
+        <Box sx={styles.inputBox}>
+          <Typography sx={styles.textGray}>
+            {t('cooperationDetailsPage.InputFieldLabel')}{' '}
+          </Typography>
+          <Box sx={styles.inputField}>
+            <InputField
+              error={!!errors.declineReason}
+              helperText={errors.declineReason}
+              onChange={handleInputChange('declineReason')}
+              onClear={() => handleNonInputValueChange('declineReason', '')}
+              placeholder={t('cooperationDetailsPage.inputFieldPlaceholder')}
+              sx={styles.input}
+              value={data.declineReason}
+              variant={InputFieldVariantEnum.Outlined}
+            ></InputField>
+            <Button color='tonal-error' onClick={handleReasonSubmit} size='md'>
+              {t('cooperationDetailsPage.submitBtn')}
+            </Button>
+          </Box>
+        </Box>
+      ) : (
+        isSubmitMessageShown
+      )}
+    </CooperationActionBanner>
   )
 }
 

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

@@ -160,6 +160,7 @@ const CooperationDetails = () => {
   const acceptClosingProcess = !isClosed && (
     <AcceptCooperationClosing
       onAccept={handleCooperationCloseAccept}
+      onReasonSubmit={() => {}}
       user={closeCooperationInitiator.firstName}
     />
   )