Feat : An option for users to leave the Organization

public/locales/en/common.json

@@ -83,6 +83,7 @@
   "removedSuccessfully": "{{item}} removed Successfully",
   "successfullyUpdated": "Successfully Updated",
   "sort": "Sort",
+  "confirm": "Confirm",
   "all": "All",
   "active": "Active",
   "disabled": "Disabled",

public/locales/en/translation.json

@@ -148,6 +148,7 @@
     "roleUpdated": "Role Updated.",
     "joinNow": "Join Now",
     "visit": "Visit",
+    "leave": "Leave",
     "withdraw": "Widthdraw",
     "removeUserFrom": "Remove User from {{org}}",
     "removeConfirmation": "Are you sure you want to remove '{{name}}' from organization '{{org}}'?"
@@ -765,7 +766,8 @@
     "communityProfile": "Community Profile",
     "logout": "Logout",
     "settings": "Settings",
-    "chat": "Chat"
+    "chat": "Chat",
+    "leave": "Leave Organization"
   },
   "organizationSidebar": {
     "viewAll": "View all",
@@ -1051,5 +1053,12 @@
   },
   "userPledges": {
     "title": "My Pledges"
+  },
+  "orgLeave": {
+    "confirmation": "Are you sure you want to leave the organization? ",
+    "heading": "Leaving organization ?",
+    "description": "Are you sure you want to leave the organization? This action cannot be undone. If the organization requires approval, you will not be able to rejoin without it. Any related data or permissions may also be lost.",
+    "errorOccured": "An error occurred. Please try again later.",
+    "orgLeft": "You have left the organization."
   }
 }

public/locales/fr/common.json

@@ -83,6 +83,7 @@
   "updatedSuccessfully": "{{item}} mis à jour avec succès",
   "removedSuccessfully": "{{item}} supprimé avec succès",
   "successfullyUpdated": "Mis à jour avec succès",
+  "confirm": "Confirmer",
   "all": "Tous",
   "active": "Actif",
   "disabled": "Désactivé",

public/locales/fr/translation.json

@@ -148,6 +148,7 @@
     "roleUpdated": "Rôle mis à jour.",
     "joinNow": "Adhérer maintenant",
     "visit": "Visite",
+    "leave": "partir",
     "withdraw": "Largeur de tirage",
     "removeUserFrom": "Supprimer l'Utilisateur de {{org}}",
     "removeConfirmation": "Êtes-vous sûr de vouloir supprimer '{{name}}' de l'organisation '{{org}}' ?"
@@ -765,7 +766,8 @@
     "viewAll": "Voir tout",
     "talawaUserPortal": "Portail utilisateur Talawa",
     "my organizations": "Mes organisations",
-    "communityProfile": "Profil de la communauté"
+    "communityProfile": "Profil de la communauté",
+    "leave": "Quitter l'organisation"
   },
   "organizationSidebar": {
     "viewAll": "Voir tout",
@@ -1052,5 +1054,12 @@
   },
   "userPledges": {
     "title": "Mes Promesses"
+  },
+  "orgLeave": {
+    "confirmation": "Etes-vous sûr de vouloir quitter l'organisation ? ",
+    "heading": "Quitter l'organisation ?",
+    "description": "Etes-vous sûr de vouloir quitter l'organisation ? Cette action ne peut pas être annulée. Si l'organisation nécessite une approbation, vous ne pourrez pas la rejoindre sans cette approbation. Toutes les données ou autorisations associées peuvent également être perdues.",
+    "errorOccured": "Une erreur s'est produite. Veuillez réessayer plus tard.",
+    "orgLeft": "Vous avez quitté l'organisation."
   }
 }

public/locales/hi/common.json

@@ -83,6 +83,7 @@
   "updatedSuccessfully": "{{item}} सफलतापूर्वक अपडेट किया गया",
   "removedSuccessfully": "{{item}} सफलतापूर्वक हटाया गया",
   "successfullyUpdated": "सफलतापूर्वक अपडेट किया गया",
+  "confirm": "पुष्टि करें",
   "all": "सभी",
   "active": "सक्रिय",
   "disabled": "अक्षम",

public/locales/hi/translation.json

@@ -150,7 +150,8 @@
     "visit": "मिलने जाना",
     "withdraw": "चौड़ाई निकालना",
     "removeUserFrom": "{{org}} से उपयोगकर्ता हटाएं",
-    "removeConfirmation": "क्या आप वाकई '{{org}}' संगठन से '{{name}}' को हटाना चाहते हैं?"
+    "removeConfirmation": "क्या आप वाकई '{{org}}' संगठन से '{{name}}' को हटाना चाहते हैं?",
+    "leave": "छोड़ो"
   },
   "communityProfile": {
     "title": "सामुदायिक प्रोफ़ाइल",
@@ -765,7 +766,8 @@
     "viewAll": "सभी को देखें",
     "talawaUserPortal": "तलावा उपयोगकर्ता पोर्टल",
     "my organizations": "मेरे संगठन",
-    "communityProfile": "सामुदायिक प्रोफ़ाइल"
+    "communityProfile": "सामुदायिक प्रोफ़ाइल",
+    "leave": "संगठन छोड़ें"
   },
   "organizationSidebar": {
     "viewAll": "सभी को देखें",
@@ -1052,5 +1054,12 @@
   },
   "userPledges": {
     "title": "मेरी प्रतिज्ञाएँ"
+  },
+  "orgLeave": {
+    "confirmation": "क्या आप वाकई संगठन छोड़ना चाहते हैं?",
+    "heading": "संगठन छोड़ रहे हैं?",
+    "description": "क्या आप वाकई संगठन छोड़ना चाहते हैं? इस एक्शन को वापस नहीं किया जा सकता। यदि संगठन को अनुमोदन की आवश्यकता है, तो आप इसके बिना पुनः शामिल नहीं हो पाएंगे। कोई भी संबंधित डेटा या अनुमतियाँ भी खो सकती हैं।",
+    "errorOccured": "एक त्रुटि पाई गई। कृपया बाद में पुन: प्रयास करें।",
+    "orgLeft": "आपने संगठन छोड़ दिया है."
   }
 }

public/locales/sp/common.json

@@ -83,6 +83,7 @@
   "updatedSuccessfully": "{{item}} actualizado con éxito",
   "removedSuccessfully": "{{item}} eliminado con éxito",
   "successfullyUpdated": "Actualizado con éxito",
+  "confirm": "Confirmar",
   "all": "Todos",
   "active": "Activo",
   "disabled": "Deshabilitado",

public/locales/sp/translation.json

@@ -227,7 +227,8 @@
     "AlreadyJoined": "Ya eres miembro de esta organización.",
     "errorOccured": "Se produjo un error. Por favor, inténtalo de nuevo más tarde.",
     "removeUserFrom": "Eliminar Usuario de {{org}}",
-    "removeConfirmation": "¿Está seguro de que desea eliminar a '{{name}}' de la organización '{{org}}'?"
+    "removeConfirmation": "¿Está seguro de que desea eliminar a '{{name}}' de la organización '{{org}}'?",
+    "leave": "Dejar"
   },
   "communityProfile": {
     "title": "Perfil de la comunidad",
@@ -961,7 +962,8 @@
     "requests": "Solicitudes",
     "communityProfile": "Perfil de la comunidad",
     "logout": "Cerrar sesión",
-    "settings": "Ajustes"
+    "settings": "Ajustes",
+    "leave": "Dejar la organización"
   },
   "organizationSidebar": {
     "viewAll": "Ver todo",
@@ -1286,5 +1288,12 @@
   },
   "userPledges": {
     "title": "Mis Promesas"
+  },
+  "orgLeave": {
+    "confirmation": "¿Estás segura de que quieres dejar la organización?",
+    "heading": "¿Dejar la organización?",
+    "description": "¿Estás seguro de que quieres dejar la organización? Esta acción no se puede deshacer. Si la organización requiere aprobación, no podrás volver a unirte sin ella. También se pueden perder todos los datos o permisos relacionados.",
+    "errorOccured": "Se produjo un error. Inténtelo de nuevo más tarde.",
+    "orgLeft": "Has abandonado la organización."
   }
 }

src/GraphQl/Mutations/OrganizationMutations.ts

@@ -283,6 +283,14 @@ export const JOIN_PUBLIC_ORGANIZATION = gql`
   }
 `;
 
+export const LEAVE_ORGANIZATION = gql`
+  mutation ($organizationId: ID!) {
+    leaveOrganization(organizationId: $organizationId) {
+      _id
+    }
+  }
+`;
+
 export const CANCEL_MEMBERSHIP_REQUEST = gql`
   mutation ($membershipRequestId: ID!) {
     cancelMembershipRequest(membershipRequestId: $membershipRequestId) {

src/GraphQl/Mutations/mutations.ts

@@ -722,6 +722,7 @@ export {
   CREATE_DIRECT_CHAT,
   CREATE_SAMPLE_ORGANIZATION_MUTATION,
   JOIN_PUBLIC_ORGANIZATION,
+  LEAVE_ORGANIZATION,
   PLUGIN_SUBSCRIPTION,
   REMOVE_CUSTOM_FIELD,
   REMOVE_SAMPLE_ORGANIZATION_MUTATION,

src/components/UserPortal/OrganizationCard/OrganizationCard.module.css

@@ -58,6 +58,13 @@
   width: 8rem;
 }
 
+.leaveBtn {
+  display: flex;
+  justify-content: space-around;
+  width: 8rem; /* You can adjust the width based on your needs */
+  margin-right: 9rem;
+}
+
 .orgName {
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -139,9 +146,17 @@
     margin-left: auto;
     display: block;
   }
+
+  .orgCard .btnContainer {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
   .joinBtn,
   .joinedBtn,
-  .withdrawBtn {
+  .withdrawBtn,
+  .leaveBtn {
     display: flex;
     justify-content: space-around;
     width: 100%;

src/components/UserPortal/OrganizationCard/OrganizationCard.tsx

@@ -17,6 +17,7 @@ import {
 import useLocalStorage from 'utils/useLocalstorage';
 import Avatar from 'components/Avatar/Avatar';
 import { useNavigate } from 'react-router-dom';
+import LeaveConfirmModal from '../UserSidebarOrg/LeaveConfirmModal';
 
 const { getItem } = useLocalStorage();
 
@@ -77,6 +78,7 @@ function organizationCard(props: InterfaceOrganizationCardProps): JSX.Element {
   const { t: tCommon } = useTranslation('common');
 
   const navigate = useNavigate();
+  const [modalShow, setModalShow] = React.useState(false);
 
   // Mutations for handling organization memberships
   const [sendMembershipRequest] = useMutation(SEND_MEMBERSHIP_REQUEST, {
@@ -188,16 +190,33 @@ function organizationCard(props: InterfaceOrganizationCardProps): JSX.Element {
           </div>
         </div>
         {props.membershipRequestStatus === 'accepted' && (
-          <Button
-            variant="success"
-            data-testid="manageBtn"
-            className={styles.joinedBtn}
-            onClick={() => {
-              navigate(`/user/organization/${props.id}`);
-            }}
-          >
-            {t('visit')}
-          </Button>
+          <div className={styles.btnContainer}>
+            <Button
+              variant="success"
+              data-testid="manageBtn"
+              className={styles.joinedBtn}
+              onClick={() => {
+                navigate(`/user/organization/${props.id}`);
+              }}
+            >
+              {t('visit')}
+            </Button>
+            <Button
+              variant="danger"
+              data-testid="leaveBtn"
+              className={styles.leaveBtn}
+              onClick={() => {
+                setModalShow(true);
+              }}
+            >
+              {t('leave')}
+            </Button>
+            <LeaveConfirmModal
+              orgId={props.id}
+              show={modalShow}
+              onHide={() => setModalShow(false)}
+            />
+          </div>
         )}
 
         {props.membershipRequestStatus === 'pending' && (

src/components/UserPortal/UserSidebarOrg/LeaveConfirmModal.module.css

@@ -0,0 +1,4 @@
+.leaveConfirmModalFooter {
+  display: flex;
+  justify-content: space-between;
+}