✨ Språkstøtte i FileInput

navikt · Oct 9, 2023 · 4eb7425 · 4eb7425
1 parent 8d74845
commit 4eb7425
Show file tree

Hide file tree

Showing 4 changed files with 96 additions and 31 deletions.
diff --git a/packages/aap-felles-react/src/FileInput/FileInput.stories.tsx b/packages/aap-felles-react/src/FileInput/FileInput.stories.tsx
@@ -24,3 +24,36 @@ export const Primary: StoryFn<FileInputProps> = (args) => {
     />
   );
 };
+
+export const Bokmål:StoryFn<FileInputProps> = (args) => {
+  const [files, setFiles] = useState<Vedlegg[]>([]);
+  return (
+    <FileInput
+      {...args}
+      heading={'Annen dokumentasjon'}
+      id={'filopplasting'}
+      uploadUrl={'/upload'}
+      deleteUrl={'/delete'}
+      onUpload={(attachments) => setFiles([...files, ...attachments])}
+      onDelete={(attachment) => setFiles(files.filter((file) => file.id !== attachment.id))}
+      files={files}
+    />
+  );
+}
+
+export const Nynorsk:StoryFn<FileInputProps> = (args) => {
+  const [files, setFiles] = useState<Vedlegg[]>([]);
+  return (
+    <FileInput
+      {...args}
+      heading={'Annen dokumentasjon'}
+      id={'filopplasting'}
+      uploadUrl={'/upload'}
+      deleteUrl={'/delete'}
+      onUpload={(attachments) => setFiles([...files, ...attachments])}
+      onDelete={(attachment) => setFiles(files.filter((file) => file.id !== attachment.id))}
+      files={files}
+      locale={'nn'}
+    />
+  );
+}
diff --git a/packages/aap-felles-react/src/FileInput/FileInput.tsx b/packages/aap-felles-react/src/FileInput/FileInput.tsx
@@ -4,6 +4,8 @@ import { v4 as uuidV4 } from 'uuid';
 import { UploadIcon } from '@navikt/aksel-icons';
 import { FilePanelError } from './FilePanelError';
 import { FilePanelSuccess } from './FilePanelSuccess';
+import nb from './nb';
+import nn from './nn';
 
 export interface FileInputProps extends InputHTMLAttributes<HTMLInputElement> {
   heading: string;
@@ -14,6 +16,7 @@ export interface FileInputProps extends InputHTMLAttributes<HTMLInputElement> {
   uploadUrl: string;
   files: Vedlegg[];
   ingress?: string;
+  locale?: string;
 }
 
 export interface Vedlegg {
@@ -26,21 +29,55 @@ export interface Vedlegg {
 
 const MAX_TOTAL_FILE_SIZE = 52428800; // 50mb
 export const FileInput = (props: FileInputProps) => {
-  const { heading, ingress, files, onUpload, onDelete, uploadUrl, deleteUrl, id, ...rest } = props;
+  const { heading, ingress, files, onUpload, onDelete, uploadUrl, deleteUrl, id, locale = 'nb', ...rest } = props;
   const [dragOver, setDragOver] = useState<boolean>(false);
   const [isUploading, setIsUploading] = useState<boolean>(false);
   const fileInputElement = useRef<HTMLInputElement>(null);
   const inputId = useMemo(() => uuidV4(), []);
+  const tekster = useMemo(() => {
+    switch (locale) {
+      case 'nn':
+        return nn;
+      default:
+        return nb;
+    }
+  }, [locale]);
+
+  function feilmeldingForSubstatus(substatus: string) {
+    switch (substatus) {
+      case 'PASSWORD_PROTECTED':
+        return tekster.fileInputErrors.passordbeskyttet;
+      case 'VIRUS':
+        return tekster.fileInputErrors.virus;
+      case 'SIZE':
+        return tekster.fileInputErrors.size;
+      default:
+        return '';
+    }
+  }
+
+  const settFeilmelding = (statusCode: number, substatus = '') => {
+    switch (statusCode) {
+      case 422:
+        return feilmeldingForSubstatus(substatus);
+      case 413:
+        return tekster.fileInputErrors.fileTooLarge;
+      case 415:
+        return tekster.fileInputErrors.unsupportedMediaType;
+      default:
+        return tekster.fileInputErrors.other;
+    }
+  }
 
   function internalValidate(fileToUpload: File): string | undefined {
     const totalUploadedSize = files.reduce((acc, curr) => acc + curr.size, 0);
 
     if (!['image/png', 'image/jpg', 'image/jpeg', 'application/pdf'].includes(fileToUpload?.type)) {
-      return 'Filtypen kan ikke lastes opp. Last opp dokumentet i et annet format (PDF, PNG, JPG eller heic).';
+      return tekster.fileInputErrors.unsupportedMediaType;
     }
 
     if (totalUploadedSize + fileToUpload?.size > MAX_TOTAL_FILE_SIZE) {
-      return 'Filen(e) du lastet opp er for stor. Last opp fil(er) med maksimal samlet størrelse 50 MB.';
+      return tekster.fileInputErrors.fileTooLarge;
     }
   }
 
@@ -67,10 +104,10 @@ export const FileInput = (props: FileInputProps) => {
             if (res.ok) {
               uploadResult.id = resData;
             } else {
-              uploadResult.errorMessage = externalValidate(res.status, resData.substatus);
+              uploadResult.errorMessage = settFeilmelding(res.status, resData.substatus);
             }
           } catch (err: any) {
-            uploadResult.errorMessage = externalValidate(err?.status || 500);
+            uploadResult.errorMessage = settFeilmelding(err?.status || 500);
           }
         } else if (internalErrorMessage) {
           uploadResult.errorMessage = internalErrorMessage;
@@ -162,29 +199,4 @@ export const FileInput = (props: FileInputProps) => {
       </div>
     </div>
   );
-};
-
-function externalValidate(statusCode: number, substatus = '') {
-  switch (statusCode) {
-    case 422:
-      return error422Text(substatus);
-    case 413:
-      return 'Filen(e) du lastet opp er for stor. Last opp fil(er) med maksimal samlet størrelse 50 MB.';
-    case 415:
-      return 'Filtypen kan ikke lastes opp. Last opp dokumentet i et annet format (PDF, PNG, JPG eller heic).';
-    default:
-      return 'Opplastingen feilet. Prøv på nytt';
-  }
-}
-function error422Text(subType: string) {
-  switch (subType) {
-    case 'PASSWORD_PROTECTED':
-      return 'Filen er passord-beskyttet og vil ikke kunne leses av en saksbehandler, fjern beskyttelsen og prøv igjen';
-    case 'VIRUS':
-      return 'Det er oppdaget virus på filen du prøver å laste opp. Velg en annen fil å laste opp.';
-    case 'SIZE':
-      return 'Maksimal samlet størrelse på vedlegg per bruker(50MB) er oversteget.';
-    default:
-      return '';
-  }
-}
+};
diff --git a/packages/aap-felles-react/src/FileInput/nb.ts b/packages/aap-felles-react/src/FileInput/nb.ts
@@ -0,0 +1,10 @@
+export default {
+  fileInputErrors: {
+    unsupportedMediaType: "Filtypen kan ikke lastes opp. Last opp dokumentet i et annet format (PDF, PNG, JPG eller heic). ",
+    fileTooLarge: "Filen(e) du lastet opp er for stor. Last opp fil(er) med maksimal samlet størrelse 50 MB.",
+    virus: "Det er oppdaget virus på filen du prøver å laste opp. Velg en annen fil å laste opp.",
+    size: "Maksimal samlet størrelse på vedlegg per bruker(50MB) er oversteget.",
+    passordbeskyttet: "Filen er passord-beskyttet og vil ikke kunne leses av en saksbehandler, fjern beskyttelsen og prøv igjen",
+    other: "Opplastingen feilet. Prøv på nytt"
+  }
+}
diff --git a/packages/aap-felles-react/src/FileInput/nn.ts b/packages/aap-felles-react/src/FileInput/nn.ts
@@ -0,0 +1,10 @@
+export default {
+  fileInputErrors: {
+    unsupportedMediaType: "Filtypen er ikkje støtta. Last opp dokumentet i eit anna format (PDF, PNG, JPG eller heic).",
+    fileTooLarge: "Éi eller fleire av filene du lasta opp, er større enn det som er tillate. Last opp éi eller fleire fil med ein samla storleik på maks 50 MB.",
+    virus: "Det er oppdaga virus på fila du prøver å laste opp. Last opp ei anna fil.",
+    size: "Maksimal samlet størrelse på vedlegg per bruker(50MB) er oversteget.",
+    passordbeskyttet: "Fila er sikra med passord og vil ikkje vere mogleg for ein saksbehandlar å lese. Opphev passordsikringa og prøv igjen",
+    other: "Opplastinga var mislukka. Prøv på nytt"
+  }
+}