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

package/dist/{index-6d3efd4e.esm.js → index-a799ed10.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-0d158ff3.esm.js' /* webpackChunkName: "active-drag-drop-area" */));
+var ActiveDragDropArea = /*#__PURE__*/lazy(() => import('./active-drag-drop-area-245e26d9.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-9db1db62.esm.js' /* webpackChunkName: "enabled-drop-area" */));
+var EnabledDropArea = /*#__PURE__*/lazy(() => import('./enabled-drop-area-118cf588.esm.js' /* webpackChunkName: "enabled-drop-area" */));
 
-var FileDropped = /*#__PURE__*/lazy(() => import('./file-dropped-area-04b18c45.esm.js' /* webpackChunkName: "filed-dropped-area" */));
+var FileDropped = /*#__PURE__*/lazy(() => import('./file-dropped-area-ef80a054.esm.js' /* webpackChunkName: "filed-dropped-area" */));
 
 function getDropArea(_ref) {
   let dropAreaState = _ref.dropAreaState,
@@ -791,7 +808,7 @@ var messages$5 = 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',
@@ -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}'
   }
 });
 
@@ -833,9 +860,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({
@@ -855,7 +880,7 @@ const useUpload = () => {
       })
     });
     if (errors.length > 0) {
-      actions.setFileUploadClientSideErrors(errors);
+      actions.setFileUploadErrors(errors);
       actions.setCurrentStep(3);
       return false;
     }
@@ -868,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);
@@ -1139,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',
@@ -1166,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
@@ -1209,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,
@@ -1226,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),
@@ -1234,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",
@@ -1274,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
@@ -1305,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':
@@ -1325,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,
@@ -1345,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),
@@ -1365,7 +1399,7 @@ const UploadServerSideErrorsModal = () => {
               }
             })
           })]
-        }), jsx(UploadServerSideErrorTable, {
+        }), jsx(UploadRowErrorTable, {
           rows: mapUploadFileErrorsResponseToUploadFileErrorRows(state.uploadFileResponse?.results)
         }), jsxs(Spacings.Inline, {
           scale: "m",
@@ -1773,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, {});
 };
 
@@ -2017,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-b38875bc.esm.js');
+      return import(/* webpackChunkName: "import-resources-modal-i18n-es" */'./es-4cfa2244.esm.js');
     case 'fr-FR':
       return import(/* webpackChunkName: "import-resources-modal-i18n-fr-FR" */'./fr-FR-9d9081ee.esm.js');
     case 'zh-CN':