Create leave workspace functionality

src/languages/en.ts

@@ -2713,6 +2713,7 @@ const translations = {
             submitExpense: 'Submit your expenses below:',
             defaultCategory: 'Default category',
             viewTransactions: 'View transactions',
+            leaveConfirmation: "Are you sure you want to leave this workspace? Once you leave, you'll lose access to all data and settings associated with this workspace.",
         },
         perDiem: {
             subtitle: 'Set per diem rates to control daily employee spend. ',

src/languages/es.ts

@@ -2738,6 +2738,8 @@ const translations = {
             submitExpense: 'Envía tus gastos a continuación:',
             defaultCategory: 'Categoría predeterminada',
             viewTransactions: 'Ver transacciones',
+            leaveConfirmation:
+                '¿Estás seguro de que quieres salir de este espacio de trabajo? Una vez que salgas, perderás el acceso a todos los datos y configuraciones asociadas con este espacio de trabajo.',
         },
         perDiem: {
             subtitle: 'Establece las tasas per diem para controlar los gastos diarios de los empleados. ',

src/pages/workspace/WorkspaceProfilePage.tsx

@@ -20,7 +20,7 @@ import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeIllustrations from '@hooks/useThemeIllustrations';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {clearInviteDraft} from '@libs/actions/Policy/Member';
-import {clearAvatarErrors, clearPolicyErrorField, deleteWorkspace, deleteWorkspaceAvatar, openPolicyProfilePage, updateWorkspaceAvatar} from '@libs/actions/Policy/Policy';
+import {clearAvatarErrors, clearPolicyErrorField, deleteWorkspace, deleteWorkspaceAvatar, leaveWorkspace, openPolicyProfilePage, updateWorkspaceAvatar} from '@libs/actions/Policy/Policy';
 import {getLatestErrorField} from '@libs/ErrorUtils';
 import getTopmostBottomTabRoute from '@libs/Navigation/getTopmostBottomTabRoute';
 import Navigation, {navigationRef} from '@libs/Navigation/Navigation';
@@ -49,6 +49,7 @@ function WorkspaceProfilePage({policyDraft, policy: policyProp, route}: Workspac
     const illustrations = useThemeIllustrations();
     const {activeWorkspaceID, setActiveWorkspaceID} = useActiveWorkspace();
     const {canUseSpotnanaTravel} = usePermissions();
+    const [isLeaveModalOpen, setIsLeaveModalOpen] = useState(false);
 
     const [currencyList = {}] = useOnyx(ONYXKEYS.CURRENCY_LIST);
     const [currentUserAccountID = -1] = useOnyx(ONYXKEYS.SESSION, {selector: (session) => session?.accountID});
@@ -156,27 +157,34 @@ function WorkspaceProfilePage({policyDraft, policy: policyProp, route}: Workspac
 
     const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
 
-    const confirmDeleteAndHideModal = useCallback(() => {
-        if (!policy?.id || !policyName) {
-            return;
-        }
+    const handleWorkspaceAction = useCallback(
+        (action: 'delete' | 'leave') => {
+            if (!policy?.id || !policyName) {
+                return;
+            }
 
-        deleteWorkspace(policy.id, policyName);
-        setIsDeleteModalOpen(false);
+            if (action === 'delete') {
+                deleteWorkspace(policy.id, policyName);
+                setIsDeleteModalOpen(false);
+            } else {
+                leaveWorkspace(policy.id);
+            }
+
+            if (activeWorkspaceID !== policy?.id) {
+                return;
+            }
 
-        // If the workspace being deleted is the active workspace, switch to the "All Workspaces" view
-        if (activeWorkspaceID === policy.id) {
             setActiveWorkspaceID(undefined);
             Navigation.dismissModal();
             const rootState = navigationRef.current?.getRootState() as State<RootStackParamList>;
             const topmostBottomTabRoute = getTopmostBottomTabRoute(rootState);
             if (topmostBottomTabRoute?.name === SCREENS.SETTINGS.ROOT) {
                 Navigation.setParams({policyID: undefined}, topmostBottomTabRoute?.key);
             }
-        }
-        goBackFromInvalidPolicy();
-    }, [policy?.id, policyName, activeWorkspaceID, setActiveWorkspaceID]);
-
+            goBackFromInvalidPolicy();
+        },
+        [policy?.id, policyName, activeWorkspaceID, setActiveWorkspaceID],
+    );
     return (
         <WorkspacePageWithSections
             headerText={translate('workspace.common.profile')}
@@ -223,7 +231,7 @@ function WorkspaceProfilePage({policyDraft, policy: policyProp, route}: Workspac
                                 styles.sectionMenuItemTopDescription,
                             ]}
                             editIconStyle={styles.smallEditIconWorkspace}
-                            isUsingDefaultAvatar={!policy?.avatarURL ?? false}
+                            isUsingDefaultAvatar={!policy?.avatarURL}
                             onImageSelected={(file) => {
                                 if (!policy?.id) {
                                     return;
@@ -367,17 +375,37 @@ function WorkspaceProfilePage({policyDraft, policy: policyProp, route}: Workspac
                                 )}
                             </View>
                         )}
+                        {!(isPolicyAdmin || isOwner) && (
+                            <View style={[styles.flexRow, styles.mt6, styles.mnw120]}>
+                                <Button
+                                    accessibilityLabel={translate('common.leave')}
+                                    text={translate('common.leave')}
+                                    onPress={() => setIsLeaveModalOpen(true)}
+                                    icon={Expensicons.Exit}
+                                />
+                            </View>
+                        )}
                     </Section>
                     <ConfirmModal
                         title={translate('workspace.common.delete')}
                         isVisible={isDeleteModalOpen}
-                        onConfirm={confirmDeleteAndHideModal}
+                        onConfirm={() => handleWorkspaceAction('delete')}
                         onCancel={() => setIsDeleteModalOpen(false)}
                         prompt={hasCardFeedOrExpensifyCard ? translate('workspace.common.deleteWithCardsConfirmation') : translate('workspace.common.deleteConfirmation')}
                         confirmText={translate('common.delete')}
                         cancelText={translate('common.cancel')}
                         danger
                     />
+                    <ConfirmModal
+                        title={translate('common.leave')}
+                        isVisible={isLeaveModalOpen}
+                        onConfirm={() => handleWorkspaceAction('leave')}
+                        onCancel={() => setIsLeaveModalOpen(false)}
+                        prompt={translate('workspace.common.leaveConfirmation')}
+                        confirmText={translate('common.leave')}
+                        cancelText={translate('common.cancel')}
+                        danger
+                    />
                 </View>
             )}
         </WorkspacePageWithSections>