@commercetools-frontend-extensions/import-resources-modal 1.7.6 → 1.8.0

package/dist/{index-c388b02a.esm.js → index-066e573b.esm.js}

@@ -25,15 +25,15 @@ import _wrapNativeSuper from '@babel/runtime-corejs3/helpers/esm/wrapNativeSuper
 import { plural } from 'pluralize';
 import _Promise from '@babel/runtime-corejs3/core-js-stable/promise';
 import _Array$isArray from '@babel/runtime-corejs3/core-js-stable/array/is-array';
+import _includesInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/includes';
+import _someInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/some';
 import _flatMapInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/flat-map';
 import _mapInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/map';
 import _findInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/find';
-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 _someInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/some';
 import '@babel/runtime-corejs3/core-js-stable/instance/bind';
 import '@babel/runtime-corejs3/core-js-stable/instance/starts-with';
 import '@babel/runtime-corejs3/core-js-stable/url-search-params';
@@ -269,7 +269,7 @@ const fetchUsingXhr = _ref2 => {
   return xhr;
 };
 
-const DEFAULT_DELIMITER = ',';
+const ALLOWED_DELIMITERS = [',', ';', '|', '\t'];
 const INITIAL_COLUMN_DISPLAY_COUNT = 8;
 const IMPORT_TAG_KEYS = {
   source: 'source'
@@ -359,41 +359,113 @@ const DEFAULT_SHORT_LIVED_FLAGS = {};
 const DEFAULT_LONG_LIVED_FLAGS = {};
 _objectSpread$g(_objectSpread$g({}, DEFAULT_SHORT_LIVED_FLAGS), DEFAULT_LONG_LIVED_FLAGS);
 
+var sharedMessages = defineMessages({
+  [`modalTitle.${IMPORTABLE_RESOURCES.CATEGORY}`]: {
+    id: 'ImportResourcesModal.modalTitle.category',
+    description: 'Label for the categories modal title',
+    defaultMessage: 'Import categories by CSV'
+  },
+  [`modalTitle.${IMPORTABLE_RESOURCES.PRODUCT}`]: {
+    id: 'ImportResourcesModal.modalTitle.product',
+    description: 'Label for the products modal title',
+    defaultMessage: 'Import products by CSV'
+  },
+  [`modalTitle.${IMPORTABLE_RESOURCES.INVENTORY}`]: {
+    id: 'ImportResourcesModal.modalTitle.inventoryEntry',
+    description: 'Label for the inventories modal title',
+    defaultMessage: 'Import inventories by CSV'
+  },
+  [`modalTitle.${IMPORTABLE_RESOURCES.DISCOUNT_CODE}`]: {
+    id: 'ImportResourcesModal.modalTitle.discountCode',
+    description: 'Label for the inventories modal title',
+    defaultMessage: 'Import discount codes by CSV'
+  },
+  [`modalTitle.${IMPORTABLE_RESOURCES.CUSTOMER}`]: {
+    id: 'ImportResourcesModal.modalTitle.customer',
+    description: 'Label for the customers modal title',
+    defaultMessage: 'Import customers by CSV'
+  },
+  [`modalTitle.${IMPORTABLE_RESOURCES.ORDER}`]: {
+    id: 'ImportResourcesModal.modalTitle.order',
+    description: 'Label for the order modal title',
+    defaultMessage: 'Import orders by CSV'
+  },
+  [`modalTitle.${IMPORTABLE_RESOURCES.PRODUCT_TYPE}`]: {
+    id: 'ImportResourcesModal.modalTitle.productType',
+    description: 'Label for the product type modal title',
+    defaultMessage: 'Import product types by CSV'
+  },
+  uploadButton: {
+    id: 'ImportResourcesModal.uploadButton',
+    description: 'Label for the upload button',
+    defaultMessage: 'Upload and preview'
+  },
+  cancel: {
+    id: 'ImportResourcesModal.cancel',
+    description: 'Label for the cancel button',
+    defaultMessage: 'Cancel'
+  },
+  close: {
+    id: 'ImportResourcesModal.close',
+    description: 'Label for the close button',
+    defaultMessage: 'Close'
+  },
+  listConjunctionOr: {
+    id: 'ImportResourcesModal.listConjunctionOr',
+    description: 'Label for the list conjunction or',
+    defaultMessage: 'or'
+  },
+  delimiterComma: {
+    id: 'ImportResourcesModal.delimiterComma',
+    description: 'Label for the delimiter name comma',
+    defaultMessage: 'comma'
+  },
+  delimiterSemicolon: {
+    id: 'ImportResourcesModal.delimiterSemicolon',
+    description: 'Label for the delimiter name semicolon',
+    defaultMessage: 'semicolon'
+  },
+  delimiterPipe: {
+    id: 'ImportResourcesModal.delimiterPipe',
+    description: 'Label for the delimiter name pipe',
+    defaultMessage: 'pipe'
+  },
+  delimiterTab: {
+    id: 'ImportResourcesModal.delimiterTab',
+    description: 'Label for the delimiter name tab',
+    defaultMessage: 'tab'
+  }
+});
+
 function ownKeys$f(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$f(e) { for (var r = 1; r < arguments.length; r++) { var _context2, _context3; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context2 = ownKeys$f(Object(t), !0)).call(_context2, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context3 = ownKeys$f(Object(t))).call(_context3, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(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`.
- *
- * @param {File} file - The CSV file to check.
- * @param {string} [expectedDelimiter=DEFAULT_DELIMITER] - The expected delimiter to check for in the file.
- * @returns {Promise<DelimiterCheck>} A Promise that resolves to a DelimiterCheck object.
- */
-const checkDelimiter = function (file) {
-  let expectedDelimiter = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_DELIMITER;
+function _objectSpread$f(e) { for (var r = 1; r < arguments.length; r++) { var _context3, _context4; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context3 = ownKeys$f(Object(t), !0)).call(_context3, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context4 = ownKeys$f(Object(t))).call(_context4, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+
+// Delimiters not included in this array may be treated as part of a column content
+// potentially causing the file to be parsed as a single-column CSV and pass this validation
+const NON_ALLOWED_DELIMITERS = ['%', '.', ' '];
+const DELIMITERS_TO_GUESS = [...ALLOWED_DELIMITERS, ...NON_ALLOWED_DELIMITERS];
+const validateDelimiter = file => {
   return new _Promise(resolve => {
-    let lineCount = 0;
-    let correctDelimiterCount = 0;
-    let detectedDelimiter = null;
     Papa.parse(file, {
-      step: (results, parser) => {
-        lineCount++;
-        if (detectedDelimiter === null) {
-          detectedDelimiter = results.meta.delimiter;
-        }
-        if (results.meta.delimiter === expectedDelimiter) {
-          correctDelimiterCount++;
+      delimitersToGuess: DELIMITERS_TO_GUESS,
+      preview: 10,
+      complete: result => {
+        const headerRow = result.data?.[0];
+        const isOnlyOneColumn = _Array$isArray(headerRow) && headerRow.length === 1;
+        if (isOnlyOneColumn) {
+          resolve(true);
+          return;
         }
-        if (lineCount >= 10) {
-          parser.abort();
+        const detectedDelimiter = result.meta.delimiter;
+        let isValid = false;
+        if (detectedDelimiter !== null && _includesInstanceProperty(ALLOWED_DELIMITERS).call(ALLOWED_DELIMITERS, detectedDelimiter)) {
+          var _context;
+          const isUndetectableDelimiter = _someInstanceProperty(_context = result.errors).call(_context, error => error.code === 'UndetectableDelimiter');
+          if (!isUndetectableDelimiter) {
+            isValid = true;
+          }
         }
-      },
-      complete: () => {
-        const isValid = correctDelimiterCount === lineCount;
-        resolve({
-          isValid,
-          delimiter: detectedDelimiter
-        });
+        resolve(isValid);
       }
     });
   });
@@ -402,8 +474,8 @@ const mapUploadFileErrorsResponseToUploadFileErrorRows = uploadFileErrorsRespons
   if (!uploadFileErrorsResponse || !_Array$isArray(uploadFileErrorsResponse)) return [];
   let idCounter = 1;
   return _flatMapInstanceProperty(uploadFileErrorsResponse).call(uploadFileErrorsResponse, rowErrorsResponse => {
-    var _context;
-    return _mapInstanceProperty(_context = rowErrorsResponse.errors).call(_context, rowError => ({
+    var _context2;
+    return _mapInstanceProperty(_context2 = rowErrorsResponse.errors).call(_context2, rowError => ({
       // DataTable component requires unique `id` field
       id: String(idCounter++),
       row: rowErrorsResponse.row,
@@ -453,6 +525,35 @@ const toBytes = megabytes => megabytes * 1024 * 1024;
 const getValidatedColumns = (columns, ignoredColumns) => {
   return _filterInstanceProperty(columns).call(columns, column => !_includesInstanceProperty(ignoredColumns).call(ignoredColumns, column));
 };
+const formatAllowedDelimitersForMessageDisplay = intl => {
+  const localizedOr = intl.formatMessage(sharedMessages.listConjunctionOr);
+  const descriptions = _mapInstanceProperty(ALLOWED_DELIMITERS).call(ALLOWED_DELIMITERS, delimiter => {
+    let nameDescriptor;
+    switch (delimiter) {
+      case ',':
+        nameDescriptor = sharedMessages.delimiterComma;
+        break;
+      case ';':
+        nameDescriptor = sharedMessages.delimiterSemicolon;
+        break;
+      case '|':
+        nameDescriptor = sharedMessages.delimiterPipe;
+        break;
+      case '\t':
+        nameDescriptor = sharedMessages.delimiterTab;
+        break;
+      default:
+        nameDescriptor = undefined;
+    }
+    const name = nameDescriptor ? intl.formatMessage(nameDescriptor) : delimiter;
+    return delimiter === '\t' ? name : `${name} (${delimiter})`;
+  });
+  if (descriptions.length === 1) {
+    return descriptions[0];
+  }
+  const lastDescription = descriptions.pop();
+  return `${descriptions.join(', ')} ${localizedOr} ${lastDescription}`;
+};
 
 function getFileUploadErrorsCount(errors) {
   if (!errors || !_Array$isArray(errors)) return 0;
@@ -725,13 +826,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-bfd1ac28.esm.js' /* webpackChunkName: "active-drag-drop-area" */));
+var ActiveDragDropArea = /*#__PURE__*/lazy(() => import('./active-drag-drop-area-34cca429.esm.js' /* webpackChunkName: "active-drag-drop-area" */));
 
-var DisabledDropArea = /*#__PURE__*/lazy(() => import('./disabled-drop-area-093742fc.esm.js' /* webpackChunkName: "disabled-drop-area" */));
+var DisabledDropArea = /*#__PURE__*/lazy(() => import('./disabled-drop-area-460a605b.esm.js' /* webpackChunkName: "disabled-drop-area" */));
 
-var EnabledDropArea = /*#__PURE__*/lazy(() => import('./enabled-drop-area-db88a5da.esm.js' /* webpackChunkName: "enabled-drop-area" */));
+var EnabledDropArea = /*#__PURE__*/lazy(() => import('./enabled-drop-area-c2591e72.esm.js' /* webpackChunkName: "enabled-drop-area" */));
 
-var FileDropped = /*#__PURE__*/lazy(() => import('./file-dropped-area-70be944b.esm.js' /* webpackChunkName: "filed-dropped-area" */));
+var FileDropped = /*#__PURE__*/lazy(() => import('./file-dropped-area-cf7278ba.esm.js' /* webpackChunkName: "filed-dropped-area" */));
 
 function getDropArea(_ref) {
   let dropAreaState = _ref.dropAreaState,
@@ -853,14 +954,14 @@ var messages$6 = defineMessages({
     description: 'Error description when the file contains more rows than the allowable maximum',
     defaultMessage: 'The file contains more than the allowable maximum of {rowLimit} rows'
   },
-  dropAreaWrongDelimiterTitle: {
-    id: 'ImportResourcesModal.wrongDelimiterTitle',
-    defaultMessage: 'Wrong delimiter'
+  wrongSeparatorTitle: {
+    id: 'ImportResourcesModal.wrongSeparatorTitle',
+    defaultMessage: 'Wrong separator'
   },
-  dropAreaWrongDelimiterDescription: {
-    id: 'ImportResourcesModal.wrongDelimiterDescription',
+  wrongSeparatorDescription: {
+    id: 'ImportResourcesModal.wrongSeparatorDescription',
     description: 'Message within the drop area when a CSV file uses an unexpected delimiter',
-    defaultMessage: 'The file is using an incorrect delimiter. Please use comma (,) instead.'
+    defaultMessage: 'The file is using an unsupported separator. Please use one of the allowed delimiters: {delimiterList}.'
   },
   dropAreaNotEnoughRowsTitle: {
     id: 'ImportResourcesModal.dropAreaNotEnoughRowsTitle',
@@ -911,10 +1012,12 @@ const useUpload = () => {
   }, [state.abortController]);
   const isFileValid = async file => {
     const errors = [];
-    const delimiterCheck = await checkDelimiter(file);
-    if (!delimiterCheck.isValid) errors.push({
-      title: intl.formatMessage(messages$6.dropAreaWrongDelimiterTitle),
-      description: intl.formatMessage(messages$6.dropAreaWrongDelimiterDescription)
+    const isDelimiterValid = await validateDelimiter(file);
+    if (!isDelimiterValid) errors.push({
+      title: intl.formatMessage(messages$6.wrongSeparatorTitle),
+      description: intl.formatMessage(messages$6.wrongSeparatorDescription, {
+        delimiterList: formatAllowedDelimitersForMessageDisplay(intl)
+      })
     });
     const rowCount = await getRowCount(file);
     if (rowCount < 1) errors.push({
@@ -1184,59 +1287,6 @@ const UploadSettings = () => {
   return null;
 };
 
-var sharedMessages = defineMessages({
-  [`modalTitle.${IMPORTABLE_RESOURCES.CATEGORY}`]: {
-    id: 'ImportResourcesModal.modalTitle.category',
-    description: 'Label for the categories modal title',
-    defaultMessage: 'Import categories by CSV'
-  },
-  [`modalTitle.${IMPORTABLE_RESOURCES.PRODUCT}`]: {
-    id: 'ImportResourcesModal.modalTitle.product',
-    description: 'Label for the products modal title',
-    defaultMessage: 'Import products by CSV'
-  },
-  [`modalTitle.${IMPORTABLE_RESOURCES.INVENTORY}`]: {
-    id: 'ImportResourcesModal.modalTitle.inventoryEntry',
-    description: 'Label for the inventories modal title',
-    defaultMessage: 'Import inventories by CSV'
-  },
-  [`modalTitle.${IMPORTABLE_RESOURCES.DISCOUNT_CODE}`]: {
-    id: 'ImportResourcesModal.modalTitle.discountCode',
-    description: 'Label for the inventories modal title',
-    defaultMessage: 'Import discount codes by CSV'
-  },
-  [`modalTitle.${IMPORTABLE_RESOURCES.CUSTOMER}`]: {
-    id: 'ImportResourcesModal.modalTitle.customer',
-    description: 'Label for the customers modal title',
-    defaultMessage: 'Import customers by CSV'
-  },
-  [`modalTitle.${IMPORTABLE_RESOURCES.ORDER}`]: {
-    id: 'ImportResourcesModal.modalTitle.order',
-    description: 'Label for the order modal title',
-    defaultMessage: 'Import orders by CSV'
-  },
-  [`modalTitle.${IMPORTABLE_RESOURCES.PRODUCT_TYPE}`]: {
-    id: 'ImportResourcesModal.modalTitle.productType',
-    description: 'Label for the product type modal title',
-    defaultMessage: 'Import product types by CSV'
-  },
-  uploadButton: {
-    id: 'ImportResourcesModal.uploadButton',
-    description: 'Label for the upload button',
-    defaultMessage: 'Upload and preview'
-  },
-  cancel: {
-    id: 'ImportResourcesModal.cancel',
-    description: 'Label for the cancel button',
-    defaultMessage: 'Cancel'
-  },
-  close: {
-    id: 'ImportResourcesModal.close',
-    description: 'Label for the close button',
-    defaultMessage: 'Close'
-  }
-});
-
 const Upload = () => {
   const _useImportResourcesCo = useImportResourcesContext(),
     state = _useImportResourcesCo.state,