@commercetools-frontend-extensions/export-resources-modal 1.4.1 → 1.5.0

package/dist/commercetools-frontend-extensions-export-resources-modal.esm.js

@@ -9,7 +9,8 @@ import _Object$defineProperty from '@babel/runtime-corejs3/core-js-stable/object
 import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';
 import _objectWithoutProperties from '@babel/runtime-corejs3/helpers/esm/objectWithoutProperties';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
-import { ConfirmationDialog, PageContentNarrow, PageContentWide, useModalState, FormModalPage } from '@commercetools-frontend/application-components';
+import { InfoDialog } from '@commercetools-frontend/application-components';
+import { TextInput, Text, CollapsiblePanel, Tag, Spacings, AngleRightIcon, customProperties as customProperties$1, Constraints, SelectInput, RadioInput, Card, SelectField, TextField, CheckboxInput, Link, ExportIcon, SecondaryButton, PrimaryButton } from '@commercetools-frontend/ui-kit';
 import _mapInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/map';
 import _flatInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/flat';
 import _concatInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/concat';
@@ -22,7 +23,6 @@ import _possibleConstructorReturn from '@babel/runtime-corejs3/helpers/esm/possi
 import _getPrototypeOf from '@babel/runtime-corejs3/helpers/esm/getPrototypeOf';
 import _wrapNativeSuper from '@babel/runtime-corejs3/helpers/esm/wrapNativeSuper';
 import _Array$isArray from '@babel/runtime-corejs3/core-js-stable/array/is-array';
-import { TextInput, Text, CollapsiblePanel, Tag, Spacings, AngleRightIcon, customProperties as customProperties$1, Constraints, SelectInput, Link, RadioInput, Card, SelectField, TextField, CheckboxInput } from '@commercetools-frontend/ui-kit';
 import omitEmpty from 'omit-empty-es';
 import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
 import { customProperties, useTheme } from '@commercetools-uikit/design-system';
@@ -32,11 +32,11 @@ import { css } from '@emotion/react';
 import _styled from '@emotion/styled/base';
 import _valuesInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/values';
 import { useApplicationContext } from '@commercetools-frontend/application-shell-connectors';
-import { actions, useAsyncDispatch } from '@commercetools-frontend/sdk';
-import { MC_API_PROXY_TARGETS, DOMAINS } from '@commercetools-frontend/constants';
-import { useShowNotification, showApiErrorNotification } from '@commercetools-frontend/actions-global';
 import { useFormik } from 'formik';
 import moment from 'moment';
+import { useShowNotification, showApiErrorNotification } from '@commercetools-frontend/actions-global';
+import { actions, useAsyncDispatch } from '@commercetools-frontend/sdk';
+import { MC_API_PROXY_TARGETS, DOMAINS } from '@commercetools-frontend/constants';
 
 const EXPORT_OPERATION_STATES = {
   PROCESSING: 'processing',
@@ -121,8 +121,8 @@ let UnexpectedResourceTypeError = /*#__PURE__*/function (_Error) {
   return _createClass(UnexpectedResourceTypeError);
 }( /*#__PURE__*/_wrapNativeSuper(Error));
 
-function ownKeys$b(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$b(e) { for (var r = 1; r < arguments.length; r++) { var _context4, _context5; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context4 = ownKeys$b(Object(t), !0)).call(_context4, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context5 = ownKeys$b(Object(t))).call(_context5, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$a(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$a(e) { for (var r = 1; r < arguments.length; r++) { var _context4, _context5; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context4 = ownKeys$a(Object(t), !0)).call(_context4, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context5 = ownKeys$a(Object(t))).call(_context5, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 function resourceTypeToPlural(_ref) {
   let resourceType = _ref.resourceType,
     _ref$isUpperCase = _ref.isUpperCase,
@@ -168,7 +168,7 @@ function flattenNestedFields(fields) {
       var _context2;
       return _mapInstanceProperty(_context2 = flattenNestedFields(field.fields)).call(_context2, nestedField => {
         var _context3;
-        return _objectSpread$b(_objectSpread$b({}, nestedField), {}, {
+        return _objectSpread$a(_objectSpread$a({}, nestedField), {}, {
           key: _concatInstanceProperty(_context3 = "".concat(field.key, ".")).call(_context3, nestedField.key)
         });
       });
@@ -182,8 +182,8 @@ function flattenNestedFields(fields) {
  * This function is responsible for constructing the GraphQL query based on the export settings
  *
  * Depending on the type of export selection (all resources, only selected, or only matching/filtered) it constructs different types of queries:
- * - For 'all resources', it generates a query that fetches all fields and languages specified in the export settings.
- * - For 'only selected', it creates a query that fetches only the fields and languages of the selected resources. The ids of the selected resources are included in the query.
+ * - For 'all resources', it generates a query that fetches all fields and locales specified in the export settings.
+ * - For 'only selected', it creates a query that fetches only the fields and locales of the selected resources. The ids of the selected resources are included in the query.
  * - The 'only matching' case is a placeholder for future development where a query will be constructed based on certain filtering criteria using the `where` parameter.
  */
 function buildGraphQuery(exportSettings) {
@@ -196,7 +196,7 @@ function buildGraphQuery(exportSettings) {
         fields: [{
           results: buildFields({
             fields: exportSettings.fields,
-            languages: exportSettings.languages
+            locales: exportSettings.locales
           })
         }],
         variables: {}
@@ -207,7 +207,7 @@ function buildGraphQuery(exportSettings) {
         fields: [{
           results: buildFields({
             fields: exportSettings.fields,
-            languages: exportSettings.languages
+            locales: exportSettings.locales
           })
         }],
         variables: {
@@ -225,13 +225,13 @@ function buildGraphQuery(exportSettings) {
 /*
  * This function builds the necessary field structure for our GraphQL queries, tt is specifically designed to handle different types of fields
  *
- * For fields whose values change depending on the language aka localised fields, a unique request format is used
- * This format combines the field and the language, separated by '______'. This approach is adopted as our system disallows the use of hyphens `-` in these situations
+ * For fields whose values change depending on the locale aka localised fields, a unique request format is used
+ * This format combines the field and the locale, separated by '______'. This approach is adopted as our system disallows the use of hyphens `-` in these situations
  *
- * Fields that don't vary by language but contain additional subfields (known as 'nested fields') are also addressed
+ * Fields that don't vary by locale but contain additional subfields (known as 'nested fields') are also addressed
  * In these cases the function is used recursively on these subfields to generate the appropriate request.
  *
- * Overall, this function enables us to accurately request different types of data, including those varying by language or containing subfields.
+ * Overall, this function enables us to accurately request different types of data, including those varying by locale or containing subfields.
  *
  * More details can be found in the related PR: https://github.com/commercetools/commercetools-exporter/pull/103
  */
@@ -239,18 +239,18 @@ function buildGraphQuery(exportSettings) {
 function buildFields(_ref) {
   var _context2;
   let fields = _ref.fields,
-    languages = _ref.languages;
+    locales = _ref.locales;
   return _flatInstanceProperty(_context2 = _mapInstanceProperty(fields).call(fields, field => {
-    if (field.isLocalized) return _mapInstanceProperty(languages).call(languages, language => {
+    if (field.isLocalized) return _mapInstanceProperty(locales).call(locales, locale => {
       var _context3, _context4, _context5;
-      const alias = replaceSpecialCharsWithUnderscore(_concatInstanceProperty(_context3 = "".concat(field.key, "______")).call(_context3, language));
-      return _concatInstanceProperty(_context4 = _concatInstanceProperty(_context5 = "".concat(alias, ": ")).call(_context5, field.key, "(locale: \"")).call(_context4, language, "\")");
+      const alias = replaceSpecialCharsWithUnderscore(_concatInstanceProperty(_context3 = "".concat(field.key, "______")).call(_context3, locale));
+      return _concatInstanceProperty(_context4 = _concatInstanceProperty(_context5 = "".concat(alias, ": ")).call(_context5, field.key, "(locale: \"")).call(_context4, locale, "\")");
     });else {
       if (isFilledArray(field.fields)) {
         return {
           [field.key]: buildFields({
             fields: field.fields,
-            languages
+            locales
           })
         };
       }
@@ -262,15 +262,15 @@ function buildFields(_ref) {
 function validate(values) {
   const errors = {
     fileName: {},
-    languages: {}
+    locales: {}
   };
   if (TextInput.isEmpty(values.fileName)) {
     errors.fileName.missing = true;
   } else if (!/^[a-zA-Z0-9-_.]+$/.test(values.fileName)) {
     errors.fileName.invalidInput = true;
   }
-  if (values.languages.length < 1) {
-    errors.languages.missing = true;
+  if (values.locales.length < 1) {
+    errors.locales.missing = true;
   }
   return omitEmpty(errors);
 }
@@ -281,21 +281,6 @@ var messages = defineMessages({
     description: 'Label for the modal title',
     defaultMessage: 'Export {resourceType}'
   },
-  modalSubTitle: {
-    id: 'ExportResourcesModal.modalSubTitle',
-    description: 'Label for the modal subtitle',
-    defaultMessage: 'Define export settings'
-  },
-  topBarPreviousPathLabel: {
-    id: 'ExportResourcesModal.topBarPreviousPathLabel',
-    description: 'Label for the topBar previous label',
-    defaultMessage: 'To {resourceType} List'
-  },
-  exportButton: {
-    id: 'ExportResourcesModal.exportButton',
-    description: 'Export primary button',
-    defaultMessage: 'Export {resourceType}'
-  },
   outputFormat: {
     id: 'ExportResourcesModal.outputFormat',
     description: 'File format like (csv, xls, ...etc)',
@@ -306,10 +291,10 @@ var messages = defineMessages({
     description: 'exported file name',
     defaultMessage: 'File name'
   },
-  localLanguage: {
-    id: 'ExportResourcesModal.localLanguage',
-    description: 'Local language',
-    defaultMessage: 'Local language'
+  locale: {
+    id: 'ExportResourcesModal.locale',
+    description: 'Locale',
+    defaultMessage: 'Locale'
   },
   exportSelection: {
     id: 'ExportResourcesModal.exportSelection',
@@ -371,40 +356,20 @@ var messages = defineMessages({
     description: 'properties panel label',
     defaultMessage: 'Properties'
   },
-  confirmationTitle: {
-    id: 'ExportResourcesModal.confirmationTitle',
-    description: 'Title for the confirmation dialog',
-    defaultMessage: 'Export {resourceType} data'
-  },
-  confirmationBodyPlan: {
-    id: 'ExportResourcesModal.confirmationBodyPlan',
-    description: 'Confirmation dialog action plan',
-    defaultMessage: 'You are about to export <bold>{count}</bold> {resourceType} from the project: <bold>{projectName}</bold>.'
-  },
-  confirmationBodyQuestion: {
-    id: 'ExportResourcesModal.confirmationBodyQuestion',
-    description: 'Confirmation question',
-    defaultMessage: 'Are you sure you want to continue?'
-  },
   exportOperationSuccessMessage: {
     id: 'ExportResourcesModal.exportOperationSuccessMessage',
     description: 'Success message',
     defaultMessage: '<b>Your export has started.</b> <newline></newline><logsLink>Go to Export logs</logsLink> to view the progress and download the file.'
   },
-  exportConfirmationLabel: {
-    id: 'ExportResourcesModal.exportConfirmationLabel',
-    description: 'Label for the export button in confirmation dialog',
-    defaultMessage: 'Export {resourceType}'
-  },
   nothingApplied: {
     id: 'ExportResourcesModal.nothingApplied',
     description: 'Shown when there is no filter applied',
     defaultMessage: 'nothing applied'
   },
-  all: {
-    id: 'ExportResourcesModal.all',
-    description: 'label for "All languages" checkbox',
-    defaultMessage: 'All'
+  selectAllLocales: {
+    id: 'ExportResourcesModal.selectAllLocales',
+    description: 'label for "Select all locales" checkbox',
+    defaultMessage: 'Select all locales'
   },
   missingFileNameError: {
     id: 'ExportResourcesModal.missingFileNameError',
@@ -416,15 +381,25 @@ var messages = defineMessages({
     description: 'Error when file name field is not valid',
     defaultMessage: 'File name may only contain alphanumeric characters, hyphens and underscores'
   },
-  missingLanguageError: {
-    id: 'ExportResourcesModal.missingLanguageError',
-    description: 'Error when no local language is selected',
-    defaultMessage: 'Please select at least one local language'
+  missingLocaleError: {
+    id: 'ExportResourcesModal.missingLocaleError',
+    description: 'Error when no locale is selected',
+    defaultMessage: 'Please select at least one locale'
   },
   myViews: {
     id: 'ExportResourcesModal.myViews',
     description: 'Label for "My Views" Select Field',
     defaultMessage: 'My Views'
+  },
+  cancel: {
+    id: 'ExportResourcesModal.cancel',
+    description: 'Label for "Cancel" button',
+    defaultMessage: 'Cancel'
+  },
+  startExport: {
+    id: 'ExportResourcesModal.startExport',
+    description: 'Label for "Start Export" button',
+    defaultMessage: 'Start Export'
   }
 });
 
@@ -487,8 +462,8 @@ TagList.propTypes = process.env.NODE_ENV !== "production" ? {
   'data-testid': PropTypes.string
 } : {};
 
-function ownKeys$a(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$a(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys$a(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys$a(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$9(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$9(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys$9(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys$9(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 function AppliedFilters(_ref) {
   let filters = _ref.filters,
     onFilterRemove = _ref.onFilterRemove;
@@ -498,7 +473,7 @@ function AppliedFilters(_ref) {
     condensed: true,
     isDefaultClosed: !Boolean(filters.length),
     header: jsx(Text.Body, {
-      intlMessage: _objectSpread$a(_objectSpread$a({}, messages.appliedFiltersMessage), {}, {
+      intlMessage: _objectSpread$9(_objectSpread$9({}, messages.appliedFiltersMessage), {}, {
         values: {
           filtersCount: filters.length
         }
@@ -527,7 +502,7 @@ function AppliedFilters(_ref) {
         color: "neutral60"
       }), jsx(Text.Body, {
         isBold: true,
-        intlMessage: _objectSpread$a(_objectSpread$a({}, messages.appliedFiltersMessage), {}, {
+        intlMessage: _objectSpread$9(_objectSpread$9({}, messages.appliedFiltersMessage), {}, {
           values: {
             filtersCount: filters.length
           }
@@ -551,8 +526,8 @@ AppliedFilters.propTypes = process.env.NODE_ENV !== "production" ? {
   onFilterRemove: PropTypes.func.isRequired
 } : {};
 
-function ownKeys$9(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$9(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys$9(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys$9(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$8(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$8(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys$8(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys$8(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 const IconPlaceholder = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
   target: "e1oion860"
 } : {
@@ -567,7 +542,7 @@ function AppliedSearchTerms(_ref) {
     condensed: true,
     isDefaultClosed: !Boolean(appliedSearchTerms.length),
     header: jsx(Text.Body, {
-      intlMessage: _objectSpread$9(_objectSpread$9({}, messages.appliedSearchTermsMessage), {}, {
+      intlMessage: _objectSpread$8(_objectSpread$8({}, messages.appliedSearchTermsMessage), {}, {
         values: {
           searchTermsCount: appliedSearchTerms.length
         }
@@ -588,7 +563,7 @@ function AppliedSearchTerms(_ref) {
         color: "neutral60"
       }), jsx(Text.Body, {
         isBold: true,
-        intlMessage: _objectSpread$9(_objectSpread$9({}, messages.appliedSearchTermsMessage), {}, {
+        intlMessage: _objectSpread$8(_objectSpread$8({}, messages.appliedSearchTermsMessage), {}, {
           values: {
             searchTermsCount: appliedSearchTerms.length
           }
@@ -628,181 +603,27 @@ function ExportBasedOnMyViewsSelectField() {
   });
 }
 
-function ownKeys$8(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$8(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys$8(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys$8(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$7(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$7(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys$7(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys$7(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 function renderFileNameError(key) {
   switch (key) {
     case 'missing':
-      return jsx(FormattedMessage, _objectSpread$8({}, messages.missingFileNameError));
+      return jsx(FormattedMessage, _objectSpread$7({}, messages.missingFileNameError));
     case 'invalidInput':
-      return jsx(FormattedMessage, _objectSpread$8({}, messages.invalidFileNameError));
+      return jsx(FormattedMessage, _objectSpread$7({}, messages.invalidFileNameError));
     default:
       return null;
   }
 }
-function renderLanguageError(key) {
+function renderLocaleError(key) {
   switch (key) {
     case 'missing':
-      return jsx(FormattedMessage, _objectSpread$8({}, messages.missingLanguageError));
+      return jsx(FormattedMessage, _objectSpread$7({}, messages.missingLocaleError));
     default:
       return null;
   }
 }
 
-function useExportResourcesContext() {
-  const context = useContext(ExportResourcesContext);
-  if (!context) {
-    throw new MissingExportResourceProviderError();
-  }
-  return context;
-}
-
-async function createExportOperation(_ref) {
-  let fileName = _ref.fileName,
-    fileFormat = _ref.fileFormat,
-    columns = _ref.columns,
-    locales = _ref.locales,
-    projectKey = _ref.projectKey,
-    graphQuery = _ref.graphQuery,
-    asyncDispatchFn = _ref.asyncDispatchFn;
-  const uri = "/proxy/export/".concat(projectKey, "/export-operations");
-  const response = await asyncDispatchFn(actions.post({
-    // FIXME: EXPORT is undefined
-    mcApiProxyTarget: MC_API_PROXY_TARGETS.EXPORT,
-    uri: uri,
-    headers: {
-      accept: 'application/json'
-    },
-    payload: {
-      fileName,
-      fileFormat,
-      columns,
-      locales,
-      query: graphQuery
-    }
-  }));
-  return response;
-}
-
-function ownKeys$7(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$7(e) { for (var r = 1; r < arguments.length; r++) { var _context2, _context3; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context2 = ownKeys$7(Object(t), !0)).call(_context2, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context3 = ownKeys$7(Object(t))).call(_context3, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
-const getExportLogsLink = (projectKey, msg) => jsx(Link, {
-  to: "/".concat(projectKey, "/operations/export/logs"),
-  children: msg
-});
-function ExportConfirmationModal(props) {
-  const _useApplicationContex = useApplicationContext(applicationContext => {
-      var _applicationContext$p, _applicationContext$p2;
-      return {
-        projectName: (_applicationContext$p = applicationContext.project) === null || _applicationContext$p === void 0 ? void 0 : _applicationContext$p.name,
-        projectKey: (_applicationContext$p2 = applicationContext.project) === null || _applicationContext$p2 === void 0 ? void 0 : _applicationContext$p2.key
-      };
-    }),
-    projectName = _useApplicationContex.projectName,
-    projectKey = _useApplicationContex.projectKey;
-  const _useExportResourcesCo = useExportResourcesContext(),
-    formik = _useExportResourcesCo.formik,
-    allResourcesCount = _useExportResourcesCo.allResourcesCount,
-    matchingResourcesCount = _useExportResourcesCo.matchingResourcesCount,
-    selectedResourceIds = _useExportResourcesCo.selectedResourceIds,
-    resourceType = _useExportResourcesCo.resourceType;
-  const showNotification = useShowNotification();
-  const intl = useIntl();
-  const asyncDispatch = useAsyncDispatch();
-  const resourceTypePlural = resourceTypeToPlural({
-    resourceType: props.resourceType
-  });
-  const countInConfirmationMessage = () => {
-    switch (_valuesInstanceProperty(formik).exportSelectionType) {
-      case EXPORT_SELECTION_TYPES.ALL_RESOURCES:
-        return allResourcesCount;
-      case EXPORT_SELECTION_TYPES.ONLY_MATCHING:
-        return matchingResourcesCount;
-      case EXPORT_SELECTION_TYPES.ONLY_SELECTED:
-        return selectedResourceIds.length;
-      default:
-        throw new UnexpectedSelectionTypeError(_valuesInstanceProperty(formik).exportSelectionType);
-    }
-  };
-  return jsx(ConfirmationDialog, {
-    dataAttributesPrimaryButton: {
-      'data-testid': 'confirm-export-button'
-    },
-    title: intl.formatMessage(messages.confirmationTitle, {
-      resourceType: resourceTypePlural
-    }),
-    labelPrimary: intl.formatMessage(messages.exportConfirmationLabel, {
-      resourceType: resourceTypePlural
-    }),
-    isOpen: props.isOpen,
-    onClose: props.closeModal,
-    onCancel: props.closeModal,
-    onConfirm: async () => {
-      const graphQuery = buildGraphQuery({
-        resourceType: resourceType,
-        selectedResourceIds: selectedResourceIds,
-        fields: _valuesInstanceProperty(formik).fields,
-        exportSelectionType: _valuesInstanceProperty(formik).exportSelectionType,
-        languages: _valuesInstanceProperty(formik).languages
-      });
-      props.closeModal();
-      try {
-        var _context;
-        const response = await createExportOperation({
-          fileName: appendCsvOrJsonExtensionIfAbsent(_valuesInstanceProperty(formik).fileName, _valuesInstanceProperty(formik).outputFormat),
-          fileFormat: _valuesInstanceProperty(formik).outputFormat,
-          locales: _valuesInstanceProperty(formik).languages,
-          columns: _mapInstanceProperty(_context = flattenNestedFields(_valuesInstanceProperty(formik).fields)).call(_context, field => field.key),
-          projectKey,
-          graphQuery,
-          asyncDispatchFn: asyncDispatch
-        });
-        switch (response.state) {
-          case EXPORT_OPERATION_STATES.PROCESSING:
-          case EXPORT_OPERATION_STATES.COMPLETED:
-            showNotification({
-              kind: 'success',
-              domain: DOMAINS.SIDE,
-              text: intl.formatMessage(messages.exportOperationSuccessMessage, {
-                newline: getNewLine,
-                logsLink: msg => getExportLogsLink(projectKey, msg),
-                b: getBold
-              })
-            });
-            props.onCloseParentModal();
-            break;
-          default:
-            throw new UnexpectedExportOperationStateError(response.state);
-        }
-      } catch (errors) {
-        showApiErrorNotification({
-          errors
-        });
-      }
-    },
-    children: jsxs("div", {
-      children: [jsx(Text.Body, {
-        intlMessage: _objectSpread$7(_objectSpread$7({}, messages.confirmationBodyPlan), {}, {
-          values: {
-            resourceType: resourceTypePlural,
-            projectName: projectName,
-            count: countInConfirmationMessage(),
-            bold: getBold
-          }
-        })
-      }), jsx(Text.Body, {
-        intlMessage: messages.confirmationBodyQuestion
-      })]
-    })
-  });
-}
-ExportConfirmationModal.propTypes = process.env.NODE_ENV !== "production" ? {
-  isOpen: PropTypes.bool.isRequired,
-  resourceType: PropTypes.string.isRequired,
-  closeModal: PropTypes.func.isRequired,
-  onCloseParentModal: PropTypes.func.isRequired
-} : {};
-
 function ownKeys$6(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$6(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys$6(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys$6(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 function FieldsRenderer(_ref) {
@@ -872,6 +693,14 @@ ExportFields.propTypes = process.env.NODE_ENV !== "production" ? {
   })).isRequired
 } : {};
 
+function useExportResourcesContext() {
+  const context = useContext(ExportResourcesContext);
+  if (!context) {
+    throw new MissingExportResourceProviderError();
+  }
+  return context;
+}
+
 function ownKeys$5(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$5(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys$5(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys$5(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 function ExportSelectionRadioButtons() {
@@ -883,7 +712,8 @@ function ExportSelectionRadioButtons() {
     resourceType = _useExportResourcesCo.resourceType,
     allResourcesCount = _useExportResourcesCo.allResourcesCount,
     matchingResourcesCount = _useExportResourcesCo.matchingResourcesCount,
-    selectedResourceIds = _useExportResourcesCo.selectedResourceIds;
+    selectedResourceIds = _useExportResourcesCo.selectedResourceIds,
+    exportSelectionType = _useExportResourcesCo.exportSelectionType;
   const resourceTypePlural = resourceTypeToPlural({
     resourceType: resourceType
   });
@@ -891,7 +721,7 @@ function ExportSelectionRadioButtons() {
     scale: "xl",
     children: jsxs(RadioInput.Group, {
       name: "exportSelectionType",
-      value: _valuesInstanceProperty(formik).exportSelectionType,
+      value: exportSelectionType,
       direction: "inline",
       directionProps: {
         scale: 'xl'
@@ -947,11 +777,11 @@ function ExportTextMessage() {
     allResourcesCount = _useExportResourcesCo.allResourcesCount,
     selectedResourceIds = _useExportResourcesCo.selectedResourceIds,
     matchingResourcesCount = _useExportResourcesCo.matchingResourcesCount,
-    formik = _useExportResourcesCo.formik;
+    exportSelectionType = _useExportResourcesCo.exportSelectionType;
   const resourceTypePlural = resourceTypeToPlural({
     resourceType: resourceType
   });
-  switch (_valuesInstanceProperty(formik).exportSelectionType) {
+  switch (exportSelectionType) {
     case EXPORT_SELECTION_TYPES.ALL_RESOURCES:
       return jsx(Text.Body, {
         intlMessage: _objectSpread$4(_objectSpread$4({}, messages.exportAllMessage), {}, {
@@ -983,7 +813,7 @@ function ExportTextMessage() {
         })
       });
     default:
-      throw new UnexpectedSelectionTypeError(_valuesInstanceProperty(formik).exportSelectionType);
+      throw new UnexpectedSelectionTypeError(exportSelectionType);
   }
 }
 
@@ -991,7 +821,8 @@ const ExportSelection = () => {
   const _useTheme = useTheme(),
     isNewTheme = _useTheme.isNewTheme;
   const _useExportResourcesCo = useExportResourcesContext(),
-    formik = _useExportResourcesCo.formik;
+    formik = _useExportResourcesCo.formik,
+    exportSelectionType = _useExportResourcesCo.exportSelectionType;
   const onAppliedFilterRemove = filter => {
     var _context;
     formik.setFieldValue('appliedFilters', _filterInstanceProperty(_context = _valuesInstanceProperty(formik).appliedFilters).call(_context, appliedFilter => appliedFilter !== filter));
@@ -1004,7 +835,7 @@ const ExportSelection = () => {
         as: "h2",
         intlMessage: messages.exportSelection
       }), jsx(ExportSelectionRadioButtons, {}), jsx(ExportTextMessage, {})]
-    }), _valuesInstanceProperty(formik).exportSelectionType === EXPORT_SELECTION_TYPES.ONLY_MATCHING && jsxs(Fragment, {
+    }), exportSelectionType === EXPORT_SELECTION_TYPES.ONLY_MATCHING && jsxs(Fragment, {
       children: [jsx(ExportBasedOnMyViewsSelectField, {}), jsx(AppliedSearchTerms, {
         appliedSearchTerms: _valuesInstanceProperty(formik).appliedSearchTerms
       }), jsx(AppliedFilters, {
@@ -1033,7 +864,7 @@ const ExportSelection = () => {
         scale: "m",
         children: jsxs(Spacings.Stack, {
           scale: "l",
-          children: [jsx(ExportTextMessage, {}), _valuesInstanceProperty(formik).exportSelectionType === EXPORT_SELECTION_TYPES.ONLY_MATCHING && jsxs(Fragment, {
+          children: [jsx(ExportTextMessage, {}), exportSelectionType === EXPORT_SELECTION_TYPES.ONLY_MATCHING && jsxs(Fragment, {
             children: [jsx(ExportBasedOnMyViewsSelectField, {}), jsx(AppliedSearchTerms, {
               appliedSearchTerms: _valuesInstanceProperty(formik).appliedSearchTerms
             }), jsx(AppliedFilters, {
@@ -1079,143 +910,106 @@ ExportProperties.propTypes = process.env.NODE_ENV !== "production" ? {
 function ownKeys$2(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$2(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys$2(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys$2(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 const outputFormatOptions = [{
-  value: OUTPUT_FORMATS.JSON,
-  label: 'JSON'
-}, {
   value: OUTPUT_FORMATS.CSV,
   label: 'CSV'
+}, {
+  value: OUTPUT_FORMATS.JSON,
+  label: 'JSON'
 }];
-function mapLanguagesToOptions(languages) {
-  return _mapInstanceProperty(languages).call(languages, language => ({
-    value: language,
-    label: language
+function mapLocalesToOptions(locales) {
+  return _mapInstanceProperty(locales).call(locales, locale => ({
+    value: locale,
+    label: locale
   }));
 }
 function ExportFileSettings(props) {
-  const _useTheme = useTheme(),
-    isNewTheme = _useTheme.isNewTheme;
   const intl = useIntl();
   const _useExportResourcesCo = useExportResourcesContext(),
     formik = _useExportResourcesCo.formik;
   const _useApplicationContex = useApplicationContext(applicationContext => {
       var _applicationContext$p;
       return {
-        language: applicationContext.dataLocale,
-        languages: ((_applicationContext$p = applicationContext.project) === null || _applicationContext$p === void 0 ? void 0 : _applicationContext$p.languages) || []
+        locale: applicationContext.dataLocale,
+        locales: ((_applicationContext$p = applicationContext.project) === null || _applicationContext$p === void 0 ? void 0 : _applicationContext$p.languages) || []
       };
     }),
-    languages = _useApplicationContex.languages,
-    language = _useApplicationContex.language;
-  if (isNewTheme) return jsxs(Spacings.Stack, {
-    scale: "xxxl",
-    children: [jsx(PageContentNarrow, {
-      children: jsxs(Spacings.Stack, {
-        scale: "xl",
-        children: [jsx(SelectField, _objectSpread$2(_objectSpread$2({}, formik.getFieldProps('outputFormat')), {}, {
-          title: intl.formatMessage(messages.outputFormat),
-          options: outputFormatOptions
-        })), jsx(TextField, _objectSpread$2(_objectSpread$2({
-          title: intl.formatMessage(messages.fileName)
-        }, formik.getFieldProps('fileName')), {}, {
-          touched: formik.touched.fileName,
-          errors: formik.errors.fileName,
-          renderError: renderFileNameError
-        })), jsxs(Spacings.Stack, {
-          scale: "xs",
-          children: [jsx(SelectField, _objectSpread$2(_objectSpread$2({
-            id: "languages",
-            title: intl.formatMessage(messages.localLanguage),
-            options: mapLanguagesToOptions(languages),
-            isMulti: true
-          }, formik.getFieldProps('languages')), {}, {
-            onChange: e => {
-              formik.handleChange(e);
-              formik.setFieldValue('isAllLanguagesChecked', false);
-            },
-            touched: formik.touched.languages,
-            errors: formik.errors.languages,
-            renderError: renderLanguageError
-          })), jsx(CheckboxInput, {
-            name: "isAllLanguagesChecked",
-            isChecked: _valuesInstanceProperty(formik).isAllLanguagesChecked,
-            onChange: e => {
-              if (e.target.checked) formik.setFieldValue('languages', languages);else formik.setFieldValue('languages', [language]);
-              formik.handleChange(e);
-            },
-            children: intl.formatMessage(messages.all)
-          })]
-        })]
-      })
-    }), jsx(PageContentWide, {
-      children: jsxs(Spacings.Stack, {
-        scale: "xxxl",
-        children: [jsx(ExportSelection, {}), jsx(ExportProperties, {
-          renderProperties: props.renderProperties
-        })]
-      })
-    })]
-  });
+    locales = _useApplicationContex.locales,
+    locale = _useApplicationContex.locale;
   return jsxs(Spacings.Stack, {
-    scale: "l",
-    children: [jsxs(Spacings.Inline, {
-      scale: "l",
-      children: [jsx(SelectField, _objectSpread$2(_objectSpread$2({}, formik.getFieldProps('outputFormat')), {}, {
-        title: intl.formatMessage(messages.outputFormat),
-        options: outputFormatOptions,
-        horizontalConstraint: 7
-      })), jsx(TextField, _objectSpread$2(_objectSpread$2({
-        title: intl.formatMessage(messages.fileName)
-      }, formik.getFieldProps('fileName')), {}, {
-        touched: formik.touched.fileName,
-        errors: formik.errors.fileName,
-        renderError: renderFileNameError,
-        horizontalConstraint: 7
-      }))]
-    }), jsx(Spacings.Inline, {
-      children: jsx(SelectField, _objectSpread$2(_objectSpread$2({
-        id: "languages",
-        title: jsxs(Spacings.Inline, {
-          scale: "s",
-          children: [jsx("label", {
-            htmlFor: "languages",
-            children: intl.formatMessage(messages.localLanguage)
-          }), jsx(CheckboxInput, {
-            name: "isAllLanguagesChecked",
-            isChecked: _valuesInstanceProperty(formik).isAllLanguagesChecked,
-            onChange: e => {
-              if (e.target.checked) formik.setFieldValue('languages', languages);else formik.setFieldValue('languages', [language]);
-              formik.handleChange(e);
-            },
-            children: jsx("div", {
-              css: styles.notBold,
-              children: intl.formatMessage(messages.all)
-            })
-          })]
-        }),
-        options: mapLanguagesToOptions(languages),
+    scale: "m",
+    children: [jsx(SelectField, _objectSpread$2(_objectSpread$2({}, formik.getFieldProps('outputFormat')), {}, {
+      title: intl.formatMessage(messages.outputFormat),
+      options: outputFormatOptions
+    })), jsx(TextField, _objectSpread$2(_objectSpread$2({
+      title: intl.formatMessage(messages.fileName)
+    }, formik.getFieldProps('fileName')), {}, {
+      touched: formik.touched.fileName,
+      errors: formik.errors.fileName,
+      renderError: renderFileNameError
+    })), jsxs(Spacings.Stack, {
+      scale: "xs",
+      children: [jsx(SelectField, _objectSpread$2(_objectSpread$2({
+        id: "locales",
+        title: intl.formatMessage(messages.locale),
+        options: mapLocalesToOptions(locales),
         isMulti: true
-      }, formik.getFieldProps('languages')), {}, {
+      }, formik.getFieldProps('locales')), {}, {
         onChange: e => {
           formik.handleChange(e);
-          formik.setFieldValue('isAllLanguagesChecked', false);
+          formik.setFieldValue('isAllLocalesChecked', false);
         },
-        touched: formik.touched.languages,
-        errors: formik.errors.languages,
-        renderError: renderLanguageError,
-        horizontalConstraint: 7
-      }))
-    }), jsx(ExportSelection, {}), jsx(ExportProperties, {
+        touched: formik.touched.locales,
+        errors: formik.errors.locales,
+        renderError: renderLocaleError
+      })), jsx(CheckboxInput, {
+        name: "isAllLocalesChecked",
+        isChecked: _valuesInstanceProperty(formik).isAllLocalesChecked,
+        onChange: e => {
+          if (e.target.checked) formik.setFieldValue('locales', locales);else formik.setFieldValue('locales', [locale]);
+          formik.handleChange(e);
+        },
+        children: intl.formatMessage(messages.selectAllLocales)
+      })]
+    }), props.showExportSelection && jsx(ExportSelection, {}), jsx(ExportProperties, {
       renderProperties: props.renderProperties
     })]
   });
 }
 ExportFileSettings.displayName = 'ExportFileSettings';
 ExportFileSettings.propTypes = process.env.NODE_ENV !== "production" ? {
+  showExportSelection: PropTypes.bool,
   renderProperties: PropTypes.func
 } : {};
 
 const ExportResourcesContext = /*#__PURE__*/createContext();
 
+async function createExportOperation(_ref) {
+  let fileName = _ref.fileName,
+    fileFormat = _ref.fileFormat,
+    columns = _ref.columns,
+    locales = _ref.locales,
+    projectKey = _ref.projectKey,
+    graphQuery = _ref.graphQuery,
+    asyncDispatchFn = _ref.asyncDispatchFn;
+  const uri = "/proxy/export/".concat(projectKey, "/export-operations");
+  const response = await asyncDispatchFn(actions.post({
+    // FIXME: EXPORT is undefined
+    mcApiProxyTarget: MC_API_PROXY_TARGETS.EXPORT,
+    uri: uri,
+    headers: {
+      accept: 'application/json'
+    },
+    payload: {
+      fileName,
+      fileFormat,
+      columns,
+      locales,
+      query: graphQuery
+    }
+  }));
+  return response;
+}
+
 const ExportResourcesModalShape = PropTypes.shape({
   resourceType: PropTypes.string.isRequired,
   outputFormat: PropTypes.string,
@@ -1223,6 +1017,7 @@ const ExportResourcesModalShape = PropTypes.shape({
   allResourcesCount: PropTypes.number.isRequired,
   matchingResourcesCount: PropTypes.number,
   selectedResourceIds: PropTypes.array,
+  showExportSelection: PropTypes.bool,
   // TODO: Circular reference
   fields: PropTypes.arrayOf(PropTypes.shape({
     key: PropTypes.string.isRequired,
@@ -1241,34 +1036,85 @@ const ExportResourcesModalShape = PropTypes.shape({
 }).isRequired;
 
 function ownKeys$1(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$1(e) { for (var r = 1; r < arguments.length; r++) { var _context2, _context3; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context2 = ownKeys$1(Object(t), !0)).call(_context2, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context3 = ownKeys$1(Object(t))).call(_context3, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var _context3, _context4; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context3 = ownKeys$1(Object(t), !0)).call(_context3, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context4 = ownKeys$1(Object(t))).call(_context4, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 const ExportResourcesContextProvider = props => {
-  var _context;
+  var _context2;
+  const intl = useIntl();
   const todayFormatted = moment().format('DD-MM-YY_HH-mm');
-  const _useApplicationContex = useApplicationContext(applicationContext => ({
-      language: applicationContext.dataLocale
-    })),
-    language = _useApplicationContex.language;
+  const asyncDispatch = useAsyncDispatch();
+  const showNotification = useShowNotification();
+  const _useApplicationContex = useApplicationContext(applicationContext => {
+      var _applicationContext$p;
+      return {
+        locale: applicationContext.dataLocale,
+        projectKey: (_applicationContext$p = applicationContext.project) === null || _applicationContext$p === void 0 ? void 0 : _applicationContext$p.key
+      };
+    }),
+    projectKey = _useApplicationContex.projectKey,
+    locale = _useApplicationContex.locale;
+  const onSubmit = async values => {
+    const graphQuery = buildGraphQuery({
+      resourceType: props.resourceType,
+      exportSelectionType: props.exportSelectionType,
+      selectedResourceIds: props.selectedResourceIds,
+      fields: values.fields,
+      locales: values.locales
+    });
+    try {
+      var _context;
+      const response = await createExportOperation({
+        fileName: appendCsvOrJsonExtensionIfAbsent(values.fileName, values.outputFormat),
+        fileFormat: values.outputFormat,
+        locales: values.locales,
+        columns: _mapInstanceProperty(_context = flattenNestedFields(values.fields)).call(_context, field => field.key),
+        projectKey,
+        graphQuery,
+        asyncDispatchFn: asyncDispatch
+      });
+      switch (response.state) {
+        case EXPORT_OPERATION_STATES.PROCESSING:
+        case EXPORT_OPERATION_STATES.COMPLETED:
+          showNotification({
+            kind: 'info',
+            domain: DOMAINS.SIDE,
+            text: intl.formatMessage(messages.exportOperationSuccessMessage, {
+              newline: getNewLine,
+              logsLink: msg => getExportLogsLink(projectKey, msg),
+              b: getBold
+            })
+          });
+          break;
+        default:
+          throw new UnexpectedExportOperationStateError(response.state);
+      }
+    } catch (errors) {
+      // TODO: custom error messages for each error type
+      showApiErrorNotification({
+        errors
+      });
+    }
+  };
   const formik = useFormik({
     initialValues: {
       outputFormat: props.outputFormat,
-      fileName: _concatInstanceProperty(_context = "".concat(resourceTypeToPlural({
+      fileName: _concatInstanceProperty(_context2 = "".concat(resourceTypeToPlural({
         resourceType: props.resourceType,
         isUpperCase: true
-      }), "_Export_")).call(_context, todayFormatted),
-      languages: [language],
+      }), "_Export_")).call(_context2, todayFormatted),
+      locales: [locale],
       fields: props.fields,
       appliedSearchTerms: props.appliedSearchTerms,
       appliedFilters: props.appliedFilters,
-      exportSelectionType: props.exportSelectionType,
-      isAllLanguagesChecked: false
+      isAllLocalesChecked: false
     },
-    validate
+    validate,
+    onSubmit
   });
   return jsx(ExportResourcesContext.Provider, {
     value: {
       formik,
       resourceType: props.resourceType,
+      exportSelectionType: props.exportSelectionType,
       allResourcesCount: props.allResourcesCount,
       matchingResourcesCount: props.matchingResourcesCount,
       selectedResourceIds: props.selectedResourceIds
@@ -1280,15 +1126,19 @@ ExportResourcesContextProvider.displayName = 'ExportResourcesContextProvider';
 ExportResourcesContextProvider.propTypes = process.env.NODE_ENV !== "production" ? _objectSpread$1(_objectSpread$1({}, ExportResourcesModalShape), {}, {
   children: PropTypes.node
 }) : {};
+const getExportLogsLink = (projectKey, msg) => jsx(Link, {
+  to: "/".concat(projectKey, "/operations/export/logs"),
+  children: msg
+});
 
-const _excluded = ["renderProperties"];
+const _excluded = ["renderProperties", "showExportSelection"];
 function ownKeys(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(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 const ExportResourcesModal = _ref => {
   let renderProperties = _ref.renderProperties,
+    showExportSelection = _ref.showExportSelection,
     props = _objectWithoutProperties(_ref, _excluded);
   const intl = useIntl();
-  const confirmationModal = useModalState();
   const resourceTypePlural = resourceTypeToPlural({
     resourceType: props.resourceType
   });
@@ -1296,30 +1146,38 @@ const ExportResourcesModal = _ref => {
     children: jsx(ExportResourcesContext.Consumer, {
       children: _ref2 => {
         let formik = _ref2.formik;
-        return jsxs(FormModalPage, {
+        return jsx(InfoDialog, {
           isOpen: true,
           title: intl.formatMessage(messages.modalTitle, {
             resourceType: resourceTypePlural
           }),
           onClose: props.closeModal,
-          onSecondaryButtonClick: props.closeModal,
-          isPrimaryButtonDisabled: !formik.isValid,
-          labelPrimaryButton: intl.formatMessage(messages.exportButton, {
-            resourceType: resourceTypePlural
-          }),
-          subtitle: intl.formatMessage(messages.modalSubTitle),
-          topBarPreviousPathLabel: intl.formatMessage(messages.topBarPreviousPathLabel, {
-            resourceType: props.resourceType
-          }),
-          onPrimaryButtonClick: confirmationModal.openModal,
-          children: [jsx(ExportFileSettings, {
-            renderProperties: renderProperties
-          }), jsx(ExportConfirmationModal, {
-            resourceType: props.resourceType,
-            isOpen: confirmationModal.isModalOpen,
-            closeModal: confirmationModal.closeModal,
-            onCloseParentModal: props.closeModal
-          })]
+          children: jsxs(Spacings.Stack, {
+            scale: "xxxl",
+            children: [jsxs(Spacings.Stack, {
+              scale: "l",
+              children: [jsxs(Spacings.Inline, {
+                alignItems: "center",
+                children: [jsx(ExportIcon, {
+                  size: "medium",
+                  color: "neutral60"
+                }), jsx(ExportTextMessage, {})]
+              }), jsx(ExportFileSettings, {
+                renderProperties: renderProperties,
+                showExportSelection: showExportSelection
+              })]
+            }), jsxs(Spacings.Inline, {
+              justifyContent: "flex-end",
+              scale: "m",
+              children: [jsx(SecondaryButton, {
+                label: intl.formatMessage(messages.cancel),
+                onClick: props.closeModal
+              }), jsx(PrimaryButton, {
+                label: intl.formatMessage(messages.startExport),
+                onClick: formik.submitForm
+              })]
+            })]
+          })
         });
       }
     })
@@ -1333,7 +1191,8 @@ ExportResourcesModal.defaultProps = {
   appliedFilters: [],
   matchingResourcesCount: 0,
   exportSelectionType: EXPORT_SELECTION_TYPES.ALL_RESOURCES,
-  outputFormat: OUTPUT_FORMATS.CSV
+  outputFormat: OUTPUT_FORMATS.CSV,
+  showExportSelection: false
 };
 
 export { EXPORTABLE_RESOURCES, EXPORT_SELECTION_TYPES, ExportResourcesModal as default };