@wix/bex-core 2.332.0 → 2.333.0

package/dist/cjs/state/ImportState/ImportState.js

@@ -17,33 +17,39 @@ var _detectFieldType = require("./detectFieldType");
 var _fieldEdit = require("./fieldEdit");
 /** Outcome of a server-side import job, derived from the job's progress. */
 
+/** A rejected row: its index into `csvRows` and the server's failure reason. */
+
 /**
  * Optional snapshot taken before the import runs, returning a `restore` used to
  * undo the import on cancel. See {@link BackupResult.restore} for the revert
  * contract under upsert.
  */
 
+/** The application error from a failed import job, handed to a resolver. */
+
 /**
- * Consumer hook for resolving a failed import job's message. An import runs
- * server-side, so a failure arrives on a 200 (the poll succeeds; the job
- * doesn't) with no HTTP error to carry the application error. Cairo hands the
- * consumer `run` — an operation that rejects with a synthetic, HTTP-error-shaped
- * error carrying the job's application error — and the consumer wraps it with
- * their own `withErrorHandler` + error-code map (their codes, their
- * translations), keeping the map coupled to the `withErrorHandler` call as
- * everywhere else (e.g. `fetchData`). The map is keyed by application-error code
- * (the v2 errorHandler shape, like `getExportAsyncJobErrors`):
+ * Consumer-supplied map from a failed import job's application-error code to a
+ * resolver that returns the message to show. An import runs server-side, so a
+ * failure arrives on a 200 (the poll succeeds; the job doesn't) with the
+ * application error in the job status. The consumer supplies only the
+ * code→message map (their codes, their translations) — ImportState applies it
+ * through the container's `errorHandler` internally, so the progress step can
+ * resolve the message via `getResolvedError`. The resolver receives the job's
+ * application error (its `code`/`description`/`data`):
  *
- *   onJobError: (run) =>
- *     errorHandler.withErrorHandler(run, {
- *       [jobErrorCode]: (error) => ({ message: translate(...) }),
- *     })
+ *   jobApplicationErrorMap: {
+ *     [jobErrorCode]: (error) => ({ message: translate(..., error.data) }),
+ *   }
  *
- * `withErrorHandler` attaches the map to the error object and re-rejects it, so
- * the progress step resolves a consumer-specific message via `getResolvedError`.
- * When omitted, the error still surfaces but resolves to the generic message.
+ * When omitted, a failed job falls back to the generic error message.
  */
 
+// `required` is added on top of the ambassador descriptor (which carries only
+// `id`/`header`): a field the destination mandates. Consumers set it — the
+// schema-backed config forwards `validation.required`, manual/platformized
+// configs set it per field — and the mapping step blocks import while any
+// required field has no column mapped to it (CAIRO-4452).
+
 // `NewFieldType`, `detectColumnType`, etc. are re-exported from the package via
 // the `ImportState` barrel (`./index`), which also exports `./detectFieldType`.
 
@@ -56,8 +62,16 @@ var _fieldEdit = require("./fieldEdit");
 // Per-type configuration for a new field, captured from the "Edit field" editor
 // (CAIRO-4398). All optional — an unedited field carries none and is created
 // from detected defaults only. `displayName` is intentionally not here: the
-// (possibly user-overridden) name is deduped and surfaced as
-// `NewFieldDefinition.displayName`.
+// (possibly user-overridden) name is deduped and surfaced as the field def's
+// `displayName`.
+//
+// This is core-internal storage on the column mapping, shared by both sources —
+// the CMS editor fills `validation`/`isPii`/`helpText`, the DataExtension editor
+// fills `permissions`/`isPii`/`helpText`/`deType`. The two never cross: which
+// subset is read is decided by the config's `dataSource` branch when the field
+// def is built (`_resolveFieldMapping`). The consumer-facing create callbacks
+// still receive distinct def types (`NewFieldDefinition` vs
+// `NewDataExtensionFieldDef`), so this superset is not part of the public API.
 
 // A new field to add to the collection schema during import. `key` is decided by
 // Cairo (derived from the column header — or the user's name override — deduped)
@@ -80,6 +94,17 @@ var _fieldEdit = require("./fieldEdit");
  * load.
  */
 
+/**
+ * Creates the pending new DataExtension custom fields before the rows are
+ * uploaded — the `destination` branch's counterpart to `updateSchema`. Its
+ * presence is the "create new field" opt-in for a DataExtension import. Receives
+ * the source-neutral pending columns (Cairo-decided keys + names + the edited
+ * config); the DataExtension source (`DataExtensionImportRef`) builds its own
+ * field shape from them, so no DataExtension-specific shape leaks into core.
+ * Optionally returns the updated fields map to merge into the table (CAIRO-4400);
+ * DataExtension refreshes its own schema in place, so returning `void` is fine.
+ */
+
 /**
  * How a CSV column is mapped:
  * - `existing` — into an existing collection field by id
@@ -91,18 +116,31 @@ var _fieldEdit = require("./fieldEdit");
  * - `null` — don't import (skip)
  */
 
+/** A `new`-mapped column with its deduped key + display name, handed to a
+ *  source's create callback so it can build its own field shape. */
+
+/**
+ * Where the import writes and how it creates new fields, split per source. The
+ * discriminant (`collectionId` vs `destination`) makes the two mutually
+ * exclusive and pairs each target with its own create-fields callback, so a CMS
+ * target can't be paired with a DataExtension create callback (or vice versa).
+ * Each branch's create members are optional — a plain import supplies none and
+ * is mapping-only.
+ */
+
 /**
  * The import inputs a consumer supplies. Satisfied both by a plain object (the
- * manual case) and by a live schema reference (`useSchemaImport` in
- * `@wix/patterns`) whose members are getters read on demand — so the async
- * schema load needn't resolve before `ImportState` is built. `ImportState` holds
- * it by reference (never spreads it) so those getters stay live.
+ * manual case) and by a live reference (`useSchemaImport` in `@wix/patterns`, or
+ * the internally-built `DataExtensionImportRef`) whose members are getters read
+ * on demand — so the async schema load needn't resolve before `ImportState` is
+ * built. `ImportState` holds it by reference (never spreads it) so those getters
+ * stay live.
  */
 
-// How long to keep the completed progress bar (100%) on screen before closing
-// the modal on a clean import. Without it, an import of very few rows finishes
-// near-instantly and the modal appears to vanish without ever showing the bar
-// reaching completion.
+// How long to hold the completed (100%) progress bar on screen before moving to
+// the summary step (CAIRO-4476). The job reports counts only when it finishes,
+// so the bar sits at 0 for the whole import and would otherwise flip straight to
+// the summary without the user ever seeing it reach completion.
 const COMPLETION_LINGER_MS = 600;
 
 // The Wix Data collection's id field key. A CSV column mapped to this field lets
@@ -185,7 +223,9 @@ class ImportState {
     (0, _defineProperty2.default)(this, "totalCount", 0);
     (0, _defineProperty2.default)(this, "result", {
       succeeded: 0,
-      failed: 0
+      failed: 0,
+      created: 0,
+      updated: 0
     });
     (0, _defineProperty2.default)(this, "isBackingUp", false);
     (0, _defineProperty2.default)(this, "isRestoring", false);
@@ -195,10 +235,11 @@ class ImportState {
     // Id of the running data-movement job, set once submitted — used to cancel it
     // (`terminateJob`) if the user closes mid-import.
     (0, _defineProperty2.default)(this, "_jobId", null);
-    // The column whose pending new field the field editor is currently editing.
-    // Not observable — transient wiring between `beginFieldEdit` and the editor's
-    // `applyFieldEdit` callback, never rendered.
-    (0, _defineProperty2.default)(this, "_editingHeader", null);
+    // The column whose pending new field the field editor is currently editing, or
+    // `null` when the editor is closed. Observable so the source's field-editor
+    // component (rendered via `renderFieldEditor`) opens/prefills itself when this
+    // is set and closes when it clears — the editor is decoupled from the layout.
+    (0, _defineProperty2.default)(this, "editingHeader", null);
     // Holds `updateSchema`'s returned fields map between field creation (pre-upload)
     // and success. Kept private/non-observable so it can't update columns mid-import;
     // it's promoted to the observable `createdFieldsMap` only on success.
@@ -233,7 +274,12 @@ class ImportState {
       hasMappings: _mobx.computed,
       hasNoMappedData: _mobx.computed,
       selectedFieldIds: _mobx.computed,
+      missingRequiredFields: _mobx.computed,
+      hasMissingRequiredFields: _mobx.computed,
       idMappedHeader: _mobx.computed,
+      editingHeader: _mobx.observable.ref,
+      editingMapping: _mobx.computed,
+      endFieldEdit: _mobx.action.bound,
       setWritePolicy: _mobx.action.bound,
       onUploadContinue: _mobx.action.bound,
       goToUpload: _mobx.action.bound,
@@ -242,7 +288,10 @@ class ImportState {
       setNewFieldConfig: _mobx.action.bound,
       beginFieldEdit: _mobx.action.bound,
       applyFieldEdit: _mobx.action.bound,
+      applyDataExtensionFieldEdit: _mobx.action.bound,
       close: _mobx.action.bound,
+      done: _mobx.action.bound,
+      downloadFailedRows: _mobx.action.bound,
       onFileSelected: _mobx.action.bound,
       startImport: _mobx.action.bound,
       reset: _mobx.action.bound
@@ -259,19 +308,36 @@ class ImportState {
 
   /** Wix Data collection the import writes into (unset for platformized). */
   get collectionId() {
-    return this.config.collectionId;
+    const ds = this.config.dataSource;
+    return 'collectionId' in ds ? ds.collectionId : undefined;
   }
   get destination() {
-    return this.config.destination;
+    const ds = this.config.dataSource;
+    return 'destination' in ds ? ds.destination : undefined;
   }
   get backup() {
     return this.config.backup;
   }
+
+  /** CMS create-fields callback, present only on the `collectionId` branch. */
   get updateSchema() {
-    return this.config.updateSchema;
+    const ds = this.config.dataSource;
+    return 'collectionId' in ds ? ds.updateSchema : undefined;
   }
-  get onJobError() {
-    return this.config.onJobError;
+
+  /** DataExtension create-fields callback, present only on the `destination` branch. */
+  get createDataExtensionFields() {
+    const ds = this.config.dataSource;
+    return 'destination' in ds ? ds.createFields : undefined;
+  }
+
+  /** DataExtension field-management for the editor, on the `destination` branch. */
+  get dataExtensionFieldManagement() {
+    const ds = this.config.dataSource;
+    return 'destination' in ds ? ds.fieldManagement : undefined;
+  }
+  get jobApplicationErrorMap() {
+    return this.config.jobApplicationErrorMap;
   }
 
   // The collection's id-field key; a schema-backed config may report a non-`_id`
@@ -320,6 +386,27 @@ class ImportState {
     return new Set(Object.values(this.mappingByHeader).filter(m => (m == null ? void 0 : m.kind) === 'existing').map(m => m.fieldId));
   }
 
+  /**
+   * Required destination fields that no CSV column is mapped to (CAIRO-4452).
+   * A required field is an existing collection field, so only an `existing`
+   * mapping can satisfy it — a "create new field" column can't. Covers both
+   * ways a required field ends up unmapped: the CSV has no matching column at
+   * all, or the user set its column to "don't import". Drives the footer
+   * indicator and blocks `startImport`.
+   */
+  get missingRequiredFields() {
+    return this.fields.filter(field => field.required && field.id != null && !this.selectedFieldIds.has(field.id));
+  }
+  get hasMissingRequiredFields() {
+    return this.missingRequiredFields.length > 0;
+  }
+
+  // Comma-separated display names of the missing required fields, for the block
+  // toast. Falls back to the field id when a field carries no header.
+  _missingRequiredFieldNames() {
+    return this.missingRequiredFields.map(field => field.header || field.id || '').filter(Boolean).join(', ');
+  }
+
   /**
    * The CSV header currently mapped to the collection's `_id` field, or `null`
    * when no column targets it. Drives both the "When items share the same ID"
@@ -337,12 +424,13 @@ class ImportState {
 
   /**
    * Whether columns may be mapped to a brand-new field created during import.
-   * When the config sets `canAddFields` (e.g. a schema's create-field permission)
-   * that gates it; otherwise the presence of `updateSchema` is the opt-in (see
-   * `getDefaultMapping`).
+   * The opt-in is the presence of the active `dataSource` branch's create
+   * callback — `updateSchema` (CMS) or `createFields` (DataExtension). A source
+   * that can't create fields (e.g. no create permission) supplies neither, so
+   * columns fall back to "don't import" (see `getDefaultMapping`).
    */
   get canCreateNewField() {
-    return this.config.canAddFields ?? this.config.updateSchema != null;
+    return this.updateSchema != null || this.createDataExtensionFields != null;
   }
 
   /**
@@ -375,7 +463,9 @@ class ImportState {
     this.totalCount = 0;
     this.result = {
       succeeded: 0,
-      failed: 0
+      failed: 0,
+      created: 0,
+      updated: 0
     };
     this._pendingFieldsMap = undefined;
     this.isBackingUp = false;
@@ -386,11 +476,10 @@ class ImportState {
   }
   async close() {
     // While on the progress step we treat close as a cancel — terminate the job
-    // and restore the backup — UNLESS the import already succeeded. On the
-    // success path `startImport` lingers ~600ms on the completed bar with the
-    // step still 'progress'; closing during that window must NOT restore (it
-    // would undo a clean import). A successful close just closes the modal and
-    // lets the success path do its collection refresh.
+    // and restore the backup — UNLESS the import already succeeded. On success
+    // `startImport` moves straight to the 'summary' step, so a close from there
+    // just closes the modal (the summary's own `done` is the normal exit); this
+    // guard covers only closing mid-import.
     if (this.currentStep === 'progress' && !this.importStatus.isSuccess) {
       var _this$_abortControlle2;
       this._cancelled = true;
@@ -414,6 +503,14 @@ class ImportState {
     }
     this.importModalState.close();
   }
+
+  /**
+   * Closes the summary step at the end of a completed import. The collection was
+   * already refreshed when the summary opened, so this only dismisses the modal.
+   */
+  done() {
+    this.importModalState.close();
+  }
   async _restoreBackup() {
     const restoreFn = this.restoreFn;
     if (!restoreFn) {
@@ -584,51 +681,44 @@ class ImportState {
       }
     });
   }
-  _showPartialSuccessToast() {
-    var _this$showToast3;
-    (_this$showToast3 = this.showToast) == null || _this$showToast3.call(this, {
-      type: 'WARNING',
-      message: this.translate('cairo.import.partialSuccessToast', {
-        failed: String(this.result.failed),
-        imported: String(this.result.succeeded)
-      }),
-      action: {
-        text: this.translate('cairo.import.downloadFailedRows'),
-        onClick: () => this._downloadFailedRows(),
-        removeToastOnClick: true
-      }
-    });
-  }
 
   /**
-   * Builds a plain, re-importable CSV of the rows the server rejected — the
-   * original headers plus just the failed rows — and hands it to `downloadCsv`.
-   * The failed rows come from the job's movement logs (which row failed), mapped
-   * back to the parsed `csvRows` we still hold in memory.
+   * Builds a re-importable CSV of the rows the server rejected and hands it to
+   * `downloadCsv`. Each failed row is prefixed with a leading "why it failed"
+   * column holding the server's error message, so the user can see and fix each
+   * reason. The failed rows (and their reasons) come from the job's movement
+   * logs, mapped back to the parsed `csvRows` we still hold in memory.
    */
-  async _downloadFailedRows() {
+  async downloadFailedRows() {
     var _this$downloadCsv;
     const jobId = this._jobId;
     if (!jobId) {
       return;
     }
-    let indices;
+    let failures;
     try {
-      indices = await this._fetchFailedRowIndices(jobId);
+      failures = await this._fetchFailedRows(jobId);
     } catch (error) {
       console.error('Fetching failed rows report failed', error);
       return;
     }
-    const failedRows = indices.map(index => this.csvRows[index]).filter(row => row != null);
-    if (failedRows.length === 0) {
+    const rows = failures.map(({
+      index,
+      reason
+    }) => {
+      const row = this.csvRows[index];
+      return row != null ? [reason, ...row] : null;
+    }).filter(row => row != null);
+    if (rows.length === 0) {
       return;
     }
-    const content = (0, _parseCsv.unparseCsv)(this.csvHeaders, failedRows);
+    const headers = [this.translate('cairo.import.failureReasonColumn'), ...this.csvHeaders];
+    const content = (0, _parseCsv.unparseCsv)(headers, rows);
     (_this$downloadCsv = this.downloadCsv) == null || _this$downloadCsv.call(this, content, `failed-${this.fileName || 'import.csv'}`);
   }
 
-  // Pages through the job's movement logs and returns the `csvRows` indices of
-  // the rows that failed. data-hub's CSV decoder
+  // Pages through the job's movement logs and returns, for each row that failed,
+  // its `csvRows` index and the server's failure reason. data-hub's CSV decoder
   // (wix-data-hub: packages/wix-data-hub-executor-c/src/plugins/formats/csv/
   // csv-binary-decoder.ts) parses with the `csv-parse` library (`columns: true`)
   // and sets `sourceItemId = "row ${++index + 1}"`, incrementing once **per
@@ -637,8 +727,8 @@ class ImportState {
   // `csvRows[0]`, i.e. `csvRows[N - 2]`. Because `csv-parse` is RFC-4180,
   // quoted cells containing embedded newlines are a single record, so they do
   // NOT shift the numbering. Out-of-range indices are guarded below.
-  async _fetchFailedRowIndices(jobId) {
-    const indices = [];
+  async _fetchFailedRows(jobId) {
+    const failures = [];
     let cursor;
     do {
       var _pagingMetadata$curso;
@@ -656,12 +746,15 @@ class ImportState {
         const fileLine = Number((_exec = /\d+/.exec(log.sourceItemId)) == null ? void 0 : _exec[0]);
         const index = fileLine - 2;
         if (Number.isInteger(index) && index >= 0 && index < this.csvRows.length) {
-          indices.push(index);
+          failures.push({
+            index,
+            reason: log.failure.description ?? ''
+          });
         }
       }
       cursor = (pagingMetadata == null ? void 0 : pagingMetadata.hasNext) && ((_pagingMetadata$curso = pagingMetadata.cursors) == null ? void 0 : _pagingMetadata$curso.next) || undefined;
     } while (cursor);
-    return indices;
+    return failures;
   }
   setMapping(header, fieldId) {
     this.mappingByHeader = {
@@ -711,24 +804,56 @@ class ImportState {
   }
 
   /**
-   * Marks which column's pending new field the field editor is currently
-   * editing, so a later `applyFieldEdit` (the editor's `onSubmit`) knows where to
-   * write the result.
+   * Opens the field editor for a column's pending new field: sets
+   * `editingHeader`, which the source's editor component watches to open and
+   * prefill itself. No-op if the column isn't mapped to a new field.
    */
   beginFieldEdit(header) {
-    this._editingHeader = header;
+    var _this$mappingByHeader;
+    if (((_this$mappingByHeader = this.mappingByHeader[header]) == null ? void 0 : _this$mappingByHeader.kind) === 'new') {
+      this.editingHeader = header;
+    }
+  }
+
+  /** Closes the field editor (clears `editingHeader`). */
+  endFieldEdit() {
+    this.editingHeader = null;
   }
 
   /**
-   * `onSubmit` handler for the field editor: maps the edited field spec into the
-   * column being edited (set via `beginFieldEdit`). No-op if nothing is being
+   * The `new` mapping currently being edited, or `null` when the editor is
+   * closed. The editor component reads this to prefill its form.
+   */
+  get editingMapping() {
+    if (this.editingHeader == null) {
+      return null;
+    }
+    const mapping = this.mappingByHeader[this.editingHeader];
+    return (mapping == null ? void 0 : mapping.kind) === 'new' ? mapping : null;
+  }
+
+  /**
+   * `onSubmit` handler for the CMS field editor: maps the edited field spec into
+   * the column being edited (set via `beginFieldEdit`). No-op if nothing is being
    * edited.
    */
   applyFieldEdit(field) {
-    if (this._editingHeader == null) {
+    if (this.editingHeader == null) {
+      return;
+    }
+    this.setNewFieldConfig(this.editingHeader, (0, _fieldEdit.toFieldEdit)(field));
+  }
+
+  /**
+   * `onSubmit` handler for the DataExtension field editor: maps the edited
+   * DataExtension draft (which carries per-audience permissions) into the column
+   * being edited. The `destination`-branch counterpart to `applyFieldEdit`.
+   */
+  applyDataExtensionFieldEdit(draft) {
+    if (this.editingHeader == null) {
       return;
     }
-    this.setNewFieldConfig(this._editingHeader, (0, _fieldEdit.toFieldEdit)(field));
+    this.setNewFieldConfig(this.editingHeader, (0, _fieldEdit.toDataExtensionFieldEdit)(draft));
   }
 
   /**
@@ -776,15 +901,15 @@ class ImportState {
       // The job ran server-side, so a failure arrives on a 200 (the poll
       // succeeded; the job didn't) with no HTTP error to carry the application
       // error. Build a synthetic, HTTP-error-shaped error (the error handler
-      // reads the code from `response.data.details.applicationError`) and hand
-      // the throwing operation to the consumer's `onJobError` so THEY wrap it
-      // with their own `withErrorHandler` + error-code map — `job.error` is the
-      // consumer's application error (their import business logic), so only they
-      // can map its codes, and the map stays coupled to the `withErrorHandler`
-      // call as everywhere else (e.g. `fetchData`). The map is attached to the
-      // error object, which the progress step resolves via `getResolvedError`.
-      // Without a handler the same error still throws, falling back to the
-      // generic message.
+      // reads the code from `response.data.details.applicationError`), then
+      // resolve it through the consumer's per-code map via `withErrorHandler` —
+      // the same way as `fetchData` etc. `job.error` is the consumer's
+      // application error (their import business logic), so only they can map
+      // its codes; they supply just the code→message map and we do the
+      // wrapping. `withErrorHandler` attaches the map to the error and
+      // re-rejects it, so the progress step resolves a consumer-specific
+      // message via `getResolvedError`. Without a map the same error still
+      // throws, falling back to the generic message.
       const error = Object.assign(new Error(`ImportJob.${((_job$error = job.error) == null ? void 0 : _job$error.code) ?? 'failed'}`), {
         response: {
           data: {
@@ -794,11 +919,17 @@ class ImportState {
           }
         }
       });
-      const run = () => Promise.reject(error);
-      if (this.onJobError) {
-        // The consumer wraps `run` with `withErrorHandler`; it re-rejects with
-        // `error` (now carrying their map), which propagates from here.
-        await this.onJobError(run);
+      const jobApplicationErrorMap = this.jobApplicationErrorMap;
+      if (jobApplicationErrorMap) {
+        // Adapt the consumer's code→message map into the error handler's
+        // `errorCodesMap`: each entry, when its code matches the job's
+        // application error, resolves with that error. `withErrorHandler`
+        // attaches the resolved message to `error` and re-rejects it, so the
+        // progress step surfaces it via `getResolvedError` — the consumer only
+        // supplies the map, not the wrapping.
+        const appError = job.error ?? {};
+        const errorCodesMap = Object.fromEntries(Object.entries(jobApplicationErrorMap).map(([code, resolve]) => [code, () => resolve(appError)]));
+        await this.errorHandler.withErrorHandler(() => Promise.reject(error), errorCodesMap);
       }
       throw error;
     }
@@ -826,10 +957,16 @@ class ImportState {
     };
   }
   _applyJobProgress(job) {
+    var _progress$itemsSucces, _progress$itemsSucces2;
     const progress = job.progress;
     const succeeded = (progress == null ? void 0 : progress.itemsSuccessful) ?? 0;
     const failed = (progress == null ? void 0 : progress.itemsRejected) ?? 0;
     const current = (progress == null ? void 0 : progress.current) ?? succeeded + failed;
+    // The server splits successful items into created (new) and updated
+    // (existing) — the summary step reports each. Absent on older jobs, in
+    // which case both stay 0 and only the total `succeeded` is shown.
+    const created = (progress == null || (_progress$itemsSucces = progress.itemsSuccessfulInfo) == null ? void 0 : _progress$itemsSucces.itemsCreated) ?? 0;
+    const updated = (progress == null || (_progress$itemsSucces2 = progress.itemsSuccessfulInfo) == null ? void 0 : _progress$itemsSucces2.itemsUpdated) ?? 0;
 
     // `totalCount` is fixed up front in `startImport` from the CSV row count
     // (one uploaded row per CSV row); polling only advances `processedCount`.
@@ -837,10 +974,15 @@ class ImportState {
       this.processedCount = Math.min(current, this.totalCount);
       this.result = {
         succeeded,
-        failed
+        failed,
+        created,
+        updated
       };
     });
   }
+  _lingerOnCompletion() {
+    return new Promise(resolve => setTimeout(resolve, COMPLETION_LINGER_MS));
+  }
   async _runBackup() {
     const backup = this.backup;
     if (!backup) {
@@ -872,9 +1014,6 @@ class ImportState {
     });
     return false;
   }
-  _lingerOnCompletion() {
-    return new Promise(resolve => setTimeout(resolve, COMPLETION_LINGER_MS));
-  }
 
   /**
    * Resolves every column to the final destination key used in the upload
@@ -885,18 +1024,21 @@ class ImportState {
    */
   async _resolveFieldMapping() {
     const resolved = {};
-    const newFields = [];
+    // Pending new columns with their deduped key + display name. Source-neutral;
+    // the per-source field def is built from these in `_createPendingFields`.
+    const pending = [];
     // Seed with existing field ids/display names so derived keys and names never
     // collide with them or with each other.
     const usedKeys = new Set(this.fields.map(field => field.id).filter(id => !!id));
     const usedNames = new Set(this.fields.map(field => field.header).filter(header => !!header));
+    const canCreate = this.canCreateNewField;
     for (const header of this.csvHeaders) {
       const mapping = this.mappingByHeader[header];
       if (mapping == null) {
         resolved[header] = null;
       } else if (mapping.kind === 'existing') {
         resolved[header] = mapping.fieldId;
-      } else if (this.updateSchema) {
+      } else if (canCreate) {
         var _mapping$displayName;
         // The user's name override (from the field editor) seeds the unique
         // name/key derivation; otherwise fall back to the column header.
@@ -907,34 +1049,79 @@ class ImportState {
         } = uniqueFieldNameAndKey(baseName, usedNames, usedKeys);
         usedKeys.add(key);
         usedNames.add(displayName);
-        newFields.push({
+        pending.push({
           key,
-          type: mapping.fieldType,
           displayName,
-          ...(mapping.config && {
-            config: mapping.config
-          })
+          mapping
         });
         resolved[header] = key;
       } else {
-        // "new" mapping without an `updateSchema` callback — nothing to map into.
+        // "new" mapping with no create callback on this source — nothing to map into.
         resolved[header] = null;
       }
     }
-    if (newFields.length > 0 && this.updateSchema) {
+    if (pending.length > 0) {
       // Stash the returned fields map to merge into the table on success; kept off
-      // the observable until then so columns don't update mid-import. Guard the
-      // empty map: SchemaState.mergeFields is a full replace, so merging `{}` would
-      // wipe every column — treat a missing/empty return as "nothing to merge".
-      const updated = await this.updateSchema(newFields);
-      this._pendingFieldsMap = updated && Object.keys(updated).length > 0 ? updated : undefined;
+      // the observable until then so columns don't update mid-import.
+      this._pendingFieldsMap = await this._createPendingFields(pending);
     }
     return resolved;
   }
+
+  /**
+   * Creates the pending new fields via the active `dataSource` branch's callback
+   * — `updateSchema` (CMS) or `createFields` (DataExtension) — building the
+   * source-specific field def from the shared, already-deduped pending columns.
+   * The callback may throw; `startImport` surfaces that as the error state.
+   */
+  async _createPendingFields(pending) {
+    const updateSchema = this.updateSchema;
+    const createDataExtensionFields = this.createDataExtensionFields;
+    let updated;
+    if (updateSchema) {
+      updated = await updateSchema(pending.map(({
+        key,
+        displayName,
+        mapping
+      }) => ({
+        key,
+        type: mapping.fieldType,
+        displayName,
+        ...(mapping.config && {
+          config: mapping.config
+        })
+      })));
+    } else if (createDataExtensionFields) {
+      // The DataExtension source builds its own field shape from the neutral
+      // pending columns — no DataExtension-specific def-building in core.
+      updated = await createDataExtensionFields(pending);
+    } else {
+      return undefined;
+    }
+
+    // Guard the empty map: SchemaState.mergeFields is a full replace, so merging
+    // `{}` would wipe every column — treat a missing/empty return as "nothing to
+    // merge".
+    return updated && Object.keys(updated).length > 0 ? updated : undefined;
+  }
   async startImport() {
     if (!this.hasMappings) {
       return;
     }
+
+    // Block import while any required destination field is unmapped and tell the
+    // user which (CAIRO-4452). The footer already flags this; the Import button
+    // stays enabled, so this is where the click is stopped.
+    if (this.hasMissingRequiredFields) {
+      var _this$showToast3;
+      (_this$showToast3 = this.showToast) == null || _this$showToast3.call(this, {
+        type: 'ERROR',
+        message: this.translate('cairo.import.missingRequiredMessage', {
+          fields: this._missingRequiredFieldNames()
+        })
+      });
+      return;
+    }
     this._cancelled = false;
     this._abortController = new AbortController();
 
@@ -953,7 +1140,9 @@ class ImportState {
       };
       this.result = {
         succeeded: 0,
-        failed: 0
+        failed: 0,
+        created: 0,
+        updated: 0
       };
       this._jobId = null;
       // Drop any fields map from a prior attempt so a no-new-fields "Try again"
@@ -1007,17 +1196,19 @@ class ImportState {
           ..._model.queryStatus.success,
           data: this.result
         };
+        // The job reports counts only when it finishes, so the bar sat at 0 for
+        // the whole import (CAIRO-4476). Snap it to 100% and hold it (below)
+        // before the summary step replaces the progress step, so the user sees
+        // the import reach completion.
+        this.processedCount = this.totalCount;
       });
 
-      // On a clean import, hold the completed (100%) progress bar on screen
-      // briefly so the completion is perceptible even for very few rows. Skip
-      // the wait when there are failed rows — that path closes and surfaces a
-      // toast instead.
-      if (this.result.failed === 0) {
-        await this._lingerOnCompletion();
-        if (this._cancelled) {
-          return;
-        }
+      // Keep the completed bar on screen briefly before moving on. `importStatus`
+      // is already success, so a close during this window just dismisses the
+      // modal (the `close()` guard doesn't treat it as a cancel).
+      await this._lingerOnCompletion();
+      if (this._cancelled) {
+        return;
       }
 
       // Success path only. `_pendingFieldsMap` holds this run's returned map — it's
@@ -1025,12 +1216,12 @@ class ImportState {
       // `_resolveFieldMapping`; snapshotting here keeps the merge success-gated.
       createdFields = this._pendingFieldsMap;
       (0, _mobx.runInAction)(() => {
-        // Rows the server rejected are reported via a toast (the downloadable
-        // failed-rows report is added by the failed-rows-report task).
-        if (this.result.failed > 0) {
-          this._showPartialSuccessToast();
-        }
-        this.importModalState.close();
+        // Import finished: show the summary step (created / updated / failed
+        // counts, plus a "Download CSV" of the failed rows when any failed).
+        // The modal stays open; the user dismisses it from the summary via
+        // `done`. Refresh the collection now so the table behind the modal is
+        // up to date by the time it closes.
+        this.currentStep = 'summary';
         this.collection.clearResultAndMoveToStart({
           force: true
         });