@commercetools-frontend-extensions/import-resources-modal 1.3.14 → 1.3.16

package/dist/{index-ec8576ff.cjs.prod.js → index-50af68b8.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-41ed9b4e.cjs.prod.js' /* webpackChunkName: "active-drag-drop-area" */); }));
+var ActiveDragDropArea = /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return require('./active-drag-drop-area-1990c888.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-be322b30.cjs.prod.js' /* webpackChunkName: "enabled-drop-area" */); }));
+var EnabledDropArea = /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return require('./enabled-drop-area-2c8702cd.cjs.prod.js' /* webpackChunkName: "enabled-drop-area" */); }));
 
-var FileDropped = /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return require('./file-dropped-area-6ae3952f.cjs.prod.js' /* webpackChunkName: "filed-dropped-area" */); }));
+var FileDropped = /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return require('./file-dropped-area-19c71ab9.cjs.prod.js' /* webpackChunkName: "filed-dropped-area" */); }));
 
 function getDropArea(_ref) {
   let dropAreaState = _ref.dropAreaState,
@@ -817,7 +834,7 @@ var messages$5 = reactIntl.defineMessages({
   dropAreaWrongDelimiterDescription: {
     id: 'ImportResourcesModal.wrongDelimiterDescription',
     description: 'Message within the drop area when a CSV file uses an unexpected delimiter',
-    defaultMessage: 'The file is using the wrong delimiter "{delimiter}"'
+    defaultMessage: 'The file is using an incorrect delimiter. Please use comma (,) instead.'
   },
   dropAreaNotEnoughRowsTitle: {
     id: 'ImportResourcesModal.dropAreaNotEnoughRowsTitle',
@@ -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}'
   }
 });
 
@@ -859,9 +886,7 @@ const useUpload = () => {
     const delimiterCheck = await checkDelimiter(file);
     if (!delimiterCheck.isValid) errors.push({
       title: intl.formatMessage(messages$5.dropAreaWrongDelimiterTitle),
-      description: intl.formatMessage(messages$5.dropAreaWrongDelimiterDescription, {
-        delimiter: delimiterCheck.delimiter
-      })
+      description: intl.formatMessage(messages$5.dropAreaWrongDelimiterDescription)
     });
     const rowCount = await getRowCount(file);
     if (rowCount < 1) errors.push({
@@ -881,7 +906,7 @@ const useUpload = () => {
       })
     });
     if (errors.length > 0) {
-      actions.setFileUploadClientSideErrors(errors);
+      actions.setFileUploadErrors(errors);
       actions.setCurrentStep(3);
       return false;
     }
@@ -894,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);
@@ -1165,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',
@@ -1192,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
@@ -1235,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,
@@ -1252,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),
@@ -1260,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",
@@ -1300,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
@@ -1331,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':
@@ -1351,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,
@@ -1371,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),
@@ -1391,7 +1425,7 @@ const UploadServerSideErrorsModal = () => {
               }
             })
           })]
-        }), jsxRuntime.jsx(UploadServerSideErrorTable, {
+        }), jsxRuntime.jsx(UploadRowErrorTable, {
           rows: mapUploadFileErrorsResponseToUploadFileErrorRows(state.uploadFileResponse?.results)
         }), jsxRuntime.jsxs(uiKit.Spacings.Inline, {
           scale: "m",
@@ -1785,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, {});
 };
 
@@ -2029,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-934f3c93.cjs.prod.js'); });
+      return Promise.resolve().then(function () { return require(/* webpackChunkName: "import-resources-modal-i18n-es" */'./es-231d6889.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':