Fix/csv import (#1397)

* feat: add ability to enable or disable header selection

* feat: limit to max of 200 records for now

* fix: bigger modal

* feat: add missing standard fields for company

* fix: person fields

* feat: add hotkeys on dialog

* feat: mobile device

* fix: company import error

* fix: csv import crash

* fix: use scoped hotkey

front/src/modules/ui/dialog/components/Dialog.tsx

@@ -1,8 +1,12 @@
 import { useCallback } from 'react';
 import styled from '@emotion/styled';
 import { motion } from 'framer-motion';
+import { Key } from 'ts-key-enum';
 
 import { Button } from '@/ui/button/components/Button';
+import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
+
+import { DialogHotkeyScope } from '../types/DialogHotkeyScope';
 
 const StyledDialogOverlay = styled(motion.div)`
   align-items: center;
@@ -52,7 +56,12 @@ const StyledDialogButton = styled(Button)`
 export type DialogButtonOptions = Omit<
   React.ComponentProps<typeof Button>,
   'fullWidth'
->;
+> & {
+  onClick?: (
+    event: React.MouseEvent<HTMLButtonElement, MouseEvent> | KeyboardEvent,
+  ) => void;
+  role?: 'confirm';
+};
 
 export type DialogProps = React.ComponentPropsWithoutRef<typeof motion.div> & {
   title?: string;
@@ -86,6 +95,32 @@ export function Dialog({
     closed: { y: '50vh' },
   };
 
+  useScopedHotkeys(
+    Key.Enter,
+    (event: KeyboardEvent) => {
+      const confirmButton = buttons.find((button) => button.role === 'confirm');
+
+      event.preventDefault();
+
+      if (confirmButton) {
+        confirmButton?.onClick?.(event);
+        closeSnackbar();
+      }
+    },
+    DialogHotkeyScope.Dialog,
+    [],
+  );
+
+  useScopedHotkeys(
+    Key.Escape,
+    (event: KeyboardEvent) => {
+      event.preventDefault();
+      closeSnackbar();
+    },
+    DialogHotkeyScope.Dialog,
+    [],
+  );
+
   return (
     <StyledDialogOverlay
       variants={dialogVariants}

front/src/modules/ui/dialog/components/DialogProvider.tsx

@@ -1,20 +1,38 @@
+import { useEffect } from 'react';
 import { useRecoilState } from 'recoil';
 
+import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
+
 import { dialogInternalState } from '../states/dialogState';
+import { DialogHotkeyScope } from '../types/DialogHotkeyScope';
 
 import { Dialog } from './Dialog';
 
 export function DialogProvider({ children }: React.PropsWithChildren) {
   const [dialogState, setDialogState] = useRecoilState(dialogInternalState);
 
+  const {
+    setHotkeyScopeAndMemorizePreviousScope,
+    goBackToPreviousHotkeyScope,
+  } = usePreviousHotkeyScope();
+
   // Handle dialog close event
   const handleDialogClose = (id: string) => {
     setDialogState((prevState) => ({
       ...prevState,
       queue: prevState.queue.filter((snackBar) => snackBar.id !== id),
     }));
+    goBackToPreviousHotkeyScope();
   };
 
+  useEffect(() => {
+    if (dialogState.queue.length === 0) {
+      return;
+    }
+
+    setHotkeyScopeAndMemorizePreviousScope(DialogHotkeyScope.Dialog);
+  }, [dialogState.queue, setHotkeyScopeAndMemorizePreviousScope]);
+
   return (
     <>
       {children}

front/src/modules/ui/dialog/types/DialogHotkeyScope.ts

@@ -0,0 +1,3 @@
+export enum DialogHotkeyScope {
+  Dialog = 'dialog',
+}