@commercetools-frontend-extensions/import-resources-modal 1.15.0 → 1.16.0

package/dist/commercetools-frontend-extensions-import-resources-modal.cjs.dev.js

@@ -549,6 +549,11 @@ var messages$5 = reactIntl.defineMessages({
     description: 'Generic notification message when file upload fails',
     defaultMessage: 'An unexpected error occurred during the file upload. Please try again, or contact support if this error occurs again.'
   },
+  uploadIsTakingTooLong: {
+    id: 'operations.import.resource.upload.uploadIsTakingTooLong',
+    description: 'Notification message when file upload is taking longer than expected',
+    defaultMessage: 'The upload took too long. Please reduce file size or split the data into smaller files.'
+  },
   missingRequiredField: {
     id: 'ImportResourcesModal.missingRequiredField',
     description: 'Error message displayed when a required field is missing',
@@ -1031,6 +1036,19 @@ const useUpload = () => {
       } else if (error.errorData?.invalid > 0) {
         actions.setUploadFileResponse(error.errorData);
         actions.setCurrentStep(CurrentStep$1.UploadResult);
+      } else if (error.statusCode === 408) {
+        actions.cancelImport();
+        showNotification({
+          kind: 'error',
+          domain: constants.DOMAINS.PAGE,
+          text: intl.formatMessage(messages$5.uploadIsTakingTooLong)
+        });
+        sentry.reportErrorToSentry(new Error('Upload File Error: The upload request timed out (408 Request Timeout)'), {
+          extra: {
+            resourceType: state.resourceType,
+            fileSizeInBytes: state.droppedFile?.size
+          }
+        });
       } else {
         actions.cancelImport();
         showNotification({
@@ -1039,6 +1057,19 @@ const useUpload = () => {
           text: intl.formatMessage(messages$5.unexpectedError)
         });
       }
+    } else if (error instanceof operations.PollingTimeoutError) {
+      actions.cancelImport();
+      showNotification({
+        kind: 'error',
+        domain: constants.DOMAINS.PAGE,
+        text: intl.formatMessage(messages$5.uploadIsTakingTooLong)
+      });
+      sentry.reportErrorToSentry(error, {
+        extra: {
+          resourceType: state.resourceType,
+          fileSizeInBytes: state.droppedFile?.size
+        }
+      });
     } else {
       actions.cancelImport();
       showNotification({
@@ -1335,9 +1366,14 @@ var messages$4 = reactIntl.defineMessages({
   },
   uploadErrorDescription: {
     id: 'ImportResourcesModal.uploadErrorDescription',
-    description: 'Title when errors detected while uploading file',
+    description: 'Title when errors detected while uploading file (old flow)',
     defaultMessage: 'There {errorsCount, plural, one {is <b>{errorsCount}</b> error} other {are <b>{errorsCount}</b> errors}} detected while uploading the file <b>{fileName}</b>.'
   },
+  uploadRowsErrorDescription: {
+    id: 'ImportResourcesModal.uploadRowsErrorDescription',
+    description: 'Title when errors detected while uploading file (new flow)',
+    defaultMessage: 'Found errors in <b>{errorsCount}</b> {errorsCount, plural, one {row} other {rows}} while uploading <b>{fileName}</b>.'
+  },
   supportedValuesDocumentation: {
     id: 'ImportResourcesModal.supportedValuesDocumentation',
     description: 'Link to the documentation for supported values',
@@ -1566,7 +1602,10 @@ const UploadErrorsModal = () => {
   const hasInvalidRecords = (state.uploadFileResponse?.invalid ?? 0) > 0;
   const isRowLevelErrors = hasInvalidRecords && (state.uploadFileResponse?.results?.length ?? 0) > 0;
   const isFileLevelErrors = state.fileUploadErrors.length > 0;
-  const errorsCount = isNewFlow ? state.uploadFileResponse?.invalid ?? 0 : isRowLevelErrors ? operations.getFileUploadErrorsCount(state.uploadFileResponse?.results) : state.fileUploadErrors.length;
+
+  // For new flow: use invalid rows count
+  // For old flow: use individual errors count (for backwards compatibility)
+  const rowsWithErrorsCount = isNewFlow ? state.uploadFileResponse?.invalid ?? 0 : isRowLevelErrors ? state.uploadFileResponse?.results?.length ?? 0 : state.fileUploadErrors.length;
   const documentationLink = operations.RESOURCE_TYPE_DOCUMENTATION_LINKS[state.resourceType];
   return jsxRuntime.jsx(applicationComponents.InfoDialog, {
     size: 16,
@@ -1580,10 +1619,10 @@ const UploadErrorsModal = () => {
           scale: "xs",
           children: [jsxRuntime.jsx(fullstory.Masking.Mask, {
             children: jsxRuntime.jsx(uiKit.Text.Body, {
-              intlMessage: _objectSpread$5(_objectSpread$5({}, messages$4.uploadErrorDescription), {}, {
+              intlMessage: _objectSpread$5(_objectSpread$5({}, isNewFlow ? messages$4.uploadRowsErrorDescription : messages$4.uploadErrorDescription), {}, {
                 values: {
                   fileName: state.droppedFile?.name,
-                  errorsCount: intl.formatNumber(errorsCount),
+                  errorsCount: intl.formatNumber(rowsWithErrorsCount),
                   b: getBold$2
                 }
               })

package/dist/commercetools-frontend-extensions-import-resources-modal.cjs.prod.js

@@ -549,6 +549,11 @@ var messages$5 = reactIntl.defineMessages({
     description: 'Generic notification message when file upload fails',
     defaultMessage: 'An unexpected error occurred during the file upload. Please try again, or contact support if this error occurs again.'
   },
+  uploadIsTakingTooLong: {
+    id: 'operations.import.resource.upload.uploadIsTakingTooLong',
+    description: 'Notification message when file upload is taking longer than expected',
+    defaultMessage: 'The upload took too long. Please reduce file size or split the data into smaller files.'
+  },
   missingRequiredField: {
     id: 'ImportResourcesModal.missingRequiredField',
     description: 'Error message displayed when a required field is missing',
@@ -1031,6 +1036,19 @@ const useUpload = () => {
       } else if (error.errorData?.invalid > 0) {
         actions.setUploadFileResponse(error.errorData);
         actions.setCurrentStep(CurrentStep$1.UploadResult);
+      } else if (error.statusCode === 408) {
+        actions.cancelImport();
+        showNotification({
+          kind: 'error',
+          domain: constants.DOMAINS.PAGE,
+          text: intl.formatMessage(messages$5.uploadIsTakingTooLong)
+        });
+        sentry.reportErrorToSentry(new Error('Upload File Error: The upload request timed out (408 Request Timeout)'), {
+          extra: {
+            resourceType: state.resourceType,
+            fileSizeInBytes: state.droppedFile?.size
+          }
+        });
       } else {
         actions.cancelImport();
         showNotification({
@@ -1039,6 +1057,19 @@ const useUpload = () => {
           text: intl.formatMessage(messages$5.unexpectedError)
         });
       }
+    } else if (error instanceof operations.PollingTimeoutError) {
+      actions.cancelImport();
+      showNotification({
+        kind: 'error',
+        domain: constants.DOMAINS.PAGE,
+        text: intl.formatMessage(messages$5.uploadIsTakingTooLong)
+      });
+      sentry.reportErrorToSentry(error, {
+        extra: {
+          resourceType: state.resourceType,
+          fileSizeInBytes: state.droppedFile?.size
+        }
+      });
     } else {
       actions.cancelImport();
       showNotification({
@@ -1335,9 +1366,14 @@ var messages$4 = reactIntl.defineMessages({
   },
   uploadErrorDescription: {
     id: 'ImportResourcesModal.uploadErrorDescription',
-    description: 'Title when errors detected while uploading file',
+    description: 'Title when errors detected while uploading file (old flow)',
     defaultMessage: 'There {errorsCount, plural, one {is <b>{errorsCount}</b> error} other {are <b>{errorsCount}</b> errors}} detected while uploading the file <b>{fileName}</b>.'
   },
+  uploadRowsErrorDescription: {
+    id: 'ImportResourcesModal.uploadRowsErrorDescription',
+    description: 'Title when errors detected while uploading file (new flow)',
+    defaultMessage: 'Found errors in <b>{errorsCount}</b> {errorsCount, plural, one {row} other {rows}} while uploading <b>{fileName}</b>.'
+  },
   supportedValuesDocumentation: {
     id: 'ImportResourcesModal.supportedValuesDocumentation',
     description: 'Link to the documentation for supported values',
@@ -1566,7 +1602,10 @@ const UploadErrorsModal = () => {
   const hasInvalidRecords = (state.uploadFileResponse?.invalid ?? 0) > 0;
   const isRowLevelErrors = hasInvalidRecords && (state.uploadFileResponse?.results?.length ?? 0) > 0;
   const isFileLevelErrors = state.fileUploadErrors.length > 0;
-  const errorsCount = isNewFlow ? state.uploadFileResponse?.invalid ?? 0 : isRowLevelErrors ? operations.getFileUploadErrorsCount(state.uploadFileResponse?.results) : state.fileUploadErrors.length;
+
+  // For new flow: use invalid rows count
+  // For old flow: use individual errors count (for backwards compatibility)
+  const rowsWithErrorsCount = isNewFlow ? state.uploadFileResponse?.invalid ?? 0 : isRowLevelErrors ? state.uploadFileResponse?.results?.length ?? 0 : state.fileUploadErrors.length;
   const documentationLink = operations.RESOURCE_TYPE_DOCUMENTATION_LINKS[state.resourceType];
   return jsxRuntime.jsx(applicationComponents.InfoDialog, {
     size: 16,
@@ -1580,10 +1619,10 @@ const UploadErrorsModal = () => {
           scale: "xs",
           children: [jsxRuntime.jsx(fullstory.Masking.Mask, {
             children: jsxRuntime.jsx(uiKit.Text.Body, {
-              intlMessage: _objectSpread$5(_objectSpread$5({}, messages$4.uploadErrorDescription), {}, {
+              intlMessage: _objectSpread$5(_objectSpread$5({}, isNewFlow ? messages$4.uploadRowsErrorDescription : messages$4.uploadErrorDescription), {}, {
                 values: {
                   fileName: state.droppedFile?.name,
-                  errorsCount: intl.formatNumber(errorsCount),
+                  errorsCount: intl.formatNumber(rowsWithErrorsCount),
                   b: getBold$2
                 }
               })

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

@@ -10,7 +10,7 @@ import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';
 import _everyInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/every';
 import { defineMessages, useIntl, FormattedMessage, IntlProvider } from 'react-intl';
 import { useApplicationContext } from '@commercetools-frontend/application-shell-connectors';
-import { deleteImportContainer, FileDroppedArea, DisabledDropArea, EnabledDropArea, ActiveDragDropArea, COLUMN_DELIMITERS, useFileUpload, validateDelimiter, getRowCount, toBytes, isAbortError, HttpError, formatKeys, isError, IMPORT_MAX_FILE_SIZE_MB, IMPORT_LEGACY_MAX_FILE_SIZE_MB, IMPORT_MAX_ITEM_COUNT, IMPORT_LEGACY_MAX_ROW_COUNT, assertResourceType, FileDropArea as FileDropArea$1, InfoBox, CT_API_DOCS_URL, UploadSeparator, UploadSettings, useFetchFileImportJobRecords, mapUploadFileErrorsResponseToUploadFileErrorRows, UnexpectedColumnError, extractErrorDescriptionFromValidationMessage, formatErrorCode, getFileUploadErrorsCount, RESOURCE_TYPE_DOCUMENTATION_LINKS, mapFileUploadErrorsToUploadFileErrorRows, getValidatedColumns, processFileImportJob, processUploadedFile, UploadingModal, UnexpectedResourceTypeError as UnexpectedResourceTypeError$1, RESOURCE_TYPE_TEMPLATE_DOWNLOAD_LINKS, isResourceType } from '@commercetools-frontend-extensions/operations';
+import { deleteImportContainer, FileDroppedArea, DisabledDropArea, EnabledDropArea, ActiveDragDropArea, COLUMN_DELIMITERS, useFileUpload, validateDelimiter, getRowCount, toBytes, isAbortError, HttpError, formatKeys, PollingTimeoutError, isError, IMPORT_MAX_FILE_SIZE_MB, IMPORT_LEGACY_MAX_FILE_SIZE_MB, IMPORT_MAX_ITEM_COUNT, IMPORT_LEGACY_MAX_ROW_COUNT, assertResourceType, FileDropArea as FileDropArea$1, InfoBox, CT_API_DOCS_URL, UploadSeparator, UploadSettings, useFetchFileImportJobRecords, mapUploadFileErrorsResponseToUploadFileErrorRows, UnexpectedColumnError, extractErrorDescriptionFromValidationMessage, formatErrorCode, RESOURCE_TYPE_DOCUMENTATION_LINKS, mapFileUploadErrorsToUploadFileErrorRows, getValidatedColumns, processFileImportJob, processUploadedFile, UploadingModal, UnexpectedResourceTypeError as UnexpectedResourceTypeError$1, RESOURCE_TYPE_TEMPLATE_DOWNLOAD_LINKS, isResourceType } from '@commercetools-frontend-extensions/operations';
 import _slicedToArray from '@babel/runtime-corejs3/helpers/esm/slicedToArray';
 import React, { useContext, useMemo, useState, useEffect } from 'react';
 import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
@@ -528,6 +528,11 @@ var messages$5 = defineMessages({
     description: 'Generic notification message when file upload fails',
     defaultMessage: 'An unexpected error occurred during the file upload. Please try again, or contact support if this error occurs again.'
   },
+  uploadIsTakingTooLong: {
+    id: 'operations.import.resource.upload.uploadIsTakingTooLong',
+    description: 'Notification message when file upload is taking longer than expected',
+    defaultMessage: 'The upload took too long. Please reduce file size or split the data into smaller files.'
+  },
   missingRequiredField: {
     id: 'ImportResourcesModal.missingRequiredField',
     description: 'Error message displayed when a required field is missing',
@@ -1010,6 +1015,19 @@ const useUpload = () => {
       } else if (error.errorData?.invalid > 0) {
         actions.setUploadFileResponse(error.errorData);
         actions.setCurrentStep(CurrentStep$1.UploadResult);
+      } else if (error.statusCode === 408) {
+        actions.cancelImport();
+        showNotification({
+          kind: 'error',
+          domain: DOMAINS.PAGE,
+          text: intl.formatMessage(messages$5.uploadIsTakingTooLong)
+        });
+        reportErrorToSentry(new Error('Upload File Error: The upload request timed out (408 Request Timeout)'), {
+          extra: {
+            resourceType: state.resourceType,
+            fileSizeInBytes: state.droppedFile?.size
+          }
+        });
       } else {
         actions.cancelImport();
         showNotification({
@@ -1018,6 +1036,19 @@ const useUpload = () => {
           text: intl.formatMessage(messages$5.unexpectedError)
         });
       }
+    } else if (error instanceof PollingTimeoutError) {
+      actions.cancelImport();
+      showNotification({
+        kind: 'error',
+        domain: DOMAINS.PAGE,
+        text: intl.formatMessage(messages$5.uploadIsTakingTooLong)
+      });
+      reportErrorToSentry(error, {
+        extra: {
+          resourceType: state.resourceType,
+          fileSizeInBytes: state.droppedFile?.size
+        }
+      });
     } else {
       actions.cancelImport();
       showNotification({
@@ -1314,9 +1345,14 @@ var messages$4 = defineMessages({
   },
   uploadErrorDescription: {
     id: 'ImportResourcesModal.uploadErrorDescription',
-    description: 'Title when errors detected while uploading file',
+    description: 'Title when errors detected while uploading file (old flow)',
     defaultMessage: 'There {errorsCount, plural, one {is <b>{errorsCount}</b> error} other {are <b>{errorsCount}</b> errors}} detected while uploading the file <b>{fileName}</b>.'
   },
+  uploadRowsErrorDescription: {
+    id: 'ImportResourcesModal.uploadRowsErrorDescription',
+    description: 'Title when errors detected while uploading file (new flow)',
+    defaultMessage: 'Found errors in <b>{errorsCount}</b> {errorsCount, plural, one {row} other {rows}} while uploading <b>{fileName}</b>.'
+  },
   supportedValuesDocumentation: {
     id: 'ImportResourcesModal.supportedValuesDocumentation',
     description: 'Link to the documentation for supported values',
@@ -1545,7 +1581,10 @@ const UploadErrorsModal = () => {
   const hasInvalidRecords = (state.uploadFileResponse?.invalid ?? 0) > 0;
   const isRowLevelErrors = hasInvalidRecords && (state.uploadFileResponse?.results?.length ?? 0) > 0;
   const isFileLevelErrors = state.fileUploadErrors.length > 0;
-  const errorsCount = isNewFlow ? state.uploadFileResponse?.invalid ?? 0 : isRowLevelErrors ? getFileUploadErrorsCount(state.uploadFileResponse?.results) : state.fileUploadErrors.length;
+
+  // For new flow: use invalid rows count
+  // For old flow: use individual errors count (for backwards compatibility)
+  const rowsWithErrorsCount = isNewFlow ? state.uploadFileResponse?.invalid ?? 0 : isRowLevelErrors ? state.uploadFileResponse?.results?.length ?? 0 : state.fileUploadErrors.length;
   const documentationLink = RESOURCE_TYPE_DOCUMENTATION_LINKS[state.resourceType];
   return jsx(InfoDialog, {
     size: 16,
@@ -1559,10 +1598,10 @@ const UploadErrorsModal = () => {
           scale: "xs",
           children: [jsx(Masking.Mask, {
             children: jsx(Text.Body, {
-              intlMessage: _objectSpread$5(_objectSpread$5({}, messages$4.uploadErrorDescription), {}, {
+              intlMessage: _objectSpread$5(_objectSpread$5({}, isNewFlow ? messages$4.uploadRowsErrorDescription : messages$4.uploadErrorDescription), {}, {
                 values: {
                   fileName: state.droppedFile?.name,
-                  errorsCount: intl.formatNumber(errorsCount),
+                  errorsCount: intl.formatNumber(rowsWithErrorsCount),
                   b: getBold$2
                 }
               })

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@commercetools-frontend-extensions/import-resources-modal",
   "description": "Shared import modal for importing resources",
-  "version": "1.15.0",
+  "version": "1.16.0",
   "license": "BSD-3-Clause",
   "publishConfig": {
     "access": "public"
@@ -23,7 +23,7 @@
     "@formatjs/cli": "6.7.4",
     "babel-plugin-module-resolver": "^5.0.2",
     "jest": "30.2.0",
-    "lodash": "4.17.21",
+    "lodash": "4.17.23",
     "lodash.truncate": "4.4.2",
     "moment": "2.30.1",
     "omit-empty-es": "^1.1.3",
@@ -31,7 +31,7 @@
     "pluralize": "8.0.0",
     "prop-types": "15.8.1",
     "ramda": "^0.32.0",
-    "@commercetools-frontend-extensions/operations": "3.3.0"
+    "@commercetools-frontend-extensions/operations": "3.5.0"
   },
   "devDependencies": {
     "@commercetools-frontend/actions-global": "25.1.0",