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

package/src/@hooks/use-file-upload.ts

@@ -0,0 +1,223 @@
+import React from 'react'
+import type { ResourceTypeId } from '@commercetools/importapi-sdk'
+import { useImportContainerUpload } from './use-import-container-upload'
+import { useFileImportJobUpload } from './use-file-import-job-upload'
+import { getFileImportJobRecords, deleteImportContainer } from '../@api'
+import { HttpError, PollingAbortedError } from '../@errors'
+import { pollJobUntilValidated } from '../@utils'
+import type {
+  ExtendedImportContainerDraft,
+  FileUploadResult,
+  FileImportJob,
+} from '../@types'
+
+export type ValidationProgress = {
+  processed: 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
+}
+
+const safeDeleteContainer = async ({
+  projectKey,
+  containerKey,
+}: {
+  projectKey: string
+  containerKey: string
+}) => {
+  try {
+    await deleteImportContainer({
+      projectKey,
+      importContainerKey: containerKey,
+    })
+  } catch {}
+}
+
+export const useFileUpload = ({
+  projectKey,
+  useJobBasedFlow = false,
+  pollingInterval = 5000,
+  maxPollingAttempts = 120,
+}: FileUploadOptions) => {
+  const [isUploading, setIsUploading] = React.useState(false)
+  const [progress, setProgress] = React.useState(0)
+  const [validationProgress, setValidationProgress] =
+    React.useState<ValidationProgress>({
+      processed: 0,
+      isValidating: false,
+    })
+
+  const containerUpload = useImportContainerUpload({ projectKey })
+  const jobUpload = useFileImportJobUpload({ projectKey })
+
+  const resetState = React.useCallback(() => {
+    setIsUploading(false)
+    setProgress(0)
+    setValidationProgress({ processed: 0, isValidating: false })
+  }, [])
+
+  const upload = React.useCallback(
+    async (config: FileUploadConfig) => {
+      setIsUploading(true)
+      setProgress(0)
+
+      try {
+        if (useJobBasedFlow) {
+          await jobUpload.upload({
+            file: config.file,
+            resourceType: config.resourceType,
+            settings: config.settings,
+            abortSignal: config.abortSignal,
+            onSuccess: async (jobId, containerKey) => {
+              try {
+                setValidationProgress({ processed: 0, isValidating: true })
+
+                const validatedJob = await pollJobUntilValidated({
+                  projectKey,
+                  jobId,
+                  importContainerKey: containerKey,
+                  pollingInterval,
+                  maxAttempts: maxPollingAttempts,
+                  abortSignal: config.abortSignal,
+                  onJobUpdate: (job) => {
+                    const processed = job.summary?.total ?? 0
+                    setValidationProgress({ processed, isValidating: true })
+                    config.onValidationProgress?.(job)
+                  },
+                })
+
+                // Handle rejected job with jobError for the new flow (like MissingCsvFieldIdentifier error)
+                // We wrap it in HttpError to reuse existing error handling (for the old flow) in consumers until BE supports this error type
+                if (validatedJob.jobError) {
+                  throw new HttpError(
+                    400,
+                    validatedJob.jobError.message,
+                    validatedJob.jobError
+                  )
+                }
+
+                let results: FileUploadResult['summary']['results'] = []
+                if (validatedJob.summary.invalid > 0) {
+                  const recordsResponse = await getFileImportJobRecords({
+                    projectKey,
+                    importContainerKey: containerKey,
+                    jobId,
+                    limit: 500,
+                    isValid: false,
+                  })
+                  results = recordsResponse.results
+                  await safeDeleteContainer({ projectKey, containerKey })
+                }
+
+                const result: FileUploadResult = {
+                  containerKey,
+                  summary: {
+                    ...validatedJob.summary,
+                    results,
+                  },
+                  jobId,
+                  job: validatedJob,
+                }
+
+                setIsUploading(false)
+                setValidationProgress({ processed: 0, isValidating: false })
+                config.onSuccess(result)
+              } catch (error) {
+                await safeDeleteContainer({ projectKey, containerKey })
+                resetState()
+
+                if (!(error instanceof PollingAbortedError)) {
+                  config.onError?.(error)
+                }
+              }
+            },
+            onProgress: (prog) => {
+              setProgress(prog)
+              config.onProgress?.(prog)
+            },
+            onError: (error) => {
+              resetState()
+              config.onError?.(error)
+            },
+          })
+        } else {
+          await containerUpload.upload({
+            file: config.file,
+            resourceType: config.resourceType,
+            settings: config.settings,
+            abortSignal: config.abortSignal,
+            onSuccess: async (fileUploadResponse, containerKey) => {
+              if (config.abortSignal?.aborted) {
+                await safeDeleteContainer({ projectKey, containerKey })
+                resetState()
+                return
+              }
+
+              if (fileUploadResponse.invalid > 0) {
+                await safeDeleteContainer({ projectKey, containerKey })
+              }
+
+              const result: FileUploadResult = {
+                containerKey,
+                summary: {
+                  total: fileUploadResponse.itemsCount,
+                  valid: fileUploadResponse.valid,
+                  invalid: fileUploadResponse.invalid,
+                  fieldsCount: fileUploadResponse.columnsCount,
+                  fields: fileUploadResponse.fields || [],
+                  ignoredFields: fileUploadResponse.ignoredFields || [],
+                  results: fileUploadResponse.results || [],
+                },
+              }
+
+              setIsUploading(false)
+              config.onSuccess(result)
+            },
+            onProgress: (prog) => {
+              setProgress(prog)
+              config.onProgress?.(prog)
+            },
+            onError: (error) => {
+              resetState()
+              config.onError?.(error)
+            },
+          })
+        }
+      } catch (error) {
+        resetState()
+        config.onError?.(error)
+      }
+    },
+    [
+      projectKey,
+      useJobBasedFlow,
+      pollingInterval,
+      maxPollingAttempts,
+      containerUpload,
+      jobUpload,
+    ]
+  )
+
+  return {
+    upload,
+    isUploading,
+    progress,
+    validationProgress,
+  }
+}

package/src/@hooks/use-import-container-upload.spec.ts

@@ -0,0 +1,297 @@
+import { renderHook, waitFor, act } from '@testing-library/react'
+import {
+  createImportContainerForFileUpload,
+  deleteImportContainer,
+  uploadFileForImport,
+} from '../@api'
+import { ProjectKeyNotAvailableError } from '../@errors'
+import { encodeFileNameWithTimestampToContainerKey } from '../@utils'
+import {
+  useImportContainerUpload,
+  type UseImportContainerUploadConfig,
+} from './use-import-container-upload'
+
+jest.mock('../@api')
+jest.mock('../@utils')
+
+const mockCreateImportContainerForFileUpload =
+  createImportContainerForFileUpload as jest.MockedFunction<
+    typeof createImportContainerForFileUpload
+  >
+const mockUploadFileForImport = uploadFileForImport as jest.MockedFunction<
+  typeof uploadFileForImport
+>
+const mockDeleteImportContainer = deleteImportContainer as jest.MockedFunction<
+  typeof deleteImportContainer
+>
+const mockEncodeFileNameWithTimestampToContainerKey =
+  encodeFileNameWithTimestampToContainerKey as jest.MockedFunction<
+    typeof encodeFileNameWithTimestampToContainerKey
+  >
+
+describe('useImportContainerUpload', () => {
+  const projectKey = 'test-with-big-data'
+  const importContainerKey = 'test-container-key'
+  const mockFile = new File(['test content'], 'test.csv', { type: 'text/csv' })
+  const mockXhr = { abort: jest.fn() } as unknown as XMLHttpRequest
+  const mockFileUploadResponse = {
+    results: [],
+    invalid: 0,
+    valid: 10,
+    fileName: 'test.csv',
+    itemsCount: 10,
+    rowsCount: 10,
+    columnsCount: 2,
+    fields: ['key', 'value'],
+    ignoredFields: [],
+  }
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+    mockEncodeFileNameWithTimestampToContainerKey.mockReturnValue(
+      importContainerKey
+    )
+    mockCreateImportContainerForFileUpload.mockResolvedValue(undefined)
+    mockDeleteImportContainer.mockResolvedValue(undefined)
+  })
+
+  it('should throw "ProjectKeyNotAvailableError" if "projectKey" is not available', async () => {
+    const { result } = renderHook(() =>
+      // @ts-ignore
+      useImportContainerUpload({ projectKey: undefined })
+    )
+
+    await expect(
+      result.current.upload({
+        file: mockFile,
+        resourceType: 'product',
+        onSuccess: jest.fn(),
+      })
+    ).rejects.toThrow(ProjectKeyNotAvailableError)
+  })
+
+  it('should create container and upload file successfully', async () => {
+    const onSuccess = jest.fn()
+    const onProgress = jest.fn()
+
+    mockUploadFileForImport.mockImplementation(({ onSuccess: _onSuccess }) => {
+      _onSuccess(mockFileUploadResponse)
+      return mockXhr
+    })
+
+    const { result } = renderHook(() =>
+      useImportContainerUpload({ projectKey })
+    )
+
+    const uploadConfig: UseImportContainerUploadConfig = {
+      file: mockFile,
+      resourceType: 'product',
+      settings: { format: 'CSV' },
+      onSuccess,
+      onProgress,
+    }
+
+    await act(async () => {
+      await result.current.upload(uploadConfig)
+    })
+
+    expect(mockCreateImportContainerForFileUpload).toHaveBeenCalledWith({
+      importContainerDraft: {
+        key: importContainerKey,
+        resourceType: 'product',
+        tags: ['source:file-upload'],
+        settings: { format: 'CSV' },
+      },
+      projectKey,
+    })
+
+    expect(mockUploadFileForImport).toHaveBeenCalledWith({
+      projectKey,
+      importContainerKey,
+      resourceType: 'product',
+      file: mockFile,
+      onSuccess: expect.any(Function),
+      onProgress: expect.any(Function),
+      onError: expect.any(Function),
+    })
+
+    expect(onSuccess).toHaveBeenCalledWith(
+      mockFileUploadResponse,
+      importContainerKey
+    )
+  })
+
+  it('should delete container on upload error', async () => {
+    const onError = jest.fn()
+    const uploadError = new Error('Upload failed')
+
+    mockUploadFileForImport.mockImplementation(({ onError: _onError }) => {
+      _onError?.(uploadError)
+      return mockXhr
+    })
+
+    const { result } = renderHook(() =>
+      useImportContainerUpload({ projectKey })
+    )
+
+    await act(async () => {
+      await result.current.upload({
+        file: mockFile,
+        resourceType: 'product',
+        onSuccess: jest.fn(),
+        onError,
+      })
+    })
+
+    await waitFor(() => {
+      expect(mockDeleteImportContainer).toHaveBeenCalledWith({
+        projectKey,
+        importContainerKey,
+      })
+    })
+    expect(onError).toHaveBeenCalledWith(uploadError)
+  })
+
+  it('should delete container if upload throws before starting', async () => {
+    const onError = jest.fn()
+    const error = new Error('Container creation failed')
+    mockCreateImportContainerForFileUpload.mockRejectedValue(error)
+
+    const { result } = renderHook(() =>
+      useImportContainerUpload({ projectKey })
+    )
+
+    await act(async () => {
+      await result.current.upload({
+        file: mockFile,
+        resourceType: 'product',
+        onSuccess: jest.fn(),
+        onError,
+      })
+    })
+
+    await waitFor(() => {
+      expect(mockDeleteImportContainer).toHaveBeenCalledWith({
+        projectKey,
+        importContainerKey,
+      })
+    })
+    expect(onError).toHaveBeenCalledWith(error)
+  })
+
+  it('should update progress during upload', async () => {
+    const onProgress = jest.fn()
+
+    mockUploadFileForImport.mockImplementation(
+      ({ onProgress: _onProgress }) => {
+        _onProgress?.(50)
+        _onProgress?.(100)
+        return mockXhr
+      }
+    )
+
+    const { result } = renderHook(() =>
+      useImportContainerUpload({ projectKey })
+    )
+
+    await act(async () => {
+      await result.current.upload({
+        file: mockFile,
+        resourceType: 'product',
+        onSuccess: jest.fn(),
+        onProgress,
+      })
+    })
+
+    expect(onProgress).toHaveBeenCalledWith(50)
+    expect(onProgress).toHaveBeenCalledWith(100)
+  })
+
+  it('should update isUploading state correctly', async () => {
+    mockUploadFileForImport.mockImplementation(({ onSuccess }) => {
+      setTimeout(() => onSuccess(mockFileUploadResponse), 100)
+      return mockXhr
+    })
+
+    const { result } = renderHook(() =>
+      useImportContainerUpload({ projectKey })
+    )
+
+    expect(result.current.isUploading).toBe(false)
+
+    act(() => {
+      result.current.upload({
+        file: mockFile,
+        resourceType: 'product',
+        onSuccess: jest.fn(),
+      })
+    })
+
+    expect(result.current.isUploading).toBe(true)
+
+    await waitFor(() => {
+      expect(result.current.isUploading).toBe(false)
+    })
+  })
+
+  it('should abort upload when abort is called', async () => {
+    mockUploadFileForImport.mockReturnValue(mockXhr)
+
+    const { result } = renderHook(() =>
+      useImportContainerUpload({ projectKey })
+    )
+
+    act(() => {
+      result.current.upload({
+        file: mockFile,
+        resourceType: 'product',
+        onSuccess: jest.fn(),
+      })
+    })
+
+    await waitFor(() => {
+      expect(mockUploadFileForImport).toHaveBeenCalled()
+    })
+
+    act(() => {
+      result.current.abort()
+    })
+
+    expect(mockXhr.abort).toHaveBeenCalled()
+  })
+
+  it('should work without optional settings', async () => {
+    const onSuccess = jest.fn()
+
+    mockUploadFileForImport.mockImplementation(({ onSuccess: _onSuccess }) => {
+      _onSuccess(mockFileUploadResponse)
+      return mockXhr
+    })
+
+    const { result } = renderHook(() =>
+      useImportContainerUpload({ projectKey })
+    )
+
+    await act(async () => {
+      await result.current.upload({
+        file: mockFile,
+        resourceType: 'product',
+        onSuccess,
+      })
+    })
+
+    expect(mockCreateImportContainerForFileUpload).toHaveBeenCalledWith({
+      importContainerDraft: {
+        key: importContainerKey,
+        resourceType: 'product',
+        tags: ['source:file-upload'],
+      },
+      projectKey,
+    })
+
+    expect(onSuccess).toHaveBeenCalledWith(
+      mockFileUploadResponse,
+      importContainerKey
+    )
+  })
+})

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

@@ -0,0 +1,130 @@
+import React from 'react'
+import type { ResourceTypeId } from '@commercetools/importapi-sdk'
+import {
+  createImportContainerForFileUpload,
+  deleteImportContainer,
+  uploadFileForImport,
+} from '../@api'
+import { ProjectKeyNotAvailableError } from '../@errors'
+import { TAG_KEY_SOURCE_FILE_UPLOAD } from '../@constants'
+import { encodeFileNameWithTimestampToContainerKey } from '../@utils'
+import type {
+  FileUploadResponse,
+  ExtendedImportContainerDraft,
+} from '../@types'
+
+export type UseImportContainerUploadConfig = {
+  file: File
+  resourceType: ResourceTypeId
+  settings?: ExtendedImportContainerDraft['settings']
+  onSuccess: (response: FileUploadResponse, importContainerKey: string) => void
+  onError?: (error: unknown) => void
+  onProgress?: (progress: number) => void
+  abortSignal?: AbortSignal
+}
+
+export const useImportContainerUpload = ({
+  projectKey,
+}: {
+  projectKey: string
+}) => {
+  const [isUploading, setIsUploading] = React.useState(false)
+  const [progress, setProgress] = React.useState(0)
+  const xhrRef = React.useRef<XMLHttpRequest | null>(null)
+
+  const upload = async ({
+    file,
+    resourceType,
+    settings,
+    onSuccess,
+    onError,
+    onProgress,
+    abortSignal,
+  }: UseImportContainerUploadConfig): Promise<XMLHttpRequest | undefined> => {
+    if (!projectKey) {
+      throw new ProjectKeyNotAvailableError()
+    }
+
+    setIsUploading(true)
+    setProgress(0)
+
+    const importContainerKey = encodeFileNameWithTimestampToContainerKey(
+      file.name
+    )
+
+    try {
+      await createImportContainerForFileUpload({
+        importContainerDraft: {
+          key: importContainerKey,
+          resourceType,
+          tags: [TAG_KEY_SOURCE_FILE_UPLOAD],
+          ...(settings ? { settings } : {}),
+        },
+        projectKey,
+      })
+
+      const xhr = uploadFileForImport({
+        projectKey,
+        importContainerKey,
+        resourceType,
+        file,
+        abortSignal,
+        onSuccess: (response) => {
+          setIsUploading(false)
+          setProgress(100)
+          onSuccess(response, importContainerKey)
+        },
+        onProgress: (prog) => {
+          setProgress(prog)
+          onProgress?.(prog)
+        },
+        onError: async (error) => {
+          try {
+            await deleteImportContainer({
+              projectKey,
+              importContainerKey,
+            })
+          } catch {
+            // Ignore cleanup errors - container will be cleaned up by TTL retention policy
+            // Cleanup errors are unlikely unless there is a network issue or container was removed externally
+          }
+
+          setIsUploading(false)
+          setProgress(0)
+          onError?.(error)
+        },
+      })
+
+      xhrRef.current = xhr
+      return xhr
+    } catch (error) {
+      try {
+        await deleteImportContainer({
+          projectKey,
+          importContainerKey,
+        })
+      } catch {
+        // Ignore cleanup errors - container will be cleaned up by TTL retention policy
+        // Cleanup errors are unlikely unless there is a network issue or container was removed externally
+      }
+
+      setIsUploading(false)
+      setProgress(0)
+      onError?.(error)
+      return undefined
+    }
+  }
+
+  const abort = () => {
+    xhrRef.current?.abort()
+    setIsUploading(false)
+    setProgress(0)
+  }
+
+  return {
+    upload,
+    abort,
+    isUploading,
+    progress,
+  }
+}

package/src/@types/api.ts

@@ -0,0 +1,14 @@
+type METHOD = 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH'
+
+export type ApiConfig = {
+  headers?: Record<string, string | null>
+  method?: METHOD
+  proxy?: string
+  abortSignal?: AbortSignal
+}
+
+export type Fetcher = {
+  url: string
+  payload?: BodyInit
+  config?: ApiConfig
+}

package/src/@types/basic-error-data-type.ts

@@ -0,0 +1,5 @@
+export interface BasicErrorDataType {
+  message: string
+  code: string
+  [key: string]: unknown
+}