IA-3398 add warning when updating phone number

hat/assets/js/apps/Iaso/domains/app/translations/en.json

@@ -1359,6 +1359,8 @@
     "iaso.users.label.new_user_created": "New user created",
     "iaso.users.label.noTypeAssigned": "No org unit type assigned",
     "iaso.users.label.password_updated": "Password updated",
+    "iaso.users.label.phoneNumberWarning": "WARNING: Updating phone number",
+    "iaso.users.label.phoneNumberWarningMessage": "All phone number updates are logged and archived",
     "iaso.users.labels.createUserWithoutPerm": "Save user with no permissions?",
     "iaso.users.multiEditTitle": "Edit selection: {count} user(s)",
     "iaso.users.multiSelectionAction": "Edit selected users",

hat/assets/js/apps/Iaso/domains/app/translations/fr.json

@@ -1358,6 +1358,8 @@
     "iaso.users.label.new_user_created": "Nouvel utilisateur ajouté",
     "iaso.users.label.noTypeAssigned": "Aucun type d'unité d'org assigné",
     "iaso.users.label.password_updated": "Mot de passe mis à jour",
+    "iaso.users.label.phoneNumberWarning": "ATTENTION: Modification du numéro de téléphone",
+    "iaso.users.label.phoneNumberWarningMessage": "Toute modification du numéro de téléphone est sauvegardée et archivée.",
     "iaso.users.labels.createUserWithoutPerm": "Sauvegarder un utilisateur sans permissions?",
     "iaso.users.multiEditTitle": "Editer la selection: {count} utilisateur(s)",
     "iaso.users.multiSelectionAction": "Editer les utilisateurs sélectionnés",

hat/assets/js/apps/Iaso/domains/users/components/UsersDialog.tsx

@@ -8,8 +8,12 @@ import {
     makeFullModal,
     useSafeIntl,
 } from 'bluesquare-components';
-import React, { FunctionComponent, useCallback, useState } from 'react';
-import { useDispatch } from 'react-redux';
+import React, {
+    FunctionComponent,
+    useCallback,
+    useMemo,
+    useState,
+} from 'react';
 
 import { MutateFunction, useQueryClient } from 'react-query';
 
@@ -53,6 +57,7 @@ type Props = {
     isOpen: boolean;
     closeDialog: () => void;
 };
+
 // Declaring defaultData here because using initialData={} in the props below will cause and infinite loop
 const defaultData: InitialUserData = {};
 const UserDialogComponent: FunctionComponent<Props> = ({
@@ -67,7 +72,6 @@ const UserDialogComponent: FunctionComponent<Props> = ({
     const { formatMessage } = useSafeIntl();
 
     const queryClient = useQueryClient();
-    const dispatch = useDispatch();
     const classes: Record<string, string> = useStyles();
 
     const { user, setFieldValue, setFieldErrors } = useInitialUser(initialData);
@@ -97,36 +101,71 @@ const UserDialogComponent: FunctionComponent<Props> = ({
     }, [
         closeDialog,
         connectedUser.id,
-        dispatch,
+        queryClient,
         saveProfile,
         setFieldErrors,
         user,
     ]);
 
+    const userPermissions = user?.user_permissions.value ?? [];
+    const userRolesPermissions = user?.user_roles_permissions.value ?? [];
+
+    const isPhoneNumberUpdated =
+        // @ts-ignore
+        user.phone_number !== initialData.phone_number && user.id;
+
+    const isUserWithoutPermissions =
+        userPermissions.length === 0 &&
+        userRolesPermissions.length === 0 &&
+        !initialData?.is_superuser;
+
     const onConfirm = useCallback(() => {
-        const userPermissions = user?.user_permissions.value ?? [];
-        const userRolesPermissions = user?.user_roles_permissions.value ?? [];
         if (
-            userPermissions.length > 0 ||
-            userRolesPermissions.length > 0 ||
-            initialData?.is_superuser
+            // If user is not new user and phone number is changed
+            isPhoneNumberUpdated ||
+            isUserWithoutPermissions
         ) {
-            saveUser();
-        } else {
             setOpenWarning(true);
+        } else {
+            saveUser();
         }
-    }, [
-        initialData?.is_superuser,
-        saveUser,
-        user?.user_permissions.value,
-        user?.user_roles_permissions.value,
-    ]);
+    }, [isPhoneNumberUpdated, isUserWithoutPermissions, saveUser]);
+
+    const warningTitleMessage = useMemo(() => {
+        if (isPhoneNumberUpdated && isUserWithoutPermissions) {
+            return formatMessage(MESSAGES.permAndPhoneWarningTitle);
+        }
+        if (isPhoneNumberUpdated) {
+            return formatMessage(MESSAGES.phoneNumberWarning);
+        }
+        if (isUserWithoutPermissions) {
+            return formatMessage(MESSAGES.createUserWithoutPerm);
+        }
+        return '';
+    }, [formatMessage, isPhoneNumberUpdated, isUserWithoutPermissions]);
+
+    const warningBodyMessage = useMemo(() => {
+        if (isPhoneNumberUpdated && isUserWithoutPermissions) {
+            return `1/ ${formatMessage(MESSAGES.phoneNumberWarningMessage)}
+            2/ ${formatMessage(MESSAGES.warningModalMessage)}`;
+        }
+        if (isPhoneNumberUpdated) {
+            return formatMessage(MESSAGES.phoneNumberWarningMessage);
+        }
+        if (isUserWithoutPermissions) {
+            return formatMessage(MESSAGES.warningModalMessage);
+        }
+        return '';
+    }, [formatMessage, isPhoneNumberUpdated, isUserWithoutPermissions]);
+
     return (
         <>
             <WarningModal
                 open={openWarning}
                 closeDialog={() => setOpenWarning(false)}
                 onConfirm={saveUser}
+                titleMessage={warningTitleMessage}
+                bodyMessage={warningBodyMessage}
             />
 
             <ConfirmCancelModal

hat/assets/js/apps/Iaso/domains/users/components/WarningModal/WarningModal.tsx

@@ -1,4 +1,4 @@
-import { ConfirmCancelModal, useSafeIntl } from 'bluesquare-components';
+import { ConfirmCancelModal } from 'bluesquare-components';
 import React, { FunctionComponent } from 'react';
 import { Box, Divider, Typography } from '@mui/material';
 import { MESSAGES } from './messages';
@@ -8,20 +8,23 @@ type Props = {
     open: boolean;
     closeDialog: () => void;
     onConfirm: () => void;
+    titleMessage?: string;
+    bodyMessage?: string;
 };
 
 export const WarningModal: FunctionComponent<Props> = ({
     open,
     closeDialog,
     onConfirm,
+    titleMessage = '',
+    bodyMessage = '',
 }) => {
-    const { formatMessage } = useSafeIntl();
     return (
         <ConfirmCancelModal
             open={open}
             id="user-WarningModal"
             dataTestId="user-WarningModal"
-            titleMessage={formatMessage(MESSAGES.createUserWithoutPerm)}
+            titleMessage={titleMessage}
             onClose={noOp}
             closeDialog={closeDialog}
             onConfirm={onConfirm}
@@ -31,9 +34,7 @@ export const WarningModal: FunctionComponent<Props> = ({
         >
             <Divider />
             <Box mt={2}>
-                <Typography>
-                    {formatMessage(MESSAGES.warningModalMessage)}
-                </Typography>
+                <Typography>{bodyMessage}</Typography>
             </Box>
         </ConfirmCancelModal>
     );

hat/assets/js/apps/Iaso/domains/users/messages.ts

@@ -472,6 +472,28 @@ const MESSAGES = defineMessages({
         id: 'iaso.users.label.new_user_created',
         defaultMessage: 'New user created',
     },
+    phoneNumberWarning: {
+        id: 'iaso.users.label.phoneNumberWarning',
+        defaultMessage: 'WARNING: Updating phone number',
+    },
+    phoneNumberWarningMessage: {
+        id: 'iaso.users.label.phoneNumberWarningMessage',
+        defaultMessage: 'All phone number updates are logged and archived',
+    },
+    createUserWithoutPerm: {
+        id: 'iaso.users.labels.createUserWithoutPerm',
+        defaultMessage: 'Save user with no permissions?',
+    },
+    warningModalMessage: {
+        id: 'iaso.users.warningModalMessage',
+        defaultMessage: `You are about to save a user with no permissions. This user will
+        have access to the mobile application but not to the features of the
+        web interface.`,
+    },
+    permAndPhoneWarningTitle: {
+        id: 'iaso.users.permAndPhoneWarningTitle',
+        defaultMessage: 'WARNING: Read before saving',
+    },
 });
 
 export default MESSAGES;