feat: Added event listener for on import job created

apps/widget/src/components/widget/Phases/AutoImport/AutoImportPhase3/AutoImportPhase3.tsx

@@ -4,6 +4,7 @@ import { Group, Text, Stack, Flex, Container } from '@mantine/core';
 
 const parseCronExpression = require('util/helpers/cronstrue');
 import { PhasesEnum } from '@types';
+import { IUserJob } from '@impler/shared';
 import { WIDGET_TEXTS } from '@impler/client';
 import { TooltipBadge } from './TooltipBadge';
 import { Footer } from 'components/Common/Footer';
@@ -13,7 +14,7 @@ import { useAutoImportPhase3 } from '@hooks/AutoImportPhase3/useAutoImportPhase3
 import { colors, cronExampleBadges, cronExamples, ScheduleFormValues, defaultCronValues } from '@config';
 
 interface IAutoImportPhase3Props {
-  onNextClick: () => void;
+  onNextClick: (importJob: IUserJob) => void;
   texts: typeof WIDGET_TEXTS;
 }
 
@@ -26,7 +27,7 @@ export function AutoImportPhase3({ onNextClick, texts }: IAutoImportPhase3Props)
   const [cronDescription, setCronDescription] = useState({ description: '', isError: false });
   const [focusedField, setFocusedField] = useState<keyof ScheduleFormValues | null>(null);
 
-  const { updateUserJob, isUpdateUserJobLoading } = useAutoImportPhase3({ goNext: onNextClick });
+  const { updateUserJob, isUpdateUserJobLoading } = useAutoImportPhase3({ onImportJobCreate: onNextClick });
 
   useEffect(() => {
     const cronExpression = `${scheduleData.Minute} ${scheduleData.Hour} ${scheduleData.Day} ${scheduleData.Month} ${scheduleData.Days}`;

apps/widget/src/components/widget/Widget.tsx

@@ -10,7 +10,7 @@ import { Layout } from 'components/Common/Layout';
 import { useTemplates } from '@hooks/useTemplates';
 import { ConfirmModal } from './modals/ConfirmModal';
 import { logAmplitudeEvent, resetAmplitude } from '@amplitude';
-import { IImportConfig, TemplateModeEnum } from '@impler/shared';
+import { IImportConfig, IUserJob, TemplateModeEnum } from '@impler/shared';
 import { FlowsEnum, PhasesEnum, PromptModalTypesEnum } from '@types';
 
 import { Phase0 } from './Phases/Phase0';
@@ -91,6 +91,10 @@ export function Widget() {
     resetAmplitude();
     setPhase(PhasesEnum.VALIDATE);
   };
+  const onImportJobCreated = (jobInfo: IUserJob) => {
+    ParentWindow.ImportJobCreated(jobInfo);
+    setPhase(PhasesEnum.CONFIRM);
+  };
   const onComplete = (uploadData: IUpload, importedData?: Record<string, any>[], doClose = false) => {
     setDataCount(uploadData.totalRecords);
     setPhase(PhasesEnum.COMPLETE);
@@ -118,7 +122,7 @@ export function Widget() {
       ? {
           [PhasesEnum.CONFIGURE]: <AutoImportPhase1 onNextClick={() => setPhase(PhasesEnum.MAPCOLUMNS)} />,
           [PhasesEnum.MAPCOLUMNS]: <AutoImportPhase2 texts={texts} onNextClick={() => setPhase(PhasesEnum.SCHEDULE)} />,
-          [PhasesEnum.SCHEDULE]: <AutoImportPhase3 onNextClick={() => setPhase(PhasesEnum.CONFIRM)} texts={texts} />,
+          [PhasesEnum.SCHEDULE]: <AutoImportPhase3 onNextClick={onImportJobCreated} texts={texts} />,
           [PhasesEnum.CONFIRM]: <AutoImportPhase4 onCloseClick={onClose} />,
         }
       : flow === FlowsEnum.MANUAL_ENTRY

apps/widget/src/hooks/AutoImportPhase3/useAutoImportPhase3.tsx

@@ -4,10 +4,10 @@ import { useAPIState } from '@store/api.context';
 import { useJobsInfo } from '@store/jobinfo.context';
 
 interface IUseAutoImportPhase3Props {
-  goNext: () => void;
+  onImportJobCreate: (importJob: IUserJob) => void;
 }
 
-export function useAutoImportPhase3({ goNext }: IUseAutoImportPhase3Props) {
+export function useAutoImportPhase3({ onImportJobCreate }: IUseAutoImportPhase3Props) {
   const { api } = useAPIState();
   const { jobsInfo, setJobsInfo } = useJobsInfo();
 
@@ -18,7 +18,7 @@ export function useAutoImportPhase3({ goNext }: IUseAutoImportPhase3Props) {
   >((jobInfo) => api.updateUserJob(jobsInfo._id, jobInfo), {
     onSuccess(updatedJobInfo) {
       setJobsInfo(updatedJobInfo);
-      goNext();
+      onImportJobCreate(updatedJobInfo);
     },
   });
 

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

@@ -1,5 +1,5 @@
 import { IUpload } from '@impler/client';
-import { EventTypesEnum } from '@impler/shared';
+import { EventTypesEnum, IUserJob } from '@impler/shared';
 
 export function Ready() {
   window.parent.postMessage({ type: EventTypesEnum.WIDGET_READY }, '*');
@@ -25,3 +25,6 @@ export function UploadCompleted(value: IUpload) {
 export function DataImported(value: Record<string, any>[]) {
   window.parent.postMessage({ type: EventTypesEnum.DATA_IMPORTED, value }, '*');
 }
+export function ImportJobCreated(value: IUserJob) {
+  window.parent.postMessage({ type: EventTypesEnum.IMPORT_JOB_CREATED, value }, '*');
+}

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

@@ -41,6 +41,7 @@ export enum EventTypesEnum {
   UPLOAD_TERMINATED = 'UPLOAD_TERMINATED',
   UPLOAD_COMPLETED = 'UPLOAD_COMPLETED',
   DATA_IMPORTED = 'DATA_IMPORTED',
+  IMPORT_JOB_CREATED = 'IMPORT_JOB_CREATED',
 }
 
 export enum WidgetEventTypesEnum {

packages/client/src/types.ts

@@ -31,6 +31,7 @@ export const EventTypes = {
   UPLOAD_TERMINATED: 'UPLOAD_TERMINATED',
   UPLOAD_COMPLETED: 'UPLOAD_COMPLETED',
   DATA_IMPORTED: 'DATA_IMPORTED',
+  IMPORT_JOB_CREATED: 'IMPORT_JOB_CREATED',
 } as const;
 
 export interface IUpload {
@@ -57,6 +58,14 @@ export interface IUpload {
   customChunkFormat: string;
 }
 
+export interface IUserJob {
+  _id: string;
+  url: string;
+  _templateId: string;
+  headings: string[];
+  cron: string;
+}
+
 export enum ValidationTypesEnum {
   RANGE = 'range',
   LENGTH = 'length',
@@ -135,6 +144,10 @@ export type EventCalls =
       type: typeof EventTypes.DATA_IMPORTED;
       value: Record<string, any>[];
     }
+  | {
+      type: typeof EventTypes.IMPORT_JOB_CREATED;
+      value: IUserJob;
+    }
   | {
       type: typeof EventTypes.CLOSE_WIDGET;
     }
@@ -179,4 +192,5 @@ export interface IUseImplerProps {
   onUploadComplete?: (value: IUpload) => void;
   onDataImported?: (importedData: Record<string, any>[]) => void;
   onWidgetClose?: () => void;
+  onImportJobCreated?: (jobInfo: IUserJob) => void;
 }

packages/react/src/hooks/useImpler.ts

@@ -15,6 +15,7 @@ export function useImpler({
   onUploadStart,
   onDataImported,
   onUploadTerminate,
+  onImportJobCreated,
 }: IUseImplerProps) {
   const [uuid] = useState(generateUuid());
   const [isImplerInitiated, setIsImplerInitiated] = useState(false);
@@ -37,6 +38,9 @@ export function useImpler({
         case EventTypes.CLOSE_WIDGET:
           if (onWidgetClose) onWidgetClose();
           break;
+        case EventTypes.IMPORT_JOB_CREATED:
+          if (onImportJobCreated) onImportJobCreated(eventData.value);
+          break;
       }
     },
     [onUploadComplete, onUploadStart, onUploadTerminate, onWidgetClose]