From 01394a843f5c744d3215ee686df70d49af770ea8 Mon Sep 17 00:00:00 2001
From: Rushikesh-Sonawane99 <rushikesh.sonawane@tekditechnologies.com>
Date: Fri, 21 Jun 2024 14:51:50 +0530
Subject: [PATCH] Issue #PS-793 chore: Added event to show modal on dropout
 label click

---
 app.config.ts                   | 39 ++++++++++++++++++++++++---------
 src/components/DropOutModal.tsx | 33 ++++++++++++++++++++++++++++
 src/components/LearnersList.tsx | 17 +++++++++++++-
 3 files changed, 78 insertions(+), 11 deletions(-)

diff --git a/app.config.ts b/app.config.ts
index b37cd3b2..d81c2ac8 100644
--- a/app.config.ts
+++ b/app.config.ts
@@ -4,21 +4,40 @@ export const dashboardDaysLimit: number = 30;
 export const modifyAttendanceLimit: number = 6;
 export const toastAutoHideDuration: number = 5000; // 5 seconds
 
+// export const dropoutReasons = [
+//   {
+//     label: 'UNABLE_TO_COPE_WITH_STUDIES',
+//     value: 'unable_to_cope_with_studies',
+//   },
+//   { label: 'FAMILY_RESPONSIBILITIES', value: 'family_responsibilities' },
+//   {
+//     label: 'NEED_TO_GO_TO_WORK_OWN_WORK',
+//     value: 'need_to_go_to_work_own_work',
+//   },
+//   { label: 'MARRIAGE', value: 'marriage' },
+//   { label: 'ILLNESS', value: 'illness' },
+//   { label: 'MIGRATION', value: 'migration' },
+//   { label: 'PREGNANCY', value: 'pregnancy' },
+//   { label: 'DOCUMENT_ISSUE', value: 'document_issue' },
+//   { label: 'DISTANCE_ISSUE', value: 'distance_issue' },
+//   { label: 'SCHOOL_ADMISSION', value: 'school_admission' },
+// ];
+
 export const dropoutReasons = [
   {
     label: 'UNABLE_TO_COPE_WITH_STUDIES',
-    value: 'unable_to_cope_with_studies',
+    value: 'Unable to cope with studies',
   },
-  { label: 'FAMILY_RESPONSIBILITIES', value: 'family_responsibilities' },
+  { label: 'FAMILY_RESPONSIBILITIES', value: 'Family responsibility' },
   {
     label: 'NEED_TO_GO_TO_WORK_OWN_WORK',
-    value: 'need_to_go_to_work_own_work',
+    value: 'Need to go to work/ own work',
   },
-  { label: 'MARRIAGE', value: 'marriage' },
-  { label: 'ILLNESS', value: 'illness' },
-  { label: 'MIGRATION', value: 'migration' },
-  { label: 'PREGNANCY', value: 'pregnancy' },
-  { label: 'DOCUMENT_ISSUE', value: 'document_issue' },
-  { label: 'DISTANCE_ISSUE', value: 'distance_issue' },
-  { label: 'SCHOOL_ADMISSION', value: 'school_admission' },
+  { label: 'MARRIAGE', value: 'Marriage' },
+  { label: 'ILLNESS', value: 'Illness' },
+  { label: 'MIGRATION', value: 'Migration' },
+  { label: 'PREGNANCY', value: 'Pregnancy' },
+  { label: 'DOCUMENT_ISSUE', value: 'Document issue' },
+  { label: 'DISTANCE_ISSUE', value: 'Distance issue' },
+  { label: 'SCHOOL_ADMISSION', value: 'School admission' },
 ];
diff --git a/src/components/DropOutModal.tsx b/src/components/DropOutModal.tsx
index 92a8a3aa..0365af1a 100644
--- a/src/components/DropOutModal.tsx
+++ b/src/components/DropOutModal.tsx
@@ -26,6 +26,8 @@ interface DropOutModalProps {
   open: boolean;
   onClose: (confirmed: boolean, reason?: string) => void;
   cohortMembershipId: string | number;
+  isButtonAbsent?: boolean;
+  statusReason?: string;
   reloadState: boolean;
   setReloadState: React.Dispatch<React.SetStateAction<boolean>>;
 }
@@ -34,6 +36,8 @@ function DropOutModal({
   open,
   onClose,
   cohortMembershipId,
+  isButtonAbsent,
+  statusReason,
   reloadState, 
   setReloadState
 }: DropOutModalProps) {
@@ -140,6 +144,34 @@ function DropOutModal({
             />
           </Box>
           <Divider />
+          {
+            isButtonAbsent ? 
+            
+          <Box sx={{ padding: '18px 16px', width: '100%' }}>
+          <Typography
+            variant="h2"
+            sx={{
+              color: theme.palette.warning['400'],
+              fontSize: '14px',
+            }}
+            component="h2"
+          >
+            {t('COMMON.REASON_FOR_DROPOUT')}
+          </Typography>
+
+          <Typography
+            variant="h2"
+            sx={{
+              color: theme.palette.warning['300'],
+              fontSize: '16px',
+            }}
+            component="h2"
+          >
+            {statusReason}
+          </Typography>
+        </Box>
+            :
+         <>
           <Box sx={{ padding: '10px 18px' }}>
             <FormControl sx={{ mt: 1, width: '100%' }}>
               <InputLabel
@@ -186,6 +218,7 @@ function DropOutModal({
               {t('COMMON.MARK_DROP_OUT')}
             </Button>
           </Box>
+          </> }
         </Box>
       </Modal>
     </React.Fragment>
diff --git a/src/components/LearnersList.tsx b/src/components/LearnersList.tsx
index 044f9869..a2e63699 100644
--- a/src/components/LearnersList.tsx
+++ b/src/components/LearnersList.tsx
@@ -146,6 +146,7 @@ const LearnersList: React.FC<LearnerListProps> = ({
 
   const handleDroppedOutLabelClick = () => {
     console.log('handleDroppedOutLabelClick');
+    setShowModal(true);
   };
 
   const renderCustomContent = () => {
@@ -297,13 +298,27 @@ const LearnersList: React.FC<LearnerListProps> = ({
         renderCustomContent={renderCustomContent}
       />
 
-      <DropOutModal
+      {
+        isDropout? 
+        <DropOutModal
         open={showModal}
         onClose={() => setShowModal(false)}
         cohortMembershipId={cohortMembershipId}
+        isButtonAbsent = {true}
+        statusReason = {statusReason}
         reloadState={reloadState} 
         setReloadState={setReloadState}
       />
+        :
+        <DropOutModal
+        open={showModal}
+        onClose={() => setShowModal(false)}
+        cohortMembershipId={cohortMembershipId}
+        reloadState={reloadState} 
+        setReloadState={setReloadState}
+      />
+      }
+      
       <ConfirmationModal
         message={t('COMMON.SURE_REMOVE')}
         handleAction={handleAction}