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/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep.tsx

@@ -21,6 +21,8 @@ import { UserTableColumn } from './components/UserTableColumn';
 
 const StyledContent = styled(Modal.Content)`
   align-items: center;
+  padding-left: ${({ theme }) => theme.spacing(6)};
+  padding-right: ${({ theme }) => theme.spacing(6)};
 `;
 
 const StyledColumnsContainer = styled.div`
@@ -224,6 +226,7 @@ export const MatchColumnsStep = <T extends string>({
             title: 'Continue',
             onClick: handleAlertOnContinue,
             variant: 'primary',
+            role: 'confirm',
           },
         ],
       });

front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/ColumnGrid.tsx

@@ -19,7 +19,7 @@ const StyledGrid = styled.div`
   display: flex;
   flex-direction: column;
   margin-top: ${({ theme }) => theme.spacing(8)};
-  width: 75%;
+  width: 100%;
 `;
 
 type HeightProps = {

front/src/modules/spreadsheet-import/steps/components/SelectSheetStep/SelectSheetStep.tsx

@@ -9,6 +9,8 @@ import { Modal } from '@/ui/modal/components/Modal';
 
 const StyledContent = styled(Modal.Content)`
   align-items: center;
+  padding-left: ${({ theme }) => theme.spacing(6)};
+  padding-right: ${({ theme }) => theme.spacing(6)};
 `;
 
 const StyledHeading = styled(Heading)`

front/src/modules/spreadsheet-import/steps/components/Steps.tsx

@@ -5,6 +5,7 @@ import { useSpreadsheetImportInternal } from '@/spreadsheet-import/hooks/useSpre
 import { Modal } from '@/ui/modal/components/Modal';
 import { StepBar } from '@/ui/step-bar/components/StepBar';
 import { useStepBar } from '@/ui/step-bar/hooks/useStepBar';
+import { MOBILE_VIEWPORT } from '@/ui/theme/constants/theme';
 
 import { UploadFlow } from './UploadFlow';
 
@@ -15,6 +16,10 @@ const StyledHeader = styled(Modal.Header)`
   padding: 0px;
   padding-left: ${({ theme }) => theme.spacing(30)};
   padding-right: ${({ theme }) => theme.spacing(30)};
+  @media (max-width: ${MOBILE_VIEWPORT}px) {
+    padding-left: ${({ theme }) => theme.spacing(4)};
+    padding-right: ${({ theme }) => theme.spacing(4)};
+  }
 `;
 
 const stepTitles = {

front/src/modules/spreadsheet-import/steps/components/UploadFlow.tsx

@@ -72,6 +72,7 @@ export const UploadFlow = ({ nextStep }: Props) => {
     uploadStepHook,
     selectHeaderStepHook,
     matchColumnsStepHook,
+    selectHeader,
   } = useSpreadsheetImportInternal();
   const { enqueueSnackBar } = useSnackBar();
 
@@ -109,10 +110,27 @@ export const UploadFlow = ({ nextStep }: Props) => {
                 const mappedWorkbook = await uploadStepHook(
                   mapWorkbook(workbook),
                 );
-                setState({
-                  type: StepType.selectHeader,
-                  data: mappedWorkbook,
-                });
+
+                if (selectHeader) {
+                  setState({
+                    type: StepType.selectHeader,
+                    data: mappedWorkbook,
+                  });
+                } else {
+                  // Automatically select first row as header
+                  const trimmedData = mappedWorkbook.slice(1);
+
+                  const { data, headerValues } = await selectHeaderStepHook(
+                    mappedWorkbook[0],
+                    trimmedData,
+                  );
+
+                  setState({
+                    type: StepType.matchColumns,
+                    data,
+                    headerValues,
+                  });
+                }
               } catch (e) {
                 errorToast((e as Error).message);
               }

front/src/modules/spreadsheet-import/steps/components/ValidationStep/ValidationStep.tsx

@@ -17,6 +17,11 @@ import { Modal } from '@/ui/modal/components/Modal';
 import { generateColumns } from './components/columns';
 import type { Meta } from './types';
 
+const StyledContent = styled(Modal.Content)`
+  padding-left: ${({ theme }) => theme.spacing(6)};
+  padding-right: ${({ theme }) => theme.spacing(6)};
+`;
+
 const StyledToolbar = styled.div`
   display: flex;
   flex-direction: row;
@@ -175,6 +180,7 @@ export const ValidationStep = <T extends string>({
             title: 'Submit',
             variant: 'primary',
             onClick: submitData,
+            role: 'confirm',
           },
         ],
       });
@@ -183,7 +189,7 @@ export const ValidationStep = <T extends string>({
 
   return (
     <>
-      <Modal.Content>
+      <StyledContent>
         <Heading
           title="Review your import"
           description="Correct the issues and fill the missing data."
@@ -225,7 +231,7 @@ export const ValidationStep = <T extends string>({
             }}
           />
         </StyledScrollContainer>
-      </Modal.Content>
+      </StyledContent>
       <ContinueButton onContinue={onContinue} title="Confirm" />
     </>
   );