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

package/src/@components/upload-settings/upload-settings.tsx

@@ -0,0 +1,36 @@
+import type { ResourceTypeId } from '@commercetools/importapi-sdk'
+import { CheckboxInput } from '@commercetools-frontend/ui-kit'
+
+type UploadSettingsProps = {
+  resourceType?: ResourceTypeId
+  isPublishChecked?: boolean
+  onPublishChange: (checked: boolean) => void
+  publishProductsLabel: string
+  dataTrackingTarget: string
+  canPublishProducts?: boolean
+}
+
+export const UploadSettings = ({
+  resourceType,
+  isPublishChecked,
+  onPublishChange,
+  publishProductsLabel,
+  dataTrackingTarget,
+  canPublishProducts,
+}: UploadSettingsProps) => {
+  if (resourceType !== 'product' || !canPublishProducts) {
+    return null
+  }
+
+  return (
+    <CheckboxInput
+      data-tracking-target={dataTrackingTarget}
+      isChecked={isPublishChecked}
+      onChange={(e) => {
+        onPublishChange(e.target.checked)
+      }}
+    >
+      {publishProductsLabel}
+    </CheckboxInput>
+  )
+}

package/src/@components/uploading-modal/index.ts

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

package/src/@components/uploading-modal/uploading-modal.tsx

@@ -0,0 +1,66 @@
+import { InfoDialog } from '@commercetools-frontend/application-components'
+import {
+  Constraints,
+  ProgressBar,
+  SecondaryButton,
+  Spacings,
+  Text,
+} from '@commercetools-frontend/ui-kit'
+import { convertFileSizeToKB } from '../../@utils'
+import { FileIcon } from '../icons/file-icon'
+
+type UploadingModalProps = {
+  isOpen: boolean
+  title: string
+  fileName: string
+  fileSize: number
+  progress?: number
+  cancelLabel: string
+  onCancel: () => void
+  onClose: () => void
+  statusMessage?: string
+}
+
+export const UploadingModal = ({
+  isOpen,
+  title,
+  fileName,
+  fileSize,
+  progress,
+  cancelLabel,
+  onCancel,
+  onClose,
+  statusMessage,
+}: UploadingModalProps) => {
+  return (
+    <InfoDialog size={16} isOpen={isOpen} title={title} onClose={onClose}>
+      <Spacings.Stack scale="m">
+        <Spacings.Inline alignItems="center" justifyContent="space-between">
+          <Spacings.Inline alignItems="center">
+            <FileIcon />
+            <Spacings.Inline>
+              <Constraints.Horizontal max={10}>
+                <Text.Body truncate isBold>
+                  {fileName}
+                </Text.Body>
+              </Constraints.Horizontal>
+            </Spacings.Inline>
+            <Text.Body tone="secondary">
+              ({convertFileSizeToKB(fileSize).toLocaleString()} KB)
+            </Text.Body>
+          </Spacings.Inline>
+          <SecondaryButton
+            tone="secondary"
+            size="medium"
+            label={cancelLabel}
+            onClick={onCancel}
+          />
+        </Spacings.Inline>
+        <ProgressBar barWidth="scale" height="10" progress={progress} />
+        {statusMessage && (
+          <Text.Detail tone="tertiary">{statusMessage}</Text.Detail>
+        )}
+      </Spacings.Stack>
+    </InfoDialog>
+  )
+}

package/src/@constants/delimiters.ts

@@ -0,0 +1,14 @@
+export const DELIMITERS = {
+  COMMA: ',',
+  SEMICOLON: ';',
+  POINT: '.',
+  TAB: '\t',
+  PIPE: '|',
+}
+
+export const COLUMN_DELIMITERS = [
+  DELIMITERS.COMMA,
+  DELIMITERS.SEMICOLON,
+  DELIMITERS.PIPE,
+  DELIMITERS.TAB,
+]

package/src/@constants/file-import-job.ts

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

package/src/@constants/import-limits.ts

@@ -0,0 +1,13 @@
+export const IMPORT_MAX_FILE_SIZE_MB = 200
+
+export const IMPORT_MAX_ITEM_COUNT = 500_000
+
+// =============================================================================
+// Legacy constants (old flow) - Remove after testing and migration is complete
+// =============================================================================
+
+/** @deprecated Use IMPORT_MAX_FILE_SIZE_MB instead. Remove after migration. */
+export const IMPORT_LEGACY_MAX_FILE_SIZE_MB = 35
+
+/** @deprecated Use IMPORT_MAX_ITEM_COUNT instead. Remove after migration. */
+export const IMPORT_LEGACY_MAX_ROW_COUNT = 80_000

package/src/@constants/import-tags.ts

@@ -0,0 +1,9 @@
+export const IMPORT_TAG_KEYS = {
+  source: 'source',
+}
+
+export const IMPORT_TAG_VALUES = {
+  fileUpload: 'file-upload',
+}
+
+export const TAG_KEY_SOURCE_FILE_UPLOAD = `${IMPORT_TAG_KEYS.source}:${IMPORT_TAG_VALUES.fileUpload}`

package/src/@constants/index.ts

@@ -0,0 +1,5 @@
+export * from './delimiters'
+export * from './file-import-job'
+export * from './import-limits'
+export * from './import-tags'
+export * from './resource-links'

package/src/@constants/resource-links.ts

@@ -0,0 +1,61 @@
+import type { ResourceTypeId } from '@commercetools/importapi-sdk'
+
+/**
+ * CommerceTools API documentation base URL
+ */
+export const CT_API_DOCS_URL = 'https://docs.commercetools.com/api/'
+
+/**
+ * Template download links for each resource type
+ */
+export const RESOURCE_TYPE_TEMPLATE_DOWNLOAD_LINKS: Record<
+  ResourceTypeId,
+  string
+> = {
+  category:
+    'https://docs.commercetools.com/merchant-center/downloads/category_import_template.csv',
+  'custom-object':
+    'https://docs.commercetools.com/merchant-center/downloads/custom_object_import_template.json',
+  product:
+    'https://docs.commercetools.com/merchant-center/import-data#download-a-template',
+  'inventory-entry':
+    'https://docs.commercetools.com/merchant-center/downloads/inventory_entry_import_template.csv',
+  // TODO: remove `inventory` after aligning the resource type names in the Import API and Export API
+  inventory:
+    'https://docs.commercetools.com/merchant-center/downloads/inventory_entry_import_template.csv',
+  'discount-code':
+    'https://docs.commercetools.com/merchant-center/downloads/discount_code_import_template.csv',
+  customer:
+    'https://docs.commercetools.com/merchant-center/import-data#download-a-template',
+  order:
+    'https://docs.commercetools.com/merchant-center/import-data#download-a-template',
+  'product-type':
+    'https://docs.commercetools.com/merchant-center/downloads/product_type_import_template.csv',
+  'business-unit':
+    'https://docs.commercetools.com/merchant-center/downloads/business_unit_import_template.csv',
+}
+
+export const RESOURCE_TYPE_DOCUMENTATION_LINKS: Record<ResourceTypeId, string> =
+  {
+    category:
+      'https://docs.commercetools.com/merchant-center/import-categories#supported-headers-and-values',
+    'custom-object':
+      'https://docs.commercetools.com/merchant-center/import-custom-objects#supported-fields-and-values',
+    product:
+      'https://docs.commercetools.com/merchant-center/import-products#supported-headers-and-values',
+    'inventory-entry':
+      'https://docs.commercetools.com/merchant-center/import-inventory#supported-headers-and-values',
+    // TODO: remove `inventory` after aligning the resource type names in the Import API and Export API
+    inventory:
+      'https://docs.commercetools.com/merchant-center/import-inventory#supported-headers-and-values',
+    'discount-code':
+      'https://docs.commercetools.com/merchant-center/import-discount-codes#supported-headers-and-values',
+    customer:
+      'https://docs.commercetools.com/merchant-center/import-customers#supported-headers-and-values',
+    order:
+      'https://docs.commercetools.com/merchant-center/import-orders#supported-headers-and-values',
+    'product-type':
+      'https://docs.commercetools.com/merchant-center/import-product-types#supported-headers-and-values',
+    'business-unit':
+      'https://docs.commercetools.com/merchant-center/import-business-units#supported-headers-and-values',
+  }

package/src/@errors/http-error.ts

@@ -0,0 +1,17 @@
+import type { BasicErrorDataType } from '../@types'
+
+export class HttpError<T = BasicErrorDataType> extends Error {
+  readonly statusCode: number
+  readonly errorData?: T
+
+  constructor(statusCode: number, statusText?: string, errorData?: T) {
+    super(
+      `HTTP Error! Status code: ${statusCode}, message: "${
+        statusText ? statusText : ''
+      }"`
+    )
+    this.name = 'HttpError'
+    this.statusCode = statusCode
+    this.errorData = errorData
+  }
+}

package/src/@errors/index.ts

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

package/src/@errors/invalid-response-error.ts

@@ -0,0 +1,6 @@
+export class InvalidResponseError extends Error {
+  constructor(message: string) {
+    super(message)
+    this.name = 'InvalidResponseError'
+  }
+}

package/src/@errors/no-resources-to-export-error.ts

@@ -0,0 +1,6 @@
+export class NoResourcesToExportError extends Error {
+  constructor(message: string = 'There are no resources to export.') {
+    super(message)
+    this.name = 'NoResourcesToExportError'
+  }
+}

package/src/@errors/polling-aborted-error.ts

@@ -0,0 +1,6 @@
+export class PollingAbortedError extends Error {
+  constructor() {
+    super('Polling was aborted')
+    this.name = 'PollingAbortedError'
+  }
+}

package/src/@errors/project-key-not-available-error.ts

@@ -0,0 +1,6 @@
+export class ProjectKeyNotAvailableError extends Error {
+  constructor(message: string = 'Project key is not available') {
+    super(message)
+    this.name = 'ProjectKeyNotAvailableError'
+  }
+}

package/src/@errors/query-predicate-error.ts

@@ -0,0 +1,10 @@
+export class QueryPredicateError extends Error {
+  field = 'queryPredicate'
+
+  constructor(
+    message: string = 'There is an error with the query predicate. Make sure the syntax is correct.'
+  ) {
+    super(message)
+    this.name = 'QueryPredicateError'
+  }
+}

package/src/@errors/unexpected-column-error.ts

@@ -0,0 +1,6 @@
+export class UnexpectedColumnError extends Error {
+  constructor(columnName: string) {
+    super(`Unexpected column "${columnName}"`)
+    this.name = 'UnexpectedColumnError'
+  }
+}

package/src/@errors/unexpected-operation-state-error.ts

@@ -0,0 +1,8 @@
+import { ProcessingState } from '@commercetools/importapi-sdk'
+
+export class UnexpectedOperationStateError extends Error {
+  constructor(state: ProcessingState) {
+    super(`Unexpected operation state "${state}"`)
+    this.name = 'UnexpectedOperationStateError'
+  }
+}

package/src/@errors/unexpected-resource-type-error.ts

@@ -0,0 +1,6 @@
+export class UnexpectedResourceTypeError extends Error {
+  constructor(resourceType: string) {
+    super(`Unexpected resource type "${resourceType}"`)
+    this.name = 'UnexpectedResourceTypeError'
+  }
+}

package/src/@hooks/index.ts

@@ -0,0 +1,8 @@
+export * from './use-fetch-export-operations'
+export * from './use-fetch-file-import-job'
+export * from './use-fetch-import-container-details'
+export * from './use-fetch-import-operations'
+export * from './use-fetch-import-summaries'
+export * from './use-file-import-job-upload'
+export * from './use-file-upload'
+export * from './use-import-container-upload'

package/src/@hooks/use-fetch-export-operations.ts

@@ -0,0 +1,34 @@
+import React from 'react'
+import { fetchExportOperations } from '../@api'
+import { ProjectKeyNotAvailableError } from '../@errors'
+import type {
+  PaginatedExportOperationResponse,
+  ExportOperationQueryParams,
+} from '../@types'
+import { useFetch } from './use-fetch'
+
+type UseFetchExportOperationsConfig = {
+  projectKey: string
+  queryParams: ExportOperationQueryParams
+  pollingInterval?: number
+  shouldContinuePolling?: (data: PaginatedExportOperationResponse) => boolean
+}
+
+export const useFetchExportOperations = ({
+  projectKey,
+  queryParams,
+  pollingInterval,
+  shouldContinuePolling,
+}: UseFetchExportOperationsConfig) => {
+  const fetchData = React.useCallback(() => {
+    if (!projectKey) {
+      return Promise.reject(new ProjectKeyNotAvailableError())
+    }
+    return fetchExportOperations({ projectKey, queryParams })
+  }, [projectKey, queryParams])
+
+  return useFetch(fetchData, {
+    pollingInterval,
+    shouldContinuePolling,
+  })
+}

package/src/@hooks/use-fetch-file-import-job.spec.ts

@@ -0,0 +1,131 @@
+import { renderHook, waitFor } from '@testing-library/react'
+import { getFileImportJob } from '../@api'
+import { useFetchFileImportJob } from './use-fetch-file-import-job'
+import type { FileImportJob } from '../@types'
+
+jest.mock('@commercetools-frontend/sentry', () => ({
+  reportErrorToSentry: jest.fn(),
+}))
+jest.mock('../@api', () => ({
+  getFileImportJob: jest.fn(),
+}))
+
+const mockGetFileImportJob = getFileImportJob as jest.MockedFunction<
+  typeof getFileImportJob
+>
+
+describe('useFetchFileImportJob', () => {
+  const projectKey = 'test-with-big-data'
+  const resourceType = 'product'
+  const importContainerKey = 'test-container'
+  const jobId = 'test-job-id'
+
+  const mockJob: FileImportJob = {
+    id: jobId,
+    fileName: 'test.csv',
+    importContainerKey,
+    state: 'validated',
+    summary: {
+      total: 100,
+      invalid: 5,
+      valid: 95,
+      fieldsCount: 10,
+      fields: ['field1', 'field2'],
+      ignoredFields: [],
+    },
+  }
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('should fetch job details', async () => {
+    mockGetFileImportJob.mockResolvedValue(mockJob)
+
+    const { result } = renderHook(() =>
+      useFetchFileImportJob({
+        projectKey,
+        resourceType,
+        importContainerKey,
+        jobId,
+      })
+    )
+
+    await waitFor(() => {
+      expect(result.current.data).toEqual(mockJob)
+    })
+
+    expect(mockGetFileImportJob).toHaveBeenCalledWith({
+      projectKey,
+      resourceType,
+      importContainerKey,
+      jobId,
+    })
+  })
+
+  it('should handle errors', async () => {
+    const error = new Error('Failed to fetch job')
+    mockGetFileImportJob.mockRejectedValue(error)
+
+    const { result } = renderHook(() =>
+      useFetchFileImportJob({
+        projectKey,
+        resourceType,
+        importContainerKey,
+        jobId,
+      })
+    )
+
+    await waitFor(() => {
+      expect(result.current.error).toBeTruthy()
+    })
+  })
+
+  it('should pass polling config to useFetch', async () => {
+    mockGetFileImportJob.mockResolvedValue(mockJob)
+
+    const pollingInterval = 100
+    const shouldContinuePolling = jest.fn(
+      (data: typeof mockJob) => data.state !== 'validated'
+    )
+
+    const { result } = renderHook(() =>
+      useFetchFileImportJob({
+        projectKey,
+        resourceType,
+        importContainerKey,
+        jobId,
+        pollingInterval,
+        shouldContinuePolling,
+      })
+    )
+
+    await waitFor(() => {
+      expect(result.current.data).toEqual(mockJob)
+    })
+
+    expect(mockGetFileImportJob).toHaveBeenCalledWith({
+      projectKey,
+      resourceType,
+      importContainerKey,
+      jobId,
+    })
+  })
+
+  it('should throw ProjectKeyNotAvailableError when projectKey is empty', async () => {
+    const { result } = renderHook(() =>
+      useFetchFileImportJob({
+        projectKey: '',
+        resourceType,
+        importContainerKey,
+        jobId,
+      })
+    )
+
+    await waitFor(() => {
+      expect(result.current.error).toBeTruthy()
+    })
+
+    expect(result.current.error?.message).toBe('Project key is not available')
+  })
+})

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

@@ -0,0 +1,38 @@
+import React from 'react'
+import { getFileImportJob } from '../@api'
+import { ProjectKeyNotAvailableError } from '../@errors'
+import type { FileImportJob } from '../@types'
+import { useFetch } from './use-fetch'
+
+type UseFetchFileImportJobConfig = {
+  projectKey: string
+  resourceType: string
+  importContainerKey: string
+  jobId: string
+  pollingInterval?: number
+  shouldContinuePolling?: (data: FileImportJob) => boolean
+}
+
+export const useFetchFileImportJob = ({
+  projectKey,
+  importContainerKey,
+  jobId,
+  pollingInterval,
+  shouldContinuePolling,
+}: UseFetchFileImportJobConfig) => {
+  const fetchData = React.useCallback(() => {
+    if (!projectKey) {
+      return Promise.reject(new ProjectKeyNotAvailableError())
+    }
+    return getFileImportJob({
+      projectKey,
+      importContainerKey,
+      jobId,
+    })
+  }, [projectKey, importContainerKey, jobId])
+
+  return useFetch(fetchData, {
+    pollingInterval,
+    shouldContinuePolling,
+  })
+}

package/src/@hooks/use-fetch-import-container-details.ts

@@ -0,0 +1,31 @@
+import React from 'react'
+import { fetchImportContainerDetails } from '../@api'
+import { ProjectKeyNotAvailableError } from '../@errors'
+import { useFetch } from './use-fetch'
+import { type ImportContainerDetails } from '../@types'
+
+type UseFetchImportContainerDetailsConfig = {
+  projectKey: string
+  importContainerKey: string
+  pollingInterval?: number
+  shouldContinuePolling?: (data: ImportContainerDetails) => boolean
+}
+
+export const useFetchImportContainerDetails = ({
+  projectKey,
+  importContainerKey,
+  pollingInterval,
+  shouldContinuePolling,
+}: UseFetchImportContainerDetailsConfig) => {
+  const fetchData = React.useCallback(() => {
+    if (!projectKey) {
+      return Promise.reject(new ProjectKeyNotAvailableError())
+    }
+    return fetchImportContainerDetails({ projectKey, importContainerKey })
+  }, [projectKey, importContainerKey])
+
+  return useFetch(fetchData, {
+    pollingInterval,
+    shouldContinuePolling,
+  })
+}

package/src/@hooks/use-fetch-import-operations.ts

@@ -0,0 +1,42 @@
+import React from 'react'
+import { fetchImportOperations } from '../@api'
+import { ProjectKeyNotAvailableError } from '../@errors'
+import type {
+  ExtendedImportOperationPagedResponse,
+  ImportOperationQueryParams,
+} from '../@types'
+import { useFetch } from './use-fetch'
+
+type UseFetchImportOperationsConfig = {
+  projectKey: string
+  importContainerKey: string
+  queryParams: ImportOperationQueryParams
+  pollingInterval?: number
+  shouldContinuePolling?: (
+    data: ExtendedImportOperationPagedResponse
+  ) => boolean
+}
+
+export const useFetchImportOperations = ({
+  projectKey,
+  importContainerKey,
+  queryParams,
+  pollingInterval,
+  shouldContinuePolling,
+}: UseFetchImportOperationsConfig) => {
+  const fetchData = React.useCallback(() => {
+    if (!projectKey) {
+      return Promise.reject(new ProjectKeyNotAvailableError())
+    }
+    return fetchImportOperations({
+      projectKey,
+      importContainerKey,
+      queryParams,
+    })
+  }, [projectKey, importContainerKey, queryParams])
+
+  return useFetch(fetchData, {
+    pollingInterval,
+    shouldContinuePolling,
+  })
+}

package/src/@hooks/use-fetch-import-summaries.ts

@@ -0,0 +1,47 @@
+import React from 'react'
+import { fetchImportSummaries } from '../@api'
+import { ProjectKeyNotAvailableError } from '../@errors'
+import type {
+  ImportContainerQueryParams,
+  ImportContainerDetails,
+} from '../@types'
+import { useFetch } from './use-fetch'
+
+export type ImportSummariesResult = {
+  results: ImportContainerDetails[]
+  count: number
+  total: number
+}
+
+type UseFetchImportSummariesConfig = {
+  projectKey: string
+  queryParams: ImportContainerQueryParams
+  pollingInterval?: number
+  shouldContinuePolling?: (data: ImportSummariesResult) => boolean
+}
+
+export const useFetchImportSummaries = ({
+  projectKey,
+  queryParams,
+  pollingInterval,
+  shouldContinuePolling,
+}: UseFetchImportSummariesConfig) => {
+  const fetchData =
+    React.useCallback(async (): Promise<ImportSummariesResult> => {
+      if (!projectKey) {
+        return Promise.reject(new ProjectKeyNotAvailableError())
+      }
+      const summary = await fetchImportSummaries({ projectKey, queryParams })
+      const resolvedResults = await Promise.all(summary.results)
+      return {
+        results: resolvedResults,
+        count: summary.count,
+        total: summary.total,
+      }
+    }, [projectKey, queryParams])
+
+  return useFetch<ImportSummariesResult>(fetchData, {
+    pollingInterval,
+    shouldContinuePolling,
+  })
+}