PM-853 - add cancelled reason

Author: vas3a

src/components/ProjectForm/index.js

@@ -5,7 +5,7 @@ import { get } from 'lodash'
 import styles from './ProjectForm.module.scss'
 import { PrimaryButton } from '../Buttons'
 import Select from '../Select'
-import { PROJECT_STATUSES, DEFAULT_NDA_UUID } from '../../config/constants'
+import { PROJECT_STATUSES, PROJECT_STATUS, DEFAULT_NDA_UUID } from '../../config/constants'
 import GroupsFormField from './GroupsFormField'
 
 const ProjectForm = ({
@@ -24,11 +24,13 @@ const ProjectForm = ({
     handleSubmit,
     control,
     reset,
-    formState: { isDirty, errors }
+    formState: { isDirty, errors },
+    watch
   } = useForm({
     defaultValues: {
       projectName: isEdit ? projectDetail.name : '',
       description: isEdit ? projectDetail.description : '',
+      cancelReason: null,
       status: isEdit
         ? PROJECT_STATUSES.find((item) => item.value === projectDetail.status) ||
           null
@@ -41,17 +43,22 @@ const ProjectForm = ({
     }
   })
 
+  const projectStatus = watch('status')
+  const isProjectCancelled = get(projectStatus, 'value') === PROJECT_STATUS.CANCELLED
+
   // Handle form submission
   const onSubmit = async (data) => {
     // indicate that creating process has started
     setIsSaving(true)
 
     try {
+      const status = canManage ? (data.status || {}).value : undefined
       const payload = {
         name: data.projectName,
         description: data.description,
         type: data.projectType.value,
-        status: canManage ? (data.status || {}).value : undefined,
+        status,
+        cancelReason: status === PROJECT_STATUS.CANCELLED ? data.cancelReason : undefined,
         groups: data.groups,
         terms: data.terms ? [data.terms] : []
       }
@@ -142,6 +149,35 @@ const ProjectForm = ({
               </div>
             </div>
           )}
+          {isEdit && isProjectCancelled && (
+            <Controller
+              name='cancelReason'
+              control={control}
+              rules={{ required: 'Please provide a cancellation reason' }}
+              render={({ field }) => (
+                <div className={cn(styles.row)}>
+                  <div className={cn(styles.formLabel, styles.field)}>
+                    <label label htmlFor='status'>
+                      Cancel reason <span>*</span> :
+                    </label>
+                  </div>
+                  <div className={cn(styles.field, styles.formField)}>
+                    <input
+                      className={styles.projectName}
+                      id='cancelReason'
+                      placeholder='Reason'
+                      {...field}
+                    />
+                    {errors.projectStatus && (
+                      <div className={cn(styles.error)}>
+                        {errors.projectStatus.message}
+                      </div>
+                    )}
+                  </div>
+                </div>
+              )}
+            />
+          )}
           {!isEdit && (
             <div className={cn(styles.row)}>
               <div className={cn(styles.formLabel, styles.field)}>