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

package/dist/{index-e73d846c.cjs.prod.js → index-38c1edcf.cjs.prod.js}

@@ -656,12 +656,12 @@ var messages = reactIntl.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',
@@ -697,6 +697,21 @@ var messages = reactIntl.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}'
   }
 });
 
@@ -805,6 +820,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]: {
@@ -1577,6 +1593,7 @@ const useInitialValues = props => {
       groups: updateFieldGroupWithAdditionalFieldExtensions(groups),
       queryPredicate: '',
       fillRows: false,
+      excelCompatible: false,
       outputFormat: props.outputFormat,
       columnSeparator: DELIMITERS$1.COMMA,
       decimalSeparator: DELIMITERS$1.POINT,
@@ -1663,6 +1680,7 @@ const useStartExportOperation = props => {
         fileFormat: values.outputFormat,
         locales,
         fillRows: isCsv && values.fillRows,
+        excelCompatible: isCsv && values.excelCompatible,
         separator: isCsv ? {
           columns: values.columnSeparator,
           decimal: values.decimalSeparator
@@ -1898,6 +1916,7 @@ const useValidateExportOperation = () => {
 function ownKeys$a(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$a(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$a(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$a(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
 const ExportPreferenceSection = () => {
+  const intl = reactIntl.useIntl();
   const _useExportResourcesMo = useExportResourcesModalContext(),
     formik = _useExportResourcesMo.formik;
   const columnSeparatorOptions = _mapInstanceProperty__default["default"](COLUMN_DELIMITER_OPTIONS).call(COLUMN_DELIMITER_OPTIONS, option => _objectSpread$a(_objectSpread$a({}, option), {}, {
@@ -1907,7 +1926,7 @@ const ExportPreferenceSection = () => {
     label: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$a({}, option.label))
   }));
   return jsxRuntime.jsxs(uiKit.Spacings.Stack, {
-    scale: "m",
+    scale: "xl",
     children: [jsxRuntime.jsxs(uiKit.Spacings.Stack, {
       scale: "s",
       children: [jsxRuntime.jsxs("div", {
@@ -1918,60 +1937,80 @@ const ExportPreferenceSection = () => {
         })]
       }), jsxRuntime.jsxs(uiKit.Spacings.Inline, {
         scale: "s",
-        children: [jsxRuntime.jsxs(uiKit.Spacings.Inline, {
-          scale: "xs",
-          alignItems: "center",
-          children: [jsxRuntime.jsx(uiKit.Text.Body, {
-            intlMessage: messages.columns
-          }), jsxRuntime.jsx(uiKit.SelectInput, {
-            horizontalConstraint: 4,
-            isSearchable: false,
-            options: columnSeparatorOptions,
-            value: _valuesInstanceProperty__default["default"](formik).columnSeparator,
-            onChange: e => {
-              formik.setFieldValue('columnSeparator', e.target.value);
-            },
-            menuPortalTarget: document.body,
-            menuPortalZIndex: Z_INDEX_DROPDOWN
-          })]
-        }), jsxRuntime.jsxs(uiKit.Spacings.Inline, {
-          scale: "s",
-          alignItems: "center",
-          children: [jsxRuntime.jsx(uiKit.Text.Body, {
-            intlMessage: messages.decimal
-          }), jsxRuntime.jsx(uiKit.SelectInput, {
-            isSearchable: false,
-            options: decimalSeparatorOptions,
-            value: _valuesInstanceProperty__default["default"](formik).decimalSeparator,
-            onChange: e => {
-              formik.setFieldValue('decimalSeparator', e.target.value);
-            },
-            menuPortalTarget: document.body,
-            horizontalConstraint: 4,
-            menuPortalZIndex: Z_INDEX_DROPDOWN
-          })]
+        children: [jsxRuntime.jsx(uiKit.SelectField, {
+          title: intl.formatMessage(messages.columns),
+          isSearchable: false,
+          options: columnSeparatorOptions,
+          value: _valuesInstanceProperty__default["default"](formik).columnSeparator,
+          onChange: e => {
+            formik.setFieldValue('columnSeparator', e.target.value);
+          },
+          menuPortalTarget: document.body,
+          menuPortalZIndex: Z_INDEX_DROPDOWN
+        }), jsxRuntime.jsx(uiKit.SelectField, {
+          title: intl.formatMessage(messages.decimals),
+          isSearchable: false,
+          options: decimalSeparatorOptions,
+          value: _valuesInstanceProperty__default["default"](formik).decimalSeparator,
+          onChange: e => {
+            formik.setFieldValue('decimalSeparator', e.target.value);
+          },
+          menuPortalTarget: document.body,
+          menuPortalZIndex: Z_INDEX_DROPDOWN
         })]
       })]
-    }), jsxRuntime.jsxs("div", {
-      children: [jsxRuntime.jsx(uiKit.CheckboxInput, {
-        isChecked: _valuesInstanceProperty__default["default"](formik).fillRows,
-        onChange: e => {
-          formik.setFieldValue('fillRows', e.target.checked);
-        },
-        children: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$a({}, messages.fillRows))
-      }), jsxRuntime.jsxs(uiKit.Spacings.Inline, {
-        scale: "xl",
-        children: [jsxRuntime.jsx("div", {}), jsxRuntime.jsx(uiKit.Text.Caption, {
-          intlMessage: _objectSpread$a(_objectSpread$a({}, messages.moreInformation), {}, {
-            values: {
-              documentationLink: jsxRuntime.jsx(uiKit.Link, {
-                intlMessage: messages.documentation,
-                isExternal: true,
-                to: CSV_STRUCTURE_DOCUMENTATION_LINK
-              }, "documentation-link")
-            }
+    }), jsxRuntime.jsxs(uiKit.Spacings.Stack, {
+      scale: "xl",
+      children: [jsxRuntime.jsxs(uiKit.Spacings.Stack, {
+        scale: "m",
+        children: [jsxRuntime.jsx(uiKit.CheckboxInput, {
+          isChecked: _valuesInstanceProperty__default["default"](formik).excelCompatible,
+          onChange: e => {
+            formik.setFieldValue('excelCompatible', e.target.checked);
+          },
+          children: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$a({}, messages.excelOptimized))
+        }), _valuesInstanceProperty__default["default"](formik).excelCompatible && jsxRuntime.jsx(uiKit.ContentNotification, {
+          type: "info",
+          children: jsxRuntime.jsx(uiKit.Spacings.Inset, {
+            scale: "xs",
+            children: jsxRuntime.jsxs(uiKit.Spacings.Stack, {
+              children: [jsxRuntime.jsx("div", {
+                children: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$a({}, messages.excelOptimizedDescription))
+              }), jsxRuntime.jsx("div", {
+                children: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$a(_objectSpread$a({}, messages.readMoreOnDocumentation), {}, {
+                  values: {
+                    documentationLink: jsxRuntime.jsx(uiKit.Link, {
+                      intlMessage: messages.documentation,
+                      isExternal: true,
+                      to: EXPORT_EXCEL_DOCUMENTATION_LINK
+                    }, "documentation-link")
+                  }
+                }))
+              })]
+            })
           })
         })]
+      }), jsxRuntime.jsxs("div", {
+        children: [jsxRuntime.jsx(uiKit.CheckboxInput, {
+          isChecked: _valuesInstanceProperty__default["default"](formik).fillRows,
+          onChange: e => {
+            formik.setFieldValue('fillRows', e.target.checked);
+          },
+          children: jsxRuntime.jsx(reactIntl.FormattedMessage, _objectSpread$a({}, messages.fillRows))
+        }), jsxRuntime.jsxs(uiKit.Spacings.Inline, {
+          scale: "xl",
+          children: [jsxRuntime.jsx("div", {}), jsxRuntime.jsx(uiKit.Text.Caption, {
+            intlMessage: _objectSpread$a(_objectSpread$a({}, messages.moreInformation), {}, {
+              values: {
+                documentationLink: jsxRuntime.jsx(uiKit.Link, {
+                  intlMessage: messages.documentation,
+                  isExternal: true,
+                  to: CSV_STRUCTURE_DOCUMENTATION_LINK
+                }, "documentation-link")
+              }
+            })
+          })]
+        })]
       })]
     })]
   });
@@ -2085,59 +2124,53 @@ const ExportFileSettingsStep = () => {
     onClose: onClose,
     size: 16,
     children: jsxRuntime.jsx(fullstory.Masking.Unmask, {
-      children: jsxRuntime.jsx(uiKit.Spacings.Stack, {
-        scale: "xxxl",
-        children: jsxRuntime.jsx(uiKit.Spacings.Stack, {
-          scale: "l",
-          children: jsxRuntime.jsxs(uiKit.Grid, {
-            gridRowGap: uiKit.designTokens.spacingM,
-            gridTemplateColumns: `calc(${uiKit.designTokens.constraint3} + ${uiKit.designTokens.spacingL}) auto`,
-            children: [jsxRuntime.jsx(uiKit.Grid.Item, {
-              children: jsxRuntime.jsx(uiKit.Text.Body, {
-                intlMessage: messages.scope
-              })
-            }), jsxRuntime.jsx(uiKit.Grid.Item, {
-              children: jsxRuntime.jsx(ExportScopeSection, {})
-            }), jsxRuntime.jsx(uiKit.Grid.Item, {
-              children: jsxRuntime.jsx(uiKit.Text.Body, {
-                intlMessage: messages.saveAs
-              })
-            }), jsxRuntime.jsx(uiKit.Grid.Item, {
-              children: jsxRuntime.jsxs(uiKit.Spacings.Stack, {
-                scale: "s",
-                children: [jsxRuntime.jsx(fullstory.Masking.Mask, {
-                  children: jsxRuntime.jsx(uiKit.TextField, {
-                    name: "fileName",
-                    onChange: formik.handleChange,
-                    onBlur: formik.handleBlur,
-                    value: _valuesInstanceProperty__default["default"](formik).fileName,
-                    title: intl.formatMessage(messages.fileName),
-                    touched: formik.touched.fileName,
-                    errors: mapFormikErrors(formik.errors.fileName),
-                    renderError: renderFileNameError
-                  })
-                }), jsxRuntime.jsx(uiKit.SelectField, {
-                  name: "outputFormat",
-                  onChange: handleOutputFormatChange,
-                  onBlur: formik.handleBlur,
-                  value: _valuesInstanceProperty__default["default"](formik).outputFormat,
-                  title: intl.formatMessage(messages.outputFormat),
-                  options: OUTPUT_FORMAT_OPTIONS,
-                  menuPortalTarget: document.body,
-                  menuPortalZIndex: Z_INDEX_DROPDOWN
-                })]
+      children: jsxRuntime.jsxs(uiKit.Grid, {
+        gridRowGap: uiKit.designTokens.spacingXl,
+        gridTemplateColumns: `calc(${uiKit.designTokens.constraint3} + ${uiKit.designTokens.spacingL}) auto`,
+        children: [jsxRuntime.jsx(uiKit.Grid.Item, {
+          children: jsxRuntime.jsx(uiKit.Text.Body, {
+            intlMessage: messages.scope
+          })
+        }), jsxRuntime.jsx(uiKit.Grid.Item, {
+          children: jsxRuntime.jsx(ExportScopeSection, {})
+        }), jsxRuntime.jsx(uiKit.Grid.Item, {
+          children: jsxRuntime.jsx(uiKit.Text.Body, {
+            intlMessage: messages.saveAs
+          })
+        }), jsxRuntime.jsx(uiKit.Grid.Item, {
+          children: jsxRuntime.jsxs(uiKit.Spacings.Stack, {
+            scale: "xl",
+            children: [jsxRuntime.jsx(fullstory.Masking.Mask, {
+              children: jsxRuntime.jsx(uiKit.TextField, {
+                name: "fileName",
+                onChange: formik.handleChange,
+                onBlur: formik.handleBlur,
+                value: _valuesInstanceProperty__default["default"](formik).fileName,
+                title: intl.formatMessage(messages.fileName),
+                touched: formik.touched.fileName,
+                errors: mapFormikErrors(formik.errors.fileName),
+                renderError: renderFileNameError
               })
-            }), shouldShowPreferences && jsxRuntime.jsxs(jsxRuntime.Fragment, {
-              children: [jsxRuntime.jsx(uiKit.Grid.Item, {
-                children: jsxRuntime.jsx(uiKit.Text.Body, {
-                  intlMessage: messages.csvSettings
-                })
-              }), jsxRuntime.jsx(uiKit.Grid.Item, {
-                children: jsxRuntime.jsx(ExportPreferenceSection, {})
-              })]
+            }), jsxRuntime.jsx(uiKit.SelectField, {
+              name: "outputFormat",
+              onChange: handleOutputFormatChange,
+              onBlur: formik.handleBlur,
+              value: _valuesInstanceProperty__default["default"](formik).outputFormat,
+              title: intl.formatMessage(messages.outputFormat),
+              options: OUTPUT_FORMAT_OPTIONS,
+              menuPortalTarget: document.body,
+              menuPortalZIndex: Z_INDEX_DROPDOWN
             })]
           })
-        })
+        }), shouldShowPreferences && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [jsxRuntime.jsx(uiKit.Grid.Item, {
+            children: jsxRuntime.jsx(uiKit.Text.Body, {
+              intlMessage: messages.csvSettings
+            })
+          }), jsxRuntime.jsx(uiKit.Grid.Item, {
+            children: jsxRuntime.jsx(ExportPreferenceSection, {})
+          })]
+        })]
       })
     })
   });
@@ -3322,11 +3355,11 @@ function getDefaultDropWrapperStyles(_dropAreaState) {
   return /*#__PURE__*/react.css("" , "" );
 }
 
-var ActiveDragDropArea = /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return require('./active-drag-drop-area-e9bf7129.cjs.prod.js' /* webpackChunkName: "active-drag-drop-area" */); }));
+var ActiveDragDropArea = /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return require('./active-drag-drop-area-42c9f210.cjs.prod.js' /* webpackChunkName: "active-drag-drop-area" */); }));
 
-var EnabledDropArea = /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return require('./enabled-drop-area-3161efde.cjs.prod.js' /* webpackChunkName: "enabled-drop-area" */); }));
+var EnabledDropArea = /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return require('./enabled-drop-area-dcdba4da.cjs.prod.js' /* webpackChunkName: "enabled-drop-area" */); }));
 
-var FileDropped = /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return require('./file-dropped-area-85fb3d1d.cjs.prod.js' /* webpackChunkName: "filed-dropped-area" */); }));
+var FileDropped = /*#__PURE__*/React.lazy(() => Promise.resolve().then(function () { return require('./file-dropped-area-9a3ec8d3.cjs.prod.js' /* webpackChunkName: "filed-dropped-area" */); }));
 
 function getDropArea(_ref) {
   let dropAreaState = _ref.dropAreaState,
@@ -3407,17 +3440,17 @@ const getChunkImport = locale => {
   const intlLocale = i18n.mapLocaleToIntlLocale(locale);
   switch (intlLocale) {
     case 'de':
-      return Promise.resolve().then(function () { return require(/* webpackChunkName: "export-resources-modal-i18n-de" */'./de-850971a3.cjs.prod.js'); });
+      return Promise.resolve().then(function () { return require(/* webpackChunkName: "export-resources-modal-i18n-de" */'./de-f3ef440e.cjs.prod.js'); });
     case 'es':
-      return Promise.resolve().then(function () { return require(/* webpackChunkName: "export-resources-modal-i18n-es" */'./es-e73368be.cjs.prod.js'); });
+      return Promise.resolve().then(function () { return require(/* webpackChunkName: "export-resources-modal-i18n-es" */'./es-a0812a71.cjs.prod.js'); });
     case 'fr-FR':
-      return Promise.resolve().then(function () { return require(/* webpackChunkName: "export-resources-modal-i18n-fr-FR" */'./fr-FR-0eab30ec.cjs.prod.js'); });
+      return Promise.resolve().then(function () { return require(/* webpackChunkName: "export-resources-modal-i18n-fr-FR" */'./fr-FR-5fbee168.cjs.prod.js'); });
     case 'ja':
       return Promise.resolve().then(function () { return require(/* webpackChunkName: "export-resources-modal-i18n-ja" */'./ja-37632763.cjs.prod.js'); });
     case 'pt-BR':
-      return Promise.resolve().then(function () { return require(/* webpackChunkName: "change-history-i18n-pt-BR" */'./pt-BR-ced88ff5.cjs.prod.js'); });
+      return Promise.resolve().then(function () { return require(/* webpackChunkName: "change-history-i18n-pt-BR" */'./pt-BR-53c6b1c2.cjs.prod.js'); });
     default:
-      return Promise.resolve().then(function () { return require(/* webpackChunkName: "export-resources-modal-i18n-en" */'./en-89430bcb.cjs.prod.js'); });
+      return Promise.resolve().then(function () { return require(/* webpackChunkName: "export-resources-modal-i18n-en" */'./en-fa1adbcf.cjs.prod.js'); });
   }
 };
 const loadMessages = async locale => {