fix: Disabled importing xls file and added support for invalid file…

… error (#351)
implerhq · Aug 28, 2023 · af2520c · af2520c
2 parents 11c1604 + d4ce60b
commit af2520c
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 7 deletions.
diff --git a/apps/widget/src/components/widget/Phases/Phase1/Phase1.tsx b/apps/widget/src/components/widget/Phases/Phase1/Phase1.tsx
@@ -1,4 +1,4 @@
-import { TEXTS } from '@config';
+import { TEXTS, variables } from '@config';
 import { Select } from '@ui/Select';
 import { Button } from '@ui/Button';
 import { Dropzone } from '@ui/Dropzone';
@@ -23,6 +23,7 @@ export function Phase1(props: IPhase1Props) {
     control,
     templates,
     onDownload,
+    setError,
     isUploadLoading,
     onTemplateChange,
     showSelectTemplate,
@@ -34,7 +35,7 @@ export function Phase1(props: IPhase1Props) {
 
   return (
     <>
-      <LoadingOverlay visible={!isInitialDataLoaded || isUploadLoading} />
+      <LoadingOverlay visible={!isInitialDataLoaded} />
       <Group className={classes.templateContainer} spacing="lg" noWrap>
         {showSelectTemplate && (
           <Controller
@@ -72,9 +73,18 @@ export function Phase1(props: IPhase1Props) {
         }}
         render={({ field, fieldState }) => (
           <Dropzone
+            loading={isUploadLoading}
+            onReject={() => {
+              setError('file', {
+                message: `File type not supported! Please select a .csv or .xlsx file.`,
+                type: 'manual',
+              });
+            }}
             className={classes.dropzone}
-            // eslint-disable-next-line no-magic-numbers
-            onDrop={(selectedFile) => field.onChange(selectedFile[0])}
+            onDrop={(selectedFile) => {
+              field.onChange(selectedFile[variables.baseIndex]);
+              setError('file', {});
+            }}
             onClear={() => field.onChange(undefined)}
             title={TEXTS.PHASE1.SELECT_FILE}
             file={field.value}

diff --git a/apps/widget/src/config/texts.config.ts b/apps/widget/src/config/texts.config.ts
@@ -14,7 +14,7 @@ export const TEXTS = {
   DROPZONE: {
     TITLE: 'Drop your file here or ',
     BROWSE: 'Browse',
-    SUBTITLE: 'Select any .csv, .xlx or .xlsx file',
+    SUBTITLE: 'Bring any .csv or .xlsx file here to start Import',
     FILE_SELECTION: 'File selected successfully',
   },
   PHASE1: {

diff --git a/apps/widget/src/design-system/Dropzone/Dropzone.tsx b/apps/widget/src/design-system/Dropzone/Dropzone.tsx
@@ -8,6 +8,7 @@ import { File as FileCMP } from '../File';
 interface IDropzoneProps {
   loading?: boolean;
   accept?: string[];
+  onReject?: () => void;
   onDrop: (files: FileWithPath[]) => void;
   onClear?: () => void;
   file?: FileWithPath;
@@ -19,10 +20,11 @@ interface IDropzoneProps {
 export function Dropzone(props: IDropzoneProps) {
   const {
     loading,
-    accept = [MIME_TYPES.csv, MIME_TYPES.xls, MIME_TYPES.xlsx],
+    accept = [MIME_TYPES.csv, MIME_TYPES.xlsx],
     onDrop,
     onClear,
     file,
+    onReject,
     title,
     className,
     error,
@@ -54,7 +56,7 @@ export function Dropzone(props: IDropzoneProps) {
 
   const SelectFileContent = () => {
     return (
-      <MantineDropzone onDrop={onDrop} accept={accept} loading={loading} classNames={classes}>
+      <MantineDropzone onReject={onReject} onDrop={onDrop} accept={accept} loading={loading} classNames={classes}>
         <Group position="center">
           <div>
             <Text align="center" weight="bold">

diff --git a/apps/widget/src/hooks/Phase1/usePhase1.ts b/apps/widget/src/hooks/Phase1/usePhase1.ts
@@ -75,6 +75,7 @@ export function usePhase1({ goNext }: IUsePhase1Props) {
     trigger,
     getValues,
     setValue,
+    setError,
     handleSubmit,
     formState: { errors },
   } = useForm<IFormvalues>();
@@ -135,6 +136,7 @@ export function usePhase1({ goNext }: IUsePhase1Props) {
   return {
     control,
     errors,
+    setError,
     register,
     templates,
     onDownload,