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

package/dist/{index-b6f8d138.esm.js → index-f0396960.esm.js}

@@ -15,11 +15,12 @@ import _Object$defineProperties from '@babel/runtime-corejs3/core-js-stable/obje
 import _Object$defineProperty from '@babel/runtime-corejs3/core-js-stable/object/define-property';
 import { defineMessages, FormattedMessage, useIntl, IntlProvider } from 'react-intl';
 import { useApplicationContext } from '@commercetools-frontend/application-shell-connectors';
-import { Text, TextInput, CheckboxInput, Spacings, Link, RadioInput, TextField, AngleRightIcon, Grid, designTokens, SelectField, FieldLabel, Constraints, Tooltip, SupportIcon, Stamp, IconButton, AngleDownIcon, CollapsibleMotion, Card, SearchTextInput, TagList, FlatButton, AngleUpIcon, CheckBoldIcon, DataTable } from '@commercetools-frontend/ui-kit';
+import { Text, TextInput, Spacings, SelectInput, CheckboxInput, Link, RadioInput, TextField, AngleRightIcon, Grid, designTokens, SelectField, FieldLabel, Constraints, Tooltip, SupportIcon, Stamp, IconButton, AngleDownIcon, CollapsibleMotion, Card, SearchTextInput, TagList, FlatButton, AngleUpIcon, CheckBoldIcon, DataTable } from '@commercetools-frontend/ui-kit';
 import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
 import _valuesInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/values';
 import { FormDialog } from '@commercetools-frontend/application-components';
 import { Masking } from '@commercetools-frontend/fullstory';
+import _mapInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/map';
 import React, { useContext, useCallback, useState, useEffect, createContext, Fragment as Fragment$1, useMemo, lazy } from 'react';
 import _Reflect$construct from '@babel/runtime-corejs3/core-js-stable/reflect/construct';
 import _createClass from '@babel/runtime-corejs3/helpers/esm/createClass';
@@ -34,7 +35,6 @@ import omitEmpty from 'omit-empty-es';
 import _someInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/some';
 import _findInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/find';
 import _everyInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/every';
-import _mapInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/map';
 import _Array$isArray from '@babel/runtime-corejs3/core-js-stable/array/is-array';
 import _Set from '@babel/runtime-corejs3/core-js-stable/set';
 import _sortInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/sort';
@@ -601,6 +601,61 @@ var messages = 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:'
   }
 });
 
@@ -637,10 +692,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(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$g(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys$g(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys$g(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(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(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct$3() { try { var t = !Boolean.prototype.valueOf.call(_Reflect$construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct$3 = function () { return !!t; })(); }
 let MissingExportResourceProviderError = /*#__PURE__*/function (_Error) {
@@ -706,8 +879,8 @@ function useExportResourcesModalContext() {
   return context;
 }
 
-function ownKeys$g(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$g(e) { for (var r = 1; r < arguments.length; r++) { var _context2, _context3; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context2 = ownKeys$g(Object(t), !0)).call(_context2, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context3 = ownKeys$g(Object(t))).call(_context3, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+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; }
 const defaultOptions = {
   storageType: 'local',
   segregateByUser: true
@@ -725,7 +898,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 = useApplicationContext(context => context.user?.id);
   const scopedStorageKey = _filterInstanceProperty(_context = [mergedOptions.segregateByUser && userId, storageKey]).call(_context, Boolean).join('/');
   const readFromStorage = useCallback(() => {
@@ -769,96 +942,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(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 _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys$f(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys$f(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(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();
@@ -1448,13 +1531,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]);
@@ -1530,13 +1614,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
@@ -1770,25 +1859,78 @@ function _objectSpread$a(e) { for (var r = 1; r < arguments.length; r++) { var _
 const ExportPreferenceSection = () => {
   const _useExportResourcesMo = useExportResourcesModalContext(),
     formik = _useExportResourcesMo.formik;
-  return jsxs("div", {
-    children: [jsx(CheckboxInput, {
-      isChecked: _valuesInstanceProperty(formik).fillRows,
-      onChange: e => {
-        formik.setFieldValue('fillRows', e.target.checked);
-      },
-      children: jsx(FormattedMessage, _objectSpread$a({}, messages.fillRows))
-    }), jsxs(Spacings.Inline, {
-      scale: "xl",
-      children: [jsx("div", {}), jsx(Text.Caption, {
-        intlMessage: _objectSpread$a(_objectSpread$a({}, messages.moreInformation), {}, {
-          values: {
-            documentationLink: jsx(Link, {
-              intlMessage: messages.documentation,
-              isExternal: true,
-              to: CSV_STRUCTURE_DOCUMENTATION_LINK
-            }, "documentation-link")
-          }
-        })
+  const columnSeparatorOptions = _mapInstanceProperty(COLUMN_DELIMITER_OPTIONS).call(COLUMN_DELIMITER_OPTIONS, option => _objectSpread$a(_objectSpread$a({}, option), {}, {
+    label: jsx(FormattedMessage, _objectSpread$a({}, option.label))
+  }));
+  const decimalSeparatorOptions = _mapInstanceProperty(DECIMAL_DELIMITER_OPTIONS).call(DECIMAL_DELIMITER_OPTIONS, option => _objectSpread$a(_objectSpread$a({}, option), {}, {
+    label: jsx(FormattedMessage, _objectSpread$a({}, option.label))
+  }));
+  return jsxs(Spacings.Stack, {
+    scale: "m",
+    children: [jsxs(Spacings.Stack, {
+      scale: "s",
+      children: [jsxs("div", {
+        children: [jsx(Text.Body, {
+          intlMessage: messages.separators
+        }), jsx(Text.Caption, {
+          intlMessage: messages.separatorsDescription
+        })]
+      }), jsxs(Spacings.Inline, {
+        scale: "s",
+        children: [jsxs(Spacings.Inline, {
+          scale: "xs",
+          alignItems: "center",
+          children: [jsx(Text.Body, {
+            intlMessage: messages.columns
+          }), jsx(SelectInput, {
+            horizontalConstraint: 4,
+            isSearchable: false,
+            options: columnSeparatorOptions,
+            value: _valuesInstanceProperty(formik).columnSeparator,
+            onChange: e => {
+              formik.setFieldValue('columnSeparator', e.target.value);
+            },
+            menuPortalTarget: document.body,
+            menuPortalZIndex: Z_INDEX_DROPDOWN
+          })]
+        }), jsxs(Spacings.Inline, {
+          scale: "s",
+          alignItems: "center",
+          children: [jsx(Text.Body, {
+            intlMessage: messages.decimal
+          }), jsx(SelectInput, {
+            isSearchable: false,
+            options: decimalSeparatorOptions,
+            value: _valuesInstanceProperty(formik).decimalSeparator,
+            onChange: e => {
+              formik.setFieldValue('decimalSeparator', e.target.value);
+            },
+            menuPortalTarget: document.body,
+            horizontalConstraint: 4,
+            menuPortalZIndex: Z_INDEX_DROPDOWN
+          })]
+        })]
+      })]
+    }), jsxs("div", {
+      children: [jsx(CheckboxInput, {
+        isChecked: _valuesInstanceProperty(formik).fillRows,
+        onChange: e => {
+          formik.setFieldValue('fillRows', e.target.checked);
+        },
+        children: jsx(FormattedMessage, _objectSpread$a({}, messages.fillRows))
+      }), jsxs(Spacings.Inline, {
+        scale: "xl",
+        children: [jsx("div", {}), jsx(Text.Caption, {
+          intlMessage: _objectSpread$a(_objectSpread$a({}, messages.moreInformation), {}, {
+            values: {
+              documentationLink: jsx(Link, {
+                intlMessage: messages.documentation,
+                isExternal: true,
+                to: CSV_STRUCTURE_DOCUMENTATION_LINK
+              }, "documentation-link")
+            }
+          })
+        })]
       })]
     })]
   });
@@ -1942,8 +2084,16 @@ const ExportFileSettingsStep = () => {
                   options: OUTPUT_FORMAT_OPTIONS,
                   menuPortalTarget: document.body,
                   menuPortalZIndex: Z_INDEX_DROPDOWN
-                }), shouldShowPreferences && jsx(ExportPreferenceSection, {})]
+                })]
               })
+            }), shouldShowPreferences && jsxs(Fragment, {
+              children: [jsx(Grid.Item, {
+                children: jsx(Text.Body, {
+                  intlMessage: messages.csvSettings
+                })
+              }), jsx(Grid.Item, {
+                children: jsx(ExportPreferenceSection, {})
+              })]
             })]
           })
         })
@@ -3167,11 +3317,11 @@ 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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRyb3AtYXJlYS13cmFwcGVyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF5QlkiLCJmaWxlIjoiZHJvcC1hcmVhLXdyYXBwZXIudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgdHlwZSBEcm9wem9uZVJvb3RQcm9wcyB9IGZyb20gJ3JlYWN0LWRyb3B6b25lJ1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IHN0eWxlcyB9IGZyb20gJy4vc3R5bGVzJ1xuaW1wb3J0IHsgdHlwZSBEcm9wQXJlYVN0YXRlIH0gZnJvbSAnLi4vLi4vLi4vQHR5cGVzJ1xuXG5pbnRlcmZhY2UgRHJvcFdyYXBwZXJQcm9wcyBleHRlbmRzIERyb3B6b25lUm9vdFByb3BzIHtcbiAgZHJvcEFyZWFTdGF0ZTogRHJvcEFyZWFTdGF0ZVxufVxuZXhwb3J0IGNvbnN0IERyb3BXcmFwcGVyID0gc3R5bGVkLmRpdjxEcm9wV3JhcHBlclByb3BzPmBcbiAgJHtzdHlsZXMuYmFzZX1cbiAgJHsocHJvcHMpID0+IHtcbiAgICBpZiAocHJvcHMuZHJvcEFyZWFTdGF0ZSA9PT0gJ2RlZmF1bHQnKSB7XG4gICAgICByZXR1cm4gc3R5bGVzLnJlYWR5Rm9yRHJvcFxuICAgIH1cbiAgICBpZiAocHJvcHMuZHJvcEFyZWFTdGF0ZSA9PT0gJ2FjdGl2ZS1kcmFnJykge1xuICAgICAgcmV0dXJuIHN0eWxlcy5hY3RpdmVEcmFnXG4gICAgfVxuICAgIGlmIChwcm9wcy5kcm9wQXJlYVN0YXRlID09PSAnZmlsZS1kcm9wcGVkJykge1xuICAgICAgcmV0dXJuIHN0eWxlcy5maWxlRHJvcHBlZFxuICAgIH1cbiAgICByZXR1cm4gZ2V0RGVmYXVsdERyb3BXcmFwcGVyU3R5bGVzKHByb3BzLmRyb3BBcmVhU3RhdGUpXG4gIH19XG5gXG5mdW5jdGlvbiBnZXREZWZhdWx0RHJvcFdyYXBwZXJTdHlsZXMoX2Ryb3BBcmVhU3RhdGU6IG5ldmVyKSB7XG4gIHJldHVybiBjc3NgYFxufVxuIl19 */");
 }
 
-var ActiveDragDropArea = /*#__PURE__*/lazy(() => import('./active-drag-drop-area-0c0e312e.esm.js' /* webpackChunkName: "active-drag-drop-area" */));
+var ActiveDragDropArea = /*#__PURE__*/lazy(() => import('./active-drag-drop-area-fb905a01.esm.js' /* webpackChunkName: "active-drag-drop-area" */));
 
-var EnabledDropArea = /*#__PURE__*/lazy(() => import('./enabled-drop-area-07845761.esm.js' /* webpackChunkName: "enabled-drop-area" */));
+var EnabledDropArea = /*#__PURE__*/lazy(() => import('./enabled-drop-area-5d5a61c8.esm.js' /* webpackChunkName: "enabled-drop-area" */));
 
-var FileDropped = /*#__PURE__*/lazy(() => import('./file-dropped-area-016972ea.esm.js' /* webpackChunkName: "filed-dropped-area" */));
+var FileDropped = /*#__PURE__*/lazy(() => import('./file-dropped-area-aad1bd09.esm.js' /* webpackChunkName: "filed-dropped-area" */));
 
 function getDropArea(_ref) {
   let dropAreaState = _ref.dropAreaState,
@@ -3252,17 +3402,17 @@ const getChunkImport = locale => {
   const intlLocale = mapLocaleToIntlLocale(locale);
   switch (intlLocale) {
     case 'de':
-      return import(/* webpackChunkName: "export-resources-modal-i18n-de" */'./de-458f4116.esm.js');
+      return import(/* webpackChunkName: "export-resources-modal-i18n-de" */'./de-324f2829.esm.js');
     case 'es':
-      return import(/* webpackChunkName: "export-resources-modal-i18n-es" */'./es-a8553ca8.esm.js');
+      return import(/* webpackChunkName: "export-resources-modal-i18n-es" */'./es-735dbaf2.esm.js');
     case 'fr-FR':
-      return import(/* webpackChunkName: "export-resources-modal-i18n-fr-FR" */'./fr-FR-87237d20.esm.js');
+      return import(/* webpackChunkName: "export-resources-modal-i18n-fr-FR" */'./fr-FR-96dce16c.esm.js');
     case 'ja':
       return import(/* webpackChunkName: "export-resources-modal-i18n-ja" */'./ja-73c088a7.esm.js');
     case 'pt-BR':
-      return import(/* webpackChunkName: "change-history-i18n-pt-BR" */'./pt-BR-cf6abfcc.esm.js');
+      return import(/* webpackChunkName: "change-history-i18n-pt-BR" */'./pt-BR-7fd72f5d.esm.js');
     default:
-      return import(/* webpackChunkName: "export-resources-modal-i18n-en" */'./en-bf084198.esm.js');
+      return import(/* webpackChunkName: "export-resources-modal-i18n-en" */'./en-015fa203.esm.js');
   }
 };
 const loadMessages = async locale => {