@commercetools-frontend-extensions/operations 0.0.0

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

@@ -0,0 +1,64 @@
+import { useIntl } from 'react-intl'
+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
+}
+
+export const UploadingModal = ({
+  isOpen,
+  title,
+  fileName,
+  fileSize,
+  progress,
+  cancelLabel,
+  onCancel,
+  onClose,
+}: UploadingModalProps) => {
+  const intl = useIntl()
+  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">
+              ({intl.formatNumber(convertFileSizeToKB(fileSize))} KB)
+            </Text.Body>
+          </Spacings.Inline>
+          <SecondaryButton
+            tone="secondary"
+            size="medium"
+            label={cancelLabel}
+            onClick={onCancel}
+          />
+        </Spacings.Inline>
+        <ProgressBar barWidth="scale" height="10" progress={progress} />
+        <div />
+      </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/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,4 @@
+export * from './delimiters'
+export * from './import-tags'
+export * from './resource-links'
+export * from './upload-limits'

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/@constants/upload-limits.ts

@@ -0,0 +1,11 @@
+/**
+ * Maximum file size for imports.
+ * Recommended by backend, enforced in frontend validation.
+ */
+export const MAX_FILE_SIZE_MB = 35
+
+/**
+ * Maximum row count for imports.
+ * Recommended by backend, enforced in frontend validation.
+ */
+export const MAX_ROW_COUNT = 80_000

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,8 @@
+export * from './unexpected-column-error'
+export * from './unexpected-operation-state-error'
+export * from './unexpected-resource-type-error'
+export * from './http-error'
+export * from './invalid-response-error'
+export * from './query-predicate-error'
+export * from './no-resources-to-export-error'
+export * from './project-key-not-available-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/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,5 @@
+export * from './use-fetch-export-operations'
+export * from './use-fetch-import-container-details'
+export * from './use-fetch-import-operations'
+export * from './use-fetch-import-summaries'
+export * from './use-import-container-upload'

package/src/@hooks/messages.ts

@@ -0,0 +1,11 @@
+import { defineMessages } from 'react-intl'
+
+export default defineMessages({
+  unexpectedError: {
+    id: 'operations.fetch.unexpectedError',
+    description:
+      'Generic error message displayed when an unexpected error occurs during data fetching',
+    defaultMessage:
+      'An unexpected error occurred while fetching the data. Please try again. If the problem persists, please contact support.',
+  },
+})

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-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,
+  })
+}

package/src/@hooks/use-fetch.spec.ts

@@ -0,0 +1,76 @@
+import { renderHook, act, waitFor } from '@testing-library/react'
+import { useIntl } from 'react-intl'
+import { HttpError } from '../@errors'
+import { useFetch } from './use-fetch'
+
+jest.mock('react-intl', () => ({
+  useIntl: jest.fn(),
+  defineMessages: jest.fn(),
+}))
+jest.mock('@commercetools-frontend/sentry', () => ({
+  reportErrorToSentry: jest.fn(),
+}))
+
+describe('useFetch', () => {
+  const mockIntl = {
+    formatMessage: jest.fn((message) => message.defaultMessage),
+  }
+  const mockFetchFunction = jest.fn()
+  beforeEach(() => {
+    ;(useIntl as jest.Mock).mockReturnValue(mockIntl)
+    jest.clearAllMocks()
+  })
+  it('should fetch data successfully', async () => {
+    const data = { data: 'some data' }
+    mockFetchFunction.mockResolvedValueOnce(data)
+    const { result } = renderHook(() => useFetch(mockFetchFunction, {}))
+    expect(result.current.isLoading).toBe(true)
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false)
+    })
+
+    expect(result.current.data).toEqual(data)
+    expect(result.current.error).toBeNull()
+  })
+  it('should handle HttpError', async () => {
+    const error = new HttpError(500, 'Http error')
+    mockFetchFunction.mockRejectedValueOnce(error)
+    const { result } = renderHook(() => useFetch(mockFetchFunction, {}))
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false)
+    })
+    expect(result.current.data).toBeNull()
+    expect(result.current.error).toEqual(error)
+  })
+  it('should refetch data', async () => {
+    const data = { data: 'some data' }
+    mockFetchFunction.mockResolvedValueOnce(data)
+    const { result } = renderHook(() => useFetch(mockFetchFunction, {}))
+    await waitFor(() => {
+      expect(result.current.data).toEqual(data)
+    })
+    const newData = { data: 'new data' }
+    mockFetchFunction.mockResolvedValueOnce(newData)
+    act(() => {
+      result.current.refetch()
+    })
+    await waitFor(() => {
+      expect(result.current.data).toEqual(newData)
+    })
+  })
+  it('should handle polling', async () => {
+    const data = { data: 'some data' }
+    mockFetchFunction.mockResolvedValue(data)
+    const { result } = renderHook(() =>
+      useFetch(mockFetchFunction, { pollingInterval: 50 })
+    )
+    await waitFor(() => {
+      expect(result.current.data).toEqual(data)
+    })
+    const newData = { data: 'new data' }
+    mockFetchFunction.mockResolvedValue(newData)
+    await waitFor(() => {
+      expect(result.current.data).toEqual(newData)
+    })
+  })
+})

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

@@ -0,0 +1,80 @@
+import React from 'react'
+import { useIntl } from 'react-intl'
+import { reportErrorToSentry } from '@commercetools-frontend/sentry'
+import { HttpError } from '../@errors'
+import messages from './messages'
+
+export const useFetch = <Data>(
+  fetchFunction: () => Promise<Data>,
+  config: {
+    pollingInterval?: number
+    shouldContinuePolling?: (data: Data) => boolean
+  } = {}
+) => {
+  const intl = useIntl()
+  const [data, setData] = React.useState<Data | null>(null)
+  const [error, setError] = React.useState<Error | null>(null)
+  const [isLoading, setIsLoading] = React.useState(false)
+  const [refetchCount, setRefetchCount] = React.useState(0)
+  const [lastFetchTime, setLastFetchTime] = React.useState<Date>(new Date())
+
+  const refetch = React.useCallback(() => {
+    setRefetchCount((count) => count + 1)
+  }, [])
+
+  React.useEffect(() => {
+    let pollingId: NodeJS.Timeout | null = null
+    const fetchData = async () => {
+      setIsLoading(true)
+      try {
+        const response = await fetchFunction()
+        setData(response)
+        setLastFetchTime(new Date())
+        if (
+          config.shouldContinuePolling &&
+          !config.shouldContinuePolling(response)
+        ) {
+          if (pollingId) {
+            clearInterval(pollingId)
+            pollingId = null
+          }
+        }
+      } catch (err) {
+        if (err instanceof HttpError) {
+          setError(err)
+        } else {
+          setError(new Error(intl.formatMessage(messages.unexpectedError)))
+          reportErrorToSentry(
+            new Error('An unexpected error occurred in the `useFetch` hook'),
+            {
+              extra: {
+                error: err,
+              },
+            }
+          )
+        }
+      } finally {
+        setIsLoading(false)
+      }
+    }
+    fetchData()
+    if (config.pollingInterval && config.pollingInterval > 0) {
+      pollingId = setInterval(fetchData, config.pollingInterval)
+    }
+    return () => {
+      if (pollingId) {
+        clearInterval(pollingId)
+      }
+      setError(null)
+      setIsLoading(false)
+    }
+  }, [
+    fetchFunction,
+    refetchCount,
+    intl,
+    config.pollingInterval,
+    config.shouldContinuePolling,
+  ])
+
+  return { data, error, isLoading, refetch, lastFetchTime }
+}