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

package/dist/{index-6186162d.cjs.prod.js → index-757e3f18.cjs.prod.js}

@@ -27,15 +27,15 @@ var _wrapNativeSuper = require('@babel/runtime-corejs3/helpers/wrapNativeSuper')
 var pluralize = require('pluralize');
 var _Promise = require('@babel/runtime-corejs3/core-js-stable/promise');
 var _Array$isArray = require('@babel/runtime-corejs3/core-js-stable/array/is-array');
+var _includesInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/includes');
+var _someInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/some');
 var _flatMapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/flat-map');
 var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
 var _findInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/find');
-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');
-var _someInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/some');
 require('@babel/runtime-corejs3/core-js-stable/instance/bind');
 require('@babel/runtime-corejs3/core-js-stable/instance/starts-with');
 require('@babel/runtime-corejs3/core-js-stable/url-search-params');
@@ -67,15 +67,15 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var _Reflect$construct__default = /*#__PURE__*/_interopDefault(_Reflect$construct);
 var _Promise__default = /*#__PURE__*/_interopDefault(_Promise);
 var _Array$isArray__default = /*#__PURE__*/_interopDefault(_Array$isArray);
+var _includesInstanceProperty__default = /*#__PURE__*/_interopDefault(_includesInstanceProperty);
+var _someInstanceProperty__default = /*#__PURE__*/_interopDefault(_someInstanceProperty);
 var _flatMapInstanceProperty__default = /*#__PURE__*/_interopDefault(_flatMapInstanceProperty);
 var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
 var _findInstanceProperty__default = /*#__PURE__*/_interopDefault(_findInstanceProperty);
-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);
 
 const EnabledResourceType = {
@@ -297,7 +297,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'
@@ -387,41 +387,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 = reactIntl.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__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$f(e) { for (var r = 1; r < arguments.length; r++) { var _context2, _context3; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context2 = ownKeys$f(Object(t), !0)).call(_context2, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context3 = ownKeys$f(Object(t))).call(_context3, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
-/**
- * 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__default["default"](_context3 = ownKeys$f(Object(t), !0)).call(_context3, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context4 = ownKeys$f(Object(t))).call(_context4, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](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__default["default"](resolve => {
-    let lineCount = 0;
-    let correctDelimiterCount = 0;
-    let detectedDelimiter = null;
     Papa__default["default"].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__default["default"](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__default["default"](ALLOWED_DELIMITERS).call(ALLOWED_DELIMITERS, detectedDelimiter)) {
+          var _context;
+          const isUndetectableDelimiter = _someInstanceProperty__default["default"](_context = result.errors).call(_context, error => error.code === 'UndetectableDelimiter');
+          if (!isUndetectableDelimiter) {
+            isValid = true;
+          }
         }
-      },
-      complete: () => {
-        const isValid = correctDelimiterCount === lineCount;
-        resolve({
-          isValid,
-          delimiter: detectedDelimiter
-        });
+        resolve(isValid);
       }
     });
   });
@@ -430,8 +502,8 @@ const mapUploadFileErrorsResponseToUploadFileErrorRows = uploadFileErrorsRespons
   if (!uploadFileErrorsResponse || !_Array$isArray__default["default"](uploadFileErrorsResponse)) return [];
   let idCounter = 1;
   return _flatMapInstanceProperty__default["default"](uploadFileErrorsResponse).call(uploadFileErrorsResponse, rowErrorsResponse => {
-    var _context;
-    return _mapInstanceProperty__default["default"](_context = rowErrorsResponse.errors).call(_context, rowError => ({
+    var _context2;
+    return _mapInstanceProperty__default["default"](_context2 = rowErrorsResponse.errors).call(_context2, rowError => ({
       // DataTable component requires unique `id` field
       id: String(idCounter++),
       row: rowErrorsResponse.row,
@@ -481,6 +553,35 @@ const toBytes = megabytes => megabytes * 1024 * 1024;
 const getValidatedColumns = (columns, ignoredColumns) => {
   return _filterInstanceProperty__default["default"](columns).call(columns, column => !_includesInstanceProperty__default["default"](ignoredColumns).call(ignoredColumns, column));
 };
+const formatAllowedDelimitersForMessageDisplay = intl => {
+  const localizedOr = intl.formatMessage(sharedMessages.listConjunctionOr);
+  const descriptions = _mapInstanceProperty__default["default"](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__default["default"](errors)) return 0;
@@ -750,13 +851,13 @@ function getDefaultDropWrapperStyles(_dropAreaState) {
   return /*#__PURE__*/react.css("" , "" );
 }
 
-var ActiveDragDropArea = /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return require('./active-drag-drop-area-abe96e04.cjs.prod.js' /* webpackChunkName: "active-drag-drop-area" */); }));
+var ActiveDragDropArea = /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return require('./active-drag-drop-area-cf5791e7.cjs.prod.js' /* webpackChunkName: "active-drag-drop-area" */); }));
 
-var DisabledDropArea = /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return require('./disabled-drop-area-25e976d6.cjs.prod.js' /* webpackChunkName: "disabled-drop-area" */); }));
+var DisabledDropArea = /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return require('./disabled-drop-area-c8e04dd6.cjs.prod.js' /* webpackChunkName: "disabled-drop-area" */); }));
 
-var EnabledDropArea = /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return require('./enabled-drop-area-86aff122.cjs.prod.js' /* webpackChunkName: "enabled-drop-area" */); }));
+var EnabledDropArea = /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return require('./enabled-drop-area-c30c7c5f.cjs.prod.js' /* webpackChunkName: "enabled-drop-area" */); }));
 
-var FileDropped = /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return require('./file-dropped-area-6279df47.cjs.prod.js' /* webpackChunkName: "filed-dropped-area" */); }));
+var FileDropped = /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return require('./file-dropped-area-27c8a11f.cjs.prod.js' /* webpackChunkName: "filed-dropped-area" */); }));
 
 function getDropArea(_ref) {
   let dropAreaState = _ref.dropAreaState,
@@ -878,14 +979,14 @@ var messages$6 = reactIntl.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',
@@ -936,10 +1037,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({
@@ -1209,59 +1312,6 @@ const UploadSettings = () => {
   return null;
 };
 
-var sharedMessages = reactIntl.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,