@commercetools-frontend-extensions/import-resources-modal 1.11.6 → 1.13.0

package/dist/commercetools-frontend-extensions-import-resources-modal.cjs.prod.js

@@ -31,6 +31,7 @@ var _possibleConstructorReturn = require('@babel/runtime-corejs3/helpers/possibl
 var _getPrototypeOf = require('@babel/runtime-corejs3/helpers/getPrototypeOf');
 var _inherits = require('@babel/runtime-corejs3/helpers/inherits');
 var _wrapNativeSuper = require('@babel/runtime-corejs3/helpers/wrapNativeSuper');
+var applicationShell = require('@commercetools-frontend/application-shell');
 var sentry = require('@commercetools-frontend/sentry');
 var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
 var _sliceInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/slice');
@@ -63,66 +64,90 @@ let CurrentStep$1 = /*#__PURE__*/function (CurrentStep) {
   return CurrentStep;
 }({});
 
-function ownKeys$c(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$c(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$c(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$c(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+function ownKeys$b(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$b(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$b(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$b(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
 
 // TODO: make this resource type specific
 
 function reducer(state, action) {
-  if (action.type === 'setCurrentStep') return _objectSpread$c(_objectSpread$c({}, state), {}, {
+  if (action.type === 'setCurrentStep') return _objectSpread$b(_objectSpread$b({}, state), {}, {
     currentStep: action.currentStep,
     progress: 0
   });
-  if (action.type === 'setUploadFileResponse') return _objectSpread$c(_objectSpread$c({}, state), {}, {
+  if (action.type === 'setUploadFileResponse') return _objectSpread$b(_objectSpread$b({}, state), {}, {
     uploadFileResponse: action.uploadFileResponse
   });
-  if (action.type === 'setResourceType') return _objectSpread$c(_objectSpread$c({}, state), {}, {
+  if (action.type === 'setResourceType') return _objectSpread$b(_objectSpread$b({}, state), {}, {
     resourceType: action.resourceType
   });
-  if (action.type === 'setContainerKey') return _objectSpread$c(_objectSpread$c({}, state), {}, {
+  if (action.type === 'setContainerKey') return _objectSpread$b(_objectSpread$b({}, state), {}, {
     containerKey: action.containerKey
   });
-  if (action.type === 'cancelImport') return _objectSpread$c(_objectSpread$c({}, state), {}, {
+  if (action.type === 'cancelImport') return _objectSpread$b(_objectSpread$b({}, state), {}, {
     currentStep: CurrentStep$1.Upload,
     containerKey: undefined,
+    jobId: undefined,
     fileUploadErrors: [],
     uploadFileResponse: undefined,
     droppedFile: undefined,
     dropAreaState: 'disabled',
-    progress: 0
+    progress: 0,
+    totalResourceCount: undefined,
+    validationProcessed: undefined,
+    isValidating: false
   });
-  if (action.type === 'uploadNewFile') return _objectSpread$c(_objectSpread$c({}, state), {}, {
+  if (action.type === 'uploadNewFile') return _objectSpread$b(_objectSpread$b({}, state), {}, {
     currentStep: CurrentStep$1.Upload,
     containerKey: undefined,
+    jobId: undefined,
     fileUploadErrors: [],
     uploadFileResponse: undefined,
     droppedFile: undefined,
     dropAreaState: 'ready-for-drop',
-    progress: 0
+    progress: 0,
+    totalResourceCount: undefined,
+    validationProcessed: undefined,
+    isValidating: false
   });
   if (action.type === 'setDroppedFile') {
-    return _objectSpread$c(_objectSpread$c({}, state), {}, {
+    return _objectSpread$b(_objectSpread$b({}, state), {}, {
       droppedFile: action.droppedFile
     });
   }
   if (action.type === 'setFileUploadErrors') {
-    return _objectSpread$c(_objectSpread$c({}, state), {}, {
+    return _objectSpread$b(_objectSpread$b({}, state), {}, {
       fileUploadErrors: action.fileUploadErrors
     });
   }
   if (action.type === 'setAbortController') {
-    return _objectSpread$c(_objectSpread$c({}, state), {}, {
+    return _objectSpread$b(_objectSpread$b({}, state), {}, {
       abortController: action.abortController
     });
   }
   if (action.type === 'setProgress') {
-    return _objectSpread$c(_objectSpread$c({}, state), {}, {
+    return _objectSpread$b(_objectSpread$b({}, state), {}, {
       progress: action.progress
     });
   }
   if (action.type === 'setUploadSettings') {
-    return _objectSpread$c(_objectSpread$c({}, state), {}, {
-      settings: _objectSpread$c(_objectSpread$c({}, state.settings), action.settings)
+    return _objectSpread$b(_objectSpread$b({}, state), {}, {
+      settings: _objectSpread$b(_objectSpread$b({}, state.settings), action.settings)
+    });
+  }
+  if (action.type === 'setJobId') {
+    return _objectSpread$b(_objectSpread$b({}, state), {}, {
+      jobId: action.jobId
+    });
+  }
+  if (action.type === 'setTotalResourceCount') {
+    return _objectSpread$b(_objectSpread$b({}, state), {}, {
+      totalResourceCount: action.totalResourceCount
+    });
+  }
+  if (action.type === 'setValidationProgress') {
+    return _objectSpread$b(_objectSpread$b({}, state), {}, {
+      validationProcessed: action.validationProcessed,
+      isValidating: action.isValidating
     });
   }
   throw new Error(getUnknownActionError(action));
@@ -138,21 +163,75 @@ const initialState = {
   fileUploadErrors: [],
   resourceType: 'category',
   containerKey: undefined,
+  jobId: undefined,
   progress: 0,
   settings: {
     decimalSeparator: '.'
+  },
+  totalResourceCount: undefined,
+  validationProcessed: undefined,
+  isValidating: false
+};
+const initialActions = {
+  setCurrentStep(_currentStep) {
+    /**/
+  },
+  cancelImport() {
+    /**/
+  },
+  uploadNewFile() {
+    /**/
+  },
+  setUploadFileResponse(_uploadFileResponse) {
+    /**/
+  },
+  setResourceType(_nextResourceType) {
+    /**/
+  },
+  setDroppedFile(_nextDroppedFile) {
+    /**/
+  },
+  setFileUploadErrors(_fileUploadErrors) {
+    /**/
+  },
+  setContainerKey(_containerKey) {
+    /**/
+  },
+  setAbortController(_abortController) {
+    /**/
+  },
+  setUploadSettings(_settings) {
+    /**/
+  },
+  setProgress(_progress) {
+    /**/
+  },
+  setJobId(_jobId) {
+    /**/
+  },
+  setTotalResourceCount(_totalResourceCount) {
+    /**/
+  },
+  setValidationProgress(_params) {
+    /**/
   }
 };
 
-function ownKeys$b(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$b(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$b(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$b(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
-const ImportResourcesContext = /*#__PURE__*/React__default["default"].createContext();
+function ownKeys$a(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$a(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$a(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$a(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+const ImportResourcesContext = /*#__PURE__*/React__default["default"].createContext({
+  state: initialState,
+  resourceTypes: [],
+  onClose: () => {},
+  onStartImportSuccess: () => {},
+  actions: initialActions
+});
 const ImportResourcesProvider = props => {
   const _useApplicationContex = applicationShellConnectors.useApplicationContext(context => ({
       projectKey: context.project?.key
     })),
     projectKey = _useApplicationContex.projectKey;
-  const _React$useReducer = React__default["default"].useReducer(reducer, _objectSpread$b(_objectSpread$b({}, initialState), {}, {
+  const _React$useReducer = React__default["default"].useReducer(reducer, _objectSpread$a(_objectSpread$a({}, initialState), {}, {
       resourceType: props.resourceTypes[0]
     })),
     _React$useReducer2 = _slicedToArray(_React$useReducer, 2),
@@ -202,9 +281,26 @@ const ImportResourcesProvider = props => {
       settings: nextSettings
     });
   };
+  const setJobId = jobId => dispatch({
+    type: 'setJobId',
+    jobId
+  });
+  const setTotalResourceCount = totalResourceCount => dispatch({
+    type: 'setTotalResourceCount',
+    totalResourceCount
+  });
+  const setValidationProgress = _ref => {
+    let processed = _ref.processed,
+      isValidating = _ref.isValidating;
+    return dispatch({
+      type: 'setValidationProgress',
+      validationProcessed: processed,
+      isValidating
+    });
+  };
   const handleClose = function () {
-    let _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-      shouldDeleteImportContainer = _ref.shouldDeleteImportContainer;
+    let _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      shouldDeleteImportContainer = _ref2.shouldDeleteImportContainer;
     if (state.abortController) state.abortController.abort();
     if (typeof props.onClose === 'function') props.onClose();
     // Removes the associated import container when the import is closed
@@ -230,10 +326,13 @@ const ImportResourcesProvider = props => {
         setResourceType,
         setDroppedFile,
         setContainerKey,
+        setJobId,
         setAbortController,
         setFileUploadErrors,
         setProgress,
-        setUploadSettings
+        setUploadSettings,
+        setTotalResourceCount,
+        setValidationProgress
       }
     },
     children: props.children
@@ -290,7 +389,7 @@ function getDropAreaState(flags) {
   return 'ready-for-drop';
 }
 
-var messages$5 = reactIntl.defineMessages({
+var messages$6 = reactIntl.defineMessages({
   dragAndDropCSV: {
     id: 'ImportResourcesModal.dragAndDropCSV',
     description: 'The message telling the user to drag and drop CSV file in the file drop area',
@@ -423,7 +522,7 @@ function useImportResourcesContext() {
   return context;
 }
 
-var messages$4 = reactIntl.defineMessages({
+var messages$5 = reactIntl.defineMessages({
   fileSizeExceededTitle: {
     id: 'ImportResourcesModal.sizeExceededTitle',
     defaultMessage: 'File size exceeded'
@@ -828,8 +927,46 @@ function resourceTypeToPluralMessage(resourceType) {
   return message;
 }
 
-function ownKeys$a(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$a(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$a(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$a(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+const INITIAL_COLUMN_DISPLAY_COUNT = 8;
+
+const PERMISSIONS = {
+  // Categories
+  ManageCategories: 'ManageCategories',
+  ViewCategories: 'ViewCategories',
+  // Products
+  ManageProducts: 'ManageProducts',
+  ViewProducts: 'ViewProducts',
+  // ProductTypes
+  ManageProductTypes: 'ManageProductTypes',
+  ViewProductTypes: 'ViewProductTypes',
+  // DiscountCodes
+  ManageDiscountCodes: 'ManageDiscountCodes',
+  ViewDiscountCodes: 'ViewDiscountCodes',
+  // Customers
+  ManageCustomers: 'ManageCustomers',
+  ViewCustomers: 'ViewCustomers',
+  // Orders
+  ManageOrders: 'ManageOrders',
+  ViewOrders: 'ViewOrders',
+  // KeyValueDocuments
+  ManageKeyValueDocuments: 'ManageKeyValueDocuments',
+  ViewKeyValueDocuments: 'ViewKeyValueDocuments',
+  // BusinessUnits
+  ManageBusinessUnits: 'ManageBusinessUnits',
+  ViewBusinessUnits: 'ViewBusinessUnits'
+};
+
+function ownKeys$9(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$9(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$9(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$9(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+const FILE_IMPORT_JOB_FLOW = 'fileImportJobFlow';
+const DEFAULT_SHORT_LIVED_FLAGS = {
+  [FILE_IMPORT_JOB_FLOW]: false
+};
+const DEFAULT_LONG_LIVED_FLAGS = {};
+_objectSpread$9(_objectSpread$9({}, DEFAULT_SHORT_LIVED_FLAGS), DEFAULT_LONG_LIVED_FLAGS);
+
+function ownKeys$8(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$8(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$8(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$8(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
 const useUpload = () => {
   const intl = reactIntl.useIntl();
   const _useApplicationContex = applicationShellConnectors.useApplicationContext(context => ({
@@ -840,39 +977,38 @@ const useUpload = () => {
     state = _useImportResourcesCo.state,
     actions = _useImportResourcesCo.actions;
   const showNotification = actionsGlobal.useShowNotification();
-  const _useImportContainerUp = operations.useImportContainerUpload({
-      projectKey: projectKey
+  const isFileImportJobFlowEnabled = applicationShell.useFeatureToggle(FILE_IMPORT_JOB_FLOW);
+  const _useFileUpload = operations.useFileUpload({
+      projectKey: projectKey,
+      useJobBasedFlow: isFileImportJobFlowEnabled
     }),
-    upload = _useImportContainerUp.upload;
-  React__default["default"].useEffect(() => {
-    return () => {
-      if (state.abortController) state.abortController.abort();
-    };
-  }, [state.abortController]);
+    upload = _useFileUpload.upload;
   const isFileValid = async file => {
     const errors = [];
+    const maxFileSizeMB = isFileImportJobFlowEnabled ? operations.IMPORT_MAX_FILE_SIZE_MB : operations.IMPORT_LEGACY_MAX_FILE_SIZE_MB;
+    const maxItemCount = isFileImportJobFlowEnabled ? operations.IMPORT_MAX_ITEM_COUNT : operations.IMPORT_LEGACY_MAX_ROW_COUNT;
     const isDelimiterValid = await operations.validateDelimiter(file, operations.COLUMN_DELIMITERS);
     if (!isDelimiterValid) errors.push({
-      title: intl.formatMessage(messages$4.wrongSeparatorTitle),
-      description: intl.formatMessage(messages$4.wrongSeparatorDescription, {
+      title: intl.formatMessage(messages$5.wrongSeparatorTitle),
+      description: intl.formatMessage(messages$5.wrongSeparatorDescription, {
         delimiterList: formatAllowedDelimitersForMessageDisplay(intl)
       })
     });
     const rowCount = await operations.getRowCount(file);
     if (rowCount < 1) errors.push({
-      title: intl.formatMessage(messages$4.dropAreaNotEnoughRowsTitle),
-      description: intl.formatMessage(messages$4.dropAreaNotEnoughRowsDescription)
+      title: intl.formatMessage(messages$5.dropAreaNotEnoughRowsTitle),
+      description: intl.formatMessage(messages$5.dropAreaNotEnoughRowsDescription)
     });
-    if (state.resourceType && file.size > operations.toBytes(operations.MAX_FILE_SIZE_MB)) errors.push({
-      title: intl.formatMessage(messages$4.fileSizeExceededTitle),
-      description: intl.formatMessage(messages$4.fileSizeExceededDescription, {
-        fileSizeLimit: intl.formatNumber(operations.MAX_FILE_SIZE_MB)
+    if (state.resourceType && file.size > operations.toBytes(maxFileSizeMB)) errors.push({
+      title: intl.formatMessage(messages$5.fileSizeExceededTitle),
+      description: intl.formatMessage(messages$5.fileSizeExceededDescription, {
+        fileSizeLimit: intl.formatNumber(maxFileSizeMB)
       })
     });
-    if (state.resourceType && rowCount > operations.MAX_ROW_COUNT) errors.push({
-      title: intl.formatMessage(messages$4.rowLimitExceededTitle),
-      description: intl.formatMessage(messages$4.rowLimitExceededDescription, {
-        rowLimit: intl.formatNumber(operations.MAX_ROW_COUNT)
+    if (state.resourceType && rowCount > maxItemCount) errors.push({
+      title: intl.formatMessage(messages$5.rowLimitExceededTitle),
+      description: intl.formatMessage(messages$5.rowLimitExceededDescription, {
+        rowLimit: intl.formatNumber(maxItemCount)
       })
     });
     if (errors.length > 0) {
@@ -880,6 +1016,10 @@ const useUpload = () => {
       actions.setCurrentStep(CurrentStep$1.UploadResult);
       return false;
     }
+    if (isFileImportJobFlowEnabled) {
+      const resourceCount = await operations.countUniqueResourcesInCsv(file);
+      actions.setTotalResourceCount(resourceCount);
+    }
     return true;
   };
   const handleUploadError = error => {
@@ -888,18 +1028,22 @@ const useUpload = () => {
       return;
     }
     if (error instanceof operations.HttpError) {
+      actions.setValidationProgress({
+        processed: 0,
+        isValidating: false
+      });
       if (error.errorData?.code === 'MISSING_KEY_ERROR') {
         actions.setFileUploadErrors([{
-          title: intl.formatMessage(messages$4.missingRequiredField),
-          description: intl.formatMessage(messages$4.missingKeyError)
+          title: intl.formatMessage(messages$5.missingRequiredField),
+          description: intl.formatMessage(messages$5.missingKeyError)
         }]);
         actions.setCurrentStep(CurrentStep$1.UploadResult);
       } else if (error.errorData?.code === 'MissingCsvFieldIdentifier') {
         const MissingCsvFieldIdentifierError = error.errorData;
         const fieldNames = operations.formatKeys(MissingCsvFieldIdentifierError.rowValue);
         actions.setFileUploadErrors([{
-          title: intl.formatMessage(messages$4.missingRequiredField),
-          description: intl.formatMessage(messages$4.missingRequiredKeys, {
+          title: intl.formatMessage(messages$5.missingRequiredField),
+          description: intl.formatMessage(messages$5.missingRequiredKeys, {
             fieldNames
           })
         }]);
@@ -912,7 +1056,7 @@ const useUpload = () => {
         showNotification({
           kind: 'error',
           domain: constants.DOMAINS.PAGE,
-          text: intl.formatMessage(messages$4.unexpectedError)
+          text: intl.formatMessage(messages$5.unexpectedError)
         });
       }
     } else {
@@ -935,77 +1079,65 @@ const useUpload = () => {
     if (!state.droppedFile || !state.resourceType) return;
     const canUpload = await isFileValid(state.droppedFile);
     if (!canUpload) return;
+    const abortController = new AbortController();
+    actions.setAbortController(abortController);
     actions.setCurrentStep(CurrentStep$1.Uploading);
-    try {
-      const shouldApplyPublishSettings = state.resourceType === 'product';
-      const xhr = await upload({
-        file: state.droppedFile,
-        resourceType: state.resourceType,
-        settings: _objectSpread$a({
-          format: 'CSV',
-          decimalSeparator: state.settings?.decimalSeparator
-        }, shouldApplyPublishSettings ? {
-          resourceType: state.resourceType === 'product' ? 'product-draft' : state.resourceType,
-          options: {
-            publishAllChanges: state.settings?.publish ?? false
-          }
-        } : {}),
-        onSuccess: (fileUploadResponse, containerKey) => {
-          actions.setContainerKey(containerKey);
-          actions.setUploadFileResponse(fileUploadResponse);
-          actions.setCurrentStep(CurrentStep$1.UploadResult);
-        },
-        onProgress: progress => {
-          actions.setProgress(progress);
-        },
-        onError: handleUploadError
-      });
-      actions.setAbortController(xhr);
-    } catch (error) {
-      handleUploadError(error);
-      actions.setCurrentStep(CurrentStep$1.UploadResult);
-    }
+    const shouldApplyPublishSettings = state.resourceType === 'product';
+    const uploadSettings = _objectSpread$8({
+      format: 'CSV',
+      decimalSeparator: state.settings?.decimalSeparator
+    }, shouldApplyPublishSettings ? {
+      resourceType: state.resourceType === 'product' ? 'product-draft' : state.resourceType,
+      options: {
+        publishAllChanges: state.settings?.publish ?? false
+      }
+    } : {});
+    await upload({
+      file: state.droppedFile,
+      resourceType: state.resourceType,
+      settings: uploadSettings,
+      abortSignal: abortController.signal,
+      onSuccess: result => {
+        actions.setValidationProgress({
+          processed: 0,
+          isValidating: false
+        });
+        actions.setContainerKey(result.containerKey);
+        if (result.jobId) {
+          actions.setJobId(result.jobId);
+        }
+        const fileUploadResponse = {
+          results: result.summary.results,
+          invalid: result.summary.invalid,
+          valid: result.summary.valid,
+          fileName: state.droppedFile?.name || '',
+          itemsCount: result.summary.total,
+          rowsCount: result.summary.total,
+          columnsCount: result.summary.fieldsCount,
+          fields: result.summary.fields,
+          ignoredFields: result.summary.ignoredFields
+        };
+        actions.setUploadFileResponse(fileUploadResponse);
+        actions.setCurrentStep(CurrentStep$1.UploadResult);
+      },
+      onProgress: progress => {
+        actions.setProgress(progress);
+      },
+      onValidationProgress: job => {
+        const processed = job.summary?.total ?? 0;
+        actions.setValidationProgress({
+          processed,
+          isValidating: true
+        });
+      },
+      onError: handleUploadError
+    });
   };
   return {
     handleUploadAndValidation
   };
 };
 
-const INITIAL_COLUMN_DISPLAY_COUNT = 8;
-
-const PERMISSIONS = {
-  // Categories
-  ManageCategories: 'ManageCategories',
-  ViewCategories: 'ViewCategories',
-  // Products
-  ManageProducts: 'ManageProducts',
-  ViewProducts: 'ViewProducts',
-  // ProductTypes
-  ManageProductTypes: 'ManageProductTypes',
-  ViewProductTypes: 'ViewProductTypes',
-  // DiscountCodes
-  ManageDiscountCodes: 'ManageDiscountCodes',
-  ViewDiscountCodes: 'ViewDiscountCodes',
-  // Customers
-  ManageCustomers: 'ManageCustomers',
-  ViewCustomers: 'ViewCustomers',
-  // Orders
-  ManageOrders: 'ManageOrders',
-  ViewOrders: 'ViewOrders',
-  // KeyValueDocuments
-  ManageKeyValueDocuments: 'ManageKeyValueDocuments',
-  ViewKeyValueDocuments: 'ViewKeyValueDocuments',
-  // BusinessUnits
-  ManageBusinessUnits: 'ManageBusinessUnits',
-  ViewBusinessUnits: 'ViewBusinessUnits'
-};
-
-function ownKeys$9(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$9(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$9(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$9(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
-const DEFAULT_SHORT_LIVED_FLAGS = {};
-const DEFAULT_LONG_LIVED_FLAGS = {};
-_objectSpread$9(_objectSpread$9({}, DEFAULT_SHORT_LIVED_FLAGS), DEFAULT_LONG_LIVED_FLAGS);
-
 const useImportPermission = () => {
   const _useApplicationContex = applicationShellConnectors.useApplicationContext(applicationContext => ({
       actionRights: applicationContext.actionRights?.products
@@ -1070,9 +1202,9 @@ const FileDropArea = () => {
   }, [state.resourceType, actions]);
   const handleDropRejected = React__default["default"].useCallback(errorType => {
     const errorMessageMap = {
-      'too-many-files': messages$5.tooManyFilesError,
-      'invalid-type': messages$5.fileFormatNotSupported,
-      generic: messages$5.genericError
+      'too-many-files': messages$6.tooManyFilesError,
+      'invalid-type': messages$6.fileFormatNotSupported,
+      generic: messages$6.genericError
     };
     showNotification({
       kind: 'error',
@@ -1099,10 +1231,10 @@ const FileDropArea = () => {
       isFileDropped: Boolean(state.droppedFile),
       fileName: state.droppedFile?.name,
       messages: {
-        chooseFile: intl.formatMessage(messages$5.chooseFile),
-        dragAndDropCSV: intl.formatMessage(messages$5.dragAndDropCSV),
-        or: intl.formatMessage(messages$5.or),
-        browseButton: intl.formatMessage(messages$5.browseButton)
+        chooseFile: intl.formatMessage(messages$6.chooseFile),
+        dragAndDropCSV: intl.formatMessage(messages$6.dragAndDropCSV),
+        or: intl.formatMessage(messages$6.or),
+        browseButton: intl.formatMessage(messages$6.browseButton)
       }
     })
   });
@@ -1150,14 +1282,14 @@ const Upload = () => {
           children: [jsxRuntime.jsx(uiKit.Grid.Item, {
             children: jsxRuntime.jsx(uiKit.Text.Body, {
               isBold: true,
-              intlMessage: messages$5.dataType
+              intlMessage: messages$6.dataType
             })
           }), jsxRuntime.jsx(uiKit.Grid.Item, {
             children: jsxRuntime.jsx(ResourceTypeSelection, {})
           }), jsxRuntime.jsx(uiKit.Grid.Item, {
             children: jsxRuntime.jsx(uiKit.Text.Body, {
               isBold: true,
-              intlMessage: messages$5.instructions
+              intlMessage: messages$6.instructions
             })
           }), jsxRuntime.jsx(uiKit.Grid.Item, {
             children: jsxRuntime.jsx(Instructions, {})
@@ -1165,8 +1297,8 @@ const Upload = () => {
         }) : jsxRuntime.jsx(jsxRuntime.Fragment, {
           children: jsxRuntime.jsx(Instructions, {})
         }), jsxRuntime.jsx(operations.InfoBox, {
-          title: intl.formatMessage(messages$5.prerequisitesOfImportingData),
-          description: intl.formatMessage(messages$5.keysForEveryResource, {
+          title: intl.formatMessage(messages$6.prerequisitesOfImportingData),
+          description: intl.formatMessage(messages$6.keysForEveryResource, {
             link: msg => jsxRuntime.jsx(uiKit.Link, {
               tone: "secondary",
               isExternal: true,
@@ -1181,11 +1313,11 @@ const Upload = () => {
               decimalSeparator
             });
           },
-          separatorTitle: intl.formatMessage(messages$5.separatorTitle),
-          decimalsSeparatorDescription: intl.formatMessage(messages$5.decimalsSeparatorDescription),
-          decimalSeparatorPointLabel: intl.formatMessage(messages$5.decimalSeparatorPoint),
-          decimalSeparatorCommaLabel: intl.formatMessage(messages$5.decimalSeparatorComma),
-          decimalsLabel: intl.formatMessage(messages$5.decimals)
+          separatorTitle: intl.formatMessage(messages$6.separatorTitle),
+          decimalsSeparatorDescription: intl.formatMessage(messages$6.decimalsSeparatorDescription),
+          decimalSeparatorPointLabel: intl.formatMessage(messages$6.decimalSeparatorPoint),
+          decimalSeparatorCommaLabel: intl.formatMessage(messages$6.decimalSeparatorComma),
+          decimalsLabel: intl.formatMessage(messages$6.decimals)
         }), jsxRuntime.jsx(fullstory.Masking.Mask, {
           children: jsxRuntime.jsx(FileDropArea, {})
         }), jsxRuntime.jsx(operations.UploadSettings, {
@@ -1196,7 +1328,7 @@ const Upload = () => {
               publish: checked
             });
           },
-          publishProductsLabel: intl.formatMessage(messages$5.publishProducts),
+          publishProductsLabel: intl.formatMessage(messages$6.publishProducts),
           dataTrackingTarget: "product_import-publish_checkbox",
           canPublishProducts: canPublishProducts
         })]
@@ -1205,7 +1337,7 @@ const Upload = () => {
   });
 };
 
-var messages$3 = reactIntl.defineMessages({
+var messages$4 = reactIntl.defineMessages({
   row: {
     id: 'ImportResourcesModal.row',
     description: 'In Upload file error modal - "Row" column',
@@ -1238,149 +1370,186 @@ var messages$3 = reactIntl.defineMessages({
   }
 });
 
-function ownKeys$8(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$8(e) { for (var r = 1; r < arguments.length; r++) { var _context2, _context3; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context2 = ownKeys$8(Object(t), !0)).call(_context2, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context3 = ownKeys$8(Object(t))).call(_context3, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
-const getColumns$1 = () => [{
+function ownKeys$7(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$7(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$7(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$7(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+const PER_PAGE = 20;
+const columns = [{
+  key: 'row',
+  label: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$7({}, messages$4.row)),
+  width: 'max-content'
+}, {
   key: 'errorType',
-  label: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$8({}, messages$3.errorType)),
+  label: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$7({}, messages$4.errorType)),
   width: 'max-content'
 }, {
   key: 'details',
-  label: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$8({}, messages$3.details))
+  label: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$7({}, messages$4.details))
 }];
-const UploadErrorTable = props => {
-  var _context;
+const ServerPaginatedErrorTable = _ref => {
+  let jobId = _ref.jobId,
+    containerKey = _ref.containerKey,
+    totalInvalid = _ref.totalInvalid;
+  const projectKey = applicationShellConnectors.useApplicationContext(context => context.project?.key);
   const pagination = uiKit.usePaginationState({
-    perPage: 10
+    perPage: PER_PAGE
   });
-  const startIndex = (pagination.page.value - 1) * pagination.perPage.value;
-  const endIndex = startIndex + pagination.perPage.value;
-  const currentPageRows = _sliceInstanceProperty__default["default"](_context = props.rows).call(_context, startIndex, endIndex);
-  const shouldShowPagination = props.rows.length > pagination.perPage.value;
+  const offset = (pagination.page.value - 1) * PER_PAGE;
+  const totalPages = Math.ceil(totalInvalid / PER_PAGE);
+  const _useFetchFileImportJo = operations.useFetchFileImportJobRecords({
+      projectKey: projectKey,
+      importContainerKey: containerKey,
+      jobId,
+      offset,
+      limit: PER_PAGE,
+      isValid: false
+    }),
+    data = _useFetchFileImportJo.data,
+    isLoading = _useFetchFileImportJo.isLoading;
+  const rows = React__default["default"].useMemo(() => data ? operations.mapUploadFileErrorsResponseToUploadFileErrorRows(data.results) : [], [data]);
+  const showInitialLoading = isLoading && !data;
+  if (showInitialLoading) {
+    return jsxRuntime.jsx(uiKit.Spacings.Stack, {
+      alignItems: "center",
+      children: jsxRuntime.jsx(uiKit.LoadingSpinner, {})
+    });
+  }
   return jsxRuntime.jsxs(uiKit.Spacings.Stack, {
     scale: "l",
     children: [jsxRuntime.jsx(uiKit.DataTable, {
       verticalCellAlignment: "center",
       isCondensed: true,
-      rows: currentPageRows,
-      columns: getColumns$1(),
-      itemRenderer: itemRenderer$1
-    }), shouldShowPagination && jsxRuntime.jsx(uiKit.PageNavigator, {
+      rows: rows,
+      columns: columns,
+      itemRenderer: itemRenderer
+    }), totalPages > 1 && jsxRuntime.jsx(uiKit.PageNavigator, {
       onPageChange: pagination.page.onChange,
       page: pagination.page.value,
-      totalPages: Math.ceil(props.rows.length / pagination.perPage.value)
+      totalPages: totalPages
     })]
   });
 };
-function itemRenderer$1(item, column) {
+function itemRenderer(item, column) {
   switch (column.key) {
+    case 'row':
+      return item.row;
     case 'errorType':
       return jsxRuntime.jsx(uiKit.Stamp, {
         isCondensed: true,
-        label: item.title,
+        label: operations.formatErrorCode(item.code),
         tone: "critical"
       });
     case 'details':
-      return jsxRuntime.jsx(uiKit.Text.Body, {
-        children: item.description
+      return jsxRuntime.jsxs(uiKit.Spacings.Inline, {
+        scale: "xs",
+        children: [jsxRuntime.jsx(uiKit.Text.Body, {
+          tone: "information",
+          children: item.field
+        }), jsxRuntime.jsx(uiKit.Text.Body, {
+          children: operations.extractErrorDescriptionFromValidationMessage(item.validationMessage)
+        })]
       });
     default:
       throw new operations.UnexpectedColumnError(column.key);
   }
 }
 
-function ownKeys$7(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$7(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$7(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$7(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
-const UploadErrorsModal = () => {
-  const intl = reactIntl.useIntl();
-  const _useImportResourcesCo = useImportResourcesContext(),
-    state = _useImportResourcesCo.state,
-    actions = _useImportResourcesCo.actions,
-    onClose = _useImportResourcesCo.onClose;
-  const errorsCount = state.fileUploadErrors.length;
-  return jsxRuntime.jsx(applicationComponents.InfoDialog, {
-    size: 16,
-    isOpen: true,
-    title: intl.formatMessage(sharedMessages[`modalTitle.${state.resourceType}`]),
-    onClose: () => onClose(),
-    children: jsxRuntime.jsx(fullstory.Masking.Unmask, {
-      children: jsxRuntime.jsxs(uiKit.Spacings.Stack, {
-        scale: "l",
-        children: [jsxRuntime.jsx(fullstory.Masking.Mask, {
-          children: jsxRuntime.jsx(uiKit.Text.Body, {
-            intlMessage: _objectSpread$7(_objectSpread$7({}, messages$3.uploadErrorDescription), {}, {
-              values: {
-                fileName: state.droppedFile?.name,
-                errorsCount: intl.formatNumber(errorsCount),
-                b: getBold$3
-              }
-            })
-          })
-        }), jsxRuntime.jsx(UploadErrorTable, {
-          rows: operations.mapFileUploadErrorsToUploadFileErrorRows(state.fileUploadErrors)
-        }), jsxRuntime.jsxs(uiKit.Spacings.Inline, {
-          scale: "m",
-          justifyContent: "flex-end",
-          children: [jsxRuntime.jsx(uiKit.SecondaryButton, {
-            label: intl.formatMessage(sharedMessages.close),
-            onClick: () => onClose()
-          }), jsxRuntime.jsx(uiKit.PrimaryButton, {
-            iconLeft: jsxRuntime.jsx(uiKit.ImportIcon, {}),
-            label: intl.formatMessage(messages$3.uploadNewFile),
-            onClick: () => actions.uploadNewFile()
-          })]
-        })]
-      })
-    })
-  });
-};
-function getBold$3(msg) {
-  return jsxRuntime.jsx(uiKit.Text.Body, {
-    as: "span",
-    isBold: true,
-    children: msg
-  }, crypto.randomUUID());
-}
-
 function ownKeys$6(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$6(e) { for (var r = 1; r < arguments.length; r++) { var _context2, _context3; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context2 = ownKeys$6(Object(t), !0)).call(_context2, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context3 = ownKeys$6(Object(t))).call(_context3, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
-const getColumns = () => [{
+function _objectSpread$6(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$6(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$6(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+const fileLevelColumns = [{
+  key: 'errorType',
+  label: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$6({}, messages$4.errorType)),
+  width: 'max-content'
+}, {
+  key: 'details',
+  label: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$6({}, messages$4.details))
+}];
+const rowLevelColumns = [{
   key: 'row',
-  label: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$6({}, messages$3.row)),
+  label: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$6({}, messages$4.row)),
   width: 'max-content'
 }, {
   key: 'errorType',
-  label: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$6({}, messages$3.errorType)),
+  label: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$6({}, messages$4.errorType)),
   width: 'max-content'
 }, {
   key: 'details',
-  label: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$6({}, messages$3.details))
+  label: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$6({}, messages$4.details))
 }];
-const UploadRowErrorTable = props => {
-  var _context;
+const FileLevelErrorTable = _ref => {
+  let rows = _ref.rows;
   const pagination = uiKit.usePaginationState({
     perPage: 10
   });
   const startIndex = (pagination.page.value - 1) * pagination.perPage.value;
   const endIndex = startIndex + pagination.perPage.value;
-  const currentPageRows = _sliceInstanceProperty__default["default"](_context = props.rows).call(_context, startIndex, endIndex);
-  const shouldShowPagination = props.rows.length > pagination.perPage.value;
+  const currentPageRows = _sliceInstanceProperty__default["default"](rows).call(rows, startIndex, endIndex);
+  const shouldShowPagination = rows.length > pagination.perPage.value;
   return jsxRuntime.jsxs(uiKit.Spacings.Stack, {
     scale: "l",
     children: [jsxRuntime.jsx(uiKit.DataTable, {
       verticalCellAlignment: "center",
       isCondensed: true,
       rows: currentPageRows,
-      columns: getColumns(),
-      itemRenderer: itemRenderer
+      columns: fileLevelColumns,
+      itemRenderer: fileLevelItemRenderer
     }), shouldShowPagination && jsxRuntime.jsx(uiKit.PageNavigator, {
       onPageChange: pagination.page.onChange,
       page: pagination.page.value,
-      totalPages: Math.ceil(props.rows.length / pagination.perPage.value)
+      totalPages: Math.ceil(rows.length / pagination.perPage.value)
     })]
   });
 };
-function itemRenderer(item, column) {
+const RowLevelErrorTable = _ref2 => {
+  let rows = _ref2.rows;
+  const pagination = uiKit.usePaginationState({
+    perPage: 10
+  });
+  const startIndex = (pagination.page.value - 1) * pagination.perPage.value;
+  const endIndex = startIndex + pagination.perPage.value;
+  const currentPageRows = _sliceInstanceProperty__default["default"](rows).call(rows, startIndex, endIndex);
+  const shouldShowPagination = rows.length > pagination.perPage.value;
+  return jsxRuntime.jsxs(uiKit.Spacings.Stack, {
+    scale: "l",
+    children: [jsxRuntime.jsx(uiKit.DataTable, {
+      verticalCellAlignment: "center",
+      isCondensed: true,
+      rows: currentPageRows,
+      columns: rowLevelColumns,
+      itemRenderer: rowLevelItemRenderer
+    }), shouldShowPagination && jsxRuntime.jsx(uiKit.PageNavigator, {
+      onPageChange: pagination.page.onChange,
+      page: pagination.page.value,
+      totalPages: Math.ceil(rows.length / pagination.perPage.value)
+    })]
+  });
+};
+const UploadErrorTable = props => {
+  if (props.variant === 'row-level') {
+    return jsxRuntime.jsx(RowLevelErrorTable, {
+      rows: props.rows
+    });
+  }
+  return jsxRuntime.jsx(FileLevelErrorTable, {
+    rows: props.rows
+  });
+};
+function fileLevelItemRenderer(item, column) {
+  switch (column.key) {
+    case 'errorType':
+      return jsxRuntime.jsx(uiKit.Stamp, {
+        isCondensed: true,
+        label: item.title,
+        tone: "critical"
+      });
+    case 'details':
+      return jsxRuntime.jsx(uiKit.Text.Body, {
+        children: item.description
+      });
+    default:
+      throw new operations.UnexpectedColumnError(column.key);
+  }
+}
+function rowLevelItemRenderer(item, column) {
   switch (column.key) {
     case 'row':
       return item.row;
@@ -1407,19 +1576,23 @@ function itemRenderer(item, column) {
 
 function ownKeys$5(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$5(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$5(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$5(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
-const UploadRowErrorsModal = () => {
+const UploadErrorsModal = () => {
   const intl = reactIntl.useIntl();
   const _useImportResourcesCo = useImportResourcesContext(),
     state = _useImportResourcesCo.state,
     actions = _useImportResourcesCo.actions,
     onClose = _useImportResourcesCo.onClose;
-  const errorsCount = operations.getFileUploadErrorsCount(state.uploadFileResponse?.results);
+  const isNewFlow = Boolean(state.jobId);
+  const hasInvalidRecords = (state.uploadFileResponse?.invalid ?? 0) > 0;
+  const isRowLevelErrors = hasInvalidRecords && (state.uploadFileResponse?.results?.length ?? 0) > 0;
+  const isFileLevelErrors = state.fileUploadErrors.length > 0;
+  const errorsCount = isNewFlow ? state.uploadFileResponse?.invalid ?? 0 : isRowLevelErrors ? operations.getFileUploadErrorsCount(state.uploadFileResponse?.results) : state.fileUploadErrors.length;
   const documentationLink = operations.RESOURCE_TYPE_DOCUMENTATION_LINKS[state.resourceType];
   return jsxRuntime.jsx(applicationComponents.InfoDialog, {
     size: 16,
     isOpen: true,
     title: intl.formatMessage(sharedMessages[`modalTitle.${state.resourceType}`]),
-    onClose: onClose,
+    onClose: () => onClose(),
     children: jsxRuntime.jsx(fullstory.Masking.Unmask, {
       children: jsxRuntime.jsxs(uiKit.Spacings.Stack, {
         scale: "l",
@@ -1427,7 +1600,7 @@ const UploadRowErrorsModal = () => {
           scale: "xs",
           children: [jsxRuntime.jsx(fullstory.Masking.Mask, {
             children: jsxRuntime.jsx(uiKit.Text.Body, {
-              intlMessage: _objectSpread$5(_objectSpread$5({}, messages$3.uploadErrorDescription), {}, {
+              intlMessage: _objectSpread$5(_objectSpread$5({}, messages$4.uploadErrorDescription), {}, {
                 values: {
                   fileName: state.droppedFile?.name,
                   errorsCount: intl.formatNumber(errorsCount),
@@ -1435,8 +1608,8 @@ const UploadRowErrorsModal = () => {
                 }
               })
             })
-          }), jsxRuntime.jsx(uiKit.Text.Body, {
-            intlMessage: _objectSpread$5(_objectSpread$5({}, messages$3.supportedValuesDocumentation), {}, {
+          }), hasInvalidRecords && jsxRuntime.jsx(uiKit.Text.Body, {
+            intlMessage: _objectSpread$5(_objectSpread$5({}, messages$4.supportedValuesDocumentation), {}, {
               values: {
                 documentationLink: msg => jsxRuntime.jsx(uiKit.Link, {
                   tone: "secondary",
@@ -1447,8 +1620,16 @@ const UploadRowErrorsModal = () => {
               }
             })
           })]
-        }), jsxRuntime.jsx(UploadRowErrorTable, {
+        }), isNewFlow && hasInvalidRecords && state.containerKey && jsxRuntime.jsx(ServerPaginatedErrorTable, {
+          jobId: state.jobId,
+          containerKey: state.containerKey,
+          totalInvalid: state.uploadFileResponse?.invalid ?? 0
+        }), !isNewFlow && isRowLevelErrors && jsxRuntime.jsx(UploadErrorTable, {
+          variant: "row-level",
           rows: operations.mapUploadFileErrorsResponseToUploadFileErrorRows(state.uploadFileResponse?.results)
+        }), isFileLevelErrors && jsxRuntime.jsx(UploadErrorTable, {
+          variant: "file-level",
+          rows: operations.mapFileUploadErrorsToUploadFileErrorRows(state.fileUploadErrors)
         }), jsxRuntime.jsxs(uiKit.Spacings.Inline, {
           scale: "m",
           justifyContent: "flex-end",
@@ -1457,7 +1638,7 @@ const UploadRowErrorsModal = () => {
             onClick: () => onClose()
           }), jsxRuntime.jsx(uiKit.PrimaryButton, {
             iconLeft: jsxRuntime.jsx(uiKit.ImportIcon, {}),
-            label: intl.formatMessage(messages$3.uploadNewFile),
+            label: intl.formatMessage(messages$4.uploadNewFile),
             onClick: () => actions.uploadNewFile()
           })]
         })]
@@ -1473,7 +1654,7 @@ function getBold$2(msg) {
   }, crypto.randomUUID());
 }
 
-var messages$2 = reactIntl.defineMessages({
+var messages$3 = reactIntl.defineMessages({
   startImportButton: {
     id: 'ImportResourcesModal.startImportButton',
     description: 'Label for the modal Start import button',
@@ -1575,7 +1756,7 @@ const ColumnList = props => {
           e.preventDefault();
           setIsExpanded(!isExpanded);
         },
-        children: isExpanded ? jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$4({}, messages$2.showLess)) : jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$4({}, messages$2.showMore))
+        children: isExpanded ? jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$4({}, messages$3.showLess)) : jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$4({}, messages$3.showMore))
       })
     })]
   });
@@ -1595,13 +1776,13 @@ function UploadPreviewModal() {
   const resourceType = intl.formatMessage(resourceTypeMessage).toLowerCase();
   const resourceTypePluralMessage = resourceTypeToPluralMessage(state.resourceType);
   const resourceTypePlural = intl.formatMessage(resourceTypePluralMessage).toLowerCase();
-  const ignoredColumns = state.uploadFileResponse.ignoredColumns;
-  const validatedColumns = operations.getValidatedColumns(state.uploadFileResponse.columns, ignoredColumns);
+  const ignoredFields = state.uploadFileResponse.ignoredFields;
+  const validatedFields = operations.getValidatedColumns(state.uploadFileResponse.fields, ignoredFields);
   return jsxRuntime.jsx(applicationComponents.FormDialog, {
     size: 16,
     isOpen: true,
     title: intl.formatMessage(sharedMessages[`modalTitle.${state.resourceType}`]),
-    labelPrimary: intl.formatMessage(messages$2.continue),
+    labelPrimary: intl.formatMessage(messages$3.continue),
     onSecondaryButtonClick: () => onClose({
       shouldDeleteImportContainer: true
     }),
@@ -1620,7 +1801,7 @@ function UploadPreviewModal() {
             children: jsxRuntime.jsxs(uiKit.Spacings.Stack, {
               scale: "m",
               children: [jsxRuntime.jsx("div", {}), jsxRuntime.jsx(uiKit.Text.Body, {
-                intlMessage: messages$2.previewOfYourImport
+                intlMessage: messages$3.previewOfYourImport
               }), jsxRuntime.jsx(uiKit.Card, {
                 insetScale: "xl",
                 children: jsxRuntime.jsxs(uiKit.Spacings.Stack, {
@@ -1632,7 +1813,7 @@ function UploadPreviewModal() {
                       children: [jsxRuntime.jsx(uiKit.CheckBoldIcon, {
                         color: "success"
                       }), jsxRuntime.jsx(uiKit.Text.Body, {
-                        intlMessage: _objectSpread$3(_objectSpread$3({}, messages$2.itemsToBeImported), {}, {
+                        intlMessage: _objectSpread$3(_objectSpread$3({}, messages$3.itemsToBeImported), {}, {
                           values: {
                             resourceType,
                             resourceTypePlural,
@@ -1647,19 +1828,19 @@ function UploadPreviewModal() {
                       children: [jsxRuntime.jsx(uiKit.CheckBoldIcon, {
                         color: "success"
                       }), jsxRuntime.jsx(uiKit.Text.Body, {
-                        intlMessage: _objectSpread$3(_objectSpread$3({}, messages$2.columnsToBeImported), {}, {
+                        intlMessage: _objectSpread$3(_objectSpread$3({}, messages$3.columnsToBeImported), {}, {
                           values: {
-                            columnCount: intl.formatNumber(validatedColumns.length),
+                            columnCount: intl.formatNumber(validatedFields.length),
                             b: getBold$1
                           }
                         })
                       })]
                     })]
                   }), jsxRuntime.jsx(ColumnList, {
-                    columns: validatedColumns
+                    columns: validatedFields
                   })]
                 })
-              }), ignoredColumns.length > 0 && jsxRuntime.jsx(uiKit.Card, {
+              }), ignoredFields.length > 0 && jsxRuntime.jsx(uiKit.Card, {
                 insetScale: "xl",
                 children: jsxRuntime.jsxs(uiKit.Spacings.Stack, {
                   scale: "s",
@@ -1668,15 +1849,15 @@ function UploadPreviewModal() {
                     children: [jsxRuntime.jsx(uiKit.EyeCrossedIcon, {
                       color: "neutral60"
                     }), jsxRuntime.jsx(uiKit.Text.Body, {
-                      intlMessage: _objectSpread$3(_objectSpread$3({}, messages$2.columnsToBeIgnored), {}, {
+                      intlMessage: _objectSpread$3(_objectSpread$3({}, messages$3.columnsToBeIgnored), {}, {
                         values: {
-                          columnCount: intl.formatNumber(ignoredColumns.length),
+                          columnCount: intl.formatNumber(ignoredFields.length),
                           b: getBold$1
                         }
                       })
                     })]
                   }), jsxRuntime.jsx(ColumnList, {
-                    columns: ignoredColumns
+                    columns: ignoredFields
                   })]
                 })
               })]
@@ -1709,7 +1890,7 @@ var _ref2 = {
 const ImportRunningTextNotification = props => jsxRuntime.jsx("div", {
   css: _ref2,
   children: jsxRuntime.jsx(uiKit.Text.Body, {
-    intlMessage: _objectSpread$2(_objectSpread$2({}, messages$2.importNotificationSuccessMessage), {}, {
+    intlMessage: _objectSpread$2(_objectSpread$2({}, messages$3.importNotificationSuccessMessage), {}, {
       values: {
         newline: getNewLine,
         logsLink: msg => getImportLogsLink(msg, props.projectKey),
@@ -1725,7 +1906,7 @@ var _ref = {
 const ImportPreparingTextNotification = props => jsxRuntime.jsx("div", {
   css: _ref,
   children: jsxRuntime.jsx(uiKit.Text.Body, {
-    intlMessage: _objectSpread$2(_objectSpread$2({}, messages$2.importNotificationPrepareMessage), {}, {
+    intlMessage: _objectSpread$2(_objectSpread$2({}, messages$3.importNotificationPrepareMessage), {}, {
       values: {
         newline: getNewLine,
         logsLink: msg => getImportLogsLink(msg, props.projectKey),
@@ -1749,7 +1930,7 @@ const ImportConfirmationModal = () => {
   const showNotification = actionsGlobal.useShowNotification();
   return jsxRuntime.jsx(applicationComponents.ConfirmationDialog, {
     title: intl.formatMessage(sharedMessages[`modalTitle.${state.resourceType}`]),
-    labelPrimary: intl.formatMessage(messages$2.startImportButton),
+    labelPrimary: intl.formatMessage(messages$3.startImportButton),
     isOpen: true,
     onClose: () => onClose({
       shouldDeleteImportContainer: true
@@ -1779,11 +1960,21 @@ const ImportConfirmationModal = () => {
         }, {
           dismissAfter: 5000
         });
-        await operations.processUploadedFile({
-          projectKey,
-          importContainerKey: state.containerKey,
-          resourceType: state.resourceType
-        });
+        const isJobBasedFlow = !!state.jobId;
+        if (isJobBasedFlow) {
+          await operations.processFileImportJob({
+            projectKey,
+            resourceType: state.resourceType,
+            importContainerKey: state.containerKey,
+            jobId: state.jobId
+          });
+        } else {
+          await operations.processUploadedFile({
+            projectKey,
+            importContainerKey: state.containerKey,
+            resourceType: state.resourceType
+          });
+        }
         onStartImportSuccess();
         showNotification({
           kind: 'info',
@@ -1812,7 +2003,7 @@ const ImportConfirmationModal = () => {
         scale: "xl",
         children: [jsxRuntime.jsxs("div", {
           children: [jsxRuntime.jsx(uiKit.Text.Body, {
-            intlMessage: _objectSpread$2(_objectSpread$2({}, messages$2.confirmationBodyText), {}, {
+            intlMessage: _objectSpread$2(_objectSpread$2({}, messages$3.confirmationBodyText), {}, {
               values: {
                 projectName: projectName,
                 count: intl.formatNumber(state?.uploadFileResponse?.rowsCount || 0),
@@ -1820,10 +2011,10 @@ const ImportConfirmationModal = () => {
               }
             })
           }), jsxRuntime.jsx(uiKit.Text.Body, {
-            intlMessage: messages$2.confirmationBodyNote
+            intlMessage: messages$3.confirmationBodyNote
           })]
         }), jsxRuntime.jsx(uiKit.Text.Body, {
-          intlMessage: messages$2.confirmationBodyQuestion
+          intlMessage: messages$3.confirmationBodyQuestion
         })]
       })
     })
@@ -1840,11 +2031,21 @@ function getBold(msg) {
 const UploadResult = () => {
   const _useImportResourcesCo = useImportResourcesContext(),
     state = _useImportResourcesCo.state;
-  if (state.fileUploadErrors.length > 0) return jsxRuntime.jsx(UploadErrorsModal, {});
-  if (state.uploadFileResponse?.invalid > 0) return jsxRuntime.jsx(UploadRowErrorsModal, {});
+  const hasFileLevelErrors = state.fileUploadErrors.length > 0;
+  const hasRowLevelErrors = (state.uploadFileResponse?.invalid ?? 0) > 0;
+  if (hasFileLevelErrors || hasRowLevelErrors) {
+    return jsxRuntime.jsx(UploadErrorsModal, {});
+  }
   return jsxRuntime.jsx(UploadPreviewModal, {});
 };
 
+var messages$2 = reactIntl.defineMessages({
+  validatingResources: {
+    id: 'ImportResourcesModal.Uploading.validatingResources',
+    defaultMessage: 'Validating {processed} / {total} {resourceType}'
+  }
+});
+
 const Uploading = () => {
   const intl = reactIntl.useIntl();
   const _useImportResourcesCo = useImportResourcesContext(),
@@ -1852,6 +2053,12 @@ const Uploading = () => {
     actions = _useImportResourcesCo.actions,
     onClose = _useImportResourcesCo.onClose;
   if (!state.droppedFile?.name) return null;
+  const showValidationProgress = state.isValidating && state.validationProcessed && state.validationProcessed > 0 && state.totalResourceCount && state.resourceType;
+  const statusMessage = showValidationProgress ? intl.formatMessage(messages$2.validatingResources, {
+    processed: intl.formatNumber(state.validationProcessed),
+    total: intl.formatNumber(state.totalResourceCount),
+    resourceType: intl.formatMessage(resourceTypeToPluralMessage(state.resourceType))
+  }) : undefined;
   return jsxRuntime.jsx(operations.UploadingModal, {
     isOpen: true,
     title: intl.formatMessage(sharedMessages[`modalTitle.${state.resourceType}`]),
@@ -1865,7 +2072,8 @@ const Uploading = () => {
     },
     onClose: () => onClose({
       shouldDeleteImportContainer: true
-    })
+    }),
+    statusMessage: statusMessage
   });
 };
 
@@ -1908,7 +2116,7 @@ const resourceTypeToDisplayName = resourceType => {
     case IMPORTABLE_RESOURCES.CATEGORY:
       return messages$1.categories;
     default:
-      throw new Error(`Unknown resource type: ${resourceType}`);
+      throw new operations.UnexpectedResourceTypeError(resourceType);
   }
 };
 const ResourceTypeSelection = () => {
@@ -1948,13 +2156,16 @@ const Instructions = () => {
   const intl = reactIntl.useIntl();
   const _useImportResourcesCo = useImportResourcesContext(),
     state = _useImportResourcesCo.state;
+  const isFileImportJobFlowEnabled = applicationShell.useFeatureToggle(FILE_IMPORT_JOB_FLOW);
   const templateLink = operations.RESOURCE_TYPE_TEMPLATE_DOWNLOAD_LINKS[state.resourceType];
   const documentationLink = operations.RESOURCE_TYPE_DOCUMENTATION_LINKS[state.resourceType];
+  const maxFileSize = isFileImportJobFlowEnabled ? operations.IMPORT_MAX_FILE_SIZE_MB : operations.IMPORT_LEGACY_MAX_FILE_SIZE_MB;
+  const maxItemCount = isFileImportJobFlowEnabled ? operations.IMPORT_MAX_ITEM_COUNT : operations.IMPORT_LEGACY_MAX_ROW_COUNT;
   return jsxRuntime.jsx(uiKit.Text.Body, {
     intlMessage: _objectSpread$1(_objectSpread$1({}, messages.fileUploadInstructions), {}, {
       values: {
-        fileSize: intl.formatNumber(operations.MAX_FILE_SIZE_MB),
-        rowLimit: intl.formatNumber(operations.MAX_ROW_COUNT),
+        fileSize: intl.formatNumber(maxFileSize),
+        rowLimit: intl.formatNumber(maxItemCount),
         csvTemplateLink: msg => jsxRuntime.jsx(uiKit.Link, {
           tone: "secondary",
           isExternal: true,