[native][web] Show version unsupported modal when received use_new_fl…

…ow on logout

Summary:
Address [[ https://linear.app/comm/issue/ENG-9718/support-use-new-flow-for-v1-logout | ENG-9718 ]].
Display "version unsupported" message upon logout, when `use_new_flow` response is received

Depends on D14035

Test Plan: Mocked Identity logout response. I was visually logged out and modal appeared.

Reviewers: kamil, varun

Reviewed By: kamil

Subscribers: ashoat, tomek

Differential Revision: https://phab.comm.dev/D14036

native/profile/profile-screen.react.js

@@ -59,6 +59,7 @@ import {
 import { useSelector } from '../redux/redux-utils.js';
 import { type Colors, useColors, useStyles } from '../themes/colors.js';
 import Alert from '../utils/alert.js';
+import { useShowVersionUnsupportedAlert } from '../utils/hooks.js';
 import { useStaffCanSee } from '../utils/staff-utils.js';
 
 type ProfileRowProps = {
@@ -564,7 +565,6 @@ const ConnectedProfileScreen: React.ComponentType<BaseProps> =
       useSelector(logOutLoadingStatusSelector) === 'loading';
     const colors = useColors();
     const styles = useStyles(unboundStyles);
-    const callLogOut = useLogOut();
     const callPrimaryDeviceLogOut = usePrimaryDeviceLogOut();
     const callSecondaryDeviceLogOut = useSecondaryDeviceLogOut();
     const dispatchActionPromise = useDispatchActionPromise();
@@ -575,6 +575,11 @@ const ConnectedProfileScreen: React.ComponentType<BaseProps> =
     );
     const currentUserID = useCurrentUserFID();
 
+    const showVersionUnsupportedAlert = useShowVersionUnsupportedAlert(false);
+    const callLogOut = useLogOut({
+      handleUseNewFlowResponse: showVersionUnsupportedAlert,
+    });
+
     const userID = useSelector(
       state => state.currentUserInfo && state.currentUserInfo.id,
     );

web/settings/account-settings.react.js

@@ -39,11 +39,21 @@ import TunnelbrokerMessagesScreen from './tunnelbroker-message-list.react.js';
 import TunnelbrokerTestScreen from './tunnelbroker-test.react.js';
 import EditUserAvatar from '../avatars/edit-user-avatar.react.js';
 import Button from '../components/button.react.js';
+import VersionUnsupportedModal from '../modals/version-unsupported-modal.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { useStaffCanSee } from '../utils/staff-utils.js';
 
 function AccountSettings(): React.Node {
-  const sendLogoutRequest = useLogOut();
+  const { pushModal, popModal } = useModalContext();
+
+  const logOutOptions = React.useMemo(() => {
+    const showVersionUnsupportedModal = () => {
+      pushModal(<VersionUnsupportedModal />);
+    };
+    return { handleUseNewFlowResponse: showVersionUnsupportedModal };
+  }, [pushModal]);
+  const sendLogoutRequest = useLogOut(logOutOptions);
+
   const sendSecondaryDeviceLogoutRequest = useSecondaryDeviceLogOut();
   const dispatchActionPromise = useDispatchActionPromise();
   const logOutUser = React.useCallback(
@@ -70,7 +80,6 @@ function AccountSettings(): React.Node {
     })();
   }, []);
 
-  const { pushModal, popModal } = useModalContext();
   const showPasswordChangeModal = React.useCallback(
     () => pushModal(<PasswordChangeModal />),
     [pushModal],