Feat/sample file upload (#868)

Added feature of passing sample file from the **showWidget**
implerhq · Nov 16, 2024 · 73cc9f0 · 73cc9f0
2 parents bcc7a96 + 72976bd
commit 73cc9f0
Show file tree

Hide file tree

Showing 11 changed files with 66 additions and 16 deletions.
diff --git a/apps/widget/src/components/Common/Container/Container.tsx b/apps/widget/src/components/Common/Container/Container.tsx
@@ -51,6 +51,7 @@ export function Container({ children }: PropsWithChildren<{}>) {
       setSecondaryPayload({
         accessToken: data.value.accessToken,
         host: data.value.host,
+        sampleFile: data.value.sampleFile,
         projectId: data.value.projectId,
         uuid: data.value.uuid,
         extra: isObject(data.value.extra) ? JSON.stringify(data.value.extra) : data.value.extra,
@@ -339,6 +340,7 @@ export function Container({ children }: PropsWithChildren<{}>) {
           authHeaderValue={secondaryPayload?.authHeaderValue}
           // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
           primaryColor={secondaryPayload.primaryColor!}
+          sampleFile={secondaryPayload?.sampleFile}
         >
           {children}
         </Provider>

diff --git a/apps/widget/src/components/Common/Provider/Provider.tsx b/apps/widget/src/components/Common/Provider/Provider.tsx
@@ -12,6 +12,7 @@ interface IProviderProps {
   texts: typeof WIDGET_TEXTS;
   primaryColor: string;
   output?: string;
+  sampleFile?: File | Blob;
   schema?: string;
   data?: string;
   host: string;
@@ -31,6 +32,7 @@ export function Provider(props: PropsWithChildren<IProviderProps>) {
     api,
     data,
     title,
+    sampleFile,
     texts,
     output,
     projectId,
@@ -58,6 +60,7 @@ export function Provider(props: PropsWithChildren<IProviderProps>) {
             host={host}
             data={data}
             title={title}
+            sampleFile={sampleFile}
             texts={texts}
             output={output}
             schema={schema}

diff --git a/apps/widget/src/components/widget/Phases/Phase0/Phase0.tsx b/apps/widget/src/components/widget/Phases/Phase0/Phase0.tsx
@@ -8,7 +8,7 @@ interface IPhase0Props {
 }
 
 export function Phase0({ onValidationSuccess: goNext }: IPhase0Props) {
-  const { isLoading, error, isWidgetOpened, handleValidate } = usePhase0({
+  const { isLoading, error, fileError, isWidgetOpened, handleValidate } = usePhase0({
     goNext,
   });
 
@@ -20,7 +20,7 @@ export function Phase0({ onValidationSuccess: goNext }: IPhase0Props) {
 
   if (isLoading) return <LoadingOverlay visible={isLoading} />;
 
-  if (error)
+  if (error || fileError) {
     return (
       <Alert
         color="yellow"
@@ -34,9 +34,10 @@ export function Phase0({ onValidationSuccess: goNext }: IPhase0Props) {
           border: '.1rem solid #FFC300',
         }}
       >
-        {error.message}
+        {error?.message || fileError}
       </Alert>
     );
+  }
 
   return null;
 }
diff --git a/apps/widget/src/hooks/Phase0/usePhase0.ts b/apps/widget/src/hooks/Phase0/usePhase0.ts
@@ -1,11 +1,12 @@
 import { useMutation } from '@tanstack/react-query';
-
+import { useState } from 'react';
 import { FlowsEnum } from '@types';
 import { useAPIState } from '@store/api.context';
 import { useAppState } from '@store/app.context';
 import { identifyImportIntent } from '@amplitude';
 import { useImplerState } from '@store/impler.context';
-import { IErrorObject, IImportConfig, TemplateModeEnum } from '@impler/shared';
+import { FileMimeTypesEnum, IErrorObject, IImportConfig, TemplateModeEnum } from '@impler/shared';
+import { isValidFileType } from 'util/helpers/common.helpers';
 
 interface IUsePhase0Props {
   goNext: () => void;
@@ -14,7 +15,8 @@ interface IUsePhase0Props {
 export function usePhase0({ goNext }: IUsePhase0Props) {
   const { api } = useAPIState();
   const { projectId, templateId } = useImplerState();
-  const { schema, setImportConfig, showWidget, setFlow } = useAppState();
+  const [fileError, setFileError] = useState<string | null>(null);
+  const { schema, setImportConfig, showWidget, setFlow, sampleFile } = useAppState();
 
   const { mutate: fetchImportConfig } = useMutation<IImportConfig, IErrorObject, void>(
     ['importConfig', projectId, templateId],
@@ -25,10 +27,22 @@ export function usePhase0({ goNext }: IUsePhase0Props) {
           importConfigData.mode === TemplateModeEnum.AUTOMATIC ? FlowsEnum.AUTO_IMPORT : FlowsEnum.STRAIGHT_IMPORT
         );
         setImportConfig(importConfigData);
-        goNext();
+        const allowedTypes = [
+          FileMimeTypesEnum.CSV,
+          FileMimeTypesEnum.EXCEL,
+          FileMimeTypesEnum.EXCELM,
+          FileMimeTypesEnum.EXCELX,
+        ];
+
+        if (sampleFile && !isValidFileType(sampleFile as Blob)) {
+          setFileError(`Only ${allowedTypes.join(',')} are supported`);
+        } else {
+          goNext();
+        }
       },
     }
   );
+
   const {
     error,
     isLoading,
@@ -47,11 +61,12 @@ export function usePhase0({ goNext }: IUsePhase0Props) {
   );
 
   const handleValidate = async () => {
-    return checkIsRequestvalid({ projectId, templateId, schema: schema });
+    return checkIsRequestvalid({ projectId, templateId, schema });
   };
 
   return {
     error,
+    fileError,
     isLoading,
     handleValidate,
     isWidgetOpened: showWidget,

diff --git a/apps/widget/src/hooks/Phase1/usePhase1.ts b/apps/widget/src/hooks/Phase1/usePhase1.ts
@@ -8,7 +8,7 @@ import { useAPIState } from '@store/api.context';
 import { useAppState } from '@store/app.context';
 import { useImplerState } from '@store/impler.context';
 import { IUpload, WIDGET_TEXTS } from '@impler/client';
-import { IErrorObject, ITemplate, FileMimeTypesEnum, IColumn } from '@impler/shared';
+import { IErrorObject, ITemplate, FileMimeTypesEnum, IColumn, downloadFile } from '@impler/shared';
 
 import { variables } from '@config';
 import { useSample } from '@hooks/useSample';
@@ -40,7 +40,7 @@ export function usePhase1({ goNext, texts, onManuallyEnterData }: IUsePhase1Prop
   const { templateId, authHeaderValue, extra } = useImplerState();
   const [excelSheetNames, setExcelSheetNames] = useState<string[]>([]);
   const [isDownloadInProgress, setIsDownloadInProgress] = useState<boolean>(false);
-  const { setUploadInfo, setTemplateInfo, output, schema, data, importId, imageSchema } = useAppState();
+  const { setUploadInfo, setTemplateInfo, output, schema, data, importId, imageSchema, sampleFile } = useAppState();
 
   const selectedTemplateId = watch('templateId');
 
@@ -73,7 +73,8 @@ export function usePhase1({ goNext, texts, onManuallyEnterData }: IUsePhase1Prop
     string[],
     IErrorObject,
     { file: File }
-  >(['getExcelSheetNames'], (file) => api.getExcelSheetNames(file), {
+    // eslint-disable-next-line prettier/prettier
+    >(['getExcelSheetNames'], (excelSheetFile) => api.getExcelSheetNames(excelSheetFile), {
     onSuccess(sheetNames) {
       if (sheetNames.length <= 1) {
         setValue('selectedSheetName', sheetNames[0]);
@@ -107,6 +108,12 @@ export function usePhase1({ goNext, texts, onManuallyEnterData }: IUsePhase1Prop
     }
   };
   const onDownloadClick = async () => {
+    if (sampleFile) {
+      const fileName = (sampleFile as File).name;
+      const fileBaseName = fileName.split('.')[0];
+      downloadFile(sampleFile as Blob, fileBaseName);
+    }
+
     setIsDownloadInProgress(true);
     const isTemplateValid = await trigger('templateId');
     if (!isTemplateValid) {
@@ -148,9 +155,12 @@ export function usePhase1({ goNext, texts, onManuallyEnterData }: IUsePhase1Prop
       });
     }
   };
-  const onSubmit = async (file?: File) => {
-    if (file && [FileMimeTypesEnum.EXCEL, FileMimeTypesEnum.EXCELX].includes(file.type as FileMimeTypesEnum)) {
-      getExcelSheetNames({ file: file });
+  const onSubmit = async (uploadedFile?: File) => {
+    if (
+      uploadedFile &&
+      [FileMimeTypesEnum.EXCEL, FileMimeTypesEnum.EXCELX].includes(uploadedFile.type as FileMimeTypesEnum)
+    ) {
+      getExcelSheetNames({ file: uploadedFile });
     } else {
       handleSubmit(uploadFile)();
     }

diff --git a/apps/widget/src/store/app.context.tsx b/apps/widget/src/store/app.context.tsx
@@ -30,6 +30,7 @@ const AppContextProvider = ({
   title,
   texts,
   data,
+  sampleFile,
   schema,
   output,
   host,
@@ -66,6 +67,7 @@ const AppContextProvider = ({
         uploadInfo,
         setImportId,
         imageSchema,
+        sampleFile,
         templateInfo,
         importConfig,
         primaryColor,

diff --git a/apps/widget/src/types/store.types.ts b/apps/widget/src/types/store.types.ts
@@ -40,6 +40,7 @@ export interface IAppStore {
   schema?: string;
   output?: string;
   flow: FlowsEnum;
+  sampleFile?: File | Blob;
   showWidget: boolean;
   importConfig: IImportConfig;
   setFlow: (flow: FlowsEnum) => void;

diff --git a/apps/widget/src/util/helpers/common.helpers.ts b/apps/widget/src/util/helpers/common.helpers.ts
@@ -5,7 +5,7 @@ import 'tippy.js/dist/tippy.css';
 import 'tippy.js/animations/shift-away.css';
 import { variables } from '@config';
 import { WIDGET_TEXTS, isObject } from '@impler/client';
-import { convertStringToJson, downloadFile } from '@impler/shared';
+import { convertStringToJson, downloadFile, FileMimeTypesEnum } from '@impler/shared';
 
 // eslint-disable-next-line no-magic-numbers
 export function formatBytes(bytes, decimals = 2) {
@@ -151,3 +151,15 @@ export function memoize<T extends (...args: any[]) => any>(fn: T): T {
     return result;
   } as T;
 }
+
+export const isValidFileType = (sampleFile: Blob): boolean => {
+  if (
+    sampleFile instanceof Blob &&
+    [FileMimeTypesEnum.CSV, FileMimeTypesEnum.EXCEL, FileMimeTypesEnum.EXCELM, FileMimeTypesEnum.EXCELX].includes(
+      sampleFile.type as FileMimeTypesEnum
+    )
+  )
+    return true;
+
+  return false;
+};
diff --git a/libs/shared/src/types/widget/widget.types.ts b/libs/shared/src/types/widget/widget.types.ts
@@ -9,6 +9,7 @@ export interface ICommonShowPayload {
   primaryColor?: string;
   colorScheme?: string;
   title?: string;
+  sampleFile?: File | Blob;
   projectId: string;
   accessToken: string;
   uuid: string;

diff --git a/packages/client/src/types.ts b/packages/client/src/types.ts
@@ -163,6 +163,7 @@ export interface IShowWidgetProps {
   projectId: string;
   templateId: string;
   accessToken: string;
+  sampleFile?: File | Blob;
   texts?: CustomTexts;
   title?: string;
   primaryColor?: string;

diff --git a/packages/react/src/hooks/useImpler.ts b/packages/react/src/hooks/useImpler.ts
@@ -79,9 +79,10 @@ export function useImpler({
   const showWidget = async ({
     colorScheme,
     data,
+    sampleFile,
     schema,
     output,
-  }: Pick<IShowWidgetProps, 'colorScheme' | 'data' | 'schema' | 'output'> = {}) => {
+  }: Pick<IShowWidgetProps, 'colorScheme' | 'data' | 'schema' | 'output' | 'sampleFile'> = {}) => {
     if (window.impler && isImplerInitiated) {
       const payload: IShowWidgetProps & { uuid: string; host: string } = {
         uuid,
@@ -91,6 +92,7 @@ export function useImpler({
         accessToken,
         schema,
         data,
+        sampleFile,
         output,
         title,
         extra,