Feature Added: An option for users to leave the Organization (Fixes #1873)

public/locales/en/translation.json

@@ -1405,6 +1405,9 @@
   "userPledges": {
     "title": "My Pledges"
   },
+  "leaveOrganization": {
+    "title": "Leave Organization"
+  },
   "eventVolunteers": {
     "volunteers": "Volunteers",
     "volunteer": "Volunteer",

public/locales/fr/translation.json

@@ -1405,6 +1405,9 @@
   "userPledges": {
     "title": "Mes Promesses"
   },
+  "leaveOrganization": {
+    "title": "Quitter l'organisation"
+  },
   "eventVolunteers": {
     "volunteers": "Bénévoles",
     "volunteer": "Bénévole",

public/locales/hi/translation.json

@@ -1405,6 +1405,9 @@
   "userPledges": {
     "title": "मेरी प्रतिज्ञाएँ"
   },
+  "leaveOrganization": {
+    "title": "संगठन छोड़ें"
+  },
   "eventVolunteers": {
     "volunteers": "स्वयंसेवक",
     "volunteer": "स्वयंसेवक",

public/locales/sp/translation.json

@@ -1407,6 +1407,9 @@
   "userPledges": {
     "title": "Mis Promesas"
   },
+  "leaveOrganization": {
+    "title": "Dejar la organización"
+  },
   "eventVolunteers": {
     "volunteers": "Voluntarios",
     "volunteer": "Voluntario",

public/locales/zh/translation.json

@@ -1405,6 +1405,9 @@
   "userPledges": {
     "title": "我的承诺"
   },
+  "leaveOrganization": {
+    "title": "离开组织"
+  },
   "eventVolunteers": {
     "volunteers": "志愿者",
     "volunteer": "志愿者",

src/App.tsx

@@ -50,6 +50,7 @@ import EventDashboardScreen from 'components/EventDashboardScreen/EventDashboard
 import Campaigns from 'screens/UserPortal/Campaigns/Campaigns';
 import Pledges from 'screens/UserPortal/Pledges/Pledges';
 import VolunteerManagement from 'screens/UserPortal/Volunteer/VolunteerManagement';
+import LeaveOrganization from 'screens/UserPortal/LeaveOrganization/LeaveOrganization';
 
 const { setItem } = useLocalStorage();
 
@@ -198,6 +199,10 @@ function app(): JSX.Element {
             <Route path="/user/events/:orgId" element={<Events />} />
             <Route path="/user/campaigns/:orgId" element={<Campaigns />} />
             <Route path="/user/pledges/:orgId" element={<Pledges />} />
+            <Route
+              path="/user/leaveOrg/:orgId"
+              element={<LeaveOrganization />}
+            />
             <Route
               path="/user/volunteer/:orgId"
               element={<VolunteerManagement />}

src/components/IconComponent/IconComponent.tsx

@@ -19,6 +19,7 @@ import PostsIcon from 'assets/svgs/posts.svg?react';
 import SettingsIcon from 'assets/svgs/settings.svg?react';
 import VenueIcon from 'assets/svgs/venues.svg?react';
 import RequestsIcon from 'assets/svgs/requests.svg?react';
+import ExitToAppIcon from '@mui/icons-material/ExitToApp';
 import { MdOutlineVolunteerActivism } from 'react-icons/md';
 
 import React from 'react';
@@ -134,6 +135,13 @@ const iconComponent = (props: InterfaceIconComponent): JSX.Element => {
           stroke={props.fill}
         />
       );
+    case 'Leave Organization':
+      return (
+        <ExitToAppIcon
+          data-testid="Icon-Component-Leave-Organization"
+          stroke={props.fill}
+        />
+      );
     case 'Volunteer':
       return (
         <MdOutlineVolunteerActivism

src/screens/UserPortal/LeaveOrganization/LeaveOrganization.module.css

@@ -0,0 +1,27 @@
+.modal-dialog {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  margin: 0;
+}
+
+.modal-content {
+  width: 100%;
+  max-width: 500px;
+}
+
+.modal-body {
+  text-align: center;
+}
+
+.modal-header,
+.modal-footer {
+  justify-content: center;
+  text-align: center;
+}
+
+.confirmation {
+  text-align: center;
+  margin-top: 30px;
+}