@commercetools-frontend-extensions/export-resources-modal 5.2.0 → 5.3.1

package/dist/{index-7cbf648f.cjs.dev.js → index-2ed12fce.cjs.dev.js}

@@ -22,6 +22,7 @@ var jsxRuntime = require('@emotion/react/jsx-runtime');
 var _valuesInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/values');
 var applicationComponents = require('@commercetools-frontend/application-components');
 var fullstory = require('@commercetools-frontend/fullstory');
+var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
 var React = require('react');
 var _Reflect$construct = require('@babel/runtime-corejs3/core-js-stable/reflect/construct');
 var _createClass = require('@babel/runtime-corejs3/helpers/createClass');
@@ -36,7 +37,6 @@ var omitEmpty = require('omit-empty-es');
 var _someInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/some');
 var _findInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/find');
 var _everyInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/every');
-var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
 var _Array$isArray = require('@babel/runtime-corejs3/core-js-stable/array/is-array');
 var _Set = require('@babel/runtime-corejs3/core-js-stable/set');
 var _sortInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/sort');
@@ -77,6 +77,7 @@ var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_O
 var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
 var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
 var _valuesInstanceProperty__default = /*#__PURE__*/_interopDefault(_valuesInstanceProperty);
+var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
 var React__default = /*#__PURE__*/_interopDefault(React);
 var _Reflect$construct__default = /*#__PURE__*/_interopDefault(_Reflect$construct);
 var _reduceInstanceProperty__default = /*#__PURE__*/_interopDefault(_reduceInstanceProperty);
@@ -85,7 +86,6 @@ var omitEmpty__default = /*#__PURE__*/_interopDefault(omitEmpty);
 var _someInstanceProperty__default = /*#__PURE__*/_interopDefault(_someInstanceProperty);
 var _findInstanceProperty__default = /*#__PURE__*/_interopDefault(_findInstanceProperty);
 var _everyInstanceProperty__default = /*#__PURE__*/_interopDefault(_everyInstanceProperty);
-var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
 var _Array$isArray__default = /*#__PURE__*/_interopDefault(_Array$isArray);
 var _Set__default = /*#__PURE__*/_interopDefault(_Set);
 var _sortInstanceProperty__default = /*#__PURE__*/_interopDefault(_sortInstanceProperty);
@@ -642,6 +642,61 @@ var messages = reactIntl.defineMessages({
     id: 'ExportResourcesModal.noResourcesToExportForQueryPredicate',
     description: 'Error message when there are no resources to export for given query predicate',
     defaultMessage: 'No resources match your query predicate. Please check your query predicate and try again.'
+  },
+  separators: {
+    id: 'ExportResourcesModal.separators',
+    description: 'Label for separators',
+    defaultMessage: 'Separators'
+  },
+  separatorsDescription: {
+    id: 'ExportResourcesModal.separatorsDescription',
+    description: 'Description for column separators',
+    defaultMessage: 'Configure how columns are separated in the exported file'
+  },
+  columns: {
+    id: 'ExportResourcesModal.columns',
+    description: 'Label for column separator select',
+    defaultMessage: 'Columns:'
+  },
+  decimal: {
+    id: 'ExportResourcesModal.decimal',
+    description: 'Label for decimal separator select',
+    defaultMessage: 'Decimals:'
+  },
+  columnSeparatorComma: {
+    id: 'ExportResourcesModal.columnSeparatorComma',
+    description: 'Label for comma column separator option',
+    defaultMessage: 'comma (,)'
+  },
+  columnSeparatorSemicolon: {
+    id: 'ExportResourcesModal.columnSeparatorSemicolon',
+    description: 'Label for semicolon column separator option',
+    defaultMessage: 'semicolon (;)'
+  },
+  decimalSeparatorPoint: {
+    id: 'ExportResourcesModal.decimalSeparatorPoint',
+    description: 'Label for point decimal separator option',
+    defaultMessage: 'point (.)'
+  },
+  decimalSeparatorComma: {
+    id: 'ExportResourcesModal.decimalSeparatorComma',
+    description: 'Label for comma decimal separator option',
+    defaultMessage: 'comma (,)'
+  },
+  columnSeparatorTab: {
+    id: 'ExportResourcesModal.columnSeparatorTab',
+    description: 'Label for tab column separator option',
+    defaultMessage: 'tab (\\t)'
+  },
+  columnSeparatorPipe: {
+    id: 'ExportResourcesModal.columnSeparatorPipe',
+    description: 'Label for pipe column separator option',
+    defaultMessage: 'pipe (|)'
+  },
+  csvSettings: {
+    id: 'ExportResourcesModal.csvSettings',
+    description: 'Label for CSV settings section',
+    defaultMessage: 'CSV settings:'
   }
 });
 
@@ -678,10 +733,128 @@ const renderQueryPredicateError = key => {
   }
 };
 
+const Z_INDEX_DROPDOWN = 30000;
+const OPERATIONS_EXPORT_RESOURCES_MODAL_SELECTION = 'OPERATIONS_EXPORT_RESOURCES_MODAL_SELECTION';
+const OPERATIONS_EXPORT_RESOURCES_MODAL_EXPANDED_GROUP = 'OPERATIONS_EXPORT_RESOURCES_MODAL_EXPANDED_GROUP';
+const TOTAL_STEPS = 3;
+
+const DELIMITERS$1 = {
+  COMMA: ',',
+  SEMICOLON: ';',
+  POINT: '.',
+  TAB: '\t',
+  PIPE: '|'
+};
+const COLUMN_DELIMITER_OPTIONS = [{
+  label: messages.columnSeparatorComma,
+  value: DELIMITERS$1.COMMA
+}, {
+  label: messages.columnSeparatorSemicolon,
+  value: DELIMITERS$1.SEMICOLON
+}, {
+  label: messages.columnSeparatorTab,
+  value: DELIMITERS$1.TAB
+}, {
+  label: messages.columnSeparatorPipe,
+  value: DELIMITERS$1.PIPE
+}];
+const DECIMAL_DELIMITER_OPTIONS = [{
+  label: messages.decimalSeparatorPoint,
+  value: DELIMITERS$1.POINT
+}, {
+  label: messages.decimalSeparatorComma,
+  value: DELIMITERS$1.COMMA
+}];
+
+const EXPORT_OPERATION_STATES = {
+  PROCESSING: 'processing',
+  COMPLETED: 'completed',
+  FAILED: 'failed',
+  QUEUED: 'queued'
+};
+
+const EXPORT_TYPES = {
+  ALL: 'all',
+  FILTERED: 'filtered',
+  SELECTED: 'selected',
+  QUERY_PREDICATE: 'query-predicate'
+};
+
+const EXPORTABLE_RESOURCES = {
+  CATEGORY: 'category',
+  PRODUCT: 'product',
+  PRODUCT_TYPE: 'product-type',
+  DISCOUNT_CODE: 'discount-code',
+  INVENTORY_ENTRY: 'inventory-entry',
+  ORDER: 'order',
+  CUSTOMER: 'customer'
+};
+
+const OUTPUT_FORMATS = {
+  JSON: 'json',
+  CSV: 'csv'
+};
+const OUTPUT_FORMAT_OPTIONS = [{
+  value: OUTPUT_FORMATS.CSV,
+  label: 'CSV'
+}, {
+  value: OUTPUT_FORMATS.JSON,
+  label: 'JSON'
+}];
+
 const EXPORT_DATA_DOCUMENTATION_LINK = 'https://docs.commercetools.com/merchant-center/export-data';
 const CSV_TEMPLATES_LINK = 'https://docs.commercetools.com/merchant-center/import-data#download-a-template';
 const CSV_STRUCTURE_DOCUMENTATION_LINK = 'https://docs.commercetools.com/merchant-center/export-data#structure-of-exported-csv-files';
 
+const resourceTypeMessages = {
+  [EXPORTABLE_RESOURCES.CATEGORY]: {
+    exportScopeAll: messages.exportScopeAllCategories,
+    exportScopeSelected: messages.exportScopeSelectedCategories,
+    exportScopeFiltered: messages.exportScopeFilteredCategories
+  },
+  [EXPORTABLE_RESOURCES.PRODUCT]: {
+    exportScopeAll: messages.exportScopeAllProducts,
+    exportScopeSelected: messages.exportScopeSelectedProducts,
+    exportScopeFiltered: messages.exportScopeFilteredProducts
+  },
+  [EXPORTABLE_RESOURCES.PRODUCT_TYPE]: {
+    exportScopeAll: messages.exportScopeAllProductTypes,
+    exportScopeSelected: messages.exportScopeSelectedProductTypes,
+    exportScopeFiltered: messages.exportScopeFilteredProductTypes
+  },
+  [EXPORTABLE_RESOURCES.INVENTORY_ENTRY]: {
+    exportScopeAll: messages.exportInventoriesForAllProducts,
+    exportScopeSelected: messages.exportInventoriesForSelectedProducts,
+    exportScopeFiltered: messages.exportInventoriesForFilteredProducts
+  },
+  [EXPORTABLE_RESOURCES.DISCOUNT_CODE]: {
+    exportScopeAll: messages.exportScopeAllDiscountCodes,
+    exportScopeSelected: messages.exportScopeSelectedDiscountCodes,
+    exportScopeFiltered: messages.exportScopeFilteredDiscountCodes
+  },
+  [EXPORTABLE_RESOURCES.ORDER]: {
+    exportScopeAll: messages.exportScopeAllOrders,
+    exportScopeSelected: messages.exportScopeSelectedOrders,
+    exportScopeFiltered: messages.exportScopeFilteredOrders
+  },
+  [EXPORTABLE_RESOURCES.CUSTOMER]: {
+    exportScopeAll: messages.exportScopeAllCustomers,
+    exportScopeSelected: messages.exportScopeSelectedCustomers,
+    exportScopeFiltered: messages.exportScopeFilteredCustomers
+  }
+};
+
+const FIELD_SELECTION_MODES = {
+  SELECTED_FIELDS: 'selected-fields',
+  IMPORTED_CSV_TEMPLATE: 'imported-csv-template'
+};
+
+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; }
+function _objectSpread$g(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$g(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$g(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+const DEFAULT_SHORT_LIVED_FLAGS = {};
+const DEFAULT_LONG_LIVED_FLAGS = {};
+_objectSpread$g(_objectSpread$g({}, DEFAULT_SHORT_LIVED_FLAGS), DEFAULT_LONG_LIVED_FLAGS);
+
 function _callSuper$3(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct$3() ? _Reflect$construct__default["default"](o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct$3() { try { var t = !Boolean.prototype.valueOf.call(_Reflect$construct__default["default"](Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct$3 = function () { return !!t; })(); }
 let MissingExportResourceProviderError = /*#__PURE__*/function (_Error) {
@@ -747,8 +920,8 @@ function useExportResourcesModalContext() {
   return context;
 }
 
-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; }
-function _objectSpread$g(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$g(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$g(Object(t))).call(_context3, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+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; }
 const defaultOptions = {
   storageType: 'local',
   segregateByUser: true
@@ -766,7 +939,7 @@ const getStorage = storageType => storageType === 'session' ? sessionStorage : l
 const isNil = value => typeof value === 'undefined' || value === null;
 const useStorage = (storageKey, initialStorageValue, options) => {
   var _context;
-  const mergedOptions = _objectSpread$g(_objectSpread$g({}, defaultOptions), options);
+  const mergedOptions = _objectSpread$f(_objectSpread$f({}, defaultOptions), options);
   const userId = applicationShellConnectors.useApplicationContext(context => context.user?.id);
   const scopedStorageKey = _filterInstanceProperty__default["default"](_context = [mergedOptions.segregateByUser && userId, storageKey]).call(_context, Boolean).join('/');
   const readFromStorage = React.useCallback(() => {
@@ -810,96 +983,6 @@ const useStorage = (storageKey, initialStorageValue, options) => {
   return [actualStorageValue, writeToStorage, readFromStorage];
 };
 
-const Z_INDEX_DROPDOWN = 30000;
-const OPERATIONS_EXPORT_RESOURCES_MODAL_SELECTION = 'OPERATIONS_EXPORT_RESOURCES_MODAL_SELECTION';
-const OPERATIONS_EXPORT_RESOURCES_MODAL_EXPANDED_GROUP = 'OPERATIONS_EXPORT_RESOURCES_MODAL_EXPANDED_GROUP';
-const TOTAL_STEPS = 3;
-
-const EXPORT_OPERATION_STATES = {
-  PROCESSING: 'processing',
-  COMPLETED: 'completed',
-  FAILED: 'failed',
-  QUEUED: 'queued'
-};
-
-const EXPORT_TYPES = {
-  ALL: 'all',
-  FILTERED: 'filtered',
-  SELECTED: 'selected',
-  QUERY_PREDICATE: 'query-predicate'
-};
-
-const EXPORTABLE_RESOURCES = {
-  CATEGORY: 'category',
-  PRODUCT: 'product',
-  PRODUCT_TYPE: 'product-type',
-  DISCOUNT_CODE: 'discount-code',
-  INVENTORY_ENTRY: 'inventory-entry',
-  ORDER: 'order',
-  CUSTOMER: 'customer'
-};
-
-const OUTPUT_FORMATS = {
-  JSON: 'json',
-  CSV: 'csv'
-};
-const OUTPUT_FORMAT_OPTIONS = [{
-  value: OUTPUT_FORMATS.CSV,
-  label: 'CSV'
-}, {
-  value: OUTPUT_FORMATS.JSON,
-  label: 'JSON'
-}];
-
-const resourceTypeMessages = {
-  [EXPORTABLE_RESOURCES.CATEGORY]: {
-    exportScopeAll: messages.exportScopeAllCategories,
-    exportScopeSelected: messages.exportScopeSelectedCategories,
-    exportScopeFiltered: messages.exportScopeFilteredCategories
-  },
-  [EXPORTABLE_RESOURCES.PRODUCT]: {
-    exportScopeAll: messages.exportScopeAllProducts,
-    exportScopeSelected: messages.exportScopeSelectedProducts,
-    exportScopeFiltered: messages.exportScopeFilteredProducts
-  },
-  [EXPORTABLE_RESOURCES.PRODUCT_TYPE]: {
-    exportScopeAll: messages.exportScopeAllProductTypes,
-    exportScopeSelected: messages.exportScopeSelectedProductTypes,
-    exportScopeFiltered: messages.exportScopeFilteredProductTypes
-  },
-  [EXPORTABLE_RESOURCES.INVENTORY_ENTRY]: {
-    exportScopeAll: messages.exportInventoriesForAllProducts,
-    exportScopeSelected: messages.exportInventoriesForSelectedProducts,
-    exportScopeFiltered: messages.exportInventoriesForFilteredProducts
-  },
-  [EXPORTABLE_RESOURCES.DISCOUNT_CODE]: {
-    exportScopeAll: messages.exportScopeAllDiscountCodes,
-    exportScopeSelected: messages.exportScopeSelectedDiscountCodes,
-    exportScopeFiltered: messages.exportScopeFilteredDiscountCodes
-  },
-  [EXPORTABLE_RESOURCES.ORDER]: {
-    exportScopeAll: messages.exportScopeAllOrders,
-    exportScopeSelected: messages.exportScopeSelectedOrders,
-    exportScopeFiltered: messages.exportScopeFilteredOrders
-  },
-  [EXPORTABLE_RESOURCES.CUSTOMER]: {
-    exportScopeAll: messages.exportScopeAllCustomers,
-    exportScopeSelected: messages.exportScopeSelectedCustomers,
-    exportScopeFiltered: messages.exportScopeFilteredCustomers
-  }
-};
-
-const FIELD_SELECTION_MODES = {
-  SELECTED_FIELDS: 'selected-fields',
-  IMPORTED_CSV_TEMPLATE: 'imported-csv-template'
-};
-
-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 _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$f(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$f(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
-const DEFAULT_SHORT_LIVED_FLAGS = {};
-const DEFAULT_LONG_LIVED_FLAGS = {};
-_objectSpread$f(_objectSpread$f({}, DEFAULT_SHORT_LIVED_FLAGS), DEFAULT_LONG_LIVED_FLAGS);
-
 function resourceTypeToFileName(resourceType, locale) {
   var _context;
   const date = new Date();
@@ -1489,13 +1572,14 @@ const useInitialValues = props => {
     groups = updateFieldGroupsWithIsCheckedValue(groups, cachedSelectedGroups?.[props.resourceType] || {});
     groups = updateFieldGroupsWithIsExpandedValue(groups, cachedExpandedGroups?.[props.resourceType] || {});
     return {
-      outputFormat: props.outputFormat,
       fileName: `${resourceTypeToFileName(props.resourceType, userLocale)}`,
       locales: [locale],
       groups: updateFieldGroupWithAdditionalFieldExtensions(groups),
       queryPredicate: '',
-      // Preferences
       fillRows: false,
+      outputFormat: props.outputFormat,
+      columnSeparator: DELIMITERS$1.COMMA,
+      decimalSeparator: DELIMITERS$1.POINT,
       importedCsvTemplateFile: null
     };
   }, [props.fieldGroups, props.resourceType, props.outputFormat, cachedSelectedGroups, cachedExpandedGroups, locale, userLocale]);
@@ -1571,13 +1655,18 @@ const useStartExportOperation = props => {
       if (localeOption !== 'onlyLocalesFoundInCsvFile') {
         locales = values.locales;
       }
+      const isCsv = values.outputFormat === 'csv';
       const response = await createExportOperation({
         projectKey,
         resourceType: props.resourceType,
         fileName: appendCsvOrJsonExtensionIfAbsent(values.fileName, values.outputFormat),
         fileFormat: values.outputFormat,
         locales,
-        fillRows: values.outputFormat === 'csv' && values.fillRows,
+        fillRows: isCsv && values.fillRows,
+        separator: isCsv ? {
+          columns: values.columnSeparator,
+          decimal: values.decimalSeparator
+        } : undefined,
         fields,
         where,
         filters
@@ -1811,25 +1900,78 @@ function _objectSpread$a(e) { for (var r = 1; r < arguments.length; r++) { var _
 const ExportPreferenceSection = () => {
   const _useExportResourcesMo = useExportResourcesModalContext(),
     formik = _useExportResourcesMo.formik;
-  return jsxRuntime.jsxs("div", {
-    children: [jsxRuntime.jsx(uiKit.CheckboxInput, {
-      isChecked: _valuesInstanceProperty__default["default"](formik).fillRows,
-      onChange: e => {
-        formik.setFieldValue('fillRows', e.target.checked);
-      },
-      children: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$a({}, messages.fillRows))
-    }), jsxRuntime.jsxs(uiKit.Spacings.Inline, {
-      scale: "xl",
-      children: [jsxRuntime.jsx("div", {}), jsxRuntime.jsx(uiKit.Text.Caption, {
-        intlMessage: _objectSpread$a(_objectSpread$a({}, messages.moreInformation), {}, {
-          values: {
-            documentationLink: jsxRuntime.jsx(uiKit.Link, {
-              intlMessage: messages.documentation,
-              isExternal: true,
-              to: CSV_STRUCTURE_DOCUMENTATION_LINK
-            }, "documentation-link")
-          }
-        })
+  const columnSeparatorOptions = _mapInstanceProperty__default["default"](COLUMN_DELIMITER_OPTIONS).call(COLUMN_DELIMITER_OPTIONS, option => _objectSpread$a(_objectSpread$a({}, option), {}, {
+    label: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$a({}, option.label))
+  }));
+  const decimalSeparatorOptions = _mapInstanceProperty__default["default"](DECIMAL_DELIMITER_OPTIONS).call(DECIMAL_DELIMITER_OPTIONS, option => _objectSpread$a(_objectSpread$a({}, option), {}, {
+    label: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$a({}, option.label))
+  }));
+  return jsxRuntime.jsxs(uiKit.Spacings.Stack, {
+    scale: "m",
+    children: [jsxRuntime.jsxs(uiKit.Spacings.Stack, {
+      scale: "s",
+      children: [jsxRuntime.jsxs("div", {
+        children: [jsxRuntime.jsx(uiKit.Text.Body, {
+          intlMessage: messages.separators
+        }), jsxRuntime.jsx(uiKit.Text.Caption, {
+          intlMessage: messages.separatorsDescription
+        })]
+      }), jsxRuntime.jsxs(uiKit.Spacings.Inline, {
+        scale: "s",
+        children: [jsxRuntime.jsxs(uiKit.Spacings.Inline, {
+          scale: "xs",
+          alignItems: "center",
+          children: [jsxRuntime.jsx(uiKit.Text.Body, {
+            intlMessage: messages.columns
+          }), jsxRuntime.jsx(uiKit.SelectInput, {
+            horizontalConstraint: 4,
+            isSearchable: false,
+            options: columnSeparatorOptions,
+            value: _valuesInstanceProperty__default["default"](formik).columnSeparator,
+            onChange: e => {
+              formik.setFieldValue('columnSeparator', e.target.value);
+            },
+            menuPortalTarget: document.body,
+            menuPortalZIndex: Z_INDEX_DROPDOWN
+          })]
+        }), jsxRuntime.jsxs(uiKit.Spacings.Inline, {
+          scale: "s",
+          alignItems: "center",
+          children: [jsxRuntime.jsx(uiKit.Text.Body, {
+            intlMessage: messages.decimal
+          }), jsxRuntime.jsx(uiKit.SelectInput, {
+            isSearchable: false,
+            options: decimalSeparatorOptions,
+            value: _valuesInstanceProperty__default["default"](formik).decimalSeparator,
+            onChange: e => {
+              formik.setFieldValue('decimalSeparator', e.target.value);
+            },
+            menuPortalTarget: document.body,
+            horizontalConstraint: 4,
+            menuPortalZIndex: Z_INDEX_DROPDOWN
+          })]
+        })]
+      })]
+    }), jsxRuntime.jsxs("div", {
+      children: [jsxRuntime.jsx(uiKit.CheckboxInput, {
+        isChecked: _valuesInstanceProperty__default["default"](formik).fillRows,
+        onChange: e => {
+          formik.setFieldValue('fillRows', e.target.checked);
+        },
+        children: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$a({}, messages.fillRows))
+      }), jsxRuntime.jsxs(uiKit.Spacings.Inline, {
+        scale: "xl",
+        children: [jsxRuntime.jsx("div", {}), jsxRuntime.jsx(uiKit.Text.Caption, {
+          intlMessage: _objectSpread$a(_objectSpread$a({}, messages.moreInformation), {}, {
+            values: {
+              documentationLink: jsxRuntime.jsx(uiKit.Link, {
+                intlMessage: messages.documentation,
+                isExternal: true,
+                to: CSV_STRUCTURE_DOCUMENTATION_LINK
+              }, "documentation-link")
+            }
+          })
+        })]
       })]
     })]
   });
@@ -1983,8 +2125,16 @@ const ExportFileSettingsStep = () => {
                   options: OUTPUT_FORMAT_OPTIONS,
                   menuPortalTarget: document.body,
                   menuPortalZIndex: Z_INDEX_DROPDOWN
-                }), shouldShowPreferences && jsxRuntime.jsx(ExportPreferenceSection, {})]
+                })]
               })
+            }), shouldShowPreferences && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+              children: [jsxRuntime.jsx(uiKit.Grid.Item, {
+                children: jsxRuntime.jsx(uiKit.Text.Body, {
+                  intlMessage: messages.csvSettings
+                })
+              }), jsxRuntime.jsx(uiKit.Grid.Item, {
+                children: jsxRuntime.jsx(ExportPreferenceSection, {})
+              })]
             })]
           })
         })
@@ -3208,11 +3358,11 @@ function getDefaultDropWrapperStyles(_dropAreaState) {
   return /*#__PURE__*/react.css(process.env.NODE_ENV === "production" ? "" : ";label:getDefaultDropWrapperStyles;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRyb3AtYXJlYS13cmFwcGVyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF5QlkiLCJmaWxlIjoiZHJvcC1hcmVhLXdyYXBwZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgdHlwZSBEcm9wem9uZVJvb3RQcm9wcyB9IGZyb20gJ3JlYWN0LWRyb3B6b25lJ1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IHN0eWxlcyB9IGZyb20gJy4vc3R5bGVzJ1xuaW1wb3J0IHsgdHlwZSBEcm9wQXJlYVN0YXRlIH0gZnJvbSAnLi4vLi4vLi4vQHR5cGVzJ1xuXG5pbnRlcmZhY2UgRHJvcFdyYXBwZXJQcm9wcyBleHRlbmRzIERyb3B6b25lUm9vdFByb3BzIHtcbiAgZHJvcEFyZWFTdGF0ZTogRHJvcEFyZWFTdGF0ZVxufVxuZXhwb3J0IGNvbnN0IERyb3BXcmFwcGVyID0gc3R5bGVkLmRpdjxEcm9wV3JhcHBlclByb3BzPmBcbiAgJHtzdHlsZXMuYmFzZX1cbiAgJHsocHJvcHMpID0+IHtcbiAgICBpZiAocHJvcHMuZHJvcEFyZWFTdGF0ZSA9PT0gJ2RlZmF1bHQnKSB7XG4gICAgICByZXR1cm4gc3R5bGVzLnJlYWR5Rm9yRHJvcFxuICAgIH1cbiAgICBpZiAocHJvcHMuZHJvcEFyZWFTdGF0ZSA9PT0gJ2FjdGl2ZS1kcmFnJykge1xuICAgICAgcmV0dXJuIHN0eWxlcy5hY3RpdmVEcmFnXG4gICAgfVxuICAgIGlmIChwcm9wcy5kcm9wQXJlYVN0YXRlID09PSAnZmlsZS1kcm9wcGVkJykge1xuICAgICAgcmV0dXJuIHN0eWxlcy5maWxlRHJvcHBlZFxuICAgIH1cbiAgICByZXR1cm4gZ2V0RGVmYXVsdERyb3BXcmFwcGVyU3R5bGVzKHByb3BzLmRyb3BBcmVhU3RhdGUpXG4gIH19XG5gXG5mdW5jdGlvbiBnZXREZWZhdWx0RHJvcFdyYXBwZXJTdHlsZXMoX2Ryb3BBcmVhU3RhdGU6IG5ldmVyKSB7XG4gIHJldHVybiBjc3NgYFxufVxuIl19 */");
 }
 
-var ActiveDragDropArea = /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return require('./active-drag-drop-area-42bf7adf.cjs.dev.js' /* webpackChunkName: "active-drag-drop-area" */); }));
+var ActiveDragDropArea = /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return require('./active-drag-drop-area-e3f74c13.cjs.dev.js' /* webpackChunkName: "active-drag-drop-area" */); }));
 
-var EnabledDropArea = /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return require('./enabled-drop-area-f0ede72d.cjs.dev.js' /* webpackChunkName: "enabled-drop-area" */); }));
+var EnabledDropArea = /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return require('./enabled-drop-area-b35ddf49.cjs.dev.js' /* webpackChunkName: "enabled-drop-area" */); }));
 
-var FileDropped = /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return require('./file-dropped-area-2c4b364b.cjs.dev.js' /* webpackChunkName: "filed-dropped-area" */); }));
+var FileDropped = /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return require('./file-dropped-area-ff7e0b8e.cjs.dev.js' /* webpackChunkName: "filed-dropped-area" */); }));
 
 function getDropArea(_ref) {
   let dropAreaState = _ref.dropAreaState,
@@ -3293,17 +3443,17 @@ const getChunkImport = locale => {
   const intlLocale = i18n.mapLocaleToIntlLocale(locale);
   switch (intlLocale) {
     case 'de':
-      return Promise.resolve().then(function () { return require(/* webpackChunkName: "export-resources-modal-i18n-de" */'./de-c18aeb38.cjs.dev.js'); });
+      return Promise.resolve().then(function () { return require(/* webpackChunkName: "export-resources-modal-i18n-de" */'./de-44143469.cjs.dev.js'); });
     case 'es':
-      return Promise.resolve().then(function () { return require(/* webpackChunkName: "export-resources-modal-i18n-es" */'./es-38a3a3ae.cjs.dev.js'); });
+      return Promise.resolve().then(function () { return require(/* webpackChunkName: "export-resources-modal-i18n-es" */'./es-e6dd1e27.cjs.dev.js'); });
     case 'fr-FR':
-      return Promise.resolve().then(function () { return require(/* webpackChunkName: "export-resources-modal-i18n-fr-FR" */'./fr-FR-97c22617.cjs.dev.js'); });
+      return Promise.resolve().then(function () { return require(/* webpackChunkName: "export-resources-modal-i18n-fr-FR" */'./fr-FR-62affef0.cjs.dev.js'); });
     case 'ja':
       return Promise.resolve().then(function () { return require(/* webpackChunkName: "export-resources-modal-i18n-ja" */'./ja-9bd5f452.cjs.dev.js'); });
     case 'pt-BR':
-      return Promise.resolve().then(function () { return require(/* webpackChunkName: "change-history-i18n-pt-BR" */'./pt-BR-c42a98aa.cjs.dev.js'); });
+      return Promise.resolve().then(function () { return require(/* webpackChunkName: "change-history-i18n-pt-BR" */'./pt-BR-13243e64.cjs.dev.js'); });
     default:
-      return Promise.resolve().then(function () { return require(/* webpackChunkName: "export-resources-modal-i18n-en" */'./en-68174953.cjs.dev.js'); });
+      return Promise.resolve().then(function () { return require(/* webpackChunkName: "export-resources-modal-i18n-en" */'./en-6928b534.cjs.dev.js'); });
   }
 };
 const loadMessages = async locale => {