@commercetools-frontend-extensions/export-resources-modal 5.3.0 → 5.4.0

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

@@ -15,7 +15,7 @@ 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, 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 { Text, TextInput, Spacings, SelectField, CheckboxInput, ContentNotification, Link, RadioInput, TextField, AngleRightIcon, Grid, designTokens, 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';
@@ -615,12 +615,12 @@ var messages = defineMessages({
   columns: {
     id: 'ExportResourcesModal.columns',
     description: 'Label for column separator select',
-    defaultMessage: 'Columns:'
+    defaultMessage: 'Columns'
   },
-  decimal: {
-    id: 'ExportResourcesModal.decimal',
+  decimals: {
+    id: 'ExportResourcesModal.decimals',
     description: 'Label for decimal separator select',
-    defaultMessage: 'Decimals:'
+    defaultMessage: 'Decimals'
   },
   columnSeparatorComma: {
     id: 'ExportResourcesModal.columnSeparatorComma',
@@ -656,6 +656,21 @@ var messages = defineMessages({
     id: 'ExportResourcesModal.csvSettings',
     description: 'Label for CSV settings section',
     defaultMessage: 'CSV settings:'
+  },
+  excelOptimized: {
+    id: 'ExportResourcesModal.excelOptimized',
+    description: 'Label for Excel-optimized CSV export checkbox',
+    defaultMessage: 'CSV file optimized for Excel'
+  },
+  excelOptimizedDescription: {
+    id: 'ExportResourcesModal.excelOptimizedDescription',
+    description: 'Description for Excel-optimized CSV export checkbox',
+    defaultMessage: 'Checking this option will prevent Excel from interpreting the data of the file.'
+  },
+  readMoreOnDocumentation: {
+    id: 'ExportResourcesModal.readMoreOnDocumentation',
+    description: 'Read more on documentation',
+    defaultMessage: 'Read more on the {documentationLink}'
   }
 });
 
@@ -764,6 +779,7 @@ const OUTPUT_FORMAT_OPTIONS = [{
 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 EXPORT_EXCEL_DOCUMENTATION_LINK = 'https://docs.commercetools.com/merchant-center/export-data#optimize-csv-file-for-microsoft-excel';
 
 const resourceTypeMessages = {
   [EXPORTABLE_RESOURCES.CATEGORY]: {
@@ -1536,6 +1552,7 @@ const useInitialValues = props => {
       groups: updateFieldGroupWithAdditionalFieldExtensions(groups),
       queryPredicate: '',
       fillRows: false,
+      excelCompatible: false,
       outputFormat: props.outputFormat,
       columnSeparator: DELIMITERS$1.COMMA,
       decimalSeparator: DELIMITERS$1.POINT,
@@ -1622,6 +1639,7 @@ const useStartExportOperation = props => {
         fileFormat: values.outputFormat,
         locales,
         fillRows: isCsv && values.fillRows,
+        excelCompatible: isCsv && values.excelCompatible,
         separator: isCsv ? {
           columns: values.columnSeparator,
           decimal: values.decimalSeparator
@@ -1857,6 +1875,7 @@ const useValidateExportOperation = () => {
 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; }
 const ExportPreferenceSection = () => {
+  const intl = useIntl();
   const _useExportResourcesMo = useExportResourcesModalContext(),
     formik = _useExportResourcesMo.formik;
   const columnSeparatorOptions = _mapInstanceProperty(COLUMN_DELIMITER_OPTIONS).call(COLUMN_DELIMITER_OPTIONS, option => _objectSpread$a(_objectSpread$a({}, option), {}, {
@@ -1866,7 +1885,7 @@ const ExportPreferenceSection = () => {
     label: jsx(FormattedMessage, _objectSpread$a({}, option.label))
   }));
   return jsxs(Spacings.Stack, {
-    scale: "m",
+    scale: "xl",
     children: [jsxs(Spacings.Stack, {
       scale: "s",
       children: [jsxs("div", {
@@ -1877,60 +1896,80 @@ const ExportPreferenceSection = () => {
         })]
       }), 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
-          })]
+        children: [jsx(SelectField, {
+          title: intl.formatMessage(messages.columns),
+          isSearchable: false,
+          options: columnSeparatorOptions,
+          value: _valuesInstanceProperty(formik).columnSeparator,
+          onChange: e => {
+            formik.setFieldValue('columnSeparator', e.target.value);
+          },
+          menuPortalTarget: document.body,
+          menuPortalZIndex: Z_INDEX_DROPDOWN
+        }), jsx(SelectField, {
+          title: intl.formatMessage(messages.decimals),
+          isSearchable: false,
+          options: decimalSeparatorOptions,
+          value: _valuesInstanceProperty(formik).decimalSeparator,
+          onChange: e => {
+            formik.setFieldValue('decimalSeparator', e.target.value);
+          },
+          menuPortalTarget: document.body,
+          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")
-            }
+    }), jsxs(Spacings.Stack, {
+      scale: "xl",
+      children: [jsxs(Spacings.Stack, {
+        scale: "m",
+        children: [jsx(CheckboxInput, {
+          isChecked: _valuesInstanceProperty(formik).excelCompatible,
+          onChange: e => {
+            formik.setFieldValue('excelCompatible', e.target.checked);
+          },
+          children: jsx(FormattedMessage, _objectSpread$a({}, messages.excelOptimized))
+        }), _valuesInstanceProperty(formik).excelCompatible && jsx(ContentNotification, {
+          type: "info",
+          children: jsx(Spacings.Inset, {
+            scale: "xs",
+            children: jsxs(Spacings.Stack, {
+              children: [jsx("div", {
+                children: jsx(FormattedMessage, _objectSpread$a({}, messages.excelOptimizedDescription))
+              }), jsx("div", {
+                children: jsx(FormattedMessage, _objectSpread$a(_objectSpread$a({}, messages.readMoreOnDocumentation), {}, {
+                  values: {
+                    documentationLink: jsx(Link, {
+                      intlMessage: messages.documentation,
+                      isExternal: true,
+                      to: EXPORT_EXCEL_DOCUMENTATION_LINK
+                    }, "documentation-link")
+                  }
+                }))
+              })]
+            })
           })
         })]
+      }), 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")
+              }
+            })
+          })]
+        })]
       })]
     })]
   });
@@ -2044,59 +2083,53 @@ const ExportFileSettingsStep = () => {
     onClose: onClose,
     size: 16,
     children: jsx(Masking.Unmask, {
-      children: jsx(Spacings.Stack, {
-        scale: "xxxl",
-        children: jsx(Spacings.Stack, {
-          scale: "l",
-          children: jsxs(Grid, {
-            gridRowGap: designTokens.spacingM,
-            gridTemplateColumns: `calc(${designTokens.constraint3} + ${designTokens.spacingL}) auto`,
-            children: [jsx(Grid.Item, {
-              children: jsx(Text.Body, {
-                intlMessage: messages.scope
-              })
-            }), jsx(Grid.Item, {
-              children: jsx(ExportScopeSection, {})
-            }), jsx(Grid.Item, {
-              children: jsx(Text.Body, {
-                intlMessage: messages.saveAs
-              })
-            }), jsx(Grid.Item, {
-              children: jsxs(Spacings.Stack, {
-                scale: "s",
-                children: [jsx(Masking.Mask, {
-                  children: jsx(TextField, {
-                    name: "fileName",
-                    onChange: formik.handleChange,
-                    onBlur: formik.handleBlur,
-                    value: _valuesInstanceProperty(formik).fileName,
-                    title: intl.formatMessage(messages.fileName),
-                    touched: formik.touched.fileName,
-                    errors: mapFormikErrors(formik.errors.fileName),
-                    renderError: renderFileNameError
-                  })
-                }), jsx(SelectField, {
-                  name: "outputFormat",
-                  onChange: handleOutputFormatChange,
-                  onBlur: formik.handleBlur,
-                  value: _valuesInstanceProperty(formik).outputFormat,
-                  title: intl.formatMessage(messages.outputFormat),
-                  options: OUTPUT_FORMAT_OPTIONS,
-                  menuPortalTarget: document.body,
-                  menuPortalZIndex: Z_INDEX_DROPDOWN
-                })]
+      children: jsxs(Grid, {
+        gridRowGap: designTokens.spacingXl,
+        gridTemplateColumns: `calc(${designTokens.constraint3} + ${designTokens.spacingL}) auto`,
+        children: [jsx(Grid.Item, {
+          children: jsx(Text.Body, {
+            intlMessage: messages.scope
+          })
+        }), jsx(Grid.Item, {
+          children: jsx(ExportScopeSection, {})
+        }), jsx(Grid.Item, {
+          children: jsx(Text.Body, {
+            intlMessage: messages.saveAs
+          })
+        }), jsx(Grid.Item, {
+          children: jsxs(Spacings.Stack, {
+            scale: "xl",
+            children: [jsx(Masking.Mask, {
+              children: jsx(TextField, {
+                name: "fileName",
+                onChange: formik.handleChange,
+                onBlur: formik.handleBlur,
+                value: _valuesInstanceProperty(formik).fileName,
+                title: intl.formatMessage(messages.fileName),
+                touched: formik.touched.fileName,
+                errors: mapFormikErrors(formik.errors.fileName),
+                renderError: renderFileNameError
               })
-            }), shouldShowPreferences && jsxs(Fragment, {
-              children: [jsx(Grid.Item, {
-                children: jsx(Text.Body, {
-                  intlMessage: messages.csvSettings
-                })
-              }), jsx(Grid.Item, {
-                children: jsx(ExportPreferenceSection, {})
-              })]
+            }), jsx(SelectField, {
+              name: "outputFormat",
+              onChange: handleOutputFormatChange,
+              onBlur: formik.handleBlur,
+              value: _valuesInstanceProperty(formik).outputFormat,
+              title: intl.formatMessage(messages.outputFormat),
+              options: OUTPUT_FORMAT_OPTIONS,
+              menuPortalTarget: document.body,
+              menuPortalZIndex: Z_INDEX_DROPDOWN
             })]
           })
-        })
+        }), shouldShowPreferences && jsxs(Fragment, {
+          children: [jsx(Grid.Item, {
+            children: jsx(Text.Body, {
+              intlMessage: messages.csvSettings
+            })
+          }), jsx(Grid.Item, {
+            children: jsx(ExportPreferenceSection, {})
+          })]
+        })]
       })
     })
   });
@@ -3317,11 +3350,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-fb905a01.esm.js' /* webpackChunkName: "active-drag-drop-area" */));
+var ActiveDragDropArea = /*#__PURE__*/lazy(() => import('./active-drag-drop-area-ff9c0d97.esm.js' /* webpackChunkName: "active-drag-drop-area" */));
 
-var EnabledDropArea = /*#__PURE__*/lazy(() => import('./enabled-drop-area-5d5a61c8.esm.js' /* webpackChunkName: "enabled-drop-area" */));
+var EnabledDropArea = /*#__PURE__*/lazy(() => import('./enabled-drop-area-6940c316.esm.js' /* webpackChunkName: "enabled-drop-area" */));
 
-var FileDropped = /*#__PURE__*/lazy(() => import('./file-dropped-area-aad1bd09.esm.js' /* webpackChunkName: "filed-dropped-area" */));
+var FileDropped = /*#__PURE__*/lazy(() => import('./file-dropped-area-e6097092.esm.js' /* webpackChunkName: "filed-dropped-area" */));
 
 function getDropArea(_ref) {
   let dropAreaState = _ref.dropAreaState,
@@ -3402,17 +3435,17 @@ const getChunkImport = locale => {
   const intlLocale = mapLocaleToIntlLocale(locale);
   switch (intlLocale) {
     case 'de':
-      return import(/* webpackChunkName: "export-resources-modal-i18n-de" */'./de-324f2829.esm.js');
+      return import(/* webpackChunkName: "export-resources-modal-i18n-de" */'./de-f08a52eb.esm.js');
     case 'es':
-      return import(/* webpackChunkName: "export-resources-modal-i18n-es" */'./es-735dbaf2.esm.js');
+      return import(/* webpackChunkName: "export-resources-modal-i18n-es" */'./es-78876ffb.esm.js');
     case 'fr-FR':
-      return import(/* webpackChunkName: "export-resources-modal-i18n-fr-FR" */'./fr-FR-96dce16c.esm.js');
+      return import(/* webpackChunkName: "export-resources-modal-i18n-fr-FR" */'./fr-FR-4f366109.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-7fd72f5d.esm.js');
+      return import(/* webpackChunkName: "change-history-i18n-pt-BR" */'./pt-BR-f96cb5c4.esm.js');
     default:
-      return import(/* webpackChunkName: "export-resources-modal-i18n-en" */'./en-015fa203.esm.js');
+      return import(/* webpackChunkName: "export-resources-modal-i18n-en" */'./en-fde71e63.esm.js');
   }
 };
 const loadMessages = async locale => {