diff --git a/apps/widget/src/components/widget/Phases/AutoImport/AutoImportPhase3/AutoImportPhase3.tsx b/apps/widget/src/components/widget/Phases/AutoImport/AutoImportPhase3/AutoImportPhase3.tsx index 19f916b5..866f3a78 100644 --- a/apps/widget/src/components/widget/Phases/AutoImport/AutoImportPhase3/AutoImportPhase3.tsx +++ b/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(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}`; diff --git a/apps/widget/src/components/widget/Widget.tsx b/apps/widget/src/components/widget/Widget.tsx index b6795e7a..8223a125 100644 --- a/apps/widget/src/components/widget/Widget.tsx +++ b/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[], doClose = false) => { setDataCount(uploadData.totalRecords); setPhase(PhasesEnum.COMPLETE); @@ -118,7 +122,7 @@ export function Widget() { ? { [PhasesEnum.CONFIGURE]: setPhase(PhasesEnum.MAPCOLUMNS)} />, [PhasesEnum.MAPCOLUMNS]: setPhase(PhasesEnum.SCHEDULE)} />, - [PhasesEnum.SCHEDULE]: setPhase(PhasesEnum.CONFIRM)} texts={texts} />, + [PhasesEnum.SCHEDULE]: , [PhasesEnum.CONFIRM]: , } : flow === FlowsEnum.MANUAL_ENTRY diff --git a/apps/widget/src/hooks/AutoImportPhase3/useAutoImportPhase3.tsx b/apps/widget/src/hooks/AutoImportPhase3/useAutoImportPhase3.tsx index 57cd8c42..507aa75c 100644 --- a/apps/widget/src/hooks/AutoImportPhase3/useAutoImportPhase3.tsx +++ b/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); }, }); diff --git a/apps/widget/src/util/parent-window.ts b/apps/widget/src/util/parent-window.ts index ca28ee8d..d6e63ad9 100644 --- a/apps/widget/src/util/parent-window.ts +++ b/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[]) { window.parent.postMessage({ type: EventTypesEnum.DATA_IMPORTED, value }, '*'); } +export function ImportJobCreated(value: IUserJob) { + window.parent.postMessage({ type: EventTypesEnum.IMPORT_JOB_CREATED, value }, '*'); +} diff --git a/libs/shared/src/types/widget/widget.types.ts b/libs/shared/src/types/widget/widget.types.ts index a9cec36a..5fc9f3ab 100644 --- a/libs/shared/src/types/widget/widget.types.ts +++ b/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 { diff --git a/packages/client/src/types.ts b/packages/client/src/types.ts index 23f81b13..d31bd022 100644 --- a/packages/client/src/types.ts +++ b/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[]; } + | { + 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[]) => void; onWidgetClose?: () => void; + onImportJobCreated?: (jobInfo: IUserJob) => void; } diff --git a/packages/react/src/hooks/useImpler.ts b/packages/react/src/hooks/useImpler.ts index 3411d249..b36133e0 100644 --- a/packages/react/src/hooks/useImpler.ts +++ b/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]