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

package/src/@api/urls.ts

@@ -0,0 +1,194 @@
+import type { ResourceTypeId } from '@commercetools/importapi-sdk'
+import { plural } from 'pluralize'
+import { formatQueryString, toImportApiResourceType } from '../@utils'
+import type {
+  ImportContainerQueryParams,
+  ExportOperationQueryParams,
+} from '../@types'
+
+export function getImportContainersURL({
+  projectKey,
+  queryParams,
+}: {
+  projectKey: string
+  queryParams: ImportContainerQueryParams
+}): string {
+  const queryString = formatQueryString(queryParams)
+  return `/${projectKey}/import-containers${queryString}`
+}
+
+export function getImportOperationsURL({
+  projectKey,
+  importContainerKey,
+  queryParams,
+}: {
+  projectKey: string
+  importContainerKey: string
+  queryParams?: ImportContainerQueryParams
+}): string {
+  const queryString = formatQueryString(queryParams)
+  return `/${projectKey}/import-containers/${importContainerKey}/import-operations${queryString}&debug=true`
+}
+
+export function getImportContainerByKeyURL({
+  projectKey,
+  importContainerKey,
+}: {
+  projectKey: string
+  importContainerKey: string
+}): string {
+  return `/${projectKey}/import-containers/${importContainerKey}`
+}
+
+export function getCreateImportContainerURL({
+  projectKey,
+}: {
+  projectKey: string
+}): string {
+  return `/${projectKey}/import-containers`
+}
+
+export function getImportContainerTasksURL({
+  projectKey,
+  importContainerKey,
+}: {
+  projectKey: string
+  importContainerKey: string
+}): string {
+  return `/${projectKey}/import-containers/${importContainerKey}/tasks`
+}
+
+export function getDeleteImportContainerURL({
+  projectKey,
+  importContainerKey,
+}: {
+  projectKey: string
+  importContainerKey: string
+}): string {
+  return `/${projectKey}/import-containers/${importContainerKey}`
+}
+
+export function getImportSummaryURL({
+  projectKey,
+  importContainerKey,
+}: {
+  projectKey: string
+  importContainerKey: string
+}): string {
+  return `/${projectKey}/import-containers/${importContainerKey}/import-summaries`
+}
+
+export function getFileUploadURL({
+  projectKey,
+  resourceType,
+  importContainerKey,
+}: {
+  projectKey: string
+  resourceType: ResourceTypeId
+  importContainerKey: string
+}): string {
+  return `/${projectKey}/${plural(
+    resourceType
+  )}/import-containers/${importContainerKey}/file-upload`
+}
+
+export function getProccessFileURL({
+  projectKey,
+  resourceType,
+  importContainerKey,
+}: {
+  projectKey: string
+  resourceType: ResourceTypeId
+  importContainerKey: string
+}): string {
+  return `/${projectKey}/${plural(
+    resourceType
+  )}/import-containers/${importContainerKey}/process-file`
+}
+
+export function getExportOperationsURL({
+  projectKey,
+  queryParams,
+}: {
+  projectKey: string
+  queryParams: ExportOperationQueryParams
+}): string {
+  const queryString = formatQueryString(queryParams)
+  return `/${projectKey}/export-operations${queryString}`
+}
+
+export function getFileImportJobsURL({
+  projectKey,
+  resourceType,
+  importContainerKey,
+}: {
+  projectKey: string
+  resourceType: string
+  importContainerKey: string
+}): string {
+  return `/${projectKey}/${plural(
+    toImportApiResourceType(resourceType)
+  )}/import-containers/${importContainerKey}/file-import-jobs`
+}
+
+export function getFileImportJobByIdURL({
+  projectKey,
+  importContainerKey,
+  jobId,
+}: {
+  projectKey: string
+  importContainerKey: string
+  jobId: string
+}): string {
+  return `/${projectKey}/import-containers/${importContainerKey}/file-import-jobs/${jobId}`
+}
+
+export function getFileImportJobRecordsURL({
+  projectKey,
+  importContainerKey,
+  jobId,
+}: {
+  projectKey: string
+  importContainerKey: string
+  jobId: string
+}): string {
+  return `/${projectKey}/import-containers/${importContainerKey}/file-import-jobs/${jobId}/records`
+}
+
+export function getFileImportJobProcessURL({
+  projectKey,
+  resourceType,
+  importContainerKey,
+  jobId,
+}: {
+  projectKey: string
+  resourceType: string
+  importContainerKey: string
+  jobId: string
+}): string {
+  return `/${projectKey}/${plural(
+    toImportApiResourceType(resourceType)
+  )}/import-containers/${importContainerKey}/file-import-jobs/${jobId}/process`
+}
+
+export function getFileImportJobDeleteURL({
+  projectKey,
+  importContainerKey,
+  jobId,
+}: {
+  projectKey: string
+  importContainerKey: string
+  jobId: string
+}): string {
+  return `/${projectKey}/import-containers/${importContainerKey}/file-import-jobs/${jobId}`
+}
+
+export function getFileImportJobsListURL({
+  projectKey,
+  importContainerKey,
+}: {
+  projectKey: string
+  importContainerKey: string
+}): string {
+  return `/${projectKey}/import-containers/${importContainerKey}/file-import-jobs`
+}

package/src/@components/file-drop-area/active-drag-drop-area.tsx

@@ -0,0 +1,33 @@
+import { EnabledDropArea } from './enabled-drop-area'
+import { FileDroppedArea } from './file-dropped-area'
+
+interface ActiveDragDropAreaProps {
+  isFileDropped: boolean
+  fileName?: string
+  chooseFileLabel: string
+  dragAndDropText: string
+  orText: string
+  browseFileText: string
+}
+
+export const ActiveDragDropArea = ({
+  isFileDropped,
+  fileName,
+  chooseFileLabel,
+  dragAndDropText,
+  orText,
+  browseFileText,
+}: ActiveDragDropAreaProps) => {
+  if (isFileDropped) {
+    return (
+      <FileDroppedArea fileName={fileName} chooseFileLabel={chooseFileLabel} />
+    )
+  }
+  return (
+    <EnabledDropArea
+      dragAndDropText={dragAndDropText}
+      orText={orText}
+      browseFileText={browseFileText}
+    />
+  )
+}

package/src/@components/file-drop-area/disabled-drop-area.tsx

@@ -0,0 +1,17 @@
+import { Spacings, Text } from '@commercetools-frontend/ui-kit'
+import { LockIcon } from '../icons/lock-icon'
+
+type DisabledDropAreaProps = {
+  disabledMessage?: string
+}
+
+export const DisabledDropArea = ({
+  disabledMessage,
+}: DisabledDropAreaProps) => {
+  return (
+    <Spacings.Stack alignItems="center">
+      <LockIcon />
+      {disabledMessage && <Text.Body>{disabledMessage}</Text.Body>}
+    </Spacings.Stack>
+  )
+}

package/src/@components/file-drop-area/drop-area-wrapper.tsx

@@ -0,0 +1,38 @@
+import type { DropzoneRootProps } from 'react-dropzone'
+import { css } from '@emotion/react'
+import styled from '@emotion/styled'
+import { dropAreaStyles } from './styles'
+import type { DropAreaState } from '../../@types'
+
+interface DropWrapperProps extends DropzoneRootProps {
+  dropAreaState: DropAreaState
+}
+
+export const DropAreaWrapper = styled.div<DropWrapperProps>`
+  ${dropAreaStyles.base}
+  ${(props) => {
+    if (props.dropAreaState === 'disabled') {
+      return dropAreaStyles.disabled
+    }
+    if (props.dropAreaState === 'ready-for-drop') {
+      return dropAreaStyles.readyForDrop
+    }
+    if (props.dropAreaState === 'active-drag') {
+      return dropAreaStyles.activeDrag
+    }
+    if (props.dropAreaState === 'invalid') {
+      return dropAreaStyles.invalid
+    }
+    if (props.dropAreaState === 'is-parsing') {
+      return dropAreaStyles.parsing
+    }
+    if (props.dropAreaState === 'file-dropped') {
+      return dropAreaStyles.fileDropped
+    }
+    return getDefaultDropWrapperStyles(props.dropAreaState)
+  }}
+`
+
+function getDefaultDropWrapperStyles(_dropAreaState: DropAreaState) {
+  return css``
+}

package/src/@components/file-drop-area/enabled-drop-area.tsx

@@ -0,0 +1,27 @@
+import { Link, Spacings, Text } from '@commercetools-frontend/ui-kit'
+import { FileIcon } from '../icons/file-icon'
+
+type EnabledDropAreaProps = {
+  dragAndDropText: string
+  orText: string
+  browseFileText: string
+}
+
+export const EnabledDropArea = ({
+  dragAndDropText,
+  orText,
+  browseFileText,
+}: EnabledDropAreaProps) => {
+  return (
+    <Spacings.Inline alignItems="center" justifyContent="center" scale="s">
+      <FileIcon />
+      <Spacings.Inline alignItems="center" scale="s">
+        <Text.Subheadline as="h4">{dragAndDropText}</Text.Subheadline>
+        <Text.Body>{orText}</Text.Body>
+        <Link tone="secondary" to="" onClick={(ev) => ev.preventDefault()}>
+          {browseFileText}
+        </Link>
+      </Spacings.Inline>
+    </Spacings.Inline>
+  )
+}

package/src/@components/file-drop-area/file-drop-area.tsx

@@ -0,0 +1,74 @@
+import React from 'react'
+import type { Accept, DropEvent, FileRejection } from 'react-dropzone'
+import { useDropzone } from 'react-dropzone'
+import { Constraints } from '@commercetools-frontend/ui-kit'
+import { DropAreaWrapper } from './drop-area-wrapper'
+import type { DropAreaState } from '../../@types'
+
+type OnDrop = <T extends File>(
+  acceptedFiles: T[],
+  fileRejections: FileRejection[],
+  event: DropEvent
+) => void
+
+type FileDropAreaProps = {
+  onDrop: OnDrop
+  disabled?: boolean
+  accept: Accept
+  getDropAreaState: (isDragActive: boolean) => DropAreaState
+  children: (dropAreaState: DropAreaState) => React.ReactNode
+  onDropRejected?: (
+    errorType: 'too-many-files' | 'invalid-type' | 'generic'
+  ) => void
+}
+
+export const FileDropArea = ({
+  onDrop,
+  disabled,
+  accept,
+  getDropAreaState,
+  children,
+  onDropRejected: handleDropRejected,
+}: FileDropAreaProps) => {
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    onDrop,
+    multiple: false,
+    disabled,
+    accept,
+    onDropRejected: ([rejectedFile]: FileRejection[]) => {
+      if (!handleDropRejected) return
+
+      if (
+        rejectedFile?.errors.some(
+          (error: { code: string }) => error.code === 'too-many-files'
+        )
+      ) {
+        handleDropRejected('too-many-files')
+        return
+      }
+
+      if (
+        rejectedFile?.errors.some(
+          (error: { code: string }) => error.code === 'file-invalid-type'
+        )
+      ) {
+        handleDropRejected('invalid-type')
+      } else {
+        handleDropRejected('generic')
+      }
+    },
+  })
+
+  const dropAreaState = getDropAreaState(isDragActive)
+
+  return (
+    <DropAreaWrapper
+      role="presentation"
+      {...getRootProps()}
+      dropAreaState={dropAreaState}
+    >
+      <input data-testid="file-input" {...getInputProps()} />
+      <Constraints.Horizontal>{children(dropAreaState)}</Constraints.Horizontal>
+    </DropAreaWrapper>
+  )
+}

package/src/@components/file-drop-area/file-dropped-area.tsx

@@ -0,0 +1,29 @@
+import {
+  Constraints,
+  PaperclipIcon,
+  SecondaryButton,
+  Spacings,
+  Text,
+} from '@commercetools-frontend/ui-kit'
+
+type FileDroppedAreaProps = {
+  fileName?: string
+  chooseFileLabel: string
+}
+
+export const FileDroppedArea = ({
+  fileName,
+  chooseFileLabel,
+}: FileDroppedAreaProps) => {
+  return (
+    <Spacings.Stack alignItems="center" scale="s">
+      <Spacings.Inline alignItems="flex-start" scale="xs">
+        <PaperclipIcon color="neutral60" />
+        <Constraints.Horizontal max={13}>
+          <Text.Body>{fileName}</Text.Body>
+        </Constraints.Horizontal>
+      </Spacings.Inline>
+      <SecondaryButton tone="secondary" size="medium" label={chooseFileLabel} />
+    </Spacings.Stack>
+  )
+}

package/src/@components/file-drop-area/index.ts

@@ -0,0 +1,7 @@
+export * from './active-drag-drop-area'
+export * from './disabled-drop-area'
+export * from './drop-area-wrapper'
+export * from './enabled-drop-area'
+export * from './file-drop-area'
+export * from './file-dropped-area'
+export * from './styles'

package/src/@components/file-drop-area/styles.ts

@@ -0,0 +1,67 @@
+import { customProperties } from '@commercetools-frontend/ui-kit'
+import { css } from '@emotion/react'
+
+type DropAreaState = 'default' | 'error' | 'active'
+
+const getBorderColor = (state: DropAreaState) => {
+  const borderColors = {
+    default: '#909dbc',
+    error: '#e60050',
+    active: customProperties.colorPrimary,
+  }
+
+  return borderColors[state] || borderColors.default
+}
+
+const getDashedBorder = (state: DropAreaState = 'default') => {
+  const color = getBorderColor(state)
+  const svgContent = `
+    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
+      <rect width="100%" height="100%" fill="none" stroke="${color}" stroke-width="2px" stroke-dasharray="6,6" stroke-dashoffset="0" stroke-linecap="square"/>
+    </svg>
+  `
+  return `data:image/svg+xml,${encodeURIComponent(svgContent)}`
+}
+
+const base = css`
+  border-radius: ${customProperties.borderRadius6};
+  min-height: 136px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`
+const disabled = css``
+const readyForDrop = css`
+  background-image: url('${getDashedBorder()}');
+  background-color: ${customProperties.colorSurface};
+`
+const activeDrag = css`
+  background-image: url('${getDashedBorder('active')}');
+  background-color: ${customProperties.colorPrimary95};
+  padding: ${customProperties.spacing50} 100px;
+`
+const fileDropped = css`
+  background-image: url('${getDashedBorder()}');
+  background-color: ${customProperties.colorSurface};
+  padding: ${customProperties.spacing50} 100px;
+`
+const invalid = css`
+  background-image: url('${getDashedBorder('default')}');
+  background-color: ${customProperties.colorSurface};
+  padding: ${customProperties.spacing70} 100px;
+`
+const parsing = css`
+  background-image: url('${getDashedBorder()}');
+  background-color: ${customProperties.colorSurface};
+  padding: ${customProperties.spacing50} 100px;
+`
+
+export const dropAreaStyles = {
+  base,
+  readyForDrop,
+  fileDropped,
+  disabled,
+  activeDrag,
+  invalid,
+  parsing,
+}

package/src/@components/icons/file-icon.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+
+export const FileIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg
+    width="32"
+    height="32"
+    viewBox="0 0 32 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <mask
+      id="mask0_17_6643"
+      style={{ maskType: 'alpha' }}
+      maskUnits="userSpaceOnUse"
+      x="0"
+      y="0"
+      width="32"
+      height="32"
+    >
+      <rect width="32" height="32" fill="#D9D9D9" />
+    </mask>
+    <g mask="url(#mask0_17_6643)">
+      <path
+        d="M14.6667 25.3333H17.3333V19.7667L19.4667 21.9L21.3333 20L16 14.6667L10.6667 20L12.5667 21.8667L14.6667 19.7667V25.3333ZM8 29.3333C7.26667 29.3333 6.63889 29.0722 6.11667 28.55C5.59444 28.0278 5.33333 27.4 5.33333 26.6667V5.33332C5.33333 4.59999 5.59444 3.97221 6.11667 3.44999C6.63889 2.92777 7.26667 2.66666 8 2.66666H18.6667L26.6667 10.6667V26.6667C26.6667 27.4 26.4056 28.0278 25.8833 28.55C25.3611 29.0722 24.7333 29.3333 24 29.3333H8ZM17.3333 12H24L17.3333 5.33332V12Z"
+        fill="#B1ACFF"
+      />
+    </g>
+  </svg>
+)

package/src/@components/icons/index.ts

@@ -0,0 +1,2 @@
+export * from './file-icon'
+export * from './lock-icon'

package/src/@components/icons/lock-icon.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+
+export const LockIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg
+    width="87px"
+    height="118px"
+    viewBox="0 0 87 118"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    {...props}
+  >
+    <title>Shape</title>
+    <g
+      id="Final-ImportBoard"
+      stroke="none"
+      strokeWidth="1"
+      fill="none"
+      fillRule="evenodd"
+    >
+      <g
+        id="2-Upload-files---Locked"
+        transform="translate(-697.000000, -285.000000)"
+        fill="#999999"
+        fillRule="nonzero"
+      >
+        <path
+          d="M781.167075,334.924997 L774.342717,334.924997 L774.342717,319.039771 C774.342717,300.267972 759.042508,285 740.22093,285 C721.403902,285 706.099143,300.267972 706.099143,319.039771 L706.099143,334.924997 L699.274786,334.924997 C698.019104,334.924997 697,335.941652 697,337.194315 L697,389.184392 C697,389.974114 697.414011,390.709373 698.087348,391.122389 C710.839797,398.892534 725.407525,403 740.22093,403 C755.034335,403 769.602064,398.892534 782.359062,391.122389 C783.027849,390.709373 783.44186,389.974114 783.44186,389.184392 L783.44186,337.194315 C783.44186,335.941652 782.418207,334.924997 781.167075,334.924997 Z M745.590495,368.913821 L745.590495,384.782392 C745.590495,386.353821 744.382343,387.639535 742.905713,387.639535 L737.536148,387.639535 C736.054148,387.639535 734.851365,386.353821 734.851365,384.782392 L734.851365,368.913821 C731.651104,366.930963 729.4818,363.296678 729.4818,359.068106 C729.4818,352.759535 734.29293,347.639535 740.22093,347.639535 C746.14893,347.639535 750.960061,352.759535 750.960061,359.068106 C750.960061,363.285249 748.790756,366.930963 745.590495,368.913821 Z M760.116279,334.395349 L718.953488,334.395349 L718.953488,318.787791 C718.953488,307.724262 728.187674,298.72093 739.534884,298.72093 C750.877519,298.72093 760.116279,307.724262 760.116279,318.787791 L760.116279,334.395349 Z"
+          id="Shape"
+        ></path>
+      </g>
+    </g>
+  </svg>
+)

package/src/@components/index.ts

@@ -0,0 +1,6 @@
+export * from './file-drop-area'
+export * from './icons'
+export * from './info-box'
+export * from './upload-separator'
+export * from './upload-settings'
+export * from './uploading-modal'

package/src/@components/info-box/index.ts

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

package/src/@components/info-box/info-box.tsx

@@ -0,0 +1,23 @@
+import {
+  ContentNotification,
+  Spacings,
+  Text,
+} from '@commercetools-frontend/ui-kit'
+
+type InfoBoxProps = {
+  title: string
+  description: React.ReactNode
+}
+
+export const InfoBox = ({ title, description }: InfoBoxProps) => {
+  return (
+    <ContentNotification type="info">
+      <Spacings.Inset scale="xs">
+        <Spacings.Stack scale="xs">
+          <Text.Subheadline as="h4">{title}</Text.Subheadline>
+          <Text.Body>{description}</Text.Body>
+        </Spacings.Stack>
+      </Spacings.Inset>
+    </ContentNotification>
+  )
+}

package/src/@components/upload-separator/index.ts

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

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

@@ -0,0 +1,61 @@
+import { SelectField, Spacings, Text } from '@commercetools-frontend/ui-kit'
+import { css } from '@emotion/react'
+import { DELIMITERS } from '../../@constants'
+import type { DecimalSeparator } from '../../@types'
+
+type UploadSeparatorProps = {
+  value?: DecimalSeparator
+  onChange: (decimalSeparator: DecimalSeparator) => void
+  separatorTitle: string
+  decimalsSeparatorDescription: string
+  decimalSeparatorPointLabel: string
+  decimalSeparatorCommaLabel: string
+  decimalsLabel: string
+}
+
+export const UploadSeparator = ({
+  value,
+  onChange,
+  separatorTitle,
+  decimalsSeparatorDescription,
+  decimalSeparatorPointLabel,
+  decimalSeparatorCommaLabel,
+  decimalsLabel,
+}: UploadSeparatorProps) => {
+  const decimalSeparatorOptions = [
+    {
+      label: decimalSeparatorPointLabel,
+      value: DELIMITERS.POINT,
+    },
+    {
+      label: decimalSeparatorCommaLabel,
+      value: DELIMITERS.COMMA,
+    },
+  ]
+
+  return (
+    <Spacings.Stack scale="m">
+      <div>
+        <Text.Subheadline as="h4">{separatorTitle}</Text.Subheadline>
+        <Text.Caption tone="tertiary">
+          {decimalsSeparatorDescription}
+        </Text.Caption>
+      </div>
+      <div
+        css={css`
+          width: calc(50% - 16px);
+        `}
+      >
+        <SelectField
+          title={decimalsLabel}
+          isSearchable={false}
+          options={decimalSeparatorOptions}
+          value={value}
+          onChange={(e) => {
+            onChange(e.target.value as DecimalSeparator)
+          }}
+        />
+      </div>
+    </Spacings.Stack>
+  )
+}

package/src/@components/upload-settings/index.ts

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