feat: Add upload status events and dedicated error handlers

Author: SunilBhadu

apps/widget/src/hooks/Phase1/usePhase1.ts

@@ -111,13 +111,18 @@ export function usePhase1({ goNext, texts, onManuallyEnterData }: IUsePhase1Prop
     {
       onSuccess(uploadData, uploadValues) {
         ParentWindow.UploadStarted({ templateId: uploadData._templateId, uploadId: uploadData._id });
+        ParentWindow.UploadSuccess({ uploadId: uploadData._id, rowCount: uploadData.totalRecords });
         ParentWindow.UploadStatusSuccess({ uploadId: uploadData._id, rowCount: uploadData.totalRecords });
         setUploadInfo(uploadData);
         if (uploadValues.file) goNext();
         else onManuallyEnterData();
       },
       onError(error: IErrorObject) {
-        ParentWindow.UploadStatusError({ error, status: error.statusCode });
+        ParentWindow.UploadError({
+          errorCode: error.statusCode || 500,
+          errorMessage: error.message || 'Unknown Error',
+        });
+        ParentWindow.UploadStatusError(error);
         resetField('file');
         setError('file', {
           type: 'file',
@@ -131,7 +136,6 @@ export function usePhase1({ goNext, texts, onManuallyEnterData }: IUsePhase1Prop
     string[],
     IErrorObject,
     { file: File }
-    // eslint-disable-next-line prettier/prettier
   >(['getExcelSheetNames'], (excelSheetFile) => api.getExcelSheetNames(excelSheetFile), {
     onSuccess(sheetNames) {
       if (sheetNames.length <= 1) {

apps/widget/src/util/parent-window.ts

@@ -28,6 +28,12 @@ export function DataImported(value: Record<string, any>[]) {
 export function ImportJobCreated(value: IUserJob) {
   window.parent.postMessage({ type: EventTypesEnum.IMPORT_JOB_CREATED, value }, '*');
 }
+export function UploadSuccess(value: { uploadId: string; rowCount: number }) {
+  window.parent.postMessage({ type: EventTypesEnum.UPLOAD_SUCCESS, value }, '*');
+}
+export function UploadError(value: { errorCode: number; errorMessage: string }) {
+  window.parent.postMessage({ type: EventTypesEnum.UPLOAD_ERROR, value }, '*');
+}
 
 export function UploadStatusSuccess(value: { uploadId: string; rowCount: number }) {
   window.parent.postMessage(
@@ -47,16 +53,16 @@ export function UploadStatusSuccess(value: { uploadId: string; rowCount: number
   );
 }
 
-export function UploadStatusError(value: { error?: { message?: string }; status: number }) {
+export function UploadStatusError(value: { message?: string; error?: string; statusCode?: number }) {
   window.parent.postMessage(
     {
       source: 'impler-embed',
       type: 'UPLOAD_STATUS',
       payload: {
         status: 'ERROR',
         meta: {
-          errorCode: value.status || 500,
-          errorMessage: value.error?.message || 'Unknown Network Error',
+          errorCode: value.statusCode || 500,
+          errorMessage: value.message || value.error || 'Unknown Network Error',
           timestamp: new Date().toISOString(),
         },
       },

libs/embed/src/shared/eventTypes.ts

@@ -7,6 +7,10 @@ export enum EventTypesEnum {
   UPLOAD_STARTED = 'UPLOAD_STARTED',
   UPLOAD_TERMINATED = 'UPLOAD_TERMINATED',
   UPLOAD_COMPLETED = 'UPLOAD_COMPLETED',
+  UPLOAD_SUCCESS = 'UPLOAD_SUCCESS',
+  UPLOAD_ERROR = 'UPLOAD_ERROR',
+  DATA_IMPORTED = 'DATA_IMPORTED',
+  IMPORT_JOB_CREATED = 'IMPORT_JOB_CREATED',
 }
 
 export enum WidgetEventTypesEnum {

libs/shared/src/types/widget/widget.types.ts

@@ -75,6 +75,8 @@ export enum EventTypesEnum {
   UPLOAD_STARTED = 'UPLOAD_STARTED',
   UPLOAD_TERMINATED = 'UPLOAD_TERMINATED',
   UPLOAD_COMPLETED = 'UPLOAD_COMPLETED',
+  UPLOAD_SUCCESS = 'UPLOAD_SUCCESS',
+  UPLOAD_ERROR = 'UPLOAD_ERROR',
   DATA_IMPORTED = 'DATA_IMPORTED',
   IMPORT_JOB_CREATED = 'IMPORT_JOB_CREATED',
 }

packages/client/src/types.ts

@@ -31,6 +31,8 @@ export const EventTypes = {
   UPLOAD_STARTED: 'UPLOAD_STARTED',
   UPLOAD_TERMINATED: 'UPLOAD_TERMINATED',
   UPLOAD_COMPLETED: 'UPLOAD_COMPLETED',
+  UPLOAD_SUCCESS: 'UPLOAD_SUCCESS',
+  UPLOAD_ERROR: 'UPLOAD_ERROR',
   DATA_IMPORTED: 'DATA_IMPORTED',
   IMPORT_JOB_CREATED: 'IMPORT_JOB_CREATED',
 } as const;
@@ -135,6 +137,8 @@ export type UploadTemplateData = {
   templateId: string;
 };
 export type UploadData = { uploadId: string };
+export type UploadSuccessData = { uploadId: string; rowCount: number };
+export type UploadErrorData = { errorCode: number; errorMessage: string };
 
 export type EventCalls =
   | {
@@ -157,6 +161,14 @@ export type EventCalls =
       type: typeof EventTypes.IMPORT_JOB_CREATED;
       value: IUserJob;
     }
+  | {
+      type: typeof EventTypes.UPLOAD_SUCCESS;
+      value: UploadSuccessData;
+    }
+  | {
+      type: typeof EventTypes.UPLOAD_ERROR;
+      value: UploadErrorData;
+    }
   | {
       type: typeof EventTypes.CLOSE_WIDGET;
     }
@@ -236,7 +248,10 @@ export interface IUseImplerProps {
   onUploadStart?: (value: UploadTemplateData) => void;
   onUploadTerminate?: (value: UploadData) => void;
   onUploadComplete?: (value: IUpload) => void;
+  onUploadSuccess?: (value: UploadSuccessData) => void;
   onDataImported?: (importedData: Record<string, any>[]) => void;
   onWidgetClose?: () => void;
   onImportJobCreated?: (jobInfo: IUserJob) => void;
+  onWidgetReady?: () => void;
+  onUploadError?: (error: UploadErrorData) => void;
 }

packages/react/src/hooks/useImpler.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { isObject, EventTypes, logError, EventCalls, IShowWidgetProps, IUseImplerProps } from '@impler/client';
 
 export function useImpler({
@@ -19,13 +19,29 @@ export function useImpler({
   onDataImported,
   onUploadTerminate,
   onImportJobCreated,
+  onWidgetReady,
+  onUploadSuccess,
+  onUploadError,
 }: IUseImplerProps) {
   const [uuid] = useState(generateUuid());
   const [isImplerInitiated, setIsImplerInitiated] = useState(false);
+  const onWidgetReadyCalledRef = useRef(false);
+
+  /*
+   * Use a ref so the listener always calls the latest version of callbacks
+   * without needing to re-register with the embed library
+   */
+  const onEventHappenRef = useRef<(eventData: EventCalls) => void>(() => {});
 
   const onEventHappen = useCallback(
     (eventData: EventCalls) => {
       switch (eventData.type) {
+        case EventTypes.WIDGET_READY:
+          if (onWidgetReady && !onWidgetReadyCalledRef.current) {
+            onWidgetReadyCalledRef.current = true;
+            onWidgetReady();
+          }
+          break;
         case EventTypes.UPLOAD_STARTED:
           if (onUploadStart) onUploadStart(eventData.value);
           break;
@@ -35,6 +51,12 @@ export function useImpler({
         case EventTypes.UPLOAD_COMPLETED:
           if (onUploadComplete) onUploadComplete(eventData.value);
           break;
+        case EventTypes.UPLOAD_SUCCESS:
+          if (onUploadSuccess) onUploadSuccess(eventData.value);
+          break;
+        case EventTypes.UPLOAD_ERROR:
+          if (onUploadError) onUploadError(eventData.value);
+          break;
         case EventTypes.DATA_IMPORTED:
           if (onDataImported) onDataImported(eventData.value);
           break;
@@ -46,13 +68,32 @@ export function useImpler({
           break;
       }
     },
-    [onUploadComplete, onUploadStart, onUploadTerminate, onWidgetClose]
+    [
+      onUploadComplete,
+      onUploadStart,
+      onUploadTerminate,
+      onWidgetClose,
+      onDataImported,
+      onImportJobCreated,
+      onWidgetReady,
+      onUploadSuccess,
+      onUploadError,
+    ]
   );
 
+  // Keep ref in sync with latest callback
+  useEffect(() => {
+    onEventHappenRef.current = onEventHappen;
+  }, [onEventHappen]);
+
   useEffect(() => {
     const readyCheckInterval = setInterval(() => {
       if (window.impler && window.impler.isReady()) {
         setIsImplerInitiated(true);
+        if (onWidgetReady && !onWidgetReadyCalledRef.current) {
+          onWidgetReadyCalledRef.current = true;
+          onWidgetReady();
+        }
         clearInterval(readyCheckInterval);
       }
     }, 1000);
@@ -66,7 +107,11 @@ export function useImpler({
     if (!window.impler) logError('IMPLER_UNDEFINED_ERROR');
     else {
       window.impler.init(uuid);
-      window.impler.on('message', onEventHappen, uuid);
+      /*
+       * Use a stable wrapper that delegates to the ref,
+       * so the embed always calls the latest version of onEventHappen
+       */
+      window.impler.on('message', (data: EventCalls) => onEventHappenRef.current(data), uuid);
     }
   }, []);