@commercetools-frontend-extensions/import-resources-modal 1.3.15 → 1.3.17

package/dist/{index-3905ce0c.cjs.prod.js → index-3444254a.cjs.prod.js}

@@ -33,6 +33,7 @@ var _findInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/insta
 var _includesInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/includes');
 var Papa = require('papaparse');
 var _reduceInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/reduce');
+var _sliceInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/slice');
 var _JSON$stringify = require('@babel/runtime-corejs3/core-js-stable/json/stringify');
 require('@babel/runtime-corejs3/core-js-stable/instance/starts-with');
 require('@babel/runtime-corejs3/core-js-stable/url-search-params');
@@ -47,7 +48,6 @@ 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');
 
@@ -72,10 +72,10 @@ var _findInstanceProperty__default = /*#__PURE__*/_interopDefault(_findInstanceP
 var _includesInstanceProperty__default = /*#__PURE__*/_interopDefault(_includesInstanceProperty);
 var Papa__default = /*#__PURE__*/_interopDefault(Papa);
 var _reduceInstanceProperty__default = /*#__PURE__*/_interopDefault(_reduceInstanceProperty);
+var _sliceInstanceProperty__default = /*#__PURE__*/_interopDefault(_sliceInstanceProperty);
 var _JSON$stringify__default = /*#__PURE__*/_interopDefault(_JSON$stringify);
 var _someInstanceProperty__default = /*#__PURE__*/_interopDefault(_someInstanceProperty);
 var _styled__default = /*#__PURE__*/_interopDefault(_styled);
-var _sliceInstanceProperty__default = /*#__PURE__*/_interopDefault(_sliceInstanceProperty);
 var DataTable__default = /*#__PURE__*/_interopDefault(DataTable);
 
 function ownKeys$g(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; }
@@ -97,7 +97,7 @@ function reducer(state, action) {
   if (action.type === 'cancelImport') return _objectSpread$g(_objectSpread$g({}, state), {}, {
     currentStep: 1,
     containerKey: undefined,
-    fileUploadClientSideErrors: [],
+    fileUploadErrors: [],
     uploadFileResponse: undefined,
     droppedFile: undefined,
     dropAreaState: 'disabled',
@@ -106,7 +106,7 @@ function reducer(state, action) {
   if (action.type === 'uploadNewFile') return _objectSpread$g(_objectSpread$g({}, state), {}, {
     currentStep: 1,
     containerKey: undefined,
-    fileUploadClientSideErrors: [],
+    fileUploadErrors: [],
     uploadFileResponse: undefined,
     droppedFile: undefined,
     dropAreaState: 'ready-for-drop',
@@ -117,9 +117,9 @@ function reducer(state, action) {
       droppedFile: action.droppedFile
     });
   }
-  if (action.type === 'setFileUploadClientSideErrors') {
+  if (action.type === 'setFileUploadErrors') {
     return _objectSpread$g(_objectSpread$g({}, state), {}, {
-      fileUploadClientSideErrors: action.fileUploadClientSideErrors
+      fileUploadErrors: action.fileUploadErrors
     });
   }
   if (action.type === 'setAbortController') {
@@ -142,7 +142,7 @@ const initialState = {
   abortController: new AbortController(),
   dropAreaState: 'disabled',
   uploadFileResponse: undefined,
-  fileUploadClientSideErrors: [],
+  fileUploadErrors: [],
   resourceType: 'category',
   containerKey: undefined,
   progress: 0
@@ -364,9 +364,9 @@ const mapUploadFileErrorsResponseToUploadFileErrorRows = uploadFileErrorsRespons
     }));
   });
 };
-const mapUploadFileClientSideErrorsToUploadFileErrorRows = uploadFileClientSideErrors => {
+const mapFileUploadErrorsToUploadFileErrorRows = uploadFileErrors => {
   let idCounter = 1;
-  return _mapInstanceProperty__default["default"](uploadFileClientSideErrors).call(uploadFileClientSideErrors, uploadFileClientSideError => _objectSpread$e(_objectSpread$e({}, uploadFileClientSideError), {}, {
+  return _mapInstanceProperty__default["default"](uploadFileErrors).call(uploadFileErrors, uploadFileError => _objectSpread$e(_objectSpread$e({}, uploadFileError), {}, {
     id: String(idCounter++)
   }));
 };
@@ -415,6 +415,23 @@ function convertFileSizeToKB(sizeInBytes) {
 function isAbortError(error) {
   return error instanceof DOMException && error.name === 'AbortError';
 }
+function formatKeys(obj) {
+  var _context;
+  if (typeof obj !== 'object' || obj === null) return '';
+  const keys = _mapInstanceProperty__default["default"](_context = _Object$keys__default["default"](obj)).call(_context, key => key.replace(/([a-z])([A-Z])/g, '$1 $2').toLowerCase());
+  if (keys.length === 0) return '';
+  if (keys.length === 1) return keys[0];
+  return `${_sliceInstanceProperty__default["default"](keys).call(keys, 0, -1).join(', ')} and ${keys[keys.length - 1]}`;
+}
+function formatErrorCode(code) {
+  try {
+    const formattedCode = code.replace(/([a-z])([A-Z])/g, '$1 $2').replace(/([A-Z])([A-Z][a-z])/g, '$1 $2').toLowerCase();
+    let result = formattedCode.charAt(0).toUpperCase() + _sliceInstanceProperty__default["default"](formattedCode).call(formattedCode, 1);
+    return result;
+  } catch (error) {
+    return code;
+  }
+}
 
 const encodeFileNameWithTimestampToContainerKey = fileName => {
   return btoa(_JSON$stringify__default["default"]({
@@ -588,9 +605,9 @@ const ImportResourcesProvider = props => {
     type: 'setAbortController',
     abortController: abortController
   });
-  const setFileUploadClientSideErrors = fileUploadClientSideErrors => dispatch({
-    type: 'setFileUploadClientSideErrors',
-    fileUploadClientSideErrors: fileUploadClientSideErrors
+  const setFileUploadErrors = fileUploadErrors => dispatch({
+    type: 'setFileUploadErrors',
+    fileUploadErrors: fileUploadErrors
   });
   const setProgress = progress => dispatch({
     type: 'setProgress',
@@ -622,7 +639,7 @@ const ImportResourcesProvider = props => {
         setDroppedFile,
         setContainerKey,
         setAbortController,
-        setFileUploadClientSideErrors,
+        setFileUploadErrors,
         setProgress
       }
     },
@@ -682,13 +699,13 @@ function getDefaultDropWrapperStyles(_dropAreaState) {
   return /*#__PURE__*/react.css("" , "" );
 }
 
-var ActiveDragDropArea = /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return require('./active-drag-drop-area-2b0845a4.cjs.prod.js' /* webpackChunkName: "active-drag-drop-area" */); }));
+var ActiveDragDropArea = /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return require('./active-drag-drop-area-cceb59eb.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-134390f4.cjs.prod.js' /* webpackChunkName: "enabled-drop-area" */); }));
+var EnabledDropArea = /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return require('./enabled-drop-area-80a2a4cc.cjs.prod.js' /* webpackChunkName: "enabled-drop-area" */); }));
 
-var FileDropped = /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return require('./file-dropped-area-353d39b6.cjs.prod.js' /* webpackChunkName: "filed-dropped-area" */); }));
+var FileDropped = /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return require('./file-dropped-area-c3702252.cjs.prod.js' /* webpackChunkName: "filed-dropped-area" */); }));
 
 function getDropArea(_ref) {
   let dropAreaState = _ref.dropAreaState,
@@ -834,10 +851,20 @@ var messages$5 = reactIntl.defineMessages({
     description: 'Generic notification message when file upload fails',
     defaultMessage: 'An unexpected error occurred during the file upload. Please try again, or contact support if this error occurs again.'
   },
+  missingRequiredField: {
+    id: 'ImportResourcesModal.missingRequiredField',
+    description: 'Error message displayed when a required field is missing',
+    defaultMessage: 'Missing required field'
+  },
   missingKeyError: {
     id: 'ImportResourcesModal.missingKeyError',
     description: 'Error message displayed when the uploaded file is missing the key field',
     defaultMessage: "The 'key' field is missing or incomplete in some rows. Please ensure every row has a 'key' value."
+  },
+  missingRequiredKeys: {
+    id: 'ImportResourcesModal.missingRequiredKeys',
+    description: 'Error message displayed when the uploaded file is missing required keys',
+    defaultMessage: 'Make sure the file contains required keys for the elements including {fieldNames}'
   }
 });
 
@@ -879,7 +906,7 @@ const useUpload = () => {
       })
     });
     if (errors.length > 0) {
-      actions.setFileUploadClientSideErrors(errors);
+      actions.setFileUploadErrors(errors);
       actions.setCurrentStep(3);
       return false;
     }
@@ -892,12 +919,21 @@ const useUpload = () => {
     }
     if (error instanceof HttpError) {
       if (error.errorData?.code === 'MISSING_KEY_ERROR') {
-        actions.cancelImport();
-        showNotification({
-          kind: 'error',
-          domain: constants.DOMAINS.PAGE,
-          text: intl.formatMessage(messages$5.missingKeyError)
-        });
+        actions.setFileUploadErrors([{
+          title: intl.formatMessage(messages$5.missingRequiredField),
+          description: intl.formatMessage(messages$5.missingKeyError)
+        }]);
+        actions.setCurrentStep(3);
+      } else if (error.errorData?.code === 'MissingCsvFieldIdentifier') {
+        const MissingCsvFieldIdentifierError = error.errorData;
+        const fieldNames = formatKeys(MissingCsvFieldIdentifierError.rowValue);
+        actions.setFileUploadErrors([{
+          title: intl.formatMessage(messages$5.missingRequiredField),
+          description: intl.formatMessage(messages$5.missingRequiredKeys, {
+            fieldNames
+          })
+        }]);
+        actions.setCurrentStep(3);
       } else if (error.errorData?.invalid > 0) {
         actions.setUploadFileResponse(error.errorData);
         actions.setCurrentStep(3);
@@ -1163,10 +1199,10 @@ var messages$4 = reactIntl.defineMessages({
     description: 'In Upload file error modal - "Details" column',
     defaultMessage: 'Details'
   },
-  uploadingError: {
-    id: 'ImportResourcesModal.uploadingError',
+  uploadErrorDescription: {
+    id: 'ImportResourcesModal.uploadErrorDescription',
     description: 'Title when errors detected while uploading file',
-    defaultMessage: 'There are <b>{errorsCount}</b> errors detected while uploading the file <b>{fileName}</b>.'
+    defaultMessage: 'There {errorsCount, plural, one {is <b>{errorsCount}</b> error} other {are <b>{errorsCount}</b> errors}} detected while uploading the file <b>{fileName}</b>.'
   },
   supportedValuesDocumentation: {
     id: 'ImportResourcesModal.supportedValuesDocumentation',
@@ -1190,7 +1226,7 @@ const getColumns$1 = () => [{
   key: 'details',
   label: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$a({}, messages$4.details))
 }];
-const UploadClientSideErrorTable = props => {
+const UploadErrorTable = props => {
   var _context;
   const pagination = uiKit.usePaginationState({
     perPage: 10
@@ -1233,13 +1269,13 @@ function itemRenderer$1(item, column) {
 
 function ownKeys$9(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$9(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$9(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$9(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
-const UploadClientSideErrorsModal = () => {
+const UploadErrorsModal = () => {
   const intl = reactIntl.useIntl();
   const _useImportResourcesCo = useImportResourcesContext(),
     state = _useImportResourcesCo.state,
     actions = _useImportResourcesCo.actions,
     onClose = _useImportResourcesCo.onClose;
-  const errorsCount = state.fileUploadClientSideErrors.length;
+  const errorsCount = state.fileUploadErrors.length;
   return jsxRuntime.jsx(applicationComponents.InfoDialog, {
     size: 16,
     isOpen: true,
@@ -1250,7 +1286,7 @@ const UploadClientSideErrorsModal = () => {
         scale: "l",
         children: [jsxRuntime.jsx(fullstory.Masking.Mask, {
           children: jsxRuntime.jsx(uiKit.Text.Body, {
-            intlMessage: _objectSpread$9(_objectSpread$9({}, messages$4.uploadingError), {}, {
+            intlMessage: _objectSpread$9(_objectSpread$9({}, messages$4.uploadErrorDescription), {}, {
               values: {
                 fileName: state.droppedFile?.name,
                 errorsCount: intl.formatNumber(errorsCount),
@@ -1258,8 +1294,8 @@ const UploadClientSideErrorsModal = () => {
               }
             })
           })
-        }), jsxRuntime.jsx(UploadClientSideErrorTable, {
-          rows: mapUploadFileClientSideErrorsToUploadFileErrorRows(state.fileUploadClientSideErrors)
+        }), jsxRuntime.jsx(UploadErrorTable, {
+          rows: mapFileUploadErrorsToUploadFileErrorRows(state.fileUploadErrors)
         }), jsxRuntime.jsxs(uiKit.Spacings.Inline, {
           scale: "m",
           justifyContent: "flex-end",
@@ -1298,7 +1334,7 @@ const getColumns = () => [{
   key: 'details',
   label: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$8({}, messages$4.details))
 }];
-const UploadServerSideErrorTable = props => {
+const UploadRowErrorTable = props => {
   var _context;
   const pagination = uiKit.usePaginationState({
     perPage: 10
@@ -1329,7 +1365,7 @@ function itemRenderer(item, column) {
     case 'errorType':
       return jsxRuntime.jsx(uiKit.Stamp, {
         isCondensed: true,
-        label: item.code,
+        label: formatErrorCode(item.code),
         tone: "critical"
       });
     case 'details':
@@ -1349,7 +1385,7 @@ function itemRenderer(item, column) {
 
 function ownKeys$7(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$7(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$7(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$7(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
-const UploadServerSideErrorsModal = () => {
+const UploadRowErrorsModal = () => {
   const intl = reactIntl.useIntl();
   const _useImportResourcesCo = useImportResourcesContext(),
     state = _useImportResourcesCo.state,
@@ -1369,7 +1405,7 @@ const UploadServerSideErrorsModal = () => {
           scale: "xs",
           children: [jsxRuntime.jsx(fullstory.Masking.Mask, {
             children: jsxRuntime.jsx(uiKit.Text.Body, {
-              intlMessage: _objectSpread$7(_objectSpread$7({}, messages$4.uploadingError), {}, {
+              intlMessage: _objectSpread$7(_objectSpread$7({}, messages$4.uploadErrorDescription), {}, {
                 values: {
                   fileName: state.droppedFile?.name,
                   errorsCount: intl.formatNumber(errorsCount),
@@ -1389,7 +1425,7 @@ const UploadServerSideErrorsModal = () => {
               }
             })
           })]
-        }), jsxRuntime.jsx(UploadServerSideErrorTable, {
+        }), jsxRuntime.jsx(UploadRowErrorTable, {
           rows: mapUploadFileErrorsResponseToUploadFileErrorRows(state.uploadFileResponse?.results)
         }), jsxRuntime.jsxs(uiKit.Spacings.Inline, {
           scale: "m",
@@ -1783,8 +1819,8 @@ function getBold(msg) {
 const UploadResult = () => {
   const _useImportResourcesCo = useImportResourcesContext(),
     state = _useImportResourcesCo.state;
-  if (state.fileUploadClientSideErrors.length > 0) return jsxRuntime.jsx(UploadClientSideErrorsModal, {});
-  if (state.uploadFileResponse?.invalid > 0) return jsxRuntime.jsx(UploadServerSideErrorsModal, {});
+  if (state.fileUploadErrors.length > 0) return jsxRuntime.jsx(UploadErrorsModal, {});
+  if (state.uploadFileResponse?.invalid > 0) return jsxRuntime.jsx(UploadRowErrorsModal, {});
   return jsxRuntime.jsx(UploadPreviewModal, {});
 };
 
@@ -2027,7 +2063,7 @@ const getChunkImport = locale => {
     case 'de':
       return Promise.resolve().then(function () { return require(/* webpackChunkName: "import-resources-modal-i18n-de" */'./de-d954fe3d.cjs.prod.js'); });
     case 'es':
-      return Promise.resolve().then(function () { return require(/* webpackChunkName: "import-resources-modal-i18n-es" */'./es-231d6889.cjs.prod.js'); });
+      return Promise.resolve().then(function () { return require(/* webpackChunkName: "import-resources-modal-i18n-es" */'./es-9821e666.cjs.prod.js'); });
     case 'fr-FR':
       return Promise.resolve().then(function () { return require(/* webpackChunkName: "import-resources-modal-i18n-fr-FR" */'./fr-FR-fce1ca96.cjs.prod.js'); });
     case 'zh-CN':

package/dist/{index-704cf74c.esm.js → index-d17115c7.esm.js}

@@ -31,6 +31,7 @@ import _findInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instanc
 import _includesInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/includes';
 import Papa from 'papaparse';
 import _reduceInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/reduce';
+import _sliceInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/slice';
 import _JSON$stringify from '@babel/runtime-corejs3/core-js-stable/json/stringify';
 import '@babel/runtime-corejs3/core-js-stable/instance/starts-with';
 import '@babel/runtime-corejs3/core-js-stable/url-search-params';
@@ -45,7 +46,6 @@ import { useShowNotification } from '@commercetools-frontend/actions-global';
 import _styled from '@emotion/styled/base';
 import { css } from '@emotion/react';
 import { reportErrorToSentry } from '@commercetools-frontend/sentry';
-import _sliceInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/slice';
 import DataTable from '@commercetools-uikit/data-table';
 import { parseChunkImport, mapLocaleToIntlLocale } from '@commercetools-frontend/i18n';
 
@@ -68,7 +68,7 @@ function reducer(state, action) {
   if (action.type === 'cancelImport') return _objectSpread$g(_objectSpread$g({}, state), {}, {
     currentStep: 1,
     containerKey: undefined,
-    fileUploadClientSideErrors: [],
+    fileUploadErrors: [],
     uploadFileResponse: undefined,
     droppedFile: undefined,
     dropAreaState: 'disabled',
@@ -77,7 +77,7 @@ function reducer(state, action) {
   if (action.type === 'uploadNewFile') return _objectSpread$g(_objectSpread$g({}, state), {}, {
     currentStep: 1,
     containerKey: undefined,
-    fileUploadClientSideErrors: [],
+    fileUploadErrors: [],
     uploadFileResponse: undefined,
     droppedFile: undefined,
     dropAreaState: 'ready-for-drop',
@@ -88,9 +88,9 @@ function reducer(state, action) {
       droppedFile: action.droppedFile
     });
   }
-  if (action.type === 'setFileUploadClientSideErrors') {
+  if (action.type === 'setFileUploadErrors') {
     return _objectSpread$g(_objectSpread$g({}, state), {}, {
-      fileUploadClientSideErrors: action.fileUploadClientSideErrors
+      fileUploadErrors: action.fileUploadErrors
     });
   }
   if (action.type === 'setAbortController') {
@@ -113,7 +113,7 @@ const initialState = {
   abortController: new AbortController(),
   dropAreaState: 'disabled',
   uploadFileResponse: undefined,
-  fileUploadClientSideErrors: [],
+  fileUploadErrors: [],
   resourceType: 'category',
   containerKey: undefined,
   progress: 0
@@ -335,9 +335,9 @@ const mapUploadFileErrorsResponseToUploadFileErrorRows = uploadFileErrorsRespons
     }));
   });
 };
-const mapUploadFileClientSideErrorsToUploadFileErrorRows = uploadFileClientSideErrors => {
+const mapFileUploadErrorsToUploadFileErrorRows = uploadFileErrors => {
   let idCounter = 1;
-  return _mapInstanceProperty(uploadFileClientSideErrors).call(uploadFileClientSideErrors, uploadFileClientSideError => _objectSpread$e(_objectSpread$e({}, uploadFileClientSideError), {}, {
+  return _mapInstanceProperty(uploadFileErrors).call(uploadFileErrors, uploadFileError => _objectSpread$e(_objectSpread$e({}, uploadFileError), {}, {
     id: String(idCounter++)
   }));
 };
@@ -386,6 +386,23 @@ function convertFileSizeToKB(sizeInBytes) {
 function isAbortError(error) {
   return error instanceof DOMException && error.name === 'AbortError';
 }
+function formatKeys(obj) {
+  var _context;
+  if (typeof obj !== 'object' || obj === null) return '';
+  const keys = _mapInstanceProperty(_context = _Object$keys(obj)).call(_context, key => key.replace(/([a-z])([A-Z])/g, '$1 $2').toLowerCase());
+  if (keys.length === 0) return '';
+  if (keys.length === 1) return keys[0];
+  return `${_sliceInstanceProperty(keys).call(keys, 0, -1).join(', ')} and ${keys[keys.length - 1]}`;
+}
+function formatErrorCode(code) {
+  try {
+    const formattedCode = code.replace(/([a-z])([A-Z])/g, '$1 $2').replace(/([A-Z])([A-Z][a-z])/g, '$1 $2').toLowerCase();
+    let result = formattedCode.charAt(0).toUpperCase() + _sliceInstanceProperty(formattedCode).call(formattedCode, 1);
+    return result;
+  } catch (error) {
+    return code;
+  }
+}
 
 const encodeFileNameWithTimestampToContainerKey = fileName => {
   return btoa(_JSON$stringify({
@@ -559,9 +576,9 @@ const ImportResourcesProvider = props => {
     type: 'setAbortController',
     abortController: abortController
   });
-  const setFileUploadClientSideErrors = fileUploadClientSideErrors => dispatch({
-    type: 'setFileUploadClientSideErrors',
-    fileUploadClientSideErrors: fileUploadClientSideErrors
+  const setFileUploadErrors = fileUploadErrors => dispatch({
+    type: 'setFileUploadErrors',
+    fileUploadErrors: fileUploadErrors
   });
   const setProgress = progress => dispatch({
     type: 'setProgress',
@@ -593,7 +610,7 @@ const ImportResourcesProvider = props => {
         setDroppedFile,
         setContainerKey,
         setAbortController,
-        setFileUploadClientSideErrors,
+        setFileUploadErrors,
         setProgress
       }
     },
@@ -656,13 +673,13 @@ function getDefaultDropWrapperStyles(_dropAreaState) {
   return /*#__PURE__*/css(process.env.NODE_ENV === "production" ? "" : ";label:getDefaultDropWrapperStyles;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRyb3AtYXJlYS13cmFwcGVyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE0QlkiLCJmaWxlIjoiZHJvcC1hcmVhLXdyYXBwZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgdHlwZSBEcm9wem9uZVJvb3RQcm9wcyB9IGZyb20gJ3JlYWN0LWRyb3B6b25lJ1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IHN0eWxlcyB9IGZyb20gJy4vc3R5bGVzJ1xuaW1wb3J0IHsgdHlwZSBEcm9wQXJlYVN0YXRlIH0gZnJvbSAnLi4vLi4vLi4vQHR5cGVzJ1xuXG5pbnRlcmZhY2UgRHJvcFdyYXBwZXJQcm9wcyBleHRlbmRzIERyb3B6b25lUm9vdFByb3BzIHtcbiAgZHJvcEFyZWFTdGF0ZTogRHJvcEFyZWFTdGF0ZVxufVxuZXhwb3J0IGNvbnN0IERyb3BXcmFwcGVyID0gc3R5bGVkLmRpdjxEcm9wV3JhcHBlclByb3BzPmBcbiAgJHtzdHlsZXMuYmFzZX1cbiAgJHsocHJvcHMpID0+IHtcbiAgICBpZiAocHJvcHMuZHJvcEFyZWFTdGF0ZSA9PT0gJ2Rpc2FibGVkJykge1xuICAgICAgcmV0dXJuIHN0eWxlcy5kaXNhYmxlZFxuICAgIH1cbiAgICBpZiAocHJvcHMuZHJvcEFyZWFTdGF0ZSA9PT0gJ3JlYWR5LWZvci1kcm9wJykge1xuICAgICAgcmV0dXJuIHN0eWxlcy5yZWFkeUZvckRyb3BcbiAgICB9XG4gICAgaWYgKHByb3BzLmRyb3BBcmVhU3RhdGUgPT09ICdhY3RpdmUtZHJhZycpIHtcbiAgICAgIHJldHVybiBzdHlsZXMuYWN0aXZlRHJhZ1xuICAgIH1cbiAgICBpZiAocHJvcHMuZHJvcEFyZWFTdGF0ZSA9PT0gJ2ZpbGUtZHJvcHBlZCcpIHtcbiAgICAgIHJldHVybiBzdHlsZXMuZmlsZURyb3BwZWRcbiAgICB9XG4gICAgcmV0dXJuIGdldERlZmF1bHREcm9wV3JhcHBlclN0eWxlcyhwcm9wcy5kcm9wQXJlYVN0YXRlKVxuICB9fVxuYFxuZnVuY3Rpb24gZ2V0RGVmYXVsdERyb3BXcmFwcGVyU3R5bGVzKF9kcm9wQXJlYVN0YXRlOiBuZXZlcikge1xuICByZXR1cm4gY3NzYGBcbn1cbiJdfQ== */");
 }
 
-var ActiveDragDropArea = /*#__PURE__*/lazy(() => import('./active-drag-drop-area-c0368c1e.esm.js' /* webpackChunkName: "active-drag-drop-area" */));
+var ActiveDragDropArea = /*#__PURE__*/lazy(() => import('./active-drag-drop-area-a433b37c.esm.js' /* webpackChunkName: "active-drag-drop-area" */));
 
 var DisabledDropArea = /*#__PURE__*/lazy(() => import('./disabled-drop-area-2c088477.esm.js' /* webpackChunkName: "disabled-drop-area" */));
 
-var EnabledDropArea = /*#__PURE__*/lazy(() => import('./enabled-drop-area-c0c903b2.esm.js' /* webpackChunkName: "enabled-drop-area" */));
+var EnabledDropArea = /*#__PURE__*/lazy(() => import('./enabled-drop-area-38bdfda1.esm.js' /* webpackChunkName: "enabled-drop-area" */));
 
-var FileDropped = /*#__PURE__*/lazy(() => import('./file-dropped-area-5560a729.esm.js' /* webpackChunkName: "filed-dropped-area" */));
+var FileDropped = /*#__PURE__*/lazy(() => import('./file-dropped-area-ef200f92.esm.js' /* webpackChunkName: "filed-dropped-area" */));
 
 function getDropArea(_ref) {
   let dropAreaState = _ref.dropAreaState,
@@ -808,10 +825,20 @@ var messages$5 = defineMessages({
     description: 'Generic notification message when file upload fails',
     defaultMessage: 'An unexpected error occurred during the file upload. Please try again, or contact support if this error occurs again.'
   },
+  missingRequiredField: {
+    id: 'ImportResourcesModal.missingRequiredField',
+    description: 'Error message displayed when a required field is missing',
+    defaultMessage: 'Missing required field'
+  },
   missingKeyError: {
     id: 'ImportResourcesModal.missingKeyError',
     description: 'Error message displayed when the uploaded file is missing the key field',
     defaultMessage: "The 'key' field is missing or incomplete in some rows. Please ensure every row has a 'key' value."
+  },
+  missingRequiredKeys: {
+    id: 'ImportResourcesModal.missingRequiredKeys',
+    description: 'Error message displayed when the uploaded file is missing required keys',
+    defaultMessage: 'Make sure the file contains required keys for the elements including {fieldNames}'
   }
 });
 
@@ -853,7 +880,7 @@ const useUpload = () => {
       })
     });
     if (errors.length > 0) {
-      actions.setFileUploadClientSideErrors(errors);
+      actions.setFileUploadErrors(errors);
       actions.setCurrentStep(3);
       return false;
     }
@@ -866,12 +893,21 @@ const useUpload = () => {
     }
     if (error instanceof HttpError) {
       if (error.errorData?.code === 'MISSING_KEY_ERROR') {
-        actions.cancelImport();
-        showNotification({
-          kind: 'error',
-          domain: DOMAINS.PAGE,
-          text: intl.formatMessage(messages$5.missingKeyError)
-        });
+        actions.setFileUploadErrors([{
+          title: intl.formatMessage(messages$5.missingRequiredField),
+          description: intl.formatMessage(messages$5.missingKeyError)
+        }]);
+        actions.setCurrentStep(3);
+      } else if (error.errorData?.code === 'MissingCsvFieldIdentifier') {
+        const MissingCsvFieldIdentifierError = error.errorData;
+        const fieldNames = formatKeys(MissingCsvFieldIdentifierError.rowValue);
+        actions.setFileUploadErrors([{
+          title: intl.formatMessage(messages$5.missingRequiredField),
+          description: intl.formatMessage(messages$5.missingRequiredKeys, {
+            fieldNames
+          })
+        }]);
+        actions.setCurrentStep(3);
       } else if (error.errorData?.invalid > 0) {
         actions.setUploadFileResponse(error.errorData);
         actions.setCurrentStep(3);
@@ -1137,10 +1173,10 @@ var messages$4 = defineMessages({
     description: 'In Upload file error modal - "Details" column',
     defaultMessage: 'Details'
   },
-  uploadingError: {
-    id: 'ImportResourcesModal.uploadingError',
+  uploadErrorDescription: {
+    id: 'ImportResourcesModal.uploadErrorDescription',
     description: 'Title when errors detected while uploading file',
-    defaultMessage: 'There are <b>{errorsCount}</b> errors detected while uploading the file <b>{fileName}</b>.'
+    defaultMessage: 'There {errorsCount, plural, one {is <b>{errorsCount}</b> error} other {are <b>{errorsCount}</b> errors}} detected while uploading the file <b>{fileName}</b>.'
   },
   supportedValuesDocumentation: {
     id: 'ImportResourcesModal.supportedValuesDocumentation',
@@ -1164,7 +1200,7 @@ const getColumns$1 = () => [{
   key: 'details',
   label: jsx(FormattedMessage, _objectSpread$a({}, messages$4.details))
 }];
-const UploadClientSideErrorTable = props => {
+const UploadErrorTable = props => {
   var _context;
   const pagination = usePaginationState({
     perPage: 10
@@ -1207,13 +1243,13 @@ function itemRenderer$1(item, column) {
 
 function ownKeys$9(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(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(_context = ownKeys$9(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys$9(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
-const UploadClientSideErrorsModal = () => {
+const UploadErrorsModal = () => {
   const intl = useIntl();
   const _useImportResourcesCo = useImportResourcesContext(),
     state = _useImportResourcesCo.state,
     actions = _useImportResourcesCo.actions,
     onClose = _useImportResourcesCo.onClose;
-  const errorsCount = state.fileUploadClientSideErrors.length;
+  const errorsCount = state.fileUploadErrors.length;
   return jsx(InfoDialog, {
     size: 16,
     isOpen: true,
@@ -1224,7 +1260,7 @@ const UploadClientSideErrorsModal = () => {
         scale: "l",
         children: [jsx(Masking.Mask, {
           children: jsx(Text.Body, {
-            intlMessage: _objectSpread$9(_objectSpread$9({}, messages$4.uploadingError), {}, {
+            intlMessage: _objectSpread$9(_objectSpread$9({}, messages$4.uploadErrorDescription), {}, {
               values: {
                 fileName: state.droppedFile?.name,
                 errorsCount: intl.formatNumber(errorsCount),
@@ -1232,8 +1268,8 @@ const UploadClientSideErrorsModal = () => {
               }
             })
           })
-        }), jsx(UploadClientSideErrorTable, {
-          rows: mapUploadFileClientSideErrorsToUploadFileErrorRows(state.fileUploadClientSideErrors)
+        }), jsx(UploadErrorTable, {
+          rows: mapFileUploadErrorsToUploadFileErrorRows(state.fileUploadErrors)
         }), jsxs(Spacings.Inline, {
           scale: "m",
           justifyContent: "flex-end",
@@ -1272,7 +1308,7 @@ const getColumns = () => [{
   key: 'details',
   label: jsx(FormattedMessage, _objectSpread$8({}, messages$4.details))
 }];
-const UploadServerSideErrorTable = props => {
+const UploadRowErrorTable = props => {
   var _context;
   const pagination = usePaginationState({
     perPage: 10
@@ -1303,7 +1339,7 @@ function itemRenderer(item, column) {
     case 'errorType':
       return jsx(Stamp, {
         isCondensed: true,
-        label: item.code,
+        label: formatErrorCode(item.code),
         tone: "critical"
       });
     case 'details':
@@ -1323,7 +1359,7 @@ function itemRenderer(item, column) {
 
 function ownKeys$7(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(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(_context = ownKeys$7(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys$7(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
-const UploadServerSideErrorsModal = () => {
+const UploadRowErrorsModal = () => {
   const intl = useIntl();
   const _useImportResourcesCo = useImportResourcesContext(),
     state = _useImportResourcesCo.state,
@@ -1343,7 +1379,7 @@ const UploadServerSideErrorsModal = () => {
           scale: "xs",
           children: [jsx(Masking.Mask, {
             children: jsx(Text.Body, {
-              intlMessage: _objectSpread$7(_objectSpread$7({}, messages$4.uploadingError), {}, {
+              intlMessage: _objectSpread$7(_objectSpread$7({}, messages$4.uploadErrorDescription), {}, {
                 values: {
                   fileName: state.droppedFile?.name,
                   errorsCount: intl.formatNumber(errorsCount),
@@ -1363,7 +1399,7 @@ const UploadServerSideErrorsModal = () => {
               }
             })
           })]
-        }), jsx(UploadServerSideErrorTable, {
+        }), jsx(UploadRowErrorTable, {
           rows: mapUploadFileErrorsResponseToUploadFileErrorRows(state.uploadFileResponse?.results)
         }), jsxs(Spacings.Inline, {
           scale: "m",
@@ -1771,8 +1807,8 @@ function getBold(msg) {
 const UploadResult = () => {
   const _useImportResourcesCo = useImportResourcesContext(),
     state = _useImportResourcesCo.state;
-  if (state.fileUploadClientSideErrors.length > 0) return jsx(UploadClientSideErrorsModal, {});
-  if (state.uploadFileResponse?.invalid > 0) return jsx(UploadServerSideErrorsModal, {});
+  if (state.fileUploadErrors.length > 0) return jsx(UploadErrorsModal, {});
+  if (state.uploadFileResponse?.invalid > 0) return jsx(UploadRowErrorsModal, {});
   return jsx(UploadPreviewModal, {});
 };
 
@@ -2015,7 +2051,7 @@ const getChunkImport = locale => {
     case 'de':
       return import(/* webpackChunkName: "import-resources-modal-i18n-de" */'./de-cd6c45d3.esm.js');
     case 'es':
-      return import(/* webpackChunkName: "import-resources-modal-i18n-es" */'./es-4cfa2244.esm.js');
+      return import(/* webpackChunkName: "import-resources-modal-i18n-es" */'./es-c6b4310c.esm.js');
     case 'fr-FR':
       return import(/* webpackChunkName: "import-resources-modal-i18n-fr-FR" */'./fr-FR-9d9081ee.esm.js');
     case 'zh-CN':