@commercetools-frontend-extensions/import-resources-modal 1.2.4 → 1.2.6

package/dist/{index-4a4bda05.cjs.prod.js → index-23bf2043.cjs.prod.js}

@@ -16,7 +16,14 @@ var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
 var React = require('react');
 var sdk = require('@commercetools-frontend/sdk');
 var constants = require('@commercetools-frontend/constants');
-var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
+var applicationShell = require('@commercetools-frontend/application-shell');
+var _Reflect$construct = require('@babel/runtime-corejs3/core-js-stable/reflect/construct');
+var _createClass = require('@babel/runtime-corejs3/helpers/createClass');
+var _classCallCheck = require('@babel/runtime-corejs3/helpers/classCallCheck');
+var _possibleConstructorReturn = require('@babel/runtime-corejs3/helpers/possibleConstructorReturn');
+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 pluralize = require('pluralize');
 var _Promise = require('@babel/runtime-corejs3/core-js-stable/promise');
 var _Array$isArray = require('@babel/runtime-corejs3/core-js-stable/array/is-array');
@@ -27,27 +34,19 @@ var _includesInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/i
 var Papa = require('papaparse');
 var _reduceInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/reduce');
 var _JSON$stringify = require('@babel/runtime-corejs3/core-js-stable/json/stringify');
-var _someInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/some');
 require('@babel/runtime-corejs3/core-js-stable/instance/starts-with');
 require('querystring');
 require('ramda');
-var applicationShell = require('@commercetools-frontend/application-shell');
-var _Reflect$construct = require('@babel/runtime-corejs3/core-js-stable/reflect/construct');
-var _createClass = require('@babel/runtime-corejs3/helpers/createClass');
-var _classCallCheck = require('@babel/runtime-corejs3/helpers/classCallCheck');
-var _inherits = require('@babel/runtime-corejs3/helpers/inherits');
-var _possibleConstructorReturn = require('@babel/runtime-corejs3/helpers/possibleConstructorReturn');
-var _getPrototypeOf = require('@babel/runtime-corejs3/helpers/getPrototypeOf');
-var _wrapNativeSuper = require('@babel/runtime-corejs3/helpers/wrapNativeSuper');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
 var applicationComponents = require('@commercetools-frontend/application-components');
 var fullstory = require('@commercetools-frontend/fullstory');
 var uiKit = require('@commercetools-frontend/ui-kit');
-var actionsGlobal = require('@commercetools-frontend/actions-global');
-var sentry = require('@commercetools-frontend/sentry');
+var _someInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/some');
 var reactDropzone = require('react-dropzone');
+var actionsGlobal = require('@commercetools-frontend/actions-global');
 var _styled = require('@emotion/styled/base');
 var react = require('@emotion/react');
+var sentry = require('@commercetools-frontend/sentry');
 var _sliceInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/slice');
 var DataTable = require('@commercetools-uikit/data-table');
 var i18n = require('@commercetools-frontend/i18n');
@@ -64,7 +63,7 @@ var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$def
 var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
 var _everyInstanceProperty__default = /*#__PURE__*/_interopDefault(_everyInstanceProperty);
 var React__default = /*#__PURE__*/_interopDefault(React);
-var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
+var _Reflect$construct__default = /*#__PURE__*/_interopDefault(_Reflect$construct);
 var _Promise__default = /*#__PURE__*/_interopDefault(_Promise);
 var _Array$isArray__default = /*#__PURE__*/_interopDefault(_Array$isArray);
 var _flatMapInstanceProperty__default = /*#__PURE__*/_interopDefault(_flatMapInstanceProperty);
@@ -75,38 +74,183 @@ var Papa__default = /*#__PURE__*/_interopDefault(Papa);
 var _reduceInstanceProperty__default = /*#__PURE__*/_interopDefault(_reduceInstanceProperty);
 var _JSON$stringify__default = /*#__PURE__*/_interopDefault(_JSON$stringify);
 var _someInstanceProperty__default = /*#__PURE__*/_interopDefault(_someInstanceProperty);
-var _Reflect$construct__default = /*#__PURE__*/_interopDefault(_Reflect$construct);
 var _styled__default = /*#__PURE__*/_interopDefault(_styled);
 var _sliceInstanceProperty__default = /*#__PURE__*/_interopDefault(_sliceInstanceProperty);
 var DataTable__default = /*#__PURE__*/_interopDefault(DataTable);
 
-const EnabledResourceType = {
-  category: true,
-  product: true,
-  inventory: true,
-  'discount-code': true
-};
-function isResourceType(maybeResourceType) {
-  return typeof maybeResourceType === 'string' && maybeResourceType in EnabledResourceType;
-}
-function assertResourceType(maybeResourceType) {
-  if (isResourceType(maybeResourceType)) return;
-  throw new Error("Invalid value: ".concat(maybeResourceType));
+function ownKeys$f(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$f(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$f(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$f(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+function reducer(state, action) {
+  if (action.type === 'setCurrentStep') return _objectSpread$f(_objectSpread$f({}, state), {}, {
+    currentStep: action.currentStep,
+    progress: 0
+  });
+  if (action.type === 'setUploadFileResponse') return _objectSpread$f(_objectSpread$f({}, state), {}, {
+    uploadFileResponse: action.uploadFileResponse
+  });
+  if (action.type === 'setResourceType') return _objectSpread$f(_objectSpread$f({}, state), {}, {
+    resourceType: action.resourceType
+  });
+  if (action.type === 'setContainerKey') return _objectSpread$f(_objectSpread$f({}, state), {}, {
+    containerKey: action.containerKey
+  });
+  if (action.type === 'cancelImport') return _objectSpread$f(_objectSpread$f({}, state), {}, {
+    currentStep: 1,
+    containerKey: undefined,
+    fileUploadClientSideErrors: [],
+    uploadFileResponse: undefined,
+    droppedFile: undefined,
+    dropAreaState: 'disabled',
+    progress: 0
+  });
+  if (action.type === 'uploadNewFile') return _objectSpread$f(_objectSpread$f({}, state), {}, {
+    currentStep: 1,
+    containerKey: undefined,
+    fileUploadClientSideErrors: [],
+    uploadFileResponse: undefined,
+    droppedFile: undefined,
+    dropAreaState: 'ready-for-drop',
+    progress: 0
+  });
+  if (action.type === 'setDroppedFile') {
+    return _objectSpread$f(_objectSpread$f({}, state), {}, {
+      droppedFile: action.droppedFile
+    });
+  }
+  if (action.type === 'setFileUploadClientSideErrors') {
+    return _objectSpread$f(_objectSpread$f({}, state), {}, {
+      fileUploadClientSideErrors: action.fileUploadClientSideErrors
+    });
+  }
+  if (action.type === 'setAbortController') {
+    return _objectSpread$f(_objectSpread$f({}, state), {}, {
+      abortController: action.abortController
+    });
+  }
+  if (action.type === 'setProgress') {
+    return _objectSpread$f(_objectSpread$f({}, state), {}, {
+      progress: action.progress
+    });
+  }
+  throw new Error(getUnknownActionError(action));
 }
-function isError(maybeError) {
-  if (maybeError instanceof Error) return true;
-  return false;
+function getUnknownActionError(actionType) {
+  return `Unkown type: ${actionType}`;
 }
+const initialState = {
+  currentStep: 1,
+  abortController: new AbortController(),
+  dropAreaState: 'disabled',
+  uploadFileResponse: undefined,
+  fileUploadClientSideErrors: [],
+  resourceType: 'category',
+  containerKey: undefined,
+  progress: 0
+};
 
-// eslint-disable-next-line @typescript-eslint/ban-types
-function hasOwnProperty(obj, prop) {
-  return typeof obj === 'object' && obj !== null && obj.hasOwnProperty(prop);
-}
-function hasRequiredFields(maybeValidObject, requiredFields) {
-  return typeof maybeValidObject === 'object' && maybeValidObject !== null && _everyInstanceProperty__default["default"](requiredFields).call(requiredFields, property => hasOwnProperty(maybeValidObject, property));
-}
+function _callSuper$2(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct$2() ? _Reflect$construct__default["default"](o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct$2() { try { var t = !Boolean.prototype.valueOf.call(_Reflect$construct__default["default"](Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct$2 = function () { return !!t; })(); }
+let MissingImportResourceProviderError = /*#__PURE__*/function (_Error) {
+  function MissingImportResourceProviderError() {
+    var _this;
+    _classCallCheck(this, MissingImportResourceProviderError);
+    _this = _callSuper$2(this, MissingImportResourceProviderError, ['useImportResourcesContext must be used within ImportResourcesProvider']);
+    _this.name = 'MissingImportResourceProviderError';
+    return _this;
+  }
+  _inherits(MissingImportResourceProviderError, _Error);
+  return _createClass(MissingImportResourceProviderError);
+}( /*#__PURE__*/_wrapNativeSuper(Error));
+
+function _callSuper$1(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct$1() ? _Reflect$construct__default["default"](o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct$1() { try { var t = !Boolean.prototype.valueOf.call(_Reflect$construct__default["default"](Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct$1 = function () { return !!t; })(); }
+let UnexpectedColumnError = /*#__PURE__*/function (_Error) {
+  function UnexpectedColumnError(columnName) {
+    var _this;
+    _classCallCheck(this, UnexpectedColumnError);
+    _this = _callSuper$1(this, UnexpectedColumnError, [`Unexpected column "${columnName}"`]);
+    _this.name = 'UnexpectedColumnError';
+    return _this;
+  }
+  _inherits(UnexpectedColumnError, _Error);
+  return _createClass(UnexpectedColumnError);
+}( /*#__PURE__*/_wrapNativeSuper(Error));
+
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? _Reflect$construct__default["default"](o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(_Reflect$construct__default["default"](Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function () { return !!t; })(); }
+let HttpError = /*#__PURE__*/function (_Error) {
+  function HttpError(statusCode, statusText, errorData) {
+    var _this;
+    _classCallCheck(this, HttpError);
+    _this = _callSuper(this, HttpError, [`HTTP Error! Status code: ${statusCode}, message: "${statusText ? statusText : ''}"`]);
+    _this.statusCode = void 0;
+    _this.errorData = void 0;
+    _this.name = 'HttpError';
+    _this.statusCode = statusCode;
+    _this.errorData = errorData;
+    return _this;
+  }
+  _inherits(HttpError, _Error);
+  return _createClass(HttpError);
+}( /*#__PURE__*/_wrapNativeSuper(Error));
+
+function ownKeys$e(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$e(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$e(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$e(Object(t))).call(_context3, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+const addProxyPrefixToUrl = (uri, proxy) => {
+  return proxy ? `/proxy/${proxy}${uri}` : uri;
+};
+const fetchUsingXhr = _ref2 => {
+  let url = _ref2.url,
+    payload = _ref2.payload,
+    config = _ref2.config,
+    onProgress = _ref2.onProgress,
+    onSuccess = _ref2.onSuccess,
+    onError = _ref2.onError;
+  const options = applicationShell.createHttpClientOptions({
+    headers: _objectSpread$e({
+      'Content-Type': 'application/json'
+    }, config?.headers)
+  });
+  const xhr = new XMLHttpRequest();
+  xhr.open(config?.method, applicationShell.buildApiUrl(addProxyPrefixToUrl(url, config?.proxy)), true);
+  // Include cookies in the request
+  xhr.withCredentials = true;
+  if (options.headers) {
+    var _context;
+    _forEachInstanceProperty__default["default"](_context = _Object$keys__default["default"](options.headers)).call(_context, key => {
+      xhr.setRequestHeader(key, options.headers[key]);
+    });
+  }
+  xhr.upload.onprogress = function (event) {
+    if (event.lengthComputable) {
+      const percentComplete = event.loaded / event.total * 100;
+      onProgress(percentComplete);
+    }
+  };
+  xhr.onload = function () {
+    const data = JSON.parse(xhr.responseText);
+    // Code copied from `executeHttpClientRequest` to replicate the same behavior
+    const refreshedSessionToken = xhr.getResponseHeader('x-refreshed-session-token');
+    if (refreshedSessionToken) {
+      applicationShellConnectors.oidcStorage.setActiveSession(refreshedSessionToken);
+    }
+    if (xhr.status >= 200 && xhr.status < 300) {
+      onSuccess(data);
+    } else {
+      onError(new HttpError(xhr.status, xhr.statusText, data));
+    }
+  };
+  xhr.onerror = function () {
+    const errorData = JSON.parse(xhr.responseText);
+    onError(new HttpError(xhr.status, xhr.statusText, errorData));
+  };
+  xhr.onabort = function () {
+    onError(new DOMException('Aborted', 'AbortError'));
+  };
+  xhr.send(payload);
+  return xhr;
+};
 
-var _context;
 const DEFAULT_DELIMITER = ',';
 const INITIAL_COLUMN_DISPLAY_COUNT = 8;
 const IMPORT_TAG_KEYS = {
@@ -115,7 +259,7 @@ const IMPORT_TAG_KEYS = {
 const IMPORT_TAG_VALUES = {
   fileUpload: 'file-upload'
 };
-const TAG_KEY_SOURCE_FILE_UPLOAD = _concatInstanceProperty__default["default"](_context = "".concat(IMPORT_TAG_KEYS.source, ":")).call(_context, IMPORT_TAG_VALUES.fileUpload);
+const TAG_KEY_SOURCE_FILE_UPLOAD = `${IMPORT_TAG_KEYS.source}:${IMPORT_TAG_VALUES.fileUpload}`;
 
 const IMPORTABLE_RESOURCES = {
   CATEGORY: 'category',
@@ -131,10 +275,10 @@ const FILE_SIZE_LIMITS_MB = {
   [IMPORTABLE_RESOURCES.DISCOUNT_CODE]: 10
 };
 const ROW_LIMITS = {
-  [IMPORTABLE_RESOURCES.CATEGORY]: 5000,
-  [IMPORTABLE_RESOURCES.INVENTORY]: 4000,
-  [IMPORTABLE_RESOURCES.PRODUCT]: 70000,
-  [IMPORTABLE_RESOURCES.DISCOUNT_CODE]: 4000
+  [IMPORTABLE_RESOURCES.CATEGORY]: 5_000,
+  [IMPORTABLE_RESOURCES.INVENTORY]: 4_000,
+  [IMPORTABLE_RESOURCES.PRODUCT]: 70_000,
+  [IMPORTABLE_RESOURCES.DISCOUNT_CODE]: 4_000
 };
 const RESOURCE_TYPE_TEMPLATE_DOWNLOAD_LINKS = {
   [IMPORTABLE_RESOURCES.CATEGORY]: 'https://docs.commercetools.com/merchant-center/downloads/category_import_template.csv',
@@ -149,9 +293,8 @@ const RESOURCE_TYPE_DOCUMENTATION_LINKS = {
   [IMPORTABLE_RESOURCES.DISCOUNT_CODE]: 'https://docs.commercetools.com/merchant-center/import-discount-codes#supported-headers-and-values'
 };
 
-function ownKeys$f(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$f(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$f(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$f(Object(t))).call(_context3, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
-
+function ownKeys$d(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$d(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$d(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$d(Object(t))).call(_context3, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
 /**
  * This function checks if the provided `expectedDelimiter` is used consistently in the first 10 lines of a CSV file.
  * Returns a Promise that resolves to an object containing a boolean `isValid` property and the detected delimiter `delimiter`.
@@ -206,7 +349,7 @@ const mapUploadFileErrorsResponseToUploadFileErrorRows = uploadFileErrorsRespons
 };
 const mapUploadFileClientSideErrorsToUploadFileErrorRows = uploadFileClientSideErrors => {
   let idCounter = 1;
-  return _mapInstanceProperty__default["default"](uploadFileClientSideErrors).call(uploadFileClientSideErrors, uploadFileClientSideError => _objectSpread$f(_objectSpread$f({}, uploadFileClientSideError), {}, {
+  return _mapInstanceProperty__default["default"](uploadFileClientSideErrors).call(uploadFileClientSideErrors, uploadFileClientSideError => _objectSpread$d(_objectSpread$d({}, uploadFileClientSideError), {}, {
     id: String(idCounter++)
   }));
 };
@@ -264,128 +407,43 @@ const encodeFileNameWithTimestampToContainerKey = fileName => {
 };
 
 function getCreateImportContainerURL(projectKey) {
-  return "/".concat(projectKey, "/import-containers");
+  return `/${projectKey}/import-containers`;
 }
 function getDeleteImportContainerURL(projectKey, containerKey) {
-  var _context6;
-  return _concatInstanceProperty__default["default"](_context6 = "/".concat(projectKey, "/import-containers/")).call(_context6, containerKey);
+  return `/${projectKey}/import-containers/${containerKey}`;
 }
 function getFileUploadURL(projectKey, resourceType, containerKey) {
-  var _context8, _context9;
-  return _concatInstanceProperty__default["default"](_context8 = _concatInstanceProperty__default["default"](_context9 = "/".concat(projectKey, "/")).call(_context9, pluralize.plural(resourceType), "/import-containers/")).call(_context8, containerKey, "/file-upload");
+  return `/${projectKey}/${pluralize.plural(resourceType)}/import-containers/${containerKey}/file-upload`;
 }
 function getProccessFileURL(projectKey, resourceType, containerKey) {
-  var _context10, _context11;
-  return _concatInstanceProperty__default["default"](_context10 = _concatInstanceProperty__default["default"](_context11 = "/".concat(projectKey, "/")).call(_context11, pluralize.plural(resourceType), "/import-containers/")).call(_context10, containerKey, "/process-file");
+  return `/${projectKey}/${pluralize.plural(resourceType)}/import-containers/${containerKey}/process-file`;
 }
 
-function _createSuper$2(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$2(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = _Reflect$construct__default["default"](Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct$2() { try { var t = !Boolean.prototype.valueOf.call(_Reflect$construct__default["default"](Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct$2 = function () { return !!t; })(); }
-let MissingImportResourceProviderError = /*#__PURE__*/function (_Error) {
-  _inherits(MissingImportResourceProviderError, _Error);
-  var _super = _createSuper$2(MissingImportResourceProviderError);
-  function MissingImportResourceProviderError() {
-    var _this;
-    _classCallCheck(this, MissingImportResourceProviderError);
-    _this = _super.call(this, 'useImportResourcesContext must be used within ImportResourcesProvider');
-    _this.name = 'MissingImportResourceProviderError';
-    return _this;
-  }
-  return _createClass(MissingImportResourceProviderError);
-}( /*#__PURE__*/_wrapNativeSuper(Error));
+const EnabledResourceType = {
+  category: true,
+  product: true,
+  inventory: true,
+  'discount-code': true
+};
+function isResourceType(maybeResourceType) {
+  return typeof maybeResourceType === 'string' && maybeResourceType in EnabledResourceType;
+}
+function assertResourceType(maybeResourceType) {
+  if (isResourceType(maybeResourceType)) return;
+  throw new Error(`Invalid value: ${maybeResourceType}`);
+}
+function isError(maybeError) {
+  if (maybeError instanceof Error) return true;
+  return false;
+}
 
-function _createSuper$1(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = _Reflect$construct__default["default"](Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct$1() { try { var t = !Boolean.prototype.valueOf.call(_Reflect$construct__default["default"](Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct$1 = function () { return !!t; })(); }
-let UnexpectedColumnError = /*#__PURE__*/function (_Error) {
-  _inherits(UnexpectedColumnError, _Error);
-  var _super = _createSuper$1(UnexpectedColumnError);
-  function UnexpectedColumnError(columnName) {
-    var _this;
-    _classCallCheck(this, UnexpectedColumnError);
-    _this = _super.call(this, "Unexpected column \"".concat(columnName, "\""));
-    _this.name = 'UnexpectedColumnError';
-    return _this;
-  }
-  return _createClass(UnexpectedColumnError);
-}( /*#__PURE__*/_wrapNativeSuper(Error));
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = _Reflect$construct__default["default"](Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(_Reflect$construct__default["default"](Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function () { return !!t; })(); }
-let HttpError = /*#__PURE__*/function (_Error) {
-  _inherits(HttpError, _Error);
-  var _super = _createSuper(HttpError);
-  function HttpError(statusCode, statusText, errorData) {
-    var _context;
-    var _this;
-    _classCallCheck(this, HttpError);
-    _this = _super.call(this, _concatInstanceProperty__default["default"](_context = "HTTP Error! Status code: ".concat(statusCode, ", message: \"")).call(_context, statusText ? statusText : '', "\""));
-    _this.statusCode = void 0;
-    _this.errorData = void 0;
-    _this.name = 'HttpError';
-    _this.statusCode = statusCode;
-    _this.errorData = errorData;
-    return _this;
-  }
-  return _createClass(HttpError);
-}( /*#__PURE__*/_wrapNativeSuper(Error));
-
-function ownKeys$e(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$e(e) { for (var r = 1; r < arguments.length; r++) { var _context3, _context4; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context3 = ownKeys$e(Object(t), !0)).call(_context3, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context4 = ownKeys$e(Object(t))).call(_context4, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
-const addProxyPrefixToUrl = (uri, proxy) => {
-  var _context;
-  return proxy ? _concatInstanceProperty__default["default"](_context = "/proxy/".concat(proxy)).call(_context, uri) : uri;
-};
-const fetchUsingXhr = _ref2 => {
-  let url = _ref2.url,
-    payload = _ref2.payload,
-    config = _ref2.config,
-    onProgress = _ref2.onProgress,
-    onSuccess = _ref2.onSuccess,
-    onError = _ref2.onError;
-  const options = applicationShell.createHttpClientOptions({
-    headers: _objectSpread$e({
-      'Content-Type': 'application/json'
-    }, config === null || config === void 0 ? void 0 : config.headers)
-  });
-  const xhr = new XMLHttpRequest();
-  xhr.open(config === null || config === void 0 ? void 0 : config.method, applicationShell.buildApiUrl(addProxyPrefixToUrl(url, config === null || config === void 0 ? void 0 : config.proxy)), true);
-  // Include cookies in the request
-  xhr.withCredentials = true;
-  if (options.headers) {
-    var _context2;
-    _forEachInstanceProperty__default["default"](_context2 = _Object$keys__default["default"](options.headers)).call(_context2, key => {
-      xhr.setRequestHeader(key, options.headers[key]);
-    });
-  }
-  xhr.upload.onprogress = function (event) {
-    if (event.lengthComputable) {
-      const percentComplete = event.loaded / event.total * 100;
-      onProgress(percentComplete);
-    }
-  };
-  xhr.onload = function () {
-    const data = JSON.parse(xhr.responseText);
-    // Code copied from `executeHttpClientRequest` to replicate the same behavior
-    const refreshedSessionToken = xhr.getResponseHeader('x-refreshed-session-token');
-    if (refreshedSessionToken) {
-      applicationShellConnectors.oidcStorage.setActiveSession(refreshedSessionToken);
-    }
-    if (xhr.status >= 200 && xhr.status < 300) {
-      onSuccess(data);
-    } else {
-      onError(new HttpError(xhr.status, xhr.statusText, data));
-    }
-  };
-  xhr.onerror = function () {
-    const errorData = JSON.parse(xhr.responseText);
-    onError(new HttpError(xhr.status, xhr.statusText, errorData));
-  };
-  xhr.onabort = function () {
-    onError(new DOMException('Aborted', 'AbortError'));
-  };
-  xhr.send(payload);
-  return xhr;
-};
+// eslint-disable-next-line @typescript-eslint/ban-types
+function hasOwnProperty(obj, prop) {
+  return typeof obj === 'object' && obj !== null && obj.hasOwnProperty(prop);
+}
+function hasRequiredFields(maybeValidObject, requiredFields) {
+  return typeof maybeValidObject === 'object' && maybeValidObject !== null && _everyInstanceProperty__default["default"](requiredFields).call(requiredFields, property => hasOwnProperty(maybeValidObject, property));
+}
 
 function uploadFileForImport(_ref) {
   let projectKey = _ref.projectKey,
@@ -416,8 +474,8 @@ function uploadFileForImport(_ref) {
   });
 }
 
-function ownKeys$d(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$d(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$d(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$d(Object(t))).call(_context3, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+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 _context2, _context3; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context2 = ownKeys$c(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$c(Object(t))).call(_context3, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
 function createImportContainerForFileUpload(importContainerDraft, projectKey, asyncDispatch) {
   return asyncDispatch(sdk.actions.post({
     mcApiProxyTarget: constants.MC_API_PROXY_TARGETS.IMPORT,
@@ -426,7 +484,7 @@ function createImportContainerForFileUpload(importContainerDraft, projectKey, as
       accept: 'application/json',
       'Content-Type': 'application/json'
     },
-    payload: _JSON$stringify__default["default"](_objectSpread$d(_objectSpread$d({}, importContainerDraft), {}, {
+    payload: _JSON$stringify__default["default"](_objectSpread$c(_objectSpread$c({}, importContainerDraft), {}, {
       tags: [TAG_KEY_SOURCE_FILE_UPLOAD]
     }))
   }));
@@ -465,86 +523,13 @@ function assertProcessFileResponse(maybeProcessFileResponse) {
   throw new Error('Invalid response');
 }
 
-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 reducer(state, action) {
-  if (action.type === 'setCurrentStep') return _objectSpread$c(_objectSpread$c({}, state), {}, {
-    currentStep: action.currentStep,
-    progress: 0
-  });
-  if (action.type === 'setUploadFileResponse') return _objectSpread$c(_objectSpread$c({}, state), {}, {
-    uploadFileResponse: action.uploadFileResponse
-  });
-  if (action.type === 'setResourceType') return _objectSpread$c(_objectSpread$c({}, state), {}, {
-    resourceType: action.resourceType
-  });
-  if (action.type === 'setContainerKey') return _objectSpread$c(_objectSpread$c({}, state), {}, {
-    containerKey: action.containerKey
-  });
-  if (action.type === 'cancelImport') return _objectSpread$c(_objectSpread$c({}, state), {}, {
-    currentStep: 1,
-    containerKey: undefined,
-    fileUploadClientSideErrors: [],
-    uploadFileResponse: undefined,
-    droppedFile: undefined,
-    dropAreaState: 'disabled',
-    progress: 0
-  });
-  if (action.type === 'uploadNewFile') return _objectSpread$c(_objectSpread$c({}, state), {}, {
-    currentStep: 1,
-    containerKey: undefined,
-    fileUploadClientSideErrors: [],
-    uploadFileResponse: undefined,
-    droppedFile: undefined,
-    dropAreaState: 'ready-for-drop',
-    progress: 0
-  });
-  if (action.type === 'setDroppedFile') {
-    return _objectSpread$c(_objectSpread$c({}, state), {}, {
-      droppedFile: action.droppedFile
-    });
-  }
-  if (action.type === 'setFileUploadClientSideErrors') {
-    return _objectSpread$c(_objectSpread$c({}, state), {}, {
-      fileUploadClientSideErrors: action.fileUploadClientSideErrors
-    });
-  }
-  if (action.type === 'setAbortController') {
-    return _objectSpread$c(_objectSpread$c({}, state), {}, {
-      abortController: action.abortController
-    });
-  }
-  if (action.type === 'setProgress') {
-    return _objectSpread$c(_objectSpread$c({}, state), {}, {
-      progress: action.progress
-    });
-  }
-  throw new Error(getUnknownActionError(action));
-}
-function getUnknownActionError(actionType) {
-  return "Unkown type: ".concat(actionType);
-}
-const initialState = {
-  currentStep: 1,
-  abortController: new AbortController(),
-  dropAreaState: 'disabled',
-  uploadFileResponse: undefined,
-  fileUploadClientSideErrors: [],
-  resourceType: 'category',
-  containerKey: undefined,
-  progress: 0
-};
-
 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();
 const ImportResourcesProvider = props => {
-  const _useApplicationContex = applicationShellConnectors.useApplicationContext(context => {
-      var _context$project;
-      return {
-        projectKey: (_context$project = context.project) === null || _context$project === void 0 ? void 0 : _context$project.key
-      };
-    }),
+  const _useApplicationContex = applicationShellConnectors.useApplicationContext(context => ({
+      projectKey: context.project?.key
+    })),
     projectKey = _useApplicationContex.projectKey;
   const asyncDispatch = sdk.useAsyncDispatch();
   const _React$useReducer = React__default["default"].useReducer(reducer, _objectSpread$b(_objectSpread$b({}, initialState), {}, {
@@ -625,6 +610,159 @@ const ImportResourcesProvider = props => {
   });
 };
 
+const getBorderColor = state => {
+  const borderColors = {
+    default: '#909dbc',
+    error: '#e60050',
+    active: uiKit.customProperties.colorPrimary
+  };
+  return borderColors[state] || borderColors.default;
+};
+const getDashedBorder = function () {
+  let state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '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 = /*#__PURE__*/react.css("border-radius:", uiKit.customProperties.borderRadius6, ";min-height:136px;display:flex;justify-content:center;align-items:center;" + ("" ), "" );
+const disabled = /*#__PURE__*/react.css("" , "" );
+const readyForDrop = /*#__PURE__*/react.css("background-image:url(\"", getDashedBorder(), "\");background-color:", uiKit.customProperties.colorSurface, ";" + ("" ), "" );
+const activeDrag = /*#__PURE__*/react.css("background-image:url(\"", getDashedBorder('active'), "\");background-color:", uiKit.customProperties.colorPrimary95, ";padding:", uiKit.customProperties.spacing50, " 100px;" + ("" ), "" );
+const fileDropped = /*#__PURE__*/react.css("background-image:url(\"", getDashedBorder(), "\");background-color:", uiKit.customProperties.colorSurface, ";padding:", uiKit.customProperties.spacing50, " 100px;" + ("" ), "" );
+const styles = {
+  base,
+  readyForDrop,
+  fileDropped,
+  disabled,
+  activeDrag
+};
+
+const DropWrapper = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "ef0z5en0"
+} )(styles.base, " ", props => {
+  if (props.dropAreaState === 'disabled') {
+    return styles.disabled;
+  }
+  if (props.dropAreaState === 'ready-for-drop') {
+    return styles.readyForDrop;
+  }
+  if (props.dropAreaState === 'active-drag') {
+    return styles.activeDrag;
+  }
+  if (props.dropAreaState === 'file-dropped') {
+    return styles.fileDropped;
+  }
+  return getDefaultDropWrapperStyles(props.dropAreaState);
+}, ";" + ("" ));
+function getDefaultDropWrapperStyles(_dropAreaState) {
+  return /*#__PURE__*/react.css("" , "" );
+}
+
+var ActiveDragDropArea = /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return require('./active-drag-drop-area-1e3ee12d.cjs.prod.js' /* webpackChunkName: "active-drag-drop-area" */); }));
+
+var DisabledDropArea = /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return require('./disabled-drop-area-99c1fa0b.cjs.prod.js' /* webpackChunkName: "disabled-drop-area" */); }));
+
+var EnabledDropArea = /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return require('./enabled-drop-area-fbf01f88.cjs.prod.js' /* webpackChunkName: "enabled-drop-area" */); }));
+
+var FileDropped = /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return require('./file-dropped-area-90b9f712.cjs.prod.js' /* webpackChunkName: "filed-dropped-area" */); }));
+
+function getDropArea(_ref) {
+  let dropAreaState = _ref.dropAreaState,
+    resourceType = _ref.resourceType,
+    isFileDropped = _ref.isFileDropped;
+  if (dropAreaState === 'file-dropped') {
+    return jsxRuntime.jsx(FileDropped, {});
+  }
+  if (dropAreaState === 'disabled' || !resourceType) {
+    return jsxRuntime.jsx(DisabledDropArea, {});
+  }
+  if (dropAreaState === 'ready-for-drop') {
+    return jsxRuntime.jsx(EnabledDropArea, {});
+  }
+  if (dropAreaState === 'active-drag') {
+    return jsxRuntime.jsx(ActiveDragDropArea, {
+      isFileDropped: isFileDropped
+    });
+  }
+  return fallbackDropArea();
+}
+function fallbackDropArea(_invalidDropAreaState) {
+  return jsxRuntime.jsx(DisabledDropArea, {});
+}
+function getDropAreaState(flags) {
+  if (flags.isDragActive) {
+    return 'active-drag';
+  }
+  if (flags.hasResourceType) {
+    return 'disabled';
+  }
+  if (flags.isReady) {
+    return 'file-dropped';
+  }
+  return 'ready-for-drop';
+}
+
+var messages$5 = reactIntl.defineMessages({
+  dragAndDropCSV: {
+    id: 'ImportResourcesModal.dragAndDropCSV',
+    description: 'The message telling the user to drag and drop CSV file in the file drop area',
+    defaultMessage: 'Drag and drop CSV'
+  },
+  or: {
+    id: 'ImportResourcesModal.or',
+    description: 'The word "or" in the drag and drop message',
+    defaultMessage: 'or'
+  },
+  browseButton: {
+    id: 'ImportResourcesModal.browseFile',
+    defaultMessage: 'Browse file'
+  },
+  uploadFile: {
+    id: 'ImportResourcesModal.uploadFile',
+    description: 'Label for a button on the file upload page, shown on active drop area state',
+    defaultMessage: 'Upload file'
+  },
+  chooseFile: {
+    id: 'ImportResourcesModal.chooseFile',
+    description: 'Label for a button on the file upload page, shown on ready to upload state',
+    defaultMessage: 'Choose file'
+  },
+  fileUploadFailed: {
+    id: 'ImportResourcesModal.fileUploadFailed',
+    description: 'A title on the file upload page, shown on file upload error state',
+    defaultMessage: 'File upload failed'
+  },
+  fileFormatNotSupported: {
+    id: 'ImportResourcesModal.fileFormatNotSupported',
+    description: 'Error message displayed when a user drags and drops a non-CSV file',
+    defaultMessage: 'Invalid file format: The file is not in CSV format and cannot be processed.'
+  },
+  tooManyFilesError: {
+    id: 'ImportResourcesModal.tooManyFilesError',
+    description: 'Error message displayed when a user drags and drops multiple files at once',
+    defaultMessage: 'Multiple files detected: You can only drag and drop one file at a time.'
+  },
+  genericError: {
+    id: 'ImportResourcesModal.genericError',
+    description: 'Default error message for unexpected file upload issues (for unhandled cases)',
+    defaultMessage: 'Error occurred: Please try uploading the file again or contact our support team for assistance.'
+  },
+  dataType: {
+    id: 'ImportResourcesModal.dataType',
+    description: 'Label for the data type selection dropdown',
+    defaultMessage: 'Data type'
+  },
+  instructions: {
+    id: 'ImportResourcesModal.instructions',
+    description: 'Label for the instructions section',
+    defaultMessage: 'Instructions'
+  }
+});
+
 function useImportResourcesContext() {
   const context = React.useContext(ImportResourcesContext);
   if (!context) {
@@ -633,7 +771,7 @@ function useImportResourcesContext() {
   return context;
 }
 
-var messages$5 = reactIntl.defineMessages({
+var messages$4 = reactIntl.defineMessages({
   fileSizeExceededTitle: {
     id: 'ImportResourcesModal.sizeExceededTitle',
     defaultMessage: 'File size exceeded'
@@ -685,10 +823,7 @@ var messages$5 = reactIntl.defineMessages({
 
 const useUpload = () => {
   const intl = reactIntl.useIntl();
-  const projectKey = applicationShellConnectors.useApplicationContext(context => {
-    var _context$project;
-    return (_context$project = context.project) === null || _context$project === void 0 ? void 0 : _context$project.key;
-  });
+  const projectKey = applicationShellConnectors.useApplicationContext(context => context.project?.key);
   const _useImportResourcesCo = useImportResourcesContext(),
     state = _useImportResourcesCo.state,
     actions = _useImportResourcesCo.actions;
@@ -703,25 +838,25 @@ const useUpload = () => {
     const errors = [];
     const delimiterCheck = await checkDelimiter(file);
     if (!delimiterCheck.isValid) errors.push({
-      title: intl.formatMessage(messages$5.dropAreaWrongDelimiterTitle),
-      description: intl.formatMessage(messages$5.dropAreaWrongDelimiterDescription, {
+      title: intl.formatMessage(messages$4.dropAreaWrongDelimiterTitle),
+      description: intl.formatMessage(messages$4.dropAreaWrongDelimiterDescription, {
         delimiter: delimiterCheck.delimiter
       })
     });
     const rowCount = await getRowCount(file);
     if (rowCount < 1) errors.push({
-      title: intl.formatMessage(messages$5.dropAreaNotEnoughRowsTitle),
-      description: intl.formatMessage(messages$5.dropAreaNotEnoughRowsDescription)
+      title: intl.formatMessage(messages$4.dropAreaNotEnoughRowsTitle),
+      description: intl.formatMessage(messages$4.dropAreaNotEnoughRowsDescription)
     });
     if (state.resourceType && file.size > toBytes(FILE_SIZE_LIMITS_MB[state.resourceType])) errors.push({
-      title: intl.formatMessage(messages$5.fileSizeExceededTitle),
-      description: intl.formatMessage(messages$5.fileSizeExceededDescription, {
+      title: intl.formatMessage(messages$4.fileSizeExceededTitle),
+      description: intl.formatMessage(messages$4.fileSizeExceededDescription, {
         fileSizeLimit: intl.formatNumber(FILE_SIZE_LIMITS_MB[state.resourceType])
       })
     });
     if (state.resourceType && rowCount > ROW_LIMITS[state.resourceType]) errors.push({
-      title: intl.formatMessage(messages$5.rowLimitExceededTitle),
-      description: intl.formatMessage(messages$5.rowLimitExceededDescription, {
+      title: intl.formatMessage(messages$4.rowLimitExceededTitle),
+      description: intl.formatMessage(messages$4.rowLimitExceededDescription, {
         rowLimit: intl.formatNumber(ROW_LIMITS[state.resourceType])
       })
     });
@@ -738,26 +873,24 @@ const useUpload = () => {
       return;
     }
     if (error instanceof HttpError) {
-      var _error$errorData, _error$errorData2;
-      if (((_error$errorData = error.errorData) === null || _error$errorData === void 0 ? void 0 : _error$errorData.code) === 'MISSING_KEY_ERROR') {
+      if (error.errorData?.code === 'MISSING_KEY_ERROR') {
         actions.cancelImport();
         showNotification({
           kind: 'error',
           domain: constants.DOMAINS.PAGE,
-          text: intl.formatMessage(messages$5.unexpectedError)
+          text: intl.formatMessage(messages$4.unexpectedError)
         });
-      } else if (((_error$errorData2 = error.errorData) === null || _error$errorData2 === void 0 ? void 0 : _error$errorData2.invalid) > 0) {
+      } else if (error.errorData?.invalid > 0) {
         actions.setUploadFileResponse(error.errorData);
       } else {
         actions.cancelImport();
         showNotification({
           kind: 'error',
           domain: constants.DOMAINS.PAGE,
-          text: intl.formatMessage(messages$5.unexpectedError)
+          text: intl.formatMessage(messages$4.unexpectedError)
         });
       }
     } else {
-      var _state$droppedFile;
       actions.cancelImport();
       showNotification({
         kind: 'error',
@@ -770,7 +903,7 @@ const useUpload = () => {
           projectKey,
           containerKey: state.containerKey,
           resourceType: state.resourceType,
-          fileSizeInBytes: (_state$droppedFile = state.droppedFile) === null || _state$droppedFile === void 0 ? void 0 : _state$droppedFile.size
+          fileSizeInBytes: state.droppedFile?.size
         }
       });
     }
@@ -815,156 +948,7 @@ const useUpload = () => {
   return {
     handleUploadAndValidation
   };
-};
-
-const getBorderColor = state => {
-  const borderColors = {
-    default: '#909dbc',
-    error: '#e60050',
-    active: uiKit.customProperties.colorPrimary
-  };
-  return borderColors[state] || borderColors.default;
-};
-const getDashedBorder = function () {
-  let state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'default';
-  const color = getBorderColor(state);
-  const svgContent = "\n    <svg width=\"100%\" height=\"100%\" xmlns=\"http://www.w3.org/2000/svg\">\n      <rect width=\"100%\" height=\"100%\" fill=\"none\" stroke=\"".concat(color, "\" stroke-width=\"2px\" stroke-dasharray=\"6,6\" stroke-dashoffset=\"0\" stroke-linecap=\"square\"/>\n    </svg>\n  ");
-  return "data:image/svg+xml,".concat(encodeURIComponent(svgContent));
-};
-const base = /*#__PURE__*/react.css("border-radius:", uiKit.customProperties.borderRadius6, ";min-height:136px;display:flex;justify-content:center;align-items:center;" + ("" ), "" );
-const disabled = /*#__PURE__*/react.css("" , "" );
-const readyForDrop = /*#__PURE__*/react.css("background-image:url(\"", getDashedBorder(), "\");background-color:", uiKit.customProperties.colorSurface, ";" + ("" ), "" );
-const activeDrag = /*#__PURE__*/react.css("background-image:url(\"", getDashedBorder('active'), "\");background-color:", uiKit.customProperties.colorPrimary95, ";padding:", uiKit.customProperties.spacing50, " 100px;" + ("" ), "" );
-const fileDropped = /*#__PURE__*/react.css("background-image:url(\"", getDashedBorder(), "\");background-color:", uiKit.customProperties.colorSurface, ";padding:", uiKit.customProperties.spacing50, " 100px;" + ("" ), "" );
-const styles = {
-  base,
-  readyForDrop,
-  fileDropped,
-  disabled,
-  activeDrag
-};
-
-const DropWrapper = /*#__PURE__*/_styled__default["default"]("div", {
-  target: "ef0z5en0"
-} )(styles.base, " ", props => {
-  if (props.dropAreaState === 'disabled') {
-    return styles.disabled;
-  }
-  if (props.dropAreaState === 'ready-for-drop') {
-    return styles.readyForDrop;
-  }
-  if (props.dropAreaState === 'active-drag') {
-    return styles.activeDrag;
-  }
-  if (props.dropAreaState === 'file-dropped') {
-    return styles.fileDropped;
-  }
-  return getDefaultDropWrapperStyles(props.dropAreaState);
-}, ";" + ("" ));
-function getDefaultDropWrapperStyles(_dropAreaState) {
-  return /*#__PURE__*/react.css("" , "" );
-}
-
-var ActiveDragDropArea = /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return require('./active-drag-drop-area-89f8264c.cjs.prod.js' /* webpackChunkName: "active-drag-drop-area" */); }));
-
-var DisabledDropArea = /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return require('./disabled-drop-area-99c1fa0b.cjs.prod.js' /* webpackChunkName: "disabled-drop-area" */); }));
-
-var EnabledDropArea = /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return require('./enabled-drop-area-77836aae.cjs.prod.js' /* webpackChunkName: "enabled-drop-area" */); }));
-
-var FileDropped = /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return require('./file-dropped-area-47e83d97.cjs.prod.js' /* webpackChunkName: "filed-dropped-area" */); }));
-
-function getDropArea(_ref) {
-  let dropAreaState = _ref.dropAreaState,
-    resourceType = _ref.resourceType,
-    isFileDropped = _ref.isFileDropped;
-  if (dropAreaState === 'file-dropped') {
-    return jsxRuntime.jsx(FileDropped, {});
-  }
-  if (dropAreaState === 'disabled' || !resourceType) {
-    return jsxRuntime.jsx(DisabledDropArea, {});
-  }
-  if (dropAreaState === 'ready-for-drop') {
-    return jsxRuntime.jsx(EnabledDropArea, {});
-  }
-  if (dropAreaState === 'active-drag') {
-    return jsxRuntime.jsx(ActiveDragDropArea, {
-      isFileDropped: isFileDropped
-    });
-  }
-  return fallbackDropArea();
-}
-function fallbackDropArea(_invalidDropAreaState) {
-  return jsxRuntime.jsx(DisabledDropArea, {});
-}
-function getDropAreaState(flags) {
-  if (flags.isDragActive) {
-    return 'active-drag';
-  }
-  if (flags.hasResourceType) {
-    return 'disabled';
-  }
-  if (flags.isReady) {
-    return 'file-dropped';
-  }
-  return 'ready-for-drop';
-}
-
-var messages$4 = reactIntl.defineMessages({
-  dragAndDropCSV: {
-    id: 'ImportResourcesModal.dragAndDropCSV',
-    description: 'The message telling the user to drag and drop CSV file in the file drop area',
-    defaultMessage: 'Drag and drop CSV'
-  },
-  or: {
-    id: 'ImportResourcesModal.or',
-    description: 'The word "or" in the drag and drop message',
-    defaultMessage: 'or'
-  },
-  browseButton: {
-    id: 'ImportResourcesModal.browseFile',
-    defaultMessage: 'Browse file'
-  },
-  uploadFile: {
-    id: 'ImportResourcesModal.uploadFile',
-    description: 'Label for a button on the file upload page, shown on active drop area state',
-    defaultMessage: 'Upload file'
-  },
-  chooseFile: {
-    id: 'ImportResourcesModal.chooseFile',
-    description: 'Label for a button on the file upload page, shown on ready to upload state',
-    defaultMessage: 'Choose file'
-  },
-  fileUploadFailed: {
-    id: 'ImportResourcesModal.fileUploadFailed',
-    description: 'A title on the file upload page, shown on file upload error state',
-    defaultMessage: 'File upload failed'
-  },
-  fileFormatNotSupported: {
-    id: 'ImportResourcesModal.fileFormatNotSupported',
-    description: 'Error message displayed when a user drags and drops a non-CSV file',
-    defaultMessage: 'Invalid file format: The file is not in CSV format and cannot be processed.'
-  },
-  tooManyFilesError: {
-    id: 'ImportResourcesModal.tooManyFilesError',
-    description: 'Error message displayed when a user drags and drops multiple files at once',
-    defaultMessage: 'Multiple files detected: You can only drag and drop one file at a time.'
-  },
-  genericError: {
-    id: 'ImportResourcesModal.genericError',
-    description: 'Default error message for unexpected file upload issues (for unhandled cases)',
-    defaultMessage: 'Error occurred: Please try uploading the file again or contact our support team for assistance.'
-  },
-  dataType: {
-    id: 'ImportResourcesModal.dataType',
-    description: 'Label for the data type selection dropdown',
-    defaultMessage: 'Data type'
-  },
-  instructions: {
-    id: 'ImportResourcesModal.instructions',
-    description: 'Label for the instructions section',
-    defaultMessage: 'Instructions'
-  }
-});
+};
 
 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 _context3, _context4; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context3 = ownKeys$a(Object(t), !0)).call(_context3, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context4 = ownKeys$a(Object(t))).call(_context4, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
@@ -997,7 +981,7 @@ const FileDropArea = () => {
           showNotification({
             kind: 'error',
             domain: constants.DOMAINS.PAGE,
-            text: intl.formatMessage(messages$4.tooManyFilesError)
+            text: intl.formatMessage(messages$5.tooManyFilesError)
           });
           return;
         }
@@ -1005,13 +989,13 @@ const FileDropArea = () => {
           showNotification({
             kind: 'error',
             domain: constants.DOMAINS.PAGE,
-            text: intl.formatMessage(messages$4.fileFormatNotSupported)
+            text: intl.formatMessage(messages$5.fileFormatNotSupported)
           });
         } else {
           showNotification({
             kind: 'error',
             domain: constants.DOMAINS.PAGE,
-            text: intl.formatMessage(messages$4.genericError)
+            text: intl.formatMessage(messages$5.genericError)
           });
         }
       }
@@ -1042,22 +1026,22 @@ const FileDropArea = () => {
 };
 
 var sharedMessages = reactIntl.defineMessages({
-  ["modalTitle.".concat(IMPORTABLE_RESOURCES.CATEGORY)]: {
+  [`modalTitle.${IMPORTABLE_RESOURCES.CATEGORY}`]: {
     id: 'ImportResourcesModal.modalTitle.category',
     description: 'Label for the categories modal title',
     defaultMessage: 'Import categories by CSV'
   },
-  ["modalTitle.".concat(IMPORTABLE_RESOURCES.PRODUCT)]: {
+  [`modalTitle.${IMPORTABLE_RESOURCES.PRODUCT}`]: {
     id: 'ImportResourcesModal.modalTitle.product',
     description: 'Label for the products modal title',
     defaultMessage: 'Import products by CSV'
   },
-  ["modalTitle.".concat(IMPORTABLE_RESOURCES.INVENTORY)]: {
+  [`modalTitle.${IMPORTABLE_RESOURCES.INVENTORY}`]: {
     id: 'ImportResourcesModal.modalTitle.inventoryEntry',
     description: 'Label for the inventories modal title',
     defaultMessage: 'Import inventories by CSV'
   },
-  ["modalTitle.".concat(IMPORTABLE_RESOURCES.DISCOUNT_CODE)]: {
+  [`modalTitle.${IMPORTABLE_RESOURCES.DISCOUNT_CODE}`]: {
     id: 'ImportResourcesModal.modalTitle.discountCode',
     description: 'Label for the inventories modal title',
     defaultMessage: 'Import discount codes by CSV'
@@ -1080,7 +1064,6 @@ var sharedMessages = reactIntl.defineMessages({
 });
 
 const Upload = () => {
-  var _context;
   const _useImportResourcesCo = useImportResourcesContext(),
     state = _useImportResourcesCo.state,
     onClose = _useImportResourcesCo.onClose,
@@ -1092,7 +1075,7 @@ const Upload = () => {
   return jsxRuntime.jsx(applicationComponents.FormDialog, {
     size: 16,
     isOpen: true,
-    title: intl.formatMessage(sharedMessages["modalTitle.".concat(state.resourceType)]),
+    title: intl.formatMessage(sharedMessages[`modalTitle.${state.resourceType}`]),
     labelPrimary: intl.formatMessage(sharedMessages.uploadButton),
     onPrimaryButtonClick: handleUploadAndValidation,
     isPrimaryButtonDisabled: !Boolean(state.droppedFile),
@@ -1107,18 +1090,18 @@ const Upload = () => {
         scale: "l",
         children: [isMultipleResourceTypes ? jsxRuntime.jsxs(uiKit.Grid, {
           gridRowGap: uiKit.designTokens.spacingL,
-          gridTemplateColumns: _concatInstanceProperty__default["default"](_context = "calc(".concat(uiKit.designTokens.constraint3, " + ")).call(_context, uiKit.designTokens.spacingL, ") auto"),
+          gridTemplateColumns: `calc(${uiKit.designTokens.constraint3} + ${uiKit.designTokens.spacingL}) auto`,
           children: [jsxRuntime.jsx(uiKit.Grid.Item, {
             children: jsxRuntime.jsx(uiKit.Text.Body, {
               isBold: true,
-              intlMessage: messages$4.dataType
+              intlMessage: messages$5.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$4.instructions
+              intlMessage: messages$5.instructions
             })
           }), jsxRuntime.jsx(uiKit.Grid.Item, {
             children: jsxRuntime.jsx(Instructions, {})
@@ -1132,6 +1115,274 @@ const Upload = () => {
 };
 
 var messages$3 = reactIntl.defineMessages({
+  row: {
+    id: 'ImportResourcesModal.row',
+    description: 'In Upload file error modal - "Row" column',
+    defaultMessage: 'Row'
+  },
+  errorType: {
+    id: 'ImportResourcesModal.errorType',
+    description: 'In Upload file error modal - "Error type" column',
+    defaultMessage: 'Error type'
+  },
+  details: {
+    id: 'ImportResourcesModal.details',
+    description: 'In Upload file error modal - "Details" column',
+    defaultMessage: 'Details'
+  },
+  uploadingError: {
+    id: 'ImportResourcesModal.uploadingError',
+    description: 'Title when errors detected while uploading file',
+    defaultMessage: 'There are <b>{errorsCount}</b> errors detected while uploading the file <b>{fileName}</b>.'
+  },
+  supportedValuesDocumentation: {
+    id: 'ImportResourcesModal.supportedValuesDocumentation',
+    description: 'Link to the documentation for supported values',
+    defaultMessage: '<documentationLink>View the documentation</documentationLink> for supported values.'
+  },
+  uploadNewFile: {
+    id: 'ImportResourcesModal.uploadNewFile',
+    description: 'Upload new file button',
+    defaultMessage: 'Upload new file'
+  }
+});
+
+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 _context2, _context3; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context2 = ownKeys$9(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$9(Object(t))).call(_context3, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+const getColumns$1 = () => [{
+  key: 'errorType',
+  label: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$9({}, messages$3.errorType)),
+  width: 'max-content'
+}, {
+  key: 'details',
+  label: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$9({}, messages$3.details))
+}];
+const UploadClientSideErrorTable = props => {
+  var _context;
+  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;
+  return jsxRuntime.jsxs(uiKit.Spacings.Stack, {
+    scale: "l",
+    children: [jsxRuntime.jsx(DataTable__default["default"], {
+      verticalCellAlignment: "center",
+      isCondensed: true,
+      rows: currentPageRows,
+      columns: getColumns$1(),
+      itemRenderer: itemRenderer$1
+    }), shouldShowPagination && jsxRuntime.jsx(uiKit.PageNavigator, {
+      onPageChange: pagination.page.onChange,
+      page: pagination.page.value,
+      totalPages: Math.ceil(props.rows.length / pagination.perPage.value)
+    })]
+  });
+};
+function itemRenderer$1(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 UnexpectedColumnError(column.key);
+  }
+}
+
+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 UploadClientSideErrorsModal = () => {
+  const intl = reactIntl.useIntl();
+  const _useImportResourcesCo = useImportResourcesContext(),
+    state = _useImportResourcesCo.state,
+    actions = _useImportResourcesCo.actions,
+    onClose = _useImportResourcesCo.onClose;
+  const errorsCount = state.fileUploadClientSideErrors.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$8(_objectSpread$8({}, messages$3.uploadingError), {}, {
+              values: {
+                fileName: state.droppedFile?.name,
+                errorsCount: intl.formatNumber(errorsCount),
+                b: getBold$3
+              }
+            })
+          })
+        }), jsxRuntime.jsx(UploadClientSideErrorTable, {
+          rows: mapUploadFileClientSideErrorsToUploadFileErrorRows(state.fileUploadClientSideErrors)
+        }), 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
+  });
+}
+
+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 _context2, _context3; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context2 = ownKeys$7(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$7(Object(t))).call(_context3, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+const getColumns = () => [{
+  key: 'row',
+  label: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$7({}, messages$3.row)),
+  width: 'max-content'
+}, {
+  key: 'errorType',
+  label: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$7({}, messages$3.errorType)),
+  width: 'max-content'
+}, {
+  key: 'details',
+  label: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$7({}, messages$3.details))
+}];
+const UploadServerSideErrorTable = props => {
+  var _context;
+  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;
+  return jsxRuntime.jsxs(uiKit.Spacings.Stack, {
+    scale: "l",
+    children: [jsxRuntime.jsx(DataTable__default["default"], {
+      verticalCellAlignment: "center",
+      isCondensed: true,
+      rows: currentPageRows,
+      columns: getColumns(),
+      itemRenderer: itemRenderer
+    }), shouldShowPagination && jsxRuntime.jsx(uiKit.PageNavigator, {
+      onPageChange: pagination.page.onChange,
+      page: pagination.page.value,
+      totalPages: Math.ceil(props.rows.length / pagination.perPage.value)
+    })]
+  });
+};
+function itemRenderer(item, column) {
+  switch (column.key) {
+    case 'row':
+      return item.row;
+    case 'errorType':
+      return jsxRuntime.jsx(uiKit.Stamp, {
+        isCondensed: true,
+        label: item.code,
+        tone: "critical"
+      });
+    case 'details':
+      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: extractErrorDescriptionFromValidationMessage(item.validationMessage)
+        })]
+      });
+    default:
+      throw new UnexpectedColumnError(column.key);
+  }
+}
+
+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 _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 UploadServerSideErrorsModal = () => {
+  const intl = reactIntl.useIntl();
+  const _useImportResourcesCo = useImportResourcesContext(),
+    state = _useImportResourcesCo.state,
+    actions = _useImportResourcesCo.actions,
+    onClose = _useImportResourcesCo.onClose;
+  const errorsCount = getFileUploadErrorsCount(state.uploadFileResponse?.results);
+  const documentationLink = RESOURCE_TYPE_DOCUMENTATION_LINKS[state.resourceType];
+  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.jsxs(uiKit.Spacings.Stack, {
+          scale: "xs",
+          children: [jsxRuntime.jsx(fullstory.Masking.Mask, {
+            children: jsxRuntime.jsx(uiKit.Text.Body, {
+              intlMessage: _objectSpread$6(_objectSpread$6({}, messages$3.uploadingError), {}, {
+                values: {
+                  fileName: state.droppedFile?.name,
+                  errorsCount: intl.formatNumber(errorsCount),
+                  b: getBold$2
+                }
+              })
+            })
+          }), jsxRuntime.jsx(uiKit.Text.Body, {
+            intlMessage: _objectSpread$6(_objectSpread$6({}, messages$3.supportedValuesDocumentation), {}, {
+              values: {
+                documentationLink: msg => jsxRuntime.jsx(uiKit.Link, {
+                  tone: "secondary",
+                  isExternal: true,
+                  to: documentationLink,
+                  children: msg
+                })
+              }
+            })
+          })]
+        }), jsxRuntime.jsx(UploadServerSideErrorTable, {
+          rows: mapUploadFileErrorsResponseToUploadFileErrorRows(state.uploadFileResponse?.results)
+        }), 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$2(msg) {
+  return jsxRuntime.jsx(uiKit.Text.Body, {
+    as: "span",
+    isBold: true,
+    children: msg
+  });
+}
+
+var messages$2 = reactIntl.defineMessages({
   startImportButton: {
     id: 'ImportResourcesModal.startImportButton',
     description: 'Label for the modal Start import button',
@@ -1209,8 +1460,8 @@ var messages$3 = reactIntl.defineMessages({
   }
 });
 
-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; }
+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 truncate = (isExpanded, columns, columnsCount) => {
   return isExpanded ? columns.join(' | ') : _sliceInstanceProperty__default["default"](columns).call(columns, 0, columnsCount).join(' | ') + (columns.length > columnsCount ? '...' : '');
 };
@@ -1236,7 +1487,7 @@ const ColumnList = props => {
               e.preventDefault();
               setIsExpanded(!isExpanded);
             },
-            children: isExpanded ? jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$9({}, messages$3.showLess)) : jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$9({}, messages$3.showMore))
+            children: isExpanded ? jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$5({}, messages$2.showLess)) : jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$5({}, messages$2.showMore))
           })
         })]
       })
@@ -1244,8 +1495,8 @@ const ColumnList = props => {
   });
 };
 
-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; }
+function ownKeys$4(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$4(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$4(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$4(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
 function UploadPreviewModal() {
   const _useImportResourcesCo = useImportResourcesContext(),
     state = _useImportResourcesCo.state;
@@ -1259,8 +1510,8 @@ function UploadPreviewModal() {
   return jsxRuntime.jsx(applicationComponents.FormDialog, {
     size: 16,
     isOpen: true,
-    title: intl.formatMessage(sharedMessages["modalTitle.".concat(state.resourceType)]),
-    labelPrimary: intl.formatMessage(messages$3.continue),
+    title: intl.formatMessage(sharedMessages[`modalTitle.${state.resourceType}`]),
+    labelPrimary: intl.formatMessage(messages$2.continue),
     onSecondaryButtonClick: () => onClose({
       shouldDeleteImportContainer: true
     }),
@@ -1279,7 +1530,7 @@ function UploadPreviewModal() {
             children: jsxRuntime.jsxs(uiKit.Spacings.Stack, {
               scale: "m",
               children: [jsxRuntime.jsx("div", {}), jsxRuntime.jsx(uiKit.Text.Body, {
-                intlMessage: messages$3.previewOfYourImport
+                intlMessage: messages$2.previewOfYourImport
               }), jsxRuntime.jsx(uiKit.Card, {
                 insetScale: "xl",
                 children: jsxRuntime.jsxs(uiKit.Spacings.Stack, {
@@ -1289,10 +1540,10 @@ function UploadPreviewModal() {
                     children: [jsxRuntime.jsx(uiKit.CheckBoldIcon, {
                       color: "success"
                     }), jsxRuntime.jsx(uiKit.Text.Body, {
-                      intlMessage: _objectSpread$8(_objectSpread$8({}, messages$3.rowsToBeImported), {}, {
+                      intlMessage: _objectSpread$4(_objectSpread$4({}, messages$2.rowsToBeImported), {}, {
                         values: {
                           rowCount: intl.formatNumber(state.uploadFileResponse.rowsCount),
-                          b: getBold$3
+                          b: getBold$1
                         }
                       })
                     })]
@@ -1301,10 +1552,10 @@ function UploadPreviewModal() {
                     children: [jsxRuntime.jsx(uiKit.CheckBoldIcon, {
                       color: "success"
                     }), jsxRuntime.jsx(uiKit.Text.Body, {
-                      intlMessage: _objectSpread$8(_objectSpread$8({}, messages$3.columnsToBeImported), {}, {
+                      intlMessage: _objectSpread$4(_objectSpread$4({}, messages$2.columnsToBeImported), {}, {
                         values: {
                           columnCount: intl.formatNumber(validatedColumns.length),
-                          b: getBold$3
+                          b: getBold$1
                         }
                       })
                     })]
@@ -1321,10 +1572,10 @@ function UploadPreviewModal() {
                     children: [jsxRuntime.jsx(uiKit.EyeCrossedIcon, {
                       color: "neutral60"
                     }), jsxRuntime.jsx(uiKit.Text.Body, {
-                      intlMessage: _objectSpread$8(_objectSpread$8({}, messages$3.columnsToBeIgnored), {}, {
+                      intlMessage: _objectSpread$4(_objectSpread$4({}, messages$2.columnsToBeIgnored), {}, {
                         values: {
                           columnCount: intl.formatNumber(ignoredColumns.length),
-                          b: getBold$3
+                          b: getBold$1
                         }
                       })
                     })]
@@ -1340,7 +1591,7 @@ function UploadPreviewModal() {
     })
   });
 }
-function getBold$3(msg) {
+function getBold$1(msg) {
   return jsxRuntime.jsx(uiKit.Text.Body, {
     as: "span",
     isBold: true,
@@ -1348,43 +1599,39 @@ function getBold$3(msg) {
   });
 }
 
-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; }
+function ownKeys$3(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$3(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$3(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$3(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
 const getNewLine = () => jsxRuntime.jsx("br", {});
 const getImportLogsLink = (msg, projectKey) => jsxRuntime.jsx(uiKit.Link, {
-  to: "/".concat(projectKey, "/operations/import/logs"),
+  to: `/${projectKey}/operations/import/logs`,
   children: msg
 });
 const ImportConfirmationModal = () => {
-  var _state$uploadFileResp;
   const intl = reactIntl.useIntl();
   const _useImportResourcesCo = useImportResourcesContext(),
     state = _useImportResourcesCo.state,
     onStartImportSuccess = _useImportResourcesCo.onStartImportSuccess,
     onClose = _useImportResourcesCo.onClose;
-  const _useApplicationContex = applicationShellConnectors.useApplicationContext(context => {
-      var _context$project, _context$project2;
-      return {
-        projectKey: (_context$project = context.project) === null || _context$project === void 0 ? void 0 : _context$project.key,
-        projectName: (_context$project2 = context.project) === null || _context$project2 === void 0 ? void 0 : _context$project2.name
-      };
-    }),
+  const _useApplicationContex = applicationShellConnectors.useApplicationContext(context => ({
+      projectKey: context.project?.key,
+      projectName: context.project?.name
+    })),
     projectKey = _useApplicationContex.projectKey,
     projectName = _useApplicationContex.projectName;
   const asyncDispatch = sdk.useAsyncDispatch();
   const showNotification = actionsGlobal.useShowNotification();
   const ImportRunningTextNotification = () => jsxRuntime.jsx(uiKit.Text.Body, {
-    intlMessage: _objectSpread$7(_objectSpread$7({}, messages$3.uploadNotificationSuccessMessage), {}, {
+    intlMessage: _objectSpread$3(_objectSpread$3({}, messages$2.uploadNotificationSuccessMessage), {}, {
       values: {
         newline: getNewLine,
         logsLink: msg => getImportLogsLink(msg, projectKey),
-        b: getBold$2
+        b: getBold
       }
     })
   });
   return jsxRuntime.jsx(applicationComponents.ConfirmationDialog, {
-    title: intl.formatMessage(sharedMessages["modalTitle.".concat(state.resourceType)]),
-    labelPrimary: intl.formatMessage(messages$3.startImportButton),
+    title: intl.formatMessage(sharedMessages[`modalTitle.${state.resourceType}`]),
+    labelPrimary: intl.formatMessage(messages$2.startImportButton),
     isOpen: true,
     onClose: () => onClose({
       shouldDeleteImportContainer: true
@@ -1400,8 +1647,7 @@ const ImportConfirmationModal = () => {
     },
     onConfirm: async () => {
       try {
-        var _state$droppedFile;
-        const canConfirm = projectKey && state.containerKey && ((_state$droppedFile = state.droppedFile) === null || _state$droppedFile === void 0 ? void 0 : _state$droppedFile.name) && state.resourceType;
+        const canConfirm = projectKey && state.containerKey && state.droppedFile?.name && state.resourceType;
         if (!canConfirm) return;
         onClose();
         await processUploadedFile({
@@ -1436,288 +1682,18 @@ const ImportConfirmationModal = () => {
         scale: "xl",
         children: [jsxRuntime.jsxs("div", {
           children: [jsxRuntime.jsx(uiKit.Text.Body, {
-            intlMessage: _objectSpread$7(_objectSpread$7({}, messages$3.confirmationBodyText), {}, {
+            intlMessage: _objectSpread$3(_objectSpread$3({}, messages$2.confirmationBodyText), {}, {
               values: {
                 projectName: projectName,
-                count: intl.formatNumber((state === null || state === void 0 || (_state$uploadFileResp = state.uploadFileResponse) === null || _state$uploadFileResp === void 0 ? void 0 : _state$uploadFileResp.rowsCount) || 0),
-                bold: getBold$2
+                count: intl.formatNumber(state?.uploadFileResponse?.rowsCount || 0),
+                bold: getBold
               }
             })
           }), jsxRuntime.jsx(uiKit.Text.Body, {
-            intlMessage: messages$3.confirmationBodyNote
-          })]
-        }), jsxRuntime.jsx(uiKit.Text.Body, {
-          intlMessage: messages$3.confirmationBodyQuestion
-        })]
-      })
-    })
-  });
-};
-function getBold$2(msg) {
-  return jsxRuntime.jsx(uiKit.Text.Body, {
-    as: "span",
-    isBold: true,
-    children: msg
-  });
-}
-
-var messages$2 = reactIntl.defineMessages({
-  row: {
-    id: 'ImportResourcesModal.row',
-    description: 'In Upload file error modal - "Row" column',
-    defaultMessage: 'Row'
-  },
-  errorType: {
-    id: 'ImportResourcesModal.errorType',
-    description: 'In Upload file error modal - "Error type" column',
-    defaultMessage: 'Error type'
-  },
-  details: {
-    id: 'ImportResourcesModal.details',
-    description: 'In Upload file error modal - "Details" column',
-    defaultMessage: 'Details'
-  },
-  uploadingError: {
-    id: 'ImportResourcesModal.uploadingError',
-    description: 'Title when errors detected while uploading file',
-    defaultMessage: 'There are <b>{errorsCount}</b> errors detected while uploading the file <b>{fileName}</b>.'
-  },
-  supportedValuesDocumentation: {
-    id: 'ImportResourcesModal.supportedValuesDocumentation',
-    description: 'Link to the documentation for supported values',
-    defaultMessage: '<documentationLink>View the documentation</documentationLink> for supported values.'
-  },
-  uploadNewFile: {
-    id: 'ImportResourcesModal.uploadNewFile',
-    description: 'Upload new file button',
-    defaultMessage: 'Upload new file'
-  }
-});
-
-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$1 = () => [{
-  key: 'errorType',
-  label: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$6({}, messages$2.errorType)),
-  width: 'max-content'
-}, {
-  key: 'details',
-  label: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$6({}, messages$2.details))
-}];
-const UploadClientSideErrorTable = props => {
-  var _context;
-  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;
-  return jsxRuntime.jsxs(uiKit.Spacings.Stack, {
-    scale: "l",
-    children: [jsxRuntime.jsx(DataTable__default["default"], {
-      verticalCellAlignment: "center",
-      isCondensed: true,
-      rows: currentPageRows,
-      columns: getColumns$1(),
-      itemRenderer: itemRenderer$1
-    }), shouldShowPagination && jsxRuntime.jsx(uiKit.PageNavigator, {
-      onPageChange: pagination.page.onChange,
-      page: pagination.page.value,
-      totalPages: Math.ceil(props.rows.length / pagination.perPage.value)
-    })]
-  });
-};
-function itemRenderer$1(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 UnexpectedColumnError(column.key);
-  }
-}
-
-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 UploadClientSideErrorsModal = () => {
-  var _state$droppedFile;
-  const intl = reactIntl.useIntl();
-  const _useImportResourcesCo = useImportResourcesContext(),
-    state = _useImportResourcesCo.state,
-    actions = _useImportResourcesCo.actions,
-    onClose = _useImportResourcesCo.onClose;
-  const errorsCount = state.fileUploadClientSideErrors.length;
-  return jsxRuntime.jsx(applicationComponents.InfoDialog, {
-    size: 16,
-    isOpen: true,
-    title: intl.formatMessage(sharedMessages["modalTitle.".concat(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$5(_objectSpread$5({}, messages$2.uploadingError), {}, {
-              values: {
-                fileName: (_state$droppedFile = state.droppedFile) === null || _state$droppedFile === void 0 ? void 0 : _state$droppedFile.name,
-                errorsCount: intl.formatNumber(errorsCount),
-                b: getBold$1
-              }
-            })
-          })
-        }), jsxRuntime.jsx(UploadClientSideErrorTable, {
-          rows: mapUploadFileClientSideErrorsToUploadFileErrorRows(state.fileUploadClientSideErrors)
-        }), 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$2.uploadNewFile),
-            onClick: () => actions.uploadNewFile()
+            intlMessage: messages$2.confirmationBodyNote
           })]
-        })]
-      })
-    })
-  });
-};
-function getBold$1(msg) {
-  return jsxRuntime.jsx(uiKit.Text.Body, {
-    as: "span",
-    isBold: true,
-    children: msg
-  });
-}
-
-function ownKeys$4(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$4(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$4(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$4(Object(t))).call(_context3, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
-const getColumns = () => [{
-  key: 'row',
-  label: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$4({}, messages$2.row)),
-  width: 'max-content'
-}, {
-  key: 'errorType',
-  label: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$4({}, messages$2.errorType)),
-  width: 'max-content'
-}, {
-  key: 'details',
-  label: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$4({}, messages$2.details))
-}];
-const UploadServerSideErrorTable = props => {
-  var _context;
-  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;
-  return jsxRuntime.jsxs(uiKit.Spacings.Stack, {
-    scale: "l",
-    children: [jsxRuntime.jsx(DataTable__default["default"], {
-      verticalCellAlignment: "center",
-      isCondensed: true,
-      rows: currentPageRows,
-      columns: getColumns(),
-      itemRenderer: itemRenderer
-    }), shouldShowPagination && jsxRuntime.jsx(uiKit.PageNavigator, {
-      onPageChange: pagination.page.onChange,
-      page: pagination.page.value,
-      totalPages: Math.ceil(props.rows.length / pagination.perPage.value)
-    })]
-  });
-};
-function itemRenderer(item, column) {
-  switch (column.key) {
-    case 'row':
-      return item.row;
-    case 'errorType':
-      return jsxRuntime.jsx(uiKit.Stamp, {
-        isCondensed: true,
-        label: item.code,
-        tone: "critical"
-      });
-    case 'details':
-      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: extractErrorDescriptionFromValidationMessage(item.validationMessage)
-        })]
-      });
-    default:
-      throw new UnexpectedColumnError(column.key);
-  }
-}
-
-function ownKeys$3(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$3(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$3(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$3(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
-const UploadServerSideErrorsModal = () => {
-  var _state$uploadFileResp, _state$droppedFile, _state$uploadFileResp2;
-  const intl = reactIntl.useIntl();
-  const _useImportResourcesCo = useImportResourcesContext(),
-    state = _useImportResourcesCo.state,
-    actions = _useImportResourcesCo.actions,
-    onClose = _useImportResourcesCo.onClose;
-  const errorsCount = getFileUploadErrorsCount((_state$uploadFileResp = state.uploadFileResponse) === null || _state$uploadFileResp === void 0 ? void 0 : _state$uploadFileResp.results);
-  const documentationLink = RESOURCE_TYPE_DOCUMENTATION_LINKS[state.resourceType];
-  return jsxRuntime.jsx(applicationComponents.InfoDialog, {
-    size: 16,
-    isOpen: true,
-    title: intl.formatMessage(sharedMessages["modalTitle.".concat(state.resourceType)]),
-    onClose: onClose,
-    children: jsxRuntime.jsx(fullstory.Masking.Unmask, {
-      children: jsxRuntime.jsxs(uiKit.Spacings.Stack, {
-        scale: "l",
-        children: [jsxRuntime.jsxs(uiKit.Spacings.Stack, {
-          scale: "xs",
-          children: [jsxRuntime.jsx(fullstory.Masking.Mask, {
-            children: jsxRuntime.jsx(uiKit.Text.Body, {
-              intlMessage: _objectSpread$3(_objectSpread$3({}, messages$2.uploadingError), {}, {
-                values: {
-                  fileName: (_state$droppedFile = state.droppedFile) === null || _state$droppedFile === void 0 ? void 0 : _state$droppedFile.name,
-                  errorsCount: intl.formatNumber(errorsCount),
-                  b: getBold
-                }
-              })
-            })
-          }), jsxRuntime.jsx(uiKit.Text.Body, {
-            intlMessage: _objectSpread$3(_objectSpread$3({}, messages$2.supportedValuesDocumentation), {}, {
-              values: {
-                documentationLink: msg => jsxRuntime.jsx(uiKit.Link, {
-                  tone: "secondary",
-                  isExternal: true,
-                  to: documentationLink,
-                  children: msg
-                })
-              }
-            })
-          })]
-        }), jsxRuntime.jsx(UploadServerSideErrorTable, {
-          rows: mapUploadFileErrorsResponseToUploadFileErrorRows((_state$uploadFileResp2 = state.uploadFileResponse) === null || _state$uploadFileResp2 === void 0 ? void 0 : _state$uploadFileResp2.results)
-        }), 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$2.uploadNewFile),
-            onClick: () => actions.uploadNewFile()
-          })]
+          intlMessage: messages$2.confirmationBodyQuestion
         })]
       })
     })
@@ -1732,11 +1708,10 @@ function getBold(msg) {
 }
 
 const UploadResult = () => {
-  var _state$uploadFileResp;
   const _useImportResourcesCo = useImportResourcesContext(),
     state = _useImportResourcesCo.state;
   if (state.fileUploadClientSideErrors.length > 0) return jsxRuntime.jsx(UploadClientSideErrorsModal, {});
-  if (((_state$uploadFileResp = state.uploadFileResponse) === null || _state$uploadFileResp === void 0 ? void 0 : _state$uploadFileResp.invalid) > 0) return jsxRuntime.jsx(UploadServerSideErrorsModal, {});
+  if (state.uploadFileResponse?.invalid > 0) return jsxRuntime.jsx(UploadServerSideErrorsModal, {});
   return jsxRuntime.jsx(UploadPreviewModal, {});
 };
 
@@ -1774,16 +1749,15 @@ FileIcon.defaultProps = {
   xmlns: "http://www.w3.org/2000/svg"
 };
 const Uploading = () => {
-  var _state$droppedFile;
   const intl = reactIntl.useIntl();
   const _useImportResourcesCo = useImportResourcesContext(),
     state = _useImportResourcesCo.state,
     actions = _useImportResourcesCo.actions,
     onClose = _useImportResourcesCo.onClose;
-  if ((_state$droppedFile = state.droppedFile) !== null && _state$droppedFile !== void 0 && _state$droppedFile.name) return jsxRuntime.jsx(applicationComponents.InfoDialog, {
+  if (state.droppedFile?.name) return jsxRuntime.jsx(applicationComponents.InfoDialog, {
     size: 16,
     isOpen: true,
-    title: intl.formatMessage(sharedMessages["modalTitle.".concat(state.resourceType)]),
+    title: intl.formatMessage(sharedMessages[`modalTitle.${state.resourceType}`]),
     onClose: () => onClose({
       shouldDeleteImportContainer: true
     }),
@@ -1865,7 +1839,7 @@ const resourceTypeToDisplayName = resourceType => {
     case IMPORTABLE_RESOURCES.CATEGORY:
       return messages$1.categories;
     default:
-      throw new Error("Unknown resource type: ".concat(resourceType));
+      throw new Error(`Unknown resource type: ${resourceType}`);
   }
 };
 const ResourceTypeSelection = () => {
@@ -1954,8 +1928,8 @@ const loadMessages = async locale => {
     return i18n.parseChunkImport(chunkImport);
   } catch (error) {
     // eslint-disable-next-line no-console
-    console.warn("Something went wrong while loading the import-resources-modal messages for ".concat(locale), error);
-    sentry.reportErrorToSentry(new Error("Something went wrong while loading the import-resources-modal messages for ".concat(locale)), {
+    console.warn(`Something went wrong while loading the import-resources-modal messages for ${locale}`, error);
+    sentry.reportErrorToSentry(new Error(`Something went wrong while loading the import-resources-modal messages for ${locale}`), {
       extra: error
     });
     return {};
@@ -2000,14 +1974,14 @@ const useAsyncIntlMessages = (locale, loader) => {
 function ownKeys(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(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(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(Object(t))).call(_context3, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
 const ImportResourcesModal = props => {
-  var _props$resourceTypes, _context;
+  var _context;
   const _useApplicationContex = applicationShellConnectors.useApplicationContext(context => ({
       locale: context.user && context.user.locale
     })),
     locale = _useApplicationContex.locale;
   const messages = useAsyncIntlMessages(locale, loadMessages);
   if (!props.isOpen || messages.isLoading) return null;
-  if (!((_props$resourceTypes = props.resourceTypes) !== null && _props$resourceTypes !== void 0 && _props$resourceTypes.length)) {
+  if (!props.resourceTypes?.length) {
     console.error('No resource types provided for import resources modal');
     return null;
   }
@@ -2028,5 +2002,5 @@ ImportResourcesModal.displayName = 'ImportResourcesModal';
 exports.EnabledDropArea = EnabledDropArea;
 exports.FileDropped = FileDropped;
 exports.ImportResourcesModal = ImportResourcesModal;
-exports.messages = messages$4;
+exports.messages = messages$5;
 exports.useImportResourcesContext = useImportResourcesContext;