@commercetools-frontend-extensions/operations 2.0.1 → 3.1.0

package/dist/declarations/src/@api/file-import-jobs.d.ts

@@ -0,0 +1,7 @@
+import type { FileImportJob, CreateFileImportJobParameters, GetFileImportJobParameters, GetFileImportJobRecordsParameters, ProcessFileImportJobParameters, ProcessFileImportJobResponse, DeleteFileImportJobParameters, ListFileImportJobsParameters, ListFileImportJobsResponse, FileImportJobRecordsResponse } from "../@types/index.js";
+export declare function createFileImportJob({ projectKey, resourceType, importContainerKey, payload, onProgress, abortSignal, }: CreateFileImportJobParameters): Promise<FileImportJob>;
+export declare function getFileImportJob({ projectKey, importContainerKey, jobId, }: GetFileImportJobParameters): Promise<FileImportJob>;
+export declare function getFileImportJobRecords({ projectKey, importContainerKey, jobId, limit, offset, isValid, }: GetFileImportJobRecordsParameters): Promise<FileImportJobRecordsResponse>;
+export declare function processFileImportJob({ projectKey, resourceType, importContainerKey, jobId, action, }: ProcessFileImportJobParameters): Promise<ProcessFileImportJobResponse>;
+export declare function deleteFileImportJob({ projectKey, importContainerKey, jobId, }: DeleteFileImportJobParameters): Promise<void>;
+export declare function listFileImportJobs({ projectKey, importContainerKey, limit, offset, }: ListFileImportJobsParameters): Promise<ListFileImportJobsResponse>;

package/dist/declarations/src/@api/index.d.ts

@@ -1,5 +1,6 @@
 export * from "./fetcher.js";
 export * from "./file-upload.js";
+export * from "./file-import-jobs.js";
 export * from "./import-containers.js";
 export * from "./import-operations.js";
 export * from "./export-operations.js";

package/dist/declarations/src/@api/test-fixtures.d.ts

@@ -1,4 +1,4 @@
-import { type ProcessFileResponse, type ExportOperation, ImportStates, type ImportSummary, FileUploadResponse } from "../@types/index.js";
+import { type ProcessFileResponse, type ExportOperation, ImportStates, type ImportSummary, type FileUploadResponse, type FileImportJob, type FileImportJobRecordsResponse, type ProcessFileImportJobResponse } from "../@types/index.js";
 export declare const automatedImportContainerKey = "automated-container-key";
 export declare const fileUploadImportContainerKey = "eyJ0aW1lc3RhbXAiOiAxNzA1MDc0MzIxODY4LCAiZmlsZU5hbWUiOiAiZmlsZS11cGxvYWQtY29udGFpbmVyLWtleS5jc3YifQ";
 export declare const manualImports: {
@@ -270,3 +270,10 @@ export declare const fileUploadMissingKeysResponse: {
 export declare const validProcessFileResponse: ProcessFileResponse;
 export declare const exportOperationsCompleted: ExportOperation[];
 export declare const exportOperationsProcessing: ExportOperation[];
+export declare const validFileImportJobQueued: FileImportJob;
+export declare const validFileImportJobProcessing: FileImportJob;
+export declare const validFileImportJobValidated: FileImportJob;
+export declare const invalidFileImportJobValidated: FileImportJob;
+export declare const validFileImportJobRecordsResponse: FileImportJobRecordsResponse;
+export declare const invalidFileImportJobRecordsResponse: FileImportJobRecordsResponse;
+export declare const processFileImportJobResponse: ProcessFileImportJobResponse;

package/dist/declarations/src/@api/urls.d.ts

@@ -42,3 +42,33 @@ export declare function getExportOperationsURL({ projectKey, queryParams, }: {
     projectKey: string;
     queryParams: ExportOperationQueryParams;
 }): string;
+export declare function getFileImportJobsURL({ projectKey, resourceType, importContainerKey, }: {
+    projectKey: string;
+    resourceType: string;
+    importContainerKey: string;
+}): string;
+export declare function getFileImportJobByIdURL({ projectKey, importContainerKey, jobId, }: {
+    projectKey: string;
+    importContainerKey: string;
+    jobId: string;
+}): string;
+export declare function getFileImportJobRecordsURL({ projectKey, importContainerKey, jobId, }: {
+    projectKey: string;
+    importContainerKey: string;
+    jobId: string;
+}): string;
+export declare function getFileImportJobProcessURL({ projectKey, resourceType, importContainerKey, jobId, }: {
+    projectKey: string;
+    resourceType: string;
+    importContainerKey: string;
+    jobId: string;
+}): string;
+export declare function getFileImportJobDeleteURL({ projectKey, importContainerKey, jobId, }: {
+    projectKey: string;
+    importContainerKey: string;
+    jobId: string;
+}): string;
+export declare function getFileImportJobsListURL({ projectKey, importContainerKey, }: {
+    projectKey: string;
+    importContainerKey: string;
+}): string;

package/dist/declarations/src/@components/uploading-modal/uploading-modal.d.ts

@@ -3,10 +3,11 @@ type UploadingModalProps = {
     title: string;
     fileName: string;
     fileSize: number;
-    progress: number;
+    progress?: number;
     cancelLabel: string;
     onCancel: () => void;
     onClose: () => void;
+    statusMessage?: string;
 };
-export declare const UploadingModal: ({ isOpen, title, fileName, fileSize, progress, cancelLabel, onCancel, onClose, }: UploadingModalProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const UploadingModal: ({ isOpen, title, fileName, fileSize, progress, cancelLabel, onCancel, onClose, statusMessage, }: UploadingModalProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/declarations/src/@constants/file-import-job.d.ts

@@ -0,0 +1 @@
+export declare const FILE_IMPORT_JOB_POLLING_INTERVAL = 2000;

package/dist/declarations/src/@constants/import-limits.d.ts

@@ -0,0 +1,6 @@
+export declare const IMPORT_MAX_FILE_SIZE_MB = 200;
+export declare const IMPORT_MAX_ITEM_COUNT = 500000;
+/** @deprecated Use IMPORT_MAX_FILE_SIZE_MB instead. Remove after migration. */
+export declare const IMPORT_LEGACY_MAX_FILE_SIZE_MB = 35;
+/** @deprecated Use IMPORT_MAX_ITEM_COUNT instead. Remove after migration. */
+export declare const IMPORT_LEGACY_MAX_ROW_COUNT = 80000;

package/dist/declarations/src/@constants/index.d.ts

@@ -1,4 +1,5 @@
 export * from "./delimiters.js";
+export * from "./file-import-job.js";
+export * from "./import-limits.js";
 export * from "./import-tags.js";
 export * from "./resource-links.js";
-export * from "./upload-limits.js";

package/dist/declarations/src/@errors/index.d.ts

@@ -1,8 +1,9 @@
-export * from "./unexpected-column-error.js";
-export * from "./unexpected-operation-state-error.js";
-export * from "./unexpected-resource-type-error.js";
 export * from "./http-error.js";
 export * from "./invalid-response-error.js";
-export * from "./query-predicate-error.js";
 export * from "./no-resources-to-export-error.js";
+export * from "./polling-aborted-error.js";
 export * from "./project-key-not-available-error.js";
+export * from "./query-predicate-error.js";
+export * from "./unexpected-column-error.js";
+export * from "./unexpected-operation-state-error.js";
+export * from "./unexpected-resource-type-error.js";

package/dist/declarations/src/@errors/polling-aborted-error.d.ts

@@ -0,0 +1,3 @@
+export declare class PollingAbortedError extends Error {
+    constructor();
+}

package/dist/declarations/src/@hooks/index.d.ts

@@ -1,5 +1,9 @@
 export * from "./use-fetch-export-operations.js";
+export * from "./use-fetch-file-import-job.js";
+export * from "./use-fetch-file-import-job-records.js";
 export * from "./use-fetch-import-container-details.js";
 export * from "./use-fetch-import-operations.js";
 export * from "./use-fetch-import-summaries.js";
+export * from "./use-file-import-job-upload.js";
+export * from "./use-file-upload.js";
 export * from "./use-import-container-upload.js";

package/dist/declarations/src/@hooks/use-fetch-file-import-job-records.d.ts

@@ -0,0 +1,18 @@
+import type { FileImportJobRecordsResponse } from "../@types/index.js";
+type UseFetchFileImportJobRecordsConfig = {
+    projectKey?: string;
+    importContainerKey?: string;
+    jobId?: string;
+    limit?: number;
+    offset?: number;
+    isValid?: boolean;
+    skip?: boolean;
+};
+export declare const useFetchFileImportJobRecords: ({ projectKey, importContainerKey, jobId, limit, offset, isValid, skip, }: UseFetchFileImportJobRecordsConfig) => {
+    data: FileImportJobRecordsResponse | null;
+    error: Error | null;
+    isLoading: boolean;
+    refetch: () => void;
+    lastFetchTime: Date;
+};
+export {};

package/dist/declarations/src/@hooks/use-fetch-file-import-job.d.ts

@@ -0,0 +1,17 @@
+import type { FileImportJob } from "../@types/index.js";
+type UseFetchFileImportJobConfig = {
+    projectKey: string;
+    resourceType: string;
+    importContainerKey: string;
+    jobId: string;
+    pollingInterval?: number;
+    shouldContinuePolling?: (data: FileImportJob) => boolean;
+};
+export declare const useFetchFileImportJob: ({ projectKey, importContainerKey, jobId, pollingInterval, shouldContinuePolling, }: UseFetchFileImportJobConfig) => {
+    data: FileImportJob | null;
+    error: Error | null;
+    isLoading: boolean;
+    refetch: () => void;
+    lastFetchTime: Date;
+};
+export {};

package/dist/declarations/src/@hooks/use-file-import-job-upload.d.ts

@@ -0,0 +1,18 @@
+import type { ResourceTypeId } from '@commercetools/importapi-sdk';
+import type { ExtendedImportContainerDraft } from "../@types/index.js";
+export type UseFileImportJobUploadConfig = {
+    file: File;
+    resourceType: ResourceTypeId;
+    settings?: ExtendedImportContainerDraft['settings'];
+    onSuccess: (jobId: string, importContainerKey: string) => void;
+    onError?: (error: unknown) => void;
+    onProgress?: (progress: number) => void;
+    abortSignal?: AbortSignal;
+};
+export declare const useFileImportJobUpload: ({ projectKey, }: {
+    projectKey: string;
+}) => {
+    upload: (config: UseFileImportJobUploadConfig) => Promise<void>;
+    isUploading: boolean;
+    progress: number;
+};

package/dist/declarations/src/@hooks/use-file-upload.d.ts

@@ -0,0 +1,29 @@
+import type { ResourceTypeId } from '@commercetools/importapi-sdk';
+import type { ExtendedImportContainerDraft, FileUploadResult, FileImportJob } from "../@types/index.js";
+export type ValidationProgress = {
+    processed: number;
+    total: number;
+    isValidating: boolean;
+};
+export type FileUploadConfig = {
+    file: File;
+    resourceType: ResourceTypeId;
+    settings?: ExtendedImportContainerDraft['settings'];
+    onSuccess: (result: FileUploadResult) => void;
+    onError?: (error: unknown) => void;
+    onProgress?: (progress: number) => void;
+    onValidationProgress?: (job: FileImportJob) => void;
+    abortSignal?: AbortSignal;
+};
+export type FileUploadOptions = {
+    projectKey: string;
+    useJobBasedFlow?: boolean;
+    pollingInterval?: number;
+    maxPollingAttempts?: number;
+};
+export declare const useFileUpload: ({ projectKey, useJobBasedFlow, pollingInterval, maxPollingAttempts, }: FileUploadOptions) => {
+    upload: (config: FileUploadConfig) => Promise<void>;
+    isUploading: boolean;
+    progress: number;
+    validationProgress: ValidationProgress;
+};

package/dist/declarations/src/@hooks/use-import-container-upload.d.ts

@@ -7,11 +7,12 @@ export type UseImportContainerUploadConfig = {
     onSuccess: (response: FileUploadResponse, importContainerKey: string) => void;
     onError?: (error: unknown) => void;
     onProgress?: (progress: number) => void;
+    abortSignal?: AbortSignal;
 };
 export declare const useImportContainerUpload: ({ projectKey, }: {
     projectKey: string;
 }) => {
-    upload: ({ file, resourceType, settings, onSuccess, onError, onProgress, }: UseImportContainerUploadConfig) => Promise<XMLHttpRequest>;
+    upload: ({ file, resourceType, settings, onSuccess, onError, onProgress, abortSignal, }: UseImportContainerUploadConfig) => Promise<XMLHttpRequest | undefined>;
     abort: () => void;
     isUploading: boolean;
     progress: number;

package/dist/declarations/src/@types/export-operation.d.ts

@@ -87,9 +87,11 @@ export interface ExportApiErrorResponse {
     errors: ValidationError[];
     message: string;
 }
-export type ValidationErrorCode = 'DuplicateFields' | 'NotSupportedField' | 'FieldDefinitionNotFound' | 'AttributeDefinitionNotFound' | 'LocalizedFieldWithoutLocale' | 'IncompleteField';
+export type ValidationErrorCode = 'DuplicateFields' | 'NotSupportedField' | 'FieldDefinitionNotFound' | 'AttributeDefinitionNotFound' | 'LocalizedFieldWithoutLocale' | 'IncompleteField' | 'AttributeLevelMismatch';
 export type ValidationError = {
     code: ValidationErrorCode;
     message: string;
     field?: string;
+    requestedLevel?: string;
+    actualLevel?: string;
 };

package/dist/declarations/src/@types/file-import-job.d.ts

@@ -0,0 +1,99 @@
+export type FileImportJobState = 'queued' | 'processing' | 'validated' | 'initialising' | 'ready' | 'rejected';
+export interface FileImportJobSummary {
+    total: number;
+    invalid: number;
+    valid: number;
+    fieldsCount: number;
+    fields: string[];
+    ignoredFields: string[];
+}
+export interface FileImportJobValidationError {
+    code: string;
+    message: string;
+    rowValue?: Record<string, string>;
+    metadata?: {
+        row?: number;
+    };
+}
+export interface FileImportJob {
+    id: string;
+    fileName: string;
+    importContainerKey: string;
+    state: FileImportJobState;
+    summary: FileImportJobSummary;
+    jobError?: FileImportJobValidationError | null;
+}
+export interface CreateFileImportJobWithStreamPayload {
+    fileType: 'csv' | 'json';
+    fileName: string;
+    file: File;
+}
+export interface CreateFileImportJobWithReferencePayload {
+    payloadType: 'fileReference';
+    fileName: string;
+    fileUrl: string;
+}
+export type CreateFileImportJobPayload = CreateFileImportJobWithStreamPayload | CreateFileImportJobWithReferencePayload;
+export interface CreateFileImportJobParameters {
+    projectKey: string;
+    resourceType: string;
+    importContainerKey: string;
+    payload: CreateFileImportJobPayload;
+    onProgress?: (progress: number) => void;
+    abortSignal?: AbortSignal;
+}
+export interface GetFileImportJobParameters {
+    projectKey: string;
+    importContainerKey: string;
+    jobId: string;
+}
+export interface FileImportJobError {
+    code: string;
+    message: string;
+    field: string;
+}
+export interface FileImportJobErrorRecord {
+    index: number;
+    errors: FileImportJobError[];
+}
+export interface FileImportJobRecordsResponse {
+    results: FileImportJobErrorRecord[];
+    total: number;
+    limit: number;
+    offset: number;
+    count: number;
+}
+export interface GetFileImportJobRecordsParameters {
+    projectKey: string;
+    importContainerKey: string;
+    jobId: string;
+    limit?: number;
+    offset?: number;
+    isValid?: boolean;
+}
+export interface ProcessFileImportJobParameters {
+    projectKey: string;
+    resourceType: string;
+    importContainerKey: string;
+    jobId: string;
+    action?: 'delete';
+}
+export interface ProcessFileImportJobResponse {
+    message: string;
+}
+export interface DeleteFileImportJobParameters {
+    projectKey: string;
+    importContainerKey: string;
+    jobId: string;
+}
+export interface ListFileImportJobsParameters {
+    projectKey: string;
+    importContainerKey: string;
+    limit?: number;
+    offset?: number;
+}
+export type ListFileImportJobsResponse = FileImportJob[];
+export declare function assertFileImportJob(maybeJob: unknown): asserts maybeJob is FileImportJob;
+export declare function assertFileImportJobRecordsResponse(maybeRecords: unknown): asserts maybeRecords is FileImportJobRecordsResponse;
+export declare function assertProcessFileImportJobResponse(maybeResponse: unknown): asserts maybeResponse is ProcessFileImportJobResponse;
+export declare function assertListFileImportJobsResponse(maybeResponse: unknown): asserts maybeResponse is ListFileImportJobsResponse;

package/dist/declarations/src/@types/file-upload-result.d.ts

@@ -0,0 +1,21 @@
+import type { FileImportJob } from "./file-import-job.js";
+import type { RowErrorsResponse } from "./file-upload.js";
+export interface FileUploadResult {
+    containerKey: string;
+    summary: {
+        total: number;
+        valid: number;
+        invalid: number;
+        fieldsCount: number;
+        fields: string[];
+        ignoredFields: string[];
+        /**
+         * Validation errors. Format is compatible between old and new flows:
+         * - Old flow: { row?: number, index?: number, errors: RowError[] }
+         * - New flow: { index: number, errors: FileImportJobError[] }
+         */
+        results: Array<RowErrorsResponse>;
+    };
+    jobId?: string;
+    job?: FileImportJob;
+}

package/dist/declarations/src/@types/file-upload.d.ts

@@ -29,8 +29,8 @@ export type FileUploadResponse = {
     itemsCount: number;
     rowsCount: number;
     columnsCount: number;
-    columns: Array<string>;
-    ignoredColumns: Array<string>;
+    fields: Array<string>;
+    ignoredFields: Array<string>;
 };
 export interface FileUploadRequestParameters {
     projectKey: string;

package/dist/declarations/src/@types/index.d.ts

@@ -2,6 +2,8 @@ export * from "./api.js";
 export * from "./basic-error-data-type.js";
 export * from "./export-operation.js";
 export * from "./file-upload.js";
+export * from "./file-upload-result.js";
+export * from "./file-import-job.js";
 export * from "./import-container.js";
 export * from "./import-operation.js";
 export * from "./import-states.js";

package/dist/declarations/src/@utils/file-import-job-helpers.d.ts

@@ -0,0 +1,12 @@
+import type { ResourceTypeId } from '@commercetools/importapi-sdk';
+import type { FileImportJob } from "../@types/index.js";
+export declare function getFileImportJobFileType(resourceType: ResourceTypeId): 'csv' | 'json';
+export declare function toImportApiResourceType(resourceType: string): string;
+export declare function isImportJobQueued(job?: FileImportJob): boolean;
+export declare function isImportJobProcessing(job?: FileImportJob): boolean;
+export declare function isImportJobValidated(job?: FileImportJob): boolean;
+export declare function isImportJobInitializing(job?: FileImportJob): boolean;
+export declare function isImportJobReady(job?: FileImportJob): boolean;
+export declare function isImportJobRejected(job?: FileImportJob): boolean;
+export declare function isImportJobTerminal(job?: FileImportJob): boolean;
+export declare function shouldContinuePollingForImportValidation(job?: FileImportJob): boolean;

package/dist/declarations/src/@utils/file-upload.d.ts

@@ -36,6 +36,14 @@ export declare const countJsonFileItems: (file: File) => Promise<{
     isValid: true;
     itemsCount: number;
 }>;
+/**
+ * Count unique resources in a CSV file by counting unique values in the "key" column.
+ * A single resource can span multiple rows (when it has array fields like variants, assets...),
+ * so we count unique keys rather than rows.
+ * @param file The CSV file to process
+ * @returns A promise that resolves to the number of unique resources
+ */
+export declare const countUniqueResourcesInCsv: (file: File) => Promise<number>;
 /**
  * Map file upload errors to upload file error rows with unique IDs
  * @param uploadFileErrors Array of file upload errors

package/dist/declarations/src/@utils/index.d.ts

@@ -1,6 +1,8 @@
 export * from "./error-mapping.js";
+export * from "./file-import-job-helpers.js";
 export * from "./file-upload.js";
 export * from "./form.js";
 export * from "./format.js";
 export * from "./import-container.js";
+export * from "./poll-job-until-validated.js";
 export * from "./url.js";

package/dist/declarations/src/@utils/poll-job-until-validated.d.ts

@@ -0,0 +1,11 @@
+import type { FileImportJob } from "../@types/index.js";
+export type PollJobUntilValidatedConfig = {
+    projectKey: string;
+    jobId: string;
+    importContainerKey: string;
+    pollingInterval?: number;
+    maxAttempts?: number;
+    onJobUpdate?: (job: FileImportJob) => void;
+    abortSignal?: AbortSignal;
+};
+export declare const pollJobUntilValidated: ({ projectKey, jobId, importContainerKey, pollingInterval, maxAttempts, onJobUpdate, abortSignal, }: PollJobUntilValidatedConfig) => Promise<FileImportJob>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commercetools-frontend-extensions/operations",
-  "version": "2.0.1",
+  "version": "3.1.0",
   "license": "Proprietary",
   "publishConfig": {
     "access": "public"
@@ -18,26 +18,26 @@
     "react-dropzone": "14.3.8"
   },
   "devDependencies": {
-    "@commercetools-frontend/actions-global": "24.9.0",
-    "@commercetools-frontend/application-components": "24.9.0",
-    "@commercetools-frontend/application-shell": "24.9.0",
-    "@commercetools-frontend/application-shell-connectors": "24.9.0",
-    "@commercetools-frontend/constants": "24.9.0",
-    "@commercetools-frontend/jest-preset-mc-app": "24.9.0",
-    "@commercetools-frontend/permissions": "24.9.0",
-    "@commercetools-frontend/sentry": "24.9.0",
+    "@commercetools-frontend/actions-global": "24.12.0",
+    "@commercetools-frontend/application-components": "24.12.0",
+    "@commercetools-frontend/application-shell": "24.12.0",
+    "@commercetools-frontend/application-shell-connectors": "24.12.0",
+    "@commercetools-frontend/constants": "24.12.0",
+    "@commercetools-frontend/jest-preset-mc-app": "24.12.0",
+    "@commercetools-frontend/permissions": "24.12.0",
+    "@commercetools-frontend/sentry": "24.12.0",
     "@commercetools-frontend/ui-kit": "20.3.0",
     "@emotion/react": "11.14.0",
     "@emotion/styled": "11.14.1",
     "@testing-library/react": "16.1.0",
     "@types/jest": "29.5.14",
-    "@types/papaparse": "5.3.16",
+    "@types/papaparse": "5.5.1",
     "@types/pluralize": "0.0.33",
     "@types/react": "19.2.0",
     "msw": "1.3.5",
     "react": "19.2.0",
     "react-intl": "7.1.4",
-    "rimraf": "6.0.1",
+    "rimraf": "6.1.2",
     "typescript": "5.2.2"
   },
   "peerDependencies": {
@@ -51,8 +51,7 @@
     "@commercetools-frontend/ui-kit": "19.x || 20.x",
     "@emotion/react": "11.x",
     "@emotion/styled": "11.x",
-    "react": "17.x || 19.x",
-    "react-intl": "6.x || 7.x"
+    "react": "17.x || 19.x"
   },
   "scripts": {
     "build": "rimraf dist && preconstruct build",

package/src/@api/fetcher.ts

@@ -122,6 +122,16 @@ export const fetchUsingXhr = ({
     onError(new DOMException('Aborted', 'AbortError'))
   }
 
+  if (config.abortSignal) {
+    if (config.abortSignal.aborted) {
+      xhr.abort()
+    } else {
+      config.abortSignal.addEventListener('abort', () => xhr.abort(), {
+        once: true,
+      })
+    }
+  }
+
   xhr.send(payload)
   return xhr
 }