From ffef41185293076cbe666a2ffdd506e2c632fe83 Mon Sep 17 00:00:00 2001
From: chavda-bhavik <bhavikvchavda@gmail.com>
Date: Mon, 28 Aug 2023 10:53:24 +0530
Subject: [PATCH 1/2] feat: Disabled importing xls file and added support for
 invalid file error

---
 .../components/widget/Phases/Phase1/Phase1.tsx    | 15 +++++++++++++--
 apps/widget/src/config/texts.config.ts            |  2 +-
 .../src/design-system/Dropzone/Dropzone.tsx       |  6 ++++--
 apps/widget/src/hooks/Phase1/usePhase1.ts         |  2 ++
 4 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/apps/widget/src/components/widget/Phases/Phase1/Phase1.tsx b/apps/widget/src/components/widget/Phases/Phase1/Phase1.tsx
index 136dc0519..c92b19502 100644
--- a/apps/widget/src/components/widget/Phases/Phase1/Phase1.tsx
+++ b/apps/widget/src/components/widget/Phases/Phase1/Phase1.tsx
@@ -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,19 @@ 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[0]);
+              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
index db588d33b..3700f55d2 100644
--- 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
index 520abd39e..3f030a064 100644
--- 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
index b5273fd13..60acd064d 100644
--- 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,

From d4ce60bc1575afb2f1a5daa3932ead95b309be85 Mon Sep 17 00:00:00 2001
From: chavda-bhavik <bhavikvchavda@gmail.com>
Date: Mon, 28 Aug 2023 11:00:47 +0530
Subject: [PATCH 2/2] feat: Handled no-magic-number warning

---
 apps/widget/src/components/widget/Phases/Phase1/Phase1.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/apps/widget/src/components/widget/Phases/Phase1/Phase1.tsx b/apps/widget/src/components/widget/Phases/Phase1/Phase1.tsx
index c92b19502..0cf60dc8a 100644
--- 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';
@@ -81,9 +81,8 @@ export function Phase1(props: IPhase1Props) {
               });
             }}
             className={classes.dropzone}
-            // eslint-disable-next-line no-magic-numbers
             onDrop={(selectedFile) => {
-              field.onChange(selectedFile[0]);
+              field.onChange(selectedFile[variables.baseIndex]);
               setError('file', {});
             }}
             onClear={() => field.onChange(undefined)}