@commercetools-frontend-extensions/operations 0.0.0-canary-20251209161906

package/dist/declarations/src/@utils/error-mapping.d.ts

@@ -0,0 +1,19 @@
+export declare function getFileUploadErrorsCount(errors?: Array<{
+    errors: Array<unknown>;
+}>): number;
+export declare function mapUploadFileErrorsResponseToUploadFileErrorRows(uploadFileErrorsResponse?: Array<{
+    row?: number;
+    index?: number;
+    errors: Array<{
+        field: string;
+        code: string;
+        message: string;
+    }>;
+}>): Array<{
+    id: string;
+    row?: number;
+    index?: number;
+    field: string;
+    code: string;
+    validationMessage: string;
+}>;

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

@@ -0,0 +1,54 @@
+/**
+ * Convert megabytes to bytes
+ */
+export declare const toBytes: (megabytes: number) => number;
+/**
+ * Returns the number of rows in a CSV file excluding the header
+ * @param file The CSV file to process
+ * @returns A promise that resolves to the number of rows
+ */
+export declare const getRowCount: (file: File) => Promise<number>;
+/**
+ * Check if a CSV file has a single key column
+ * @param file The CSV file to check
+ * @returns A promise that resolves to true if the file has only one column named 'key'
+ */
+export declare const hasSingleKeyColumn: (file: File) => Promise<boolean>;
+/**
+ * Validate delimiter in a CSV file
+ * @param file The CSV file to validate
+ * @param allowedDelimiters Array of allowed delimiters
+ * @returns A promise that resolves to false if delimiter is invalid
+ */
+export declare const validateDelimiter: (file: File, allowedDelimiters: string[]) => Promise<boolean>;
+/**
+ * Returns columns from the provided `columns` excluding those specified in the `ignoredColumns`
+ */
+export declare const getValidatedColumns: (columns: string[], ignoredColumns: string[]) => string[];
+/**
+ * Count items in a JSON file
+ * @param file The JSON file to process
+ * @returns Object with isValid flag and optional itemsCount
+ */
+export declare const countJsonFileItems: (file: File) => Promise<{
+    isValid: false;
+} | {
+    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
+ * @returns Array of upload file errors with unique id field
+ */
+export declare const mapFileUploadErrorsToUploadFileErrorRows: <T extends Record<string, unknown>>(uploadFileErrors: T[]) => (T & {
+    id: string;
+})[];

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

@@ -0,0 +1 @@
+export declare const mapFormikErrors: (error: string | string[] | undefined | Record<string, boolean>) => Record<string, boolean>;

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

@@ -0,0 +1,5 @@
+export declare function formatErrorCode(code: string): string;
+export declare function extractErrorDescriptionFromValidationMessage(message: string): string | undefined;
+export declare function formatKeys(obj: Record<string, unknown>, conjunction?: string): string;
+export declare function appendCsvOrJsonExtensionIfAbsent(fileName: string, fileFormat: 'csv' | 'json'): string;
+export declare function convertFileSizeToKB(sizeInBytes: number): number;

package/dist/declarations/src/@utils/import-container.d.ts

@@ -0,0 +1,8 @@
+export declare const encodeFileNameWithTimestampToContainerKey: (fileName: string) => string;
+/**
+ * Check if an import container is a file upload import
+ * @param tags - Array of tags from the import container
+ * @returns True if the tags indicate this is a file upload import
+ */
+export declare const checkIfFileUploadImport: (tags?: string[]) => boolean;
+export declare const decodeFileNameFromImportContainerKey: (importContainerKey: string) => string;

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

@@ -0,0 +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/dist/declarations/src/@utils/url.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Formats an object into a URL query string
+ * @param queryParams - Object containing query parameters
+ * @returns Formatted query string with leading '?' or empty string
+ */
+export declare function formatQueryString(queryParams?: Record<string, unknown>): string;

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

@@ -0,0 +1,26 @@
+/**
+ * Shared package for operations
+ *
+ * This package provides shared functionality for import/export operations across:
+ * - application-operations
+ * - import-resources-modal
+ * - export-resources-modal
+ * - delete-resources-modal
+ * - unpublish-products-modal
+ *
+ * Public API includes:
+ * - Hooks: useImportContainerUpload, useFetch*, etc.
+ * - Components: FileDropArea, UploadingModal, UploadSettings, etc.
+ * - Utils: File validation, error mapping, formatting, etc.
+ * - Constants: Delimiters, upload limits, resource links, etc.
+ * - Types: All TypeScript types and interfaces
+ * - Errors: Custom error classes
+ * - API: Functions for interacting with import/export APIs
+ */
+export * from "./@api/index.js";
+export * from "./@components/index.js";
+export * from "./@constants/index.js";
+export * from "./@errors/index.js";
+export * from "./@hooks/index.js";
+export * from "./@types/index.js";
+export * from "./@utils/index.js";

package/index.js

@@ -0,0 +1 @@
+export * from './src'

package/jest.test.config.js

@@ -0,0 +1,11 @@
+process.env.ENABLE_NEW_JSX_TRANSFORM = 'true'
+
+const basePreset = require('@commercetools-frontend/jest-preset-mc-app/typescript')
+
+/** @type {import('jest').Config} */
+const jestPreset = {
+  ...basePreset,
+  displayName: '@commercetools-frontend-extensions/operations',
+}
+
+module.exports = jestPreset

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@commercetools-frontend-extensions/operations",
+  "version": "0.0.0-canary-20251209161906",
+  "license": "Proprietary",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "dist/commercetools-frontend-extensions-operations.cjs.js",
+  "module": "dist/commercetools-frontend-extensions-operations.esm.js",
+  "types": "dist/commercetools-frontend-extensions-operations.cjs.d.ts",
+  "dependencies": {
+    "@babel/core": "^7.21.0",
+    "@babel/runtime": "7.28.4",
+    "@babel/runtime-corejs3": "7.28.4",
+    "@commercetools/importapi-sdk": "5.20.0",
+    "papaparse": "5.5.3",
+    "pluralize": "8.0.0",
+    "react-dropzone": "14.3.8"
+  },
+  "devDependencies": {
+    "@commercetools-frontend/actions-global": "24.11.0",
+    "@commercetools-frontend/application-components": "24.11.0",
+    "@commercetools-frontend/application-shell": "24.11.0",
+    "@commercetools-frontend/application-shell-connectors": "24.11.0",
+    "@commercetools-frontend/constants": "24.11.0",
+    "@commercetools-frontend/jest-preset-mc-app": "24.11.0",
+    "@commercetools-frontend/permissions": "24.11.0",
+    "@commercetools-frontend/sentry": "24.11.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.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.1.2",
+    "typescript": "5.2.2"
+  },
+  "peerDependencies": {
+    "@commercetools-frontend/actions-global": "23.x || 24.x",
+    "@commercetools-frontend/application-components": "23.x || 24.x",
+    "@commercetools-frontend/application-shell": "23.x || 24.x",
+    "@commercetools-frontend/application-shell-connectors": "23.x || 24.x",
+    "@commercetools-frontend/constants": "23.x || 24.x",
+    "@commercetools-frontend/permissions": "23.x || 24.x",
+    "@commercetools-frontend/sentry": "23.x || 24.x",
+    "@commercetools-frontend/ui-kit": "19.x || 20.x",
+    "@emotion/react": "11.x",
+    "@emotion/styled": "11.x",
+    "react": "17.x || 19.x"
+  },
+  "scripts": {
+    "build": "rimraf dist && preconstruct build",
+    "test": "jest --config jest.test.config.js",
+    "test:watch": "jest --config jest.test.config.js --watch",
+    "typecheck": "tsc --noEmit"
+  }
+}

package/src/@api/export-operations.ts

@@ -0,0 +1,26 @@
+import { MC_API_PROXY_TARGETS } from '@commercetools-frontend/constants'
+import {
+  assertPaginatedExportOperationResponse,
+  type PaginatedExportOperationResponse,
+  type ExportOperationQueryParams,
+} from '../@types'
+import { fetcher } from './fetcher'
+import { getExportOperationsURL } from './urls'
+
+export async function fetchExportOperations({
+  projectKey,
+  queryParams,
+}: {
+  projectKey: string
+  queryParams: ExportOperationQueryParams
+}): Promise<PaginatedExportOperationResponse> {
+  const exportOperations = await fetcher<PaginatedExportOperationResponse>({
+    url: getExportOperationsURL({ projectKey, queryParams }),
+    config: {
+      proxy: MC_API_PROXY_TARGETS.EXPORT,
+      method: 'GET',
+    },
+  })
+  assertPaginatedExportOperationResponse(exportOperations)
+  return exportOperations
+}

package/src/@api/fetcher.spec.ts

@@ -0,0 +1,51 @@
+import { HttpError } from '../@errors'
+import { rest } from 'msw'
+import { setupServer } from 'msw/node'
+import { fetcher } from './fetcher'
+
+const mockServer = setupServer(
+  rest.get('http://localhost:8080/proxy/import/hello', (_, res, ctx) =>
+    res(
+      ctx.json({
+        message: 'hello',
+      })
+    )
+  )
+)
+afterEach(() => {
+  mockServer.resetHandlers()
+})
+beforeAll(() => {
+  mockServer.listen()
+})
+afterAll(() => {
+  mockServer.close()
+})
+
+// TODO: write more tests
+describe('fetcher', () => {
+  it('should add proxy prefix to url', async () => {
+    const response = await fetcher<{ message: string }>({
+      url: '/hello',
+      config: {
+        proxy: 'IMPORT',
+      },
+    })
+    expect(response.message).toBe('hello')
+  })
+  it('should throw error if response is unsuccessful', async () => {
+    mockServer.use(
+      rest.get('http://localhost:8080/proxy/import/hello', (_, res, ctx) => {
+        return res(ctx.status(404), ctx.json({ message: 'Not Found' }))
+      })
+    )
+    await expect(
+      fetcher<{ message: string }>({
+        url: '/hello',
+        config: {
+          proxy: 'IMPORT',
+        },
+      })
+    ).rejects.toThrow(new HttpError(404, 'Not Found'))
+  })
+})

package/src/@api/fetcher.ts

@@ -0,0 +1,137 @@
+import {
+  buildApiUrl,
+  executeHttpClientRequest,
+  createHttpClientOptions,
+} from '@commercetools-frontend/application-shell'
+import { oidcStorage } from '@commercetools-frontend/application-shell-connectors'
+import { type Fetcher } from '../@types'
+import { HttpError } from '../@errors'
+
+const addProxyPrefixToUrl = (uri: string, proxy?: string) => {
+  return proxy ? `/proxy/${proxy}${uri}` : uri
+}
+
+export const fetcher = async <Data>({ url, payload, config }: Fetcher) => {
+  const data = await executeHttpClientRequest<Promise<Data>>(
+    async (options: RequestInit) => {
+      const res = await fetch(
+        buildApiUrl(addProxyPrefixToUrl(url, config?.proxy)),
+        {
+          ...options,
+          method: config?.method,
+          body: payload,
+          signal: config?.abortSignal,
+        }
+      )
+      if (!res.ok) {
+        const errorData = await res.json()
+        throw new HttpError(res.status, res.statusText, errorData)
+      }
+      const data = res.json()
+      return {
+        data,
+        statusCode: res.status,
+        getHeader: (key: string) => res.headers.get(key),
+      }
+    },
+    {
+      headers: {
+        'Content-Type': 'application/json',
+        ...config?.headers,
+      },
+    }
+  )
+  return data
+}
+
+export const fetchUsingXhr = ({
+  url,
+  payload,
+  config,
+  onProgress,
+  onSuccess,
+  onError,
+}: {
+  url: string
+  payload: FormData
+  config: {
+    abortSignal?: AbortSignal
+    proxy?: string
+    method: string
+    headers?: { [key: string]: string | null }
+  }
+  onProgress: (progress: number) => void
+  onSuccess: (data: any) => void
+  onError: (error: Error) => void
+}): XMLHttpRequest => {
+  const options = createHttpClientOptions({
+    headers: {
+      'Content-Type': 'application/json',
+      ...config?.headers,
+    },
+  })
+
+  const xhr = new XMLHttpRequest()
+  xhr.open(
+    config?.method,
+    buildApiUrl(addProxyPrefixToUrl(url, config?.proxy)),
+    true
+  )
+
+  xhr.withCredentials = true
+
+  if (options.headers) {
+    Object.keys(options.headers).forEach((key) => {
+      xhr.setRequestHeader(key, options.headers[key])
+    })
+  }
+
+  xhr.upload.onprogress = function (event) {
+    if (event.lengthComputable) {
+      const percentComplete = (event.loaded / event.total) * 100
+      onProgress(percentComplete)
+    }
+  }
+
+  const throwError = (errorData: Response) => {
+    onError(new HttpError(xhr.status, xhr.statusText, errorData))
+  }
+
+  xhr.onload = function () {
+    const data = JSON.parse(xhr.responseText)
+    // Code copied from `executeHttpClientRequest` to replicate the same behavior
+    const refreshedSessionToken = xhr.getResponseHeader(
+      'x-refreshed-session-token'
+    )
+    if (refreshedSessionToken) {
+      oidcStorage.setActiveSession(refreshedSessionToken)
+    }
+    if (xhr.status >= 200 && xhr.status < 300) {
+      onSuccess(data)
+    } else {
+      throwError(data)
+    }
+  }
+
+  xhr.onerror = function () {
+    const errorData = JSON.parse(xhr.responseText)
+    throwError(errorData)
+  }
+
+  xhr.onabort = function () {
+    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
+}

package/src/@api/file-import-jobs.ts

@@ -0,0 +1,217 @@
+import { MC_API_PROXY_TARGETS } from '@commercetools-frontend/constants'
+import type {
+  FileImportJob,
+  CreateFileImportJobParameters,
+  GetFileImportJobParameters,
+  GetFileImportJobRecordsParameters,
+  ProcessFileImportJobParameters,
+  ProcessFileImportJobResponse,
+  DeleteFileImportJobParameters,
+  ListFileImportJobsParameters,
+  ListFileImportJobsResponse,
+  FileImportJobRecordsResponse,
+} from '../@types'
+import {
+  assertFileImportJob,
+  assertFileImportJobRecordsResponse,
+  assertProcessFileImportJobResponse,
+  assertListFileImportJobsResponse,
+} from '../@types'
+import { fetcher, fetchUsingXhr } from './fetcher'
+import {
+  getFileImportJobsURL,
+  getFileImportJobByIdURL,
+  getFileImportJobRecordsURL,
+  getFileImportJobProcessURL,
+  getFileImportJobDeleteURL,
+  getFileImportJobsListURL,
+} from './urls'
+import { formatQueryString } from '../@utils'
+
+export function createFileImportJob({
+  projectKey,
+  resourceType,
+  importContainerKey,
+  payload,
+  onProgress,
+  abortSignal,
+}: CreateFileImportJobParameters): Promise<FileImportJob> {
+  const url = getFileImportJobsURL({
+    projectKey,
+    resourceType,
+    importContainerKey,
+  })
+
+  if ('fileType' in payload) {
+    return new Promise((resolve, reject) => {
+      const formData = new FormData()
+      formData.append('fileType', payload.fileType)
+      formData.append('fileName', payload.fileName)
+      formData.append('file', payload.file, payload.fileName)
+
+      fetchUsingXhr({
+        url,
+        payload: formData,
+        config: {
+          proxy: MC_API_PROXY_TARGETS.IMPORT,
+          method: 'POST',
+          headers: {
+            'Content-Type': null,
+          },
+          abortSignal,
+        },
+        onProgress: onProgress || (() => {}),
+        onSuccess: (response: FileImportJob) => {
+          assertFileImportJob(response)
+          resolve(response)
+        },
+        onError: reject,
+      })
+    })
+  }
+
+  return fetcher<FileImportJob>({
+    url,
+    payload: JSON.stringify(payload),
+    config: {
+      proxy: MC_API_PROXY_TARGETS.IMPORT,
+      method: 'POST',
+      headers: {
+        accept: 'application/json',
+        'Content-Type': 'application/json',
+      },
+    },
+  }).then((response) => {
+    assertFileImportJob(response)
+    return response
+  })
+}
+
+export async function getFileImportJob({
+  projectKey,
+  importContainerKey,
+  jobId,
+}: GetFileImportJobParameters): Promise<FileImportJob> {
+  const url = getFileImportJobByIdURL({
+    projectKey,
+    importContainerKey,
+    jobId,
+  })
+
+  const response = await fetcher<FileImportJob>({
+    url,
+    config: {
+      proxy: MC_API_PROXY_TARGETS.IMPORT,
+      method: 'GET',
+    },
+  })
+
+  assertFileImportJob(response)
+  return response
+}
+
+export async function getFileImportJobRecords({
+  projectKey,
+  importContainerKey,
+  jobId,
+  limit,
+  offset,
+  isValid,
+}: GetFileImportJobRecordsParameters): Promise<FileImportJobRecordsResponse> {
+  const baseUrl = getFileImportJobRecordsURL({
+    projectKey,
+    importContainerKey,
+    jobId,
+  })
+  const queryString = formatQueryString({ limit, offset, isValid })
+  const url = `${baseUrl}${queryString}`
+
+  const response = await fetcher<FileImportJobRecordsResponse>({
+    url,
+    config: {
+      proxy: MC_API_PROXY_TARGETS.IMPORT,
+      method: 'GET',
+    },
+  })
+
+  assertFileImportJobRecordsResponse(response)
+  return response
+}
+
+export async function processFileImportJob({
+  projectKey,
+  resourceType,
+  importContainerKey,
+  jobId,
+  action,
+}: ProcessFileImportJobParameters): Promise<ProcessFileImportJobResponse> {
+  const url = getFileImportJobProcessURL({
+    projectKey,
+    resourceType,
+    importContainerKey,
+    jobId,
+  })
+
+  const payload = action ? { action } : {}
+
+  const response = await fetcher<ProcessFileImportJobResponse>({
+    url,
+    payload: JSON.stringify(payload),
+    config: {
+      proxy: MC_API_PROXY_TARGETS.IMPORT,
+      method: 'POST',
+      headers: {
+        accept: 'application/json',
+        'Content-Type': 'application/json',
+      },
+    },
+  })
+
+  assertProcessFileImportJobResponse(response)
+  return response
+}
+
+export async function deleteFileImportJob({
+  projectKey,
+  importContainerKey,
+  jobId,
+}: DeleteFileImportJobParameters): Promise<void> {
+  const url = getFileImportJobDeleteURL({
+    projectKey,
+    importContainerKey,
+    jobId,
+  })
+
+  await fetcher<void>({
+    url,
+    config: {
+      proxy: MC_API_PROXY_TARGETS.IMPORT,
+      method: 'DELETE',
+    },
+  })
+}
+
+export async function listFileImportJobs({
+  projectKey,
+  importContainerKey,
+  limit,
+  offset,
+}: ListFileImportJobsParameters): Promise<ListFileImportJobsResponse> {
+  const baseUrl = getFileImportJobsListURL({
+    projectKey,
+    importContainerKey,
+  })
+  const queryString = formatQueryString({ limit, offset })
+  const url = `${baseUrl}${queryString}`
+
+  const response = await fetcher<ListFileImportJobsResponse>({
+    url,
+    config: {
+      proxy: MC_API_PROXY_TARGETS.IMPORT,
+      method: 'GET',
+    },
+  })
+
+  assertListFileImportJobsResponse(response)
+  return response
+}